.ContentContainer > .DeviceControlContainer#MeterDeviceControlContainer {
  height: calc(100% - 2 * var(--outerPadding));
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: scroll;
  display: flex;
  gap: 20px;
  width: calc(100% - var(--outerPadding));
  padding: var(--outerPadding) var(--outerPadding) var(--outerPadding) 0px;
  flex-wrap: wrap;
  align-content: flex-start;
  touch-action: pan-y; }
  @media only screen and (min-height: 100vw) {
    .ContentContainer > .DeviceControlContainer#MeterDeviceControlContainer {
      width: calc(100% - 2 * var(--outerPadding));
      padding: var(--outerPadding); } }
.MeterContainer {
  display: flex;
  flex-direction: column;
  width: 100%; }

.MeterLiveDataContainer {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column; }

.MeterLiveDataHeader {
  display: flex;
  font-size: var(--normalTextSize);
  font-family: 'ManropeLight';
  color: #dddddd;
  gap: var(--innerPadding) 16px;
  flex-wrap: wrap;
  justify-content: flex-start; }

.MeterLiveDataTitle {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: var(--largeTextSize); }

.MeterLiveDataUnit {
  width: 100%; }

[class^=MeterLiveDataButton] {
  width: calc(53px - 2* var(--innerPadding));
  height: calc(53px - 2* var(--innerPadding));
  border-radius: var(--innerBorderRadius);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: var(--backgroundColor40Percent);
  flex-grow: 0;
  font-size: var(--normalTextSize);
  padding: var(--innerPadding); }
  [class^=MeterLiveDataButton]::before {
    transform: translate(0%, 0%);
    transform-origin: 50% 50%; }

.MeterLiveDataInputDate {
  width: 150px;
  margin-right: calc(100% - 150px);
  background-color: var(--backgroundColor40Percent);
  min-height: 40px;
  font-family: 'ManropeLight';
  border: none;
  color: #ffffff;
  font-size: var(--normalTextSize);
  outline: none;
  position: relative;
  text-align: start;
  border-radius: var(--innerBorderRadius);
  padding: var(--innerPadding); }

.MeterLiveDataDiagramContainer {
  display: flex;
  margin-top: 16px;
  flex-grow: 1;
  padding: var(--outerPadding) var(--outerPadding) 0 var(--outerPadding);
  background: var(--backgroundColor40Percent);
  position: relative;
  height: 100%;
  min-height: 200px;
  border-radius: var(--innerBorderRadius) var(--innerBorderRadius) 0 0; }

.MeterLabelContainer {
  height: calc(100% - 100px);
  display: flex;
  flex-direction: column; }

.MeterLabel100, .MeterLabel80, .MeterLabel60, .MeterLabel40, .MeterLabel20 {
  color: #dddddd;
  font-family: 'ManropeLight';
  margin-right: 20px;
  height: calc(100% / 5);
  transform: translateY(-50%);
  display: flex;
  align-items: center; }

.MeterGraphicContainerContainer {
  overflow: scroll;
  position: relative;
  flex-grow: 1;
  height: 100%; }

.MeterGraphicContainer {
  display: grid;
  grid-template-rows: repeat(3, calc((100% - 100px) / 3));
  width: 100%;
  height: 100%; }
  .MeterGraphicContainer > svg {
    width: 100%;
    height: 100%;
    grid-row: none;
    grid-column: none;
    position: absolute; }

