/* ===================================body section==================================== */
.body-section {
    overflow: hidden;
    scrollbar-width: thin;
    overflow-y: auto;
}
::-webkit-scrollbar {
    height: 5px;
    width: 5px;
    background: #00000040;
}

::-webkit-scrollbar-thumb {
    background: #b6b6b676;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #a400003f;
}
/* ===================================header section==================================== */
/* =========================header section=================== */
#header-section {
    top: 0;
    height: var(--header-height);
    background-color: var(--header-bg);
    position: fixed;
    left: 0;
    right: 0;
    border-bottom: 1px solid #ffffff41;
    box-sizing: border-box;
    box-shadow: 10xpx 10px 10px var(--primary-bg);
    z-index: 1000;
}

/* ==============================main layout==================== */
#layout-main {
    position: fixed;
    top: var(--header-height);
    background-color: var(--main-content-bg);
    bottom: 0px;
    left: 0;
    right: 0;
    overflow-x: auto;
}

/* ================================sidbar======================== */
#layout-sidebar-menu {
    width: 0px;
    background: var(--sidbar-bg);
    position: fixed;
    left: 0;
    z-index: 1000;
    bottom: 0px;
    top: 0px;
    border-right: 1px solid #ffffff17;
    overflow: hidden;
    transition: all linear 0.3s;

}

.sidebar-show {
    width: var(--sidebar-weidth) !important;
}

#sider-header {
    height: var(--sidbar-heder-height);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}

#sider-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    top: var(--sidbar-heder-height);
    overflow-x: auto;
}

/* ==============fotter design==================== */
#layout-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    background-color: #fff;
}

/* media query */
@media only screen and (min-width: 600px) {
    :root {
        --sider-width:300px;
    }
    #layout-footer {
        display: none;
    }
    #layout-sidebar-menu {
        width: var(--sider-width);
    }
    #layout-main {
        left: var(--sider-width);
    }
    #header-section {
        left: var(--sider-width);
    }
}