html {
    overflow: hidden;
    width: 100vw;
}

body {
    /* 100vh is the browser-bars-hidden height. The document never scrolls
       (html is overflow:hidden, body is fixed), so the bars never retract and
       100vh overshoots the screen. dvh measures what is actually visible.
       The vh line stays as the fallback for browsers without dvh
       (pre Chrome 108 / Safari 15.4 / Firefox 101). */
    height: 100vh;
    height: 100dvh;
    position: fixed;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

/* body is now dvh-tall, so the map — the only in-flow body child — must shrink
   with it. Left at 100vh it overhangs by the toolbar height and turns body into
   a scroll container, letting a stray drag slide the map under the fixed UI. */
#mapDiv {
    height: 100vh;
    height: 100dvh;
}


a#helpLink {
    display: none;
}


/**** marker popup ****/
table#markerPopup_headeTable {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;

    background: #000;
    color: #fff;
    padding: 5px;
    font-size: 14px;
}

div#markerPopup_backArrow {
    color: #999;
    font-size: 30px;
    font-weight: bold;
}

div#markerPopup_mapName {
    padding: 4px 0px;
}

div#markerPopup_content .tabNames {
    background: #444;
    float: left;
    border-bottom: 2px solid #4D90FE;
    width: 100%;

    position: fixed;
    top: 0;
    left: 0px;
    z-index: 1;
}

div#markerPopup_content .tabNames .tabName {
    padding: 10px 7px;
    color: #fff;
    border: 0px;
    float: left;
}

div#markerPopup_content .tabNames .delimiter {
    padding: 0px;
    width: 10px;
}

div#markerPopup_content .tabNames .selected {
    border-bottom: 2px solid #4D90FE;
}

/****  msg ****/
div#mobile_msg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 1;
    overflow: hidden;
    background: #222;
    border: 1px solid #333;
    border-top-width: 0;
    border-left-width: 0;
    font-size: 11px;
    color: #e0e0e0;
    width: 100%;
    font-size: 16px;
    padding: 5px;
}

div#mobile_icon_fullscreen {
    position: fixed;
    top: 10px;
    right: 0px;
    z-index: 1;
}

div#mobile_icon_fullscreen::before {
    font-size: 30px;
    padding: 8px 13px;

    display: block;
    color: #fafafa;
    text-align: center;
    background: #222;
    border-radius: 4px 0px 0px 4px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.6s ease;
}


div#mobile_icon_myloc {
    position: fixed;
    top: 60px;
    right: 0px;
    z-index: 1;
}

div#mobile_icon_myloc::before {
    font-size: 30px;
    padding: 8px 13px;

    display: block;
    color: #fafafa;
    text-align: center;
    background: #222;
    border-radius: 4px 0px 0px 4px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: 0.6s ease;
}

div#mobile_icon_parisloc {
    position: fixed;
    top: 110px;
    right: 0px;
    z-index: 1;
    background-color: #222;
    width: 51px;
    height: 46px;
    border-radius: 4px 0px 0px 4px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

div#mobile_icon_parisloc div {
    width: 100%;
    height: 80%;
    background-image: url(/images/paris-icon.png);
    background-position: center center;
    background-size: contain;
    filter: invert(100%);
    padding: 0% 0px;
    margin: 10% 0;
}

/************* side-menu ************/
side-menu, side-menu.v6-side-window.main.v6-opened {
    transition: none;
    animation: none;
}

side-menu, side-menu.v6-side-window.main.v6-opened:not(.shrink) {
    width: 100vw;
    max-width: 100vw;

    /* dvh, not vh — see body above. With vh the menu is taller than the visible
       screen, so the tail of every tab list sits behind the browser bars and the
       list hits scrollTop === scrollMax with items still cut off.
       No max-height: the 906px cap left a dead gap on screens taller than that.
       (The closed/.shrink state still computes 906px from v6.css:438, which only
       this selector outranks — harmless, it sits off-screen at left:-370px.) */
    height: 100vh;
    height: 100dvh;
}

side-menu:not(.shrink)>div.tab>div.teaser::before {
    display: none;
}

side-menu:not(.shrink)>div.tab {
    overflow-y: auto;
}

side-menu>div>div.title>.fa.close-side-menu-btn {
    display: block;
    margin-left: 15px;
}

side-menu div.tab>div.title div>span.tooltip-text {
    top: 45px;
    left: unset;
    right: 0px;
}

/****** marker info ******/
marker-info.v6-fixed.v6-side-window.right {
    top: unset;
    /* bottom: 0; */
    left: 0;
    right: unset;
    width: 100vw;
    max-width: 100vw;
    height: 200px;
    display: block;
    bottom: -100vh;
    transition: all 0.5s ease-in;
}

marker-info.v6-fixed.v6-side-window.right.v6-opened {
    bottom: 0;
}

marker-info.v6-fixed.v6-side-window.right.v6-opened:not(.pullup) info-image-carusel,
marker-info.v6-fixed.v6-side-window.right.v6-opened:not(.pullup) section.tags,
marker-info.v6-fixed.v6-side-window.right.v6-opened:not(.pullup) tabs-editor {
    display: none;
}

marker-info.v6-fixed.v6-side-window.right.v6-opened:not(.pullup) .mobile.pullup {
    display: block;
}

marker-info.v6-fixed.v6-side-window.right.v6-opened:not(.pullup)>div.x {
    top: 32px;
}

marker-info.v6-fixed.v6-side-window.right.v6-opened.pullup {
    height: 100%;
    max-height: 100%;
    transition: none;
}

marker-info.v6-fixed.v6-side-window.right.v6-opened.pullup div.x::after {
    font-size: 2.5rem;
    background: #222;
}



/* */
@keyframes side-window-right-animation-open {
    0% {}

    20% {}

    80% {
        /* transform: translateX(calc(100%+15px)); */
    }

    100% {}
}

@keyframes side-window-right-animation-close {
    0% {}

    20% {}

    80% {}

    100% {}
}