/* All dropdowns: allow open list to show (not clipped) - no design change */
.content:has(.participant-edit-page),
.d-flex:has(.participant-edit-page) {
  overflow: visible;
}
.participant-edit-page .tab-content,
.participant-edit-page .edit-card-content {
  overflow: visible;
}
.participant-edit-page .user-layout.formio-tab-container,
.participant-edit-page .user-layout .formio-form,
.participant-edit-page .user-layout .formio-component-panel .card,
.participant-edit-page .user-layout .formio-component-panel .card-body,
.user-layout.formio-tab-container,
.user-layout .formio-form,
.user-layout .formio-component-panel .card,
.user-layout .formio-component-panel .card-body {
  overflow: visible;
}
.user-layout .formio-component-select,
.user-layout .formio-component-choices,
.user-layout .formio-component-resource,
.participant-edit-page .user-layout .formio-component-select,
.participant-edit-page .user-layout .formio-component-choices,
.participant-edit-page .user-layout .formio-component-resource {
  position: relative;
  z-index: 50;
  overflow: visible;
}
/* Choices.js: dropdown list and search input on top and visible (all forms using user-layout) */
.choices__list--dropdown,
.user-layout .choices__list--dropdown,
.participant-edit-page .choices__list--dropdown {
  z-index: 99999 !important;
  position: absolute !important;
  display: block !important;
  pointer-events: auto !important;
}
.choices.is-open .choices__inner {
  position: relative;
  z-index: 10000;
}
.user-layout .choices__input.choices__input--cloned,
.choices__input.choices__input--cloned {
  display: block !important;
  pointer-events: auto !important;
  z-index: 100001 !important;
}

.user-layout .formio-component-panel > .card {
  
  border-radius: 15px;
  margin-bottom: 20px !important;
  border: 1px solid #000 !important;
}



/* Style for the read-only content div within a textarea/content component */
.user-layout .formio-component-textarea div.formio-editor-read-only-content[ref=input] {
    /* Crucial Height Overrides */
    height: auto !important;
    min-height: 90px !important; /* Force the multi-line height */
    
    /* Appearance styles to match the input fields */
    border: 1px solid #c9c9c9 !important;
    background-color: #f8f8f8 !important; /* Slightly different background color to indicate read-only */
    border-radius: 6px !important;
    padding: 8px 10px !important;
    
    /* Ensure text readability */
    font-size: 13px !important;
    line-height: 1.4 !important;
    
    /* Ensure the text wraps correctly */
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}

.user-layout .form-text.text-muted {
  font-size: 0.8rem;      /* smaller font */
  font-weight: 400;       /* normal/lighter weight */
  color: #a8a8a8;         /* default Bootstrap muted gray */
  margin-top: 0.25rem;    /* optional spacing */
}


.user-layout .form-control .flatpickr-input {
  border-radius: 1px !important;
}

.user-layout .card-header,
.panel-heading {
  border-bottom: none !important;
  box-shadow: none !important;
  background: none !important;
  padding-top: 20px;
  font-size: 14px;
  font-weight: 500;
  /* No justify-content here */
}

/* Target Formio's main container */


.user-layout .card-header {
    pointer-events: none;
}

.user-layout .formio-progress-badge  span{
  background-color: #f9dea4ff;
  color: #000;
}

.user-layout .badge-complete {
  background-color: #28a745;
  color: white;
}

.user-layout .phone-group-no-gap > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}

.user-layout .phone-group-no-gap > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}

.user-layout .phone-group-no-gap > .row > .col {
padding-left: 0 !important;
padding-right: 0 !important;
}

.user-layout
.phone-group-no-gap > .row > .col:first-child .form-control {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-right: none !important;
}

.user-layout
.phone-group-no-gap > .row > .col:last-child .form-control {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
margin-left: -1px !important;

}

.user-layout .phone-group-no-gap > .row > .col:first-child .form-group {
margin-right: 0;
}

.user-layout .form-control {
  background-color: #fff !important;
  border: 1px solid #ced4da !important;
  box-shadow: none !important;
  padding: 3px;

}

.card-header,
.panel-heading,
.form-fieldset legend {
    position: relative; /* Set positioning context */
    overflow: visible; /* Ensure the badge is visible if it slightly overlaps */
}


.formio-progress-badge {
    position: absolute !important; /* Force absolute positioning */
    top: 50% !important; /* Vertically center */
    right: 15px !important; /* Move to the right with some padding */
    transform: translateY(-50%) !important; /* Adjust for vertical centering */
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    z-index: 10; /* Ensure it's above other elements */
}

/* Put this in your main CSS file (e.g., index.css or App.css) */
.user-layout .formio-component .form-control {
  font-size: 12px !important; /* Reduce input text size */
 
}

.user-layout  .guest-button  .btn i {
  font-size: medium;
  color: #fff !important;
}

/* .user-layout .formio-component-select, 
.user-layout .formio-component-choices {
    position: relative; 
    z-index: 10; 
} */

/* 2. Style the dropdown list for height and scrolling */


.user-layout .guest-button .btn {
  background-color: #D9A128 !important;
  border: none !important;
}

.user-layout .btn i{
  position: static !important;
}

.user-layout .row-gap .column-spacing .form-group {
  margin-bottom: 3rem; /* adjust as needed */
}

.user-layout .choices__item.choices__item--selectable {
  overflow: visible !important;   /* show full content */
  text-overflow: unset !important; /* remove ellipsis */
  padding-right: 25px;            /* keep spacing for remove icon */
}

.user-layout .formio-form .formio-datagrid {
  max-height: 400px;        
  overflow-y: auto;         
  overflow-x: hidden;       
}
.guest-button.formio-component-datagrid .datagrid-table,
.guest-button.formio-component-datagrid .datagrid-table td, 
.guest-button.formio-component-datagrid .datagrid-table th
 {
  border: 1px solid #ddd !important;
  padding: 10px;
}

.user-layout .btn.signature-pad-refresh {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    padding: 15px;
    line-height: 1;
    font-size: 20px;
}

/* Hide initially */
.user-layout .formio-errors {
  display: none !important;
}

/* After submit → show */
.user-layout .formio-errors .formio-submitted {
  display: inline !important;
}

.user-layout .is-invalid {
  background-image: none !important;
  box-shadow: none !important;
}

/* Participant edit: no red/error styling on load; show required error only after submit */
.participant-edit-page .user-layout .form-control.is-invalid,
.participant-edit-page .user-layout .form-control:invalid {
  background-color: #fff !important;
  border-color: #ced4da !important;
}

.participant-edit-page .user-layout.formio-submitted .form-control.is-invalid,
.participant-edit-page .user-layout.formio-submitted .form-control:invalid {
  background-color: #f8d7da !important;
  border-color: #dc3545 !important;
}

.participant-edit-page .user-layout .choices.is-invalid .choices__inner,
.participant-edit-page .user-layout .choices[aria-invalid="true"] .choices__inner {
  background-color: #fff !important;
  border-color: #ced4da !important;
}

.participant-edit-page .user-layout.formio-submitted .choices.is-invalid .choices__inner,
.participant-edit-page .user-layout.formio-submitted .choices[aria-invalid="true"] .choices__inner {
  background-color: #f8d7da !important;
  border-color: #dc3545 !important;
}

/* Disable invalid state for radio buttons */
.user-layout .form-check-input.is-invalid {
  border-color: #ced4da !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hide Bootstrap's default invalid-feedback for radios */
.user-layout .form-check-input:invalid ~ .invalid-feedback {
  display: none !important;
}

.user-layout .form-control input:active {
  border-radius: 1px;
}