:root {
/* Default Vaadin Lumo font and line size constants are overridden with font size rate percentage value*/
    --font-size-rate: 0.90;
    /* Font sizes */
    --lumo-font-size-xxs: calc(0.75rem * var(--font-size-rate));
    --lumo-font-size-xs: calc(0.8125rem * var(--font-size-rate));
    --lumo-font-size-s: calc(0.875rem * var(--font-size-rate));
    --lumo-font-size-m: calc(1rem * var(--font-size-rate));
    --lumo-font-size-l: calc(1.125rem * var(--font-size-rate));
    --lumo-font-size-xl: calc(1.375rem * var(--font-size-rate));
    --lumo-font-size-xxl: calc(1.75rem * var(--font-size-rate));
    --lumo-font-size-xxxl: calc(2.5rem * var(--font-size-rate));
    /* Line heights */
    --lumo-line-height-xs: calc(1.25 * var(--font-size-rate));
    --lumo-line-height-s: calc(1.375 * var(--font-size-rate));
    --lumo-line-height-m: calc(1.625 * var(--font-size-rate));
    /*Sizes*/
    --lumo-size-xs: calc(1.625rem * var(--font-size-rate));
    --lumo-size-s: calc(1.875rem * var(--font-size-rate));
    --lumo-size-m: calc(2.25rem * var(--font-size-rate));
    --lumo-size-l: calc(2.75rem * var(--font-size-rate));
    --lumo-size-xl: calc(3.5rem * var(--font-size-rate));
    /*Space*/
    --lumo-space-xs: calc(0.25rem * var(--font-size-rate));
    --lumo-space-s: calc(0.5rem * var(--font-size-rate));
    --lumo-space-m: calc(1rem * var(--font-size-rate));
    --lumo-space-l: calc(1.5rem * var(--font-size-rate));
    --lumo-space-xl: calc(2.5rem * var(--font-size-rate));
}

[theme~="badge"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4);
    color: white;
    background-color: var(--lumo-primary-color-10pct);
    border-radius: var(--lumo-border-radius-s);
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-s);
    line-height: 1;
    font-weight: 500;
    text-transform: initial;
    letter-spacing: initial;
    min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
    flex-shrink: 0;
}
[theme~="badge"][theme~="small"] {
    font-size: var(--lumo-font-size-xxs);
    line-height: 1;
}
[theme~="badge"][theme~="pill"] {
    --lumo-border-radius-s: 1em;
}
[theme~="badge"][theme~="primary"] {
    background-color: var(--lumo-primary-color);
}
[theme~="badge"][theme~="contrast"] {
    color: var(--lumo-contrast-80pct);
    background-color: var(--lumo-contrast-5pct);
}
[theme~="badge"][theme~="error"] {
    background-color: red;
    color: white;
}
[theme~="badge"][theme~="success"] {
    background-color: green;
    color: white;
}
[theme~="badge"][theme~="warning"] {
    background-color: gold;
    color: black;
}
[theme~="badge"][theme~="dark"] {
    background-color: black;
}
[theme~="badge"][theme~="gray"] {
    background-color: slategray;
}
[theme~="badge"][theme~="info"] {
    background-color: darkcyan;
}
[theme~="badge"][theme~="orange"] {
    background-color: darkorange;
}
[theme~="badge"][theme~="salmon"] {
    background-color: #ff6666;
}
[theme~="badge"][theme~="purple"] {
    background-color: #8a00e6;
}
[theme~="badge"][theme~="pink"] {
    background-color: #ff3399;
}
[theme~="badge"][theme~="olive"] {
    background-color: #666633;
}
[theme~="badge"][theme~="brown"] {
    background-color: #996633;
}
[theme~="badge"][theme~="sky"] {
    background-color: #BDD7EE;
    color: black;
}
[theme~="badge"][theme~="ocean"] {
    background-color: #007ACC;
}
vaadin-button.left-align-text {
    width: 100%;
}

vaadin-button.left-align-text::part(label) {
    width: 100%;
    text-align: left;
}

vaadin-button.left-align-text::part(prefix) {
    margin-inline-end: var(--lumo-space-s);
}

.search-link {
    cursor: pointer;
    border-radius: 5px;
}

.search-link:hover {
    background-color: var(--lumo-contrast-5pct);
}

.grid-field-controller-layout {
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-s);
  width: 100%;
}

.readonly-label {
    color: var(--lumo-secondary-text-color);
    font-style: italic;
    opacity: 0.6;
}

@media (min-width: 600px) {
  .grid-field-controller-layout {
    flex-direction: row;
  }

  .grid-field-controller-layout > * {
    flex: 1 1 0;
  }
}

.editor-layout {
  min-width: 400px;
}

@media (max-width: 405px) {
  .editor-layout {
    min-width: 300px;
  }
}

.editor-text-area {
    min-height: 112px;
}

.editor-field {
    width: 100%;
    min-width: 0;
    padding: 0;
}

.editor-columns-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lumo-space-m);
}

.editor-column {
  flex: 1 1 280px;
  min-width: 250px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--lumo-space-s);
}

.editor-layout {
    margin-top : 8px;
    display: flex;
    flex-direction: column;
    gap: var(--lumo-space-s);
    width: 100%;
    --available-width: calc(100vw - 100px);
    min-width: clamp(300px, var(--preferred-width), var(--available-width));
}

.editor-layout.width-small {
    --preferred-width: 400px;
}

.editor-layout.width-medium {
    --preferred-width: 600px;
}

.editor-layout.width-large {
    --preferred-width: 800px;
}
.editor-layout.width-xl {
    --preferred-width: 1200px;
}

