.listTrack {
    flex: 1 1 50%;
    display: flex;
}

/* the outer list */
.stepsTrack {
  width: 100%;
  margin: 5px 0 15px -3px;
  padding: 0px;
  display: block;
  flex-wrap: wrap;
  list-style-type: none;
  counter-reset: steps; /* alternative to built-in list style that we can style */
}

.subStepsTrack {
  margin: 5px 0 0px 10px;
  padding: 0px; /* 0 1em 0 0; */
  flex-wrap: wrap;
  list-style-type: none;
  counter-reset: steps; /* alternative to built-in list style that we can style */
}
.subStepsTrack > li.subsection::before {
   	content: "";
   	width: 18px;
    height: 2px;
    display: block;
    position: absolute;
    top: 7px;
    left: -24px;
}

.stepsTrack > li.current .subStepsTrack > li.subsection::before {
    background-color: #5bc0de;
}

.stepsTrack > li.done .subStepsTrack > li.subsection::before {
    background-color: #B5D034;
}

/* the steps (li) */
.stepsTrack > li {
  padding: 28px 0 10px 13px;
  flex: 1 1 100%;
  position: relative;
  counter-increment: stepsTrack;
}

.stepsTrack > li::after {
	content: "";
    width: 2px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: -2px;
}

.stepsTrack > li:last-child::after {
	content: "";
    width: 2px;
    height: 0px;
    display: block;
    position: absolute;
    top: 0px;
    left: -2px;
}

.stepsTrack > li:last-child .items::after {
	content: "";
    width: 2px;
    height: 61px;
    display: block;
    position: absolute;
    top: 0px;
    left: -2px;
}

