/*------------------------------------
		General Styling
/*----------------------------------*/


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

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

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

html,
body {
	background-color: var(--background__default);
	color: var(--text__default);
	font-family: var(--font__default);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	font-size: calc(15px + 0.5vw);
	line-height: calc(21px + 0.6vw);
	position: relative;
	-webkit-font-smoothing: antialiased;
}

html {
	height: 100%;
}

	body {
		font-size: calc(15px + 0.5vw);
		line-height: calc(21px + 0.6vw);
		min-height: 100%;
	}

		h1 { 
			color: var(--headings__default);
			font-size: 1.6em;
			font-weight: 700;
			line-height: calc(30px + 1vw);
			margin: 0 0 calc(16px + 1vw) 0;
			text-transform: capitalize;
		}
		
		h2 {
			color: var(--headings__default);
			font-size: 1.4em;
			font-weight: 700;
			line-height: calc(26px + 1vw);
			margin: 0 0 calc(16px + 1vw) 0;
			text-transform: capitalize;
		}

		h3 {
			color: var(--headings__default);
			font-size: 1.2em;
			font-weight: 700;
			line-height: calc(24px + 1vw);
			margin: 0 0 calc(16px + 1vw) 0;
			text-transform: capitalize;
		}
		
		h4 {
			color: var(--headings__default);
			margin: 0 0 calc(14px + 1vw) 0;
		}
		
		h5 {
			color: var(--accent__default);
			font-size: 0.6em;
			font-weight: 700;
			line-height: normal;
			text-transform: uppercase;
			margin: 0 0 calc(12px + 1vw) 0;
		}

		p {
			margin-bottom: 1rem;
		}

		hr {
			border-bottom: 2px solid var(--accent__default);
			margin-bottom: 1rem;
		}

		ol,
		ul {
			padding-left: 2rem;
		}

			ol > li,
			ul > li {
				padding-bottom: 0.5rem;
			}

		small,
		.text_small {
			font-size: 0.707rem;
		}

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

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

		blockquote {
			border-left: .4em solid var(--blockquote--border__default);
			margin: .5rem 0 1rem 1rem;
			padding-left: .5em;
		}

		section {
			padding: 1rem;
		}

		article {
			margin-bottom: 1rem;
		}

		label {
			cursor: pointer;
		}

		fieldset,
		legend {
			margin-bottom: 2rem;
		}



/*------------------------------------
		Main Containers
/*----------------------------------*/


	.page-container {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 100%;
		padding-left: 16rem;
		transition: padding .3s ease;
		width: 100%;
	}

		.page-container.sidebar-collapsed {
			padding-left: 3.2rem;
			transition: padding .3s ease;
		}

	#sidebar {
		background-color: var(--sidebar--background__default);
		border-right: 2px solid var(--sidebar--border__default);
		display: flex;
		flex-direction: column;
		height: 100%;
		left: 0;
		list-style: none;
		overflow: hidden;
		position: fixed;
		transition: width .3s ease, font-size .3s ease;
		width: 16rem;
		/* tooltip over notification banner */
		z-index: 9;
	}

		.logo {
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			font-weight: bold;
			justify-content: flex-start;
			margin: 0 0.5rem 2rem 0.5rem;
		}

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

			.logo span {
				color: var(--branding__default);
				display: inline-block;
				font-weight: bold;
				margin-left: 0.5rem;
				margin-right: 0.5rem;
				opacity: 1;
				overflow: hidden;
				padding: 0.5rem 0 0 0;
				text-overflow: ellipsis;
				transition: all .3s ease;
				white-space: nowrap;
				width: calc(100% - 5rem);
			}

		#sidebar a {
			color: var(--sidebar--link__default);
		}

			#sidebar a:active,
			#sidebar a:visited {
				color: var(--sidebar--link__default);
			}

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

		#sidebar nav {
			display: flex;
			height: 100%;
		}

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

				#sidebar nav ul li {
					display: block;
					padding: 0;
				}

					#sidebar nav a {
						align-items: center;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						padding: 0.5rem 0.5rem 0.5rem 0.75rem;
						position: relative;
						text-decoration: none;
						transition: all .2s ease;
					}

						#sidebar nav a.is--active {
							background: linear-gradient(90deg, var(--sidebar--link__selected--background__default));
							color: var(--sidebar--link__selected);
						}
							#sidebar nav a.is--active:before {
								background-color: var(--sidebar--link__selected);
							}

						#sidebar nav a:before {
							background-color: transparent;
							border-radius: 2px;
							content: '';
							height: 0;
							left: 0;
							position: absolute;
							top: 0;
							transition: all .3s ease;
							width: 5px;
						}

						#sidebar nav a:hover:before {
							background-color: var(--sidebar--link__background__hover);
							height: 100%;
						}
						
						#sidebar nav a.is--active:before {
							height: 100%;
						}

					#sidebar nav i {
						color: inherit;
						font-size: 1.2rem;
						font-weight: bold;
						margin-left: auto;
						margin-right: 0;
						transition: all .3s ease;
					}

						#sidebar nav i:hover {
							transform: scale(1.25);
						}

					#sidebar nav span {
						color: inherit;
						font-size: 1rem;
						font-weight: bold;
						opacity: 1;
						transition: all .3s ease;
						width: 100%;
						white-space: nowrap;
					}

					#sidebar .item--profile {
						display: flex;
						margin-bottom: 0.5rem;
						margin-top: auto;
						white-space: nowrap;
					}

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

	#sidebar.closed {
		overflow: visible;
		width: 3.2rem;
	}

			#sidebar.closed .logo img {
				width: 2.5rem;
			}

			#sidebar.closed .logo span {
				opacity: 0;
				width: 0;
			}

			#sidebar.closed ul {
				overflow: visible;
			}

					#sidebar.closed nav i {
						margin-left: auto;
						margin-right: auto;
					}

					#sidebar.closed nav span {
						opacity: 0;
						width: 0;
					}

					#sidebar.closed .item--profile .item--label {
						opacity: 0;
						width: 0;
					}

		.sidebar.closed #sidebar-toggle {
			border-radius: 1.5rem;
			font-size: 0.8rem;
			height: 1.5rem;
			right: 0.8rem;
			top: 2.8rem;
			transform: rotate(0);
			width: 1.5rem;
		}

