/**********************************************/
/*                                            */
/*      Bootstrap  Joy styles                 */
/*                                            */
/*                                            */
/**********************************************/

/*------   Common rules  ------*/

body,h1,h2,h3,h4,h5,h6,p,a,label,li,dl,table{
    font-family: "Open Sans", sans-serif;
}
div.ui-corner-all,
button.ui-corner-all {
	border-radius: 0;
}
div.ui-widget-header {
	border: none;
	color: 
}
@media (max-width: 480px){
	.ui-draggable {
		box-sizing: border-box;
		width: 100% !important;
		left: 0 !important;
	}
}	

/**********************************************/
/*                                            */
/*               Main layout                  */
/*                                            */
/*                                            */
/**********************************************/

.container {
	margin: auto;
	box-shadow:  0 1px 2px rgba(34, 34, 34, 0.2);
}
.logo-container {
	margin: 0 -15px 0 -15px;
}
@media (max-width: 650px){
	.logo-container {
		margin: 0;
	}
}
.logo-container .company-logo-container img,
.logo-container .company-logo-container .company-name {
	display: inline-block;
	vertical-align: bottom;
}
.logo-container .company-logo-container img {
	max-height: 120px;
	max-width: 100%;
	box-sizing: border-box;
}
@media (max-width: 480px){
	.logo-container .company-logo-container img,
	.logo-container .company-logo-container .company-name  {
		display: block;
	}
}	
.logo-container .company-logo-container .company-name {
	margin: 20px;
	font-size: 40px;
	text-transform: capitalize;
}
@media (max-width: 480px){
	.logo-container .company-logo-container .company-name {
		margin-bottom: 40px;
	}
}	
.logo-container .company-time {
	padding: 10px;
	margin-right: 20px;
}
footer .container {
	padding: 20px;
}
footer .navs {
	margin-bottom: 20px;
}
footer .navs .box a {
	font-size: 1.4em;
}
@media (min-width: 980px) {
	.container {
		width: 1024px;
	}
}
@media (max-width: 980px) {
	.container {
		width: 100%;
		padding: 0;
	}
		#timeline.touch {
		display: none !important;
	}
	#timeline.bootstrap {
		margin: 10px;
	}	
}
@media (max-width: 480px){
	.container {
		box-sizing: border-box;
		width: 100%;
	}
}	

/**********************************************/
/*                                            */
/*           Page messages                    */
/*                                            */
/*                                            */
/**********************************************/

.ui-state-error.ui-corner-all {
	padding: 10px;
	border-radius: 0;
	border: none;
	margin-top: 15px;
	background: #f5d3d3;
	color: #c20202;
	font-size: 1.3em;
}

/**********************************************/
/*                                            */
/*           Timeline header                  */
/*                                            */
/*                                            */
/**********************************************/

#timeline.bootstrap #step_title {
	display: none;
}
#timeline.bootstrap #step_info_container {
	background: transparent;
	border: none;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
	height: auto;
}
#timeline.bootstrap #step_info_container .step-header {
	background: none;	
}
#timeline.bootstrap #step_info_container .step-header .step-title {
	margin: 0;
}
#timeline.bootstrap #step_info_container .step-header .step-title .step-name {
	display: block;
	font-weight: normal;
	color: #444444;	
}
#timeline.bootstrap #step_info_container .step-header .step-title .step-number {
	border-radius: 30px;
	height: 30px;
	width: 30px;
	padding: 2px 0 0 3px;
	display: inline-block;
	text-align: center;
	font-weight: normal;
	font-size: 0.8em;
	background: #ffffff;
	border: 1px solid #999999;
	color: #444444;
}
#timeline.bootstrap #step_info_container .step-header .step-title .step-number-container {
	border-bottom: 1px dotted #999999;
}
#timeline.bootstrap #step_info_container .step-header .step-title .step-info {
	font-weight: normal;
	font-size: 0.73em;
}
#timeline.vertical-steps .step-header {
   position: absolute;
   left: -9999px;
}

#timeline.vertical-steps .step-header.active, #timeline.vertical-steps .step-header.checked {
   position: static;
   left: 0px;
}

#timeline .item .location-image img,
#timeline .item .category-image img,
#timeline .item .event-image img,
#timeline .item .unit-image img {
	width: auto !important;
}


/*---- Timeline top: mobile view is for vertical and horizontal view of mobile  ---- */

@media (min-width: 650px) {
	#timeline.bootstrap #step_info_container {
		margin-bottom: 0px;
	}
	#timeline.bootstrap #step_info_container .step-header {
		height: 80px;
	}
	#timeline.bootstrap #step_info_container .step-header .step-title > .step-number {
		display: none;
	}
	#timeline.bootstrap #step_info_container .step-header .step-title .step-number-container {
		height: 20px;
	}
	#timeline.bootstrap #step_info_container .step-header .step-title .step-name {
		margin-bottom: -15px;
		padding-left: 20px;
		text-align: center;
	}	
	#timeline.bootstrap #step_info_container .step-header .step-title .step-info {
		display: block;
		margin: 3px 0 0 40px;
		height: 40px;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}
