/******************************  Mini Leptop / Tabs  / Mobile *********************************/


@media (max-width: 1200px) {

    .navbar-vertical.navbar-expand-xs {
        width: 0;
        background-color: #fff;
    }

    #sidemenu-btn {
        display: block;
    }

    #sidemenuclose-btn {
        display: block;
        margin-left: 32px;
        font-size: 30px;
    }

    .sidenav-header {

        justify-content: space-between;
    }

    .navbar>.container,
    .navbar>.container-fluid,
    .navbar>.container-sm,
    .navbar>.container-md,
    .navbar>.container-lg,
    .navbar>.container-xl,
    .navbar>.container-xxl {
        justify-content: start !important;
        padding: 0 !important;
        flex-direction: column;
        align-items: start !important;
        row-gap: 20px;
    }

    .container-fluid {
        padding: 0 10px !important;
    }

    .row {
        row-gap: 10px;
    }

    .row.dashboard-row {
        padding: 0 16px;
    }

    .row.dashboard-row .col-xl-4 {
        margin-bottom: 0 !important;
    }

    h3 {
        font-size: 18px !important;
    }

    h4 {
        font-size: 18px !important;
    }

    h6 {
        font-size: 12px !important;
    }

    p {
        font-size: 12px;
    }

    .btn {
        font-size: 12px !important;
    }

    .btn.add-school {
        margin: 4px 0 0 !important;
    }

    .nav-link .fa-user,
    .nav-link .fa-school,
    .nav-link .fa-chart-pie {
        border: 1px solid #d2d6da;
        padding: 10px;
        border-radius: 4px;
    }

    .logo {
        column-gap: 10px;
    }

    .logo img {
        height: 32px;
    }

    .logo h2 {
        font-size: 11px;
        margin-bottom: 4px;
    }

    .logo h1 {
        font-size: 12px;
    }

    .logoCon {
        display: flex;
        align-items: center;
        column-gap: 20px;
    }

    .sidenav-header .fa-xmark {
        margin-right: 20px;
        font-size: 20px;
    }

    .navbar .nav-link {
        display: none;
    }

    .pageTitle {
        font-size: 24px;
        margin: 0 8px 16px;
    }

    .navbar {
        margin: 16px 0;
        padding-bottom: 16px !important;
    }

}