@randstad-design/orbit-multitheme/dist/assets/theme-randstad/bundles/forms.css

multitheme Front-end code based on Randstad Human Forward components

select:active, select:focus {
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
  border: 2px solid #2175d9;
  outline: none;
  padding-left: 18px; }

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

select.untouched {
  color: var(--color-brand-secondary-tint-60);
  fill: var(--color-brand-secondary-tint-60); }

.form-group__input select, .form-group__input select:active, .form-group__input select:focus {
  padding-right: 50px; }

select[disabled] {
  color: var(--color-brand-secondary-tint-80);
  fill: var(--color-brand-secondary-tint-80);
  background: #f7f7f7;
  pointer-events: none; }

.select-arrow.icon {
  color: #2175d9;
  pointer-events: none;
  right: 20px;
  top: 22px; }
  select:disabled + .select-arrow.icon {
    color: var(--color-brand-secondary-tint-80);
    fill: var(--color-brand-secondary-tint-80); }

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .form-group__input select {
    padding-right: 25px; }
  .select-arrow {
    display: none; } }

.form-group--selection-control .form-group__input + .form-group__input {
  margin-top: 15px; }
  @media (min-width: 941px) {
    .form-group--selection-control .form-group__input + .form-group__input {
      margin-top: 10px; } }

.form-group--selection-control .form-group__label {
  margin-bottom: 15px; }

.form-group--selection-control + .button {
  margin-top: 40px; }

