:root {
  --blue: #67a8ff;
  --orange: #ffa54b;
  --green: #2ecc71;
  --purple: #b185ff;
  --red: #ff7b7b;
  --cyan: #59d1ff;
}

/* Static chart legend */
#soc-simulator .legend {
  flex: 0 0 auto;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;

  color: #6b7280;
  font-size: 0.92rem;
  margin-bottom: 12px;
  text-align: center;
}

#soc-simulator .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#soc-simulator .sw {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}

#soc-simulator .sw.line {
  width: 18px;
  height: 4px;
  border-radius: 999px;
}

/* Chart container */
#soc-simulator .chartWrap {
  position: relative;

  width: 100%;
  height: 650px;
  max-height: 650px;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
  overflow: hidden;
}

/* Canvas wrapper */
#soc-simulator .soc-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;

  width: 100%;
  position: relative;

  box-sizing: border-box;
}

/* Canvas */
#soc-simulator #socChart {
  display: block;

  width: 100% !important;
  height: 100% !important;

  box-sizing: border-box;
}