/*
  Pixata.Blazor styles

  The components in this package used to rely on the host app having Bootstrap loaded, for a fairly small set of layout, form,
  button and utility classes. This file provides those styles, so the components look right on their own.

  The sizes and colours match Bootstrap 4.3.1 (MIT licensed, https://github.com/twbs/bootstrap), which is what the components
  were written against, so they look the same as they always did. Every class is prefixed with "pixata-", so nothing here can
  clash with your own CSS, whether or not you use Bootstrap.

  To fit the components to your own theme, override the custom properties below, either on :root or on any container...

    :root {
      --pixata-primary: #6f42c1;
      --pixata-border-radius: 0;
    }
*/

:root {
  --pixata-font-size: 1rem;
  --pixata-line-height: 1.5;
  --pixata-color: #212529;
  --pixata-muted-color: #6c757d;
  --pixata-primary: #007bff;
  --pixata-primary-hover: #0069d9;
  --pixata-primary-color: #fff;
  --pixata-secondary: #6c757d;
  --pixata-secondary-hover: #5a6268;
  --pixata-secondary-color: #fff;
  --pixata-light: #f8f9fa;
  --pixata-light-hover: #e2e6ea;
  --pixata-light-color: #212529;
  --pixata-danger: #dc3545;
  --pixata-input-color: #495057;
  --pixata-input-bg: #fff;
  --pixata-input-disabled-bg: #e9ecef;
  --pixata-border-color: #ced4da;
  --pixata-addon-bg: #e9ecef;
  --pixata-card-border-color: rgba(0, 0, 0, .125);
  --pixata-card-cap-bg: rgba(0, 0, 0, .03);
  --pixata-card-bg: #fff;
  --pixata-alert-danger-color: #721c24;
  --pixata-alert-danger-bg: #f8d7da;
  --pixata-alert-danger-border: #f5c6cb;
  --pixata-alert-success-color: #155724;
  --pixata-alert-success-bg: #d4edda;
  --pixata-alert-success-border: #c3e6cb;
  --pixata-border-radius: .25rem;
  --pixata-gutter: 15px;
  --pixata-spacer: 1rem;
  --pixata-focus-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
  --pixata-transition: .15s ease-in-out;
  /* The grid's own values match Telerik's Default theme rather than Bootstrap, so a PixataGrid looks like a Telerik grid */
  --pixata-grid-font-size: .875rem;
  --pixata-grid-line-height: 1.4285;
  --pixata-grid-color: #3d3d3d;
  --pixata-grid-bg: #fff;
  --pixata-grid-border-color: rgba(0, 0, 0, .08);
  --pixata-grid-header-bg: #fafafa;
  --pixata-grid-alt-row-bg: rgba(61, 61, 61, .05);
  --pixata-grid-hover-bg: rgba(61, 61, 61, .11);
  --pixata-grid-primary: #ff6358;
  --pixata-grid-primary-hover: #ea5a51;
  --pixata-grid-primary-color: #fff;
  --pixata-grid-input-bg: #fff;
  --pixata-grid-picker-bg: #f5f5f5;
  --pixata-grid-picker-hover-bg: #ebebeb;
  --pixata-grid-chip-bg: #ebebeb;
  --pixata-grid-chip-border-color: #c2c2c2;
  --pixata-grid-locked-border-color: rgba(0, 0, 0, .3);
  --pixata-grid-skeleton-bg: rgba(61, 61, 61, .2);
  --pixata-grid-focus-color: rgba(61, 61, 61, .3);
  --pixata-grid-highlight-bg: rgba(255, 192, 0, .25);
  --pixata-grid-focus-shadow: 0 0 0 2px rgba(61, 61, 61, .08);
  --pixata-grid-popup-shadow: 0 8px 10px rgba(0, 0, 0, .12), 0 4px 16px rgba(0, 0, 0, .12);
  --pixata-grid-border-radius: 4px;
  --pixata-grid-error-color: #ca1400;
  /* The date input, date picker and calendar, again matching Telerik's Default theme */
  --pixata-datepicker-font-size: .875rem;
  --pixata-datepicker-line-height: 1.4285;
  --pixata-datepicker-color: #3d3d3d;
  --pixata-datepicker-subtle-color: #666;
  --pixata-datepicker-bg: #fff;
  --pixata-datepicker-border-color: rgba(0, 0, 0, .08);
  --pixata-datepicker-hover-border-color: rgba(0, 0, 0, .16);
  --pixata-datepicker-invalid-border-color: #ca1400;
  --pixata-datepicker-button-bg: #f5f5f5;
  --pixata-datepicker-button-hover-bg: #ebebeb;
  --pixata-datepicker-primary: #ff6358;
  --pixata-datepicker-primary-hover: #ea5a51;
  --pixata-datepicker-primary-color: #fff;
  --pixata-datepicker-focus-shadow: 0 0 0 2px rgba(61, 61, 61, .08);
  --pixata-datepicker-popup-shadow: 0 8px 10px rgba(0, 0, 0, .12), 0 4px 16px rgba(0, 0, 0, .12);
  --pixata-datepicker-border-radius: 4px;
  --pixata-datepicker-range-bg: rgba(255, 99, 88, .15);
  --pixata-label-font-size: inherit;
  --pixata-label-font-weight: inherit;
  --pixata-label-color: inherit;
  /* Confirm, Inform and the audit viewer's drop-downs */
  --pixata-overlay-bg: rgba(0, 0, 0, .5);
  --pixata-dialog-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  --pixata-popup-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
  /* The audit viewer */
  --pixata-audit-changed-bg: #fff8e1;
  --pixata-audit-old-value-color: #c62828;
  --pixata-audit-new-value-color: #2e7d32;
  /* The cross drawn by pixata-btn-close. By default it's the colour of the text around it, so it shows on a dark background too */
  --pixata-close-button-color: currentColor;
  /* Notifications. By default the toast follows the components' surface and text colours. The icon's background shows the type */
  --pixata-notification-bg: var(--pixata-blazor-surface-bg);
  --pixata-notification-color: var(--pixata-blazor-text-color);
  --pixata-notification-border-radius: var(--pixata-border-radius);
  --pixata-notification-shadow: 0 6px 16px rgba(47, 52, 58, .1);
  --pixata-notification-icon-color: #fff;
  --pixata-notification-general-bg: #00b7d6;
  --pixata-notification-info-bg: #00d6ce;
  --pixata-notification-success-bg: #00d67f;
  --pixata-notification-warning-bg: #ffbe00;
  --pixata-notification-error-bg: #ff0000;
}

/*
  Bootstrap sets box-sizing on every element in its reboot. We only set it on our own, so that adding this stylesheet
  doesn't change the rest of your page. Without it, the padding on the columns pushes them past 100% and they wrap
*/
[class*="pixata-"],
[class*="pixata-"]::before,
[class*="pixata-"]::after {
  box-sizing: border-box;
}

/* ---------- Layout ---------- */

.pixata-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--pixata-gutter) * -1);
  margin-left: calc(var(--pixata-gutter) * -1);
}

.pixata-col-1,
.pixata-col-2,
.pixata-col-10 {
  position: relative;
  width: 100%;
  padding-right: var(--pixata-gutter);
  padding-left: var(--pixata-gutter);
}

/* The columns stack on small screens and sit side by side from large up, as the Bootstrap col-lg-* classes did */
@media (min-width: 992px) {
  .pixata-col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }

  .pixata-col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }

  .pixata-col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
}

/* ---------- Forms ---------- */

.pixata-form-group {
  margin-bottom: var(--pixata-spacer);
}

.pixata-col-form-label {
  padding-top: calc(.375rem + 1px);
  padding-bottom: calc(.375rem + 1px);
  margin-bottom: 0;
  font-size: inherit;
  line-height: var(--pixata-line-height);
}

.pixata-form-control {
  font-family: inherit;
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: var(--pixata-font-size);
  font-weight: 400;
  line-height: var(--pixata-line-height);
  color: var(--pixata-input-color);
  background-color: var(--pixata-input-bg);
  background-clip: padding-box;
  border: 1px solid var(--pixata-border-color);
  border-radius: var(--pixata-border-radius);
  transition: border-color var(--pixata-transition), box-shadow var(--pixata-transition);
}

.pixata-form-control:focus {
  color: var(--pixata-input-color);
  background-color: var(--pixata-input-bg);
  border-color: var(--pixata-primary);
  outline: 0;
  box-shadow: var(--pixata-focus-shadow);
}

.pixata-form-control:disabled,
.pixata-form-control[readonly] {
  background-color: var(--pixata-input-disabled-bg);
}

.pixata-form-select {
  font-family: inherit;
  display: inline-block;
  width: 100%;
  padding: .375rem 1.75rem .375rem .75rem;
  font-size: var(--pixata-font-size);
  font-weight: 400;
  line-height: var(--pixata-line-height);
  color: var(--pixata-input-color);
  vertical-align: middle;
  background: var(--pixata-input-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
  border: 1px solid var(--pixata-border-color);
  border-radius: var(--pixata-border-radius);
  appearance: none;
}

.pixata-form-select:focus {
  border-color: var(--pixata-primary);
  outline: 0;
  box-shadow: var(--pixata-focus-shadow);
}

.pixata-form-select-sm {
  height: calc(1.5em + .5rem + 2px);
  padding-top: .25rem;
  padding-bottom: .25rem;
  padding-left: .5rem;
  font-size: .875rem;
}

/* The input and its prepended/appended bits sit on one line, with only the outer corners rounded */
.pixata-input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.pixata-input-group > .pixata-form-control,
.pixata-input-group > .pixata-form-select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  margin-bottom: 0;
}

.pixata-input-group-prepend,
.pixata-input-group-append {
  display: flex;
}

.pixata-input-group-prepend {
  margin-right: -1px;
}

.pixata-input-group-append {
  margin-left: -1px;
}

.pixata-input-group-text {
  font-family: inherit;
  display: flex;
  align-items: center;
  padding: .375rem .75rem;
  margin-bottom: 0;
  font-size: var(--pixata-font-size);
  font-weight: 400;
  line-height: var(--pixata-line-height);
  color: var(--pixata-input-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--pixata-addon-bg);
  border: 1px solid var(--pixata-border-color);
  border-radius: var(--pixata-border-radius);
}

/* Only the outer corners of the group are rounded, so the parts look like one control */
.pixata-input-group-prepend > * {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.pixata-input-group-append > * {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.pixata-input-group > .pixata-form-control:not(:first-child),
.pixata-input-group > .pixata-form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.pixata-input-group > .pixata-form-control:not(:last-child),
.pixata-input-group > .pixata-form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Added to an input when its field fails validation, and to the cell that holds the validation message */
.pixata-invalid {
  border-color: var(--pixata-danger);
}

.pixata-invalid:focus {
  border-color: var(--pixata-danger);
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
}

.pixata-has-error {
  color: var(--pixata-danger);
}

/* ---------- Buttons ---------- */

.pixata-btn {
  font-family: inherit;
  display: inline-block;
  font-weight: 400;
  color: var(--pixata-color);
  text-align: center;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: var(--pixata-font-size);
  line-height: var(--pixata-line-height);
  border-radius: var(--pixata-border-radius);
  transition: color var(--pixata-transition), background-color var(--pixata-transition), border-color var(--pixata-transition), box-shadow var(--pixata-transition);
}

.pixata-btn:focus {
  outline: 0;
  box-shadow: var(--pixata-focus-shadow);
}

.pixata-btn:disabled {
  opacity: .65;
  cursor: default;
}

.pixata-btn-sm {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
}

.pixata-btn-primary {
  color: var(--pixata-primary-color);
  background-color: var(--pixata-primary);
  border-color: var(--pixata-primary);
}

.pixata-btn-primary:hover:not(:disabled) {
  background-color: var(--pixata-primary-hover);
  border-color: var(--pixata-primary-hover);
}

.pixata-btn-secondary {
  color: var(--pixata-secondary-color);
  background-color: var(--pixata-secondary);
  border-color: var(--pixata-secondary);
}

.pixata-btn-secondary:hover:not(:disabled) {
  background-color: var(--pixata-secondary-hover);
  border-color: var(--pixata-secondary-hover);
}

.pixata-btn-light {
  color: var(--pixata-light-color);
  background-color: var(--pixata-light);
  border-color: var(--pixata-light);
}

.pixata-btn-light:hover:not(:disabled) {
  background-color: var(--pixata-light-hover);
  border-color: var(--pixata-light-hover);
}

.pixata-btn-outline-secondary {
  color: var(--pixata-secondary);
  border-color: var(--pixata-secondary);
}

.pixata-btn-outline-secondary:hover:not(:disabled) {
  color: var(--pixata-secondary-color);
  background-color: var(--pixata-secondary);
}

.pixata-btn-link {
  font-weight: 400;
  color: var(--pixata-primary);
  text-decoration: none;
  background-color: transparent;
  border: 0;
}

.pixata-btn-link:hover:not(:disabled) {
  text-decoration: underline;
}

/*
  A close button, drawn rather than relying on an icon font. The cross is a mask over the ::before, filled with
  --pixata-close-button-color (the colour of the text around it by default), so it shows on a dark background as well as a
  light one. It's on the ::before rather than the button so that the button's focus ring isn't masked out
*/
.pixata-btn-close {
  position: relative;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25em;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--pixata-border-radius);
  opacity: .5;
  cursor: pointer;
}

.pixata-btn-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--pixata-close-button-color);
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
}

.pixata-btn-close:hover {
  opacity: .75;
}

/* ---------- Cards ---------- */

.pixata-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: var(--pixata-card-bg);
  background-clip: border-box;
  border: 1px solid var(--pixata-card-border-color);
  border-radius: var(--pixata-border-radius);
}

.pixata-card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: var(--pixata-card-cap-bg);
  border-bottom: 1px solid var(--pixata-card-border-color);
}

.pixata-card-body {
  flex: 1 1 auto;
  padding: 1.25rem;
}

.pixata-card-footer {
  padding: .75rem 1.25rem;
  background-color: var(--pixata-card-cap-bg);
  border-top: 1px solid var(--pixata-card-border-color);
}

/* ---------- Alerts and badges ---------- */

.pixata-alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: var(--pixata-spacer);
  border: 1px solid transparent;
  border-radius: var(--pixata-border-radius);
}

.pixata-alert-danger {
  color: var(--pixata-alert-danger-color);
  background-color: var(--pixata-alert-danger-bg);
  border-color: var(--pixata-alert-danger-border);
}

.pixata-alert-success {
  color: var(--pixata-alert-success-color);
  background-color: var(--pixata-alert-success-bg);
  border-color: var(--pixata-alert-success-border);
}

.pixata-badge {
  display: inline-block;
  padding: .25em .4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--pixata-border-radius);
}

/* ---------- Grid ---------- */

.pixata-blazor-grid {
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--pixata-grid-border-color);
  font-size: var(--pixata-grid-font-size);
  line-height: var(--pixata-grid-line-height);
  color: var(--pixata-grid-color);
  background-color: var(--pixata-grid-bg);
}

/*
  Only scrolls when the grid has a height, as otherwise the grid is as tall as its rows. The vertical scrollbar is always
  shown, as it is in Telerik's grid, so the columns are the same width whether or not the rows overflow
*/
.pixata-blazor-grid-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: scroll;
}

/* Separate borders, as collapsed ones don't stay with a sticky header */
.pixata-blazor-grid-table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.pixata-blazor-grid-th,
.pixata-blazor-grid-td {
  box-sizing: content-box;
  padding: .5rem .75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
  font-weight: inherit;
  border: 0 solid var(--pixata-grid-border-color);
  border-inline-start-width: 1px;
}

.pixata-blazor-grid-th:first-child,
.pixata-blazor-grid-td:first-child {
  border-inline-start-width: 0;
}

.pixata-blazor-grid-sm .pixata-blazor-grid-th,
.pixata-blazor-grid-sm .pixata-blazor-grid-td {
  padding: .25rem .5rem;
}

.pixata-blazor-grid-thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.pixata-blazor-grid-th {
  position: relative;
  white-space: nowrap;
  vertical-align: bottom;
  background-color: var(--pixata-grid-header-bg);
  border-bottom-width: 1px;
}

/*
  As in Telerik's grid, the header content is pulled out over the cell's padding and then padded again, so the whole cell is
  the click target for sorting
*/
.pixata-blazor-grid-cell-inner {
  display: flex;
  align-items: center;
  margin: -.5rem -.75rem;
}

.pixata-blazor-grid-sm .pixata-blazor-grid-cell-inner {
  margin: -.25rem -.5rem;
}

.pixata-blazor-grid-link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: .5rem .75rem;
}

.pixata-blazor-grid-sm .pixata-blazor-grid-link {
  padding: .25rem .5rem;
}

.pixata-blazor-grid-sortable {
  cursor: pointer;
}

.pixata-blazor-grid-sortable:focus {
  outline: none;
}

.pixata-blazor-grid-sortable:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .16);
}

/* Telerik tints a sorted header slightly. It's a gradient so that it goes over the header's own background colour */
.pixata-blazor-grid-sorted {
  background-image: linear-gradient(rgba(61, 61, 61, .03), rgba(61, 61, 61, .03));
}

.pixata-blazor-grid-column-title {
  display: block;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pixata-blazor-grid-sort-icon {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-inline-start: 7px;
  color: var(--pixata-grid-primary);
}

.pixata-blazor-grid-sort-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pixata-blazor-grid-sort-order {
  display: block;
  height: 16px;
  margin: 2px 0 0 -2px;
  font-size: 12px;
  line-height: normal;
  color: var(--pixata-grid-primary);
}

.pixata-blazor-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pixata-blazor-grid-td {
  vertical-align: middle;
}

.pixata-blazor-grid-alt-row {
  background-color: var(--pixata-grid-alt-row-bg);
}

.pixata-blazor-grid-row:hover {
  background-color: var(--pixata-grid-hover-bg);
}

.pixata-blazor-grid-norecords .pixata-blazor-grid-td {
  text-align: center;
}

.pixata-blazor-grid-text-left {
  text-align: left;
}

.pixata-blazor-grid-text-center {
  text-align: center;
}

.pixata-blazor-grid-text-right {
  text-align: right;
}

/* Buttons inside the grid. Hover, press and selection are shown by an overlay in the text colour, as in Telerik's flat buttons */
.pixata-blazor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-width: 30px;
  padding: .25rem .5rem;
  border: 1px solid transparent;
  border-radius: var(--pixata-grid-border-radius);
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.pixata-blazor-button::before,
.pixata-blazor-button::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease-in-out;
}

.pixata-blazor-button::before {
  background-color: currentColor;
}

.pixata-blazor-button::after {
  box-shadow: inset 0 0 0 2px currentColor;
}

.pixata-blazor-button:hover::before {
  opacity: .08;
}

.pixata-blazor-button:active::before {
  opacity: .16;
}

.pixata-blazor-button.pixata-blazor-grid-selected::before {
  opacity: .2;
}

.pixata-blazor-button:focus {
  outline: none;
}

.pixata-blazor-button:focus-visible::after {
  opacity: .12;
}

.pixata-blazor-button:disabled {
  opacity: .6;
  pointer-events: none;
}

.pixata-blazor-button-icon {
  padding: .25rem;
}

.pixata-blazor-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* An icon on its own is padded out to the line height, so icon buttons are square */
.pixata-blazor-button-icon svg {
  margin: 2px;
}

/* The pager. Its container lets it adapt to its own width with container queries */
/* The width is needed, as an element that contains its inline size doesn't stretch to fill the grid's flex column */
.pixata-blazor-grid-pager-container {
  width: 100%;
  container-type: inline-size;
}

.pixata-blazor-grid-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .875rem;
  padding: .5rem;
  white-space: nowrap;
  color: var(--pixata-grid-color);
  background-color: var(--pixata-grid-header-bg);
  border-top: 1px solid var(--pixata-grid-border-color);
}

.pixata-blazor-grid > .pixata-blazor-grid-pager-container:first-child .pixata-blazor-grid-pager {
  border-top: 0;
  border-bottom: 1px solid var(--pixata-grid-border-color);
}

.pixata-blazor-grid-pager-adaptive {
  flex-wrap: nowrap;
}

.pixata-blazor-grid-pager-numbers-wrap,
.pixata-blazor-grid-pager-numbers {
  display: flex;
}

/* Telerik's pager buttons are square, unlike its other buttons */
.pixata-blazor-grid-pager .pixata-blazor-button {
  border-radius: 0;
}

.pixata-blazor-grid-pager-number {
  color: var(--pixata-grid-primary);
}

.pixata-blazor-grid-pager-number.pixata-blazor-grid-selected {
  cursor: default;
}

.pixata-blazor-grid-pager .pixata-blazor-grid-pager-numbers-dropdown {
  display: none;
}

.pixata-blazor-grid-pager-input,
.pixata-blazor-grid-pager-sizes {
  display: flex;
  align-items: center;
  gap: 1ex;
}

.pixata-blazor-grid-pager-input {
  margin: 0 .875rem;
}

.pixata-blazor-grid-pager-input-box {
  width: 5em;
  padding: .25rem .5rem;
  border: 1px solid var(--pixata-grid-border-color);
  border-radius: var(--pixata-grid-border-radius);
  background-color: var(--pixata-grid-input-bg);
  color: inherit;
  font: inherit;
  line-height: inherit;
}

.pixata-blazor-grid-pager-input-box:focus {
  outline: none;
  box-shadow: var(--pixata-grid-focus-shadow);
}

.pixata-blazor-grid-pager-info {
  display: flex;
  flex: 1 1 0%;
  justify-content: flex-end;
  text-align: end;
  order: 9;
}

/*
  As the pager narrows, the info goes, then the page size dropdown, and finally the page buttons become a dropdown, which is
  what Telerik's adaptive pager is documented to do
*/
@container (max-width: 760px) {
  .pixata-blazor-grid-pager-adaptive .pixata-blazor-grid-pager-info {
    display: none;
  }
}

@container (max-width: 560px) {
  .pixata-blazor-grid-pager-adaptive .pixata-blazor-grid-pager-sizes {
    display: none;
  }
}

@container (max-width: 460px) {
  .pixata-blazor-grid-pager-adaptive .pixata-blazor-grid-pager-numbers {
    display: none;
  }

  .pixata-blazor-grid-pager-adaptive .pixata-blazor-grid-pager-numbers-dropdown {
    display: inline-flex;
    margin: 0 .25rem;
  }
}

/* The dropdown list used by the pager and the filters, which looks like Telerik's */
.pixata-blazor-grid-dropdown {
  position: relative;
  display: inline-flex;
  min-width: 5em;
}

.pixata-blazor-grid-dropdown-button {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding: 0;
  border: 1px solid var(--pixata-grid-border-color);
  border-radius: var(--pixata-grid-border-radius);
  background-color: var(--pixata-grid-picker-bg);
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: start;
  cursor: pointer;
}

.pixata-blazor-grid-dropdown-button:hover {
  background-color: var(--pixata-grid-picker-hover-bg);
}

.pixata-blazor-grid-dropdown-button:focus {
  outline: none;
}

.pixata-blazor-grid-dropdown-button:focus-visible,
.pixata-blazor-grid-dropdown-open .pixata-blazor-grid-dropdown-button {
  box-shadow: var(--pixata-grid-focus-shadow);
}

.pixata-blazor-grid-dropdown-text {
  flex: 1 1 0%;
  padding: .25rem .5rem;
  overflow: hidden;
  white-space: nowrap;
}

.pixata-blazor-grid-dropdown-arrow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  padding: .25rem;
}

.pixata-blazor-grid-dropdown-arrow svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Positioned by the JavaScript, with fixed positioning, so it isn't cut off by a grid cell */
.pixata-blazor-grid-dropdown-list {
  position: fixed;
  z-index: 10002;
  max-height: 200px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: var(--pixata-grid-font-size);
  line-height: var(--pixata-grid-line-height);
  color: var(--pixata-grid-color);
  background-color: var(--pixata-grid-input-bg);
  border: 1px solid var(--pixata-grid-border-color);
  box-shadow: var(--pixata-grid-popup-shadow);
}

/* The filter row's operator dropdown is just an icon button */
.pixata-blazor-grid-dropdown-icon-only {
  min-width: 0;
  flex: 0 0 auto;
}

.pixata-blazor-grid-dropdown-icon-only .pixata-blazor-grid-dropdown-arrow {
  width: 28px;
  height: 28px;
}

.pixata-blazor-grid-dropdown-item {
  padding: .25rem .5rem;
  white-space: nowrap;
  cursor: pointer;
}

.pixata-blazor-grid-dropdown-item:hover {
  background-color: rgba(61, 61, 61, .08);
}

.pixata-blazor-grid-dropdown-focus {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .16);
}

.pixata-blazor-grid-dropdown-item.pixata-blazor-grid-dropdown-selected {
  color: var(--pixata-grid-primary-color);
  background-color: var(--pixata-grid-primary);
}

.pixata-blazor-grid-dropdown-item.pixata-blazor-grid-dropdown-selected:hover {
  background-color: var(--pixata-grid-primary-hover);
}

/* ---------- Date input, date picker and calendar ---------- */

.pixata-blazor-dateinput {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  overflow: hidden;
  font-size: var(--pixata-datepicker-font-size);
  line-height: var(--pixata-datepicker-line-height);
  color: var(--pixata-datepicker-color);
  background-color: var(--pixata-datepicker-bg);
  border: 1px solid var(--pixata-datepicker-border-color);
  border-radius: var(--pixata-datepicker-border-radius);
}

.pixata-blazor-dateinput:hover {
  border-color: var(--pixata-datepicker-hover-border-color);
}

.pixata-blazor-dateinput:focus-within,
.pixata-blazor-datepicker-open {
  border-color: var(--pixata-datepicker-hover-border-color);
  box-shadow: var(--pixata-datepicker-focus-shadow);
}

.pixata-blazor-dateinput-invalid,
.pixata-blazor-dateinput-invalid:hover,
.pixata-blazor-dateinput-invalid:focus-within {
  border-color: var(--pixata-datepicker-invalid-border-color);
}

.pixata-blazor-dateinput-disabled {
  opacity: .6;
  pointer-events: none;
}

.pixata-blazor-dateinput-input {
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  padding: .25rem .5rem;
  border: 0;
  outline: 0;
  color: inherit;
  background: none;
  font: inherit;
}

.pixata-blazor-dateinput-input::placeholder {
  color: var(--pixata-datepicker-subtle-color);
  opacity: 1;
}

.pixata-blazor-dateinput-clear {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  align-items: center;
  justify-content: center;
  padding: 0 .25rem;
  opacity: .5;
  cursor: pointer;
}

.pixata-blazor-dateinput-clear:hover {
  opacity: 1;
}

.pixata-blazor-dateinput-clear svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pixata-blazor-datepicker-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  padding: .25rem;
  border: 0;
  border-inline-start: 1px solid var(--pixata-datepicker-border-color);
  color: inherit;
  background-color: var(--pixata-datepicker-button-bg);
  cursor: pointer;
}

.pixata-blazor-datepicker-button:hover {
  background-color: var(--pixata-datepicker-button-hover-bg);
}

.pixata-blazor-datepicker-button:disabled {
  cursor: default;
}

.pixata-blazor-datepicker-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Sizes, as for the other inputs. Medium is the default above */
.pixata-blazor-dateinput-sm .pixata-blazor-dateinput-input {
  padding: .125rem .5rem;
}

.pixata-blazor-dateinput-sm .pixata-blazor-datepicker-button {
  width: 24px;
  padding: .125rem;
}

.pixata-blazor-dateinput-lg {
  font-size: var(--pixata-blazor-font-size-lg);
  line-height: var(--pixata-blazor-line-height-lg);
}

.pixata-blazor-dateinput-lg .pixata-blazor-dateinput-input {
  padding: .5rem .5rem;
}

.pixata-blazor-dateinput-lg .pixata-blazor-datepicker-button {
  width: 36px;
  padding: .5rem;
}

/* Positioned by the JavaScript, with fixed positioning so it isn't clipped by a container with overflow hidden */
.pixata-blazor-datepicker-popup {
  position: fixed;
  z-index: 10002;
  display: flex;
  background-color: var(--pixata-datepicker-bg);
  border: 1px solid var(--pixata-datepicker-border-color);
  box-shadow: var(--pixata-datepicker-popup-shadow);
}

/* Hidden until the JavaScript has positioned it, so it doesn't flash up in its unpositioned place first */
.pixata-blazor-datepicker-popup:not([data-pixata-positioned]) {
  visibility: hidden;
}

.pixata-blazor-calendar {
  display: inline-flex;
  flex-direction: column;
  font-size: var(--pixata-datepicker-font-size);
  line-height: var(--pixata-datepicker-line-height);
  color: var(--pixata-datepicker-color);
  background-color: var(--pixata-datepicker-bg);
  border: 1px solid var(--pixata-datepicker-border-color);
  border-radius: var(--pixata-datepicker-border-radius);
}

.pixata-blazor-datepicker-popup .pixata-blazor-calendar {
  border: 0;
  border-radius: 0;
}

.pixata-blazor-calendar-header {
  display: flex;
  align-items: center;
  padding: .25rem;
}

.pixata-blazor-calendar-title {
  color: var(--pixata-datepicker-primary);
}

.pixata-blazor-calendar-title:disabled {
  opacity: 1;
  pointer-events: none;
}

.pixata-blazor-calendar-spacer {
  flex: 1 1 auto;
}

.pixata-blazor-calendar-nav {
  display: flex;
}

.pixata-blazor-calendar-view {
  display: flex;
  justify-content: center;
  padding: 0 .25rem;
}

.pixata-blazor-calendar-table {
  margin: 0 16px;
  border-collapse: separate;
  border-spacing: 0;
  text-align: center;
  outline: none;
}

/* The week numbers take the space the margin would have used, so the calendar stays the same width, as in Telerik's */
.pixata-blazor-calendar-with-week-numbers .pixata-blazor-calendar-table,
.pixata-blazor-calendar-yearview .pixata-blazor-calendar-table,
.pixata-blazor-calendar-decadeview .pixata-blazor-calendar-table,
.pixata-blazor-calendar-centuryview .pixata-blazor-calendar-table {
  margin: 0;
}

.pixata-blazor-calendar-th,
.pixata-blazor-calendar-td {
  padding: 0;
  border: 0;
  font-weight: normal;
  text-align: center;
  cursor: default;
}

.pixata-blazor-calendar-th {
  width: 32px;
  height: 32px;
  font-size: .75rem;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--pixata-datepicker-subtle-color);
}

.pixata-blazor-calendar-td {
  width: 32px;
  height: 32px;
  border-radius: var(--pixata-datepicker-border-radius);
}

.pixata-blazor-calendar-yearview .pixata-blazor-calendar-td,
.pixata-blazor-calendar-decadeview .pixata-blazor-calendar-td,
.pixata-blazor-calendar-centuryview .pixata-blazor-calendar-td {
  width: 64px;
  height: 64px;
}

.pixata-blazor-calendar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: .25rem;
  border-radius: var(--pixata-datepicker-border-radius);
  cursor: pointer;
}

.pixata-blazor-calendar-centuryview .pixata-blazor-calendar-link {
  text-align: start;
}

.pixata-blazor-calendar-td:hover .pixata-blazor-calendar-link {
  color: var(--pixata-datepicker-color);
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.pixata-blazor-calendar-other-month {
  color: var(--pixata-datepicker-subtle-color);
}

.pixata-blazor-calendar-today {
  font-weight: bold;
  color: var(--pixata-datepicker-primary);
}

.pixata-blazor-calendar-td.pixata-blazor-calendar-selected .pixata-blazor-calendar-link {
  font-weight: bold;
  color: var(--pixata-datepicker-primary-color);
  background-color: var(--pixata-datepicker-primary);
}

.pixata-blazor-calendar-td.pixata-blazor-calendar-selected:hover .pixata-blazor-calendar-link {
  color: var(--pixata-datepicker-primary-color);
  background-color: var(--pixata-datepicker-primary-hover);
}

.pixata-blazor-calendar-focus .pixata-blazor-calendar-link {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 8%, transparent);
}

