abbr {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    cursor: default;
    text-decoration: underline dotted;
}

abbr:hover::after {
    content: attr(data-abbr);
    position: absolute;
    display: block;
    padding: var(--spacing8) var(--spacing16);
    border-radius: var(--spacing8);
    background: var(--background__default);
    border: 1px solid var(--form--field--border__default);
    color: var(--text__default);
    z-index: 1;
}

.item--action-bar {
	align-items: center;
	background-color: var(--action-bar--background__default);
	container: action-bar / inline-size;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing16);
	justify-content: space-between;
	margin: var(--spacing24) 0 var(--spacing32) 0;
	padding: var(--spacing12) var(--spacing24) var(--spacing12) var(--spacing24);
	position: relative;
	z-index: 1;
}

	.item--action-bar .form--control {
		margin-bottom: 0;
		max-width: 400px;
	}

@keyframes scale {

	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	50% {
		opacity: 0.5;
		transform: scale(1.01);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}

}

@keyframes fade-in {

	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}

}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@keyframes buzz
{
	from
	{
		transform: translateX(-5px);
	}
	to
	{
		transform: translateX(5px);
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.item--avg-score {
	align-items: center;
	display: flex;
	gap: var(--spacing12);
	justify-content: flex-start;
	margin: 0 0 var(--spacing12) 0;
	position: relative;
	width: 100%;
}

	.assessment--avg-score {
		align-items: center;
		aspect-ratio: 1/1 auto;
		background-color: var(--primary1000);
		border: 0;
		border-radius: 25rem;
		color: var(--success700);
		display: flex;
		font-size: var(--font-size-XXS);
		font-weight: 600;
		justify-content: center;
		flex: 0 0 auto;
		height: 40px;
		margin: 0;
		width: 40px;
	}

		.avg-score--title {
			color: var(--card--color__default);
			font-weight: 500;
		}

		.assessment--completions {
			color: var(--card--color__alternative);
			font-weight: 400;
			font-size: var(--font-size-S);
			margin-top: var(--spacing4);
		}

	.assessment--name {
		display: flex;
		font-size: var(--font-size-ML);
		font-weight: 700;
		gap: var(--spacing8);
		margin: var(--spacing16) 0 0 0;
		letter-spacing: 1px;
	}

	.assessment--info {
		color: var(--card--color__alternative);
		display: flex;
		font-size: var(--font-size-S);
		font-weight: 400;
		justify-content: space-between;
		margin: 0 0 var(--spacing12) 0;
	}

	.assessment--description {
		font-size: var(--font-size-S);
		font-weight: 400;
		letter-spacing: 0.25px;
		line-height: 1.4;
		margin: 0 0 var(--spacing24) 0;
	}

.availability {
	display: flex;
	flex: 1 1 auto;
}

	.availability > div {
		flex: 1 1 auto;
	}

	.column--day {
		background-color: transparent;
		width: 100%;
		padding: 11px 3px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}

	.column--day-date {
		font-weight: bold;
		margin-bottom: 0.5rem;
	}

	.time-slot {
		background-color: var(--availability--time-slot--background__default);
		border: 1px solid var(--availability--time-slot--border__default);
		color: var(--availability--time-slot--text__default);
		display: block;
		width: 100%;
		text-align: center;
		padding: 6px;
		margin-bottom: 2px;
		border-radius: .2rem;
		font-size: 14px;
		font-weight: bold;
		cursor: pointer;
		white-space: nowrap;
		transition: all .3s ease;
	}

		.time-slot:hover {
			background-color: var(--availability--time-slot--background__default) !important;
			border: 1px solid var(--interactive__hover) !important;
			color: var(--interactive__hover) !important;
		}

		.time-slot:active {
			background-color: var(--interactive__default) !important;
			border: 1px solid var(--interactive__default) !important;
			color: var(--interactive--text__default) !important;
		}

		.time-slot:last-of-type {
			margin-bottom: 0;
		}

		.is--past .time-slot {
			pointer-events: none;
			opacity: 0.7;
		}

		.is--past .column--day {
			background-color: var(--availability--is--past--column--day--background__default);
		}

		.is--today .time-slot {
			background-color: var(--availability--is--today--time-slot--background__default);
			border: 1px solid var(--availability--is--today--time-slot--border__default);
		}

		.is--today .column--day {
			background-color: var(--availability--is--today--column--day--background__default);
		}

			.is--today .column--day-date {
				color: var(--availability--is--today--column--day--text__default);
			}

		.is--unavailable {
			opacity: 0.4 !important;
			pointer-events: none;
		}

		.was--available {
			pointer-events: none;
			opacity: 0.7;
		}

.avatar {
	align-items: center;
	aspect-ratio: auto 1 / 1;
	background-color: var(--avatar--background__default);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: .2rem;
	color: var(--avatar--text__default) !important;
	display: flex;
	font-size: inherit;
	font-weight: 700;
	height: min(30vw, 16rem);
	justify-content: center;
	margin: 0;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	transition: all .3s ease;
	width: min(30vw, 16rem);
}
	.badge {
		text-shadow: -2px 1px 5px black;
		color: orange;
		position: absolute;
		top: -2px;
		right: -4px;
		font-size: 0.75rem;
	}

/* .avatar:has(.badge):before */
.avatar .badge:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.9));
	border-radius: 2.5rem;
	overflow: hidden;
}

.banner--notification {
	align-items: center;
	border-bottom: 0;
	border-radius: var(--spacing8);
	box-shadow: 4px 8px 32px 0 var(--shadow1);
	display: flex;
	font-size: var(--font-size-S);
	font-weight: 600;
	height: 0px;
	justify-content: space-between;
	line-height: 1;
	margin: var(--spacing4) auto var(--spacing4) auto;
	overflow: hidden;
	opacity: 0;
	padding: var(--spacing4) var(--spacing16) var(--spacing4) var(--spacing16);
	position: sticky;
	top: 0;
	transition: all .3s ease;
	width: calc(100% - var(--spacing32));
	z-index: 8;
}

	.banner--notification.error,
	.banner--notification.information,
	.banner--notification.success,
	.banner--notification.warning {
		opacity: 1;
		height: min-content;
		overflow: visible;
	}

	.banner--notification.error {
		background-color: var(--error--background__default);
		border-bottom: 3px solid var(--error800);
		color: var(--error800);
	}

	.banner--notification.information {
		background-color: var(--information--background__default);
		border-bottom: 3px solid var(--information__default);
	}

	.banner--notification.success {
		background-color: var(--success--background__default);
		border-bottom: 3px solid var(--success__default);
	}

	.banner--notification.warning {
		background-color: var(--warning--background__default);
		border-bottom: 3px solid var(--warning__default);
	}

#breadcrumbs {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-S);
    margin: var(--spacing8) var(--spacing16) var(--spacing24) var(--spacing16);
}

    .arrow--previous,
    .arrow--next {
        align-items: center;
        background-color: transparent;
        color: var(--interactive__default);
        cursor: pointer;
        display: flex;
        font-size: 0.9rem;
        height: 2rem;
        justify-content: center;
        transition: all .3s ease;
        width: 2rem;
    }

    #breadcrumbs a {
        color: var(--breadcrumbs--color__default);
        font-weight: 400;
        margin-left: 0;
        margin-right: var(--spacing4);
        letter-spacing: 0.4px;
        line-height: normal;
        outline: none;
    }

        #breadcrumbs a:after {
            color: var(--breadcrumbs--color__default);
            content: '\e912';
            cursor: default;
            font-family: 'tsb';
            margin-left: var(--spacing4);
        }

    #breadcrumbs a:last-of-type {
        color: var(--breadcrumbs--color__active);
    }

        #breadcrumbs a:last-of-type:after {
            display: none;
        }

    #breadcrumbs a:hover,
    #breadcrumbs a:focus {
        color: var(--breadcrumbs--color__hover);
    } 

    .breadcrumbs--previous-next {
        display: inline-flex;
        font-size: var(--font-size-ML);
        margin: 0 var(--spacing16) 0 0;
    }

        #breadcrumbs .breadcrumbs--previous-next a {
            color: var(--secondary500);
        }

            #breadcrumbs .breadcrumbs--previous-next a:hover {
                color: var(--interactive__hover);
            }

            .breadcrumbs--previous-next a:after {
                display: none;
            }
        
        #breadcrumbs a.disabled {
            color: var(--breadcrumbs--color__disabled);
            pointer-events: none;
        }

.item--action {
	align-items: center;
	aspect-ratio: auto 1 / 1;
	background-color: transparent;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: 20px;
	font-weight: 400;
	height: 44px;
	justify-content: center;
	padding: var(--spacing12);
	transition: all .3s ease;
	width: 44px;
}

	.item--action:hover {
		background-color: var(--item--action--background__hover);
		color: var(--secondary500);
	}

.size--small.item--action {
	font-size: 0.8rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 1.5rem;
}

.filtering--buttons {
	container: filtering-button / inline-size;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing8);
	margin: 0 0 var(--spacing16) 0;
	white-space: nowrap;
}

	.filtering--buttons input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		z-index: -1;
	}

	.filter-button {
		background-color: var(--button--filter--background__default);
		border: 1px solid var(--button--filter--border__default);
		border-radius: var(--spacing8);
		color: var(--button--filter--color__default);
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
		padding: 10px 16px;
		position: relative;
		transition: border .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
	}

		.filter-button:hover {
			background-color: var(--button--filter--background__hover);
			border: 1px solid var(--button--filter--border__hover);
			color: var(--button--filter--color__hover);
		}

		input:checked + .filter-button {
			background-color: var(--button--filter-selected--background__default);
			border: 1px solid var(--button--filter-selected--border__default);
			color: var(--button--filter-selected--color__default);
		}

			input:checked + .filter-button:hover {
				background-color: var(--button--filter-selected--background__hover);
				border: 1px solid var(--button--filter-selected--border__hover);
				color: var(--button--filter-selected--color__hover);
			}

		input:focus + .filter-button {
			border: 1px solid var(--outline__default);
		}



.primary-button {
	align-items: center;
	background-color: var(--button--primary--background__default);
	border: 1px solid var(--button--primary--border__default);
	border-radius: var(--spacing8);
	color: var(--button--primary--color__default);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--font-size-S);
	font-weight: 600;
	gap: var(--spacing12);
	line-height: normal;
	padding: var(--spacing12) var(--spacing16);
	width: auto;
	white-space: nowrap;
	transition: border .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
}

	.primary-button:hover {
		background-color: var(--button--primary--background__hover);
		border: 1px solid var(--button--primary--border__hover);
		color: var(--button--primary--color__hover);
	}

	.primary-button i {
		font-size: var(--font-size-M);
	}

.secondary-button {
	align-items: center;
	background-color: var(--button--secondary--background__default);
	border: 1px solid var(--button--secondary--border__default);
	border-radius: var(--spacing8);
	color: var(--button--secondary--color__default);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--font-size-S);
	font-weight: 600;
	gap: var(--spacing12);
	line-height: normal;
	padding: var(--spacing12) var(--spacing16);
	width: auto;
	white-space: nowrap;
	transition: border .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
}

	.secondary-button:hover {
		background-color: var(--button--secondary--background__hover);
		border: 1px solid var(--button--secondary--border__hover);
		color: var(--button--secondary--color__hover);
	}

	.secondary-button i {
		font-size: var(--font-size-M);
	}

	#theme-switcher {
		background-color: var(--theme-switcher--background__default);
		border: 1px solid var(--theme-switcher--border__default);
		color: var(--theme-switcher--color__default);
	}

		#theme-switcher:hover {
			background-color: var(--theme-switcher--background__hover);
			border: 1px solid var(--theme-switcher--border__hover);
			color: var(--theme-switcher--color__hover);
		}

		.theme-icon::before {
			content: var(--theme-switcher--icon__default);
			font-family: 'tsb';
			font-style: normal;
		}

		#variant-name::before {
			content: var(--variant-name--content);
		}


.segmented-button {
	align-items: center;
	display: flex;
	margin: 0 0 var(--spacing16) 0;
	position: relative;
	width: max-content;
}

	.segmented-button input {
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		z-index: -1;
	}

	.segmented-button .filter-button {
		border-radius: 0;
		white-space: nowrap;
	}

	.segmented-button .filter-button:first-of-type {
		border-top-left-radius: var(--spacing8);
		border-bottom-left-radius: var(--spacing8);
	}

	.segmented-button .filter-button:last-of-type {
		border-top-right-radius: var(--spacing8);
		border-bottom-right-radius: var(--spacing8);
	}

	.item--card .segmented-button {
		width: 100%;
	}

		.item--card .segmented-button .filter-button {
			flex: 1 1 auto;
			text-align: center;
		}

.item--spin-button {
	align-items: center;
    display: flex;
    gap: var(--spacing16);
    padding: 0 0 0 0;
	margin: 0 0 var(--spacing16) 0;
}

	.spin-button {
		display: flex;
		background-color: var(--form--field--background__default);
		border: 1px solid var(--form--field--border__default);
		color: var(--form--field--text__default);
		font-size: var(--font-size-M);
		line-height: 1.23536;
		font-weight: 400;
		height: 48px;
		border-radius: var(--spacing8);
		margin-bottom: 0;
		padding: 0;
		transition: all .3s ease;
	}

	.spin-button:hover {
		border-color: var(--interactive__default);
	}

	.spin-button:focus-within {
		outline: 2px solid var(--outline__default);
		outline-offset: 3px;
	}

		.spin-button input {
			appearance: none;
			background-color: var(--form--field--background__default);
			color: var(--form--field--text__default);
			font-size: var(--font-size-M);
			outline: none;
			text-align: center;
			text-overflow: ellipsis;
			width: 24px;
			-webkit-appearance: none;
		}

		.spin-button--control {
			background-color: transparent;
			color: var(--interactive__default);
			border-radius: var(--spacing8);
			cursor: pointer;
			font-size: var(--font-size-M);
			outline: none;
			padding: 0 var(--spacing8) 0 var(--spacing8);
			transition: all .3s ease;
			z-index: 1;
		}

			.spin-button--control:hover {
				color: var(--interactive__hover);
			}


.tertiary-button {
	align-items: center;
	background-color: var(--button--tertiary--background__default);
	border: 1px solid var(--button--tertiary--border__default);
	border-radius: var(--spacing8);
	color: var(--button--tertiary--color__default);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--font-size-S);
	font-weight: 600;
	line-height: normal;
	padding: var(--spacing12) var(--spacing16);
	transition: border .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
	width: auto;
}

	.tertiary-button:hover {
		background-color: var(--button--tertiary--background__hover);
		border: 1px solid var(--button--tertiary--border__hover);
		color: var(--button--tertiary--color__hover);
	}

	.tertiary-button i {
		font-size: var(--font-size-M);
	}

	.is--delete {
		color: var(--button--delete--color__default);
	}

		.is--delete:focus {
			background-color: var(--button--delete--background__hover);
			border-color: var(--button--delete--border__hover);
			color: var(--button--delete--color__hover);
		}

		.is--delete:hover {
			background-color: var(--button--delete--background__hover);
			border-color: var(--button--delete--border__hover);
			color: var(--button--delete--color__hover);
		}

.calendar {
	grid-template-columns: repeat(8, 1fr);
}

	.calendar .calendar--day:nth-of-type(8n + 7),
	.calendar .calendar--day:nth-of-type(8n + 8) {
		background-color: var(--calendar--weekend--background__default);
	}

.calendar--staff {
	border-left: 1px solid var(--calendar--border__default);
	border-right: 1px solid var(--calendar--border__default);
	border-bottom: 1px solid var(--calendar--border__default);
	padding: var(--spacing4) var(--spacing4) var(--spacing32) var(--spacing4);
	text-align: left;
	min-height: 7rem;
	position: relative;
}