.MeterBar {
  font-family: 'ManropeLight';
  grid-row: span 3;
  min-width: 15px;
  width: 60%;
  margin: 0px 2.5px 0px 2.5px;
  background: #bd913f;
  align-self: self-end;
  justify-self: center;
  overflow: hidden;
  border-radius: 5px;
  z-index: 0;
  transition: background 0.5s;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.MeterLabelFlagText {
  position: absolute;
  background: var(--backgroundColor100Percent);
  padding: 10px;
  border-radius: 10px;
  transform: translateX(30px);
  font-family: 'ManropeLight';
  pointer-events: none; }

.MeterTimeLabel {
  overflow: overlay;
  justify-content: center;
  white-space: nowrap;
  writing-mode: vertical-lr;
  transform: rotateZ(180deg);
  font-family: 'ManropeLight';
  color: #dddddd;
  text-indent: 10px;
  direction: rtl;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  overflow: hidden; }

.MeterGraphicContainerLinesContainer {
  position: absolute;
  height: calc(100% - 100px);
  top: 0px; }

.MeterGraphicContainerLine {
  height: calc(20%);
  width: 100%;
  border-top: solid 2px #ffffff44;
  box-sizing: border-box; }

.MeterLiveDataFooter {
  display: flex;
  background: var(--backgroundColor40Percent);
  flex-direction: column;
  padding: 0px var(--outerPadding) var(--outerPadding) var(--outerPadding);
  gap: var(--innerPadding);
  border-radius: 0 0 var(--innerBorderRadius) var(--innerBorderRadius); }

.MeterChartsContainer {
  display: grid;
  grid-template-columns: var(--normalTextSize) max-content;
  align-items: center;
  gap: var(--innerPadding);
  overflow: scroll; }

.MeterChartColorDot {
  border-radius: 100%;
  width: var(--normalTextSize);
  height: var(--normalTextSize); }

.MeterChartLabel {
  color: #ffffff;
  font-family: 'ManropeLight';
  font-size: var(--normalTextSize); }

.MeterReadingContainer {
  display: flex;
  gap: 8px;
  width: 100%;
  overflow: scroll; }

.MeterReadingTitle, .MeterReadingValue, .MeterReadingHighTitle, .MeterReadingHighValue, .MeterReadingLowTitle, .MeterReadingLowValue {
  font-family: 'ManropeLight';
  color: #ffffff;
  font-size: var(--normalTextSize);
  white-space: nowrap; }

.MeterReadingValue, .MeterReadingHighValue, .MeterReadingLowValue {
  margin-right: 8px; }

.MeterCalculatorContainer {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  gap: 8px; }

.MeterCalculatorTitle {
  font-family: 'ManropeLight';
  font-size: var(--mediumTextSize);
  color: #ffffff;
  width: 100%;
  margin-top: 8px; }

.MeterStartDate {
  font-family: 'ManropeLight';
  border: none;
  color: #ffffff;
  font-size: var(--mediumTextSize);
  outline: none;
  position: relative;
  text-align: center;
  background: var(--backgroundColor40Percent);
  border-radius: var(--innerBorderRadius);
  padding: var(--innerPadding);
  flex-grow: 0;
  flex-shrink: 0; }

.MeterUntilDiv {
  font-family: 'ManropeLight';
  font-size: var(--mediumTextSize);
  color: white;
  display: flex;
  align-items: center; }

.MeterEndDate {
  font-family: 'ManropeLight';
  border: none;
  color: #ffffff;
  font-size: var(--mediumTextSize);
  outline: none;
  position: relative;
  text-align: center;
  background: var(--backgroundColor40Percent);
  border-radius: var(--innerBorderRadius);
  padding: var(--innerPadding); }

.MeterResultField {
  font-family: 'ManropeLight';
  font-size: var(--mediumTextSize);
  color: white;
  display: flex;
  align-items: center; }

[id^=meter] > .Name {
  white-space: pre; }

.SteeringContainer > .DeviceControlSteeringContainer#MeterDeviceControlSteeringContainer {
  height: 100%;
  width: 100%;
  gap: 25px;
  flex-shrink: 0;
  display: grid; }
  .SteeringContainer > .DeviceControlSteeringContainer#MeterDeviceControlSteeringContainer > .DeviceButtonsContainer {
    max-width: 100%;
    display: flex;
    gap: 20px;
    justify-self: center;
    overflow: scroll;
    scroll-behavior: smooth; }
    .SteeringContainer > .DeviceControlSteeringContainer#MeterDeviceControlSteeringContainer > .DeviceButtonsContainer > .FooterNavigationButton > .Icon {
      filter: invert(1); }

@keyframes blinker {
  0% {
    background-color: #bd913f; }
  100% {
    background-color: #00000000; } }