@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;700&family=Lato:wght@100;200;300;400&family=Open+Sans:wght@300;400;500;600&family=Roboto:wght@100;300;400;500&display=swap');

body{
    /* background-color: #fbfbfd; */
    color: #051937;
    /* background-image: linear-gradient(to right top, #051937, #043546, #4c7a7c, #7a9989, #7c836d); */
    background-image: linear-gradient(60deg, #051937, #043546, #4C7A7C, #7A9989, #7C836D);
    height: 100vh;
    background-size: cover;
    /* font-family: 'Open Sans', sans-serif; */
    /* font-family: 'Dosis', sans-serif; */
    font-family: 'Lato', sans-serif;
}

header{
    backdrop-filter: blur(6px) saturate(90%) !important;
    border-bottom: 1px rgba(252, 252, 252, 0.2) solid;
    height: 42px;
}

::placeholder{
    opacity: .6 !important;
}

.linea-deg{
    background-image: linear-gradient(to right top, #051937, #043546, #4c7a7c, #7a9989, #7c836d);
    height: 4px;
    opacity: .4;
    border-radius: 10px;
}

.nom-prd{
    font-family: 'Dosis', sans-serif;
   /*  font-family: 'Lato', sans-serif; */
    /* font-family: 'Open Sans', sans-serif; */
    /* font-family: 'Poppins', sans-serif; */
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Rubik', sans-serif; */
    font-weight: 300;
}

.text-light-s{
    font-weight: 300;
    font-size: 30px;
}

.nom-prd b{
    font-weight: 400;
}

.v_hum{
    font-size: 12px;
}

.modal-header{
    justify-content: center;
}

.modal-title{
    position: absolute !important;
    text-align: center;
    justify-content: center;
}

.custom-font{
    font-family: 'Dosis', sans-serif;
    /* font-family: 'Lato', sans-serif; */
    /* font-family: 'Open Sans', sans-serif; */
    /* font-family: 'Poppins', sans-serif; */
    /* font-family: 'Roboto', sans-serif; */
    /* font-family: 'Rubik', sans-serif; */
    font-weight: 300;
}

.custom-font-b{
    font-family: 'Dosis', sans-serif;
    font-weight: 500;
}

.custom-font span{
    font-size: 14px;
}

.datos_login{
    box-shadow: 0 11px 34px 0 rgba(0,0,0,.2);
    background-color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 590px;
    text-align: center;
    border-radius: 34px !important;
    width: 640px;
    padding-top: 20px;
}

.datos_login_log{
    box-shadow: 0 11px 34px 0 rgba(0,0,0,.2);
    background-color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /*height: 590px;*/
    border-radius: 34px !important;
    transition: all .5s;
    width: 640px;
    text-align: center;
    padding-top: 20px;
    overflow: hidden
    /* width: 800px;
    padding-top: 20px; */
}

.datos_login_log.vista_compl{
    width: 800px;
    padding-top: 20px;
}

.img_logo_open_enc{
    height: 180px;
    /* height: 80px; */
    transition: all .5s;
}

.icono_tip{
    font-size: 30px;
}

.custom-font-dt{
    font-size: 16px;
    font-weight: 300;
}

#secc_compa_list{
    height: 400px;
    overflow-y: auto;
}

.compania{
    display: flex;
    border: solid 1px #d8d8d8;
    padding: 10px;
    border-radius: 15px;
    margin-bottom: 15px;
    height: 65px;
    display: flex;
    align-items: center; /* Alinea verticalmente */
    justify-content: start;
    transition: all .5s;
}

.compania:hover{
    background-color: #ededed;
    cursor: pointer;
}

.compania.active{
    background-color: #60B3E5;
    color: white;
}


.compania.active .icono {
    background-color: #fefefe;
    color: rgb(0, 0, 0);
}

.compania .icono{
    background-color: #e8e8e8;
    padding: 9px 12px;
    border-radius: 50%;
    margin-right: 10px;
}

.compania .nom_comp{
    line-height: 20px;
}


.inputGroup {
    background-color: rgb(252, 252, 252);
    display: block;
    margin: 10px 0;
    position: relative;
    border: solid 1px #e2e2e2;
  }
  .inputGroup label {
    padding: 12px 15px;
    width: 100%;
    display: block;
    text-align: left;
    color: #3C454C;
    cursor: pointer;
    position: relative;
    z-index: 0;
    transition: color 300ms ease-in;
    overflow: hidden;
    font-size: 12px;
  }
  .inputGroup label:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: "";
    background-color: #6fbadf;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: -1;
  }
  .inputGroup label:after {
    width: 30px;
    height: 30px;
    content: "";
    border: 2px solid #D1D7DC;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: 0px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 300ms ease-in;
  }
  .inputGroup input:checked ~ label {
    color: #fff;
  }
  .inputGroup input:checked ~ label:before {
    transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
  }
  .inputGroup input:checked ~ label:after {
    background-color: #0E80C4;
    border-color: #ffffff;
  }
  .inputGroup input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
  }

  .btn-circle{
    border-radius: 20px;
  }
































