.leaflet-top.leaflet-right {
    z-index: 1001;
}
.basemaps {
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 340px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: rgba(255,255,255,0.9);
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    padding-bottom: 6px;
}
@media (max-width: 480px) {
    .basemaps {
        max-width: calc(100vw - 20px);
        max-height: 60vh;
    }
}
.basemaps.closed {
    display: block;
    background: none;
    box-shadow: none;
    padding-bottom: 0;
}
.basemaps.closed .basemap {
    display: none;
}
.basemaps.closed .basemap.alt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}
.basemaps.closed .basemap.alt img {
    margin: 5px 10px 0 0;
    order: 2;
}
.basemaps.closed .basemap.alt .basemap-caption {
    margin: 0 0 0 85px;
    order: 1;
}
.basemaps.closed .basemap.alt h4 {
    display: none;
}
.basemaps.closed .basemaps-group {
    display: none;
}
.basemaps.closed .basemaps-title,
.basemaps.closed .basemaps-mode,
.basemaps.closed .basemaps-mode-description,
.basemaps.closed .basemaps-help-toggle,
.basemaps.closed .basemaps-help-panel,
.basemaps.closed .basemaps-timeslider {
    display: none;
}
/* eccezione: in modalità "Storica sovrapposta" lo slider resta visibile e
   utilizzabile anche a pannello chiuso, per scorrere gli anni senza dover
   riaprire il pannello con l'hover */
.basemaps.closed .basemaps-mode.mode-overlay ~ .basemaps-timeslider {
    display: block;
}
.basemaps-mode-description {
    flex-basis: 100%;
    margin: 0 10px 6px 10px;
    font-size: 11px;
    color: #666;
    line-height: 1.4;
}
.basemaps-help-toggle {
    flex-basis: 100%;
    display: block;
    margin: 0 10px 6px 10px;
    font-size: 10px;
    font-weight: bold;
    color: #999 !important;
    text-decoration: none !important;
}
.basemaps-help-toggle:hover,
.basemaps-help-toggle.open {
    color: var(--accent) !important;
}
.basemaps-help-panel {
    display: none;
    flex-basis: 100%;
    margin: 0 10px 8px 10px;
    padding: 10px 12px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
}
.basemaps-help-panel.open {
    display: block;
}
.basemaps-help-panel .basemap-help-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.basemaps-help-panel .basemap-help-step:last-child {
    margin-bottom: 0;
}
.basemaps-help-panel .basemap-help-step i {
    flex: 0 0 16px;
    font-size: 13px;
    color: var(--accent);
    text-align: center;
    margin-top: 1px;
}
.basemaps-help-panel .basemap-help-step div {
    font-size: 10.5px;
    color: #444;
    line-height: 1.4;
}
.basemaps-title {
    flex-basis: 100%;
    margin: 4px 0 0 10px;
    font-size: 11px;
    font-weight: bold;
    color: #333;
}
.basemaps-mode {
    position: relative;
    flex-basis: 100%;
    display: flex;
    min-width: 170px;
    margin: 4px 10px 6px 10px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background: #f5f5f5;
    overflow: hidden;
}
.basemaps-mode-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: var(--accent);
    border-radius: 20px;
    transform: translateX(0%);
    transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
    z-index: 0;
}
.basemaps-mode.mode-overlay .basemaps-mode-indicator {
    transform: translateX(100%);
}
.basemaps-mode a.basemaps-mode-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    color: #333 !important;
    text-decoration: none;
    background: transparent;
    transition: color 0.28s ease;
}
.basemaps-mode a.basemaps-mode-btn:hover {
    color: #000 !important;
}
.basemaps-mode a.basemaps-mode-btn.active {
    color: #fff !important;
}
.basemaps-mode a.basemaps-mode-btn.active:hover {
    color: #fff !important;
}
.basemap.overlay-active img {
    border-color: #2277cc;
    box-shadow: 0 0 0 2px #2277cc;
}
/* foglio di stile atlante cartografico palermo -
 giovan battista vitrano per opendatasicilia.it */
