.pqdci{
	width: 100%;
	/*height: calc(100vh - 100px);*/
	background-color: #fff;
	overflow: hidden;
	position: relative;
	font-size: 0;
}


.pqdci div{
	box-sizing: border-box;
}

.pqdci > div{
	box-sizing: border-box;
	padding: 10px;
	height: 100%;
	display: inline-block;
	vertical-align: top;
}

.pqdci .kpi{
	width: 10%;
	background-color: #fff;
}

.pqdci .kpi .block{
	height: 20%;
	width: 100%;
	font-size: 0px;
	position: relative;
}

.pqdci .kpi .block .head{
	width: 100%;
	height: 15%;
	text-align: center;
	font-size: 12px;
}


.pqdci .kpi .block .foot{
	width: 100%;
	height: 15%;
	text-align: center;
	font-size: 8px;
}

.pqdci .kpi .block .kpiChartBox{
	width: 100%;
	height: 70%;
	text-align: left;
	box-sizing: border-box;
}

.pqdci .kpi .block .kpiChartBox .kpiChartBoxNamePlateBox{
	position: absolute;
	color: darkcyan;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	font-size: 2.5vh;
	box-sizing: border-box;
	/*padding: calc((100vh - 400px)/20) 0;*/
	padding: 4.4vh 0;
	background-color: transparent;
}

.pqdci .kpi .block .kpiChartBox .kpiChartBoxNamePlateBox:hover{
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.15);
}
.pqdci .kpi .block .kpiChartBox .kpiChartBoxNamePlateBox:active{
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.3);
}


.pqdci .kpi .block .calender{
	width: 100%;
	height: 70%;
	text-align: left;
	box-sizing: border-box;
}

.pqdci .kpi .block .calender > div{
	text-align: center;
	width: calc(100%/7);
	height: calc(100%/5);
	border-bottom: solid 1px #aaa;
	border-left: solid 1px #aaa;
	display: inline-block;
	padding: 0;
	font-size: 0.5vh;
	vertical-align: top;
}
.pqdci .kpi .block .calender > div:last-child,
.pqdci .kpi .block .calender > div.end{
	border-right: solid 1px #aaa;
}
.pqdci .kpi .block .calender > div.top{
	border-top: solid 1px #aaa;
}

.pqdci .kpi .block .calender > div i{
	margin: 0.3vh;
	font-size: 1.2em;
}

.pqdci .charts{
	width: 15%;
	box-sizing: border-box;
	background-color: #ffffff;
	overflow-y: auto;
	overflow-x: hidden;
}

.pqdci .charts .block{
	height: 20%;
	width: 100%;
	font-size: 16px;
}

.pqdci .mainInfo{
	width: 100%;
	background-color: #fff;
}
.pqdci .mainInfo div{
	width: 100%;
}

.pqdci .mainInfo .structure{
	height: 15%;
}

.pqdci .mainInfo .actions{
	height: 85%;
	padding: 5px;
	overflow-y: hidden;
	overflow-y: auto;
}

.pqdci .mainInfo .data{
	height: 15%;
	padding: 5px;
}

.pqdci .mainInfo .structure .block{
	width: 25%;
	height: 100%;
	background-color: #fff;
	box-sizing: border-box;
	padding: 5px;
	display: inline-block;
	overflow: hidden;
}

.pqdci .mainInfo .structure .block img{
	width: 100%;
	height: 100%;
}


.pqdci .mainInfo .structure .block .head{
	border-radius: 5px;
	border: solid 1px #2fc5d1;
	font-size: 14px;
	height: 15%;
	text-align: left;
	padding: 2.5px;
}

.pqdci .mainInfo .structure .block .spacer{
	font-size: 0;
	height: 2%;
}

.pqdci .mainInfo .structure .block .body{
	border-radius: 5px;
	border: solid 1px #2fc5d1;
	font-size: 12px;
	height: 83%;
	overflow: hidden;
}

