:root {
    --sidebar-toggler-size: 25px;
    --sidebar-width: 350px;
    --sidebar-menu-item-height: 70px;
    --sidebar-color: #251605;
    --sidebar-bg-color: #F8F1DE;
}

#wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    height: 100%;
}

#page-content-wrapper {
    height: 100%;
    overflow: hidden;
    padding: 0 0 0 calc(2*var(--sidebar-toggler-size));
    margin: 0;
    position: relative;
    transition: all ease-in-out 0.3s 0s;
    -o-transition: all ease-in-out 0.3s 0s;
    width: 100%;
}

/* Navigation Menu Style */

ul.nav-menu li.nav-menu-item {
    background-color: inherit;
    color: inherit;
    font: 1rem/1.5 'Open Sans', sans-serif;
    height: var(--sidebar-menu-item-height);
    list-style: none inside none !important;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all ease-in-out 0.3s 0s;
    -o-transition: all ease-in-out 0.3s 0s;
    width: 100%;
}

.nav-menu.nav-horizontal {
    display: flex;             /* Enables Flexbox */
    flex-direction: row;       /* Aligns children side-by-side */
    justify-content: center;   /* Centers the group of buttons */
    align-items: center;       /* Centers items vertically */
    padding: 0;
    margin: 0;
}

/* 2. Stop the items from taking full width */
.nav-menu.nav-horizontal .nav-menu-item {
    width: auto !important;    /* Override the 100% width from the default sidebar */
    margin: 0 15px 0.5% 15px;            /* Add space between buttons */
}

/* FORCE the link to be white and override everything else */
a.navigation-button {
    /* Layout */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    height: 100%;
    line-height: normal;
    padding: 0;

    color: inherit;
    text-decoration: none !important; /* Removes underline if present */
}

/* Ensure the arrow is also white */
a.navigation-button::after {
    content: "\e5cf";
    font-family: 'Material Symbols Outlined';
    font-size: 24px;
    margin-top: -5px;

    /* FORCE arrow color */
    color: inherit;

    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

a.navigation-close {
    position: absolute;
    top: 5px;
    right: 5px;
    align-items: center;
    justify-content: left;
    text-align: left;
    flex-direction: column;
    font-size: large;
    width: 40px;
    height: 40px;
    font-size: 2rem;
    line-height: normal;
    color: inherit;
    text-decoration: none !important;
    z-index: 1000;
}

a.navigation-button:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* Active state */
.nav-menu-item.active a.navigation-button::after {
    opacity: 1;
    transform: translateY(0);
}