/* Any changes we need to make to the Boostrap default theme should go here. */

/* Use our brand colors everywhere possible. */
:root {
  --bs-primary: var(--primary-color);
  --bs-secondary: var(--secondary-color);
}

/* Raleway font comes first, so it'll be the primary font everywhere. */
html,
body {
  font-family:
    "Raleway",
    BlinkMacSystemFont,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

/* But we don't want to use it in inputs or wherever we specify. */
button,
input,
optgroup,
select,
textarea,
.no_custom_font {
  font-family:
    BlinkMacSystemFont,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

/* Font weight. I don't know why Bootstrap doesn't have this. Follows their naming convention for consistency. */
.font-semibold {
  font-weight: 500;
}

/* Primary buttons don't use variables? */
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.text-primary {
  color: var(--primary-color) !important;
  opacity: 1;
}

/* Make links in the navbar blue and hoverable, instead of plain gray. */
.navbar-light .navbar-nav .nav-link {
  color: var(--darker-primary-color);
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--hover-color);
}

/* No padding for action bar links. */
.action_bar_container .navbar-nav .nav-link {
  padding: 0;
}

/* Rounding for buttons. */
.btn,
a.btn,
button.btn,
label.btn {
  border-radius: 10px;
}

/* I'd rather not make these !important, but Bootstrap uses a ton of different selectors for button groups. :( */
.btn-group:not(.bootstrap-unset) > .btn {
  border-radius: 10px !important;
}

.btn-group > .btn-sm {
  border-radius: 5px !important;
}

.btn.btn-sm {
  border-radius: 5px;
}

.btn-check:checked + .btn-outline-primary {
  background-color: #00a8e8 !important;
  color: white !important;
  border: 2px solid #00a8e8;
}
/* Lighten the placeholder text so it doesn't get confused with input. */
.form-control::placeholder,
.form-control::-webkit-input-placeholder {
  opacity: 0.4;
}

/* Hide the placeholder if the input has focus. */
.form-control:focus::placeholder,
.form-control:focus::-webkit-input-placeholder {
  color: transparent;
}