@media (max-width: 650px){
	#timeline.bootstrap {
		margin: 0;	
	}
	#timeline.bootstrap,
	#timeline.bootstrap #step_info_container,
	#timeline.bootstrap #step_info_container .step-header {
		box-sizing: border-box;
	}
	#timeline.bootstrap #step_info_container .step-header {
		border-bottom: 1px solid #999999;
		padding: 7px 0 0 7px;
		height: auto;
		margin: 0;
		width: 100% !important;
	}
	#timeline.bootstrap #step_info_container .step-header .step-title .step-number {
		float: left;
		position: relative;
		top: -4px;
	}
	#timeline.bootstrap #step_info_container .step-header .step-title .step-number-container {
		display: none;
	}
	#timeline.bootstrap #step_info_container .step-header .step-title .step-info {
		margin: 0;
		height: auto;
	}
	#timeline.bootstrap #step_info_container .step-header .step-title .step-name {
		min-width: 100px;
	}
	#timeline.bootstrap #step_info_container .step-header .step-title .step-name,
	#timeline.bootstrap #step_info_container .step-header .step-title .step-info {
		float: left;
		margin-left: 10px;
		vertical-align: bottom;
	}
}



/************************************

	Timeline: Locations, Categories, 
			  Services, Performers
		
*************************************/

#timeline.bootstrap .step-content {
	padding: 0px 20px;
}
@media (max-width: 650px){
	#timeline.bootstrap .step-content {
		padding: 15px 10px;
	}
}
#timeline.bootstrap .step-content .list-inline {
	vertical-align: top;
}
#timeline.bootstrap .item {
	margin: 0 15px 15px 0;
	padding-top: 0;
	font-size: 13px;
	border: none;
	vertical-align: top;
}
#timeline.bootstrap .item .left-block {
	display: inline-block;
    margin: 0 20px 20px 0;
}
#timeline.bootstrap .item .location-image,
#timeline.bootstrap .item .category-image,
#timeline.bootstrap .item .event-image,
#timeline.bootstrap .item .unit-image {
    float: none;
    padding: 7px;
    min-width: 120px;
    width: 100%;
	text-align: center;
	background: #f9f9f9;
	border: 1px solid #eeeeee;
}
#timeline.bootstrap .item .location-image img,
#timeline.bootstrap .item .category-image img,
#timeline.bootstrap .item .event-image img,
#timeline.bootstrap .item .unit-image img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: center;
}
#timeline.bootstrap .item .location-image.empty-bg,
#timeline.bootstrap .item .category-image.empty-bg,
#timeline.bootstrap .item .event-image.empty-bg,
#timeline.bootstrap .item .unit-image.empty-bg {
	background: none;
}
#timeline.bootstrap .item .location-info,
#timeline.bootstrap .item .category-info,
#timeline.bootstrap .item .event-info,
#timeline.bootstrap .item .unit-info {
    display: inline-block;
    vertical-align: top;
    width: 250px;
}
#timeline.bootstrap .item .location-info .location-title,
#timeline.bootstrap .item .category-info .category-title,
#timeline.bootstrap .item .event-info .event-title,
#timeline.bootstrap .item .unit-info .unit-title {
    font-size: 1.4em;
    font-weight: normal;
}
#timeline.bootstrap .item .location-info .location-address,
#timeline.bootstrap .item .event-info .event-duration,
#timeline.bootstrap .item .unit-info .unit-duration {
    font-size: 1em;
    font-weight: normal;
}
#timeline.bootstrap .item .location-info .location-address.invisible,
#timeline.bootstrap .item .event-info .event-duration.invisible,
#timeline.bootstrap .item .unit-info .unit-duration.invisible {
	visiblility: hidden;
} 
#timeline.bootstrap .button,
#pay_btn,
.reserve_time_btn,
.iphone-favorites-button a   {
    margin-top: 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 0px;
    font-size: 1.1em;
    cursor: pointer; 
    text-transform: capitalize;   
}
#pay_btn,
.reserve_time_btn,
.iphone-favorites-button a {
	min-width: 120px;
}
#timeline.bootstrap .item .left-block .button {
    width: 100%;
    min-width: 120px;
    
}
.iphone-favorites-button {
	margin-bottom: 15px;
}  
 .iphone-favorites-button a {
	padding: 10px;
	box-sizing: border-box;
	
}

@media (max-width: 767px) {
	#timeline.bootstrap .item .left-block,
	#timeline.bootstrap .item .location-info, 
	#timeline.bootstrap .item .category-info, 
	#timeline.bootstrap .item .event-info, 
	#timeline.bootstrap .item .unit-info {
		display: block;
		width: 100%;
		margin-bottom: 20px;
	}
	 
	#timeline.bootstrap .item .location-image, 
	#timeline.bootstrap .item .category-image,
	 #timeline.bootstrap .item .event-image, 
	 #timeline.bootstrap .item .unit-image {
	   height: auto !important;
	   padding: 2px !important;
	   margin-right: 10px;
	}
	#timeline .list-inline > li.item {
	   padding-left: 0px;
	   width: 100%;
	}
}
@media (max-width: 980px) and (min-width: 640px) {
	#timeline .list-inline > li.item {
	   box-sizing: border-box; 
	   padding-left: 0px;
	   width: 47%;
	}
	
	
}



