@import url('./main-layout.css');
@import url('./geoman.css');
@import url('./msgstyles.css');
@import url('./notifications.css');
@import url('./tags.css');
@import url('./views/master-detail-view.css');
html {


}

[theme~="dark"] {
    --lumo-base-color: hsl(230, 13%, 14%);
}



[theme~="forest"] {

    --lumo-font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
    --lumo-font-size: 1rem;
    --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-border-radius: 0.5em;
    --lumo-size-xl: 3rem;
    --lumo-size-l: 2.5rem;
    --lumo-size-m: 2rem;
    --lumo-size-s: 1.75rem;
    --lumo-size-xs: 1.5rem;
    --lumo-space-xl: 1.875rem;
    --lumo-space-l: 1.25rem;
    --lumo-space-m: 0.625rem;
    --lumo-space-s: 0.3125rem;
    --lumo-space-xs: 0.1875rem;

    --lumo-base-color: #f2f6f2;
    --lumo-tint-5pct: rgba(10, 127, 42, 0.05);
    --lumo-tint-10pct: rgba(10, 127, 42, 0.1);
    --lumo-tint-20pct: rgba(10, 127, 42, 0.2);
    --lumo-tint-30pct: rgba(10, 127, 42, 0.3);
    --lumo-tint-40pct: rgba(10, 127, 42, 0.4);
    --lumo-tint-50pct: rgba(10, 127, 42, 0.5);
    --lumo-tint-60pct: rgba(10, 127, 42, 0.6);
    --lumo-tint-70pct: rgba(10, 127, 42, 0.7);
    --lumo-tint-80pct: rgba(10, 127, 42, 0.8);
    --lumo-tint-90pct: rgba(10, 127, 42, 0.9);
    --lumo-tint: #0a7f2a;
    --lumo-shade-5pct: rgba(0, 0, 0, 0.05);
    --lumo-shade-10pct: rgba(0, 0, 0, 0.1);
    --lumo-shade-20pct: rgba(0, 0, 0, 0.2);
    --lumo-shade-30pct: rgba(0, 0, 0, 0.3);
    --lumo-shade-40pct: rgba(0, 0, 0, 0.4);
    --lumo-shade-50pct: rgba(0, 0, 0, 0.5);
    --lumo-shade-60pct: rgba(0, 0, 0, 0.6);
    --lumo-shade-70pct: rgba(0, 0, 0, 0.7);
    --lumo-shade-80pct: rgba(0, 0, 0, 0.8);
    --lumo-shade-90pct: rgba(0, 0, 0, 0.9);
    --lumo-shade: hsl(128, 92%, 0%);
    --lumo-primary-text-color: rgb(0, 71, 21);
    --lumo-primary-color-50pct: rgba(0, 71, 21, 0.5);
    --lumo-primary-color-10pct: rgba(0, 71, 21, 0.1);
    --lumo-primary-color: hsl(138, 100%, 14%);
    --lumo-primary-contrast-color: #ffffff;
    --lumo-error-contrast-color: #fcfcfc;
    --lumo-success-contrast-color: #ffffff;
}

[theme~="green"] {
    --lumo-base-color: #f2f6f2;
    --lumo-tint-5pct: rgba(10, 127, 42, 0.05);
    --lumo-tint-10pct: rgba(10, 127, 42, 0.1);
    --lumo-tint-20pct: rgba(10, 127, 42, 0.2);
    --lumo-tint-30pct: rgba(10, 127, 42, 0.3);
    --lumo-tint-40pct: rgba(10, 127, 42, 0.4);
    --lumo-tint-50pct: rgba(10, 127, 42, 0.5);
    --lumo-tint-60pct: rgba(10, 127, 42, 0.6);
    --lumo-tint-70pct: rgba(10, 127, 42, 0.7);
    --lumo-tint-80pct: rgba(10, 127, 42, 0.8);
    --lumo-tint-90pct: rgba(10, 127, 42, 0.9);
    --lumo-tint: #0a7f2a;
    --lumo-shade-5pct: rgba(0, 0, 0, 0.05);
    --lumo-shade-10pct: rgba(0, 0, 0, 0.1);
    --lumo-shade-20pct: rgba(0, 0, 0, 0.2);
    --lumo-shade-30pct: rgba(0, 0, 0, 0.3);
    --lumo-shade-40pct: rgba(0, 0, 0, 0.4);
    --lumo-shade-50pct: rgba(0, 0, 0, 0.5);
    --lumo-shade-60pct: rgba(0, 0, 0, 0.6);
    --lumo-shade-70pct: rgba(0, 0, 0, 0.7);
    --lumo-shade-80pct: rgba(0, 0, 0, 0.8);
    --lumo-shade-90pct: rgba(0, 0, 0, 0.9);
    --lumo-shade: hsl(128, 92%, 0%);
    --lumo-primary-text-color: rgb(0, 71, 21);
    --lumo-primary-color-50pct: rgba(0, 71, 21, 0.5);
    --lumo-primary-color-10pct: rgba(0, 71, 21, 0.1);
    --lumo-primary-color: hsl(138, 100%, 14%);
    --lumo-primary-contrast-color: #ffffff;
    --lumo-error-contrast-color: #fcfcfc;
    --lumo-success-contrast-color: #ffffff;
}



