@font-face {
    font-family : clock;
    src         : url(fonts/clock3-webfont.woff2) format("woff2"), url(fonts/clock3-webfont.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family : weathertext3;
    src         : url(fonts/verbatim-regular.woff2) format("woff2"), url(fonts/verbatim-regular.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family : weathertext2;
    src         : url(fonts/verbatim-medium.woff2) format("woff2"), url(fonts/verbatim-medium.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family : headingtext;
    src         : url(fonts/HelveticaNeue-Medium.woff2) format("woff2"), url(fonts/HelveticaNeue-Medium.woff) format("woff");
    font-display: swap
}

@font-face {
    font-family : verb;
    src         : url(fonts/verbatim-bold.woff2) format("woff2"), url(fonts/verbatim-bold.woff) format("woff");
    font-display: swap
}

@media (prefers-color-scheme:dark) {
    :root {
        --white               : hsl(0, 0%, 96%);
        --light               : hsl(0, 0%, 96%);
        --dark                : #0F0F0F;
        --pagebackground      : #0F0F0F;
        --dark-popup          : hsl(200, 18%, 3%);
        --dark-light          : hsla(0, 0%, 0%, 0.251);
        --dark-toggle         : hsl(202, 8%, 46%);
        --black               : hsl(0, 0%, 0%);
        --deepblue            : hsla(185, 100%, 37%, 1);
        --darkblue            : rgb(28, 124, 133);
        --deepcold            : hsl(205, 69%, 63%);
        --blue                : hsla(185, 100%, 37%, 1);
        --rainblue            : hsla(185, 100%, 37%, 1);
        --darkred             : hsl(0, 38%, 32%);
        --deepred             : hsl(0, 38%, 32%);
        --red                 : hsl(7, 60%, 57%);
        --yellow              : hsl(35, 77%, 58%);
        --green               : hsl(75, 62%, 43%);
        --orange              : hsl(19, 66%, 55%);
        --purple              : hsl(246, 31%, 62%);
        --silver              : hsl(206, 23%, 94%);
        --border-dark         : hsl(206, 12%, 27%);
        --border-dark2        : hsla(206, 12%, 27%, .4);
        --border-dark-sun     : hsla(206, 12%, 27%, .2);
        --blue2               : rgba(184, 236, 243, 0.5);
        --yellow2             : hsla(35, 77%, 58%, .8);
        --body-text-dark      : hsl(209, 28%, 75%);
        --body-text-darkb     : hsl(212, 12%, 72%);
        --body-text-light     : hsl(0, 0%, 33%);
        --blocks              : hsl(227, 22%, 92%);
        --modules             : hsl(240, 6%, 10%);
        --blocks-background2  : hsla(200, 7%, 45%, 0.7);
        --blocks-background   : #0F0F0F;
        --temp-5-10           : hsl(205, 69%, 63%);
        --temp-0-5            : hsla(185, 100%, 37%, 1);
        --temp0-5             : hsla(185, 100%, 37%, 1);
        --temp5-10            : hsl(74, 60%, 46%);
        --temp10-15           : hsl(35, 77%, 58%);
        --temp15-20           : hsl(34, 98%, 49%);
        --temp20-25           : hsl(19, 66%, 55%);
        --temp25-30           : hsl(12, 80%, 52%);
        --temp30-35           : hsl(2, 56%, 55%);
        --temp35-40           : hsl(4, 40%, 48%);
        --temp40-45           : hsl(332, 45%, 53%);
        --temp45-50           : hsl(323, 40%, 54%);
        --font-color          : hsl(0, 0%, 50%);
        --text-shadow2        : hsl(229, 14%, 15%);
        --bg-color            : hsla(198, 14%, 14%, 0.19);
        --grid-lines          : linear-gradient(hsla(0, 0%, 33%, 0.2) 2px, transparent 2px), linear-gradient(to right, hsla(0, 0%, 33%, 0.2) 2px, transparent 2px);
        --grid-linescompass   : linear-gradient(hsla(0, 0%, 33%, 0.2) 1px, transparent 1px), linear-gradient(to right, hsla(0, 0%, 33%, 0.2) 1px, transparent 1px);
        --contrast            : brightness(115%);
        --popupcontrast       : brightness(100%);
        --chartcontrast       : brightness(110%);
        --normalcontrast      : brightness(100%);
        --iconcontrast        : brightness(85%);
        --modulesborder       : hsla(217, 15%, 17%, 1);
        --modulesborderside   : hsla(217, 15%, 17%, 0);
        --modulesshadow       : none;
        --modulecaptions      : rgba(52, 71, 83, 0.2);
        --compassring         : hsla(218, 19%, 25%, 0.2);
        --compassringinner    : transparent;
        --compassbezel        : rgba(53, 59, 68, 1);
        --circleborder4       : hsl(206, 12%, 27%);
        --tablet              : hsl(222, 14%, 14%);
        --navicons            : hsla(205, 11%, 62%, 0.1);
        --charticons          : hsla(205, 11%, 62%, 0.1);
        --menubutton          : #272c30;
        --pressurevalue       : hsl(209, 28%, 75%);
        --windvalue           : hsl(209, 28%, 75%);
        --circleborderouter   : #252930;
        --litybackground      : rgba(32, 35, 39, .5);
        --webcam              : hsla(217, 15%, 17%, .5);
        --notificationmodule  : linear-gradient(360deg, #262d33 68%, #1a1c24 10%);
        --notificationpointer : #1a1c24;
        --charttitles         : rgba(85, 145, 160, 0);
        --text-shadow4        : none;
        --text-shadow5        : -1px -1px 1px rgb(121, 128, 129);
        --charttitlebackground: #3D464D;
        --navbottom           : hsl(222, 14%, 14%);
        --menubackground      : linear-gradient(90deg, #1d1f25 96%, #858795 88%);
        --menulinks           : #272c30;
        --menulinkshover      : #FB631D;
        --alternative-blue    : #1994D7;
        --charticonborder     : hsla(205, 11%, 62%, 0.1)
    }
}

@media (prefers-color-scheme:light) {
    :root {
        --white               : hsl(0, 0%, 96%);
        --light               : hsl(0, 0%, 96%);
        --dark                : ##fff;
        --pagebackground      : #ffffff;
        --dark-popup          : hsl(200, 18%, 3%);
        --dark-light          : hsla(0, 0%, 0%, 0.251);
        --dark-toggle         : hsl(202, 8%, 46%);
        --dark-caption        : rgba(66, 70, 72, 0.429);
        --black               : hsl(0, 0%, 0%);
        --deepblue            : rgb(28, 124, 133);
        --darkblue            : rgb(28, 124, 133);
        --deepcold            : hsl(205, 69%, 63%);
        --blue                : hsla(185, 100%, 37%, 1);
        --rainblue            : hsla(185, 100%, 37%, 1);
        --darkred             : hsl(0, 38%, 32%);
        --deepred             : hsl(0, 38%, 32%);
        --red                 : hsl(7, 60%, 57%);
        --yellow              : hsl(35, 77%, 58%);
        --green               : hsl(75, 62%, 43%);
        --orange              : hsl(19, 66%, 55%);
        --black2              : hsla(240, 4%, 9%, 0.3);
        --daylight            : hsla(14, 95%, 50%, .8);
        --thecenter           : --;
        --purple              : hsl(246, 31%, 62%);
        --silver              : hsl(206, 23%, 94%);
        --border-dark         : hsl(206, 12%, 27%);
        --border-dark2        : hsla(206, 12%, 27%, .4);
        --border-dark-sun     : hsla(209, 21%, 81%, .4);
        --blue2               : rgba(184, 236, 243, 0.5);
        --yellow2             : hsla(35, 77%, 58%, .8);
        --body-text-dark      : hsl(212, 10%, 32%);
        --body-text-darkb     : hsl(212, 12%, 72%);
        --body-text-light     : hsl(0, 0%, 33%);
        --blocks              : hsl(227, 22%, 92%);
        --modules             : #fff;
        --blocks-background2  : hsla(200, 7%, 45%, 0.7);
        --blocks-background   : #0F0F0F;
        --temp-5-10           : hsl(205, 69%, 63%);
        --temp-0-5            : hsla(185, 100%, 37%, 1);
        --temp0-5             : hsla(185, 100%, 37%, 1);
        --temp5-10            : hsl(74, 60%, 46%);
        --temp10-15           : hsl(35, 77%, 58%);
        --temp15-20           : hsl(34, 98%, 49%);
        --temp20-25           : hsl(19, 66%, 55%);
        --temp25-30           : hsl(12, 80%, 52%);
        --temp30-35           : hsl(2, 56%, 55%);
        --temp35-40           : hsl(4, 40%, 48%);
        --temp40-45           : hsl(332, 45%, 53%);
        --temp45-50           : hsl(323, 40%, 54%);
        --font-color          : hsl(0, 0%, 50%);
        --text-shadow         : none;
        --text-shadow2        : none;
        --bg-color            : hsla(198, 14%, 14%, 0.19);
        --grid-linescompass   : linear-gradient(hsla(270, 1%, 52%, 0.04) 1px, transparent 1px), linear-gradient(to right, hsla(270, 1%, 52%, 0.04) 1px, transparent 1px);
        --popupcontrast       : brightness(100%);
        --chartcontrast       : brightness(100%);
        --normalcontrast      : brightness(100%);
        --iconcontrast        : brightness(90%);
        --modulesborder       : var(--tablet);
        --modulesborderside   : var(--tablet);
        --modulesshadow       : none;
        --compassring         : rgba(234, 236, 240, .5);
        --compassringinner    : rgba(229, 233, 235, .1);
        --compassbezel        : #c3ced8;
        --circleborder4       : none;
        --tablet              : hsl(207, 17%, 90%);
        --navicons            : hsl(228, 17%, 94%);
        --charticons          : hsla(205, 11%, 62%, 0);
        --menubutton          : hsl(228, 17%, 94%);
        --pressurevalue       : #99b1c9;
        --windvalue           : #99b1c9;
        --circleborderouter   : hsl(240, 17%, 98%);
        --litybackground      : rgba(32, 35, 39, .5);
        --webcam              : hsl(207, 17%, 90%);
        --notificationmodule  : linear-gradient(360deg, hsl(204, 15%, 94%) 68%, #36393f 10%);
        --notificationpointer : #36393f;
        --charttitles         : rgb(138, 151, 153);
        --text-shadow4        : 1px 1px 1px hsl(0, 0%, 93%);
        --text-shadow5        : 0px 0px 1px rgb(69, 81, 83);
        --charttitlebackground: #3D464D;
        --navbottom           : #fff;
        --menubackground      : linear-gradient(90deg, #F4F4FB 96%, #6c787f 88%);
        --menulinks           : var(--tablet);
        --menulinkshover      : hsl(201, 79%, 47%);
        --alternative-blue    : #1994D7;
        --charticonborder     : hsla(210, 31%, 69%, .8)
    }
}

body {
    font-family                : headingtext, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    margin                     : 0 auto;
    color                      : var(--body-text-dark);
    background                 : var(--pagebackground);
    width                      : 985px;
    max-width                  : 985px;
    text-rendering             : optimizeLegibility;
    -webkit-font-smoothing     : antialiased;
    -moz-osx-font-smoothing    : grayscale;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility   : hidden;
    backface-visibility        : hidden;
    overflow-x                 : hidden;
    cursor                     : url(weather34redcursor.svg), n-resize;
    -webkit-box-sizing         : border-box;
    -moz-box-sizing            : border-box;
    box-sizing                 : border-box;
    font-size                  : .875rem;
    filter                     : var(--contrast);
    -webkit-filter             : var(--contrast)
}

.weather34switcher {
    position   : absolute;
    display    : flex;
    margin-top : 1px;
    margin-left: 65px;
    background : 0 0;
    height     : 40px
}

.weather34switch {
    position  : relative;
    display   : inline-block;
    width     : max-content;
    z-index   : 10;
    background: 0 0;
    height    : max-content
}

.weather34switch input {
    opacity: 0;
    width  : 0;
    height : 0
}

bottomtoolbarspace {
    margin-left: 130px
}

bottomtoolbarspace1 {
    margin-left: 65px
}

bottomtoolbarspacetablet {
    margin-left: 115px
}

bottomtoolbarspacecharts {
    margin-left: 60px
}

day {
    color: var(--daylight)
}

html {
    min-height: 100%;
    overflow-x: hidden
}

.weather34-tablet {
    padding   : 0;
    background: var(--dark)
}

container {
    margin       : 0 auto;
    width        : 100%;
    text-align   : center;
    align-items  : center;
    justify-items: center
}

.grid-container {
    display              : flex;
    flex-direction       : row;
    flex-wrap            : wrap;
    width                : 99%;
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 3fr));
    gap                  : 1px;
    grid-gap             : 1px;
    column-gap           : 1px
}

ul {
    display   : flex;
    display   : grid;
    list-style: none;
    margin    : 5px 5px;
    padding   : 0
}

li,
li2 {
    align-items          : center;
    display              : flex;
    justify-content      : center;
    min-width            : 315px;
    max-width            : 315px;
    padding              : 0;
    height               : 175px;
    -webkit-box-sizing   : border-box;
    box-sizing           : border-box;
    margin               : 3px;
    color                : var(--body-text-dark);
    background-color     : var(--modules);
    border-radius        : 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    -ms-border-radius    : 5px;
    -o-border-radius     : 5px;
    border               : 1px solid var(--modulesborderside);
    border-bottom        : 5px solid var(--modulesborder)
}

li2 {
    height       : 88px;
    margin-bottom: -25px
}

li3,
li4 {
    display: none
}

.clock {
    background    : 0;
    padding       : 0;
    padding-left  : 0;
    padding-right : 0;
    padding-top   : 15px;
    display       : flex;
    margin-left   : 0;
    text-align    : left;
    width         : 310px;
    position      : relative;
    color         : var(--body-text-dark);
    font-size     : 2rem;
    text-transform: uppercase;
    height        : 64px;
    line-height   : 2;
    margin-top    : 5px;
    font-family   : verb
}

.clock2 {
    background           : 0;
    padding              : 5px;
    padding-left         : 10px;
    display              : flex;
    font-family          : clock;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    left                 : 25px;
    text-align           : center;
    width                : auto;
    position             : relative;
    color                : var(--body-text-dark);
    font-size            : 3rem;
    text-transform       : uppercase;
    height               : 50px;
    line-height          : 1.2;
    top                  : 55px;
    border-radius        : 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius   : 10px;
    -ms-border-radius    : 10px;
    -o-border-radius     : 10px;
    -webkit-border-radius: 10px;
    font-family          : verb
}

.clock3 {
    position   : relative;
    font-family: verb;
    font-size  : .7rem;
    color      : var(--body-text-dark)
}

.clock3 time {
    position   : absolute;
    top        : -17px;
    margin-left: 20px
}

.thedate3 {
    display: none
}

.date,
.date2 {
    display    : block;
    background : 0;
    color      : var(--body-text-dark);
    font-size  : .65rem;
    font-family: clock;
    line-height: 1;
    margin-top : 35px;
    position   : absolute;
    margin-left: -5px
}

.date1,
.date2 {
    display       : block;
    background    : 0;
    color         : var(--body-text-dark);
    font-size     : 9px;
    font-family   : clock;
    line-height   : 1.1;
    margin-top    : -56px;
    position      : absolute;
    margin-left   : 110px;
    font-family   : verb;
    text-transform: none
}

.date2 {
    margin-top: -43px
}

.phase2 {
    display        : flex;
    background     : 0;
    color          : #c3ced8;
    font-size      : 7px;
    line-height    : 1.5;
    margin-top     : -45px;
    position       : absolute;
    font-family    : verb;
    max-width      : 25px;
    text-align     : center;
    word-wrap      : break-word;
    justify-content: center;
    align-items    : center;
    margin-left    : 40px
}

.sunblock,
.sunblock2 {
    padding       : 0;
    padding-left  : 0;
    padding-right : 0;
    padding-top   : 15px;
    display       : flex;
    margin-left   : 0;
    text-align    : left;
    width         : 310px;
    position      : relative;
    color         : var(--blue);
    font-size     : 2rem;
    text-transform: uppercase;
    height        : 64px;
    line-height   : 2;
    margin-top    : 5px;
    font-family   : headingtext
}

.sunblock2 {
    background : 0;
    left       : -20px;
    width      : 275px;
    line-height: 1;
    margin-top : 25px
}

.sunposition-block {
    display    : block;
    background : 0;
    color      : var(--body-text-silver);
    font-size  : .7rem;
    line-height: 1;
    margin-top : -40px;
    position   : absolute;
    margin-left: -5px;
    font-family: headingtext;
    text-align : left
}

.sunposition-block-sun {
    display    : block;
    background : 0;
    color      : var(--body-text-dark);
    font-size  : 9px;
    line-height: 1;
    margin-top : 0;
    position   : absolute;
    margin-left: -5px;
    font-family: weathertext2;
    text-align : left
}

.sunrise-block-sun,
.sunset-block-sun {
    display    : block;
    background : 0;
    color      : var(--body-text-dark);
    font-size  : 9px;
    line-height: 1;
    margin-top : -50px;
    position   : absolute;
    margin-left: -5px;
    font-family: weathertext2;
    text-align : left
}

.sunset-block-sun {
    margin-top: -25px
}

.sunset2 {
    display    : block;
    background : 0;
    color      : var(--body-text-dark);
    font-size  : .7rem;
    line-height: 1;
    margin-top : -30px;
    position   : absolute;
    margin-left: 0;
    font-family: headingtext;
    text-align : left
}

.thedate,
.thedate2,
.thedate4 {
    display        : flex;
    background     : 0;
    color          : var(--body-text-dark);
    font-size      : .75rem;
    line-height    : 1;
    margin-top     : -25px;
    position       : absolute;
    font-family    : headingtext;
    justify-content: center;
    align-items    : center;
    width          : 260px
}

.thedate2 {
    margin-top: 40px;
    position  : absolute
}

.thedate4 {
    margin-top: 40px
}

.sunrise2 {
    display    : block;
    background : 0;
    color      : var(--body-text-dark);
    font-size  : .7rem;
    line-height: 1;
    margin-top : -65px;
    position   : absolute;
    margin-left: 150px;
    font-family: headingtext;
    text-align : left
}

.sunrise2 {
    margin-top : -45px;
    margin-left: 0
}

.weather34-indoor {
    position   : relative;
    display    : inline-block;
    width      : 250px;
    clear      : both;
    top        : 3px;
    margin-left: 10px;
    padding-top: 0;
    font-size  : 13px;
    font-family: weathertext2;
    line-height: 2
}

valuetextheadingindoor {
    left      : -4px;
    font-size : 8.5px;
    width     : 15em;
    margin-top: -3px
}

icon-minus10 {
    color: var(--temp-5-10)
}

icon-minus5 {
    color: var(--temp-5-10)
}

icon-minus,
icon-zero {
    color: var(--temp-5-10)
}

icon-0-5 {
    color: var(--temp0-5)
}

icon-6-10 {
    color: var(--temp5-10)
}

icon-11-15 {
    color: var(--temp10-15)
}

icon-16-20 {
    color: var(--temp15-20)
}

icon-21-25 {
    color: var(--temp20-25)
}

icon-26-30 {
    color: var(--temp25-30)
}

icon-31-35 {
    color: var(--temp30-35)
}

icon-36-40 {
    color: var(--temp35-40)
}

icon-41-45,
icon-50 {
    color: var(--temp45-50)
}

steady {
    font-size  : 11px;
    text-shadow: none;
    color      : var(--body-text-dark)
}

smallrainunit {
    font-size: .7em
}

smallrainunit4 {
    position      : relative;
    font-size     : 7px;
    vertical-align: top;
    top           : 2px;
    font-family   : weathertext2
}

smalldegrees {
    position      : relative;
    font-size     : .7em;
    vertical-align: middle;
    font-family   : weathertext2;
    top           : -6px
}

smallhumidity {
    position      : relative;
    font-size     : .6em;
    vertical-align: middle;
    font-family   : verb;
    top           : -6px
}

smallrainunit34,
smalltempunit2,
smalltempunit4 {
    font-size: .45rem
}

smallrainunit34 {
    color: #fff
}

smalltempunituv {
    font-size: .4rem;
    color    : #bfbfbf
}

smalltempunit {
    position             : relative;
    font-size            : .65rem;
    color                : var(--body-text-dark);
    width                : 2.25rem;
    height               : 1rem;
    margin-left          : 100px;
    margin-top           : -5px;
    border-radius        : 3px;
    font-family          : weathertext2;
    background-color     : var(--button-bg-color);
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px
}

smallhumidityunit {
    position   : absolute;
    font-size  : .7rem;
    color      : var(--body-text-dark);
    margin-top : -1px;
    font-family: weathertext2;
    opacity    : .7
}

tempman {
    position   : absolute;
    width      : 4rem;
    height     : 4rem;
    margin-left: -70px;
    margin-top : -34px;
    z-index    : 100;
    font-size  : 10px;
    font-family: weathertext2
}

tempman-tablet,
windphrase-tablet {
    position   : relative;
    width      : max-content;
    margin-top : 85px;
    margin-left: 60px;
    font-size  : 22px;
    font-family: verb
}

rainman-tablet {
    display        : flex;
    justify-content: right;
    align-items    : right;
    float          : right;
    text-align     : right;
    margin         : 0 auto;
    margin-right   : 70px;
    font-size      : 22px;
    font-family    : verb
}

windphrase-tablet {
    margin-left: 50px;
    font-size  : 18px;
    margin-top : 90px
}

.bft-tablet {
    position   : absolute;
    width      : 30px;
    margin-left: 180px;
    margin-top : -40px
}

.bft-icon svg {
    position   : relative;
    width      : 36px;
    margin-left: 100px;
    top        : -31px
}

unitindicator,
windunitindicator {
    position             : absolute;
    width                : 2rem;
    height               : .7rem;
    margin-left          : 5px;
    margin-top           : -35px;
    line-height          : 1;
    z-index              : 100;
    font-size            : 8px;
    border-radius        : 3px;
    background-color     : var(--button-bg-color);
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    padding-top          : 2px;
    text-align           : center;
    font-family          : verb
}

uv0 {
    background-color: var(--green)
}

.thearrow3 {
    width                   : 10px;
    height                  : 50%;
    -webkit-transform-origin: 50% 100%;
    transform-origin        : 50% 100%
}

.thearrow3:after {
    -webkit-transform: translate(-50%, -50%);
    transform        : translate(-50%, -50%);
    -moz-transform   : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%)
}

.thearrow:before {
    z-index              : 9;
    position             : absolute;
    top                  : -3px;
    left                 : 2px;
    width                : 6px;
    height               : 6px;
    border               : 2px solid #bfbfbf;
    border-radius        : 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%
}

.text1,
.windvalue1 {
    position   : relative;
    color      : var(--windvalue);
    font-family: verb;
    font-size  : 1.2rem;
    top        : 0
}

.windvalue1 {
    margin-left: 15px
}

.windirection1 {
    width : 100%;
    margin: 110px 0 0 85px
}

.homeweathercompass1 {
    z-index    : 1;
    position   : absolute;
    width      : 180px;
    height     : 180px;
    margin-top : -85px;
    margin-left: -100px;
    text-align : center
}

.text1 {
    z-index    : 10;
    margin     : 69px 0 auto;
    text-align : center;
    margin-left: 3px
}

.compassposition {
    position   : absolute;
    margin-top : 5px;
    margin-left: -5px
}

.homeweathercompass1>.homeweathercompass-line1 {
    position             : absolute;
    bottom               : 25px;
    left                 : 30px;
    width                : 95px;
    height               : 95px;
    margin               : 0 auto;
    border               : 20px solid var(--compassringinner);
    border-radius        : 50%;
    -webkit-transform    : rotate(-45deg);
    transform            : rotate(-45deg);
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%;
    margin-top           : 40px
}

.weather34compassring {
    position     : absolute;
    width        : 105px;
    height       : 105px;
    margin       : 0 auto;
    border       : 20px solid var(--compassring);
    border-radius: 50%;
    margin-left  : -75px;
    margin-top   : -70px
}

.weather34compassgrid {
    position        : absolute;
    width           : 100px;
    height          : 100px;
    margin          : 0 auto;
    border-radius   : 50%;
    margin-left     : -54px;
    margin-top      : -46px;
    background-image: var(--grid-linescompass);
    background-size : 5px 5px
}

.weather34barometergridlines,
.weather34windgridlines {
    width                : 100px;
    height               : 100px;
    background-image     : var(--grid-lines);
    background-size      : 5px 5px;
    border-radius        : 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%;
    -webkit-transform    : rotate(-45deg);
    transform            : rotate(-45deg)
}

.weather34windgridlines {
    width   : 100px;
    height  : 100px;
    position: relative
}

.weather34barometergridlines {
    box-shadow: var(--button-shadow)
}

.homeweathercompass1>.windirectiontext1 {
    z-index    : 10;
    display    : block;
    margin     : 0 auto;
    margin-left: 15px;
    color      : var(--body-text-dark);
    text-align : center;
    font-family: verb;
    font-size  : 9px;
    line-height: 1
}

.windirectiontext2 {
    position    : relative;
    z-index     : 10;
    display     : block;
    margin      : 69px 0 auto;
    padding-top : 3px;
    padding-left: 3px;
    margin-left : 18px;
    text-align  : center;
    font-family : verb;
    font-size   : 32px;
    line-height : 1;
    color       : var(--orange)
}

.weather34-ne,
.weather34-nw,
.weather34-se,
.weather34-sw {
    position   : absolute;
    font-size  : 8px;
    margin-top : 24px;
    margin-left: 96px;
    font-family: verb;
    z-index    : inherit
}

.weather34-ne {
    margin-top       : 37px;
    margin-left      : 139px;
    transform        : rotate(47deg);
    -webkit-transform: rotate(47deg);
    -moz-transform   : rotate(47deg);
    -ms-transform    : rotate(47deg);
    -o-transform     : rotate(47deg)
}

.weather34-se {
    margin-top       : 126px;
    margin-left      : 141px;
    transform        : rotate(-51deg);
    -webkit-transform: rotate(-51deg);
    -moz-transform   : rotate(-51deg);
    -ms-transform    : rotate(-51deg);
    -o-transform     : rotate(-51deg)
}

.weather34-sw {
    margin-top       : 130px;
    margin-left      : 48px;
    transform        : rotate(43deg);
    -webkit-transform: rotate(43deg);
    -moz-transform   : rotate(43deg);
    -ms-transform    : rotate(43deg);
    -o-transform     : rotate(43deg)
}

.weather34-nw {
    margin-top       : 38.5px;
    margin-left      : 42px;
    transform        : rotate(-48deg);
    -webkit-transform: rotate(-48deg);
    -moz-transform   : rotate(-48deg);
    -ms-transform    : rotate(-48deg);
    -o-transform     : rotate(-48deg)
}

.weather34east,
.weather34north,
.weather34south,
.weather34west {
    position   : absolute;
    font-size  : 8px;
    margin-top : 83px;
    margin-left: 160px;
    z-index    : 10;
    font-family: verb
}

.weather34north {
    margin-top : 19px;
    margin-left: 95px
}

.weather34south {
    margin-top : 147px;
    margin-left: 95px
}

.weather34west {
    margin-top : 83px;
    margin-left: 29px
}

.weather34windbezel {
    width                : 95px;
    height               : 95px;
    background           : 0;
    border-radius        : 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%
}

.weather34windbezel1 {
    width                : 98px;
    height               : 98px;
    background           : 0;
    border-radius        : 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%;
    border               : 9px solid var(--compassbezel);
    position             : absolute;
    left                 : -10.5px;
    top                  : -10.5px
}

.thearrow2 {
    position                : relative;
    z-index                 : 300;
    top                     : 0;
    left                    : 50%;
    margin-left             : -4px;
    width                   : 10px;
    height                  : 50%;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin   : 50% 100%;
    -o-transform-origin     : 50% 100%;
    -ms-transform-origin    : 50% 100%;
    transform-origin        : 50% 100%;
    transform               : rotate(6deg);
    -webkit-transform       : rotate(6deg);
    -moz-transform          : rotate(6deg);
    -ms-transform           : rotate(6deg);
    -o-transform            : rotate(6deg)
}

.thearrow2:after {
    content          : "";
    position         : absolute;
    z-index          : 300;
    left             : 50%;
    top              : -5px;
    width            : 0;
    height           : 0;
    border-left      : 6px solid transparent;
    border-right     : 6px solid transparent;
    border-top       : 12px solid #ec5732;
    -webkit-transform: translate(-50%, -45%);
    -moz-transform   : translate(-50%, -45%);
    -o-transform     : translate(-50%, -45%);
    -ms-transform    : translate(-50%, -45%);
    transform        : translate(-50%, -45%)
}

.thearrow1,
.thearrow5,
.thearrow6 {
    position  : absolute;
    z-index   : 150;
    left      : 50%;
    top       : -12px;
    height    : 110.5px;
    width     : 110.5px;
    background: 0 0
}

.thearrow1:after {
    content          : "";
    position         : absolute;
    top              : 0;
    width            : 10px;
    height           : 3px;
    border-radius    : 10px;
    background       : var(--alternative-blue);
    -webkit-transform: translate(-50%, -45%);
    -moz-transform   : translate(-50%, -45%);
    -o-transform     : translate(-50%, -45%);
    -ms-transform    : translate(-50%, -45%);
    transform        : translate(-50%, -45%)
}

alternativeblue {
    color: var(--alternative-blue)
}

.thearrow5:after {
    content          : "";
    position         : absolute;
    top              : 0;
    width            : 10px;
    height           : 3px;
    border-radius    : 10px;
    background       : var(--temp15-20);
    -webkit-transform: translate(-50%, -45%);
    -moz-transform   : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    transform        : translate(-50%, -50%)
}

.thearrow6:after {
    content          : "";
    position         : absolute;
    top              : 0;
    width            : 10px;
    height           : 3px;
    border-radius    : 10px;
    background       : var(--green);
    -webkit-transform: translate(-50%, -45%);
    -moz-transform   : translate(-50%, -50%);
    -o-transform     : translate(-50%, -50%);
    -ms-transform    : translate(-50%, -50%);
    transform        : translate(-50%, -50%)
}

.windtabletdirectionc,
.windtabletdirectionday,
.windtabletdirectionten {
    color        : #fff;
    display      : inline;
    opacity      : .8;
    position     : absolute;
    margin-top   : 50pt;
    margin-left  : -140px;
    font-size    : 8px;
    font-family  : verb;
    background   : var(--orange);
    border-radius: 2px;
    padding      : 2px;
    line-height  : .9
}

.windtabletdirectionten {
    margin-left: -49px;
    background : var(--alternative-blue)
}

.windtabletdirectionday {
    margin-left: -100px;
    background : var(--temp15-20)
}

.windtabletdirectionday a {
    background : var(--temp15-20);
    font-size  : 8px;
    font-family: verb;
    color      : #fff;
    z-index    : 10
}

.maxtablet,
.mintablet {
    color        : #fff;
    display      : inline;
    opacity      : .8;
    position     : absolute;
    margin-top   : 4px;
    margin-left  : 230px;
    font-size    : 8px;
    font-family  : verb;
    background   : var(--temp15-20);
    border-radius: 2px;
    padding      : 2px;
    line-height  : .9
}

.mintablet {
    margin-left: 260px;
    background : var(--alternative-blue)
}

.trendtablet {
    position: relative
}

.windirectiontext1 span {
    color: var(--blue)
}

.text3 {
    font-family: weathertext3
}

.text2 {
    position   : absolute;
    top        : 40px;
    left       : 47px;
    font-size  : 1em;
    font-family: weathertext2
}

.text2b {
    padding-left: 2px;
    color       : var(--pressurevalue);
    font-family : verb;
    font-size   : 18px
}

thetrend {
    display    : block;
    margin-top : 5px;
    left       : 0;
    font-size  : .65em;
    color      : var(--light);
    font-family: weathertext2
}

.text2 span,
.text3 {
    color    : var(--body-text-dark);
    font-size: 10px
}

.thearrow4 {
    z-index                 : 200;
    position                : absolute;
    top                     : 0;
    left                    : 43%;
    width                   : 10px;
    height                  : 50%;
    margin-left             : -6px;
    -webkit-transform-origin: 50% 100%;
    transform-origin        : 50% 100%
}

.thearrow3:after,
.thearrow4:after {
    -webkit-transform: translate(-50%, -50%);
    transform        : translate(-50%, -50%)
}

.text3 {
    position   : relative;
    float      : left;
    margin-top : 45px;
    margin-left: 5px
}

.thearrow3:after {
    position         : absolute;
    top              : 0;
    left             : 50%;
    width            : 0;
    height           : 0;
    border-color     : var(--orange) transparent transparent;
    border-width     : 10px 5px 0;
    border-style     : solid;
    -webkit-transform: translate(-50%, -50%);
    transform        : translate(-50%, -50%)
}

.thearrow3:before {
    z-index      : 9;
    position     : absolute;
    top          : -5px;
    left         : 2px;
    width        : 6px;
    height       : 6px;
    border       : 2px solid #e1e0e0;
    border-radius: 50%
}

.thearrow4:after {
    -webkit-transform    : translate(-50%, -50%);
    transform            : translate(-50%, -50%);
    position             : absolute;
    border               : 3px solid var(--green);
    border-radius        : 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%
}

.max,
.raintext1,
.rainvalue,
html,
lo,
suprain2,
suptemp {
    -webkit-font-smoothing: antialiased
}

pressureunits {
    font-size: 8px
}

.thearrow3:after,
.thearrow3:before,
.thearrow4:after,
.weather34barometerarrowactual:after {
    content: ""
}

.weather34uvposition {
    position  : relative;
    margin-top: -5px
}

.desktoplink2,
.desktoplink4,
.desktoplink5 {
    color          : var(--body-text-dark);
    font-size      : 10px;
    font-family    : verb;
    text-decoration: none;
    margin-right   : 40px;
    float          : right;
    margin-top     : 0;
    word-wrap      : break-word;
    width          : auto
}

.desktoplink {
    color          : var(--body-text-dark);
    font-size      : 10px;
    font-family    : verb;
    text-decoration: none;
    margin-right   : 100px;
    float          : right;
    margin-top     : 17px
}

.desktoplink3 {
    color          : var(--body-text-dark);
    font-size      : 10px;
    font-family    : verb;
    text-decoration: none;
    margin-right   : 40px;
    float          : right;
    margin-top     : 0;
    word-wrap      : break-word;
    width          : auto
}

.desktoplink4 {
    color          : var(--body-text-dark);
    font-size      : 11px;
    font-family    : verb;
    text-decoration: none;
    margin-left    : 140px;
    float          : none;
    margin-top     : -15px;
    word-wrap      : break-word;
    width          : 300px;
    max-width      : 300px
}

.desktoplink5 {
    color          : var(--body-text-dark);
    font-size      : 11px;
    font-family    : verb;
    text-decoration: none;
    margin-left    : 110px;
    float          : none;
    margin-top     : -15px;
    word-wrap      : break-word;
    width          : 700px;
    max-width      : 700px
}

.sunriset-set {
    color          : var(--body-text-dark);
    font-size      : 10px;
    font-family    : verb;
    text-decoration: none;
    margin-left    : 125px;
    float          : none;
    margin-top     : -16px;
    word-wrap      : break-word;
    width          : 400px;
    max-width      : 400px
}



valuebeaufort {
    font-size  : .75em;
    margin-left: 2px
}

.online {
    position    : absolute;
    font-size   : .65em;
    color       : var(--blue);
    margin-top  : -25px;
    float       : right;
    padding-left: 10px;
    right       : 10px
}

.onlineupdated {
    position    : relative;
    font-size   : .65em;
    color       : var(--blue);
    margin-top  : -24px;
    float       : none;
    padding-left: 17px;
    margin-left : 92%
}

onlinetime {
    position   : relative;
    color      : var(--body-text-dark);
    font-family: verb;
    top        : -3px
}

.online2 {
    position: relative;
    top     : 0
}

blue1 {
    color      : var(--blue);
    font-size  : .85em;
    margin-left: 3px;
    filter     : brightness(90%)
}

.nav-top {
    margin                            : 0 auto;
    max-width                         : 1024px;
    background                        : var(--tablet);
    padding                           : 6px 0 0 0;
    height                            : 20px;
    line-height                       : 2;
    position                          : relative;
    bottom                            : 0;
    margin-top                        : 0;
    margin-bottom                     : 0;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius : 10px;
    -moz-border-radius-bottomright    : 10px;
    -moz-border-radius-bottomleft     : 10px;
    border-bottom-right-radius        : 10px;
    border-bottom-left-radius         : 10px
}

.navspace {
    position  : relative;
    display   : flex;
    margin-top: 32px
}

.nav,
.nav-bottom,
.nav-bottom-charts {
    margin        : 0 auto;
    max-width     : 1024px;
    padding       : 2px;
    position      : relative;
    height        : 45px;
    padding-top   : 10px;
    padding-bottom: 0;
    background    : var(--tablet);
    position      : relative;
    border-radius : 10px
}

.nav-bottom .weather34-battery {
    position: absolute;
    display : inline;
    top     : 4px;
    right   : 10px;
    width   : 30px
}

.nav-bottom .weather34-aurora {
    position: absolute;
    display : inline;
    top     : 12px;
    right   : 25px
}

.nav-bottom icon-forecast {
    position: relative;
    top     : -1px
}

.nav-bottom a {
    border-radius        : 3px;
    background-color     : var(--navicons);
    font-size            : 11px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    padding-top          : 17px;
    padding-left         : 3px;
    padding-right        : 3px;
    justify-content      : center;
    align-items          : center;
    top                  : 4px
}

.nav-bottom .ico {
    background: 0;
    box-shadow: none
}

iconcolor,
iconcolor2 {
    position      : absolute;
    color         : #989a9a;
    vertical-align: middle;
    margin-top    : 5px
}

iconcolor2 {
    color: var(--blue)
}


weather34-rightfootericons {
    margin-left: 25%
}

realfeel {
    position        : absolute;
    top             : 25px;
    left            : 10px;
    font-size       : 7.5pt;
    font-family     : weathertext2;
    width           : 7rem;
    line-height     : 1.2;
    text-align      : center;
    color           : grey;
    border-radius   : 3px;
    color           : var(--body-text-dark);
    background-color: var(--realfeel)
}

.chartb {
    height               : 150px;
    margin-top           : 10px;
    -webkit-border-radius: 10px;
    border-radius        : 10px;
    border               : 6px solid var(--tablet);
    background-color     : #111;
    filter               : var(--chartcontrast);
    text-shadow          : none;
    -webkit-filter       : var(--chartcontrast)
}

uvopacity {
    opacity: 1;
    color  : #fff
}

smalltrainunit2 {
    font-size  : .45rem;
    color      : var(--body-text-dark);
    text-shadow: none
}

smalltrainunit3 {
    font-size  : 7px;
    color      : var(--body-text-dark);
    text-shadow: none
}

smalltrainunittablet {
    font-size: 16px;
    color    : var(--body-text-dark)
}

smalltrainunittablet2 {
    font-size: 12px;
    color    : var(--body-text-dark)
}

smalltrainunittablet3 {
    font-size   : 10px;
    line-height : 1.2;
    padding-left: 3px;
    color       : var(--body-text-dark)
}

smallunittablet {
    font-size     : 36px;
    color         : var(--body-text-dark);
    font-family   : weathertext2;
    vertical-align: text-top
}

smallunittablet2 {
    font-size     : 26px;
    color         : var(--body-text-dark);
    font-family   : weathertext2;
    vertical-align: top;
    line-height   : 3
}

smallunittablet3 {
    font-size     : 13px;
    color         : var(--body-text-dark);
    font-family   : verb;
    vertical-align: text-top
}

smallunittablet4 {
    position   : relative;
    font-size  : 13px;
    color      : var(--body-text-dark);
    font-family: verb;
    top        : -20px
}

smallunittablet5 {
    position   : relative;
    font-size  : 26px;
    color      : var(--body-text-dark);
    font-family: verb;
    top        : -15px
}

smallunittablet6 {
    position   : relative;
    font-size  : 7px;
    color      : var(--body-text-dark);
    font-family: verb;
    top        : -10px
}

smallunittablet7 {
    position   : relative;
    font-size  : 16px;
    color      : var(--body-text-dark);
    font-family: verb;
    top        : -2px;
    opacity    : .7
}

smallunittablet8 {
    position      : relative;
    font-size     : 8px;
    color         : var(--body-text-dark);
    font-family   : verb;
    top           : -5px;
    text-transform: uppercase
}

smallunittablet9 {
    position   : relative;
    font-size  : 7px;
    color      : var(--body-text-dark);
    font-family: verb;
    top        : -10px
}

smallunittablet10 {
    position   : relative;
    font-size  : 7px;
    color      : var(--body-text-dark);
    font-family: verb;
    top        : -7px
}

tablettrend {
    position       : relative;
    margin         : 0 auto;
    text-align     : center;
    justify-content: center;
    margin-left    : 15px
}

uvtablet {
    font-size  : 36px;
    color      : var(--body-text-dark);
    margin-left: 30px
}

smallrainunit2b {
    font-family: weathertext2;
    top        : 20px;
    font-size  : .25rem;
    color      : var(--body-text-dark)
}

smallrainunit2aq {
    font-family: weathertext2;
    top        : 20px;
    font-size  : .55rem;
    color      : var(--body-text-dark);
    width      : max-content
}

smalllightningunit {
    position   : absolute;
    font-family: verb;
    top        : 7px;
    font-size  : .5rem;
    width      : max-content;
    color      : var(--body-text-dark)
}

.winddirectionlegend {
    font-family: verb;
    position   : absolute;
    font-size  : .6em;
    display    : block;
    margin-top : 115px;
    margin-left: 77px
}

uvunits {
    opacity    : 1;
    color      : #fff;
    font-size  : 7px;
    margin-left: -2px
}

.lity {
    z-index                : 9990;
    position               : fixed;
    top                    : 0;
    right                  : 0;
    bottom                 : 0;
    left                   : 0;
    white-space            : nowrap;
    background             : var(--litybackground);
    outline                : 0 !important;
    opacity                : 0;
    -webkit-transition     : opacity .3s ease;
    -o-transition          : opacity .3s ease;
    transition             : opacity .3s ease;
    -moz-transition        : opacity .3s ease;
    -ms-transition         : opacity .3s ease;
    margin                 : 0 auto;
    justify-content        : center;
    text-align             : center;
    backdrop-filter        : saturate(150%);
    -webkit-backdrop-filter: saturate(150%)
}

.lity.lity-opened {
    opacity: 1
}

.lity.lity-closed {
    opacity: 0
}

.lity * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    box-sizing        : border-box
}

.lity-wrap {
    z-index   : 9990;
    position  : fixed;
    top       : 0;
    right     : 0;
    bottom    : 0;
    left      : 0;
    text-align: center;
    outline   : 0 !important
}

.lity-wrap:before {
    content       : '';
    display       : inline-block;
    height        : 100%;
    vertical-align: middle;
    margin-right  : -.25em
}

.lity-wrap:after {
    content              : "CSS/SVG/PHP by weather34.com";
    font-size            : 10px;
    font-family          : verb;
    color                : #fff;
    position             : fixed;
    bottom               : 10;
    right                : 20;
    background           : var(--alternative-blue);
    padding              : 3px;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px
}

.lity-loader {
    z-index           : 9991;
    color             : #fff;
    position          : absolute;
    top               : 50%;
    margin-top        : -.8em;
    width             : 100%;
    text-align        : center;
    font-size         : 14px;
    font-family       : Arial, Helvetica, sans-serif;
    opacity           : 0;
    -webkit-transition: opacity .3s ease;
    -o-transition     : opacity .3s ease;
    transition        : opacity .3s ease
}

.lity-loading .lity-loader {
    opacity: 1
}

.lity-container {
    z-index       : 9992;
    position      : relative;
    text-align    : left;
    vertical-align: middle;
    display       : inline-block;
    white-space   : normal;
    max-width     : 100%;
    max-height    : 100%;
    outline       : 0 !important
}

.lity-content {
    z-index           : 9993;
    width             : 100%;
    -webkit-transform : scale(1);
    -ms-transform     : scale(1);
    -o-transform      : scale(1);
    transform         : scale(1);
    -webkit-transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;
    transition        : -webkit-transform .3s ease;
    -o-transition     : transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;
    transition        : transform .3s ease;
    transition        : transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;
    -moz-transition   : transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;
    -ms-transition    : transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;
    margin            : auto 0;
    justify-content   : center;
    text-align        : center
}

.lity-closed .lity-content,
.lity-loading .lity-content {
    -webkit-transform: scale(.8);
    -ms-transform    : scale(.8);
    -o-transform     : scale(.8);
    transform        : scale(.8)
}

.lity-content:after {
    content : '';
    position: absolute;
    left    : 0;
    top     : 0;
    bottom  : 0;
    display : block;
    right   : 0;
    width   : auto;
    height  : auto;
    z-index : -1
}

.lity-close {
    z-index              : 9994;
    width                : 35px;
    height               : 35px;
    position             : fixed;
    right                : .3em;
    top                  : .3em;
    
    cursor               : pointer;
    text-decoration      : none;
    text-align           : center;
    padding              : 0;
    color                : #fff;
    font-style           : normal;
    font-size            : 35px;
    font-family          : Arial, Helvetica, sans-serif;
    line-height          : 35px;
    border               : 0;
    background           : 0 0;
    outline              : 0;
    -webkit-box-shadow   : none;
    box-shadow           : none;
    background           : var(--alternative-blue);
    border-radius        : 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius   : 4px;
    -ms-border-radius    : 4px;
    -o-border-radius     : 4px
}

.lity-close::-moz-focus-inner {
    border : 0;
    padding: 0
}

.lity-close:active,
.lity-close:focus,
.lity-close:hover,
.lity-close:visited {
    text-decoration   : none;
    text-align        : center;
    padding           : 0;
    color             : #fff;
    font-style        : normal;
    font-size         : 35px;
    font-family       : Arial, Helvetica, sans-serif;
    line-height       : 35px;
    border            : 0;
    background        : 0 0;
    outline           : 0;
    -webkit-box-shadow: none;
    box-shadow        : none;
    background        : #fb631d
}

.lity-close:active {
    top: 1px
}

.lity-image img {
    max-width  : 100%;
    display    : block;
    line-height: 0;
    border     : 0
}

.lity-facebookvideo .lity-container,
.lity-googlemaps .lity-container,
.lity-iframe .lity-container,
.lity-vimeo .lity-container,
.lity-youtube .lity-container {
    width          : 100%;
    max-width      : 964px;
    margin         : auto 0;
    justify-content: center;
    text-align     : center
}

.lity-iframe-container {
    display          : -webkit-box;
    display          : flex;
    width            : 98%;
    max-width        : 860px;
    height           : 600px;
    padding-top      : 56.25%;
    overflow         : auto;
    -webkit-transform: translateZ(0);
    transform        : translateZ(0);
    pointer-events   : auto;
    margin-left      : 15px
}

.lity-iframe-container iframe {
    display              : -webkit-box;
    display              : flex;
    position             : absolute;
    top                  : 0;
    left                 : 0;
    width                : 100%;
    height               : 500px;
    max-height           : 600px;
    margin               : 0 auto;
    background           : var(--dark-popup);
    text-align           : center;
    -webkit-box-align    : center;
    -ms-flex-align       : center;
    align-items          : center;
    -webkit-box-pack     : center;
    -ms-flex-pack        : center;
    justify-content      : center;
    border-radius        : 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    -ms-border-radius    : 5px;
    -o-border-radius     : 5px;
    border               : 10px solid #aec0d1
}

.lity-hide {
    display: none
}

::-webkit-scrollbar {
    display: none
}

::-webkit-scrollbar-track {
    background: var(--border-dark)
}

::-webkit-scrollbar-thumb {
    background-color: var(--blue)
}

.weather34alert {
    position   : fixed;
    z-index    : 20;
    text-shadow: none;
    font-family: verb
}

.weather34alert.weather34alert-hide {
    opacity  : 0;
    height   : 0;
    font-size: 0;
    z-index  : -1
}

.weather34-notification {
    position      : fixed;
    height        : 80px;
    width         : 170px;
    padding       : 10px;
    border-radius : 16px;
    color         : #fff;
    z-index       : -1;
    top           : 15px;
    right         : 55px;
    font-family   : verb;
    background    : var(--notificationmodule);
    filter        : var(--normalcontrast);
    -webkit-filter: var(--normalcontrast)
}

.weather34-notification:before {
    top                : -28px;
    left               : 80%;
    border             : solid transparent;
    content            : " ";
    height             : 0;
    width              : 0;
    position           : absolute;
    pointer-events     : none;
    border-color       : rgba(0, 151, 167, 0);
    border-bottom-color: var(--notificationpointer);
    border-width       : 14px;
    margin-left        : -14px;
    color              : var(--body-text-dark)
}

.weather34-notification weather34-alertheader {
    display         : -webkit-box;
    display         : flex;
    -webkit-box-pack: justify;
    justify-content : space-between;
    font-size       : 12px;
    color           : var(--body-text-dark)
}

.weather34-notification h2 {
    font-family: weathertext2;
    font-weight: 400;
    margin-left: 0;
    margin-top : -3px;
    font-size  : 15px;
    color      : #fff
}

.weather34-notification weather34-alertheader .weather34-timestamp {
    text-transform: lowercase;
    margin-top    : -5px;
    color         : #98b1c9
}

.weather34-notification weather34-alertmessage {
    overflow     : hidden;
    text-overflow: ellipsis;
    font-size    : 12px;
    margin       : 0 auto;
    margin-top   : 5px;
    font-family  : verb;
    color        : var(--body-text-dark)
}

.weather34-notification weather34-alertvalue {
    overflow     : hidden;
    text-overflow: ellipsis;
    font-size    : 22px;
    line-height  : 1.4;
    font-family  : verb;
    color        : var(--body-text-dark)
}

.weather34-notification weather34-alertunit {
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    font-size     : 10px;
    vertical-align: text-top;
    color         : var(--body-text-dark)
}

.weather34-notification weather34-timeago {
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
    font-size    : 11px;
    font-family  : verb;
    color        : var(--body-text-dark)
}

li6 {
    display: none
}

.showicon2 {
    display: none
}




.weather34-top-menu svg {
    max-height: 24px;
    margin-top: -5px
}

.weather34-top-menu img {
    height    : 20px;
    margin-top: -5px
}

.weather34-top-menu a:hover {
    background: var(--menulinkshover);
    color     : #fff
}

aurora {
    position   : absolute;
    width      : max-content;
    font-size  : .7em;
    font-family: verb;
    margin-left: -30px;
    opacity    : .8;
    margin-top : 10px;
    text-shadow: none;
    color      : #98b1c9
}

monthchart {
    position        : absolute;
    display         : flex;
    font-size       : 11px;
    top             : 5px;
    margin-left     : 35px;
    width           : 182px;
    max-width       : 300px;
    color           : var(--body-text-dark);
    background-color: hsla(204, 31%, 21%, .429);
    padding         : 3px;
    border-radius   : 5px;
    line-height     : 1
}

weather34credit a {
    font-size  : 8px;
    margin-left: 5%;
    font-family: verb;
    color      : #c3ced8
}

.showicon3 {
    margin-left  : 335px;
    padding-right: 10px
}

.lity-wrap {
    margin-left: 5%
}

menuunitslabel {
    font-size  : 10px;
    margin-left: 10px;
    font-family: verb
}



/*2024 weather34 menu  Revised November 2025 */


.weather34_sidemenu {
    height:100%;
    width: 0;
    position: fixed;
    top: 0px;
    left: -5px;
    background:var(--menubackground);
    overflow-x: hidden;
    transition: 0.1s;
    padding-top:5px;
    padding-left:5px;
    z-index:1001;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -webkit-transition: 0.1s;
    -moz-transition: 0.1s;
    -ms-transition: 0.1s;
    -o-transition: 0.1s;
}

.weather34_sidemenu a {
   position:relative;
    padding: 5px;
    text-decoration: none;
    font-size: 12px;
    background: var(--navicons);
    color: var(--body-text-darkb);
    display: block;
    transition: 0.3s;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    max-width:180px;
    height:20px;
    margin-bottom:-25px;
    margin-left:5px;
  
}

.weather34_sidemenu .hidden {
   display: none;
}

.weather34_sidemenu .closebtn { z-index:1001;
    position: absolute;
    top: 5px;
    right: 20px;
    background: var(--compassbezel);
    border-radius:50%;
    box-shadow:none;
    color: white;
    font: 13px verb;
    height: 18px;
    min-width: 14px;
    padding: 4px 3px 0 3px;
    text-align: center;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -ms-border-radius:50%;
    -o-border-radius:50%;
    cursor: pointer;
   
}

.openbtn {
    font-size: 20px;
    cursor: pointer;

    padding: 10px 15px;
    border: none;
}

.openbtn:hover {
    background-color: #444;
}

#weather34menuopened{
    transition: margin-left .5s;
    padding:5px;


}




.weather34_sidemenu_menulayout  a {
 top:10px;
    font-family: verb;
    display    : inline-flex;
    font-size  : 12px;
    margin-bottom:-10px;
    padding:5px; 
    color: var(--body-text-darkb);
    margin:5px;
}




.link {
   position   : absolute;
   margin-left: 5px;
   background : 0 0;
   font-family:verb;
   font-size:12px;
   display:inline;
   color: var(--body-text-darkb);
   background: none;
   width:220px;
}  
.menuguides,.menuguides a{
   position: absolute;
   margin-left: 15px;
   font-family:verb;
   font-size:12px;
   display:inline;
   color: var(--body-text-darkb);
   background: var(--navicons);
   border-radius:   5px;
   -webkit-border-radius:   5px;
   -moz-border-radius:   5px;
   -ms-border-radius:   5px;
   -o-border-radius:   5px;
   padding:5px;
}
.weather34-open-menu {
    display: inline;
    margin-right:25px;
    position             : relative;
    border-radius        : 3px;
    background-color     : var(--navicons);
    font-size            : 12px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    padding              : 1px;
    padding-left         : 3px;
    padding-right        : 3px;
    justify-content      : center;
    align-items          : center;
    margin-top           : 4pt;
    cursor               : pointer;
    margin-left          : 5px;
    line-height          : 1;
    font-family :verb;
    
}

.weather34-open-menu :hover {
    box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 6px 5px -5px var(--moduleoutlinehover), 0 7px 5px -5px var(--moduleoutlinehover), 0 0 5px -5px var(--moduleoutlinehover), 0 0 0 0 #000, 0 0 0 0 #000
}



icontext {
   position   : relative;
   top        : -8px;
   font-family: verb;
   font-size  : 0.8em;
   right      : 1px;
   color      : #c8d4df
}

.solaruvphrase{font-size:8px;
position:absolute;
color: var(--body-text-dark);
margin-top:130px;
margin-left:-170px
}


.windspeedchartphrase{font-size:8px;
   position:absolute;
   color: var(--body-text-dark);
   margin-top:130px;
   margin-left:-170px
   }

.menu2024links{

font-size:13px;
font-family:verb;

}


@media screen and (max-width:960px) {
    .navspace {
        margin-top: 0
    }

    .weather34switcher {
        margin-left: 65px
    }

    weather34credit a {
        font-size  : 7px;
        margin-left: 7%
    }

    bottomtoolbarspace {
        margin-left: 125px
    }

    bottomtoolbarspacetablet {
        margin-left: 120px
    }

    bottomtoolbarspacecharts {
        margin-left: 60px
    }

    .showicon,
    .sunriset-set,
    .version,
    aurora,
    chartpage {
        display: none
    }

    .lity-close {
        right: .5em;
        top  : .5em
    }

    .showicon3 {
        position   : absolute;
        margin-left: 60px
    }

    weather34-rightfootericons {
        margin-left: 70px
    }

    .grid-container {
        display              : flex;
        flex-direction       : row;
        flex-wrap            : wrap;
        width                : 98%;
        display              : grid;
        grid-template-columns: repeat(auto-fit, minmax(310px, 2fr));
        overflow             : hidden
    }

    li3 {
        align-items          : center;
        display              : flex;
        justify-content      : center;
        min-width            : 310px;
        max-width            : 310px;
        padding              : 0;
        height               : 175px;
        -webkit-box-sizing   : border-box;
        box-sizing           : border-box;
        margin               : 3px;
        margin-bottom        : 5px;
        color                : var(--body-text-dark);
        background-color     : var(--modules);
        border-radius        : 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius   : 5px;
        -ms-border-radius    : 5px;
        -o-border-radius     : 5px;
        border               : 1px solid var(--modulesborderside);
        border-bottom        : 5px solid var(--modulesborder)
    }

    li2,
    li4 {
        display: none
    }

    body {
        width: 650px
    }

    li {
        align-items    : center;
        display        : flex;
        justify-content: center;
        min-width      : 310px;
        max-width      : 310px;
        margin-bottom  : 0
    }

    .nav {
        margin     : 0 auto;
        width      : 600px;
        padding    : 6px;
        height     : 20px;
        bottom     : 0;
        margin-left: 20px;
        z-index    : 99999
    }

    .nav,
    .nav-bottom {
        position : relative;
        max-width: 1024px
    }

    .weather34-tablet {
        padding: 0
    }

    .clock {
        position  : absolute;
        margin-top: -200px
    }
}

.extrainfotablet,
.extrainfotablet2 {
    display        : flex;
    position       : relative;
    margin-top     : -40px;
    justify-content: left;
    align-items    : left;
    margin-left    : 0;
    margin-bottom  : -10px;
    opacity        : .8
}

.extrainfotablet2 {
    margin-top : -80px;
    margin-left: -150px;
    z-index    : 999
}

@media screen and (max-width:760px) {
    .lity-wrap {
        margin-left: -15px
    }
}

@media screen and (max-width:640px) {
    html {
        overflow-x: visible
    }

    
    .weather34switcher {
        top        : -2px;
        margin-left: 50px
    }

    bottomtoolbarspace {
        margin-left: 75px
    }

    bottomtoolbarspacecharts,
    bottomtoolbarspacetablet {
        margin-left: 65px
    }

    bottomtoolbarspace1 {
        margin-left: 5px
    }

    
    .desktoplink4,
    .footericons,
    .sunriset-set,
    icontext,
    monthchart,
    weather34-rightfootericons {
        display: none
    }

    .desktoplink5 {
        margin-top: -12px
    }

    .showicon2 {
        display    : inline;
        margin-left: 15px
    }

    .onlineupdated {
        position    : relative;
        font-size   : .65em;
        color       : var(--blue);
        margin-top  : -24px;
        float       : none;
        padding-left: 17px;
        margin-left : 92%
    }

    li3,
    li4 {
        align-items          : center;
        display              : flex;
        justify-content      : center;
        min-width            : 305px;
        max-width            : 305px;
        padding              : 0;
        height               : 175px;
        -webkit-box-sizing   : border-box;
        box-sizing           : border-box;
        background-color     : var(--light);
        margin               : 3px;
        color                : var(--body-text-dark);
        background-color     : var(--modules);
        border-radius        : 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius   : 5px;
        -ms-border-radius    : 5px;
        -o-border-radius     : 5px;
        border               : 1px solid var(--modulesborderside);
        border-bottom        : 5px solid var(--modulesborder)
    }

    .weather34-tablet {
        border: 0
    }

    .consolesetup {
        font-size      : 10px;
        font-family    : headingtext;
        text-decoration: none;
        margin-left    : 10px;
        color          : var(--white)
    }

    body {
        width: 315px
    }

    li {
        align-items    : center;
        display        : flex;
        justify-content: center;
        min-width      : 305px;
        max-width      : 305px
    }

    li3 {
        align-items    : center;
        display        : flex;
        justify-content: center
    }

    li2 {
        display: none
    }

    .nav,
    .nav-bottom {
        margin        : 0 auto;
        max-width     : 1024px;
        padding       : 2px;
        position      : relative;
        padding-bottom: 0;
        background    : var(--tablet);
        position      : relative;
        bottom        : 0;
        height        : 40px;
        border-radius : 10px;
        z-index       : 100
    }

    .nav-bottom a {
        padding-top  : 17px;
        padding-left : 1px;
        padding-right: 1px;
        top          : -3px;
        color        : var(--body-text-dark)
    }

    .nav-bottom .ico {
        background: 0;
        box-shadow: none
    }

    .nav-top {
        top          : 0;
        padding-top  : 10px;
        width        : 320px;
        height       : 20px;
        border-radius: 10px
    }

    .desktoplink2 {
        margin-right: 45px;
        float       : right;
        margin-top  : -10px
    }

    .grid-container {
        display              : flex;
        flex-direction       : row;
        flex-wrap            : wrap;
        width                : 99%;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows   : repeat(1, 1fr);
        grid-column-gap      : 3px;
        grid-row-gap         : 3px
    }
}

blue,
oblue,
raiblue {
    color: var(--blue)
}

deepblue {
    color: var(--deepblue)
}

green {
    color: var(--green)
}

yellow {
    color: var(--yellow)
}

oorange,
orange {
    color: var(--orange)
}

red {
    color: var(--red)
}

darkred {
    color: var(--deepred)
}

purple {
    color: var(--purple)
}

grey {
    color: var(--dark-toggle)
}

greyb {
    color         : var(--dark-toggle);
    font-family   : weathertext2;
    filter        : brightness(120%);
    -webkit-filter: brightness(120%)
}

wuiunit {
    color      : var(--body-text-dark);
    line-height: .8;
    font-size  : .7em
}

button {
    border: 0
}

button:focus {
    border       : none;
    outline      : 0 !important;
    outline-style: none
}

.button {
    color   : grey;
    position: relative
}

.button-dial,
.button-dialrain {
    display        : flex;
    height         : 120px;
    margin         : 0;
    left           : -80px;
    align-items    : center;
    justify-content: center;
    width          : 120px;
    font-family    : verb;
    margin-top     : -10px;
    color          : grey
}

.button-dialrain {
    border    : 0;
    box-shadow: none
}

.button-dial-top,
.button-dial-toprain {
    box-shadow           : var(--button-shadow);
    width                : 120px;
    height               : 85px;
    margin               : 0 auto;
    position             : absolute;
    top                  : 12%;
    left                 : 0;
    text-align           : center;
    z-index              : 5;
    border               : 5px solid var(--gaugeborders);
    border-radius        : 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius   : 5px;
    -ms-border-radius    : 5px;
    -o-border-radius     : 5px;
    background-image     : var(--grid-linescompass);
    background-size      : 5px 5px
}

.button-dial-label {
    font-size: 22px;
    position : relative;
    z-index  : 10;
    left     : 5px;
    top      : 4px;
    color    : var(--body-text-dark)
}

.button-dial-label-tablet {
    z-index        : 10;
    top            : 4px;
    color          : var(--body-text-dark);
    font-size      : 66px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    align-content  : center;
    font-family    : verb
}

.sunrise-sun,
.sunset-sun {
    display       : block;
    background    : 0;
    color         : var(--body-text-dark);
    font-size     : 9px;
    line-height   : 1.3;
    margin-top    : 5px;
    position      : absolute;
    margin-left   : 90px;
    text-align    : left;
    font-family   : weathertext2;
    text-transform: none
}

.sunset-sun {
    margin-top: 30px
}

humidtytablet {
    font-size     : .5em;
    vertical-align: text-top
}

.daylighthours,
.indoordesc,
.indoordesc2,
.indoordesc3 {
    display              : flex;
    color                : var(--body-text-dark);
    background-color     : var(--modulecaptions);
    line-height          : 1;
    top                  : 0;
    position             : absolute;
    margin-left          : 200px;
    text-align           : left;
    font-family          : verb;
    width                : 80px;
    font-size            : 8.5px;
    padding              : 2px 3px 1px 3px;
    line-height          : 1.2;
    align-items          : center;
    justify-content      : center;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    text-transform       : none;
    text-shadow          : none
}

.daylighthours {
    margin-left: 210px;
    width      : max-content
}

laststrike {
    display       : flex;
    background    : 0;
    color         : var(--body-text-dark);
    font-size     : 9px;
    line-height   : 1;
    top           : 25px;
    position      : absolute;
    left          : 85px;
    font-family   : verb;
    text-align    : left;
    width         : 60px;
    word-wrap     : break-word;
    text-transform: uppercase
}

strikeicon,
strikeicon2 {
    position : absolute;
    left     : 29px;
    top      : 49px;
    z-index  : 100;
    font-size: 8px;
    color    : var(--body-text-dark)
}

strikeicon2 {
    left: 36px;
    top : 52px
}

heatindexmax {
    display       : flex;
    background    : 0;
    color         : var(--body-text-dark);
    font-size     : 8.5px;
    line-height   : 1;
    top           : 54px;
    position      : absolute;
    font-family   : weathertext2;
    text-align    : center;
    text-transform: none
}

.flex-button-container {
    display        : flex;
    justify-content: space-between
}

.clock4 {
    display    : flex;
    position   : absolute;
    font-family: clock;
    font-size  : 3rem;
    color      : hsla(214, 29%, 91%, .6);
    margin-top : 15px;
    margin-left: 40px;
    max-width  : 300px
}

.thedate4 {
    position   : absolute;
    display    : block;
    background : 0;
    color      : hsla(214, 29%, 91%, .6);
    font-size  : .75rem;
    font-family: clock;
    line-height: 1;
    margin-top : -15px;
    margin-left: 0
}

smallminutes {
    font-size  : 7px;
    color      : var(--body-text-dark);
    font-family: weathertext2
}

smallminutes1 {
    font-size  : 7px;
    color      : var(--body-text-dark);
    font-family: weathertext2
}

[data-title]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-title]:after {
    content              : attr(data-title);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 3px;
    bottom               : 3em;
    left                 : 0;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-title] {
    position: relative;
    left    : -5px
}

[data-max]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-max]:after {
    content              : attr(data-max);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-max] {
    position: relative;
    left    : -5px
}

