@import "/assets/esri/themes/light/main.css";

*,
*:before,
*:after {
  box-sizing: border-box;
}
* {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
}
@font-face {
  font-family: gt-pressura-regular;
  src: url("/fonts/GT-Pressura-Regular-Trial.otf") format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: gt-pressura-regular;
  src: url("/fonts/GT-Pressura-Regular-Trial.otf") format("opentype");
  font-weight: 700;
}
html,
body {
  --wn-primary-color: #0061F3;
  --wn-primary-disabled-color: rgba(0, 38, 95, .4);
  --wn-secondary-color: #2AC47E;
  --wn-primary-bright-color: rgba(29, 119, 255, 1);
  --wn-primary-dark-color: rgba(0, 85, 212, 1);

  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.esri-view-surface:focus::after{
  outline: none!important;
}
main {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}
b {
  font-weight: 800;
}

h1,
h1 a,
h1 span {
  font-size: 28px;
  line-height: 28px;
  font-weight: 800;
}

h2,
h2 a,
h3 span {
  font-size: 22px;
  line-height: 24px;
  font-weight: 600;
}

h3,
h3 a,
h3 span {
  font-size: 18px;
  line-height: 20px;
  font-weight: 400;
}

h4,
h4 a,
h4 span {
  font-family: "gt-pressura-regular", sans-serif;
  font-size: 16px;
  font-weight: 400;
}

h5,
h5 a,
h5 span {
  font-family: "gt-pressura-regular", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.header {
  font-family: "gt-pressura-regular", sans-serif;
  font-size: 22px;
}

/*.welcome-header {
  text-align: center;
  margin-top: 32px;
  margin-bottom: 44px;
}
.welcome-header > * {
  margin: 0;
  padding: 0;
}
.welcome-header > *:not(:first-child) {
  margin-top: 5px;
}
.white {
  color: white;
}*/

#arcgis-map-container {
  width: 100%;
  height: 100%;
}

#update-overlay:not([hidden]),
#warning-overlay[visible] {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  user-select: none;
}
#update-overlay:not([hidden]) {
  z-index: 4;
}
#warning-overlay[succes] .warning {
  display: none;
}

#warning-overlay[succes] .succes {
  display: block;
}

#warning-overlay:not([succes]) .warning {
  display: block;
}

#warning-overlay:not([succes]) .succes {
  display: none;
}

#warning-overlay[small][visible] .overlay-inner {
  padding: 4px 16px;

}

#warning-overlay[small][visible] h3,
#warning-overlay[small][visible] button,
#warning-overlay[small][visible] p[full-text] {
  display: none;
}

#warning-overlay[small][visible] p[light-text]  {
  display: block;
}

#update-overlay h3,
#update-overlay button,
#update-overlay p,
#warning-overlay[visible] h3,
#warning-overlay[visible] button,
#warning-overlay[visible] p[full-text] {
  display: block;
}


#warning-overlay[visible] p[light-text]  {
  display: none;
}

#update-overlay[hidden],
#warning-overlay:not([visible]) {
  display: none;
}

.prompt:not([visible]) {
  display: none;
}

.prompt {
  display: block;
  position: absolute;
  bottom: 5%;
  z-index: 4;
  right: 0;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  user-select: none;
}

header {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 100%;
  height: auto;
  max-width: 160px;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  user-select: none;
  flex-direction: column;
}
header a {
  pointer-events: all;
  user-select: auto;
}
header a img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
header #demo-version-indicator {
  margin: 0;
  font-size: 18px;
  color: var(--wn-primary-color, rgba(0, 97, 243, 1));
}
.action-button {
  background: var(--wn-primary-color, rgba(0, 97, 243, 1));
  font-size: 16px;
  border-radius: 10px;
  color: #FFFFFF;
  padding: 10px 16px 10px 16px;
  border: 1px solid var(--wn-primary-color, rgba(0, 97, 243, 1));
  cursor: pointer;
  pointer-events: all;
}

.action-button[disabled] {
  background: var(--wn-primary-disabled-color, grey);
  border: 1px solid var(--wn-primary-disabled-color, grey);
  cursor: auto;
  pointer-events: none;
}

.action-button:hover {
  background: var(--wn-light-color, rgba(29, 119, 255, 1));
  font-size: 16px;
  border-color: var(--wn-light-color, rgba(29, 119, 255, 1));
}

