/* COLORS */

:root {
  /* SPONSOR EXTRA */

  --app-bg-gradient: #00000030;

  --app-notification-sponsor: #132b14;
  --app-notification-sponsor-dim: #132b14A0;

  /* BASE COLORS */

  --app-bg: #302e33;
  --app-bg-dim: #201e23d0;
  --app-bg-i: #f2f4f7d0;

  --app-bg-nav: #302e33a0;

  --app-txt: #f2f4f7;
  --app-txt-i: #232323;
  --app-txt-disabled: #f2f4f760;
  --app-txt-dim: #f2f4f7D0;
  --app-txt-dimer: #f2f4f720;

  --app-bg-whitest: #f2f4f7;
  --app-bg-darkest: #000000;
  --app-txt-whitest: #f2f4f7;
  --app-txt-darkest: #232323;

  --app-overlay-1: #000000a0;
  --app-overlay-2: #00000020;
  --app-overlay-3: #00000060;

  --app-separator: #fffdfc20;

  --app-shadow: #222222;

  /* BUTTONS */

  --button-bg: #f2f4f7;
  --button-txt: #232323;

  /* CALLS */

  --calls-overlay-bg: #000000c0;
  --calls-txt: #f2f4f7;

  --calls-cancel-overlay-bg: #000000c0;
  --calls-cancel-txt: #f2f4f7;

  --call-cancel-yes-bg: #af8f26;
  --call-cancel-yes-txt: #ffffff;

  --call-cancel-no-bg: #4e4e4e;
  --call-cancel-no-txt: #ffffff;

  --call-to-point-bg: #f2f4f7;
  --call-to-point-txt: #232323;

  --call-to-cash-bg: #3e8f5a;
  --call-to-cash-txt: #ffffff;

  --call-to-card-bg: #0d4292;
  --call-to-card-txt: #ffffff;

  --call-active-bg: #00ff44;
  --call-active-txt: #ffffff;

  --call-confirmed-bg: #3771c8;
  --call-confirmed-txt: #ffffff;

  --calls-popup-overlay-bg: #3d3e66;
  --calls-popup-txt: #f2f4f7;

  /* NOTIFICATIONS */

  --app-notification-success: #3e8f5a;
  --app-notification-success-dim: #3e8f5a60;

  --app-notification-info: #3d3e66;
  --app-notification-info-dim: #3d3e6660;

  --app-notification-warning: #adaf2a;
  --app-notification-warning-dim: #adaf2a60;

  --app-notification-danger: #C54242;
  --app-notification-danger-dim: #C5424260;

  --app-notification-info-light: #3771c8;
  --app-notification-info-light-dim: #3771c860;

  --app-notification-txt: #f2f4f7;

  /* PRIMARY */

  --app-primary-success: #00aa00;
  --app-primary-success-dim: #00aa0060;

  --app-primary-info: #374677;
  --app-primary-info-dim: #37467760;

  --app-primary-warning: #aaaa00;
  --app-primary-warning-dim: #aaaa0060;

  --app-primary-danger: #ff0000;
  --app-primary-danger-dim: #ff000060;

  --app-primary-txt: #f2f4f7;

  /* BASIC LOADING */

  --basic-loading-bg: #000000;
  --basic-loading-txt: #ffffff;

  /* BREAD CRUMB TRAIL */

  --bread-crumb-trail-bg: transparent;
  --bread-crumb-trail-txt: #f2f4f7;

  /* SEARCH */

  --search-bg: #f2f4f7;
  --search-txt: #232323;

  /* TAGS */

  --tags-bg: #3d3e66;
  --tags-txt: #f2f4f7;

  /* PRODUCT FULL */

  --product-full-bg: #030303;
  --product-full-bg-mid: #090909;
  --product-full-txt: #f2f4f7;

  /* PRODUCT */

  --product-bg: #f2f4f7;
  --product-txt: #132b14;
  --product-txt-dim: #232323D0;
  --product-txt-dimer: #23232390;
  --product-price-bg: #232323;
  --product-price-txt: #f2f4f7;
  --product-add-item: #3d3e66;

  /* TOPPINGS */

  --app-toppings-button-bg: #dbae31;
  --app-toppings-button-txt: #232323;

  --app-toppings-bg: #133D16;
  --app-toppings-txt: #f2f4f7;

  --app-toppings-selected-bg: #dbae31;
  --app-toppings-selected-txt: #f2f4f7;

  --app-toppings-button-add-bg: #f2f4f7;
  --app-toppings-button-add-txt: #302e33;

  /* PLACEHOLDER */

  --app-placeholder-bg: #232323;

  /* GRADIENTS */

  --app-gradient-color-1: #434A47A0;
  --app-gradient-color-2: #4C544FA0;
  --app-gradient-color-3: #3D3D3DA0;
  --app-gradient-color-4: #4E544CA0;
  --app-gradient-color-5: #474A43A0;

  /* FADERS */

  --fader-start: #302e3300;

  --fader-top-overlay: #181818a0;
  --fader-top-glass: #302e3390;

  --fader-botom-overlay: #000000C0;

  /* GDPR */

  --gdpr-button-bg: #ffd504;
  --gdpr-button-txt: #4e503b;
  --gdpr-container-bg: #302e33;
  --gdpr-container-txt: #f2f4f7;

  /* DISTANCES */

  --d2: 2px;
  --d4: 4px;
  --d8: 8px;
  --d16: 16px;
  --d24: 24px;
  --d32: 32px;
  --d64: 64px;
}

body {
 background-color: #232323;
}

.bg-app-call-product {
  background: #302e33a0;
}

.txt-app-call-product-order {
  color: #f1f1f1;
}

.txt-app-call-product-name {
  color: #f1f1f1;
}

.bg-app-linear90 {
  background: linear-gradient(90deg, var(--app-bg-gradient) 0%, transparent 50%, var(--app-bg-gradient) 100%);
}