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

:root,
html[data-theme="dark"] {
    --white: hsl(0, 0%, 96%);
    --light: hsl(0, 0%, 96%);
    --dark: #0f0f0f;
    --dark2: #fff;
    --pagebackground: #0f0f0f;
    --wholepagecolor: transparent;
    --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: hsla(185, 100%, 37%, 1);
    --darkblue: rgb(28, 124, 133);
    --deepcold: hsl(205, 69%, 63%);
    --blue: #1d7fb7;
    --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%);
    --border-sun: hsla(206, 12%, 27%, 0.4);
    --dark-sun: rgba(47, 50, 61, 1);
    --barometerbar: #99b1c9;
    --barometerbar2: #99b1c9;
    --cloudbasebar: hsl(206, 19%, 39%);
    --black2: hsla(240, 4%, 9%, 0.3);
    --suntext: hsl(212, 23%, 85%);
    --suntext2: rgba(233, 237, 240, 0.8);
    --sunsetdark: hsl(202, 8%, 46%);
    --daylight: hsla(14, 95%, 50%, 0.8);
    --thecenter: --;
    --compass-shadow-sun: 5px 5px 10px hsla(0, 4%, 5%, 0.4),
        -5px -5px 1px hsla(198, 14%, 14%, 0.49);
    --purple: hsl(246, 31%, 62%);
    --silver: hsl(207, 8%, 73%);
    --border-dark: hsl(206, 12%, 27%);
    --border-dark2: hsla(206, 12%, 27%, 0.4);
    --border-dark-sun: hsla(206, 30%, 91%, 0.2);
    --blue2: rgba(184, 236, 243, 0.5);
    --yellow2: hsla(35, 77%, 58%, 0.8);
    --body-text-dark: hsl(209, 26%, 83%);
    --windbody: #34495b;
    --body-text-darkb: azure;
    --body-text-light: hsl(0, 0%, 33%);
    --blocks: hsl(227, 22%, 92%);
    --modules: #1f2229;
    --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: #f78d02;
    --temp20-25: #d87041;
    --temp25-30: hsl(12, 80%, 52%);
    --temp30-35: #cd504c;
    --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);
    --button-bg-color: hsla(198, 14%, 14%, 0.19);
    --button-shadow: inset 5px 5px 20px #0c0b0b,
        inset -5px -5px 20px hsla(198, 14%, 14%, 0.19);
    --button-shadowbeaker: inset 2px -2px 10px 0px #0c0b0b,
        inset 2px -2px 10px 0px hsla(198, 14%, 14%, 0.19);
    --grid-lines: linear-gradient(hsla(0, 0%, 33%, 0.08) 1px, transparent 1px),
        linear-gradient(to right, hsla(0, 0%, 33%, 0.08) 1px, transparent 1px);
    --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(100%);
    --popupcontrast: brightness(100%);
    --chartcontrast: brightness(100%);
    --normalcontrast: brightness(100%);
    --iconcontrast: brightness(100%);
    --modulesborder: hsla(216, 4%, 48%, 0.2);
    --modulesborderside: hsla(216, 4%, 48%, 0.2);
    --modulesbordersidewind: hsla(211, 21%, 72%, 0%);
    --modulesshadow: none;
    --gaugeborders: hsl(214, 16%, 20%);
    --rainbeakerborders: rgb(65, 70, 79);
    --realfeel: hsla(204, 31%, 21%, 0.429);
    --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, 0.5);
    --webcam: hsla(217, 15%, 17%, 0.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, #1f2229 96%, hsl(209, 26%, 83%) 88%);
    --menulinks: #c8d4df;
    --menulinkshover: #fb631d;
    --alternative-blue: #1994d7;
    --charticonborder: hsla(205, 11%, 62%, 0.1);
    --moduleoutline: rgba(0, 0, 0, 0.5);
    --moduleoutlinehover: hsla(208, 26%, 40%, 0.937);
    --scrollbar-bg: #fb631d;
    --barometervalue: hsl(209, 26%, 83%);
    --windgust40: linear-gradient(90deg,
            rgba(230, 162, 65, 1) 0%,
            rgba(247, 131, 2, 1) 50%,
            rgba(244, 115, 74, 1) 100%);
    --windgust50: linear-gradient(90deg,
            rgba(230, 162, 65, 1) 0%,
            rgba(244, 115, 74, 1) 50%,
            rgba(211, 95, 80, 1) 100%);
    --therainrategrad: -webkit-linear-gradient(left,
            #00adbd 0%,
            #1994d7 30%,
            #d35f50 90%);
    --indicatorbackground: hsla(206, 19%, 39%, 0.7);
    --menubackgroundlinks: hsla(208, 26%, 40%, 0.937);
    --grid-linesrain: linear-gradient(hsla(240, 4%, 84%, 0.2) 1px,
            transparent 1px),
        linear-gradient(to right, hsla(240, 4%, 84%, 0.2) 1px, transparent 1px);
    --grid-linesrainbucket: linear-gradient(hsla(210, 17%, 98%, 0.04) 1px,
            transparent 1px),
        linear-gradient(to right, hsla(210, 17%, 98%, 0.04) 1px, transparent 1px);
    --gaugeborder: #323233;
    --grid-wind: linear-gradient(hsla(0, 0%, 33%, 0.09) 1px, transparent 1px),
        linear-gradient(to right, hsla(0, 0%, 33%, 0.09) 1px, transparent 1px);
    --compassopacity: 0.5;
    --compasscenter: hsla(210, 7%, 27%, 0.49);
    --themeicon: var(--barometerbar);
    --windbody2: #c8d4df;
    --bft0-1: #41a055;
    --bft2-4: #d1c149;
    --bft5-6: #e97a31;
    --bft7-9: #d84e1c;
    --bft10-12: #f03514;
    --maxborders:hsla(208, 26%, 40%, 0.437);
    --tempbackground: hsla(216, 4%, 48%, 0.2);
}

html[data-theme="light"] {
    --white: hsl(0, 0%, 96%);
    --light: hsl(0, 0%, 96%);
    --dark: #0f0f0f;
    --dark2: #fff;
    --pagebackground: white;
    --wholepagecolor: white;
    --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: hsla(185, 100%, 37%, 1);
    --darkblue: rgb(28, 124, 133);
    --deepcold: hsl(205, 69%, 63%);
    --blue: #1d7fb7;
    --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%);
    --border-sun: hsla(206, 12%, 27%, 0.4);
    --dark-sun: rgba(47, 50, 61, 1);
    --barometerbar: hsla(208, 27%, 28%, 70%);
    --barometerbar2: #99b1c9;
    --cloudbasebar: hsl(206, 19%, 39%);
    --black2: hsla(240, 4%, 9%, 0.3);
    --suntext: hsl(212, 23%, 85%);
    --suntext2: rgba(233, 237, 240, 0.8);
    --sunsetdark: hsl(202, 8%, 46%);
    --daylight: hsla(14, 95%, 50%, 0.8);
    --thecenter: --;
    --compass-shadow-sun: 5px 5px 10px hsla(0, 4%, 5%, 0.4),
        -5px -5px 1px hsla(198, 14%, 14%, 0.49);
    --purple: hsl(246, 31%, 62%);
    --silver: hsl(205, 23%, 90%);
    --border-dark: hsl(206, 12%, 27%);
    --border-dark2: hsla(206, 12%, 27%, 0.4);
    --border-dark-sun: hsla(206, 12%, 27%, 0.2);
    --blue2: rgba(184, 236, 243, 0.5);
    --yellow2: hsla(35, 77%, 58%, 0.8);
    --body-text-dark: hsla(208, 27%, 28%, 70%);
    --body-text-darkb: hsl(212, 12%, 72%);
    --body-text-light: hsl(0, 0%, 33%);
    --windbody: hsla(208, 27%, 28%, 70%);
    --windbody2: hsla(208, 27%, 28%, 70%);
    --blocks: hsl(227, 22%, 92%);
    --modules: white;
    --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: #f78d02;
    --temp20-25: #d87041;
    --temp25-30: hsl(12, 80%, 52%);
    --temp30-35: #cd504c;
    --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);
    --button-bg-color: hsla(198, 14%, 14%, 0.19);
    --button-shadow: inset 5px 5px 20px #0c0b0b,
        inset -5px -5px 20px hsla(198, 14%, 14%, 0.19);
    --button-shadowbeaker: inset 2px -2px 10px 0px #0c0b0b,
        inset 2px -2px 10px 0px hsla(198, 14%, 14%, 0.19);
    --grid-lines: none;
    --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(100%);
    --popupcontrast: brightness(100%);
    --chartcontrast: brightness(100%);
    --normalcontrast: brightness(100%);
    --iconcontrast: brightness(100%);
    --modulesborder: hsl(211, 21%, 72%);
    --modulesborderside: hsl(211, 21%, 72%);
    --modulesbordersidewind: hsla(211, 21%, 72%, 100%);
    --modulesshadow: none;
    --gaugeborders: hsl(211, 21%, 72%);
    --rainbeakerborders: hsl(211, 21%, 72%);
    --realfeel: hsla(204, 31%, 21%, 0.429);
    --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, 0.5);
    --webcam: hsla(217, 15%, 17%, 0.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, #1f2229 96%, hsl(209, 26%, 83%) 95%);
    --menulinks: #c8d4df;
    --menulinkshover: #fb631d;
    --alternative-blue: #1994d7;
    --charticonborder: hsla(205, 11%, 62%, 0.1);
    --moduleoutline: rgba(0, 0, 0, 0.5);
    --moduleoutlinehover: hsla(208, 26%, 40%, 0.937);
    --scrollbar-bg: #fb631d;
    --barometervalue: hsla(208, 27%, 28%, 70%);
    --windgust40: linear-gradient(90deg,
            rgba(230, 162, 65, 1) 0%,
            rgba(247, 131, 2, 1) 50%,
            rgba(244, 115, 74, 1) 100%);
    --windgust50: linear-gradient(90deg,
            rgba(230, 162, 65, 1) 0%,
            rgba(244, 115, 74, 1) 50%,
            rgba(211, 95, 80, 1) 100%);
    --therainrategrad: -webkit-linear-gradient(left,
            #00adbd 0%,
            #1994d7 30%,
            #d35f50 90%);
    --indicatorbackground: hsla(206, 19%, 39%, 0.7);
    --menubackgroundlinks: hsla(208, 26%, 40%, 0.937);
    --grid-linesrain: linear-gradient(hsla(240, 4%, 84%, 0.2) 1px,
            transparent 1px),
        linear-gradient(to right, hsla(240, 4%, 84%, 0.2) 1px, transparent 1px);
    --grid-linesrainbucket: linear-gradient(hsla(221, 12%, 68%, 0.07) 1px,
            transparent 1px),
        linear-gradient(to right, hsla(221, 12%, 64%, 0.07) 1px, transparent 1px);
    --gaugeborder: #4f5359;
    --grid-wind: linear-gradient(hsla(0, 0%, 33%, 0.08) 1px, transparent 1px),
        linear-gradient(to right, hsla(0, 0%, 33%, 0.08) 1px, transparent 1px);
    --compassopacity: 0.7;
    --compasscenter: hsla(240, 25%, 98%, 0.49);
    --themeicon: #abb3ba;
    --bft0-1: #41a055;
    --bft2-4: #d1c149;
    --bft5-6: #e97a31;
    --bft7-9: #d84e1c;
    --bft10-12: #f03514;
    --maxborders:hsla(208, 26%, 40%, 0.237);
    --tempbackground: hsla(216, 4%, 48%, 0.2);
}

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: 1024px;
    max-width: 1024px;
    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: 1em;
    filter: var(--contrast);
    -webkit-filter: var(--contrast);
}

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

