:root {
  --beyond-blue: #0050FF;
  --dark-blue: #00008C;
  --light-blue: #82DCFA;
  --white: #FFFFFF;
  --green: #00DC7D;
  --orange: #FFA55A;
  --red: #F65D7C;
  --black-100: #00001E;
  --black-80: #3C3C46;
  --black-60: #73737D;
  --black-40: #B4B4BE;
  --black-20: #F3F3F5;
  --bs-heading-color: var(--black-100);

  --body-line-height: 1rem;
  --switch-table-height: 570px;
  --rotate-img-size: 50px;
  --satellite-img-size: 70px;
}


* {
  font-family: Arial;
}

h4 {
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--black-100);
}

.category-btn {
  width: 100%;
  border-radius: 0% !important;
  font-weight: bold !important;
  background-color: var(--black-40) !important;
  color: var(--white) !important;
  margin: 0px 2px 0px 2px;
  @media (max-width: 768px) {
    margin-bottom: 0.5rem;
  }
}

.category-btn-active {
  width: 100%;
  border-radius: 0% !important;
  font-weight: bold !important;
  background-color: var(--black-100) !important;
  color: var(--white) !important;
  margin: 0px 2px 0px 2px;
  @media (max-width: 768px) {
    margin-bottom: 0.5rem;
  }
}

.rat-btn {
  width: 100%;
  border-radius: 0% !important;
  font-weight: bold !important;
  margin: 0px 2px 0px 2px;
  @media (max-width: 768px) {
    margin-bottom: 0.5rem!important;
  }
}

.rat-btn-inactive {
  background-color: var(--black-40) !important;
  color: var(--white) !important;
}

.rat-btn-active-1 {
  background-color: var(--dark-blue) !important;
  color: var(--white) !important;
}

.rat-btn-active-1-sat {
  color: var(--black-100) !important;
  padding: 0.5rem 0rem;
  line-height: 1;
}

.rat-btn-active-2 {
  background-color: var(--beyond-blue) !important;
  color: var(--white) !important;
}

.rat-btn-active-2-sat {
  background-color: var(--red) !important;
  color: var(--white) !important;
}

.rat-btn-active-3 {
  background-color: var(--light-blue) !important;
  color: var(--white) !important;
}

.rat-btn-active-3-sat {
  background-color: var(--orange) !important;
  color: var(--white) !important;
}

#table-wrapper {
  position: relative;
}

#table-scroll {
  height: var(--switch-table-height);
  overflow: auto;
  /*margin-top:20px;*/
}

#table-wrapper table {
  width: 100%;

}

#table-wrapper table * {
  font-size: 0.8rem;
  border-color: var(--black-40);
}

#table-wrapper table thead th .text {
  position: absolute;
  top: -20px;
  z-index: 2;
  height: 20px;
  width: 35%;
  border: 1px solid red;
  color: #00DC7D;
}

.table {
  --bs-table-bg: var(--black-60) !important;
  background-color: var(--black-60) !important;
  table-layout:fixed;
  position: relative;
}

.table:hover {
  background-color: var(--black-40);
  --bs-table-hover-bg: var(--black-40);
}

th {
  width:10%;
  position: sticky;
  top: 0;
  z-index: 1;
}

th:first-child {
  width: 30%;
}

.big-cell {
  width:15%;
}

.table-hover thead th {
  font-weight: 100;
}

.table-hover tbody tr:hover td,
.table-hover thead tr:hover th {
  background-color: var(--black-40);
  --bs-table-hover-bg: var(--black-40);
  font-weight: bold;
}

.white-square {
  background-color: var(--white);
  width: 20px;
  height: 20px;
  margin-left: auto;
  margin-right: auto;
}

.blue-mark {
  background-image: url("img/Tick_2Solid.png");
  background-color: var(--white);
  background-position: center;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

.btn-dropdown {
  background-color: var(--white) !important;
  border: 1px solid var(--dark-blue) !important;
  width: 100%;
  padding-top: 7px !important;
  padding-bottom: 9px !important;
  @media (max-width: 768px) {
    margin-bottom: 0.5rem!important;
  }
}

.input-text {
  color: var(--black-40);
  font-weight: 400 !important;
  font-size: 1rem !important;
}

.input-text-active {
  color: var(--black-100);
  font-weight: 400 !important;
  font-size: 1rem !important;
}

.input-group-text,
.custom-input {
  border: 1px solid var(--dark-blue) !important;
  background-color: var(--white) !important;
  color: var(--black-40);
  @media (max-width: 768px) {
    margin-bottom: 0.5rem!important;
  }
}

.custom-input {
  border-left: 0px !important;
  padding-top: 7px !important;
}

::placeholder {
  color: var(--black-40) !important;
  opacity: 1;
  /* Firefox */
  font-size: 1rem;
  line-height: 4px !important;
}

::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: var(--black-40) !important;
}

