.Padding-top--10{
    padding-top:10px;
}
/**   for progress steps .... ll move inside file latr */
.db-HostedInvoiceWorld-mainPane{
    flex-direction:column;
    align-items: center;
}
:root{
    --brand-color: #00a0fc;
    --body-color: #F3F4F8;
    --instep-color:#96A3B1;
    --text-color:#3D3D62;
}
.progressbar{
    max-width: 560px;
    width:100%;
    margin-bottom:0em;
}
.progressbar.external{
    max-width: 90%;
    width:100%;
    margin:auto;
    position: relative;
    left: 50%;
    transform: translateX(-43%);
}

.progress-container {
    width:100%;
    margin: 0em auto; 
  }
  .progress-steps {
    counter-reset: step;
    
    padding-left:0px;
  }
  .progress-steps li {
    list-style-type: none;
    width: 25%;
    float: left;
    font-size: .9em;
    position: relative;
    text-align: center;
    color:var(--text-color);
  }
  .progress-steps.external li:before {
    line-height:1.8em !important;
  }
  .progress-steps li:before {
    font-size:1.2em;
    width: 2em;
    height: 2em;
    content: counter(step);
    counter-increment: step;
    line-height: 2em;
    border: 2px solid var(--body-color);
    display: block;
    text-align: center;
    margin: 0 auto .7em auto;
    border-radius: 50%;
    background-color: var(--body-color);
   color: var(--instep-color); 
  }
  .progress-steps.external li:before {position:relative !important;z-index:1 !important;}
  .progress-steps.external li:after {z-index:0 !important;}
  .progress-steps li:after {
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: var(--body-color);
    top: 1.3em;
    left: -45%;
    z-index: -1;
  }
.progress-steps li.done:before {
    background-color: var(--brand-color);
    color: white;
    border-color: var(--brand-color);
    content: '\2713' !important;
}
.progress-steps li.next:after{
    background: linear-gradient(to right, var(--body-color) 50%, transparent 50%),linear-gradient(to right, transparent 50%, var(--body-color) 50%);
    background-size: auto, 10px 2px;
}
  .progress-steps li:first-child:after {
    content: none;
  }

.progress-steps li.active:after{
  background-color:var(--brand-color);
}
  .progress-steps li.active:before {
    border-color: var(--brand-color);
    background-color:var(--brand-color);
    color:white;
  }
  .button-pane{
      position:fixed;
      background-color:white;
      border-top:solid 1px #F1F1F1;
      padding:10px 40px;
      width: 100%;
    bottom: 0;
    z-index: 1;
  }
  .button-pane span{
      float:right;
  }


  .db-HostedInvoiceWorld-footer2{
    bottom:60px;
  }
  a.goback{
    float: right;
    margin-right: 10px;
    text-decoration: none;
    padding: 10px;
    color: #3D3D62;
    font-weight: 600;
    font-size: 15px;
  }
  /*progress ends*/
input.next_btn{font-size: 18px !important;width:110px;}

  /* specific to external portal */
  .head-steps {
    display: flex;
  }
  .head-steps .progress-steps li:before{
    border: 2px solid white;
    background-color: white;
  }
  .head-steps .progress-steps li:after{
    background-color: white;
    left:-47% !important;
  }
  .head-steps .progress-steps li.done:before {
    background-color: var(--brand-color);
    color: white;
    border-color: var(--brand-color);
}
.head-steps .progress-steps li.next:after{
    background: linear-gradient(to right, white 50%, transparent 50%),linear-gradient(to right, transparent 50%, white 50%);
    background-size: auto, 10px 2px;
}
.head-steps .progress-steps li.active:after{
  background-color:var(--brand-color);
}
.head-steps  .progress-steps li.active:before {
    border-color: var(--brand-color);
    background-color:var(--brand-color);
    color:white;
  }
  .head-steps .progressbar.external {
    max-width: 100%;
    flex: 2;
    left: auto;
    transform: unset;
  }
  .head-steps .progress-steps li {
    width:33.33%;
  }
  .head-steps .done{
    padding-left:0;
    padding-right:0;
  }
  @media only screen and (max-width: 768px){
    .head-steps {
      flex-direction: column;
    }
  }