@charset "utf-8";
/* CSS Document Plantilla*/

/*------------------------------ PALETA DE COLORES Y TAMAÑO ------------------------------*/

:root {
    /* Colores: */
    /*Para fondos y textos*/
    --color-blanco-FFFFFF: #FFFFFF;
    --color-negro-000000: #000000;
    /*Para fondos, titulos, subtitulos, boton activo, input en uso y alerta "Aviso de proceso"*/
    --color-azul-3366CC: #3366CC;
    /*Para titulos, fondos y boton hover*/
    --color-azul-004884: #004884;
    /*Para estado valido formularios*/
    --color-verde-069169: #069169;
    /*Para alerta "Caso de éxito"*/
    --color-verde-008565: #008565;
    /*Para icono "Disponible"*/
    --color-verde-92CE0B: #92CE0B;
    /*Para icono "Exclamación"*/
    --color-amarillo-FFA805: #FFA805;
    /*Para icono "Pagado"*/
    --color-azul-007BB2: #007BB2;
    /*Para estado incorrecto formularios y listas*/
    --color-rojo-A80521: #A80521;
    /*Para alerta "Caso error"*/
    --color-rojo-D11F3E: #D11F3E;
    /*Para textos corridos y caption*/
    --color-gris-4B4B4B: #4B4B4B;
    /*Color de fondo Login, sombras input, DIV y hover de lista*/
    --color-azul-E6EFFD: #E6EFFD;
    /*Estado boton activo*/
    --color-azul-boton-activado: #3366CC;
    /*Estado boton desactivado, texto migas de pan, trazo input, input desactivado (texto, trazo y boton)*/
    --color-gris-BABABA: #BABABA;
    /*Input inhabilitado relleno*/
    --color-gris-F2F2F2: #F2F2F2;
    /*Para fondos en zona de Contenido*/
    --color-verde-F6F8F9: #F6F8F9;
    /*Tamaño de fuente*/
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-15: 15px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-32: 32px;
    --font-size-40: 40px;
    --fharacter-spacing-0: 0px;
    --fecoration-underline: underline;
    /*Botones*/
    --border-radio: 20px;
    --padding-boton: 5px 25px 5px 25px;
}
/*------------------------------ RESETEAR ESTILOS ------------------------------*/

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.cero-space {
    margin: 0px;
    padding: 0px;
}
/*------------------------------ JERARQUIA TIPOGRÁFICA ------------------------------*/

/*Rutas de las fuentes*/

@font-face {
    font-family: "Montserrat Semi-bold";
    src: url("../fonts/Montserrat/static/Montserrat-SemiBold.ttf");
}
@font-face {
    font-family: "Montserrat Medium";
    src: url("../fonts/Montserrat/static/Montserrat-Medium.ttf");
}
@font-face {
    font-family: "Work Sans Semi-bold";
    src: url("../fonts/Work_Sans/static/WorkSans-SemiBold.ttf");
}
@font-face {
    font-family: "Montserrat Bold";
    src: url("../fonts/Montserrat/static/Montserrat-Bold.ttf");
}
@font-face {
    font-family: "Work Sans Bold";
    src: url("../fonts/Work_Sans/static/WorkSans-Bold.ttf");
}
@font-face {
    font-family: "Work Sans Medium";
    src: url("../fonts/Work_Sans/static/WorkSans-Medium.ttf");
}
@font-face {
    font-family: "Work Sans Regular";
    src: url("../fonts/Work_Sans/static/WorkSans-Regular.ttf");
}
@font-face {
    font-family: "Work Sans Light";
    src: url("../fonts/Work_Sans/static/WorkSans-Light.ttf");
}
/*Clases de títulos, subtitulos, parrafos, encabezados y entre otros*/

/*Para etiquetas h1*/

.headline-xxl {
    font-family: "Montserrat Semi-bold";
    font-size: var(--font-size-40);
}
/*Para etiquetas h2*/

.headline-xl {
    font-family: "Montserrat Semi-bold";
    font-size: var(--font-size-32);
}
/*Para etiquetas h3*/

.headline-l {
    font-family: "Montserrat Semi-bold";
    font-size: var(--font-size-24);
}
/*Para etiquetas h4*/

.headline-m {
    font-family: "Montserrat Semi-bold";
    font-size: var(--font-size-20);
}
/*Para etiquetas h5*/

