.layer-control .panel {
  /* background-color: var(--back-color); */
  /* background: white; */
  background: rgba(255, 255, 255, 0.9);

  display: relative;
  /* max-height: calc(100% - 2em);
  min-height: 400px; */
  /* height: 100%; */
  min-width:  300px;
  
  /* display:absolute; */

  /* margin: 0px; */
  border: solid 1px black;
  border-radius: 5px;
  padding: 5px;

  /* SCROLL */
  overflow: auto;
  max-height:  100vh;
 
}

/* 
.layer-control button:focus,
.layer-control button:hover {
  background-color: white;
} */

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

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

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

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

.layer-control.shown.layer-control-activation-mode-click > button {
  display: block;
  background-image: unset;
  right: 2px;
  position: absolute;
  background-color: #eee;
  margin: 0 1px;
} */
/* 
.layer-control.shown button:focus,
.layer-control.shown button:hover {
  background-color: #fafafa;
} */

.layer-control ul {
  list-style: none;
  margin: 1.6em 0.4em;
  padding-left: 0;
  padding-left: 1.2em;
}
.layer-control ul ul {
  padding-left: 24px;
  margin: 0.1em 0 0 0;
}

/* .layer-control li.group + li.layer-control-base-group {
} */

.layer-control li {
  position: relative;
  /* Spacing between layer items */
  margin-top: 0.2em; 
  margin-bottom: 0.2em; 
}


.layer-control label.disabled {
  opacity: 0.4;
}

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

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

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

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

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

/* .layer-control .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-control .group i {
  position: absolute;
  top: 3px;
  transform: translateX(calc(-100% - 3px));
  vertical-align: top;
}


.layer-controlx .description {
  /* width: 200px; */
  overflow: auto;
  white-space: wrap;
  text-wrap: nowrap;
  padding: 2px;
}



/* DESCRIPTION / LEGEND FOLDED */
div.layer-control.description.close {
  display: none;
}

/* DESCRIPTION / LEGEND UNFOLDED */
div.layer-control.description.open {
  display: relative;
}

/* GROUP FOLDED */
.layer-control .group.layer-control-fold.layer-control-close > ul {
  overflow: hidden;
  height: 0;
}

/* GROUP UNFOLDED */
.layer-control .group.layer-control-fold.layer-control-open  > ul {
  overflow: hidden;
}

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

.openclosebutton_opened {
  float: left;
  z-index: 1;
  border: none;
  background-color: var(--back-color) !important;
}

.openclosebutton_closed {
  display: none;
  z-index: 1;
  border: none;
  background-color: var(--back-color) !important;
}

div.layer-control-titel {
  font-weight: bold;
  font-size: 12pt;
  width: 100%;
  /* text-align: center;
  float: left; */
  /* background: pink; */
}

button.layer-control-closebutton {
  font-weight: normal;
  display: absolute;
  float: right;
  /* background: palegreen; */
}

.layer-control .polycategory {
  width: 20px;
  height: 12px;
  display: inline-block; 
  border: solid 1px black;
  border-radius: 3px;
  padding: 0px;
}

.layer-control .cat_label {
  display: inline-block; 
  transform: translateY(-30%);
  padding-left: 6px;
  /* margin-top: -2px !important; */
  vertical-align: middle;
  /* text-decoration: ; */
  /* color: red; */
  height: 12px;
  
}

/* .group_ico_params {
  top: -4px !important;
  left: -3px !important;
  padding: 0px !important;
  height: 24px !important;
} */

.group_label {
  height: 20px !important;
  margin: 0px !important;
  font-weight: bold;
  /* font-size: larger; */
  font-size: 11pt !important;
  /* left: -13px !important; */
  /* background: yellow;   */
  
}


.folder_close:before {
  content: url('LayerControl.img/folder_close_large.svg') !important;
}

.folder_open:before {
  content: url('LayerControl.img/folder_open_large.svg') !important;
}

.koppelinglocatie:before {
  content: url('LayerControl.img/koppeling.svg') !important;
}

.koppeling_lijnen:before {
  content: url('LayerControl.img/koppeling_lijnen.svg') !important;
}

.melding_lijnen:before {
  content: url('LayerControl.img/melding_lijnen.svg') !important;
}

.melding:before {
  content: url('LayerControl.img/way2go_melding.svg') !important;
}

.nummeraanduidinglocatie:before {
  content: url('LayerControl.img/nummeraanduidinglocatie.svg') !important;
}

.svg_icon {
  top: 1px !important;
}

.group_svg_icon {
  top: 2px !important;
}

.group_svg_icon.large {
  display: inline !important;
  position: relative !important;
  left: -3px !important;
  top: -1px !important;
}

.layer-control .layer-icon {
  display: inline !important;
  position: relative !important;
  left: -3px !important;
  top: 1px !important;
}