:root {
      
/* 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: #123A67;
--accent-color-op: #ffffff;
--accent-color-hover: #0071b2;

--card-bg:#ffffff;
--card-link:#0088B2;
--card-link-hover:#0071b2;

--reader-h:#0088B2;

--dark-text:#111111;

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

/* ELEMENT */

--body-background: var(--lite-90);

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

--font-family: 'Sukhumvit Set', 'Thai Sans Neue', 'Kanit', sans-serif;
--font-color: var(--dark-text);


--wtChartFill : #e0fbfb;

}

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

    :root {

        --pri-color: #106ed8;
        --pri-dark: #0d5ebb;
        --pri-lite: #2279dd;

        --sec-color: #14ae14;
        --sec-dark: #079207;
        --sec-lite: #29c129;

        --hl-color: #106ed8;
        --hl-dark: #0d5ebb;
        --hl-lite: #2279dd;

        --accent-color: #106ed8;
        --accent-color-op: #000000;
        --accent-color-hover: #5dbef6;

        --card-bg:#ffffff;
        --card-link:#0088B2;
        --card-link-hover:#0071b2;

        --reader-h:#0088B2;

        --dark-text:#111111;

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

        /* ELEMENT */

        --body-background: var(--lite-90);

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

        --font-family: 'Sukhumvit Set', 'Thai Sans Neue', 'Kanit', sans-serif;
        --font-color: var(--dark-text);

      --wtChartFill : #334a4a;
    }
  }


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