#slider-container { padding:1em;}
.myprogress {position:relative; --model-width:75; font-family:sans-serif; line-height:normal; margin-bottom:7%; font-size: calc(3vw * var(--model-width) / 100);}
.maturity { position:absolute; left:0; bottom:-12%; width:50%; text-align:center; color:#666; font-size:80%; }
.maturity .level { color:greenyellow; font-size:150%;}
.mountain { position:absolute; right:0%; top:30%; bottom:-14%; left:45%; }
.mountain img { width:100%; height:100%; position:absolute; z-index:-1; }
.mountain .level { height:6.3%; text-align:right; border-top:.1em dotted transparent; color:transparent; position:relative; padding-right:1%; font-size:66%;}
.mountain .level:hover { border-top:.1em dotted black; color:black;}
.mountain .maturity9,
.mountain .maturity8,
.mountain .maturity7 { height:13.7%; }
.mountain .climber { position:absolute; top:-2em; left:0;  width:1em; height:2em; background-image:url(img/person.svg); background-size:contain; background-repeat:no-repeat; }
.mountain .maturity1 { width:80%; left:19%;}
.mountain .maturity2 { width:71%; left:28%;}
.mountain .maturity3 { width:65%; left:34%;}
.mountain .maturity4 { width:59.5%; left:39.5%;}
.mountain .maturity5 { width:53.5%; left:45.5%;}
.mountain .maturity6 { width:48%; left:51%;}
.mountain .maturity7 { width:40%; left:59%;}
.mountain .maturity8 { width:34.5%; left:64.5%;}
.mountain .maturity9 { width:28%; left:71%;}
.mountain .maturity10 { width:18.5%; left:80.5%; height:21%; margin-top:.5%;}

.up, .down, .left, .right  {  border: solid black;  border-width: 0 .4em .4em 0;  display: inline-block;  padding: .4em; position:relative; top:14%;}
.right {  transform: rotate(-45deg); }
.left {  transform: rotate(135deg); }
.up {  transform: rotate(-135deg); }
.down {  transform: rotate(45deg); }
.ain { left:0; top:7%; text-align:right; width:15%; height:100%;  }
.pin { right:0; top:7%; text-align:left; width:15%; height:100%;  }
.ain .vert { left:0; }
.pin .vert { right:0; }
.horiz { display:block; position:absolute; border:0; border-top:.4em solid black; width:100%; top:36%; box-sizing:border-box;}
.vert { display:block; position:absolute; border:0; border-left:.4em solid black; bottom:52%;  box-sizing:border-box; }
.ain .vert { border-color:red;}
.ain .horiz { border-color:red;}
.aout {}
.aout .horiz { border-color:red;}
.ain .up, .ain .down, .ain .left, .ain .right { border-color:red; }


.pin .vert { border-color:blue; }
.pin .horiz { border-color:blue; }
.pin .up, .pin .down, .pin .left, .pin .right { border-color:blue; }

.active .aout .horiz { border-color:red; }
.active .aout .right { border-color:red; }
.gift .right { border-color:red; }

.passive .aout .horiz { border-color:blue; }
.passive .aout .right { border-color:blue; }

.income .aout { width:20%; }
.active .aout { right:-20%; transform: rotate(-30deg); bottom:70%;}
.active .ain { left:auto; right:-20%; width:20%; height:auto; top:auto; transform: rotate(-30deg); bottom:70%; text-align:left;}
.gift .endowment { right:7%; bottom:10%; width:15%; }
.gift .subsidy { right:60%; bottom:-33%; transform:rotate(90deg); width:12%;}
.passive .aout { left:-23%; transform: rotate(30deg); bottom:70%; text-align:right; }
.borrowed {  }
.borrowed .aout { height:75%; width:47%; top:-10%; border:.4em solid red; border-top:0;  z-index:-1; text-align:left; }
.borrowed .aout .left { left:-8%; top:-15%;  transform:rotate(225deg); border-color:red;}
.debt .balance { text-align:right !important; position:absolute;  top:80%; right:57.5%; font-size:inherit; }
.borrowed .value { position:absolute; right:105%; text-align:right !important; }

.na { visibility:hidden; }
.show,.showp { visibility:visible; }
.showp .horiz {border-style:dotted;}
.showp .vert {border-style:dotted;}

.extra .vert { top:-25%;  }
.nowork { display:block; position:absolute; background:#fff; width:.4em; bottom:64%; top:-25%; z-index:100; }
.debt .vert { top:-325%; }
.fixed .vert { top:-225%;  }
.variable .vert { top:-125%; }

.model {
  position:relative;
  font-family:sans-serif;
  aspect-ratio:1.75/1;
  width: calc(var(--model-width) * 1%);
  font-size: initial;
}
.model span {
}
.model div {  position:absolute;   font-size: calc(3vw * var(--model-width) / 100); }
.model .income {
  top:0; right:0; height:40%; left:0;
}
.model .income .gift {
  top:0; width:41%; bottom:60%; left:0;
  text-align:right;
}
.model .income .active {
  top:55%; width:31%; bottom:0; left:0;
  text-align:right;
  color:red;
}
.model .income .trust {
  top:0; right:30%; bottom:0; left:30%;
  text-align:center;
}
.model .income .reinvest {
  top:5%; right:10%; bottom:50%; width:28%;
  text-align:left;
  color:blue;
}
.model .income .passive {
  top:55%; right:0; bottom:0; width:31%;
  text-align:left;
  color:blue;
}

.model .expenses {
  top:45%; right:0; bottom:0; left:0;
}
.model .expenses > div {
  position:relative;
  width:60%; height:20%;
  margin:0 auto;
  text-align:center;
}
.model .value { display:inline-block; width:5em; }
.model .expenses .label { width:5em;  display:inline-block; text-align:right; vertical-align:middle; }
.model .expenses .value {  vertical-align:middle; text-align:left; }
.model .expenses img { width:15%; display:inline-block; text-align:center; vertical-align:middle; }
.model .expenses .total { position:absolute; right:29.5%; bottom:-10%; width:5em; border-top:.25em double black; padding:.3em;}

.trust .value { display:block; position:absolute; top:23%; left:0%; right:0%; width:auto; text-shadow:.07em .07em black; font-weight:bold; color:white; padding-right:0.5em; }
.gift .subsidyval {  position:relative; top:15%; }
.gift .endowmentval { text-align:left; position:relative; top:-15%;  }

.model div img {  height:100%; vertical-align:middle; }
.reinvestarrow { border-top:.4em solid blue; border-right:.4em solid blue; border-radius:50%; height: 50%; aspect-ratio:1/1; transform: rotate(15deg); position:relative !important; display:inline-block; vertical-align:middle; }
.reinvestarrow .left { border-color:blue; position:relative; top:-47%; left:9%; transform: rotate(114deg); box-shadow:.4em .4em white;}
.reinvest .value { margin:1em 0 0 1em; text-align:left; }

.passivepct { bottom:16%; left:58%; width:3em; color:blue; }
.activepct { bottom:16%; right:58%; width:3em; color:red; text-align:right;}
.activepct .value { position:absolute; top:-220%; right:100%; text-align:right;  }

@media (max-width: 800px) {
  .myprogress {--model-width:110;}
  .model {left:-2em;}
  .mountain { left:75%; }
  .maturity { font-size:66%; }

}