header {
    height: var(--header-width);
    flex-wrap: nowrap;
    justify-content: space-between;
    background-color: var(--default-background-color) !important;
    outline: 1px solid transparent;
    z-index: 100;
    padding: 10px;
    color: #ffffff;
}

    header .title {
        margin-left: 20px;
    }


aside {
    height: calc(100% - var(--header-width));
    overflow-y: auto;
    padding-bottom: 30px;
}

.page-wrapper .btn-link:focus {
    box-shadow: none !important;
}

.page-wrapper .common-drawer .drawer-body {
    width: calc(100% - var(--bb-layout-sidebar-width)) !important;
    height: calc(100% - var(--header-width));
    position: absolute;
    margin-top: var(--header-width);
    box-shadow: none;
    transition: all 0s;
}

.dropdown-logout .dropdown-menu {
    z-index: 9999 !important;
}


.page-wrapper .common-drawer .common-drawer-wrapper {
    height: 100%;
}

.page-wrapper .common-drawer .common-drawer-breadcrumb {
    height: var(--common-drawer-header-height);
    line-height: var(--common-drawer-header-height);
}

.page-wrapper .common-drawer .common-drawer-body {
    height: calc(100% - var(--common-drawer-header-height) - var(--bb-divider-margin-top) * 2 - 1px);
    overflow: auto;
}

.page-wrapper .common-drawer .common-drawer .drawer-body,
.page-wrapper .common-drawer .common-drawer .common-drawer .drawer-body {
    width: 100% !important;
    height: 100% !important;
    margin-top: 0;
}

.layout:has(.is-collapsed) .page-wrapper .common-drawer .drawer-body {
    width: calc(100% - var( --bb-layout-sidebar-collapse-width)) !important;
    transition: all .5s;
}


.layout:has(.layout-side:hover) .page-wrapper .common-drawer .drawer-body {
    width: calc(100% - var(--bb-layout-sidebar-width)) !important;
    transition: all .5s;
}

.layout:has(.is-collapsed) .page-wrapper .common-drawer .common-drawer .drawer-body,
.layout:has(.is-collapsed) .page-wrapper .common-drawer .common-drawer .common-drawer .drawer-body {
    width: 100% !important;
    transition: all .5s;
}


.layout:has(.layout-side:hover) .page-wrapper .common-drawer .common-drawer .drawer-body,
.layout:has(.layout-side:hover) .page-wrapper .common-drawer .common-drawer .common-drawer .drawer-body {
    width: 100% !important;
    transition: all .5s;
}


@media screen and (max-width: 768px) {
    .page-wrapper .common-drawer .drawer-body {
        width: 100% !important;
    }
}

::-webkit-scrollbar {
    width: 8px;
    background-color: #eff1f5;
}

::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c3c4c4;
    border: 2px solid #eff1f5
}