/* reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/* BEGIN: variables */

:root {

	/* BEGIN: colors */

		--highlight-base: #CB1964;
		--highlight-comp: #FFFFFF;

		--first-base: #2966B0;
		--first-comp: #FFFFFF;
		--first-base-disabled: #6C91BF;
		--first-comp-disabled: #FFFFFF;
		--first-base-active: #1D4D88;
		--first-comp-active: #FFFFFF;

		--second-base: #75798B;
		--second-comp: #FFFFFF;
		--second-base-disabled: #a6b0d4;
		--second-comp-disabled: #FFFFFF;

		--third-base: #E6F1FD;
		--third-comp: #2966B0;

		--lowlight-base: #C0CBDD;
		--lowlight-comp: #333333;

		--grey: #707070;
		--light-grey: #E2E2E2;

		--text-base: #333333;
		--text-comp: #FFFFFF;

		--success-base: #28AF02;
		--success-comp: #f7fff5;

		--error-base: #FF0000;
		--error-comp: #FFFFFF;

	/* END: colors */

	/* BEGIN: typography */

		--font-family: Helvetica, sans-serif;

		--font-size-xl: 40px;
		--font-size-l:  20px;
		--font-size:    18px;
		--font-size-s:  14px;

		--font-margin-xl: 32px;
		--font-margin-l:  16px;
		--font-margin:    16px;

		--line-height-l: 1.6;
		--line-height:   1.5;
		--line-height-s: 1.1;

	/* END: typography */

	/* BEGIN: layout */

		--max-width: 1470px;
		--max-width-condensed: 1280px;
		--offset-stepsize: 15px;

	/* END: layout */

	--border-radius-xl: 12px;
	--border-radius-l: 8px;
	--border-radius: 6px;
	--border-radius-round: 25px;
}

@media (max-width: 1023px) {

	:root {

		/* BEGIN: typography */

			--font-size-xl: 20px;
			--font-size-l:  16px;
			--font-size:    16px;

			--font-margin-xl: 12px;
			--font-margin-l:  12px;
			--font-margin:    12px;

		/* END: typography */

	}
}

/* END: variables */

/* BEGIN: global */

	* {
		background-repeat: no-repeat;
		box-sizing: border-box;
	}

	a {
		color: inherit;
		text-decoration: none;
	}

	body {
		color: var(--text-base);
		display: flex;
		flex-direction: column;
		font-family: var(--font-family);
		font-size: var(--font-size);
		font-weight: normal;
		line-height: var(--line-height);
		min-height: 100%;
	}
		body > main {
			flex-grow: 1;
		}

	button {
		border-radius: var(--border-radius);
	}

	input, textarea, select {
		border-radius: var(--border-radius);
		font-family: var(--font-family);
		line-height: var(--line-height);
	}
	:focus-visible {
		outline: 0;
	}

	::placeholder {
		font-family: var(--font-family);
	}

	input[type="color"] {
		appearance: none;
		background-color: transparent;
		border: 1px solid var(--light-grey);
		border-radius: var(--border-radius-xl);
		cursor: pointer;
		min-width: 44px;
		outline: none;
		padding: 0px;
	}
	input[type="color"]::-moz-color-swatch {
		border: none;
		border-radius: var(--border-radius-xl);
	}

	input[type="color"]::-webkit-color-swatch-wrapper {
		padding: 0;
		border-radius: var(--border-radius-xl);
	}

	input[type="color"]::-webkit-color-swatch {
		border: none;
		border-radius: var(--border-radius-xl);
	}

	/* BEGIN: custom scrollbar */

		/* width */
		::-webkit-scrollbar {
			width: 8px;
		}

		/* Track */
		::-webkit-scrollbar-track {
			border-radius: var(--border-radius);
			background: var(--light-grey);
		}

		/* Handle */
		::-webkit-scrollbar-thumb {
			background: var(--first-base);
			border-radius: var(--border-radius);
		}

	/* END: custom scrollbar */

/* END: global */