.selection-control {
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  padding: 0 3px; }
  @media (min-width: 941px) {
    .selection-control {
      font-size: 18px;
      letter-spacing: 0;
      line-height: 30px; } }
  .selection-control__input {
    position: relative;
    top: 2px; }
    @media (min-width: 941px) {
      .selection-control__input {
        top: 3px; } }
  .selection-control__control {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 2px solid var(--color-gray-20);
    background: #fff;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s; }
  .selection-control input {
    opacity: 0;
    position: absolute; }
    .selection-control input:not(:disabled):not(:-moz-read-only):focus + .selection-control__control {
      border-color: var(--color-brand-primary); }
    .selection-control input:not(:disabled):not(:read-only):focus + .selection-control__control {
      border-color: var(--color-brand-primary); }
      .bg-variant-brand-primary .selection-control input:not(:disabled):not(:-moz-read-only):focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-primary .selection-control input:not(:disabled):not(:read-only):focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-secondary .selection-control input:not(:disabled):not(:-moz-read-only):focus + .selection-control__control {
        border-color: var(--color-brand-primary); }
      .bg-variant-brand-secondary .selection-control input:not(:disabled):not(:read-only):focus + .selection-control__control {
        border-color: var(--color-brand-primary); }
      .bg-variant-brand-tertiary .selection-control input:not(:disabled):not(:-moz-read-only):focus + .selection-control__control {
        border-color: var(--color-brand-primary); }
      .bg-variant-brand-tertiary .selection-control input:not(:disabled):not(:read-only):focus + .selection-control__control {
        border-color: var(--color-brand-primary); }
      .bg-variant-white .selection-control input:not(:disabled):not(:-moz-read-only):focus + .selection-control__control {
        border-color: var(--color-brand-primary); }
      .bg-variant-white .selection-control input:not(:disabled):not(:read-only):focus + .selection-control__control {
        border-color: var(--color-brand-primary); }
      .bg-variant-brand-quaternary .selection-control input:not(:disabled):not(:-moz-read-only):focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-quaternary .selection-control input:not(:disabled):not(:read-only):focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-quinary .selection-control input:not(:disabled):not(:-moz-read-only):focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-quinary .selection-control input:not(:disabled):not(:read-only):focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-senary .selection-control input:not(:disabled):not(:-moz-read-only):focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-senary .selection-control input:not(:disabled):not(:read-only):focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
    .selection-control input:focus + .selection-control__control {
      border-color: var(--color-brand-primary); }
      .bg-variant-brand-primary .selection-control input:focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-secondary .selection-control input:focus + .selection-control__control {
        border-color: var(--color-brand-primary); }
      .bg-variant-brand-tertiary .selection-control input:focus + .selection-control__control {
        border-color: var(--color-brand-primary); }
      .bg-variant-white .selection-control input:focus + .selection-control__control {
        border-color: var(--color-brand-primary); }
      .bg-variant-brand-quaternary .selection-control input:focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-quinary .selection-control input:focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
      .bg-variant-brand-senary .selection-control input:focus + .selection-control__control {
        border-color: var(--color-brand-secondary); }
  .selection-control:hover .selection-control__control {
    border-color: var(--color-brand-primary); }
    .bg-variant-brand-primary .selection-control:hover .selection-control__control {
      border-color: var(--color-brand-secondary); }
    .bg-variant-brand-secondary .selection-control:hover .selection-control__control {
      border-color: var(--color-brand-primary); }
    .bg-variant-brand-tertiary .selection-control:hover .selection-control__control {
      border-color: var(--color-brand-primary); }
    .bg-variant-white .selection-control:hover .selection-control__control {
      border-color: var(--color-brand-primary); }
    .bg-variant-brand-quaternary .selection-control:hover .selection-control__control {
      border-color: var(--color-brand-secondary); }
    .bg-variant-brand-quinary .selection-control:hover .selection-control__control {
      border-color: var(--color-brand-secondary); }
    .bg-variant-brand-senary .selection-control:hover .selection-control__control {
      border-color: var(--color-brand-secondary); }
  .selection-control__label {
    cursor: pointer;
    margin-left: 10px; }
    .meta-content .selection-control__label {
      word-break: break-word;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto; }

.selection-control--disabled,
.selection-control--disabled a {
  color: var(--color-brand-secondary-tint-80);
  pointer-events: none; }
  .bg-variant-brand-primary .selection-control--disabled, .bg-variant-brand-primary
  .selection-control--disabled a {
    color: var(--color-white); }
  .bg-variant-brand-secondary .selection-control--disabled, .bg-variant-brand-secondary
  .selection-control--disabled a {
    color: var(--color-white); }
  .bg-variant-brand-tertiary .selection-control--disabled, .bg-variant-brand-tertiary
  .selection-control--disabled a {
    color: var(--color-brand-secondary-alpha-70); }
  .bg-variant-white .selection-control--disabled, .bg-variant-white
  .selection-control--disabled a {
    color: var(--color-brand-secondary-alpha-70); }
  .bg-variant-brand-quaternary .selection-control--disabled, .bg-variant-brand-quaternary
  .selection-control--disabled a {
    color: var(--color-brand-secondary); }
  .bg-variant-brand-quinary .selection-control--disabled, .bg-variant-brand-quinary
  .selection-control--disabled a {
    color: var(--color-brand-secondary-shade-180); }
  .bg-variant-brand-senary .selection-control--disabled, .bg-variant-brand-senary
  .selection-control--disabled a {
    color: var(--color-brand-secondary-alpha-70); }
  .selection-control--disabled .selection-control__control,
  .selection-control--disabled a .selection-control__control {
    background: #f7f7f7;
    border-color: #d7d7d7; }
  .selection-control--disabled input:checked + .selection-control__control,
  .selection-control--disabled a input:checked + .selection-control__control {
    border-color: #f7f7f7; }
  .selection-control--disabled a,
  .selection-control--disabled a a {
    pointer-events: all;
    text-decoration: underline; }

.form-group--error .selection-control__control {
  background: var(--color-ui-negative-5);
  border-color: var(--color-ui-negative); }
  .bg-variant-brand-primary .form-group--error .selection-control__control {
    background: var(--color-white);
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-secondary .form-group--error .selection-control__control {
    background: var(--color-ui-warning-10);
    border-color: var(--color-ui-warning);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-tertiary .form-group--error .selection-control__control {
    background: var(--color-ui-negative-5);
    border-color: var(--color-ui-negative);
    color: var(--color-brand-secondary); }
  .bg-variant-white .form-group--error .selection-control__control {
    background: var(--color-ui-negative-5);
    border-color: var(--color-ui-negative);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-quaternary .form-group--error .selection-control__control {
    background: var(--color-white);
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-quinary .form-group--error .selection-control__control {
    background: var(--color-white);
    border-color: var(--color-brand-secondary-shade-180);
    color: var(--color-brand-secondary); }
  .bg-variant-brand-senary .form-group--error .selection-control__control {
    background: var(--color-white);
    border-color: var(--color-brand-secondary);
    color: var(--color-brand-secondary); }

.selection-control--checkbox svg {
  margin-top: -1px;
  opacity: 0; }

.selection-control--checkbox polyline {
  fill: transparent;
  stroke: #fff;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  -webkit-transition: stroke-dashoffset 0.5s ease;
  transition: stroke-dashoffset 0.5s ease; }

.selection-control--checkbox input:checked + .selection-control__control {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary); }
  .bg-variant-brand-primary .selection-control--checkbox input:checked + .selection-control__control {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary); }
  .bg-variant-brand-secondary .selection-control--checkbox input:checked + .selection-control__control {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary); }
  .bg-variant-brand-tertiary .selection-control--checkbox input:checked + .selection-control__control {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary); }
  .bg-variant-white .selection-control--checkbox input:checked + .selection-control__control {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary); }
  .bg-variant-brand-quaternary .selection-control--checkbox input:checked + .selection-control__control {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary); }
  .bg-variant-brand-quinary .selection-control--checkbox input:checked + .selection-control__control {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary); }
  .bg-variant-brand-senary .selection-control--checkbox input:checked + .selection-control__control {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary); }
  .selection-control--checkbox input:checked + .selection-control__control svg {
    opacity: 1; }
  .selection-control--checkbox input:checked + .selection-control__control polyline {
    stroke-dashoffset: 0; }