.headline-xs {
    font-family: "Montserrat Bold"!important;
    font-size: var(--font-size-16)!important;
}
.headline2-xs {
    font-family: "Montserrat Medium";
    font-size: var(--font-size-16);
}
.sub-title {
    font-family: "Work Sans Bold";
    font-size: var(--font-size-16);
}
.sub-title-x {
    font-family: "Work Sans Bold";
    font-size: var(--font-size-16);
}
.sub-title-s {
    font-family: "Work Sans Bold";
    font-size: var(--font-size-14);
}
.table-head {
    font-family: "Work Sans Medium";
    font-size: var(--font-size-16);
}
.table-head-s {
    font-family: "Montserrat Semi-bold";
    font-size: var(--font-size-16);
}
.subtitle {
    font-family: "Montserrat Semi-bold";
    font-size: var(--font-size-18);
}
.p-description {
    font-family: "Montserrat Medium";
    font-size: var(--font-size-20);
}
.body-1 {
    font-family: "Work Sans Regular";
    font-size: var(--font-size-16);
    word-wrap: break-word;
}
.body-2 {
    font-family: "Work Sans Regular";
    font-size: var(--font-size-14);
    word-wrap: break-word;
}
.body-3 {
    font-family: "Work Sans Regular";
    font-size: var(--font-size-15);
}
.body-4 {
    font-family: "Work Sans Light";
    font-size: var(--font-size-15);
}
.button-text {
    font-family: "Work Sans Medium";
    font-size: var(--font-size-16);
}
.field-text {
    font-family: "Work Sans Medium";
    font-size: var(--font-size-16);
}
.caption {
    font-family: "Work Sans Medium";
    font-size: var(--font-size-14);
}
.caption2 {
    font-family: "Work Sans Semi-bold";
    font-size: var(--font-size-14);
}
/*--------------------------ESTILOS GENERALES-------------------------*/

.text-subrayado {
    text-decoration: underline;
}
.sin-decoration {
    text-decoration: none;
}
.zona-blanca {
    height: 250px;
    color: #fff;
}
.linea-botton {
    border-bottom: 1px solid #E8EFFC;
}
.linea-top {
    border-top: 1px solid #E8EFFC;
}
.group-solicitante {
    display: flex;
    justify-content: space-between;
}
#delete-solicitante {
    cursor: pointer;
}
.br-16 {
    border-radius: 16px;
}
.cuadro-br {
    border-radius: 7px;
    border: 1px solid #E7E6F4;
}
/*----------------------------ESTILOS ZONA COVID --------------------*/

.cont-covid {
    text-align: center;
    background-color: #ED2864;
    color: #FFFFFF;
    padding-top: 7px;
    padding-bottom: 5px;
}
.cont-covid a {
    color: #fff;
    font-family: "Montserrat Bold";
    font-size: 16px;
}
.cont-covid a:hover {
    color: #fff;
    text-decoration: none;
}
/*----------------------------ESTILOS BLOQUE DE ENCUESTA --------------------*/

.content-encuesta {
    background-color: #F6F8F9;
    box-shadow: 0px 4px 0px #BABABA33;
    border-radius: 3px;
}
.content-reaction {
    justify-content: center;
    padding-top: 30px;
}
.content-reaction .btn-reacciones {
    font-family: "Work Sans Medium";
    font-size: 16px;
    padding: 5px 10px;
    background-color: #3366CC;
    border-radius: 5px;
    margin: 0px 5px;
    color: #fff;
    display: flex;
}
.content-reaction .btn-reacciones input {
    color: #fff;
    cursor: pointer;
}
.content-reaction .btn-reacciones:hover {
    background-color: #004884;
    color: #fff;
}
@media (max-width: 576px) {
    .content-reaction {
        text-align: center;
    }
    .content-reaction .group-icon-text {
        margin: auto;
    }
}
.icon-reaction-disabled {
    background-color: #BABABA!important;
    cursor: default!important;
    pointer-events: none!important;
}
.icon-reaction-active {
    background-color: #004884!important;
}
/*------------------------------ COLORES ------------------------------*/

/*Colores´para fondos*/

.azul-bg-E6EFFD {
    background-color: var(--color-azul-E6EFFD);
}
.azul-bg-3366CC {
    background-color: var(--color-azul-3366CC);
}
.azul-bg-004884 {
    background-color: var(--color-azul-004884);
}
.verde-bg-008E65 {
    background-color: var(--color-verde-008E65);
}
.verde-bg-069169 {
    background-color: var(--color-verde-069169);
}
.verde-bg-F6F8F9 {
    background-color: var(--color-verde-F6F8F9);
}
.rojo-bg-A80521 {
    background-color: var(--color-rojo-A80521);
}
.rojo-bg-D11F3E {
    background-color: var(--color-rojo-D11F3E);
}
.blanco-bg-FFFFFF {
    background-color: var(--color-blanco-FFFFFF);
}
.negro-bg-000000 {
    background-color: var(--color-negro-000000);
}
.gris-bg-4B4B4B {
    background-color: var(--color-gris-4B4B4B);
}
.gris-bg-BABABA {
    background-color: var(--color-gris-BABABA);
}
.gris-bg-F2F2F2 {
    background-color: var(--color-gris-F2F2F2);
}
/*Colores para textos*/

