#warningMessage {
    display: none;
}

@media only screen and (orientation: portrait) {
    #app {
        display: none;
    }

    #warningMessage {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* Basic body styling */
        body {
            font-family: 'Inter', sans-serif; /* Using Inter font */
            padding: 20px;
            background-color: #f8f9fa; /* Light background */
        }

        /* Main container for all filters */
        .filter-container {
            width: 100%;
            display: flex;
            flex-wrap: wrap; /* Allow filter columns to wrap onto the next line */
            gap: 20px; /* Space between filter columns */
            justify-content: center; /* Center columns if space allows */
        }

        /* Styling for each filter column */
        .filter-column {
            flex: 1 1 220px; /* Min width 220px, allows growing/shrinking */
            text-align: center;
            border: 1px solid #dee2e6; /* Light border */
            border-radius: 8px; /* Rounded corners */
            padding: 15px;
            box-sizing: border-box; /* Include padding/border in element's total width/height */
            margin-bottom: 20px; /* Space below each column */
            background-color: #ffffff; /* White background for columns */
            box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
        }

        /* Column headings */
        .filter-column h3 {
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 1.1em;
            color: #495057; /* Darker grey text */
            border-bottom: 1px solid #e9ecef; /* Separator line */
            padding-bottom: 10px;
        }

        /* Slider specific styles */
        .slider-group {
            margin-top: 15px;
            padding: 0 10px; /* Add some padding for the slider */
        }

        /* Container for the noUiSlider element */
        .slider-container {
            height: 50px; /* Provide space for the slider */
            margin-bottom: 10px; /* Space below slider */
        }

        /* Styling for the value display area */
        .value-display {
            display: flex;
            justify-content: space-between; /* Space out min and max values */
            margin-top: 10px; /* Space above value display */
            font-size: 0.9em;
            color: #495057;
        }
        .value-display span {
            font-weight: bold;
            color: #0d6efd; /* Match accent color */
            background-color: #e7f1ff; /* Light blue background */
            padding: 3px 6px;
            border-radius: 4px;
        }

        /* --- noUiSlider Customization --- */
        /* Slider bar */
        .noUi-target {
            background: #e9ecef;
            border-radius: 3px;
            border: none;
            box-shadow: none;
            height: 6px; /* Slider track height */
        }
        /* Connection bar between handles */
        .noUi-connect {
            background: #0d6efd; /* Color between handles */
        }


        /* --- Attempt to constrain touch area --- */
        /* The .noUi-origin div positions the handle. Let's ensure it doesn't have extra margin */
        .noUi-origin {
             /* Default might add margin for touch, try overriding */
             /* margin: 0; */ /* This might misalign handles, be careful */
             /* Alternatively, target the touch area directly if needed, though often it's part of the handle */
        }
        /* Explicitly style the touch area if it's a separate element (less common now) */
        .noUi-touch-area {
            /* Force size to match handle */
             height: 6px;
             width: 14px;
             /* Adjust positioning if necessary */
             /* top: 0; */
             /* left: 0; */
        }

                /* Slider handles (visual part) - Using more specific selector */
        .noUi-horizontal .noUi-handle { /* UPDATED SELECTOR */
            border-radius: 50%;
            background: #0d6efd; /* Handle color */
            border: none;
            box-shadow: none;
            /* Keep the slightly smaller visual size */
            height: 14px;
            width: 14px;
            /* Adjusted position for size */
            top: -4px;
            right: -7px;
            cursor: pointer;
            /* Ensure no extra padding increases touch area */
            padding: 0;
        }
        .noUi-horizontal .noUi-handle:focus { /* UPDATED SELECTOR */
            outline: none; /* Remove focus outline */
        }
         /* Hide the default :before and :after pseudo-elements on handles */
         .noUi-horizontal .noUi-handle::before, /* UPDATED SELECTOR */
         .noUi-horizontal .noUi-handle::after { /* UPDATED SELECTOR */
            display: none;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .filter-column {
                flex-basis: calc(50% - 10px); /* Two columns on medium screens */
            }
        }
        @media (max-width: 480px) {
            .filter-column {
                flex-basis: 100%; /* Single column on small screens */
            }
            body {
                padding: 10px;
            }
            .filter-container {
                gap: 10px;
            }
        }

html, body {
    height: 99%;
    width: 99%;
}

.two-column-div {
 column-count: 2;
}

.month-container {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    text-align: center;
    /*font: calc(2vh) "Helvetica", sans-serif;*/
    justify-content: center;
    padding: 2em;
}


.month-calendar {
    display: grid;
    justify-content: center;
    text-align: center;
    grid-template-columns: repeat(7, 1fr);
    max-width: 1024px;
    width: 99%;
}

.month-calendar-routes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1024px;
    width: 99%;
}

.c3-circle {
    opacity: 1 !important;
}

.c3-grid text {
    fill: black;
}

.c3-grid line {
    stroke: black;
}

.range-wrap {
  position: relative;
  margin: 0 auto 3rem;
}
.range {
  width: 100%;
}
.bubble {
  background: red;
  color: white;
  padding: 4px 12px;
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translateX(-50%);
    margin-top: 20px;
}
.bubble::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: red;
  top: -10px;
  left: 50%;
}