:root{--lo:yellow; --md:#00FF7F; --hi:#EE4B2B;}
html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
}

#elMap {width: 100%; height: 100%;}
#elPnl {position: absolute; width: fit-content; top: 0; right: 0; z-index: 10000; background: rgba(170, 187, 97, 0.5); }
.offers #elPnl {text-align:center; border-bottom: solid 1px red;} 
.index #elPnl { left: 0; display: flex; flex-direction: column;  gap: 3pt;} 
.index a {font-weight: bold; font-size: 1.2em; background-color: white;}

.place-icon,.cluster-icon { border-radius: 50%; text-align: center; font-weight: bold; }
.place-icon{ line-height: 25px; background: var(--md) }
.cluster-icon { font-size: 1.1em; line-height: 40px }

.place-icon[cat='4']{ background: var(--lo); border: solid 1px black } 
.place-icon[cat='3']{ background: var(--lo) } 
.place-icon[cat='2']{ background: var(--md) } 
.place-icon[cat='1']{ background: var(--hi) } 

.cluster-icon.s{ background: rgba(110, 204, 57, 0.7) }
.cluster-icon.m{ background: rgba(240, 194, 12, 0.7) }
.cluster-icon.l{ background: rgba(241, 128, 23, 0.7) }
.cluster-icon.xl{ background: rgba(241, 128, 23, 0.7) }