.calendar {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 10px;
}

	.calendar__header__title {
		border-bottom: 1px solid var(--calendar--border__default);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .75rem;
		font-weight: bold;
		grid-auto-rows: 1rem;
	}

	.calendar--row {
		display: contents;
	}

		.calendar--day {
			border-right: 1px solid var(--calendar--border__default);
			border-bottom: 1px solid var(--calendar--border__default);
			padding: var(--spacing4) var(--spacing4) var(--spacing24) var(--spacing4);
			text-align: right;
			min-height: 7rem;
			position: relative;
		}

			.calendar .calendar--day {
				background: var(--calendar--day--background__default);
				height: 7rem;
				overflow: hidden;
			}

				.calendar--row .calendar--day:first-child {
					border-left: 1px solid var(--calendar--border__default);
				}

				.calendar:not(#calendarScheduling) .calendar--day:nth-of-type(7n + 6),
				.calendar:not(#calendarScheduling) .calendar--day:nth-of-type(7n + 7) {
					background-color: var(--calendar--weekend--background__default);
				}

				.show-more {
					background-image: var(--calendar--show-more-background__default);
					color: var(--interactive__default);
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 2.5rem;
					width: 100%;
					position: absolute;
					bottom: 0;
					left: 0;
					font-size: 0.75rem;
					font-weight: bold;
					padding: 1.2rem 0.25rem 0 0.25rem;
					text-align: center;
				}

					.calendar--day.is--today .show-more {
						background-image: var(--calendar--is--today--show-more-background__default);
					}

					.calendar .calendar--day:nth-of-type(7n + 6) .show-more,
					.calendar .calendar--day:nth-of-type(7n + 7) .show-more {
						background-image:  var(--calendar--weekend--show-more--background__default);
					}

					.show-more .item--action {
						background-color: transparent;
						border-radius: .2rem;
						font-size: var(--font-size-S);
						padding: 0 0 var(--spacing4) 0;
						height: fit-content;
						outline: none;
						width: fit-content;
					}

					.event--counter {
						color: var(--accent__default);
						font-size: 0.7rem;
						white-space: nowrap;
					}

						.event--counter i {
							margin-right: 0.25rem;
						}

		.calendar--day.is--today {
			background-color: var(--calendar--is--today--background__default);
		}

			.calendar--date {
				color: var(--text__default);
				display: flex;
				align-items: center;
				flex-direction: row-reverse;
				font-size: 0.75rem;
				font-weight: bold;
				margin-bottom: 0.1875rem;
			}

				.is--today .calendar--date,
				.is--today .calendar--date:after {
					color: var(--availability--is--today--column--day--text__default);
				}

				.is--today .calendar--date:after {
					content: 'Today';
					margin-right: auto;
				}

				.not--current--month .calendar--date,
				.not--current--month .calendar--event,
				.not--current--month .show-more .event--counter,
				.not--current--month .show-more .item--action {
					opacity: 0.5;
				}

		.modal .calendar--day {
			border: none;
			min-height: inherit;
		}
		.calendar.week > .calendar--day:nth-child(7n) {
			border-right: 0;
		}

		.calendar--event {
			background-color: var(--meeting--background__default);
			box-shadow: 0 5px 10px 1px var(--meeting--box-shadow__hover);
			border-left: 10px solid var(--meeting__default);
			border-radius: 10px;
			display:flex;
			flex-wrap: nowrap;
			flex-direction: column;
			justify-content: space-between;
			margin-bottom: var(--spacing4);
			overflow: hidden;
			padding: var(--spacing4) var(--spacing4) var(--spacing4) var(--spacing4);
			position: relative;
			text-align: left;
			transition: all .3s ease;
		}

			.calendar--event:hover {
				box-shadow: 0 4px 43px 0 var(--meeting--box-shadow__hover);
			}

			.calendar--event.is--cancelled {
				border-left: 10px solid var(--meeting--cancelled__default);
			}

			.calendar--event.is--done {
				border-left: 10px solid var(--meeting--accepted__default);
			}

			.event--title {
				font-size: var(--font-size-XS);
				font-weight: 500;
				line-height: 1.1;
				margin-bottom: var(--spacing4);
				text-overflow: ellipsis;
			}

				.calendar--day .event--title {
					display: -webkit-box;
					-webkit-line-clamp: 3;
					line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

			.event--time {
				font-size: var(--font-size-XS);
				margin-bottom: var(--spacing4);
				line-height: 1;
			}

			.meeting--tools {
				display: flex;
				flex-wrap: wrap;
			}

			.item--calendar--day-tools,
			.event--tools {
				align-items: center;
				background-color: var(--background__default);
				display: flex;
				flex-wrap: wrap;
				height: 100%;
				justify-content: center;
				left: 0;
				position: absolute;
				top: 0;
				width: 100%;
			}

				.event--tools .item--action {
					font-size: 0.6rem;
					width: 1rem;
					height: 1rem;
					background-color: none;
				}

		.calendar--event + .calendar--event:last-child {
			margin: 0 0 var(--spacing32) 0;
		}

.item--card {
	background-color: var(--card--background__default);
	border: 1px solid var(--card--border__default);
	border-radius: var(--spacing16);
	box-shadow: 4px 8px 32px 0 var(--shadow1);
	/* container: card / inline-size; */
	display: flex;
	flex-direction: column;
	padding: var(--spacing24) 0 0 0;
}
	
	.card--header {
		display: flex;
		flex: 0 0;
		flex-wrap: wrap;
		gap: var(--spacing16);
		justify-content: space-between;
		margin: 0 0 var(--spacing24) 0;
		padding: 0 var(--spacing24) 0 var(--spacing24);
	}

		.card--title {
			color: var(--neutral200);
			font-size: var(--font-size-ML);
			font-weight: 500;
		}

		.card--subtitle {
			color: var(--neutral100);
			font-size: var(--font-size-S);
			font-weight: 400;
			margin: var(--spacing4) 0 0 0;
		}

		.card--header button {
			white-space: nowrap;
			height: fit-content;
		}

	.card--content {
		padding: 0 var(--spacing24) 0 var(--spacing24);
		position: relative;
	}

	.card--content-fullwidth {
		padding: 0;
		position: relative;
	}
		.card--content-fullwidth [src$="quiz-image.svg"] {
			opacity: .4; 
		}

		.card--content-overlay {
			align-items: center;
			display: flex;
			flex-direction: column;
			gap: var(--spacing16);
			height: 100%;
			left: 0;
			justify-content: center;
			padding: 0 var(--spacing8) 0 var(--spacing8);
			position: absolute;
			text-align: center;
			top: 0;
			width: 100%;
		}

		.is--searchable {
			width: 400px;
		}

		.card--filtering {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: var(--spacing16);
		}

		.card--filtering .form-field {
			width: 400px;
			flex: 0 0 auto;
		}

	.card--footer {
		align-items: center;
		background-color: var(--card-footer--background__default);
		border-bottom-left-radius: var(--spacing16);
		border-bottom-right-radius: var(--spacing16);
		/* container: card-footer / inline-size; */
		display: flex;
		flex-wrap: wrap;
		font-size: var(--font-size-S);
		gap: var(--spacing8);
		justify-content: flex-end;
		margin-top: auto;
		min-height: 52px;
		padding: var(--spacing8) var(--spacing24) var(--spacing8) var(--spacing24);
	}

		.item--pagination {
			justify-content: space-between;
		}

			.footer-buttons-container {
				display: flex;
				flex-wrap: wrap;
				gap: var(--spacing8);
			}

			.item--pagination .footer-buttons-container {
				align-self: flex-end;
			}

			/* Fix up the item margin if there is h1-6 as first element in card-content*/
			:not(.card--grid) > .item--card:not(:first-child):not(:last-child)
			{
				margin: var(--spacing32) 0 var(--spacing32) 0;
			}
			.item--card .card--content h6:is(:first-child),
			.item--card .card--content h5:is(:first-child),
			.item--card .card--content h4:is(:first-child),
			.item--card .card--content h3:is(:first-child),
			.item--card .card--content h2:is(:first-child),
			.item--card .card--content h1:is(:first-child) {
				margin-top: 0 !important;
			}

.dialog--overlay {
	background-color: var(--modal--background__default);
	backdrop-filter: blur(15px);
	border: 2px solid var(--modal--border__default);
	height: 100%;
	left: 0;
	opacity: 0.95;
	position: fixed;
	top: 0;
	transition: all .3s ease;
	width: 100%;
	z-index: 10;
}

	.dialog {
		animation: scale .3s ease-in-out;
		background-color: var(--dialog--background__default);
		border: 2px solid var(--secondary600);
		border-radius: 1rem;
		box-shadow: 4px 8px 32px 0 var(--shadow1);
		left: 0;
		margin: 0 auto;
		max-width: 448px;
		padding: 0 0 0 0;
		position: fixed;
		right: 0;
		top: 0;
		width: calc(100% - var(--spacing32));
		z-index: 11;
	}

	.dialog--title {
		color: var(--text__default);
		font-size: var(--font-size-ML);
		font-weight: 500;
		line-height: 1.2;
		margin: var(--spacing24) 0 var(--spacing24) 0;
		padding: 0 var(--spacing24) 0 var(--spacing24);
	}

	.dialog--content {
		color: var(--text__default);
		margin: 0 0 var(--spacing24) 0;
	}

		.dialog.warning .dialog--title {
			color: var(--secondary500);
		}

h1 { 
	color: var(--headings__default);
	font-size: var(--font-size-XL);
	font-weight: 700;
	letter-spacing: 0.25px;
	line-height: normal;
	margin: 0 0 var(--spacing32) 0;
	text-transform: initial;
}

h2 {
	color: var(--headings__default);
	font-size: var(--font-size-L);
	font-weight: 700;
	line-height: normal;
	margin: 0 0 var(--spacing24) 0;
	text-transform: initial;
}

h3 {
	color: var(--headings__default);
	font-size: var(--font-size-M);
	font-weight: 600;
	line-height: normal;
	margin: 0 0 var(--spacing16) 0;
	text-transform: initial;
}

h4 {
	color: var(--headings__default);
	font-size: var(--font-size-M);
	font-weight: 700;
	margin: var(--spacing16) 0 var(--spacing16) 0;
}

h5 {
	color: var(--headings__default);
	font-size: var(--font-size-XS);
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	margin: var(--spacing32) 0 var(--spacing16) 0;
}

@font-face {
  font-family: 'tsb';
  src:  url('../../fonts/blox/tsb.eot?v8icfa');
  src:  url('../../fonts/blox/tsb.eot?v8icfa#iefix') format('embedded-opentype'),
    url('../../fonts/blox/tsb.ttf?v8icfa') format('truetype'),
    url('../../fonts/blox/tsb.woff?v8icfa') format('woff'),
    url('../../fonts/blox/tsb.svg?v8icfa#tsb') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="tsb-"], [class*=" tsb-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'tsb' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tsb-arrow-down:before {
  content: "\e900";
}
.tsb-arrow-next:before {
  content: "\e901";
}
.tsb-arrow-previous:before {
  content: "\e902";
}
.tsb-arrow-up:before {
  content: "\e903";
}
.tsb-assessment:before {
  content: "\e904";
}
.tsb-user:before {
  content: "\e905";
}
.tsb-chevron-down:before {
  content: "\e906";
}
.tsb-dashboard:before {
  content: "\e907";
}
.tsb-delete:before {
  content: "\e908";
}
.tsb-edit:before {
  content: "\e909";
}
.tsb-link:before {
  content: "\e90a";
}
.tsb-logout:before {
  content: "\e90b";
}
.tsb-q:before {
  content: "\e90c";
  color: #f58800;
}
.tsb-quiz:before {
  content: "\e90d";
}
.tsb-settings:before {
  content: "\e90e";
}
.tsb-stopwatch:before {
  content: "\e90f";
}
.tsb-users:before {
  content: "\e910";
}
.tsb-chevron-left:before {
  content: "\e911";
}
.tsb-chevron-right:before {
  content: "\e912";
}
.tsb-search:before {
  content: "\e913";
}
.tsb-plus:before {
  content: "\e914";
}
.tsb-checked:before {
  content: "\e915";
}
.tsb-close:before {
  content: "\e916";
}
.tsb-hide:before {
  content: "\e917";
}
.tsb-show:before {
  content: "\e918";
}
.tsb-warning:before {
  content: "\e919";
}
.tsb-calendar:before {
  content: "\e91a";
}
.tsb-copy:before {
  content: "\e91b";
}
.tsb-generate:before {
  content: "\e91c";
}
.tsb-minus:before {
  content: "\e91d";
}
.tsb-book:before {
  content: "\e91e";
}
.tsb-coffee:before {
  content: "\e91f";
}
.tsb-template:before {
  content: "\e920";
}
.tsb-folder:before {
  content: "\e921";
}
.tsb-home:before {
  content: "\e922";
}
.tsb-moon:before {
  content: "\e923";
}
.tsb-more-horizontal:before {
  content: "\e924";
}
.tsb-more-vertical:before {
  content: "\e925";
}
.tsb-star:before {
  content: "\e926";
}
.tsb-sun:before {
  content: "\e927";
}
.tsb-wrench:before {
  content: "\e928";
}
.tsb-blox:before {
  content: "\e929";
  color: #f58800;
}
.tsb-files:before {
  content: "\e92a";
}
.tsb-flip-horizontal:before {
  content: "\e92b";
}
.tsb-flip-vertical:before {
  content: "\e92c";
}
.tsb-rotate-left:before {
  content: "\e92d";
}
.tsb-rotate-right:before {
  content: "\e92e";
}
.tsb-user-tag:before {
  content: "\e92f";
}
.tsb-upload:before {
  content: "\e930";
}
.tsb-download:before {
  content: "\e931";
}
.tsb-cellphone:before {
  content: "\e932";
}
.tsb-missing-tag:before {
  content: "\e933";
}
.tsb-location:before {
  content: "\e934";
}
.tsb-birthday:before {
  content: "\e935";
}
.tsb-flag:before {
  content: "\e936";
}
.tsb-phone:before {
  content: "\e937";
}
.tsb-email:before {
  content: "\e938";
}
.tsb-department:before {
  content: "\e939";
}
.tsb-balance-scale:before {
  content: "\e93a";
}
.tsb-dollar-sign:before {
  content: "\e93b";
}
.tsb-file-text:before {
  content: "\e93c";
}
.tsb-file-image:before {
  content: "\e93d";
}
.tsb-file-pdf:before {
  content: "\e93e";
}
.tsb-globe:before {
  content: "\e93f";
}
.tsb-id-card:before {
  content: "\e940";
}
.tsb-passport:before {
  content: "\e941";
}
.tsb-gender:before {
  content: "\e943";
}
.tsb-city:before {
  content: "\e944";
}
.tsb-team:before {
  content: "\e945";
}
.tsb-clock:before {
  content: "\e946";
}
.tsb-company:before {
  content: "\e947";
}
.tsb-qrcode:before {
  content: "\e948";
}
.tsb-payroll:before {
  content: "\e949";
}
.tsb-money:before {
  content: "\e942";
}
.tsb-key:before {
  content: "\e94a";
}
.tsb-lock:before {
  content: "\e94b";
}
.tsb-eye:before {
  content: "\e918";
}


.form-selection {
	align-items: center;
	border: 1px solid var(--form--field--border__default);
	border-radius: var(--spacing8);
	display: flex;
	flex: 1 1 25%;
	font-size: var(--font-size-M);
	gap: var(--spacing16);
	padding: var(--spacing12) var(--spacing16); 
}

	.form-selection:focus {
		background-color: var(--primary900);
		border: 1px solid var(--primary700);
	}

	.form-selection .form--field {
		align-items: center;
		aspect-ratio: 1/1 auto;
		background-color: var(--form--field--checks--background__default);
		border-radius: var(--spacing4);
		border-color: var(--secondary500);
		cursor: pointer;
		display: flex;
		width: var(--spacing16);
		height: var(--spacing16);
		justify-content: center;
		padding: 0;
		position: relative;
		transform: translateY(-0.075em);
	}

		.form-selection:hover .form--field {
			border-color: var(--secondary600);
		}

	.form-selection .form--label {
		color: var(--form--field--label--color__default);
		cursor: pointer;
		font-size: var(--spacing16) !important;
		left: 0;
		line-height: var(--spacing24);
		overflow-wrap: break-word;
		pointer-events: inherit;
		position: relative;
		text-overflow: ellipsis;
		top: 0 !important;
		white-space: normal;
	}

		.form-selection .form--label:hover {
			color: var(--secondary600);
		}

	.form--control.form-selection .form--field:before {
		background-color: var(--primary700);
		border-radius: 0.1rem;
		content: '';
		display: block;
		width: 0;
		height: 0;
		transform: scale(0);
		transition: all 0.3s ease;
	}
	
	.form--control.form-selection .form--field:checked:before {
		background-color: var(--secondary600);
		width: 6px;
		height: 6px;
		transform: scale(1);
	}
	
	.form-selection .form--field:focus:before {
		background-color: var(--interactive__hover);
	}

	.form-selection .form--field[type="radio"],
	.form-selection .form--field[type="radio"]:before {
		border-radius: 50%;
	}

	.form-selection .form--field[type="checkbox"]:before {
		color: var(--secondary500);
		content: '\e915';
		font-family: 'tsb' !important;
		left: -1px;
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		top: -2px;
	}

	.form-selection .form--field[type="checkbox"]:checked::before {
		background-color: transparent;
	}

	.is--selected {
		background-color: #0F2A29;
		border-color: var(--secondary500);
	}

	.is--correct-answer {
		border-color: var(--success800);
	}

		.is--correct-answer::after {
			content: "\e915";
			color: var(--success700);
			font-family: 'tsb';
			margin-left: auto;
		}

.form--control {
	flex-grow: 1;
	margin-bottom: var(--spacing16);
	position: relative;
}

    label {
        cursor: pointer;
    }

    ::placeholder {
        color: var(--placeholder--color__default);
    }

	.form--field.without-label {
		padding: var(--spacing16);
	}

    .additional--information {
        color: var(--text__default);
        display: block;
        line-height: 1.6;
        max-width: 70ch;
    }

    .form--field {
        appearance: none;
        background-color: var(--form--field--background__default);
        border: 1px solid var(--form--field--border__default);
        border-radius: var(--spacing8);
        color: var(--form--field--text__default);
        font-size: var(--font-size-M);
        font-weight: 400;
        height: 48px;
        line-height: 1.23536;
        margin-bottom: 0;
        padding: var(--spacing24) var(--spacing16) 0;
        text-align: left;
        text-overflow: ellipsis;
        transition: all .3s ease;
        -webkit-appearance: none;
        width: 100%;
    }

        .form--field[required] ~ .form--label:after {
            content: ' *';
        }

    .form--field:valid[required] ~ .form--label,
    .form--field:focus ~ .form--label,
    .form--field:not(:placeholder-shown) ~ .form--label,
    .form--field:not([placeholder=' ']) ~ .form--label {
        font-size: var(--font-size-S);
        font-weight: 400;
        top: var(--spacing8);
    }

    .form--field.has--icon:not(.without-label),
    .form--field.form-dropdown-select {
        padding: 24px 2rem 0 0.94118rem;
    }

        .form--field.has--icon__2 {
            padding: 24px 3.9rem 0 0.94118rem;
        }

        .form--field.has--icon__3 {
            padding: 24px 5.3rem 0 0.94118rem;
        }

    .form--control input[type="search"]::-webkit-search-decoration,
    .form--control input[type="search"]::-webkit-search-cancel-button,
    .form--control input[type="search"]::-webkit-search-results-button,
    .form--control input[type="search"]::-webkit-search-results-decoration { 
        display: none;
    }

        .form--control input[type="search"] ~ .form--icon {
            visibility: visible;
        }

        .form--control input[type="search"]:placeholder-shown ~ .form--icon {
            visibility: hidden;
        }

    .form--icon {
        cursor: pointer;
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
        position: absolute;
        right: var(--spacing16);
        top: var(--spacing16);
        width: max-content;
    }

        .form--icon:before {
            color: var(--form--field--icon__default);
            transition: color 0.125s ease-in;
        }

        .form--icon:hover:before {
            color: var(--interactive__hover);
        }

        .form-dropdown-select ~ .form--icon {
            pointer-events: none;
        }

    .form--field.has--icon__left {
        padding: var(--spacing16) var(--spacing16) var(--spacing16) var(--spacing48);
    }

        .has--icon__left ~ .form--icon {
            left: var(--spacing16);
            top: 14px;
        }

        .has--icon__left ~ .form--icon:before {
            color: inherit !important;
        }

    /* LABEL */
    .form--label {
        color: var(--form--field--label--color__default);
        position: absolute;
        top: var(--spacing16);
        left: var(--spacing16);
        max-width: calc(100% - 32px);
        font-size: var(--font-size-M);
        font-weight: 400;
        letter-spacing: 0;
        line-height: var(--font-size-M);
        /* overflow: hidden; */
        pointer-events: none;
        transition: all .125s ease-in;
        white-space: nowrap;
    }

    /* DISABLED */
    .form--field:disabled ~ .form--label,
    .form--field:disabled ~ .form--icon {
        opacity: 0.5;
        pointer-events: none;
    }

    /* ERROR / MESSAGE */
    .form--control .form--field:not(.is--valid):not(:disabled):not(:placeholder-shown):not(:valid):not(.form-dropdown-select):not(.form-selection),
    .form--control .form--field.is--invalid {
        background-color: var(--error600);
        border-color: var(--error600);
        color: var(--error900);
        font-weight: 700;
    }

    .form--field:not(.is--valid):not(:disabled):not(:placeholder-shown):not(:valid):not(.form-dropdown-select):not(.form--option) ~ .form--label,
    .form-dropdown-select.is--invalid ~ .form--label {
        color: var(--error800);
    }

    .form-dropdown-select.is--invalid ~ .form--icon:before {
        color: var(--error900);
    }
    
    .form--message.is--error {
        color: var(--form--error-message__default);
    }

    /* FIELD HOVER */
    .form--control:hover .form--field:not(:disabled),
    .form-dropdown-select:not(:disabled):hover {
        border-color: var(--form--field--label--color__focus);
    }

    .form--field:not(:invalid):focus-within ~ .form--label {
        color: var(--form--field--label--color__focus);
    }

    .form--field:-webkit-autofill {
        border-color: rgb(255, 224, 69);
        box-shadow: inset 0 0 0 100px rgb(255, 254, 242);
        caret-color: rgb(29, 29, 31);
        color: rgb(29, 29, 31);
        -webkit-text-fill-color: rgb(29, 29, 31);
    }

    .form--field:not(:placeholder-shown):not(.is--valid):not(:valid):not(:disabled):not(.form-dropdown-select) ~ .form--message,
    .form-textbox-textarea:not(:placeholder-shown) ~ .form--message,
    .form--field.is--invalid ~ .form--message {
        color: var(--form--error-message__default);
        height: auto;
        opacity: 1;
        margin: 0.5rem 0.3rem 0.3rem 0.3rem;
    }
    
    .form--message {
        display: flex;
        height: 0;
        font-size: var(--font-size-S);
        line-height: 1.33337;
        font-weight: 400;
        color: inherit;
        position: relative;
        margin: 0 var(--spacing8) 0 var(--spacing8);
        align-items: baseline;
        gap: 5px;
        opacity: 0;
        transition: color .1s ease, opacity .3s ease, margin .1s ease-in-out;
    }

        .form--message i {
            line-height: var(--font-size-M);
        }

    input[type="number"] {
        -webkit-appearance: textfield;
        -moz-appearance: textfield;
        appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none;
    }

.form--control-select-edit {
	border: 1px solid var(--form--field--border__default);
	border-radius: var(--spacing8);
	display: flex;
	gap: var(--spacing16);
	margin: 0 0 var(--spacing16) 0;
	padding: var(--spacing8) var(--spacing16) var(--spacing8) var(--spacing16);
}

	.form--control-select-edit .form-selection {
		border: none;
		flex: 0 0;
		margin: 0;
		padding: 0;
		width: min-content;
	}

	.form--control-select-edit .form--control {
		margin: 0;
		outline: none;
		padding: 0;
	}

input[type=file]::-webkit-file-upload-button {
    visibility: hidden;
}
input[type=file]::file-selector-button {
    visibility: hidden;
}
input[type=file]::-webkit-file-upload-button {
    visibility: hidden;
    width: 0;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    vertical-align: middle;
    height: 100%;
    border: none;
    line-height: 38px;
}
input[type=file]::file-selector-button {
    visibility: hidden;
    vertical-align: middle;
    width: 0;
    padding: 0;
    margin: 0;
    line-height: 26px;
    appearance: none;
    -moz-appearance: none;
    border: none;
    height: 100%;
}
.form--control input.form--field[type=file].has--nofiles {
    color: transparent !important;
}

.form--control textarea {
	font-family: inherit;
	grid-area: 1 / 1 / 2 / 2;
	height: auto;
	min-height: 4rem;
	padding-top: 1.6rem;
}

	.auto-grow > textarea,
	.auto-grow:after {
		font: 0.9rem/1.4 var(--font__default);
		grid-area: 1 / 1 / 2 / 2;
		height: auto;
		min-height: 4rem;
		word-break: break-all;
		line-height: 1.23536;
        margin-bottom: 0;
        padding: var(--spacing24) var(--spacing16) 0;
        text-align: left;
		padding-top: 1.6rem;
	}

	.auto-grow {
		display: grid;
	}

		.auto-grow:after {
			content: "\n\n" attr(data-replicated-value) " ";
			visibility: hidden;
			white-space: pre-wrap;
		}

	.auto-grow > textarea {
		/* Firefox scrollbar */
		overflow: hidden;
		resize: none;
	}


.menu-cards--container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.menu--card {
    background-color: var(--meeting--background__default);
    box-shadow: var(--meeting--box-shadow__default);
    display: flex;
    width: clamp(200px, 20%,  20%);
    flex-direction: column;
    align-items: center;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: all .3s ease;
}

.menu--card:hover {
    box-shadow: 0 4px 43px 0 var(--meeting--box-shadow__hover);
    transform: scale(1.025);
}

.menu--card--icon {
    font-size: 1.2rem;
}
.menu--card--title {
    font-size: 0.8rem;
}

#mobile--header {
    align-items: center;
    background-color: var(--mobile-header--background__default);
    box-shadow: 4px 8px 32px 0 var(--shadow1);
    display: flex;
    padding: 0 var(--spacing24) 0 var(--spacing12);
    position: fixed;
    width: 100%;
    z-index: 8;
}

    #mobile-sidebar-toggle {
        align-items: center;
        border-radius: 2rem;
        display: flex;
        height: 2rem;
        justify-content: center;
        position: relative;
        transform: rotate(180deg);
        width: 2rem;
    }

        #mobile-sidebar-toggle i {
            font-size: var(--font-size-L);
            font-weight: 700;
        }

    .mobile-logo {
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-weight: 700;
        gap: var(--spacing8);
        height: auto;
        justify-content: flex-start;
        margin: var(--spacing16) var(--spacing16) var(--spacing16) var(--spacing16);
        width: fit-content;
    }

        .mobile-logo img {
            display: block;
            height: 32px;
            transition: all .3s ease;
            width: fit-content;
        }

        .mobile-logo span {
            color: var(--branding__default);
            display: block;
            font-size: var(--font-size-M);
            font-weight: 500;
            letter-spacing: 1.5px;
            line-height: 21px;
            margin: 0 0 0 0;
            opacity: 1;
            overflow: hidden;
            padding: 0 0 0 0;
            text-overflow: ellipsis;
            transition: all .3s ease;
            white-space: nowrap;
        }

