/* form.css */
*,
*::before,
*::after {
    box-sizing: border-box;
}

.checkbox {
    text-align: center;
    margin: 20px 0 36px;
}

hr {
    border: 1px solid darkgray;
    margin: 20px 0;
}

.input-note {
    font-size: 11px;
    color: #6c757d;
    margin-top: -25px;
    text-align: right;
    margin-bottom: 20px;
}

/* Form content */
.form-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60%;
    padding: 50px 20px;
    margin: 50px auto;
    text-align: center;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: #dee3e8 0 1px 1px;
    position: relative;
}

.form-container {
    width: 90%;
}

.form-group {
    margin-bottom: 20px;

}

.form-section {
    margin-bottom: 15px;
}

.form-section p {
    margin-bottom: 10px;
    text-align: left;
}

/* Box styling */
.box {
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.form-data {
    flex: 1;
    padding: 20px 5px;
}

.form-label {
    flex: 1;
    margin-right: 15px;
    font-size: 15px;
    text-align: center;
    width: 150px;
}

.form-input {
    flex: 2;
    padding: 10px 5px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Form button */
.form-button {
    padding: 12px 24px;
    font-size: 1em;
    cursor: pointer;
    background-color: #004d99;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    justify-content: center;
    display: flex;
    margin: 0 auto;
}

.complete_cancel_text_display {
    font-size: 15px;
}

.complete_reservation_text_display{
    text-align: left;
!important;
    font-size: 15px;
}

.complete_cancel_text_display h3 {
    text-align: center;
}
.complete_reservation_text_display h3 {
    text-align: center;
}

.contact-info hr {
    border: none;
    border-top: 1px solid black;
    margin: 10px 0;
}

#backButton {
    background-color: #6b7280;
}

.form-button:hover {
    background-color: #003366;
}

.form-button[disabled] {
    background-color: #cccccc;
    color: #999999;
    cursor: not-allowed;
}

.required:after {
    content: " ※";
    color: red;
    margin-left: 5px;
    font-size: 0.9em;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {

    .form-content {
        padding: 20px 10px;
        margin: 20px auto;
        width: 90%;
    }

    .form-group p li {
        font-size: 12px;
    }

    .form-input {
        font-size: 12px;
    }

    .form-label {
        margin-right: 0px;
        font-size: 12px;
    }

    .form-input input, .form-input textarea {
        width: 60%;
    }

    .form-button {
        font-size: 10px;
    }

    .complete_text {
        font-size: 12px;
    }

    .special_notes
    {
        font-size: 12px;
    }

    .addtional_ticket_info
    {
        font-size: 12px;
    }

    .input-note {
        font-size: 10px;
        margin-top: -15px;
        margin-bottom: 10px;
    }

    .box {
        font-size: 12px;
    }

    .complete_cancel_text_display {
        font-size: 12px;
    }
}