#signUpForm .form-header .stepIndicator.active {
    font-weight: 600;
}
#signUpForm .form-header .stepIndicator.finish {
    font-weight: 600;
    /* color: #5a67d8; */
    color:rgb(255, 81, 26);
}
#signUpForm .form-header .stepIndicator::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9;
    width: 40px;
    height: 40px;
    background-color: #fee1c3;
    border-radius: 50%;
    border: 8px solid #ebf4ff;
}
#signUpForm .form-header .stepIndicator.active::before {
    /* background-color: #b8bbc0;
    border: 3px solid #c3dafe; */
    background-color: #104d7c;
    border: 8px solid #d3dceb;
}
#signUpForm .form-header .stepIndicator.finish::before {
    /* background-color: #5a67d8; */
    background-color:rgb(255, 81, 26);

    border: 8px solid #fed6c3;
}
#signUpForm .form-header .stepIndicator::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18px;
    width: 100%;
    height: 3px;
    background-color: #dedede;
}
#signUpForm .form-header .stepIndicator.active::after {
    background-color: #dce2ed;
}
#signUpForm .form-header .stepIndicator.finish::after {
    background-color: #f37114;
}
#signUpForm .form-header .stepIndicator:last-child:after {
    display: none;
}
#signUpForm input.invalid {
    border: 2px solid #ffaba5;
}
#signUpForm .step {
  display: none;
}

/* form */
@import url('http://fonts.googleapis.com/css?family=Roboto:400,700,300');
.circle-wrap {
  width: 80px; 
  height: 80px; 
  position: relative; 
}

.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 50%;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 80px, 80px, 40px);
}

.circle-wrap .inside-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #d2eaf1;
  line-height: 60px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  color: #1e51dc;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 1.2em;
}
.mask .fill {
  clip: rect(0px, 40px, 80px, 0px);
  background-color: green;
}
.mask.full,
.circle .fill {
  animation: fill ease-in-out 1s;
  transform: rotate(150deg);
}

@keyframes fill {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(144deg); 
  }
}
.w3-modal {
  display: none;
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; 
  background-color: rgba(0, 0, 0, 0.5);
}

.w3-modal-content {
margin-top:-50px;
  /* margin: auto; Center modal */
  padding: 20px;
  height:80vh;
  width: 92%;
  background-color: white;
  border-radius: 5px;
  text-align: center;
  position: relative; 
}

.header-area.header-sticky {
  transition: opacity 0.3s; 
}
.bg-indigo-600 {
    --bg-opacity: 1;
    background-color: #5a67d8;
    /* background-color: rgba(90, 103, 216, var(--bg-opacity)); */
    background: rgb(255, 81, 26)!important;
}




button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 83%!important;
    line-height: 1.15;
    margin: 0;
}





/* Apply to all readonly input fields, textareas, and selects */
input[readonly], textarea[readonly], select[readonly] {
  background-color: #f0f0f5; /* Light gray background */
  color: #4b5563; /* Gray text */
}

/* Optionally, apply the same to readonly textareas and selects within .custom-column */
.custom-column textarea[readonly], .custom-column select[readonly] {
  background-color: #f0f0f5; /* Light gray background */
  color: #4b5563; /* Gray text */
}