@media screen and (max-height: 670px) {

	#sidebar,
	#sidebar.closed {
		overflow: auto;
	}

}
/*
@media screen and (max-width: 600px) {

		#sidebar-toggle {
			display: none;
		}

}
*/
	header {
		align-items: center;
		background-color: var(--header--background__default);
		display: flex;
		gap: 10px;
		justify-content: space-between;
		padding: 1rem;
		width: 100%;
	}
		header .item--block {
			justify-content: space-between;
			align-items: center;
		}

			header .item--profile {
				width: max-content;
			}
			
				header .item--profile .additional--information {
					display: -webkit-box;
					font-size: 0.6rem;
					line-height: 1;
					padding-top: 0.25rem;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					width: min-content;
				}

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

		.item--main-title {
			margin: 0 0 2rem 0;
		}
		
		.search--bar {
			background-color: var(--search--background__default);
			border-radius: 31.25rem;
			display: flex;
			margin-left: auto;
			overflow: hidden;
			padding: 3px;
			position: relative;
			transition: all .3s ease;
			width: calc(2rem + 6px);
		}

			.search--bar:hover {
				width: calc(10rem - 0.5vw);
			}

			.search--bar:focus-within {
				outline: 4px solid var(--outline__default);
				outline-offset: 1px;
				width: calc(10rem - 0.5vw);
			}

			.search--text {
				background-color: transparent;
				bottom: 0;
				color: var(--search--text__default);
				cursor: pointer;
				font-size: calc(12px + 0.5vw);
				left: 0;
				line-height: 2rem;
				opacity: 0;
				outline: none;
				padding: 0.5rem;
				position: absolute;
				right: 0;
				top: 0;
				transition: all .3s ease;
				width: calc(100% - 2.3rem);
			}

				.search--bar:hover .search--text,
				.search--bar:focus-within .search--text {
					cursor: initial;
					opacity: 1;
				}

			.search--button {
				align-items: center;
				background-color: transparent;
				border-radius: 2rem;
				color: var(--search--text__default);
				cursor: pointer;
				display: flex;
				font-size: 0.85rem;
				height: 2rem;
				justify-content: center;
				margin-left: auto;
				outline: none;
				transition: all .3s ease;
				width: 2rem;
			}

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

			.search--bar:focus-within .search--button {
				background-color: var(--interactive__default);
				color: var(--interactive--text__default);
				cursor: pointer;
			}

				.search--bar:focus-within .search--button:hover {
					background-color: var(--interactive__hover);
				}

		#breadcrumbs {
			font-size: 0.707rem;
		}

			#breadcrumbs a {
				margin-left: 0;
				margin-right: .1rem;
			}

			#breadcrumbs a:after {
				color: var(--text__default);
				content: '';
				cursor: default;
				margin-left: .2rem;
			}

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

	#content {
		display: flex;
		/* flex: 1 1 auto; */ 
		flex-direction: row;
		flex-wrap: wrap;
		height: 100%;
		position: relative;
		width: 100%;
	}

	.container--two-columns-flex {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		position: relative;
		width: 100%;
	}

		.left--column,
		.right--column {
			flex: 1 1 425px;
			position: relative;
		}



/*------------------------------------
		Blocks
/*----------------------------------*/


	.item--profile {
		align-items: center;
		display: flex;
		gap: 0.5rem;
		justify-content: flex-start;
		margin-bottom: 0.4rem;
		position: relative;
		width: 100%;
	}

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

		.item--profile .avatar {
			aspect-ratio: 1/1 auto;
			border: 0;
			border-radius: 25rem;
			flex: 0 0 auto;
			height: 2.5rem;
			margin: 0 0 0 0.4rem;
			width: 2.5rem;
		}

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

	.item--role {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: flex-start;
		margin-bottom: 0.2rem;
		min-height: 2.5rem;
		padding-left: 0.4rem;
		position: relative;
		width: 100%;
	}

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

		.item--role .item--action {
			margin-left: auto;
		}

		.item--role label:hover {
			color: var(--interactive__hover);
		}

	.profile-image-container {
		display: flex; 
		gap: 1rem; 
		flex-wrap: wrap;
	}

		.profile-image-container p {
			max-width: 50ch;
		}

	.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;
		/* overflow: hidden; */
		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 {
		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;
	}

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

		.availability > div {
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
		}

		.column--day {
			background-color: transparent;
			border-bottom-left-radius: var(--spacing-top--small);
			border-bottom-right-radius: var(--spacing-top--small);
			border-top-left-radius: var(--spacing-top--small);
			border-top-right-radius: var(--spacing-top--small);
			display: flex;
			flex: 1 1 auto;
			flex-direction: column;
			gap: 0.2rem;
			padding: 0.6rem 0.17rem;
			width: 100%;
		}

			.is--past .time-slot {
				opacity: 0.7;
				pointer-events: none;
			}
			.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);
				}

				.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);
				border-radius: .2rem;
				color: var(--availability--time-slot--text__default);
				cursor: pointer;
				display: block;
				font-size: 0.75rem;
				font-weight: bold;
				padding: 0.3rem;
				text-align: center;
				transition: all .3s ease;
				width: 100%;
				white-space: nowrap;
			}

				.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;
				}

	.item--meeting {
		background-color: var(--meeting--background__default);
		border-left: 10px solid var(--meeting__default);
		border-radius: 10px;
		box-shadow: var(--meeting--box-shadow__default);
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		margin-bottom: calc(14px + 0.5vw);
		min-height: 3.5rem;
		padding: 0.5rem 0.625rem 0.5rem calc(30px + 0.5vw);
		position: relative;
		text-align: left;
		transition: all .3s ease;
	}

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

		.meeting--above-title {
			font-size: calc(12px + 0.5vw);
			font-weight: bold;
			line-height: calc(20px + 0.5vw);
			margin-bottom: 5px;
		}

		.meeting--title {
			font-size: calc(14px + 0.5vw);
			font-weight: bold;
			line-height: calc(17px + 0.5vw);
			margin-bottom: 8px;
			text-overflow: ellipsis;
		}

		.meeting--video-link {
			font-weight: bold;
		}

		.meeting--date,
		.meeting--time,
		.meeting--duration {
			font-size: calc(12px + 0.5vw);
			font-weight: normal;
			line-height: calc(20px + 0.5vw);
		}

		.meeting--duration {
			display: flex;
			gap: 0.25rem;
			margin-top: 0.25rem;
			margin-bottom: 0.25rem;
		}

		.meeting--time {
			margin-bottom: 1rem;
			text-transform: uppercase;
		}

		.meeting--attendees {
			align-items: flex-start;
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			justify-content: flex-start;
		}

			.meeting--attendees .avatar {
				width: 2.625rem;
				height: 2.625rem;
				border-radius: 2.625rem;
				font-size: 12px;
			}

		.meeting--actions {
			background-color: var(--meeting__default);
			border-radius: 2.5rem;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			margin-bottom: auto;
			margin-top: auto;
			padding: 0;
			transition: all .3s ease;
		}

			.meeting--actions:focus-within {
				outline: 4px solid var(--outline__default);
				outline-offset: 1px;
			}

			.meeting--actions .item--action {
				background-color: transparent;
				color: var(--meeting--actions--text__default);
				cursor: pointer;
				outline: none;
			}

			.meeting--actions .item--action:hover,
			.meeting--actions .item--action:focus {
				background-color: var(--meeting--actions--background__hover);
				color: var(--meeting--actions--text__default);
			}

		.new-invitation {
			background-color: var(--meeting--new-invitation--background__default);
		}

			.new-invitation .meeting--title,
			.new-invitation .meeting--above-title {
				color: var(--meeting--new-invitation--heading__default);
			}

			.new-invitation .meeting--date,
			.new-invitation .meeting--time {
				color: var(--meeting--new-invitation--text__default);
			}

	.section--meeting {
		padding-bottom: 1rem;
	}

		.section--meeting .meeting--title {
			color: var(--headings__default);
			font-size: 1.4em;
			font-weight: 700;
			line-height: calc(26px + 1vw);
			margin: 0 0 calc(16px + 1vw) 0;
			text-transform: capitalize;
		}

		.section--meeting .meeting--attendees,
		.section--meeting .meeting--details, 
		.section--meeting .meeting--organizer,
		.section--meeting .meeting--platform,
		.section--meeting .meeting--date-time,
		.section--meeting .meeting--invite {
			padding-top: 1rem;
		}

	.item--user-availability {
		display: flex;
		flex-direction: column;

	}

		.item--user-availability--day,
		.item--user-availability--date {
			color: var(--accent__default);
			font-weight: bold;
		}

		.item--user-availability .item--block {
			align-items: center;
			margin-bottom: 0.1rem;
		}

		.item--user-availability--slot {
			font-size: 0.8rem;
			margin-right: auto;
			max-width: calc(100% - 60px);
			opacity: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			transition: all .3s ease;
			white-space: nowrap;
		}

			.item--user-availability-slot .item--action {
				align-self: flex-end;
			}

	.item--week-selector {
		align-items: center;
		display: flex;
		justify-content: flex-end;
		margin-bottom: 0.5rem;
	}

		.item--week-selector .item--label {
			flex-grow: 1;
    		margin-bottom: 0;
		}

		.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;
		}

	.clone--week {
		display: inline-flex;
		margin-bottom: 0.5rem;
	}

	.item--user {
		align-items: center;
		background-color: var(--item--user--background__default);
		border-radius: 2rem;
		color: var(--item--user--text__default);
		display: flex;
		margin-bottom: 0.4rem;
		min-height: 59px;
		padding: 3px;
	}

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

		.item--user a,
		.item--user .additional--information {
			color: var(--item--user--text__default);
		}

		.item--user .avatar {
			margin: 0;
		}

		.item--user .item--action {
			aspect-ratio: auto 1 / 1;
			background-color: var(--item--user--button--background__default);
			border-radius: 2.5rem;
			color: var(--item--user--button--text__default);
			cursor: pointer;
			font-size: 21px;
			height: 2.5rem;
			transition: all .3s ease;
			width: 2.5rem;
		}

		.item--user button:hover {
			background-color: var(--item--user--button--background__hover);
			color: var(--item--user--button--text__hover);
		}

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

			.is--candidate .item--action {
				background-color: var(--is--candidate--button--background__default);
			}

				.is--candidate button:hover {
					background-color: var(--is--candidate--button--background__hover);
				}

	.item--integration {
		align-items: center;
		background-color: var(--meeting--background__default);
		border-left: 10px solid var(--text__default);
		border-radius: 10px;
		box-shadow: var(--meeting--box-shadow__default);
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		margin-bottom: calc(14px + 0.5vw);
		min-height: 3.5rem;
		padding: 0.5rem 0.625rem 0.5rem calc(30px + 0.5vw);
		position: relative;
		text-align: left;
		transition: all .3s ease;
	}

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

		.integration--title {
			font-size: calc(14px + 0.5vw);
			font-weight: bold;
			line-height: calc(17px + 0.5vw);
			margin-bottom: 8px;
			text-overflow: ellipsis;
		}

		.integration--status {
			display: flex;
			gap: 0.25rem;
			margin-top: 0.25rem;
			margin-bottom: 0.25rem;
		}

		.integration--actions {
			background-color: var(--integration--actions--background__default);
			border-radius: 2.5rem;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			margin-bottom: auto;
			margin-top: auto;
			padding: 0;
			transition: all .3s ease;
		}

			.integration--actions:focus-within {
				outline: 4px solid var(--outline__default);
				outline-offset: 1px;
			}

			.integration--actions .item--action {
				background-color: transparent;
				color: var(--integration--actions--text__default);
				cursor: pointer;
				outline: none;
			}

			.integration--actions .item--action:hover,
			.integration--actions .item--action:focus {
				background-color: var(--integration--actions--background__hover);
				color: var(--integration--actions--text__default);
			}

			.item--integration:has(.success) {
				border-left: 10px solid var(--success__default);
			}

			.item--integration:has(.error) {
				border-left: 10px solid var(--error__default);
			}


