@media all and (max-width: 699px), (max-height: 499px) {
    /* Add this CSS rule to improve sharpness of SVG rendering */
    svg {
        image-rendering: auto !important; /* Default rendering for vector images (anti-aliasing) */
        -webkit-image-rendering: auto !important; /* For WebKit-based browsers (Chrome, Safari) */
        image-rendering: -moz-crisp-edges !important; /* For Firefox */
        image-rendering: optimizeQuality !important; /* For better quality in Chrome and Firefox */
    }

    #mobile-menu {
        background-color: #fff;
        display: none;
        left: 0;
        margin: 0;
        position: absolute;
        top: 52px;
        height: 100%;
        width: 200px;
        z-index: 100;
        border-right: solid 1px #f5f5f5;
    }

        #mobile-menu ul {
            margin: 0;
            padding: 0;
        }

            #mobile-menu ul > li {
                border-bottom: solid 3px #f5f5f5;
                border-collapse: collapse;
                color: #36474f;
                display: block;
                font-size: 14px;
                height: 40px;
                line-height: 40px;
                list-style: none;
                width: 100%;
                font-family: Asap Medium;
                cursor: pointer;
            }

                #mobile-menu ul > li > div {
                    padding: 26px / 2 5px;
                }

            #mobile-menu ul img {
                width: 20px;
                height: 15px;
                margin-right: 10px;
                margin-left: 5px;
            }

    #banner {
        width: calc(100% - 10px);
        padding: 5px;
    }

        #banner > div {
            padding: 0;
        }

        #banner #logo {
            display: none;
        }

        #banner #menu-container {
            display: table-cell;
            padding: 0;
        }

        #banner #goto-itinerary-pc {
            display: none;
        }

        #banner #search-container {
            padding-left: 5px;
            width: calc(100% - 15px);
            display: inline-block;
        }

        #banner:before {
            display: none;
        }

    #share-container {
        display: none;
    }

    #refresh-container {
        /*    display: block;*/
    }

    #basemap-toggle .basemapImage {
        height: 28px;
        width: 28px;
    }

    #help-widget:not(.expanded),
    #trafic-widget-red:not(.expanded),
    #cookie-widget:not(.expanded) {
        display: none;
    }

    #map_zoom_slider {
        right: 10px;
    }

    .esri-zoom {
        display: none;
    }

    body:not(.iframe) #map_zoom_slider {
        display: none;
    }

    #widgets-sidebar {
        top: 0;
        left: 0;
        display: none;
    }

        #widgets-sidebar .left-widget:not(.active) {
            display: none;
        }

        #widgets-sidebar.opened {
            width: calc(100% - 55px);
            max-width: calc(100% - 55px);
            max-height: 100%;
            height: 100%;
            display: block;
        }

            #widgets-sidebar.opened .left-widget.active {
                height: 100%;
                width: 100%;
            }

        #widgets-sidebar .left-widget {
            margin-bottom: 0px;
        }

        #widgets-sidebar .left-widget-title {
            margin-top: -1px;
            padding: 10px;
            display: none;
            position: relative;
        }

            #widgets-sidebar .left-widget-title.ui-state-disabled {
                opacity: 1;
                cursor: auto !important;
                pointer-events: initial;
            }

        #widgets-sidebar .active > .left-widget-title {
            display: block;
        }

        #widgets-sidebar .left-widget-content {
            height: 100%;
            max-height: 100% !important;
            overflow: initial;
        }

            #widgets-sidebar .left-widget-content .widget-body {
                height: calc(100% - 60px);
                overflow: auto;
            }

    .itinerary-mode #banner {
        display: none;
    }

    .itinerary-mode #widgets-sidebar {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

        .itinerary-mode #widgets-sidebar .left-widget-title {
            display: none;
        }

    .itinerary-mode #goto-itinerary-mobile {
        display: none;
    }

    .itinerary-mode.resume #widgets-sidebar,
    .itinerary-mode.detail #widgets-sidebar {
        display: block;
    }

        .itinerary-mode.resume #widgets-sidebar #route-modes,
        .itinerary-mode.detail #widgets-sidebar #route-modes,
        .itinerary-mode.resume #widgets-sidebar .route-form-advanced-container,
        .itinerary-mode.detail #widgets-sidebar .route-form-advanced-container,
        .itinerary-mode.resume #widgets-sidebar .route-footer,
        .itinerary-mode.detail #widgets-sidebar .route-footer {
            display: none;
        }

    #widgets-bottombar .widgets-container .widget-container .widget.widget-collapsed {
        display: none;
    }

    .bottom-widget,
    .bottom-widget.expanded {
        width: 100%;
        right: 0;
        left: 0;
    }

    .esriScalebar {
        bottom: 60px;
        display: none;
    }

    #logoMobile {
        display: block;
        position: absolute;
        bottom: 0;
        left: 20px;
        z-index: 101;
    }

        #logoMobile img {
            height: 40px;
            width: 100px;
        }

    #goto-itinerary-mobile {
        display: block;
    }

        #goto-itinerary-mobile .goto-itinerary {
            height: 40px;
            width: 40px;
            box-shadow: 2px 2px #EEE;
        }

    .cookie-banner,
    .cookie-inform-and-ask {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
    }

    #help-button,
    #trafic-button-red,
    #cookies-button {
        display: block;
    }

        #trafic-button-red .trafic {
            border: 2px solid #ef1f74;
            border-radius: 5px;
        }

    #trafic-button-red,
    #goto-itinerary-mobile,
    #help-button,
    #location-button,
    #home-button,
    #custom-ui-right,
    #basemap-toggle,
    #cookies-button {
        right: 10px;
    }

    #location-button {
        bottom: 266px;
    }

    #custom-ui-right,
    .esri-home .esri-widget--button,
    #home-button {
        bottom: 222px !important;
    }

    #custom-ui-left,
    #basemap-toggle {
        bottom: 189px !important;
    }

    #help-button {
        bottom: 140px;
    }

    #trafic-button-red {
        bottom: 45px;
    }

    #cookies-button {
        bottom: 95px;
    }

    #goto-itinerary-mobile {
        display: block;
        top: 60px;
    }

    #custom-ui-left,
    #custom-ui-right {
        right: 15px !important;
        width: 25px !important;
        height: 25px !important;
    }

    #trafic-button-red .trafic,
    #help-button .help,
    .location-button .zoomLocateButton,
    .home-button .home,
    #cookies-button .cookie {
        width: 25px !important;
        height: 25px !important;
        background-size: 25px !important;
    }

    #basemap-toggle .toggleButton {
        width: 35px;
        height: 35px;
    }

    #basemap-toggle .toggleButton {
        background-image: url("../images/basemap.svg");
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: center;
    }

        #basemap-toggle .toggleButton .basemapImageContainer {
            display: none;
        }

    .esriPopup .popup-title-close {
        width: 22px;
        height: 22px;
    }
}

body.hasHover #basemap-toggle .toggleButton:hover {
    background-color: #DDD;
}

.esri-basemap-toggle {
    background-image: url("../images/basemap.svg") !important;
    background-size: 70% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    width: 35px !important;
    height: 35px !important;
    border: none !important;
    box-shadow: none !important;
    background-color: #f5f5f5 !important;
    transition: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Hide default Esri basemap image */
.esri-basemap-toggle__container {
    display: none !important;
}

.esri-home .esri-widget--button {
    background-size: contain !important;
}
.esri-basemap-toggle:hover {
    background-color: #f5f5f5 !important;
}
/* Remove hover effects */
.esri-basemap-toggle calcite-button:hover {
    filter: none !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 1 !important;
    transition: none !important;
    pointer-events: auto !important;
}
.esri-home .esri-widget--button,
.esri-basemap-toggle calcite-button {
    width: 35px !important;
    border: none !important;
    box-shadow: none !important;
}

.esri-basemap-toggle calcite-button {
    height: 35px !important;
}