/*
	Website "fischblick.at"

	Author: Damian Heini, VIZUAL <dh@vizual.ch>

	All the map CSS.
*/
.viz-header-reduced-height #viz-action-button-container {
  top: 5rem;
}
#viz-action-button-container {
  display: flex;
  column-gap: 2rem;
  row-gap: 1rem;
  position: fixed;
  top: 9.75rem;
  right: 0;
  padding: 1.25rem 2rem 0.5rem 0.75rem;
  transition: all 300ms ease;
  background-color: rgba(255,255,255,0.9);
  z-index: 1009;
}
#viz-action-button-container .viz-filter-button,
#viz-action-button-container .viz-share-button {
  position: relative;
  display: flex;
  column-gap: 1rem;
  align-items: center;
  font-family: 'Roboto Slab', serif;
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.125em;
  line-height: 1.25em;
  font-size: 1.5rem;
  color: #3c4c62;
}
#viz-action-button-container .viz-filter-button:hover,
#viz-action-button-container .viz-share-button:hover,
#viz-action-button-container .viz-filter-button.active,
#viz-action-button-container .viz-share-button.active {
  cursor: pointer;
  color: #76a6ce;
}
#viz-action-button-container .viz-filter-button:hover .viz-button-icon svg path,
#viz-action-button-container .viz-share-button:hover .viz-button-icon svg path,
#viz-action-button-container .viz-filter-button.active .viz-button-icon svg path,
#viz-action-button-container .viz-share-button.active .viz-button-icon svg path,
#viz-action-button-container .viz-filter-button:hover .viz-button-icon svg line,
#viz-action-button-container .viz-share-button:hover .viz-button-icon svg line,
#viz-action-button-container .viz-filter-button.active .viz-button-icon svg line,
#viz-action-button-container .viz-share-button.active .viz-button-icon svg line,
#viz-action-button-container .viz-filter-button:hover .viz-button-icon svg circle,
#viz-action-button-container .viz-share-button:hover .viz-button-icon svg circle,
#viz-action-button-container .viz-filter-button.active .viz-button-icon svg circle,
#viz-action-button-container .viz-share-button.active .viz-button-icon svg circle {
  stroke: #76a6ce;
}
#viz-action-button-container .viz-filter-button .viz-button-text,
#viz-action-button-container .viz-share-button .viz-button-text {
  display: block;
  transition: color 300ms ease;
}
#viz-action-button-container .viz-filter-button .viz-button-icon,
#viz-action-button-container .viz-share-button .viz-button-icon {
  display: block;
  height: 1.25em;
}
#viz-action-button-container .viz-filter-button .viz-button-icon svg,
#viz-action-button-container .viz-share-button .viz-button-icon svg {
  height: inherit;
  width: auto;
}
#viz-action-button-container .viz-filter-button .viz-button-icon svg line,
#viz-action-button-container .viz-share-button .viz-button-icon svg line,
#viz-action-button-container .viz-filter-button .viz-button-icon svg path,
#viz-action-button-container .viz-share-button .viz-button-icon svg path,
#viz-action-button-container .viz-filter-button .viz-button-icon svg circle,
#viz-action-button-container .viz-share-button .viz-button-icon svg circle {
  transition: fill, stroke 300ms ease;
}
.viz-action-box {
  position: fixed;
  top: 14.15rem;
  min-width: 18rem;
  max-height: 100%;
  padding: 2rem 1.5rem 1rem 1.5rem;
  border-radius: 5px;
  background-color: #3c4c62;
  transition: top 300ms ease;
  z-index: 1009;
  opacity: 0;
}
.viz-action-box .viz-close-button {
  display: flex;
  justify-content: flex-end;
}
.viz-action-box.active {
  right: 0;
  opacity: 1;
  animation: filterBoxFadeIn 0.6s ease forwards;
}
.viz-header-reduced-height .viz-action-box {
  top: 9.4rem;
}
#viz-my-data-filter {
  margin-bottom: 2rem;
}
#viz-my-data-filter label {
  display: flex;
  align-items: center;
}
#viz-my-data-filter label .checkbox-text-wrapper {
  display: flex;
  align-items: center;
}
#viz-my-data-filter label .checkbox-text-wrapper span {
  flex: 1 1 auto;
}
#viz-my-data-filter label .checkbox-text-wrapper svg {
  flex: 0 0 1.75em;
  height: 1.25em;
}
#viz-share-box,
#viz-filter-box {
  right: -400px;
}
#viz-share-box #viz-filter-form-overlay,
#viz-filter-box #viz-filter-form-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: rgba(255,255,255,0.7);
  transition: opacity 200ms ease;
}
#viz-share-box #viz-filter-form-overlay.active,
#viz-filter-box #viz-filter-form-overlay.active {
  display: block;
  opacity: 1;
}
#viz-share-box .viz-filter-content .viz-filter-box-bottom,
#viz-filter-box .viz-filter-content .viz-filter-box-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#viz-share-box form,
#viz-filter-box form {
  margin-bottom: 0;
}
#viz-share-box form label,
#viz-filter-box form label {
  color: #fff;
}
#viz-share-box form .viz-form-field-wrapper,
#viz-filter-box form .viz-form-field-wrapper {
  margin-bottom: 1rem;
}
#viz-share-box form select,
#viz-filter-box form select {
  position: relative;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  padding-right: 2em;
  background-repeat: no-repeat;
  background-size: 1.25em;
  background-position: 96% center;
  background-image: url("../Images/arrow_down.svg");
}
#viz-share-box form input[type=submit],
#viz-filter-box form input[type=submit],
#viz-share-box form input[type=reset],
#viz-filter-box form input[type=reset],
#viz-share-box form button,
#viz-filter-box form button {
  padding: 0.5em 1em;
}
#viz-share-box #viz-fish-species-form,
#viz-filter-box #viz-fish-species-form {
  margin-top: 2rem;
  height: 0;
  overflow: hidden;
}
#viz-share-box #viz-fish-species-form .viz-fish-species-label,
#viz-filter-box #viz-fish-species-form .viz-fish-species-label {
  display: flex;
  align-items: center;
}
#viz-share-box #viz-fish-species-form #viz-fish-species-reset-btn,
#viz-filter-box #viz-fish-species-form #viz-fish-species-reset-btn {
  margin: 0 0 0 0.5rem;
  font-size: 0.9rem;
  padding: 0.125em 0.25em;
}
#viz-share-box #viz-fish-species-form.populated,
#viz-filter-box #viz-fish-species-form.populated {
  height: auto;
  overflow: visible;
}
#viz-share-box #viz-fish-species-form .viz-fish-species-checkboxes,
#viz-filter-box #viz-fish-species-form .viz-fish-species-checkboxes {
  height: auto;
  max-height: 30vh;
  overflow-y: scroll;
  padding: 0.5rem 0 1rem 0;
}
#viz-share-box #viz-form-waterbodies-container,
#viz-filter-box #viz-form-waterbodies-container {
  display: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
