:root {
    --colorcliente: #badc58;
    --colorclientesecundario: #6ab04c;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nav-usuario,
.nav-cerrarsesion {
    display: none;
}

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: #ffffff;
    font-family: 'Encode Sans', sans-serif;
    color: #434142;
    font-size: 16px;
}

.invalido {
    box-shadow: 0.3em 0.3em 0.9em #f15656;
}

.iconos-consorcio {
    color: #ff8000;
    font-size: 30px;
}

/* Large devices (laptops/desktops, 992px and up) 
@media only screen and (max-width: 992px) {
    body {
        background-color: #434142;
    }
} */

.boton {
    background-color: #288FC5;
    border-radius: 10px;
    margin: 0.25rem;
    padding: 1rem 2rem;
    color: #FFFFFF;
}

.container {
    width: 75%;
    margin: 0 auto;
}

@media only screen and (max-width: 768px) {
    .container {
        width: 90%;
    }
}

/* INGRESO */

.ingreso {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 85vh;
}

@media only screen and (max-width: 576px) {
    .ingreso {
        height: auto;
    }
}

.ingreso-contenido {
    display: flex;
    height: 420px;
}

@media only screen and (max-width: 992px) {
    .ingreso-contenido {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-width: 576px) {
    .ingreso-contenido {
        flex-direction: column;
    }
}

/* INGRESO - TITULOS */

.ingreso-titulos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 100%;
    border-radius: 8px 0 0 8px;
    background-image: url(../img/fondo-tech-negro.jpg);
}

@media only screen and (max-width: 992px) {
    .ingreso-titulos {
        border-radius: 0;
    }
}

@media only screen and (max-width: 576px) {
    .ingreso-titulos {
        width: 100%;
        flex-direction: column-reverse;
    }
}

h2 {
    font-size: 22px;
    text-align: initial;
}

.ingreso-titulos h1 {
    color: #FFFFFF;
    text-align: center;
    margin: 0 0 2rem 0;
    padding: 0 .5rem;
}

.ingreso-titulos h1 span {
    font-weight: 400;
    font-size: 1.8rem;
}

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

    .ingreso-titulos h1,
    .ingreso-titulos h1 span {
        font-size: 1rem;
        margin-bottom: 1.2rem;
    }

    .ingreso-titulos h1 br {
        display: none;
    }
}

hr {
    height: 1px;
    background-color: #FFFFFF;
    /*width: 40%;*/
    margin: 0;
    /*width: 180px;*/
}

@media only screen and (max-width: 576px) {
    hr {
        margin: .5rem;
        height: .25px;
        width: 35%;
    }

    .ocultarcelular {
        display: none;
    }
}

.ingreso-logo {
    width: 200px;
    border-radius: 6px;
    margin-top: 2rem;
}

@media only screen and (max-width: 576px) {
    .ingreso-logo {
        width: 60%;
        margin-top: 1rem;
    }
}

/* INGRESO - FORMULARIO */

.ingreso-formulario {
    background-color: #FFFFFF;
    width: 50%;
    height: 100%;
    border-radius: 0 8px 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 992px) {
    .ingreso-formulario {
        border-radius: 0;
    }
}

@media only screen and (max-width: 576px) {
    .ingreso-formulario {
        width: 100%;
        display: block;
    }
}

