: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 */

        /* font-family: 'Inter', sans-serif;
        font-family: 'Noto Sans Thai', sans-serif;
        font-family: 'Poppins', sans-serif; */
    --font-iChurch: 'Poppins', -apple-system, -apple-system, BlinkMacSystemFont,'Sukumvit Set', sans-serif;
    --font-family: 'Poppins', -apple-system, -apple-system, BlinkMacSystemFont,'Sukumvit Set', sans-serif;
    --font-title: 'Poppins', -apple-system, -apple-system, BlinkMacSystemFont, 'Sukumvit Set','Kanit', sans-serif;
    --font-text: sans-serif;
    
    --pri-color: #243640;
    --pri-dark: #243640;
    --pri-lite: #1d3948;
    
    --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;
    
    --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-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-smoothing: antialiased;
    }