@font-face {
    font-family: "Star4000";
    src: url("../fonts/Star4000.woff") format("woff");
    font-display: swap;
}

body {
    font-family: "Star4000";
    margin: 0;
	background-image: url('../images/background.png');
}

@media(prefers-color-scheme: dark) {
    body {
        background-color: #000;
        color: #fff;
    }
    body a {
        color: #add8e6;
    }
}

body.kiosk {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    width: 100vw;
    background-color: #000 !important;
}

#divQuery {
    max-width: 640px;
    padding: 8px;
}

#divQuery .buttons {
    display: inline-block;
    width: 150px;
    text-align: right;
}

#divQuery .buttons #imgGetGps {
    height: 13px;
    vertical-align: middle;
}

#divQuery .buttons button {
    font-size: 16pt;
    border: 1px solid #a9a9a9;
}

@media(prefers-color-scheme: dark) {
    #divQuery .buttons button {
        background-color: #000;
        color: #fff;
    }
    #divQuery .buttons #btnGetGps img.dark {
        display: inline-block;
    }
    #divQuery .buttons #btnGetGps img.light {
        display: none;
    }
    #divQuery #txtLocation {
        background-color: #000;
        color: #fff;
        border: 2px inset gray;
    }
    .autocomplete-suggestions {
        background-color: #000;
    }
    #divTwcBottom {
        background-color: #303030;
    }
    #ToggleMediaContainer .volume-slider {
        background-color: #303030;
    }
}

#divQuery .buttons #btnGetGps img.dark {
    display: none;
}

#divQuery .buttons #btnGetGps.active {
    background-color: #000;
}

@media(prefers-color-scheme: dark) {
    #divQuery .buttons #btnGetGps.active {
        background-color: #fff;
    }
}

#divQuery .buttons #btnGetGps.active img {
    filter: invert(1);
}

#divQuery input,
#divQuery button {
    font-family: "Star4000";
}

#divQuery #txtLocation {
    width: calc(100% - 170px);
    max-width: 490px;
    font-size: 16pt;
    min-width: 200px;
    display: inline-block;
    background-color: #fff;
    color: #000;
    border: 2px inset gray;
}

.autocomplete-suggestions {
    background-color: #fff;
    border: 1px solid #000;
    position: absolute;
    z-index: 9999;
}

.autocomplete-suggestions div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16pt;
}

.autocomplete-suggestions div.selected {
    background-color: blue;
    color: #fff;
}

#divTwc {
    display: block;
    background-color: #000;
    color: #fff;
    width: 100%;
    max-width: 640px;
    margin: 0;
}

#divTwc.wide {
    max-width: 854px;
}

.content-wrapper {
    padding: 8px;
}

#divTwcMain {
    width: 640px;
    height: 480px;
    position: relative;
}

.wide #divTwcMain {
    width: 854px;
}

.kiosk #divTwc {
    max-width: unset;
}

#divTwcLeft {
    display: none;
    text-align: right;
    flex-direction: column;
    vertical-align: middle;
}

#divTwcLeft>div {
    flex: 1;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#divTwcRight {
    text-align: left;
    display: none;
    flex-direction: column;
    vertical-align: middle;
}

#divTwcRight>div {
    flex: 1;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#divTwcBottom {
    display: flex;
    flex-direction: row;
    background-color: #000;
    color: #fff;
    width: 640px;
}

.wide #divTwcBottom {
    width: 854px;
}

#divTwcBottom>div {
    padding-left: 6px;
    padding-right: 6px;
}

@media(max-width: 550px) {
    #divTwcBottom>div {
        font-size: .9em;
    }
    .wide #divTwcBottom img {
        transform: scale(1);
    }
}

@media(max-width: 500px) {
    #divTwcBottom>div {
        font-size: .8em;
    }
}

@media(max-width: 450px) {
    #divTwcBottom>div {
        font-size: .7em;
    }
}

@media(max-width: 400px) {
    #divTwcBottom>div {
        font-size: .6em;
    }
}

@media(max-width: 350px) {
    #divTwcBottom>div {
        font-size: .5em;
    }
}

#divTwcBottomLeft {
    flex: 1;
    text-align: left;
}

#divTwcBottomMiddle {
    flex: 0;
    text-align: center;
}

#divTwcBottomRight {
    flex: 1;
    text-align: right;
}

#divTwcNavContainer {
    display: none;
}

#divTwcNav {
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: #000;
    color: #fff;
    max-width: 640px;
}

#divTwcNav>div {
    padding-left: 6px;
    padding-right: 6px;
}

#divTwcNavLeft {
    flex: 1;
    text-align: left;
}

#divTwcNavMiddle {
    flex: 0;
    text-align: center;
}

#divTwcNavRight {
    flex: 1;
    text-align: right;
}

#imgPause1x {
    visibility: hidden;
    position: absolute;
}

.HideCursor {
    cursor: none !important;
}

#txtScrollText {
    width: 475px;
}

@font-face {
    font-family: "Star4000 Extended";
    src: url("../fonts/Star4000 Extended.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "Star4000 Large";
    src: url("../fonts/Star4000 Large.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "Star4000 Small";
    src: url("../fonts/Star4000 Small.woff") format("woff");
    font-display: swap;
}

#display {
    font-family: "Star4000";
    margin: 0 0 0 0;
    width: 100%;
}

#container {
    position: relative;
    width: 640px;
    height: 480px;
    background-image: url(../images/backgrounds/1.png);
    transform-origin: 0 0;
    background-repeat: no-repeat;
}

