.drawer.svelte-ledzjv {
  position: fixed;
  overflow: hidden;
  height: 100%;
  top: 0;
  z-index: 3;
  background-color: #31b9a3;
  width: 55vw;
  left: 0;
  margin-left: 0;
  -webkit-transition: all .6s ease-in-out;
          transition: all .6s ease-in-out;
  overflow-y: auto;
  overflow-x: hidden;
}
.drawer.drawer--closed.svelte-ledzjv {
  left: -55vw;
  margin-left: 68px;
}
.drawer-toggle.svelte-ledzjv {
  text-align: right;
  position: absolute;
  height: 100%;
  width: 45px;
  right: 12px;
  font-size: 40px;
  cursor: pointer;
  z-index: 1;
}
.drawer-toggle.svelte-ledzjv span:where(.svelte-ledzjv) {
  width: auto;
  display: block;
  right: 0;
  position: absolute;
  margin-right: 4px;
  cursor: pointer;
  -webkit-transition: -webkit-transform .6s ease-in-out;
          transition:         transform .6s ease-in-out;
}
.drawer-toggle.svelte-ledzjv span:where(.svelte-ledzjv):hover, .drawer-toggle.svelte-ledzjv:hover span:where(.svelte-ledzjv) {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.drawer.svelte-ledzjv  .drawer-content:where(.svelte-ledzjv) {
  margin: 10px 30px;
}
.drawer.svelte-ledzjv h5 {
  margin: 10px 16px;
  padding: 0 10px;
  font-size: calc(22px + (72 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(22px + (72 - 14) * ((100vw - 300px) / (1600 - 300)));
}
.drawer-header.svelte-ledzjv {
  margin-top: 40px;
}
.list.svelte-ledzjv {
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  letter-spacing: .00937em;
  text-decoration: inherit;
  text-transform: inherit;
  margin: 0;
  padding: 8px 0;
  list-style-type: none;
}
.list-item.svelte-ledzjv {
  display: flex;
  position: relative;
  padding: 0 16px;
}
.list-item.svelte-ledzjv a:where(.svelte-ledzjv) {
  height: 100%;
  width: auto;
  font-decoration: none;
  align-items: center;
  padding: 0 10px;
  font-size: calc(14px + (32 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(26px + (36 - 16) * ((100vw - 300px) / (1600 - 300)));
}
/* (empty) .list-item a:hover {
  
}*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

}
@media only screen and (max-width: 600px) {
  .drawer.svelte-ledzjv {
    position: fixed;
    width: 100vw;
    height: 100vh;
  }
  .drawer.drawer--closed.svelte-ledzjv {
    left: 0;
    margin-left: 0;
    height: 80px;
    margin-bottom: 20px;
  }
  .drawer-toggle.svelte-ledzjv {
    width: 100%;
    height: 65px;
    margin-top: 11px;
  }
  .drawer-header.svelte-ledzjv {
    margin-top: 80px;
  }
  .list-item.svelte-ledzjv a:where(.svelte-ledzjv) {
  font-size: calc(32px + (32 - 14) * ((100vw - 300px) / (1600 - 300)));
  line-height: calc(38px + (36 - 16) * ((100vw - 300px) / (1600 - 300)));
}
}


img.svelte-1oeu4sf {
	width: 100%;
	width: calc(100%/var(--n));
	user-select: none;
	pointer-events: none;

	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
        -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
        -moz-animation: fadein 1s; /* Firefox < 16 */
            -ms-animation: fadein 1s; /* Internet Explorer */
            -o-animation: fadein 1s; /* Opera < 12.1 */
                    animation: fadein 1s;
}


.alert.svelte-1grq7cl {
    padding: 20px;
    text-align: center;
    background-color:rgb(238, 66, 102);
    position: fixed;
    top: 0;
    width: 100%;
    left: 68px;
    z-index: 1;
    font-weight: bold;
    animation: svelte-1grq7cl-fadeIn ease 1s;
    -webkit-animation: svelte-1grq7cl-fadeIn ease 1s;
    -moz-animation: svelte-1grq7cl-fadeIn ease 1s;
    -o-animation: svelte-1grq7cl-fadeIn ease 1s;
    -ms-animation: svelte-1grq7cl-fadeIn ease 1s;
}
@media only screen and (max-width: 600px) {
  .alert.svelte-1grq7cl {
    margin: 10px 0;
    padding: 20px;
    text-align: center;
    background-color: rgb(238, 66, 102);
    position: relative;
    top: 0;
    width: auto;
    left: 0;
    z-index: 1;
    font-weight: bold;
  }
}
@keyframes svelte-1grq7cl-fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes svelte-1grq7cl-fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes svelte-1grq7cl-fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes svelte-1grq7cl-fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes svelte-1grq7cl-fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}


form.svelte-lywpqx {
	position: absolute;
	top: 10px;
	width: 100%;
	display: flex;
	-webkit-box-align: center;
  align-items: center;
	justify-content: center;
	z-index: 1;
}
.container.svelte-lywpqx {
  margin-top: 0;
  margin-left: 0;
	--n: 1;
	display: flex;
	align-items: center;
	overflow-y: hidden;
	width: 100%;
	width: calc(var(--n)*100%);
	height: 100%;
	/*height: 50vw; */
	max-height: 100vh;
	transform: translate(calc(var(--i, 0)/var(--n)*-100%));
}

@keyframes svelte-lywpqx-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes svelte-lywpqx-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes svelte-lywpqx-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes svelte-lywpqx-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes svelte-lywpqx-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.control.svelte-lywpqx {
	position: fixed;
	z-index: 1;
	left: 5%;
	top: 50vh;
	cursor: pointer;
	font-size: 6em;
	color: #fff;
	padding: 20px;
	font-weight: 700;
	margin-top: -75px;
	margin-left: 60px;
	transition-property: margin;
  transition-duration: 0.5s;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
		 -moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
					user-select: none; /* Non-prefixed version, currently
																supported by Chrome and Opera */
}
.control.previous.svelte-lywpqx:hover {
	padding-right: 50px;
	padding-left: 20px;
	margin-left: 45px;
}
.control.svelte-lywpqx:hover {
	padding-right: 20px;
	padding-left: 50px;
	text-decoration: none;
	color: #ff717f;
	margin-right: -15px;
}
.next.svelte-lywpqx {
	right: 5%;
	left: auto;
}
/* (empty) .previous {

}*/
@media only screen and (max-width: 600px) {
	.container.svelte-lywpqx {
		margin-top: 80px;
	}
	form.svelte-lywpqx {
    bottom: auto;
    top: auto;
    position: relative;
    display: block;
	}
	.control.svelte-lywpqx {
		left: 0;
		margin-left: 0;
	}
	.control.previous.svelte-lywpqx:hover {
		padding-right: 20px;
		padding-left: 20px;
		margin-left: auto;
	}
	.control.svelte-lywpqx:hover {
		padding-right: 20px;
		padding-left: 20px;
		text-decoration: none;
		color: #ff717f;
		margin-right: auto;
	}
	.next.svelte-lywpqx {
		left: 100vw;
		margin-left: -60px;
	}
}





h2.svelte-16fhpi8 {
    margin-top: 0;
    margin-bottom: 0;
}


svg.svelte-15g82xt {
  position: absolute;
  z-index: 999;
  left: 48%;
  top: 48%;
  animation: 2s linear infinite svelte-15g82xt-svg-animation;
  max-width: 100px;
}

@keyframes svelte-15g82xt-svg-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg)
  }
}

