@import "/fonts/fonts.css";

/* Global font setup + global overwrites */
:root {
  /* Colors */
  --color-white-100: #fff;
  --color-brand-blue: #001871;
  --color-brand-blue-hover: #00114f;
  --color-grey-500: #767165;
  --color-brand-green: #5ca145;
  --color-brand-green-hover: #4a8137;

  /* Specific */
  --text-dark: #000722;
  --text-error: #f84646;
  --placeholder: #bbb8b2;
}

html {
  -webkit-font-smoothing: antialiased;
  font-size: 62.5%;
  color: var(--text-dark);
}

body {
  color: var(--text-dark);
  font-family: "Noto Sans Display", sans-serif;
  margin: 0;
}

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

body,
p,
ul li,
ol li {
  font-size: 1.6rem;
}

p,
ul li,
ol li {
  color: var(--text-dark);
}

a {
  color: var(--color-brand-blue);
}

a:hover {
  color: var(--color-brand-blue-hover);
}

/* Field wrappers */
.form-field {
  margin-bottom: 2.4rem;
  margin-top: 0;
}

.form-field:last-of-type {
  margin-bottom: 4rem;
}

.form-field.error {
  margin-bottom: 0.4rem;
}

/* Text inputs */

input::placeholder {
  color: var(--color-grey-500);
  opacity: 0.5;
}

.form-field input[type="text"],
.form-field input[type="password"],
.form-field input[type="date"],
.form-field input[type="datetime"],
.form-field input[type="datetime-local"],
.form-field input[type="month"],
.form-field input[type="week"],
.form-field input[type="email"],
.form-field input[type="number"],
.form-field input[type="search"],
.form-field input[type="tel"],
.form-field input[type="time"],
.form-field input[type="url"],
.form-field input[type="color"],
.form-field textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--color-white-100);
  border: 1px solid var(--color-white-100);
  border-radius: 8px;
  color: var(--text-dark);
  font-family: "Noto Sans Display", sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  height: auto;
  line-height: 2.2rem;
  padding: 1.6rem;
  transition: border-color 350ms ease;
  margin: 0;
  outline: none;
  width: 100%;
}

/* Text input active styles */
.form-field input[type="text"]:placeholder-shown:focus,
.form-field input[type="password"]:placeholder-shown:focus,
.form-field input[type="date"]:placeholder-shown:focus,
.form-field input[type="datetime"]:placeholder-shown:focus,
.form-field input[type="datetime-local"]:placeholder-shown:focus,
.form-field input[type="month"]:placeholder-shown:focus,
.form-field input[type="week"]:placeholder-shown:focus,
.form-field input[type="email"]:placeholder-shown:focus,
.form-field input[type="number"]:placeholder-shown:focus,
.form-field input[type="search"]:placeholder-shown:focus,
.form-field input[type="tel"]:placeholder-shown:focus,
.form-field input[type="time"]:placeholder-shown:focus,
.form-field input[type="url"]:placeholder-shown:focus,
.form-field input[type="color"]:placeholder-shown:focus,
.form-field textarea:placeholder-shown:focus {
  background-color: var(--color-white-100);
  border: 1px solid var(--color-white-100);
}

/* Text input focus styles */
.form-field input[type="text"]:focus,
.form-field input[type="password"]:focus,
.form-field input[type="date"]:focus,
.form-field input[type="datetime"]:focus,
.form-field input[type="datetime-local"]:focus,
.form-field input[type="month"]:focus,
.form-field input[type="week"]:focus,
.form-field input[type="email"]:focus,
.form-field input[type="number"]:focus,
.form-field input[type="search"]:focus,
.form-field input[type="tel"]:focus,
.form-field input[type="time"]:focus,
.form-field input[type="url"]:focus,
.form-field input[type="color"]:focus,
.form-field textarea:focus {
  background-color: var(--color-white-100);
  border: 1px solid var(--color-white-100);
}

/* Text input error styles */
.form-field.error input[type="text"],
.form-field.error input[type="password"],
.form-field.error input[type="date"],
.form-field.error input[type="datetime"],
.form-field.error input[type="datetime-local"],
.form-field.error input[type="month"],
.form-field.error input[type="week"],
.form-field.error input[type="email"],
.form-field.error input[type="number"],
.form-field.error input[type="search"],
.form-field.error input[type="tel"],
.form-field.error input[type="time"],
.form-field.error input[type="url"],
.form-field.error input[type="color"],
.form-field.error textarea {
  border: 1px solid var(--text-error);
  color: var(--text-error);
}

