:root {
  --bg: #f9f9f9;
  --bg-light: #f9f9f9;
  --bg-darker: #1d1f1f;
  --bg-dark: #242525;
  --border-color: #cccccc;

  --bs-primary: #28a745;
  --bs-primary-dark: #237d36;
  --bs-primary-rgb: 40, 167, 69;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: #218838;
  --bs-btn-hover-border-color: #1e7e34;
  --bs-btn-active-bg: #1e7e34;
  --bs-btn-active-border-color: #1c7430;
  --bs-primary-text-emphasis: #0f5132;
  --bs-primary-bg-subtle: #d1eddb;
  --bs-primary-border-subtle: #a3cfbb;
  --bs-focus-ring-color: rgba(40, 167, 69, 0.25);
  --bs-link-color: #28a745;
  --bs-link-hover-color: #3dc05c;
  --bs-info-border-subtle: #bee5eb;  
}

/* General */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.footer {
  margin-top: auto;
}

/* Start Print */
@media print {
  @page  
  { 
      margin: 15mm; 
  } 
  body  
  { 
      margin: 0px; 
  } 
  nav {
    display: none !important;
  }
  div.container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  table.data-table {
    table-layout: fixed;
    font-size:2mm;
    width: 100%;
    margin: 0 auto;
  }
  table.data-table-sm {
    font-size:1.5mm !important;
  }
  .img-container img {
    filter: none !important;
  }
  /* Fixing bootstrap table border print issues */
  table.data-table-unbordered {
    border-collapse: separate;
    border: 0px solid;
    border-spacing: 0;
    border-color: var( --border-color) ;
  }
  table.data-table-unbordered tr {
      border: 0px solid;
      border-style: none;
      border-width: 0;
  }
  table.data-table-unbordered td {
      border: 0px solid;
      border-color: var( --border-color);
      border-bottom: 1px solid var( --border-color);
  }
  table.data-table-unbordered th {
      border: 0px solid;
      border-color: var( --border-color);
      border-bottom: 1px solid var( --border-color);
  }
}
/* End Print */

/* Further fixing bootstrap table border issues */
table.data-table-bordered {
  border-collapse: separate;
  border: 0px solid;
  border-spacing: 0;
  border-color: var( --border-color) ;
  border-right: 1px solid var( --border-color);
}

table.data-table-bordered tr {
    border: 0px solid;
    border-style: none;
    border-width: 0;
}

table.data-table-bordered td {
    border: 0px solid;
    border-color: var( --border-color);
    border-left: 1px solid var( --border-color);
    border-bottom: 1px solid var( --border-color);
}

table.data-table-bordered th {
    border: 0px solid;
    border-color: var( --border-color);
    border-left: 1px solid var( --border-color);
    border-top: 1px solid var( --border-color);
    border-bottom: 1px solid var( --border-color);
}

/* Animations */
.fade-in {
  opacity: 0;
  transition: opacity 0.4s ease-in;
}

.fade-in.show {
  opacity: 1;
}

.fade-out {
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.fade-out.hide {
  opacity: 0;
}

.spinner-border-big {
  width: 5rem;
  height: 5rem;
  padding: 25px;
}

.spinner-border-huge {
  width: 10rem;
  height: 10rem;
  padding: 25px;
}

.spinner-container-big {
  background-color: rgba(255, 255, 255, 0.8); /* Translucent background */
  padding: 20px;
  border-radius: 65px;
}

.spinner-container-huge {
  background-color: rgba(255, 255, 255, 0.8); /* Translucent background */
  padding: 50px;
  border-radius: 65px;
}

/* Theming */
.subtle-bg {
  background-color: var(--bg-light);
}


/* DARK MODE */
[data-bs-theme="dark"] {
  --bg: var(--bg-darker);
  --bs-body-bg: var(--bg-dark);
  --border-color: #454a4f;
  
  .img-container img {
    filter: invert(1);
  }
  .subtle-bg {
    background-color: var(--bg-darker);
  }

  .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffff'/%3e%3c/svg%3e");
  }

  /* Decrease link weight in dark mode */
  .nav-link, a.nav-link, .file-link {
    font-weight: 400;
  }
}

/* Form controls */
.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2328a745'/%3e%3c/svg%3e");
}

.form-check-input {
  background-color: #fff;
  border-color: #dee2e6;  
}

/* Nav Pills */
.nav-pills .nav-link.active {
  background-color: var(--bs-primary-dark);
  border-color: var(--bs-primary-dark);
}

/* Increase font weight of all nav links and file links for better visibility */
.nav-link, a.nav-link, .file-link {
    font-weight: 500;
}

/* Containers */
.img-container {
  max-width: 1800px;
  overflow-x: auto;
  margin: 0 auto; /* Center align */
}

table.data-table-sm {
  font-size:0.8em;
}

td.td-sml {
    width:0.1%;
    white-space: pre;
    padding: 2px 5px;
}

a {
  color: var(--bs-link-color);
}
a:hover, a:focus {
  color: var(--bs-link-hover-color);
}