/**
 * Variables
 */

/* Breakpoints */

/* Specific breakpoint for global & dropdown navigation */

:root {

  /* Brand colors */

  /* Filters - Used for adjusting icon color. Generated using `npm run color-to-filter -- <options>`. */

  /* Typography */ /* 32px */ /* 24px */ /* 20px */ /* 18px - Lede */ /* 16px - Body */ /* 14px */ /* 12px - Sub, Caption */ /* 48px - Headline */ /* 40px - H1 */ /* 32px - H2 */ /* 24px - H3 */ /* 18px - H4 */ /* 16px - H5 */ /* 14px - H6 */ /* 1.6 x font size */ /* 1.2 x font size */ /* 14px always */

  /* Spacing */ /* 4px */ /* 8px */ /* 12px */ /* 16px */ /* 24px */ /* 32px */ /* 40px */ /* 48px */ /* 56px */ /* 64px */ /* 72px */ /* 80px */ /* 88px */

  /* Layout */

  /* Ratios */ /* 100%:56.25% = 16:9 */

  /* Utility */
}

@media (max-width: 719px) {
  :root { /* 24px */ /* 20px */ /* 18px */ /* 16px - Lede */ /* 14px - Body */ /* 12px */ /* 10px - Sub, Caption */ /* 36px - Headline */ /* 30px - H1 */ /* 24px - H2 */ /* 20px - H3 */ /* 18px - H4 */ /* 16px - H5 */ /* 14px - H6 */
  }
}

:root {

  /* Brand colors */

  /* Alert Colors */

  /* Design */

  /* Typography */ /* 10px */ /* 40px */

  /* Form */

  /* Header */

  /* Spacing Extra */

  /* Heading Sizes Extra */ /* 20px - H3 Tiles large to x-large */

  /* Tiles */
}

/**
 * Form
 *
 * Style guide: form
 */

.form__item {
  margin-bottom: 1.5rem;
}

/**
 * Text Input
 *
 * .error - Error state
 * .success - Success state
 *
 * Markup: input-text.twig
 *
 * Style guide: form.text-input
 */

.input__text {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  .input__text {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  .input__text {
  font-size: 0.875rem;
  }
}

[type="text"] {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  [type="text"] {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  [type="text"] {
  font-size: 0.875rem;
  }
}

[type="search"] {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  [type="search"] {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  [type="search"] {
  font-size: 0.875rem;
  }
}

[type="tel"] {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  [type="tel"] {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  [type="tel"] {
  font-size: 0.875rem;
  }
}

[type="url"] {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  [type="url"] {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  [type="url"] {
  font-size: 0.875rem;
  }
}

[type="email"] {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  [type="email"] {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  [type="email"] {
  font-size: 0.875rem;
  }
}

[type="password"] {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  [type="password"] {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  [type="password"] {
  font-size: 0.875rem;
  }
}

[type="date"] {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  [type="date"] {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  [type="date"] {
  font-size: 0.875rem;
  }
}

[type="time"] {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  [type="time"] {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  [type="time"] {
  font-size: 0.875rem;
  }
}

[type="number"] {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  [type="number"] {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  [type="number"] {
  font-size: 0.875rem;
  }
}

select {
  max-width: 100%;
  min-width: 100%;
  padding: calc(1rem - 0.25rem) 1rem;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0);
  line-height: 0.9rem
}

@media (max-width: 719px) {

  select {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  select {
  font-size: 0.875rem;
  }
}

@media (min-width: 720px) {

.input__text,
[type="text"],
[type="search"],
[type="tel"],
[type="url"],
[type="email"],
[type="password"],
[type="date"],
[type="time"],
[type="number"],
select {
    min-width: 50%
}
  }

.input__text:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

[type="text"]:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

[type="search"]:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

[type="tel"]:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

[type="url"]:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

[type="email"]:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

[type="password"]:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

[type="date"]:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

[type="time"]:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

[type="number"]:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

select:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

.input__text::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="text"]::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="search"]::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="tel"]::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="url"]::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="email"]::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="password"]::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="date"]::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="time"]::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="number"]::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

select::-webkit-input-placeholder {
    color: rgb(128, 128, 128);
  }

.input__text::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

[type="text"]::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

[type="search"]::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

[type="tel"]::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

[type="url"]::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

[type="email"]::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

[type="password"]::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

[type="date"]::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

[type="time"]::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

[type="number"]::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

select::-moz-placeholder {
    color: rgb(128, 128, 128);
  }

.input__text:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="text"]:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="search"]:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="tel"]:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="url"]:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="email"]:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="password"]:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="date"]:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="time"]:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="number"]:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

