@charset "utf-8";
#sales_graphs {
    height: 100px;
    width: 300px;
}

  #sales_graphs {
    --color: blue;
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 50px 1fr 50px;
    grid-template-rows: 200px 50px 50px;
    grid-template-areas: 
      "data-1-axis  stocks       data-2-axis"
      "data-1-axis  volume       data-2-axis"
      "primary-axis primary-axis primary-axis";
    background-color: #eee;
    width: 650px;
  }
  #sales_graphs2 > table.area,
  #sales_graphs > table.line {
    grid-area: stocks;
  }
  #sales_graphs > table.column {
    grid-area: volume;
  }
  #sales_graphs > .primary-axis {
    grid-area: primary-axis;
  }
  #sales_graphs > .data-1-axis {
    grid-area: data-1-axis;
    writing-mode: tb-rl;
    transform: rotateZ(180deg);
  }
  #sales_graphs2 > .data-2-axis {
    grid-area: data-2-axis;
    writing-mode: tb-rl;
  }
  /* Colors */
  #sales_graphs > table.area {
    --color: linear-gradient(#666, rgba(255, 255, 255, 0));
  }
  #sales_graphs > table.line {
    --color: #fc1;
  }
  #sales_graphs > table.column tr:nth-child(even) {
    --color: #e88;
  }
  #sales_graphs > table.column tr:nth-child(odd) {
    --color: #8c8;
  }