.action-button:active {
  background: var(--wn-dark-color, rgba(0, 85, 212, 1));
  font-size: 16px;
  border-color: var(--wn-dark-color, rgba(29, 119, 255, 1));
}

.action-button[secondary] {
  background: transparent;
  font-size: 16px;
  color: var(--wn-primary-color, rgba(29, 119, 255, 1));

  border-color: var(--wn-primary-color, rgba(29, 119, 255, 1));
}

.action-button[secondary]:hover {
  background: var(--wn-light-color, rgba(29, 119, 255, 1));
  border-color: var(--wn-light-color, rgba(29, 119, 255, 1));
  color: #FFFFFF;
  font-size: 16px;
}

.action-button[secondary]:active {
  background: transparent;
  font-size: 16px;
  color: var(--wn-dark-color, rgba(29, 119, 255, 1));
  border-color: var(--wn-dark-color, rgba(29, 119, 255, 1));
}

/* For the zoom + - buttons */
#widget-container {
  position: absolute;
  bottom: 40%;
  right: 12px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  width: fit-content;
  align-items: flex-end;
  gap: 24px;
}

#widget-container button {
  height: 60px;
  width: 60px;
  background: #FFFFFF;
  border-radius: 50%;
  border: 0;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#widget-container button#pwa-widget-button,
#widget-container button#pwa-widget-button * {
  background: #2256de;
  color: #fff;
  fill: #fff;
}
#widget-container button#pwa-widget-button {
  border-radius: 16px;
  box-shadow: -1px 1px 3px 1px #777f8d;
}
#location-text-popup-svg {
  width: 100%;
  max-height: 200px;
  position: absolute;
  top: 120px;
}
#location-popup-text {
  font-size: 21px !important;
}

#curve {
  fill: transparent;
}

#widget-container *:active {
  outline: none;
}

#locate-button {
  width: 60px;
  height: 115px;
  background-color: #fff;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  position: relative;
  padding: 5px;
}

.switch-indicator {
  position: absolute;
  top: 5px;
  background-color: #0061F3;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#locate-button .switch-container-svg-container{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}
.switch-container.top .switch-indicator {
  transform: translateY(0);
}

.switch-container.bottom .switch-indicator {
  transform: translateY(55px);
}

.switch-container .switch-svg {
  z-index: 2;
  position: relative;
}

.switch-container.top .switch-container-svg-container .top-svg {
  color: #ffffff;
}

.switch-container.top .switch-container-svg-container .bottom-svg {
  color: #0061F3;

}
.switch-container.bottom .switch-container-svg-container .top-svg {
  color: #0061F3;

}
.switch-container.bottom .switch-container-svg-container .bottom-svg {
  color: #ffffff;
}

.switch-svg {
  pointer-events: none;
}

#menu-button:not(:hover) #menu-default {
  display: block;
}
#menu-button:hover #menu-default {
  display: none;
}

#menu-button:not(:hover) #menu-hover {
  display: none;
}
#menu-button:hover #menu-hover {
  display: block;
}
#menu-button img {
  width: 100%;
  height: 100%;
  outline: none;
}
#menu-button #menu-default,
#menu-button #menu-hover {

  pointer-events: none;
  user-select: none;
}

.row-justify-between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.align-center {
  display: flex;
  align-items: center;
}
.menu-arcticle-link-item span {
  align-self: center;
}
.menu-arcticle-link-item + .menu-arcticle-link-item{
  margin-top: 4px;

}
#menu {
  width: 390px;
  background: var(--wn-primary-color, rgba(29, 119, 255, 1));
  display: block;

  height: 100%;
  min-height: 0;
  overflow: auto;
  position: relative;
  z-index: 5;
  user-select: auto;
  pointer-events: all;
}

#menu .menu-content {
  display: flex;
  flex-direction: column;
  padding: 75px 8px;
  min-height: 0;
}

#menu .menu-content .menu-article {
  background: #FFFFFF;
  padding: 8px;
  font-size: 12px;
  border-radius: 5px;
  max-height: 240px;
  align-items: center;
  overflow: auto;
}

