:root {
    --sidebar-translation: calc(0px - var(--sidebar-width));
}

.layout-grid-main {
    display: grid;
    transform: translate3d(0px, 0px, 0px);
}

.layout-grid-main-right {
    grid-column: 1;
}

.layout-grid-content {
    display: grid;
    grid-template-columns: 100%;
}

.layout-grid-content-top {
    grid-row: 1;
    grid-column: 1;
    background-color: var(--bg-dark-1);
    height: var(--header-height);
}

.layout-grid-content-middle {
    grid-row: 2;
    grid-column: 1;
    overflow-y: auto;
}

.layout-body-content {
    display: grid;
    height: calc(100vh - var(--header-height));
}

.layout-sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    position: fixed;
    z-index: 1000;
}

    .layout-sidebar.translate {
        transform: translate3d(var(--sidebar-translation), 0px, 0px);
    }


.max-width-sm {
    max-width: 750px;
}

.max-width-md {
    max-width: 970px;
}

.max-width-md {
    max-width: 970px;
}

.max-width-lg {
    max-width: 1170px;
}