@media screen and (max-width: 1024px) {

    html {
        max-height: 100%;
        height: initial;
    }

    .tb-theme-bg {
        background-color: #{{colour_feature}} !important;
    }

    .tb-theme-bg-dark {
        background-color: #{{colour_feature_dark}} !important;
    }

    /* nav {
        background-color: #{{colour_feature_dark}};
    } */

    #navigation-tab-container {
        display: none;
    }

    #navigation-quick-menu-container {
        width: 100%;
    }

    .quick-menu {
        height: 50px;
        width: 50px;
        line-height: 50px;
    }

    .quick-menu > span {
        padding-left: 0.5rem;
        font-size: 2rem;
    }

    .quick-menu > img {
        margin-top: 0.375rem;
        margin-left: 0.375rem;
    }
    
    #content {
        overflow-y: scroll;
        overflow-x: hidden;
        position: relative;
        height: calc(100% - 50px);
    }

    .document, .document.large {
        width: 100%;
        height: calc(100% - 2rem) !important;
        max-height: 100%;
        border-radius: 0px;
        box-shadow: none;
        border: none;
        border-top: 1px solid #{{colour_feature_dark}};
        padding-bottom: 0px;
    }

    .document-content-container {
        width: 100%;
        margin-left: 0px;
        border-radius: 0px;
        height: calc(100% - 2rem) !important;
    }

    .document-minimize {
        right: 2rem;
    }

    /* Need to overrite the rules */
    .document.maximized {
        left: 0px !important;
        top: 50px !important;
        width: 100% !important;

    }

    .tb-hide {
        display: none;
    }
}