circle.svelte-15g82xt {
  animation: 1.4s ease-in-out infinite both svelte-15g82xt-circle-animation;
  display: block;
  fill: transparent;
  stroke: #333;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  stroke-width: 10px;
  transform-origin: 50% 50%;
}

@keyframes svelte-15g82xt-circle-animation {
  0%,
  25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }
  
  50%,
  75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }
  
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}


  .banner.svelte-4gizvm {
    width: auto;
    padding: 6px 32px;
    margin: 32px 0;
    position: relative;
		opacity:0;
		-webkit-animation: svelte-4gizvm-fadeIn ease-out 1;
		-moz-animation: svelte-4gizvm-fadeIn ease-out 1;
		animation: svelte-4gizvm-fadeIn ease-out 1;
		-webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-duration: 0.8s;
		-moz-animation-duration: 0.8s;
		animation-duration: 0.8s;
  }

	@-webkit-keyframes svelte-4gizvm-fadeIn { from { opacity:0; } to { opacity:1; } }
	@-moz-keyframes svelte-4gizvm-fadeIn { from { opacity:0; } to { opacity:1; } }
	@keyframes svelte-4gizvm-fadeIn { from { opacity:0;  } to { opacity:1; } }

  .banner.error.svelte-4gizvm {
    background-color: #ff717f;
  }
  .banner.warning.svelte-4gizvm {
    background-color: #f9d731;
  }
  .banner.hidden.svelte-4gizvm {
    visibility: hidden;
  }


    form.svelte-osjuyj {
        text-align: center;
    }
    .plot.svelte-osjuyj {
        margin-bottom: 20px;
    }


  

