/* Minification failed. Returning unminified contents.
(952,1): run-time error CSS1019: Unexpected token, found '@import'
(952,9): run-time error CSS1019: Unexpected token, found 'url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap')'
(963,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(964,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*, ::after, ::before {
    box-sizing: border-box;
}

p {
    margin: 0;
}


/*::-webkit-scrollbar {
    width: 7px;*/ /* Ancho del scrollbar */
    /*border-radius: 33px;*/ /* Bordes redondeados del thumb */
    /*color: #252528;
}*/

/* Estilo del fondo del scrollbar */
/*::-webkit-scrollbar-track {
    background-color: #f1f1f1;*/ /* Color del fondo del scrollbar */
/*}*/

/* Estilo del thumb (la parte móvil del scrollbar) */
/*::-webkit-scrollbar-thumb {
    background-color: #252528;*/ /* Color del thumb del scrollbar */
    /*border-radius: 33px;*/ /* Bordes redondeados del thumb */
/*}*/

@layer base {
    body {
        font-family: 'Poppins';
        font-size: 14px;
        font-weight: 500;
        color: #4C4D4F;
        background-color: #EFF0F8;
        margin: 0;
        padding: 0;
    }


    input {
        font-family: 'Poppins';
    }

        input[type="password"]::-ms-reveal,
        input[type="password"]::-webkit-reveal-button,
        input[type="password"]::-ms-clear,
        input[type="password"]::-webkit-clear-button {
            display: none;
        }

    .body-panel {
        display: flex;
        flex-direction: column;
        justify-content: center;        
    }

    .noscroll {
        overflow: hidden;    
    }
}

@layer button-container {

    .button-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .button {
        border-radius: 20px;
        height: 34px;
        border: none;
        background: #252528;
        color: #FCFCFF;
        cursor: pointer;
        font-family: 'Poppins';
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        line-height: 12px;
    }

        .button:hover {
            background: #00848C;
        }

        .button[disabled] {
            background: #9A9CAB;
            cursor: initial;
        }


        .button .spinner-button {
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            position: relative;            
        }

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

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

@layer modal2 {
    .modal2-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(29, 29, 29, 0.28);
        z-index: 99999999;
        display: none;
        /*display: flex;*/
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        padding: 20px 0;
    }

        .modal2-container.active {
            display: flex;
            /*display: block;*/
        }

        .modal2-container .modal2-content {
            background-color: #FCFCFF;
            border-radius: 8px;
            /*box-shadow: 0px 0px 10px 0px #00000017;*/
            max-height: 90vh;
            overflow-y: auto;
            border-radius: 12px;
            background: #FCFCFF;
            box-shadow: 90px 66px 31px 0px rgba(0, 0, 0, 0.00), 58px 43px 29px 0px rgba(0, 0, 0, 0.01), 32px 24px 24px 0px rgba(0, 0, 0, 0.05), 14px 11px 18px 0px rgba(0, 0, 0, 0.09), 4px 3px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 0px 0px rgba(0, 0, 0, 0.10);
        }

        .modal2-container .modal2-body {
        }
}

@layer panel-logo {
    .panel-logo {
        /*  padding-top: 40px;
        padding-bottom: 20px;*/
    }

        .panel-logo img {
            width: 77.59px;
        }

    .panel-logo1 img {
        width: 64.41px;
        height: 72.94px;
    }
}

@layer title-panel {
    .title-panel {
        font-size: 17.07px;
        font-weight: 500;
        line-height: 24.83px;
        letter-spacing: -0.01em;
    }
}

