// Custom select
.form-select {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
}

.form-check-input {
  z-index: 1;
}
//
// Default Form Page style including font weight and color
//
label {
  margin-bottom: 0.5rem;
  font-weight: 400;
  color: #202123;
}

//
// Row Separator page
//
.r-separator .form-group {
  border-bottom: 1px solid var(--bs-border-color);

  &:last-child {
    border-bottom: none;
  }
}

//
// Striped Row page
//
.striped-rows .row:nth-child(odd) {
  background-color: var(--bs-gray-100);
}

//
// Border form page
//
.b-form .row {
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 0;
  padding: 15px 0;

  &:last-child {
    border-bottom: none;
  }
}

//
// Custom validation Classes
//
.error {
  .form-control {
    border-color: var(--bs-danger);
  }

  .help-block {
    color: var(--bs-danger);
  }
}

.validate {
  .form-control {
    border-color: var(--bs-success);
  }

  .help-block {
    color: var(--bs-success);
  }
}

.form-check-input.success:checked {
  background-color: var(--bs-success);
  border: var(--bs-success);
}

.form-check-input.danger:checked {
  background-color: var(--bs-danger);
  border: var(--bs-danger);
}

.form-check-input.warning:checked {
  background-color: var(--bs-warning);
  border: var(--bs-warning);
}

.form-check-input.primary:checked {
  background-color: var(--bs-primary);
  border: var(--bs-primary);
}

.form-check-input.secondary:checked {
  background-color: var(--bs-secondary);
  border: var(--bs-secondary);
}

.form-check-input.info:checked {
  background-color: var(--bs-info);
  border: var(--bs-info);
}

.form-check-input.secondary:checked {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.form-check-input.danger:checked {
  background-color: var(--bs-danger);
  border-color: var(--bs-danger);
}

.form-check-input.warning:checked {
  background-color: var(--bs-warning);
  border-color: var(--bs-warning);
}

.form-check-input.success:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-success);
}

.form-check-input.info:checked {
  background-color: var(--bs-info);
  border-color: var(--bs-info);
}

// Form checkbox

.form-check-input {
  background-position: left center;

  &:focus {
    box-shadow: none;
  }
}

.form-check-input {
  // -----------------------------------------
  // outline checkbox
  // -----------------------------------------
  &.check-outline {
    &.outline-success {
      border: 1px solid var(--bs-success);
      background-color: transparent;
    }

    &.outline-danger {
      border: 1px solid var(--bs-danger);
      background-color: transparent;
    }

    &.outline-warning {
      border: 1px solid var(--bs-warning);
      background-color: transparent;
    }

    &.outline-primary {
      border: 1px solid var(--bs-primary);
      background-color: transparent;
    }

    &.outline-secondary {
      border: 1px solid var(--bs-secondary);
      background-color: transparent;
    }
    &.outline-info {
      border: 1px solid var(--bs-info);
      background-color: transparent;
    }
  }

  // -----------------------------------------
  // change bg on checked
  // -----------------------------------------
  // success
  &.success {
    &:checked {
      background-color: var(--bs-success) !important;
      border-color: var(--bs-success) !important;
    }
  }

  // warning
  &.warning {
    &:checked {
      background-color: var(--bs-warning) !important;
      border-color: var(--bs-warning) !important;
    }
  }

  // danger
  &.danger {
    &:checked {
      background-color: var(--bs-danger) !important;
      border-color: var(--bs-danger) !important;
    }
  }

  // primary
  &.primary {
    &:checked {
      background-color: var(--bs-primary) !important;
      border-color: var(--bs-primary) !important;
    }
  }

  // secondary
  &.secondary {
    &:checked {
      background-color: var(--bs-secondary) !important;
      border-color: var(--bs-secondary) !important;
    }
  }

  // info
  &.info {
    &:checked {
      background-color: var(--bs-info) !important;
      border-color: var(--bs-info) !important;
    }
  }
}