.selection-control--checkbox input:checked:focus + .selection-control__control,
.selection-control--checkbox input:checked:hover + .selection-control__control {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 1px; }
  .bg-variant-brand-primary .selection-control--checkbox input:checked:focus + .selection-control__control, .bg-variant-brand-primary
  .selection-control--checkbox input:checked:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-secondary); }
  .bg-variant-brand-secondary .selection-control--checkbox input:checked:focus + .selection-control__control, .bg-variant-brand-secondary
  .selection-control--checkbox input:checked:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-primary); }
  .bg-variant-brand-tertiary .selection-control--checkbox input:checked:focus + .selection-control__control, .bg-variant-brand-tertiary
  .selection-control--checkbox input:checked:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-primary); }
  .bg-variant-white .selection-control--checkbox input:checked:focus + .selection-control__control, .bg-variant-white
  .selection-control--checkbox input:checked:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-primary); }
  .bg-variant-brand-quaternary .selection-control--checkbox input:checked:focus + .selection-control__control, .bg-variant-brand-quaternary
  .selection-control--checkbox input:checked:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-secondary); }
  .bg-variant-brand-quinary .selection-control--checkbox input:checked:focus + .selection-control__control, .bg-variant-brand-quinary
  .selection-control--checkbox input:checked:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-secondary); }
  .bg-variant-brand-senary .selection-control--checkbox input:checked:focus + .selection-control__control, .bg-variant-brand-senary
  .selection-control--checkbox input:checked:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-secondary); }

.selection-control--checkbox a {
  text-decoration: underline;
  -webkit-text-decoration: underline; }

.selection-control--indeterminate input + .selection-control__control svg {
  opacity: 0;
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; }

.selection-control--indeterminate .selection-control__control {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary); }
  .bg-variant-brand-primary .selection-control--indeterminate .selection-control__control {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary); }
  .bg-variant-brand-secondary .selection-control--indeterminate .selection-control__control {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary); }
  .bg-variant-brand-tertiary .selection-control--indeterminate .selection-control__control {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary); }
  .bg-variant-white .selection-control--indeterminate .selection-control__control {
    background: var(--color-brand-primary);
    border-color: var(--color-brand-primary); }
  .bg-variant-brand-quaternary .selection-control--indeterminate .selection-control__control {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary); }
  .bg-variant-brand-quinary .selection-control--indeterminate .selection-control__control {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary); }
  .bg-variant-brand-senary .selection-control--indeterminate .selection-control__control {
    background: var(--color-brand-secondary);
    border-color: var(--color-brand-secondary); }

.selection-control--indeterminate--animate input + .selection-control__control svg {
  opacity: 1;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; }

.selection-control--indeterminate input:focus + .selection-control__control,
.selection-control--indeterminate input:hover + .selection-control__control {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 1px; }
  .bg-variant-brand-primary .selection-control--indeterminate input:focus + .selection-control__control, .bg-variant-brand-primary
  .selection-control--indeterminate input:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-secondary); }
  .bg-variant-brand-secondary .selection-control--indeterminate input:focus + .selection-control__control, .bg-variant-brand-secondary
  .selection-control--indeterminate input:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-primary); }
  .bg-variant-brand-tertiary .selection-control--indeterminate input:focus + .selection-control__control, .bg-variant-brand-tertiary
  .selection-control--indeterminate input:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-primary); }
  .bg-variant-white .selection-control--indeterminate input:focus + .selection-control__control, .bg-variant-white
  .selection-control--indeterminate input:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-primary); }
  .bg-variant-brand-quaternary .selection-control--indeterminate input:focus + .selection-control__control, .bg-variant-brand-quaternary
  .selection-control--indeterminate input:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-secondary); }
  .bg-variant-brand-quinary .selection-control--indeterminate input:focus + .selection-control__control, .bg-variant-brand-quinary
  .selection-control--indeterminate input:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-secondary); }
  .bg-variant-brand-senary .selection-control--indeterminate input:focus + .selection-control__control, .bg-variant-brand-senary
  .selection-control--indeterminate input:hover + .selection-control__control {
    outline: 2px solid var(--color-brand-secondary); }

.selection-control--indeterminate .selection-control__control--indeterminate {
  background: #fff;
  border-radius: 1.5px;
  height: 3px;
  left: 4px;
  pointer-events: none;
  top: 11px;
  width: 16px; }
  @media (min-width: 941px) {
    .selection-control--indeterminate .selection-control__control--indeterminate {
      bottom: 13px; } }

.selection-control--checkbox.selection-control--disabled .selection-control__control {
  border-color: var(--color-gray-20); }

.selection-control--checkbox.selection-control--disabled input:checked + .selection-control__control {
  background: var(--color-gray-20);
  border-color: var(--color-gray-20); }

.selection-control--checkbox.selection-control--disabled.selection-control--indeterminate .selection-control__control {
  background: var(--color-gray-20); }

.selection-control--radio-button .selection-control__control {
  border-radius: 50%; }
  .selection-control--radio-button .selection-control__control::after {
    content: '';
    display: block;
    -webkit-transform: scale(0);
    transform: scale(0); }