/*------------------------------------
		Statuses
/*----------------------------------*/


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

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

	.is--event-status {
		color: var(--meeting__default);
	}

	.is--event-status.is--cancelled {
		color: var(--meeting--cancelled__default);
	}

	.is--event-status.is--done {
		color: var(--meeting--accepted__default);
	}

	.tag {
		background-color: var(--tag--background__default);
		border-radius: 0.5rem;
		color: var(--tag__default);
		font-size: 0.8rem;
		padding: 0 0.5rem;
	}

.item--meeting.is--cancelled {
	border-left: 10px solid var(--meeting--cancelled__default);
}
	.item--meeting.is--cancelled .meeting--actions {
	background-color: var(--meeting--cancelled__default);
	}

.item--meeting.is--done {
	border-left: 10px solid var(--meeting--accepted__default);
}
	.item--meeting.is--done .meeting--actions {
	background-color: var(--meeting--accepted__default);
	}

.item--meeting.in--past {
	opacity: 0.5;
}

.modal .item--meeting {
	padding: 8px 10px 8px calc(20px + 0.5vw);
}


/*------------------------------------
		Form elements
/*----------------------------------*/


.grid--fieldset {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
	.grid--fieldset .form--label {
		white-space: initial;
	}

.grid--selection-text {
	column-gap: 1ch;
	display: grid;
	grid-auto-flow: column;
	margin-bottom: 1rem;
}

.form--control {
	flex-grow: 1;
	margin-bottom: 0.82353rem;
	position: relative;
}

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

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

		.form--field[required] ~ .form--label:after, .form--question[data-required="yes"] legend:after {
            content: ' *';
		}

	.form--field:valid[required] ~ .form--label,
	.form--field:focus ~ .form--label,
	.form--field:not(:placeholder-shown) ~ .form--label {
		font-size: 12px;
		font-weight: 400;
		line-height: 1.33337;
		top: 0.58824rem;
	}

	.form--field.has--icon,
	.form--field.form-dropdown-select {
		padding: 1.05882rem 2rem 0 0.94118rem;
	}

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

		.form--field.has--icon__3 {
			padding: 1.05882rem 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--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;
			padding-top: 1.6rem;
		}

		.auto-grow {
			display: grid;
		}

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

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

	.form--icon {
		font-size: 20px;
		line-height: 1.4;
		font-weight: 400;
		letter-spacing: .006em;
		position: absolute;
		right: 0.94118rem;
		top: 1.1rem;
		cursor: pointer;
		transition: transform .25s ease-in-out;
	}
		.form--control > .form--icon + .form--icon {
			right: 2.52rem;
		}
		.form--control > .form--icon + .form--icon + .form--icon {
			right: 4.1rem;
		}

		.form--icon:before {
			color: var(--form--field--icon__default);
			content: inherit;
			transition: color 0.125s ease-in;
		}
		.form--icon:hover:before {
		color: var(--interactive__hover) !important;
		}
		.form-dropdown-select ~ .form--icon {
			pointer-events: none;
		}

	/* LABEL */

	.form--label--external {
		display: inline-block;
		margin-bottom: 0.5rem;
	}
	
	.form--label {
		position: absolute;
		top: 1rem;
		left: 1rem;
		max-width: calc(100% - 32px);
		font-size: 17px;
		font-weight: 400;
		letter-spacing: -.022em;
		line-height: 1.23536;
		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(:disabled):not(:placeholder-shown):not(:valid):not(.form-dropdown-select):not(.form-selection):not([type=radio]),
	.form--control.is--invalid .form--field {
		background-color: var(--error--background__default);
		border-color: var(--error__default);
	}

	.form--field:not(:disabled):not(:placeholder-shown):not(:valid):not(.form-dropdown-select):not(.form--option):not([type=radio]) ~ .form--label, 	/* .form-dropdown-select.is--invalid ~ .form--label, */
	.form--control.is--invalid .form--label, 
	.is--error {
		color: var(--error__default) !important;
	}

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

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

	.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(:valid):not(.form-dropdown-select) ~ .form--message,
	.form-textbox-textarea:not(:placeholder-shown) ~ .form--message,
	.form--control.is--invalid .form--message {
		color: var(--error__default);
		height: auto;
		opacity: 1;
		margin: 0.5rem 0.3rem 0.3rem 0.3rem;
	}
	
	.form--message {
		display: flex;
		height: 0;
		font-size: 0.6rem;
		line-height: 1.33337;
		font-weight: 400;
		color: inherit;
		position: relative;
		margin: 0 0.3rem 0 0.3rem;
		align-items: flex-start;
		gap: 5px;
		opacity: 0;
		transition: color .1s ease, opacity .3s ease, margin .1s ease-in-out;
	}

		.form--message i {
			line-height: 17px;
		}

.form-selection {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 17px;
	flex: 1 1 25%;
}

	.form-selection .form--field {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 2rem;
		height: 2rem;
		aspect-ratio: 1/1 auto;
		border-radius: 0.2rem;
		cursor: pointer;
		padding: 0;
		position: relative;
		transform: translateY(-0.075em);
	}

	.form-selection .form--label {
		cursor: pointer;
		/* font-size: 17px !important; */
		font-size: 1rem !important;
		left: 0;
		line-height: 17px;
		pointer-events: inherit;
		position: relative;
		text-overflow: ellipsis;
		top: 0 !important;
	}

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

	.form--control.form-selection .form--field:before {
		background-color: var(--interactive__default);
		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 {
		width: 1rem;
		height: 1rem;
		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%;
	}

	.selectize-control:focus-within {
		outline: 4px solid var(--outline__default);
		outline-offset: 1px;
	}

	.selectize-control.plugin-drag_drop.multi>.selectize-input>div.ui-sortable-placeholder {
		visibility: visible !important;
		/*
		background: #f2f2f2 !important;
		background: rgba(0, 0, 0, .06) !important;
		*/
		border: 0 none !important;
		/* box-shadow: inset 0 0 12px 4px #fff */
	}
	
	.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
		content: "!";
		visibility: hidden
	}
	
	.selectize-control.plugin-drag_drop .ui-sortable-helper {
		box-shadow: 0 2px 5px rgba(0, 0, 0, .2)
	}
	
	.selectize-control .dropdown-header {
		position: relative;
		padding: 6px .75rem;
		border-bottom: 1px solid #d0d0d0;
		background: #f8f8f8;
		border-radius: .25rem .25rem 0 0
	}
	
	.selectize-control .dropdown-header-close {
		position: absolute;
		right: .75rem;
		top: 50%;
		color: #343a40;
		opacity: .4;
		margin-top: -12px;
		line-height: 20px;
		font-size: 20px !important
	}
	
	.selectize-control .dropdown-header-close:hover {
		color: #000
	}
	
	.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content {
		display: flex
	}
	
	.selectize-dropdown.plugin-optgroup_columns .optgroup {
		border-right: 1px solid #f2f2f2;
		border-top: 0 none;
		flex-grow: 1;
		flex-basis: 0;
		min-width: 0
	}
	
	.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
		border-right: 0 none
	}
	
	.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
		display: none
	}
	
	.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
		border-top: 0 none
	}
	
	.selectize-control.plugin-remove_button .item {
		display: inline-flex;
		align-items: center;
		padding-right: 0 !important
	}
	
	.selectize-control.plugin-remove_button .item .remove {
		color: inherit;
		text-decoration: none;
		vertical-align: middle;
		display: inline-block;
		padding: 1px 5px;
		border-left: 1px solid #dee2e6;
		box-sizing: border-box;
		margin-left: 5px
	}
	
	.selectize-control.plugin-remove_button .item .remove:hover {
		background: rgba(0, 0, 0, .05)
	}
	
	.selectize-control.plugin-remove_button .item.active .remove {
		border-left-color: transparent
	}
	
	.selectize-control.plugin-remove_button .disabled .item .remove:hover {
		background: 0 0
	}
	
	.selectize-control.plugin-remove_button .disabled .item .remove {
		border-left-color: #fff
	}
	
	.selectize-control.plugin-remove_button .remove-single {
		position: absolute;
		right: 0;
		top: 0;
		font-size: 23px
	}
	
	.selectize-control {
		flex-grow: 1;
		margin-bottom: 0.82353rem;
		padding: 0 !important;
    	position: relative;
	}
	
	.selectize-dropdown,
	.selectize-input,
	.selectize-input input {
		color: var(--form--field--text__default);
		font-family: inherit;
		font-size: inherit;
		line-height: 1.5;
		font-smoothing: inherit;
	}
	
	.selectize-control.single .selectize-input.input-active,
	.selectize-input {
		background: transparent;
		cursor: text;
		display: inline-block;
	}
	
	.selectize-input {
		/*
		border: 1px solid #ced4da;
		padding: .375rem .75rem;
		display: inline-block;
		width: 100%;
		overflow: hidden;
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		box-shadow: none;
		border-radius: .25rem
		*/
		overflow: hidden;
		position: relative;

		appearance: none;
		/*
		background-color: var(--form--field--background__default);
		border: 1px solid var(--form--field--border__default);
		border-radius: 12px;
		*/
		color: var(--form--field--text__default);
		font-size: 0.9rem;
		font-weight: 400;
		height: 2.9rem;
		line-height: 1.23536;
		margin-bottom: 0;
		padding: 1.05882rem 0.94118rem 0;
		text-align: left;
		text-overflow: ellipsis;
		transition: all .3s ease;
		-webkit-appearance: none;
		width: 100%;
	}

	.selectize-input:not(:disabled):active,
	.selectize-input:not(:disabled):focus,
	.selectize-input:not(:disabled):hover {
		border-color: transparent;
	}
	
	.selectize-control.multi .selectize-input.has-items {
		padding: calc(.375rem - 1px - 0px) .75rem calc(.375rem - 1px - 3px - 0px)
	}
	
	.selectize-input.full {
		background-color: transparent
	}
	
	.selectize-input.disabled,
	.selectize-input.disabled * {
		cursor: default !important
	}
	/*
	.selectize-input.focus {
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15)
	}
	*/
	.selectize-input.dropdown-active {
		border-radius: .25rem .25rem 0 0
	}
	
	.selectize-input > * {
		display: inline-block;
		margin-top: 10px;
		vertical-align: baseline;
		zoom: 1
	}
	
	.form--control:not(.has--focus) .form--label,
	.form--control:not(.has--data) .form--label {
		font-size: 0.9rem;
	}

	.form--control.has--focus .form--label,
	.form--control.has--data .form--label{
		font-size: 12px;
		line-height: 1.33337;
		top: 0.58824rem;
	}

	/*
	.selectize-control.multi .selectize-input > div {
		cursor: pointer;
		margin: 0 3px 3px 0;
		padding: 1px 5px;
		background: #efefef;
		color: var(--form--field--text__default);
		border: 0 solid transparent;
	}
	
	.selectize-control.multi .selectize-input > div.active {
		background: #007bff;
		color: #fff;
		border: 0 solid transparent
	}
	
	.selectize-control.multi .selectize-input.disabled > div,
	.selectize-control.multi .selectize-input.disabled > div.active {
		color: #878787;
		background: #fff;
		border: 0 solid #fff
	}
	*/
	.selectize-input > input {
		display: inline-block !important;
		padding: 0 !important;
		min-height: 0 !important;
		max-height: none !important;
		max-width: 100% !important;
		margin: 10px 0 0 0 !important;
		text-indent: 0 !important;
		border: 0 none !important;
		background: 0 0 !important;
		line-height: inherit !important;
		user-select: auto !important;
		box-shadow: none !important;
	}
	
	.selectize-input > input::-ms-clear {
		display: none
	}
	.selectize-input,
	.selectize-input > input:focus {
		outline: 0 !important;
	}
	
	.selectize-input>input[placeholder] {
		box-sizing: initial
	}
	
	.selectize-input.has-items>input {
		margin: 0 4px !important
	}
	
	.selectize-input::after {
		content: " ";
		display: block;
		clear: left
	}
	
	.selectize-input.dropdown-active::before {
		content: " ";
		display: block;
		position: absolute;
		/* background: #fff; */
		height: 1px;
		bottom: 0;
		left: 0;
		right: 0
	}
	
	.selectize-dropdown {
		backdrop-filter: blur(10px);
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		z-index: 10;
		/*
		border: 1px solid #d0d0d0;
		background: #fff;
		*/
		margin: 0.3rem 0 0 0;
		border-top: 0 none;
		box-sizing: border-box;
		box-shadow: var(--card--box-shadow__default);
		/* box-shadow: 0 1px 3px rgba(0, 0, 0, .1); */
		border-radius: 0 0 .25rem .25rem
	}
	
	.selectize-dropdown {
		background-color: var(--form--field--background__default);
		border: 1px solid var(--form--field--border__default);
		border-radius: .25rem;
		color: var(--form--field--text__default);
		padding: 1.05882rem 0.94118rem 0.25rem 0.94118rem !important;
	}



	.selectize-dropdown [data-selectable] {
		cursor: pointer;
		overflow: hidden
	}
	/*
	.selectize-dropdown [data-selectable] .highlight {
		background: rgba(255, 237, 40, .4);
		border-radius: 1px
	}
	*/

	.selectize-dropdown .create,
	.selectize-dropdown .no-results,
	.selectize-dropdown .optgroup-header,
	.selectize-dropdown .option {
		padding: 0.2rem 0;
	}
	
	.selectize-dropdown .option,
	.selectize-dropdown [data-disabled],
	.selectize-dropdown [data-disabled] [data-selectable].option {
		cursor: inherit;
		opacity: .5
	}
	
	.selectize-dropdown [data-selectable].option {
		opacity: 1;
		cursor: pointer
	}
	
	.selectize-dropdown .optgroup:first-child .optgroup-header {
		border-top: 0 none
	}
	
	.selectize-dropdown .optgroup-header {
		/*
		color: #6c757d;
		background: #fff;
		*/
		cursor: default
	}
	
	.selectize-dropdown .active {
		/*
		background-color: #f8f9fa;
		color: #16181b
		*/
	}
	
	.selectize-dropdown .active.create {
		/*
		color: #16181b
		*/
	}
	
	.selectize-dropdown .create {
		/*
		color: rgba(52, 58, 64, .5)
		*/
	}
	
	.selectize-dropdown-content {
		overflow-y: auto;
		overflow-x: hidden;
		max-height: 200px;
		overflow-scrolling: touch;
	}

		.selectize-dropdown-content::-webkit-scrollbar {
			--scrollbar-foreground: rgb(239, 11, 11);
			--scrollbar-background: #333;
			scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
			width: 20px;
		}

		.selectize-dropdown-content::-webkit-scrollbar-thumb {
			background: var(--scrollbar-foreground);
		}

		.selectize-dropdown-content::-webkit-scrollbar-track {
			background: var(--scrollbar-background);
		}

	.selectize-dropdown .spinner {
		display: inline-block;
		width: 30px;
		height: 30px;
		margin: 3px .75rem
	}
	
	.selectize-dropdown .spinner:after {
		content: " ";
		display: block;
		width: 24px;
		height: 24px;
		margin: 3px;
		border-radius: 50%;
		border: 5px solid #d0d0d0;
		border-color: #d0d0d0 transparent #d0d0d0 transparent;
		animation: lds-dual-ring 1.2s linear infinite
	}
	
	@keyframes lds-dual-ring {
		0% {
			transform: rotate(0)
		}
		100% {
			transform: rotate(360deg)
		}
	}
	
	.selectize-control.single .selectize-input,
	.selectize-control.single .selectize-input input {
		cursor: pointer
	}
	
	.selectize-control.single .selectize-input.input-active,
	.selectize-control.single .selectize-input.input-active input {
		cursor: text
	}
	/*
	.selectize-control.single .selectize-input:after {
		content: " ";
		display: block;
		position: absolute;
		top: 50%;
		right: calc(.75rem + 5px);
		margin-top: -3px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 5px 0 5px;
		border-color: var(--form--field--text__default) transparent transparent transparent
	}
	
	.selectize-control.single .selectize-input.dropdown-active:after {
		margin-top: -4px;
		border-width: 0 5px 5px 5px;
		border-color: transparent transparent var(--form--field--text__default) transparent
	}
	*/
	.selectize-control.rtl {
		text-align: right
	}
	
	.selectize-control.rtl.single .selectize-input:after {
		left: calc(.75rem + 5px);
		right: auto
	}
	
	.selectize-control.rtl .selectize-input>input {
		margin: 0 4px 0 -2px !important
	}
	
	.selectize-control .selectize-input.disabled {
		opacity: .5;
		/* background-color: #fff */
	}
	
	.selectize-dropdown,
	.selectize-dropdown.form-control {
		height: auto;
		padding: 0;
		margin: 0.3rem 0 0 0;
		z-index: 1000;
		/*
		background: #fff;
		border: 1px solid rgba(0, 0, 0, .15);
		*/
		border-radius: .25rem;
		box-shadow: 0 6px 12px rgba(0, 0, 0, .175)
	}
	
	.selectize-dropdown .optgroup-header {
		font-size: .875rem;
		line-height: 1.5
	}
	
	.selectize-dropdown .optgroup:first-child:before {
		display: none
	}
	
	.selectize-dropdown .optgroup:before {
		content: " ";
		display: block;
		height: 0;
		margin: .5rem 0;
		overflow: hidden;
		/* border-top: 1px solid #e9ecef; */
		margin-left: -.75rem;
		margin-right: -.75rem
	}
	
	.selectize-dropdown .create {
		padding-left: .75rem
	}
	
	.selectize-dropdown-content {
		padding: 5px 0
	}
	
	.selectize-input {
		min-height: calc(1.5em + .75rem + 2px);
		/* transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out */
	}
	
	/*
	.selectize-input.dropdown-active {
		border-radius: .25rem
	}
	*/
	.selectize-input.dropdown-active::before {
		display: none
	}
	/*
	.selectize-input.focus {
		outline: 4px solid var(--outline__default);
		outline-offset: 1px;
		/*
		border-color: #80bdff;
		outline: 0;
		box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
	}
	
	.is-invalid .selectize-input {
		border-color: #dc3545;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)
	}
	
	.is-invalid .selectize-input:focus {
		border-color: #bd2130;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #eb8c95
	}
	*/
	.selectize-control.form-control-sm .selectize-input.has-items {
		min-height: calc(1.5em + .5rem + 2px) !important;
		height: calc(1.5em + .5rem + 2px);
		padding: .25rem .5rem !important;
		font-size: .875rem;
		line-height: 1.5
	}
	
	.selectize-control.multi .selectize-input.has-items {
		height: auto;
		padding-left: calc(.75rem - 5px);
		padding-right: calc(.75rem - 5px)
	}
	
	.selectize-control.multi .selectize-input>div {
		border-radius: calc(.25rem - 1px)
	}
	
	.form-control.selectize-control {
		padding: 0;
		height: auto;
		border: none;
		background: 0 0;
		box-shadow: none;
		border-radius: 0
	}
	
	.input-group .selectize-input {
		overflow: unset;
		border-radius: 0 .25rem .25rem 0
	}

	.selectize-control:has(> .dropdown-active) ~ .form--icon {
		transform: rotate(180deg);
	}

	.form--control:not(.has--focus) {
		font-size: 0.9rem;
		font-weight: 400;
		line-height: 1.23536;
	}