@layer input-container {
    .input-container {
        text-align: left;
        position: relative;
    }

        .input-container input {
            width: 100%;
            height: 40px;
            border-radius: 12px;
            border: 1px solid #828599;
            background: #FCFCFF;
            padding-left: 20px;
        }

            .input-container input:focus {
                outline: none !important;
            }

            .input-container input.border-alert,
            .input-container.border-alert input {
                border-color: #FF8492;
            }

            .input-container input.border-ok,
            .input-container.border-ok input {
                border-color: #00848C;
            }

        .input-container.pass-container input {
            padding-right: 33px;
        }

        .input-container .icon-pass {
            position: absolute;
            top: calc(50% + 1px);
            right: 8px;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

            .input-container .icon-pass img {
                width: 100%;
                height: 100%;
            }

        .input-container label {
            font-size: 14px;
            font-weight: 500;
            color: #252528;
            line-height: 26px;
        }
}

@layer password-level-panel {
    .password-level-panel {
        display: flex;
    }

        .password-level-panel .requisitos-section {
            font-size: 10px;
            font-weight: 400;
            color: #7D7D7D;
            text-align: left;
        }

            .password-level-panel .requisitos-section p {
                margin: 0;
            }

            .password-level-panel .requisitos-section ul {
                margin: 0;
                padding-inline-start: 0;
            }

                .password-level-panel .requisitos-section ul li {
                    margin-left: 15px;
                    line-height: 12px;
                    letter-spacing: -0.1px;
                    position: relative;
                }

                    .password-level-panel .requisitos-section ul li .custom-tooltip {
                        position: absolute;
                        top: -4px;
                        right: -13px;
                    }

                    .password-level-panel .requisitos-section ul li.custom-icon {
                        background: url(images/vector.png) no-repeat center left;
                        list-style: none;
                        padding-left: 15px;
                        margin-left: 0;
                    }

                    .password-level-panel .requisitos-section ul li .custom-tooltip img {
                        position: relative;
                        top: 3px;
                        margin-left: 2px;
                    }

        .password-level-panel .progressbar-section {
            font-size: 10px;
            font-weight: 400;
            color: #252528;
            width: 151px;
            padding-left: 20px;
        }

            .password-level-panel .progressbar-section .pass-level {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }

                .password-level-panel .progressbar-section .pass-level div {
                    text-align: left;
                }

                .password-level-panel .progressbar-section .pass-level #nivel {
                    text-align: right;
                }

            .password-level-panel .progressbar-section p {
                text-align: right;
            }

            .password-level-panel .progressbar-section .progressbar {
                width: 100%;
                border-radius: 26px;
                background-color: #E9E9E9;
                height: 6px;
                margin-bottom: 10px;
                margin-top: 4px;
            }

                .password-level-panel .progressbar-section .progressbar .progressbar-bar {
                    border-radius: 26px;
                    height: 100%;
                }

                    .password-level-panel .progressbar-section .progressbar .progressbar-bar.bar-weak {
                        background-color: rgb(116, 199, 114);
                        width: 0px;
                    }

                    .password-level-panel .progressbar-section .progressbar .progressbar-bar.bar-low {
                        background-color: #FF8492;
                        width: 33.33%;
                    }

                    .password-level-panel .progressbar-section .progressbar .progressbar-bar.bar-medium {
                        background-color: #E56B41;
                        width: 66.66%;
                    }

                    .password-level-panel .progressbar-section .progressbar .progressbar-bar.bar-hight {
                        background-color: #74C772;
                        width: 100%;
                    }

        .password-level-panel .tooltip-container {
            width: 227px;
            height: 110px;
            margin-left: 20px;
            transform: translate(0, -50%);
            padding: 10px 20px;
            background-color: #FCFCFF;
            border-radius: 8px;
            position: absolute;
            z-index: 99999999;
            box-sizing: border-box;
            border: 1px solid #E9E9E9;
            display: none;
            color: #343434;
            font-style: italic;
            font-weight: 400;
            line-height: 14px;
            letter-spacing: -0.1px;
        }

        .password-level-panel .custom-tooltip:hover .tooltip-container {
            display: block;
        }

            .password-level-panel .custom-tooltip:hover .tooltip-container i {
                position: absolute;
                top: 42%;
                right: 100%;
                margin-top: -12px;
                width: 12px;
                height: 24px;
                overflow: hidden;
            }

                .password-level-panel .custom-tooltip:hover .tooltip-container i::after {
                    content: '';
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    left: 0;
                    top: 50%;
                    transform: translate(50%,-50%) rotate(-45deg);
                    background-color: #FCFCFF;
                    border: 1px solid #E9E9E9;
                }
}



@layer validation-section {
    .validation-section {
        display: none;
    }

        .validation-section.active {
            display: block;
        }

        .validation-section .icon-container,
        .validation-section .text-container {
            display: inline-block;
            vertical-align: top;
        }

            .validation-section .icon-container svg {
                position: relative;
                top: -2px;
            }

        .validation-section .text-container {
            width: calc(100% - 19px);
            font-size: 10px;
            font-weight: 400;
            line-height: 12px;
            margin-left: 5px;
        }

    .body-panel .input-container.password-change-section.validation-section {
        margin-bottom: 10px !important;
        margin-top: 0 !important;
    }
}

@layer mfa-container {
    .mfa-container {
        display: flex;
        justify-content: center;
        gap: 6.95px;
    }

        .mfa-container input {
            width: 25.259px;
            height: 33px !important;
            border-radius: 6px;
            border: 1px solid #828599;
            background: #FCFCFF;
            /*margin: 0 2px;*/
            text-align: center;
        }

            .mfa-container input.code-first {
            }

            .mfa-container input.code-last {
            }

            .mfa-container input:focus {
                outline: none !important;
            }

            .mfa-container input.border-alert,
            .mfa-container.border-alert input {
                border-color: #FF8492;
            }

            .mfa-container input.border-ok,
            .mfa-container.border-ok input {
                border-color: #6edd00;
            }

            .mfa-container input[type=number] {
                -moz-appearance: textfield; /* Firefox */
            }

                .mfa-container input[type=number]::-webkit-inner-spin-button,
                .mfa-container input[type=number]::-webkit-outer-spin-button {
                    -webkit-appearance: none; /* WebKit */
                    margin: 0; /* Elimina el margen */
                }
}

@layer button-back-container {
    .button-back-container {
        position: absolute;
        top: 28px;
        left: 27px;
        text-align: left;
    }

        .button-back-container .buton-back {
            cursor: pointer;
        }

            .button-back-container .buton-back svg {
                position: relative;
                top: 2px;
            }

            .button-back-container .buton-back span {
                padding-left: 18px
            }
}

@layer row-section {
    .row-section {
    }

    .section1 {
        padding: 0 42.5px;
    }

    .section2 {
        padding: 0 37.5px;
    }

    .section3 {
        padding: 0 35px;
    }

    .section4 {
        padding: 0 24px;
    }

    .section5 {
        padding: 0 46px;
    }

    .section6 {
        padding: 0 108px;
    }
}