#menu .menu-content h4 {
  text-transform: uppercase;
  color: #FFFFFF;
}
#menu .menu-content .menu-article#install-pwa-article {
  background-color: var(--wn-secondary-color);
  display: none;
}
#menu .menu-content .menu-article#install-pwa-article h5 {
  color: #FFFFFF;
  margin: 0;
}
#menu .menu-content h4,
#menu .menu-content .menu-article#install-pwa-article,
#menu .menu-content .menu-article#install-pwa-article button {
  margin: 16px 0 8px 0;
}
#menu .menu-content .menu-article p:first-of-type {
  margin-top: 0;
}
#menu .menu-content .menu-article p:last-child {
  margin-bottom: 0;
}
#menu .menu-content .menu-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFFFFF;
  margin-top: 16px;
}
#menu .menu-content .menu-footer p {
  margin: 0;
}
#menu-close-button {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  padding: 0;
  margin: 0;

  border: none;
  background: transparent;
  cursor: pointer;
}
#menu-close-button img {
  width: 100%;
  height: 100%;
}
#menu-close-button img#close-icon {
  display: none;
}
#menu-close-button img#close-icon-desktop {
  display: block;
}
.prompt-button {
  display: flex;
  align-items: center;
}
.prompt-button .prompt-close-img {
  height: 24px;
  width: 24px;
  margin-left: 8px;
  pointer-events: all;
}
.legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  gap: 6px;
}

.legend >div {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.legend >div p {
  margin: 0;
}
.legend >div img {
  height: 24px;
  min-width: 24px;
  object-fit: contain;
}
#locate-button[disabled] {
  pointer-events: none;
  user-select: none;
  background-color: #dddddd;
}

@media (display-mode: standalone) {
  #menu .menu-content .menu-article#install-pwa-article {
    display: none !important;
  }
}

@media (display-mode: fullscreen) {
  #menu .menu-content .menu-article#install-pwa-article {
    display: none !important;
  }
}

@-webkit-keyframes pulsing {
  25% {
    outline-width: 3px;
  }
  50% {
    outline-width: 4px;
  }
  75% {
    outline-width: 3px;
  }
  0% {
    outline-width: 2px;
  }
}
@keyframes pulsing {
  25% {
    outline-width: 3px;
  }
  50% {
    outline-width: 4px;
  }
  75% {
    outline-width: 3px;
  }
  0% {
    outline-width: 2px;
  }
}

#out-of-service-overlay:not([hidden]),
#disclaimer-overlay:not([accepted]),
#info-overlay[visible],
#pwa-install-message-overlay[visible],
#location-permission-overlay[visible] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.25);
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 5;
  user-select: auto;
  pointer-events: all;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.3s 0s, opacity 0.3s linear;
}
#out-of-service-overlay:not([hidden]) {
  z-index: 6;
}
#disclaimer-overlay:not([accepted]),
#out-of-service-overlay:not([hidden]) {
  background-color: var(--wn-primary-bright-color);
}

#location-permission-overlay {
  text-align: left;
}

#disclaimer-overlay .action-button,
#out-of-service-overlay .action-button {
  font-family: "gt-pressura-regular", sans-serif;
}
.overlay-logo-green {
  margin-top: 24px;
}
.overlay-logo {
  margin-top: 20px;
  margin-bottom: 24px;
}
.overlay-logo img {
  max-width: 90vw;
  width: 500px;
}
#disclaimer-overlay terms-of-service {
  margin-top: 28px;
  --terms-of-service-background-color: rgba(29, 119, 255, 15%);
  --terms-of-service-box-shadow: 0px 2px 2px -1px #777f8d
}
#disclaimer-overlay article ol li {
  margin-bottom: 6px;
}

#disclaimer-overlay article h5,
#disclaimer-overlay terms-of-service h5 {
  margin-top: 0;
}
#disclaimer-overlay[accepted],
#out-of-service-overlay[hidden],
#info-overlay:not([visible]),
#pwa-install-message-overlay:not([visible]),
#location-permission-overlay:not([visible]) {
  user-select: none;
  pointer-events: none;
  position: absolute;
  top: -10000px;
  left: -10000px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  z-index: 5;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.3s, opacity 0.3s linear, left 0s 0.3s, top 0s 0.3s;
}
button,
#locate-button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#menu-container[visible] {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  z-index: 5;
  user-select: auto;
  pointer-events: none;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.3s 0s, opacity 0.3s linear, right 1s;
  max-width: 600px;
}
#menu-container:not([visible]) {
  user-select: none;
  pointer-events: none;
  position: absolute;
  right: -2000px;
  top: 0;
  height: 100%;
  max-width: 600px;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 0.3s, opacity 0.3s linear, right 1s, top 0s 0.3s;
}
#disclaimer-overlay[accepted] *,
#info-overlay:not([visible]) *,
#pwa-install-message-overlay:not([visible]) *,
#location-permission-overlay:not([visible]) * {
  display: none;
}

