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

/* ***** FONT AWESOME OVERRIDES - UGLY, DO NOT USE ***** */
/* .fa-angle-left:before { content: "\f1b2"; } */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');

BODY { font-family: 'Josefin Sans', sans-serif; }

#footer .cookies .wrapper a.btn { color: #ffffff; background-color: #0a6363; }
#footer .cookies .wrapper a.btn:hover { color: #ffffff; background-color: #0a6363; }

#footer .cookies .wrapper a.link { color:#666666; }

#main-buttons .btn { border-radius: 10px; text-transform: uppercase; font-weight: 700; line-height: 1; padding: 6px 25px 4px 25px; }

#main-buttons .wrapper .bar .btn.book:after { font-size: 18px; margin-left: 10px; margin-top: -5px; }

.header A.btn--sign-up, .header A.btn--sign-up:HOVER  { color: #0a6363; }

#sb-timeline #steps #steps-content #sb_back_button A { color: #0a6363; }

#sb-timeline #steps #steps-content .step-content  .btn { border-radius: 10px; text-transform: uppercase; font-weight: 700; line-height: 1; padding: 6px 25px 4px 25px; }

#sb-timeline #steps #steps-content .detail-step .btn  { color: #ffffff; background-color: #0a6363; border-radius: 10px; text-transform: uppercase; font-weight: 700; line-height: 1; padding: 6px 25px 4px 25px; }

.invoice-pay-page-grid_item.right-block .right-block--footer .btn-bar .btn { color: #ffffff; background-color: #0a6363; border-radius: 10px; text-transform: uppercase; font-weight: 700; padding-top: 6px; }

#sb-timeline #steps #steps-content .detail-step .btn.btn-danger { background: #d9534f; }
#sb-timeline #steps #steps-content .detail-step .btn.btn-danger:hover { background: #d74945; }

#sb-timeline .steps-nav li a { color: #ffffff; }
#sb-timeline .steps-nav li a .content .title-small { text-transform: uppercase; font-size: 14px; }
#sb-timeline .steps-nav li a .content .title-sub { text-transform: uppercase; font-size: 10px; }

/* ***** To override the arrow in green nav bar. I do not want to load a remote image, and icons are too wide. ***** */
#sb-timeline .steps-nav li.passed:after,
#sb-timeline .steps-nav li:first-child.passed:after { height: 88px; top: 0; margin-top: 0; filter: contrast(100%) brightness(0%) invert(100%) drop-shadow(rgb(255, 255, 255) 0px 0px 0px); background-size: 10px 88px; }

#sb-timeline #steps #time-settings #sb_booking_company_time .timezone-panel .timezone-block { font-size: 12px; }

#sb-timeline #steps #steps-content .step-content { -ms-flex-pack: center; justify-content: center; flex-direction: row; }

#sb-timeline #steps #steps-content #sb_booking_content .timeline-sidebar .service-item .item__tab,
#sb-timeline #steps #steps-content #sb_booking_content .category-step .item__tab,
#sb-timeline #steps #steps-content #sb_booking_content .service-step .item__tab { background-color: #0a6363; color: #ffffff; border-radius: 10px; }

#sb-timeline #steps #steps-content #sb_booking_content .timeline-sidebar .service-item .item__tab .item__picture,
#sb-timeline #steps #steps-content #sb_booking_content .category-step .item__tab .item__picture,
#sb-timeline #steps #steps-content #sb_booking_content .service-step .item__tab .item__picture { border-radius: 10px 10px 0 0; background-color: rgba(255,255,255,0.6); }

#sb-timeline #steps #steps-content #sb_booking_content .timeline-sidebar .service-item .item__tab .modal,
#sb-timeline #steps #steps-content #sb_booking_content .category-step .item__tab .modal,
#sb-timeline #steps #steps-content #sb_booking_content .service-step .item__tab .modal { background-color: #ffffff; color: #0a6363; border-radius: 10px; }

#sb-timeline #steps #steps-content #sb_booking_content .item__read-more { background-color: #0a6363; color: rgba(255,255,255,0.75); bottom: 0; font-size: 14px; padding: 5px; font-weight: 700; }
#sb-timeline #steps #steps-content #sb_booking_content .item__read-more:before { background: linear-gradient(90deg,hsla(0,0%,100%,0) 0,#0a6363 68%,#0a6363); }
#sb-timeline #steps #steps-content #sb_booking_content .item__description.short {}

#sb-timeline #steps #steps-content #sb_booking_content .paid-attribute-wrapper .paid-attribute-step #sb_attribute_list_container .product-item .flex-row .paid-attr__description .read-more { font-size: 14px; font-weight: 700; }

#sb-timeline #steps #steps-content #sb_booking_content .datetime-step .time-legend .circle { background-color: transparent; vertical-align: top; }
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step .time-legend .circle:before { content: "\f6d1"; font-family: Font Awesome\ 5 Pro; font-weight: 700; color: #207570; font-size: 16px; }

#sb-timeline #steps #steps-content #sb_booking_content .paid-attribute-wrapper .paid-attribute-step #sb_attribute_list_container .product-item .flex-row .paid-attr__description { height: 92px; }

#sb-timeline #steps #steps-content #sb_booking_content .paid-attribute-wrapper .paid-attribute-step #sb_attribute_list_container .product-item .flex-row .item-time { padding-left: 10px; }

#sb-timeline #steps #steps-content .detail-step select,
#sb-timeline #steps #steps-content .detail-step input,
#sb-timeline #steps #steps-content .detail-step textarea { border-radius: 10px; }

#sb-timeline #steps #steps-content .detail-step .accordion { border-radius: 10px; border: solid 2px #e7e7e7; }

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

 #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 */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}