@layer margin {
    @layer margin-top;
    @layer margin-bottom;

    @layer margin-top {
        .mt7 {
            margin-top: 7px;
        }

        .mt6 {
            margin-top: 6px;
        }

        .mt10 {
            margin-top: 10px;
        }

        .mt11 {
            margin-top: 11px;
        }

        .mt12 {
            margin-top: 12px;
        }

        .mt15 {
            margin-top: 15px;
        }

        .mt18 {
            margin-top: 18px;
        }

        .mt19 {
            margin-top: 19px;
        }

        .mt20 {
            margin-top: 20px;
        }

        .mt21 {
            margin-top: 21px;
        }

        .mt24 {
            margin-top: 24px;
        }

        .mt25 {
            margin-top: 25px;
        }

        .mt27 {
            margin-top: 27px;
        }

        .mt29 {
            margin-top: 29px;
        }

        .mt30 {
            margin-top: 30px;
        }

        .mt32 {
            margin-top: 32px;
        }

        .mt38 {
            margin-top: 38px;
        }

        .mt40 {
            margin-top: 40px;
        }

        .mt42 {
            margin-top: 42px;
        }

        .mt45 {
            margin-top: 45px;
        }

        .mt50 {
            margin-top: 50px;
        }

        .mt69 {
            margin-top: 69px;
        }

        .mt71 {
            margin-top: 71px;
        }

        .mt88 {
            margin-top: 88px;
        }
    }

    @layer margin-bottom {
        .mb10 {
            margin-bottom: 10px;
        }

        .mb20 {
            margin-bottom: 20px;
        }

        .mb24 {
            margin-bottom: 24px;
        }

        .mb25 {
            margin-bottom: 25px;
        }

        .mb28 {
            margin-bottom: 28px;
        }

        .mb30 {
            margin-bottom: 30px;
        }

        .mb42 {
            margin-bottom: 42px;
        }
    }

    @layer margin-left {
        ml10 {
            margin-left: 10px;
        }

        ml35 {
            margin-left: 35px;
        }
    }
}

@layer padding {
    @layer padding-left;
    @layer padding-right;

    @layer padding-left {
        .pl35 {
            padding-left: 35px;
        }
    }

    @layer padding-right {
        .pr35 {
            padding-right: 35px;
        }
    }
}

@layer text {
    .text1 {
    }

    .text1 {
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -0.01em;
    }

    .text2 {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: -0.01em;
    }

    .text3 {
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        letter-spacing: -0.16px;
    }

    .text4 {
        font-size: 12px;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: -0.12px;
    }

    .text5 {
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        letter-spacing: -0.24px;
    }

    .text6 {
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
        letter-spacing: -0.1px;
    }

    .text7 {
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 17px;
        letter-spacing: -0.12px;
    }

    .text8 {
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -0.18px;
    }

    .text9 {
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: 32px;
        letter-spacing: -0.2px;
    }

    .text-center {
        text-align: center;
    }
}



@media screen and (max-width: 450px) {
    .password-level-panel .tooltip-container {
        left: -100px;
        top: -60px;
    }

    .password-level-panel .custom-tooltip:hover .tooltip-container i {
        top: 114px;
        left: 81px;
        transform: rotate(-90deg);
    }

    .modal-passok-image {
        margin-top: 23px;
        text-align: center;
    }

    .modal-passok-title {
        margin-top: 7px;
        padding: 0 28px;
    }

        .modal-passok-title p {
            color: #252528;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: -0.16px;
        }

    .modal-passok-sub-title {
        margin-top: 11px;
        padding: 0 28px;
    }

        .modal-passok-sub-title p {
            color: #000;
            text-align: center;
            font-size: 10px;
            font-weight: 400;
            line-height: 10px;
            letter-spacing: -0.1px;
        }

    .modal-passok-button {
        margin-top: 24px;
        margin-bottom: 29px;
        padding: 0 58px;
    }

        .modal-passok-button .button {
            width: 192px;
        }
}



/* Regla de medios para tabletas */
@media screen and (min-width: 451px) and (max-width: 1023px) {
    .password-level-panel .tooltip-container {
        left: -132px;
        top: -60px;
    }

    .password-level-panel .custom-tooltip:hover .tooltip-container i {
        top: 114px;
        left: 50%;
        transform: rotate(-90deg);
    }

    .modal-passok-image {
        margin-top: 23px;
        text-align: center;
    }

    .modal-passok-title {
        margin-top: 7px;
        padding: 0 28px;
    }

        .modal-passok-title p {
            color: #252528;
            font-size: 18px;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: -0.18px;
            text-align: center;
        }

    .modal-passok-sub-title {
        margin-top: 11px;
        padding: 0 28px;
    }

        .modal-passok-sub-title p {
            color: #000;
            font-size: 10px;
            font-weight: 400;
            line-height: 12px;
            letter-spacing: -0.1px;
            text-align: center;
        }

    .modal-passok-button {
        margin-top: 24px;
        margin-bottom: 29px;
        padding: 0 92px;
    }

        .modal-passok-button .button {
            width: 192px;
        }

    /*.modal2-content-password {
        width: 375px;
    }*/
}

