:root {
    --primary-color: #00478D;
    --footer-color: #00478D;
    --main-background-color: #fcfcfcf2;
    --element-background-color: #fffffffa;
    --primary-font: 'Yooty GR';
    --border-radius: 5px;
    --main-background: linear-gradient(20deg, #82bffa 1%, color-mix(in srgb, #82bffa 0%, #ffffff) 60%, #ffffff 100%);
    --box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.2);
    --box-shadow-element: 1px 1px 8px 2px rgba(0, 0, 0, 0.2);
    --primary-button-contrast-hover-color: #EEA90A;
    --menu-bar-color: #f7f7fd;
    --main-background: #FBFBFC;
    --provider-selected-zone: #a7d9ff;
    --confirm-color: #4CAF50;
    --confirm-hover-color: #45a049;
    --button-text-color: #FFFFFF;
    --button-hover-color: #003366;
    --button-active-color: #002244;
    --customer-item-background: #eff0f9;
    --cancel-color: #ff8181;
    --outgoing-message:#00478D ;/*#2c91f4*/
    --incoming-message: #6c757d;
    --label-hover-color: #f0f0f0;
    --star-rating: gold;
    --very-bad-rating: #FF0000;
    --bad-rating: #FF4C00;
    --ok-rating: #FF6F00;
    --good-rating: #FFAD36;
    --great-rating: gold;
    --inactive-color: #9d9d9d;
    --inactive-hover-color: #434a52;
    --cancel-hover-color: #AE4643;
    --table-background-color: #f2f2f2;
    --table-alternate-color: #d6e6f4;
    --background-color: rgb(251, 251, 252);
    --role-admin-color: #b7a5f3;
    --role-super-admin-color: #72da96;
    --role-admin-hover-color: #a795e3;
    --role-accountant-color: #f3a5a5;
    --role-accountant-hover-color: #e09090;
    --role-manager-color: #8372da;
    --role-manager-hover-color: #6354ad;
    --role-provider-color: #f7cea7;
    --role-provider-hover-color: #ffc288;
    --block-border: 5px;
    --block-border-2: 8px;
    --box-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);

    /*** Calculator calor***/
    --calc-primary: white;
    --calc-background: blue;
}

@font-face {
    font-family: 'Yooty GR';
    font-weight: 300;
    font-style: normal;
    src: url('/styles/fonts/YootyGR-Normal.woff2') format('woff2'),
        url('/styles/fonts/YootyGR-Normal.woff') format('woff');
}

@font-face {
    font-family: 'Yooty GR';
    font-weight: 400;
    font-style: normal;
    src: url('/styles/fonts/YootyGR-Medium.woff2') format('woff2'),
        url('/styles/fonts/YootyGR-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Yooty GR';
    font-weight: 700;
    font-style: normal;
    src: url('/styles/fonts/YootyGR-Bold.woff2') format('woff2'),
        url('/styles/fonts/YootyGR-Bold.woff') format('woff');
}
body {
    position:relative;
    margin:0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background  : var(--main-background);
    justify-content: space-between;
}
.app-headerheader {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    box-shadow: var(--box-shadow-element);
    position: sticky;
    background-color: var(--main-background-color);
    top: 0;
    z-index: 2;
}
.hidden {
    display:none!important;
}
.with-border {
    border:1px solid #ccc;
    border-radius: var(--block-border-2);
} 
.no-border {
    border: none!important;
}
.attention {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ccc;
    color: var(--inactive-color);
    border: 1px solid;
    border-radius: 50%;
    width: calc(1rem - 2px);
    height: calc(1rem - 2px);
	font-size: 0.8rem;
    flex-shrink: 0;
}
/***Display message***/
.message-box {
    position: fixed;
    top: 30px;
    right: 30px;
    height: fit-content;
    width: fit-content;
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 14px;
    color: black;
    border-radius: 8px;
    z-index: 10000;
    opacity: 0.9;
    background: var(--element-background-color);
    transition: all 0.5s ease;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

.message-box.success path,
.message-box.success {
    background-color: #c6ffc8;
    border-color: #4CAF50;
    fill: #4CAF50;
}

.message-box.error path,
.message-box.error {
    background-color: #ffdcdc;
    border-color: #ff4c00;
    fill: #ff4c00;
}

.message-box.attention path,
.message-box.attention {
    background-color: #fff4b9;
    border-color: gold;
    fill: gold
}

.message-box.info path,
.message-box.info {
    background-color: #c9e4fa;
    border-color: #2196F3;
    fill: #2196F3;
}

.message-box.slide-in {
    opacity: 1;
    transform: translateX(0);
}

.message-box.slide-out {
    opacity: 0;
    transform: translateX(20px);
}

.message-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}

.message-text {
    font-size: 0.8rem;
    line-height: 1rem;
}

/***Launcher***/
.multi-integration-launcher {
    position: fixed;
    display: flex;
    width: 3rem;
    height: 3rem;
    z-index: 1000;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 3px solid var(--primary-color);
    bottom: 2rem;
    right: 1rem;
    justify-content: center;
    align-items: center;
}

.multi-integration-launcher:hover {
    background-color: white;
    border: 3px solid var(--primary-color);
}

.multi-integration-launcher .launcher-menu {
    position: absolute;
    bottom: 2.5rem;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    display: none;
}

.multi-integration-launcher .launcher-menu-item {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 5px 10px;
}

.multi-integration-launcher .launcher-menu-item:hover {
    background-color: #f0f0f0;
    border-radius: var(--block-border);
}

.new-event-indicator {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    width: 1rem;
    height: 1rem;
    color: white;
    font-size: 0.6rem;
    background-color: red;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}
.header-notification-btn .new-event-indicator {
    top: -0.1rem;
    right: -0.1rem;
    width: 0.8rem;
    height: 0.8rem;
    font-size: 0.6rem;
}
.chat-launcher-popup {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 5px;
    bottom: 60px;
    right: 20px;
    background-color: var(--background-color);
    color: var(--primary-color);
    padding: 10px;
    border-radius: var(--block-border);
    border: 1px solid #ccc;
    z-index: 999999;
    transition: transform 0.3s ease-out;
    transform: translateX(0px);
    box-shadow: var(--box-shadow);
}

.chat-launcher-popup .launcher-toast {
    font-size: 0.6em;
}

.toast-preview {
    font-size: 0.8em;
}
/***Menu***/
.header-notification-btn {
    background: transparent;
    padding: 0;
    position: relative;
}

.notifications-panel {
    background: var(--element-background-color);
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    box-shadow: var(--box-shadow-element);
}

.notification-item {
    padding: 0.5rem;
    border-radius: var(--block-border-2)
}
    .menu-bar-container {
        background-color: var(--menu-bar-color);
        width: fit-content;
        height: calc(100% - 0.6rem);
        box-sizing: border-box;
        margin: 0.3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-element);
    }
.menu-bar-container .menu-item {
    padding: 0.5rem;
    border-radius: 0.5rem;
    gap: 0;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    transition: all 0.3s;
}
.menu-bar-container .menu-item:hover {
    background:#ddd;
}
.menu-bar-container .menu-item.active {
    background: #ccc;
}
.menu-bar-container .menu-item.active span {
    color:white;
}
.menu-bar-container .menu-item.active:hover span{
    color:white;
}
.menu-bar-container .menu-item span {
    font-weight:500;
    font-size: 1rem;
}
.menu-item-span {
    width: 0;
    transition: all 0.3s;
}
.menu-bar-container:hover .menu-item-span {
    width:fit-content;
    margin-left:0.5rem;
}
.logout-item {
    margin-top: auto;
    background-color: darkred;
    color: white;
}
.menu-item.logout-item:hover {
    background-color: darkred;
    filter: brightness(1.3);
}

.yt-button.integration-button.connected:hover {
    filter: brightness(1.3);
}
.service-autocomplete-list.column.visible {
    display: flex;
    position: absolute;
    width: calc(100% - 1rem);
    padding: 0.5rem;
    z-index: 1;
    min-height: fit-content; 
    max-height: 320px; 
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
    box-shadow: var(--box-shadow-light);
}
.picker-frame.column {
    gap: 0.5rem;
    max-width: 380px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    padding: 1rem;
    box-shadow: var(--box-shadow-light);
}
.picker-item.row,
.service-autocomplete-item {
    padding: 0.3rem 0.5rem;
    border-radius: var(--block-border-2);
}
.floating-menu {
    position: absolute;
    z-index: 2;
    display: none;
    flex-direction: column;
    background: var(--element-background-color);
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    padding: 1rem;
    box-sizing: border-box;
}
.menu-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid;
}  

    /***User menu***/
    .user.modal-content .modal-body {
        margin-bottom: 0;
        padding: 0 0 0 1rem;
    }
    .modal-content.expired {
        border: 2px solid var(--cancel-color);
    }
    
    .expired .modal-header {
        color: var(--cancel-color);
    }
    .create-edit-service .modal-body {
        margin-top: 0;
    }
    .user-profile.row {
        gap: 1rem;
        align-items: start;
    }
    .user-profile .team-img {
        border: none;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .primary-icon.edit-avatar {
        display:none;
        position: absolute;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #dddddd7d;
    }
    .primary-icon.on-hold-payment {
        top: -0.35rem;
        right: -0.35rem;
        position: absolute;
        background: var(--element-background-color);
        border-radius: 50%;
    }
    .primary-icon.job-status {
        position: absolute;
        display: flex;
        bottom: -0.6rem;
        right: -0.6rem;
        width: 0.8rem;
        height: 0.8rem;
        padding: 0.1rem;
        border-radius: 50%;
        border: 1px solid;
        background: var(--element-background-color);
    }
    .primary-icon.job-status.cancelled-job {
        background: var(--cancel-color);
        border-color: var(--cancel-color);
        color: white;
    }
    .primary-icon.chat-type-icon,
    .primary-icon.chat-icon {
        position: relative;
    }
    .primary-icon.chat-type-icon .new-event-indicator ,
    .primary-icon.chat-icon .new-event-indicator {
        width: 0.4rem;
        height: 0.4rem;
        right: 0;
    }
    .primary-icon.chat-icon .new-event-indicator {
        top: 0.1rem;
    }
    .primary-icon.chat-type-icon .new-event-indicator {
        top: 0;
    }
    .user.modal-content .outlined-button-secondary {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.1rem 0.3rem;
    }
    .outlined-button-secondary.danger {
        color: var(--cancel-color);
    }
    .outlined-button-secondary.danger:hover {
        background: var(--cancel-color);
        border-color: var(--cancel-color);
        color: white;
    }
    #dispAddress,
    #dispEmail,
    .recurring-job-set.row span,
    .floating-menu .user-name {
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #dispAddress,
    #dispEmail {
        max-width: 19rem;
    }
    
    .floating-menu .user-name {
        max-width: 15rem;
    }
    .pronouns {
        justify-content: center;
    }
    #addressSection {
        grid-template-columns: auto 20%;
    }
    
    .link-button.edit-field {
        font-size: 0.6rem;
        color: var(--inactive-color);
        margin-left: 1rem;
    }
    .business-setting-item.expanded .collapsible-content.business-section-branding-content,
    .collapsible-content.show,
    .referrer-selected.row:hover .outlined-button-secondary.remove-referrer-btn,
    .job-customer-collapsible:hover .outlined-button-secondary.delete-customer-btn,
    .otp-collapsible-item.auth-oauth,
    .modal-header .edit-customer-btn,
    .booked-job-section:hover .edit-customer-btn,
    .booked-job-section:hover .edit-service-btn,
    .booked-job-item:hover .booking-action-buttons,
    .day-view .calendar-section-body,
    .column label,
    .coupon-row:hover .coupon-remove,
    .option-item.grid:hover .delete-mod,
    .sync-gcal-btn.outlined-button-secondary svg,
    .user-profile .team-img:hover .primary-icon.edit-avatar,
    .column.user-field:hover .link-button.edit-field {
        display: flex;
    }
    .calendar-sync {
        padding: 0.5rem;
        background: var(--element-background-color);
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        width: 100%;
    }
    .sync-gcal-btn.outlined-button-secondary,
    .disconnect-gcal-btn.outlined-button-secondary {
        border:1px solid var(--inactive-color);
        color: var(--inactive-color);
        font-size:1rem;
        text-decoration:none;
        padding:0.2rem;
        transition:all 0.3s;
    }
    .sync-gcal-btn.outlined-button-secondary.ok:hover,
    .disconnect-gcal-btn.outlined-button-secondary.ok:hover,
    .sync-gcal-btn.outlined-button-secondary.ok,
    .disconnect-gcal-btn.outlined-button-secondary.ok {
        border-color: var(--confirm-color);
        background: var(--confirm-color);
    }
    .sync-gcal-btn.outlined-button-secondary:hover,
    .disconnect-gcal-btn.outlined-button-secondary:hover {
        border-color: var(--inactive-color);
        color: var(--element-background-color);
    }

    .sync-gcal-btn.outlined-button-secondary.ok:hover path,
    .disconnect-gcal-btn.outlined-button-secondary.ok:hover path,
    .sync-gcal-btn.outlined-button-secondary.ok path,
    .disconnect-gcal-btn.outlined-button-secondary.ok path,
    .sync-gcal-btn.outlined-button-secondary:hover  path,
    .disconnect-gcal-btn.outlined-button-secondary:hover  path {
        fill: var(--element-background-color);
        stroke: var(--element-background-color);
    }    
    .sync-gcal-btn.outlined-button-secondary path {
        fill: var(--inactive-color);
        stroke: var(--inactive-color);
    }
    .calendar-sync.apple-sync,
    .calendar-sync.google-sync {
        justify-content: space-between;
        height: 2.5rem;
    }
    .primary-icon.chat-avatar.unknown path {
        stroke: currentColor;
    }
/***Imopersonate panel***/
/*** Impersonate ***/
.impersonation.collapsible-container {
    font-size: 10px;
    position: absolute;
    left: -180px;
    top: 5px;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    width: 200px;
    height: fit-content;
    z-index: 10000;
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
    transition: all 0.3s ease-in-out;
}
.impersonation.collapsible-container:hover {
    left: 5px;
}
.impersonation .collapsible-header h3 {
    font-size: 0.9em;
    margin: 0;
}

.impersonation .toggle-button{
    width: 15px;
    height: 15px;
    padding: 1px;
    color:var(--primary-color)
}
.impersonation .toggle-button:hover {
    width: 15px;
    padding: 1px;
    color:white;
}
.impersonation.collapsible-container.impersonated .collapsible-header {
background-color: #ffeb3b!important;
}
.impersonation button {
    padding: 5px 10px;
    position: relative;
    margin: 0;
    border: 1px solid #ccc;
    font-size: 10px;
    width:100%;
    box-sizing: border-box;
}
.impersonation .collapsible-header {
    border-radius: 3px;
    padding: 1px;
    background-color: #ddd;
}
.impersonation:hover .collapsible-content,
.impersonation.expanded .collapsible-content { 
    display: block; 
}
    
.impersonation .collapsible-content {
    max-height: fit-content;
    padding: 5px!important;
    width: 200px;
    z-index: 10000;
    box-sizing: border-box;
}

#impersonate-form {
    width: 100%;
    position: relative;
    height: fit-content;
    box-sizing: border-box;
}

#revert-impersonation-form {
    margin-top: 10px;
}
/***Base***/
.page-header,
#teamStatusToggle {
    margin: 0 0.3rem;
}
.page-header {
    width: calc(100% - 0.6rem);
}
.service-search-bar,
.search-bar {
    gap: 0.5rem;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
    padding: 0 0.3rem;
    width: 100%;
    position:relative;
    box-sizing: border-box;
}
.service-search-bar input,
.search-bar input{
    width: 100%!important;
    border: none;
    padding: 5px;
    outline: none;
}
.search-bar.invisible input,
.search-bar.invisible {
    background: transparent;
    border: none;
}
.column {
    display: flex;
    flex-direction: column;
}
.team .column {
    width:100%;
}
.vip-span {
    font-size: 0.6rem;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    background: #2680ff;
    color: white;
    width: fit-content;
    border-radius: var(--block-border);
}
#newOnly,
#vipOnly {
    font-size: 0.7rem;
    padding: 0.1rem 0.3rem;
    background: transparent;
    border: 2px solid;
    color: var(--inactive-color);
}
#newOnly.active,
#blockedOnly.active,
#nonBlockedOnly.active,
#vipOnly.active {
    background: #2680ff;
    border-color: #2680ff;
    color:white;
}
#blockedOnly,
#nonBlockedOnly {
    padding: 0;
    background: transparent;
    color: var(--inactive-color);
    border: 2px solid;
    border-radius: var(--block-border-2);
}

.primary-icon.search-bar-filter {
    width: 0.95rem;
    height: .95rem;
}

.search-filter-icon {
    position: relative;
    padding: 0.1rem;
}
.failed .transaction-amount {
    text-decoration: line-through;
}
.status-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.4rem;
    line-height: 0.5rem;
    padding: 0.05rem;
    width: 0.4rem;
    height: 0.4rem;
    bottom: 0.1rem;
    right: 0.1rem;
    color: white;
    border-radius: 50%;
}
.status-icon.blocked {
    background: var(--cancel-color);
}

#account-access-modal .column {
    gap:0.2rem;
}
.add-service-btn:disabled,
.not-matched {
    opacity: 0.7;
}
.payment-status.label-small,
.customer-details-section .contact-item.balance,
.calendar-month,
.calendar-date,
.label-medium.came-from,
.recurring-summary-label,
.monthly-which-occurrence .dropdown-selected,
.monthly-day-of-week .dropdown-selected, 
.weekly-day-of-week .dropdown-selected,
.calendar-warning,
.job-inputs .total-amount,
.referrer-name,
.address-item-selected,
.selected-customer-content,
.coupon-name.label-small,
.pie-block .dropdown,
.paystub-status.overpaid,
.paystub-status.partially-paid,
.paystub-status.paid,
.picker-item.row,
.service-autocomplete-item,
.service-name.label-normal,
.otp-verification .phone-label ,
.collapsible-otp-header span,
.customer-name,
.customer-initials,
#bookedJobCustomerName,
button, body,
.user-field .row span,
.auth-content,
.yt-2fa-step-num,
.loaded-users.column .user-name,
#language-modal .modal-content
#provider-modal .modal-content,
#otp-security-container,
#aa-pwd-mask,
#aa-full-name,
.modal-header span,
.modal .modal-header span {
    font-weight: 500;
}
#changeStatus .primary-icon path,
.eta-option.active .primary-icon path,
.eta-option:hover .primary-icon path,
#editBookedJob:hover .primary-icon.more-icon path,
.modal-actions-row button:hover .primary-icon path,
.cancel-transaction:hover .primary-icon.more-icon path,
.booking-action-buttons button:hover .primary-icon path,
.print-invoice-btn:hover .primary-icon path,
.send-invoice-btn:hover .primary-icon path,
.edit-earning:hover .primary-icon path,
.edit-service-address:hover .primary-icon path {
    fill: white;
}
.auth-confirm-icon,
.auth-failed-icon,
.column.center {
    align-items: center;
}

