.admin-wrap {
    background-color: #eaeff4;
    display: grid;
    grid-template-columns: clamp(240px, 10vw, 450px) minmax(1020px, 1fr);
    grid-template-rows: auto minmax(851px, 1226px);
    grid-template-areas:
        "sidebar header "
        "sidebar main ";
    height: 100%;
    // font-size: 1.8rem;


    .admin-header {
        grid-area: header;
        @include flex-layout(flex, center, space-between);
        padding: 1rem 3rem;
        border-bottom: 1px solid var(--tk-gray-30);

        .title-zone{
            @include flex-layout(flex, flex-end, flex-start); 

            .page-title {
                font-size: var(--tk-fz-title-xlg);
                font-weight: 700;
                margin-right: 1rem
            }
        }

        .info-wrap {
            .info {
                @include flex-layout(flex, center, flex-end);
                .info-name{
                    padding: .8rem
                }
                ul.info-btn{
                    @include flex-layout(flex, center);
                    li{
                        @include flex-layout(flex, center, center);
                        padding: 1rem;
                    }
                }
            }
        }

    }

    .side-bar{
    // .sub-menu {
        grid-area: sidebar;
        height: 100%;
        background-color: #f7f9fb;
        border-right: 1px solid var(--tk-gray-30);
        overflow-y: auto;
        
        .logo{
            padding: 1rem;
            font-size: var(--tk-fz-title-lg);
            font-weight: 700;
            text-align: center;
        }

       
        .menu-zone{
            p{
                font-size: var(--tk-fz-title-sm);
                font-weight: 700;
                text-align: center;
                border-bottom: 3px solid var(--tk-gray-70);
                padding: 1rem;
            }
            ul.side-menu {
                li {
                    cursor: pointer;
                    padding: 1rem 2rem;
                }
    
                li.sub-active {
                    background-color: var(--tk-primary);
                    color: var(--tk-white);
                    font-weight: 700;
                }
            }
        }
        

    }

    .main-wrap {
        grid-area: main;
        width: 100%;
        height: 100%
    }
}