@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,87.5,700;1,87.5,700&family=Oxygen:wght@300;400;700&display=swap');

body {
  font-family:"Oxygen",sans-serif;
}

.SNOW_T{
  color:#F5F5F5;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
  font-optical-sizing: auto;
}

.SNOW_1{
  color:#BDD7E7;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_2{
  color:#6BAED6;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_3{
  color:#3182BD;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_4{
  color:#08519C;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_6{
  color:#082694;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_8{
  color:#FFFF96;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_12{
  color:#FFC400;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_18{
  color:#FF8700;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_24{
  color:#DB1400;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_30{
  color:#9E0000;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_36{
  color:#690000;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_48{
  color:#360000;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_60{
  color:#CCCCFF;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_72{
  color:#9F8CD8;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.SNOW_96{
  color:#7C52A5;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}

.RAIN_T{
  color:#F5F5F5;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_10{
  color:#C7E9C0;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_25{
  color:#A1D99B;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_50{
  color:#74C476;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_100{
  color:#31A353;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_150{
  color:#006D2C;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_200{
  color:#FFFA8A;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_300{
  color:#FFCC4F;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_400{
  color:#FE8D3C;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_600{
  color:#FC4E2A;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_800{
  color:#D61A1C;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_1000{
  color:#AD0026;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_1500{
  color:#700026;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_2000{
  color:#3B0030;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_3000{
  color:#4C0073;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.RAIN_5000{
  color:#FFDBFF;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}

.GUST_10{
  color:#225EA8;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_15{
  color:#1D91C0;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_20{
  color:#41B6C4;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_25{
  color:#7FCDBB;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_30{
  color:#B4D79E;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_35{
  color:#DFFF9E;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_40{
  color:#DFFF9E;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_45{
  color:#FFE873;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_50{
  color:#FFC400;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_60{
  color:#FFAA00;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_70{
  color:#FF5900;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_80{
  color:#FF0000;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_100{
  color:#A80000;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_120{
  color:#6E0000;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_140{
  color:#FFBEE8;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
.GUST_170{
  color:#FF73DF;
  opacity: 1;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Open Sans', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
  font-style: normal;
}
/* Essential map container styles */
#map_canvas {
  height: 500px;  /* Add a specific height */
  width: 100%;    /* Make it responsive */
  min-height: 400px; /* Ensure a minimum height */
  border: 1px solid #ccc;
}

/* Optional but helpful layout styles */
#container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

table {
  width: 100%;
}

#side_bar {
  height: 500px;
  overflow-y: auto;
  padding: 0 10px;
}

/* Ensure the map's parent container has dimensions */
#TEMP {
  width: 70%;
  min-height: 400px;
}
#legendBar td {
    height: 15px;
    width: 31px;
    border: 1px white;
}