#calendar {
  text-align: center;
  background-color: rgba(135, 206, 235, 0); /* Fully transparent background */ 
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#selectedDate {
  margin-top: 10px;
  font-size: 16px;
}

#selectedDate span {
  color: #ffffff;
  cursor:rgb(255, 255, 255)r;
  text-decoration: none;
}

#selectedDateText {
  color: #007bff !important;
  cursor:rgb(255, 255, 255)r;
  text-decoration: none;
}

#options {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
  flex-direction: row;
}

#datePicker {
  margin-top: 10px;
}

#timeContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 15px;
}

#hour,
#minutes,
#amPm,
#timezone {
  width: 30%;
  margin-bottom: 10px;
}

#nameInput {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  box-sizing: border-box;
}

#submitBtn {
  cursor: pointer;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  width: 100%;
}

/* Custom styles for the date picker calendar */
.flatpickr-calendar {
  background-color: rgba(24, 165, 220, 0); /* Fully transparent background */
  color: #da1b1b; /* Text color */
  border:1px solid  #007bff;
  box-shadow: none;
  border-radius: 5%;
  width: 380px;
}

.flatpickr-day:hover {
  background-color: #007bff !important; /* Fully transparent background */
  color: #ffffff !important;
}

/* Custom styles for the selected date */
.flatpickr-day.selected {
  background-color: transparent; /* Fully transparent background */
  color: #007bff !important;
}

.flatpickr-day.selected:hover {
  color: #ffffff !important;
}

/* Custom styles for the current month and year text color */
.flatpickr-current-month,
.flatpickr-current-year {
  color: #007bff; /* Text color */
}

.flatpickr-monthDropdown-months,
.flatpickr-yearDropdown-years {
  background-color: #ff0000; /* Change to the desired color */
  color: #db0000; /* Text color */
}

.flatpickr-day.today {
  background-color: rgba(255, 255, 255, 0.217); /* Fully transparent background */
  color: #333; /* Text color for the current date */
  border-radius: 50%; /* Optional: Make the current date circle-shaped */
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: transparent !important;
  background-color: transparent !important; /* Change to the desired color for days not in the current month */
  border-color: transparent !important; /* Change to the desired color for days not in the current month */
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay:hover {
  color: transparent !important;
  border-color: transparent !important;
  background-color: transparent !important; /* Change to the desired color for days not in the current month */
}

.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.preMonthDay {
  border-color: transparent !important;
  color: transparent !important;
}

.flatpickr-prev-month,.flatpickr-next-month {
  background-color: transparent !important;
  color: transparent !important;
  border-color: transparent !important; /* Change to the desired color */
}

#hour {
  background-color: transparent;
  border: 1px solid #007bff;
  border-radius: 8%;
  width: 46px;
  outline: none;
}

#hour option {
  background:#333;
}

/* Style the selected option */
#hour option:checked {
  background-color: #007bff; /* Background color of the selected option */
  color: #fff; /* Text color of the selected option */
}

#minutes {
  background-color: transparent;
  border: 1px solid #007bff;
  border-radius: 8%;
  width: 46px;
  outline: none;
}

#minutes option {
  background:#333;
}

/* Style the selected option */
#minutes option:checked {
  background-color: #007bff; /* Background color of the selected option */
  color: #fff; /* Text color of the selected option */
}

#amPm {
  background-color: transparent;
  border: 1px solid #007bff;
  border-radius: 8%;
  width: 69px;
  outline: none;
}

#amPm option {
  background:#333;
}

/* Style the selected option */
#amPm option:checked {
  background-color: #007bff; /* Background color of the selected option */
  color: #fff; /* Text color of the selected option */
}

#time {
  margin-bottom: 10px;
}

#break {
  margin-top: -10px;
}

#timeContainer {
  display: flex;
  flex-direction: row;
  width: 250px;
  font-size: 13px;
  margin-right: 10px;
}

#timeZoneSelect {
  display: flex;
  flex-direction: row;
  font-size: 13px;
  margin-bottom: -10px;
  margin-right: 10px;
}

#timezone {
  background-color: transparent;
  border: 1px solid #007bff;
  border-radius: 8%;
  width: 52px;
  height: 20px;
  outline: none;
  margin-left: 4px;
}

#timezone option {
  background:#333;
}

/* Style the selected option */
#timezone option:checked {
  background-color: #007bff; /* Background color of the selected option */
  color: #fff; /* Text color of the selected option */
}

#nameInput {
  background-color: transparent;
  border: 1px solid #007bff;
  width: 75%;
  outline: none;
  height: 25px;
  margin-right: 10px;
  margin-left: 10px;
}
#name {
  display: flex;
  flex-direction: row;
}

#yourName {
  margin-left: 10px;
}

.flatpickr-rContainer {
  margin-left: 10%;
}