/* graph wrapper */
.graph-wrapper{
  --table-width-head-cell: 142px;
  --table-width-c1:var(--table-width-year-cell);
  --table-width-c2:calc((var(--table-width-year-cell) * 2));
  --table-width-c3:calc((var(--table-width-year-cell) * 3));
  --table-width-c4:calc((var(--table-width-year-cell) * 4));
  --table-width-c5:calc((var(--table-width-year-cell) * 5));
  --table-width-1to6:calc(var(--table-width-year-cell) + 2.4em);
  overflow-x: auto;
  width: 100%;
  margin-bottom:10px;
  font-weight: normal;
}

.graph-wrapper *,
.graph-wrapper::before,
.graph-wrapper:after{
  padding:0;
  margin:0;
  box-sizing: border-box;
}

#graph-y10.graph-wrapper{
  --table-width-body: 700px;
  --table-width-year-cell: 100px;
  --table-width-after:auto;
}

#graph-y11.graph-wrapper {
  --table-width-body: 920px;
  --table-width-year-cell: 88px;
  --table-width-after: calc(var(--table-width-body) - var(--table-width-c5) - var(--table-width-1to6) - var(--table-width-head-cell));
}

#graph-y10.graph-wrapper p,
#graph-y11.graph-wrapper p,
#cancellation-removal.graph-wrapper p,
#cancellation-buy.graph-wrapper p{font-size:12px;}

[id^="cancellation"].graph-wrapper{
  --table-width-body: 700px;
  --table-width-year-cell: 103px;
  --table-width-after: auto;
}

[id^="cancellation"].graph-wrapper [class^="graph-bar"]{
  width:calc(var(--table-width-c4) - 18px);
  height:50px;
  line-height:50px;
}

[id^="cancellation"].graph-wrapper [class^="graph-bar"]::after{
  border-top-width: 25px;
  border-bottom-width: 25px;
}

[id^="cancellation"].graph-wrapper .price{
  margin-top: 8px;
  color:#555555 !important;
}
[id^="cancellation"].graph-wrapper [class="graph-bar-empty"]{line-height:50px;}

