body {
    background-color: black !important;
    background-size: cover;
    color: white !important;
    height: 100% !important;
    touch-action: manipulation;
}
body, html {
    height: 100% !important;
    overflow-x: hidden; 
    overflow-y:hidden;
}
footer {
    background-color: #004275;
    position:fixed;
    bottom:0;
    left: 0;
    width: 100%;
    height: 44px;
    padding-top: 2px;
    padding-bottom: 2px;
    white-space: nowrap;
}
footer, footer div, footer nav {
    white-space: nowrap;
}
header {
    background-color: #000;
    position:fixed;
    top:0;
    left: 0;
    color: white;
    width: 100%;
    height: 25px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px;
    font-size: 10pt;
}
header .navbar, header .nav-container {
    height: 25px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
main {
    margin-top: 25px;
    margin-bottom: 44px;
    background-color: #222;
    color: white !important;
    height: calc(100% - 44px - 25px);
    width: 100%;
    position:relative;
    overflow-y: auto;
    z-index:2;
}
body, footer, header {
    z-index:6;
}
.hover-footer {
    cursor: default;
}
.hover-footer:hover {
    background-color: #195583;
}
.hover-header {
    cursor: default;
}
.hover-header:hover {
    background-color: #E81123;
}
.hover-not {
    cursor: default;
}
.hover-not:hover {
    background-color: #2596ED;
}
.hover-menu {
    cursor: default;
}
.hover-menu:hover {
    background-color: #196AA8;
}
#search-footer, #search-footer input, #search-footer span {
    background-color: #336790;
}

#welcome {
    transition: all 0.3s;
    background-color: black;
    background-image: url("../img/22.png");
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.3s;
}
#menuCollapse {
    background-color: #195583;
}
#notificationCollapse {
    background-color: #195583;
}
#searchCollapse {
    background-color: #195583;
}
#clockCollapse {
    background-color: #000;
    color: white;
    position:fixed; 
    bottom: 44px; 
    right: 0; 
    padding: 15px;
    width: 300px; 
    max-width: 100% !important;
}
#weatherCollapse {
    background-color: #000;
    color: white;
    position:fixed; 
    bottom: 44px; 
    right: 0; 
    padding: 15px;
    width: 400px; 
    max-width: 100% !important;
}
#placeCollapse {
    background-color: #000;
    color: white;
    position:fixed; 
    bottom: 44px; 
    right: 0; 
    padding: 15px;
    width: 400px; 
    max-width: 100% !important;
}
#namedayCollapse {
    background-color: #000;
    color: white;
    position:fixed; 
    bottom: 44px; 
    right: 0; 
    padding: 15px;
    width: 200px; 
    max-width: 100% !important;
}
#demonCollapse {
    background-color: #000;
    color: white;
    position:fixed; 
    bottom: 44px; 
    right: 0; 
    padding: 15px;
    width: 400px; 
    max-width: 100% !important;
}
body {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.notification-single-div {
    width:100%;
    background-color:#196AA8;
    margin:4px 0;
}
.notification-close {
    font-size: 25px; 
    height: 25px; 
    width: 25px; 
    float: right;
}
.notification-close i {
    margin:0;
}
.notification-row {
    padding: 0 20px; 
    padding-bottom:20px;
}
.notification-title {
    margin:0;
}
.notification-desc {
    line-height:1;margin-top:10px;
}
.notification-image {
    width: 100%;
    border-radius:50%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center top;
}
.text-bold {
    font-weight: 700 !important;
}

.windows-apps-image {
    border-radius: 50%; 
    width: 32px; 
    height: 32px;
}
.windows-apps-header {
    margin:0; 
    margin-bottom: 5px; 
    margin-top: 15px;
    margin-left: 10px;
    font-size: 12pt;
}
.windows-apps-table td {
    text-align: left;
    vertical-align: middle;
}
tr.hover-menu td {
    padding: 5px;
}
.windows-left-menu {
    width:40px; 
    vertical-align: bottom; 
    text-align:center;
    font-size: 16pt;
}
.windows-right-menu {
    vertical-align: bottom; 
    padding-left: 10px;
    padding-right: 0px !important;
}
.user-icons-menu {
    height: 50px; 
    width: 50px;
    cursor: pointer;
}
.user-icons-menu-icon {
    position:relative; 
    top: 8px; 
    z-index: 2;
}
#menuCollapse {
    position:fixed; 
    bottom: 44px; 
    left: 0; 
    padding: 5px;
}
#notificationCollapse {
    position:fixed; 
    bottom: 44px; 
    right: 0; 
    padding: 5px;
    width: 400px; 
    max-width: 100% !important;
}
#searchCollapse {
    position:fixed; 
    bottom: 44px; 
    left: 0; 
    padding: 5px;
    width: 400px; 
    max-width: 100% !important;
}

