.usertemporalsection {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 20px 30px 30px;
}

.usertemporalsection .temporalChartTite {
  display: flex;
  width: 100%;
  justify-content: center;
  font-family: 'Metropolis Regular';
  font-size: 16px;
  line-height: 1.21;
  letter-spacing: 4.32px;
  color: #333333;
  margin-top: 20px;
}

.usertemporalsection .temporalLabelsAndCharts {
  display: flex;
  width: 100%;
}

.usertemporalsection .temporalLabelsAndCharts .temporalLabelsContainer {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.usertemporalsection .temporalLabelsAndCharts .temporalChartContainer {
  display: flex;
  width: calc(100% - 230px);
  flex-direction: column;
}

.usertemporalsection .temporalLabelsAndCharts .temporalLabel {
  font-family: 'Metropolis Regular';
  font-size: 16px;
  line-height: 1.21;
  letter-spacing: 4.32px;
  text-align: left;
  color: #333333;
  height: 103px;
  display: flex;
  align-items: center;
}