@media (min-width:787px) and (max-width:1024px) {
    * {
        font-size: 12px;
    }

    h1 {
        font-size: 22px;
        font-weight: 700;
    }

    h2 {
        font-size: 18px;
        font-weight: 700;
    }

    h3 {
        font-size: 16px;
        font-weight: 700;
    }

    h4 {
        font-size: 14px;
        font-weight: 700;
    }

    h5 {
        font-size: 13px;
        font-weight: 700;
    }

    h6 {
        font-size: 12px;
        font-weight: 700;
    }

    * table.table-responsive{
        overflow-x: auto;
        text-wrap: nowrap;
    }
    /* 
    .layout{
        display: none;
    } */
    .aside {
        display: none;
        position: fixed;
        inset-inline-start: 0;
        inset-block-end: 0;
        inset-block-start: 0;
        z-index: 9000;
        block-size: 100vh;
        box-shadow: 0 5px 10px rgba(0, 0, 0, .8);
    }

    .main {
        inline-size: 100%;
        block-size: 100%;
    }

    .layout .main .container {
        padding: 0 5%;
    }

    .layout.active .aside {
        display: block;
        inline-size: 30%;
        /* grid-template-rows: 60px auto; */

    }

    .layout.active .aside .menu span,
    .layout.active .aside .userinfo label {
        display: block;
    }

    .layout.active .main {
        inline-size: 100%;
    }

}