nav {
    height:100%;
}
.nav-it {
    padding-top: 2px !important;
}
.nav-container {
    height:100%; 
    width: 100%; 
    margin: 0; 
    padding: 0 !important;
}
.start-icon-div {
    height:40px; 
    width:50px;
    margin-right: 0px;
}
#search-footer {
    height:44px; 
    color:#F8FAFB; 
    cursor: text; 
    width: 300px;
}
#basic-addon1 {
    background-color: #336790; 
    border:none; 
    border-radius: 0; 
    height:40px; 
    color:#F8FAFB;
}
#basic-addon1-input {
    height:40px;
    background-color: #336790; 
    border:none; 
    border-radius: 0; 
    height:100%; 
    color:#F8FAFB !important;
}
#footer-d-flex {
    height: 100%;
}

#nameday-div-1 {
    margin-left: 20px; 
    height:100%;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    margin:0;
    text-align:center;
    line-height:1.3;
    font-size: 11pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#nameday-div-2 {
    height:100%;
    padding-top: 10px !important;
    padding-bottom: 2px !important;
    margin:0;
    text-align:center;
    line-height:1;
    font-size: 16pt;
    white-space: nowrap;
    overflow: hidden;
    color: #42BDFF;
}
footer, footer nav {
    position:fixed;
    bottom:0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
footer, footer nav, footer .nav-container, footer .start-icon-div, footer #navbarSupportedContent, footer #footer-d-flex, footer .navbar-nav {
    max-height: 44px !important;
    min-height: 44px !important;
}
@media only screen and (min-width: 1400px) {
    #nameday-div-1, #nameday-div-2 {
        min-width: 100px !important; 
        max-width: 400px !important; 
    }
    #search-footer {
        width: 300px;
    }
}
@media only screen and (min-width: 1100px) and (max-width: 1399px) {
    #nameday-div-1, #nameday-div-2 {
        min-width: 100px !important; 
        max-width: 300px !important; 
    }
    #search-footer {
        width: 200px;
    }
}
@media only screen and (min-width: 800px) and (max-width: 1099px) {
    #nameday-div-1, #nameday-div-2 {
        min-width: 100px !important; 
        max-width: 200px !important; 
    }
    #search-footer {
        width: 150px;
    }
}
@media only screen and (max-width: 799px) {
    #nameday-div-1, #nameday-div-2 {
        min-width: 40px !important; 
        max-width: 40px !important; 
    }
    #search-footer {
        width: 120px;
    }
}
#place-div {
    margin-left: 20px; 
    min-width: 50px !important; 
    height:100%;
    padding:0;
    margin:0;
    text-align:center;
    font-size: 16pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#place-div-2 {
    width: 100%; 
    height:100%;
    padding:4px 10px;
    margin:0;
    text-align:center;
    font-size: 16pt;
    white-space: nowrap;
    overflow: hidden;
}
#demon-div {
    margin-left: 20px; 
    min-width: 50px !important; 
    height:100%;
    padding:0;
    margin:0;
    text-align:center;
    font-size: 16pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#demon-div-2 {
    width: 100%; 
    height:100%;
    padding:3px 10px;
    margin:0;
    text-align:center;
    font-size: 16pt;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#places-in-distance {
    font-size: 11pt;
    max-width:300px;
    background-color: #222;
    border-color: #444;
    color: white;
}
#places-all {
    font-size: 9pt;
    max-width:200px;
    background-color: #222;
    border-color: #444;
    color: white;
}
#nameday-span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#weather-div {
    height:100%;
    padding:0;
    margin:0;
    text-align:right;
    line-height:1.3;
    font-size: 13pt;
    min-width: 40px;
}
#weather-div td {
    padding:0;
}
#weather {
    margin:auto;
}
#weather-table-left {
    vertical-align:middle; 
    text-align: right;
}
#weather-table-right {
    vertical-align:middle; 
    text-align: left; 
    padding-right:0px;
}
#weather-table-warning {
    vertical-align:middle; 
    text-align: left; 
    padding-right:0px;
}
#window-time-div {
    margin-left: 20px; 
    width:100px !important; 
    min-width: 100px !important;
    height:100%;
    padding:0;
    margin:0;
    text-align:center;
    line-height:1.3;
    font-size: 11pt;
}
#notification-div {
    height:100%; 
    width:50px !important; 
    min-width:50px !important; 
    position:relative;
    vertical-align: middle;
    text-align:center;
}
#notification-button {
    border:none; 
    height:100%; 
    width: 40px; 
    background: transparent; 
    position: relative; 
    left: -10px;
}
#notification-button-image {
    margin-right:10px;
    height:28px; 
    width: 28px;
}