.pixata-blazor-calendar-disabled {
  opacity: .6;
  pointer-events: none;
}

.pixata-blazor-calendar-week-number {
  font-size: .75rem;
  color: var(--pixata-datepicker-subtle-color);
}

/* Range selection. The days between the start and end are shaded, and the shading runs into the start and end days */
.pixata-blazor-calendar-td.pixata-blazor-calendar-range-middle {
  background-color: var(--pixata-datepicker-range-bg);
  border-radius: 0;
}

.pixata-blazor-calendar-range-complete .pixata-blazor-calendar-range-start:not(.pixata-blazor-calendar-range-end) {
  background: linear-gradient(to right, transparent 50%, var(--pixata-datepicker-range-bg) 50%);
  border-radius: 0;
}

.pixata-blazor-calendar-range-complete .pixata-blazor-calendar-range-end:not(.pixata-blazor-calendar-range-start) {
  background: linear-gradient(to left, transparent 50%, var(--pixata-datepicker-range-bg) 50%);
  border-radius: 0;
}

[dir="rtl"] .pixata-blazor-calendar-range-complete .pixata-blazor-calendar-range-start:not(.pixata-blazor-calendar-range-end) {
  background: linear-gradient(to left, transparent 50%, var(--pixata-datepicker-range-bg) 50%);
}

[dir="rtl"] .pixata-blazor-calendar-range-complete .pixata-blazor-calendar-range-end:not(.pixata-blazor-calendar-range-start) {
  background: linear-gradient(to right, transparent 50%, var(--pixata-datepicker-range-bg) 50%);
}

/* More than one view side by side, each with its own caption */
.pixata-blazor-calendar-views {
  display: flex;
  outline: none;
}

.pixata-blazor-calendar-multiview .pixata-blazor-calendar-view {
  flex-direction: column;
  align-items: stretch;
}

.pixata-blazor-calendar-caption {
  padding: .25rem 16px;
  font-weight: bold;
  text-align: start;
}

.pixata-blazor-calendar-title-single {
  display: none;
}

/* A phone only has room for one view */
@media (max-width: 575.98px) {
  .pixata-blazor-calendar-view-extra,
  .pixata-blazor-calendar-title-multi,
  .pixata-blazor-calendar-caption {
    display: none;
  }

  .pixata-blazor-calendar-title-single {
    display: inline;
  }
}

/* ---------- Date range picker ---------- */

.pixata-blazor-daterangepicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem;
  vertical-align: middle;
  max-width: 100%;
}

.pixata-blazor-daterangepicker-part {
  display: inline-flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.pixata-blazor-daterangepicker-label {
  font-size: .75rem;
  line-height: var(--pixata-datepicker-line-height);
  color: var(--pixata-datepicker-subtle-color);
}

.pixata-blazor-daterangepicker-disabled {
  pointer-events: none;
}

.pixata-blazor-daterangepicker-disabled .pixata-blazor-daterangepicker-label {
  opacity: .6;
}

/* Bigger targets for fingers */
@media (pointer: coarse) {
  .pixata-blazor-daterangepicker .pixata-blazor-dateinput-input {
    min-height: 44px;
  }

  .pixata-blazor-daterangepicker-popup .pixata-blazor-calendar-monthview .pixata-blazor-calendar-th,
  .pixata-blazor-daterangepicker-popup .pixata-blazor-calendar-monthview .pixata-blazor-calendar-td {
    width: 40px;
    height: 40px;
  }
}

/* ---------- Grid toolbar, filters and search ---------- */

.pixata-blazor-grid-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .5rem;
  background-color: var(--pixata-grid-header-bg);
  border-bottom: 1px solid var(--pixata-grid-border-color);
}

/* Solid buttons, such as the filter menu's Filter and Clear */
.pixata-blazor-button-solid {
  border-color: var(--pixata-grid-border-color);
  background-color: var(--pixata-grid-picker-bg);
}

.pixata-blazor-button-solid:hover:not(:disabled) {
  background-color: var(--pixata-grid-picker-hover-bg);
}

.pixata-blazor-button-solid::before {
  display: none;
}

.pixata-blazor-button-primary,
.pixata-blazor-button-solid.pixata-blazor-button-selected {
  color: var(--pixata-grid-primary-color);
  border-color: var(--pixata-grid-primary);
  background-color: var(--pixata-grid-primary);
}

.pixata-blazor-button-primary:hover:not(:disabled),
.pixata-blazor-button-solid.pixata-blazor-button-selected:hover {
  border-color: var(--pixata-grid-primary-hover);
  background-color: var(--pixata-grid-primary-hover);
}

.pixata-blazor-button-solid:focus-visible {
  box-shadow: var(--pixata-grid-focus-shadow);
}

/* Inputs inside the grid: text boxes, number boxes and the search box */
.pixata-blazor-grid-textbox,
.pixata-blazor-grid-numeric,
.pixata-blazor-grid-search {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  color: var(--pixata-grid-color);
  background-color: var(--pixata-grid-input-bg);
  border: 1px solid var(--pixata-grid-border-color);
  border-radius: var(--pixata-grid-border-radius);
}

.pixata-blazor-grid-textbox:hover,
.pixata-blazor-grid-numeric:hover,
.pixata-blazor-grid-search:hover {
  border-color: rgba(0, 0, 0, .16);
}

.pixata-blazor-grid-textbox:focus-within,
.pixata-blazor-grid-numeric:focus-within,
.pixata-blazor-grid-search:focus-within {
  border-color: rgba(0, 0, 0, .16);
  box-shadow: var(--pixata-grid-focus-shadow);
}

.pixata-blazor-grid-input-inner {
  flex: 1 1 0%;
  width: 100%;
  min-width: 0;
  padding: .25rem .5rem;
  border: 0;
  outline: 0;
  color: inherit;
  background: none;
  font: inherit;
}

.pixata-blazor-grid-search {
  display: inline-flex;
  width: 140px;
}

.pixata-blazor-grid-search-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 0 0 .5rem;
}

.pixata-blazor-grid-search-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pixata-blazor-grid-numeric-spinner {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: 28px;
}

.pixata-blazor-grid-numeric-spinner button {
  display: flex;
  flex: 0 0 auto;
  height: 14px;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--pixata-grid-border-color);
  color: inherit;
  background-color: var(--pixata-grid-picker-bg);
  cursor: pointer;
}

.pixata-blazor-grid-numeric-spinner button:hover {
  background-color: var(--pixata-grid-picker-hover-bg);
}

.pixata-blazor-grid-numeric-spinner svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* The filter row */
.pixata-blazor-grid-filter-cell {
  padding: .5rem;
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--pixata-grid-header-bg);
  border: 0 solid var(--pixata-grid-border-color);
  border-inline-start-width: 1px;
  border-bottom-width: 1px;
}

.pixata-blazor-grid-filter-cell:first-child {
  border-inline-start-width: 0;
}

.pixata-blazor-grid-sm .pixata-blazor-grid-filter-cell {
  padding: .375rem;
}

.pixata-blazor-grid-filtercell,
.pixata-blazor-grid-filtercell-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}

.pixata-blazor-grid-filtercell-wrapper {
  flex: 1 1 auto;
  gap: .25rem;
}

.pixata-blazor-grid-filtercell-wrapper > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.pixata-blazor-grid-filtercell-operator {
  display: flex;
  flex: 0 0 auto;
}

.pixata-blazor-grid-filter-clear {
  height: 30px;
}

.pixata-blazor-grid-filter-date {
  width: 100%;
  min-width: 0;
}

/* The filter menu icon in a header, which is coloured when the column has a filter */
.pixata-blazor-grid-header-menu {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: .25rem;
  margin-inline-end: .25rem;
  cursor: pointer;
}

.pixata-blazor-grid-header-menu:hover {
  background-color: var(--pixata-grid-picker-hover-bg);
}

.pixata-blazor-grid-header-menu svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pixata-blazor-grid-filter-active,
.pixata-blazor-grid-filter-active:hover {
  color: var(--pixata-grid-primary-color);
  background-color: var(--pixata-grid-primary);
}

/* The filter menu itself, positioned by the JavaScript */
.pixata-blazor-grid-filter-popup {
  position: fixed;
  z-index: 10002;
  width: 232px;
  font-size: var(--pixata-grid-font-size);
  line-height: var(--pixata-grid-line-height);
  color: var(--pixata-grid-color);
  background-color: var(--pixata-grid-input-bg);
  border: 1px solid var(--pixata-grid-border-color);
  box-shadow: var(--pixata-grid-popup-shadow);
}

.pixata-blazor-grid-columnmenu-item {
  display: flex;
  align-items: center;
  padding: .25rem .5rem;
}

.pixata-blazor-grid-columnmenu-item svg,
.pixata-blazor-button svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pixata-blazor-grid-columnmenu-item svg {
  margin-inline-end: .25rem;
}

.pixata-blazor-grid-filter-menu {
  margin: 0;
}

.pixata-blazor-grid-filter-menu-container {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .5rem;
}

.pixata-blazor-grid-filter-menu-container > .pixata-blazor-grid-dropdown,
.pixata-blazor-grid-filter-menu-container > .pixata-blazor-dateinput {
  width: 100%;
}

.pixata-blazor-grid-button-group {
  display: flex;
}

.pixata-blazor-grid-button-group .pixata-blazor-button:first-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.pixata-blazor-grid-button-group .pixata-blazor-button:last-child {
  margin-inline-start: -1px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.pixata-blazor-grid-filter-actions {
  display: flex;
  gap: .5rem;
}

.pixata-blazor-grid-filter-actions .pixata-blazor-button {
  flex: 1 1 0%;
}

.pixata-blazor-grid-multicheck {
  max-height: 300px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  white-space: nowrap;
}

.pixata-blazor-grid-multicheck-item {
  display: flex;
  padding: .25rem .5rem;
}

.pixata-blazor-grid-checkbox-label {
  display: flex;
  align-items: center;
  gap: .25rem;
  cursor: pointer;
  user-select: none;
}

/* A checkbox drawn like Telerik's */
.pixata-blazor-checkbox {
  appearance: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  background-color: var(--pixata-grid-input-bg);
  border: 1px solid var(--pixata-grid-border-color);
  border-radius: var(--pixata-grid-border-radius);
  cursor: pointer;
}

.pixata-blazor-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--pixata-grid-border-color);
}

.pixata-blazor-checkbox:checked,
.pixata-blazor-checkbox.pixata-blazor-checkbox-checked {
  border-color: var(--pixata-grid-primary);
  background-color: var(--pixata-grid-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e");
}

/* The loading indicator shown over the grid while OnRead is slow, matching Telerik's: three dots chasing each other round a
   triangle, over a light overlay */
.pixata-blazor-grid-loader {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pixata-blazor-grid-loader-overlay {
  position: absolute;
  inset: 0;
  background-color: #ebebeb;
  opacity: .5;
}

.pixata-blazor-loader {
  position: relative;
  z-index: 2;
  width: 48px;
  height: calc(64px * .8660254038 - 16px);
  margin: 8px;
  color: var(--pixata-grid-primary);
}

.pixata-blazor-loader-segment {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: currentColor;
  transform: translate(-50%, -50%);
  animation: pixata-blazor-loader-segment 1.5s infinite;
}

.pixata-blazor-loader-segment:nth-child(2) {
  animation-delay: -.5s;
}

.pixata-blazor-loader-segment:nth-child(3) {
  animation-delay: -1s;
}

@keyframes pixata-blazor-loader-segment {
  0% {
    top: 0;
    left: 50%;
  }

  33.3333% {
    top: 100%;
    left: 0;
  }

  66.6666% {
    top: 100%;
    left: 100%;
  }

  100% {
    top: 0;
    left: 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-loader-segment {
    animation-duration: 3s;
  }
}

.pixata-blazor-grid-loader-template {
  position: relative;
  z-index: 2;
}

/* Selected rows and cells, tinted with the accent colour as in Telerik's grid */
.pixata-blazor-grid-row.pixata-blazor-grid-selected > .pixata-blazor-grid-td,
.pixata-blazor-grid-td.pixata-blazor-grid-selected {
  background-color: color-mix(in srgb, var(--pixata-grid-primary) 25%, transparent);
}

/* Dragging to select shouldn't select the text as well */
.pixata-blazor-grid-drag-select .pixata-blazor-grid-table tbody {
  user-select: none;
}

.pixata-blazor-grid-checkbox-cell .pixata-blazor-checkbox {
  vertical-align: middle;
}

/* A "select all" box when only some rows are selected. It's drawn with a class rather than the indeterminate property, which
   can only be set from JavaScript */
.pixata-blazor-checkbox.pixata-blazor-checkbox-indeterminate {
  border-color: var(--pixata-grid-border-color);
  background-color: var(--pixata-grid-input-bg);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff6358' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/%3e%3c/svg%3e");
}

/* PixataGridBoolFilter, whose box is a button so it can show three states */
.pixata-blazor-grid-bool-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.pixata-blazor-grid-bool-filter button.pixata-blazor-checkbox {
  padding: 0;
}

.pixata-blazor-grid-error .pixata-blazor-grid-td {
  color: var(--pixata-grid-error-color);
}

/* ---------- Grid editing ---------- */

/* Command and edit cells have less vertical padding, so rows with buttons and editors are no taller than other rows */
.pixata-blazor-grid-command-cell,
.pixata-blazor-grid-edit-cell {
  padding-top: 3px;
  padding-bottom: 3px;
}

.pixata-blazor-grid-sm .pixata-blazor-grid-command-cell,
.pixata-blazor-grid-sm .pixata-blazor-grid-edit-cell {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* Solid buttons are the same height as Telerik's (30px), and the text is a separate span so it can be hidden on narrow screens */
.pixata-blazor-button-solid {
  vertical-align: middle;
}

.pixata-blazor-button-text {
  position: relative;
}

.pixata-blazor-grid-edit-cell > .pixata-blazor-grid-textbox,
.pixata-blazor-grid-edit-cell > .pixata-blazor-grid-editor,
.pixata-blazor-form-field-wrap > .pixata-blazor-grid-textbox,
.pixata-blazor-form-field-wrap > .pixata-blazor-grid-editor {
  display: flex;
  width: 100%;
}

.pixata-blazor-grid-editor > .pixata-blazor-grid-numeric,
.pixata-blazor-grid-editor > .pixata-blazor-dateinput,
.pixata-blazor-grid-editor > .pixata-blazor-grid-dropdown {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.pixata-blazor-grid-textarea textarea {
  min-height: 4em;
  resize: vertical;
}

/* An editor whose value failed validation, as Telerik's k-invalid */
.pixata-blazor-grid-invalid,
.pixata-blazor-grid-invalid:hover,
.pixata-blazor-grid-invalid > .pixata-blazor-grid-numeric,
.pixata-blazor-grid-invalid > .pixata-blazor-dateinput,
.pixata-blazor-grid-invalid .pixata-blazor-grid-dropdown-button {
  border-color: var(--pixata-grid-error-color);
}

/* ---------- Grid grouping and aggregates ---------- */

/* The panel that column headers are dragged into to group by them */
.pixata-blazor-grid-group-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  line-height: 20px;
  color: var(--pixata-grid-color);
  background-color: var(--pixata-grid-header-bg);
  border-bottom: 1px solid var(--pixata-grid-border-color);
}

/* Headers and chips can be dragged with touch as well as the mouse, so touch mustn't scroll them */
.pixata-blazor-grid-header-draggable {
  touch-action: none;
}

.pixata-blazor-grid-group-dragging {
  user-select: none;
}

.pixata-blazor-grid-group-panel-drop {
  box-shadow: inset 0 0 0 2px var(--pixata-grid-primary);
}

/* What follows the pointer while a header or chip is dragged */
.pixata-blazor-grid-drag-clue {
  position: fixed;
  z-index: 10003;
  padding: 4px 8px;
  font-size: var(--pixata-grid-font-size);
  line-height: 20px;
  color: var(--pixata-grid-color);
  white-space: nowrap;
  pointer-events: none;
  background-color: var(--pixata-grid-header-bg);
  border: 1px solid var(--pixata-grid-border-color);
  border-radius: var(--pixata-grid-border-radius);
  box-shadow: var(--pixata-grid-popup-shadow);
  opacity: .7;
}

.pixata-blazor-grid-drag-clue-drop {
  opacity: 1;
}

.pixata-blazor-grid-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pixata-blazor-grid-group-hint {
  flex: 1 1 auto;
  min-height: 20px;
  opacity: .6;
}

.pixata-blazor-grid-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  height: 24px;
  padding: 4px;
  line-height: 14px;
  cursor: pointer;
  background-color: var(--pixata-grid-chip-bg);
  border: 1px solid var(--pixata-grid-chip-border-color);
  border-radius: var(--pixata-grid-border-radius);
}

.pixata-blazor-grid-group-chip:focus-visible {
  outline: none;
  box-shadow: var(--pixata-grid-focus-shadow);
}

.pixata-blazor-grid-group-chip-content {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 4px;
  cursor: move;
}

/* Padded to make it easier to hit, without making the chip taller */
.pixata-blazor-grid-group-chip-remove {
  display: inline-flex;
  padding: 4px;
  margin-block: -4px;
  cursor: pointer;
}

.pixata-blazor-grid-group-chip-remove svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  fill-rule: evenodd;
}

/* The narrow columns down the left, one for each level of grouping */
.pixata-blazor-grid-group-col {
  width: 32px;
}

.pixata-blazor-grid-th.pixata-blazor-grid-group-cell,
.pixata-blazor-grid-td.pixata-blazor-grid-group-cell {
  padding-inline: 0;
}

.pixata-blazor-grid-td.pixata-blazor-grid-group-cell {
  background-color: var(--pixata-grid-header-bg);
}

/* The cell after the group cells has no border between them, as the first cell of a row doesn't */
.pixata-blazor-grid-group-cell + .pixata-blazor-grid-td,
.pixata-blazor-grid-group-cell + .pixata-blazor-grid-th {
  border-inline-start-width: 0;
}

.pixata-blazor-grid-group-row,
.pixata-blazor-grid-group-row:hover {
  background-color: var(--pixata-grid-header-bg);
}

.pixata-blazor-grid-group-header {
  font-weight: 700;
}

.pixata-blazor-grid-group-header-inner {
  display: flex;
  align-items: center;
  margin: 0;
}

.pixata-blazor-grid-group-toggle {
  display: inline-flex;
  margin: 0 8px 0 -4px;
  cursor: pointer;
}

.pixata-blazor-grid-group-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pixata-blazor-grid-group-toggle:focus-visible {
  outline: none;
  box-shadow: var(--pixata-grid-focus-shadow);
}

/* Group footers and the grid's footer, which shows the aggregates */
.pixata-blazor-grid-group-footer .pixata-blazor-grid-td,
.pixata-blazor-grid-footer-row .pixata-blazor-grid-td {
  font-weight: 700;
  background-color: var(--pixata-grid-header-bg);
  border-top-width: 1px;
}

/* The footer stays at the bottom of a grid with a height, as Telerik's does */
.pixata-blazor-grid-tfoot {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* ---------- Grid columns: resizing, reordering, frozen columns, multi-column headers and the column menu ---------- */

/* The handle on the right edge of a header, dragged to resize the column */
.pixata-blazor-grid-column-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: .5em;
  cursor: col-resize;
  touch-action: none;
}

/* A header that contains others */
.pixata-blazor-grid-header-group {
  text-align: center;
}

.pixata-blazor-grid-thead tr + tr .pixata-blazor-grid-th,
.pixata-blazor-grid-header-group + .pixata-blazor-grid-th,
.pixata-blazor-grid-th[rowspan] + .pixata-blazor-grid-th {
  border-inline-start-width: 1px;
}

/* Where a dragged header will go */
.pixata-blazor-grid-drop-hint {
  position: fixed;
  z-index: 10003;
  width: 2px;
  margin-inline-start: -1px;
  pointer-events: none;
  background-color: var(--pixata-grid-primary);
}

/* The hidden table used to measure cells when fitting columns to their content */
.pixata-blazor-grid-measure {
  position: absolute;
  top: 0;
  left: -10000px;
  width: auto;
  table-layout: auto;
  visibility: hidden;
}

.pixata-blazor-grid-measure .pixata-blazor-grid-th,
.pixata-blazor-grid-measure .pixata-blazor-grid-td {
  width: auto;
  white-space: nowrap;
}

/* Frozen columns stay put when the grid scrolls sideways, with a darker line separating them from the others */
.pixata-blazor-grid-locked {
  position: sticky;
  z-index: 1;
  border-inline-width: 1px;
  border-inline-color: var(--pixata-grid-locked-border-color);
}

.pixata-blazor-grid-th.pixata-blazor-grid-locked {
  z-index: 3;
  background-color: var(--pixata-grid-header-bg);
}

.pixata-blazor-grid-td.pixata-blazor-grid-locked,
.pixata-blazor-grid-filter-cell.pixata-blazor-grid-locked {
  background-color: var(--pixata-grid-bg);
}

.pixata-blazor-grid-filter-cell.pixata-blazor-grid-locked {
  border-style: solid;
}

/* The row's tint goes over the frozen cells' solid background */
.pixata-blazor-grid-alt-row > .pixata-blazor-grid-locked {
  background-image: linear-gradient(var(--pixata-grid-alt-row-bg), var(--pixata-grid-alt-row-bg));
}

.pixata-blazor-grid-row:hover > .pixata-blazor-grid-locked {
  background-image: linear-gradient(var(--pixata-grid-hover-bg), var(--pixata-grid-hover-bg));
}

.pixata-blazor-grid-row.pixata-blazor-grid-selected > .pixata-blazor-grid-locked,
.pixata-blazor-grid-locked.pixata-blazor-grid-selected {
  background-image: linear-gradient(color-mix(in srgb, var(--pixata-grid-primary) 25%, transparent), color-mix(in srgb, var(--pixata-grid-primary) 25%, transparent));
}

.pixata-blazor-grid-locked:first-child,
.pixata-blazor-grid-group-cell + .pixata-blazor-grid-locked,
.pixata-blazor-grid-locked + .pixata-blazor-grid-td,
.pixata-blazor-grid-locked + .pixata-blazor-grid-th,
.pixata-blazor-grid-locked + .pixata-blazor-grid-filter-cell {
  border-inline-start-width: 0;
}

/* The column menu */
.pixata-blazor-grid-column-menu {
  width: 230px;
}

.pixata-blazor-grid-columnmenu-section + .pixata-blazor-grid-columnmenu-section {
  border-top: 1px solid var(--pixata-grid-border-color);
}

.pixata-blazor-grid-columnmenu-action {
  cursor: pointer;
  user-select: none;
}

.pixata-blazor-grid-columnmenu-action:hover {
  background-color: var(--pixata-grid-picker-hover-bg);
}

.pixata-blazor-grid-columnmenu-action:focus-visible {
  outline: none;
  box-shadow: inset var(--pixata-grid-focus-shadow);
}

.pixata-blazor-grid-columnmenu-item-active {
  color: var(--pixata-grid-primary);
}

.pixata-blazor-grid-columnmenu-item-disabled {
  cursor: default;
  opacity: .6;
}

.pixata-blazor-grid-columnmenu-item-disabled:hover {
  background-color: transparent;
}

.pixata-blazor-grid-columnmenu-expander {
  display: inline-flex;
  margin-inline-start: auto;
}

.pixata-blazor-grid-columnmenu-expander svg {
  margin: 0;
}

.pixata-blazor-grid-column-list {
  max-height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

.pixata-blazor-grid-column-list-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  margin: 0;
  cursor: pointer;
}

.pixata-blazor-grid-column-list-item:hover {
  background-color: var(--pixata-grid-picker-hover-bg);
}

.pixata-blazor-grid-columnmenu-actions {
  display: flex;
  gap: 8px;
  padding: 8px;
}

.pixata-blazor-grid-columnmenu-actions .pixata-blazor-button {
  flex: 1 1 0;
  justify-content: center;
}

/* ---------- Grid virtual scrolling ---------- */

/* Every row is the same height, so text doesn't wrap */
.pixata-blazor-grid-virtual .pixata-blazor-grid-td {
  white-space: nowrap;
}

.pixata-blazor-grid-virtual-spacer,
.pixata-blazor-grid-virtual-spacer > td,
.pixata-blazor-grid-td.pixata-blazor-grid-virtual-spacer {
  padding: 0;
  background: none;
}

.pixata-blazor-grid-virtual-spacer > td {
  border: 0;
}

/* What a cell shows while its row is loading */
.pixata-blazor-grid-skeleton {
  display: block;
  height: .8em;
  border-radius: var(--pixata-grid-border-radius);
  background-color: var(--pixata-grid-skeleton-bg);
  animation: pixata-blazor-grid-skeleton-pulse 1.5s ease-in-out .5s infinite;
}

@keyframes pixata-blazor-grid-skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-grid-skeleton {
    animation: none;
  }
}

/* ---------- Grid detail rows and row dragging ---------- */

/* The narrow column with the arrows that show and hide each row's details */
.pixata-blazor-grid-hierarchy-col {
  width: 32px;
}

.pixata-blazor-grid-th.pixata-blazor-grid-hierarchy-cell,
.pixata-blazor-grid-td.pixata-blazor-grid-hierarchy-cell {
  padding: 0;
  text-align: center;
}

.pixata-blazor-grid-hierarchy-cell + .pixata-blazor-grid-td,
.pixata-blazor-grid-hierarchy-cell + .pixata-blazor-grid-th {
  border-inline-start-width: 0;
}

.pixata-blazor-grid-hierarchy-toggle {
  display: inline-flex;
  cursor: pointer;
}

.pixata-blazor-grid-hierarchy-toggle svg,
.pixata-blazor-grid-drag-handle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.pixata-blazor-grid-hierarchy-toggle:focus-visible {
  outline: none;
  box-shadow: var(--pixata-grid-focus-shadow);
}

.pixata-blazor-grid-detail-row,
.pixata-blazor-grid-detail-row:hover {
  background-color: transparent;
}

/* The cell holding a row's details, which can hold anything, including another grid */
.pixata-blazor-grid-detail-cell {
  white-space: normal;
}

/* The handle rows are dragged by */
.pixata-blazor-grid-td.pixata-blazor-grid-drag-cell {
  padding: 0;
  text-align: center;
  cursor: move;
  touch-action: none;
}

.pixata-blazor-grid-drag-handle {
  display: inline-flex;
  vertical-align: middle;
}

.pixata-blazor-grid-row-dragging {
  cursor: move;
  user-select: none;
}

/* Where a dragged row will go: a line between rows, or a tint on the row it will be dropped on */
.pixata-blazor-grid-row-drop-hint {
  position: fixed;
  z-index: 10003;
  height: 2px;
  margin-top: -1px;
  pointer-events: none;
  background-color: var(--pixata-grid-primary);
}

.pixata-blazor-grid-row-drop-hint::before {
  position: absolute;
  top: -4px;
  inset-inline-start: -2px;
  content: "";
  border: 5px solid transparent;
  border-inline-start-color: var(--pixata-grid-primary);
}

.pixata-blazor-grid-row-drop-over > .pixata-blazor-grid-td {
  background-color: color-mix(in srgb, var(--pixata-grid-primary) 15%, transparent);
}

/* ---------- Keyboard navigation and highlighting ---------- */

/* The cell the keyboard is on, in a Navigable grid */
.pixata-blazor-grid-th:focus-visible,
.pixata-blazor-grid-td:focus-visible,
.pixata-blazor-grid-filter-cell:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--pixata-grid-focus-color);
}

/* Highlighted rows and cells, set with HighlightedItems and HighlightedCells */
.pixata-blazor-grid-row.pixata-blazor-grid-highlighted > .pixata-blazor-grid-td,
.pixata-blazor-grid-td.pixata-blazor-grid-highlighted {
  background-color: var(--pixata-grid-highlight-bg);
}

/* ---------- Adaptive popups ---------- */

.pixata-blazor-grid-adaptive-header {
  display: none;
}

/* With AdaptiveMode="Auto", on small screens the menus and the popup editor fill the screen. The menus are positioned by the
   JavaScript, so their position has to be overridden */
@media (max-width: 768px) {
  .pixata-blazor-grid-adaptive .pixata-blazor-grid-filter-popup {
    inset: 0 !important;
    width: auto;
    overflow-y: auto;
    border: 0;
  }

  .pixata-blazor-grid-adaptive .pixata-blazor-grid-adaptive-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .5rem .5rem 1rem;
    font-weight: 700;
    background-color: var(--pixata-grid-header-bg);
    border-bottom: 1px solid var(--pixata-grid-border-color);
  }

  .pixata-blazor-grid-adaptive .pixata-blazor-grid-popup-edit {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    max-height: none !important;
    border-radius: 0;
  }
}

/* ---------- Right to left ---------- */

/* Arrows that point along the line of text point the other way in a right-to-left page */
.pixata-blazor-grid-pager-nav svg:dir(rtl),
.pixata-blazor-grid-group-toggle svg:dir(rtl) {
  transform: scaleX(-1);
}

/* ---------- Windows and dialogs (the grid's popup editor and delete confirmation) ---------- */

.pixata-blazor-dialog-wrapper {
  position: fixed;
  inset: 0;
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pixata-blazor-overlay {
  position: absolute;
  inset: 0;
  background-color: #3d3d3d;
  opacity: .5;
}

.pixata-blazor-window {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  font-size: var(--pixata-grid-font-size);
  line-height: 1.25;
  color: var(--pixata-grid-color);
  background-color: var(--pixata-grid-input-bg);
  box-shadow: 0 16px 18px rgba(0, 0, 0, .28), 0 4px 16px rgba(0, 0, 0, .12);
  outline: 0;
}

.pixata-blazor-window-titlebar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: .75rem 1rem;
  white-space: nowrap;
  background-color: var(--pixata-grid-header-bg);
  border-bottom: 1px solid var(--pixata-grid-border-color);
}

.pixata-blazor-window-title {
  flex: 1 1 0%;
  padding: .5em 0;
  margin: -.5em 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
  line-height: 1.25;
}

.pixata-blazor-window-close {
  margin: -.25rem -.25rem -.25rem .5rem;
}

.pixata-blazor-window-content {
  flex: 1 1 auto;
  padding: 1rem;
  overflow: auto;
}

.pixata-blazor-window-actions {
  display: flex;
  flex-shrink: 0;
  gap: .5rem;
  padding: .5rem;
  border-top: 1px solid var(--pixata-grid-border-color);
}

.pixata-blazor-window-actions-start {
  justify-content: flex-start;
}

.pixata-blazor-window-actions-center {
  justify-content: center;
}

.pixata-blazor-window-actions-end {
  justify-content: flex-end;
}

.pixata-blazor-window-actions-stretch > .pixata-blazor-button {
  flex: 1 1 0%;
}

.pixata-blazor-dialog {
  min-width: 200px;
}

/* The popup editor's form */
.pixata-blazor-form {
  margin: 0;
  line-height: var(--pixata-grid-line-height);
}

.pixata-blazor-form-layout {
  display: grid;
  column-gap: 1rem;
}

.pixata-blazor-form-field {
  margin-top: .875rem;
}

.pixata-blazor-form-field:nth-child(-n+1) {
  margin-top: 0;
}

.pixata-blazor-form-label {
  display: flex;
}

.pixata-blazor-form-error {
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--pixata-grid-error-color);
}

.pixata-blazor-grid-popup-edit {
  min-width: 320px;
}

/* ---------- Confirm and Inform ---------- */

/* The overlay covers the component's container, or the whole window, as set by its PopUpDisplayOption parameter */
.pixata-blazor-confirm-overlay,
.pixata-blazor-inform-overlay {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--pixata-overlay-bg);
}

