html, body {
    height: 100%;
    /*margin-left: 30px;*/
}

.listTrack {
    flex: 1 1 50%;
    min-width: 300px;
    display: flex;
}

/* @media (min-height: 900px) {
    body {
        display: flex;
        align-items: center;
    }
} */

/* @media (max-width: 500px) {
    .recipe-flex {
        flex-wrap: wrap;
    }
    .plan {
        border-left: 0;
    }
    .stages {
        margin-left: 24px;
    }
} 
 */
/* the outer list */
.stepsTrack {
  margin: 5px 0 15px -3px;
  padding: 0 1em 0 0;
  display: block;
  flex-wrap: wrap;
  list-style-type: none;
  counter-reset: steps; /* alternative to built-in list style that we can style */
}

/* the steps (li) */
.stepsTrack > li {
  padding: 28px 0 10px 13px;
  flex: 1 1 100%;
  position: relative;
  border-left: 2px solid;
  counter-increment: stepsTrack;
}
.stepsTrack > li.pending,
.stepsTrack > li.pending::after { border-color: #999;}
.stepsTrack > li.pending::after { background-color: #fff;}
.stepsTrack > li.pending li::before, .stepsTrack > li.pending a::before { background-color: #999; }

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

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

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

/* the smallish description label next to the bubble */
.stepsTrack > li::before {
  content: attr(data-description);
  position: absolute;
  top: 3px;
  left: 24px;
  font-style: italic;
  font-weight: bold;
  color: #777;
  font-size: 12px;
}

/* the bubble with the number in it */
.stepsTrack > li::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;
}

/* 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 ul li::before, .stepsTrack .options a::before {
  content: "";
  width: 15px;
  height: 2px;
  display: block;
  position: absolute;
  top: 20px;
  left: -15px;
}

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

.stepsTrack .section::after {
  position: absolute;
  top: 0;
  left: -22px;
  border-radius: 20px;
  width: 16px;
  height: 16px;
  display: block;
  content: " ";
}
.stepsTrack > li .section::before {
  content: attr(data-description);
  position: absolute;
  top: 0;
  left: 10px;
  color: #777;
  font-size: 12px;
  background-color: transparent !important;
  width: 300px;
}

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

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

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

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

/*
.stepsTrack > li.info,
.stepsTrack > li.info::after { border-color: #e0e0e0; content: '?'; }
.stepsTrack > li.info::after { background-color: #e0e0e0; content: '?'; }
.stepsTrack > li.info li::before { background-color: #e0e0e0; }

.stepsTrack > li:last-child {
  padding-bottom: 2em;
}


.stepsTrack > li.info::before {
  content: attr(data-description);
}

.stepsTrack > li::before {
  content: attr(data-description);
  position: absolute;
  top: 3px;
  left: 24px;
  font-style: italic;
  color: #777;
  font-size: 15px;
  width: 150px;
}

.stepsTrack > li::after {
  position: absolute;
  top: 0;
  left: -23px;
  border-radius: 20px;
  width: 40px;
  height: 40px;
  display: block;
  text-align: center;
  font-weight: 800;
  font-size: 130%;
  line-height: 26px;
  content: counter(steps);
  border: 3px solid;
}

.stepsTrack > li.info {
  counter-increment: none;
}

.stepsTrack ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  margin-left: 12px;
  padding-top: 3px;
}

.stepsTrack ul li {
  position: relative;
}

.stepsTrack ul li::before {
  content: "";
  width: 10px;
  height: 3px;
  display: block;
  position: absolute;
  top: 10px;
  left: -27px;
  border-radius: 10px;
}

.stepsTrack li a.selected {
    background-color: rgb(51, 122, 183);
    border-radius: 10px;
    padding: 3px 10px;
    color: white;
}

.wizard {
    background: #fff;
}

    .wizard .nav-tabs {
        position: relative;
        margin: 40px auto;
        margin-bottom: 0;
        border-bottom-color: #e0e0e0;
        width: 95%;
    }

    .wizard > div.wizard-inner {
        position: relative;
    }

.connecting-line {
    height: 2px;
    background: #e0e0e0;
    position: absolute;
    width: 75%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 50%;
    z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    border: 0;
    border-bottom-color: transparent;
}

span.round-tab {
    width: 65px;
    height: 65px;
    line-height: 65px;
    display: inline-block;
    border-radius: 100px;
    background: #fff;
    border: 2px solid #e0e0e0;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
}
span.round-tab i{
    color:#555555;
}
.wizard li.active span.round-tab {
    background-color: #5bc0de;
    border: 2px solid #5bc0de;
    color: white;
}
.wizard li.active span.round-tab i{
    color: #5bc0de;
}

.wizard .nav-tabs > li {
    width: 25%;
}

.wizard li:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: #5bc0de;
    transition: 0.1s ease-in-out;
}

.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 46%;
    opacity: 1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom-color: #5bc0de;
}

.wizard .nav-tabs > li a {
    width: 65px;
    height: 65px;
    margin: 20px auto;
    border-radius: 100%;
    padding: 0;
}

    .wizard .nav-tabs > li a:hover {
        cursor: default;
    }

.wizard .tab-pane {
    position: relative;
    padding-top: 50px;
}

.wizard h3 {
    margin-top: 0;
}

/* @media( max-width : 585px ) {

    .wizard {
        width: 90%;
        height: auto !important;
    }

    span.round-tab {
        font-size: 16px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard .nav-tabs > li a {
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

    .wizard li.active:after {
        content: " ";
        position: absolute;
        left: 35%;
    }