@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');

body {
    /** font-family: 'Comfortaa', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; **/
        font-family: Verdana, sans-serif;
    /* width: 100vw; */
    min-height: 100vh;
    height:auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 0px !important;

    overflow-x: hidden;
background: linear-gradient(rgba(150, 150, 177, 0.527), rgba(241, 241, 241, 0.148)), url(/img/landing/fondo_landing.jpg);    background-size: cover !important;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    /*  background-color: #F0F0F0; */
}

.home i{
    color: rgb(124, 118, 130);
    transition: all 0.3s ease-in-out;
}



.fa-power-off{
    transition:all 0.3s ease-in-out;
}
.fa-power-off:hover{
    box-shadow: 0 8px 32px 0 rgba(186, 188, 242, 0.668) !important;
    color: rgba(255, 255, 255, 0.837) !important;

}

.cajaLaboral{
    padding:6px 12px;
    border-radius:10px;
    transition: all 0.2s ease-in-out;
}

.cajaLaboral:hover{
    background-color:#bcbcbc4e;
}

.cajaLaboral:hover i{
    color:#040730ac;
}

/* NUEVOS CAMBIOS */

.hheecc {
    font-size: 1rem;
    /* color: #ecb41b; */
    color:white;
}

.idiomasColor {
    padding: 1vh;
    border-radius: 25px;
}

.idiomasCenter {
    margin-top: 3vh;
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding-right: 4vh;
}

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

.versionado {
    display: flex;
    align-items: end;
    font-size: 0.8rem;
    font-weight: 100;
    margin-left: 10px;
    color: white;
    cursor: pointer;
}

/* NUEVOS CAMBIO */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: flex-start !important;
}

td {
    transition: 0.7s;
}

.p-1 {
    padding: 1vh;
}

.p-2 {
    padding: 2vh;
}

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

a {
    color: inherit;
    text-decoration: none;
}

.text-bold {
    font-weight: bold;
}

.datos {

    display: flex;
    flex-direction: row;
    width: 95vw;
    min-height: 10vh;
    border-radius: 20px;
}

.modal-title {
    font-weight: bold;
    font-size: 16px !important;
    color: #142464;
}

#files {
    font-size: 12.8px;
}

option {
    font-size: 12.8px;
}

.logo {
    border: 0;
    width: 400px;
    margin-bottom: 3vh;
    margin-top: 3vh;
    margin: 1vh;
}

.cambioIdiomas {
    font-size: 0.7rem;
}

section {
    display: flex;
    justify-content: center;
}

.laborare,
.logoInnicio {
    border: 0;
}

.perfil {
    width: 90px !important;
    border-radius: 50%;
}

.cajaDivisor {
    display: flex;
    justify-content: flex-end;
}

.divisor {
    width: 80%;
    border: 0;
    border-top: 1px solid rgba(240, 240, 240, 0.61);
}

.cajaImagen {
    width: 20%;
    margin-right:15px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.cajaDatos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 70%;
}

.modal-title {
    color: #142464;
    font-weight: bold;
    font-size: 16px !important;
}

.modal-body {

    font-size: 12.8px !important;
}

select {
    padding: 1.5vh !important;
}

.iconoAyudar {
    font-size: 1.2rem;
    color: rgb(23, 23, 23);
    transition: 0.5s;
}

.iconoAyudar:hover {
    transform: scale(1.1);
    color: #ecb41b;
}

button {

    background-color: inherit;
}

.modificarDatos {

    display: flex;
    justify-content: center;
    flex-direction: column;
}

.icono {

    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}

.fa-angle-right {

    color: #e4e3e3;
}

.fa-caret-up,
.fa-temperature-three-quarters,
.fa-caret-down,
.fa-question,
.fa-address-book,
.fa-envelope {

    padding-left: 0.5vh;
    padding-right: 0.5vh;
    font-size: 1.5rem;
    border-radius: 5px;
    background-color: #142464;
    border: 2px solid #142464;
    color: white;
}

