* {
    box-sizing: border-box;
}
/*
      :root {
	  --rust: #844D36;
	  --plum: #474853;
	  --steel-blue: #86B3D1;
	  --light-coffee: #AAADA0;
	  --earth: #8E8268;
	  --black: black;
	  --white: white;
	  --main-background-color: #844D36;
	  --main-foreground-color: white;
	  --hover-background: white;
	  --hover-foreground: black;
      }
*/
:root {
    --rust: #14365D; /* Night Moon */
    --background2: #2F5C8F; /* Deep Blue */
    --foreground1: #A96762; /* Mauve */
    --foreground2: #D85C27; /* Mandarin */
    --foreground3: #B999BE; /* Lavender */
    --black: black;
    --white: white;
    --medium-grey: #80808080;
    --main-background-color: #14365D; /* Night Moon */
    --main-foreground-color: white;
    --hover-background: white;
    --hover-foreground: black;
}
body {
    background: var(--main-background-color);
    font-family: Arial;
    font-size: 1.75vh;
    color: var(--main-foreground-color);
    height: 98vh;
    width: 98vw;
    /*max-height: 98vh;*/
    /*max-width: 98vw;*/
    display: flex;
}
.bg-active {
    color: var(--main-foreground-color);
    background: var(--background2);
}
.vertical-spacer-outer {
    display: flex;
    flex-direction: column;
    flex-basis: max-content;
    flex-grow: 1;
}
.vertical-spacer-inner {
    flex-basis: max-content;
    flex-grow: 10;
}
.wx-page {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex-grow: 1;
    flex-basis: max-content;
    max-height: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
}
.wx-header {
    display: grid;
    grid-template-columns: fit-content(100%) auto fit-content(100%);
    flex-grow: 0;
    width: 100%;
    align-items: center;
    justify-items: center;
}
.wx-row {
    display: flex;
    grid-template-columns: fit-content(100%) auto;
    grid-template-rows: fit-content(100%);
    flex-grow: 1;
    flex-basis: max-content;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}
.wx-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: max-content;
    margin-top: 4px;
    margin-right: 4px;
    max-height: 100%;
    font-size: 2vh;
}
.wx-content {
    display: flex;
    flex-grow: 100;
    flex-shrink: 1;
    flex-basis: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}
.wx-scene {
    /* width: auto; */
    /* height: auto; */
    /* max-width: 100%; */
    /* max-height: 100%; */
    margin: 2px 2px 2px 2px;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    display: none;
    max-width: 100%;
    max-height: 100%;
}
.wx-program {
    color: var(--main-foreground-color);
    background: var(--foreground2);
}
.wx-time {
    font-family: "Courier New";
    color: var(--main-foreground-color);
}
.wx-scene-list {
    color: var(--main-foreground-color);
    list-style-type: none;
}
.wx-cell {
    display: inline-flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}