.overlay-inner {
  display: block;
  text-align: left;
  margin: 12px 12px;
  overflow: auto;
  padding: 32px 25px;
  background: #fff;
  border-radius: 12px;
  max-width: 600px;
}
#update-overlay .overlay-inner {
  width: 100%;
}

#update-overlay {
  pointer-events: none;
  touch-action: none;
}

.overlay-inner {
  pointer-events: all;
  touch-action: auto;
}

#update-overlay-button {
  letter-spacing: 1px;
  margin: auto;
  margin-top: 10px;
}

#pwa-install-message-overlay img {
  height: 24px;
}
.message {
  display: inline-block;
}
.message h4 {
  margin-top: 0;
}

#loading-state-indicator {
  position: absolute;
  z-index: 3;
  top: calc(50% - 11.25px);
  left: calc(50% - 35px);
  pointer-events: none;
  user-select: none;
}

.loader > div {
  width: 18px;
  height: 18px;

  background-color: var(--wn-primary-color);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.loader > div + div {
  margin-left: 4px;
}

.loader .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
#loading-state-indicator[visible] .loader {
  display: block;
}

#loading-state-indicator:not([visible]) .loader {
  display: none;
}

.flex-align-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.esri-attribution,
.esri-attribution__link {
  user-select: none!important;
  pointer-events: none!important;
  cursor: default;
}
@media (pointer: fine) {
  #widget-container {
    top: 24px;
    right: 24px;
    bottom: auto;
  }
  #widget-container #locate-button {
    display: none;
  }
}

@media (pointer: coarse) {
  #widget-container {
    bottom: 64px;
  }
  #menu {
    width: 100%;
  }
  #menu .menu-content {
    padding: 42px 8px;
  }

  #menu-container[visible],
  #menu-container:not([visible]) {
    width: 100%;
  }

  #menu-close-button {
    position: absolute;
    top: 24px;
    right: 9px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
  }
  #menu-close-button img#close-icon {
    display: block;
  }
  #menu-close-button img#close-icon-desktop {
    display: none;
  }
  #warning-overlay .overlay-inner,
  #update-overlay .overlay-inner {
    max-width: 100%;
    text-align: center;
  }
  * {
    font-size: 12px;
  }

}

@media (pointer: coarse) and (max-width: 940px) {
  #warning-overlay .overlay-inner,
  #update-overlay .overlay-inner {
    width: 100%;
    min-height: 80px;
  }
  #warning-overlay .overlay-inner,
  #update-overlay .overlay-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}


@media (max-width: 320px) {
  #widget-container {
    bottom: 64px;
  }
}

[hidden] {
  display: none !important;
}

#locate-buttons{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

.bookmark-button{
  color: #0061f3;
  background: #ffffff;
  border: 1px solid grey;
  border-radius: 4px;
  padding: 2px 0px;
  cursor: pointer;
  float: left;
  width: 32%;
  max-width: 200px;
  height: 24px;
  margin:2px;
  overflow: visible;
}

.bookmark-button.active{
  background-color: #2ac47e;
  border-color: #2ac47e;
  color:white;
}


.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.legend-column{
  display:flex;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: left !important;
}


.legend-row{
  display: flex;
  flex-direction: row !important;
  align-items:center;
}

.legend-row.large{
  margin-left: -12px !important
}
.legend-text{
  margin-left:7px !important;
}

.legend-item{
  display: flex;
}

.legend-item.double{
  margin-right:5px !important
}

.legend-text.large{
  margin-left:24px !important;
}

  /* Works on Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  *::-webkit-scrollbar-track {
    background: #eee;
  }
  
  *::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 4px;
    border: 0;
  }


    article::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    
    article::-webkit-scrollbar-track {
      background: #eee;
    }
    
    article::-webkit-scrollbar-thumb {
      background-color: #aaa;
      border-radius: 4px;
      border: 0;
    }