.pixata-blazor-confirm-content,
.pixata-blazor-inform-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  font-size: 1.125rem;
  color: var(--pixata-color);
  text-align: center;
  background-color: var(--pixata-card-bg);
  border-radius: calc(var(--pixata-border-radius) * 2);
  box-shadow: var(--pixata-dialog-shadow);
}

.pixata-blazor-confirm-caption {
  margin-bottom: 1rem;
}

/* ---------- Audit viewer ---------- */

/*
  AuditViewer, and the AuditTimeline and EntityPropertyDiff components inside it. The colours come from the variables above, so the
  viewer follows your theme. The three that have no general equivalent are --pixata-audit-changed-bg (behind a changed property),
  --pixata-audit-old-value-color and --pixata-audit-new-value-color
*/

.pixata-blazor-audit-viewer {
  margin: 0 auto;
  max-width: 100%;
}

.pixata-blazor-audit-viewer h2 {
  margin-bottom: 1rem;
}

.pixata-blazor-audit-entity-type-selector {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pixata-blazor-audit-entity-type-selector label {
  font-weight: 600;
}

.pixata-blazor-audit-entity-type-dropdown {
  position: relative;
}

.pixata-blazor-audit-entity-type-dropdown-btn {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--pixata-border-color);
  border-radius: var(--pixata-border-radius);
  min-width: 200px;
  background: var(--pixata-card-bg);
  color: var(--pixata-color);
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
}

.pixata-blazor-audit-entity-type-dropdown-btn:hover {
  background: var(--pixata-light-hover);
}

.pixata-blazor-audit-entity-type-dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
}

.pixata-blazor-audit-entity-type-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 12;
  background: var(--pixata-card-bg);
  color: var(--pixata-color);
  border: 1px solid var(--pixata-border-color);
  border-radius: var(--pixata-border-radius);
  box-shadow: var(--pixata-popup-shadow);
  min-width: 220px;
  margin-top: 0.25rem;
  max-height: 300px;
  overflow-y: auto;
}

.pixata-blazor-audit-entity-type-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.pixata-blazor-audit-entity-type-dropdown-item:hover {
  background: var(--pixata-light);
}

.pixata-blazor-audit-entity-type-dropdown-item.pixata-blazor-audit-selected {
  background: color-mix(in srgb, var(--pixata-primary) 12%, var(--pixata-card-bg));
  font-weight: 600;
}

.pixata-blazor-audit-entity-type-all-item {
  font-weight: 600;
  border-bottom: 1px solid var(--pixata-card-border-color);
}

.pixata-blazor-audit-entity-type-dropdown-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--pixata-card-border-color);
}

.pixata-blazor-audit-entity-type-dropdown-actions button {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--pixata-border-color);
  background: var(--pixata-card-bg);
  color: var(--pixata-color);
  border-radius: var(--pixata-border-radius);
  cursor: pointer;
  font-size: 0.8rem;
}

.pixata-blazor-audit-entity-type-dropdown-actions button:hover {
  background: var(--pixata-light-hover);
}

.pixata-blazor-audit-entity-search {
  margin-bottom: 1rem;
}

.pixata-blazor-audit-entity-search input {
  padding: 0.4rem 0.6rem;
  color: var(--pixata-input-color);
  background-color: var(--pixata-input-bg);
  border: 1px solid var(--pixata-border-color);
  border-radius: var(--pixata-border-radius);
  width: 300px;
}

.pixata-blazor-audit-entity-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.pixata-blazor-audit-entity-table th, .pixata-blazor-audit-entity-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--pixata-card-border-color);
}

.pixata-blazor-audit-entity-table th {
  background: var(--pixata-light);
  font-weight: 600;
}

.pixata-blazor-audit-entity-table tr:hover {
  background: var(--pixata-card-cap-bg);
}

.pixata-blazor-audit-all-audit-table td {
  vertical-align: top;
}

.pixata-blazor-audit-all-audit-expanded-row td {
  background: var(--pixata-card-cap-bg);
  padding: 0.5rem 0.75rem;
}

.pixata-blazor-audit-view-btn, .pixata-blazor-audit-back-btn, .pixata-blazor-audit-filter-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--pixata-primary);
  background: var(--pixata-primary);
  color: var(--pixata-primary-color);
  border-radius: var(--pixata-border-radius);
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
  display: inline-block;
}

.pixata-blazor-audit-view-btn:hover, .pixata-blazor-audit-back-btn:hover, .pixata-blazor-audit-filter-btn:hover {
  background: var(--pixata-primary-hover);
  border-color: var(--pixata-primary-hover);
}

.pixata-blazor-audit-back-btn {
  margin-bottom: 1rem;
}

.pixata-blazor-audit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--pixata-light);
  border-radius: var(--pixata-border-radius);
}

.pixata-blazor-audit-filter-group {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.pixata-blazor-audit-filter-group label {
  font-weight: 600;
  font-size: 0.85rem;
}

.pixata-blazor-audit-filter-group input, .pixata-blazor-audit-filter-group select {
  padding: 0.3rem 0.5rem;
  color: var(--pixata-input-color);
  background-color: var(--pixata-input-bg);
  border: 1px solid var(--pixata-border-color);
  border-radius: var(--pixata-border-radius);
}

.pixata-blazor-audit-pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.pixata-blazor-audit-pagination button {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--pixata-border-color);
  background: var(--pixata-card-bg);
  color: var(--pixata-color);
  border-radius: var(--pixata-border-radius);
  cursor: pointer;
}

.pixata-blazor-audit-pagination button:disabled {
  opacity: 0.5;
  cursor: default;
}

.pixata-blazor-audit-loading-state {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--pixata-muted-color);
}

.pixata-blazor-audit-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--pixata-border-color);
  border-top-color: var(--pixata-primary);
  border-radius: 50%;
  animation: pixata-spin .7s linear infinite;
}

.pixata-blazor-audit-empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--pixata-muted-color);
}

.pixata-blazor-audit-empty-state span {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

.pixata-blazor-audit-timeline {
  margin-top: 1rem;
}

.pixata-blazor-audit-timeline-entry {
  border-left: 3px solid var(--pixata-primary);
  margin-bottom: 1rem;
  padding-left: 1rem;
}

.pixata-blazor-audit-timeline-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.pixata-blazor-audit-operation-icon {
  font-size: 1.1rem;
}

.pixata-blazor-audit-operation-label {
  font-weight: 600;
}

.pixata-blazor-audit-timestamp {
  color: var(--pixata-muted-color);
  font-size: 0.85rem;
}

.pixata-blazor-audit-user {
  color: var(--pixata-muted-color);
  font-size: 0.85rem;
}

.pixata-blazor-audit-toggle-btn {
  background: none;
  border: none;
  color: var(--pixata-primary);
  cursor: pointer;
  padding: 0.2rem 0;
  font-size: 0.85rem;
}

.pixata-blazor-audit-toggle-btn:hover {
  text-decoration: underline;
}

.pixata-blazor-audit-changed-summary {
  font-size: 0.85rem;
  color: var(--pixata-muted-color);
  margin-top: 0.3rem;
}

.pixata-blazor-audit-properties-list {
  margin-top: 0.5rem;
  border: 1px solid var(--pixata-card-border-color);
  border-radius: var(--pixata-border-radius);
  padding: 0.5rem;
}

.pixata-blazor-audit-property-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--pixata-card-border-color);
}

.pixata-blazor-audit-property-row:last-child {
  border-bottom: none;
}

.pixata-blazor-audit-property-changed {
  background: var(--pixata-audit-changed-bg);
}

.pixata-blazor-audit-property-name {
  font-weight: 600;
  min-width: 150px;
}

.pixata-blazor-audit-property-badge {
  font-size: 0.75rem;
}

.pixata-blazor-audit-property-value {
  color: var(--pixata-color);
}

.pixata-blazor-audit-property-values {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.pixata-blazor-audit-old-value {
  color: var(--pixata-audit-old-value-color);
  text-decoration: line-through;
}

.pixata-blazor-audit-arrow {
  color: var(--pixata-muted-color);
}

.pixata-blazor-audit-new-value {
  color: var(--pixata-audit-new-value-color);
  font-weight: 600;
}

.pixata-blazor-audit-timeline-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--pixata-light);
  border-radius: var(--pixata-border-radius);
}

.pixata-blazor-audit-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.pixata-blazor-audit-view-toggle {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}

.pixata-blazor-audit-view-toggle-label {
  font-weight: 600;
  font-size: 0.85rem;
  margin-right: 0.2rem;
}

.pixata-blazor-audit-view-toggle-btn {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--pixata-border-color);
  background: var(--pixata-card-bg);
  color: var(--pixata-color);
  border-radius: var(--pixata-border-radius);
  cursor: pointer;
  font-size: 0.85rem;
}

.pixata-blazor-audit-view-toggle-btn.pixata-blazor-audit-active {
  background: var(--pixata-primary);
  color: var(--pixata-primary-color);
  border-color: var(--pixata-primary);
}

.pixata-blazor-audit-view-toggle-btn:hover:not(.pixata-blazor-audit-active) {
  background: var(--pixata-light-hover);
}

.pixata-blazor-audit-horizontal-scroll {
  overflow-x: auto;
  width: 0;
  min-width: 100%;
  border: 1px solid var(--pixata-card-border-color);
  border-radius: var(--pixata-border-radius);
}

.pixata-blazor-audit-horizontal-table {
  border-collapse: collapse;
  white-space: nowrap;
}

.pixata-blazor-audit-horizontal-table th,
.pixata-blazor-audit-horizontal-table td {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--pixata-card-border-color);
  text-align: left;
  font-size: 0.85rem;
  vertical-align: top;
  max-width: 350px;
  text-wrap: auto;
}

.pixata-blazor-audit-horizontal-table thead th {
  background: var(--pixata-light);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}

.pixata-blazor-audit-horizontal-property-col {
  position: sticky;
  left: 0;
  background: var(--pixata-light);
  z-index: 2;
  min-width: 150px;
}

.pixata-blazor-audit-horizontal-table thead th.pixata-blazor-audit-horizontal-property-col {
  z-index: 3;
}

.pixata-blazor-audit-property-filter {
  position: relative;
}

.pixata-blazor-audit-property-filter-btn {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--pixata-border-color);
  background: var(--pixata-card-bg);
  color: var(--pixata-color);
  border-radius: var(--pixata-border-radius);
  cursor: pointer;
  font-size: 0.85rem;
}

.pixata-blazor-audit-property-filter-btn:hover {
  background: var(--pixata-light-hover);
}

.pixata-blazor-audit-property-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 12;
  background: var(--pixata-card-bg);
  color: var(--pixata-color);
  border: 1px solid var(--pixata-border-color);
  border-radius: var(--pixata-border-radius);
  box-shadow: var(--pixata-popup-shadow);
  min-width: 220px;
  margin-top: 0.25rem;
}

.pixata-blazor-audit-property-dropdown-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
}

.pixata-blazor-audit-property-dropdown-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--pixata-card-border-color);
}

.pixata-blazor-audit-property-dropdown-actions button {
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--pixata-border-color);
  background: var(--pixata-card-bg);
  color: var(--pixata-color);
  border-radius: var(--pixata-border-radius);
  cursor: pointer;
  font-size: 0.8rem;
}

.pixata-blazor-audit-property-dropdown-actions button:hover {
  background: var(--pixata-light-hover);
}

.pixata-blazor-audit-property-dropdown-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 0.25rem 0;
}

.pixata-blazor-audit-property-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.pixata-blazor-audit-property-dropdown-item:hover {
  background: var(--pixata-light);
}

/* ---------- Notifications ---------- */

/* NotificationArea, the toasts at the top right of the window */
.pixata-blazor-notification-area {
  position: fixed;
  top: 60px;
  right: 0;
  max-height: calc(100vh - 5rem);
  overflow: auto;
  z-index: 100000;
}

.pixata-blazor-notification {
  position: relative;
  display: flex;
  gap: 1rem;
  max-width: 330px;
  margin: 1rem;
  padding: 1rem;
  color: var(--pixata-notification-color);
  background-color: var(--pixata-notification-bg);
  border-radius: var(--pixata-notification-border-radius);
  box-shadow: var(--pixata-notification-shadow);
  cursor: pointer;
  transition: all .5s ease-in-out;
}

.pixata-blazor-notification-new {
  animation: pixata-blazor-notification-fade-in 2s;
}

.pixata-blazor-notification-remove {
  animation: pixata-blazor-notification-fade-out 2s;
}

@keyframes pixata-blazor-notification-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pixata-blazor-notification-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.pixata-blazor-notification-icon {
  display: grid;
  place-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
}

.pixata-blazor-notification-message {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 225px;
}

.pixata-blazor-notification-message > div {
  overflow-wrap: anywhere;
}

/* In the flow rather than positioned, so a long message can't run under it, whatever size the button is. The negative margins put it
   near the corner */
.pixata-blazor-notification-dismiss {
  flex-shrink: 0;
  align-self: flex-start;
  margin: -.375rem -.125rem 0 auto;
}

.pixata-blazor-notification-dismiss button {
  width: .35rem;
  height: .35rem;
}

/* The circle behind a notification's icon, coloured by its type. Set by NotificationHelper.GetColourClass() */
.pixata-blazor-notification-general,
.pixata-blazor-notification-info,
.pixata-blazor-notification-success,
.pixata-blazor-notification-warning,
.pixata-blazor-notification-error {
  color: var(--pixata-notification-icon-color);
}

.pixata-blazor-notification-general {
  background-color: var(--pixata-notification-general-bg);
}

.pixata-blazor-notification-info {
  background-color: var(--pixata-notification-info-bg);
}

.pixata-blazor-notification-success {
  background-color: var(--pixata-notification-success-bg);
}

.pixata-blazor-notification-warning {
  background-color: var(--pixata-notification-warning-bg);
}

.pixata-blazor-notification-error {
  background-color: var(--pixata-notification-error-bg);
}

/* ---------- Spinner ---------- */

.pixata-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: .25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: pixata-spin .75s linear infinite;
}

.pixata-spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: .2em;
}

@keyframes pixata-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-spinner {
    animation-duration: 1.5s;
  }

  .pixata-btn,
  .pixata-form-control,
  .pixata-form-select {
    transition: none;
  }
}

/* ---------- Utilities ---------- */

.pixata-d-flex {
  display: flex;
}

.pixata-flex-wrap {
  flex-wrap: wrap;
}

.pixata-flex-fill {
  flex: 1 1 auto;
}

.pixata-align-items-center {
  align-items: center;
}

.pixata-justify-content-between {
  justify-content: space-between;
}

.pixata-justify-content-center {
  justify-content: center;
}

@media (min-width: 768px) {
  .pixata-justify-content-center-md {
    justify-content: center;
  }
}

.pixata-position-relative {
  position: relative;
}

.pixata-h-100 {
  height: 100%;
}

.pixata-w-100 {
  width: 100%;
}

.pixata-text-center {
  text-align: center;
}

.pixata-text-danger {
  color: var(--pixata-danger);
}

.pixata-text-muted {
  color: var(--pixata-muted-color);
}

.pixata-text-white {
  color: #fff;
}

.pixata-small {
  font-size: 80%;
  font-weight: 400;
}

.pixata-border {
  border: 1px solid var(--pixata-border-color);
}

.pixata-border-dark {
  border-color: #343a40;
}

.pixata-gap-1 {
  gap: .25rem;
}

.pixata-gap-2 {
  gap: .5rem;
}

.pixata-gap-3 {
  gap: 1rem;
}

.pixata-p-2 {
  padding: .5rem;
}

.pixata-p-3 {
  padding: 1rem;
}

.pixata-px-2 {
  padding-right: .5rem;
  padding-left: .5rem;
}

.pixata-pt-1 {
  padding-top: .25rem;
}

.pixata-pl-2 {
  padding-left: .5rem;
}

.pixata-mt-1 {
  margin-top: .25rem;
}

.pixata-mt-2 {
  margin-top: .5rem;
}

.pixata-mt-3 {
  margin-top: 1rem;
}

.pixata-mt-4 {
  margin-top: 1.5rem;
}

.pixata-m-3 {
  margin: 1rem;
}

.pixata-m-auto {
  margin: auto;
}

.pixata-me-1 {
  margin-right: .25rem;
}

.pixata-mr-2 {
  margin-right: .5rem;
}

.pixata-ml-2 {
  margin-left: .5rem;
}

.pixata-mx-auto {
  margin-right: auto;
  margin-left: auto;
}

.pixata-ms-1 {
  margin-left: .25rem;
}

.pixata-ms-2 {
  margin-left: .5rem;
}

.pixata-bg-white {
  background-color: #fff;
}

/* Form layout components (FormSingle, FormDouble, FormTriple, FormQuad and FormName) */

.pixata-form-label {
  font-size: var(--pixata-label-font-size);
  font-weight: var(--pixata-label-font-weight);
  color: var(--pixata-label-color);
}

.pixata-gap-col-3 {
  column-gap: 1rem;
}

/* FormSingle IsContainer, and FormDouble when ShowSecond is false: half width, or full width when the container is narrow */
.pixata-form-container {
  container-type: inline-size;
}

.pixata-form-container > div {
  max-width: calc(50% - .5rem);
}

@container (max-width: 429px) {
  .pixata-form-container > div {
    max-width: unset;
  }
}

/* No fixed widths, so the fields wrap onto separate lines when there isn't room for them side by side (eg on a phone) */
.pixata-form-double > div {
  flex: 1 1 14rem;
  min-width: 0;
}

.pixata-form-triple > div {
  flex: 1 1 12rem;
  min-width: 0;
}

.pixata-form-quad > div {
  flex: 1 1 10rem;
  min-width: 0;
}

.pixata-form-name > div {
  flex: 1 1 12rem;
  min-width: 0;
}

.pixata-form-name > .pixata-form-name-title {
  flex: 0 1 100px;
  max-width: 100px;
}

/*
  ========== Components ==========

  The components in Pixata.Blazor/Components (PixataDropDownList, PixataDialog and the rest) use the classes below. Every
  class starts with "pixata-blazor-", and the component-specific ones include the component's name, eg
  pixata-blazor-window-titlebar. Colours, sizes and spacing come from the --pixata-blazor-* custom properties, so you can
  retheme the components by overriding those, either on :root or on any container...

    :root {
      --pixata-blazor-primary: #6f42c1;
      --pixata-blazor-primary-hover: #59359a;
      --pixata-blazor-border-radius: 0;
    }
*/

:root {
  --pixata-blazor-font-family: inherit;
  --pixata-blazor-font-size: .875rem;
  --pixata-blazor-font-size-sm: .75rem;
  --pixata-blazor-font-size-lg: 1rem;
  --pixata-blazor-line-height: 1.4285714286;
  --pixata-blazor-line-height-lg: 1.5;
  --pixata-blazor-text-color: #3d3d3d;
  --pixata-blazor-subtle-color: #666;
  --pixata-blazor-surface-bg: #fff;
  --pixata-blazor-surface-alt-bg: #fafafa;
  --pixata-blazor-border-color: rgba(0, 0, 0, .08);
  --pixata-blazor-border-alt-color: rgba(0, 0, 0, .16);
  --pixata-blazor-border-radius: .25rem;
  --pixata-blazor-border-radius-sm: .125rem;
  --pixata-blazor-border-radius-lg: .375rem;
  --pixata-blazor-spacing: .25rem;
  --pixata-blazor-base-bg: #f5f5f5;
  --pixata-blazor-base-hover-bg: #ebebeb;
  --pixata-blazor-base-active-bg: #d6d6d6;
  --pixata-blazor-base-color: #3d3d3d;
  --pixata-blazor-primary: #ff6358;
  --pixata-blazor-primary-hover: #eb5b51;
  --pixata-blazor-primary-active: #d6534a;
  --pixata-blazor-primary-color: #fff;
  --pixata-blazor-primary-subtle: #ffe9e7;
  --pixata-blazor-secondary: #666;
  --pixata-blazor-secondary-hover: #525252;
  --pixata-blazor-secondary-active: #3d3d3d;
  --pixata-blazor-secondary-color: #fff;
  --pixata-blazor-tertiary: #03a9f4;
  --pixata-blazor-tertiary-hover: #0399dc;
  --pixata-blazor-tertiary-active: #0388c4;
  --pixata-blazor-tertiary-color: #fff;
  --pixata-blazor-info: #0058e9;
  --pixata-blazor-info-hover: #0052d6;
  --pixata-blazor-info-active: #004ac2;
  --pixata-blazor-info-color: #fff;
  --pixata-blazor-success: #37b400;
  --pixata-blazor-success-hover: #32a500;
  --pixata-blazor-success-active: #2d9600;
  --pixata-blazor-success-color: #fff;
  --pixata-blazor-warning: #ffc000;
  --pixata-blazor-warning-hover: #eaaf00;
  --pixata-blazor-warning-active: #d59f00;
  --pixata-blazor-warning-color: #3d3d3d;
  --pixata-blazor-error: #f31700;
  --pixata-blazor-error-hover: #df1600;
  --pixata-blazor-error-active: #ca1400;
  --pixata-blazor-error-color: #fff;
  --pixata-blazor-dark: #3d3d3d;
  --pixata-blazor-dark-hover: #333;
  --pixata-blazor-dark-active: #292929;
  --pixata-blazor-dark-color: #fff;
  --pixata-blazor-light: #ebebeb;
  --pixata-blazor-light-hover: #e0e0e0;
  --pixata-blazor-light-active: #d6d6d6;
  --pixata-blazor-light-color: #3d3d3d;
  --pixata-blazor-inverse: #3d3d3d;
  --pixata-blazor-inverse-hover: #333;
  --pixata-blazor-inverse-active: #292929;
  --pixata-blazor-inverse-color: #fff;
  --pixata-blazor-hover-bg: #f0f0f0;
  --pixata-blazor-selected-bg: #ff6358;
  --pixata-blazor-selected-hover-bg: #eb5b51;
  --pixata-blazor-selected-color: #fff;
  --pixata-blazor-list-item-hover-bg: color-mix(in srgb, var(--pixata-blazor-text-color) 6%, transparent);
  --pixata-blazor-list-item-selected-bg: color-mix(in srgb, var(--pixata-blazor-text-color) 12%, transparent);
  --pixata-blazor-list-item-selected-hover-bg: color-mix(in srgb, var(--pixata-blazor-text-color) 18%, transparent);
  --pixata-blazor-list-item-selected-color: var(--pixata-blazor-text-color);
  --pixata-blazor-focus-shadow: 0 0 0 .25rem rgba(0, 0, 0, .1);
  --pixata-blazor-focus-ring: inset 0 0 0 2px rgba(0, 0, 0, .13);
  --pixata-blazor-input-bg: #fff;
  --pixata-blazor-input-border-color: rgba(0, 0, 0, .16);
  --pixata-blazor-input-hover-border-color: rgba(0, 0, 0, .24);
  --pixata-blazor-input-focus-border-color: rgba(0, 0, 0, .24);
  --pixata-blazor-input-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06);
  --pixata-blazor-placeholder-color: #666;
  --pixata-blazor-disabled-opacity: .6;
  --pixata-blazor-popup-bg: #fff;
  --pixata-blazor-popup-border-color: rgba(0, 0, 0, .08);
  --pixata-blazor-popup-shadow: 0 4px 6px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .12);
  --pixata-blazor-popup-z-index: 100000;
  --pixata-blazor-overlay-bg: rgba(61, 61, 61, .5);
  --pixata-blazor-overlay-z-index: 10000;
  --pixata-blazor-window-shadow: 0 6px 8px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .12);
  --pixata-blazor-transition: .1s ease-in-out;
  --pixata-blazor-touch-target: 2.5rem;
}

/* ---------- Icons ---------- */

.pixata-blazor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  line-height: 1;
  vertical-align: middle;
}

.pixata-blazor-svg-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pixata-blazor-icon-sm {
  width: .75rem;
  height: .75rem;
}

.pixata-blazor-icon-lg {
  width: 1.25rem;
  height: 1.25rem;
}

.pixata-blazor-icon-xl {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---------- Shared states ---------- */

.pixata-blazor-disabled,
.pixata-blazor-disabled:hover {
  opacity: var(--pixata-blazor-disabled-opacity);
  cursor: default;
  pointer-events: none;
  filter: grayscale(.1);
}

.pixata-blazor-rounded-none {
  border-radius: 0;
}

.pixata-blazor-rounded-sm {
  border-radius: var(--pixata-blazor-border-radius-sm);
}

.pixata-blazor-rounded-md {
  border-radius: var(--pixata-blazor-border-radius);
}

.pixata-blazor-rounded-lg {
  border-radius: var(--pixata-blazor-border-radius-lg);
}

.pixata-blazor-rounded-full {
  border-radius: 9999px;
}

/* Text that is only there for screen readers */
.pixata-blazor-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Buttons ---------- */

/*
  A button is pixata-blazor-button, plus a size (-sm, -md, -lg), a pixata-blazor-rounded-* class, a fill mode (-solid,
  -outline, -flat, -link, -clear) and a theme colour (-base, -primary, -secondary...). The theme colour classes only set the
  custom properties that the fill mode classes use, so a new colour is just a new class setting those properties
*/
.pixata-blazor-button {
  --pixata-blazor-button-bg: var(--pixata-blazor-base-bg);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-base-hover-bg);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-base-active-bg);
  --pixata-blazor-button-color: var(--pixata-blazor-base-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-button-accent: var(--pixata-blazor-text-color);
  --pixata-blazor-button-on-accent: #fff;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pixata-blazor-spacing);
  margin: 0;
  border-width: 1px;
  border-style: solid;
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  font-weight: 400;
  line-height: var(--pixata-blazor-line-height);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  cursor: pointer;
  outline: none;
  appearance: none;
  position: relative;
  transition: color var(--pixata-blazor-transition), background-color var(--pixata-blazor-transition), border-color var(--pixata-blazor-transition), box-shadow var(--pixata-blazor-transition);
}

.pixata-blazor-button:disabled,
.pixata-blazor-button.pixata-blazor-disabled {
  opacity: var(--pixata-blazor-disabled-opacity);
  cursor: default;
  pointer-events: none;
}

.pixata-blazor-button:focus-visible {
  box-shadow: var(--pixata-blazor-focus-shadow);
}

.pixata-blazor-button-sm {
  padding: calc(var(--pixata-blazor-spacing) * .5) calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-button-md {
  padding: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-button-lg {
  padding: calc(var(--pixata-blazor-spacing) * 2) calc(var(--pixata-blazor-spacing) * 2);
  font-size: var(--pixata-blazor-font-size-lg);
  line-height: var(--pixata-blazor-line-height-lg);
}

/* An icon-only button is square */
.pixata-blazor-icon-button.pixata-blazor-button-sm {
  padding: calc(var(--pixata-blazor-spacing) * .5);
}

.pixata-blazor-icon-button.pixata-blazor-button-md {
  padding: var(--pixata-blazor-spacing);
}

.pixata-blazor-icon-button.pixata-blazor-button-lg {
  padding: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-icon-button .pixata-blazor-icon {
  width: calc(var(--pixata-blazor-font-size) * var(--pixata-blazor-line-height));
  height: calc(var(--pixata-blazor-font-size) * var(--pixata-blazor-line-height));
  padding: .125rem;
}

.pixata-blazor-button-primary {
  --pixata-blazor-button-bg: var(--pixata-blazor-primary);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-primary-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-primary-active);
  --pixata-blazor-button-color: var(--pixata-blazor-primary-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-primary);
  --pixata-blazor-button-accent: var(--pixata-blazor-primary);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-primary-color);
}

.pixata-blazor-button-secondary {
  --pixata-blazor-button-bg: var(--pixata-blazor-secondary);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-secondary-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-secondary-active);
  --pixata-blazor-button-color: var(--pixata-blazor-secondary-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-secondary);
  --pixata-blazor-button-accent: var(--pixata-blazor-secondary);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-secondary-color);
}

.pixata-blazor-button-tertiary {
  --pixata-blazor-button-bg: var(--pixata-blazor-tertiary);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-tertiary-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-tertiary-active);
  --pixata-blazor-button-color: var(--pixata-blazor-tertiary-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-tertiary);
  --pixata-blazor-button-accent: var(--pixata-blazor-tertiary);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-tertiary-color);
}

.pixata-blazor-button-info {
  --pixata-blazor-button-bg: var(--pixata-blazor-info);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-info-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-info-active);
  --pixata-blazor-button-color: var(--pixata-blazor-info-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-info);
  --pixata-blazor-button-accent: var(--pixata-blazor-info);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-info-color);
}

.pixata-blazor-button-success {
  --pixata-blazor-button-bg: var(--pixata-blazor-success);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-success-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-success-active);
  --pixata-blazor-button-color: var(--pixata-blazor-success-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-success);
  --pixata-blazor-button-accent: var(--pixata-blazor-success);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-success-color);
}

.pixata-blazor-button-warning {
  --pixata-blazor-button-bg: var(--pixata-blazor-warning);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-warning-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-warning-active);
  --pixata-blazor-button-color: var(--pixata-blazor-warning-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-warning);
  --pixata-blazor-button-accent: var(--pixata-blazor-warning);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-warning-color);
}

.pixata-blazor-button-error {
  --pixata-blazor-button-bg: var(--pixata-blazor-error);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-error-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-error-active);
  --pixata-blazor-button-color: var(--pixata-blazor-error-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-error);
  --pixata-blazor-button-accent: var(--pixata-blazor-error);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-error-color);
}

.pixata-blazor-button-dark {
  --pixata-blazor-button-bg: var(--pixata-blazor-dark);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-dark-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-dark-active);
  --pixata-blazor-button-color: var(--pixata-blazor-dark-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-dark);
  --pixata-blazor-button-accent: var(--pixata-blazor-dark);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-dark-color);
}

.pixata-blazor-button-light {
  --pixata-blazor-button-bg: var(--pixata-blazor-light);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-light-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-light-active);
  --pixata-blazor-button-color: var(--pixata-blazor-light-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-light);
  --pixata-blazor-button-accent: var(--pixata-blazor-light-color);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-light);
}

.pixata-blazor-button-inverse {
  --pixata-blazor-button-bg: var(--pixata-blazor-inverse);
  --pixata-blazor-button-hover-bg: var(--pixata-blazor-inverse-hover);
  --pixata-blazor-button-active-bg: var(--pixata-blazor-inverse-active);
  --pixata-blazor-button-color: var(--pixata-blazor-inverse-color);
  --pixata-blazor-button-border-color: var(--pixata-blazor-inverse);
  --pixata-blazor-button-accent: var(--pixata-blazor-inverse);
  --pixata-blazor-button-on-accent: var(--pixata-blazor-inverse-color);
}

.pixata-blazor-button-solid {
  background-color: var(--pixata-blazor-button-bg);
  border-color: var(--pixata-blazor-button-border-color);
  color: var(--pixata-blazor-button-color);
}

.pixata-blazor-button-solid:hover,
.pixata-blazor-button-solid.pixata-blazor-hover {
  background-color: var(--pixata-blazor-button-hover-bg);
}

.pixata-blazor-button-solid:active,
.pixata-blazor-button-solid.pixata-blazor-active,
.pixata-blazor-button-solid.pixata-blazor-selected {
  background-color: var(--pixata-blazor-button-active-bg);
}

.pixata-blazor-button-outline {
  background-color: transparent;
  border-color: var(--pixata-blazor-button-accent);
  color: var(--pixata-blazor-button-accent);
}

.pixata-blazor-button-outline:hover,
.pixata-blazor-button-outline:active,
.pixata-blazor-button-outline.pixata-blazor-active,
.pixata-blazor-button-outline.pixata-blazor-selected {
  background-color: var(--pixata-blazor-button-accent);
  border-color: var(--pixata-blazor-button-accent);
  color: var(--pixata-blazor-button-on-accent);
}

.pixata-blazor-button-flat,
.pixata-blazor-button-clear {
  background-color: transparent;
  border-color: transparent;
  color: var(--pixata-blazor-button-accent);
}

