@import"https://fonts.googleapis.com/css?family=Roboto";*{box-sizing:border-box;padding:0;margin:0}html{font-family:Roboto,Arial,Helvetica,sans-serif,sans-serif;font-size:48px;color:#fff;background-color:#112;background-attachment:fixed;min-height:100%;height:100vh;overflow-x:hidden;touch-action:pan-x pan-y}html .App{display:flex;flex-direction:column;align-items:center;overflow:hidden;height:auto}html .App .AppFooter{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 0 16px;font-size:12px;opacity:.4}.PreContainer{transition:ease-out .2s;overflow:hidden}@media only screen and (max-width:479px){.PreContainer{margin:60px 0;overflow:visible}}.PreContainer .MapContainer{position:relative;overflow:hidden}@media only screen and (max-width:479px){.PreContainer .MapContainer{overflow:visible}}.PreContainer .MapContainer .MapOutline{opacity:.5;z-index:300}.PreContainer .MapContainer .MapOverlay{position:absolute;pointer-events:none;left:0;top:0;width:100%}.PreContainer .MapContainer .Clickable{pointer-events:all;cursor:default;background:none;border:none;padding:0;outline:none;height:100%}.PreContainer .MapContainer .Map,.PreContainer .MapContainer .MapOutline{height:100%}.PreContainer .MapContainer .RainOverlay{opacity:0;transition:opacity linear .3s;transition-delay:.2s;will-change:opacity}.PreContainer .MapContainer .RainOverlay.Active{opacity:1;transition:opacity linear .2s;transition-delay:0s;z-index:201}.PreContainer .MapContainer .MapMarkers{z-index:202}.Forecast{position:absolute;top:0;left:0;width:100%;height:100%;color:#fff;pointer-events:none;z-index:301}.Forecast .ForecastIcon{width:50px;height:50px}@media only screen and (max-width:479px){.Forecast .ForecastIcon{width:40px;height:40px}}.Forecast .TwoHrPanel{position:absolute;top:8px;left:16px}@media only screen and (max-width:479px){.Forecast .TwoHrPanel{top:-55px}}.Forecast .TwoHrPanel .PM25Value{font-size:18px;opacity:.8}@media only screen and (max-width:479px){.Forecast .TwoHrPanel .PM25Value{font-size:14px}}.Forecast .TwoHrPanel .AreaName{font-size:16px;opacity:.75}@media only screen and (max-width:479px){.Forecast .TwoHrPanel .AreaName{font-size:14px}}.Forecast .TwoHrPanel .HumidityRow{display:flex;flex-direction:row;align-items:center;gap:0px;margin-top:4px}.Forecast .TwoHrPanel .HumidityRow .HumidityIcon{width:24px;height:24px}@media only screen and (max-width:479px){.Forecast .TwoHrPanel .HumidityRow .HumidityIcon{width:18px;height:18px}}.Forecast .TwoHrPanel .HumidityRow .HumidityValue{font-size:20px}@media only screen and (max-width:479px){.Forecast .TwoHrPanel .HumidityRow .HumidityValue{font-size:14px}}.Forecast .TwoHrPanel .ForecastLabel{font-size:20px;font-weight:600}@media only screen and (max-width:479px){.Forecast .TwoHrPanel .ForecastLabel{font-size:18px}}.Forecast .TwoHrPanel .ConditionRow{display:flex;flex-direction:row;align-items:center}.Forecast .TwoHrPanel .ConditionRow .ForecastIcon{width:100px;height:100px}@media only screen and (max-width:479px){.Forecast .TwoHrPanel .ConditionRow .ForecastIcon{width:70px;height:70px}}.Forecast .TwoHrPanel .ConditionRow .ConditionText{display:flex;flex-direction:column;gap:4px}.Forecast .TwoHrPanel .ConditionRow .ConditionText .CurrentTemp{font-size:36px;font-weight:700}@media only screen and (max-width:479px){.Forecast .TwoHrPanel .ConditionRow .ConditionText .CurrentTemp{font-size:24px}}.Forecast .TwoHrPanel .ConditionRow .ConditionText .TempRange{font-size:20px}@media only screen and (max-width:479px){.Forecast .TwoHrPanel .ConditionRow .ConditionText .TempRange{font-size:14px}}.Forecast .TwentyFourHrPanel{position:absolute;top:40px;right:16px;display:flex;flex-direction:row;gap:8px}@media only screen and (max-width:479px){.Forecast .TwentyFourHrPanel{top:-55px;font-size:14px;gap:4px}}.Forecast .TwentyFourHrPanel .PeriodCol{display:flex;flex-direction:column;align-items:center}.Forecast .TwentyFourHrPanel .PeriodCol .PeriodTime{font-size:20px}@media only screen and (max-width:479px){.Forecast .TwentyFourHrPanel .PeriodCol .PeriodTime{font-size:14px}}.Forecast .KioskCamOverlay{position:absolute;bottom:95px;right:16px;width:25%;pointer-events:none}@media only screen and (max-width:479px){.Forecast .KioskCamOverlay{bottom:8px;right:20px;width:30%}}.Forecast .KioskCamOverlay .KioskCamTopLeft{position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:8px;z-index:1}.Forecast .KioskCamOverlay .KioskCamTopLeft .KioskCamRank{width:20px;height:20px;border-radius:50%;background:#0f3;border:2px solid #6600ff;color:#000;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}.Forecast .KioskCamOverlay .CamTimestamp{position:absolute;top:6px;right:6px;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;line-height:1;z-index:1;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 6px rgba(0,0,0,.85)}.Forecast .KioskCamOverlay .KioskCamImage{width:100%;display:block;border-radius:4px;border:1px solid #00ff33;box-shadow:2px 2px 18px #000}.Forecast .FourDayPanel{position:absolute;bottom:8px;right:32px;display:flex;flex-direction:row;gap:24px}@media only screen and (max-width:479px){.Forecast .FourDayPanel{bottom:-55px;right:20px;gap:18px}}.Forecast .FourDayPanel .DayCol{display:flex;flex-direction:column;align-items:center;gap:0px;position:relative}.Forecast .FourDayPanel .DayCol .DayDate{font-size:20px;font-weight:600}@media only screen and (max-width:479px){.Forecast .FourDayPanel .DayCol .DayDate{font-size:14px}}.Forecast .FourDayPanel .DayCol .DayTempHigh{position:absolute;top:24px;right:-10px;font-size:18px;font-weight:700}@media only screen and (max-width:479px){.Forecast .FourDayPanel .DayCol .DayTempHigh{top:12px;font-size:14px}}.Forecast .FourDayPanel .DayCol .DayTempLow{position:absolute;bottom:0;right:-10px;font-size:18px;opacity:.65}@media only screen and (max-width:479px){.Forecast .FourDayPanel .DayCol .DayTempLow{font-size:14px}}.Forecast .SectorCamImage{border:1px solid #f5a714;width:100%;display:block;border-radius:4px;box-shadow:2px 2px 18px #000}.Forecast .NormalCamOverlay{position:absolute;pointer-events:none;bottom:65px;left:16px;width:20%}@media only screen and (max-width:479px){.Forecast .NormalCamOverlay{bottom:8px;left:8px;width:30%}}.Forecast .NormalCamOverlay .CamTimestamp{position:absolute;top:6px;right:6px;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;z-index:1;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 6px rgba(0,0,0,.85)}.RainLegend{position:absolute;left:8px;bottom:10px;width:100%;padding-left:8px;font-size:18px;pointer-events:none}@media only screen and (max-width:479px){.RainLegend{bottom:-50px;font-size:14px}}.RainLegend ul{display:block;white-space:nowrap}.RainLegend ul li{display:inline-block;list-style:none;width:4px;height:6px}@media only screen and (max-width:479px){.RainLegend ul li{width:3px;height:4px}}.OverlayTimeDisplay{position:absolute;width:100%;font-size:18px;display:flex;flex-direction:row;justify-content:flex-end;pointer-events:all;z-index:500}@media only screen and (max-width:479px){.OverlayTimeDisplay{font-size:16px}}.OverlayTimeDisplay .Container{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-right:8px}.OverlayTimeDisplay .Container .Row{display:flex;flex-direction:row;align-items:center;gap:8px}.OverlayTimeDisplay .Container .Timer{margin:0;width:140px;height:5px;overflow:hidden;border-radius:2px}@media only screen and (max-width:479px){.OverlayTimeDisplay .Container .Timer{width:120px}}.OverlayTimeDisplay .Container .Timer .Bar{margin:0;width:100%;height:inherit;background-color:#f5a714;transition:transform linear .3s}.OverlayTimeDisplay .Container .Timer .Bar.Missing{background-color:#f03}.OverlayTimeDisplay .Container .Timer .Bar.Cam{background-color:#1b86d0}.OverlayTimeDisplay .Container .Timer .Bar.Thin{height:75%}.OverlayTimeDisplay .ToggleButton{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;border:none;background:#334;color:#fff;font-size:24px;font-weight:900;line-height:1;cursor:pointer;padding:0}.FloodAlertStrip{display:flex;flex-direction:column;gap:12px;padding:12px 16px;width:100%}.FloodAlert{display:flex;flex-direction:column;gap:6px;border:2px solid #009799;border-radius:6px;padding:12px;background:#112;color:#fff;font-size:18px}@media only screen and (max-width:479px){.FloodAlert{font-size:14px}}.FloodAlert .FloodAlert-headline{font-size:28px;font-weight:700;color:#00efed}@media only screen and (max-width:479px){.FloodAlert .FloodAlert-headline{font-size:18px}}.FloodAlert .FloodAlert-body{display:flex;flex-direction:column;gap:6px;line-height:1.4;margin-top:4px}.FloodAlert .FloodAlert-severity{display:inline-block;padding:2px 8px;border-radius:3px;font-weight:700;border:1px solid;width:fit-content}.FloodAlert .FloodAlert-description,.FloodAlert .FloodAlert-instruction{color:#ddd}.FloodAlert .FloodAlert-instruction strong{color:#aaa;font-weight:400}.TrafficCamStrip{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;padding:12px;width:100%}.TrafficCamStrip .CamCard{position:relative;flex:1 1 calc(25% - 6px);max-width:calc(25% - 6px);cursor:pointer;background-color:#112;overflow:hidden}@media only screen and (max-width:770px){.TrafficCamStrip .CamCard{flex:1 1 calc(50% - 4px);max-width:calc(50% - 4px)}}@media only screen and (max-width:479px){.TrafficCamStrip .CamCard{flex:1 1 100%;max-width:100%}}.TrafficCamStrip .CamCard .CamImage{width:100%;height:auto;display:block;border-radius:4px}.TrafficCamStrip .CamCard .CamTopLeft{position:absolute;top:6px;left:6px;display:flex;align-items:center;gap:8px;z-index:1}.TrafficCamStrip .CamCard .CamTopLeft .RankBadge{width:22px;height:22px;border-radius:50%;background-color:#0f3;border:2px solid #6600ff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#000}.TrafficCamStrip .CamCard .CamTimestamp{position:absolute;top:6px;right:6px;font-size:14px;font-weight:700;color:#fff;white-space:nowrap;line-height:1;z-index:1;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 6px rgba(0,0,0,.85)}.CamModal{position:fixed;inset:0;background:#000000bf;z-index:1000;display:flex;align-items:center;justify-content:center}.CamModal .CamModalInner{position:relative;display:inline-block;line-height:0}.CamModal .CamModalInner .RankBadge{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background-color:#0f3;border:2px solid #6600ff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#000;z-index:1}.CamModal .CamModalInner .CamTimestamp{position:absolute;top:8px;left:8px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;z-index:1;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 6px rgba(0,0,0,.85)}.CamModal .CamModalImage{max-width:90vw;max-height:90vh;width:auto;height:auto;border-radius:4px;display:block}