body {
	background: #FAFAFA;
}

/* Layout structure */
.top-wrapper {
	width: 100%;
}

.sidebar-wrapper {
	width: 100%;
	z-index: 1000;
}

/* Top bar */
.top-bar {
	background: #274060;
	height: 72pt;
	width: 100%;
	z-index: 1000;
}

.top-bar .navbar-brand {
	color: #FFF;
	font-size: 20pt;
}

.top-bar .nav-link {
	color: #ABB1BB;
}

.top-bar .nav-link:hover {
	color: #FFF;
}

.top-bar div {
	line-height: 65pt;
}

/* Sidebar */
.sidebar {
	-webkit-box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.2);
	box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.2);
	height: 100%;
}

.sidebar .nav-link {
	color: #595959;
}

.sidebar .nav-item .nav-link:hover,
.sidebar .active .nav-link {
	color: #404040;
}

.sidebar .nav-item:hover {
	background: #EDEDED;
}

.sidebar .active,
.sidebar .active:hover {
	background: #D5D5D5;
	border-top: 1px solid #BFBFBF#;
	border-bottom: 1px solid #BFBFBF#;
}

/* Login */
.vertical-center {
	align-items: center;
	display: flex;
	height: 100%;
	height: 100vh;
}

/* Form */
.error-message {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #dc3545;
}

/* Charts */
.chart-wrap {
	height: 0;
	overflow: hidden;
	padding-bottom: 100%;
	position: relative;
}

.chart {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/* Dashboard */
.dashboard--card a,
.dashboard--card a:hover,
.dashboard--card a:visited
{
	color: inherit;
	text-decoration: none;
}

/* Menu */
.nav-item ion-icon {
	font-size: 18px;
	position: absolute;
	left: 20px;
}

.nav-item {
	padding-left: 40px;
	line-height: 18px;
}

@media (min-width: 768px) {
	.top-wrapper {
		height: 72pt;
		margin-top: -72pt;
		position: fixed;
		width: 100%;
		z-index: 1000;
	}

	.sidebar-wrapper {
		height: 100%;
		position: fixed;
		width: 250px;
		z-index: 1000;
		/*overflow-y: scroll;*/
		max-height: calc(100vh - 72pt);
	}

	.content-wrapper {
		margin-left: 250px;	
		margin-top: 72pt;
	}

	.top-bar {
		position: fixed;
	}
}

/* Onus view */
.isp-image {
	height: 25px;
}

/* Hack for the Google charts with the Bootstrap tabs */

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     
    height: 0;          
    overflow: hidden; 
}

.tab-content > .active,
.pill-content > .active {
    height: auto;       
}

/* ONUs received power thermometer */
.power-thermometer {
	display: inline;
}

.power-thermometer div {
	background: #bfbfbf;
	height: 15px;
	width: 15px;
	margin-left: 1px;
	display: inline-block;
}

.power-thermometer--high {
	background: #28a745 !important;
}

.power-thermometer--medium {
	background: #ffc107 !important;
}

.power-thermometer--low {
	background: #dc3545 !important;
}

.power-thermometer div:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.power-thermometer div:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}