:root {

    --lumo-primary-text-color: rgb(43, 2, 153);
    --lumo-primary-color-50pct: rgba(43, 2, 153, 0.5);
    --lumo-primary-color-10pct: rgba(43, 2, 153, 0.1);
    --lumo-primary-color: #ECBD31;
    --lumo-secondary-color:#002d56;
    --lumo-tertiary-color:#FFA400;
    --lumo-base-light: #faf6da;
    --lumo-base-dark:#5D737E;

    --app-bar-height: 60px;
    --app-bar-height-s: 60px;
    --app-bar-wrapper-color:#2F4858;
    --login-background: url('images/login-bg.jpg');

    --navi-drawer-width: calc(var(--lumo-size-m) * 7);
    --navi-drawer-rail-width: calc(var(--lumo-size-m) * 1.75);
    --navi-item-indentation: calc(var(--lumo-icon-size-s) + var(--lumo-space-l));

    --details-drawer-width: calc(var(--lumo-size-m) * 11);

    --transition-duration-s: 160ms;
    --transition-duration-m: 240ms;
    --transition-duration-l: 320ms;

    /* Responsive sizing and spacing */
    --lumo-space-r-m: var(--lumo-space-m);
    --lumo-space-r-l: var(--lumo-space-l);
    --lumo-space-r-x: var(--lumo-space-l);
    --lumo-space-wide-r-m: var(--lumo-space-wide-m);
    --lumo-space-wide-r-l: var(--lumo-space-wide-l);
}

@media (max-width: 479px) {
    :root {
        --lumo-space-r-x: 0;
    }
}

@media (min-width: 480px) and (max-width: 1023px) {
    :root {
        --lumo-space-r-x: var(--lumo-space-m);
    }
}

@media (max-width: 1023px) {
    :root {
        --lumo-space-r-m: var(--lumo-space-s);
        --lumo-space-r-l: var(--lumo-space-m);
        --lumo-space-wide-r-m: var(--lumo-space-wide-s);
        --lumo-space-wide-r-l: var(--lumo-space-wide-m);
    }
}

html,
body {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.root {
    background-color: var(--lumo-contrast-5pct);
}

.app-header-outer,
.app-footer-outer {
    z-index: 3;
}

vaadin-grid-cell-content {
    text-overflow: ellipsis;
}

vaadin-text-field {
    align-self: auto;
}