@import url('https://fonts.googleapis.com/css2?family=Open+Sans');

:root {
    /* VERSION */
    --version: "Versión 1.9.4";
    /* LOGO CONFIGURABLE */
    --logoURL: url("https://i.ibb.co/gZPfcTh/Vector-3.png");
    --watermark: "No válido sin firma empleado";
    --navBackgroundColor: #1A2154;
    --navFontColor: #ffffff;
    --navHover: #0AA6E0;

    /* COLORES CONFIGURABLE */
    --background: #ffffff;
    --ink: #354383;
    --action: #1A2154;
    --secondary: #0AA6E0;
    --light: #F0ECFF;
    --base: #1A2154;
    --negative: #E84341;
    --warning: #FFB703;
    --positive: #1CC497;
    --subido: #023047;
    --notificado: #0AA6E0;
    --pendiente: #FFB703;
    --firmada: #1CC497;
    --cancelada: #6E99A3;

    /* BACKGROUND */
    --secondaryLight: #81D3ED;
    --dark: #0076AC;

    /* BLUE */
    --blue90: rgb(6, 17, 35, 0.9);
    --blue80: rgb(6, 17, 35, 0.8);
    --blue70: rgb(6, 17, 35, 0.7);
    --blue60: rgb(6, 17, 35, 0.6);
    --blue50: rgb(6, 17, 35, 0.5);
    --blue40: rgb(6, 17, 35, 0.4);
    --blue30: rgb(6, 17, 35, 0.3);
    --blue20: rgb(6, 17, 35, 0.2);
    --blue10: rgb(6, 17, 35, 0.1);
    /* NEUTRAL */
    --neutral70: rgb(184, 190, 201, 0.7);
    --neutral60: rgb(184, 190, 201, 0.6);
    --neutral50: rgb(184, 190, 201, 0.5);
    --neutral40: rgb(184, 190, 201, 0.4);
    --white: #ffffff;
    /* INK */
    --ink90: rgb(0, 0, 0, 0.9);
    --ink80: rgb(0, 0, 0, 0.8);
    --ink70: rgb(0, 0, 0, 0.7);
    --ink60: rgb(0, 0, 0, 0.6);
    --ink50: rgb(0, 0, 0, 0.5);
    --ink40: rgb(0, 0, 0, 0.4);
    --ink30: rgb(0, 0, 0, 0.3);
    --ink20: rgb(0, 0, 0, 0.2);
    --ink10: rgb(0, 0, 0, 0.1);
    /* RED */
    --red90: rgb(219, 49, 49, 0.9);
    --red80: rgb(219, 49, 49, 0.8);
    --red70: rgb(219, 49, 49, 0.7);
    --red60: rgb(219, 49, 49, 0.6);
    --red50: rgb(219, 49, 49, 0.5);
    --red40: rgb(219, 49, 49, 0.4);
    --red30: rgb(219, 49, 49, 0.3);
    --red20: rgb(219, 49, 49, 0.2);
    --red10: rgb(219, 49, 49, 0.1);
    /* YELLOW */
    --yellow90: rgb(255, 196, 0, 0.9);
    --yellow80: rgb(255, 196, 0, 0.8);
    --yellow70: rgb(255, 196, 0, 0.7);
    --yellow60: rgb(255, 196, 0, 0.6);
    --yellow50: rgb(255, 196, 0, 0.5);
    --yellow40: rgb(255, 196, 0, 0.4);
    --yellow30: rgb(255, 196, 0, 0.3);
    --yellow20: rgb(255, 196, 0, 0.2);
    --yellow10: rgb(255, 196, 0, 0.1);
    /* PADDING */
    --paddXXS: 4px;
    --paddXS: 8px;
    --paddS: 16px;
    --paddM: 24px;
    --paddL: 32px;
    --paddXL: 48px;
    --paddXXL: 64px;
}

* {
    box-sizing: border-box;
}