.datos_login_cambio_pass{
    box-shadow: 0 11px 34px 0 rgba(0,0,0,.2);
    background-color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 460px;
    text-align: center;
    border-radius: 34px !important;
    width: 640px;
    padding-top: 0px;
}

.h-100vh{
    height: 100vh;
}

.sec{
    height: 33%;
}

.enl-pass{
    text-decoration: none;
    font-size: 14px;
}

.enl-pass:hover{
    border-bottom: solid 1px #5e9fff;
}

.preg_c{
    font-size: 14px;
    color: #5c5c5c;
}

.enl-ct{
    text-decoration: none;
    font-size: 14px;

}

.enl-ct:hover{
    border-bottom: solid 1px #5e9fff;
}

footer{
    font-size: 12px;
    /* padding: 18px 25px; */
    height: 45px;
    backdrop-filter: blur(6px) saturate(90%) !important;
    color: white;
    border-top: 1px rgba(252, 252, 252, 0.2) solid;
    line-height: 45px;
}

.legal-footer-content>.inner-row .with-separator {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

.text-hum{
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(to right top, #051937, #043546, #4c7a7c, #7a9989, #7c836d);
}

.navbar{
    padding-top: 0px;
}

.navbar-brand{
    color: white;
    font-weight: 300;
    font-family: 'Dosis', sans-serif;
}

.navbar-brand b{
    font-weight: 400;
}

.navbar-brand small{
    font-size: 13px;
}

/* .navbar-brand b{
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(10deg, #afafaf, #d7d8d9, #e6feff, #d8dad9, #e2e2e1);
    background-image: linear-gradient(#fff, #fff);
} */

.hum_font{
    font-size: 38px;
}

.hum_font b{
    margin-bottom: 0px;
}

.hum_font span{
    font-size: 18px;
}

/*.sec_dtac{*/
/*    height: 80px;*/
/*}*/

#correo_elc{
    box-shadow: none;
}

#btn-acceso {
    height: 40px;
    border-radius: 10px;
}

#btn-acceso i{
    font-size: 24px;
    position: relative;
    float: inline-end;
    top: -37px;
    padding: 1px 12px 0px 12px;
    cursor: pointer;
}

#btn-acceso i.disabled{
    pointer-events: none;
    opacity: .5;
}

#btn-acceso .spinner-border{
    position: relative;
    float: inline-end;
    top: -35px;
    padding: 1px 12px 0px 12px;
    right: 10px;
}

#inppass{
    height: 40px;
    position: relative;
    top: -40px;
    border-radius: 0px 0px 10px 10px;
    padding-right: 55px;
    box-shadow: none;
}

#btn-passww i{
    font-size: 24px;
    position: relative;
    float: inline-end;
    top: -78px;
    padding: 1px 12px 0px 12px;
    cursor: pointer;
}


#btn-passww i.disabled{
    pointer-events: none;
    opacity: .5;
}

div:where(.swal2-container).swal2-backdrop-show, div:where(.swal2-container).swal2-noanimation {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

.aviso_pr{
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.aviso_pr:hover{
    border-bottom: 1px solid white;
}

.modal {
    background-color: #00000026 !important;
    backdrop-filter: blur(3px) saturate(90%) !important;
}

.modal-content {
    backdrop-filter: blur(4px) saturate(22%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background-color: rgba(255, 255, 255, 0.90);
    border: none;
}

.modal-backdrop.show {
    opacity: .4;
    backdrop-filter: blur(5px);
}

.modal-body{
    font-size: 14px;
}

.modal-body h5{
    font-size: 18px;
}

#toolbar{
    display: none !important;
}

.validaciones{
    font-size: 12px;
    text-align: start;
    list-style: none;
}

.validaciones li i {
    font-size: 22px;
    margin: 0px !important;
    line-height: 20px;
    color: #c2c2c2;
    padding-right: 5px;
}








.linea_procesos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    max-width: 800px;
    margin: auto;
}

.step {
    text-align: center;
    position: relative;
    flex: 1;
}

.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -50%;
    width: 100%;
    height: 2px;
    background: lightgray;
    transform: translateY(-50%);
    z-index: -1;
    margin-top: -25px;
    transition: height 0.3s, background-color 0.3s; /* Animación de transición */
}

