@media (max-width: 1200px) {
    .r-panel.shown + .map-view .minimized-container { flex-direction: column; }
}

@media (max-width: 840px) {

    :root {
        --dialog-paddings: 3px;
        --srch-paddings: 5px;
    }

    .ws-holder { flex-direction: column; max-width: 100%; }
    .r-panel, .vertical .r-panel { order: 2; max-height: 0; max-width: 100%; padding-bottom: 0; padding-right: var(--ws-paddings); padding-left: var(--ws-paddings); }
    .r-panel.shown, .vertical .r-panel.shown { max-height: 40vh; height: 100%; max-width: 100%; padding-bottom: var(--ws-paddings);  }
    .map-view { order: 1; max-width: 100%; }
    .r-panel.shown + .map-view .minimized-container { flex-direction: row; }
    .vertical .r-panel-holder { flex-direction: unset; }
    .r-panel-holder { flex-direction: row; }
    .r-panel-holder .dialog-box.closed { max-width: 0; }
    .no-search-message.hided { max-width: 0; }

    .map-holder { padding-top: 54px; }
    .map-view .minimized-container { flex-direction: row !important; }
    .map-view:before { top: 54px; height: calc(100% - 54px - var(--map-paddings) - var(--ws-paddings)); }

    .dialog-box.searchBox { top: 0; left: var(--ws-paddings); max-width: calc(100% - 2 * var(--ws-paddings)) !important; width: 100%;  }
    .dialog-box.searchBox .dialog-container { border-radius: 4px 4px 0 0; box-shadow: none; }

    #mmSplitVertical, #mmSplitHorizontal { display: none; }
}

@media (max-width: 767px) {
    .tabs { display: flex; flex: 0 0 40px; }
    .vertical .r-panel-holder, .r-panel-holder { flex-direction: column; }

    .r-panel .dialog-box:not(.active) { max-height: 0; }
}

@media (max-width: 660px) {

    .dialog-intro .dialog-box-holder { height: 100%; }
    .dialog-intro .dialog-body { flex-direction: column; height: 100%; }

    .dialog-intro .dialog-body .intro-logos .hcs-logo { margin-top: 0; width: clamp(80px, 18vw, 120px); }
    .dialog-intro .dialog-body .intro-logos .gis-logo { position: absolute; bottom: 10px; z-index: 1;}
    .dialog-intro .dialog-body .intro-body { padding: 30px 0 70px; }
    .dialog-intro .dialog-body .intro-body:after { position: absolute; z-index: 0; content: ''; width: 100%; height: 60px; bottom: 0; left: 0; background-color: var(--c-sand-04); }

    .dialog-intro .intro-welcome { height: 100%; overflow: hidden; }
    .dialog-intro .intro-text { max-height: unset; }
    
    #dlgIntro.dialog-intro {
        top: 15px !important;
        left: 15px !important;
        right: 15px;
        bottom: 15px;
        transform: none !important;
        max-width: none !important;
        max-height: none !important;
        width: auto !important;
        height: auto !important;
    }
    
    .dialog-intro.closed {
        transform: none !important;
        top: 15px !important;
    }

}

@media (max-width: 645px) {
    #tabLayers, #tabLegend { display: flex; }
    .workspace { flex-direction: column; padding-left: 0; padding-top: 0; width: 100%; max-width: 100vw; }
    .ws-holder { max-width: 100vw; }
    .main-nav { flex-direction: row; padding-bottom: 0; max-width: 100%; width: 100%; }
    .main-menu { flex-direction: row; }
    .sign-menu { display: none; }

    /* Ensure all child elements respect viewport width */
    .map-view, .r-panel, .r-panel-holder, .dialog-box, .dialog-container {
        max-width: 100% !important;
    }

    #dlgLegends .dialog-title-bar, #dlgLayers .dialog-title-bar { display: none; }
    .r-panel .dialog-box.active .dialog-body { max-height: unset !important; }
    .legend-item:not(.hidden) { min-height: fit-content; }
    #dlgLegends .dialog-container { max-width: 100%; }
    .r-panel.shown { max-height: 40vh; max-height: 40dvh; }

    #mmByAddress, #mmLayers, #mmLegends, #mmPrint, #mmLegends + .divider, #btnFindByClick { display: none; }
    .menu-item.divider { min-width: 1px; height: 100%; }

    .app { min-width: 60px; max-height: 55px; height: 100%; padding-left: calc( 2*var(--ws-paddings) + 10px ); padding-right: var(--ws-paddings); display: flex; }
    .logo { padding: 5px 0 0; display: flex; justify-content: start; align-items: center; }
    .app .logo img { margin-top: 0; height: calc(100% - 10px); }

    .r-panel, .vertical .r-panel { max-height: calc(42px + var(--ws-paddings)); padding-bottom: var(--ws-paddings); overflow: hidden; }
    .tabs.hidden { max-height: unset; }
    .tabs.hidden #tabSchools, .tabs.hidden #tabDirections, .no-search-message { display: none; }

    #mobileLogo { display: block; }
    #mainNavLogo { display: none; }

    .location .hint { display: none; }
    .r-panel .dialog-box .dialog-container .dialog-body .schools-list { overflow: visible;}
    .r-panel .layer-item { padding: 8px 16px; }
    .r-panel .legend-container, .r-panel .legend-item.single { padding-left: 16px; padding-right: 16px; }
    .r-panel .legend-item.category .legend-container, .label-control { padding-left: 44px; }
    .r-panel .legend-item.category.single .legend-container { padding-left: 0px; }

    #dlgSearchResults:before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background-color: var(--c-grey-04); z-index: 1; }
    #dlgSearchResults .dialog-title { transition: var(--trans-func); transition-property: max-height; will-change: max-height; max-height: 0; }
    #dlgSearchResults.pending .dialog-title { max-height: 60px; }
    #dlgDirections .dialog-title-bar { background-color: var(--c-white-05); border-bottom: 1px solid var(--c-grey-04); }
    .r-panel { --map-paddings: 0px; }
    .dialog-box.pending .dialog-box-holder:after { top: 1px; left: 1px; right: 1px; bottom: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }

    .dialog-box.searchBox .input-box { padding-right: 4px; }
    #dlgLegends .legend-item.category:first-child .legend-container { padding-top: 8px; }
}

@media (max-width: 450px) {
    .r-panel { --ws-paddings: 0px; }
    .map-view { --ws-paddings: 0px; --map-paddings: 0px;}
    .main-nav { --ws-paddings: 5px; }
    .map-holder { padding-top: 49px; border: none; }
    .map-view:before { top: 49px; height: calc(100% - 49px); }
    .r-panel-holder { border-width: 1px 0 0; border-radius: 0; }
    .r-panel.shown .tabs { border-radius: 0; }
    .dialog-box.searchBox .dialog-container { border-width: 1px 0; border-radius: 0; }
}

@media (max-width: 400px) {
    .dialog-intro .dialog-body .intro-body .control-bar .continue-panel { gap: 7px; }
}


/*@media screen and (orientation: landscape) and (max-device-width: 932px) {
  body {
    position: absolute;
    
    transform: rotate(-90deg); 
    transform-origin: top left;
    
    
    width: 100vh;
    height: 100vw;
    
    
    top: 100%;
    left: 0;
    
    overflow-y: auto;
  }
}*/