.layer-switcher {
    position: absolute;
    /*top: 3.5em;*/
    top: 1.5em;
    right: 1.5em;
    text-align: left;
}

.layer-switcher .panel {
  margin: 0;
  border: 4px solid #eee;
  border-radius: 4px;
  background-color: white;
  display: none;
  max-height: inherit;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

    .layer-switcher button {
        float: right;
        z-index: 1;
        width: 40px;
        height: 40px;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAwRJREFUaEPtmP2RDVEQxc9GYDMgAzJABIgAESACRIAIEAEZIAMysBnsZqB+alq1u/ej78d49dTrf96rmTtz+3SfPrd7znTkdnbk/usE4NAZPGXgf87AuaT3G8Cnki73ALsXhe5I+iTp1ub0T0mPJH1fDWIPAE8kvZFEBryRgReSPqwEsRoAlAGA2dX254a7BgAotcRWAYAqUAbqmP1wYHD6trsHlaAU1JqyFQDubc57ynyU9NwVLvfeSnrsvIVSgPg6g2AWwEtJrxIH4DnO5gxQ1Ic3nn89CmIUgEnkw4TvZKOlNNCMqPu6+LzVRbfUjgBIJRIM3yQBJuoAAcDpuy4AQ1LbCyAnke82vo+wAKo9S+qiS2p7AOQkEkBEcsbIHCo1JLURADWJbPE9CgxaDkltC0BEIqNOttYNSW0NQK9EthyM3u+S2hqAEjcpsqjaRJ22dWSBcyJtR4q11qIQ/KdId2kDEnSlWiOQxZajBYA9StykIZtVIMOAk6hcrR3JZjMCwB4kjTag2LWpNmB7Sa7WCE6o7e4BwH7IHVG/6cJBW0BT1lsXRJsOFqUzu9hO9LA8RwDATc/BFW1AtB1J975GoxoArwgc+aiPN+hD+r1FUp+jIt1o2tWiRkgqVCoqXw0AD/r+nbTeT6jSI7VRiWTdl2Q4Yr7w0vonaK0MAOKBC3FuCIlIbVQiu0/+SA3kTkau0YX6Ayg3cdnsG5FIutJ0EKoNR7/3jgBgHZFBfVpDSI7faeGldTIzHIUB2IGGZKanMg552ctJLc/nJJK1ZMd/DOgajqIZ8FGMDCGp1OacWjIcjQAADJsDxFOqJLWsL0mkBYbvR0PD0SgAO5VzQ0gqtT57OYm070fh09e/cAaA1UVEak0IaB26G7Zrx6+7MAvAXtWS2iGJrDlu91YBqEkt90a+H0X875LRyAuhRyq1/rkuiYxsuDIDNanl3sz3oyKWvQB4qbX/q6a3v8DsCcCklt8hiTwkhSJ7L1mzdwaWOPkvzoHdHS1tcMrAwUK/bXz0GfgFVLbIMcdxjJAAAAAASUVORK5CYII=')
        /*logo.png*/;
        background-size:26px;
        background-repeat: no-repeat;
        background-position: 6px;
        background-color: white;
        border-radius: 3px;
        color: black;
        border: none;
    }

.layer-switcher button:focus,
.layer-switcher button:hover {
  background-color: white;
}

.layer-switcher.shown {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 5.5em);
}

.layer-switcher.shown.ol-control {
  background-color: transparent;
}

.layer-switcher.shown.ol-control:hover {
  background-color: transparent;
}
.layer-switcher.shown .panel {
  display: block;
}

.layer-switcher.shown button {
  display: none;
}

.layer-switcher.shown.layer-switcher-activation-mode-click > button {
  display: block;
  background-image: unset;
  right: 2px;
  position: absolute;
  background-color: #eee;
  margin: 0 1px;
}

.layer-switcher.shown button:focus,
.layer-switcher.shown button:hover {
  background-color: #fafafa;
}

.layer-switcher ul {
  list-style: none;
  margin: 1.6em 0.4em;
  padding-left: 0;
}
.layer-switcher ul ul {
  padding-left: 1.2em;
  margin: 0.1em 0 0 0;
}
.layer-switcher li.group + li.group {
  margin-top: 0.4em;
}
.layer-switcher li.group + li.layer-switcher-base-group {
}

.layer-switcher li.group > label {
  font-weight: bold;
}

.layer-switcher.layer-switcher-group-select-style-none li.group > label {
  padding-left: 1.2em;
}

.layer-switcher li {
  position: relative;
  margin-top: 0.3em;
}

/*.layer-switcher li input {
  position: absolute;
  left: 1.2em;
  height: 1em;
  width: 1em;
  font-size: 1em;
}
.layer-switcher li label {
  padding-left: 2.7em;
  padding-right: 1.2em;
  display: inline-block;
  margin-top: 1px;
}
*/
.layer-switcher label.disabled {
  opacity: 0.4;
}

.layer-switcher input {
  margin: 0px;
}

.layer-switcher.touch ::-webkit-scrollbar {
  width: 4px;
}

.layer-switcher.touch ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.layer-switcher.touch ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

li.layer-switcher-base-group > label {
  padding-left: 1.2em;
}

.layer-switcher .group button {
  position: absolute;
  left: 0;
  display: inline-block;
  vertical-align: top;
  float: none;
  font-size: 1em;
  width: 1em;
  height: 1em;
  margin: 0;
  background-position: center 2px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR4nGNgGAWMyBwXFxcGBgaGeii3EU0tXHzPnj1wQRYsihqQ+I0ExDEMQAYNONgoAN0AmMkNaDSyQSheY8JiaCMOGzE04zIAmyFYNTMw4A+DRhzsUUBtAADw4BCeIZkGdwAAAABJRU5ErkJggg==');
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  -ms-transition: -ms-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}

.layer-switcher .group.layer-switcher-close button {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.layer-switcher .group.layer-switcher-fold.layer-switcher-close > ul {
  overflow: hidden;
  height: 0;
}

/*layerswitcher on the right*/
.layer-switcher.shown.layer-switcher-activation-mode-click {
  padding-left: 34px;
}
.layer-switcher.shown.layer-switcher-activation-mode-click > button {
  left: 0;
  border-right: 0;
}

/*layerswitcher on the left*/
/*
.layer-switcher.shown.layer-switcher-activation-mode-click {
  padding-right: 34px;
}
.layer-switcher.shown.layer-switcher-activation-mode-click > button {
  right: 0;
  border-left: 0;
}
*/