.form--stepper {
	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: 1rem;
	line-height: 1.23536;
	font-weight: 400;
	height: 2rem;
	border-radius: 8px;
	margin-bottom: 0;
	padding: 0;
	transition: all .3s ease;
}

	.form--stepper:hover {
		border-color: var(--interactive__default);
	}

	.form--stepper:focus-within {
		outline: 4px solid var(--outline__default);
		outline-offset: 1px;
	}

		.form--stepper input {
			background-color: var(--form--field--background__default);
			color: var(--form--field--text__default);
			font-size: 0.9rem;
			max-width: 1.5rem;
			outline: none;
			text-align: center;
			text-overflow: ellipsis;
			-webkit-appearance: none;
			appearance: none;
		}

		.stepper--control {
			background-color: transparent;
			color: var(--interactive__default);
			border-radius: 8px;
			cursor: pointer;
			font-size: 0.9rem;
			outline: none;
			padding: 0 0.5rem;
			transition: all .3s ease;
		}

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

.primary-button,
.secondary-button,
.filter-button,
.login-link {
	border-radius: 0.3rem;
	cursor: pointer;
	font-family: inherit;
	/* font-size: calc(12px + 0.5vw); */
	font-size: 0.7rem;
	font-weight: 700;
	/* padding: calc(8px + 0.5vw) calc(8px + 0.5vw); */
	padding: 0.5rem 1.5rem;
	transition: border .3s ease-in-out, color .3s ease-in-out, background-color .3s ease-in-out;
}

