:root {
    /* main colors */
    --primary-color: #312b6e;
    --secondary-color: #2196f3;
    --primary-text-color: #fff;
    --secondary-text-color: rgb(18, 27, 42, 1);

    /* status colors */
    --success-color: #49ab70;
    --warning-color: #d2c426;
    --danger-color: #d32115;
    --canceled-color: #c985a7;
    /* ------------- */

    --fresh-background: #f4f5f8;
    --fresh-off-white-color: #eff2f5;
    --fresh-theme-color: #D9DBE1FF;

    /* navigation element colors */
    --navigation-text-color: var(--primary-text-color); /* text-color for top-nav also used for nav icons */
    --navigation-bg-color: var(--primary-color); /* top-nav background-color, default set as primary color */
    --sidebar-text-color: var(--secondary-text-color);
    --sidebar-sub-text-color: var(--secondary-text-color);
    --sidebar-active-bg-color: var(--fresh-off-white-color);
    --body-bg-color: var(--fresh-background); /* main background-color, other elements sit on top of this color */
    --pagination-bg-color: var(--fresh-off-white-color); /* non-active pagination button background-color */
    --pagination-text-color: #7e7e7e; /* non-active pagination button text-color */
    --active-text-color: var(--secondary-text-color); /* active pagination button text-color ie. sidebar current page text color */
    --important-color: var(--danger-color);

    /* standard element colors */
    --black-color: var(--secondary-text-color);  /* black-color used as text/icon/element color */
    --black-bg: var(--secondary-text-color); /* black-color used as black background-color */
    --input-bg-color: var(--fresh-off-white-color); /* background-color for input field */
    --off-white-color: var(--fresh-off-white-color); /* slightly off white color used as various background-color and odd table row background-color */
    --off-white-bg-color: var(--fresh-off-white-color); /* slightly darker off white color */

    --grey-color-100: var(--fresh-theme-color);
    --footer-text-color: var(--text-light); /* footer text color */

    /* alert element colors */
    --alert-dark-text-color: var(--secondary-text-color);
    /* -------------  */

    /* table colors  */
    --table-text-color: var(--secondary-text-color); /* table header color */
    --table-bg-highlight-color: #fffdd3; /* table highlighted background color*/
    /* -------------  */
}