@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito-Regular.woff2') format('woff2'), url('fonts/Nunito-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito-SemiBold.woff2') format('woff2'), url('fonts/Nunito-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito-Bold.woff2') format('woff2'), url('fonts/Nunito-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.woff2') format('woff2'), url('fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html,
body,
mezasu-platform {
    display: block;
    height: 100%;
    min-width: 320px;
}

html,
body,
mezasu-platform-browser-plugin,
mezasu-platform {
    /* Color Scheme */
    --Blue1: #0091FF;
    --Orange: #FFBA0A;
    --TextOnBlue1: #ffffff;
    --Blue2: #7DB1FF;
    --Blue3: #0061AB;
    --Green: #00BA00;
    --Gray1: #DEDEDE;
    --Gray2: #c6c6c6;
    --LoginInputBackground: #EDEDED;
    --FontGray1: #666666;
    --FontGray2: #808080;
    --FontGray3: #cccccc;
    --FontGray4: #333333;
    --WordStatus1: #7DB1FF;
    --WordStatus2: #FF9A7A;
    --WordStatus3: #FFC27D;
    --WordStatus4: #FFDD85;
    --WordStatus5: #FFEDAD;
    --WordStatus6: #BBFFBA;
    --formBoxBackground: #e6e6e6;
    --formBoxBackground2: #f5f5f5;
    /* Read styles */
    --textItemFontSize: 20px;
    --textItemFontColor: #000000;
    --textItemHeight: 24px;
    --textItemRadius: 5px;
    --textBackground: #ffffff;
    --textBackgroundDark: #1a1a1a;
    /* Dark theme */
    --darkBodyBackground: #333333;
    --darkPagerBarBackground: #FFBA0A;
    /* Icons */
    --iconSize: 24px;
    --iconColor: #666666;
    --iconBackgroundColor: #ffffff;
    /* 




        Theme 2021 


    */
    --main-font: Nunito, sans-serif;
    --sapFontFamily: var(--main-font);
    --inner-max-width: 960px;
    --desktop-content-width: 960px;
    --desktop-narrow-container-width: 450px;
    font-family: var( --main-font);
    --nav-left: 0;
    /* set to auto to center top header nav */
    --nav-width: 100%;
    /* set to desktop-narrow-container-width in review and add card */
    --nav-top: 0;
    /* 
        Theme colors 
    */
    --blue: #0091FF;
    --deep-steel-blue: #294256;
    --blue2: #7DB1FF;
    --orange: #FFBA0A;
    --red: #EB5757;
    --green: #00BA00;
    --gray-33: #333333;
    --gray-4f: #4f4f4f;
    --gray-66: #666666;
    --gray-80: #808080;
    --gray-88: #888888;
    --gray-99: #999999;
    --gray-b3: #b3b3b3;
    --gray-c6: #c6c6c6;
    --gray-cc: #cccccc;
    --gray-de: #dedede;
    --gray-e6: #e6e6e6;
    --gray-e8: #e8e8e8;
    --gray-ec: #ececec;
    --gray-ed: #ededed;
    --gray-f2: #f2f2f2;
    --gray-f5: #f5f5f5;
    --gray-fd: #fdfdfd;
    /*
        Word status database / app / meaning
        - / status 1 / word not saved
        1 - 5 / status 2 - 6 / word status 1 - 5
        98 / ignore / ignore
        99 / - / known
 

    */
    --word-status-0: #B3D1FF;
    --word-status-1: #FFB39B;
    --word-status-2: #FFE297;
    --word-status-3: #FFE297;
    --word-status-4: #BBFFBA;
    --word-status-5: #BBFFBA;
    --word-status-98: transparent;
    --word-status-99: transparent;
    --word-highlight: #FFFC9B;
    --background: #ffffff;
    --body-background: var( --gray-ed);
    /* 
        Radius, text size and element spacing (margin and/or padding) 
    */
    --radius1: 5px;
    --radius2: 8px;
    --radius3: 10px;
    --radius4: 13px;
    --radius5: 15px;
    --radius6: 20px;
    --radius7: 25px;
    --radius8: 30px;
    --text-micro: 10px;
    --text-tiny: 12px;
    --text-small: 14px;
    --text-reduced: 16px;
    --text-normal: 18px;
    --text-plus: 20px;
    --text-h5: 24px;
    --text-h4: 26px;
    --text-h3: 28px;
    --text-h2: 30px;
    --text-h1: 36px;
    --text-big: 48px;
    --line-height-normal: 26px;
    --spacing-tiny: 3px;
    --spacing-very-small: 5px;
    --spacing-smallest: 7px;
    --spacing-smaller: 8px;
    --spacing-small: 10px;
    --spacing-reduced-twice: 12px;
    --spacing-reduced: 15px;
    --spacing-default: 15px;
    --spacing-normal: 20px;
    --spacing-plus: 25px;
    --spacing-increased: 30px;
    --spacing-double: 40px;
    --spacing-triple: 60px;
    --sapFontSize: var(--text-normal);
    /*
        Popups and boxes
    */
    --box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05);
    --box-shadow-wider: 5px 5px 5px rgba(0, 0, 0, 0.01);
    /* Centered popup, example: add text */
    --centered-popup-max-width: 760px;
    --centered-popup-width: 90%;
    --button-modal-yes-background: var(--blue);
    --button-modal-cancel-background: var(--gray-f5);
    --modal-max-width: 371px;
    --button-modal-yes-color: var(--background);
    /*
        mezasu-navigation
    */
    --mezasu-navigation-background: var(--blue);
    --mezasu-navigation-height: 54px;
    --application-nav-item-height: 60px;
    --header-nav-align-items: center;
    --mezasu-navigation-vertical-width: 70px;
    /*
        mezasu-full-page-header-nav
    */
    --mezasu-full-page-header-nav-color: var(--gray-33);
    --mezasu-full-page-header-nav-background-color: var(--background);
    --mezasu-full-page-header-nav-font-size: var(--text-normal);
    --mezasu-full-page-header-nav-icon-size: 30px;
    --mezasu-full-page-header-nav-line-height: 25px;
    /*
        pullout (settings)
    */
    --mezasu-pullout-background: var(--gray-ed);
    --mezasu-pullout-title-size: var(--text-normal);
    --mezasu-pullout-title-color: var(--gray-33);
    --mezasu-pullout-section-title-size: var(--text-h5);
    --mezasu-pullout-section-title-color: var(--gray-33);
    --mezasu-pullout-label-size: var(--text-normal);
    --mezasu-pullout-label-color: var(--gray-33);
    --mezasu-pullout-field-size: var(--text-normal);
    --mezasu-pullout-field-color: var(--gray-33);
    --mezasu-pullout-background-close-size: 16px;
    --mezasu-pullout-background-close-color: var(--gray-80);
    /*
        ui5 components
    */
    --sapField_Shadow: none;
    --sapFontFamily: var(--main-font);
    --sapTextColor: var(--gray-33);
    --sapList_TextColor: var(--gray-33);
    --sapField_BackgroundStyle: none;
    --sapField_Hover_BackgroundStyle: var(--gray-f5);
    --sapField_Hover_Background: var(--gray-f5);
    --sapButton_Active_Background: var(--gray-f5);
    --sapField_Focus_Background: var(--gray-f5);
    --sapField_Hover_Shadow: none;
    --sapGroup_ContentBackground: var(--gray-f5);
    --sapList_SelectionBackgroundColor: var(--gray-f5);
    --sapContent_FocusColor: transparent;
    --sapList_TextColor: var(--gray-33);
    --sapContent_FocusWidth: 0;
    --sapContent_FocusStyle: none;
    --sapField_BorderColor: transparent;
    --sapField_Hover_BorderColor: transparent;
    --sapContent_LabelColor: var(--gray-33);
    --sapFontSize: var( --text-normal);
    --sapContent_icon-color: var(--gray-33);
    /*
        mezasu-icon
    */
    --icon-size: 24px;
    --icon-size-larger: 30px;
    --icon-color: var(--gray-33);
    --icon-backgorund-color: var(--background);
    --icon-line-height: var(--icon-size);
    --icon-box-shadow: none;
    /*
        mezasu-file-upload
    */
    --drop-region-background-color: var(--gray-f2);
    /*
        mezasu-button
    */
    --mezasu-button-width: 100%;
    --mezasu-button-height: auto;
    --mezasu-button-padding: 0;
    --mezasu-button-font-size: var(--text-small);
    --button-font-weight: 400;
    --button-value-below-font-size: var(--text-tiny);
    --button-value-below-color: #000000;
    --button-on-outline: 4px solid #fff;
    --button-on-outline-offset: -4px;
    --button-gap: 0;
    /* icon-text-centered */
    --button-icon-text-centered-border-radius: var(--radius5);
    --button-icon-text-centered-background-color: var(--gray-f5);
    --button-icon-text-centered-color: var(--gray-33);
    --button-icon-text-centered-font-size: var(--text-plus);
    --button-icon-text-centered-font-weight: normal;
    --button-icon-text-centered-icon-size: var(--icon-size);
    --button-icon-text-centered-padding: 12px;
    --button-icon-text-centered-line-height: var(--text-plus);
    /* icon-text-vertical */
    --button-icon-text-vertical-color: var(--gray-99);
    --button-icon-text-vertical-size: 30px;
    --button-icon-text-vertical-text-color: var(--gray-99);
    --button-icon-text-vertical-text-size: var(--text-plus);
    --button-icon-text-vertical-background: var(--background);
    --button-icon-text-vertical-radius: var(--radius3);
    /* icon-left  */
    --button-icon-left-border-radius: var(--radius3);
    --button-icon-left-background-color: var(--gray-ed);
    --button-icon-left-lighter-background-color: var(--gray-f5);
    --button-icon-left-color: var(--gray-33);
    --button-icon-left-text-color: var(--button-icon-left-color);
    --button-icon-left-font-size: var(--text-normal);
    --button-icon-left-icon-size: var(--icon-size);
    --button-icon-left-padding-x: 20px;
    --button-icon-left-padding-y: 9px;
    --button-icon-text-align: center;
    /* icon-right (uses icon-left vars) */
    /* circle */
    --button-circle-background: var(--blue);
    --button-circle-color: white;
    --button-circle-size: 40px;
    --button-circle-icon-size: 22px;
    --button-circle-border: none;
    --button-circle-font-size: var(--text-plus);
    /* outlined */
    --button-outlined-border-size: 2px;
    --button-outlined-color: var(--background);
    --button-outlined-text-color: var(--background);
    --button-outlined-border-radius: 0;
    /* outlined circle */
    --button-outlined-circle-border-size: 2px;
    --button-outlined-circle-border-style: solid;
    --button-outlined-circle-border-color: var(--gray-33);
    --button-outlined-circle-color: var( --gray-33);
    /* circle orange */
    --button-circle-orange-background: var(--orange);
    /* 
        close-square
        rectangle
     */
    --button-close-square-border-radius: var(--radius3);
    --button-close-square-background-color: var(--gray-f5);
    --button-close-square-color: var(--gray-33);
    --button-close-square-size: 40px;
    --button-close-square-icon-size: var(--icon-size);
    --button-close-square-font-size: var(--text-normal);
    --button-rectangle-width: auto;
    /* icon-square (lexicon nav) */
    --button-icon-square-icon-size: 22px;
    --button-icon-square-border-radius: var(--radius5);
    --button-icon-square-background-color: var(--gray-ed);
    --button-icon-square-color: var(--gray-88);
    --button-icon-square-size: 40px;
    /* 
        footer-square
        footer-square extend (covers available width)

     */
    --button-footer-square-border-radius: var(--radius5);
    --button-footer-square-background-color: var(--gray-f5);
    --button-footer-square-color: var(--gray-33);
    --button-footer-square-size: 46px;
    --button-footer-square-icon-size: var(--icon-size);
    --button-footer-square-font-size: 20px;
    /*
        square
    */
    --button-square-border-radius: var(--radius3);
    --button-square-background-color: var(--blue);
    --button-square-color: white;
    --button-square-icon-size: var(--icon-size);
    --button-square-size: 27px;
    /*
        short
    */
    --button-short-border-radius: var(--radius3);
    --button-short-background-color: var(--gray-f5);
    --button-short-color: var(--gray-33);
    --button-short-line-height: 34px;
    --button-short-font-size: var(--text-plus);
    /*
        wide, mid radius
    */
    --button-wide-mid-radius-border-radius: var(--radius5);
    --button-wide-mid-radius-font-size: var(--text-normal);
    --button-wide-mid-radius-line-height: 44px;
    --button-wide-mid-radius-background-color: var(--red);
    --button-wide-mid-radius-color: var(--background);
    /*
        rounded
    */
    --button-rounded-border-radius: var(--radius7);
    --button-rounded-font-size: var(--text-h5);
    --button-rounded-background: var(--blue);
    --button-rounded-color: var(--background);
    /*
        main-footer-nav
    */
    --button-main-footer-nav-icon-color: var(--gray-66);
    --button-main-footer-nav-text-color: var(--gray-33);
    --button-main-footer-nav-icon-size: 32px;
    --button-main-footer-nav-text-size: var( --text-micro);
    /*
        review deck tabs
    */
    --button-review-tab-background: var(--gray-e6);
    --button-review-tab-color: var(--gray-33);
    --button-review-tab-border-radius: var(--radius5);
    --button-review-tab-font-size: var(--text-h5);
    --button-review-tab-line-height: 34px;
    --button-review-tab-active-background: var(--background);
    --button-review-tab-active-color: var(--blue);
    /*
        review buttons (flip, hard, good...)
    */
    --button-review-background: var(--gray-e6);
    --button-review-color: white;
    --button-review-icon-color: var(--gray-33);
    --button-review-border-radius: var(--radius6);
    --button-review-font-size: var(--text-h5);
    --button-review-height: 50px;
    --button-review-flip-background: var(--blue);
    --button-review-hard-background: var(--orange);
    --button-review-good-background: var(--blue);
    --button-review-easy-background: var(--green);
    --button-review-speaker-background: var(--gray-f5);
    /* 
        Reader
     */
    --text-item-font-size: 20px;
    --text-item-font-color: #000000;
    --text-item-known-font-color: #000000;
    --text-item-height: 24px;
    --text-item-radius: var(--radius1);
    --text-background: var(--background);
    --bar-fill-color: var(--blue);
    --bar-background: var(--gray-de);
    --pager-arrows-color: var(--gray-cc);
    --mezasu-text-edit-term-height: auto;
    --mezasu-text-height-adjust: 74px;
    --reader-text-align: left;
}

body.dark {
    --body-background: #333333;
    --text-background: #1a1a1a;
    --mezasu-full-page-header-nav-color: #ffffff;
    --iconColor: #ffffff;
    --text-item-font-color: #000000;
    --text-item-known-font-color: #ffffff;
    --bar-fill-color: var(--orange);
    --bar-background: var(--gray-80);
    --pager-arrows-color: var(--gray-80);
    /* */
    --mezasu-pullout-background: var( --gray-33);
    --mezasu-pullout-title-color: #ffffff;
    --mezasu-pullout-background-close-color: #ffffff;
    --mezasu-pullout-section-title-color: #ffffff;
    --mezasu-pullout-label-color: #ffffff;
}