body {
/*    display: flex;
    flex-direction: column;
    min-height: 100vh;*/
    font-family: Inter, sans-serif;
}

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
/*  font-family: Archivo, sans-serif;*/
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh; 
    overflow-y: auto;
    display: flex; /* Enable flexbox for the sidebar */
    flex-direction: column; /* Arrange items vertically */
    border-right: 2px solid var(--gray-line-100);
    background-color: #FFF;
}

.sidebar-content {
    flex: 1 0 auto; /* Allow content to expand and push the logout link down */
}

hr {
  border-top: 2px solid var(--gray-line-100);
  opacity: 1;
}

.logout-link {
    margin-top: auto; /* Push the logout link to the bottom */
}

.form-label {
  font-weight: 500;
}

.external-link {
  padding: 4px 8px;
  margin: 0 -8px;
  color
}

.dropdown-item {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.text-gray {
  color: var(--gray-text-600);
}

.code-row-name-link:hover {
  transition: color .2s ease;
  color: var(--color-brand);
}

.scans-link:hover, .scans-link:active {
  background: var(--gray-bg-100);
  color: var(--color-brand);
  border-radius: 4px;
}

.scans-link {
  color: var(--gray-text-600);
  /* padding: 4px 8px; */
  /*  margin: -4px 0;*/
  border-radius: 4px;
}

.scans-link.active {
  color: var(--color-brand);
  background-color: var(--gray-bg-100);
}

.stats-link {
  color: var(--gray-text-600);
}

.stats-link:hover, .stats-link:active, .stats-link:focus {
/*  color: var(--color-brand);*/
  background-color: var(--gray-bg-100);
}

.stats-link:hover > .metric, .stats-link:active > .metric, .stats-link:focus > .metric {
  color: var(--color-brand);
/*  background-color: var(--gray-bg-100);*/
}

.stats-link.active {
/*  color: var(--color-brand);*/
  background-color: var(--gray-bg-100);
  border-left: 1px solid var(--color-brand);
}

.stats-link.active > .metric {
  color: var(--color-brand);
}

.code-list-dropdown .dropdown-toggle:after {
  display: none;
}

.external-link:hover, .external-link:active {
  background: oklch(0.985 0.002 247.839);
  color: rgb(255,5,0);
  border-radius: 8px;
}

.card-body:hover, .card-body:active {
  background-color:#F8F8F8;
}

.codes-list .code-row:first-child {
  border-top-right-radius: .375rem;
  border-top-left-radius: .375rem;
}

.code-row:last-child {
  border-bottom: 1px solid #dee2e6 !important;
  border-bottom-left-radius: .375rem;
  border-bottom-right-radius: .375rem;
}

.btn-brand-red {
  background-image: linear-gradient(rgb(255,121,21), rgb(255,5,0));
  transition: background-color 0.3s ease;
  color: #fff;
  border-color:transparent !important;
  --bs-btn-padding-y: 0.5625rem;
  --bs-btn-padding-x: 1rem;
}

.btn-brand-red:hover {
  background-image: linear-gradient(rgb(240, 110, 19), rgb(240, 4, 0));
  cursor: pointer;
  color: #fff;
}

.btn-brand-red-subtle {
  background-image: linear-gradient(rgba(255,121,21,0.1), rgba(255,5,0,0.1));
  color: rgb(255,5,0);
  border-color:transparent !important;
  --bs-btn-padding-y: 0.5625rem;
  --bs-btn-padding-x: 1rem;
}

.btn.btn-brand-red-subtle:hover {
  background-image: linear-gradient(rgba(255,121,21,0.15), rgba(255,5,0,0.15));
  color: rgb(255,5,0);
}

.btn:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
/*  color: #fff;*/
/*  text-decoration: none;*/
}

 

.btn-white:hover, .btn-white:focus {
  transition: color .2s ease;
  color: var(--color-brand);
}

#report_filter button {
  border: 1px solid rgb(222, 226, 230);
  font-size: 16px;
  height: auto;
  padding: .375rem .75rem;
}

.ms-options-wrap > .ms-options {
  border: 1px solid rgb(222, 226, 230) !important;
  margin-top: -2px !important;
} 

.ms-options-wrap > .ms-options > .ms-search input {
  border-bottom: 1px solid rgb(222, 226, 230) !important;
} 

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:focus(.collapsed) {
  box-shadow: none !important;
}

