body
{
    position: relative;
    z-index:1;
    background: var(--color-primary);
}
body::before {
    top: 0;
    left: 0;
    content: "";
    width: 100vw;
    position: absolute;
    height: 100vh;
    z-index: -1;
    background-color: #ffffff;
    opacity: .1;
    background: linear-gradient(135deg, #5b77d855 25%, transparent 25%) -4px 0 / 8px 8px, linear-gradient(225deg, #5b77d8 25%, transparent 25%) -4px 0 / 8px 8px, linear-gradient(315deg, #5b77d855 25%, transparent 25%) 0px 0 / 8px 8px, linear-gradient(45deg, #5b77d8 25%, #ffffff 25%) 0px 0 / 8px 8px;
}
.container.grid-sm {
    background-color: #ffffff;
    padding: 0;
    min-height: 100vh;
    height: max-content;
}
.icon-base
{
    height:100%;
    width:auto;
}
.avatar-header
{
    background-color: var(--light-olive);
    box-sizing: content-box;
    position: relative;
}

.btn svg {
    height: 80%;
}

.btn-icon {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* Arreglos */
.border-none
{
    border:none;
}
.border-radius-10
{
    --border-radius-btn: 10px;
    border-radius:var(--border-radius-btn);
}
/* Banners */
    .swiper-container
    {
        width: 100%;
        height: auto;
        min-height:100%;
        position:relative;
    }
    img.url_banner_front {
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .overlay-content-banner {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 10%;
        transform: translate(0%,-50%);
    }
    .overlay-content-banner h2
    {
        --h2-font-size: calc(40px + (45 - 40) * ((100vw - 300px) / (1600 - 300)));
        font-family: 'recoleta';
        color: #ffffff;
        text-shadow: 0 0 3px #a1a1a1;
        overflow: unset;
    }
    img.icono-tarjeta {
        max-width: 60px;
    }

    .divider-vert {
        display: inline-block;
        width: 4px;
        height: 4px;
        margin: 0 0.5rem;
        background-color: #999;
        border-radius: 50%;
        vertical-align: middle;
    }
    .nav.container
    {
        max-height: 90px;
    }
    .profile-user
    {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;    
    }
    nav.container {
        position: sticky;
        top: 0;
        background-color: rgba(255,255,255,.9);
        backdrop-filter: blur(1px);
        z-index: 9;
    }

    .rounded-10 {
        border-radius: 10px;
    }

    .card-shadow
    {
        box-shadow: 0 0 10px 0 rgba(0,0,0,.05);
        border:none;
    }

    /* 
        =====
        ESTILOS DE CABECERA
        =====
    */
    header#_sectorCabecera 
    {
        height: 4rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: 9;
    }
    .btn-notificacion
    {
        min-height:2.5rem;
        min-width:2.5rem;
        height:2.5rem;
        width:2.5rem;
        border-radius: 100%;
    }
    #_navMenu img
    {
        height: 100%;
        width: auto;
    }
        span.box-menu-bars {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
            justify-content: flex-start;
            align-items: center;
            gap: 0.3rem;
            width: 2.5rem;
            height: 2.5rem;
        }

        span.menu-bar {
            width: 90%;
            height: 0.19rem;
            background-color: #93E8FF;
            display: block;
            min-width: 10px;
            border-radius: 0;
            transition: width 350ms linear;
        }

        span.menu-bar.bar-1 {
            width: 60%;
        }
        span.box-menu-bars.activo .bar-1 {
            width: 100%;
        }
        span.box-menu-bars.activo .bar-2 {
            width: 60%;
        }
        span.box-menu-bars.activo .bar-3 
        {
            width: 30%;
        }

    /*Configuración Selectores*/
    .sl-a {
        position: relative;
    }
    .sl-a label{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: space-between;
        align-items: center;
        position: relative;
        z-index: 1;
    }
    .sl-a select{
        opacity: 0;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width:  100%;
        height: 100%;
    }
    .icon-absolute-left {
        position: absolute;
        left: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }
   .btn-shadow{
        box-shadow: 0 0px 0px 1px var(--color-primary);
    }

/*
    =====
    ESTILOS DE SIDEBAR
    =====
*/
div#_navRapido {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 0.3rem;
}

.card-menu-rapido {
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex: 1 0 140px;
    min-width: 140px;
    padding: 1rem;
}
.cont-padre-caja-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.cont-caja-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    position: relative;
}

.circulo-fondo {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
}

.cont-caja-menu img {
    position: relative;
    z-index: 2;
    width: 40px;
}

.bg-capacitaciones-ospip {
    --color-ospip: #3376BD;
    background-color: var(--color-ospip);
}
.bg-turismo-empresa {
    --color-empresa: #00A351;
    background-color: var(--color-empresa);
}
.bg-beneficios {
    --color-beneficios: #EA2E2E;
    background-color: var(--color-beneficios);
}
.bg-delegaciones {
    --color-delegaciones: #F7C736;
    background-color: var(--color-delegaciones);
}
aside#_sidebar.active
{
    transform: translateX(0%);
    opacity:1;
}
aside#_sidebar {
    position: fixed;
    z-index: 10;
    background: rgba(255,255,255,.3);
    backdrop-filter: blur(3px);
    top: 4rem;
    height: calc(100% - 4rem);
    transform: translateX(-100%);
    transition: 500ms transform cubic-bezier(0, 0, 0.07, 1.02), 500ms opacity linear;
    overflow-y: auto;
    opacity:0;
    width: 100%;
}
#_sidebar .max-menu
{
    margin-left: 0px;
    margin-right: 0px;
    padding: 0;
    max-width: 580px;
    background-color: #ffffff;
    height: max-content;
    min-height: 100%;
}

figure#_infoLogoUsuario {
    width: 50px;
    height: 50px;
    flex: 1 0 50px;
    margin: 0;
    text-align: right;
}

div#_infoUsuario {
    flex: 1 0 270px;
}
.header-sticky-login .header-sticky
{
    top: 0rem;
}
.header-sticky
{
    position: sticky;
    top: 4rem;
    background: white;
    z-index:5;
}
.max-h-95vh
{
    max-height: 95vh;
}
.tarjeta-credencial {
    max-width: 500px;
    margin: 0 auto;
}

div#_slideUsuarioTarjetaOspipParentesco,
div#_slideUsuarioTarjetaOspip
{
    background-color: #f0f7ff;
    background-image: radial-gradient(rgb(13 66 123 / 22%) 0.8500000000000001px, transparent 0.8500000000000001px), radial-gradient(rgb(13 66 123 / 21%) 0.8500000000000001px, #ffffff 0.8500000000000001px);
    background-size: 12px 12px;
    background-position: 0 0,6px 6px;
}