.weather34switch {
    position: relative;
    display: inline-block;
    width: max-content;
    z-index: 0;
    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: 25px;
}

bottomtoolbarspacecharts {
    margin-left: 60px;
}

day {
    color: var(--daylight);
}

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

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

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: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 3fr));
    gap: 0px;
    grid-gap: 0px;
    column-gap: 0px;
}

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

li,
li2,
lih,
lid,
liwindavg,
liwind,
lirain,
lirainrate,
libaro,
liuv,
lisolar,
lisun,
liaq,
liair {
    align-items: center;
    display: flex;
    justify-content: center;
    min-width: 330px;
    max-width: 330px;
    padding: 0;
    height: 180px;
    max-height: 190px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 3px;
    color: var(--body-text-dark);
    background-color: var(--modules);
    border-radius:10px;
    border: 1px solid var(--modulesborderside);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
}

lidir {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 505px;
    padding: 0;
    height: 190px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    color: var(--body-text-dark);
    background-color: none;
    border-radius: 30px;
   
    border: 0;
    border-bottom: 0;
    margin-bottom: 0;
    margin-top: 4px;
    border: 1px solid var(--modulesbordersidewind);
    border-bottom: 1px solid var(--modulesbordersidewind);

}

lidirect,
liwind {
    display: none;
}

li2 {
    margin-bottom: -25px;
    display: flex;
    display: grid;
    list-style: none;
    margin: 0px 5px;
    padding: 0;
    border: 1px solid var(--modulesborderside);
    border-bottom: 5px solid var(--modulesborder);
}

liuv,
lisolar,
lisun {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 245px;
    width: 245px;
    padding: 0;
    height: 190px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 3px;
    color: var(--body-text-dark);
    background-color: var(--modules);
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border: 1px solid hsla(216, 4%, 25%, 70%);
    border-bottom: 5px solid hsla(216, 4%, 25%, 70%);
    margin-left: 260px;
    border: 1px solid var(--modulesborderside);
    border-bottom: 5px solid var(--modulesborder);
}

li3,
li4 {
    display: none;
}

li,
lih,
lid,
lirain,
lirainrate,
libaro,
lidir,
liuv,
lisolar,
lisun,
li2 {
    background-color: var(--modules);
    background-image: var(--grid-lines);
    background-size: 5px 5px;
    color: hsl(209, 26%, 83%);
}

windcolor {
    color: hsl(209, 26%, 83%);
}

.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: 55px;
    text-align: center;
    width: auto;
    position: relative;
    color: var(--body-text-dark);
    font-size: 42px;
    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;
}

.clock34 {
    font-family: verb;
    font-size: 1.2rem;
    color: #98b1c9;
    height: fit-content;
    margin-top: 5px;
}

.clock34 time {
    display: inline-flexbox;
    position: absolute;
    top: 7px;
    margin-left: 700px;
    padding: 3px;
    border-radius: 5px;
    border: 1px hsla(209, 26%, 83%, 10%) solid;
}

.thedate3 {
    display: none;
}

.date,
.date2 {
    display: block;
    background: 0;
    color: var(--body-text-dark);
    font-size: 0.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: 45px;
    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: verb;
}

.sunblock2 {
    background: 0;

    width: 275px;
    line-height: 1;
    margin-top: 25px;
}

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

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

.sunposition-block-sun2 {
    margin-top: 22px;
    margin-left: -110px;
    background: #e1e7e7;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: block;
    color: var(--body-text-dark);
    font-size: 9px;
    line-height: 1;
    position: absolute;
    font-family: verb;
    text-align: left;
    opacity: 0.5;
}

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

.sunset-block-sun {
    margin-top: -27px;
    margin-left: 55px;
}

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

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

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

.thedate4 {
    margin-top: 40px;
}

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

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

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

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: 0.7em;
}

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

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

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

smallrainunit34,
smallrainunit341,
smalltempunit2,
smalltempunit4 {
    font-size: 0.45rem;
}

smallrainunit34 {
    color: var(--body-text-dark);
    vertical-align: top;
    font-family: verb;
    margin-top: -20px;
}

smallrainunit341 {
    position: absolute;
    color: var(--body-text-dark);
    vertical-align: top;
    font-family: verb;
    margin-top: -45px;
    margin-left: -5px;
    background: 0;
    padding: 3px;
    width: max-content;
    text-transform: uppercase;
}

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

smalltempunit {
    position: relative;
    font-size: 0.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: 0.7rem;
    color: var(--body-text-dark);
    margin-top: -1px;
    font-family: weathertext2;
    opacity: 0.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;
    color: var(--body-text-dark);
}

windphrase-tablet {
    margin-left: 50px;
    font-size: 18px;
    margin-top: 90px;
    color: var(--body-text-dark);
}

.directionbft {
    color: #4b5d6d;
    position: absolute;
    margin-top: -15px;
    left: 0px;
    font-size: 11px;
    font-family: verb;
    width: max-content;
}

.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: 0.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(--body-text-dark);
    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;
}

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

.homeweathercompass2>.homeweathercompass-line2 {
    position: absolute;
    bottom: 25px;
    left: 30px;
    width: 95px;
    height: 95px;
    margin: 0 auto;
    border: 20px solid #41464f;
    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;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
        0 4px 5px -5px var(--moduleoutline), 0 4px 5px -5px var(--moduleoutline),
        0 4px 5px -5px var(--moduleoutline), 0 0 0 0 #000, 0 0 0 0 #000;
}

.weather34compassring2 {
    position: absolute;
    width: 105px;
    height: 105px;
    margin: 0 auto;
    border: 25px solid #4f5359;
    border-radius: 50%;
    margin-left: -80px;
    margin-top: -75px;
    opacity: 0.7;
}

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

.weather34compassgrid2 {
    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);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-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;
}

.homeweathercompass2>.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: 65px 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(--body-text-dark);
    margin-left: -10px;
}

.weather34-0deg,
.weather34-135deg,
.weather34-180deg,
.weather34-225deg,
.weather34-270deg,
.weather34-315deg,
.weather34-45deg,
.weather34-90deg,
.weather34-ne,
.weather34-nw,
.weather34-se,
.weather34-sw {
    position: absolute;
    font-size: 8px;
    margin-top: 24px;
    margin-left: 96px;
    font-family: verb;
    color: var(--body-text-dark);
}

.weather34-0deg,
.weather34-135deg,
.weather34-180deg,
.weather34-225deg,
.weather34-270deg,
.weather34-315deg,
.weather34-45deg,
.weather34-90deg {
    z-index: auto;
}

.weather34-0deg {
    margin-top: 40px;
    margin-left: 95px;
}

.weather34-45deg {
    margin-top: 53px;
    margin-left: 121px;
    transform: rotate(46deg);
    -webkit-transform: rotate(46deg);
    -moz-transform: rotate(46deg);
    -ms-transform: rotate(46deg);
    -o-transform: rotate(46deg);
}

