@import "bootstrap/scss/functions";
@import "bootstrap-variables";
@import "bootstrap/scss/bootstrap";

@import "bootstrap-additional";

@import "./fontello-icons";
@import "./global-variables";

//$base-color: #ffbf16;

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  padding: {
    bottom: 3.2rem;
  }
}

footer {
  margin: {
    top: 12rem !important;
  }
  color: $gray-600;
}

.spacer {
  height: 0;
  line-height: 0;
}

h1 {
  font-weight: bold;
}

select[required]:invalid {
  color: $gray-600;
}

.search-highlighted {
  .btn-primary {
    background-color: $highlightedColor;
    border-color: $highlightedColor;
  }
  .btn-primary.disabled {
    background-color: tint-color($highlightedColor, 20%);
  }
}
.search-standard {
  .btn-primary {
    background-color: $stdColor;
    border-color: $stdColor;
  }
  .btn-primary.disabled {
    background-color: tint-color($stdColor, 20%);
  }
}

.bg-highlighted {
  background-color: $lightHighlihtedColor;
}
.bg-std {
  background-color: $lightStdColor;
}
.text-highlighted {
  color: $highlightedColor;
}
.text-std {
  color: $stdColor;
}

.tab {
  text-align: center;
  border-top-left-radius: 1.2rem;
  border-top-right-radius: 1.2rem;
  padding: 1.2rem 1.5rem;
  font-weight: bold;
  border: 1px solid transparent;
  list-style: none;
  cursor: pointer;

  &.selected {
    border-color: lightgrey;
    border-bottom-color: transparent;
  }
  &:not(.selected) {
    border-bottom-color: lightgrey;
  }
}
.text-gray-600 {
  color: $gray-600;
}
