/*
:root
{
--carousel-control-align: center;
--carousel-previous-background-image: url(images/carousel_previous_bg_image.png);
--carousel-next-background-image: url(images/carousel_next_bg_image.png);
--carousel-play-background-image: url(images/carousel_play_bg_image.png);
--carousel-pause-background-image: url(images/carousel_pause_bg_image.png);
}
*/

.calendar
{
	border: 2px solid #aaa; border-radius: 0.5rem; padding: 0.2rem
}

.calendar-yearly .calendar-mode-yearly, .calendar-bimonthly .calendar-mode-bimonthly, .calendar-monthly .calendar-mode-monthly
{
	filter: brightness(0.9)
}

.calendar-toolbar
{
	margin-left: 2rem;
	display: flex; gap: 0.2rem; align-items: center;
}

.calendar-gap
{
	flex-grow: 1
}


button.calendar-browse
{
	width: 3rem; flex-grow: 0; border-radius: 2rem
}

button.calendar-mode
{
	width: 4rem; flex-grow: 0; border-radius: 2rem
}


@media only screen and (min-width: 50rem)
{

.calendar-yearly-view
{
	grid-template-columns: repeat(3,1fr); row-gap: 1em; column-gap: 1em;
}

}

@media only screen and (max-width: 50rem)
{

.calendar-yearly-view
{
	grid-template-columns: repeat(2,1fr); row-gap: 0.3em; column-gap: 0.3em;
}

}

.calendar-yearly-view
{
	display: grid;
	align-items: start;
}

.calendar-bimonthly-view
{
	display: grid; grid-template-columns: repeat(2,1fr); row-gap: 1em; column-gap: 1em;
	align-items: start
}

.calendar-month-name
{
	font-weight: bold; font-size: 110%; min-width: 12rem; text-align: center; margin: 1em 0; border: 2px solid #aaa; border-radius: 2em; background: #eee;
}

.calendar-yearly-view .calendar-month-name
{
	font-weight: bold; font-size: 90%; min-width: 10rem; text-align: center; margin: 0.5em 0; border: 1px solid #aaa; border-radius: 2em; background: #eee;
}

.calendar-month
{
	display: flex; flex-direction: column;
	align-items: center;
}

.calendar-month-days
{
	display: grid; grid-template-columns: 2rem repeat(7,1fr); 
	grid-template-rows: repeat(6,1fr); row-gap: 3px; column-gap: 3px; align-items: center; align-self: stretch;
}

.calendar-yearly-view .calendar-week-number
{
	font-size: 65%; text-align: right; padding-right: 0.3em;
}

.calendar-bimonthly-view .calendar-week-number
{
	font-size: 75%; text-align: right; padding-right: 0.3em;
}

.calendar-monthly-view .calendar-week-number
{
	font-size: 80%; text-align: right; padding-right: 0.3em;
}

.calendar-day
{
	padding: 0.2em;
	border: 1px solid #aaa;
	border-radius: 0.3em;
	cursor: pointer;
	overflow: hidden;
}

.calendar-yearly-view .calendar-day
{
	aspect-ratio: 5/2;
	font-size: 70%;
}

.calendar-bimonthly-view .calendar-day
{
	aspect-ratio: 1/1;
	font-size: 80%;
}

.calendar-monthly-view .calendar-day
{
	aspect-ratio: 5/3;
}

.calendar-day.calendar-today
{
	background-color: #ccffff;
}

.calendar-yearly-view .calendar-day-peripheral, .calendar-bimonthly-view .calendar-day-peripheral
{
	visibility: hidden
}

.calendar-bimonthly-view .calendar-day-peripheral, .calendar-monthly-view .calendar-day-peripheral
{
	background-color: #eee;
}

.calendar-day.calendar-weekend
{
	background-color: #ddd;
	font-style: italic
}

.calendar-yearly-view .calendar-day.calendar-populated
{
	background: #ccccff;
}

.calendar-yearly-view .calendar-day.calendar-alert
{
	background: #ffcccc;
}

.calendar-bimonthly-view .calendar-day.calendar-populated, .calendar-monthly-view .calendar-day.calendar-populated
{
	box-shadow: inset 0 0 0 0.2em #ccccff;
}

.calendar-bimonthly-view .calendar-day.calendar-alert, .calendar-monthly-view .calendar-day.calendar-alert
{
	box-shadow: inset 0 0 0 0.2em #ffcccc;
}

.calendar-day:hover
{
	outline: 2px solid #888;
}

.calendar-item
{
	background: #ccffcc; border: 1px solid #33ff33;
	white-space: nowrap; max-width: 100%;
	overflow: hidden;
	margin-bottom: 0.1em;
}

.calendar-item.calendar-item-assigned
{
	background: #ccccff; border: 1px solid #5555ff;
}

.calendar-yearly-view .calendar-item
{
	display: none;
}

.calendar-bimonthly-view .calendar-item
{
	font-size: 65%;
}

.calendar-monthly-view .calendar-item
{
	font-size: 75%;
}

.calendar-day-list
{
	display: block;
	margin: 2rem;
	aspect-ratio: 16/7;
	overflow: auto;
}