.primary-button {
	background-color: var(--interactive__default);
	border: 3px solid var(--interactive__default);
	color: var(--interactive--text__default) !important;
	line-height: normal;
}
	.primary-button:hover {
		background-color: var(--interactive__hover);
		border: 3px solid var(--interactive__hover);
	}

.secondary-button {
	background-color: transparent;
	border: 3px solid transparent;
	color: var(--interactive--secondary__default);
	line-height: normal;
}

	.secondary-button:hover {
		border: 3px solid var(--interactive--secondary__default);
	}

	.form--selection-text {
		position: relative;
	}

		.form--selection-text--label {
			align-items: center;
			background-color: transparent;
			border: 3px solid transparent;
			border-radius: 0.3rem;
			color: var(--interactive__default);
			display: flex;
			justify-content: center;
			flex-direction: column;
			font-size: 0.9rem;
			font-weight: bold;
			width: auto !important;
			padding: .5rem;
			position: relative;
			transition: all .3s ease;
		}

			.form--selection-text--label:hover,
			/* .form--selection-text--label:focus, */
			.form--selection-text--field:focus ~ label {
				background-color: var(--item--action--background__hover);
				color: var(--interactive__hover);
				outline: 4px solid var(--outline__default);
			}

		.form--selection-text--field {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}

			.form--selection-text--field:checked ~ .form--selection-text--label {
				border: 3px solid var(--information__default);
			}

			.form--selection-text--field:disabled ~ .form--selection-text--label {
				opacity: 0.5;
				pointer-events: none;
			}