select:-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

.input__text::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="text"]::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="search"]::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="tel"]::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="url"]::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="email"]::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="password"]::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="date"]::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="time"]::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

[type="number"]::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

select::-ms-input-placeholder {
    color: rgb(128, 128, 128);
  }

.input__text::placeholder {
    color: rgb(128, 128, 128);
  }

[type="text"]::placeholder {
    color: rgb(128, 128, 128);
  }

[type="search"]::placeholder {
    color: rgb(128, 128, 128);
  }

[type="tel"]::placeholder {
    color: rgb(128, 128, 128);
  }

[type="url"]::placeholder {
    color: rgb(128, 128, 128);
  }

[type="email"]::placeholder {
    color: rgb(128, 128, 128);
  }

[type="password"]::placeholder {
    color: rgb(128, 128, 128);
  }

[type="date"]::placeholder {
    color: rgb(128, 128, 128);
  }

[type="time"]::placeholder {
    color: rgb(128, 128, 128);
  }

[type="number"]::placeholder {
    color: rgb(128, 128, 128);
  }

select::placeholder {
    color: rgb(128, 128, 128);
  }

.input__text.error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="text"].error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="search"].error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="tel"].error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="url"].error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="email"].error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="password"].error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="date"].error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="time"].error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="number"].error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

select.error {
    padding-right: 2.5rem;
    border-color: rgb(198, 40, 40);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

.input__text.error:focus {
      border-color: rgb(25, 118, 210);
    }

[type="text"].error:focus {
      border-color: rgb(25, 118, 210);
    }

[type="search"].error:focus {
      border-color: rgb(25, 118, 210);
    }

[type="tel"].error:focus {
      border-color: rgb(25, 118, 210);
    }

[type="url"].error:focus {
      border-color: rgb(25, 118, 210);
    }

[type="email"].error:focus {
      border-color: rgb(25, 118, 210);
    }

[type="password"].error:focus {
      border-color: rgb(25, 118, 210);
    }

[type="date"].error:focus {
      border-color: rgb(25, 118, 210);
    }

[type="time"].error:focus {
      border-color: rgb(25, 118, 210);
    }

[type="number"].error:focus {
      border-color: rgb(25, 118, 210);
    }

select.error:focus {
      border-color: rgb(25, 118, 210);
    }

.input__text.success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="text"].success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="search"].success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="tel"].success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="url"].success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="email"].success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="password"].success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="date"].success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="time"].success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

[type="number"].success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

select.success {
    padding-right: 2.5rem;
    border-color: rgb(67, 160, 71);
    background-image: url(
      "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(67, 160, 71)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM7 11.4L3.6 8 5 6.6l2 2 4-4L12.4 6 7 11.4z'/%3E%3C/svg%3E"
    );
    background-repeat: no-repeat;
    background-position: right 0.5rem center
  }

.input__text.success:focus {
      border-color: rgb(25, 118, 210);
    }

[type="text"].success:focus {
      border-color: rgb(25, 118, 210);
    }

[type="search"].success:focus {
      border-color: rgb(25, 118, 210);
    }

[type="tel"].success:focus {
      border-color: rgb(25, 118, 210);
    }

[type="url"].success:focus {
      border-color: rgb(25, 118, 210);
    }

[type="email"].success:focus {
      border-color: rgb(25, 118, 210);
    }

[type="password"].success:focus {
      border-color: rgb(25, 118, 210);
    }

[type="date"].success:focus {
      border-color: rgb(25, 118, 210);
    }

[type="time"].success:focus {
      border-color: rgb(25, 118, 210);
    }

[type="number"].success:focus {
      border-color: rgb(25, 118, 210);
    }

select.success:focus {
      border-color: rgb(25, 118, 210);
    }