/****************************************

	Timeline calendar 
	(+ fixes of jquery calendar default styles)

****************************************/

#timeline.bootstrap #date_start .ui-datepicker,
.recurring-events-page .calendar_set .ui-datepicker {
	border-radius: 0;
	border: none;
	background: none;	
	font-size: 18px;
	font-weight: normal;	
}
#timeline.bootstrap #date_start .ui-datepicker .ui-datepicker-header,
.recurring-events-page .calendar_set .ui-datepicker .ui-datepicker-header {
	border-radius: 0;
	border: none;
	background: none;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-prev,
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-next,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-prev,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-next {
	background: none;
	width: 0;
	height: 0;
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;	
}
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-prev,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-prev {
	background: url(/themes/bootstrap__joy/images/left.png) 0 0 no-repeat transparent !important;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-next,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-next {
	background: url(/themes/bootstrap__joy/images/right.png) 0 0 no-repeat transparent;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-prev-hover,
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-next-hover,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-prev-hover,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-next-hover {
	top: 2px;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-prev,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-prev {
	border-left: none;
}	
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-next,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-next {
	border-right: none;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-prev .ui-icon,
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-next .ui-icon,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-prev .ui-icon, 
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-next .ui-icon {
	background: none;
}
#timeline.bootstrap #date_start .ui-datepicker td span, 
#timeline.bootstrap #date_start .ui-datepicker td a,
.recurring-events-page .calendar_set .ui-datepicker td span,
.recurring-events-page .calendar_set .ui-datepicker td a {
	width: 2.6em;
	text-align: center;	
}
#timeline.bootstrap #date_start .ui-datepicker,
#timeline.bootstrap #date_start .ui-widget-header,
.recurring-events-page .calendar_set .ui-datepicker,
.recurring-events-page .calendar_set .ui-widget-header {
	color: #444444;
}
#timeline.bootstrap #date_start .ui-widget-header,
#timeline.bootstrap #date_start .ui-datepicker th,
.recurring-events-page .calendar_set .ui-widget-header,
.recurring-events-page .calendar_set .ui-datepicker th {
	font-weight: normal;
}
#timeline.bootstrap #date_start .ui-datepicker th,
.recurring-events-page .calendar_set .ui-datepicker th {
	padding: 0.3em 0em;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-datepicker-header,
.recurring-events-page .calendar_set .ui-datepicker .ui-datepicker-header {
	border-bottom: 1px dotted #999999;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-prev,
#timeline.bootstrap #date_start .ui-datepicker .ui-widget-header .ui-datepicker-next,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-prev,
.recurring-events-page .calendar_set .ui-datepicker .ui-widget-header .ui-datepicker-next {
	border: none;
	border-radius: 0;
	height: 26px;
	width: 20px;
	margin-top: 5px;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-state-default,
#timeline.bootstrap #time_select .timeline-grid .time-item .time-select-div,
.recurring-events-page .calendar_set .ui-datepicker .ui-state-default {
	border: 1px solid transparent;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-state-disabled,
.recurring-events-page .calendar_set .ui-datepicker .ui-state-disabled {
	opacity: 0.5;
}
#timeline.bootstrap #date_start .ui-datepicker .ui-state-disabled span,
.recurring-events-page .calendar_set .ui-datepicker .ui-state-disabled span {
	background: #f0f0f0; /*url(/themes/bootstrap__joy/images/dot.png) repeat transparent;*/
}
#timeline.bootstrap  .calendar_set .ui-state-default, 
#timeline.bootstrap .ui-widget-header .ui-state-default,
.recurring-events-page .calendar_set .ui-state-default,
.recurring-events-page .calendar_set  .ui-widget-header .ui-state-default {
	background: transparent;
}
.recurring-events-page .calendar_set .reservation_allowed a {
    background: #b8e992;  
}
.recurring-events-page .calendar_set .reservation_cancelled a {
    background: #f99579;
}


/*----- Confirm recurring event page -------*/

.recurring-events-page .bottom-info {
	background: #f9f9f9;
	padding: 10px;
	margin: 15px 0;
	border: 1px solid #eeeeee;
}
.recurring-events-page .recurring_event_title .service {
	font-size: 1.3em;
	line-height: 1.5em;
}
.recurring-events-page .recurring_event_title .time {
	font-size: 1.2em;
	color: #777777;	
}
.recurring-events-page .button_container {
	padding: 0;
}
.recurring-events-page .button_container input {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 20px;
	padding: 6px 0;
	text-align: center;
    background: #efefef;
    border: 1px solid #e5e5e5;
}
.recurring-events-page .button_container #submit {
	font-size: 2em; 
	line-height: 2.1em;
}
.recurring-events-page .ui-datepicker .ui-datepicker-title {
	white-space: nowrap;
	text-align: center;
	margin: 0;
	width: 100%;
}
@media (max-width: 980px) and (min-width: 640px) {
	.recurring-events-page {
		padding: 20px;
	}
	.recurring-events-page #timeline.bootstrap #client_info_step .bottom-info {
		margin: 0 10% 0 0;
	}
	
}
@media (max-width: 480px) {
	.recurring-events-page h4 {
		margin: 0 0 20px 20px;
	}
	.recurring-events-page #timeline.bootstrap .client-info-step-form-container {
		margin: 20px 0  20px 0 !important;
	}
	.recurring-events-page .ui-datepicker-multi-2 .ui-datepicker-group,
	.recurring-events-page .ui-datepicker-multi-3 .ui-datepicker-group,
	.recurring-events-page .ui-datepicker-multi-4 .ui-datepicker-group {
		width: 100%;
		box-sizing: border-box;
	}
}

/********************************************
         
         Timeline (Grid)
         
********************************************/

#timeline.bootstrap #time_select {
	padding: 0px 0 0 20px;	
}
#timeline.bootstrap #time_select #time_grid {
	/*border: 1px solid #eeeeee;
	background: #f9f9f9;
	looks ugly for daily-flexible-am\pm 10min timeline
	*/
	padding: 10px;
}

/* Extra small devices Phones (<768px) */
@media (max-width: 768px) {	
	#timeline.bootstrap #time_select {
		overflow: visible; /* timeline becomes wide and jump under calendar, otherwise visible only part of timeline */
	}
	#timeline.bootstrap #time_select .timeline-grid-wrapper {
		margin-left: 0; /* timeline not on the left, but under calendar now */
		margin-top: 30px;
	}
	#timeline.bootstrap #time_select {
		padding-left: 0;
	}
}

#timeline.bootstrap #time_select .timeline-grid .hour-title,
#timeline.bootstrap #time_select .timeline-grid .min-title {
	font-weight: normal;
	text-shadow: 0px 0px 3px #ffffff;
	/* 	font-size: 1.12em; don't make it larger because of AM/PM and timeframe 1min */
}
#timeline.bootstrap #time_select .timeline-grid .hour-title {
	min-width: 75px;
	text-align: right;
}
#timeline.bootstrap #time_select .timeline-grid .time-item {
	border: 1px solid #cccccc;
}
#timeline.bootstrap #time_select .timeline-grid .time-item .time-select-div {
	height: 35px;	
	padding: 3px 7px 0 11px;	 
	font-weight: normal; 
	background: #ffffff;
}
#timeline.bootstrap #time_select .timeline-grid .time-item .time-select-div.not_worked_time,
#timeline.bootstrap #time_select .timeline-grid .time-item .time-select-div.not_worked_time:hover {
	background: url(/themes/bootstrap__joy/images/dot.png) #ffffff; 
}
#timeline.bootstrap #time_select .timeline-grid .time-item .time-select-div:hover,
#timeline.bootstrap .ui-datepicker .ui-state-hover {
	border: 1px solid transparent;
}