.pqdci .mainInfo .data .block{
	width: calc(33.333% - 3px);
	height: 100%;
	background-color: #fff;
	display: inline-block;
	box-sizing: border-box;
	padding: 5px;
	border: solid 1px #2fc5d1;
	border-radius: 5px;
	vertical-align: top;
	margin-right: 3px;
}
.pqdci .mainInfo .data .block:last-child{
	width: calc(33.333%);
	margin-right: 0;
}

.pqdci .mainInfo .data .block .head{
	width: 100%;
	font-size: 14px;
	text-align: left;
}

.pqdci .mainInfo .data .block .txt{
	width: 100%;
	height: calc(100% - 14px);
	overflow: hidden;
	font-size: 12px;
	text-align: left;
}


.pqdci .mainInfo .actions .row{
	height: 32px;
	overflow: hidden;
}

.pqdci .mainInfo .actions .row.multiLine{height: 70px;}

.pqdci .mainInfo .actions .row div{
	height: 100%;
	vertical-align: top;
	border-bottom: solid 1px #333;
	border-left: solid 1px #333;
	font-size: 13px;
	display: inline-block;
	overflow: hidden;
	padding: 0.4em 0;
}

/*.pqdci .mainInfo .actions .row div .oneTouch{font-size: 1.8em;}*/
.pqdci .mainInfo .actions .row div .oneTouchSel{
	font-size: 1.1em;
	/*padding: 0.3em 0;*/
	display: block;
}
.pqdci .mainInfo .actions .row div input,
.pqdci .mainInfo .actions .row div textarea
{
	border: none;
	background: none;
	width: 100%;
	height: 100%;
	padding: 0 5px;
	font-size: 1.1em;
	/*font-size: 1.2vh;*/
}
.pqdci .mainInfo .actions .row div input:focus,
.pqdci .mainInfo .actions .row div textarea:focus
{
	border: none;
	outline: none;
}

.pqdci .mainInfo .actions .row div:last-child{
	border-right: solid 1px #333;
}

.pqdci .mainInfo .actions .row.first{
	border-top: solid 1px #333;
}

.floodScreen{
	width: 100%;
	height: calc(100vh - 100px);
	background-color: #b7b7b7;
	overflow: hidden;
	position: relative;
	font-size: 0;
	padding: 5px;
}

.kpiCard{
	width: 100%;
	background-color: #b7b7b7;
	height: 15%;
	position: relative;
	display: inline-block;
}

.kpiCard div{
	width: calc(100%/9);
	height: 100%;
	box-sizing: border-box;
	padding: 5px;
	font-size: 16px;
	display: inline-block;
}

.kpiCard div div{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 5px;
	background-color: #fff;
	font-size: 0px;
	display: inline-block;
}

.kpiCard div div .cardHeadText {
	width: 100%;
	height: 30%;
	font-size: 12px;
	display: block;
}
.kpiCard div div .cardValue{
	width: 100%;
	height: 70%;
	font-size: 35px;
	display: block;
}

.parts{
	background-color: #b7b7b7;
	height: 85%;
	display: inline-block;
	padding: 5px;
	box-sizing: border-box;
	vertical-align: top;
}
.parts div{
	box-sizing: border-box;
}

.part1{
	width: calc(100%*4/9);
}

.part1 div{
	background-color: #ffffff;
	width: 100%;
	height: 33.333%;
}

.part1 > div:not(:last-child){
	border-bottom: #b7b7b7 solid 10px;
}

.part2{
	width: calc(100%*2/9);
}

.part2 div{
	background-color: #ffffff;
	width: 100%;
	height: 33.333%;
}
.part2 > div:not(:last-child){
	border-bottom: #b7b7b7 solid 10px;
}

.part3{
	width: calc(100%*3/9);
}

.part3 .head{
	height: 5%;
	font-size: 12px;
	background-color: #ffffff;
}