.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-90deg {
    margin-top: 84px;
    margin-left: 133px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

.weather34-135deg {
    margin-top: 111px;
    margin-left: 120px;
    transform: rotate(-49deg);
    -webkit-transform: rotate(-49deg);
    -moz-transform: rotate(-49deg);
    -ms-transform: rotate(-49deg);
    -o-transform: rotate(-49deg);
}

.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-180deg {
    margin-top: 125px;
    margin-left: 89px;
}

.weather34-225deg {
    margin-top: 115px;
    margin-left: 59px;
    transform: rotate(44deg);
    -webkit-transform: rotate(44deg);
    -moz-transform: rotate(44deg);
    -ms-transform: rotate(44deg);
    -o-transform: rotate(44deg);
}

.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-270deg {
    margin-top: 80px;
    margin-left: 45px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

.weather34-315deg {
    margin-top: 53px;
    margin-left: 56px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

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

.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;
    color: white;
}

.weather34-ne {
    margin-top: 37px;
    margin-left: 138px;
    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: 139px;
    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: 43px;
    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;
    color: white;
}

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

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

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

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

.thearrow2a {
    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);
}

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

.thearrow5 {
    position: absolute;
    z-index: 150;
    left: 50%;
    top: -8pt;
    height: 110.5px;
    width: 110.5px;
    background: 0 0;
}

.thearrow6 {
    position: absolute;
    z-index: 150;
    left: 50%;
    top: -8pt;
    height: 105.5px;
    width: 105.5px;
    background: 0 0;
    color: var(--body-text-dark);
}

.thearrow1 {
    position: absolute;
    z-index: 150;
    left: 49%;
    top: -8pt;
    height: 110.5px;
    width: 110.5px;
    background: 0 0;
}

.thearrow1:after {
    content: "";
    position: absolute;
    top: 4pt;
    -webkit-transform: translate(-50%, -45%);
    -moz-transform: translate(-50%, -45%);
    -o-transform: translate(-50%, -45%);
    -ms-transform: translate(-50%, -45%);
    transform: translate(-50%, -45%);
}

.thearrow1a {
    position: absolute;
    z-index: 150;
    left: 60%;
    top: 5pt;
    height: 120.5px;
    width: 120.5px;
    background: 0 0;
}

.thearrow1a:after {
    content: "";
    position: absolute;
    top: 4pt;
    -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);
}

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

.windtabletdirectionten {
    display: inline;
    position: absolute;
    margin-top: 43pt;
    margin-left: -130px;
    background: var(--navicons);
    color: var(--barometerbar);
    font-size: 10px;
    font-family: verb;
    background: var(--navicons);
    border-radius: 2px;
    padding: 4px;
    line-height: 1;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0),
        0 5px 5px -5px var(--moduleoutline), 0 5px 5px -5px var(--moduleoutline),
        0 0 5px -5px var(--moduleoutline), 0 0 0 0 #000, 0 0 0 0 #000;
}

.maxtablet,
.mintablet {
    color: #fff;
    display: inline;
    opacity: 0.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: 0.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: 0.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: #c8d4df;
    font-size: 10px;
    font-family: verb;
    text-decoration: none;
    margin-right: 50px;
    float: right;
    margin-top: -20px;
    word-wrap: break-word;
    width: auto;
}

.desktoplink {
    color: #c8d4df;
    font-size: 10px;
    font-family: verb;
    text-decoration: none;
    margin-right: 100px;
    float: right;
    margin-top: 17px;
}

.desktoplink3 {
    color: #c8d4df;
    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: #c8d4df;
    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: #c8d4df;
    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: #c8d4df;
    font-size: 10px;
    font-family: verb;
    text-decoration: none;
    margin-left: 155px;
    float: none;
    margin-top: -23px;
    word-wrap: break-word;
    width: 400px;
    max-width: 400px;
}

a {
    color: #c8d4df;
    font-size: 12px;
    font-family: headingtext;
    text-decoration: none;
    margin-left: 280px;
}

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

.online {
    position: absolute;
    font-size: 0.65em;
    color: #c8d4df;
    margin-top: -25px;
    float: right;
    padding-left: 10px;
    right: 10px;
}

.onlineupdated {
    position: relative;
    font-size: 0.65em;
    color: #c8d4df;
    margin-top: -24px;
    float: none;
    padding-left: 17px;
    margin-left: 92%;
}

onlinetime {
    position: relative;
    color: #c8d4df;
    font-family: verb;
    top: -3px;
}

.online2 {
    position: relative;
    top: 0;
    color: #c8d4df;
}

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

.nav-top {
    margin: 0 auto;
    max-width: 1020px;
    background: var(--tablet);
    color: #98b1c9;
    padding: 6px 0 0 0;
    height: 40px;
    line-height: 2;
    position: relative;
    bottom: 0;
    margin-top: 2px;
    margin-bottom: -2px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin-left: 5px;
}

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

.nav,
.nav-bottom-charts {
    margin: 0 auto;
    max-width: 1020px;
    padding: 2px;
    position: relative;
    height: 45px;
    padding-top: 10px;
    padding-bottom: 0;
    color: #98b1c9;
    background: var(--tablet);
    position: relative;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin-left: 10px;
}

.nav-bottom {
    margin: 0 auto;
    max-width: 1022px;
    background: var(--tablet);
    color: #98b1c9;
    padding: 6px 0 0 0;
    height: 40px;
    position: relative;
    margin-top: 2px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    margin-left: 7px;
}

.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 .aurora {
    position: absolute;
    display: inline;
    top: 20px;
    right: 440px;
    font-size: 10px;
    width: max-content;
}

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

a {
    font-size: 10px;
    font-family: headingtext;
    text-decoration: none;
    margin-left: 10px;
    color: #98b1c9;
    display: inline;
    box-shadow: none;
}

.nav-bottom a {
    border-radius: 3px;
    background-color: #1a1c24;
    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;
    box-shadow: none;
    color: #b7cadc;
}

.nav-bottom unitscolor a {
    border-radius: 3px;
    background-color: #1a1c24;
    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;
    box-shadow: none;
    color: #b7cadc;
}

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

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: 0.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);
}

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

smalltrainunittabletair {
    position: absolute;
    font-size: 11px;
    color: var(--body-text-dark);
    top: 90px;
    text-align: center;
    margin: 0 auto;
}

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: 10px;
    color: var(--body-text-dark);
    font-family: verb;
    vertical-align: text-top;
}

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

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

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: 0.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: 0px;
}

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: 0.25rem;
    color: var(--body-text-dark);
}

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

smallrainunit2lightning {
    position: relative;
    font-family: weathertext2;
    top: -30px;
    font-size: 0.55rem;
    color: var(--body-text-dark);
    width: max-content;
}

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

.winddirectionlegend {
    font-family: verb;
    position: absolute;
    font-size: 0.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 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.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: -0.25em;
}

.lity-wrap:after {
    content: "CSS/SVG/PHP by weather34";
    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: -0.8em;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.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 0.3s ease, -webkit-transform 0.3s ease,
        -o-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease, -webkit-transform 0.3s ease,
        -o-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease,
        -o-transform 0.3s ease;
    -moz-transition: transform 0.3s ease, -webkit-transform 0.3s ease,
        -o-transform 0.3s ease;
    -ms-transition: transform 0.3s ease, -webkit-transform 0.3s ease,
        -o-transform 0.3s ease;
    margin: auto 0;
    justify-content: center;
    text-align: center;
}

.lity-closed .lity-content,
.lity-loading .lity-content {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.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: 0.3em;
    top: 0.3em;
    -webkit-appearance: none;
    appearance: none;
    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;
}

.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: 5px;
    right: 50px;
    font-family: verb;
    background: #1f2229;
    filter: var(--normalcontrast);
    -webkit-filter: var(--normalcontrast);
    border: 1px solid grey;
}

.weather34-notification weather34-alertheader {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    font-size: 12px;
    color: #c8d4df;
}

.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: #c8d4df;
}

.weather34-notification weather34-alertvalue {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 22px;
    line-height: 1.4;
    font-family: verb;
    color: #c8d4df;
}

.weather34-notification weather34-alertunit {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
    vertical-align: text-top;
    color: #c8d4df;
}

.weather34-notification weather34-timeago {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-family: verb;
    color: #c8d4df;
}

li6 {
    display: none;
}

.showicon2 {
    display: none;
}

.weather34-menuside {
    max-height: max-content;
    top: 0px;
    width: 220px;
    position: fixed;
    left: -350px;
    z-index: 1001;
    background-color: var(--menulinkshover);
    overflow-y: scroll;
    text-align: left;
    -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;
    background: var(--menubackground);
    border: 0;
    border-right: 2px solid hsl(209, 26%, 83%);
    border-left: 0;
    color: #c8d4df;
}

.weather34-highlight {
    -webkit-transform: translateX(350px);
    -moz-transform: translateX(350px);
    -o-transform: translateX(350px);
    -ms-transform: translateX(350px);
    transform: translateX(350px);
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3),
        0 15px 12px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3),
        0 15px 12px rgba(0, 0, 0, 0.22);
}

.weather34-open-menu {
    display: inline;
}

.weather34-open-menu button {
    position: relative;
    background-color: transparent;
    color: #c8d4df;
    font-size: 12px;
    padding: 1px;
    margin-top: 0pt;
    cursor: pointer;
    margin-left: 10px;
    line-height: 1;
    font-family: verb;
    width: max-content;
}

