﻿
.ux-multireg-progressBar {
	padding:0;
	margin:0 0 10px 0;
	width: 75%;
	list-style-type: none;
	white-space: nowrap;
  display:inline-block;
}

.ux-multireg-progressBar .ux-progressBar-item {
	display: inline-block;
	float: left;
	padding:0;
	margin:0;
	width: 19.43%;
}

/*BORDER RADIUS FOR LEFT SIDE OF BAR*/
.ux-multireg-progressBar .ux-progressBar-item:first-of-type .ux-progressBarSection {
	border-radius: 10px 0px 0px 10px;
}
/*BORDER RADIUS FOR RIGHT SIDE OF BAR*/
.ux-multireg-progressBar .ux-progressBar-item:last-of-type .ux-progressBarSection {
	border-radius: 0px 10px 10px 0px;
}

.ux-multireg-progressBar .ux-progressBar-item .ux-progressBarSection {
	display: block;
	height: 1em;
}

.ux-multireg-progressBar .ux-progressBar-item .ux-progressBar-label {
	display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ux-wrapper-progressBarSection{
  display: block;
  border: 1px solid #a6a6a6; /*deux border shade 2*/
  padding: 2px 0;
  border-right: none;
}
.ux-progressBar-item:first-of-type .ux-wrapper-progressBarSection{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding-left: 2px;
}
.ux-progressBar-item:last-of-type .ux-wrapper-progressBarSection{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-right: 1px solid;
  padding-right: 2px;
}
.ux-progressBar-item{
  font-size: .75em;
}
.ux-progressBar-item.ux-progressBar-item--active{
  color: inherit; /*should pick up webskin color*/
}
.ux-progressBar-item .ux-progressBar-label{
    opacity: .5;
}
.ux-progressBar-item.ux-progressBar-item--active .ux-progressBar-label{
    opacity: 1;
}
.ux-progressBar-item--active .ux-progressBarSection{
  background: #e8000d; /*Should be webskin nav button color*/
}
.ux-progressBar-item--done .ux-progressBarSection {
	background: #bbb; /*deux background shade 1*/
}
.ux-container-clearfix {
  clear: both;
}

@media screen and (max-width: 786px) {
  .ux-multireg-progressBar{
    width: 100%;
  }
}