:host {
  width: 100%;
  height: 100%;
}

.home-page-container {
	background: white;
	font-family: Roboto;
	height: 100%;
	min-height: 652px;
	min-width: 718px;
	overflow: auto;
	padding: 40px 60px;
  }

.hp-top-ctr {
	display: flex;
	height: 80%;
}

.hp-bottom-ctr {
	height: 20%;
	min-height: 100px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.collateral {
	height: 110px;
	width: 110px;
	background-color: #ffffff;
	border-radius: 4px;
	box-shadow: 0 0 6px 0 rgba(111, 111, 111, 0.5);

	margin: 0 10px;
	padding: 5px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	/* makes 'not available' overlay fit into container space */
	position: relative;
}

.collateral-icon {
	color: #1c99c4;
	height: 25px;
	width: 20px;
	margin: 3px 0;
  }
  
  .collateral-label {
	color: #1c99c4;
	font-family: Roboto;
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
	text-align: center;
  }

/* Show "NOT AVAILABLE' text for inactive resource links */
.inactive::after {

	/* Fill button (overlapping icon + icon label) */
	position: absolute;
	top: 0;
	left: 0;
	height: 110px;
	width: 110px;

	/* Background */
	background-color: #ccc;
  	opacity: 0.8;

  	/* Content (flexbox is only used to center the text) */
  	content: 'NOT AVAILABLE';
  	color: #c00;
  	font-weight: 500;
  	display: flex;
  	align-items: center;
  	text-align: center;
}

/* Highlight resource buttons on hover */
.active:hover {
  border: 2px solid #40a9cd;
  box-shadow: 0 0 6px 2px rgba(64, 169, 205, 0.5);
  cursor: pointer;
}



.connection-label {
  color: #555555;
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  margin: 10px 0;
}

.connection-status {
  display: flex;
  position: relative;
  align-items: center;
  color: #555555;
  font-family: Roboto;
  font-size: 26px;
  line-height: 30px;
}

.connection-status .outer-circle {
	/* Circle */
  	height: 30px;
  	width: 30px;
	border-radius: 50%;
	background-color: #d4ebe0;
	  
	/* Center inner circle */
  	display: inline-flex;
  	align-items: center;
	justify-content: center;
	
	/* Text padding */
	margin-right: 5px;
}

.connection-status .inner-circle {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background-color: #4baf4f;
}

.connection-status.green {
  color: #4baf4f;
}

.connection-status.green .outer-circle {
  background-color: #d4ebe0;
}

.connection-status.green .inner-circle {
  background-color: #4baf4f;
}

.connection-status.red {
  color: #c00;
}

.connection-status.red .outer-circle {
  background-color: rgba(204, 0, 0, 0.2);
}

.connection-status.red .inner-circle {
  background-color: #c00;
}

.device-intro {
  color: #555;
  font-family: Roboto;
  font-size: 12px;
  line-height: 17px;
  margin: 15px 0;
  min-width: 240px;
  width: 270px;
  text-align: justify;
}

.device-name {
  color: #555555;
  font-family: Roboto;
  font-size: 26px;
  line-height: 30px;
} 




.hp-device-details {
  min-width: 150px;
  font-size: 13px;
  margin: 0 auto;
  height: 50%;
}

.hp-graphics {
  display: flex;
  height: 100%;
  width: 50%;
}




.quick-start {
  background-color: #cc0000;
  border: 1px #cc0000 solid;
  border-radius: 4px;
  color: white;
  font-family: Roboto;
  font-size: 14px;
  height: 36px;
  line-height: 16px;
  width: 240px;
}

.qs-label {
  margin: 0 15px;
}

button {
  cursor: pointer;
}

.hw-info-icon {
	width: 27px;
	height: 27px;
	color: rgb(167, 167, 167);
	margin-left: 20px;
	cursor: pointer;
}

.infoHeaderText {
	font-size: 19px;
	margin-bottom: 10px;
	color: rgb(128, 128, 128);
	text-align: center;
}

.infoBlock {
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 16px;
	color: #1c99c4;
}

.infoContainer {
	position: absolute;
	width: 350px;
	left: 200px;
	top: 0;
	z-index: 100;
	padding: 20px;
	color: rgb(71, 71, 71);
	border: 0.5px solid rgb(195, 195, 195);
	background-color: rgb(255, 255, 255);
	box-shadow: 0 0 4px 2px rgba(195, 195, 195, 0.5);
	border-radius: 10px;
}

.infoContainer::before {
	content: "";
	position: absolute;
	top: 10px;
	left: -11px;
	margin-right: -12px;
	border-width: 6px;
	border-style: solid;
	border-color: transparent #252525 transparent transparent;
}

.infoContainer::after {
	content: "";
	position: absolute;
	top: 10px;
	left: -11px;
	margin-right: -10px;
	border-width: 6px;
	border-style: solid;
	border-color: transparent rgb(255, 255, 255) transparent transparent;
}

.close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 15px;
	cursor: pointer;
}

.hide {
	display: none;
}

.infoKey {
	width: 150px;
	color: rgb(138, 138, 138);
}

.infoValue {
	margin-left: 15px;
	color: #1c99c4;
}


.svg-position {
	position: relative;
	left: 42%;
	vertical-align: middle;
}

.svg-label {
	color: #a8a8a8;
	font-style: italic;
	font-weight: 400;
}


/* ... Animation */

.loading:after {
	display: inline-block;
	animation: dotty steps(1, end) 1s infinite;
	content: '';
}

@keyframes dotty {
	0% {
		content: '';
	}

	25% {
		content: '.';
	}

	50% {
		content: '..';
	}

	75% {
		content: '...';
	}

	100% {
		content: '';
	}
}