.filter-button {
	background-color: transparent;
	border: 3px solid var(--interactive__default);
	color: var(--interactive__default);
	font-size: 0.9rem;
	font-weight: bold;
	line-height: normal;
	width: auto !important;
	padding: .5rem;
	position: relative;
}
	.filter-button input {
		position: absolute;
		top: 0;
		left: 0;
		visibility: hidden;
		z-index: -1;
	}

	.filter-button:hover,
	.filter-button:focus {
		background-color: var(--item--action--background__hover);
		border: 3px solid var(--interactive__default);
		color: var(--interactive__hover);
	}

	.filter-button:has(input:checked),
	.filter--active {
		background-color: var(--interactive--secondary__default);
		border: 3px solid var(--interactive--secondary__default);
		color: var(--interactive--text__default);
	}

		.filter-button:has(input:checked):hover,
		.filter-button:has(input:checked):focus,
		.filter-button.filter--active:hover,
		.filter-button.filter--active:focus {
			background-color: var(--item--action--background__hover);
			border: 3px solid var(--item--action--background__hover);
			color: var(--interactive__default);
		}

	.selection-with-text-button {
		background-color: transparent;
		border: 3px solid transparent;
		color: var(--interactive__default);
		font-size: 0.9rem;
		font-weight: bold;
		width: auto !important;
		padding: .5rem;
		position: relative;
	}
	
	.selection-with-text-button:hover .form--label:hover,
	.selection-with-text-button:focus {
			background-color: var(--item--action--background__hover);
			color: var(--interactive__hover);
		}
		
		.selection-with-text-button .form--field {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			background-color: transparent;
			border: 3px solid transparent;
		}

.square-button {
	display: flex;
	flex: 0;
	border-radius: .4rem;
	justify-content: center;
	align-items: center;
	width: 2.9rem;
	height: 2.9rem;
	margin-bottom: 0.82353rem;
	aspect-ratio: 1/1 auto;
}

.button-small {
	padding: 0.5rem;
	font-size: calc(8px + 0.5vw);
	border-radius: 0.3rem; 
}

.button-xsmall {
	padding: 0.25rem;
	font-size: 0.7rem;
	border-radius: 0.2rem; 
}

.item--action {
	align-items: center;
	aspect-ratio: auto 1 / 1;
	background-color: transparent;
	border-radius: 2.5rem;
	color: var(--interactive__default);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: bold;
	height: 2.5rem;
	justify-content: center;
	transition: all .3s ease;
	width: 2.5rem;
}

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

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


.item--block {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; 
	width: 100%;
	align-items: flex-start;
}

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

	.item--block .form-selection {
		margin-top: 0.7rem;
	}

	.submit-buttons {
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		margin-top: 2rem;
	}

.item--section-navigation {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-bottom: 1rem;
}
	.item--section-navigation h4 {
		flex-grow: 1;
		margin-bottom: 0;
	}

	.item--section-navigation-label {
		color: var(--accent__default);
		font-size: 0.9rem;
		font-weight: bold;
		margin: 0 8px;
	}

	.item--section-navigation button:not(.item--action):not(.filter-button) {
		color: var(--interactive__default);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 32px;
		height: 32px;
		background-color: transparent;
		font-size: 0.9rem;
		transition: all .3s ease;
		cursor: pointer;
	}

	.item--section-navigation button:not(.item--action):hover:not(.filter-button) {
		color: var(--interactive__hover);
	}

	.item--section-navigation .item--action {
		width: 2rem;
		height: 2rem;
		border-radius: 2rem;
		font-size: 0.9rem;
		line-height: 2rem;
	}


.tooltip {
	position: relative;
}

	#sidebar .tooltip {
		overflow: clip;
	}

	#sidebar .tooltip:hover,
	#sidebar .tooltip:focus {
		overflow: visible;
	}

	#sidebar.closed .tooltip:before,
	#sidebar.closed .tooltip:after {
		position : absolute;
		left : 50%;
		opacity : 0;
		box-shadow:
			0 2.8px 2.2px rgb(0 0 0 / 3.4%),
			0 6.7px 5.3px rgb(0 0 0 / 4.8%),
			0 12.5px 10px rgb(0 0 0 / 6%),
			0 22.3px 17.9px rgb(0 0 0 / 7.2%),
			0 41.8px 33.4px rgb(0 0 0 / 8.6%),
			0 100px 80px rgb(0 0 0 / 1.2%);
		transition: all .3s ease;
		visibility: hidden;
	}
	
	#sidebar.closed .tooltip:hover::before, 
	#sidebar.closed .tooltip:focus::before,
	#sidebar.closed .tooltip:hover::after,
	#sidebar.closed .tooltip:focus::after {
		animation: scale 0.3s ease-in-out;
		opacity: 1;
		visibility: visible;
		z-index: 100;
	}

	#sidebar.closed .tooltip:hover::before, 
	#sidebar.closed .tooltip:focus::before {
		bottom: 100%;
	}

	#sidebar.closed .tooltip:hover::after,
	#sidebar.closed .tooltip:focus::after {
		left: 100%;
	}

	#sidebar.closed .tooltip::after {
		background-color: var(--tooltip--background__default);
		color: var(--tooltip--text__default);
		border-radius: .2rem;
		left: calc(100% - 5px);
		bottom: 0;
		width: max-content;
		padding: 10px;
		margin-left: 0;
		font-size: 17px;
		content: attr(data-tooltip);
	}

