.map-container {
    height: 100vh;
    height: calc(100vh - 90px); /* menu height */
    min-height: 350px;
    display: flex;
    flex-direction: column;
}

.map-box {
    display: flex;
    flex-direction: column;
}

.dlrg-map, #wheel-info, .touch-info {
    height: 100%;
    width: 100%;
}

.maparea {
    position: relative;
    flex: 1;
    overflow: hidden;
}

.maparea .gradienttop {
    display: none;
    position: absolute;
    top: 0;
    height: 40px;
    width: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+20,0+100 */
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(20%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome4-9,Safari4-5 */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%); /* Opera 11.10-11.50 */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%); /* IE10 preview */
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
    z-index: 2; 
}

.maparea .gradientbottom {
    display: none;
    position: absolute;
    bottom: 0;
    height: 40px;
    width: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+1,1+80 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome4-9,Safari4-5 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%); /* Opera 11.10-11.50 */
    background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%); /* IE10 preview */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
    z-index: 2; 
}

@media (min-width: 992px) {
    .maparea .gradientbottom, .maparea .gradienttop {
        display: block; 
    } 
}

#wheel-info, .touch-info {
    z-index: 100;
    position: absolute;
    display: none;
    opacity: 0;
}

.ol-control {
    z-index: 102;


}

.ol-control button {
    background-color: rgba(0,105,180, .7);
}

.ol-control button:hover {
    background-color: rgba(0,105,180, .9);
}

#wheel-info span {
    width: 100%;
    position: absolute;
    color: #fff;
    margin-top: 12%;
    text-align: center;
    font-size: 30px;
}
#wheel-info.active, .touch-info.active {
    background-color: black;
    opacity: .5;
    display:block;
}

.touch-info.active {
    width: 15%;
    opacity: .1;
}

.touch-info.right {
    right: 0;
}

.ol-popup {
    z-index: 101;
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    top: -32px;
    left: 10px;
    width: 33vw;
    font-size: 1rem;
}

.ol-popup .btn {
    font-size: 1rem;
}

@media (max-width: 80em){
    .ol-popup {
        width: 50vw;
    }
}

@media (max-width: 50em){
    .ol-popup {
        width: 80vw;
    }
}
.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.ol-popup:after {
    border-right-color: white;
    border-width: 10px;
    top: 20px;
    margin-left: -35px;
}
.ol-popup:before {
    border-right-color: #cccccc;
    border-width: 10px;
    top: 20px;
    margin-left: -36px;
}
.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}
.ol-popup-closer:after {
    content: "✖";
    color: #aaaaaa;
}

.ol-popup .title{
    margin-right: 1em;
}
.ol-popup .popup-content {
    max-height: 15em;
    overflow-x: hidden;
    overflow-y: auto;
    word-wrap: break-word;
}

.ol-popup .popup-content .btn-icon{
    width: 1em;
    margin-right: 1em;
}

.ol-popup .loader {
    color: #0dc5c1;
    font-size: 20px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    margin: 2em auto;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: loader 1.7s infinite ease, round 1.7s infinite ease;
    animation: loader 1.7s infinite ease, round 1.7s infinite ease;
}

.ol-filter-overlay {
    top: 5em;
    position: absolute;
    right: 100%;
    -webkit-transition: right 0.3s ease 0s;
    transition: right 0.3s ease 0s;
    z-index: 100;
    height: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color:#fff;
    width: 240px;
}

.ol-filter-overlay.open{
    right: calc(100% - 240px);
}

.ol-filter-overlay .closer-label {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 100%;
    width: 45px;
    height: 100%;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 1px solid #0069b4;
    border-top: 1px solid #0069b4;
    border-bottom: 1px solid #0069b4;
    border-radius: 0px 0.5rem .5rem 0;
    background-color: rgba(0,105,180, .7);
}

.ol-filter-overlay .closer-label:hover {
    background-color: rgba(0,105,180, .9);
}

.ol-filter-overlay .closer-label div {
    position: absolute;
    top: 40%;
    margin-left: 10px;
}

.ol-filter-overlay ul {
    background: #ffffff;
    font-size: 1rem;
    margin: 0;
    padding: 20px 0 10px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome and Opera */
}

.ol-filter-overlay.open ul {
    border: 1px solid #005a9a;
    border-right: none;
}

.ol-filter-overlay ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}
.ol-filter-overlay input {
    margin: .5em 1em ;
}

#closer-checkbox:checked ~ div {
    right: 0;
}

#closer-checkbox ~ .ol-filter-overlay > label div::before {
    color: white;
    border-radius: 2px;
    width: 1em;
    content: '\f054';
    padding: .25em .5em;
    margin-left: -.25em;
    font-weight: bold;
    font-family: 'Font Awesome 5 Pro' !important;
}

#closer-checkbox:checked ~ .ol-filter-overlay > label div::before,  .ol-filter-overlay.open > label div::before{
    content: '\f053'!important;
}

@-webkit-keyframes loader {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@keyframes loader {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }
    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }
    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }
    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}
@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}