.modal--overlay {
	align-items: center;
	background-color: var(--modal--background__default);
	border: 2px solid var(--modal--border__default);
	box-shadow: 0px 4px 14px 4px var(--modal--box-shadow__default);
	display: none;
	flex-direction: column;
	/*justify-content: center;*/
	position: fixed;
	top: 0;
	bottom: 0;
	height: 100vh;
	padding: 1rem;
	width: 100%;
	backdrop-filter: blur(15px);
	transition: all .3s ease;
	overflow-y: auto;
	z-index: 10;
}

.modal {
	animation: scale .3s ease-in-out;
	background-color: var(--primary800);
	border: 2px solid var(--secondary600);
	border-radius: 1rem;
	box-shadow: 4px 8px 32px 0 var(--shadow1);
	margin: 0 auto;
	max-width: 448px;
	padding: 0 0 0 0;
	width: 100%;
	z-index: 11;
	/* margin-top: 64px; */
}

.modal.container--width {
	border:none;
}

.modal--show,
.modal--hide {
	cursor: pointer;
}

.item--note {
	align-items: center;
	border-bottom: 0;
	border-radius: var(--spacing8);
	box-shadow: 2px 4px 8px 0 var(--shadow1);
	display: flex;
	font-size: var(--font-size-S);
	font-weight: 500;
	gap: var(--spacing8);
	height: auto;
	line-height: 1.2;
	margin: var(--spacing4) 0 var(--spacing4) 0;
	min-height: 44px;
	padding: var(--spacing4) var(--spacing16) var(--spacing4) var(--spacing16);
	position: sticky;
	top: 0;
	transition: all .3s ease;
	width: fit-content;
}

	.item--note.error {
		background-color: var(--error--background__default);
		border-bottom: 3px solid var(--error800);
		color: var(--error800);
	}

	.item--note.information {
		background-color: var(--information--background__default);
		border-bottom: 3px solid var(--information__default);
	}

	.item--note.success {
		background-color: var(--success--background__default);
		border-bottom: 3px solid var(--success__default);
	}

	.item--note.warning {
		background-color: var(--warning--background__default);
		border-bottom: 3px solid var(--warning__default);
	}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 10;
    display: none;
}

.overlay--spinner {
    border: 8px solid var(--primary100);
    border-top: 8px solid var(--primary500);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

.page--header {
	align-items: baseline;
	background-color: var(--header--background__default);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	padding: 1rem;
	width: 100%;
}

	.item--main-title,
	.item--main-title h1 {
		margin: 0;
	}

/*!
 * Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker)
 *
 * Licensed under the Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0)
 */

 .item--picker {
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--form--field--border__default);
  border-radius: var(--spacing8);
  cursor: pointer;
  display: flex;
  font-weight: 400;
  font-size: var(--font-size-M);
  height: 44px;
  justify-content: center;
  padding: var(--spacing12);
  position: relative;
  transition: background-color .3s ease, color .3s ease;
}

  .item--picker:hover {
    background-color: var(--datepicker--trigger--background__hover);
    color: var(--datepicker--trigger--color__hover);
  }

.dow {
  color: var(--datepicker--color__default);
}

.day {
  color: var(--datepicker--color__default);
}

  .day:hover {
    color: var(--interactive__hover);
  }

.datepicker {
  border-radius: var(--spacing4);
  box-shadow: 4px 8px 32px 0 var(--shadow1);
  direction: ltr;
  font-family: var(--font__default);
  height: fit-content;
  padding: var(--spacing32);
}

.datepicker-inline {
  width: 220px;
}

.datepicker-rtl {
  direction: rtl;
}

.datepicker-rtl.dropdown-menu {
  left: auto;
}

.datepicker-rtl table tr td span {
  float: right;
}

.datepicker-dropdown {
  background-color: var(--datepicker--background__default);
  border: 1px solid var(--datepicker--border__default);
  top: 0;
  left: 0;
  min-width: 250px;
  max-width: 320px;
  padding: var(--spacing4);
  position: absolute;
}

.datepicker-dropdown:before {
  display: none;
}

.datepicker-dropdown.datepicker-orient-left:before {
  left: 6px;
}

.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
}

.datepicker-dropdown.datepicker-orient-right:before {
  right: 6px;
}

.datepicker-dropdown.datepicker-orient-right:after {
  right: 7px;
}

.datepicker-dropdown.datepicker-orient-bottom:before {
  top: -7px;
}

.datepicker-dropdown.datepicker-orient-bottom:after {
  top: -6px;
}

.datepicker-dropdown.datepicker-orient-top:before {
  bottom: -7px;
  border-bottom: 0;
  border-top: 7px solid rgba(0, 0, 0, 0.15);
}

.datepicker-dropdown.datepicker-orient-top:after {
  bottom: -6px;
  border-bottom: 0;
  border-top: 6px solid #fff;
}

.datepicker table {
  border-collapse: collapse;
  margin: 0;
  table-layout: fixed;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.datepicker table tr td,
.datepicker table tr th {
  text-align: center;
  width: 30px;
  height: 30px;
  border: none;
  padding: 0.5rem;
  transition: all .3s ease;
}

.datepicker table tr td {
  border-radius: 4px;
}

.datepicker table tr th {
  border-radius: 0 !important;
}

.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
  background-color: transparent;
}

.datepicker table tr td.old,
.datepicker table tr td.new {
  color: var(--datepicker--color__alternative);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
  background: var(--interactive__hover);
  cursor: pointer;
  color: var(--interactive--text__hover);
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: var(--interactive__default);
  cursor: default;
  opacity: 0.5;
}

.datepicker table tr td.highlighted {
  color: #000;
  background-color: var(--item--block--highlighted);
  border-color: transparent;
  border-radius: 0;
}

.datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.focus {
  color: inherit;
  background-color: yellow;
  border-color: transparent;
}

.datepicker table tr td.highlighted:hover {
  color: #000;
  background-color: var(--interactive__hover);
  border-color: #52addb;
}

.datepicker table tr td.highlighted:active,
.datepicker table tr td.highlighted.active {
  color: #000;
  background-color: #afd9ee;
  border-color: #52addb;
}

.datepicker table tr td.highlighted:active:hover,
.datepicker table tr td.highlighted.active:hover,
.datepicker table tr td.highlighted:active:focus,
.datepicker table tr td.highlighted.active:focus,
.datepicker table tr td.highlighted:active.focus,
.datepicker table tr td.highlighted.active.focus {
  color: #000;
  background-color: #91cbe8;
  border-color: #298fc2;
}

.datepicker table tr td.highlighted.disabled:hover,
.datepicker table tr td.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.highlighted:hover,
.datepicker table tr td.highlighted.disabled:focus,
.datepicker table tr td.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.highlighted:focus,
.datepicker table tr td.highlighted.disabled.focus,
.datepicker table tr td.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.highlighted.focus {
  background-color: #d9edf7;
  border-color: #85c5e5;
}

.datepicker table tr td.highlighted.focused {
  background: #afd9ee;
}

.datepicker table tr td.highlighted.disabled,
.datepicker table tr td.highlighted.disabled:active {
  background: #d9edf7;
  color: #777777;
}

.datepicker table tr td.today {
  color: #000;
  background-color: #ffdb99;
  border-color: #ffb733;
}

.datepicker table tr td.today:focus,
.datepicker table tr td.today.focus {
  color: #000;
  background-color: #ffc966;
  border-color: #b37400;
}

.datepicker table tr td.today:hover {
  color: #000;
  background-color: #ffc966;
  border-color: #f59e00;
}

.datepicker table tr td.today:active,
.datepicker table tr td.today.active {
  color: #000;
  background-color: #ffc966;
  border-color: #f59e00;
}

.datepicker table tr td.today:active:hover,
.datepicker table tr td.today.active:hover,
.datepicker table tr td.today:active:focus,
.datepicker table tr td.today.active:focus,
.datepicker table tr td.today:active.focus,
.datepicker table tr td.today.active.focus {
  color: #000;
  background-color: #ffbc42;
  border-color: #b37400;
}

.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today[disabled]:hover,
fieldset[disabled] .datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled:focus,
.datepicker table tr td.today[disabled]:focus,
fieldset[disabled] .datepicker table tr td.today:focus,
.datepicker table tr td.today.disabled.focus,
.datepicker table tr td.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.today.focus {
  background-color: #ffdb99;
  border-color: #ffb733;
}

.datepicker table tr td.today.focused {
  background: #ffc966;
}

.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:active {
  background: #ffdb99;
  color: #777777;
}

.datepicker table tr td.range {
  color: #000;
  background-color: #eeeeee;
  border-color: #bbbbbb;
  border-radius: 0;
}

.datepicker table tr td.range:focus,
.datepicker table tr td.range.focus {
  color: #000;
  background-color: #d5d5d5;
  border-color: #7c7c7c;
}

.datepicker table tr td.range:hover {
  color: #000;
  background-color: #d5d5d5;
  border-color: #9d9d9d;
}

.datepicker table tr td.range:active,
.datepicker table tr td.range.active {
  color: #000;
  background-color: #d5d5d5;
  border-color: #9d9d9d;
}

.datepicker table tr td.range:active:hover,
.datepicker table tr td.range.active:hover,
.datepicker table tr td.range:active:focus,
.datepicker table tr td.range.active:focus,
.datepicker table tr td.range:active.focus,
.datepicker table tr td.range.active.focus {
  color: #000;
  background-color: #c3c3c3;
  border-color: #7c7c7c;
}

