.event-legend {
	margin: 10px 0;
	font-family: Arial, sans-serif;
}

.event-legend h3 {
	margin-bottom: 10px;
	font-size: 1.2em;
}

.event-legend ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap; /* Wrap items if needed */
	gap: 5px; /* Space between items */
}

.event-legend li {
	display: flex;
	align-items: center;
	cursor: pointer; /* Show pointer cursor for clickable items */
	transition: opacity 0.2s ease;
}

.event-legend li.disabled {
	opacity: 0.5; /* Dim the item when disabled */
}

.color-box {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 5px;
	border: 2px solid var(--event-color-border);
	background-color: var(--event-color-bg);
}

/*.event-legend { display: none; }*/

/* Colors */
.color-red {
	--event-color-bg: hsl(0, 50%, 96%);
	--event-color-border: hsl(0, 78%, 49%);
}

.color-magenta {
	--event-color-bg: hsl(336, 50%, 96%);
	--event-color-border: hsl(335, 71%, 49%);
}

.color-purple {
	--event-color-bg: hsl(270, 50%, 96%);
	--event-color-border: hsl(270, 61%, 59%);
}

.color-indigo {
	--event-color-bg: hsl(240, 63%, 97%);
	--event-color-border: hsl(240, 72%, 65%);
}

.color-blue {
	--event-color-bg: hsl(215, 67%, 96%);
	--event-color-border: hsl(217, 69%, 52%);
}

.color-sky {
	--event-color-bg: hsl(200, 64%, 95%);
	--event-color-border: hsl(200, 87%, 37%);
}

.color-teal {
	--event-color-bg: hsl(177, 54%, 93%);
	--event-color-border: hsl(176, 70%, 30%);
}

.color-green {
	--event-color-bg: hsl(144, 71%, 93%);
	--event-color-border: hsl(144, 52%, 34%);
}

.color-yellow {
	--event-color-bg: hsl(55, 100%, 95%);
	--event-color-border: hsl(37, 95%, 56%);
}

.color-orange {
	--event-color-bg: hsl(37, 100%, 94%);
	--event-color-border: hsl(33, 100%, 49%);
}

.color-brown {
	--event-color-bg: hsl(20, 16%, 93%);
	--event-color-border: hsl(15, 25%, 34%);
}

/* Focus styles */
.calendar-widget :focus {
	outline: 2px solid hsl(217, 100%, 70%);
}


/* Views */
.calendar-view {
	display: none;
}

.calendar-view.js-is-active {
	display: block;
}

.calendar-view-2 .calendar-events-list + h4 {
	margin-top: 1.5rem;
}


/* Filter form + view toggle */
.calendar-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

	.calendar-form .form {
		display: inline-flex;
		align-items: stretch;
		gap: .5em;
	}

	.calendar-form .toggle-view {
		height: 40px;
		display: flex;
		border: 1px solid hsl(0, 0%, 80%);
	}

		.calendar-form .toggle-view [data-tooltip] {
			border: 0;
		}

		.force_button {
			border-left: 1px solid grey !important;
		}
		
		.force_button:hover {
			text-decoration: none;
		}
		
		.calendar-form .toggle-view button, .force_button {
			width: 40px;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;
			background-color: transparent;
			border: 0;
			opacity: .5;
			cursor: pointer;
		}
		
		.calendar-form .toggle-view button::before, .force_button::before {
			content: "";
			width: 40%;
			height: 40%;
			-webkit-mask-image: var(--icon);
			mask-image: var(--icon);
			-webkit-mask-size: contain;
			mask-size: contain;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
			background-color: hsl(0, 0%, 13%);
		}

		.calendar-form .toggle-view .icon-view-1::before {
			--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M20 19h-4v-4h4v4zM14 9h-4v4h4V9zm6 0h-4v4h4V9zM8 15H4v4h4v-4zM24 1v22H0V1h24zm-2 6H2v14h20V7zm-8 8h-4v4h4v-4zM8 9H4v4h4V9z'/%3E%3C/svg%3E");
		}

		.calendar-form .toggle-view .icon-view-2::before {
			--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 22H0v-4h4v4zm0-12H0v4h4v-4zm0-8H0v4h4V2zm3 0v4h17V2H7zm0 12h17v-4H7v4zm0 8h17v-4H7v4z'/%3E%3C/svg%3E");
		}
		
		.icon-view-3::before {
			--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='%23000000' d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.02-4.08c.53.5 1.22.83 1.98.83 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.07 8.81C7.54 8.3 6.85 8 6.09 8 4.43 8 3.09 9.34 3.09 11s1.34 3 3 3c.76 0 1.45-.3 1.98-.83l7.12 4.14c-.05.21-.09.44-.09.67 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
		}

		.calendar-form .toggle-view :is(button.js-is-active, button:hover) {
			opacity: 1;
		}


