/* Or general css properties */
html,
body {
  margin: 0;
  padding: 0;

  font-family: var(--text-font-family);
  font-size: var(--text-font-size);

  width: 100%;
  height: 100%;

  letter-spacing: 0.3px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  /* Entire page is 14px based */
  font-size: 0.875rem;

  background: var(--blue-500) url("../images/BG-Volandis.svg?v=5ycXBNeEnmg9lhTK8StIWv68JhY") no-repeat scroll
    left top;
  background-size: auto clamp(34rem, 120vw, 1275px);
}

h1 {
  margin: 0;
  font-size: var(--font-xl);
}
h2 {
  margin: 0;
  font-size: var(--font-l);
}

a {
  color: var(--blue-500);
}
a,
a:visited {
  text-decoration: none;
}
a:hover,
a:active {
  text-decoration: underline;
}

.page-container {
  display: flex;
  padding: 16px;
  min-height: calc(100% - 56px);
  width: inherit;

  align-items: center;
  justify-content: center;
}

.card, dialog {
  --card-padding: 2.5rem;

  border-radius: 1rem;
}

.card {
  background-color: var(--white-500);
  color: var(--blue-700);
  position: relative;

  padding: var(--card-padding);

  z-index: 1;
}

.card--login h1 {
  color: var(--blue-500);
}
.card--login h2 {
  color: var(--blue-sec-500);
}

.card--register h1, sign-up--card h1 {
    color: var(--register-green);
}
.card--register a.button {
  --button-background-color: var(--register-green);
  --button-text-color: var(--white-500);
}
.card--register a.button:hover,
.card--register a.button:active,
.card--register a.button:focus {
  --button-background-color: var(--register-green-hover);
}

svg {
  height: 1.5em;
  width: 1.5em;
}

.powered-by-fiqas {
  height: 56px;
  display: flex;
  justify-content: space-around;
  color: white;
  opacity: 0.5;
}

.powered-by-fiqas svg {
  width: 92px;
  height: 34px;
}

:root {
  --white-500: #fff;
  --blue-50: #f0f2f8;
  --blue-100: #e2f6ff;
  --blue-200: #c2e9fb;
  --blue-300: #80ceef;
  --blue-350: #7fceef;
  --blue-400: #71c7ef;
  --blue-500: #01aee1;
  --blue-600: #0097db;
  --blue-700: #3c77b6;
  --blue-800: #2d529b;
  --purple-500: #39286e;
  --purple-600: #4d265a;
  --red-500: #ff0000;
  --title-color: var(--blue-500);
  --title-font-family: Calibri, sans-serif;
  --title-font-weight: 600;
  --h1-color: var(--title-color);
  --h1-font-family: var(--title-font-family);
  --h1-font-weight: var(--title-font-weight);
  --h1-font-size: 26px;
  --h1-line-height: 1;
  --h2-color: var(--title-color);
  --h2-font-family: var(--title-font-family);
  --h2-font-weight: var(--title-font-weight);
  --h2-font-size: 18px;
  --h2-line-height: 1;
  --text-color: var(--blue-800);
  --text-font-family: Calibri, sans-serif;
  --text-font-weight: 400;
  --text-font-size: 1rem;
  --text-line-height: 1.5;
  --link-color: var(--blue-500);
  --link-font-family: var(--text-font-family);
  --link-font-weight: var(--text-font-weight);
  --link-font-size: var(--text-font-size);
  --link-decoration: underline;
  --link-decoration-hover: underline;
  --button-icon: null;
  --button-icon-width: null;
  --button-icon-height: null;
  --primary-button-text-color: var(--white-500);
  --primary-button-bg-color: var(--blue-500);
  --primary-button-bg-color-hover: var(--purple-500);
  --primary-button-padding: 7px 16px 9px;
  --primary-button-border-radius: 20px;
  --primary-button-border: null;
  --primary-button-shadow: null;
  --primary-button-font-family: var(--text-font-family);
  --primary-button-font-weight: 600;
  --primary-button-font-size: var(--text-font-size);
  --input-label-text-color: var(--text-color);
  --input-label-font-family: var(--text-font-family);
  --input-label-font-weight: var(--text-font-weight);
  --input-label-font-size: var(--text-font-size);
  --input-text-color: var(--text-color);
  --input-placeholder-color: var(--text-color);
  --input-bg-color: var(--blue-100);
  --input-border-radius: 0px;
  --input-border: 1px solid var(--input-bg-color);
  --input-padding: 8px 16px;
  --input-error-color: var(--red-500);
  --input-error-bg-color: var(--input-bg-color);
  --input-error-border-color: var(--red-500);

  /** Our variables **/
  /* Font sizes based on 1rem = 16px, but this scales better. */
  --font-xs: 0.75rem;
  --font-s: 0.875rem;
  --font-medium: 1rem;
  --font-l: 1.375rem;
  --font-xl: 2rem;
  --font-xxl: 3.875rem;

  --transition-animation: cubic-bezier(0.35, 0, 0.25, 1);
  --transition: 0.25s var(--transition-animation);

  --blue-sec-500: #2c3b8e;

  --fqs-blue-100: #e2f6ff;
  --fqs-blue-50: #f5fbfd;

  --input-background-color: var(--fqs-blue-100);
  --input-background-focus-color: var(--fqs-blue-50);

  --input-error-label: #f31260;
  --input-error-placeholder: #f59db1;
  --input-error: #ffebef;

  --text-black: rgba(0, 0, 0, 0.87);
  
  --register-green-color: 23, 201, 99;
  --register-green: rgb(var(--register-green-color));
  --register-green-background: rgb(var(--register-green-color), 0.1);
  --register-green-hover: #108d45;
}