#welcome {
    position:absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 100%;
}
#welcomeDate {
    position: absolute; 
    left: 50px; 
    bottom: 50px;
}
#splash-time {
    font-size:64pt;
}
#welcomeText h1 {
    margin-top: 20px;
}
#login, #register {
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
    width: 100%; 
    height: 100%;
    font-size: 1.8rem;
}
#login input {
    font-size: 1.8rem;
}
#register input {
    font-size: 1.2rem;
}
#login-div, #register-div {
    width: 480px; 
    margin-left:auto; 
    margin-right: auto; 
    color: white; 
    height: 200px; 
    position: relative; 
    top: min(200px, calc(50% - 100px)); 
    z-index: 6;
}
#register-div {
    font-size: 1.2rem;
    height: 550px;
    top: max(50px, calc(50% - 300px)); 
}
#login-submit, #register-submit {
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px;
}
.modal {
    color: black;
}
footer input, footer textarea, footer button {
    color: white !important;
}
#clock-clock, #clock-date, #clock-date2, #clock-remaining-a-1, #clock-remaining-b-1, #clock-remaining-a-2, #clock-remaining-b-2 {
    margin:0;
    padding:0;
}
#clock-clock {
    font-size: 24pt;
}
#clock-date, #clock-date2 {
    color: #8FAFCA;
    font-size: 11pt;
    font-weight: 700;
}
.footer-headline {
    color: #8FAFCA;
    font-size: 11pt;
    font-weight: 700;
}
#clock-place {
    color: white;
    font-size: 11pt;
    font-weight: 200;
}
#clock-remaining-a-1, #clock-remaining-a-2 {
    font-size: 11pt;
    font-weight: 700;
}
#clock-remaining-b-1, #clock-remaining-b-2 {
    font-size: 14pt;
}
#weatherCollapse p {
    margin: 0;
    padding: 0;
}
#weatherCollapse table {
    table-layout: fixed;
    width: 100%;
}
#placeCollapse p {
    margin: 0;
    padding: 0;
}
#placeCollapse table {
    table-layout: fixed;
    width: 100%;
}
#namedayCollapse p {
    margin: 0;
    padding: 0;
}
#namedayCollapse table {
    table-layout: fixed;
    width: 100%;
}
#demonCollapse p {
    margin: 0;
    padding: 0;
}
#demonCollapse table {
    table-layout: fixed;
    width: 100%;
}
#weather-t-temp {
    font-size: 16pt; 
    font-weight: 500;
}
#weather-t-avg {
    font-size: 14pt; 
    font-weight: 500;
}
#weather-t-temp-today {
    font-size: 14pt; 
    font-weight: 500;
}
#weather-t-max {
    font-size: 12pt; 
    font-weight: 500; 
    color: #FFEFD0;
}
#weather-t-min {
    font-size: 12pt; 
    font-weight: 500; 
    color: #D0FDFF;
}
#weather-t-alert {
    text-align:center;
}
.modal-backdrop {
    z-index: -1 !important;
}

@font-face {
    font-family: Exo;
    src: url(Exo-Regular.ttf);
}
@font-face {
    font-family: exo;
    src: url(Exo-Regular.ttf);
}

#footer-d-flex {
    position:absolute;
    right:0;
    bottom:0;
    height:44px;
}

.form-datePicker-table {
    width: 100%;
    table-layout: fixed;
}

.form-datePicker-cell {
    border-radius: 10px;
}

.form-datePicker-cell:hover, .form-datePicker-cell-normal:hover {
    background-color:gold;
    color:black;
}

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
/* Map UI refresh */
:root {
    --map-ui-bg: rgba(7, 13, 23, 0.82);
    --map-ui-bg-strong: rgba(7, 13, 23, 0.94);
    --map-ui-line: rgba(128, 182, 226, 0.24);
    --map-ui-text: #eaf6ff;
    --map-ui-muted: #9db7cb;
    --map-ui-accent: #5ce1ff;
    --map-ui-accent-2: #4d8dff;
    --map-ui-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.95);
}