.azul-txt-E6EFFD {
    color: var(--color-azul-E6EFFD);
}
.azul-txt-3366CC {
    color: var(--color-azul-3366CC);
}
.azul-txt-004884 {
    color: var(--color-azul-004884)!important;
}
.azul-txt-007BB2 {
    color: var(--color-azul-007BB2);
}
.verde-txt-008565 {
    color: var(--color-verde-008565);
}
.verde-txt-069169 {
    color: var(--color-verde-069169);
}
.verde-txt-92CE0B {
    color: var(--color-verde-92CE0B);
}
.verde-txt-86B41F {
    color: #86B41F;
}
.amarillo-txt-FFA805 {
    color: var(--color-amarillo-FFA805);
}
.rojo-txt-A80521 {
    color: var(--color-rojo-A80521);
}
.rojo-txt-D11F3E {
    color: var(--color-rojo-D11F3E);
}
.rojo-txt-F85446 {
    color: #F85446;
}
.blanco-txt-FFFFFF {
    color: var(--color-blanco-FFFFFF);
}
.negro-txt-000000 {
    color: var(--color-negro-000000);
}
.gris-txt-4B4B4B {
    color: var(--color-gris-4B4B4B);
}
.gris-txt-BABABA {
    color: var(--color-gris-BABABA);
}
.gris-txt-F2F2F2 {
    color: var(--color-gris-F2F2F2);
}
.gris-txt-8AACCD {
    color: #8AACCD;
}
/*------------------------------ ESTILOS HEADER GOV.CO ------------------------------*/

.cabecera {
    background-color: var(--color-azul-3366CC);
    padding-left: 85px;
    padding-top: 12px;
    padding-bottom: 12px;
}
/*------------------------------------- ESTILOS LOGIN -------------------------------*/

.content-login {
    background-color: #E6EFFD;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 94vh;
}
.content-login .login {
    width: 445px;
    height: 543px;
    background-color: #fff;
    border-radius: 10px;
    margin: 20px;
}
.content-login .login .margen-login {
    margin: 25px 48px 48px 48px;
}
.content-login .img-min {
    margin: 48px 0px 0px 48px;
}
.content-login .img-super {
    margin: 45px 0px 0px 0px;
}
.img-logo {
    margin: 48px 48px 0px 43px;
}
@media (max-width: 410px) {
    .content-login .img-super {
        display: none;
    }
}
/*------------------------------ ESTILOS CAMPOS DE TEXTO ------------------------------*/

/*Estilos de campos de formulario activo, en uso y desactivado*/

/*Clase general para todos los elementos de un formulario*/

