@import "color.css";

:root {
    /* Colores */
    --blue                  : #007bff;
    --indigo                : #6610f2;
    --purple                : #6f42c1;
    --pink                  : #e83e8c;
    --red                   : #dc3545;
    --orange                : #fd7e14;
    --yellow                : #ffc107;
    --green                 : #28a745;
    --teal                  : #20c997;
    --cyan                  : #17a2b8;
    --white                 : #ffffff;
    --gray                  : #6c757d;
    --gray-dark             : #343a40;
    --primary               : #007bff;
    --secondary             : #6c757d;
    --success               : #28a745;
    --info                  : #17a2b8;
    --warning               : #ffc107;
    --danger                : #dc3545;
    --light                 : #f8f9fa;
    --dark                  : #343a40;
    --pendienteC            : #ffbb00;
    --aceptada              : #73ff73;
    --denegada              : #ff5151;
    /* Resoluciones */
    --breakpoint-xs         : 0;
    --breakpoint-sm         : 576px;
    --breakpoint-md         : 768px;
    --breakpoint-lg         : 992px;
    --breakpoint-xl         : 1200px;
    /* Fuentes */
    --font-family-sans-serif: 'Poppins', sans-serif;
    --font-family-monospace : 'Roboto-Mono', monospace;
    --tamanomuypeq          : 12px;
    --tamanopeq             : 14px;
    --tamanomed             : 16px;
    --tamanoh1              : 2rem;
    --tamanoh2              : 1.8rem;
    --tamanoh3              : 1.1rem;
    /* Variables */
    --logo-max-size         : 150px;
    --logo-padding-top      : 0.85rem;
    --logo-height           : auto;
    /* Colores */
    --manana                : #00a3f6;
    --tarde                 : #ffc107;
    --pendiente             : #ff7684;
    --desconodido           : #fbff00;

}

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

body {
    display       : flex;
    flex-direction: column;
    height        : 100vh;
    font-family   : var(--font-family-sans-serif);
    font-size     : var(--tamanopeq);
    overflow-x    : hidden;
    align-items   : center;
}

body[class="body-solicitudes"] {
    height            : 100vh;
    display           : grid;
    grid-template-rows: 0fr 0fr 0fr 0fr 0fr;
    font-family       : var(--font-family-sans-serif);
    font-size         : var(--tamanopeq);
}

body[class="body-documentos"] {
    height            : 100vh;
    display           : grid;
    grid-template-rows: 0fr 0fr 0fr;
    font-family       : var(--font-family-sans-serif);
    font-size         : var(--tamanopeq);
}

body[class="body-documentos"]>.section-emtusa {
    width: initial;
}

h1,
h2,
h3 {
    padding    : 1rem 0rem;
    font-weight: bold;
    text-align : center;
}

h1 {
    font-size: var(--tamanoh1);
}

h2 {
    font-size: var(--tamanoh2);
}

h3 {
    font-size: var(--tamanoh3);
    color    : white;
}

select {
    -webkit-appearance: none;
    -moz-appearance   : none;
    text-indent       : 1px;
}

.hidden {
    height  : 0 !important;
    opacity : 0;
    overflow: hidden;
    padding : 0 !important;
    margin  : 0 !important;
}

.flex-row {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: end;
}

.flex-center-x {
    display        : flex;
    justify-content: center;
}

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

.flex-center-center {
    /*display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;*/
    display        : flex;
    flex-wrap      : wrap;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
}

.flex-right-right {
    display        : flex;
    align-items    : right;
    justify-content: right;
}

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

.m10 {
    margin: 1rem 0;
}

.w100 {
    width: 100%;
}

.space-evenly {
    justify-content: space-evenly;
}

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

.flex-row {
    flex-direction: row;
}

.visible {
    height  : initial;
    overflow: initial;
}

.fa-exclamation-triangle {
    color: var(--orange);
}

button>i {
    margin: 0 .25rem 0 0;
}

/* ---------------------------------------------------------------------- */

/* Inicio */

/* ---------------------------------------------------------------------- */

main[class="main-inicio"] {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
}