main {
    background:
        radial-gradient(circle at top right, rgba(92, 225, 255, 0.16), transparent 30%),
        radial-gradient(circle at bottom left, rgba(77, 141, 255, 0.16), transparent 28%),
        linear-gradient(180deg, #060b12 0%, #08111c 100%) !important;
}

#map-logo {
    filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.38));
}

#rightMenuC {
    top: 12px !important;
    right: 12px !important;
    width: min(520px, calc(100% - 24px)) !important;
    height: calc(100% - 112px) !important;
    background: linear-gradient(180deg, rgba(10, 18, 29, 0.92), rgba(7, 13, 23, 0.96)) !important;
    border: 1px solid var(--map-ui-line) !important;
    border-radius: 24px !important;
    box-shadow: var(--map-ui-shadow) !important;
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.rightMenu {
    padding: 18px 22px !important;
}

#rightMenuC .modal-header,
#rightmenu-meter .modal-header,
#editModal .modal-header,
#sunModal .modal-header {
    border-bottom: 1px solid rgba(150, 202, 245, 0.16) !important;
}

#h1,
#rightmenu-meter h1,
#editModal h5,
#sunModal h5 {
    color: var(--map-ui-text) !important;
    letter-spacing: 0.01em;
}

#h3,
#h5,
#rightMenuCoords,
#meter-pointcount,
#desc,
#rightMenuC p,
#rightMenuC td,
#rightmenu-meter h3,
#rightmenu-meter h4 {
    color: var(--map-ui-text) !important;
}

#h5,
#rightMenuCoords,
#meter-pointcount {
    color: var(--map-ui-muted) !important;
}

#rightMenuC hr,
#rightmenu-meter hr {
    border-top: 1px solid rgba(150, 202, 245, 0.14) !important;
    opacity: 1;
}

#rightClickMenu {
    width: 220px;
    background: linear-gradient(180deg, rgba(12, 21, 33, 0.94), rgba(7, 13, 23, 0.96)) !important;
    border: 1px solid var(--map-ui-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--map-ui-shadow) !important;
    backdrop-filter: blur(18px);
    overflow: hidden;
}

#rightClickMenu p {
    color: var(--map-ui-text) !important;
}

#rightClickMenu hr {
    border-top: 1px solid rgba(150, 202, 245, 0.16) !important;
}

#rightbtn-meter,
#sunDiv,
#rightClickMenu .btn,
#rightMenuC .btn,
#rightmenu-meter .btn,
#editModal .btn-primary,
#editModal .btn-danger {
    border-radius: 999px !important;
    border: 1px solid rgba(139, 209, 255, 0.32) !important;
    background: linear-gradient(180deg, rgba(68, 149, 255, 0.96), rgba(41, 104, 221, 0.96)) !important;
    color: #f4fbff !important;
    box-shadow: 0 16px 30px -22px rgba(44, 121, 237, 0.95);
}

#rightbtn-meter:hover,
#sunDiv:hover,
#rightClickMenu .btn:hover,
#rightMenuC .btn:hover,
#rightmenu-meter .btn:hover,
#editModal .btn-primary:hover,
#editModal .btn-danger:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}

#rightbtn-meter {
    right: 18px !important;
    bottom: 58px !important;
    padding: 10px 16px !important;
    z-index: 11 !important;
}

#bottomMenu {
    z-index: 12 !important;
    display: grid !important;
    grid-template-columns: minmax(150px, 0.95fr) minmax(190px, 1.1fr) minmax(250px, 1.35fr) minmax(320px, auto);
    gap: 12px;
    align-items: center;
    height: auto !important;
    min-height: 92px;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, rgba(7, 13, 23, 0.76), rgba(7, 13, 23, 0.96)) !important;
    border-top: 1px solid var(--map-ui-line) !important;
    box-shadow: 0 -24px 40px -28px rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(18px);
}

#bottomMenu img {
    display: none !important;
}

#coords,
#sunText,
#timeText {
    position: static !important;
    float: none !important;
    display: flex !important;
    align-items: center;
    min-height: 64px;
    margin: 0 !important;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(136, 192, 235, 0.16);
    background: linear-gradient(180deg, rgba(15, 26, 40, 0.92), rgba(9, 18, 30, 0.84));
    color: var(--map-ui-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

#coords {
    color: var(--map-ui-accent) !important;
    font-weight: 700;
}

