html {
    --lumo-base-color: white;
    --lumo-primary-text-color: rgb(72, 73, 81);
    --lumo-primary-color-50pct: rgba(255, 162, 0, 0.5);
    --lumo-primary-color-10pct: rgba(255, 162, 0, 0.1);
    --lumo-primary-color: rgb(247, 167, 18);
    --lumo-primary-contrast-color: rgb(72, 73, 81);
    --lumo-shade-5pct: rgba(16, 16, 16, 0.05);
    --lumo-shade-10pct: rgba(16, 16, 16, 0.1);
    --lumo-shade-20pct: rgba(16, 16, 16, 0.2);
    --lumo-shade-30pct: rgba(16, 16, 16, 0.3);
    --lumo-shade-40pct: rgba(16, 16, 16, 0.4);
    --lumo-shade-50pct: rgba(16, 16, 16, 0.5);
    --lumo-shade-60pct: rgba(16, 16, 16, 0.6);
    --lumo-shade-70pct: rgba(16, 16, 16, 0.7);
    --lumo-shade-80pct: rgba(16, 16, 16, 0.8);
    --lumo-shade-90pct: rgba(16, 16, 16, 0.9);
    --lumo-shade: rgb(16, 16, 16);
    --lumo-tint-5pct: rgba(181, 181, 181, 0.05);
    --lumo-tint-10pct: rgba(181, 181, 181, 0.1);
    --lumo-tint-20pct: rgba(181, 181, 181, 0.2);
    --lumo-tint-30pct: rgba(181, 181, 181, 0.3);
    --lumo-tint-40pct: rgba(181, 181, 181, 0.4);
    --lumo-tint-50pct: rgba(181, 181, 181, 0.5);
    --lumo-tint-60pct: rgba(181, 181, 181, 0.6);
    --lumo-tint-70pct: rgba(181, 181, 181, 0.7);
    --lumo-tint-80pct: rgba(181, 181, 181, 0.8);
    --lumo-tint-90pct: rgba(181, 181, 181, 0.9);
    --lumo-tint: rgb(181, 181, 181);
}

input:-webkit-autofill {
    background: var(--lumo-tint-5pct);
}

iframe {
    border: none;
}

a[highlight] {
    color: rgb(239, 239, 239);
    background-color: var(--lumo-primary-contrast-color);
}

a[highlight] > vaadin-icon {
    color: var(--lumo-primary-color);
}


vaadin-side-nav-item[current] > vaadin-icon {
    color: rgb(245, 157, 18);
}

vaadin-side-nav-item {
    color: rgb(72, 73, 81);
}

vaadin-side-nav-item > vaadin-icon {
    color: rgb(72, 73, 81);
}

vaadin-side-nav-item[current]::part(content) {
    color: rgb(239, 239, 239);
}

vaadin-app-layout::part(drawer) {
    background-color: rgb(178, 178, 178);
}

vaadin-side-nav-item[current] {
    background-color: rgb(72, 73, 81);
}

.grid-image {
    min-width: 40px;
    height: 40px;
    padding-top: 5px;
}

a {
    color: var(--lumo-primary-color);
}

.red {
    color: red;
}

.red-60pct {
    color: rgba(255, 0, 0, .6);
}

.bg-red {
    background-color: red;
}

.bg-red-60pct {
    background-color: rgba(255, 0, 0, .6);
}

.lightblue {
    color: lightblue;
}

.bg-lightblue {
    background-color: lightblue;
}

.purple {
    color: purple;
}

.bg-purple {
    background-color: purple;
}

.green {
    color: green;
}

.green-50pct {
    color: rgba(0, 128, 0, .5);
}

.bg-green {
    background-color: green;
}

.bg-green-50pct {
    background-color: rgba(0, 128, 0, .5);
}

.blue {
    color: blue;
}

.bg-blue {
    background-color: blue;
}

.grey {
    color: gray;
}

.bg-grey {
    background-color: gray;
}

.orange {
    color: orange;
}

.orange-60pct {
    color: rgba(255, 165, 0, .6);
}

.bg-orange {
    background-color: orange;
}

.bg-orange-60pct {
    background-color: rgba(255, 165, 0, .6);
}

.yellow {
    color: yellow;
}

.bg-yellow {
    background-color: yellow;
}

.grey {
    color: grey;
}

h3 {
    margin: 0;
}

.download span {
    padding: 5px;
}

.download vaadin-icon {
    height: 16px;
    width: 16px;
}

vaadin-login-form-wrapper::part(footer) {
    font-size: var(--lumo-font-size-xxl);
    text-align: center;
}

vaadin-grid.vacation-plan::part(body-cell) {
    text-align: center;
}

.tile {
    margin: 42px 5px 5px 5px;
    width: 523px;
    height: 451px;
    padding-top: 10px;

    border-radius: 4px;
    border: 1px solid #d9d9d9;
    -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
    display: inline-block;
    vertical-align: top;
    overflow: scroll;
}

vaadin-details.error vaadin-details-summary {
    background-color: var(--lumo-error-color);
}