/* COLORS
background:  #222233 /  34, 34, 51
text:        #a1a1b3 / 161,161,179
links:       #0192d9 /   1,146,217

beige:       #f1eee8 / 241,238,232
lightblue:   #0192d9 /   1,146,217
darkblue:    #050585 /   5,  5,133
gray:        #d9d0c9 / 217,208,201
purple:      #ac39ac / 172, 57,172

red icon:    #d40055 / 212,  0, 85
blue icon:   #0055d4 /   0, 85,212
green icon:  #00d455 /   0,212, 85
gray icon:   #6c5d53 / 108, 93, 83
yellow icon: #ffdd55 / 255,221, 85 */

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: sans-serif;
}

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

.bold {
  font-weight: bold;
}

.text-small {
  font-size: 0.8em;
}

.text-medium {
  font-size: 0.9em;
}

.w-20 {
  width: 20px;
}

.w-45 {
  width: 45px;
  min-width: 45px;
}

.w-120 {
  width: 120px;
  min-width: 120px;
}

.w-240 {
  width: 240px;
}

.w-260 {
  width: 260px;
}

.w-315 {
  width: 315px;
}

.w-340 {
  width: 340px;
}

.pl-20 {
  padding-left: 20px;
}

.slider-toggle-input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.slider-toggle-input[type=checkbox]:checked ~ .slider-overlay,
.slider-toggle-input[type=checkbox]:checked ~ .slider {
  transform: translate3d(0, 0, 0);
}

.slider-toggle-input[type=checkbox]:checked ~ .slider-toggle-button {
  transform: translate3d(-490px, 0, 0) rotate(180deg);
}

.slider-toggle-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 250000;
  cursor: pointer;
  transform-origin: 20px 20px;
  transition: transform .8s;
}

.slider-toggle-bar {
  display: none;
}

.slider-overlay {
  position: absolute;
  right: 30px;
  width: 470px;
  z-index: 200000;
  transform: translate3d(490px, 0, 0);
  transition: all .8s;
}

/*#news.slider-overlay {
  display: flex;
  align-items: flex-end;
  top: 95px;
  right: -255px;
  color: #ffdd55;
  font-weight: bold;
}

#news.slider-overlay .text {
  padding-left: 10px;
}*/

#anchorbar.slider-overlay {
  top: 10px;
}

#buttonbar.slider-overlay {
  top: 52px;
}

.topbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  width: 470px;
  height: 40px;
  background: #0192d9;
  color: #f1eee8;
}

.topbar.anchorbar {
  background-color: rgba(1, 146, 217, 0.9);
}

.topbar.buttonbar {
  background-color: rgba(1, 146, 217, 0.6);
}

.mobile-bar-padding {
  width: 0;
}

.bar-button {
  width: 80px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.bar-button:hover {
  border: 1px solid #f1eee8;
}

.bar-button.main {
  width: 120px;
}

.bar-button.search {
  background-image: url('../images/button_search.png');
}

.bar-button.stats {
  background-image: url('../images/button_stats.png');
}

.bar-button.permalink {
  background-image: url('../images/button_permalink.png');
}

.search-group {
  position: relative;
}

#search-overlay {
  display: none;
  position: absolute;
  top: 42px;
  width: 430px;
  padding: 30px 20px;
  background-color: rgba(1, 146, 217, 0.9);
  color: #f1eee8;
}

.search-field-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

#search-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #222233;
  border: 1px solid #f1eee8;
  border-radius: 0px;
  border-right: none;
  color: #f1eee8;
  width: 320px;
  height: 30px;
  line-height: 30px;
  padding: 0px 10px;
  font-family: monospace;
  font-weight: bold;
}

#search-input:focus {
  outline: 0;
}

.search-button {
  width: 34px;
  height: 32px;
  background-image: url('../images/button_search.png');
  background-repeat: no-repeat;
  background-position: center;
  background-color: #222233;
  border: 1px solid #f1eee8;
  border-left: 1px solid transparent;
  color: #f1eee8;
  cursor: pointer;
}

.search-button:hover {
  border-left: 1px solid #f1eee8;
}

.search-button:focus {
  outline: 0;
}

