:root {
  --tblr-body-font-size: 1rem;
}

.alert {
  --tblr-alert-margin-bottom: 0.5rem;
}

/* This could be a bad default, but when do we need a card larger than 600px side? */
.page-body {
  > .card, > form {
    max-width: 600px;
  }
  > .card.card-wide {
    max-width: revert;
  }
}

.card-header-tabs {
  background-color: var(--tblr-gray-300);
}

.card-header {
  background-color: var(--tblr-gray-200);
}

.card.warning .card-header {
  background-color: var(--tblr-warning-bg-subtle);
}

.round-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #28a745;
  color: #fff;
  border-radius: 50%;
}

/* Stop the modal viewport from scrolling */
up-modal.with-sticky up-modal-viewport {
  overflow: visible !important;
}

/* Make <main> the scrolling container */
up-modal.with-sticky up-modal-content main {
  max-height: 90vh;
  overflow-y: auto;
}

/* Add some top margin to a sticky-top but only when in the main page body, not in the modal (it
already has some margin) */
.page > main .card.sticky-top {
  top: 1rem;
}

.datagrid .paging input {
  width: 4rem
}

#house-note-card-header {
  .icon-error {
    display: none;
    color: #ba0603;
  }

  &.status-saved .icon-status {
      color: #03ba46;
  }

  &.status-error {
    .icon-error {
      display: revert;
    }
    .icon-status {
      display: none;
    }
  }
}

.datagrid tr.totals {
  border-top: double 5px white;
}