:root {
      
  /* DESIGN COLOR */

  --font-family: -apple-system, -apple-system, BlinkMacSystemFont,'Sukumvit Set', sans-serif;
  --font-title: -apple-system, -apple-system, BlinkMacSystemFont, 'Sukumvit Set','Kanit', sans-serif;
  --font-text: sans-serif;
  
  --pri-color: #148ecf;
  --pri-dark: #097dbc;
  --pri-lite: #2a99d5;
  
  --sec-color: #009501;
  --sec-dark: #009501;
  --sec-lite: #009501;
  
  --hl-color: #038ebd;
  --hl-dark: #0280AA;
  --hl-lite: #00c5e4;    
  
  --accent-color: #123A67;
  --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:#000000;
  
  --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;
  
  /* DIMENTION */
  
  --bg-color: #fafafa;

  --nav-height:64px;
  --nav-color:var(--pri-color);
  --nav-background:var(--white);
  --nav-a-color:var(--pri-color);
  
  --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;  
  


}

@media (prefers-color-scheme: dark) {


  :root {

      --pri-color: #2398D8;
      --pri-dark: #349dd5;
      --pri-lite: #168dce;
  
      --sec-color: #009501;
      --sec-dark: #009501;
      --sec-lite: #009501;
      
      --hl-color: #3895ff;
      --hl-dark: #1b86ff;
      --hl-lite: #54a1f9;   
      
      --accent-color: #3895ff;
      --accent-color-op: #111111;
      --accent-color-hover: #54a1f9;

      --card-bg:rgb(45, 45, 45);
      --card-link:#0088B2;
      --card-link-hover:#0071b2;
  
      --reader-h:#0088B2;
      --dark-text:#fff;

      --active-color: #FFDE0D;
      --active-dark: #FFDE0D;
      --active-lite: #FFDE0D;

      /* ELEMENT */
      
      --section-title:#f0f0f0;
      --form-color:#0491e3;
      
      --nav-bg:var(--pri-color);
      --sideBar-bg:#27384e;
      
      --buy-btn: #1fa01f;
      
      --btn-dark: #0B59C7;
      --btn-dark-hover: #106bea;
      
      --btn-lite: #fff;
      --btn-lite-hover: #93A9B2;
      
      --modal-border: #none;

      /* DIMENTION */

      --bg-color: #000000;
      
      --nav-height:64px;
      --nav-color:var(--pri-color);
      --nav-background:var(--white);
      --nav-a-color:var(--pri-color);
      
      --sidenav-color:var(--pri-color);
      --sidenav-background:var(--white);
      
      --hover-lite: rgba(184, 222, 255, 0.168);
      --userPanel-width: 300px;
      
      --editorSideBar-width:60px;
      --editorSideBar-color:var(--sideBar-bg);
      
      --editorSidePanel-color:#e2e2e2;  

  }


}
  
  /* 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-smoothing: antialiased;
  }