/*datepicker styling*/

.calendar-container.calendar-style {
  max-width: 768px;
  display: flex;
  justify-content: center;
  padding: 10px;
  background: white;
  border-radius: 1rem;
  box-shadow: none
}

.calendar-style .react-calendar {
  max-width: 720px;
  box-shadow: none;
  background-color: white;
  border-radius: 1rem;
  padding: 0;
}

.calendar-style .react-calendar .react-calendar__navigation button {
  color: #2D3436;
  padding: 0;
}

.calendar-style .react-calendar .react-calendar__navigation button.react-calendar__navigation__prev-button,
.calendar-style .react-calendar .react-calendar__navigation button.react-calendar__navigation__next-button {
  position: relative;
  top: -3px;
  font-size: 2rem;
  font-weight: 400;
  line-height: inherit;
  border-radius: 0;
}

.calendar-style .react-calendar__month-view__weekdays {
  font-weight: 400 !important;
  background-color: white;
}

.calendar-style .react-calendar__month-view__weekdays__weekday {
  padding: 0.75rem 0.5rem;
  font-size: 0.9rem;
  color: #999;
  font-weight: bold;
}

.calendar-style.react-calendar__navigation button {
  font-size: 1.1rem;
}

.react-calendar__tile.react-calendar__tile--now.react-calendar__tile--hasActive.react-calendar__decade-view__years__year {
  color: inherit !important;
}

.calendar-style .react-calendar__tile--active {
  background-color:  white !important;
}
.calendar-style .react-calendar__tile--active abbr{
  width: 30px;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  border-radius: 30px;
  background: #3E6AFC !important;
  color: white;
}

.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__year-view__months__month abbr {
  color: white !important;
  font-weight: bold;
}

.react-calendar__tile.react-calendar__tile--hasActive.react-calendar__decade-view__years__year, 
.react-calendar__tile.react-calendar__tile--now.react-calendar__tile--hasActive.react-calendar__century-view__decades__decade {
  color: white !important;
  font-weight: bold;
}

.react-calendar__tile--hasActive {
  background: white !important;
}
.react-calendar__tile--hasActive abbr{
  background: #3E6AFC !important;
  color: white !important;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 50px;
  border-radius: 50px;
}
.react-calendar__tile--now {
  background: white !important;
}
.react-calendar__tile--now abbr {
  background: #00B894 !important;
  color: white !important;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 50px;
  border-radius: 50px;
}
.react-calendar__month-view__days__day.react-calendar__tile--now abbr {
  width: 30px;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  border-radius: 30px;
}

abbr[title] {
  text-decoration: none;
}

.react-calendar__navigation button:hover {
  background: transparent !important;
}

.tile-weekday{
  color: var(--color-111111) !important;
}
.tile-saturday{
  color: var(--color-4968BD) !important;
}
.tile-sunday{
  color: #FF0000 !important; 
}
.filter-calendar-close{
  position: absolute;
  right: 0.4rem;
  top: 0.6rem;
}


@media (max-width: 768px) { 
  .calendar-style {
    position: absolute;
    left: 10px;
    right: 10px;
    max-width: 768px;
  }

  .calendar-style .react-calendar {
    max-width: 100%;
  }
}