:root {
    --chart-height: 440px;
}

#chart { min-height: var(--chart-height); z-index: 0; max-width: 768px; }
#chart.leaflet-container { background: initial; }
#qspinner { position: absolute; width: 100%; max-width: 768px; text-align: center; }
.details h3:before { font-family: "culture_ico" !important; content: " "; font-size: 80%; color: var(--zelena); }
.details .item { background: var(--bela); padding: 0 1rem 1rem 1rem; margin: 1rem 0; }
.details .item p { margin: 0; }
.details .item .duration { font-size: smaller; }
.details .item .categories { margin-top: 0.8rem; font-size: smaller; font-weight: bold; }
.details .item .categories .category { margin-right: 1rem; }
.details .item .categories .category:before { content: "#"; }
.leaflet-control-attribution { display: none; }
#mytooltip {
    position: fixed;
    min-width: 160px;
    margin-left: -80px;
    margin-top: -76px;
    padding: 8px;
    z-index: 1000;
    border: none;
    background: rgba(255,255,255,0.9);
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    white-space: nowrap;
}
//.hgroup { display: flex; }
//@media (max-width: 1023px) { .hgroup { flex-direction: column; } }

.leaflet-div-icon img { width: 100%; height: 100%; }
.leaflet-div-icon img:hover { filter: hue-rotate(30deg); z-index: 500 !important; }
.leaflet-div-icon img+div:hover { filter: hue-rotate(30deg); z-index: 500 !important; }
.leaflet-div-icon.selected img { filter: hue-rotate(-140deg); z-index: 400 !important; }
.leaflet-div-icon { background: transparent; border: none; }
.leaflet-div-icon .number { position: relative; top: -30px; font-size: 14px; text-align: center;
			    color: #fff; font-weight: bold;
			    text-shadow: 1px 1px 4px black, 0 0 1px grey, 0 0 0.2px grey;
			  }
.coa-logo { width: 32px; }

.legend { float: right; }
.legend { cursor: pointer; }
.legend { font-size: smaller;  overflow-y: auto;  max-height: var(--chart-height);  max-width: 320px; }
.legend .category { padding-right: 1rem; white-space: nowrap; }
.legend .category:hover { background-color: var(--bela); color: var(--crna); }
.legend .category.selected:hover { background-color: var(--crna); color: var(--bela); }
@media (max-width: 1023px) {
    .legend { float: none; }
    .legend .category { display: inline-block; }
}

/* ---------------------------------------------------------------------------
   Category colours
--------------------------------------------------------------------------- */

.category span { width: 2rem; height: 1rem; }
.category.selected { background-color: var(--crna); color: var(--bela); }
.category-Architecture { background-color: #A03070; }
.category-Cultural,
.category-Cultural_heritage { background-color: #69B758; }
.category-Design { background-color: #E0578D; }
.category-Film { background-color: #5F7BAF; }
.category-Literature { background-color: #E7805C; }
.category-Media { background-color: #5869B7; }
.category-Music { background-color: #7EC8A0; }
.category-New,
.category-New_media_art { background-color: #E7B859; }
.category-Theatre,
.category-Theatre__Dance { background-color: #C5D862; }
.category-Visual,
.category-Visual_arts { background-color: #846FA5; }
.category-Intermedia_arts { background-color: #B1BFD8; }