/* Calendar widget */
.calendar-widget table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border: 1px solid hsl(0, 0%, 89%);
	border-top: 0;
	caption-side: top;
	font-size: .7rem;
}

	.calendar-widget caption {
		padding: 1em .5em .5em;
		background-color: hsl(0, 0%, 94%);
		border: 1px solid hsl(0, 0%, 89%);
		border-bottom: 0;
		font-weight: bold;
		font-size: 1.1429em;
		text-align: center;
		text-transform: uppercase;
	}

	.calendar-widget thead {
		background-color: hsl(0, 0%, 94%);
		color: hsl(0, 0%, 42%);
	}

	.calendar-widget :where(th, td) {
		padding: 1em;
	}

	.calendar-widget th {
		font-weight: bold;
		text-align: center;
	}

	.calendar-widget td {
		height: 80px;
		position: relative;
		border: 1px solid hsl(0, 0%, 89%);
		vertical-align: top;
	}

	.calendar-widget .num {
		width: 2em;
		height: 2em;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 1.25em;
		font-weight: bold;
	}

	.calendar-widget .current-day .num {
		border: 1px solid hsl(0, 0%, 13%);
		border-radius: 100px;
	}

	.calendar-widget .cell-tooltip {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 2;
	}

	.calendar-widget .cell-tooltip::before {
		width: 110px;
		content: attr(data-tooltip) '\A\A + ' attr(data-events) ' more events' !important;
		white-space: pre-wrap !important;
	}

	.calendar-widget .cell-tooltip[data-events="0"]::before {
		content: attr(data-tooltip) !important;
	}

	.calendar-widget .cell-tooltip[data-events="1"]::before {
		content: attr(data-tooltip) '\A\A + ' attr(data-events) ' more event' !important;
	}


/* Events list */
.calendar-events-list {
	padding: 0;
	list-style: none;
}

* + .calendar-events-list {
	margin: 1em 0 0;
}

	.calendar-events-list li {
		margin: 0;
		border: 0;
	}

	.calendar-events-list li + li {
		margin-top: .5em;
	}

	.calendar-events-list .event {
		display: grid;
		grid-template-columns: auto 1fr auto;
		gap: .75em;
		align-items: center;
		padding: .75em;
		background-color: var(--event-color-bg);
		border-radius: .3em;
		color: hsl(0, 0%, 13%);
		font-weight: bold;
	}

	.calendar-events-list .event::before {
		content: "";
		width: .2em;
		height: 100%;
		background-color: var(--event-color-border);
		border-radius: 10px;
	}

	.calendar-events-list .event::after {
		--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M7.33 24 4.5 21.171l9.339-9.175L4.5 2.829 7.33 0 19.5 11.996z'/%3E%3C/svg%3E");
		content: "";
		width: 1.5em;
		height: 1.2em;
		-webkit-mask-image: var(--icon);
		mask-image: var(--icon);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-position: left;
		mask-position: left;
		background-color: hsla(0, 0%, 0%, 0.2);
		transition: .3s ease all;
	}

	.calendar-events-list .event:hover::after {
		-webkit-mask-position: right;
		mask-position: right;
		background-color: hsl(0, 0%, 13%);
	}

	table .calendar-events-list .event {
		padding: .5em;
		grid-template-columns: auto 1fr;
		gap: .5em;
		/*white-space: nowrap;*/
		overflow: hidden;
		/*text-overflow: ellipsis;*/
		font-weight: normal;
	}

	table .calendar-events-list .event::after {
		content: none;
	}

		table .calendar-events-list .event span {
			display: block;
			/*white-space: nowrap;*/
			overflow: hidden;
			/*text-overflow: ellipsis;*/
		}

		table .calendar-events-list .event > * {
			pointer-events: none;
		}

	.calendar-events-list .event:hover {
		text-decoration: none;
	}

	.calendar-events-list time {
		display: block;
		margin-top: .25em;
		opacity: .6;
		font-size: .8em;
		font-weight: normal;
	}

	.calendar-events-list [data-tooltip] {
		border-bottom: 0;
	}


/* Small size */
.calendar-widget.js-size-small td {
	height: auto;
	padding: 1em .5em;
	text-align: center;
}

.calendar-widget.js-size-small .cell-tooltip {
	display: block;
}

.calendar-widget.js-size-small table .calendar-events-list {
	display: flex;
	justify-content: center;
	gap: .25em;
	pointer-events: none;
}

.calendar-widget.js-size-small table .calendar-events-list.js-has-more::after {
	--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 9h-9V0H9v9H0v6h9v9h6v-9h9z'/%3E%3C/svg%3E");
	content: "";
	width: 6px;
	height: 6px;
	display: block;
	-webkit-mask-image: var(--icon);
	mask-image: var(--icon);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background-color: hsl(0, 0%, 13%);
}

	.calendar-widget.js-size-small table .calendar-events-list li {
		margin: 0;
	}

	.calendar-widget.js-size-small table .calendar-events-list li:nth-child(n+4) {
		display: none;
	}

	.calendar-widget.js-size-small table .calendar-events-list .event {
		width: 6px;
		height: 6px;
		display: block;
		padding: 0;
		background-color: var(--event-color-border);
		border-radius: 50px;
	}

	.calendar-widget.js-size-small table .calendar-events-list .event > * {
		display: none;
	}


/* Modal */
.modal .modal-frame {
	height: 500px;
}