/**
 * Text Input with Icon
 *
 * .error - Error state
 * .success - Success state
 *
 * Markup: input-text-icon.twig
 *
 * Style guide: form.text-input-icon
 */

.input__text--icon {
  display: inline-block;
  max-width: 100%;
  min-width: 100%;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  background-position: 1rem center
}

@media (min-width: 720px) {

.input__text--icon {
    min-width: 50%
}
  }

.input__text--icon input {
    width: 100%;
    padding-left: 2.5rem;
    background-color: transparent;
  }

/**
 * Text Input with Inline Button
 *
 * Markup: input-text-inline-submit.twig
 *
 * Style guide: form.text-input-inline-submit
 */

.input__text--inline {
  position: relative;
  display: inline-block;
  max-width: 100%;
  min-width: 100%;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  background-position: 1rem center
}

@media (min-width: 720px) {

.input__text--inline {
    min-width: 50%
}
  }

.input__text--inline [type="text"] {
    width: 100%;
    padding-left: 2.5rem;
    padding-right: 6rem;
    background-color: transparent;
  }

.input__text--inline [type="submit"] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    border: 0;
    border-radius: 3px;
  }

/**
 * Label
 *
 * The form `label` element must be present for all form elements, and have a `for` attribute that matches the `id` of the
 * associated form element.
 *
 * .label--inline - Inline label.
 * 
 * Markup: label.twig
 *
 * Style guide: form.label
 */

label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: rgb(0, 0, 0)
}

