@font-face {
  font-family: 'CriativaSans';
  src: url('../fonts/CriativaSans-Regular.ttf');
}

html, body {
  /* Main color palette */
  --main-color: #000f9f;
  --main-color-rgb: 0, 15, 159;
  --complement-color: #000f9f;
  --backdrop-color: #edede7;
  --highlighted-element-color: #000f9f;
  /* HTML element color definitions */
  --button-color: var(--complement-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;
  --disabled-button-color: #555C6C;
  font-family: CriativaSans, Adjusted Arial Fallback, sans-serif;
}


/* Select styling */
select[multiple] option:checked {
  background-color: var(--main-color);
  color: white !important;
}

select[multiple] option {
  padding: .25rem;
}

select:not([multiple]) {
  padding: .15rem 0;
}


/* Button styling */
button:not(.icon):not(:has(svg)),
.button,
.radio-button:not(.icon):not(:has(svg)) {
  border-radius: 2rem !important;
  padding: 0.1rem .75rem !important;
}

.radio-button.secondary {
  background-color: white !important;
  border-width: 1.5px !important;
}

.radio-button a.label {
  color: black;
}

/* Table styling */
.table > .spinner-container > tbody > tr.clickable:hover {
  background-color: rgba(var(--main-color-rgb), 0.1) !important;
  opacity: 1 !important;
}

.table > thead > tr > th,
.table-header {
  font-style: normal !important;
}

.table > thead {
  background-color: var(--background-color) !important;
}

.controls.searchform {
  display: block;
}

.table.record-list tbody th {
  min-width: fit-content !important;
  color: var(--main-color);
}

.navbar-brand {
  font-weight: 700;
}

.option-list {
  border-radius: var(--border-radius);
}

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

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

.mobile-bar .logo-wrapper {
  display: none !important;
}

.tile-wrapper {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important;
}

.list-content .table-row caption {
  font-size: 1rem !important;
}

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