#header-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

#date-filter-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: auto;
}

#primary-date-filter,
#secondary-date-filter {
    width: 140px;
}

#date-filter,
#second-date-filter {
    font-family: 'Arial', sans-serif;
    font-size: 9px;
    font-weight: normal;
    padding: 6.5px;
    background-color: #e0e0e0;
    border: none;
    border-radius: 6.5px;
    color: #333;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

#date-filter:hover,
#second-date-filter:hover {
    background-color: #ccc;
}

#date-filter:focus,
#second-date-filter:focus {
    outline: none;
}

/* Background color for light mode */
body.light-mode #date-filter,
body.light-mode #second-date-filter {
    background-color: #e0e0e0;
}

body.light-mode #date-filter:hover,
body.light-mode #second-date-filter:hover {
    background-color: #ccc;
}

/* Toggle Switch Styling */
.switch {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 14.3px;
    vertical-align: middle;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0.65px;
    left: 0.65px;
    right: 0.65px;
    bottom: 0.65px;
    background-color: #ccc;
    transition: .4s;
    border-radius: 13px;
    box-sizing: border-box;
}

.slider:before {
    position: absolute;
    content: "";
    height: 10.4px;
    width: 10.4px;
    left: 1.3px;
    bottom: 1.3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(11.7px);
}

.slider.round {
    border-radius: 13px;
}

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

#compare-toggle-container {
    display: flex;
    align-items: center;
    margin-top: 5px;
    justify-content: flex-end;
}

#compare-toggle-container label {
    font-family: 'Arial', sans-serif;
    font-size: 9px;
    margin-right: 6.5px;
    color: var(--darkt);
    line-height: 14.3px;
}

body.light-mode #compare-toggle-container label {
    color: var(--lightt);
}

/* Datepicker text color adjustments */
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table thead th,
.daterangepicker .calendar-table .month,
.daterangepicker .calendar-table .year,
.daterangepicker .calendar-table .prev,
.daterangepicker .calendar-table .next {
    font-family: 'Arial', sans-serif;
    color: #ccc !important;
}

body.light-mode .daterangepicker .calendar-table th,
body.light-mode .daterangepicker .calendar-table thead th,
body.light-mode .daterangepicker .calendar-table .month,
body.light-mode .daterangepicker .calendar-table .year,
body.light-mode .daterangepicker .calendar-table .prev,
body.light-mode .daterangepicker .calendar-table .next {
    color: #555 !important;
}

/* Adjust the text color of preset selections */
.daterangepicker .ranges li {
    color: #ccc !important;
}

body.light-mode .daterangepicker .ranges li {
    color: #555 !important;
}

/* Adjust hover state of preset selections */
.daterangepicker .ranges li:hover {
    background-color: #444;
    color: #fff !important;
}

body.light-mode .daterangepicker .ranges li:hover {
    background-color: #ddd;
    color: #000 !important;
}

/* Adjust text color for off-month days (previous/next month) */
.daterangepicker .calendar-table .off,
.daterangepicker .calendar-table .off.in-range {
    color: #888 !important;
}

body.light-mode .daterangepicker .calendar-table .off,
body.light-mode .daterangepicker .calendar-table .off.in-range {
    color: #bbb !important;
}

/* Fix for specific calendar cells (day, month, year) with white text */
.daterangepicker td.available,
.daterangepicker td.off.available {
    color: #888 !important;
}

body.light-mode .daterangepicker td.available,
body.light-mode .daterangepicker td.off.available {
    color: #333 !important;
}