[data-pressurerising]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-pressurerising]:after {
    content              : attr(data-pressurerising);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -70pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-pressurerising] {
    position: relative;
    left    : -5px
}

[data-pressurefalling]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-pressurefalling]:after {
    content              : attr(data-pressurefalling);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -70pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-pressurefalling] {
    position: relative;
    left    : -5px
}

[data-maxhumidity]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-maxhumidity]:after {
    content              : attr(data-maxhumidity);
    background-color     : var(--temp25-30);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -20pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-maxhumidity] {
    position: relative;
    left    : -5px
}

[data-maxpressure]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-maxpressure]:after {
    content              : attr(data-maxpressure);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : 5pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-maxpressure] {
    position: relative;
    left    : -5px
}

[data-maxuv]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-maxuv]:after {
    content              : attr(data-maxuv);
    background-color     : var(--temp25-30);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -25pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-maxuv] {
    position: relative;
    left    : -5px
}

[data-maxsolar1]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-maxsolar1]:after {
    content              : attr(data-maxsolar1);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : 0;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-maxsolar1] {
    position: relative;
    left    : -5px
}

[data-avg]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-avg]:after {
    content              : attr(data-avg);
    background-color     : var(--temp15-20);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : 0;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(95%);
    -webkit-filter       : brightness(95%);
    font-family          : verb
}

