:root {
    --app-sidebar-full-width: clamp(260px, 18vw, 320px);
    --app-sidebar-mini-width: 87px;
    --app-page-gutter: clamp(12px, 1.8vw, 30px);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

#main-wrapper,
#main-wrapper .page-wrapper,
#main-wrapper .body-wrapper {
    min-width: 0;
}

#main-wrapper .body-wrapper > .container-fluid,
#main-wrapper .page-wrapper > .body-wrapper > .container-fluid {
    width: 100%;
    max-width: none !important;
    padding-left: var(--app-page-gutter);
    padding-right: var(--app-page-gutter);
}

#main-wrapper .row,
#main-wrapper [class*="col-"],
#main-wrapper .card,
#main-wrapper .card-body,
#main-wrapper .bootstrap-table,
#main-wrapper .fixed-table-container,
#main-wrapper .fixed-table-body {
    min-width: 0;
}

#main-wrapper .table-responsive,
#main-wrapper .bootstrap-table .fixed-table-container,
#main-wrapper .bootstrap-table .fixed-table-body {
    max-width: 100%;
    overflow-x: auto;
}

#main-wrapper .topbar .navbar,
#main-wrapper .app-header .navbar {
    min-width: 0;
    padding-left: var(--app-page-gutter) !important;
    padding-right: var(--app-page-gutter) !important;
}

@media (min-width: 1200px) {
    #main-wrapper:not(.mini-sidebar):not([data-sidebartype="mini-sidebar"]) .left-sidebar,
    #main-wrapper[data-sidebartype="full"] .left-sidebar {
        width: var(--app-sidebar-full-width) !important;
    }

    #main-wrapper:not(.mini-sidebar):not([data-sidebartype="mini-sidebar"]) > .body-wrapper,
    #main-wrapper[data-sidebartype="full"] > .body-wrapper,
    body[data-sidebartype="full"] #main-wrapper > .body-wrapper {
        width: auto !important;
        max-width: none !important;
        margin-left: var(--app-sidebar-full-width) !important;
    }

    #main-wrapper:not(.mini-sidebar):not([data-sidebartype="mini-sidebar"]) > .page-wrapper,
    #main-wrapper[data-sidebartype="full"] > .page-wrapper,
    body[data-sidebartype="full"] #main-wrapper > .page-wrapper {
        width: auto !important;
        max-width: none !important;
        margin-left: var(--app-sidebar-full-width) !important;
    }

    #main-wrapper:not(.mini-sidebar):not([data-sidebartype="mini-sidebar"]) .app-header,
    #main-wrapper[data-sidebartype="full"] .app-header,
    body[data-sidebartype="full"] #main-wrapper .app-header {
        width: calc(100% - var(--app-sidebar-full-width)) !important;
        max-width: calc(100% - var(--app-sidebar-full-width)) !important;
    }

    #main-wrapper:not(.mini-sidebar):not([data-sidebartype="mini-sidebar"]) .topbar,
    #main-wrapper[data-sidebartype="full"] .topbar,
    body[data-sidebartype="full"] #main-wrapper .topbar {
        left: var(--app-sidebar-full-width) !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    #main-wrapper.mini-sidebar .left-sidebar,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not([data-sidebartype="full"]) .left-sidebar,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not(.show-sidebar) .left-sidebar {
        width: var(--app-sidebar-mini-width) !important;
    }

    #main-wrapper.mini-sidebar > .body-wrapper,
    #main-wrapper[data-sidebartype="mini-sidebar"] > .body-wrapper,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not([data-sidebartype="full"]) > .body-wrapper,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not(.show-sidebar) > .body-wrapper,
    #main-wrapper.mini-sidebar > .page-wrapper,
    #main-wrapper[data-sidebartype="mini-sidebar"] > .page-wrapper,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not([data-sidebartype="full"]) > .page-wrapper,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not(.show-sidebar) > .page-wrapper {
        width: auto !important;
        max-width: none !important;
        margin-left: var(--app-sidebar-mini-width) !important;
    }

    #main-wrapper.mini-sidebar .app-header,
    #main-wrapper[data-sidebartype="mini-sidebar"] .app-header,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not([data-sidebartype="full"]) .app-header,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not(.show-sidebar) .app-header {
        width: calc(100% - var(--app-sidebar-mini-width)) !important;
        max-width: calc(100% - var(--app-sidebar-mini-width)) !important;
    }

    #main-wrapper.mini-sidebar .topbar,
    #main-wrapper[data-sidebartype="mini-sidebar"] .topbar,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not([data-sidebartype="full"]) .topbar,
    body[data-sidebartype="mini-sidebar"] #main-wrapper:not(.show-sidebar) .topbar {
        left: var(--app-sidebar-mini-width) !important;
        right: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    #main-wrapper.mini-sidebar .left-sidebar .brand-logo,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .brand-logo {
        height: 76px !important;
        min-height: 76px !important;
        padding: 14px 10px !important;
    }

    #main-wrapper.mini-sidebar .left-sidebar .brand-logo .sidebar-logo,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .sidebar-logo,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .brand-logo .sidebar-logo {
        width: 52px !important;
        max-width: 52px !important;
    }

    #main-wrapper.mini-sidebar .left-sidebar .nav-small-cap .hide-menu,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .nav-small-cap .hide-menu,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .nav-small-cap .hide-menu {
        display: none !important;
    }

    #main-wrapper.mini-sidebar .left-sidebar .sidebar-item.sidebar-child-item,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-item.sidebar-child-item,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .sidebar-item.sidebar-child-item {
        display: none !important;
    }

    #main-wrapper.mini-sidebar .left-sidebar .sidebar-nav .sidebar-link,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-nav .sidebar-link,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .sidebar-nav .sidebar-link {
        position: relative !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        margin: 4px auto !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 8px !important;
    }

    #main-wrapper.mini-sidebar .left-sidebar .sidebar-nav .sidebar-link .hide-menu,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-nav .sidebar-link .hide-menu,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .sidebar-nav .sidebar-link .hide-menu,
    #main-wrapper.mini-sidebar .left-sidebar .sidebar-link.has-arrow::after,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-link.has-arrow::after,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .sidebar-link.has-arrow::after {
        display: none !important;
    }

    #main-wrapper.mini-sidebar .left-sidebar .first-level,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .first-level,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .first-level {
        display: none !important;
    }

    #main-wrapper.mini-sidebar .left-sidebar .sidebar-nav .sidebar-link::before,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-nav .sidebar-link::before,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .sidebar-nav .sidebar-link::before {
        content: attr(data-menu-title);
        position: absolute;
        top: 50%;
        left: calc(100% + 12px);
        z-index: 1080;
        max-width: 220px;
        padding: 7px 10px;
        border-radius: 6px;
        background: #2a3547;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transform: translate(-6px, -50%);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    #main-wrapper.mini-sidebar .left-sidebar .sidebar-nav .sidebar-link::after,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-nav .sidebar-link::after,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .sidebar-nav .sidebar-link::after {
        content: "";
        position: absolute;
        top: 50%;
        left: calc(100% + 5px);
        z-index: 1080;
        border: 6px solid transparent;
        border-right-color: #2a3547;
        display: block !important;
        opacity: 0;
        pointer-events: none;
        transform: translate(-6px, -50%);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    #main-wrapper.mini-sidebar .left-sidebar .sidebar-nav .sidebar-link:hover::before,
    #main-wrapper.mini-sidebar .left-sidebar .sidebar-nav .sidebar-link:hover::after,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-nav .sidebar-link:hover::before,
    #main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-nav .sidebar-link:hover::after,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .sidebar-nav .sidebar-link:hover::before,
    body[data-sidebartype="mini-sidebar"] #main-wrapper .left-sidebar .sidebar-nav .sidebar-link:hover::after {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