.contactoInicioPC {
    background-color: transparent;
    border: 1px solid transparent;
/*     color: rgb(39, 38, 38); */
    font-size: 1rem;
    transition: 0.5s;
}

.fa-eraser {

    background-color: #142464 !important;
    font-size: 1.2rem;
    padding-left: 0.1vh;
    padding-right: 0.1vh;
    border: 2px solid #142464;
    border-radius: 5px;
    color: white;
}

.fa-child {

    background-color: #142464 !important;
    font-size: 1.5rem;
    padding-left: 0.6vh;
    padding-right: 0.6vh;
    border: 2px solid #142464;
    border-radius: 5px;
    color: white;
}

input,
label,
select {
    font-size: 12.8px !important;
}

.fa-clock-rotate-left {

    font-size: 1.1rem;
    padding: 0.5vh;
    border-radius: 5px;
    color: #142464;
}

.fa-person-falling-burst {

    font-size: 0.9rem;
    padding: 0.5vh;
    background-color: #142464;
    border-radius: 5px;
    border: 2px solid #142464;
    color: white;
}

.fa-user-pen {
    background-color: #142464 !important;
    font-size: 1rem;
    padding-left: 0.3vh;
    padding-right: 0.3vh;
    padding-top: 0.5vh;
    padding-bottom: 0.5vh;
    border: 2px solid #142464;
    border-radius: 5px;
    color: white;
}

.salir {
    font-size: 1.8rem;
}

textarea,
select,
input {
    border: 2px solid rgb(218, 216, 216);
    /* border-radius: 20px !important; */
}

.cajaLaboral {
    display: flex;
    flex-direction: row;
    height: 6vh;

}

.fa-power-off {
    color: rgb(170, 169, 169) !important;
}

/* .cajaInfo {
    width: 85vw;
    padding-top: 1vh;
    padding-bottom: 1vh;

    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.792);
    border-radius: 20px;
} */

.cajaImagenPrincipal {
    width: 85vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.textoRecurso {
    width: 85vw;
}

@media (min-width: 1100px) {
    .cajaImagen {
        width: 10%;
    }
}

.txt {
    font-size: 12.8px;
}

.inicio {
    padding-bottom: 5vh;
}

@media (max-width: 600px) {
    .datos {

        padding-left: 4vh;
    }

    .nombre {
        margin-left: 5vh;
    }

    .modificarDatosEscritorio {
        margin-left: 3vh !important;
    }
}

@media (min-width: 800px) {

    .cajaInfo {
        width: 40vw;
        min-width: 400px;
        padding:30px;
    }

    .textoRecurso {
        width: 50vw;
    }

    .datos {
        width: 50vw;
    }

    .modificarDatosEscritorio {
        margin-left: 4vh !important;
    }

    .cajaLaboral {
        display: flex;
        justify-content: space-between;
    }

    .cajaDatos {
        width: 80%;
    }

    .divisor {
        width: 90%;
    }

}

.modalWindowHistorial {
    min-width: 50vw;
    border: 2px solid #142464;
    border-radius: 20px;

}



.modalWindowHistorialHeader {
    padding: 1vh;
    border-bottom: 1px solid #ecb41b;
}

.modalWindowHistorialParrafo {
    height: 60%;
}

.botonModal {
    float: right;
    margin-top: 2vh;
    background-color: white;
    border: 2px solid #142464;
    color: #142464;
    font-weight: bold;
    border-radius: 5%;
    padding: 1vh;
    padding-left: 1.5vh;
    padding-right: 1.5vh;
    transition: 0.5s;
}

.page-link {
    font-size: 12.8px;

}

textarea {
    font-size: 12.8px;
    padding: 10px;
}

.botonModal:hover {
    background-color: #142464;

    color: white;
}

.botonAnotar {
    float: left;
    background-color: white;
    border: 2px solid #ecb41b;
    color: #ecb41b;
    font-weight: bold;
    border-radius: 5%;
    padding: 1.5vh;
    transition: 0.5s;
}

.botonAnotar:hover {
    background-color: #ecb41b;

    color: white;
}

/* botones */
#enviar {
    margin-top: 2vh;
    background-color: white;
    border: 2px solid #142464;
    font-weight: bold;
    color: #142464;
    padding: 1.5vh;

}

