/* front display for appointment booking */


/*google font*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{
    line-height: 1.5!important;
    letter-spacing: 0!important;
    font-family: 'Inter', sans-serif!important;
}

/*Start--> appointment calendar css*/
.apo_modal-header{
    padding: 10px 20px;
}
.apo_modal-content {
    border-radius: 5px;
/*    overflow: hidden;*/
    border: 0;
}

.apo_modal .apo_modal-dialog {
    width: -webkit-fill-available;
}

.appointment_timingpopup002{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
}

.appointment_timingpopup002 .calendar_picker002 {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--bg-front-primary);
    padding: 25px 20px;
}

.appointment_timingpopup002 .calendar_picker002 .product_calenderimg {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.appointment_timingpopup002 .calendar_picker002 .product_calenderimg .image {
    width: 85px;
    height: 85px;
    border: none;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
}

.appointment_timingpopup002 .calendar_picker002 .product_calenderimg .image img {
    width: 100%;
    height: 100%;
}

.appointment_timingpopup002 .calendar_picker002 .product_title002 {
    text-align: center;
    color: #fff;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker {
    display: inline-block;
    margin: auto;
    background-color: transparent;
    padding: 0px;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-calendar {
    margin: auto;
    width: 100%;
    padding: 16px;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-calendar a {
    text-decoration: none;
    color: #fff;
    padding: 5px 7px;
    border-radius: 5px;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-calendar .ui-datepicker-today a {
    color: #2399c8;
    background: #ffffff;
}


.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-calendar .ui-state-active {
    color: var(--bg-front-primary);
    background: var(--bg-front-secondary);
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-header {
    margin-bottom: 20px;
    color: var(--bg-front-primary);
    font-size: 18px;
    overflow: hidden;
    font-weight: 500;
    background: white;
    text-align: center;
    border-radius: 5px;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-prev {
    float: left;
    line-height: 38px;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-next {
    float: right;
    line-height: 38px;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-year,
.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-month {
    line-height: 40px;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker .ui-datepicker-month {
    margin-right: 5px;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker thead {
    color: #fff;
}

.appointment_timingpopup002 .calendar_picker002 .ui-datepicker-prev,
.appointment_timingpopup002 .calendar_picker002 .ui-datepicker-next{
   color: var(--bg-front-primary);
    background: var(--bg-front-secondary);
    padding: 1px 17px;
    font-size: 22px;
    cursor: pointer;
}

.appointment_timingpopup002 .calendar_picker002 tbody,
.appointment_timingpopup002 .calendar_picker002 td,
.appointment_timingpopup002 .calendar_picker002 tfoot,
.appointment_timingpopup002 .calendar_picker002 th,
.appointment_timingpopup002 .calendar_picker002 thead,
.appointment_timingpopup002 .calendar_picker002 tr {
    padding: 5px;
}

/*End--> appointment calendar css*/

/*Start--> timing setting css*/
.appointment_timingpopup002 .time_picker002{
    background: #f5f5f5;
    width: 100%;
    height: 100%;

}

.appointment_timingpopup002 .time_picker002 .time_setting002{
    padding: 20px 20px;
    padding-bottom: 0;
}

.appointment_timingpopup002 .time_picker002 .apo_tab-content{
    padding: 0px 20px;
    overflow-y: auto;
    width: 100%;
    margin-bottom: 20px;
    height: 380px;
}

.appointment_timingpopup002 .time_picker002 .headin_top002 h5{
    color: #000;
    font-size: 17px;
    margin-bottom: 15px;
    font-weight: 400;
}

.appointment_timingpopup002 .time_picker002 .apo_nav {
    display: flex;
    gap: 8px;
}

.appointment_timingpopup002 .time_picker002 .apo_nav-link {
    font-size: 14px;
    padding: 2px 16px;
    border: 1px solid #dbdee3;
    color: #6b7280;
    background: #fff;
}

.appointment_timingpopup002 .time_picker002 .apo_nav-pills .apo_nav-link.apo_active,
.appointment_timingpopup002 .time_picker002 .apo_nav-pills .apo_show>.apo_nav-link {
    color: #ffffff;
    border-color: var(--bg-front-primary);
    background-color: var(--bg-front-primary);
}

.appointment_timingpopup002 .time_picker002 .apo_list-group{
    gap: 10px;
}

.appointment_timingpopup002 .time_picker002 .time_slote002{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background-color: #fff;
    height: 38px;
    padding: 0 7px;
    cursor: pointer;
    color: #555;
    border-radius: 6px;
    font-size: 14px;
    line-height: 22px;
    transition: all .3s;
}

.appointment_timingpopup002 .time_picker002 .apo_list-group.active .time_slote002{
    background: var(--bg-front-primary);
    color: #fff;
}

.appointment_timingpopup002 .time_picker002 .time_slotetime002{
    width: 300px;
    text-align: center;
    font-weight: 400;
    font-size: 14px;
}

.appointment_timingpopup002 .time_picker002 .time_slotetext002{
    position: relative;
    border: 1px solid #ddd;
    color: #555;
    background-color: var(--bg-front-secondary);
    text-transform: uppercase;
    padding: 0 8px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    height: 20px;
    line-height: 18px;
    overflow: hidden;
    z-index: 0;
}

.appointment_timingpopup002 .time_picker002 .timeslote_quantityselect002{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.appointment_timingpopup002 .time_picker002 .timeslote_quantityselect002 .text h5{
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 17px;
    font-weight: 400;
}

.appointment_timingpopup002 .time_picker002 .apo_form-select{
    padding: 2px 30px 2px 15px;
    box-shadow: none;
    font-size: 14px;
    color: #6b7280;
}

.appointment_timingpopup002 .time_picker002 .timepicker_label002 h5{
    margin-bottom: 15px;
    padding: 0;
    color: #000;
    font-size: 17px;
    font-weight: 400;
}

.appointment_timingpopup002 .time_picker002 .country_timingbox002{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.appointment_timingpopup002 .time_picker002 .country_timingbox002 .apo_form-switch .apo_form-check-input {
    float: none;
    margin-left: 6px;
    margin-top: 6px;
}

.appointment_timingpopup002 .time_picker002 .apo_form-switch .apo_form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    border-color: rgba(0,0,0,.25);
}

.appointment_timingpopup002 .time_picker002 .apo_form-switch .apo_form-check-input:focus:checked{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    border-color: var(--bg-front-primary);
}


.appointment_timingpopup002 .time_picker002 .apo_form-switch .apo_form-check-input {
    box-shadow: none;
    width: 40px;
    height: 22px;
    cursor: pointer;
}

.appointment_timingpopup002 .time_picker002 .apo_form-check-input:checked {
    background-color: var(--bg-front-primary);
    border-color: var(--bg-front-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* .appointment_timingpopup002 .time_slotebutton002{
    padding: 15px 20px;
    border-top: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: end;
}

.appointment_timingpopup002 .time_slotebutton002 .apo_btn {
    background: var(--bg-front-primary);
    color: #fff;
    border: 1px solid var(--bg-front-primary);
    padding: 4px 12px;
    font-size: 16px;
    box-shadow: 0px 0px 17px 0px #bebebe;
} */

/*End--> timing setting css*/

/*Start--> tcustomer detail popup css*/
.appointment_detaillist002{
    padding: 20px;
    width: 100%;
    height: 100%;
}

.appointment_detaillist002 .appointment_message002{
    margin-bottom: 20px;
    color: #1F2124;
}

.apo_modal-title {
    color: #1F2124;
}

.appointment_detaillist002 .appointment_message002 h5{
    margin-bottom: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1F2124;
}

.appointment_detaillist002 .details_items002{
    display: flex;
    gap: 10px;
    align-items: center;
}

.appointment_detaillist002 ul{
    gap: 20px;
}

.appointment_detaillist002 .details_items002 .icon{
    background: var(--bg-front-primary);
    width: 35px;
    min-width: 35px;
    height: 35px;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
    border-radius: 100%;
    box-shadow: 0px 0px 17px 0px #bebebe;
}

.appointment_detaillist002 .details_items002 .text{
    font-size: 16px;
    font-weight: 500;
    color: #212121;
}

.appointment_detaillist002 .appointment_note002{
    font-size: 14px;
    color: #cf3b3b;
    margin-top: auto;
    margin-bottom :40px;
    font-weight: 400;
}
.appointment_detaillist002 .appointment_infolist002{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.customerinfo_popup002 .customer_details002{
/*    padding: 20px;*/
    border-left: 1px solid #dee2e6;
    width: 100%;
    height: 100%;
}
.customerinfo_popup002 .customer_details002 .scrollable_detail002{
    height: 490px;
    overflow-x: hidden;
    padding: 20px;
    padding-bottom: 0;
    width: 100%;
}

/* .customerinfo_popup002 .customer_details002 .apo_fixed-bottom4{
    padding: 0px 20px 20px 20px;
} */

.customerinfo_popup002 .customer_details002 .iti {
    display: block; 
}

.customerinfo_popup002 .customer_details002 .apo_form-control,
.customerinfo_popup002 .customer_details002 .apo_form-check-input,
.customerinfo_popup002 .customer_details002 .apo_form-select{
    box-shadow: none;
}

.customerinfo_popup002 .customer_details002 .apo_form-control:focus,
.customerinfo_popup002 .customer_details002 .apo_form-check-input:focus,
.customerinfo_popup002 .customer_details002 .apo_form-select:focus{
    border-color: var(--bg-front-primary);
}

.customerinfo_popup002 .customer_details002 .apo_form-check-input:checked {
    background-color: var(--bg-front-primary);
    border-color: var(--bg-front-primary);
}

.customerinfo_popup002 .customer_details002 .customer_detailbutton002 {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: end;
    padding: 20px;
}

.customerinfo_popup002 .customer_details002 .apo_btn {
    background: var(--bg-front-primary);
    color: #fff;
    border: 1px solid var(--bg-front-primary);
    padding: 6px 16px;
    font-size: 16px;
    box-shadow: 0px 0px 17px 0px #bebebe;
}
/*End--> tcustomer detail popup css*/

/*Start--> Select team member popup css*/
.selectteam_popup002 .selectteam_details002 {
    width: 100%;
    height: 100%;
}

.selectteam_popup002 .selectteam_details002 .scrollable_detail002 {
    height: 490px;
    overflow-x: hidden;
    padding: 20px;
    width: 100%;
}

.selectteam_popup002 .selectteam_details002 .apo_form-control,
.selectteam_popup002 .selectteam_details002 .apo_form-check-input,
.selectteam_popup002 .selectteam_details002 .apo_form-select {
    box-shadow: none;
}

.selectteam_popup002 .selectteam_details002 .apo_form-control:focus,
.selectteam_popup002 .selectteam_details002 .apo_form-check-input:focus,
.selectteam_popup002 .selectteam_details002 .apo_form-select:focus{
    border-color: var(--bg-front-primary);
}

/* .selectteam_popup002 .selectteam_details002 .apo_fixed-bottom4 {
    padding: 0px 20px 20px 20px;
    text-align: end;
} */

.selectteam_popup002 .selectteam_details002 .apo_btn {
    background: var(--bg-front-primary);
    color: #fff;
    border: 1px solid var(--bg-front-primary);
    padding: 6px 16px;
    margin-top: 15px;
    font-size: 16px;
    box-shadow: 0px 0px 17px 0px #bebebe;
}
/*End-->  Select team member popup css*/

/*Start--> Wizard popup css*/
input.invalid {
    background-color: #ffdddd;
}

.appointment_tabwizard002 {
    display: none;
}

.appointment_stepcircle002 {
    text-align: left;
    padding: 27px;
    background: #f5f5f5;
    border-top: 1px solid #dee2e6;
}

.appointment_stepcircle002 .appointment_stepwizard002 {
    position: relative;
    height: 18px;
    width: 18px;
    margin: 0 2px;
    background-color: #fff;
    border: 1px solid #adadad;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.4;
}

.appointment_stepcircle002 .appointment_stepwizard002:before{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #adadad;
    border-radius: 30px;
    top: 3px;
    left: 3px;
}

.appointment_stepcircle002 .appointment_stepwizard002.active {
    opacity: 1;
}

.appointment_stepcircle002 .appointment_stepwizard002.appointment_finish002 {
    background: #ffdddd;
    border-color: var(--bg-front-primary);
    opacity: 1;
}

.appointment_stepcircle002 .appointment_stepwizard002.appointment_finish002:before {
    background-color: var(--bg-front-primary);
}

.appointment_btnwizard002 {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: end;
    padding: 20px;
    float: right;
}

.appointment_btnwizard002 .apo_btn{
    background: var(--bg-front-primary);
    color: #fff;
    border: 1px solid var(--bg-front-primary);
    padding: 6px 16px;
    font-size: 16px;
    box-shadow: 0px 0px 17px 0px #bebebe;
}
.appointment_btnwizard002 .apo_btn:first-child{
    background: #ffffff;
    color: #838383;
    border: 1px solid #bbbbbb;
    box-shadow: 0px 0px 17px 0px #bebebe;
}
/*End--> Wizard popup css*/

/*tag complite css*/
.apo_form-select {
    min-height: auto;
}
input.apo_form-control[type="text"],
input.apo_form-control[type="email"],
input.apo_form-control[type="password"],
input.apo_form-control[type="number"],
input.apo_form-control[type="tel"],
input.apo_form-control[type="date"],
input.apo_form-control[type="month"],
input.apo_form-control[type="week"],
input.apo_form-control[type="time"],
input.apo_form-control[type="datetime"],
input.apo_form-control[type="datetime-local"],
textarea.apo_form-control {
    border-radius: 4px;
    display: block;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    padding: 6px 12px;
    vertical-align: middle;
    width: 100%;
    min-height: auto;
    background-color: #fff;
    border: 1px solid #ced4da;
    outline: none;
    height: auto;
    letter-spacing: 0;
    box-shadow: none;
    -webkit-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
input.apo_form-check-input[type="radio"]{
    position: relative;
    width: 1em!important;
    max-width: 1em!important;
    height: 1em!important;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, .25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}
input.apo_form-check-input[type="checkbox"]{
    width: 40px!important;
    max-width: 40px!important;
    height: 22px!important;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    border: 1px solid rgba(0, 0, 0, .25);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
}
input.apo_form-check-input[type="checkbox"]:hover{
    background-color: inherit;
    border-color: inherit;
    color: inherit;
}
input.apo_form-check-input[type="checkbox"]:checked{
    background-color: var(--bg-front-primary);
    border-color: var(--bg-front-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
input.apo_form-check-input[type="checkbox"]:checked:before {
    display: none;
}
input.apo_form-check-input[type="radio"]:checked{
    background-color: var(--bg-front-primary);
    border-color: var(--bg-front-primary);
    color: #fff;
}
input.apo_form-check-input[type="radio"]:hover {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
}
input.apo_form-check-input[type="radio"]:checked:before {
    display: none;
}
input.apo_form-control[type="text"]:focus,
input.apo_form-control[type="email"]:focus,
input.apo_form-control[type="password"]:focus,
input.apo_form-control[type="number"]:focus,
input.apo_form-control[type="tel"]:focus,
input.apo_form-control[type="date"]:focus,
input.apo_form-control[type="month"]:focus,
input.apo_form-control[type="week"]:focus,
input.apo_form-control[type="time"]:focus,
input.apo_form-control[type="datetime"]:focus,
input.apo_form-control[type="datetime-local"]:focus,
textarea.apo_form-control:focus,
select.apo_form-select:focus,
input.apo_form-control[type="text"]:hover,
input.apo_form-control[type="email"]:hover,
input.apo_form-control[type="password"]:hover,
input.apo_form-control[type="number"]:hover,
input.apo_form-control[type="tel"]:hover,
input.apo_form-control[type="date"]:hover,
input.apo_form-control[type="month"]:hover,
input.apo_form-control[type="week"]:hover,
input.apo_form-control[type="time"]:hover,
input.apo_form-control[type="datetime"]:hover,
input.apo_form-control[type="datetime-local"]:hover,
textarea.apo_form-control:hover,
select.apo_form-select:hover {
    background-color: #fff;
    border-color: var(--bg-front-primary);
    outline: none;
}

button:hover,
input[type="button"]:hover, 
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
    outline: 1px dotted!important;
    outline-offset: -2px!important;
}

/* --- Scrollbar Colors --- */

.customerinfo_popup002 .customer_details002 .scrollable_detail002::-webkit-scrollbar,
.appointment_timingpopup002 .time_picker002 .apo_tab-content::-webkit-scrollbar{
    background-color: #fff;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    width: 8px;
  }

.customerinfo_popup002 .customer_details002 .scrollable_detail002::-webkit-scrollbar-thumb,
.appointment_timingpopup002 .time_picker002 .apo_tab-content::-webkit-scrollbar-thumb {
    background-color: #c2c2c2;
    border-radius: 10px;
}

.calendar_picker002 tfoot th, .calendar_picker002 thead th {
    font-weight: 600;
    color: #fff;
}

/* ---//--- */


/*Start-->  Template CSS*/

.book_btn_show {
    display: none;
}

.appointment_book-btn .apo_btn {
    background: var(--bg-front-primary);
    color: #ffffff;
    font-size: 16px;
    padding: 12px 12px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border: 1px solid transparent;
}

.disabled-date-style {
    color: #142823;
    cursor: not-allowed;
}

.slot_disabled {
    pointer-events: none;
}



.slot_btn {
    color: white;
    background-color: var(--bg-front-primary);
    padding: 5px;
    border-radius: 3px;
}
.appointment_timingpopup002 .time_picker002 .apo_list-group {
    gap: 10px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}

.appointment_timingpopup002 .time_picker002 .apo_list-group .slote_disabled,
.appointment_timingpopup002 .time_picker002 .apo_list-group .left_slot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 5px 5px;
    justify-content: right;
    align-items: center;
    height: 100%;
}

.appointment_timingpopup002 .time_picker002 .apo_list-group .slote_disabled {
    background: #00020159;
    color: #ffffff;
}

.appointment_timingpopup002 .time_picker002 .apo_list-group .slote_disabled span,
.appointment_timingpopup002 .time_picker002 .apo_list-group .left_slot span {
    border: 1px solid var(--bg-front-primary);
    color: #fff;
    background-color: var(--bg-front-primary);
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 13px;
}

.appointment_timingpopup002 .time_picker002 .apo_list-group .left_slot span {
    background-color: var(--bg-front-secondary);
    color: #555;
    border: none;
}


.iti--separate-dial-code div:empty{
    display :block!important
}


#snackbar,
#snackbar2 {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

#snackbar.show,
#snackbar2.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
}



/* .ui-datepicker-calendar {
    display: none;
}

.ui-datepicker-week-col {
    display: table-header-group;
    text-align: center;
    font-weight: bold;
}

.ui-datepicker-week-col span {
    display: table-cell;
}

.blocked-day {
    background-color: #FFD2D2 !important;
    color: #FF0000;
}
 */








/*End-->  Template CSS*/

/*Manually Book Appointment popup css*/

.apo_h5, h5 {
    font-size: 20px!important;
    margin-top: 0!important;
    font-weight: 500!important;
}

.modal-body {
    padding: 20px;
}

.apo_modal-body {
    text-align: left;
}


.apo_form-label {
    font-weight: 400 !important;
    font-size: 16px!important;
}

.team_members{
    text-align: left;
}

.apo_form-select {
    box-shadow: none!important;
}


/*START select team member list <--==============================-->*/

.team_memberlist h4{
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #1F2124;
}

.apo_team-item{
  padding: 0;
  margin: 0;
  position: relative;
/*  overflow: hidden;*/
  background: transparent;
}

.apo_team-item label{
  display: block;
}

.apo_team-item .apo_team-image{
    width: 60px;
    height: 60px;
    margin: auto;
    margin-bottom: 10px;
    border-radius: 100%;
    overflow: hidden;
}

.apo_team-item img{
  width: 100%;
  height: 100%;
}

.apo_team-item input{
  position: absolute;
  visibility: hidden
}
.apo_team-item .apo_team-inner{
  cursor: pointer;
  text-align: center;
  padding: 10px;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.apo_team-item label>input:checked+.apo_team-inner {
    border: 1px solid var(--bg-front-primary);
    background-color: var(--bg-front-secondary);
}

.apo_team-item label>input:checked+.apo_team-inner h4{
  color: var(--bg-front-primary);
}

.apo_team-item label>input:checked+.apo_team-inner:after {
    content: "";
    width: 22px;
    height: 22px;
    line-height: 15px;
    border-radius: 30px;
    border: 1px solid var(--bg-front-primary);
    display: block;
    background: #fff;
    position: absolute;
    top: 10px;
    right: 10px;
}
.apo_team-item label>input:checked+.apo_team-inner:before {
    content: "✓";
    z-index: 999;
    position: absolute;
    top: 11px;
    right: 16px;
    font-weight: 600;
    font-size: 13px;
    color: var(--bg-front-primary);
}

.apo_team-item .premium-icon{
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px;
  z-index: 2;
  background: white;
  border-radius: 30px;
}

.apo_team-item .premium-icon img{
  width: 25px;
  height: 25px;
}

.apo_team-item .team-name h4 {
    padding: 0;
    margin-bottom: 2px;
    font-size: 16px;
    color: #212529;
    font-weight: 500;
}

.apo_team-item .team-name p {
  font-size: 13px;
  margin-bottom: 0;
}

.apo_team-item label>input:checked+.team-name h4 {
  color: #fff;
}

.apo_team-item .map-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  cursor: not-allowed;
}

/*END select team member list <--==============================-->*/

.booking_hidden{
    display:none;
}

/* Custom Polaris-like classes for appointment booking wizard - prefixed with apo- to avoid conflicts */
/* Card Components */
.apo_LegacyCard {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.apo_LegacyCard__Section {
    padding: 20px 24px;
}

.apo_LegacyCard__Header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.apo_LegacyCard__FirstSectionPadding {
    padding-top: 24px;
}

.apo_LegacyCard__LastSectionPadding {
    padding-bottom: 24px;
}

.apo_LegacyCard__Section--subdued {
    background-color: var(--p-color-bg-surface-secondary, #f6f6f7);
}

/* Text Components */
.apo_Text--root {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #202223;
}

.apo_Text--headingLg {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.apo_Text--headingMd {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.apo_Text--headingSm {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.apo_Text--bodyMd {
    font-size: 14px;
    line-height: 1.5;
}

.apo_Text--bodySm {
    font-size: 13px;
    line-height: 1.4;
}

.apo_Text--toneSubdued {
    color: #6d7175;
}

/* Layout Components */
.apo_Layout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 0;
    margin: 0;
    width: 100%;
}

.apo_Layout__Section {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
}

/* Stack Components */
.apo_BlockStack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.apo_InlineStack {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Empty State */
.apo_EmptyState {
    padding: 40px 20px;
    text-align: center;
}

/* Button Components */
.apo_Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    background: transparent;
    font-family: inherit;
}

.apo_Button--pressable {
    position: relative;
}

.apo_Button--pressable:active {
    transform: translateY(1px);
}

.apo_Button--variantPrimary {
    background: var(--bg-front-primary, #202223);
    color: #ffffff;
    border-color: var(--bg-front-primary, #202223);
}

.apo_Button--variantPrimary:hover:not(:disabled) {
    background: var(--bg-front-primary, #202223);
    opacity: 0.9;
}

.apo_Button--variantSecondary {
    background: #ffffff;
    color: #202223;
    border-color: #d1d5db;
}

.apo_Button--variantSecondary:hover:not(:disabled) {
    background: #f6f6f7;
    border-color: #8c9196;
}

.apo_Button--sizeMedium {
    padding: 10px 20px;
    font-size: 14px;
    min-height: 36px;
    line-height: 1.4;
}

.apo_Button:disabled,
.apo_Button--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.apo_Button__Content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.apo_Button__Text {
    display: inline-block;
}

.apo_ButtonGroup {
    display: flex;
    gap: 12px;
    align-items: center;
}

.apo_ButtonGroup__Item {
    flex: 0 0 auto;
}

/* Form Components */
.apo_FormLayout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.apo_FormLayout__Item {
    flex: 1 1 auto;
}

.apo_FormLayout--grouped {
    margin-bottom: 0;
}

.apo_Labelled__LabelWrapper {
    margin-bottom: 4px;
}

.apo_Label {
    display: block;
}

.apo_Label__Text {
    font-size: 14px;
    font-weight: 500;
    color: #202223;
    display: block;
}

.apo_Connected {
    display: flex;
    gap: 0;
}

.apo_Connected__Item {
    flex: 1 1 auto;
}

.apo_Connected__Item--primary {
    flex: 1 1 auto;
}

.apo_Connected__Item:first-child {
    flex: 0 0 auto;
}

.apo_TextField {
    position: relative;
}

.apo_TextField__Input {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #202223;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.apo_TextField__Input:focus {
    outline: none;
    border-color: var(--bg-front-primary, #202223);
    box-shadow: 0 0 0 1px var(--bg-front-primary, #202223);
}

.apo_TextField__Input::placeholder {
    color: #8c9196;
}

.apo_TextField__Backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 6px;
}

.apo_Select {
    position: relative;
}

.apo_Select__Input {
    width: 100%;
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #202223;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
}

.apo_Select__Input:focus {
    outline: none;
    border-color: var(--bg-front-primary, #202223);
    box-shadow: 0 0 0 1px var(--bg-front-primary, #202223);
}

.apo_Select__Content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.apo_Select__SelectedOption {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apo_Select__Icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apo_Select__Backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 6px;
}

/* Icon Component */
.apo_Icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.apo_Icon__Svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* CSS Variables for spacing and colors */
#selectteam_popup002 {
    --p-space-050: 4px;
    --p-space-100: 8px;
    --p-space-200: 12px;
    --p-space-300: 16px;
    --p-space-400: 20px;
    --p-space-500: 24px;
    --p-space-600: 32px;
    --p-space-800: 48px;
    --p-color-text: #202223;
    --p-color-text-secondary: #6d7175;
    --p-color-text-subdued: #8c9196;
    --p-color-bg-surface: #ffffff;
    --p-color-bg-surface-secondary: #f6f6f7;
    --p-color-bg-surface-tertiary: #f1f3f5;
    --p-color-border: #d1d5db;
    --p-color-border-subdued: #e5e7eb;
    --p-border-radius-200: 8px;
    --p-border-radius-300: 12px;
    --p-shadow-200: 0 1px 3px rgba(0, 0, 0, 0.1);
    --p-shadow-300: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Wizard Container Styles */
.apo_wizard-container {
    width: 100%;
    max-width: 100%;
}

.apo_wizard-content-animation {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Wizard Step Content */
.apo_wizard-step-content {
    display: none;
    width: 100%;
}

.apo_wizard-step-content.active {
    display: block;
}

/* Step Scroll Container */
.apo_step-scroll-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
    padding: 16px 0;
}

.apo_step-scroll-container::-webkit-scrollbar {
    height: 4px;
}

.apo_step-scroll-container::-webkit-scrollbar-track {
    background: var(--p-color-bg-surface-secondary, #f6f6f7);
}

.apo_step-scroll-container::-webkit-scrollbar-thumb {
    background: var(--p-color-border, #d1d5db);
    border-radius: 2px;
}

/* Calendar Container Styles */
.apo_calendar-container {
    background-color: #f6f6f7;
    border-radius: 8px;
    padding: var(--p-space-500, 24px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.apo_calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    color: #4a4a4a;
}

.apo_calendar-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #4a4a4a;
}

.apo_calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background-color: transparent;
}

/* Calendar day classes - JavaScript generates these dynamically, so support both prefixed and non-prefixed */
.apo_calendar-grid .day-header,
.apo_calendar-grid .apo_day-header {
    background-color: transparent;
    padding: 10px 6px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #4a4a4a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.apo_calendar-grid .calendar-day,
.apo_calendar-grid .apo_calendar-day {
    background-color: transparent;
    padding: 10px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    margin: 2px;
}

.apo_calendar-grid .calendar-day:hover,
.apo_calendar-grid .apo_calendar-day:hover {
    background-color: rgba(74, 74, 74, 0.1);
}

.apo_calendar-grid .calendar-day.current-month,
.apo_calendar-grid .apo_calendar-day.current-month {
    color: #4a4a4a;
}

.apo_calendar-grid .calendar-day.other-month,
.apo_calendar-grid .apo_calendar-day.other-month {
    color: #b0b0b0;
}

.apo_calendar-grid .calendar-day.today,
.apo_calendar-grid .apo_calendar-day.today {
    color: #4a4a4a;
    font-weight: 500;
}

.apo_calendar-grid .calendar-day.selected,
.apo_calendar-grid .apo_calendar-day.selected {
    background-color: var(--bg-front-primary, #4a4a4a);
    color: #ffffff;
    font-weight: 500;
    border-radius: 6px;
}

.apo_calendar-grid .calendar-day.selected:hover,
.apo_calendar-grid .apo_calendar-day.selected:hover {
    background-color: var(--bg-front-primary, #4a4a4a);
}

.apo_calendar-grid .calendar-day.disabled,
.apo_calendar-grid .apo_calendar-day.disabled {
    color: #b0b0b0;
    cursor: not-allowed;
    background-color: transparent;
    opacity: 0.5;
}

.apo_calendar-grid .calendar-day.disabled:hover,
.apo_calendar-grid .apo_calendar-day.disabled:hover {
    background-color: transparent;
}

.apo_calendar-grid .day-number,
.apo_calendar-grid .apo_day-number {
    font-size: 14px;
    font-weight: 400;
}

/* Calendar Navigation Buttons */
.apo_calendar-nav-btn,
#selectteam_popup002 .calendar-nav-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    color: var(--p-color-text, #202223);
    min-height: 36px;
    margin: 0 4px;
}

/* Calendar Container Support */
#selectteam_popup002 .calendar-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#selectteam_popup002 .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

#selectteam_popup002 .calendar-grid {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    min-height: 300px;
}

.apo_calendar-nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.apo_calendar-nav-btn:active {
    background-color: rgba(0, 0, 0, 0.1);
}

.apo_calendar-nav-btn svg {
    width: 16px;
    height: 16px;
    color: var(--p-color-text, #202223);
}

/* Time Slots Content */
.apo_time-slots-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 20px 0;
}

.apo_time-slots-content::-webkit-scrollbar {
    width: 8px;
}

.apo_time-slots-content::-webkit-scrollbar-track {
    background: var(--p-color-bg-surface-secondary, #f6f6f7);
}

.apo_time-slots-content::-webkit-scrollbar-thumb {
    background-color: var(--p-color-border, #d1d5db);
    border-radius: 4px;
}

.apo_time-slots-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--p-color-text-secondary, #6d7175);
}

/* Booking Details Summary */
.apo_booking-details-summary-slots,
#selectteam_popup002 #booking-details-summary-slots {
    background: var(--p-color-bg-surface-secondary, #f6f6f7) !important;
    border-radius: var(--p-border-radius-200, 8px) !important;
    padding: var(--p-space-400, 20px) !important;
    margin-bottom: var(--p-space-400, 20px) !important;
    display: block !important;
}

/* Support for inline style in booking details summary */
#selectteam_popup002 #booking-details-summary-slots[style*="background"],
#selectteam_popup002 #booking-details-summary-slots[style*="border-radius"],
#selectteam_popup002 #booking-details-summary-slots[style*="padding"] {
    /* Inline styles will override, but ensure base styles are applied */
}

/* Required Star */
.apo_required-star {
    color: #d72c0d;
    margin-left: 2px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .apo_calendar-container {
        padding: 16px;
    }
    
    .apo_calendar-header h3 {
        font-size: 16px;
    }
    
    .apo_calendar-day {
        min-height: 32px;
        padding: 8px 2px;
    }
    
    .apo_day-number {
        font-size: 13px;
    }
    
    .apo_Layout {
        flex-direction: column;
    }
    
    .apo_Layout__Section {
        flex: 1 1 100% !important;
    }
}

@media (max-width: 480px) {
    .apo_calendar-container {
        padding: 12px;
    }
    
    .apo_calendar-day {
        min-height: 28px;
        padding: 6px 1px;
    }
    
    .apo_day-number {
        font-size: 12px;
    }
}

/* Time Slot Components - Shopify Polaris Style */
.apo_ShadowBevel {
    position: relative;
    z-index: 32;
}

.apo_Box {
    background: var(--p-color-bg-surface, #ffffff);
    min-height: 100%;
    overflow-x: clip;
    overflow-y: clip;
    padding: var(--p-space-400, 20px);
}

.apo_Scrollable {
    position: relative;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--p-color-scrollbar-thumb-bg, #d1d5db) var(--p-color-bg, #ffffff);
}

.apo_Scrollable--vertical {
    overflow-y: auto;
    overflow-x: hidden;
}

.apo_Scrollable--horizontal {
    overflow-x: auto;
    overflow-y: hidden;
}

.apo_Scrollable--hasBottomShadow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05));
    pointer-events: none;
}

.apo_Scrollable--scrollbarWidthThin {
    scrollbar-width: thin;
}

.apo_Scrollable::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.apo_Scrollable::-webkit-scrollbar-track {
    background: var(--p-color-bg, #ffffff);
}

.apo_Scrollable::-webkit-scrollbar-thumb {
    background-color: var(--p-color-scrollbar-thumb-bg, #d1d5db);
    border-radius: 4px;
}

.apo_Scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--p-color-text-secondary, #6d7175);
}

/* Slot Container Styles */
.apo_slot-container {
    margin-bottom: var(--p-space-300, 16px);
    border-radius: var(--p-border-radius-300, 12px);
    box-shadow: var(--p-shadow-100, 0 1px 2px rgba(0, 0, 0, 0.1));
    transition: all 0.2s ease;
}

.apo_slot-container:hover {
    box-shadow: var(--p-shadow-200, 0 2px 4px rgba(0, 0, 0, 0.15));
}

.apo_slot-container.slot-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.apo_slot-container.slot-disabled:hover {
    box-shadow: var(--p-shadow-100, 0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Slot Icon */
.apo_slot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--p-color-icon, #6d7175);
}

.apo_slot-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Slot Badge Styles - Matching Shopify Polaris */
.apo_slot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid;
    white-space: nowrap;
    min-height: 28px;
}

.apo_slot-badge.apo_Badge--toneSuccess {
    background-color: var(--p-color-bg-fill-success-secondary, #e0f4e6);
    color: var(--p-color-text-success, #008060);
    border-color: var(--p-color-border-success, #9fd4c1);
}

.apo_slot-badge.apo_Badge--toneCritical {
    background-color: var(--p-color-bg-fill-critical-secondary, #fee);
    color: var(--p-color-text-critical, #d72c0d);
    border-color: var(--p-color-border-critical, #fcc);
}

.apo_slot-badge.apo_Badge--toneInfo {
    background-color: var(--p-color-bg-fill-info, #e0f2fe);
    color: var(--p-color-text-info, #0066cc);
    border-color: var(--p-color-border-info, #b3d9ff);
}

/* Slot Book Button - Shopify Polaris Style */
.apo_slot-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    background: var(--bg-front-primary, #202223);
    color: #ffffff;
    border-color: var(--bg-front-primary, #202223);
    font-family: inherit;
    min-height: 32px;
    white-space: nowrap;
}

.apo_slot-book-btn:hover:not(:disabled) {
    background: var(--bg-front-primary, #202223);
    opacity: 0.9;
}

.apo_slot-book-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.apo_slot-book-btn:disabled,
.apo_slot-book-btn.apo_Button--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Slot Cancel Button */
.apo_slot-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid var(--p-color-border, #d1d5db);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    background: #ffffff;
    color: var(--p-color-text, #202223);
    font-family: inherit;
    min-height: 32px;
    white-space: nowrap;
}

.apo_slot-cancel-btn:hover {
    background: var(--p-color-bg-surface-hover, #f6f6f7);
    border-color: var(--p-color-border-hover, #8c9196);
}

.apo_slot-cancel-btn:active {
    transform: translateY(1px);
}

/* Slot Selected Message */
.apo_slot-selected-message {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--p-color-border-subdued, #e1e3e5);
}

.apo_slot-selected-message p {
    margin: 0;
    font-size: 13px;
    color: var(--p-color-text-success, #008060);
}

/* Badge Component - Full Polaris Style */
.apo_Badge {
    display: inline-flex;
    align-items: center;
    padding: var(--p-space-050, 4px) var(--p-space-200, 12px);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid;
    white-space: nowrap;
}

.apo_Badge--toneSuccess {
    background-color: var(--p-color-bg-fill-success-secondary, #e0f4e6);
    color: var(--p-color-text-success, #008060);
    border-color: var(--p-color-border-success, #9fd4c1);
}

.apo_Badge--toneCritical {
    background-color: var(--p-color-bg-fill-critical-secondary, #fee);
    color: var(--p-color-text-critical, #d72c0d);
    border-color: var(--p-color-border-critical, #fcc);
}

.apo_Badge--toneInfo {
    background-color: var(--p-color-bg-fill-info, #e0f2fe);
    color: var(--p-color-text-info, #0066cc);
    border-color: var(--p-color-border-info, #b3d9ff);
}

.apo_Badge--toneWarning {
    background-color: var(--p-color-bg-fill-warning-secondary, #fff4e5);
    color: var(--p-color-text-warning, #b98900);
    border-color: var(--p-color-border-warning, #fdd99c);
}

/* Button Size Variants */
.apo_Button--sizeMicro {
    padding: 6px 12px;
    font-size: 13px;
    min-height: 28px;
}

.apo_Button--sizeSmall {
    padding: 8px 16px;
    font-size: 14px;
    min-height: 32px;
}

.apo_Button--sizeMedium {
    padding: 10px 20px;
    font-size: 14px;
    min-height: 36px;
    line-height: 1.4;
}

.apo_Button--sizeLarge {
    padding: 12px 20px;
    font-size: 16px;
    min-height: 44px;
}

/* Button Variant Styles */
.apo_Button--variantTertiary {
    background: transparent;
    color: var(--p-color-text, #202223);
    border-color: transparent;
}

.apo_Button--variantTertiary:hover:not(:disabled) {
    background: var(--p-color-bg-surface-hover, #f6f6f7);
}

/* Additional CSS Variables */
#selectteam_popup002 {
    --p-color-bg-fill-success-secondary: #e0f4e6;
    --p-color-text-success: #008060;
    --p-color-border-success: #9fd4c1;
    --p-color-bg-fill-critical-secondary: #fee;
    --p-color-text-critical: #d72c0d;
    --p-color-border-critical: #fcc;
    --p-color-bg-fill-info: #e0f2fe;
    --p-color-text-info: #0066cc;
    --p-color-border-info: #b3d9ff;
    --p-color-bg-fill-warning-secondary: #fff4e5;
    --p-color-text-warning: #b98900;
    --p-color-border-warning: #fdd99c;
    --p-color-bg-surface-selected: #f0f4ff;
    --p-color-bg-surface-hover: #f6f6f7;
    --p-color-border-hover: #8c9196;
    --p-color-scrollbar-thumb-bg: #d1d5db;
    --p-shadow-100: 0 1px 2px rgba(0, 0, 0, 0.1);
    --p-shadow-200: 0 2px 4px rgba(0, 0, 0, 0.15);
    --p-space-200: 12px;
    --p-space-300: 16px;
    --p-space-400: 20px;
    --p-space-500: 24px;
    --p-border-radius-200: 8px;
    --p-border-radius-300: 12px;
    --p-color-bg-surface: #ffffff;
    --p-color-bg-surface-secondary: #f6f6f7;
    --p-color-text: #202223;
    --p-color-text-secondary: #6d7175;
    --p-color-border: #d1d5db;
    --p-color-border-subdued: #e1e3e5;
    --p-color-icon: #6d7175;
    --p-color-bg: #ffffff;
}

/* Polaris Layout Support */
#selectteam_popup002 .Polaris-Layout,
#selectteam_popup002 .apo_Layout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--p-space-400, 20px) !important;
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#selectteam_popup002 .Polaris-Layout__Section,
#selectteam_popup002 .apo_Layout__Section {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    margin: 0;
}

/* Support for specific flex values in inline styles */
#selectteam_popup002 .Polaris-Layout__Section[style*="flex: 0 0 calc(50%"],
#selectteam_popup002 .apo_Layout__Section[style*="flex: 0 0 calc(50%"] {
    flex: 0 0 calc(50% - var(--p-space-200, 12px)) !important;
}

#selectteam_popup002 .Polaris-Layout__Section[style*="flex: 1 1 auto"],
#selectteam_popup002 .apo_Layout__Section[style*="flex: 1 1 auto"] {
    flex: 1 1 auto !important;
}

#selectteam_popup002 .Polaris-Layout__Section[style*="margin-left"],
#selectteam_popup002 .apo_Layout__Section[style*="margin-left"] {
    margin-left: 0 !important;
}

/* Polaris LegacyCard Support */
#selectteam_popup002 .Polaris-LegacyCard,
#selectteam_popup002 .apo_LegacyCard {
    display: block !important;
    visibility: visible !important;
    background: var(--p-color-bg-surface, #ffffff);
    border-radius: var(--p-border-radius-300, 12px);
    box-shadow: var(--p-shadow-100, 0 1px 2px rgba(0, 0, 0, 0.1));
}

/* Polaris Box - Support inline style CSS variables */
#selectteam_popup002 .Polaris-Box[style*="--pc-box-padding"],
#selectteam_popup002 .apo_Box[style*="--pc-box-padding"] {
    padding-top: var(--pc-box-padding-block-start-xs, var(--p-space-400, 16px));
    padding-bottom: var(--pc-box-padding-block-end-xs, var(--p-space-400, 16px));
    padding-left: var(--pc-box-padding-inline-start-xs, var(--p-space-400, 20px));
    padding-right: var(--pc-box-padding-inline-end-xs, var(--p-space-400, 20px));
}

/* Polaris BlockStack - Support inline style CSS variables */
#selectteam_popup002 .Polaris-BlockStack[style*="--pc-block-stack-gap"],
#selectteam_popup002 .apo_BlockStack[style*="--pc-block-stack-gap"] {
    gap: var(--pc-block-stack-gap-xs, var(--p-space-400, 20px));
}

/* Polaris InlineStack - Support inline style CSS variables */
#selectteam_popup002 .Polaris-InlineStack[style*="--pc-inline-stack-gap"],
#selectteam_popup002 .apo_InlineStack[style*="--pc-inline-stack-gap"] {
    gap: var(--pc-inline-stack-gap-xs, var(--p-space-200, 12px));
}

#selectteam_popup002 .Polaris-InlineStack[style*="space-between"],
#selectteam_popup002 .apo_InlineStack[style*="space-between"] {
    justify-content: space-between;
}

#selectteam_popup002 .Polaris-InlineStack[style*="flex-end"],
#selectteam_popup002 .apo_InlineStack[style*="flex-end"],
#selectteam_popup002 .Polaris-InlineStack[style*="end"],
#selectteam_popup002 .apo_InlineStack[style*="end"] {
    justify-content: flex-end;
}

/* Support for Polaris classes used by JavaScript in modal context */
/* These map Polaris classes to apo_ styles to avoid conflicts */
#selectteam_popup002 .Polaris-ShadowBevel,
#selectteam_popup002 .apo_ShadowBevel {
    position: relative !important;
    z-index: 32 !important;
    border-radius: var(--p-border-radius-300, 12px) !important;
    box-shadow: var(--p-shadow-100, 0 1px 2px rgba(0, 0, 0, 0.1)) !important;
}

/* Support for inline style CSS variables in Polaris-ShadowBevel */
#selectteam_popup002 .Polaris-ShadowBevel[style*="--pc-shadow-bevel-box-shadow-xs"],
#selectteam_popup002 .apo_ShadowBevel[style*="--pc-shadow-bevel-box-shadow-xs"] {
    box-shadow: var(--pc-shadow-bevel-box-shadow-xs, var(--p-shadow-100, 0 1px 2px rgba(0, 0, 0, 0.1)));
}

#selectteam_popup002 .Polaris-ShadowBevel[style*="--pc-shadow-bevel-border-radius-xs"],
#selectteam_popup002 .apo_ShadowBevel[style*="--pc-shadow-bevel-border-radius-xs"] {
    border-radius: var(--pc-shadow-bevel-border-radius-xs, var(--p-border-radius-300, 12px));
}

#selectteam_popup002 .Polaris-Box,
#selectteam_popup002 .apo_Box {
    background: var(--p-color-bg-surface, #ffffff) !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: clip !important;
    padding: var(--p-space-400, 16px) var(--p-space-500, 20px) !important;
}

/* Support for inline style CSS variables in Polaris-Box - Force apply even if inline styles are broken */
#selectteam_popup002 .slot-container .Polaris-Box,
#selectteam_popup002 .slot-container .apo_Box {
    background: var(--p-color-bg-surface, #ffffff) !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: clip !important;
    padding: 16px 20px !important;
}

/* Support for inline style CSS variables in Polaris-Box */
#selectteam_popup002 .Polaris-Box[style*="--pc-box-padding-block-start-xs"]:not([style*="/*"]),
#selectteam_popup002 .apo_Box[style*="--pc-box-padding-block-start-xs"]:not([style*="/*"]) {
    padding-top: var(--pc-box-padding-block-start-xs, var(--p-space-400, 16px)) !important;
}

#selectteam_popup002 .Polaris-Box[style*="--pc-box-padding-block-end-xs"]:not([style*="/*"]),
#selectteam_popup002 .apo_Box[style*="--pc-box-padding-block-end-xs"]:not([style*="/*"]) {
    padding-bottom: var(--pc-box-padding-block-end-xs, var(--p-space-400, 16px)) !important;
}

#selectteam_popup002 .Polaris-Box[style*="--pc-box-padding-inline-start-xs"]:not([style*="/*"]),
#selectteam_popup002 .apo_Box[style*="--pc-box-padding-inline-start-xs"]:not([style*="/*"]) {
    padding-left: var(--pc-box-padding-inline-start-xs, var(--p-space-400, 20px)) !important;
}

#selectteam_popup002 .Polaris-Box[style*="--pc-box-padding-inline-end-xs"]:not([style*="/*"]),
#selectteam_popup002 .apo_Box[style*="--pc-box-padding-inline-end-xs"]:not([style*="/*"]) {
    padding-right: var(--pc-box-padding-inline-end-xs, var(--p-space-400, 20px)) !important;
}

/* Fix for broken inline styles with comments - Force proper padding */
#selectteam_popup002 .Polaris-Box[style*="/*"],
#selectteam_popup002 .slot-container .Polaris-Box[style*="/*"] {
    padding: 16px 20px !important;
    background: var(--p-color-bg-surface, #ffffff) !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: clip !important;
}

/* Ensure ALL Polaris-Box elements in slots have proper styling - Override broken inline styles */
#selectteam_popup002 .slot-container .Polaris-Box {
    padding: 16px 20px !important;
    background: var(--p-color-bg-surface, #ffffff) !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: clip !important;
}

#selectteam_popup002 .Polaris-BlockStack,
#selectteam_popup002 .apo_BlockStack {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--p-space-300, 16px) !important;
}

/* Support for inline style CSS variables in Polaris-BlockStack */
#selectteam_popup002 .Polaris-BlockStack[style*="--pc-block-stack-gap-xs"],
#selectteam_popup002 .apo_BlockStack[style*="--pc-block-stack-gap-xs"] {
    gap: var(--pc-block-stack-gap-xs, var(--p-space-400, 20px)) !important;
}

#selectteam_popup002 .Polaris-BlockStack[style*="--pc-block-stack-order"],
#selectteam_popup002 .apo_BlockStack[style*="--pc-block-stack-order"] {
    flex-direction: var(--pc-block-stack-order, column) !important;
}

#selectteam_popup002 .Polaris-InlineStack,
#selectteam_popup002 .apo_InlineStack {
    display: flex !important;
    align-items: center !important;
    gap: var(--p-space-300, 16px) !important;
    flex-wrap: wrap !important;
}

/* Support for inline style CSS variables in Polaris-InlineStack */
#selectteam_popup002 .Polaris-InlineStack[style*="--pc-inline-stack-gap-xs"],
#selectteam_popup002 .apo_InlineStack[style*="--pc-inline-stack-gap-xs"] {
    gap: var(--pc-inline-stack-gap-xs, var(--p-space-200, 12px)) !important;
}

#selectteam_popup002 .Polaris-InlineStack[style*="--pc-inline-stack-align"],
#selectteam_popup002 .apo_InlineStack[style*="--pc-inline-stack-align"] {
    align-items: var(--pc-inline-stack-align, center) !important;
}

#selectteam_popup002 .Polaris-InlineStack[style*="--pc-inline-stack-justify-content"],
#selectteam_popup002 .apo_InlineStack[style*="--pc-inline-stack-justify-content"] {
    justify-content: var(--pc-inline-stack-justify-content, flex-start) !important;
}

#selectteam_popup002 .Polaris-InlineStack[style*="--pc-inline-stack-flex-direction-xs"],
#selectteam_popup002 .apo_InlineStack[style*="--pc-inline-stack-flex-direction-xs"] {
    flex-direction: var(--pc-inline-stack-flex-direction-xs, row) !important;
}

#selectteam_popup002 .Polaris-InlineStack[style*="--pc-inline-stack-flex-wrap"],
#selectteam_popup002 .apo_InlineStack[style*="--pc-inline-stack-flex-wrap"] {
    flex-wrap: var(--pc-inline-stack-flex-wrap, wrap) !important;
}

/* Ensure space-between alignment works */
#selectteam_popup002 .Polaris-InlineStack[style*="space-between"],
#selectteam_popup002 .apo_InlineStack[style*="space-between"] {
    justify-content: space-between !important;
}

#selectteam_popup002 .Polaris-Scrollable,
#selectteam_popup002 .apo_Scrollable {
    position: relative !important;
    overflow: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--p-color-scrollbar-thumb-bg, #d1d5db) var(--p-color-bg, #ffffff) !important;
}

#selectteam_popup002 .Polaris-Scrollable--vertical,
#selectteam_popup002 .apo_Scrollable--vertical {
    overflow-y: auto;
    overflow-x: hidden;
}

#selectteam_popup002 .Polaris-Scrollable--hasBottomShadow::after,
#selectteam_popup002 .apo_Scrollable--hasBottomShadow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05));
    pointer-events: none;
}

#selectteam_popup002 .Polaris-Scrollable::-webkit-scrollbar,
#selectteam_popup002 .apo_Scrollable::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#selectteam_popup002 .Polaris-Scrollable::-webkit-scrollbar-track,
#selectteam_popup002 .apo_Scrollable::-webkit-scrollbar-track {
    background: var(--p-color-bg, #ffffff);
}

#selectteam_popup002 .Polaris-Scrollable::-webkit-scrollbar-thumb,
#selectteam_popup002 .apo_Scrollable::-webkit-scrollbar-thumb {
    background-color: var(--p-color-scrollbar-thumb-bg, #d1d5db);
    border-radius: 4px;
}

#selectteam_popup002 .Polaris-Scrollable::-webkit-scrollbar-thumb:hover,
#selectteam_popup002 .apo_Scrollable::-webkit-scrollbar-thumb:hover {
    background-color: var(--p-color-text-secondary, #6d7175);
}

/* Slot Container - Support both Polaris and apo_ classes */
#selectteam_popup002 .slot-container,
#selectteam_popup002 .apo_slot-container {
    margin-bottom: var(--p-space-300, 16px);
    border-radius: var(--p-border-radius-300, 12px);
    box-shadow: var(--p-shadow-100, 0 1px 2px rgba(0, 0, 0, 0.1));
    transition: all 0.2s ease;
}

#selectteam_popup002 .slot-container:hover,
#selectteam_popup002 .apo_slot-container:hover {
    box-shadow: var(--p-shadow-200, 0 2px 4px rgba(0, 0, 0, 0.15));
}

#selectteam_popup002 .slot-container.slot-disabled,
#selectteam_popup002 .apo_slot-container.slot-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Slot Icon - Support both */
#selectteam_popup002 .slot-icon,
#selectteam_popup002 .apo_slot-icon,
#selectteam_popup002 .Polaris-Icon.slot-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--p-color-icon, #6d7175);
}

#selectteam_popup002 .slot-icon svg,
#selectteam_popup002 .apo_slot-icon svg,
#selectteam_popup002 .Polaris-Icon.slot-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Slot Badge - Support both Polaris and apo_ */
#selectteam_popup002 .slot-badge,
#selectteam_popup002 .apo_slot-badge,
#selectteam_popup002 .Polaris-Badge.slot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid;
    white-space: nowrap;
    min-height: 28px;
}

#selectteam_popup002 .Polaris-Badge--toneSuccess,
#selectteam_popup002 .apo_Badge--toneSuccess,
#selectteam_popup002 .slot-badge.Polaris-Badge--toneSuccess {
    background-color: var(--p-color-bg-fill-success-secondary, #e0f4e6) !important;
    color: var(--p-color-text-success, #008060) !important;
    border-color: var(--p-color-border-success, #9fd4c1) !important;
}

#selectteam_popup002 .Polaris-Badge--toneSuccess .Polaris-Text,
#selectteam_popup002 .apo_Badge--toneSuccess .apo_Text--root {
    color: var(--p-color-text-success, #008060) !important;
}

#selectteam_popup002 .Polaris-Badge--toneCritical,
#selectteam_popup002 .apo_Badge--toneCritical,
#selectteam_popup002 .slot-badge.Polaris-Badge--toneCritical {
    background-color: var(--p-color-bg-fill-critical-secondary, #fee) !important;
    color: var(--p-color-text-critical, #d72c0d) !important;
    border-color: var(--p-color-border-critical, #fcc) !important;
}

#selectteam_popup002 .Polaris-Badge--toneCritical .Polaris-Text,
#selectteam_popup002 .apo_Badge--toneCritical .apo_Text--root {
    color: var(--p-color-text-critical, #d72c0d) !important;
}

#selectteam_popup002 .Polaris-Badge--toneInfo,
#selectteam_popup002 .apo_Badge--toneInfo,
#selectteam_popup002 .slot-badge.Polaris-Badge--toneInfo {
    background-color: var(--p-color-bg-fill-info, #e0f2fe) !important;
    color: var(--p-color-text-info, #0066cc) !important;
    border-color: var(--p-color-border-info, #b3d9ff) !important;
}

#selectteam_popup002 .Polaris-Badge--toneInfo .Polaris-Text,
#selectteam_popup002 .apo_Badge--toneInfo .apo_Text--root {
    color: var(--p-color-text-info, #0066cc) !important;
}

/* Slot Book Button - Support both Polaris and apo_ */
#selectteam_popup002 .slot-book-btn,
#selectteam_popup002 .apo_slot-book-btn,
#selectteam_popup002 .Polaris-Button.slot-book-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    background: var(--bg-front-primary, #202223) !important;
    color: #ffffff !important;
    border-color: var(--bg-front-primary, #202223) !important;
    font-family: inherit !important;
    min-height: 32px !important;
    white-space: nowrap !important;
}

#selectteam_popup002 .slot-book-btn:hover:not(:disabled),
#selectteam_popup002 .apo_slot-book-btn:hover:not(:disabled),
#selectteam_popup002 .Polaris-Button.slot-book-btn:hover:not(:disabled) {
    background: var(--bg-front-primary, #202223) !important;
    opacity: 0.9 !important;
}

#selectteam_popup002 .slot-book-btn:disabled,
#selectteam_popup002 .slot-book-btn.Polaris-Button--disabled,
#selectteam_popup002 .apo_slot-book-btn:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Slot Cancel Button */
#selectteam_popup002 .slot-cancel-btn,
#selectteam_popup002 .apo_slot-cancel-btn,
#selectteam_popup002 .Polaris-Button.slot-cancel-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border: 1px solid var(--p-color-border, #d1d5db) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    background: #ffffff !important;
    color: var(--p-color-text, #202223) !important;
    font-family: inherit !important;
    min-height: 32px !important;
    white-space: nowrap !important;
}

#selectteam_popup002 .slot-cancel-btn:hover,
#selectteam_popup002 .apo_slot-cancel-btn:hover {
    background: var(--p-color-bg-surface-hover, #f6f6f7) !important;
    border-color: var(--p-color-border-hover, #8c9196) !important;
}

/* Button Size Micro - Support both */
#selectteam_popup002 .Polaris-Button--sizeMicro,
#selectteam_popup002 .apo_Button--sizeMicro {
    padding: 8px 16px !important;
    font-size: 13px !important;
    min-height: 32px !important;
    line-height: 1.4 !important;
}

/* Button Variant Primary - Support both */
#selectteam_popup002 .Polaris-Button--variantPrimary,
#selectteam_popup002 .apo_Button--variantPrimary {
    background: var(--bg-front-primary, #202223) !important;
    color: #ffffff !important;
    border-color: var(--bg-front-primary, #202223) !important;
}

#selectteam_popup002 .Polaris-Button--variantPrimary:hover:not(:disabled),
#selectteam_popup002 .apo_Button--variantPrimary:hover:not(:disabled) {
    background: var(--bg-front-primary, #202223) !important;
    opacity: 0.9 !important;
}

/* Button Variant Tertiary - Support both */
#selectteam_popup002 .Polaris-Button--variantTertiary,
#selectteam_popup002 .apo_Button--variantTertiary {
    background: transparent !important;
    color: var(--p-color-text, #202223) !important;
    border-color: transparent !important;
}

#selectteam_popup002 .Polaris-Button--variantTertiary:hover:not(:disabled),
#selectteam_popup002 .apo_Button--variantTertiary:hover:not(:disabled) {
    background: var(--p-color-bg-surface-hover, #f6f6f7) !important;
}

/* Slot Selected Message */
#selectteam_popup002 .slot-selected-message,
#selectteam_popup002 .apo_slot-selected-message {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--p-color-border-subdued, #e1e3e5);
}

#selectteam_popup002 .slot-selected-message p,
#selectteam_popup002 .apo_slot-selected-message p {
    margin: 0;
    font-size: 13px;
    color: var(--p-color-text-success, #008060);
}

/* Ensure slot containers have proper spacing */
#selectteam_popup002 .Polaris-BlockStack .slot-container,
#selectteam_popup002 .apo_BlockStack .slot-container,
#selectteam_popup002 .Polaris-BlockStack .apo_slot-container,
#selectteam_popup002 .apo_BlockStack .apo_slot-container {
    margin-bottom: var(--p-space-300, 16px);
}

/* Ensure proper spacing in InlineStack for slot rows */
#selectteam_popup002 .slot-container .Polaris-InlineStack,
#selectteam_popup002 .slot-container .apo_InlineStack {
    gap: var(--p-space-300, 16px) !important;
}

/* Ensure proper spacing between time icon and text */
#selectteam_popup002 .slot-container .Polaris-InlineStack > div:first-child,
#selectteam_popup002 .slot-container .apo_InlineStack > div:first-child {
    gap: var(--p-space-200, 12px) !important;
}

/* Ensure proper spacing between badge and button */
#selectteam_popup002 .slot-container .Polaris-InlineStack > div:last-child,
#selectteam_popup002 .slot-container .apo_InlineStack > div:last-child {
    gap: var(--p-space-300, 16px) !important;
}

/* Ensure time slots content has proper styling */
#selectteam_popup002 #time-slots-content {
    box-shadow: none !important;
}

/* Ensure Polaris-Scrollable has proper height */
#selectteam_popup002 .Polaris-Scrollable[style*="height: 372px"],
#selectteam_popup002 .apo_Scrollable[style*="height: 372px"] {
    height: 372px !important;
}

/* Additional spacing improvements for better visual hierarchy */
#selectteam_popup002 .Polaris-BlockStack .slot-container:last-child,
#selectteam_popup002 .apo_BlockStack .slot-container:last-child,
#selectteam_popup002 .Polaris-BlockStack .apo_slot-container:last-child,
#selectteam_popup002 .apo_BlockStack .apo_slot-container:last-child {
    margin-bottom: 0;
}

/* Improve spacing in slot container Box - Override broken inline styles */
#selectteam_popup002 .slot-container .Polaris-Box,
#selectteam_popup002 .slot-container .apo_Box {
    padding: 16px 20px !important;
    background: var(--p-color-bg-surface, #ffffff) !important;
    min-height: 100% !important;
    overflow-x: clip !important;
    overflow-y: clip !important;
}

/* Better alignment for slot content */
#selectteam_popup002 .slot-container .Polaris-InlineStack[style*="space-between"],
#selectteam_popup002 .slot-container .apo_InlineStack[style*="space-between"] {
    align-items: center !important;
    justify-content: space-between !important;
}

/* Ensure text in slots uses proper styling */
#selectteam_popup002 .slot-container .Polaris-Text--root,
#selectteam_popup002 .slot-container .apo_Text--root {
    margin: 0 !important;
    font-family: inherit !important;
}

/* Polaris Text classes support */
#selectteam_popup002 .Polaris-Text--root,
#selectteam_popup002 .apo_Text--root {
    margin: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--p-color-text, #202223) !important;
}

#selectteam_popup002 .Polaris-Text--bodyMd,
#selectteam_popup002 .apo_Text--bodyMd {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

#selectteam_popup002 .Polaris-Text--bodySm,
#selectteam_popup002 .apo_Text--bodySm {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

#selectteam_popup002 .Polaris-Text--medium,
#selectteam_popup002 .apo_Text--medium {
    font-weight: 500 !important;
}

#selectteam_popup002 .Polaris-Text--toneSubdued,
#selectteam_popup002 .apo_Text--toneSubdued {
    color: var(--p-color-text-secondary, #6d7175) !important;
}

/* Icon tone support */
#selectteam_popup002 .Polaris-Icon--toneBase,
#selectteam_popup002 .apo_Icon--toneBase {
    color: var(--p-color-icon, #6d7175);
}

#selectteam_popup002 .Polaris-Icon--toneInfo,
#selectteam_popup002 .apo_Icon--toneInfo {
    color: var(--p-color-text-info, #0066cc);
}

#selectteam_popup002 .Polaris-Icon--toneSuccess,
#selectteam_popup002 .apo_Icon--toneSuccess {
    color: var(--p-color-text-success, #008060);
}