$layout-title-height: 30px;
$layout-title-fontsize: 16px;
$layout-padding-horizontal: 2%;
$layout-top-height: 70%;
$layout-bottom-height: 30%;
$sidebar-width: 33%;
$section-padding: 10px;
$white-color: #FFFFFF;

.layout_wapper {
    width: 100%;
    height: 100%;
    font-size: 12px;


    .layout_content {
        @extend .layout_wapper;
        display: flex;
        flex-direction: column;
        color: $white-color;

        .layout_m10 {
            padding: $section-padding $section-padding $section-padding 0;
        }

        .layout_title {
            background: url(@/assets/images/largeScreen/preview.png) center/100% 100%;
            height: $layout-title-height;
            width: 90%;
            line-height: $layout-title-height;

            span {
                padding-left: $section-padding * 3;
                font-size: $layout-title-fontsize;
            }
        }

        .layout_top {
            width: 100%;
            height: $layout-top-height;
            display: flex;
            padding: 0 $layout-padding-horizontal;

            .layout_top_left {
                width: 33%;

                .layout_top_left_one {
                    width: 100%;
                    height: 55%;
                }

                .layout_top_left_two {
                    width: 100%;
                    height: 45%;
                }
            }

            .layout_top_center {
                width: $sidebar-width;
                height: 100%;
                margin: 0 $layout-padding-horizontal;
            }

            .layout_top_right {
                width: 33%;

                .layout_top_right_one {
                    width: 100%;
                    height: 55%;
                }

                .layout_top_right_two {
                    width: 100%;
                    height: 45%;
                }
            }
        }

        .layout_bottom {
            padding-left: $layout-padding-horizontal;
            width: 100%;
            height: $layout-bottom-height;
        }
    }
}

.layout_btn_back {
    position: absolute;
    top: 50%;
    right: $layout-padding-horizontal;
    z-index: 9;
}

::-webkit-scrollbar {
    width: 5px;
    height: 6px;
    background: #f3f3f3;
}

// ::-webkit-scrollbar-thumb {
//   border-radius: 6px;
//   background: #e3e3e3;
// }

// ::-webkit-scrollbar-track {
//   border-radius: 6px;
//   background-color: transparent !important;
// }