/*
Nieuwe kleurcodes NEN

  NEN Blauw - HEX #306AB2 - RGB 48 / 106 / 178

Overige huisstijlkleuren:
  NEN Rood - HEX #D14124 - RGB 209 / 65 / 36

  NEN Blauwgroen - HEX #00838B - RGB 0 / 131 / 139

  NEN Lichtgroen - HEX #EDF6EE - RGB 237 / 246 / 238

  NEN Lichtblauw - HEX #EBF1FA - RGB 235 / 241 / 250

  NEN Titelblauw - HEX #00205B - RGB 0 / 32 / 91
*/

:root {
  --primary-nen-color: #00205B;
  --primary-nen-background: #EBF1FA;

  --cluster-one-v5: #8ec092;
  --cluster-two-v5: #9a93f1;
  --cluster-three-v5: #f69092;

    /* T4 and T5 with clusters D, E and F */
  --cluster-one-v6: #9a93f1;
  --cluster-two-v6: #c18dbf;
  --cluster-three-v6: #f4f49f;

  /* T6 clusters at surface with G, H and I */
  --cluster-one-v6-t6: var(--primary-nen-background);
  --cluster-two-v6-t6: #efca86;
  --cluster-three-v6-t6: #c1bfbc;

  /* T6 clusters at depth with 1, 2 and 3 */
  --cluster-one-v6-depth: lightgreen;
  --cluster-two-v6-depth: red;
  --cluster-three-v6-depth: lightblue;
}

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

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 18px;
}

/* Create the white background effect to the NEN styling */
#indexBody::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 5.4em;
  background-color: white;
  box-shadow: 0 1px 7px 0 rgba(198, 198, 198, 0.38);
}

/* Overwrite the nav-items/nav-links to the NEN styling */
.nav-link {
  color: var(--primary-nen-color) !important;
  font-weight: 100;
}

/* Set a font-size for the footer */
#footerContainer .nav-link {
  font-size: 14px !important;
}

.nav-item:hover a {
  text-decoration: underline;
}

.bg-nen-light {
  background-color: var(--primary-nen-background) !important;
}

/* Styling for the searchbar on top of the Google Map */
#search_box.controls {
  top: 0.6em;
  left: 13.5em;
  height: 40px;
  width: 15em;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}

/* Styling for the sidebar on map.php */
#mapSidepanel #contentContainer {
  max-height: 75vh;
  overflow: auto;
}

/* Overwrite the bootstrap form styling */
#contentContainer .nav-link {
  padding: 0.5em !important;
}

.form-group {
  margin-bottom: 0.5em !important;
}
.form-control {
  padding: 0.3em !important;
}

/* Styling for the uhs_data_table */
#uhs_data_table {
  max-height: 12em;
}

/* Pageloader */
body.loading {
  opacity: 0.5;
  pointer-events: none;
}

/* Map zoom message */
#map.loading {
  opacity: 0.5;
}

section#loading,
section#zoomMessage {
  position: fixed;
  text-align: center;
  top: 50%;
  width: 100%;
  z-index: 999;
}

/* Overwrite the container class to go full-width below 1200px screenwidth */
@media (max-width: 1200px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Overwrite the container class to go have a max of 940px following the NEN styling */
@media (min-width: 1200px) {
  .container {
    max-width: 940px !important;
  }
}

.nen-spinner {
  width: 4rem; height: 4rem;
}

.nen-sub {
  line-height: 0;
}

.nen-graph {
  height: 280px;
}

.nen-collapse {
  margin-bottom: 10px;
}

.nen-parameters {
  color:#323232; padding:2px 0
}