@import url('home.css');
@import url('login.css');
@import url('category.css');
@import url('left_menu.css');
@import url('message-of-day.css');
@import url('report.css');
@import url('themes.css');

@font-face {
    font-display: swap;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../../font/roboto-condensed-v25-latin-regular.eot');
    src: url('../../font/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'),
    url('../../font/roboto-condensed-v25-latin-regular.woff2') format('woff2'),
    url('../../font/roboto-condensed-v25-latin-regular.woff') format('woff'),
    url('../../font/roboto-condensed-v25-latin-regular.ttf') format('truetype'),
    url('../../font/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('../../font/roboto-condensed-v25-latin-700.eot');
    src: url('../../font/roboto-condensed-v25-latin-700.eot?#iefix') format('embedded-opentype'),
    url('../../font/roboto-condensed-v25-latin-700.woff2') format('woff2'),
    url('../../font/roboto-condensed-v25-latin-700.woff') format('woff'),
    url('../../font/roboto-condensed-v25-latin-700.ttf') format('truetype'),
    url('../../font/roboto-condensed-v25-latin-700.svg#RobotoCondensed') format('svg');
}

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../../font/roboto-v30-latin-500.eot');
    src: url('../../font/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'),
    url('../../font/roboto-v30-latin-500.woff2') format('woff2'),
    url('../../font/roboto-v30-latin-500.woff') format('woff'),
    url('../../font/roboto-v30-latin-500.ttf') format('truetype'),
    url('../../font/roboto-v30-latin-500.svg#Roboto') format('svg');
}
@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../../font/roboto-v30-latin-700.eot');
    src: url('../../font/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'),
    url('../../font/roboto-v30-latin-700.woff2') format('woff2'),
    url('../../font/roboto-v30-latin-700.woff') format('woff'),
    url('../../font/roboto-v30-latin-700.ttf') format('truetype'),
    url('../../font/roboto-v30-latin-700.svg#Roboto') format('svg');
}

/* override webos default */
* {
    font-family: unset;
}

:root {
    --rem-base: 48;
    --font-2: calc(2 / var(--rem-base) * 1rem);
    --font-3: calc(3 / var(--rem-base) * 1rem);
    --font-4: calc(4 / var(--rem-base) * 1rem);
    --font-6: calc(6 / var(--rem-base) * 1rem);
    --font-8: calc(8 / var(--rem-base) * 1rem);
    --font-12: calc(12 / var(--rem-base) * 1rem);
    --font-15: calc(15 / var(--rem-base) * 1rem);
    --font-20: calc(20 / var(--rem-base) * 1rem);
    --font-24: calc(24 / var(--rem-base) * 1rem);
    --font-30: calc(30 / var(--rem-base) * 1rem);
    --font-32: calc(32 / var(--rem-base) * 1rem);
    --font-36: calc(36 / var(--rem-base) * 1rem);
    --font-40: calc(40 / var(--rem-base)  * 1rem);
    --font-45: calc(45 / var(--rem-base) * 1rem);
    --font-48: calc(48 / var(--rem-base) * 1rem);
    --font-50: calc(50 / var(--rem-base)  * 1rem);
    --font-52: calc(52 / var(--rem-base)  * 1rem);
    --font-56: calc(56 / var(--rem-base)  * 1rem);
    --font-60: calc(60 / var(--rem-base)  * 1rem);
    --font-63: calc(63 / var(--rem-base)  * 1rem);
    --font-80: calc(80 / var(--rem-base)  * 1rem);

    --white: #FCFDF5;
    --focus-color: var(--white);
    --focus-border-width: var(--font-6);
    --focus-border: var(--focus-border-width) solid var(--focus-color);
    --focus-box-shadow: 0 0 calc(11 / var(--rem-base * 1rem)) #FFFDEA77;

    --dark-blue: #365d63;
    --light-blue: #286e97;

    --card-shadow: 0 var(--font-3) var(--font-8) #33392780;
    --height-animation-duration-ms: 500ms;

    --title-font: 'Roboto Condensed';
    --secondary-font: 'Roboto';
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    color: var(--white);
    font-family: var(--title-font);
    background-color: #fff;
    overflow: hidden;
}

html {
    font-size: 9px;
}

.content-info {
    --bg: transparent linear-gradient(180deg, #2E4C6F 0%, #286E88 100%) 0% 0% no-repeat ;
    --subtitle-color: #B3D6E6;
}

.content-info-pages-button {
    --page-button-color: var(--white);
    --page-button-current-bg: #FCFDF5BF;
    --page-button-focus-bg: var(--focus-color);
}

.content-item {
    --bg: var(--dark-blue);
    --title-bg: transparent linear-gradient(180deg, #2E4C6F 0%, #217FA2 100%) 0% 0% no-repeat ;
    --title-bg-closed: transparent linear-gradient(180deg, #122943 0%, #124F65 100%) 0% 0% no-repeat ;
    --title-color-closed: #BFE0ED;
}

@media (min-width: 640px) {
    html {
        font-size: 16px;
    }
}

/* 'md': '768px', ipad mini portrait */
@media (min-width: 768px) {
    html {
        font-size: 20px;
    }
}

/* ipad portrait */
@media (min-width: 810px) {
    html {
        font-size: 21px;
    }
}

/* 'lg': '1024px', ipad mini */
@media (min-width: 1024px) {
    html {
        font-size: 24px;
    }
}

/* ipad */
@media (min-width: 1080px) {
}

/* 'xl': '1280px', */
@media (min-width: 1280px) {
}

/* '2xl': '1536px', */
@media (min-width: 1536px) {
    html {
        font-size: 32px;
    }
}

/* 'F HD': '1920px', */
@media (min-width: 1920px) {
    html {
        font-size: 40px;
        --height-animation-duration-ms: 400ms;
    }
}

/* '1440p': '2560px', */
@media (min-width: 2560px) {
    html {
        font-size: 54px;
        --height-animation-duration-ms: 300ms;
    }
}

/* '4K': '3840', */
@media (min-width: 3840px) {
    html {
        font-size: 72px;
        --height-animation-duration-ms: 200ms;
    }
}