.ingreso-form {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

@media only screen and (max-width: 576px) {
    .ingreso-form {
        height: 442px;
        padding: 2rem 1rem;
    }
}

.ingreso-form label {
    font-size: .9rem;
    font-weight: 600;
    padding-bottom: .25rem;
}

.datos-usuario label span {
    color: #464646;
    font-weight: 900;
}

.datos-usuario input {
    background-color: none;
    border: none;
    border-bottom: 1px solid #ECEDEF;
    font-size: .8rem;
    padding: .5rem 0 .75rem .5rem;
    margin-bottom: 1rem;
    width: 100%;
}

.ingreso-botones {
    margin: .5rem 0 1.5rem 0;
    display: flex;
}

@media only screen and (max-width: 768px) {
    .ingreso-botones {
        flex-direction: column;
    }

}

.ingreso-botones button {
    padding: .8rem 1.2rem;
    margin-right: .5rem;
    background-color: #464646;
    color: #ffffff;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
}




@media only screen and (max-width: 768px) {
    .ingreso-botones button {
        padding: .8rem 1.2rem;
        margin: 0 0 .5rem 0;
    }
}

.ingreso-form a {
    color: #288FC5;
    text-decoration: none;
    font-size: 9rem;
    width: fit-content;
}

.ingreso-form hr {
    width: 100%;
    margin-top: 1rem;
    background-color: #434142;
    height: .5px;
}

.ingreso-form a {
    font-size: .9rem;
    font-weight: 600;
}

.ingreso-form h5 {
    font-weight: 600;
    font-size: .9rem;
    margin: 1rem 0;
}

.ingreso-form h5 span {
    font-weight: 900;
    color: #288FC5;
}

.ingreso-registro {
    display: flex;
}

@media only screen and (max-width: 768px) {
    .ingreso-registro {
        flex-direction: column;
    }
}

.ingreso-registro button {
    border-radius: 2px;
    padding: .8rem 1.2rem;
    background-color: var(--colorcliente);
    color: rgb(6, 36, 10);
    text-transform: uppercase;
    border: none;
    margin: 8px;
}

.ingreso-registro button.dng {
    background-color: #dc5858;
    color: rgb(36, 6, 6);
}

.ingreso-registro button.dng:hover {
    background-color: #532222;
    color: white;
}

.ingreso-registro button:hover {
    background-color: var(--colorclientesecundario);
    transition: all ease .3s;
    color: white;
    cursor: pointer;
}

.ingreso-form button:hover {
    background-color: #1f1f1f;
    transition: all ease .3s;
}

.ingreso-form a:hover {
    color: #263774;
    transition: all ease .3s;
}

/* HEADER */
.card {
    box-shadow: 0px 0px 5px #00000066;
    padding: 15px;
    border-radius: 2px;
    margin: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 250px;
    min-height: 320px;
    justify-content: space-between;
    cursor: pointer;
}

.titulo_card {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    justify-content: space-between;
}

.header {
    background-image: url(../img/fondo-tech-negro.jpg);
    background-size: cover;
}


.header-contenido {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 0;
}

@media only screen and (max-width: 768px) {
    .header-contenido {
        justify-content: center;
    }
}

.header-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #FFFFFF;
}

.header-logo img {
    width: 100px;
    border-radius: 5px;
}

.header-logo h3 {
    margin: 0;
    font-size: 1.1rem;
}

.header-datos {
    color: #FFFFFF;
    text-align: right;
    display: flex;
    flex-direction: column;
}

.header-telefono,
.header-direccion {
    padding: .25rem 0;
}

.header-datos ion-icon {
    margin: 0;
    padding-right: .5rem;
}

@media only screen and (max-width: 768px) {
    .header-datos {
        display: none;
    }

}

.divagregarcursada {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}



/* NAV RESPONSIVE */

.navbar {
    display: flex;
    background-color: #434142;
    padding: 1rem 0;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 3rem;

}

.nav-list li a {
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
}

.nav-list li {
    text-decoration: none;
    color: #ffffff;
}

.linksindecorar {
    text-decoration: none;
    color: #32372d;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.nav-list li .active {
    color: #ff8000;
}

.nav-list li:hover a {
    transition: all ease .2s;
    color: #ff8000;
}

.abrir-menu,
.cerrar-menu {
    display: none;
    border: 0;
    background-color: transparent;
    font-size: 2rem;
    color: #FFFFFF;
    cursor: pointer;
    margin: 0 auto;
}

.cerrar-menu {
    margin: 0;
}

.abrir-menu:hover,
.cerrar-menu:hover {
    color: #288FC5;
    transition: all ease .2s;
}

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

    .nav-usuario,
    .nav-cerrarsesion {
        display: block;
    }

    .navbar {
        padding: .5rem 0;
    }

    .abrir-menu,
    .cerrar-menu {
        display: flex;
    }

    .nav {
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .9);
        padding: 3rem;
        bottom: 0;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
    }

    .visible {
        opacity: 1;
        visibility: visible;
        width: 85%;
        z-index: 2;
    }

    .nav-list {
        flex-direction: column;
        margin-top: 2rem;
        gap: 3rem;
        align-items: center;
        text-align: center;
    }

    .nav-list li a {
        color: #ffffff;
    }

    .nav-list li:hover a {
        display: block;
    }

}

/* BARRA */

.barra {
    background-color: #ECEDEF;
}

.barra-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.barra-list a {
    display: flex;
    margin: .75rem 0;
    text-decoration: none;
    color: #434142;
    padding-right: .5rem;
}

.barra-list span {
    font-weight: 900;
    color: #464646;
    padding-right: .5rem;
}

