:root {

    /* body color variable */
    --bg-body : var(--gray-100);
    --text-body: var(--gray-500);

     /* heading color variable */
    --text-heading : var(--gray-700);
    --text-heading-small :  var(--gray-500);

    /* spinner-small color variable  */
    --border-spinner-small : var(--white);
    --border-top-spinner-small : var(--teal-500);

    /* navbar color variable */
    --text-navbar :  var(--gray-400);
    --text-navbar-default : var(--cyan-500);
    --text-navbar-nav-open : var(--gray-700);
    --border-navbar-nav-dropdown : var(--slate-100);
    --bg-icon-navbar : var(--gray-700);
    --bg-navbar-divider : var(--slate-200);
    --bg-navbar-default : var(--white);
    --bg-navbar-inverse : var(--gray-700);

    /* sidebar color variable */
    --bg-sidebar : var(--gray-700);
    --text-sidebar-nav-li-a : var(--gray-400);
    --bg-sidebar-nav-li-active : var(--lime-500);
    --bg-sidebar-nav-li-label-success : var(--lime-600);
    --text-sidebar : var(--white);
    --text-sidebar-active : var(--lime-500);
    --text-sidebar-sub-menu : var(--gray-700);

    /* page header color variable */
    --text-page-header : var(--gray-700);

    /* breadcrumb color variable */
    --text-breadcrumb : var(--gray-700);

    /* form control color variable */
    --border-form-control : var(--slate-400);

    /* form group */
    --border-form-horizontal : var(--slate-100);

    /* has color variable */
    --text-has-success : var(--lime-500);
    --border-has-success : var(--lime-500);
    --border-focus-has-success : var(--lime-600);

    --text-has-warning : var(--amber-500);
    --border-has-warning : var(--amber-500);
    --border-focus-has-warning : var(--amber-600);

    --text-has-error :  var(--red-500);
    --border-has-error : var(--red-500);
    --border-focus-has-error : var(--red-600);

    /* select color variable */
    --border-select : var(--slate-400);

    /* legend color variable */
    --border-legend : var(--slate-200);

    /* dropdown item color variable */
    --text-dropdown-item : var(--gray-700);
    --bg-dropdown-item : var(--gray-50);
    --bg-dropdown-item-active : var(--sky-300);
    --border-dropdown-divider : var(--slate-100);
    --border-dropdown-media : var(--slate-100);
    --border-dropdown-item-active : var(--cyan-500);
    --border-bottom-dropdown-item : transparent;

    /* alert color variable */
    --bg-alert-success : var(--green-300);
    --bg-alert-info : var(--sky-300);
    --bg-alert-danger : var(--red-300);
    --bg-alert-warning : var(--orange-100);

    /* note color variable */
    --bg-note-success : var(--green-300);
    --border-note-success : var(--lime-600);
    --text-note-success : var(--lime-600);

    --bg-note-danger : var(--red-300);
    --border-note-danger : var(--red-600);
    --text-note-danger : var(--red-600);

    --bg-note-info : var(--sky-300);
    --border-note-info : var(--cyan-600);
    --text-note-info : var(--cyan-600);

    --bg-note-warning : var(--orange-100);
    --border-note-warning : var(--amber-600);
    --text-note-warning : var(--amber-600);

    /* badge & label color variable  */
    --text-label : var(--gray-700);
    --bg-badge-label-default : var(--slate-300);
    --bg-badge-label-danger : var(--red-500);
    --bg-badge-label-warning : var(--warning);
    --bg-badge-label-success : var(--lime-500);
    --bg-badge-label-info : var(--cyan-500);
    --bg-badge-label-primary : var(--blue-400);
    --bg-badge-label-inverse : var(--gray-700);

    /* pagination color variable  */
    --text-pagination : var(--gray-700);
    --bg-pagination-focus : var(--slate-200);
    --bg-pagination-active : var(--gray-200);
    --border-pagination : var(--gray-300);

    /* Progress bar  color variable */
    --bg-progress : var(--slate-200);
    --bg-progress-bar : var(--blue-400);
    --bg-progress-bar-success : var(--lime-500);
    --bg-progress-bar-info : var(--cyan-500);
    --bg-progress-bar-warning : var(--amber-500);
    --bg-progress-bar-danger : var(--red-500);
    --bg-progress-bar-inverse : var(--gray-700);

    /* nav-tab && nav-pills color variable */
    --bg-nav-tabs-inverse : var(--gray-800);
    --text-nav-tabs-inverse : var(--gray-700);
    --text-nav-pills : var(--gray-700);
    --bg-nav-pills-active : var(--gray-700);
    --nav-link-text: var(--black);
    /* button color variable */
    --text-btn-default : var(--white);
    --bg-btn-default : var(--slate-300);
    --border-btn-default : var(--slate-300);
    --bg-btn-default-hover : var(--gray-400);
    --border-btn-default-hover : var(--gray-400);

    --text-btn-white : var(--gray-700);
    --bg-btn-white : var(--white);
    --bg-btn-white : var(--slate-200);
    --bg-btn-white-hover :var(--slate-200);
    --border-btn-white-hover : var(--gray-300);
    --btn-white-without-border-hover : var(--slate-100);
    --btn-white-without-border-active : var(--slate-50);

    --text-btn-inverse :  var(--white);
    --bg-btn-inverse :  var(--gray-700);
    --border-btn-inverse :  var(--gray-700);
    --bg-btn-inverse-hover :  var(--gray-800);
    --border-btn-inverse-hover :  var(--gray-800);

    --text-btn-primary :  var(--white);
    --bg-btn-primary :  var(--blue-400);
    --border-btn-primary :  var(--blue-400);
    --bg-btn-primary-hover :  var(--blue-500);
    --border-btn-primary-hover :  var(--blue-500);

    --text-btn-success :  var(--white);
    --bg-btn-success :  var(--lime-500);
    --border-btn-success :  var(--lime-500);
    --bg-btn-success-hover :  var(--lime-600);
    --border-btn-success-hover :  var(--lime-600);

    --text-btn-warning :  var(--white);
    --bg-btn-warning :  var(--amber-500);
    --border-btn-warning :  var(--amber-500);
    --bg-btn-warning-hover :  var(--amber-600);
    --border-btn-warning-hover :  var(--amber-600);

    --text-btn-danger :  var(--white);
    --bg-btn-danger :  var(--red-500);
    --border-btn-danger :  var(--red-500);
    --bg-btn-danger-hover :  var(--red-600);
    --border-btn-danger-hover :  var(--red-600);

    --text-btn-info :  var(--white);
    --bg-btn-info :  var(--cyan-500);
    --border-btn-info :  var(--cyan-500);
    --bg-btn-info-hover :  var(--cyan-600);
    --border-btn-info-hover :  var(--cyan-600);

    /* panel color variable */
    --bg-panel-inverse-heading : var(--gray-800);
    --bg-panel-success-heading : var(--lime-600);
    --bg-panel-warning-heading : var(--amber-600);
    --bg-panel-danger-heading : var(--red-600);
    --bg-panel-primary-heading : var(--blue-500);
    --bg-panel-info-heading : var(--cyan-600);
    --border-panel-heading : var(--slate-100);
    --text-panel-default : var(--gray-700);

    /* text color variable */
    --text-inverse : var(--gray-700);
    --text-inverse-a : var(--gray-500);

    --text-success : var(--lime-500);
    --text-success-a : var(--teal-400);

    --text-info : var(--cyan-500);
    --text-info-a : var(--cyan-400);

    --text-primary : var(--blue-400);
    --text-primary-a : var(--blue-600);

    --text-warning : var(--amber-500);
    --text-warning-a : var(--amber-400);

    --text-danger : var(--red-500);
    --text-danger-a : var(--red-400);

    --text-white : var(--white);
    --text-white-a : var(--sky-50);

    /* background color variable  */
    --bg-white : var(--white);
    --bg-silver-lighter : var(--gray-50);
    --bg-silver : var(--sky-50);
    --bg-silver-darker : var(--gray-400);

    --bg-black : var(--gray-700);
    --bg-black-darker : var(--gray-800);
    --bg-black-lighter : var(--gray-500);

    --bg-grey : var(--slate-300);
    --bg-grey-darker : var(--gray-400);
    --bg-grey-lighter : var(--gray-300);

    --bg-red : var(--red-500);
    --bg-red-darker : var(--red-600);
    --bg-red-lighter : var(--red-400);

    --bg-orange : var(--amber-500);
    --bg-orange-darker : var(--amber-600);
    --bg-orange-lighter : var(--amber-400);

    --bg-yellow : var(--yellow);
    --bg-yellow-darker : var(--yellow-darker);
    --bg-yellow-lighter : var(--yellow-lighter);

    --bg-green : var(--lime-500);
    --bg-lime-600 : var(--lime-600);
    --bg-green-lighter : var(--teal-400);

    --bg-blue : var(--blue-400);
    --bg-blue-darker : var(--blue-500);
    --bg-blue-lighter : var(--blue-600);

    --bg-aqua : var(--cyan-500);
    --bg-aqua-darker : var(--cyan-600);
    --bg-aqua-lighter : var(--cyan-400);

    --bg-purple : var(--purple);
    --bg-purple-darker : var(--violet-600);
    --bg-purple-lighter : var(--violet-400);

    /*  ul tagit color variable */
    --border-ul-tagit : var(--slate-400);
    --bg-ul-tagit-inverse : var(--gray-700);
    --bg-ul-tagit-white : var(--white);
    --bg-ul-tagit-primary : var(--blue-400);
    --bg-ul-tagit-info : var(--cyan-500);
    --bg-ul-tagit-success : var(--lime-500);
    --bg-ul-tagit-warning : var(--amber-500);
    --bg-ul-tagit-danger : var(--red-500);

    /* Powerange Slider color variable */
    --bg-range-quantity : var(--lime-500);
    --bg-range-quantity-red : var(--red-500);
    --bg-range-quantity-blue : var(--blue-400);
    --bg-range-quantity-purple : var(--purple);
    --bg-range-quantity-orange : var(--amber-500);
    --bg-range-quantity-black : var(--black);

    /* list email color variable */
    --text-list-email : var(--slate-200);
    --border-list-email : var(--slate-200);
    --bg-list-email-success : var(--lime-500);
    --bg-list-email-info : var(--cyan-500);
    --bg-list-email-danger : var(--red-500);
    --bg-list-email-primary : var(--blue-400);
    --bg-list-email-inverse : var(--gray-700);
    --bg-list-email-warning : var(--amber-500);
    --bg-list-email-purple : var(--purple);
    --bg-list-email-default : var(--slate-300);

    --text-list-email-title : var(--gray-800);

    /* checkbox color variable */
    --border-checkbox-label : var(--slate-400);
    --bg-checkbox : var(--blue-400);
    --border-checkbox : var(--blue-400);

    --bg-checkbox-success : var(--lime-500);
    --border-checkbox-success : var(--lime-500);

    --bg-checkbox-info : var(--cyan-500);
    --border-checkbox-info : var(--cyan-500);

    --bg-checkbox-danger : var(--red-500);
    --border-checkbox-danger : var(--red-500);

    --bg-checkbox-warning : var(--amber-500);
    --border-checkbox-warning : var(--amber-500);

    --bg-checkbox-inverse : var(--gray-700);
    --border-checkbox-inverse : var(--gray-700);

    /* radio color variable */
    --border-radio-label : var(--slate-400);
    --bg-radio : var(--blue-400);
    --border-radio : var(--blue-400);

    --bg-radio-success : var(--lime-500);
    --border-radio-success : var(--lime-500);

    --bg-radio-info : var(--cyan-500);
    --border-radio-info : var(--cyan-500);

    --bg-radio-danger : var(--red-500);
    --border-radio-danger : var(--red-500);

    --bg-radio-warning : var(--amber-500);
    --border-radio-warning : var(--amber-500);

    --bg-radio-inverse : var(--gray-700);
    --border-radio-inverse : var(--gray-700);

    /* sweet-alert color variable */
    --border-sweet-alert-success : var(--lime-500);
    --bg-sweet-alert-success : var(--lime-500);
    --border-sweet-alert-success-focus : var(--lime-600);

    --border-sweet-alert-info : var(--cyan-500);
    --bg-sweet-alert-info : var(--cyan-500);
    --border-sweet-alert-info-focus : var(--cyan-600);

    --border-sweet-alert-warning : var(--amber-500);
    --bg-sweet-alert-warning : var(--amber-500);
    --border-sweet-alert-warning-focus : var(--amber-600);

    --border-sweet-alert-danger : var(--red-500);
    --bg-sweet-alert-danger : var(--red-500);
    --border-sweet-alert-danger-focus : var(--red-600);

    /* card color variable */
    --border-card-header : var(--slate-200);
    --bg-card-primary : var(--blue-400);
    --border-card-primary : var(--blue-400);

    --bg-card-success : var(--lime-500);
    --border-card-success : var(--lime-500);

    --bg-card-info : var(--cyan-500);
    --border-card-info : var(--cyan-500);

    --bg-card-warning : var(--amber-500);
    --border-card-warning : var(--amber-500);

    --bg-card-danger : var(--red-500);
    --border-card-danger : var(--red-500);

    --bg-card-inverse: transparent;
    --text-card-inverse: rgba(0, 0, 0, 0.65);

    /* li a hover focus */

    --li-a-hover-focus : var(--gray-800);
    --li-a-text : var(--gray-400);

    /* form control color */

    --form-control-input : var(--white);
    --bg-input-group-addon : var(--slate-200);

    /* modal-header & footer color */
    --border-modal : var(--slate-200);

    /* media heading color */
    --text-media-heading : var(--gray-700);

    /* table color */
    --border-table : var(--slate-200);
    --bg-table-td : var(--white);
    --text-table-td : var(--gray-500);
    --bg-table-hover : var(--slate-200);

    /* underline color  */
    --underline : var(--slate-200);

    /* gritter text color */
    --text-gritter : var(--gray-700);
    --bg-gritter : var(--red-500);

    /* dataTables color */
    --bg-dataTables-wrapper : var(--gray-800);
    --bg-dataTables: var(--white);
    --text-dataTables: var(--gray-700);
    --border-dataTables-filter : var(--gray-100);

    /* datepicker color */
    --bg-datepicker : var(--slate-100);
    --text-daterangepicker : var(--gray-800);

    /* combobox color */
    --border-combobox-container : var(--slate-400);

    /* parsley color */
    --text-parsley : var(--gray-700);
    --border-parsley-error : var(--red-500);
    --border-parsley-success : var(--lime-500);

    /* bwizard steps color */
    --text-bwizard : var(--gray-700);

    /* fc event list color */
    --text-fc-event-list : var(--gray-700);
    --border-bg-fc-event : var(--slate-200);

    /* jqstooltip color */
    --bg-jqstooltip : var(--gray-700);

    /* result-list color */
    --bg-result-list : var(--gray-700);
    --text-result-list : var(--gray-700);

    /* todolist color */
    --text-todolist : var(--gray-700);
    --text-todolist-active : var(--lime-500);

    /* invoice-price color */
    --bg-nvoice-price : var(--gray-700);

    /* table-email color */
    --text-table-email : var(--gray-700);

    /* error-code color */
    --border-code : var(--slate-400);
    --error-code : var(--gray-700);

    /* timeline color */
    --timeline : var(--gray-700);
    --timeline-header : var(--slate-200);

    /* coming-soon color */
    --text-coming-soon : var(--lime-500);
    --text-coming-soon-content : var(--gray-700);

    /* theme-panel color */
    --text-theme-panel : var(--gray-700);
    --border-theme-panel : var(--slate-200);

    /* select2 arrow color */
    --border-select2 : var(--slate-200);
    --text-select2 : var(--gray-800);
    --bg-select-2 : var(--slate-100);
    --bg-select-2-selected : var(--gray-300);

    /* List Group Item color */
    --list-group-item :  var(--gray-700);
    --list-group-item-inverse :  var(--gray-800);
    --border-list-group-item : var(--slate-200);

    /* bootstrap-calendar color */
    --text-bootstrap-calendar : var(--gray-700);

    /* registered users list color */
    --text-registered-users-list : var(--gray-700);

    /* chats color */
    --text-chats : var(--gray-700);
    --border-chats : var(--slate-400);

    /* superbox show color */
    --superbox-show : var(--gray-700);

    /* attached document color  */
    --bg-attached-document : var(--slate-200);
    --text-attached-document : var(--gray-700);

    /* pace-activity color */
    --border-pace-activity : var(--lime-500);

    /* jstree color */
    --text-jstree  : var(--gray-700);
    --text-jstree-hover: var(--gray-700);
    --bg-jstree-hover : var(--gray-100);

    /* profile-image color */
    --border-profile : var(--slate-200);
    --text-profile-table : var(--gray-700);

    /*  Bootstrap Date Timepicker color */
    --border-bootstrap-datetimepicker : var(--slate-200);
    --text-bootstrap-datetimepicker :  var(--gray-700);

    /* top menu color  */
    --bg-top-menu : var(--gray-700);

    /*  Boxed Layout Setting color */
    --bg-boxed-layout : var(--slate-300);

    /* dropzone color */
    --bg-dropzone : var(--red-500);
    --text-dropzone : var(--gray-800);

    /* tab content */
    --tab-content: var(--slate-100);

    /* dropdown menu */
    --text-dropdown-menu: var(--gray-500);
    --bg-dropdown-menu: var(--white);
    --border-dropdown-menu : var(--white);

    /* input group */
    --text-input-group: var(--gray-500);
    --bg-input-group: var(--gray-100);
    --border-input-group: var(--slate-300);
}