@media (min-width: 650px) {
    .d-smd-none {
        display: none !important;
    }

    .d-smd-inline {
        display: inline !important;
    }

    .d-smd-flex {
        display: flex !important;
    }

    .d-smd-block {
        display: block !important;
    }

    .order-smd-0 {
        order: 0 !important;
    }

    .order-smd-1 {
        order: 1 !important;
    }

    .order-smd-2 {
        order: 2 !important;
    }

    .order-smd-3 {
        order: 3 !important;
    }

    .order-smd-4 {
        order: 4 !important;
    }

    .order-smd-5 {
        order: 5 !important;
    }

    .order-smd-first {
        order: -1 !important;
    }

    .order-smd-last {
        order: 6 !important;
    }
}

/* Bootstrap-like fractional column classes: .col-<breakpoint>-<n>-5 for n from 1 to 12 */

/* Extra small (xs) — default */
.col-1-5 {
    flex: 0 0 12.5%;
    width: 12.5%;
}

.col-2-5 {
    flex: 0 0 20.8333%;
    width: 20.8333%;
}

.col-3-5 {
    flex: 0 0 29.1667%;
    width: 29.1667%;
}

.col-4-5 {
    flex: 0 0 37.5%;
    width: 37.5%;
}

.col-5-5 {
    flex: 0 0 45.8333%;
    width: 45.8333%;
}

.col-6-5 {
    flex: 0 0 54.1667%;
    width: 54.1667%;
}

.col-7-5 {
    flex: 0 0 62.5%;
    width: 62.5%;
}

.col-8-5 {
    flex: 0 0 70.8333%;
    width: 70.8333%;
}

.col-9-5 {
    flex: 0 0 79.1667%;
    width: 79.1667%;
}

.col-10-5 {
    flex: 0 0 87.5%;
    width: 87.5%;
}

.col-11-5 {
    flex: 0 0 95.8333%;
    width: 95.8333%;
}

.col-12-5 {
    flex: 0 0 104.1667%;
    width: 104.1667%;
}

