/* G) Catalogos */
.sudi_table_container.flex_catalog {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: flex-start;
    justify-content: flex-start;
    gap: 20px;
    letter-spacing: 0px;
    width: 95%;
    margin: 2% auto 2%;
    padding-bottom: 2.5%;
    box-sizing: border-box;
}

.sudi_table_container.flex_catalog .catalog_element {
    position: relative;
    flex: 0 1 calc(25% - 15px);
    max-width: 280px;
    min-width: 220px;
    width: 100%;
    height: auto;
    margin: 0;
    background: #FFFFFF;
    border: var(--border-gray-low) solid thin;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.sudi_table_container.flex_catalog .catalog_element:hover {
    border-color: var(--border-main-low);
    box-shadow: 0 16px 32px -24px rgba(2, 45, 90, .65);
    transform: translateY(-2px);
}

.sudi_table_container.flex_catalog .catalog_element .catalog_element-image {
    height: 200px;
    background-color: var(--bg-gray-low);
    border-bottom: var(--border-gray-low) solid thin;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.sudi_table_container.flex_catalog .catalog_element .catalog_element-title {
    background: var(--bg-main-high);
    padding: 15px 20px;
    width: 100%;
    text-align: center;
    display: block;
    box-sizing: border-box;
    color: var(--text-light-alpha);
    font-family: var(--font-medium);
    line-height: 1.25;
}

.sudi_table_container.flex_catalog .catalog_element.descriptor {
    background-color: #FFFFFF;
    display: flex;
    min-height: 0;
    flex-direction: column;
    cursor: pointer;
}

.sudi_table_container.flex_catalog .catalog_element.descriptor .element_description {
    margin: 0;
    padding: 16px 18px 14px;
    border-bottom: var(--border-gray-low) solid thin;
    box-sizing: border-box;
    min-height: 74px;
}

.sudi_table_container.flex_catalog .catalog_element.descriptor .element_description p {
    color: var(--text-gray-medium);
    font-size: .9em;
    line-height: 1.35;
    word-break: break-word;
}

.sudi_table_container.flex_catalog .catalog_element.descriptor .element_description p + p {
    margin-top: 8px;
}

.sudi_table_container.flex_catalog .catalog_element.descriptor .element_description span {
    color: var(--text-main-high);
    display: block;
    font-family: var(--font-semibold);
    margin-top: 4px;
}

.sudi_table_container.flex_catalog .catalog_element.descriptor .catalog_element-media {
    width: 100%;
    max-width: 100%;
    height: 150px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background-color: var(--bg-gray-low);
    border-bottom: var(--border-gray-low) solid thin;
}

.sudi_table_container.flex_catalog .catalog_element.descriptor .catalog_element-media.is-empty {
    height: 72px;
    background-color: #FFFFFF;
}

.sudi_table_container.flex_catalog .catalog_element.descriptor .catalog_element-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    box-sizing: border-box;
    padding: 16px;
    display: block;
}

.sudi_table_container.flex_catalog .catalog_element.descriptor .catalog_element-media i {
    color: var(--text-gray-low);
    font-size: 1.45em;
    opacity: .6;
}

@media (min-width: 901px) and (max-width: 1280px) {
    .sudi_table_container.flex_catalog .catalog_element {
        flex-basis: calc(33.333% - 14px);
        max-width: 280px;
    }
}

@media (min-width: 621px) and (max-width: 900px) {
    .sudi_table_container.flex_catalog .catalog_element {
        flex-basis: calc(50% - 10px);
        max-width: 280px;
    }
}

@media (min-width: 100px) and (max-width: 620px) {
    .sudi_table_container.flex_catalog {
        gap: 16px;
        width: 90%;
    }

    .sudi_table_container.flex_catalog .catalog_element {
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
    }
}



/* Estilos de curtain */

.summary_container {
    margin: 50px auto;
    display: block;
    width: 80%;
    background-color: #f5f8fa;
    padding-bottom: 20px;
}

.summary_header {
    width: 100%;
    height: 65px;
    font-size: 1.1em;
    line-height: 4;
    padding-left: 20px;
    box-sizing: border-box;
    color: white;
    background-color: #000;
    opacity: .95;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}

.form_title {
    text-shadow: 0 1px 1px rgb(0 0 0 / 25%);
    /* font-size: 1.7em; */
}

.this_close:hover {
    color: rgba(231, 49, 49);
}

#submenu_manage {
    margin: 0px auto;
    text-align: right;
    width: 90%;
}

