.cont_box{
	position: absolute;
	top: 3em;
	left:0;
	right: 0;
	bottom:0
}
.dev_box{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(145,216,255);
	padding: 10px 0 0 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.devst_on,
.devst_of{
	display: flex;
	align-items: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* DEVICE NAME */
.dev_name{
	font-size: 2rem;
	font-weight: 700;
	font-variant: small-caps;
	text-shadow: 2px 2px 0px rgba(230,230,230,0.6);
	padding: 3px 16px;
	background: #fff;
	border-radius: 0.4rem;
	border:1px solid #444;
}

/* DEVICE STATE */
.dev_state{
	font-size: 1.4rem;
	font-weight: 700;
	background: #fff;
	padding: 3px 6px;
	border-radius: 0.4rem;
	margin: 4px 0;
	border:1px solid #444;
}
#dev_dev .dev_state:after{
	display: inline-block;
	padding: 0;
	margin:0;
	min-width:30px;
}

/* DEVICE STATE OFFLINE */
#dev_dev[data-state="0"] .dev_state:after{
	content:"offline";
	color: #990000;
}
#dev_dev[data-state="0"] .devst_on{
	display: none;
}

/* DEVICE STATE ONLINE */
#dev_dev[data-state="1"] .dev_state:after{
	content:"online";
	color: green;
}
#dev_dev[data-state="1"] .devst_of{
	display: none;
}

/* DEVICE STATE POLL */
#dev_dev[data-state="3"] .devst_on,
#dev_dev[data-state="3"] .devst_of{
	display: none;
}
#dev_dev[data-state="3"] .dev_state:after{
	content:"";
	width:60px;
	height: 1.4rem;
}

/* DEVICE STATE ERROR */
#dev_dev[data-state="9"] .devst_on,
#dev_dev[data-state="9"] .devst_of{
	display: none;
}
#dev_dev[data-state="9"] .dev_state:after{
	content:"error";
	color: red;
}

/* ==================
DOTS
====================*/
#dev_dev[data-state="3"] .dev_poll{
  display: inline-block;
  position: relative;
  left: -990px;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  color: rgba(0,46,70,1);
  box-shadow: 1000px -6px 0 0, 1015px 0 0 0, 1030px 8px 0 0;
  animation: dots 1.5s infinite linear;
}
@keyframes dots{
   0%{box-shadow: 1000px -6px 0 0,	1015px 0 0 0, 		1030px 6px 0 0;}
  25%{box-shadow: 1000px 0 0 0,     1015px -6px 0 0, 	1030px 0 0 0;}
  50%{box-shadow: 1000px 6px 0 0,   1015px 0 0 0, 		1030px -6px 0 0;}
  75%{box-shadow: 1000px 0px 0 0,   1015px 6px 0 0, 	1030px 0 0 0;}
 100%{box-shadow: 1000px -6px 0 0,	1015px 0 0 0, 		1030px 6px 0 0;}
}


#dev_dev button {
	width: 200px;
	height: 3em;
	margin: 0.7em;
	background: #3b88fd;
	color: #fff;
	font-weight: 400;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 500;
	box-shadow: inset -3px -3px 6px 0px rgba(0,0,0,0.4);
	cursor: pointer;
}


.page_back{
	position: absolute;
	top: calc( -3em - 12px );
}
.btn_back{
	background-color: green !important;
}