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

    font-family: "Star4000";

    background: #000;

    color: #fff;

    margin: 0;

}

#homeLink {

    position: fixed;

    top: 20px;

    left: 24px;

    z-index: 9999;

    padding: 4px 10px;

    font-family: "Josefin Sans", sans-serif;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #fff;

    text-decoration: none;

    background: rgba(0,0,0,.75);

    border: none;

    border-radius: 4px;

    transition: opacity .5s ease,
                color .25s ease,
                background .25s ease;

}

#homeLink:hover {

    color: #67d9ff;

}

#homeLink.hidden {

    opacity: 0;

    pointer-events: none;

}

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

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

}
body.kiosk {
    margin:0px;
    overflow:hidden;
    width:100vw
}
#divQuery {

    margin-top: 52px;

    max-width: 640px;

}
#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:none
}
@media(prefers-color-scheme: dark) {
    #divQuery .buttons #btnGetGps img.dark {
        display:inline-block
    }

}
@media(prefers-color-scheme: dark) {
    #divQuery .buttons #btnGetGps img.light {
        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 #txtAddress {
    width:calc(100% - 170px);
    max-width:490px;
    font-size:16pt;
    min-width:200px;
    display:inline-block
}
@media(prefers-color-scheme: dark) {
    #divQuery #txtAddress {
        background-color:#000;
        color:#fff;
        border:1px solid #a9a9a9
    }

}
.autocomplete-suggestions {
    background-color:#fff;
    border:1px solid #000;
    position:absolute;
    z-index:9999
}
@media(prefers-color-scheme: dark) {
    .autocomplete-suggestions {
        background-color:#000
    }

}
.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;

}
#divTwc.wide {
    max-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:100%
}
@media(prefers-color-scheme: dark) {
    #divTwcBottom {
        background-color:#303030
    }

}
#divTwcBottom>div {
    padding-left:6px;
    padding-right:6px
}
@media(max-width: 550px) {
    #divTwcBottom>div {
        zoom:.9
    }

}
@media(max-width: 500px) {
    #divTwcBottom>div {
        zoom:.8
    }

}
@media(max-width: 450px) {
    #divTwcBottom>div {
        zoom:.7
    }

}
@media(max-width: 400px) {
    #divTwcBottom>div {
        zoom:.6
    }

}
@media(max-width: 350px) {
    #divTwcBottom>div {
        zoom:.5
    }

}
#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 {
    position: absolute;
    left: 165px;
    top: 177px;
    width: 878px;
    height: 735px;
    overflow: visible;
    margin: 0;
    font-family: "Star4000";
}
#container {
    position: absolute;

    width: 640px;
    height: 480px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%) scale(1.37);
    transform-origin: center center;
}
.wide #container {
    padding-left:107px;
    padding-right:107px;
    background-repeat:no-repeat;
    background:url(../images/backgrounds/1-wide.png)
}
#divTwc:-webkit-full-screen #container {
    width:unset;
    height:unset;
    transform-origin:unset
}
#divTwc:fullscreen #container,.kiosk #divTwc #container {
    width:unset;
    height:unset;
    transform-origin: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 {
    margin-bottom:15px
}
#enabledDisplays,#settings {
    margin-bottom:15px
}

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

#enabledDisplays .press-here,
#settings .press-here {
    color: #ffffff;
}
#enabledDisplays .failed,#settings .failed {
    color:red
}
#enabledDisplays .no-data,
#settings .no-data {
    color: #bfbfbf;
}
#enabledDisplays .disabled,
#settings .disabled {
    color: #bfbfbf;
}
#enabledDisplays .press-here,#settings .press-here {
    color:#fff
}