.callback .column {
    width: fit-content;
    align-self: center;
    gap: 1rem;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
.contact-phone-inline.label-small,
.row {
    display: flex;
    align-items: center;
}
.link-button.read-original-note-btn,
.link-button.edit-note-btn,
.label-micro {
    font-size: 0.6rem;
}
.transaction-item.void,
#platformCustomerId:placeholder-shown,
.create-job .link-button.add-discount-btn,
.create-job .link-button.add-coupon-btn,
.create-job .link-button.add-tip-btn,
.page-footer .link-button,
.outlined-button-secondary.delete-customer-btn,
.address-inline-picker .delete-btn,
.contact-inline-picker .delete-btn,
.create-edit-service .service-summary .link-button,
.label-small {
    font-size: 0.7rem;
}
.label-medium {
    font-size: 0.85rem;
}
.label-medium.resource-name {
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
}
.label-medium.provider-hourly-rate {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.label-medium.reset-password {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}
.label-normal {
    font-size: 1em;
}
.booked-job-item.mobile-overview-item .job-customer,
.label-large {
    font-size: 1.2rem;
}
.label-duration {
    padding: 0 0.5rem;
    /* border: 1px solid; */
    border-radius: var(--block-border-2);
}
.required {
    color: var(--cancel-color);
}
.top-right {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.7rem;
    color: #aaaaaa;
}
.duration-input {
    display: flex;
    gap:0.3rem;
    font-size: 0.8rem;
    width: fit-content;
}
span.dur-input {
    padding: 0 0.2rem;
}
.job-inputs.row. .duration-input {
    font-size: 1rem;
}
.duration-input-min,
.duration-input-hours {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    height: 1.5rem;
}
.input.modal-content .duration-input-min,
.input.modal-content .duration-input-hours {
    height: fit-content;
}
.input.modal-content .duration-input .invisible-input {
    width: 3rem;
    font-size: 1.2rem;
}
.manager-complete-modal .duration-input .invisible-input,
.job-summary-row .duration-input .invisible-input {
    width: 1.8rem;
    font-size: 1rem;
}
.salary-report-table .duration-input .invisible-input,
.duration-input .invisible-input {
    padding: 0 0.2rem;
    text-align: center;
    width: 1.6rem;
    font-size: 0.8rem;
}

.duration-input  .duration-input-span {
    min-width: 0.5rem;
    width: fit-content;
    padding: 0 0.3rem;
    border-left: 1px solid #ccc;
    text-align: center;
}
.custom-service .duration-input-min,
.custom-service .duration-input-hours {
    height:auto;
}

.edit-total-hours-input {
    display: flex;
    height: 1.5rem;
}
    /***Language***/
    .language {
        gap: 0.5rem;
        border: none;
        background: transparent;
        color: inherit;
        font-size: 0.7rem;
    }
    .language img.primary-icon.profile-picture {
        border: none;
    }
    .lang-opt {
        display: grid;
        grid-template-columns: 2rem 10rem;
        background: transparent;
        border: none;
        padding: 0.5rem;
    }
    .notification-item:hover,
    .people-lists .customer-card:hover,
    .contact-item:hover,
    label.row.marketing-option:hover,
    .filter-row:hover,
    label.row.leaf:hover,
    .zone-header:hover,
    .picker-item.row.selected,
    .option-item.row:hover,
    .picker-item:hover,
    .item.row:hover,
    .contact-summary:hover,
    button:hover.menu-item,
    .calendar-type-selection span:hover,
    label.phone-item:hover,
    .service-autocomplete-item:hover,
    .lang-opt:hover {
        background: #f3f3f3;
    }
    .service-tree .picker-item:hover {
        background:transparent
    }
    .lang-opt.selected {
        background: #ccc;
    }
    /***BASE FOOTER***/
    .cancel-job-item .column,
    .time-row-hour,
    .freq-label,
    .copiright {
        white-space: nowrap;
    }
    .freq-label{
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: ellipsis;
        width: 7.5rem;
        height: 1.2rem;
        font-size: 0.7rem;
    }
    .page-footer {
        display: flex;
        align-items: center;
        color: var(--footer-color);
        justify-content: space-between;
        padding: 0.5rem;
    }
    .outlined-button-secondary.remove-referrer-btn,
    .outlined-button-secondary.delete-customer-btn,
    .address-inline-picker .delete-btn,
    .contact-inline-picker .delete-btn,
    .outlined-button-secondary.edit-btn,
    .create-edit-service .discount-row,
    .modifier-item.column,
    .page-footer button {
        padding: 0;
    }
    .page-footer .row {
        width: 100%;
        justify-content: space-evenly;
    }
.checkmark-icon {
    position: absolute;
    top: 20%;
    height: 0.4rem;
    width: 0.2rem;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    rotate: 45grad;
}

.auth-failed-icon,
.auth-confirm-icon {
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    color: var(--element-background-color);
    align-items: center;
    justify-content: center;
    position: relative;
}
.booked-job-item .auth-confirm-icon {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    width: 0.7rem;
    height: 0.7rem;
}
.booked-job-item.unassigned {
    border: 2px solid #ccc!important;
    color: var(--inactive-color);
}
.booked-job-item .checkmark-icon {
    width: 0.15rem;
    height: 0.25rem;
}
.auth-warning-message .auth-failed-icon {
    border: 1px solid var(--element-background-color);
}
.auth-warning-message .no-apt-btn:hover .auth-failed-icon {
    border-color: #ff8181;
    color:#ff8181;
    background: var(--element-background-color);
}
.auth-failed-icon {
    background: #ff8181;
    font-size: 0.7rem;
}    
.auth-logo {
    max-height:2em;
}

.business-code-step {
    max-width: 400px;
    flex-direction: column;
    padding: 1rem;
    background: var(--main-background-color);
    border-radius: var(--block-border-2);
    box-shadow: var(--box-shadow-element);
    align-self: center;
}
.business-code-wrapper {
    display: grid;
    grid-template-columns: repeat(6, 15%);
    justify-content: space-between;
}
/***Elements***/
    /***Loading***/
    .yt-button:hover .loading-spinner{
        border-left-color: white!important;
        border: 4px solid rgba(255, 255, 255, 0.05);
    }
    .yt-button .loading-spinner{
        border-left-color: white!important;
        border: 4px solid rgba(255, 255, 255, 0.2);
    }
    .loading-spinner {
        display: flex;
        flex-shrink: 0;
        border: 0.25rem solid rgba(0, 0, 0, 0.1);
        border-left-color: inherit;
        border-radius: 50%;
        width: 0.65rem;
        height: 0.65rem;
        animation: spin 1s linear infinite;
        align-self: center;
    }
    
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .loading-logo,.loading-lottie {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .primary-icon.launcher-,
    img.loading-logo {
        max-width: 2.5rem;
        max-height: 2.5rem;
    }
    .loading-lottie {
        width: 7rem;
        height: 7rem;
    }
    /***input***/
    input,
    textarea {
        border: 1px solid #ccc;
        padding: 0.3rem;
        border-radius: var(--block-border-2);
        color: var(--primary-color);
        font-family: var(--primary-font);
        background: transparent;
        font-size: 1rem;
        box-sizing: border-box;
        resize: none;
    }
    input.flatpickr-input {
        background: var(--element-background-color);
    }
    .confirm-modal .modal-content,
    #address-modal textarea {
        min-height: 5rem;
    }
    #aptInput {
        width: 5rem;
    }
    .job-address-apt,
    .row.address-input input {
        font-size: 0.9rem;
    }
    select,
    .dropdown,
    .send-invoice-content input,
    .reset-msg.yt-note,
    .auth-password-message,
    .modal-content-right,
    .modal-content,
    .badge.badge-primary,
    .copiright,
    .page-footer .link-button,
    .paystub-status,
    .edit-customer.modal-content input,
    .edit-modal-content input,
    input:placeholder-shown,
    textarea:placeholder-shown,
    .edit-customer.modal-content,
    .phone-note.label-medium,
    #address-modal input,
    #address-modal textarea,
    .auth-content input {
        font-weight: 300;
    }
    .auth-content input[type="email"],
    .auth-content input[type="password"],
    .auth-content input[type="text"] {
        width: 100%;
        padding: 0.4rem;
        font-size: 0.9rem;
    }
    .email-recipients-input,
    .input-wrapper {
        display:flex;
        border:1px solid #ccc;
        border-radius: var(--block-border-2);
        box-sizing: border-box;
        align-items: center;
        padding: 0 0.3rem 0 0.3rem;
        background:white;
    }
    .email-recipients-input {
        gap: 0.2rem;
        flex-wrap: wrap;
        padding: 0.2rem;
    }
    .email-tag {
        gap: .5rem;
        align-items:center;
        background-color: white;
        border-radius: 15px;
        border: 1px solid;
        padding: 0.2rem 0.2rem 0.2rem 0.5rem;
    }
    .remove-email-tag {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 0.8rem;
        padding: 0;
        border: 1px solid;
        background:transparent;
    }
    .remove-email-tag:hover {
        background:var(--cancel-color);
        border-color: var(--cancel-color);
        color: white
    }
    .input.modal-content .input-wrapper,
    .input.modal-content .input-wrapper input {
        font-size: 1.2rem;
    }
    .auth-password-set .input-wrapper {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0.4rem;
        border: 1px solid #ccc;
        border-radius: 0.3rem;
        font-size: 1rem;
        box-sizing: border-box;
        background: white;
        color: var(--primary-color);
    }
    .input-wrapper:focus-within {
        border: 1px solid #1d50da;
    }
    .input-wrapper:focus-within #clearAddressInput {
        display:flex!important;
    }
    .discount-editor .input-wrapper {
        width: fit-content;
        gap: 0.5rem;
    }
    .notification-item.column,
    .provider-item .provider-img,
    .discount-editor .input-wrapper:focus-within {
        border: 1px solid #ccc;
    }
    .input-wrapper .currency-symbol {
        position: relative;
        font-size: inherit;
    }
    .segmented-toggle.readonly .seg-btn,
    input:disabled,textarea:disabled,
    .input-wrapper:has(input:disabled),
    .dropdown.disabled,
    .auth-content input:disabled {
        background: #f3f3f3;
        cursor: auto;
    }
    .pagination .outlined-button-primary {
        width: 1.5rem;
        height: 2rem;
        background: transparent;
    }
    .pagination .outlined-button-primary:disabled {
        border-color: #ccc;
        color: var(--element-background-color);
        background: #ccc;
    }
    .input-wrapper.warning {
        border: 2px solid #ff8181;
        background: #ffbbbb;
        color: white;
    }
    .auth-content .warning input {
        background: #ffbbbb;
        color: white;
    }
    .input-wrapper input {
        padding: 0 0.5rem;
        border: none!important;
        outline: none;
        width: 100%;
        flex:1;
    }
    .select-customer-btn .selected-customer-content,
    .input-wrapper.edit-total_received-input {
        width: fit-content;
    }
    #aptInput,
    .integration-icon-container img,
    .user.modal-content .input-wrapper {
        height: 2rem;
    }
    .password-confirm {
        display:none;
        max-height: 0;
        padding: 0;
        opacity: 0;
        transition: all 0.3s ease;
        margin: 0;
    }
    
    .password-confirm.show {
        display: flex;
        max-height: fit-content;
        opacity: 1;
        margin-top: 1rem;
        padding: 0.4rem;
    }
    
    .yt-checkbox-round,
    .yt-checkbox {
        display: flex;
        flex-shrink: 0;
        appearance: none;
        padding:0;
        margin:0;
        position: relative;
        background: var(--element-background-color);
    }
    .yt-checkbox-round {
        border-radius:50%;
    }
    .yt-checkbox-round:checked,
    .yt-checkbox:checked {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }
    .yt-checkbox-round.green:checked{
        background: var(--confirm-color);
        border-color: var(--confirm-color);
    }
    .yt-checkbox-round:checked::after,
    .yt-checkbox:checked::after {
        content: '';
        position: absolute;
        width: 0.25rem;
        height: 0.5rem;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) translate(50%, -25%);
    }
    .yt-checkbox-round.partial:checked::after {
        content: '-';
        position: absolute;
        font-size: 1rem;
        top: 0;
        left: 0;
        color: var(--element-background-color);
        border: none;
        transform: translate(25%, -35%);
    }
    label.btn-radio {
        position: relative;
        flex: 1;
        width: 100%;
        font-size: 1rem;
        padding:0.3rem 1rem;
        border-radius: var(--block-border-2);
        background-color: white;
        color:var(--primary-color); 
        border:1px solid;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
        box-sizing: border-box;
    }
    label.btn-radio:hover {
        background-color: var(--primary-color);
        color: var(--element-background-color)
    }
    /***Quantity input***/
    .quantity-input-wrapper {
        display: flex;
        width: 7rem;
        height: 100%;
        border-radius: 6px;
        border: 1px solid #ccc;
    }
    .quantity-input-wrapper button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 2rem;
        padding:0;
        background: var(--element-background-color);
        color: var(--inactive-color);
    }

    .qty-input,
    input.invisible-input {
        border: none;
        width: 100%;
        box-sizing: border-box;
        outline: none;
        background: inherit;
    }
    
    textarea.invisible-input {
        outline: none;
        border: none;
        padding: 0;
        margin-top: 1rem;
        width: 100%;
    }
    .qty-input {
        text-align: center;
        background: var(--element-background-color);
        border-radius: 0;
    }
    .qty-wrapper {
        display: flex;
        border: 1px solid;
        border-radius: var(--block-border-2);
    }
    .picker-frame .qty-wrapper {
        width: 7rem;
    }
    .schedule-selection .qty-wrapper,
    .create-edit-service .qty-wrapper {
        width: 5rem;
    }
    .qty-wrapper .qty-input {
        font-size: 0.8rem;
        padding: 0 0.2rem;
    }
    
    .qty-wrapper button {
        padding: 0 0.4rem;
        background: var(--element-background-color);
        width: 2rem;
        border-color: var(--primary-color);
    }
    .quantity-input-wrapper button:hover {
        background: var(--inactive-color);
        color: var(--element-background-color);
    }
    .qty-wrapper button:hover {
        background: var(--primary-color);
        color: var(--element-background-color);
    }
    .plus-btn {
        border-left: 1px solid #ccc;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 7px;
        border-top-right-radius: 7px;
    }
    
    .minus-btn {
        border-right: 1px solid #ccc;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 7px;
        border-top-left-radius: 7px;
    }
    /***Modal***/
    .floating-menu-backdrop,
    .loading-overlay,
    .modal {
        display: none;
        position:fixed;
        top:0;
        left:0;
        width: 100%;
        height: 100%;
        background: rgb(0 0 0 / 0.01);
        backdrop-filter: blur(2px);
        justify-content: center;
        align-items: center;
    }
    .modal-header {
        padding-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
        gap: 1rem;
    }
    .modal-body {
        margin: 1rem 0;
        position: relative;
        flex: 1;
    }
    .schedule-selection .modal-body {
        padding-bottom: 0;
        gap: 0.5rem;
    }
    .full-size-picture-content .modal-body {
        margin: 0;
    }
    .loading-overlay,
    .modal {
        z-index: 1000;
    }
    .floating-menu-backdrop {
        z-index: 1;
    }
    .modal-content-right,
    .modal-content {
        position: relative;
        display: flex;
        flex-direction: column;
        position: fixed;
        background-color: var(--main-background-color);
        backdrop-filter: blur(10px);
        padding: 1rem;
        border-radius: 8px;
        box-shadow: var(--box-shadow-element);
        z-index: 1001;
        transition: opacity 0.3s ease;
        width: 100%;
        color: var(--primary-color);
    }
    .modal-content-right{
        max-height: 100%;
    }
    .modal-content {
        top: 50%;
        left: 50%;
        max-height: 90%;
        transform: translate(-50%, -50%);
    }
    #customers-modal .modal-content {
        height: 90%;
    }
    .modal-content-right {
        top: 0;
        right: 0;
    }
    .booking-view.modal-content-right {
        height:100%;
        width: 600px;
        box-sizing: border-box;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .booking-view.modal-content-right.job-done {
        box-shadow: -1px -1px 12px 4px var(--confirm-color);
    }
    .booked-job-item.job-done {
        border-bottom: 2px solid var(--confirm-color)!important;
        border-left: 2px solid var(--confirm-color)!important;
    }
    .booked-job-item.job-edit {
        border-bottom: 2px solid var(--primary-color)!important;
        border-left: 2px solid var(--primary-color)!important;
    }
    .booking-view.modal-content-right.on-the-way {
        box-shadow: -1px -1px 12px 4px #3498db;
    }
    .booking-view.modal-content-right.job-edit {
        box-shadow: -1px -1px 12px 4px var(--primary-color);
    }
    .booked-job-item.on-the-way {
        border-bottom: 2px solid #3498db!important;
        border-left: 2px solid #3498db!important;
    }    
    .booked-job-item.in-progress {
        border-bottom: 2px solid #EEA90A!important;
        border-left: 2px solid #EEA90A!important;
    }
    .booked-job-item.on-hold {
        border-color: #10acc9 !important;
    }
    .on-hold .primary-icon.on-hold-payment {
        color: #10acc9 !important;
    }
    .booking-view.modal-content-right.in-progress {
        box-shadow: -1px -1px 12px 4px #EEA90A;
    }
    .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 1rem;
        border-bottom: 1px solid;
    }
    .confirm-message {
        padding-bottom: 0.5rem;
    }
    .modal-buttons {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
    }
    .otp-info {
        vertical-align: middle;
        margin: 1rem 0;
    }
    .modal-footer {
        padding-top: 1rem;
        border-top: 1px solid;
    }
    #language-modal .modal-content .column {
        padding: 1rem;
        gap: 0.5rem;
        border: 1px solid #ccc;
        border-radius: 10px;
    }
    .width800,
    .modal-content.preview-modal-content,
    .modal-content.availability-modal {
        width: 800px;
    }
    .input.modal-content {
        min-width: 200px;
        width: fit-content;
    }
    .option-picker {
        min-width: 250px;
    }
    .width700 {
        width: 700px;
    }
    .width600,
    .customer-modal.modal-content {
        width: 600px;
    }
    .width500,
    .refund-approvals-content.modal-content,
    .recharge-modal .modal-content,    
    .modal-content.add-team,
    .availability-modal-content,
    .modal-content.otp-verification,
    .user.modal-content,
    .customers.modal-content,
    .reviews-modal,
    #account-access-modal .modal-content,
    .dashboard-container,
    .auth-options {
        width: 500px;
    }
    .width450 {
        width: 450px;
    }
    .width400,
    .campaign-preview-content.modal-content,
    .modal-content.on-my-way-content,
    .change-contacts-content,
    .change-address-content,
    .time-format-modal .modal-content,
    .pronouns-modal .modal-content,
    .review-modal-content.modal-content,
    #language-modal .modal-content,
    #otp-security-modal .modal-content,
    .auth-content,
    .biz-confirm-card,
    #address-modal .modal-content,
    #provider-modal .modal-content,
    .modal-content.remember-modal,
    .modal-content.security {
        width: 400px;
    }
    .width300 {
        width:300px;
    }
    .confirm-modal .modal-content {
        min-width:400px;
        max-width:600px;
    }
    .modal-content.role-change {
        width: fit-content;
    }
    .create-job.modal-content,
    .create-edit-service.modal-content {
        min-height: 400px;
        max-height: 90%;
    }
    .refund-approvals-content.modal-content,
    .select-existing-card-modal .modal-content {
        max-height: 500px;
    }
    .create-edit-service .modal-body {
        height:100%;
        flex:1;
    }
    .recurring-jobs .page-section {
        height: calc(100% - 6rem);
    }
    .recharge-modal .modal-content,
    .modal-content.paystub,
    .edit-coupon-modal .modal-content,
    .record-payment-modal .modal-content,
    .edit-customer.modal-content,
    .create-edit-service.modal-content,
    .availability-modal-content.modal-content,
    .edit-preferred-payment .modal-body,
    .modal-content.on-my-way-content .modal-body,
    .modal-content.add-team,
    .time-format-modal .modal-content,
    .pronouns-modal .modal-content {
        overflow: visible;
    }
    .freq-label,
    .mobile-overview .page-section,
    .edit-area-mode-modal-content .modal-body,
    .send-invoice-content .modal-body,
    .preview-modal-content .modal-body,
    .paystub-wrap,
    .people-dropdown-menu,
    .customer-dropdown-menu,
    .preferred-provider-item .provider-name,
    .calendar-section.day-view,
    .salary .page-section,
    .job-map-section,
    #dispAddress,
    #dispEmail,
    .floating-menu .user-name,
    .page.reviews,
    .reviews .page-section,
    .search-customer-section,
    .yt-collapsible-content,
    .reviews-modal,
    .auth-card,
    .collapsible-content,
    .main-container,
    .customer-review p,
    .campaign-buttons button,
    .campaign-buttons button .btn-label,
    .menu-item-span,
    .password-confirm,
    .modal-content-right,
    .modal-content,
    .customers .modal-body {
        overflow: hidden;
    }
    .recurring-jobs-list,
    .customer-details-section.column.jobs .list-items.column,
    .selected-services-tree .chip ,
    .add-coupon-section.modal-body,
    .edit-mode-modal-map-section,
    .customers .page-section,
    .referrer-list.column,
    .picker-body .customer-list,
    .salary-report,
    .provider-special-availability-list,
    .provider-recurring-availability-list,
    .legend-container.legend-services.column,
    .service-autocomplete-list.column.visible,
    .create-edit-service .modal-body,
    .signature-settings-content .modal-body,
    .booking-view.modal-content-right .modal-body,
    .survey-modal-content .modal-body,
    .dropdown-options.visible,
    .reviews-list,
    .customer-list-section,
    #content,
    .main-container,
    .calendar-section-body,
    .modal-customer-list,
    .customer-list,
    #attachedToProviders,
    #teamContainer,
    .auth-options,
    .modal-content-right .modal-body,
    .reviews-modal .provider-reviews-list.column {
        overflow-y: auto;
    }
    /***Buttons***/
    button {
        font-family: var(--primary-font);
        font-size: 1rem;
        color: var(--primary-color);
        margin: 0;
        border: none;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: var(--block-border-2);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .yt-button {
        background: var(--primary-color);
        color: white;
        gap: 1rem;
    }
    .policy-link.disabled,
    .otp-collapsible-item.connected,
    button:disabled {
        cursor: auto;
        pointer-events: none;
    }
    button:disabled {
        background:#ccc;
    }
    #acceptPolicyBtn,
    .notifications-panel .close-modal-btn,
    .calendar-filter .close-modal-btn,
    .modal .close-modal-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        border: none;
        font-size: 20px;
        font-weight: bold;
        color: black;
        margin: 0;
        padding: 0;
        width: 25px;
        height: 25px;
        line-height: 1;
        float: right;
        flex-shrink: 0;
    }
    .close-modal-btn:hover{
        background-color:var(--cancel-color);
        color:white;
        border-radius:50%;
    }
    .refund-request-item button {
        padding: 0.2rem 0.8rem;
    }
    .refund-request-item.column {
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
    
    .refund-job-host {
        border-top: 1px solid;
        border-bottom: 1px solid;
        border-color: #ccc;
    }
    .current-editing-zone-legend .close-modal-btn {
        font-size: 1rem;
    }
    .modal .modal-content.security .close-modal-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }
    #clearAddressInput.outlined-button-secondary {
        position:relative;
        border-radius: 50%;
        display: flex;
        margin-right: 0.2rem;
    }
    .outlined-button-primary {
        border: 1px solid;
        color: var(--primary-color);
        background: var(--element-background-color);
    }
    .pagination.outlined-button-primary:disabled {
        color: var(--element-background-color);
        border-color: #ccc;
    }
    .customer-collapsible-header .outlined-button-secondary,
    .outlined-button-secondary {
        border: 1px solid;
        color: var(--inactive-color);
        background: var(--element-background-color);
    }
    .cancel-button,
    .outlined-button-secondary.sm.active {
        background-color: var(--inactive-color);
        color: white;
        border-color: var(--inactive-color);
    }
    .outlined-button-secondary.sm {
        padding: 0.3rem 1rem;
    }
    .yt-button.add-customer-btn:hover,
    .yt-button.add-customer-btn:hover .plus-span,    
    .outlined-button-secondary:hover {
        border-color: var(--inactive-color);
        color: var(--element-background-color);
        background: var(--inactive-color);
        filter: none;
    }
    .cancel-btn.btn-secondary:hover,
    .confirm-btn.btn-primary:hover,
    .manage-user-buttons button:hover,
    #acceptPolicyBtn:hover,
    .yt-button:hover {
        background: var(--primary-color);
        filter: brightness(2);
        color: white;
    }
    #acceptPolicyBtn:hover:disabled,
    #acceptPolicyBtn:disabled {
        background: #ccc;
        cursor: not-allowed;
        filter: none;
    }
    #auth-verify-referral:hover {
        filter: none;
        background: transparent;
        color: var(--uath-primary-color);
    }
    .auth-password-set .yt-button {
        white-space: nowrap;
        width: 100%;
    }
    .business-code-step .yt-button:hover:disabled,
    .business-code-step .yt-button:disabled,
    .auth-password-set .yt-button:hover:disabled,
    .auth-password-set .yt-button:disabled {
        background: #ccc;
        pointer-events: none;
        cursor: not-allowed;
    }
    
    .yt-button:hover {
        background: var(--primary-color);
        filter: brightness(2);
        color: white;
    }
    .auth-oauth:disabled,
    .auth-oauth {
        position: relative;
        display: grid;
        grid-template-columns: 1.5rem 13rem;
        gap: .5rem;
        align-items: center;
        justify-items: center;
        justify-content: center;
        border: 1px solid #ccc;
        background: var(--element-background-color);
        border-radius: var(--block-border-2);
        padding:0.5rem;
        margin:0.2rem;
        color: var(--primary-color);
    }
    div.auth-oauth:hover {
        box-shadow: none;
        cusros: auto;
    }
    .auth-confirm-icon{
        background: #4caf50; 
    }
    .auth-confirm-icon.connected {
        position: absolute;
        left: 0.5rem;
        top: 1rem;
    }
    .auth-oauth .auth-confirm-icon.connected .checkmark-icon{
        width: 0.2rem;
    } 
    .auth-oauth .auth-confirm-icon.connected {
        top: 50%;
        transform: translate(0, -50%);
    }
    .link-button {
        background: transparent;
        border: none;
        color: var(--pimary-color);
        width: fit-content;
        padding: 0;
    }
    .link-button.tiny {
        font-size: .6rem;
    }
    #account-access-modal .link-button.tiny {
        color: #9d9d9d;
    }
    .add-btn,
    .job-customer-item .customer-name:hover,
    .link-button.add-phone,
    .link-button:hover {
        text-decoration: none;
    }
    .link-button.secondary {
        align-self: center;
    }
    .add-phone-form.show,
    .pronouns,
    .add-button-content,
    .link-button.add-phone {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .calendar-sync,
    .dropdown label {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .plus-span {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid;
        border-radius: 50%;
        color: inherit;
        padding:0;
        background: transparent;
    }
    .add-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid;
        border-radius: 50%;
    }

    .yt-button.add-2fa {
        background: transparent;
        color: var(--primary-color);
        border: 1px solid;
        display: grid;
        grid-template-columns: 2rem auto 2rem;
        justify-content: normal;
    }
    .yt-button.add-2fa:hover:disabled,
    .yt-button.add-2fa:disabled{
        filter: none;
        cursor: auto;
        pointer-events: none;
    }
    .sms-otp-block .link-button.secondary,
    .yt-button.add-2fa span {
        align-self: center;
    }
    .no-border-btn,
    .yt-button.copy-code-btn {
        padding: 0;
        background: transparent;
    }
    .cancel-input {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid;
        border-radius: 50%;
        background: var(--element-background-color);
    }
    .cancel-input:hover {
        background: #ff8181;
        border-color:#ff8181;
        color: var(--element-background-color);
    }
    .auth-buttons-row button {
        display: flex;
        align-items: center;
        justify-items: center;
        padding: 0.1rem;
        border: 1px solid;
        color: var(--primary-color);
        background: transparent;
    }
    .back-btn {
        justify-self: start;
        width: fit-content;
        padding: 0;
        border: none;
        color: var(--primary-color);
        background: transparent;
        font-size: 0.7rem;
    }

    .auth-signup-form,
    .auth-password,
    #2fa-input,
    #create-passkey-btn {
        position:relative;
        background: var(--main-background-color);
        color: var(--primary-color);
        opacity: 0.9;
    }
    #create-passkey-btn {
        border: 1px solid;
    }

    .auth-warning-message button {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        background: transparent;
        color: white;
        border: 1px solid;
        border-radius:  var(--block-border-2);
        white-space: nowrap;
        font-family: var(--primary-font);
    }
    .auth-warning-message button:hover {
        background: var( --element-background-color);;
        color: #ff8181;
        border-color: var( --element-background-color);;
    }
    .auth-warning-message button:hover .no-span {
        background: #ff8181;
        border-color:#ff8181;
        color: var( --element-background-color);
    }
    a.inline-link.reset-suggest-btn {
        color: white;
    }
    
    .button-outlined {
        border: 1.5px solid var(--primary-color);
        width: fit-content;
        border-radius: 5px;
        padding: 0.1rem 0.5rem;
    }
    .middle-screen-section .add-circle-btn {
        display: flex;
        padding: 0;
        border-radius: 50%;
        background: transparent;
        font-size: 3rem;
        border: 2px solid;
    }
    .day-jobs-placeholder .primary-icon,
    .middle-screen-section .add-circle-btn,
    .customer-modal .customer-avatar {
        width: 4rem;
        height: 4rem;
    }
    .prvider-complete-item .dropdown {
        width: 5rem;
    }
    .add-circle-btn:hover,
    .add-service-btn:hover .plus-span,
    .btn-radio:has(> input:checked),
    .link-button.add-phone:hover .add-btn,
    .outlined-button-primary:hover,
    .add-custom-payment-btn:hover .plus-span,
    .add-button-content:hover .add-icon,
    .service-search-btn:hover .add-icon,
    .picker-frame.column .add-item-btn:hover .plus-span {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--element-background-color);
    }
    .delete-row-btn {
        background-color: var(--cancel-color);
        border-color: var(--cancel-color);
        color: var(--element-background-color);
        border-radius: 50%;
        font-size: 0.7rem;
        padding: 0;
    }
    .input-wrapper-action-buttons {
        display: grid;
        grid-template-columns: 50% 50%;
        height: 100%;
    }
    #notifications-clear-all-btn {
        padding: 0 0.4rem;
        font-size: 0.6rem;
        border-radius: var(--block-border-2);
        color: white;
        background: var(--cancel-color);
    }
    #notifications-clear-all-btn:hover,
    .yt-button.in-progress:hover,
    .yt-button.job-done:hover,
    .input-wrapper-action-buttons button:hover,
    .delete-row-btn:hover {
        filter: brightness(1.1);
    }
    .yt-button.cancel-btn {
        background: var(--cancel-color);
    }
    .yt-button.connected,
    .yt-button.job-done,
    #changeStatusMobile.job-done, 
    .provider-status-row .job-done, 
    .status-icon.active,
    .primary-label.primary .label-small,   
    .yt-button.confirm-btn,
    button.input-wrapper-confirm-edits {
        background: var(--confirm-color);
    }
    .notif-action-btn.notif-delete:hover,
    .yt-button.cancel-btn:hover {
        background: var(--cancel-color);
        filter: brightness(1.1);
    }
    .notif-action-btn.notif-open:hover,
    .yt-button.confirm-btn:hover,
    .yt-button.connected:hover
    .yt-button.confirm-btn:hover {
        background: var(--confirm-color);
        filter: brightness(1.2);
    }
    .manage-user-buttons button {
        background:var(--primary-color);
        color:white;
    }
    .manage-user-buttons button,
    .radio-label,
    .pie-block .dropdown,
    .outlined-button-secondary.frequency-btn,
    .yt-button.schedule-service-now {
        padding: 0.2rem 1rem;
    }
    .active-card .edit-team-btn,
    .edit-service-area-btn {
        position: relative;
        display: flex;
        width: fit-content;
        margin-right: 0;
        font-size: 0.65rem;
        align-items: center;
        justify-content: center;
        border: 1px solid;
        background-color: transparent;
        color: var(--primary-color);
        padding: 0.2rem;
    }
    .edit-service-area-btn{
        align-self: start;
    }
    .edit-team-btn:hover,
    .edit-service-area-btn:hover {
        color: white;
        background-color: var(--primary-color);
    }
    .delete-special-btn {
        background: #fff;
        color: var(--inactive-color);
        border: 1px solid var(--inactive-color);
        border-radius: 50%;
        height: 1.25rem;
        width: 1.25rem;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 0.65rem;
        line-height: 1;
        flex-shrink: 0;
        cursor: pointer;
    }
    .yt-button.add-customer-btn,
    .add-custom-number-btn,
    .yt-button.add-customer-btn,
    #addReview,
    #addCustomer,
    #addCustomerModal,
    #addTeam {
        background: white;
        color: var(--inactive-color);
        border: 2px solid;
        justify-self: flex-end;
        border-radius: 50%;
        height: 1rem;
        width: 1rem;
        font-size:0.7rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
    }
    .delete-special-btn:hover,
    .add-custom-number-btn:hover,
    .yt-button.add-customer-btn:hover,
    #addReview:hover,
    #addCustomer:hover,
    #addCustomerModal:hover,
    #addTeam:hover {
        background: var(--inactive-color);
        color: white;
        border-color: var(--inactive-color);
    }
    button.menu-item {
        background: transparent;
        justify-content: start;
    }
    #addAltNameBtn {
        display: flex;
        margin: 0;
    }
    
    .recurring-address-section .edit-recurring-address-btn,
    .recurring-frequency-section .edit-recurring-frequency-btn,
    .recurring-service-section .edit-recurring-service-btn,
    .modal-header .edit-customer-btn,
    .edit-service-btn {
        padding: 0.1rem 0.3rem;
        border-radius: var(--block-border);
    }
    
    .edit-recurring-address-btn,
    .edit-recurring-frequency-btn,
    .edit-recurring-service-btn,
    .edit-customer-btn,
    .edit-service-btn {
        font-size: 0.6rem;
        top: 0.5rem;
        right: 0.5rem;
        background: var(--element-background-color);
    }
    .recurring-address-section .edit-recurring-address-btn,
    .recurring-frequency-section .edit-recurring-frequency-btn,
    .recurring-service-section .edit-recurring-service-btn,
    .booked-job-section .edit-customer-btn,
    .booked-job-section .edit-service-btn {
         position: absolute;
         z-index: 1;
    }
    .booked-job-section .edit-customer-btn {
        padding: 0;
        border: none;
    }
    .add-service-btn {
        font-size: 0.8rem;
        background: transparent;
        padding: 0;
        width: fit-content;
        color: var(--inactive-color);
    }
    .add-service-btn.selected {
        font-size: 1rem;
        color: var(--primary-color);
    }
    .outlined-button-secondary.payment-method-remove,
   .coupon-remove,
    .delete-mod {
        padding: 0;
        line-height: 0.8;
    }
    .picker-frame.column .add-item-btn {
        justify-content: left;
        background: transparent;
        padding: 0.3rem 0.5rem;
    }

    .add-icon {
        border-radius: 50%;
        border: 2px solid;
        width: 0.8rem;
        height: 0.8rem;
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /***SVG***/
    .primary-icon,
    .security-step span img,
    .primary-icon svg {
        display:flex;
        justify-content: center;
    }
    
    .primary-icon svg {
        width: 100%;
        height: 100%;
    }
    .outlined-button-secondary.payment-method-remove,
    .mobile-overview-item .primary-icon.payment-method-icon,
    .primary-icon.customer-actions-icon,
    .primary-icon.review-location-icon,
    .primary-icon.onerem,
    .primary-icon.job-status-icon,
    .primary-icon.search-icon,
    .primary-icon.transaction-refund,
    .yt-checkbox-round.partial:checked::after,
    .yt-checkbox-round,.yt-checkbox,
    .auth-failed-icon,.auth-confirm-icon,
    .language img.primary-icon.profile-picture,
    .primary-icon.on-hold-payment,
    .outlined-button-primary.remove-zip-btn,
    .request-payment-method-btn .plus-span,
    .add-preferred-method-btn .plus-span,
    .calendar-date-selection button,
    .primary-icon.delivered.tooltip-hover,
    .attention-grey,.tooltip-hover,
    .primary-icon.payment-icon,
    #clearAddressInput.outlined-button-secondary,
    .current-editing-zone-legend .close-modal-btn,
    .add-btn,.plus-span,.delete-row-btn,.coupon-remove,.delete-mod,
    .primary-icon.transaction-hold,
    .contact-item .primary-icon.copy-link,
    .star-rating svg,
    .primary-icon.draggable-handle,
    .primary-icon.transaction-reward,
    .job-inputs.row .primary-icon,
    .outlined-button-secondary.remove-referrer-btn,
    .outlined-button-secondary.delete-customer-btn,
    .address-inline-picker .delete-btn,
    .contact-inline-picker .delete-btn,
    .outlined-button-secondary.edit-btn,
    .primary-icon.blocked,
    .provider-img,
    .floating-menu-item .primary-icon,
    .edit-service-address,
    .button.copy-code-btn,
    .primary-icon.copy-icon,
    .yt-button .primary-icon.copy-icon svg {
        width: 1rem;
        height: 1rem;
    }
    .auth-oauth .auth-confirm-icon.connected,
    .page-preview .primary-icon.transaction-payment-method {
        width: 1rem;
    }
    .toggle-btn,
    .primary-icon.filter-icon,
    .remove-email-tag,
    .toggle-handle-circle,
    .selected-customer-content .customer-initials,
    .picker-item.row .primary-icon,
    .provider-avatar.mini {
        width: 1.2rem;
        height: 1.2rem;
    }    
    .provider-img,
    .cancel-transaction,
    .primary-icon.transaction-refund,
    .primary-icon.not-assigned,
    .calendar-navigation .nav,
    .job-attachments .primary-icon svg {
        width: 1.3rem;
        height: 1.3rem;
    }
    .review-provider-item .primary-icon.provider-avatar,
    .review-provider-item .provider-avatar,
    .primary-icon.notification-icon,
    .primary-icon.onehalfrem,
    .chat-avatar,
    .primary-icon.launcher-icon,
    .primary-icon.contact-icon,
    .refund-approvals-content .modal-header .primary-icon,
    .payment-method-dropdown .dropdown-selected .primary-icon,
    .payment-method-dropdown .dropdown-option .primary-icon,
    .providers-avatars.row .provider-avatar,
    .primary-icon.salary-settings,
    .zone-header .warning,
    .notification-item .primary-icon,
    .invoice-preview-actions .primary-icon,
    .calendar-date-selection button,
    .twilio-balance .loading-spinner,
    .cancel-input,
    .sync-gcal-btn.outlined-button-secondary,
    .disconnect-gcal-btn.outlined-button-secondary,
    .salary-action-btn,
    img.auth-2fa-icon,
    .yt-collapsible-header img,
    .yt-collapsible-header .primary-icon svg,
    .auth-oauth .primary-icon,
    .auth-oauth .primary-icon svg,
    .auth-oauth img {
        height: 1.5rem;
        width: 1.5rem;
    }
    img.customer-avatar,
    .primary-icon.create-coupon,
    .message-preview-modal .primary-icon,
    .invoice-preview-actions button,
    .calendar-sync img,
    .provider-col-header .provider-avatar,
    .provider-top-row .provider-avatar,
    #editBookedJobMobile,
    .sync-row img,    
    .provider-float-item svg,
    .provider-avatar,
    img.profile-picture,
    .primary-icon.profile-picture svg,
    .auth-buttons-row button,
    .profile-picture,
    .menu-icon,
    .menu-item .primary-icon,
    .lang-opt img {
        width: 2rem;
        height: 2rem;
    }
    .booking-view .primary-icon.transaction-payment-method,
    .primary-icon.transaction-payment-method {
        width:2rem;
    }
    
    .menu-item.active .primary-icon {
        height: 2.1rem;
        width: 2.1rem;
    }
    .primary-icon.filter-icon {
        padding: 0.2rem;
    }
    img.profile-picture,
    .primary-icon.profile-picture svg {
        border: 2px solid;
        border-radius: 50%;
    }
    /*.share-btn .primary-icon,
    .share-btn .primary-icon svg,*/
    .team-img,
    .team-card-header .profile-picture,
    .menu-header .profile-picture{
        width: 3rem;
        height: 3rem;        
    }
    .user-profile .team-img {
        width: 6rem;
        height: 6rem;
    }
    
    .primary-icon.edit-avatar svg {
        width: 50%;
        height: 50%;
    }
    .yt-button.add-customer-btn .plus-span,
    .primary-icon.more-icon,
    .profile-picture.large,
    .provider-img img,
    .provider-img .provider-avatar,
    .loading-lottie svg,
    .section-container-header button .yt-primary-icon svg,
    .section-container-header button .yt-primary-icon {
        height: 100%;
        width: 100%;
    }
    .menu-icon path {
        stroke: var(--primary-color);
    }
    .yt-svg-contact-icon-main,
    .loading-lottie path,
    svg.qr-svg path {
        fill: var(--primary-color);
    }
    .svg-contact-icon-bg{
        fill: var(--main-background-color);
    }
    svg.qr-svg {
        align-self: center;
    }
    .calendar-date-selection button {
        color: var(--inactive-color);
        background: transparent;
    }
    .calendar-date-selection button:hover {
        background: transparent;
        color: var(--primary-color);
    }
    /*** Dropdown***/
    select,
    .dropdown {
        width: 100%;
        padding: 0.3rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        font-size: 1rem;
        box-sizing: border-box;
        background: white;
        position: relative;
    }
    select {
        color: var(--primary-color)
    }
    .dropdown-options.visible {
        position: absolute;
        z-index: 1001;
        padding: 0.5rem;
        background: white;
        top: calc(100% + 10px);
        left: 0;
        width: 100%;
        max-height: 20rem;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius:  var(--block-border-2);
    }
    .dropdown.open-up .dropdown-options.visible {
        bottom: calc(100% + 5px);
        top: auto;
    }
    .prvider-complete-item .dropdown-options.visible {
        max-height: 6rem;
        font-size: 0.9rem;
        gap: 0;
    }
    .dropdown-option {
        padding: 0.5rem;
    }
    
    .dropdown-option:hover {
        background: #f3f3f3;
        border-radius: var(--block-border-2);
    }
    .dropdown.primary-phone-dropdown,
    .dropdown.invoice-customer-switcher {
        display: flex;
        height: 2rem;
        align-items: center;
        border-color: var(--primary-color);
        width: 15rem;
        font-size: 0.8rem;
    }
    
    .dropdown.invoice-customer-switcher .dropdown-options {
        gap:0
    }
    .input-wrapper-action-buttons button {
        height:100%;
        aspect-ratio: 1/1;
        padding: 0;
        position: relative;
        color:white;
        border-radius: 4px;
    }
    button.input-wrapper-cancel-edits {
        background: var(--cancel-color);
    }

    .input-wrapper-confirm-edits .checkmark-icon {
        height: 50%;
        width: 30%;
        top: 15%;
    }
    .discount-editor .input-wrapper-confirm-edits.disc-apply,
    .summary-total-row .input-wrapper-action-buttons button  {
        padding: 0;
        height: 1.5rem;
        width: 1.5rem;
        border-radius: 3px;
        position: relative;
    }
    #showToday {
        padding: 0.3rem 1rem;
    }
    /***Collapsible***/
    .yt-collapsible {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        border: 1px solid;
        border-radius: var(--block-border-2);
        background: var(--main-background-color);
        opacity: 0.9;
        box-sizing: border-box;
        backdrop-filter: blur(10px);
    }
    .collapsible-content {
        display: none;
        transition: max-height 0.5s ease-in-out;
        padding: 0.5rem;
    }
    .collapsible-container {
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        width: 100%;
    }
    
    .collapsible-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem;
        border: 1px solid #ddd;
        border-radius: var(--block-border-2);
        transition: background-color 0.3s ease;
    }
    .reset .yt-collapsible {
        margin: 0.2rem;
        width: auto;
    }
    .otp-collapsible-item {
        flex-direction: column;
        padding: 1rem;
        background: var(--element-background-color);
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        margin: 0.2rem;
    }
    .recurring-job-item.row,
    .recurring-job-set.row,
    .chat-type .primary-icon,
    .job-customer-item .customer-name,
    .primary-icon.void-transaction,
    .contact-item.payment-method .more-icon,
    .contact-item,
    .primary-icon.salary-settings,
    .item.row,
    .coupon-item,
    .coupon-item label,
    .zone-header,
    .collapsible-header,
    .preferred-provider-item,
    .notification-item,
    .address-item-selected,
    .customer-collapsible-header,
    .label-medium.provider-hourly-rate,
    .label-medium.tip-amount,
    .label-medium.total-amount,
    .label-medium.job-duration,
    .primary-icon.copy-link.icon-copy,
    .qty-wrapper[data-role="overtime"] .qty-input,
    .picker-item.row,
    .service-autocomplete-item,
    .option-item.grid,
    .calendar-sync,
    .impersonation button,
    .provider-checkbox,     
    .radio-label,
    .sync-row,
    .integration-button,
    label.btn-radio,
    .calendar-period,
    .salary-action-btn,
    .custom-toggle-type-1,
    .custom-toggle-type-2,
    .attention-grey,
    .attention-yellow,
    .tooltip-hover,
    .tooltip.inline,
    label.phone-item,
    .booked-job-item,
    .team-card-header,
    .customer-review,
    .review-provider-item,
    .review-customer-item,
    .auth-failed-icon, .auth-confirm-icon,
    .multi-integration-launcher,
    .multi-integration-launcher .launcher-menu-item,
    .provider-special-availability-item,
    .menu-bar-container .menu-item,
    .menu-bar-container .menu-item span,
    .calendar-type-selection span,
    .primary-icon.edit-avatar,
    .yt-checkbox-round,
    .yt-checkbox,
    #acceptPolicyBtn,
    .modal .close-modal-btn,
    .auth-oauth:disabled,
    .auth-oauth,
    .back-btn,
    .dropdown,
    .dropdown-option,
    .yt-collapsible,
    .otp-collapsible-item,
    .tooltip,
    .menu-icon,
    button {
        cursor: pointer;
    }
    .auth-oauth:hover,
    #create-passkey-btn:hover,
    .otp-collapsible-item:hover,
    .collapsible:hover{
        box-shadow: var(--box-shadow);
        filter: none
    }
    .yt-collapsible-header {
        height: 3rem;
        width: 100%;
        justify-content: center;
        padding: 0.5rem;
        box-sizing: border-box;
    }
    .star-rating {
        display: flex;
        align-items: center;
        justify-items: center;
    }
    .star-rating {
        color: var(--star-rating);
    }
    /*.star-rating{
        display:grid;
        grid-template-columns: 5rem 2rem;
        gap: 0.5rem;
        align-items: center;
        justify-items: center;
    }*/
    .customer-review .star-rating,
    .team-card-header .star-rating {
        display: flex;
        gap: 0;
    }
    
    .auth-2fa-login,
    .auth-main-body {
        flex-direction: column;
        width: 100%;
    }
    
    .yt-collapsible-content {
        max-height: 0;
        transition: all 0.3s ease;
    }
    .yt-collapsible-content.open {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        width: 100%;
        max-height:fit-content;
        box-sizing: border-box;
    }
    /***Toggle***/
    .coupon-toolbar{display:flex;align-items:center;gap:1rem;margin:.5rem 0 .75rem}
    .segmented-toggle{
        position:relative;
        display:inline-flex;
        border:1px solid #ccc;
        border-radius:999px;
        padding:0}
    .segmented-toggle .seg-btn{
        background:transparent;
        border:0;cursor:pointer;
        padding:.4rem 1rem;
        border-radius:999px;
        font:inherit
    }
    .customer-details-section.row .segmented-toggle .seg-btn {
        padding: 0.1rem 0.5rem;
    }
    .segmented-toggle .seg-btn.active{
        color:var(--primary-color);
        font-weight:600
        
    }
    .segmented-toggle .seg-indicator {
        position:absolute;
        height:calc(100% - 4px);
        border:2px solid var(--primary-color);
        border-radius:999px;
        pointer-events:none;
        transition:transform .2s,left .2s,width .2s
    }
    
    #teamStatusToggle {
        width: 7rem;
        height: 1.6rem;
    }
    #teamStatusToggle .toggle-handle-circle {
        width: 2.5rem;
        height: 1.3rem;
        border-radius: 1rem;
    }
    #teamStatusToggle .checked  .toggle-handle-circle {
        right: calc(100% - 2.7rem);
    }
    #teamStatusToggle .toggle-before {
        font-size: 0.6rem;
    }
    .checked .toggle-after,
    .unchecked .toggle-before {
        display: flex;
        margin: 0 0.4rem;
        color: var(--main-background-color);
        font-size: 0.8em;
    }

    .custom-toggle-type-1,
    .custom-toggle-type-2 {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        justify-content: space-between;
        border: 1px solid #ccc;
        border-radius: 18px;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }
    .unchecked .custom-toggle-type-2 {
        background-color: #ff8282;
    
    }
    .checked .custom-toggle-type-2 {
        background-color: #30d636;
    }
    .toggle-type-2-wrapper {
        display:flex;
        align-items:center;
        position: relative;
        width: 100%;
        height: 100%;
    }
    .toggle-handle-circle {
        border-radius: 50%;
        border: 1px solid #ccc;
        background: white;
        transition: all 0.3s ease;
    }
    /*.checked .toggle-handle-circle {
        right: calc(100% - 21px);
    }*/
    #personalSameDayJobToggle,
    #personalAutoAssignmentToggle,
    #autoAssignToggle,
    #contractorToggleContainer,
    #providerToggleContainer {
        display: flex;
        align-items: center;
        height: 1.5rem;
    }
    #personalSameDayJobToggle,
    #personalAutoAssignmentToggle,
    #autoAssignToggle,
    #providerToggleContainer {
        width: 3.8rem;
    }    
    #contractorToggleContainer{
        width: 55px;
    }

    /*** OTP ***/
    .sms-otp-block{
        margin-top: 0.5rem;
        padding-top: 1rem;
        border-top: 1px solid #ccc;
    }
    .otp-collapsible {
        overflow:hidden;
        max-height:0;
        transition: max-height 0.3s ease;
    }
    .otp-collapsible.open {
        max-height:fit-content;
    }
    #otp-container .otp-collapsible.open {
        margin-top: 1rem;
    }
    .collapsible-otp-header {
        display: grid;
        grid-template-columns: 2rem auto 1rem;
        align-items: center;
        gap: 1rem;
    }
    .secret-wrap {
        display: grid;
        grid-template-columns: auto 1rem;
        gap: .5rem;
        padding: 0.5rem;
        border: 1px solid;
        border-radius: var(--border-radius);
    }
    .secret-wrap pre {
        white-space: pre-wrap;
        word-break: break-all;
        max-width: 100%;
        margin:0;
    } 
    .otp-holder {
        display: flex;
        gap: .3rem;
        justify-content: center;
        margin: 1rem 0;
    }
    .otp {
        width: 2rem;
        font-size: 1.1rem
    }
    .auth-2fa-icon,
    .otp-info img,
    .auth-2fa-step img {
        vertical-align: middle;    
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .calendar-type-selection,
    .auth-2fa-steps {
        gap: 0.5rem;
    }
    .auth-2fa-step {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;
        gap: 0.5rem;
    }
    .chat-message-section.column,
    .method-icon .primary-icon,
    .row.rules-header .row,
    .provider-complete-time.open .column,
    .picker-frame.column .yt-button.apply-btn,
    #providerAptAddress,
    .auth-forgot-password-confirmation,
    .auth-forgot-password,
    .auth-password,
    .modal-buttons button,
    .row.address-input input,
    .modal-footer button,
    .remember-modal button,
    .auth-buttons-row img,
    .biz-confirm-card button,
    .yt-button.complete-account-btn,
    #go-to-cabinet,
    .invoice-actions-row .primary-icon,
    .availability-section input,
    .row.edit-mode input,
    .user-profile .column,
    #addressSection input,
    .page,
    .auth-password,
    .modal-buttons button,
    .row.address-input input,
    .modal-footer button,
    .remember-modal button,
    .auth-buttons-row img,
    .biz-confirm-card button,
    .yt-button.complete-account-btn,
    #go-to-cabinet,
    .add-phone-form input {
      width: 100%;
    }
    .add-phone-form button {
      white-space: nowrap;
      padding: 0.3rem 1rem;
      font-size: 1rem;
      border: 1px solid;
    }
    .phone-radio {
        padding-left: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .review-answer, 
    .customer-review,
    .loaded-users.column .user-name,
    .job-start-time,
    .floating-menu,
    .reset-timer,
    .sms-timer,
    .review-provider-item,
    .alt-name-display span,
    .create-job .service-summary .link-button,
    .auth-oauth .collapsible-otp-header,
    .calendar-time-hover,
    .paystub-status,
    .attention-yellow, 
    .provider-status,
    .discount-editor, 
    .discount-type-selector.row button,
    .contact-item.review .providers-avatars.row span.provider-avatar,
    .preferred-provider-item .provider-name,
    .calendar-navigation button,
    .section-container-actions-row button,
    .dropdown.invoice-customer-switcher .dropdown-options,
    .user.modal-content .outlined-button-secondary,
    .reviews-modal .customer-review p,
    .calendar-sync,
    .copiright,
    .otp-info,
    .auth-oauth:disabled,
    .auth-oauth,
    .auth-warning-message button,
    button.menu-item,
    #aptInput,
    #addressInput,
    .campaign-buttons button.long-label,
    .otp-support-note,
    .otp-helper-note,
    .sms-enter,
    .sms-request-label {
        font-size: 0.8rem;
    }
    .reset-timer,
    .sms-timer {
        padding: 0.2rem 0.5rem;
        border: 2px solid;
        width: fit-content;
        align-self: center;
        min-width: 4rem;
    }
    #otp-verification .otp-collapsible.open {
        margin-top: 1rem;
    }
    .otp,
    #aptInput,
    .prvider-complete-item .dropdown-selected,
    .confirm-message, 
    .otp-info,
    p.section-placeholder,
    .auth-password-message,
    .impersonation .toggle-button:hover,
    .impersonation button,
    .calendar-section-header,
    .otp-verification .phone-label,
    .page-header,
    .active-card .edit-team-btn,
    .edit-service-area-btn,
    .otp-support-note,
    .otp-helper-note,
    .sms-enter,
    .sms-request-label,
    input.biz-code,
    .reset-timer,
    .sms-timer,
    .otp-hiny.label-small,
    .phone-note.label-medium,
    #otp-verification .phone-label {
        text-align: center;
    }
    .select-existing-card-modal .modal-body.column,
    .otp-verification .modal-body {
        margin-bottom: 0;
    }
    
    /***Toast***/
    .copy-toast .auth-confirm-icon{
        width: 0.9rem;
        height: 0.9rem;
        font-size: 0.6rem;
        border: 1px solid;
        background: transparent;
        display:inline-flex;
        justify-content: center;
        align-items: center;
        border-radius:50%;
    }
    .copy-toast .checkmark-icon{
        height:0.3rem;
        width:0.15rem;
        border-right: 1.5px solid #fff;
        border-bottom: 1.5px solid #fff;
        position:relative;
        top:-1px;
    }
    .auth-warning-message {
        background: #ff8181;
        display: flex;
        gap: 0.5rem;
        color: white;
        padding: 0.5rem;
        font-size: 0.7rem;
        border-radius: 6px;
        margin-top: 0.5rem;
    }
    
    #email-warning-message {
        display: block;
    }
    /***Tooltip***/
   .info.tooltip,
    .attention-grey,
    .attention-yellow,
    .tooltip-hover,
    .tooltip.inline {
        display: flex;
        flex-shrink: 0;
        border: 1px solid;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .attention-grey,
    .tooltip-hover,
    .tooltip.inline {
        color: var(--inactive-color);
        background: #ddd;
    }
    .zone-item.selected {
        background: #ddd;
    }
    .attention-yellow {
        color: #ffa900;
        background: transparent;
    }
    
    .info.tooltip {
        color: var(--primary-color);
    }
    .tooltip-float {
        background: #333333ba;
        backdrop-filter:blur(5px);
        color: #fff;
        padding: 6px 10px;
        border-radius: 4px;
        font-size: 0.7rem;
        z-index: 10000;
        max-width: 250px;
        white-space: normal;
        display: inline-block;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .primary-icon.review-location,
    .info.tooltip,
    .tooltip.inline {
        font-size: 0.7rem;
        width: 0.7rem;
        height: 0.7rem;
    }
    .attention-grey,
    .tooltip-hover {
        position: relative;
        font-size: 1rem;
    }
    .attention-yellow {
        position: relative;
        width: 0.8rem;
        height: 0.8rem;
    }
    .provider-float {
        flex-direction: column;
        padding: 0.5rem;
        background: var(--element-background-color);
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-element);
    }
    
    .provider-float-item {
        display: flex;
        gap: 0.5rem;
    }
    .provider-float-item img{
       height: 3rem;
       width: 3rem;
    }
    .payment-status.label-small {
        padding: 0.2rem 0.5rem;
        border-radius: var(--block-border-2);
    }
    .payment-status.label-small.paid,
    .primary-icon.delivered.tooltip-hover {
        background: var(--confirm-color);
        color: white;
    }
    /***Reviews***/
    .page.recurring-jobs .recurring-jobs-list,
    .page.customers .customer-list,
    .report-section.payment-methods-section,
    .idle-customers-report,
    .service-details-reports-section,
    .reviews .page-section {
        margin: 0.3rem;
    }
    .reviews-actions-section {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
    }
    .reviews-list {
        padding: 0.5rem 0;
    }
    .customer-review-item {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin: 0.3rem;
        padding: 1rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        position:relative;
        background: var(--element-background-color);
        box-sizing: border-box;
        box-shadow: var(--box-shadow-element);
    }
    .customer-review-item.verified-review .star-rating,
    .customer-review-item.verified-review {
        border: 2px solid var(--confirm-color);
    }
    .customer-review-item.verified-review {
        box-shadow: 1px 1px 8px 2px rgb(25 127 29 / 20%);
    }
    .customer-review-item.unresolved {
        padding: 0.5rem;
        border: 2px solid var(--cancel-color);
        box-shadow: 1px 1px 8px 2px rgb(194 1 1 / 20%);
    }
    .customer-review-item .customer-review {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: space-between;
        border: none;
        border: 1px solid #ccc;
    }
    .customer-review-item .customer-review:hover {
        box-shadow: none;
    }
    .customer-review-item.system-review-item.unsolved .star-rating,
    .customer-review-item.system-review-item.unsolved {
        border: 2px solid var(--cancel-color);
    }
    .review-provider-item,
    .review-customer-item {
        display: flex;
        align-items: center;
        padding: 0.3rem;
        gap: 0.5rem;
        width: fit-content;
        box-sizing: border-box;
        white-space: nowrap;
        justify-content: space-between;
        position: relative;
        border: 1px solid transparent;
    }
    .review-provider-item:hover,
    .review-customer-item:hover {
        border: 1px solid #ccc;
        border-radius: var(--block-border);
        padding:0.3rem;
    }
    .reviews-modal {
        max-height: 90%;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    } 
    .reviews-modal .provider-reviews-list.column {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        gap: 1rem;
        overflow-x: hidden;
    }
    
    .reviews-modal .customer-review {
        width: 100%;
        height: 100%;
        background: var(--element-background-color);
        padding: 1rem;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow);
        gap: 1rem;
    }
    
    .reviews-modal .customer-review p {
        margin: 0;
        display: block;
        text-indent: 1rem;
    }
    .time-row.row,
    .reviews-modal .customer-review .row {
        gap: 1rem;
    }
    .time-row.row {
        display: grid;
        grid-template-columns: 4rem auto;
    }
    .time-row-slots.row {
        gap: 1rem;
        width: 100%;
    }
    
    .system-comment-section {
        gap:1rem;
        padding: 0.5rem 0!important;
        justify-content: end;
    }
    .system-comment-section .dropdown.system-action-dropdown {
        width: 200px;
    }
    .customer-review-item .primary-icon.tooltip {
        width: 1rem;
        height: 1rem;
        background:white;
        border-color:var(--primary-color);
    }