/* MAIN */

.main {
    padding: 3rem 0;
    background-color: #FFFFFF;
}

.main-title {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.main-title h1 {
    color: #434142;
    text-align: center;
    padding: 0 1rem .5rem 1rem;
    margin: 0;
}

.main-title hr {
    background-color: #ECEDEF;
    height: .1px;
}

.main-contenido {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.ancor-novedad {
    text-decoration: none;
    font-size: larger;
    font-weight: bold;
    color: #ff8000;
    padding: 6px;
}

.main-items {
    text-decoration: none;
    background-size: cover;
    color: #FFFFFF;
    text-transform: uppercase;
    margin: .5rem;
    width: 340px;
    height: 220px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

@media only screen and (max-width: 786px) {
    .main-items {
        width: 80%;
        color: #ECEDEF;
    }
}

@media only screen and (max-width: 576px) {
    .main-items {
        width: 100%;
    }
}

.imagen-novedad {
    width: 100%;
    margin-top: 10px;
    border-radius: 4px;
}

.main-items-1 {
    background-image: url(../img/capacitacion_docentes.jpg);
}

.main-items-2 {
    background-image: url(../img/convocatoria-becas-estudiantes.jpg);
}

.main-items-3 {
    background-image: url(../img/estudiantes.jpg);
}

.main-items-4 {
    background-image: url(../img/inscripciones-iteco.jpg);
}

.main-items:hover .main-novedad {
    font-size: 1.05rem;
    text-align: center;
    transition: all ease .3s;
}

.main-items .main-novedad {
    height: 55%;
}

.main-items .main-fecha {
    height: 45%;
}

.main-items .main-novedad,
.main-items .main-fecha {
    display: flex;
    align-items: flex-end;
    margin: 0;
    text-align: center;
    z-index: 1;
}

.main-items .main-fecha {
    margin-bottom: .5rem;
}

.main-gradiente {
    background-image: linear-gradient(to right, rgba(40, 143, 197, .8), rgba(38, 55, 116, .8));
    width: 100%;
    height: 100%;
    position: absolute;
}

.main-paginas {
    display: flex;
    justify-content: center;
    margin: 0;
    padding-top: 2rem;
    align-items: center;
}

.main-paginas p {
    margin: 0;
}

.main-paginas a {
    text-decoration: none;
    color: #434142;
    padding: 0 .5rem;
}

.main-paginas a span {
    color: #288FC5;
    font-weight: 900;
}

/* MIS MATERIAS */

.info-materia {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

.main-contenido-materias {
    flex-direction: column;
}

.main-pestanas ul {
    list-style: none;
    display: flex;
    gap: 2rem;
    padding-bottom: .5rem;
}

.main-pestanas ul li a {
    text-decoration: none;
    color: #434142;
    padding: .5rem;
}

@media only screen and (max-width: 786px) {
    .main-pestanas ul {
        gap: 1rem;
        font-size: .85rem;
    }

    .main-pestanas ul li a {
        padding: .25rem;
    }
}

.main-pestanas ul li:hover a {
    font-weight: 700;
    transition: all ease .2s;
}

.main-pestanas ul li.active {
    border-bottom: 4px solid #288FC5;
    padding-bottom: .5rem;
    font-weight: 700;
}

/* .main-pestanas hr {
    margin-top: -.5rem;
    width: 100%;
} */

.main-tabla {
    margin-top: 2rem;
}

.main-tabla-encabezado,
.main-tabla-row {
    display: flex;
    list-style: none;
    width: 100%;
    padding: 1rem 2rem;
    justify-content: space-between;
}

.main-tabla-row-principal {
    display: flex;
    list-style: none;
    width: 100%;
    padding: 1rem 12rem;
    justify-content: space-between;
    background-color: #ECEDEF;
    border-radius: 8px;
    margin-bottom: .75rem;
}



@media only screen and (max-width: 786px) {
    .main-tabla {
        font-size: .85rem;
    }

    .main-tabla-encabezado,
    .main-tabla-row {
        padding: 1rem;
    }

    .main-tabla-row-principal {
        padding: 1rem;
    }
}

.main-tabla-encabezado {
    opacity: .75;
}

.main-tabla-row {
    background-color: #ECEDEF;
    border-radius: 8px;
    margin-bottom: .75rem;
}

.main-tabla-encabezado li,
.main-tabla-row li {
    width: 25%;
    padding-left: 1rem;
    display: flex;
    align-items: center;
}

.main-tabla-row-principal li {
    width: 25%;
    padding-left: 1rem;
}

.tabla-notas {
    background-color: #ECEDEF;
    border-radius: 2px;
    margin-bottom: 0.75rem;
    display: flex;
    list-style: none;
    width: 100%;
    padding: 1rem 2rem;
    justify-content: space-between;
    align-items: center;
}

.div-nota-fecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.negrita-notas {
    text-decoration: none;
    font-size: x-large;
    font-weight: 600;
    color: #434142;
}

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

    .main-tabla-encabezado li,
    .main-tabla-row li {
        display: flex;
        padding-left: 0;
        justify-content: center;
    }

    .main-tabla-row-principal li {
        padding-left: 0;
    }
}

/* MATERIA ELEGIDA */

.main-pestanas-materias ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-pestanas-materias ul a {
    text-decoration: none;
    background-color: #ECEDEF;
    color: #434142;
    margin: .25rem;
    padding: 1rem 2rem;
    border-radius: 10px;
    transition: all ease .2s;
}

.main-pestanas-materias ul a:hover li {
    opacity: 1;
}

.main-pestanas-materias ul a li {
    opacity: .75;
}

.main-pestanas-materias ul .active {
    cursor: pointer;
    background-color: #288FC5;
    color: #FFFFFF;
}

.main-pestanas-materias ul .active:hover {
    background-color: #263774;
}

.main-pestanas-materias ul a.btn-rojo {
    color: white;
    padding: 3px 10px;
    margin: 0px;
    display: inline-block;
    width: 135px;
    text-align: center;
    background-color: #ff2424;
    border-radius: 5px;
    transition: all ease .2s;
}

.main-pestanas-materias ul a.btn-rojo:hover {
    background-color: #a81f1f;
    cursor: pointer;
}

.main-pestanas-materias ul .active li {
    opacity: 1;
}


.main-pestana-elegida {
    margin: 2rem .5rem;
    /*max-width: 750px;*/
    text-align: justify;
}

/* FOOTER */

.footer {
    background-color: #434142;
    /* height: 15vh; */
    height: auto;
    padding: 1.5rem;
    font-size: .9rem;
    margin-top: auto;
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
}

@media only screen and (max-width: 576px) {
    .footer {
        height: auto;
    }
}

.footer-contenido {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mesasexamen {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 15px
}

.phorariolugar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


@media only screen and (max-width: 576px) {
    .footer-contenido {
        display: flex;
        flex-direction: column;
    }

    .mesasexamen {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        margin-left: 0px;
        margin-bottom: 10px;
    }

    .mesasexamen h2 {
        text-align: center;
    }

    .phorariolugar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center
    }
}

.fechagrande {
    font-weight: 600;
    text-align: center;
}

@media only screen and (max-width: 576px) {
    .info-materia {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 20px;
        align-items: center;
    }
}

.footer-iteco {
    display: flex;
    color: #FFFFFF;
    align-items: center;
    flex-direction: column;
}

.footer-iteco img {
    width: 100px;
    border-radius: 5px;
}

.footer-iteco-datos {
    display: flex;
    color: #ffffff;
}

.footer-iteco-datos span {
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 576px) {
    .footer-iteco-datos {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .footer-iteco-datos span {
        padding: .25rem;
    }

}

.footer-iteco-datos ion-icon {
    padding-right: .5rem;
}

.footer-hr {
    display: none;
    width: 80%;
}

@media only screen and (max-width: 576px) {
    .footer-hr {
        display: block;
        margin: 1rem;
    }

    .footer-logo {
        width: -webkit-fill-available;
    }
}

.footer-sc3 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-sc3 p {
    color: #ffffff;
    text-align: center;
}

.footer-sc3 img {
    width: 100px;
}

/*MIS EXAMENES*/

.nota-final-letrachica {
    font-size: 14px;
}

.div-container-examenes {
    justify-content: space-between;
    margin-left: 0px;
}

.div-centro-examenes {
    display: flex;
    padding: 8px;
    flex-direction: column;
}

.examen-inscripcion {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 20px
}

.examen-inscripto {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

/*CONTACTO*/
.maps {
    width: 100%;
    border-radius: 8px;
    left: 400px;
    z-index: 1;

}

.imagen-contacto {
    border-radius: 5px;
    width: 100%;
}

.div-img-maps {
    display: flex;
    flex-direction: row;
}

/* CONTACTO */

main .g-contacts.footer {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    color: #777
}

@media only screen and (max-width: 576px) {
    main .g-contacts.footer {
        flex-direction: column;
    }
}

.g-contacts-item {

    padding: 5px;
}

/* CURSADAS */

.boton-cursadas {
    background-color: var(--colorcliente);
    border-radius: 10px;
    margin: 0.25rem;
    padding: 1rem 2rem;
    color: #FFFFFF;
}

@media only screen and (max-width: 576px) {
    .boton-cursadas {
        background-color: var(--colorcliente);
        border-radius: 5px;
        padding: 0.2rem 0.5rem;
        color: #FFFFFF;
    }
}

.boton-cursadas:hover {
    background-color: var(--colorclientesecundario);
    transition: all ease .3s;
    cursor: pointer;
}

.btn-rojo-cursadas {
    color: white;
    padding: 3px 10px;
    margin: 0px;
    display: inline-block;
    width: 135px;
    text-align: center;
    background-color: #ff2424;
    border-radius: 5px;
    transition: all ease .2s;
}

.btn-rojo-cursadas:hover {
    background-color: #a81f1f;
    cursor: pointer;
}

@media only screen and (max-width: 576px) {
    .btn-rojo-cursadas {
        color: white;
        padding: 3px 10px;
        margin: 0px;
        display: inline-block;
        width: 85px;
        text-align: center;
        background-color: #ff2424;
        border-radius: 5px;
        transition: all ease .2s;
    }
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 3;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    background-color: #fefefe;
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}

#editor {
    width: 50%;
}

#recortarImagen {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.agenda-img {
    width: 200px;
    border-radius: 6px;
    margin-top: 2rem;
}

.div-agendas {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

@media only screen and (max-width: 576px) {
    .div-agendas {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.oculto {
    display: none;
}

.cursor-pointer {
    cursor: pointer;
}

.div-progress {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-progress {
    width: 100%;
}

.progressbar {
    counter-reset: paso;
}

.progressbar li {
    list-style-type: none;
    float: left;
    width: 33.33%;
    position: relative;
    text-align: center;
}

.progressbar li:before {
    content: counter(paso);
    counter-increment: paso;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 3px solid #63686e;
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background: #fff;
}

.progressbar li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #63686e;
    top: 15px;
    left: -50%;
    z-index: -1;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active {
    color: #253d1a;
}

.progressbar li.active:before {
    background-color: var(--colorcliente);
    border-color: var(--colorclientesecundario);
}

.progressbar li.active+li:after {
    background-color: var(--colorclientesecundario);
}

.fade-in {
    animation: fadeIn ease .5s;
    -webkit-animation: fadeIn ease .5s;
    -moz-animation: fadeIn ease .5s;
    -o-animation: fadeIn ease .5s;
    -ms-animation: fadeIn ease .5s;
}

.agenda-activa {
    box-shadow: 0px 0px 25px var(--colorcliente);
}

.card-calendario {
    box-shadow: 0px 0px 5px #00000066;
    padding: 15px;
    border-radius: 2px;
    margin: 10px;
    flex-direction: column;
}

.card-datosusuario {
    box-shadow: 0px 0px 5px #00000066;
    padding: 15px;
    border-radius: 2px;
    margin: 10px;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
}

.card-confirmacion {
    box-shadow: 0px 0px 5px #00000066;
    padding: 15px;
    border-radius: 2px;
    margin: 10px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

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

.div-horario {
    display: flex;
    text-align: center;
    flex-direction: column;
}

.margen {
    margin: 10px;
}

.ver-mas {
    cursor: pointer;
    font-size: 14px;
}

.input-horario {
    border: none;
    border: 1px solid #ffffff;
    border-bottom: 0.2rem solid #6b6b6b;
    font-size: 1.1rem;
    padding: 0.5rem 0 0.75rem 0.5rem;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

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

.img-confirmacion {
    width: 150px;
}

.pd8 {
    padding: 8px;
}

.pd2 {
    padding: 2px;
}

.mr6 {
    margin-right: 6px;
}

.m20 {
    margin: 20px;
}

.rowreverse {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.msg-confirmacion-agenda {
    font-weight: bold;
    text-align: center;
    background-color: var(--colorcliente);
    padding: 6px;
    border-radius: 2px;
}

div.boxejecutando {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    padding: 200px;
    margin: auto;
    background-color: #bdc3c7;
    opacity: 0.7;
    z-index: 3;
}

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

.msg-advertencia {
    color: white;
    border-radius: 5px;
    background-color: #dc5858;
}