@media (max-width: 1199.98px) {
    #main-wrapper > .body-wrapper,
    #main-wrapper > .page-wrapper,
    #main-wrapper .app-header,
    #main-wrapper .topbar {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
    }

    #main-wrapper .left-sidebar {
        max-width: min(320px, 86vw) !important;
    }
}

.left-sidebar .fixed-profile {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

.left-sidebar .fixed-profile .john-title {
    min-width: 0;
}

.left-sidebar .fixed-profile .john-title span {
    display: block;
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar .navbar > ul.navbar-nav:first-child {
    margin-left: 0;
}

.topbar .sidebartoggler:focus,
.topbar .sidebartoggler:focus-visible,
.topbar .navbar-toggler:focus,
.topbar .navbar-toggler:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

#main-wrapper .left-sidebar .sidebar-nav .sidebar-link {
    padding-left: 18px !important;
    padding-right: 14px !important;
}

#main-wrapper .left-sidebar .first-level .sidebar-child-item .sidebar-link {
    margin-left: 16px !important;
    width: calc(100% - 16px) !important;
}

#main-wrapper .left-sidebar .first-level .sidebar-level-3 > .sidebar-link {
    margin-left: 30px !important;
    width: calc(100% - 30px) !important;
}

#main-wrapper .left-sidebar .first-level .sidebar-level-4 > .sidebar-link {
    margin-left: 44px !important;
    width: calc(100% - 44px) !important;
}