.graphzone-100per{
  width:100%;
  margin:0 auto;
  padding-top:15px;
  padding-bottom:5px;
  background-color:#f6f6f6;
  border-bottom:solid 5px #B2B2B2;
  }
@media screen and (max-width: 639px) {
.graphzone-100per{
  background-color:#ffffff;
  }
}

.graphzone-left{
  float:left;
  width:66%;
  margin:1% 0% 1% 1%;
  background-color:#ffffff;
  border:solid 1px #eee;
  border-radius: 10px; 
  }
@media screen and (max-width: 639px) {
.graphzone-left{
  width:100%;
  border-radius: 10px; 
  border:none;
  margin:1% 0% 1% 0%;
  }
}

.graphzone-right{
  float:right;
  width:31%;
  margin:1% 1% 1% 0%;
  background-color:#ffffff;
  border:solid 1px #eee;
  border-radius: 10px; 
  }
@media screen and (max-width: 639px) {
.graphzone-right{
  width:100%;
  margin:0 auto;
  border:none;
  }
}

.graphzone-left img#graph01{
  width:100%;
  }
@media screen and (max-width: 639px) {
.graphzone-left img#graph01{
  width:100%;
  }
}

.graph-title01{
  font-size:22px;
  font-weight:bolder;
  color:#FCEE21;
  margin:20px 10px 10px 10px; 
  }
@media screen and (max-width: 639px) {
.graph-title01{
  }
}


.graph-title01 img{
  float:right;
  margin:-10px 10px 0px 10px; 
  }
@media screen and (max-width: 639px) {
.graph-title01{
  }
}


p.graph-caption1{
  font-size:13px;
  line-height:150%;
  color:#B3B3B3;
  margin:20px 30px 10px 30px; 
  padding:5px 5px 5px 5px;
  border-top: solid 1px #eee;
  border-bottom: solid 1px #eee;
  }
@media screen and (max-width: 639px) {
p.graph-caption1{
  margin:2% 10px 10px 2%; 
  }
}

p.graph-caption2{
  font-size:13px;
  line-height:150%;
  color:#B3B3B3;
  margin:0px 30px 30px 30px; 
  padding:0px 5px 5px 5px;
  border-bottom: solid 1px #eee;
  }
@media screen and (max-width: 639px) {
p.graph-caption2{
  margin:0px 10px 20px 10px; 
  }
}

img.graph-footer-spacer{
  width:900px;
  height:5px;
  margin:0; 
  }
@media screen and (max-width: 639px) {
img.graph-footer-spacer{
  width:100%;
  }
}

img.graph-footer-spacer1px{
  width:200px;
  height:1px;
  margin:0; 
  }
@media screen and (max-width: 639px) {
img.graph-footer-spacer1px{
  width:100%;
  }
}


p.graph-title02{
  font-size:17px;
  font-weight:bolder;
  text-align:center;
  color:#88A80D;
  margin:20px 10px 20px 10px; 
  }
@media screen and (max-width: 639px) {
p.graph-title02{
  font-size:20px;
  margin:10px 10px 10px 10px; 
  }
}


.graph-attention-box{
  width:98%;
  border-bottom: solid 2px #eee;
  margin:1% auto; 
  margin-top:20px;
  height:75px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box{
  margin-top:10px;
  padding:0px;
  height:60px;
  }
}

.graph-attention-box-mid{
  width:98%;
  border-bottom: solid 2px #eee;
  margin:1% auto; 
  margin-top:25px;
  height:75px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-mid{
  margin-top:15px;
  height:60px;
  }
}

.graph-attention-box-midB{
  width:98%;
  border-bottom: solid 2px #eee;
  margin:1% auto; 
  margin-top:25px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-midB{
  margin-top:15px;
  height:50px;
  }
}

.graph-attention-box-ratio{
  width:98%;
  margin:0 auto; 
  margin-top:0px;
  height:55px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-ratio{
  height:48px;
  }
}

.graph-attention-box-ratio-bot{
  width:98%;
  margin:0 auto; 
  margin-bottom:20px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-ratio-bot{
  }
}

.graph-attention-box-price{
  width:98%;
  border-bottom: solid 2px #eee;
  margin:1% auto; 
  margin-top:10px;
  height:60px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-price{
height:55px;
  }
}

.graph-attention-box-price-mid{
  width:98%;
  border-bottom: solid 2px #eee;
  margin:1% auto; 
  margin-top:10px;
  height:60px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-price-mid{
  height:55px;
  margin-top:5px;
  }
}