/* Margins */

.mt-3 {
  margin-top: 1rem;
}
.mt-4 {
  margin-top: 2rem;
}
.mt-5 {
  margin-top: 2.5rem;
}

.mb-4 {
  margin-bottom: 2rem;
}

/* Paddings */
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-4 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-3 {
  padding-bottom: 1rem;
}
.pb-4 {
  padding-bottom: 2rem;
}

/* Font-sizes */
.font-xs {
  font-size: var(--font-xs);
}
.font-s {
  font-size: var(--font-s);
}
.font-medium {
  font-size: var(--font-medium);
}
.font-l {
  font-size: var(--font-l);
}
.font-xl {
  font-size: var(--font-xl);
}
.font-xxl {
  font-size: var(--font-xxl);
}

.font-dynamic-xl {
  font-size: clamp(var(--font-l), 6.5vw, var(--font-xl));
}

.font-dynamic-xxl {
  font-size: clamp(var(--font-l), 6.5vw, var(--font-xxl));
}

.font-bold {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.single-line-with-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.double-line-with-ellipsis {
  overflow: hidden;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Styling for the specific inputs */
.form-field {
    position: relative;
    padding-top: 1.5rem;

    background-color: transparent;
    --label-top: translateY(-2em) scale(0.75);
}

.form-field--multi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1em;
}

.form-field--multi_1-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

.form-field select,
.form-field input {
    width: 100%;
    border: none;
    background-color: var(--input-background-color);
    height: 2.5em;
    font: inherit;
    padding: 0.5em;

    border-radius: 4px;

    transition: background-color var(--transition);
}

.form-field input[list]::-webkit-list-button,
.form-field input[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

.form-field select:focus,
.form-field input:focus {
    outline: none;

    background-color: var(--input-background-focus-color);
}

.form-field input::placeholder {
    color: var(--blue-300);
    text-align: right;
}

.form-field fqs-birth-date input::placeholder {
    text-align: left;
}

.form-field input:required ~ label:after,
.form-field fqs-birth-date[required] ~ label:after {
    content: ' *';
}

.form-field label {
    position: absolute;
    width: 100%;
    left: 0.5em;
    transform-origin: center left;

    color: var(--blue-600);

    transition: transform var(--transition);
}

.form-field label:disabled ~ label {
    color: var(--blue-300);
    user-select: none;
    pointer-events: none;
}

.form-field--label-float > label,
.form-field--multi ~ label,
.form-field input.has-value ~ label,
.form-field input:placeholder-shown ~ label,
.form-field input:focus ~ label,
.form-field input:-webkit-autofill ~ label {
    user-select: initial;
    pointer-events: initial;
    transform: var(--label-top);
}

/* Currently not supported */
.form-field input:not(:blank) ~ label {
    transform: var(--label-top);
}

.form-field input:autofill ~ label {
    user-select: initial;
    pointer-events: initial;
    transform: var(--label-top);
}

.form-field label {
    top: calc(50% + 0.25rem);
}

/* Error state */
.form-field.has-validity-checked input:invalid,
.form-field.has-error input,
.form-field.is-touched input:invalid,
.form-field.has-validity-checked select:invalid,
.form-field.has-error select,
.form-field.is-touched select:invalid {
    background-color: var(--input-error);
}

.form-field.has-validity-checked input:invalid::placeholder,
.form-field.has-error input::placeholder,
.form-field.is-touched input:invalid::placeholder {
    color: var(--input-error-placeholder);
}

.form-field.has-validity-checked.has-error label,
.form-field.has-validity-checked input:invalid ~ label,
.form-field.has-error input ~ label,
.form-field.is-touched input:invalid ~ label {
    color: var(--input-error-label);
}

.form-field fqs-birth-date:focus-within ~ .form-field--error,
.form-field input:focus ~ .form-field--error {
    opacity: 0;
}

.has-validity-checked .form-field--error,
.form-field--error {
    --fade-length: 4em;
    color: var(--input-error-label);
    vertical-align: middle;
    background: linear-gradient(
            90deg,
            transparent 0,
            var(--input-error) var(--fade-length)
    );

    pointer-events: none;

    height: 2.5em;
    padding: 1.5em 0.5em 1.5em calc(var(--fade-length) + 1em);

    opacity: 1;
    transition: opacity var(--transition);

    font-size: smaller;
    position: absolute;
    right: 0;
    bottom: 0;

    z-index: 2;

    display: inline-flex;
    align-items: center;
}

/* Input checkbox */
.form-checkbox {
    color: var(--text-black);
    position: relative;

    font-size: var(--font-small);

    line-height: 1.125;
    display: inline-grid;
    grid-template-columns: 1em auto;
    align-items: center;
    gap: 0.75em;
}

.form-checkbox input {
    margin: -0.125em 0 0 0;
    accent-color: var(--blue-600);
    z-index: 2;
}

.form-checkbox input ~ label:before {
    --scale: scale(0);
    content: '';
    width: 1.5em;
    height: 1.5em;
    background-color: var(--blue-200);
    border-radius: 50%;
    position: absolute;
    transition: transform var(--transition);
    transform: translate3d(-1.75em, -0.25em, 0) var(--scale);
    transform-origin: center center;
    z-index: 1;
}

.form-checkbox input:focus ~ label:before {
    --scale: scale(1);
}

.form-checkbox-terms {
    margin-left: 0.75em;
    width: calc(100% - 0.75em)
}

.form-checkbox-terms .form-field--error {
    --fade-length: 1em;
    bottom: 0;
    height: 2em;
    padding: 0 0.5em 0 calc(var(--fade-length) + 1em);
    margin-bottom: -1.5em;
    background: linear-gradient(180deg, transparent 0, var(--input-error) var(--fade-length));
    align-items: flex-end;
    width: 100%
}

.form-checkbox-terms input {
    height: var(--font-medium);
    width: var(--font-medium);
}

.form-field button[data-show-password] {
    position: absolute;
    right: 0.5em;
    bottom: 0.1875em;
    z-index: 1;
}

.form-field input[type='text'] ~ button .input-type-text,
.form-field input[type='password'] ~ button .input-type-password {
    display: initial;
}

.form-field input[type='password'] ~ button .input-type-text,
.form-field input[type='text'] ~ button .input-type-password {
    display: none;
}

.form-field:has(> button[data-show-password]) .form-field--error {
    right: 2.5em;
}

.form-field:has(> button[data-show-password]) input {
    padding-right: 2.5rem;
}

.form-field:has(> button[data-show-password]) input::-ms-reveal {
    display: none;
}

.birth-date-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1em;
}


fqs-birth-date select {
    color: var(--blue-300);
}

fqs-birth-date select option,
fqs-birth-date select:has(option:checked:not([value])),
fqs-birth-date select:has(option:checked:not([value=""])),
fqs-birth-date select:has(option:checked:not([value])) option,
fqs-birth-date select:has(option:checked:not([value=""])) option {
    color: initial;
}


/* Hidden placeholder */
fqs-birth-date select option[disabled]:first-child {
    display: none;
}
/* Specific button styling */

a.button,
button {
	--button-background-color: var(--blue-700);
	--button-text-color: var(--primary-button-text-color);

	background-color: var(--button-background-color);
	border: none;
	border-radius: var(--primary-button-border-radius);

	cursor: pointer;

	color: var(--button-text-color);

	transition: background-color var(--transition);

	padding: 0.625em 1.25em 0.5em;

	font-family: inherit;
	font-weight: 300;
	font-size: inherit;

	text-transform: uppercase;

	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75em;
}

a.button:focus,
a.button:active,
a.button:hover,
button:focus,
button:active,
button:hover {
	--button-background-color: var(--purple-500);
	outline: none;
}
button:disabled {
	--button-background-color: var(--fqs-blue-100);
	--button-text-color: var(--blue-300);
	cursor: default;
}

@keyframes button-loading {
	100%,
	0% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(300%, 0, 0);
	}
}

