html {
    --vaadin-app-layout-drawer-size: 50rem;
    --lumo-disabled-text-color: var(--lumo-contrast-70pct);
}

[theme~="dark"] {
    --lumo-base-color: hsl(226, 0%, 16%);
    --lumo-primary-color: hsl(226, 86%, 55%);
    --lumo-primary-text-color: hsl(226, 100%, 70%);
    --lumo-disabled-text-color: var(--lumo-contrast-70pct);
}

[theme~="orange"] {
    --lumo-base-color: #fff;
    --lumo-primary-color: hsl(20, 86%, 55%);
    --lumo-primary-text-color: hsl(20, 100%, 70%);
    --lumo-disabled-text-color: var(--lumo-contrast-70pct);
}

[theme~="hv"] {
    --lumo-base-color: #fff;
    --lumo-primary-color: hsl(20, 86%, 55%);
    --lumo-primary-text-color: hsl(20, 100%, 70%);
    --lumo-disabled-text-color: var(--lumo-contrast);
    --lumo-font-size-xxxl: 3rem;
    --lumo-font-size-xxl: 2.25rem;
    --lumo-font-size-xl: 1.75rem;
    --lumo-font-size-l: 1.375rem;
    --lumo-font-size-m: 1.125rem;
    --lumo-font-size-s: 1rem;
    --lumo-font-size-xs: 0.875rem;
    --lumo-font-size-xxs: 0.8125rem;
    /*
    --lumo-size-xl: 4.5rem;
    --lumo-size-l: 3.75rem;
    --lumo-size-m: 3rem;
    --lumo-size-s: 2.63rem;
    --lumo-size-xs: 2.25rem;
    --lumo-font-size: 1.5rem;
     */
    --lumo-line-height-m: 2.1;
    --lumo-line-height-s: 1.8;
    --lumo-line-height-xs: 1.65;
    --lumo-space-xl: 2.8rem;
    --lumo-space-l: 1.87rem;
    --lumo-space-m: 0.95rem;
    --lumo-space-s: 0.47rem;
    --lumo-space-xs: 0.28rem;
    /*
    --lumo-icon-size-s: 1.87em;
    --lumo-icon-size-m: 2.25em;
    --lumo-icon-size-l: 3.37em;
    */
    /* For backwards compatibility */
    /*
    --lumo-icon-size: var(--lumo-icon-size-m);
    */
}

.v-loading-indicator {
    position: fixed; /* Occupy whole screen even if scrolled */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Eat mouse events when visible, doesn't prevent scrolling */
    pointer-events: auto;
    /* Animated with delay to prevent flashing */
    animation: fadein 0.3s ease-out 0.2s normal 1 both;
    z-index: 2147483647;
}

.v-status-message {
    position: absolute;
    bottom: 0;
    left: 1rem;
    color: var(--lumo-error-color-50pct);
    z-index: 2147483646;
}

@keyframes fadein {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    100% {
        background: rgba(0, 0, 0, .5); /* Darkens the UI */
    }
}

.exa-menu-icon {
    color: var(--lumo-primary-color);
}

.exa-menu-submenu-title {
    color: var(--lumo-primary-color);
}

.exa-menu-submenu-leaf {
    padding-left: 2rem;
}

.exa-vertical-menu-divider {
    background-color: var(--lumo-contrast-10pct);
    flex: 0 0 1px;
    align-self: center;
    height: 95%;
}

.exa-grid-status-header {
    width: 100%;
    background-color: var(--lumo-primary-color-10pct);
    font-size: var(--lumo-font-size-s);
    padding-top: var(--lumo-space-s);
    padding-left: var(--lumo-space-s);
    padding-right: var(--lumo-space-s);
}

.exa-division-border {
    border: 1px outset;
    border-radius: var(--lumo-space-s);
    padding: var(--lumo-space-s) var(--lumo-space-m);
    margin-top: var(--lumo-space-m);
    margin-bottom: var(--lumo-space-m);
}

vaadin-dialog-overlay::part(overlay) {
    border: 2px outset;
}

.exa-exabatsessionuuid {
    margin-left: auto;
    font-size: var(--lumo-font-size-xs);
    padding-right: 5rem;
}

.exa-help-icon {
    width: calc(var(--lumo-icon-size-s) * 0.7);
    height: calc(var(--lumo-icon-size-s) * 0.7);
    /* color: hsl(214, 100%, 48%); */
    color: var(--lumo-primary-color);
}

.exa-notification h1 {
    color: var(--lumo-primary-color);
    margin-top: var(--lumo-space-s);
}

.exa-banner h2 {
    margin-top: var(--lumo-space-s);
}

.exa-color-baseColor {
    color: var(--lumo-base-color);
}

.exa-color-contrast20 {
    color: var(--lumo-contrast-20pct);
}

.exa-color-green {
    color: var(--lumo-success-color);
}

.exa-color-red {
    color: var(--lumo-error-color);
}

.exa-color-yellow {
    /* in attesa della v24 */
    color: gold;
    /* color: var(--lumo-warning-color); */
}

.exa-bold {
    font-weight: bold;
}

.exa-light {
    font-weight: lighter;
}

.exa-small {
    font-size: var(--lumo-font-size-xs);
}

.exa-h1 {
    display: block;
    font-size: var(--lumo-font-size-xxl);
    margin-top: calc(var(--lumo-space-m) * 0.6);
    margin-bottom: calc(var(--lumo-space-m) * 0.6);
    font-weight: bold;
}

.exa-h2 {
    display: block;
    font-size: var(--lumo-font-size-xl);
    margin-top: calc(var(--lumo-space-m) * 0.8);
    margin-bottom: calc(var(--lumo-space-m) * 0.8);
    font-weight: bold;
}

.exa-h3 {
    display: block;
    font-size: var(--lumo-font-size-l);
    margin-top: var(--lumo-space-m);
    margin-bottom: var(--lumo-space-m);
    font-weight: bold;
}

.exa-tiny {
    width: 100%;
    font-size: var(--lumo-font-size-xxs);
}

.exa-prodotti-header {
    height: 10rem;
}

.exa-color-green {
    color: var(--lumo-success-color);
}

.exa-color-red {
    color: var(--lumo-error-color);
}

.exa-color-blue{
    color: var(--lumo-primary-color);
}

.exa-color-baseColor {
    color: var(--lumo-base-color);
}