.btn_menu_manage {
    border-color: inherit;
    display: inline-block;
    cursor: pointer;
    color: white;
    padding: 10px;
    margin: 10px;
    background-color: #3b92cf;
    border-radius: 5px;
}

.summary_title {
    border-bottom: rgb(120, 101, 146) 4px solid;
    background-color: #342847;
    font-family: 'montserratlight';
    box-sizing: border-box;
    padding-bottom: 10px;
    padding-left: 10px;
    position: relative;
    padding-top: 10px;
    margin-top: 30px;
    color: #fff;
    width: 100%;
}

.summary_title .this_close {
    margin-top: -10px;
    height: initial;
    width: initial;
    padding: 10px;
}

.summary_content {
    margin: 20px auto;
    overflow: auto;
    width: 90%;
}

.summary_table {
    letter-spacing: -5px;
    max-height: 600px;
    margin: 20px 0px;
    overflow: auto;
    clear: both;
}

.summary_subtitles {
    background-color: #e4e4e4;
    padding: 10px 0px 5px;
    display: block;
    height: auto;
    width: 100%;
}

.summary_col {
    border-left: #ccc 1px solid;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    padding-left: 20px;
}

.summary_col p {
    letter-spacing: 0px;
    font-size: .8em;
    color: #676767;
}

.summary_row {
    position: relative;
    padding: 5px 0px;
    margin: 0px;
}

.summary_row:nth-child(odd) {
    background-color: #f3f3f3;
}

.summary_row:nth-child(even) {
    background-color: #FFFFFF;
}

.summary_row p {
    font-size: .8em;
    color: #808080;
}

.list_image_auto {
    width: auto;
    max-width: 150px;
    height: 100%;
}

a.btn-list, span.btn-list {
    font-size: .9em;
    text-decoration: none;
    display: flex;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    align-items: center;
    justify-content: center;
    color: white;
    background-color: #68ab71;
    border: #e3e4ea solid thin;
    cursor: pointer;
    text-shadow: 0 1px 1px rgb(0 0 0 / 25%);
    letter-spacing: .05em;
}

a.btn-list:active, span.btn-list:active {
    opacity: .5;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    font-size: 1em;
}

a.btn-list:hover, span.btn-list:hover {
    opacity: .8;
}

.main-upbar {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: center;
    border-bottom: #e2e7f0 solid thin;
}

.main-upbar span {
    display: flex;
    width: auto;
    height: inherit;
    color: #656578;
    transition: all .5s ease;
    font-size: .9em;
    padding: 0px 10px;
    align-items: center;
    cursor: pointer;
}

.main-upbar span:hover {
    background-color: rgba(0, 0, 0, .02);
    color: #212e59;
}

.main-upbar span p {
    font-size: .9em;
    color: #656578;
}

.sudi_tb_container {
    margin: 40px auto 20px auto;
}

.main-upbar span i {}

span.btn-present {
    display: inline-flex;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 15px;
    background-color: #709a71;
    justify-content: center;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--btn-upbar-bg);
    color: var(--btn-upbar-color);
}

.man-inst-multipletabla {
    background-color: #4c4c4c;
    width: fit-content;
    padding: 1em;
    color: #fff;
    margin: 1em 0 1em -15px;
    display: flex;
}

/*auto by id*/

.sessions_form .subtitle_manage {
    background-color: #3b92cf;
    box-sizing: border-box;
    text-align: left;
    width: 100%;
    opacity: 1;
}

.sessions_container {
    margin: 20px 0px;
    flex-wrap: wrap;
    display: flex;
    padding: 0px;
    border: none;
}

.participant_add {
    background-color: #4184f3;
    border-radius: 15px;
    padding: 5px 15px;
    width: max-content;
    margin: 10px 0px;
}

.participant_add p {
    background-color: #4184f3;
    vertical-align: middle;
    display: inline-block;
    color: #fff;
}

.participant_delete {
    background-color: #fff;
    vertical-align: middle;
    display: inline-block;
    border-radius: 10px;
    padding: 3px 5px;
    color: #4184f3;
    font-size: .7em;
    cursor: pointer;
}