.country-chevron {
  float: right;
  color: var(--dark-blue);
}

.dropdown-menu {
  max-height: 280px;
  overflow-y: auto;
}

.drop-down-label {
  color: var(--black-80);
  width: 100%;
}

.drop-down-label-active {
  color: var(--black-80);
  font-weight: bold;
  width: 100%;
}

.active-category {
  background-color: var(--black-40) !important;
}

#resetFiltersLink {
  color: var(--dark-blue);
  text-decoration: none;
  visibility: hidden;
}

#globeMap {
  .stroke {
    fill: none;
    stroke: #000000;
    stroke-width: 1px;
  }

  .fill {
    fill: #f2f2f2;
  }

  .graticule {
    fill: none;
    stroke: #777;
    stroke-width: .5px;
    stroke-opacity: .5;
  }

  .noclick {
    pointer-events: none;
  }

  .land {
    fill: var(--black-20);
  }

  .boundary {
    fill: none;
    stroke: var(--white);
    stroke-width: 1px;
  }

  .globe-container {
    position: relative;
    height: 0px;
  }

  .rotate-div {
    position: absolute;
    top: calc(var(--switch-table-height) - var(--rotate-img-size) - var(--body-line-height));
    display: block;
    min-width: 35px;
    width: 35px;
    height: 35px;
    color: var(--black-100);
    font-weight: bold;
    z-index: 0;
  
    img {
      width: var(--rotate-img-size);
    }
  }

  .satellite-div {
    display: none;
    padding-top: 0rem;
    right: 10px;
    position: absolute;
    color: var(--black-100);
    font-weight: bold;
    min-width: 50px;
    width: var(--satellite-img-size);
    height: var(--satellite-img-size);
  }

  .satellite-switch {
    user-select: none;
  }

  .satellite-checkbox {
    opacity: 0;
    width: 0px;
    height: 0px;
  }

  .satellite-toggle {
    position: absolute;
    cursor: pointer;
    top: 1.5rem;
    width: 100%;
    height: 100%;
    background-size: contain;
    margin: 0;
  }

  label:has( > input:checked) {
    &:before {
      content: 'Abwählen';
      color: var(--beyond-blue);
    }
  }

  label:has( > input:not(:checked)) {
    &:before {
      content: 'Auswählen';
      color: var(--black-100);
    }
  }

  .satellite-switch input:checked + .satellite-toggle {
    background-image: url('img/Satellite_Selected.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  
  .satellite-switch input:not(:checked) + .satellite-toggle {
    background-image: url('img/Satellite_Deselected.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  .zoom-controls {
    padding-top: 0rem;
    position: absolute;

    button {
      display: block;
      min-width: 35px;
      width: 35px;
      height: 35px;
      padding: 0;
      border-color: var(--dark-blue);
      color: var(--dark-blue);
      background-color: var(--white);

      &:focus {
        box-shadow: 0 0 0 0 rgba(255, 141, 200, 0.5) !important;
      }

      &:hover {
        color: var(--white);
        background-color: var(--dark-blue);
      }

      span {
        font-weight: bold;
        font-size: 24px;
      }
    }

    #zoomInButton {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: none;
    }

    #zoomOutButton {
      border-top-left-radius: 0;
      border-top-right-radius: 0
    }
  }
}

div.map-tooltip {
  background: var(--white);
  color: var(--dark-blue);
  font: normal 12px Arial, Helvetica, sans-serif;
  padding: .4em 1em;
  text-align: center;
  text-shadow: none;
  white-space: nowrap;
  border-radius: .4em;
  border: solid 1px var(--dark-blue);
  position: absolute;
  z-index: 999;
}

.tooltip-hidden {
  display: none;
}

.country-name-link {
  color: var(--white);

  &:link {
    color: var(--white);
    text-decoration: none;
  }

  &:hover {
    color: var(--white);
  }
}

.hidden {
  display: none!important;
}