body, html {
 background-color:#E9F0F0;
}

/* Setup */
input:invalid 
{
 border:2px solid #357EC7 !important;
}

input:invalid + input[type=submit] 
{
 pointer-events:none;
 opacity:0.5;
}
.col-sm-offset-2 
{
 background-color:#FFFFFF;
 box-shadow:0 12px 15px rgba(0, 0, 0, 0.4);
 padding:20px;
}
body {
	font-size:14px;
	padding: 15px 20px;
}


/* device */
.block {
 background-color:#fff;
 box-shadow:0 12px 15px rgba(0, 0, 0, 0.4);
 padding:20px;
 margin:20px;
 float:left;
}
@media (max-width:480px) {
 .block {
  margin:20px -15px;
 }
}
.history {
 background-color:#FFFF00;
 box-shadow:0 12px 15px rgba(0, 0, 0, 0.4);
 padding:10px;
 margin:10px 0;
 display:block;
}
.header {
 background-color:#fff;
 box-shadow:0 22px 22px -22px gray;
 margin:0 -15px 23px;
 padding:1px 50px 15px;
 border-radius:10px 10px 0 0;
}
.device {
 background-color:#FFFF00;
 box-shadow:0 5px 25px rgba(0, 0, 0, 0.4);
 border-radius:10px;
 margin-top:5%;
}
h5 {
 background-color:#FFFF00;
 color:#FFFF00;
 margin-top:-40px;
 padding:10px 0;
 width:50%;
 text-align:center;
 text-transform:uppercase;
}
.add span {
 background-color:#FFFF00;
 border-radius:100px;
 box-shadow:0 5px 25px rgba(0, 0, 0, 0.4);
 padding:0 20px;
}
.add {
 font-size:40px;
}
#date {
 text-transform:capitalize;
}

/* loader */
.loader {
 border:15px solid #fff;
 border-top:15px solid #FFFF99;
 border-radius:50%;
 width:70px;
 height:70px;
 animation:spin 1s linear infinite;
 margin-left:45%;
}
@keyframes spin {
 0% { transform:rotate(0deg); }
 100% { transform:rotate(360deg); }
}
ul#history {
 text-indent: .5em;
 border-left: .25em solid #c0c7ca;
 margin-left: 5px;
}
#history li {
 margin-left: -31px;
}