/* BEGIN: layout */

	.container {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--max-width);
		width: 100%;
	}

	.container-condensed {
		margin-left: auto;
		margin-right: auto;
		max-width: var(--max-width-condensed);
		width: 100%;
	}

	.container-fluid {
		width: 100%;
	}

	@media (max-width: 1470px) {

		.container {
			padding-left: calc(var(--offset-stepsize) * 6);
			padding-right: calc(var(--offset-stepsize) * 6);
		}
		.page-nav.container, .footer.container {
			padding-left: calc(var(--offset-stepsize) * 2);
			padding-right: calc(var(--offset-stepsize) * 2);
		}
	}

	@media (max-width: 1280px) {

		.container-condensed {
			padding-left: calc(var(--offset-stepsize) * 6);
			padding-right: calc(var(--offset-stepsize) * 6);
		}
	}
	@media (max-width: 800px) {

		.container {
			padding-left: calc(var(--offset-stepsize) * 2);
			padding-right: calc(var(--offset-stepsize) * 2);
		}

		.container-condensed {
			padding-left: calc(var(--offset-stepsize) * 2);
			padding-right: calc(var(--offset-stepsize) * 2);
		}
	}

	/* BEGIN: header */

		.page-header {
			background-color: #FFFFFF;
			border-top: 8px solid var(--first-base);
			border-bottom: 2px solid var(--first-base);
			color: #000000;
			position: sticky;
			top: 0;
			z-index: 10;
		}

		.page-header .page-nav {
			align-items: center;
			display: flex;
			justify-content: space-between;
			padding-top: 24px;
			padding-bottom: 24px;
		}

			.page-header .page-nav .nav-items {
				align-items: center;
				color: var(--first-base);
				display: flex;
				font-size: var(--font-size-l);
				font-weight: bold;
				justify-content: center;
				text-transform: uppercase;
				max-height: 48px;
			}
			/* Fallback for Safari */
			.page-header .page-nav .nav-items > * + * { margin-left: 64px; }

			.page-header .page-nav .brand,
			.page-header .page-nav .brand img {
				height: 48px;
			}

			.page-header .page-nav .icon-user-outline {
				display: block;
				height: 28px;
				width: 28px;
			}
			.page-header .page-nav .icon-chevron-down {
				display: block;
				height: 20px;
				width: 20px;
			}
			.page-header .page-nav .dropdown-content li > * {
				padding: 12px;
				font-size: var(--font-size-s);
			}

		@media (max-width: 799px) {

			.page-header .page-nav {
				padding-top: 8px;
				padding-bottom: 8px;
			}
			.page-header .page-nav .nav-items {
				display: none;
			}
		}

	/* END: header */

	/* BEGIN: content */

		.page-content {
			display: flex;
			flex-direction: column;
		}
		/* Fallback for Safari */
		.page-content > * + * { margin-top: calc(var(--offset-stepsize) * 6); }

		@media (max-width: 1023px) {

			/* Fallback for Safari */
			.page-content > * + * { margin-top: calc(var(--offset-stepsize) * 3); }
		}

	/* END: content */

/* END: layout */