.participant_copy {
    background-color: #fff;
    vertical-align: middle;
    display: inline-block;
    border-radius: 10px;
    padding: 3px 5px;
    color: #4184f3;
    font-size: .7em;
    cursor: pointer;
}

.participant_copy_all {
    background-color: #fff;
    vertical-align: middle;
    display: inline-block;
    border-radius: 10px;
    padding: 3px 5px;
    color: #4184f3;
    font-size: .7em;
    cursor: pointer;
}

.get_participant {
    display: inline-block;
    margin-top: 40px;
    font-size: 1.5em;
    color: #56bbff;
    cursor: pointer;
}

.subtitle_manage, .manage_subtitle {
    background-color: #05092D;
    text-align: center;
    padding: 10px 10px;
    color: #ffffff;
    width: 150px;
    border-radius: 20px;
    margin: 15px 0px;
}

.bar_element:hover, .bar_element.selected {
    background-color: #ed1c25;
}

#info_container.hidden {
    background-color: #25368b;
}

.manage_title_icon{ padding-right: 15px; }

#login_main_logo {
    width: 170px;
    background-size: contain;
}

.login_buttons {
    text-align: center;
    color: rgb(255 255 255 / 90%);
}

input[type="checkbox"]:checked + label span, input[type="radio"]:checked + label span {
    background-color: #ed1c25;
    border: #2b3845 solid thin;
}

#sub_controls a.download_layout{
    height: 50px;
    border-radius: 5px;
    padding: 0px 10px;
    background-color: var(--btn-upbar-bg);
    color: var(--btn-upbar-color);
    cursor: pointer;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    margin: 0px 5px;
    text-decoration: none;
}

#sub_controls a i {
    opacity: .5;
    font-size: 1.5em !important;
    flex: 0 0 20px;
    margin: 0px 10px 0px 0px;
}

#sub_controls a.download_layout:hover {
    background-color: var(--btn-upbar-bg-hover);
    color: var(--btn-color-dark);
}


/* HOME */
#home_container{ padding: 0 30px 30px;}

.align-cont, #logo_emp{
    display: flex;
    gap: 20px;
}
.left-box{
    display: grid;
    gap: 20px;
}
.left-box, .right-box{
    width: 50%;
    margin: 20px 0 0;
}
.box{
    width: 100%;
    border-radius: 7px;
    background: #F7F8FA;
    box-sizing: border-box;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: fit-content;
}
.box .box_cc_info p { 
    display: grid;
    /* grid-template-columns: 50% 1fr; */
    align-items: center;
    margin-bottom: 10px;
}
.box .box_cc_info span { font-weight: bold;}
#info_container .box h1{ color: #000; margin: 0;}

#logo_emp img{ margin: 20px auto; width: 150px;}

#home_photo{
    display: block;
    width: 150px;
    height: 150px;
    background-color: #FFF;
    border-radius: 50%;
    background-position: center center;
    background-size: cover;
    border: var(--bar-icon-color) solid 2px;
    margin: 20px 0px;
}

.cc_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}
.cc_box i{
    color: var(--main-color);;
}

.right-box .align-cont{
    justify-content: center;
    gap: 50px;
}
.right-box .box{
    height: 100%;
}

.button-wp{
    height: 50px;
    border-radius: 5px;
    padding: 0px 10px;
    background-color: var(--btn-upbar-bg);
    color: var(--btn-upbar-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: auto;
    text-decoration: none;
}
.button-wp i{
    opacity: 0.5;
    font-size: 1.5em !important;
    flex: 0 0 20px;
    margin: 0px 10px 0px 0px;
}

.button-wp:hover,
.button-home:hover{
    background-color: var(--btn-upbar-bg-hover);
    color: var(--btn-color-dark);
}

.button-home{
    text-decoration: none;
    background-color: var(--btn-upbar-bg);
    color: var(--btn-upbar-color);
    display: flex;
    align-items: center;
    height: 100px;
    width: fit-content;
    padding: 0 100px;
    border-radius: 5px;
    margin: auto;
    text-align: center;
}
@media screen and (min-width: 1020px) and (max-width: 1370px),
screen and (max-width: 869px) {
    .right-box .align-cont {
        justify-content: center;
        gap: 10px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media screen and (max-width: 1020px) {
    .align-cont{
        flex-wrap: wrap;
    }
    .left-box, .right-box {
        width: 100%;
    }
}

@media screen and (max-width: 869px) {

}