:root {
    /**** Secure color code for common component ****/
    /* --Secure-Component-Basecolor: #820c59;*/
    /*--Secure-Component-hovercolor: #F3e7ee;*/
    /*--Secure-Component-activecolor: #dab6cd;*/
    /*--Secure-Component-Basecolordark: #630944;*/
    /*--Secure-Component-activecolordark: #c01284;*/
    /*--Secure-Component-buttonclickedBG: #DF15994D;
    --Secure-Component-boxshadowBG: #C0128499;
    --Secure-Component-pressedlightBG: #C01284;
    --Secure-Component-Blackcolorcode: #212020;*/
    /*--Secure-Component-buttonoutline: #C01284;*/
    /**** Secure color code for common component 
    --Secure-Component-Primary-color: #820c59;
    --Secure-Component-Primary-second-color: #c01284;
        --Secure-Component-Secondary-lightcolor: #DF159926;
        --Secure-Component-Tertiary-color: #F3E7EE;
         --Secure-Component-Blackcolor: var(--Secure-Component-Blackcolorcode);
        --Secure-Component-Lightgraycolor: #EAEAEA;****/
    /*--Secure-Component-Primary-second-halfopacity-color: #C0128480;*/
    /* --Secure-Component-Primary-second-tenopacity-color: #DF15991A;*/
    /*--Secure-Component-Secondary-color: #EFB2DA;*/
    /*--Secure-Component-Graycolor: #B4B1B0;
    --Secure-Component-activecolor: #dab6cd;
    --Secure-Component-Basecolordark: #630944;
    --Secure-Component-buttonclickedBG: #DF15994D;
    --Secure-Component-boxshadowBG: #C0128499;*/
    /*--Secure-Component-buttonoutline: #C01284;*/
    /*--Secure-Designsystem-DefaultButtonComponent*/
    /*--Secure-Button-Default-Basecolor: #820C59;*/
    /*--Secure-Button-Default-Hovercolor: #C01284;*/
    /*--Secure-Button-Default-Keypresscolor: #DF15994D;*/
    /*--Secure-Button-Default-Activecolor: #820C59;*/
    --Secure-Button-Border-Basecolor: transparent;
    --Secure-Button-Border-Hovercolor: #C01284;
    --Secure-Button-Border-Keypresscolor: #DF15994D;
    --Secure-Button-Border-Activecolor: #820C59;
    /*--Secure-Button-Text-color: #ffffff;*/
    /*--Secure-Button-Text-Keypresscolor: #820C59;*/
    --Secure-Button-Disabled-Basecolor: #CDCBCA;
    --Secure-Button-Shadow-Hoverarea: 0px 0px 6px 0px #C01284E0;
    --Secure-Button-Outline-Active: solid 2px Var(--Secure-Component-Secondary-BasecolorLightFocused);
    --Secure-Button-border-Active: 2px solid var(--Secure-Component-Primary-White);
    --Secure-Button-Border-Type: Solid;
    --Secure-Button-Border-Width: 1px;
    --Secure-Button-Border-Radious: 4px;
    --Secure-Button-Text-Size: 14px;
    --Secure-Button-DisabledText-Basecolor: #7D7775;
    --Secure-Button-Padding: 8px 24px;
    /*--Secure-Designsystem-SecondaryButtonComponent*/
    --Secure-SecondaryButton-Disabled-Border: Solid 1px #B4B1B0;
    /*--Secure-Designsystem-TertiaryButtonComponent*/
    --Secure-TertiaryButton-hovercolor: #EAEAEA;
    --Secure-TertiaryButton-activecolor: #D9D9D9;
    --Secure-TertiaryButton-Text-color: #820C59;
    --Secure-TertiaryButton-Active-Border: Solid 1px #C01284;
    /*--Secure-Designsystem-Color token*/
    /*****Secure Designsy stem Primary Color token****/
    --Secure-Component-Primary-Black: #212020;
    --Secure-Component-Primary-White: #FFFFFF;
    --Secure-Component-Primary-Basecolor: #820C59;
    /****End of Secure Design system Primary Color token****/
    /*****Secure Design system Secondary Color token****/
    --Secure-Component-Secondary-Greydisabled: #B0B0B0;
    --Secure-Component-Secondary-Greydarktext: #9B9796;
    --Secure-Component-Secondary-Greyborder: #B4B1B0;
    --Secure-Component-Secondary-GreyLight: #F8F8F8;
    --Secure-Component-Secondary-Greylight2: #CDCBCA80;
    --Secure-Component-Secondary-DarkGreyPressed: #7D7775;
    --Secure-Component-Secondary-LightGreyHover: #EAEAEA;
    --Secure-Component-Secondary-BasecolorLightHover: #F3E7EE;
    --Secure-Component-Secondary-BasecolorLightPressed: #DF159926;
    --Secure-Component-Secondary-BasecolorLightFocused: #C01284;
    --Secure-Component-Secondary-BasecolorLightSelectedHover: #C01284;
    --Secure-Component-Secondary-RedError: #D11920;
    --Secure-Component-Secondary-GreenOk: #048428;
    --Secure-Component-Secondary-GreenOk: #048428;
    --Secure-Component-Secondary-Hover: #820C59CC;
    /****End of Secure Design system Secondary Color token****/
    /****End of Secure Design system Tertiary Color token****/
    --Secure-Component-Tertiary-GreyLight: #EAEAEA;
    --Secure-Component-Tertiary-GreyDark: #D9D9D9;
    /*****Secure Design system Tertiary Color token****/
}