.weather34-header-menu {
    height: 10px;
    margin-bottom: 10px;
}

.weather34-header-menu button {
    position: relative;
    left: 95px;
    border: none;
    line-height: 0.8;
    text-align: center;
    justify-content: center;
    background: 0 0;
    cursor: pointer;
    color: #c8d4df;
    font-family: verb;
    font-size: 11px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: max-content;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.weather34-top-menu a {
    display: flex;
    text-decoration: none;
    color: #c8d4df;
    font-weight: 500;
    font-size: 12px;
    line-height: 0.5;
    padding-left: 5px;
    float: none;
    text-align: left;
    width: 160px;
    justify-content: left;
    height: 12px;
    cursor: pointer;
    font-family: headingtext;
    padding-bottom: 5px;
    padding-top: 10px;
    margin-bottom: -10px;
    margin-left: 10px;
    background: #2d3037;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.weather34-top-menu br {
    line-height: 1;
}

.link {
    position: absolute;
    margin-left: 30px;
    background: 0 0;
    color: var(--menulinks);
}

.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(--menubackgroundlinks);
    color: #c8d4df;
}

aurora {
    position: absolute;
    width: max-content;
    font-size: 0.7em;
    font-family: verb;
    margin-left: -30px;
    opacity: 0.8;
    margin-top: 10px;
    text-shadow: none;
    color: #c8d4df;
}

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%, 0.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: 330px;
    padding-right: 10px;
}

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

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

.weather34-webcam,
.weather34-webcam-large {
    border: 2px solid var(--modulesborderside);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    width: 225px;
    height: 145px;
    margin-top: 0;
    filter: contrast(1.1);
    -webkit-filter: contrast(1.1);
}

.weather34-webcam-large {
    width: 90%;
    height: 99%;
}

.modulecaptioncam {
    display: flex;
    position: relative;
    left: 165px;
    top: -3px;
    color: var(--body-text-dark);
    background-color: var(--modulecaptions);
    font-family: verb;
    width: 11em;
    height: 10px;
    font-size: 10px;
    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;
}

.webcamlink {
    margin-left: 10px;
    margin-top: 100px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    z-index: 200;
    filter: contrast(1.75);
    -webkit-filter: contrast(1.75);
}

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

.chartdataicon {
    position: relative;
    float: right;
    right: 35px;
    top: 12px;
    cursor: pointer;
    background: 0 0;
    width: 25px;
    height: 21px;
    padding: 2px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.chartdataiconair,
.chartdataiconair2 {
    position: relative;
    float: right;
    right: 10px;
    top: 132px;
    cursor: pointer;
    background: 0 0;
    width: 25px;
    height: 21px;
    padding: 2px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.chartdataiconair2,
.chartdataiconair3 {
    position: relative;
    float: right;
    right: 10px;
    top: -35px;
    cursor: pointer;
    background: 0 0;
    width: 25px;
    height: 21px;
    padding: 2px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;

    z-index: 10;
}

.chartdataiconsun {
    position: absolute;
    float: right;
    margin-left: 85px;
    margin-top: 50px;
    cursor: pointer;
    background: 0 0;
    width: 25px;
    height: 21px;

    z-index: 100;
}

.chartdataiconeq {
    position: absolute;
    float: right;
    margin-left: 220px;
    margin-top: -30px;
    cursor: pointer;
    background: 0 0;
    width: 25px;
    height: 21px;

    z-index: 100;
}

.chartdatarainicon {
    position: relative;
    float: right;
    right: -100px;
    top: 55px;
    cursor: pointer;
    background: 0 0;
    width: 25px;
    height: 21px;
    padding: 2px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.chartdatadirectionicon {
    position: absolute;
    display: inline;
    margin-left: -235px;
    margin-top: 50px;
    cursor: pointer;
    z-index: 1;
    width: 25px;
    height: 21px;
}

.chartdatadirectionicon1 {
    position: absolute;
    display: inline-flexbox;
    margin-left: 211px;
    margin-top: 50px;
    cursor: pointer;
    z-index: 1;
    width: 25px;
    height: 21px;
}

.windspeedposition {
    position: absolute;
    margin-left: -215px;
    z-index: 10;
    font-size: 18px;
    font-family: verb;
    top: -22px;
    color: var(--body-text-dark);
}

.todayswindmaxdir {
    color: var(--body-text-dark);
    font-size: 11px;
    position: relative;
    margin-left: -220px;
    top: -55px;
    font-family: verb;
}

.todaysrainfall {
    color: var(--body-text-dark);
    font-size: 11px;
    position: absolute;
    margin-left: -100px;
    margin-top: -60px;
    font-family: verb;
}

.todayswindmaxdir2 {
    color: var(--body-text-dark);
    font-size: 11px;
    position: absolute;
    margin-left: 120px;
    margin-top: -70px;
    font-family: verb;
}

.lastrain {
    color: #34495b;
    font-size: 11px;
    position: absolute;
    margin-left: 25px;
    margin-top: -65px;
    font-family: verb;
}

.chartdatadirectionicondir {
    position: absolute;
    display: inline;
    margin-top: -15px;
    float: left;
    margin-left: -9%;
}

.chartdatadirectionicondir1 {
    position: absolute;
    display: inline;
    margin-left: 200px;
    margin-top: 55px;
    float: right;
}

.chartdatadirectionicondir2 {
    position: absolute;
    display: inline;
    margin-left: -155px;
    margin-top: 50px;
    float: right;
}

.chartdatadirectionicondir3 {
    position: absolute;
    display: inline;
    margin-left: 110px;
    margin-top: 50px;
    float: right;
}

.moduletrend {
    position: absolute;
    font-family: verb;
    margin-left: -120px;
    color: var(--body-text-dark);
    font-size: 11px;
    margin-top: 5px;
}

.moduletrendair {
    position: absolute;
    font-family: verb;
    margin-left: 170px;
    color: var(--body-text-dark);
    font-size: 11px;
    margin-top: 12px;
}

.daqmoduletrendair {
    position: absolute;
    font-family: verb;
    margin-left: 170px;
    color: var(--body-text-dark);
    font-size: 11px;
    margin-top: 12px;
}

.smallmoduleinfo {
    position: relative;
    margin-left: 278px;
    top: -20px;
    width: 25px;
    height: 16px;
    cursor: pointer;
    background: 0 0;
    padding: 2px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

rainphrasetext {
    position: relative;
    top: -4px;
    font-family: weathertext2;
    font-size: 0.9em;
    right: 1px;
    color: var(--body-text-dark);
}

.weather34raingridlines {
    position: relative;
    width: 100px;
    height: 95px;
    margin-top: -60px;
    margin-left: -106px;
}

.weather34i-rairate-bar2 {
    position: absolute;
    width: 140px;
    height: 105px;
    margin-top: -41px;
    margin-left: 43px;
}

#raincontainer2 {
    left: -150px;
    width: 188px;
    height: 170px;
    margin-top: -120px;
}

#raincontainer2,
#raincontainer2 div {
    position: absolute;
}

.weather34i-rairate-bar3 {
    position: absolute;
    width: 140px;
    height: 105px;
    margin-top: -41px;
    margin-left: 43px;
}

#raincontainer3 {
    left: -150px;
    width: 188px;
    height: 170px;
    margin-top: -120px;
}

#raincontainer3,
#raincontainer3 div {
    position: absolute;
}

#weather34rainbeaker2 {
    top: 125px;
    left: 40px;
    border: 0;
    border-top: 0;
    width: 160px;
    height: 95px;
    border: 4px solid var(--rainbeakerborders);
    border-top: 0;
    border-radius: 0 0 5px 5px;
    background: 0 0;
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    background-image: var(--grid-linesrainbucket);
    background-size: 5px 5px;
}

#weather34rainbeaker2:after,
#weather34rainbeaker2:before {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 0;
    border: 4px solid var(--rainbeakerborders);
    border-bottom: 0;
}

#weather34rainbeaker2 {
    top: 125px;
    left: 40px;
    border: 0;
    border-top: 0;
    width: 160px;
    height: 95px;
    border: 4px solid var(--rainbeakerborders);
    border-top: 0;
    border-radius: 0 0 5px 5px;
    background: 0 0;
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    background-image: var(--grid-linesrainbucket);
    background-size: 5px 5px;
}

#weather34rainbeaker3 {
    top: 125px;
    left: 40px;
    border: 0;
    border-top: 0;
    width: 160px;
    height: 95px;
    border: 4px solid var(--rainbeakerborders);
    border-top: 0;
    border-radius: 0 0 5px 5px;
    background: 0 0;
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    background-image: var(--grid-linesrainbucket);
    background-size: 5px 5px;
}

#weather34rainbeaker3:after,
#weather34rainbeaker3:before {
    content: "";
    position: absolute;
    top: 0;
    width: 1px;
    height: 0;
    border: 0px solid var(--rainbeakerborders);
    border-bottom: 0;
}

#weather34rainbeaker3 {
    top: 125px;
    left: 40px;
    border: 0;
    border-top: 0;
    width: 160px;
    height: 95px;
    border: 4px solid var(--rainbeakerborders);
    border-radius: 0 0 5px 5px;
    background: 0 0;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    background-image: var(--grid-linesrainbucket);
    background-size: 5px 5px;
}

