:root {
    /* 🎨 Colors */
    --header-bg: ;
    --header-text: ;

    --sidebar-bg: ;
    --sidebar-text: ;

    --main-bg: ;
    --main-text: ;

    --graph-bg: ;
    --graph-line: ;
    --graph-text: ;

    --card-bg: ;
    --card-text: ;

    --tableColor: ;
    --table-heading-bg: ;
    --tableheader-textcolor: ;

    /* Buttons */
    --btn-save-bg: ;
    --btn-save-hover: ;
    --btn-save-text: ;

    --btn-edit-bg: ;
    --btn-edit-hover: ;
    --btn-edit-text: ;

    --btn-warning-bg: ;
    --btn-warning-hover: ;
    --btn-warning-text: ;

    --btn-delete-bg: ;
    --btn-delete-hover: ;
    --btn-delete-text: ;

    --btn-cancel-bg: ;
    --btn-cancel-hover: ;
    --btn-cancel-text: ;

    /* Headings */
    --h1-color: ;
    --h2-color: ;
    --h3-color: ;
    --h4-color: ;
    --h5-color: ;
    --h6-color: ;

    /* Typography */
    --font-family: ;
    --font-size-sm: ;
    --font-size-md: ;
    --font-size-lg: ;

    /* Form */
    --input-label-color: ;
    --input-label-size: ;

    /* Misc */
    --rounded: ;
    --space: ;
}

* use this variables according to you size */
/*'--font-size-sm': d.fdFontSizeSmall,
'--font-size-md': d.fdFontSizeMedium,
'--font-size-lg': d.fdFontSizeLarge, 
'--graph-bg': d.fdGraphBgColor,
'--graph-line': d.fdGraphLineColor,
'--graph-text': d.fdGraphTextColor,
--space': d.fdSpacingUnit,


*/


body, .page-wrapper{ 
  background: var(--main-bg) !important; 
  color: var(--main-text) !important; 
  font-family: var(--font-family);
  font-size: var(--font-size-md);
}

/* header */
.topbar, .navbar, .navbar-header, .topbar .navbar-collapse, .dropdown-menu{
  background: var(--header-bg) !important; 
  color: var(--header-text) !important;
}

.topbar a, .navbar a
{ color: var(--header-text) !important; }


/* sidebar */
.left-sidebar{
  background: var(--sidebar-bg) !important; 
  color: var(--sidebar-text) !important;
  
}
.left-sidebar .sidebar-item a{ 
  color: var(--sidebar-text) !important; }

/* card color */
.card {
  background: var(--card-bg) !important; 
  color: var(--card-text)
}

/* table color  */
.table-heading{
  background: var(--table-heading-bg) !important;
  color: var(--tableheader-textcolor)
}

.table{
color: var(--tableColor);
} 

/* for h1 h2 */
h1{color:var(--h1-color)} 
h2{color:var(--h2-color)} 
h3{color:var(--h3-color)}
h4{color:var(--h4-color)} 
h5{color:var(--h5-color)}
h6{color:var(--h6-color)}


/* Save btn  blue ---*/
.btn-save{ 
  background: var(--btn-save-bg) !important; 
  color: var(--btn-save-text) !important; 
  border-radius: var(--rounded);
 }
.btn-save:hover{ 
  background: var(--btn-save-hover) !important;
 }

/* edit button  green*/
.btn-edit{ 
  background: var(--btn-edit-bg) !important; 
  color: var(--btn-edit-text) !important;
  border-radius: var(--rounded); 
}

.btn-edit:hover{
   background: var(--btn-edit-hover) !important; }


/* warning btn yellow */
.btn-warning{ 
  background: var(--btn-warning-bg) !important; 
  color: var(--btn-warning-text) !important; 
  border-radius: var(--rounded);
 }

.btn-warning:hover{ background: var(--btn-warning-hover) !important; }


/* delete btn  red*/
.btn-delete{
   background: var(--btn-delete-bg) !important; 
   color: var(--btn-delete-text) !important; 
   border-radius: var(--rounded);
   }

.btn-delete:hover{ 
  background: var(--btn-delete-hover) !important; }


/* cancel btn grey */
.btn-cancel{ 
  background: var(--btn-cancel-bg) !important; 
  color: var(--btn-cancel-text) !important;
   border-radius: var(--rounded); 
}

.btn-cancel:hover{ background: var(--btn-cancel-hover) !important; }


/* form label */
.col-form-label{ 
  color: var(--input-label-color); 
  font-size: var(--input-label-size);
 }


 /* border radius */
.rounded-var{ 
  border-radius: var(--rounded);
 }