/* Page-level rules from the reference app's own components, plus the few
   pieces that replace Vue plugins (date picker, image preview). */

#app { text-align: center; }

/* header */
.lcd-header img { position: absolute; top: 1rem; filter: grayscale(100%); transition: all .25s ease-in-out; }
.lcd-header img:hover { filter: none; }
.lcd-header h6 { margin-top: -.75rem; padding-left: 2rem; padding-right: 2rem; }
.lcd-header .pic-left { left: 1rem; }
.lcd-header .pic-right { right: 1rem; }

/* footer */
.layout-footer { background-color: transparent; font-size: .75em; color: #ced4db; }

.data_release_number { color: dimgray; font-size: 23px; }

/* form */
#button-form-group, .form-group + .form-group { margin-top: 5px; }
._width-65 { width: 65% !important; }
.custom-table-left { text-align: left; }
.custom-table-right { text-align: right; }
.flex-container { display: flex; width: 100%; }
.flex-column { display: flex; flex-direction: column; width: 100%; }
.element1b { padding-right: 5px; width: calc(100% - 270px); }
.element2b { padding-left: 5px; max-width: 280px; }
.element2s { padding-top: 5px; }
#help-modal .body, #details-modal .body { overflow-y: auto; max-height: 50vh; }
.modal .body { border-bottom-left-radius: .25rem; border-bottom-right-radius: .25rem; }
#details-modal .row .column:nth-child(odd) { font-weight: 700; }
#details-modal img { max-height: 30vh; max-width: 50vw; }
#date-input { position: relative; }
#date-input input { background-color: #fff !important; cursor: pointer; }
.form-input > select.lcd-select { width: 100%; cursor: pointer; font-family: inherit; }
.form-input > select.lcd-select.-empty { color: #868e96; }
.form-input > select.lcd-select option { color: #343a40; }
.lcd-checkbox { text-align: left; padding: .25rem 0; }

.date-popover {
  position: absolute; z-index: 10; top: calc(100% + 8px); left: 0;
  display: flex; gap: 1rem; padding: .75rem 1rem; text-align: left;
  background: #fff; border: 1px solid #ced4db; border-radius: .25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.date-popover[hidden] { display: none; }
.date-popover label { display: flex; flex-direction: column; font-size: .875rem; color: #6c757d; gap: .25rem; }
.date-popover input { padding: .35rem .5rem; border: 1px solid #ced4db; border-radius: .25rem; font: inherit; color: #343a40; }

/* table */
.dotted-underline { text-decoration-line: underline; text-decoration-style: dotted; cursor: default; }
.lcd-hover .tooltip { left: 100%; top: 50%; transform: translateY(-50%); }
.lcd-hover .tooltip > .arrow { top: 50%; margin-top: -6px; }
img.image.lcd-thumb { cursor: pointer; width: 74px; }
.lcd-preview { position: fixed; max-width: min(520px, 90vw); white-space: normal; }
.lcd-preview > .arrow { top: 50%; margin-top: -6px; right: -6px; }
.lcd-preview img { max-width: 100%; }

/* pagination colours used by the reference */
.pagination .item, .pagination .item.-disabled:hover { background-color: transparent; border-color: #1684a9; color: #1684a9; }
.pagination .item:hover { background-color: #1684a9; color: #fff; }
.pagination .item.-active { background-color: #1684a9 !important; color: #fff; }
.pagination .item.-previous { margin-left: 0 !important; }
.pagination .item.-disabled { cursor: default; }