#search-results-overlay {
  display: none;
  position: absolute;
  top: 136px;
  bottom: 0;
  width: 470px;
  overflow-y: auto;
  background: #0192d9;
  background-color: rgba(1, 146, 217, 0.9);
  color: #f1eee8;
}

#search-spinner-block {
  display: none;
  padding: 20px 0;
}

#search-spinner {
  display: flex;
  justify-content: center;
}

#search-results-list-block {
  display: none;
  padding: 20px 0;
}

#search-results-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-result {
  width: 370px;
  padding: 15px 20px;
  border: 1px solid transparent;
  border-bottom: 1px dotted #f1eee8;
  line-height: 25px;
  cursor: pointer;
}

.search-result:first-child {
  border-top: 1px dotted #f1eee8;
}

.search-result:hover {
  background-color: #222233;
}

.search-more {
  width: 100px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.search-more:hover {
  border: 1px solid #f1eee8;
}

.search-more.search-previous {
  background-image: url('../images/button_previous.png');
  margin-bottom: 10px;
}

.search-more.search-next {
  background-image: url('../images/button_next.png');
  margin-top: 10px;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  background-image: url('../images/close.png');
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}

.close:hover {
  border: 1px solid #f1eee8;
}

.language-toggle-input {
  display: none;
}

.language-toggle-input[type=checkbox]:checked ~ .language-toggle-button #language li ul {
  display: block;
}

#language {
  background-image: url('../images/button_language.png');
  list-style:none;
  padding: 0;
  z-index: 300000;
}

#language li {
  position: relative;
  text-align: center;
}

#language ul {
  display: none;
  list-style: none;
  position: absolute;
  padding: 0;
}

#language ul a {
  color: #f1eee8;
  font-family: monospace;
  font-size: 1em;
  text-decoration: none;
}

#language ul li {
  width: 80px;
  height: 30px;
  line-height: 30px;
  margin-top: 2px;
  background-color: rgba(1, 146, 217, 0.9);
  border: 1px solid #f1eee8;
}

#language ul a:first-child li {
  margin-top: 18px;
}

#language ul li:hover {
  background-color: rgba(1, 146, 217, 0.6);
}

.language-current {
  font-weight: bold;
}

.slider {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0px;
  right: 0px;
  width: 500px;
  height: 100%;
  z-index: 100000;
  background: #f1eee8;
  background-color: rgba(34, 34, 51, 0.95);
  color: #a1a1b3;
  overflow-y: auto;
  transform: translate3d(490px, 0, 0);
  transition: all .8s;
}

.slider a {
  color: #0192d9;
  text-decoration: none;
}

.slider a:hover {
  color: #a1a1b3;
}

