:root {
    --sidebar-width: 15rem;
    --brand-height: 3.5rem;
    --navbar-offset-y: calc(var(--brand-height) + 1rem);
}

.navbar-brand {
    height: var(--brand-height);
}

.navbar-brand img {
    height: 100%;
}

#sidebar {
    position: fixed;
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    padding-top: var(--navbar-offset-y);
    z-index: 20;
}

.main {
    display: flex;
    width: 100%;
    min-height: 100vh;
    min-width: 0;
    flex-direction: column;
    padding-top: var(--navbar-offset-y);
}

.page-header {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

.page-content {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {
    .main--sidebar-open {
        margin-left: var(--sidebar-width);
    }

    .page-header {
        padding-left: 0.5rem;
    }

    .page-content {
        padding-left: 0.5rem;
    }
}

.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.btn-toggle::before {
    width: 1.25em;
    line-height: 0;
    content: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e);
    transition: transform .35s ease;
    transform-origin: 0.5em 50%;
}

.nav-arrow {
    transition: transform .25s ease;
}

.nav-link[aria-expanded="true"] .nav-arrow {
    transform: rotate(-90deg);
}

.nav-icon {
    width: 16px !important;
    text-align: center;
}

.w-33 {
    width: 33% !important;
}