[id^="cancellation"].graph-wrapper .cancellation{
  width: 90%;
  margin:0 auto;
  font-size:12px;
  background:#595656;
  color:#ffffff;
}
[id^="cancellation"].graph-wrapper .cancellation dt,
[id^="cancellation"].graph-wrapper .cancellation dd{padding:4px;}
[id^="cancellation"].graph-wrapper .cancellation dt{
  border-bottom:1px dashed #ffffff;
  font-size:12px;
}
[id^="cancellation"].graph-wrapper .cancellation dd{background:#898989;}

/* graph table */
.graph-table,
.graph-table th,
.graph-table td {border:solid #CBCBCB;}

.graph-table{
  table-layout: fixed;
  width:var(--table-width-body);
  border-width:1px;
  border-spacing: 0;
}

.graph-table colgroup .title{
  width: var(--table-width-head-cell);
  background: #ECECEC;
}

.graph-table colgroup .year-1to6{width: var(--table-width-1to6);}
.graph-table colgroup .year-1,
.graph-table colgroup .year-2,
.graph-table colgroup .year-3,
.graph-table colgroup .year-4,
.graph-table colgroup .year-5,
.graph-table colgroup .year-6,
.graph-table colgroup .year-7,
.graph-table colgroup .year-8,
.graph-table colgroup .year-9,
.graph-table colgroup .year-10,
.graph-table colgroup .year-11{width:var(--table-width-year-cell);}
.graph-table colgroup .residual-value{width:auto;}

.graph-table th,
.graph-table td{
  position: relative;
  width: auto;
  padding: 6px 0;
  border-width:0 2px 1px 0;
  border-right-style: dotted;
  text-align: center;
}

.graph-table th{
  font-size:12px;
  font-weight:normal;
  padding: 4px;
  white-space: normal;
  vertical-align:middle;
}
.graph-table td{vertical-align: top;}

.graph-table tr:last-child th,
.graph-table tr:last-child td{border-bottom-width:0;}
.graph-table tr th:last-child,
.graph-table tr td:last-child{border-right-width:0;}

/* table text */
.graph-table .price,
.graph-table .note{
  font-size:12px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  padding: 0 4px;
}
.graph-table .price{color:#555555 !important;}
#container .graph-table .note{margin-top: 4px;color: #339ed0;}

/* lease term */
.lease-term{
  position: relative;
  z-index: 1;
  display:flex;
  flex-flow: column wrap;
  justify-content:flex-start;
  align-items: flex-start;
  width: 100%;
}

.lease-term .price{
  width:100%;
  margin-top:6px;
  color:#555555 !important;
}

/* residual value */
.residual-value .lease-term{
  flex-direction: row;
  align-items: center;
  margin-bottom: 4px;
}

.residual-value .lease-term:last-of-type{margin-bottom:0;}

.residual-value [class^="graph-bar"]{
  flex: 0 0 calc(var(--table-width-year-cell) + 2px);
  height:24px;
  line-height:25px;
}

.residual-value .lease-term .price{margin-top:0;}
.residual-value [class^="graph-bar"]+.price{
  padding: 0 4px 0 6px;
  text-align: left;
}

.residual-value [class^="graph-bar"]::after{
  right: -8px;
  border-top-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 8px;
}

/* graph style */
[class^="graph-bar"]{
  position: relative;
  left:-2px;
  z-index: 2;
  width: calc(100% - 16px);
  line-height: 36px;
  padding: 0 4px;
  background:#006FBC;
  color:#FFFFFF;
  font-size: 11px;
  text-align: center;
}
[class^="graph-bar"]::after{
  content:'';
  display: inline-block;
  position: absolute;
  top:0;
  right:-18px;
  z-index: 1;
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 18px solid #006FBC;
  border-right: 0;
}

[class^="graph-bar"].update{
  flex:0 0 auto;
  text-align:left;
  padding-left: 15px;
}
[class^="graph-bar"].return{background: #339ed0;}
[class^="graph-bar"].return::after{border-left-color: #339ed0;}

[class^="graph-bar"][data-year-count="5"]{width:var(--table-width-c5);}
[class^="graph-bar"][data-year-count="4"]{width:var(--table-width-c4);}
[class^="graph-bar"][data-year-count="3"]{width:var(--table-width-c3);}
[class^="graph-bar"][data-year-count="2"]{width:var(--table-width-c2);}
[class^="graph-bar"][data-year-count="1"]{width:var(--table-width-c1);}

[class^="graph-bar-buy"],
[class^="graph-bar-end"]{width:calc(100% + 4px);}
[class^="graph-bar-empty"]{
  position: static;
  background: transparent;
  line-height: 42px;
}

[class^="graph-bar-buy"]::after,
[class^="graph-bar-end"]::after,
[class^="graph-bar-empty"]::after{display: none;}

/* residual value */
.residual-value[data-year-count="1"] .lease-term{width:calc(var(--table-width-c1) + var(--table-width-after));}
.residual-value[data-year-count="2"] .lease-term{width:calc(var(--table-width-c2) + var(--table-width-after));}
.residual-value[data-year-count="3"] .lease-term{width:calc(var(--table-width-c3) + var(--table-width-after));}
.residual-value[data-year-count="4"] .lease-term{width:calc(var(--table-width-c4) + var(--table-width-after));}
.residual-value[data-year-count="1"] .lease-term .price{width:calc(var(--table-width-c1) + var(--table-width-after) - var(--table-width-year-cell) - 16px);}
.residual-value[data-year-count="2"] .lease-term .price{width:calc(var(--table-width-c2) + var(--table-width-after) - var(--table-width-year-cell) - 16px);}
.residual-value[data-year-count="3"] .lease-term .price{width:calc(var(--table-width-c3) + var(--table-width-after) - var(--table-width-year-cell) - 16px);}
.residual-value[data-year-count="4"] .lease-term .price{width:calc(var(--table-width-c4) + var(--table-width-after) - var(--table-width-year-cell) - 16px);}