/*SMALL SCREEN BOOKING FORMS STYLES*/
/*small_screen_booking_form Styles*/

#existing_cust_section,
#new_cust_section,
#existing_cust_sub_section,
#query_contact_how,
#small_screen_booking_confirmation,
.form_controls button {
    display: none;
}

#small_screen_booking_form,
#small_screen_booking_confirmation {
    width: 100%;
    padding: 5px 5px 5px 10px;
}

#small_screen_booking_form .query_text {
    font-weight: 700;
    margin-bottom: 6px;
}

#small_screen_booking_form .booking_form_note {
    margin: 14px 0 0 0;
}

#small_screen_booking_form div.query {
    margin: 10px 0 10px 0;
}
/*Buttons + Container Styles*/

.form_controls,
.query_new_cust_buttons,
.query_contact_how_buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 6px 0;
}

.form_controls button,
.query_new_cust_buttons button,
.query_contact_how_buttons button {
    height: 80px;
    flex: 0 0 32%;
    margin: 5px 2px;
    color: #FFF;
}

#yes_button,
#new_cust_booking_submit,
#existing_cust_booking_submit {
    background-color: rgb(65, 173, 73);
}

#no_button {
    background-color: rgb(183, 23, 36);
}

#email_button {
    background-color: rgb(149, 45, 26);
}

#phone_button {
    background-color: rgb(183, 23, 36);
}

.start_again_link {
    background-color: rgb(239, 59, 38);
}

#phone_button,
.changed_details_link {
    background-color: rgb(183, 23, 36);
}
/*Some of the below are to reset from the phone media queries and general style sheet*/

#small_screen_booking_form h1 {
    margin: 3px 0 3px 0;
}

#small_screen_booking_form ol {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

#small_screen_booking_form li {
    margin: 0;
    display: flex;
    flex-flow: row wrap;
}

#small_screen_booking_form fieldset legend {
    font-weight: bold;
    font-size: 1em;
    margin: 8px 0px 4px 0px;
}

#small_screen_booking_form li label {
    font-size: 0.9em;
    width: 22%;
    margin: 2px 2px;
    padding: 2px 3px 2px 2px;
    text-align: right;
}

#small_screen_booking_form li input,
#small_screen_booking_form li textarea,
#small_screen_booking_form li select {
    flex-grow: 1;
    font-size: 1em;
    border: 1px grey solid;
    margin: 2px 2px;
    padding: 2px 2px;
}
/*Validation Warning Styles*/

#small_screen_booking_form input.highlight,
#small_screen_booking_form textarea.highlight {
    border: 2px solid #9F1319;
    background: url(../images/iconCaution.gif) right no-repeat;
}

#small_screen_booking_form .loading {
    background: url(../images/ajax-loader.gif) no-repeat 1px;
    height: 28px;
    width: 28px;
    display: none;
}
/*Booking Response Styles*/

#small_screen_booking_confirmation p {}

#small_screen_booking_confirmation a {
    text-decoration: none;
    color: #B71724;
    -ms-transition: background 1s ease-out, background .4s ease-in;
    -moz-transition: background 1s ease-out, background .4s ease-in;
    -webkit-transition: background 1s ease-out, background .4s ease-in;
    transition: background 1s ease-out, background .4s ease-in;
}

#small_screen_booking_confirmation .strong {
    color: #B71724;
    font-weight: bold;
}

#small_screen_booking_confirmation .hotmail_warning {
    color: #8a111b;
    font-weight: bold;
}