/*
#body #map { height:calc(100vh - 8.4em); width:100vw; display:block; overflow:hidden; background:#f2efe9; z-index:1; }
#body .map_marker { width:32px; height:38px; position:relative; }
#body .map_marker > a { position:absolute; left:0; top:0; width:32px; height:32px; z-index:3; border-radius:16px; background:#fff; border-bottom-left-radius: 0; -webkit-transform:rotate(-45deg);transform:rotate(-45deg); -webkit-filter: drop-shadow( 0 0 5px rgba(0,0,0,0.75)); filter: drop-shadow( 0 0 5px rgba(0,0,0,0.75)); }
#body .map_marker:before,
#body .map_marker:after { content:''; display:block; position:absolute; left:0; top:0; width:32px; height:32px; z-index:4;pointer-events:none; background:#4b4a4d; }
#body .map_marker:before { display:none; }
#body .map_marker.typ_1:after { -webkit-mask: url('../img/strom.svg' ) no-repeat 50% 80%; mask: url('../img/strom.svg' ) no-repeat 50% 80%; -webkit-mask-size:66.6% 66.6%; mask-size:66.6% 66.6%; }
#body .map_marker.typ_2:after { -webkit-mask: url('../img/slunce.svg') no-repeat 50% 80%; mask: url('../img/slunce.svg') no-repeat 50% 80%; -webkit-mask-size:75.0% 75.0%; mask-size:75.0% 75.0%; }
#body .map_marker.typ_3:after,
#body .map_marker.typ_4:after,
#body .map_marker.any:after { content:'?'; background:none !important; line-height:32px; width:32px; text-align:center; font-weight:bold; line-height:38px; font-size:24px; }
#body .map_marker.typ_3:after { content:'ha'; }
#body .map_marker.typ_4:after { content:'↟'; }
#body .map_marker.stav_1:after { background-color:#98bf0b; color:#98bf0b; }
#body .map_marker.stav_2:after { background-color:#0098d5; color:#0098d5; }
#body .map_marker.stav_3:after { background-color:#faba00; color:#faba00; }
#body .map_marker > div { display:block; position:absolute; white-space:nowrap; position:absolute; left:16px; top:5px; z-index:2; padding:2px 0 2px 0; line-height:1em; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.75); max-width:0; transition:max-width 0.3s linear; overflow:hidden; border-radius:2px; }
#body .map_marker > div > strong,
#body .map_marker > div > span { display:block; padding:0 5px 0 20px; overflow:hidden; text-overflow:ellipsis; }
#body .map_marker > a:hover + div { max-width:50vw; }
#body .map_cluster { width: 32px; height: 32px; }
#body .map_cluster:before { content:''; display:block; position:absolute; left:0; top:0; width: 32px; height: 32px; padding:0; background-color:#fff; color:#4b4a4d; border-radius:16px; -webkit-filter: drop-shadow( 0 0 5px rgba(0,0,0,0.75)); filter: drop-shadow( 0 0 5px rgba(0,0,0,0.75));  }
#body .map_cluster > span { display:block; position:absolute; left:0; top:0; width:32px; line-height:32px; text-align: center; font-size: 16px; font-weight:bold; }

#body #map_legend { padding:1em 0; text-align:center; background:#f8f4f0; background:#f6f6f6; }
#body #map_legend .map_marker,
#body #map_legend .map_cluster { width:auto; display:inline-block; margin:0 1em; vertical-align:top; position:relative; }
#body #map_legend .map_marker > em,
#body #map_legend .map_cluster > em { display:block; width:max-content; margin:10px 0 0 40px; }
#body #map_legend .map_cluster > span { font-size:24px; }

*/

#body #map { height:calc(100vh - 8.4em); width:100vw; display:block; overflow:hidden; background:#f2efe9; z-index:1; }
#body .map_marker { width:32px; height:38px; position:relative; }
#body .map_marker > a { position:absolute; left:0; top:0; width:32px; height:32px; z-index:3; border-radius:16px; background:#fff; border-bottom-left-radius: 0; -webkit-transform:rotate(-45deg);transform:rotate(-45deg); -webkit-filter: drop-shadow( 0 0 5px rgba(0,0,0,0.75)); filter: drop-shadow( 0 0 5px rgba(0,0,0,0.75)); }
#body .map_marker:before,
#body .map_marker:after { content:''; display:block; position:absolute; left:0; top:0; width:32px; height:40px; z-index:4;pointer-events:none; background:#4b4a4d; }
#body .map_marker:before { display:none; }
#body .map_marker.typ_0:after { display:none; }
#body .map_marker.typ_1:after { mask: url('../img/typ_1.svg') no-repeat 50%  0%; mask-size:auto 120%; height:32px; top:2px; }
#body .map_marker.typ_2:after { mask: url('../img/typ_2.svg') no-repeat 50%  0%; mask-size:100% auto; height:32px; }
#body .map_marker.typ_3:after { mask: url('../img/typ_3.svg') no-repeat 50%  0%; mask-size:auto 100%; }
#body .map_marker.typ_4:after { mask: url('../img/typ_4.svg') no-repeat 50%  0%; mask-size:auto 100%; }
#body .map_marker.any:after { content:'?'; background:none !important; line-height:32px; width:32px; text-align:center; font-weight:bold; line-height:38px; font-size:24px; }
#body .map_marker.stav_1:after { background-color:#98bf0b; color:#98bf0b; }
#body .map_marker.stav_2:after { background-color:#0098d5; color:#0098d5; }
#body .map_marker.stav_3:after { background-color:#faba00; color:#faba00; }
#body .map_marker > div { display:block; position:absolute; white-space:nowrap; position:absolute; left:16px; top:5px; z-index:2; padding:2px 0 2px 0; line-height:1em; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.33); max-width:0; transition:max-width 0.3s linear; overflow:hidden; border-radius:2px; }
#body .map_marker > div > strong,
#body .map_marker > div > span { display:block; padding:0 5px 0 20px; overflow:hidden; text-overflow:ellipsis; }
#body .map_marker > a:hover + div { max-width:80vw; }
#body .map_cluster { width: 32px; height: 32px; }
#body .map_cluster:before { content:''; display:block; position:absolute; left:0; top:0; width: 32px; height: 32px; padding:0; background-color:#fff; color:#4b4a4d; border-radius:16px; -webkit-filter: drop-shadow( 0 0 5px rgba(0,0,0,0.75)); filter: drop-shadow( 0 0 5px rgba(0,0,0,0.75));  }
#body .map_cluster > span { display:block; position:absolute; left:0; top:0; width:32px; line-height:32px; text-align: center; font-size: 16px; font-weight:bold; }

#body #map_legend { padding:1em 0; text-align:center; background:#f8f4f0; background:#f6f6f6; }
#body #map_legend .map_marker,
#body #map_legend .map_cluster { width:auto; display:inline-block; margin:0 1em; vertical-align:top; position:relative; }
#body #map_legend .map_marker > em,
#body #map_legend .map_cluster > em { display:block; width:max-content; margin:10px 0 0 40px; }
#body #map_legend .map_cluster > span { font-size:24px; }