main[class="main-inicio"]>h3 {
    color         : var(--emtusa-blue);
    padding-bottom: 0.25rem;
}

@media screen and (max-width: 576px) {
    main[class="main-inicio"] {
        width: 90%;
    }

    #titulo {
        padding-top   : 2.5rem;
        padding-bottom: 5rem;
    }
}

#resumen-cantidad thead,
#resumen-cantidad th,
#resumen-cantidad tr {
    text-align: left;
}

#resumen-cantidad td {
    padding     : 0.25rem 0;
    padding-left: 1.5rem;
}

#resumen-cantidad tbody {
    background: white;
}

.avanzar-tabla-botones {
    display       : flex;
    flex-direction: row;
}

.button-table {
    margin: 0rem 1rem;
    cursor: pointer;
}

#imgPortada {
    border       : 4px solid #ddd;
    border-radius: 4px;
    display      : block;
    max-height   : 25vh;
    width        : auto;
    height       : auto;
    box-shadow   : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#mensaje {
    color     : var(--emtusa-blue);
    text-align: center;
    font-size : 1.5rem;
}

/* ---------------------------------------------------------------------- */

/* Login */

/* ---------------------------------------------------------------------- */

body {
    background-color: rgb(244, 246, 249);
}

#login-h2 {
    padding   : 0;
    text-align: left;
    font-size : 1.5rem;
    margin    : 0rem 0rem 1.5rem 0rem;
}

main[class="main-login"] {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    height         : 100%;
}

header div,
form {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
}

.login-content {
    background   : white;
    width        : 256px;
    padding      : 2rem 2rem;
    border-radius: 6px;
    margin       : 0rem 0rem 2rem 0rem;
    box-shadow   : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}

.usuario,
.password {
    display        : flex;
    justify-content: center;
    flex-direction : column;
    margin         : 0rem 0rem 0.5rem 0rem;
}

.usuario label,
.password label {
    font-weight: bolder;
    font-size  : 12px;
    color      : #afafaf;
}

.recordar-contrasena {
    font-size : 12px;
    text-align: center;
    margin    : 0rem 0rem 0.5rem 0rem;
}

#resultado-login {
    color     : rgb(255, 0, 0, 50%);
    text-align: center;
    margin    : 0rem 0rem 0.5rem 0rem;
}

#username,
#password {
    padding: 0rem 0.5rem;
    width  : 100%;
}

button {
    font            : var(--font-family-sans-serif);
    background-color: var(--emtusa-blue);
    color           : white !important;
    width           : 150px;
    height          : 35px;
    border          : 0;
    border-radius   : 6px;
    box-shadow      : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
    cursor          : pointer;
}

button[id="boton-submit"] {
    font            : var(--font-family-sans-serif);
    background-color: var(--emtusa-blue);
    color           : white;
    width           : 100%;
    height          : 35px;
    border          : 0;
    border-radius   : 6px;
    box-shadow      : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
    cursor          : pointer;
}

.login-container {
    padding      : 0rem 0.25rem;
    border       : 0.5px solid rgb(182, 182, 182);
    border-radius: 5px;
}

.icon-user,
.icon-password {
    color: rgb(162, 162, 162);
}

/* ---------------------------------------------------------------------- */

/* Realizar Solicitudes */

/* ---------------------------------------------------------------------- */

.content-header {
    padding        : 0.5rem 0.5rem;
    display        : flex;
    justify-content: center;
}

main[class="solicitudes-main"] {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
}

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

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

.col-content {
    display    : flex;
    align-items: flex-start;
    width      : 100%;
}

#div-depart-cat>div:first-child {
    margin: 0rem 0.5rem 0rem 0rem;
}

.label-solicitudes {
    padding    : 0.5rem 0rem;
    font-weight: 700;
}

#div-seleccion-fecha-hora {
    display        : flex;
    flex-direction : row;
    justify-content: center;
    align-items    : center;
}

#div-seleccion-fecha-hora>div {
    margin: 0rem 1rem;
}

.col-fecha-hora {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    width          : 40%;
}

.card {
    width           : 475px;
    box-shadow      : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-direction  : column;
    border-radius   : 6px;
    margin          : 0rem 0rem 1rem 0rem;
    background-color: #ffffff;
}

