/* Style the form */
#regForm {
  background-color: #ffffff;
  width: 70%;
  min-width: 300px;
  margin-bottom: 20px;
}

/* Style the input fields */
#regForm input {
  padding: 10px;
  width: 98%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #62CEDD;
}

/* Mark input boxes that gets an error on validation: */
#regForm input.invalid {
  background-color: #ffdddd;
}

/* Style the input fields */
#regForm select {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #62CEDD;
  margin-bottom: 16px;
}

#regForm input[type="checkbox"] {width: 26px;height: 26px; opacity:1 !important;}
#regForm .iCheck-helper {width: 30px !important; height:30px !important;}
#regForm .icheckbox_flat.checked, #regForm .iradio_flat.checked {background:none !important;}
#regForm .icheckbox_flat, #regForm .iradio_flat {width:30px !important; height:30px !important;}

#regForm textarea {
  width: 100%;
  height: 50px;
  border: 1px solid #62CEDD;
  padding: 12px;
  font-size: 17px;
}

#regForm .aligncheck {display: flex; align-items: center; gap: 5px;}

/* Hide all steps by default: */
#regForm .tab {
  display: none;
}
#regForm .tab.active {
  display: block !important;
}

/* Make circles that indicate the steps of the form: */
#regForm .step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

/* Mark the active step: */
#regForm .step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
#regForm .step.finish {
  background-color: #04AA6D;
}
#regForm #prevBtn, #regForm #nextBtn { padding: 10px; cursor: pointer; color: #fff;  background-color: #286090;  border-color: #122b40; font-size: 17px; border-radius: 6px; border: 0px; }
#regForm #submitBtn { padding: 10px; cursor: pointer; color: #fff;  background-color: #04AA6D;  border-color: #122b40; font-size: 17px; border-radius: 6px; border: 0px; }
/* #regForm #prevBtn:hover, #regForm #nextBtn:hover {background:#4A9BA6; border: 1px solid #4A9BA6;} */

#regForm label.error { color: red; font-size: 14px; padding: 0px !important; border: 0px !important; }
#regForm .error { margin-bottom: 0px !important;  }

#regForm hr { color: #f4f3f3;}

.payment_details { margin-bottom: 15px; }
.payment_details span { display: block; }

#payment-form { margin-bottom: 20px;}
#payment-form #submit-button { padding: 10px; cursor: pointer; color: #fff;  background-color: #286090;  border-color: #122b40; font-size: 17px; border-radius: 6px; border: 0px; }
#payment-form #card-element { border: 1px solid #ccc; padding: 10px; border-radius: 4px; }
#payment-form #card-errors { color: red; margin-top: 10px; font-size: 16px; margin-bottom: 12px; font-weight: bold; }
#payment-form .spinner {
  margin-left: 10px;
  font-size: 14px;
}
#payment-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.unauthorized-message {
  margin: 100px auto;
  padding: 20px;
  background-color: #ffe6e6;
  color: #a94442;
  border: 1px solid #ebccd1;
  border-radius: 5px;
  font-family: Arial, sans-serif;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}