span {
    font-size: 1rem;
}

#enviar2 {

    margin-top: 2vh;
    background-color: white;
    border: 2px solid #ecb41b;
    font-weight: bold;
    color: #ecb41b;
    border-radius: 25px;
    padding: 1.5vh;
}


.textoLegal {
    width: 100%;
    display: block;
    justify-content: center;
    color: white;
/*     margin-bottom: 5vh; */
    font-size: 0.8rem;
    margin-top: 2vh;

}


/* NUEVOS */

.card-body{
    text-align: left;
}

.menuFooter {
    padding: 1.2vh!important;
    display:flex;
    justify-content:center;
    width:100%;
    background-color: rgba(97, 97, 97, 0.735);
    padding:4px 8px;
    align-items: center;
    margin-bottom: 0px;
    max-height: 42px;
    /* Sticky footer menu */
    /* position: fixed;
    bottom: 0px; */
}

.botonLista {
    border-radius: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.178);
}

.botonLista:hover {
    border-bottom: 1px solid #ecb41b;
}

#lista{
    padding-left: 20vh;
    padding-right: 20vh;
}


/* NUEVOS */



.contenidoLegal {
    margin-left: 1vh;
    margin-right: 1vh;
}

footer {
    margin-top: 4vh;
}

input.text,
input[type="text"],
input[type="button"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,

.input-checkbox {


    color: #142464;
    background-color: white;
    border-radius: 0;
    border: 1px solid rgb(212, 210, 210) !important;
}

form {

    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

input,
select {
    display: flex;
    justify-content: center;
    padding: 1vh;
}

#enviar {
    margin-top: 2vh;
    background-color: white;
    border: 2px solid #142464;
    font-weight: bold;
    color: #142464;
    padding: 1.5vh;

}

#enviar2 {
    margin-top: 2vh;
    background-color: white;
    border: 2px solid #ecb41b;
    font-weight: bold;
    color: #ecb41b;
    padding: 1.5vh;
}

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

input.placeholder {
    text-align: center;
}

h4 {
    margin-left: 3vh;
}

/*
input[type=radio]:checked+label {
    font-style: normal;
    color: white;
    border: 2px solid #142464;
    background-color: #142464;
}
*/

.centerButtons {
    margin-top: 3vh;
    display: flex;
    justify-content: space-around;
}

.botonEnfermedad {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 2px solid #d4d4d4;
    padding: 2vh;
    color: #142464;
    transition: 0.5s;

}