.card-header {
    width        : 100%;
    border-radius: 6px 6px 0px 0px;
    background   : var(--emtusa-blue);
}

.card-header h3 {
    padding: 0.5rem 0rem;
}

.card-body {
    padding      : 0.75rem 1.25rem 1.25rem 1.25rem;
    width        : 100%;
    border       : 1px solid rgba(0, 0, 0, .125);
    border-radius: 0px 0px 6px 6px;
}

form {
    width : 100%;
    height: 100%;
    margin: 0rem 0rem 8rem 0rem;
}

#input-departamento,
#input-categoria {
    text-transform: capitalize;
}

.text-info {
    display        : block;
    width          : 100%;
    height         : calc(2.25rem + 2px);
    padding        : 0.375rem 0.75rem;
    font           : var(--font-family-sans-serif);
    font-size      : var(--tamanomed);
    font-weight    : 400;
    line-height    : 1.5;
    color          : #495057;
    background-clip: padding-box;
    border         : 1px solid #ced4da;
    border-radius  : 0.25rem;
    box-shadow     : inset 0 0 0 rgb(0 0 0 / 0%);
    transition     : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-align     : left;
    overflow       : hidden;
}

.observacion {
    font-size: 12px;
    width    : 250px;
    margin   : 0 0 1rem 0;
    overflow : hidden;
}

#add_fich {
    margin: 1rem 0 0 0;
}

#div-fich-2,
#div-fich-3,
#div-fich-4,
#div-fich-5 {
    transition: all 0.5s ease;
}


#select-motivo-peticion,
#opciones-seleccion,
#select-licencias-retribuidas {
    background: white;
}

#select-licencias-retribuidas {
    margin   : 0rem 0.5rem 0rem 0rem;
    font-size: 14px;
}

.long-content {
    white-space: break-spaces;
    overflow   : hidden;
}

.div-select-LR {
    margin: 1rem 0rem 0rem 0rem;
}

.div-select-LR>p {
    margin: 1rem 1rem 0rem 1rem;
}

#label-licencias-retribuidas {
    margin: 0rem 0rem 0rem 0rem;
}

#contador-dias {
    cursor    : initial;
    text-align: center;
}

#solicitar-reseteo{
    background-color: var(--emtusa-blue) !important;
}

.text-info:read-only {
    /*background-color: #e9ecef;*/
    opacity         : 1;
}

.text-info:focus {
    color       : #495057;
    border-color: #80bdff;
    outline     : 0;
    box-shadow  : 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

#select-horas-cita {
    text-align: center;
    width     : 50%;
}

.div-seleccion-motivo,
.div-seleccion-rango {
    display       : flex;
    flex-direction: column;
}

.div-seleccion-motivo>label,
.div-seleccion-rango>label {
    padding: 0.5rem 0rem;
}

.div-fechas-row {
    display       : flex;
    flex-direction: row;
}

.div-fechas-col {
    display       : flex;
    flex-direction: column;
}

.div-table {
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 6px;
    overflow       : hidden;
    margin         : 1rem 0rem 0rem 0rem;
    box-shadow     : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 40%);
}

.div-table>table {
    box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}

table {
    border-collapse: collapse;
}

.tabla {
    border-radius: 6px;
    overflow     : hidden;
    background   : white;
}

#div-intervalo-fechas-simple {
    margin: 0rem 0.5rem 0rem 0rem;
}

#icon-calendario-simple,
#icon-calendario-simple2,
#icon-calendario-rango,
#input-fecha-simple,
#input-fecha-simple2,
#input-fecha-rango {
    cursor    : pointer;
    text-align: center;
}

.div-info-group {
    display: flex;
}

.info-group-box {
    display         : flex;
    align-items     : center;
    padding         : 0.375rem 0.75rem;
    margin          : 0rem 0.25rem 0rem 0rem;
    font-size       : var(--tamanoh3);
    font-weight     : 400;
    line-height     : 1.5;
    color           : #495057;
    text-align      : center;
    white-space     : nowrap;
    background-color: #e9ecef;
    border          : 1px solid #ced4da;
    border-radius   : 0.25rem;
}

