/* Define CSS variables */

/* Spacers */
/* Font sizes */
/* Font weights */
/* Colors */
/* ... Add all color variables ... */
/* Primary Colors */
/* Secondary Colors */
/* Font Colors */
/*** 

====================================================================
	Reset
====================================================================

***/

:root {
  --font-weight: 700;
  --icon-img-w: 40px;
  --icon-img-h: 40px;
  --box-padding: 20px;
  --background-gray: #f3f7fd;
  --default-font-family: Montserrat;
  --default-font-size: 1rem;
  --default-line-height: 24px;
  --font-weight: 700;
  --icon-img-w: 40px;
  --icon-img-h: 40px;
  --box-padding: 20px;
  --background-gray: #f3f7fd;
  --default-font-family: Montserrat;
  --secondary-font-family: PT Sans;
  --default-font-size: 1rem;
  --default-line-height: 24px;
  /* Breakpoints */
  --breakpoint-sm: 600px;
  --breakpoint-md: 960px;
  --breakpoint-lg: 1280px;
  /* Spacers */
  --spacer-0: 0;
  --spacer-1: 4px;
  --spacer-2: 8px;
  --spacer-3: 12px;
  --spacer-4: 16px;
  --spacer-5: 20px;
  --spacer-6: 24px;
  --spacer-7: 32px;
  --spacer-8: 40px;
  --spacer-9: 48px;
  --spacer-10: 56px;
  --spacer-11: 64px;
  --spacer-12: 80px;
  --spacer-13: 100px;
  /* Font sizes */
  --ui-text-size-s: 12px;
  --ui-text-size-m: 14px;
  --ui-text-size-l: 16px;
  --ui-text-size-xl: 18px;
  /* Font weights */
  --ui-text-weight-bold: 700;
  --ui-text-weight-medium: 500;
  --ui-text-weight-regular: 400;
  /* Colors */
  --color-blue20: #09337b;
  --color-blue40: #0c48b0;
  --color-blue: #0e55cd;
  --color-blue90: #cfe0fb;
  --color-blue100: #f3f7fd;
  /* ... Add all color variables ... */
  --color-yellow100: #fffcf5;
  --color-purple20: #451f64;
  --color-purple40: #5c2a86;
  --color-purple: #7334a7;
  --color-purple90: #dccce9;
  --color-purple100: #f4eff8;
  --color-green: #00a396;
  --color-green100: #f2fafa;
  --color-gray90: #d9e1ee;
  /* Primary Colors */
  --primary-blue: var(--color-blue);
  --primary-watermelon: var(--color-watermelon);
  --primary-black: #000820;
  --primary-white: #ffffff;
  /* Secondary Colors */
  --secondary-green: var(--color-green100);
  --secondary-yellow: var(--color-yellow);
  --secondary-orange: var(--color-orange);
  --secondary-red: var(--color-red);
  --secondary-purple: var(--color-purple);
  /* Font Colors */
  --font-primary: var(--primary-black);
  --font-secondary: var(--color-gray20);
  --font-tertiary: var(--color-gray40);
  --font-ondark: var(--primary-white);
  --font-error: var(--color-red40);
  --font-success: var(--color-green40);
  --font-placeholder: var(--color-gray40);
  --font-link: var(--color-blue);
  --font-disabled: var(--color-gray);
  --font-support: var(--color-green);
  --font-support-hover: var(--color-green20);
  --font-accent: var(--color-watermelon);
  --font-accent-hover: var(--color-watermelon20);
}

/* Placeholder clearing */
::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
} /* Chrome <=56, Safari < 10 */
:-moz-placeholder {
  opacity: 1;
  -moz-transition: opacity 0.5s;
  transition: opacity 0.5s;
} /* FF 4-18 */
::-moz-placeholder {
  opacity: 1;
  -moz-transition: opacity 0.5s;
  transition: opacity 0.5s;
} /* FF 19-51 */
:-ms-input-placeholder {
  opacity: 1;
  -ms-transition: opacity 0.5s;
  transition: opacity 0.5s;
} /* IE 10+ */
::placeholder {
  opacity: 1;
  transition: opacity 0.5s;
} /* Modern Browsers */

*:focus::-webkit-input-placeholder {
  opacity: 0;
} /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder {
  opacity: 0;
} /* FF 4-18 */
*:focus::-moz-placeholder {
  opacity: 0;
} /* FF 19-50 */
*:focus:-ms-input-placeholder {
  opacity: 0;
} /* IE 10+ */
*:focus::placeholder {
  opacity: 0;
} /* Modern Browsers */

.container-wrapper {
  font-family: var(--default-font-family);
  font-size: var(--default-font-size);
  line-height: var(--default-line-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-gray);
  padding-bottom: 80px;
  color: #000820;
}

.inner-container {
  width: 800px;
  height: auto;
  border-radius: 8px;
  margin-top: -11.7%;
  z-index: 3;
}

.d-block {
  display: block;
}

.d-flex-justify-center {
  display: flex;
  justify-content: center;
}

.d-flex-align-center {
  display: flex;
  align-items: center;
}

/* vertically align elements inside div within a flex context defined by d-flex-m
m stands for medium margin
 */
.d-flex-m {
  display: flex;
}
/* top | right | bottom | left */
.d-flex-m > * {
  margin: auto 12px auto 0px;
}

/* vertically align elements inside div within a flex context defined by d-flex-s
s stands for small margin
*/
.d-flex-s {
  display: flex;
}
.d-flex-s > * {
  margin: auto 0.3%;
}

.horizontal-center {
  margin: auto;
  width: 50%;
}

/* Would be great to standardize same types, e. g. icon size */
i {
  width: 40px;
  height: 40px;
}

.i-s {
  width: 16px;
  height: 16px;
}

.headline-7,
.headline-8 {
  font-weight: var(--font-weight);
}

#hc-footer {
  background-color: var(--background-gray);
}

fieldset {
  border: 0;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.break-word-s {
  word-wrap: break-word;
  width: 95%;
}

.break-word-m {
  word-wrap: break-word;
  width: 85%;
}

.break-word-xl {
  word-wrap: break-word;
  width: 40%;
}