[data-avg] {
    position: relative;
    left    : -5px
}

[data-temprising]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temprising]:after {
    content              : attr(data-temprising);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -85px;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(95%);
    -webkit-filter       : brightness(95%);
    font-family          : verb
}

[data-temprising] {
    position: relative;
    left    : -5px
}

[data-tempfalling]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-tempfalling]:after {
    content              : attr(data-tempfalling);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -85px;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(95%);
    -webkit-filter       : brightness(95%);
    font-family          : verb
}

[data-tempfalling] {
    position: relative;
    left    : -5px
}

[data-tempsteady]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-tempsteady]:after {
    content              : attr(data-tempsteady);
    background-color     : var(--temp5-10);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -70px;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(95%);
    -webkit-filter       : brightness(95%);
    font-family          : verb
}

[data-tempsteady] {
    position: relative;
    left    : -5px
}

[data-windincreasing]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-windincreasing]:after {
    content              : attr(data-windincreasing);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -70px;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(95%);
    -webkit-filter       : brightness(95%);
    font-family          : verb
}

[data-windincreasing] {
    position: relative;
    left    : -5px
}

[data-winddecreasing]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-winddecreasing]:after {
    content              : attr(data-winddecreasing);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -70px;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(95%);
    -webkit-filter       : brightness(95%);
    font-family          : verb
}