/* Text input placeholder styles */
.form-field input[type="text"]::placeholder,
.form-field input[type="password"]::placeholder,
.form-field input[type="date"]::placeholder,
.form-field input[type="datetime"]::placeholder,
.form-field input[type="datetime-local"]::placeholder,
.form-field input[type="month"]::placeholder,
.form-field input[type="week"]::placeholder,
.form-field input[type="email"]::placeholder,
.form-field input[type="number"]::placeholder,
.form-field input[type="search"]::placeholder,
.form-field input[type="tel"]::placeholder,
.form-field input[type="time"]::placeholder,
.form-field input[type="url"]::placeholder,
.form-field input[type="color"]::placeholder,
.form-field textarea::placeholder {
  color: var(--placeholder);
}

/* Text area styles */
.form-field textarea {
  box-shadow: none;
  height: 100px;
  resize: vertical;
}

/* Label styles */
.form-field .field-label {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 2.1rem;
  margin-bottom: 4px;
  cursor: pointer;
  display: block;
}

.form-field label.inline {
  color: var(--text-dark);
}

/* Label required mark */
.form-field.required .field-label::after {
  color: var(--text-dark);
}

/* Field Error styles */
.error-text.no-label {
  color: var(--text-error);
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin-bottom: 2.4rem;
  margin-top: 0.4rem;
  font-style: normal;
  font-weight: normal;
  flex-basis: 100%;
}

/* Hide error labels that still display below valid fields */
.form-field.required:not(.error) + div + .error.no-label {
  display: none;
}

/* Checkbox + radio styles */
.pd-radio,
.pd-checkbox {
  position: relative;
  overflow: hidden;
  margin-bottom: 2.4rem;
}

.pd-radio .field-label,
.pd-checkbox .field-label {
  margin-bottom: 0.8rem;
}

.pd-radio.no-label,
.pd-checkbox.no-label {
  margin-top: 3.2rem;
}

.pd-radio label,
.pd-checkbox label {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: flex-start;
}

.multicheckbox.pd-radio label,
.multicheckbox.pd-checkbox label {
  margin-right: 1.6rem;
}

.pd-radio label {
  margin-bottom: 0.8rem;
}

.pd-radio .value > span:last-child label {
  margin-bottom: 0;
}

.pd-radio.multicheckbox label,
.pd-checkbox.multicheckbox label {
  margin-bottom: 1.6rem;
}

.pd-radio.multicheckbox label:first-child,
.pd-checkbox.multicheckbox label:first-child {
  margin-bottom: 0.4rem !important;
}

.pd-radio .value span,
.pd-checkbox .value span {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  flex-wrap: wrap;
}

.pd-radio input[type="radio"],
.pd-checkbox input[type="checkbox"] {
  left: -4rem;
  position: absolute;
  top: -4rem;
}

.form-field.pd-radio .value input[type="radio"] + label,
.form-field.pd-checkbox .value input[type="checkbox"] + label {
  font-size: 1.6rem;
  line-height: 2.2rem;
  min-height: 2.4rem;
  padding-left: 4rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-grey-500);
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.form-field.pd-radio .value input[type="radio"]:checked + label,
.form-field.pd-checkbox .value input[type="checkbox"]:checked + label {
  color: var(--color-brand-blue);
}

.pd-radio input[type="radio"] + label::before,
.pd-checkbox input[type="checkbox"] + label::before {
  content: "";
  display: block;
  height: 2.4rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 2.4rem;
}

.pd-radio input[type="radio"] + label::after,
.pd-checkbox input[type="checkbox"] + label::after {
  content: "";
  display: block;
  height: 2rem;
  left: 0.2rem;
  position: absolute;
  top: 0.2rem;
  width: 2rem;
}

.pd-checkbox input[type="checkbox"] + label::before {
  background-color: var(--color-white-100);
  border: 1px solid var(--color-brand-blue);
  border-radius: 2px;
  transition: background-color 350ms ease-out, border-color 350ms ease-out;
}

.pd-checkbox input[type="checkbox"] + label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8047 0.528636C12.0651 0.788986 12.0651 1.2111 11.8047 1.47145L4.4714 8.80478C4.21106 9.06513 3.78894 9.06513 3.5286 8.80478L0.195262 5.47145C-0.0650874 5.2111 -0.0650874 4.78899 0.195262 4.52864C0.455612 4.26829 0.877722 4.26829 1.13807 4.52864L4 7.39057L10.8619 0.528636C11.1223 0.268287 11.5444 0.268287 11.8047 0.528636Z' fill='white'/%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1.4rem;
  opacity: 0;
  transition: opacity 350ms ease-out;
}

