.calendar .meter-area {
  display:block;
  margin: 0px, 0px, 0px, 0px;
  padding: 0px;
}

.calendar .dial-area {
  display:block;
  margin: 0px, 0px, 0px, 0px;
  padding: 0px;
}

.day-page-meter .dial {
  margin-left: 0%;
}

.day-page-meter p {
  margin-bottom: 2px;
}


:root {
  --dial-height: 8px;
}

.dial {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 85%;
  height: var(--dial-height);
  border-color: black;
  border-style: solid;
  border-width: 2px;
  overflow: hidden;
}

.dial.nutrition-dial .fill {
  background-color: red;
}

.dial.nutrition-dial.negative .fill {
  background-color: greenyellow;
}

.dial.burn-dial .fill {
  background-color: orange;
}

.dial.burn-dial.full {
  border-color: orangered;
}

.dial .fill {
  height: 100%;
  background-color: aqua;
  /*width: calc(100% * ((attr(value number) - attr(min number)) / (attr(max number) - attr(min number))));*/
}

.dial.two-directions .fill {
  height: 100%;
  background-color: salmon;
  /*margin-left: clamp(0%, calc(100% * ((attr(value number) - attr(min number)) / (attr(max number) - attr(min number)))), 50%);
  width: abs(calc(100% * ((attr(value number) - attr(min number)) / (attr(max number) - attr(min number))) - 50%));*/
  overflow: hidden;
}

.dial.multilayer .fill {
  position:relative;
  position: 0,0,0,0;
}

.dial.multilayer .layer-0 {
  background-color: greenyellow;
  margin-top: calc(-1 * (var(--dial-height)/2.0) - 1px);
  z-index: 0;
}

.dial.multilayer:has(.layer-1) .layer-0 {
  background-color: mediumaquamarine;
} 

.dial.multilayer .layer-0.suboptimal {
  background-color: gold;
  z-index: 0;
}

.dial.multilayer .layer-1 {
  background-color: salmon;
  margin-top: calc(-1 * (var(--dial-height)/2.0));
  z-index: 1;
}

.dial.multilayer .layer-2 {
  background-color: red;
  margin-top: calc(-1 * (var(--dial-height)/2.0));
  z-index: 2;
}

.dial.multilayer .suboptimal-mark {
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  position: relative;
  margin-top: -1px;
  height: 150%;
  z-index: 10;
}