.basemaps-group {
    flex-basis: 100%;
    margin: 6px 0 0 10px;
    font-size: 11px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
}
.basemap {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.basemap.active img {
    border-color: orange;
    box-shadow: 2px 2px 4px #000;
}
.basemap img {
	width: 50px;
    border: 2px solid #FFF;
    margin: 5px 0px 0px 10px;
    border-radius: 40px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.65)
}
.basemap-caption {
    margin: 2px 0 5px 10px;
    font-size: 11px;
    color: #333;
    text-align: center;
	    font-weight: 700;
}
.basemaps-timeslider {
    display: none;
    flex-basis: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 10px 8px 10px;
}
.basemaps-mode.mode-overlay ~ .basemaps-timeslider {
    display: block;
}
.basemaps-timeslider-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 10px;
    color: #666;
    margin-bottom: 2px;
    text-shadow: -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, 1px 1px 2px #fff, 0 0 4px #fff;
}
.basemaps-timeslider-current {
    font-size: 13px;
    font-weight: bold;
    color: #cc7300;
}
.basemaps-timeslider-track {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}
.basemaps-timeslider-input {
    width: 100%;
    flex: 1 1 auto;
    margin-bottom: 0;
    accent-color: var(--accent);
    cursor: pointer;
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff);
}
.basemaps-timeslider-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,153,0,0.15);
    color: #cc7300 !important;
    font-size: 10px;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
}
.basemaps-timeslider-nav:hover {
    background: var(--accent);
    color: #fff !important;
}
.basemaps-timeslider-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}
.basemaps-timeslider-name {
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 600;
    color: #333;
    text-align: center;
    line-height: 1.3;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, 1px 1px 2px #fff, 0 0 4px #fff;
}
/* pallino di precisione della georeferenziazione: giudizio editoriale sulla fonte
   (non una misura), per non far leggere lo swipe/occhio di bue come pixel-perfect
   sulle mappe ottocentesche non rilevate scientificamente */
.basemaps-timeslider-accuracy {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.9);
    cursor: help;
}
.basemaps-timeslider-accuracy-alta { background: #2e7d32; }
.basemaps-timeslider-accuracy-media { background: #e6a700; }
.basemaps-timeslider-accuracy-bassa { background: #c62828; }
/* pallino accanto all'anno corrente: raggruppati in un wrapper cosi' lo
   space-between della label row non li separa, e l'allineamento e' al
   centro del testo invece del margine-top pensato per il name-row */
.basemaps-timeslider-current-wrap {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.basemaps-timeslider-current-wrap .basemaps-timeslider-accuracy {
    margin-top: 0;
}
.basemap-help-accuracy-sample {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-top: 5px;
    box-shadow: none;
    vertical-align: middle;
}
/* legenda fissa della precisione georeferenziazione, angolo bottomleft:
   Leaflet la piazza nel corner .leaflet-bottom.leaflet-left, gia' animato
   in sync con l'apertura/chiusura della sidebar da leaflet-sidebar.css.
   atlante/css/leaflet.css nasconde pero' di proposito tutti i .leaflet-control
   nel corner sinistro per lasciare spazio alla sidebar (.leaflet-left
   .leaflet-control { display:none }): serve la stessa contro-regola gia'
   usata per la toolbar (vedi L.Control.Toolbar.css) per farla rispuntare. */
.leaflet-left .basemaps-accuracy-legend.leaflet-control {
    display: block !important;
    /* solleva la legenda sopra la barra attribution di Leaflet, altrimenti
       il testo lungo dell'attribution (bottomright) la sovrappone in basso */
    margin-bottom: 50px !important;
}
@media (max-width: 480px) {
    /* su mobile l'attribution va su piu' righe e con margin-bottom la legenda
       resta comunque coperta o fuori schermo: la ancoro con position fixed
       a una distanza fissa dal bordo inferiore, indipendente dall'attribution.
       left:46px (verificato con screenshot headless): la barra .sidebar-tabs
       collassata a sinistra occupa 0-40px con z-index 2000, sopra la legenda
       (leaflet-control, z-index molto piu' basso) - con left inferiore a 40px
       la legenda finisce sotto la barra e viene tagliata a meta'. */
    .leaflet-left .basemaps-accuracy-legend.leaflet-control {
        position: fixed !important;
        left: 0px !important;
        bottom: 150px !important;
        margin-bottom: 0 !important;
        top: auto !important;
        max-width: calc(100vw - 56px);
        box-sizing: border-box;
    }
}
.basemaps-accuracy-legend {
    padding: 6px 10px;
    background: rgba(255,255,255,0.9);
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    font-size: 10.5px;
    color: #333;
    cursor: help;
}
.basemaps-accuracy-legend-title {
    font-size: 10px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
}
.basemaps-accuracy-legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.basemaps-accuracy-legend-row + .basemaps-accuracy-legend-row {
    margin-top: 3px;
}
.basemaps-accuracy-legend-row .basemaps-timeslider-accuracy {
    margin-top: 0;
}
.basemaps-accuracy-legend-label {
    white-space: nowrap;
}

/* legenda collassabile: su mobile parte chiusa (solo pallino "i" compatto),
   tap per espandere - vedi toggle in L.Control.Basemaps_02_timeslider.js */
.basemaps-accuracy-legend { cursor: pointer; }
.basemaps-accuracy-legend.collapsed { padding: 6px 8px; }
.basemaps-accuracy-legend.collapsed .basemaps-accuracy-legend-title { margin-bottom: 0; }
.basemaps-accuracy-legend.collapsed .basemaps-accuracy-legend-row { display: none; }