/* Main */

        html, body {
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        #map {
            position: fixed;
            inset: 0;
            z-index: 1;
        }

.leaflet-attribution-flag {
    display: none !important;
}

        /* ==========================
           Desktop sidebar
        ========================== */

        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 40%;
            /* min-width: 360px;
            max-width: 550px; */
            height: 100vh;
            background: #fff;
            z-index: 1000;

            display: flex;
            flex-direction: column;
            transition: transform .3s ease;
            box-shadow: 0 0 20px rgba(0,0,0,.25);
        }

        .sidebar-header {
            flex-shrink: 0;
            background: #0d6efd;
            color: white;
            padding: 1rem;
            user-select: none;
            touch-action: none;
        }

        .drag-handle {
            display: none;
        }

        .sidebar-body {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
        }


        .sidebar.hidden {
            transform: translateX(-100%);
        }

        /* ==========================
           Mobile Bottom Sheet
        ========================== */

        @media (max-width:768px) {

            .sidebar {
                left: 0;
                right: 0;
                bottom: 0;
                top: auto;

                width: 100%;
                min-width: 100%;
                max-width: 100%;

                height: 100vh;

                border-radius: 18px 18px 0 0;

                transform: translateY(55%);
                transition: transform .25s ease;
            }

            .sidebar-header {
                cursor: grab;
                text-align: center;
                padding-top: .5rem;
            }

            .drag-handle {
                display: block;
                width: 60px;
                height: 6px;
                margin: 0 auto 12px;
                border-radius: 10px;
                background: rgba(255,255,255,.7);
            }

            .sidebar.hidden {
                transform: translateX(-100%);
            }

            #sidebarToggle {
                visibility: hidden;
            }
        }

        table {
            font-size: .9rem;
        }

/* Chart */
.ct-series-a .ct-line {
    stroke-width: 2px;
}

.ct-series-b .ct-line {
    stroke-width: 2px;
}

.ct-series-a .ct-area {
    fill-opacity: 0.15;
}

.ct-series-b .ct-area {
    fill-opacity: 0.15;
}

/*metstations*/
.temp-label 
{
    background: transparent;
    border: none;
    color: black;
    font-size: 16px;
    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white;
}

.temp-label-water
{
    background: transparent;
    border: none;
    color: rgb(17, 0, 255);
    font-size: 16px;
    text-shadow:
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white;
}


.custom-marker {
  background: transparent;
  border: none;
}

.marker-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
}

.value {
  font-size: 14px;
  font-weight: bold;
  color: #003296;
  line-height: 1;
}

.wave {
  width: 34px;
  height: 8px;
  margin-top: 2px;
}