.controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
#origin-input, #destination-input { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin: 10px 0 0 10px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 400px; }
    #origin-input:focus, #destination-input:focus { border-color: #4d90fe; }
#mode-selector { color: #fff; background-color: #4d90fe; margin-left: 12px; padding: 5px 11px 0px 11px; }
    #mode-selector label { font-family: Roboto; font-size: 13px; font-weight: 300; }
.mapDistanceRate { background-color: #fff; padding: 10px; display: none; }

.gm-style-iw { top: 5px !important; left: 5px !important; width: auto !important; }
    .gm-style-iw + div { display: none; }
    .gm-style-iw a { text-decoration: underline; color: #3A59A3; }

.ol-viewport { z-index: 9; }
.ol-popup { position: absolute; background-color: white; -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2)); padding: 15px; border-radius: 10px; border: 1px solid #cccccc; bottom: 25px; left: -55px; min-width: 80px; }
    .ol-popup#popup { /*display: none !important;*/ }
    .ol-popup#popup-5 { right: -45px; left: unset; }
    .ol-popup#popup-3 { top: 20px; bottom: unset; }
    .ol-popup#popup-1 { right: -10px; left: unset; }
    .ol-popup#popup-2 { left: -25px; }
    .ol-popup:after, .ol-popup:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
    .ol-popup#popup-5:before, .ol-popup#popup-5:after { right: 40px; left: unset; }
    .ol-popup#popup-3:before, .ol-popup#popup-3:after { border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; top: -10px; }
    .ol-popup#popup-1:before, .ol-popup#popup-1:after { right: 5px; left: unset; }
    .ol-popup#popup-2:before, .ol-popup#popup-2:after { left: 15px; }
    .ol-popup:after { border-top-color: white; border-width: 10px; left: 48px; margin-left: -10px; }
    .ol-popup:before { border-top-color: #cccccc; border-width: 11px; left: 48px; margin-left: -11px; }
.ol-popup-closer { text-decoration: none; position: absolute; top: 2px; right: 8px; }
    .ol-popup-closer:after { content: "x"; }
.ol-popup-content { width: max-content; font-size: 12px; }
.ol-zoom, .ol-rotate, .ol-attribution { width: fit-content; display: inline }
    .ol-attribution ul { margin: 0; padding: 0; font-size: 10px; display: inherit; }
        .ol-attribution ul li { display: inherit; }

.olMapViewport { z-index: 0; }

.contatti_map { height: 390px !important; }

@media (max-width: 1024px) {
    .ol-popup { padding: 5px; }
    .ol-popup-content { font-size: 10px; }
    .ol-popup#popup-1, .ol-popup#popup-5 { top: 20px; bottom: unset; }
    .ol-popup#popup-2 { left: -60px; }
    .ol-popup#popup-1:before, .ol-popup#popup-1:after, .ol-popup#popup-5:before, .ol-popup#popup-5:after { top: -10px; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; }
    .ol-popup#popup-2:before, .ol-popup#popup-2:after { left: 55px; }
}

@media (min-width: 320px) and (max-width: 480px) {
    #origin-input, #destination-input { margin: 5px 0; padding: 0 10px; text-overflow: ellipsis; width: 100%; position: relative !important; left: 0 !important; font-size: 12px; }
    .mapDistanceRate { padding: 10px; position: relative; font-size: 13px; margin: 5px 0; z-index: 99; }
    .contatti_map { height: 500px !important; }
    /**/
    .ol-popup-content { font-size: 9px; }
    #popup-0, #popup-1, #popup-2, #popup-3, #popup-4, #popup-5, #popup-6 { display: none !important; }
}