/*Mobile version*/
@media only screen and (max-width: 767px) {
    #modal-edit-profile .website-modal-content,
    #modal-add-edit-user .website-modal-content {
        width: 100% !important;
        height: fit-content !important;
    }

    #modal-add-edit-article .website-modal-content,
    #modal-search-articles .website-modal-content,
    #modal-menu .website-modal-content {
        width: 100% !important;
        height: 100vh !important;
    }

    #modal-search-articles .website-modal-content {
        /* margin-top: 0px !important; */
    }

    #modal-settings {
        padding-top: 15px;
    }

    #main-settings-container {
        flex-direction: column !important;
        overflow: scroll;
        scrollbar-width: none;
        scrollbar-height: none;
    }

    #article-category-container {
        width: 100% !important;
    }

    .settings-container {
        width: 95% !important;
    }

    .other-user-details {
        flex-direction: column !important;
    }

    #footer-links-container {
        flex-direction: column !important;
    }

    #desktop-tablet-header-links-container {
        display: none;
    }

    #desktop-tablet-categories-list-container {
        display: none;
    }

    #category-topic-version-container {
        flex-direction: column !important;
    }

    #table-of-contents-container {
        display: none;
    }
}

/*On tablet, hide header navigation buttons and show the navigation container.*/
@media only screen and (768px <= width) {
    #modal-edit-profile .website-modal-content {
        width: 80% !important;
    }

    #menu {
        display: none;
    }
}

/*While not yet on the desktop mode, the search input is hidden to gice space to the navigation container.*/
@media only screen and (width <=1023px) {
    #dashboard-page {
        flex-direction: column !important;
    }

    #dashboard-menus {
        flex-direction: row !important;
        width: fit-content;
    }

    .home-content-section {
        flex-direction: column !important;
    }

    .home-content-section div {
        width: 100% !important;
    }

    #table-of-contents-container {
        display: none !important;
    }

    #live-article-container {
        width: 100% !important;
        padding: 30px 20px !important;
    }

    #table-of-contents-button {
        display: block !important;
    }

    #modal-table-of-contents .website-modal-content {
        width: 95% !important;
        height: fit-content !important;
    }

    #article-content p iframe {
        width: 100% !important;
        height: auto !important;
    }
}

/*Between tablet and desktop modes...*/
@media only screen and (768px <= width <=1023px) {
}

/*On desktop mode...*/
@media only screen and (1024 <= width) {
}