#aviso-seleccion-dias {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    padding        : 0.5rem 0rem;
}

@media screen and (max-width: 768px) {
    body {
        height: 120vh;
    }

    .card {
        width: 350px;
    }

    #div-depart-cat,
    .div-fechas-row,
    #div-seleccion-fecha-hora {
        flex-direction: column;
    }

    #aviso-seleccion-dias>span {
        font-size: 12px;
    }

    #div-intervalo-fechas-simple {
        margin: 0;
    }

    .col-fecha-hora {
        width: 100%;
    }

    #select-horas-cita {
        padding-left: 3.25rem;
    }

}

/* ---------------------------------------------------------------------- */

/* Consultar Solicitudes */

/* ---------------------------------------------------------------------- */
main[class="consulta-solicitudes-main"] {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    height        : 75vh;
}

main[class="consulta-solicitudes-main"] div {
    padding-bottom: 1rem;
}

.tarjeta {
    min-width: 20%;
}

.contenido {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: center;
    padding        : 0;
}

.contenido label {
    margin : 0;
    padding: 0rem 0.5rem;
}

li>i {
    transform: scale(1.2);
}

.cuerpo {
    background   : white;
    padding      : 0.5rem 0.5rem;
    border       : 0;
    border-radius: 6px;
    box-shadow   : 0px 0px 6px #696969;
}

.contenido-tabla {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    width          : 100%;
}

.leyenda {
    /* height       : 0;
    opacity      : 0; */
    width        : 300px;
    overflow     : hidden;
    border-radius: 6px;
    box-shadow   : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
    background   : white;
    padding      : 0;
    text-align   : center;
    margin-bottom: 1.5rem;
}

.leyenda div {
    font-size    : 12px;
    padding      : 0.5rem 0rem 0.5rem 0rem;
    font-weight  : bold;
    background   : var(--emtusa-blue);
    border-radius: 6px 6px 0px 0px;
    color        : white;
    text-shadow  : 0px 0px 6px rgb(69, 69, 69);
}

.leyenda ul {
    padding        : 1rem 1rem;
    margin         : 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    list-style     : none;
    font-size      : var(--tamanopeq);
}

.leyenda li {
    font-size: var(--tamanomuypeq);
    padding  : 0rem 0.5rem;
}

.leyenda i {
    padding: 0rem 0.5rem;
    color  : black;
}

#pendiente,
#aceptada,
#denegada {
    font-weight: bolder;
}

#pendiente {
    color: var(--pendienteC);
}

.computo--confirmado {
    color: green;
}

#aceptada {
    color: var(--aceptada);
}

#denegada {
    color: var(--denegada);
}

.fa-trash-alt {
    cursor: pointer;
}

input[type="checkbox"] {
    border-radius: 6px;
}

.solicitudes {
    /* height         : 0;
    opacity        : 0; */
    overflow       : hidden;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : white;
    border-radius  : 6px;
    box-shadow     : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}

#cuerpoTabla {
    font-family: var(--font-family-monospace);
    background : white;
}

.table-style {
    border-collapse: collapse;
}

.thead-style {
    background: var(--emtusa-blue);
    color     : white;
}

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

.th-style {
    padding   : 0.25rem 0.5rem;
    font-size : var(--tamanopeq);
    text-align: center;
}

#texto-mensaje {
    color: var(--denegada);
}