button.button__loading {
	overflow: hidden;
	position: relative;
	cursor: wait;
}
button.button__loading:after {
	content: '';
	animation: button-loading var(--transition-animation) 2s infinite normal;

	background-color: currentColor;
	width: 25%;
	height: 2px;
	border-radius: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
}

a.button svg,
button svg {
	width: 1.25em;
	height: 1.25em;

	margin-top: -0.125em;
}

/* Secondary button styling */
button.button--secondary {
	--button-background-color: var(--fqs-blue-100);
	--button-text-color: var(--blue-700);
}
button.button--secondary:focus,
button.button--secondary:active,
button.button--secondary:hover {
	--button-background-color: var(--blue-200);
}
button.button--secondary:disabled {
	--button-background-color: var(--fqs-blue-50);
	--button-text-color: var(--blue-200);
}

/* Icon button styling */
button.button--icon {
	--button-background-color: transparent;
	--button-text-color: var(--blue-700);
	border-radius: 50%;

	padding: 0.125em;
}
button.button--icon svg {
	margin-top: 0;
	width: 2em;
	height: 2em;
}
button svg.rotate90 {
	transform: rotate(90deg);
	transform-box: fill-box;
	transform-origin: center;
}

button.button--icon:focus,
button.button--icon:active,
button.button--icon:hover {
	--button-text-color: var(--purple-500);
	--button-background-color: var(--blue-100);
	outline: none;
}

