/* 768px and down */
@media only screen and (min-width: 320px) and (max-width: 640px) {
    .vue-notification-group{
        width:100vw !important;
        left:0 !important;
        display:none !important;
    }

    #sidebar.subSidebarExpanded{
        max-width:100vw !important;
        margin-top:0px !important;
    }
    #sidebar .primary{
        max-width:50% !important;
    }
    #sidebar .secondary{
        max-width:50% !important;
    }

    #sidebar .primary > div{
        max-width:100% !important;
    }
    #sidebar .primary > div >div{
        max-width:100% !important;
    }

    #sidebar .secondary > div{
        width:50vw !important;
    }
    #sidebar .secondary > div >div{
        max-width:100% !important;
        margin-top:40px !important;
    }

    #sidebar .secondary > div >div>ul{
        padding-top:0 !important;
    }
    #sidebar .secondary > div >div>button{
        right:10px !important;
    }

    #sidebar.subSidebarExpanded .sub-nav-container{
        max-height:calc(100vh - 180px) !important;
    }

    #header-container{
        flex-wrap:wrap !important;
        height:auto !important;
        width:100vw !important;
        position: relative !important;
    }
    #header-container>a:first-child{
        flex-basis:80% !important;
    }
    #header-container>button.menu-button{
        flex-basis:20% !important;
        margin-left:0px !important;
        text-align: right !important;
    }
    #header-container>a:first-child>img{
        min-width:100px;
        height:36px;
    }
    #header-container .client-dropdown{
        padding-left:0px !important;
        font-size: 14px !important;
    }
    #header-container > :nth-child(3){
        font-size: 14px !important;
        flex-basis:100% !important;
    }
    #header-container > :nth-child(3) > .divider{
        height:28px !important;
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
    #header-container .client-dropdown>div{
        margin-left:0px !important;
    }
    #header-container > :nth-child(4){
        margin:0 !important;
        flex-basis:30% !important;
        align-items:flex-start !important;
    }
    #header-container > :nth-child(4) > div{
        margin-left: 11px !important;
    }
    #header-container > :nth-child(5){
        flex-grow: 1 !important;
    }

    #content{
        padding-top:0px !important;
    }

    #main-content{
        padding: 0px !important;
        margin-top:20px !important;
    }

    .container{
        max-width:100%;
    }
}


/* 768px and down */
@media only screen and (max-width: 767px) {
    #main-content{
        margin-top:100px !important;
    }
    #toolbar-container{
        max-width:100vw !important;
    }
    .search-bar{
        height:auto !important;
    }
}