* {
    font-family: 'Poppins', sans-serif;
    color: #707070;
}

body{
    margin: 0;
    padding: 0;
}

.barlow {
    font-family: 'Barlow', sans-serif;
}

.menu-principal {
    height: 80px;
    background-color: #FFFFFF;
}

h6{
    font-weight: normal;
}

.div-logo{
    /*background-color: rgb(206,206,206);*/
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    height: 80%;
    margin-left: -35px;
}

.buscador::placeholder, .buscador:-ms-input-placeholder{
    color: white;
    opacity: 1;
}

.input-negro {
    background-color: rgb(206,206,206);
    color: white;
    border-radius: 10px;
    border: none;
    padding: 8px 10px;
}

.input-negro:focus{
    border: none;
    box-shadow: none;
}

::placeholder {
    color: white;
    opacity: 1;
}

.buscador {
    background-color: rgb(206,206,206);
    color: white;
    border-radius: 10px;
    border: none;
    padding: 3px 10px;
}

.buscador:focus-visible{
    outline: none;
    border: none;
}

.migas {
    padding-top: 30px;
}

.migas > ul {
    display: flex;
    justify-content: space-between;
}

.migas > ul > li{
    list-style: none;
}

.migas > ul > li > a{
    text-decoration: none;
}

.miga{
    text-align: center;
    min-width: 100px;
    display: block;
}

.bg-gris {
    background-color: rgb(242,242,242);
}

.bg-perceptivo {
    background-color: rgb(171, 208, 247);
}

.bg-perceptivo-secundario {
    background-color: rgba(171, 208, 247, 0.1);
}

.bg-acustico {
    background-color: rgb(238,207,136);
}

.bg-acustico-secundario {
    background-color: rgba(238,207,136, 0.1);
}

.bg-folin {
    background-color: rgb(161, 219, 178);
}

.bg-folin-secundario {
    background-color: rgba(161, 219, 178, 0.1);
}

.bg-automatico {
    background-color: rgb(227, 171, 247);
}

.bg-automatico-secundario {
    background-color: rgba(227, 171, 247, 0.1);
}

.bg-FactoresFinales{
    background-color: rgb(187, 182, 174);
}

.bg-FactoresFinales-secundario {
    background-color: rgba(187, 182, 174, 0.1);
}

.div-body {
    width: 100%;
    min-height: 100vh;
    display: flex;
}