/* The actual timeline (the vertical ruler) */
.timeline.svelte-1vwaeio {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline.svelte-1vwaeio::after {
  content: '';
  position: absolute;
  width: 1px;
  background-color: #31b9a3;
  top: 0;
  bottom: 0;
  left: 50%;
}

.event.svelte-1vwaeio {
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.event.svelte-1vwaeio::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  right: -6px;
  background-color: white;
  border: 4px solid #000;
  top: 50px;
  border-radius: 50%;
  z-index: 1;
}

.left.svelte-1vwaeio {
  left: 0;
}

.right.svelte-1vwaeio {
  left: 50%;
}

.right.svelte-1vwaeio::after {
  left: -5px;
}

.content.svelte-1vwaeio {
  padding: 20px 30px;
  position: relative;
}

@media screen and (max-width: 600px) {
  .timeline.svelte-1vwaeio {
    margin-top: 100px;
    margin-right: 10px;
    margin-left: 10px;
  }
  .timeline.svelte-1vwaeio::after {
    left: 31px;
    background-color: transparent;
  }

  .event.svelte-1vwaeio {
    width: 100%;
    padding: 0;
  }

  .left.svelte-1vwaeio::after, .right.svelte-1vwaeio::after {
    left: 15px;
  }

  .right.svelte-1vwaeio {
    left: 0%;
  }
}


input[type="text"].svelte-o2dhro, 
input[type="password"].svelte-o2dhro {
    width: 25%;
    display: block;
}
@media only screen and (max-width: 600px) {
    
    input[type="text"].svelte-o2dhro, 
    input[type="password"].svelte-o2dhro {
        width: 100%;
    }
}


div.svelte-1w6umw {
    border-bottom: 3px solid #333;
    border-top: 3px solid #333;
    margin: 8px 32px 20px;
    padding: 6px 12px;
}


  .prediction.svelte-q0700j {
    width: 20%;
    text-align: center;
    margin-bottom: 25px;
  }
  .prediction.svelte-q0700j p.loading:where(.svelte-q0700j) {
    display: none;
  }
  .prediction.svelte-q0700j p.loading:where(.svelte-q0700j):first-child {
    display: block;
  }
 .prediction.svelte-q0700j .wind:where(.svelte-q0700j) {
    margin-bottom: 12px;
  }
  .prediction.svelte-q0700j .muted:where(.svelte-q0700j) {
    color: #666;
  }
  @media only screen and (max-width: 600px) {
    .prediction.svelte-q0700j {
      width: 100%;
      display: block;
    }
  }


.forecasts.svelte-4w8lze {
  display: flex;
}
@media only screen and (max-width: 600px) {
  .forecasts.svelte-4w8lze {
    display: block;
  }
}


.frame.svelte-1od83ja {
    position: absolute;
    z-index: 1;
}
img.svelte-1od83ja {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
.loader.svelte-1od83ja {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #db3490;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: svelte-1od83ja-spin 2s linear infinite;
  position: absolute;
  left: 40%;
  top: 20%;
  opacity: 0;
}

.loaded.svelte-1od83ja {
  opacity: 1;
}

@keyframes svelte-1od83ja-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.visible.svelte-1od83ja {
    opacity: 1;
    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
    -moz-animation: fadeIn ease 1s;
    -o-animation: fadeIn ease 1s;
    -ms-animation: fadeIn ease 1s;
}


.frame-container.svelte-1pfowb9 {
    width: 880px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 1;
}
@media only screen and (max-device-width : 1024px) {
  .frame-container.svelte-1pfowb9 {
    width: 100%;
    height: 424px;
  }
}
.hidden.svelte-1pfowb9 {
    visibility: hidden;
    opacity: 0;
}
span.svelte-1pfowb9 {
    position: absolute;
    z-index: 2;
    background: #fff;
    padding: 0 3px 3px 3px;
    margin: 5px;
}


label.svelte-m5orh {
  display: block;
  margin-bottom: 3px;
}
.legends-container.svelte-m5orh {
    order: 2;
    z-index: 2;
    position: relative;
    margin-left: auto;
}
.toggle-legends.svelte-m5orh {
    position: absolute;
    z-index: 3;
    right: 10px;
    top: 10px;
    line-height: 1rem;
    font-size: 0.8rem;
}
.legends.svelte-m5orh {
  background: white;
  padding: 10px;
  right: 20px;
  top: 20px;
  font-size: 0.9em;
  width: 410px;
  margin-bottom: 20px;
}
@media only screen and (max-device-width : 1024px) {
  .legends-container.svelte-m5orh {
    width: 100%;
    order: -1;
    margin-bottom: 4px;
  }
  .legends.svelte-m5orh {
    padding: 10px;
    right: 0px;
    top: 0px;
    width: auto;
    }
    .toggle-legends.svelte-m5orh {
        position: relative;
        right: 0;
        top: 0;
        line-height: 1rem;
        margin-top: 20px;
    }
}

select.svelte-m5orh {
    width: 100%;
}


.tile.svelte-1vz15ip {
    position: absolute;
    background: grey;
}
img.svelte-1vz15ip {
    pointer-events: none;
    opacity: 0;
}
@keyframes svelte-1vz15ip-fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes svelte-1vz15ip-fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-webkit-keyframes svelte-1vz15ip-fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-o-keyframes svelte-1vz15ip-fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@-ms-keyframes svelte-1vz15ip-fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
.visible.svelte-1vz15ip {
    opacity: 1;
    animation: svelte-1vz15ip-fadeIn ease 1s;
    -webkit-animation: svelte-1vz15ip-fadeIn ease 1s;
    -moz-animation: svelte-1vz15ip-fadeIn ease 1s;
    -o-animation: svelte-1vz15ip-fadeIn ease 1s;
    -ms-animation: svelte-1vz15ip-fadeIn ease 1s;
}


#map.svelte-piqgzh {
    width: 880px;
    height: 424px;
    overflow: hidden;
    position: relative;
    background-color: #e0e0e0;
}
@media only screen and (max-device-width : 1024px) {
  #map.svelte-piqgzh {
    width: 100%;
    height: 424px;
  }
}