.datepicker table tr td.range.disabled:hover,
.datepicker table tr td.range[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range:hover,
.datepicker table tr td.range.disabled:focus,
.datepicker table tr td.range[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range:focus,
.datepicker table tr td.range.disabled.focus,
.datepicker table tr td.range[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.focus {
  background-color: #eeeeee;
  border-color: #bbbbbb;
}

.datepicker table tr td.range.focused {
  background: #d5d5d5;
}

.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:active {
  background: #eeeeee;
  color: #777777;
}

.datepicker table tr td.range.highlighted {
  color: #000;
  background-color: #e4eef3;
  border-color: #9dc1d3;
}

.datepicker table tr td.range.highlighted:focus,
.datepicker table tr td.range.highlighted.focus {
  color: #000;
  background-color: #c1d7e3;
  border-color: #4b88a6;
}

.datepicker table tr td.range.highlighted:hover {
  color: #000;
  background-color: #c1d7e3;
  border-color: #73a6c0;
}

.datepicker table tr td.range.highlighted:active,
.datepicker table tr td.range.highlighted.active {
  color: #000;
  background-color: #c1d7e3;
  border-color: #73a6c0;
}

.datepicker table tr td.range.highlighted:active:hover,
.datepicker table tr td.range.highlighted.active:hover,
.datepicker table tr td.range.highlighted:active:focus,
.datepicker table tr td.range.highlighted.active:focus,
.datepicker table tr td.range.highlighted:active.focus,
.datepicker table tr td.range.highlighted.active.focus {
  color: #000;
  background-color: #a8c8d8;
  border-color: #4b88a6;
}

.datepicker table tr td.range.highlighted.disabled:hover,
.datepicker table tr td.range.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range.highlighted:hover,
.datepicker table tr td.range.highlighted.disabled:focus,
.datepicker table tr td.range.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range.highlighted:focus,
.datepicker table tr td.range.highlighted.disabled.focus,
.datepicker table tr td.range.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.highlighted.focus {
  background-color: #e4eef3;
  border-color: #9dc1d3;
}

.datepicker table tr td.range.highlighted.focused {
  background: #c1d7e3;
}

.datepicker table tr td.range.highlighted.disabled,
.datepicker table tr td.range.highlighted.disabled:active {
  background: #e4eef3;
  color: #777777;
}

.datepicker table tr td.range.today {
  color: #000;
  background-color: #f7ca77;
  border-color: #f1a417;
}

.datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today.focus {
  color: #000;
  background-color: #f4b747;
  border-color: #815608;
}

.datepicker table tr td.range.today:hover {
  color: #000;
  background-color: #f4b747;
  border-color: #bf800c;
}

.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today.active {
  color: #000;
  background-color: #f4b747;
  border-color: #bf800c;
}

.datepicker table tr td.range.today:active:hover,
.datepicker table tr td.range.today.active:hover,
.datepicker table tr td.range.today:active:focus,
.datepicker table tr td.range.today.active:focus,
.datepicker table tr td.range.today:active.focus,
.datepicker table tr td.range.today.active.focus {
  color: #000;
  background-color: #f2aa25;
  border-color: #815608;
}

.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today[disabled]:hover,
fieldset[disabled] .datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled:focus,
.datepicker table tr td.range.today[disabled]:focus,
fieldset[disabled] .datepicker table tr td.range.today:focus,
.datepicker table tr td.range.today.disabled.focus,
.datepicker table tr td.range.today[disabled].focus,
fieldset[disabled] .datepicker table tr td.range.today.focus {
  background-color: #f7ca77;
  border-color: #f1a417;
}

.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:active {
  background: #f7ca77;
  color: #777777;
}

.datepicker table tr td.selected,
.datepicker table tr td.selected.highlighted {
  color: #fff;
  background-color: #777777;
  border-color: #555555;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.datepicker table tr td.selected:focus,
.datepicker table tr td.selected.highlighted:focus,
.datepicker table tr td.selected.focus,
.datepicker table tr td.selected.highlighted.focus {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #161616;
}

.datepicker table tr td.selected:hover,
.datepicker table tr td.selected.highlighted:hover {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #373737;
}

.datepicker table tr td.selected:active,
.datepicker table tr td.selected.highlighted:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected.highlighted.active {
  color: #fff;
  background-color: #5e5e5e;
  border-color: #373737;
}
.datepicker table tr td.selected:active:hover,
.datepicker table tr td.selected.highlighted:active:hover,
.datepicker table tr td.selected.active:hover,
.datepicker table tr td.selected.highlighted.active:hover,
.datepicker table tr td.selected:active:focus,
.datepicker table tr td.selected.highlighted:active:focus,
.datepicker table tr td.selected.active:focus,
.datepicker table tr td.selected.highlighted.active:focus,
.datepicker table tr td.selected:active.focus,
.datepicker table tr td.selected.highlighted:active.focus,
.datepicker table tr td.selected.active.focus,
.datepicker table tr td.selected.highlighted.active.focus {
  color: #fff;
  background-color: #4c4c4c;
  border-color: #161616;
}
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected.highlighted.disabled:hover,
.datepicker table tr td.selected[disabled]:hover,
.datepicker table tr td.selected.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.selected:hover,
fieldset[disabled] .datepicker table tr td.selected.highlighted:hover,
.datepicker table tr td.selected.disabled:focus,
.datepicker table tr td.selected.highlighted.disabled:focus,
.datepicker table tr td.selected[disabled]:focus,
.datepicker table tr td.selected.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.selected:focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted:focus,
.datepicker table tr td.selected.disabled.focus,
.datepicker table tr td.selected.highlighted.disabled.focus,
.datepicker table tr td.selected[disabled].focus,
.datepicker table tr td.selected.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.selected.focus,
fieldset[disabled] .datepicker table tr td.selected.highlighted.focus {
  background-color: #777777;
  border-color: #555555;
}
.datepicker table tr td.active,
.datepicker table tr td.active.highlighted {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active:focus,
.datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active.focus,
.datepicker table tr td.active.highlighted.focus {
  color: #fff;
  background-color: #286090;
  border-color: #122b40;
}
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active {
  color: var(--datepicker--color__active);
  background-color: var(--secondary500);
  border-color: var(--secondary500);
}
.datepicker table tr td.active:active:hover,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.highlighted.active:focus,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.highlighted.active.focus {
  color: var(--primary1000);
  background-color: var(--secondary600);
  border-color: var(--secondary600);
}
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.highlighted.disabled:hover,
.datepicker table tr td.active[disabled]:hover,
.datepicker table tr td.active.highlighted[disabled]:hover,
fieldset[disabled] .datepicker table tr td.active:hover,
fieldset[disabled] .datepicker table tr td.active.highlighted:hover,
.datepicker table tr td.active.disabled:focus,
.datepicker table tr td.active.highlighted.disabled:focus,
.datepicker table tr td.active[disabled]:focus,
.datepicker table tr td.active.highlighted[disabled]:focus,
fieldset[disabled] .datepicker table tr td.active:focus,
fieldset[disabled] .datepicker table tr td.active.highlighted:focus,
.datepicker table tr td.active.disabled.focus,
.datepicker table tr td.active.highlighted.disabled.focus,
.datepicker table tr td.active[disabled].focus,
.datepicker table tr td.active.highlighted[disabled].focus,
fieldset[disabled] .datepicker table tr td.active.focus,
fieldset[disabled] .datepicker table tr td.active.highlighted.focus {
  background-color: #337ab7;
  border-color: #2e6da4;
}
.datepicker table tr td span {
  display: block;
  width: 23%;
  height: 54px;
  line-height: 54px;
  float: left;
  margin: 1%;
  cursor: pointer;
  border-radius: 4px;
}
.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
  /*
  background: #eeeeee;
  */
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
  background: none;
  /* color: #777777; */
  cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  /*
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  */
}
/* .datepicker table tr td span.active:focus, 
.datepicker table tr td span.active:hover:focus, */
/* .datepicker table tr td span.active.focus, 
.datepicker table tr td span.active:hover.focus, */
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active.disabled:hover.focus {
  /*
  color: #fff;
  background-color: #286090;
  border-color: #122b40;
  */
  opacity: 0.5;
}
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active.disabled:hover:hover {
  /*
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
  */
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
  /*
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
  */
}
.datepicker table tr td span.active:active:hover,
.datepicker table tr td span.active:hover:active:hover,
.datepicker table tr td span.active.disabled:active:hover,
.datepicker table tr td span.active.disabled:hover:active:hover,
.datepicker table tr td span.active.active:hover,
.datepicker table tr td span.active:hover.active:hover,
.datepicker table tr td span.active.disabled.active:hover,
.datepicker table tr td span.active.disabled:hover.active:hover,
.datepicker table tr td span.active:active:focus,
.datepicker table tr td span.active:hover:active:focus,
.datepicker table tr td span.active.disabled:active:focus,
.datepicker table tr td span.active.disabled:hover:active:focus,
.datepicker table tr td span.active.active:focus,
.datepicker table tr td span.active:hover.active:focus,
.datepicker table tr td span.active.disabled.active:focus,
.datepicker table tr td span.active.disabled:hover.active:focus,
.datepicker table tr td span.active:active.focus,
.datepicker table tr td span.active:hover:active.focus,
.datepicker table tr td span.active.disabled:active.focus,
.datepicker table tr td span.active.disabled:hover:active.focus,
.datepicker table tr td span.active.active.focus,
.datepicker table tr td span.active:hover.active.focus,
.datepicker table tr td span.active.disabled.active.focus,
.datepicker table tr td span.active.disabled:hover.active.focus {
  /*
  color: #fff;
  background-color: #204d74;
  border-color: #122b40;
  */
}
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover.disabled:hover,
.datepicker table tr td span.active.disabled.disabled:hover,
.datepicker table tr td span.active.disabled:hover.disabled:hover,
.datepicker table tr td span.active[disabled]:hover,
.datepicker table tr td span.active:hover[disabled]:hover,
.datepicker table tr td span.active.disabled[disabled]:hover,
.datepicker table tr td span.active.disabled:hover[disabled]:hover,
fieldset[disabled] .datepicker table tr td span.active:hover,
fieldset[disabled] .datepicker table tr td span.active:hover:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active.disabled:focus,
.datepicker table tr td span.active:hover.disabled:focus,
.datepicker table tr td span.active.disabled.disabled:focus,
.datepicker table tr td span.active.disabled:hover.disabled:focus,
.datepicker table tr td span.active[disabled]:focus,
.datepicker table tr td span.active:hover[disabled]:focus,
.datepicker table tr td span.active.disabled[disabled]:focus,
.datepicker table tr td span.active.disabled:hover[disabled]:focus,
fieldset[disabled] .datepicker table tr td span.active:focus,
fieldset[disabled] .datepicker table tr td span.active:hover:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover:focus,
.datepicker table tr td span.active.disabled.focus,
.datepicker table tr td span.active:hover.disabled.focus,
.datepicker table tr td span.active.disabled.disabled.focus,
.datepicker table tr td span.active.disabled:hover.disabled.focus,
.datepicker table tr td span.active[disabled].focus,
.datepicker table tr td span.active:hover[disabled].focus,
.datepicker table tr td span.active.disabled[disabled].focus,
.datepicker table tr td span.active.disabled:hover[disabled].focus,
fieldset[disabled] .datepicker table tr td span.active.focus,
fieldset[disabled] .datepicker table tr td span.active:hover.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled.focus,
fieldset[disabled] .datepicker table tr td span.active.disabled:hover.focus {

  background-color: #337ab7;
  border-color: #2e6da4;
}
.datepicker table tr td span.old,
.datepicker table tr td span.new {
  color: var(--datepicker--color__alternative);
}
.datepicker .datepicker-switch {
  width: 145px;
}
.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
  color: var(--interactive__default);
  cursor: pointer;
  transition: color .3s ease;
}

/*
.datepicker .prev:hover,
.datepicker .next:hover,
*/
.datepicker .datepicker-switch:hover,
.datepicker tfoot tr th:hover {
  /* background-color: transparent; */
  color: var(--interactive__hover);
}
.datepicker .prev.disabled,
.datepicker .next.disabled {
  visibility: hidden;
}
.datepicker .cw {
  font-size: 10px;
  width: 12px;
  padding: 0 2px 0 5px;
  vertical-align: middle;
}
.input-group.date .input-group-addon {
  cursor: pointer;
}
.input-daterange {
  width: 100%;
}
.input-daterange input {
  text-align: center;
}
.input-daterange input:first-child {
  border-radius: 3px 0 0 3px;
}
.input-daterange input:last-child {
  border-radius: 0 3px 3px 0;
}
.input-daterange .input-group-addon {
  width: auto;
  min-width: 16px;
  padding: 4px 5px;
  line-height: 1.42857143;
  border-width: 1px 0;
  margin-left: -5px;
  margin-right: -5px;
}

.datepicker .century,
.datepicker .decade,
.datepicker .year,
.datepicker .month {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--datepicker--color__default);
  font-size: var(--font-size-XS);
  transition: background-color .3s ease, border .3s ease, color .3s ease;
}

.datepicker .century:hover,
.datepicker .decade:hover,
.datepicker .year:hover,
.datepicker .month:hover {
  background-color: var(--datepicker--background__hover);
  border: 1px solid var(--datepicker--border__hover);
  color: var(--datepicker--color__alternative);
}

.datepicker .century:focus,
.datepicker .decade:focus,
.datepicker .year:focus,
.datepicker .month:focus {
  background-color: var(--datepicker--background__hover);
  border: 1px solid var(--datepicker--border__hover);
  color: var(--datepicker--color__alternative);
}

.datepicker .century.active,
.datepicker .decade.active,
.datepicker .year.active,
.datepicker .month.active {
  background-color: var(--datepicker--background__active);
  border: 1px solid var(--primary500);
  color: var(--primary100);
}

.datepicker .century.active:hover,
.datepicker .decade.active:hover,
.datepicker .year.active:hover,
.datepicker .month.active:hover {
  background-color: var(--datepicker--trigger--color__hover);
  border: 1px solid transparent;
  color: var(--datepicker--color__active);
}

.datepicker table tr {
    background-color: transparent;
    border-bottom: 0;
}

  .datepicker thead .datepicker-title {
    display: none;
  }

.datepicker .next,
.datepicker .prev {
  font-size: var(--font-size-L);
}

.datepicker table tr:hover td.day:not(.active) {
  color: var(--interactive__default);
}

  .datepicker table tr:hover td.day:hover {
    background-color: var(--datepicker--background__hover);
    color: var(--datepicker--background--color__hover);
  }

.datepicker table th {
  background-color: var(--datepicker-header--background__default);
}


.item--picker-month {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--spacing4);
  margin-left: auto;
  margin-right: 0;
}

    .intervalInput {
      display: inline-block;
      margin-bottom: 1rem;
      width: 100%;
    }

    .monthpicker_selector *::selection {
      background: transparent;
    }

    .monthpicker_selector {
      background-color: var(--primary750);
      border: 1px solid var(--primary700);
      border-radius: var(--spacing4);
      box-shadow: 4px 8px 32px 0 var(--shadow1);
      min-width: 250px;
      padding: var(--spacing4);
      position: absolute;
      right: 0;
      top: 100%;
      z-index: 100;
    }

    .monthpicker_selector > table {
      border-collapse: collapse;
      border-radius: 0.1rem;
      border-spacing: 0;
      font-size: 0.9rem;
      text-align: center;
      width: 100%;
    }

    .monthpicker_selector table tr {
      background-color: var(--primary700);
      border-bottom: 0;
    }

    .monthpicker_selector > table tr:first-child {
      background-color: var(--month-picker--header--background);
    }

    .monthpicker_selector > table tr:first-child td,
    .monthpicker_selector > table tr td {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    .monthpicker_selector > table tr:first-child > td:nth-child(1) {
      text-align: left;
    }

    .monthpicker_selector > table tr:first-child > td:nth-child(2) {
      position: relative;
    }

    .monthpicker_selector > table tr:first-child > td:nth-child(3) {
      text-align: right;
    }

    .monthpicker_selector > table tr:nth-child(2) td {
      width: 33%;
    }

    .yearSwitch {
      color: var(--secondary500);
    }

      .yearSwitch:hover {
        color: var(--secondary500);
      }

    .yearSwitch.off {
      visibility: hidden;
    }

    .yearValue {
      background-color: transparent;
      border: none;
      color: var(--secondary500);
      height: 100%;
      font-family: var(--font__default);
      font-size: var(--font-size-XS);
      font-weight: 600;
      text-align: center;
      width: 100%;
    }

    /* months */
    .monthpicker_selector .month {
      background-color: var(--month-picker--year--background);
      border-radius: 0.1rem;
      color: var(--month-picker--month--text__default);
      cursor: pointer;
      font-size: 0.9rem;
      text-align: center;
      transition: background-color .3s ease, border .3s ease, color .3s ease;
    }

    .monthpicker_selector .month:hover {
      background-color: var(--month-picker--month--background__hover);
      color: var(--month-picker--month--text__hover);
    }

    .monthpicker_selector .month:active,
    .monthpicker_selector .month:focus {
      background-color: var(--month-picker--month--background__focus);
      color: var(--month-picker--month--text__hover);
    }

    .month.selected {
      background-color: var(--month-picker--month--selected--background__default);
      color: var(--month-picker--month--selected--text__default);
      font-weight: bold;
      font-size: 0.9rem;
    }


    .monthpicker_selector .month.off {
      color: #fff;
      background: red;
      opacity: 0.65;
      cursor: not-allowed;
    }
    .monthpicker_selector .month.off:hover {
      background: red;
      opacity: 0.65;
    }

    .z-depth-0 {
      box-shadow: none !important;
    }
    .z-depth-1 {
      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
        0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    }
    .z-depth-2 {
      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }
    .z-depth-3 {
      box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14),
        0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    }
    .z-depth-4 {
      box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
        0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -7px rgba(0, 0, 0, 0.2);
    }
    .z-depth-5,
    .modal {
      box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
        0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
    }

.item--picker-week {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--spacing4);
}

	.date--weekpicker {
		align-items: center;
		background-color: transparent;
		border: 1px solid var(--form--field--border__default);
		border-radius: var(--spacing8);
		cursor: pointer;
		display: flex;
		font-weight: 400;
		font-size: var(--font-size-M);
		height: 44px;
		justify-content: center;
		padding: var(--spacing12);
		position: relative;
		transition: background-color .3s ease, color .3s ease;
	}

		.date--weekpicker:hover {
			background-color: var(--datepicker--trigger--background__hover);
			color: var(--datepicker--trigger--color__hover);
		}

	.date--weekpicker .datepicker .datepicker-days tr td.active ~ td,
	.date--weekpicker .datepicker .datepicker-days tr td.active {
		/* background-color: var(--accent__default); */
		border-radius: 0 !important;
		/* color: var(--interactive--text__default); */
	}

	.date--weekpicker .datepicker .datepicker-days tr td:hover {
			/*
		background-color: var(--interactive__default);
		color: var(--interactive--text__default);
		*/
	}
	
	.date--weekpicker .datepicker .datepicker-days tr td.active,
	.date--weekpicker .datepicker .datepicker-days tr td.focused {
		/*
		background-color: var(--accent__default);
		/*border-radius: 4px !important;*
		color: var(--interactive--text__default);
		*/
	}
	
	.date--weekpicker .datepicker .datepicker-days tr:hover td:not(.active, .focused) {
		/*
		background-color: var(--highlighted-block--background);
		*/
		border-radius: 0 !important;
	}
	
	.date--weekpicker .datepicker .datepicker-days tr:hover td:hover {
		/*
		background-color: var(--interactive__default);
		border-radius: var(--spacing4) !important;
		color: var(--interactive--text__default);
		*/
	} 