[data-winddecreasing] {
    position: relative;
    left    : -5px
}

[data-pressuresteady]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-pressuresteady]:after {
    content              : attr(data-pressuresteady);
    background-color     : var(--temp5-10);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : 0;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(95%);
    -webkit-filter       : brightness(95%);
    font-family          : verb
}

[data-pressuresteady] {
    position: relative;
    left    : -5px
}

[data-avg10]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-avg10]:after {
    content              : attr(data-avg10);
    background-color     : var(--temp15-20);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 3px;
    bottom               : 1.2em;
    left                 : -35px;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(95%);
    -webkit-filter       : brightness(95%);
    font-family          : verb
}

[data-avg10] {
    position: relative;
    left    : -5px
}

[data-trend]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-trend]:after {
    content              : attr(data-trend);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : 0;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-trend] {
    position: relative;
    left    : -5px
}

[data-norain]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-norain]:after {
    content              : attr(data-norain);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 3px;
    bottom               : .9em;
    left                 : -40px;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-norain] {
    position: relative;
    left    : -5px
}

[data-24hour]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-24hour]:after {
    content              : attr(data-24hour);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -50px;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-24hour] {
    position: relative;
    left    : -5px
}

[data-min]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-min]:after {
    content              : attr(data-min);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -6pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-min] {
    position: relative;
    left    : -5px
}

