html {
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 11rem;
  min-height: 100%;
}

.breadcrumb {
  margin-top: 10px;
  margin-bottom: 10px;
}

.navbar {
  border-radius: 2px;
}


/* footer */
.site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem 0;
}
.site-footer hr {
  margin-top: 10px;
  margin-bottom: 10px;
}
.footer-wrapper {
  padding: 10px 20px;
  border-radius: 3px;
}
.site-footer ul {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li {
  display: inline-block;
  list-style-type: none;
  margin-right: 15px;
}
.site-footer li a, .site-footer p.text {
  color: #3B3B3B;
  margin: 0;
}

@media screen and (min-width: 1000px) {
  body {
    padding-bottom: 6rem;
  }
  .site-footer hr { display: none; }

  .site-footer p.text {
    float: right;
  }
}


/* the fan */
div.fan {
  height: 0.2em;
  background-color: #EAAB00;
  background-image: linear-gradient(to bottom, #eab92d, #c79810);
  background-repeat: repeat-x;
  width: 100%;
}
div.fan:before {
  height: 0.2em;
  width: 33%;
  display: block;
  content: "";
  float: left;
  background-color: #EAAB00;
  background-image: linear-gradient(to bottom, #981E32, #912a3b);
  background-repeat: repeat-x;
}
div.fan:after {
  height: 0.2em;
  width: 33%;
  display: block;
  content: "";
  float: right;
  background-color: #EAAB00;
  background-image: linear-gradient(to bottom, #000000, #2b2929);
  background-repeat: repeat-x;
}


/* card */
.card-body {
  border-left: 3px solid #b9efe1;
}
/* matching with bs4 border color */
.card.border-primary .card-body {
  border-left: 3px solid #007bff;
}
.card.border-secondary .card-body {
  border-left: 3px solid #6c757d;
}
.card.border-success .card-body {
  border-left: 3px solid #28a745;
}
.card.border-danger .card-body {
  border-left: 3px solid #dc3545;
}
.card.border-warning .card-body {
  border-left: 3px solid #ffc107;
}
.card.border-info .card-body {
  border-left: 3px solid #17a2b8;
}
.card.border-light .card-body {
  border-left: 3px solid #f8f9fa;
}
.card.border-dark .card-body {
  border-left: 3px solid #343a40;
}
.card.border-white .card-body {
  border-left: 3px solid #fff;
}

.card-header-compact {
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  background-color: var(--bs-light);
  border-left: 1px solid var(--bs-primary);
  border-bottom: 1px solid var(--bs-primary);
}

.card-body-compact {
  padding: 0.5rem;
  font-size: 0.85rem;
  color: var(--bs-secondary);  
}

.data-row {
  display: grid;
  grid-template-columns: 200px 1fr; /* label | value */
  gap: 0.25rem 1rem;
  padding: 0.15rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.data-row:last-child {
  border-bottom: 0;
}

.data-label {
  font-weight: 500;
  color: var(--bs-secondary);
  align-self: start;
}

.data-value {
  color: var(--bs-body-color);
  text-align: left;
}


/* datatables */
.dataTables_info {
  font-style: italic;
}
table.dataTable {
  margin-bottom: 0 !important;
}
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting {
  padding-right: 34px;
}
/* for table-sm especially the sort arrows are squshed too close together */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
  right: 1.2em !important;
}
/* Bootstrap 5 tweak: do not underline links unless hovered over 
https://stackoverflow.com/questions/65480036/bootstrap-5-underline-default-changed
*/
a:not([class*="btn"]) {
  text-decoration: none;
}
a:not([class*="btn"]):hover {
  text-decoration: underline;
}
a.list-group-item-action:hover {
  text-decoration: none;
}
a.dropdown-item:hover {
  text-decoration: none;
}
a.nav-link:hover {
  text-decoration: none;
}
a.navbar-brand:hover {
  text-decoration: none;
}
/* end of Bootstrap 5 tweak*/

.form-control::placeholder {
  opacity: 0.50;
}

div.container[role="main"] {
  padding: 0 !important;
}

/* Tweaks for left sidebar navigation */

.sidebar-nav .nav-link {
  background-color: #f8f9fa;
  color: #495057;
  border-radius: 0;
  border-left: 4px solid transparent;
  margin-bottom: .25rem;
  font-size: .9rem;
  line-height: 1.3;
}


.sidebar-nav .nav-link.active {
  background-color: var(--bs-primary-bg-subtle);
  color: black;
  border-left-color: var(--bs-primary);
}

.sidebar-nav .nav-link:hover {
  background-color: var(--bs-primary-bg-subtle);
}

.sidebar-nav .nav-link.active:hover {
  background-color: var(--bs-primary-bg-subtle);
}

.sidebar-nav .nav-item {
  width: 100%;
}

.sidebar-nav .nav-link i {
  width: 1.5rem;
  opacity: .45;
}

/* Style for the nav-link with the special-style class */
.nav-link.special-style {
    color: black;
}

.nav-link.special-style.active {
    background-color: var(--bs-primary-bg-subtle);
    color: black;
    border-left: 4px solid transparent;
    border-left-color: var(--bs-primary);
}

.nav-link.special-style:hover {
    background-color: var(--bs-primary-bg-subtle);
}