.inBox{
  display:flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  grid-row-gap: 20px;
  width:100%;
  margin-top: 10px;
  margin-bottom:10px;


}

.inBoxUp{
  display:flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  grid-row-gap: 20px;
  width:100%;
  margin: 0px;

}
.inBoxDown{
  display:flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  grid-row-gap: 20px;
  width:100%;
  margin: 0px;
  margin-bottom: 10px;

}

.cssInput{
  height: 50px;
  border: 1px solid #383838;
  font-size: 1em;
  margin: 0px;
  padding: 0px;
  padding-left: 1vw;
  width: 200px;
  line-height: 50px;
  height: 50px;
  color:#666;

}

.cssSelect{
  height: 50px;
  border: 1px solid #383838;
  font-size: 1em;
  margin: 0px;
  padding: 0px;
  width: 250px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 50px;
  line-height: 50px;
  color:#666;

}

.lbTitle{
  background-color: #9E8BCE;
  color: white;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border: 1px solid #383838;
  font-size: 1em;
  height: 50px;
  line-height: 50px;
  width:200px;
  text-align: center;
}

.lbTitleUp{
  background-color: #9E8BCE;
  color: white;
  border-top-left-radius: 15px;

  border: 1px solid #383838;
  font-size: 1em;
  width: 25vw;
  height: 50px;
  line-height: 50px;
  width:200px;
  text-align: center;
}


.lbUnitUp{
  background-color: #9E8BCE;
  color: white;
  border-top-right-radius: 15px;
  border: 1px solid #383838;
  font-size: 1em;
  line-height: 50px;
  height: 50px;
  width:50px;
  text-align: center;


}
.lbTitleDown{
  background-color: #9E8BCE;
  color: white;
  border-bottom-left-radius: 15px;
  border: 1px solid #383838;
  font-size: 1em;
  width:200px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.lbUnitDown{
  background-color: #9E8BCE;
  color: white;
  border-bottom-right-radius: 15px;
  border: 1px solid #383838;
  font-size: 1em;
  height: 50px;
  line-height: 50px;
  width:50px;
  text-align: center;

}

.inButton{
  width: 64px;
  border: 0px;
}
.iconadd{
  background: url("./_iconadd.png") no-repeat; 
  background-size: contain;
  width: 64px;
  height: 64px;
}


@media (max-width: 575px) {
  .report{ font-size: 1em }
  .chart{
    font-size:0.5em;
  }
  .ratioqrcode
  {
    
  }


}
@media (pointer:none), (pointer:coarse){
  .report{ font-size: 1em}
  .ratioqrcode
  {

  }
}

.reportBox
{
  display:flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;

}
.report
{
  min-height: 200px;
  margin: 3vw;
  padding: 3vw;
  width: 80%;
  font-size: 1em;
  max-width:800px;
}


.ratioqrcode
{
  width: 10vw;
  min-width: 150px;
}

.chart
{
  width: 100%;
  font-size: 1em;
}

.report {
  position: relative;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #666;
  background: #E6DDFF;
  overflow: hidden;
}
.report:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 50px 50px 0;
  border-style: solid;
  border-color: #333 #333 #A193C5 #A193C5;
  background: #A193C5;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  /* Firefox 3.0 damage limitation */
  display: block; width: 0;
}

.reportTitle
{
  font:georgia;
  font-weight: 900;
  font-size: 1.6em;
  color:#A193C5;

}
.reportTxtRatio
{
  font:georgia;
  font-weight: 900;
  font-size: 2em;
  color: #AE72DD;

}