.item--profile {
	align-items: center;
	border-radius: var(--spacing24);
	display: flex;
	gap: var(--spacing12);
	justify-content: flex-start;
	margin-bottom: 0.4rem;
	position: relative;
	width: fit-content;
}

	.item--profile:last-of-type {
		margin-bottom: 0;
	}

	.item--profile .avatar {
		aspect-ratio: 1/1 auto;
		border: 0;
		border-radius: 25rem;
		font-size: var(--font-size-S);
		font-weight: 500;
		flex: 0 0 auto;
		height: 40px;
		margin: 0;
		width: 40px;
	}

	.item--profile .profile--name {
		color: var(--primary1000);
		font-weight: 500;
	}

	.profile--title {
		color: var(--primary700);
		font-weight: 400;
		margin-top: var(--spacing4);
	}

	.item--profile .additional--information {
		line-height: 1.2;
		padding-top: 0.25rem;
	}


	table .item--profile {
		width: fit-content;
	}

		table .item--profile .avatar {
			background-color: var(--primary400);
		}

		table .item--profile .item--label {
			overflow: visible;
		}

			table .item--label .profile--name {
				text-decoration: underline;
				white-space: nowrap;
			}

.overflow--horizontal {
	overflow-y: auto;
	scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
	width: 100%;
}

	.overflow--horizontal::-webkit-scrollbar {
		width: var(--spacing12);
		height: var(--spacing12);
	}

	.overflow--horizontal::-webkit-scrollbar-thumb {
		background: var(--scrollbar-foreground);
	}

	.overflow--horizontal::-webkit-scrollbar-track {
		background: var(--scrollbar-background);
	}

.scrollable {
	scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}

    .scrollable::-webkit-scrollbar {
        width: var(--spacing12);
        height: var(--spacing12);
    }

    .scrollable::-webkit-scrollbar-thumb {
        background: var(--scrollbar-foreground);
    }

    .scrollable::-webkit-scrollbar-track {
        background: var(--scrollbar-background);
    }

datalist {
    position: absolute;
    background-color: var(--form--field--background__default);
    border-radius: var(--spacing8);
    border: 1px solid var(--form--field--border__default);
	width: 100%;
    overflow: hidden;
    max-height: 10rem;
    overflow-y: auto;
    z-index: 1;
}

datalist option {
    padding: var(--spacing8) var(--spacing16) 0;
    color: var(--form--field--text__default);
    margin-bottom: 0;
    cursor: pointer;
    font-size: var(--font-size-M);
}

datalist option:hover, datalist option.active {
    background-color: var(--form--field--label--color__focus);
}


#sidebar {
    background-color: var(--sidebar--background__default);
    border-right: 0px solid transparent;
    border-top-right-radius: var(--spacing24);
    box-shadow: 4px 8px 32px 0 var(--shadow1);
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    list-style: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    transition: left .3s ease, width .3s ease;
    width: var(--scrollbar-width);
    z-index: 10;
}

    .logo {
        align-items: center;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        font-weight: 700;
        gap: var(--spacing8);
        height: 141px;
        justify-content: flex-start;
        margin: 64px auto 85px auto;
        width: fit-content;
    }

        .logo img {
            display: block;
            height: 94px;
            transition: all .3s ease;
            width: auto;
        }

        .logo span {
            color: var(--branding__default);
            display: block;
            font-size: var(--font-size-ML);
            font-weight: 500;
            letter-spacing: 1.5px;
            line-height: 1.5;
            margin-left: 0;
            margin-right: 0;
            opacity: 1;
            overflow: hidden;
            padding: 0 0 0 0;
            text-overflow: ellipsis;
            transition: all .3s ease;
            white-space: nowrap;
        }

    .sidebar-navigation {
        display: flex;
        overflow-y: auto;
    }

        .sidebar-navigation ul {
            display: flex;
            flex-direction: column;
            list-style: none;
            padding-left: 0;
            position: relative;
            transition: all .3s ease;
            width: 100%;
        }

            .sidebar-navigation ul li {
                display: block;
                padding: 0;
            }

                .sidebar--navigation-link {
                    align-items: center;
                    border: 1px solid transparent;
                    border-radius: var(--spacing4);
                    color: var(--navigation-link__default);
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    margin: 0 var(--spacing8) var(--spacing4);
                    outline: none;
                    padding: 8px 8px 8px 12px;
                    position: relative;
                    text-decoration: none;
                    transition: color .2s ease, border .2s ease, background-color .2s ease;
                }

                    .sidebar--navigation-link:active {
                        color: var(--navigation-link__default);
                    }

                    .sidebar--navigation-link:visited {
                        color: var(--navigation-link__default);
                    }

                    .sidebar--navigation-link:focus {
                        background-color: var(--navigation-link--background__focus);
                        border: 1px solid var(--navigation-link--border__hover);
                        color: var(--navigation-link__default);
                    }

                    .sidebar--navigation-link:hover {
                        border: 1px solid var(--navigation-link--border__hover);
                        color: var(--navigation-link__hover);
                    }

                    .sidebar--navigation-link.is--active {
                        background: var(--navigation-link--background__active);
                        color: var(--navigation-link__default);
                    }

                        .sidebar--navigation-link i {
                            color: inherit;
                            font-size: var(--font-size-L);
                            font-weight: 400;
                            margin-right: auto;
                            margin-right: 0;
                            transition: all .3s ease;
                        }

                .sidebar--navigation-link--label {
                    color: inherit;
                    font-size: var(--font-size-S);
                    font-weight: 600;
                    letter-spacing: 0.1px;
                    margin: 0 0 0 var(--spacing32);
                    opacity: 1;
                    transition: all .3s ease;
                    width: max-content;
                    white-space: nowrap;
                }

                .sidebar--navigation-link .badge {
                    background-color: var(--notification-blurb--background__default);
                    border: none;
                    border-radius: var(--spacing16);
                    color: var(--notification-blurb__default);
                    font-size: var(--font-size-XS);
                    font-weight: 600;
                    line-height: 18px;
                    margin-left: auto;
                    padding: 2px 8px 2px 8px;
                    position: relative;
                    text-shadow: none;
                }

    #sidebar-toggle {
        align-items: center;
        border-radius: 2rem;
        display: flex;
        height: 2rem;
        justify-content: center;
        position: absolute;
        left: var(--spacing12);
        top: 0.8rem;
        width: 2rem;
    }

        #sidebar-toggle i {
            font-size: var(--font-size-L);
            font-weight: 700;
        }

    #sidebar.open {
        left: 0;
    }

    #theme-switcher {
        margin: auto auto var(--spacing32) auto;
    }

    .sidebar--overlay {
        align-items: center;
        background-color: var(--sidebar-modal--background__default);
        backdrop-filter: blur(3px);
        border: 2px solid var(--modal--border__default);
        bottom: 0;
        box-shadow: 0px 4px 14px 4px var(--modal--box-shadow__default);
        display: none;
        height: 0;
        opacity: 0;
        overflow-y: auto;
        position: fixed;
        top: 0;
        transition: opacity .5s ease, width .1s linear, height .1s linear;
        width: 0;
        z-index: 9;
    }

/***
Spectrum Colorpicker v1.8.1
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/

.sp-container {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    *display: inline;
    *zoom: 1;
    /* https://github.com/bgrins/spectrum/issues/40 */
    z-index: 9999994;
    overflow: hidden;
}
.sp-container.sp-flat {
    position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
    position:relative;
    width: 100%;
    display:inline-block;
}
.sp-top-inner {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;
}
.sp-hue {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:84%;
    height: 100%;
}

.sp-clear-enabled .sp-hue {
    top:33px;
    height: 77.5%;
}

.sp-fill {
    padding-top: 80%;
}
.sp-sat, .sp-val {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
    display: block;
}
.sp-alpha-handle {
    position:absolute;
    top:-4px;
    bottom: -4px;
    width: 6px;
    left: 50%;
    cursor: pointer;
    border: 1px solid black;
    background: white;
    opacity: .8;
}
.sp-alpha {
    display: none;
    position: absolute;
    bottom: -14px;
    right: 0;
    left: 0;
    height: 8px;
}
.sp-alpha-inner {
    border: solid 1px #333;
}

.sp-clear {
    display: none;
}

.sp-clear.sp-clear-display {
    background-position: center;
}

.sp-clear-enabled .sp-clear {
    display: block;
    position:absolute;
    top:0px;
    right:0;
    bottom:0;
    left:84%;
    height: 28px;
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
    -webkit-user-select:none;
    -moz-user-select: -moz-none;
    -o-user-select:none;
    user-select: none;
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none;
}
.sp-palette-only .sp-picker-container {
    display: none;
}
.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-initial-disabled .sp-initial {
    display: none;
}


/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}

.sp-hue {
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

/* IE filters do not support multiple color stops.
   Generate 6 divs, line them up, and do two color gradients for each.
   Yes, really.
 */
.sp-1 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

.sp-hidden {
    /* display: none !important; */
    /* for animation */
    visibility: hidden;
    opacity: 0;
}

/* Clearfix hack */
.sp-cf:before, .sp-cf:after { content: ""; /*! display: table; */ }
.sp-cf:after { clear: both; }
.sp-cf { *zoom: 1; }

/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
    .sp-color { right: 40%; }
    .sp-hue { left: 63%; }
    .sp-fill { padding-top: 60%; }
}
.sp-dragger {
    border-radius: 5px;
    height: 5px;
    width: 5px;
    border: 1px solid #fff;
    background: #000;
    cursor: pointer;
    position:absolute;
    top:0;
    left: 0;
}
.sp-slider {
    position: absolute;
    top:0;
    cursor:pointer;
    height: 3px;
    left: -1px;
    right: -1px;
    border: 1px solid #000;
    background: white;
    opacity: .8;
}

/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/

.sp-container {
    border-radius: var(--spacing8);
    background: var(--background__default);
    border: 1px solid var(--form--field--border__default);
    padding: 0;
}

.sp-container, .sp-container *, .sp-preview-inner {
    -webkit-transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -moz-transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -ms-transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -o-transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: background 0.3s ease, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.sp-container:hover { background: var(--form--field--background__default); }


.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
    /* font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.sp-top {
    margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
    border: 0 none;
}

/* Input */
.sp-input-container {
    float:right;
    width: 100px;
    margin-bottom: 4px;
}
.sp-initial-disabled  .sp-input-container {
    width: 100%;
}
.sp-input {
    font-size: 12px !important;
    border: 1px inset;
    padding: 4px 5px;
    margin: 0;
    width: 100%;
    background:transparent;
    border-radius: 3px;
    color: #222;
}
.sp-input:focus  {
    border: 1px solid orange;
}
.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd;
}
.sp-picker-container , .sp-palette-container {
    float:left;
    position: relative;
    padding: 10px;
    padding-bottom: 300px;
    margin-bottom: -290px;
}
.sp-picker-container {
    width: 172px;
    /* border-left: solid 1px #fff; */
}

/* Palettes */
.sp-palette-container {
    /* border-right: solid 1px #ccc; */
}

.sp-palette-only .sp-palette-container {
    border: 0;
}

.sp-palette .sp-thumb-el {
    display: block;
    position:relative;
    float:left;
    width: 24px;
    height: 15px;
    margin: 3px;
    cursor: pointer;
    border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange;
}
.sp-thumb-el {
    position:relative;
}

/* Initial */
.sp-initial {
    float: left;
    border: solid 1px #333;
}
.sp-initial span {
    width: 30px;
    height: 25px;
    border:none;
    display:block;
    float:left;
    margin:0;
}

.sp-initial .sp-clear-display {
    background-position: center;
}

/* Buttons */
/* .sp-palette-button-container, */
.sp-button-container {
    float: right;
}

.sp-palette-button-container { width: 100%; }

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin:0;
    overflow:hidden;
    cursor:pointer;
    padding: 0;
    display:inline-block;
    *zoom: 1;
    *display: inline;
    /* border: solid 1px #91765d; */
    /* background: #eee; */
    color: #333;
    /*! vertical-align: middle; */

    width: 100%;
    height: 48px;
}

.sp-replacer.colorpicker--small {
    width: 48px !important;
}
/*.sp-replacer:hover, .sp-replacer.sp-active {
    border-color: #F0C49B;
    color: #111;
}
*/
.sp-replacer.sp-disabled {
    cursor:default;
    border-color: silver;
    color: silver;
}
.sp-dd {
    display: none; /* L. */
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float:left;
    font-size:10px;
}

.sp-preview {
    /*! position:relative; */
    width: 100%;
    height: 48px;
    margin-right: 5px;
    z-index: 0;
    /* edit *
	firefox first load, bigger colorpicker circles, corrects on reload
    width: 100%;
    height: 100%;
	*/
    display: inline-block;
}

.colorpicker--small .sp-preview {
    width: 48px !important;
}
.sp-preview-inner {
    border-radius: var(--spacing8);
    border: 1px solid var(--form--field--border__default);
    height: 48px;
    line-height: 1.23536;
}
.colorpicker--small .sp-preview-inner {
    width: 48px !important;
}

/*tr:hover td .sp-preview-inner { background: #ff3600 !important; } */

.sp-palette {
    *width: 220px;
    max-width: 220px;
}
.sp-palette .sp-thumb-el {
    width:30px;
    height: 30px;
    margin:2px 1px;
    border: 0 none;
}

.sp-container {
    padding-bottom:0;
}

/* Buttons: */
/*
.sp-container button {
  background-color: #eeeeee;
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  border-radius: 3px;
  color: #333;
  font-size: 14px;
  line-height: 1;
  padding: 5px 4px;
  text-align: center;
  text-shadow: 0 1px 0 #eee;
  vertical-align: middle;
}
.sp-container button:hover {
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
*/
/*
.sp-container button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
*/
/*
.sp-cancel {
    font-size: 11px;
    color: #d93f3f !important;
    margin:0;
    padding:2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration:none;

}
.sp-cancel:hover {
    color: #d93f3f !important;
    text-decoration: underline;
}
*/
/*
.sp-palette span:hover, .sp-palette span.sp-thumb-active {
    border-color: #000;
}
*/
button.sp-palette-toggle {
    display: inline-block;
    width: 100%;
    border: 0 none;
    outline: none;
    font-weight: bold;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--spacing8);
    padding: var(--spacing12) var(--spacing16);
}

button.sp-palette-toggle {
    background-color: var(--button--secondary--background__default);
}
button.sp-palette-toggle:hover { background-color: var(--button--secondary--background__hover); }

button.sp-choose,
a.sp-cancel {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    border: 0 none;
    background-color: rgba(0,0,0,0.25);
    margin-left: .5rem;
    margin-top: .5rem;
    border-radius: var(--spacing8);
}
button.sp-choose:before,
a.sp-cancel:before {
    font-family: 'tsb' !important;
    font-size: var(--font-size-ML);
    font-weight: normal;
    color: var(--button--filter--color__default);
    text-align: center;
}
button.sp-choose:hover,
a.sp-cancel:hover {
    background-color: var(--button--primary--background__hover);
}
button.sp-choose:hover:before,
a.sp-cancel:hover:before {
    color: #fff;
}
button.sp-choose:before {
    content: '\e915';
}
a.sp-cancel:before {
    content: '\e916';
}

/* .sp-preview, */
.sp-alpha {
    position:relative;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
    display:block;
    position:absolute;
    top:0;left:0;bottom:0;right:0;
}

.sp-palette .sp-thumb-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius: var(--spacing8);
    line-height: 2rem; /* IE fix */
}
/*
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}
*/
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner:before,
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner:before {
    content: 'A';
    display: inline-block;
    width: 100%;
    text-align: center;
}
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner { color: rgb(12,21,30); }
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { color: rgb(255,255,255); }
/*
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}
*/
.sp-clear-display {
    background-repeat:no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}


