@import url(fonts.css); 
@import url(themecolors.css); 

:root {
    /*Main Colors*/
    --p_main: var(--primaryMain);
    --s_main: var(--secondaryMain);
    /* Primary Shades */
    --lightbluish: #E8ECF4;
    --p_main_50: color-mix(in srgb, var(--primaryMain) 10%, white 90%);
    --p_main_100: color-mix(in srgb, var(--primaryMain) 20%, white 80%);
    --p_main_200: color-mix(in srgb, var(--primaryMain) 35%, white 65%);
    --p_main_300: color-mix(in srgb, var(--primaryMain) 50%, white 50%);
    --p_main_400: color-mix(in srgb, var(--primaryMain) 70%, white 30%);
    --p_main_500: var(--primaryMain);
    --p_main_700: color-mix(in srgb, var(--primaryMain) 85%, black 15%);
    --p_main_800: color-mix(in srgb, var(--primaryMain) 70%, black 30%);
    --p_main_900: color-mix(in srgb, var(--primaryMain) 55%, black 45%);
    --Bluishgrey: #EFF2FD;
    /*Text Color*/
    --TextMain: #323232;
    --TextLight: #A0A0A0;
    --icon-color: var(--primaryMain);
    --icon-color-bg: #FAFAFA;
    --faIcon: #323232;
    --faIconHover: var(--primaryMain);
    --text_white: #ffffff;
    /*Common Colors*/
    --grey100: #FAFAFA;
    --grey150: #EFEFEF;
    --grey200: #F5F5F5;
    --grey300: #f1f1f1;
    --grey400: #e7e7e7;
    --grey500: #C2C2C2;
    --darkGrey600: #979797;
    --darkGrey700: #818181;
    --darkGrey800: #606060;
    --darkGrey900: #3C3C3C;
    --greyBg: #cccccc;
    /*Body Background*/
    --bodyBg: #F7F8FD;
    --whiteBlockBg: #ffffff;
    --assetSideBlock: #ffffff;
    --cmsBlockBg: #ffffff;
    --formWrapperBg: #ffffff;
    --failureBg: #16161d;
    /*Title Block*/
    --blockBg: #ffffff;
    --titleBg: var(--primaryMain);
    --pageHeadingText: var(--TextMain);
    --pageTitleBg: #e8ecf4;
    /* Header */
    --headerBg: #ffffff;
    --headerBdr: #CED4DA;
    --headershadow: rgb(255 255 255 / 0%);
    --HeaderUserInfoDropBg: #fafafa;
    --HeaderUserInfoDropBdr: #ced4da;
    --HeaderUserInfoDropText: #434343;
    --HeaderUserInfoDropText-Hover: var(--primaryMain);
    --HeaderUserInfoDropSignOutBdr: #e4e7ea;
    /* Border */
    --border: #CED4DA;
    --borderActive: var(--primaryMain);
    --borderWhite: #ffffff;
    /* Form Control */
    --FormBg: #ffffff;
    --FormText: #495057;
    --FormFocusBdr: #a0a8b7;
    --FormIconBg: #F0F0F0;
    --FormIconText: #323232;
    --FormValidationTxt: #DC3545;
    --selectDropHoverBg: #F0F0F0;
    --selectDropHoverText: #495057;
    --selectDropActiveBg: var(--primaryMain);
    --selectDropActiveText: #ffffff;
    /*Buttons*/
    --BtnBg: var(--buttonPrimary, var(--primaryMain));
    --BtnText: #ffffff;
    --btnBdr: var(--buttonPrimary, var(--primaryMain));
    --BtnBgHover: color-mix( in srgb, var(--buttonPrimary, var(--primaryMain)) 80%, black 20% );
    --BtnTextHover: #ffffff;
    --btnBdrHover: color-mix( in srgb, var(--buttonPrimary, var(--primaryMain)) 80%, black 20% );
    --BtnBorderedBg: #ffffff;
    --BtnBorderedText: var(--buttonPrimary, var(--primaryMain));
    --btnBorderedBdr: var(--buttonPrimary, var(--primaryMain));
    --BtnBorderedBgHover: color-mix( in srgb, var(--buttonPrimary, var(--primaryMain)) 80%, black 20% );
    --BtnBorderedTextHover: #ffffff;
    --btnBorderedBdrHover: color-mix( in srgb, var(--buttonPrimary, var(--primaryMain)) 80%, black 20% );
    --s_btnBg: var(--secondaryMain);
    --s_btnText: #ffffff;
    --s_btnBdr: var(--secondaryMain);
    --s_btnBgHover: #ffffff;
    --s_btnTextHover: color-mix(in srgb, var(--secondaryMain) 80%, black 20%);
    --s_btnBdrHover: color-mix(in srgb, var(--secondaryMain) 80%, black 20%);
    --link: var(--primaryMain);
    --linkHover: color-mix(in srgb, var(--primaryMain) 80%, black 20%);
    /*Navigation*/
    --navBg: var(--verticalNavBackground, color-mix(in srgb, var(--primaryMain) 80%, black 20%));
    --navText: #ffffff;
    --navActiveBg: color-mix( in srgb, var(--verticalNavBackground, var(--primaryMain)) 80%, white 10% );
    --navTextActive: #ffffff;
    --navDropdownBg: #e9ecf3;
    --navDropdownText: #363636;
    --navDropdownTextHover: var(--primaryMain);
    --navbdr: color-mix( in srgb, var(--verticalNavBackground, var(--primaryMain)) 80%, white 10% );
    /*Footer*/
    --footerBg: #ffffff;
    --footerText: #323232;
    --footerBdr: #CED4DA;
    /*Modal*/
    --modalHF_Bg: #FFFFFF;
    --modalBdr: #E0E4E8;
    --modalBodyBg: #F6F8FA;
    /* Adbuilder */
    --mtpp-Bg: #ffffff;
    --mtpp-Bdr: #CED4DA;
    --mtpp-Text: #323232;
    --mtpp-Bg-Hover: #f5f5f5;
    --mtpp-BdrHover: color-mix(in srgb, var(--primaryMain) 80%, black 20%);
    --mtpp-TextHover: color-mix(in srgb, var(--primaryMain) 80%, black 20%);
    --blockListBg: #ffffff;
    --blockListBdr: #ced4da;
    --blockListText: #323232;
    --blockListBg-Hover: color-mix(in srgb, var(--primaryMain) 10%, white 90%);
    --blockListBdr-Hover: color-mix(in srgb, var(--primaryMain) 80%, black 20%);
    --blockListText-Hover: color-mix(in srgb, var(--primaryMain) 80%, black 20%);
    --adbuilderLandingAltBg: #eef0f7;
    /* Adbuilder */
    /* Ad Page */
    --ad-LeftFilterBg: #ffffff;
    --ad-LeftFilterBdr: #ced4da;
    --ad-filterTitlebdr-h: var(--primaryMain);
    /* Ad Page */
    /*Asset Card*/
    --cardBg: #ffffff;
    --cardBdr: #e6eaf3;
    --cardImgBg: #f0f4fd;
    --cardBgHover: #f0f4fd;
    --cardBdrHover: #c6c7cb;
    --cardImgBgHover: #ffffff;
    /* Report */
    --reportListBg: #e9ebf4;
    --reportListIcon: #323232;
    --reportListText: #323232;
    --reportListBg-Active: color-mix(in srgb, var(--primaryMain) 80%, black 20%);
    --reportListIcon-Active: #ffffff;
    --reportListText-Active: color-mix(in srgb, var(--primaryMain) 80%, black 20%);
    /* Report */
    /*Tabs*/
    --tabWrapperBg: #ffffff;
    --tabWrapperBdr: #CED4DA;
    --tabBg: #ffffff;
    --tabText: #323232;
    --tabBdr: #ffffff;
    --tabHoverBg: color-mix(in srgb, var(--primaryMain) 10%, white 90%);
    --tabTextHover: var(--primaryMain);
    --tabBdrHover: color-mix(in srgb, var(--primaryMain) 10%, white 90%);
    --tabActiveBg: color-mix(in srgb, var(--primaryMain) 10%, white 90%);
    --tabTextActive: var(--primaryMain);
    --tabBdrActive: var(--primaryMain);
    /*Accordion*/
    --accordionBg: #DEDEDE;
    --accordionText: #323232;
    --accordionBdr: #DEDEDE;
    --accordionBgActive: var(--primaryMain);
    --accordionTextActive: #ffffff;
    --accordionBdrActive: var(--primaryMain);
    /*Pagination*/
    --pgBg: #f2f2f2;
    --pgText: #363636;
    --pgbdr: #dfdfdf;
    --pgBdrHover: var(--primaryMain);
    --pgActiveBg: var(--primaryMain);
    --pgActiveText: #ffffff;
    --pgActiveBdr: var(--primaryMain);
    /*Table*/
    --tableHeadBg: #e9ecf3;
    --tableHeadText: #363636;
    --tableHeadBdr: #e9ecf3;
    --tableRowBg: #ffffff;
    --tableRowBdr: #e9ecf3;
    --tableAltRowBg: #F6F6F6;
    --tableRowBgHover: #f1f4f7;
    /*Upload*/
    --uploadBdr: #a0a8b7;
    --uploadBg: #F7F8FD;
    --uploadBdrLight: #A1A1A1;
    --uploadBgLight: #ffffff;
    /*Radio/Checkbox*/
    --rc_bg: #ffffff;
    --rc_text: #323232;
    --rc_bgActive: var(--primaryMain);
    --rc_textActive: #323232;
    --rc_IconActive: #ffffff;
    /*Alerts*/
    --sucessBg: #F5FAEC;
    --successText: #155724;
    --successBdr: #155724;
    --errorBg: #FAF0F2;
    --errorText: #A11A24;
    --erroBdr: #CC3440;
    --warningBg: #FEEEB4;
    --warningText: #896B00;
    --warningBdr: #FAC303;
    /*Badge*/
    --badge-Light-Bg: #FAFAFA;
    --badge-dark-Bg: #F0F0F0;
    --badge-icon-color: color-mix(in srgb, var(--primaryMain) 70%, black 30%);
    --badge-Text: color-mix(in srgb, var(--primaryMain) 70%, black 30%);
    --Badge-Bdr: #CED4DA;
    --badge-Bg-Active: #E9EBF4;
    --badge-Text-Active: var(--primaryMain);
    --badge-Bdr-Active: var(--primaryMain);
    /*Wizard*/
    --wizard_bg: #ffffff;
    --wizard_border: #D4D8EC;
    --wizardIcon: #D4D8EC;
    --wizardDivider: #A0A0A0;
    --wizard_bgActive: #ffffff;
    --wizard_bgMidCircle_Active: var(--primaryMain);
    --wizard_borderActive: var(--primaryMain);
    --wizard_bgcomplete: var(--secondaryMain);
    --wizard_complete_icon: #ffffff;
    --wizard_border_complete: var(--secondaryMain);
    /*ToolTip*/
    --tooltipBg: color-mix(in srgb, var(--primaryMain) 80%, black 20%);
    --tooltipText: #ffffff;
    /* Engage */
    --e_listProfileBg: #E8ECF4;
    --e_listProfileBdr: #CED4DA;
    /* Engage */
    /* Login Page */
    --loginBg: var(--loginBackground, #02000a);
    --loginBgRgt: #ffffff;
    --loginText: #ffffff;
    /* Stock Colors */
    --inStock: #3A700F;
    /* Dashboard Blocks */
    --dBlockHeadBg: var(--primaryMain);
    --dBlockHeadtext: #ffffff;
    --dbExportBg: var(--primaryMain);
    --dbExporttext: #ffffff;
    --dApproveBg: var(--primaryMain);
    --dApprovetext: #ffffff;
    --dIncompleteBg: #ced4da;
    --dIncompletetext: #363636;
    --dDeclinedBg: #717171;
    --dDeclinedtext: #ffffff;
    --sm-hBlockBdr: #CED4DA;
    --sm-hBlockBdr-hover: #465ca8;
    --sm-hBlockHeadBg: #ffffff;
    --sm-hBlockHeadText: #323232;
    --sm-hBlockImg: #E8ECF4;
    --sm-hBlockHeadBg-hover: #ffffff;
    --sm-hBlockHeadText-hover: #465ca8;
    --sm-hBlockImg-hover: #E8ECF4;
    /* Landing Page Blocks */
    --lb_bg: #ffffff;
    --lb_text: #323232;
    --lb_bdr: #a7a5a4;
    --lb_Icon: #2a2928;
    --lb_bgActive: #ffffff;
    --lb_textActive: #323232;
    --lb_bdrActive: var(--primaryMain);
    --lb_IconActive: var(--primaryMain);
    --NotificationHeadBg: #efefef;
    --NotificationHeadText: #323232;
    --NotificationContentBg: #ffffff;
    /* Dashboard Changes */
    --bonusAmount: #F4F5F9;
    /* Dashboard Changes */
    /* OCR Dashboard */
    --ocr_color1: #f0f8ff;
    --ocr_color2: #e6e6fa;
    --ocr_color3: #fffacd;
    --ocr_color4: #e0ffff;
    --ocr_color5: #f5f5dc;
    --ocr_color6: #d3ffd3;
    --ocr_color7: #ffebcd;
    --ocr_color8: #ffe4e1;
    --ocr_color9: #e6e6ff;
    --ocr_color10: #fafad2;
    /* OCR Dashboard */
    /* PopShop */
    --cartRowBg: #ffffff;
    --cartRowBdr: #e7e7e7;
    --cartRowBgHover: #f7f7f7;
    --cartRowBdrHover: #d7d7d7;
    --psTopFilter: #e5e5e5;
    --topCartFavIconBg: #ffffff;
    --topCartFavIconBdr: #CED4DA;
    --topCartFavIconText: #323232;
    --addItemBg: #ffffff;
    --uploadStatusBg: #ffffff;
    /* PopShop */
    /* HighCharts Colors */
    --hc100: var(--primaryMain);
    --hc200: var(--secondaryMain);
    --hc300: color-mix(in srgb, var(--primaryMain) 70%, white 30%);
    --hc400: color-mix(in srgb, var(--primaryMain) 55%, white 45%);
    --hc500: color-mix(in srgb, var(--primaryMain) 40%, white 60%);
    --hc600: color-mix(in srgb, var(--primaryMain) 85%, black 15%);
    --hc700: color-mix(in srgb, var(--primaryMain) 70%, black 30%);
    --hc800: color-mix(in srgb, var(--primaryMain) 55%, black 45%);
    --hc900: color-mix(in srgb, var(--primaryMain) 40%, black 60%);
    /* Guage color */
    --g1: color-mix(in srgb, var(--primaryMain) 10%, white 90%);
    --g2: color-mix(in srgb, var(--primaryMain) 20%, white 80%);
    --g3: color-mix(in srgb, var(--primaryMain) 30%, white 70%);
    --g4: color-mix(in srgb, var(--primaryMain) 40%, white 60%);
    --g5: color-mix(in srgb, var(--primaryMain) 55%, white 45%);
    --g6: var(--primaryMain); /* base */
    --g7: color-mix(in srgb, var(--primaryMain) 85%, black 15%);
    --g8: color-mix(in srgb, var(--primaryMain) 70%, black 30%);
    --g9: color-mix(in srgb, var(--primaryMain) 55%, black 45%);
    --g10: color-mix(in srgb, var(--primaryMain) 40%, black 60%);
    /* Manage Tree */
    --mTreeBlockBg: #ffffff;
    --mTreeBlockInnerBg: #f8f8f8;
    /* Publisher */
    --templatePublisherTopBlockBg: color-mix(in srgb, var(--primaryMain) 10%, white 90%);
    --templatePublisherSideBarBg: #c6cde5;
    --zoomBg: #585858;
    --zoomText: #FFFFFF;
    --publisherTopBg: #585858;
    --publisherSizeBg: #6D6D6D;
    --publisherText: #ffffff;
    --adListBg: #ffffff;
    --adListHeading: #9A9A9A;
    --adIcon1-Bdr: #D8D8D8;
    --adIcon1-Bg: #F4F5FB;
    --adIcon1-Text: #767880;
    --adIcon2-Bdr: #D8D8D8;
    --adIcon2-Bg: #FEF7F1;
    --adIcon2-Text: #767880;
    --adIconTextHeading: #434343;
    --adIconTextp: #A7A7A7;
    --adIconArrow: #767880;
    --uplodedListBg: #EBEDF3;
    --pub-TabBg: #E0E3EE;
    --pub-TabBdr: #C6CDE5;
    --pub-TabText: #2E2E2E;
    --pub-TabBg-Active: var(--primaryMain);
    --pub-TabBdr-Active: var(--primaryMain);
    --pub-TabText-Active: #FFFFFF;
    --pub-TabContentBg: #FBFBFB;
    --pub-TabContentBdr: #CBCBCB;
    --pub-FormBg: #ffffff;
    --pub-FormBdr: #B7B7B7;
    --pub-FormText: #434343;
    --pub-formatBlock: #ffffff;
    /* Publisher */
    /* Vertical Nav */
    --v-NavBdr: #CED4DA;
    --v_NavBg: #ffffff;
    --v-accHeadBg: #FAFAFA;
    --v-accHeadText: color-mix(in srgb, var(--primaryMain) 60%, black 40%);
    --v-acccontHoverBg: color-mix(in srgb, var(--primaryMain) 10%, white 90%);
    --v-acccontHoverText: var(--primaryMain);
    --v-acc2-Bg: #ffffff;
    --v-acc2-Text: var(--TextMain);
    --v-acc2-Bg-hover: #ffffff;
    --v-acc2-Text-hover: color-mix(in srgb, var(--primaryMain) 60%, black 40%);
    --v-acc2-Bg-active: #ffffff;
    --v-acc2-Text-active: color-mix(in srgb, var(--primaryMain) 60%, black 40%);
    --v-acc2-bottom-Bdr: #CED4DA;
    --v-acc2-bottom-Bdr-highlighted: var(--secondaryMain);
    --v1-bg: var(--verticalNavBackground, color-mix(in srgb, var(--primaryMain) 80%, black 20%));
    --v1-bookmarkBdr: color-mix( in srgb, var(--verticalNavBackground, var(--primaryMain)) 85%, white 15% );
    --v1-listText: #ffffff;
    --v1-listHoverBg: color-mix( in srgb, var(--verticalNavBackground, var(--primaryMain)) 80%, white 10% );
    --v1-listHoverText: #ffffff;
    --v2-toggleBg: #e0e1e7;
    --v2-topTitleBg: #f7f7f7;
    --v2-topTitleText: var(--TextMain);
    /* Vertical Nav */
    /* Administration */
    --adminBlockBg: #fff;
    --adminBlockBdr: #CED4DA;
    --admin-accBg: #ebebeb;
    --admin-accBdr: #E4E4E4;
    --admin-accText: #323232;
    --admin-accBg-hover: var(--primaryMain);
    --admin-accBdr-hover: #F7F8FD;
    --admin-accText-hover: #ffffff;
    --admin-contentBg: #ffffff;
    --admin-contentText: #454545;
    --admin-contenthoverText: var(--primaryMain);
    /* Administration */
    /*Alerts*/
    --expired--bg: #f8d7da;
    --expired--border: #f5c6cb;
    --expired--text: #721c24;
    --publish--bg: var(--primaryMain);
    --publish--border: var(--primaryMain);
    --publish--text: #ffffff;
    --draft--bg: #fff3cd;
    --draft--border: #ffeeba;
    --draft--text: #856404;
    /*Alerts*/
    /* Rebate */
    --rebateBlockBg: #ffffff;
    --rebateSecBlockBg: #edeff6;
    --rebateText: #323232;
    --rebateSecText: var(--TextMain);
    --rebateErrorText: #DC3545;
    --rebateLoaderInnerBg: rgb(255 255 255 / 90%);
    --rebateLoaderInnerColor: var(--primaryMain);
    --rebateToggleActive: var(--primaryMain);
    --rebateOfferBg: #e9ecf3;
    --rebateNote: color-mix(in srgb, var(--primaryMain) 10%, white 90%);
    --rebateCardHoverBdr: var(--primaryMain);
    --rebateCardUpcomingText: var(--primaryMain);
    --rebateCardUpcomingBdr: var(--primaryMain);
    --rebateCardExpiredText: #721c24;
    --rebateCardExpiredBdr: #f8d7da;
    --rebateCardExpiredBg: #f8d7da;
    --rebateCardDeletedText: #ffffff;
    --rebateCardDeletedBdr: #f37778;
    --rebateCardDeletedBg: #f37778;
    --rebateCardActiveText: #13A10E;
    --rebateCardActiveBdr: #13A10E;
    --rebateCardActiveBg: #F5FAEC;
    --rebateCardInActiveText: #721c24;
    --rebateCardInActiveBdr: #721c24;
    --rebateCardInActiveBg: #FFEAEE;
    --rebateCardPendingText: #F47D31;
    --rebateCardPendingBdr: #FAC303;
    --rebateCardPendingBg: #FEEEB4;
    --rebateEditorHeaderBg: #edeff6;
    --rebateEditorSubHeaderBg: #F5F7F9;
    /* Rebate */
    /* Onboarding */
    --setGoalBg: var(--primaryMain);
    --setGoalText: #fff;
    --DigitalHealthScore: #fff;
    --onboardingHeroBanner: var(--primaryMain);
    /* Onboarding */

    /* Progress Bar */
    --progressBg: #465ca8;
    /* Progress Bar */

    /* Profile Accordion */
    --Profile-accBG: #EAF1FF;
    --Profile-accBdr: #CED4DA;
    --Profile-accText: #323232;
    --ProfileContentBg: #ffffff; 
    /* Profile Accordion */ 

}

:root {
    --white: #ffffff;
    --login-bgTop: url('/Clients/DemoPortal/Images/login_bg-Top.png');
    --login-bgBottom: url('/Clients/DemoPortal/Images/login_bg-bottom.png');
    --reward-bg: url('/Clients/DemoPortal/Images/pro_bg.jpg');
    --registration-bg: url('/Clients/DemoPortal/Images/spiff/Spiff-regIcon.svg');
    
    --baseGap: 16px;
    --baseFont: 15px;
    --border-radius: 5px;
    --inputHeight: 40px;
    --filterGapRow: 12px;
    --filterGapCol: 6px;
    --fieldGap: 8px;
}