.wide #container {
    padding-left: 107px;
    padding-right: 107px;
    background: url(../images/backgrounds/1-wide.png);
    background-repeat: no-repeat;
}

#divTwc:fullscreen #container,
.kiosk #divTwc #container {
    width: unset;
    height: unset;
}

#loading {
    width: 640px;
    height: 480px;
    max-width: 100%;
    text-shadow: 4px 4px #000;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

#loading .title {
    font-family: Star4000 Large;
    font-size: 36px;
    color: #ff0;
    margin-bottom: 0px;
}

#loading .version {
    margin-bottom: 35px;
}

#loading .instructions {
    font-size: 18pt;
}

.heading {
    font-weight: bold;
    margin-top: 15px;
}

#settings,
#enabledDisplays {
    margin-bottom: 15px;
}

#enabledDisplays .loading,
#enabledDisplays .retrying,
#settings .loading,
#settings .retrying {
    color: #ff0;
}

#enabledDisplays .press-here,
#settings .press-here {
    color: #fff;
    cursor: pointer;
}

#enabledDisplays .failed,
#settings .failed {
    color: red;
}

#enabledDisplays .no-data,
#settings .no-data,
#enabledDisplays .disabled,
#settings .disabled {
    color: silver;
}

@media(prefers-color-scheme: light) {
    #enabledDisplays .loading,
    #enabledDisplays .retrying,
    #settings .loading,
    #settings .retrying {
        color: #990;
    }
    #enabledDisplays .press-here,
    #settings .press-here {
        color: #000;
        cursor: pointer;
    }
    #enabledDisplays .failed,
    #settings .failed {
        color: #900;
    }
    #enabledDisplays .no-data,
    #settings .no-data,
    #enabledDisplays .disabled,
    #settings .disabled {
        color: hsl(0, 0%, 30%);
    }
}

#enabledDisplays label,
#settings label {
    display: block;
    max-width: -moz-fit-content;
    max-width: fit-content;
    cursor: pointer;
}

#enabledDisplays label .alert,
#settings label .alert {
    display: none;
}

#enabledDisplays label .alert.show,
#settings label .alert.show {
    display: inline;
    color: red;
}

#divTwcBottom img {
    transform: scale(0.75);
}

#divTwc:fullscreen,
.kiosk #divTwc {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}

#divTwc:fullscreen.no-cursor,
.kiosk #divTwc.no-cursor {
    cursor: none;
}

#divTwc:fullscreen #display,
.kiosk #divTwc #display {
    position: relative;
}

#divTwc:fullscreen #divTwcBottom,
.kiosk #divTwc #divTwcBottom {
    display: flex;
    flex-direction: row;
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    width: 100%;
    position: absolute;
    bottom: 0px;
}

.kiosk #divTwc #divTwcBottom {
    display: none;
}

.navButton {
    cursor: pointer;
}

#ToggleScanlines {
    display: inline-block;
}

#ToggleScanlines .on {
    display: none;
}

#ToggleScanlines .off {
    display: inline-block;
}

#ToggleScanlines.on .on {
    display: inline-block;
}

#ToggleScanlines.on .off {
    display: none;
}

.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity .1s linear;
}

#divTwc:fullscreen .hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
}

