html {
      --lumo-primary-color: hsl(69, 90%, 42%);
      --lumo-primary-color-50pct: hsla(69, 90%, 42%, 0.5);
      --lumo-primary-color-10pct: hsla(69, 90%, 42%, 0.1);
      --lumo-primary-text-color: hsl(69, 91%, 41%);
      --custom-warning-color: hsl(52, 100%, 28%);
      --lumo-domestic-icon-color: hsl(218.8deg 67.56% 58.24%);

      --fire-red: #ff4500;      /* Bright orange-red */
      --fire-orange: #ff8c00;   /* Deep orange */
      --fire-gold: #ffd700;     /* Warm gold */
      --fire-ember: #b22222;    /* Dark ember red */
      --fire-smoke: #2f1b0c;    /* Charcoal brown */

      /* Water / Frozen Gradient Colors */
      --ice-blue: #00bfff;     /* Deep sky blue */
      --arctic-blue: #5f9ea0;  /* Cool blue-green */
      --frost-white: #f0f8ff;  /* Icy white */
      --glacier-blue: #4682b4; /* Cold deep blue */
      --deep-sea: #002147;     /* Very dark blue */
    }

/* Client does not want dark theme
   [theme~="dark"] {
      --lumo-primary-color: hsl(69, 91%, 41%);
      --lumo-primary-color-50pct: hsla(69, 91%, 41%, 0.5);
      --lumo-primary-color-10pct: hsla(69, 91%, 41%, 0.1);
      --lumo-primary-text-color: hsl(69, 91%, 41%);

    }
*/

/* Example: CSS class name to center align the content . */
.centered-content {
  margin: 0 auto;
  max-width: 250px;
}

/* Example: the style is applied only to the textfields which have the `bordered` class name. */
vaadin-text-field.bordered::part(input-field) {
  box-shadow: inset 0 0 0 1px var(--lumo-contrast-30pct);
  background-color: var(--lumo-base-color);
}

.shipment-grid {
    border: unset;
}

.shipment-grid .reference {
    font-family: var(--lumo-font-family-mono);
    font-weight: 600;
    margin-right: var(--lumo-space-xs);
}

.toolbar {
    margin-bottom: var(--lumo-space-m);
    width: 100%;
}

.status {
    display: flex;
    align-items: center;
    gap: var(--lumo-space-xs);
}

.date-picker {
    width: 10em;
}