.part3 .rowBox{
	height: 95%;
	overflow-y: auto;
}

.part3 .rowBox .row{
	width: 100%;
	box-sizing: border-box;
	display: inline-block;
	overflow: hidden;
	font-size: 0;
	background-color: #fff;
}
.part3 .rowBox .row.g{
	background-color: #ededed;
}

.part3 .rowBox .row div{
	box-sizing: border-box;
	display: inline-block;
	font-size: 10px;
	overflow: hidden;
}

.freeSpaceRowBoxScroll{
	width: 100%;
	height: calc(100% - 28px);
	box-sizing: border-box;
	overflow-y: auto;
	font-size: 0;
}

div .freeSpaceRow{
	width: 100%;
	box-sizing: border-box;
	border: none;/*2px solid #ccc;*/
	font-size: 0;
	margin-bottom: 3px;
	padding: 0 5px;
	overflow: hidden;
}
div .freeSpaceRow.half{width: 50%; display: inline-block;}

div .freeSpaceRow div{
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	margin: 1px 0;
	font-size: 10px;
}

div .freeSpaceRow div.btn{
	line-height: 22px;
	height: 22px;
	vertical-align: middle;
	box-sizing: border-box;
	display: inline-block;
	padding: 5px 0;
	text-align: center;
}
div .freeSpaceRow .btn:hover{
	background-color: var(--yellow);
	color: #ffffff;
	cursor: pointer;
}

div .freeSpaceRow div.btn i{vertical-align: top;}

div .freeSpaceRow.green{background-color: var(--msggrehi2); color: #fff; border: none;}
div .freeSpaceRow.green input,
div .freeSpaceRow.green textarea,
div .freeSpaceRow.green select{	background-color: var(--msggrehi2); color: #fff;}
div .freeSpaceRow.green select option{	background-color: var(--msggrehi2); color: #fff;}
div .freeSpaceRow.green .btn:hover{background-color: #777;}

.freeSpaceRow.gray{background-color: #eee; color: #333; border: none;}
.freeSpaceRow.gray input,
.freeSpaceRow.gray textarea,
.freeSpaceRow.gray select{	background-color: #eee; color: #333;}
.freeSpaceRow.gray select option{	background-color: #eee; color: #333;}
.freeSpaceRow.gray .btn:hover{background-color: #ccc; color: #333}
.freeSpaceRow.gray ::placeholder{color: #ccc; border: none;}


div .freeSpaceRow input,
div .freeSpaceRow textarea,
div .freeSpaceRow select
{
	text-align: left;
	width: 100%;
	box-sizing: border-box;
	padding-bottom: 3px;
	border-radius: 0;
	border-width: 0 0 2px 0;
	border-bottom-style: solid;
	border-bottom-color: rgba(0, 0, 0, 0.1);
	background-color: transparent;
	margin: 0;
	font-size: 14px;
	height: auto; /*based on a fontsiz of 14px @ the <select> object*/
	resize: none;
}

div .freeSpaceRow input:focus,
div .freeSpaceRow select:focus
{
	border-bottom-color: rgba(0, 0, 0, 0.35);
	outline: none;
}

.pqdci i.btn{
	margin: 0 5px;
}

.pqdci i.btn:hover{
	cursor: pointer;
	opacity: 0.8;
}

.kpiChartBox{
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.kpiChartBox canvas{
	width: 50%;
}

.kpiChartBox .kpiChartBoxNamePlateBox{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #555;
	width: 103%;
	height: 100%;
	/*text-align: center;*/
	/*vertical-align: middle;*/
	font-size: 26px;
	box-sizing: border-box;
	background-color: transparent;
}

.kpiChartBox .kpiChartBoxNamePlateBox:hover{cursor: pointer; background-color: rgba(255, 255, 255, 0.15);}
.kpiChartBox .kpiChartBoxNamePlateBox:active{background-color: rgba(255, 255, 255, 0.3);}