:root {
    --main-color: var(--ep-main-color);
    --main-color-text: var(--ep-main-color);
    /*--main-color-background: #F4F6F8;*/
    --main-color-background: var(--ep-white-dark);
    --main-color-hover: var(--ep-main-color);

    /*--main-color-hover-light: #3fc2ab1f;*/
    --main-color-hover-light: var(--ep-secondary-color-dark);
    /*--main-color-disabled: #3fc2ab4d;*/
    --main-color-disabled: var(--ep-secondary-color);
    /*--main-color-light: #bae6de;*/
    --main-color-light: var(--ep-secondary-color-lighter);

    --onboarding-title-color: #203a49;

    --mediu-gray: #cacaca;
    --text-color: #000000;

    --color-light-gray: #e0e0e0;

    --button-color: var(--ep-main-color);
    --button-bg-color: #f4f6f8;
    --button-border-color: #eee;

    --button-hover-color: #ffffff;
    --button-hover-bg-color: #656565;
    --button-hover-border-color: #656565;

    --border-color: #fafafa;
    --border-color-secondary: #cccccc;
    --border-color-gray: #CED4DA;

    --panel-content-background: #ffffff;

    --fa-primary-color: #818181;
    --fa-primary-color-disabled: rgba(129, 129, 129, .5);
    --fa-primary-opacity: 1;
    --fa-secondary-color: #818181;
    --fa-secondary-opacity: #818181;

    --background-color-light: #f4f6f8;
    --backdrop-color: rgba(0, 0, 0, .32);

    /**
    * EP color palette
    */
    --test-color: #D7EBF9;
    --main-color-old: #3FC2AB;

    --ep-white: #FFFFFF;
    --ep-white-dark: #F4F4F4;
    --ep-white-darker: #ECECEC;
    --ep-black: #000000;

    --ep-silver-lighter: #BFC4D0;
    --ep-silver-light: #A1A5AF;
    --ep-silver: #84888F;
    --ep-silver-light-dark: #5D6065;
    --ep-silver-light-darker: #37393C;

    --ep-main-color-lighter: #2396FB;
    --ep-main-color-light: #0275D8;
    --ep-main-color: #164DFF;
    --ep-main-color-dark: #113ABF;
    --ep-main-color-darker: #0B2780;

    --ep-secondary-color-transparent: #D7EBF9;
    --ep-secondary-color-lighter: #C6CFE0;
    --ep-secondary-color-light: #7086B2;
    --ep-secondary-color: #47547F;
    --ep-secondary-color-dark: #002D5B;
    --ep-secondary-color-darker: #061340;

    --ep-accent-color-lighter: #F59A9A;
    --ep-accent-color-light: #F07474;
    --ep-accent-color: #EB4D4D;
    --ep-accent-color-dark: #D43C3C;
    --ep-accent-color-darker: #B82E2E;

    --ep-error: #F44336;
    --ep-success: #69B256;
    --ep-warning: #FFC107;
    --ep-info: #17A2B8;

    /** links */
    --link-color: var(--ep-main-color-lighter);
    --link-color-hover: var(--ep-main-color);
    --link-color-focus: var(--ep-main-color-darker);

    /** icons */
    --icon-color: var(--ep-main-color-light);
    --icon-color-hover: var(--ep-main-color);
    --icon-color-focus: var(--ep-main-color-darker);

    --icon-color-silver: var(--ep-silver);

    /** buttons */
    --btn-fill-color: var(--ep-main-color);
    --btn-fill-color-hover: var(--ep-main-color-dark);
    --btn-fill-color-focus: var(--ep-main-color-darker);

    --btn-secondary-fill-color: var(--ep-secondary-color);
    --btn-secondary-fill-color-hover: var(--ep-secondary-color-dark);
    --btn-secondary-fill-color-focus: var(--ep-secondary-color-darker);

    --btn-accent-fill-color: var(--ep-accent-color);
    --btn-accent-fill-color-hover: var(--ep-accent-color-dark);
    --btn-accent-fill-color-focus: var(--ep-accent-color-darker);

    --btn-disabled-fill-color: var(--ep-white-dark);
    --btn-disabled-border-color: var(--ep-silver-lighter);
    --btn-disabled-text-color: var(--ep-silver-light);

    /** mat card */
    --card-background: var(--ep-white);
    --card-border: var(--ep-secondary-color-lighter);
    --card-icon: var(--ep-main-color);

    --menu-tab-color: var(--ep-main-color-darker);
    --menu-tab-color-hover: var(--ep-black);
    --menu-tab-color-active: var(--ep-main-color-dark);

    --menu-tab-icon: var(--ep-main-color-darker);

    --card-border-hover: var(--ep-secondary-color-light);

    /** mat form elements */
    --form-elem-background: var(--ep-secondary-color-lighter);
    --form-elem-border: var(--ep-secondary-color-light);
    --form-elem-solid: var(--ep-main-color-light);

    --input-elem-outline: var(--ep-secondary-color-lighter);

    --input-elem-outline-focus: var(--ep-secondary-color-light);

    /** mat calendar */
    --calendar-cell: var(--ep-white);
    --calendar-hover: var(--ep-main-color-light);
    --calendar-selected: var(--ep-secondary-color-dark);
    --calendar-range: var(--ep-secondary-color-transparent);
}