.step-bar{
  height: 50px;
  font-family: 'NATO SANS BOLD';
  .active:last-child .fa-long-arrow-right:before {
    content: "";
  }
  .active{
    // width: 50px;
    text-align: center;
    display: inline-block;
    i{
      padding-left: 25px;
      padding-right: 25px;
    }
    font-family: 'Noto Sans', regular;
    // color:#fff;
  }

  .step-btn{
    padding: 0 7px;
    cursor: pointer;
  }

  .step-heading{
    padding-left: 10px;
    margin-right: 40px;
  }
}

.step-arrow-btn {
  cursor : pointer;  
}

.step-row{
    background-color: #1A3141;
    padding: 15px;
    display : inline-block;
    font-size: 18px;
    text-transform: uppercase;
    color: #FFF;
    //border : 1px solid rgb(255,111,0);
    border-radius : 50px;
    // margin: 20px 0;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                not supported by any browser */
  }

.step-lock{
  position: relative;
  top: -15px;
  left: 22px;
  width: 12px;
}

.loading-dots:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}