.second24hourguage {
    margin-left: 100px;
    margin-top: -79px;
}

#weather34rainbeaker2:before {
    left: -12px;
}

#weather34rainbeaker2:after {
    right: -12px;
}

#weather34rainwater2 {
    bottom: 0;
    width: 160px;
    max-height: 95px;
    overflow: hidden;
    border: 0;
    background-color: hsla(204, 100%, 40%, 60%);
}

#weather34rainbeaker3:before {
    left: -12px;
}

#weather34rainbeaker3:after {
    right: -12px;
}

#weather34rainwater3 {
    bottom: 0;
    width: 160px;
    max-height: 95px;
    overflow: hidden;
    border: 0;
    background-color: hsla(204, 100%, 40%, 60%);
}

rainman-tablet {
    position: absolute;
    display: flex;
    margin: 0 auto;
    font-size: 12px;
    font-family: verb;
    color: var(--body-text-dark);
    margin-top: 70px;
    margin-left: -60px;
}

raintoday2 {
    position: absolute;
    padding: 4px;
    color: var(--body-text-dark);
    border-radius: 3px;
    font-size: 46px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: 0;
    background: none;
    font-family: verb;
    margin-left: 70px;
    margin-top: 142px;

    text-shadow: none;
}

raintoday3,
raintoday4,
raintoday5 {
    position: absolute;
    padding: 4px;
    color: var(--body-text-dark);
    border-radius: 3px;
    font-size: 46px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: 0;
    background: none;
    font-family: verb;
    margin-left: 75px;
    margin-top: 142px;

    text-shadow: none;
}

raintoday4 {
    margin-left: 80px;
}

raintoday5 {
    margin-left: 70px;
}

todaysrain,
uvheading {
    position: absolute;
    font-size: 9px;
    margin-top: 12px;
    margin-left: -25px;
    z-index: 20;
    font-family: weathertext2;
    width: auto;
    max-width: 175px;
    background-color: none;
    line-height: 1;
    text-align: center;
    padding-left: 2px;
    padding-right: 2px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

volume,
volumeb,
volumer,
volumet,
volumew {
    position: absolute;
    font-size: 5.5pt;
    font-family: verb;
    display: block;
    margin-left: 2px;
    opacity: 0.7;
    text-shadow: none;
    color: var(--body-text-dark);
}

volumer,
volumet,
volumew {
    line-height: 8.5pt;
}

volumeb {
    line-height: 8.5pt;
}

volume {
    line-height: 9.75pt;
}

.rainrateextra1 {
    position: absolute;
    margin-top: -3px;
    margin-left: -70px;
}

.rainrateextra2 {
    position: absolute;
    margin-top: 65px;
    margin-left: 40px;
}

smalltrainunit2 {
    font-size: 0.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;
}

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

rainunitin,
rainunitmm {
    position: absolute;
    font-size: 0.6rem;
    color: var(--body-text-dark);
    margin-top: -41px;
    margin-left: 0;
    font-family: headingtext;
}

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

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

.directionwindrun {
    position: absolute;
    margin-left: 100px;
    margin-top: 50px;
    width: max-content;
    font-family: verb;
    font-size: 12px;
    color: var(--body-text-dark);
}

.suncanvasstyle {
    margin: 18.5px 13px 10px;
    left: 96.5px;
    position: absolute;
    height: 160px;
}

.daylightmoduleposition {
    position: absolute;
    margin-left: -170px;
    margin-top: -90px;
}

.weather34sunclock {
    border-radius: 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    background: 0;
    width: 160px;
    height: 160px;
    margin-left: 95px;
    margin-top: 15px;
    position: absolute;
    border: 4px solid #e6e8ef;
    transform-origin: 50% 50%;
}

.weather34sunclock div {
    position: absolute;
    -webkit-transform-origin: 49.6% 49.5%;
    transform-origin: 49.6% 49.5%;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.daylighttime,
.daylighthrsmin,
.daylightdaydark,
.daylightremain {
    display: flex;
    position: absolute;
    margin-left: -25px;
    margin-top: -17px;
    color: var(--body-text-dark);
    line-height: 1;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 26px;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    font-family: verb;
    z-index: 100;
}

.daylight4 tillrise {
    font-size: 9px;
}

.daylighthrsmin {
    font-size: 7.5px;
    margin-left: -15px;
    margin-top: 12px;
}

.daylightdaydark {
    font-size: 7.5px;
    margin-left: -17px;
    margin-top: -40px;
    font-size: 10px;
    color: lightslategray;
}

.daylightremain {
    font-size: 7.5px;
    margin-left: -22px;
    margin-top: 23px;
    font-size: 10px;
}

.sunmodule3 {
    position: relative;
    margin-left: -135px;
    color: var(--suntext);
    font-family: weathertext2;
    font-size: 9.5px;
    margin-top: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    box-shadow: var(--compass-shadow-sun);
    max-width: 120px;
}

.sunrise-block,
.sunset-block,
.sunset-block2 {
    display: block;
    background: 0;
    color: var(--body-text-dark);
    font-size: 0.7rem;
    line-height: 1;
    margin-top: -10px;
    position: absolute;
    margin-left: -5px;
    font-family: headingtext;
    text-align: left;
}

.sunset-block {
    margin-top: 20px;
}

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

.sunset-block3 {
    margin-top: -45px;
}

.sunrise-block3 {
    margin-top: -75px;
}

.sunposition-block3 {
    margin-top: -105px;
}

.sunset-block2 {
    margin-top: -45px;
    margin-left: -6px;
}

.modulecaptionsun {
    display: flex;
    position: absolute;
    margin-left: 25px;
    margin-top: -80px;
    color: var(--body-text-dark);
    background-color: var(--modulecaptions);
    font-family: Headingtext;
    width: 11em;
    height: 10px;
    font-size: 10px;
    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;
    z-index: 10;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

smallminutes {
    font-size: 7px;
    color: #1f2229;
    font-family: verb;
}

smallminutes1 {
    font-size: 7px;
    color: #1f2229;
    font-family: verb;
}

.weather34moonphasesvg {
    margin-left: 1.5px;
    margin-top: 17px;
}

.weather34moonphasesvg1 {
    display: flex;
    position: absolute;
    font-size: 0px;
    color: var(--body-text-dark);
    font-weight: 500;
    font-family: verb;
    margin-top: 38px;
    margin-left: 127px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 0;
    opacity: 1;
}

newphase {
    position: absolute;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    text-align: center;
    color: #fff;
    z-index: 170;
    line-height: 1;
    margin-top: -10px;
}

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

.indoordesc3 {
    margin-left: 260px;
    width: max-content;
}

.sundialcontainerdiv,
.sundialcontainerdiv2 {
    position: relative;
    top: 0;
    margin-left: 0px;
}

.todaysun {
    position: absolute;
    margin-left: -115px;
    margin-top: -52pt;
    font-family: verb;
    font-size: 10px;
    color: var(--body-text-dark);
}

.davisconsoleforecast {
    position: fixed;
    display: flexbox;
    width: 320px;
    max-width: fit-content;
    height: 20px;
    max-height: fit-content;
    margin-left: 470px;
    font-size: 9px;
    margin-top: -32px;
    padding: 3px;
    padding-left: 10px;
    line-height: 1;
    border-radius: 5px;
    border: 0;
    font-family: verb;
    background-color: hsla(223, 11%, 25%, 0.5);
    color: hsl(209, 31%, 69%);
}

.hilo{

    font-size:10px;
    position:absolute;
    margin-left:20px;
    margin-top:-40px;
    font-family:verb;
    color: var(--body-text-dark);
    
}


    .feelslike{
    font-size:10px;
    position:absolute;
    margin-left:20px;
    margin-top:-65px;
    font-family:verb;
    color: var(--body-text-dark);
    
}

        .annualmax{

            font-size:10px;
            position:absolute;
            margin-left:-130px;
            margin-top:5px;
            font-family:verb;
            color: var(--body-text-dark);
           
        }

            .annualmax2{

                font-size:10px;
                position:absolute;
                margin-left:-130px;
                margin-top:20px;
                font-family:verb;
                color: var(--body-text-dark);
               
            }
    



@media screen and (max-width: 800px) {
    .sunposition-block-sun {
        margin-top: 58px;
        margin-left: -135px;
    }

    .sunposition-block-sun2 {
        margin-top: 22px;
        margin-left: -140px;
    }

    .daylightmoduleposition {
        margin-left: -180px;
        margin-top: -90px;
    }

    .daylighttime,
    .daylighthrsmin,
    .daylightdaydark,
    .daylightremain {
        margin-left: -35px;
        margin-top: -17px;
    }

    .daylighthrsmin {
        margin-left: -22px;
        margin-top: 12px;
    }

    .daylightdaydark {
        margin-left: -25px;
        margin-top: -40px;
    }

    .daylightremain {
        margin-left: -30px;
        margin-top: 23px;
    }

    .todaysun {
        margin-left: -140px;
        margin-top: -51pt;
    }

    .sunrise-block-sun,
    .sunset-block-sun {
        margin-top: -67px;
        margin-left: 60px;
    }

    .chartdataiconsun {
        margin-left: 102px;
        margin-top: 50px;
    }

    .chartdataiconeq {
        margin-left: 217px;
        margin-top: -40px;
    }

    .navspace {
        margin-top: 0;
    }

    .chartdataiconair {
        right: -10px;
    }

    .chartdataiconair2 {
        right: -10px;
    }

    .chartdataiconair3 {
        right: -15px;
    }

    .weather34switcher {
        margin-left: 40px;
    }

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

    bottomtoolbarspace {
        margin-left: 125px;
    }

    bottomtoolbarspacecharts {
        margin-left: 60px;
    }

    .showicon,
    .davisconsoleforecast,
    .sunriset-set,
    .version,
    aurora,
    .nav-bottom .aurora,
    chartpage,
    .clock34 {
        display: none;
    }

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

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

    weather34-rightfootericons {
        margin-left: 70px;
    }

    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: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 2fr));
        gap: 0px;
        grid-gap: 0px;
        column-gap: 0px;
    }

    li,
    li2,
    lih,
    lid,
    liwindavg,
    liwind,
    lirain,
    lirainrate,
    liuv,
    libaro,
    lisolar,
    lisun,
    liaq,
    liair,
    lidirect {
        align-items: center;
        display: flex;
        justify-content: center;
        min-width: 300px;
        max-width: 300px;
        padding: 0;
        height: 185px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 3px;
        color: var(--body-text-dark);
        background-color: var(--modules);
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -ms-border-radius: 0px;
        -o-border-radius: 0px;
        border: 1px solid hsla(216, 4%, 25%, 70%);
        border-bottom: 5px solid hsla(216, 4%, 25%, 70%);
        background-image: var(--grid-lines);
        background-size: 5px 5px;
        border: 1px solid var(--modulesborderside);
        border-bottom: 5px solid var(--modulesborder);
    }

    lidirect {
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
    }

    lidir {
        display: none;
    }

    li3 {
        align-items: center;
        display: flex;
        justify-content: center;
        min-width: 300px;
        max-width: 300px;
        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 {
        margin-left: 0;
    }

    li4 {
        display: none;
    }

    body {
        width: 650px;
    }

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

    .nav-top {
        position: relative;
        max-width: 635px;
        margin-left: 3px;
    }

    .nav-bottom {
        position: relative;
        max-width: 635px;
        margin-left: 0px;
    }

    .weather34-tablet {
        padding: 0;
    }

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

    .weather34-menuside {
        overflow-y: scroll;
    }
}

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

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

windunittablet {
    left: 17px;
}

@media screen and (max-width: 640px) {
    .weather34-open-menu button {
        position: relative;
        background-color: transparent;
        color: #c8d4df;
        font-size: 12px;
        padding: 1px;
        margin-top: -5pt;
        cursor: pointer;
        margin-left: 10px;
        line-height: 1;
        font-family: verb;
        width: max-content;
    }


    .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: 0px;
    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;


  }

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

    .menulayout {
        margin-bottom: 10px;
    }

    .menuunits {
        margin-top: 15px;
    }

    html {
        overflow-x: visible;
    }

    .weather34-menuside {
        overflow-y: scroll;
        overflow-y: visible;
    }

    .weather34switcher {
        margin-left: 50px;
    }

    bottomtoolbarspace {
        margin-left: 75px;
    }

    bottomtoolbarspacecharts {
        margin-left: 60px;
    }

    bottomtoolbarspace1 {
        margin-left: 5px;
    }

    .desktoplink4,
    .footericons,
    .showicon4,
    .sunriset-set,
    li3,
    monthchart {
        display: none;
    }

    .desktoplink5 {
        margin-top: -12px;
    }

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

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

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

    li,
    li2,
    lih,
    lid,
    liwindavg,
    liwind,
    lirain,
    lirainrate,
    libaro,
    liuv,
    lisolar,
    lisolar,
    lisun,
    liaq,
    liair,
    lidir,
    lidirect {
        display: flex;
        margin-bottom: 0;
        min-width: 310px;
        max-width: 310px;
        border: 1px solid var(--modulesborderside);
        border-bottom: 5px solid var(--modulesborder);
        color: var(--body-text-dark);
        background-color: var(--modules);
        height: 185px;
    }

    li2 {
        margin-left: 3px;
        margin-bottom: 1px;
    }

    liwind {
        margin-bottom: 0px;
        color: var(--body-text-dark);
        background-color: var(--modules);
        border: 1px solid var(--modulesborderside);
        border-bottom: 5px solid var(--modulesborder);
    }

    lidirect {
        align-items: center;

        justify-content: center;
        display: flex;
        margin-bottom: 0;
        min-width: 310px;
        max-width: 310px;
        padding: 0;
        height: 185px;
        -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;
        background-image: var(--grid-lines);
        background-size: 5px 5px;
        border: 1px solid var(--modulesborderside);
        border-bottom: 5px solid var(--modulesborder);
    }

    lidir {
        display: none;
    }

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

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

    .nav-bottom {
        margin-bottom: 30px;
    }

    .nav-bottom a {
        padding-top: 17px;
        padding-left: 1px;
        padding-right: 1px;
        top: 5px;
        color: #d5e1eb;
    }

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

    .nav-top {
        top: 0;
        padding-top: 10px;
        width: 320px;
        height: 30px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        color: #98b1c9;
    }

    .weather34-top-menu a {
        line-height: 0.5;
        padding-left: 5px;
        float: none;
        text-align: left;
        width: 160px;
        justify-content: left;
        height: 12px;
        padding-bottom: 5px;
        padding-top: 10px;
        margin-bottom: -10px;
        margin-left: 10px;

        color: #c8d4df;
    }

    .desktoplink2 {
        margin-right: 45px;
        float: right;
        margin-top: -20px;
        color: #c8d4df;
    }

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

    .smallmoduleinfo {
        margin-left: 270px;
    }

    .chartdataicon {
        right: 15px;
    }

    .chartdatarainicon {
        position: relative;
        float: right;
        right: -120px;
        top: 55px;
        cursor: pointer;
        background: 0 0;
        width: 25px;
        height: 21px;
        padding: 2px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        opacity: 0.6;
    }

    .chartdatadirectionicon {
        margin-left: 116px;
    }

    windunittablet {
        left: 20px;
    }
}

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: 0.8;
    font-size: 0.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;
    margin-top: 25px;
    color: var(--body-text-dark);
    font-size: 55px;
    display: flex;
    justify-content: left;
    align-items: left;
    align-content: left;
    font-family: verb;
    margin-left:-135px;
    padding:5px;
    border-radius:20px;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    -ms-border-radius:20px;
    -o-border-radius:20px;
    background-color: var(--tempbackground);
}
.card{margin-top:-20px;margin-bottom:5px}

