body {
    background: linear-gradient(to right, #56ccf2, #2f80ed); /* Example gradient */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
    height: 80vh; /* Full viewport height */
    min-height: 100vh; /* Ensure it covers the full height of the viewport */
    font-family: 'Arial', sans-serif; /* Use the desired font family */
    display: flex;
    justify-content: center; /* Aligns the content horizontally */
}

/* Parent container to hold CTA and form side by side */
.parent-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start; /* Aligns children to the top */
    justify-content: center; /* Center children horizontally */
    height: calc(80vh - 2rem); /* Full height minus the bottom border space */
    width: 100%; /* Full width */
    padding-top: 1rem; /* Top padding, acts as a border */
    padding-bottom: 1rem; /* Bottom padding, acts as a border */
}


/* Call to action container */
.cta-container {
    flex-basis: 20%; /* Takes up 20% width */
    padding: 1rem; /* Padding on all sides */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Aligns content to the top */
    overflow: visible; /* Ensure content isn't cut off */
    min-height: 200px; /* Minimum height to accommodate the logo */
}


/* Form container */
.form-container {
    flex-basis: 80%; /* Takes up 80% width */
    background-color: #ffffff; /* White background for the form */
    padding: 1rem; /* Padding on all sides */
    margin-top: 1rem; /* Top margin, acts as a border */
    margin-bottom: 1rem; /* Bottom margin, acts as a border */
    width: 100%; /* Full width */
    max-width: none; /* Removes any max-width restriction */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    overflow-y: auto; /* Allows for scrolling */
    border-radius: 10px; /* Rounded corners */
}

/* Ensuring tabs take up 100% width of form container */
.nav-tabs {
    width: 100%;
    justify-content: space-between;
}
.nav-link {
    flex-grow: 1;
    text-align: center;
}

/* Styles for form inputs, buttons, etc. */
.form-container .form-control,
.form-container .btn {
    font-size: 1rem;
}

/* Ensuring form elements don't stretch beyond a certain width */
#purchaseForm .btn-submit {
    width: auto;
    padding: .375rem .75rem;
}

/* Button styling */

.form-container {
    flex: 0 0 80%;
    padding: 2rem;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
    background-color: #ffffff; /* Ensure the background is white */
    border-radius: 10px; /* Rounded edges */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    overflow-y: auto; /* Allows scrolling for overflow content */
    max-height: calc(100vh - 4rem); /* Maximum height taking into account padding */
}

.form-container button:hover {
    background-color: #1565c0;
}

/* Responsive styles */

@media (max-width: 768px) {
    /* Ensure the flex container allows wrapping */
    .parent-container {
        flex-direction: column;
        padding-top: 3rem; /* Add top padding */
        padding-left: 0;   /* Remove left padding */
        padding-right: 0;  /* Remove right padding */
        padding-bottom: .5rem; /* Maintain bottom padding if needed */
        align-items: center;
    }
    .cta-container {
        flex-basis: 100%; /* Full width on mobile */
        min-height: 150px; /* Adjust minimum height for mobile */
        align-items: center; /* Center content vertically */
        justify-content: center; /* Center content horizontally */
        overflow: hidden; /* Allow vertical scrolling */
    }
    .logo {
        object-fit: contain;
        height: auto; /* Adjust height automatically */
        width: auto; /* Adjust height automatically */
        margin-top: 20px; /* Add top margin if needed */
        margin-bottom: 20px; /* Add bottom margin if needed */
    }


    /* Stack tabs on top of each other */
    .nav-tabs {
        flex-direction: column;
    }
    .nav-link {
        width: 100%; /* Full width for each tab */
    }

    /* Ensure the background gradient covers the entire area */
    body {
        height: auto; /* Remove fixed height to allow content to determine body height */
        min-height: 100vh; /* Ensure it's at least the height of the viewport */
    }

    .tab-content {
        height: calc(100vh - 50px); /* Height minus nav-tabs height */
        overflow-y: scroll; /* Allow vertical scrolling */
    }

    #conditionDropdownContainer .form-control,
    #conditionDropdownContainer .form-select {
        max-width: 80% !important; /* Ensure full width */
        width: 80% !important; /* Full width to match the container */
        margin-bottom: 10px; /* Space between elements when stacked */
    }

    /* Adjust the form container's size */
    .form-container {
        /* ... other styles ... */
        max-height: none; /* Remove max-height restriction */
        flex-basis: 100%; /* Full width on mobile */
        margin-top: 0; /* Remove top margin */
        max-width: 100%; /* Ensure full width */
        height: calc(100vh - 50px); /* Full height minus nav-tabs height */
        overflow-y: scroll; /* Allow vertical scrolling */
        min-height: 500px; /* Adjust as needed */
        padding: 1rem; /* Adjust as needed */
    }

    .form-control, .form-select {
        width: 100%!important; /* Full width */
        max-width: 100%!important; /* Override any max-width settings */
        margin-bottom: 10px; /* Add space between stacked elements */
    }

    .conditional-input {
        max-width: 100%!important;
    }

    #purchaseForm .d-flex {
        flex-direction: column; /* Stack elements vertically */
    }

    #purchaseForm .form-select,
    #purchaseForm .form-control {
        max-width: 100%; /* Full width on mobile */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 10px; /* Space between form elements */
    }

    .dropdown-menu {
        position: static; /* Adjust positioning */
        display: block; /* Display underneath */
        width: 100%; /* Full width */
    }
}