.watermark::before {
    position: absolute;
    color: var(--action);
    top: 50%;
    left: 30%;
    z-index: 2;
    content: var(--watermark);
    transform: rotate(-45deg);
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    opacity: 0.2;
}

html,
body {
    height: auto;
    color: var(--ink);
    font-family: 'Open Sans', sans-serif !important;
}

h1 {
    font-size: 40px;
    font-weight: bold;
    color: var(--base);
}

h2 {
    margin: 0px !important;
    font-size: 36px !important;
    font-weight: bold !important;
    width: 100%;
    color: var(--dark);
}

h5 {
    margin: 0 !important;
}

footer {
    margin-top: 30px;
}

.footer-brand {
    max-height: 50px;
    padding-bottom: 10px;
}

.footer-bank {
    max-height: 25px;
    padding-left: 10px
}

.navbar-brand {
    /* background-image: var(--logoURLBlanco); */
    background-size: contain;
    background-repeat: no-repeat;
    height: 30px;
    width: -webkit-fill-available;
}

.logo-brand {
    /* background-image: var(--logoURL); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 4em;
    width: -webkit-fill-available;
}

#app {
    height: auto;
}

.text-danger {
    color: var(--negative) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-sent {
    color: var(--base) !important;
}

/* BOTONES Y LINKS */

a,
a:link,
a:hover,
a:visited,
a:active {
    color: inherit;
    text-decoration: none;
    transition: all .2s;
}

.form-check,
.link-recu {
    font-size: 15px;
    color: var(--ink) !important;
    font-weight: bold !important;
}

.link-recu:hover {
    color: var(--secondary) !important;
}

.form-check {
    font-size: inherit;
}

.form-check-input:checked {
    color: var(--base) !important;
    background-color: var(--base) !important;
}

.recuperar>.link-recu:hover {
    color: var(--base) !important;
}

nav .nav-link:hover,
nav .nav-link:focus {
    color: var(--navFontColor) !important;
    font-weight: bolder;
    text-decoration: none;
    transition: all .2s;
}

.nav-user::after {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    color: var(--secondary);
    padding-left: 10px;
    content: "\f0d7";
}

.btn {
    border-radius: 30px !important;
    margin: 0px 5px;
    line-height: 1.6 !important;
}

.btn a,
.btn p a {
    color: var(--secondary);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--background) !important;
    color: var(--base) !important;
    box-shadow: 0px 4px 4px 0px var(--ink20);
}

.btn-primary:hover {
    color: var(--background) !important;
    background-color: var(--secondary) !important;
}

.btn-light {
    color: var(--base) !important;
    background-color: var(--background) !important;
}

.btn-light:hover {
    color: var(--background) !important;
    background-color: var(--base) !important;
}

.btn-danger {
    color: var(--negative) !important;
    background-color: var(--background) !important;
}

.btn-default {
    color: var(--base) !important;
    background-color: transparent !important;
    border: none;
}

.btn-default i {
    color: var(--secondary) !important;
}

.btn-default:hover {
    color: var(--background) !important;
    background-color: var(--base) !important;
}

.btn-secondary {
    color: var(--background) !important;
    background-color: var(--dark) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    border-radius: 50px !important;
    border: 1px solid var(--secondaryLight) !important;
    /* padding: 5px 100px !important; */
    box-shadow: 0px 4px 4px 0px #00000040;
}

.btn-secondary:hover {
    color: var(--dark) !important;
    background-color: var(--background) !important;
}

.btn-tertiary {
    background-color: var(--light) !important;
    border: 1px solid var(--secondaryLight) !important;
}

.btn-circle {
    color: var(--base);
    /* background-color: var(--base) !important; */
    height: 2.5em;
    width: 2.5em;
    border-radius: 5em !important
}

.btn-circle:hover,
.btn-circle:focus {
    background-color: #4e85c9;
    border-radius: 5em !important
}

.volver-terminos-btn {
    color: white !important;
    background-color: #436084 !important;
}