.stepsTrack > li.pending, .stepsTrack > li.pending .titleSection::after { border-color: #999;}
.stepsTrack > li.pending .titleSection::after { background-color: #fff;}
.stepsTrack > li.pending::after, .stepsTrack > li.pending li::before, .stepsTrack > li.pending a::before { background-color: #999; }

.stepsTrack > li.done, .stepsTrack > li.done .titleSection { border-color: #B5D034; color: #444;}
.stepsTrack > li.done .titleSection::after {  border-color: #B5D034; background-color: #B5D034; color: white;}
.stepsTrack > li.done::after, .stepsTrack > li.done .items::after, .stepsTrack > li.done a::before, .stepsTrack > li.done a::after { background-color: #B5D034; }

.stepsTrack > li.disabled, .stepsTrack > li.disabled .titleSection { border-color: #999; color: #999;}
.stepsTrack > li.disabled .titleSection::after {  border-color: #999; background-color: #999; color: white;}
.stepsTrack > li.disabled::after, .stepsTrack > li.disabled .items::after, .stepsTrack > li.disabled a::before, .stepsTrack > li.disabled a::after { background-color: #999; }

.stepsTrack > li.current { border-color: #5bc0de; color: #444;}
.stepsTrack > li.current .titleSection::after {  border-color: #5bc0de; background-color: #5bc0de; color: white;}
.stepsTrack > li.current::after, .stepsTrack > li.current .items::after, .stepsTrack > li.current li::before, .stepsTrack > li.current a::before, .stepsTrack > li.current a::after { background-color: #5bc0de; }

.stepsTrack > li.last {padding-bottom: 0;}

.stepsTrack > li .titleSection span {
  content: attr(data-description);
  position: absolute;
  top: 5px;
  left: 24px;
  font-style: italic;
  font-weight: bold;
  color: #777;
  font-size: 12px;
  cursor: pointer;
}

.stepsTrack > li .titleSection {
  cursor: pointer;
}
.stepsTrack > li .section .titleSection span {
  content: attr(data-description);
  position: relative;
  top: -5px;
  left: 10px;
  font-style: italic;
  font-weight: bold;
  color: #777;
  font-size: 12px;
  cursor: pointer;
}
.stepsTrack > li .section .titleSection span:last-child {
  content: attr(data-description);
  position: relative;
  top: -5px;
  left: 10px;
  font-style: italic;
  font-weight: normal;
  color: #777;
  font-size: 12px;
  cursor: pointer;
}
.stepsTrack > li .titleSection::after {
  position: absolute;
  top: 0;
  left: -16px;
  border-radius: 20px;
  width: 30px;
  height: 30px;
  display: block;
  text-align: center;
  font-weight: 400;
  line-height: 26px;
  content: counter(stepsTrack);
  border: 2px solid;
  cursor: pointer;
  z-index: 1;
}

.stepsTrack > li .section .titleSection::after {
  position: absolute;
  top: 0;
  left: -22px;
  border-radius: 20px;
  width: 16px;
  height: 16px;
  display: block;
  content: " ";
  cursor: pointer;
}
.stepsTrack > li .section .subsection .titleSection::after {
  position: absolute;
  top: 0;
  left: -10px;
  border-radius: 20px;
  width: 16px;
  height: 16px;
  display: block;
  content: " ";
  cursor: pointer;
}


/* the inner list within a step */
.stepsTrack ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-left: 0px;
  padding-top: 3px;
}

.stepsTrack ul li, .stepsTrack .options a {
  position: relative;
}

.stepsTrack .options a::before {
  content: "";
  width: 15px;
  height: 2px;
  display: block;
  position: absolute;
  top: 20px;
  left: -16px;
}

.subStepsTrack .options a::before {
  content: "";
  width: 16px;
  height: 2px;
  display: block;
  position: absolute;
  top: 20px;
  left: -17px;
}

.subStepsTrack .options a::after {
  content: "";
  width: 2px;
  height: 101%;
  display: block;
  position: absolute;
  top: -23px;
  left: -17px;
}
.subStepsTrack .options a:last-child::after{
	height: 43px;
}

.stepsTrack > li .section {
  padding: 0px;
  margin-top: 5px;
  flex: 1 1 100%;
  position: relative;
}

.stepsTrack > li .subsection {
  padding: 28px 0 0px 13px;
  list-style-type: none;
}

.stepsTrack > li .subsection .titleSection::before {
  content: attr(data-description);
  position: absolute;
  top: 0;
  left: 15px;
  color: #777;
  font-size: 12px;
  background-color: transparent !important;
  width: 100%;
}

.stepsTrack > li .section ul {
  padding-top: 25px;
  margin-left: 0;
}

.stepsTrack > li .subsection ul {
  padding-top: 25px;
  margin-left: 0;
}

.stepsTrack > li.current > .section > .titleSection::after { border-color: #5bc0de; }
.stepsTrack > li.current > .section > .titleSection::after { background-color: #5bc0de;}

.stepsTrack > li.current .subsection .titleSection,
.stepsTrack > li.current .subsection .titleSection::after { border-color: #5bc0de; }
.stepsTrack > li.current .subsection .titleSection::after { background-color: #5bc0de;}

.stepsTrack > li.done .titleSection::after { border-color: #B5D034;}
.stepsTrack > li.done .titlesection::after { background-color: #B5D034;}

.stepsTrack > li.done .subsection .titleSection,
.stepsTrack > li.done .subsection .titleSection::after { border-color: #B5D034;}
.stepsTrack > li.done .subsection .titleSection::after { background-color: #B5D034;}

.stepsTrack > li.pending .section .titleSection,
.stepsTrack > li.pending .section .titleSection::after { border-color: #999;}
.stepsTrack > li.pending .section .titleSection::after { background-color: #999;}

.stepsTrack > li.pending .subsection .titleSection,
.stepsTrack > li.pending .subsection .titleSection::after { border-color: #999;}
.stepsTrack > li.pending .subsection .titleSection::after { background-color: #999;}

.items {
	cursor: pointer;
    margin-top: 10px;
}

.list-group-item.error {
	border-color: #a94442;
}

.marginSection {
	margin-left: 35px;
}

.marginSubSection {
	margin-left: 22px;
}