.pixata-blazor-button-flat.pixata-blazor-button-base,
.pixata-blazor-button-clear.pixata-blazor-button-base {
  color: inherit;
}

.pixata-blazor-button-flat:hover,
.pixata-blazor-button-flat.pixata-blazor-hover {
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.pixata-blazor-button-flat:active,
.pixata-blazor-button-flat.pixata-blazor-active,
.pixata-blazor-button-flat.pixata-blazor-selected {
  background-color: color-mix(in srgb, currentColor 16%, transparent);
}

.pixata-blazor-button-clear:hover,
.pixata-blazor-button-clear:active {
  opacity: .8;
}

.pixata-blazor-button-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--pixata-blazor-button-accent);
}

.pixata-blazor-button-link:hover,
.pixata-blazor-button-link:active {
  text-decoration: underline;
}

/* A row of buttons that share borders, eg a split button or a toolbar group */
.pixata-blazor-button-group {
  display: inline-flex;
  flex-wrap: nowrap;
  vertical-align: middle;
}

.pixata-blazor-button-group > .pixata-blazor-button + .pixata-blazor-button {
  margin-inline-start: -1px;
}

.pixata-blazor-button-group > .pixata-blazor-button:not(:first-child) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.pixata-blazor-button-group > .pixata-blazor-button:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* ---------- Inputs ---------- */

/*
  The wrapper around an input and its buttons (a drop-down's arrow, a clear button). Size it with -sm, -md or -lg, round it
  with a pixata-blazor-rounded-* class, and add pixata-blazor-invalid for the invalid state
*/
.pixata-blazor-input {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  border-color: var(--pixata-blazor-input-border-color);
  background-color: var(--pixata-blazor-input-bg);
  color: var(--pixata-blazor-text-color);
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  vertical-align: middle;
  transition: border-color var(--pixata-blazor-transition), box-shadow var(--pixata-blazor-transition);
}

.pixata-blazor-input-lg {
  font-size: var(--pixata-blazor-font-size-lg);
  line-height: var(--pixata-blazor-line-height-lg);
}

.pixata-blazor-input:hover {
  border-color: var(--pixata-blazor-input-hover-border-color);
}

.pixata-blazor-input:focus-within,
.pixata-blazor-input.pixata-blazor-focus {
  border-color: var(--pixata-blazor-input-focus-border-color);
  box-shadow: var(--pixata-blazor-input-focus-shadow);
}

.pixata-blazor-input-flat {
  border-color: transparent;
  border-bottom-color: var(--pixata-blazor-input-border-color);
  border-radius: 0;
  background-color: transparent;
}

.pixata-blazor-input-outline {
  border-color: var(--pixata-blazor-text-color);
  background-color: transparent;
}

.pixata-blazor-input.pixata-blazor-invalid,
.pixata-blazor-input.pixata-blazor-invalid:focus-within {
  border-color: var(--pixata-blazor-error);
}

.pixata-blazor-input.pixata-blazor-invalid:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pixata-blazor-error) 25%, transparent);
}

/* The text box (or the element showing the selected value) inside the wrapper */
.pixata-blazor-input-inner {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  appearance: none;
}

.pixata-blazor-input-inner::placeholder {
  color: var(--pixata-blazor-placeholder-color);
  opacity: 1;
}

.pixata-blazor-input-sm .pixata-blazor-input-inner {
  padding: calc(var(--pixata-blazor-spacing) * .5) calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-input-lg .pixata-blazor-input-inner {
  padding: calc(var(--pixata-blazor-spacing) * 2) calc(var(--pixata-blazor-spacing) * 2);
}

/* The button at the end of an input (eg a drop-down's arrow), which looks like a flat base button */
.pixata-blazor-input-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--pixata-blazor-font-size) * var(--pixata-blazor-line-height) + var(--pixata-blazor-spacing) * 2);
  margin: 0;
  padding: 0;
  border: 0;
  border-inline-start: 1px solid var(--pixata-blazor-border-color);
  background-color: var(--pixata-blazor-base-bg);
  color: var(--pixata-blazor-base-color);
  cursor: pointer;
}

.pixata-blazor-input-button:hover {
  background-color: var(--pixata-blazor-base-hover-bg);
}

.pixata-blazor-input-sm .pixata-blazor-input-button {
  width: calc(var(--pixata-blazor-font-size) * var(--pixata-blazor-line-height) + var(--pixata-blazor-spacing));
}

.pixata-blazor-input-lg .pixata-blazor-input-button {
  width: calc(var(--pixata-blazor-font-size) * var(--pixata-blazor-line-height) + var(--pixata-blazor-spacing) * 4);
}

/* The little x that clears the value */
.pixata-blazor-clear-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
  padding: 0 var(--pixata-blazor-spacing);
  margin: 0;
  border: 0;
  background: none;
  color: inherit;
  opacity: .5;
  cursor: pointer;
}

.pixata-blazor-clear-value:hover,
.pixata-blazor-clear-value:focus-visible {
  opacity: 1;
}

/* ---------- Popups and lists ---------- */

.pixata-blazor-popup {
  box-sizing: border-box;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--pixata-blazor-popup-z-index);
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--pixata-blazor-popup-border-color);
  border-radius: var(--pixata-blazor-border-radius);
  background-color: var(--pixata-blazor-popup-bg);
  color: var(--pixata-blazor-text-color);
  box-shadow: var(--pixata-blazor-popup-shadow);
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  text-align: start;
}

/* The scrolling part of a popup, eg its list of items. PixataPopupSettings.Height and MaxHeight set its size */
.pixata-blazor-popup-content {
  height: var(--pixata-blazor-popup-height, auto);
  min-height: var(--pixata-blazor-popup-min-height, 0);
  max-height: var(--pixata-blazor-popup-max-height, 200px);
  overflow: auto;
  overscroll-behavior: contain;
}

.pixata-blazor-list {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: 0;
}

.pixata-blazor-list-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pixata-blazor-spacing);
  padding: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--pixata-blazor-transition), color var(--pixata-blazor-transition);
}

.pixata-blazor-list-item:hover,
.pixata-blazor-list-item.pixata-blazor-hover {
  background-color: var(--pixata-blazor-list-item-hover-bg);
}

.pixata-blazor-list-item.pixata-blazor-focus {
  box-shadow: var(--pixata-blazor-focus-ring);
}

.pixata-blazor-list-item.pixata-blazor-selected {
  background-color: var(--pixata-blazor-list-item-selected-bg);
  color: var(--pixata-blazor-list-item-selected-color);
}

.pixata-blazor-list-item.pixata-blazor-selected:hover {
  background-color: var(--pixata-blazor-list-item-selected-hover-bg);
}

.pixata-blazor-list-item.pixata-blazor-disabled {
  opacity: var(--pixata-blazor-disabled-opacity);
  pointer-events: none;
}

.pixata-blazor-list-group-header {
  padding: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
  border-bottom: 1px solid var(--pixata-blazor-border-color);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--pixata-blazor-font-size-sm);
}

.pixata-blazor-list-header,
.pixata-blazor-list-footer {
  padding: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-list-header {
  border-bottom: 1px solid var(--pixata-blazor-border-color);
}

.pixata-blazor-list-footer {
  border-top: 1px solid var(--pixata-blazor-border-color);
}

.pixata-blazor-no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: calc(var(--pixata-blazor-spacing) * 2);
  color: var(--pixata-blazor-subtle-color);
  text-align: center;
}

/* Touch screens get bigger targets */
@media (pointer: coarse) {
  .pixata-blazor-button,
  .pixata-blazor-input-button,
  .pixata-blazor-clear-value {
    min-height: var(--pixata-blazor-touch-target);
    min-width: var(--pixata-blazor-touch-target);
  }

  .pixata-blazor-list-item {
    min-height: var(--pixata-blazor-touch-target);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-button,
  .pixata-blazor-input,
  .pixata-blazor-list-item {
    transition: none;
  }
}

/* ========== PixataComboBox, PixataDropDownList and PixataMultiSelect ========== */

/*
  The drop-downs use the shared input classes (pixata-blazor-input, -input-inner, -input-button, -clear-value) and popup and
  list classes (pixata-blazor-popup, -popup-content, -list, -list-item, -list-group-header, -no-data). Their own element also
  has pixata-blazor-dropdown plus pixata-blazor-dropdownlist, pixata-blazor-combobox or pixata-blazor-multiselect, and their
  popup has pixata-blazor-dropdown-popup plus pixata-blazor-dropdownlist-popup (and so on)
*/
:root {
  --pixata-blazor-dropdown-popup-padding: calc(var(--pixata-blazor-spacing) * 2);
  --pixata-blazor-dropdown-item-radius: var(--pixata-blazor-border-radius);
  --pixata-blazor-dropdown-item-hover-bg: color-mix(in srgb, var(--pixata-blazor-text-color) 8%, transparent);
  --pixata-blazor-dropdown-item-selected-bg: color-mix(in srgb, var(--pixata-blazor-text-color) 12%, transparent);
  --pixata-blazor-dropdown-item-selected-hover-bg: color-mix(in srgb, var(--pixata-blazor-text-color) 16%, transparent);
  --pixata-blazor-dropdown-item-selected-color: var(--pixata-blazor-text-color);
  --pixata-blazor-dropdown-item-focus-ring: inset 0 0 0 2px var(--pixata-blazor-border-alt-color);
  --pixata-blazor-dropdown-group-color: var(--pixata-blazor-subtle-color);
  --pixata-blazor-dropdown-checkbox-size: 1rem;
  --pixata-blazor-dropdown-checkbox-border-color: var(--pixata-blazor-border-alt-color);
  --pixata-blazor-dropdown-checkbox-checked-bg: var(--pixata-blazor-primary);
  --pixata-blazor-dropdown-checkbox-checked-color: var(--pixata-blazor-primary-color);
  --pixata-blazor-dropdownlist-bg: var(--pixata-blazor-base-bg);
  --pixata-blazor-dropdownlist-hover-bg: var(--pixata-blazor-base-hover-bg);
  --pixata-blazor-dropdownlist-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-multiselect-tag-bg: #ebebeb;
  --pixata-blazor-multiselect-tag-hover-bg: #e0e0e0;
  --pixata-blazor-multiselect-tag-border-color: #c2c2c2;
  --pixata-blazor-multiselect-tag-color: var(--pixata-blazor-text-color);
  --pixata-blazor-multiselect-tag-gap: .125rem;
}

/* ---------- The component ---------- */

.pixata-blazor-dropdown {
  outline: none;
}

.pixata-blazor-dropdown.pixata-blazor-dropdown-readonly {
  cursor: default;
}

.pixata-blazor-dropdown.pixata-blazor-input-lg,
.pixata-blazor-dropdown-lg {
  font-size: var(--pixata-blazor-font-size-lg);
  line-height: 1.5;
}

/* The drop-down list looks like a button, with the selected item's text on it */
.pixata-blazor-dropdownlist {
  border-color: var(--pixata-blazor-dropdownlist-border-color);
  background-color: var(--pixata-blazor-dropdownlist-bg);
  color: var(--pixata-blazor-base-color);
  cursor: pointer;
  user-select: none;
}

.pixata-blazor-dropdownlist:hover {
  border-color: var(--pixata-blazor-dropdownlist-border-color);
  background-color: var(--pixata-blazor-dropdownlist-hover-bg);
}

.pixata-blazor-dropdownlist:focus,
.pixata-blazor-dropdownlist:focus-within {
  border-color: var(--pixata-blazor-dropdownlist-border-color);
  box-shadow: var(--pixata-blazor-input-focus-shadow);
}

.pixata-blazor-dropdownlist.pixata-blazor-input-outline {
  border-color: color-mix(in srgb, var(--pixata-blazor-text-color) 50%, transparent);
  background-color: transparent;
}

.pixata-blazor-dropdownlist.pixata-blazor-input-flat {
  border-color: transparent;
  border-bottom-color: var(--pixata-blazor-border-alt-color);
  background-color: transparent;
}

.pixata-blazor-dropdownlist.pixata-blazor-input-outline:hover,
.pixata-blazor-dropdownlist.pixata-blazor-input-flat:hover {
  background-color: var(--pixata-blazor-dropdown-item-hover-bg);
}

.pixata-blazor-dropdownlist.pixata-blazor-invalid {
  border-color: var(--pixata-blazor-error);
}

.pixata-blazor-dropdownlist-value {
  display: flex;
  align-items: center;
}

.pixata-blazor-input-value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An icon-only drop-down list is a square as high as a normal one: the icon sits in a box one line high and wide, with the
   same padding all round as the text of a normal one has above and below it */
.pixata-blazor-dropdownlist.pixata-blazor-dropdownlist-icon-only {
  flex: none;
  width: auto;
}

.pixata-blazor-dropdownlist-icon {
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--pixata-blazor-font-size) * var(--pixata-blazor-line-height));
  width: 1lh;
  height: calc(var(--pixata-blazor-font-size) * var(--pixata-blazor-line-height));
  height: 1lh;
  padding: var(--pixata-blazor-spacing);
}

.pixata-blazor-input-sm .pixata-blazor-dropdownlist-icon {
  padding: calc(var(--pixata-blazor-spacing) * .5);
}

.pixata-blazor-input-lg .pixata-blazor-dropdownlist-icon {
  padding: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-dropdownlist-icon .pixata-blazor-dropdown-loading {
  margin: 0;
}

/* The arrow of the drop-down list is part of the button, so has no background or border of its own */
.pixata-blazor-dropdownlist .pixata-blazor-input-button,
.pixata-blazor-dropdownlist .pixata-blazor-input-button:hover {
  border-inline-start: 0;
  background: none;
  color: inherit;
}

.pixata-blazor-combobox .pixata-blazor-input-button,
.pixata-blazor-multiselect .pixata-blazor-input-button {
  user-select: none;
}

.pixata-blazor-dropdown .pixata-blazor-clear-value {
  align-self: stretch;
}

.pixata-blazor-dropdown.pixata-blazor-dropdown-readonly .pixata-blazor-input-button {
  cursor: default;
}

/* The spinner shown while OnRead is fetching data */
.pixata-blazor-dropdown-loading {
  box-sizing: border-box;
  display: inline-block;
  flex: none;
  align-self: center;
  width: 1em;
  height: 1em;
  margin: 0 var(--pixata-blazor-spacing);
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  opacity: .6;
  animation: pixata-blazor-dropdown-spin .75s linear infinite;
}

@keyframes pixata-blazor-dropdown-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- The multi-select's tags ---------- */

.pixata-blazor-multiselect {
  cursor: text;
}

.pixata-blazor-multiselect-values {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pixata-blazor-multiselect-tag-gap);
  min-width: 0;
  padding: var(--pixata-blazor-multiselect-tag-gap);
}

.pixata-blazor-multiselect-tags {
  display: contents;
}

.pixata-blazor-multiselect .pixata-blazor-multiselect-input {
  flex: 1 1 3em;
  width: 3em;
  min-width: 3em;
  margin: calc(var(--pixata-blazor-multiselect-tag-gap) * -1);
}

.pixata-blazor-multiselect-tag {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--pixata-blazor-spacing);
  min-width: 0;
  max-width: 100%;
  padding: calc(var(--pixata-blazor-spacing) - 1px) var(--pixata-blazor-spacing);
  border: 1px solid var(--pixata-blazor-multiselect-tag-border-color);
  border-radius: var(--pixata-blazor-border-radius);
  background-color: var(--pixata-blazor-multiselect-tag-bg);
  color: var(--pixata-blazor-multiselect-tag-color);
  line-height: 1rem;
  white-space: nowrap;
  cursor: default;
}

.pixata-blazor-multiselect-tag:hover {
  background-color: var(--pixata-blazor-multiselect-tag-hover-bg);
}

.pixata-blazor-input-sm .pixata-blazor-multiselect-tag {
  padding-top: 0;
  padding-bottom: 0;
}

.pixata-blazor-input-lg .pixata-blazor-multiselect-tag {
  padding-top: calc(var(--pixata-blazor-spacing) * 1.5 - 1px);
  padding-bottom: calc(var(--pixata-blazor-spacing) * 1.5 - 1px);
}

.pixata-blazor-multiselect-tag-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pixata-blazor-multiselect-tag-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  opacity: .8;
  cursor: pointer;
}

.pixata-blazor-multiselect-tag-remove:hover {
  opacity: 1;
}

/* ---------- The popup and its list ---------- */

.pixata-blazor-dropdown-popup {
  padding: var(--pixata-blazor-dropdown-popup-padding);
}

.pixata-blazor-dropdown-filter {
  flex: none;
  padding: var(--pixata-blazor-dropdown-popup-padding);
  padding-top: 0;
}

.pixata-blazor-dropdown-filter-box {
  align-items: center;
}

.pixata-blazor-dropdown-filter-icon {
  margin-inline-start: calc(var(--pixata-blazor-spacing) * 2);
  opacity: .8;
}

/* The filter box takes the popup's width rather than setting it */
.pixata-blazor-dropdown-filter-box .pixata-blazor-input-inner {
  width: 0;
  padding-inline-start: var(--pixata-blazor-spacing);
}

.pixata-blazor-dropdown-header,
.pixata-blazor-dropdown-footer {
  flex: none;
  padding: 0;
  border: 0;
}

.pixata-blazor-dropdown-content {
  position: relative;
}

.pixata-blazor-dropdown-list .pixata-blazor-list-item {
  border-radius: var(--pixata-blazor-dropdown-item-radius);
}

.pixata-blazor-dropdown-list .pixata-blazor-list-item:hover {
  background-color: var(--pixata-blazor-dropdown-item-hover-bg);
}

.pixata-blazor-dropdown-list .pixata-blazor-list-item.pixata-blazor-focus {
  box-shadow: var(--pixata-blazor-dropdown-item-focus-ring);
}

.pixata-blazor-dropdown-list .pixata-blazor-list-item.pixata-blazor-selected {
  background-color: var(--pixata-blazor-dropdown-item-selected-bg);
  color: var(--pixata-blazor-dropdown-item-selected-color);
}

.pixata-blazor-dropdown-list .pixata-blazor-list-item.pixata-blazor-selected:hover {
  background-color: var(--pixata-blazor-dropdown-item-selected-hover-bg);
}

.pixata-blazor-dropdown-item-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pixata-blazor-dropdown-sm .pixata-blazor-list-item,
.pixata-blazor-dropdown-sm .pixata-blazor-list-group-header {
  padding-top: calc(var(--pixata-blazor-spacing) * .5);
  padding-bottom: calc(var(--pixata-blazor-spacing) * .5);
}

.pixata-blazor-dropdown-lg .pixata-blazor-list-item {
  padding-top: calc(var(--pixata-blazor-spacing) * 2);
  padding-bottom: calc(var(--pixata-blazor-spacing) * 2);
}

/* Group headers stick to the top of the list while their items are in view */
.pixata-blazor-dropdown-group-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: calc(var(--pixata-blazor-spacing) + 1px) calc(var(--pixata-blazor-spacing) * 2);
  border-bottom: 0;
  background-color: var(--pixata-blazor-popup-bg);
  box-shadow: inset 0 1px 0 0 var(--pixata-blazor-border-color);
  color: var(--pixata-blazor-dropdown-group-color);
  font-size: var(--pixata-blazor-font-size-sm);
  line-height: 1.5;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pixata-blazor-dropdown-list > .pixata-blazor-dropdown-group-header:first-child {
  box-shadow: none;
}

/* "Select all" stays at the top of the list as it scrolls */
.pixata-blazor-dropdown-sticky {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--pixata-blazor-popup-bg);
}

.pixata-blazor-dropdown-select-all {
  margin-bottom: var(--pixata-blazor-spacing);
  box-shadow: 0 1px 0 0 var(--pixata-blazor-border-color);
}

.pixata-blazor-dropdown-list .pixata-blazor-dropdown-select-all.pixata-blazor-focus {
  box-shadow: var(--pixata-blazor-dropdown-item-focus-ring), 0 1px 0 0 var(--pixata-blazor-border-color);
}

.pixata-blazor-dropdown-custom-value-icon {
  opacity: .8;
}

.pixata-blazor-dropdown-placeholder {
  background: linear-gradient(var(--pixata-blazor-dropdown-item-hover-bg), var(--pixata-blazor-dropdown-item-hover-bg)) no-repeat calc(var(--pixata-blazor-spacing) * 2) center / 60% 40%;
}

.pixata-blazor-dropdown-no-data {
  min-height: 0;
  padding: calc(var(--pixata-blazor-spacing) * 4) calc(var(--pixata-blazor-spacing) * 2);
}

/* A drawn checkbox (the option is what gets chosen, so it isn't an input) */
.pixata-blazor-dropdown-checkbox {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--pixata-blazor-dropdown-checkbox-size);
  height: var(--pixata-blazor-dropdown-checkbox-size);
  border: 1px solid var(--pixata-blazor-dropdown-checkbox-border-color);
  border-radius: var(--pixata-blazor-border-radius);
  background-color: var(--pixata-blazor-input-bg);
  color: var(--pixata-blazor-dropdown-checkbox-checked-bg);
}

.pixata-blazor-dropdown-checkbox .pixata-blazor-icon {
  width: 100%;
  height: 100%;
}

.pixata-blazor-dropdown-checkbox svg {
  stroke-width: 3;
}

.pixata-blazor-dropdown-checkbox.pixata-blazor-checked {
  border-color: var(--pixata-blazor-dropdown-checkbox-checked-bg);
  background-color: var(--pixata-blazor-dropdown-checkbox-checked-bg);
  color: var(--pixata-blazor-dropdown-checkbox-checked-color);
}

/* Touch screens: bigger targets for removing a tag, without making the tags themselves bigger */
@media (pointer: coarse) {
  .pixata-blazor-multiselect-tag-remove::after {
    content: "";
    position: absolute;
    inset: -.5rem;
  }

  .pixata-blazor-dropdown .pixata-blazor-clear-value,
  .pixata-blazor-dropdown .pixata-blazor-input-button {
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-dropdown-loading {
    animation-duration: 2s;
  }
}

/* ========== end of PixataComboBox, PixataDropDownList and PixataMultiSelect ========== */

/* ========== PixataTabStrip ========== */

:root {
  --pixata-blazor-tabstrip-color: var(--pixata-blazor-text-color);
  --pixata-blazor-tabstrip-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-tabstrip-hover-color: var(--pixata-blazor-primary);
  --pixata-blazor-tabstrip-active-color: var(--pixata-blazor-primary);
  --pixata-blazor-tabstrip-active-bg: var(--pixata-blazor-surface-bg);
  --pixata-blazor-tabstrip-content-bg: var(--pixata-blazor-surface-bg);
  --pixata-blazor-tabstrip-content-padding: calc(var(--pixata-blazor-spacing) * 4);
  --pixata-blazor-tabstrip-radius: var(--pixata-blazor-border-radius);
  --pixata-blazor-tabstrip-focus-ring: inset 0 0 0 2px var(--pixata-blazor-border-alt-color);
}

.pixata-blazor-tabstrip {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  color: var(--pixata-blazor-tabstrip-color);
  -webkit-tap-highlight-color: transparent;
}

.pixata-blazor-tabstrip-bottom {
  flex-direction: column-reverse;
}

.pixata-blazor-tabstrip-left {
  flex-direction: row;
}

.pixata-blazor-tabstrip-right {
  flex-direction: row-reverse;
}

/* The row (or column) holding the tabs, the scroll buttons and the suffix template */
.pixata-blazor-tabstrip-items-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
}

.pixata-blazor-tabstrip-left > .pixata-blazor-tabstrip-items-wrapper,
.pixata-blazor-tabstrip-right > .pixata-blazor-tabstrip-items-wrapper {
  flex-direction: column;
}

/*
  The line between the tabs and the content. It is drawn behind the tabs, so the active tab (which has a background) hides
  it and looks joined to the content, even when the tab list scrolls
*/
.pixata-blazor-tabstrip-items-wrapper::after {
  content: "";
  position: absolute;
  z-index: 0;
  border: 0 solid var(--pixata-blazor-tabstrip-border-color);
  pointer-events: none;
}

.pixata-blazor-tabstrip-top > .pixata-blazor-tabstrip-items-wrapper::after {
  inset: auto 0 0 0;
  border-bottom-width: 1px;
}

.pixata-blazor-tabstrip-bottom > .pixata-blazor-tabstrip-items-wrapper::after {
  inset: 0 0 auto 0;
  border-top-width: 1px;
}

.pixata-blazor-tabstrip-left > .pixata-blazor-tabstrip-items-wrapper::after {
  inset-block: 0;
  inset-inline-end: 0;
  border-inline-end-width: 1px;
}

.pixata-blazor-tabstrip-right > .pixata-blazor-tabstrip-items-wrapper::after {
  inset-block: 0;
  inset-inline-start: 0;
  border-inline-start-width: 1px;
}

.pixata-blazor-tabstrip-items {
  box-sizing: border-box;
  display: flex;
  flex-direction: inherit;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  outline: 0;
}

.pixata-blazor-tabstrip-items-start {
  justify-content: flex-start;
}

.pixata-blazor-tabstrip-items-center {
  justify-content: center;
}

.pixata-blazor-tabstrip-items-end {
  justify-content: flex-end;
}

.pixata-blazor-tabstrip-items-justify {
  justify-content: space-between;
}

.pixata-blazor-tabstrip-items-stretched > .pixata-blazor-tabstrip-item {
  flex: 1 0 0;
}

.pixata-blazor-tabstrip-item {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-shrink: 0;
  margin: 0;
  padding: 0 var(--pixata-blazor-spacing);
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
  outline: 0;
  user-select: none;
  transition: color var(--pixata-blazor-transition), border-color var(--pixata-blazor-transition), background-color var(--pixata-blazor-transition), box-shadow var(--pixata-blazor-transition);
}

.pixata-blazor-tabstrip-item:hover {
  color: var(--pixata-blazor-tabstrip-hover-color);
}

.pixata-blazor-tabstrip-item.pixata-blazor-active {
  border-color: var(--pixata-blazor-tabstrip-border-color);
  background-color: var(--pixata-blazor-tabstrip-active-bg);
  color: var(--pixata-blazor-tabstrip-active-color);
}

.pixata-blazor-tabstrip-item:focus-visible {
  box-shadow: var(--pixata-blazor-tabstrip-focus-ring);
}

/*
  Each position rounds the corners away from the content, and opens the active tab on to the content. These rules (and the
  size rules) only reach the tab strip's own tabs, not those of a tab strip in one of its tabs
*/
.pixata-blazor-tabstrip-top > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-item {
  border-start-start-radius: var(--pixata-blazor-tabstrip-radius);
  border-start-end-radius: var(--pixata-blazor-tabstrip-radius);
}

.pixata-blazor-tabstrip-top > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-item.pixata-blazor-active {
  border-bottom-color: transparent;
}

.pixata-blazor-tabstrip-bottom > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-item {
  border-end-start-radius: var(--pixata-blazor-tabstrip-radius);
  border-end-end-radius: var(--pixata-blazor-tabstrip-radius);
}

.pixata-blazor-tabstrip-bottom > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-item.pixata-blazor-active {
  border-top-color: transparent;
}

.pixata-blazor-tabstrip-left > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-item {
  border-start-start-radius: var(--pixata-blazor-tabstrip-radius);
  border-end-start-radius: var(--pixata-blazor-tabstrip-radius);
}

.pixata-blazor-tabstrip-left > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-item.pixata-blazor-active {
  border-inline-end-color: transparent;
}

.pixata-blazor-tabstrip-right > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-item {
  border-start-end-radius: var(--pixata-blazor-tabstrip-radius);
  border-end-end-radius: var(--pixata-blazor-tabstrip-radius);
}

.pixata-blazor-tabstrip-right > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-item.pixata-blazor-active {
  border-inline-start-color: transparent;
}

.pixata-blazor-tabstrip-link {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--pixata-blazor-spacing);
  padding: calc(var(--pixata-blazor-spacing) * 1.5);
  color: inherit;
  white-space: nowrap;
}

.pixata-blazor-tabstrip-top > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-link,
.pixata-blazor-tabstrip-bottom > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-link {
  justify-content: center;
}

.pixata-blazor-tabstrip-sm > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-link {
  padding: var(--pixata-blazor-spacing);
}

.pixata-blazor-tabstrip-lg > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-link {
  padding: calc(var(--pixata-blazor-spacing) * 2.5);
  font-size: var(--pixata-blazor-font-size-lg);
  line-height: 1.5;
}

.pixata-blazor-tabstrip-item-actions {
  display: flex;
  align-items: center;
  align-self: center;
}

.pixata-blazor-tabstrip-close.pixata-blazor-icon-button.pixata-blazor-button-sm {
  padding: .125rem;
}

.pixata-blazor-tabstrip-close.pixata-blazor-icon-button .pixata-blazor-icon {
  width: 1rem;
  height: 1rem;
  padding: 0;
}

/* The content of each tab. Only the active tab's is shown */
.pixata-blazor-tabstrip-content {
  box-sizing: border-box;
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: var(--pixata-blazor-tabstrip-content-padding);
  overflow: auto;
  border: 1px solid var(--pixata-blazor-tabstrip-border-color);
  background-color: var(--pixata-blazor-tabstrip-content-bg);
  color: inherit;
  outline: 0;
}

.pixata-blazor-tabstrip-content[hidden] {
  display: none;
}

.pixata-blazor-tabstrip-content:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: -1px;
}

.pixata-blazor-tabstrip-top > .pixata-blazor-tabstrip-content {
  border-top-width: 0;
  border-end-start-radius: var(--pixata-blazor-tabstrip-radius);
  border-end-end-radius: var(--pixata-blazor-tabstrip-radius);
}

.pixata-blazor-tabstrip-bottom > .pixata-blazor-tabstrip-content {
  border-bottom-width: 0;
  border-start-start-radius: var(--pixata-blazor-tabstrip-radius);
  border-start-end-radius: var(--pixata-blazor-tabstrip-radius);
}

.pixata-blazor-tabstrip-left > .pixata-blazor-tabstrip-content {
  border-inline-start-width: 0;
  border-start-end-radius: var(--pixata-blazor-tabstrip-radius);
  border-end-end-radius: var(--pixata-blazor-tabstrip-radius);
}

.pixata-blazor-tabstrip-right > .pixata-blazor-tabstrip-content {
  border-inline-end-width: 0;
  border-start-start-radius: var(--pixata-blazor-tabstrip-radius);
  border-end-start-radius: var(--pixata-blazor-tabstrip-radius);
}

/* A scrollable tab strip keeps its tabs on one line, and scrolls them (with a swipe, the scroll buttons or the keyboard) */
.pixata-blazor-tabstrip-scrollable > .pixata-blazor-tabstrip-items-wrapper > .pixata-blazor-tabstrip-items {
  flex-wrap: nowrap;
  white-space: nowrap;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.pixata-blazor-tabstrip-scrollable > .pixata-blazor-tabstrip-items-wrapper > .pixata-blazor-tabstrip-items::-webkit-scrollbar {
  display: none;
}

.pixata-blazor-tabstrip-scrollable.pixata-blazor-tabstrip-top > .pixata-blazor-tabstrip-items-wrapper > .pixata-blazor-tabstrip-items,
.pixata-blazor-tabstrip-scrollable.pixata-blazor-tabstrip-bottom > .pixata-blazor-tabstrip-items-wrapper > .pixata-blazor-tabstrip-items {
  overflow-x: auto;
  overflow-y: hidden;
}

.pixata-blazor-tabstrip-scrollable.pixata-blazor-tabstrip-left > .pixata-blazor-tabstrip-items-wrapper > .pixata-blazor-tabstrip-items,
.pixata-blazor-tabstrip-scrollable.pixata-blazor-tabstrip-right > .pixata-blazor-tabstrip-items-wrapper > .pixata-blazor-tabstrip-items {
  overflow-x: hidden;
  overflow-y: auto;
}

.pixata-blazor-tabstrip-scroll-button.pixata-blazor-button {
  flex: none;
  z-index: 1;
  align-self: stretch;
}

.pixata-blazor-tabstrip-top > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-scroll-button .pixata-blazor-icon:dir(rtl),
.pixata-blazor-tabstrip-bottom > .pixata-blazor-tabstrip-items-wrapper .pixata-blazor-tabstrip-scroll-button .pixata-blazor-icon:dir(rtl) {
  transform: scaleX(-1);
}

/* The suffix template, after the tabs */
.pixata-blazor-tabstrip-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * .5);
}

