/* VanillaCalendar plugin CSS overrides and customization */

.vanilla-calendar {
	width: 100%;
}

/* put a bit more space between each day */
[data-calendar-theme=light] .vanilla-calendar-day {
	padding: 1px;
}

/* do not highlight the weekend days */
[data-calendar-theme=light] .vanilla-calendar-week__day_weekend {
	color: #64748b;
}

[data-calendar-theme=light] .vanilla-calendar-day__btn_weekend,
[data-calendar-theme=light] .vanilla-calendar-day__btn_holiday {
	color: #0f172a;
}

/* use the same background highlight on weekends as on weekdays */
[data-calendar-theme=light] .vanilla-calendar-day__btn_weekend:hover,
[data-calendar-theme=light] .vanilla-calendar-day__btn_holiday:hover,
[data-calendar-theme=light] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_hover,
[data-calendar-theme=light] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_hover {
	--tw-bg-opacity: 1;
	background-color: rgb(241 245 249 / var(--tw-bg-opacity));
}

/* Override background color on month selection */
[data-calendar-theme=light] .vanilla-calendar-months__month.vanilla-calendar-months__month_selected, [data-calendar-theme=light] .vanilla-calendar-months__month.vanilla-calendar-months__month_selected:hover {
	background-color: var(--primary);
}

/* Override background color on year selection */
[data-calendar-theme=light] .vanilla-calendar-years__year.vanilla-calendar-years__year_selected, [data-calendar-theme=light] .vanilla-calendar-years__year.vanilla-calendar-years__year_selected:hover {
	background-color: var(--primary);
}

/* highlight days that have at least one session */
.vanilla-calendar-day .available {
	border: solid var(--light-gray) 2px;
	/* border-radius: 0; */
}

/* highlight days in which the student has a registered session */
.vanilla-calendar-day .registered {
	background-color: var(--primary);
	color: var(--white);
	/* border-radius: 0; */
}

/* Override day on hover */
[data-calendar-theme=light] .vanilla-calendar-day__btn:hover {
	color: #0f172a;
	border-radius: 0.5rem;
	border: 0;
}

/* Overrided selected day on hover */
[data-calendar-theme=light] .vanilla-calendar-day__btn_selected:hover {
	color: #fff;
}

/* Override day selected */
[data-calendar-theme=light] .vanilla-calendar-day__btn_selected,
[data-calendar-theme=light] .vanilla-calendar-day__btn_selected:hover {
	border: solid var(--gray) 4px;
}

/* highlight days that have at least one session */
.vanilla-calendar-day .frontavailable {
	border: solid black 2px;
	border-radius: 20%;
}
.vanilla-calendar-day .canceled {
	border: solid #df3a10 2px;
}




[data-calendar-theme=light] .vanilla-calendar-day__btn_today {
  background: var(--primary);
  color: #fff;
}
[data-calendar-theme=light] .vanilla-calendar-day__btn_today:hover {
  background: var(--secondary);
  color: #fff;
}


[data-calendar-theme=light] .vanilla-calendar-day__btn_selected,
[data-calendar-theme=light] .vanilla-calendar-day__btn_selected:hover {
    background: var(--primary);
    color: #fff;

}


[data-calendar-theme=light] .vanilla-calendar-week__day_weekend {
color: #64748b;
}


[data-calendar-theme=light] .vanilla-calendar-day__btn_weekend,
[data-calendar-theme=light] .vanilla-calendar-day__btn_holiday {
  color: inherit;
}
[data-calendar-theme=light] .vanilla-calendar-day__btn_weekend:hover,
[data-calendar-theme=light] .vanilla-calendar-day__btn_holiday:hover,
[data-calendar-theme=light] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_hover,
[data-calendar-theme=light] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_hover {
  background: inherit;
}


[data-calendar-theme=light] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_selected,
[data-calendar-theme=light] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_selected,
[data-calendar-theme=light] .vanilla-calendar-day__btn_weekend.vanilla-calendar-day__btn_selected:hover,
[data-calendar-theme=light] .vanilla-calendar-day__btn_holiday.vanilla-calendar-day__btn_selected:hover {
  color: inherit;
  background: inherit;
  border: 2px solid #eee;
  border-radius: 0 !important;
  width: 80%;

}