.github-links {
    width: 610px;
    max-width: calc(100vw - 30px);
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.github-links span a {
    text-decoration: none;
    outline: 0;
}

.github-links span .widget {
    display: inline-block;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

.github-links span .btn,
.github-links span .social-count {
    position: relative;
    display: inline-block;
    display: inline-flex;
    height: 14px;
    padding: 2px 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    vertical-align: bottom;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-repeat: repeat-x;
    background-position: -1px -1px;
    background-size: 110% 110%;
    border: 1px solid;
}

.github-links span .btn {
    border-radius: .25em;
}

.github-links span .btn:not(:last-child) {
    border-radius: .25em 0 0 .25em;
}

.github-links span .social-count {
    border-left: 0;
    border-radius: 0 .25em .25em 0;
}

.github-links span .widget-lg .btn,
.github-links span .widget-lg .social-count {
    height: 16px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 16px;
}

.github-links span .octicon {
    display: inline-block;
    vertical-align: text-top;
    fill: currentColor;
    overflow: visible;
}

.github-links span .btn:focus-visible,
.github-links span .social-count:focus-visible {
    outline: 2px solid #0969da;
    outline-offset: -2px;
}

.github-links span .btn {
    color: #24292f;
    background-color: #ebf0f4;
    border-color: #ccd1d5;
    border-color: rgba(27, 31, 36, .15);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
    background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFF6F8FA", endColorstr="#FFEAEFF3");
}

.github-links span :root .btn {
    filter: none;
}

.github-links span .btn:hover,
.github-links span .btn:focus {
    background-color: #e9ebef;
    background-position: 0 -0.5em;
    border-color: #caccd1;
    border-color: rgba(27, 31, 36, .15);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f3f4f6'/%3e%3cstop offset='90%25' stop-color='%23e9ebef'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
    background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%);
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFF3F4F6", endColorstr="#FFE8EAEE");
}

.github-links span :root .btn:hover,
.github-links span :root .btn:focus {
    filter: none;
}

.github-links span .btn:active {
    background-color: #e5e9ed;
    border-color: #c7cbcf;
    border-color: rgba(27, 31, 36, .15);
    box-shadow: inset 0 .15em .3em rgba(27, 31, 36, .15);
    background-image: none;
    filter: none;
}

.github-links span .social-count {
    color: #24292f;
    background-color: #fff;
    border-color: #ddddde;
    border-color: rgba(27, 31, 36, .15);
}

.github-links span .social-count:hover,
.github-links span .social-count:focus {
    color: #0969da;
}

.github-links span .octicon-heart {
    color: #bf3989;
}

@media(prefers-color-scheme: light) {
    .github-links span .btn:focus-visible,
    .github-links span .social-count:focus-visible {
        outline: 2px solid #0969da;
        outline-offset: -2px;
    }
    .github-links span .btn {
        color: #24292f;
        background-color: #ebf0f4;
        border-color: #ccd1d5;
        border-color: rgba(27, 31, 36, .15);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f6f8fa'/%3e%3cstop offset='90%25' stop-color='%23ebf0f4'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
        background-image: linear-gradient(180deg, #f6f8fa, #ebf0f4 90%);
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFF6F8FA", endColorstr="#FFEAEFF3");
    }
    .github-links span :root .btn {
        filter: none;
    }
    .github-links span .btn:hover,
    .github-links span .btn:focus {
        background-color: #e9ebef;
        background-position: 0 -0.5em;
        border-color: #caccd1;
        border-color: rgba(27, 31, 36, .15);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%23f3f4f6'/%3e%3cstop offset='90%25' stop-color='%23e9ebef'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
        background-image: linear-gradient(180deg, #f3f4f6, #e9ebef 90%);
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FFF3F4F6", endColorstr="#FFE8EAEE");
    }
    .github-links span :root .btn:hover,
    .github-links span :root .btn:focus {
        filter: none;
    }
    .github-links span .btn:active {
        background-color: #e5e9ed;
        border-color: #c7cbcf;
        border-color: rgba(27, 31, 36, .15);
        box-shadow: inset 0 .15em .3em rgba(27, 31, 36, .15);
        background-image: none;
        filter: none;
    }
    .github-links span .social-count {
        color: #24292f;
        background-color: #fff;
        border-color: #ddddde;
        border-color: rgba(27, 31, 36, .15);
    }
    .github-links span .social-count:hover,
    .github-links span .social-count:focus {
        color: #0969da;
    }
    .github-links span .octicon-heart {
        color: #bf3989;
    }
}

@media(prefers-color-scheme: dark) {
    .github-links span .btn:focus-visible,
    .github-links span .social-count:focus-visible {
        outline: 2px solid #58a6ff;
        outline-offset: -2px;
    }
    .github-links span .btn {
        color: #c9d1d9;
        background-color: #1a1e23;
        border-color: #2f3439;
        border-color: rgba(240, 246, 252, .1);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%2321262d'/%3e%3cstop offset='90%25' stop-color='%231a1e23'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
        background-image: linear-gradient(180deg, #21262d, #1a1e23 90%);
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FF21262D", endColorstr="#FF191D22");
    }
    .github-links span :root .btn {
        filter: none;
    }
    .github-links span .btn:hover,
    .github-links span .btn:focus {
        background-color: #292e33;
        background-position: 0 -0.5em;
        border-color: #8b949e;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3clinearGradient id='o' x2='0' y2='1'%3e%3cstop stop-color='%2330363d'/%3e%3cstop offset='90%25' stop-color='%23292e33'/%3e%3c/linearGradient%3e%3crect width='100%25' height='100%25' fill='url(%23o)'/%3e%3c/svg%3e");
        background-image: linear-gradient(180deg, #30363d, #292e33 90%);
        filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#FF30363D", endColorstr="#FF282D32");
    }
    .github-links span :root .btn:hover,
    .github-links span :root .btn:focus {
        filter: none;
    }
    .github-links span .btn:active {
        background-color: #161719;
        border-color: #8b949e;
        box-shadow: inset 0 .15em .3em rgba(1, 4, 9, .15);
        background-image: none;
        filter: none;
    }
    .github-links span .social-count {
        color: #c9d1d9;
        background-color: #0d1117;
        border-color: #24282e;
        border-color: rgba(240, 246, 252, .1);
    }
    .github-links span .social-count:hover,
    .github-links span .social-count:focus {
        color: #58a6ff;
    }
    .github-links span .octicon-heart {
        color: #db61a2;
    }
}

#share-link-copied {
    color: #990;
    display: none;
}

#share-link-instructions {
    display: none;
}

body.kiosk #loading .instructions {
    display: none !important;
}

.kiosk>*:not(#divTwc) {
    display: none !important;
}

#divInfo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 250px;
}

.weather-display {
    width: 640px;
    height: 480px;
    overflow: hidden;
    position: relative;
    background-image: url(../images/backgrounds/1.png);
    height: 0px;
}

.weather-display.show {
    height: 480px;
}

.weather-display .template {
    display: none;
}

.weather-display .header {
    width: 640px;
    height: 60px;
    padding-top: 30px;
}

.weather-display .header .title {
    color: #ff0;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    font-family: "Star4000";
    font-size: 24pt;
    position: absolute;
    width: 250px;
}

.weather-display .header .title.single {
    left: 170px;
    top: 25px;
}

.weather-display .header .title.dual {
    left: 170px;
}

.weather-display .header .title.dual>div {
    position: absolute;
}

.weather-display .header .title.dual .top {
    top: -3px;
}

.weather-display .header .title.dual .bottom {
    top: 26px;
}

.weather-display .header .logo {
    top: 30px;
    left: 50px;
    position: absolute;
    z-index: 10;
}

.weather-display .header .noaa-logo {
    position: absolute;
    top: 39px;
    left: 356px;
}

.weather-display .header .title.single {
    top: 40px;
}

.weather-display .header .date-time {
    white-space: pre;
    color: #fff;
    font-family: "Star4000 Small";
    font-size: 24pt;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    left: 415px;
    width: 170px;
    text-align: right;
    position: absolute;
}

.weather-display .header .date-time.date {
    padding-top: 22px;
}

.weather-display .main {
    position: relative;
}

.weather-display .main.has-scroll {
    width: 640px;
    margin-top: 0;
    height: 310px;
    overflow: hidden;
}

.weather-display .main.has-scroll.no-header {
    height: 400px;
    margin-top: 0;
}

.weather-display .main.has-box {
    margin-left: 64px;
    margin-right: 64px;
    width: calc(100% - 128px);
}

#container>.scroll {
    display: none;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    width: 640px;
    height: 77px;
    overflow: hidden;
    margin-top: 3px;
    position: absolute;
    bottom: 0px;
    z-index: 1;
}