.inner-div-body {
    padding-top: 80px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.div-cuadro-blanco {
    background-color: white;
    border-radius: 10px;
}

.div-LogOn {
    padding: 40px 50px;
}

.titulo-LogOn {
    color: rgb(112,112,112);
    text-align: center;
    border-bottom: solid 1px rgb(112,112,112);
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-weight: 600;
}

.titulo-informe{
    max-width: 400px;
}

.btn-verde {
    background-color: rgb(143,233,152);
    color: white;
    border-radius: 7px;
    border: none;
    padding: 6px 30px;
    text-decoration: none;
}

.btn-verde:hover,.btn-verde:active, .btn-verde:focus{
    background-color: rgb(143,233,152);
    color: white;
    border: none;
    box-shadow: none !important;
}

.btn-azul {
    background-color: rgb(180,222,238);
    border-radius: 7px;
    border: none;
    padding: 6px 20px;
    color: rgb(70,70,70);
    font-weight: 300;
}

.btn-azul-2 {
    padding: 6px 25px;
    border: solid 1px rgb(66,130,226);
    background-color: transparent;
    border-radius: 7px;
    color: rgb(66,130,226);
    text-decoration: none;
    display: block;
    width: max-content;
}


.btn-rojo {
    background-color: #f45d4c;
    border-radius: 7px;
    border: none;
    padding: 6px 20px;
    color: white;
    text-decoration: none;
    line-height: normal;
}

.btn-rojo:hover{
    color: white;
    background-color: #d75142;
}

.btn-rojo-2 {
    padding: 6px 25px;
    border: solid 1px rgb(239,44,44);
    background-color: transparent;
    border-radius: 7px;
    color: rgb(239,44,44);
    text-decoration: none;
}

.btn-rojo-2:hover{
    color: rgb(239,44,44);
}

.btn-guardar {
    background-color: #a1dbb2;
    border-radius: 7px;
    border: none;
    padding: 6px 20px;
    color: white;
    text-decoration: none;
    line-height: normal;
}

.btn-guardar:hover{
    color: white;
    background-color: #89b997;
}

.btn-siguiente {
    background-color: rgb(171, 208, 247);
    border-radius: 7px;
    border: none;
    padding: 6px 20px;
    color: white;
    text-decoration: none;
    line-height: normal;
}

.btn-siguiente:hover{
    color: white;
    background-color: rgb(148, 181, 215);
}

.btn-gris {
    background-color: rgb(206,206,206);
    border-radius: 7px;
    border: none;
    padding: 6px 20px;
    color: white;
    text-decoration: none;
    line-height: normal;
}

.btn-gris > i, .btn-rojo > i, .btn-guardar > i, .btn-siguiente > i{
    color: white;
}

.btn-gris:hover{
    color: white;
}

.btn-gris-2 {
    padding: 3px 25px;
    border: solid 1px rgb(126,126,126);
    background-color: transparent;
    border-radius: 7px;
    color: rgb(126,126,126);
    text-decoration: none;
}

.btn-gris-2:hover{
    color: rgb(126,126,126);
}

.btn-izquierda{
    border-radius: 7px 0 0 7px;
}

.btn-centro {
    border-radius: 0;
}

.btn-derecha {
    border-radius: 0 7px 7px 0;
}

.fs-7{
    font-size: 0.8rem;
}

.p-btn-agregar-registro {
    padding: 6px 25px;
}

.field-validation-error {
    display: block;
}

.mb-60px{
    margin-bottom: 60px;
}

.icono-menu-lateral{
    font-size: 30px;
}

.div-icono-menu-lateral{
    text-align: center;
    display: block;
    color: black;
    text-decoration: none;
}

.div-icono-menu-lateral:hover{
    color: black;
    text-decoration: none;
}

.div-icono-menu-lateral > h5{
    font-size: 15px;
    font-weight: 600;
}

.div-header-bloque-perceptivo {
    background-color: rgb(171, 208, 247);
    padding: 16px 0;
    border-radius: 10px 10px 0 0;
}

.div-header-bloque-acustico {
    background-color: rgb(238,207,136);
    padding: 16px 0;
    border-radius: 10px 10px 0 0;
}

.div-header-bloque-folin {
    background-color: rgb(161, 219, 178);
    padding: 16px 0;
    border-radius: 10px 10px 0 0;
}

.div-header-bloque-automatico {
    background-color: rgb(227, 171, 247);
    padding: 16px 0;
    border-radius: 10px 10px 0 0;
}

.div-header-bloque-perceptivo > div > h2, .div-header-bloque-acustico > div > h2, .div-header-bloque-folin > div > h2, .div-header-bloque-automatico > div > h2, .div-header-bloque-FactoresFinales > div > h2 {
    color: white;
}

.div-header-bloque-FactoresFinales {
    background-color: rgb(187, 182, 174);
    padding: 16px 0;
    border-radius: 10px 10px 0 0;
}

.linea-perceptivo {
    border-bottom: solid 4px rgb(171, 208, 247);
}

.linea-acustico {
    border-bottom: solid 4px rgb(238,207,136);
}

.linea-folin {
    border-bottom: solid 4px rgb(161, 219, 178);
}

.linea-automatico {
    border-bottom: solid 4px rgb(227, 171, 247);
}

.linea-FactoresFinales {
    border-bottom: solid 4px rgb(187, 182, 174);
}

.div-titulo-bloque > i {
    font-size: 30px;
    margin-right: 12px;
}

.border-bottom-2{
    border-bottom: solid 1px black;
}

.text-gris{
    color: rgb(126,126,126);
}

.bold {
    font-weight: 600;
}

.p-titulo-progreso {
    padding: 10px 20px;
    border-bottom: solid 1px rgb(206,206,206);
}

.contenido-progreso {
    padding: 5px 20px;
    border-bottom: solid 1px rgb(206,206,206);
    border-radius: 0 0 7px 7px;
}

.div-color-progreso-informe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 8px 8px 8px 0;
}


