:root {
  --color-accent: #e03100;
  --color-accent-dark: #b82800;
  --color-text: #080808;
  --color-text-secondary: #6b6b6b;
  --color-placeholder: #a0a0a0;
  --color-ground: #f0f0f0;
  --color-surface: #ffffff;
  --color-border: #dddddd;
  --shadow-raised: 0 0 9px rgba(0, 0, 0, 0.1);
  --font-family-base:
    "aktiv-grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  --font-root-regular: 19px;
  --font-root-mobile: 16px;
  --font-size-regular: 1rem;
  /* 16 / 19rem */
  --font-size-small: 0.8421052632rem;
  /* 24 / 19rem */
  --font-size-large: 1.2631578947rem;
  /* 24 / 19rem */
  --line-height: 1.2rem;
  --header-height: 80px;
  --header-brand-height: 60px;
  --line-height-small: 20px;
  --box-shadow-reg: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);

  /* 16 / 19 rem */
  --spacing: 0.8421052632rem;
  /* 8 / 19 rem */
  --spacing-small: 0.4210526316rem;
  /* 32 / 19 rem */
  --spacing-large: 1.6842105263rem;
  /* (8 / 19) / 2 rem */
  --spacing-small-half: 0.2105263158rem;
}

/* typography */
/* the bootstrap theme sets its own font on these */
.tooltip,
.popover {
  font-family: var(--font-family-base);
}

html,
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-regular);
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: #fff;
  text-rendering: optimizeLegibility;

  &:root {
    font-size: var(--font-root-mobile);

    @media screen and (min-width: 640px) {
      font-size: var(--font-root-regular);
    }
  }
}

h1,
h2,
.h1,
.h2 {
  font-family: var(--font-family-base);
  font-weight: 500;
  color: var(--color-text);
}

h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-family-base);
  font-weight: 700;
  color: var(--color-text);
}

h1,
.h1 {
  font-size: var(--font-size-large);
  margin-top: 0;
  margin-bottom: var(--spacing);
  font-weight: 700;
}

h2,
.h2 {
  font-size: 22px;
  margin-top: 0;
}

h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6 {
  font-size: var(--font-size-regular);
}

a {
  color: var(--color-accent);
}

a:hover,
a:focus {
  color: var(--color-accent-dark);
}

.text-accent {
  color: var(--color-accent);
}

.help-block {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

/* surfaces */
.panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: var(--spacing);
}

.panel > .panel-heading {
  border-radius: 0;
}

.panel-primary > .panel-heading {
  color: var(--color-accent);
  background-color: var(--color-surface);
  border-bottom: 2px solid var(--color-ground);
}

.panel-title {
  font-size: var(--font-size-regular);
}

.panel-default > .panel-heading {
  color: var(--color-text);
  background-color: var(--color-ground);
  border-color: var(--color-ground);
}

.panel-group {
  margin-bottom: var(--spacing);
}

.panel-group .panel {
  border-radius: 0;
}

.panel-group .panel-default {
  border: 2px solid var(--color-ground);
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top-color: var(--color-ground);
}

.panel-title > a {
  color: inherit;
}

.panel-primary > .panel-body {
  padding: 0;

  /* overwrite padding - could not find HTML template */
  > div > .well {
    padding: 0;
  }
}

.well {
  background-color: var(--color-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.jumbotron,
.container .jumbotron {
  background-color: var(--color-surface);
  border-radius: 0;
}

.alert,
.label {
  border-radius: 0;
}

.modal-content,
.dropdown-menu {
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow-raised);
}

.dropdown-menu {
  font-size: var(--font-size-small);
}

.dropdown-menu > li > a {
  color: var(--color-text);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: var(--color-accent);
  background-color: var(--color-ground);
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  background-color: var(--color-accent);
}

/* buttons */
/* the theme adds gradients via e.g. `.btn-default:hover`, so also cover the states */
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn-lg,
.btn-sm,
.btn-xs {
  font-family: var(--font-family-base);
  border-radius: 0;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}

.btn:hover {
  background-color: var(--color-accent-dark);
}

.btn:active,
.btn.active {
  box-shadow: none;
}

.btn,
.btn-sm {
  font-size: var(--font-size-small);
}

.btn-lg {
  padding: var(--spacing-small) var(--spacing);
  font-size: var(--font-size-regular);
}

.btn-xs {
  font-size: var(--font-size-small);
}

/* cover every state, the theme paints hover/active/disabled states dark */
.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary.focus,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus {
  color: #fff;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  transition: background-color 250ms ease-in-out;
}

.btn.btn-primary:hover {
  background-color: var(--color-accent-dark) !important;
}

.btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  color: var(--color-text);
  background-color: var(--color-surface);
  border-color: var(--color-border);
  transition: all 250ms ease-in-out;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.btn-default:active:hover,
.btn-default.active:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default,
.open > .dropdown-toggle.btn-default:hover,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default.focus {
  color: var(--color-accent);
  background-color: #ffffff !important;
  border-color: var(--color-accent);
}

/* navigation components */
.pagination > li > a,
.pagination > li > span {
  font-size: var(--font-size-small);
  color: var(--color-accent);
  border-color: var(--color-border);
}

.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-radius: 0;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  color: #fff;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.nav-tabs > li > a {
  font-size: var(--font-size-small);
  color: var(--color-text);
  border-radius: 0;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--color-accent);
}

