﻿#map { height: 500px; position: relative; }
.infowindow { width: 250px; font-family: 'DINPro-Bold'; }
    .infowindow a.details { color: #fff; background-color: #E4032C; padding: 6px 60px; z-index: 2; display: block; text-align: center; text-transform: uppercase; }
    .infowindow a { color: #000; }
.directions-container { position: relative; background-color: #000; }
    .directions-container > div { max-width: 1600px; margin: auto; display: flex; position: relative; }
    .directions-container #map { flex-basis: 65%; }
    .directions-container #mapSideBar { flex-basis: 35%; border-left: solid 2px #E4032C; display: flex; flex-direction: column; padding: 10px; border-bottom: solid 1px #fff; max-height: 500px; overflow: auto; box-sizing: border-box; }
        .directions-container #mapSideBar a { padding: 10px; border-bottom: solid 1px rgba(100,100,100,.5); background-position: right center; background-repeat: no-repeat; background-size: 24px auto; display: flex; justify-content: space-between; flex: 1 0 auto; }
            .directions-container #mapSideBar a:hover { opacity: .4; transition: .5s; }
            .directions-container #mapSideBar a.active { background-color: #fff; color: #111; }
                .directions-container #mapSideBar a.active .ragsoc { font-family: 'DINPro-Bold'; }
            /**/
            .directions-container #mapSideBar a span { display: block; flex: 1 1; }
                .directions-container #mapSideBar a span:first-child { display: block; flex: 1 1; }
                .directions-container #mapSideBar a span span:first-child { display: unset; }
                .directions-container #mapSideBar a span:last-child { margin-top: 5px; justify-content: flex-start; }
                    .directions-container #mapSideBar a span:last-child span.tooltip { flex: 0 1; }
span.tooltip { padding-bottom: 5px; background-position: right center; background-repeat: no-repeat; background-size: 24px auto; position: relative; justify-content: space-between; }
    span.tooltip .tooltiptext { visibility: hidden; background-color: #fff; color: #000; text-align: center; padding: 2px 5px; position: absolute !important; z-index: 1; margin-top: -20px; left: 50%; border: solid 1px #333; transform: translateX(-50%); font-size: 11px; }
        span.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; }
    span.tooltip:hover .tooltiptext { visibility: visible; }
.directions-container #mapSideBar a span:last-child { display: flex; justify-content: center; position: relative; align-items: center; }
.directions-container #mapSideBar a span img { margin: 0 5px; }
.directions-container #mapSideBar::-webkit-scrollbar { display: none; }
#directions-panel { display: none; position: absolute; right: 0; top: 0; bottom: 0; width: 30%; background-color: #fff; overflow: scroll; padding: 20px; }
.map-legend { position: absolute; left: 20px; bottom: 20px; background-color: #fff; padding: 5px 10px; }
    .map-legend span { display: inline-block; width: 10px; height: 10px; }
        .map-legend span.map-riv { background-color: #e4032c; }
        .map-legend span.map-imp { background-color: #333; }
/**/
.button.white_btn { background-color: #fff; color: #111 !important; }
.button.whitebrdr_btn { background-color: rgba(0,0,0,.5) !important; color: #fff !important; box-shadow: inset 0 0 0 2px #fff; border: none; text-shadow: 0 0 4px rgba(0,0,0,.4); }
/**/
.dealerContact_btns { display: flex; width: 100%; justify-content: space-between; align-items: center; }
    .dealerContact_btns a { margin: 5px; }
/**/
#updateDealerLocator { padding: 10px; box-sizing: border-box; }
/**/
.navigator.navigator-category { max-width: 1600px; margin: auto; justify-content: space-between; padding: 10px 0; text-transform: uppercase; font-family: 'DINPro-Bold'; }
    .navigator.navigator-category.navigator-type { justify-content: flex-start; }
    .navigator.navigator-category .item { color: #111; padding: 10px 5px; background-color: #fff; box-sizing: border-box; text-align: center; flex: 1 1 calc(100%/6); box-sizing: border-box; }
        .navigator.navigator-category .item.active { background-color: #E4032C; color: #fff; }
.navigator-type > div { display: flex; justify-content: center; margin: 0 10px 0 0; align-items: center; }
    .navigator-type > div span { margin: 0 10px; }
/**/
.navigator .item.active[data-value="OFFROAD RACING"]:before { content: 'OFFROAD RACING'; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Bianco/Offroad.svg); }
.navigator .item.active[data-value="MOTO"]:before { content: 'MOTO'; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Bianco/Moto.svg); }
.navigator .item.active[data-value="EBIKES"]:before { content: 'EBIKES'; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Bianco/Ebikes.svg); }
.navigator .item.active[data-value="E-MOBILITY"]:before { content: 'E-MOBILITY'; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Bianco/Issimo.svg); }
.navigator .item.active[data-value="ALL"]:before { content: ''; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Bianco/checked.svg); }
.navigator .item[data-value="OFFROAD RACING"]:before { content: 'OFFROAD RACING'; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Grigio/Offroad.svg); }
.navigator .item[data-value="MOTO"]:before { content: 'MOTO'; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Grigio/Moto.svg); }
.navigator .item[data-value="EBIKES"]:before { content: 'EBIKES'; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Grigio/Ebikes.svg); }
.navigator .item[data-value="E-MOBILITY"]:before { content: 'E-MOBILITY'; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Grigio/Issimo.svg); }
.navigator .item[data-value="ALL"]:before { content: ''; background-image: url(https://www.fantic.com//Content/img/icons/Categorie_Mezzi/Grigio/checked.svg); }
/**/
select.dealer_select { background-color: rgba(0,0,0,.5); }
    select.dealer_select option { box-sizing: border-box; background-color: rgba(0,0,0,1); width: 100%; width: 50px; }
/**/
#textRicercaContainer { position: relative; }
    #textRicercaContainer input { width: 100%; box-sizing: border-box; height: 100%; }

.logo_dealer_map{
    height: 36px;
    width: 36px;
}
/* Tablet in modalità orizzontale */
@media all and (min-width: 737px) and (max-width: 1279px) {
    /**/
    .directions-container #mapSideBar a { display: block; }
        .directions-container #mapSideBar a span { display: block; flex: 1 1; }
            .directions-container #mapSideBar a span:first-child { display: block; flex: 1 1; }
            .directions-container #mapSideBar a span span:first-child { display: unset; }
            .directions-container #mapSideBar a span:last-child { margin-top: 5px; justify-content: flex-start; }
                .directions-container #mapSideBar a span:last-child span.tooltip { flex: 0 1; }
    /**/
    .navigator.navigator-category { flex-wrap: wrap; }
        .navigator.navigator-category .item { color: #111; padding: 10px 5px; background-color: #fff; box-sizing: border-box; text-align: center; flex: 1 1; box-sizing: border-box; margin: 2px; flex: 1 1 calc(100%/4); }
}

@media all and (max-width: 736px) {
    .directions-container > div { display: block; }
    .directions-container #mapSideBar { max-height: 400px; }
    .infowindow { width: 100%; }
        .infowindow a.details { padding: 6px 10px; }
    /**/
    .dealerContact_btns { display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 10px; }
        .dealerContact_btns a { margin: 5px auto; flex-basis: calc(100%/1); }
    /**/
    .navigator.navigator-category .item { color: #111; padding: 10px 5px; background-color: #fff; box-sizing: border-box; text-align: center; flex: 1 1 calc(100%/3); box-sizing: border-box; margin: 2px; width: calc(100%/3); }
}
