: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: #0B59C7;
    --pri-dark: #003074;
    --pri-lite: #2F78EE;
    
    --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: #288fbf;
        --pri-dark: #3a96c1;
        --pri-lite: #1084ba;
    
        --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;
    }