.loader {
    display: none;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.loading {
    border: 2px solid #ccc;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border-top-color: #1ecd97;
    border-left-color: #1ecd97;
    animation: spin 1s infinite ease-in;
}

.fa-angle-left::before {
    margin-right: 1vh !important;
}

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

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

.fecha {
    background-color: #142464;
    padding: 2vh;
    color: white;
    font-size: 0.8rem !important;
    border-bottom: 2px solid #142464;
}

.accion {
    font-size: 0.6rem !important;
    background-color: #d1d1d1;
    border-bottom: 2px solid #142464;
    padding: 2vh;
}

td {
    font-size: 0.7rem !important;
    padding: 2vh;
}

th {
    font-size: 0.7rem !important;

}

.tablaHistorial {
    border-radius: 50%;
}

/**/
.texto {
    font-size: 12.8px;
    display: flex;
    justify-content: center;
}

.textoCookies {
    font-size: 12.8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.divider {
    padding-bottom: 3vh;
}

.titulo {


    font-weight: bold;
    color: #142464;

}

.titulo2 {
    font-size: 12.8px;
    font-weight: bold;
    color: #ecb41b;
}

.tituloCookie {
    margin-bottom: 2vh;
    display: flex;
    justify-content: center;
    text-align: center;
}

.copyright {
    font-size: 12.8px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2vh;
    margin-bottom: 3vh;
    font-weight: bold;
    border-top: 2px solid #ecb41b;
    border-bottom: 2px solid #ecb41b;

}

.tituloAviso {
    margin-bottom: 2vh;
    text-align: center;
}

.cajaInterna {
    background-color: white;
    border-radius: 25px;
    padding: 2vh;
}

.cajafooter {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1vh;
    flex-direction: column;
}

.bold {
    font-weight: bold;
}


#email_personal,
#cc {
    border: 1px solid #d6d6d6;
    padding: 1vh;
}

.explicacion {
    margin-bottom: 2vh;
    border-radius: 25px;
    background-color: white;
    padding: 2vh;
    font-size: 0.8rem;

}

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

.tituloInput {
    color: #4d4d4d;
}

.cellSize{
    height: 200px;
}

#email_personal,
#cc {
    border: 1px solid #d6d6d6;
    padding: 1vh;
}

i {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

::placeholder {
    color: rgb(202, 202, 202);
    opacity: 1;
}

input[type="date"]::before {
    content: attr(placeholder);
    position: absolute;
    color: #999999;
}

input[type="date"] {
    color: #ffffff;
}

input[type="date"]:focus,
input[type="date"]:valid {
    color: #666666;
}

input[type="date"]:focus::before,
input[type="date"]:valid::before {
    content: "";
}

input[type="text"] {
    border: 1px solid;

}

input[type=number] {
    border: 1px solid;
}

/* When user focus */

input[type="text"]:focus,
input[type=number]:focus,
select:focus {
    border: 1px solid;
}

select {
    border: 1px solid;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: center;
}



.onl {
    background-color: #F28500;
}

.sat {
    background-color: magenta;
}

.zon {
    background-color: #ec2d01;
}


.selectorTipo option[value="ONL"] {
    background-color: #ec2d01;
}

.selectorTipo option[value="SAT"] {
    background-color: magenta;
}

.selectorTipo option[value="ZON"] {
    background-color: #ec2d01;
}

.selectorEstado option[value="RECIBIDA"] {
    background-color: white;
    color: white;
}

.selectorEstado option[value="AGENDADA"] {
    background-color: #8b88f8;
}

.selectorEstado option[value="PROCESO"] {
    background-color: rgb(255, 167, 36);
}

.selectorEstado option[value="FINALIZADA"] {
    background-color: #546b5e;
}

.selectorEstado option[value="A LA ESPERA"] {
    background-color: #b0b1b6;
}

.selectorEstado {
    background-color: #9b9e9c;

}

.atras {
    color: rgba(255,255,255,1)!important;
    text-shadow: 3px 3px 4px black;
}
/*
table.dataTable thead>tr>th.sorting {
    padding: 0px !important;
}

table.dataTable thead>tr>th.sorting_asc {
    padding: 0px !important;
}

thead>tr>th.sorting_desc {
    padding: 0px !important;

}*/

select {
    transition: 0.5s;
}


/*Ajustes Liquid Glass*/
.cajaInfo {
    width: 40vw;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 42px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 42px rgba(0, 0, 0, 0.1);
}

.cajaInfo span {
    color:rgba(255,255,255, 0.8) !important;
}

.cajaInfo i{
    color:rgba(255,255,255, 0.8) !important;
}

.divisor{
    margin: 10px 0 !important;
    color:whitesmoke !important;
}

.icono i{
    color: whitesmoke !important;
}


td span{
    font-size:14px !important;
}


.volver {
    height: 40px !important;
    width: 40px !important;
    margin:0px !important;
    border-radius: 50%;
    background-color: #bfb1c498;
    color: white;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.2s ease-in-out;
}

.volver:hover{
        background-color: #bfb1c4d0;
}