#container>.scroll.hazard {
    background-color: #702323;
}

#container>.scroll .scroll-container {
    width: 640px;
}

#container>.scroll .scroll-container .fixed,
#container>.scroll .scroll-container .scroll-header {
    margin-left: 55px;
    margin-right: 55px;
    overflow: hidden;
    white-space: nowrap;
}

#container>.scroll .scroll-container .scroll-header {
    height: 26px;
    font-family: "Star4000 Small";
    font-size: 20pt;
    margin-top: -10px;
}

#container>.scroll .scroll-container .fixed {
    font-family: "Star4000";
    font-size: 24pt;
}

#container>.scroll .scroll-container .fixed .scroll-area {
    text-wrap: nowrap;
    position: relative;
}

.wide #container>.scroll {
    width: 854px;
    margin-left: -107px;
}

.wide #container>.scroll .scroll-container {
    margin-left: 107px;
}

.weather-display .main.current-weather.main .col {
    height: 50px;
    width: 255px;
    display: inline-block;
    margin-top: 10px;
    padding-top: 10px;
    position: absolute;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
}

.weather-display .main.current-weather.main .col.left {
    font-family: "Star4000 Extended";
    font-size: 24pt;
}

.weather-display .main.current-weather.main .col.right {
    right: 0px;
    font-family: "Star4000 Large";
    font-size: 20px;
    font-weight: bold;
    line-height: 24px;
}

.weather-display .main.current-weather.main .col.right .row {
    margin-bottom: 12px;
}

.weather-display .main.current-weather.main .col.right .row .label,
.weather-display .main.current-weather.main .col.right .row .value {
    display: inline-block;
}

.weather-display .main.current-weather.main .col.right .row .label {
    margin-left: 20px;
}

.weather-display .main.current-weather.main .col.right .row .value {
    float: right;
    margin-right: 10px;
}

.weather-display .main.current-weather.main .center {
    text-align: center;
}

.weather-display .main.current-weather.main .temp {
    font-family: "Star4000 Large";
    font-size: 24pt;
}

.weather-display .main.current-weather.main .icon img {
    margin: 0 auto;
    display: block;
}

.weather-display .main.current-weather.main .wind-container {
    margin-left: 10px;
    display: flex;
}

.weather-display .main.current-weather.main .wind-container>div {
    width: 50%;
}

.weather-display .main.current-weather.main .wind-container .wind {
    text-align: right;
}

.weather-display .main.current-weather.main .wind-gusts {
    text-align: right;
    font-size: 28px;
}

.weather-display .main.current-weather.main .location {
    color: #ff0;
    max-height: 32px;
    margin-bottom: 10px;
    padding-top: 4px;
    overflow: hidden;
    text-wrap: nowrap;
}

#extended-forecast-html.weather-display {
    background-image: url("../images/backgrounds/2.png");
}

.weather-display .main.extended-forecast .day-container {
    margin-top: 16px;
    margin-left: 27px;
}

.weather-display .main.extended-forecast .day {
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    padding: 5px;
    height: 285px;
    width: 155px;
    display: inline-block;
    margin: 0px 15px;
    font-family: "Star4000";
    font-size: 24pt;
}

.weather-display .main.extended-forecast .day .date {
    text-transform: uppercase;
    text-align: center;
    color: #ff0;
}

.weather-display .main.extended-forecast .day .condition {
    text-align: center;
    height: 74px;
    margin-top: 5px;
}

.weather-display .main.extended-forecast .day .icon {
    text-align: center;
    height: 75px;
}

.weather-display .main.extended-forecast .day .icon img {
    max-height: 75px;
}

.weather-display .main.extended-forecast .day .temperatures {
    width: 100%;
}

.weather-display .main.extended-forecast .day .temperatures .temperature-block {
    display: inline-block;
    width: 44%;
    vertical-align: top;
}

.weather-display .main.extended-forecast .day .temperatures .temperature-block>div {
    text-align: center;
}

.weather-display .main.extended-forecast .day .temperatures .temperature-block .value {
    font-family: "Star4000 Large";
    margin-top: 4px;
}

