/* Define global variables for general chart styles */
:root {
  --tooltip-text-color: #000;
  --outer-border-color: #e6e7eb;
  --label-color: #222;
  --grid-line-color: #e0e0e0;
  --background-color: transparent;

  /* Here you can change color of bars */
  --green: #02b033;
  --red: #FF0000;
}

/* Define variables for each specific chart */
.chart-container.track {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.ketosis {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.symbol-profit {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.blood-sugar {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.body-weight {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.body-fat {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.skeletal {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.ecw {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.portfolio-2 {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.portfolio-3 {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.portfolio-4 {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

.chart-container.portfolio-5 {
  --label-color: #222;
  --primary-line-color: #008ffb;
  --secondary-area-color: rgba(0, 143, 251, 0.15);
}

/* General styles using variables */
html,
body {
  margin: 0;
}

body * {
  box-sizing: border-box;
}

.chart-container {
  max-width: 100%;
  height: 100%;
  color: var(--tooltip-text-color);
  padding: 16px;
  border: 1px solid var(--outer-border-color);
}

.chart-container text {
  fill: var(--label-color);
}

.chart-container:not(.symbol-profit) .apexcharts-series path:nth-child(1) {
  fill: var(--secondary-area-color);
}

.chart-container .apexcharts-series path:nth-child(2) {
  stroke: var(--primary-line-color);
}

.chart-container .apexcharts-grid line {
  stroke: var(--grid-line-color);
}

.chart-container .apexcharts-grid>line:last-of-type {
  display: none;
}

.chart-container .apexcharts-xaxistooltip {
  translate: -1px 0;
}

div.apexcharts-canvas {
  background: transparent !important;
}

@media screen and (max-width: 576px) {
  .chart-container .apexcharts-reset-icon {
    margin-left: 0;
  }
}