/*=============================================
=            CSS Index            =
=============================================

    -> Default styles

/*=====  End of CSS Index  ======*/

/*=============================================
=            Theme default CSS            =
=============================================*/

:root {
  /* [START] commodity */
  --blue-commodity: #122c91;
  --blue-commodity-100: #5372ea;
  --blue-commodity-200: #254ce4;
  --blue-commodity-300: #254ce4;
  --blue-commodity-400: #183abf;
  --blue-commodity-500: #122c91;
  --blue-commodity-600: #0f257a;
  --blue-commodity-700: #0c1e64;
  --blue-commodity-800: #0a174d;
  --blue-commodity-900: #071136;

  --yellow-commodity-100: #ffe4cc;
  --yellow-commodity-200: #ffca99;
  --yellow-commodity-300: #ffaf66;
  --yellow-commodity-400: #ff9533;
  --yellow-commodity-500: #ff7a00;
  --yellow-commodity-600: #cc6200;
  --yellow-commodity-700: #994900;
  --yellow-commodity-800: #663100;
  --yellow-commodity-900: #331800;
  /* [END] commodity */

  --bootstrap-blue: #0d6efd;
  --warning-pils: #ffc107;
  --orange-price: #ee4d2d;
  --orange-promotion: #ff7f17;
  --success: #198754;
  --link: #0066cc;
  --info: #0dcaf0;
  --warning: #fff2c1;
  --warning-text: #664d03;
  --danger: #dc3545;
  --light: #fff;
  /* --netral-200: #e6e6e6; */
  --netral-200: #eeeeee;
  --netral-300: #cccccc;
  --netral-400: #b3b3b3;
  --netral-500: #999999;
  --netral-600: #6b6b6b;
  --netral-700: #525252;
  --netral-800: #383838;
  --netral-900: #282828;
  --dark: #1f1f1f;
  --muted: #6c757d;
  --gray: #a0a4a8;
  --gray10: #f8f9fa;
  --gray40: #e5e5e5;
  --gray60: #a0a4a8;
  --gray-notes: #666666;
  --dark-gray: #495057;
  --category-list-border: #dee2e6;
  --gray-border: #b9b9b9;
  --arrow-gray-background: #e0e1e2;
  --arrow-gray: #54595e;

  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* [START] COMMODITY TEMPLATE */
.blue-commodity {
  color: var(--blue-commodity) !important;
}

.bg-blue-commodity {
  background-color: var(--blue-commodity) !important;
}

.netral-200 {
  color: var(--netral-200) !important;
}

.netral-300 {
  color: var(--netral-300) !important;
}

.netral-400 {
  color: var(--netral-400) !important;
}

.netral-500 {
  color: var(--netral-500) !important;
}

.netral-600 {
  color: var(--netral-600) !important;
}

.netral-700 {
  color: var(--netral-700) !important;
}

.netral-800 {
  color: var(--netral-800) !important;
}

.netral-900 {
  color: var(--netral-900) !important;
}

.bg-netral-900 {
  background-color: var(--netral-900) !important;
}

.yellow-commodity-500 {
  color: var(--yellow-commodity-500) !important;
}

.bg-yellow-commodity-300 {
  background-color: var(--yellow-commodity-300) !important;
}

.bg-yellow-commodity-500 {
  background-color: var(--yellow-commodity-500) !important;
}
/* [END] COMMODITY TEMPLATE */

.text-color-dark,
.text-dark {
  color: #1f1f1f !important;
}

.hover-color-dark:hover {
  color: black !important;
}

.text-color-light,
.text-light {
  color: white !important;
}

.hover-color-light:hover {
  color: white !important;
}

.bg-gray10 {
  background-color: var(--gray10);
}

.bg-netral-200 {
  background-color: var(--netral-200);
}

.bg-netral-300 {
  background-color: var(--netral-300);
}

.border-1px-netral-200 {
  border: 1px solid var(--netral-200);
}

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-orange-promotion {
  background-color: var(--orange-promotion) !important;
}