.nav-tabs {
    background-color: #ffffff; /* White background for tabs */
}

.tab-content {
    background-color: #ffffff; /* White background for tab content */
    width: 100%; /* Full width of the form container */
    height: auto; /* Height is determined by the content */
    border-radius: 0 0 10px 10px; /* Rounded bottom edges */
}

.custom-modal-body {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
}

#invoiceIframe {
    width: 100%;   /* Adjust the width as needed */
    height: 400px; /* Adjust the height as needed */
    border: none;
}

.btn-close {
    color: #000; /* Or any color that contrasts with the modal header's background */
}

.alert {
    word-wrap: break-word; /* Older browsers */
    word-break: break-word; /* Break long words at the end of the line */
    hyphens: auto; /* Enable hyphenation */
}


.accordion-button:not(.collapsed):hover {
    background-color: #ffffff; /* Background color on hover */
}

/* Basic reset for styling */
* {
  box-sizing: border-box;
}

/* Custom styles for tabs */
.nav-tabs {
  border-bottom: none;
  justify-content: center;
  padding-top: 20px; /* Adjust padding to center tabs vertically as needed */
}

.nav-item {
  margin: 0 5px; /* Spacing between tabs */
}

.nav-link {
  border: 1px solid transparent;
  border-radius: 15px; /* Rounded corners for tabs */
  color: #4A4A4A; /* Color of the tab text */
  background-color: #FFFFFF; /* Background color of the tabs */
  margin-bottom: -1px;
  padding: 10px 20px; /* Padding inside tabs */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Shadow effect for tabs */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.nav-link:hover {
  border-color: #CCCCCC;
  background-color: #F0F0F0; /* Color change on hover */
}

.nav-link.active {
  color: #FFFFFF;
  background-color: #007BFF; /* Active color for the selected tab */
  border-color: #007BFF;
}

/* Content styling */
.tab-content {
  background: #FFFFFF;
  padding: 20px;
  border-radius: 15px; /* Rounded corners for content box */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Shadow effect for content box */
  margin-top: 20px; /* Space between tabs and content box */
}


.btn {
    background-color: #4a90e2; /* A bright shade of blue */
    color: #ffffff;
    padding: .75rem 1.5rem;
    border-radius: 5px; /* Rounded corners */
    border: none;
    text-transform: uppercase; /* Makes text uppercase for a more button-like feel */
    font-weight: bold; /* Makes text bold */
    letter-spacing: 1px; /* Increases spacing between letters */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effects */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); /* Subtle shadow */
}

.btn:hover {
    background-color: #357ab8; /* A darker shade for hover state */
    transform: translateY(-2px); /* Slight raise effect on hover */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); /* Increased shadow on hover */
}

.btn:active {
    transform: translateY(1px); /* Pushes the button down when clicked */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Smaller shadow for 'pressed' effect */
}

.conditional-input {
    max-width: 15%; /* Example width, adjust as needed */
}

.conditional-input-20 {
    max-width: 20%; /* Example width, adjust as needed */
}

.datepicker-container {
  position: relative;
}
#dateLabel {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 0;
  transition: 0.2s;
}
#date:not(:focus):not([value]) + #dateLabel {
  opacity: 1;
}
#date:focus + #dateLabel,
#date:has(value) + #dateLabel {
  opacity: 0;
}

.autocomplete-suggestions {
    position: absolute;
    border: 1px solid #ccc;
    border-top: none; /* Remove the top border to blend with the input */
    z-index: 999;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    max-height: 300px;
    overflow-y: auto; /* Allows scrolling within the container */
    display: none; /* Initially hidden */
}

.autocomplete-suggestion {
    padding: 10px;
    cursor: pointer;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide text that overflows the element's box */
    text-overflow: ellipsis; /* Show ellipsis for overflowed text */
}

.autocomplete-suggestion:hover {
    background-color: #f0f0f0; /* Light gray background on hover */
}

.logo {
  width: 100%;
  height: 100%;
}

.input-unit-wrapper {
  position: relative;
  display: inline-block;
}

.input-unit {
  border: 1px solid #ced4da;
  padding: .375rem .75rem;
  border-radius: .25rem;
  width: 100%;
}

.unit-label {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6c757d;
}

/* Policy Complexity Status in Header */
.complexity-status-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    margin-right: 12px;
    border-radius: 16px;
    font-size: 0.85em;
    font-weight: 500;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.complexity-status-header:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.complexity-status-header .complexity-indicator {
    font-size: 1em;
    line-height: 1;
}

.complexity-status-header .complexity-text {
    font-weight: 600;
    color: #000;
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .complexity-status-header {
        padding: 3px 8px;
        font-size: 0.75em;
        gap: 4px;
    }
}