.chart-row > .w3-col {
	height: 100%;
}

.q-table-container {
	background-color: #fff;
}

.q-table > thead > tr > th {
  background-color: #607d8b;
  font-size: 18px;
  font-family: Microsoft JhengHei;
  font-weight: bold;
  color: white;
  border: solid 1px lightgrey !important;
}

.q-table > tbody > tr > td {
	font-size: 1.1em;
  border: solid 1px lightgrey !important;
}

.form {
  position: relative;
  margin-bottom: 20px;
}

.label {
  position:relative !important;
  display: inline-block !important;
  border-radius: 0px 8px 8px 0px;
  padding-top: 5px;
  width: 6em;
  height: 2.2em;
  font-size: 1.2em;
  color: white;
  top:0;
  left:7px;
  z-index: 1;
}

.label::after{
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: 0px !important;
  width: 0 !important;
  height: 0 !important;
  bottom: -11px;
  border-style: solid;
  border-width: 0 11px 11px 0;
  border-color: transparent #3e515a transparent transparent;
}

.field {
  position: absolute;
  height: 2.5em;
  left: 16px;
  top:0.9em;
  width: 90%; 
  padding-left: 5px;
  background-color: #fff;
  padding-right: 5px;
}

.baseline-input .q-field-label-inner {
	font-size: 1.1em;
}

.meter-field .q-field-label {
  font-weight: bold;
  color: #fff;
  font-size: 1.3em;
  margin-top: 0px;
}

.meter-field .q-input-target {
  font-size: 1.2em;
}

.progress_border{
  display:flex; 
  align-items: center; 
  padding:10px 0;
}

.progress-css {
  background: repeating-linear-gradient(135deg, rgba(221, 221, 221, 0), rgba(221, 221, 221, 0) 10px, #D8E5ED 10px, #D8E5ED 20px);
  width: 100%;
  height: 1em;
}

.right-area {
  background-image: radial-gradient(#CCCCCC 1px, transparent 1px);
  background-size: 16px 16px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-area-Wrapper{
  width: 60%;
  padding: 20px 25px;
  background-color: rgb(241, 243, 242);
  border-radius: 20px;
  border: 1px solid rgb(68, 68, 68);
}

.right-area-card{
  display: flex;
  align-items: center;
  margin: 15px 0px;
}

.BlueBlock{
  background-color: #294CCB; 
  width:1%; 
  padding:15px 0;
}

.LeftBlock{
  background-color: #fff; 
  width: 38%; 
  padding: 15px 0 15px 10px; 
  text-align: left;
}

.right-area-Value{
  width:80%;
  color: #3D6ED7;
}

.right-area-unit{
  width: 28%;
}

.RightBlock{
  background-color: #F5F8FA; 
  width: 60%; 
  display: flex; 
  padding: 15px 16px; 
  text-align: right;
}

.electric-card {
  background-color: white;
  border-radius: 10px;
  padding: 10px 16px;
  height: 100%;
}

.electric-title{
  padding: 0px 0px 10px;
}

.electric-FrameValue{
  display:flex; 
  text-align:right; 
  padding:0 0 10px 0;
}

.electric-Value{/*數值*/
  width: 100%; 
  color: #3D6ED7;
}

/*單位*/
.electric-unit{
  padding-left: 6px;
}

.electric-MoreValue{
  width: 74%; 
  color: #3D6ED7;
}

/*較長的單位*/
.electric-Moreunit{
  padding-left: 6px;
}

.meter-icon {
  font-size: 0.8em;
  color: white;
  background-color: rgb(84, 152, 255);
  border-radius: 50%;
  padding: 5px;
  box-shadow: rgb(84 152 255 / 67%) 0 0 10px 0;
}

.elec_DropDownMenu{
  display: flex;
  align-items: center;
  padding: 0 1%;
}

.elec_DropDownMenu_frame{
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 10px;
  border-radius: 1.2em;
  border: 1px solid rgb(170, 170, 170);
  background-color: rgb(245, 245, 248);
}
.elec_DropDownMenu_icon{
  font-size: 1em;
  color: white;
  background-color: rgb(84, 152, 255);
  border-radius: 1em;
  padding: 5px 10px;
}

[dir] .q-if-focusable {
  background-color: rgb(232, 236, 237);
  padding: 0px 10px;
}

.EnergyMeter_border{
  display:flex; 
  padding: 1%;
}

.EnergyMeter_block1{
  width:58%; 
  margin:0 10px 0 0;
}

.EnergyMeter_block2{
  width:47%; 
  font-weight: 600;
}

.EnergyMeter_block_Wrapper{
  display:flex; 
  width: 100%; 
  justify-content: space-between;
}

.EnergyMeter_frame{
  width:24%; 
  margin:0 10px 0 0;
  font-weight: 600;
}

