html, body {
  /* Main color palette */
  --main-color: #00102B;
  --complement-color: #0063c3;
  --backdrop-color: #e6e6e6;
  --highlighted-element-color: #009dff;
  /* HTML element color definitions */
  --button-color: var(--complement-color);
  --selection-checkbox-color: var(--button-color);
  --table-header-color: var(--complement-color);
  --table-caption-color: var(--complement-color);
  --link-color: var(--complement-color);
  --selected-option-color: var(--highlighted-element-color);
  --indicate-process-running-color: var(--highlighted-element-color);
  --indicate-process-succeeded-color: green;
  --indicate-process-failed-color: red;
  --icon-color: white;
  /* Global variables */
  --transition-speed: 1s;
  --top-row-height: 4rem;
  font-family: Helvetica, Arial, sans-serif;
}

div.main .top-row {
  display: none;
  visibility: hidden;
}

span.navbar-title {
  visibility: hidden;
}

.top-bar .logo img {
  border-radius: 0 !important;
}

:where(:not(option):not(td)) {
  outline-color: color-mix(in srgb, #f89406 0%, transparent);
}

:where(input, textarea, select, button) {
  outline-color: color-mix(in srgb, #f89406 0%, transparent);
}

:where(:not(option):not(td)):focus-visible {
  outline-color: #f89406;
}

.nav.flex-column {
  justify-content: flex-end;
  margin-right: 0 !important;
}

.top-bar .nav-link.active {
  background-color: rgba(0,0,0,0) !important;
}

  .top-bar .nav-link.active .text-element {
    border-bottom: solid 1.5px white;
  }

.top-bar .nav-link {
  padding: 0.5rem !important;
}

.top-bar .nav-link .text-element {
  padding-left: 1rem !important;
  border-radius: 0;
  font-weight: 700;
  text-transform: lowercase;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 1rem;
}

.top-bar .nav-link .icon {
  display: none !important;
}

.detail-content .image-search-controls {
  grid-template-columns: repeat(3, auto);
}


img[src$="missing-image.jpg"] {
  width: auto !important;
  height: calc(4 * var(--icon-size)) !important;
}

/* 
  Custom styling for custom download icon, 
  will appear as download icon normally,
  And as shopping cart in the kiosk
*/
.kiosk-table path.download-icon {
  display: none;
}

.kiosk-table path.shopping-cart {
  display: inline !important;
}

@media (min-width: 871px) and (max-width: 1028px) {
  .sidebar.collapsible .logo {
    opacity: 0;
  }
}

@media (max-height: 560px) {
  .sidebar.collapsible .logo {
    opacity: 0;
  }
}