/* Style, ktore sa zawsze dolaczane do root strony html */

@import url('./_calculationweb_imports.css');

/* Poppins Regular */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: 400; /* Normal */
    font-style: normal;
}

/* Poppins Italic */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-Italic.ttf') format('truetype');
    font-weight: 400; /* Normal */
    font-style: italic;
}

/* Poppins Light */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

/* Poppins Light Italic */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: italic;
}

/* Poppins SemiBold */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600; /* SemiBold */
    font-style: normal;
}

/* Poppins SemiBold Italic */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600; /* SemiBold */
    font-style: italic;
}

/* Poppins Bold */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

/* Poppins Bold Italic */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: italic;
}

/* Poppins ExtraBold */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800; /* ExtraBold */
    font-style: normal;
}

/* Poppins ExtraBold Italic */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800; /* ExtraBold */
    font-style: italic;
}

/* Poppins Thin */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-Thin.ttf') format('truetype');
    font-weight: 100; /* Thin */
    font-style: normal;
}

/* Poppins Thin Italic */
@font-face {
    font-family: 'Poppins';
    src: url('./font/poppins/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100; /* Thin */
    font-style: italic;
}

/*
 * Rozmiary font-ow w aplikacji:
 *
 *   XXXXS=10
 *   XXXS=11
 *   XXS=12 (vaadin)
 *   XS=13 (vaadin)
 *   S=14 (vaadin)
 *   SM=15
 *   M=16 (vaadin)
 *   ML=17
 *   L=18 (vaadin)
 *   LL=20
 *   XL=22 (vaadin)
 *   XLL=24
 *   XXL=26 (vaadin)
 *   XXLL=28
 *   XXXL=30
 *   XXXXL=34
 */

html {
    --lumo-clickable-cursor: pointer;
    --lumo-required-field-indicator: "●";

    --lumo-size-xl: 2.25rem;
    --lumo-size-l: 2rem;
    --lumo-size-m: 1.75rem;
    --lumo-size-s: 1.5rem;
    --lumo-size-xs: 1.25rem;

    --lumo-font-size: 0.9375rem;

    --lumo-font-size-xxl: 1.625rem;
    --lumo-font-size-xl: 1.375rem;
    --lumo-font-size-l: 1.125rem;
    --lumo-font-size-m: 1rem;
    --lumo-font-size-s: 0.875rem;
    --lumo-font-size-xs: 0.8125rem;
    --lumo-font-size-xxs: 0.75rem;

    --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-icon-size-s: 1.25rem;
    --lumo-icon-size-m: 1.5rem;
    --lumo-icon-size-l: 2.25rem;

    /**** portalowe ****/
    --lumo-size-xxl: 2.5rem;
    --lumo-size-sm: 1.6rem;
    --lumo-size-xxs: 1rem;
    --lumo-size-xxxs: 0.85rem;

    --lumo-font-size-xxxxl: 2.125rem;
    --lumo-font-size-xxxl: 1.875rem;
    --lumo-font-size-xxll: 1.75rem;
    --lumo-font-size-xll: 1.5rem;
    --lumo-font-size-ll: 1.25rem;
    --lumo-font-size-ml: 1.0625rem;
    --lumo-font-size-sm: 0.9375rem;
    --lumo-font-size-xxxs: 0.6875rem;
    --lumo-font-size-xxxxs: 0.625rem;

    --lumo-space-xxxxl: 4.5rem;
    --lumo-space-xxxl: 3.5rem;
    --lumo-space-xxl: 2.5rem;
    --lumo-space-ll: 1.556rem;
    --lumo-space-ml: 0.9375rem;
    --lumo-space-sm: 0.5rem;
    --lumo-space-xxs: 0.1rem;

    --lumo-button-size: var(--lumo-size-m);

    --lumo-line-height-s: 1.375;

    --lumo-shade: hsl(342, 38%, 5%);
    --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.5);

    --lumo-header-text-color: hsl(214, 35%, 15%);
    --lumo-body-text-color: var(--lumo-shade);
    --lumo-primary-text-color: hsl(214, 100%, 70%);
    --lumo-secondary-text-color: hsla(214, 42%, 18%, 0.72);

    --lumo-contrast-5pct: hsla(214, 61%, 25%, 0.05);
    --lumo-contrast-10pct: hsla(214, 57%, 24%, 0.1);
    --lumo-contrast-20pct: hsla(214, 53%, 23%, 0.16);
    --lumo-contrast-30pct: hsla(214, 50%, 22%, 0.26);
    --lumo-contrast-40pct: hsla(214, 47%, 21%, 0.38);
    --lumo-contrast-50pct: hsla(214, 45%, 20%, 0.5);
    --lumo-contrast-60pct: hsla(214, 43%, 19%, 0.61);
    --lumo-contrast-70pct: hsla(214, 42%, 18%, 0.72);
    --lumo-contrast-80pct: hsla(214, 41%, 17%, 0.83);
    --lumo-contrast-90pct: hsla(214, 40%, 16%, 0.94);
    --lumo-contrast: hsl(214, 35%, 15%);

    --lumo-border-radius: 0.25em;
    --lumo-border-radius-s: 0.25em;
    --lumo-border-radius-m: 0.25em;
    --lumo-border-radius-l: 0.5em;

    --portal-dark-color: #12080b;

    --portal-field-font-size: var(--lumo-font-size-sm);

    --lumo-base-color: #FFF;
    --lumo-error-contrast-color: #FFF;

    --lumo-tertiary-text-color: hsla(214, 45%, 20%, 0.5);
    --lumo-primary-contrast-color: #FFF;
    --lumo-success-contrast-color: #FFF;

    --lumo-line-height-m: 1.625;
    --lumo-line-height-s: 1.375;
    --lumo-line-height-xs: 1.25;

    --lumo-space-wide-xs: calc( 0.25rem / 2)  0.25rem;
    --lumo-space-wide-s: calc( 0.5rem / 2)  0.5rem;
    --lumo-space-wide-m: calc( 1rem / 2)  1rem;
    --lumo-space-wide-l: calc( 1.5rem / 2)  1.5rem;
    --lumo-space-wide-xl: calc( 2.5rem / 2)  2.5rem;

    --lumo-space-tall-xs: 0.25rem calc( 0.25rem / 2);
    --lumo-space-tall-s: 0.5rem calc( 0.5rem / 2);
    --lumo-space-tall-m: 1rem calc( 1rem / 2);
    --lumo-space-tall-l: 1.5rem calc( 1.5rem / 2);
    --lumo-space-tall-xl: 2.5rem calc( 2.5rem / 2);
}