.button-dialog::part(header) {
    padding-bottom: 0;
}

.button-border {
    border: solid 1px;
}

.no-bg-color vaadin-grid-cell-content {
    background-color: #FFFFFF;
}

.checklist-details-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--lumo-font-size-l);
    font-weight: 600;
    width: 100%;
    margin-left: calc(var(--lumo-space-l) * -1);
    margin-right: calc(var(--lumo-space-l) * -1);
    margin-top: calc(var(--lumo-space-l) * -0.7);
    padding: var(--lumo-space-s) var(--lumo-space-l);
    background-color: var(--lumo-contrast-5pct);
}

.responsive-forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--lumo-space-m);
}

.datasheet-column-header {
    display: block;
    border-bottom: 1px solid var(--lumo-contrast-20pct);
    padding-bottom: 0.1rem;
    width: 100%;
    font-weight: bold;
}

.grid-layout-height {
    height: calc(100vh - 120px);
}

vaadin-form-layout.compact-form vaadin-form-item::part(label) {
    margin-top: var(--lumo-space-s);
}

.datasheet-item-caption {
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
    font-weight: 500;
    margin-bottom: 0.25rem;
    margin-top: var(--lumo-space-s);
}

.datasheet-scrollable-form {
    max-height: 520px;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.wrap-text {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    display: inline-block;
}

.dialog-opener-anchor {
    text-decoration: none;
    color: var(--lumo-primary-text-color);
    cursor: pointer;
}

.dialog-opener-anchor:hover {
    text-decoration: underline;
}

vaadin-anchor.dialog-opener-anchor::part(label) {
    color: var(--lumo-primary-text-color);
}

.details-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 5px;
}

.details-layout-column {
    flex: 1 1 360px;
    box-sizing: border-box;
}

.details-layout-column > *:not(:last-child) {
    margin-bottom: 0.25rem;
}

.image-container {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: var(--lumo-border-radius-m);
    overflow: hidden;
}

.image-container:hover {
    transform: scale(1.03);
    box-shadow: var(--lumo-box-shadow-m);
}

.thumbnail-image {
    width: 100%;
    max-height: 100px;
    margin-top: 8px;
    margin-left: 8px;
    object-fit: cover;
    display: block;
}

.operation-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    width: 100%;
    overflow: auto;
}

.datasheet-layout {
    background: white;
    padding: 0;
    gap: 1rem;
}

.grey-color {
  color: slategray;
}

.multi-select-grid vaadin-grid-cell-content:first-of-type {
    width: 40px;
    flex: 0 0 40px;
}

vaadin-grid.mobile-grid::part(header-cell) {
	display: none;
}

vaadin-grid.mobile-grid::part(body-cell) {
    background-color: transparent;
}
vaadin-grid.mobile-grid {
    --vaadin-grid-cell-padding: 0px;
    --vaadin-grid-cell-background: transparent;
}

.mobile-cell-details-layout {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--lumo-space-s);
    padding: var(--lumo-space-s);
}

.mobile-cell-icon-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-cell-badge-container {
    display: inline-flex;
}

.mobile-cell-span {
    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:normal;
}

.mobile-cell-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: var(--lumo-space-s);
    padding: var(--lumo-space-s);
    gap: var(--lumo-space-m);

    background-color: var(--lumo-base-color);

    border: 1px solid var(--lumo-contrast-20pct);
    border-radius: var(--lumo-border-radius-l);
    box-shadow: var(--lumo-box-shadow-s);
    box-sizing: border-box;
}
.mobile-cell-view-icon {
    cursor: pointer;
    flex-shrink: 0;
    border: 1px solid var(--lumo-primary-color);
    border-radius: var(--lumo-border-radius-m);
    padding: var(--lumo-space-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lumo-base-color);
    box-shadow: var(--lumo-box-shadow-xs);
    color: var(--lumo-primary-color);
}

.location-selector vaadin-button {
    border: 1px solid;
}

vaadin-dashboard-widget::part(header) {
    background-color: var(--lumo-contrast-5pct);
    color: #000000;
}

.widget-icon {
    font-size: 10px;
    color: var(--lumo-contrast-60pct);
}

.widget-icon:hover {
    cursor: pointer;
    color: var(--lumo-primary-text-color);
}

.widget-controller {
    gap: var(--lumo-space-s);
}

.widget-controller-button {
    height: 32px;
    padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2));
    background: var(--_lumo-button-background);
    border: 1px solid;
    font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m));
}

.widget-controller-button:hover {
    cursor: pointer;
}

.widget-button-edit {
    position: fixed;
    top: 3.5rem;
    right: 1.5rem;
    box-shadow: var(--lumo-box-shadow-l);
    z-index: 1000;
	background-color: #FFF;
}

.widget-button-add {
    position: fixed;
    top: 3.5rem;
    right: 3.5rem;
    box-shadow: var(--lumo-box-shadow-l);
    z-index: 1000;
	color: #FFF;
	background-color: var(--lumo-success-color);
    border: 1px solid var(--lumo-success-color);
}

.picture-clear-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--lumo-tint-20pct);
    color: var(--lumo-primary-text-color);
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.picture-container {
    position: relative;
    display: inline-block;
}

.dark-orange-color {
    color: darkorange;
}

.max-width-500 {
    max-width: 500px;
}

.disposition-tree-grid vaadin-grid-tree-toggle {
    pointer-events: none;
}

.disposition-tree-grid vaadin-grid-tree-toggle::part(toggle) {
    pointer-events: auto;
}