$enable-shadows:true;

.form-control {
  padding: 0.345rem 1rem;
  min-height: 2.5rem; //iPad fix
  @include form-control-focus();
}

.input-group .form-control {
  flex: 1 1 auto;
}

// Custom checkbox style
.custom-control {
  &.custom-checkbox {
    margin-bottom: 0.3rem;
  }
}

.custom-control-label {
  color: $body-text;

  &:hover {
    color: $gray-600;
  }

  &::before {
    border-width: 1px;
    border-style: solid;
    border-color: $gray-600;
  }
}

.custom-control-input:checked ~ .custom-control-label::before {
  border-color: $blue;
}

// UI dark
.custom-control {
  &.ui-dark {
    .custom-control-label {
      color: $gray-500;
      font-weight: 300;
      font-size: 0.8rem;
    }
    .custom-control-input:checked ~ .custom-control-label {
      color: $gray-200;
    }
  }
}

.form-row {
  &--navigation-card {
    overflow-y: auto;
    height: 300px;
    width: 100%;
  }
}

.expiry-date {
  display: flex;
  flex-direction: column;
}

.expiry-date__input-container {
  display: flex;
  flex-direction: row;

  .expiry-date__select-input {
    width: auto;
  }

  .react-datepicker-wrapper {
    width: 50%;
    margin-left: auto;
  }
  .react-datepicker__input-container {
    width: 100%;
    height: 100%;
  }

  .expiry-date__date-input {
    width: 100%;
    height: 100%;
  }
}