/* tools.css */

.controls {
	position: fixed;
	background-color: var(--cdi-dark-blue-transparent, #566b84);
	right: 1px;
	z-index: 2;
	top:72px;
	padding:0px 8px;
	}

.mapzoom-controls {
    position: fixed;
	top: 85px;
	right: 80px;
    z-index: 1;
    background-color: var(--cdi-dark-blue-transparent, #566b84);
	}

#map .mapcontrols {
	list-style: none;
	margin: 10px auto;
	}

.mapcontrols li, .mapzoom-controls li  {
	width: 50px;
	height: 40px;
	margin-right: 1px;
	display: inline-block;
	cursor: pointer;
	padding:0px 8px;
	margin: 0 auto;
	display: block;
	margin-bottom:15px;
	border:2px solid transparent;
	}

.mapcontrols { padding-top: 10px; }

.mapzoom-controls li {
	border:2px solid #fff;
	background-color: var(--cdi-dark-blue, #566b84);;
	margin-bottom:0px;
	padding: 25px 26px;
	float:left;
}

.mapzoom-controls li:last-child { border-left:0px; }

.mc-zoom-in						{  background: url(../grfx/mapcontrols-zoom.png) no-repeat center center; background-size:30px 30px; }
.mc-zoom-out					{ background: url(../grfx/mapcontrols-zoom-out.png) no-repeat center center; background-size:30px 30px; }
.mc-search						{ background: url(../grfx/mapcontrols-search.png) no-repeat center center; background-size:30px 30px; }
.mc-layers						{ background: url(../grfx/mapcontrols-layers.png) no-repeat center center; background-size:30px 30px; }
.mc-identifier					{ background: url(../grfx/mapcontrols-identifier.png) no-repeat center center; background-size:30px 30px; }
.mc-distance					{ background: url(../grfx/mapcontrols-distance.png) no-repeat center center; background-size:30px 30px; }
.mc-bounding-box         		{ background: url(../grfx/mapcontrols-bounding-box.png) no-repeat center center; background-size:30px 30px; }
.mc-help						{ background: url(../grfx/mapcontrols-help.png) no-repeat center center; background-size:30px 30px; }
.mc-legend						{ background: url(../grfx/mapcontrols-legend.png) no-repeat center center; background-size:30px 30px; }
.mc-index						{ background: url(../grfx/mapcontrols-index.png) no-repeat center center; background-size:30px 30px; }
.mc-position					{ background: url(../grfx/mapcontrols-position.png) no-repeat center center; background-size:40px 30px; }
.map-reset						{ background: url(../grfx/mapcontrols-reset.png) no-repeat center center; background-size:30px 30px; }
.mc-download					{ background: url(../grfx/mapcontrols-download.png) no-repeat center center; background-size:30px 30px; }
.mc-switch						{ background: url(../grfx/mapcontrols-switch.png) no-repeat center center; background-size:30px 30px; }


.mapcontrols li:hover 			{ background-color:#253547;  border-radius:5px; }
.mapcontrols li.tool-active   	{ background-color:#253547; border-radius:5px;}
.mapzoom-controls li:hover		{ opacity:0.8; }

.additional-mapcontrols {
	position: absolute;
	list-style: none;
	width: 90px;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 50px;
	}

.additional-mapcontrols li {
	background-image: url(../grfx/mapcontrols.png);
	background-repeat: no-repeat;
	background-size: 100px auto;
	width: 43px;
	height: 36px;
	margin-right: 1px;
	display: inline-block;
	cursor: pointer;
	}

.ol-overviewmap { right:4em !important; bottom:2em !important; }

/* arko temp */
.ol-custom-overviewmap,
.ol-custom-overviewmap.ol-uncollapsible {
	bottom: 50px;
	left: auto !important;
	right: 58px;
	top: auto;
}

.ol-custom-overviewmap .ol-overviewmap-map {
	border: none;
	width: 200px !important;
	height: 200px !important;
}

.ol-custom-overviewmap .ol-overviewmap-box {
	border: 2px solid red;
}

/* hide standard button */
.ol-custom-overviewmap button {
	display: none !important;
}


@media only screen and (max-width: 1190px) {

.additional-mapcontrols { bottom:30px; }

}


@media only screen and (max-width: 768px) {

	.ol-custom-overviewmap .ol-overviewmap-map {
		width: 150px !important;
		height: 150px !important;
	}	

	.ol-overviewmap { bottom:2em !important; right:5em; }

}



@media (max-height:560px) { .additional-mapcontrols { bottom: 60px; } }

@media (max-height:760px) { .additional-mapcontrols { bottom: 60px; } }
	

@media only screen and (max-width: 480px) { 
	.mapzoom-controls {bottom:10px; }


	.mc-zoom-in						{  background: url(../grfx/mapcontrols-zoom.png) no-repeat center center; background-size:15px 15px; }
	.mc-zoom-out					{ background: url(../grfx/mapcontrols-zoom-out.png) no-repeat center center; background-size:15px 15px; }
	.mc-search						{ background: url(../grfx/mapcontrols-search.png) no-repeat center center; background-size:15px 15px; }
	.mc-layers						{background: url(../grfx/mapcontrols-layers.png) no-repeat center center;background-size: 15px 15px;}
	.mc-identifier					{ background: url(../grfx/mapcontrols-identifier.png) no-repeat center center; background-size:15px 15px; }
	.mc-distance					{ background: url(../grfx/mapcontrols-distance.png) no-repeat center center; background-size:15px 15px; }
	.mc-bounding-box         		{ background: url(../grfx/mapcontrols-bounding-box.png) no-repeat center center; background-size:15px 15px; }
	.mc-help						{ background: url(../grfx/mapcontrols-help.png) no-repeat center center; background-size:15px 15px; }
	.mc-legend						{ background: url(../grfx/mapcontrols-legend.png) no-repeat center center; background-size:15px 15px; }
	.mc-index						{ background: url(../grfx/mapcontrols-index.png) no-repeat center center; background-size:15px 15px; }
	.mc-position					{ background: url(../grfx/mapcontrols-position.png) no-repeat center center; background-size:20px 15px; }
	.map-reset						{ background: url(../grfx/mapcontrols-reset.png) no-repeat center center; background-size:15px 15px; }
	.mc-download					{ background: url(../grfx/mapcontrols-download.png) no-repeat center center; background-size:15px 15px; }
	.mc-switch						{ background: url(../grfx/mapcontrols-switch.png) no-repeat center center; background-size:15px 15px; }
	


	.mapcontrols li, .mapzoom-controls li {
		width: 25px;
		height: 20px;
	}

	.mapzoom-controls li  { padding:18px; }


}