:root {

  --background-900: #ffffff;
  --background-800: #FAFAFA;
  --background-700: #E0E1E2;
  --background-600: #C7C9CB;
  --background-500: #AEB1B3;
  --background-400: #95989C;
  --background-300: #7B8084;
  --background-200: #585B5F;
  --background-100: #404143;
  --background-50: #2A2B2C;
  --background-0: #1D1E1F;

  --background-0-30: rgba(255, 255, 255, 0.3);

  --primary-900: #ffffff;
  --primary-800: #FAFAFA;
  --primary-700: #E0E1E2;
  --primary-600: #C7C9CB;
  --primary-500: #AEB1B3;
  --primary-300: #7B8084;
  --primary-200: #585B5F;
  --primary-100: #404143;
  --primary-50: #2A2B2C;

  /****************************
  GREEN-PALETTE for Dark Theme
  ****************************/
  --green-dark-900: #FFFFFF;
  --green-dark-800: #F7FCF9;
  --green-dark-700: #E8F7ED;
  --green-dark-600: #D2EFDC;
  --green-dark-500: #B3E5C4;
  --green-dark-400: #86D5A1;
  --green-dark-300: #59C57D;
  --green-dark-200: #3AA65F;
  --green-dark-100: #2D8149;
  --green-dark-50: #256A3C;
  --green-dark-0: #1E5631;

  /**************************
  RED-PALETTE for Dark Theme
  **************************/
  --red-dark-900: #FFFFFF;
  --red-dark-800: #FFF4F4;
  --red-dark-700: #FFD3D3;
  --red-dark-600: #FFAAAB;
  --red-dark-500: #F07570;
  --red-dark-400: #EC5650;
  --red-dark-300: #EB3525;
  --red-dark-200: #D91506;
  --red-dark-100: #B80016;
  --red-dark-50: #A0001A;
  --red-dark-0: #960019;

  /*****************************
  YELLOW-PALETTE for Dark Theme
  ******************************/
  --yellow-dark-900: #FFFFFF;
  --yellow-dark-800: #FEFEF7;
  --yellow-dark-700: #FEFADD;
  --yellow-dark-600: #FDF7C4;
  --yellow-dark-500: #FCF3AA;
  --yellow-dark-400: #FBF091;
  --yellow-dark-300: #FBED77;
  --yellow-dark-200: #FAE95E;
  --yellow-dark-100: #F9E644;
  --yellow-dark-50: #F9E32B;
  --yellow-dark-0: #E1CF25;

  --info-800: #FFCD00DD;
  --info-780: #FEDF47;
  --info-750: #FFCD00;
  --info-50: #343434;

  --secondary-700: #891323;
  --secondary-100: #FFFBF1;

  --success-300: #0e9f6e;
  --success-200: #31c48d;

  --error-400: #ff6565;
  --error-300: #ff6c6c;
  --error-200: #ff9898;
  --error-100: #fdf2f2;

  --warning-200: #ff5a1f;

  --special-separator: #d9d9d9;
  --special-star: #eab308;
  --item-no-image: rgba(123, 128, 132, 0.15);

  --overlay: rgb(0 0 0 / 0.15);
  --overlay-2: rgb(0 0 0 / 0.60);

  --input-control-check: #1d4ed8;

  --text-c-900: var(--background-900);
  --text-c-800: var(--background-800);
  --text-c-700: var(--background-700);
  --text-c-600: var(--background-600);
  --text-c-500: var(--background-500);
  --text-c-400: var(--background-400);
  --text-c-300: var(--background-300);
  --text-c-200: var(--background-200);
  --text-c-100: var(--background-100);
  --text-c-50: var(--background-50);
  --text-c-0: var(--background-0);

  --border-c-900: var(--background-900);
  --border-c-800: var(--background-800);
  --border-c-700: var(--background-700);
  --border-c-600: var(--background-600);
  --border-c-500: var(--background-500);
  --border-c-300: var(--background-300);
  --border-c-200: var(--background-200);
  --border-c-100: var(--background-100);
  --border-c-0: var(--background-0);


  /**********************
For DEFAULT-DARK palette
**********************/
  .outline-add-button {
    outline-color: var(--background-500);
  }

  .bg-category-menu {
    background-color: var(--background-900);
  }

  .bg-color-palette-bottom-button {
    background-color: var(--background-900);
  }

  .outline-color-palette-bottom-button {
    outline: 0px;
  }

  .outline-color-palette-button {
    outline-color: var(--background-900);
  }

  /********************
  For Green-Dark palette
  **********************/
  body.green .bg-primary-100,
  body.green .bg-category-menu,
  body.green .bg-primary-200 {
    background-color: var(--green-dark-0);
    color: var(--background-900);
    outline: 0px;
  }

  body.green .outline-add-button {
    outline-color: var(--green-dark-50);
  }

  body.green .bg-color-palette-bottom-button {
    background-color: var(--green-dark-0);
    color: var(--green-dark-900);
  }

  body.green .outline-color-palette-button {
    outline-color: var(--green-dark-0);
  }

  body.green input[type="checkbox"]:checked,
  body.green input[type='checkbox']:checked:focus,
  body.green input[type='checkbox']:checked:hover {
    background-color: var(--green-dark-0);
  }

  body.green input[type="radio"]:checked,
  body.green input[type="radio"]:checked:focus,
  body.green input[type="radio"]:checked:hover {
    background-color: var(--green-dark-0);
  }

  body.green .focus-outline-primary-700:focus {
    border: none !important;
    outline-width: 2px;
    outline-offset: 0;
    outline-color: var(--green-dark-100);
    --tw-ring-color: var(--green-dark-100);
    --tw-ring-shadow: none;
  }

  body.green .check-dropdown-color-palette {
    color: var(--green-dark-200);
  }

  body.green .text-anchor-tag-color-palette {
    color: var(--green-dark-300);
  }

  /********************
  For Red-Dark palette
  *********************/
  body.red .bg-primary-100,
  body.red .bg-category-menu,
  body.red .bg-primary-200 {
    background-color: var(--red-dark-0);
    color: var(--background-900);
    outline: 0px;
  }

  body.red .outline-add-button {
    outline-color: var(--red-dark-50);
  }

  body.red .bg-color-palette-bottom-button {
    background-color: var(--red-dark-0);
    color: var(--red-dark-900);
  }

  body.red .outline-color-palette-button {
    outline-color: var(--red-dark-0);
  }

  body.red input[type="checkbox"]:checked,
  body.red input[type='checkbox']:checked:focus,
  body.red input[type='checkbox']:checked:hover {
    background-color: var(--red-dark-0);
  }

  body.red input[type="radio"]:checked,
  body.red input[type="radio"]:checked:focus,
  body.red input[type="radio"]:checked:hover {
    background-color: var(--red-dark-0);
  }

  body.red .focus-outline-primary-700:focus {
    border: none !important;
    outline-width: 2px;
    outline-offset: 0;
    outline-color: var(--red-dark-100);
    --tw-ring-color: var(--red-dark-100);
    --tw-ring-shadow: none;
  }

  body.red .check-dropdown-color-palette {
    color: var(--red-dark-200);
  }

  body.red .text-anchor-tag-color-palette {
    color: var(--red-dark-300);
  }

  /***********************
  For Yellow-Dark palette
  ************************/
  body.yellow .bg-primary-100,
  body.yellow .bg-category-menu,
  body.yellow .bg-primary-200 {
    background-color: var(--yellow-dark-50);
    color: var(--background-0);
    outline: 0px;
  }

  body.yellow .outline-add-button {
    outline-color: var(--yellow-dark-100);
  }

  body.yellow .bg-color-palette-bottom-button {
    background-color: var(--yellow-dark-50);
    color: var(--background-0);
  }

  body.yellow .outline-color-palette-button {
    outline-color: var(--yellow-dark-50);
  }

  body.yellow input[type="checkbox"]:checked,
  body.yellow input[type='checkbox']:checked:focus,
  body.yellow input[type='checkbox']:checked:hover {
    background-color: var(--yellow-dark-0);
  }

  body.yellow input[type="radio"]:checked,
  body.yellow input[type="radio"]:checked:focus,
  body.yellow input[type="radio"]:checked:hover {
    background-color: var(--yellow-dark-0);
  }

  body.yellow .focus-outline-primary-700:focus {
    border: none !important;
    outline-width: 2px;
    outline-offset: 0;
    outline-color: var(--yellow-dark-100);
    --tw-ring-color: var(--yellow-dark-100);
    --tw-ring-shadow: none;
  }

  body.yellow .check-dropdown-color-palette {
    color: var(--yellow-dark-200);
  }

  body.yellow .text-anchor-tag-color-palette {
    color: var(--yellow-dark-300);
  }

  /*********************************************
  Common for Red, Green & Yellow Color Palettes
  **********************************************/
  .bg-closed-dialog-message {
    background-color: var(--primary-100);
  }

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

  .text-info-800 {
    color: var(--info-780);
  }

  .item-info-tag-icon {
    color: var(--text-c-600);
  }

  .bg-color-pallete-search {
    background-color: var(--background-50);
  }

  body.red .bg-primary-200:disabled,
  body.green .bg-primary-200:disabled,
  body.yellow .bg-primary-200:disabled {
    background-color: var(--background-200);
    color: var(--text-c-400);
  }

  body.red .order-search-icon,
  body.green .order-search-icon,
  body.yellow .order-search-icon {
    color: var(--primary-600);
  }

  body.red .color-palette-menu-category-chevron,
  body.green .color-palette-menu-category-chevron,
  body.yellow .color-palette-menu-category-chevron,
  .text-sub-cat-label {
    color: var(--background-800);
  }

  body.red .menu-items-separator,
  body.green .menu-items-separator,
  body.yellow .menu-items-separator {
    border-color: var(--background-100);
    border-radius: 0.5px;
  }

  .item-no-image-icon {
    color: var(--primary-500);
  }

  .item-no-image {
    background-color: var(--item-no-image);
  }

  .restaurant-name {
    color: var(--background-600);
  }

  @media (max-width: 768px) and (min-height: 800px) {
    .btn-order-registration-continue {
      position: fixed;
      padding-left: 24px;
      padding-right: 24px;
      padding-bottom: 20px;
    }
  }

  .header-icons {
    color: var(--background-700);
  }

  .menu-items-separator {
    border-color: var(--background-100);
    border-radius: 0.5px;
  }
}