/*------------------*/
/* Steps Navigation */
/*------------------*/
#bookingStepNavigation 
{ text-align:center; }

#bookingStepNavigation ul 
{ padding:0px; }

#bookingStepNavigation li
{ display:inline-block; list-style:none;  }

#bookingStepNavigation li.step-number
{ border-radius:50%; -moz-border-radius: 20px; -webkit-border-radius:20px; height:40px;  width:40px; cursor: default;}

#bookingStepNavigation li.step-number span
{ display:block; line-height:40px; text-align:center;  }

#bookingStepNavigation li.divider
{ cursor: default; }

#bookingStepNavigation li.arrows
{ cursor: pointer; }

#bookingStartOver
{float: left;text-align: left;margin: 10px 0px 0px 5px; }

#bookingStartOver a 
{cursor: pointer; text-align:left}

#showAllAppointmentResults #bookingStartOver a
{margin-left: 5px  }

#bookingStartOver.start-over
{float: none; text-align: center; margin: 10px 0px 10px 5px;}



/*----------------------------------*/
/* Basic Layout and Form Components */
/*----------------------------------*/
#bookingStepContainer   
{}

.booking-step-inner-container           
{ margin:20px auto; max-width:700px; width:80%; }

.booking-step-form .booking-step-button-strip .form            
{ margin:0px auto; text-align:right; }

#bookingStepContainer .k-dropdown
{ height:33px; }

#bookingStepContainer .k-datepicker 
{height: 33px;}

.booking-step-form .booking-form-item               
{ display:inline-block; margin:0px; width:100%;  }

.booking-step-form .booking-form-item.large-label .form-label
{ display:inline-block; }

.booking-step-form .booking-form-item label
{ width:29%; float:left; }

.booking-step-form .booking-form-item .form-label   
{ display:block; line-height:35px; }

.booking-step-form .booking-form-item .form-inputs-container
{ float:right; width:70%; }

.booking-step-form .booking-form-item.block               
{ display:block;   }

.booking-step-form .booking-form-item.hidden              
{ display:none  }

.booking-step-form .booking-form-item .form-label .optional-label
{ font-size:60%; }

.booking-step-form .booking-form-item .form-input   
{ border:0px; display:inline-block; float:left; margin-top:4px; width:99%; }

.booking-step-form .booking-form-item.double .form-input    
{ font-size:13px; width:49%; }

.booking-step-form .form-input
{ padding-left:0px; padding-right:0px; text-indent:10px; }

.booking-step-form .booking-form-item.large-label .form-input
{ width:35% }

.booking-step-form .booking-form-item.large-label .form-label
{ width:64% }

.booking-step-form .booking-form-item.double  .form-inputs-container .form-input.add-space
{ margin-left:1% }

.booking-step-form .booking-form-item.double .form-input.full    
{ margin:inherit 0px; width:99%; }

.booking-step-form .booking-form-item .small
{ font-size:0.8em; vertical-align:middle; }

.booking-form-item.label-top .form-label,
.booking-form-item.label-top .form-input
{ text-align:left; width:100%; }

.booking-step-button-strip
{ margin:10px 0 0 0; }

.booking-step-button-strip .booking-event.button
{ float:right; }

.booking-step-title 
{ margin-bottom:20px; }

.booking-summary-container
{ border-right:none; border-left:none; border-width:1px 0px 1px 0px;  }

#bookingStepContainer .booking-step-button-strip .button span
{ line-height: 1em; vertical-align:middle; }

#bookingCenteringContainer { text-align: center; }

/*----------------------------------------------------*/
/*            Styles for Specific Elements            */
/*----------------------------------------------------*/
.booking-step-form .booking-form-item#rememberMe
{ margin:10px 20px 10px 0; text-align:right; }

.booking-step-form .k-datepicker .booking-form-input:hover
{ outline:none; }

input[type="checkbox"]
{padding:0px; margin:0px}

.booking-step-form #selectTimeContainer
{ margin:60px 0 20px; }

