.form-item {
  display: flex;
  flex-direction: row;
  height: 3.17rem;
  margin-bottom: 5px;
  position: relative;
  width: 100%;

  &.checkbox {
    .input-data {
      flex-direction: row;

      .checkmark-container {
        align-self: flex-start;

        .checkmark-checked:after {
          position: relative;
          top: -2px;
          left: 2px;
        }

        span:nth-child(2) {
          width: calc(100% - 59px - 12px);
          font-weight: 500;
          color: #ffffff;
          position: relative;
          bottom: -6px;
        }
      }

      > span {
        width: calc(100% - 14px);
        font-size: 0.83rem;
        font-weight: 300;
        margin-left: 10px;
        color: #ffffff;
      }
    }
  }

  &.hasError {
    .input-data {
      input,
      input:focus {
        border-bottom: solid 2px #191a1f;
      }
    }
  }

  .validate-icon-section {
    font-size: 1.67rem;
    height: 25px;
    left: -32px;
    position: absolute;
    width: 25px;

    .valid-icon {
      color: #ffffff;
      position: relative;
      top: 0%;
      left: calc(50% - 6px);
    }

    .invalid-icon {
      color: #000000;
      position: relative;
      top: 0%;
      left: calc(50% - 6px);
    }

    .no-icon {
      width: 10%;
    }
  }

  .input-data {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    text-align: left;
    width: 100%;

    input {
      background: transparent;
      border: 0;
      border-bottom: solid 2px rgba(255, 255, 255, 0.19);
      color: #ffffff;
      font-size: 0.9rem;
      padding-bottom: 3px;
      text-indent: 7px;
      width: calc(100% - 2px);

      &:focus {
        outline: none;
        border-bottom: solid 2px #ffffff;
      }
    }

    input::placeholder {
      color: #ffffff;
      opacity: 0.6;
    }

    input[type='password'] {
      font-size: 0.9rem;
      padding-right: 25px;
      width: calc(100% - 26px);
      -webkit-text-security: square;
    }

    label {
      color: #ffffff;
      font-size: 0.9rem;
      font-weight: 500;
      right: 0;
      position: absolute;
      width: 75px;
    }

    span.input-icon {
      color: #ffffff;
      top: -3px;
      font-size: 1.5rem;
      margin-bottom: 5px;
      opacity: 0.5;
      position: absolute;
      right: 0;
    }

    .error-message {
      font-size: 0.75rem;
      color: #000;
      margin-top: 2px;
    }
  }
}