.campo-form {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    background-clip: padding-box;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.campo-form::placeholder {
    color: #BABABA;
    opacity: 1;
}
/*Sombra cuando el campo está activo, funciona para input y TextArea*/

.campo-form:focus {
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0px 4px 0px 0.2px #E6EFFD;
}
/*Propiedades de Input text*/

.campo-texto {
    color: #4B4B4B;
    border: 1px solid #BABABA;
    background-color: #FFF;
}
.campo-desactivado {
    color: #BABABA;
    border: 1px solid #BABABA;
    background-color: #F2F2F2;
}
.campo-desactivado-value {
    color: #4B4B4B;
    border: 1px solid #BABABA;
    background-color: #F2F2F2;
}
/*Estilos para validaciones de campos*/

.campo-valido {
    color: #069169;
    border: 1px solid #069169;
    background-color: #FFF;
}
.campo-valido::placeholder {
    color: #069169;
}
.campo-invalido {
    color: #A80521;
    border: 1px solid #A80521;
    background-color: #FFF;
}
.campo-invalido::placeholder {
    color: #A80521;
}
.message {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    font-size: 80%;
}
.message-normal {
    color: #4B4B4B;
}
.message-valido {
    color: #069169;
}
.message-invalido {
    color: #A80521;
}
/*Estilo para campos de TextArea Activo*/

.campo-textarea {
    color: #4B4B4B;
    border: 1px solid #BABABA;
    background-color: #FFF;
}
/*FORMA 1. Estilo mostrar mensaje sobre icono de información en campos de Texto*/

/* Invisible texto */

.message-info {
    display: none;
    transition: all .5s;
    color: #3366cc;
    cursor: pointer;
    font-family: "Work Sans Regular";
    font-size: var(--font-size-12);
}
/* Visible texto */

.content-message:hover>.message-info {
    display: block;
    transition: all .5s;
}
/*FORMA 2. Estilo mostrar mensaje sobre icono de información en campos de Texto en bloque*/

/* Invisible texto */

.message-info-bloque {
    display: none;
    transition: all .5s;
    color: #4B4B4B;
    border: 1px solid #4065C5;
    background-color: #F2F2F2;
    border-radius: 5px;
    padding: 5px;
    font-family: "Work Sans Regular";
    font-size: var(--font-size-12);
}
/* Visible texto alineado a la derecha*/

.content-message-der:hover>.message-info-bloque {
    display: block;
    transition: all .5s;
}
.content-message-der img {
    cursor: pointer;
}
@media (max-width: 450px) {
    .content-message-der span {
        margin-left: 20px;
        margin-top: 30px;
    }
}
@media (min-width: 450px) {
    .content-message-der span {
        margin-left: 180px;
        margin-top: 15px;
    }
}
/*Estilo de mensaje de información con borde "Recuerda que..."*/

.message-informativo {
    border: 1px solid #FFA805;
    border-radius: 5px;
}
.message-informativo i {
    color: #FFA805;
    margin: auto;
    margin-left: 10px;
    margin-right: 0px;
}
.message-informativo p {
    font-family: "Work Sans Regular";
    font-size: var(--font-size-15);
    color: #4B4B4B;
    margin: 10px;
}
/*Estados de mensajes en tablas con estilo de fondo*/

.estado-aprobado {
    background-color: #06916933;
    color: #069169;
    padding: 5px;
}
.estado-generar-acta {
    background-color: #BCEB1D5D;
    color: #0A7254;
    padding: 5px;
    line-height: 2;
}
.estado-por-validar {
    background-color: #F89F4655;
    color: #984C00D3;
    padding: 5px;
    line-height: 2;
}
.estado-rechazado {
    background-color: #F8544655;
    color: #911606;
    padding: 5px;
}
/*Estados de mensajes en tablas sin fondo*/

.estado-dos {
    font-family: "Montserrat Semi-bold";
    font-size: var(--font-size-14);
}
.estado-dos-aprobado {
    color: #004884;
}
.estado-dos-rechazado {
    color: #F85446;
}
/*------------------------------ ESTILOS INPUT SELECT ------------------------------*/

select {
    color: #4B4B4B;
    border: 1px solid #BABABA;
    background-color: #FFF;
    background-image: url('../iconos/flecha_abajo.png');
    background-repeat: no-repeat, repeat;
    /* Posicionar icono*/
    background-position: right .7em top 50%, 0 0;
    /* tamaño del icono */
    background-size: .65em auto, 100%;
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    appearance: none;
}
select::-ms-expan {
    display: none;
}
option {
    background: #fff !important;
    color: #4b4b4b !important;
}
/*------------------------------------ ESTILOS PASSWORD -----------------------------*/

.password-icon {
    float: right;
    position: relative;
    margin: -20px 10px 0 0;
    cursor: pointer;
}
::-ms-reveal {
    display: none;
}
/*------------------------------ ESTILOS INPUT DATE ------------------------------*/

input[type="date"] {
    background-image: url('../iconos/calendar.png');
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: 97%
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}
/*---------------------------- ESTILOS CHECK BOX ---------------------------------*/

.cont-check, .cont-radio {
    display: flex;
    align-items: center;
}
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
}
input[type="checkbox"]:before {
    content: "\f096";
    font-family: "FontAwesome";
    font-size: 22px;
    color: #3366cc;
    cursor: pointer;
}
input[type="checkbox"]:checked:before {
    font-family: "FontAwesome";
    content: "\f14a";
    font-size: 22px;
    color: #004884;
}
input[type="checkbox"]:disabled:before {
    content: "\f096";
    font-family: "FontAwesome";
    font-size: 22px;
    color: #BABABA;
}
/*---------------------------- ESTILOS RADIO BOX ---------------------------------*/

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
}
input[type="radio"]:before {
    content: "\f10c";
    font-family: "FontAwesome";
    font-size: 22px;
    color: #3366cc;
    cursor: pointer;
}
input[type="radio"]:checked:before {
    font-family: "FontAwesome";
    content: "\f192";
    font-size: 22px;
}
.label-radio-true {
    color: #004884;
    font-family: "Work Sans Bold";
    font-size: var(--font-size-16);
}
.label-radio-false {
    color: #4b4b4b;
    font-family: "Work Sans Regular";
    font-size: var(--font-size-16);
}
input[type="radio"]:disabled:before {
    content: "\f10c";
    font-family: "FontAwesome";
    font-size: 22px;
    color: #BABABA;
}
/*------------------------------ ESTILOS DE BOTONES ------------------------------*/

/*Botones en estado Activo*/

/*1. Estilos de boton Activo*/

.boton-activo-bg {
    font-family: "Work Sans Medium";
    font-size: 16px;
    color: #fff;
    background-color: #3366CC;
    padding: var(--padding-boton);
    border-radius: var(--border-radio);
}
.boton-activo-bg:hover {
    color: #fff;
    background-color: #004884;
    cursor: pointer;
}
/*2. Estilos de boton Activo delineado*/

.boton-activo {
    font-family: "Work Sans Medium";
    font-size: 16px;
    color: #3366CC;
    border: 2px solid #3366CC;
    padding: var(--padding-boton);
    border-radius: var(--border-radio);
    background-color: #fff;
}
.boton-activo:hover {
    color: #fff;
    background-color: #004884;
    cursor: pointer;
    border-color: #004884;
}
/*3. Estilos de boton activo tipo Texto*/

.boton-enlace-activo {
    font-family: "Work Sans Medium";
    font-size: 16px;
    color: #3366CC!important;
    text-decoration: underline;
}
.boton-enlace-activo:hover {
    color: #004884!important;
    cursor: pointer;
}
/*Botones en estado Desactivado*/

