:root {
    --lumo-font-size-xxxl: 1.5rem;
}

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

h1 {
    font-size: 1.5rem !important;
}

#outlet {
    overflow: auto;
}

{
    padding: var(--lumo-space-l);
}

.card {
    padding: var(--lumo-space-l);
    border-radius: var(--lumo-border-radius-l);
    background: radial-gradient(circle at 25% 0%, hsl(0 0% 100% / 0.9), transparent 50%), hsl(0 0% 98% / 0.7);
    background-origin: border-box;
    box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.06), 0 0 0 1px hsl(0 0% 0% / 0.06);
}

vaadin-date-time-picker vaadin-date-picker {
    --vaadin-field-default-width: 10em;
}

vaadin-date-time-picker vaadin-time-picker {
    --vaadin-field-default-width: 6em;
}

vaadin-select.state-select {
    padding: 0;
}

/* dark theme */
[theme~=dark] .card {
    background: radial-gradient(circle at 25% 0%, hsl(0 0% 100% / 0.1), transparent 50%), hsl(var(--primary-h) calc(var(--primary-s) / 5) 20% / 0.5);
    background-origin: border-box;
}

@media screen and (max-width: 1200px) {
    .view-content {
        flex-wrap: wrap;
    }
}

[theme~=dark], html[theme~=dark] {
    background: black !important;
}


vaadin-side-nav-item::part(link) {
    padding-left: 20px;
}