html, body {
  /* Main color palette */
  --main-color: #405086;
  --complement-color: #7D8DC2;
  --backdrop-color: #f7f7f7;
  --highlighted-element-color: #990630;
  /* 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;
  font-family: Calibri, Arial;
}

.table-column button:disabled {
  background-color: var(--backdrop-color) !important;
  color: darkgray !important;
  --icon-color: darkgray !important;
}

.nav-text {
  font-size: .95rem;
}

.display-controls .option-trigger .option-list {
  width: 12rem;
}

.banner {
	max-width: 35rem !important;
}

img.failed {
  display: none;
}

.sidebar {
  background: linear-gradient(0deg, var(--complement-color) 0%, var(--main-color) 90%);
}

  .sidebar.collapsible .logo {
    width: 14.5rem !important;
    margin: .25rem !important;
    border: 2px solid white;
    border-radius: 5px !important;
    transition: opacity var(--transition-speed) ease;
    -webkit-transition: opacity var(--transition-speed) ease;
  }

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

@media (max-width: 870px) {
  .sidebar.collapsible {
    max-height: 23rem;
  }
}

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

@media (max-height: 560px) {
  .sidebar.collapsible .logo {
    opacity: 0;
  }
}
/* Caracol responsiveness copied... */

/* Responsive */
@media (max-width: 750px) {
  .table.table-column.table-dictionary colgroup, .table.table-column.table-dictionary thead {
    display: none;
  }

  .table.table-column.table-dictionary tr td {
    padding: .25rem 1rem;
  }

    .table.table-column.table-dictionary tr td:first-child {
      padding-top: .75rem;
    }

    .table.table-column.table-dictionary tr td:last-child {
      padding-bottom: .75rem;
    }

  .table-column.table-dictionary tr {
    border-top: 2px solid rgba(0,0,0,0.05) !important;
  }

  .table.table-column.table-dictionary tr > td {
    display: block;
  }

    .table.table-column.table-dictionary tr > td:last-child span {
      display: block;
      width: fit-content;
      margin-left: auto;
    }

  .detail-record .table-column.main-table > tr {
    display: grid;
  }

    .detail-record .table-column.main-table > tr td:last-child {
      grid-row: 1;
    }

  .detail-record .table-column.main-table colgroup,
  .detail-record .table-column.main-table thead {
    display: none;
  }

  .detail-record .table-column.main-table tr > td,
  .detail-record .table-column.main-table tr > th {
    display: block;
  }

  .detail-record .table-column.main-table .table-row tr {
    display: block;
  }
}

@media (min-width: 750px) {
  .detail-record .table-column.table-dictionary {
    min-width: 60rem;
  }

    .detail-record .table-column.table-dictionary td {
      padding-bottom: .15rem;
      padding-top: .15rem;
    }
}

@media (min-width: 500px) {
  .detail-record .table-column.main-table th {
    width: 35%;
    max-width: 18rem;
  }
}