/* ==========================================================
 * Loan Application Shared Styles
 * ========================================================== */

 .merchant-app-wrapper {
   background: #fff;
/*    padding: 2rem; */
   border-radius: 12px;
   /* box-shadow: 0 2px 12px rgba(0,0,0,0.08); */
 }

 .loan-form-wrapper {
   background: #fff;
/*    padding: 2rem; */
   border-radius: 12px;
/*    box-shadow: 0 2px 12px rgba(0,0,0,0.08); */
 }
 
	#progressbar {
		display: flex;
		justify-content: space-between;
		/* margin-bottom: 30px; */
		counter-reset: step !important;
		padding: 0 0px 12px 0px;
	}

 #progressbar li {
   list-style-type: none;
   text-transform: uppercase;
   font-size: 13px;
   width: 25%;
   text-align: center;
   position: relative;
   color: #999;
 }
 #progressbar li:before {
   counter-increment: step;
   content: counter(step);
   width: 30px;
   height: 30px;
   line-height: 30px;
   border: 2px solid #ccc;
   display: block;
   text-align: center;
   margin: 0 auto 10px auto;
   border-radius: 50%;
   background-color: white;
 }
 #progressbar li.active:before,
 #progressbar li.active {
   border-color: #00d578;
   /* color: #ffffff; */
   font-weight: 600;
 }
 #progressbar li:after {
   content: '';
   position: absolute;
   width: 100%;
   height: 2px;
   background: #ccc;
   top: 15px;
   left: -50%;
   z-index: -1;
 }
 #progressbar li:first-child:after { content: none; }
 #progressbar li.active + li:after {
   background: #00d578;
 }

 /* ---------------------------
   Mobile Optimization
---------------------------- */
@media (max-width: 768px) {
  #progressbar {
    flex-direction: column; /* stack vertically */
    align-items: flex-start;
  }

  #progressbar li {
    flex: unset;
    width: 100%;
    text-align: left;
/*     margin: 10px 0; */
  }

  #progressbar li::before {
    margin: 0 10px 0 0;
    display: inline-block;
    vertical-align: middle;
  }

  #progressbar li::after {
    content: none; /* hide line on mobile */
  }
}

@media (max-width: 480px) {
  #progressbar li::before {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
  }
}
 
 fieldset {
   border: none;
   padding: 20px;
   position: relative;
 }
 
 input, select, textarea {
   display: block;
   width: 100%;
   padding: 10px;
   margin-bottom: 15px;
   border-radius: 6px;
   border: 1px solid #ccc;
 }
 
 input.has-error, select.has-error {
   border-color: #e74c3c;
 }
 .error-message {
   color: #e74c3c;
   font-size: 13px;
 }
 
 .action-button {
   background: #00d578;
   color: #fff;
   border: none;
   padding: 10px 25px;
   border-radius: 6px;
   cursor: pointer;
 }
 .action-button-previous {
   background: #bbb;
   color: #fff;
 }
 
 .loading-overlay {
   position: absolute;
   top: 0; left: 0;
   right: 0; bottom: 0;
   background: rgba(255,255,255,0.8);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
 }
 .spin-loader {
   border: 4px solid #eee;
   border-top: 4px solid #00d578;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   animation: spin 1s linear infinite;
 }
 @keyframes spin { to { transform: rotate(360deg); } }