#enabledDisplays label,#settings label {
    display:block;
    max-width:300px
}
#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:-webkit-full-screen {
    display:flex;
    align-items:center;
    justify-content:center;
    align-content:center
}
#divTwc:fullscreen,.kiosk #divTwc {
    display:flex;
    align-items:center;
    justify-content:center;
    align-content:center
}
#divTwc:-webkit-full-screen.no-cursor {
    cursor:none
}
#divTwc:fullscreen.no-cursor,.kiosk #divTwc.no-cursor {
    cursor:none
}
#divTwc:-webkit-full-screen #display {
    position:relative
}
#divTwc:fullscreen #display,.kiosk #divTwc #display {
    position:relative
}
#divTwc:-webkit-full-screen #divTwcBottom {
    display:flex;
    flex-direction:row;
    background-color:rgba(0,0,0,.5);
    color:#fff;
    width:100%;
    position:absolute;
    bottom:0px
}
#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>div {
    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:-webkit-full-screen .hidden {
    visibility:hidden;
    opacity:0;
    -webkit-transition:visibility 0s 1s,opacity 1s linear;
    transition:visibility 0s 1s,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
}
.kiosk #divQuery,.kiosk>.info,.kiosk>.related-links,.kiosk>.heading,.kiosk #enabledDisplays,.kiosk #settings,.kiosk #divInfo {
    display:none
}
.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 {
    position: absolute;
    top: 6.5%;
    left: 8%;
    width: 12%;
    z-index: 10;
}
.weather-display .header .logo img {
    display: block;
    width: 100%;
    height: auto;
}
.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;
    height:310px;
    overflow:hidden
}
.weather-display .main.has-scroll.no-header {
    height:400px
}
.weather-display .main.has-box {
    margin-left:64px;
    margin-right:64px;
    width:calc(100% - 128px)
}
.weather-display .scroll {
    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:70px;
    overflow:hidden;
    margin-top:3px
}
.weather-display .scroll.hazard {
    background-color:#702323
}
.weather-display .scroll .fixed,.weather-display .scroll .scroll-header {
    margin-left:55px;
    margin-right:55px;
    overflow:hidden
}
.weather-display .scroll .scroll-header {
    height:26px;
    font-family:"Star4000 Small";
    font-size:20pt;
    margin-top:-10px
}
.weather-display .scroll .fixed {
    font-family:"Star4000";
    font-size:24pt
}
.weather-display .scroll .fixed .scroll-area {
    text-wrap:nowrap;
    position:relative
}
.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 {
    height:100px
}
.weather-display .main.current-weather.main .icon img {
    max-width:126px
}
.weather-display .main.current-weather.main .wind-container {
    margin-bottom:10px
}
.weather-display .main.current-weather.main .wind-container>div {
    width:45%;
    display:inline-block;
    margin:0px
}
.weather-display .main.current-weather.main .wind-container .wind-label {
    margin-left:5px
}
.weather-display .main.current-weather.main .wind-container .wind {
    text-align:right
}
.weather-display .main.current-weather.main .wind-gusts {
    margin-left:5px
}
.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: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;
    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 .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:0px;
    width:640px;
    height:20px
}
.weather-display .main.hourly-graph.main .x-axis .label {
    text-align:center;
    width:50px
}
.weather-display .main.hourly-graph.main .x-axis .label.l-1 {
    left:25px
}
.weather-display .main.hourly-graph.main .x-axis .label.l-2 {
    left:158px
}
.weather-display .main.hourly-graph.main .x-axis .label.l-3 {
    left:291px
}
.weather-display .main.hourly-graph.main .x-axis .label.l-4 {
    left:424px
}
.weather-display .main.hourly-graph.main .x-axis .label.l-5 {
    left:557px
}
.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:140px
}
.weather-display .main.hourly-graph.main .y-axis .label.l-3 {
    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:absolute;
    width:100%
}
.weather-display .main.travel.main .column-headers {
    position:sticky;
    top:0px;
    z-index:5
}
.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
}
.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 {
    color:silver
}
.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:table;
    margin-left:50px;
    height:100px
}
.weather-display .main.almanac .sun>div {
    display:table-row;
    position:relative
}
.weather-display .main.almanac .sun>div>div {
    display:table-cell
}
.weather-display .main.almanac .sun .days {
    color:#ff0;
    text-align:right;
    top:-5px
}
.weather-display .main.almanac .sun .days .day {
    padding-right:10px
}
.weather-display .main.almanac .sun .times {
    text-align:right
}
.weather-display .main.almanac .sun .times .sun-time {
    width:200px
}
.weather-display .main.almanac .sun .times.times-1 {
    top:-10px
}
.weather-display .main.almanac .sun .times.times-2 {
    top:-15px
}
.weather-display .main.almanac .moon {
    position:relative;
    top:-10px;
    padding:0px 60px
}
.weather-display .main.almanac .moon .title {
    color:#ff0
}
.weather-display .main.almanac .moon .day {
    display:inline-block;
    text-align:center;
    width:130px
}
.weather-display .main.almanac .moon .day .icon {
    padding-left:10px
}
.weather-display .main.almanac .moon .day .date {
    position:relative;
    top:-10px
}
.weather-display .main.hazards.main {
    overflow-y:hidden;
    height:480px;
    width:640px;
    background-color:#702323
}
.weather-display .main.hazards.main .hazard-lines {
    min-height:480px;
    padding-top:10px;
    width:640px
}
.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
}
.media {
    display:none
}
#ToggleMedia {
    display:none
}
#ToggleMedia.available {
    display:inline-block
}
#ToggleMedia.available img.on {
    display:none
}
#ToggleMedia.available img.off {
    display:block
}
#ToggleMedia.available.playing img.on {
    display:block
}
#ToggleMedia.available.playing img.off {
    display:none
}
#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 #b3b3b3;
    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
}
.scanlines:after {
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:2147483648;
    background:linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);
    background-size:100% 2px;
    animation:none
}
@keyframes scanline {
    0% {
        transform:translate3d(0, 200000%, 0)
    }

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

}

/*# sourceMappingURL=main.css.map */