:root {
  /* Primary color */
  --layout-theme-primary-color: #33c3f0; /* aka rgb(51,195,240) */
  /* Primary colors for hovered elements */
  --layout-theme-primary-color-dark1: #1eaedb; /* aks rgb(30,174,219) */
  --layout-theme-primary-color-dark2: #0fa0ce; /* aks gb(15,160,206) */
  /* Error color */
  --layout-theme-common-error-color: #c33;
  /* Animations */
  --common-animation-time: 250ms;
  --common-effect-time: 500ms;
  /* Main colors */
  --common-error-color: #b00;
  --common-warn-color: #960;
  --common-success-color: #181;
  --common-tools-icon-size: 28px;
  /* Default table cell widths */
  --common-table-cell-amount-width: 14em;
  --common-table-cell-name-width: auto;
  --common-table-cell-location-width: 12em;
  --common-table-cell-unit-width: 5em;
  --common-table-cell-matched-width: 8em;
}

/* Basic layout */

/* Issue #7: Widen default Skeleton page width */
.container {
  /* Re-limit max width of column: allow it to be wider */
  max-width: 1600px;
}

/* Loader splash */
.loader-splash {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity var(--common-animation-time);
}
.loader-splash.hidden {
  opacity: 0;
  pointer-events: none;
}
.loader-splash.full-cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.loader-splash.full-size {
  flex: 1;
}
/* Background colors */
.loader-splash.bg-white,
.loader-splash.bg-page {
  background-color: #fff;
}
.loader-splash.bg-black {
  background-color: #000;
}
.loader-splash.bg-primary {
  background-color: var(--layout-theme-primary-color);
}
.loader-splash.bg-neutral,
.loader-splash.bg-gray {
  background-color: #999;
}

/* Loader spinner */
.loader-spinner {
  position: relative;
}
.loader-spinner,
.loader-spinner::before {
  /* Full-size */
  height: 40px;
  width: 40px;
}
.loader-spinner::before {
  /* Half-size offset */
  margin-top: -20px;
  margin-left: -20px;
  /* Colors */
  border: 2px solid var(--layout-theme-primary-color);
  border-top-color: transparent;
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  animation: loader-spinner-rotating-spinner 1.5s linear infinite;
}
@keyframes loader-spinner-rotating-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Multicolumn process detail list */
.details-list {
  column-gap: 20px;
  column-rule: 1px solid #eee;
  column-width: 300px;
  list-style-type: none;
  line-height: 1.3;
}
.details-list li {
  margin: 10px 0;
}
/* // UNUSED? Using the same width on the all scren widths?
 * @media (width >= 1300px) {
 *   .details-list {
 *     column-width: 350px;
 *   }
 * }
 */
.details-list label {
  display: inline;
  opacity: 0.5;
  font-weight: normal;
}
