.roomStatus{
    width:200px;height:130px;
   border:white 1px solid;
   display:inline-block;
   *display:inline;zoom:1;
   margin:0px;outline:none;
   vertical-align: top;
   }

.roomStatsSubBlock{
    /*width:180px;*/
    height:40px;
   /*border:black 1px solid;*/
   display:inline-block;
   *display:inline;zoom:3;
   margin:0px;outline:none;
   vertical-align: top;
   }
.noBorder {
    border: 0px;
    padding:0; 
    margin:0;
    border-collapse: collapse;
}

p .smallStatsHeadings {
  font-size: 8px;
  font-weight: bold;
}

p .smallStatsData {
  font-size: 8px;
    display: inline;
}

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


/*Fade in animation for the login page*/
.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:0.5s;
}

.fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
  position: absolute;
    
}

.fade-in.two {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay:0.5s;
  animation-delay: 0.5s;

}

.fade-in.three {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

table[summaryTable] {
    width: 100%;
    vertical-align: center;
    text-align: center;
}

md-card[sitesummary] {
  font-size: 12px;
  margin: 2px!important;
}

md-card-title[sitesummary] {
  padding: 6px;
}

md-card-title-media[sitesummary] {
  padding-top: 6px;
}

span[sitesummary] {
  font-size: 14px;
  line-height: 14px;
}

img[logo] {
  width:416px; 
  height:60px; 
  padding:0px; 
  margin:4px;
  margin-left: 8px;
}
img[logoClient] {
  width:320px; 
  height:60px; 
  padding:0px; 
  margin:4px;
  margin-right: 8px;
}
img[logohome] {
  max-width:416px; 
  height:auto; 
  margin-right: 12px;
  width: 100%;
  display: inline-block;
}

img[loginLogo] {
  width: 1003px;
  height: auto;
  background-size: 100% auto;
}

/* Create the animation blocks */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.circle-rotate.green {
	border-radius: 50%;
	width: 25px;
	height: 25px;
	
  margin-left: 10px;
  margin-right: 10px;

	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, rgb(68, 238, 68) 0%, green 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, rgb(68, 238, 68), green);
	background-image: radial-gradient(45px 45px 45deg, circle cover, rgb(68, 238, 68) 0%, green 100%, red 95%);
	
	animation-name: spin; 
	animation-duration: 2s; 
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}

.circle-rotate.red {
	border-radius: 50%;
	width: 25px;
	height: 25px;
  
  margin-left: 10px;
  margin-right: 10px;
  
	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, rgb(255, 118, 118) 0%, red 100%, red 95%);
	background-image: -webkit-radial-gradient(45px 45px, circle cover, rgb(255, 118, 118), red);
	background-image: radial-gradient(45px 45px 45deg, circle cover, rgb(255, 118, 118) 0%, red 100%, red 95%);
	
	animation-name: spin; 
	animation-duration: 2s; /* 3 seconds */
	animation-iteration-count: infinite; 
	animation-timing-function: linear;
}

div.busy-overlay {
  position: fixed;
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  background-color: rgba(237, 237, 237, 0.60);
  z-index:4;
}

svg line {
  padding: 50px
}