/*Definicion de variables*/
:root {
    --AzulOscST: #004E92;
    --AzulClaST: #0CAAEB;
    --GrisST: #7F7F7F;
    --GrisClaroST: #EAEAEA;
    --Sombra1: #CCCCCC;
    --Blanco: #FFFFFF;
    --Negro: #191919;
    --AmarilloST: #FFEB00;
}

body {
    height: 100vh;
    width: 100%;
}

.bg-azul-osc-st {
    background: var(--AzulOscST)
}

.bg-gris-claro-st {
    background: var(--GrisClaroST)
}

.bg-azul-cla-st {
    background: var(--AzulClaST);
}

.top-bar {
    background: var(--AzulOscST);
    display: flex;
}

.img-top-bar {
    width: 450px;
    max-width: 100vw;
}

.tool-bar {
    display: flex;
    max-height: 60px;
    height: 60px;
    font-size: 1.167em;
    cursor: pointer;
}

.icon-return-menu {
    height: 30px;
    max-height: 50px;
    min-height: 30px;
}

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

.anchor-return {
    width: 100%;
    text-align: center;
    color: var(--Blanco);
}

.botones-pagina-principal {
    background: var(--Blanco);
    cursor: pointer;
    height: 100%;
    text-align: center;
}

    .botones-pagina-principal:hover {
        background: var(--GrisClaroST);
    }

.icono-pagina-principal {
    height: 135px;
    width: 135px;
    max-height: 60vh;
    max-width: 60vw;
}

.footer {
    font-size: 0.5em;
    background: var(--GrisClaroST);
    position: fixed;
    bottom: 0;
}

.text-azul-osc-st {
    color: var(--AzulOscST)
}

.text-azul-cla-st {
    color: var(--AzulClaST)
}

.text-negro {
    color: var(--Negro)
}

.text-gris-st {
    color: var(--GrisST)
}

.text-gris-cla-st {
    color: var(--GrisClaroST)
}

.invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.validation-message {
    position: absolute;
    z-index: 5;
    max-width: 100%;
    padding: .25rem .5rem;
    margin-top: .1rem;
    font-size: .875rem;
    line-height: 1.5;
    color: #fff;
    background-color: rgba(220,53,69,.9);
    border-radius: .25rem;
}

/*Customize scrollBar:*/
::-webkit-scrollbar {
    width: 0.5vw;
}

/* Track */
::-webkit-scrollbar-track {
    display: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--GrisST);
    border-radius: 0.5vw;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--AzulOscST);
    }
/*Customize scrollBar:*/

.list-group-item-action.active {
    color: var(--Blanco) !important;
    background-color: var(--AzulOscST) !important;
    border-color: var(--AzulOscST) !important;
}

.list-group-item {
    color: var(--AzulOscST) !important;
}

.nav-item {
    cursor: pointer !important;
}

.icono-archivo {
    height: 40px;
}

/*Customize spinner*/
.loader {
    width: 20em;
    height: 20em;
    font-size: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .loader .face {
        position: absolute;
        border-radius: 50%;
        border-style: solid;
        animation: animate 3s linear infinite;
    }

        .loader .face:nth-child(1) {
            width: 100%;
            height: 100%;
            color: var(--AzulOscST);
            border-color: currentColor transparent transparent currentColor;
            border-width: 0.2em 0.2em 0em 0em;
            --deg: -45deg;
            animation-direction: normal;
        }

        .loader .face:nth-child(2) {
            width: 70%;
            height: 70%;
            color: var(--AzulClaST);
            border-color: currentColor currentColor transparent transparent;
            border-width: 0.2em 0em 0em 0.2em;
            --deg: -135deg;
            animation-direction: reverse;
        }

        .loader .face .circle {
            position: absolute;
            width: 50%;
            height: 0.1em;
            top: 50%;
            left: 50%;
            background-color: transparent;
            transform: rotate(var(--deg));
            transform-origin: left;
        }

            .loader .face .circle::before {
                position: absolute;
                top: -0.5em;
                right: -0.5em;
                content: '';
                width: 1em;
                height: 1em;
                background-color: currentColor;
                border-radius: 50%;
                box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
            }

@keyframes animate {
    to {
        transform: rotate(1turn);
    }
}

/*Customize spinner*/

error-404-content {
    padding-bottom: 3rem;
    padding-top: 2rem;
}

.error-404-content h2 {
    font-size: 12.5rem;
    color: var(--AzulOscST);
}

@media (max-width:800px) {
    .error-404-content h2 {
        font-size: 5.625rem
    }
}

.error-404-content p {
    font-size: .9375rem;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    color:var(--GrisST);
}

/*.error-404-content a {
    color: var(--AzulOscST);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none
}*/