@media (max-width: 719px) {

  label {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  label {
  font-size: 0.875rem;
  }
}

legend {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: rgb(0, 0, 0)
}

@media (max-width: 719px) {

  legend {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  legend {
  font-size: 0.875rem;
  }
}

label.label--inline {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 0.5rem;
  }

legend.label--inline {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 0.5rem;
  }

/** 
 * Checkbox (multiple)
 *
 * The standard `input[type="checkbox"]` element, using a fieldset and legend as
 * the accessible way to group and label multiple checkbox inputs.
 *
 * Optionally a tooltip can be used by using the `aria-describedby` attribute
 * on the fieldset itself.
 *
 * Markup: input-checkbox.twig
 *
 * Style guide: form.checkbox-multiple
 */

/**
 * Checkbox (single)
 *
 * Used for things like accepting terms and conditions and opting in to
 * communications.
 *
 * Markup: input-checkbox-single.twig
 *
 * Style guide: form.checkbox-single
 */

/**
 * Radios (multiple)
 *
 * The standard `input[type="radio"]` element, using a fieldset and legend as
 * the accessible way to group and label multiple radio inputs.
 *
 * Optionally a tooltip can be used by using the `aria-describedby` attribute
 * on the fieldset itself.
 *
 * Markup: input-radio.twig
 *
 * Style guide: form.radios
 */

.form__radio {
  margin: 0 0 0.5rem;
  padding: 0 1.5rem;
  border-bottom: 0 none;
  position: relative
}

.form__checkbox {
  margin: 0 0 0.5rem;
  padding: 0 1.5rem;
  border-bottom: 0 none;
  position: relative
}

.form__radio label, .form__checkbox label {
    cursor: pointer;
  }

.form__radio [type="radio"] {
    position: absolute;
    left: 0;
    top: 0.25rem;
    margin: 0;
  }

.form__radio [type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.25rem;
    margin: 0;
  }

.form__checkbox [type="radio"] {
    position: absolute;
    left: 0;
    top: 0.25rem;
    margin: 0;
  }

.form__checkbox [type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0.25rem;
    margin: 0;
  }

/**
 * Textarea
 *
 * A textarea field is used for multiple lines of text input.
 *
 * Markup: textarea.twig
 *
 * Style guide: form.textarea
 */

%textarea {
  padding: 1rem;
  height: calc(4 * 2.5rem);
  width: 100%;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0)
}

@media (max-width: 719px) {

  %textarea {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  %textarea {
  font-size: 0.875rem;
  }
}

textarea {
  padding: 1rem;
  height: calc(4 * 2.5rem);
  width: 100%;
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  font-size: 1rem;
  color: rgb(0, 0, 0)
}

@media (max-width: 719px) {

  textarea {
  font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  textarea {
  font-size: 0.875rem;
  }
}

@media (min-width: 720px) {

%textarea,
textarea {
    width: 50%
}
  }

%textarea:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

textarea:focus {
    border-color: rgb(25, 118, 210);
    outline: none;
  }

/**
 * Fieldset
 *
 * The fieldset element is used for grouping form elements. See the [Checkbox (multiple)](/section-form.html#kssref-form-checkbox-multiple)
 * and [Radios (multiple)](/section-form.html#kssref-form-radios) components for how it is best used.
 *
 * Markup: fieldset.twig
 *
 * Style guide: form.fieldset
 */

fieldset {
  border: 2px solid rgb(127, 127, 127);
  border-radius: 3px;
  padding: 1rem;
  margin: 0 0 1rem;
  min-width: 0
}

fieldset legend {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0 1rem;
  }

@media (max-width: 719px) {

  fieldset legend {
    font-size: 0.875rem;
  }
}

@media (max-width: 719px) {

  fieldset legend {
    font-size: 0.875rem;
  }
}

/**
 * Description
 *
 * Text that describes a form field. The form element must have an `aria-describedby` attribute that points to the
 * `id` of the description text.
 *
 * Markup: form-description.twig
 *
 * Style guide: form.description
 */

.form__description {
  margin: 1rem 0;
  font-size: 0.75rem;
}

@media (max-width: 719px) {

  .form__description {
  font-size: 0.75rem;
  }
}

/**
 * Error message
 *
 * The error state with a red border and message.
 *
 * Markup: form-error.twig
 *
 * Style guide: form.error
 */

.form__error-message {
  margin: 1rem 0;
  font-size: 0.75rem;
  color: rgb(0, 0, 0);
  padding-left: 1.5rem;
  background-image: url(
    "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(198, 40, 40)'%3E%3Cpath d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z'/%3E%3C/svg%3E"
  );
  background-repeat: no-repeat;
  background-position: left center;
}

@media (max-width: 719px) {

  .form__error-message {
  font-size: 0.75rem;
  }
}

/**
 * Select
 *
 * The select field, used to choose a single option from a list. If multiple options can be selected at the same time,
 * consider using the [Checkbox (multiple)](/section-form.html#kssref-form-checkbox-multiple) component instead.
 *
 * .select--small - A smaller variant of the select field.
 *
 * Markup: select.twig
 *
 * Style guide: form.select
 */

select {
  cursor: pointer;
  background-color: rgb(255, 255, 255);
  line-height: 1.2;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(
    "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(0, 0, 0)'%3E%3Cpath d='M8 11.4L2.6 6 4 4.6l4 4 4-4L13.4 6z'/%3E%3C/svg%3E"
  );
  background-repeat: no-repeat;
  background-position: right 1rem center
}

select[multiple] {
    height: auto;
    background-image: none;
  }

.select--small {
  line-height: 0.9;
  border-width: 1px;
}

.select--wide {
  width: 100%;
}

/**
 * Form
 *
 * Style guide: form
 */

/**
 * Text Input
 *
 * .error - Error state
 * .success - Success state
 *
 * Markup: input-text.twig
 *
 * Style guide: form.text-input
 */

[type='date'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='datetime-local'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='email'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='file'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='month'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='number'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='password'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='search'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='tel'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='text'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='time'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='url'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='week'] {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

textarea {
  font-family: "urw-din", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  border-color: rgb(127, 127, 127);
  text-overflow: ellipsis
}

[type='date']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='datetime-local']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='email']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='file']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='month']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='number']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='password']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='search']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='tel']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='text']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='time']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='url']:hover {
    border-color: rgb(74, 78, 87);
  }

[type='week']:hover {
    border-color: rgb(74, 78, 87);
  }

textarea:hover {
    border-color: rgb(74, 78, 87);
  }

[type='date']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='datetime-local']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='email']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='file']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='month']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='number']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='password']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='search']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='tel']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='text']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='time']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='url']:focus {
    border-color: rgb(25, 118, 210);
  }

[type='week']:focus {
    border-color: rgb(25, 118, 210);
  }

textarea:focus {
    border-color: rgb(25, 118, 210);
  }

/**
 * Text Input with Icon
 *
 * .error - Error state
 * .success - Success state
 *
 * Markup: input-text-icon.twig
 *
 * Style guide: form.text-input-icon
 */