.wx-relative {
    position: relative;
}
.wx-image {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}
.wx-not-button {
}
.wx-button {
    display: none;
    padding: .25em;
    border-width: 2px;
    border-radius: 5px;
    border-color: var(--main-foreground-color);
    border-style: solid;
    text-align: center;
    width: 100%;
    margin: 4px;
}
.wx-button:hover {
    background: var(--hover-background);
    color: var(--hover-foreground);
}
.scene-button {
    border-radius: 5px;
    padding: 0.2vh 0.2vw 0.2vh 0.2vw;
}
.active-scene {
}
.active-scene:hover {
    background: var(--hover-background);
    color: var(--hover-foreground);
}
.scene-not-button {
    color: var(--foreground2);
    text-decoration: underline;
}
.show {
    display: inline-flex;
}
.update5 {
}
.grid-item {
    display: table-cell;
}
.vertical-container {
}
.wx-content-grid {
    display: grid;
    grid-template-columns: 120px auto;
}
.nws-column {
    vertical-align: top;
    height: 100vh;
    overflow: auto;
    
    color: var(--main-foreground-color);
    text-align: left;
    margin-left: 1em;
    margin-right: 1em;
}
.nws-zone-title {
    color: var(--main-foreground-color);
    background: var(--main-background-color);
    font-size: 1.3vw;
}
.nws-zone-paragraph {
    font-size: 1.2vw;
    color: var(--main-foreground-color);
    background: var(--background2);
}
.obs-grid {
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    border-collapse: collapse;
}
.obs-grid-row {
}
.obs-cell {
    display: flex;
    flex-direction: column;
    text-align: left;
    /*align-self: center;*/
    max-height: 100%;
    min-height: 0px;
    max-width: 100%;
    min-width: 0px;
}
.obs-table-even {
    color: black;
    background: lightgrey;
}
.obs-table-odd {
    color: var(--main-foreground-color);
    background: #aaada0;
}
.obs-table {
    display: table;
    font-size: 1.1vw;
    /*border-spacing: 2px;*/
    border-collapse: collapse;
    flex: 0 0 auto;
}
.obs-header {
    display: table-header-group;
    color: var(--main-foreground-color);
    background: var(--background2);
}
.obs-body {
    display: table-row-group;
}
.obs-row {
    display: table-row;
}
.obs-meta {
    text-align: left;
}
.obs-table-cell {
    display: table-cell;
    text-align: left;
    align-self: center;
    padding-left: .5em;
    padding-right: .5em;
}
.obs-data {
    font-family: "Courier New";
    text-align: right;
}
.text-scene {
    /* background: var(--white); */
    /* color: var(--black); */
    height: 90vh;
    overflow: scroll;
    padding: 1em;
}
.text-scene a:link {
    color: var(--white);
}
.local-wind-grid {
    display: grid;
    grid-template-rows: minmax(10px, 60%) minmax(10px, 40%);
    row-gap: 4px;
    /*grid-template-columns: 100%;*/
    width: 100%;
    height: 100%;
    justify-items: center;
}
.local-wind-row1 {
    display: grid;
    grid-template-areas: "anemometer";
    grid-template-columns: 100%;
    column-gap: 4px;
    width: 100%;
    height: 100%;
    justify-items: center;
}
.local-wind-row2 {
    display: grid;
    grid-template-areas: "history forecast";
    grid-template-columns: minmax(10px, 50%) minmax(10px,  50%);
    width: 100%;
    height: 100%;
    justify-items: center;
}
.local-wind-cell {
    margin: 4px;
    max-height: 100%;
    min-height: 0px;
    max-width: 100%;
    min-height: 0px;
    width: 100%;
    height: 100%;
}
.wind-history-cell {
    margin-left: 0px;
    grid-area: history;
}
.wind-forecast-cell {
    margin-right: 0px;
    grid-area: forecast;
}
.wind-axis-label {
    font-size: 1.25vw;
}
@media (min-aspect-ratio: 4/3) {
    .tides-grid {
	display: grid;
	grid-template-rows: 40% 60%;
	grid-template-columns: 1fr 1fr;
	border-collapse: collapse;
	width: 100%;
	height: 100%;
    }
    .grid-container {
	display: grid;
	grid-template-columns: 50% 50%;
    }
    .nws-column-1 {
	display: none;
    }
    .nws-column-2 {
        display: flex;
        overflow: hidden;
    }
}
.wind-cell {
    display: flex;
    flex-direction: column;
    text-align: left;
    /*align-self: center;*/
    max-height: 100%;
    min-height: 0px;
    max-width: 100%;
    min-width: 0px;
    margin: 2px;
}
.wind-row {
    display: grid;
    grid-template-columns: 50% 50%;
    border-collapse: collapse;
    width: 100%;
    height: 100%;
}
.wind-plot {
    font-size: 1.25vw;
    max-height: 100%;
    min-height: 0px;
    max-width: 100%;
    min-width: 0px;
    background: var(--background2);
    margin: 4px;
}
.high-wind-label {
    color: #FB4B39;
    background: white;
}
.wind-plot-wind-avg {
    fill: var(--main-background-color);
    stroke: var(--main-foreground-color);
    stroke-width: 4.0;
}

