: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: #00A99D;
   --pri-dark: #1B8B83;
   --pri-lite: #0AD1C3;

   --sec-color: #00569D;
   --sec-dark: #02457B;
   --sec-lite: #0573CD;

   --hl-color: #038ebd;
   --hl-dark: #060707;
   --hl-lite: #00c5e4;

   --accent-color: #F3C119;
   --accent-color-op: #ffffff;
   --accent-color-hover: #0071b2;

   --dark-text: #111111;


   /* DIMENTION */

   --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 {


   --dark-text: #ffffff;


   }
}

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