/*@import 'https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap';
*/
/* fira-sans-regular - latin */

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

:root {
    /* Style */
    --background-logo: url('/images/logo/S-flat.svg');
    /* Main Layout */
    --appBar-height: 100px;
    --modules-margin: 15px;
    --modules-padding: 8px;
    --content-height: calc(100dvh - (var(--appBar-height) + (var(--modules-margin) * 3)));
    --content-height-mobile: calc(100dvh - var(--appBar-height));
    --modules-rounded: 0.5rem;
    --modules-elevation: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
    /* shadow ring 👇 */
    0 0 0 1px hsla(0, 0%, 0%, 0.05),
    /* multiple soft shadows 👇 */
    0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
    --selected-modules-elevation: inset 0 0 0.5px 2px var(--kendo-color-secondary-active),
    /* shadow ring 👇 */
    0 0 0 1px hsla(0, 0%, 0%, 0.05),
    /* multiple soft shadows 👇 */
    0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), 0 3.5px 6px hsla(0, 0%, 0%, 0.09);
    --modules-padding-bottom: 5px;
    --kendo-color-base-hover: color-mix(in srgb, var(--kendo-color-on-app-surface) 8%, transparent);
    /* Typography */
    --kendo-font-family: 'Inter', 'Fira Sans', sans-serif; /* 'SF Pro Display Regular' */
    --kendo-font-family-light: 'Inter', 'Fira Sans', sans-serif; /* 'SF Pro Display Light' */
    --kendo-font-family-bold: 'Inter Bold', 'Fira Sans', sans-serif; /* 'SF Pro Display Bold' */
    --kendo-font-family-monospace: 'Inter', 'Fira Mono', monospace; /* 'SF Mono Regular'*/
    --kendo-font-size-xs: 10px;
    --kendo-font-size-sm: 12px;
    --kendo-font-size: 14px;
    --kendo-font-size-md: var(--kendo-font-size, inherit);
    --kendo-font-size-lg: 16px;
    --kendo-font-size-xl: 20px;
    --kendo-line-height-xs: 1.2;
    --kendo-line-height-sm: 1.25;
    --kendo-line-height-md: 1.42;
    --kendo-line-height-lg: 1.5;
    --kendo-h1-font-size: 56px;
    --kendo-h2-font-size: 42px;
    --kendo-h3-font-size: 35px;
    --kendo-h4-font-size: 28px;
    --kendo-h5-font-size: 21px;
    --kendo-h6-font-size: 14px;
    --kendo-h1-line-height: calc((var(--kendo-font-size) * 4) * 1.25);
    --kendo-h2-line-height: calc((var(--kendo-font-size) * 3) * 1.2);
    --kendo-h3-line-height: calc((var(--kendo-font-size) * 2.5) * 1.2);
    --kendo-h4-line-height: calc((var(--kendo-font-size) * 2) * 1.2);
    --kendo-h5-line-height: calc((var(--kendo-font-size) * 1.5) * 1.25);
    --kendo-h6-line-height: calc(var(--kendo-font-size) * 1.25);
    /*--kendo-font-weight-normal: 200;*/
    --kendo-h1-font-weight: 400;
    --kendo-h2-font-weight: 400;
    --kendo-h3-font-weight: 400;
    --kendo-h4-font-weight: 700;
    --kendo-h5-font-weight: 700;
    --kendo-h6-font-weight: 700;
    --kendo-h1-font-family: var(--kendo-font-family);
    --kendo-h2-font-family: var(--kendo-font-family);
    --kendo-h3-font-family: var(--kendo-font-family);
    --kendo-h4-font-family: var(--kendo-font-family);
    --kendo-h5-font-family: var(--kendo-font-family);
    --kendo-h6-font-family: var(--kendo-font-family);
    /* Border radius */
    --kendo-border-radius-xs: 1px;
    --kendo-border-radius-sm: 2px;
    --kendo-border-radius-md: 4px;
    --kendo-border-radius-lg: 8px;
    --kendo-border-radius-xl: 16px;
    --kendo-border-radius-xxl: 32px;
    --kendo-border-radius-xxxl: 64px;
    --kendo-border-radius-full: 9999px;
}

@media only screen and (max-width: 800px) {
    :root {
        --kendo-font-size: 16px;
    }
}

/*@media only screen and (max-height: 800px) {

    :root {
        --content-height: calc(100dvh - (var(--appBar-height) + (var(--modules-margin) * 3)));
        --content-height-mobile: calc(100dvh - var(--appBar-height));
    }
}

@media only screen and (max-height: 800px) and (max-width: 800px) {
    :root {
        --appBar-height: 50px;
    }
}*/

@media only screen and (max-width: 800px) {
    :root {
        --appBar-height: 50px;
        --content-height: calc(100dvh - (var(--appBar-height) + (var(--modules-margin) * 3)));
        --content-height-mobile: calc(100dvh - var(--appBar-height));
    }
}