@media (max-width: 940px) and (min-width: 650px){
	#timeline.bootstrap.daily.modern #time_select {
		margin: 20px 0 0 0 !important;
		min-width: 600px;	
	}
}
@media (max-width: 650px){
	#timeline.bootstrap.daily.modern #time_select {
		margin-top: 20px;
		display: block;
		width: 100%;
		margin-top: 20px !important;
		padding: 10px;
		background: #f9f9f9;
		border: 1px solid #eeeeee;
	}
	#timeline.bootstrap #date_start {
        float: none;
	}
	#timeline.bootstrap #time_select {
       padding: 15px 0px 0px 0px !important;
    }
	#timeline.bootstrap #date_start .ui-datepicker td span, 
	#timeline.bootstrap #date_start .ui-datepicker td a {
	   width: auto !important;
	}
}





/*-- Slots timeline ---*/
/*
not for grid
#timeline.bootstrap #time_select {
	padding: 72px 0 0 20px;	
}
*/

#timeline.bootstrap #time_select .time-select-item,
#timeline.bootstrap #time_select .time-select-div {
	border-radius: 0px;
	border: 1px solid cccccc;
	background: #ffffff;
	height: 40px;
}
#timeline.bootstrap #time_select .time-select-item,
#timeline.bootstrap #time_select .time-select-div,
#timeline.bootstrap #time_select .timeline-grid .time-item .time-select-div.not_worked_time:hover {
	color: #2b2b2b;
}
#timeline.bootstrap #time_select .time-select-item {
	min-width: 55px;
}
#timeline.bootstrap #time_select .time-select-item.am-pm {
	min-width: 80px;
}
#timeline.bootstrap .number-select-container {
	float: none;
	display: inline-block;
	background: none;
	border: none;
	border-top: 1px dotted #cccccc;
	border-radius: 0;
	padding: 5px 0 0 0;
}


/************************************

		Booking info
 (time, client info, after-booking steps) 
		
*************************************/

