/* Color variables */
html, body {
  /* Main color palette */
  --main-color: #88005b;
  --complement-color: #1b365c;
  --backdrop-color: #f5f5f5;
  --highlighted-element-color: #00d1d1;
  /* HTML element color definitions */
  --disabled-button-color: #7689a6;
}

/* Custom classes */
.error {
  color: var(--indicate-process-failed-color);
  font-style: italic;
  padding: 0;
  margin: 0;
}

.modal-error-box {
  min-height: 1.5rem;
  margin: .5rem 0;
}

.mobile-label {
  width: 100%;
  padding: 0 .5rem;
  font-style: italic;
  font-weight: bold;
  color: var(--table-header-color);
}

img.failed {
  display: none;
}

@media (min-width: 750px) {
  .mobile-label {
    display: none;
  }
}

/* Custom search table styling */
.simple.search {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
  border-spacing: 0 !important;
}

  .simple.search .field-title {
    font-style: italic;
    color: var(--table-header-color);
    border-bottom: 2px solid rgba(0,0,0,.1);
    border-top: 1px solid rgba(0,0,0,.1) !important;
    background-color: var(--backdrop-color);
    border-radius: 0;
  }

  .simple.search tr {
    display: flex !important;
    flex-direction: column;
    border: 0 !important;
  }

  .simple.search .draggable-list {
    display: grid;
    grid-template-columns: auto 25% 25%;
  }

  .simple.search .delete-button {
    display: none;
  }

@media (max-width: 750px) {
  .simple.search .draggable-list {
    grid-template-columns: unset;
  }

  .simple.search .field-title {
    border-bottom: 1px solid rgba(0,0,0,.1);
  }

  .simple.search {
    border-top: 0;
  }
}

/* Simple search styling */
.simple.search > tbody > tr > td,
.simple.search > tbody > .draggable-list > tr > td,
.simple.search > tbody > .draggable-list > .draggable-item-container > .draggable-item > tr > td {
  border-bottom: none !important;
  padding: .25rem .75rem;
}

/* Custom welcome page styling */
table.table.welcome.page tr {
  display: flex !important;
}

  table.table.welcome.page tr td.full-width {
    width: 100%;
  }

table.table.welcome.page .draggable-list {
  display: grid !important;
  grid-template-columns: 1fr 25% 25%;
}

  table.table.welcome.page .draggable-list tr {
    border-bottom: 0 !important;
  }

  table.table.welcome.page .draggable-list .drop-zone {
    display: none;
  }

table.table.welcome.page td.delete-button {
  display: none;
}

table.table.welcome.page td.field-title {
  display: none;
}

@media (max-width: 750px) {
  table.table.welcome.page .draggable-list {
    grid-template-columns: unset;
    grid-template-rows: 1fr;
  }

  table.table.welcome.page td {
    padding: 0.25rem !important;
    margin-left: 0 !important;
  }
}

/* Custom detail styling */
.detail-record table.table-dictionary th {
  border-top: 2px solid rgba(100, 100, 100, 0.25) !important;
}

.detail-record table.table-dictionary .table-row td:not(.key-row):first-of-type > * {
  display: none;
}

/* Custom account styling */
.table.facts th, .table.facts td {
  padding: .25rem .75rem !important;
  min-width: 10rem;
  word-wrap: break-word;
}

.table.facts.color {
  margin: 1rem 0;
  background-color: var(--backdrop-color);
}

  .table.facts.color tr {
    border: none;
    display: grid;
    grid-template-columns: minmax(10rem, 18rem) minmax(50%, 1fr);
  }

    .table.facts.color tr:not(:first-child) {
      border-top: 1px solid rgba(0,0,0,.1);
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

  .table.facts.color td:last-child {
    width: 100%;
  }

.table.facts td:first-child {
  min-width: 12rem;
}

.table.facts.color.availability {
  display: inline-block;
}

  .table.facts.color.availability td:first-child {
    width: 20rem;
  }

  .table.facts.color.availability td:not(:first-child) {
    text-align: center;
  }