[data-winddir]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-winddir]:after {
    content              : attr(data-winddir);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : 0;
    left                 : -6pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-winddir] {
    position: relative;
    left    : -5px
}

[data-rainmonth]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-rainmonth]:after {
    content              : attr(data-rainmonth);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -32pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-rainmonth] {
    position: relative;
    left    : -5px
}

[data-rainyear]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-rainyear]:after {
    content              : attr(data-rainyear);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -2pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-rainyear] {
    position: relative;
    left    : -5px
}

[data-maxsolar]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-maxsolar]:after {
    content              : attr(data-maxsolar);
    background-color     : var(--temp15-20);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -35pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-maxsolar] {
    position: relative;
    left    : -5px
}

[data-uv10]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-uv10]:after {
    content              : attr(data-uv10);
    background-color     : var(--purple);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -30pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-uv10] {
    position: relative;
    left    : -5px
}

[data-uv8]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-uv8]:after {
    content              : attr(data-uv8);
    background-color     : var(--temp25-30);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -30pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-uv8] {
    position: relative;
    left    : -5px
}

[data-uv5]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-uv5]:after {
    content              : attr(data-uv5);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -30pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-uv5] {
    position: relative;
    left    : -5px
}

[data-uv3]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-uv3]:after {
    content              : attr(data-uv3);
    background-color     : var(--temp15-20);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -30pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-uv3] {
    position: relative;
    left    : -5px
}