table {
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

		th {
			background-color: var(--table--header--background__default);
			color: var(--table--header--color__default);
			font-size: var(--font-size-XS);
			font-weight: 600;
			line-height: normal;
			padding: 14px 24px;
			text-align: left;
		}

			.item--sort-column {
				font-size: 16px;
				margin: 0 0 0 var(--spacing4);
				vertical-align: middle;
			}

	tr {
		background-color: var(--table--row--background__default);
		border-bottom: 1px solid var(--table--row--border__default);
	}

		td {
			color: var(--table--row--color__default);
			font-size: var(--font-size-S);
			font-weight: 500;
			line-height: 20px;
			padding: 14px 24px;
		}

		tr td:last-child {
			text-align: right;
			width: 1%;
			white-space: nowrap;
		}

			.item--counter::before {
				content: counter(counter);
				counter-increment: counter;
			}

			.has--counter {
				counter-reset: counter;
			}

			.assessment--time-limit,
			.assessment--time-completed {
				display: flex;
				gap: var(--spacing4);
				align-items: center;
			}

			.assessment--date-created,
			.assessment--date-completed {
				white-space: nowrap;
			}

			.light-text {
				color: var(--table--row--color__alternative);
			}

	tr:last-of-type {
		border-bottom: none;
	}

.tabs {
	display: block;
	height: 100%;
	list-style: none;
	margin: 1rem auto;
	padding: 0;
	position: relative;
	width: 100%;
}

	.tabs hr {
		border: 1px solid var(--text__default);
		margin-top: -2px;
	}

	.tabs input[type="radio"][id^="tab"] {
		display:none;
	}

		.tabs > label {
			background-color: var(--tabs--label--background__default);
			border: 1px solid var(--tabs--label--border__default);
			border-radius: var(--spacing32);
			color: var(--tabs--label--color__default);
			cursor: pointer;
			display: inline-block;
			font-size: 1rem;
			font-weight: normal;
			margin: 0 var(--spacing4) var(--spacing8) 0;
			position: relative;	
			text-align: center;
			text-decoration: none;
			transition: background-color .3s ease, border .3s ease, color .3s ease;
			padding: var(--spacing4) var(--spacing12) var(--spacing4) var(--spacing12);
		}

			.tabs > label:hover {
				background-color: var(--tabs--label--background__hover);
				border: 1px solid var(--tabs--label--border__hover);
                color: var(--tabs--label--color__hover);
			}

			.tabs [id^="tab"]:checked + label {
                background-color: var(--tabs--label--background__active);
                border: 1px solid var(--tabs--label--border__active);
                color: var(--tabs--label--color__active);
			}

/*  
	Having tabs in one row, which user  reveals / hides by clicking on the arrow button, would be a better solution, 
	but to achieve it, JS solution is required. One of the posible implementations could be Bootstrap Infinite Tabs:

	https://codepen.io/Mobius1/pen/pgVoPo 

*/

			#tab0:checked ~ #tab-content0,
			#tab1:checked ~ #tab-content1,
			#tab2:checked ~ #tab-content2,
			#tab3:checked ~ #tab-content3,
            #tab4:checked ~ #tab-content4,
            #tab5:checked ~ #tab-content5,
            #tab6:checked ~ #tab-content6,
            #tab7:checked ~ #tab-content7,
            #tab8:checked ~ #tab-content8,
            #tab9:checked ~ #tab-content9,
            #tab10:checked ~ #tab-content10,
            #tab11:checked ~ #tab-content11,
			#tab12:checked ~ #tab-content12,
			#tab13:checked ~ #tab-content13 {
				display: block;
			}

			.tab-content {
					display: none;
					position: relative;
					padding: 0 0 0 0;
					box-sizing: border-box;
					background-color: transparent;
					height: 100%;
					width: 100%;
					flex: 1 1 auto;
					flex-direction: row;
					flex-wrap: wrap;
					align-content: flex-start;
			}

				.tab-content *:not(input) {
						animation: fade 0.7s ease-in-out;
				}

	.tag {
		background-color: var(--primary100);
		border-radius: var(--spacing32);
		color: var(--primary1000);
		display: inline-flex;
		font-size: var(--font-size-XS);
		font-weight: 600;
		height: fit-content;
		gap: var(--spacing4);
		padding: calc(var(--spacing4) / 2) var(--spacing8) calc(var(--spacing4) / 2) var(--spacing8);
		white-space: nowrap;
	}

		.is--negative {
			background-color: var(--error600);
			color: var(--error900);
		}

		.is--neutral {
			background-color: var(--warning600);
			color: var(--success900);
		}

		.is--positive {
			background-color: var(--success600);
			color: var(--success900);
		}

		.is--information {
			background-color: var(--information--background__default);
			color: var(--information__default);
		}

		.is--warning {
			background-color: var(--warning--background__default);
			color: var(--warning__default);
		}

		.is--dimmed {
			opacity: 0.5;
		}

.margin--top {
	margin-top: var(--spacing32);
}

.vertical--center {
	align-items: center;
}

.horizontal--center {
	margin-inline: auto;
}

.horizontal--left {
	margin-right: auto;
}

.horizontal--right {
	margin-left: auto;
}

.space--between {
	justify-content: space-between;
}

.space--around {
	justify-content: space-around;
}

.hidden {
	display: none !important;
}

/* Hide LastPass icons */
.form--field {
	background-image: none !important;
}

[id^="__lpform"] {
	display: none !important;
}

.container--width {
	width: 100%;
}

.transparent {
	background-color: transparent;
}

.item--block {
    align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing16);
	width: 100%;
}

	.item--block .form--control {
		width: min-content;
	}

.item--icon-left {
    align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing16); 
}

    .item--icon-left > i {
        font-size: var(--font-size-ML);
    }

.not-interactive {
    user-select: none;
    pointer-events: none;
}

.is--code {
    font-family: var(--font__code) !important;
    font-size: var(--font-size-S) !important;
    font-weight: 400 !important;
    line-height: 15px !important;
    white-space: pre;
}

.item--label {
    line-height: 1;
    margin-right: auto;
    max-width: calc(100% - 60px);
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .3s ease;
}

.error {
    color: var(--error__default);
}

.information {
    color: var(--information__default);
}

.success {
    color: var(--success__default);
}

.warning {
    color: var(--warning__default);
}

.text-XXS {
	font-size: var(--font-size-XXS) !important;
}

.text-XS {
	font-size: var(--font-size-XS) !important;
}

.text-S {
	font-size: var(--font-size-S) !important;
}

.text-M {
	font-size: var(--font-size-M) !important;
}

.text-ML {
	font-size: var(--font-size-ML) !important;
}

.text-L {
	font-size: var(--font-size-L) !important;
}

.text-XL {
	font-size: var(--font-size-XL) !important;
}

.text-XXL {
	font-size: var(--font-size-XXL) !important;
}

* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

:root {
    --font__default: 'Plus Jakarta Sans', sans-serif;
    --font__code: 'Roboto Mono', monospace;

    --spacing4: 4px;
    --spacing8: 8px;
    --spacing12: 12px;
    --spacing16: 16px;
    --spacing24: 24px;
    --spacing32: 32px;
    --spacing48: 48px;
    --spacing64: 64px;
    --spacing128: 128px;
  
    --font-size-XXS: 10px;
    --font-size-XS: 12px;
    --font-size-S: 14px;
    --font-size-M: 16px;
    --font-size-ML: 18px;
    --font-size-L: 24px;
    --font-size-XL: 32px;
    --font-size-XXL: 48px;
}

:focus {
	outline: 2px solid var(--outline__default);
	outline-offset: 3px;
	transition: all .1s ease;
}

:disabled {
    cursor: not-allowed !important;
	opacity: 0.5;
	pointer-events: none !important;
}

p {
    margin-bottom: var(--spacing16);
}

hr {
    border-bottom: 2px solid var(--branding__default);
    margin-bottom: var(--spacing16);
}

ol,
ul {
    padding-left: var(--spacing32);
}

    ol > li,
    ul > li {
        padding-bottom: var(--spacing8);
    }

small,
.text_small {
    font-size: var(--font-size-XS);
}

a {
    color: var(--link__default);
    text-decoration: none;
    transition: color .3s ease;
}

    a:hover {
        color: var(--link__hover);
    }

blockquote {
    border-left: var(--spacing8) solid var(--blockquote--border__default);
    margin: var(--spacing8) 0 var(--spacing16) var(--spacing16);
    padding-left: .5em;
}

article {
    margin-bottom: var(--spacing16);
}

section {
    margin: var(--spacing32) 0 var(--spacing32) 0;
}

/* hide eye icon on password input in ms edge */
input::-ms-reveal, input::-ms-clear {
    display: none;
}

html,
body {
	background-color: var(--background__default);
	color: var(--text__default);
	font-family: var(--font__default);
	font-size: var(--font-size-M);
	font-weight: 400;
	line-height: 1.5;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

html {
	height: 100%;
}

	body {
		min-height: 100%;
	}

		.page-container {
			display: flex;
			flex-direction: column;
			height: auto;
			min-height: 100%;
			width: 100%;
		}

			main {
				container: main / inline-size;
				padding: 0 var(--spacing16) 0 var(--spacing16);
			}

/*		Desktop		*/

@media screen and (min-width: 960px) {
    .page-container {
        padding: 0 0 0 var(--scrollbar-width);
    }

    .page-container .modal--overlay {
        width: calc(100% - 320px);
    }

        #mobile--header {
            display: none;
        }

        #sidebar-toggle {
            display: none;
        }
}

.multi-step-form-container {
	margin-left: auto;
	margin-right: auto;
	padding: var(--spacing32) 0 var(--spacing32) 0;
	user-select: none;
	width: min(100%, 448px);
}

	.form-stepper--title {
		margin: 0 0 0 0;
	}

	ul.form-stepper {
		counter-reset: section;
		margin: var(--spacing4) 0 var(--spacing24) 0;
		padding-left: 0;
	}

	ul.form-stepper .form-stepper-circle {
		animation: scale 0.3s ease-in-out;
		position: relative;
	}

	ul.form-stepper .form-stepper-circle span {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateY(-50%) translateX(-50%);
	}

	.form-stepper-horizontal {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		justify-content: flex-start;
		align-items: center;
	}

	ul.form-stepper > li:not(:last-of-type) {
		margin-bottom: 0.625rem;
		transition: margin-bottom 0.4s;
	}

	.form-stepper-horizontal > li:not(:last-of-type) {
		margin-bottom: 0 !important;
	}

	.form-stepper-horizontal li {
		align-items: start;
		display: flex;
		position: relative;
		transition: 0.5s;
	}

	.form-stepper-horizontal li:last-child {
		flex: unset;
	}
	
	.form-stepper-circle {
		background-color: var(--primary300);
		border-radius: 50%;
		display: block;
		width: 9px;
		height: 9px;
		line-height: normal;
		margin-right: 0;
		text-align: center;
		transition: background-color .3s ease-in-out;
	}
	
	.form-stepper-active .form-stepper-circle {
		background-color: var(--secondary500);
		height: 14px;
		width: 14px;
	}
	
		.form-stepper-active .form-stepper-circle:hover {
			background-color: var(--secondary600);
		}

	.form-stepper-unfinished .form-stepper-circle {
		background-color: var(--primary300);
	}

		.form-stepper-unfinished .form-stepper-circle:hover {
			background-color: var(--primary200);
		}

	.form-stepper-completed .form-stepper-circle {
		background-color: var(--primary500);
	}
	
		.form-stepper-completed .form-stepper-circle:hover {
			background-color: var(--primary500);
		}
	
	.form-stepper .label {
		font-size: 1rem;
		margin-top: 0.5rem;
	}
	
	.form-stepper-list .step--wrapper {
		color: var(--interactive__default);
		position: relative;
	}

	.form-step {
		animation: scale .7s ease-in-out;
		padding: 0 0 0 0;
	}

.card--grid {
	display: grid;
	gap: var(--spacing16);
	margin-bottom: var(--spacing32);
	width: 100%;
}

	.grid--auto-fit {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	.grid--1-2 {
		grid-template-columns: 1fr 2fr;
	}

	.grid--1-1 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--1-1-1 {
		grid-template-columns: repeat(3, 1fr);
	}

.grid--fieldset {
	display: grid;
	gap: var(--spacing16);
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

	.grid--fieldset .form--label {
		white-space: initial;
	}

/*		Mobile & Tablet		*/

@media (min-width: 300px) and (min-height: 300px) {
	.dialog {
		top: 30%;
	}
}

@media screen and (max-width: 959px) {
	#sidebar {
		left: -320px;
	}

		#sidebar .logo {
			display: none;
		}

		.sidebar-navigation {
			margin-top: 64px;
		}

	#sidebar.open ~ .sidebar--overlay {
		display: block;
		height: 100vh;
		opacity: 0.5;
		width: 100%;
	}

	.banner--notification {
		top: 64px;
	}
	
	.page--header {
		padding-top : 76px;
	}
}

/* Switch to auto-fit when <main> width is < 960px */
@container main (max-width: 960px) {
	.grid--1-2,
	.grid--1-1,
	.grid--1-1-1 {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}
}

	@container action-bar (max-width: 250px) {
		button {
			flex: 1 1 auto;
			justify-content: center;
			white-space: normal;
		}

			/* the button keeps the same dimensions,
			so I am not sure the reason this is was being hidden */
			button i {
				/*display: none;*/
			}
	}

	@container card (max-width: 250px) {
		.card--header button {
			flex: 1 1 auto;
			justify-content: center;
			white-space: normal;
		}

		.card--header button i {
			display: none;
		}

		.segmented-button {
			flex-wrap: wrap;
			gap: var(--spacing8);
		}

			.segmented-button .filter-button {
				border-radius: var(--spacing8);
				flex: 1 1 auto;
			}
	}

		@container card-footer (max-width: 250px) {
			.footer-buttons-container {
				display: flex;
				flex-direction: column-reverse;
				flex: 1 1 auto;
			}
			
				button {
					display: flex;
					flex: 1 1 auto;
					justify-content: center;
					white-space: normal;
				}
		}
		
		@container filtering-button (max-width: 350px) {
			.filter-button {
				width: 100%;
				white-space: normal;
			}
		}

		@container action-bar (max-width: 350px) {
			.action-bar-label {
				width: 100%;
				white-space: normal;
				margin-inline: auto;
			}
		}

.landing-container {
	align-items: center;
	animation: none; /* gradient 15s ease infinite - check for perfomance issues */
	background: linear-gradient(328deg, var(--landing-page--background__default)); /* var(--primary700), var(--primary900), var(--primary700), var(--primary700))*/
	background-size: 100%; /* 400% 400% */
	display: flex;
	flex-direction: column;
	height: 100vh;
	justify-content: center;
	padding: 0 var(--spacing32) 0 var(--spacing32);
	transition: padding .3s ease;
	width: 100%;
}

	.landing-container .logo {
		height: auto;
		margin: var(--spacing32) 0 var(--spacing32) 0;
		width: fit-content;
	}

	.landing-container .card--footer {
		flex-flow: column;
	}

		.landing-container .card--footer .form--message {
			height: auto;
		}

	.logo .logo-landing {
		width: 200px;
		animation: scale .7s ease-in-out;
	}

		.logo-landing + span {
			font-size: 56px;
		}

	.login-link {
		background-color: var(--item--action--background);
		border: 2px solid transparent;
		color: white;
		text-decoration: underline;
		transition: all .3s ease;
	}

		.login-link:hover {
			background-color: var(--item--action--background__hover);
			border: 2px solid var(--interactive__hover);
			color: white;
			text-decoration: none;
		} 

	.landing-container footer {
		position: fixed;
		bottom: 0;
		animation: scale .3s ease-in-out;
	}

	#login {
		display: flex;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		align-items: center;
		justify-content: center;
	}

		.login--form {
			max-width: 448px;
			width: 100%;
		}

		.is--login {
			pointer-events: none;
		}

.quiz-container {
	height: 100%;
}

	.quiz--header {
		align-items: center;
		background-color: var(--quiz-header--background__default);
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing8);
		justify-content: space-between;
		margin: 0 0 0 0;
		padding: var(--spacing24) var(--spacing32) var(--spacing24) var(--spacing32);
	}

		.quiz--header .logo {
			flex-direction: row;
			gap: var(--spacing16);
			height: fit-content;
			margin: 0 0 0 0;
			padding: 0 0 0 0;
			width: fit-content;
		}

			.quiz--header .logo img {
				height: auto;
				width: 46px;
			}
		
		.quiz--time-left {
			color: var(--text__default);
			font-size: var(--font-size-ML);
			font-weight: 500;
			letter-spacing: 1.5px;
		}

		.assessment--candidate-name {
			font-size: var(--font-size-XL);
			font-weight: 700;
			margin: var(--spacing8) 0 var(--spacing16) 0;
		}

		.form-step .card--content strong {
			color: var(--secondary600);
		}