/* Regla de medios para computadoras de escritorio */
@media screen and (min-width: 1024px) {
    /*   .password-level-panel .tooltip-container {
        left: -100px;
        top: -60px;
    }

    .password-level-panel .custom-tooltip:hover .tooltip-container i {
        top: 114px;
        left: 81px;
        transform: rotate(-90deg);
    }*/

    .modal-passok-image {
        margin-top: 23px;
        text-align: center;
    }

    .modal-passok-title {
        margin-top: 7px;
        padding: 0 28px;
    }

        .modal-passok-title p {
            color: #252528;
            font-size: 18px;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: -0.18px;
            text-align: center;
        }

    .modal-passok-sub-title {
        margin-top: 11px;
        padding: 0 28px;
    }

        .modal-passok-sub-title p {
            color: #000;
            font-size: 10px;
            font-weight: 400;
            line-height: 12px;
            letter-spacing: -0.1px;
            text-align: center;
        }

    .modal-passok-button {
        margin-top: 24px;
        margin-bottom: 29px;
        padding: 0 92px;
    }

        .modal-passok-button .button {
            width: 192px;
        }

   /* .modal2-content-password {
        width: 375px;
    }

    .modal2-content-password .logo {
        text-align: center;
    }*/
}

/*

@media screen and (max-height: 530px) {
    .modal2-container.modwizard {
        align-items: start;
    }
}
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');





.container {
}

/****************** login ******************/
:root {
    --rowC-height: 80vh;
    --cellC-width: 80vw;
}




.recpass-panel span {
    cursor: pointer;
    color: #00D0DD;
}

    .recpass-panel span:hover {
        text-decoration: underline;
    }

.main-panel {
    position: relative;
}

.link-site {
    position: absolute;
    bottom: 38px;
    text-align: center;
    width: 100%;
    opacity: 0.5;    
}

    .link-site p {
        color: #4C4D4F;
        font-family: Poppins;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
        letter-spacing: -0.12px;
        /*text-decoration-line: underline;*/
    }

@layer base;
@layer margin;
@layer panel-logo;
@layer title-panel;
@layer button-container;
@layer input-container;
@layer modal2;
@layer validation-section;


@layer password-recover;
@layer mfa-section;

@layer login-container;
@layer password-level-panel;
@layer password-change-challenge;
@layer button-back-container;

@layer row-section;

@layer text;

@layer password-recover {
    .title-panel p.password-recover {
        font-size: 18px;
        font-weight: 600;
    }

    .title-panel p.password-recover2 {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
        line-height: 20px;
    }
}

@layer mfa-section {
    .title-panel p.mfa-title {
        font-size: 18px;
        font-weight: 600;
    }

    .title-panel p.mfa-title2 {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
        line-height: 20px;
        padding: 0 40px 20px 40px;
    }

    .input-container.validation-section.mfavalidation-section {
        margin: 0 40px;
        text-align: center;
    }

        .input-container.validation-section.mfavalidation-section .text-container {
            font-size: 10px;
            font-weight: 400;
        }
}

