.content-wrapper {
  --page-ink: #1f2433;
  --page-muted: #6f7482;
  --page-border: rgba(31, 36, 51, .1);
  --page-surface: #fff;
  --page-primary: #fec710;
  --page-primary-soft: rgba(254, 199, 16, .14);
}

.page-shell {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.page-hero {
  align-items: center;
  background:
    linear-gradient(90deg, var(--page-primary-soft), transparent 28rem),
    #fff;
  border: 1px solid var(--page-border);
  border-radius: .9rem;
  box-shadow: 0 .35rem 1rem rgba(31, 36, 51, .05);
  color: var(--page-ink);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  overflow: hidden;
  padding: .65rem 1rem;
  position: relative;
  width: 100%;
}

.page-hero::before {
  background: var(--page-primary);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: .32rem;
}

.page-hero__content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  position: relative;
  z-index: 1;
}

.page-hero__kicker {
  align-items: center;
  background: rgba(254, 199, 16, .16);
  border: 1px solid rgba(213, 157, 0, .18);
  border-radius: 999px;
  color: #6f5200;
  display: inline-flex;
  font-size: .64rem;
  font-weight: 800;
  gap: .45rem;
  letter-spacing: .08em;
  padding: .22rem .5rem;
  text-transform: uppercase;
}

.page-hero h4 {
  color: var(--page-ink);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
}

.page-hero p {
  color: var(--page-muted);
  font-size: .82rem;
  margin: 0;
  max-width: 34rem;
}

.page-hero__summary {
  align-items: center;
  background: rgba(31, 36, 51, .035);
  border: 1px solid rgba(31, 36, 51, .08);
  border-radius: .75rem;
  color: var(--page-ink);
  display: flex;
  flex-direction: row;
  gap: .65rem;
  min-width: auto;
  padding: .45rem .75rem;
  position: relative;
  z-index: 1;
}