.pd-checkbox input[type="checkbox"]:checked + label::before {
  background-color: var(--color-white-100);
}

.pd-checkbox input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

.pd-checkbox input[type="checkbox"] + label::before {
  border-color: var(--color-brand-blue);
}

.pd-checkbox input[type="checkbox"]:checked + label::after {
  background-color: var(--color-brand-blue);
  border-color: var(--color-brand-blue);
}

/* Radio button specific styles */
.pd-radio input[type="radio"] + label::before {
  background-color: var(--color-white-100);
  border: 1px solid var(--color-brand-blue);
  border-radius: 50%;
  transition: background-color 350ms ease-out, border-color 350ms ease-out;
}

.pd-radio input[type="radio"] + label::after {
  background-color: var(--color-brand-blue);
  border-radius: 50%;
  height: 1.6rem;
  top: 0.4rem;
  left: 0.4rem;
  opacity: 0;
  transition: opacity 350ms ease-out;
  width: 1.6rem;
}

.pd-radio input[type="radio"]:checked + label::before {
  background-color: var(--color-white-100);
}

.pd-radio input[type="radio"]:checked + label::after {
  opacity: 1;
}

.form-field.pd-radio .value span {
  display: block;
}

/* Select box styles */
select {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -moz-appearance: none; /* Firefox */

  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
  background-color: var(--color-white-100);
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.23238 0.292893C1.6229 -0.0976311 2.25607 -0.0976311 2.64659 0.292893L7.93948 5.58579L13.2324 0.292893C13.6229 -0.0976311 14.2561 -0.0976311 14.6466 0.292893C15.0371 0.683417 15.0371 1.31658 14.6466 1.70711L8.64659 7.70711C8.25607 8.09763 7.6229 8.09763 7.23238 7.70711L1.23238 1.70711C0.841853 1.31658 0.841853 0.683417 1.23238 0.292893Z' fill='%23001871'/%3E%3C/svg%3E%0A");
  background-position: calc(100% - 24px) center;
  background-size: 14px;
  background-repeat: no-repeat;
  border: 1px solid var(--color-white-100);
  border-radius: 8px;
  color: var(--text-dark);
  cursor: pointer;
  font-size: 1.6rem;
  height: auto;
  font-weight: 600;
  line-height: 2.2rem;
  margin: 0;
  outline: none;
  padding: 1.6rem;
  position: relative;
  width: 100%;
  font-family: "Noto Sans Display", sans-serif;
}

select::-ms-expand {
  display: none;
}

select:hover {
  border-color: var(--color-brand-blue);
  color: var(--color-grey-500);
}

.form-field.error select {
  border-color: var(--text-error);
  color: var(--text-error);
}

.required label:first-child:after {
  content: " *" !important;
  color: var(--text-error) !important;
}

/* Submit button styles */
.submit {
  overflow: hidden;
}

.submit input[type="submit"],
input[type="submit"] {
  font-family: "Noto Sans Display", sans-serif;
  background-color: var(--color-brand-green);
  border: 0;
  color: #ffffff;
  cursor: pointer;
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.5rem;
  outline: none;
  padding: 1.5rem 5.6rem 1.5rem 1.5rem;
  width: auto;
  max-width: 100%;
  border-radius: 2px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.2929 4.29289C11.6834 3.90237 12.3166 3.90237 12.7071 4.29289L19.7071 11.2929C20.0976 11.6834 20.0976 12.3166 19.7071 12.7071L12.7071 19.7071C12.3166 20.0976 11.6834 20.0976 11.2929 19.7071C10.9024 19.3166 10.9024 18.6834 11.2929 18.2929L17.5858 12L11.2929 5.70711C10.9024 5.31658 10.9024 4.68342 11.2929 4.29289Z' fill='white'/%3E%3C/svg%3E%0A");
  background-position: calc(100% - 1.6rem) center;
  background-repeat: no-repeat;
  transition: background-color 350ms ease;
  margin-bottom: 6rem;
}

.submit input[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--color-brand-green-hover);
}

.multicheckbox {
  margin-bottom: 2.8rem;
}

.required label:first-child:after {
  content: "*" !important;
  color: red !important;
}
.required.no-label.form-field.pd-checkbox::after {
  content: "*" !important;
  color: red !important;
}