[data-uv0]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-uv0]:after {
    content              : attr(data-uv0);
    background-color     : var(--temp5-10);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -30pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-uv0] {
    position: relative;
    left    : -5px
}

[data-tempzero]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-tempzero]:after {
    content              : attr(data-tempzero);
    background-color     : var(--alternative-blue);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -8pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-tempzero] {
    position: relative;
    left    : -5px
}

[data-temp0]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temp0]:after {
    content              : attr(data-temp0);
    background-color     : var(--temp0-5);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-temp0] {
    position: relative;
    left    : -5px
}

[data-temp5]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temp5]:after {
    content              : attr(data-temp5);
    background-color     : var(--temp5-10);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-temp5] {
    position: relative;
    left    : -5px
}

[data-temp10]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temp10]:after {
    content              : attr(data-temp10);
    background-color     : var(--temp10-15);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-temp10] {
    position: relative;
    left    : -5px
}

[data-temp15]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temp15]:after {
    content              : attr(data-temp15);
    background-color     : var(--temp15-20);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-temp15] {
    position: relative;
    left    : -5px
}

[data-temp20]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temp20]:after {
    content              : attr(data-temp20);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-temp20] {
    position: relative;
    left    : -5px
}

[data-temp25]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temp25]:after {
    content              : attr(data-temp25);
    background-color     : var(--temp25-30);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-temp25] {
    position: relative;
    left    : -5px
}