.wind-plot-wind-gust {
    fill: none;
    stroke: var(--foreground2);
    stroke-width: 4.0;
}
.tides-cell {
    display: block;
    flex-direction: column;
    text-align: left;
    /*align-self: center;*/
    max-height: 100%;
    min-height: 0px;
    max-width: 100%;
    min-width: 0px;
    margin: 2px;
}
.tide-plot {
    display: flex;
    max-height: 100%;
    min-height: 0px;
    max-width: 100%;
    min-width: 0px;
}
.tide-svg {
    max-height: 100%;
    min-height: 0px;
    max-width: 100%;
    min-width: 0px;
    background: var(--background2);
}
/* Override d3s 10pt default */
.tide-plot-now {
    font-size: 1.25vw;
    stroke: var(--foreground1);
    stroke-width: 4.0;
}
.tide-plot-y-axis {
    font-size: 1.25vw;
    stroke-width: 1.0;
}
.tide-plot-x-axis {
    font-size: 1vw;
    stroke-width: 0.0;
}
.tide-plot-grid {
    fill: none;
    stroke: var(--main-foreground-color);
    stroke-width: 1.0;
}
.tide-plot-tide {
    fill: var(--background2);
    fill: var(--main-background-color);
    stroke: var(--main-foreground-color);
    stroke-width: 4.0;
}
.tide-plot-label-group {
    /* */
}
.tide-plot-label {
    stroke: var(--main-foreground-color);
    color: var(--main-foreground-color);
    fill: var(--main-foreground-color);
}
.tide-plot-label-item {
    stroke: var(--black);
    fill: var(--black);
}
.tide-plot-label-background {
    font-size: 1.25vw;
    stroke: none;
    fill: #c0c0c0a0;
}
.current-plot-label-item {
    stroke: var(--black);
    fill: var(--black);
}
.current-plot-label-background {
    font-size: 1.25vw;
    stroke: none;
    fill: #c0c0c0a0;
}
.current-events-content {
    display: flex;
    margin-left: 1vw;
}
.current-events-table {
    display: table;
    padding-left: 1vw;
    border-collapse: collapse;
    background: var(--background2);
    color: var(--main-foreground-color);
}
.current-events-table-header {
    display: table-header-group;
    color: var(--foreground2);
    background: var(--background2);
}
.current-events-table-body {
    display: table-row-group;
}
.current-events-table-row {
    display: table-row;
    padding-top: 0.1vh;
    padding-bottom: 0.1vh;
}
.current-events-table-cell {
    display: table-cell;
    padding-right: 1.0vw;
    padding-left: 0.5vw;
}
.current-events-table-astral {
    color: var(--foreground3);
}
.current-events-table-water {
}
.timelapse {
    margin: 2px 2px 2px 2px;
    display: flex;
    justify-content: center;
}
.local-number {
    display: inline-flex;
    font-size: 2.5vw;
    color: var(--main-foreground-color);
    /*background: var(--plum);*/
    border-bottom: 2px solid var(--main-foreground-color);
    /*margin-bottom: 4px;*/
}
.burgee-small {
    width: 100px;
    height: 60.77px
}
.zpop {
    z-index: 5;
}
.wx-video {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
}
.horizontal-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.anemometer-cell {
    background: var(--background2);
}
.anemometer-stfyc-gauge {
    display: inline-block;
    width: 100%;
    margin: auto;
    /* background: var(--background2); */
}
.anemometer-stfyc-arc {
    fill: var(--background2);
}
.anemometer-stfyc-pointer-0 { /* gust */
    fill: var(--foreground2);
    stroke: var(--black);
}
.anemometer-stfyc-pointer-1 { /* avg */
    fill: var(--white);
    stroke: var(--black);
}
.anemometer-stfyc-gauge-label {
    text-anchor: middle;
    font-size: 2.0vw;
    font-weight: bold;
    background: var(--background2);
    fill: var(--main-foreground-color);
}
.anemometer-stfyc-plot-label {
    text-anchor: middle;
    font-size: 2.50vw;
    background: var(--background2);
    fill: var(--main-foreground-color);
    width: 100%;
}
.ol-label {
    position: absolute;
    background: var(--medium-grey);
    z-index: 10;
    font-family: monospace;
    font-size: 1.4em;
    font-weight: bold;
    transform: translate(3em, .5em);
    padding: 2px;
}
.ol-flex-fit {
    display: flex;
    flex: 1 1 max-content;
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
}
.ol-semi-transparent {
    /* Has to be opaque enough to show pink offshore warnings on blue ocean background */
    filter: opacity(40%);
}
.wxFlow-frame {
    width: 100%;
    height: 100%;
}
@media (max-aspect-ratio: 4/3) {
    .tides-grid {
	display: grid;
	/*grid-template-rows: 100%;
	      grid-template-columns: auto;*/
	grid-template-columns: 100%;
	border-collapse: collapse;
	width: 100%;
	height: auto;
    }
    .grid-container {
	display: flex;
	flex-direction: column;
    }
    .nws-column-1 {
	display: flex;
	flex-direction: column;
    }
    .nws-column-2 {
	display: none;
    }
}
.about-image {
    max-width: 50%
}
.about-h2 {
    font-size: 1.4vw;
    color: var(--foreground2);
    text-decoration: underline;
}
.about-h3 {
    font-size: 1.2vw;
    color: var(--foreground2);
    text-decoration: underline;
}
@media (max-width: 1024px) {
    .wx-header-1 {
	display: none;
    }
    .wx-header-2 {
	display: inline-flex;
	flex-direction: column;
    }
    .local-number {
	font-size: 4.0vw;
    }
    .wx-header {
	grid-template-columns: fit-content(100%) auto fit-content(100%);
    }
    .burgee-left {
	display: none;
    }
    .burgee-right {
	font-size: 4.0vw;
	height: 2em;
	width: 4em;
	display: inline-flex;
    }
    .scene-pull-down-enable {
	/* font-size: 4.0vw; */
	height: 2em;
	width: 4em;
	display: inline-flex;
    }
    .scene-pull-down-enable:hover {
	background: var(--hover-background);
	color: var(--hover-foreground);
    }
    .wx-sidebar {
	display: none;
    }
}
@media (min-width: 1024px) {
    .wx-header-2 {
	display: none;
    }
    .burgee-left {
	display: inline-flex;
	transform: scale(-1,1);
    }
    .burgee-right {
	display: inline-flex;
    }
    .menu-icon-div {
	display: none;
    }
    .scene-pull-down-enable {
	display: none;
    }
}
@media (max-aspect-ratio: 1/1) {
    .local-wind-grid {
	grid-template-rows: auto;
	height: auto;
    }
    .local-wind-row1 {
	height: auto;
    }
    .local-wind-row2 {
	display: grid;
	grid-template-columns: 100%;
	grid-template-areas: "history" "forecast";
	grid-template-rows: minmax(10px, 50%);
	border-collapse: collapse;
	width: 100%;
	height: auto;
    }
    .wind-history-cell {
	margin-right: 0px;
	height: 50vh;
    }
    .wind-forecast-cell {
	margin-left: 0px;
	height: 50vh;
    }
    .label {
	font-size: 2.5vw;
	text-align: left;
    }
    .wind-axis-label {
	font-size: 2.5vw;
    }
    .events-text {
	font-size: 2.0vw;
	text-align: left;
    }
    .anemometer-stfyc-gauge-label {
	font-size: 2.50vh;
    }
    .anemometer-stfyc-plot-label {
	font-size: 3.00vh;
    }
}
@media (min-aspect-ratio: 1/1) {
    .label {
	font-size: 1.65vw;
	text-align: left;
    }
    .events-text {
	font-size: 1.25vw;
	text-align: left;
    }

}