#sunText,
#timeText {
    line-height: 1.35 !important;
}

#bottomMenu > div {
    position: static !important;
    height: auto !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 64px;
    border-radius: 20px;
    border: 1px solid rgba(136, 192, 235, 0.16);
    background: linear-gradient(180deg, rgba(15, 26, 40, 0.94), rgba(9, 18, 30, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding-inline: 14px !important;
}

#dateinput_day,
#dateinput_month,
#dateinput_year,
#dateinput_hour,
#dateinput_minute {
    height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(132, 197, 242, 0.22) !important;
    background: rgba(5, 11, 18, 0.78) !important;
    color: #f2fbff !important;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    appearance: none;
}

#dateinput_day,
#dateinput_hour,
#dateinput_minute {
    width: 72px !important;
    min-width: 72px !important;
    padding-inline: 10px;
}

#dateinput_year {
    width: 88px !important;
    min-width: 88px !important;
    padding-inline: 10px;
}

#dateinput_month {
    width: 148px !important;
    min-width: 148px !important;
    padding-inline: 10px;
    padding-right: 34px;
}

#dateinput_day:focus,
#dateinput_month:focus,
#dateinput_year:focus,
#dateinput_hour:focus,
#dateinput_minute:focus {
    outline: none;
    border-color: rgba(92, 225, 255, 0.66) !important;
    box-shadow: 0 0 0 3px rgba(92, 225, 255, 0.14) !important;
}

#dateinput_hour {
    margin-left: 14px !important;
}
#dateinput_hour,
#dateinput_minute {
    text-align: center !important;
}


#sunModal .modal-content,
#editModal .modal-content {
    background: linear-gradient(180deg, rgba(10, 18, 29, 0.96), rgba(7, 13, 23, 0.98)) !important;
    border: 1px solid rgba(136, 192, 235, 0.16) !important;
}

#sunModal table,
#editModal table,
#sunModal td,
#editModal td,
#sunModal th,
#editModal th,
.modal-dialog {
    color: var(--map-ui-text) !important;
}

@media (max-width: 1100px) {
    #bottomMenu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #bottomMenu > div {
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

@media (max-width: 820px) {
    #rightMenuC {
        top: 8px !important;
        right: 8px !important;
        width: calc(100% - 16px) !important;
        height: calc(100% - 176px) !important;
        border-radius: 20px !important;
    }

    #bottomMenu {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 12px !important;
    }

    #coords,
    #sunText,
    #timeText,
    #bottomMenu > div {
        min-height: 56px;
    }

    #bottomMenu > div {
        justify-content: flex-start;
    }

    #dateinput_month {
        min-width: 112px;
    }
}
/* Meter UI */
#meter-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 8;
    overflow: visible;
    transform-origin: top left;
}

#meter-path {
    fill: none;
    stroke: #ff5b21;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.28));
}

.meter-point circle {
    fill: #ff5b21;
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 2;
}

.meter-point .meter-point-core {
    fill: #ffffff;
    stroke: none;
}

.meter-point text {
    fill: #09111c;
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
}

.meter-segment-label rect {
    fill: rgba(8, 14, 24, 0.82);
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;
}

.meter-segment-label text {
    fill: #f6fbff;
    font-size: 10px;
    font-weight: 700;
    text-anchor: middle;
}

#meter-empty {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: #9db7cb !important;
    text-align: center;
}

#meter-list {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.meter-list-head,
.meter-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) 90px 90px 76px;
    gap: 10px;
    align-items: center;
}

.meter-list-head {
    padding: 0 4px;
    color: #9db7cb;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.meter-list-row {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(136, 192, 235, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
}

.meter-list-point {
    display: grid;
    gap: 4px;
}

.meter-list-point strong {
    color: #f4fbff;
}

.meter-list-point span {
    color: #9db7cb;
    font-size: 0.86rem;
    line-height: 1.35;
}

.meter-list-dist,
.meter-list-total {
    color: #f4fbff;
    font-weight: 600;
    text-align: right;
}

.meter-remove {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #f4fbff;
    height: 36px;
    padding: 0 12px;
}

.meter-remove:hover {
    background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 820px) {
    .meter-list-head {
        display: none;
    }

    .meter-list-row {
        grid-template-columns: 1fr;
    }

    .meter-list-dist,
    .meter-list-total {
        text-align: left;
    }
}