[data-temp30]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temp30]:after {
    content              : attr(data-temp30);
    background-color     : var(--temp30-35);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-temp30] {
    position: relative;
    left    : -5px
}

[data-temp35]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temp35]:after {
    content              : attr(data-temp35);
    background-color     : var(--temp35-40);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-temp35] {
    position: relative;
    left    : -5px
}

[data-temp40]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-temp40]:after {
    content              : attr(data-temp40);
    background-color     : var(--temp40-45);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -10pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-temp40] {
    position: relative;
    left    : -5px
}

[data-azimuth]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-azimuth]:after {
    content              : attr(data-azimuth);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : 0;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-azimuth] {
    position: relative;
    left    : -5px
}

[data-azimuth2]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-azimuth2]:after {
    content              : attr(data-azimuth2);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -130px;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-azimuth2] {
    position: relative;
    left    : -5px
}

[data-belowhorizon]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-belowhorizon]:after {
    content              : attr(data-belowhorizon);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : 0;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-belowhorizon] {
    position: relative;
    left    : -5px
}

[data-belowhorizon1]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-belowhorizon1]:after {
    content              : attr(data-belowhorizon1);
    background-color     : var(--dark-toggle);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 5px;
    bottom               : .3em;
    left                 : -30pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-belowhorizon1] {
    position: relative;
    left    : -5px
}