.weather-display .main.extended-forecast .day .temperatures .temperature-block.lo .label {
    color: #8080ff;
}

.weather-display .main.extended-forecast .day .temperatures .temperature-block.hi .label {
    color: #ff0;
}

.weather-display .main.hourly.main {
    overflow-y: hidden;
}

.weather-display .main.hourly.main .column-headers {
    background-color: #200057;
    height: 20px;
    position: absolute;
    width: 100%;
}

.weather-display .main.hourly.main .column-headers {
    position: sticky;
    top: 0px;
    z-index: 5;
}

.weather-display .main.hourly.main .column-headers div {
    display: inline-block;
    font-family: "Star4000 Small";
    font-size: 24pt;
    color: #ff0;
    position: absolute;
    top: -14px;
    z-index: 5;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
}

.weather-display .main.hourly.main .column-headers .temp {
    left: 355px;
}

.weather-display .main.hourly.main .column-headers .like {
    left: 435px;
}

.weather-display .main.hourly.main .column-headers .wind {
    left: 535px;
}

.weather-display .main.hourly.main .hourly-lines {
    min-height: 338px;
    padding-top: 10px;
    background: repeating-linear-gradient(0deg, #001040 0px, #102080 136px, #102080 202px, #001040 338px);
}

.weather-display .main.hourly.main .hourly-lines .hourly-row {
    font-family: "Star4000 Large";
    font-size: 24pt;
    height: 72px;
    color: #ff0;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    position: relative;
}

.weather-display .main.hourly.main .hourly-lines .hourly-row>div {
    position: absolute;
    white-space: pre;
    top: 8px;
}

.weather-display .main.hourly.main .hourly-lines .hourly-row .hour {
    left: 25px;
}

.weather-display .main.hourly.main .hourly-lines .hourly-row .icon {
    left: 255px;
    width: 70px;
    text-align: center;
    top: unset;
}

.weather-display .main.hourly.main .hourly-lines .hourly-row .temp {
    left: 355px;
}

.weather-display .main.hourly.main .hourly-lines .hourly-row .like {
    left: 425px;
}

.weather-display .main.hourly.main .hourly-lines .hourly-row .like.heat-index {
    color: #e00;
}

.weather-display .main.hourly.main .hourly-lines .hourly-row .like.wind-chill {
    color: #8080ff;
}

.weather-display .main.hourly.main .hourly-lines .hourly-row .wind {
    left: 505px;
    width: 100px;
    text-align: right;
}

#hourly-graph-html {
    background-image: url(../images/backgrounds/1-chart.png);
}

#hourly-graph-html .header .right {
    position: absolute;
    top: 35px;
    right: 60px;
    width: 360px;
    font-family: "Star4000 Small";
    font-size: 28px;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    text-align: right;
}

#hourly-graph-html .header .right div {
    margin-top: -18px;
}

#hourly-graph-html .header .right .temperature {
    color: red;
}

#hourly-graph-html .header .right .dewpoint {
    color: green;
}

#hourly-graph-html .header .right .cloud {
    color: #d3d3d3;
}

#hourly-graph-html .header .right .rain {
    color: aqua;
}

.weather-display .main.hourly-graph.main>div {
    position: absolute;
}

.weather-display .main.hourly-graph.main .label {
    font-family: "Star4000 Small";
    font-size: 24pt;
    color: #ff0;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    margin-top: -15px;
    position: absolute;
}

.weather-display .main.hourly-graph.main .x-axis {
    bottom: 0px;
    left: 54px;
    width: 532px;
    height: 20px;
}

.weather-display .main.hourly-graph.main .x-axis .label {
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
}

.weather-display .main.hourly-graph.main .x-axis .label.l-1 {
    left: 0px;
}

.weather-display .main.hourly-graph.main .x-axis .label.l-2 {
    left: 133px;
}

.weather-display .main.hourly-graph.main .x-axis .label.l-3 {
    left: 266px;
}

.weather-display .main.hourly-graph.main .x-axis .label.l-4 {
    left: 399px;
}

.weather-display .main.hourly-graph.main .x-axis .label.l-5 {
    left: 532px;
}

.weather-display .main.hourly-graph.main .chart {
    top: 0px;
    left: 50px;
}

.weather-display .main.hourly-graph.main .chart img {
    width: 532px;
    height: 285px;
}

.weather-display .main.hourly-graph.main .y-axis {
    top: 0px;
    left: 0px;
    width: 50px;
    height: 285px;
}

.weather-display .main.hourly-graph.main .y-axis .label {
    text-align: right;
    right: 0px;
}

.weather-display .main.hourly-graph.main .y-axis .label.l-1 {
    top: 0px;
}

.weather-display .main.hourly-graph.main .y-axis .label.l-2 {
    top: 93.3333333333px;
}

.weather-display .main.hourly-graph.main .y-axis .label.l-3 {
    bottom: 82.3333333333px;
}

.weather-display .main.hourly-graph.main .y-axis .label.l-4 {
    bottom: 0px;
}

.weather-display .main.hourly-graph.main .column-headers {
    background-color: #200057;
    height: 20px;
    position: absolute;
    width: 100%;
}

.weather-display .main.hourly-graph.main .column-headers {
    position: sticky;
    top: 0px;
    z-index: 5;
}

.weather-display .main.hourly-graph.main .column-headers .temp {
    left: 355px;
}

.weather-display .main.hourly-graph.main .column-headers .like {
    left: 435px;
}