/* Touch screens get bigger tabs and buttons */
@media (pointer: coarse) {
  .pixata-blazor-tabstrip-link {
    min-width: var(--pixata-blazor-touch-target);
    min-height: var(--pixata-blazor-touch-target);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-tabstrip-item {
    transition: none;
  }
}

/* ========== end of PixataTabStrip ========== */

/* ========== PixataEditor ========== */

/*
  PixataEditor. The rules whose selectors mention pixata-blazor-editor-document style the content being edited. In iframe
  mode the editor copies them (and the custom properties they use) into the iframe, so the content looks the same in both
  modes, and page styles stay out of the iframe. Restyle the content by adding rules that mention that class too
*/

:root {
  --pixata-blazor-editor-bg: var(--pixata-blazor-input-bg);
  --pixata-blazor-editor-toolbar-bg: var(--pixata-blazor-surface-alt-bg);
  --pixata-blazor-editor-content-padding: .5rem .75rem;
  --pixata-blazor-editor-link-color: #0058e9;
  --pixata-blazor-editor-table-border-color: #c6c6c6;
  --pixata-blazor-editor-selected-cell-bg: rgba(0, 88, 233, .12);
  --pixata-blazor-editor-selected-node-outline: 2px solid #8cb2f7;
  --pixata-blazor-editor-code-bg: #f5f5f5;
  --pixata-blazor-editor-quote-border-color: #d6d6d6;
  --pixata-blazor-editor-dialog-width: 400px;
}

.pixata-blazor-editor {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 6rem;
  border: 1px solid var(--pixata-blazor-input-border-color);
  border-radius: var(--pixata-blazor-border-radius);
  background-color: var(--pixata-blazor-editor-bg);
  color: var(--pixata-blazor-text-color);
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  transition: border-color var(--pixata-blazor-transition), box-shadow var(--pixata-blazor-transition);
}

.pixata-blazor-editor:focus-within {
  border-color: var(--pixata-blazor-input-focus-border-color);
  box-shadow: var(--pixata-blazor-input-focus-shadow);
}

.pixata-blazor-editor.pixata-blazor-invalid,
.pixata-blazor-editor.pixata-blazor-invalid:focus-within {
  border-color: var(--pixata-blazor-error);
}

.pixata-blazor-editor.pixata-blazor-invalid:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pixata-blazor-error) 25%, transparent);
}

/* The editor stays readable (and scrollable) when disabled */
.pixata-blazor-editor.pixata-blazor-disabled {
  pointer-events: none;
}

.pixata-blazor-editor.pixata-blazor-disabled .pixata-blazor-editor-content {
  pointer-events: auto;
}

/* ---------- Toolbar ---------- */

.pixata-blazor-editor-toolbar {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 2);
  border-bottom: 1px solid var(--pixata-blazor-border-color);
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background-color: var(--pixata-blazor-editor-toolbar-bg);
}

/* With Adaptive, the toolbar stays on one line and the tools that don't fit go into the overflow menu */
.pixata-blazor-editor-toolbar-adaptive {
  flex-wrap: nowrap;
  overflow: hidden;
}

.pixata-blazor-editor-toolbar-item {
  display: inline-flex;
  flex: none;
  align-items: center;
  max-width: 100%;
}

/* Tools in the overflow menu stay in the toolbar, out of sight, so their widths can still be measured */
.pixata-blazor-editor-toolbar-item-hidden,
.pixata-blazor-editor-toolbar-overflow-hidden {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  visibility: hidden;
  pointer-events: none;
}

.pixata-blazor-editor-toolbar-overflow {
  display: inline-flex;
  flex: none;
  margin-inline-start: auto;
}

.pixata-blazor-editor-tool .pixata-blazor-icon {
  pointer-events: none;
}

.pixata-blazor-editor-overflow-tools {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  max-width: min(22rem, calc(100vw - 1rem));
  max-height: min(20rem, calc(100vh - 6rem));
  padding: calc(var(--pixata-blazor-spacing) * 2);
  overflow: auto;
}

/* The format, font and size drop-downs */
.pixata-blazor-editor-dropdown-wrapper,
.pixata-blazor-editor-colour-wrapper,
.pixata-blazor-editor-table-wrapper {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.pixata-blazor-input.pixata-blazor-editor-dropdown {
  width: 10rem;
  max-width: 100%;
  cursor: pointer;
  text-align: start;
}

.pixata-blazor-editor-dropdown.pixata-blazor-editor-tool-font-size {
  width: 8rem;
}

.pixata-blazor-editor-dropdown:focus-visible {
  outline: none;
  border-color: var(--pixata-blazor-input-focus-border-color);
  box-shadow: var(--pixata-blazor-focus-shadow);
}

.pixata-blazor-editor-dropdown:disabled {
  opacity: var(--pixata-blazor-disabled-opacity);
  cursor: default;
}

.pixata-blazor-editor-dropdown .pixata-blazor-input-inner {
  display: block;
  align-self: center;
}

.pixata-blazor-editor-dropdown-popup .pixata-blazor-popup-content {
  --pixata-blazor-popup-max-height: 16rem;
}

.pixata-blazor-editor-format-preview {
  display: block;
  margin: 0;
  line-height: 1.2;
}

.pixata-blazor-editor-format-h1 {
  font-size: 1.6em;
  font-weight: 700;
}

.pixata-blazor-editor-format-h2 {
  font-size: 1.4em;
  font-weight: 700;
}

.pixata-blazor-editor-format-h3 {
  font-size: 1.2em;
  font-weight: 700;
}

.pixata-blazor-editor-format-h4 {
  font-size: 1.05em;
  font-weight: 700;
}

.pixata-blazor-editor-format-h5 {
  font-size: .95em;
  font-weight: 700;
}

.pixata-blazor-editor-format-h6 {
  font-size: .85em;
  font-weight: 700;
}

/* The colour pickers */
.pixata-blazor-editor-colour-tool {
  gap: 0;
  padding-inline-end: calc(var(--pixata-blazor-spacing) * .5);
}

.pixata-blazor-editor-colour-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
}

.pixata-blazor-editor-colour-icon .pixata-blazor-icon {
  width: calc(var(--pixata-blazor-font-size) * var(--pixata-blazor-line-height) - 3px);
  height: calc(var(--pixata-blazor-font-size) * var(--pixata-blazor-line-height) - 3px);
}

.pixata-blazor-editor-colour-bar {
  display: block;
  height: 3px;
  border-radius: 1px;
}

.pixata-blazor-editor-colour-bar.pixata-blazor-editor-colour-none {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--pixata-blazor-border-alt-color);
}

.pixata-blazor-editor-colour-caret .pixata-blazor-icon {
  width: .75rem;
  height: .75rem;
}

.pixata-blazor-editor-palette {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-editor-palette-clear {
  display: flex;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: var(--pixata-blazor-spacing);
  border-radius: var(--pixata-blazor-border-radius-sm);
  cursor: pointer;
  user-select: none;
}

.pixata-blazor-editor-palette-clear:hover {
  background-color: var(--pixata-blazor-hover-bg);
}

.pixata-blazor-editor-palette-clear.pixata-blazor-focus {
  box-shadow: var(--pixata-blazor-focus-ring);
}

.pixata-blazor-editor-colour-swatch {
  box-sizing: border-box;
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--pixata-blazor-border-radius-sm);
}

.pixata-blazor-editor-colour-swatch.pixata-blazor-editor-colour-none {
  border: 1px solid var(--pixata-blazor-border-alt-color);
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--pixata-blazor-error) calc(50% - 1px), var(--pixata-blazor-error) calc(50% + 1px), transparent calc(50% + 1px));
}

.pixata-blazor-editor-palette-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pixata-blazor-editor-palette-row {
  display: flex;
  gap: 1px;
}

.pixata-blazor-editor-palette-cell {
  box-sizing: border-box;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  cursor: pointer;
}

.pixata-blazor-editor-palette-cell:hover,
.pixata-blazor-editor-palette-cell.pixata-blazor-focus {
  position: relative;
  outline: 2px solid var(--pixata-blazor-text-color);
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px #fff;
  z-index: 1;
}

.pixata-blazor-editor-palette-cell.pixata-blazor-selected {
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(0, 0, 0, .5);
}

/* The Insert table grid */
.pixata-blazor-editor-table-picker {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-editor-table-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pixata-blazor-editor-table-row {
  display: flex;
  gap: 2px;
}

.pixata-blazor-editor-table-cell {
  box-sizing: border-box;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--pixata-blazor-border-alt-color);
  background-color: var(--pixata-blazor-surface-bg);
  cursor: pointer;
}

.pixata-blazor-editor-table-cell.pixata-blazor-selected {
  border-color: var(--pixata-blazor-primary);
  background-color: var(--pixata-blazor-primary-subtle);
}

.pixata-blazor-editor-table-size {
  color: var(--pixata-blazor-subtle-color);
  text-align: center;
}

/* ---------- Content area ---------- */

.pixata-blazor-editor-content {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.pixata-blazor-editor-iframe {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background-color: var(--pixata-blazor-editor-bg);
  color-scheme: normal;
}

.pixata-blazor-editor-mount {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Until the editor loads in the browser, the content is shown read-only in its place */
.pixata-blazor-editor-loading {
  visibility: hidden;
}

.pixata-blazor-editor-prerender {
  position: absolute;
  inset: 0;
  overflow: auto;
}

/* ---------- Content ---------- */

.pixata-blazor-editor-document {
  box-sizing: border-box;
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: var(--pixata-blazor-editor-content-padding);
  outline: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
  -webkit-font-variant-ligatures: none;
}

.pixata-blazor-editor-document.pixata-blazor-editor-prerender {
  white-space: normal;
}

.pixata-blazor-editor-document > :first-child {
  margin-top: 0;
}

.pixata-blazor-editor-document > :last-child {
  margin-bottom: 0;
}

.pixata-blazor-editor-document p {
  margin: 0 0 1em;
}

.pixata-blazor-editor-document h1,
.pixata-blazor-editor-document h2,
.pixata-blazor-editor-document h3,
.pixata-blazor-editor-document h4,
.pixata-blazor-editor-document h5,
.pixata-blazor-editor-document h6 {
  margin: 0 0 .5em;
  line-height: 1.2;
}

.pixata-blazor-editor-document a {
  color: var(--pixata-blazor-editor-link-color);
  text-decoration: underline;
}

.pixata-blazor-editor-document img {
  max-width: 100%;
  height: auto;
}

.pixata-blazor-editor-document ul,
.pixata-blazor-editor-document ol {
  margin: 0 0 1em;
  padding-inline-start: 2em;
}

.pixata-blazor-editor-document li > p {
  margin: 0;
}

.pixata-blazor-editor-document blockquote {
  margin: 0 0 1em;
  padding-inline-start: 1em;
  border-inline-start: 3px solid var(--pixata-blazor-editor-quote-border-color);
}

.pixata-blazor-editor-document pre {
  margin: 0 0 1em;
  padding: .5em;
  border-radius: var(--pixata-blazor-border-radius-sm);
  background-color: var(--pixata-blazor-editor-code-bg);
  white-space: pre-wrap;
}

.pixata-blazor-editor-document code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .9em;
}

.pixata-blazor-editor-document hr {
  margin: 1em 0;
  border: 0;
  border-top: 1px solid var(--pixata-blazor-editor-table-border-color);
}

.pixata-blazor-editor-document table {
  width: 100%;
  margin: 0 0 1em;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
}

.pixata-blazor-editor-document td,
.pixata-blazor-editor-document th {
  box-sizing: border-box;
  position: relative;
  min-width: 1em;
  padding: .25em .5em;
  border: 1px solid var(--pixata-blazor-editor-table-border-color);
  vertical-align: top;
}

.pixata-blazor-editor-document th {
  font-weight: 700;
  text-align: start;
}

.pixata-blazor-editor-document td > p,
.pixata-blazor-editor-document th > p {
  margin: 0;
}

.pixata-blazor-editor-document .tableWrapper {
  overflow-x: auto;
}

.pixata-blazor-editor-document .selectedCell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--pixata-blazor-editor-selected-cell-bg);
  pointer-events: none;
}

.pixata-blazor-editor-document .column-resize-handle {
  position: absolute;
  top: 0;
  right: -2px;
  bottom: -2px;
  width: 4px;
  background-color: var(--pixata-blazor-editor-link-color);
  pointer-events: none;
}

.pixata-blazor-editor-document .ProseMirror-selectednode {
  outline: var(--pixata-blazor-editor-selected-node-outline);
}

.pixata-blazor-editor-document li.ProseMirror-selectednode {
  outline: none;
}

.pixata-blazor-editor-document li.ProseMirror-selectednode::after {
  content: "";
  position: absolute;
  inset: -2px -2px -2px -32px;
  border: var(--pixata-blazor-editor-selected-node-outline);
  pointer-events: none;
}

.pixata-blazor-editor-document img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
}

.pixata-blazor-editor-document.ProseMirror-hideselection *::selection {
  background: transparent;
}

.pixata-blazor-editor-document.ProseMirror-hideselection *::-moz-selection {
  background: transparent;
}

.pixata-blazor-editor-document.ProseMirror-hideselection {
  caret-color: transparent;
}

.pixata-blazor-editor-document [draggable][contenteditable=false] {
  user-select: text;
}

.pixata-blazor-editor-document .ProseMirror-gapcursor {
  display: none;
  position: absolute;
  pointer-events: none;
}

.pixata-blazor-editor-document .ProseMirror-gapcursor::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  width: 20px;
  border-top: 1px solid currentColor;
  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
}

@keyframes ProseMirror-cursor-blink {
  to {
    visibility: hidden;
  }
}

.pixata-blazor-editor-document.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}

.pixata-blazor-editor-document .pixata-blazor-editor-placeholder::before {
  content: attr(data-placeholder);
  float: inline-start;
  height: 0;
  color: var(--pixata-blazor-placeholder-color);
  pointer-events: none;
}

/* ---------- Dialogs (insert link, insert image, view HTML) ---------- */

.pixata-blazor-editor-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--pixata-blazor-overlay-z-index);
  background-color: var(--pixata-blazor-overlay-bg);
}

.pixata-blazor-editor-dialog {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--pixata-blazor-overlay-z-index) + 1);
  display: flex;
  flex-direction: column;
  width: var(--pixata-blazor-editor-dialog-width);
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  border: 1px solid var(--pixata-blazor-border-color);
  border-radius: var(--pixata-blazor-border-radius);
  background-color: var(--pixata-blazor-surface-bg);
  color: var(--pixata-blazor-text-color);
  box-shadow: var(--pixata-blazor-window-shadow);
  transform: translate(-50%, -50%);
  text-align: start;
}

.pixata-blazor-editor-dialog-html {
  --pixata-blazor-editor-dialog-width: 640px;
}

.pixata-blazor-editor-dialog-titlebar {
  display: flex;
  flex: none;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 2) calc(var(--pixata-blazor-spacing) * 4);
  border-bottom: 1px solid var(--pixata-blazor-border-color);
}

.pixata-blazor-editor-dialog-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--pixata-blazor-font-size-lg);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pixata-blazor-editor-dialog-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

.pixata-blazor-editor-dialog-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(var(--pixata-blazor-spacing) * 3);
  min-height: 0;
  padding: calc(var(--pixata-blazor-spacing) * 4);
  overflow: auto;
}

.pixata-blazor-editor-dialog-field {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--pixata-blazor-spacing);
  min-width: 0;
}

.pixata-blazor-editor-dialog-label {
  font-weight: 500;
}

.pixata-blazor-editor-dialog-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pixata-blazor-spacing) * 3);
}

.pixata-blazor-editor-dialog-checkbox {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  cursor: pointer;
}

.pixata-blazor-editor-dialog-checkbox input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--pixata-blazor-primary);
}

.pixata-blazor-editor-dialog-error {
  color: var(--pixata-blazor-error);
}

.pixata-blazor-editor-html-source {
  box-sizing: border-box;
  width: 100%;
  min-height: 18rem;
  height: 50vh;
  margin: 0;
  padding: calc(var(--pixata-blazor-spacing) * 2);
  border: 1px solid var(--pixata-blazor-input-border-color);
  border-radius: var(--pixata-blazor-border-radius);
  background-color: var(--pixata-blazor-input-bg);
  color: var(--pixata-blazor-text-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: var(--pixata-blazor-font-size-sm);
  line-height: 1.5;
  resize: vertical;
  white-space: pre;
  overflow: auto;
}

.pixata-blazor-editor-html-source:focus {
  outline: none;
  border-color: var(--pixata-blazor-input-focus-border-color);
  box-shadow: var(--pixata-blazor-input-focus-shadow);
}

.pixata-blazor-editor-dialog-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 2) calc(var(--pixata-blazor-spacing) * 4);
  border-top: 1px solid var(--pixata-blazor-border-color);
}

/* ---------- Touch screens and small screens ---------- */

@media (pointer: coarse) {
  .pixata-blazor-input.pixata-blazor-editor-dropdown {
    min-height: var(--pixata-blazor-touch-target);
  }

  .pixata-blazor-editor-palette-cell {
    width: 1.75rem;
    height: 1.75rem;
  }

  .pixata-blazor-editor-palette-clear {
    min-height: var(--pixata-blazor-touch-target);
  }

  .pixata-blazor-editor-table-cell {
    width: 1.75rem;
    height: 1.75rem;
  }
}

@media (max-width: 480px) {
  .pixata-blazor-editor-dialog {
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
  }

  .pixata-blazor-editor-dialog-row {
    flex-direction: column;
  }

  .pixata-blazor-editor-html-source {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .pixata-blazor-editor-palette-cell {
    width: min(1.75rem, calc((100vw - 3rem) / var(--pixata-blazor-editor-palette-columns, 10) - 1px));
    height: min(1.75rem, calc((100vw - 3rem) / var(--pixata-blazor-editor-palette-columns, 10) - 1px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-editor {
    transition: none;
  }
}

/* ========== end of PixataEditor ========== */

/* ========== PixataFileSelect and PixataUpload ========== */

/*
  PixataFileSelect and PixataUpload share their markup: pixata-blazor-upload (plus pixata-blazor-fileselect for the file
  select) holds the drop zone (pixata-blazor-upload-dropzone: the select button, and the hint or upload status), the file
  list (pixata-blazor-upload-files) and, for an upload that doesn't start by itself, the Clear and Upload buttons
  (pixata-blazor-upload-actions-bar). Each file is a pixata-blazor-upload-file, with -progress, -success, -error,
  -invalid or -paused added for its state. PixataDropZone is pixata-blazor-external-dropzone
*/
:root {
  --pixata-blazor-upload-bg: var(--pixata-blazor-surface-bg);
  --pixata-blazor-upload-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-upload-dropzone-bg: var(--pixata-blazor-surface-alt-bg);
  --pixata-blazor-upload-dropzone-hover-bg: color-mix(in srgb, var(--pixata-blazor-text-color) 8%, var(--pixata-blazor-surface-alt-bg));
  --pixata-blazor-upload-button-min-width: 7em;
  --pixata-blazor-upload-files-max-height: 300px;
  --pixata-blazor-upload-file-icon-size: 2rem;
  --pixata-blazor-upload-file-icon-color: var(--pixata-blazor-subtle-color);
  --pixata-blazor-upload-progress-height: 2px;
  --pixata-blazor-upload-progress-bg: var(--pixata-blazor-base-hover-bg);
  --pixata-blazor-upload-progress-color: var(--pixata-blazor-info);
  --pixata-blazor-upload-success-color: color-mix(in srgb, var(--pixata-blazor-success) 85%, #000);
  --pixata-blazor-upload-error-color: color-mix(in srgb, var(--pixata-blazor-error) 85%, #000);
  --pixata-blazor-upload-invalid-color: var(--pixata-blazor-subtle-color);
  --pixata-blazor-dropzone-height: 220px;
  --pixata-blazor-dropzone-bg: var(--pixata-blazor-surface-alt-bg);
  --pixata-blazor-dropzone-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-dropzone-icon-size: 3rem;
  --pixata-blazor-dropzone-icon-color: var(--pixata-blazor-subtle-color);
  --pixata-blazor-dropzone-hover-color: var(--pixata-blazor-primary);
}

.pixata-blazor-upload {
  box-sizing: border-box;
  position: relative;
  display: block;
  overflow: clip;
  border: 1px solid var(--pixata-blazor-upload-border-color);
  background-color: var(--pixata-blazor-upload-bg);
  color: var(--pixata-blazor-text-color);
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  text-align: start;
  -webkit-tap-highlight-color: transparent;
}

.pixata-blazor-upload *,
.pixata-blazor-upload *::before,
.pixata-blazor-upload *::after {
  box-sizing: border-box;
}

/* When disabled, the buttons are greyed out, but the file list can still be read and scrolled */
.pixata-blazor-upload-disabled .pixata-blazor-upload-dropzone {
  pointer-events: none;
}

/* The bar at the top, holding the select button and the hint (or the upload status) */
.pixata-blazor-upload-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 2);
  background-color: var(--pixata-blazor-upload-dropzone-bg);
  transition: background-color var(--pixata-blazor-transition);
}

.pixata-blazor-upload-drag-hover .pixata-blazor-upload-dropzone {
  background-color: var(--pixata-blazor-upload-dropzone-hover-bg);
}

/* The real file input covers the button, so a click or tap goes straight to the browser's file picker */
.pixata-blazor-upload-button-wrap {
  position: relative;
  flex: none;
}

.pixata-blazor-upload-button {
  min-width: var(--pixata-blazor-upload-button-min-width);
}

.pixata-blazor-upload-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}

.pixata-blazor-upload-input::-webkit-file-upload-button {
  cursor: pointer;
}

.pixata-blazor-upload-input:disabled {
  visibility: hidden;
}

/* The input hides the button from the mouse, so the button's hover and pressed looks come from the wrapper */
.pixata-blazor-upload-button-wrap:hover .pixata-blazor-upload-button:not(:disabled) {
  background-color: var(--pixata-blazor-button-hover-bg);
}

.pixata-blazor-upload-button-wrap:active .pixata-blazor-upload-button:not(:disabled) {
  background-color: var(--pixata-blazor-button-active-bg);
}

.pixata-blazor-upload-dropzone-hint {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--pixata-blazor-subtle-color);
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pixata-blazor-upload-status {
  display: flex;
  align-items: center;
  gap: var(--pixata-blazor-spacing);
  min-width: 0;
  color: var(--pixata-blazor-subtle-color);
  white-space: nowrap;
}

/* The status replaces the hint, except while files are being dragged over the page */
.pixata-blazor-upload-status + .pixata-blazor-upload-dropzone-hint,
.pixata-blazor-upload-drag-active .pixata-blazor-upload-status {
  display: none;
}

.pixata-blazor-upload-drag-active .pixata-blazor-upload-status + .pixata-blazor-upload-dropzone-hint {
  display: block;
}

/* The file list */
.pixata-blazor-upload-files {
  max-height: var(--pixata-blazor-upload-files-max-height);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--pixata-blazor-upload-border-color);
  list-style: none;
}

.pixata-blazor-upload-files[hidden] {
  display: none;
}

.pixata-blazor-upload-file {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: calc(var(--pixata-blazor-spacing) * 2) calc(var(--pixata-blazor-spacing) * 2) calc(var(--pixata-blazor-spacing) * 2 + 2px);
  border-bottom: 1px solid var(--pixata-blazor-upload-border-color);
  outline: none;
}

.pixata-blazor-upload-file:last-child {
  border-bottom: 0;
}

.pixata-blazor-upload-file:focus-visible {
  box-shadow: var(--pixata-blazor-focus-ring);
}

.pixata-blazor-upload-file-single {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
}

.pixata-blazor-upload-file-icon-wrapper {
  display: inline-flex;
  flex: none;
  color: var(--pixata-blazor-upload-file-icon-color);
}

.pixata-blazor-upload-file-icon {
  width: var(--pixata-blazor-upload-file-icon-size);
  height: var(--pixata-blazor-upload-file-icon-size);
}

.pixata-blazor-upload-file-icon svg {
  stroke-width: 1.25;
}

.pixata-blazor-upload-file-info {
  display: block;
  flex: 1 0 0;
  min-width: 0;
  min-height: var(--pixata-blazor-upload-file-icon-size);
  margin-inline-start: calc(var(--pixata-blazor-spacing) * 2);
  overflow: hidden;
}

.pixata-blazor-upload-file-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pixata-blazor-upload-file-size,
.pixata-blazor-upload-file-validation-message {
  display: block;
  color: var(--pixata-blazor-subtle-color);
  font-size: var(--pixata-blazor-font-size-sm);
  line-height: 1rem;
}

.pixata-blazor-upload-file-success .pixata-blazor-upload-file-validation-message {
  color: var(--pixata-blazor-upload-success-color);
}

.pixata-blazor-upload-file-error .pixata-blazor-upload-file-validation-message {
  color: var(--pixata-blazor-upload-error-color);
}

.pixata-blazor-upload-file-invalid .pixata-blazor-upload-file-validation-message {
  color: var(--pixata-blazor-upload-invalid-color);
}

/* The file's buttons (remove, cancel, retry, pause and resume) and its percentage while it uploads */
.pixata-blazor-upload-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  margin-inline-start: var(--pixata-blazor-spacing);
}

.pixata-blazor-upload-action:focus-visible {
  box-shadow: 0 0 0 2px var(--pixata-blazor-border-alt-color);
}

.pixata-blazor-upload-pct {
  margin: 0 var(--pixata-blazor-spacing);
  font-variant-numeric: tabular-nums;
}

/* The progress bar along the bottom of a file, while it uploads */
.pixata-blazor-upload-progressbar {
  position: absolute;
  inset-inline: calc(var(--pixata-blazor-spacing) * 2);
  bottom: var(--pixata-blazor-spacing);
  height: var(--pixata-blazor-upload-progress-height);
  overflow: hidden;
  border-radius: var(--pixata-blazor-border-radius);
  background-color: var(--pixata-blazor-upload-progress-bg);
}

.pixata-blazor-upload-progressbar-value {
  height: 100%;
  background-color: var(--pixata-blazor-upload-progress-color);
  transition: width var(--pixata-blazor-transition);
}

/* The Upload and Clear buttons under the list */
.pixata-blazor-upload-actions-bar {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 2);
  border-top: 1px solid var(--pixata-blazor-upload-border-color);
}

/* PixataDropZone, a separate area to drop files on */
.pixata-blazor-external-dropzone {
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  height: var(--pixata-blazor-dropzone-height);
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
}

.pixata-blazor-dropzone-inner {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  padding: calc(var(--pixata-blazor-spacing) * 2);
  border: 1px solid var(--pixata-blazor-dropzone-border-color);
  background-color: var(--pixata-blazor-dropzone-bg);
  color: var(--pixata-blazor-text-color);
  text-align: center;
  transition: background-color var(--pixata-blazor-transition), border-color var(--pixata-blazor-transition);
}

.pixata-blazor-dropzone-icon {
  width: var(--pixata-blazor-dropzone-icon-size);
  height: var(--pixata-blazor-dropzone-icon-size);
  margin-bottom: calc(var(--pixata-blazor-spacing) * 6);
  color: var(--pixata-blazor-dropzone-icon-color);
  transition: color var(--pixata-blazor-transition);
}

.pixata-blazor-dropzone-hint {
  margin-bottom: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-dropzone-note {
  color: var(--pixata-blazor-subtle-color);
  font-size: var(--pixata-blazor-font-size-sm);
}

/* While files are dragged over the page the drop zone's border is dashed, and while they're over it, the icon is coloured */
.pixata-blazor-external-dropzone-active .pixata-blazor-dropzone-inner {
  border-style: dashed;
  border-color: var(--pixata-blazor-border-alt-color);
}

.pixata-blazor-external-dropzone-hover .pixata-blazor-dropzone-inner {
  border-color: var(--pixata-blazor-dropzone-hover-color);
}

.pixata-blazor-external-dropzone-hover .pixata-blazor-dropzone-icon {
  color: var(--pixata-blazor-dropzone-hover-color);
}

/* Phones: the hint gets out of the button's way, and there's more room to tap the file's buttons */
@media (max-width: 480px) {
  .pixata-blazor-upload-dropzone-hint {
    font-size: var(--pixata-blazor-font-size-sm);
  }

  .pixata-blazor-external-dropzone {
    height: auto;
    min-height: calc(var(--pixata-blazor-dropzone-height) * .6);
  }
}

@media (pointer: coarse) {
  .pixata-blazor-upload-actions {
    gap: var(--pixata-blazor-spacing);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-upload-dropzone,
  .pixata-blazor-upload-progressbar-value,
  .pixata-blazor-dropzone-inner,
  .pixata-blazor-dropzone-icon {
    transition: none;
  }
}

/* ========== end of PixataFileSelect and PixataUpload ========== */

/* ========== PixataDialog and PixataWindow ========== */

/*
  PixataDialog and PixataWindow share most of their look: a surface with a shadow, a titlebar, content that scrolls, and a
  row of buttons along the bottom. While one is open, it is moved into a wrapper at the end of the page's body, which the
  script stacks above the page from --pixata-blazor-overlay-z-index upwards (staying below --pixata-blazor-popup-z-index, so
  drop-downs inside a dialog still show on top of it). The wrapper of the one in front has the data-pixata-blazor-active
  attribute
*/
:root {
  --pixata-blazor-window-bg: var(--pixata-blazor-surface-bg);
  --pixata-blazor-window-color: var(--pixata-blazor-text-color);
  --pixata-blazor-window-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-window-border-radius: 0;
  --pixata-blazor-window-line-height: 1.25;
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-surface-alt-bg);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-text-color);
  --pixata-blazor-window-titlebar-padding: .75rem 1rem;
  --pixata-blazor-window-title-font-size: var(--pixata-blazor-font-size-lg);
  --pixata-blazor-window-content-padding: 1rem;
  --pixata-blazor-window-footer-padding: .5rem;
  --pixata-blazor-window-footer-gap: .5rem;
  --pixata-blazor-window-active-shadow: 0 14px 16px rgba(0, 0, 0, .24), 0 4px 16px rgba(0, 0, 0, .12);
  --pixata-blazor-window-resize-handle-size: 6px;
  --pixata-blazor-dialog-shadow: 0 8px 10px rgba(0, 0, 0, .12), 0 4px 16px rgba(0, 0, 0, .12);
  --pixata-blazor-dialog-viewport-margin: 1rem;
  --pixata-blazor-dialog-predefined-min-width: 200px;
}

/* The placeholder left where the dialog or window was declared */
.pixata-blazor-layer-anchor {
  display: contents;
}

.pixata-blazor-dialog-wrapper,
.pixata-blazor-window-wrapper {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  z-index: calc(var(--pixata-blazor-overlay-z-index) + 1);
}

.pixata-blazor-dialog-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pixata-blazor-dialog-viewport-margin);
}

/* A non-modal window's wrapper covers the viewport (or the containment element), but lets clicks through to the page */
.pixata-blazor-window-wrapper {
  pointer-events: none;
}

.pixata-blazor-window-wrapper-modal {
  pointer-events: auto;
}

/* The dimmed backdrop behind a dialog or a modal window */
.pixata-blazor-dialog-wrapper > .pixata-blazor-overlay,
.pixata-blazor-window-wrapper > .pixata-blazor-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--pixata-blazor-overlay-bg);
}