.rechazar-terminos-btn {
    color: #436084 !important;
    background-color: var(--background) !important;
}

.estilopdf {
    max-width: 90% !important;
    width: -webkit-fill-available !important;
    max-height: 300em !important;
    height: 300em !important;
}

.estilopdf iframe,
embed {
    height: 60vh
}

.cartelera {
    /* height: 600px; */
    border-radius: 100px 0px;
    object-fit: cover;
    padding: 50px 50px 50px 50px;
    width: 100%;
}

.carteleraPro {
    height: 600px;
    border-radius: 100px 0px;
    object-fit: cover;
    padding: 50px 50px 50px 50px;
}

@media (min-width: 600px) {
    .cartelera {
        height: 600px;
        border-radius: 100px 0px;
        object-fit: cover;
        padding: 50px 50px 50px 50px;
    }

    .carteleraPro {
        height: 600px;
        border-radius: 100px 0px;
        object-fit: cover;
        padding: 50px 50px 50px 50px;
    }
}

/* HEIGHT */
.firmaDisconforme textarea {
    height: 15em !important;
}

/*AVATAR*/
.img-avatar {
    height: 35px;
    width: 35px;
    border-radius: 20px;
    object-fit: cover;
}

.img-avatar-perfil {
    height: 75px;
    width: 75px;
    object-fit: cover;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -ms-border-radius: 50% !important;
    -o-border-radius: 50% !important;
}

.img-avatar-grande {
    height: 50px;
    width: 50px;
    object-fit: cover;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    border-radius: 50% !important;
    transition: all .2s
}

.img-avatar-grande:hover {
    background: #65c9ff;
    cursor: pointer;
    transform: scale3d(1.3, 1.2, 0.3);
    z-index: 9999;
    border-radius: 50px;
    border: none;
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    border-radius: 50% !important;
    transition: all .2s
}

/* ICONOS */

.btn-office::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f1ad";
}
.btn-checked::after {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f058";
    padding-left: 15px;
}

.btn-calendar::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-size: 25px;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f274";
}

.btn-eliminar::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f2ed";
}

.btn-ver::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f06e";
}

.btn-editar::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f304";
}

.btn-descargar::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    margin-right: 10px;
    text-rendering: auto;
    line-height: 1;
    content: "\f019";
}

.btn-imprimir::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    margin-right: 10px;
    text-rendering: auto;
    line-height: 1;
    content: "\f02f";
}

.btn-buscar::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f002";
}

.btn-cerrar::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f00d";
}

.btn-legajo::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f15c";
}

.btn-uploadLicence::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f271";
}

.btn-exportar {
    border-radius: 5px;
    border: 2px solid var(--base) !important;
    transition: all .2s
}

.btn-exportar::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    margin-right: 10px;
    content: "\f6dd";
}

.btn-exportarCSV::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f6dd";
}

.btn-exportar-zip::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f1c6";
}

.btn-documento::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    margin-right: .5em;
    text-rendering: auto;
    line-height: 1;
    content: "\f15c";
}

.btn-lista::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    margin-right: .5em;
    text-rendering: auto;
    line-height: 1;
    content: "\f03a";
}

.btn-corte::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    margin-right: .5em;
    text-rendering: auto;
    line-height: 1;
    content: "\f0c4";
}

.btn-refresh::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f2f1";
}

.btn-envelope::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f0e0";
}

.btn-libro::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f02d";
}

.btn-desc::after {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    margin-left: 5px;
    content: "\f063";
}

.btn-asc::after {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    margin-left: 5px;
    content: "\f062";
}

.no-arrow {
    -webkit-appearance: none;
    -moz-appearance: none;
}

.no-arrow::-ms-expand {
    display: none;
}

.btn-calendario::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    margin-right: .5em;
    text-rendering: auto;
    line-height: 1;
    content: "\f783";
}

.btn-switch::before,
.btn-close-session::before,
.btn-profile::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    margin-right: .5em;
    text-rendering: auto;
    line-height: 1;
}

