@use "bootstrap/scss/bootstrap" as * with (
  $info: #5c728f
);

@use "includes/components/table";
@use "includes/components/jumbotron";
@use "includes/components/challenge";
@use "includes/components/sticky-footer";
@use "includes/components/graphs";

@use "includes/utils/fonts";
@use "includes/utils/opacity";
@use "includes/utils/min-height";
@use "includes/utils/cursors";
@use "includes/utils/lolight";

@use "includes/icons/award-icons";
@use "includes/icons/flag-icons";

h1,
h2 {
  font-weight: 500;
  letter-spacing: 2px;
}

a {
  color: #337ab7;
  text-decoration: none !important;
}

blockquote {
  border-left: 4px solid $secondary;
  padding-left: 15px;
}

.fa-spin.spinner {
  text-align: center;
  opacity: 0.5;
}

.badge-notification {
  vertical-align: top;
  margin-left: -1.5em;
  font-size: 50%;
}

select.form-control {
  height: auto !important;
}

.form-select {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e")
    no-repeat right 0.75rem center/8px 10px !important;
}

// HMM

.input-filled-valid {
  background-color: transparent !important;
  border-color: #a3d39c;
  box-shadow: 0 0 0 0.1rem #a3d39c;
  transition: background-color 0.3s, border-color 0.3s;
}

.input-filled-invalid {
  background-color: transparent !important;
  border-color: #d46767;
  box-shadow: 0 0 0 0.1rem #d46767;
  transition: background-color 0.3s, border-color 0.3s;
}

.form-control {
  padding: 0.8em !important;
  background: #f0f0f0;
  color: #aaa;
  /* Behavior changed in Bootstrap v4.1.3. See https://github.com/twbs/bootstrap/issues/27629 */
  height: auto !important;
}

.form-control:focus {
  background-color: transparent;
  border-color: #a3d39c;
  box-shadow: 0 0 0 0.1rem #a3d39c;
  transition: background-color 0.3s, border-color 0.3s;
}