.client-info-step-form-container {
	width: 340px;
	margin: auto;
}
#timeline.bootstrap .bottom-info,
.client-info-step-form-container {
	display: inline-block;
	vertical-align: top;
	position: relative;
	top: 0px;	
}
#timeline.bootstrap .bottom-info .title {
	color: #555555;
}
#timeline.bootstrap #date_time_step .bottom-info {
	margin-top: 25px;
	width: 340px;
}
#timeline.bootstrap #date_time_step .left-side .bottom-info {
    width: 100%;
}
#timeline.bootstrap .ui-datepicker {
	width: 17.5em;
}
#timeline.bootstrap .bottom-info div {
	font-size: 15px;
	line-height: 1.4em;
}
#timeline.bootstrap .bottom-info .service-info-block {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #999999;
}
#timeline.bootstrap .bottom-info .service-info-block .service-name {
	font-size: 19px;
	padding: 20px 0 10px 0; /* zend_form has margin-top = 20px */ 
}
#timeline.bootstrap .bottom-info .service-info-block .service-description {
	margin-bottom: 20px;
	color: #666666;
}
#timeline.bootstrap .bottom-info .title {
	display: inline-block;
	margin-right: 20px;
	padding: 3px 7px;
    width: 120px;	
}
#timeline.bootstrap .bottom-info .service-info-block .image {
	float: none;
	padding: 7px;
	height: 120px;
	width: 100%;
	text-align: center;
	background: #f9f9f9;
	border: 1px solid #eeeeee;	
}
#timeline.bootstrap .bottom-info .service-info-block .image img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: center;
}
#timeline.bootstrap .bottom-info .service-info .title,
#timeline.bootstrap .bottom-info .info-block .title,
#timeline.bootstrap .bottom-info .service-info .data,
#timeline.bootstrap .bottom-info .info-block .data  {
	display: inline-block;
    vertical-align: top;
}
#timeline.bootstrap .bottom-info .service-info .title,
#timeline.bootstrap .bottom-info .info-block .title {
	width: 35%;
}
#timeline.bootstrap .bottom-info .service-info .data,
#timeline.bootstrap .bottom-info .info-block .data {
    word-wrap: break-word;
    width: 55%;
}	
#timeline.bootstrap .bottom-info .service-info-block .service-info .service-name {
	font-size: 1.17em;
	line-height: 1.3em;
	margin: 5px 0;
	word-wrap: break-word;
}
#timeline.bootstrap .bottom-info .glyphicon {
	margin-right: 10px;
	font-size: 1.2em;
	opacity: 0.8;
}
#timeline.bootstrap.week .bottom-info .glyphicon {
	display: none;
}	
@media (max-width: 640px) {
	#timeline.bootstrap .bottom-info {
		width: 100%;
	}
}



/************************************

	Timeline: Client form step
		
*************************************/
#timeline.bootstrap #client_info_step {
	padding-top: 10px;
}
@media (max-width: 480px){
	#timeline.bootstrap #client_info_step {
		padding-top: 0px;
	}
}	
#timeline.bootstrap #client_info_step .bottom-info {
	margin: 0 auto 0;
}
#timeline.bootstrap .client-info-step-form-container {
	width: 45%;
}
#timeline.bootstrap #client_info_step .bottom-info {
	margin: 0 5% 0 5%;
	width: 40%;
}
/*---  bottom info fix for small-sizes timeline --*/
@media (max-width: 480px){
	#timeline.bootstrap #client_info_step .step-content {
		padding: 0;
		margin: 0;
	}
	#timeline.bootstrap .client-info-step-form-container,
	#timeline.bootstrap #client_info_step .bottom-info {
		margin: 0 0 15px 0 !important;
		padding: 0;		
		width: 100%;
		box-sizing: border-box;
	}	
	#timeline.bootstrap #client_info_step .bottom-info {
		padding: 0 20px;
	}
}	
#widget_content #timeline.bootstrap #client_info_step .step-content {
	padding: 0;
	margin: 0;
}
#widget_content #timeline.bootstrap .client-info-step-form-container,
#widget_content #timeline.bootstrap #client_info_step .bottom-info {
	display: block;
	width: 70%;
	margin: auto;
	box-sizing: border-box;
}

.mobile-widget #widget_content #timeline.bootstrap .client-info-step-form-container,
.mobile-widget #widget_content #timeline.bootstrap #client_info_step .bottom-info {
	width: auto;
}

.mobile-widget #widget_content #timeline.bootstrap {
	margin: 10px;
}

#widget_content #timeline.bootstrap #client_info_step .bottom-info {
	padding: 0 20px;
	margin-top: -30px;
	margin-bottom: 15px;
}


#timeline.bootstrap #client_form .client_form_wrapper,
#timeline.bootstrap #client_form #additional_fields,
#timeline.bootstrap #client_form #redeem_code .promo-container {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	margin-bottom: 20px;	
	padding: 10px 20px;	
	background: #f9f9f9;
	border: 1px solid #eeeeee;
}
#timeline.bootstrap #client_form #redeem_code {
	margin: 0px;
	width: auto;
}