.btn-switch::before {
    content: "\f074";
}

.btn-close-session::before {
    content: "\f011";
}

.btn-profile::before {
    content: "\f007";
}

.btn-agregarUser::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1;
    content: "\f234";
}

.btn-adjuntar {
    border-radius: 5px;
    border: 1px solid var(--secondaryLight) !important;
    padding: 1em !important;
    transition: all .2s
}

.btn-adjuntar:hover,
.btn-adjuntar:active {
    font-weight: 900;
    background-color: var(--base) !important;
    color: var(--background) !important;
    transition: all .2s;
}

.btn-adjuntar::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    margin: 0px 10px;
    font-weight: 900;
    line-height: 1;
    content: "\f093";
    transition: all .2s;
}

.btn-adjuntar:hover::before {
    font-weight: 400;
    transition: all .2s;
}

.btn-masiva {
    display: inline-block;
    cursor: pointer;
    color: var(--background);
    background-color: var(--base) !important;
    border-radius: 5px;
    padding: 1em;
}

.btn-firmar::before,
.btn-disconforme::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-size: 18px;
    font-variant: normal;
    text-rendering: auto;
    /* margin: 0px 10px; */
    font-weight: 900;
    line-height: 1;
    content: "\f304";
    transition: all .2s;
    /* color: var(--background) !important; */
    /* padding: 7px; */
    border-radius: 50%;
}

*/ .icon-warning::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    margin: 0px 10px;
    font-weight: 900;
    line-height: 1;
    content: "\F33C";
    transition: all .2s;
}

.icon-check-true::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    margin: 0px 10px;
    font-weight: 900;
    line-height: 1;
    content: "\F33C";
    transition: all .2s;
}

.btn-disconforme {
    background-color: var(--negative) !important;
    color: var(--background) !important;
}

.btn-firmar {
    background-color: var(--positive) !important;
    color: var(--background) !important;
}

.footer-firmador {
    margin: 20px;
}

/* NAVBAR */

.navbar {
    color: var(--navFontColor);
    background-color: var(--navBackgroundColor);
    width: 100%;
    text-shadow: 0px 0px 3px var(--base);
}

.navbar .nav-link:hover {
    color: var(--navFontColor) !important;
}

.nav-link {
    margin: 0px 10px;
    font-weight: bold !important;
}

.navbar .fa,
.navbar .fas {
    color: var(--navFontColor);
}

.menu-perfil .dropdown-menu,
.menu-perfil .show {
    background-color: var(--navBackgroundColor) !important;
}

nav .dropdown-item {
    color: var(--navFontColor) !important;
}

nav .dropdown-item:hover {
    background-color: var(--navHover) !important;
}

.menu-responsive {
    display: none;
}

/*ACORDION*/
.accordion-button:not(.collapsed) {
    background-color: var(--background) !important;
    color: black !important;
}

/* TABS */

.nav-tabs {
    padding: 10px;
    border-bottom: 0 !important;
    text-align: center;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: var(--base) !important;
    color: var(--background) !important;
    font-weight: 600;
    font-size: 20px;
    border-radius: 30px;
    border: 1px solid var(--base) !important;
    padding: 5px 25px;
    box-shadow: 0px 4px 4px 0px #00000040;

    transition: all 0.2s;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    background-color: var(--base) !important;
    color: var(--background) !important;
    transition: all 0.2s;
}

.nav-tabs .nav-link {
    background-color: var(--background) !important;
    color: var(--base) !important;
    font-weight: 400;
    font-size: 20px;
    border-radius: 50px !important;
    /* border: 1px solid var(--secondaryLight) !important; */
    padding: 5px 25px;
    box-shadow: 0px 4px 4px 0px #00000040;
    transition: all 0.2s;
}

#tabs .nav-item {
    display: inline-block;
    padding: 10px 0px;
    white-space: nowrap;
}

