.status-light {
  margin: 5px 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  float: left;
}
.status-light-md {
  margin: 5px 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  float: left;
  margin: 10px 10px;
  width: 18px;
  height: 18px;
}
.sl-red {
  background-color: #940;
  box-shadow: #222255 0 -1px 7px 1px, inset #660000 0 -1px 9px, #ff0000 0 0px 8px;
}
.sl-red-bold {
  background-color: #C22;
  box-shadow: #333388 0 -1px 7px 1px, inset #660000 0 -1px 9px, #ff0000 0 0px 8px;
}
.sl-yellow {
  background-color: #A90;
  box-shadow: #222255 0 -1px 7px 1px, inset #666600 0 -1px 9px, #dddd00 0 0px 8px;
}
.sl-green {
  background-color: #669900;
  box-shadow: #222255 0 -1px 7px 1px, inset #446600 0 -1px 9px, #77dd00 0 0px 8px;
}
.sl-green-faded {
  background-color: #5e8217;
  box-shadow: #222255 0 -1px 7px 1px, inset #446600 0 -1px 9px, #77dd00 0 0px 8px;
}
.sl-blue {
  background-color: #44aabb;
  box-shadow: #222255 0 -1px 7px 1px, inset #000066 0 -1px 9px, #0066ff 0 0px 8px;
}
.sl-blue-faded {
  background-color: #6a8f95;
  box-shadow: #222255 0 -1px 7px 1px, inset #333399 0 -1px 9px, #2288ff 0 0px 4px;
}
.sl-unknown {
  background-color: #B9B9B9;
  box-shadow: #222255 0 -1px 7px 1px, inset #E4E4E4  0 -1px 9px, #FFFFFF 0 0px 4px;
}
.panel {
  overflow: hidden;
  display: inline-block;
  padding: 5px;
  border: 1px solid #FFFFFF;
  box-shadow: outset #716B6B 0 0 8px;
  border-radius: 6px;
  background-color: #FFFFFF;
}

.status-spinner {
  width: 20px;
  height: 20px;
  background-color: #008cba;
  margin-left: 11%;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.panel label {
	float: left;
	margin-top: .15em;
}