/* BACKGROUNDS */
/* COMMON */
:root {
  --bg_1_lvl: color-mix(
    in srgb,
    var(--overlay_1_lvl_bg_color) var(--overlay_1_lvl_bg_percentage),
    var(--primary-color)
  );

  --bg_2_lvl: color-mix(
    in srgb,
    var(--overlay_2_lvl_bg_color) var(--overlay_2_lvl_bg_percentage),
    var(--primary-color)
  );

  --bg_3_lvl: color-mix(
    in srgb,
    var(--overlay_3_lvl_bg_color) var(--overlay_3_lvl_bg_percentage),
    var(--primary-color)
  );

  --strokes: color-mix(
    in srgb,
    var(--overlay_strokes_light_color) var(--overlay_strokes_light_percentage),
    var(--primary-color)
  );

  --strokes_dark: color-mix(
    in srgb,
    var(--overlay_strokes_dark_color) var(--overlay_strokes_dark_percentage),
    var(--primary-color)
  );

  --image_placeholder: color-mix(
    in srgb,
    var(--overlay_img_placeholder_color)
      var(--overlay_img_placeholder_percentage),
    var(--primary-color)
  );
}
body {
  background: var(--bg_1_lvl);
}
.bg_1_lvl {
  background: var(--bg_1_lvl);
}
.bg_2_lvl {
  background: var(--bg_2_lvl);
}
.bg_3_lvl {
  background: var(--bg_3_lvl);
}
.sideBarNav,
.defaultHeader {
  background: var(--bg_3_lvl);
}
.shadow_1_lvl {
  -webkit-box-shadow: var(--shadow_1_lvl);
  box-shadow: var(--shadow_1_lvl);
}
.header-bg {
  background-color: var(--bg_3_lvl);
}
@media only screen and (min-width: 992px) {
  .header-bg-desktop {
    background: var(--bg_1_lvl);
  }
}
.sales_section,
.pricing_card,
.dash_container,
.add_meal_recipe_card {
  border: 1px solid var(--strokes);
  background: var(--bg_3_lvl);
}