.form {
  &--small {
    width: 20vw;
    .row {
      display: block !important;
    }
  }
  p.error {
    display: block;
    padding: 0.5rem 1rem;
    margin: 0 0 0.5rem 0;
    background: $color-plp-tertiary;
    color: $color-white;
  }
  p.error-msg {
    color: $color-plp-tertiary;
    font-weight: bold;
    margin: 0;
  }
  .row {
    display: flex;
    padding: 0 0 1rem 0;
    &--last {
      .column {
        display: flex;
        justify-content: flex-end;
      }
      .button {
        margin-left: 1rem;
      }
    }
    &--error {
      padding: 0;
    }
    .error {

    }
  }
  .column {
    flex: 1;
    padding: 0 2rem 0 0;
    &--checkbox {
      overflow: hidden;
      input {
        float: left;
        margin: 2px 10px 0 0;
      }
      label {
        padding: 0 0 0 23px;
      }
      .checkbox-inner-column {
        float: left;
        width: 50%;
        padding: 0 0 0.5rem 0;
        &:nth-child(2n + 1) {
          clear: both;
        }
      }
    }
  }
  label,
  p.label {
    display: block;
    padding: 0 0 0.5rem 0;
    margin: 0;
    &.error {
      color: $color-plp-tertiary;
    }
  }
  input,
  textarea {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    padding: 0.5rem;
    display: block;
    width: 100%;
    background: $color-white;
    border: 1px solid $color-plp-primary;
  }
  input {
    &[type='checkbox'] {
      width: auto;
    }
    &:disabled {
      color: $color-plp-grey;
      font-style: italic;
    }
  }
  textarea {
    height: 12.25rem;
  }
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-size: 1em;
    width: 100%;
    display: block;
    border: 1px solid $color-plp-primary;
    padding: calc(0.5rem - 2px) 0.5rem;
    background: $color-white url("/assets/elements/select-arrow.svg") no-repeat calc(100% - 1rem) 50%/1rem auto;
    &:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
    &::-ms-expand {
      display:none;
    }
    &:disabled {
      color: $color-plp-grey;
      font-style: italic;
      background: $color-white;
    }
  }

  input,
  textarea,
  select {
    transition: 0.3s;
    &.error {
      border-color: $color-plp-tertiary;
      background-color: $color-plp-tertiary-light;
    }
  }
}

.button {
  display: block;
  padding: calc(0.5rem - 1px) 2rem;
  background: $color-plp-tertiary;
  color: $color-white;
  border: none;
  margin: 0 0 2rem 0;
  cursor: pointer;
  transition: 0.3s;
  &:hover {
    background-color: $color-plp-primary;
  }
  &[disabled] {
    color: $color-plp-grey;
    background: $color-plp-grey-light;
    &:hover {
      background-color: $color-plp-grey-light;
    }
  }
  &--inline {
    display: inline-block;
  }
}

.button-row {
  position: relative;
  .button-row--link {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 1rem;
    color: $color-plp-tertiary;
    text-decoration: underline;
    &:hover {
      color: $color-plp-primary;
    }
  }
}

#forgot-pw {
  cursor: pointer;
}

@media only screen and (max-width: 1004px) {
  .form {
    &--small {
      width: 60vw;
    }
  }
}

@media only screen and (max-width: 768px) {
  .form {
    padding-bottom: 4rem;
    &--small {
      width: 80vw;
    }
  }
}

@media only screen and (max-width: 400px) {
  .form {
    &--small {
      .row {
        padding: 0 0 1rem 0 !important;
      }
    }
    .row {
      display: block;
      padding: 0;
    }
    .column {
      padding: 0 0 1.5rem 0;
    }
  }
}