@layer login-container {


    .panel {
        box-shadow: 90px 66px 31px 0px rgba(0, 0, 0, 0.00), 58px 43px 29px 0px rgba(0, 0, 0, 0.01), 32px 24px 24px 0px rgba(0, 0, 0, 0.05), 14px 11px 18px 0px rgba(0, 0, 0, 0.09), 4px 3px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 0px 0px rgba(0, 0, 0, 0.10);
        background-color: #FCFCFF;
    }

    .border {
        border-radius: 30px;
    }

    .main-panel {
        width: 392px;
        display: inline-block;
        vertical-align: middle;
    }



    .header-panel {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .login-main-container {
        width: 100%;
        height: 100vh;
        text-align: center;
        position: relative;
        overflow-y: auto;
    }


    .login-container {
        /*margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);*/
    }

    .text9 .span-one {
        font-weight: 700;
    }

    .text9 .span-core {
        font-weight: 700;
        color: #44ADAD;
    }
}

@layer password-change-challenge {
    .title-panel p.password-change-challenge {
        font-size: 18px;
        font-weight: 600;
    }

    .title-panel p.password-change-challenge2 {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
        line-height: 20px;
        padding: 0 40px 20px 40px;
    }

    .input-container.validation-section.mfavalidation-section {
        margin: 0 40px;
        text-align: center;
    }

        .input-container.validation-section.mfavalidation-section .text-container {
            font-size: 10px;
            font-weight: 400;
        }
}

body {
    overflow: hidden;
}

.login-container {
    overflow: auto;
}

.image-panel {
    display: none;
    height: 100%;
    overflow: hidden;
}

    .image-panel img {
        width: auto;
        height: auto;
    }

/* Regla de medios para dispositivos móviles (teléfonos inteligentes) */
@media screen and (max-width: 833px) {

    html {
        background-color: #FCFCFF;
    }

    body {
        overflow: auto;
    }

    input {
        height: 40px;
        color: #333333;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
        letter-spacing: -0.12px;
    }

    .login-main-container {
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-y: visible;
        height: 100%;
        background-color: #FCFCFF;
    }

    .login-container {
        height: 100%;
        width: 360px;
        display: flex;
        align-items: start;
        justify-content: center;
        position: relative;
        padding: 20px 0;
    }

    .main-panel {
        width: 100%;
        height: 100%;
        box-shadow: none;
        /*padding: 0 152px;*/
    }


    .border {
        border-radius: 0;
    }

    /*.main-panel {
        width: 100%;
        height: 100%;
        box-shadow: none;
    }*/

    .main-panel .button-back-container {
        position: initial;
        margin-top: 29px;
        padding-left: 21px;
    }

    .main-panel .header-panel .logo-section {
        margin-top: 47px;
    }

        .main-panel .header-panel .logo-section .panel-logo {
            height: 107.555px;
        }

            .main-panel .header-panel .logo-section .panel-logo img {
                width: 94.984px;
                height: 107.555px;
            }

    .main-panel .header-panel.PasswordRecover .logo-section {
        margin-top: 11px;
    }

        .main-panel .header-panel.PasswordRecover .logo-section .panel-logo {
            height: 107.555px;
        }

            .main-panel .header-panel.PasswordRecover .logo-section .panel-logo img {
                width: 94.984px;
                height: 107.555px;
            }

    .main-panel .header-panel.PasswordChance .logo-section {
        margin-top: 47px;
    }

        .main-panel .header-panel.PasswordChance .logo-section .panel-logo {
            height: 107.555px;
        }

            .main-panel .header-panel.PasswordChance .logo-section .panel-logo img {
                width: 94.984px;
                height: 107.555px;
            }

    .main-panel .header-panel .title-section {
        margin-top: 23.22px;
    }

    .main-panel .header-panel.PasswordChance .title-section {
        margin-top: 23.22px;
    }

    .main-panel .header-panel p {
        font-size: 20px;
        font-weight: 500;
        line-height: 32px;
        letter-spacing: -0.2px;
    }

        .main-panel .header-panel p .span-one {
            font-weight: 700;
        }

        .main-panel .header-panel p .span-core {
            font-weight: 700;
            color: #44ADAD;
        }

    .link-site {
        position: initial;
        bottom: initial;
        margin-top: 35px;
    }

    .main-panel .body-panel .input-container label {
        line-height: 16px;
    }

    .main-panel .body-panel .section1 {
        padding: 0 26px;
    }

    .main-panel .body-panel .section-mfa-title {
        margin-top: 34.22px;
    }

        .main-panel .body-panel .section-mfa-title p {
            font-size: 16px;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: -0.16px;
        }

    .main-panel .body-panel .section-mfa-sub-title {
        margin-top: 18px;
    }

        .main-panel .body-panel .section-mfa-sub-title p {
            font-size: 14px;
            font-weight: 500;
            line-height: 16px;
            letter-spacing: -0.14px;
        }

    .main-panel .body-panel .section-mfa-error {
        display: flex;
        justify-content: center;
        flex-direction: row;
    }

        .main-panel .body-panel .section-mfa-error.mt7 {
            margin-top: 11px;
            height: 10px;
        }

        .main-panel .body-panel .section-mfa-error .text-container {
            line-height: 10px;
        }

    .main-panel .body-panel .section-mfa-code {
        margin-top: 25px;
    }

    .main-panel .body-panel .section-mfa-button {
        margin-top: 25px;
    }

        .main-panel .body-panel .section-mfa-button.error {
            margin-top: 21px;
        }

    .main-panel .body-panel .login-input0 {
        margin-top: 28.22px;
    }

    .main-panel .body-panel .login-input1 {
        margin-top: 20px;
    }

    .main-panel .body-panel .login-input2 {
        margin-top: 35px;
    }

    .main-panel .body-panel .passchance1 {
        margin-top: 20px;
    }

    .main-panel .body-panel .section-recoverpass-title {
        margin-top: 29.22px;
    }

        .main-panel .body-panel .section-recoverpass-title p {
            font-size: 16px;
            font-weight: 600;
            line-height: 28px;
            letter-spacing: -0.16px;
        }

    .main-panel .body-panel .section-recoverpass-sub-title {
        margin-top: 20px;
        padding: 0 16px;
    }

        .main-panel .body-panel .section-recoverpass-sub-title p {
            font-size: 14px;
            font-weight: 500;
            line-height: 16px;
            letter-spacing: -0.14px;
        }

    .main-panel .body-panel .section-recoverpass-sub-title2 {
        margin-top: 20px;
        padding: 0 35px;
    }

        .main-panel .body-panel .section-recoverpass-sub-title2 p,
        .main-panel .body-panel .section-recoverpass-sub-title p {
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            line-height: 16px;
            letter-spacing: -0.14px;
        }

    .main-panel .body-panel .section-recoverpass-input {
        margin-top: 40px;
    }

    .main-panel .body-panel .section-recoverpass-button {
        margin-top: 20px;
    }

    .main-panel .body-panel .section-changepass-input0 {
        margin-top: 29px;
    }

    .main-panel .body-panel .section-changepass-input1 {
        margin-top: 20px;
    }

    .image-panel {
        display: none;
    }
}

/* Regla de medios para tabletas */
@media screen and (min-width: 834px) and (max-width: 1279px) {

    input {
        height: 40px;
        color: #333333;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
        letter-spacing: -0.12px;
    }

    .login-main-container {
        display: flex;
        align-items: center;
        justify-content: center;
        /*padding: 80px 0;*/
        overflow-y: auto;
        /*min-height: 970px;*/
    }

    .login-container {
        height: 1033px;
        width: 100%;
        display: flex;
        align-items: start;
        justify-content: center;
        position: relative;
        /*transform: none;
        top: 0;
        left: 0;*/
        padding: 20px 0;
    }

    .main-panel {
        width: 663px;
        height: 100%;
        padding: 0 152px;
    }

        .main-panel .header-panel .logo-section {
            margin-top: 144px;
        }

            .main-panel .header-panel .logo-section .panel-logo {
                height: 145.777px;
            }

                .main-panel .header-panel .logo-section .panel-logo img {
                    width: 128.739px;
                    height: 145.777px;
                }

        .main-panel .header-panel.PasswordChance .logo-section {
            margin-top: 144px;
        }

            .main-panel .header-panel.PasswordChance .logo-section .panel-logo {
                height: 145.777px;
            }

                .main-panel .header-panel.PasswordChance .logo-section .panel-logo img {
                    width: 128.739px;
                    height: 145.777px;
                }

        .main-panel .header-panel .title-section {
            margin-top: 47.22px;
        }

        .main-panel .header-panel.PasswordChance .title-section {
            margin-top: 47.22px;
        }

        .main-panel .header-panel p {
            color: #4C4D4F;
            font-size: 22px;
            font-weight: 500;
            line-height: 32px;
            letter-spacing: -0.22px;
        }

            .main-panel .header-panel p .span-one {
                font-weight: 700;
            }

            .main-panel .header-panel p .span-core {
                color: #44ADAD;
                font-weight: 700;
            }



        .main-panel .body-panel .section1 {
            padding: 0 26px;
        }

        .main-panel .body-panel .section-mfa-title {
            margin-top: 47px;
        }

            .main-panel .body-panel .section-mfa-title p {
                font-size: 18px;
                font-weight: 600;
                line-height: 28px;
                letter-spacing: -0.18px;
            }

        .main-panel .body-panel .section-mfa-sub-title {
            margin-top: 18px;
        }

            .main-panel .body-panel .section-mfa-sub-title p {
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                letter-spacing: -0.14px;
            }

        .main-panel .body-panel .section-mfa-error {
            display: flex;
            justify-content: center;
            flex-direction: row;
        }



            .main-panel .body-panel .section-mfa-error.mt7 {
                margin-top: 14px;
                height: 12px;
            }

        .main-panel .body-panel .section-mfa-code {
            margin-top: 25px;
        }

        .main-panel .body-panel .section-mfa-button {
            margin-top: 25px;
        }

            .main-panel .body-panel .section-mfa-button.error {
                margin-top: 32px;
            }

        .main-panel .body-panel .login-input0 {
            margin-top: 24px;
        }

            .main-panel .body-panel .login-input0 label,
            .main-panel .body-panel .login-input1 label {
                line-height: 21px;
            }

        .main-panel .body-panel .login-input1 {
            margin-top: 20px;
        }

            .main-panel .body-panel .login-input1 .pass-container .icon-pass {
                top: calc(50% + 1px);
            }

        .main-panel .body-panel .login-input2 {
            margin-top: 29px;
        }

        .main-panel .body-panel .passchance1 {
            margin-top: 20px;
        }

    .link-site {
        width:calc(100% - 304px)
    }
        .main-panel .body-panel .section-recoverpass-title {
            margin-top: 22px;
        }

            .main-panel .body-panel .section-recoverpass-title p {
                font-size: 18px;
                font-weight: 600;
                line-height: 28px;
                letter-spacing: -0.18px;
            }

        .main-panel .body-panel .section-recoverpass-sub-title {
            margin-top: 12px;
            padding: 0 32px;
        }

            .main-panel .body-panel .section-recoverpass-sub-title p {
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                letter-spacing: -0.14px;
            }

        .main-panel .body-panel .section-recoverpass-sub-title2 {
            margin-top: 12px;
            padding: 0 35px;
        }

            .main-panel .body-panel .section-recoverpass-sub-title2 p,
            .main-panel .body-panel .section-recoverpass-sub-title p {
                text-align: center;
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                letter-spacing: -0.14px;
            }

        .main-panel .body-panel .section-recoverpass-input {
            margin-top: 40px;
        }

        .main-panel .body-panel .section-recoverpass-button {
            margin-top: 20px;
        }

        .main-panel .body-panel .section-changepass-input0 label,
        .main-panel .body-panel .section-changepass-input1 label {
            line-height: 16px;
        }

        .main-panel .body-panel .section-changepass-input0 {
            margin-top: 38px;
        }

        .main-panel .body-panel .section-changepass-input1 {
            margin-top: 20px;
        }

    .image-panel {
        display: none;
    }
}

@media screen and (min-width: 834px) and (max-width: 1279px) and (max-height: 1073px) {
    .login-main-container {
        align-items: start;
        /*padding: 20px 0;*/
    }
}

/* Regla de medios para computadoras de escritorio */
@media screen and (min-width: 1280px) and (max-width: 1599px) {

    input {
        height: 40px;
        color: #333333;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
        letter-spacing: -0.12px;
    }

    .login-main-container {
        display: flex;
        align-items: start;
        justify-content: center;
        overflow-y: auto;
        /*min-height: 619px;*/
    }

    .login-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 38px;
        /*padding-top: 0;
        padding-bottom: 0;*/
        height: 100%;
        position: relative;
        /*transform: none;
        top: 0;
        left: 0;*/
        padding: 20px 0;
    }

    .panel {
        height: 619px;
    }

    .main-panel {
        width: 392px;
    }

        .main-panel .header-panel .logo-section {
            margin-top: 40px;
        }

            .main-panel .header-panel .logo-section .panel-logo {
                height: 87.854px;
            }

                .main-panel .header-panel .logo-section .panel-logo img {
                    width: 77.585px;
                    height: 87.854px;
                }

            .main-panel .header-panel .logo-section.logo-section1 {
                margin-top: 40px;
            }

                .main-panel .header-panel .logo-section.logo-section1 .panel-logo {
                    height: 87.854px;
                }

                    .main-panel .header-panel .logo-section.logo-section1 .panel-logo img {
                        width: 77.585px;
                        height: 87.854px;
                    }

        .main-panel .header-panel.PasswordChance .logo-section.logo-section1 {
            margin-top: 15px;
        }

            .main-panel .header-panel.PasswordChance .logo-section.logo-section1 .panel-logo {
                height: 72.94px;
            }

                .main-panel .header-panel.PasswordChance .logo-section.logo-section1 .panel-logo img {
                    width: 64.415px;
                    height: 72.94px;
                }

        .main-panel .header-panel .title-section {
            margin-top: 23.09px;
            padding: 0 84px;
            height: 50px;
        }

        .main-panel .header-panel.PasswordChangeRequired .title-section,
        .main-panel .header-panel.PasswordChance .title-section {
            display: none;
        }

        .main-panel .header-panel p {
            color: #4C4D4F;
            font-size: 17.069px;
            font-weight: 500;
            line-height: 24.828px;
            letter-spacing: -0.171px;
        }

            .main-panel .header-panel p .span-one {
                font-weight: 700;
            }

            .main-panel .header-panel p .span-core {
                color: #44ADAD;
                font-weight: 700;
            }

        .main-panel .body-panel .section1 {
            padding: 0 42px;
        }

        .main-panel .body-panel .section-mfa-title {
            margin-top: 71.05px;
        }

            .main-panel .body-panel .section-mfa-title p {
                font-size: 18px;
                font-weight: 600;
                line-height: 28px;
                letter-spacing: -0.18px;
            }

        .main-panel .body-panel .section-mfa-sub-title {
            margin-top: 18px;
        }

            .main-panel .body-panel .section-mfa-sub-title p {
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                letter-spacing: -0.14px;
            }

        .main-panel .body-panel .section-mfa-error {
            display: flex;
            justify-content: center;
            flex-direction: row;
        }

            .main-panel .body-panel .section-mfa-error.mt7 {
                height: 12px;
            }

        .main-panel .body-panel .section-mfa-code {
            margin-top: 25px;
        }

        .main-panel .body-panel .section-mfa-button {
            margin-top: 25px;
        }

            .main-panel .body-panel .section-mfa-button.error {
                margin-top: 18px;
            }

        .main-panel .body-panel .login-input1 label,
        .main-panel .body-panel .login-input0 label {
            line-height: 21px;
        }

        .main-panel .body-panel .login-input0 {
            margin-top: 23.05px;
        }

        .main-panel .body-panel .login-input1 {
            margin-top: 20px;
        }

            .main-panel .body-panel .login-input1.error {
                margin-top: 16px;
            }

        .main-panel .body-panel .login-input2 {
            margin-top: 29px;
        }

        .main-panel .body-panel .passchance1 {
            margin-top: 20px;
        }

            .main-panel .body-panel .passchance1.error {
                margin-top: 10px;
            }

        .main-panel .body-panel .validation-section.active {
            height: 12px;
        }

        .main-panel .body-panel .section-recoverpass-title {
            margin-top: 21.15px;
        }

            .main-panel .body-panel .section-recoverpass-title p {
                font-size: 18px;
                font-weight: 600;
                line-height: 28px;
                letter-spacing: -0.18px;
            }

        .main-panel .body-panel .section-recoverpass-sub-title {
            margin-top: 12px;
            padding: 0 50px;
        }

            .main-panel .body-panel .section-recoverpass-sub-title p {
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                letter-spacing: -0.14px;
            }

        .main-panel .body-panel .section-recoverpass-sub-title2 {
            margin-top: 13px;
            padding: 0 35px;
        }

            .main-panel .body-panel .section-recoverpass-sub-title2 p,
            .main-panel .body-panel .section-recoverpass-sub-title p {
                text-align: center;
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                letter-spacing: -0.14px;
            }

        .main-panel .body-panel .section-recoverpass-input {
            margin-top: 40px;
        }

        .main-panel .body-panel .section-recoverpass-button {
            margin-top: 73px;
        }

        .main-panel .body-panel .section-changepass-input0 label,
        .main-panel .body-panel .section-changepass-input1 label {
            line-height: 16px;
        }

        .main-panel .body-panel .section-changepass-input0 {
            margin-top: 28px;
        }

        .main-panel .body-panel .section-changepass-input1 {
            margin-top: 20px;
        }

    .image-panel {
        display: block;
        width: 790px;
    }

    /*.image-panel img {
            width: 790px;
            height: 619px;
        }*/
}

