body:has(a[href*="/service/21/"]) #sb_time_slots_container > div > a,
#sb_main:has(a[href*="/service/21/"]) #sb_time_slots_container > div > a {
    transform: scale(2);          /* Keep the 3x size */
    transform-origin: top left;   /* Adjust scaling from top-left */
    position: relative;           /* Enable precise movement */
    left: 150px;                    /* Change this value to move right (positive) or left (negative) */
    top: 0px;                     /* Optional: adjust vertical position */
}



body:has(a[href*="/service/21/"]) 
#sb_booking_info > div > div > div.booking-info.mg > div > table > tbody > tr.booking-info--item.booking-info--item_date-start,
#sb_main:has(a[href*="/service/21/"]) 
#sb_booking_info > div > div > div.booking-info.mg > div > table > tbody > tr.booking-info--item.booking-info--item_date-start {
    display: none !important;
}



body:has(a[href*="/service/21/"]) #sb_timeview_container > div > div > div > div > div.container-caption,
#sb_main:has(a[href*="/service/21/"]) #sb_timeview_container > div > div > div > div > div.container-caption {
    display: none !important;
}



body:has(a[href*="/service/21/"]) #sb_time_slots_container > div > a,
#sb_main:has(a[href*="/service/21/"]) #sb_time_slots_container > div > a {
    transform: scale(2);
    transform-origin: center;
    display: inline-block;
}




body:has(a[href*="/service/21/"]) #sb_time_slots_container > div > a,
#sb_main:has(a[href*="/service/21/"]) #sb_time_slots_container > div > a {
    color: transparent !important;
    text-shadow: none !important;
    position: relative;
}

/* Inject replacement text */
body:has(a[href*="/service/21/"]) #sb_time_slots_container > div > a::after,
#sb_main:has(a[href*="/service/21/"]) #sb_time_slots_container > div > a::after {
    content: "jetzt buchen"; /* change to 'jetz buchen' if you really want the short form */
    color: #000 !important;  /* or inherit if needed */
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}


#sb_main:has(a[href*="/service/21/"]) #sb_dateview_container > div,
body:has(a[href*="/service/21/"]) #sb_dateview_container > div {
    display: none !important;
}


#main-buttons > div > div > div > a {

border-radius: 12px !important;
    transition: all 0.3s ease;
}

#main-buttons > div > div > div > a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#main-buttons > div > div > h1 {
    font-size: 4rem !important; /* Makes the heading significantly larger */
}



#sb_provider_step_container .provider-item footer a {

border-radius: 12px !important;
    transition: all 0.3s ease;
}

#sb_provider_step_container .provider-item footer a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


#sb_category_step_container .category-item footer a {
    border-radius: 12px !important;
    transition: all 0.3s ease;
}

#sb_category_step_container .category-item footer a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}





#sb_service_step_container .service-item footer a {
    border-radius: 12px !important; /* Adjust the radius value (e.g., 5px, 20px) as needed */
    transition: all 0.3s ease;
}

#sb_service_step_container .service-item footer a:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}




/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page 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 */
}


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