/* Small (sm) */
@media (min-width: 576px) {
    .col-sm-1-5 {
        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .col-sm-2-5 {
        flex: 0 0 20.8333%;
        width: 20.8333%;
    }

    .col-sm-3-5 {
        flex: 0 0 29.1667%;
        width: 29.1667%;
    }

    .col-sm-4-5 {
        flex: 0 0 37.5%;
        width: 37.5%;
    }

    .col-sm-5-5 {
        flex: 0 0 45.8333%;
        width: 45.8333%;
    }

    .col-sm-6-5 {
        flex: 0 0 54.1667%;
        width: 54.1667%;
    }

    .col-sm-7-5 {
        flex: 0 0 62.5%;
        width: 62.5%;
    }

    .col-sm-8-5 {
        flex: 0 0 70.8333%;
        width: 70.8333%;
    }

    .col-sm-9-5 {
        flex: 0 0 79.1667%;
        width: 79.1667%;
    }

    .col-sm-10-5 {
        flex: 0 0 87.5%;
        width: 87.5%;
    }

    .col-sm-11-5 {
        flex: 0 0 95.8333%;
        width: 95.8333%;
    }

    .col-sm-12-5 {
        flex: 0 0 104.1667%;
        width: 104.1667%;
    }
}

/* Medium (md) */
@media (min-width: 768px) {
    .col-md-1-5 {
        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .col-md-2-5 {
        flex: 0 0 20.8333%;
        width: 20.8333%;
    }

    .col-md-3-5 {
        flex: 0 0 29.1667%;
        width: 29.1667%;
    }

    .col-md-4-5 {
        flex: 0 0 37.5%;
        width: 37.5%;
    }

    .col-md-5-5 {
        flex: 0 0 45.8333%;
        width: 45.8333%;
    }

    .col-md-6-5 {
        flex: 0 0 54.1667%;
        width: 54.1667%;
    }

    .col-md-7-5 {
        flex: 0 0 62.5%;
        width: 62.5%;
    }

    .col-md-8-5 {
        flex: 0 0 70.8333%;
        width: 70.8333%;
    }

    .col-md-9-5 {
        flex: 0 0 79.1667%;
        width: 79.1667%;
    }

    .col-md-10-5 {
        flex: 0 0 87.5%;
        width: 87.5%;
    }

    .col-md-11-5 {
        flex: 0 0 95.8333%;
        width: 95.8333%;
    }

    .col-md-12-5 {
        flex: 0 0 104.1667%;
        width: 104.1667%;
    }
}

/* Large (lg) */
@media (min-width: 992px) {
    .col-lg-1-5 {
        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .col-lg-2-5 {
        flex: 0 0 20.8333%;
        width: 20.8333%;
    }

    .col-lg-3-5 {
        flex: 0 0 29.1667%;
        width: 29.1667%;
    }

    .col-lg-4-5 {
        flex: 0 0 37.5%;
        width: 37.5%;
    }

    .col-lg-5-5 {
        flex: 0 0 45.8333%;
        width: 45.8333%;
    }

    .col-lg-6-5 {
        flex: 0 0 54.1667%;
        width: 54.1667%;
    }

    .col-lg-7-5 {
        flex: 0 0 62.5%;
        width: 62.5%;
    }

    .col-lg-8-5 {
        flex: 0 0 70.8333%;
        width: 70.8333%;
    }

    .col-lg-9-5 {
        flex: 0 0 79.1667%;
        width: 79.1667%;
    }

    .col-lg-10-5 {
        flex: 0 0 87.5%;
        width: 87.5%;
    }

    .col-lg-11-5 {
        flex: 0 0 95.8333%;
        width: 95.8333%;
    }

    .col-lg-12-5 {
        flex: 0 0 104.1667%;
        width: 104.1667%;
    }
}

/* Extra large (xl) */
@media (min-width: 1200px) {
    .col-xl-1-5 {
        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .col-xl-2-5 {
        flex: 0 0 20.8333%;
        width: 20.8333%;
    }

    .col-xl-3-5 {
        flex: 0 0 29.1667%;
        width: 29.1667%;
    }

    .col-xl-4-5 {
        flex: 0 0 37.5%;
        width: 37.5%;
    }

    .col-xl-5-5 {
        flex: 0 0 45.8333%;
        width: 45.8333%;
    }

    .col-xl-6-5 {
        flex: 0 0 54.1667%;
        width: 54.1667%;
    }

    .col-xl-7-5 {
        flex: 0 0 62.5%;
        width: 62.5%;
    }

    .col-xl-8-5 {
        flex: 0 0 70.8333%;
        width: 70.8333%;
    }

    .col-xl-9-5 {
        flex: 0 0 79.1667%;
        width: 79.1667%;
    }

    .col-xl-10-5 {
        flex: 0 0 87.5%;
        width: 87.5%;
    }

    .col-xl-11-5 {
        flex: 0 0 95.8333%;
        width: 95.8333%;
    }

    .col-xl-12-5 {
        flex: 0 0 104.1667%;
        width: 104.1667%;
    }
}

/* Extra extra large (xxl) */
@media (min-width: 1400px) {
    .col-xxl-1-5 {
        flex: 0 0 12.5%;
        width: 12.5%;
    }

    .col-xxl-2-5 {
        flex: 0 0 20.8333%;
        width: 20.8333%;
    }

    .col-xxl-3-5 {
        flex: 0 0 29.1667%;
        width: 29.1667%;
    }

    .col-xxl-4-5 {
        flex: 0 0 37.5%;
        width: 37.5%;
    }

    .col-xxl-5-5 {
        flex: 0 0 45.8333%;
        width: 45.8333%;
    }

    .col-xxl-6-5 {
        flex: 0 0 54.1667%;
        width: 54.1667%;
    }

    .col-xxl-7-5 {
        flex: 0 0 62.5%;
        width: 62.5%;
    }

    .col-xxl-8-5 {
        flex: 0 0 70.8333%;
        width: 70.8333%;
    }

    .col-xxl-9-5 {
        flex: 0 0 79.1667%;
        width: 79.1667%;
    }

    .col-xxl-10-5 {
        flex: 0 0 87.5%;
        width: 87.5%;
    }

    .col-xxl-11-5 {
        flex: 0 0 95.8333%;
        width: 95.8333%;
    }

    .col-xxl-12-5 {
        flex: 0 0 104.1667%;
        width: 104.1667%;
    }
}

@font-face {
    font-family: 'MS Gothic';
    src: url('../fonts/msgothic.ttc') format('truetype-collection');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Gadugi';
    src: url('../fonts/gadugi.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'Gadugi';
    src: url('../fonts/gadugib.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'YuGothic';
    src: url('../fonts/YuGothM.ttc') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'YuGothic';
    src: url('../fonts/YuGothB.ttc') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: 'YuGothic';
    src: url('../fonts/YuGothL.ttc') format('truetype');
    font-weight: 300;
    /* Ligero */
}

@font-face {
    font-family: 'YuGothic';
    src: url('../fonts/YuGothR.ttc') format('truetype');
    font-weight: 400;
    /* Regular */
}

@font-face {
    font-family: "Forte";
    /* Nombre que usarás en CSS */
    src: url("../fonts/Forte.otf") format("opentype");
}


html, body {
    letter-spacing: -0.2px;
    overflow: hidden;
    font-family: 'YuGothic', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

:root {
    --font1: 'Gadugi';
    --font2: 'MS Gothic';
    --font3: 'YuGothic';
    --font4: 'Forte';
    --color1: #316591;
    --color2: lightgray;
    /* --color2: #4c4c4c79; */
    --color3: #5c5c5c;
    --transparent2: hsla(0, 0%, 100%, 0.27);
    --transparent1: hsla(0, 0%, 100%, 0.10);
    --primary: #00426b;
    --primaryDark: #013149;
    --secondary: #363c49;
    --secondaryCommplementDark: #252c35;
    --secondaryCommplementLight: #4b5363;
    --tertiary: white;
    --tertiaryDark: rgb(238, 238, 238);
    --cuartiary: #00774f;
    --cuartiaryDark: #005436;
    --gradient1: linear-gradient(90deg, #2f618f 0%, #3f859f 100%);
    --gradient3: linear-gradient(90deg, #cccccc 0%, #e6e6e6 100%);
    --gradient2: linear-gradient(90deg, #aad6ff 0%, #3f859f 50%, #2f618f 100%);
    --gradient4: linear-gradient(90deg, #252c35 0%, #0d1421 100%);
    --gradient5: linear-gradient(90deg, #3e4a5a 0%, #18253d 100%);
    --gradient5Inv: linear-gradient(90deg, #18253d 0%, #3e4a5a 100%);
    --gradient4Inv: linear-gradient(90deg, #0d1421 0%, #252c35 100%);
    --gradient1Inv: linear-gradient(90deg, #3f859f 0%, #2f618f 100%);
    --gradient3Inv: linear-gradient(90deg, #e6e6e6 0%, #cccccc 100%);
    --gradient2Inv: linear-gradient(90deg, #2f618f 0%, #3f859f 50%, #aad6ff 100%);
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb, #888) transparent;
}



/* Para navegadores basados en WebKit (Chrome, Edge, etc.) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb, #888);
    border-radius: 4px;
}

article {
    --heightContainer: 70vh;
    background-color: transparent !important;

    overflow: auto;
    margin: inherit;
    height: var(--heightContainer);
}

@media (min-width: 576px) {
    article {
        --heightContainer: 65vh;

    }
}

@media (min-width: 768px) {
    article {
        --heightContainer: 70vh;

    }
}

@media (min-width: 992px) {
    article {
        --heightContainer: 75vh;

    }
}

.article-notoperations {

    height: var(--heightContainer);
}

@media (min-width: 576px) {
    .article-notoperations {
        --heightContainer: 90vh;

    }
}

@media (min-width: 768px) {
    .article-notoperations {
        --heightContainer: 65vh;

    }
}

@media (min-width: 992px) {
    .article-notoperations {
        --heightContainer: 85vh;
    }
}


.scrollable {
    overflow-y: auto;
    height: 100%;
    max-height: calc(var(--heightContainer) - 100px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scrollable-nonFlex {
    display: inherit;

}

@media (max-height: 650px) {
    .scrollable {
        max-height: calc(var(--heightContainer) - 20px);
    }
}

.scrollable-y {
    overflow-y: hidden !important;
    overflow-x: auto;
}

.scrollable-ever {
    overflow-y: scroll !important;
}

.scrollable-y-ever {
    overflow-x: scroll !important;
}

body {
    background-color: #ecf0f5;
    min-height: 100vh;
}

a, .btn-link {
    color: #0071c1;
}

.page {
    min-height: 100vh;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 5px;

}

.content-wrapper {
    min-height: inherit !important;
}

select:focus, input:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
    /* opcional, según el estilo */
}

.grayWall {
    transition: opacity 0.4s ease-in-out;
    background-color: rgba(0, 0, 0, 1);
    /* o el color que quieras */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0;
    /* Estado inicial */
    pointer-events: auto;
    /* Evita capturar clics cuando está invisible */
}

.grayWall.show {
    z-index: 1002;
    opacity: 0.6;
    top: -50px;
    pointer-events: stroke;
    cursor: default !important;
    /* Habilita clics cuando está visible */
}

@media (min-width: 650px) {
    .grayWall.show {
        z-index: 999;
    }

}

.invalid {
    outline: 1px solid red;
}

.nav-link {
    width: inherit;
    height: inherit;
}




code {
    color: #c02d76;
}


i, .mask {
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}


/*Factory de loading */

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.loading {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgb(255, 255, 255);
    z-index: 10000;
    display: none;
}

.opacity {
    background-color: rgb(213 213 213 / 59%) !important;
}

.loading>.loadingCircle {
    display: block;
    position: relative;
    top: calc(50% - 70px);

    margin: 0 auto;
    width: 155px;
    height: 155px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


}

.topBar {
    position: absolute;
    height: 4px;


    background-size: 100%;
    transition: all 1s ease-in-out;
}

.spinner {
    animation: rotator 1.4s linear infinite;
}

.loading>div>h5 {}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation:
        dash 1.4s ease-in-out infinite,
        colors 5.6s ease-in-out infinite;
}

@keyframes colors {
    0% {
        stroke: #4285F4;
    }

    25% {
        stroke: #b735de;
    }

    50% {
        stroke: #0a009c;
    }

    75% {
        stroke: #1b679a;
    }

    100% {
        stroke: #4285F4;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        transform: rotate(450deg);
    }
}

.titleContainer {

    position: absolute;
    top: -20px;
    background: var(--gradient5);
    width: calc(100% + 4px);
    left: -2px;
    height: 30px;
    border-radius: 2px 2px 0px 0px;
    display: flex;
    align-items: center;
}

.iconContainer {
    border-radius: 40px;
    width: 50px;
    height: 50px;
    background-color: white;
    margin-right: 15px;
    padding: 2px;
    top: -30px;
    left: 20px;
    position: absolute;
}

.iconContainer div {
    width: 44px;
    height: 44px;
    background-color: var(--secondaryCommplementLight);
    border-radius: 30px;
    position: absolute;
    z-index: 0;
    top: 2px;
    left: 3px;
}

.iconContainer i {

    position: relative;
    mask-position: center;
    mask-size: 41%;
    mask-repeat: no-repeat;
    background-color: white;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

.title {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: bold;
    color: white;
    left: 45px;
    padding: 5px 35px;
    border-radius: 30px;
}

.container {
    position: relative;
    background-color: var(--tertiaryDark);
    border-radius: 4px;
    border: solid 2px var(--color2);
    padding: 14px 2px;
    height: fit-content;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    max-width: 1000px;

}

.container-wide {
    max-width: 1500px;

}

@media (min-width: 992px) {
    .container {
        max-height: 100% !important;
    }

    .container .scrollable {}
}


#container {

    max-width: 2000px;
    margin-right: auto;
    margin-left: auto;
    height: calc(var(--heightContainer) - 2vh);

    width: 100%;
}



@media (min-width: 768px) {
    #container {}
}

@media (max-width: 650px) {
    #container {
        align-items: center !important;
    }
}

.containerWide {
    max-width: 2000px;
    /*max-height: 400px !important;*/
}



.inputsContainer {
    width: 100%;
    max-width: 1000px;
    justify-content: left;
    justify-self: center;
}


.containerWide .inputsContainer {
    max-width: 1400px;
}

.inputContainer {
    --inputWidth: 240px;
    width: var(--inputWidth) !important;
    max-width: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
    margin: 7px 5px auto;
    position: relative;
    margin-bottom: 20px;
    align-items: center;
}

.inputContainerX2 {
    width: calc(var(--inputWidth) * 2) !important;
    max-width: inherit;
}

.inputContainerX2 .input, .inputContainerX2 .input input {
    width: 100% !important;
    max-width: inherit;
}

.inputContainerX05 {
    width: calc(var(--inputWidth) / 2) !important;
    max-width: inherit;
}

.inputContainerX05 .input, .inputContainerX05 .input input {
    font-size: 11px !important;
    width: 100% !important;
    max-width: inherit;
}

@media (max-width: 650px) {
    .inputContainerX2 {
        width: 250px !important;

    }

    .inputContainerX2 .input, .inputContainerX2 .input input {
        width: 250px !important;

    }

    .inputContainerX05 {
        width: 250px !important;

    }

    .inputContainerX05 .input, .inputContainerX05 .input input {
        font-size: 11px !important;
        width: 100% !important;

    }
}

@media (max-width: 650px) {
    .inputContainer {
        margin: 5px;
        margin-bottom: 5px !important;
    }

    .miniMensaje {
        position: relative !important;
        margin-top: -20px;
        padding: 0 !important;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .inputContainer {
        min-width: 280px;
        margin: 0px auto;
        align-items: center;
    }
}


.inputsMid .inputContainer {
    min-width: 180px;

}

.inputMid {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 340px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (min-width: 992px) {
    .inputMid {}
}

.inputMid .input, .inputMid span {
    width: 150px;
    margin-right: 4px;

}



.inputMid span {
    padding-top: 2px;
    padding-left: 2px;
    font-size: 11px !important;
}

.inputMid .input input {
    padding-left: 10px;
    font-size: 10px;
}

.inputMid-Small {
    max-width: 250px;
    width: inherit !important;
}

.inputMid-Small .input, .inputMid-Small span {
    width: 120px;
    margin-right: 4px;

}

.inputContainer>span {
    color: var(--secondaryCommplementDark);
    position: relative;
    padding-left: 15px;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 5px;
}

@media (max-width: 376px) {
    .inputContainer>span {
        font-size: 12px;

    }
}

.inputContainer>span::before {
    content: "";
    background-color: var(--secondaryCommplementDark);
    width: 10px;
    height: 10px;
    position: absolute;
    display: block;
    left: -0px;
    top: 5px;
    border-radius: 10px;
    margin-right: 2px;
}

.error {
    border: solid 2px #ff6464;
}

.miniMensaje {
    position: absolute;
    bottom: -20px;
    left: 0px;
    font-size: 10px;
    max-width: 280px;

    flex-direction: row;
    justify-content: center;
    color: red;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.input {
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    position: relative;
}

@media (max-width: 376px) {
    .input {
        height: 35px;
    }
}

.input select, .input input {
    appearance: none;
    width: 100%;
    height: 100%;
    max-width: 280px;
    border: none;
    border-bottom: solid 4px var(--secondary);
    font-size: 14px;
    font-weight: bold;
    padding-left: 45px;
    position: relative;
    border-radius: 1px;
}

@media (max-width: 376px) {
    .input select, .input input {
        font-size: 10px;
        max-width: 200px;
    }
}

@media (max-width: 650px) {
    .input select, .input input {
        font-size: 11px;
        max-width: 250px;
    }
}

.input select[disabled], .input input[disabled] {
    background-color: rgb(216, 216, 216) !important;
}

.input select option {

    border-radius: 1px;
}

.input select:focus-visible, .input input:focus-visible {
    outline: none;
    /* Quita el contorno */
    box-shadow: none;
    /* Quita cualquier sombra */

}

.inputIcon {

    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 25px;
    height: 25px;
    background-color: var(--secondary);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    z-index: 1;

}

@media (max-width: 376px) {
    .inputIcon {
        width: 15px;
        height: 15px;
    }
}

.checkContainer {
    height: 50px;
    background-color: lightgray;
    width: 100px;
    border-radius: 50px;
    border: solid 3px var(--primary);
    position: relative;
    transition: all linear 0.2s;
}

.checkContainer input {
    appearance: none;
    height: 45px;
    width: 44px;
    border-radius: 49px;
    background-color: var(--primary);
    position: absolute;
    top: 0;
    left: 0;
    transition: all linear 0.2s;
    cursor: pointer;
}

.buttonsContainer {
    margin-top: 50px;
    position: relative;
    justify-content: space-evenly;
    width: -moz-available;
    /* Para Firefox */
    width: -webkit-fill-available;
    /* Para navegadores WebKit */
    width: fill-available;
    max-width: 240px;
    margin-top: 20px;
}


@media (min-width: 768px) {
    .buttonsContainer {
        max-width: 580px;
    }
}

@media (min-width: 1400px) {
    .buttonsContainer {

        position: absolute;
        bottom: 41px;
        padding-left: 20px;
    }


}

.buttonContainer {
    width: 220px;
    height: 50px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}


.buttonContainer:nth-child(2) {}

.buttonContainer:nth-child(1) {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.buttonContainer button {
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: start;
    padding-left: 70px;

}

.buttonContainer:nth-child(2) button {
    background-color: var(--cuartiary);
}

.buttonContainer:nth-child(1) button {

    background-color: var(--primary);
}

.buttonIcon {
    height: 100%;
    width: 50px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 5px 0px 0px 5px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.buttonIcon2 {
    background-color: var(--secondaryCommplementDark);
    padding: 10px;
    border-radius: 2px;
}

.buttonIcon2Active {
    background-color: var(--primary);
}

.buttonIcon i {
    background-color: white;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 30px;
    height: 30px;
}

.checkContainer input:checked {
    left: 53%;
    background-color: var(--tertiary);
}


.asc-true {
    background-color: var(--primary);
}

polygon {
    z-index: 1;
}

@keyframes rotateGradient {
    0% {

        transform: rotate(0deg);
    }



    100% {

        transform: rotate(360deg);

    }
}

@keyframes changeStop {
    0% {

        stop-opacity: 0;

    }

    10% {
        stop-opacity: 0.6;
    }


    100% {



        stop-opacity: 0;
    }
}

.diamont {

    animation: rotateGradient 0.5s infinite linear;

}

.diamont stop {

    animation: changeStop 2s forwards linear;

}

.add {
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    cursor: pointer;
    z-index: 2;
    border-radius: 15px;
    height: 24px;
    background-color: green;
    top: 20px;
    right: 25px;
    max-width: 24px;
    overflow: hidden;
    transition: max-width 0.2s linear;


}

.add i {
    position: relative;
    display: block;

    mask-image: url("./../images/iconos/mas.svg");
    background-color: white;
    width: 12px;
    height: 12px;

    margin: 0px 6px;

}

.add:hover {
    max-width: 150px;

}

.add:hover span {
    max-width: 150px;
    padding-right: 10px;
}

.add span {
    position: relative;
    display: block;
    height: 100%;
    max-width: 0px;
    color: white;
    font-size: 12px;
    padding-right: 0px;
    transition: max-width 0.2s linear, padding-right 0.2s linear;

    top: 3px;

}

#modal {
    opacity: 0;
    display: none;
    transition: opacity 0.2s ease;
}

.proximamente::after {
    content: "";
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(128, 128, 128, 0.123);
}

.proximamente::before {
    content: "Proximamente";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(45deg);
    font-size: 180%;
    display: flex;
    flex-direction: row;
    z-index: 100;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: gray;
}


.inputContainer .checkBoxes {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-height: 120px;
    max-width: 280px;
    padding: 5px;
    border-radius: 2px;
    background-color: rgb(212, 212, 212);
    border: solid 2px gray;

    position: relative;

}


@media (min-width: 992px) {
    .inputContainer .checkBoxes {
        flex-direction: row;
        min-height: 70px;
        max-width: 300px !important;
    }
}

.inputSearch {
    position: relative;

}

.inputSearch input:nth-child(2) {
    position: relative;
    width: 70%;
    max-width: 195px;

    font-size: 13px;
}

.inputSearch input:nth-child(3) {
    position: relative;

    padding-left: 10px;
    max-width: 80px;
    font-size: 13px;
    border-left: 2px solid gray;
    width: 20%;
}

.inputSearch div:last-child {
    width: 30px;

    position: absolute;
    right: 0px;
    background-color: var(--primary);

    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-bottom: solid 4px white;

    height: 100%;
    border-radius: 0px 2px 2px 0px;
}

.inputSearch div:last-child i {
    display: block;
    background-color: white;
    mask-image: url("./../images/iconos/buscar.svg");
    width: 60%;
    height: 60%;
}

.inputSearch-oneInput input:nth-child(2) {
    width: 100%;
    max-width: inherit;
}

@media (max-width: 650px) {
    .inputSearch {
        max-width: 250px;

    }

    .inputSearch input {
        font-size: 10px;
    }

    .inputSearch input:nth-child(2) {}

    .inputSearch input:nth-child(3) {}

    .inputSearch div:last-child {}

    .inputSearch div:last-child i {

        width: 60%;

    }
}

.inputsContainer-wide .inputContainer {

    max-width: 480px;
}

.inputsContainer-wide .inputContainer input {

    max-width: 380px;
}

.checkBoxes label {
    margin-right: 10px;
    font-weight: bold;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 10px;
}

.checkBoxes {
    position: relative;

}

.ellipsis {
    white-space: nowrap;
    /* No permitir saltos de línea */
    overflow: hidden;
    /* Oculta el texto que se desborda */
    text-overflow: ellipsis;
    /* Muestra los "..." */
    /* Ajusta al tamaño deseado */
    /* Necesario si estás aplicando en línea */
}

.checkBoxes i {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0px 7px;
    background-color: black;
}

.checkBoxes input {
    width: 15px;
    height: 15px;
    margin: 0px 5px;
}

.checkBoxes button {
    position: sticky;
    bottom: 0;
    width: 100%;
    background-color: gray;
    height: 30px;
    color: white;
    font-weight: bold;
    font-size: 13px;
    padding: 2px 0px;
}

.checkBoxesButtonActivo {
    background-color: var(--primary) !important;
}

.inputsMid .checkBoxes {
    max-width: 180px;
}

@media (max-width: 576px) {
    .inputsMid .checkBoxes {
        margin-top: 15px;
    }
}

.inputsMid .buttonContainer {
    max-width: 180px;
}

.inputWide {
    width: 98% !important;
    max-height: 400px;
}

.inputWide .checkBoxes label {
    margin-right: 0px;
}

.inputWide .checkBoxes {
    max-width: 100% !important;
    max-height: 370px;
    overflow-y: auto;
}

.inputWide .buttonContainer {
    max-width: 100% !important;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* 2. Clase base para el esqueleto */
.skeleton {
    position: relative;
    overflow: hidden;

}

/* 3. Pseudo-elemento que crea el brillo */
.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.enablePointerEvent {
    pointer-events: bounding-box !important;
}

.scrollable-x {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

@media (max-width: 650px) {
    .container {}
}

@media (max-width: 376px) {
    .container {

        margin-bottom: 100px !important;
    }
}

.grupoTitleC {
    position: relative;
    margin: 0;
    margin-left: 5px;
    width: 95%;
    margin-bottom: 4px;
    z-index: 10;
}

@media (min-width: 768px) {
    .grupoTitleC {
        margin-left: 40px;
        width: 90%;
    }
}

@media (min-width: 992px) {
    .grupoTitleC {
        width: 85%;
    }
}

.grupoTitle {
    width: 100%;
    height: 100%;
}


.grupoTitle div {
    display: none;
    cursor: auto;
    border-radius: 20px;
    height: 13px;
    width: 13px;
    position: absolute;
    top: calc(50% - 8px);
    left: -35px;
    background-color: var(--secondary);
}

@media (min-width: 768px) {
    .grupoTitle div {
        display: block;
    }
}

.grupoTitle i:nth-child(3) {
    position: relative;
    mask-image: url("./../images/iconos/personalGrupo.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 30px;
    height: 30px;
    background-color: var(--color3);
    margin-right: 10px;
}

@media (max-width: 376px) {
    .grupoTitle i:nth-child(3) {
        width: 20px;
        height: 20px;
    }
}

.grupoTitle h3 {
    position: relative;
    color: var(--color3);
    font-size: 14px;
    margin: auto 0;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 376px) {
    .grupoTitle h3 {
        font-size: 10px;
    }
}

.grupoTitle i:nth-child(5) {
    position: absolute;
    mask-image: url("./../images/iconos/flecha.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 10px;
    height: 10px;
    background-color: var(--color3);
    right: 20px;
    transform: rotate(-90deg);
    transition: transform 0.2s linear;
}

@media (max-width: 376px) {
    .grupoTitle i:nth-child(5) {
        width: 8px;
        height: 8px;
    }
}

.grupo {
    margin: 0;
    max-height: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: max-height 0.2s linear;
}

.recuadro {
    background: var(--gradient3);
    --borderR: 20px 1px 20px 1px;
    border-radius: var(--borderR);
    padding: 5px;
}

.recuadroInt {
    padding: 5px 15px;
    border-radius: var(--borderR);
    background: var(--gradient3Inv);
    cursor: pointer;
    top: 0;
    left: 0;

    position: relative;
    align-items: center;
}

gradient {
    border-radius: var(--borderR);
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    transition: opacity 0.1s linear;
    z-index: 0;
}

.recuadro gradient {
    background: var(--gradient1);
}

.recuadroInt gradient {
    background: var(--gradient1Inv);
}

.personaContainer {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    left: 10px;
    margin-bottom: 2px;
    z-index: 0;
}

@media (min-width: 768px) {
    .personaContainer {
        width: 80%;
    }
}

@media (max-width: 376px) {
    .personaContainer {
        left: 0px;

    }
}

.persona {
    position: relative;
    width: 100%;
}

.persona div {
    mask-image: url("./../images/iconos/rama.svg");
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    position: absolute;
    background-color: var(--color3);
    height: 58px;
    width: 20px;
    left: -20px;
    top: -120%;
    z-index: 0;
    pointer-events: none;
}

.persona i:nth-child(3) {
    display: block;
    mask-image: url("./../images/iconos/emmpleado.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    background-color: var(--color3);
    position: relative;
    height: 20px;
    width: 20px;
    margin-right: 7px;

}

.persona li {
    position: relative;
    list-style: none;
    color: var(--color3);
    z-index: 1;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

@media (max-width: 376px) {
    .persona li {
        font-size: 10px;
    }

    .persona i:nth-child(3) {
        width: 15px;
        height: 15px;
    }
}


.personaActivo gradient {
    opacity: 1;
}

.personaActivo .persona {
    opacity: 1;
}

.personaActivo .persona li {
    color: white;
}

.personaActivo i {
    background-color: white !important;
    color: white !important;
}

.personaActivo h3 {
    color: white !important;
}

.personaActivo i:last-child {
    transform: rotate(0deg);
}

.inputTable {
    padding: 0;
    margin: 0;
    width: 310px !important;
    justify-content: center;
    display: flex;
    flex-direction: row;

}

.inputTable>div {
    width: 100%;
    height: auto;
    overflow: auto;
    max-height: 300px;
    background-color: var(--color2);
    padding: 10px;
    border-radius: 2px;

    border: solid 2px var(--color3);
    margin-top: 10px;
}






@media (min-width: 992px) {
    .inputTable {
        max-width: 320px;
    }

    .inputTable table {
        font-size: 12px;
    }
}

.inputTable table {
    text-align: center;
}

.inputTable table tbody {}

.inputTable table tbody tr {}

.inputTable table tbody tr td {
    background-color: var(--secondaryCommplementLight);
    padding: 3px;
    border-radius: 2px;
    color: white;
}

.inputTable table tbody tr {
    font-size: 11px;
    color: white;
    border-spacing: 3px;

    border-collapse: separate;
    margin: 0 auto;
}

.inputTable input {
    height: 40px;
    padding: 10px 5px !important;
}

.inputTable table thead {}

.inputTable table thead tr {}

.inputTable table thead tr th {
    background-color: var(--primaryDark);
    padding: 5px;
    border-radius: 2px;
    color: white;
}

@media (max-width: 650px) {
    .inputTable {}



    .inputTable table tbody {}

    .inputTable table tbody tr {}

    .inputTable table tbody tr td {}

    .inputTable table tbody tr {}

    .inputTable input {}

    .inputTable table thead {}

    .inputTable table thead tr {}

    .inputTable table thead tr th {
        font-size: 11px;
    }
}