.input__text--inline.icon--search .form__item--textfield {
    margin-bottom: 0;
  }

/**
 * Text Input with Inline Button
 *
 * Markup: input-text-inline-submit.twig
 *
 * Style guide: form.text-input-inline-submit
 */

.input__text--inline [type='submit'] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    margin-bottom: 0;
    bottom: 0.25rem;

    /* to get this to sit nicely inside the input box in iOS, chrome, IE, FF we need to use exact units 100% - .5rem does not work */
    max-height: calc(49px - .5rem);
  }

/**
 * Label
 *
 * The form `label` element must be present for all form elements, and have a `for` attribute that matches the `id` of the
 * associated form element.
 *
 * .label--inline - Inline label.
 *
 * Markup: label.twig
 *
 * Style guide: form.label
 */

/**
 * Checkbox (multiple)
 *
 * The standard `input[type="checkbox"]` element, using a fieldset and legend as
 * the accessible way to group and label multiple checkbox inputs.
 *
 * Optionally a tooltip can be used by using the `aria-describedby` attribute
 * on the fieldset itself.
 *
 * Markup: input-checkbox.twig
 *
 * Style guide: form.checkbox-multiple
 */

/**
 * Checkbox (single)
 *
 * Used for things like accepting terms and conditions and opting in to
 * communications.
 *
 * .form__checkbox--primary - Primary
 * .form__checkbox--secondary - Secondary
 * .form__checkbox--small - Small
 *
 * Markup: input-checkbox-single.twig
 *
 * Style guide: form.checkbox-single
 */

.form__checkbox [type='checkbox'] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    position: absolute;
    top: 4px;
    width: 18px;
    height: 18px;
    border: 2px solid rgb(127, 127, 127);
    border-radius: 3px;
  }

.form__checkbox [type='checkbox']:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(127, 127, 127)'%3E%3Cpath d='M5.6 9.6L2.4 6.4 0 8.8l5.6 5.6L16 4l-2.4-2.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: .75rem;
    background-position: center;
  }

.form__checkbox [type='checkbox']:focus {
    border-color: rgb(25, 118, 210);
  }

.form__checkbox [type='checkbox']:disabled {
    background-image: none;
    border-color: rgb(127, 127, 127);
    background-color: rgb(230, 230, 230);
  }

.form__checkbox [type='checkbox']:disabled:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(127, 127, 127)'%3E%3Cpath d='M5.6 9.6L2.4 6.4 0 8.8l5.6 5.6L16 4l-2.4-2.4z'/%3E%3C/svg%3E");
  }

.form__checkbox--primary [type='checkbox']:checked {
    background-color: rgb(10, 65, 122);
    border-color: rgb(10, 65, 122);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(255, 255, 255)'%3E%3Cpath d='M5.6 9.6L2.4 6.4 0 8.8l5.6 5.6L16 4l-2.4-2.4z'/%3E%3C/svg%3E");
  }

.form__checkbox--secondary [type='checkbox']:checked {
    background-color: rgb(10, 65, 122);
    border-color: rgb(10, 65, 122);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgb(255, 255, 255)'%3E%3Cpath d='M5.6 9.6L2.4 6.4 0 8.8l5.6 5.6L16 4l-2.4-2.4z'/%3E%3C/svg%3E");
  }

.form__checkbox--small {
  margin-bottom: 1rem
}

.form__checkbox--small [type='checkbox'] {
    width: 0.875rem;
    height: 0.875rem;
  }

@media (max-width: 719px) {

  .form__checkbox--small [type='checkbox'] {
    height: 0.75rem;
  }
}

@media (max-width: 719px) {

  .form__checkbox--small [type='checkbox'] {
    width: 0.75rem;
  }
}

.form__checkbox--small [type='checkbox']:checked {
    background-size: .5rem;
  }

.form__checkbox--small label {
    font-size: 0.875rem;
  }

@media (max-width: 719px) {

  .form__checkbox--small label {
    font-size: 0.75rem;
  }
}