.accordion-button:focus:not(.collapsed) {
  box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:not(.collapsed) {
  background-color: oklch(0.985 0.002 247.839);
}

.card {
  border: 2px solid rgb(238, 242, 248);
}

.card-footer {
  border-top: 2px solid rgb(238, 242, 248);
}

.card-footer .dropdown {
  border-left: 2px solid rgb(238, 242, 248) !important;
}

.btn-light {
  background-color:#FBFBFB !important;
}

.border-light {
  border: 1px solid rgb(238, 242, 248) !important;
}


.text-sm {
  font-size: .85rem;
}

.text-xsm {
  font-size: .6rem;
}

footer {
    margin-top: auto; 
}

a.nav-link {
  padding: 0.65rem;
  border-radius: 0.5rem;
  color: oklch(0.373 0.034 259.733);
/*  color: #aaa;*/
}

a.nav-link:hover {
  transition: color .2s ease;
  color: rgb(255,5,0);
  background: var(--gray-bg-100);
}

a.nav-link:active, a.nav-link:focus {
  color: var(--color-brand);
  background: var(--gray-bg-100);
}

a.nav-link.active {
  color: var(--color-brand);
  background: var(--gray-bg-100);
  font-weight: var(--fw-semi-bold);
}

.nav-item {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.btn-green {
  background-color: #17C653; 
  color: #fff
}

.btn-green:hover {
  background-color: #37D270; 
  color: #fff
}

.btn-green:active {
  background-color: #11AB49 !important;
  color: #fff !important;
}

.btn-green:focus-visible {
  background-color: #17C653 !important;
  color: #fff !important;
  border: 1px solid #333;
}

.footer-content {
  padding: 0.65rem 0;
}

.alert-success {
  color: oklch(0.527 0.154 150.069);
/*  border-color: #17C653;*/
  background-color: oklch(0.982 0.018 155.826);
}

.alert-danger {
/*  color: rgb(249, 249, 249);*/
/*  color: oklch(0.444 0.177 26.899);*/ /* darker */
/*  border-color: #F8285A;*/
  color: rgb(220,53,69);
  background-color: oklch(0.971 0.013 17.38);
/*  color: oklch(0.505 0.213 27.518)*/

/*  background-color: #F8285A;*/
}

.debug {
  transform: translateX(-70%) translateY(-300%) rotate(270deg);
}

@media (min-width: 768px) {
  #code-dropdown {
    width: 220px;
  }
}

@media (min-width: 1024px) {
  #code-dropdown {
    width: 220px;
  }
}

@media (max-width: 1024px) {
  #code-dropdown {
    max-width: 220px;
  }
}

@media (min-width: 1200px) {
  #code-dropdown {
    width: 600px;
  }
}

@media (min-width: 1400px) {
  #code-dropdown {
    width: 800px;
  }
}

/* COLOR */


/* OTHER */
.card {
    --bs-card-meta-spacer-y: 1.5rem;
    --bs-card-row-spacer-y: 4rem;
    --bs-card-row-spacer-x: 2.5rem;
    position: relative;
    width: 100%;
}

.card {
    --bs-card-spacer-y: 2rem;
    --bs-card-spacer-x: 2rem;
    --bs-card-title-spacer-y: 1.5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: 0px;
    --bs-card-border-color: #f1f4f8;
    --bs-card-border-radius: 0.375rem;
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: calc(0.375rem);
    --bs-card-cap-padding-y: 1.5rem;
    --bs-card-cap-padding-x: 2rem;
    --bs-card-cap-bg: rgba(22, 28, 45, 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: #fff;
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 1.25rem;
    word-wrap: break-word;
    background-clip: border-box;
    background-color: var(--bs-card-bg);
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--bs-card-box-shadow);
    color: var(--bs-body-color);
    display: flex;
    flex-direction: column;
    height: var(--bs-card-height);
    min-width: 0;
}

.shadow-light-lg {
    box-shadow: 0 1.5rem 4rem rgba(22, 28, 45, .05) !important;
}

:root {
  --color-brand: rgb(255,5,0);
  --gray-bg-100: oklch(0.985 0.002 247.839);
  --gray-line-100: rgb(238, 242, 248);
  --gray-text-600: oklch(0.551 0.027 264.364);
  --fw-semi-bold: 600;
  --green-600: oklch(0.627 0.194 149.214);
}