.contenido {
    min-height: 800px;
    max-height: 1000px;
    width: 98vw;
    height: 95vh;
    display: flex;
    justify-content: center;
}

.lateral {
    min-width: 500px;
    max-width: 500px;
    background-color: #EBEBEA;

}

.logo-lateral {
    height: 30%;
    display: flex;
    justify-content: center;
    align-items:center;
}

    .logo-lateral img {
        width: 100%;
    }

.tarjeta-lateral {
    height: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .tarjeta-lateral img {
        width: 60%;
        opacity: 0.5;
    }

.footer-lateral {
    background-color: #C9C9C9;
    height: 25%;
}

.otropago-div {
    display: block;
    color: white;
    padding-top: 8px;
    padding-bottom: 18px;
}

.otropago-lateral {
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
    text-shadow: 1px 1px 2px black;
}

.rrss-lateral {
    height: 50px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.rrss-caja {
}

    .rrss-caja img {
        box-shadow: 2px 2px 2px #707070;
        border-radius: 999px;
        height: 50px;
    }

.blank {
    float: none;
    clear: both;
}


/* Lado derecho - Vista Principal */

.principal {
    min-width: 950px;
    max-width: 950px;
}

.principal-head {
    height: 45%;
    min-height: 400px;
    max-height: 400px;
    width: 56.5%;
    margin: 0px auto;
    margin-top: 10%;
    border: 1px solid #707070;
    border-radius: 51px;
}

.titulo-div {
    display: flex;
    justify-content:center;
    align-items: end;
    height: 13%;
    margin: 0px auto;
    font-family: Montserrat;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    color: #5b5b5a;
}

.titulo1 {
    height: 20%;
}

.titulo2 {
    height: 10%;
}

.rutcliente-div {
    height: 29px;
    padding-top: 66px;
    padding-left: 15%;
}

.rutcliente {
    font-family: Montserrat;
    font-size: 24px;
    font-weight: 600;
    color: #5b5b5a;
    margin: 0px auto;
}

.form-div {
    height: 50%;
    width: 70%;
    padding-left: 15%;
    padding-right: 15%;
}

.form-input-div {
    height: 68px;
    padding-top: 7px;
}

.form-input {
    height: 68px;
    border: 2px solid #707070;
    border-radius: 22px;
}

.form-rut {
    height: 100%;
    width: 96%;
    font: normal normal 700 22px/28.8px Montserrat;
    color: #5b5b5a;
    text-align: right;
    padding-right: 10px;
    background: transparent url('../imagenes/perfil.png') 5% 40% no-repeat padding-box;
}

    .form-rut:focus-visible {
        outline: #5b5b5a auto 2px;
    }

.form-button-div {
    height: 64px;
    padding-top: 54px;
}

.form-button {
    border: 1px solid #CECECC;
    height: 64px;
    width: 100%;
    background: #CECECC 0% 0% no-repeat padding-box;
    border-radius: 22px;
    overflow: hidden;
}

.form-busca {
    height: 100%;
    width: 100%;
    font: normal normal 700 22px/28.8px Montserrat;
    color: #5b5b5a;
    text-align: center;
}

    .form-busca:hover {
        background-color: white;
    }

.principal-boton {
    height: 9%;
    width: 60%;
    margin: 0px auto;
    padding-top: 8%;
}


.ingresa-eecc {
    height: 93px;
    width: 100%;
    background: white 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 47px;
    font: normal normal 700 24px/28.8px Montserrat;
    color: #5b5b5a;
}

    .ingresa-eecc:hover {
        background-color: #CECECC;
    }

.principal-webpay {
    height: 23%;
    width: 100%;
    padding-bottom: 1.5%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.principal-webpay img{
    height:25%;
}

.webpay-pos2 {
    height: 20%;
}

.webpay-pos3 {
    padding-top: 100px;
    height: 20%;
}

.resultado {
    width:100%;
    font: normal normal 700 30px Montserrat;
    color: red;
    text-align: center;
    display: flex;
    justify-content: center;
}

/* Para la pantalla MostrarMonto */
.mostrar-monto {
    width: 100%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 25px;
}


.cliente {
    display: flex;
    justify-content:center;
    width: 75%;
    background-color: #F7F7F7;
    padding-top: 28px;
    padding-bottom: 30px;
    line-height: 19px;
}

.table-cliente {
    font: normal normal 700 18px/30px Montserrat;
    color: #5b5b5a;
}

.montodiv {
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

.monto-str {
    font: normal normal 600 36px/43px Montserrat;
    color: #5b5b5a;
    padding-right: 5px;
}

.monto {
    font: normal normal 600 36px/50px Montserrat;
    background-color: #EBEBEB;
    color: #5b5b5a;
    width: 225px;
    height: 50px;
    text-align: right;
    padding-right: 5px;
}

.fix {
    margin-top: 50px;
}

.buttons {
    display: flex;
    justify-content: space-evenly;
    margin-top: 127px;
    height: 72px;
    width: 100%;
}

.btn {
    display: flex;
    width: 230px;
    height: 72px;
    background: #CECECC 0% 0% no-repeat padding-box;
    border-radius: 36px;
    opacity: 1;
    text-decoration: none;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
    border-width: 0px;
    border-style: none;
}

    .btn:hover {
        background-color: #EBEBEA;
    }

.btnvolver {

}

.volver {
    display: flex;
    vertical-align: middle;
    color: #5B5B5A;
    font: normal normal bold 22px/29px Montserrat;
}

.btnpagar {
}

.pagar {
    display: flex;
    vertical-align: middle;
    color: #5B5B5A;
    font: normal normal bold 22px/29px Montserrat;
}

.ejecuta {
    width: 0px;
    height: 0px;
}

.spinner {
    display: flex;
    text-align: center;
    align-items: flex-end;
    width: 50px;
    height: 50px;
    border: 10px solid #CECECC;
    border-top: 10px solid #5B5B5A;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

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

.finaliza {
    display: flex;
    flex-direction: column;
}

.email {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin: 10px;
}

.voucher {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    margin: 10px;
}

.inicio {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    text-align: center;
    align-items: flex-end;
}

.btnfinaliza,
.btnvoucher,
.btnlogin {
    color: #5B5B5A;
    font: normal normal bold 22px Montserrat;
}

.btnemail {
    color: #5B5B5A;
    font: normal normal bold 22px Montserrat;
    width: 300px;
}

.form-email {
    height: 68px;
    width: 80%;
    font: normal normal 700 22px/28.8px Montserrat;
    color: #5b5b5a;
    text-align: right;
    padding-right: 10px;
    margin-right: 15px;
    background: transparent url('../imagenes/sobre.png') 2% 40% no-repeat padding-box;
}

    .form-email:focus-visible {
        outline: #5b5b5a auto 2px;
    }

.form {
    display: flex;
    height: 50%;
    width: 90%;
}

/* Estilos para Login */
.principal-login {
    height: 580px;
    width: 65%;
    margin: 0px auto;
    margin-top: 10%;
    border: 1px solid #707070;
    border-radius: 51px;
}

.form-login {
    display: flex;
    flex-flow: row wrap;
    height: 55%;
    width: 60%;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 30px;
}

.form-login-error {
    display: flex;
    flex-flow: row wrap;
    height: 55%;
    width: 60%;
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 38px;
}

.labellogin {
    display: flex;
    font: normal normal 700 24px Montserrat;
    color: #5b5b5a;
}

.inputlogin {
    font: normal normal 700 24px Montserrat;
    height: 65px;
    width: 100%; /*420px;*/
    border: hidden;
    border-bottom: 1px solid #707070;
    margin-bottom: 20px;
    color: #5b5b5a;
}

    .inputlogin:focus-visible {
        outline: none;
    }

.botonlogin {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.recupera-div {
    font: normal normal 700 16px Montserrat;
    color: #5b5b5a;
    text-align: center;
    width: 100%;
    padding-top: 15%;
}

.recupera {
    text-decoration: none;
    color: #5b5b5a;
    font-weight: bolder;
}

.pos10 {
    padding-top: 180px;
}

.eecc {
    display: flex;
    height: 30%;
    justify-content: space-evenly;
    align-items: flex-end;
}

.eeccbtn {
    display: flex;
    align-items: center;
}


.eecctxt {
    font: normal normal 600 24px Montserrat;
    color: #5b5b5a;
    text-decoration: none;
    padding-left: 23px;
}

.Error {
    font: normal normal 600 18px Montserrat;
    color: #E1440E;
    text-align: center;
    width: 100%
}

.eeccpdf {
    display: flex;
    height: 70%;
    padding: 5% 13% 0 13%;
    flex-flow: row wrap;
    justify-content: space-around;
    align-content: center;
}

.fix10 {
    margin-top: 10px;
}

.botones {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

.principal-recupera {
    height: 830px;
    width: 65%;
    margin: 0px auto;
    margin-top: 5%;
    border: 1px solid #707070;
    border-radius: 51px;
}


/* Toast */

.toastjs-container {
    position: absolute; /* Fallback */
    top: 30px;
    left: calc(50% - 30px);
    width: calc(100% - 60px);
    max-width: 400px;
    z-index: 100;
    transform: translateY(-100%);
    transition: transform 1s;
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: #5b5b5a;
}

    .toastjs-container[aria-hidden="false"] {
        transform: translateY(0%);
    }
    .toastjs-container[aria-hidden="true"] {
        display: none;
    }

.toastjs {
    background: #fff;
    padding: 10px 15px 0; /* No bottom padding because the buttons have a margin-bottom */
    border-left-style: solid;
    border-left-width: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

    .toastjs.default {
        border-left-color: #AAAAAA;
    }

    .toastjs.success {
        border-left-color: #2ECC40;
    }

    .toastjs.warning {
        border-left-color: #FF851B;
    }

    .toastjs.danger {
        border-left-color: #FF4136;
    }


.toastjs-btn {
    background: #cecece;
    padding: 5px 10px;
    border: 0;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #5b5b5a;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

.toastjs-btn--custom {
    background: rgb(50,50,50);
    color: #fff;
}


.toastjs-btn:hover,
.toastjs-btn:focus {
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

/****************************************************/

.error {
    border-bottom: 1px solid #900;
}

    .error.active {
        padding: 0.3em;
    }

.invalid {
    font: normal normal 700 24px Montserrat;
    height: 65px;
    width: 100%; /*420px;*/
    border: hidden;
    border-bottom: 3px solid #A00;
    margin-bottom: 20px;
    color: #A00;
}

    .invalid:focus-visible {
        outline: none;
    }

.eeccfecha {
    display: flex;
    align-items: center;
}

.selecteecc select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .selecteecc select::-ms-expand {
        display: none;
    }

.selecteecc {
    max-width: 250px;
    position: relative;
}

    .selecteecc select {
        display: flex;
        width: 100%;
        cursor: pointer;
        padding: 7px 10px;
        height: 42px;
        outline: 0;
        border: 0;
        border-radius: 0;
        color: #5b5b5a;
        font: normal normal 600 24px Montserrat;
        border-radius: 12px;
        transition: all 0.25s ease;
    }

        .selecteecc select:hover {
            background: #EBEBEA;
        }

.cierresesion {
    font: normal normal 600 20px Montserrat;
    color: #5b5b5a;
    text-decoration: none;
}

.nombre {
    display: flex;
    justify-content: space-around;
    align-items: end;
    height: 5%;
    min-width: 500px;
    font: normal normal 600 20px Montserrat;
    color: #5b5b5a;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    body {
        min-width: 320px;
        max-width: 480px;
        max-height: 100vh;
        width: 98vw;
        height: 96vh;
        margin: 0px auto;
    }

    .lateral {
        width: 98vw;
    }

    .tarjeta-lateral {
        height: 55%;
    }

    .footer-lateral {
        display:none;
    }

    .cierresesion {
        position: fixed;
        top: 5px;
        left: 76%;
        font: normal normal 600 20px Montserrat;
        color: #5b5b5a;
        text-decoration: none;
    }

    .nombre {
        font: normal normal 600 16px Montserrat;
        justify-content:start;
        height: 15%;
    }

    .logo-lateral {
        align-items:flex-start;
    }

        .logo-lateral img {
            margin: auto;
            display: block;
            padding-top: 25px;
            padding-bottom: 10px;
            width: 85%;
        }

    .tarjeta-lateral img {
        display: none;
    }

    .otropago-div {
        display: block;
        color: white;
        padding-top: 10px;
        padding-bottom: 18px;
    }

    .otropago-lateral {
        font-family: Montserrat;
        font-size: 18px;
        font-weight: 800;
        text-align: center;
        text-shadow: 1px 1px 2px #5b5b5a;
    }

    .rrss-caja img {
        box-shadow: 2px 2px 2px #707070;
        border-radius: 999px;
        height: 30px;
    }

    .principal {
        float: none;
        display: flex;
        width: 100vw;
        min-width: 390px;
        max-height: 100vh;
        height: 74vh;
        margin: 0px;
        padding-top: 10%;
        flex-direction: column;
        flex-wrap: nowrap;
        position: absolute;
    }


    .principal-head {
        display: flex;
        height: 40%;
        width: 90%;
        margin: 0px auto;
        margin-top: 30%;
        border: 1px solid #707070;
        border-radius: 51px;
        flex-direction: column;
    }

    .titulo-div {
        display: flex;
        height: 55px;
        width: 80%;
        margin: 0px auto;
        padding-top: 40px;
        font-size: 30px;
    }

    .titulo-div-add {
        padding-top: 140px;
    }

    .titulo-div-add2 {
        padding-top: 50px;
    }

    .titulo {
        display: flex;
        height: 40px;
        font-size: 28px;
        font-weight: 700;
    }

    .form-busca {
        font: normal normal 600 16px Montserrat;
    }

    .ingresa-eecc {
        height: 55px;
        font: normal normal 600 16px/22px Montserrat;
    }

    .principal-webpay {
        display: none;
    }

    .principal-boton {
        display: flex;
    }

    .principal-login {
        height: 75%;
        width: 90%;
        margin: 0px auto;
        margin-top: 30%;
        border: 1px solid #707070;
        border-radius: 51px;
    }

    .form-login {
        width: 70%;
        padding-left: 15%;
        padding-right: 15%;
        padding-top: 10%;
    }


    .labellogin {
        font: normal normal 600 18px Montserrat;
    }

    .inputlogin {
        font: normal normal 600 18px Montserrat;
        height: 35px;
    }

    .invalid {
        font: normal normal 600 18px Montserrat;
        height: 35px;
    }

    .principal-recupera {
        height: 110%;
        width: 90%;
        margin: 0px auto;
        margin-top: 25%;
    }


    .pos10 {
        padding-top: 130px;
    }

    .eecc {
        width: 95%;
        padding: 25% 5% 0 5%;
        flex-direction: column;
        justify-content: space-between;
        align-items:unset;
    }

    .btn {
        width: 170px;
        height: 60px;
        font-size: 18px;
    }

    .botonlogin {
        padding-bottom: 20px;
    }

    .eecc-respo {
        padding-top: 100px;
    }

    .mostrar-monto {
        margin: 0px auto;
        width: 90%;
        height: 50%;
        padding-top: 40px;
    }

    .cliente {
        width: 90%;
        padding-left: 5px;
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 12px;
    }

    .monto-str {
        margin-left: 15%;
        font: normal normal 600 28px/34px Montserrat;
    }

    .monto {
        margin-top: 7%;
        margin-left: 15%;
        font: normal normal 600 28px/40px Montserrat;
        width: 225px;
    }

    .buttons {
        margin-top: 50px;
    }

    .btnvolver {
        padding-left: 1%;
    }

    .btnpagar {
        padding-left: 5%;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    body {
        min-width: 768px;
        max-width: 1024px;
        max-height: 100vh;
        width: 98vw;
        height: 96vh;
        margin: 0px auto;
    }

    .lateral {
        width: 100vw;
        min-width: 768px;
        max-width: 1024px;
    }

    .tarjeta-lateral img {
        display: none;
    }

    .logo-lateral {
        height: 41%;
        align-items: flex-start;
    }

        .logo-lateral img {
        }

    .principal {
        float: none;
        display: flex;
        width: 100vw;
        min-width: 768px;
        max-height: 100vh;
        height: 72vh;
        margin: 0px;
        padding-top: 15%;
        flex-direction: column;
        flex-wrap: nowrap;
        position: absolute;
    }


    .principal-head {
        display: flex;
        height: 38%;
        width: 90%;
        border: 1px solid #707070;
        border-radius: 51px;
        flex-direction: column;
    }

    .titulo-div {
        display: flex;
        height: 44px;
    }

    .titulo {
        display: flex;
        height: 40px;
        font-size: 28px;
        font-weight: 700;
    }

    .form-busca {
        font: normal normal 700 18px/22px Montserrat;
    }

    .ingresa-eecc {
        height: 75px;
        font: normal normal 700 18px/22px Montserrat;
    }

    .principal-webpay {
        display: none;
    }

    .principal-login {
        height: 50%;
        width: 90%;
        margin: 0px auto;
        margin-top: 18%;
        border: 1px solid #707070;
        border-radius: 51px;
    }

    .labellogin {
        font: normal normal 600 22px Montserrat;
    }

    .inputlogin {
        font: normal normal 600 22px Montserrat;
        height: 55px;
    }

    .form-login {
        width: 70%;
        padding-left: 15%;
        padding-right: 15%;
        padding-top: 0%;
    }

    .nombre {
        padding-top: 5%;
        font: normal normal 600 16px Montserrat;
    }

    .pos10 {
        padding-top: 150px;
    }

    .eecc {
        width: 90%;
        padding: 0 5% 0 5%;
    }

}

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
    body {
        min-width: 1024px;
        max-height: 1366px;
        width: 98vw;
        height: 100vh;
        margin: 0px auto;
    }

    .lateral {
        max-height: 100vh;
        width: 100vw;
    }

    .tarjeta-lateral img {
        display: none;
    }

    .logo-lateral {
        height: 41%;
    }

        .logo-lateral img {
            margin: auto;
            display: block;
            padding-top: 20px;
            padding-bottom: 10px;
            width: 40%;
        }

    .eecc-respo {
        padding-top: 150px;
    }

    .otropago-lateral {
        font-size: 32px;
    }

    .rrss-lateral {
        padding-left: 25%;
    }

    .nombre {
        top: 120px;
        font-size: 24px;
    }

    .pos10 {
        padding-top: 190px;
    }

    .cliente {
        width: 90%;
    }

    .btnvolver {
        padding-left: 16%;
    }

    .principal-login {
        height: 50%;
    }

    .principal-recupera {
        height: 70%;
    }
}