.pixata-blazor-dialog,
.pixata-blazor-window {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0 solid var(--pixata-blazor-window-border-color);
  border-radius: var(--pixata-blazor-window-border-radius);
  outline: none;
  background-color: var(--pixata-blazor-window-bg);
  color: var(--pixata-blazor-window-color);
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  font-weight: 400;
  line-height: var(--pixata-blazor-window-line-height);
  text-align: start;
  pointer-events: auto;
}

/* Width and Height set these properties, so that a phone can override them */
.pixata-blazor-dialog {
  position: relative;
  width: var(--pixata-blazor-dialog-width, auto);
  height: var(--pixata-blazor-dialog-height, auto);
  max-width: 100%;
  max-height: 100%;
  box-shadow: var(--pixata-blazor-dialog-shadow);
}

/* Top and Left are measured from the wrapper, which covers the viewport (or the containment element) */
.pixata-blazor-window {
  position: absolute;
  max-width: 100%;
  max-height: 100%;
  box-shadow: var(--pixata-blazor-window-shadow);
}

.pixata-blazor-window-wrapper[data-pixata-blazor-active] > .pixata-blazor-window {
  box-shadow: var(--pixata-blazor-window-active-shadow);
}

.pixata-blazor-window-centred {
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
}

.pixata-blazor-window-sm {
  width: 300px;
}

.pixata-blazor-window-md {
  width: 800px;
}

.pixata-blazor-window-lg {
  width: 1200px;
}

.pixata-blazor-window-maximised {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

.pixata-blazor-window-wrapper > .pixata-blazor-window-maximised {
  box-shadow: none;
}

/* ---------- Titlebar ---------- */

.pixata-blazor-dialog-titlebar,
.pixata-blazor-window-titlebar {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--pixata-blazor-spacing);
  padding: var(--pixata-blazor-window-titlebar-padding);
  border-bottom: 1px solid var(--pixata-blazor-window-border-color);
  background-color: var(--pixata-blazor-window-titlebar-bg);
  color: var(--pixata-blazor-window-titlebar-color);
  white-space: nowrap;
}

/* The titlebar is what the user drags to move a window, with a mouse or a finger */
.pixata-blazor-window-titlebar {
  touch-action: none;
  user-select: none;
}

.pixata-blazor-window-minimised .pixata-blazor-window-titlebar {
  border-bottom-width: 0;
}

/* With PersistContent, a minimised window keeps its content and footer, but hides them (the footer is display: flex, which
   would otherwise beat the hidden attribute) */
.pixata-blazor-window-content[hidden],
.pixata-blazor-window-footer[hidden] {
  display: none;
}

.pixata-blazor-dialog-title,
.pixata-blazor-window-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--pixata-blazor-window-title-font-size);
  line-height: 1.25;
}

.pixata-blazor-dialog-title:empty::before,
.pixata-blazor-window-title:empty::before {
  content: "";
  display: inline-block;
}

/* The negative margins stop the buttons making the titlebar taller than the title */
.pixata-blazor-dialog-titlebar-actions,
.pixata-blazor-window-titlebar-actions {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row nowrap;
  align-items: center;
  margin-block: -.5rem;
  margin-inline-end: -.25rem;
}

.pixata-blazor-dialog-titlebar-action.pixata-blazor-icon-button,
.pixata-blazor-window-titlebar-action.pixata-blazor-icon-button {
  padding: 1px;
  color: inherit;
}

.pixata-blazor-dialog-titlebar-action .pixata-blazor-icon,
.pixata-blazor-window-titlebar-action .pixata-blazor-icon {
  width: 1.25rem;
  height: 1.25rem;
  padding: .125rem;
}

/* A ThemeColor colours the titlebar */
.pixata-blazor-dialog-primary,
.pixata-blazor-window-primary {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-primary);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-primary-color);
}

.pixata-blazor-dialog-secondary,
.pixata-blazor-window-secondary {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-secondary);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-secondary-color);
}

.pixata-blazor-dialog-tertiary,
.pixata-blazor-window-tertiary {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-tertiary);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-tertiary-color);
}

.pixata-blazor-dialog-info,
.pixata-blazor-window-info {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-info);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-info-color);
}

.pixata-blazor-dialog-success,
.pixata-blazor-window-success {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-success);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-success-color);
}

.pixata-blazor-dialog-warning,
.pixata-blazor-window-warning {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-warning);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-warning-color);
}

.pixata-blazor-dialog-error,
.pixata-blazor-window-error {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-error);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-error-color);
}

.pixata-blazor-dialog-dark,
.pixata-blazor-window-dark {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-dark);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-dark-color);
}

.pixata-blazor-dialog-light,
.pixata-blazor-window-light {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-light);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-light-color);
}

.pixata-blazor-dialog-inverse,
.pixata-blazor-window-inverse {
  --pixata-blazor-window-titlebar-bg: var(--pixata-blazor-inverse);
  --pixata-blazor-window-titlebar-color: var(--pixata-blazor-inverse-color);
}

/* ---------- Content, buttons and footer ---------- */

.pixata-blazor-dialog-content,
.pixata-blazor-window-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--pixata-blazor-window-content-padding);
  overflow: auto;
  overscroll-behavior: contain;
  outline: 0;
}

.pixata-blazor-dialog-actions,
.pixata-blazor-window-footer {
  display: flex;
  flex: 0 0 auto;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--pixata-blazor-window-footer-gap);
  padding: var(--pixata-blazor-window-footer-padding);
  border-top: 1px solid var(--pixata-blazor-window-border-color);
}

.pixata-blazor-dialog-actions-start,
.pixata-blazor-window-footer-start {
  justify-content: flex-start;
}

.pixata-blazor-dialog-actions-center,
.pixata-blazor-window-footer-center {
  justify-content: center;
}

.pixata-blazor-dialog-actions-end,
.pixata-blazor-window-footer-end {
  justify-content: flex-end;
}

.pixata-blazor-dialog-actions-stretch > *,
.pixata-blazor-window-footer-stretch > * {
  flex: 1 0 0%;
}

/* ---------- The alert, confirm and prompt dialogs ---------- */

.pixata-blazor-dialog-predefined {
  min-width: var(--pixata-blazor-dialog-predefined-min-width);
}

.pixata-blazor-dialog-message {
  white-space: pre-line;
}

.pixata-blazor-dialog-prompt-form {
  margin: 1.5rem 0 0;
}

/* ---------- Resize handles ---------- */

.pixata-blazor-window-resize-handle {
  position: absolute;
  z-index: 1;
  touch-action: none;
}

.pixata-blazor-window-resize-n,
.pixata-blazor-window-resize-s {
  left: 0;
  width: 100%;
  height: var(--pixata-blazor-window-resize-handle-size);
}

.pixata-blazor-window-resize-e,
.pixata-blazor-window-resize-w {
  top: 0;
  width: var(--pixata-blazor-window-resize-handle-size);
  height: 100%;
}

.pixata-blazor-window-resize-ne,
.pixata-blazor-window-resize-nw,
.pixata-blazor-window-resize-se,
.pixata-blazor-window-resize-sw {
  z-index: 2;
  width: calc(var(--pixata-blazor-window-resize-handle-size) * 2);
  height: calc(var(--pixata-blazor-window-resize-handle-size) * 2);
}

.pixata-blazor-window-resize-n {
  top: 0;
  cursor: n-resize;
}

.pixata-blazor-window-resize-s {
  bottom: 0;
  cursor: s-resize;
}

.pixata-blazor-window-resize-e {
  right: 0;
  cursor: e-resize;
}

.pixata-blazor-window-resize-w {
  left: 0;
  cursor: w-resize;
}

.pixata-blazor-window-resize-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
}

.pixata-blazor-window-resize-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
}

.pixata-blazor-window-resize-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}

.pixata-blazor-window-resize-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
}

/* ---------- Phones and touch screens ---------- */

/* On a phone, a dialog takes the full width of the screen, whatever its Width */
@media (max-width: 575.98px) {
  .pixata-blazor-dialog-wrapper {
    padding: calc(var(--pixata-blazor-dialog-viewport-margin) / 2);
  }

  .pixata-blazor-dialog {
    width: 100%;
  }
}

/* Fingers get bigger resize handles */
@media (pointer: coarse) {
  :root {
    --pixata-blazor-window-resize-handle-size: 12px;
  }
}

/* ========== end of PixataDialog and PixataWindow ========== */

/* ========== PixataWizard and PixataStepper ========== */

:root {
  --pixata-blazor-stepper-color: var(--pixata-blazor-text-color);
  --pixata-blazor-stepper-indicator-size: 1.75rem;
  --pixata-blazor-stepper-indicator-margin: 3px;
  --pixata-blazor-stepper-indicator-bg: var(--pixata-blazor-surface-bg);
  --pixata-blazor-stepper-indicator-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-stepper-indicator-hover-bg: var(--pixata-blazor-base-hover-bg);
  --pixata-blazor-stepper-accent: var(--pixata-blazor-primary);
  --pixata-blazor-stepper-accent-hover: var(--pixata-blazor-primary-hover);
  --pixata-blazor-stepper-accent-color: var(--pixata-blazor-primary-color);
  --pixata-blazor-stepper-line-width: 2px;
  --pixata-blazor-stepper-line-color: var(--pixata-blazor-base-hover-bg);
  --pixata-blazor-stepper-label-max-width: 10em;
  --pixata-blazor-stepper-label-radius: calc(var(--pixata-blazor-spacing) * 4);
  --pixata-blazor-stepper-success-color: var(--pixata-blazor-success);
  --pixata-blazor-stepper-error-color: var(--pixata-blazor-error);
  --pixata-blazor-stepper-optional-color: var(--pixata-blazor-subtle-color);
  --pixata-blazor-stepper-disabled-color: color-mix(in srgb, var(--pixata-blazor-stepper-color) 60%, transparent);
  --pixata-blazor-wizard-padding: calc(var(--pixata-blazor-spacing) * 5);
  --pixata-blazor-wizard-gap: calc(var(--pixata-blazor-spacing) * 8);
}

/* ---------- Stepper ---------- */

.pixata-blazor-stepper {
  box-sizing: border-box;
  position: relative;
  display: block;
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  color: var(--pixata-blazor-stepper-color);
  -webkit-tap-highlight-color: transparent;
}

.pixata-blazor-stepper-horizontal {
  width: 100%;
}

/* A horizontal stepper collapses when it is too narrow for its steps (see the container query below) */
.pixata-blazor-stepper-horizontal.pixata-blazor-stepper-collapsible {
  container: pixata-blazor-stepper / inline-size;
}

.pixata-blazor-stepper-list {
  position: relative;
  z-index: 1;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pixata-blazor-stepper-list-horizontal {
  flex-direction: row;
}

.pixata-blazor-stepper-list-vertical {
  flex-direction: column;
  height: 100%;
}

.pixata-blazor-stepper-step {
  position: relative;
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.pixata-blazor-stepper-list-horizontal > .pixata-blazor-stepper-step {
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
}

.pixata-blazor-stepper-list-vertical > .pixata-blazor-stepper-step {
  flex: 1 1 0;
  align-items: flex-start;
  min-height: calc(var(--pixata-blazor-stepper-indicator-size) + var(--pixata-blazor-stepper-indicator-margin) * 2 + 1.25rem);
}

/* The clickable part of a step: its indicator and label */
.pixata-blazor-stepper-step-link {
  display: flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  appearance: none;
}

.pixata-blazor-stepper-list-horizontal .pixata-blazor-stepper-step-link {
  flex-direction: column;
  max-width: min(100%, var(--pixata-blazor-stepper-label-max-width));
  margin: 0 auto;
}

.pixata-blazor-stepper-step-link:disabled,
.pixata-blazor-stepper-step-unreachable .pixata-blazor-stepper-step-link {
  cursor: default;
}

/* The circle holding the step's number, text or icon */
.pixata-blazor-stepper-step-indicator {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--pixata-blazor-stepper-indicator-size);
  height: var(--pixata-blazor-stepper-indicator-size);
  margin: var(--pixata-blazor-stepper-indicator-margin);
  border: 1px solid var(--pixata-blazor-stepper-indicator-border-color);
  border-radius: 50%;
  background-color: var(--pixata-blazor-stepper-indicator-bg);
  color: var(--pixata-blazor-stepper-color);
  line-height: 1;
  transition: color var(--pixata-blazor-transition), border-color var(--pixata-blazor-transition), background-color var(--pixata-blazor-transition);
}

/* The focus ring around the indicator */
.pixata-blazor-stepper-step-indicator::after {
  content: "";
  display: none;
  position: absolute;
  inset: calc(-1px - var(--pixata-blazor-stepper-indicator-margin));
  border: 1px solid var(--pixata-blazor-stepper-color);
  border-radius: 50%;
  pointer-events: none;
}

/* The current step shows the ring until the user moves the focus to another step with the arrow keys */
.pixata-blazor-stepper-list:not(:has(:focus-visible)) .pixata-blazor-stepper-step-current .pixata-blazor-stepper-step-indicator::after,
.pixata-blazor-stepper-step-link:focus-visible .pixata-blazor-stepper-step-indicator::after {
  display: block;
}

.pixata-blazor-stepper-step-indicator .pixata-blazor-icon {
  width: 1rem;
  height: 1rem;
}

.pixata-blazor-stepper-step-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  transition: font-weight var(--pixata-blazor-transition);
}

.pixata-blazor-stepper-list-horizontal .pixata-blazor-stepper-step-indicator + .pixata-blazor-stepper-step-label {
  margin-top: var(--pixata-blazor-spacing);
}

.pixata-blazor-stepper-list-vertical .pixata-blazor-stepper-step-label {
  justify-content: flex-start;
}

.pixata-blazor-stepper-list-vertical .pixata-blazor-stepper-step-indicator + .pixata-blazor-stepper-step-label {
  margin-inline-start: calc(var(--pixata-blazor-spacing) * 3);
}

