:root {
    font-size: 14px;
    @media (max-width: 767px) {
        font-size: 12px;
    }

    @media (max-width: 991px) {
        font-size: 14px;
    }

    @media(min-width: 1800px) {
        font-size: 18px;
    }

    @media (min-width: 2100px) {
        font-size: 24px;
    }

    @media (min-width: 3000px) {
        font-size: 30px;
    }

    --globalBgColor: #1D252C;
    --globalTypoColor: #1D252C;
    --rightSectionBgColor: #ffffff;
    --globalBgColorContrast: #ffffff;
    --globalCardColor: #ffffff;
    --typographyWhiteColor:#ffffff;

    --primaryColor: #1D252C;
    --primaryColorContrast: #ffffff;

    --secondaryColor: #F7CD2B;
    --secondaryColorContrast: #000000;

    --successColor: #81E26A;
    --warningColor: #F7CD2B;
    --dangerColor: #CD3235;
    --disabledColor: #D9DEE4;
    --asteriskcolor: #E85050;

    --inputDisabledColor: #f9f9f9;

    --typographyDarkColor: #1D252C;
    --typographyMediumColor: #4A5156;
    --typographyLightColor: #777C80;

    --borderColorShade: #8898AA;
    --borderColorTint: #ABABAB;
    --errorborderColor: #EB0000;
    --searchborderColor: #66788F;

    --modalBgColor: #ffffff;
    --tooltipBorderColor: #D9D9D9;

    --highlightColor: #0043FF;
    --highlightColorContrast: #ffffff;

    --primaryBgBtnColor: #F7CD2B;
    --primarybtnHoverColor: #FFD843;
    --primaryBtnFocusColor: #ECC221;
    --primaryBtnTextColor: #1D252C;

    --secondaryBtnBgColor: #ffffff;
    --secondaryBtnHoverColor: #FFD843;
    --secondaryBtnTxtColor: #000000;

    --linkColor: #0043FF;
    --linkColorHover: #1855FF;
    --linkColorFocus: #0140F2;
    --tableBgColor: #ffffff;
    --tableHeaderColor: #F2F1F0;
    --iconColor:#5F6368;

    --hoverColor: #F2F1F0;
    --cardFooterColor: #ffffff;

    --widgetBGColor1: #81ECEC;
    --widgetBGColor2: #D9D7F1;
    --widgetBGColor3: #FFC3C3;
    --widgetBGColor4: #FFD4B2;
    --headerBgColor: #ccc;
    --activeColor: #81E261;
    --inactiveColor: #CD3235;
    
    --mainBgColor: var(--globalBgColor);
    --rightContainerBgColor: var(--rightSectionBgColor);
    --globalBgTextColor: var(--globalBgColorContrast);
    --globalcardcolor: var(--globalCardColor);
    --globalcardcolor: var(--typographyWhiteColor);
    --globalTextcolor: var(--globalTypoColor);

    --activeSideNavBgColor: var(--globalCardColor);
    --activeSideNavTextColor: var(--highlightColor);
    --navMenuColor: var(--globalBgColorContrast);
    --navMenuHoverColor: var(--secondaryColor);

    --collapseIconBgColor: var(--secondaryColor);
    --collapseIconColor: var(--secondaryColorContrast);

    --typographyPrimaryColor: var(--primaryColor);
    --typographySecondaryColor: var(--secondaryColor);
    --typographydarkColor: var(--typographyDarkColor);
    --typographyMediumTextColor: var(--typographyMediumColor);
    --typographylightColor: var(--typographyLightColor);
    --typographyHighlightColor: var(--highlightColor);

    --highLightColor: var(--highlightColor);
    --highLightColorContrast: var(--highlightColorContrast);

    --inputBorderColor: var(--borderColorShade);
    --inputerrorColor: var(--errorborderColor);
    --inputBgColor: var(--globalCardColor);
    --inputlabelColor: var(--typographyDarkColor);
    --inputTextColor: var(--typographyDarkColor);
    --inputBgDisbaledColor: var(--disabledColor);
    --searchbordercolor: var(--searchborderColor);
    --iconcolor: var(--iconColor);
    --inputdisabledbgColor: var(--inputDisabledColor);

    --defaultRadiobtnborder: var(--borderColorTint);

    --radiohoverBorderColor: var(--linkColor);
    --radiopointerColor: var(--primaryColorContrast);

    --primaryBtndisabledColor: var(--disabledColor);
    --primaryBtndisabledTextColor: var(--typographyWhiteColor);
    --primarybuttonBgColor: var(--primaryBgBtnColor);
    --primaryhoverbtnColor: var(--primarybtnHoverColor);
    --primaryFocusbtnColor: var(--primaryBtnFocusColor);
    --primaryTextbtnColor: var(--secondaryBtnTxtColor);

    --secondaryBtnbgColor: var(--secondaryBtnBgColor);
    --secondaryBtnhovercolor: var(--secondaryBtnHoverColor);
    --secondaryBtnTextColor: var(--secondaryBtnTxtColor);

    --success: var(--successColor);
    --danger: var(--dangerColor);
    --warning: var(--warningColor);
    --asterisk: var(--asteriskcolor);

    --borderColor: var(--borderColorShade);
    --modalbgColor: var(--modalBgColor);
    --modaltxtColor: var(--typographyDarkColor);
    --modaltitleColor: var(--linkColor);
    --modalInputHeaderBgColor: var(--highlightColor);
    --linkcolor: var(--linkColor);
    --linkColorHover: var(--linkColor);
    --hoverColor: var(--hoverColor);
    --iconColor: var(--iconColor);

    --tooltipbordercolor: var(--tooltipBorderColor);
    --tooltiptextColor: var(--primaryBtnTextColor);
    --tooltipbgColor: var(--linkColorFocus);

    --tableBorderColor: var(--borderColorTint);
    --tableheaderColor: var(--tableHeaderColor);
    --tableheadertextColor: var(--typographyDarkColor);
    --cardFooterColor: var(--cardFooterColor);
    --tablerowBorderColor: var(--borderColorShade);

    --customTab-bg: var(--secondaryBtnBgColor);
    --customTab-text: var(--secondaryBtnTxtColor);
    --customTabActive-bg: var(--primaryBgBtnColor);
    --customTabActive-text: var(--primaryBtnTextColor);
    --customtabactiveborderShade1: var(--borderColorTint);
    --listCardBg: var(--primaryColor);
    --tooltipBg: var(--primaryColor);


    /************ font size Variables ****************/

    --px1: 0.0625rem;
    --px2: 0.125rem;
    --px3: 0.1875rem;
    --px4: 0.25rem;
    --px5: 0.3125rem;
    --px6: 0.375rem;
    --px7: 0.4375rem;
    --px8: 0.5rem;
    --px9: 0.5625rem;
    --px10: 0.625rem;
    --px11: 0.6875rem;
    --px12: 0.75rem;
    --px13: 0.812rem;
    --px14: 0.875rem;
    --px15: 0.937rem;
    --px16: 1rem;
    --px17: 1.0625rem;
    --px18: 1.125rem;
    --px19: 1.1875rem;
    --px20: 1.25rem;
    --px21: 1.3125rem;
    --px22: 1.375rem;
    --px23: 1.4375rem;
    --px24: 1.5rem;
    --px25: 1.5625rem;
    --px26: 1.625rem;
    --px27: 1.6875rem;
    --px28: 1.75rem;
    --px29: 1.8125rem;
    --px30: 1.875rem;
    --px31: 1.9375rem;
    --px32: 2rem;
    --px33: 2.0625rem;
    --px34: 2.125rem;
    --px35: 2.1875rem;
    --px36: 2.25rem;
    --px37: 2.3125rem;
    --px38: 2.375rem;
    --px39: 2.4375rem;
    --px40: 2.5rem;

    --mt10: 0.625rem;
    --mt12: 0.75rem;
    --mt14: 0.875rem;
    --mt16: 1rem;
    --mt18: 1.125rem;
    --mt20: 1.5rem;
    --mt30: 1.875rem;
    --mt36: 2.25rem;
    --mt40: 2.5rem;

/************** DARK THEME *******************/

 --darkrightSectionBgColor: #4A5156;
 --darkglobalTypoColor: #FFFFFF;
 --darkBlackBgColor: #1D252C;
 --darkerrorMessageColor: #eb0000;


 --darkRrightContainerBgColor: var(--darkrightSectionBgColor);
 --darkglobalTextcolor: var(--darkglobalTypoColor);
 --darkdarkBlackBgColor: var(--darkBlackBgColor)
 --darkerrorColor: var(--darkerrorMessageColor)
}