html, body {
  height: 100%;
  margin: 0;
}

#mapContainer {
  position: relative;
  width: 100%;
  height: 100%;
}

#map {
  width: 100%;
  height: 100%;
}

#overlay {  /*the overlay exactly covers the map*/
  position: absolute;
  inset: 0;
  pointer-events: none;
}


#loginButton {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
}


.hidden {
  display: none !important;
}

#loginForm, #settingsPanel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: white;
  padding: 5px;
  border: 2px solid silver;
}

.car-marker-shell {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}

.car-marker-shell.self {
  outline: 2px solid #111;
  outline-offset: 2px;
  border-radius: 50%;
}


/* the CONTROL */

.state-control {
  background: white;
  padding: 8px;
  min-width: 180px;
}

.state-control-list {
  display: none;
}

.state-control.expanded .state-control-list {
  display: block;
}
.state-control-group {
  margin-bottom: 10px;
}

.state-control-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.state-control-row {
  display: block;
  white-space: nowrap;
}



/* NETWORK CONTROL */

.network-control-panel { max-height: 250px; overflow-y: auto; min-width: 180px }
.network-control-panel label { display: block; margin: 2px 0; white-space: normal }
.network-control-panel input { margin-right: 6px }


/* shared custom control styling */

.my-control { background: white; border-radius: 4px }

.my-control-panel { display: none; padding: 6px 10px }

.my-control:hover .my-control-panel, .my-control.open .my-control-panel { display: block }

.my-control:hover .my-control-toggle, .my-control.open .my-control-toggle {display: none }

/* icon-style toggles */

.icon-toggle {
  width: 30px; height: 30px; margin: 4px; cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  background-color: white;
}
.icon-toggle:hover { background-color: #EEEEEE}

.settings-control { background-image: url("/css/gear.png"); display: block }
.network-control-toggle { background-image: url("/css/sensor.png") }

/* status control */

#status-control-toggle { width: auto; height: auto; margin-right: 0px; margin-left: 6px }

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  /* Add a default background, which will be overridden by JS */
  background-color: #c62828; /* Default red */
}



/* popup */

.btnRow {display: flex; flex-direction: row; justify-content: space-between; width: 100%}
.btn {width: 75px; height: 75px; padding: 5px; border: 2px solid black; border-radius: 10px; text-wrap:wrap}

.leaflet-container a.btn {
  text-align: center;
  /*   padding: 4px 8px; */
/*   border: 1px solid #888; */
/*   border-radius: 4px; */
  text-decoration: none;
  font: inherit;
  display: inline-flex;
  align-items: center;
/*   justify-content: center; */
  cursor: pointer;
  color: black;
  box-sizing: border-box;
}

.btn:hover {filter: brightness(80%)}
.btn:active {filter: brightness(100%)}
.btnNavigatie {background-color: LightSkyBlue}
.btnNavOMaps {background-color: Yellow}
.btnRoute {background-color: LightSalmon; margin-left:7px}
.btnOpnieuw, .btnGereed {background-color: LightGreen}
.btnHandpeiling {background-color: Yellow}



/* .free-popup .leaflet-popup-tip-container { /* Hide the pointing triangle */ */
/*   display: none !important; */
/* } */

/* .free-popup.leaflet-popup { /* Remove the bottom margin that made space for the triangle */ */
/*   margin-bottom: 0 !important; */
/* } */



/* settings panel */

#settingsPanel {
}

.close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.setting {
  border: 1px silver solid;
  border-radius: 3px;
  margin: 2px;
  padding: 2px;
}

.setting-explain {
  margin: 4px;
  float: right;
}

/* search box */

#panel_right {display: flex; flex-direction: column; align-items: flex-end; z-index: 1001; position: fixed; height: 50px; /*calc( 100% - 20px ); */top: 10px; right: 10px}
#searchbar_container::before {content: 'S'; font-size: 25px; position: relative; left: 20px}
#searchbar {width: 80px; padding-left: 20px; font-size: 25px; border: 2px solid gray; border-radius: 10px;}

/* ui panel / ui popup */

.leaflet-control.ui-panel {
}

p.msg {
  margin: 4px;
}

.ui-panel {
  position: absolute;
  z-index: 1000;
  background: white;
  border-radius: 4px;
  padding: 2px 28px 2px 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
}

.ui-panel-content {}

.ui-panel-close {
  position: absolute;
  right: 4px;
  top: 2px;
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}