#viz-share-box #viz-form-waterbodies-container.visible,
#viz-filter-box #viz-form-waterbodies-container.visible {
  display: block;
  opacity: 1;
}
#viz-share-box #viz-filter-export-container,
#viz-filter-box #viz-filter-export-container {
  margin-top: 0.25rem;
}
.viz-share-box {
  color: #fff;
  max-width: 40rem;
}
.viz-share-box .viz-message-container {
  margin-bottom: 2rem;
}
.viz-share-box form input,
.viz-share-box form textarea {
  color: #3c617e;
}
#viz-map-app {
  position: relative;
  width: auto;
  height: calc(100vh - 9.75rem + 8rem);
  margin-bottom: 4rem;
}
#viz-map-app .viz-map-container {
  width: inherit;
  height: inherit;
}
#viz-map-app #viz-map-view {
  width: inherit;
  height: inherit;
}
#viz-map-app .layer-switcher {
  position: absolute;
  top: 0;
  left: 7rem;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#viz-map-app .species-tooltip {
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 1000;
}
@media (min-width: 100rem) {
  #viz-map-app {
    margin-left: calc((100vw - 100rem) / (-2));
    margin-right: calc((100vw - 100rem) / (-2));
  }
}
@-moz-keyframes filterBoxFadeIn {
  0% {
    opacity: 0;
    right: 0;
    max-height: 1%;
  }
  60% {
    max-height: 100%;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}
@-webkit-keyframes filterBoxFadeIn {
  0% {
    opacity: 0;
    right: 0;
    max-height: 1%;
  }
  60% {
    max-height: 100%;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}
@-o-keyframes filterBoxFadeIn {
  0% {
    opacity: 0;
    right: 0;
    max-height: 1%;
  }
  60% {
    max-height: 100%;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}
@keyframes filterBoxFadeIn {
  0% {
    opacity: 0;
    right: 0;
    max-height: 1%;
  }
  60% {
    max-height: 100%;
  }
  100% {
    opacity: 1;
    right: 0;
  }
}
@-moz-keyframes filterBoxFadeOut {
  0% {
    opacity: 1;
    right: 0;
    max-height: 100%;
  }
  99% {
    opacity: 0;
    right: 0;
    max-height: 1%;
  }
  100% {
    opacity: 0;
    right: -400px;
  }
}
@-webkit-keyframes filterBoxFadeOut {
  0% {
    opacity: 1;
    right: 0;
    max-height: 100%;
  }
  99% {
    opacity: 0;
    right: 0;
    max-height: 1%;
  }
  100% {
    opacity: 0;
    right: -400px;
  }
}
@-o-keyframes filterBoxFadeOut {
  0% {
    opacity: 1;
    right: 0;
    max-height: 100%;
  }
  99% {
    opacity: 0;
    right: 0;
    max-height: 1%;
  }
  100% {
    opacity: 0;
    right: -400px;
  }
}
@keyframes filterBoxFadeOut {
  0% {
    opacity: 1;
    right: 0;
    max-height: 100%;
  }
  99% {
    opacity: 0;
    right: 0;
    max-height: 1%;
  }
  100% {
    opacity: 0;
    right: -400px;
  }
}