/* Generic loader styling for all forms */



[id^="rdg-form-"][id$="-loader"] {



  display: none;



  position: fixed;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background: rgba(0, 0, 0, 0.5);



  z-index: 9999;



  justify-content: center;



  align-items: center;



}







[id^="rdg-form-"][id$="-loader"].show {



  display: flex;



}







.rdg-spinner-content {



  background: white;



  padding: 40px 30px;



  border-radius: 8px;



  text-align: center;



  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);



  max-width: 90%;



  width: 300px;



}







.rdg-spinner {



  border: 4px solid #f3f3f3;



  border-top: 4px solid #3498db;



  border-radius: 50%;



  width: 50px;



  height: 50px;



  animation: spin 1s linear infinite;



  margin: 0 auto 20px auto;



}







@keyframes spin {



  0% { transform: rotate(0deg); }



  100% { transform: rotate(360deg); }



}







.rdg-spinner-text {



  font-size: 16px;



  color: #333;



  font-weight: 500;



  margin: 0;



}





/* FEATURE (May 20, 2026): Styling for locked/disabled fields on page 1 when editing drafts */



.rdg-field-locked,



.rdg-field-locked:disabled {



  background-color: #f5f5f5 !important;



  border-color: #d0d0d0 !important;



  color: #666 !important;



  cursor: not-allowed !important;



  opacity: 0.7;



  pointer-events: none !important;



}





/* FEATURE (May 22, 2026): Top buttons bar - displays Save & Exit, Cancel, PREV, NEXT, SUBMIT at top of form */



.rdg-top-buttons-bar {



  display: flex;



  gap: 8px;



  margin-bottom: 15px;



  padding: 12px;



  background: #f9f9f9;



  border-radius: 4px;



  border: 1px solid #e0e0e0;



  flex-wrap: wrap;



  align-items: center;



}





.rdg-top-buttons-bar button {



  padding: 8px 16px;



  font-size: 14px;



  font-weight: 500;



  white-space: nowrap;



}









.rdg-field-locked:hover {



  background-color: #f5f5f5 !important;



  border-color: #d0d0d0 !important;



}







.rdg-field-locked::placeholder {



  color: #999 !important;



}







/* Styling for Chosen dropdowns when locked */



.rdg-field-locked + .chosen-container {



  pointer-events: none !important;



  opacity: 0.7;



}







.rdg-field-locked + .chosen-container .chosen-single {



  background-color: #f5f5f5 !important;



  border-color: #d0d0d0 !important;



  color: #666 !important;



  cursor: not-allowed !important;



}







.rdg-field-locked + .chosen-container .chosen-single:hover {



  background-color: #f5f5f5 !important;



  border-color: #d0d0d0 !important;



}







/* Show visual indicator that field is locked */



.rdg-field-locked:before {



  content: '';



  position: absolute;



  left: 0;



  top: 0;



  right: 0;



  bottom: 0;



  background: rgba(255, 255, 255, 0.3);



  pointer-events: none;



  border-radius: inherit;



}







/* FEATURE (May 22, 2026): Hide the Gravity Forms required field indicator message */

/* Removes the "*" indicates required fields" text that appears above forms */



.gform_required_legend {



  display: none !important;



}









@media (max-width: 768px) {



  .rdg-spinner-content {



    padding: 30px 20px;



    width: 280px;



  }



  



  .rdg-spinner-text {



    font-size: 14px;



  }



}







@media (max-width: 480px) {



  .rdg-spinner-content {



    padding: 25px 15px;



    width: 90%;



  }



  



  .rdg-spinner {



    width: 40px;



    height: 40px;



  }



  



  .rdg-spinner-text {



    font-size: 13px;



  }



}



/* FEATURE (May 20, 2026): Custom clickable navigation tabs */



.rdg-custom-tabs {

  display: flex;

  gap: 2px;

  margin-bottom: 20px;

  flex-wrap: wrap;

  border-bottom: 2px solid #e0e0e0;

  background: #fafafa;

  padding: 0;

}



.rdg-tab {

  min-width: 100px;

  height: auto;

  padding: 12px 20px;

  border: none;

  border-bottom: 3px solid transparent;

  border-radius: 6px 6px 0 0;

  background: transparent;

  color: #666;

  font-size: 13px;

  font-weight: 500;

  cursor: pointer;

  transition: all 0.25s ease;

  box-shadow: none;

  white-space: normal;

  word-wrap: break-word;

  max-width: 180px;

  text-align: center;

  position: relative;

}



.rdg-tab:hover:not(.disabled) {

  background: #f0f0f0;

  color: #333;

  border-bottom-color: #bbb;

}



.rdg-tab.active {

  background: #fff;

  color: #1a1a1a;

  border-bottom-color: #3498db;

  font-weight: 600;

  box-shadow: inset 0 -2px 0 0 #3498db;

}



.rdg-tab.completed {

  background: transparent;

  color: #555;

  border-bottom-color: #27ae60;

}



/* Responsive adjustments for tablet */

@media (max-width: 768px) {

  .rdg-custom-tabs {

    gap: 2px;

    margin-bottom: 15px;

    overflow-x: auto;

    overflow-y: hidden;

    flex-wrap: nowrap;

    -webkit-overflow-scrolling: touch;

    scroll-behavior: smooth;

  }



  .rdg-tab {

    min-width: 90px;

    flex-shrink: 0;

    padding: 10px 14px;

    font-size: 12px;

  }

}



/* Responsive adjustments for mobile */

@media (max-width: 480px) {

  .rdg-custom-tabs {

    gap: 2px;

    margin-bottom: 12px;

    overflow-x: auto;

    overflow-y: hidden;

    flex-wrap: nowrap;

    -webkit-overflow-scrolling: touch;

    scroll-behavior: smooth;

  }



  .rdg-tab {

    min-width: 75px;

    flex-shrink: 0;

    padding: 8px 12px;

    font-size: 11px;

    border-bottom-width: 2px;

  }

}