@media screen and (prefers-color-scheme: dark) { 
  :root {

    --primary100: #E9F0F0;
    --primary200: #D4E1E1;
    --primary300: #A8C3C2;
    --primary400: #7DA4A4;
    --primary500: #518685;
    --primary600: #266867;
    --primary700: #1E5352;
	--primary70090: #1E5352E6;
    --primary750: #1A4645;
    --primary800: #173E3E;
    --primary900: #0F2A29;
    --primary950: #051821;
    --primary1000: #081515;

    --secondary500: #F8BC24;
    --secondary600: #F58800;

    --error500: #FCEAE8;
    --error600: #FCA197;
    --error700: #DC180C;
    --error800: #9E241C;
    --error900: #800C05;

    --warning500: #FCF8D4;
    --warning600: #FCF3A2;
    --warning700: #FFE600;
    --warning800: #E5CF00;
    --warning900: #CCB800;

    --success500: #E8FCE9;
    --success600: #A3F0A7;
    --success700: #00C408;
    --success800: #139E19;
    --success900: #008005;

    --shadow1: rgb(5 24 33 / 25%);

    --scrollbar-background: var(--primary900);
    --scrollbar-foreground: var(--primary400);
    --scrollbar-width: 320px;

    --background__default: var(--primary750);
    --blockquote--border__default: rgb(0 0 0 / 20%);

    --headings__default: var(--primary100);
    --link__default: var(--secondary500);
    --link__hover: var(--secondary600);
    --outline__default: var(--secondary500);
    --text__default: var(--primary100);

    --quiz-header--background__default: var(--primary950);

    --mobile-header--background__default: var(--primary900);

    --header--background__default: transparent;
    --branding__default: var(--text__default);

    --breadcrumbs--color__default: var(--primary300);
    --breadcrumbs--color__hover: var(--secondary500);
    --breadcrumbs--color__active: var(--primary100);
    --breadcrumbs--color__disabled: var(--primary500);

    --action-bar--background__default: var(--primary800);

    --error__default: var(--error600);
    --error--background__default: var(--error600);
    --information__default: rgb(60, 130, 249);
    --information--background__default: rgb(218, 242, 251);
    --success__default: rgb(56, 177, 83);
    --success--background__default: rgb(218, 251, 224);
    --warning__default: rgb(246, 117, 4);
    --warning--background__default: rgb(251, 241, 218);

    --interactive__default: var(--secondary500);
    --interactive__hover: var(--secondary600);
    --item--action--background__hover: var(--primary700);

    --form--field--background__default: var(--primary900);
    --form--field--border__default: var(--primary500);
    --form--field--text__default: var(--primary100);
    --form--field--icon__default: var(--primary100);
    --form--field--label--color__default: var(--primary400);
    --form--field--checks--background__default: var(--primary700);
    --form--field--label--color__focus: var(--interactive__default);
    --form--error-message__default: var(--error600);

    --button--primary--background__default: var(--secondary500);
    --button--primary--border__default: var(--secondary500);
    --button--primary--color__default: var(--primary1000);
    --button--primary--background__hover: var(--secondary600);
    --button--primary--border__hover: var(--secondary600);
    --button--primary--color__hover: var(--primary1000);

    --button--secondary--background__default: var(--primary100);
    --button--secondary--border__default: var(--primary100);
    --button--secondary--color__default: var(--primary1000);
    --button--secondary--background__hover: var(--primary200);
    --button--secondary--border__hover: var(--primary200);
    --button--secondary--color__hover: var(--primary1000);

    --button--tertiary--background__default: transparent;
    --button--tertiary--border__default: transparent;
    --button--tertiary--color__default: var(--primary100);
    --button--tertiary--background__hover: transparent;
    --button--tertiary--border__hover: var(--primary500);
    --button--tertiary--color__hover: var(--secondary500);

    --button--delete--color__default: var(--error600);
    --button--delete--background__hover: var(--error600);
    --button--delete--border__hover: var(--error600);
    --button--delete--color__hover: var(--error900);

    --button--filter--background__default: var(--primary900);
    --button--filter--border__default: var(--primary500);
    --button--filter--color__default: var(--primary100);
    --button--filter--background__hover: var(--primary900);
    --button--filter--border__hover: var(--primary500);
    --button--filter--color__hover: var(--secondary500);
    --button--filter-selected--background__default: var(--primary100);
    --button--filter-selected--border__default: var(--primary100);
    --button--filter-selected--color__default: var(--primary1000);
    --button--filter-selected--background__hover: var(--primary100);
    --button--filter-selected--border__hover: var(--primary100);
    --button--filter-selected--color__hover: var(--primary1000);

    --theme-switcher--background__default: var(--primary100);
    --theme-switcher--border__default: var(--primary100);
    --theme-switcher--color__default: var(--primary1000);
    --theme-switcher--background__hover: var(--primary200);
    --theme-switcher--border__hover: var(--primary200);
    --theme-switcher--color__hover: var(--primary1000);
    --theme-switcher--icon__default: "\e927";
    --variant-name--content: "Switch to light theme";

    --placeholder--color__default: var(--primary300);

    --table--header--background__default: var(--primary800);
    --table--header--color__default: var(--primary200);
    --table--row--background__default: var(--primary300);
    --table--row--border__default: var(--primary100);
    --table--row--color__default: var(--primary1000);
    --table--row--color__alternative: var(--primary700);

    --tag__default: rgb(160, 144, 144);
    --tag--background__default: rgb(0 0 0 / 5%);

    --modal--background__default: var(--primary70090);
    --modal--box-shadow__default: rgb(196 196 196 / 25%);
    --modal--border__default: none;

    --dialog--background__default: var(--primary800);

    --availability--time-slot--background__default: var(--primary950);
    --availability--time-slot--border__default: var(--primary300);
    --availability--time-slot--text__default: var(--primary300);
    --availability--is--today--time-slot--background__default: var(--primary950);
    --availability--is--today--time-slot--border__default: var(--primary500);
    --availability--is--today--column--day--background__default: var(--primary1000);
    --availability--is--today--column--day--text__default: var(--primary300);
    --availability--is--past--time-slot--background__default: var(--primary600);
    --availability--is--past--column--day--background__default: var(--primary900);
    --availability--not--current--month--background__default: var(--primary600);

    --calendar--border__default: var(--primary600);
    --calendar--day--background__default: var(--primary800);
    --calendar--is--today--background__default: var(--primary900);
    --calendar--weekend--background__default: var(--primary900);
    --calendar--show-more-background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--day--background__default) 70%);
    --calendar--weekend--show-more--background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--weekend--background__default) 70%);
    --calendar--is--today--show-more-background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--is--today--background__default) 70%);

    --meeting__default: var(--secondary500);
    --meeting--background__default: var(--primary700);
    --meeting--box-shadow__default: none;
    --meeting--box-shadow__hover: rgb(0 0 0 / 20%);
    --meeting--actions--text__default: var(--text__default);
    --meeting--actions--background__hover: rgb(0 0 0 / 20%);
    --meeting--accepted__default: rgb(56, 177, 83);
    --meeting--cancelled__default: rgb(246, 4, 4);
    --meeting--new-invitation--background__default: rgb(232, 152, 234);
    --meeting--new-invitation--heading__default: rgb(166, 13, 169);
    --meeting--new-invitation--text__default: rgb(255, 255, 255);

    --notification-blurb__default: var(--primary900);
    --notification-blurb--background__default: var(--error600);

    --sidebar--background__default: var(--primary950);
    --navigation-link__default: var(--primary100);
    --navigation-link__hover: var(--secondary600);
    --navigation-link--border__hover: var(--primary700);
    --navigation-link--background__focus: var(--primary900);
    --navigation-link--background__active: var(--primary800);
    --sidebar-modal--background__default: var(--primary1000); 

    --tabs--label--background__default: var(--primary950);
    --tabs--label--border__default: var(--primary500);
    --tabs--label--color__default: var(--primary200);
    --tabs--label--background__hover: var(--primary950);
    --tabs--label--border__hover: var(--primary500);
    --tabs--label--color__hover: var(--secondary600);
    --tabs--label--background__active: var(--primary100);
    --tabs--label--border__active: var(--primary100);
    --tabs--label--color__active: var(--primary1000);

    --datepicker--background__default: var(--primary750);
    --datepicker--border__default: var(--primary700);
    --datepicker--color__default: var(--primary200);
    --datepicker--color__alternative: var(--primary400);
    --datepicker-header--background__default: var(--primary800);
    --datepicker--background__active: var(--primary900);
    --datepicker--background__hover: var(--primary900);
    --datepicker--border__hover: var(--primary600);
    --datepicker--color__hover: var(--secondary600);
    --datepicker--color__active: var(--primary1000);
    --datepicker--trigger--background__hover: var(--primary950);
    --datepicker--trigger--color__hover: var(--secondary600);

    --card--background__default: var(--primary800);
    --card--border__default: var(--primary500);
    --card--color__default: var(--text__default);
    --card--color__alternative: var(--primary400);
    --card-footer--background__default: var(--primary700);

    --landing-page--background__default:  var(--primary700), var(--primary900);

  }
}


.darkmode {

  --primary100: #E9F0F0;
  --primary200: #D4E1E1;
  --primary300: #A8C3C2;
  --primary400: #7DA4A4;
  --primary500: #518685;
  --primary600: #266867;
  --primary700: #1E5352; /* 30, 83, 82 */
  --primary70090: #1E5352E6;
  --primary750: #1A4645;
  --primary800: #173E3E;
  --primary900: #0F2A29;
  --primary950: #051821;
  --primary1000: #081515;

  --secondary500: #F8BC24;
  --secondary600: #F58800;

  --error500: #FCEAE8;
  --error600: #FCA197;
  --error700: #DC180C;
  --error800: #9E241C;
  --error900: #800C05;

  --warning500: #FCF8D4;
  --warning600: #FCF3A2;
  --warning700: #FFE600;
  --warning800: #E5CF00;
  --warning900: #CCB800;

  --success500: #E8FCE9;
  --success600: #A3F0A7;
  --success700: #00C408;
  --success800: #139E19;
  --success900: #008005;

  --shadow1: rgb(5 24 33 / 25%);

  --scrollbar-background: var(--primary900);
  --scrollbar-foreground: var(--primary400);
  --scrollbar-width: 320px;

  --background__default: var(--primary750);
  --blockquote--border__default: rgb(0 0 0 / 20%);

  --headings__default: var(--primary100);
  --link__default: var(--secondary500);
  --link__hover: var(--secondary600);
  --outline__default: var(--secondary500);
  --text__default: var(--primary100);

  --quiz-header--background__default: var(--primary950);

  --mobile-header--background__default: var(--primary900);

  --header--background__default: transparent;
    --branding__default: var(--text__default);

  --breadcrumbs--color__default: var(--primary300);
  --breadcrumbs--color__hover: var(--secondary500);
  --breadcrumbs--color__active: var(--primary100);
  --breadcrumbs--color__disabled: var(--primary500);

  --action-bar--background__default: var(--primary800);

  --error__default: var(--error600);
  --error--background__default: var(--error600);
  --information__default: rgb(60, 130, 249);
  --information--background__default: rgb(218, 242, 251);
  --success__default: rgb(56, 177, 83);
  --success--background__default: rgb(218, 251, 224);
  --warning__default: rgb(246, 117, 4);
  --warning--background__default: rgb(251, 241, 218);

  --interactive__default: var(--secondary500);
  --interactive__hover: var(--secondary600);
  --item--action--background__hover: var(--primary700);

  --form--field--background__default: var(--primary900);
  --form--field--border__default: var(--primary500);
  --form--field--text__default: var(--primary100);
  --form--field--icon__default: var(--primary100);
  --form--field--label--color__default: var(--primary400);
  --form--field--checks--background__default: var(--primary700);
  --form--field--label--color__focus: var(--interactive__default);
  --form--error-message__default: var(--error600);

  --button--primary--background__default: var(--secondary500);
  --button--primary--border__default: var(--secondary500);
  --button--primary--color__default: var(--primary1000);
  --button--primary--background__hover: var(--secondary600);
  --button--primary--border__hover: var(--secondary600);
  --button--primary--color__hover: var(--primary1000);

  --button--secondary--background__default: var(--primary100);
  --button--secondary--border__default: var(--primary100);
  --button--secondary--color__default: var(--primary1000);
  --button--secondary--background__hover: var(--primary200);
  --button--secondary--border__hover: var(--primary200);
  --button--secondary--color__hover: var(--primary1000);

  --button--tertiary--background__default: transparent;
  --button--tertiary--border__default: transparent;
  --button--tertiary--color__default: var(--primary100);
  --button--tertiary--background__hover: transparent;
  --button--tertiary--border__hover: var(--primary500);
  --button--tertiary--color__hover: var(--secondary500);

  --button--delete--color__default: var(--error600);
  --button--delete--background__hover: var(--error600);
  --button--delete--border__hover: var(--error600);
  --button--delete--color__hover: var(--error900);

  --button--filter--background__default: var(--primary900);
  --button--filter--border__default: var(--primary500);
  --button--filter--color__default: var(--primary100);
  --button--filter--background__hover: var(--primary900);
  --button--filter--border__hover: var(--primary500);
  --button--filter--color__hover: var(--secondary500);
  --button--filter-selected--background__default: var(--primary100);
  --button--filter-selected--border__default: var(--primary100);
  --button--filter-selected--color__default: var(--primary1000);
  --button--filter-selected--background__hover: var(--primary100);
  --button--filter-selected--border__hover: var(--primary100);
  --button--filter-selected--color__hover: var(--primary1000);

  --theme-switcher--background__default: var(--primary100);
  --theme-switcher--border__default: var(--primary100);
  --theme-switcher--color__default: var(--primary1000);
  --theme-switcher--background__hover: var(--primary200);
  --theme-switcher--border__hover: var(--primary200);
  --theme-switcher--color__hover: var(--primary1000);
  --theme-switcher--icon__default: "\e927";
  --variant-name--content: "Switch to light theme";

  --placeholder--color__default: var(--primary300);

  --table--header--background__default: var(--primary800);
  --table--header--color__default: var(--primary200);
  --table--row--background__default: var(--primary300);
  --table--row--border__default: var(--primary100);
  --table--row--color__default: var(--primary1000);
  --table--row--color__alternative: var(--primary700);

  --tag__default: rgb(160, 144, 144);
  --tag--background__default: rgb(0 0 0 / 5%);

  --modal--background__default: var(--primary70090);
  --modal--box-shadow__default: rgb(196 196 196 / 25%);
  --modal--border__default: none;

  --dialog--background__default: var(--primary800);

  --availability--time-slot--background__default: var(--primary950);
  --availability--time-slot--border__default: var(--primary300);
  --availability--time-slot--text__default: var(--primary300);
  --availability--is--today--time-slot--background__default: var(--primary950);
  --availability--is--today--time-slot--border__default: var(--primary500);
  --availability--is--today--column--day--background__default: var(--primary1000);
  --availability--is--today--column--day--text__default: var(--primary300);
  --availability--is--past--time-slot--background__default: var(--primary600);
  --availability--is--past--column--day--background__default: var(--primary900);
  --availability--not--current--month--background__default: var(--primary600);

  --calendar--border__default: var(--primary600);
  --calendar--day--background__default: var(--primary800);
  --calendar--is--today--background__default: var(--primary900);
  --calendar--weekend--background__default: var(--primary900);
  --calendar--show-more-background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--day--background__default) 70%);
  --calendar--weekend--show-more--background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--weekend--background__default) 70%);
  --calendar--is--today--show-more-background__default: linear-gradient(to bottom, rgb(0 0 0 / 0) 0, var(--calendar--is--today--background__default) 70%);

  --meeting__default: var(--secondary500);
  --meeting--background__default: var(--primary700);
  --meeting--box-shadow__default: none;
  --meeting--box-shadow__hover: rgb(0 0 0 / 20%);
  --meeting--actions--text__default: var(--text__default);
  --meeting--actions--background__hover: rgb(0 0 0 / 20%);
  --meeting--accepted__default: rgb(56, 177, 83);
  --meeting--cancelled__default: rgb(246, 4, 4);
  --meeting--new-invitation--background__default: rgb(232, 152, 234);
  --meeting--new-invitation--heading__default: rgb(166, 13, 169);
  --meeting--new-invitation--text__default: rgb(255, 255, 255);

  --notification-blurb__default: var(--primary900);
  --notification-blurb--background__default: var(--error600);

  --sidebar--background__default: var(--primary950);
  --navigation-link__default: var(--primary100);
  --navigation-link__hover: var(--secondary600);
  --navigation-link--border__hover: var(--primary700);
  --navigation-link--background__focus: var(--primary900);
  --navigation-link--background__active: var(--primary800);
  --sidebar-modal--background__default: var(--primary1000); 

  --tabs--label--background__default: var(--primary950);
  --tabs--label--border__default: var(--primary500);
  --tabs--label--color__default: var(--primary200);
  --tabs--label--background__hover: var(--primary950);
  --tabs--label--border__hover: var(--primary500);
  --tabs--label--color__hover: var(--secondary600);
  --tabs--label--background__active: var(--primary100);
  --tabs--label--border__active: var(--primary100);
  --tabs--label--color__active: var(--primary1000);

  --datepicker--background__default: var(--primary750);
  --datepicker--border__default: var(--primary700);
  --datepicker--color__default: var(--primary200);
  --datepicker--color__alternative: var(--primary400);
  --datepicker-header--background__default: var(--primary800);
  --datepicker--background__active: var(--primary900);
  --datepicker--background__hover: var(--primary900);
  --datepicker--border__hover: var(--primary600);
  --datepicker--color__hover: var(--secondary600);
  --datepicker--color__active: var(--primary1000);
  --datepicker--trigger--background__hover: var(--primary950);
  --datepicker--trigger--color__hover: var(--secondary600);

  --card--background__default: var(--primary800);
  --card--border__default: var(--primary500);
  --card--color__default: var(--text__default);
  --card--color__alternative: var(--primary400);
  --card-footer--background__default: var(--primary700);

  --landing-page--background__default:  var(--primary700), var(--primary900);

}

