html {
  .has-error {
    &.list-button,
    &.list-card,
    &.list-card.list-button {
      border: none;
      color: $red;
      input[type=checkbox]:focus + label,
      input[type=radio]:focus + label {
        box-shadow: 0 0 0 2.5px $red;
      }
      input[type=checkbox]:checked + label {
        box-shadow: 0 0 0 1px $red;
      }
      &:hover {
        box-shadow: 0px 0px 0px 4px $red-200;
        border-radius: .5rem;
      }
      label {
        border: 1px solid $red;
        border-radius: .5rem;
      }
      label:hover {
        box-shadow: 0px 0px 0px 4px $red-200;
        border-radius: 10px;
        border: 1px solid $red;
      }
    }
    &.list-button-horizontal {
      color: $red;
      label {
        border: 1px solid $red;
        &:hover {
          box-shadow: 0px 0px 0px 4px $red-200;
        }
      }
      input[type=checkbox]:focus + label,
      input[type=radio]:focus + label {
        box-shadow: 0 0 1px $red;
      }
    }
    &.grid-item {
      input[type="radio"] {
        + label {
          border: 1px solid $red;
          &:hover {
            background-color: $blue-100;
            box-shadow: 0px 0px 0px 4px $red-200;
          }
          span {
            color: $red;
          }
        }
      }
    }
    &.ui-radio,
    &.ui-checkbox {
      input[type=checkbox],
      input[type=radio],
      input[type=radio]+label:before,
      input[type=checkbox]+label:before {
        border: 1px solid $red;
        background-color: initial;
      }
      input[type=checkbox]:checked + label:before {
        border: 1px solid $blue;
      }
    }
    &.textbox-question,
    &.dropdown-question {
      input:hover {
        box-shadow: 0px 0px 0px 4px $red-200;
        border-radius: .5rem;
        border: 1px solid $red;
      }
      input:focus {
        box-shadow: 0 0 0 2.5px $red;
      }
      p {
        color: $red;
      }
      input,
      select {
        border: 1px solid transparent;
        box-shadow: 0 0 0 1px $red;
        &:focus {
          border: 1px solid transparent;
        }
      }
      select {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 16px 12px;
      }
    }
  }
  //Restore to default style if alert box is present
  .alertError {
    .has-error {
      &.list-button,
      &.list-card {
        border: 1px solid $gray-500;
        input:not(:focus) {
          + label {
            border: none;
            box-shadow: 0 0 0 1px $gray-500;
            border-radius: .5rem;
          }
        }
        input:checked:focus {
          + label {
            border: none;
            box-shadow: 0 0 0 2.5px $blue;
            border-radius: .5rem;
          }
        }
        input:checked:not(:focus) {
          + label {
            box-shadow: 0 0 0 1px $blue;
            border-radius: .5rem;
          }
        }
        input:focus {
          border: 1px solid $gray-500;
          + label {
            box-shadow: 0 0 0 2.5px transparent;
          }
        }
        &:hover {
          box-shadow: 0 0 0 4px $blue-300;
          + label {
            box-shadow: 0 0 0 2.5px transparent;
            border: 1px solid $blue;
          }
        }
      }
    }
  }

  .form-test-error {
    color: $red;
    font-size: .875rem;
    font-weight: 500;
  }

  .form-test-invalid {
    &.btn.btn-primary {
      color: $gray-600;
      background: $gray-200;
      cursor: pointer;
      pointer-events: all;
      font-weight: $font-weight-normal;
    }
    &.btn.btn-primary:hover {
      background: $gray-200;
      box-shadow: none;
    }
    &.btn.btn-primary:focus,
    &.btn.btn-primary:focus-visible {
      box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
    }
  }
}