.slider-item {
  box-sizing: border-box;
  flex-shrink: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.slider-logo {
  padding: 140px 0 20px 0;
}

.slider-logo img {
  display: block;
  margin: 0 auto;
}

.slider-title {
  padding-top: 120px;
  padding-bottom: 20px;
  padding-left: 40px;
}

.slider-subtitle {
  text-align: center;
}

.slider-translation {
  text-align: center;
  font-style: italic;
  padding: 20px 40px 0 40px;
}

.slider-list-title {
  padding-top: 40px;
  padding-bottom: 20px;
  padding-left: 20px;
  font-weight: bold;
}

.text-small .slider-list-title {
  font-size: 1.25em;
}

.slider-list-section {
  padding-left: 20px;
  font-weight: bold;
  font-size: 0.9em;
}

.slider-list-section-toggle {
  display: none;
}

.slider-list-section-toggle + .slider-list-section {
  cursor: pointer;
  display: block;
  font-weight: bold;
  margin-top: 10px;
}

.slider-list-section-toggle + .slider-list-section + div {
  display: none;
}

.slider-list-section-toggle:checked + .slider-list-section + div {
  display: block;
}

.slider-list-section-toggle + .slider-list-section:before {
  content: "\002B\2000"; /*plus icon + whitespace*/
  display: block;
  float: left;
}

.slider-list-section-toggle:checked + .slider-list-section:before {
  content: "\2212\2000"; /*minus icon + whitespace*/
}

.slider-list-entry {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-top: 10px;
  padding-left: 20px;
}

.example-boxes {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.example-boxes .example-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.example-boxes .example-box .example-box-image {
  border: 1px solid #a1a1b3;
  margin: 5px;
  padding: 10px 5px;
}

.example-boxes .example-box .example-box-description {
  margin: 10px;
}

.slider-footer {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
}

.slider-credits-title {
  font-weight: bold;
  padding-bottom: 10px;
}

.slider-credit-type {
  padding-top: 6px;
}

/* MOBILE SETTINGS */
@media only screen and (max-width: 600px) {
  .slider,
  .slider-item,
  .slider-list-entry .fieldofview,
  .slider-overlay,
  .slider-toggle-bar,
  .topbar,
  .w-240,
  .w-260,
  .w-315,
  .w-340 {
    width: 100%;
  }

  .slider-toggle-button {
    display: none;
  }

  .slider-toggle-bar {
    display: inherit;
  }

  .slider-overlay {
    right: 0;
  }

  .slider-toggle-bar {
    position: absolute;
    bottom: 16px;
    z-index: 250000;
    cursor: pointer;
    background-color: rgba(1, 146, 217, 0.6);
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    color: #f1eee8;
  }

  .slider-toggle-bar.toggle-false {
    display: none;
  }

  .slider-toggle-input[type=checkbox]:not(:checked) ~ .slider-overlay {
    width: 470px;
    right: 20px;
  }

  .slider-toggle-input[type=checkbox]:not(:checked) ~ .slider-toggle-bar.toggle-false {
    display: inherit;
  }

  .slider-toggle-input[type=checkbox]:not(:checked) ~ .slider-toggle-bar.toggle-true {
    display: none;
  }

  .topbar {
    position: inherit;
  }

  .slider {
    transform: translate3d(500px, 0, 0);
  }

  .slider-toggle-input[type=checkbox]:not(:checked) ~ .slider {
    right: 0px;
    width: 500px;
  }

  .slider-item, .slider-translation {
    padding-left: 20px;
    padding-right: 20px;
  }

  .slider-list-entry,
  .slider-list-section,
  .slider-list-title {
    padding-left: 10px;
  }

  .example-boxes {
    flex-direction: column;
  }

  .example-boxes .example-box {
    flex-direction: row;
  }

  .example-boxes .example-box .example-box-image {
    margin-left: 10px;
  }

  .slider-footer {
    padding-bottom: 80px;
  }

  #search-overlay {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .search-field-row {
    padding-right: 40px;
    padding-left: 40px;
  }

  #search-results-overlay {
    width: 100%;
  }

  .search-result {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .search-result div {
    padding-right: 20px;
    padding-left: 20px;
  }
}

/* Label with number of composite cameras. */
.composite-cameras-label {
  background-color: rgba(1, 146, 217, 0.66);
  background-clip: padding-box;
  color: #fff;
  border: 4px solid rgba(0,0,0,0.25);
  border-radius: 4px;
  font-weight: bold;
  padding: 3px 6px;
  box-shadow: none;
}

.composite-cameras-label.leaflet-tooltip-right::before {
  left: -4px;
  border-right-color: rgba(0,0,0,0.25);
}

.composite-cameras-label.leaflet-tooltip-left::before {
  right: -4px;
  border-left-color: rgba(0,0,0,0.25);
}

.cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #222233;
  color: #a1a1b3;
}

.to-be-translated {
  color: #d40055;
}
.to-be-translated a {
  color: #ac39ac;
  text-decoration: none;
}

.to-be-translated a:hover {
  color: #d40055;
}

/* overwrite leaflet styles */

.leaflet-popup-content-wrapper {
  background: rgba(34, 34, 51, 0.95);
  color: #a1a1b3;
  font-size: 0.9rem;
  border-radius: 5px;
}

.leaflet-popup-content-wrapper a {
  color: #0192d9;
  text-decoration: none;
}

.leaflet-popup-content-wrapper a:hover {
  color: #a1a1b3;
}

.leaflet-popup-tip {
  background: rgba(34, 34, 51, 0.95);
  color: #a1a1b3;
}

.leaflet-bar a {
  background: rgba(34, 34, 51, 0.95);
  color: #a1a1b3;
}

.leaflet-bar a:hover {
  background: rgba(34, 34, 51, 0.8);
  color: #a1a1b3;
}

.leaflet-container a.leaflet-popup-close-button {
  top: 4px;
  right: 4px;
}