.pixata-blazor-stepper-step-text {
  flex-grow: 1;
  max-width: var(--pixata-blazor-stepper-label-max-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pixata-blazor-stepper-step-label-icon {
  margin-inline-start: var(--pixata-blazor-spacing);
}

.pixata-blazor-stepper-step-label-optional {
  flex-basis: 100%;
  font-style: italic;
  color: var(--pixata-blazor-stepper-optional-color);
}

.pixata-blazor-stepper-step-current .pixata-blazor-stepper-step-label {
  font-weight: 600;
}

/* A stepper of labels shows each one as a pill */
.pixata-blazor-stepper-labels .pixata-blazor-stepper-step-label {
  padding: calc(var(--pixata-blazor-spacing) * 1.25) calc(var(--pixata-blazor-spacing) * 3);
  border-radius: var(--pixata-blazor-stepper-label-radius);
  background-color: var(--pixata-blazor-stepper-indicator-bg);
}

.pixata-blazor-stepper-labels .pixata-blazor-stepper-list:not(:has(:focus-visible)) .pixata-blazor-stepper-step-current .pixata-blazor-stepper-step-label,
.pixata-blazor-stepper-labels .pixata-blazor-stepper-step-link:focus-visible .pixata-blazor-stepper-step-label {
  box-shadow: inset 0 0 0 2px var(--pixata-blazor-border-color);
}

/* States */
.pixata-blazor-stepper-step:not(.pixata-blazor-stepper-step-disabled, .pixata-blazor-stepper-step-unreachable) .pixata-blazor-stepper-step-link:hover .pixata-blazor-stepper-step-indicator {
  background-color: var(--pixata-blazor-stepper-indicator-hover-bg);
}

.pixata-blazor-stepper-step-done .pixata-blazor-stepper-step-indicator,
.pixata-blazor-stepper-step-current .pixata-blazor-stepper-step-indicator {
  border-color: var(--pixata-blazor-stepper-accent);
  background-color: var(--pixata-blazor-stepper-accent);
  color: var(--pixata-blazor-stepper-accent-color);
}

.pixata-blazor-stepper-step-done .pixata-blazor-stepper-step-indicator::after,
.pixata-blazor-stepper-step-current .pixata-blazor-stepper-step-indicator::after {
  border-color: var(--pixata-blazor-stepper-accent);
}

.pixata-blazor-stepper-step-done:not(.pixata-blazor-stepper-step-disabled, .pixata-blazor-stepper-step-unreachable) .pixata-blazor-stepper-step-link:hover .pixata-blazor-stepper-step-indicator,
.pixata-blazor-stepper-step-current .pixata-blazor-stepper-step-link:hover .pixata-blazor-stepper-step-indicator {
  background-color: var(--pixata-blazor-stepper-accent-hover);
}

.pixata-blazor-stepper-step-disabled .pixata-blazor-stepper-step-label,
.pixata-blazor-stepper-step-disabled .pixata-blazor-stepper-step-indicator {
  color: var(--pixata-blazor-stepper-disabled-color);
}

.pixata-blazor-stepper-step-disabled.pixata-blazor-stepper-step-done .pixata-blazor-stepper-step-indicator,
.pixata-blazor-stepper-step-disabled.pixata-blazor-stepper-step-current .pixata-blazor-stepper-step-indicator {
  border-color: color-mix(in srgb, var(--pixata-blazor-stepper-accent) 60%, transparent);
  background-color: color-mix(in srgb, var(--pixata-blazor-stepper-accent) 60%, var(--pixata-blazor-stepper-indicator-bg));
  color: var(--pixata-blazor-stepper-accent-color);
}

.pixata-blazor-stepper-step-success .pixata-blazor-stepper-step-label-icon {
  color: var(--pixata-blazor-stepper-success-color);
}

.pixata-blazor-stepper-step-error .pixata-blazor-stepper-step-label {
  color: var(--pixata-blazor-stepper-error-color);
}

/* The line joining the steps, filled in up to the current step */
.pixata-blazor-stepper-progress {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  background-color: var(--pixata-blazor-stepper-line-color);
  pointer-events: none;
}

.pixata-blazor-stepper-horizontal > .pixata-blazor-stepper-progress {
  top: calc(var(--pixata-blazor-stepper-indicator-margin) + var(--pixata-blazor-stepper-indicator-size) / 2 - var(--pixata-blazor-stepper-line-width) / 2);
  height: var(--pixata-blazor-stepper-line-width);
}

.pixata-blazor-stepper-vertical > .pixata-blazor-stepper-progress {
  top: calc(var(--pixata-blazor-stepper-indicator-margin) + var(--pixata-blazor-stepper-indicator-size) / 2);
  inset-inline-start: calc(var(--pixata-blazor-stepper-indicator-margin) + var(--pixata-blazor-stepper-indicator-size) / 2 - var(--pixata-blazor-stepper-line-width) / 2);
  width: var(--pixata-blazor-stepper-line-width);
}

.pixata-blazor-stepper-progress-value {
  background-color: var(--pixata-blazor-stepper-accent);
  transition: width .2s ease-in-out, height .2s ease-in-out;
}

.pixata-blazor-stepper-horizontal > .pixata-blazor-stepper-progress > .pixata-blazor-stepper-progress-value {
  height: 100%;
}

.pixata-blazor-stepper-vertical > .pixata-blazor-stepper-progress > .pixata-blazor-stepper-progress-value {
  width: 100%;
}

/* The collapsed stepper: the current step, buttons to move either way, and a progress bar */
.pixata-blazor-stepper-compact {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-stepper-compact-summary {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  min-width: 0;
}

.pixata-blazor-stepper-compact .pixata-blazor-stepper-step-indicator {
  margin: 0;
  border-color: var(--pixata-blazor-stepper-accent);
  background-color: var(--pixata-blazor-stepper-accent);
  color: var(--pixata-blazor-stepper-accent-color);
}

.pixata-blazor-stepper-compact-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pixata-blazor-stepper-compact-count {
  color: var(--pixata-blazor-subtle-color);
  font-size: var(--pixata-blazor-font-size-sm);
}

.pixata-blazor-stepper-compact-label {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pixata-blazor-stepper-compact-progress {
  flex: 1 0 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background-color: var(--pixata-blazor-stepper-line-color);
}

.pixata-blazor-stepper-compact-progress-value {
  height: 100%;
  background-color: var(--pixata-blazor-stepper-accent);
  transition: width .2s ease-in-out;
}

/*
  A collapsible horizontal stepper collapses when there is less than 80px for each step (eg below 400px for five steps). Its
  pixata-blazor-stepper-count-* class says how many steps it has (8 meaning 8 or more), as a container query can't count them
*/
@container pixata-blazor-stepper (max-width: 159.98px) {
  .pixata-blazor-stepper-count-2 > :is(.pixata-blazor-stepper-list, .pixata-blazor-stepper-progress) {
    display: none;
  }

  .pixata-blazor-stepper-count-2 > .pixata-blazor-stepper-compact {
    display: flex;
  }
}

@container pixata-blazor-stepper (max-width: 239.98px) {
  .pixata-blazor-stepper-count-3 > :is(.pixata-blazor-stepper-list, .pixata-blazor-stepper-progress) {
    display: none;
  }

  .pixata-blazor-stepper-count-3 > .pixata-blazor-stepper-compact {
    display: flex;
  }
}

@container pixata-blazor-stepper (max-width: 319.98px) {
  .pixata-blazor-stepper-count-4 > :is(.pixata-blazor-stepper-list, .pixata-blazor-stepper-progress) {
    display: none;
  }

  .pixata-blazor-stepper-count-4 > .pixata-blazor-stepper-compact {
    display: flex;
  }
}

@container pixata-blazor-stepper (max-width: 399.98px) {
  .pixata-blazor-stepper-count-5 > :is(.pixata-blazor-stepper-list, .pixata-blazor-stepper-progress) {
    display: none;
  }

  .pixata-blazor-stepper-count-5 > .pixata-blazor-stepper-compact {
    display: flex;
  }
}

@container pixata-blazor-stepper (max-width: 479.98px) {
  .pixata-blazor-stepper-count-6 > :is(.pixata-blazor-stepper-list, .pixata-blazor-stepper-progress) {
    display: none;
  }

  .pixata-blazor-stepper-count-6 > .pixata-blazor-stepper-compact {
    display: flex;
  }
}

@container pixata-blazor-stepper (max-width: 559.98px) {
  .pixata-blazor-stepper-count-7 > :is(.pixata-blazor-stepper-list, .pixata-blazor-stepper-progress) {
    display: none;
  }

  .pixata-blazor-stepper-count-7 > .pixata-blazor-stepper-compact {
    display: flex;
  }
}

@container pixata-blazor-stepper (max-width: 639.98px) {
  .pixata-blazor-stepper-count-8 > :is(.pixata-blazor-stepper-list, .pixata-blazor-stepper-progress) {
    display: none;
  }

  .pixata-blazor-stepper-count-8 > .pixata-blazor-stepper-compact {
    display: flex;
  }
}

/* ---------- Wizard ---------- */

/* The wizard is a size container, so it can rearrange itself when it is narrow (see the container query below) */
.pixata-blazor-wizard {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 100%;
  padding: var(--pixata-blazor-wizard-padding);
  overflow: hidden;
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  color: var(--pixata-blazor-text-color);
  container: pixata-blazor-wizard / inline-size;
}

.pixata-blazor-wizard-layout {
  display: flex;
  gap: var(--pixata-blazor-wizard-gap);
  height: 100%;
  min-height: 0;
}

.pixata-blazor-wizard-top > .pixata-blazor-wizard-layout {
  flex-direction: column;
}

.pixata-blazor-wizard-bottom > .pixata-blazor-wizard-layout {
  flex-direction: column-reverse;
}

.pixata-blazor-wizard-left > .pixata-blazor-wizard-layout {
  flex-direction: row;
}

.pixata-blazor-wizard-right > .pixata-blazor-wizard-layout {
  flex-direction: row-reverse;
}

.pixata-blazor-wizard-stepper {
  flex: none;
}

.pixata-blazor-wizard-vertical .pixata-blazor-wizard-stepper {
  align-self: stretch;
  height: auto;
}

/* The wizard has its own buttons, so the collapsed stepper doesn't need any */
.pixata-blazor-wizard-stepper .pixata-blazor-stepper-compact-button {
  display: none;
}

.pixata-blazor-wizard-steps {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.pixata-blazor-wizard-step {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 0;
  padding: calc(var(--pixata-blazor-spacing) * 2 + 2px);
  outline: 0;
}

.pixata-blazor-wizard-step:focus-visible {
  outline: 1px dotted var(--pixata-blazor-subtle-color);
  outline-offset: -1px;
}

.pixata-blazor-wizard-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.pixata-blazor-wizard-form {
  margin: 0;
}

.pixata-blazor-wizard-buttons {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  margin-top: var(--pixata-blazor-wizard-gap);
}

.pixata-blazor-wizard-buttons-end {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--pixata-blazor-spacing) * 2.5);
  margin-inline-start: auto;
}

/*
  A narrow wizard (eg on a phone) puts a stepper that would have been at the side above the step, collapsed. A stepper at the
  top or bottom collapses when it is too narrow for its steps, like any other
*/
@container pixata-blazor-wizard (max-width: 360px) {
  .pixata-blazor-wizard-left > .pixata-blazor-wizard-layout,
  .pixata-blazor-wizard-right > .pixata-blazor-wizard-layout {
    flex-direction: column;
  }

  .pixata-blazor-wizard-vertical .pixata-blazor-wizard-stepper.pixata-blazor-stepper-collapsible > :is(.pixata-blazor-stepper-list, .pixata-blazor-stepper-progress) {
    display: none;
  }

  .pixata-blazor-wizard-vertical .pixata-blazor-wizard-stepper.pixata-blazor-stepper-collapsible > .pixata-blazor-stepper-compact {
    display: flex;
  }
}

/* Touch screens get bigger targets */
@media (pointer: coarse) {
  .pixata-blazor-stepper-step-link {
    min-width: var(--pixata-blazor-touch-target);
    min-height: var(--pixata-blazor-touch-target);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-stepper-step-indicator,
  .pixata-blazor-stepper-step-label,
  .pixata-blazor-stepper-progress-value,
  .pixata-blazor-stepper-compact-progress-value {
    transition: none;
  }
}

/* ========== end of PixataWizard and PixataStepper ========== */

/* ========== PixataRadioGroup ========== */

/*
  pixata-blazor-radiogroup is the list, plus -vertical or -horizontal, and pixata-blazor-disabled or pixata-blazor-invalid
  when they apply. Each pixata-blazor-radiogroup-item holds a native radio button (pixata-blazor-radiogroup-radio, plus -sm,
  -md or -lg) and its pixata-blazor-radiogroup-label; the checked item also has pixata-blazor-radiogroup-item-checked
*/
:root {
  --pixata-blazor-radiogroup-radio-size-sm: 12px;
  --pixata-blazor-radiogroup-radio-size-md: 16px;
  --pixata-blazor-radiogroup-radio-size-lg: 20px;
  --pixata-blazor-radiogroup-radio-bg: #fff;
  --pixata-blazor-radiogroup-radio-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-radiogroup-checked-bg: var(--pixata-blazor-primary);
  --pixata-blazor-radiogroup-checked-border-color: var(--pixata-blazor-primary);
  --pixata-blazor-radiogroup-dot-color: var(--pixata-blazor-primary-color);
  --pixata-blazor-radiogroup-dot-size: 57%;
  --pixata-blazor-radiogroup-focus-shadow: 0 0 0 2px var(--pixata-blazor-border-color);
  --pixata-blazor-radiogroup-checked-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--pixata-blazor-primary) 30%, transparent);
  --pixata-blazor-radiogroup-item-gap: var(--pixata-blazor-spacing);
  --pixata-blazor-radiogroup-item-padding: var(--pixata-blazor-spacing) 0;
  --pixata-blazor-radiogroup-horizontal-gap: calc(var(--pixata-blazor-spacing) * 4);
}

.pixata-blazor-radiogroup {
  display: flex;
  flex-flow: column nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pixata-blazor-radiogroup-horizontal {
  flex-flow: row wrap;
  column-gap: var(--pixata-blazor-radiogroup-horizontal-gap);
}

.pixata-blazor-radiogroup-item {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: var(--pixata-blazor-radiogroup-item-gap);
  margin: 0;
  padding: var(--pixata-blazor-radiogroup-item-padding);
}

/* The native radio button, drawn by us */
.pixata-blazor-radiogroup-radio {
  --pixata-blazor-radiogroup-radio-size: var(--pixata-blazor-radiogroup-radio-size-md);
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--pixata-blazor-radiogroup-radio-size);
  height: var(--pixata-blazor-radiogroup-radio-size);
  margin: 0;
  padding: 0;
  border: 1px solid var(--pixata-blazor-radiogroup-radio-border-color);
  border-radius: 50%;
  outline: 0;
  background-color: var(--pixata-blazor-radiogroup-radio-bg);
  background-repeat: no-repeat;
  vertical-align: middle;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color var(--pixata-blazor-transition), border-color var(--pixata-blazor-transition), box-shadow var(--pixata-blazor-transition);
}

.pixata-blazor-radiogroup-radio-sm {
  --pixata-blazor-radiogroup-radio-size: var(--pixata-blazor-radiogroup-radio-size-sm);
}

.pixata-blazor-radiogroup-radio-lg {
  --pixata-blazor-radiogroup-radio-size: var(--pixata-blazor-radiogroup-radio-size-lg);
}

.pixata-blazor-radiogroup-radio:focus-visible {
  box-shadow: var(--pixata-blazor-radiogroup-focus-shadow);
}

.pixata-blazor-radiogroup-radio:checked {
  border-color: var(--pixata-blazor-radiogroup-checked-border-color);
  background-color: var(--pixata-blazor-radiogroup-checked-bg);
  background-image: radial-gradient(circle closest-side, var(--pixata-blazor-radiogroup-dot-color) 0 var(--pixata-blazor-radiogroup-dot-size), transparent calc(var(--pixata-blazor-radiogroup-dot-size) + 1px));
}

.pixata-blazor-radiogroup-radio:checked:focus-visible {
  box-shadow: var(--pixata-blazor-radiogroup-checked-focus-shadow);
}

.pixata-blazor-radiogroup-radio:disabled {
  cursor: default;
}

.pixata-blazor-radiogroup-label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--pixata-blazor-spacing);
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.pixata-blazor-radiogroup-label:empty {
  display: none;
}

.pixata-blazor-radiogroup.pixata-blazor-invalid .pixata-blazor-radiogroup-radio {
  border-color: var(--pixata-blazor-error);
}

/* On a touch screen, each option is at least --pixata-blazor-touch-target high, and its label fills that height */
@media (pointer: coarse) {
  .pixata-blazor-radiogroup-item {
    min-height: var(--pixata-blazor-touch-target);
    padding-block: 0;
  }

  .pixata-blazor-radiogroup-label {
    align-self: stretch;
    align-items: center;
    flex: 1 1 auto;
  }

  .pixata-blazor-radiogroup-horizontal .pixata-blazor-radiogroup-label {
    flex: 0 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-radiogroup-radio {
    transition: none;
  }
}

/* ========== end of PixataRadioGroup ========== */

/* ========== PixataSwitch ========== */

/*
  pixata-blazor-switch is the button, plus a size (-sm, -md, -lg), -on or -off, and -readonly when it can't be changed. Inside
  it are the track (pixata-blazor-switch-track, holding the -label-on and -label-off text) and the thumb
  (pixata-blazor-switch-thumb, inside pixata-blazor-switch-thumb-wrap). The Width parameter sets --pixata-blazor-switch-width
*/
:root {
  --pixata-blazor-switch-width-sm: 52px;
  --pixata-blazor-switch-height-sm: 26px;
  --pixata-blazor-switch-label-inset-sm: 4px;
  --pixata-blazor-switch-width-md: 60px;
  --pixata-blazor-switch-height-md: 30px;
  --pixata-blazor-switch-label-inset-md: 6px;
  --pixata-blazor-switch-width-lg: 68px;
  --pixata-blazor-switch-height-lg: 34px;
  --pixata-blazor-switch-label-inset-lg: 8px;
  --pixata-blazor-switch-label-font-size: 10px;
  --pixata-blazor-switch-off-track-bg: #fff;
  --pixata-blazor-switch-off-track-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-switch-off-color: var(--pixata-blazor-text-color);
  --pixata-blazor-switch-on-track-bg: var(--pixata-blazor-primary);
  --pixata-blazor-switch-on-track-border-color: var(--pixata-blazor-primary);
  --pixata-blazor-switch-on-color: var(--pixata-blazor-primary-color);
  --pixata-blazor-switch-thumb-bg: var(--pixata-blazor-surface-alt-bg);
  --pixata-blazor-switch-thumb-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-switch-off-focus-outline: 2px solid color-mix(in srgb, var(--pixata-blazor-text-color) 8%, transparent);
  --pixata-blazor-switch-on-focus-outline: 2px solid color-mix(in srgb, var(--pixata-blazor-primary) 25%, transparent);
  --pixata-blazor-switch-on-transition: .3s cubic-bezier(.68, -.55, .265, 1.55);
  --pixata-blazor-switch-off-transition: .25s cubic-bezier(0, 0, .58, 1);
}

.pixata-blazor-switch {
  --pixata-blazor-switch-width: var(--pixata-blazor-switch-width-md);
  --pixata-blazor-switch-height: var(--pixata-blazor-switch-height-md);
  --pixata-blazor-switch-label-inset: var(--pixata-blazor-switch-label-inset-md);
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  width: var(--pixata-blazor-switch-width);
  height: var(--pixata-blazor-switch-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-switch-label-font-size);
  line-height: 1;
  vertical-align: middle;
  outline: 0;
  cursor: pointer;
  user-select: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* Lets a sideways swipe reach the switch, rather than being taken as a scroll */
  touch-action: pan-y;
}

/* The sizes only set the custom properties, so the Width parameter (an inline --pixata-blazor-switch-width) wins */
.pixata-blazor-switch-sm {
  --pixata-blazor-switch-width: var(--pixata-blazor-switch-width-sm);
  --pixata-blazor-switch-height: var(--pixata-blazor-switch-height-sm);
  --pixata-blazor-switch-label-inset: var(--pixata-blazor-switch-label-inset-sm);
}

.pixata-blazor-switch-lg {
  --pixata-blazor-switch-width: var(--pixata-blazor-switch-width-lg);
  --pixata-blazor-switch-height: var(--pixata-blazor-switch-height-lg);
  --pixata-blazor-switch-label-inset: var(--pixata-blazor-switch-label-inset-lg);
}

.pixata-blazor-switch-readonly {
  cursor: default;
}

.pixata-blazor-switch-track {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex: 1 0 auto;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  outline: 0;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}

.pixata-blazor-switch-label-on,
.pixata-blazor-switch-label-off {
  position: absolute;
  top: 50%;
  display: inline;
  overflow: hidden;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
  transition: color var(--pixata-blazor-switch-off-transition);
}

.pixata-blazor-switch-label-on {
  inset-inline-start: var(--pixata-blazor-switch-label-inset);
}

.pixata-blazor-switch-label-off {
  inset-inline-end: var(--pixata-blazor-switch-label-inset);
}

/* A zero-size box whose centre the thumb sits on, which slides from one end of the track to the other */
.pixata-blazor-switch-thumb-wrap {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  overflow: visible;
  inset-inline-start: calc(var(--pixata-blazor-switch-height) / 2);
  transition: left var(--pixata-blazor-switch-off-transition), right var(--pixata-blazor-switch-off-transition);
}

.pixata-blazor-switch-on .pixata-blazor-switch-thumb-wrap {
  inset-inline-start: calc(100% - var(--pixata-blazor-switch-height) / 2);
  transition: left var(--pixata-blazor-switch-on-transition), right var(--pixata-blazor-switch-on-transition);
}

.pixata-blazor-switch-thumb {
  box-sizing: border-box;
  position: absolute;
  display: block;
  width: var(--pixata-blazor-switch-height);
  height: var(--pixata-blazor-switch-height);
  border-width: 1px;
  border-style: solid;
  border-color: var(--pixata-blazor-switch-thumb-border-color);
  background-color: var(--pixata-blazor-switch-thumb-bg);
  transform: translate(-50%, -50%);
  transition: background-color .15s ease-out, border-color .15s ease-out;
}

.pixata-blazor-switch:dir(rtl) .pixata-blazor-switch-thumb {
  transform: translate(50%, -50%);
}

.pixata-blazor-switch-off .pixata-blazor-switch-track {
  border-color: var(--pixata-blazor-switch-off-track-border-color);
  background-color: var(--pixata-blazor-switch-off-track-bg);
  color: var(--pixata-blazor-switch-off-color);
}

.pixata-blazor-switch-off .pixata-blazor-switch-label-on,
.pixata-blazor-switch-on .pixata-blazor-switch-label-off {
  color: transparent;
}

.pixata-blazor-switch-on .pixata-blazor-switch-track {
  border-color: var(--pixata-blazor-switch-on-track-border-color);
  background-color: var(--pixata-blazor-switch-on-track-bg);
  color: var(--pixata-blazor-switch-on-color);
}

.pixata-blazor-switch-off:focus-visible .pixata-blazor-switch-track {
  outline: var(--pixata-blazor-switch-off-focus-outline);
}

.pixata-blazor-switch-on:focus-visible .pixata-blazor-switch-track {
  outline: var(--pixata-blazor-switch-on-focus-outline);
}

.pixata-blazor-switch.pixata-blazor-invalid .pixata-blazor-switch-track {
  border-color: var(--pixata-blazor-error);
}

/* On a touch screen, the area you can tap is at least --pixata-blazor-touch-target high */
@media (pointer: coarse) {
  .pixata-blazor-switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: max(100%, var(--pixata-blazor-touch-target));
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-switch-track,
  .pixata-blazor-switch-label-on,
  .pixata-blazor-switch-label-off,
  .pixata-blazor-switch-thumb-wrap,
  .pixata-blazor-switch-on .pixata-blazor-switch-thumb-wrap,
  .pixata-blazor-switch-thumb {
    transition: none;
  }
}

/* ========== end of PixataSwitch ========== */

/* ========== PixataChart ========== */

/*
  PixataChart is SVG drawn by the component, with the title, legend and tooltip as HTML. The series colours, text sizes and
  line colours below can all be overridden. The point colour of each column, line, marker, segment and legend marker is
  passed to it in the --pixata-blazor-chart-point-color property
*/
:root {
  --pixata-blazor-chart-series-1: #ff6358;
  --pixata-blazor-chart-series-2: #ffd246;
  --pixata-blazor-chart-series-3: #78d237;
  --pixata-blazor-chart-series-4: #28b4c8;
  --pixata-blazor-chart-series-5: #2d73f5;
  --pixata-blazor-chart-series-6: #aa46be;
  --pixata-blazor-chart-height: 400px;
  --pixata-blazor-chart-bg: transparent;
  --pixata-blazor-chart-text-color: var(--pixata-blazor-text-color);
  --pixata-blazor-chart-font-size: var(--pixata-blazor-font-size);
  --pixata-blazor-chart-title-font-size: 1rem;
  --pixata-blazor-chart-axis-title-font-size: .875rem;
  --pixata-blazor-chart-label-font-size: .75rem;
  --pixata-blazor-chart-major-lines: rgba(61, 61, 61, .08);
  --pixata-blazor-chart-minor-lines: rgba(61, 61, 61, .04);
  --pixata-blazor-chart-axis-color: rgba(61, 61, 61, .12);
  --pixata-blazor-chart-inactive: rgba(61, 61, 61, .5);
  --pixata-blazor-chart-column-border: 20%;
  --pixata-blazor-chart-marker-bg: var(--pixata-blazor-surface-bg);
  --pixata-blazor-chart-hover-opacity: .75;
  --pixata-blazor-chart-label-halo: rgba(255, 255, 255, .85);
  --pixata-blazor-chart-connector-color: rgba(61, 61, 61, .5);
  --pixata-blazor-chart-focus-color: var(--pixata-blazor-text-color);
  --pixata-blazor-chart-legend-marker-size: .875rem;
  --pixata-blazor-chart-tooltip-color: #fff;
  --pixata-blazor-chart-tooltip-dark-color: var(--pixata-blazor-text-color);
  --pixata-blazor-chart-tooltip-font-size: .8125rem;
  --pixata-blazor-chart-shared-tooltip-bg: var(--pixata-blazor-base-bg);
  --pixata-blazor-chart-tooltip-z-index: 3;
  --pixata-blazor-chart-transition: .5s ease-out;
}

.pixata-blazor-chart {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: var(--pixata-blazor-chart-height);
  min-width: 0;
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-chart-font-size);
  line-height: var(--pixata-blazor-line-height);
  color: var(--pixata-blazor-chart-text-color);
  background: var(--pixata-blazor-chart-bg);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.pixata-blazor-chart-title {
  flex: none;
  padding: calc(var(--pixata-blazor-spacing) * 1.25);
  font-size: var(--pixata-blazor-chart-title-font-size);
  text-align: center;
  overflow-wrap: anywhere;
}

.pixata-blazor-chart-title-align-left {
  text-align: start;
}

.pixata-blazor-chart-title-align-right {
  text-align: end;
}

.pixata-blazor-chart-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  min-width: 0;
  min-height: 0;
}

.pixata-blazor-chart-body-legend-top,
.pixata-blazor-chart-body-legend-bottom {
  flex-direction: column;
}

.pixata-blazor-chart-plot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.pixata-blazor-chart-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: inherit;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.pixata-blazor-chart-surface:focus-visible {
  outline: 1px dotted var(--pixata-blazor-chart-focus-color);
  outline-offset: -1px;
}

.pixata-blazor-chart-background,
.pixata-blazor-chart-band {
  fill: transparent;
}

.pixata-blazor-chart-gridline {
  stroke: var(--pixata-blazor-chart-major-lines);
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.pixata-blazor-chart-gridline-minor {
  stroke: var(--pixata-blazor-chart-minor-lines);
}

.pixata-blazor-chart-axis-line {
  stroke: var(--pixata-blazor-chart-axis-color);
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.pixata-blazor-chart-axis-label,
.pixata-blazor-chart-axis-title,
.pixata-blazor-chart-label {
  fill: var(--pixata-blazor-chart-text-color);
}

.pixata-blazor-chart-axis-label {
  font-size: var(--pixata-blazor-chart-label-font-size);
}

.pixata-blazor-chart-axis-title {
  font-size: var(--pixata-blazor-chart-axis-title-font-size);
}

.pixata-blazor-chart-label {
  font-size: var(--pixata-blazor-chart-label-font-size);
  paint-order: stroke;
  stroke: var(--pixata-blazor-chart-label-halo);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.pixata-blazor-chart-labels {
  pointer-events: none;
}

.pixata-blazor-chart-label-connector {
  fill: none;
  stroke: var(--pixata-blazor-chart-connector-color);
  stroke-width: 1px;
}

.pixata-blazor-chart-column,
.pixata-blazor-chart-segment,
.pixata-blazor-chart-marker {
  cursor: pointer;
  transition: opacity var(--pixata-blazor-transition);
}

.pixata-blazor-chart-column {
  fill: var(--pixata-blazor-chart-point-color);
  stroke: color-mix(in srgb, var(--pixata-blazor-chart-point-color), #000 var(--pixata-blazor-chart-column-border));
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.pixata-blazor-chart-segment {
  fill: var(--pixata-blazor-chart-point-color);
}

.pixata-blazor-chart-line {
  fill: none;
  stroke: var(--pixata-blazor-chart-point-color);
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

.pixata-blazor-chart-marker-target {
  fill: transparent;
}

.pixata-blazor-chart-marker-shape {
  fill: var(--pixata-blazor-chart-marker-bg);
  stroke: var(--pixata-blazor-chart-point-color);
  stroke-width: 2px;
}

.pixata-blazor-chart-marker-cross {
  fill: none;
}

.pixata-blazor-chart-marker-hidden .pixata-blazor-chart-marker-shape {
  visibility: hidden;
}

.pixata-blazor-chart-column.pixata-blazor-chart-point-active,
.pixata-blazor-chart-segment.pixata-blazor-chart-point-active {
  opacity: var(--pixata-blazor-chart-hover-opacity);
}

.pixata-blazor-chart-marker.pixata-blazor-chart-point-active .pixata-blazor-chart-marker-shape {
  visibility: visible;
  stroke-width: 3px;
}

/* The keyboard focus */
.pixata-blazor-chart-column.pixata-blazor-chart-point-focused,
.pixata-blazor-chart-segment.pixata-blazor-chart-point-focused {
  stroke: var(--pixata-blazor-chart-focus-color);
  stroke-width: 2px;
}

.pixata-blazor-chart-marker.pixata-blazor-chart-point-focused .pixata-blazor-chart-marker-target {
  stroke: var(--pixata-blazor-chart-focus-color);
  stroke-width: 2px;
  r: 8px;
}

/* Legend */

.pixata-blazor-chart-legend {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pixata-blazor-spacing) * .5) calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 1.25);
}

.pixata-blazor-chart-legend-vertical {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  overflow-y: auto;
}

.pixata-blazor-chart-legend-top,
.pixata-blazor-chart-legend-left {
  order: -1;
}

.pixata-blazor-chart-legend-align-start {
  justify-content: flex-start;
}

.pixata-blazor-chart-legend-align-end {
  justify-content: flex-end;
}

.pixata-blazor-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 1.5);
  margin: 0;
  padding: calc(var(--pixata-blazor-spacing) * .25) calc(var(--pixata-blazor-spacing) * .5);
  border: 0;
  border-radius: var(--pixata-blazor-border-radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  user-select: none;
}

.pixata-blazor-chart-legend-item:focus-visible {
  outline: none;
  box-shadow: var(--pixata-blazor-focus-ring);
}

.pixata-blazor-chart-legend-item-hidden {
  color: var(--pixata-blazor-chart-inactive);
}

.pixata-blazor-chart-legend-item-hidden .pixata-blazor-chart-legend-marker {
  --pixata-blazor-chart-point-color: var(--pixata-blazor-chart-inactive) !important;
}

.pixata-blazor-chart-legend-marker {
  display: inline-block;
  flex: none;
  width: var(--pixata-blazor-chart-legend-marker-size);
  height: var(--pixata-blazor-chart-legend-marker-size);
}

.pixata-blazor-chart-legend-marker-column {
  background: var(--pixata-blazor-chart-point-color);
}

.pixata-blazor-chart-legend-marker-line {
  width: calc(var(--pixata-blazor-chart-legend-marker-size) * 1.25);
}

.pixata-blazor-chart-legend-marker-line svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pixata-blazor-chart-legend-marker-line path {
  fill: none;
  stroke: var(--pixata-blazor-chart-point-color);
  stroke-width: 2px;
}

.pixata-blazor-chart-legend-marker-line circle {
  fill: var(--pixata-blazor-chart-marker-bg);
  stroke: var(--pixata-blazor-chart-point-color);
  stroke-width: 2px;
}

/* Tooltip. It is placed by its point, and these classes move it above, below or to the side */

.pixata-blazor-chart-tooltip {
  position: absolute;
  z-index: var(--pixata-blazor-chart-tooltip-z-index);
  box-sizing: border-box;
  max-width: min(18rem, 90vw);
  padding: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
  border-radius: var(--pixata-blazor-border-radius);
  background: var(--pixata-blazor-chart-tooltip-bg, var(--pixata-blazor-text-color));
  color: var(--pixata-blazor-chart-tooltip-color);
  font-size: var(--pixata-blazor-chart-tooltip-font-size);
  line-height: var(--pixata-blazor-line-height);
  white-space: nowrap;
  pointer-events: none;
  transform: translate(var(--pixata-blazor-chart-tooltip-x, -50%), var(--pixata-blazor-chart-tooltip-y, calc(-100% - 8px)));
}

.pixata-blazor-chart-tooltip-below {
  --pixata-blazor-chart-tooltip-y: 12px;
}

.pixata-blazor-chart-tooltip-start {
  --pixata-blazor-chart-tooltip-x: -12px;
}

.pixata-blazor-chart-tooltip-end {
  --pixata-blazor-chart-tooltip-x: calc(-100% + 12px);
}

.pixata-blazor-chart-tooltip-after {
  --pixata-blazor-chart-tooltip-x: 0;
  --pixata-blazor-chart-tooltip-y: -50%;
}

.pixata-blazor-chart-tooltip-before {
  --pixata-blazor-chart-tooltip-x: -100%;
  --pixata-blazor-chart-tooltip-y: -50%;
}

.pixata-blazor-chart-tooltip-shared {
  border: 1px solid var(--pixata-blazor-border-color);
  background: var(--pixata-blazor-chart-shared-tooltip-bg);
  color: var(--pixata-blazor-chart-text-color);
}

.pixata-blazor-chart-tooltip-category {
  font-weight: 600;
  text-align: center;
}

.pixata-blazor-chart-tooltip table {
  border-collapse: collapse;
  border-spacing: 0;
}

.pixata-blazor-chart-tooltip td {
  padding: calc(var(--pixata-blazor-spacing) * .5) var(--pixata-blazor-spacing);
  vertical-align: middle;
}

.pixata-blazor-chart-tooltip-marker {
  display: block;
  width: 15px;
  height: 3px;
  background: var(--pixata-blazor-chart-point-color);
}

/* The columns grow and everything else fades in when the chart first appears */
@keyframes pixata-blazor-chart-grow {
  from {
    transform: scaleY(0);
  }
}

@keyframes pixata-blazor-chart-fade {
  from {
    opacity: 0;
  }
}

.pixata-blazor-chart-animate .pixata-blazor-chart-column {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pixata-blazor-chart-grow var(--pixata-blazor-chart-transition);
}

.pixata-blazor-chart-animate .pixata-blazor-chart-column-negative {
  transform-origin: 50% 0;
}

.pixata-blazor-chart-animate .pixata-blazor-chart-line,
.pixata-blazor-chart-animate .pixata-blazor-chart-marker,
.pixata-blazor-chart-animate .pixata-blazor-chart-segment,
.pixata-blazor-chart-animate .pixata-blazor-chart-labels {
  animation: pixata-blazor-chart-fade var(--pixata-blazor-chart-transition);
}

/* Until the browser has reported the chart's size, a phone-sized screen moves a side legend underneath */
@media (max-width: 400px) {
  .pixata-blazor-chart-body-legend-left,
  .pixata-blazor-chart-body-legend-right {
    flex-direction: column;
  }

  .pixata-blazor-chart-legend-left {
    order: 0;
  }

  .pixata-blazor-chart-legend-vertical {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (pointer: coarse) {
  .pixata-blazor-chart-legend-item {
    min-height: var(--pixata-blazor-touch-target);
  }

  .pixata-blazor-chart-marker-target {
    r: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-chart-animate .pixata-blazor-chart-column,
  .pixata-blazor-chart-animate .pixata-blazor-chart-line,
  .pixata-blazor-chart-animate .pixata-blazor-chart-marker,
  .pixata-blazor-chart-animate .pixata-blazor-chart-segment,
  .pixata-blazor-chart-animate .pixata-blazor-chart-labels {
    animation: none;
  }

  .pixata-blazor-chart-column,
  .pixata-blazor-chart-segment,
  .pixata-blazor-chart-marker {
    transition: none;
  }
}

/* ========== end of PixataChart ========== */

/* ========== PixataDropDownButton and PixataSplitButton ========== */

/*
  The buttons use the shared pixata-blazor-button classes. pixata-blazor-dropdownbutton and pixata-blazor-splitbutton are
  their outer elements (with -open while the menu is showing). The menu is a pixata-blazor-popup with
  pixata-blazor-button-menu-popup, holding a pixata-blazor-button-menu list (plus -sm, -md or -lg, matching the button) of
  pixata-blazor-button-menu-item items
*/
:root {
  --pixata-blazor-button-menu-max-height: 80vh;
  --pixata-blazor-button-menu-bg: var(--pixata-blazor-popup-bg);
  --pixata-blazor-button-menu-color: var(--pixata-blazor-text-color);
  --pixata-blazor-button-menu-item-padding-sm: calc(var(--pixata-blazor-spacing) * .5) calc(var(--pixata-blazor-spacing) * 2);
  --pixata-blazor-button-menu-item-padding-md: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
  --pixata-blazor-button-menu-item-padding-lg: calc(var(--pixata-blazor-spacing) * 1.5) calc(var(--pixata-blazor-spacing) * 2);
  --pixata-blazor-button-menu-item-end-padding: calc(var(--pixata-blazor-spacing) * 4 + 1rem);
  --pixata-blazor-button-menu-item-hover-bg: color-mix(in srgb, var(--pixata-blazor-text-color) 8%, transparent);
  --pixata-blazor-button-menu-item-active-bg: color-mix(in srgb, var(--pixata-blazor-text-color) 12%, transparent);
  --pixata-blazor-button-menu-item-focus-ring: inset 0 0 0 2px var(--pixata-blazor-border-alt-color);
  --pixata-blazor-splitbutton-arrow-touch-width: 2.75rem;
}

.pixata-blazor-dropdownbutton,
.pixata-blazor-splitbutton {
  position: relative;
  display: inline-flex;
  flex-flow: row nowrap;
  vertical-align: middle;
}

/* The down arrow a drop-down button shows when ShowArrowButton is set */
.pixata-blazor-dropdownbutton-arrow {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-inline-start: calc(var(--pixata-blazor-spacing) * -1);
  margin-inline-end: calc(var(--pixata-blazor-spacing) * -2);
  padding-inline: var(--pixata-blazor-spacing);
}

/* The two halves of a split button share a border, and only the outer corners are rounded */
.pixata-blazor-splitbutton-main {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.pixata-blazor-splitbutton-arrow {
  margin-inline-start: -1px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.pixata-blazor-splitbutton-main:focus-visible,
.pixata-blazor-splitbutton-arrow:focus-visible {
  z-index: 1;
}

/* The arrow is narrower than other icon-only buttons, but as tall as the main button */
.pixata-blazor-splitbutton-arrow .pixata-blazor-icon {
  width: 1rem;
  padding-inline: 0;
}

/* The menu */
.pixata-blazor-button-menu-popup {
  background-color: var(--pixata-blazor-button-menu-bg);
  color: var(--pixata-blazor-button-menu-color);
}

.pixata-blazor-button-menu.pixata-blazor-popup-content {
  max-height: var(--pixata-blazor-popup-max-height, var(--pixata-blazor-button-menu-max-height));
}

.pixata-blazor-button-menu {
  display: flex;
  flex-flow: column nowrap;
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
}

.pixata-blazor-button-menu-lg {
  font-size: var(--pixata-blazor-font-size-lg);
}

.pixata-blazor-button-menu-item {
  padding: var(--pixata-blazor-button-menu-item-padding-md);
  padding-inline-end: var(--pixata-blazor-button-menu-item-end-padding);
  outline: 0;
}

.pixata-blazor-button-menu-sm .pixata-blazor-button-menu-item {
  padding: var(--pixata-blazor-button-menu-item-padding-sm);
  padding-inline-end: var(--pixata-blazor-button-menu-item-end-padding);
}

.pixata-blazor-button-menu-lg .pixata-blazor-button-menu-item {
  padding: var(--pixata-blazor-button-menu-item-padding-lg);
  padding-inline-end: var(--pixata-blazor-button-menu-item-end-padding);
}

.pixata-blazor-button-menu-item:hover {
  background-color: var(--pixata-blazor-button-menu-item-hover-bg);
}

.pixata-blazor-button-menu-item:active {
  background-color: var(--pixata-blazor-button-menu-item-active-bg);
}

.pixata-blazor-button-menu-item:focus-visible {
  box-shadow: var(--pixata-blazor-button-menu-item-focus-ring);
}

.pixata-blazor-button-menu-item-text {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Touch screens get a wider arrow on split buttons (the buttons and menu items are already enlarged by the shared styles) */
@media (pointer: coarse) {
  .pixata-blazor-splitbutton-arrow {
    min-width: var(--pixata-blazor-splitbutton-arrow-touch-width);
  }
}

/* ========== end of PixataDropDownButton and PixataSplitButton ========== */

/* ========== PixataScheduler ========== */

:root {
  --pixata-blazor-scheduler-bg: var(--pixata-blazor-surface-bg);
  --pixata-blazor-scheduler-border-color: var(--pixata-blazor-border-color);
  --pixata-blazor-scheduler-head-bg: var(--pixata-blazor-surface-bg);
  --pixata-blazor-scheduler-nonwork-bg: var(--pixata-blazor-base-bg);
  --pixata-blazor-scheduler-selected-slot-bg: color-mix(in srgb, var(--pixata-blazor-primary) 12%, transparent);
  --pixata-blazor-scheduler-today-color: var(--pixata-blazor-primary);
  --pixata-blazor-scheduler-event-bg: var(--pixata-blazor-primary);
  --pixata-blazor-scheduler-event-color: var(--pixata-blazor-primary-color);
  --pixata-blazor-scheduler-event-selected-overlay: rgba(0, 0, 0, .14);
  --pixata-blazor-scheduler-slot-height: 2.375rem;
  --pixata-blazor-scheduler-side-width: 4.5rem;
  --pixata-blazor-scheduler-column-min-width: 3.5rem;
  --pixata-blazor-scheduler-event-gutter: .875rem;
  --pixata-blazor-scheduler-bar-height: 1.5rem;
  --pixata-blazor-scheduler-bar-gap: 2px;
  --pixata-blazor-scheduler-month-day-height: 6rem;
  --pixata-blazor-scheduler-month-date-height: 1.75rem;
  --pixata-blazor-scheduler-month-column-min-width: 2.75rem;
  --pixata-blazor-scheduler-timeline-column-width: 6.25rem;
  --pixata-blazor-scheduler-timeline-lane-height: 4.5rem;
  --pixata-blazor-scheduler-dialog-width: 40rem;
}

.pixata-blazor-scheduler {
  --pixata-blazor-scheduler-bar-pitch: calc(var(--pixata-blazor-scheduler-bar-height) + var(--pixata-blazor-scheduler-bar-gap));
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--pixata-blazor-scheduler-border-color);
  background-color: var(--pixata-blazor-scheduler-bg);
  color: var(--pixata-blazor-text-color);
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  -webkit-tap-highlight-color: transparent;
}

.pixata-blazor-scheduler *,
.pixata-blazor-scheduler *::before,
.pixata-blazor-scheduler *::after {
  box-sizing: border-box;
}

/* ---------- Toolbar and footer ---------- */

.pixata-blazor-scheduler-toolbar {
  container: pixata-blazor-scheduler-toolbar / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  flex-shrink: 0;
  padding: calc(var(--pixata-blazor-spacing) * 2);
  border-bottom: 1px solid var(--pixata-blazor-scheduler-border-color);
}

.pixata-blazor-scheduler-navigation,
.pixata-blazor-scheduler-calendar-tool,
.pixata-blazor-scheduler-views,
.pixata-blazor-scheduler-custom-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.pixata-blazor-scheduler-toolbar-spacer {
  flex: 1 1 0;
}

.pixata-blazor-scheduler-navigation .pixata-blazor-icon:dir(rtl),
.pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-event-continues .pixata-blazor-icon:dir(rtl) {
  transform: scaleX(-1);
}

.pixata-blazor-scheduler-calendar-popup-content {
  display: flex;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-scheduler-calendar-popup-content .pixata-blazor-input {
  width: auto;
}

/* The view switcher: a pill of buttons, or a drop-down list when the toolbar is narrow */
.pixata-blazor-scheduler-views-buttons,
.pixata-blazor-scheduler-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--pixata-blazor-base-bg), currentColor 6%);
}

.pixata-blazor-scheduler-view-button,
.pixata-blazor-scheduler-segmented-button {
  margin: 0;
  padding: 3px calc(var(--pixata-blazor-spacing) * 3);
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.pixata-blazor-scheduler-view-button:hover,
.pixata-blazor-scheduler-segmented-button:hover {
  background-color: color-mix(in srgb, var(--pixata-blazor-surface-bg) 50%, transparent);
}

.pixata-blazor-scheduler-view-button.pixata-blazor-selected,
.pixata-blazor-scheduler-segmented-button.pixata-blazor-selected {
  background-color: var(--pixata-blazor-surface-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.pixata-blazor-scheduler-view-button:focus-visible,
.pixata-blazor-scheduler-segmented-button:focus-visible {
  outline: none;
  box-shadow: var(--pixata-blazor-focus-shadow);
}

.pixata-blazor-scheduler-views-select-wrapper {
  position: relative;
  display: none;
  align-items: center;
}

.pixata-blazor-scheduler-views-select {
  margin: 0;
  padding: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 7) var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
  border: 1px solid var(--pixata-blazor-border-color);
  border-radius: var(--pixata-blazor-border-radius);
  background-color: var(--pixata-blazor-base-bg);
  color: var(--pixata-blazor-base-color);
  font: inherit;
  appearance: none;
  cursor: pointer;
}

.pixata-blazor-scheduler-views-select:focus-visible {
  outline: none;
  box-shadow: var(--pixata-blazor-focus-shadow);
}

.pixata-blazor-scheduler-views-select-icon {
  position: absolute;
  inset-inline-end: calc(var(--pixata-blazor-spacing) * 2);
  pointer-events: none;
}

@container pixata-blazor-scheduler-toolbar (max-width: 64rem) {
  .pixata-blazor-scheduler-views-buttons {
    display: none;
  }

  .pixata-blazor-scheduler-views-select-wrapper {
    display: inline-flex;
  }
}

@container pixata-blazor-scheduler-toolbar (max-width: 30rem) {
  .pixata-blazor-scheduler-tool-text {
    display: none;
  }
}

.pixata-blazor-scheduler-footer {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: calc(var(--pixata-blazor-spacing) * 2);
  border-top: 1px solid var(--pixata-blazor-scheduler-border-color);
}

/* ---------- The views ---------- */

.pixata-blazor-scheduler-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  outline: none;
  overscroll-behavior: contain;
}

.pixata-blazor-scheduler-content:focus-visible {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pixata-blazor-primary) 50%, transparent);
}

.pixata-blazor-scheduler-grid {
  position: relative;
  min-width: 100%;
}

.pixata-blazor-scheduler-time-grid {
  width: max(100%, calc(var(--pixata-blazor-scheduler-side-width) + var(--pixata-blazor-scheduler-column-count) * var(--pixata-blazor-scheduler-column-min-width)));
}

.pixata-blazor-scheduler-month-grid {
  width: max(100%, calc(var(--pixata-blazor-scheduler-column-count) * var(--pixata-blazor-scheduler-month-column-min-width)));
}

.pixata-blazor-scheduler-timeline-grid {
  width: max(100%, calc(var(--pixata-blazor-scheduler-side-width) + var(--pixata-blazor-scheduler-column-count) * var(--pixata-blazor-scheduler-timeline-column-width)));
}

.pixata-blazor-scheduler-head {
  position: sticky;
  top: 0;
  z-index: 4;
  background-color: var(--pixata-blazor-scheduler-head-bg);
}

.pixata-blazor-scheduler-row {
  display: flex;
  min-width: 0;
}

.pixata-blazor-scheduler-cells {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: repeat(var(--pixata-blazor-scheduler-column-count), minmax(0, 1fr));
}

.pixata-blazor-scheduler-timeline-grid .pixata-blazor-scheduler-cells {
  grid-template-columns: repeat(var(--pixata-blazor-scheduler-column-count), minmax(0, 1fr));
}

.pixata-blazor-scheduler-side-cell {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  flex: 0 0 var(--pixata-blazor-scheduler-side-width);
  width: var(--pixata-blazor-scheduler-side-width);
  padding: calc(var(--pixata-blazor-spacing) * 2);
  border-inline-end: 1px solid var(--pixata-blazor-scheduler-border-color);
  border-bottom: 1px solid var(--pixata-blazor-scheduler-border-color);
  background-color: var(--pixata-blazor-scheduler-head-bg);
  font-size: var(--pixata-blazor-font-size-sm);
  text-align: end;
  overflow-wrap: anywhere;
}

.pixata-blazor-scheduler-head .pixata-blazor-scheduler-side-cell {
  z-index: 5;
}

.pixata-blazor-scheduler-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: calc(var(--pixata-blazor-spacing) * .5) calc(var(--pixata-blazor-spacing) * 2);
  border-inline-end: 1px solid var(--pixata-blazor-scheduler-border-color);
  border-bottom: 1px solid var(--pixata-blazor-scheduler-border-color);
  font-size: var(--pixata-blazor-font-size-sm);
  text-align: center;
  overflow: hidden;
}

.pixata-blazor-scheduler-group-cell {
  padding-block: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-scheduler-group-text {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 1.5);
}

.pixata-blazor-scheduler-group-swatch {
  flex: none;
  width: .75rem;
  height: .75rem;
  border-radius: var(--pixata-blazor-border-radius-sm);
}

.pixata-blazor-scheduler-group-band {
  gap: calc(var(--pixata-blazor-spacing) * 3);
  padding: calc(var(--pixata-blazor-spacing) * 1.5) calc(var(--pixata-blazor-spacing) * 2);
  border-bottom: 1px solid var(--pixata-blazor-scheduler-border-color);
  background-color: var(--pixata-blazor-base-bg);
  font-weight: 600;
}

.pixata-blazor-scheduler-group-band-item {
  position: sticky;
  inset-inline-start: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-scheduler-date-link,
.pixata-blazor-scheduler-date-text {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
  border: 0;
  border-radius: var(--pixata-blazor-border-radius);
  background: none;
  color: inherit;
  font: inherit;
  line-height: var(--pixata-blazor-line-height);
}

.pixata-blazor-scheduler-date-link {
  cursor: pointer;
}

.pixata-blazor-scheduler-date-link:hover {
  background-color: var(--pixata-blazor-hover-bg);
}

.pixata-blazor-scheduler-date-link:focus-visible {
  outline: none;
  box-shadow: var(--pixata-blazor-focus-shadow);
}

.pixata-blazor-scheduler-day-name {
  color: var(--pixata-blazor-subtle-color);
}

.pixata-blazor-scheduler-today .pixata-blazor-scheduler-day-name,
.pixata-blazor-scheduler-today > .pixata-blazor-scheduler-date-link,
.pixata-blazor-scheduler-today > .pixata-blazor-scheduler-date-text,
.pixata-blazor-scheduler-today .pixata-blazor-scheduler-month-day-header,
.pixata-blazor-scheduler-today .pixata-blazor-scheduler-agenda-day-number {
  color: var(--pixata-blazor-scheduler-today-color);
}

/* Slots: the cells that can be selected, double-clicked and dropped on */
.pixata-blazor-scheduler-slot {
  position: relative;
  min-width: 0;
  border-inline-end: 1px solid var(--pixata-blazor-scheduler-border-color);
  border-bottom: 1px solid var(--pixata-blazor-scheduler-border-color);
  overflow: hidden;
  cursor: default;
}

.pixata-blazor-scheduler-slot.pixata-blazor-scheduler-nonwork {
  background-color: var(--pixata-blazor-scheduler-nonwork-bg);
}

.pixata-blazor-scheduler-slot.pixata-blazor-selected,
.pixata-blazor-scheduler-slot.pixata-blazor-scheduler-drop-target {
  background-color: var(--pixata-blazor-scheduler-selected-slot-bg);
}

/* Appointments are drawn over the slots, in a layer that lets clicks through to the slots between them */
.pixata-blazor-scheduler-event-layer,
.pixata-blazor-scheduler-bar-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* The day, multi-day and week views */
.pixata-blazor-scheduler-time-grid .pixata-blazor-scheduler-date-cell {
  padding: calc(var(--pixata-blazor-spacing) * .5);
}

.pixata-blazor-scheduler-all-day-row .pixata-blazor-scheduler-cells {
  min-height: max(var(--pixata-blazor-scheduler-slot-height), calc((var(--pixata-blazor-scheduler-bar-rows) + 1) * var(--pixata-blazor-scheduler-bar-pitch)));
}

.pixata-blazor-scheduler-all-day-row .pixata-blazor-scheduler-slot {
  border-inline-end: 1px solid var(--pixata-blazor-scheduler-border-color);
}

.pixata-blazor-scheduler-all-day-row {
  --pixata-blazor-scheduler-bar-top: var(--pixata-blazor-scheduler-bar-gap);
}

.pixata-blazor-scheduler-times {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.pixata-blazor-scheduler-time-cell {
  height: calc(var(--pixata-blazor-scheduler-span) * var(--pixata-blazor-scheduler-slot-height));
  padding: calc(var(--pixata-blazor-spacing) * 2);
  border-bottom: 1px solid var(--pixata-blazor-scheduler-border-color);
  white-space: nowrap;
}

.pixata-blazor-scheduler-times .pixata-blazor-scheduler-time-cell:last-child {
  border-bottom: 0;
}

.pixata-blazor-scheduler-time-body .pixata-blazor-scheduler-cells {
  align-items: start;
}

.pixata-blazor-scheduler-day-column {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pixata-blazor-scheduler-day-column .pixata-blazor-scheduler-slot {
  flex: none;
  height: var(--pixata-blazor-scheduler-slot-height);
  border-bottom-style: dotted;
}

.pixata-blazor-scheduler-day-column .pixata-blazor-scheduler-slot.pixata-blazor-scheduler-slot-end {
  border-bottom-style: solid;
}

.pixata-blazor-scheduler-scroll-mark {
  position: absolute;
  top: calc(var(--pixata-blazor-scheduler-span) * var(--pixata-blazor-scheduler-slot-height));
  width: 0;
  height: 0;
}

/* The month view */
.pixata-blazor-scheduler-month-grid .pixata-blazor-scheduler-date-cell {
  padding: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-scheduler-day-name-short {
  display: none;
}

.pixata-blazor-scheduler-month-week .pixata-blazor-scheduler-cells {
  --pixata-blazor-scheduler-bar-top: var(--pixata-blazor-scheduler-month-date-height);
  min-height: max(var(--pixata-blazor-scheduler-month-day-height),
    calc(var(--pixata-blazor-scheduler-month-date-height) + var(--pixata-blazor-scheduler-items-per-slot) * var(--pixata-blazor-scheduler-bar-pitch) + 1.25rem));
}

.pixata-blazor-scheduler-month-day {
  padding: 0 calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-scheduler-month-day-header {
  display: flex;
  align-items: center;
  height: var(--pixata-blazor-scheduler-month-date-height);
}

.pixata-blazor-scheduler-month-day-header .pixata-blazor-scheduler-date-link,
.pixata-blazor-scheduler-month-day-header .pixata-blazor-scheduler-date-text {
  margin-inline-start: calc(var(--pixata-blazor-spacing) * -2);
  padding-block: 0;
}

.pixata-blazor-scheduler-other-month .pixata-blazor-scheduler-month-day-header {
  color: var(--pixata-blazor-subtle-color);
}

.pixata-blazor-scheduler-more {
  position: absolute;
  inset-inline: 2px;
  bottom: 2px;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pixata-blazor-border-radius);
  background: none;
  color: var(--pixata-blazor-primary);
  font: inherit;
  font-size: var(--pixata-blazor-font-size-sm);
  line-height: 1.25rem;
  text-align: center;
  cursor: pointer;
}

.pixata-blazor-scheduler-more:hover {
  background-color: var(--pixata-blazor-hover-bg);
}

/* The timeline view */
/* A day spans many columns, so its date (and group) is kept in view as the timeline scrolls (clip, unlike hidden, lets it stick) */
.pixata-blazor-scheduler-timeline-grid .pixata-blazor-scheduler-date-cell,
.pixata-blazor-scheduler-timeline-grid .pixata-blazor-scheduler-group-cell {
  align-items: flex-start;
  overflow: clip;
}

.pixata-blazor-scheduler-timeline-grid .pixata-blazor-scheduler-date-cell > *,
.pixata-blazor-scheduler-timeline-grid .pixata-blazor-scheduler-group-cell > * {
  position: sticky;
  inset-inline-start: calc(var(--pixata-blazor-scheduler-side-width) + var(--pixata-blazor-spacing));
}

.pixata-blazor-scheduler-timeline-grid .pixata-blazor-scheduler-time-cell {
  height: auto;
  padding: calc(var(--pixata-blazor-spacing) * 2) var(--pixata-blazor-spacing);
  border-bottom: 1px solid var(--pixata-blazor-scheduler-border-color);
}

.pixata-blazor-scheduler-timeline-lane .pixata-blazor-scheduler-cells {
  --pixata-blazor-scheduler-bar-top: calc(var(--pixata-blazor-spacing) * 1.5);
  min-height: max(var(--pixata-blazor-scheduler-timeline-lane-height), calc(var(--pixata-blazor-scheduler-bar-rows) * var(--pixata-blazor-scheduler-bar-pitch) + 1.5rem));
}

.pixata-blazor-scheduler-timeline-lane .pixata-blazor-scheduler-slot {
  border-inline-end-style: dotted;
}

.pixata-blazor-scheduler-timeline-lane .pixata-blazor-scheduler-slot.pixata-blazor-scheduler-slot-end {
  border-inline-end-style: solid;
}

.pixata-blazor-scheduler-lane-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pixata-blazor-spacing);
}

/* The agenda view */
.pixata-blazor-scheduler-agenda-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.pixata-blazor-scheduler-agenda-table th,
.pixata-blazor-scheduler-agenda-table td {
  padding: calc(var(--pixata-blazor-spacing) * 2);
  border-bottom: 1px solid var(--pixata-blazor-scheduler-border-color);
  border-inline-end: 1px solid var(--pixata-blazor-scheduler-border-color);
  font-weight: 400;
  text-align: start;
  vertical-align: top;
}

.pixata-blazor-scheduler-agenda-table th:last-child,
.pixata-blazor-scheduler-agenda-table td:last-child {
  border-inline-end: 0;
}

.pixata-blazor-scheduler-agenda-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--pixata-blazor-scheduler-head-bg);
  font-size: var(--pixata-blazor-font-size-sm);
  text-align: center;
}

.pixata-blazor-scheduler-agenda-date-cell,
.pixata-blazor-scheduler-agenda-group-cell {
  width: 1%;
  white-space: nowrap;
}

.pixata-blazor-scheduler-agenda-day-number {
  display: inline-block;
  margin-inline-end: calc(var(--pixata-blazor-spacing) * 2);
  font-size: 2.25rem;
  line-height: 1;
  vertical-align: top;
}

.pixata-blazor-scheduler-agenda-day-details {
  display: inline-flex;
  flex-direction: column;
  vertical-align: top;
}

.pixata-blazor-scheduler-agenda-month {
  font-size: var(--pixata-blazor-font-size-sm);
}

.pixata-blazor-scheduler-agenda-time-cell {
  width: 1%;
  white-space: nowrap;
}

.pixata-blazor-scheduler-agenda-empty {
  color: var(--pixata-blazor-subtle-color);
}

/* ---------- Appointments ---------- */

.pixata-blazor-scheduler-event {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--pixata-blazor-border-radius);
  background-color: var(--pixata-blazor-scheduler-event-bg);
  color: var(--pixata-blazor-scheduler-event-color);
  font-size: var(--pixata-blazor-font-size-sm);
  line-height: 1.3333;
  text-align: start;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.pixata-blazor-scheduler-event.pixata-blazor-selected {
  background-image: linear-gradient(var(--pixata-blazor-scheduler-event-selected-overlay), var(--pixata-blazor-scheduler-event-selected-overlay));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .16);
}

.pixata-blazor-scheduler-event:focus-visible {
  box-shadow: 0 0 0 2px var(--pixata-blazor-scheduler-bg), 0 0 0 4px var(--pixata-blazor-scheduler-event-bg);
}

.pixata-blazor-scheduler-event-read-only {
  cursor: default;
}

.pixata-blazor-scheduler-event-content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  padding: var(--pixata-blazor-spacing) calc(var(--pixata-blazor-spacing) * 2);
  overflow: hidden;
}

.pixata-blazor-scheduler-event-title,
.pixata-blazor-scheduler-event-time {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pixata-blazor-scheduler-event-time {
  font-size: var(--pixata-blazor-font-size-sm);
  opacity: .9;
}

.pixata-blazor-scheduler-event-icon,
.pixata-blazor-scheduler-event-continues {
  display: inline-flex;
  align-self: center;
  flex: none;
  padding-inline: 2px;
}

.pixata-blazor-scheduler-event-delete {
  display: none;
  align-self: center;
  flex: none;
  margin: 0 2px;
  padding: 2px;
  border: 0;
  border-radius: var(--pixata-blazor-border-radius);
  background: none;
  color: inherit;
  cursor: pointer;
}

.pixata-blazor-scheduler-event-delete:hover {
  background-color: rgba(255, 255, 255, .25);
}

.pixata-blazor-scheduler-event:hover .pixata-blazor-scheduler-event-delete,
.pixata-blazor-scheduler-event.pixata-blazor-selected .pixata-blazor-scheduler-event-delete,
.pixata-blazor-scheduler-event:focus-visible .pixata-blazor-scheduler-event-delete {
  display: inline-flex;
}

/* A box in a time column: --pixata-blazor-scheduler-event-top and -height are set on it, and it takes its lane's share of
   the column's width, leaving a gutter to click on the slots */
.pixata-blazor-scheduler-event-vertical {
  top: var(--pixata-blazor-scheduler-event-top);
  height: var(--pixata-blazor-scheduler-event-height);
  min-height: 1.25rem;
  inset-inline-start: calc((100% - var(--pixata-blazor-scheduler-event-gutter)) * var(--pixata-blazor-scheduler-event-lane) / var(--pixata-blazor-scheduler-event-lanes));
  width: calc((100% - var(--pixata-blazor-scheduler-event-gutter)) / var(--pixata-blazor-scheduler-event-lanes) - 2px);
  flex-direction: row;
}

/* Short boxes show their title on one line, and no time */
.pixata-blazor-scheduler-event-vertical {
  container-type: size;
}

@container (max-height: 2.5rem) {
  .pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-event-title {
    white-space: nowrap;
  }

  .pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-event-time {
    display: none;
  }
}

@container (max-width: 4.5rem) {
  .pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-event-time {
    display: none;
  }
}

.pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-event-icon,
.pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-event-delete {
  align-self: flex-start;
  margin-top: var(--pixata-blazor-spacing);
}

.pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-event-continues {
  position: absolute;
  inset-inline: 0;
  justify-content: center;
  padding: 0;
  pointer-events: none;
}

.pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-event-continues-before {
  top: 0;
}

.pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-event-continues-after {
  bottom: 0;
}

/* A bar: --pixata-blazor-scheduler-event-start, -width and -row are set on it */
.pixata-blazor-scheduler-event-horizontal {
  top: calc(var(--pixata-blazor-scheduler-bar-top, 0px) + var(--pixata-blazor-scheduler-event-row) * var(--pixata-blazor-scheduler-bar-pitch));
  height: var(--pixata-blazor-scheduler-bar-height);
  inset-inline-start: calc(var(--pixata-blazor-scheduler-event-start) + 1px);
  width: calc(var(--pixata-blazor-scheduler-event-width) - 3px);
  align-items: center;
  container-type: inline-size;
}

/* Narrow bars (eg the month view on a phone) keep their room for the title */
@container (max-width: 4.5rem) {
  .pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-event-icon {
    display: none;
  }
}

.pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-event-content {
  padding-block: 0;
  white-space: nowrap;
}

.pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-event-continues-before {
  padding-inline-end: 0;
}

.pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-event-continues-before + .pixata-blazor-scheduler-event-content {
  padding-inline-start: 2px;
}

/* A row of the agenda */
.pixata-blazor-scheduler-event-agenda {
  position: static;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  margin: calc(var(--pixata-blazor-spacing) * -1);
  padding: var(--pixata-blazor-spacing);
  background: none;
  color: inherit;
  font-size: inherit;
}

.pixata-blazor-scheduler-event-agenda .pixata-blazor-scheduler-event-content {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 calc(var(--pixata-blazor-spacing) * 2);
  padding: 0;
}

.pixata-blazor-scheduler-event-agenda:hover {
  background-color: var(--pixata-blazor-hover-bg);
}

.pixata-blazor-scheduler-event-agenda.pixata-blazor-selected {
  background-image: none;
  background-color: var(--pixata-blazor-scheduler-selected-slot-bg);
  box-shadow: none;
}

.pixata-blazor-scheduler-event-agenda .pixata-blazor-scheduler-event-icon {
  order: -1;
}

.pixata-blazor-scheduler-event-agenda .pixata-blazor-scheduler-event-delete:hover {
  background-color: var(--pixata-blazor-hover-bg);
}

.pixata-blazor-scheduler-event-swatch {
  flex: none;
  width: 1em;
  height: 1em;
  background-color: var(--pixata-blazor-scheduler-event-bg);
}

/* Resize handles, shown when the pointer is over an appointment that can be changed */
.pixata-blazor-scheduler-resize-handle {
  position: absolute;
  z-index: 1;
  visibility: hidden;
}

.pixata-blazor-scheduler-resize-handle::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid var(--pixata-blazor-scheduler-bg);
  border-radius: 9999px;
  background-color: var(--pixata-blazor-scheduler-event-bg);
}

.pixata-blazor-scheduler-event:hover .pixata-blazor-scheduler-resize-handle,
.pixata-blazor-scheduler-event.pixata-blazor-selected .pixata-blazor-scheduler-resize-handle {
  visibility: visible;
}

.pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-resize-handle {
  inset-inline: 0;
  height: .5rem;
  cursor: ns-resize;
}

.pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-resize-handle::before {
  inset-inline-start: calc(50% - 4px);
  top: calc(50% - 4px);
}

.pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-resize-handle-start {
  top: 0;
}

.pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-resize-handle-end {
  bottom: 0;
}

.pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-resize-handle {
  inset-block: 0;
  width: .5rem;
  cursor: ew-resize;
}

.pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-resize-handle::before {
  top: calc(50% - 4px);
  inset-inline-start: calc(50% - 4px);
}

.pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-resize-handle-start {
  inset-inline-start: 0;
}

.pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-resize-handle-end {
  inset-inline-end: 0;
}

/* A selected appointment that can be moved takes over touch gestures, so it can be dragged with a finger */
.pixata-blazor-scheduler-event.pixata-blazor-selected[data-pixata-draggable="true"] {
  touch-action: none;
}

.pixata-blazor-scheduler-dragging {
  z-index: 6;
  opacity: .8;
  box-shadow: var(--pixata-blazor-popup-shadow);
  cursor: grabbing;
}

.pixata-blazor-scheduler-drag-active,
.pixata-blazor-scheduler-drag-active * {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Dialogs ---------- */

.pixata-blazor-scheduler-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--pixata-blazor-overlay-z-index);
  background-color: var(--pixata-blazor-overlay-bg);
}

.pixata-blazor-scheduler-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: calc(var(--pixata-blazor-overlay-z-index) + 1);
  display: flex;
  flex-direction: column;
  width: min(var(--pixata-blazor-scheduler-dialog-width), calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  transform: translate(-50%, -50%);
  border: 1px solid var(--pixata-blazor-border-color);
  border-radius: var(--pixata-blazor-border-radius-lg);
  background-color: var(--pixata-blazor-surface-bg);
  color: var(--pixata-blazor-text-color);
  box-shadow: var(--pixata-blazor-window-shadow);
  font-size: var(--pixata-blazor-font-size);
}

.pixata-blazor-scheduler-prompt-overlay {
  z-index: calc(var(--pixata-blazor-overlay-z-index) + 2);
}

.pixata-blazor-scheduler-prompt {
  z-index: calc(var(--pixata-blazor-overlay-z-index) + 3);
  width: min(28rem, calc(100vw - 2rem));
}

.pixata-blazor-scheduler-dialog-titlebar {
  display: flex;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 3) calc(var(--pixata-blazor-spacing) * 4);
  border-bottom: 1px solid var(--pixata-blazor-border-color);
}