.page-hero__summary span {
  color: var(--page-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.page-hero__summary strong {
  font-size: 1.3rem;
  line-height: 1;
}

.page-filter-card,
.page-table-card {
  background: var(--page-surface);
  border: 1px solid var(--page-border);
  border-radius: 1.25rem;
  box-shadow: 0 .8rem 2rem rgba(31, 36, 51, .06);
}

.page-filter-card {
  padding: 1.25rem;
}

.page-filter-card__header,
.page-table-card__header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.page-filter-card__header h5,
.page-table-card__header h5 {
  color: var(--page-ink);
  font-weight: 800;
  margin: 0;
}

.page-filter-card__header p,
.page-table-card__header p {
  color: var(--page-muted);
  font-size: .88rem;
  margin: .25rem 0 0;
}

.page-filter-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: flex-end;
}

.page-filter-card .form-label {
  color: var(--page-ink);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.page-filter-card .form-control,
.page-filter-card .form-select {
  border-color: var(--page-border);
  border-radius: .85rem;
  min-height: 2.9rem;
}

.page-filter-card .form-control:focus,
.page-filter-card .form-select:focus {
  border-color: var(--page-primary);
  box-shadow: 0 0 0 .2rem rgba(254, 199, 16, .16);
}

.page-table-card {
  overflow: hidden;
}

.page-table-card__header {
  margin: 0;
  padding: 1.1rem 1.25rem;
}

.page-table-card .card-datatable table.table {
  font-size: .78rem;
}

.page-table-heading {
  color: var(--page-ink);
}

.page-time {
  font-weight: 800;
  white-space: nowrap;
}

.page-time.is-safe {
  color: #1f8a4c;
}

.page-time.is-warning {
  color: #c77700;
}

.page-time.is-expired {
  color: var(--page-ink);
}

.page-multicups {
  color: #1f8a4c;
  font-weight: 800;
}

.page-modal-close {
  z-index: 999999;
}

.customer-docs-modal-body {
  max-height: 80vh;
  overflow-y: auto;
}

.is-hidden-by-default {
  display: none;
}

.page-actions {
  align-items: center;
  display: inline-flex;
  gap: .18rem;
}

.page-actions a,
.page-actions button {
  align-items: center;
  border-radius: .6rem;
  color: #4b5262;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  transition: background-color .16s ease, color .16s ease;
  width: 2rem;
}

.page-actions a:hover,
.page-actions a:focus,
.page-actions button:hover,
.page-actions button:focus {
  background: rgba(254, 199, 16, .16);
  color: var(--page-ink);
}

.container-p-y > h4.py-3,
.container-fluid > h4.py-3,
.container-xxl > h4.py-3,
form > h4.py-3,
form > .d-flex > h4.py-3 {
  align-items: center;
  background:
    linear-gradient(90deg, rgba(254, 199, 16, .14), transparent 28rem),
    #fff;
  border: 1px solid rgba(31, 36, 51, .1);
  border-radius: .9rem;
  box-shadow: 0 .35rem 1rem rgba(31, 36, 51, .05);
  color: #1f2433;
  display: flex;
  font-size: 1.25rem;
  font-weight: 800;
  gap: .55rem;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: .9rem !important;
  overflow: hidden;
  padding: .65rem 1rem .65rem 1.15rem !important;
  position: relative;
  width: 100%;
}

.content-wrapper .container-p-y > h4.py-3 + form:not(.card-body),
.content-wrapper .container-fluid > h4.py-3 + form:not(.card-body),
.content-wrapper .container-xxl > h4.py-3 + form:not(.card-body),
.content-wrapper .container-p-y > h4.py-3 + .card,
.content-wrapper .container-fluid > h4.py-3 + .card,
.content-wrapper .container-xxl > h4.py-3 + .card {
  margin-top: .9rem;
}

.content-wrapper .container-p-y > h4.py-3 + form:not(.card-body),
.content-wrapper .container-fluid > h4.py-3 + form:not(.card-body),
.content-wrapper .container-xxl > h4.py-3 + form:not(.card-body) {
  background: var(--page-surface);
  border: 1px solid var(--page-border);
  border-radius: 1rem;
  box-shadow: 0 .35rem 1rem rgba(31, 36, 51, .05);
  margin-bottom: .9rem;
  padding: 1rem;
}

.content-wrapper .container-p-y > h4.py-3 + form:not(.card-body) .form-label,
.content-wrapper .container-fluid > h4.py-3 + form:not(.card-body) .form-label,
.content-wrapper .container-xxl > h4.py-3 + form:not(.card-body) .form-label {
  color: var(--page-ink);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.content-wrapper .container-p-y > h4.py-3 + form:not(.card-body) .form-control,
.content-wrapper .container-p-y > h4.py-3 + form:not(.card-body) .form-select,
.content-wrapper .container-fluid > h4.py-3 + form:not(.card-body) .form-control,
.content-wrapper .container-fluid > h4.py-3 + form:not(.card-body) .form-select,
.content-wrapper .container-xxl > h4.py-3 + form:not(.card-body) .form-control,
.content-wrapper .container-xxl > h4.py-3 + form:not(.card-body) .form-select {
  border-color: var(--page-border);
  border-radius: .85rem;
  min-height: 2.8rem;
}

.content-wrapper .container-p-y > h4.py-3 + form:not(.card-body) .form-control:focus,
.content-wrapper .container-p-y > h4.py-3 + form:not(.card-body) .form-select:focus,
.content-wrapper .container-fluid > h4.py-3 + form:not(.card-body) .form-control:focus,
.content-wrapper .container-fluid > h4.py-3 + form:not(.card-body) .form-select:focus,
.content-wrapper .container-xxl > h4.py-3 + form:not(.card-body) .form-control:focus,
.content-wrapper .container-xxl > h4.py-3 + form:not(.card-body) .form-select:focus {
  border-color: var(--page-primary);
  box-shadow: 0 0 0 .2rem rgba(254, 199, 16, .16);
}

.content-wrapper .card:not(.auth-access-card):not(.modal-content) {
  border: 1px solid var(--page-border);
  border-radius: 1rem;
  box-shadow: 0 .35rem 1rem rgba(31, 36, 51, .05);
}

.content-wrapper .card:not(.auth-access-card) > .card-header {
  background: #fff;
  border-bottom-color: rgba(31, 36, 51, .08);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.content-wrapper .card-datatable {
  border-radius: inherit;
}

.content-wrapper .card-datatable > .table,
.content-wrapper .card-datatable > .table-responsive > .table,
.content-wrapper .table-responsive > .table {
  margin-bottom: 0;
}

.content-wrapper .card-datatable table.table thead th {
  background: #f8f9fc;
  border-bottom: 1px solid var(--page-border);
  color: var(--page-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.content-wrapper .card-datatable table.table tbody td {
  border-color: rgba(31, 36, 51, .075);
}

.content-wrapper .card-datatable table.table tbody tr {
  transition: background-color .16s ease;
}

.content-wrapper .card-datatable table.table tbody tr:hover {
  background: rgba(254, 199, 16, .055);
}

.container-p-y > h4.py-3::before,
.container-fluid > h4.py-3::before,
.container-xxl > h4.py-3::before,
form > h4.py-3::before,
form > .d-flex > h4.py-3::before {
  background: #fec710;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: .32rem;
}

.container-p-y > h4.py-3 i,
.container-fluid > h4.py-3 i,
.container-xxl > h4.py-3 i,
form > h4.py-3 i,
form > .d-flex > h4.py-3 i {
  color: #6f5200;
  font-size: 1.25rem;
  margin-right: .1rem !important;
  position: relative;
  z-index: 1;
}

.container-p-y > h4.py-3 > *,
.container-fluid > h4.py-3 > *,
.container-xxl > h4.py-3 > *,
form > h4.py-3 > *,
form > .d-flex > h4.py-3 > * {
  position: relative;
  z-index: 1;
}

form > .d-flex > h4.py-3 {
  flex: 1 1 18rem;
}

@media (max-width: 575.98px) {
  .page-hero,
  .page-filter-card__header,
  .page-table-card__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-hero__content {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-hero__summary,
  .page-filter-card__actions,
  .page-filter-card__actions .btn {
    width: 100%;
  }

  .container-p-y > h4.py-3,
  .container-fluid > h4.py-3,
  .container-xxl > h4.py-3,
  form > h4.py-3,
  form > .d-flex > h4.py-3 {
    align-items: flex-start;
    border-radius: .8rem;
    font-size: 1.1rem;
    padding: .6rem .85rem .6rem 1rem !important;
  }
}