.item--highlighted-block {
	background-color: var(--highlighted-block--background);
	padding: 1rem;
	border-radius: 1rem;
}

.item--form--note {
	background-color: var(--highlighted-block--background);
	border-radius: 1rem;
	box-shadow: var(--meeting--box-shadow__default);
	margin-bottom: 1rem;
	padding: 1rem;
}

	.item--form--note p:last-of-type {
		margin-bottom: 0;
	}

.is--filter-block {
	margin-bottom: 1rem;
}


/*------------------------------------
		Modal
/*----------------------------------*/


.modal {
	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;
	position: fixed;
	top: 0;
	bottom: 0;
	height: 100vh;
	padding: 1rem;
	width: 50%;
	backdrop-filter: blur(15px);
	transition: all .3s ease;
	overflow-y: auto;
}
	.modal--show {
		cursor: pointer;
	}
	.modal.modal--right {
		right: 0;
	}
	.page-container .modal {
		width: calc(50% - 8rem);
	}
	.page-container.sidebar-collapsed .modal {
		width: calc(50% - 1.6rem);
	}
	
	.user--availability {
		font-size: 0.8rem;
		font-weight: 600;
		color: var(--user--availability__default);
	}

	@media screen and (max-width: 912px) {
		.page-container .modal {
			width: calc(100% - 16rem);
		}
		.page-container.sidebar-collapsed .modal {
			width: calc(100% - 3.2rem);
		}
	}

	input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		background-color: var(--interactive__default);
		height: 1rem;
		margin-top: -0.5rem;
		transition: all .3s ease;
		width: 1rem;
	}

		input[type="range"]::-webkit-slider-thumb:hover {
			background-color: var(--interactive__hover);
		}
	
		input[type="range"]::-webkit-slider-thumb:active {
			outline: 4px solid var(--outline__default);
		}
	
	.croppie-container .cr-viewport {
		box-shadow: 0 0 2000px 2000px var(--croppie--boundary) !important;
	}

	.actionDone,
	#avatar--upload--field {
		display: none;
	}



/*------------------------------------
		Dialog
/*----------------------------------*/


	.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(--background__default);
			border: 2px solid var(--background__default);
			border-radius: 1rem;
			box-shadow: 0px 4px 14px 4px var(--modal--box-shadow__default);
			left: 0;
			margin: 0 auto;
			max-width: 25rem;
			padding: 0 0 1rem 0;
			position: fixed;
			right: 0;
			top: 0;
			width: 100%;
			z-index: 11;
		}

	  @media (min-width: 300px) and (min-height: 300px) {
		.dialog {
			top: 30%;
		}
	  }
	  
		.dialog--title {
			color: var(--text__default);
			font-size: 1.2rem;
			line-height: 1.2;
			margin: -1px -1px 0 -1px;
			padding: 0.5rem;
		}

		.dialog--content {
			color: var(--text__default);
			padding: 0.5rem 0.5rem 0 0.5rem;
		}

		.dialog.error {
			background-color: var(--error--background__default);
			border: 2px solid var(--error__default);
		}

			.dialog.error .dialog--title,
			.dialog.error .dialog--content {
				color: var(--error__default);
			}

		.dialog.information {
			background-color: var(--information--background__default);
			border: 2px solid var(--information__default);
		}

			.dialog.information .dialog--title,
			.dialog.information .dialog--content {
				color: var(--information__default);
			}
	
		.dialog.success {
			background-color: var(--success--background__default);
			border: 2px solid var(--success__default);
		}

			.dialog.success .dialog--title,
			.dialog.success .dialog--content {
				color: var(--success__default);
			}

		.dialog.warning {
			background-color: var(--warning--background__default);
			border: 2px solid var(--warning__default);
		}

			.dialog.warning .dialog--title,
			.dialog.warning .dialog--content {
				color: var(--warning__default);
			}

/*------------------------------------
		Login / Landing Page
/*----------------------------------*/


.landing-container {
	background: rgb(235,73,219);
	background: linear-gradient(328deg, rgba(235,73,219,1) 0%, rgba(60,130,249,1) 100%);
	display: flex;
	width: 100%;
	height: 100%;
	/* height: 100vh; */
	flex-direction: column;
	transition: padding .3s ease;
	justify-content: center;
	align-items: center;
	color: white;
}

	.logo-landing {
		width: max(18rem, 50%);
		animation: scale .7s ease-in-out;
	}

	.landing-container h3 {
		color: white;
		text-transform: none;
		animation: scale 1s ease-in-out;
	}

	.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.modal {
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		align-items: center;
		justify-content: center;
		z-index: 99999;
	}

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

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

		.is--login h1,
		.is--login h2,
		.is--login h3,
		.is--login h4,
		.is--login h5,
		.is--login small,
		.is--login .tag,
		.is--login .item--label,
		.is--login .form--label,
		.is--login .meeting--title,
		.is--login .meeting--date
		.is--login .meeting--time {
			display: block;
			width: 90%;
			background-color: rgb(0 0 0 / 10%);
			height: 1rem;
			border-radius: 300px;
		}

			.is--login .primary-button {
				padding: 1rem;
				width: 5rem;
			}

.error {
	color: var(--error__default);
}
.information {
	color: var(--information__default);
}
.success {
	color: var(--success__default);
}
.warning {
	color: var(--warning__default);
}

.banner--notification {
	border-bottom: 0;
	font-weight: bold;
	height: 0px;
	width: 100%;
	opacity: 0;
	overflow: hidden;
	position: sticky;
	top: 0;
	transition: all .3s ease;
	z-index: 8;
}

	.banner--notification section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 1;
		padding: 0.25rem 1rem;
	}

	.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: 2px solid var(--error__default);
	}

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

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

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


.is--draggable {
	background-color: var(--meeting--background__default);
	border-radius: .5rem;
	box-shadow: var(--meeting--box-shadow__default);
	cursor: move;
	transition: all .3s ease;
}

	.is--draggable:hover {
		background-color: var(--highlighted-block--background);
		box-shadow: 0 4px 43px 0 var(--meeting--box-shadow__hover);
	}

	.is--draggable .drag--indicator i {
		margin-left: -2.5rem;
		transition: all .3s ease;
	}

		.is--draggable:hover .drag--indicator i {
			margin-left: 0.5rem;
		}

	.drag--indicator {
		color: var(--interactive__default);
		cursor: pointer;
		font-size: 0.8rem;
		overflow: hidden;
		transition: color .3s ease;
	}

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


 /* PROFILE IMAGE DRAG & DROP */
#selectFile {
	background-color: transparent;
	border: 3px dashed var(--text__default);
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex: 1;
	height: 20rem;
	width: 100%;
	margin: 0;
	position: relative;
	top: 0;
	left: 0;
	transition: border .25s ease, background-color .3s ease;
	z-index: 0;
}

	#selectFile.dragOver {
		z-index: 1;
	}

	#selectFile:hover,
	#selectFile:focus {
		background-color: var(--item--action--background__hover);
		border: 3px dashed var(--interactive__hover);
	}

	#selectFile.dragOver:before {
		content: "";
		position: absolute;
		width: 100%;
		height: 20rem;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#selectFile.dragOver:after {
		color: var(--interactive--secondary__default);
		content: "Drop files here";
		font-size: 1rem;
		font-weight: bold;
		animation: scale 0.3s ease-in-out;
	}

	#selectFile.dragOver > label {
		display: none;
	}

	#file-input {
		display: 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;
			}