.weather-display .main.hourly-graph.main .column-headers .wind {
    left: 535px;
}

.weather-display .main.travel.main {
    overflow-y: hidden;
}

.weather-display .main.travel.main .column-headers {
    background-color: #200057;
    height: 20px;
    position: sticky;
    top: 0px;
    width: 100%;
    z-index: 5;
    overflow: hidden;
}

.weather-display .main.travel.main .column-headers div {
    display: inline-block;
    font-family: "Star4000 Small";
    font-size: 24pt;
    color: #ff0;
    position: absolute;
    top: -14px;
    z-index: 5;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
}

.weather-display .main.travel.main .column-headers .temp {
    width: 50px;
    text-align: center;
}

.weather-display .main.travel.main .column-headers .temp.low {
    left: 455px;
}

.weather-display .main.travel.main .column-headers .temp.high {
    left: 510px;
    width: 60px;
}

.weather-display .main.travel.main .travel-lines {
    min-height: 338px;
    padding-top: 10px;
    background: repeating-linear-gradient(0deg, #001040 0px, #102080 136px, #102080 202px, #001040 338px);
}

.weather-display .main.travel.main .travel-lines .travel-row {
    font-family: "Star4000 Large";
    font-size: 24pt;
    height: 72px;
    color: #ff0;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    position: relative;
}

.weather-display .main.travel.main .travel-lines .travel-row>div {
    position: absolute;
    white-space: pre;
    top: 8px;
}

.weather-display .main.travel.main .travel-lines .travel-row .city {
    left: 80px;
}

.weather-display .main.travel.main .travel-lines .travel-row .icon {
    left: 330px;
    width: 70px;
    text-align: center;
    top: unset;
}

.weather-display .main.travel.main .travel-lines .travel-row .icon img {
    max-width: 47px;
}

.weather-display .main.travel.main .travel-lines .travel-row .temp {
    width: 50px;
    text-align: center;
}

.weather-display .main.travel.main .travel-lines .travel-row .temp.low {
    left: 455px;
}

.weather-display .main.travel.main .travel-lines .travel-row .temp.high {
    left: 510px;
    width: 60px;
}

.weather-display .latest-observations.main {
    overflow-y: hidden;
}

.weather-display .latest-observations.main .column-headers {
    height: 20px;
    position: absolute;
    width: 100%;
}

.weather-display .latest-observations.main .column-headers {
    top: 0px;
}

.weather-display .latest-observations.main .column-headers div {
    display: inline-block;
    font-family: "Star4000 Small";
    font-size: 24pt;
    position: absolute;
    top: -14px;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
}

.weather-display .latest-observations.main .column-headers .temp {
    display: none;
}

.weather-display .latest-observations.main .column-headers .temp.show {
    display: inline-block;
}

.weather-display .latest-observations.main .temp {
    left: 230px;
}

.weather-display .latest-observations.main .weather {
    left: 280px;
}

.weather-display .latest-observations.main .wind {
    left: 430px;
}

.weather-display .latest-observations.main .observation-lines {
    min-height: 338px;
    padding-top: 10px;
}

.weather-display .latest-observations.main .observation-lines .observation-row {
    font-family: "Star4000";
    font-size: 24pt;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    position: relative;
    height: 40px;
}

.weather-display .latest-observations.main .observation-lines .observation-row>div {
    position: absolute;
    top: 8px;
}

.weather-display .latest-observations.main .observation-lines .observation-row .wind {
    white-space: pre;
    text-align: right;
}

.weather-display .local-forecast .container {
    position: relative;
    top: 15px;
    margin: 0px 10px;
    box-sizing: border-box;
    height: 280px;
    overflow: hidden;
}

.weather-display .local-forecast .forecasts {
    position: relative;
}

.weather-display .local-forecast .forecast {
    font-family: "Star4000";
    font-size: 24pt;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    min-height: 280px;
    line-height: 40px;
}

.weather-display .progress {
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    font-family: "Star4000 Extended";
    font-size: 19pt;
}

.weather-display .progress .container {
    position: relative;
    top: 15px;
    margin: 0px 10px;
    box-sizing: border-box;
    height: 310px;
    overflow: hidden;
    line-height: 28px;
}

.weather-display .progress .container .item {
    position: relative;
}

.weather-display .progress .container .item .name {
    white-space: nowrap;
}

.weather-display .progress .container .item .name::after {
    content: "........................................................................";
}

.weather-display .progress .container .item .links {
    position: absolute;
    text-align: right;
    right: 0px;
    top: 0px;
}

.weather-display .progress .container .item .links>div {
    background-color: #26235a;
    display: none;
    padding-left: 4px;
}

.weather-display .progress .container .item .links .loading,
.weather-display .progress .container .item .links .retrying {
    color: #ff0;
}

.weather-display .progress .container .item .links .press-here {
    color: lime;
    cursor: pointer;
}

.weather-display .progress .container .item .links .failed {
    color: red;
}

.weather-display .progress .container .item .links .no-data,
.weather-display .progress .container .item .links .disabled {
    color: silver;
}

.weather-display .progress .container .item .links.loading .loading,
.weather-display .progress .container .item .links.press-here .press-here,
.weather-display .progress .container .item .links.failed .failed,
.weather-display .progress .container .item .links.no-data .no-data,
.weather-display .progress .container .item .links.disabled .disabled,
.weather-display .progress .container .item .links.retrying .retrying {
    display: block;
}

@keyframes progress-scroll {
    0% {
        background-position: -40px 0;
    }
    100% {
        background-position: 40px 0;
    }
}

#progress-html.weather-display .scroll .progress-bar-container {
    border: 2px solid #000;
    background-color: #fff;
    margin: 20px auto;
    width: 524px;
    position: relative;
    display: none;
}

