@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,600);

body {
  background-color: hsl(0, 0%, 90%);
  font-family: 'Open Sans', sans-serif;
}

#steps {
  /* width: 505px; */
  margin: 50px auto; 
}

.step {
  width: 40px;
  height: 40px;
  background-color: transparent;
  display: inline-block;
  border: 2px solid;
  border: solid 1px white;
  border-radius: 50%;
  color: white;
  font-weight: 600;
  text-align: center;
  line-height: 35px;
  
}

.step:first-child {
  line-height: 35px;
}

.step:nth-child(n+2) {
  margin: 0 0 0 100px;
  transform: translate(0, -2px);
}

.step:nth-child(n+2):before {
  width: 87px;
  height: 2px;
  display: block;
  background-color: hsl(0, 0%, 100%);
  transform: translate(-95px, 21px);
  content: '';
}

.step:after {
  width: 150px;
  display: block;
  transform: translate(-55px, 3px);
  color: hsl(226, 10%, 55%);
  content: attr(data-desc);
  font-weight: 400;
  font-size: 13px;
}

.step.active {
  border-color: hsl(268, 79%, 81%);
  color: hsl(206, 72%, 68%);
}

.step.active:before {
  background: linear-gradient(to right, hsl(120, 42%, 54%) 0%, hsl(206, 72%, 68%) 100%);
}

.step.active:after {
  color: hsl(268, 79%, 81%);
}

.step.done {
  background-color: #4d3597;
  border-color:#4d3597;
  color: hsl(0, 0%, 100%);
}

.step.done:before {
  background-color: #4d3597;  
}

.booking-element-preview {
    padding: 20px;
    margin: 20px;
    width: 70%;
    display: flex;
    flex-wrap: wrap;

}

.text-preview{
    color:hsl(268, 79%, 81%);
}