.hidden {
    display: none;
}

/* Button Styling */
.btn-style {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    padding: 12px 24px; /* Padding for size */
    border: 2px solid black; /* Black border added */
    cursor: pointer; /* Cursor changes to a pointer on hover */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px; /* Larger font size */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100px;
    height: 40px;
}

#ttc-e-billing-container {
    width: 1000px; /* Fixed width */
    margin-left: auto; /* Center align the div */
    margin-right: auto; /* Center align the div */
    padding: 20px;
}

#ttc-parcelNumber, #ttc-parcelZipCode {
    padding: 8px; /* Adjust padding as needed for better text visibility */
    width: auto; /* Adjust width to fit content, within the constraints of its container */
    min-width: 200px; /* Ensure a minimum width for smaller screens/content */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.parcel-container-ttc{
    display: flex; /* Use flexbox layout */
    justify-content: flex-end; /* Align children to the start */
    align-items: center; /* Center items vertically */
    gap: 10px; /* Add some space between the label and the input field */
    margin-bottom: 10px; /* Add some space between input containers */
}

/* Input container styling to align label and input side by side */
.input-container-ttc{
    display: flex; /* Use flexbox layout */
    justify-content: flex-start; /* Align children to the start */
    align-items: center; /* Center items vertically */
    gap: 10px; /* Add some space between the label and the input field */
    margin-bottom: 10px; /* Add some space between input containers */
}

.input-container-ttc label {
    white-space: wrap; /* Prevent the label from wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis if the text is too long */
    width: 30%; /* Set a fixed width for the label */
}

.input-container-ttc input {
    flex-grow: 1; /* Allow the input to grow and fill the remaining space */
    min-width: 150px; /* Ensure the input field has a usable minimum width */
}

.ttc-record-details-editable {
    margin: 20px auto;
    padding: 20px;
    max-width: 800px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: left;
    border: 1px solid #ccc;
}

.ttc-success-msg {
    background-color: #EBF5ED;
}

.ttc-back-link svg {
    height: 1em;
    width: 1em;
    margin-right: 5px;
    vertical-align: middle;
}

.submit-container-ttc, .ttc-update-preference-container {
    display: flex; /* Use flexbox layout */
    justify-content: center; /* Center the button horizontally */
    align-items: center; /* Center the button vertically (optional, useful if there's more content) */
    margin-top: 20px; /* Optional: add some space above the container */
}

.submit-container-ttc, .ttc-update-preference-container button {
    margin-right: 10px;
}

.submit-container-ttc, .ttc-update-preference-container button:last-child {
    margin-right: 0;
}

.submit-container-ttc button {
    margin-right: 10px;
}

.submit-container-ttc button:last-child {
    margin-right: 0;
}

.ttc-back-link {
    background-color: #888d94 !important;
    color: white !important;
}

.ttc-parcel-details, .ttc-parcel-list-results {
    max-width: 800px; /* Match the width of ttc-record-details-editable */
    margin: auto; /* Center align if the outer container is wider */
    padding: 20px;
}

#ttc-parcel-details-table {
    width: 100%; /* Ensure the table expands to fill its container */
    table-layout: fixed; /* Enable a fixed table layout */
}

#ttc-parcel-details-table td {
    width: 50%; /* Optional: Explicitly set each column to be equal width */
    text-align: left;
}

.ttc-loading-text, .ttc-error-msg, .ttc-successful-update-msg, .ttc-record-details-editable, .fetch-failed-msg, .ttc-email-verfication-msg, .ttc-email-reg-msg {
    text-align: center;
    padding: 10px;
}

.ttc-error-response-msg {
    display: flex;
    text-align: center;
    padding: 20px;
    width: 800px;
    margin: 0 auto; /* Centers the div in the middle of the page horizontally */
    justify-content: center; /* Centers the content inside the flex container horizontally */
}

.ttc-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* Optional styling for the tooltip trigger */
}

.ttc-tooltip .ttc-tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* Adjust to align the text */

    /* Fade in effect */
    opacity: 0;
    transition: opacity 0.3s;
}

.ttc-tooltip:hover .ttc-tooltiptext {
    visibility: visible;
    opacity: 1;
}

.ttc-option-button-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* This ensures that everything is aligned centrally */
    gap: 10px; /* Adds space between the buttons */
    margin-top: 20px; /* Adds some space above the button div */
}

.ttc-register-form-container, .ttc-update-form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* This ensures that everything is aligned centrally */
    gap: 10px; /* Adds space between the buttons */
    margin-top: 20px;
    padding-bottom: 10px; 
}

#ttc-parcel-results-table {
    width: 35%;
    margin: auto;
    border-collapse: collapse;
}

#ttc-parcel-results-table th, 
#ttc-parcel-results-table td {
    width: 100px;
    border: 1px solid black;
    text-align: center;
    padding: 8px;
}

#ttc-parcel-list {
    padding: 20px; /* Adds padding around the entire div */
    display: none; /* Keeps the div hidden until it's needed */
}

#ttc-parcel-list-results-update-form-div{
    margin: 20px auto;
    padding: 20px;
    max-width: 800px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: left;
    border: 1px solid #ccc;
}

#ttc-parcel-list-results-update-form-div span {
    display: block; /* Makes the span a block-level element */
    text-align: center; /* Centers the text horizontally */
    width: 100%; /* Ensures it spans the full width of its container */
    padding: 5px;
}

#ttc-update-email-container span {
    display: block;
    text-align: center;
}

.opt-in-item {
    display: flex;
    margin: 0 auto; /* Centers the div in the middle of the page horizontally */
    justify-content: center;
}

.error {
	border-color: red;
}

/* Enhancements */
.parcel-container-ttc {
	align-items: baseline;
}
.opt-in-item {
	align-items: baseline;
    gap: 1rem;
}
.ttc-error-response-msg {
    width: revert;
}
#ttc-input-parcel-area {
    text-align: right;
}
.ttc-desclaimer {
    margin-top: 1rem;
}
.fetch-failed-msg {
    color: red;
}

/* Mobile Styles */
@media (max-width: 1023px) {
	#ttc-e-billing-container {
		width: auto;
	}
}

@media (max-width: 767px) {
    .input-container-ttc :is(label, input) {
        display: revert;
        width: 100%;
    }

    .input-container-ttc {
        display: block;
        text-align: left;
	}
    .opt-in-item > :is(label, .option-group) {
        display: block;
        width: 100%;
    }
    
    .opt-in-item {
        display: revert;
    }
}