[theme~="sand"] {
    --lumo-tint-5pct: rgba(244, 238, 225, 0.05);
    --lumo-tint-10pct: rgba(244, 238, 225, 0.1);
    --lumo-tint-20pct: rgba(244, 238, 225, 0.2);
    --lumo-tint-30pct: rgba(244, 238, 225, 0.3);
    --lumo-tint-40pct: rgba(244, 238, 225, 0.4);
    --lumo-tint-50pct: rgba(244, 238, 225, 0.5);
    --lumo-tint-60pct: rgba(244, 238, 225, 0.6);
    --lumo-tint-70pct: rgba(244, 238, 225, 0.7);
    --lumo-tint-80pct: rgba(244, 238, 225, 0.8);
    --lumo-tint-90pct: rgba(244, 238, 225, 0.9);
    --lumo-shade-5pct: rgba(44, 38, 22, 0.05);
    --lumo-shade-10pct: rgba(44, 38, 22, 0.1);
    --lumo-shade-20pct: rgba(44, 38, 22, 0.2);
    --lumo-shade-30pct: rgba(44, 38, 22, 0.3);
    --lumo-shade-40pct: rgba(44, 38, 22, 0.4);
    --lumo-shade-50pct: rgba(44, 38, 22, 0.5);
    --lumo-shade-60pct: rgba(44, 38, 22, 0.6);
    --lumo-shade-70pct: rgba(44, 38, 22, 0.7);
    --lumo-shade-80pct: rgba(44, 38, 22, 0.8);
    --lumo-shade-90pct: rgba(44, 38, 22, 0.9);
    --lumo-primary-text-color: rgb(163, 120, 20);
    --lumo-primary-color-50pct: rgba(163, 120, 20, 0.5);
    --lumo-primary-color-10pct: rgba(163, 120, 20, 0.1);
    --lumo-error-text-color: rgb(237, 127, 151);
    --lumo-error-color-50pct: rgba(237, 127, 151, 0.5);
    --lumo-error-color-10pct: rgba(237, 127, 151, 0.1);
    --lumo-success-text-color: rgb(84, 222, 110);
    --lumo-success-color-50pct: rgba(84, 222, 110, 0.5);
    --lumo-success-color-10pct: rgba(84, 222, 110, 0.1);
    --lumo-tint: #f4eee1;
    --lumo-shade: hsl(42, 33%, 13%);
    --lumo-primary-color: #a37814;
    --lumo-error-color: #7fede4;
    --lumo-success-color: #54DE6E;
    --lumo-header-text-color: #b7830b;

}

#vaadinLoginFormWrapper
{
    background: linear-gradient(var(--lumo-shade-20pct), var(--lumo-shade-20pct));
}

.login-view {
    background:
            /*linear-gradient(45deg, #1de099, #1dc8cd),*/
            url("./background.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.login-form {
    width: 340px;
    background: #ffffff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 8px;
}

.login-form-button {
    width: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #31a800;
}

.login-form-input {
    width: 300px;
    height: 24px;
    font-size: 14px;
    color: #000000;
}

.login-form h2 {
    width: 270px;
    font-size: 24px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 0.83;
    letter-spacing: -0.4px;
    text-align: left;
    color: #0055B8;
    margin-left: -30px;
    margin-top: 20px;
}