/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/

/* Custom Styles - added by Nathan (Web SEO Online - www.webseoonline.co.za) 21-08-2014 */		

/* These styles negate default styles in favour of "responsive-ready" styles - removing these styles will revert all responsiveness for this widget */
#timeline #time_select {
    display: inline-block !important;
}
#timeline #date_start {
    overflow-x: scroll;
    width: 100%;
    overflow-y: hidden;
}
#timeline #step_info_container {
height: auto !important;
}
#timeline #step_info_container .step-header {
height: auto !important;
}
#timeline #step_info_container .active {
    min-width: 72% !important;
}
#timeline #step_info_container .step-header, #timeline #step_info_container .checked {
    width: 13% !important;
}
#timeline #step_info_container .step-header .step-title .step-name {
font-size: 100% !important;
display: inline-block;
}
#timeline #client_form .client_form_wrapper, #timeline #client_form #additional_fields, #timeline #client_form #redeem_code {
    width: 35% !important;
}
#timeline #client_form input[type=text], #timeline #client_form textarea, #timeline #client_form #phone_description {
    min-width: 90% !important;
    max-width: 90% !important;
}
#timeline #client_form input.ui-autocomplete-input {
    max-width: 55px !important;
    min-width: 55px !important;
}
#timeline #client_form input#client_phone_number {
    min-width: 62% !important;
    max-width: 62% !important;
}
#timeline .buttons_container {
    width: 100% !important;
}
#timeline .buttons_container div#submit_button {
    width: 95% !important;
    margin: 10px auto;
    display: block;
}

@media (max-width: 900px) {

#timeline #client_form .client_form_wrapper, #timeline #client_form #additional_fields, #timeline #client_form #redeem_code {
    width: 100% !important;
	min-width: 100% !important;
}

}

@media (max-width: 900px) and (min-width: 768px) {

#timeline #step_info_container .step-header, #timeline #step_info_container .checked {
width: 18% !important;
}

#timeline #step_info_container .active {
min-width: 62% !important;
}

}

@media (max-width: 767px) and (min-width: 651px) {

#timeline #step_info_container .step-header, #timeline #step_info_container .checked {
width: 17% !important;
}

#timeline #step_info_container .active {
min-width: 65% !important;
}

}

@media (max-width: 650px) {

#timeline #step_info_container .step-header, #timeline #step_info_container .checked {
width: 20% !important;
overflow: hidden;
}

#timeline #step_info_container .active {
min-width: 55% !important;
}

#timeline #step_info_container .step-header .step-title .step-name {
font-size: 65% !important;
display: inline-block;
}

#timeline #step_info_container .active .step-title .step-name {
font-size: 100% !important;
}

}

@media (max-width: 300px) {

div#time_select {
    width: 100%;
}

div#date_start {
    margin-bottom: 20px;
    width: 100%;
}

div#date_start .ui-datepicker {
    width: 100%;
    box-sizing: border-box;
}

}

/* End Custom Styles */
		
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 div#widget_container   {
	/* add your css rule here */
}


 #widget_container #widget_header   {
	/* add your css rule here */
}


 #widget_container #widget_footer   {
	/* add your css rule here */
}


 #widget_container h1.title a   {
	/* add your css rule here */
}


 #events .event_price   {
	/* add your css rule here */
}


 #eventForm dd.extention_data   {
	/* add your css rule here */
}


 dd.extention_data dl.zend_form dt, dd.extention_data dl.zend_form dd label   {
	/* add your css rule here */
}