/* a.button specific */
a.button {
	text-decoration: none;
}


.form-single-line {
	padding-top: 1rem;

	display: flex;
	gap: 2em;
	align-items: center;
	justify-content: space-between;
}

.form-centered {
	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;
}

.form-end {
	display: flex;
	flex-direction: column;

	align-items: end;
	justify-content: end;
}


dialog {
	--dialog-background: var(--blue-sec-500);

	--dialog-close-background: var(--blue-500);
	--dialog-close-color: var(--blue-500);
	--dialog-close-hover-color: var(--blue-sec-500);

	--dialog-title-color: var(--blue-500);

	padding: var(--card-padding);
	background-color: var(--dialog-background);
	color: var(--white-500);
	border: none;
	z-index: 10;
}

dialog.dialog-as-popup {
	max-width: 420px;
	box-shadow: rgba(0, 0, 0, 0.5) 0 24px 38px 3px;
}

dialog::backdrop {
	background-color: transparent;
}

dialog .dialog-close-button {
	position: absolute;
	font-size: var(--font-xs);
	color: var(--dialog-close-color);
	right: 0.75rem;
	top: 0.75rem;
}
dialog .dialog-close-button:focus,
dialog .dialog-close-button:active,
dialog .dialog-close-button:hover {
	background-color: var(--dialog-close-background);
	color: var(--dialog-close-hover-color);
}

dialog h3 {
	font-size: var(--font-l);
	color: var(--dialog-title-color);

	margin: 0 0 1rem;
}
dialog p {
	margin: 0;
	line-height: 1.5;
}
dialog .dialog-call-to-action {
	display: flex;
	justify-content: center;

	margin-top: 2rem;
}