#progress-html.weather-display .scroll .progress-bar-container.show {
    display: block;
}

#progress-html.weather-display .scroll .progress-bar-container .progress-bar {
    height: 20px;
    margin: 2px;
    width: 520px;
    background: repeating-linear-gradient(90deg, #09246f 0px, #09246f 5px, #364ac0 5px, #364ac0 10px, #4f99f9 10px, #4f99f9 15px, #8ffdfa 15px, #8ffdfa 20px, #4f99f9 20px, #4f99f9 25px, #364ac0 25px, #364ac0 30px, #09246f 30px, #09246f 40px);
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: progress-scroll;
    animation-timing-function: steps(8, end);
}

#progress-html.weather-display .scroll .progress-bar-container .cover {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #fff;
    width: 100%;
    height: 24px;
    transition: width 1s steps(6);
}

#radar-html.weather-display {
    background-image: url("../images/backgrounds/4.png");
}

#radar-html.weather-display .header {
    height: 83px;
}

#radar-html.weather-display .header .title.dual {
    color: #fff;
    font-family: "Arial", sans-serif;
    font-weight: bold;
    font-size: 28pt;
    left: 155px;
}

#radar-html.weather-display .header .title.dual .top {
    top: -4px;
}

#radar-html.weather-display .header .title.dual .bottom {
    top: 31px;
}

#radar-html.weather-display .header .right {
    position: absolute;
    right: 0px;
    width: 360px;
    margin-top: 2px;
    font-family: "Star4000";
    font-size: 18pt;
    font-weight: bold;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    text-align: center;
}

#radar-html.weather-display .header .right .scale>div {
    display: inline-block;
}

#radar-html.weather-display .header .right .scale-table {
    display: table-row;
    border-collapse: collapse;
}

#radar-html.weather-display .header .right .scale-table .box {
    display: table-cell;
    border: 2px solid #000;
    width: 17px;
    height: 24px;
    padding: 0;
}

#radar-html.weather-display .header .right .scale-table .box-1 {
    background-color: #31d216;
}

#radar-html.weather-display .header .right .scale-table .box-2 {
    background-color: #1c8a12;
}

#radar-html.weather-display .header .right .scale-table .box-3 {
    background-color: #145a0f;
}

#radar-html.weather-display .header .right .scale-table .box-4 {
    background-color: #0a280a;
}

#radar-html.weather-display .header .right .scale-table .box-5 {
    background-color: #c4b346;
}

#radar-html.weather-display .header .right .scale-table .box-6 {
    background-color: #be4813;
}

#radar-html.weather-display .header .right .scale-table .box-7 {
    background-color: #ab0e0e;
}

#radar-html.weather-display .header .right .scale-table .box-8 {
    background-color: #731f04;
}

#radar-html.weather-display .header .right .scale .text {
    position: relative;
    top: -5px;
}

#radar-html.weather-display .header .right .time {
    position: relative;
    font-weight: normal;
    top: -14px;
    font-family: "Star4000 Small";
    font-size: 24pt;
}

.weather-display .main.radar {
    overflow: hidden;
    height: 367px;
}

.weather-display .main.radar .container .tiles {
    position: absolute;
    width: 1400px;
}

.weather-display .main.radar .container .tiles img {
    vertical-align: middle;
}

.weather-display .main.radar .container .scroll-area {
    position: relative;
}

.wide.radar #container {
    background: url(../images/backgrounds/4-wide.png);
}

#regional-forecast-html.weather-display {
    background-image: url("../images/backgrounds/5.png");
}

.weather-display .main.regional-forecast {
    position: relative;
}

.weather-display .main.regional-forecast .map {
    position: absolute;
    transform-origin: 0 0;
}

.weather-display .main.regional-forecast .location {
    position: absolute;
    width: 140px;
    margin-left: -40px;
    margin-top: -35px;
}

.weather-display .main.regional-forecast .location>div {
    position: absolute;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
}

.weather-display .main.regional-forecast .location .icon {
    top: 26px;
    left: 44px;
}

.weather-display .main.regional-forecast .location .icon img {
    max-height: 32px;
}

.weather-display .main.regional-forecast .location .temp {
    font-family: "Star4000 Large";
    font-size: 28px;
    padding-top: 2px;
    color: #ff0;
    top: 28px;
    text-align: right;
    width: 40px;
}

.weather-display .main.regional-forecast .location .city {
    font-family: Star4000;
    font-size: 20px;
}

#almanac-html.weather-display {
    background-image: url("../images/backgrounds/3.png");
}

.weather-display .main.almanac {
    font-family: "Star4000";
    font-size: 24pt;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
}

.weather-display .main.almanac .sun {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    gap: 0px 90px;
    margin: 3px auto 5px auto;
    width: -moz-fit-content;
    width: fit-content;
    line-height: 30px;
}

.weather-display .main.almanac .sun .grid-item {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    position: relative;
}

.weather-display .main.almanac .sun .grid-item.header {
    color: #ff0;
    text-align: center;
}

