html,
body {
  height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background: #252525;
  color: #fff;
}

#dwv {
  height: 80%;
}

/* Layers */
.layerGroup {
  position: relative;
  padding: 0;
  display: flex;
  justify-content: center;
  height: 100%;
}
.layer {
  position: absolute;
  pointer-events: none;
}

/* drag&drop */
.dropBox {
  text-align: center;
  width: 50%; height: 75%;
}
.dropBoxBorder {
  margin: 20px auto;
  border: 5px dashed #ccc;
}
.dropBoxBorder.hover {
  margin: 20px auto;
  border: 5px dashed #cc0;
}

.legend {
  text-align: center;
  font-size: 8pt;
  margin: 1em;
}
.legend a {
  color: #ccc;
}

/* toolbar */
button {
  margin: 5px;
  padding: 10px 10px;
  border: 0 none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: #444;
}
button:hover {
  background-color: #555;
}
button:disabled {
  color: #aeaeae;
}
.toolbar {
  font: 14px arial, sans-serif;
  margin-bottom: 5px;
  text-align: center;
}
.wl-button,
.reset-button {
  margin-right: 5px;
}

select {
  margin: 5px;
  padding: 10px 10px;
  border: 0 none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: #444;
  text-align-last: center;
}
select:hover {
  background-color: #555;
}
select:disabled {
  color: #aeaeae;
}