/* bootstrap form css */


/*.service-block {
    min-height: 180px;
    max-width: 350px;*/






@media (min-width: 501px) {


  .interest-moneycase-one-id {
    height:31px;
  }

  .remove-bullets {
    list-style-type: none
  }

  .form-control {
    width:33%;
  }


    .card.card-body.bg-light {
    border: 2px solid black;
    border-radius: 20px;
    padding: 2%;
    width: 50%;
    float: right;
}

    .step-1-explanation {
    border: 2px solid black;
    border-radius: 20px;
    padding: 2%;
    width: 30%;
    float: right

  }



  .form-label-width {
    display:block;
  }



  .float-left-class {
    float:left;
    max-width:20%;
    margin-left:2%; 
    /* max-width: 20%; */
  }

  .float-left-class-first-box {
    float:left;
    max-width:70%;    
    /* max-width: 20%; */
  }


  .min-height-class {
    min-height:31px;
  }

  .input-box-width-one {
    min-width:30%;
  }
    
} 



@media (max-width: 500px) {
    .step-1-first-selector  {
      margin-top:2%;
       
    }


    .card.card-body.bg-light {
    border: 2px solid black;
    border-radius: 20px;
    padding: 2%;
    width:100%;
    float: right;
}


  .step-1-first-label {
  min-width: 70%;
}

  .form-label-width {
    display:block;
  }



  .float-left-class {
    float:left;
    min-width:100%;
    /*margin-left:2%; */
    /* max-width: 20%; */
  }

  .float-left-class-first-box {
    float:left;
    min-width:100%;    
    /* max-width: 20%; */
  }


  .min-height-class {
    min-height:31px;
    min-width:100%;
  }

  .input-box-width-one {
    min-width:100%;
  }


    
} 


@media (min-width: 501px) {
    .step-1-first-selector  {
      margin-top:2%;
      margin-left: 5%;
      min-height: 31px
       
    }

    .step-2-explanation {
    border: 2px solid black;
    border-radius: 20px;
    padding: 2%;
    width: 30%;
    float: right

  }

  .step-2-first-label {
  min-width: 70%;
}

  .step-2-agreementtype-moneycase-label {
    min-width: 70%
  }

  .step-2-label-purchasdate-moneycase-id {
    min-width:70%;
  }
    
} 



@media (max-width: 500px) {
    .step-1-first-selector  {
      margin-top:2%;
       
    }
    
} 


.step-4-explanation {
    border: 2px solid black;
    border-radius: 20px;
    padding: 2%;
    width: 30%;
    float: right

  }

.step-4-first-label {
  min-width: 70%;
}


.step-4-second-label {
  min-width: 70%;
  margin-top: 2%;
}

.step-4-first-choice-amount-selector {
  float:left;
}

.step-4-currency-selector{

  min-height:31px;
  margin-left:10px;

}

.step-4-invoked-circumstances-selector {
  min-height: 31px
}



/*end*/


html, body {
    /*margin-left: 15px;*/
}

.list {
    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 */
.steps {
  margin: 2em 0 0 -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) */
.steps > li {
  padding: 28px 0 10px 13px;
  flex: 1 1 100%;
  position: relative;
  border-left: 2px solid;
  counter-increment: steps;
}
.steps > li.pending,
.steps > li.pending::after { border-color: #999;}
.steps > li.pending::after { background-color: #fff;}
.steps > li.pending li::before, .steps > li.pending a::before { background-color: #999; }

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

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

/* the smallish description label next to the bubble */
.steps > 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 */
.steps > 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(steps);
  border: 2px solid;
}

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

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

.steps ul li::before, .steps .options a::before {
  content: "";
  width: 15px;
  height: 2px;
  display: block;
  position: absolute;
  top: 20px;
  left: -15px;
}

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

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

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

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

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

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