:root {
      
  --white:#ffffff;
  --lite-bg:#ffffff;
  
  --gray-darkest: #222222;
  --gray-darker: #444444;
  --gray-dark: #696969;
  --gray: #999999;
  --gray-lite: #cccccc;
  --gray-liter: #ececec;
  --gray-litest: #f0f0f0;
  
  --grey-lighten-4 :  #f5f5f5;
  --grey-lighten-3 :#eeeeee;
  --grey-lighten-2 :#e0e0e0;
  --grey-lighten-1 :#bdbdbd;
  --grey :#9e9e9e;
  --grey-darken-1 :#757575;
  --grey-darken-2 :#616161;
  --grey-darken-3 :#424242;
  --grey-darken-4 :#212121;
  
  --normal-color:#ffffff;
  --normal-dark:#f0f0f0;
  
  --normal-medium-lite:#707090;
  --normal-medium:#768196;
  --normal-medium-dark:#586070;
  --normal-dark:#4F5664;
  --normal-dark-text:#4F5664;
  
  --success-color: #a00;
  --success-color-dark: #900;
  --warning-color: #fc0;
  --warning-color-bg:rgba(255, 204, 0, 0.3);
  --warning-color-dark: #f90;
  --alert-color: #0a0;
  --alert-color-dark: #090;
  
  --dark-overlay:rgba(0,0,0,0.8);
  --lite-overlay:rgba(255,255,255,255.8);
  
  --dark-blur:rgba(0,0,0,0.3);
  --lite-blur:rgba(255,255,255,0.3);
  
  --shadow-lite-1 : 0px 0px 3px 0px rgba(0,0,0,0.2);
  --shadow-lite-2 : 0px 0px 6px 0px rgba(0,0,0,0.3);
  --shadow-lite-3 : 0px 0px 9px 0px rgba(0,0,0,0.4);
  
  --shadow-dark-1 : 0px 0px 3px 0px rgba(255,255,255,0.2);
  --shadow-dark-2 : 0px 0px 6px 0px rgba(255,255,255,0.3);
  --shadow-dark-3 : 0px 0px 9px 0px rgba(255,255,255,0.4);
  
  --shadow-hilite-1 : 0px 0px 3px 0px rgba(2, 134, 175,0.5);
  
  --overay-lite:rgba(255,255,255,1);
  
  /* DESIGN COLOR */
  
  --pri-color: #0A3E84;
  --pri-dark: #072e61;
  --pri-lite: #0d4ea3;
  
  --sec-color: #009501;
  --sec-dark: #009501;
  --sec-lite: #009501;
  
  --hl-color: #038ebd;
  --hl-dark: #0280AA;
  --hl-lite: #00c5e4;    
  
  --accent-color: #0088B2;
  --accent-color-op: #ffffff;
  --accent-color-hover: #0071b2;
  
  --card-bg:rgba(255, 255, 255, 1);
  --card-link:#0088B2;
  --card-link-hover:#0071b2;
  
  --reader-h:#0088B2;
  
  --dark-text:#111111;
  
  --active-color: #FFDE0D;
  --active-dark: #FFDE0D;
  --active-lite: #FFDE0D;
  
  /* ELEMENT */
  
  --section-title:#111111;
  --form-color:#0071b2;
  
  --nav-bg:var(--pri-color);
  --sideBar-bg:#27384e;
  
  --buy-btn: #1fa01f;
  
  --btn-dark: #455B64;
  --btn-dark-hover: #33444B;
  
  --btn-lite: #fff;
  --btn-lite-hover: #93A9B2;
  
  --modal-border: #none;
  --card-bg: #ffffff;
  
  /* DIMENTION */
  
  --nav-height:64px;
  --nav-color:var(--pri-color);
  --nav-background:var(--white);
  --nav-a-color:var(--pri-color);
  
  --sidenav-width:200px;
  --sidenav-color:var(--pri-color);
  --sidenav-background:var(--white);
  
  --hover-lite: rgba(57, 105, 148, 0.05);
  --userPanel-width: 300px;
  
  --editorSideBar-width:60px;
  --editorSideBar-color:var(--sideBar-bg);
  
  --editorSidePanel-color:#222;  
  
  }
  
  /* fallback */
  @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v77/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
  }
  
  .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  }