.graph-attention-box-l{
  float:left;
  width:30%;
  color:#1a1a1a;
  font-size:14px;
  line-height:130%;
  padding:40px 0px 0px 4px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-l{
  width:28%;
  text-align:right;
  padding:25px 15px 0px 1%;
  }
}
.graph-attention-box-m{
  float:left;
  width:34%;
  border:solid 2px #ddd;
  border-radius: 10px; 
  text-align:right;
  color:#000;
  font-size:50px;
  font-family: Impact;
  font-weight:bolder;
  padding:5px 7px 5px 5px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-m{
  width:35%;
  font-size:38px;
  text-align:center;
  padding:3px 0px 3px 0px;
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.graph-attention-box-r{
  float:right;
  width:26%;
  color:#000;
  font-size:40px;
  font-family: Impact;
  font-weight:bolder;
  padding:20px 1px 0px 8px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-r{
  width:28%;
  font-size:38px;
  padding:8px 0px 0px 0px;
  }
}

.graph-attention-box-bot{
  width:98%;
  border-bottom:solid 2px #555;
  margin:1% auto; 
  height:70px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-bot{
  height:58px;
  padding:0;
  }
}

.graph-attention-box-l-bot{
  float:left;
  width:28%;
  color:#1a1a1a;
  font-size:14px;
  line-height:130%;
  padding:30px 0px 0px 4px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-l-bot{
  font-size:12px;
  width:28%;
  text-align:right;
  padding:10px 10px 0px 1%;
  }
}
.graph-attention-box-m-bot{
  float:left;
  width:40%;
  text-align:right;
  color:#ccc;
  font-size:45px;
  font-family: Impact;
  font-weight:bolder;
  padding:15px 0px 0px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-m-bot{
  text-align:center;
  width:35%;
  font-size:36px;
  padding:5px 10px 0px 0px;
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.graph-attention-box-r-bot{
  float:right;
  width:26%;
  color:#ccc;
  font-size:35px;
  font-family: HGS‘n‰pŠpºÞ¼¯¸UB;
  font-weight:bolder;
  padding:22px 1px 0px 8px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-r-bot{
  font-size:28px;
  padding:10px 0px 0px 8px;
  }
}

img.graph-allow{
  float:right;
  margin:30px 2px 10px 13px; 
  }
@media screen and (max-width: 639px) {
img.graph-allow{
  }
}

p.graph-caption3{
  font-size:12px;
  line-height:130%;
  color:#808080;
  margin:10px 10px 10px 5px; 
  }
@media screen and (max-width: 639px) {
p.graph-caption3{
text-align:right;
margin:0px;
padding:5px 10px 5px 0px;
  }
}

p.graph-caption4{
  font-size:13px;
  line-height:130%;
  color:#808080;
  margin:10px 5px 10px 10px; 
  }
@media screen and (max-width: 639px) {
p.graph-caption4{
  text-align:right;
  margin:10px 10px 15px 0px; 
  }
}

p.graph-caption5{
  font-size:13px;
  line-height:130%;
  text-align:right;
  font-weight:bold;
  color:#2a2a2a;
  margin:20px 5px 10px 10px; 
  }
@media screen and (max-width: 639px) {
p.graph-caption5{
  margin:10px 10px 20px 10px; 
  }
}


.graphzone-100per-2nd{
  width:100%;
  margin:0 auto;
  margin-top:5px;
  padding-bottom:5px;
  background-color:#f6f6f6;
  border-bottom:solid 5px #B2B2B2;
  }
@media screen and (max-width: 639px) {
.graphzone-100per-2nd{
  background-color:#ffffff;
  }
}

.graphzone-left-2nd{
  float:left;
  width:66%;
  margin:20px 0% 1% 1%;
  background-color:#fff;
  border-radius: 10px; 
  border:solid 1px #eee;
  }
@media screen and (max-width: 639px) {
.graphzone-left-2nd{
  width:100%;
  margin:20px 0% 1% 0%;
  border-radius: 10px; 
  }
}

.graphzone-right-2nd{
  float:right;
  width:31%;
  margin:20px 1% 1% 0%;
  background-color:#fff;
  border:solid 1px #eee;
  border-radius: 10px; 
  }
@media screen and (max-width: 639px) {
.graphzone-right-2nd{
  width:98%;
  margin:0 auto;
  margin-top:1px;
  margin-bottom:10px;
  }
}

p.graph-caption6{
  text-align:right;
  font-size:13px;
  line-height:130%;
  color:#808080;
  margin:20px 30px 20px 10px; 
  }
@media screen and (max-width: 639px) {
p.graph-caption6{
  margin:10px 10px 20px 10px; 
  }
}

#graph-period-month{
  color:#555;
  font-size:35px;
  font-family: Impact;
  font-weight:bolder;
  padding:5px 5px 0px 5px; 
  }
@media screen and (max-width: 639px) {
#graph-period-month{
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.graph-period-green{
  color:#FCEE21;
  font-size:35px;
  font-family: Impact;
  font-weight:bolder;
  padding:5px 5px 0px 5px; 
  }
@media screen and (max-width: 639px) {
.graph-period-green{
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

#graph-period-green{
  color:#555;
  font-size:35px;
  font-family: Impact;
  font-weight:bolder;
  padding:5px 5px 0px 5px; 
  }
@media screen and (max-width: 639px) {
#graph-period-green{
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.graph-attention-box-l2{
  float:left;
  text-align:right;
  width:22%;
  color:#1a1a1a;
  font-size:16px;
  line-height:130%;
  padding:33px 0px 0px 4px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-l2{
  width:22%;
  }
}
.graph-attention-box-m2{
  float:left;
  width:51%;
  text-align:right;
  color:#FCEE21;
  font-size:33px;
  font-family: Impact;
  font-weight:bolder;
  padding:15px 0px 0px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-m2{
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}
.graph-attention-box-m-cntct{
  float:left;
  width:68%;
  text-align:right;
  color:#FCEE21;
  font-size:23px;
  font-family: Impact;
  font-weight:bolder;
  padding:26px 3px 0px 10px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-m-cntct{
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.graph-attention-box-r2{
  float:right;
  width:19%;
  color:#FCEE21;
  font-size:20px;
  font-family: HGS‘n‰pŠpºÞ¼¯¸UB;
  font-weight:bolder;
  padding:28px 1px 0px 3px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-r2{
  padding:26px 1px 0px 3px;
  }
}

.graph-attention-box-l2-2nd{
  float:left;
  text-align:right;
  width:22%;
  color:#1a1a1a;
  font-size:16px;
  line-height:130%;
  padding:34px 0px 0px 4px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-l2-2nd{
  width:22%;
  }
}
.graph-attention-box-m2-2nd{
  float:left;
  width:48%;
  text-align:right;
  color:#2a2a2a;
  font-size:33px;
  font-family: Impact;
  font-weight:bolder;
  padding:15px 0px 0px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-m2-2nd{
  width:50%;
  font-size:24px;
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.graph-attention-box-r2-2nd{
  float:right;
  width:26%;
  color:#444;
  font-size:18px;
  font-family: HGS‘n‰pŠpºÞ¼¯¸UB;
  font-weight:bolder;
  padding:30px 1px 0px 3px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-r2-2nd{
  width:25%;
  font-size:16px;
  padding:26px 1px 0px 3px;
  }
}


.graph-ratio-box-l{
  float:right;
  width:20%;
  color:#aaa;
  font-size:20px;
  font-family: Impact;
  line-height:130%;
  padding:20px 0px 0px 7px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-ratio-box-l{
  padding:14px 0px 0px 7px;
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}
.graph-ratio-box-m{
  float:right;
  width:15%;
  text-align:center;
  color:#aaa;
  font-size:33px;
  font-family: Impact;
  font-weight:bolder;
  border:solid 2px #eee;
  border-radius: 10px; 
  padding:3px 3px 3px 3px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-ratio-box-m{
  text-align:center;
  font-size:26px;
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.graph-ratio-box-r{
  float:right;
  width:20%;
  color:#aaa;
  font-size:14px;
  padding:22px 1px 7px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-ratio-box-r{
  padding:15px 1px 7px 0px;
  }
}


.graphzone-100per-3rd{
  width:100%;
  margin:0 auto;
  padding-top:15px;
  padding-bottom:5px;
  background-color:#f6f6f6;
  border-bottom:solid 5px #B2B2B2;
  }
@media screen and (max-width: 639px) {
.graphzone-100per-3rd{
  background-color:#ffffff;
  }
}

p.graph-title03{
  font-size:17px;
  font-weight:bolder;
  text-align:center;
  color:#88A80D;
  margin:20px 10px 20px 10px; 
  }
@media screen and (max-width: 639px) {
p.graph-title03{
  font-size:20px;
  margin:10px 10px 10px 10px; 
  }
}

.graph-attention-box3{
  width:98%;
  border-bottom:solid 2px #F7931E;
  margin:1% auto; 
  margin-top:25px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box3{
  margin-top:10px;
  padding:0px;
  height:84px;
  }
}

.graph-attention-box3A{
  width:98%;
  border-bottom:solid 2px #eeeeee;
  margin:1% auto; 
  margin-top:15px;
  padding-bottom:4px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box3A{
  width:100%;
  margin-top:16px;
  padding:0px;
  height:84px;
  }
}

.graph-attention-box-l3{
  float:left;
  width:11%;
  text-align:right;
  color:88A80D;
  font-size:40px;
  font-family: Impact;
  font-weight:bolder;
  padding:0px 0px 0px 0px;
  margin:0px 0px 5px 0px;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-l3{
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.green-attention-box-l3{
  float:left;
  width:11%;
  text-align:right;
  color:#88A80D;
  font-size:40px;
  font-family: Impact;
  font-weight:bolder;
  padding:0px 0px 0px 0px;
  margin:0px 0px 5px 0px;
  }
@media screen and (max-width: 639px) {
.green-attention-box-l3{
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.green-attention-box-l3A{
  float:left;
  width:12%;
  text-align:right;
  color:#88A80D;
  font-size:41px;
  font-family: Impact;
  font-weight:bolder;
  padding:2px 0px 0px 0px;
  margin:0px 0px 5px 0px;
  }
@media screen and (max-width: 639px) {
  width:13%;
.green-attention-box-l3A{
font-family: Verdana, Roboto, "Droid Sans", "ŸàƒSƒVƒbƒN", YuGothic, "ƒ�ƒCƒŠƒI", Meiryo, "ƒqƒ‰ƒMƒmŠpƒS ProN W3", "Hiragino Kaku Gothic ProN", "‚l‚r ‚oƒSƒVƒbƒN", sans-serif;
  }
}

.graph-attention-box-m3{
  float:left;
  text-align:center;
  width:21%;
  color:#88A80D;
  font-size:12px !important; //12px;
  line-height:130%;
  padding:15px 0px 0px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-m3{
  }
}

.green-attention-box-m3{
  float:left;
  text-align:center;
  width:21%;
  color:#88A80D;
  font-size:12px !important; //12px;
  line-height:130%;
  padding:15px 0px 0px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-m3{
  }
}

.green-attention-box-m3A{
  float:left;
  text-align:center;
  width:22%;
  color:#000;
  font-size:17px;
  font-weight:bold;
  line-height:130%;
  padding:20px 0px 0px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-m3{
  width:21%;
  font-size:15px;
  }
}

.graph-attention-box-m3bot{
  float:left;
  text-align:center;
  width:21%;
  color:#88A80D;
  font-size:12px !important; //12px;
  line-height:130%;
  padding:5px 0px 0px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-m3bot{
  }
}

.green-attention-box-m3bot{
  float:left;
  text-align:center;
  width:21%;
  color:#88A80D;
  font-size:12px !important; //12px;
  line-height:130%;
  padding:5px 0px 0px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.green-attention-box-m3bot{
  }
}

.green-attention-box-m3botA{
  float:left;
  text-align:center;
  width:22%;
  color:#88A80D;
  font-weight:bold;
  font-size:15px;
  line-height:130%;
  padding:10px 0px 0px 0px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.green-attention-box-m3botA{
  width:21%;
  }
}

.graph-attention-box-r3{
  float:right;
  width:30%;
  color:#E6E6E6;
  font-size:14px;
  padding:3px 1px 0px 3px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-r3{
  padding:3px 1px 0px 0px;
  }
}

.graph-attention-box-r3A{
  float:left;
  text-align:right;
  width:38%;
  color:#222222;
  font-size:14px;
  padding:0px 1px 0px 3px;
  margin:0;
  line-height:140%;
  }
.graph-attention-box-r3A a{
  color:#FFD000;
  text-decoration: none;
  }
.graph-attention-box-r3A a:hover{
  color:#FFD000;
  text-decoration: underline;
  }
.graph-attention-box-r3A a:visited{
  color:#FFD000;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-r3A{
  width:33%;
  padding:0px 1px 0px 3px;
  }
}

.graph-attention-box-rr3{
  float:right;
  width:35%;
  color:#E6E6E6;
  font-size:14px;
  padding:3px 1px 0px 3px;
  margin:0;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-rr3{
  padding:3px 1px 0px 0px;
  }
}

.graph-attention-box-rr3A{
  float:left;
  text-align:right;
  width:16%;
  color:#1a1a1a;
  font-size:14px;
  padding:0px 1px 0px 3px;
  margin:0;
  line-height:140%;
  }
@media screen and (max-width: 639px) {
.graph-attention-box-rr3A{
  width:20%;
  padding:0px 1px 0px 0px;
  }
}

span.green-av{
  color:#000;
  font-weight:bold;
  font-size:17px;
}
@media screen and (max-width: 639px) {
.span.green-av{
  }
}

span.gray-unit{
  color:#222222;
}
@media screen and (max-width: 639px) {
.span.gray-unit{
  }
}

img.upper-bottom-spacer{
height:15px;
}
@media screen and (max-width: 639px) {
img.upper-bottom-spacer{
width:100%;
height:15px;
  }
}

.LEGEND{
  width:58%;
  margin:0 auto;
  height:28px;
  color:#555;
  font-size:13px;
  border:solid 1px #eee;
  border-radius: 10px;
  margin-top:10px;
  margin-bottom:10px; 
  }
@media screen and (max-width: 639px) {
.LEGEND{
  width:98%;
  margin:0 auto;
  margin-top:10px;
  margin-bottom:10px; 
  }
}

.LEGEND-orange {
  width:100px;
  float:left;
  margin:0px 5% 0px 5%;
  display: flex;
  align-items: center;
  height:28px;
}
@media screen and (max-width: 639px) {
.LEGEND-orange{
  width:80px;
  margin:0px 2% 0px 2%;
  }
}
.LEGEND-orange:before{
  content: "";
  flex-grow: 1;
  height: 2px;
  background: #FBB03B;
  display: block;
}
.LEGEND-orange:before {
  margin-right: 5px;
}

.LEGEND-green {
  width:130px;
  float:left;
  margin:0px 5% 0px 0px;
  display: flex;
  align-items: center;
  height:28px;
}
@media screen and (max-width: 639px) {
.LEGEND-green{
  width:105px;
  margin:0px 2% 0px 0px;
  }
}
.LEGEND-green:before{
  content: "";
  flex-grow: 1;
  height: 2px;
  background: #88A80D;
  display: block;
}
.LEGEND-green:before {
  margin-right: 5px;
}

.LEGEND-gray {
  width:100px;
  float:left;
  margin:0px 5% 0px 0px;
  display: flex;
  align-items: center;
  height:28px;
}
@media screen and (max-width: 639px) {
.LEGEND-gray{
  width:80px;
  margin:0px 2% 0px 0px;
  }
}
.LEGEND-gray:before{
  content: "";
  flex-grow: 1;
  height: 2px;
  background: #ccc;
  display: block;
}
.LEGEND-gray:before {
  margin-right: 5px;
}

.LEGEND-BDgray {
  width:100px;
  float:left;
  margin:0px 5% 0px 5%;
  display: flex;
  align-items: center;
  height:28px;
}
@media screen and (max-width: 639px) {
.LEGEND-BDgray{
  width:80px;
  margin:0px 2% 0px 2%;
  }
}
.LEGEND-BDgray:before{
  content: "";
  flex-grow: 1;
  height: 4px;
  background: #ccc;
  display: block;
}
.LEGEND-BDgray:before {
  margin-right: 5px;
}

.LEGEND-Bgreen {
  width:130px;
  float:left;
  margin:0px 5% 0px 0px;
  display: flex;
  align-items: center;
  height:28px;
}
@media screen and (max-width: 639px) {
.LEGEND-Bgreen{
  width:105px;
  margin:0px 2% 0px 0px;
  }
}
.LEGEND-Bgreen:before{
  content: "";
  flex-grow: 1;
  height: 6px;
  background: #88A80D;
  display: block;
}
.LEGEND-Bgreen:before {
  margin-right: 5px;
}

.LEGEND-Bgray {
  width:100px;
  float:left;
  margin:0px 5% 0px 0px;
  display: flex;
  align-items: center;
  height:28px;
}
@media screen and (max-width: 639px) {
.LEGEND-Bgray{
  width:80px;
  margin:0px 2% 0px 0px;
  }
}
.LEGEND-Bgray:before{
  content: "";
  flex-grow: 1;
  height: 4px;
  background: #e6e6e6;
  display: block;
}
.LEGEND-Bgray:before {
  margin-right: 5px;
}