html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
#root, #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);;
    display: none;
    z-index: 99;
}
.info {
    position: absolute;
    top: 10px;
    right: 60px;
    width: 250px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.info div:first-child {
    height: 39px;
    border-radius: 10px 10px 0 0;
    background-color: #000;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 39px;
    pointer-events: none;
}
.info div:last-child {
    padding: 0 10px;
    border-radius: 0 0 10px 10px;
    font-size: 14px;
    line-height: 22px;
}
.livecam-marker {
    width: 40px;
    height: 40px;
    border: 2px solid #333;
    border-radius: 50%;
    background: white no-repeat center/20px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23333' d='M384 112v288c0 26.51-21.49 48-48 48h-288c-26.51 0-48-21.49-48-48v-288c0-26.51 21.49-48 48-48h288C362.5 64 384 85.49 384 112zM576 127.5v256.9c0 25.5-29.17 40.39-50.39 25.79L416 334.7V177.3l109.6-75.56C546.9 87.13 576 102.1 576 127.5z'%3E%3C/path%3E%3C/svg%3E");
    cursor: pointer;
}
.livecam-marker.active, .livecam-marker:hover {
    border-color: #33B5E5;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%2333B5E5' d='M384 112v288c0 26.51-21.49 48-48 48h-288c-26.51 0-48-21.49-48-48v-288c0-26.51 21.49-48 48-48h288C362.5 64 384 85.49 384 112zM576 127.5v256.9c0 25.5-29.17 40.39-50.39 25.79L416 334.7V177.3l109.6-75.56C546.9 87.13 576 102.1 576 127.5z'%3E%3C/path%3E%3C/svg%3E");
}
.thumbnail-image-container {
    width: 128px;
    height: 72px;
    margin-bottom: 4px;
    position: relative;
}
.thumbnail-image-container > .ball-pulse {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.5, .5);
    box-sizing: initial;
    position: absolute;
}
.thumbnail-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
}
.mapboxgl-ctrl-group {
    border-radius: 10px;
}
.mapboxgl-ctrl-group button {
    width: 39px;
    height: 39px;
}
.mapboxgl-ctrl-group button:focus:first-child,
.mapboxgl-ctrl-group button:hover:first-child {
    border-radius: 10px 10px 0 0;
}
.mapboxgl-ctrl-group button:focus:last-child,
.mapboxgl-ctrl-group button:hover:last-child {
    border-radius: 0 0 10px 10px;
}
.mapboxgl-ctrl-group button:focus:only-child,
.mapboxgl-ctrl-group button:hover:only-child {
    border-radius: inherit;
}
.mapboxgl-ctrl button.mapboxgl-ctrl-home .mapboxgl-ctrl-icon {
    background: no-repeat center/21px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23333'%3E%3Cpath d='M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z'%3E%3C/path%3E%3C/svg%3E");
}
.mapboxgl-ctrl button.mapboxgl-ctrl-info .mapboxgl-ctrl-icon {
    background: no-repeat center/21px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23333'%3E%3Cpath d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'%3E%3C/path%3E%3C/svg%3E");
}
.mapboxgl-popup-content {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
}
.popup-object .mapboxgl-popup-content,
.popup-object .mapboxgl-popup-tip {
    pointer-events: none;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: rgba(0, 0, 0, 0.7);
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: rgba(0, 0, 0, 0.7);
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: rgba(0, 0, 0, 0.7);
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: rgba(0, 0, 0, 0.7);
}
.mapboxgl-popup-anchor-top.highlighted .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left.highlighted .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right.highlighted .mapboxgl-popup-tip {
    border-bottom-color: rgba(102, 102, 102, 0.7);
}
.mapboxgl-popup-anchor-bottom.highlighted .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left.highlighted .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right.highlighted .mapboxgl-popup-tip {
    border-top-color: rgba(102, 102, 102, 0.7);
}
.mapboxgl-popup-anchor-left.highlighted .mapboxgl-popup-tip {
    border-right-color: rgba(102, 102, 102, 0.7);
}
.mapboxgl-popup-anchor-right.highlighted .mapboxgl-popup-tip {
    border-left-color: rgba(102, 102, 102, 0.7);
}
.panel {
    position: absolute;
    z-index: 3;
    bottom: 0;
    left: 0;
    right: 0;
    width: calc(100% - 20px);
    max-width: 380px;
    height: 262px;
    margin: auto;
    border-radius: 10px 10px 0 0;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-size: 130%;
    color: #fff;
    transition: height 300ms;
}
.panel.collapsed {
    height: 50px;
}
.panel.closed {
    height: 0;
}
#panel-header {
    position: relative;
    height: 30px;
    margin: 10px 0;
    padding: 0 10px;
    line-height: 30px;
}
#panel-title {
    font-weight: bold;
}
#panel-body {
    height: calc(100% - 50px);
    margin-top: 10px;
    padding: 0 10px;
    overflow: auto;
    overscroll-behavior: contain;
    line-height: 130%;
}
#panel-content{
    position: relative;
    overflow: hidden;
}
.panel-button-group {
    position: absolute;
    top: 0;
    right: 10px;
    height: 100%;
}
.panel-button-group > * {
    margin-left: 10px;
    float: right;
}
.slide-button {
    width: 20px;
    height: 100%;
    background: no-repeat center/13px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23fff'%3E%3Cpath d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'%3E%3C/path%3E%3C/svg%3E");
    pointer-events: none;
}
.collapsed .slide-button {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23fff'%3E%3Cpath d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E%3C/svg%3E");
}
#slide-button {
    pointer-events: none;
}
.windows {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}
.windows::-webkit-scrollbar {
    width: 10px;
}
.windows::-webkit-scrollbar-thumb {
    background: #ccc;
    background-clip: content-box;
    border-radius: 6px;
    border: solid 2px transparent;
}