.weather-display .main.almanac .sun .grid-item.row-label {
    text-align: right;
}

.weather-display .main.almanac .sun .grid-item.time {
    text-align: center;
}

.weather-display .main.almanac .moon {
    position: relative;
    padding: 7px 50px;
    line-height: 36px;
}

.weather-display .main.almanac .moon .title {
    color: #ff0;
    padding-left: 13px;
}

.weather-display .main.almanac .moon .day {
    display: inline-block;
    text-align: center;
    width: 132px;
}

.weather-display .main.almanac .moon .day .icon {
    padding-left: 10px;
}

.weather-display .main.almanac .moon .day .date {
    position: relative;
    top: -10px;
}

#hazards-html.weather-display {
    background-image: url("../images/backgrounds/7.png");
}

.weather-display .main.hazards.main {
    overflow-y: hidden;
    height: 480px;
    background-color: #702323;
}

.weather-display .main.hazards.main .hazard-lines {
    min-height: 400px;
    padding-top: 10px;
}

.weather-display .main.hazards.main .hazard-lines .hazard {
    font-family: "Star4000";
    font-size: 24pt;
    color: #fff;
    text-shadow: 0px 0px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    position: relative;
    text-transform: uppercase;
    margin-top: 10px;
    margin-left: 80px;
    margin-right: 80px;
    padding-bottom: 10px;
}

.wide.hazards #container {
    background: url(../images/backgrounds/7-wide.png);
}

.media {
    display: none;
}

#ToggleMediaContainer {
    display: none;
    position: relative;
}

#ToggleMediaContainer.available {
    display: inline-block;
}

#ToggleMediaContainer.available img.on {
    display: none;
}

#ToggleMediaContainer.available img.off {
    display: block;
}

#ToggleMediaContainer.available.playing img.on {
    display: block;
}

#ToggleMediaContainer.available.playing img.off {
    display: none;
}

#ToggleMediaContainer .volume-slider {
    display: none;
    position: absolute;
    top: 0px;
    transform: translateY(-100%);
    width: 100%;
    background-color: #000;
    text-align: center;
    z-index: 100;
}

#ToggleMediaContainer .volume-slider input[type=range] {
    writing-mode: vertical-lr;
    direction: rtl;
    margin-top: 20px;
    margin-bottom: 20px;
}

#ToggleMediaContainer .volume-slider.show {
    display: block;
}

#spc-outlook-html.weather-display {
    background-image: url("../images/backgrounds/6.png");
}

.weather-display .spc-outlook .container {
    position: relative;
    top: 0px;
    margin: 0px 10px;
    box-sizing: border-box;
    height: 300px;
    overflow: hidden;
}

.weather-display .spc-outlook .risk-levels {
    position: absolute;
    left: 206px;
    font-family: "Star4000 Small";
    font-size: 32px;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
}

.weather-display .spc-outlook .risk-levels .risk-level {
    position: relative;
    top: -14px;
    height: 20px;
}

.weather-display .spc-outlook .risk-levels .risk-level:nth-child(1) {
    left: 100px;
}

.weather-display .spc-outlook .risk-levels .risk-level:nth-child(2) {
    left: 80px;
}

.weather-display .spc-outlook .risk-levels .risk-level:nth-child(3) {
    left: 60px;
}

.weather-display .spc-outlook .risk-levels .risk-level:nth-child(4) {
    left: 40px;
}

.weather-display .spc-outlook .risk-levels .risk-level:nth-child(5) {
    left: 20px;
}

.weather-display .spc-outlook .risk-levels .risk-level:nth-child(6) {
    left: 0px;
}

.weather-display .spc-outlook .days {
    position: absolute;
    top: 120px;
}

.weather-display .spc-outlook .days .day {
    height: 60px;
}

.weather-display .spc-outlook .days .day .day-name {
    position: absolute;
    font-family: "Star4000";
    font-size: 24pt;
    width: 200px;
    text-align: right;
    text-shadow: 3px 3px 0 #000, -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000, -1.5px 1.5px 0 #000, -1.5px 0 0 #000;
    padding-top: 20px;
}

.weather-display .spc-outlook .days .day .risk-bar {
    position: absolute;
    width: 150px;
    height: 40px;
    left: 210px;
    margin-top: 20px;
    border: 3px outset hsl(0, 0%, 70%);
    background: linear-gradient(0deg, hsl(0, 0%, 40%) 0%, hsl(0, 0%, 60%) 50%, hsl(0, 0%, 40%) 100%);
}

.scanlines {
    position: relative;
    overflow: hidden;
}

.scanlines:before,
.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: absolute;
}

.scanlines:before {
    width: 100%;
    height: 1px;
    z-index: 2147483649;
    background: rgba(0, 0, 0, .3);
    opacity: .75;
    animation: scanline 6s linear infinite;
    height: var(--scanline-thickness, 1px);
}

.scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483648;
    background: repeating-linear-gradient(to bottom, transparent 0, transparent var(--scanline-thickness, 1px), rgba(0, 0, 0, 0.3) var(--scanline-thickness, 1px), rgba(0, 0, 0, 0.3) calc(var(--scanline-thickness, 1px) * 2));
    animation: none;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

@keyframes scanline {
    0% {
        transform: translate3d(0, 200000%, 0);
    }
}

@keyframes scanlines {
    0% {
        background-position: 0 50%;
    }
}

/*# sourceMappingURL=ws.min.css.map */