#timeline.bootstrap .buttons_container,
#timeline.bootstrap #submit_button,
#timeline.bootstrap .book-another-button,
#timeline.bootstrap .license {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	margin-bottom: 20px;
}
#timeline.bootstrap .license {
	margin-bottom: 0;
	padding-bottom: 0;
	border: none;
	background: none;
}
#timeline.bootstrap #client_form .client_form_wrapper .zend_form dd input,
#timeline.bootstrap #client_form #additional_fields .zend_form dd input {
	height: auto;
}
#timeline.bootstrap #client_form .client_form_wrapper .zend_form .ui-combobox-toggle {
	height: 36px;
	margin-left: -24px;
}
#timeline.bootstrap #client_form .ui-autocomplete-input {
	margin-right: 23px;
}
#timeline.bootstrap #client_form dt,
#timeline.bootstrap #client_form dt * {
	font-size: 17px;
	margin-top: 6px;
}
#timeline.bootstrap #client_form dl.zend_form dt:first-child,
#timeline.bootstrap #client_form dl.zend_form dt:first-child  * {
	margin-top: 0;
}
#timeline.bootstrap #client_form dt,
#timeline.bootstrap #client_form dt b {
	font-weight: normal;
}
#timeline.bootstrap #client_form input[type=text],
#timeline.bootstrap #client_form select,
#timeline.bootstrap #client_form textarea,
#timeline.bootstrap #additional_fields input[type=text],
#timeline.bootstrap #additional_fields select,
#timeline.bootstrap #additional_fields textarea {
	border-radius: 2px;
	border: 1px solid #cccccc;
	width: 100% !important;
}
#timeline #client_form input[type=text],
#timeline #client_form select {
	padding: 7px 10px;
}
#timeline.bootstrap #client_form #client_phone_number {
	width: 290px !important;
	margin-right: 0px;
}
#timeline #client_form .fixed_prefix {
	width: 10% !important;
	margin: 0;
	padding: 3px 0;
	font-size: 1.3em;
	font-weight: normal;
	text-align: center;
}
#timeline.bootstrap #errors {
	margin: 10px;
	padding-left: 5px;
}
#timeline.bootstrap #errors ul li {
	padding: 5px 0;
	font-size: 1.2em;
}
#timeline.bootstrap .license {
	text-align: center;
}
#timeline.bootstrap #submit_button {
	color: #ffffff;
	font-weight: normal;
}
#timeline.bootstrap #submit_button:hover {
	color: #ffffff;
}
#timeline.bootstrap .book-item:hover .delete-button:hover {
	top: 4px;
}
#timeline.bootstrap .ui-datepicker th {
	padding: 0.7em 0.2em;
}
#timeline.bootstrap .book-another-button .icon {
	background: none;
}
@media (max-width: 480px){
	#timeline.bootstrap #client_form #client_phone_number {
		width: 77% !important;
	}
}	

@media (max-width: 980px) {
	#timeline.bootstrap #client_form #client_phone_number {
		width: 70% !important;
	}
}
	
	
	
/**************************************/
/*                                    */
/*    Мultiple booking plugin         */
/*                                    */
/**************************************/

/* #timeline.bootstrap #client_info_step .bottom-info  analog for multiple booking case */
#timeline.bootstrap #client_info_step #booked_list {
	box-sizing: border-box;
	margin: 0 5% 0 5%;
	width: 40%;
}
#timeline.bootstrap #client_info_step #booked_list .book-item,
#timeline.bootstrap #client_info_step #booked_list .book-item.current-booking {
	box-sizing: border-box;
	display: inline-block;
	float: none;	
	width: 100%;
	margin: 0 10px 10px 0;
	padding: 10px 25px;
	background: #f9f9f9;
	border: 1px solid #eeeeee;	
	border-radius: 0px;
}
#timeline.bootstrap #client_info_step #booked_list .book-item .delete-button.glyphicon {
	font-size: 18px;
	color: #999999;
	background: none;
	top: 0;
	cursor: pointer;
}
#timeline.bootstrap #client_info_step #booked_list .book-item .delete-button.glyphicon:hover {
	color: #ff0000;
}
@media (max-width: 480px){
	#timeline.bootstrap #client_info_step #booked_list {
		width: 100%;
		margin: 0 0 15px 0;
		padding: 10px;
	}
	#timeline.bootstrap #client_info_step #booked_list .book-item,
	#timeline.bootstrap #client_info_step #booked_list .book-item.current-booking {
		display: block;
		margin: 0 0 10px 0;
	}	
	#timeline.bootstrap #client_info_step #booked_list .book-item .delete-button.glyphicon {
		font-size: 25px;
		magin-top: 5px;
		margin-right: 5px;
		cursor: pointer;
	}
		
}	



/***************************************

		About page

***************************************/

