.ol-layerswitcher.ol-collapsed {
    min-width: unset;
}
.ol-layerswitcher,
.ol-layerswitcher.ol-forceopen {
    min-width: 15em;
}
.ol-layerswitcher .panel {
    color: var(--base-color) !important;
    width: 100% !important;
}
.ol-layerswitcher .panel ul {
    overflow: visible;
    font-size: 0.9em;
    font-family: Tahoma,Geneva,sans-serif;
    color: #777;
    padding: 0;
    margin: 0.9em 0.7em 0.9em 1.9em;
}

.ol-layerswitcher > ul.panel {
    overflow-y: auto;
    box-sizing: border-box;
}

.ol-layerswitcher li .li-content {
    width: calc(100% - 3em);
    height: 50px;
}

.ol-layerswitcher li .li-content label {
    width: 70%;
    box-sizing: border-box;
    vertical-align: middle;
    max-width: 80%;
    margin: 0.4em 0 0.4em 0.4em;
}
.ol-layerswitcher .layerswitcher-opacity {
    position: relative;
    border: 0;
    height: 3px;
    width: 80%;
    margin: 6px 0px 6px 60px;
    box-sizing: border-box;
    border-radius: 3px;
    background: linear-gradient(to right, rgba(33,150,243,0), rgba(17, 17, 17, 0.38));
    cursor: pointer;
}
.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor {
    position: absolute;
    width: 15px;
    height: 15px;
    background: var(--base-color);
    background: rgba(198, 198, 198, 1);
}
.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before {
    position: absolute;
    width: 50%;
    height: 50%;
    background: rgba(17, 17, 17, 0.38);
}
.ol-layerswitcher .layerswitcher-progress {
    display: block;
    margin-left: 61px;
    margin-top: -8px;
    width: 80%;
}
.ol-layerswitcher .layerswitcher-opacity:before {
    content: "";
    width: 100%;
    height: 3px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    box-sizing: border-box;
}
.ol-layerswitcher .layerswitcher-opacity-label {
    display: block;
    left: 25px;
    bottom: 3px;
    font-size: 0.8em;
    user-select: none;
    position: absolute;
    width: 35px;
    color: #777;
}



.ol-layerswitcher .layerup {
  width: 1em;
  height: 1em;
  background: none;
  position: absolute;
  right: 3em;
  margin: 2;
  opacity: 1;
}
.ol-layerswitcher .layerup:after {
  content:none;
}
.ol-layerswitcher .layerup:before {
  color: #999;
  content: "\F0C9";
  font-family: FontAwesome;
  border: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1em;
/*  left: .5em; */
}

.ol-layerswitcher [type=checkbox]+label:before, 
.ol-layerswitcher [type=radio]+label:before {
  content: '';
  border: 2px solid #ccc;
  background-color: transparent;
  top: 0px;
}
.ol-layerswitcher [type=checkbox]:checked+label:before, 
.ol-layerswitcher [type=radio]:checked+label:before {
  background: var(--base-color);
} 
.ol-layerswitcher [type=checkbox]:checked+label:after{
  position: absolute;
  top: 15%;
  left: 1%;
  cursor: pointer;
  font-weight: 900;
  font-size: 1.3em;
  transform: none;
  border: 0;
  box-shadow: unset;
}

.ol-layerswitcher [type="radio"]:checked+label:after {
  content: none;
}

.ol-control.ol-layerswitcher {
    background: var(--base-color);
    right: 0.5em;
    top: 0.5em;
    opacity: 0.92;
    border-radius: 4px;
    box-shadow: 0px 0 0px 3px rgba(255, 255, 255, 0.4);
    padding: 0px;
}
.ol-layerswitcher-buttons {
    display: block;
    float: right;
}

.ol-layerswitcher button,
.ol-layerswitcher button:focus {
  background: var(--base-color);
  border: 0;
  user-select: none;
  outline: none;
  font-size: 22px;
}
.ol-layerswitcher button:hover {
  background-color: var(--base-color);
  opacity: 0.72;
}
.ol-layerswitcher button:before {
  background: var(--base-color);
  -webkit-box-shadow: 0.1em 0.1em #fff;
  box-shadow: 0.1em 0.1em #fff;
}
.ol-layerswitcher button:after {
  background: #fff;
  background-image: none;
}

.ol-layerswitcher .ol-layer-group {
  margin-top: 0em;
}
.ol-layerswitcher .ol-layer-group > .ol-layerswitcher-buttons .layerInfo {
  display: none;
}
.ol-layerswitcher .expend-layers:before, .ol-layerswitcher .collapse-layers:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -2px;
  height: 4px;
  width: 100%;
  background: #369;
}
.ol-layerswitcher .expend-layers, 
.ol-layerswitcher .collapse-layers {
    margin: 6px 14px 0px 0px;
    width: 20px;
    height: 20px;
}
.ol-layerswitcher .expend-layers:before, 
.ol-layerswitcher .expend-layers:after, 
.ol-layerswitcher .collapse-layers:before, 
.ol-layerswitcher .collapse-layers:after {
  background: var(--base-color);
}
.ol-layerswitcher .layerInfo {
    background: none;
    background-image: url(/static/img/settings-32.png);
    width: 32;
    height: 32;
    bottom: 3;
}

.ol-layerswitcher .layerExtent {
    background: none;
    background-image: url(/static/img/fullscreen-32.png);
    width: 32;
    height: 32;
    bottom: 2;
}
.ol-layerswitcher .layerInfo:hover {
    background-color: rgba(17,17,17,0.05);
}
.ol-layerswitcher .layerInfo:before {
    content: none;
}
.ol-layerswitcher .layerInfo:after {
    content: none;
}
	
.ol-layerswitcher .layerExtent:hover {
    background-color: rgba(17,17,17,0.05);
}
.ol-layerswitcher .layerExtent:before {
    content: none;
}
.ol-layerswitcher .layerExtent:after {
    content: none;
}

.ol-control.ol-layerswitcher .ol-switchertopdiv, 
.ol-control.ol-layerswitcher .ol-switcherbottomdiv {
  display: none!important;
}
.ol-layerswitcher .panel li {
	border: 0 !important;
    border-top: solid 1px #e1e1e1 !important;
/*    margin: 0 0 3 0 !important; */
}


.ol-overlay.menu {	
	width: 20%;
	background: #fff;
	color: #333;
/*	box-shadow: 0px 0px 5px #111; */
	padding: 0.5em;
	-webkit-transition: all 0.25s;
	transition: all 0.25s;
	opacity:0.92;
}
		/* style the close box */
.ol-overlay.menu .ol-closebox {	
    color: #369;
    left: 1.4em;
    top: 1.4em;
}
.ol-overlay.menu .ol-closebox:before {	
    content: "\f0c9";
    font-family: FontAwesome;
    font-size: 22px;
    color: var(--base-color);
}
#menu {	
    padding-top: 3.5em;
	font-size: 0.9em;
}
		/* menu button */
.ol-control.menu {	
    top: 0.2em;
	left: 0.2em;
    opacity: 0.92;
    font-size: 20px;
/*    box-shadow: 0px 0px 5px #111; */
}
.ol-control.menu i {	
    color: #fff;
}
		/**/
.ol-overlay img {	
    max-width: 90%;
}
.data, .data p {
	margin:0;
	text-align: center;
	font-size:0.9em;
}
.ol-popup.default {
    border: 2px solid var(--base-color) !important;
}
.ol-popup.default .anchor:before {
	border-color: var(--base-color) transparent !important;
}