.dark-mode .ap-bg-dark {
    background-color: #1F2224 !important;
}


.search-group {
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #888;
    display: flex;
}

.dark-mode .search-group {
    background-color: #1f1f1f;
}

.input-group span {
    background-color: white !important;
}

.search-group .form-control {
    background-color: transparent;
    color: #ccc;
    border: none;
    box-shadow: none;
}

.search-group .form-control::placeholder {
    color: #aaa;
}

.dark-mode .search-group .input-group-text {
    background-color: transparent;
    border: none;
    color: #ccc;
}

.btn-search {
    background-color: #d6c68c;
    border: none;
    color: #000;
    padding: 0 30px;
    border-radius: 15px;
    font-weight: 600;
}

.input-divider {
    border-left: 1px solid #888;
}

.flatpickr-calendar {
    background: #212529;
    color: #fff;
    border: 1px solid #444;
    border-radius: 10px;
    font-family: system-ui;
    z-index: 9999;
}

.flatpickr-months,
.flatpickr-weekdays,
.flatpickr-days {
    background: #212529;
}

.flatpickr-day.selected {
    background: #d6c68c;
    color: #000;
}

.flatpickr-day.today {
    border-color: #d6c68c;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    background-color: #212529;
    border-radius: 50%;
    color: #000;
    padding: 5px;
}

.flatpickr-shortcuts {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: #212529;
    border-bottom: 1px solid #444;
}

.flatpickr-shortcuts button {
    background-color: transparent;
    border: 1px solid #666;
    color: #fff;
    padding: 6px 12px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.flatpickr-shortcuts button:hover {
    background-color: transparent;
    color: #000;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    top: 61px;
    height: 27px;
    padding: 0px;
    width: 27px;
    margin: 0px 10px;
    background-color: #bdb187;
}


.flatpickr-months .flatpickr-month {
    background-color: #212529;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday {
    background-color: #212529;
}

.dark-mode .card-background {
    background-color: #22262A !important;
}

.assessment-timing-list .timing-div:hover {
    background-color: #bdb187 !important;
    color: #000 !important;
}

.assessment-timing-list .timing-div:hover a {
    color: #000 !important;
}

#add-booking-form .add-swimmer .border-0-5 {
    border: 1px solid #2a2e31;
    border-radius: 0.5rem;
    border-color: var(--border-color) !important;
}

#secondModal {
    background-color: #0000007d !important;
}

.form-radio-input:checked {
    accent-color: #bdb187;
}

.form-radio-input:checked~.form-radio {
    background-color: #bdb187;
}

.light-mode .form-group span {
    color: #4c4c4c;
}

.dark-mode .form-group span {
    color: white !important;
}

@media (max-width: 600px) {
    .swimmer-date-time div {
        border: none !important;
    }

    .search-group {
        display: block !important;
    }

    .search-group .input-divider {
        border: none !important;
    }

    .crm-search-btn {
        margin-top: 1rem;
    }

    .crm-timing-page .venue-container1,
    .crm-timing-page .venue-container2 {
        width: 100% !important;
    }

    .venue-container1 .card-link .small-screen-responsive {
        flex-direction: row !important;
    }

    .venue-container1 .card-link .image {
        width: 30%;
    }

    .venue-container1 .card-link .image img {
        height: 80px;
        width: 100%;
    }

    .name-heading {
        font-size: 18px !important;
    }

    .venue-container1 .card-link .venue_data {
        width: 70%;
    }

    .parking-data {
        display: none !important;
    }

    .timer-container a {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    .assessment-grids .border-end {
        border-right: none !important;
    }

    .dark-mode .assessment-details {
        background-color: #2A2E31 !important;
    }

    .dark-mode #add-booking-form span {
        color: #B9B9BA !important;
    }


    #add-booking-form .add-swimmer {
        flex-direction: row !important;
    }

}