/*1. Estilos de boton Desactivado*/

.boton-desactivado-bg {
    font-family: "Work Sans Medium";
    font-size: 16px;
    color: #fff;
    background-color: #BABABA;
    padding: var(--padding-boton);
    border-radius: var(--border-radio);
    pointer-events: none;
    cursor: default;
}
/*2. Estilos de boton Desactivado delineado*/

.boton-desactivado {
    font-family: "Work Sans Medium";
    font-size: 16px;
    color: #BABABA;
    background-color: #fff;
    border: 1px solid #BABABA;
    padding: var(--padding-boton);
    border-radius: var(--border-radio);
    pointer-events: none;
    cursor: default;
}
/*3. Estilos de boton Desactivado tipo texto*/

.boton-enlace-desactivado {
    font-family: "Work Sans Medium";
    font-size: 16px;
    color: #BABABA;
    pointer-events: none;
    cursor: default;
}
/*4. Botones tipo menu*/

.boton-menu {
    font-family: "Work Sans Bold";
    font-size: 14px;
    color: #3366CC;
    background-color: #f2f2f2;
    padding: var(--padding-boton);
    cursor: pointer;
}
/*.boton-menu:hover {
    background-color: #b2b2b2;
}*/

@media (max-width: 359px) {
    .m-boton button {
        margin-top: 10px;
    }
}
/*Estilos de radio curvo*/

.radio-completo {
    border-radius: var(--border-radio);
}
.radio-5 {
    border-radius: 20px;
}
.semi-radio-arriba {
    border-radius: 16px 16px 0px 0px;
}
.semi-radio-abajo {
    border-radius: 0px 0px 16px 16px;
}
/*Estilos de boton verPassword*/

.ver-boton-pass {
    background-repeat: no-repeat, repeat;
    position: absolute;
    margin-left: 220px;
    margin-top: 30px;
}
/*---------------------------- BOTON BUSCAR --------------------------------*/

.btn-buscar {
    background: #fff;
    display: flex;
}
.btn-buscar input {
    padding: 6.2px 5px 6.2px 20px;
    border-radius: 5px;
    border: 1px solid #BABABA;
    background: transparent;
    background-image: url('../iconos/buscar.svg');
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    width: 75%;
    transition: all 1s;
    color: #4B4B4B;
}
.btn-buscar input:focus {
    outline: none;
    width: 100%;
    border: 1px solid #3366CC;
    box-shadow: 0px 4px 0px 0.2px #E6EFFD;
}
/*------------------------------ ESTILOS MIGAJAS DE PAN ------------------------------*/

.migajas {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0px;
    margin-bottom: 1rem;
    list-style: none;
    border-radius: 0.25rem;
    font-family: "Work Sans Regular";
    font-size: var(--font-size-14);
    color: #3366cc;
}
.migajas-item a {
    text-decoration: none;
    color: #3366cc;
}
.migajas-item a:hover {
    text-decoration: underline;
    font-size: var(--font-size-15);
}
.migajas-item+.migajas-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    color: #BABABA;
    content: url("../iconos/next-gray.png");
}
.migajas-item.active {
    font-family: "Work Sans Medium";
    font-size: var(--font-size-14);
    color: #3366cc;
}
/*------------------------------ ESTILOS ALERTAS / NOTIFICACIONES ------------------------------*/

/*Estilos generales de una alerta*/

.alerta {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    padding: 0.71rem !important;
    margin: 0 !important;
    border-radius: 3px !important;
}
.alerta i {
    padding-top: 12px !important;
    color: #fff
}
.alerta span {
    font-family: "Montserrat Semi-bold";
    font-size: var(--font-size-18);
    margin-left: 14px !important;
    color: #fff
}
/*Estilos Alerta "Caso de éxito"*/

.alerta-caso-exito {
    background-color: #008E65;
}
/*Estilos Alerta "Aviso de proceso"*/

.alerta-aviso-proceso {
    background-color: #3366CC;
}
/*Estilos Alerta "Caso error"*/

.alerta-caso-error {
    background-color: #D11F3E;
}
/*------------------------------ ESTILOS LINEA DE AVANCE ------------------------------*/

/*Estilos para ocultar cada sección de formulario de pasos*/

.tab {
    display: none;
}
.tab.show-tab {
    display: block!important;
}
/*Estilos generales de la barra de progreso*/

.linea-progress {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 3rem;
    overflow: hidden;
    font-size: 0.75rem;
    border-radius: 0.25rem;
}
.linea-progress-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: flex-start;
    transition: width 0.6s ease;
    padding: 5px 5px 5px 0px;
}
/*Estilos por defecto de la línea de progreso*/

.linea-progress-bar span {
    font-family: "Work Sans Regular";
    font-size: 14px;
}
.linea-progress-bar p {
    width: 22px;
    height: 22px;
    border: 1px solid #4b4b4b;
    text-align: center;
    background-color: #fff;
    font-family: "Work Sans Regular";
    font-size: 14px;
    border-radius: 50%;
    margin-right: 5px;
}
/*Estilos cuando el proceso ha iniciado*/

