/* colors */
.color-edges{
  stroke-width: 3;
  stroke: #367;
}
.color-section-edges{
  stroke-width: 10;
  stroke: #367;
  fill: none;
  opacity: 0.3;
}
.color-fill{stroke:rgb(51,102,119,0.03); fill: none}
.color-fill-section{stroke: white; fill: none}

.arrow-color{fill: #555}
/* end colors */



:root{
  --lowp: 6; /*insert parameter here*/
  --medianp: 9;  /*insert parameter here*/
  --highp: 13; /*insert parameter here*/
  
  --mid: calc((var(--lowp) + var(--highp)) / 2);
  --widt: calc(var(--highp) - var(--lowp));
  }
.meter-box{
  margin: 0 auto;
  width: 100%;
}
.figure-small .meter-box{
  font-size: 80%;
}

.figure-wide .meter-box{
  display: flex;
  flex-direction: column;
  place-content: center;
  width: 100%;
  height: 100%;
  gap: 5%;
  justify-content: center;
}
.figure-wide .meter{
  max-height: 50%;
  margin: 0;
}
.meter *{
  transition: 2s;
}
.meter{
  display: block;
  margin: 3ex auto;
  width: 100%;
}
.meter-options{
  width: 600px;
  place-self: center;
  max-width: 95%;
}
.meter-section-0, .meter-section-1, .meter-section-2, .meter-section-3, .meter-section-4, .meter-section-5, .meter-arrow {
  transform-origin: 361px 343px;
}
.meter-section-0{
  stroke-dasharray: 584,334px 1168.67px;
}
.meter-section-1, .meter-section-2, .meter-section-5{
  transform: rotate(calc((var(--mid) - var(--widt) / 2) * 10deg));
}
.meter-section-1{
  stroke-dasharray: calc(var(--widt) * 47.124px) 1696.46px;
}
.meter-section-2{
  stroke-dasharray: calc(var(--widt) * 17.8px) 640.8849px;
}
.meter-section-3{
  transform: rotate(calc((var(--mid) * 10deg) - (var(--widt) * 5deg)));
}
.meter-section-4{
  transform: rotate(calc((var(--mid) * 10deg) + (var(--widt) * 5deg)));
}
.meter-section-5{
  stroke-dasharray: calc(var(--widt) * 32.463px) 1168.67px;
}
.meter-arrow {
  transform: rotate(calc(var(--medianp) * 10deg));
}

/*Text*/

.m-wrap{
  transform-origin: 361px 339px;
}
.m-wrap--1{
  transform: 
  rotate(calc(10deg * var(--lowp)));
}
.m-wrap--2{
  transform: 
  rotate(calc(10deg * var(--highp)));
}
.m-txt{
  transform-box: fill-box;
  transform-origin: center;
  font-size: 26px;
  text-shadow: 0 0 2px white,
  0 0 1px white,
  0 0 3px white,
  0 0 3px white,
  0 0 5px white,
  0 0 6px white,
  0 0 7px white,
  0 0 8px white,
  0 0 9px white;
}
.m-txt--1{
  transform: rotate(calc(-10deg * var(--lowp)));
}
.m-txt--2{
  transform: rotate(calc(-10deg * var(--highp)));
}

/* V---------later-------- V*/

.scale-outer{
  margin-bottom: 30px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0 1ex;
}
.scale-line{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-around;
  border-bottom: 6px solid #bbb;
  flex-grow: 1;
  align-items: flex-end;
  min-width: 20ex;
}

.scale-min, .scale-max{
  font-size: 12px;
  width: 50%;
}
.scale-max{
  text-align: right;
}
.choose{
  width: 25ex;
}
.mark{
  width: 2%;
  height: 3.3ex;
  margin-bottom: -1.4ex;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  flex-grow: 1;
}
.mark:hover{scale:1.7}
.mark:active{opacity:0}
.m-big{
  font-size: 18px;
}