.booking-step-form #selectDateContainer
{ text-align:right; }

.booking-step-form #selectDateContainer .form-input
{ float:none; width:65%; text-indent:5px}

.booking-step-form #selectDateContainer .form-label
{ display:inline-block; float:none; font-size:13px; text-align:center; width:25%; }

.booking-step-form #selectDateContainer .date-picker-container
{ display:inline-block; width:40%; }
.booking-step-form #selectDateContainer .date-picker-container.hidden
{ display:none; }

.booking-step-form .form-input.float-right
{ float:right; }

.booking-step-form #addServiceButtonContainer   
{ display:inline-block; margin-left:1%; vertical-align:bottom; }

.booking-step-form .button .icon
{ padding:0px !important; font-family:'icomoon'!important;}

.booking-step-form #addServiceButtonContainer .button
{ box-sizing:content-box; font-size:14px; min-height:35px; line-height:35px; padding:0px; text-align:center; width:35px;}

.booking-step-form #addServiceButtonContainer .button .long-name
{ display:none; }

.booking-step-form #addServiceButtonContainer .button span.icon
{font-size:12px;}

#selectServiceBookingStep .booking-form-item
{ width:28%; vertical-align:top; }

#selectServiceBookingStep.no-category .booking-form-item
{ width:43%; }

.booking-summary-container .booking-step-title
{ margin:0px; }

.appointment-request-service
{ }

.appointment-request-service p
{ text-indent: 10px; }

#employeeOptionsList
{ list-style-type:none; padding:0; width:100%; }

.appointment-request-employee-option ul
{ list-style-type:none; padding:0; }

.appointment-request-employee-option ul li
{ cursor: default; }

.appointment-request-service .remove-link
{ display:inline-block; cursor:pointer; }

.booking-summary-container h4
{ margin-bottom:10px; margin-top:5px; }


/* search results (step 4) */
#displayResultsBookingStep
{ margin-bottom:20px; max-height:500px; overflow:auto;}

div.appointment-request-time-option
{ display:table; margin-left:auto; margin-right:auto; }

div.no-appointments-available
{ display:block; margin-bottom:20px; padding:20px; text-align:center; }

div.no-appointments-available p
{ display:block; margin-bottom:20px; padding:20px; text-align:center; }


#showAllAppointmentResults
{ cursor:pointer; display:inline-block; margin:10px 5px 10px 0; float:right; }

#showAllAppointmentResults .show 
{ display:block; text-align:right; }

.appointment-request-time-option .time
{ display:table-cell; width:20%; vertical-align:middle; cursor: default; }

.appointment-request-time-option .time p
{ text-align:center; }

.appointment-request-time-option .appointment-request-service-list
{ display:table-cell; width:70%; vertical-align:middle; }

.appointment-request-book-button
{ display:table-cell; vertical-align:middle; }

.appointment-request-time-option .select-appointment-result-button
{ text-align:center; }

.appointment-request-time-option .appointment-request-service-list ul
{ list-style:none; margin:0px; padding:0px; }

.appointment-request-time-option .appointment-request-service-list li
{ display:block; cursor: default; }

.appointment-request-time-option .appointment-request-service-list li p
{ text-indent:5px; }

.appointment-request-time-option .appointment-request-service-list li span /* "with" */
{ font-size:80%; margin:0px 5px; }

.appointment-request-employee-option ul li span /* "with" */
{ font-size:90%; margin:0px 5px; }

.appointment-request-time-option .appointment-request-service-list .more-options-link
{ cursor:pointer; margin-left:5px; display: inline-block;width: 90%;}

.booking-summary-container .date-dropdown
{ text-align:center; }

.booking-summary-container .date-dropdown .k-dropdown
{ min-width:195px; max-width:350px; margin:5px inherit; width:40%; }

.booking-summary-container .date-dropdown .k-input
{ font-size:110%; }