/* Dialog in error state */
dialog.error-state {
	--dialog-background: var(--input-error-label);

	--dialog-close-background: rgba(255, 255, 255, 0.25);
	--dialog-close-color: var(--white-500);
	--dialog-close-hover-color: var(--white-500);
	--dialog-title-color: var(--white-500);
}
dialog.error-state .error-state-close-form {
	width: 100%;
	text-align: center;
	margin-top: 2rem;
}
dialog.error-state .error-state-close-form button {
	--button-background-color: var(--white-500);
	--button-text-color: var(--input-error-label);;
}

/* Styling for specific pages */

/* Generic */
.card dialog {
  width: calc(100% - calc(var(--card-padding) * 2));
}

.card .dialog-call-to-action {
  display: flex;
  justify-content: flex-start;
  gap: 15px;
  margin-top: 2rem;
}

.card {
  min-width: min(350px, calc(100vw - 32px));
}

/* LOGIN (-alike) PAGES */
.error-page, .login-container {
    display: flex;
    align-content: flex-start;
    justify-content: center;
    justify-items: center;
    gap: 16px;
    width: inherit;
    flex-direction: row;
}

.error-page {
    align-items: center;
}

.login-container {
    align-items: start;
    flex-wrap: wrap-reverse;
}

.card--login {
  min-width: unset;
  flex: 0 1 360px;
}

.card--login dialog {
  width: calc(100% - var(--card-padding));
}

.card--login p {
  max-width: 17rem;
  line-height: 1.5em;
}

.card--login h1 + h2 {
  margin-top: 0.5em;
}

/* SIGN-UP PAGES */
.sign-up-container {
    align-items: start;
}
.sign-up-container--content {
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(36rem, 1fr);
    /* 36rem * 2 + 3rem */
    max-width: 75rem;
    gap: 3rem;
}

.sign-up--intro {
  padding-left: 32px;
  align-self: flex-start;
  padding-top: 1.5rem;
}

/* logo height: clamp(7rem, 18.75vw, 17.25rem) */
/* logo width: clamp(8.75rem, 23.375vw, 21.5rem) */
/* card height: 37rem */
/* content (max-)width: 60rem */

@media (max-height: calc(44rem + (clamp(7rem, 23.25vw, 17.25rem) * 2))) and (max-width: calc(67rem + (clamp(8.75rem, 29vw, 21.5rem) * 2))) {
  .sign-up--intro {
    padding-top: 15rem;
  }
}
@media (min-height: calc(44rem + (clamp(7rem, 23.25vw, 17.25rem) * 2))),
  (min-width: calc(67rem + (clamp(8.75rem, 29vw, 21.5rem) * 2))) {
  .sign-up--intro {
    padding-top: 1.5rem;
  }
}

.card--contact,
.sign-up--intro h1,
.sign-up--intro p {
  color: var(--white-500);
}
.sign-up--intro h2 {
  margin-top: -0.25em;
  color: var(--blue-700);
}
.card--contact a,
.sign-up--intro a {
  color: var(--blue-100);
  text-decoration: underline;
}

.sign-up--intro p {
  line-height: 1.6875em;
}

.sign-up--card {
  margin: auto;
  min-height: 40rem;
  max-width: 40rem;
  width: 100%;
}
.sign-up--card h2 {
  color: var(--blue-sec-500);
}

.sign-up--card ul {
  padding: 0 0.5rem 0 1rem;
}
.sign-up--card ul li:not(:first-of-type) {
  margin-top: 0.5em;
}