/* Fullscreen UI */
#fullscreen-gate {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(92, 225, 255, 0.18), transparent 24%),
        radial-gradient(circle at bottom left, rgba(77, 141, 255, 0.20), transparent 28%),
        rgba(4, 8, 14, 0.82);
    backdrop-filter: blur(16px);
}

#fullscreen-gate.is-hidden {
    display: none;
}

.fullscreen-gate__panel {
    width: min(560px, 100%);
    padding: 28px;
    border-radius: 28px;
    border: 1px solid rgba(136, 192, 235, 0.22);
    background: linear-gradient(180deg, rgba(10, 18, 29, 0.96), rgba(7, 13, 23, 0.98));
    box-shadow: 0 40px 70px -44px rgba(0, 0, 0, 0.95);
    color: #f4fbff;
}

.fullscreen-gate__eyebrow {
    margin: 0 0 10px;
    color: #7ddfff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fullscreen-gate__title {
    margin: 0;
    color: #f4fbff;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    line-height: 1.05;
}

.fullscreen-gate__text,
.fullscreen-gate__hint {
    margin: 14px 0 0;
    color: #9db7cb;
    line-height: 1.5;
}

.fullscreen-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.fullscreen-gate__primary,
.fullscreen-gate__secondary,
#fullscreen-toggle {
    border-radius: 999px;
    height: 46px;
    padding: 0 18px;
    font-weight: 700;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.fullscreen-gate__primary,
#fullscreen-toggle {
    border: 1px solid rgba(139, 209, 255, 0.32);
    background: linear-gradient(180deg, rgba(68, 149, 255, 0.96), rgba(41, 104, 221, 0.96));
    color: #f4fbff;
    box-shadow: 0 16px 30px -22px rgba(44, 121, 237, 0.95);
}

.fullscreen-gate__secondary {
    border: 1px solid rgba(136, 192, 235, 0.22);
    background: rgba(255, 255, 255, 0.05);
    color: #dcecff;
}

.fullscreen-gate__primary:hover,
.fullscreen-gate__secondary:hover,
#fullscreen-toggle:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

#fullscreen-toggle {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#fullscreen-toggle.is-hidden {
    display: none;
}

body.is-fullscreen #fullscreen-toggle {
    top: 10px;
}

@media (max-width: 720px) {
    .fullscreen-gate__panel {
        padding: 22px;
        border-radius: 22px;
    }

    .fullscreen-gate__actions {
        flex-direction: column;
    }

    .fullscreen-gate__primary,
    .fullscreen-gate__secondary,
    #fullscreen-toggle {
        width: 100%;
        justify-content: center;
    }

    #fullscreen-toggle {
        left: 12px;
        right: 12px;
        top: 10px;
        transform: none;
    }
}
/* Weather UI */
#weather-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 120;
    opacity: 1;
    mix-blend-mode: normal;
    transform-origin: top left;
}

#weather-tooltip {
    position: fixed;
    z-index: 1300;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(8, 14, 24, 0.88);
    border: 1px solid rgba(136, 192, 235, 0.16);
    color: #f4fbff;
    font-weight: 700;
    pointer-events: none;
    box-shadow: 0 20px 30px -24px rgba(0, 0, 0, 0.9);
}

#rightbtn-weather {
    position: absolute;
    right: 18px;
    bottom: 104px;
    z-index: 11;
}

#rightbtn-weather,
#rightbtn-weather:hover {
    color: #f4fbff !important;
}

.weather-panel__current {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.weather-panel__current > div {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(136, 192, 235, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.weather-panel__label {
    color: #9db7cb;
    margin-bottom: 8px !important;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.weather-legend {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(136, 192, 235, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.weather-legend__bar {
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(24,56,120) 0%, rgb(42,110,190) 20%, rgb(44,186,201) 40%, rgb(110,214,127) 60%, rgb(243,199,83) 80%, rgb(224,88,58) 100%);
}

.weather-legend__scale {
    display: flex;
    justify-content: space-between;
    color: #9db7cb;
    margin-top: 8px;
    font-size: 0.82rem;
}

.weather-stations {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.weather-station {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(136, 192, 235, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.weather-station span {
    color: #7ddfff;
    font-weight: 700;
}

@media (max-width: 820px) {
    #rightbtn-weather {
        right: 12px;
    }

    .weather-panel__current {
        grid-template-columns: 1fr;
    }
}