/* Custom scrollbar for better aesthetics within modal if content overflows */
.modal-content-scroll-custom::-webkit-scrollbar {
    width: 8px;
}
.modal-content-scroll-custom::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.modal-content-scroll-custom::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}
.modal-content-scroll-custom::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Custom style for the legend to make it float over the border */
fieldset legend {
    width: auto;
    padding: 0 10px;
    margin-left: -10px; /* Adjust as needed */
    background-color: white;
    border-radius: 0.5rem; /* Equivalent to rounded-lg */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Equivalent to shadow-sm */
    font-weight: bold;
    font-size: 1.125rem; /* Equivalent to text-lg */
    color: #212529; /* Equivalent to text-gray-800 */
}

/* Adjust input/select heights and padding for consistency */
.form-control, .form-select {
    padding: 0.75rem 1.25rem; /* py-3 px-5 */
    height: auto; /* Ensure height adjusts to padding */
}

/* NEW CUSTOM CSS BELOW */
.modal-trigger-field-white {
    background-color: white !important; /* Override bg-body-secondary */
    color: black !important; /* Override text-secondary */
}

/* In your custom CSS file, loaded AFTER Bootstrap CSS */
#openModalBtn {
    background-color: rgba(255, 255, 255, 0.7) !important; /* White with 40% opacity */
    /* Or for solid white, just: background-color: white !important; */
}

/* To ensure text is visible on the potentially darker background */
#openModalBtn h2 {
    color: #000000 !important; /* Black text for a white background */
    /* Or if you want white text on a darker translucent background, keep text-white on the h2 */
    /* If you stick with white text on a slightly opaque white box, consider a text-shadow */
}