.charts .card {
    background-color: var(--background) !important;
    border: 1px solid var(--secondaryLight) !important;
    box-shadow: 0px 4px 4px 0px #00000028 !important;
}

.charts .card-header {
    padding: 0px;
    border: none;
}

.charts label {
    font-size: 20px !important
}

/* TABLA */

table {
    white-space: nowrap;
    background-color: var(--background)
}

.tablev2 {
    background-color: var(--background) !important;
    border-radius: 20px;
}

.tablev2 thead {
    padding: 20px !important
}

.tablev2 thead,
.tablev2 th {
    background-color: white !important;
    border-bottom: none !important;
}

.tablev2 tr th {
    border-top: 1px solid var(--secondary);
    border-left: 1px solid var(--secondary);
}

.tablev2 tr th:first-child {
    border-left: 0;
}

.tablev2 tr:first-child th {
    border-top: 0;
}

.table>:not(:last-child)>:last-child>* {
    border-bottom-color: var(--secondary) !important;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    --bs-table-accent-bg: var(--light) !important;
    color: var(--base);
}

.table-hover>tbody>tr {
    transition: all 0.2s !important;
}

.table-hover>tbody>tr:hover {
    transition: all 0.2s !important;
    --bs-table-accent-bg: var(--secondaryLight) !important;
    background-color: var(--light)
}

.table_buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
    border-radius: 30px;
    background-color: var(--base);
}

.table_buttons select {
    color: var(--light);
    border-radius: 10px;
    border: 1px solid var(--background) !important;
    background-color: var(--base)
}

.table_buttons select:hover {
    color: var(--light) !important;
    border-radius: 10px;
    border: 1px solid var(--background) !important;
    background-color: var(--secondary) !important;
    font-weight: bold;
}

#tablaDashboard th, #tablaDashboard thead button, .btn-asc, .btn-desc {
    color: var(--secondary)!important;
    border: none;
    font-weight: bold !important;
}

.table th {
    border: none;
}

.table td {
    vertical-align: middle;
}

th button {
    font-weight: bold;
}

tbody>tr>td p {
    margin: 0;
    padding: 0;
}

td {
    color: var(--base);
    padding: 10px !important;
    border-bottom: 1px solid var(--secondaryLight) !important;
}

.pagination {
    margin: 0;
}

.paginado-text {
    color: var(--base)
}

/*ERRORES CARGA MASIVA*/

.tableError thead {
    color: var(--base);
}

.lista_errores {
    list-style: none;
    padding: 0;
    margin: 0;
}

.divScroll {
    overflow-y: scroll;
    height: 20em;
}

/* LABELS */

label {
    margin: 0;
    display: block !important;
    color: var(--ink) !important;
    font-weight: 600;
    padding-bottom: 3px;
    font-size: 16px !important;
}

.item-tabla {
    transition: all 2s;
}

/* .item-tabla:hover .FechaPublicacion {
    display: block;
    transition: all 2s;
} */

/* .item-tabla:hover .periodo {
    display: none;
    transition: all 2s;
} */

/* .periodo {
    display: block;
    padding: 0px 30px !important;
} */

/* .FechaPublicacion {
    display: none;

} */

.Pendiente::before {
    height: 20px;
    width: 20px;
    border-radius: 50% !important;
    /* background-color: var(--pendiente) !important; */
    color: var(--pendiente) !important;
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-size: 20px;
    font-weight: 700;
    margin: 0px 10px;
    text-align: center;
    text-rendering: auto;
    line-height: 1;
    content: "\f017";
}

.Disconforme::before {
    height: 20px;
    width: 20px;
    border-radius: 50% !important;
    background-color: var(--negative) !important;
    color: var(--background) !important;
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-size: 10px;
    font-weight: 700;
    text-rendering: auto;
    text-align: center;
    margin: 0px 10px;
    line-height: 2;
    content: "\f00d";
}

