body {
    overflow-x: hidden;
}
header {
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
}
#tabs .tab {
    cursor: pointer;
    padding-bottom: 16px;
    border-bottom: 2px solid transparent;
}
#tabs .hide {
    display: none;
}
#tabs .show {
    display: block;
}
#tabs .active {
    font-weight: 700;
    border-bottom: 2px solid #009ef7;
}
.siderbar__lists li {
    cursor: pointer;
}
main {
    min-height: 800px;
}
.middle__content {
    position: relative;
    overflow: hidden;
}

.middle__content .tab__middle-content {
    transform: translateX(-100px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}
.sidebar__right {
    transform: translateX(100px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}
.middle__content .tab__middle-content.active,
body.tab-active .sidebar__right {
    transform: translateX(0px);
    opacity: 1;
    visibility: visible;
}
.mobile__header {
    display: none;
}
@media screen and (max-width: 1000px) {
    .site__header {
        display: none;
    }
    .mobile__header {
        display: flex;
    }
    .middle__content {
        width: 100%;
    }
    .sidebar__right {
        transform: translateX(0px);
        opacity: 1;
        visibility: visible;
    }
    .sidebar__right,
    .sidebar__left {
        position: fixed;
        right: 0;
        top: 58px;
        height: 100vh;
        width: 85%;
        right: -85%;
        box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease-in-out;
        z-index: 14;
    }
    .sidebar__left {
        right: auto;
        left: -85%;
    }
    .sidebar__left.active {
        left: 0;
    }
    .sidebar__right.active {
        right: 0;
    }
    .menu__bar span,
    .setting__bar span {
        font-size: 32px;
        margin-top: 3px;
        cursor: pointer;
    }

    .drawer__overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 12;
        transition: all 0.3s ease-in-out;
        opacity: 0;
        visibility: hidden;
    }
    .drawer__overlay.active {
        opacity: 1;
        visibility: visible;
    }
}
@media screen and (max-width: 600px) {
    .flex-row-fluid {
        width: 60px;
    }
}