/* Targeting the wrapper */
.customDateTimePicker {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: linear-gradient(to left bottom, rgb(55, 81, 126) 40%, rgb(71, 178, 228) 100%);
    padding: 0px;
    border: medium;
    margin-bottom: 1%;
    /* width: 175px; */
    text-align: center;
    color: hsl(0, 0%, 50%);
}

/* You might need to inspect the element and target the internal parts specifically */
.customDateTimePicker .react-datetime-picker__wrapper {
    border: none;
}

.customDateTimePicker.date-selected {
    color: white;
    /* Text color is white after a date is selected */
}

[class^="react-datetime-picker__inputGroup__input react-datetime-picker__inputGroup__"] {
    background: none;
}

.react-calendar {
    background: linear-gradient(to left bottom, rgb(55, 81, 126) 40%, rgb(71, 178, 228) 100%);
    border: none;
    color: white;
    /* Adjust text color for readability */
}

.react-calendar__navigation {
    background: rgba(0, 0, 0, 0.2);
    /* Slightly darker shade for the navigation bar for contrast */
}

.react-calendar__navigation button {
    color: white;
}

.react-calendar__month-view__weekdays {
    background: rgba(0, 0, 0, 0.1);
    /* Lighter shade for weekdays */
    color: white;
}

.react-calendar__tile {
    border: none;
    color: white;
    /* Ensure the dates are readable */
}

.react-calendar__tile:enabled:hover,
.react-calendar__tile:enabled:focus {
    background: rgba(255, 255, 255, 0.2);
    /* Light highlight for hover/focus */
}

.react-calendar__tile--active {
    background: rgba(255, 255, 255, 0.3);
    /* Distinct style for the active/selected date */
    color: white;
}

.nowButton {
    /* color: white; */
    border: none;
    background: none;
}

.react-datetime-picker__calendar-button__icon.react-datetime-picker__button__icon {
    stroke: white !important;
}