:root{
 /*body background */
      /* --bg-color*/ 
      --bg:#1C1C1E; 
      --bg50A:  rgba(28 ,28 ,30  ,0.5); 
      --bg5A:  rgba(28 ,28 ,30  ,0.05);
      --bg-invert : #EEE;
      /*get from the promotion page*/
      --bg-2nd: #1A1A1A;       /* lowest contrast */
      --bg-3rd: #333333;  /* contrast */
      --bg-4th: #a5a5a6; /* heavy contrast */
     
      --bg-invert: #ffffff;
      
      /*tooltip*/
      --shadow:  0 1px 8px rgba(0,0,0,0.3);
     
      /*bg-accent can be gradient*/
      --bg-accent : linear-gradient(180deg, #FFC325 0%, #FF9C19 100%);
      --text-onBgAccent: #000;
      --bdr-accent : #FFC325;
   
   
      --bg-brand-blend : #9C0F23 ; /*blend with --bg*/
      --bg-brand-blend-invert :#fd5858 ;
    
      --bg-brand:  #1D1D1D; /*should be darkest if theme is dark*/
      --bg-brand-2nd:#2B2A2F ; 
      --bg-brand-contrast:    #515054 ; 
      /* --bg-brand-contrast:#353535; */
      --bg-brand-heavy-contrast :#DBDBDB;
      --text-onBgBrand :#fff;

         /* mobile bottom bar - BottomBar2 */
   --bg-mobileBottomButton: linear-gradient(180deg, #fff 0%, #9b9b9b 100%);
   --text-mobileBottomButton: #000;
   --shadow-mobileBottomMenu: rgba(0,0,0,.9);
   
      /*body text color*/
      --text: #ffffff;
      --text-2nd:#ffffffc8;
      --text-3rd:#ffffff75;
      --text-red:  #f20303;
--text-blue: #009dff;
--text-green: #00f370;
--text-4th : var(--bg-accent); /* Togel resut section*/
      --text-invert:#000000;
      /* --text-2nd:70% opacity
      --text-3rd:50% opacity */
      --text-accent: #E3D18A ;
      --text-brand: #D62427 ;
      /*Header*/
      /* --header-bg  */
      --bg-hdr:var(--bg);
      /* --topbar-bg */
      --bg-hdrContent:#2B2A2F;
      /* --topbar-login-text */
      --text-onHdrContent: #A8A8A8 ;
      /* --topbar-login-bg */
      --bg-hdrTopContent : #2B2A2F;
  
  
      /* --header-btn-bg */
      /* --btn-hdr */
     
 
      --btn: linear-gradient(180deg, #FF5050 10.26%, #F00 100%); 
      --text-onBtn:  #FFFFFF;  
      --bdr-onBtn: none;
  
      /* --header-btn-text */
      /* --text-onbtnhdr: #ffffff; */
      --btn-2nd :  transparent;
      --text-onBtn2nd:  currentColor;
      --bdr-onBtn2nd: 1px solid currentColor;
      /* --shadow-onBtn2nd: 0 3px 4px 0px var(--text-brand); */
  
      --btn-3rd : transparent;
      /* --text-onBtn3rd: rgb(255 255 255 / 87%); */
      --bdr-onBtn3rd: 1px solid rgb(255 255 255 / 40%);
  

      /*if content__pg is invert color of bg, then neutral need a color that visible on both background*/
      /* --input-muted-dark-bg */
      --btn-neutral:#d4d4d4;
      /* --input-muted-dark-bd-color */
      --bdr-neutral:#909191;
  
      /* --header-icon-bg */
      --bg-hdrBtnIcon : #393645;
      /* --header-icon-color */
      --text-onHdrBtnIcon:  #FFFFFF;
  
      /*--wallet-ref-icon-color */
      --icon-hdrCta:  #FFFFFF;
  
      --btn-file: #2F3233;
      --bdr-onBtnFile: #ffffff;
  
      --bg-modal : var(--bg-invert);
      --text-onModal: var(--text-invert);
      --bdr-onModal :  #b4b4b4;
      --bg-onModalContent : transparent;/*bg of input on Modal will use this var*/
  
      --bg-pgContent :var(--bg-2nd);
      --text-onPgContent : var(--text);
      --text-onPgContent-2nd : var(--text-2nd); 
      --bg-pgContentInner :var(--bg-3rd);
      /*input is affected by bg-pgContent*/
      /* --bg-input */
      /* --bg-input: */
      --bg-input : #D9D9D9;
      /* --bdr-input */
      --bdr-input: var(--bdr-neutral);/* #b4b4b4;  */
      /* --text-input */
      --text-input :var(--text-invert);
      /* --input-muted-hover-bd-color */
      --bdr-input-hover: var(--text-accent);
      /* --bg-input-disabled */
      --bg-input-disabled: #e3e2e2;/*disabled input will opacity 0.6*/
  
       
  
  /* member level */
  --gold-lvl-bg: linear-gradient(90deg, #DBBE91 0%, rgba(121, 70, 29, 0.95) 100%);
  --gold-lvl-text-color: #ffff00;
  --new-lvl-bg: #ffffff;
  --new-lvl-text-color: #ffffff;
  /* member level end*/
  
      
  /* profile popup */
  --popup-bg : #1C1C1E;
  --popup-head-bg : #28282B;
  --popup-text-accent : #5E555A;
  --popup-icon-bg : #272727;
  --popup-info-bg : linear-gradient(180deg, #16377B 0%, rgba(22, 55, 123, 0) 86.98%, rgba(22, 55, 123, 0) 100%);
  --popup-light-bg : #ffffff;
  --popup-text-dark : #000000;
  --popup-text-light : #ffffff;

  --popup-icon-bd-color : transparent;
  --popup-icon-color : #A8A8A8;
  --popup-icon-light-bg : #ffd4db;
  --popup-icon-text : #313131;
  --bg-popUpMenu-hover :  #ffe9ed;
  /* --sidenav-menu-text: #10EAF0; */
 
  /* checkbox */ 
  --cbx-bg : #ffffff;
  --cbx-color : var(--text-brand);
  --cbx-bd-color : #ABABAB; /* #000000; */
  /* checkbox end*/
   
  --toggle-btn-bg: #585858;
  --toggle-btn-bd-color: #858586;
  --toggle-btn-active-bg: #F5FFEE;
  --toggle-btn-color: #ffffff;
  --toggle-btn-active-color: #00FF0A;
   


  --logout-btn-bg: linear-gradient(180deg, #811C1B 0%, #D62427 53.65%, #811C1B 100%);
  --logout-btn-color: #ffffff;
    /*bottom bar*/ 
    --bottom-nav-bg : #fff;
    --bottom-nav-color :   #5E5F60;
    --bottom-nav-color-active :  #ff0000;
    --bottom-popup-icon-bg: radial-gradient(circle,#ff0000, rgb(122 17 0)); 
    --bottom-popup-icon-color :#fff;
    --bottom-popup-icon-color-active : #5E5F60;
    --bottom-center-bg:radial-gradient(circle, #f69d9d,#ff0000);
    --bottom-center-color:#fff;
    /*bottom bar end*/

    --bg-scrollbarTrack: #403A41; 
    --bg-scrollbarThumb: #8A8A8A;
    --bdr-scrollbarThumb:#403A41;

   /*OLD*/ 
    
}



/*becaise bg-input is light color and the pg background is black, hence this bg must be more opaque*/
.input__inner_is-error{ 
    background: rgb(255 202 214 / 70%)!important
  }
  .input__inner_is-successful { 
    background: rgb(180 255 180 / 70%)!important
  }
  
  .boxLatestTrxs{
    --bg-brand-blend : transparent;
    --bg-brand-blend-invert: #353535 ;
    
  }