.Firmado::before {
    height: 20px;
    width: 20px;
    border-radius: 50% !important;
    background-color: var(--firmada) !important;
    color: var(--background) !important;
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-size: 10px;
    font-weight: 700;
    text-rendering: auto;
    text-align: center;
    margin: 0px 10px;
    line-height: 2;
    content: "\f00c";
}

.Subido::before {
    height: 20px;
    width: 20px;
    border-radius: 50% !important;
    background-color: var(--subido) !important;
    color: var(--background) !important;
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-size: 10px;
    font-weight: 700;
    text-rendering: auto;
    text-align: center;
    margin: 0px 10px;
    line-height: 2;
    content: "\f062";
}

.Notificado::before {
    height: 20px;
    width: 20px;
    border-radius: 50% !important;
    background-color: var(--notificado) !important;
    color: var(--background) !important;
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-size: 10px;
    font-weight: 700;
    text-rendering: auto;
    text-align: center;
    margin: 0px 10px;
    line-height: 2;
    content: "\f0e0";
}


.Completo {
    color: var(--secondary) !important;
    text-align: center;
    margin: 0px 10px;
}

.Proceso {
    color: var(--negative) !important;
    text-align: center;
    margin: 0px 10px;
}

.Incompleto {
    color: var(--negative) !important;
    text-align: center;
    margin: 0px 10px;
}

.ACTIVO {
    padding: 2px 20px !important;
    margin: 0 .3em;
    border-radius: 50px !important;
    width: 150px;
    text-align: center;
    color: #212529;
}

.ACTIVO:before {
    height: 23px;
    width: 23px;
    border-radius: 50% !important;
    background-color: var(--secondary) !important;
    color: var(--background) !important;
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-size: 10px;
    font-weight: 700;
    text-rendering: auto;
    text-align: center;
    margin: 0px 10px;
    line-height: 2;
    content: "\f0b1";
}

.INACTIVO {
    padding: 2px 20px !important;
    margin: 0 .3em;
    border-radius: 50px !important;
    width: 150px;
    text-align: center;
    color: #212529;
}

.INACTIVO:before {
    height: 22px;
    width: 22px;
    border-radius: 50% !important;
    background-color: var(--ink40) !important;
    color: var(--background) !important;
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    font-size: 10px;
    font-weight: 700;
    text-rendering: auto;
    text-align: center;
    margin: 0px 10px;
    line-height: 2;
    content: "\f04c";
}

hr {
    background-color: var(--base) !important;
    border: 1px solid var(--base) !important;
}

/* BANNER */

.banner {
    padding: 30px 0px;
}

.banner img {
    width: calc(0.5rem + 1vw)
}

.banneInner {
    position: relative;
    display: flex;
    align-items: center;
}

.bannerInner::after {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.banner h1 {
    font-weight: bolder !important;
}

.barra {
    width: 100%;
    display: flex;
    height: 60px;
    align-items: flex-end;
}

.barra hr {
    background: linear-gradient(to right, var(--secondary), var(--light));
    height: 2px !important;
    opacity: 1;
    border: none !important;
    padding: 0px !important;
    width: 100%;
    margin: 0px;
}

/* CARDS */

.card {
    background-color: var(--light) !important;
    border: 1px solid var(--secondary) !important;
    padding: 40px;
    box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.14);
    padding: 20px;
    border-radius: 30px !important;
}

.card-header {
    color: var(--base);
    background-color: transparent !important;
    border-bottom: 1px solid var(--secondaryLight)
}

.card-header .btn-light {
    font-size: 1.3em;
}

.card-footer {
    background-color: transparent !important;
}

/* .cardBank::after {
    content: "\f061";
    position: absolute;
    top: 35%;
    right: 20px;
} */

/* Cards success/error/sent */

.card-body .fa-times-circle {
    font-size: 3rem;
    color: var(--negative) !important;
}

.card-body .fa-check-circle {
    font-size: 3rem;
    color: var(--positive) !important;
}