.aviso-popup {
    display         : none;
    position        : fixed;
    z-index         : 1;
    left            : 0;
    top             : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content/Box */
.modal-content {
    display         : flex;
    justify-content : center;
    flex-direction  : column;
    background-color: #fefefe;
    margin          : 200px auto;
    padding         : 20px;
    border          : 1px solid #888;
    width           : 400px;
    border-radius   : 13px;
}

.modal-content div {
    display       : inline-block;
    padding-bottom: 0;
    text-align    : center;
    padding-top   : 1rem;
}

.modal-content>div>button {
    border-radius: 6px;
    border       : 0;
    box-shadow   : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}

.continuar {
    color     : rgb(255, 60, 60) !important;
    background: rgb(255, 0, 0, 11%) !important;
    width     : 30%;
}

.cancelar {
    color     : rgb(115, 255, 115) !important;
    background: rgb(0, 0, 0, 70%) !important;
    width     : 50%;
}

.continuar,
.cancelar {
    font-weight: 900;
}

.continuar:hover {
    background:  rgba(224, 145, 145, 0.767) !important;
}


.cancelar:hover {
    color     : rgb(0, 0, 0, 70%)  !important;
    background: rgb(115, 255, 115) !important;
}

.modal-content p {
    text-align: center;
    margin    : 0 auto;
}

/* RESPONSIVE */
@media screen and (max-width: 768px) {
    .solicitudes {
        width: 95%;
    }

    #pc {
        display   : none;
        visibility: hidden;
    }

    thead {
        font-size: 13px;
    }

    td {
        padding: 0.25rem 0.5rem;
    }

    tbody {
        font-size: var(--tamanopeq);
    }

    input[type="checkbox"] {
        transform: scale(0.8);
    }
}

/* ---------------------------------------------------------------------- */

/* Computo */

/* ---------------------------------------------------------------------- */


.main-computo {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
}

.title-h3 {
    background-color: var(--emtusa-blue);
    border-radius   : 6px;
    color           : white;
    padding         : 0.25rem 1rem;
}

.filtrar-fecha,
.filtrar-fecha-head {
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : all ease 0.5s;
}

.filtrar-fecha {
    flex-direction: column;
}

.filtrar-fecha-head {
    cursor: pointer;
}

.filtrar-fecha-head>h3>i {
    padding: 0rem .5rem;
}

.contenido-computo {
    flex-direction: column;
    margin        : 1rem 0 0 0;
}

.contenido-computo input {
    margin: 0rem 0rem 1rem 0rem;
    cursor: pointer;
}

.computo {
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : white;
    border-radius  : 6px;
    box-shadow     : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}

.mensaje {
    margin     : 0.5rem;
    font-style : italic;
    font-size  : 0.8rem;
    font-weight: bolder;
}

.drp-buttons>button {
    width: initial;
}

.input-computo {
    display        : flex;
    align-items    : center;
    justify-content: center;
    width          : 60px;
    height         : 30px;
    margin         : 0rem 1rem;
}

.input-computo:read-only {
    background-color: #fff;
}

.filtrar-fecha>#leyenda {
    margin    : 1rem 0 0 0;
    transition: all ease 0.5s;
}

td {
    font-size: var(--tamanopeq);
}

#input-fecha-computo {
    width: auto;
}

/* Iconos tablas */
.far,
.fas {
    margin: 0rem 0.25rem;
}

.computo table tbody tr :nth-last-child(2)::after {
    content: " min";
}

.computo-content {
    margin     : 1rem 0 0 0;
    font-weight: bold;
}

#calendario {
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : 0;
    transition     : all ease 0.5s;
    flex-direction : row-reverse;
}

@media screen and (max-width: 768px) {
    #calendario {
        flex-direction: column-reverse;
    }

    .contenido-computo {
        transform: scale(0.9);
    }

    .th-style,
    td {
        font-size: 11px;
    }
}

.hidden-fecha {
    opacity : 0;
    overflow: hidden;
    height  : 0;
}

/* #calendario.hidden {
    height  : 0 !important;
    width   : 0 !important;
    overflow: hidden;
    padding : 0 !important;
} */

#calendario-LR .daterangepicker,
#calendario .daterangepicker {
    position : initial;
    transform: scale(0.9);
}

/* #calendario-LR .drp-buttons, */
#calendario .drp-buttons {
    display        : flex;
    align-items    : center;
    justify-content: right;
}

#calendario-LR .daterangepicker::before,
#calendario-LR .daterangepicker::after,
#calendario .daterangepicker::before,
#calendario .daterangepicker::after {
    position           : absolute;
    display            : inline-block;
    border-bottom-color: rgba(0, 0, 0, 0);
    content            : '';
}

/* ---------------------------------------------------------------------- */

/* Cambiar Clave */

/* ---------------------------------------------------------------------- */