.completed::after,
.step.completed:not(:last-child)::after {
    /* background: #4caf50; */
    background-color: #47a747;
    margin-top: -25px;
}

.step.active + .step::after {
    background: lightgray;
}

.step.completed:not(:last-child)::after,
.step.active:not(:last-child)::after {
    height: 4px; /* Ajusta el grosor del borde para los pasos completados */
}

.step.sinafter::after{
    background-color: transparent;
    content: none;
}

.step .icon {
    background: lightgray;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -0 auto 5px;
    font-size: 22px;
    transition: background-color 0.3s; /* Animación de transición */
    cursor: pointer;
}

.step.completed .icon,
.step.active .icon {
    /* background: #31ac37; */
    background-color: #47a747;
    color: white;
}

.step p {
    margin: 0;
    color: #333;
    font-size: 14px;
}

.step span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: gray;
}

.step.active p {
    color: #000000;
    font-weight: bold;
}

.step.active .icon {
    background-color: #60B3E5;
}

.check_selc{
    background-color: #ffffff;
    position: absolute;
    color: white;
    border-radius: 30px;
    font-size: 20px;
    height: 22px;
    width: 22px;
    line-height: 12px;
    right: 10px;
    top: 5px;
}


.inf_companias{
    height: 300px;
    overflow-y: auto;
    padding: 15px 10px 0px 10px;
    justify-content: center;
    /* border-bottom: solid 1px #e9e9e9; */
    /* background-color: #f7f7f7; */
    border-top: solid 1px #ebebeb;
    margin-top: 10px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);  */
}

 /* Scrollbar WebKit */
 .inf_companias::-webkit-scrollbar {
    width: 12px; /* Ancho de la scrollbar */
}

.inf_companias::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color del track */
    border-radius: 10px; /* Redondeo del track */
}

.inf_companias::-webkit-scrollbar-thumb {
    background: #888; /* Color de la thumb */
    border-radius: 10px; /* Redondeo de la thumb */
}

.inf_companias::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color de la thumb al pasar el cursor */
}

/* Scrollbar Firefox */
.inf_companias {
    scrollbar-width: thin; /* Ancho de la scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Color de la thumb y del track */
    /* border-radius: 20px; */
}

.inf_companias::-webkit-scrollbar-corner {
    background: transparent; /* Color de la esquina de la scrollbar */
    border-radius: 15px;
}

.opciones_compa{
    border: solid 1px #ebebeb;
    padding: 4px;
    border-radius: 15px;
    margin-bottom: 10px;
    transition: all .4s;
    position: relative;
    height: 120px;
}

.opciones_compa:hover{
    /* background-color: #f5f5f5; */
    background-color: #ffffff;
    cursor: pointer;
    -webkit-box-shadow: 1px 3px 11px -4px rgba(199,199,199,1);
    -moz-box-shadow: 1px 3px 11px -4px rgba(199,199,199,1);
    box-shadow: 1px 3px 11px -4px rgba(199,199,199,1);
    transform: translateY(-8px);
}

.opciones_compa:hover .check_selc{
    background-color: #ffffff;
    color: #ffffff;
}

.opciones_compa.active {
    background-color: #60B3E5;
    color: white;
}

.opciones_compa.active p, .opciones_compa.active span {
    color: white;
}

.opciones_compa.active .check_selc{
    background-color: #1A8ACD;
    color: white;
}

.opciones_compa p{
    font-size: 14px;
    margin-bottom: 0px;
    color: #000000;
}

.opciones_compa span{
    font-size: 12px;
    color: #696969;
}

.tperfil{
    border: solid 1px #dadada;
    padding: 4px;
    border-radius: 15px;
    margin-bottom: 10px;
    transition: all .5s;
    position: relative;
    transition: all .4s;
    height: 120px;
    align-items: center;
    display: grid;
}

.tperfil:hover{
    background-color: #ffffff;
    cursor: pointer;
    -webkit-box-shadow: 1px 3px 11px -4px rgba(199,199,199,1);
    -moz-box-shadow: 1px 3px 11px -4px rgba(199,199,199,1);
    box-shadow: 1px 3px 11px -4px rgba(199,199,199,1);
    transform: translateY(-8px);
}

.tperfil:hover .check_selc{
    background-color: #ffffff;
    color: #ffffff;
}

.tperfil.active{
    background-color: #60B3E5;
    color: white;
}

