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;
}

.sidebar.collapsible .logo {
  border-radius: 1rem !important;
  margin: .5rem !important;
  padding: .5rem;
  transition: opacity var(--transition-speed) ease;
  -webkit-transition: opacity var(--transition-speed) ease;
}

.sidebar.collapsible .logo img {
  border-radius: 0 !important;
}

.sidebar.collapsible.collapsed .logo {
  opacity: 0;
}

span.navbar-title {
  visibility: hidden;
}


: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-link .text-element {
  font-weight: 700;
  font-size: .85rem;
}

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

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