/* it's important to set width/height to 100% for full-screen init */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

table,
th,
td {
  font-family: Roboto, Arial, Helvetica;
  font-size: 14px;
  text-align: center;
  width: 100%;
  padding: 0px;
}

/* style for layer controls */
ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

/* Hide the default checkboxes */
input[type='checkbox'][id^='turn_'],
input[type='radio'][id^='basemap_turn'],
input[type='checkbox'][id^='pturn_'],
input[type='checkbox'][id^='hturn_'],
input[type='checkbox'][id$='_type'] {
  display: none;
}

/* Add the checkmark when the checkbox is checked */
input[type='checkbox']:checked + label::before {
  content: '✓'; /* Display checkmark */
  background-color: #39c; /* Blue background */
  color: white; /* White color for the checkmark */
  padding: 5px; /* Add padding around the checkmark */
  margin-right: 10px; /* Space between checkmark and label */
  border-radius: 50%; /* Make the background circular */
  transform: scale(1); /* No scaling */
  font-size: 15px; /* Set font size of checkmark */
}

/* Style for the label, which will be used as the checkbox button */
input[type='checkbox'][id^='point_turn'] + label {
  cursor: pointer;
  display: inline-block;
  width: 15px; /* Width of the checkbox */
  height: 15px; /* Height of the checkbox */
  background-image: url('icons/red.png'); /* Unchecked state image */
  background-size: cover; /* Make sure the image covers the area */
}

/* When the checkbox is checked, change the background image */
input[type='checkbox'][id^='point_turn']:checked + label {
  background-image: url('icons/green.png'); /* Checked state image */
}

label {
  padding: 7px;
  display: block;
  position: relative;
  margin: 7px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: 20px;
  font-family: Roboto, Arial, Helvetica;
  font-size: 14px;
  border-radius: 5%;
  border: 1px solid grey;
}

label::before {
  background-color: white;
  color: white;
  content: ' ';
  display: inline-block;
  border-radius: 50%;
  border: 2px blue;
  position: absolute;
  top: -10px;
  left: -15px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
  font-family: Roboto, Arial, Helvetica;
}

label img {
  height: 100px;
  width: 100px;
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
}

:checked + label {
  border-color: #ddd;
}

:checked + label::before {
  content: '✓';
  background-color: #39c;
  transform: scale(1);
}

:checked + label img {
  transform: scale(0.9);
  box-shadow: 0 0 5px #333;
  z-index: -1;
}

.icon {
  opacity: 1;
  border-radius: 50%;
  transition: box-shadow 0.4s;
}

.icon.active-icon {
  box-shadow: 0 0 0 2px #39c;
}

.year_arrow:disabled {
  opacity: 0.5;
  color: grey;
  pointer-events: none;
}

/* style for map controls */

/**
* The zoomslider in the map shall be placed between the zoom-in and
* zoom-out buttons.
*/
#map_container .ol-zoom .ol-zoom-out {
  margin-top: 204px;
}

#map_container .ol-zoomslider {
  background-color: transparent;
  top: 2.05em;
}

#map_container .ol-touch .ol-zoom .ol-zoom-out {
  margin-top: 212px;
}

#map_container .ol-touch .ol-zoomslider {
  top: 2.75em;
}

#map_container .ol-zoom-in.ol-has-tooltip:hover [role='tooltip'],
#map_container .ol-zoom-in.ol-has-tooltip:focus [role='tooltip'] {
  top: 3px;
}

#map_container .ol-zoom-out.ol-has-tooltip:hover [role='tooltip'],
#map_container .ol-zoom-out.ol-has-tooltip:focus [role='tooltip'] {
  top: 232px;
}