:root {
    --primary-color: #053851;
    --primary-hover-color: #042a3d;
    --secondary-color: #0dc2f2;
    --secondary-hover-color: #0c9fc7;
    --white-color: #FCFCFF;
    --dark-color: #121212;
    --deep-gray-color: #2A2A2A;
    --info-color: #0078D6;
    /* --success-color: #00AF54; */
    --success-color: #53A753;
    /* --pending-color: #F29339; */
    --pending-color: #F08622;
    --error-color: #E03616;
  
 
    --primary-color-50: #e3f0f4;
    --primary-color-100: #b8d7e2;
    --primary-color-200: #8abccd;
    --primary-color-300: #5ca2b8;
    --primary-color-400: #3d8ea7;
    --primary-color-500: #1f7a96;
    --primary-color-600: #1b6c86;
    --primary-color-700: #155770;
    --primary-color-800: #10435a;
    --primary-color-900: #0b3447;
    --primary-color-1000: #003B78;
    
    --info-color-600: #0094BC;
  
    --secondary-color-30: #f2f8f9;
    --secondary-color-50: #E6F2F4;
    --secondary-color-100: #B1D8DD;
    --secondary-color-200: #8CC5CC;
    --secondary-color-300: #57AAB5;
    --secondary-color-400: #3699A6;
    --secondary-color-500: #048090;
    --secondary-color-600: #047483;
    --secondary-color-700: #035B66;
    --secondary-color-800: #02464F;
    --secondary-color-900: #02363C;
  
    --black-color-50: #E6E6E6;
    --black-color-100: #B0B0B0;
    --black-color-200: #8A8A8A;
    --black-color-300: #545454;
    --black-color-400: #333333;
    --black-color-500: #000000;
    --black-color-600: #000000;
    --black-color-700: #000000;
    --black-color-800: #000000;
    --black-color-900: #000000;
  
    --white-color-50: #FFFFFF;
    --white-color-100: #FFFFFE;
    --white-color-200: #FFFFFE;
    --white-color-300: #FFFFFD;
    --white-color-400: #FFFFFD;
    --white-color-500: #FFFFFC;
    --white-color-600: #E8E8E5;
    --white-color-700: #B5B5B3;
    --white-color-800: #8C8C8B;
    --white-color-900: #6B6B6A;
  
    --grey-color-50: #FEFEFE;
    --grey-color-100: #FBFBFB;
    --grey-color-200: #F9F9F9;
    --grey-color-300: #F7F7F7;
    --grey-color-400: #F5F5F5;
    --grey-color-500: #F3F3F3;
    --grey-color-600: #DDDDDD;
    --grey-color-700: #ADADAD;
    --grey-color-800: #868686;
    --grey-color-900: #666666;
  
    --px-4: 4px;
    --px-8: 8px;
    --px-9: 9px;
    --px-10: 10px;
    --px-12: 12px;
    --px-14: 14px;
    --px-16: 16px;
    --px-18: 18px;
    --px-20: 20px;
    --px-22: 22px;
    --px-24: 24px;
    --px-26: 26px;
    --px-28: 28px;
    --px-30: 30px;
    --px-32: 32px;
    --px-40: 40px;
    --px-48: 48px;
    --px-64: 64px;
    --px-80: 80px;
    --px-96: 96px;
    --px-128: 128px;
    --px-160: 160px;
    --px-192: 192px;
    --px-224: 224px;
    --px-256: 256px;
  
    --shadow-md: 0px 46px 13px 0px rgba(32, 23, 81, 0.00), 0px 30px 12px 0px rgba(32, 23, 81, 0.00), 0px 17px 10px 0px rgba(32, 23, 81, 0.01), 0px 7px 7px 0px rgba(32, 23, 81, 0.02), 0px 2px 4px 0px rgba(32, 23, 81, 0.02);
  
    --shadow-lg: 0px 62px 17px 0px rgba(32, 23, 81, 0.00), 0px 40px 16px 0px rgba(32, 23, 81, 0.00), 0px 22px 13px 0px rgba(32, 23, 81, 0.01), 0px 10px 10px 0px rgba(32, 23, 81, 0.02), 0px 2px 5px 0px rgba(32, 23, 81, 0.02);
  
    --shadow-xl: 0px 87px 24px 0px rgba(32, 23, 81, 0.00), 0px 55px 22px 0px rgba(32, 23, 81, 0.00), 0px 31px 19px 0px rgba(32, 23, 81, 0.02), 0px 14px 14px 0px rgba(32, 23, 81, 0.03), 0px 3px 8px 0px rgba(32, 23, 81, 0.03);
  
    --shadow-2xl: 0px 93px 26px 0px rgba(32, 23, 81, 0.00), 0px 60px 24px 0px rgba(32, 23, 81, 0.01), 0px 34px 20px 0px rgba(32, 23, 81, 0.02), 0px 15px 15px 0px rgba(32, 23, 81, 0.03), 0px 4px 8px 0px rgba(32, 23, 81, 0.04);
  
    --shadow-3xl: 9px 134px 38px 0px rgba(32, 23, 81, 0.00), 6px 86px 34px 0px rgba(32, 23, 81, 0.01), 3px 48px 29px 0px rgba(32, 23, 81, 0.03), 1px 21px 21px 0px rgba(32, 23, 81, 0.04), 0px 5px 12px 0px rgba(32, 23, 81, 0.05);
    
    --bar-max-value:15%
}
  
  /* css break point */
  /* :root {
      --bs-breakpoint-xs: 0;
      --bs-breakpoint-sm: 576px;
      --bs-breakpoint-md: 768px;
      --bs-breakpoint-lg: 992px;
      --bs-breakpoint-xl: 1200px;
      --bs-breakpoint-xxl: 1400px;
  } */