.proceso-ini span {
    padding-left: 5px;
    font-family: "Work Sans Bold"!important;
    font-size: var(--font-size-14);
    color: #3366cc!important;
}
.proceso-ini p {
    background-color: #3366cc!important;
    border: none!important;
    color: #fff;
}
/*Estilos cuando el proceso ha finalizado*/

.proceso-fin span {
    padding-left: 5px;
    font-family: "Work Sans Regular";
    font-size: var(--font-size-14);
    color: #BABABA;
}
.proceso-fin p {
    background-color: #BABABA!important;
    border: none;
    color: #fff;
}
/*------------------------------ ESTILOS ACCORDION DE CONTACTO ------------------------------*/

.myaccordion {
    border-radius: 5px;
    box-shadow: 0px 4px 0px #BABABA24;
    max-width: 287px;
}
.myaccordion .card, .myaccordion .card:last-child .card-header {
    border: none;
}
.myaccordion .card-header {
    border: 0px;
}
.myaccordion .btn {
    width: 100%;
    background-color: #F6F8F9;
    color: #3366cc;
    text-decoration: none;
    padding-top: 16px;
    page-break-after: 16px;
}
.contenido-body {
    border-radius: 0px 0px 5px 5px;
    padding: 10px 25px 25px 25px;
}
.contenido-body img {
    margin-right: 10px;
}
.myaccordion .btn-link:hover, .myaccordion .btn-link:focus {
    text-decoration: none;
    border: none;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    color: #004884;
}
/*------------------------------ ESTILOS ACCORDION DE CONTENIDO 2 ------------------------------*/

.accordion-cont .card, .accordion-cont .card:last-child .card-header {
    border: none;
}
.accordion-cont .card-header {
    border: 0px;
    background-color: #F6F8F9;
}
.accordion-cont .btn {
    width: 100%;
    color: #004884;
    text-decoration: none;
}
.accordion-cont .contenido {
    border-radius: 0px 0px 5px 5px;
    padding: 0px 30px 30px 30px;
    background-color: #F6F8F9;
}
.accordion-cont .btn-link:hover {
    text-decoration: underline;
    border: none;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    color: #3366cc;
}
.ocultar-input {
    display: none;
}
.mostrar-input {
    display: block;
}
/*------------------------------- ESTILOS ACCORDEON DE CONTENIDO 3 -------------------------------------*/