.booking-summary-container .date-dropdown .k-dropdown .k-state-hover .k-input
{ color:#555555; }

.appointment-request-spacer
{ height:7px; }

/* confirmation page  */

.booking-confirmation-container
{ border-right:none; border-left:none; border-width:1px 0px 1px 0px;  }

.booking-confirmation-container .booking-step-title
{ margin:0px; }

.booking-step-form .booking-confirmation-container .booking-form-item span.form-input,
.booking-step-form .booking-confirmation-container .booking-form-item .comment-container
{ margin:0px 0 1px 20px; line-height: 35px; width:56%; float: right; }

.booking-step-form .booking-confirmation-container .booking-form-item #bookingComment
{ height:50%; padding:5px; text-indent:0px; width:95%; }

.booking-step-form .booking-confirmation-container label
{width:39%}

/* completed page (step 5) */
.booking-step-complete-paragraph
{ }

.booking-completed-details
{ margin-left:auto !important; margin-right:auto !important; }

.booking-completed-details .details-row
{ width:100%; }

.booking-completed-details .details-row .details-label
{ margin-right:5%; width:30%; }

.booking-completed-details .details-row .details-value
{ width:60%; word-wrap: break-word;}

/* Overriding for when Booking Section is a 1/3 size column */
.three-column .booking-step-form .booking-form-item.double .form-input,
.three-column .booking-step-form .booking-form-item.double .form-input.add-space,
.two-column-left .second .booking-step-form .booking-form-item.double .form-input,
.two-column-left .second .booking-step-form .booking-form-item.double .form-input.add-space,
.two-column-right .first .booking-step-form .booking-form-item.double .form-input,
.two-column-right .first .booking-step-form .booking-form-item.double .form-input.add-space
{ width:99%; margin-left:0px; }

.three-column .booking-step-form .booking-form-item .form-label,
.two-column-left .second .booking-step-form .booking-form-item .form-label,
.two-column-right .first .booking-step-form .booking-form-item .form-label    
{ width:99%; }

.three-column .booking-step-form .booking-form-item .form-input,
.two-column-left .second .booking-step-form .booking-form-item .form-input,
.two-column-right .first .booking-step-form .booking-form-item .form-input   
{ width:99%; margin-bottom:5px; }

.three-column .booking-step-form #selectDateContainer .date-picker-container,
.two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
.two-column-right .first .booking-step-form #selectDateContainer .date-picker-container
{ width:99%; }

.three-column #selectServiceBookingStep .booking-form-item,
.two-column-left .second #selectServiceBookingStep .booking-form-item,
.two-column-right .first #selectServiceBookingStep .booking-form-item
{ width:99%; }

.three-column .booking-step-form #addServiceButtonContainer .button,
.two-column-left .second .booking-step-form #addServiceButtonContainer .button,
.two-column-right .first .booking-step-form #addServiceButtonContainer .button
{ height:auto; margin-top:10px; width:auto; }

.three-column .booking-step-form #addServiceButtonContainer .button .long-name,
.two-column-left .second .booking-step-form #addServiceButtonContainer .button .long-name,
.two-column-right .first .booking-step-form #addServiceButtonContainer .button .long-name
{ display:inline-block; }

.three-column .appointment-request-time-option,
.two-column-left .second .appointment-request-time-option,
.two-column-right .first .appointment-request-time-option
{ display:block; }

.three-column .appointment-request-time-option .select-appointment-result-button:not(.hidden),
.two-column-left .second .appointment-request-time-option .select-appointment-result-button:not(.hidden),
.two-column-right .first .appointment-request-time-option .select-appointment-result-button:not(.hidden)
{ display:block; text-align:center; }

.three-column .appointment-request-time-option .time,
.two-column-left .second .appointment-request-time-option .time,
.two-column-right .first .appointment-request-time-option .time
{ width:30%; }

.three-column .appointment-request-time-option .appointment-request-service-list,
.two-column-left .second .appointment-request-time-option .appointment-request-service-list,
.two-column-right .first .appointment-request-time-option .appointment-request-service-list
{ width:68%; vertical-align:top; }

.three-column .appointment-request-time-option .time p span,
.two-column-left .second .appointment-request-time-option .time p span,
.two-column-right .first .appointment-request-time-option .time p span
{ display:block; }

.three-column .appointment-request-book-button,
.two-column-left .second .appointment-request-book-button,
.two-column-right .first .appointment-request-book-button
{ display:block; }

.three-column .booking-step-inner-container,
.two-column-left .second .booking-step-inner-container,
.two-column-right .first .booking-step-inner-container           
{ width:95%; }


/*----------------------------------*/
/*     Kendo Element Overrides      */
/*----------------------------------*/
#bookingStepContainer .k-picker-wrap.k-state-hover, #noAvailableAppointments .k-picker-wrap.k-state-hover
{ background:#ffffff; }

#bookingStepContainer .k-dropdown-wrap.k-state-default, #noAvailableAppointments .k-dropdown-wrap.k-state-default
{ border:0px; background:#ffffff; color:#555555; outline:1px solid #cccccc;  }

#bookingStepContainer .form .k-input, #noAvailableAppointments .form .k-input
{ border:1px solid #f5f5f5 ; background:#ffffff; color:#555555; font-size:14px; line-height:26px; padding:5px 0 4px; }

#bookingStepContainer .form .k-picker-wrap .k-input, #noAvailableAppointments .form .k-picker-wrap .k-input 
{ border:none; }

#bookingStepContainer .form .k-dropdown-wrap .k-input, #noAvailableAppointments .form .k-dropdown-wrap .k-input
{ border-width:0px 1px 0px 0px; border-color:#cccccc; }

#bookingStepContainer .k-dropdown-wrap .k-select, #noAvailableAppointments .k-dropdown .k-select
{ line-height:2.0em; }

.k-list .k-item
{ font-size:14px; }

/* combo boxes */
.k-dropdown .k-state-focused .k-input {
  color: #777777;
}

.k-list .k-item:hover
{ border-color:#e3e3e3; background:#e3e3e3; color:#333333; }

.k-state-selected, 
.k-state-selected:link, 
.k-state-selected:visited,
.k-list > .k-state-selected,
.k-list > .k-state-highlight,
.k-panel > .k-state-selected,
.k-button:active,
.k-ghost-splitbar-vertical,
.k-ghost-splitbar-horizontal,
.k-draghandle.k-state-selected:hover,
.k-scheduler .k-scheduler-toolbar .k-state-selected,
.k-marquee-color
{ border-color:#eeeeee; background:#eeeeee; color:#333333; }

#bookingStepContainer .k-dropdown-wrap.k-state-hover .k-icon, #noAvailableAppointments .k-dropdown-wrap.k-state-hover .k-icon  /* drop down hover arrow color */
{ background-position: -0px -32px; }

/* -- Datepicker Overrides -- */
.k-datepicker .k-picker-wrap
{ border:none; outline:1px solid #cccccc;}
.k-dropdown .k-input
{ width:auto; }
#bookingStepContainer .k-datepicker .k-state-hover > .k-select, #noAvailableAppointments .k-datepicker .k-state-hover > .k-select,
#bookingStepContainer .k-datepicker .k-state-focused > .k-select, #noAvailableAppointments .k-datepicker .k-state-focused >.k-select
{ background:#ffffff; }
#bookingStepContainer .k-datepicker .k-state-hover .k-icon, #noAvailableAppointments .k-datepicker .k-state-hover .k-icon /* calendar icon hover color*/
{ background-position: -32px -176px; }

.k-calendar-container .k-link.k-state-hover /* caledar icon/background when focused */
{ background:#eeeeee; color:#333333; }

.k-calendar-container a /* all clickable elements in calendar */
{ background:#ffffff; color:#555555; font-family: "Arial", "Helvetica", sans-serif; font-size:12px;  text-align:center; text-decoration:none; font-style: normal; font-weight: normal; margin:0;  }

.k-calendar-container th
{ background:#ffffff; color:#555555; font-family: "Arial", "Helvetica", sans-serif; font-size:12px;  text-align:center; text-decoration:none;font-style: normal; font-weight: normal; }

.k-calendar-container .k-nav-prev.k-state-hover .k-icon /* back arrow hover*/
{ background-position:0px -48px; }

.k-calendar-container .k-nav-next.k-state-hover .k-icon /* next arrow hover*/
{ background-position:0px -16px; }

.k-picker-wrap.k-state-focused /* remove colored line around calendar*/
{ background:#ffffff; }

.k-calendar-container td /* date boxes */
{ background:#ffffff; border:none; color:#555555; font-family: "Arial", "Helvetica", sans-serif; font-size:12px; margin:0px; padding:1px; text-align:center; }

.k-calendar-container td.k-state-hover,.k-calendar-container td.k-state-hover a /* hovering over dates */
{ background:#e5e5e5; color:#333333;  }

.k-calendar-container td.k-state-selected,.k-calendar-container td.k-state-selected a /* selected date */
{ background:#dddddd; color:#333333;  -webkit-box-shadow: #dddddd 0px 0px 1px 1px inset;  box-shadow: #dddddd 0px 0px 1px 1px inset;  }

.k-calendar-container td.k-today /* current date */
{ box-shadow:#aaaaaa 0px 0px 0px 1px inset; -webkit-box-shadow:#aaaaaa 0px 0px 0px 1px inset;  color:#333333; }

#noAvailableAppointments.booking-step-form #selectTimeContainer
{margin: 30px 0 25px}

#noAvailableAppointments.booking-step-form #selectTimeContainer .form-input.float-right
{ width:45%; margin-top:-3px}

#noAvailableAppointments.booking-step-form #selectDateContainer .date-picker-container
{ width: 40%; margin: 10px 0}

#noAvailableAppointments.booking-step-form .booking-form-input label
{margin: 10px 0px 0 0px; width:34%}

#noAvailableAppointments.booking-step-form .form-input.float-right
{width: 31%;margin-top: -5px;}

#noAvailableAppointments.booking-step-form .booking-form-item label
{margin: 14px 0;font-size: 14px;}

#noAvailableAppointments.booking-step-form #endDateContainer label
{ margin: 14px 10px 0 0; width:22%}




/* --------------------------------------------------------------*/
/*             EXCEPTIONS FOR MOBILE SCREEN SIZES                */
/* --------------------------------------------------------------*/

/* SMALLER THAN LANDSCAPE OF TABLET (css-edit-mode) */
@media only screen and (max-width: 1454px) {
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item.double .form-input:not(.full)    
        { width: 49%; }
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item.double .form-input.add-space
        { margin-left:1%; }
    .content-wrapper.css-edit-mode .three-column .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.css-edit-mode .two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.css-edit-mode .two-column-right .first .booking-step-form #selectDateContainer .date-picker-container
        { width:40%; }

}

/* SMALLER THAN LANDSCAPE OF TABLET (edit-mode) */
@media only screen and (max-width: 1121px) {
    .content-wrapper.ui-design .booking-step-form .booking-form-item.double .form-input:not(.full) {
        width: 49%;
    }

    .content-wrapper.ui-design .booking-step-form .booking-form-item.double .form-input.add-space {
        margin-left: 1%;
    }

    .content-wrapper.ui-design .three-column .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.ui-design .two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.ui-design .two-column-right .first .booking-step-form #selectDateContainer .date-picker-container {
        width: 40%;
    }
}


/* SMALLER THAN LANDSCAPE OF TABLET (edit-mode) */

/* SMALLER THAN LANDSCAPE OF TABLET (normal) */
@media only screen and (max-width: 1024px) {
    .content-wrapper .booking-step-form .booking-form-item.double .form-input:not(.full)    
        { width: 49%; }
    .content-wrapper .booking-step-form .booking-form-item.double .form-input.add-space
        { margin-left:1%; }
    .content-wrapper .three-column .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper .two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper .two-column-right .first .booking-step-form #selectDateContainer .date-picker-container
        { width:40%; }
    /*confirmation*/
    .booking-completed-details .details-row .details-label,
    .booking-completed-details .details-row .details-value
        { padding-left:8px !important; padding-right:8px !important; }

}


/* SMALLER THAN PORTRAIT OF TABLET (css-edit-mode) */
@media only screen and (max-width: 1198px) {
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item.double .form-input:not(.full)    
        { width: 49%; }
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item .form-label   
        { width:100%; }
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item #serviceCategoryLabel
        { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item .form-input   
        { width:100%; }
    .content-wrapper.css-edit-mode .booking-step-form #selectDateContainer .date-picker-container
        { width:49%; }
    .content-wrapper.css-edit-mode .three-column .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.css-edit-mode .two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.css-edit-mode .two-column-right .first .booking-step-form #selectDateContainer .date-picker-container
        { width:100%; }
    .content-wrapper.css-edit-mode .booking-step-form .form
        { width:90%; max-width:inherit; }

}


/* SMALLER THAN PORTRAIT OF TABLET (edit-mode) */
@media only screen and (max-width: 865px) {
    .content-wrapper.ui-design .booking-step-form .booking-form-item.double .form-input:not(.full) {
        width: 49%;
    }

    .content-wrapper.ui-design .booking-step-form .booking-form-item .form-label {
        margin-top: 5px;
        width: 100%;
    }

    .content-wrapper.ui-design .booking-step-form .booking-form-item #serviceCategoryLabel 
        { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

    .content-wrapper.ui-design .booking-step-form .booking-form-item .form-input {
        width: 99.6%;
    }

    #address div:nth-child(n+2) label {
        display: none;
    }

    .content-wrapper.ui-design .booking-step-form #selectDateContainer .date-picker-container {
        width: 49%;
    }

    .content-wrapper.ui-design .three-column .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.ui-design .two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.ui-design .two-column-right .first .booking-step-form #selectDateContainer .date-picker-container {
        width: 100%;
    }

    .content-wrapper.ui-design .booking-step-form .form {
        width: 90%;
        max-width: inherit;
    }
    /*confirmation*/
    .booking-completed-details .details-row .details-label,
    .booking-completed-details .details-row .details-value {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

            .content-wrapper.ui-design #bookingStartOver
        {margin-top: 0;}
    .content-wrapper.ui-design #bookingStartOver a
        {margin-left: 0;margin-right: 0;}
                .content-wrapper.ui-design #showAllAppointmentResults
        {margin-top: 0;}
    .content-wrapper.ui-design #showAllAppointmentResults a
        {margin-left: 0;margin-right: 0;}
}

/* SMALLER THAN PORTRAIT OF TABLET (normal) */
@media only screen and (max-width: 768px) {
   .content-wrapper .booking-step-form .booking-form-item.double .form-input:not(.full)
        { width: 49%; }
    .content-wrapper .booking-step-form .booking-form-item .form-label   
        { width:100%; }
    .content-wrapper .booking-step-form .booking-form-item .form-input   
        { width:100%; }

    .content-wrapper .booking-step-form #selectDateContainer .date-picker-container
        { width:49%; }
    .content-wrapper .three-column .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper .two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper .two-column-right .first .booking-step-form #selectDateContainer .date-picker-container
        { width:100%; }
    .content-wrapper .booking-step-form .form
        { width:90%; max-width:inherit; }
     /*confirmation*/
    .booking-completed-details .details-row .details-label,
    .booking-completed-details .details-row .details-value
        { padding-left:8px !important; padding-right:8px !important; }
            .content-wrapper #bookingStartOver
        {margin-top: 0;}
    .content-wrapper #bookingStartOver a
        {margin-left: 0;margin-right: 0;}
    .content-wrapper #showAllAppointmentResults a
        {margin-left: 0;margin-right: 0;}

}


/* MOBILE PHONE SIZE (css-edit-mode) */
@media only screen and (max-width: 910px) {
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item .form-label
        { text-align:left; }
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item .form-input,
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item.double .form-input:not(.full),
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item label,
    .content-wrapper.css-edit-mode .booking-step-form .booking-form-item .form-inputs-container
        { float:none; margin:5px 0 0 0; width: 100%; }
   .content-wrapper.css-edit-mode  #bookingStepNavigation li.step-number
        { border-radius:50%; -moz-border-radius:15px; -webkit-border-radius:15px; height:30px; margin:0px; padding:0px; width:30px; }
    .content-wrapper.css-edit-mode  #bookingStepNavigation li.step-number span
        { line-height:30px; font-size:0.9em;  }
    .content-wrapper.css-edit-mode  #bookingStepNavigation li.divider
        { margin:0px; padding:0px; }
    /*step 2*/
    .content-wrapper.css-edit-mode .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.css-edit-mode .three-column .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.css-edit-mode .two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.css-edit-mode .two-column-right .first .booking-step-form #selectDateContainer .date-picker-container
        { width:100%; }
    /*step 3*/
    .content-wrapper.css-edit-mode #selectServiceBookingStep .booking-form-item
        { width:100%; }
    .content-wrapper.css-edit-mode .booking-step-form #addServiceButtonContainer .button
        { height:auto; margin-top:10px; width:100%; }
    .content-wrapper.css-edit-mode .booking-step-form #addServiceButtonContainer .button .long-name
        { display:inline-block; }
    /*step 4*/
    #displayResultsBookingStep	
		{ max-height:none; }
    .content-wrapper.css-edit-mode .appointment-request-time-option
        { display:block; }
    .content-wrapper.css-edit-mode .appointment-request-time-option .select-appointment-result-button
        { display:block; text-align:center; }
    .content-wrapper.css-edit-mode .appointment-request-time-option .time
        { width:30%; }
    .content-wrapper.css-edit-mode .appointment-request-time-option .appointment-request-service-list
        { width:68%; vertical-align:top; }
    .content-wrapper.css-edit-mode .appointment-request-time-option .time p span
        { display:block; }
     .content-wrapper.css-edit-mode .appointment-request-book-button
        { display:block; }
     /*confirmation*/
    .booking-completed-details .details-row .details-label,
    .booking-completed-details .details-row .details-value
        { padding-left:8px !important; padding-right:8px !important; }
}

/* MOBILE PHONE SIZE (edit-mode) */
@media only screen and (max-width: 577px) {
    .content-wrapper.ui-design .booking-step-form .booking-form-item .form-label 
        {text-align: left;}

    .content-wrapper.ui-design .booking-step-form .booking-form-item .form-input,
    .content-wrapper.ui-design .booking-step-form .booking-form-item.double .form-input:not(.full),
    .content-wrapper.ui-design .booking-step-form .booking-form-item label,
    .content-wrapper.ui-design .booking-step-form .booking-form-item .form-inputs-container 
        {        float: none;        margin: 5px 0 0 0;        width: 100%;   }

    .content-wrapper.ui-design #bookingStepNavigation li.step-number 
    {        border-radius: 50%;        -moz-border-radius: 15px;        -webkit-border-radius: 15px;        height: 30px;        margin: 0px;        padding: 0px;        width: 30px;   }

        .content-wrapper.ui-design #bookingStepNavigation li.step-number span {
            line-height: 30px;
            font-size: 0.9em;
        }

    .content-wrapper.ui-design #bookingStepNavigation li.divider {
        margin: 0px;
        padding: 0px;
    }
    /*step 2*/
    .content-wrapper.ui-design .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.ui-design .three-column .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.ui-design .two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper.ui-design .two-column-right .first .booking-step-form #selectDateContainer .date-picker-container {
        width: 100%;
    }
    /*step 3*/
    .content-wrapper.ui-design #selectServiceBookingStep .booking-form-item {
        width: 100%;
    }

    .content-wrapper.ui-design .booking-step-form #addServiceButtonContainer .button {
        height: auto;
        margin-top: 10px;
        width: 100%;
    }

        .content-wrapper.ui-design .booking-step-form #addServiceButtonContainer .button .long-name {
            display: inline-block;
        }
    /*step 4*/
    #displayResultsBookingStep {
        max-height: none;
    }

    .content-wrapper.ui-design .appointment-request-time-option {
        display: block;
    }

        .content-wrapper.ui-design .appointment-request-time-option .select-appointment-result-button {
            display: block;
            text-align: center;
        }

        .content-wrapper.ui-design .appointment-request-time-option .time {
            width: 30%;
        }

        .content-wrapper.ui-design .appointment-request-time-option .appointment-request-service-list {
            width: 68%;
            vertical-align: top;
        }

        .content-wrapper.ui-design .appointment-request-time-option .time p span {
            display: block;
        }

    .content-wrapper.ui-design .appointment-request-book-button {
        display: block;
    }
    /*confirmation*/
    .booking-completed-details .details-row .details-label,
    .booking-completed-details .details-row .details-value {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
        .content-wrapper.ui-design #bookingStartOver
        {margin-top: 0;}
    .content-wrapper.ui-design #bookingStartOver a
        {margin-left: 0;margin-right: 0;}
}

/* MOBILE PHONE SIZE (normal) */
@media only screen and (max-width: 480px) {
    .content-wrapper .booking-step-form .booking-form-item .form-label
        { text-align:left; }
    .content-wrapper .booking-step-form .booking-form-item .form-input,
    .content-wrapper .booking-step-form .booking-form-item.double .form-input:not(.full),
    .content-wrapper .booking-step-form .booking-form-item label,
    .content-wrapper .booking-step-form .booking-form-item .form-inputs-container
        { float:none; margin:5px 0 0 0; width: 100%; }
    .content-wrapper  #bookingStepNavigation li.step-number
        { border-radius:50%; -moz-border-radius:15px; -webkit-border-radius:15px; height:30px; margin:0px; padding:0px; width:30px; }
    .content-wrapper  #bookingStepNavigation li.step-number span
        { line-height:30px; font-size:0.9em;  }
    .content-wrapper  #bookingStepNavigation li.divider
        { margin:0px; padding:0px; }
    /*step 2*/
    .content-wrapper .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper .three-column .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper .two-column-left .second .booking-step-form #selectDateContainer .date-picker-container,
    .content-wrapper .two-column-right .first .booking-step-form #selectDateContainer .date-picker-container
        { width:100%; }
    /*step 3*/
    .content-wrapper #selectServiceBookingStep .booking-form-item
        { width:100%; }
    .content-wrapper .booking-step-form #addServiceButtonContainer .button
        { height:auto; margin-top:10px; width:100%; }
    .content-wrapper .booking-step-form #addServiceButtonContainer .button .long-name
        { display:inline-block; }
    /*step 4*/
    #displayResultsBookingStep	
		{ max-height:none; }
    .content-wrapper .appointment-request-time-option
        { display:block; }
    .content-wrapper .appointment-request-time-option .select-appointment-result-button
        { display:block; text-align:center;  }
    .content-wrapper .appointment-request-time-option .time
        { width:30%; }
    .content-wrapper .appointment-request-time-option .appointment-request-service-list
        { width:68%; vertical-align:top; }
    .content-wrapper .appointment-request-time-option .time p span
        { display:block; }
    .content-wrapper .appointment-request-book-button
        { display:block; }
    /*confirmation*/
    .booking-completed-details,
    .booking-completed-details .details-row .details-label,
    .booking-completed-details .details-row .details-value
        { padding-left:3px !important; padding-right:3px !important; }
    .content-wrapper #bookingStartOver a
        {margin-left: 0;margin-right: 0;}
}