html {
    letter-spacing: 0.015rem;

    --lumo-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --lumo-font-family-vaadin: 'Poppins', -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

    --lumo-shade: hsl(342, 38%, 5%);
    --lumo-shade-5pct: hsla(342, 38%, 5%, 0.05);
    --lumo-shade-10pct: hsla(342, 38%, 5%, 0.1);
    --lumo-shade-20pct: hsla(342, 38%, 5%, 0.2);
    --lumo-shade-30pct: hsla(342, 38%, 5%, 0.3);
    --lumo-shade-40pct: hsla(342, 38%, 5%, 0.4);
    --lumo-shade-50pct: hsla(342, 38%, 5%, 0.5);
    --lumo-shade-60pct: hsla(342, 38%, 5%, 0.6);
    --lumo-shade-70pct: hsla(342, 38%, 5%, 0.7);
    --lumo-shade-80pct: hsla(342, 38%, 5%, 0.8);
    --lumo-shade-90pct: hsla(342, 38%, 5%, 0.9);

    --lumo-body-text-color: var(--lumo-shade);
    --lumo-secondary-text-color: var(--lumo-contrast-60pct);
    --lumo-disabled-text-color: var(--lumo-contrast-40pct);

    --lumo-primary-color: rgb(13, 157, 216);
    --lumo-primary-color-10pct: rgba(13, 157, 216, 0.1);
    --lumo-primary-color-30pct: rgba(13, 157, 216, 0.3);
    --lumo-primary-color-50pct: rgba(13, 157, 216, 0.5);
    --lumo-primary-text-color: rgb(13, 157, 216);

    --lumo-success-color: rgb(85, 184, 126);
    --lumo-success-color-10pct: rgba(85, 184, 126, 0.1);
    --lumo-success-color-30pct: rgba(85, 184, 126, 0.3);
    --lumo-success-color-50pct: rgba(85, 184, 126, 0.5);
    --lumo-success-text-color: rgb(47, 151, 90);

    --lumo-error-color: rgb(211, 87, 82);
    --lumo-error-color-10pct: rgba(211, 87, 82, 0.1);
    --lumo-error-color-30pct: rgba(211, 87, 82, 0.3);
    --lumo-error-color-50pct: rgba(211, 87, 82, 0.5);
    --lumo-error-text-color: rgb(217, 45, 36);

    --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
    --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
    --lumo-box-shadow-m: 0 1px 4px -1px var(--lumo-shade-50pct);
    --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
    --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-30pct);
    --lumo-box-shadow-xxs: 0 1px 3px -1px var(--lumo-shade-20pct);

    /**** portalowe ****/
    --portal-accent-color: rgb(30, 175, 240);
    --portal-accent-color-10pct: rgba(30, 175, 240, 0.1);
    --portal-accent-color-30pct: rgba(30, 175, 240, 0.3);
    --portal-accent-color-50pct: rgba(30, 175, 240, 0.5);

    --portal-background-color: #f7f7f7;
    --portal-background-light-color: #ffffff;
    --portal-background-dark-color: #eaeaea;

    --portal-menu-color: #ffffff;
    --portal-dark-color: #12080b;
    --portal-input-field-color: #ffffff;
    --portal-input-line-color: var(--portal-dark-color);

    --portal-field-font-size: var(--lumo-font-size-sm);
    --portal-field-font-weight: 500;

    --portal-label-font-size: var(--lumo-font-size-s);
    --portal-label-font-family: var(--lumo-font-family);
    --portal-label-font-weight: 500;
    --portal-label-color: var(--lumo-secondary-text-color);

    --portal-grid-label-font-size: var(--lumo-font-size-s);
    --portal-grid-label-font-family: var(--lumo-font-family);
    --portal-grid-label-font-weight: 200;
    --portal-grid-label-color: var(--lumo-body-text-color);

    --portal-text-shadow-s: 0px 0px 1px rgba(0,0,0,0.7);
    --portal-text-shadow-m: 1px 1px 1px rgba(0,0,0,0.7);
    --portal-text-shadow-l: 1.5px 1.5px 2px rgba(0,0,0,0.7);

    --lumo-primary-dark-color-10pct: rgb(0, 139, 190);
    --lumo-primary-dark-color-30pct: rgb(0, 120, 165);
    --lumo-primary-dark-color-50pct: rgb(0, 100, 147);

    --lumo-shade-2pct: hsla(342, 38%, 5%, 0.03);
    --lumo-contrast-2pct: var(--lumo-shade-2pct);

    --portal-warning-color: rgb(228, 142, 50);
    --portal-warning-color-10pct: rgba(228, 142, 50, 0.1);
    --portal-warning-color-30pct: rgba(228, 142, 50, 0.3);
    --portal-warning-color-50pct: rgba(228, 142, 50, 0.5);
    --portal-warning-text-color: rgb(221, 125, 19);
    --portal-warning-contrast-color: #FFF;

    --portal-border-extralight-s: 1px solid var(--lumo-shade-5pct);
    --portal-border-extralight-m: 2px solid var(--lumo-shade-5pct);
    --portal-border-extralight-l: 3px solid var(--lumo-shade-5pct);
    --portal-border-light-s: 1px solid var(--lumo-shade-10pct);
    --portal-border-light-m: 2px solid var(--lumo-shade-10pct);
    --portal-border-light-l: 3px solid var(--lumo-shade-10pct);
    --portal-border-normal-s: 1px solid var(--lumo-shade-30pct);
    --portal-border-normal-m: 2px solid var(--lumo-shade-30pct);
    --portal-border-normal-l: 3px solid var(--lumo-shade-30pct);
    --portal-border-dark-s: 1px solid var(--lumo-shade-50pct);
    --portal-border-dark-m: 2px solid var(--lumo-shade-50pct);
    --portal-border-dark-l: 3px solid var(--lumo-shade-50pct);
    --portal-border-black-s: 1px solid var(--lumo-shade);
    --portal-border-black-m: 2px solid var(--lumo-shade);
    --portal-border-black-l: 3px solid var(--lumo-shade);
    --portal-border-primary-s: 1px solid var(--lumo-primary-color);
    --portal-border-primary-m: 2px solid var(--lumo-primary-color);
    --portal-border-primary-l: 3px solid var(--lumo-primary-color);
    --portal-border-success-s: 1px solid var(--lumo-success-color);
    --portal-border-success-m: 2px solid var(--lumo-success-color);
    --portal-border-success-l: 3px solid var(--lumo-success-color);
    --portal-border-error-s: 1px solid var(--lumo-error-color);
    --portal-border-error-m: 2px solid var(--lumo-error-color);
    --portal-border-error-l: 3px solid var(--lumo-error-color);
    --portal-border-warning-s: 1px solid var(--portal-warning-color);
    --portal-border-warning-m: 2px solid var(--portal-warning-color);
    --portal-border-warning-l: 3px solid var(--portal-warning-color);

    --portal-focus-box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
    --portal-focus-box-shadow-inset: inset 0 0 0 2px var(--lumo-primary-color-50pct);

}