/*------------------------------------
		Calendar
/*----------------------------------*/


#calendarRange {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px; 
}

	#calendarRange__date {
	font-size: 0.9rem;
	font-weight: bold;
	}

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

	.calendar__header__title {
		border-bottom: 1px solid var(--text__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-left: 1px solid var(--text__default);
		border-bottom: 1px solid var(--text__default);
		padding: 0.25rem 0.25rem 2rem 0.25rem;
		text-align: right;
		min-height: 7rem;
		position: relative;
	}

		.calendar .calendar--day {
			height: 7rem;
			overflow: hidden;
		}

		.calendar .calendar--day:nth-of-type(n + 7) {
			border-right: 1px solid var(--text__default);
		}

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

		.calendar--day .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);
			}

			.calendar--day .show-more .item--action {
				border-radius: .2rem;
				padding: 0;
				height: 1rem;
				width: 2.5rem;
			}

			.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: .25rem;
		overflow: hidden;
		padding:0.3125rem;
		position: relative;
		text-align: left;
		transition: all .3s ease;
	}

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

		.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: calc(10px + 0.5vw);
			font-weight: bold;
			line-height: 1;
			margin-bottom: .25rem;
			text-overflow: ellipsis;
		}

		.calendar--day .event--title {
			color: var(--interactive__default);
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			transition: color .3s ease;
		}

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

		.event--time {
			font-size: calc(8px + 0.5vw);
			margin-bottom: 0.25rem;
			line-height: 1;
			text-transform: uppercase;
		}



/*------------------------------------
		Utility
/*----------------------------------*/


 .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;
}

.hidden {
	display: none !important;
}

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

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

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

.scrollable::-webkit-scrollbar {
	width: 0.3rem;
	height: 0.3rem;
}

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

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

.spacing-top--small {
	padding-top: 0.5rem
}

.spacing-right--small {
	padding-right: 0.5rem
}

.spacing-bottom--small {
	padding-bottom: 0.5rem
}

.spacing-left--small {
	padding-left: 0.5rem
}

.spacing-top--normal {
	padding-top: 1rem
}

.spacing-right--normal {
	padding-right: 1rem
}

.spacing-bottom--normal {
	padding-bottom: 1rem
}

.spacing-left--normal {
	padding-left: 1rem
}

.flex--horizontal {
	flex-direction: row;
}

.flex--vertical {
	flex-direction: column;
}

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



/*------------------------------------
		Animation
/*----------------------------------*/


@keyframes scale {

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

}



.question-follow-up {
	display: none;
}

.form-selection:has(.toggle-followup:checked) ~ .question-follow-up {
	display: flex;
}

.card--grid {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-bottom: 1rem;
	width: 100%;
}


	.item--card {
		background-color: var(--meeting--background__default);
		border-radius: 1rem;
		box-shadow: var(--card--box-shadow__default);
		padding: 1rem;
		position: relative;
		transition: all .3s ease;
	}

		.card--title {
			display: inline-block;
			margin-bottom: 1rem;
			text-align: center;
		}

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

		.is--person-card {
			border-radius: 0.5rem;
			padding: .5rem 0 0 0;
		}
	
		.card--grid .form--control {
			margin-bottom: 0;
		}

.nav--stick-bottom {
	background: var(--background__default);
	bottom: 0;
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-top: 2rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	position: sticky;
}

.menu__logo {
	background-image: var(--logo__default);
    background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
    height: 119px;
	overflow: visible;
    width: 212px;
}


.multi-step-form-container {
	max-width: 1200px;
	width: 94%;
	margin-left: auto;
	margin-right: auto; 
}

	.multi-step-form-container .item--highlighted-block {
		margin-bottom: 1rem;
	}

.submit-btn,
.submit-btn:focus {
	border: 3px solid var(--success__default);
	background-color: var(--success--background__default);
	color: var(--success__default) !important;
}

	.submit-btn:hover {
		border: 3px solid var(--success__default);
		background-color: var(--success__default);
		color: var(--interactive--text__default) !important;
	}

.form-step {

}

ul.form-stepper {
	counter-reset: section;
	margin: 3rem 0 0 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;
	justify-content: space-between;
}
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 {
position: relative;
display: flex;
flex: 1;
align-items: start;
transition: 0.5s;
}
.form-stepper-horizontal li:not(:last-child):after {
position: relative;
flex: 1;
height: 3px;
content: "";
top: 33%;
}

.form-stepper-horizontal li:after {
background-color: #666;
}
.form-stepper-horizontal li.form-stepper-completed:after {
background-color: var(--success__default);
}
.form-stepper-horizontal li:last-child {
flex: unset;
}

ul.form-stepper li .step--wrapper .form-stepper-circle {
display: inline-block;
width: 1rem;
height: 1rem;
margin-right: 0;
line-height: 1rem;
text-align: center;
background-color: var(--interactive__default);
border-radius: 50%;
}

.form-stepper .form-stepper-active .form-stepper-circle {
background-color: var(--interactive__default) !important;
}

.form-stepper .form-stepper-active .form-stepper-circle:hover {
background-color: var(--interactive__hover) !important;
}
.form-stepper .form-stepper-unfinished .form-stepper-circle {
background-color: var(--interactive__default);
}
.form-stepper .form-stepper-completed .form-stepper-circle {
background-color: var(--success__default) !important;
}

.form-stepper .form-stepper-completed .form-stepper-circle:hover {
	background-color: var(--success--background__default) !important;
}

.form-stepper .label {
	font-size: 1rem;
	margin-top: 0.5rem;
}

.form-stepper-list .step--wrapper {
	color: var(--interactive__default);
	position: relative;
}

.form-stepper-active .step--wrapper:before  {
	box-shadow: var(--meeting--box-shadow__default);
	content: "\f3c5";
	color: var(--warning__default);
	font-family: "Font Awesome 6 Free";
	font-size: 1.4rem;
	font-weight: 900;
	position: absolute;
	top: -1.1rem;
	width: 100%;
	text-align: center;
	z-index: 1;
	animation: scale 0.3s ease-in-out;
	transform: all 0.3s ease;
}

.form-stepper-completed .step--wrapper:before {
    content: "\f00c";
	color: var(--success__default);
    font-family: "Font Awesome 6 Free";
    font-size: 1rem;
    font-weight: 900;
    position: absolute;
    top: -1.4rem;
    width: 100%;
    text-align: center;
    z-index: 1;
}

.form-stepper-list:last-of-type .step--wrapper:before {
	content: "\f11e";
	font-family: "Font Awesome 6 Free";
	font-size: 1rem;
	font-weight: 900;
	position: absolute;
	top: -1.4rem;
	width: 100%;
	text-align: center;
}

.form-stepper-list:last-of-type.form-stepper-active .step--wrapper:before {
	font-size: 1.3rem;
	top: -1.1rem;
}


#footer {
            display: flex;
            justify-self: flex-end;
            align-content: center;
            justify-content: space-between;
            width: 100%;
            padding: .5rem 2rem;
            background: var(--colorL);
            border-top: 1px solid var(--colorE);
            animation: scale 0.7s ease-in-out;
            font-size: .8rem;
            color: var(--colorK);
            letter-spacing: .03rem;
            margin-top: auto;
        }
            .heart {
                content: '';
                font-family: "FontAwesome";
                transition: color 0.5s ease;
                color: inherit;
            }
            .heart:after {
                content: "\f004";
                font-size: .75rem;
            }
			            }
            #footer a {
                text-decoration: none;
                color: inherit;
                transition: all .3s ease;
            }
            #footer:hover a {
                color: var(--link__default);
            }
            #footer:hover .heart,
            #footer a:hover {
                color: var(--link__hover);
            }