.card-body .fa-paper-plane {
    font-size: 3rem;
    color: var(--base) !important;
}

/* PERFIL */
.perfil {
    background-color: var(--light) !important;
    padding: 40px;
}

.perfil p {
    margin: 0;
    border-color: var(--secondaryLight) !important;
}

.perfil .card-header {
    border: transparent;
}

.perfil .card-body {
    background-color: var(--background);
    border-radius: 30px !important;
}

.perfil .item>div {
    margin: 10px !important;
    border-bottom: 1px solid var(--secondary);
}

.perfil .item:last-child {
    width: -webkit-fill-available;
}

.perfil .item:last-child>div {
    border: none;
}

.chip {
    display: inline-block !important;
    background-color: var(--light);
    color: var(--base);
    font-weight: 400;
    font-size: 20px;
    border-radius: 30px;
    border: 1px solid var(--secondaryLight);
    padding: 2px 25px;
    box-shadow: 0px 4px 4px 0px #00000040;
    margin-right: 10px;
}

/* MODALES */
.modal-header {
    color: var(--background);
    background-color: var(--base);
    margin: 0;
}

.modal {
    background: var(--ink70);
    border: 1px solid #ccc;
    transition: 2.1s ease-out;
    box-shadow: -2rem 2rem 2rem var(--ink80);
    opacity: 1;
    visibility: visible;
}

.modal.off {
    opacity: 0;
    visibility: hidden;
    filter: blur(8px);
    transform: scale(0.33);
    box-shadow: 1rem 0 0 var(--ink80);
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
    border-radius: 30px;
}

/* Pop-up */

.pop-up {
    padding-top: 0.8em;
    padding-left: 1em !important;
}

.avatar-container {
    margin: 1em 0 1em 1em;
}

.container-buttons {
    margin: 0 0 1em 0;
}

.bgTerminos {
    background-image: url("../images/login2.png");
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* LOGIN */

.img-login {
    background-image: url("../images/login3.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
}

/* TODO: Mostrar el código de versión en la página principal*/
.img-login::before {
    content: var(--version);
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px;
}

.form-login {
    background-color: var(--background) !important;
    padding: 2em;
    border-radius: 30px;
    z-index: 1;
}

.form-login::before {
    content: "";
    background-image: url("https://i.ibb.co/LndBSCs/logo-people-toolkit-3x.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 300px;
    height: 90px;
    top: 5%;
    left: 3%;
    z-index: -1;
}

.powered {
    position: absolute;
    width: 400px;
    bottom: 5%;
    color: var(--background) !important;
    font-weight: bold;
    left: 2%;
}

.powered img {
    max-height: 20px;
}

.loginInput {
    display: flex;
    align-items: center;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    padding-right: 1px;
}

.login-logo {
    max-height: 40px;
}

/* PROGRESS BAR */

.stepper {
    position: relative;
    /*height: 7em;*/
}

.stepper::after {
    content: "";
    background: rgb(0, 0, 0, 0.5);
    width: 100%;
    height: 1px;
    position: absolute;
    top: 20px;
    left: 0;
}

.stepper>div {
    text-align: center;
    z-index: 1
}

.stepper>div button:hover,
.stepper>div a:hover,
.step-active button,
.step-active a {
    transform: scale(1.2);
    transition: all .2s;
}

.stepper>div button,
.stepper>div a {
    height: 2.5em;
    width: 2.5em;
    border-radius: 5em !important;
    margin-bottom: 10px;
    transition: all .2s
}

.step-active button,
.step-active a {
    color: var(--background) !important;
    background-color: var(--secondary) !important;
    border: 4px solid var(--navHover);
    font-weight: 600 !important;
}

.step-active p {
    color: var(--base) !important;
    font-weight: 600 !important;
}

/* CALENDARIO */

.responsiveCal {
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
}

.responsiveCal iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rpv-core__annotation-layer {
    display: none !important;
}

/* INPUTS */

::-webkit-file-upload-button {
    color: var(--secondary);
    background: transparent !important;
    border: none;
    display: none;
}

.input-group .btn {
    position: absolute !important;
}

.form-control#email {
    background-color: var(--light) !important;
}

.input-group>.form-control#password {
    background-color: var(--light);
}


input#password:focus {
    z-index: 2;
    /* se modifica de 3 a 2 para mantener visible el icono de ver contraseña*/
}