.selection-control--radio-button input:checked + .selection-control__control,
.bg-brand--gradient-orange .selection-control--radio-button input:checked + .selection-control__control {
  position: relative;
  background-color: #fff; }
  .selection-control--radio-button input:checked + .selection-control__control::after,
  .bg-brand--gradient-orange .selection-control--radio-button input:checked + .selection-control__control::after {
    background: var(--color-brand-primary);
    border-radius: 50%;
    height: 12px;
    left: 4px;
    opacity: 1;
    position: absolute;
    top: 4px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
    width: 12px; }
    .bg-variant-brand-primary .selection-control--radio-button input:checked + .selection-control__control::after, .bg-variant-brand-primary
    .bg-brand--gradient-orange .selection-control--radio-button input:checked + .selection-control__control::after {
      background: var(--color-brand-secondary); }
    .bg-variant-brand-secondary .selection-control--radio-button input:checked + .selection-control__control::after, .bg-variant-brand-secondary
    .bg-brand--gradient-orange .selection-control--radio-button input:checked + .selection-control__control::after {
      background: var(--color-brand-primary); }
    .bg-variant-brand-tertiary .selection-control--radio-button input:checked + .selection-control__control::after, .bg-variant-brand-tertiary
    .bg-brand--gradient-orange .selection-control--radio-button input:checked + .selection-control__control::after {
      background: var(--color-brand-primary); }
    .bg-variant-white .selection-control--radio-button input:checked + .selection-control__control::after, .bg-variant-white
    .bg-brand--gradient-orange .selection-control--radio-button input:checked + .selection-control__control::after {
      background: var(--color-brand-primary); }
    .bg-variant-brand-quaternary .selection-control--radio-button input:checked + .selection-control__control::after, .bg-variant-brand-quaternary
    .bg-brand--gradient-orange .selection-control--radio-button input:checked + .selection-control__control::after {
      background: var(--color-brand-secondary); }
    .bg-variant-brand-quinary .selection-control--radio-button input:checked + .selection-control__control::after, .bg-variant-brand-quinary
    .bg-brand--gradient-orange .selection-control--radio-button input:checked + .selection-control__control::after {
      background: var(--color-brand-secondary); }
    .bg-variant-brand-senary .selection-control--radio-button input:checked + .selection-control__control::after, .bg-variant-brand-senary
    .bg-brand--gradient-orange .selection-control--radio-button input:checked + .selection-control__control::after {
      background: var(--color-brand-secondary); }

@media (max-width: 940px) {
  .selection-control--radio-button .selection-control__input {
    top: 1px; } }

.selection-control--radio-button.selection-control--disabled input:checked + .selection-control__control {
  background: #f7f7f7;
  border-color: #d7d7d7; }
  .selection-control--radio-button.selection-control--disabled input:checked + .selection-control__control::after {
    background: #d7d7d7; }

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea, select {
  font-size: 16px;
  letter-spacing: 0;
  line-height: 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  border: solid 1px #d7d7d7;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: none;
  color: #0f1941;
  cursor: initial;
  font-family: Graphik, Tahoma, "sans-serif";
  margin: 0;
  min-height: 60px;
  padding: 15px 19px 18px;
  text-overflow: ellipsis;
  width: 100%; }
  @media (min-width: 941px) {
    input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea, select {
      font-size: 18px;
      letter-spacing: 0;
      line-height: 30px; } }
  input[type="color"]::-webkit-input-placeholder, input[type="date"]::-webkit-input-placeholder, input[type="datetime"]::-webkit-input-placeholder, input[type="datetime-local"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="month"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="text"]::-webkit-input-placeholder, input[type="time"]::-webkit-input-placeholder, input[type="url"]::-webkit-input-placeholder, input[type="week"]::-webkit-input-placeholder, input:not([type])::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {
    color: var(--color-brand-secondary-tint-60);
    fill: var(--color-brand-secondary-tint-60);
    opacity: 1; }
  input[type="color"]::-moz-placeholder, input[type="date"]::-moz-placeholder, input[type="datetime"]::-moz-placeholder, input[type="datetime-local"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="month"]::-moz-placeholder, input[type="number"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="search"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="time"]::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="week"]::-moz-placeholder, input:not([type])::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
    color: var(--color-brand-secondary-tint-60);
    fill: var(--color-brand-secondary-tint-60);
    opacity: 1; }
  input[type="color"]:-ms-input-placeholder, input[type="date"]:-ms-input-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="datetime-local"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="month"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="time"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="week"]:-ms-input-placeholder, input:not([type]):-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {
    color: var(--color-brand-secondary-tint-60);
    fill: var(--color-brand-secondary-tint-60);
    opacity: 1; }
  input[type="color"]::-ms-input-placeholder, input[type="date"]::-ms-input-placeholder, input[type="datetime"]::-ms-input-placeholder, input[type="datetime-local"]::-ms-input-placeholder, input[type="email"]::-ms-input-placeholder, input[type="month"]::-ms-input-placeholder, input[type="number"]::-ms-input-placeholder, input[type="password"]::-ms-input-placeholder, input[type="search"]::-ms-input-placeholder, input[type="tel"]::-ms-input-placeholder, input[type="text"]::-ms-input-placeholder, input[type="time"]::-ms-input-placeholder, input[type="url"]::-ms-input-placeholder, input[type="week"]::-ms-input-placeholder, input:not([type])::-ms-input-placeholder, textarea::-ms-input-placeholder, select::-ms-input-placeholder {
    color: var(--color-brand-secondary-tint-60);
    fill: var(--color-brand-secondary-tint-60);
    opacity: 1; }
  input[type="color"]::placeholder, input[type="date"]::placeholder, input[type="datetime"]::placeholder, input[type="datetime-local"]::placeholder, input[type="email"]::placeholder, input[type="month"]::placeholder, input[type="number"]::placeholder, input[type="password"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="text"]::placeholder, input[type="time"]::placeholder, input[type="url"]::placeholder, input[type="week"]::placeholder, input:not([type])::placeholder, textarea::placeholder, select::placeholder {
    color: var(--color-brand-secondary-tint-60);
    fill: var(--color-brand-secondary-tint-60);
    opacity: 1; }
  input[type="color"]:-ms-input-placeholder, input[type="date"]:-ms-input-placeholder, input[type="datetime"]:-ms-input-placeholder, input[type="datetime-local"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="month"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="search"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="text"]:-ms-input-placeholder, input[type="time"]:-ms-input-placeholder, input[type="url"]:-ms-input-placeholder, input[type="week"]:-ms-input-placeholder, input:not([type]):-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {
    color: var(--color-brand-secondary-tint-60);
    fill: var(--color-brand-secondary-tint-60);
    opacity: 1; }
  input[type="color"]::-ms-clear, input[type="date"]::-ms-clear, input[type="datetime"]::-ms-clear, input[type="datetime-local"]::-ms-clear, input[type="email"]::-ms-clear, input[type="month"]::-ms-clear, input[type="number"]::-ms-clear, input[type="password"]::-ms-clear, input[type="search"]::-ms-clear, input[type="tel"]::-ms-clear, input[type="text"]::-ms-clear, input[type="time"]::-ms-clear, input[type="url"]::-ms-clear, input[type="week"]::-ms-clear, input:not([type])::-ms-clear, textarea::-ms-clear, select::-ms-clear {
    display: none; }
  input[type="color"]:active, input[type="color"]:focus, input[type="date"]:active, input[type="date"]:focus, input[type="datetime"]:active, input[type="datetime"]:focus, input[type="datetime-local"]:active, input[type="datetime-local"]:focus, input[type="email"]:active, input[type="email"]:focus, input[type="month"]:active, input[type="month"]:focus, input[type="number"]:active, input[type="number"]:focus, input[type="password"]:active, input[type="password"]:focus, input[type="search"]:active, input[type="search"]:focus, input[type="tel"]:active, input[type="tel"]:focus, input[type="text"]:active, input[type="text"]:focus, input[type="time"]:active, input[type="time"]:focus, input[type="url"]:active, input[type="url"]:focus, input[type="week"]:active, input[type="week"]:focus, input:not([type]):active, input:not([type]):focus, textarea:active, textarea:focus, select:active, select:focus {
    -webkit-transition: border-color 0.2s;
    transition: border-color 0.2s;
    border-color: var(--color-brand-primary);
    border-style: solid;
    border-width: 2px;
    outline: none;
    padding: 14px 18px 17px; }
    .bg-variant-brand-primary input[type="color"]:active, .bg-variant-brand-primary input[type="color"]:focus, .bg-variant-brand-primary input[type="date"]:active, .bg-variant-brand-primary input[type="date"]:focus, .bg-variant-brand-primary input[type="datetime"]:active, .bg-variant-brand-primary input[type="datetime"]:focus, .bg-variant-brand-primary input[type="datetime-local"]:active, .bg-variant-brand-primary input[type="datetime-local"]:focus, .bg-variant-brand-primary input[type="email"]:active, .bg-variant-brand-primary input[type="email"]:focus, .bg-variant-brand-primary input[type="month"]:active, .bg-variant-brand-primary input[type="month"]:focus, .bg-variant-brand-primary input[type="number"]:active, .bg-variant-brand-primary input[type="number"]:focus, .bg-variant-brand-primary input[type="password"]:active, .bg-variant-brand-primary input[type="password"]:focus, .bg-variant-brand-primary input[type="search"]:active, .bg-variant-brand-primary input[type="search"]:focus, .bg-variant-brand-primary input[type="tel"]:active, .bg-variant-brand-primary input[type="tel"]:focus, .bg-variant-brand-primary input[type="text"]:active, .bg-variant-brand-primary input[type="text"]:focus, .bg-variant-brand-primary input[type="time"]:active, .bg-variant-brand-primary input[type="time"]:focus, .bg-variant-brand-primary input[type="url"]:active, .bg-variant-brand-primary input[type="url"]:focus, .bg-variant-brand-primary input[type="week"]:active, .bg-variant-brand-primary input[type="week"]:focus, .bg-variant-brand-primary input:not([type]):active, .bg-variant-brand-primary input:not([type]):focus, .bg-variant-brand-primary textarea:active, .bg-variant-brand-primary textarea:focus, .bg-variant-brand-primary select:active, .bg-variant-brand-primary select:focus {
      border-color: var(--color-brand-secondary); }
    .bg-variant-brand-secondary input[type="color"]:active, .bg-variant-brand-secondary input[type="color"]:focus, .bg-variant-brand-secondary input[type="date"]:active, .bg-variant-brand-secondary input[type="date"]:focus, .bg-variant-brand-secondary input[type="datetime"]:active, .bg-variant-brand-secondary input[type="datetime"]:focus, .bg-variant-brand-secondary input[type="datetime-local"]:active, .bg-variant-brand-secondary input[type="datetime-local"]:focus, .bg-variant-brand-secondary input[type="email"]:active, .bg-variant-brand-secondary input[type="email"]:focus, .bg-variant-brand-secondary input[type="month"]:active, .bg-variant-brand-secondary input[type="month"]:focus, .bg-variant-brand-secondary input[type="number"]:active, .bg-variant-brand-secondary input[type="number"]:focus, .bg-variant-brand-secondary input[type="password"]:active, .bg-variant-brand-secondary input[type="password"]:focus, .bg-variant-brand-secondary input[type="search"]:active, .bg-variant-brand-secondary input[type="search"]:focus, .bg-variant-brand-secondary input[type="tel"]:active, .bg-variant-brand-secondary input[type="tel"]:focus, .bg-variant-brand-secondary input[type="text"]:active, .bg-variant-brand-secondary input[type="text"]:focus, .bg-variant-brand-secondary input[type="time"]:active, .bg-variant-brand-secondary input[type="time"]:focus, .bg-variant-brand-secondary input[type="url"]:active, .bg-variant-brand-secondary input[type="url"]:focus, .bg-variant-brand-secondary input[type="week"]:active, .bg-variant-brand-secondary input[type="week"]:focus, .bg-variant-brand-secondary input:not([type]):active, .bg-variant-brand-secondary input:not([type]):focus, .bg-variant-brand-secondary textarea:active, .bg-variant-brand-secondary textarea:focus, .bg-variant-brand-secondary select:active, .bg-variant-brand-secondary select:focus {
      border-color: var(--color-brand-primary); }
    .bg-variant-brand-tertiary input[type="color"]:active, .bg-variant-brand-tertiary input[type="color"]:focus, .bg-variant-brand-tertiary input[type="date"]:active, .bg-variant-brand-tertiary input[type="date"]:focus, .bg-variant-brand-tertiary input[type="datetime"]:active, .bg-variant-brand-tertiary input[type="datetime"]:focus, .bg-variant-brand-tertiary input[type="datetime-local"]:active, .bg-variant-brand-tertiary input[type="datetime-local"]:focus, .bg-variant-brand-tertiary input[type="email"]:active, .bg-variant-brand-tertiary input[type="email"]:focus, .bg-variant-brand-tertiary input[type="month"]:active, .bg-variant-brand-tertiary input[type="month"]:focus, .bg-variant-brand-tertiary input[type="number"]:active, .bg-variant-brand-tertiary input[type="number"]:focus, .bg-variant-brand-tertiary input[type="password"]:active, .bg-variant-brand-tertiary input[type="password"]:focus, .bg-variant-brand-tertiary input[type="search"]:active, .bg-variant-brand-tertiary input[type="search"]:focus, .bg-variant-brand-tertiary input[type="tel"]:active, .bg-variant-brand-tertiary input[type="tel"]:focus, .bg-variant-brand-tertiary input[type="text"]:active, .bg-variant-brand-tertiary input[type="text"]:focus, .bg-variant-brand-tertiary input[type="time"]:active, .bg-variant-brand-tertiary input[type="time"]:focus, .bg-variant-brand-tertiary input[type="url"]:active, .bg-variant-brand-tertiary input[type="url"]:focus, .bg-variant-brand-tertiary input[type="week"]:active, .bg-variant-brand-tertiary input[type="week"]:focus, .bg-variant-brand-tertiary input:not([type]):active, .bg-variant-brand-tertiary input:not([type]):focus, .bg-variant-brand-tertiary textarea:active, .bg-variant-brand-tertiary textarea:focus, .bg-variant-brand-tertiary select:active, .bg-variant-brand-tertiary select:focus {
      border-color: var(--color-brand-primary); }
    .bg-variant-white input[type="color"]:active, .bg-variant-white input[type="color"]:focus, .bg-variant-white input[type="date"]:active, .bg-variant-white input[type="date"]:focus, .bg-variant-white input[type="datetime"]:active, .bg-variant-white input[type="datetime"]:focus, .bg-variant-white input[type="datetime-local"]:active, .bg-variant-white input[type="datetime-local"]:focus, .bg-variant-white input[type="email"]:active, .bg-variant-white input[type="email"]:focus, .bg-variant-white input[type="month"]:active, .bg-variant-white input[type="month"]:focus, .bg-variant-white input[type="number"]:active, .bg-variant-white input[type="number"]:focus, .bg-variant-white input[type="password"]:active, .bg-variant-white input[type="password"]:focus, .bg-variant-white input[type="search"]:active, .bg-variant-white input[type="search"]:focus, .bg-variant-white input[type="tel"]:active, .bg-variant-white input[type="tel"]:focus, .bg-variant-white input[type="text"]:active, .bg-variant-white input[type="text"]:focus, .bg-variant-white input[type="time"]:active, .bg-variant-white input[type="time"]:focus, .bg-variant-white input[type="url"]:active, .bg-variant-white input[type="url"]:focus, .bg-variant-white input[type="week"]:active, .bg-variant-white input[type="week"]:focus, .bg-variant-white input:not([type]):active, .bg-variant-white input:not([type]):focus, .bg-variant-white textarea:active, .bg-variant-white textarea:focus, .bg-variant-white select:active, .bg-variant-white select:focus {
      border-color: var(--color-brand-primary); }
    .bg-variant-brand-quaternary input[type="color"]:active, .bg-variant-brand-quaternary input[type="color"]:focus, .bg-variant-brand-quaternary input[type="date"]:active, .bg-variant-brand-quaternary input[type="date"]:focus, .bg-variant-brand-quaternary input[type="datetime"]:active, .bg-variant-brand-quaternary input[type="datetime"]:focus, .bg-variant-brand-quaternary input[type="datetime-local"]:active, .bg-variant-brand-quaternary input[type="datetime-local"]:focus, .bg-variant-brand-quaternary input[type="email"]:active, .bg-variant-brand-quaternary input[type="email"]:focus, .bg-variant-brand-quaternary input[type="month"]:active, .bg-variant-brand-quaternary input[type="month"]:focus, .bg-variant-brand-quaternary input[type="number"]:active, .bg-variant-brand-quaternary input[type="number"]:focus, .bg-variant-brand-quaternary input[type="password"]:active, .bg-variant-brand-quaternary input[type="password"]:focus, .bg-variant-brand-quaternary input[type="search"]:active, .bg-variant-brand-quaternary input[type="search"]:focus, .bg-variant-brand-quaternary input[type="tel"]:active, .bg-variant-brand-quaternary input[type="tel"]:focus, .bg-variant-brand-quaternary input[type="text"]:active, .bg-variant-brand-quaternary input[type="text"]:focus, .bg-variant-brand-quaternary input[type="time"]:active, .bg-variant-brand-quaternary input[type="time"]:focus, .bg-variant-brand-quaternary input[type="url"]:active, .bg-variant-brand-quaternary input[type="url"]:focus, .bg-variant-brand-quaternary input[type="week"]:active, .bg-variant-brand-quaternary input[type="week"]:focus, .bg-variant-brand-quaternary input:not([type]):active, .bg-variant-brand-quaternary input:not([type]):focus, .bg-variant-brand-quaternary textarea:active, .bg-variant-brand-quaternary textarea:focus, .bg-variant-brand-quaternary select:active, .bg-variant-brand-quaternary select:focus {
      border-color: var(--color-brand-secondary); }
    .bg-variant-brand-quinary input[type="color"]:active, .bg-variant-brand-quinary input[type="color"]:focus, .bg-variant-brand-quinary input[type="date"]:active, .bg-variant-brand-quinary input[type="date"]:focus, .bg-variant-brand-quinary input[type="datetime"]:active, .bg-variant-brand-quinary input[type="datetime"]:focus, .bg-variant-brand-quinary input[type="datetime-local"]:active, .bg-variant-brand-quinary input[type="datetime-local"]:focus, .bg-variant-brand-quinary input[type="email"]:active, .bg-variant-brand-quinary input[type="email"]:focus, .bg-variant-brand-quinary input[type="month"]:active, .bg-variant-brand-quinary input[type="month"]:focus, .bg-variant-brand-quinary input[type="number"]:active, .bg-variant-brand-quinary input[type="number"]:focus, .bg-variant-brand-quinary input[type="password"]:active, .bg-variant-brand-quinary input[type="password"]:focus, .bg-variant-brand-quinary input[type="search"]:active, .bg-variant-brand-quinary input[type="search"]:focus, .bg-variant-brand-quinary input[type="tel"]:active, .bg-variant-brand-quinary input[type="tel"]:focus, .bg-variant-brand-quinary input[type="text"]:active, .bg-variant-brand-quinary input[type="text"]:focus, .bg-variant-brand-quinary input[type="time"]:active, .bg-variant-brand-quinary input[type="time"]:focus, .bg-variant-brand-quinary input[type="url"]:active, .bg-variant-brand-quinary input[type="url"]:focus, .bg-variant-brand-quinary input[type="week"]:active, .bg-variant-brand-quinary input[type="week"]:focus, .bg-variant-brand-quinary input:not([type]):active, .bg-variant-brand-quinary input:not([type]):focus, .bg-variant-brand-quinary textarea:active, .bg-variant-brand-quinary textarea:focus, .bg-variant-brand-quinary select:active, .bg-variant-brand-quinary select:focus {
      border-color: var(--color-brand-secondary); }
    .bg-variant-brand-senary input[type="color"]:active, .bg-variant-brand-senary input[type="color"]:focus, .bg-variant-brand-senary input[type="date"]:active, .bg-variant-brand-senary input[type="date"]:focus, .bg-variant-brand-senary input[type="datetime"]:active, .bg-variant-brand-senary input[type="datetime"]:focus, .bg-variant-brand-senary input[type="datetime-local"]:active, .bg-variant-brand-senary input[type="datetime-local"]:focus, .bg-variant-brand-senary input[type="email"]:active, .bg-variant-brand-senary input[type="email"]:focus, .bg-variant-brand-senary input[type="month"]:active, .bg-variant-brand-senary input[type="month"]:focus, .bg-variant-brand-senary input[type="number"]:active, .bg-variant-brand-senary input[type="number"]:focus, .bg-variant-brand-senary input[type="password"]:active, .bg-variant-brand-senary input[type="password"]:focus, .bg-variant-brand-senary input[type="search"]:active, .bg-variant-brand-senary input[type="search"]:focus, .bg-variant-brand-senary input[type="tel"]:active, .bg-variant-brand-senary input[type="tel"]:focus, .bg-variant-brand-senary input[type="text"]:active, .bg-variant-brand-senary input[type="text"]:focus, .bg-variant-brand-senary input[type="time"]:active, .bg-variant-brand-senary input[type="time"]:focus, .bg-variant-brand-senary input[type="url"]:active, .bg-variant-brand-senary input[type="url"]:focus, .bg-variant-brand-senary input[type="week"]:active, .bg-variant-brand-senary input[type="week"]:focus, .bg-variant-brand-senary input:not([type]):active, .bg-variant-brand-senary input:not([type]):focus, .bg-variant-brand-senary textarea:active, .bg-variant-brand-senary textarea:focus, .bg-variant-brand-senary select:active, .bg-variant-brand-senary select:focus {
      border-color: var(--color-brand-secondary); }
  input[type="color"]:-moz-read-only:not(select):not(.flatpickr), input[type="color"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="color"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="date"]:-moz-read-only:not(select):not(.flatpickr), input[type="date"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="date"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="datetime"]:-moz-read-only:not(select):not(.flatpickr), input[type="datetime"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="datetime"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="datetime-local"]:-moz-read-only:not(select):not(.flatpickr), input[type="datetime-local"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="datetime-local"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="email"]:-moz-read-only:not(select):not(.flatpickr), input[type="email"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="email"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="month"]:-moz-read-only:not(select):not(.flatpickr), input[type="month"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="month"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="number"]:-moz-read-only:not(select):not(.flatpickr), input[type="number"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="number"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="password"]:-moz-read-only:not(select):not(.flatpickr), input[type="password"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="password"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="search"]:-moz-read-only:not(select):not(.flatpickr), input[type="search"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="search"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="tel"]:-moz-read-only:not(select):not(.flatpickr), input[type="tel"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="tel"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="text"]:-moz-read-only:not(select):not(.flatpickr), input[type="text"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="text"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="time"]:-moz-read-only:not(select):not(.flatpickr), input[type="time"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="time"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="url"]:-moz-read-only:not(select):not(.flatpickr), input[type="url"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="url"]:-moz-read-only:not(select):not(.flatpickr):focus, input[type="week"]:-moz-read-only:not(select):not(.flatpickr), input[type="week"]:-moz-read-only:not(select):not(.flatpickr):active, input[type="week"]:-moz-read-only:not(select):not(.flatpickr):focus, input:not([type]):-moz-read-only:not(select):not(.flatpickr), input:not([type]):-moz-read-only:not(select):not(.flatpickr):active, input:not([type]):-moz-read-only:not(select):not(.flatpickr):focus, textarea:-moz-read-only:not(select):not(.flatpickr), textarea:-moz-read-only:not(select):not(.flatpickr):active, textarea:-moz-read-only:not(select):not(.flatpickr):focus, select:-moz-read-only:not(select):not(.flatpickr), select:-moz-read-only:not(select):not(.flatpickr):active, select:-moz-read-only:not(select):not(.flatpickr):focus {
    color: var(--color-brand-secondary-tint-80);
    fill: var(--color-brand-secondary-tint-80);
    background: #f7f7f7;
    border: 1px solid #d7d7d7;
    opacity: 1;
    /* required on iOS */
    outline: none;
    pointer-events: none; }
  input[type="color"]:read-only:not(select):not(.flatpickr), input[type="color"]:read-only:not(select):not(.flatpickr):active, input[type="color"]:read-only:not(select):not(.flatpickr):focus, input[type="color"][disabled], input[type="color"][disabled]:active, input[type="color"][disabled]:focus, input[type="date"]:read-only:not(select):not(.flatpickr), input[type="date"]:read-only:not(select):not(.flatpickr):active, input[type="date"]:read-only:not(select):not(.flatpickr):focus, input[type="date"][disabled], input[type="date"][disabled]:active, input[type="date"][disabled]:focus, input[type="datetime"]:read-only:not(select):not(.flatpickr), input[type="datetime"]:read-only:not(select):not(.flatpickr):active, input[type="datetime"]:read-only:not(select):not(.flatpickr):focus, input[type="datetime"][disabled], input[type="datetime"][disabled]:active, input[type="datetime"][disabled]:focus, input[type="datetime-local"]:read-only:not(select):not(.flatpickr), input[type="datetime-local"]:read-only:not(select):not(.flatpickr):active, input[type="datetime-local"]:read-only:not(select):not(.flatpickr):focus, input[type="datetime-local"][disabled], input[type="datetime-local"][disabled]:active, input[type="datetime-local"][disabled]:focus, input[type="email"]:read-only:not(sele