:root {
    --fondo-contenido: 203, 222, 255; /* #ededed */
    --color-fondo: 171, 202, 255; /* #ABCAFF */
    --color-princial: 0, 111, 185; /* #006fb9 */

    --color-sfco-red: #cc2219;
    --color-sfco-yellow: #e8a618;
    --color-sfco-green: #47a92a;
    --color-sfco-cyan: #009ee2;
    --color-sfco-blue: #1d3388;
    --color-sfco-purple: #450975;
}

body {
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: screen;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: 100%;
    overflow: hidden;

    height: 100vh;
    font-family: var(--font-body);

    @media screen and (max-width: 1023.98px) {
        background-color: var(--bs-white);
        background-image: none;
        background-blend-mode: unset;
    }
}

.content {
    display: block;
    max-height: 100%;

    overflow: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
}

#bodyContent {
    height: 100%;
}

.contenido {
    background-color: rgb(var(--fondo-contenido));
    background-color: white;
}

#navbar {
    background-color: var(--color-sfco-cyan);
    & .nav-link.active {
        color: white;
    }
}

.drawer {
    --bs-drawer-bg: var(--color-sfco-cyan);
    --bs-drawer-color: #fff;
}

.drawer .drawer-title {
    color: inherit;
}

.fondo_sf {
    background-color: var(--color-sfco-cyan);
}

.m_nav_logo {
    height: fit-content;
    padding: 0;
    margin-left: 13px;
}