@media screen and (prefers-color-scheme: light) {
  :root {
    --primary100: #E9F0F0;
    --primary200: #D4E1E1;
    --primary300: #A8C3C2;
    --primary400: #7DA4A4;
    --primary500: #518685;
    --primary600: #266867;
    --primary700: #1E5352;
	--primary70090: #1E5352E6;
    --primary750: #1A4645;
    --primary800: #173E3E;
    --primary900: #0F2A29;
    --primary950: #051821;
    --primary1000: #081515;

    --secondary500: #6f520b;
    --secondary600: #8e550f;

    --error500: #FCEAE8;
    --error600: #FCA197;
    --error700: #DC180C;
    --error800: #9E241C;
    --error900: #800C05;

    --warning500: #FCF8D4;
    --warning600: #FCF3A2;
    --warning700: #FFE600;
    --warning800: #E5CF00;
    --warning900: #CCB800;
    
    --success500: #E8FCE9;
    --success600: #A3F0A7;
    --success700: #00C408;
    --success800: #139E19;
    --success900: #008005;

    --shadow1: rgb(5 24 33 / 25%);

    --scrollbar-background: var(--primary300);
    --scrollbar-foreground: var(--primary500);
    --scrollbar-width: 320px;

    --background__default: var(--primary100);
    --blockquote--border__default: rgb(0 0 0 / 20%);

    --headings__default: var(--primary600);
    --link__default: var(--secondary500);
    --link__hover: var(--secondary600);
    --outline__default: var(--secondary600);
    --text__default: var(--primary900);

    --quiz-header--background__default: var(--primary200);

    --mobile-header--background__default: var(--primary200);

    --header--background__default: transparent;
    --branding__default: var(--text__default);

    --breadcrumbs--color__default: var(--primary1000);
    --breadcrumbs--color__hover: var(--secondary900);
    --breadcrumbs--color__active: var(--primary600);
    --breadcrumbs--color__disabled: var(--primary300);

    --action-bar--background__default: var(--primary200);
    
    --error__default: var(--error600);
    --error--background__default: var(--error600);
    --information__default: rgb(60, 130, 249);
    --information--background__default: rgb(218, 242, 251);
    --success__default: rgb(56, 177, 83);
    --success--background__default: rgb(218, 251, 224);
    --warning__default: rgb(246, 117, 4);
    --warning--background__default: rgb(251, 241, 218);

    --interactive__default: var(--secondary500);
    --interactive__hover: var(--secondary600);
    --item--action--background__hover: var(--primary300);

    --form--field--background__default: var(--primary200);
    --form--field--border__default: var(--primary300);
    --form--field--text__default: var(--primary700);
    --form--field--icon__default: var(--primary700);
    --form--field--label--color__default: var(--primary600);
    --form--field--checks--background__default: var(--primary100);
    --form--field--label--color__focus: var(--interactive__default);
    --form--error-message__default: var(--error900);

    --button--primary--background__default: var(--secondary500);
    --button--primary--border__default: var(--secondary500);
    --button--primary--color__default: var(--primary100);
    --button--primary--background__hover: var(--secondary600);
    --button--primary--border__hover: var(--secondary600);
    --button--primary--color__hover: var(--primary100);

    --button--secondary--background__default: var(--primary300);
    --button--secondary--border__default: var(--primary300);
    --button--secondary--color__default: var(--primary1000);
    --button--secondary--background__hover: var(--primary400);
    --button--secondary--border__hover: var(--primary400);
    --button--secondary--color__hover: var(--primary1000);

    --button--tertiary--background__default: transparent;
    --button--tertiary--border__default: transparent;
    --button--tertiary--color__default: var(--primary1000);
    --button--tertiary--background__hover: transparent;
    --button--tertiary--border__hover: var(--primary500);
    --button--tertiary--color__hover: var(--secondary500);

    --button--delete--color__default: var(--error900);
    --button--delete--background__hover: var(--error600);
    --button--delete--border__hover: var(--error600);
    --button--delete--color__hover: var(--error900);

    --button--filter--background__default: var(--primary300);
    --button--filter--border__default: var(--primary400);
    --button--filter--color__default: var(--primary1000);
    --button--filter--background__hover: var(--primary300);
    --button--filter--border__hover: var(--primary400);
    --button--filter--color__hover: var(--primary800);
    --button--filter-selected--background__default: var(--primary500);
    --button--filter-selected--border__default: var(--primary400);
    --button--filter-selected--color__default: var(--primary100);
    --button--filter-selected--background__hover: var(--primary500);
    --button--filter-selected--border__hover: var(--primary400);
    --button--filter-selected--color__hover: var(--primary100);

    --theme-switcher--background__default: var(--primary950);
    --theme-switcher--border__default: var(--primary950);
    --theme-switcher--color__default: var(--primary100);
    --theme-switcher--background__hover: var(--primary700);
    --theme-switcher--border__hover: var(--primary900);
    --theme-switcher--color__hover: var(--primary100);
    --theme-switcher--icon__default: "\e923";
    --variant-name--content: "Switch to dark theme";

    --placeholder--color__default: var(--primary600);

    --table--header--background__default: var(--primary400);
    --table--header--color__default: var(--primary1000);
    --table--row--background__default: var(--primary200);
    --table--row--border__default: var(--primary300);
    --table--row--color__default: var(--primary1000);
    --table--row--color__alternative: var(--primary700);

    --tag__default: rgb(160, 144, 144);
    --tag--background__default: rgb(0 0 0 / 5%);

    --modal--background__default: var(--primary70090);
    --modal--box-shadow__default: rgb(196 196 196 / 25%);
    --modal--border__default: none;

    --dialog--background__default: var(--primary200);

    --availability--time-slot--background__default: var(--primary200);
    --availability--time-slot--border__default: var(--primary300);
    --availability--time-slot--text__default: var(--primary900);
    --availability--is--today--time-slot--background__default: var(--primary300);
    --availability--is--today--time-slot--border__default: var(--primary100);
    --availability--is--today--column--day--background__default: var(--primary300);
    --availability--is--today--column--day--text__default: var(--primary950);
    --availability--is--past--time-slot--background__default: var(--primary200);
    --availability--is--past--column--day--background__default: var(--primary100);
    --availability--not--current--month--background__default: var(--primary200);
    
    --calendar--border__default: var(--primary400);
    --calendar--day--background__default: var(--primary100);
    --calendar--is--today--background__default: var(--primary300);
    --calendar--weekend--background__default: var(--primary200);
    --calendar--show-more-background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--day--background__default) 70%);
    --calendar--weekend--show-more--background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--weekend--background__default) 70%);
    --calendar--is--today--show-more-background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--is--today--background__default) 70%);

      --meeting__default: var(--secondary500);
      --meeting--background__default: var(--primary200);
      --meeting--box-shadow__default: none;
      --meeting--box-shadow__hover: rgb(0 0 0 / 20%);
      --meeting--actions--text__default: var(--text__default);
      --meeting--actions--background__hover: rgb(0 0 0 / 20%);
      --meeting--accepted__default: rgb(56, 177, 83);
      --meeting--cancelled__default: rgb(246, 4, 4);
      --meeting--new-invitation--background__default: rgb(232, 152, 234);
      --meeting--new-invitation--heading__default: rgb(166, 13, 169);
      --meeting--new-invitation--text__default: rgb(255, 255, 255);

      --notification-blurb__default: var(--primary900);
      --notification-blurb--background__default: var(--error600);
    
      --sidebar--background__default: var(--primary200);
      --navigation-link__default: var(--primary700);
      --navigation-link__hover: var(--primary1000);
      --navigation-link--border__hover: var(--primary500);
      --navigation-link--background__focus: var(--primary300);
      --navigation-link--background__active: var(--primary100);
      --sidebar-modal--background__default: var(--primary1000); 

      --tabs--label--background__default: var(--primary200);
      --tabs--label--border__default: var(--primary400);
      --tabs--label--color__default: var(--primary900);
      --tabs--label--background__hover: var(--primary200);
      --tabs--label--border__hover: var(--primary400);
      --tabs--label--color__hover: var(--secondary600);
      --tabs--label--background__active: var(--primary500);
      --tabs--label--border__active: var(--primary400);
      --tabs--label--color__active: var(--primary100);

      --datepicker--background__default: var(--primary300);
      --datepicker--border__default: var(--primary400);
      --datepicker--color__default: var(--primary900);
      --datepicker--color__alternative: var(--primary600);
      --datepicker-header--background__default: var(--primary100);
      --datepicker--background__active: var(--primary500);
      --datepicker--background__hover: var(--primary100);
      --datepicker--border__hover: var(--primary500);
      --datepicker--color__hover: var(--secondary600);
      --datepicker--color__active: var(--primary100);
      --datepicker--trigger--background__hover: var(--primary100);
      --datepicker--trigger--color__hover: var(--secondary600);

      --card--background__default: var(--primary200);
      --card--border__default: var(--primary300);
      --card--color__default: var(--text__default);
      --card--color__alternative: var(--primary600);
      --card-footer--background__default: var(--primary100);

      --landing-page--background__default:  var(--primary200), var(--primary300);

    }
  }

  .lightmode {
    --primary100: #E9F0F0;
    --primary200: #D4E1E1;
    --primary300: #A8C3C2;
    --primary400: #7DA4A4;
    --primary500: #518685;
    --primary600: #266867;
    --primary700: #1E5352;
	--primary70090: #1E5352E6;
    --primary750: #1A4645;
    --primary800: #173E3E;
    --primary900: #0F2A29;
    --primary950: #051821;
    --primary1000: #081515;

    --secondary500: #6f520b;
    --secondary600: #8e550f;

    --error500: #FCEAE8;
    --error600: #FCA197;
    --error700: #DC180C;
    --error800: #9E241C;
    --error900: #800C05;

    --warning500: #FCF8D4;
    --warning600: #FCF3A2;
    --warning700: #FFE600;
    --warning800: #E5CF00;
    --warning900: #CCB800;
    
    --success500: #E8FCE9;
    --success600: #A3F0A7;
    --success700: #00C408;
    --success800: #139E19;
    --success900: #008005;

    --shadow1: rgb(5 24 33 / 25%);

    --scrollbar-background: var(--primary300);
    --scrollbar-foreground: var(--primary500);
    --scrollbar-width: 320px;

    --background__default: var(--primary100);
    --blockquote--border__default: rgb(0 0 0 / 20%);

    --headings__default: var(--primary600);
    --link__default: var(--secondary500);
    --link__hover: var(--secondary600);
    --outline__default: var(--secondary600);
    --text__default: var(--primary900);

    --quiz-header--background__default: var(--primary200);

    --mobile-header--background__default: var(--primary200);

    --header--background__default: transparent;
    --branding__default: var(--text__default);

    --breadcrumbs--color__default: var(--primary1000);
    --breadcrumbs--color__hover: var(--secondary900);
    --breadcrumbs--color__active: var(--primary600);
    --breadcrumbs--color__disabled: var(--primary300);

    --action-bar--background__default: var(--primary200);
    
    --error__default: var(--error600);
    --error--background__default: var(--error600);
    --information__default: rgb(60, 130, 249);
    --information--background__default: rgb(218, 242, 251);
    --success__default: rgb(56, 177, 83);
    --success--background__default: rgb(218, 251, 224);
    --warning__default: rgb(246, 117, 4);
    --warning--background__default: rgb(251, 241, 218);

    --interactive__default: var(--secondary500);
    --interactive__hover: var(--secondary600);
    --item--action--background__hover: var(--primary300);

    --form--field--background__default: var(--primary200);
    --form--field--border__default: var(--primary300);
    --form--field--text__default: var(--primary700);
    --form--field--icon__default: var(--primary700);
    --form--field--label--color__default: var(--primary600);
    --form--field--checks--background__default: var(--primary100);
    --form--field--label--color__focus: var(--interactive__default);
    --form--error-message__default: var(--error900);

    --button--primary--background__default: var(--secondary500);
    --button--primary--border__default: var(--secondary500);
    --button--primary--color__default: var(--primary100);
    --button--primary--background__hover: var(--secondary600);
    --button--primary--border__hover: var(--secondary600);
    --button--primary--color__hover: var(--primary100);

    --button--secondary--background__default: var(--primary300);
    --button--secondary--border__default: var(--primary300);
    --button--secondary--color__default: var(--primary1000);
    --button--secondary--background__hover: var(--primary400);
    --button--secondary--border__hover: var(--primary400);
    --button--secondary--color__hover: var(--primary1000);

    --button--tertiary--background__default: transparent;
    --button--tertiary--border__default: transparent;
    --button--tertiary--color__default: var(--primary1000);
    --button--tertiary--background__hover: transparent;
    --button--tertiary--border__hover: var(--primary500);
    --button--tertiary--color__hover: var(--secondary500);

    --button--delete--color__default: var(--error900);
    --button--delete--background__hover: var(--error600);
    --button--delete--border__hover: var(--error600);
    --button--delete--color__hover: var(--error900);

    --button--filter--background__default: var(--primary300);
    --button--filter--border__default: var(--primary400);
    --button--filter--color__default: var(--primary1000);
    --button--filter--background__hover: var(--primary300);
    --button--filter--border__hover: var(--primary400);
    --button--filter--color__hover: var(--primary800);
    --button--filter-selected--background__default: var(--primary500);
    --button--filter-selected--border__default: var(--primary400);
    --button--filter-selected--color__default: var(--primary100);
    --button--filter-selected--background__hover: var(--primary500);
    --button--filter-selected--border__hover: var(--primary400);
    --button--filter-selected--color__hover: var(--primary100);

    --theme-switcher--background__default: var(--primary950);
    --theme-switcher--border__default: var(--primary950);
    --theme-switcher--color__default: var(--primary100);
    --theme-switcher--background__hover: var(--primary700);
    --theme-switcher--border__hover: var(--primary900);
    --theme-switcher--color__hover: var(--primary100);
    --theme-switcher--icon__default: "\e923";
    --variant-name--content: "Switch to dark theme";

    --placeholder--color__default: var(--primary600);

    --table--header--background__default: var(--primary400);
    --table--header--color__default: var(--primary1000);
    --table--row--background__default: var(--primary200);
    --table--row--border__default: var(--primary300);
    --table--row--color__default: var(--primary1000);
    --table--row--color__alternative: var(--primary700);

    --tag__default: rgb(160, 144, 144);
    --tag--background__default: rgb(0 0 0 / 5%);

    --modal--background__default: var(--primary70090);
    --modal--box-shadow__default: rgb(196 196 196 / 25%);
    --modal--border__default: none;

    --dialog--background__default: var(--primary200);

    --availability--time-slot--background__default: var(--primary200);
    --availability--time-slot--border__default: var(--primary300);
    --availability--time-slot--text__default: var(--primary900);
    --availability--is--today--time-slot--background__default: var(--primary300);
    --availability--is--today--time-slot--border__default: var(--primary100);
    --availability--is--today--column--day--background__default: var(--primary300);
    --availability--is--today--column--day--text__default: var(--primary950);
    --availability--is--past--time-slot--background__default: var(--primary200);
    --availability--is--past--column--day--background__default: var(--primary100);
    --availability--not--current--month--background__default: var(--primary200);
    
    --calendar--border__default: var(--primary400);
    --calendar--day--background__default: var(--primary100);
    --calendar--is--today--background__default: var(--primary300);
    --calendar--weekend--background__default: var(--primary200);
    --calendar--show-more-background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--day--background__default) 70%);
    --calendar--weekend--show-more--background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--weekend--background__default) 70%);
    --calendar--is--today--show-more-background__default: linear-gradient(to bottom, rgb(255 255 255 / 0) 0, var(--calendar--is--today--background__default) 70%);

      --meeting__default: var(--secondary500);
      --meeting--background__default: var(--primary200);
      --meeting--box-shadow__default: none;
      --meeting--box-shadow__hover: rgb(0 0 0 / 20%);
      --meeting--actions--text__default: var(--text__default);
      --meeting--actions--background__hover: rgb(0 0 0 / 20%);
      --meeting--accepted__default: rgb(56, 177, 83);
      --meeting--cancelled__default: rgb(246, 4, 4);
      --meeting--new-invitation--background__default: rgb(232, 152, 234);
      --meeting--new-invitation--heading__default: rgb(166, 13, 169);
      --meeting--new-invitation--text__default: rgb(255, 255, 255);

      --notification-blurb__default: var(--primary900);
      --notification-blurb--background__default: var(--error600);
    
      --sidebar--background__default: var(--primary200);
      --navigation-link__default: var(--primary700);
      --navigation-link__hover: var(--primary1000);
      --navigation-link--border__hover: var(--primary500);
      --navigation-link--background__focus: var(--primary300);
      --navigation-link--background__active: var(--primary100);
      --sidebar-modal--background__default: var(--primary1000); 

      --tabs--label--background__default: var(--primary200);
      --tabs--label--border__default: var(--primary400);
      --tabs--label--color__default: var(--primary900);
      --tabs--label--background__hover: var(--primary200);
      --tabs--label--border__hover: var(--primary400);
      --tabs--label--color__hover: var(--secondary600);
      --tabs--label--background__active: var(--primary500);
      --tabs--label--border__active: var(--primary400);
      --tabs--label--color__active: var(--primary100);

      --datepicker--background__default: var(--primary300);
      --datepicker--border__default: var(--primary400);
      --datepicker--color__default: var(--primary900);
      --datepicker--color__alternative: var(--primary600);
      --datepicker-header--background__default: var(--primary100);
      --datepicker--background__active: var(--primary500);
      --datepicker--background__hover: var(--primary100);
      --datepicker--border__hover: var(--primary500);
      --datepicker--color__hover: var(--secondary600);
      --datepicker--color__active: var(--primary100);
      --datepicker--trigger--background__hover: var(--primary100);
      --datepicker--trigger--color__hover: var(--secondary600);

      --card--background__default: var(--primary200);
      --card--border__default: var(--primary300);
      --card--color__default: var(--text__default);
      --card--color__alternative: var(--primary600);
      --card-footer--background__default: var(--primary100);

      --landing-page--background__default:  var(--primary200), var(--primary300);

    }