 body {margin: 0;font-family: 'Inter', sans-serif;}#map {position: absolute;top: 56px;bottom: 56px;width: 100%;}#info-box h2, #info-box p {margin: 0;padding: 0;}#info-box .timestamp {font-size: 14px;margin-top: 8px;}#layer-select {width: 100%;margin-bottom: 10px;font-size: 14px;padding: 5px;margin-top: 15px;}.action-button {background: #007AFF;color: white;padding: 8px;border-radius: 50px;cursor: pointer;font-weight: bold;width: 93%;text-align: center;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);margin-top: 10px;font-size: 14px;}.mapboxgl-popup-content {background: #14111F;color: white;font-size: 14px;padding: 10px;border-radius: 5px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);max-width: 500px !important;word-wrap: break-word;overflow-wrap: break-word;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);-ms-overflow-style: none;scrollbar-width: none;}.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip {border-top-color: #14111F;}}.mapboxgl-popup-content::-webkit-scrollbar {display: none;}.popup-image img {width: 50px;height: 50px;border-radius: 5px;object-fit: cover;}.popup-content {flex: 1;text-align: left;}.popup-content h3 {font-size: 18px;margin: 0;color: #7F1DF0;}.popup-content p {margin: 5px 0;font-size: 14px;color: #eaeaea;}.action-button i {margin-right: 10px;}.action-button:hover {background: #005BB5;}.circle-marker {width: 20px;height: 20px;background: #7F1DF0;border-radius: 50%;position: absolute;cursor: pointer;}@keyframes ease-fade-up {0% {opacity: 0;transform: translateY(20px);}100% {opacity: 1;transform: translateY(0);}}#top-control-bar {position: absolute;top: 0;left: 0;width: calc(100% - 44px);height: 55px;background-color: #14111F;display: flex;align-items: center;border: 2px solid #636381;border-radius: 5px;z-index: 1000;padding: 0 20px;gap: 10px;}#menu-toggle {display: flex;align-items: center;cursor: pointer;}.menu-logo {height: 30px;width: auto;margin-right: 6px;}#menu-toggle i {color: white;font-size: 13px;}#top-info {display: flex;flex-direction: column;align-items: center;margin: 0 auto;}#station-info-line1 {display: flex;align-items: center;}#top-status-indicator {width: 0.75em;height: 0.75em;border-radius: 50%;margin-right: 8px;opacity: 0;transition: opacity 0.3s ease-in-out;}#top-station-id {font-weight: bold;font-size: 18px;}#station-info-line2 {margin-top: 3px;}#top-timestamp {font-size: 14px;color: white;}@keyframes blink {0% {opacity: 1;}50% {opacity: 0.5;}100% {opacity: 1;}}.status-indicator.operational {background-color: lime;animation: blink 1.5s infinite;opacity: 1;}.status-indicator.out-of-service {background-color: red;animation: blink 1.5s infinite;opacity: 1;}#top-info {display: flex;flex-direction: column;align-items: center;margin: 0 auto;transform: translateX(-30px);}.submenu-button {background-color: white;color: #7F1DF0;border: 2px solid #636381;padding: 5px;font-size: 16px;font-weight: bold;cursor: pointer;border-radius: 10px;transition-duration: 0.1s;width: 100%;margin-bottom: 10px;}.submenu-button:hover {background-color: rgb(165, 165, 165);}.submenu-button:disabled {background-color: #636381;color: white;cursor: not-allowed;}.more-info-button {background-color: white;color: #7F1DF0;border: #636381 2px solid;border-radius: 10px;padding: 5px;margin-top: 5px;display: flex;align-items: center;justify-content: center;text-decoration: none;font-weight: bold;font-size: 17px;}.more-info-button i {margin-right: 5px;}.more-info-button:hover {background-color: rgb(165, 165, 165);}.menu-button {font-size: 20px;background-color: white;color: #7F1DF0;border: #636381 2px solid;transition-duration: 0.1s;}.menu-button:hover {background-color: rgb(165, 165, 165);}.control-buttons {margin-left: 30px;}.alert-popup {display: none;position: fixed;top: 10%;left: 50%;transform: translateX(-50%);background: #14111F;color: white;border-radius: 10px;padding: 20px;z-index: 9999;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);max-width: 400px;text-align: left;}.alert-popup.show {display: block;}.alertpopup .mapboxgl-popup-content::-webkit-scrollbar {display: none;}.alertpopup .mapboxgl-popup-tip {background: #14111F;border: 0.5px solid #636381;border-top: none;width: 20px;height: 10px;transform: rotate(45deg);position: absolute;bottom: -5px;left: 50%;margin-left: -10px;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);}.alertpopup .mapboxgl-popup-tip-container {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);}a {color: white;}a:hover {color: white;}.sli {list-style: none;display: inline-block;}body {background-color: black;color: white;font-family: 'Inter', sans-serif;touch-action: pan-x pan-y;overflow-y: hidden;overflow-x: hidden;font-size: 16px;user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}.menu-header .exit-button-only {margin-right: 3px;}.submenu-button.active {background-color: rgb(165, 165, 165);color: white;border: 2px solid white;}.mping-icon {background-color: #14111F;border: 2px solid #636381;color: white;width: 12px;height: 12px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 8px;cursor: pointer;}button {background-color: white;color: #7F1DF0;border: 2px solid #636381;padding: 5px;font-size: 20px;font-weight: bold;cursor: pointer;border-radius: 10px;transition-duration: 0.1s;width: 100%;}button:hover {background-color: rgb(165, 165, 165);}button:hover {background-color: rgb(165, 165, 165);}button:disabled {background-color: #636381;color: white;cursor: not-allowed;}select {width: 100%;border: none;border-radius: 100px;background: white;padding: 5px;}.control-button {background-color: white;color: #7F1DF0;border: #636381 2px solid;padding: 3px;font-size: 16px;font-weight: bold;cursor: pointer;border-radius: 10px;transition-duration: 0.1s;width: 38px;height: 38px;display: flex;align-items: center;justify-content: center;}.control-button i {font-size: 20px;}.control-button:hover {background-color: rgb(165, 165, 165);}.control-button:disabled {background-color: #636381;color: white;cursor: not-allowed;}.mapboxgl-ctrl-geolocate {display: none !important;}.setting-button {background-color: white;color: #7F1DF0;border: #636381 2px solid;padding: 5px;font-size: 16px;font-weight: bold;cursor: pointer;border-radius: 10px;transition-duration: 0.1s;width: 100%;margin-bottom: 10px;}.setting-button:hover {background-color: rgb(165, 165, 165);}.setting-button:disabled {background-color: #636381;color: white;cursor: not-allowed;}.submenu-button:disabled {background-color: #636381;color: white;cursor: not-allowed;}.mapboxgl-popup-close-button {display: none !important;}.weather-radio-marker {width: 12px;height: 12px;background-color: #7F1DF0;border: 1px solid black;border-radius: 50%;cursor: pointer;}.tts-btn {background-color: #636381;color: white;border: 2px solid white;padding: 8px 15px;font-size: 16px;border-radius: 10px;cursor: pointer;width: 100%;text-align: center;margin-top: 10px;}.submenu-button {background-color: white;color: #7F1DF0;border: 2px solid #636381;padding: 5px;font-size: 16px;font-weight: bold;cursor: pointer;border-radius: 10px;transition-duration: 0.1s;width: 100%;margin-bottom: 10px;}#alert-popup {position: absolute;top: 50%;height: 100%;left: 50%;transform: translate(-50%, -50%);width: 100%;max-width: 8000px;background-color: #14111F;z-index: 10000000;display: none;overflow-y: auto;padding: 20px;box-sizing: border-box;border: 2px solid #636381;border-radius: 5px;animation: fadeInUp 0.3s ease-in-out;-ms-overflow-style: none;scrollbar-width: none;}#alert-popup::-webkit-scrollbar {display: none;}#alert-popup.show {display: block;animation: fadeInUp 0.3s ease-in-out;}#alert-popup.hide {animation: fadeOutDown 0.3s ease-in-out;display: block;}#alert-popup p {white-space: normal;word-wrap: break-word;}.close-button {background-color: white;color: #7F1DF0;border: 2px solid #636381;border-radius: 10px;width: 44px;height: 44px;margin-top: -1px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-weight: bold;font-size: 16px;transition: background-color 0.1s;}.close-button:hover {background-color: rgb(165, 165, 165);}.close-button i {font-size: 19px;margin-right: 0 !important;}#popup-title {flex-grow: 0;background-color: red;color: white;font-weight: bold;font-size: 20px;padding: 8px 12px;border-radius: 5px;text-align: center;margin: 0;display: inline-block;}#alert-popup-content {color: white;font-size: 14px;line-height: 1.5;margin-top: 15px;}@keyframes fadeInUp {from {opacity: 0;transform: translate(-50%, -49%);}to {opacity: 1;transform: translate(-50%, -50%);}}@keyframes fadeOutDown {from {opacity: 1;transform: translate(-50%, -50%);}to {opacity: 0;transform: translate(-50%, -49%);}}@keyframes fadeUp {0% {opacity: 0;transform: translateY(10px);}100% {opacity: 1;transform: translateY(0);}}@keyframes fadeDown {0% {opacity: 1;transform: translateY(0);}100% {opacity: 0;transform: translateY(10px);}}#bottom-layer-popup {display: none;position: absolute;bottom: 58px;margin-left: 2px;left: 50%;transform: translateX(-50%);background-color: #14111F;border: 2px solid #636381;border-radius: 5px;z-index: 9999;padding: 10px;width: auto;max-width: 230px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);transition: all 0.090s ease;opacity: 0;pointer-events: none;}#bottom-layer-popup.show {display: block;pointer-events: auto;animation: fadeUp 0.3s ease forwards;}#bottom-layer-popup.hide {display: block;pointer-events: none;animation: fadeDown 0.3s ease forwards;}#bottom-layer-list {display: flex;flex-direction: column;gap: 5px;transition: all 0.3s ease !important;}#bottom-layer-list .group-heading {color: #fff;font-weight: bold;margin-bottom: 5px;margin-top: 5px;}#bottom-layer-list .digital-spacing {margin-top: 0px;}#bottom-layer-popup .layer-item {display: flex;align-items: center;padding: 8px 10px;border: 2px solid #636381;border-radius: 10px;cursor: pointer;font-size: 13px;font-weight: bold;background-color: white;color: #7F1DF0;transition-duration: all 0.3s ease;transition-duration: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;}#bottom-layer-popup .layer-item.digital {white-space: normal;}#bottom-layer-popup .layer-item.active {background-color: #7F1DF0;color: #fff;border: 2px solid #fff;}.mapboxgl-ctrl-attrib {left: 100px !important;border-radius: 10px !important;padding: 5px 15px;background-color: rgba(0, 0, 0, 0.0000001);color: black;font-size: 12px;}.mapboxgl-ctrl-attrib a {color: white;}#bottom-layer-popup .layer-item i {font-size: 17px;margin-right: 8px;}#bottom-layer-popup .layer-item i.fa-circle-check {margin-left: auto;margin-right: 0;font-size: 17px;color: currentColor;}#control-bar {position: absolute;left: 0px;bottom: 0px;width: calc(100% - 44px);height: 90px;background-color: #14111F;display: flex;flex-direction: column;align-items: center;border: 2px solid #636381;border-radius: 5px;z-index: 1000;padding: 0 20px;}#control-bar.collapsed {height: 55px;}#control-bar ul {margin-top: 8px;display: flex;align-items: center;width: 100%;justify-content: center;}.control-button {background-color: white;color: #7F1DF0;border: #636381 2px solid;padding: 8px;font-size: 18px;font-weight: bold;cursor: pointer;border-radius: 10px;transition: background-color 0.3s ease;width: 38px;height: 38px;display: flex;align-items: center;justify-content: center;margin: 0 3px;}.control-button:hover {background-color: rgb(165, 165, 165);}.station-detail-box {position: absolute;top: 60px;left: 50%;width: 300px;height: 200px;padding: 10px;background-color: #14111F;border-radius: 10px;box-shadow: 0 4px 6px rgba(0,0,0,0.1);opacity: 0;border: 2px solid #636381;transform: translate(-50%, -10px);pointer-events: none;transition: opacity 0.3s ease, transform 0.3s ease;z-index: 1000;}.station-detail-box.visible {opacity: 1;transform: translate(-50%, 0);pointer-events: auto;}#radar-legend {text-align: center;width: 100%;max-width: 400px;opacity: 1;max-height: 35px;padding-bottom: 0px;margin-top: -9px;image-rendering: crisp-edges;image-rendering: -webkit-optimize-contrast;}#control-bar.collapsed #radar-legend {opacity: 0;max-height: 0;visibility: hidden;}#radar-legend img {max-width: 100%;max-height: 35px;border-radius: 0px;image-rendering: crisp-edges;image-rendering: -webkit-optimize-contrast;border: none;}@media (max-width: 600px) {#control-bar {flex-direction: column;height: auto;}#control-bar.collapsed {height: 55px;}.legend-toggle {position: absolute;top: -17px;left: 50%;transform: translateX(-50%);background-color: white;border: 2px solid #636381;border-radius: 50%;width: 27px;height: 27px;display: flex;align-items: center;justify-content: center;cursor: pointer;z-index: 1001;}#bottom-layer-popup {bottom: 60px;}.legend-toggle i {color: #7F1DF0;font-size: 16px;}}@media (min-width: 601px) {.legend-toggle {display: none;}#control-bar {flex-direction: row;justify-content: space-between;height: 55px;padding: 0 20px;}#control-bar ul {margin-top: 16px;justify-content: flex-start;}#radar-legend {display: block;position: absolute;right: 2px;bottom: 62px;max-width: 400px;opacity: 1;}#radar-legend img {border: 2px solid #636381;}}#bottom-layer-popup {position: absolute;left: 0;width: 100%;bottom: 95px;}.mapboxgl-popup {max-width: 500px !important;}.weather-radio-popup {width: 400px !important;max-width: 400px !important;min-width: 400px !important;}#circle-menu {position: fixed;bottom: 100px;right: 8px;width: 40px;height: 40px;background-color: #14111F;border: 2px solid #636381;border-radius: 50%;display: flex;align-items: center;justify-content: center;z-index: 1000;cursor: pointer;}#circle-menu i {color: white;font-size: 20px;}#circle-menu-popup {position: fixed;bottom: 110px;right: 8px;width: 200px;padding: 10px;background-color: #14111F;border: 2px solid #636381;border-radius: 5px;z-index: 1001;display: none;opacity: 0;animation-duration: 0.3s;animation-fill-mode: forwards;}#circle-menu-popup .menu-item {display: flex;align-items: center;justify-content: space-between;padding: 5px 0;cursor: pointer;}#circle-menu-popup .menu-item-icon {width: 22px;height: auto;margin-right: 8px;}#circle-menu-popup .menu-item-text {flex-grow: 1;color: white;font-size: 15px;}#circle-menu-popup .menu-item-check {color: white;font-size: 13px;}#circle-menu-popup #circle-menu-popup-header {color: white;font-size: 19px;font-weight: bold;text-align: left;margin-bottom: 5px;padding-bottom: 0px;padding-top: 2px;}#circle-menu-popup-tools-header {color: white;font-size: 19px;font-weight: bold;text-align: left;margin-bottom: 5px;padding-bottom: 0px;padding-top: 2px;}#loading-screen {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.75);display: flex;justify-content: center;align-items: center;z-index: 10000;backdrop-filter: blur(10px);opacity: 1;}.spinner {width: 50px;height: 50px;animation: spin 3s linear infinite, dash 1.5s ease-in-out infinite;}.spinner .path {stroke: white;stroke-linecap: round;}@keyframes spin {100% {transform: rotate(360deg);}}@keyframes dash {0% {stroke-dasharray: 1, 150;stroke-dashoffset: 0;}50% {stroke-dasharray: 90, 150;stroke-dashoffset: -35;}100% {stroke-dasharray: 90, 150;stroke-dashoffset: -124;}}.risk-level {padding: 2px 5px;border-radius: 5px;color: white;font-weight: bold;}#watch-popup {font-family: 'Inter', sans-serif !important;font-size: 17px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;max-width: 8000px;height: 100%;background-color: #14111F;z-index: 10000000;display: none;overflow-y: auto;padding: 20px;box-sizing: border-box;border: 2px solid #636381;border-radius: 5px;animation: fadeInUp 0.3s ease-in-out;-ms-overflow-style: none;scrollbar-width: none;}#watch-popup h3, #watch-popup p, #watch-popup span {font-family: 'Inter', sans-serif !important;font-size: 16px !important;line-height: 1 !important;}#watch-popup.show {display: block;animation: fadeInUp 0.3s ease-in-out;}#watch-popup.hide {animation: fadeOutDown 0.3s ease-in-out;display: block;}#watch-popup::-webkit-scrollbar {display: none;}#watch-popup .popup-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}#top-station-id {display: inline-flex;flex-direction: row-reverse;align-items: center;justify-content: center;}#top-station-id .sep {margin: 0 5px;}#top-status-indicator {margin-right: 8px;}#watch-popup-title {background-color: red;color: white;font-weight: bold;font-size: 20px;padding: 8px 12px;border-radius: 5px;text-align: left;margin: 0;display: block;width: fit-content;}#watch-popup h3 {font-size: 18px;font-weight: bold;}#watch-popup .watch-risk {font-size: 16px;}#watch-popup .close-button {background-color: white;color: #7F1DF0;border: 2px solid #636381;border-radius: 10px;width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-weight: bold;font-size: 16px;transition: background-color 0.1s;}#watch-popup .close-button:hover {background-color: rgb(165, 165, 165);}#watch-popup .close-button i {font-size: 19px;margin-right: 0 !important;}.watch-popup-header.svr {background-color: #998207;}.watch-pds-alert {background-color: magenta;color: white;font-weight: bold;text-align: center;padding: 10px;border-radius: 5px;margin-top: 10px;}#watch-popup .probabilities {margin-top: 25px;}#watch-popup .probabilities h3 {color: white !important;}.watch-risk {padding: 5px 8px;border-radius: 5px;color: white;font-family: 'Inter', sans-serif !important;font-weight: bold;}#drawing-controls {position: fixed;bottom: 113px;left: 50%;transform: translateX(-50%) translateY(10px);background: #14111F;padding: 8px;border: 2px solid #636381;border-radius: 10px;display: none;z-index: 1001;opacity: 0;transition: opacity 0.3s ease-out, transform 0.3s ease-out;align-items: center;gap: 8px;}#drawing-controls.active {display: flex;opacity: 1;transform: translateX(-50%) translateY(0);}#drawing-controls.fade-out {opacity: 0;transform: translateX(-50%) translateY(10px);}#drawing-color {width: 35px;height: 35px;border: 2px solid #636381;border-radius: 10px;cursor: pointer;padding: 0;background: none;appearance: none;-webkit-appearance: none;position: relative;overflow: hidden;}#drawing-color::-webkit-color-swatch, #drawing-color::-moz-color-swatch {border: none !important;border-radius: 10px !important;padding: 0 !important;width: 115% !important;height: 115% !important;margin: 0 !important;}#drawing-color::-webkit-color-swatch-wrapper {padding: 0 !important;margin: 0 !important;border: none !important;width: 115% !important;height: 115% !important;display: flex;}#undo-drawing, #redo-drawing, #delete-drawing, #close-drawing {background-color: white;color: #7F1DF0;border: 2px solid #636381;padding: 5px;font-size: 16px;font-weight: bold;cursor: pointer;border-radius: 10px;transition-duration: 0.1s;width: 35px;height: 35px;display: flex;align-items: center;justify-content: center;}#undo-drawing:hover, #redo-drawing:hover, #delete-drawing:hover, #close-drawing:hover {background-color: rgb(200, 200, 200);}#watch-popup-probabilities {font-family: 'Inter', sans-serif !important;font-weight: 700;font-size: 14px;color: white;}#glossary-blur {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.2);backdrop-filter: blur(5px);transition: opacity 0.3s ease;opacity: 0;z-index: 9999;}#weather-glossary-popup {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 95vw;height: 65vh;max-width: 600px;background-color: #14111F;border: 2px solid #636381;border-radius: 5px;z-index: 10000;padding: 20px 10px 0 10px;box-sizing: border-box;overflow-y: auto;overflow-x: hidden;transition: opacity 0.3s ease, transform 0.3s ease;}.glossary-top-row {display: flex;align-items: center;justify-content: space-between;padding: 0 10px;height: 25px;}.glossary-title {font-size: 20px;font-weight: bold;color: white;margin-left: 0px;}#weather-glossary-popup .glossary-top-row .close-button {position: absolute;top: 7px;right: 11px;width: 40px;height: 40px;margin: 5px;}.search-container {position: relative;height: 40px;margin: 20px 10px 10px 10px;}.search-container::before {content: "\f002";font-family: 'Font Awesome 6 Free';font-weight: 900;position: absolute;left: 10px;top: 50%;transform: translateY(-50%);color: #7F1DF0;font-size: 16px;}#glossary-search {width: 100%;height: 100%;padding: 10px 10px 10px 31px;border: 2px solid #636381;border-radius: 10px;background-color: white;color: #7F1DF0;font-family: 'Inter', sans-serif;font-weight: 700;box-sizing: border-box;font-size: 16px;}#glossary-search::placeholder {font-family: 'Inter', sans-serif;color: #7F1DF0;font-size: 16px;}#glossary-content {height: calc(100% - 100px);overflow-y: auto;overflow-x: none !important;padding: 0 10px;box-sizing: border-box;margin: 0;transform: translateY(10px);animation: glossaryFadeUp 0.4s ease forwards;}#glossary-search:focus {outline: none;box-shadow: none;}#glossary-content::-webkit-scrollbar {display: none;}#glossary-content {-ms-overflow-style: none !important;scrollbar-width: none !important;}#weather-glossary-popup .glossary-entry, #weather-glossary-popup p {white-space: normal;overflow-wrap: anywhere;}#glossary-content .glossary-entry {background: white;border-radius: 10px;padding: 10px;border: 2px solid #636381;margin-bottom: 10px;display: flex;flex-direction: column;opacity: 1;transform: none;}#glossary-content .glossary-entry:last-child {margin-bottom: 0;}#glossary-content .glossary-entry p {margin: 0;}#glossary-content .glossary-entry p:first-of-type {font-size: 18px;font-weight: 900;margin-bottom: 5px;color: #7F1DF0;}#glossary-content .glossary-entry p:last-of-type {font-size: 14px;font-weight: bold;color: #7F1DF0;}#glossary-content .glossary-entry {opacity: 1;transform: none;will-change: opacity, transform;}.glossary-entry.fade-in {animation: glossaryFadeUp 0.4s ease forwards;}@keyframes glossaryFadeUp {from {opacity: 0;transform: translateY(10px);}to {opacity: 1;transform: translateY(0);}}.glossary-entry.fade-down {animation: glossaryFadeDown 0.4s ease forwards;}@keyframes glossaryFadeDown {from {opacity: 1;transform: translateY(0);}to {opacity: 0;transform: translateY(10px);}}#radar-legend img {opacity: 0;transition: opacity 0.3s ease-in-out;}#radar-legend img.loaded {opacity: 1;}#metar-blur {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2);backdrop-filter: blur(5px);z-index: 1000;display: none;opacity: 0;transition: opacity 0.3s ease;}#metar-popup {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 95vw;max-width: 600px;max-height: calc(85vh - 15px);height: auto;background-color: #14111F;border: 2px solid #636381;border-radius: 5px;z-index: 10000;padding: 20px 10px 0 10px;box-sizing: border-box;overflow-y: auto;scrollbar-width: none;-ms-overflow-style: none;opacity: 0;transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;}#metar-popup::-webkit-scrollbar {display: none;}@media (max-height: 700px) {#metar-popup {max-height: calc(90vh - 15px);transform: translate(-50%, -55%);}}@media (max-height: 600px) {#metar-popup {max-height: calc(95vh - 15px);transform: translate(-50%, -58%);}}.metar-temperature-box {width: calc(100% - 20px);margin: 10px auto;padding: 12px 0;border-radius: 10px;background-color: #14111F;color: #fff;text-align: center;font-size: 16px;font-weight: bold;box-sizing: border-box;}.metar-rawdata-container {margin-top: 15px;margin-bottom: 0px;color: #fff;font-size: 16px;line-height: 1.2em;padding: 0 10px;}.metar-rawdata-container p {margin: 0 0 8px 0;}.metar-data-box {margin-top: 20px;color: #fff;font-size: 16px;line-height: 0.9em;padding: 0 10px;}.metar-data-box p {margin: 0 0 8px 0;}.wind-arrow {display: none;text-align: center;margin-top: 30px;margin-bottom: 25px;}#wind-arrow {display: block;font-size: 120px;color: #fff;}#metar-popup .popup-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 12px;margin-top: 5px;margin-left: 22px;color: white;}#metar-popup .popup-header h2 {margin: 0;font-size: 18px;color: white;}#metar-popup .close-button {position: absolute;top: 10px;right: 22px;width: 40px;margin-top: 5px;height: 40px;margin: 5px;}.metar-content {flex: 1;overflow-y: hidden;padding: 0 10px;-ms-overflow-style: none;scrollbar-width: none;}.metar-footer {padding: 10px;margin-top: 0px;background: #14111F;margin-left: 10px;}.metar-content::-webkit-scrollbar {display: none;}.metar-popup::-webkit-scrollbar {display: none;}#side-menu-overlay {position: absolute;top: 0;left: 0;backdrop-filter: blur(5px);transition: opacity 0.3s ease;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.5);display: none;z-index: 9998;animation-duration: 0.3s;animation-fill-mode: forwards;}@keyframes overlayFadeIn {from {opacity: 0;}to {opacity: 1;}}@keyframes overlayFadeOut {from {opacity: 1;}to {opacity: 0;}}#side-menu-overlay.show {display: block;animation: overlayFadeIn 0.3s ease forwards;}#side-menu-overlay.hide {display: block;animation: overlayFadeOut 0.3s ease forwards;}#side-menu {position: absolute;top: 0px;bottom: 0px;left: 0px;width: 330px;background-color: #14111F;border: 2px solid #636381;border-radius: 5px;display: none;flex-direction: column;justify-content: space-between;overflow: hidden;z-index: 10000;animation-duration: 0.3s;animation-fill-mode: forwards;padding: 0;}.side-menu .close-button {position: absolute;top: 10px;width: 40px !important;height: 40px !important;right: 10px;background: transparent;border: none;font-size: 24px;color: white;cursor: pointer;z-index: 10001;}@keyframes fadeDownIn {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}@keyframes fadeDownOut {from {opacity: 1;transform: translateY(0);}to {opacity: 0;transform: translateY(-10px);}}#side-menu.show {display: flex;animation: fadeDownIn 0.3s ease forwards;}#side-menu.hide {display: flex;animation: fadeDownOut 0.3s ease forwards;}#side-menu-top-image {text-align: left;margin: 17px 14px 3px 12px;}#side-menu-header {display: flex;justify-content: space-between;align-items: center;padding: 10px;}.side-menu .close-button {border: none;font-size: 24px !important;color: white;cursor: pointer;}#side-menu-header {height: 45px;}#side-menu-header button {width: 40px;height: 40px;margin-top: 7px;font-size: 20px;cursor: pointer;padding: 0;margin-right: 10px;outline: none;}.full-divider {border: 0;border-top: 1px solid #636381;width: 100%;margin: 5px 0;}#side-menu-items {list-style: none;margin: 0;padding: 0;overflow-y: auto;flex-grow: 1;}.side-menu-divider {border: 0;border-top: 1px solid #636381;width: 60%;margin: 15px auto;}.side-menu-item {display: flex;align-items: center;justify-content: space-between;padding: 8px 10px;margin: 5px 10px;border: 2px solid #636381;border-radius: 10px;background-color: white;color: #7F1DF0;font-size: 14px;font-weight: bold;cursor: pointer;transition: background-color 0.3s ease;}.side-menu-item:hover {background-color: rgb(165, 165, 165);}.side-menu-item-icon {margin-right: 6px;font-size: 16px;}.side-menu-item-text {flex-grow: 1;}.side-menu-item-chevron {margin-left: auto;}#side-menu-bottom {display: flex;align-items: center;justify-content: space-between;margin-top: 0;margin-bottom: 5px;padding: 8px 10px;}#legal-btn {width: 90px;height: 38px;border: 2px solid #636381;border-radius: 10px;background-color: white;color: #7F1DF0;font-size: 13px;font-weight: bold;font-family: 'Inter', sans-serif;cursor: pointer;display: flex;align-items: center;justify-content: center;text-align: center;gap: 0px;transition: background-color 0.3s ease;}#legal-btn:hover {background-color: rgb(165, 165, 165);}#side-menu-bottom img {margin-bottom: 0;height: 40px;width: auto;display: block;}.circle-menu-section-divider {border: 0;border-top: 1px solid #636381;width: 100%;margin: 10px 0;}.circle-menu-item {display: flex;align-items: center;justify-content: flex-start;padding: 8px 10px;border: 2px solid #636381;border-radius: 10px;cursor: pointer;font-size: 13px;font-weight: bold;background-color: white;color: #7F1DF0;margin: 5px 10px;transition: background-color 0.3s ease;}.circle-menu-item:hover {background-color: rgb(165, 165, 165);}.circle-menu-item-icon {margin-right: 8px;}.circle-menu-item-text {flex-grow: 1;}.circle-menu-item-check {margin-left: auto;}#mapping-blur {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.2);backdrop-filter: blur(5px);transition: opacity 0.3s ease;opacity: 0;z-index: 11000;}#mapping-popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 95vw;max-width: 600px;max-height: calc(80vh - 15px);height: auto;background-color: #14111F;border: 2px solid #636381;border-radius: 5px;z-index: 11001;padding: 20px 10px 0 10px;box-sizing: border-box;overflow-y: auto;scrollbar-width: none;-ms-overflow-style: none;opacity: 0;transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;}#mapping-popup::-webkit-scrollbar {display: none;}#mapping-popup.expanded {max-height: calc(100vh - 15px);}@media (max-height: 800px) {#mapping-popup {max-height: calc(75vh - 30px);transform: translate(-50%, -52%);}}@media (max-height: 700px) {#mapping-popup {max-height: calc(70vh - 40px);transform: translate(-50%, -55%);}}@media (max-height: 600px) {#mapping-popup {max-height: calc(65vh - 50px);transform: translate(-50%, -58%);}}@media (max-height: 500px) {#mapping-popup {max-height: calc(60vh - 60px);transform: translate(-50%, -60%);}}@keyframes mappingFadeIn {from {opacity: 0;transform: translate(-50%, calc(-50% + 10px));}to {opacity: 1;transform: translate(-50%, -50%);}}@keyframes mappingFadeOut {from {opacity: 1;transform: translate(-50%, -50%);}to {opacity: 0;transform: translate(-50%, calc(-50% + 10px));}}#mapping-popup.show {animation: mappingFadeIn 0.3s ease forwards;display: block;}#mapping-popup.hide {animation: mappingFadeOut 0.3s ease forwards;}.mapping-top-row {display: flex;align-items: center;justify-content: space-between;padding: 0 10px;margin-bottom: 10px;height: 25px;}.mapping-title {font-size: 20px;font-weight: bold;color: white;margin-top: 2px;}#mapping-popup.show {animation: mappingFadeIn 0.3s ease forwards;}#mapping-popup.hide {animation: mappingFadeOut 0.3s ease forwards;}#mapping-blur.show {display: block;opacity: 1;}#mapping-blur.hide {opacity: 0;}#mapping-popup .close-button {width: 40px;height: 40px;margin-top: 7px;font-size: 20px;cursor: pointer;padding: 0;outline: none;}.mapping-settings-header {font-size: 18px;font-weight: bold;color: white;margin-top: 15px;margin-bottom: 0px;padding-left: 10px;}#style-header {font-size: 18px;font-weight: bold;color: white;margin-top: 25px;margin-bottom: 5px;padding-left: 10px;}#style-selector, #projection-selector {display: flex;justify-content: center;gap: 20px;margin-top: 10px;padding: 10px;}.projection-option {display: flex;align-items: center;gap: 10px;cursor: pointer;padding: 10px 16px;border: 2px solid #636381;border-radius: 10px;font-size: 16px;font-weight: bold;color: white;transition: border 0.15s ease-in-out;}.projection-option.active {border: 4px solid #7F1DF0;}.projection-icon {font-size: 18px;color: white;}#projection-warning {display: flex;align-items: center;justify-content: center;background: #D5A616;color: white;font-size: 14px;font-weight: bold;border-radius: 10px;padding: 12px;margin-top: 8px;width: 88%;max-width: 420px;margin-left: auto;margin-right: auto;opacity: 1;max-height: 50px;overflow: hidden;transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out, margin-top 0.3s ease-in-out;}#projection-warning.hide {opacity: 0;max-height: 0;padding: 0;margin-top: 0;}#projection-warning.hide {opacity: 0;max-height: 0;padding: 0;margin-top: 0;transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out, margin-top 0.3s ease-out;}#projection-warning.show {opacity: 1;max-height: 50px;}#projection-warning i {margin-right: 8px;font-size: 18px;}#style-selector {display: flex;gap: 10px;justify-content: center;margin-top: 20px;}.style-option {position: relative;width: 120px;height: 120px;border: 2px solid #636381;border-radius: 5px;overflow: hidden;cursor: pointer;transition: border 0.12s ease-in-out, box-shadow 0.12s ease-in-out, transform 0.1s ease-out;}.style-option.active {border: 4px solid #7F1DF0;box-shadow: 0 0 10px rgba(127, 29, 240, 0.7);transform: scale(1.03);transition: all 0.12s ease-in-out;}.style-option img {width: 100%;height: 100%;object-fit: cover;}.style-option::after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 40%;background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);transition: opacity 0.3s ease;}.style-label {position: absolute;bottom: 0px;width: 100%;color: #fff;text-align: center;font-size: 14px;font-weight: bold;z-index: 2;padding: 5px 0;}#other-settings-header {font-size: 18px;font-weight: bold;color: white;margin-top: 20px;margin-bottom: 5px;padding-left: 10px;}#other-settings-container {display: flex;flex-direction: column;gap: 12px;padding: 10px;}.toggle-option {display: flex;align-items: center;justify-content: space-between;color: white;font-size: 16px;font-weight: bold;padding: 10px 16px;border: 2px solid #636381;border-radius: 10px;cursor: pointer;transition: border 0.15s ease-in-out;}.toggle-option.active {border: 4px solid #7F1DF0;}.switch {position: relative;display: inline-block;width: 34px;height: 20px;}.switch input {opacity: 0;width: 0;height: 0;}.slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #636381;border-radius: 20px;transition: 0.3s;}.slider::before {position: absolute;content: "";height: 14px;width: 14px;left: 3px;bottom: 3px;background-color: white;border-radius: 50%;transition: 0.3s;}input:checked + .slider {background-color: #7F1DF0;}input:checked + .slider::before {transform: translateX(14px);}#legal-blur {display: none;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.2);backdrop-filter: blur(5px);transition: opacity 0.3s ease;opacity: 0;z-index: 11000;}#legal-popup {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 95vw;max-width: 600px;max-height: calc(85vh - 10px);height: auto;background-color: #14111F;border: 2px solid #636381;border-radius: 5px;z-index: 11001;padding: 20px 10px 0 10px;box-sizing: border-box;overflow-y: auto;scrollbar-width: none;-ms-overflow-style: none;opacity: 0;transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;}#legal-popup::-webkit-scrollbar {display: none;}@media (max-height: 700px) {#legal-popup {max-height: calc(90vh - 10px);transform: translate(-50%, -55%);}}@media (max-height: 600px) {#legal-popup {max-height: calc(95vh - 10px);transform: translate(-50%, -58%);}}@keyframes legalFadeIn {from {opacity: 0;transform: translate(-50%, calc(-50% + 10px));}to {opacity: 1;transform: translate(-50%, -50%);}}@keyframes legalFadeOut {from {opacity: 1;transform: translate(-50%, -50%);}to {opacity: 0;transform: translate(-50%, calc(-50% + 10px));}}#legal-popup.show {animation: legalFadeIn 0.3s ease forwards;display: block;}#legal-popup.hide {animation: legalFadeOut 0.3s ease forwards;}.legal-top-row {display: flex;align-items: center;justify-content: space-between;padding: 0 10px;height: 25px;}.legal-title {font-size: 20px;font-weight: bold;color: white;margin-top: 2px;}#close-legal-btn {position: absolute;top: 7px;right: 11px;width: 40px;height: 40px;margin: 5px;background-color: white;color: #7F1DF0;border: 2px solid #636381;border-radius: 10px;font-size: 16px;font-weight: bold;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: background-color 0.1s;}#close-legal-btn:hover {background-color: rgb(165, 165, 165);}#close-legal-btn i {font-size: 19px;margin-right: 0 !important;}#legal-content {color: white;font-size: 15px;line-height: 1.4;padding: 0 10px 20px 10px;box-sizing: border-box;margin-top: 5px;scrollbar-width: thin;scrollbar-color: transparent transparent;-ms-overflow-style: none;}#legal-content {overflow-y: auto;max-height: calc(85vh - 80px);padding-right: 15px;}#legal-content::-webkit-scrollbar {width: 0px;height: 0px;display: none;}#legal-popup {overflow: hidden;}#mesoscale-popup {font-family: 'Inter', sans-serif !important;font-size: 17px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;max-width: 800px;height: 100%;background-color: #14111F;z-index: 10000000;display: none;overflow-y: auto;padding: 20px;box-sizing: border-box;border: 2px solid #636381;border-radius: 8px;animation: fadeInUp 0.3s ease-in-out;-ms-overflow-style: none;scrollbar-width: none;}#mesoscale-popup::-webkit-scrollbar {display: none;}#mesoscale-popup .popup-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}#mesoscale-popup #mesoscale-popup-title {background-color: blue;color: white;font-weight: bold;font-size: 20px;padding: 8px 12px;border-radius: 5px;text-align: left;margin: 0;display: block;width: fit-content;}#mesoscale-popup .close-button {background-color: white;color: #7F1DF0;border: 2px solid #636381;border-radius: 10px;width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;cursor: pointer;font-weight: bold;font-size: 16px;transition: background-color 0.1s;}#mesoscale-popup .close-button:hover {background-color: rgb(165, 165, 165);}#mesoscale-popup .close-button i {font-size: 19px;margin-right: 0 !important;}#mesoscale-popup.show {display: block;animation: fadeInUp 0.3s ease-in-out;}#mesoscale-popup.hide {animation: fadeOutDown 0.3s ease-in-out;display: block;}