#cambiar-clave div {
    width : initial;
    height: initial;
    margin: 0.5rem 0;
}

#cambiar-clave div p {
    margin     : 1rem 0;
    text-align : center;
    font-weight: bold;
}

#cambiar-clave div div {
    background   : white;
    padding      : 1rem 1rem;
    border-radius: 6px;
    box-shadow   : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}

#cambiar-clave div div label {
    font-weight: bold;
}

/* #password, */
#telefono {
    margin         : 0 0 1rem 0;
    text-align-last: center;
}

#cambiar-clave button {
    margin: 1rem 0;
}

main[id="cambiar-clave"]>form {
    width : initial;
    height: initial;
    margin: 0;
}

input[id="codigo"] {
    text-align-last: center;
    text-align     : center;
}

/* ---------------------------------------------------------------------- */

/* Ajustes */

/* ---------------------------------------------------------------------- */

.main-ajustes {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
}

.ajustes label {
    font-weight: bold;
}

.ajustes input {
    margin: 0 0 1rem 0;
}

.mensaje-ajustes {
    width      : 80%;
    text-align : center;
    font-weight: bold;
    margin     : 1rem;
    transition : 0.5s all ease-in;
    padding    : 0.5rem;
}

.mensaje-ajustes-title {
    text-decoration: underline;
}

.mensaje-ajustes>input[id="codigo"] {
    margin: 1rem;
    width : 150px;
}

.boton-ajustes {
    margin: 0rem 0.5rem;
    width : 75px;
}

@media screen and (max-width: 768px) {
    .ajustes {
        width: 50%;
    }
}

/* ---------------------------------------------------------------------- */

/* Footer */

/* ---------------------------------------------------------------------- */

footer {
    overflow   : unset;
    clear      : both;
    width      : 100%;
    margin-top : auto;
    padding-top: 2rem;
    z-index    : 3;
}

footer>div>p {
    margin : 0;
    padding: 0;
}

#divFooter {
    position        : relative;
    color           : white;
    background-color: var(--emtusa-blue);
    font-size       : var(--tamanomuypeq);
    text-align      : center;
    font-weight     : 400;
    padding         : 0.75rem 1.25rem;
    margin-top      : auto;
    margin-bottom   : auto;
    border-bottom   : 0 solid rgba(0, 0, 0, 0.125);
    height          : 50px;
    padding-top     : 8px;
}

.footerAdmin {
    clear     : both;
    left      : 4rem;
    margin    : 1rem 1rem;
    margin-top: auto;
    /*overflow: unset;*/
    position  : fixed;
    left      : 0;
    bottom    : 0;
    text-align: center;
    width     : 100%;
    z-index   : -3;
}

#divFooterAdmin {
    position        : absolute;
    color           : black;
    background-color: var(--emtusa-blue);
    font-size       : var(--tamanomuypeq);
    text-align      : center;
    font-weight     : 400;
    padding         : 0.75rem 1.25rem;
    margin-top      : auto;
    margin-bottom   : 1rem;
    border-bottom   : 0 solid rgba(0, 0, 0, 0.125);
    height          : 50px;
    padding-top     : 8px;
    bottom          : 0;
    left            : 45%;
}

/* ---------------------------------------------------------------------- */

/* Junio */
.manana {
    color: var(--manana);
}

.tarde {
    color: #ffc107;
}

.festivo {
    color: red;
}

.computo--pendiente,
.pendiente {
    color: var(--pendiente);
}

.dia-pendiente-validar {
    background-color: var(--pendiente);
}

