:root {
    --sidebar-w: 300px;
}

@media (min-width: 992px) {

    body:not(.sidebar-collapse) .main-sidebar,
    body:not(.sidebar-collapse) .main-sidebar::before {
        width: var(--sidebar-w) !important;
    }
    body:not(.sidebar-collapse) .main-sidebar::after {
        width: var(--sidebar-w) !important;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-footer,
    body:not(.sidebar-collapse) .main-header {
        margin-left: var(--sidebar-w) !important;
    }
}

@media (min-width: 992px) {

    /* collapsed sidebar: expand to the same width on hover / keyboard focus */
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover::before,
    body.sidebar-mini.sidebar-collapse .main-sidebar:hover::after,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused::before,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused::after {
        width: var(--sidebar-w) !important;
    }
}

/* keep every menu label on one line */
.main-sidebar .nav-sidebar .nav-link p {
    white-space: nowrap !important;
}

/* make the inner containers follow the sidebar width instead of the old 250px */
.main-sidebar .sidebar,
.main-sidebar .sidebar .os-viewport,
.main-sidebar .sidebar .os-content,
.main-sidebar .sidebar .nav-sidebar {
    width: 100% !important;
    max-width: none !important;
}