.accordion-cont3 .card, .accordion-cont .card:last-child .card-header {
    border: none;
}
.accordion-cont3 .card-header {
    border: 0px;
    border: 2px solid #E6EFFD;
    background-color: #fff;
}
.accordion-cont3 .btn {
    width: 100%;
    font-weight: bold;
    color: #3366cc;
    text-decoration: none;
}
.accordion-cont3 .contenido {
    border-radius: 0px 0px 5px 5px;
    padding: 0px 30px 30px 30px;
    background-color: #F6F8F9;
}
.accordion-cont3 .btn-link:hover, .accordion-cont3 .btn-link:focus {
    text-decoration: none;
    border: none;
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.bg-accordion-active {
    background-color: #004884!important;
    border: none!important;
}
.bg-accordion-active .btn {
    color: #fff!important;
}
/*------------------------------ ESTILOS OPCIONES TIPO CARD ------------------------------*/

.card-principal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.card-principal .card-contenido {
    margin-bottom: 20px;
}
@media (min-width: 376px) {
    .card-principal {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    .card-principal .card-contenido {
        margin: 10px;
        width: 233px;
        height: 213px;
    }
}
.card-contenido {
    border-radius: 10px;
    border: 2px solid #E6EFFD;
}
.card-boton {
    padding: 0.95rem 1.05rem;
    margin-bottom: 0;
    background-color: #fff;
    border-bottom: 3px solid #004884;
    border-radius: 10px 10px 0px 0px;
    text-align: center;
}
.card-boton:hover {
    background-color: #E6EFFD;
}
.card-contenido a:hover {
    text-decoration: none;
}
/*------------------------------ ESTILOS MENU OPCIONES (TIPO TAB) ------------------------------*/

.menu-link {
    display: block;
    padding: 0.95rem 1.05rem;
    color: #4b4b4b;
}
.menu-link:hover, .menu-link:focus {
    text-decoration: none;
    background-color: #E6EFFD;
    color: #004884;
}
.menu-link.disabled {
    color: #6c757d;
}
.nav-tabs .menu-item {
    margin-bottom: -1px;
}
.nav-tabs .menu-link {
    border: 2px solid #E6EFFD;
    border-bottom: 3px solid #004884;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.nav-tabs .menu-link.disabled {
    color: #6c757d;
    background-color: transparent;
    border-color: transparent;
}
.nav-tabs .menu-link.active, .nav-tabs .menu-item.show .menu-link {
    color: #004884;
    background-color: #E6EFFD;
    font-family: "Montserrat Bold";
    font-size: var(--font-size-16)
}
@media (max-width: 457px) {
    .menu-link {
        margin-bottom: 5px;
    }
    .nav-tabs .menu-item {
        margin-bottom: -5px;
        width: 100%;
    }
    .nav-tabs .menu-link {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }
}
/*------------------------------ ESTILOS TABLAS ------------------------------*/

.table .head-style th {
    color: #004884;
    background-color: #E6EFFD;
    border-color: #E6EFFD;
    font-family: "Work Sans Medium";
    font-size: var(--font-size-16);
}
.contenido-table th, .contenido-table td {
    color: #4b4b4b;
    border-bottom: 1px solid #E6EFFD;
    font-family: "Work Sans Regular";
    font-size: var(--font-size-14);
}
.borde-tb td {
    border-color: #F6F8F9;
}
.borde-tb-fff td {
    border-color: #FFF;
}
/*------------------------------ ESTILOS DE PAGINACIÓN ------------------------------*/

.paginations {
    text-align: center;
    user-select: none;
}
.paginations li {
    display: inline-block;
}
.paginations a {
    color: #004884;
    text-decoration: none;
    font-size: 16px;
    font-family: "Work Sans Medium";
}
.paginations .previous-pages a, .paginations .next-pages a {
    text-decoration: underline;
    color: #3366CC;
    font-size: 14px;
    margin: 0px 8px;
    font-family: "Work Sans Regular";
}
.paginations .previous-pages a:hover, .paginations .next-pages a:hover {
    color: #004884;
}
.paginations .current-pages, .dots {
    width: 35px;
    height: 35px;
    padding-top: 5px;
    cursor: pointer;
}
.paginations .dots {
    pointer-events: none;
    cursor: default;
}
.paginations .current-pages:hover {
    background-color: #E6EFFD;
    border-radius: 4px;
}
.paginations .current-pages a:hover {
    text-decoration: none;
    color: #004884!important;
}
.paginations .active {
    background-color: #3366CC;
    border-radius: 4px;
}
.paginations .active a {
    color: #fff!important;
}
.paginations .active:hover {
    background-color: #3366CC;
    border-radius: 4px;
}
.paginations .active a:hover {
    color: #fff!important;
}
.paginations .disable a {
    color: #BABABA;
    pointer-events: none;
    cursor: default;
}
.paginations .disable a:hover {
    color: #BABABA;
}
/*------------------------------ ESTILOS ALERTAS TIPO MODAL ------------------------------*/

.modal-cont i {
    display: block;
    text-align: center;
    padding-top: 50px;
    font-size: 56px;
}
.modal-cont h2 {
    display: block;
    text-align: center;
    padding-top: 20px;
}
.modal-cont p {
    color: #4b4b4b;
    text-align: center;
    margin-top: 20px;
}
.cont-btn-modal {
    margin-top: 30px;
    margin-bottom: 40px;
}
/*------------------------------ ESTILOS BTN CARGA DE ARCHIVOS ------------------------------*/

.content-upload .button-text {
    color: #3366CC;
    font-size: 15px;
}
.content-upload {
    background-color: #fff;
    border: 1px dashed #3366CC;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    cursor: pointer;
    margin-top: 30px;
}
.content-upload img {
    margin: 10px;
}
.content-detalle {
    background-color: #DDEAFF;
    padding: 5px 15px;
    border-radius: 25px;
    width: 330px;
    display: flex;
    justify-content: space-between;
}
.content-detalle a {
    color: #004884;
}
.content-detalle a:hover {
    color: #004884;
}
/* -------------------------------- ESTILO NAV ---------------------------------- */

.content-menunav {
    width: 100%;
    background-color: #004884;
    height: 75px;
    margin-top: -16px;
}
.menu-nav {
    margin-right: 81px;
    list-style: none;
}
.menu-nav ul, ol {
    list-style: none;
}
.menu-nav>li {
    float: right;
}
.menu-nav li a {
    background-color: #004884;
    color: #fff;
    padding: 26px 12px;
    display: block;
    font-family: "Work Sans Medium";
    font-size: 15px;
    text-decoration: underline;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
.menu-nav li a:hover {}
.menu-nav .item-submenu {
    background-color: #E6EFFD!important;
    padding: 10px 12px;
    color: #004884;
    border-bottom: 1px solid #fff;
}
.menu-nav li ul {
    display: none;
    position: absolute;
    min-width: 120px;
}
.menu-nav li:hover>ul {
    display: block;
}
@media screen and (max-width: 600px) {
    .menu-nav {
        margin-right: 20px;
    }
    .menu-nav .item-submenu {
        margin-right: 16px;
    }
}
/* ---------------------------- ESTILOS POPER EMERGENTES ----------------------------*/

.popover {
    border-color: #4065C5!important;
    color: #4B4B4B!important;
    background-color: #F2F2F2!important;
    font-family: "Work Sans Regular"!important;
    font-size: 12px!important;
}
.popover .arrow {
    display: none!important;
}
.btn-popover {
    cursor: pointer;
    outline: none!important;
}
/*------------------------------ ESTILOS PIE DE PÁGINA ------------------------------*/

#footer2 {
    background-color: #008E65;
    padding-bottom: 1px;
    margin: 0px;
}
#footer2 #f2 {
    background-color: var(--color-blanco-FFFFFF);
    margin: 0px 77px 54px 77px;
    padding: 0px 59px 19px 59px;
    border-right: 2px solid #E6EFFD;
    border-bottom: 2px solid #E6EFFD;
    border-left: 2px solid #E6EFFD;
    border-radius: 0px 0px 18px 18px;
}
#footer3 #f3 {
    padding: 50px 59px 19px 59px;
}
#footerv3 #f3 {
    padding: 50px 59px 19px 59px;
}
#footer3 {
    background-color: var(--color-azul-E6EFFD);
    padding: 0px 77px 0px 77px;
}
#footerv3 {
    background-color: var(--color-azul-FFFFFF);
    padding: 0px 77px 0px 77px;
}
#logofooter {
    background-color: var(--color-azul-3366CC);
    padding-bottom: 17px;
}
#footer3 #logof3 {
    float: right;
    padding: 50px 77px 0px 77px;
}
#footerv3 #logof3 {
    float: right;
    padding: 50px 77px 0px 77px;
}
#logofooter a img {
    margin: 24px 0px 22px 83px;
}
#logofooter a img {
    margin-right: -75px;
    margin-bottom: 0px;
}
.borde-footerv3 {
    border-top: 2px solid #E6EFFD;
    border-right: 2px solid #E6EFFD;
    border-left: 2px solid #E6EFFD;
}
.borde-footer2 {
    border-bottom: 2px solid #E6EFFD;
    border-right: 2px solid #E6EFFD;
    border-left: 2px solid #E6EFFD;
}
/*Estilos Iconos de Red Social*/

