:root {
  --lighter-background-color: #1e1e1e;
}


.map {
    width: 100%;
    height: 400px;
}
.map:-webkit-full-screen {
    height: 100%;
    margin: 0;
}
.map:fullscreen {
    height: 100%;
}


/* attribution tweaks */
.ol-attribution>ul>li:before {
    content: "";
    margin-right: inherit;
}
.ol-attribution li:not(:last-child):after {
    content: "|";
    color: var(--text-color);
}
.ol-attribution a {
    color: var(--text-color);
    /*text-shadow: 0 0 2px var(--background-color); */
}
.ol-attribution a:hover {
    color: var(--background-color);
    background-color: var(--text-color);
}
.ol-attribution:not(.ol-collapsed) {
    background: var(--lighter-background-color);
}


/* legend tweaks */
ul.ol-legend>li:before {
    content: "";
    margin-right: inherit;
}
.ol-control.ol-legend {
    background-color: var(--lighter-background-color);
}
.ol-control.ol-legend:hover {
    background-color: var(--lighter-background-color);
}
.ol-control.ol-legend button.ol-closebox:before {
    color: rgba(255,255,255,0.8);
}
.ol-control.ol-legend button.ol-closebox:hover:before {
    color: rgba(255,255,255,0.99);
}


/* popup tweaks */
.ol-popup-content {
  text-align: center;
}
.ol-popup.tooltips.black {
    background-color: var(--lighter-background-color);
}
.ol-popup.tooltips.black>div {
    background-color: var(--lighter-background-color);
}
.ol-popup.black .anchor {
    color: var(--lighter-background-color);
}


/* common */
.error {
   color: red;
}

/*
.td-top {
    vertical-align: text-top;
}
*/