.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.radar-container.svelte-ybe457 {
  display: flex;
  flex-flow: row wrap;
}
.map-container.svelte-ybe457 {
  width: 880px;
  height: 424px;
}
.cross.svelte-ybe457 {
  z-index: 3;
  position: absolute;
}


.row.svelte-1s3xq20 {
  display: flex;
  justify-content: space-evenly;
}
@media only screen and (max-width: 600px) {
  .row.svelte-1s3xq20 {
    display: block;
  }
}
h2.svelte-1s3xq20, h3.svelte-1s3xq20 {
  text-align: center;
}
h3.svelte-1s3xq20 {
  font-style: italic;
  margin-bottom: 3em;
}
.bug.svelte-1s3xq20 {
  height: 100px;
  width: 100px;
  display: block;
  margin: auto;
}
.high.svelte-1s3xq20 svg:where(.svelte-1s3xq20) path:where(.svelte-1s3xq20) {
  fill: rgb(238, 66, 102);
}
.medium.svelte-1s3xq20 svg:where(.svelte-1s3xq20) path:where(.svelte-1s3xq20) {
  fill: rgb(253, 158, 34);
}
.low.svelte-1s3xq20 svg:where(.svelte-1s3xq20) path:where(.svelte-1s3xq20) {
  fill: rgb(255, 224, 121);
}
.none.svelte-1s3xq20 svg:where(.svelte-1s3xq20) path:where(.svelte-1s3xq20) {
  fill: grey;
}