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

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

}

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