/*UPLOAD CORTE/ALTA-BAJA USUARIOS*/

select option:first-child {
    display: none;
}

option {
    color: var(--base);
    background-color: var(--background);
}

.dashedDiv {
    /* border-style: dashed; */
    border: 1px solid var(--secondary);
    border-radius: 30px;
    background-color: var(--background) !important;
    color: var(--dark);
}

.file-upload,
.file-uploaded,
.file-button {
    color: transparent !important;
}

.file-button::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    line-height: 1.3;
    color: var(--base);
    content: "\f030";
}

#file {
    border-color: #0d6efd !important;
}

.file-button:hover::before {
    color: #ffffff;
}

.file-upload::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inherit;
    justify-content: center;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    text-rendering: auto;
    color: var(--dark);
    font-size: 5rem;
    content: "\f382";
}

.file-uploaded::before {
    font-family: "Font Awesome 5 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inherit;
    justify-content: center;
    font-style: normal;
    font-variant: normal;
    font-weight: 900;
    text-rendering: auto;
    color: var(--action);
    font-size: 10rem;
    content: "\f058";
}

.dashedDiv input[type=file] {
    border: none !important;
}

/* D-flex */

.justify-content-between-extension {
    display: flex;
    justify-content: space-between !important;
}

/*Toggle shadow*/

.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0 !important;
}

/*Bouncing-ball Loader*/

.pl {
    display: block;
    margin: auto;
    width: 6.25em;
    height: 6.25em;
}

.pl__ring,
.pl__ball {
    animation: ring 2s ease-out infinite;
}

.pl__ball {
    animation-name: ball;
}

@keyframes ring {
    from {
        stroke-dasharray: 0 257 0 0 1 0 0 258;
    }

    25% {
        stroke-dasharray: 0 0 0 0 257 0 258 0;
    }

    50%,
    to {
        stroke-dasharray: 0 0 0 0 0 515 0 0;
    }
}

@keyframes ball {

    from,
    50% {
        animation-timing-function: ease-in;
        stroke-dashoffset: 1;
    }

    64% {
        animation-timing-function: ease-in;
        stroke-dashoffset: -109;
    }

    78% {
        animation-timing-function: ease-in;
        stroke-dashoffset: -145;
    }

    92% {
        animation-timing-function: ease-in;
        stroke-dashoffset: -157;
    }

    57%,
    71%,
    85%,
    99%,
    to {
        animation-timing-function: ease-out;
        stroke-dashoffset: -163;
    }
}

/* LOADERS */

.loaderSpinner {
    font-size: 30px;
    color: var(--secondary);
    font-weight: bold;
    animation-name: spin;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.loaderSpinnerInv {
    font-size: 30px;
    color: var(--secondary);
    font-weight: bold;
    animation-name: spininv;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

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

    to {
        transform: rotate(360deg);
    }
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--base);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

.errorScreen {
    /* color: var(--secondary); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--light);
    padding: 30px;
    border-radius: 30px;
}

.fullscreen {
    margin: 50px;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

/* MEDIAQUERY */

@media (max-width: 600px) {
    .avatar-container {
        margin: 0;
    }

    .container-buttons {
        margin: 0 1em 0 0;
    }

    .justify-content-between-extension {
        display: block;
    }

    .pagination {
        justify-content: space-between;
    }

    /*Menu xs*/
    nav .d-flex {
        display: none !important;
    }

    .menu-responsive {
        display: block;
    }

}

.animate__animated.animate__fadeInUp {
    --animate-duration: .3s;
}