.main-body-container {
    overflow-y: auto;
    padding-left: 16px !important;
    padding-top: 16px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    height: calc(100vh - 88px);
}

    .main-body-container:has(.bg-block-logo) {
        background-color: aliceblue;
    }

.appbar-top {
    background-color: #f7f7f7 !important;
}

.appbar-bottom {
    background-color: #f7f7f7 !important;
    height: 24px;
    padding: 0;
}

.appbar-bottom-text {
    line-height: 24px;
}

.page-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 104px);
}
/*Main*/
.page-header {
    flex-shrink: 0;
}

.page-body {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 100%;
    width: 100%;
}


.page-footer {
    flex-shrink: 0;
}

/*Sub*/
.page-sub-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page-sub-header {
    flex: 0 0 auto;
}

.page-sub-body {
    flex: 1;
    overflow-y: auto;
}

.page-column-contaier {
    display: flex;
    height: 100%;
}

.page-column-10 {
    width: 10%;
}

.page-column-20 {
    width: 20%;
}

.page-column-30 {
    width: 30%;
}

.page-column-40 {
    width: 40%;
}

.page-column-50 {
    width: 50%;
}

.page-column-fill {
    flex: 1; /* Fill the remaining space */
}

/*TABS*/
.tab-content-scroll {
    height: calc(100% - 48px);
    overflow-y: auto;
    box-sizing: content-box;
}

.tab-content-scroll-100 {
    height: 100%;
    overflow-y: auto;
    box-sizing: content-box;
}

.page-columns-two-container {
    display: flex;
    height: 100%;
}

    .page-columns-two-container .left-column10 {
        flex: 0 0 10%;
        height: 100%;
        overflow: auto;
    }

    .page-columns-two-container .left-column20 {
        flex: 0 0 20%;
        height: 100%;
        overflow: auto;
    }

    .page-columns-two-container .left-column30 {
        flex: 0 0 30%;
        height: 100%;
        overflow: auto;
    }

    .page-columns-two-container .left-column40 {
        flex: 0 0 40%;
        height: 100%;
        overflow: auto;
    }

    .page-columns-two-container .left-column50 {
        flex: 0 0 50%;
        height: 100%;
        overflow: auto;
    }

    .page-columns-two-container .right-column {
        flex: 1;
    }


/*page rows*/
.page-two-rows-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .page-two-rows-container .top-10 {
        height: 10%; /* фиксированная высота — например, 60% контейнера */
    }
    .page-two-rows-container .top-20 {
        height: 20%; /* фиксированная высота — например, 60% контейнера */
    }
    .page-two-rows-container .top-30 {
        height: 30%; /* фиксированная высота — например, 60% контейнера */
    }
    .page-two-rows-container .top-40 {
        height: 40%; /* фиксированная высота — например, 60% контейнера */
    }
    .page-two-rows-container .top-50 {
        height: 50%; /* фиксированная высота — например, 60% контейнера */
    }
    .page-two-rows-container .top-60 {
        height: 60%; /* фиксированная высота — например, 60% контейнера */
    }

    .page-two-rows-container .top-70 {
        height: 70%; /* фиксированная высота — например, 60% контейнера */
    }

    .page-two-rows-container .bottom {
        flex-grow: 1; /* занимает всё оставшееся пространство */
    }