@media (max-width: 767px) {
    *{        
        font-size: 1rem;
    }
    .sidebar-top, .side-search, .right-panel {
        display: none;
    }
    .screen-767 {
        display: block !important;
    }
    .screen-max {
        display: none !important;
    }
    .sidebar {
        position: fixed;
        top: 6vh;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        border-right: none;
        backdrop-filter: blur(4px);
        background-color: unset;
        padding: 0;
        display: none;
        box-shadow: unset;
    }    
    .nav-tree {
        background-color: var(--bg-primary);
        padding-right: 2em;
        padding-left: 1.5em;
        border-right: var(--border-default);
        padding-top: 6vh; padding-bottom: 1em;
        width: 70vw;
    }
    .main-nav {
        align-items: center;
        background-color: var(--bg-secondary);
    }
    .search-bar {
        justify-content: center !important;
    }
    .content-body {
        padding: 1em;
        box-shadow: var(--box);
    }
    .modal-content {
        width: 90vw;
    }
    .popup {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .popup.modal-content {
        width: 100vw;
    }
    .popup .popup-title {
        display: none;
    }
    .popup .popup-content {
        padding: 0;
        margin: 0.5em 0;
    }
    .card-meta > * {
        flex: 1;
    }
    .card-meta button span {
        display: none;
    }
    .card-meta button i {
        margin: 0;
    }
}