@media only screen and (max-width: 720px){
    /* -- Main -- */
    .footer span{
        display: none;
    }

    .footer img{
        height: 1.2em !important;
        width: 1.2em !important;
    }

    .footer .container{
        padding: 0 !important;
    }

    .container{
        padding: 1em 1em !important;
        width: 100% !important;
    }

    .app {
        width: 100%;
        overflow-x: hidden;
    }

    main{
        width: unset;
    }

    header{
        padding: 1rem 1rem;
    }

    header span{
        display: none;
    }

    header .warnings{
        display: none;
    }

    header i{
        font-size: 1.6em !important;
    }

    header .siteLogo i{
        padding: 0;
    }

    header .warningsMobile{
        display: block;
    }

    .menuItem .areaName {
        margin-right: 1em;
    }

    #mainMenu {
        width: 100vw !important;
        left: -100vw !important;
        height: 88dvh;
        position: absolute;
    }

    body:has(.broadcast) #mainMenu {
        height: 88dvh;
    }

    #mainMenu.visible {
        left: 0 !important;
    }

    #mainMenu ul {
        width: 100vw !important;
    }

    .app:not(:has(#mainMenu.visible)) .container:has(main) {
        left: 0vw !important;
    }

    .dx-overlay-content.dx-inner-overlay.dx-context-menu.dx-menu-phone-overlay.dx-menu-base{
        width: 100% !important;
        position: absolute !important;
        left: 0 !important;
        top: 7dvh !important;
        transform: none !important;
        z-index: 99;
    }

    .dx-submenu .dx-menu-items-container{
        width: 100% !important;
    }

    .subMenuBackIcon {
        background-color: var(--primary);
        color: white;
        border-radius: .25em;
        padding: .5em;
    }

    .dx-item.dx-menu-item.dx-menu-item-expanded .dx-submenu.dx-scrollable.dx-visibility-change-handler.dx-scrollable-vertical.dx-scrollable-native.dx-scrollable-native-android.dx-scrollable-scrollbar-simulated {
        transform: translate(0, 7dvh) !important;
    }

    .dx-submenu, .dx-submenu>.dx-scrollable-wrapper>.dx-scrollable-container{
        height: 88dvh !important;
        width: 100dvh !important;
        transform: none !important;
        
    }

    .dx-submenu .dx-submenu {
        margin-top: 7dvh !important; /* header height */
    }

    .dx-datagrid-search-panel {
        margin: 0 !important;
    }
    /* ---------- */


    /* -- Login -- */
    .loginContainer{
        flex-direction: column;
        padding: 2em 0;
        box-shadow: none;
    }

    .loginContainer .logo{
        margin: 0;
        width: 100%;
        margin-bottom: 2em;
    }

    .loginContainer .logo img{
        width: 40% !important;
    }

    .loginContainer h2{
        padding: 0 2em;
    }

    .loginContainer form{
        width: 70%;
    }

    .formPanel {
        border-radius: .25em;
    }

    .logoPanel {
        padding: 2em 2em;
        flex: 1;
    }

    .formPanel {
        padding: 3em 2em;
        flex: 1;
    }
    /* ----------- */

    /* -- Popups -- */
    .dx-overlay-content.dx-popup-normal {
        max-width: 90vw !important;
        width: 90vw !important;
    }

    .dx-popup-fullscreen .dx-toolbar-items-container {
        display: flex;
    }
    /* ------------ */

    /* -- datagrid -- */
    .dx-datagrid-header-panel .dx-toolbar .dx-toolbar-items-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100% !important;
    }

    .dx-datagrid-header-panel .dx-toolbar .dx-toolbar-items-container .dx-toolbar-after, .dx-toolbar .dx-toolbar-items-container .dx-toolbar-before {
        position: static !important;
        padding: .25em 0 !important;
    }
    /* -------------- */

    /* -- quickbar (last visited) -- */

    #lastVisitedWidgetWrapper {
        flex-direction: column;
    }

    .lastVisitedItem {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 0;
        margin-top: .5em;
        display: flex;
        align-items: center;
        justify-content: space-between;   
    }

    .lastVisitedItemGroup {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
    }

    .lastVisitedItemArea {
        font-size: 1em;
        background-color: var(--disabled);
        padding: .25em .5em;
        border-radius: .5em;
        margin-left: .75em;
        margin-bottom: 0;
        color: var(--dark);
    }

    .lastVisitedItem:last-of-type {
        margin-bottom: 1.5em;
    }

    /* ----------------------------- */

    /* -- filter -- */
    .filter {
        height: unset !important;
    }

    .filter .dx-widget.dx-collection {
        flex-wrap: wrap;
    }
    /* ------------ */

    /* -- tab panel -- */
    .dx-tabpanel-container .dx-item-content.dx-multiview-item-content {
        overflow: auto;
    }
    /* --------------- */

    .dx-toolbar-items-container .dx-toolbar-after {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        row-gap: .5em;
    }
}