.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: 0.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%, 0.6);
    margin-top: 15px;
    margin-left: 40px;
    max-width: 300px;
}

.thedate4 {
    position: absolute;
    display: block;
    background: 0;
    color: hsla(214, 29%, 91%, 0.6);
    font-size: 0.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: 0.7;
    visibility: visible;
    display: none;
}

[data-title]:after {
    content: attr(data-title);
    background: var(--menubackgroundlinks);
    color: #fff;
    font-size: 9px;
    position: absolute;
    padding: 3px;
    bottom: 3em;
    left: -5px;
    line-height: 1.2;
    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;
    font-family: verb;
}

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

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

[data-lux]:after {
    content: attr(data-lux);
    background-color: var(--temp20-25);
    color: #fff;
    font-size: 9px;
    position: absolute;
    padding: 3px;
    bottom: 3.5em;
    left: 90px;
    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;
    font-family: verb;
    width: 115px;
    text-align: center;
}

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

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

[data-rainrate]:after {
    content: attr(data-rainrate);
    background-color: var(--alternative-blue);
    color: #fff;
    font-size: 9px;
    position: absolute;
    padding: 3px;
    bottom: 3.5em;
    left: 90px;
    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;
    font-family: verb;
    width: 115px;
    text-align: center;
}

[data-rainrate] {
    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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 2px;
    bottom: -65px;
    left: -170pt;
    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: 0.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: 0.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: 0.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: 0.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-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: 0.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-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: 0.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-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: 0.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-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: 0.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-uv0] {
    position: relative;
    left: -5px;
}

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

[data-good]:after {
    content: attr(data-good);
    background-color: var(--temp5-10);
    color: #fff;
    font-size: 9px;
    position: absolute;
    padding: 5px;
    bottom: 0.3em;
    left: -45pt;
    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-good] {
    position: relative;
    left: -5px;
}

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

[data-moderate]:after {
    content: attr(data-moderate);
    background-color: var(--temp10-15);
    color: #fff;
    font-size: 9px;
    position: absolute;
    padding: 5px;
    bottom: 0.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-moderate] {
    position: relative;
    left: -5px;
}

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

[data-uhfs]:after {
    content: attr(data-uhfs);
    background-color: var(--temp20-25);
    color: #fff;
    font-size: 9px;
    position: absolute;
    padding: 5px;
    bottom: 0.3em;
    left: -45pt;
    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-uhfs] {
    position: relative;
    left: -5px;
}

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

[data-unhealthy]:after {
    content: attr(data-unhealthy);
    background-color: var(--temp25-30);
    color: #fff;
    font-size: 9px;
    position: absolute;
    padding: 5px;
    bottom: 0.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-unhealthy] {
    position: relative;
    left: -5px;
}

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