.about-page {
	padding: 20px;
}
.about-page .with_padding {
	margin-top: 50px;	
}
.about-page h3 {
	font-size: 1.4em;
	color: #444444;
}
.about-page > h2 {
	color: #ffffff;
	padding: 10px 10px 10px 45px;
	margin: 0 -35px 20px -35px;
}
.about-page .company-address-container {
	margin-top: 30px;
}
.about-page .company-address-container h3 {
	font-size: 19px;
}
.about-page .company-intro {
	font-size: 16px;
	line-height: 1.6em;
}
.about-page #work_hours {
	margin: 0;
}
.about-page #work_hours h3 {
	width: 90%;
	border-bottom: 1px dotted #999999;
	padding-bottom: 5px;
	margin: 0 0 5px 0;
}
.about-page #work_hours table {
	margin: 10px 0 15px 0;
}
.about-page #work_hours .day-name-data, 
.about-page #work_hours .time-data {
	padding: 1px 5px;
	font-size: 14px;
}
.about-page #work_hours table .day-name-data {
	padding-right: 12px;
	font-size: 1.05em;
	line-height: 1.5em;
}
.about-page .button-container {
	margin: 25px 0;
}
.about-page .button-container #save_button.btn.btn-success,
.feedback_add .btn-success,
.feedback-form #Submit {
	border-radius: 0;
	border: none;
	padding: 10px 26px;
	font-size: 20px;
	font-weight: normal;
}
.about-page #map_container,
.about-page #map_canvas {
	box-sizing: border-box;
}
.about-page #map_container {
	margin: 20px -35px 20px -35px;	
} 


@media (max-width: 650px) {
	.about-page h2 {
		margin: 0 -20px 20px -20px;
	}
	.about-page #map_canvas {
		width: 100% !important;
	}
	.about-page #map_container {
		margin: 20px 0;
	}
}

/******************************

		News page
		
*******************************/

.news-page {
	padding: 20px;
	box-sizing: border-box;
	width: 100%;
}
.news-page #news .date,
.news-page #news .caption,
.news-details-page .caption {
	margin: 10px 0;
	font-size: 19px;
	font-weight: normal;
	border-bottom: none;
}
.news-page > h2 {
	margin-left: -15px;
	color: #ffffff;
	padding: 10px;
}
.news-page #news .caption {
	color: #777777;
	margin: 0 0 10px 10px;	
}
.news-page .short_content {
	margin-top: 10px;
}
#news .row .short_content a {
	color: #444444;
}
.news-details-page .caption div {
	margin-top: 5px;
}
.news-page #news .row {
	border-bottom: none;
	margin-bottom: 15px;
}
.news-details-page .content {
	margin-top: 15px;
}
@media (max-width: 650px) {
	.news-page > h2 {
		margin: 0 -20px 20px -20px;
	}
}


/************************************

		Feedbacks page
		
*************************************/

#pageNotifications.ui-state-highlight.ui-corner-all {
	background: #cc2200;
	border: none;
	color: #ffffff;
	padding: 20px;
	margin: 20px 0;
	font-size: 1.1em;
	border-radius: 0px;
}
#pageNotifications.ui-state-highlight.ui-corner-all.success {
	background: #6fb53c;
}
#pageNotifications.ui-state-highlight.ui-corner-all.error {
    background: #aa0000;
}

#pageNotifications .ui-icon {
	display: none;
}

.feedback_list {
	margin: 20px;
}
.feedback_list .feedback {
	width: 350px;
	margin: 0 25px 25px 0;
	vertical-align: top;
}
.feedback_list .feedback .top-part {
	border-bottom: 1px solid #eeeeee;
	margin-bottom: 5px;
	padding-bottom: 3px;
}
.feedback_list .feedback .top-part .image {
	display: inline-block;
	margin: 0 10px 10px 0; 
	width: 80px;
	height: 80px;
	padding: 7px;
	background: #f0f0f0;
	text-align: center;
}
.feedback_list .feedback .top-part .image img {
	max-width: 100%;	
	max-height: 100%;
	vertical-align: center;
}
.feedback_list .feedback .top-part .info {
	display: inline-block;
}
.feedback_list .feedback .top-part .info .user-name {}
.feedback_list .feedback .top-part .info .date-time {}
.feedback_list .feedback .top-part .info .feedback-link {}
.feedback_list .feedback .bottom-part {}
.feedback_list .feedback .bottom-part .description {
	font-size: 0.9em;
	opacity: 0.9;
}
.feedback-form {
	margin: 30px 20px;
}
.feedback-form .user-data {
	vertical-align: bottom;
}
.feedback-form .user-data img,
.feedback-form .user-data .user-name {
	float: none;
	display: inline-block;
	border-bottom: 1px dotted #999999;
}
.feedback-form .user-data img {
	margin: 5px;
	padding: 10px;
	background: #f9f9f9;
	border: 1px solid #eeeeee;
}
.feedback-form .user-data .user-name {
	font-weight: normal;
	font-size: 1.5em;
	vertical-align: bottom;
	display: inline-block;
}
.feedback-form .zend_form dt label {
	margin-top: 10px;
	font-weight: normal;
	font-size: 1.2em;
}
.feedback-form dd input[type='text'],
.feedback-form dd textarea {
	width: 350px;
	border-radius: 0;
}
.feedback-form #add_comment {
	padding: 0 10px;
}
.feedback-form #Submit-element {
	margin-top: -40px;
}
.feedback_add {
	text-align: right;
	margin-right: 20px;
}

