/* no promo checkbox */ 
#sb_terms_and_conditions > div > div.promotions-letter-flag.v2{
display:none!important;
}
 
	/* no header and book button */


#main-buttons .wrapper .bar {
display:none!important;
}
#header .nav-trigger.toggle-mnu {
display:none!important;
}

#main #main-buttons .column .wrapper .inner .company-name {
display:none!important;
} 

@media (min-width: 1000px) {
#sb_sidebar_container {
display: flex !important;
    visibility: visible !important;
    width: 25%;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step .col-md-9.col-md-12 {
    padding: 0 5px;
    width: 75%;
}
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step>[class*=col-] {
    width: fit-content;
}}
@media (max-width: 1000px) {
    /* 1. Set main container to Flex and Column */
    #sb_datetime_step_container {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Move the entire second container (Sidebar + Times) to the TOP for now */
    #sb_datetime_step_container > div:nth-child(2) {
        display: contents !important; /* This breaks the container div so its children can be ordered globally */
    }

    /* 3. The Sidebar (Inside div 2) - PLACE AT TOP */
    #sb_sidebar_container {
        order: 1 !important;
        display: block !important; /* Force visibility */
        width: 100% !important;
    }

    /* 4. The Original Top Div (Calendar) - PLACE IN MIDDLE */
    #sb_datetime_step_container > div:nth-child(1) {
        order: 2 !important;
        width: 100% !important;
    }

    /* 5. The Time Slots Container (Inside div 2) - PLACE AT BOTTOM */
    #sb_datetime_step_container > div:nth-child(2) .col-md-9 {
        order: 3 !important;
        width: 100% !important;
    }

    /* Clean up Bootstrap row layout */
    #sb_datetime_step_container > div:nth-child(2) > .row {
        display: contents !important;
    }
}   

/* This targets both the names of the days and the date blocks */
#sb_dateview_container .calendar .weeks-name > div,
#sb_dateview_container .calendar .weeks-date > div {
    width: 100% !important;
    float: none !important;
    display: block !important;
    clear: both !important;
}

/* Ensure the 'hidden' classes don't accidentally hide the 
   extra weeks now that we are stacking them */
#sb_dateview_container .calendar .hidden-xs,
#sb_dateview_container .calendar .hidden-sm {
    display: block !important;
}

/* Optional: Add a little spacing between the stacked weeks 
   so they don't look like one giant list */
#sb_dateview_container .calendar .weeks-date > div {
    margin-bottom: 20px;
}


/* 1. Hide the 2nd and 3rd week name containers */
#sb_dateview_container .weeks-name > div:nth-child(2),
#sb_dateview_container .weeks-name > div:nth-child(3) {
    display: none !important;
}

/* 2. Hide the 2nd and 3rd week date containers */
#sb_dateview_container .weeks-date > div:nth-child(2),
#sb_dateview_container .weeks-date > div:nth-child(3) {
    display: none !important;
}

/* 3. Ensure the 1st week takes up the full width */
#sb_dateview_container .weeks-name > div:nth-child(1),
#sb_dateview_container .weeks-date > div:nth-child(1) {
    width: 100% !important;
    display: block !important;
}

/*available slot color*/
#sb-timeline #steps #steps-content #sb_booking_content .datetime-step #sb_timeview_container .timeline-wrapper #sb_time_slots_container .slot a { 
    background: #F6F6F5;
}
#sb_timeview_container > div > div > div > div > div.time-legend{
display:none!important;
}