* {
  outline: none !important;
}

:root {
  font-size: $font-size-root;
  > body {
    font-family: $font-family-sans-serif;
  }
}

h1 {
  font-size: 36px;
  line-height: 48px;
}

h2 {
  font-size: 24px;
  line-height: 36px;
}

h3 {
  font-size: 21px;
  line-height: 30px;
}

h4 {
  font-size: 18px;
  line-height: 22px;
}

h5 {
  font-size: 16px;
  line-height: 18px;
}

h5 {
  font-size: 14px;
  line-height: 16px;
}

// Navs
.nav-tabs {
  .nav-item {
    margin-right: 0.15rem;
    a.active {
      cursor: default;
    }
  }
}

// card (substitute panel of bootstrap3)
.card {
  margin-bottom: 20px;
  border-radius: $card-border-radius;
}

.card-header {
  font-weight: 700;
  text-transform: none;
  border-radius: $card-border-radius;
}

.card-header:first-child {
  border-radius: $card-border-radius;
}

// Well (substitute Well of bootstrap3)
.card.well {
  min-height: 20px;
  padding: $card-spacer-y $card-spacer-x;
  border-radius: 3px;
}

// Dropdowns
.dropdown {
  .dropdown-toggle.btn.disabled {
    cursor: not-allowed;
  }
}

// agile-admin style
.dropdown-menu {
  padding-bottom: 8px;
  margin-top: 0px;
  border: 1px solid $border;
  border-radius: $radius;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;
}

.dropdown-menu > li > a {
  width: 100%;
  padding: 9px 20px;
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
  background: $extralight;
}

// btn-light (substitute for btn-default of bootstrap3)  (agile-admin style)
.btn-light,
.btn-light.disabled {
  color: $bodytext;
  $this-color: $btn-default-bgcolor;
  background: $this-color;
  border: 1px solid $this-color;

  &:hover,
  &:focus,
  &.focus {
    color: $bodytext;
    background: $this-color;
    border: 1px solid $this-color;
    opacity: 0.8;
  }

  &:active &.active {
    box-shadow: none;
  }
}

.btn-light.btn-outline {
  background-color: transparent;

  &:hover,
  &:focus,
  &.focus {
    background: $btn-default-bgcolor;
  }
}

//Modals
.modal-content {
  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
}

.modal-header {
  border-bottom: 1px solid #e5e5e5;
}

.modal-footer {
  border-top: 1px solid #e5e5e5;
}

// col-form-label (substitute for control-label of bootstrap3)
.col-form-label {
  text-align: right;
}

// label
label {
  font-weight: 700;
}

// disabled button (reproduction from bootstrap3.)
// see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
}

// progress bar
.progress {
  margin-bottom: 18px;
  overflow: hidden;
}