.sign-up--progress-icons {
  max-height: 75px;
  height: 15vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sign-up--progress-icons svg {
  --color-primary: var(--blue-100);
  --color-secondary: var(--blue-100);

  transition: all var(--transition);

  height: inherit;
  width: auto;
  max-height: inherit;
}
.sign-up--progress-icons svg.sign-up--progress-icons_active {
  --color-primary: var(--blue-500);
  --color-secondary: var(--blue-sec-500);
}

.info-button-container {
  display: flex;
  align-items: flex-end;
}
.info-button-container .form-field {
  flex: 1 1 auto;
  margin-right: 0.25em;
}
.info-button-container > .button--icon {
  margin-right: -2rem;
}

.with-yes-no-message,
.password-extra,
.password-checks {
  display: inline-grid;
  grid-template-columns: minmax(2em, max-content) auto;

  justify-content: center;
  align-items: center;
}

.with-yes-no-message {
  gap: 0.75em 1em;
}

.with-yes-no-message_indent {
  grid-column-start: 2;
}

.with-yes-no-message_both-colomns {
  grid-column-start: 1;
  grid-column-end: 3;
}

.yes-no-circle {
  align-items: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;

  background-color: var(--blue-500);
  color: var(--white-500);

  width: 2.5em;
  height: 2.5em;
}

.password-checks {
  gap: 0.5em 1em;
}
.password-extra {
  display: flex;
  justify-content: left;

  gap: 1rem;

  font-size: var(--font-xs);
  color: var(--blue-300);

  padding-top: 2rem;
}
.password-extra svg {
  color: var(--blue-300);
}

.password-checks svg.is-valid,
.password-checks svg.is-valid + p {
  color: var(--blue-500);
}

.password-checks svg[data-check-pattern] use {
  display: none;
}
.password-checks svg.is-valid use.icon-is-valid,
.password-checks svg:not(.is-valid) use.icon-is-invalid {
  display: initial;
}

/* Margins */

.validation-summary-errors {
    white-space: pre-line;
}

.accordeon {
    --summary-color: #80cff5;
    --accordeon-padding: 0.875rem 1.75rem;
    --accordeon-summary-grid-template: 3.125rem minmax(20rem,1fr) 2rem;
    --accordeon-content-grid-template: 3.125rem minmax(22rem,1fr);
    --accordeon-summary-grid-gap: 1.125rem;
    --accordeon-content-grid-gap: 1.125rem;
    --accordeon-step: 2.375rem;
    --accordeon-step-font-size: 1.625rem;
    --accordeon-step-info: 1.5rem;
    --accordeon-step-info-font-size: 1rem;
    --details-bg-color: var(--white-500);
    --input-background-color: var(--white-500);

    background-color: var(--details-bg-color);
    padding: var(--accordeon-padding);
    margin-bottom: .375rem;
    border-radius: .5rem;
    &.open, &[open] {
        --details-bg-color: var(--fqs-blue-100);
        --summary-color: var(--blue-sec-500);
        .highlight {
            color: var(--title-color);
        }
    }

    &.completed {
        --details-bg-color: var(--register-green-background);
        --summary-color: var(--register-green);
        .highlight, .form-field label, a {
            color: var(--register-green);
        }
        .form-checkbox input {
            accent-color: var(--register-green);
        }
    }

    &[disabled] {
        --accordeon-padding: 0 1.75rem;
    }

    &[disabled] summary {
        pointer-events: none;
        user-select: none;
    }

    summary {
        list-style: none;
        display: grid;
        grid-template-columns: var(--accordeon-summary-grid-template);
        gap: var(--accordeon-summary-grid-gap);
        line-height: 3.125rem;
        color: var(--summary-color);
    }

    summary::-webkit-details-marker {
        display: none;
    }

    .accordeon-step-number, .accordeon-info {
        background-color: var(--summary-color);
        color: var(--white-500);

        font-weight: bold;
        text-align: center;

        padding: 0;

        box-sizing: content-box;

        margin: auto;

        &[disabled] {
            display: none;
        }
    }

    .accordeon-step-number {
        border: 5px solid var(--white-500);
        border-radius: 50%;

        height: var(--accordeon-step);
        width: var(--accordeon-step);
        line-height: var(--accordeon-step);

        font-size: var(--accordeon-step-font-size);
    }

    .accordeon-info {
        color: var(--fqs-blue-100);

        height: var(--accordeon-step-info);
        width: var(--accordeon-step-info);
        line-height: var(--accordeon-step-info);

        font-size: var(--accordeon-step-info-font-size);
    }

    .accordeon-content {
        display: grid;
        grid-template-columns: var(--accordeon-content-grid-template);
        gap: var(--accordeon-content-grid-gap);
        min-height: 100px;
    }

    .vertical-divider-container {
        display: flex;
        justify-content: center;
    }

    .vertical-divider {
        width: 2px;
        background-color: var(--summary-color);
    }

}