.icon_red_social img {
    width: 22px;
    height: 22px;
    margin-right: 5px;
}
/*Estilos políticas y Mapas*/

.politica_mapa {
    margin-top: 50px!important;
    margin-bottom: 10px;
    color: var(--color-azul-3366CC);
}
.politica_mapa_st {
    color: var(--color-azul-3366CC);
}
/*------------------------------ ESTILOS PARA PANTALLAS 480PX ------------------------------*/

/*Ajustes de pantalla de logo de Login*/

@media screen and (max-width: 480px) {
    #logo_login img {
        zoom: 0.8;
    }
}
@media screen and (max-width: 400px) {
    #logo_login img {
        zoom: 0.6;
    }
}
@media screen and (max-width: 320px) {
    #logo_login img {
        zoom: 0.5;
    }
}
/*Ajuste de pantalla de logo de página Crear Usuarios*/

@media screen and (max-width: 300px) {
    #logo_crear_usuario img {
        zoom: 0.7;
    }
}
/*Ajustes de Pie de Página*/

@media screen and (max-width: 480px) {
    #footer2 #f2 {
        background-color: var(--color-blanco-FFFFFF);
        margin: 0px 30px 54px 30px;
        padding: 0px 30px 19px 30px;
        border-radius: 0px 0px 18px 18px;
        zoom: 0.7;
    }
}
@media screen and (max-width: 480px) {
    #footer3 #f3 {
        margin-left: 20px;
        padding-left: 10px;
        zoom: 0.7;
    }
    #footer3 #contenedor {
        margin-left: 21px;
        margin-right: 21px;
    }
    #footer3 {
        background-color: #E6EFFD;
        padding: 0px;
    }
    #footer3 #logof3 {
        float: right;
        zoom: 0.6;
    }
}
@media screen and (max-width: 480px) {
    #footerv3 #f3 {
        margin-left: 20px;
        padding-left: 10px;
        zoom: 0.7;
    }
    #footerv3 #contenedor {
        margin-left: 21px;
        margin-right: 20px;
    }
    #footerv3 {
        background-color: #fff);
        padding: 0px;
    }
    #footerv3 #logof3 {
        float: right;
        zoom: 0.6;
    }
}
/* --------------------- ESTILOS PIE DE PÁGINA SUSTENTABILIDAD -------------------- */

.footer4 {
    height: 226px;
    background-color: #F6F8F9;
}
.content-foooter4 {
    display: flex;
    float: right;
    margin-top: 60px;
    margin-right: 81px;
}
.content-foooter4 .img-super {
    margin-left: 40px;
}
@media screen and (max-width: 600px) {
    .content-foooter4 {
        margin-right: 20px;
    }
}
@media screen and (max-width: 380px) {
    .content-foooter4 {
        display: flex;
        flex-direction: column;
    }
    .content-foooter4 .img-super {
        margin-left: 170px;
        margin-top: 15px;
    }
}