.progress-indicator {
	width: 100%;
	margin-top: 1.25em;
}
.progress-indicator .container {
	padding: 0.5em 0 1em;
}

.producttab__wrapper {
	background: transparent url(/static/0005/img/horizontal-dots.png) repeat-x 50%;
	text-align: center;
}

.step-circles .producttab__wrapper {
	background: none;
	text-align: left;
}

.progress-indicator .step-complete,
.progress-indicator .step-active,
.progress-indicator .step-queued {
	margin: 0 0.3em 0 0;
}

.progress-indicator .step-active {
	max-width: 65%;
}

.progress-indicator .step-complete,
.progress-indicator .step-active,
.progress-indicator .step-queued {
	border: solid 1px #d8d3cb;
	display: inline-block;
	border-radius: 3px;
	padding: 5px 10px;
	vertical-align: middle;
}

.progress-indicator.step-circles .step-complete,
.progress-indicator.step-circles .step-active,
.progress-indicator.step-circles .step-queued {
	padding: 5px 20px;
}

.progress-indicator.step-circles .step-complete,
.progress-indicator.step-circles .step-active,
.progress-indicator.step-circles .step-queued {
	border: none;
	border-radius: none; 
}

.progress-indicator .active {
	background-color: #099;
	color: #fff;
}

.progress-indicator.step-circles .active {
	background: none;
	color : #099;
}

.progress-indicator.step-circles .step-number {
	background-color: #099;
    border-radius: 32.5px;
    color: #ffffff;
    padding: 5px 12px;
    text-align: center;
	margin-right: 0.4em;    
}

.progress-indicator.step-circles .dormant .step-number {
    background-color: #6d6e71;
}

.progress-indicator.step-circles .active .period, 
.progress-indicator.step-circles .dormant .period {
	display: none;
}

.progress-indicator .active .period {
	display: inline;
}

.progress-indicator .dormant {
	background-color: #fff;
	color: #333;
}

.progress-indicator.step-circles .dormant {
	background: none;
	color: #666;
}

.progress-indicator .step-complete {
	background-color: #ebebeb;
	color: #999;
}

.progress-indicator .period {
	border: none;
	padding: 0;
	margin: 0;
	display: none;
}

.progress-indicator .dormant-stepname {
	display: none;
}

.progress-indicator.step-circles .active-stepname:after,
.progress-indicator.step-circles .dormant-stepname:after {
    content: ">";
    margin-left: 0.5em;
    vertical-align: middle;
    display: inline;
}

.progress-indicator.step-circles .threeStep .step-complete,
.progress-indicator.step-circles .threeStep .step-active,
.progress-indicator.step-circles .threeStep .step-queued {
	width: auto;
}	

/*
 * Media query variations
 */
@media (max-width: 20em) {
	.progress-indicator .step-complete:last-child,
	.progress-indicator .step-active:last-child,
	.progress-indicator .step-queued:last-child {
		margin-right: 0;
	}
}

@media (min-width: 20em) {
	.progress-indicator .container {
		margin: 0 auto;
	}
	
}
@media (min-width: 35em) {
	.progress-indicator .container {
		text-align: center;
		display: block;
		margin: 0 2em;
		padding: 0.75em 0;
	}
	.progress-indicator.no-margin .container {
		margin: 0;
	}
	.progress-indicator .active-stepname {
		display: inline;
	}
	.progress-indicator.step-circles .step-number {
	    padding: 5px 8px 5px 12px;
	}	
	.progress-indicator .dormant .period {
		display: inline;
	}
	.progress-indicator .twoStep .dormant-stepname,
	.progress-indicator .threeStep .dormant-stepname,
	.progress-indicator .fourStep .dormant-stepname {
		display: inline;
	}
	.progress-indicator .twoStep .step-complete,
	.progress-indicator .twoStep .step-active,
	.progress-indicator .twoStep .step-queued {
		width: 33.2%;
	}
	.progress-indicator .threeStep .step-complete,
	.progress-indicator .threeStep .step-active,
	.progress-indicator .threeStep .step-queued {
		width: 26.6%;
		margin: 0 0.6em 0 0;
	}
}
@media (min-width: 40em) {
	.progress-indicator .fiveStep .dormant-stepname {
		display: inline;
	}
	.progress-indicator .fourStep .step-complete,
	.progress-indicator .fourStep .step-active,
	.progress-indicator .fourStep .step-queued {
		width: 20%;
	}
}
@media (min-width: 50em) {
	.progress-indicator .fiveStep .step-complete,
	.progress-indicator .fiveStep .step-active,
	.progress-indicator .fiveStep .step-queued {
		width: 16%;
	}
}
@media (min-width: 85em) {
	.progress-indicator .container {
		margin: 0 auto;
	}
}

/* refinements for DTO layout */
@media (min-width: 421px) and (max-width: 1100px) {
	.progress-indicator.top-up .threeStep .step-complete,
	.progress-indicator.top-up .threeStep .step-active,
	.progress-indicator.top-up .threeStep .step-queued {
		padding: 5px;
		width: 30%;
	}
	.progress-indicator.top-up .container.threeStep {
		display: block;
	}
	.progress-indicator.top-up .threeStep .dormant-stepname,
	.progress-indicator.top-up .threeStep .dormant .period {
		display: inline;
	}
}
@media (min-width: 800px) and (max-width: 1000px) {
	.myee .progress-indicator.top-up .threeStep .h4 {font-size: 11pt}
}
@media (min-width: 720px) and (max-width: 799px) {
	.myee .progress-indicator.top-up .threeStep .h4 {font-size: 10pt}
}
@media (min-width: 600px) and (max-width: 719px) {
	.myee .progress-indicator.top-up .threeStep .h4 {font-size: 12pt}
}
@media (min-width: 421px) and (max-width: 599px) {
	.myee .progress-indicator.top-up .threeStep .h4 {font-size: 10pt}
}