/* ---------- Chevrons ----------------------*/
/* https://codepen.io/robertkoons/pen/jEOZwz */
.step-menu {
    list-style-type:none;
    /* width:725px; */
    margin:0 auto;
    }
    .step-menu li {
      box-sizing: border-box; 
      float: left;
      background: #ddd;
      height: 50px;
      text-align: center;
      padding: 15px 15px 15px 50px;
      position: relative;
      margin-left: 10px;
      }
      .step-menu li:before {
        content: '';
        position: absolute;
        border: 25px solid transparent;
        border-left-color: #fff;
        top:0px;
        right: -60px;
      }
      .step-menu li:after {
        content: '';
        position: absolute;
        border: 25px solid transparent;
        border-left-color: #ddd;
        top:0px;
        right: -50px;
      }
      .step-menu li:nth-child(1) {
        z-index:600;
        margin-left: 0;
        padding-left: 30px
      }
      .step-menu li:nth-child(2) {
        z-index:500;
      }
      .step-menu li:nth-child(3) {
        z-index:400;
      }
      .step-menu li:nth-child(4) {
        z-index:300;
      }
      .step-menu li:nth-child(5) {
        z-index:200;      
      }
      .step-menu li:nth-child(6) {
        z-index:100;
        padding-right:30px
      }
      .step-menu li:nth-child(6):after,
      .step-menu li:nth-child(6):before {
        border: none
      }
  .step-menu li.current {
    background: rgba(51,122,183, 0.75);
    color: white;
  }
  .step-menu li.current:after {
    border-left-color: rgba(51,122,183, 0.75);
  }
  .step-menu li.complete {
    background: rgba(51,122,183, 0.4);
    color: white;
  }
  .step-menu li.complete:after {
    border-left-color: rgba(51,122,183, 0.4);
  }



/* ---------- Chevrons ----------------------*/
/* Steps https://codepen.io/jamesqquick/pen/KKwZgQb */


#stepProgressBar  {
	display:  flex;
	justify-content:  space-between;
	align-items:  flex-end;
	width:  300px;
	margin:  0  auto;
	margin-bottom:  40px;
}

.step  {
text-align:  center;
}

.step-text  {
margin-bottom:  10px;
color:  #28a745;
}


.bullet {
	border: 1px solid #28a745;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	color: #28a745;
	display: inline-block;
	position: relative;
	transition: background-color 500ms;
  line-height:20px;
}


.bullet.completed  {
	color:  white;
	background-color:  #28a745;
}



.bullet.completed::after {
	content: '';
	position: absolute;
	right: -60px;
	bottom: 10px;
	height: 1px;
	width: 54px;
	background-color: #28a745;
}

/* Base styles and helper stuff */
.hidden  {
	display:  none;
}
 
button  {
	padding:  5px  10px;
	border:  1px  solid  black;
	transition:  250ms background-color;
}

button:hover  {
	cursor:  pointer;
	background-color:  black;
	color:  white;
}

button:disabled:hover  {
	opacity:  0.6;
	cursor:  not-allowed;
}

.text-center  {
	text-align:  center;
}
  
.container  {
	max-width:  400px;
	margin:  0  auto;
	margin-top:  20px;
	padding:  40px;
}


/* vertical */


@import url("https://fonts.googleapis.com/css?family=Lato");
.outer {
  /* height: 30vh; */
  /* min-width: 20vw; */
  flex: 1;
}
.progress {
  display: inline-flex;
  height: 100%;
  /* padding: 5vh 10%; */
}
.progress > div {
  /* done step text */
  display: flex;
  flex-direction: column;
  color: #333;
}
.progress > div.left {
  padding-right: 20px;
  text-align: right;
}
.progress > div.left div:last-of-type:after {
  display: none;
}
.progress > div.left div:after {
  /* text on the left */
  content: "";
  background: rgba(51, 51, 51, 0.1);
  border-radius: 2px;
  position: absolute;
  right: -20px;
  top: 10px;
  height: 101%;
  width: 1px;
  transform: translateX(50%);
}
.progress > div.right {
  padding-left: 20px;
}
.progress > div.right div.prev:after {
  transition: none;
}

.progress > div.right div.current {
  /* current step text */
  color: #333;
  /* font-weight: bold; */
  text-decoration: underline;
}

.progress div.complete {
  text-decoration: underline;
  color: #333 !important;
}

.progress div.complete a {
  color: #333 !important;
}

.progress div.active {
  /* text-decoration: none !important; */
}

.progress > div.right div.current:before {
  /* current step circle */
  background: #333;
  padding: 5px;
  transition: all 0.2s 0.15s cubic-bezier(0.175, 0.885, 0.32, 2);
}
.progress > div.right div.current:after {
  height: 0%;
  transition: height 0.2s ease-out;

  /* Maksym added */
  background: #ddd;
  position: absolute;
  left: -20px;
  top: 10px;
  height: 101%;
  width: 2px;
  transform: translateX(-50%);
  transition: height 0.2s ease;
  z-index: -1;
}
.progress > div.right div.current ~ div {
  /* future steps text */
  color: #666;
}
.progress > div.right div.current ~ div:before {
  /* future steps circle */
  background: #999;
  padding: 2.5px;
}

.progress > div.right div.current ~ div:after {
  height: 0%;
  transition: none;

  /* Maksym added */  
  background: #ddd;
  position: absolute;
  left: -20px;
  top: 10px;
  height: 101%;
  width: 2px;
  transform: translateX(-50%);
  transition: height 0.2s ease;
  z-index: -1;
}
.progress > div.right div:before {
  /* done circle */
  content: "";
  background: #333;
  padding: 3px;
  border-radius: 50%;
  position: absolute;
  left: -20px;
  top: 10px;
  transform: translateX(-50%) translateY(-50%);
  transition: padding 0.2s ease;
}
.progress > div.right div:after {
  /* line color */
  content: "";
  background: #333;
  border-radius: 2px;
  position: absolute;
  left: -20px;
  top: 10px;
  height: 101%;
  width: 2px;
  transform: translateX(-50%);
  transition: height 0.2s ease;
}
.progress > div div {
  /* text contianer */
  flex: 1;
  position: relative;
  /* line-height: 20px; */
  cursor: default;
  min-height: 30px;
  padding-bottom: 1.5em;
}
.progress > div div:last-of-type {
  flex: 0;
}
.progress div.done.current {
  /* finish circle */
  color: #62af0b !important;
}
.progress div.done.current:before {
  /* finish text */
  background: #62af0b !important;
}
.progress div.done:after {
  /* Maksym added */
  height: 0% !important;
  transition: none !important;
  width: 0px !important;
}



* {
  box-sizing: border-box;
}