/* BEGIN: components */

	/* BEGIN: boxes */

		.box {
			padding: calc(var(--offset-stepsize) * 2);
			border-radius: var(--border-radius-xl);
		}

		.box-primary {
			background-color: var(--first-base);
			color: var(--first-comp);
		}
		.box-outline-primary {
			background-color: var(--first-comp);
			border: 2px solid var(--first-base);
		}

		.box-secondary {
			background-color: #FFFFFF;
			border: 1px solid var(--light-grey);
			box-shadow: var(--light-grey) 0 2px 5px;
			color: var(--text-base);
		}

		.box-info {
			background-color: var(--third-base);
			color: var(--third-comp);
		}

		.box-lowlight {
			background-color: var(--lowlight-base);
			color: var(--lowlight-comp);
		}
		.box-outline-lowlight {
			background-color: #FFFFFF;
			color: var(--lowlight-comp);
			border: 2px solid var(--lowlight-base);
			box-shadow: var(--light-grey) 0 2px 5px;
		}
		.box.error,
		.box.errors {
			background-color: var(--error-comp-color);
			border-color: var(--error-comp-color);
			color: var(--error-base-color);
		}
		.box-error, .box.error {
			background-color: var(--error-comp);
			border: 2px solid var(--error-base);
			color: var(--text-base);
		}

		.box-success, .box.success {
			background-color: var(--success-comp);
			border: 2px solid var(--success-base);
			color: var(--text-base);
		}
			.box-error .icon,
			.box-success .icon {
				max-width: 200px;
				margin-right: 32px;
			}

		.box-header {
			text-align: center;
		}

		.box-global {
			position: fixed;
			width: 500px;
			bottom: 100px;
			z-index: 200;
			left: 50%;
			transform: translateX(-50%);
			padding: 12px;
			color: var(--success-base);
			line-height: 1.2;
			box-shadow: #b9b9b9 1px 1px 3px;
		}

	/* END: boxes */

	/* BEGIN: panels */

		.panel {
			border-radius: var(--border-radius-xl);
		}
		.panel-secondary {
			background-color: #FFFFFF;
			border: 1px solid var(--light-grey);
			box-shadow: var(--light-grey) 0 2px 5px;
			color: var(--text-base);
		}

		.panel-header {
			padding: var(--offset-stepsize);
			border-top-left-radius: var(--border-radius-xl);
			border-top-right-radius: var(--border-radius-xl);
		}
		.panel-secondary .panel-header {
			background-color: var(--light-grey);

		}

		.panel-content {
			padding: var(--offset-stepsize);
		}

	/* END: panels */

	/* BEGIN: buttons */

		.btn {
			border: 1px solid;
			border-radius: var(--border-radius-l);
			cursor: pointer;
			font: inherit;
			font-weight: normal;
			height: 53px;
			padding: 12px 24px;
			min-width: 256px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: 0.25s;
		}

		.btn-small {
			border-radius: var(--border-radius);
			font-size: 80%;
			height: unset;
			line-height: 1;
			min-width: auto;
			padding: 4px;
		}

		.btn-plain {
			border: none;
			background: none;
			min-width: auto;
		}

		.btn-highlight {
			background-color: var(--highlight-base);
			border-color: var(--highlight-base);
			color: var(--highlight-comp);
			text-transform: uppercase;
		}
		.btn-outline-highlight {
			background-color: var(--highlight-comp);
			border-color: var(--highlight-base);
			color: var(--highlight-base);
			text-transform: uppercase;
		}

		.btn-primary {
			background-color: var(--first-base);
			border-color: var(--first-base);
			color: var(--first-comp);
		}
			.btn-primary > svg {
				fill: var(--first-comp);
			}

		.btn-primary:hover:not([disabled]):not(.disabled),
		.btn-primary.active:not([disabled]):not(.disabled) {
			background-color: var(--first-base-active);
			border-color: var(--first-base-active);
			color: var(--first-comp-active);
		}

		.btn-outline-primary {
			background-color: var(--first-comp);
			border-color: var(--first-base);
			color: var(--first-base);
		}

		.btn-secondary {
			background-color: var(--second-base);
			border-color: var(--second-base);
			color: var(--second-comp);
		}
		.btn-outline-secondary {
			background-color: var(--second-comp);
			border-color: var(--second-base);
			color: var(--second-base);
		}
		.btn-outline-secondary[data-input-single]:hover,
		.btn-outline-secondary[data-input-multi]:hover {
			background-color: var(--first-base);
			border-color: var(--first-base);
			color: var(--first-comp);
		}
		.btn-outline-secondary > svg {
			fill: var(--second-base);
		}

		.btn-outline-secondary-disabled {
			background-color: var(--second-comp-disabled);
			border-color: var(--second-base-disabled);
			color: var(--second-base-disabled);
		}
		.btn-outline-secondary-disabled > svg {
			fill: var(--second-base-disabled);
		}

		@media (max-width: 799px) {

			.btn {
				height: 48px;
				border-radius: 24px;
			}

		}

	/* END: buttons */

	/* BEGIN: form */

		.input-field-row {
			display: flex;
		}
		/* Fallback for Safari */
		.input-field-row > * + * { margin-left: calc(var(--offset-stepsize) * 2); }

		.input-field {
			display: flex;
			flex-direction: column;
			margin-bottom: var(--offset-stepsize);
		}
			.input-field label {
				margin-bottom: calc(var(--offset-stepsize) / 2);
			}

		.input-text {
			padding: 8px 16px;
			border: 1px solid var(--light-grey);
			font-size: var(--font-size);
		}

		.input-text-highlight {
			border-color: var(--highlight-base);
		}
		.input-text-primary {
			border-color: var(--first-base);
		}

		.input-group {
			display: flex;
		}
		.input-group > * {
			border-radius: var(--border-radius-l);
		}
		.input-group > :not(:first-child, button:last-of-type, .simplev-message) {
			border-radius: 0;
		}
		.input-group > :first-child {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
		.input-group > button:last-of-type {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		@media (max-width: 799px) {

			.input-group > * {
				height: 48px;
				border-radius: 24px;
			}

		}

		/* BEGIN: custom checkbox, custom radio */

			/* The container */
			.custom-input {
				display: block;
				position: relative;
				padding-left: 35px;
				margin-bottom: 12px;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			/* Hide the browser's default checkbox */
			.custom-input input {
				position: absolute;
				opacity: 0;
				cursor: pointer;
				height: 0;
				width: 0;
			}

			/* Create a custom checkbox */
			.checkmark {
				position: absolute;
				top: 0;
				left: 0;
				height: 25px;
				width: 25px;
				border-radius: 8px;
				border: 1px solid var(--grey);
			}

			/* On mouse-over, add a grey background color */
			.custom-input:hover input ~ .checkmark {
				background-color: var(--light-grey);
			}

			/* When the checkbox is checked, add a blue background */
			.custom-input input:checked ~ .checkmark {
				background-color: var(--first-base);
			}

			/* Create the checkmark/indicator (hidden when not checked) */
			.custom-input .checkmark:after {
				content: "";
				position: absolute;
				display: none;
			}

			/* Show the checkmark when checked */
			.custom-input input:checked ~ .checkmark:after {
				display: block;
			}

			/* Style the checkmark/indicator */
			.custom-input .checkmark:after {
				left: 8px;
				top: 4px;
				width: 5px;
				height: 10px;
				border: solid var(--white);
				border-width: 0 3px 3px 0;
				-webkit-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				transform: rotate(45deg);
			}

		/* END: custom checkbox, custom radio */

	/* END: form */

	/* BEGIN: swiper */

		.swiper-container {
			position: relative;
		}

		.swiper-container .swiper-button-prev,
		.swiper-container .swiper-button-next {
			height: calc(var(--offset-stepsize) * 3);
			width: calc(var(--offset-stepsize) * 3);
			top: 50%;
			z-index: 5;

		}
		.swiper-container .swiper-button-prev {
			left: calc((var(--offset-stepsize) * 4) * -1);
		}
		.swiper-container .swiper-button-next {
			right: calc((var(--offset-stepsize) * 4) * -1);;
		}

		.swiper-container .swiper-button-prev:after,
		.swiper-container .swiper-button-next:after {
			font-size: 32px;
			font-weight: bold;
		}
		.swiper-container .swiper-button-prev:after {
			padding-right: 4px;
		}
		.swiper-container .swiper-button-next:after {
			padding-left: 4px;
		}

		.swiper-container .swiper-button-primary {
			background-color: var(--first-base);
			color: var(--first-comp);
			border-radius: 50%;
		}
		.swiper-container .swiper-button-secondary {
			color: var(--first-base);
		}
		.swiper-container .swiper-button-prev.swiper-button-secondary {
			left: calc((var(--offset-stepsize) * 4) * -1);
		}
		.swiper-container .swiper-button-next.swiper-button-secondary {
			right: calc((var(--offset-stepsize) * 4) * -1);;
		}

	/* END: swiper */

	.separator {
		width: 100%;
		border-bottom: 2px solid var(--light-grey);
	}

/* END: components */

/* BEGIN: typography */

	h1.inline, h2.inline, h3.inline, h4.inline, h5.inline, h6.inline {
		display: inline-block;
	}

	h1, .h1 {
		font-size: var(--font-size-xl);
		font-weight: bold;
		line-height: var(--line-height-l);
		margin-bottom: var(--font-margin-xl);
	}
	h2, .h2 {
		font-size: var(--font-size-l);
		font-weight: bold;
		line-height: var(--line-height-l);
		margin-bottom: var(--font-margin-l);
	}
	h3, .h3 {
		font-size: var(--font-size);
		font-weight: bold;
		line-height: var(--line-height-l);
		margin-bottom: var(--font-margin-l);
	}
	h4, .h4 {
		font-size: var(--font-size);
		font-weight: bold;
		line-height: var(--line-height-l);
		margin-bottom: var(--font-margin-l);
	}

	p {
		font-size: var(--font-size);
		font-weight: normal;
		line-height: var(--line-height);
		margin-bottom: var(--font-margin);
	}

	.text-highlight {
		color: var(--highlight-base);
	}
	.text-primary {
		color: var(--first-base);
	}
	.text-secondary {
		color: var(--second-base);
	}
	.text-base {
		color: var(--text-base);
	}
	.text-success {
		color: var(--success-base);
	}

	.hint {
		font-size: var(--font-size-s);
	}

	.f-normal {
		font-weight: 400;
		font-style:  normal;
	}
	.f-bold {
		font-weight: bold;
	}
	.f-cursive {
		font-style: italic;
	}

	.f-size-60 {
		font-size: 60%;
	}
	.f-size-80 {
		font-size: 80%;
	}
	.f-size-100 {
		font-size: 100%;
	}
	.f-size-120 {
		font-size: 120%;
	}
	.f-size-150 {
		font-size: 150%;
	}

	.f-weight-300 {
		font-weight: 300;
	}
	.f-weight-700 {
		font-weight: 700;
	}

	.l-height-s {
		line-height: var(--line-height-s);
	}

/* END: typography */

/* BEGIN: helpers */

	.border-radius-0 {
		border-radius: 0;
	}

	.t-center {
		text-align: center;
	}

	/* BEGIN: colors */

		.background-color-primary {
			background-color: var(--first-base);
		}

		.color-primary {
			color: var(--first-base);
		}

		.fill-primary {
			fill: var(--first-base);
		}
		.fill-primary-disabled {
			fill: var(--first-base-disabled);
		}
		.fill-secondary {
			fill: var(--second-base);
		}
		.fill-secondary-disabled {
			fill: var(--second-base-disabled);
		}

		.stroke-primary {
			stroke: var(--first-base);
		}

	/* END: colors */

	/* BEGIN: margins */

		.m-0 {
			margin: 0;
		}
		.m-1 {
			margin: calc(var(--offset-stepsize) * 1);
		}
		.m-2 {
			margin: calc(var(--offset-stepsize) * 2);
		}

		.mb-0 {
			margin-bottom: 0;
		}
		.mb-1 {
			margin-bottom: calc(var(--offset-stepsize) * 1);
		}
		.mb-2 {
			margin-bottom: calc(var(--offset-stepsize) * 2);
		}
		.mb-3 {
			margin-bottom: calc(var(--offset-stepsize) * 3);
		}
		.mb-4 {
			margin-bottom: calc(var(--offset-stepsize) * 4);
		}
		.mb-5 {
			margin-bottom: calc(var(--offset-stepsize) * 5);
		}
		.mb-6 {
			margin-bottom: calc(var(--offset-stepsize) * 6);
		}

		.ml-0 {
			margin-left: 0;
		}

		.ml-1 {
			margin-left: calc(var(--offset-stepsize) * 1);
		}

		.ml-2 {
			margin-left: calc(var(--offset-stepsize) * 2);
		}

		.mr-0 {
			margin-right: 0;
		}
		.mr-1 {
			margin-right: calc(var(--offset-stepsize) * 1);
		}
		.mr-2 {
			margin-right: calc(var(--offset-stepsize) * 2);
		}
		.mr-3 {
			margin-right: calc(var(--offset-stepsize) * 3);
		}
		.mr-4 {
			margin-right: calc(var(--offset-stepsize) * 4);
		}
		.mr-5 {
			margin-right: calc(var(--offset-stepsize) * 5);
		}
		.mr-6 {
			margin-right: calc(var(--offset-stepsize) * 6);
		}

		.mt-0 {
			margin-top: 0;
		}
		.mt-1 {
			margin-top: calc(var(--offset-stepsize) * 1);
		}
		.mt-2 {
			margin-top: calc(var(--offset-stepsize) * 2);
		}
		.mt-3 {
			margin-top: calc(var(--offset-stepsize) * 3);
		}
		.mt-4 {
			margin-top: calc(var(--offset-stepsize) * 4);
		}
		.mt-5 {
			margin-top: calc(var(--offset-stepsize) * 5);
		}
		.mt-6 {
			margin-top: calc(var(--offset-stepsize) * 6);
		}

		.mx-0 {
			margin-left: 0;
			margin-right: 0;
		}
		.mx-1 {
			margin-left: calc(var(--offset-stepsize) * 1);
			margin-right: calc(var(--offset-stepsize) * 1);
		}
		.mx-2 {
			margin-left: calc(var(--offset-stepsize) * 2);
			margin-right: calc(var(--offset-stepsize) * 2);
		}
		.mx-3 {
			margin-left: calc(var(--offset-stepsize) * 3);
			margin-right: calc(var(--offset-stepsize) * 3);
		}
		.mx-4 {
			margin-left: calc(var(--offset-stepsize) * 4);
			margin-right: calc(var(--offset-stepsize) * 4);
		}

		.my-0 {
			margin-top: 0;
			margin-bottom: 0;
		}
		.my-1 {
			margin-top: calc(var(--offset-stepsize) * 1);
			margin-bottom: calc(var(--offset-stepsize) * 1);
		}
		.my-2 {
			margin-top: calc(var(--offset-stepsize) * 2);
			margin-bottom: calc(var(--offset-stepsize) * 2);
		}
		.my-3 {
			margin-top: calc(var(--offset-stepsize) * 3);
			margin-bottom: calc(var(--offset-stepsize) * 3);
		}
		.my-4 {
			margin-top: calc(var(--offset-stepsize) * 4);
			margin-bottom: calc(var(--offset-stepsize) * 4);
		}

	/* END: margins */

	/* BEGIN: paddings */

		.p-0 {
			padding: 0;
		}
		.p-1 {
			padding: calc(var(--offset-stepsize) * 1);
		}
		.p-2 {
			padding: calc(var(--offset-stepsize) * 2);
		}
		.p-3 {
			padding: calc(var(--offset-stepsize) * 3);
		}
		.p-4 {
			padding: calc(var(--offset-stepsize) * 4);
		}

		.pb-1 {
			padding-bottom: calc(var(--offset-stepsize) * 1);
		}

		.pt-1 {
			padding-top: calc(var(--offset-stepsize) * 1);
		}
		.pt-2 {
			padding-top: calc(var(--offset-stepsize) * 2);
		}

		.px-0 {
			padding-left: 0;
			padding-right: 0;
		}
		.px-1 {
			padding-left: calc(var(--offset-stepsize) * 1);
			padding-right: calc(var(--offset-stepsize) * 1);
		}
		.px-2 {
			padding-left: calc(var(--offset-stepsize) * 2);
			padding-right: calc(var(--offset-stepsize) * 2);
		}
		.px-3 {
			padding-left: calc(var(--offset-stepsize) * 3);
			padding-right: calc(var(--offset-stepsize) * 3);
		}
		.px-4 {
			padding-left: calc(var(--offset-stepsize) * 4);
			padding-right: calc(var(--offset-stepsize) * 4);
		}

	/* END: paddings */

	/* BEGIN: layout */

		.align-items-center {
			align-items: center;
		}
		.align-items-stretch {
			align-items: stretch;
		}
		.align-items-end {
			align-items: flex-end;
		}

		.align-self-end {
			align-self: flex-end;
		}

		.d-flex {
			display: flex;
		}

		.flex-grow {
			flex-grow: 1
		}

		.flex-nowrap {
			flex-wrap: nowrap;
		}
		.flex-wrap {
			flex-wrap: wrap;
		}

		.flex-gap-0 {
			gap: 0;
		}
		.flex-gap-1 {
			gap: calc(var(--offset-stepsize) * 1);
		}
		.flex-gap-2 {
			gap: calc(var(--offset-stepsize) * 2);
		}
		.flex-gap-3 {
			gap: calc(var(--offset-stepsize) * 3);
		}
		.flex-gap-4 {
			gap: calc(var(--offset-stepsize) * 4);
		}

		.justify-content-between {
			justify-content: space-between;
		}
		.justify-content-center {
			justify-content: center;
		}
		.justify-content-end {
			justify-content: flex-end;
		}
		.justify-content-evenly {
			justify-content: space-evenly;
		}

		.row {
			display: flex;
			flex-direction: row;
		}
		.row-reverse {
			display: flex;
			flex-direction: row-reverse;
		}
		.column, .col {
			display: flex;
			flex-direction: column;
		}
		.column-reverse, .col-reverse {
			display: flex;
			flex-direction: column-reverse;
		}

		.h-100 {
			height: 100%;
		}

		.w-100 {
			width: 100%;
		}
		.w-90 {
			width: 90%;
		}
		.w-80 {
			width: 80%;
		}
		.w-70 {
			width: 70%;
		}
		.w-60 {
			width: 60%;
		}
		.w-50 {
			width: 50%;
		}
		.w-48 {
			width: 48%;
		}
		.w-45 {
			width: 45%;
		}
		.w-40 {
			width: 40%;
		}
		.w-30 {
			width: 30%;
		}
		.w-25 {
			width: 25%;
		}
		.w-20 {
			width: 20%;
		}
		.w-10 {
			width: 10%;
		}

	/* END: layout */

/* END: helpers */

/* BEGIN: utilities */

	.not-allowed {
		cursor: not-allowed;
	}

	.loading {
		display: block;
		text-align: center;
	}

		.loading .hline {
			background-image: url('/resources/animations/loading_hline.gif');
			display: inline-block;
			height: 38px;
			width: 256px;
		}

	[data-tooltip] {
		position: relative;
	}

	[data-tooltip]:after {
		border: 1px solid var(--second-base);
		border-radius: var(--border-radius);
		content: attr(data-tooltip);
		font-size: 12px;
		line-height: 12px;
		position: absolute;
		left: 0;
		top: calc(100% + 4px); /* put it on the bottom */

		background-color: var(--second-comp)!important;
		color: var(--second-base)!important;
		width: max-content;
		opacity: 0;
		visibility: hidden;
		padding: 4px;
		-webkit-transition: opacity 0.75s ease-in-out;
	}

	[data-tooltip]:hover:after {
		opacity: 1;
		visibility: visible;
	}

	div[data-tooltip]:after {
		left: 5px!important;
	}

/* END: utilities */

/* BEGIN: icons */

	.icon-arrow .icon-arrow-color {
		fill: var(--first-base);
	}
	.icon-arrow.down {
		transform: rotate(180deg);
	}
	.icon-arrow.right {
		transform: rotate(90deg);
	}
	.icon-arrow.left {
		transform: rotate(270deg);
	}

	.icon-brand {
		width: 128px;
	}
	.icon-brand, .icon-brand .icon-brand-color {
		fill: #000000;
	}
	.icon-brand.inverted, .icon-brand.inverted .icon-brand-color {
		fill: #FFFFFF;
	}

	.icon-user .icon-user-background-color {
		fill: var(--first-comp);
		stroke: var(--first-base);
		stroke-width: 1.5;
	}
	.icon-user .icon-user-color {
		fill: var(--first-base);
	}

	.icon-seo .icon-seo-background-color {
		fill: var(--first-base);
	}
	.icon-seo .icon-seo-color {
		fill: var(--first-comp);
	}

	.icon-dsgvo .icon-dsgvo-background-color {
		fill: var(--first-base);
	}
	.icon-dsgvo .icon-dsgvo-color {
		fill: var(--first-comp);
	}

	.icon-tls .icon-tls-background-color {
		fill: var(--first-base);
	}
	.icon-tls .icon-tls-color {
		fill: var(--first-comp);
	}

	.icon-speech-bubble,
	.icon-cloud-bubble {
		stroke-miterlimit: 10;
	}
	.icon-speech-bubble-background-color,
	.icon-cloud-bubble-background-color {
		fill: #FFF;
	}
	.icon-speech-bubble-color,
	.icon-cloud-bubble-color {
		stroke: var(--lowlight-base);
	}

	.icon-tool-tip {
		background-image: url("/resources/images/wizard/icon/info.svg");
		height: 32px;
		width: 32px;
	}
	.icon-recommend {
		background-image: url('/resources/images/wizard/icon/thumbs_up.svg');
		background-size: 32px 32px;
		display: block;
		height: 32px;
		margin: 0 auto 8px;
		width: 32px;
	}
	.icon-check {
		background-image: url('/resources/images/wizard/icon/checkmark.svg');
		background-size: contain;
		height: 32px;
		width: 32px;
	}

/* END: icons */

/* BEGIN: plug-ins */

	div.simplev-invalid {
		border-color: var(--error-base);
	}

	.simplev-message {
		color: var(--error-base);
		display: block;
		font-size: var(--font-size-s);
		margin-bottom: 4px;
		margin-right: 4px;
		text-transform: none;
	}

	.-ui-locked {
		align-items: center;
		background-color: var(--grey);
		opacity: 0.8;
		color: var(--white);
		display: flex;
		flex-direction: column;
		font-size: 200%;
		justify-content: center;
	}

	[data-file-picker] [data-file-drop] [data-file-drop-text] {
		line-height: var(--line-height);
		font-size: var(--font-size-s);
	}

/* END: plug-ins */

/* BEGIN: print */

	@media only print {

		.page-header {
			display: none;
		}
		.-wizard-content * {
			display: none;
		}
		.-wizard-content .booking-details,
		.-wizard-content .booking-details * {
			display: block;
		}
		.-wizard-content .booking-details button {
			display: none;
		}

	}


/* BEGIN: print */
