/** { box-sizing: border-box; }*/
html{
	width:100vw;
	height:100vh;
	min-width:100vw;
	min-height:100vh;
	/*overflow-y:scroll;*/
	margin:0;
	padding:0;
}
body{
	width:100%;
	height:100%;
	min-width:100%;
	min-height:100%;
	overflow:hidden;
	margin:0;
	padding:0;
}
/*
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px grey; 
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	background: #9e9d9e; 
	border-radius: 10px;
}
*/
canvas{
	outline:none;
	border:none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
/** { box-sizing: border-box; }*/
/*.grid {
  max-width: 1200px;
  background: #DDD;
}*/

/* clear fix */
/*.grid:after {
  content: '';
  display: block;
  clear: both;
}*/

/* ---- .grid-item ---- */
.grid{
}
.grid:after{
	content:'';
	display:block;
	clear:both;
	/*clear:left;*/
}
.grid-sizer {
 	width:1px;
}

.grid-item {
	/*margin:1px;*/
	margin:0;
	padding:0;
	float: left;
	z-index:0;
}
.packery-drop-placeholder {
  border: 3px dotted #333;
  background: hsla(0, 0%, 0%, 0.3);
}

.grid-item.is-dragging,
.grid-item.is-positioning-post-drag {
  z-index: 2;
}
.panel{
	--backgroundcolor:#ffffff;
	border:1px solid #9d9d9d;
	/*box-shadow:10px #9d9d9d;*/
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	/*width:300px;
	height:360px;*/
	/*width:auto;
	height:auto;*/
	min-width:340px;
	min-height:360px;
	/*z-index:1;*/
	background-color:var(--backgroundcolor);
	/*float:left;*/
	/*margin:5px;*/
	text-align:center;
	/*position:absolute;*/
	/*top:0px;
	left:0px;*/
}
.chart-panel{
	--backgroundcolor:#ffffff;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	/*width:300px;
	height:360px;*/
	width:auto;
	height:auto;
	min-width:680px;
	min-height:360px;
	/*z-index:1;*/
	background-color:var(--backgroundcolor);
	/*float:left;*/
	/*margin:5px;*/
	text-align:center;
	/*position:absolute;*/
	/*top:0px;
	left:0px;*/
	padding:20px;
}
.chart-panel canvas{
}
.linear-panel{
	border:1px solid #9d9d9d;
	/*box-shadow:10px #9d9d9d;*/
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	/*width:150px;
	height:360px;*/
	width:auto;
	height:auto;
	min-width:150px;
	min-height:360px;
	/*min-height:150px;*/
	/*z-index:1;*/
	background-color:#ffffff;
	/*float:left;*/
	/*margin:0;*/
	text-align:center;
	/*position:absolute;*/
	/*overflow:hidden;*/
	/*padding:0;*/
}
.label-panel{
	--backgroundcolor:#ffffff;
	--width:auto;
	--height:auto;
	border:1px solid #9d9d9d;
	/*box-shadow:10px #9d9d9d;*/
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	/*width:200px;
	height:130px;*/
	width:var(--width);
	height:var(--height);
	min-width:200px;
	min-height:130px;
	/*z-index:1;*/
	background-color:var(--backgroundcolor);
	/*float:left;*/
	/*margin:5px;*/
	text-align:center;
	/*position:absolute;*/
	/*overflow:hidden;*/
}
.lamp-panel{
	--backgroundcolor:#ffffff;
	border:1px solid #9d9d9d;
	/*box-shadow:10px #9d9d9d;*/
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	/*width:200px;
	height:130px;*/
	width:auto;
	height:auto;
	min-width:180px;
	min-height:180px;
	/*z-index:1;*/
	background-color:var(--backgroundcolor);
	/*float:left;*/
	/*margin:5px;*/
	text-align:center;
	/*position:absolute;*/
	/*overflow:hidden;*/
}
.button-panel{
	--backgroundcolor:#ffffff;
	border:1px solid #9d9d9d;
	/*box-shadow:10px #9d9d9d;*/
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	/*width:200px;
	height:130px;*/
	width:auto;
	height:auto;
	min-width:180px;
	min-height:180px;
	/*z-index:1;*/
	background-color:var(--backgroundcolor);
	/*float:left;*/
	/*margin:5px;*/
	text-align:center;
	/*position:absolute;*/
	/*overflow:hidden;*/
}
.slider-panel{
	--backgroundcolor:#ffffff;
	--width:auto;
	--height:auto;
	border:1px solid #9d9d9d;
	/*box-shadow:10px #9d9d9d;*/
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	/*width:200px;
	height:130px;*/
	width:var(--width);
	height:var(--height);
	min-width:300px;
	min-height:130px;
	/*z-index:1;*/
	background-color:var(--backgroundcolor);
	/*float:left;*/
	/*margin:5px;*/
	text-align:center;
	/*position:absolute;*/
	/*overflow:hidden;*/
}
.panel-header{
	width: calc(100% - 10px);
	height: calc(50px - 10px);
	text-align:right;
	margin:5px;
	/*border:1px solid;*/
}
.panel-header .config{
	/*width:10px;
  	height:100%;
 	border-radius:50%;
 	background-color: #9e9e9e;
 	box-shadow: 0px 15px 0px #9e9e9e, 0px 30px 0px #9e9e9e;
 	float:right;
 	border:1px solid;*/
	width:20px;
	height:60%;
	/*color:#9e9e9e;*/
	color:#000000;
	font-size:20px;
	/*border:1px solid green;*/
	float:left;
	/*font-size:20px;*/
	cursor:pointer;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
.config .dropdown-content{
	display:none;
	position:absolute;
	background:#f1f1f1;
	min-width:160px;
	overflow:auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
	z-index:999 !important;
	text-align:left;
	font-size:12px;
	top:0;
	right:0;
}
.dropdown-content a{
	color:#000000;
	padding:12px 16px;
	text-decoration:none;
	display:block;
}
.dropdown-content a:hover{
	background:#dddddd;
}
.show{
	display:block !important;
}

.panel-menu-show{
	z-index:999 !important;
}

.panel-header .description{
	width:20px;
	height:60%;
	color:#9e9e9e;
	font-size:12px;
	float:left;
	/*font-size:20px;*/
	cursor:pointer;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	/*background-size:cover;
	background:url('/img/info.png');*/
	background:url('/img/pencil-solid.svg');
	background-repeat: no-repeat;
	/*background-size:cover;*/
	background-size:15px 15px;
	/*background-attachment: fixed;*/
	background-position: center;
}
.txtareafill-parent{
	width:100%;
	height:100%;
	box-sizing: border-box;
	background-color:#ffffff;
	margin:0;
	padding:0;
	resize:none;
	outline:none;
}
.panel-header .title{
	width: calc(100% - 50px);
	height:100%;
	float:left;
	/*border:1px solid red;*/
	text-align:left;
	cursor:default;
	/* disable text selection */
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}
.panel-container{
	/*display:flex;
	justify-content:center;
	align-items:center;
	height:calc(100% - 100px);*/
}
.canvas-draw{
	display:block;
	margin:0;
	padding:0;
	margin:0;
	padding:0;
}
.draw{
/*border:1px solid blue;*/
	width:100%;
	height:calc(100% - 60px);
	min-width: 300px;
	min-height: 300px;
	max-width: 300px;
	max-height: 300px;
}
.container{
	padding:2px;
	width:calc(100% - 4px);
	height:calc(100% - 50px) !important;
	min-width: calc(100% - 4px );
	min-height:calc(100% - 54px);
	overflow-y:auto;
	box-sizing:border-box;
}
.container * { box-sizing: border-box;}

.p-header{
	width:calc(100% - 4px);
	max-height:80px;
	margin:0;
	padding:0 2px;
	border:1px solid #9e9e9e;
	overflow:auto;
}

.level{
	height: 100%;
	width:100%;
	box-sizing: border-box;
	position:fixed;
	top:0;
	left:0;
	background-color:rgb(0,0,0);
	background-color:rgba(0,0,0,0.4);
	overflow:auto;
	z-index:1;
	/*border:1px solid orange;*/
	/*-webkit-overflow-scrolling: none;
	overflow: hidden;
	overscroll-behavior: none;*/
}
.modal-form{
	/*width:calc(100% - 520px);*/
	/*width:50%;
	height:calc(100% - 20px);*/
	width:500px;
	height:300px;
	/*opacity:0.5;*/
	background-color:#ffffff;
	/*z-index:2;
	float:right;*/
	padding:10px;
	border:1px solid #9d9d9d;
	/*box-shadow:10px #9d9d9d;*/
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	/* make div to center x,y screen*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* end */
}
.modal-form .config-container{
	width:100%;
	height:calc(100% - 30px);
	float:right;
	overflow:auto;
}
.modal-form .config-footer{
	width:100%;
	height:25px;
	text-align:center;
	border-top:1px solid #9d9d9d;
	float:right;
}
.config-footer button{
	margin:5px;
}
.gaugeconfig-form span{
	margin:5px;
	display:block;
	width:300px;
}
.labelconfig-form div{
	margin:5px;
	min-width:300px;
	width:calc(100% - 10px);
	height:25px;
	min-height:25px;
	overflow:hidden;
}
.labelconfig-form div label{
	width:auto;
	min-width:120px;
	display:block;
	border:1px;
	margin:0px;
	padding:0px;
	float:left;
}
.labelconfig-form div input{
	float:left;
}
.labelconfig-form div input[type=color]{
	height:95%;
}
.div-border-raduim{
	border-radius:10px;
	border:1px solid #9d9d9d;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
meter {
	/* background: none; */
	-webkit-appearance: meter;
	border: 1px solid #ccc;
	border-radius: 3px;
	/* background-color: whiteSmoke; */
	width: calc(100% - 20px);
	height: 50px;
}
meter::-webkit-meter-bar {
	animation: animate-stripes 5s linear infinite;
	background-image:
		linear-gradient(
			135deg,
			transparent,
			transparent 33%,
			rgba(0,0,0,0.1) 33%,
			rgba(0,0,0,0.1) 66%,
			transparent 66%
		);
	background-size: 50px 25px;

/*	background: none; */
	background-color: whiteSmoke;
	box-shadow: 0 5px 5px -5px #333 inset;

}
@keyframes animate-stripes {
	to { background-position: -50px 0; }
}
/*meter::before {
	content: 'Testing';
	position: absolute;
	top: -1px;
}*/
.div-tank{
    width:100px;
    height: 200px;
    border:1px solid black;
    background-color: rgba(255, 254, 254, 0.315);
    box-sizing: border-box;
    box-shadow: 0 0 10px #9ea2a5, 0 0 40px #e1e4e7, 0 0 80px #f0f3f5;
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

.div-water-tank{
    position: absolute;
    background-color: rgba(54,162,235,0.6);
    width:100%;
    height: var(--level);
    max-height: 100%;
    bottom: 0;
}
.div-tank-meter{
    width:50px;
    height: 100%;
    box-sizing: border-box;
    position:absolute;
    left: -3.5em;
    margin: 10;
    top:0;
}

.div-tank-meterstart{
    width:100%;
    position:absolute;
    display:block;
    bottom:0;
    text-align: right;
}
.div-tank-meterend{
    width: 100%;
    position:absolute;
    display:block;
    top: 0;
    text-align: right;
}
.btn-toggle-active{
	color:#ffffff;
	background:#44983a;
}
.btn-widget-icon{
	width:60px;
	height:40px;
	border-radius:10px;
	border:1px solid #9d9d9d;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	margin:2px;
	cursor:pointer;
	display:block;
	float:left;
}
.btn-add-semi-gauge{
	background:url('/img/semigauge.png');
	/*background-size:cover;*/
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-gauge{
	background:url('/img/simplegauge.png');
	/*background-size:cover;*/
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-radial-gauge{
	background:url('/img/risk.png');
	/*background-size:cover;*/
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-linear-gauge{
	background:url('/img/thermometer.png');
	/*background-size:cover;*/
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-meter{
	background:url('/img/resources.png');
	/*background-size:cover;*/
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-chart{
	background:url('/img/bar-graph.png');
	/*background-size:cover;*/
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-label{
	background:url('/img/text.png');
	/*background-size:cover;*/
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-switchbtn{
	background:url('/img/power-button.png');
	/*background-size:cover;*/
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-lamp{
	background:url('/img/lamp.png');
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-tank{
	background:url('/img/storage-tank.png');
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-add-slider{
	background:url('/img/slider.png');
	background-size:67% 100%;
	background-repeat: no-repeat;
	background-position: center;
}
.btn-color-config{
	width:50px;
	height:25px;
	border-radius:5px;
	border:1px solid #9d9d9d;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	/*margin:2px;*/
	cursor:pointer;
}
.btn-color-config:hover{
	width:50px;
	height:25px;
	border-radius:5px;
	border:1px solid lightgreen;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	background:#ffffff;
	/*margin:2px;*/
	cursor:pointer;
}
.div-labeldisplay{
	min-width:200px;
	min-height:80px;
	border:1px solid #9d9d9d;
	/*box-shadow:10px #9d9d9d;*/
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	text-align:center;
	/*font-size:60px;*/
	cursor:context-menu;
}
.color-highlight input[type=number]{
	width:50px;
}

/*### Control widget ###*/
.div-switch-btn-container{
	position:relative;
    	display: flex;
    	align-items: center;
    	justify-content: center;
	text-align:center;
	margin:0 auto;
}
.div-switch-btn{
	--fill: #fff;
	--fontfamily:Arial;
	--fontsize:22px;
	--width:80px;
	--height:80px;
	width: var(--width);
	height: var(--height);
	font-family:var(--fontfamily);
	font-size: var(--fontsize);
	font-weight: 600;
	overflow: hidden;
	color: var(--fontcolor);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	box-shadow: 0 0 10px #9ea2a5, 0 0 40px #e1e4e7, 0 0 80px #f0f3f5;
	border-radius: 50%;
    	border:none;
    	background-color: var(--fill);
	margin:0 40px 40px;
	cursor: pointer;
}

.div-switch-btn-active{
    /*color: rgb(116, 184, 14);*/
    /*font-family:var(--fontfamily);*/
    background-color: #4caf50;
    color: #fff;
}

/*### Lamp ###*/
.div-lamp{
	display:flex;
	flex-direction:column;
	align-items:center;
	position: relative;
	margin:10px;
}
.div-lamp-value{
	--lampcolor:#999999;
	--lampsize:64px;
	/*1rem = 16px*/
}
.div-bulb{
	/*--lampcolor:#9e9e9e;*/
	background:var(--lampcolor);
}
.div-lamp-top{
	width:var(--lampsize);
	height:var(--lampsize);
	border-radius:50%;
}
.div-lamp-middle{
	/*--lampcolor:#9e9e9e;*/
	width:0;
	height:0;
	border: calc(var(--lampsize) / 2) solid transparent;
	border-bottom:0;
	border-top:calc(var(--lampsize) + 0.5px) solid var(--lampcolor);
	position:absolute;
	bottom:0rem;
}
.div-lamp-bottom{
	width:calc(var(--lampsize) / 2);
	height:calc(var(--lampsize) / 2);
	border-radius:40%;
}
.div-lamp-on div{
	background:lightgreen;
}

/*### circle lamp ###*/
.div-lampcontainer{
	position:relative;
    	display: flex;
    	align-items: center;
    	justify-content: center;
	text-align:center;
	width:var(--width);
	height:var(--height);
	margin:0 auto;
}
.div-circlelamp{
	--lampcolor: #ffffff;
	--fontfamily:Arial;
	--fontsize:22px;
	--width:80px;
	--height:80px;
	width: var(--width);
	height: var(--height);
	/*color: #fff;*/
	font-family:var(--fontfamily);
	font-size: var(--fontsize);
	font-weight: 600;
    	overflow: hidden;
    	color: var(--fontcolor);
    	display: flex;
    	align-items: center;
    	justify-content: center;
	text-align:center;
    	/*position: relative;*/
    	box-sizing: border-box;
    	box-shadow: 0 0 10px #9ea2a5, 0 0 40px #e1e4e7, 0 0 80px #f0f3f5;
    	border-radius: 50%;
    	border:none;
    	/*background-color: white*/;
    	background-color: var(--lampcolor);
	margin:0 40px 40px;
	/*margin: 0 auto;
   	margin-bottom: 25px;*/
}

/*### slider ###*/
.slider-container{
	width:100%;
	height:100%;
	display: flex;  
	justify-content: center;
	align-items: center;  
}
.slider{
	-webkit-appearance: none;
	width: 70%;
	height: 25px;
	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
	display: inline-block;
	vertical-align: middle;
}
.slider:hover{
	opacity:1;
}
.slider::-webkit-slider-thumb {
	--thumbcolor:#2193c4;
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height: 25px;
	background-color: var(--thumbcolor);
	cursor: pointer;
}
.slider-label{
	width:40px;
	margin:0;
	display: inline-block;
	vertical-align: middle;
}
/*### table input text ###*/
.tb-textdisplay  input[type="text"]{
	width:150px;
}
.td-display-block *{
	display:block;
	float:left;
	height:25px;
}
/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
	/*Style*/
	html,body{
		/*overflow:auto;*/
		margin:0;
		padding:0;
	}
	.panel,.linear-panel,.label-panel,.lamp-panel,.button-panel{
	}
	.container{
		position:relative;
		width:100%;
		height:calc(100% - 280px) !important;
		min-height:calc(100% - 160px) !important;
		overflow-y:auto;
		padding:2px;
	}
	.p-header{
		width:calc(100% - 12px);
		max-height:80px;
		padding:10px 5px;
		overflow-y:auto;
	}
	.level{
		height: 100%;
		width:100%;
		box-sizing: border-box;
		position:fixed;
		top:0;
		left:0;
		background-color:rgb(0,0,0);
		background-color:rgba(0,0,0,0.4);
		overflow:auto;
		z-index:1;
		/*border:1px solid orange;*/
	}
	.modal-form{
		width:calc(100% - 20px);
		height:calc(100% - 25px);
		/*opacity:0.5;*/
		background-color:#ffffff;
		z-index:2;
		float:right;
		padding:10px;
	}
	.modal-form .config-container{
		width:100%;
		height:calc(100% - 150px);
		float:right;
		overflow:auto;
	}
	.modal-form .config-footer{
		width:100%;
		height:100px;
		text-align:center;
		border-top:1px solid #9d9d9d;
		float:right;
	}	
	.div-meter{
		width:100%;
		height:360px;
	}
	
}