[data-veryunhealthy]:after {
    content: attr(data-veryunhealthy);
    background-color: var(--temp30-35);
    color: #fff;
    font-size: 9px;
    position: absolute;
    padding: 5px;
    bottom: 0.3em;
    left: -45pt;
    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-veryunhealthy] {
    position: relative;
    left: -5px;
}

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

[data-extreme]:after {
    content: attr(data-extreme);
    background-color: var(--temp40-45);
    color: #fff;
    font-size: 9px;
    position: absolute;
    padding: 5px;
    bottom: 0.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-extreme] {
    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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: 0.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: #3d444e;
    color: #c4d9ec;
    font-size: 9px;
    position: absolute;
    padding: 5px;
    bottom: 0.4em;
    left: -30pt;
    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;
    text-transform: uppercase;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
        0 6px 5px -5px var(--moduleoutline), 0 6px 5px -5px var(--moduleoutline),
        0 0 5px -5px var(--moduleoutline), 0 0 0 0 #000, 0 0 0 0 #000;
}

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

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

[data-bottommodules]:after {
    content: attr(data-bottommodules);
    background-color: #3d444e;
    color: #c4d9ec;
    font-size: 9px;
    position: absolute;
    padding: 2px;
    bottom: 0.1em;
    left: -42pt;
    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;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1),
        0 6px 5px -5px var(--moduleoutline), 0 6px 5px -5px var(--moduleoutline),
        0 0 5px -5px var(--moduleoutline), 0 0 0 0 #000, 0 0 0 0 #000;
}

[data-bottommodules] {
    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: 0.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: 0.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: 0.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: 0.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;
}

[data-maxmindata]:hover:after {
    opacity: 1;
    visibility: visible;
    box-shadow: none;
}

.button-dial-label-tablet a {
    box-shadow: none;
}

[data-maxmindata]:after {
    content: attr(data-maxmindata);
    background-color: #3d444e;
    color: #c4d9ec;
    font-size: 9px;
    position: relative;
    padding: 5px;
    bottom: 2em;
    left: 0;
    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;
    font-family: verb;
    text-transform: none;
    z-index: 100;
    box-shadow: none;
    border: 0;
}

[data-maxmindata] {
    position: relative;
    left: -5px;
    z-index: 100;
    box-shadow: none;
}

.nav-bottom .version {
    top: 10px;
    color: #98b1c9;
    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: verb;
    font-size: 0.8em;
    right: 1px;
    color: #c8d4df;
}

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;
    background-color: transparent;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    height: 27px;
    width: 30px;
    top: 0px;
    color: #98b1c9;
    margin-left: 70px;
}

.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;
    color: #9498a1;
}

tempseperator {
    font-family: weathertext3;
}

windunittablet {
    position: relative;
    text-transform: uppercase;
    color: #1f2229;
    margin-left: -55px;
    top: 10px;
}

.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: -120px;
    margin-top: -15pt;
    font-family: verb;
    font-size: 18px;
    color: var(--body-text-dark);
}

.todayswindmax unit {
    
    font-size: 12px;
   
}

.todaysair,
.todaysair1 {
    position: absolute;
    margin-left: 10px;
    margin-top: 10pt;
    font-family: verb;
    font-size: 11px;
    color: var(--body-text-dark);
}

.todaysbftmax {
    margin-top: 23pt;
}

.todaysuvmax {
    margin-top: -14pt;
}

.todayssolarmax {
    margin-left: 235px;
    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;
    color: var(--body-text-dark);
}

.todayswindavg {
    position: absolute;
    margin-left: -140px;
    margin-top: -58pt;
    font-family: verb;
    font-size: 15px;
    color: var(--body-text-dark);
}

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

    color: var(--body-text-dark);
}

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: 18px;
    width: 300px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: verb;
    margin-left: 10pt;
    margin-top: -16pt;
    line-height: 0.9;
    margin-bottom: 0;
    color: var(--body-text-dark);
}

.infoicon-wrapper {
    position: absolute;
}

wu30 {
    color: var(--temp30-35);
}

wu25 {
    color: var(--temp25-30);
}

wu20 {
    color: var(--temp20-25);
}

wu15 {
    color: var(--temp15-20);
}

wu12 {
    color: var(--temp10-15);
}

wu5 {
    color: var(--temp5-10);
}

deg0 {
    color: #00acbc;
}

deg5 {
    color: #9abb2e;
}

deg12 {
    color: #fcaf45;
}

deg15 {
    color: #f0a53c;
}

deg20 {
    color: #f29316;
}

deg25 {
    color: #e64922;
}

deg30 {
    color: #cc504b;
}

deg35 {
    color: #ab4f49;
}

deg40 {
    color: #994b8f;
}

.rainlast24 a:hover,
.tempman-tablet a:hover,
.todaysbftmax a:hover,
.todayssolarmax a:hover,
.todayssolarmax1 a:hover,
.todaysuvmax a:hover,
.todayswindmax a:hover,
.winddirectiontrend a:hover,
tempman-tablet a:hover {
    box-shadow: none;
}

::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-bg);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

barometervalue {
    color: var(--barometervalue);
}

.heatcirclerain {
    margin-top: -24px;
    margin-left: 120px;
}

.heatcirclerain1 {
    position: absolute;
    margin-top: 20px;
    margin-left: 50px;
    width: 300px;
    max-width: 130px;
}

.heatcirclewind1 {
    position: absolute;
    margin-top: 50px;
    margin-left: -230px;
    max-width: 130px;
}

.rainrateextra {
    position: absolute;
    margin-top: 110px;
    margin-left: 149px;
}

.rainratebar,
.sunratebar {
    display: -webkit-box;
    display: flex;
    width: 180px;
    overflow: hidden;
    font-family: weathertext2;
    background: hsla(206, 19%, 39%, 0.7);
    background-size: 5px 1px;
    border: 0;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    -webkit-border-top-right-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 2px;
    margin-top: 2px;
}

.rainratebar,
.weather34ratebar,
.sunratebar {
    height: 10px;
    color: #aeb6bf;
}

.weather34ratebar {
    background-color: hsla(186, 100%, 34%, 0.6);
}

.weather34sunratebarbottom2::before {
    position: absolute;
    font-size: 9px;
    color: var(--barometerbar2);
    top: 5px;
    text-transform: lowercase;
}

smallrainunit {
    font-size: 0.7em;
}

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

valuetextheading5 {
    position: absolute;
    color: var(--body-text-dark);
    font-family: verb;
    font-size: 0.5em;
    text-align: left;
    left: 0px;
    top: -10px;
    width: 220px;
    word-spacing: 145px;
}

.menuunits {
    margin-top: 20px;
    margin-bottom: 0;
}

.menulayout {
    margin-top: 20px;
    margin-bottom: -7px;
}

.menulayout a {
    font-family: verb;
    display: inline;
    font-size: 12px;
    padding: 5px;
    color: #c8d4df;
}

.menuunits a {
    font-family: verb;
    display: inline;
    font-size: 11px;
    padding: 5px;
    color: #c8d4df;
}

menuhome {
    color: #c8d4df;
}

menuhome:hover {
    color: #fff;
}

weather34-list {
    position: absolute;
    font-family: verb;
    font-size: 0.8em;
    border: 1px solid var(--averageborders);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    width: max-content;
    text-align: center;
    padding: 4px;
}

windunittabletaverage {
    text-transform: uppercase;
    margin-top: 7px;
    vertical-align: middle;
    font-size: 7px;
    font-family: verb;
    opacity: 0.7;
}

windunittabletdavg,
windunittabletdavg2,
windunittabletdavg3 {
    margin: 0 auto;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 7px;
    font-family: verb;
    opacity: 0.7;
    text-align: center;
    line-height: 0.8;
}

.charts-container *,
.charts-container *:before,
.charts-container *:after {
    box-sizing: border-box;
    font-family: verb;
}

.set-size {
    font-size: 9em;
}

.charts-container:after {
    clear: both;
    content: "";
    display: table;
}

.airquality34-wrapper {
    height: 1em;
    width: 1em;
    float: left;
    margin: 15px;
    position: relative;
}

.airquality34-wrapper:nth-child(3n + 1) {
    clear: both;
}

.airquality34-wrapper .pie {
    height: 100%;
    width: 100%;
    clip: rect(0, 1em, 1em, 0.5em);
    left: 0;
    position: absolute;
    top: 0;
}

.airquality34-wrapper .pie .half-circle {
    height: 100%;
    width: 100%;
    border: 0.1em solid var(--green);
    border-radius: 50%;
    clip: rect(0, 0.5em, 1em, 0);
    left: 0;
    position: absolute;
    top: 0;
}

.airquality34-wrapper .label {
    background: hsla(225, 10%, 23%, 0.8);
    border-radius: 50%;
    bottom: 0.4em;
    color: #ecf0f1;
    cursor: default;
    display: block;
    font-size: 0.25em;
    left: 0.25em;
    line-height: 2.8em;
    position: absolute;
    right: 0.4em;
    text-align: center;
    top: 0.4em;
}

.airquality34-wrapper .label .smaller {
    color: #bdc3c7;
    font-size: 0.25em;
    padding-bottom: 20px;
    vertical-align: super;
}

.airquality34-wrapper .shadow {
    height: 100%;
    width: 100%;
    border: 0.1em solid #bdc3c7;
    border-radius: 50%;
}