@media screen and (min-width: 1280px) and (max-width: 1599px) and (max-height: 678.78px) {
    .login-main-container {
        align-items: start;
        /*padding: 27.78px 0 32px 0;
        height: auto;*/
    }

    .login-container {
        align-items: start;
    }
}

@media screen and (min-width: 1600px) {

    input {
        height: 40px;
        color: #333333;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 12px;
        letter-spacing: -0.12px;
    }

    .login-main-container {
        display: flex;
        align-items: center;
        justify-content: center;
        /*overflow-y: auto;*/
        /*min-height: 619px;*/
    }


    /*.login-main-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }*/

    .login-container {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 38px;
        /*padding-top: 0;
        padding-bottom: 0;*/
        height: 100%;
        /*position: relative;
        transform: none;
        top: 0;
        left: 0;*/
        padding: 20px 0;
    }

    /*
    .login-container {
        width: 1373px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 38px;
        padding-top: 0;
        padding-bottom: 0;
        height: 100%;
    }*/

    .panel {
        max-height: 911px;
        height: 100%;
        min-height: 757px;
    }

    .main-panel {
        width: 392px;
        padding: 0;
    }

        .main-panel .header-panel .logo-section {
            margin-top: 71px;
        }

            .main-panel .header-panel .logo-section .panel-logo {
                height: 113.235px;
            }

                .main-panel .header-panel .logo-section .panel-logo img {
                    width: 100px;
                    height: 113.235px;
                }

            .main-panel .header-panel .logo-section.logo-section1 {
                margin-top: 40px;
            }

                .main-panel .header-panel .logo-section.logo-section1 .panel-logo {
                    height: 87.854px;
                }

                    .main-panel .header-panel .logo-section.logo-section1 .panel-logo img {
                        width: 77.585px;
                        height: 87.854px;
                    }


        .main-panel .header-panel.PasswordChangeRequired .title-section {
            display: none;
        }

        .main-panel .header-panel .title-section {
            margin-top: 29.76px;
            padding: 0 51px;
        }


        .main-panel .header-panel p {
            color: #4C4D4F;
            font-size: 22px;
            font-weight: 500;
            line-height: 32px;
            letter-spacing: -0.22px;
        }

            .main-panel .header-panel p .span-one {
                font-weight: 700;
            }

            .main-panel .header-panel p .span-core {
                color: #44ADAD;
                font-weight: 700;
            }

        .main-panel .body-panel .section1 {
            padding: 0 42px;
        }

        .main-panel .body-panel .section-mfa-title {
            margin-top: 47px;
        }

            .main-panel .body-panel .section-mfa-title p {
                font-size: 18px;
                font-weight: 600;
                line-height: 28px;
                letter-spacing: -0.18px;
            }

        .main-panel .body-panel .section-mfa-sub-title {
            margin-top: 18px;
        }

            .main-panel .body-panel .section-mfa-sub-title p {
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                letter-spacing: -0.14px;
            }

        .main-panel .body-panel .section-mfa-error {
            display: flex;
            justify-content: center;
            flex-direction: row;
        }

        .main-panel .body-panel .section-mfa-code {
            margin-top: 25px;
        }

        .main-panel .body-panel .section-mfa-button {
            margin-top: 25px;
        }

        .main-panel .body-panel .login-input0 label,
        .main-panel .body-panel .login-input1 label {
            line-height: 21px;
        }

        .main-panel .body-panel .login-input0 {
            margin-top: 24px;
        }

        .main-panel .body-panel .login-input1 {
            margin-top: 20px;
        }

        .main-panel .body-panel .login-input2 {
            margin-top: 29px;
        }

        .main-panel .body-panel .passchance1 {
            margin-top: 20px;
        }

        .main-panel .body-panel .section-recoverpass-title {
            margin-top: 21.15px;
        }

            .main-panel .body-panel .section-recoverpass-title p {
                font-size: 18px;
                font-weight: 600;
                line-height: 28px;
                letter-spacing: -0.18px;
            }

        .main-panel .body-panel .section-recoverpass-sub-title {
            margin-top: 20px;
            padding: 0 20px;
        }

            .main-panel .body-panel .section-recoverpass-sub-title p {
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                letter-spacing: -0.14px;
            }

        .main-panel .body-panel .section-recoverpass-sub-title2 {
            margin-top: 13px;
            padding: 0 35px;
        }

            .main-panel .body-panel .section-recoverpass-sub-title2 p,
            .main-panel .body-panel .section-recoverpass-sub-title p {
                text-align: center;
                font-size: 14px;
                font-weight: 500;
                line-height: 16px;
                letter-spacing: -0.14px;
            }

        .main-panel .body-panel .section-recoverpass-input {
            margin-top: 40px;
        }

        .main-panel .body-panel .section-recoverpass-button {
            margin-top: 73px;
        }

        .main-panel .body-panel .section-changepass-input0 label,
        .main-panel .body-panel .section-changepass-input1 label {
            line-height: 16px;
        }

        .main-panel .body-panel .section-changepass-input0 {
            margin-top: 28px;
        }

        .main-panel .body-panel .section-changepass-input1 {
            margin-top: 20px;
        }

    .image-panel {
        display: block;
        width: 943px;
    }
}

@media screen and (min-width: 1600px) and (max-height: 797px) {
    .login-main-container {
        align-items: start;
        /*padding: 60px 0 59px 0;
        height: auto;*/
    }

    .login-container {
        align-items: start;
    }
}

@layer mail-error {
    .modal2-container.mailerror .modal2-content {
        border-radius: 12px;
        height: 233px;
    }

    .modal2-mailerror {
        width: 397px;
        position: relative;
    }

        .modal2-mailerror .button-container {
            width: 24px;
            height: 24px;
            background-color: transparent;
            position: absolute;
            right: 16px;
            top: 0;
        }

        .modal2-mailerror .button {
            width: 24px;
            height: 24px;
            background-color: transparent;
        }

    .modal-mailerror-image {
        margin-top: 20px;
        height: 66px;
        text-align: center;
    }

        .modal-mailerror-image svg {
            width: 66px;
            height: 66px;
        }

    .modal-mailerror-title {
        margin-top: 8px;
        padding: 0 40px;
        color: #252528;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -0.18px;
    }

    .modal-mailerror-sub-title {
        margin-top: 8px;
        padding: 0 43px;
        color: #000;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        letter-spacing: -0.12px;
    }
}