/*-------   mobile ------*/
@media (max-width: 640px){
	.feedback-form * {
		box-sizing: border-box;
	}
	.feedback-form {
		box-sizing: border-box;
		width: 100% !important;
		padding: 20px;
		margin: 0;
	}
	.feedback-form dd input[type='text'],
	.feedback-form dd textarea {
		box-sizing: border-box;
		margin: 10px;
		width: 100% !important;
		border-radius: 0;
	}
}	



/******************************

		Video conversation page
		
*******************************/

.video-conversation-page {
	padding: 20px 10px 100px 20px;
}
.video-conversation-page h2 {
	font-size: 1.4em;
	line-height: 1.4em;	
}
.video-conversation-page label {
	font-weight: normal;
	padding: 10px;
}
.video-conversation-page #save_button {
	border-radius: 0;
	font-weight: normal;
	font-size: 1.2em;
}
.video-conversation-page #code {
	border-radius: 0 !important;
	padding: 10px;
	border: 1px solid #cccccc;
	height: 30px !important;
	
}
/*-------   mobile ------*/
@media (max-width: 640px){
	.video-conversation-page {
		padding: 20px;
	}
	.video-conversation-page form div {
		box-sizing: border-box;
		width: 100% !important;
		float: none !important;
		font-size: 1.1em;
	}
	.video-conversation-page form > div {
		margin: 10px 0 !important;
	}
	.video-conversation-page #code {
		width: 100% !important;
	}
	.video-conversation-page label {
		padding: 20px 0;
	}
}


/******************************

		User/events page
		
*******************************/

#companies .ui-state-active {
	background: none;
	border: none;
}
#companies .ui-widget {
	font-family: "Open Sans", sans-serif;		
}
#companies .ui-widget-content {
	background: none;
	border: none;
}
#companies a {
	color: #777777 !important;
	text-decoration: underline;
	margin: 10px 0;
	font-size: 1.3em;
}
#companies .ui-accordion-content > div > div {
	margin-bottom: 20px;
	border-bottom: 1px dotted #999999;
	padding-bottom: 7px;
}
#companies h3 a {
	text-transform: capitalize;
	font-size: 1.5em;
}	
#companies h3.ui-state-active a {
	color: #ffffff !important;
}
#companies .ui-accordion-content .eventName {
	font-weight: normal;
	font-size: 1.2em;
}
#companies .ui-corner-all {
	border-radius: 0px;
	border: none;
}
.success-message {
	background: #f9f9f9 !important;
	border: 1px solid #eeeeee !important;
	border-radius: 0px; 
}
.success-message img.image {
	display: none;
}
.success-message .glyphicon {
	display: inline-block;
	padding: 5px;
	font-size: 30px;
	color: #999999;
	top: 7px;
}
.success-message .text {
	font-size: 1.3em;
	padding: 5px 0 7px 25px;
}

/******************************

		Payment plugin pages
		
*******************************/

#booking-message-div {
	padding: 50px 20px;
}
#booking-message-div,
#booking-message-div h4 {
	font-size: 1.2em;
	line-height: 1.3em;
}
#booking-message-div,
#booking-result-div  {
	background: none;
	color: #777777 !important; 
	border: none !important;
}
#booking-message-div.ui-state-error {
	border: 1px solid #ff0000;
	padding: 20px;
	border-radius: 0;
}
#booking-message-div.ui-state-highlight {
	border: none !important;
	color: #999999;
	background: none;
}
.payment_redirect_message {
	margin: 20px 0;
	font-size: 17px;
}
#success-button {
	font-size: 1.2em;
}

body.iframe  {
	background: none;
}
body.iframe.fb-widget .company-time {
	display: block;
    float: none;
    margin: 5px 10px 10px 0;
    position: relative;
    text-align: right;
}
body.iframe.fb-widget #timeline.bootstrap #time_select {
	display: inline-block !important;
	width: 400px;
	min-width: 400px;
	float: left;
	margin: 0;
}

.btn-success, .btn-success:hover {
	background: #c9c9c9;
	text-shadow: none;
	border-radius: 0;
	border: 1px solid transparent;
}
.btn-success:hover {
	background: #a9a9a9;
}
/******************************

		AUXILIARY INFO
		
*******************************/



/*----   PC/notebook  -----*/
@media (min-width: 980px) {
	
}
/*------ iPad --------*/
@media (max-width: 690px) and (min-width: 640px) {
	
}
/*-------   mobile: horizontal only  ------*/
@media (max-width: 640px) and (min-widht: 380px ){
	
}
/*-------   mobile: vertical and horizontal ------*/
@media (max-width: 640px) {
	
}
/*-------   mobile: vertical only ------*/
@media (max-width: 480px){
	
}