.tperfil.active .check_selc{
    background-color: #1A8ACD;
    color: white;
}
.tperfil p{
    margin-bottom: 0px;
}

.icn_perf{
    width: 60px; /* Ajusta el tamaño según tus necesidades */
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #dfdfdf;
    margin: 0 auto;
    -webkit-box-shadow: 2px 2px 10px -3px rgb(196, 196, 196);
    -moz-box-shadow: 2px 2px 10px -3px rgba(196, 196, 196);
    box-shadow: 2px 2px 10px -3px rgba(196, 196, 196);
    background-color: white;
    font-size: 35px;
    color: #0E80C4;
}


.tnomina{
    border: solid 1px #dadada;
    padding: 4px;
    border-radius: 15px;
    margin-bottom: 10px;
    transition: all .4s;
    position: relative;
}

.tnomina:hover{
    background-color: #ffffff;
    cursor: pointer;
    -webkit-box-shadow: 1px 3px 11px -4px rgba(199,199,199,1);
    -moz-box-shadow: 1px 3px 11px -4px rgba(199,199,199,1);
    box-shadow: 1px 3px 11px -4px rgba(199,199,199,1);
    transform: translateY(-8px);
}

.tnomina:hover .check_selc{
    background-color: #ffffff;
    color: #ffffff;
}

.tnomina.active{
    background-color: #60B3E5;
    color: white;
}

.tnomina.active .check_selc{
    background-color: #1A8ACD;
    color: white;
}

.tnomina p{
    margin-bottom: 0px;
}

.tnomina span{
    font-size: 12px;
    color: #696969;
}



.circular-div {
    width: 60px; /* Ajusta el tamaño según tus necesidades */
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #dfdfdf;
    margin: 0 auto;
    -webkit-box-shadow: 2px 2px 10px -3px rgb(196, 196, 196);
    -moz-box-shadow: 2px 2px 10px -3px rgba(196, 196, 196);
    box-shadow: 2px 2px 10px -3px rgba(196, 196, 196);
    background-color: white;
}

.circular-img {
    width: 100%;
    height: auto;
}



.info_s{
    text-transform: lowercase;
}

.info_s::first-letter {
    text-transform: uppercase; /* Convierte la primera letra a mayúscula */
}

.buscador_com{
    border-radius: 20px;
    height: 30px;
}

.search-container {
    position: relative;
}

.search-container input {
    width: 100%;
    padding: 10px 20px 10px 40px; /* Espacio para el ícono */
    box-sizing: border-box;
}

.search-container .bi-search {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

.cerrar_sesion{
    width: 35px;
    height: 35px;
    top: 35px;
    right: 50px;
    border-radius: 5px;
    padding: 0px;
    margin: 0px;
    text-align: center;
    font-size: 20px;
    padding-left: 4px;
}

.h-seccion{
    /* background-color: #f7f7f7; */
    height: 330px;
}

@media screen and (max-height: 720px) {
    .datos_login_log{
        height: 540px;
    }
    .inf_companias{
        height: 280px !important;
    }
}



@media (max-width: 768px) {
    .datos_login_log{
        width: 100%;
    }
    .datos_login_log.vista_compl{
        width: 100%;
    }
    .cerrar_sesion{
        right: 20px;
    }

    .step:first-of-type {
        display: none;
    }

}

@media (max-width: 576px) {
    .step .icon {
        width: 25px;
        height: 25px;
        font-size: 14px;
    }

    .step p {
        font-size: 12px;
    }

    .step span {
        font-size: 10px;
        color: gray;
    }
}
.deg_3{
    background-image: linear-gradient(60deg, #39859e, #85b0be, #bdcace);
}
.deg_3 .gmp:before {
    color: #ffffff !important;
}
.btn-mn_ay{
    background-image: linear-gradient(120deg, #47594c, #919191, #56625d);
    border-radius: 15px;
    border: solid 1px #fcfcfc;
    color: white;
    opacity: .8;
    transition: all .2s;
}

/*
.btn-mn_ay{
    background-image: linear-gradient(120deg, #cecece, #dedede, #ccd8d3);
    border-radius: 15px;
    border: solid 1px #fcfcfc;
    color: rgb(37, 37, 37);
    opacity: .8;
    transition: all .2s;
}

 */

.btn-mn_ay:hover{
    background-image: linear-gradient(120deg, #47594c, #919191, #56625d);
    border: solid 1px #dcdcdc;
    opacity: 1;
    color: white;
    transform: translateY(-2px);
}
.btn-mn_ay i{
    margin-left: 10px;
}