.dia-pendiente-validar-manana {
    background: linear-gradient(110deg, #ff7684 60%, var(--manana) 60%);
}

.dia-pendiente-validar-tarde {
    background: linear-gradient(110deg, #ff7684 60%, var(--tarde) 60%);
}

.dia-desconocido {
    background-color: var(--desconodido);
}

.diaLibre {
    background-color: #28a745;
}

.diaPedido,
.dia-manana {
    background-color: var(--manana);
}

.diaConSolicitudes,
.dia-tarde {
    background-color: var(--tarde);
}

.diaOcupado {
    background-color: #dc3545;
}


.botonMenu {
    width: 100%;
}

.boton-send {
    color           : white;
    border          : 0;
    margin-bottom   : 20px;
    background-color: var(--emtusa-blue) !important;
}

.boton-send:hover {
    color: rgb(50, 50, 50);
}

@media screen and (max-width: 576px) {
    h1 {
        font-size: 1.5rem !important;
    }

    footer {
        /* position: fixed; */
        bottom: 0;
    }

    .boton-send {
        width: 50vw !important;
    }

    strong {
        width     : 75%;
        text-align: center;
    }
}

#etiquetas {
    display        : flex;
    align-items    : center;
    justify-content: space-around;
}

div[id="contentCalendario2"]>label {
    padding-right: 1.5rem;
}

div[id="div-select-horas"] {
    display        : flex;
    align-items    : center;
    justify-content: center;
}

/* POPUP */
.aviso_popup {
    display         : none;
    position        : fixed;
    z-index         : 1;
    left            : 0;
    top             : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.contenido-popup {
    background-color: #fefefe;
    border          : 1px solid #888;
    border-radius   : 14px;
    margin          : 40vh auto;
    padding         : 20px;
    width           : 500px;
}

.contenido-popup div {
    align-items    : center;
    display        : flex;
    justify-content: center;
    padding-top    : 1rem;
}

.contenido-popup p {
    margin    : 0 auto;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .contenido-popup {
        width: 90vw;
    }
}

button[class="cerrar"] {
    background-color: var(--emtusa-blue);
    border          : 0;
    border-radius   : 6px;
    box-shadow      : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
    color           : white;
    margin          : 0rem 1rem;
    padding         : 0.25rem 0.5rem;
}

button[class="cerrar"]:hover {
    color: black;
}

.close {
    color      : #aaa;
    float      : right;
    font-size  : 28px;
    font-weight: bold;
    margin     : 0 auto;
}

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

/* PRUEBAS */

.main-pruebas {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
}

input[type="file"] {
    display: none;
}

.custom-file-upload {
    border       : 1px solid rgb(0 0 0 / 40%);
    border-radius: 6px;
    cursor       : pointer;
    padding      : 0.25rem;
}


#progress-div {
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-direction : column;
    width          : 200px;
    margin         : 1rem;
}

#progress-div .progress-bar {
    position        : relative;
    display         : table;
    left            : 0;
    height          : 20px;
    border-radius   : 3px;
    background-color: #f39ac7;
    width           : 0;
    text-align      : center;
    box-shadow      : inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

.progressBar {
    width : 130px;
    height: 50px;
}

.ldBar.label-center {
    color: white;
}

/* EMTUSA */
input[id="input-dni"] {
    width: 300px;
}

.resultado,
.enviar {
    padding: 1rem;
}

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

button[id="boton-nueva-consulta"] {
    background: rgb(0, 163, 246, 50%);
}

button[id="boton-consultar"] {
    background: #00a3f6;
    margin    : 0rem 0rem 0.5rem 0rem;
}

/* ---------------------------------------------------------------------- */

/* Reseteo Contraseña */

/* ---------------------------------------------------------------------- */

#reseteo-clave div {
    width : initial;
    height: initial;
    margin: 1rem;
}

#reseteo-clave div p {
    margin     : 1rem 0;
    text-align : center;
    font-weight: bold;
}

#reseteo-clave div div {
    background   : white;
    padding      : 1rem 1rem;
    border-radius: 6px;
    box-shadow   : 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}

#reseteo-clave div div label {
    font-weight: bold;
}

#reseteo-clave button {
    margin: 1rem 0;
}

#mensaje-reseteo-contrasena {
    margin    : 1rem 1.5rem !important;
    text-align: center;
}

#nif {
    text-align     : center;
    text-align-last: center;
    margin         : 0rem 1rem;
}

#mensaje-solicitado {
    transition: 0.5s all ease;
}

#cambiar-clave>div>ul {
    font-weight    : bolder;
    list-style-type: disc;
    margin         : 0 0 1rem 0;
}

#div-mensaje {
    transition: 0.5s all ease;
}