:root {
  --primary: #0da4a7;
  --secondary: #067173;
  --primaryLight: #fbf9ff;
  --text-primary: #212529;
  --text-secondary: #A19E9E;
  --border: #dadce0;
  --gray-light: #707070;
  --primary-border: #58d6b7;
  --primary-bg-light: #e0ffff;
  --btn-bg-1: #058cff;
  --item-label-color: #0733d4;
  --orang: #fbb323;
  --popup-bg: rgba(0, 0, 0, 0.4);
  --disable-bg: #eee;
  --disable-font: #b3b3b3;
  --bg-1: #e6ffff;
--gray-text:     rgb(108, 117, 125);



  --tw-text-opacity: 1;
  --text-white: rgb(255 255 255/1 );
  --text-black: rgb(0 0 0/1 );
  --tw-bg-opacity: 1;
  --bg-primary-light: rgb(90 204 230/1 );
  --tw-border-opacity: 1;
  --bg-secondary-dark: rgb(4 28 74/1 );
  --border-secondary-light:rgb(58 63 153 /1);

  --bg-primary-dark: rgb(9 12 41/1);
  --bg-secondary-main: rgb(43 22 107 /1);
  --text-primary-active:rgb(52 140 253/1 );
  --bg-black:rgb(0 0 0 /1 );
  --text-secondary-active: rgb(123 178 206/1);
  --dark-dark-blue:rgb(0 32 94);
--bg-image-light:url("/assets/img/pattern4.png");
  --logo-img-light: url("/assets/img/nafis-logo-light-theme.png");
/*dark*/
  /*Color*/

  /*avid*/
  /*Color*/
  --gray-white:#f2f2f2;
  --white:#fff;
  --black: rgb(0 0 0);
  --yellow:rgb(254, 252, 103);
  --gray-white-porpule:#e9e5f4;
  --light-blue:#009aee;
  --light-dark-blue:#0089d4;
  --dark-blue:#034681;
  --bg-image-dark:url("/assets/img/pattern.png");
  --purpule:#6a51b2;
  --logo-img-dark: url("/assets/img/nafis-logo-dark-theme.png");


}
body.dark{
  --bg-header:var(--dark-dark-blue);
  --bg-main:var(--black);
  --bg-image:var(--bg-image-light);
  --bg-grid:var(--bg-primary-dark);
  --bg-grid-row:var(--bg-primary-dark);
  --text-grid-row:var(--white);
  --bg-grid-row-hover:var(--bg-secondary-main);

  --bg-Search-item:var(--bg-primary-dark);
  --bg-btn-main: var(--bg-primary-light);
  --text-btn-main: var(--black);
  --bg-btn-main-hover:var(--text-secondary-active);
  --bg-control-tools:var(--bg-secondary-dark);
  --bg-t-dicom-btn:var(--white);

  --bg-t-dicom-btn-hover:var(--bg-primary-dark);
  --t-dicom-btn-hover:var(--bg-primary-light);
  --bg-t-dicom-btn-active:var(--bg-primary-dark);
  --t-dicom-btn-active:var(--bg-primary-light);
  --bg-login:var(--bg-secondary-dark);
  --border-login:var(--border-secondary-light);
  --h1-login:var(--bg-primary-light);
  --h2-login:var(--text-white);
  --en-title-login:var(--text-white);
--bg-dropdown-menu:var(--bg-secondary-dark);
  --bg-dropdown-menu-hover: var(--bg-primary-light);

  --bg-tooltip:var(--bg-secondary-dark);
  --tooltip:var(--text-white);
  --tooltip-border:var(--bg-primary-dark);
  --dropdown-menu-btn-hover:var(--white);
  --dropdown-menu-btn-span:var(--text-secondary-active);
  --bg-report:var(--bg-black);
  --bg-main-panel-right: var(--bg-primary-dark) ;
  --border-groupbox:#e8e8e8;
  --bg-data-permission-tab-menu:var(--bg-secondary-dark);
--float-label:var(--white);
  --report-total-text:var(--white);
  --text-login-tab:var(--white);
  --login-tab-bg:rgba(255,255,255,.3);
  --logo-img:var(--logo-img-dark);
}
body.light{
  --bg-header:var(--dark-blue);
  --bg-main:var(--white);
  --bg-image:var(--bg-image-dark);
  --bg-grid:var(--gray-white);
  --bg-grid-row:var(--white);
  --text-grid-row:var(--black);
  --bg-grid-row-hover:var(--yellow);

  --bg-Search-item:var(--gray-white-porpule);
  --bg-btn-main: var(--light-blue);
  --text-btn-main: var(--white);
  --bg-btn-main-hover:var(--light-dark-blue);
  --bg-control-tools:var(--purpule);
  --border-search-item:var(--light-blue);
  --bg-t-dicom-btn:var(--white);
  --bg-t-dicom-btn-hover:var(--gray-white-porpule);
  --t-dicom-btn-hover:var(--black);
  --bg-t-dicom-btn-active:var(--gray-white-porpule);
  --t-dicom-btn-active:var(--black);
  --bg-login:var(--gray-white-porpule);
  --border-login:var(--purpule);
  --h1-login:var(--purpule);
  --h2-login:var(--purpule);
--en-title-login:var(--purpule);
  --bg-dropdown-menu:var(--purpule);
  --bg-dropdown-menu-hover: var(--gray-white-porpule);
  --bg-tooltip:var(--purpule);
  --tooltip:var(--text-white);
  --tooltip-border:var(--gray-white-porpule);
  --dropdown-menu-btn-hover:var(--black);
--dropdown-menu-btn-span:var(--light-blue);
  --bg-report:var(--white);
  --bg-main-panel-right: var(--gray-white-porpule) ;
  --border-groupbox:var(--light-blue);
  --bg-data-permission-tab-menu:var(--purpule);
  --float-label:var(--gray-text);
  --report-total-text:var(--black);
  --text-login-tab:var(--black);
  --login-tab-bg:rgba(255,255,255,1);
  --logo-img:var(--logo-img-light);
}