/*
===============================================================================
THEME & COLOR STYLES
===============================================================================
Table of Contents:
1. Text Colors
2. Background Colors
3. Links
4. Forms & Inputs
5. Buttons
6. Validation
===============================================================================
*/

/* =============================================================================
   1. TEXT COLORS
   ============================================================================= */

.text-brand {
  color: var(--color-brand) !important;
}

.text-brand-dark {
  color: var(--color-brand-dark) !important;
}

.text-gray {
  color: var(--color-gray) !important;
}

.text-muted {
  color: var(--color-gray) !important;
}

.text-danger {
  color: var(--color-red) !important;
}

small {
  color: var(--color-gray-300) !important;
}

/* =============================================================================
   2. BACKGROUND COLORS
   ============================================================================= */

.bg-brand {
  background-color: var(--color-brand) !important;
}

.bg-brand-dark {
  background-color: var(--color-brand-dark) !important;
}

.bg-gray {
  background-color: var(--color-gray) !important;
}

.bg-gray-dark {
  background-color: var(--color-gray-dark) !important;
}

/* =============================================================================
   3. LINKS
   ============================================================================= */

a.nav-link {
  color: #fff !important;
}

a.dropdown-item {
  color: var(--color-gray) !important;
}

/* =============================================================================
   4. FORMS & INPUTS
   ============================================================================= */

.form-control {
  border-color: #fff !important;
}

  .form-control:hover {
    border-color: var(--color-brand) !important;
  }

  .form-control:focus {
    box-shadow: 0 0 0 4px var(--color-blue-400) !important;
  }

  .form-control:disabled {
    border-color: var(--bs-secondary-bg) !important;
  }

/* Modal Body Form Controls */
.modal-body input.form-control,
.modal-body textarea.form-control {
  border-top: 1px solid var(--color-gray-ultralight) !important;
}

  .modal-body input.form-control:hover,
  .modal-body textarea.form-control:hover {
    border-color: var(--color-brand) !important;
  }

/* Input Groups */
.input-group > .form-control {
  border-right: none;
}

.input-group-text {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.08);
}

/* =============================================================================
   5. BUTTONS
   ============================================================================= */

.btn-select {
  background-color: var(--color-gray-light) !important;
  color: var(--color-gray) !important;
}

  .btn-select:hover {
    background-color: var(--color-gray-300) !important;
  }

.btn-select-success {
  background-color: #fff !important;
  color: var(--color-brand) !important;
}

.btn-select-error {
  background-color: var(--color-red) !important;
  color: #fff !important;
}

/* =============================================================================
   6. VALIDATION
   ============================================================================= */

.validationMessage {
  color: var(--color-red) !important;
}

.form-floating.has-error > .form-control {
  border-color: var(--color-red) !important;
}

/* =============================================================================
   END OF STYLESHEET
   ============================================================================= */