/* signal */
.widget-signal{}
.signal-widget-tile{
	display:inline-block;
	padding: 8px;
	margin: 14px 0px;
	border-radius: 8px;
	box-sizing: border-box;
	box-shadow: 0px 1px 6px 0px #e6e6e6;
	transition: width 0.5s;
}
.signal-widget-tile header{width:100%; padding: 0px 0px 6px 0px;}
.signal-widget-tile section{width:100%; height:200px;}
.signal-widget-tile section canvas{width:100%; height:100%;}

.signal-widget-tile header .SWT-name{}
.signal-widget-tile header .SWT-btn{}
.signal-widget-tile header .SWT-btn .icon{cursor:pointer; width:24px; height:24px; margin:0px 8px 0px 0px;}
.signal-widget-tile header .SWT-btn .icon:hover{background-position: 0% 40%;}
.signal-widget-tile header .SWT-btn .icon:active{background-position: 0% 40%;}
.signal-widget-tile header .SWT-btn .text-icon{font-size:1.2em;}

.signal-tile-state-n{color:#1ab148;}
.signal-tile-state-w{color:#f89148;}
.signal-tile-state-a{color:#ffffff; background:#ef274e; animation: blink 2.5s ease-in-out 1s infinite;}
.signal-tile-state-on{color:#6798c1;}
.signal-tile-state-off{color:#a0a0a0; background:#e7e7e7;}

.signal-view-1 .signal-widget-tile{width:100%;}
.signal-view-1 .icon-full-width {display:none;}
.signal-view-2 .signal-widget-tile{width:49%;}
.signal-view-3 .signal-widget-tile{width:32%;}
.signal-view-4 .signal-widget-tile{width:24%;}
.signal-view-5 .signal-widget-tile{width:19%;}
.signal-view-6 .signal-widget-tile{width:16%;}

.signal-widget-tile-full{width:100%!important;}
.signal-widget-tile-full .icon-full-width{background-position: 0% 80%;}
.signal-widget-tile-full .icon-full-width:hover{background-position: 0% 100%!important;}

/* graph */
.widget-graph {}
.widget-graph section{height: 400px;}
.widget-graph.widget-full-screen section{height: calc(100% - 100px);}
.widget-graph-left{display:block;width: 30%;height: 100%;}
.widget-graph-right{display:block;width: 70%;height: 100%; min-height: 400px;}
.btn_color-graph {
	cursor:pointer;
	display:inline-block; 
	width:24px; 
	height:24px;
	margin:0px 10px 0px 0px;
	border: 1px solid #888;
	border-radius:50%;
	background:#888;
}
.btn_color-graph:hover{border: 1px solid #ffae00;}
.btn_color-graph:active{border: 1px solid #ffae00;}

/* history */
.widget-history {}
.widget-history-time {}
.widget-history-time > input{width:80px;}
.widget-history-time > p > input{width:178px;}

.widget-history-checbox {max-width: 572px;}
.widget-history-checbox label {
	display: inline-block;
    height: 26px;
	width: 180px;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
}
.widget-history-checbox label:hover {color:#ffae00;}
.widget-history-checbox label:hover .checkbox{border-color:#ffae00;}
.widget-history-checbox label span {vertical-align: middle;}

.widget-history-selects p {text-align: right;}

.widget-history footer {padding: 20px 0px 0px 0px;}
.widget-history footer li {padding: 8px;}
.widget-history footer li > p:first-child{}
.widget-history footer li > p:last-child{font-size: 0.9em; color: #b5b5b5;}

@media screen and (max-width: 800px) {
	.widget-graph section{flex-wrap: wrap-reverse; min-height: 400px; height: auto; }
	.widget-graph-left{width:100%; height:auto;}
	.widget-graph-right{width: 100%;}
	.widget-history-selects{width: 100%; text-align:center;}
	.widget-history-selects p{text-align:center;}
}