/***Pages***/
    /***Login***/
    .picker-frame.column .row,
    #language-modal .modal-content,
    #otp-security-modal .modal-body,
    #account-access-modal .modal-body,
    .confirm-modal .modal-content,
    .section-container.main,
    .auth-2fa-login {;
        gap: 1rem;
    }
    #auth-container {
        justify-content: center;
        min-height: calc(100vh - 6rem);
    }
    
    .business-code-wrapper {
        display: grid;
        grid-template-columns: repeat(6, 15%);
        justify-content: space-between;
    }
    .biz-code { 
        text-transform: uppercase; 
    }
    input.biz-code {
        aspect-ratio: 1/1;
        font-size: 2rem;
    }
    .auth-content {
        background: var(--background-color);
        padding: 1rem;
        position: relative;
        font-family: var(--primary-font);
        align-items: center;
        color: var(--primary-color);
        border-radius: var(--block-border-2);
        transition: all 0.3s;
        align-self: center;
        background: var(--main-background-color);
        box-shadow: var(--box-shadow-element);
    }
    .auth-oauth-column {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        width: 100%;
    }
    .auth-content.create-account {
        max-width: 450px;
        width: 100%;
    }
    .auth-create-account-confirmation {
        flex-direction: column;
        gap: 2rem;
    }
    .auth-forgot-password-confirmation {
        flex-direction: column;
        gap: 1rem;
    }
    .auth-buttons-row {
        display: flex;
        justify-content: center;
        gap: 1rem;
        width: 100%;
    }
    .attn {
        display: inline-flex;
        width: 0.8rem;
        height: 0.8rem;
        border: 1px solid;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .auth-card {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        margin-top: 2rem;
        height: auto;
        justify-content: center;
    }
    .auth-password-form {
        /*margin-top: 1rem;*/
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        box-sizing: border-box;
        position:relative;
    }
    .yt-collapsible-content .auth-password-set .yt-button {
        margin-top: 1rem;
    }
    .auth-password-message {
        margin-top: 0.5rem;
        font-size: 0.7rem;
        line-height: 1.3;
        color: #666;
        background: #FCFCB5;
        padding: 0.3rem;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
    }
    .auth-password-message.error{
        color: white;
        background: #ff8181;
    }
    .auth-password-wrapper a {
        font-size: 0.7rem;
        align-self: end;
        color: var(--primary-color);
        margin-top: 0.5rem;
    }
    
    .auth-password-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .auth-password-set .yt-button {
        white-space: nowrap;
        width: 100%;
    }
    
    .auth-2fa-login,
    .auth-main-body {
        flex-direction: column;
        width: 100%;
    }
    .modal-buttons,
    .yt-label,
    #address-modal .modal-footer,
    .auth-main-body,
    .auth-h1,
    .yt-collapsible-header,
    .auth-2fa-success,
    .auth-password-set {
        display: flex;
        gap: 1rem;
        align-items: center;
    }
    
    .auth-password-set {
        flex-direction: column;
        gap:0;
        margin:0;
        width: 100%;
    }
    /***Reset password page***/
    .reset-msg.yt-note {
        font-size: .8rem;
        margin: .5rem 0;
        width: 100%;
        justify-content: center;
        display: flex;
    }
    .modal-buttons button,
    .collapsible-otp-header span {
        white-space: nowrap;
    }
    .booked-job-section.notification-section,
    .otp-collapsible-item.yt-auth-oauth {
        gap: 0;
    }
    
    .auth-oauth .collapsible-otp-header {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .auth-oauth .otp-collapsible.open {
        margin-top: 0.5rem;
        width: 100%;
    }
    #account-access-modal .auth-oauth-column,
    .auth-label-medium.referral-code-text,
    .otp-collapsible.inner-otp-collapsible.open {
        margin-top: 1rem;
    }
    .auth-oauth .otp-collapsible-item {
        gap:0.5rem;
    }
    .conversation-bottom-bar,
    .auth-oauth .otp-collapsible-item .collapsible-otp-header {
        justify-content: center;
    }
    label.phone-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0.3rem;
        border-radius:5px;
    }

    label.phone-item.selected {
        background:#ccc;    
    }
    .otp-collapsible.open .collapsible-otp-header {
        /*justify-content:space-between;*/
    }
    /***Dashboard***/
    #content,
    .main-container {
        display: flex;
        width: 100%;
        flex: 1;
        box-sizing: border-box;
    }
    .main-container {
        margin: 0.5rem;
        box-sizing: border-box;
        width: calc(100% - 1rem);
    }
    .header-buttons {
        display: flex;
        justify-content: end;
        gap: 1rem;
    }
    .page-section {
        flex: 1;
        box-sizing: border-box;
    }
    /***Calendar***/
    .overview-map-section {
        min-height: 30%;
        height: 30%;
        margin: 0 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-light);
    }
    .day-jobs-placeholder.column {
        align-items: center;
        color: var(--inactive-color);
        background: var(--element-background-color);
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-light);
        padding: 1rem;
    }
    .day-jobs-view.column {
        padding: 0.5rem;
        flex: 1;
        gap: 0.5rem;
        overflow-y: auto;
        box-sizing: border-box;
    }
    .booked-job-item.mobile-overview-item.paid {
        box-shadow: 0 0px 6px rgb(0 196 76)
    }
    .booked-job-item.mobile-overview-item.pastdue {
        box-shadow: 0 0px 6px rgb(255 126 126)
    }
    .booked-job-item.mobile-overview-item {
        position: relative;
        box-sizing: border-box;
        left: 0;
        right: 0;
        box-shadow: var(--box-shadow-light);
        border: none!important;
    }
    .booked-job-item-header {
        display: flex;
        font-size: 0.5rem;
        align-items: center;
        justify-content: space-between;
    }
    .job-header-row {
        display: grid;
        grid-template-columns: auto 30% 11rem;
        align-items: center;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid;
        gap: 0.5rem;
        font-size:0.85rem;
    }
    .job-header-row button {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 2rem;
        box-sizing: border-box;
        font-size: 0.7rem;
        padding: 0;
    }
    
    .booked-job-item .attention-icon {
        position: absolute;
        top: -0.3rem;
        right: -0.3rem;
        display: flex;
        background: var(--cancel-color);
        width: 0.8rem;
        height: 0.8rem;
        font-size: 0.6rem;
        color: white;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .booked-job-item {
        display: flex;
        flex-direction: column;
        padding: 0.3rem 0.5rem;
        color: var(--primary-color);
        background: var(--element-background-color);
        border-radius: var(--block-border-2);
        box-sizing:border-box;
    }
    .booked-job-item.week {
        position: relative;
        gap: 0.2rem;
        border: 1px solid #ccc;
        font-size: 0.8em;
    }
    .booked-job-item.day {
        position: absolute;
        left: 0.2rem;
        right: 0.2rem;
        border: 2px solid #ccc;
        font-size: 0.7rem;
    }
    .booked-job-item.paid {
        border: 2px solid var(--confirm-color);
    }
    .booked-job-item.partially-paid {
        border: 2px solid var(--role-manager-color);
    }
    .booked-job-item.pastdue {
        border: 2px solid var(--cancel-color);
    }
    .calendar-wrapper-row {
        display: flex;
        gap: 1rem;
    }
    .week-day {
        padding: 0.3rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    .day-header {
        padding: 10px;
        display: flex;
        align-items: center;
        gap: 0.2rem;
        justify-content: center;
    }
    .active-day {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: #00ff00;
        padding: 0!important;
    }
    .calendar-section.week-view {
        position: relative;
        height: auto;
        overflow-y: hidden;
        flex: 1;
        display: flex;
        flex-direction: column;
        margin: 0.3rem;
    }
    .calendar-actions-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0.3rem;
    }
    .calendar-type-selection {
        display: flex;
        height:fit-content;
        align-items: center;
        gap: 0.5rem;
    }
    .launcher-icon,
    #sendEmail:hover, #sendSMS:hover,
    .invoice-preview-actions button:hover .primary-icon,
    .calendar-type-selection .active span {
        color: var(--element-background-color);
    }
    .calendar-section-body {
        background: var(--menu-bar-color);
        height: 100%;
        box-sizing: border-box;
    }

    .booking-action-buttons {
        position: absolute;
        gap: 0.3rem;
        right: 0;
        bottom: 0;
    }
    .booked-job-item.day .booking-action-buttons {
        bottom: 0.5rem;
        right: 0.5rem;
    }
    .calendar-date-selection {
        display: flex;
        align-items: center;
        width: fit-content;
        padding: 0.3rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .job-status-pill.in-progress,
    #changeStatusMobile.in-progress,
    .job-header-row .in-progress,
    .provider-status .in-progress {
        background: var(--primary-button-contrast-hover-color);
    }
    .provider-status .late,
    .job-status-pill.late {
        background: var(--cancel-color);
    }
    
    .job-status-pill.on-the-way,
    #changeStatusMobile.on-the-way,
    .job-header-row .on-the-way,
    .provider-status .on-the-way {
        background: #3498db;    
    }

    .progress-bar.on-the-way {
        color: #3498db;
    }
    .progress-bar.in-progress {
        color: var(--primary-button-contrast-hover-color);
    }
    .job-status-pill.in-progress {
        display: grid;
        grid-template-columns: 1fr 4rem;
    }
    .job-status-pill {
        font-size: 0.8rem;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.1rem 0.5rem;
        border-radius: var(--block-border);
        color: white;
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    .provider-status .job-done,
    .job-status-pill.job-done {
        background: var(--confirm-color);
    }
    .status-bar {
        position: relative;
        width: 100%;
        height: 2px;
    }
    .provider-status-row,
    .provider-top-row {
        align-items: center;
        gap: 1rem;
        justify-content: space-between;
    }
    .provider-status,
    .provider-top-row {
        width: fit-content;
    }
    .progress-bar {
        position: absolute;
        left: 0;
        border: 2px solid;
    }
    .provider-img {
        display: flex;
        margin-right: -5px;
        flex-shrink: 0;
        background:white;
        border-radius:50%;
    }
    .job-customer-item {
        align-items: center;
        gap: 1rem;
    }
    
    .job-provider-item {
        display: grid;
        grid-template-columns: 2rem 6rem 8rem 2rem;
        align-items: center;
        height: fit-content;
        gap: 1rem;
        box-sizing: border-box;
    }
    .job-main-info-section .row {
        gap: 0.5rem;
        justify-content: space-between;
    }
    .job-service-date.row {
        border-top: 1px solid #ccc;
        padding-top: 0.5rem;
        justify-content: normal;
    }
    .address-row {
        display: flex;
        gap: 0.2rem;
        align-items: center;
        overflow: hidden;
        font-weight: 500;
    }
    .job-main-info .label-medium {
        font-weight: 500;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .edit-service-address .primary-icon {
        color: var(--primary-color);
        width: 100%;
    }
    .job-main-info-section:hover .edit-service-address,
    .manager-item:hover .edit-earning,
    .manage-total-received:hover .edit-earning{
        display: flex;
        flex-shrink:0;
        background:transparent;
        align-items: center;
        padding: 0.1rem;
    }
    
    .job-main-info-section:hover .edit-service-address:hover,
    .manager-item:hover .edit-earning:hover,
    .manage-total-received:hover .edit-earning:hover{
        background:var(--inactive-color);
        border-radius:50%;
    }
    .customer-info .delete-secondary-btn,
    .job-provider-item .remove-provider-btn {
        align-items:center;
        justify-content:center;
        border-radius:50%;
        padding: 0;
        flex-shrink:0;
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid;
        background:transparent;
        color:var(--inactive-color);
        margin-left: auto;
    }
    .provider-availability-item.special:hover .delete-special-btn,
    .customer-info:hover .delete-secondary-btn,
    .job-provider-item:hover .remove-provider-btn {
        display: flex;
    }
    .customer-info:hover .delete-secondary-btn:hover,
    .job-provider-item:hover .remove-provider-btn:hover {
        background:var(--inactive-color);
        color:white;
        border-color:var(--inactive-color);
    }
    .customer-reviews-list.column {
        padding: 1rem 0;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
        align-items: center;
        width: 100%;
    }
    .provider-complete-time.open {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 90%;
        align-self: end;
    }
    
    .customer-extra-collapsible.open {
        width: 100%;
        justify-content: center;
    }
    .earning-provider-item {
        display: flex;
        flex-flow: column;
        gap: 0.5rem;
        background: var(--menu-bar-color);
        padding: 0.5rem;
        border-radius: var(--block-border-2);
    }
    .earning-provider-item .provider-item {
        grid-template-columns: 2rem auto 6rem;
        gap: 0.5rem;
        cursor: auto;
    }
    .earning-provider-item .provider-item:hover {
        box-shadow:none;
    }
    .earning-provider-item-grid {
        display: grid;
        grid-template-columns: 32% 32% 32%;
        gap: 0.5rem 2%;
    }
    .earning-provider-item .row {
        display: grid;
        grid-template-columns: 32% 32%;
        gap: 2%;
    }
    .earning-provider-item .row {
        display: grid;
        grid-template-columns: 32% 32%;
        gap: 2%;
    }
    .earning-provider-item-grid {
        display: grid;
        grid-template-columns: 32% 32% 32%;
        gap: 10px 2%;
    }
    .manager-item {
        display: flex;
        padding: 0.3rem 1rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        background:white;
    }
    .cancel-transaction {
        padding: 0;
        border: 1px solid var(--inactive-color);
        color: var(--inactive-color);
        background: transparent;
    }
    /***Recurring jobs***/
    .provider-item {
        grid-template-columns: 2rem 20% 27% auto;
        gap: 0.5rem;
    }
    .provider-item.multiple {
        grid-template-columns: 1rem 2rem 20% 27% auto;
    }
    .recurring-address-section .address-list {
        border: none;
        padding: 0;
    }
    .column.recurring-series-jobs {
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        min-height: 4rem;
    }
    .recurring-job-item.row {
        display: grid;
        grid-template-columns: 2rem 4rem auto 7rem 6rem;
        align-items: center;
        gap: 1rem;
        overflow: hidden;
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .assigned-provider span {
        display: flex;
        position: absolute;
        font-size:1.5rem;
        z-index:1;
        opacity: 0;
        color: var(--primary-color);
        transition: opacity 0.3s;
    }
    .assigned-provider {
        padding: 0;
        border-radius: 50%;
        position: relative;
        border:1px solid transparent;
        
    }
    .assigned-provider:hover .provider-avatar {
        opacity:0.5;
    }
    .assigned-provider:hover span{
        opacity:1;
    }
    .recurring-team-size.qty-wrapper button,
    .recurring-team-size.qty-wrapper .qty-input,
    .qty-wrapper.recurring-team-size {
        color: var(--inactive-color);
        border-color: var(--inactive-color);
    }
    .recurring-service-summary {
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid #ccc;
    }
    /***Job details***/
    .booked-job.job-map-section {
        min-height: 170px;
        height: 170px;
    }
    .job-map-section {
        height: 150px;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        box-sizing: border-box;
    }
    #providerZoneMap {
        height: 400px;
    }
    .map-section.grid {
        grid-template-columns: 60% auto;
    }
    .provider-top-row .provider-avatar {
        border: 1px solid #ccc;
    }
    .calendar-section.day-view {
        height: 100%;
        margin: 0.3rem;
        display: flex;
        flex-direction: column;
    }
    .day-view .calendar-section-header {
        display: flex;
        padding: 0.5rem;
        justify-content: center;
    }
    .calendar-section.day-view .day-body-wrapper {
        display:flex;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .calendar-section.day-view .time-ruler {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--main-background-color);
        display: flex;
        flex-direction: column;
        width: 4rem;
        white-space: nowrap;
        border-right:1px solid #ccc;
        flex-shrink: 0;
        color:#ccc;
        padding-top: 3rem;
    }
    .calendar-section.day-view .time-slot {
        height:calc(100%/24);
        font-size: 0.6rem;
        text-align:right;
        padding-right: 0.5rem;
    }
    .calendar-time-hover{ 
        position:absolute;
        left:0;
        width:100%;
        pointer-events:none;
        font-size:0.8rem;
    }
    .calendar-time-hover .hover-line {
        position:absolute;
        left:0;
        right:0;
        height:1px;
        background:var(--primary-color,#4a90e2);
    }
    .calendar-time-hover .hover-label {
        position:absolute;
        left:50%;
        background: #ffffff00;
        backdrop-filter: blur(10px);
        padding: 0.2rem 0.5rem;
        line-height: 1rem;
        white-space: nowrap;
        transform: translate(-50%);
    }
    .calendar-time-hover.label-below .hover-label{
        top:2px;
    }
    .calendar-time-hover:not(.label-below) .hover-label {
        bottom:2px;
    }
    .provider-status span {
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
        color: white;
        border-radius: 4px;
        white-space: nowrap;
    }
    .provider-column {
        width: 10rem;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        border-right:1px solid #e1e1e1;
        position:relative
    }
    .provider-col-header {
        height: 2rem;
        padding:0.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        font-weight: 600;
        text-align: center;
        border-bottom: 1px solid #e1e1e1;
        background: #fafafa
    }

    .provider-canvas {
        position:relative;
        height:calc(100% - 24px)
    }
    .calendar-time-hover {
      position:absolute;
      width: 100%;
      border-bottom: 2px solid;
      pointer-events:none;
      z-index: 1;
      text-align: center;
    }
    .available-interval{
        position:absolute;
        inset:0; 
        box-sizing:border-box;
        border-radius:var(--block-border-2);
        background:#07dd0721;
        color:green;
        padding:0.5rem;
        background-image:repeating-linear-gradient(
            -45deg,
            rgba(7,221,7,.35) 0 0.3rem,
            transparent      0.5rem 0.8rem
        );
        pointer-events:none;
    }
    .eta-intro-block .service-address {
        display: flex;
        padding: 0.5rem;
        border: 1px solid;
        border-radius: var(--block-border-2);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .eta-results-container {
        display: flex;
        gap: 0.5rem;
    }
    .eta-column .eta-option {
        padding: 0.5rem 1rem;
        display: grid;
        grid-template-columns: 2rem auto 5rem;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }
    .eta-option.active {
        background: var(--primary-color);
        color: white;
        border-radius: var(--block-border-2);
    }
    .eta-column,
    .eta-results-container {
      gap: 1rem;
    }
    .non-working-bg {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background: #eee;
    }
    .availability-bg {
        position:absolute;
        left:0;
        right:0;
        background: var(--main-background-color);
        border-radius: var(--block-border-2);
    }
    .blocked-bg {
        position:absolute;
        left:0;
        right:0;
        background:#ffdddd
    }
    
    .booked-job-item .job-time {
        display:block;
        font-weight:600
    }
    .booked-job-item .job-customer {
        display:block;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden
    }
    .calendar-date-selection button {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--inactive-color);
        border: none;
        background: transparent;
        padding: 0;
        border-radius: 50%;
    }
    .calendar-section-body,
    .calendar-section-header {
        display: grid;
        grid-template-columns: repeat(7, 14.28%);
        box-sizing: border-box;
    }
    .calendar-section-header {
        border-bottom: 1px solid #ccc;
        font-size: 0.8em;
    }
    .calendar-section {
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-element);
    }
    .calendar-type-selection,
    .calendar-type-selection span {
        display: flex;
        height:fit-content;
        align-items: center;
    }

    .calendar-type-selection span {
        gap: 0.2rem;
        padding:0.1rem 0.2rem;
        border-radius:var(--block-border-2);
    }
    .calendar-type-selection .active {
        background: var(--inactive-color);
    }
    #changeStatus {
        white-space: nowrap;
        width: 100%;
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    #editBookedJob {
        width: 2rem;
        padding: 0;
    }
    #editBookedJob:hover {
        background: var(--inactive-color);
        border-color: var(--inactive-color);
    }
    .manager-item:hover .edit-earning,
    .manage-total-received:hover .edit-earning{
        display: flex;
        flex-shrink: 0;
        background: transparent;
        align-items: center;
        padding: 3px;
        width: 1.5rem;
        height: 1.5rem;
        border: none;
    }
    img.customer-avatar,
    .provider-avatar,
    .contact-item.payment-method .more-icon:hover,
    .job-main-info-section:hover .edit-service-address,
    .job-main-info-section:hover .edit-service-address:hover,
    .manager-item:hover .edit-earning:hover,
    .manage-total-received:hover .edit-earning:hover {
        border-radius: 50%;
    }
    
    .job-main-info-section:hover .edit-service-address:hover,
    .manager-item:hover .edit-earning:hover,
    .manage-total-received:hover .edit-earning:hover {
        background:var(--inactive-color);
        border-color:var(--inactive-color);
    }
    .get-direction-btn:hover,
    .calendar-date-selection button:hover {
        background: transparent;
        color: var(--primary-color);
    }
    .get-direction-btn {
        padding: 0;
        background: transparent;
        color: var(--primary-color);
        font-size: 0.7em;
        border: none;
        white-space: nowrap;
    }
    .recurring-preferred-providers-section .add-more-preferred-providers-btn {
        background: transparent;
        width:2rem;
        height: 2rem;
        border: 2px solid;
        padding: 0;
        font-weight: 100;
        font-size: 2rem;
        border-radius: 50%;
        color: var(--inactive-color);
    }
    .add-more-preferred-providers-btn:hover {
        background: var(--inactive-color);
        border-color: var(--inactive-color);
        color:white;
    }
    .recurring-service-section .add-recurring-service-btn,
    .recurring-address-section .add-address-btn,
    .recurring-preferred-providers-section .add-preferred-providers-btn,
    .recurring-providers-section .add-provider-btn,
    .add-payment-method-btn,
    .add-alternative-method-btn,
    .request-payment-method-btn,
    .add-preferred-method-btn {
        display: grid;
        grid-template-columns: 2rem auto;
        justify-content: start;
        justify-items: center;
        gap: 1rem;
        padding: 0 0.5rem;
        border: none;
        background: transparent;
        color: var(--inactive-color);
    }
    .add-preferred-providers-btn:hover .primary-icon.plus-span,
    .add-recurring-service-btn:hover .primary-icon.plus-span,
    .add-address-btn:hover .primary-icon.plus-span,
    .add-provider-btn:hover .primary-icon.plus-span,
    .add-payment-method-btn:hover .primary-icon.plus-span,
    .add-alternative-method-btn:hover .primary-icon.plus-span {
    	background: var(--inactive-color);
    	color: white;
    }
    .primary-icon.plus-span {
        border: 1px;
    }
    .primary-icon.not-assigned,
    .add-service-btn:disabled,
    .request-payment-method-btn,
    .add-preferred-method-btn,
    .request-payment-method-btn:hover,
    .add-preferred-method-btn:hover {
        background: transparent;
        color: var(--inactive-color);
    }
    .get-direction-btn:hover,
    .monthly-which-occurrence .dropdown-selected,
    .monthly-day-of-week .dropdown-selected, 
    .weekly-day-of-week .dropdown-selected,
    .job-customer-item .customer-name,
    .request-payment-method-btn:hover .label-medium,
    .add-preferred-method-btn:hover .label-medium,
    .service-name.label-normal:hover,
    .back-btn:hover,
    .link-button,
    .link-button.add-phone:hover .add-phone-span,
    .sync-row:hover,
    .request-payment-method-btn:hover .label-medium,
    .add-preferred-method-btn:hover .label-medium{
        text-decoration: underline;
    }
    .dropdown-selected {
        height: 100%;
        display: flex;
        align-items: center;
    }
    .request-payment-method-btn .plus-span,
    .add-preferred-method-btn .plus-span {
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        border-radius: 50%;
    }
    .request-payment-method-btn:hover .plus-span,
    .add-preferred-method-btn:hover .plus-span{
        background: var(--inactive-color);
        color: white;
    }
    .request-payment-method-btn .label-medium,
    .add-preferred-method-btn .label-medium {
        display: flex;
        gap: 1rem;
    }
    .slot-people .plus-span,
    .request-payment-method-btn .tooltip-hover,
    .add-preferred-method-btn .tooltip-hover {
        font-size: 0.6rem;
        height: 0.7rem;
        width: 0.7rem;
    }
    .booked-job-section {
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        padding: 1.5rem;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .booked-job-section.job-customer-section {
        gap: 1.5rem;
    }
    .option-item.row {
        justify-content: space-between;
        padding: 0.3rem;
        border-radius: var(--block-border-2);
        width: 100%;
        align-items: center;
    }
    .create-edit-service .modifier-item {
        background: transparent;
        border: none;
        align-items: start;
        gap: 0;
    }
    .people-lists .customer-card:hover,
    .picker-body .customer-list,
    .create-edit-service .modifier-item:hover {
        box-shadow: none;
    }
    .service-base-price.label-medium {
        padding-right: 1.3rem;
    }
    .overtime-section.column,
    .recurring-section.column,
    .questions-section.column,
    .service-summary.column,
    .multiplier-section.column,
    .modifiers-section.column,
    .extras-section.column,
    .products-section.column {
        padding-top: 0.5rem;
        border-top: 1px solid;
        position: relative;
    }
    .discount-type-selector button {
        background: var(--element-background-color);
    }
    .recepient-item .provider-avatar,
    button.disc-type-btn.selected {
        border: 1px solid;
    }
    .discount-editor .discount-type-selector.row button {
        padding: 0;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 7px;
    }
    .discount-type-selector.row {
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .label-small.coupon {
        padding: 0.1rem 0.3rem;
        border: 1px solid;
    }
    
    .label-medium.summary-subtotal,
    .label-medium.came-from,
    .label-medium.earning-percent,
    .label-medium.earning-hourly-rate,
    .label-medium.provider-hourly-rate,
    .label-medium.tip-amount,
    .label-medium.total-amount,
    .label-medium.job-duration,    
    .discount-right .label-medium {
        border-bottom: 1px dashed;
    }
    .label-medium.summary-subtotal:hover,
    .label-medium.earning-hourly-rate:hover,
    .label-medium.provider-hourly-rate:hover,
    .label-medium.tip-amount:hover,
    .label-medium.total-amount:hover,
    .label-medium.summary-subtotal:hover,
    .label-medium.job-duration:hover,    
    .discount-right .label-medium:hover {
        border-color:transparent;
    }
    .note-item {
        padding: 0.5rem;
        margin: 0;
        background: #FCFCB5;
        border-radius: var(--block-border-2);
        border: 1px solid #ccc;
        gap: 0.5rem;
    }
    .survey-question-group.selected,
    .extra-item-group.selected,
    .intake-question-group.selected,
    .modifier-item-group.selected,
    .multiplier-group.selected {
        display: flex;
        flex-direction: column;
        border: 2px solid var(--primary-color);
        border-radius: var(--block-border-2);
        background:white;
        position: relative;
    }
    .special-customer-item,
    .service-item,
    .main-service-item,
    .recurring-option-item,
    label.provider-item,
    .provider-item,
    .condition-item,
    .product-item,
    .survey-answer-option,
    .service-area-row,
    .came-from-option-line,
    .survey-question-item,
    .extra-item,
    .modifier-item,
    .multiplier-item,
    .answer-option-line,
    .intake-answer-option,
    .intake-question-item {
        display: grid;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        box-sizing: border-box;
        position:relative;
        align-items: center;
        background: var(--main-background-color);
        cursor:pointer;
    }
    .service-item.selected:hover,
    .recurring-option-item:hover,
    .condition-item:hover,
    .product-item:hover,
    .survey-answer-option:hover,
    .service-area-row:hover,
    .came-from-option-line:hover,
    .survey-question-item:hover,
    .extra-item:hover,
    .modifier-item:hover,
    .multiplier-item:hover,
    .answer-option-line:hover,
    .intake-answer-option:hover,
    .intake-question-item:hover,
    .provider-item:hover {
        box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.2);
    }
    .invoice-actions-row button {
        height: 2rem;
    }    
    .chat-type.active .primary-icon,
    .invoice-preview-actions button:hover,
    .invoice-actions-row button:hover {
        background: var(--primary-color);
    }
    .invoice-preview-actions button,
    .send-invoice-btn,
    .print-invoice-btn {
        width: 2rem;
        padding: 0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        background: transparent;
        border:1px solid var(--primary-color);
    }
    .invoice-preview-actions button {
        background: transparent;
        border: 1px solid var(--primary-color);
        padding: 0.5rem;
    }
    .email-preview-body {
        padding: 1rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .customer-modal .customer-avatar,
    .contact-item.review .providers-avatars.row .provider-avatar {
        border: 1px solid var(--primary-color);
    }
    
    .contact-item.review .providers-avatars.row span.provider-avatar {
        border: 1px solid var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /***Job create***/
    .people-dropdown-menu,
    .customer-dropdown-menu {
        position: absolute;
        z-index: 10000;
        background: var(--element-background-color);
        box-shadow: var(--box-shadow-light);
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        max-height: 18rem;
    }
    .selected-customer-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .job-customer-collapsible {
        width: 100%;
        padding: 0.3rem;
        gap: 0.3rem;
        border-radius: var(--block-border-2);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }
    .customer-collapsible-header {
        display: flex;
        align-items: center;
    }
    .secondary-contact-info-list,
    .primary-contact-info-list {
        display: flex;
        flex-direction: column;
        width: fit-content;
    }
    .contact-summary {
        padding: 0.1rem 0.5rem;
        border-radius: var(--block-border-2);
    }
    .address-item-selected {
        display: grid;
        grid-template-columns: auto 30%;
        align-items: center;
    }
    .address-item{
        border-bottom:1px solid #ccc;
    }
    .badge.badge-primary {
        font-size: 0.7rem;
        padding: 0 0.3rem;
        border: 1px solid;
        border-radius: var(--block-border-2);
    }
    .zone-badge {
        display: flex;
        align-items: center;
        display:inline-flex;
        align-items:center;
        gap:0.3rem;
        white-space:nowrap;
    }
    .job-comment-input {
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .job-attachments {
        display: flex;
        padding: 0.1rem 0.3rem;
        gap: 0.5rem;
    }
    .customer-collapsible-header button {
        display: flex;
        background: transparent;
        color: var(--primary-color);
        padding: 0;
    }
    .job-section.job-comment-section,
    .job-section.schedule-section,
    .job-section.selected-service-section {
        padding-bottom: 1rem;
    }
    .job-section.selected-service-section {
        padding-top: 1rem;
    }
    .job-total-row {
        display: grid;
        padding: 5px;
        gap: 10px;
    }
    .job-total-row {
        grid-template-columns: auto 20% 20% 20%;
    }
    .job-summary-row {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0rem;
        background-color: var(--element-background-color);
        gap: 0.5rem;
        padding: 0.3rem 0.5rem;
        border: 2px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .invoice-transactions {
        display: flex;
        flex-direction: column;
        padding: 1rem 0 0;
        border-top: 1px solid #ccc;
        gap: 0.1rem;
    }
    .column.job-inline-total {
        align-items: center;
        padding: 0 0.3rem;
        border: 2px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .service-bucket {
        border: 2px solid #ccc;
        border-radius: var(--block-border-2);
        position: relative;
    }
    .expand-toggle {
        padding: 0;
        background: var(--element-background-color);
        color: var(--inactive-color);
        position: absolute;
        top: 0.1rem;
        right: 0.5rem;
        transition: rotate 0.3s;
    }
    .bucket-header,
    .service-edit-host {
        padding: 1rem;
    }
    /***Schedule***/
    .booked-job-item-body {
        display: flex;
        flex-direction: column;
        font-size: 0.7rem;
    }
    .calendar-filter {
        position: absolute;
        background: var(--element-background-color);
        padding: 0.5rem 1rem;
        bottom: 0.5rem;
        left: 0.5rem;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-light);
    }
    .calendar-filter-body {
        display: flex;
        flex-direction: column;
    }
    .filter-row {
        padding: 0.3rem;
        border-radius: var(--block-border-2);
    }
    .available-timeslots .row.attention {
        background: #ffdfdf;
        color: var(--primary-color);
        border: none;
        border-radius: var(--block-border-2);
        justify-content: start;
    }
    .preferred-provider-item.not-matched .warning.tooltip {
        display:flex;
        position: absolute;
        top: -0.3rem;
        right: -0.3rem;
        width: 0.8rem;
        height: 0.8rem;
        font-size:0.7rem;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background: var(--inactive-color);
        color: white;
        border-color: var(--inactive-color);
    }
    .selected-provider-list {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 0.5rem;
    }
    .preferred-provider-item {
        display: grid;
        grid-template-columns: 2rem auto 1rem;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem;
        border-radius: var(--block-border-2);
        border: 1px solid #ccc;
        position:relative;
        background: var(--element-background-color);
    }
    .preferred-provider-item:hover {
        box-shadow:var(--box-shadow)
    }
    .preferred-provider-item .provider-name {
        max-width: 6rem;
        text-overflow: ellipsis;
    }
    .calendar-wrapper {
        padding: 0.5rem 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        color:#ccc;
        position: relative;
    }
    .calendar-warning {
        position: absolute;
        display: flex;
        z-index: 1;
        top: 0;
        left:0;
        width: 100%;
        height: 100%;
        background: rgb(0 0 0 / 0.01);
        backdrop-filter: blur(2px);
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
    }
    .label-medium.attention {
        border: none;
        background: transparent;
        width: fit-content;
        color: var(--primary-color);
    }
    .available-timeslot {
        background: var(--element-background-color);
        padding: 1rem;
        border: 1px solid var(--inactive-color);
        border-radius: var(--block-border-2);
        width: 100%;
        box-sizing: border-box;
        display: flex;
        gap: 2rem;
        justify-content: space-between;
    }
    .assigned-probider-btn {
        padding: 0;
        border: 1px solid;
        background: transparent;
        color: var(--inactive-color);
        border-radius: 50%;
        width: 1.5rem;
        height: 1.5rem;
    }
    .contact-item.payment-method .more-icon:hover,
    .assigned-probider-btn:hover {
        border-color: var(--inactive-color);
        background: var(--inactive-color);
        color: var(--element-background-color);
    }
    .picker-item.row.not-available .name,
    .picker-item.row.not-available .provider-avatar.mini {
        opacity: 0.8;
        color: var(--inactive-color)
    }
    .assigned-probider-btn .provider-avatar.mini {
        width: 100%;
        height: 100%;
        border: none;
    }
    .timeslot-btn {
        background: var(--background-color);
        border: 1px solid var(--inactive-color);
        color: var(--inactive-color);
        display: flex;
        align-items: center;
        padding: 0.2rem;
        width: 100%;
        justify-content: space-between;
    }
    .timeslot-btn:hover {
        background: var(--confirm-color);
        border: 1px solid var(--confirm-color);
        color: white;
        filter: opacity(0.9);
    }
    .dropdown.monthly-which-occurrence,
    .dropdown.monthly-day-of-week,    
    .dropdown.weekly-day-of-week {
        border: none;
        background: transparent;
    }
    .chat-avatar,
    .picker-item.row .primary-icon,
    .provider-avatar.mini {
        border: 1px solid #ccc;
        border-radius:50%;
        flex-shrink: 0;
    }
    .payment-method-dropdown .dropdown-selected,
    .payment-method-dropdown .dropdown-option,
    .custom-available-timeslots .dropdown-selected,
    .custom-available-timeslots .dropdown-option {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    .custom-available-timeslots .dropdown-selected,
    .custom-available-timeslots .dropdown-option {
        display: grid;
        grid-template-columns: 5rem auto;
        justify-content: space-between;
    }
    .slot-people {
        display: flex;
        align-items: center;
        gap: .2rem;
    }
    .calendar-wrapper .flatpickr-day.nextMonthDay.selected,
    .calendar-wrapper .flatpickr-day.selected {
        color:white!important;
    }
    .link-button.read-original-note-btn,
    .link-button.edit-note-btn,
    .original-note.label-small,
    .label-small.disclaimer,
    .transaction-item.refund,
    .transaction-item.void,
    .transaction-item.failed,
    .dropdown-option.not-available,
    .calendar-wrapper .flatpickr-day.nextMonthDay,
    .calendar-wrapper .flatpickr-day.prevMonthDay {
        color: var(--inactive-color);
    
    }
    .multi-integration-launcher:hover .primary-icon.launcher-icon,
    .calendar-wrapper .flatpickr-day {
        color: var(--primary-color);
    }
    .calendar-wrapper .flatpickr-weekdays {
        border-bottom: 1px solid;
        margin: 5px;
    }
    .calendar-navigation {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.5rem;
        align-items: center;
        background: var(--element-background-color);
        color: var(--primary-color);
    }
    .calendar-navigation button {
        background: transparent;
    }
    .calendar-navigation .nav {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid;
        padding: 0;
        background: transparent;
        vertical-align: middle;
    }
    .calendar-navigation button:hover .nav {
        border-color: var(--primary-color);
        background: var(--primary-color);
        color: var(--element-background-color);
    }
    .calendar-navigation button.active:hover .nav,
    .calendar-navigation button.active .nav {
        background: var(--confirm-color);
        color: var(--element-background-color);
    }
    .calendar-wrapper .flatpickr-day.startRange,
    .calendar-wrapper .flatpickr-day.endRange,
    .calendar-wrapper .flatpickr-day.selected.inRange,
    .calendar-wrapper .flatpickr-day.startRange.inRange,
    .calendar-wrapper .flatpickr-day.endRange.inRange,
    .calendar-wrapper .flatpickr-day.selected:focus,
    .calendar-wrapper .flatpickr-day.startRange:focus,
    .calendar-wrapper .flatpickr-day.endRange:focus,
    .calendar-wrapper .flatpickr-day.selected:hover,
    .calendar-wrapper .flatpickr-day.startRange:hover,
    .calendar-wrapper .flatpickr-day.endRange:hover,
    .calendar-wrapper .flatpickr-day.selected.prevMonthDay,
    .calendar-wrapper .flatpickr-day.startRange.prevMonthDay,
    .calendar-wrapper .flatpickr-day.endRange.prevMonthDay,
    .calendar-wrapper .flatpickr-day.selected.nextMonthDay,
    .calendar-wrapper .flatpickr-day.startRange.nextMonthDay,
    .calendar-wrapper .flatpickr-day.endRange.nextMonthDay
    .calendar-wrapper .flatpickr-day.inRange,
    .calendar-wrapper .flatpickr-day.prevMonthDay.inRange,
    .calendar-wrapper .flatpickr-day.nextMonthDay.inRange,
    .calendar-wrapper .flatpickr-day.today.inRange,
    .calendar-wrapper .flatpickr-day.prevMonthDay.today.inRange,
    .calendar-wrapper .flatpickr-day.nextMonthDay.today.inRange,
    .calendar-wrapper .flatpickr-day:hover,
    .calendar-wrapper .flatpickr-day.prevMonthDay:hover,
    .calendar-wrapper .flatpickr-day.nextMonthDay:hover,
    .calendar-wrapper .flatpickr-day:focus,
    .calendar-wrapper .flatpickr-day.prevMonthDay:focus,
    .calendar-wrapper .flatpickr-day.nextMonthDay:focus,
    .calendar-wrapper .flatpickr-day.selected,
    .calendar-wrapper .flatpickr-days,
    .calendar-wrapper .flatpickr-calendar,
    .calendar-wrapper .flatpickr-rContainer,
    .calendar-wrapper .flatpickr-day.today {
        width:100%;
        box-shadow:none;
        -webkit-box-shadow:none;
    }
    .calendar-wrapper .flatpickr-day.selected.no-time-slots {
        color: white;
        background: var(--cancel-color);
        border-color: var(--cancel-color);
    }
    .calendar-wrapper .flatpickr-day.no-time-slots {
        color: var(--inactive-color);
        text-decoration: line-through;
        pointer-events: none;
    }
    
    .flatpickr-day.for-change{
        background:transparent!important;
        border:none
    }
    .flatpickr-day.for-change {
        position: relative;
        width: 100%;
        color: white!important;
    }
    .flatpickr-day.for-change::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 50%;
      background: linear-gradient(120deg, rgb(8 129 235 / 68%), rgb(255 0 128 / 58%));
      animation: ytFloatPulse 1.2s ease-in-out infinite alternate;
      z-index: -1;
    }
    @keyframes ytFloatPulse {
      from { transform: translateY(0px) scale(1); opacity: 0.7; }
      to   { transform: translateY(-2px) scale(1.03); opacity: 1; }
    }
    .provider-avatar.mini.placeholder { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
    /***Coupons***/
    .coupon-list {
        display:flex;
        flex-direction: column;
        gap:0.5rem;
        margin:0.3rem;
    }
    .edit-coupon-modal .list-items {
        padding: 0.5rem;
        background: var(--element-background-color);
    }
    .code-entry-span {
        padding: 0 0.5rem;
        border: 1px solid;
        width: fit-content;
        font-size: 1.3em;
    }
    .modal-header .code-entry-span {
        font-size: 1rem;
    }
    .selected-services-tree .chip {
        max-height: 9rem;
        overflow-y: auto;
    }
    .toggle-btn {
        background: transparent;
        padding: 0.4rem;
        transition: transform .2s ease;
    }
    .item.row.expanded .toggle-btn { 
        transform: rotate(-90deg); 
    }
    .item.row {
        padding: 0.3rem;
        border-radius: var(--block-border-2);
    }
    .edit-coupon-modal .customer-dropdown-menu {
        position: absolute;
        box-sizing: border-box;
        left: 0px;
        width: 100%;
        top: calc(100% + 5px);
    }
    .select-customer-btn {
        background: transparent;
        justify-content: start;
        padding:0;
    }
    .delete-sequence-btn {
        padding: 0.2rem;
        height: 1.5rem;
        width: 1.5rem;
    }
    .two-col-grid {
        display: grid;
        width: 100%;
        box-sizing: border-box;
        grid-template-columns: 30% auto;
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        gap: 0.5rem;
        background: var(--element-background-color);
    }
    #openAddCouponModal:hover svg path#fill {
        fill: currentColor!important;
    }
    #openAddCouponModal:hover svg g#percent {
        fill: white!important;
    }
    #validCustomersPersonalMain .customer-list {
        height:200px;
        padding: 0 0.5rem;
    }
    #validCustomersPersonalMain .customer-list.selected.column {
        height: fit-content;
    }
    .coupon-item {
        display: flex;
        gap:10px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: var(--block-border);
    }
    .valid-for-customers .list-items {
        margin-top: 0.3rem;
    }
    .coupon-list .coupon-item {
        display: grid;
        grid-template-columns: 10rem 10rem 8rem 8rem 8rem 9rem 9rem auto;
        gap: 1rem;
        padding: 0.2rem 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        box-sizing: border-box;
        align-items: center;
        background: var(--element-background-color);
        box-shadow: var(--box-shadow);
    }
    .coupon-item.personal {
        grid-template-columns: 14rem 10rem 10rem 8rem 8rem 8rem 9rem 9rem auto;
        /*text-align: left;*/
    }
    .sequence-discount-section,
    .single-discount-section {
        display:flex;
        flex-direction: column;
        gap: 0.5rem;
        border: 1px solid #ccc;
        padding: 0.5rem;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
    }
    .form-item {
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
    }
    .select-service-btn {
        background: transparent;
        width: fit-content;
        padding: 0.3rem;
    }
    /***Chat***/
    .all-chats-screen.slide-in-left {
        animation: slideInLeft 0.3s forwards;
    }
    .all-chats-screen.slide-out-left {
        animation: slideOutLeft 0.3s forwards;
    }
    .conversation-screen.slide-in-right {
        animation: slideInRight 0.3s forwards;
    }
    .conversation-screen.slide-out-right {
        animation: slideOutRight 0.3s forwards;
    }
    @keyframes slideInLeft {
        0% {transform: translateX(-100%);opacity: 0;}
        100% {transform: translateX(0);opacity: 1;}
    }
    @keyframes slideOutLeft {
        0% {transform: translateX(0);opacity: 1;}
        100% {transform: translateX(-100%);opacity: 0;}
    }
    @keyframes slideInRight {
        0% {transform: translateX(100%);opacity: 0;}
        100% {transform: translateX(0);opacity: 1;}
    }
    @keyframes slideOutRight {
        0% {transform: translateX(0);opacity: 1;}
        100% {transform: translateX(100%);opacity: 0;}
    }
    button.chat-send,
    .chat-actions button {
        background: transparent;
        width: 2rem;
        height: 2rem;
        padding: 0.2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        font-size: 1.3rem;
    }
    .chat-actions button:hover{
        background: var(--inactive-color);
        border-radius:50%;
    }
    button.chat-send:hover svg .send-icon-fill {
        fill: var(--primary-color);
    }
    .link-button.add-recipient-btn {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding:0.5rem;
        align-items: center;
        width:100%;
        justify-content: center;
        text-decoration: none;
    }
    .contact-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        overflow: hidden;
    }
    .contact-name {
        font-size: 0.7rem;
        text-overflow:ellipsis;
        display: flex;
        align-items: center;
    }
    .chat-footer-main .input-wrapper {
        border-radius: 18px;
        padding: 0.2rem;
    }
    /***Invoices***/
    .loaded-users.column {
        gap: 0.1rem;
    }

    .transaction-summary-row {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid;
        padding-top: 0.3rem;
        margin-top: 0.3rem;
    }

    .transaction-item.reward {
        font-size: 0.8em;
        margin-top: 0.5rem;
    }
    .transaction-item .transaction-actions{
        display:flex;
        width:30px;
        align-self: center;
        justify-self: end;
    }
    .page-preview {
        padding: 30px;
        background: white;
        border: 1px solid #ccc;
        box-shadow: var(--box-shadow);
        border-radius: 3px;
        width: 100%;
        font-size: 12px;
        aspect-ratio: 1/1.414;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .business-info,
    .preview-header {
        display: flex;
        flex-direction: column;
    }
    .business-info {
        font-size: 1em;
        gap: 0.5em;
    }
    .business-logo {
        display: flex;
        justify-content: end;
    }
    
    .business-logo img {
        height: 2rem;
    }
    
    .business-info-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.8em;
        border-top: 1px solid;
        padding-top: 0.5em;
    }
    
    .invoice-customer {
        margin-top: 2em;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .invoice-print-wrapper {
        padding-top: 5em;
    }
    
    .paid-stamp-section {
        position: absolute;
        top: 20%;
        right: 10%;
        font-size: 3em;
        padding: 0.2em 0.5em;
        border-radius: 18px;
        border: 4px solid var(--confirm-color);
        color: var(--confirm-color);
    }
    
    .invoice-service-list {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.3rem 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    
    .invoice-service-header {
        display: flex;
        justify-content: space-between;
    }
    
    .invoice-sub-item {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    
    .invoice-sub-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 0.3rem;
    }
    
    .summary-item .row {
        width: fit-content;
        gap: 0.1rem;
    }
    
    .invoice-summary {
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-self: end;
        width: 40%;
        padding: 10px 0;
        gap: 5px;
    }
    
    .page-preview .invoice-summary {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    
    .earning-provider-item,
    .invoice-service-item,
    .invoice-container {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .transactions-summary,
    .total-summary {
        display: flex;
        flex-direction: column;
        width: 50%;
        padding: 0 10px;
    }
    
    .transactions-summary {
        border-right: 1px solid #ccc;
    }
    
    .page-preview .transaction-item {
        align-items: center;
        padding: 0;
    }
    .page-preview .balance-item,
    .page-preview .transaction-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.3rem;
        padding: 0.1rem;
    }
    .balance-transactions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid;
    }
    .job-invoice-section .transaction-item {
        display: grid;
        grid-template-columns: auto auto 2rem;
        align-items: center;
        gap: 1rem;
        padding: 0.1rem;
        height: 3rem;
    }
    .transaction-item-summary.row {
        width: fit-content;
        gap: 0.1rem;
    }
    .booking-view .transaction-item-summary.row {
        justify-self: end;
    }
    
    .transaction-summary-row {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid;
        padding-top: 0.3rem;
        margin-top: 0.3rem;
    }
    .page.mobile-overview,
    .total-summary {
        gap: 0.3rem;
    }
    
    .summary-item {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        box-sizing: border-box;
    }
    
    .memo-span {
        margin-top: 10em;
        font-size: 0.7em;
        text-indent: 2em;
    }
    .email-template-block {
        padding: 2rem;
        background: var(--element-background-color);
        box-shadow: var(--box-shadow-light);
        border-radius: var(--block-border-2);
    }
    /***Customers***/
    .picker-item.blocked {
        background: #f9c8c88c;
        color: #d40000;
    }
    .recurring-jobs-list,
    .modal-customer-list,
    .customer-list {
        height: 100%;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
        padding: 0.5rem;
        box-sizing: border-box;
        box-shadow: var(--box-shadow-element);
    }

    .search-customer-section {
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        height: 100%;
        min-height: 400px;
    }
    .no-jobs-label,
    .primary-badge,
    .new-customer-label {
        padding: 0.1rem 0.2rem;
        line-height: 1;
        border-radius: var(--block-border-2);
        width: fit-content;
    }
    .new-customer-label {
        color: #206305;
        background: #c0ffb5;
    }
    .primary-badge {
        background: #2680ff;
        color: #fff;
    }    
    .no-jobs-label {
        background: #b7a5f3;
        color: #6354ad;
    }  
    .label-small.platform-title {
        padding: 0.1rem 0;
        border-top: 1px solid;
        border-bottom: 1px solid;
        border-color: #ccc;
    }
    .link-button.add-customer-contact {
        font-size: 0.8rem;
        align-self: end;
    }
    .providers-avatars {
        display: flex;
        justify-content: center;
    }
    #cust_rp_amount {
        padding-left: 0.1rem;
    }
    .existing-platform-accounts.column,
    .customer-details-section {
        position: relative;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
    }
    .existing-platform-accounts.column {
        padding: 0.5rem;
    }
    .row.add-actions-row {
        padding: 0.5rem;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        background: var(--main-background-color);
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
    }

    .primary-label .label-small {
        padding: 0 0.4rem;
        color: white;
        border-radius: var(--block-border);
    }

    .primary-label.expired .label-small {
        background: var(--cancel-color);
    }
    .primary-icon.void-transaction {
        padding: 0.2rem;
        border-radius: 50%;
    }
    .primary-icon.void-transaction:hover {
        background: var(--inactive-color);
        color: white;
    }
    .txn-item,
    .balance-header-row {
        display: grid;
        grid-template-columns: 8rem 6rem 7rem auto 1.5rem;   
        align-items: center;
        gap: 0.3rem;
    }
    .balance-header-row {
        font-size: 0.7rem;
        border-bottom: 1px solid #ccc;
        padding: 0.3rem;
    }
    .txn-item:hover {
        background: #f3f3f3;
        border-radius:var(--block-border-2);
    }
    
    #cust_tx_list {
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
    }
    .refund-permission-modal .contact-item,
    .refund-approvals-content .contact-item,
    .hold-charge-modal .contact-item,
    .select-existing-card-modal .contact-item,
    .booked-job-section .contact-item,
    .customer-details-section .contact-item {
        display:grid;
        grid-template-columns: 1.5rem 20rem auto;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem;
        border-radius: var(--block-border-2);
        width: 100%;
        box-sizing: border-box;
    }
    .customer-details-section .contact-item.job-item .grid {
        grid-template-columns: auto 8rem 6rem;
    }
    .job-customer-item .primary-icon.review-platform {
        height: 1rem;
        max-width: 5rem;
    }
    .recurring-job-set.row {
        display: grid;
        grid-template-columns: 2rem 12rem auto 12rem 8rem;
        align-items: center;
        gap: 1rem;
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }

    .job-customer-item .contact-item,
    .customer-details-section .contact-item.discount {
        grid-template-columns: 1.5rem auto 5rem 8rem;
    }
    .customer-details-section .contact-item.address {
        grid-template-columns: 1.5rem 20rem auto 1rem;
    }
    .customer-details-section .contact-item.balance {
        grid-template-columns: 2rem auto 5rem;
    }
    .refund-approvals-content .contact-item,
    .customer-details-section .contact-item.job-item {
        grid-template-columns: 2rem 5rem auto;
        background: transparent;
        border: none;
    }
    .customer-info {
        display: grid;
        width: 100%;
        max-width: 100%;
        grid-template-columns: 30% auto 23% 30px;
        align-items: center;
        font-size: 0.8em;
        gap: 5px;
        box-sizing: border-box;
    }
    .job-customer-item .customer-info {
        grid-template-columns: 13rem 2rem auto 1.5rem;
        gap: 1rem;
    }
    .customer-info .toggle-invoice {
        width: 2rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .customer-extra-collapsible .contact-item.review {
        grid-template-columns: auto auto;
        gap: 1rem;
        align-items: start;
    }
    .contact-item.payment-method.apps {
        grid-template-columns: 2rem 5rem auto 2rem;
    }
    .contact-item.payment-method.requested {
        grid-template-columns: 2rem auto 2rem;
        color: var(--inactive-color);
    }
    .contact-item.review {
        grid-template-columns: 8rem 20rem auto;
    }
    .booked-job-section.invoice-payment-section .contact-item.balance {
        grid-template-columns: 2rem auto auto;
    }
    .contact-item.payment-method {
        grid-template-columns: 2rem 14rem auto 2rem;
        cursor: auto;
    }
    .link-button.add-recipient-btn:disabled,
    .booked-job-section.job-notes-section .placeholder .primary-icon,
    .booked-job-section.notification-section .placeholder .primary-icon,
    .refund-job-host .contact-item.job-item {
        cursor: auto;
    }
    .select-existing-card-modal .contact-item.payment-method {
        grid-template-columns: 2rem auto auto;
    }
    .contact-item.payment-method .more-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1/1;
    }
    .contact-item .primary-icon.contact-icon {
        padding: 0.1rem;
        border: 1.5px solid;
        border-radius: var(--block-border-2);
        background: transparent;
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
    .contact-item.primary .primary-icon.contact-icon {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color:var(--element-background-color);
    }
    .notification-item.column.notification-unread {
        border-color: var(--primary-color);
    }
    .wallet-balance-line.row,
    .payment-method-item,
    label.cancel-job-item,
    label.conflict-job-item,
    label.conflict-job-item.single,
    .hold-charge-modal .contact-item.balance {
        display: grid;
    }
    label.conflict-job-item.single {
        grid-template-columns: 2rem 2.5rem auto 6rem;
    }
    label.conflict-job-item {
        grid-template-columns: 1rem 2rem 2.5rem auto 6rem;
    }
    label.cancel-job-item {
        grid-template-columns: 1rem 2rem 2.5rem auto 4rem 4rem 1rem;
    }
    .hold-charge-modal .contact-item.payment-method.row {
        grid-template-columns: 1rem 2rem 14rem auto;
    }
    .hold-charge-modal .contact-item.balance {
        grid-template-columns: 1rem 2rem auto auto;
        align-content: center;
        font-weight: 500;
    }
    .hold-charge-modal .payment-methods-list {
        max-height: 300px;
        overflow-y: auto;
    }
    .payment-method-item {
        grid-template-columns: 2rem 20% auto 1rem;
        align-items: center;
        gap: 2rem;
        color: var(--inactive-color);
    }
    .payment-method-item.preferred-method {
        grid-template-columns: 2rem auto 1rem;
    }

    .request-payment-method-btn:hover .plus-span,
    .add-preferred-method-btn:hover .plus-span{
        background: var(--inactive-color);
        color: white;
    }
    .request-payment-method-btn .label-medium,
    .add-preferred-method-btn .label-medium {
        display: flex;
        gap: 1rem;
    }
    .request-payment-method-btn .tooltip-hover,
    .add-preferred-method-btn .tooltip-hover {
        font-size: 0.6rem;
        height: 0.7rem;
        width: 0.7rem;
    }
    .discount .primary-icon.contact-icon,
    .referred .primary-icon.contact-icon {
        background: transparent;
        color: var(--primary-color);
        border: 2px solid var(--primary-color);
    }
    .customer-details-section .contact-item.job-item.past {
        color:var(--inactive-color);
    }
    .wallet-balance-line.row {
        grid-template-columns: 1.5rem 10rem auto;
        gap: 0.5rem;
        align-items: center;
    }
    .jobs-nav-row.grid {
        grid-template-columns: 33% auto 33%;
        justify-items: center;
        border-top: 1px solid #ccc;
        gap:0;
    }

    .method-icon {
        position: relative;
    }
    .method-icon .primary-icon.refund-icon,
    .method-icon img {
        position: absolute;
        background: white;
        width: 0.6rem;
        height: 0.6rem;
        padding: 1px;
        border: 1px solid #ccc;
        border-radius: var(--block-border);
        bottom: -0.3rem;
        right: -0.3rem;
    }
    .failed .cancel-span,
    .method-icon img {
        bottom: -0.3rem;
        right: -0.3rem;
    }
    .method-icon .primary-icon.refund-icon {
        position: absolute;
        right: -.2rem;
        bottom: 0rem;
    }
    .failed .cancel-span  {
        position: absolute;
        width: 0.8rem;
        height: 0.8rem;
    }
    .cancel-span {
        position: absolute;
        background: var(--cancel-color);
        color: white;
        font-size: 0.7rem;
        width: 0.8rem;
        height: 0.8rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .transaction-payment-method .method-icon img {
        width: 0.6rem;
        height: 0.6rem;
        bottom: -0.5rem;
        right: -0.3rem;
    }
    .jobs-nav-row.grid button {
        border-radius: 0;
        width:100%;
        font-size: 0.8rem;
        color: var(--inactive-color);
    }
    .jobs-nav-row.grid button.active {
        background: var(--inactive-color);
        color: var(--element-background-color);
    }    
    .customer-details-section.column.jobs {
        max-height: 20rem;
    }
    .customer-details-section.column.reviews {
        max-height: 18rem;
    }
    .add-ref-btn {
        background: transparent;
        color: var(--primary-color);
        padding: 0;
    }
    label.row.marketing-option {
        padding: 0.5rem;
        border-radius: var(--block-border-2);
    }
    .middle-screen-section {
        display: flex;
        flex-direction: column;
        margin-top: 10%;
        margin: auto;
        align-items: center;
        justify-content: center;
    }
    .customers .header-buttons button {
        padding: 0.3rem 0.5rem;
        display:flex;
        align-items:center;
        gap: 0.2rem;
    }
    .search-customer-section {
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        height: 100%;
    }
    .top-row {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 5px;
    }
    .customer-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 01rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        padding: 0.5rem;
        transition: border 0.3s;
        cursor:pointer;
        background: var(--element-background-color);
    }
    .customer-card:hover {
        box-shadow: var(--box-shadow);
    }
    .customer-card .customer-name {
        max-width: 11rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .customer-initials {
        display: flex;
        flex-shrink:0;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 1.9rem;
        height: 1.9rem;
        font-size: 0.8rem;
    }
    .selected-customer-content .customer-initials {
        font-size: 0.6rem;
    }
    .referrer-list.column {
        max-height: 14rem;
        position: absolute;
        top: calc(100% + 5px);
        background: var(--element-background-color);
        width: calc(100% - 1rem);
        border-radius: var(--block-border-2);
        padding: 0.5rem;
        z-index: 1;
        box-shadow: var(--box-shadow-light);
    }
    .calendar-date.column.past {
        color:#ccc;
        background: white;
        border-color: #ccc;
    }
    .calendar-date.column {
        position: relative;
        width: 100%;
        aspect-ratio: 1/1;
        border: 2px solid #2680ff;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
        justify-content: space-between;
    }
    .calendar-month {
        font-size: 0.4rem;
        text-align: center;
        padding: 0 0.2rem;
        line-height: 1.5;
        background: #2680ff;
        color: white;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
    }
    .past .calendar-month {
        background: #ccc;
    }
    .calendar-date {
        font-size: 0.8rem;
        text-align: center;
        color: var(--primary-color);
        line-height: 1;
        border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px;
    }
    .calendar-dow {
        font-size: 0.5rem;
        text-align: center;
        padding-bottom: 0.1rem;
        color: var(--inactive-color);
    }
    .txn-item.void,
    .past .calendar-dow {
        color: #ccc;
    }
    /***Team***/
    
    .job-details-section-info,
    .job-section,
    #impersonate-form,
    .twilio-balance,
    .page-section,
    .page-header,
    .dropdown-options.visible,
    .modal-customer-list,
    .recurring-jobs-list,
    .customer-list,
    .search-customer-section,
    #teamContainer {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .reviews-list,
    .modal-body,
    .confirm-message,
    .yt-form,
    .dashboard-container,
    .auth-forgot-password,
    .auth-password,
    .auth-options,
    .sms-otp-block,
    .otp-list,
    .security-step,
    .security-options,
    .provider-block,
    .page,
    .auth-content,
    .reviews-modal,
    .otp-collapsible.open {
        display:flex;
        flex-direction: column;
        gap: 1rem;
    }
    .team-card {
        border: 1px solid #ccc;
        padding: 0.5rem;
        margin: 0.3rem;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
        border-radius: var(--block-border-2);
        transition: all 0.3s ease;
    }
    .team-card:hover {
        box-shadow: var(--box-shadow);
    }
    .team-card.active-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
        box-shadow: var(--box-shadow-element);
    }
    .team-img {
        display: flex;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: relative;
    }
    .team-img svg ,
    .team-card-header img {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    .manage-user-buttons {
        align-self: end;
        display: flex;
        justify-content: end;
        gap: 0.5rem;
        width: 100%;
    }
    .payment-row.row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
    .radio-label {
        display: flex;
        white-space: nowrap;
        justify-content:center;
        align-items: center;
        color: var(--primary-color);
        font-size: 0.65em;
        border-radius: var(--block-border-2);
        border:1px solid var(--primary-color);
        background: white;
    }

    .provider-checkbox:hover,
    .radio-label:hover {
        background: var(--primary-color);
        color: white;
    }    
    .active-card .team-card-active {
        display: flex;
        flex-direction: column;
    }
    .delete-special-btn,
    .availability-dropdown .dropdown-option.inactive,
    .coupon-remove,
    .delete-mod,
    .row.customer-actions,
    #changeStatusMobile,
    .outlined-button-secondary.remove-referrer-btn,
    .job-customer-collapsible .outlined-button-secondary.delete-customer-btn,
    .service-autocomplete-list.column,
    .edit-customer-btn,
    .edit-service-btn,
    .link-button.edit-field,
    .btn-radio input[type="radio"],
    .yt-collapsible-content,
    .booking-action-buttons,
    .impersonation .collapsible-content,
    .add-phone-form,
    .dropdown-options,
    .toggle-before,
    .toggle-after,
    .edit-team-btn,
    .edit-earning,
    .edit-service-address,
    .delete-secondary-btn,
    .remove-provider-btn,
    .warning.tooltip,
    input.is-provider,
    .radio-button,
    .delivered .subscription-status,
    .team-card-active {
        display: none;
    }
    .team-card-header {
        position:relative;
        display: grid;
        grid-template-columns: 50px 20% 30% auto 10%;
        gap: 0.5rem;
        align-items: center;
        padding: 0.5rem;
    }
    .personal-available-resources-list,
    .team .provider-available-resources-list {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 8px;
        /*justify-content: center;*/
    }
    .personal-available-resources-list,
    .provider-available-resources-list {
        overflow-x: auto;
    }
    .personal-available-resources-list .resource-item,
    .provider-available-resources-list .resource-item {
        display: flex;
        flex: 1;
        flex-direction: column;
        font-size: 0.8em;
        justify-content: space-around;
        width: 110px;
        max-width: 110px;
        min-width: 110px;
        height: 100px;
    }
    .required-resources-info .resource-item {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-size: 0.8em;
        color: var(--inactive-color);
        padding: 0;
    }
    .required-resources-info .attention-grey{
        width:0.8em;
        height:0.8em;
        font-size:0.8em;
        padding:1px;
    }
    .customer-review {
        display: flex;
        flex-direction: column;
        min-width: 150px;
        width: 150px;
        height: 6rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        padding: 7px;
        box-sizing: border-box;
        gap: 3px;
    }
    .customer-review:hover {
        box-shadow:var(--box-shadow);
    }
    .customer-email, 
    .customer-phone,
    .customer-review .label-medium {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .assigned-probider-btn .primary-icon,
    .add-item-btn .plus-span,
    .outlined-button-secondary.edit-btn .primary-icon,
    .add-service-btn .plus-span,
    .menu-header .star-rating svg,
    .customer-review .star-rating svg {
        width: 0.8rem;
        height: 0.8rem;
    }
    
    .customer-review .row {
        align-items: center;
        height: 1rem;
    }
    .review-answer {
        margin: 0;
    }
    .customer-review {
        margin:0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .review-date {
        font-size: 0.55rem;
        align-self: end;
    }
    /***Availability***/
    .availability-modal .modal-body {
        gap: 0;
        margin: 0;
    }
    .picker-body .customer-list,
    .picker-body .search-bar,
    .availability-modal .modal-header {
        border: none;
    }
    .section-header {
        position:absolute;
        background: var(--main-background-color);
        font-size:0.7em;
        padding: 0.1rem 0.5rem;
        border-radius:10px;
        top: -0.65rem;
        left:50%;
        transform: translateX(-50%);
    }
    .availability-collapsible {
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        padding: 0.5rem;
        gap: 1rem;
    }
    
    .availability-collapsible .collapsible-header {
        border: none;
        padding: 0;
    }
    .availability-collapsible .collapsible-body {
        display: none;
    }
    .availability-collapsible.open .collapsible-body {
        display: flex;
        flex-direction: column;
        gap:1rem
    }
    .payment-methods-section .section-header.column,
    .bookings-statistic-section .section-header.column {
        position: relative;
        background: transparent;
    }
    .duration.label-small,
    .booked-job-section .section-header {
        color: var(--inactive-color);
    }
    .booked-job-section .placeholder {
        display: flex;
        flex-direction: column;
        gap: 5px;
        text-decoration: none;
        align-items: center;
        font-size: 0.7em;
        color: var(--inactive-color);
    }
    .personal-available-resouces-section button,
    .add-special-availability-btn.link-button,
    .add-recurring-availability-btn.link-button,
    .manage-special-customers-section .buttons-container button,
    .provider-available-resources-section button,
    .provider-service-area-section button,
    .provider-availabitity-section button {
        background: transparent;
        color: var(--primary-color);
        font-size: 0.7em;
        padding: 0 5px 5px 0;
        text-decoration:underline;
        border:none;
        width:fit-content;
    }
    .provider-special-availability-list,
    .provider-recurring-availability-list {
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        padding: 0.5rem;
        background: var(--element-background-color);
        box-sizing:border-box;
    }
    .provider-special-availability-list,
    .provider-recurring-availability-list {
        height: 22rem;
    }
    .provider-special-availability-container,
    .provider-recurring-availability-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        box-sizing: border-box;
    }
    .provider-special-availability-container {
        max-height: 21rem;
        overflow-y: auto;
    }
    .provider-recurring-availability-container {
        height: 21rem;
    }
    .team-card .provider-special-availability-container,
    .team-card .provider-recurring-availability-container {
        max-height: 19rem;
    }
    
    .provider-special-availability-item,
    .provider-availability-item {
        display: grid;
        gap: 0.5rem;
        padding:5px;
        margin: 0 0.5rem;
        color: var(--inactive-color);
        border-bottom:1px solid #ccc;
        height: 3rem;
        box-sizing: border-box;
        align-items: center;
    }


    .personal-reviews-section,
    .personal-service-area-section,
    .personal-available-resouces-section,
    .personal-availability-section,
    .personal-basic-settings-section,
    .personal-contractor-section {
        height: fit-content;
        padding: 2rem 0.5rem;
        box-sizing: border-box;
        flex-direction: column;
        gap: 1rem;
    }
    .adress-input-section .column,
    .personal-availability-section .provider-special-availability,
    .personal-availability-section .provider-recurring-availability {
        gap: 0.3rem;
    }
    .personal-availability-section {
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        background: var(--menu-bar-color);
    }
    .provider-special-availability-list{
        max-height: 100%;
    }
    .dropdown.system-action-dropdown {
        height: 100%;
    }
    .provider-availability-item {
        grid-template-columns: auto 6.5rem 6.5rem;
    }
    .provider-special-availability-item {
        grid-template-columns: auto 20% 20%;
        position: relative;
    }
    .provider-availability-item.special {
        grid-template-columns: auto 6.5rem 6.5rem 1rem;
        border-bottom: 1px solid #ccc;
    }
    .special-day-row.grid {
        grid-template-columns: auto 7rem 7rem;
        gap: 1rem;
    }
    .sync-row {
        display:flex;
        gap:0.5rem;
        align-items: center;
        font-size:0.8em;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        background: white;
    }
    .day-row-body .copy-day-to {
        padding: 0;
        background: transparent;
    }
    .day-row-header.grid,
    .day-row-body.grid {
        grid-template-columns: 1rem 1fr 1fr 1fr 2rem;
        gap: 0.5rem;
        box-sizing: border-box;
        align-items: center;
    }
    
    .day-row-body .yt-checkbox-round {
        height: 1rem;
    }
    /***Salary***/
    .salary-report-form .yt-button {
        padding: 0.4rem 1rem;
        font-size: 1rem;
        border: 1px solid;
    }
    .datepicker-wrapper input {
        padding: 0.4rem;
        width: 100%;
    }
    .row.salary-report-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1.5rem;
        gap: 1rem;
        margin: 0 1.3rem;
    }
    .salary-settings-modal .column.section {
        padding: 1rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
   .column.motivation .row input {
        width: 100%;
        text-align: center;
    }
    .prvider-complete-item,
    .column.motivation .row {
        gap: 1rem;
    }
    .row.rules-header {
        gap: 1rem;
        align-items: start;
    }
    .row.salary-report-row .dropdown {
        height: 2.3rem;
    }
    .row.salary-report-row .dropdown-selected {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .salary-report-row .yt-button {
        padding: 0.4rem;
    }
    .salary-report {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-top: 1rem;
        padding: 1rem 0.3rem;
        border-top: 1px solid;
    }
    .unsaved-badge {
        display: flex;
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        background: var(--cancel-color);
        color: white;
        border-radius: 4px;
    }
    .logo-selection .input-wrapper,
    .txn-item,  
    .recharge-modal .input-wrapper,
    .input.modal-content .input-wrapper,
    .salary-action-btn {
        padding: 0.3rem;
    }
    .save-salary-btn {
        border: 2px solid var(--cancel-color);
        background: transparent;
        color: var(--cancel-color);
        border-radius: 50%;
    }
    .unsaved-badge .attention {
        background: transparent;
        color: white;
    }
    .zone-header .warning {
        display: flex;
        align-items: center;
        justify-content: center;
        border:2px solid var(--cancel-color);
        color: var(--cancel-color);
        border-radius: 50%;
    }
    .salary-report-table {
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #ccc;
        border-radius: 1rem;
    }
    .salary-report-table thead th:first-child  { 
        border-top-left-radius: 1rem; 
    }
    .salary-report-table thead th:last-child   { 
        border-top-right-radius: 1rem; 
    }
    .salary-report-table tfoot th:first-child  { 
        border-bottom-left-radius: 1rem; 
    }
    .salary-report-table tfoot th:last-child   { 
        border-bottom-right-radius: 1rem;
    }
    .salary-report-table tr {
        height: 2rem;
    }
    .salary-report-table input.custom-input {
        text-align: left!important;
    }
    .notification-actions.row button {
        padding: 0;
        width: 1.5rem;
        height: 1.5rem;
        color: white;
    }
    
    .notif-action-btn.notif-open {
        background: var(--confirm-color);
    }
    .notif-action-btn.notif-delete {
        background: var(--cancel-color);
    }
    .notification-item .contact-item.review:hover,
    .link-button.add-recipient-btn:disabled,
    .connect-platform-modal .link-button:disabled,
    .salary-report-table input:disabled {
        background: transparent;
    }
    .salary-report-table input[type='text'],
    .salary-report-table input[type='number'],
    .salary-report-table select,
    .customer-autocomplete {
        width: 100%;
        border:none;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.7rem;
        outline:none;
        background: transparent;
    }
    .salary-report-table th, .salary-report-table td {
        padding: 0 0.3rem;
        font-size: 0.7rem;
    }
    .salary-report-table th {
        background-color: var(--menu-bar-color);
    }
    .provider-block {
        padding: 1rem;
        background: var(--element-background-color);
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-element);
        box-sizing: border-box;
    }
    .paystub-status {
        padding: 0.3rem 0.8rem;
        border: 1px solid;
        border-radius: 18px;
    }
    .legend-no-selection,
    .paystub-status.unpaid {
        color: var(--inactive-color);
    }
    .paystub-status.paid {
        background:var(--confirm-color);
        border-color:var(--confirm-color);
        color: var(--element-background-color);
    }
    .paystub-status.partially-paid {
        background:var(--role-admin-color);
        border-color:var(--role-admin-color);
        color: var(--element-background-color);
    }
    .paystub-status.overpaid {
        background: var(--cancel-color);
        border-color: var(--cancel-color);
        color: var(--element-background-color);
    }
    .add-custom-motivation-btn .plus-span,
    .add-custom-payment-btn .plus-span {
        width: 0.7rem;
        height: 0.7rem;
        font-size: 0.7rem;
        line-height: 0.7;
    }
    .add-custom-motivation-btn,
    .add-custom-payment-btn {
        font-size: 0.6rem;
        white-space: nowrap;
        background: transparent;
        padding: 0;
    }
    /***Paystubs***/
    .paystub-body,
    body.paystub-body {
        height: fit-content;
        padding: 2rem;
        font-family: 'Yooty GR', Sans-serif;
    }
    .paystub-wrap {
        border: 1px solid #ccc;
        border-radius: 1rem;
    }
    .paystub-table {
         width: 100%;
        border-collapse: separate;
         border-spacing: 0;
    }
    .paystub-table tr {
        height: 2rem;
    }
    .paystub-table th,
    .paystub-table td {
        padding: 0 0.5rem;
        font-size: 0.7rem;
        text-align: center;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    
    .paystub-table thead th {
      background: #f2f2f2;
      border-top: none;
    }
    .paystub-table thead th:first-child,
    .paystub-table thead th:nth-child(2),
    .paystub-table tbody td:first-child,
    .paystub-table tbody td:nth-child(2) {
      text-align: left;
    }
    .paystub-table thead th:first-child,
    .paystub-table tbody td:first-child { border-left: none; }
    .paystub-table thead th:last-child,
    .paystub-table tbody td:last-child { border-right: none; }
    .paystub-table tbody tr:last-child td { border-bottom: none; }
    /***Reports***/
    .chart-tooltip-html {
        flex-direction: column;
        gap: 0.3rem;
        font-size: 1rem;
        width: fit-content;
        box-sizing: border-box;
        position: absolute;
        pointer-events: none;
        background: white;
        border: 1px solid #ccc;
        border-radius:var(--block-border-2);
        padding: 0.3rem;
        z-index: 1000;
    }
    .chart-hover-menu-item {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        font-size: 0.6rem;
    }
    .service-mix-grid {
        display: flex;
        gap: 1rem;
    }
    .service-mix-section input {
        border-color:var(--inactive-color);
    }
    .legend-item {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-size: 0.7rem;
    }
    .legend-item.column {
        align-items: start;
    }
    .pie-slice { transition: opacity .15s; }
    .pie-slice:hover { filter: brightness(1.1); }
    .legend-swatch { display:inline-block; border-radius:2px; }
    
    .slice-0  { fill:#1687ff; background:#1687ff; }
    .slice-1  { fill:#ddd; background:#ddd; }
    .slice-2  { fill:#ff6063; background:#ff6063; }
    .slice-3  { fill:#76b7b2; background:#76b7b2; }
    .slice-4  { fill:#59a14f; background:#59a14f; }
    .slice-5  { fill:#edc949; background:#edc949; }
    .slice-6  { fill:#af7aa1; background:#af7aa1; }
    .slice-7  { fill:#ff9da7; background:#ff9da7; }
    .slice-8  { fill:#9c755f; background:#9c755f; }
    .slice-9  { fill:#bab0ab; background:#bab0ab; }
    .slice-10 { fill:#2a9d8f; background:#2a9d8f; }
    .slice-11 { fill:#e76f51; background:#e76f51; }
    .pie-slice.selected {
        stroke: var(--primary-color);
        stroke-width: 1;
    }
    
    .pie-block.column {
        gap: 1rem;
        width: fit-content;
        padding: 1rem;
        background: var(--element-background-color);
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-element);
    }
    .pie-section.row {
         gap:1rem; 
         align-items:flex-start;
     }     
    .pie-block .dropdown {
        font-size: 0.6rem;
        width: 6rem;
    }
    .pie-block .dropdown-selected {
        justify-self: center;
    }

    
    .pie-section.row {
        align-items: start;
    }
    .idle-customers-report {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        background: var(--element-background-color);
        border-radius: var(--block-border-2);
        border-top: 1px solid #ccc;
        min-height:60vh;
        gap: 1rem;
        box-shadow: var(--box-shadow-element);
    }
    .report-controls-wrapper {
        display: flex;
        align-items: center;
        gap: 1rem;
        white-space: nowrap;
    }
    .slot-time,
    #facetBreakdownDropdown {
        white-space: nowrap;
    }
    #last-90-days-btn,
    #last-180-days-btn,
    #set-min-jobs-btn {
        background: transparent;
        color: var(--inactive-color);
        border: 1px solid;
        width: 100%;
    }
    #last-90-days-btn.active,
    #last-180-days-btn.active,
    #last-90-days-btn:hover,
    #last-180-days-btn:hover,
    #set-min-jobs-btn:hover {
        background: var(--inactive-color);;
        color: white;
        border: 1px solid var(--inactive-color);
    }
    #last-90-days-btn:hover,
    #last-180-days-btn:hover,
    #set-min-jobs-btn:hover {
        background: var(--inactive-color);;
        color: white;
        border: 1px solid var(--inactive-color);
    }
    /***Promotions***/
    .twilio-balance {
        border: 1px solid;
        border-radius: var(--block-border-2);
        justify-self: end;
        align-items: center;
        justify-content: center;
        height: 2.5rem;
        background: var(--element-background-color);
    }
    .twilio-balance .loading-spinner {
        margin:0;
    }
    .campaign-buttons button {
        width: 100%;
        background: var(--element-background-color);
        color: var(--inactive-color);
        border: 1px solid;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        gap: 0.5rem;
        position: relative;
        height:2.5rem;
    }
    .campaign-buttons button .btn-label {
        flex: 1 1 auto;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .campaign-buttons button:hover {
        background: var(--inactive-color);
        color: white;
        border: 1px solid var(--inactive-color);
    }
    .campaign-details {
        grid-template-columns: 40% auto;
        gap: 1rem;
        height: 100%;
        max-height: 900px;
        overflow:hidden;
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);    
        background: var(--element-background-color);
        box-shadow: var(--box-shadow-element);
        box-sizing: border-box;
    }   

    .subscription-status {
        display: grid;
        grid-template-columns: auto 20px 20px;
        align-items: center;
        gap: 3px;
    }
    /***Business***/
    .logo-preview {
        display: flex;
        justify-content: center;
        height: 100px;
        border: 1px solid #ccc;
        padding: 0.5rem;
        width: fit-content;
        min-width: 100px;
        border-radius: var(--block-border-2);
    }
    .logo-upload.link-button {
        font-size: 0.8rem;
        max-height: 100px;
        height: 100%;
        width: 100%;
    }
    .app .logo-upload.link-button {
        max-width: 100px;
    }
    .app-preview-screen img {
        height: 200px;
    }
    
    .app-preview-screen {
        position: relative;
    }
    
    .app-icon-preview {
        position: absolute;
        top: 88px;
        left: 71px;
        border-radius: 12px;
        gap: 5px!important;
    }
    .app-icon-preview img {
        height: 46.5px;
        width: 46.5px;
        border-radius: 12px;
        
    }

    .app-icon-preview span {
        color: white;
        font-weight: 200;
        text-align: center;
        max-width: 60px;
        font-size:7px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .map-section {
        position: relative;
        display: flex;
        gap: 1rem;
        max-width: 100%;
        max-height: 400px;
    }
    .business-setting-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin: 0.3rem;
    }
    .service-area-modal .provider-item {
        display: grid;
        grid-template-columns: 1rem 2rem 20% 27% auto;
        gap: 1rem;
        padding: 0.2rem 0.5rem;
    }
    .business-setting-item {
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
        box-shadow: var(--box-shadow-light);
    }
    .business-setting-item.expanded .collapsible-content {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1rem;
    }
    .business-setting-item .collapsible-header {
        border: none;
        transition: background-color 0.3s ease;
    }
    .people-lists .collapsible-header {
        border: none;
        border-top: 1px solid;
        border-bottom: 1px solid;
        border-radius: 0;
        padding: 0.1rem 0.5rem;
    }
    .zone-header {
        width: 100%;
        padding: 0.5rem;
        border-bottom: 1px solid #ccc;
        display: grid;
        grid-template-columns: 1rem 50% 2rem auto 2rem 2rem;
        gap: 1rem;
        align-items: center;
        box-sizing: border-box;
    }
    .zone-list.column {
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        height: 400px;
        box-sizing: border-box;
    }
    #map {
        flex: 1;
        height: 400px;
        width: 100%;
        position: relative;
        border-radius: var(--block-border-2);
        border: 1px solid #ccc;
        box-sizing: border-box;
        overflow: hidden;
        outline:none;
    }
    #zipList,
    #zoneList {
        padding: 0.5rem;
        background-color: var(--background-color);
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        text-align: left;
        font-size: 0.8rem;
        width: 100%;
        max-width: 13rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow-y: auto;
        transition: transform 0.3s ease;
    }
    #zipCodes {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        font-size: 0.7em;
        padding-top: 10px;
    }
    .modal-zone-item.active-zone .zone-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        transition: max-height 0.3s ease;
        background-color: #fff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        margin-bottom: 5px;
        border-bottom: 1px solid #ccc;
    }
    .zone-item {
        align-items: center;
        cursor: pointer;
        font-size: 0.8rem;
        display: grid;
        grid-template-columns: 1.5rem auto;
        gap: 0.5rem;
        padding: 0.3rem;
        border-radius: var(--block-border-2);
    }
    .current-editing-zone-legend {
        position: absolute;
        left: 2px;
        top: 2px;
        width: 20%;
        max-width:120px;
        min-height: fit-content;
        max-height: 30%;
        background: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8em;
        padding: 2px 2px 6px 2px;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-radius: var(--block-border-2);
        z-index: 1000;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        overflow-x:hidden;
        overflow-y:auto;
    }
    .current-editing-zone-legend .modal-header {
        border: none;
        width: 100%;
        padding: 0.5rem;
        box-sizing: border-box;
    }
    .providers-select-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
    }
    .zip-code-item {
        display: grid;
        grid-template-columns: 3rem 1rem;
        border: 1px solid var(--primary-color);
        border-radius: 15px;
        width: fit-content;
        align-items: center;
        width: 4rem;
        padding: 0 0.1rem;
    }
    .outlined-button-primary.remove-zip-btn {
        border-radius: 50%;
        padding: 0;
    }
    /***Branding***/
    .color-square {
        display:inline-block;
        width:1.5rem;
        height:1.5rem;
        vertical-align:middle;
        cursor:pointer;
        border-radius: var(--block-border);
        border: 1px solid #ccc;
    }
    .logo-selection.row {
        padding: 1rem 0;
        align-items: start;
        gap: 1rem;
    }
    .logo-selection.row .column {
        gap: 1rem;
    }
    /***Integrations***/
    .business-setting-item.expanded {
        order: -1;
        grid-column: 1/-1;
    }
    .integration-button {
        padding: 0.2rem 1rem;
    }
/***Mobile***/
@media (min-width:768px){
    .row.customer-actions,
    .mobile-view {
        display: none!important;
    }    
}
@media (max-width:768px){
    .page {
        height: calc(100% - 2.5rem);
    }
    .multi-integration-launcher {
        bottom: 1rem;
        width: 3rem;
        height: 3rem;
    }
    .row.customer-actions,
    .mobile-view {
        display: flex!important;
    }
    .week-view .booking-action-buttons,
    .desktop-view{
       display:none!important; 
    }
    body {
        padding: 0rem;
    }
    .page-header {
        margin-top: 0.3rem;
    }
    #menu-holder {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1;
    }
    #content,
    .main-container {
        width: 100%;
        margin: 0;
        height: calc(100% - 2.5rem);
    }
    .menu-bar-container {
        position:fixed;
        bottom:0;
        height: fit-content;
        width: 100%;
        margin: 0;
        display: flex;
        flex-direction: row;
        padding: 0.2rem 1rem 1.5rem 1rem;
        gap: 1rem;
        border-radius: 0;
        overflow-x: auto;
    }
    .eta-results-container {
        flex-direction: column;
    }
    .menu-item-span,
    .dashboard .page-footer {
        display:none;
    }
    .calendar-period {
        white-space: nowrap;
    }
    .calendar-actions-top {
        flex-direction: column;
        gap: 1rem;
    }
    .calendar-wrapper-row {
        width: 100%;
        justify-content: center;
    }
    .calendar-date-selection {
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 0.3rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .calendar-section-body {
        padding-top: 0.3rem;
    }
    .calendar-section {
        border-radius: 0;
    }
    .job-header-row.mobile-view{
        display: flex;
        justify-content:space-between;
        padding-left: 1em;
    }
    .modal-content-right .close-modal-btn {
        font-size: 2rem!important;
        color: var(--primary-color);
    }
    .column.job-main-text{
        padding-left: 1.5rem;
        gap: 0.3rem;
    }
    .booked-job-item.mobile-overview-item .job-service,
    .booked-job-item.mobile-overview-item .job-time,
    .booked-job-item.mobile-overview-item .job-duration {
        font-size: 1rem;
        font-weight: 300;
    }
    
    .job-index-circle {
        border: 1px solid;
        width: 1rem;
        text-align: center;
        border-radius: var(--block-border);
    }
    
    .booked-job-item.mobile-overview-item .provider-image-section {
        justify-content: end;
        width: 100%;
        height: fit-content;
        gap: .5rem
    }
    
    .booked-job-item.mobile-overview-item .provider-image-section .provider-img.provider {
        margin: 0;
    }
    #showToday {
        padding: 0.5rem 1rem;
        white-space: nowrap;
    }
    #changeStatusMobile {
        display: flex!important;
    }
    .calendar-section-header {
        font-size: 0.4rem;
    }
    .week-day {
        padding: 0.05rem;
    }
    .page-footer .row {
        justify-content: space-between;
    }
    .copiright{
        align-self: center
    }
    .modal {
        position:absolute;
    }
    .modal-content {
        width: calc(100% - 1rem)!important;
        box-sizing: border-box;
    }
    .auth-content {
        width:80%;
    }
    .column.customer-contacts {
        width: 100%;
    }
    .dashboard-container {
        width: calc(100% - 1rem);
        margin: 0.5rem;
        padding: 0.5rem;
    }
    .floating-menu {
        width: calc(100% - 1rem);
        gap: 1rem;
    }
    .content {
        max-width: calc(100% - 1rem);
        box-sizing:border-box;
    }
    .referred .section-container-header button .primary-icon, 
    .referred .section-container-header button:hover .primary-icon, 
    .referred .section-container-header button svg,
    .section-container-header .primary-icon,
    .section-container-header svg,
    .section-container-header button {
        width:2rem;
        height:2rem;
        font-size: 1.5rem;
    }
    #bookedJobCustomerNameMobile {
        font-size: 1.5rem;
    }
    .methods .section-container-header {
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .section-container-table-head {
        margin: 0.5rem 0;
        padding: 0.5rem 0;
    }
    .section-container-actions-row {
        padding-top: 0.5rem;
    }   
    .payment-method-item,
    .address-item,
    .booked-item,
    .checklist-item,
    .coupon-item,
    .referred-item {
        height: 3rem!important;
    }
    .provider-special-availability-list{
        min-height: 5rem;
    }
    .section-container-actions-row button {
        border-radius: 18px;
        padding:0.5rem;
    } 
    .booked-job-item-body {
        font-size: 0.5rem;
    }
    .share-menu {
        padding: 0.5rem 0.5rem 3rem;
    }
    .share-btn {
        gap: 1.5rem;
        padding: 1rem;
        font-size: 1.2rem;
    
    }
    .option-picker {
        width: 100%;
    }
    .picker-frame.column {
        max-width: 100%;
        gap: 2rem;
        padding: 1rem;
    }
    .label-medium.picker-title{
        font-size: 1.2rem
    }
    .picker-body.column .label-medium,
    .picker-body.column .label-small {
        font-size: 1rem;
    }
    .qty-input, input.invisible-input {
        width: 5rem;
    }
    .menu-bar-container .menu-item,
    .picker-frame .qty-wrapper {
        width: fit-content;
    }
    .qty-wrapper .qty-input {
        font-size: 1rem;
        padding: 0.4rem;
    }
    
    .qty-wrapper button {
        padding: 0.4rem;
        width: 2.5rem;
    }
    .duration-input {
        font-size: 1.2rem;
    }
    span.dur-input {
        padding: 0 0.5rem;
    }
    .input.modal-content .duration-input .invisible-input {
        width: 4rem;
        font-size: 1.5rem;
    }
    .input.modal-content .modal-body {
        justify-content: center;
    }
    .input.modal-content {
        transform: translate(0,0);
        bottom:0;
        left:0;
        top: auto;
        height: 30%;
        width: 100%!important;
    }
    .booking-view.modal-content-right,
    .add-team-modal-content.modal-content,
    .modal-content {
        width:100%!important;
        min-width:100%!important;
        max-width:100%!important;
        height:100%!important;
        max-height:100%!important;
        background-color: #fff;
        padding: 1rem;
        box-sizing:border-box;
    }
    .booking-view.modal-content-right,
    .add-team-modal-content.modal-content {
        top: 0;
        left: 0;
        transform: none;
    }
    .modal-content {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);    
    }
    .copy-schedule-modal-content.modal-content,
    .remember-modal .modal-content,
    .confirm-modal .modal-content {
        min-width: calc(100% - 1rem)!important;
        width: calc(100% - 1rem)!important;
        height: fit-content!important;
    }
    input{
        /*height: 2.5rem;*/
    }
    button {
        border: none;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: var(--block-border-2);
    }
    .job-customer-item .customer-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
    }
    .contact-item.payment-method {
        grid-template-columns: 2rem auto auto 2rem;
    }
    .special-day-row.grid,
    .map-section.grid,
    .provider-special-availability,
    .personal-availability-section {
        grid-template-columns: 1fr;
    }
    .zone-list.column {
        height: 100%!important;
    }
    #providerZoneMap {
        height: 300px;
    }
    .map-section.grid {
        grid-template-rows: 300px 1fr;
        max-height: 100%;
        height: 100%;
    }
    .customer-info .toggle-invoice {
        margin-right: 2rem;
        font-size: 1.2rem;
    }
    .calendar-dow,
    .calendar-month {
        font-size: 0.3rem;
    }
    .calendar-date {
        font-size: 0.6rem;
    }
    .eta-option .label-micro {
        font-size: 0.8rem;
    }
    .job-customer-item.column .customer-info .customer-contacts {
        gap: 1rem;
        font-size: 1rem;
        padding-top: 1rem;
    }
    .provider-actions {
        justify-content: end;
        width: 100%;
    }
    .customer-actions button,
    .provider-actions button {
        padding: 0.2rem;
        width: 2.2rem;
        height: 2.2rem;
        background: transparent;
        border: 2px solid;
        color: var(--inactive-color);
        border-radius:50%;
    }
    .provider-actions .primary-icon path {
        fill:var(--inactive-color)!important;
    }
    .customer-info .delete-secondary-btn,
    .job-provider-item .remove-provider-btn {
        display: flex;
        width: 2.2rem;
        height: 2.2rem;
    }
    .booked-job-section .placeholder {
        font-size: 1rem;
    }
    .customer-details-section .contact-item.job-item .grid .row,
    .contact-item.job-item .grid .label-medium,
    .contact-item.job-item .label-medium {
        font-size: 0.7rem;
    }
    .contact-item.job-item .grid .label-medium {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .customer-details-section .contact-item.job-item {
        grid-template-columns: 2rem 2rem auto;
    }
    .recurring-job-set.row,
    .recurring-job-item.row {
        font-size: 0.7rem;
        gap: 0.5rem;
    }
    .provider-item {
        grid-template-columns: 2rem 20% 27% auto;
    }
    .provider-item.multiple {
        grid-template-columns: 1rem 2rem 20% 27% auto;
    }
    .recurring-job-item.row {
        grid-template-columns: 1.5rem 3rem auto 4rem 3rem;
    }
    .recurring-job-set.row {
        grid-template-columns: 1.5rem 6rem auto 3rem 3rem;
    
    }
    .recurring-job-set.row span {
        white-space: pre-wrap;
    }
    .customer-details-section .contact-item.job-item .grid {
        grid-template-columns: 35% 30% 30% !important;
    }
    .recurring-job-set.row .label-medium {
        font-size: 0.6rem;
        text-align: center;
    }
    .primary-icon.search-icon,
    #changeStatusMobile .primary-icon,
    .primary-icon.calendar-view.icon20,
    .booked-job-section .placeholder .primary-icon.icon20 {
        width: 1.5rem;
        height: 1.5rem;
    }
        .booked-job.job-map-section {
        min-height: 220px;
        height: 220px;
    }
    .booked-job-item-header {
        flex-direction: column;
        align-items: start;
    }
    .booked-job-item-body {
        font-size: 0.5rem;
    }
    .booked-job-item-body span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .job-start-time {
        font-size: 0.8em;
        white-space: nowrap;
    }
    .job-duration{
        font-size: 0.7em;
    }
    .provider-image{
        margin-right: -10px;
    }
    .job-header-row.mobile-view{
        justify-content:space-between;
        padding-left: 1em;
    }
    .job-header-row.mobile-view .label-medium {
        font-size: 1.2em!important;
    }
    .job-main-info-section .column .row {
        flex-direction: column;
        align-items: start;
        height: fit-content;
    }
    .get-direction-btn {
        font-size: 1em;
    }
    button.edit-service-address {
        padding: 0;
    }
    .job-main-info-section button {
        background: transparent;
    }
    .address-row {
        display: flex;
        align-items: center;
        height: fit-content;
        width: 100%;
    }
    .address-row .label-medium {
        font-size: 1.1em!important;
        text-overflow: ellipsis;
        overflow:hidden;
        white-space: nowrap;
    }
    .booked-job-section {
        padding: 1em;
        background: var(--element-background-color);
    }
    .invoice-summary,
    .invoice-service-list {
        font-size:1.3rem;
        gap: 1em!important; 
    }
    .send-invoice-btn,
    .print-invoice-btn {
        width: 2.2em!important;
    }
    #changeStatus .primary-icon,
    .modal-actions-row .primary-icon,
    .print-invoice-btn .primary-icon,
    .floating-menu-item .primary-icon,
    .eta-option .primary-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
    .invoice-button-bar.row,
    .invoice-sub-item,
    .earning-provider-item,
    .invoice-service-item,
    .invoice-container {
        gap: 1em!important;
    }
    .job-provider-item {
        grid-template-columns: 2rem auto 7.5rem 5rem;
        height: 3rem;
        gap: 0.5rem;
    }
    .earning-provider-item .provider-item {
        grid-template-columns: 3rem auto 4rem;
        gap: 1em;
    }
    /*.job-provider-item img,*/
    .provider-item img{
        height: 3rem;
        width: 3rem;
    }
    .modal-body.attached-to-providers .primary-icon.provider-avatar,
    .modal-body.attached-to-providers .provider-item img {
        height: 2rem;
        width: 2rem;
    }
    .booked-job-item.mobile-overview-item.map-highlight {
        border: 3px solid var(--primary-color)!important;
    }
    .job-status-pill .timer {
        width: 100%;
        box-sizing: border-box;
        border: none;
    } 
    .timer {
        padding:0.22em 0.2em;
        width:30%;
    }
    .modal-content-right button {
        display: flex;
    }
    .manager-item button{
        flex-shrink:0;
        padding: 0;
        height: 2em;
        width:2em;
        border: none;
        background:white;
    }
    .booked-job-section.job-customer-section .customer-name,
    .manager-item .label-large {
        font-size:1rem
    }
    .row.value-row {
        justify-content:space-around;
    }
    .manager-item  .primary-icon.check-icon svg{
        width:2em;
        height:2em;
    }
    .edit-earning  .primary-icon svg {
        width:1.2rem;
        height:1.2rem;
    }
    .universal-floating-menu {
        padding: 5px;
        font-size: 1.4em!important;
        gap: 15px!important;
    
    }
    .menu-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 9999;
    }
    .universal-floating-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height:50%;
        box-sizing: border-box;
        padding: 0.6rem;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
        z-index: 10000;
    }
    .universal-floating-menu.mobile-menu.open {
        transform: translateY(0);
        gap: 1.5rem;
        padding: 1rem 0.6rem 2rem 0.6rem;
        font-weight: 500;
    }
    .floating-menu-item {
        font-size: 1.2rem!important;
        gap: 1.2rem!important;
    }
    
    .universal-floating-menu .floating-menu-item .primary-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    .email-template-signature .social-icons-cell img {
        width:1.2rem;
        height:1.2rem;
    }
    .email-template-signature .iMessage img{
        max-width:140px !important;
        height:auto
    }
    .paid-stamp-section {
        top: 25%!important;
        right: 10%!important;
        font-size: 1rem!important;
        padding: 0 0.5rem!important;
        border-radius: 8px!important;
        border: 2px solid!important;
    }
    .preview-section {
        padding: 0.3rem!important;
    }
    .transaction-item .row {
        gap: 0.3rem!important;
    }
    .page-preview .invoice-service-item,
    .page-preview .invoice-container {
        gap: 0.1rem;
    }
    .invoice-print-wrapper .invoice-service-header,
    .invoice-print-wrapper .transaction-summary-row,
    .page-preview .label-medium,
    .page-preview .business-info {
        font-size: 0.35rem
    }
    .invoice-print-wrapper .label-micro,
    .invoice-print-wrapper .transaction-amount,
    .invoice-print-wrapper,
    .page-preview .label-small {
        font-size: 0.3rem
    }
}
.grecaptcha-badge{
    transform: scale(0.5);
    transform-origin:0 0;
    left:8px!important;
    right:auto!important;
    bottom: 0rem!important;
}
@media print {
  @page { margin: 0; }
  body * { visibility: hidden !important; }
  .page-preview, .page-preview * { visibility: visible !important; }

  .page-preview {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
}