.map {
    margin:0; 
    padding:0;
    /*height: 100%;*/ /*Fallback*/
    height: 100vh;
    width: 100%; 
    /*position:fixed;*/
}
.toolbar {
    height: 2em;
    padding: .2em;
    position: absolute;
    z-index: 999;
}
.toolbar .ol-control {
    position: static;
    display: inline-block;
    padding: 0;
}
.toolbar .ol-control {
    background-color: rgba(0,0,0,0);
}
.toolbar .ol-control button {
    border-radius: 2px;
    width: 2em;
    background-color: rgba(219,63,63,.5);
    display: inline-block;
}
.ol-touch .toolbar .ol-control button {
    background-color: rgba(219,63,63,0.5);
}
.ol-touch .toolbar .ol-control button:hover {
    background-color: rgba(219,63,63,0.5);
}
iframe.popup {
    height:360px;
	width:320px;
    border:0px solid #AAA;   
}
.button {
    position:absolute;
    bottom: 40px;
    left: 10px;
}
.ol-zoom-in {
    width:38px;
    height:38px;
}

.zoom-gps {
    top: 75px;
    left: .5em;
    
    background-color:white;
    /*width:38px;
    height:38px;*/
}
button.zoom-gps {
    background-color:rgba(250,250,250,1);
    /* https://www.flaticon.com/free-icon/crosshair_37*/
    background-image: url(../icons/gps2.svg) !important;
    background-repeat: no-repeat;
    /*    width:36px;
    height:36px;*/
}
.ol-touch .zoom-gps {
    top: 80px;
}

#popup {}

.ol-popup {
    display: none;
    position: absolute;
    background-color: white;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -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;*/
    padding: 22px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    /*left: -50px;*/
    left:0px;
    height:400px;
}

/* before and after creates the little triangle pointer at the bottom left of the window */
.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-top-color: white;
border-width: 10px;
/*left: 48px;*/
left: 168px;
margin-left: -10px;
}

.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
/*left: 48px;*/
left: 168px;
margin-left: -11px;
}

/* upper right corner click to close div */
.ol-popup-closer {
color:black;
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}

/* upper right corner click to close text */
.ol-popup-closer:after {
/*content: "\2716";*/
content: "x";
    /* watch out for this overriding previously declared font-family */
font-family:arial;
font-weight:bold;
}

#gps-info {}

.gps-dialog {
    display: none;
    position: absolute;
	top: 20%;
	/*bottom: 12px;*/
	/*left: -50px;*/
    left:20%;
	width: 50%;
    height:400px;
    background-color: white;
    /*-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -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;*/
    padding: 22px;
    border-radius: 10px;
    border: 1px solid #cccccc;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.gps-dialog-head {
	margin-top:10px;
	font-weight: bold;
	/*border:1px solid #AAA;*/
}

.gps-dialog-value {
	/*border:1px solid #AAA;*/
}

@media only screen and (orientation: portrait) {
    .ol-touch .toolbar {
        height: 2rem;
    }
    .ol-touch .toolbar .ol-control {
        height: 2rem;
    }
    .ol-touch .toolbar .ol-control button {
        width: 3rem;
        height: 2rem;
    }
}
@media only screen and (orientation: landscape) {
    .ol-touch .toolbar {
        width: 2rem;
    }
    .ol-touch .toolbar .ol-control {
        display: block;
        width: 2rem;
    }
    .ol-touch .toolbar .ol-control button {
        height: 3rem;
        width: 2rem;
    }
}