.airquality34-wrapper.style-2 .label {
    background: none;
    color: #7f8c8d;
}

.airquality34-wrapper.style-2 .label .smaller {
    color: #bdc3c7;
}

.airquality34-wrapper.progress-30 .pie .half-circle {
    border-color: var(--green);
}

.airquality34-wrapper.progress-30 .pie .left-side {
    transform: rotate(108deg);
}

.airquality34-wrapper.progress-30 .pie .right-side {
    display: none;
}

.airquality34-wrapper.progress-60 .pie {
    clip: rect(auto, auto, auto, auto);
}

.airquality34-wrapper.progress-60 .pie .half-circle {
    border-color: #9b59b6;
}

.airquality34-wrapper.progress-60 .pie .left-side {
    transform: rotate(216deg);
}

.airquality34-wrapper.progress-60 .pie .right-side {
    transform: rotate(180deg);
}

.airquality34-wrapper.progress-90 .pie {
    clip: rect(auto, auto, auto, auto);
}

.airquality34-wrapper.progress-90 .pie .half-circle {
    border-color: #e67e22;
}

.airquality34-wrapper.progress-90 .pie .left-side {
    transform: rotate(324deg);
}

.airquality34-wrapper.progress-90 .pie .right-side {
    transform: rotate(180deg);
}

.airquality34-wrapper.progress-45 .pie .half-circle {
    border-color: #1abc9c;
}

.airquality34-wrapper.progress-45 .pie .left-side {
    transform: rotate(162deg);
}

.airquality34-wrapper.progress-45 .pie .right-side {
    display: none;
}

.airquality34-wrapper.progress-75 .pie {
    clip: rect(auto, auto, auto, auto);
}

.airquality34-wrapper.progress-75 .pie .half-circle {
    border-color: #8e44ad;
}

.airquality34-wrapper.progress-75 .pie .left-side {
    transform: rotate(270deg);
}

.airquality34-wrapper.progress-75 .pie .right-side {
    transform: rotate(180deg);
}

.airquality34-wrapper.progress-95 .pie {
    clip: rect(auto, auto, auto, auto);
}

.airquality34-wrapper.progress-95 .pie .half-circle {
    border-color: 0;
}

.airquality34-wrapper.progress-95 .pie .left-side {
    transform: rotate(342deg);
}

.airquality34-wrapper.progress-95 .pie .right-side {
    transform: rotate(180deg);
}

.airquality34-wrapper--solid {
    border-radius: 50%;
    overflow: hidden;
}

.airquality34-wrapper--solid:before {
    border-radius: 0 100% 100% 0/50%;
    content: "";
    display: block;
    height: 100%;
    margin-left: 50%;
    transform-origin: left;
}

.airquality34-wrapper--solid .label {
    background: transparent;
}

.airquality34-wrapper--solid.progress-65 {
    background: linear-gradient(to right, #e67e22 50%, #34495e 50%);
}

.airquality34-wrapper--solid.progress-65:before {
    background: #e67e22;
    transform: rotate(126deg);
}

.airquality34-wrapper--solid.progress-25 {
    background: linear-gradient(to right, #9b59b6 50%, #34495e 50%);
}

.airquality34-wrapper--solid.progress-25:before {
    background: #34495e;
    transform: rotate(-270deg);
}

.airquality34-wrapper--solid.progress-88 {
    background: linear-gradient(to right, #3498db 50%, #34495e 50%);
}

.airquality34-wrapper--solid.progress-88:before {
    background: #3498db;
    transform: rotate(43.2deg);
}

* GDPR CONTENT STYLE */ .content {
    max-width: 400px;
    margin: 0 auto;
    color: #3d464f;
    position: fixed;
    top: 20px;
}

/* ROUND SWITCH CHECKBOX */

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

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

.checkboxSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #34495b;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.checkboxSlider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
}

input:checked+.checkboxSlider {
    background-color: var(--green);
}

input:focus+.checkboxSlider {
    box-shadow: 0 0 1px var(--green);
}

input:checked+.checkboxSlider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* round sliders */
.checkboxSlider.round {
    border-radius: 34px;
}

input:checked+.checkboxSlider::after {
    position: absolute;
    content: "Yes";
    font-size: 12px;
    margin-left: 2px;
    margin-top: 10px;
}

.checkboxSlider.round:before {
    border-radius: 50%;
}

/* COOKIE PAGE */

.cookieClose {
    text-decoration: none;
    float: right;
    font-size: 28px;
    font-family: verb;
    color: #f3f4f9;
}

.cookieDialog {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1010;
    width: 100%;
    height: 100%;
    display: none;
    color: #f3f4f9;
}

.cookieOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1009;
    width: 100%;
    height: 100%;
    background: NONE;
    display: none;
    color: #f3f4f9;
}

.cookieIn {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #f3f4f9;
}

.cookieBox h1,
h3,
h5,
p,
td,
tr {
    font-size: 11px;
    font-weight: 500;
}

.cookieBox h2 {
    font-size: 14px;
    font-weight: 500;
}

.cookieBox {
    position: absolute;
    font-family: verb;
    background: #1f2229;
    border-radius: 10px;
    padding: 10px;
    max-width: 600px;
    box-shadow: none;
    text-align: left;
    color: #f3f4f9;
    border: #98b1c9 1px solid;
    float: right;
    bottom: 20px;
    margin-left: 5%;
}

.cookieDialog td {
    padding-right: 20px;
    color: #f3f4f9;
}

.cookieOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1009;
    width: 100%;
    height: 100%;
    background: none;
    display: none;
    color: #f3f4f9;
}

/* cookie page - buttons */

.cookieNoticeButton.gray {
    color: #fff;
    background: var(--orange);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    box-shadow: none;
    font-family: verb;
}

.cookieNoticeButton.gray:hover {
    color: #fff;
    background: var(--green);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    box-shadow: none;
    font-family: verb;
}

.cookieNoticeButton.green {
    color: #fff;
    background: var(--green);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    box-shadow: none;
    font-family: verb;
}

.cookieNoticeButton.green:hover {
    background: var(--orange);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    box-shadow: none;
    font-family: verb;
}

input[type="text"] {
    padding: 5px;
    border: 2px solid #ccc;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type="text"]:focus {
    border-color: #fff;
}

input[type="submit"] {
    padding: 5px 15px;
    background: #ccc;
    border: 0 none;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
}

.cookie {
    background-color: var(--eu-notice);
    bottom: 110px;
    color: #fff;
    position: fixed;
    max-width: 60%;
    min-width: 40%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem 1rem 0;
    display: flex;
    font-weight: 100;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    transition: transform 0.3s ease;
    transform: translate(0, 230px);
    overflow-y: scroll;
}

.cookie .content {
    flex: 0 1 calc(91.1%);
    padding: 0 0 1rem;
}

.cookie .agreement {
    flex: 0 1 calc(7.2%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie button {
    background-color: var(--eu-notice--information);
    border-color: var(--eu-notice--information);
    border-style: solid;
    border-radius: 5px;
    color: var(--eu-notice--text);
    cursor: pointer;
    padding: 1rem;
    width: auto;
}

.cookie button:hover {
    background-color: var(--eu-color--white);
    color: var(--eu-color--black);
}

.cookie a {
    text-decoration: underline;
    color: white;
}

.cookie h2 {
    margin: 0;
}

/* cookie pop up. */
.show {
    transform: translate(0, 110px);
}

.badge-icon,
.badge-text {
    padding: 1.5rem;
    float: left;
    -webkit-box-flex: 1;
    flex: 1;
}

.badge {
    display: flex;
    margin-bottom: 1.5rem;
    margin-right: 1.5rem;

    color: var(--color-light);

    min-width: var(--badge-size);
    border-radius: 5px;
    box-shadow: 0px 0px 60px var(--color-shade);

    overflow: hidden;
}

.badge-icon {
    background: url("https://upload.wikimedia.org/wikipedia/commons/9/93/European_stars.svg") var(--color-primary) no-repeat center center;
    background-size: contain;
    max-width: calc(var(--badge-size) / 5);
}

.badge-text {
    font: normal small-caps normal 16px/1.5 Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    line-height: 1;
    text-align: left;
}

.badge[data-color=""] .badge-text,
.badge[data-color="default"] .badge-text {
    color: var(--color-light);
    background-color: var(--color-primary);
}

.badge[data-color="light"] .badge-text {
    color: var(--color-dark);
    background-color: var(--color-light);
}

.badge[data-color="dark"] .badge-text {
    color: var(--color-light);
    background-color: var(--color-dark);
}

/*The body of the lock*/
.lock {
    display: block;
    width: var(--lock-width);
    height: calc(var(--lock-width) * 0.75);

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border: var(--lock-stroke) solid var(--lock-color);
    border-radius: 5px;
    position: relative;

    transition: all 0.1s ease-in-out;
}

/*The keyhole*/
.lock:after {
    content: "";
    display: block;
    background: var(--lock-color);

    width: var(--lock-stroke);
    height: calc(var(--lock-stroke) * 3);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    transition: all 0.1s ease-in-out;
}

/*The arm of the lock*/
.lock:before {
    content: "";
    display: block;
    width: calc(var(--lock-width) / 2);
    height: calc(var(--lock-width) / 3);

    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);

    border: var(--lock-stroke) solid var(--lock-color);
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom: 0;
}