.z-index-2 {
    z-index: 2;
}

.div-progreso-informe-activo {
    border: solid 1px rgb(206,206,206);
    border-radius: 9px;
    border-bottom: 0;
    overflow: hidden;
}

.w-160px{
    width: 160px;
}

.w-290px{
    width: 290px;
}

.w-200px{
    width: 200px;
}

.mw-330px {
    max-width: 330px;
}

.no-wrap {
    white-space: nowrap;
}

.hover-i-azul:hover>i {
    color: #0a58ca !important;
}

.div-descripcion {
    border: solid 1px rgb(126,126,126);
    border-radius: 8px;
    padding: 20px 30px;
    width: fit-content;
    height: fit-content;
    width: 440px;
    background-color: white;
}

.div-descripcion > h6:not(:last-child){
    margin-bottom: 0.5rem;
}

.overflow-y-auto{
    overflow-y: auto;
}

.h-32px{
    height: 32px;
}

.hover-bg-gris:hover {
    background-color: rgb(210,210,210);
}

.text-gris{
    color: #707070;
}

.text-gris-claro{
    color: #AAA;
}

.text-azul {
    color: #0d6efd;
}

.text-rojo {
    color: #f45d4c;
}

.etiqueta {
    color: black;
    border-radius: 5px;
    padding: 5px 10px;
    background-color: rgb(206,206,206);
    text-decoration: none;
    font-weight: 300;
}

.etiqueta:hover{
    color: white;
}

.w-100px{
    width: 100px;
}

.w-200px{
    width: 200px;
}

.h-35px {
    height: 35px;
}

.hover-pointer:hover {
    cursor: pointer;
}

.input-si-no{
    display: none;
}

.div-si-no {
    display: flex;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid #707070;
    width: 290px;
}

.div-si, .div-no {
    padding: 3px 20px;
    width: 100%;
    text-align: center;
}

.div-si {
    border-radius: 10px 0 0 10px;
}

.div-no {
    border-radius: 0 10px 10px 0;
}

.div-si.active, .div-no.active {
    background-color: rgb(206,206,206);
}


.div-si:not(.active):hover , .div-no:not(.active):hover {
    cursor: pointer;
}

.input-redondeado {
    border-radius: 5px;
    border: solid 1px rgba(0, 0, 0, 0.2);
}

.tabla-gris > div{
    padding: 5px;
}

.tabla-gris > div:nth-child(2n+1) {
    background-color: rgb(242,242,242);
    border-radius: 5px;
}

/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(200,200,200);
}

    /* Works on Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 8px;
    }

    *::-webkit-scrollbar-track {
        background: rgb(200,200,200);
        border-radius: 20px;
    }

    *::-webkit-scrollbar-thumb {
        background-color: rgb(150,150,150);
        border-radius: 20px;
    }


/*Quitar botones al input number*/

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}


/*

    RANGES

*/

.range-wrap {
    display: flex;
    align-items: center;
}

/*.range {
    width: 100%;
}

.bubble {
    background: red;
    color: white;
    padding: 4px 12px;
    position: absolute;
    border-radius: 4px;
    left: 50%;
    top: 25px;
    transform: translateX(-50%);
}

    .bubble::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 2px;
        background: red;
        top: -1px;
        left: 50%;
    }*/