.navColor {
	background: #882929;
	color: white;
}

.userName {
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid rgba(0, 0, 0, .125);
	border-radius: 5px;
	background: white;
	color: #2E324C;
}

.userName:hover {
	cursor: pointer;
	background: rgb(68, 110, 155);
	color: white;
	border-radius: 5px;
}

#horiNav {
	padding-top: 10px;
	border: 1px solid rgba(0, 0, 0, .05);
	background: #f8f9fa;
}

#outputNav {
	padding-top: 10px;
	border: 1px solid rgba(0, 0, 0, .05);
	background: #f8f9fa;
}

div .card {
	background: #f8f9fa;
}

#main {
	background: white;
	color: black;
}
 .active>.iconimg {
	height: 25px;
	width: 25px;
	margin-right: 10px;
	filter: invert(100%);
}
 
.iconimg {
	height: 25px;
	width: 25px;
	margin-right: 10px;
	filter: invert(15%) sepia(11%) saturate(2467%) hue-rotate(194deg)
		brightness(94%) contrast(84%);
}

.buttonimg {
	height: 23px;
	width: 23px;
	filter: invert(15%) sepia(11%) saturate(2467%) hue-rotate(194deg)
		brightness(94%) contrast(84%);
} 

.closeimg {
	height: 12px;
	width: 12px;
	filter: invert(15%) sepia(11%) saturate(2467%) hue-rotate(194deg)
		brightness(94%) contrast(84%);
	
}

.closeimg:hover {
	cursor:pointer;
	
}

.active>.closeimg {
	filter: invert(100%);
}

.trigimg {
	height: 20px;
	width: 20px;
}

.projectLine.collapsed {
	background: #D5D6DB;
	color: #2E324C;
}

.projectLine {
	background: #2E324C;
	color: white;
}

.projectLine.collapsed:hover {
	background: #2E324C;
	color: white;
}

 button:hover>.trigimg {
	filter: invert(100%);
} 

 button[aria-expanded="true"]>.trigimg {
	filter: invert(100%);
} 

 button:hover>.buttonimg {
	filter: invert(100%);
} 

.headerFooter {
	background: #2E324C;
	color: white;
}

.outline-btn {
	border: 1px solid #999;
	border-radius: 3px;
}

div.filter-option {
	border: 1px solid #999;
	border-radius: 3px;
}