/* form controls */
.form-control {
  height: 36px;
  padding: var(--spacing-small) var(--spacing);
  font-size: var(--font-size-regular);
  color: var(--color-text);
  border-color: var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: none;
}

.form-control::placeholder {
  color: var(--color-placeholder);
}

.input-group input[type="file"] {
  font-size: var(--font-size-small);
  padding: 6px var(--spacing) 0;

  @media (min-width: 768px) {
    padding: 5px var(--spacing) 0;
  }
}

.input-group-addon {
  padding: var(--spacing-small) var(--spacing);
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  background-color: var(--color-ground);
  border-color: var(--color-border);
  border-radius: 0;
}

.select2-container--bootstrap .select2-selection {
  font-size: var(--font-size-regular);
  color: var(--color-text);
  border-color: var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

/* same height as .form-control */
.select2-container--bootstrap .select2-selection--single {
  line-height: var(--line-height-small);
  height: 36px;
  padding: 7px var(--spacing);
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
  border-color: var(--color-accent);
  box-shadow: none;
}

.select2-container--bootstrap .select2-dropdown {
  font-size: var(--font-size-regular);
  border-color: var(--color-accent);
  border-radius: 0;
  box-shadow: var(--shadow-raised);
}

.select2-container--bootstrap
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-accent);
}

.select2-container--bootstrap
  .select2-search.select2-search--dropdown
  .select2-search__field {
  font-size: var(--font-size-regular);
}

.select2-container .select2-choice,
.select2-container-multi .select2-choices {
  border-color: var(--color-border);
  border-radius: 0;
  background-image: none;
  box-shadow: none;
}

.select2-container-active .select2-choice,
.select2-container-multi.select2-container-active .select2-choices,
.select2-drop-active {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: none;
}

.select2-drop {
  border-radius: 0;
}

.select2-results .select2-highlighted {
  background-color: var(--color-accent);
}

.container {
  max-width: 1200px !important;
}

/* footer */
.site-footer {
  padding: var(--spacing) 0 var(--spacing-large);
  font-size: var(--font-size-small);
}

/* align with the header and content boxes, keep the padding on mobile */
@media (min-width: 768px) {
  .site-footer > .container {
    padding-left: 0;
    padding-right: 0;
  }
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing) var(--spacing-large);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__item--end {
  margin-left: auto;
}

.site-footer__links a {
  font-weight: 700;
  color: var(--color-text);
}

.site-footer__links a:hover,
.site-footer__links a:focus {
  color: var(--color-accent);
}

.pagination li:last-child {
  margin-right: var(--spacing-small-half);
}

.text-box-disabled {
  border: 1px solid var(--color-border);
  background-color: var(--color-ground);
  padding: var(--spacing-small);
}

.panel-item {
  margin-bottom: var(--spacing);
}

.panel-item-group {
  display: flex;
  gap: var(--spacing-small);

  > div {
    flex: 1;
  }

  > button {
    align-self: flex-start;
  }
}

.nav-pills--row {
  > li {
    margin-left: 0;
    margin-right: var(--spacing-small);
    margin-bottom: var(--spacing-small);

    + li {
      margin-left: 0;
    }

    > a {
      padding: var(--spacing-small-half) var(--spacing-small);
      white-space: initial;
      text-align: left;
      border-radius: 0;

      > i.fa {
        margin-right: var(--spacing-small-half);
      }
    }
  }
}

.card {
  position: relative;
  margin-bottom: var(--spacing);

  .card__controls {
    position: absolute;
    top: 1px;
    left: 16px;

    display: flex;
    background-color: white;

    > input {
      margin: 0 var(--spacing-small);
    }
  }

  .card__state {
    position: absolute;
    top: 1px;
    right: 16px;
    background-color: white;
    padding: var(--spacing-small-half);

    > p {
      margin: 0;
    }
  }

  .card__image {
    > a {
      margin: 0;
      border-radius: 0;
      border-color: var(--color-ground);
    }
  }

  .card__body {
    padding: var(--spacing);
    background-color: var(--color-ground);
  }

  .card__metadata {
    font-size: var(--font-size-small);
  }
}

.states {
  .states__list {
    margin: var(--spacing-small) 0 var(--spacing);
  }

  .states__list__item {
    display: inline-block;
    background-color: #f5f5f5;
    padding: var(--spacing-small-half) var(--spacing-small);
    margin-bottom: var(--spacing-small);
    margin-right: var(--spacing-small);
  }
}

.text-bold {
  font-weight: bold;
}