.pixata-blazor-scheduler-dialog-title {
  flex: 1 1 auto;
  font-size: var(--pixata-blazor-font-size-lg);
  font-weight: 600;
}

.pixata-blazor-scheduler-edit-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pixata-blazor-scheduler-dialog-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(var(--pixata-blazor-spacing) * 4);
  overflow: auto;
}

.pixata-blazor-scheduler-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--pixata-blazor-spacing) * 2);
  padding: calc(var(--pixata-blazor-spacing) * 2) calc(var(--pixata-blazor-spacing) * 4);
  border-top: 1px solid var(--pixata-blazor-border-color);
}

.pixata-blazor-scheduler-dialog-spacer {
  flex: 1 1 auto;
}

.pixata-blazor-scheduler-focus-sentinel {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  outline: none;
}

/* The built-in edit form */
.pixata-blazor-scheduler-form {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pixata-blazor-spacing) * 3);
}

.pixata-blazor-scheduler-form-field {
  display: grid;
  grid-template-columns: minmax(5rem, 22%) minmax(0, 1fr);
  align-items: start;
  gap: calc(var(--pixata-blazor-spacing) * 3);
}

.pixata-blazor-scheduler-form-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pixata-blazor-spacing);
  padding-top: calc(var(--pixata-blazor-spacing) + 1px);
  text-align: end;
}

.pixata-blazor-scheduler-form-value {
  display: flex;
  flex-direction: column;
  gap: var(--pixata-blazor-spacing);
  min-width: 0;
}

.pixata-blazor-scheduler-form .validation-message {
  color: var(--pixata-blazor-error);
  font-size: var(--pixata-blazor-font-size-sm);
}

.pixata-blazor-scheduler-checkbox-label,
.pixata-blazor-scheduler-radio-label {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 1.5);
  cursor: pointer;
}

.pixata-blazor-scheduler-checkbox,
.pixata-blazor-scheduler-radio-label input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--pixata-blazor-primary);
}

.pixata-blazor-scheduler-textarea .pixata-blazor-input-inner {
  min-height: 4.5rem;
  white-space: pre-wrap;
  resize: vertical;
}

.pixata-blazor-scheduler-select {
  width: auto;
  max-width: 100%;
}

.pixata-blazor-scheduler-select .pixata-blazor-input-inner {
  appearance: auto;
  cursor: pointer;
}

.pixata-blazor-scheduler-number-input {
  width: 5rem;
}

/* The recurrence editor */
.pixata-blazor-scheduler-recurrence-editor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--pixata-blazor-spacing) * 3);
}

.pixata-blazor-scheduler-recurrence-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-scheduler-recurrence-label {
  min-width: 6rem;
}

.pixata-blazor-scheduler-recurrence-options {
  display: flex;
  flex-direction: column;
  gap: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-scheduler-recurrence-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pixata-blazor-spacing) * 2);
}

.pixata-blazor-scheduler-recurrence-option > .pixata-blazor-input:not(.pixata-blazor-scheduler-number-input):not(.pixata-blazor-scheduler-select) {
  width: auto;
}

.pixata-blazor-scheduler-recurrence-summary {
  color: var(--pixata-blazor-subtle-color);
  font-size: var(--pixata-blazor-font-size-sm);
}

/* ---------- Phones and touch screens ---------- */

@media (max-width: 600px) {
  .pixata-blazor-scheduler {
    --pixata-blazor-scheduler-side-width: 3.5rem;
    --pixata-blazor-scheduler-column-min-width: 3rem;
  }

  .pixata-blazor-scheduler-day-name-long {
    display: none;
  }

  .pixata-blazor-scheduler-day-name-short {
    display: inline;
  }

  .pixata-blazor-scheduler-agenda-day-details {
    display: flex;
  }

  .pixata-blazor-scheduler-agenda-day-number {
    font-size: 1.75rem;
  }

  .pixata-blazor-scheduler-dialog {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100vw;
    max-height: 100dvh;
    transform: none;
    border-radius: var(--pixata-blazor-border-radius-lg) var(--pixata-blazor-border-radius-lg) 0 0;
  }

  .pixata-blazor-scheduler-form-field {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pixata-blazor-spacing);
  }

  .pixata-blazor-scheduler-form-label {
    justify-content: flex-start;
    padding-top: 0;
    text-align: start;
  }
}

@media (pointer: coarse) {
  .pixata-blazor-scheduler-view-button,
  .pixata-blazor-scheduler-segmented-button,
  .pixata-blazor-scheduler-views-select {
    min-height: var(--pixata-blazor-touch-target);
  }

  .pixata-blazor-scheduler-event-vertical .pixata-blazor-scheduler-resize-handle {
    height: 1rem;
  }

  .pixata-blazor-scheduler-event-horizontal .pixata-blazor-scheduler-resize-handle {
    width: 1rem;
  }

  .pixata-blazor-scheduler-event:hover:not(.pixata-blazor-selected) .pixata-blazor-scheduler-resize-handle {
    visibility: hidden;
  }

  .pixata-blazor-scheduler-event-delete {
    padding: var(--pixata-blazor-spacing);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-scheduler-view-button,
  .pixata-blazor-scheduler-segmented-button {
    transition: none;
  }
}

/* ========== end of PixataScheduler ========== */

/* ========== PixataTreeView ========== */

:root {
  --pixata-blazor-treeview-color: var(--pixata-blazor-text-color);
  --pixata-blazor-treeview-indent: 16px;
  --pixata-blazor-treeview-item-padding-y: 4px;
  --pixata-blazor-treeview-item-padding-x: 8px;
  --pixata-blazor-treeview-item-radius: var(--pixata-blazor-border-radius);
  --pixata-blazor-treeview-hover-bg: var(--pixata-blazor-hover-bg);
  --pixata-blazor-treeview-selected-bg: var(--pixata-blazor-selected-bg);
  --pixata-blazor-treeview-selected-hover-bg: var(--pixata-blazor-selected-hover-bg);
  --pixata-blazor-treeview-selected-color: var(--pixata-blazor-selected-color);
  --pixata-blazor-treeview-link-color: inherit;
  --pixata-blazor-treeview-focus-ring: var(--pixata-blazor-focus-ring);
  --pixata-blazor-treeview-drop-color: var(--pixata-blazor-primary);
  --pixata-blazor-treeview-clue-bg: var(--pixata-blazor-surface-bg);
  --pixata-blazor-treeview-clue-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.pixata-blazor-treeview {
  box-sizing: border-box;
  display: block;
  overflow: auto;
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  color: var(--pixata-blazor-treeview-color);
  white-space: nowrap;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.pixata-blazor-treeview-sm {
  --pixata-blazor-treeview-item-padding-y: 2px;
}

.pixata-blazor-treeview-lg {
  --pixata-blazor-treeview-item-padding-y: 6px;
  font-size: var(--pixata-blazor-font-size-lg);
  line-height: var(--pixata-blazor-line-height-lg);
}

.pixata-blazor-treeview-lines,
.pixata-blazor-treeview-group {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each item is indented, and its arrow sits in the indent, so a child's arrow lines up under its parent's text */
.pixata-blazor-treeview-item {
  margin: 0;
  padding: 0;
  padding-inline-start: var(--pixata-blazor-treeview-indent);
  outline: none;
}

.pixata-blazor-treeview-content {
  display: flex;
  align-items: center;
}

.pixata-blazor-treeview-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--pixata-blazor-treeview-indent);
  margin-inline-start: calc(var(--pixata-blazor-treeview-indent) * -1);
  align-self: stretch;
  cursor: pointer;
}

.pixata-blazor-treeview-toggle .pixata-blazor-icon {
  width: 1rem;
  height: 1rem;
}

.pixata-blazor-treeview:dir(rtl) .pixata-blazor-treeview-toggle:not(.pixata-blazor-treeview-toggle-expanded) svg {
  transform: scaleX(-1);
}

/* Shown in place of the arrow while an item's children are loading */
.pixata-blazor-treeview-loading {
  box-sizing: border-box;
  display: inline-block;
  width: .875rem;
  height: .875rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  opacity: .6;
  animation: pixata-blazor-treeview-spin .75s linear infinite;
}

@keyframes pixata-blazor-treeview-spin {
  to {
    transform: rotate(360deg);
  }
}

.pixata-blazor-treeview-checkbox-wrap {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding-inline-end: 4px;
}

.pixata-blazor-treeview-checkbox {
  display: inline-block;
  box-sizing: border-box;
}

.pixata-blazor-treeview-leaf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: var(--pixata-blazor-treeview-item-padding-y) var(--pixata-blazor-treeview-item-padding-x);
  color: inherit;
  text-decoration: none;
  border-radius: var(--pixata-blazor-treeview-item-radius);
  cursor: pointer;
  user-select: none;
  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.pixata-blazor-treeview-link,
.pixata-blazor-treeview-link:hover,
.pixata-blazor-treeview-link:visited {
  color: var(--pixata-blazor-treeview-link-color);
  text-decoration: none;
}

.pixata-blazor-treeview-leaf:hover {
  background-color: var(--pixata-blazor-treeview-hover-bg);
}

.pixata-blazor-treeview-leaf.pixata-blazor-selected,
.pixata-blazor-treeview-leaf.pixata-blazor-selected:visited {
  color: var(--pixata-blazor-treeview-selected-color);
  background-color: var(--pixata-blazor-treeview-selected-bg);
}

.pixata-blazor-treeview-leaf.pixata-blazor-selected:hover {
  color: var(--pixata-blazor-treeview-selected-color);
  background-color: var(--pixata-blazor-treeview-selected-hover-bg);
}

/* The item the keyboard is on. The focus is on the whole item (with its children), but only its own row is outlined */
.pixata-blazor-treeview-item:focus-visible > .pixata-blazor-treeview-content > .pixata-blazor-treeview-leaf {
  box-shadow: var(--pixata-blazor-treeview-focus-ring);
}

.pixata-blazor-treeview-icon {
  flex: none;
}

/* Where a dragged item will go: a line before or after an item, or the item it will go inside */
.pixata-blazor-treeview-leaf.pixata-blazor-treeview-drop-over {
  box-shadow: inset 0 0 0 1px var(--pixata-blazor-treeview-drop-color);
  background-color: color-mix(in srgb, var(--pixata-blazor-treeview-drop-color) 12%, transparent);
}

.pixata-blazor-treeview-drop-hint {
  position: fixed;
  z-index: 10003;
  height: 2px;
  margin-top: -1px;
  pointer-events: none;
  background-color: var(--pixata-blazor-treeview-drop-color);
}

.pixata-blazor-treeview-drop-hint::before {
  position: absolute;
  top: -4px;
  inset-inline-start: -2px;
  content: "";
  border: 5px solid transparent;
  border-inline-start-color: var(--pixata-blazor-treeview-drop-color);
}

/* The item following the pointer as it is dragged, with an icon saying what dropping it there would do */
.pixata-blazor-treeview-drag-clue {
  position: fixed;
  z-index: 10003;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-family: var(--pixata-blazor-font-family);
  font-size: var(--pixata-blazor-font-size);
  line-height: var(--pixata-blazor-line-height);
  color: var(--pixata-blazor-treeview-color);
  white-space: nowrap;
  pointer-events: none;
  background-color: var(--pixata-blazor-treeview-clue-bg);
  border: 1px solid var(--pixata-blazor-border-color);
  border-radius: var(--pixata-blazor-border-radius);
  box-shadow: var(--pixata-blazor-treeview-clue-shadow);
}

.pixata-blazor-treeview-drag-denied .pixata-blazor-treeview-drag-status {
  color: var(--pixata-blazor-error);
}

.pixata-blazor-treeview-dragging,
.pixata-blazor-treeview-dragging * {
  cursor: move !important;
  user-select: none;
}

/* Dragging an item on a touch screen needs the finger to be held on it first, so the browser mustn't treat that as a long
   press that selects text */
.pixata-blazor-treeview-draggable .pixata-blazor-treeview-leaf {
  -webkit-touch-callout: none;
}

@media (prefers-reduced-motion: reduce) {
  .pixata-blazor-treeview-leaf {
    transition: none;
  }

  .pixata-blazor-treeview-loading {
    animation-duration: 2s;
  }
}

/* ========== end of PixataTreeView ========== */