#thankYouDiv {
    background-color: #f8f9fa;
    border: 2px solid #007bff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.container {
    max-width: 90%; /* Set maximum width */
    width: 100%; /* Make the container responsive */
    padding: 20px; /* Add padding */
}

.thankYouDiv {
    background-color: #fff;
    border-color: #fff;
}

.theme-color {
    color: #004cb9;
}

hr.new1 {
    border-top: 2px dashed #fff;
    margin: 0.4rem 0;
}

.confirmation-container {
    background-color: #ffffff; /* White background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
    padding: 20px; /* Padding */
    margin: 0 auto; /* Center the container horizontally */
}

.confirmation-title {
    color: #007bff; /* Blue title color */
    font-size: 20px; /* Larger font size */
    margin-bottom: 15px; /* Spacing below the title */
}

.date-label {
    font-weight: bold; /* Bold label text */
    margin-bottom: 10px; /* Spacing below the label */
}

.checkbox-container {
    display: flex; /* Display children in a row */
    align-items: center; /* Center align children vertically */
    justify-content: flex-end; /* Align children to the right */
    margin-top: 20px; /* Spacing above the container */
}

.confirmChanges {
    background-color: #007bff; /* Blue button background color */
    color: #ffffff; /* White button text color */
    border: none; /* No button border */
    border-radius: 5px; /* Rounded button corners */
    padding: 10px 20px; /* Padding */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Cursor style */
    transition: background-color 0.3s ease; /* Smooth transition */
}

.confirmChanges:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.invalid-feedback {
    color: #ff0000; /* Red color for invalid feedback */
    font-size: 14px; /* Font size */
}

.confirmation-container {
    position: relative; /* Positioning context for absolute positioning */
    background-color: #ffffff; /* White background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
    padding: 20px; /* Padding */
    margin: 0 auto; /* Center the container horizontally */
}

.close-button {
    position: absolute; /* Position the close button */
    top: 10px; /* Distance from the top */
    right: 10px; /* Distance from the right */
    border: none; /* No button border */
    background-color: transparent; /* Transparent background */
    color: #000000; /* Black button color */
    font-size: 20px; /* Button size */
    cursor: pointer; /* Cursor style */
    transition: color 0.3s ease; /* Smooth transition */
}

.close-button:hover {
    color: #ff0000; /* Red button color on hover */
}

#spinnerSendOrder {
    margin-left: 10px; /* Adjust as needed */
}

.custom-alert {
    position: fixed;
    top: 20px;
    right: -350px; /* Start hidden off the right side */
    width: 300px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 1060; /* Higher than Bootstrap modal's z-index */
    border-radius: 10px;
    transition: right 0.5s ease; /* Smooth slide-in effect */
}
.custom-alert.show {
    right: 20px; /* Slide in to the right position */
}
.custom-alert .btn-close {
    position: absolute;
    top: 10px;
    right: 10px;
}

.btn-thankYou {
    background-color: #6c5ce7; /* Similar to the purple button */
    color: #ffffff;
    border: none;
    border-radius: 30px; /* Rounded corners */
    padding: 10px 20px; /* Padding */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Cursor style */
    transition: background-color 0.3s ease; /* Smooth transition */
    margin-right: auto; /* Align to the left */
}

.btn-thankYou:hover {
    background-color: #5a47c7; /* Darker purple on hover */
}

.btn-cancel-order {
    background-color: #ffffff; /* White background */
    color: #6c757d; /* Grey text */
    border: 2px solid #ced4da; /* Grey border */
    border-radius: 30px; /* Rounded corners */
    padding: 10px 20px; /* Padding */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Cursor style */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
    margin-left: auto; /* Align to the right */
}

.btn-cancel-order:hover {
    background-color: #dc3545; /* Red background on hover */
    color: #ffffff; /* White text on hover */
    border-color: #dc3545; /* Red border on hover */
}

.modal-header.bg-primary {
    background-color: #007bff;
    color: white;
}

.modal-header .btn-close {
    background-color: #ffffff;
}

.order-summary {
    margin-top: 1rem;
}

.order-summary .d-flex {
    margin-bottom: 0.5rem;
}

.order-summary .trampoline-name {
    text-transform: capitalize;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}

.modal-footer .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.modal-footer .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.order-summary h5 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 0.5rem;
}

.order-summary hr {
    border-top: 1px solid #ddd;
}

.order-summary .d-flex.py-2 {
    padding: 0.5rem 0;
}

.text-center i {
    color: #ff6f61;
}

.reservation-dates-container {
    background-color: #f8f9fa;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.reservation-dates-title {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 5px;
}

.reservation-dates {
    font-size: 1.1rem;
    color: #555;
}

.order-summary hr {
    border-color: #333; /* Darker color */
}

.order-summary .text-danger {
    font-size: 12px; /* Adjust the font size as needed */
}

.is-locked {
    background-color: #f8d7da; /* Red color */
    color: #999;
    /*border-radius: 0;*/
}

/*#viewOrderButton:disabled {*/
/*    background-color: #cccccc; !* Light gray background *!*/
/*    cursor: not-allowed; !* Change cursor to indicate disabled state *!*/
/*    opacity: 0.6; !* Slightly transparent *!*/
/*}*/

@media (max-width: 576px) {
    .fc-day-header {
        font-size: 100px; /* Example: Increase day header font size */
    }
    .fc-daygrid-event {
        font-size: 10px; /* Example: Decrease event font size */
        padding: 2px 2px; /* Example: Adjust padding for event items */
    }
    .fc-time-grid-event {
        font-size: 2px; /* Example: Decrease event font size in time grid */
    }
    .fc-event-title {
        white-space: normal; /* Wrap event title on smaller screens */
    }
}

#calendar, #orderDates {
    display: none;
}

/* Show PC calendar for larger screens */
@media (min-width: 768px) {
    #calendar {
        display: block;
    }
}

/* Show mobile calendar for smaller screens */
@media (max-width: 767px) {
    #orderDates {
        display: block;
    }
    #orderButtons button {
        padding: 0.5rem 1rem; /* Adjust padding as needed */
        font-size: 0.875rem;  /* Adjust font size as needed */
    }
}

.flatpickr-calendar.open{
    z-index: 99998;
}

.required-asterisk {
    color: red; /* Change color as needed */
}