﻿.book-now-app {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 5px auto;
    padding: 10px;
}

    .book-now-app h1, .book-now-app h2, .book-now-app label,
    .book-now-app p, .book-now-app span,
    .book-now-app select, .book-now-app option,
    .book-now-app ul, .book-now-app li {
        color: #434447;
    }

    /* Inputs Section */
    .book-now-app > .booking-form {
        padding: 10px 10px;
        height: 100%;
        min-height: 400px;
        margin: 10px auto;
        width: 75%;
        max-width: 670px;
        border-radius: 5px;
        background-color: transparent;
    }
        .book-now-app > .booking-form > h1 {
            width: 100%;
            margin-bottom: 25px;
            text-align: center;
        }

    .book-now-app > .booking-form > .booking-form-page {
        display: none;
        margin-top: 15px;
    }


        .book-now-app > .booking-form > .booking-form-page > .page-row {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            margin-top: 10px;
        }
            .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-info-msg-box {
                width: 100%;

            }

            /* Message box, input groups and buttons box share padding for uniform appearance */
            .booking-form-input-group,
            .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-info-msg-box,
            .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-buttons-box {
                padding: 4px;
                width: 100%;
            }
                .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-info-msg-box > .info-msg-box-paragraph p {
                    font-weight: 300;
                }


                .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-info-msg-box > .info-msg-box-paragraph table {
                    width: 100%;
                    margin: 14px auto;
                    font-weight: 300;
                }

            .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-buttons-box {
                display: flex;
                justify-content: space-between;
            }
                .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-buttons-box.flex-end {
                    justify-content: flex-end;
                }
                .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-buttons-box.flex-between {
                    justify-content: space-between;
                }

                /* flex end buttons are full width */
                .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-buttons-box.flex-end > button.pline-btn {
                    width: 100%;
                }
                .book-now-app > .booking-form > .booking-form-page > .page-row >
                    .booking-form-buttons-box > .booking-form-loader-box {
                    display: none;
                }
                .book-now-app > .booking-form > .booking-form-page > .page-row >
                    .booking-form-buttons-box > .booking-form-loader-box > .booking-form-loader {
                    color: #6aaefa;
                    font-size: 22px;
                }


    /* Bottom border for payment box and info box */
    .book-now-app > .booking-form > .booking-form-page > .page-row > .booking-form-info-msg-box > .info-msg-box-paragraph {
        margin-bottom: 30px;
        border-bottom: 1px solid #ebebeb;
    }

/* Media Queries */
@media only screen and (max-width: 630px) {
    .book-now-app {
        flex-wrap: wrap;
        padding: 0px;
        margin: 0px;
    }

        .book-now-app > .booking-form {
            width: 100%;
            margin: 0px;
            padding: 30px 5px;
        }
}

@media only screen and (max-width: 500px) {

        .book-now-app > .booking-form > .booking-form-page > .page-row {
            flex-wrap: wrap;
        }
}
