/* Override BS4's primary button style with ECM green*/
.btn.btn-primary,
.btn.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: rgb(71, 145, 52);
	border-color: rgb(71, 145, 52);
	color: white;
}
.btn-primary:not(:disabled):not(.disabled).active:focus, 
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn.btn-primary:focus {
	box-shadow: 0 0 0 0.2rem rgb(71 145 52 / 50%);
}
.btn.btn-primary span, .btn i {
	color: white;
}

/* Override BS4's secondary button style with a lighter gray */
.btn.btn-secondary,
.btn.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled).active, 
.btn-secondary:not(:disabled):not(.disabled):active {
	background-color: rgb(221, 221, 221);
	border-color: rgb(221, 221, 221);
	color: rgb(112, 112, 112);
}
.btn-secondary:not(:disabled):not(.disabled).active:focus, 
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn.btn-secondary:focus {
	box-shadow: 0 0 0 0.2rem rgb(221 221 221 / 50%);
}
.btn.btn-secondary span {
	color: rgb(112, 112, 112);
}

/* Customizing the bootstrap alerts */
.alert {
	border-left-style: solid;
	border-width: 0 0 0 3px;
	border-radius: 0;
	margin: 0;
}

.alert::after {
	font-family: 'Font Awesome 5 Pro';
	top: 10;
	right: 10;
	position: absolute;
	font-size: 100%;
	width: 30px;
	text-align: center;
}

.alert.alert-info {
	border-left-color: #459CFF;
	background-color: #EEF6FF;
	color: #31708F;
}

.alert.alert-info::after {
	font-weight: 900;
	content: '\f129';
	color: rgba(49, 112, 143, 0.3);
}

/* Onboarding specific */
.onb-panel {
	background: white;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);

	width: 640px; 
	max-width: 100%; 
}

.onb-bar-orange {
	height: 10px;
	background-color: orange;
}

.onb-bar-green {
	height: 5px;
	background-color: green;
}

.onb-required::after {
	content: '*';
	color:red;
	margin-left: 3px;
}

.onb-progress-container {
	position: relative; 
	width: 70px;
	height: 65px;
	display: flex; 
	align-items: center; 
	justify-content: center;
}
@media (min-width: 576px) { 
	.onb-progress-container {
		width: 140px; 
		height: 110px; 
	}
}

.onb-progress-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.onb-progress-wrapper .onb-progress-line {
	position: absolute;
	margin-top: -15px;
	height: 3px; 
	width: 100%; 
	display: flex;
}
.onb-progress-wrapper .onb-progress-line-left {
	height: 3px; 
	width: 50%; 
	background-color: #CCCCCC;
}
.onb-progress-wrapper .onb-progress-line-left.completed {
	background-color: green;
}
.onb-progress-wrapper .onb-progress-line-left.active {
	background-color: orange;
}
.onb-progress-wrapper .onb-progress-line-right {
	height: 3px; 
	width: 50%; 
	background-color: #CCCCCC;
}
.onb-progress-wrapper .onb-progress-line-right.completed {
	background-color: green;
}
.onb-progress-wrapper .onb-progress-line-right.active {
	background-color: orange;
}

.onb-progress-container .onb-progress-line {
	position: absolute;
	margin-top: -15px;
	height: 3px; 
	width: 100%; 
	background-color: #CCCCCC;
}

.onb-progress-container.completed .onb-progress-line {
	background-color: green;
}
.onb-progress-container.active .onb-progress-line {
	background-color: orange;
}

.onb-progress-container .onb-progress-icon {
	position: absolute;
	margin-top: -15px;
	width: 35px; 
	height: 35px; 
	display: flex; 
	justify-content: center; 
	align-items: center; 
	border-radius: 50%; 
	background-color: #CCCCCC; 
	color: #FFFFFF;
	font-size: 16px;
}
.onb-progress-container .onb-progress-icon i {
	color: #FFFFFF;
}

@media (min-width: 576px) { 
	.onb-progress-container .onb-progress-icon {
		width: 70px; 
		height: 70px; 
		font-size: 32px;
	}
}

.onb-progress-container.completed .onb-progress-icon {
	background-color: green;
}
.onb-progress-container.active .onb-progress-icon {
	background-color: orange;
}

.onb-progress-container .onb-progress-title {
	font-size: 11px;
	position: absolute;
	bottom: 0;
	max-width: 100%;
	word-break: break-word;
	text-align: center;
	line-height: 11px;
}
@media (min-width: 576px) { 
	.onb-progress-container .onb-progress-title {
		font-size: 14px;
		line-height: 14px;
	}
}