[data-chartdata]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-chartdata]:after {
    content              : attr(data-chartdata);
    background-color     : var(--dark-toggle);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 6px;
    bottom               : .4em;
    left                 : -15pt;
    white-space          : nowrap;
    opacity              : 0;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-chartdata] {
    position: relative;
    left    : -5px
}

[data-bft7]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-bft7]:after {
    content              : attr(data-bft7);
    background-color     : var(--temp30-35);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 10px;
    bottom               : .3em;
    left                 : -80pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-bft7] {
    position: relative;
    left    : -5px
}

[data-bft5]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-bft5]:after {
    content              : attr(data-bft5);
    background-color     : var(--temp20-25);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 10px;
    bottom               : .3em;
    left                 : -80pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-bft5] {
    position: relative;
    left    : -5px
}

[data-bft3]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-bft3]:after {
    content              : attr(data-bft3);
    background-color     : var(--temp10-15);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 10px;
    bottom               : .3em;
    left                 : -80pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-bft3] {
    position: relative;
    left    : -5px
}

[data-bft]:hover:after {
    opacity   : 1;
    visibility: visible
}

[data-bft]:after {
    content              : attr(data-bft);
    background-color     : var(--temp5-10);
    color                : #fff;
    font-size            : 9px;
    position             : absolute;
    padding              : 10px;
    bottom               : .3em;
    left                 : -80pt;
    white-space          : nowrap;
    opacity              : 0;
    z-index              : 99999;
    visibility           : hidden;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    filter               : brightness(90%);
    -webkit-filter       : brightness(90%);
    font-family          : verb
}

[data-bft] {
    position: relative;
    left    : -5px
}

.nav-bottom .version {
    top       : 10px;
    color     : #ccc;
    right     : 7px;
    font-size : 7px;
    box-shadow: none;
    background: 0;
    position  : absolute
}

.nav-bottom-charts .version {
    top       : 10px;
    color     : #aaa;
    right     : 10px;
    font-size : 7px;
    box-shadow: none;
    background: 0;
    position  : absolute
}

.thelaststrike {
    position         : absolute;
    margin-left      : 225px;
    padding          : 1px;
    font-size        : 6pt;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    text-align       : center;
    width            : max-content;
    line-height      : 1;
    margin-top       : 37px;
    text-shadow      : none;
    text-transform   : none;
    color            : var(--body-text-dark);
    background-color : transparent;
    text-shadow      : none;
    border-radius    : 2px;
    cursor           : pointer;
    z-index          : 100;
    font-family      : weathertext2
}

.thelaststrike interval {
    font-size     : 6pt;
    text-transform: capitalize;
    font-family   : verb
}

.thelaststrike a {
    color         : var(--body-text-dark);
    text-transform: capitalize;
    font-size     : 6pt;
    font-family   : verb
}

.forecastlink {
    color         : var(--body-text-dark);
    text-transform: capitalize
}

icontext {
    position   : relative;
    top        : -8px;
    font-family: weathertext2;
    font-size  : .8em;
    right      : 1px;
    color      : var(--body-text-dark)
}

a:hover {
    color: var(--body-text-dark)
}

a:visited {
    color: var(--body-text-dark)
}

.weather34switcher a {
    background: 0 0
}

.weather34switcher [data-title]:after {
    top   : -7px;
    height: 12px;
    left  : -5px
}

.weather34switcher a,
.weather34switchercharts a,
.weather34switcherforecast a {
    display              : inline-flex;
    border-radius        : 3px;
    background-color     : var(--navicons);
    font-size            : 12px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px;
    padding-bottom       : 0;
    padding-top          : 0;
    padding-left         : 3px;
    padding-right        : 3px;
    justify-content      : center;
    align-items          : center;
    height               : 27px;
    width                : 30px;
    top                  : 5px
}

.weather34switcher [data-title]:after {
    top   : -20px;
    height: 12px;
    left  : -5px
}

.weather34switchercharts [data-title]:after {
    top   : -20px;
    height: 12px;
    left  : -5px
}

.weather34switcherforecast [data-title]:after {
    top   : -20px;
    height: 12px;
    left  : -5px
}

.weather34caption {
    font-size      : 15px;
    width          : 300px;
    justify-content: center;
    align-items    : center;
    text-align     : center;
    font-family    : verb;
    margin-top     : 55px
}

tempseperator {
    font-family: weathertext3
}

windunittablet {
    text-transform: uppercase
}

.trendspace {
    padding-left : 245px;
    margin-top   : -50px;
    margin-bottom: 25px
}

.rainratephrase {
    display        : inline-flexbox;
    margin         : 0 auto;
    text-align     : center;
    justify-content: center;
    align-items    : center;
    font-family    : verb;
    font-size      : 14px;
    color          : var(--body-text-dark)
}

svg {
    shape-rendering: geometricPrecision
}

img svg {
    shape-rendering: geometricPrecision
}

.rainlast24,
.todaysbftmax,
.todayssolarmax,
.todayssolarmax1,
.todaysuvmax,
.todayswindmax {
    position   : absolute;
    margin-left: 5px;
    margin-top : -10pt;
    font-family: verb;
    font-size  : 20px
}

.todaysbftmax {
    margin-top: 23pt
}

.todaysuvmax {
    margin-top: -14pt
}

.todayssolarmax {
    margin-left: 215px;
    z-index    : 10
}

.todayssolarmax1 {
    margin-left: 215px;
    margin-top : -14pt
}

.todaysairinfo {
    position   : absolute;
    margin-left: 275px;
    margin-top : -3pt;
    font-family: verb;
    font-size  : 20px
}

.rainlast24 {
    margin-left: 230px;
    margin-top : -10pt
}

.trendtemp {
    margin-left: 15px;
    position   : absolute;
    margin-left: 55px;
    margin-top : 10pt;
    font-family: verb;
    font-size  : 20px
}

.todayswindtrend {
    display        : flex;
    justify-content: right;
    align-items    : right;
    float          : right;
    text-align     : right;
    padding-right  : 5px;
    margin-top     : 20pt;
    font-family    : verb;
    font-size      : 20px
}

.todayswindavg {
    position   : absolute;
    margin-left: -140px;
    margin-top : -58pt;
    font-family: verb;
    font-size  : 15px
}

solarunittabletmax,
windunittabletmax {
    text-transform: uppercase;
    vertical-align: middle;
    font-size     : 8px;
    font-family   : verb;
    opacity       : .7
}

solarunittabletmax {
    text-transform: none;
    padding-top   : 0
}

.winddirectiontrend a {
    margin-top : -78px;
    margin-left: -100pt;
    position   : absolute;
    font-size  : 15px;
    font-family: verb
}

.windirectionphrases {
    position       : absolute;
    font-size      : 26px;
    width          : 300px;
    justify-content: center;
    align-items    : center;
    text-align     : center;
    font-family    : verb;
    margin-left    : -180pt;
    margin-top     : -35px;
    line-height    : .9;
    margin-bottom  : 0
}

.rainlast24 a,
.todaysairinfo a,
.todaysbftmax a,
.todayssolarmax a,
.todayssolarmax1 a,
.todaysuvmax a,
.todayswindavg a,
.todayswindmax a,
rainman-tablet a,
tempman-tablet a {
    font-size  : 20px;
    font-family: verb
}

.chartdataicon,
.chartdatarainicon {
    position             : relative;
    float                : right;
    right                : 10px;
    top                  : 17px;
    cursor               : pointer;
    width                : 30px;
    height               : 15px;
    background           : 0 0;
    padding-top          : 1px;
    padding-left         : 0;
    padding-right        : 4px;
    padding-bottom       : 2px;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px
}

.chartdatadirectionicon {
    position             : absolute;
    float                : left;
    margin-left          : 105px;
    margin-top           : 62px;
    cursor               : pointer;
    z-index              : 1;
    width                : 30px;
    height               : 15px;
    background           : 0;
    padding-top          : 1px;
    padding-left         : 0;
    padding-right        : 4px;
    padding-bottom       : 2px;
    border-radius        : 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius   : 3px;
    -ms-border-radius    : 3px;
    -o-border-radius     : 3px
}