/**
 * Radios (multiple)
 *
 * The standard `input[type="radio"]` element, using a fieldset and legend as
 * the accessible way to group and label multiple radio inputs.
 *
 * Optionally a tooltip can be used by using the `aria-describedby` attribute
 * on the fieldset itself.
 *
 * .form__radio--primary - Primary
 * .form__radio--secondary - Secondary
 * .form__radio--small - Small
 *
 * Markup: input-radio.twig
 *
 * Style guide: form.radios
 */

.form__radio [type='radio'] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-block;
    position: absolute;
    top: 2px;
    width: 18px;
    height: 18px;
    border: 2px solid rgb(127, 127, 127);
    border-radius: 50%;
  }

.form__radio [type='radio']:checked::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    background-color: rgb(127, 127, 127);
  }

.form__radio [type='radio']:focus {
    outline: 1px solid rgb(25, 118, 210);
  }

.form__radio [type='radio']:disabled {
    border-color: rgb(127, 127, 127);
    background-color: rgb(230, 230, 230);
  }

.form__radio [type='radio']:disabled:checked::after {
    background-color: rgb(230, 230, 230);
  }

.form__radio--primary [type='radio'] {
    border-color: rgb(10, 65, 122);
  }

.form__radio--primary [type='radio']:checked::after {
    background-color: rgb(10, 65, 122);
  }

.form__radio--secondary [type='radio'] {
    border-color: rgb(10, 65, 122);
  }

.form__radio--secondary [type='radio']:checked::after {
    background-color: rgb(10, 65, 122);
  }

.form__radio--small [type='radio'] {
    top: 3px;
    width: 16px;
    height: 16px;
  }

.form__radio--small [type='radio']:checked::after {
    width: 8px;
    height: 8px;
  }

.form__radio--small label {
    font-size: 0.875rem;
  }

@media (max-width: 719px) {

  .form__radio--small label {
    font-size: 0.75rem;
  }
}

/**
 * Textarea
 *
 * A textarea field is used for multiple lines of text input.
 *
 * Markup: textarea.twig
 *
 * Style guide: form.textarea
 */

/**
 * Fieldset
 *
 * The fieldset element is used for grouping form elements. See the [Checkbox (multiple)](/section-form.html#kssref-form-checkbox-multiple)
 * and [Radios (multiple)](/section-form.html#kssref-form-radios) components for how it is best used.
 *
 * Markup: fieldset.twig
 *
 * Style guide: form.fieldset
 */

/**
 * Description
 *
 * Text that describes a form field. The form element must have an `aria-describedby` attribute that points to the
 * `id` of the description text.
 *
 * Markup: form-description.twig
 *
 * Style guide: form.description
 */

/**
 * Error message
 *
 * The error state with a red border and message.
 *
 * Markup: form-error.twig
 *
 * Style guide: form.error
 */

.form__description {
  margin: 0.5rem 0;
}

.form__error-message {
  margin: 0.5rem 0;
}

/**
 * Drupal selectors.
 */

.user-login-form,
.user-register-form,
.user-pass {
  max-width: 500px;
  margin: 50px auto;
}

.input--hidden-label label {
  display: none;
}

.form__item.form__item--label-inline {
    display: block;
    max-width: calc(100vw - 3rem)
  }

@media (min-width: 540px) {

.form__item.form__item--label-inline {
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
              align-items: center;
      -webkit-box-pack: start;
              justify-content: flex-start
  }
    }

/**
 * Place the popover trigger inside the input field for inline form combo's
 */

.input__text--inline .popover__wrapper {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  margin-top: 1px;
}

@media (max-width: 719px) {
  .input__text--inline {
    width: 100%;
  }

  .input__text--inline .popover {
    min-width: calc(100vw - 3.5rem);
  }
}

/**
 * Print stylesheet
 */

@media print {
  form {
    display: none;
  }
}

/**
 * Mailchimp Form
 *
 * Mailchimp markup styles.
 *
 * Markup: signup-form.twig
 *
 * Style guide: form.signup
 */

.mailchimp-signup-subscribe-form {
  padding: 2rem 1rem;
  background: rgb(230, 236, 241);
  border-radius: 3px
}

.mailchimp-signup-subscribe-form .form-actions {
    margin-top: 1rem;
  }

.mailchimp-signup-subscribe-form .form__item {
    margin-top: 1rem;
  }