:root {
    --primary-color: #00478D;
    --footer-color: #00478D;
    --modal-background-color: #f8f8f8f2;
    --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%);
    --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;
    --campaign-donut-delivered: #16a34a;
    --campaign-donut-opened: #2563eb;
    --campaign-donut-failed: #dc2626;
    --campaign-donut-pending: #f59e0b;
    --campaign-donut-unsubscribed: #8b5cf6;
    --campaign-donut-track: #ccc;
    --block-border: 5px;
    --block-border-2: 8px;
    --block-border-3: 1rem;
    --box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.2);
    --box-shadow-element: 1px 1px 8px 2px rgba(0, 0, 0, 0.2);
    --box-shadow-light: 0 2px 10px rgba(0, 0, 0, 0.1);
    --box-shadow-border: 0px 0px 4px 1px rgb(0 0 0 / 17%);
    --box-shadow-border-hover: 0px 0px 5px 1px rgb(0 0 0 / 23%);
    --box-shadow-border-confirm: 0px 0px 4px 1px #4CAF50;
    --box-shadow-border-cancel: 0px 0px 4px 1px #ff8181;

    /*** 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(--modal-background-color);
    top: 0;
    z-index: 2;
}
.hidden {
    display:none!important;
}
.center {
    text-align: center;
    justify-content: center;
    width: 100%;
}
.end {
    align-items: flex-end!important;
    justify-content: flex-end;
}
.start {
    align-items: flex-start!important;
}
.cancelled .provider-avatar-wrapper,
.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.email-campaign-preview-scale-stage {
    pointer-events: none;
}
.with-border {
    border:1px solid #ccc;
    border-radius: var(--block-border-2);
}
.picker-item.email-editor-layer-list-row .primary-icon,
.outlined-button-secondary.frequency-btn.not-selected,
.no-border {
    border: none!important;
}
.outlined-button-secondary.small {
    padding: 0.1rem 0.3rem;
    font-size: 0.9rem;
}
.outlined-button-secondary.email-editor-color-tool:hover {
    border: 2px solid var(--inactive-color)!important;
}
.outlined-button {
    background: transparent;
    border: 1px solid;
    color: var(--inactive-color);
}

button:hover.outlined-button {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: white;
}
.primary-icon.avoid {
    color: var(--cancel-color);
}

.primary-icon.favorite {
    color: var(--star-rating);
}
span.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;
}
.yt-offline-banner {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 50%;
    background: rgba(0,0,0,0.85);
    border-radius: 5px;
    color: white;
    padding: .5rem .75rem;
    transform: translate(-50%);
    box-sizing: border-box;
}

#yt-offline-retry-btn {
    display: grid;
    grid-template-columns: 1rem auto;
    font-size: 0.8rem;
    color: white;
}
.back-btn,
.plus-span,
.add-ref-btn,
.cancel-transaction,
.get-direction-btn,
.add-service-btn,
.danger.expense-delete-btn,
.assigned-probider-btn,
.calendar-navigation .nav,
.customer-info .delete-secondary-btn,
.job-provider-item .remove-provider-btn,    
.calendar-date-selection button,
.calendar-day,
.yt-icon-button.general-email-copy-btn,
.header-notification-btn,
.remove-email-tag,
.availability-collapsible .link-button,
.link-button,
#blockedOnly,
#nonBlockedOnly,
#yt-offline-retry-btn,
.chat-send-job-btn,
.middle-screen-section .add-circle-btn,
.customer-collapsible-header button,
#toggleAddCouponSection,
.time-selection button,
.email-compose-inline-action,
.chat-webchat-info-btn.chat-customer-info-btn,
.recurring-preferred-providers-section .add-more-preferred-providers-btn,
.day-row-body .copy-day-to {
    padding: 0;
    background: transparent;
}
#yt-boot-retry:hover {
    background: var(--primary-color)!important;
    color: white;
}
.page,
.budgeting-section,
.job-summary-row,
.service-bucket,
.customer-card,
.upcoming-job-item,
.recurring-job-item.row,
label.upcoming-job-item,
.calendar-section-header,
.people-dropdown-menu,
.customer-dropdown-menu,
.availability-collapsible,
.business-setting-item,
.campaign-statistics,
.campaign-preview,
.campaign-details,
.job-map-section,
.column.general-email-domain-row,
.existing-platform-accounts.column,
.customer-details-section,
.booked-job-section,
.column.general-email-dns-table,
.recurring-job-set.row {
    background: var(--element-background-color);
    box-shadow: var(--box-shadow-border);
    border-radius: var(--block-border-3);
}
.customer-card:hover,
.team-card:hover,
.recurring-job-set.row:hover {
    box-shadow: var(--box-shadow-border-hover);
}
/***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);
}

.multi-integration-launcher .launcher-menu-item {
    padding: 0.3rem 0.5rem;
    border-radius: var(--block-border-2);
}
.launcher-menu-item.new-incoming {
    border: 2px solid var(--confirm-color);
}
.message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.comment-img-thumbnail img {
    border-radius: 3px;
}
.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-radius: var(--block-border-2);
    box-shadow: var(--box-shadow-border);
    padding: 0.5rem;
    display: none;
}
.multi-integration-launcher .launcher-menu-item:hover {
    background-color: #f0f0f0;
    border-radius: var(--block-border);
}
.multi-integration-launcher.new-incoming {
    box-shadow: 0 0 20px 3px var(--confirm-color);
}
.multi-integration-launcher.new-incoming::before,
.multi-integration-launcher.new-incoming::after {
    content: '';
    position: absolute;
    inset: -0.45rem;
    border-radius: inherit;
    border: 1px solid rgb(40 149 0 / 95%);
    box-shadow: 0 0 24px rgb(31 186 0 / 49%);
    opacity: 0;
    transform: scale(0.86);
    pointer-events: none;
}

.multi-integration-launcher.new-incoming::before {
    animation: launcher-ripple 2.8s ease-out infinite;
}

.multi-integration-launcher.new-incoming::after {
    animation: launcher-ripple 2.8s ease-out 1.4s infinite;
}
.notification-stack {
    position:fixed;
    top:16px;
    right:16px;
    z-index:100000;
    display: flex;
    flex-direction:column;
    gap:10px;
    width:min(360px, calc(100vw - 32px));
    pointer-events:none;
}
.chat-launcher-popup.sticky-notification {
    pointer-events: auto;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
    border-radius: 14px;
    padding: 12px 38px 12px 14px;
    transform: translateX(24px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
@keyframes launcher-ripple {
    0% {
        opacity: 0;
        transform: scale(0.86);
    }
    12% {
        opacity: 0.55;
    }
    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}
.new-event-indicator {
    position: absolute;
    top: -0.2rem;
    right: -0.2rem;
    width: fit-content;
    min-width: 1rem;
    height: 1rem;
    color: white;
    padding: 0.1rem;
    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;
    min-width: 0.8rem;
    width: fit-content;
    height: 0.8rem;
    font-size: 0.5rem;
}
.chat-launcher-popup {
    position: fixed;
    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***/
.notifications-panel {
    background: var(--element-background-color);
    padding: 0.5rem;
    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-border);
    }
.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-item.has-sub-menu {
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
}
.menu-bar-container .menu-item.has-sub-menu .sub-menu-item {
    display: none;
    margin-left: 3.5rem;
}

.filter-btn,
.campaign-manual-contact-row.row input,
input[data-color-text-for],
.outlined-button-secondary[data-prop="cell-divider-side"],
.email-editor-picker-selected[data-email-picker-toggle],
.booked-job-section.recurring-series-danger-zone button,
.outlined-button-primary.kind-btn,
.menu-bar-container .menu-item.has-sub-menu .sub-menu-item .menu-item-span {
    font-size: 0.8rem;
}
.menu-bar-container .menu-item:hover {
    background:#ddd;
}
.sub-menu-item {
    padding: 0.3rem;
    width: calc(100% - 3.5rem);
    box-sizing: border-box;
    border-radius: var(--block-border-2);
}
.sub-menu-item.active,
.menu-bar-container .menu-item.active,
.menu-item.has-sub-menu.active .row.active {
    background: #ccc;
}
button.picker-item,
.contact-item.job-item.webchat-job-picker-item:hover,
.picker-item.expense-category-option,
.job-section.job-payment-section .contact-item.payment-method:hover,
.calendar-wrapper .flatpickr-calendar,
.menu-bar-container .menu-item.has-sub-menu.active {
    background: transparent;
}
.menu-bar-container .menu-item.has-sub-menu.active .menu-item-span,
.calendar-date-selection button:hover,
.get-direction-btn:hover,
.calendar-date-selection button:hover {
    background: transparent;
    color: var(--primary-color);
}
.menu-bar-container .menu-item.has-sub-menu.active .sub-menu-item.active .menu-item-span {
    color: white;
}

.menu-item.has-sub-menu.active .row {
    padding: 0.5rem;
    border-radius: var(--block-border-2);
    width: 100%;
    box-sizing: border-box;
}
.menu-item.has-sub-menu.active .row.active .menu-item-span {
    color: white;
}
.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;
    height: 0;
    transition: all 0.3s;
}
.menu-bar-container:hover .menu-item-span {
    width: fit-content;
    height: 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);
}
.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 {
    position: absolute;
    gap: 0.5rem;
    max-width: 380px;
    background: #fff;
    border-radius: var(--block-border-2);
    padding: 1rem;
    box-shadow: var(--box-shadow-element);
    max-height: 400px;
    overflow-y: auto;
}

.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 {
    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;
        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%;
    }
    .calendar-date .new-job,
    .primary-icon.job-status {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: -0.6rem;
        right: -0.6rem;    
        height: 0.8rem;
        width: 0.8rem;
        border-radius: 50%;
        padding: 0.1rem;   
    }
    .primary-icon.job-status {
        border: 1px solid;
        background: var(--element-background-color);
    }
    .calendar-date .new-job {
        background: var(--confirm-color);
        color: var(--element-background-color);
    }
    .paystub-status.overpaid,
    .notif-action-btn.floating-candidate-delete,
    .outlined-button-secondary[data-email-bg-image-remove],
    .primary-icon.job-status.cancelled-job,
    .outlined-button-secondary.cancel-recurring-series-btn:hover,
    .outlined-button-secondary.danger:hover {
        background: var(--cancel-color);
        border-color: var(--cancel-color);
        color: var(--element-background-color);
    }
    .modal-body,
    .lightbox-modal-content,
    .chat-img-host,
    .auth-failed-icon, 
    .auth-confirm-icon,
    .search-filter-icon,
    #impersonate-form,
    .modal-content-right,
    .modal-content,
    .impersonation button,
    .existing-platform-accounts.column,
    .customer-details-section,
    .provider-avatar-wrapper,
    .primary-icon.gmail-icon,
    .primary-icon.chat-type-icon,
    .primary-icon.chat-icon,
    .yt-checkbox-round,
    .yt-checkbox,
    .auth-oauth:disabled,
    .auth-oauth,
    select,
    .dropdown,
    .header-notification-btn,
    .email-template-editor-stage.column,
    .job-section.upcoming-schedule,
    .input-wrapper-action-buttons button,
    .active-card .edit-team-btn,
    .edit-service-area-btn,
    label.btn-radio,
    .input-wrapper .currency-symbol,
    .time-selector-host,
    .time-selector-host.rf-first-time {
        position: relative;
    }
    .provider-avatar-wrapper .provider-unavailable {
        position: absolute;
        text-align: center;
        vertical-align: middle;
        line-height: 2;
        left: 0;
        top: 0;
        color: white;
        border-radius: 50%;
        background: #ff000047;
    }
    .primary-icon.chat-type-icon .new-event-indicator ,
    .primary-icon.chat-icon .new-event-indicator {
        width: 0.4rem;
        height: 0.4rem;
        min-width: 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.cancel-recurring-series-btn,
    .outlined-button-secondary.danger {
        color: var(--cancel-color);
    }

    .outlined-button-secondary.cancel-recurring-series-btn {
        border: 2px solid;
        border-color: var(--cancel-color)!important;
    }

    #dispAddress,
    #dispEmail {
        max-width: 19rem;
    }
    
    .floating-menu .user-name {
        max-width: 15rem;
    }
    .recurring-providers-section .outlined-button-secondary.add-provider-btn,
    .recurring-preferred-providers-section .outlined-button-secondary.add-preferred-providers-btn,
    .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;
    }
    .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;
    }
    .email-editor-add-image-btn.outlined-button-secondary {
        width: 100%;
        height: 100%;
        border-style: dashed!important;
    }
    .email-editor-add-image-btn {
        height: 100%;
    }
    .email-editor-image-size-host {
        position: relative;
    }
    
    .email-editor-image-size-hint {
        position: absolute;
        right: 8px;
        top: 6px;
        z-index: 12;
        padding: 2px 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .86);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s ease;
    }
    .email-generate-image-modal .invisible-input:disabled,
    .email-editor-image-size-host.email-editor-image-size-hint-visible .email-editor-image-size-hint {
        opacity: 1;
    }
    .yt-checkbox-round.green:checked,
    .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);
    }
    .contact-item.company.row {
        padding: 0.5rem;
        border-radius: var(--block-border-2);
        justify-content: space-between;
    }
    .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;
    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;
}

.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;
}
.label-small.existing-text {
    max-height: 8rem;
    overflow: auto;
    background: var(--element-background-color);
}
.impersonation button {
    padding: 5px 10px;
    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%;
    height: fit-content;
    box-sizing: border-box;
}

#revert-impersonation-form {
    margin-top: 10px;
}
/***Base***/
.page {
    margin: 0.3rem;
    padding: 0.5rem;
}
.service-search-bar,
.search-bar,
.campaign-statistics,
.service-bucket,
.job-map-section,
.upcoming-job-item,
.recurring-job-item.row,
label.upcoming-job-item,
.booked-job-section,
#teamStatusToggle {
    margin: 0 0.3rem;
}
.service-search-bar,
.search-bar {
    background: var(--element-background-color);
    padding: 0 0.3rem;
    width: calc(100% - 0.6rem);
    position:relative;
    box-sizing: border-box;
}
.email-editor-coupon-picker-modal .search-bar,
.create-campaign-modal-content .search-bar {
    margin: 0;
    width: 100%;
}
.service-search-bar input:not(.yt-checkbox-round):not(.yt-checkbox):not([type="checkbox"]):not([type="radio"]),
.search-bar input:not(.yt-checkbox-round):not(.yt-checkbox):not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important;
    border: none;
    padding: 0.3rem;
}
.search-bar.invisible input,
.search-bar.invisible {
    background: transparent;
    border: none;
}

.team .column {
    width:100%;
    box-sizing: border-box;
}
.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 {
    color: var(--inactive-color);
    border: 2px solid;
    border-radius: var(--block-border-2);
}

.primary-icon.search-bar-filter {
    width: 0.95rem;
    height: .95rem;
}
.outlined-button-secondary[data-email-cell-action="clear"],
.email-editor-layer-tools.row button,
.email-editor-layer-list-row .outlined-button-secondary,
.email-editor-editing-menu .outlined-button-secondary,
.selected-services-tree .item.row,
.search-filter-icon {
    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;
}
.inactive,
.add-service-btn:disabled,
.not-matched {
    opacity: 0.7;
}
.email-row.unread,
.label-medium.method-label,
.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;
}
.provider-reviews-list .customer-review,
.link-button.read-original-note-btn,
.link-button.delete-note-btn,
.link-button.edit-note-btn,
.label-micro {
    font-size: 0.6rem;
}
.legend-item,
.pp-list .segmented-toggle,
.segmented-toggle.ends-toggle,
.transaction-item.void,
input[data-prop="button-href"],
#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.method-total,
.label-medium.provider-hourly-rate {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.label-medium.reset-password {
    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;
}
.outlined-button-secondary[data-email-width-preset],
.outlined-button-secondary[data-email-width-full],
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;
    height: 1.5rem;
}
#validCustomersPersonalMain .customer-list.selected.column,
.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;
}
.chat-type-icon .new-event-indicator {
    min-width: 0.4rem;
}
.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;
    }
    .lang-opt {
        display: grid;
        grid-template-columns: 2rem 10rem;
        background: transparent;
        border: none;
        padding: 0.5rem;
    }
    .mobile-view.language {
        padding: 0;
        width: fit-content;
        align-self: end;
    }
    .email-row:hover, 
    .contact-item.job-item.email-job-picker-item:hover,
    .picker-item.expense-category-option:hover,
    .years-collapsible.open .year-selection.collapsible-header,
    .days-collapsible.open .month-selection.collapsible-header,
    label.recurring-option:hover,
    .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;
    }
    .picker-item.expense-merchant-option,
    .selected-services-tree .item.row:hover,
    .selected-services-tree .picker-item:hover,
    .service-tree .picker-item:hover {
        background:transparent
    }
    .lang-opt.selected {
        background: #ccc;
    }
    /***BASE FOOTER***/
    .page-footer {
        display: flex;
        align-items: center;
        color: var(--footer-color);
        justify-content: space-between;
        padding: 0.5rem;
    }
    .menu-item.has-sub-menu.active,
    .label-micro.specify-btn,
    .link-button.label-micro.add-another-day-btn,
    .outlined-button-secondary.q-clear.action-on-hover,
    .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;
}
.accept-conversation-btn {
    padding: 0;
    margin:0.2rem;
    background: var(--confirm-color);
    border-radius: 50%;
}
.campaign-customer-filters .confirm-icon {
    padding: 0;
    width: 1rem;
    height: 1rem;
    border-radius: var(--block-border);
    background: var(--confirm-color);
    transition: opacity 0.3s;
}
.accept-conversation-btn:hover {
    box-shadow: 0px 0px 4px 1px #4CAF50;
}
.accept-conversation-btn .checkmark-icon {
    position: inherit;
    height: 0.7rem;
    width: 0.35rem;
}
.selected-icon {
    position: relative;
    background: var(--confirm-color);
    border-radius: 50%;
}

.selected-icon .checkmark-icon {
    left: 35%;
}
.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;
}
.booked-job-item .auth-confirm-icon {
    position: absolute;
    top: -0.3rem;
    right: -0.3rem;
    width: 0.7rem;
    height: 0.7rem;
}
.booked-job-item.unassigned {
    box-shadow: 0px 0px 4px 1px red!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(--modal-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;
}
.permition-settings.grid {
    grid-template-columns: repeat(4,1fr);
    gap: 0.5rem;
}
/***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;
    }
    #viewZipCodes,
    .record-payment-content .link-button,
    .customer-modal-content .link-button,
    .availability-modal-content .link-button,
    .team-card-active .section-button,
    .team-card-provider-info .link-button,
    .conditions-modal-content .link-button,
    .intake-questions-list .link-button,
    .products-modal-content.modal-content .link-button,
    .extras-modal-content.modal-content .link-button,
    .modifier-modal-content.modal-content .link-button,
    .add-service-modal-content.modal-content .link-button {
        width: 100%;
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        gap: 10px;
        height: 40px;
        background: var(--background-color);
        white-space: nowrap;
        padding: 3px 10px;
        border: 1px solid #ddd;
        color: var(--inactive-color);
        font-size:0.8rem;
    }
    /***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: var(--element-background-color);
        font-size: 1rem;
        box-sizing: border-box;
        resize: none;
    }
    #infoSection .providers-filter.column,
    input.flatpickr-input {
        background: var(--element-background-color);
    }
    .confirm-modal .modal-content,
    #address-modal textarea {
        min-height: 5rem;
    }
    .qty-wrapper.bucket-team-size,
    #aptInput {
        width: 5rem;
    }

    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;
        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;
        border: 1px solid;
    }
    .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,
    .email-editor-email-canvas.column,
    .discount-editor .input-wrapper:focus-within {
        border: 1px solid #ccc;
    }
    .email-editor-email-canvas.column {
        padding: 0.5rem;
        border-radius: var(--block-border-2);
    }
    .input-wrapper .currency-symbol {
        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;
        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;
        width: 100%;
        flex:1;
    }

    .time-selector-host.rf-first-time {
        overflow: hidden;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .time-selector-options.row {
        position: absolute;
        width: 100%;
        gap: 0.5rem;
        align-items: center;
        z-index: 1;
    }
    .time-selector-selected {
        display: flex;
        height: 100%;
    }
    .time-selector-options.row { 
        display:none; 
        top:0; 
        left:0; 
        height:100%; 
    }
    input.time-selector-selected {
        border: none;
        padding: 0.2rem;
        text-align: center;
    }
    .time-selector-options.hours,
    .time-selector-options.minutes,
    .time-selector-options.am-pm {
      height: 100%;
      width: 2rem;
      overflow-y: auto;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .time-selector-actions.row {
        position: absolute;
        gap: 0.5rem;
    }
    
    .time-selector-actions.plus.row {
        top: -1.2rem;
    }
    .time-selector-actions.minus.row {
        bottom: -1.2rem;
    }
    
    .time-selector-actions.row span {
        width: 2rem;
        text-align: center;
        color: var(--inactive-color);
    }
    .availability-collapsible .link-button:hover,
    .link-button.label-micro.add-another-day-btn:hover,
    .time-selector-actions.row span:hover {
        color: var(--primary-color);
    }
    .time-selector-options.row { 
        display: none; 
        top: 0; 
        left: 0; 
        height: 100%; 
    }
    .time-selector-host[data-is24="1"] .time-selector-selected.am-pm,
    .time-selector-host[data-is24="1"] .time-selector-options.am-pm{
      display: none !important;
    }
    .time-selector-selected.am-pm,
    .time-selector-selected.minutes,
    .time-selector-selected.hours {
        justify-content: center;
        align-items: center;
        width: 2rem;
        flex: 0 0 2rem;
    }
    .time-selector-option {
      display: flex;
      align-items: center;
      justify-content: center;
      scroll-snap-align: start;
      user-select: none;
    }
    .time-selector-host[data-is24="1"] .time-selector-selected.am-pm,
    .time-selector-host[data-is24="1"] .time-selector-options.am-pm { 
        display:none; 
    }
    
    .change-time.active .primary-icon path#d,
    .ts-svg.primary-icon:hover path#d,
    .ts-svg.primary-icon path#c,
    .ts-svg.primary-icon path#b {
        fill: currentColor!important;
    }
    .change-time.active .primary-icon  path#b,
    .ts-svg.primary-icon path#d,
    .ts-svg.primary-icon:hover path#b {
        fill: white!important;
    }

    .label-micro.specify-btn,
    .outlined-button-secondary[data-email-width-preset],
    .outlined-button-secondary[data-email-width-full],
    .modal-footer .booked-buttons-section button,
    .select-customer-btn .selected-customer-content,
    .input-wrapper.edit-total_received-input {
        width: fit-content;
    }
    #aptInput,
    .paystub-table tr,
    .salary-report-table tr,   
    .business-logo img,
    .invoice-actions-row button
    .provider-col-header,
    .time-selector-option,
    .job-header-row button,
    .comment-img-thumbnail img,
    .time-selector-host.rf-first-time,
    .primary-icon.googlepay-icon,
    .primary-icon.applepay-icon,
    .pagination .outlined-button-primary,
    .integration-icon-container img,
    .dropdown.primary-phone-dropdown,
    .dropdown.invoice-customer-switcher,
    .user.modal-content .input-wrapper {
        height: 2rem;
    }
    .password-confirm {
        display:none;
        max-height: 0;
        padding: 0;
        opacity: 0;
        transition: all 0.3s ease;
    }
    
    .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;
        justify-content: center;
        align-items: center;
        padding:0;
        margin:0;
        border-radius: var(--block-border);
        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:checked::after,
    .yt-checkbox:checked::after {
        content: '';
        width: 0.25rem;
        height: 0.5rem;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    .yt-checkbox-round.small:checked::after,
    .yt-checkbox.small:checked::after {
        content: '';
        width: 0.15rem;
        height: 0.3rem;
    }
    .js-report-filter-method .yt-checkbox-round:checked::after,
    .js-report-filter-method .yt-checkbox:checked::after {
        width: 0.15rem;
        height: 0.3rem;
    }
    .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 {
        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;
        background: inherit;
    }
    
    textarea.invisible-input {
        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);
    }
    .outlined-button-secondary.selected,
    .quantity-input-wrapper button:hover {
        background: var(--inactive-color);
        border-color: var(--inactive-color);
        color: var(--element-background-color);
    }
    .outlined-button-primary.filter-btn.active,
    .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;
        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;
        flex: 1;
    }
    .schedule-selection .modal-body {
        gap: 1rem;
        padding: 1rem 0;
    }
    .review-answer,
    #addAltNameBtn,
    button,
    .note-item,
    #content,
    #acceptPolicyBtn,
    .company-picker-menu .close-modal-btn,
    .notifications-panel .close-modal-btn,
    .calendar-filter .close-modal-btn,
    .modal .close-modal-btn,
    .main-container,
    .password-confirm,
    .impersonation button,
    .booked-job-section[data-sec="future"] .upcoming-job-item,
    .availability-modal .modal-body,
    .reviews-modal .customer-review p,
    .impersonation.collapsible-container,
    .schedule-selection .modal-body,
    .impersonation .collapsible-header h3,
    textarea.invisible-input.recurring-comment-input,
    .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 {
        display: flex;
        flex-direction: column;
        position: fixed;
        background-color: var(--modal-background-color);
        backdrop-filter: blur(10px);
        padding: 1rem;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-element);
        z-index: 1001;
        transition: opacity 0.3s ease;
        width: 100%;
        color: var(--primary-color);
        background: linear-gradient(180deg, rgb(255 255 255 / 56%), rgba(255, 255, 255, 0.10)), radial-gradient(circle at 30% 30%, rgb(255 255 255), rgb(255 255 255 / 59%) 60%);
        border: 1px solid rgba(255,255,255,0.22);
        box-shadow: 0px 0px 3px rgb(233 233 233), 0px 0px 5px rgb(0 0 0 / 34%), inset 0 1px 0 rgb(255 255 255 / 35%), inset 0px -7px 2px rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(18px) saturate(180%) contrast(108%);
        -webkit-backdrop-filter: blur(18px) saturate(180%) contrast(108%);
    }
    .note-image-thumb img,
    .modal-content-right{
        max-height: 100%;
    }

    .modal-content {
        top: 50%;
        left: 50%;
        max-height: 95%;
        transform: translate(-50%, -50%);
    }
    .modal-content.cropped-modal-content {
        background: var(--modal-background-color);
    }
    .schedule-selection.modal-content,
    #customers-modal .modal-content {
        height: 95%;
    }
    .modal-content-right {
        top: 0;
        right: 0;
    }
    .lightbox-nav-btn {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 50%;
        transform: translate(0, -50%);
        border-radius: 50%;
        padding: 0;
        width: 2rem;
        height: 2rem;
    }
    .lightbox-nav-btn:hover {
        color: white;
        background: var(--primary-color);
    }
    .lightbox-nav-btn.prev-btn {
        left: 1rem;
    }
    .lightbox-nav-btn.next-btn {
        right: 1rem;
    }
    .modal-content.lightbox-modal-content {
        background: none;
        box-shadow: var(--box-shadow-element);
        border: none;
        backdrop-filter: none;
    }
    .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);
    }
    .booking-view.modal-content-right.cancelled {
        box-shadow: -1px -1px 12px 4px var(--cancel-color);
    }
    .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;
    }
    .confirm-message {
        padding-bottom: 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;
    }
    .modal-content.email-actions-content,
    .modal-content.email-template-editor-content {
        max-height: 100%;
        height: 100%;
        background: var(--modal-background-color);
        padding: 1rem;
        box-sizing: border-box;
    }
    .availability-collapsible .link-button,
    .lightbox-modal-content {
        height: fit-content;
        padding: 0;
    }
    
    .lightbox-modal-content img {
        border-radius: var(--block-border);
    }
    .modal-content.lightbox-modal-content {
        max-width: 800px;
    }
    .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;
    }
    .cropped-modal-content,
    .modal-content.email-template-picker-content,
    .modal-content.email-layout-picker-content,
    .width700 {
        width: 700px;
    }
    .width600,
    .settings-modal-content.modal-content,
    .customer-modal.modal-content {
        width: 600px;
    }
    .width500,
    .signature-review-badge-content.modal-content,
    .signature-imessage-content.modal-content,
    .signature-social-icon-content.modal-content,
    .campaign-contact-mapping-modal .modal-content,
    .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;
    }

    .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);
    }
    .call-result-modal .modal-content,
    .recharge-modal .modal-content,
    .modal-content.paystub,
    .on-my-way-modal .modal-content,
    .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;
    }
    .email-setting-item button,
    .gmail-modal .modal-body,
    .page.promotions .page-section,
    .picker-frame.column.schedule,
    .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,
    #infoSection,
    .email-image-library-grid button,
    .floating-menu .user-name,
    .page.reviews,
    .reviews .page-section,
    .search-customer-section,
    .yt-collapsible-content,
    .reviews-modal,
    .auth-card,
    .collapsible-content,
    .main-container,
    .provider-reviews-list .customer-review,
    .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;
    }
    .page.team,
    .sms-detail-panel,
    .email-template-editor-stage.column,
    .salary-report-form,
    .recurring-jobs-list,
    .modal.booking-view-modal.job-opportunity-modal .modal-body,
    .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,
    .availability-modal-content .modal-body,
    .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);
        border: none;
        padding: 0.5rem 1rem;
        border-radius: var(--block-border-2);
        justify-content: center;
    }
    .yt-button {
        background: var(--primary-color);
        color: #fff;
        gap: 1rem;
    }
    .yt-button.cancel:hover,
    .yt-button.cancel {
        background: var(--cancel-color);
    }
    .selected-services-tree .item.row,
    .policy-link.disabled,
    .otp-collapsible-item.connected,
    button:disabled {
        cursor: auto;
        pointer-events: none;
    }
    button:disabled {
        background:#ccc;
    }
    .link-button:disabled {
        background: transparent;
        color: #ccc;
    }
    #acceptPolicyBtn,
    .close-modal-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        border: none;
        font-size: 1.2rem;
        font-weight: bold;
        color: black;
        padding: 0;
        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;
    }
    .auth-oauth:disabled,
    .auth-oauth,
    .dropdown-options.visible,
    .label-small.existing-text,
    .email-editor-layer-selector .picker-list.column,
    .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;
    }
    .add-provider-btn .outlined-button-secondary:hover,
    .recurring-providers-section:hover .outlined-button-secondary.add-provider-btn:hover,
    .recurring-preferred-providers-section:hover .outlined-button-secondary.add-preferred-providers-btn:hover,
    .yt-button.add-customer-btn:hover,
    .yt-button.add-customer-btn:hover .plus-span,    
    .outlined-button-secondary:hover {
        border-color: var(--inactive-color)!important;
        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(--primary-color);
    }

    .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 {
        display: grid;
        grid-template-columns: 1.5rem 13rem;
        gap: .5rem;
        align-items: center;
        justify-items: center;
        justify-content: center;
        background: var(--element-background-color);
        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%);
    }
    .availability-collapsible .link-button,
    .link-button {
        border: none;
        color: var(--pimary-color);
        width: fit-content;
    }
    .link-button.tiny {
        font-size: .6rem;
    }
    #account-access-modal .link-button.tiny {
        color: #9d9d9d;
    }
    .add-btn,
    .link-button.picker-back-btn,
    .job-customer-item .customer-name:hover,
    .link-button.add-phone,
    .link-button.back-btn:hover,
    .link-button:hover {
        text-decoration: none;
    }
    .link-button.supervise-chats-btn,
    svg.qr-svg,
    .sms-otp-block .link-button.secondary,
    .yt-button.add-2fa span,
    .link-button.secondary {
        align-self: center;
    }

    .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;
        font-weight: 300;
        line-height: 0.1;
    }

    .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;
    }

    .no-border-btn,
    .email-action-btn,
    .email-image-library-grid button,
    .yt-button.copy-code-btn {
        padding: 0;
    }
    .job-time-btn,
    .no-border-btn,
    .yt-button.copy-code-btn {
        background: transparent;
        gap: 0;
    }
    .job-time-btn.column.not-selected {
        color: var(--cancel-color);
    }
    .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;
        border: none;
        color: var(--primary-color);
        font-size: 0.7rem;
    }

    .auth-signup-form,
    .auth-password,
    #2fa-input,
    #create-passkey-btn {
        position:relative;
        background: var(--modal-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);
        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;
        border-radius: 50%;
        font-size: 3rem;
        border: 2px solid;
    }
    .email-image-library-grid button,
    .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;
    }
    .outlined-button-secondary[data-prop="cell-divider-side"],
    .email-editor-picker-selected[data-email-picker-toggle],
    .email-image-library-grid button[data-email-library-filter] {
        width: fit-content;
        height: fit-content;
        padding: 0.1rem 0.5rem;
    }
    .enlarged-selection-btn,
    .email-setting-item button.enlarged-selection-btn {
        background: transparent;
        width: fit-content;
        height: fit-content;
        font-size: 0.8rem;
        color: #ccc;
        padding: 0 0.2rem;
    }
    .enlarged-selection-btn.selected,
    .email-setting-item button.enlarged-selection-btn.selected {
        font-size: 1rem;
        font-weight: 500;
        color: var(--primary-color);
    }
    .add-circle-btn:hover,
    .outlined-button-primary.active ,
    .picker-item.expense-merchant-option:hover .plus-span,
    .outlined-button-primary.kind-btn.active,
    .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%;
    }
    .job-warning,
    .provider-selection-warning.error,
    .provider-selection-warning.attention,
    #notifications-clear-all-btn,
    .picker-warnings.column.center {
        background: var(--cancel-color);
        border-radius: var(--block-border-2);
        color: white;
    }
    #notifications-clear-all-btn {
        padding: 0 0.4rem;
        font-size: 0.6rem;
    }
    .campaign-ring-legend.column,
    .job-warning {
        margin-top: 1rem;
    }
    .job-warning,
    .provider-selection-warning.error,
    .provider-selection-warning.attention {
        padding: 0.5rem;
        font-weight: 500;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
    }
    .job-warning.join-existing-recurring button {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
        color: var(--primary-color);
    }
    .job-warning.join-existing-recurring button:hover {
        border-color: var(--primary-color)!important;
        background: var(--primary-color);
        color: white;
    }
    
    .job-warning.join-existing-recurring {
        background: transparent;
        color: var(--primary-color);
        box-shadow: var(--box-shadow-border);
    }

    .provider-selection-warning.attention {
        width: 100%;
        height: fit-content;
        box-sizing: border-box;
    }
    .provider-selection-warning button {
        background: transparent;
        border: 2px solid;
        color: white;
        padding: 0.3rem;
        font-size: 0.7rem;
    }
    .provider-selection-warning button:hover {
        background: white;
        border-color: white;
        color: var(--cancel-color);
    }
    .pie-slice:hover,
    .yt-button.cancel:hover,
    .yt-button.cancel:hover,
    .campaign-customer-filters .confirm-icon:hover,
    .outlined-button-secondary[data-email-bg-image-remove]:hover,
    .yt-button.yt-cancel-job-btn:hover ,
    .yt-button.on-the-way:hover,
    #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.integration-button.connected:hover {
        filter: brightness(1.3);
    }
    .yt-button.cancelled,
    .yt-button.cancel-btn,
    .provider-status .late,
    .job-status-pill.late,
    .notif-action-btn.notif-delete,
    .primary-label.expired .label-small,
    button.input-wrapper-cancel-edits {
        background: var(--cancel-color);
    }
    .yt-button.job-done,
    .yt-button.verified-domain-status-btn,
    .notif-action-btn.notif-open,
    .new .calendar-month,
    .provider-status .job-done,
    .job-status-pill.job-done,
    .yt-button.connected,
    .yt-button.job-done,
    .provider-status-row .job-done, 
    .status-icon.active,
    .primary-label.row .label-small,
    .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 {
        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%;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 0.65rem;
        line-height: 0.5;
    }
    .yt-button[data-coupon-add-new],
    .yt-button.add-customer-btn,
    .add-custom-number-btn,
    .yt-button.add-customer-btn,
    #addReview,
    #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;
    }
    #addCustomer {
        background: white;
        color: var(--inactive-color);
        justify-self: flex-end;
        font-size:0.7rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
    }
    .yt-button[data-coupon-add-new]:hover,
    .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;
    }
    .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);
    }
    .add-provider-btn .outlined-button-secondary,
    .edit-recurring-address-btn,
    .edit-recurring-frequency-btn,
    .edit-recurring-service-btn,
    .recurring-providers-section .outlined-button-secondary.add-provider-btn,
    .recurring-preferred-providers-section .outlined-button-secondary.add-preferred-providers-btn,
    .add-provider-btn,
    .edit-customer-btn,
    .edit-service-btn {
        font-size: 0.6rem;
        top: 0.5rem;
        right: 0.5rem;
        background: var(--element-background-color);
    }
    .signature-preview-floating-actions.row,
    .notif-action-btn.floating-card-hide,
    .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,
    .recurring-providers-section .outlined-button-secondary.add-provider-btn,
    .recurring-preferred-providers-section .outlined-button-secondary.add-preferred-providers-btn,
    .booked-job-section.job-attached-providers-section .add-provider-btn,
    .booked-job-section .edit-service-btn {
         position: absolute;
         z-index: 1;
    }
    .add-provider-btn .outlined-button-secondary {
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content:center
    }
    .add-provider-btn .outlined-button-secondary,
    .recurring-providers-section .outlined-button-secondary.add-provider-btn,
    .recurring-preferred-providers-section .outlined-button-secondary.add-preferred-providers-btn,
    .booked-job-section .outlined-button-secondary.edit-customer-btn,
    .booked-job-section .outlined-button-secondary.add-provider-btn {
        width: 1rem;
        height: 1rem;
        line-height: 0.8;
        font-weight: 300;
        font-size: 1rem;
        padding: 0;
    }
    .job-section.upcoming-schedule.filled,
    .booked-job-section[data-sec="future"] {
        padding: 1rem 0 0 0;
        background: transparent;
        box-shadow: none;
    }
    .recurring-jobs-list {
        padding: 0.3rem;
        background: transparent;
        box-shadow: none;
        border: none;
    }
    .job-section.upcoming-schedule.filled {
        padding: 1rem 0;
    }
    .add-service-btn {
        font-size: 0.8rem;
        width: fit-content;
        color: var(--inactive-color);
    }

    .add-service-btn.selected {
        font-size: 1rem;
        color: var(--primary-color);
    }
    .fee-remove.outlined-button-secondary,
    .outlined-button-secondary.q-clear.action-on-hover,
    .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;
    }
    
    .primary-icon.avoid-provider,
    .primary-icon.preferred-provider {
        position: absolute;
        bottom: 0;
        right: -.5rem;
    }
    .email-template-copy-btn,
    .email-template-delete-btn {
        padding: 0;
    }
    .email-template-tile-actions.row {
        display: none;
        position: absolute;
        top: -.35rem;
        right: -.35rem;
        z-index: 3;
        padding: 0.1rem;
        border: 1px dashed;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
    }
    .primary-icon.avoid-provider {
        color: var(--cancel-color);
    }
    .primary-icon.preferred-provider {        
        color: var(--star-rating);
    }
    /***SVG***/
    .primary-icon,
    .security-step span img,
    .primary-icon svg {
        display: flex;
        justify-content: center;
    }
    .edit-host,
    .email-template-delete-btn,
    [data-template-copy-type] .primary-icon,
    .email-actions-column.row .primary-icon,
    .picker-item.email-editor-layer-list-row .primary-icon,
    .email-editor-layer-list-row .outlined-button-secondary,
    .fee-remove.outlined-button-secondary,
    .notif-action-btn.floating-candidate-delete,
    .yt-icon-button.general-email-copy-btn,
    .primary-icon.edit-icon,
    .ts-svg.primary-icon,
    .primary-icon.avoid-provider,
    .primary-icon.preferred-provider,
    .primary-icon.line-type-icon,
    .mobile-overview-item .primary-icon.payment-method-icon,
    .primary-icon.ai-rewrite,
    .primary-icon.customer-actions-icon,
    .primary-icon.review-location-icon,
    .primary-icon.onerem,
    .primary-icon.contrast-button,
    .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.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, .floating-menu-item img,
    .primary-icon.draggable-handle,
    .primary-icon.transaction-reward,
    .job-inputs.row .primary-icon,
    .outlined-button-secondary.q-clear.action-on-hover,
    .outlined-button-secondary.payment-method-remove,
    .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,
    .ads-stats-placeholder .loading-spinner,
    .outlined-button-secondary[data-email-bg-image-remove],
    .campaign-details .primary-icon.icon20,
    .primary-icon.icon20,
    .provider-img,
    .selected-icon,
    .cancel-job-btn,
    .delete-special-btn,
    .time-selection button,
    .note-image-thumb .outlined-button-secondary.danger,
    .conversation-info-item .confirm-icon,
    .customer-review-item .primary-icon.tooltip,
    .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;
    }
    .email-list-grid.header .primary-icon,
    .customer-collapsible-header .customer-avatar,
    .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;
    }
    .primary-icon.add-link-btn,
    .email-compose-inline-action,
    [data-generated-crop-add-text] .primary-icon,
    .outlined-button-secondary[data-email-cell-action="clear"],
    .outlined-button-secondary[data-email-regenerate-image] .primary-icon,
    .email-editor-text-toolbar .row .primary-icon,
    .email-editor-layer-tools.row button,
    .row.webchat-job-providers-cell img,
    .providers-avatars .provider-avatar-wrapper,
    .review-provider-item .primary-icon.provider-avatar,
    .review-provider-item .provider-avatar,
    .primary-icon.notification-icon,
    .primary-icon.onehalfrem,
    .primary-icon.launcher-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,
    #acceptPolicyBtn,
    .close-modal-btn,
    .gmail-compose-minimize-btn,
    .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;
    }
    .email-tmpl-preview .primary-icon[data-icon="tmpl_ai_generate"],
    .notif-action-btn.floating-card-hide,
    .chat-send-job-btn .primary-icon,
    .email-controls button .primary-icon,
    .method-icon .primary-icon,
    .recurring-details-section .primary-icon.recurring-icon,
    .resource-icon-wrap,
    img.customer-avatar,
    .calendar-day,
    .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,    
    .email-editor-add-image-btn .primary-icon,
    .campaign-details .primary-icon,
    .provider-float-item svg,
    .provider-avatar,
    img.profile-picture,
    .primary-icon.profile-picture svg,
    .auth-buttons-row button,
    .profile-picture,
    .menu-icon,
    .message-icon,
    .customer-info .toggle-invoice,
    button.chat-send,
    .chat-actions button,
    .client-actions.row button,
    .expand-toggle,
    .outlined-button-secondary[data-email-preview-device],
    .provider-avatar-wrapper .provider-unavailable,
    .assigned-probider-btn,
    .recurring-preferred-providers-section .add-more-preferred-providers-btn,
    .menu-item .primary-icon,
    .lang-opt img {
        width: 2rem;
        height: 2rem;
    }
    .menu-item.active .primary-icon {
        height: 2.1rem;
        width: 2.1rem;
    }
    .note-image-thumb,
    .email-editor-editing-menu .outlined-button-secondary,
    .note-image-placeholder .primary-icon,
    .outlined-button-secondary.add-file-btn {
        width: 2.2rem;
        height: 2.2rem;
    }
    .service-summary .qty-wrapper .qty-input,
    .booking-view .primary-icon.transaction-payment-method,
    .primary-icon.transaction-payment-method {
        width: 2rem;
    }
    .primary-icon.filter-icon {
        padding: 0.2rem;
    }
    img.profile-picture,
    .primary-icon.profile-picture svg {
        border: 2px solid;
        border-radius: 50%;
    }
    .assignment-item:has(input:checked),
    .contact-item.company.row.selected {
        border: 2px solid;
    }
    /*.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%;
    }
    .email-editor-color-swatch,
    .yt-button.add-customer-btn .plus-span,
    .primary-icon.more-icon,
    .profile-picture.large,
    .provider-img img,
    .provider-img .provider-avatar,
    .resource-icon-wrap svg,
    .message-icon svg,
    .primary-icon svg,
    .loading-lottie svg,
    .toggle-type-2-wrapper,
    .custom-toggle-type-1,
    .custom-toggle-type-2,
    .calendar-warning,
    .team-img svg,
    .floating-menu-backdrop,
    .loading-overlay,
    .modal,
    .email-editor-text-block,
    .team-card-header img,
    .primary-icon.edit-avatar,
    .reviews-modal .customer-review,
    .customer-review-item .customer-review,
    .provider-avatar-wrapper .provider-unavailable,
    .assigned-probider-btn .provider-avatar.mini,
    .picker-item.row.email-editor-layer-list-row .primary-icon,
    .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);
    }
    .email-controls button .send-icon-fill,
    .yt-svg-contact-icon-main,
    .loading-lottie path,
    svg.qr-svg path {
        fill: var(--primary-color);
    }
    .svg-contact-icon-bg{
        fill: var(--modal-background-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;
    }
    select {
        color: var(--primary-color)
    }
    .dropdown-options.visible {
        position: absolute;
        z-index: 1001;
        background: white;
        top: calc(100% + 10px);
        left: 0;
        width: 100%;
        max-height: 20rem;
        box-sizing: border-box;
    }
    .on-my-way-modal .dropdown-options.visible {
        max-height: 10rem;
    }
    .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;
    }
    .email-editor-editing-menu .primary-icon[data-icon="revert"],
    .availability-collapsible.open .collapsible-body,
    .existing-platform-accounts.column,
    .column.general-email-dns-table,
    .year-selection.collapsible-header,
    .month-selection.collapsible-header,
    #infoSection .providers-filter.column,
    .column.general-email-domain-row,    
    .dropdown-option {
        padding: 0.5rem;
    }
    .mobile-status.row,
    .team-card-permissions-section.column {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    .dropdown-option:hover {
        background: #f3f3f3;
        border-radius: var(--block-border-2);
    }
    .dropdown.primary-phone-dropdown,
    .dropdown.invoice-customer-switcher {
        display: flex;
        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;
        color:white;
        border-radius: 4px;
    }
    .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(--modal-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;
    }
    .recurring-address-section .address-list,
    .availability-collapsible .collapsible-header {
        border: none;
        padding: 0;
    }
    .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;
    }
    .email-row,
    .time-selection input, 
    .group-header, 
    .general-email-wizard-dot, 
    .floating-card-header, 
    .floating-invoice-item,
    .bn-group-title,
    .option-picker .qty-input,
    .yt-input.rf-first-date.form-control,
    .row.note-attached-images img,
    label.recurring-option,
    .provider-avatar-wrapper .provider-unavailable,
    .ts-svg.primary-icon,
    .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,
    .zone-item,
    .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.inline,
    label.phone-item,
    .booked-job-item,
    .team-card-header,
    .customer-review,
    .delete-special-btn,
    .review-provider-item,
    .review-customer-item,
    .time-selector-option,
    .time-selector-actions.row span,
    .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,
    .email-template-tile,
    .comment-img-thumbnail img,
    .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-button[data-coupon-add-new] {
        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);
    }

    
    .selected-services-tree.column {
        padding: 0 1.8rem;
    }
    /*.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;
    }
    .row.note-attached-images img {
        width: 2.2rem;
        border-radius: var(--block-border-2);
    }
    .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:0 .5rem;
        margin-top: 1rem;
    }
    .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
    }
    .outlined-button-secondary[data-image-crop-mode="original"],
    .customer-details-section.row .segmented-toggle .seg-btn {
        padding: 0.1rem 0.5rem;
    }
    .outlined-button-secondary[data-image-crop-mode] .primary-icon {
        height: 1.5rem;
    }
    
    .outlined-button-secondary[data-image-crop-mode] {
        height: 1.8rem;
        padding: 0.1rem;
    }
    .segmented-toggle .seg-btn.active{
        color:var(--primary-color);
        font-weight:600
        white-space: nowrap;
    }
    .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);
    }
    .checked .toggle-after,
    .unchecked .toggle-before {
        display: flex;
        margin: 0 0.4rem;
        color: var(--modal-background-color);
        font-size: 0.8em;
    }

    .custom-toggle-type-1,
    .custom-toggle-type-2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid #ccc;
        border-radius: 18px;
        padding: 1px;
        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;
    }
    .bn-group-title .toggle-type-2-wrapper {
        width: 3.8rem;
        height: fit-content;
    }
    .toggle-type-2-wrapper {
        display: flex;
        align-items:center;
        position: relative;
    }
    .toggle-handle-circle {
        border-radius: 50%;
        border: 1px solid #ccc;
        background: white;
        transition: all 0.3s ease;
        display: flex;
        flex-shrink: 0;
    }

    #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;
    }
    .page.team,
    .email-editor-properties-content,
    .column.general-email-dns-table,
    .supervised-container,
    .open-chats-supervised,
    .page.customers,
    .upcoming-job-item.reschedule,
    #couponsDiscountBands,
    .row.note-attached-images,
    .payment-methods-list.column,
    .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;
    }
    .row.campaign-customer-filters {
        align-items: baseline;
        gap: 0.5rem;
    }
    .campaign-manual-contact-row.row input,
    .row.job-opportunity-footer button,
    .expenses-new-category-wrap input,
    .expenses-new-merchant-wrap input,
    .auth-password-set .yt-button,
    .yt-button.job-opportunity-claim-btn,
    .auth-password-set .yt-button,
    .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,
    .remember-modal button,
    .auth-buttons-row img,
    .biz-confirm-card button,
    .yt-button.complete-account-btn,
    #changeStatus,
    #go-to-cabinet,
    .reviews-modal .provider-reviews-list.column,
    .invoice-actions-row .primary-icon,
    .row.edit-mode input,
    .user-profile .column,
    #addressSection input,
    .page,
    .note-image-thumb img,
    .selected-customer-content,
    #dropdownTeam.link-button,
    .booked-buttons-section.job-opportunity-claim-choices button,
    .auth-password-form, 
    .auth-password-message,
    .auth-password-wrapper,
    .auth-2fa-login,
    .auth-main-body,
    .auth-password-set,
    .reset-msg.yt-note,
    .auth-oauth-column, 
    .auth-content.create-account, 
    .auth-buttons-row,
    .time-row-slots.row,
    .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 {
        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;
    }

    .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;
    }
    .booked-buttons-section.job-opportunity-claim-choices {
        gap:.5rem;
        align-items:center;
        overflow:hidden;
        display: flex;
        opacity:0;
        max-height:0;
        transform:translateY(1rem);
        pointer-events:none;
        margin-top:0;
        transition:max-height .22s ease, opacity .22s ease, transform .22s ease, margin-top .22s ease;
    }
    /***Tooltip***/
   .info.tooltip,
    .attention-grey,
    .attention-yellow,
    .tooltip.inline {
        display: flex;
        flex-shrink: 0;
        border: 1px solid;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .attention-grey,
    .tooltip.inline {
        color: var(--inactive-color);
        background: #ddd;
    }
    .zone-item.selected {
        background: #ddd;
    }
    .attention-yellow {
        color: #ffa900;
        background: transparent;
    }
    .email-compose-inline-action:hover,
    .email-template-copy-btn:hover,
    .email-action-btn:hover,
    .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);
    }
    .tooltip-float.attention {
        background: var(--cancel-color);
        box-shadow: 0 2px 6px rgb(255 28 28 / 18%);
    }
    .primary-icon.review-location,
    .info.tooltip,
    .tooltip.inline {
        font-size: 0.7rem;
        width: 0.7rem;
        height: 0.7rem;
    }
    .attention-grey {
        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 img{
       height: 3rem;
       width: 3rem;
    }
    .payment-status.label-small {
        padding: 0.2rem 0.5rem;
        border-radius: var(--block-border-2);
    }
    .calendar-navigation button.active:hover .nav,
    .calendar-navigation button.active .nav,
    .payment-status.label-small.paid,
    .primary-icon.delivered.tooltip {
        background: var(--confirm-color);
        color: var(--element-background-color);
    }
    /***Reviews***/
    .email-campaign-preview-scale-shell,
    .gmail-compose-toolbar.gmail-inline-text-toolbar,
    .existing-platform-accounts.column,
    .customer-details-section,
    .job-summary-row,
    .column.general-email-dns-table,
    .availability-collapsible.years-collapsible,
    .report-section.new-customers-retention-section,
    .report-section.payment-methods-section,
    .idle-customers-report,
    .expenses .page-section,
    .column.general-email-domain-row,
    .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);
    }
    .campaign-recipient-tools.column {
        gap: 1rem;
        padding: 1rem;
        margin: 0.3rem;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-border);
    }
    button.same-as-source,
    .customer-review-item.verified-review .star-rating,
    .customer-review-item.verified-review {
        border: 2px solid var(--confirm-color)!important;
    }
    .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;
        justify-content: space-between;
        border: none;
        border: 1px solid #ccc;
    }
    .people-lists .customer-card:hover,
    .picker-body .customer-list,
    .create-edit-service .modifier-item:hover,
    .assignment-item .provider-item:hover,
    .customer-review-item .customer-review:hover {
        box-shadow: none;
    }
    .provider-item.unavailable {
        opacity: 0.6;
    }
    .provider-item.unavailable:has(input:checked) {
        opacity: 1;
    }

    .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 {
        padding: 0.3rem;
        width: fit-content;
        box-sizing: border-box;
        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 {
        height: auto;
        box-sizing: border-box;
        gap: 1rem;
        overflow-x: hidden;
    }
    
    .reviews-modal .customer-review {
        display: flex;
        background: var(--element-background-color);
        padding: 1rem;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow);
        gap: 1rem;
        overflow: visible;
    }
    
    .reviews-modal .customer-review p {
        display: block;
        text-indent: 1rem;
    }
    .time-row.row {
        display: grid;
        grid-template-columns: 4rem auto;
    }
    .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 {
        background: white;
        border-color: var(--primary-color);
    }
/***Budgeting***/
.gmail-email-editor.email-editor-text-block,
.budgeting-section {
    padding: 1rem;
}
.section-add-expense-btn {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--confirm-color);
    font-size: 1.5rem;
    font-weight: 300;
    color: white;
    padding: 0;
}

.budgeting-section-body.column {
    padding-top: 0.5rem;
    border-top: 1px solid #ccc;
}

.danger.expense-delete-btn {
    color: var(--cancel-color);
    border-radius: 50%;
    border: 1px solid;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.8rem;
}

.danger.expense-delete-btn:hover {
    background: var(--cancel-color);
    border-color: var(--cancel-color);
    color: white;
}

.picker-item.expense-row.expense-row-grid {
    display:grid;
    grid-template-columns: 5rem auto 20% 6rem 6rem 1.2rem;
    gap:.5rem; 
    align-items:center;
    padding: 0.1rem 0.5rem;
    border-radius: var(--block-border-2);
}

/***Pages***/
    /***Login***/
    .cropped-modal-content .modal-body {
        gap: 0rem;
    }
    .ends-row,
    .eta-column,
    .recurring-service-options,
    .time-row.row,
    .time-row-slots.row,
    .link-button.add-recipient-btn.webchat.supervisor-view,
    .reviews-modal .customer-review .row,
    .budgeting-section.column,
    .create-campaign-modal-content .modal-body,
    .eta-results-container,
    .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(--modal-background-color);
        box-shadow: var(--box-shadow-element);
    }
    .auth-content.create-account {
        max-width: 450px;
    }
    .auth-card,
    .auth-create-account-confirmation {
        flex-direction: column;
        gap: 2rem;
    }
    .collapsible-content.integration-group-content,
    .auth-forgot-password-confirmation {
        flex-direction: column;
        gap: 1rem;
    }
    .auth-buttons-row {
        display: flex;
        justify-content: center;
        gap: 1rem;
    }
    .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;
        align-items: center;
        margin-top: 2rem;
        height: auto;
        justify-content: center;
    }
    .auth-password-form {
        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;
        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;
    }

    .open-chats-supervised,
    .supervised-container {
        flex-direction: column;
    }

    .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;
    }
    /***Reset password page***/
    .reset-msg.yt-note {
        font-size: .8rem;
        margin: .5rem 0;
        justify-content: center;
        display: flex;
    }
    
    .picker-item.row,
    .cancel-job-item .column,
    .time-row-hour,
    .freq-label,
    .copiright,
    .slot-time,
    .info-span,
    #dispAddress,
    #dispEmail,
    #changeStatus,
    #dropdownTeam,
    #facetBreakdownDropdown,
    .reply-email-content.column label,
    .customer-email, 
    .customer-phone,
    .email-tag .label-medium,
    .customer-review .label-medium,
    .get-direction-btn,
    .provider-status span,
    .recurring-job-set.row span,
    .floating-menu .user-name,
    .add-phone-form button,
    .review-provider-item,
    .review-customer-item,
    .avail-seg.job,
    .campaign-buttons button,
    .auth-warning-message button,
    .auth-password-set .yt-button,
    .job-main-info .label-medium,
    .modal-buttons button,
    .radio-label,
    .section-header,
    .app-icon-preview span,
    .campaign-buttons button .btn-label,
    .report-controls-wrapper,
    .add-custom-motivation-btn,
    .add-custom-payment-btn,
    .customer-card .customer-name,
    .calendar-time-hover .hover-label,
    .dropdown.report-filter-dropdown.js-report-filter-method-dd,
    .calendar-section.day-view .time-ruler,
    .collapsible-otp-header span {
        white-space: nowrap;
    }
    .page.mobile-overview,
    .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,
    .signature .email-template-editor-scroll.column,
    .auth-oauth .otp-collapsible-item .collapsible-otp-header {
        justify-content: center;
    }
    .conversation-bottom-bar.row {
        gap: 1rem;
        margin-top: auto;
    }
    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-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-border);
    }
    .date-selection {
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .date-slider {
        flex: 1;
        overflow: hidden;
        justify-content: space-between;
        gap: 0.25rem;
    }
    .date-track {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    .jobs-track {
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    .calendar-day {
        border: none;
        border-radius: 999px;
        font-size: 0.85rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--inactive-color);
        border: 1px solid;
    }

    .calendar-day.active {
        background: var(--inactive-color);
        color: #fff;
        font-weight: 600;
        padding: 0.35rem 0.5rem;
    }
    .chat-webchat-info-btn .label-medium {
        font-weight: 600;
    }
    .chat-webchat-info-btn.chat-customer-info-btn {
        border: 2px solid;
        border-radius: 50%;
        width: 2rem;
        height: 2rem;
    }

    .mobile-overview-jobs-wrapper {
        overflow: hidden;
        position: relative;
    }
    
    .mobile-overview-jobs-track {
        display: flex;
        flex-direction: row;
        transition: transform 0.25s ease-out;
        will-change: transform;
    }
    
    .mobile-overview-day-slide {
        min-width: 100%;
        flex-shrink: 0;
    }
    .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 {
        flex: 1;
        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.on-hold {
        box-shadow: 0 0px 6px #10acc9
    }
    .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;
        margin: 0.3rem;
    }
    .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,
    .notif-action-btn.floating-candidate-delete {
        padding: 0;
        font-size: 0.7rem;
    }
    .job-header-row button {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .recurring-job-item.row .attention-icon,
    .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; */
        box-shadow: var(--box-shadow-border);
        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); */
        box-shadow: var(--box-shadow-border-confirm);
    }
    .booked-job-item.partially-paid {
        border: 2px solid var(--role-manager-color);
    }
    .booked-job-item.pastdue {
        /* border: 2px solid var(--cancel-color); */
        box-shadow: var(--box-shadow-border-cancel);
    }
    .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;
    }
    .calendar-actions-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0.3rem;
    }
    .calendar-type-selection {
        height:fit-content;
    }
    .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);
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-border);
        margin: 0.3rem;
        height: 100%;
        box-sizing: border-box;
    }

    .booking-action-buttons {
        position: absolute;
        gap: 0.3rem;
        right: 0;
        bottom: 0;
    }
    .signature-preview-floating-actions.row,
    .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);
    }

    
    .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;
    }

    .status-bar {
        position: relative;
        width: 100%;
        height: 2px;
    }
    .provider-status-row,
    .provider-top-row {
        align-items: center;
        gap: 1rem;
        justify-content: space-between;
    }
    .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 8rem auto 2rem;
        align-items: center;
        height: fit-content;
        gap: 1rem;
        box-sizing: border-box;
    }
.job-main-info-section {
    margin: 0 0.3rem;
}
.job-service-date.column,
.yt-button.job-opportunity-claim-btn {
    width: 100%!important;
}
.job-service-date.column {
    border-top: 1px solid #ccc;
    padding-top: 5px;
}    
    .job-main-info-section .row {
        gap: 0.5rem;
        justify-content: space-between;
    }
    .job-main-info-section .row.mobile-view {
        justify-content: normal;
    }
    .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;
    }
    .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%;
        flex-shrink:0;
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid;
        color: var(--inactive-color);
        margin-left: auto;
    }

    .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 {
        width: 90%;
        align-self: end;
    }
    
    .customer-extra-collapsible.open {
        width: 100%;
        justify-content: center;
    }
    .earning-provider-item {
        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 {
        border: 1px solid var(--inactive-color);
        color: var(--inactive-color);
    }

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

    .column.recurring-series-jobs {
        min-height: 5rem;
        overflow-y: auto;
        flex-shrink:0
    }
    
    .recurring-job-item.row {
        display: grid;
        grid-template-columns: 2rem 4rem auto 7rem 6rem;
        margin: 0.3rem;
    }
    .recurring-job-item.opportunity.row {
        grid-template-columns: 2rem 5rem auto 7rem;
    }
    .recurring-job-item.row.add-candidate{
        grid-template-columns: 1rem 2rem 4rem auto 7rem 6rem;
    }
    .coupon-future-job-item.recurring-job-item.row {
        grid-template-columns: 1rem 2rem  4rem auto 6rem 10rem;
    }
    .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;
        
    }
    .flatpickr-day.past-date,
    button:disabled.label-micro.specify-btn,
    .assigned-provider:hover .provider-avatar {
        opacity: 0.5;
    }
    .contact-item.accepted-policy input:disabled,
    .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-discounts,
    .recurring-service-summary {
        padding-top: 1rem;
        margin-top: 1rem;
        border-top: 1px solid #ccc;
    }
    .cancel-job-btn {
        padding: 0;
        position: absolute;
        top: -0.3rem;
        right: -0.7rem;
        font-size: 0.8rem;
        line-height: 0.8;
        background: #ccc;
        color: white;
    }
    .yt-button.yt-cancel-job-btn {
        font-size: 0.8rem;
        padding: 0.3rem;
        background: var(--cancel-color);
    }
    /***Job details***/
    .booked-job.job-map-section {
        min-height: 170px;
        height: 170px;
    }
    .job-map-section {
        height: 150px;
        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;
    }
    .label-medium.job-start-time {
        width: 4rem;
        display: flex;
        flex-shrink: 0;
        justify-content: center;
    }
    .extras-info,
    .modifier-info {
        margin-left: .5rem;
    }
    .upcoming-job-item,
    label.upcoming-job-item {
        display: grid;
        align-items: center;
    }
    .job-section.upcoming-schedule .upcoming-job-item {
        grid-template-columns: 2rem 4rem auto 7rem 7rem;
    }
    .upcoming-job-item.reschedule:has(> input:checked) {
        display: grid;
        grid-template-columns: 1rem 2rem 1rem 2rem 5rem auto 7rem auto;
    }
    .upcoming-job-item.reschedule {
        grid-template-columns: 1rem 2rem 5rem auto 7rem auto;
    }
    .upcoming-job-item.single.reschedule {
        grid-template-columns: 2rem 1rem 2rem 5rem auto 7rem auto;
    }
    .upcoming-job-item,
    .recurring-job-item.row,
    label.upcoming-job-item {
        gap: 1rem;
        padding: 0.5rem;
    }
    .upcoming-job-item {
        grid-template-columns: 2rem 5rem auto 7rem auto;
    }
    .upcoming-job-item.attention,
    label.upcoming-job-item.attention {
        border: 2px solid var(--cancel-color);
    }
    .job-time.old-time.label-medium {
        font-size: 0.6rem;
        color: var(--inactive-color);
        text-decoration: line-through;
    }
    .calendar-section.day-view .time-ruler {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--modal-background-color);
        display: flex;
        flex-direction: column;
        width: 4rem;
        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;
        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;
    }
    .provider-column {
        width: 10rem;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
        border-right:1px solid #e1e1e1;
        position:relative
    }
    .provider-col-header {
        padding:0.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        font-weight: 600;
        text-align: center;
        border-bottom: 1px solid #e1e1e1;
        background: #fafafa
    }
    .provider-actions {
        display: flex;
        gap: 0.3rem;
    }
    .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;
    }
    .provider-float-item,
    .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);
    }
    .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(--modal-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;
        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 {
        margin: 0.3rem;
        font-size: 0.8rem;
    }
    .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);
    }

    #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;
    }
    .floating-menu-item img,
    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 {
        color: var(--primary-color);
        font-size: 0.7em;
        border: none;
    }
    .recurring-preferred-providers-section .add-more-preferred-providers-btn {
        border: 2px solid;
        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;
    }
    .payment-method-request-new,
    .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;
    }
    .email-action-btn,
    .email-template-copy-btn,
    .expand-toggle ,
    .row.frequency-top-row button:disabled,
    .recurring-series-add-btn:disabled,
    .calendar-date-selection button,
    .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);
    }
    .create-job-customer-section .address-info:hover,
    .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;
        justify-content: space-between;
    }
     .payment-method-dropdown .dropdown-selected {
         justify-content: normal;
     }
    .dropdown.report-filter-dropdown.js-report-filter-method-dd {
        width: 5rem;
    }

    .report-filter-dropdown .dropdown-option {
        display: flex;
        align-items: center;
        gap: .25rem;
        padding: 0.2rem;
    }
    
    .dropdown-options.js-report-filter-method.visible {
        padding: 0.2rem;
    }
    .yt-checkbox-round.small,
    .report-filter-dropdown input.yt-checkbox-round {
        width: 0.7rem;
        height: 0.7rem;
    }
    .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,
    .add-preferred-method-btn .tooltip {
        font-size: 0.6rem;
        height: 0.7rem;
        width: 0.7rem;
    }
    .booked-job-section {
        margin: 0 0.3rem;
        padding: 1.5rem;
        position: relative;
    }
    .booked-job-section.recurring-details-section {
        flex-direction: row;
        justify-content: space-between;
    }
    .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;
    }

    .service-base-price.label-medium {
        padding-right: 1.3rem;
    }
    .expenses-section.column,
    .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;
    }
    .campaign-message-preview,
    .email-campaign-preview-scale-shell,
    .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;
        width: fit-content;
    }
    
    .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;
        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: 0.5rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        box-sizing: border-box;
        position:relative;
        align-items: center;
        background: var(--modal-background-color);
        cursor:pointer;
    }
    label.recurring-option {
        padding: 0.3rem;
        border-radius: var(--block-border-2);
    }
    .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);
    }
    .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);
    }
    label.contact-item.payment-method-request-new {
        display: grid;
        padding: 0.5rem;
    }
    label.contact-item.payment-method-request-new,
    .contact-item.add-alternative-method-btn,
    .contact-item.payment-method.payment-requested {
        display: grid;
        padding: 0.5rem;
        grid-template-columns: 2rem auto;
        border-radius: var(--block-border-2);
    }
    .contact-item.review .providers-avatars.row span.provider-avatar {
        border: 1px solid var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /***Provider available window***/
    .provider-avail-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        height: fit-content;
    }
    .provider-avail-bar {
        height: 1rem;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        position: relative;
        width: 100rem;
        background-image: repeating-linear-gradient(-45deg, rgb(158 158 158 / 35%) 0 0.3rem, transparent 0.5rem 0.5rem);
    }
    .avail-seg {
        position: absolute;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .avail-seg.free {
        background-image: repeating-linear-gradient(-45deg, rgb(100 238 100) 0 0.3rem, #ffffff 0.5rem 0.8rem);
    }
    .avail-seg.job {
        background: var(--primary-color);
        color: white;
    }
    .provider-avail-info-bar {
        height: 0.8rem;
        position: relative;
        width: 100rem;
    }
    .provider-avail-info-bar span {
        position: absolute;
        text-align: center;
    }
    .assignment-item {
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        padding-bottom: 0.5rem;
    }
    
    .avail-seg.job .label-micro {
        font-size: 0.5rem;
    }
    .selected-customer-content .customer-initials, 
    .dropdown.report-filter-dropdown.js-report-filter-method-dd,
    .link-button.supervise-chats-btn,
    #teamStatusToggle .toggle-before {
        font-size: 0.6rem;
    }
    input[data-signature-social-url],
    .link-button.provider,
    .input-field.answer-comment,
    #scheduleModeToggle,
    .provider-actions .remove-provider-btn,
    .link-button.preferred-provider-delete,
    .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,
    .email-editor-layer-list-row .outlined-button-secondary,
    .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;
    }
    .job-address-apt,
    .row.address-input input {
        font-size: 0.9rem;
    }
    .avail-seg.inserted-job {
        background-image: repeating-linear-gradient(-45deg, rgb(255 255 255) 0 0.3rem, #e1e1e1 0.5rem 0.8rem);
        border: 2px solid;
        transform: translate(0,-50%);
        top: 50%;
        font-weight:500;
    }
    .avail-seg.inserted-job.danger,
    .avail-seg.inserted-job.unavailable {
        color: var(--cancel-color);
        transform: none;
    }
    .assignment-item .provider-item {
        grid-template-columns: 1rem 2rem 5rem 7rem auto;
        align-items: center;
        gap: 1rem;
        border: none;
        background: transparent;
        padding-bottom: 0;
    }
    /***Job create***/
    .people-dropdown-menu,
    .customer-dropdown-menu {
        position: absolute;
        z-index: 10000;
        max-height: 30rem;
    }
    .report-controls-wrapper,
    .selected-customer-content {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .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: flex;
        padding: 0 0.5rem;
        justify-content: space-between;
        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-attachments {
        display: flex;
        padding: 0.1rem 0.3rem;
        gap: 0.5rem;
    }
    .customer-collapsible-header button {
        display: flex;
        color: var(--primary-color);
    }

    .job-section.job-comment-section,
    .job-section.schedule-section {
        padding-bottom: 1rem;
    }
    .job-section.selected-service-section {
        padding-top: 1rem;
    }
    .job-section.upcoming-schedule,
    .job-section.frequency-section,
    .job-section.job-comment-section,
    .job-section.job-questions-section,
    .job-section.job-payment-section {
        box-shadow: var(--box-shadow-border);
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
        padding: 1rem;
        margin: 1rem 0.3rem;
        position: relative;
    }
    .job-time-btn.column.not-selected,
    .outlined-button-secondary.frequency-btn.not-selected,
    .job-section.not-selected {
        box-shadow: 0px 0px 4px 1px rgb(255 0 0 / 57%);
    }
    .cancelled .job-time-btn.center.column.not-selected {
        box-shadow: none;
    }
    .frequency-btn-host {
        display: flex;
        gap: 1rem;
    }
    .yt-input.rf-first-date.attention {
        box-shadow: 0px 0px 4px 1px rgb(255 0 0 / 57%);
        border-color: var(--cancel-color);
        outline: var(--cancel-color);
    }
    .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: 0.3rem;
        gap: 0.5rem;
        padding: 0.3rem 0.5rem;
    }
    .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 {
        position: relative;
    }
    .expand-toggle {
        transition: rotate 0.3s;
        margin-left: auto;
        position: absolute;
        top: 0.75rem;
        right: 0rem;
        transform: translateY(-50%);
    }
    .bucket-header,
    .service-edit-host {
        padding: 1rem;
    }
    .bucket-header .grid {
        grid-template-columns: repeat(5,auto);
        gap: .5rem;
        align-items: center;
    }
    /***Schedule***/
    .calendar-filter {
        position: absolute;
        z-index: 1000;
        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);
    }
    .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;
    }
    .calendar-wrapper {
        color:#ccc;
        position: relative;
    }
    .calendar-warning {
        position: absolute;
        display: flex;
        z-index: 1;
        top: 0;
        left:0;
        background: rgb(0 0 0 / 0.01);
        backdrop-filter: blur(2px);
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
    }
    .availability-collapsible .link-button,
    .link-button.label-micro.add-another-day-btn,
    .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 {
        border: 1px solid;
        color: var(--inactive-color);
        border-radius: 50%;
        font-size: 1.5rem;
        line-height: 0.1;
        font-weight: 100;
    }

    .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)
    }
    .email-image-library-content .modal-header,
    .color-picker-btn[data-color-custom="1"],
    .picker-item.email-editor-layer-list-row .primary-icon,
    .job-section.job-questions-section .questions-section.column,
    .language img.primary-icon.profile-picture,
    #validCustomersPersonalModal .customer-list,
    .job-section.selected-service-section .search-bar,
    .assigned-probider-btn .provider-avatar.mini {
        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;
    }

    .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;
    }
    .flatpickr-day.virtual-recurring-day,
    .flatpickr-day.existing-recurring-day {
        background: var(--primary-color)!important;
        color: var(--element-background-color)!important;
        width: 100%;
    }
    .flatpickr-day.nextMonthDay.virtual-recurring-day,
    .flatpickr-day.prevMonthDay.virtual-recurring-day {
        background-color: #83bbf2!important;
        color: var(--element-background-color)!important;
    }
    .calendar-wrapper .dayContainer {
        text-align: center;
        width: 100%;
        min-width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        align-items: center;
        justify-items: center;
    }
    .calendar-wrapper .numInputWrapper:hover {
        background: transparent;
    }
    .calendar-wrapper .flatpickr-current-month .flatpickr-monthDropdown-months {
        width: 100%;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
    }
    .calendar-wrapper .flatpickr-current-month {
        display: flex;
        align-items:center;
        gap:10px;
        padding: 0;
    }    
    .calendar-wrapper .flatpickr-current-month .numInputWrapper {
        width: 100%;
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        border-radius: var(--block-border-2);
        border: 1px solid #ccc;
    }
    .calendar-wrapper .flatpickr-months .flatpickr-prev-month,.calendar-wrapper .flatpickr-months .flatpickr-next-month {
        display: flex;
        align-items: center;
        padding: 0;
    }

    .cancelled button.job-time-btn.column,
    .yt-checkbox-round.request-new-payment-method,
    .calendar-date.column.old {
        border-color: var(--inactive-color);
    }
    .new .calendar-date.column {
        border-color: var(--confirm-color);
    }
    .link-button.provider,
    .old .calendar-date,
    .email-compose-inline-action,
    [data-change-email-template],
    .schedule-modal .flatpickr-day.flatpickr-disabled,
    .yt-icon-button.general-email-copy-btn,
    .job-attachments .primary-icon,
    .legend-no-selection,
    .duration.label-small,
    .booked-job-section .section-header,
    .paystub-status.unpaid,
    .cancelled .job-time-btn.column,
    .upcoming-job-item.cancelled,
    .link-button.read-original-note-btn,
    .link-button.delete-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);
    
    }
    .add-ref-btn,
    [data-change-email-template]:hover,
    .yt-icon-button.general-email-copy-btn:hover,
    .link-button.provider:hover,
    .job-attachments .primary-icon:hover,
    .multi-integration-launcher:hover .primary-icon.launcher-icon,
    .calendar-wrapper .flatpickr-day {
        color: var(--primary-color);
    }
    .email-action-btn.email-star-btn.selected {
        color: var(--good-rating);
    }
    .calendar-wrapper .flatpickr-weekdays {
        border-bottom: 1px solid;
        margin: 5px;
    }
    .calendar-navigation {
        justify-content: center;
        padding: 0.5rem;
        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;
        vertical-align: middle;
    }

    .calendar-navigation button:hover .nav {
        border-color: var(--primary-color);
        background: var(--primary-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 {
        margin: 0.3rem;
    }
    .column.svc-tree-level-options,
    .column.svc-tree-level-three,
    .column.svc-tree-level-two {
        margin-left: 1rem;
    }
    .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.3rem;
    }
    .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 {
        padding: 0 0.5rem;
    }
    .row.gmail-email-direction-tabs {
        padding: 0 1rem;
    }
    .customer-list {
        flex-shrink: 0;
    }
    .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;
        margin: 0.2rem;
    }
    .column.email-editor-coupon-list,
    .sequence-discount-section,
    .single-discount-section {
        border: 1px solid #ccc;
        padding: 0.5rem;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
    }
    #cust_tx_list {
        border: 1px solid #ccc;
        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;
    }
    #canCombineWithModal .coupon-item,
    #canCombineWithMain .coupon-item{
        display: grid;
        grid-template-columns: 4% 20% 16% 30% 22%;
        gap: 2%;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: var(--block-border);
        width: 100%;
        box-sizing: border-box;
        align-items: center;
        text-align: center;
        box-shadow: var(--box-shadow);
    }
    #canCombineWithModal .coupon-item .coupon-code-label,
    #canCombineWithMain .coupon-item .coupon-code-label,
    #canCombineWithMain .coupon-item .label-large,
    #canCombineWithModal .coupon-item .label-large {
        font-size:0.8rem;
        font-weight:500;
    }
    .row.add-coupon {
        justify-content: center;
        margin-bottom: 0.5rem;
    }
    input#noBookingsInLastDays {
        text-align: right;
        width: 3rem;
    }
    .single-discount-section .input-wrapper,
    .discount-sequence-row .input-wrapper {
        width: 100px !important;
        box-sizing: border-box;
        padding: 0 3px;
        display: flex;
    }
    input.discount-amount-input {
        max-width: 70px;
        text-align:center;
    }
    .date-with-no-limit {
        display: flex;
        gap: 10px;
    }
    #canCombineWithModal,
    #canCombineWithMain {
        margin-top: 10px;
        height:200px;
        overflow-y:auto;
    }
    
    #validCustomersPersonalMain .medium-label {
        width:fit-content;
        white-space:nowrap;
    }
    #validCustomersPersonalModal {
        border: 1px solid #ccc;
        border-radius: var(--block-border);
        height: 200px;
    }
    
    #validCustomersPersonalModal .medium-label label{
        font-size:0.8em;
        width:140px;
        display: flex;
        justify-content: center;
    }
    
    #validCustomersPersonalModal .list-item label{
        font-size: 0.8em;
        white-space: nowrap;
        margin: 0;
    }
    
    #validCustomersPersonalModal .new-customer-label {
        font-size: 0.5em;
    }
    .discount-mode-toggle {
        display: flex;
        align-items: center;
    }
    .sequence-discount-section p {
        margin: 5px 0;
        font-size:0.7em;
    }
    .color-picker-btn img,
    .signature-type-switch button,
    .email-image-library-select img,
    #addSequenceDiscountBtn {
        width: 100%;
    }
    .discount-sequence-row .column label {
        font-size: 0.7em;
        margin: 0;
    }
    .discount-sequence-row .row {
        align-items: center;
        height: fit-content;
        justify-content: space-between;
        font-size: 1em;
    }
    .discount-sequence-row .row input {
        text-align: center;
    }
    .form-input-class .row {
        margin:0;
    }
    label.radio-modifyer-type {
        white-space: normal;
    }
    
    .form-input-class .input-wrapper {
        padding-right:10px;
        width: 130px;
    }
    .code-entry-span {
        padding: 5px;
        border: 1px solid;
        width: fit-content;
        font-size: 1.3em;
    }
    .coupon-list .coupon-item:hover {
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    }
    .coupon-code-section {
        display: flex;
        width: 100%;
        gap:10px;
    }
    .coupon-code-section button{
        font-size:1.2em;
    }
    label.coupon-code {
        font-size: 1.2em;
        padding: 5px;
    }
    .coupon-code {
        display: block; 
        max-width: 150px;
        font-size: calc(12px + 0.8vw);
    }
    .search {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
    }
    .list-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #generateCodeModal {
        height: 45px;
        font-size: 1em;
        white-space: nowrap;
    }
    #toggleAddCouponSection {
        color: var(--primary-color);
        font-size: 25px;
    }

    #toggleAddCouponSection:hover {
        text-decoration: underline;
    }
    .yt-checkbox-round.center,
    .coupon-list .middle-screen-section {
        justify-self: center;
    }
    .coupon-page .page-section {
        background: white;
        margin: 105px 3px 5px 3px;
        padding: 20px;
        width: calc(100% - 6px);
        min-height: 90vh;
        height: 100%;
        border-radius: var(--block-border);
        box-sizing: border-box;
        box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.1);
    }
    .form-input-class {
        padding: 0 20px;
        width: 100%;
        justify-self: center;
        box-sizing: border-box;
        margin: 10px 0;
    }
    .form-input-class label{
        display: flex;
        gap: 10px;
        align-items: center;
        font-size: 0.8em;
    }
    label.radio-modifyer-type {
        white-space: normal!important;
    }
    .add-coupon-section {
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }
    .add-coupon-section h2 {
        margin: 0 0 10px 0;
        font-size: 17px;
    }
    
    
    
    .selection-field {
        border:1px solid #ccc;
        border-radius: var(--block-border);
        margin: 5px 0;
    }
    
    .code-entry {
        font-size:30px!important;
        padding:0 10px!important;
        width: calc(100% - 180px);
    }
    
    #generateCode {
        display: flex;
        padding:5px 3px;
        justify-content:center;
        align-items:center;
        width: 150px;
        height: 47px;
        Font-size:17px;
    }
    #generateCode:hover {
        background:var(--confirm-color);
    }
    .coupon-page .search-bar{
        width: calc(100% - 40px);
        border: 1px solid #ccc;
        border-radius: var(--block-border);
        outline-color: var(--primary-color);
        display: inline-flex;
        align-items: center;
        height: 26px;
        margin: 15px 15px;
        padding: 2px;
    }
    .coupon-page .search-bar input{
        flex: 1;
        padding: 0;
        font-size: 13px;
        border: none;
        outline:none;
        height: 30px;
    }
    
    .coupon-page {
        padding: 0;
        box-sizing: border-box;
    }
    /***Chat***/
    img.chat-connected-user-avatar {
        position: absolute;
        width: 1.5rem;
        border-radius: 50%;
        border: 1px solid #ccc;
        top: 50%;
        left: 60%;
        transform: translate(0,-50%);
    }
    .open-chats-supervised .open-chat-item-content {
        gap: 1.5rem;
    }
    .supervised-container {
        padding: 0.5rem;
        box-shadow: 0px 0px 4px 1px var(--primary-color);
        border-radius: 18px;
        margin-bottom: 1rem;
    }
    img.chat-type-icon {
        position: absolute;
        width: 1rem;
        bottom: 0;
        right: -0.3rem;
    }
    .client-actions.row button {
        padding: 0.2rem;
        border-radius: 50%;
        border: 1.5px solid;
        font-size: 1.4rem;
        font-weight: 300;
        background: transparent;
    }
    .client-actions.row button:hover {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }
    .conversation-info-item {
        display: flex;
        gap: .5rem;
        align-self: center;
        background: #e5e5e5;
        color: grey;
        padding: 0.1rem 0.4rem;
        border-radius: 10px;
    }
    .conversation-info-item .confirm-icon {
        display: flex;
        background: var(--confirm-color);
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    }
    
    .confirm-icon .checkmark-icon {
        position: initial;
    }
    .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;
        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: 2rem 1fr auto;
        gap: 0.5rem;
        padding:0.5rem;
        align-items: center;
        width:100%;
        justify-content: center;
        text-decoration: none;
    }
    .link-button.add-recipient-btn.webchat {
        grid-template-columns: 2rem auto 1fr;
    }
    .recurring.grid,
    .personal-availability-section,
    .preferred-providers-list.grid {
        grid-template-columns: 1fr 1fr;
    }
    .contact-header {
        display: grid;
        grid-template-columns: 2rem auto;
        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 {
        font-size: 1em;
        gap: 0.5em;
    }
    .business-logo {
        display: flex;
        justify-content: end;
    }
    
    .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;
    }
    
    .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,
    .picker-warnings.column.center {
        padding: 0.3rem 0;
    }
    .invoice-service-list {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    
    .invoice-service-header {
        display: flex;
        justify-content: space-between;
    }
    .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 {
        justify-content: end;
        align-self: end;
        width: 50%;
        padding: 0.5rem 0;
    }
    
    .page-preview .invoice-summary {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .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 {
        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;
    }
    .link-button.preferred-provider-delete,
    .booking-view .transaction-item-summary.row {
        justify-self: end;
    }
    .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;
    }
    .modal-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-comment,
    .link-button.add-note-top-btn,
    .link-button.add-customer-contact {
        font-size: 0.8rem;
        align-self: end;
    }
    .conflict-job-item .providers-avatars {
        justify-content: normal;
    }
    .providers-avatars {
        display: flex;
        justify-content: center;
    }
    #cust_rp_amount {
        padding-left: 0.1rem;
    }
    .email-editor-layer,
    .email-image-library-item.column,
    .existing-platform-accounts.column,
    .customer-details-section {
        position: relative;
    }
    .email-editor-layer.selected {
        border: 2px dashed var(--confirm-color);
    }
    .email-editor-layer.hovered {
        border: 2px dashed #3498db;
    }
    td.selected {
        background: #e8ffe8bd!important;
        backdrop-filter: blur(3px);
    }
    td.hovered {
        background: #3498db57 !important;
        backdrop-filter: blur(3px);
    }
    .note-image-thumb .outlined-button-secondary.danger {
        position: absolute;
        top: 0.15rem;
        right: 0.15rem;
        border: none!important;
        line-height: 1.1rem;
        padding: 0;
    }
    .note-image-thumb {
        position: relative;
        border-radius: var(--block-border-2);
        overflow: hidden;
    }
    .row.add-actions-row {
        padding: 0.5rem;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        background: var(--modal-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-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);
    }
    .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;
    }
    .contact-item.accepted-policy,
    .contact-item.accepted-policy.header {
        grid-template-columns: 10rem 5rem 7rem auto;
    }
    .contact-item.preferred-provider.row {
        grid-template-columns: 1rem 1.5rem auto 5rem;
    }
    .gmail-jobs-picker-modal .contact-item.job-item .grid,
    .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;
    }

    .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;
    }
    .gmail-jobs-picker-modal .contact-item.job-item,
    .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 {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .customer-extra-collapsible .contact-item.review {
        grid-template-columns: auto auto;
        gap: 1rem;
        align-items: start;
    }
    .job-section.job-payment-section .contact-item.payment-method {
        display: grid;
        gap: 1rem;
        padding: 0.5rem;
        border-radius: var(--block-border-2);
        align-items: center;
    }
    .contact-item.balance.grid {
        padding: 0 0.5rem;
        gap: 1rem;
        align-items: center;
    }
    .contact-item.balance.grid {
        grid-template-columns: 2rem auto 6rem;
    }
    .yt-button.send-estimate-btn,
    .webchat-jobs-picker-body.grid,
    .email-controls button,
    .contact-item.payment-method.request {
        grid-template-columns: 2rem auto;
    }
    .recurring-payment-section .contact-item.payment-method.primary-method {
        grid-template-columns: 2rem auto 5rem 5rem 2rem;
    }
    .contact-item.job-item.webchat-job-picker-item {
        display: grid;
        grid-template-columns: 2rem 2rem auto 2rem 2rem;
    }
    .contact-item.job-item.email-job-picker-item {
        display: grid;
        grid-template-columns: auto auto 1fr;
        gap: .75rem;
        padding: 0.3rem;
        border-radius: var(--block-border-2);
    }
    .webchat-job-details-card .contact-item.job-item.webchat-job-picker-item {
        grid-template-columns: 2rem 2rem auto auto;
    }
    .recurring-payment-section .contact-item.payment-method.apps {
        grid-template-columns: 2rem 5rem auto 5rem 2rem;
    }
    .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;
    }
    .contact-item.payment-method.add-payment-method-btn,
    .contact-item.payment-method.add-alternative-method-btn {
        grid-template-columns: 2rem auto;
        font-weight:500; 
    }
    .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,
    .contact-item.balance.grid:hover,
    .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);
        box-sizing: border-box;
    }
    .contact-item.primary .primary-icon.contact-icon {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color:var(--element-background-color);
    }
    .arrow-icon,
    .calendar-date.column.paused-job-date,
    .notification-item.column.notification-unread {
        border-color: var(--primary-color);
    }
    .yt-button.send-estimate-btn,
    .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;
    }
    .label-medium.header-price {
        font-weight: 500;
        justify-self: end;
        margin-right: 1rem;
    }
    .request-payment-method-btn .tooltip,
    .add-preferred-method-btn .tooltip {
        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;
        width: fit-content;
    }
    .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);
    }
    .year-selection.collapsible-header,
    .month-selection.collapsible-header {
        padding: 0.5rem;
        border-radius: 0;
    }
    .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;
    }
    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;
    }
    .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;
        margin: 0.3rem;
        padding: 0.5rem;
        transition: border 0.3s;
        cursor:pointer;
    }

    .customer-card .customer-name {
        max-width: 11rem;
    }
    .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;
    }
    .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);
    }

    .job-time-btn.column {
        width: 5rem;
        padding: 0.1rem;
    }
    .upcoming-job-item.new {
        border: 2px solid var(--confirm-color);
    }

    .old .calendar-month {
        background: var(--inactive-color)
    }

    .cancelled .calendar-date.column {
        border-color: #ccc;
    }

    .cancelled .calendar-month {
        background: #ccc;
    }
    .cancelled .calendar-date {
        text-decoration: line-through;
        color: #ccc;
    }
    .cancelled .job-time-btn.column,
    .cancelled .calendar-dow {
        color: #ccc;
    }
    .calendar-date.column.past {
        color:#ccc;
        background: white;
        border-color: #ccc;
    }
    .calendar-date.column {
        position: relative;
        aspect-ratio: 1/1;
        border: 2px solid #2680ff;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
        justify-content: space-between;
    }
    .calendar-date.column.paused-recurring-date {
        border-color: var(--primary-color);
        color: var(--primary-color);
    }
    .calendar-month {
        font-size: 0.3rem;
        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.7rem;
        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***/
    .page,
    .column,
    .address-list,
    .customer-list,
    .twilio-balance,
    .business-info,
    .preview-header,
    .coupon-item-column,
    .auth-2fa-login,
    .auth-main-body,
    .auth-password-wrapper,
    .calendar-filter-body,
    .email-editor-text-block,
    .active-card .team-card-active,
    .provider-general-availabitity-section,
    .provider-available-resources-section {
        display: flex;
        flex-direction: column;
    }
    .provider-general-availabitity-section,
    .provider-available-resources-section {
        display: flex;
        flex-direction: column;
        padding: 2rem 1rem;
        background: var(--menu-bar-color);
    }
    .provider-general-availabitity-section,
    .provider-available-resources-section {
        padding: 2rem 1rem;
    }
    .address-list{
        padding-top: 2rem;
    }
    #signaturePreviewContainer {
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        border-radius: var(--block-border-2);
        background: var(--menu-bar-color);
        position: relative;
    }
    .signature-preview-rendered {
        max-height: 400px;
        overflow-y: auto;
        padding: 1rem;
    }
    .signature-preview-toolbar.row,
    .provider-general-availabitity-section,
    .provider-available-resources-section {
        background: var(--menu-bar-color);
    }
    .booked-job-section .placeholder,
    .chat-launcher-popup,
    .invoice-customer,
    .assignment-item,
    .auth-oauth-column,
    .job-main-info-section,
    .invoice-service-list,
    .provider-avail-wrap,
    .earning-provider-item,
    .invoice-service-item,
    .invoice-container {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    .sms-config,
    .sms-detail-panel,
    .bn-sidebar,
    .coupon-list,
    .campaign-buttons,
    .earning-provider-item,
    .non-mobile-section,
    .sms-campaigns,
    .booked-job-section,
    .form-input-class,
    .invoice-summary,
    .invoice-sub-item,
    .label-medium.reset-password,
    .sequence-discount-section,
    .single-discount-section,
    .balance-transactions,
    .job-details-section-info,
    .job-section,
    .paystubs-grid,
    .availability-collapsible,
    #impersonate-form,
    .page-section,
    .page-header,
    .provider-complete-time.open,
    .provider-block,
    .dropdown-options.visible,
    .modal-customer-list,
    .recurring-jobs-list,
    .search-customer-section,
    #teamContainer {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    .booked-job-item-body {
        display: flex;
        flex-direction: column;
        font-size: 0.7rem;
    }
    .campaign-details.sent,
    .personal-discount-section,
    .integrations-button-container,
    .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,
    .auth-content,
    .reviews-modal,
    .otp-collapsible.open {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    label.select-all,
    .legend-item,
    .sticky-row,
    .sticky-row label,
    .calendar-navigation,
    .customers .header-buttons button,
    .campaign-details .placeholder,
    .nonmobile-controls label,
    button,
    label.team-user-permission-row,
    .calendar-type-selection,
    .job-status-pill,
    #changeStatus,
    .modal-buttons,
    .add-phone-form.show,
    .pronouns,
    .add-button-content,
    .link-button.add-phone,
    .service-search-bar,
    .search-bar,
    .menu-header,
    .review-provider-item,
    .review-customer-item,
    .time-selector-host.rf-first-time,
    .multi-integration-launcher .launcher-menu-item,
    .message-content,
    .required-resources-info .resource-item,
    .payment-method-dropdown .dropdown-selected,
    .payment-method-dropdown .dropdown-option,
    .custom-available-timeslots .dropdown-selected,
    .custom-available-timeslots .dropdown-option,
    .collapsible-section-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .team-card {
        padding: 0.5rem;
        margin: 0.3rem;
        border-radius: var(--block-border-2);
        background: var(--element-background-color);
        box-shadow:var(--box-shadow-border);
        transition: all 0.3s ease;
    }
    .team-card.active-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        box-sizing: border-box;
        box-shadow: var(--box-shadow);
    }
    .team-img {
        display: flex;
        border: 1px solid #ccc;
        border-radius: 50%;
        position: relative;
    }
    .team-img svg ,
    .team-card-header img {
        box-sizing: border-box;
    }
    .manage-user-buttons {
        align-self: end;
        display: flex;
        justify-content: end;
        gap: 0.5rem;
        width: 100%;
    }
    .provider-assignment-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .payment-row.row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }
    .radio-label {
        display: flex;
        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;
    }
    .opt-out-required:hover .edit-opt-out-required-btn.link-button,
    .business-name-label:hover .edit-business-name-btn.link-button {
        display: block;
    }
    .short-link-display button,
    .campaign-customer-item.delivered input,
    .outlined-button-secondary[data-email-cell-action="clear"],
    .sms-wrapper .preview-uploaded-image .circle-delete-btn,
    .scheduled-sent .opt-out-required:hover .edit-opt-out-required-btn.link-button,
    .scheduled-sent .business-name-label:hover .edit-business-name-btn.link-button,
    .edit-opt-out-required-btn.link-button,
    .edit-business-name-btn.link-button,
    .email-template-tile-actions.row,
    .email-editor-picker-options.column,
    .notif-action-btn.floating-card-hide,
    .email-editor-layer-tools.row,
    .cancel-job-btn,
    .availability-collapsible .collapsible-body,
    .calendar-wrapper input.date-selector.flatpickr-input,
    .change-time.active.pending .ts-svg.primary-icon,
    .time-selector-host .auth-confirm-icon,
    .link-button.preferred-provider-delete,
    .delete-special-btn,
    .availability-dropdown .dropdown-option.inactive,
    .coupon-remove,
    .delete-mod,
    .row.customer-actions,
    #changeStatusMobile,
    .email-editor-layer td .primary-icon.resize-icon,
    .outlined-button-secondary.q-clear.action-on-hover,
    .outlined-button-secondary.remove-referrer-btn,
    .job-customer-collapsible .outlined-button-secondary.delete-customer-btn,
    .service-autocomplete-list.column,
    .recurring-providers-section .outlined-button-secondary.add-provider-btn,
    .recurring-preferred-providers-section .outlined-button-secondary.add-preferred-providers-btn,
    .edit-customer-btn,
    .add-provider-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,
    .condition-item .circle-edit-btn,
    .intake-question-item .circle-edit-btn,
    .product-basics .square-button-large .zoom-btn,
    .survey-question-item .circle-edit-btn,
    .modifier-item .circle-edit-btn,
    .extra-item .circle-edit-btn,
    .multiplier-item .circle-edit-btn,
    .primary-icon.product-placeholder[data-replaced="true"] .circle-delete-btn,
    .primary-icon.product-placeholder[data-replaced="true"] .primary-icon.zoom-btn,
    .service-picture .primary-icon[data-replaced="true"] .primary-icon.zoom-btn,
    .service-picture .primary-icon[data-replaced="true"] .circle-delete-btn,
    .preview-file-wrapper .circle-delete-btn,
    .preview-image-wrapper .circle-delete-btn,
    .recurring-option-item .circle-delete-btn,
    .survey-answer-option .circle-delete-btn,
    .came-from-option-line .circle-delete-btn,
    .extra-option-line .circle-delete-btn,
    .modifier-option-line .circle-delete-btn,
    .intake-question-item .circle-delete-btn,
    .resource-item .circle-delete-btn,
    .intake-answer-option .circle-delete-btn,
    .multiplier-option-line .circle-delete-btn,
    .applied-picture-item .circle-delete-btn,
    .asset-picture-item.selected:hover .circle-delete-btn,
    .asset-picture-item .circle-delete-btn,
    .asset-item.selected:hover .circle-delete-btn,
    .asset-item .circle-delete-btn,
    .upload-image-btn .circle-delete-btn,
    .team-card-active {
        display: none;
    }
    #addAltNameBtn,
    .phrase-button:hover .delete-template,
    td.selected:hover .outlined-button-secondary[data-email-cell-action="clear"],
    .email-template-visual-preview:hover .email-template-tile-actions.row,
    .email-editor-picker-options.column.visible,
    .email-editor-layer td.selected:hover .primary-icon.resize-icon,    
    .email-image-library-item:hover .email-image-library-delete,
    .provider-avatar-wrapper,
    .condition-item:hover .circle-edit-btn,
    .intake-question-item:hover .circle-edit-btn,
    .product-basics .square-button-large:hover .zoom-btn,
    .survey-question-item:hover .circle-edit-btn,
    .modifier-item:hover .circle-edit-btn,
    .extra-item:hover .circle-edit-btn,
    .multiplier-item:hover .circle-edit-btn,
    .primary-icon.product-placeholder[data-replaced="true"]:hover .circle-delete-btn,
    .primary-icon.product-placeholder[data-replaced="true"]:hover .primary-icon.zoom-btn,
    .service-picture .primary-icon[data-replaced="true"]:hover .primary-icon.zoom-btn,
    .service-picture .primary-icon[data-replaced="true"]:hover .circle-delete-btn,
    .preview-file-wrapper:hover .circle-delete-btn,
    .preview-image-wrapper:hover .circle-delete-btn,
    .recurring-option-item:hover .circle-delete-btn,
    .survey-answer-option:hover .circle-delete-btn,
    .came-from-option-line:hover .circle-delete-btn,
    .extra-option-line:hover .circle-delete-btn,
    .modifier-option-line:hover .circle-delete-btn,
    .intake-question-item:hover .circle-delete-btn,
    .resource-item:hover .circle-delete-btn,
    .intake-answer-option:hover .circle-delete-btn,
    .multiplier-option-line:hover .circle-delete-btn,
    .applied-picture-item:hover .circle-delete-btn,
    .asset-picture-item:hover .circle-delete-btn,
    .asset-item:hover .circle-delete-btn,
    .upload-image-btn:hover .circle-delete-btn,
    .business-setting-item.expanded .collapsible-content.business-section-notifications-content,
    .menu-bar-container:hover .menu-item.has-sub-menu.active .sub-menu-item,
    .calendar-date.column:hover .cancel-job-btn,
    .contact-item.preferred-provider:hover .link-button.preferred-provider-delete,
    .business-setting-item.expanded .collapsible-content.business-section-branding-content,
    .collapsible-content.show,
    .question-head.row:hover .outlined-button-secondary.q-clear.action-on-hover,
    .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,
    .recurring-providers-section:hover .outlined-button-secondary.add-provider-btn,
    .recurring-preferred-providers-section:hover .outlined-button-secondary.add-preferred-providers-btn,
    .booked-job-section.job-attached-providers-section:hover .add-provider-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,
    .floating-notification-layer.visible,
    .time-selector-host.ts-open .time-selector-options.row,
    .floating-card:hover .notif-action-btn.floating-card-hide,
    .change-time.pending .auth-confirm-icon,
    .auth-confirm-icon.visible,
    .provider-availability-item.special:hover .delete-special-btn,
    .customer-info:hover .delete-secondary-btn,
    .job-provider-item:hover .remove-provider-btn,
    #noBookingsInputWrapper,
    .email-editor-layer.selected:hover .email-editor-layer-tools.row,
    .availability-collapsible.open .collapsible-body {
        display: flex;
    }
    .contact-item.company.row .link-button {
        opacity: 0;
        transition: opacity 0.3s;
    }
    .contact-item.company.row:hover .link-button {
        opacity: 1;
    }
    .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;
    }
    .available-resources-modal .resource-item {
        grid-template-columns: 1rem 2rem auto;
    }
    .required-resources-info .resource-item {
        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,
    #dispAddress,
    #dispEmail,
    .coupon-code,
    .avail-seg.job,
    .label-medium.email-sender,
    .job-main-info .label-medium,
    .app-icon-preview span,
    .campaign-buttons button,
    .column.email-sender .label-medium,
    .preferred-provider-item .provider-name,
    .campaign-buttons button .btn-label,
    .eta-intro-block .service-address,
    .customer-card .customer-name,
    .report-filter-dropdown .dropdown-selected,
    .recurring-job-set.row span,
    .floating-menu .user-name,
    .email-template-tile .label-medium,
    .email-image-library-item .label-micro,
    .customer-review .label-medium {
        white-space: nowrap;
        overflow: hidden;
        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;
    }
    .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;
    }
    label.all-day.row,
    label.day-off.row {
        gap: 0.25rem;
        height: calc(100% - 1rem);
        align-self: end;
    }
    .picker-body .customer-list,
    .picker-body .search-bar,
    .availability-modal .modal-header {
        border: none;
    }
    .expenses-merchant-menu .picker-body.column {
        gap: .25rem;
        max-height: 14rem;
        overflow: auto;
    }
    button.picker-item {
        background: transparent;
    }
    
    .color-picker-btn {
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
        color: #ccc;
        background: transparent;
        border: 1px solid #ccc;
        border-radius: var(--block-border);
    }
    .color-picker-btn:hover {
        border: 2px solid var(--primary-color);
    }
    
    .color-picker .picker-body.grid {
        grid-template-columns: repeat(5,auto);
        gap: 0.2rem;
    }
    .section-header {
        position:absolute;
        background: var(--modal-background-color);
        font-size: 0.7rem;
        padding: 0.1rem 0.5rem;
        border-radius:10px;
        top: -0.65rem;
        left:50%;
        transform: translateX(-50%);
    }
    .new-customers-retention-report .section-header.column,
    .payment-methods-section .section-header.column,
    .bookings-statistic-section .section-header.column {
        position: relative;
        background: transparent;
    }

    .booked-job-section .placeholder {
        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: 24rem;
    }
    .provider-recurring-availability-header.grid {
        border-bottom: 1px solid #ccc;
        position: sticky;
        top: 0;
    }
    .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-recurring-availability-header,
    .provider-special-availability-item,
    .provider-availability-item {
        display: grid;
        gap: 0.5rem;
        padding:0.3rem;
        margin: 0 0.5rem;
        color: var(--inactive-color);
    }
    .provider-special-availability-item,
    .provider-availability-item {
        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;
        gap: 1rem;
        background: var(--menu-bar-color);
    }
    .provider-special-availability-list{
        max-height: 100%;
    }
    .column.picker,
    .email-controls-item button .primary-icon,
    .dropdown.system-action-dropdown {
        height: 100%;
    }
    .provider-recurring-availability-header.grid,
    .provider-availability-item {
        grid-template-columns: auto 4.5rem 4.5rem;
    }
    .provider-availability-item.specified {
        grid-template-columns: auto 4rem 4.5rem 4.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;
    }
    .provider-availability-item.special.period {
        grid-template-columns: 1fr;
    }
    .special-day-row.grid {
        display: grid;
        grid-template-columns: 1rem 2.2rem auto 7rem 7rem;
        align-items: center;
        padding: 0.3rem;
        border-bottom: 1px solid #ccc;
        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-header.grid,
    .day-row-body.grid {
        grid-template-columns: 1rem 1fr 1fr 1fr 2rem;
        gap: 0.5rem;
        box-sizing: border-box;
        align-items: center;
    }
    .skeleton.skeleton-subject.small {
        height: 0.6rem;
    }
    .skeleton-subject,
    .skeleton-date,
    .skeleton-time,
    .skeleton-sender,
    .skeleton-ai-suggested,
    .skeleton-ai-confidence,
    .skeleton-filtered,
    .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 {
        gap: 1rem;
        margin-top: 1rem;
    }
    .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;
    }
    .booked-buttons-section.row button,
    .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;
    }
    .change-time,
    .outlined-button-secondary[data-email-preview-device],
    .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;
        box-shadow: var(--box-shadow-border);
        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;
    }
    input.sales-custom-name-input,
    .salary-report-table input.custom-input {
        text-align: left!important;
    }
    .notification-actions.row button {
        padding: 0;
        width: 1.5rem;
        height: 1.5rem;
        color: white;
    }
    .label-micro.specify-btn,
    .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;
    }
    .unsaved-badge,
    .paystub-status {
        padding: 0.3rem 0.8rem;
        border-radius: 18px;
        font-size: 0.7rem;
    }
    .paystub-status {
        border: 1px solid;
    }
    .unsaved-badge {
        background: var(--cancel-color);
        color: white;
    }
    .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);
    }

    .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;
        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 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: grid;
        gap: 1rem;
    }
    .service-mix-section input {
        border-color:var(--inactive-color);
    }
    .campaign-donut-chart-card.row,
    .sent-campaign-content.sent-sms-campaign-content.campaign-detail-card .row,
    .outlined-button-secondary[data-upload-campaign-contacts-btn],
    .row.salary-provider-header.salary-report-provider-header,
    .legend-item.column {
        align-items: start;
    }
    .campaign-donut-chart-slice.opened-ring,
    .campaign-ring-legend-item.opened-ring .campaign-ring-legend-dot {
        stroke: var(--campaign-donut-opened);
        background: var(--campaign-donut-opened);
    }
    .campaign-detail-card.email-recipients-card.column {
        margin-top: 1.9rem;
    }
    .pie-slice { transition: opacity .15s; }
    .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.grid,
    .service-mix-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .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);
    }
    #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;
    }
    .promotions-campaign-section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        box-sizing: border-box;
        overflow: hidden;
        margin-bottom: 1rem;
    }
    .campaign-buttons button {
        width: 100%;
        background: var(--element-background-color);
        color: var(--inactive-color);
        border: 1px solid;
        display: flex;
        gap: 0.5rem;
        position: relative;
        height:2.5rem;
    }
    .campaign-buttons button .btn-label {
        flex: 1 1 auto;
    }

    .campaign-buttons button:hover {
        background: var(--inactive-color);
        color: white;
        border: 1px solid var(--inactive-color);
    }
    .campaign-details {
        display: grid;
    }
    .campaign-details.empty {
        display: flex;
        justify-content: center;
    }
    .campaign-details {
        grid-template-columns: 50% auto;
        gap: 1rem;
        height: calc(100% - 0.6rem);
        margin: 0.3rem;
        overflow-y: auto;
        padding: 1rem;
        box-sizing: border-box;
    }

    .campaign-section {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        min-height: 50vh;
        width: 100%;
        gap: 1rem;
        margin: 0.5rem 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    .campaign-actions.column {
        gap: 0.5rem;
        max-width: 300px;
    }
.email-campaign-preview-wrapper.sent-email-preview-wrapper.compact-email-preview {
    max-height: 300px;
    overflow-y: auto;
    padding: 0.3rem;
    border-radius: var(--block-border-2);
    border: 1px solid #ccc;
}
.create-campaign-modal-content.modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}
img.preview-uploaded-image,
.chat-message-attachment img {
    border-radius: var(--block-border-2);
    max-width: 250px;
}
.chat-bubble textarea {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #fff;
    outline: none;
}
.create-campaign-modal-content .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.create-campaign-modal-content .scrollable-section {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .3rem;
    overflow: hidden;
}
    .subscription-status {
        display: grid;
        grid-template-columns: auto 20px 20px;
        align-items: center;
        gap: 3px;
    }
    .collapsible-section {
        box-shadow: var(--box-shadow-border);
        border-radius: var(--block-border-2);
        overflow: hidden;
        min-height: 2.5rem;
    }
    .selected-summary.column {
        width: fit-content;
        align-items: center;
    }
    .create-campaign-modal-content .collapsible-header {
        border: none;
        height: 2rem;
    }
    .collapsible-content.open {
        display: flex;
        height: calc(100% - 2.5rem);
        overflow: hidden auto;
        transition: max-height 0.5s ease-in-out;
        padding-bottom: 1rem;
    }
    label.select-all {
        position: sticky;
        background: white;
        border-bottom: 1px solid #ccc;
        top: 0;
        padding: 10px 0;
    }

    .create-campaign-modal-content .collapsible-section:has(.collapsible-content.open) {
        flex: 1 1 auto;
        min-height: 0;
    }
    .create-campaign-modal-content .collapsible-content {
        flex-direction: column;
        gap: 1rem;
        padding-top: 0;
        padding-bottom: 1rem;
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
        box-sizing: border-box;
        min-height: 0;
    }
    .create-campaign-modal-content .collapsible-section {
        flex: 0 0 auto;
        min-height: 2.5rem;
    }
    .ads-page .page-section,
.promotions-page .page-section {
    margin: 45px 3px 5px 3px;
    min-height: 100vh;
}
.attention.tooltip-hover {
    background: transparent;
    color: var(--cancel-color);
}
#refill-warning {
    font-size: 0.8rem;
    font-weight: 300;
    color: white;
    background: var(--cancel-color);
    padding: 0.5rem;
    border-radius: var(--block-border);
}

#refill-warning a {
    font-weight: 800;
    color: white;
}
.email-template-txt-col span,
.email-template-txt-wide span {
    display: flex;
    height: 1px;
    background: var(--primary-color);
}

.primary-icon.email-template {
    height: 1.5rem;
}

span.email-template-logo {
    display: flex;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    background: var(--primary-color);
}

span.email-template-name {
    font-size: 0.4rem;
}

img.email-template-logo {
    height: 0.5rem;
}

.email-template.title-columns.grid {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.email-tmpl-preview {
    height: 130px;
    width: 100%;
}
.email-template-txt-wide.column,
.email-template-txt-col.column {
    align-items: end;
}
.email-template-visual-preview {
    position: relative;
    width: 150px;
    padding: 0.5rem;
    border: 1px dashed;
    border-radius: var(--block-border-2);
}
.email-template-visual-preview:hover {
    box-shadow: var(--box-shadow-element);
}
button.email-layout-tile.column {
    gap: 0.5rem;
    align-items: center;
    text-align: left;
    padding: 1rem;
    box-shadow: var(--box-shadow-border);
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
}
button.email-layout-tile.column:hover {
    box-shadow: var(--box-shadow-border-hover);
    background: #ddd;
    color: #fff
}
button.email-layout-tile.column:hover .email-template-button,
button.email-layout-tile.column:hover .email-template-txt-col span,
button.email-layout-tile.column:hover .email-template-txt-wide span {
    background: #fff;
    color: var(--primary-color)
}
span.primary-icon.email-template.wide {
    height: 3rem;
}
.email-image-library-select img {
    border-radius: var(--block-border-2);
}
span.email-template-button {
    text-align: center;
    background: var(--primary-color);
    color: #fff;
    padding: 2px;
    border-radius: 3px;
    font-size: 0.4rem;
}
.email-editor-editing-menu.column {
    position: absolute;
    left: 0.5rem;
    padding: 0.3rem;
    width: fit-content;
    border: 1px solid #ccc;
    background: var(--element-background-color);
    border-radius: var(--block-border-2);
    box-shadow: var(--box-shadow-border);
    z-index: 1;
}
.email-editor-layout-options.row {
    position: absolute;
    top: -0.3rem;
    left: 2.75rem;
    gap: 0.5rem;
    padding: 0.3rem;
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
    box-shadow: var(--box-shadow-element);
}
.email-editor-layer-tools.row {
    display: none;
    position: absolute;
    right: 0;
    z-index: 1;
}
.email-template-editor-stage.column {
    height: 100%;
    align-items: center;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.025), rgba(0,0,0,.025) 10px, rgba(0,0,0,.04) 10px, rgba(0,0,0,.04) 20px);
}
.bn-preview-body,
.campaign-message-preview,
.email-template-editor-stage.column,
.campaign-message-preview.sent-campaign-preview {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
}

.email-list,
.notifications-panel,
.duration-input-min,
.duration-input-hours,
.service-search-bar,
.search-bar {
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
}
.campaign-message-preview .chat-bubble {
    background: #65C466;
}
.email-editor-properties-panel.column {
    position: absolute;
    z-index: 20;
    bottom: 0.5rem;
    right: 0.5rem;
    height: fit-content;
    resize: none;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--modal-background-color);
    border-radius: var(--block-border-2);
    box-shadow: var(--box-shadow-element);
}
.email-editor-panel-drag-handle {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0.2rem;
}
.email-editor-panel-drag-handle,
.email-editor-layer-tools.row {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
}
.email-editor-properties-panel input[type="color"] {
    border: none;
    padding: 0;
    height: 2rem;
    width: 2rem;
}
.email-setting-item {
    padding: 0.3rem 0.5rem;
    border: 1px solid #ccc;
    background: var(--element-background-color);
    border-radius: var(--block-border-2);
    justify-content: space-between;
}
.email-setting-item button {
    width: 2rem;
    height: 2rem;
    padding: 0;
}
.email-editor-layout-picker.row {
    position: absolute;
    z-index: 1;
    padding: 0.3rem;
    top: 0;
    left: 0;
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
    box-shadow: var(--box-shadow-element);
}

.email-editor-layout-picker .outlined-button-secondary.selected {
    color: #fff;
    background: var(--inactive-color);
}
.email-editor-text-toolbar {
    padding: 0.3rem;
    gap: 0.3rem;
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
    box-shadow: var(--box-shadow-element);
}
.email-editor-text-toolbar button {
    flex-shrink: 0;
    padding: 0.15rem;
    width: 2rem;
    height: 2rem;
}

.email-editor-text-toolbar input[type="color"] {
    border: none;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
}
.email-editor-layout-options.row {
    position: absolute;
    top: -0.3rem;
    left: 2.75rem;
    gap: 0.5rem;
    padding: 0.3rem;
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
    box-shadow: var(--box-shadow-element);
}
.email-image-library-grid button.email-image-library-upload-tile {
    background: transparent;
    border: 1px dashed #ccc;
}
.email-image-library-grid button.email-image-library-upload-tile:hover {
    background: var(--primary-color);
    color: #fff;
}
.email-image-library-grid {
    grid-template-columns: repeat(6,4rem);
    gap: 1rem;
}
.email-image-library-grid .email-image-library-delete {
    display: none;
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: -0.4rem;
    right: -0.4rem;
    font-size: 0.7rem;
    background: var(--cancel-color);
    color: #fff;
}
.email-list {
    background: var(--element-background-color);
    overflow: hidden;
    height: 100%;
}
.email-list-grid.header,
.email-row {
    grid-template-columns: 5rem 4rem 11rem 1fr 2.5rem 2rem 3.75rem;
}
.email-row {
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid #ccc;
}

.email-list-grid.header.grid {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #ccc;
}
.primary-icon.resize-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 1rem;
    height: 1rem;
    cursor: col-resize;
    z-index: 8;
    display: flex;
    color: grey;
    align-items: center;
    justify-content: center;
}
.email-editor-placeholder-menu .link-button {
    width: 100%;
    height: fit-content;
    white-space: nowrap;
    justify-content: left;
}

.email-editor-placeholder-menu.column {
    display: flex;
    position: absolute;
    left: 0px;
    top: calc(100% + 0.35rem);
    z-index: 60;
    align-items: start;
    background: var(--modal-background-color);
    border-radius: var(--block-border-2);
    padding: 0.35rem;
    box-shadow: var(--box-shadow-element);
    min-width: fit-content;
}
.email-template-tile {
    gap: 0.5rem;
    align-items: center;
    text-align: left;
    padding: 1rem;
    box-shadow: var(--box-shadow-border);
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
}
.email-campaign-preview-scale-shell {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
/***Donut chart***/
.campaign-donut-chart-track {
  fill: none;
  stroke: var(--campaign-donut-track);
  stroke-width: 18;
  stroke-linecap: round;
}
.campaign-donut-chart-slice {
  fill: none;
  stroke-width: 18;
  stroke-linecap: round;
}
.campaign-donut-chart-slice.delivered-ring {
  stroke: var(--campaign-donut-delivered);
}
.campaign-donut-chart-slice.failed-ring {
  stroke: var(--campaign-donut-failed);
}
.campaign-donut-chart-slice.pending-ring {
  stroke: var(--campaign-donut-pending);
}
.campaign-donut-chart-slice.unsubscribed-ring {
  stroke: var(--campaign-donut-unsubscribed);
}
.campaign-ring-legend-item.delivered-ring .campaign-ring-legend-dot {
  background: var(--campaign-donut-delivered);
}
.campaign-ring-legend-item.failed-ring .campaign-ring-legend-dot {
  background: var(--campaign-donut-failed);
}
.campaign-ring-legend-item.pending-ring .campaign-ring-legend-dot {
  background: var(--campaign-donut-pending);
}
.campaign-ring-legend-item.unsubscribed-ring .campaign-ring-legend-dot {
  background: var(--campaign-donut-unsubscribed);
}
/***Image crop***/
.cropper-crop-box.circle,
.cropper-view-box.circle,
.cropper-face.circle {
  border-radius: 50%;
}
/*** SMS preview***/
.campaign-preview {
    position:relative;
    padding: 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
    height: 100%;
}

.campaign-preview img {
    width: 100%;
    border-radius: 18px;
}

.campaign-preview textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 170px;
    overflow: hidden;
    border: none;
}
.qty-input,
.service-search-bar input,
.search-bar input,
.link-input-wrapper input,
textarea#sms-text,
.input-wrapper input,
.input-wrapper textarea,
input.time-selector-selected,
input.invisible-input,
textarea.invisible-input,
.campaign-preview textarea,
.email-editor-text-block {
    outline: none;
}
.campaign-preview-content p {
    margin: 0;
    text-indent: 0.5rem;
    font-size: 0.8rem;
}

.campaign-statistics.row {
    position: relative;
}
.campaign-preview::after,
.campaign-statistics.row::after {
    position: absolute;
    background: white;
    font-size: 0.7rem;
    padding: 3px;
    top: -0.6rem;
    left: 50%;
    transform: translate(-50%);
    color: var(--inactive-color);
}
.campaign-statistics.row::after {
    content: 'Campaign Statistics';
}
.campaign-preview::after{
    content: 'Editable Preview';    
}
.campaign-preview-content .modal-body {
    gap: 1rem;
    margin-bottom: 0;
}
.campaign-statistics {
    padding: 1rem;
    box-sizing: border-box;
}
/***Time selection***/
.delete-short-link {
    color: var(--inactive-color);
    border: 1px solid;
}
.delete-short-link:hover {
    background: var(--inactive-color)!important;
    color: white!important;
    border-color: var(--inactive-color);
}
.actions-row {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.short-link-display .row {
    justify-content: space-between;
    height: 20px;
}
.send-controls.column {
    gap: 1rem;
}
.send-controls.column button {
    width: 100%;
    white-space:nowrap;
    gap:0.5rem;
}
.short-link-display:hover button {
    display: flex;
    padding: 0;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: transparent;
    color: var(--primary-color);
}

.short-link-text {
    font-size: 0.8rem;
    height:20px;
}
.time-dropdown-item:hover {
    background: #f0f0f0;
}
.time-selection button {
    color: var(--inactive-color);
}
.time-selection button:hover {
    background: transparent;
    color: var(--primary-color);
}
#amPmToggle {
    width: 40px;
    color: var(--primary-color);
    padding: 5px;
    border: 1px solid #ccc;
    height: 100%;
    background: white;
}
input#campaignDatePicker {
    width: 100%;
    box-sizing: border-box;
}
.send-on.row {
    gap: 0.5rem;
    padding: 0.3rem;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background: var(--menu-bar-color);
}

.time-selection .row {
    gap: 0.2rem;
    justify-content: space-between;
}
.time-selection .column {
    width: 3rem;
    align-items: center;
}

.time-selection input {
    width: 100%;
    text-align: center;
}
span.currency-sign,
.provider-status,
.provider-top-row,
.modal-content.email-image-library-content,
.modal-content.role-change,
.gmail-compose-toolbar.gmail-inline-text-toolbar.email-editor-text-toolbar ,
.time-selection {
    width: fit-content;
}
/*** Campaigns section***/
.nonmobile-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #ccc;
}

.group-header {
    position:sticky;
    display: flex;
    justify-content: space-between;
    width:100%;
    position:sticky;
    padding: 0.5rem;
    background: var(--menu-bar-color);
    border-top: 1px solid;
    border-bottom: 1px solid;
    z-index:1;
    box-sizing: border-box;
}
.campaign-customer-item .undefined {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid;
}
.create-campaign-modal-content .scrollable-section {
    gap: 1rem;
}
.campaign-details .placeholder {
    color: var(--inactive-color);
    text-decoration: none;
}

.campaign-details .placeholder .primary-icon {
    cursor:auto;
}
.campaign-buttons {
    overflow-y: auto;
}

.campaign-btn .label-micro {
    position: absolute;
    top: 1px;
    right: 3px;
}
.campaign-btn .plus-span {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    height: 15px;
    width: 15px;
    flex-shrink:0;
    border: 1px solid;
    border-radius: 50%;
}
.create-campaign.campaign-btn {
    color: var(--primary-color);
}
.campaign-btn:hover .plus-span {
    background: white;
    color: var(--inactive-color);
}
.campaign-btn.active {
    background: var(--inactive-color);
    color: white;
}
.campaign-customer-item {
    display: grid;
    grid-template-columns: auto 1.5rem;
    align-items: center;
    padding: 0.3rem;
    border-bottom: 1px solid #ccc;
}
.sent .campaign-customer-item {
    grid-template-columns: 1fr auto;
}
.signature-preview-placeholder.row,
.campaign-customer-item.delivered {
    color: var(--inactive-color);
}

.campaign-customer-item.delivered .primary-icon.tooltip-hover {
    color: inherit;
}
.primary-icon.delivered.tooltip-hover {
    color: white!important;
}
.campaign-customer-item.delivered label {
    grid-template-columns: auto 8rem;
}
.campaign-customer-item label {
    display: grid;
    grid-template-columns: 1rem auto 1fr;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
    min-height: 1.5rem;
}

.sms-detail-panel p {
    font-size: small;
    text-indent: 1rem;
}
.sms-recipients {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0.5rem;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    box-sizing: border-box;
}
.sent .campaign-detail-card.sent-campaign-recipients.sms-recipients.column {
    padding: 0.5rem;
    min-height: 200px;
}
.sticky-row {
    justify-content: space-between;
    padding: 0.5rem 0;
    position: sticky;
    background: white;
    z-index: 1;
}

.sticky-row.top{
    top: 0;
    border-bottom: 1px solid #ccc;
}
.sticky-row.bottom{
    bottom: 0;
    border-top: 1px solid #ccc;    
}
.sticky-row label {
    white-space: nowrap;
} 

.sticky-row.bottom button {
    width: 100%;
}

.sticky-row .column {
    width:fit-content;
}
.email-template-block,
#total-campaign-cost {
    display: flex;
    flex-direction: column;
}
.outlined-button-secondary[data-email-cell-action="clear"],
.outlined-button-secondary[data-layer-action="delete"],
#deleteCampaignBtn {
    color: var(--cancel-color);
}
.outlined-button-secondary[data-email-cell-action="clear"]:hover,
.outlined-button-secondary[data-layer-action="delete"]:hover,
#deleteCampaignBtn:hover {
    background: var(--cancel-color);
    border-color: var(--cancel-color)!important;
    color: white;
}
.campaign-customer-item.delivered:hover .delete-contact-btn,
.delete-contact-btn {
    display:none;
}    
.campaign-customer-item:hover .delete-contact-btn {
    display: flex;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--inactive-color);
    border: 1px solid;
}
.campaign-customer-item:hover .delete-contact-btn:hover {
    background: var(--cancel-color);
    color: white;
    border: 1px solid var(--cancel-color);
}

textarea#sms-text {
    font-size: 1rem;
    height: 6rem;
    border: none;
    padding: 0;
    font-weight: 400;
}
.opt-out-required,
.sms-count-section,
.sms-business-name-section,
.business-name-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.sms-count-section {
    font-size: 0.7rem;
    justify-content: space-between;
    margin-bottom: 0.2rem;
}
.outlined-button-secondary[data-email-cell-action="clear"] {
    position: absolute;
    bottom: 0.2rem;
    right: 0.2rem;
}
.sms-count, .char-count {
    padding: 0.2rem;
}
.sms-config .input-wrapper:focus-within {
    width: 100%;
}
.input-wrapper-optout button,
.confirm-business-name-btn {
    padding: 0;
    background: transparent;
}
.label-small.business-name-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}


.sms-config .input-wrapper-actions button {
    padding: 0.1rem;
    height: 2rem;
    width: 2rem;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--inactive-color);
}
.sms-config .input-wrapper-actions button:hover {
    color: var(--primary-color);
}
#suggestCampaignText .loading-spinner{
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: var(--primary-color);
}
.sms-config .input-wrapper-actions button .primary-icon.icon20 {
    color: var(--primary-color);
}
.input-wrapper-actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    justify-content: end;
}
#fullLinkInput,
#customLinkInput {
    font-size: 0.7rem;
}
.sms-wrapper {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.link-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: var(--block-border);
    width: 100%;
    padding-right:5px;
    height: 30px;
}

.link-input-wrapper input {
    border: none;
    width: 100%;
}

.link-input-wrapper button {
    color: var(--primary-color);
    padding: 0;
    background: transparent;
    font-size: 1.5rem;
}

.input-wrapper-actions button .primary-icon.tooltip-hover{
    background: transparent;
    border: none;
}
.input-wrapper-optout {
    display: flex;
    align-items:center
}
.opt-out-required,
.business-name-label {
    display: flex;
    width: 100%;
    border: none;
    background: none;
    justify-content: start;
    color: var(--primary-color);
    font-size: 1rem;
}

.subscription-status {
    display: grid;
    grid-template-columns: auto 20px 20px;
    align-items: center;
    gap: 3px;
}
.primary-icon.tooltip-hover {
    background: transparent;
    color: var(--primary-color);
    border: none;
}
.primary-icon.unsubscribed.tooltip-hover {
    color: var(--cancel-color);
}
.campaign-customer-item:has(input:disabled) .label-medium,
.campaign-customer-item:has(input:disabled) .column {
    opacity:0.7;
}
.campaign-customer-item:has(input:disabled) .delete-contact-btn {
    display:none;
}
span#shortDomain {
    padding: 0.3rem;
    font-size: 0.7rem;
    border: 1px solid #ccc;
    background: var(--background-color);
    border-radius: var(
    --block-border);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.link-input-wrapper.short-link {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.short-link.row {
    gap: 0;
}
/***Ad analysis***/
.ads-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ads-stats-placeholder {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.campaign-stat.row {
    padding: 0.5rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: var(--block-border);
}
#analyze-selected-btn {
    width: fit-content;
    align-self: end;
    gap: 1rem;
}
/***Gallert and Crop image***/
.email-image-library-content .modal-body {
    margin: 0;
    padding: 0 1rem 1rem;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    background: var(--element-background-color);
}
.cropper-container.transparent-preview {
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d1d5db 75%),
        linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.email-image-library-select,
.email-image-upload-name-modal .modal-body img {
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #d1d5db 75%),
        linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.signature-preview-tabs button.outlined-button-secondary,
.image-library-tabs button.outlined-button-secondary {
    font-size: 0.8rem;
    border-top: none!important;
    color: #ccc;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 0.2rem 0.5rem;
}
.signature-preview-tabs button.outlined-button-secondary.selected,
.image-library-tabs button.outlined-button-secondary.selected {
    color: var(--inactive-color);
    color:#fff;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 0.2rem 0.5rem;
}
.sms-wrapper .preview-uploaded-image:hover .circle-delete-btn {
    display: flex;
    top:0.3rem;
    right:0.3rem;
}
.preview-uploaded-image {
    display: flex;
    width: 100%;
    position: relative;
}
.sms-wrapper .preview-uploaded-image {
    margin-bottom: 0.5rem;
}
.modal-content.cropped-modal-content.sms-campaign {
    padding: 10px;
    height: fit-content;
    min-height: fit-content;
    width: fit-content;
    max-width: 500px;
    max-height: 500px;
}

.modal-content.cropped-modal-content.sms-campaign .modal-body {
    margin: 0;
    position: relative;
}
.sms-campaign .crop-actions{
    position:absolute;
    bottom:10px;
    width:100%;
    padding:10px;
    box-sizing:border-box;
}
.sms-campaign .crop-info,
.sms-campaign .crop-actions button{
    color: white;
}
.sms-campaign .crop-actions button:hover{
    color: white;
    background:var(--primary-color);
}
.modal-content.cropped-modal-content.sms-campaign .cropper-crop-box,
.modal-content.cropped-modal-content.sms-campaign .cropper-view-box,
.modal-content.cropped-modal-content.sms-campaign .cropper-face {
    border-radius:0;
}
    /***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;
    }
    .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 {
        min-height: 4rem;
    }
    .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;
        font-size: 0.8rem;
        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;
    }
    label.row.label-small.signature-social-link-row {
        display: grid;
        grid-template-columns: 1rem 2rem 7rem 1fr;
    }
    img.signature-imessage-preview-img {
        height: 50px;
    }
    /***Integrations***/
    .integration-group.integration-group-email.expanded,
    .business-setting-item.expanded {
        order: -1;
        grid-column: 1/-1;
    }
    .integration-button {
        padding: 0.2rem 1rem;
    }
    .integration-group {
        padding: 0.5rem;
        box-shadow: var(--box-shadow-border);
        border-radius: var(--block-border-2);
        box-sizing: border-box;
    }
    .integrations-expanded {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    .integration-card {
        display: flex;
        flex-direction: row;
        align-items: center;
        box-shadow: var(--box-shadow-border);
        padding: 1rem;
        border-radius: var(--block-border-2);
        gap: 2rem;
        justify-content: space-between;
        box-sizing: border-box;
    }
    .integration-card:hover {
        background-color: var(--menu-bar-color);
    }
    .integration-icon {
        height: 30px;
        align-self: center;
    }
    code.general-email-code {
        font-size: 0.7rem;
        white-space: pre-wrap;
        word-break:break-all;
        min-width:0;
        flex:1;
    }
    .general-email-wizard-dots {
        display: flex;
        gap: .5rem;
        justify-content: center;
        margin-top: 0.5rem;
    }
    .general-email-wizard-dot {
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        background: #ccc;
        display: block;
    }
    .general-email-wizard-dot.active {
        background: var(--yt-primary-color, #00478D);
    }
/***Emails***/
.email-header {
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    padding: 0.5rem;
}
.email-body {
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    background: var(--element-background);
    padding: 1rem;
    height: 100%;
    overflow-y:auto;
    box-sizing: border-box;
}
.email-actions{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#replyEmailBtn {
    max-width: 120px;
    width: 100%;
}
label.show-unread {
    display: grid;
    grid-template-columns: auto 1rem;
    align-items: center;
    gap: 0.5rem;
}
.email-controls button {
    padding: 0 0.5rem;
    display: grid;
    gap: 0.5rem;
}
.email-controls button:hover {
    border: none;
}
.email-compose-reply {
    position: relative;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: var(--block-border-2);
    background: #fff;
    box-sizing: border-box;
    overflow:hidden;
}
.gmail-email-editor.email-editor-text-block {
    box-sizing: border-box;
    height: fit-content;
}
.gmail-inline-text-toolbar .email-editor-text-toolbar.column {
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%!important;
}
.tag-container {
    display: inline-flex;
    width: 100%;
    border: 1px solid #ccc;
    background: var(--element-background-color);
    border-radius: var(--block-border-2);
    padding: 0.2rem;
    gap: 0.2rem;
    box-sizing: border-box;
}
.delete-template {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
    width: 1rem;
    font-size: 0.7rem;
    line-height: 1;
    border:1px solid transparent;
    border-radius:50%;
}
.delete-template:hover {
    border-color: white;
}
.compose-email-content input[type="text"],
.reply-email-content input[type="text"],
.reply-email-content textarea{
    width: 100%;
    outline:none;
    box-sizing: border-box;
}
.compose-email-content.column {
    gap: 0.5rem;
}
input.email-subject,
.tag-container input[type="text"]{
    outline: none;
    width: 100%;
}
.tag-container input[type="text"]{
    border: none !important;
}

.saved-phrases-container{
    margin: 0.3rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
}
.phrase-display {
    display: inline-flex;
    align-items: start;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    font-size: 0.6rem;
}
.phrases-wrapper {
    display: flex;
    overflow-x: auto;
    flex-grow: 1;
    width: 100%;
    padding: 0.3rem;
    gap: 0.5rem;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
.phrases-wrapper button {
    display: flex;
    flex-direction: column;
    text-overflow: ellipsis;
    text-align: left;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    max-width: 200px;
    white-space: wrap;
    overflow: hidden;
    height: 3.5rem;
    padding: 0.3rem;
    color: var(--primary-color);
    background-color: white;
    border: 1px solid;
    margin: 0;
    box-sizing: border-box;
    border-radius: var(--block-border-2);
    box-shadow: var(--box-shadow);
}
.phrases-wrapper button:hover{
    color: white;
    background-color: var(--primary-color);
}
.gmail-customer-autocomplete.option-picker.column {
    gap: 0px;
    padding: 0.25rem;
    max-height: 18rem;
    overflow-y: auto;
    position: absolute;
    z-index: 2147483600;
    background: var(--element-background-color);
    box-shadow: var(--box-shadow-element);
    border-radius: var(--block-border-2);
}
.gmail-original-message p {
    text-wrap: auto;
    max-width: 700px;
}
.gmail-email-direction-tabs .outlined-button-secondary {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}
.email-compose-body-actions {
    background: transparent;
    padding-bottom: 0.3rem;
}
.gmail-modal.gmail-compose-reply-modal {
    transition: background-color .24s ease, backdrop-filter .24s ease;
}
.gmail-modal.gmail-compose-reply-modal .email-actions-content {
    transform-origin: bottom center;
    transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease, width .28s ease, height .28s ease, border-radius .28s ease, box-shadow .28s ease;
}
.gmail-modal.gmail-compose-reply-modal .gmail-compose-window-actions {
    margin-left:auto;
    align-items:center;
    justify-content:flex-end;
    gap:.35rem;
}
.gmail-modal.gmail-compose-reply-modal .gmail-compose-window-title {
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.gmail-modal.gmail-compose-reply-minimizing .email-actions-content {
    transform: translateY(18px) scale(.96);
    opacity:.88;
}
.gmail-modal.gmail-compose-reply-minimized {
    background:transparent !important;
    backdrop-filter:none !important;
    pointer-events:none;
}
.gmail-modal.gmail-compose-reply-minimized .email-actions-content {
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    bottom:1rem !important;
    top:auto !important;
    width:min(23rem, calc(100vw - 2rem)) !important;
    height:4.35rem !important;
    min-height:0 !important;
    max-height:4.35rem !important;
    overflow:hidden !important;
    transform:translateX(-50%) scale(1) !important;
    border-radius:1.1rem !important;
    box-shadow:0 18px 48px rgba(0,0,0,.22) !important;
    pointer-events:auto;
    cursor:pointer;
    animation:gmailComposeDockIn .28s cubic-bezier(.2,.9,.2,1);
}
.gmail-modal.gmail-compose-reply-minimized .modal-body {
    display:none !important;
}
.gmail-modal.gmail-compose-reply-minimized .gmail-modal-header-icon-only {
    align-items:center !important;
    gap:.75rem !important;
    border-bottom:0 !important;
}
.gmail-modal.gmail-compose-reply-minimized .integration-icon {
    width:2rem !important;
    height:2rem !important;
    flex:0 0 auto;
}
.gmail-modal.gmail-compose-reply-minimized .gmail-compose-window-title {
    display:block !important;
    font-weight:600;
}
.gmail-modal.gmail-compose-reply-minimized .gmail-compose-window-actions,
.gmail-modal.gmail-compose-reply-minimized .close-modal-btn,
.gmail-modal.gmail-compose-reply-minimized [data-email-compose-minimize] {
    display:none !important;
}
.gmail-compose-minimize-btn {
    font-size: 1rem;
    border-radius: 50%;
    color: #111111;
    border-color: transparent;
    background: transparent;
    padding: 0;
    font-weight: 600;
}
.gmail-compose-minimize-btn:hover {
    color: #fff;
    background: var(--inactive-color);
    padding: 0;
}
@keyframes gmailComposeDockIn {
    0% { transform:translateX(-50%) translateY(18px) scale(.88); opacity:.35; }
    100% { transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
}

/***Notificaions***/
.bn-layout {
    display: grid;
    grid-template-columns: 20rem 1fr;
    gap: 1rem;
}
.bn-main,
.bn-sidebar-section.column {
    padding: 1rem;
    border-radius: var(--block-border-2);
    box-shadow: var(--box-shadow-border);
}
.bn-main {
    height: fit-content;
}
.bn-group-title {
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0.5rem;
    border-top: 1px solid #ccc;
    border-radius: 0;
    min-height: 3rem;
}
.bn-group-title.is-active {
    color: var(--primary-color);
    border-radius: 0;
}
.bn-group-title:hover {
    background: #f3f3f3;
}
.bn-nav-list {
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;
    display: flex;
    gap: 0.5rem;
}
.other-languages {
    background: transparent;
    padding: 0;
    align-self: end;
}
.zone-item,
.other-languages,
.outlined-button-secondary[data-upload-campaign-contacts-btn] {
    display: grid;
    grid-template-columns: 1.5rem auto;
}
.bn-sidebar-section.column,
.bn-main {
    margin: 0.3rem;
}
.bn-sidebar,
.bn-main {
    height: 800px;
    overflow-y: auto;
    background: var(--modal-background-color);
}
button.bn-nav-item {
    color: var(--inactive-color);
    background: transparent;
    border: 1px solid;
    padding: 0.1rem 0.4rem;
}
button.bn-nav-item.is-active {
    color: var(--primary-color);
}
textarea.bn-textarea {
    width: 100%;
    height: 150px;
}
span.bn-detail-title {
    background: #f3f3f3;
    padding: 0.2rem 0.5rem;
    border-radius: var(--block-border-2);
}
.imessage-preview {
    width: 100%;
}
.imessage-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.imessage-row {
    display: flex;
    width: 100%;
}
.imessage-row-outgoing {
    justify-content: flex-end;
}
.imessage-bubble-shell {
    position: relative;
    display: inline-flex;
    max-width: min(78%, 420px);
}
.conversation-item.webchat-job-details-item {
    max-width: 100%;
    gap: 0.5rem;
}
.email-campaign-preview-scale-shell,
.webchat-job-details-card.column {
    padding: 0.3rem;
    border-radius: var(--block-border-2);
    box-shadow: var(--box-shadow-border);
}

.imessage-bubble {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    padding: 10px 14px;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: visible;
}
.imessage-bubble-outgoing {
    background: #2FCC59;
    color: #fff;
}
.imessage-bubble-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.42;
    font-weight: 300;
}
.imessage-bubble-tail {
    position: absolute;
    right: -7px;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: no-repeat center / contain;
}
.imessage-bubble-tail-outgoing::before,
.imessage-bubble-tail-outgoing::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
}

.imessage-bubble-tail-outgoing::before {
    width: 18px;
    height: 18px;
    background: #2FCC59;
    border-bottom-left-radius: 16px;
    transform: translate(2px, 0);
}

.imessage-bubble-tail-outgoing::after {
    width: 9px;
    height: 18px;
    background: #f3f3f3;
    border-bottom-left-radius: 12px;
    right: -2px;
}

.other-languages:hover .other-languages-span {
    text-decoration: underline
}

.bn-variant-block img {
    width: 1rem;
}

.bn-variant-block .input-wrapper {
    padding: 0.5rem;
}
.input-wrapper textarea {
    border: none;
}
/***Floatin message***/
.floating-notification-layer {
    overflow-y: auto;
    padding: 0.95rem 0.4rem 0.8rem 1rem;
    position: fixed;
    top: 3rem;
    right: 1rem;
    max-height: calc(100vh - 6.25rem);
    width: min(390px, calc(100vw - 2rem));
    z-index: 9998;
    display: none;
    gap: .5rem;
    pointer-events: none;
}
.floating-card-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 12px;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    opacity: 1;
    transition: transform .2s ease, opacity .2s ease, max-height .2s ease, margin .2s ease, padding .2s ease;
}
.floating-card-wrapper > .floating-card {
    position: relative;
    z-index: 3;
    width: 100%;
}
.floating-card {
    pointer-events: auto;
    width: 100%;
    height: fit-content;
    background: var(--modal-background-color);
    color: inherit;
    border-radius: var(--block-border-2);
    box-shadow: var(--box-shadow-element);
    border: 1px solid rgba(0,0,0,.08);
    transform: translateX(0);
    transition: transform .2s ease, opacity .2s ease, max-height .2s ease;
}
.floating-card-collapsed-layer,
.floating-card-collapsed-layer-2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 12px;
    border-radius: var(--block-border-2);
    background: var(--modal-background-color);
    box-shadow: var(--box-shadow-border);
    pointer-events: none;
}

.floating-card-collapsed-layer {
    width: 80%;
    bottom: 0;
    z-index: 1;
}

.floating-card-collapsed-layer-2 {
    width: 90%;
    bottom: 6px;
    z-index: 2;
}
.floating-card .message-content {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .9rem;
}
.floating-card .message-icon {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.floating-card .message-text {
    min-width: 0;
    width: 100%;
}
.floating-card-stack-collapsed {
    position: relative;
}
.floating-card-stack-collapsed::before,
.floating-card-stack-collapsed::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    height: 12px;
    border-radius: 14px;
    background: var(--modal-background-color);
    box-shadow: var(--box-shadow-border);
    z-index: -1;
}
.floating-card-stack-collapsed::before { bottom: -6px; }
.floating-card-stack-collapsed::after { bottom: -12px; left: 18px; right: 18px; }
.floating-invoice-item {
    box-shadow: var(--box-shadow-border);
    border-radius: var(--block-border-2);
    padding: 0.5rem;
    background: var(--element-background-color);
}
.floating-invoice-details {
    display: none;
    border-top: 1px solid rgba(0,0,0,.08);
    padding-top: .5rem;
    margin-top: .25rem;
}
.floating-invoice-item.expanded .floating-invoice-details {
    display: flex;
}
.notif-action-btn.floating-card-hide {
    top: -1rem;
    left: -1rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #ccc;
    color: #ccc;
    background: var(--element-background-color);
}
.notif-action-btn.floating-card-hide:hover {
    border-color: #ccc;
    color: var(--element-background-color);
    background: #ccc;
}
.email-template-preview-brand-part.secondary {
    filter: saturate(0.1);
    opacity: 0.6;
}
/***Mobile***/
    #infoSection {
        margin: 0.5rem 0.5rem 0 0.5rem;
        border-radius: var(--block-border-2);
        box-shadow: var(--box-shadow-border);
    }
/***Skeleton***/
@keyframes ytSkeletonShimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.yt-customer-skeleton {
    pointer-events: none;
    user-select: none;
}

.yt-skeleton-block,
.yt-skeleton-line,
.yt-skeleton-circle {
    background: linear-gradient(90deg,
rgba(0, 0, 0, 0.06) 0%,
rgba(0, 0, 0, 0.12) 50%,
rgba(0, 0, 0, 0.06) 100%);
    background-size: 200% 100%;
    animation: ytSkeletonShimmer 1.15s ease-in-out infinite;
}
.email-template-preview-skeleton-line {
    height: 0.9rem
}
.email-template-preview-skeleton-button,
.email-template-preview-skeleton-line {
    display: flex;
    flex-shrink: 0;
    border-radius: 6px;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.06) 0%,
        rgba(0, 0, 0, 0.12) 50%,
        rgba(0, 0, 0, 0.06) 100%);
    background-size: 200% 100%;
    animation: ytSkeletonShimmer 1.15s ease-in-out infinite;
}
.email-template-preview-skeleton-line.title {
    height: 1rem;
    width: 20%;
}

.email-template-preview-skeleton-line.short {
    width: 50%;
}

.email-template-preview-skeleton-button {
    width: 20%;
    height: 1.5rem;
}
.yt-skeleton-line {
    height: .75rem;
    border-radius: 999px;
}

.yt-skeleton-circle {
    border-radius: 50%;
    flex: 0 0 auto;
}

.yt-skeleton-job .calendar-date {
    align-items: center;
    justify-content: center;
    gap: .25rem;
    border: none;
    background: linear-gradient(90deg,
rgba(0, 0, 0, 0.06) 0%,
rgba(0, 0, 0, 0.12) 50%,
rgba(0, 0, 0, 0.06) 100%);
    background-size: 200% 100%;
    animation: ytSkeletonShimmer 1.15s ease-in-out infinite;
}

.yt-skeleton-job .yt-skeleton-time {
    width: 3rem;
    justify-self: center;
}

.yt-skeleton-job .yt-skeleton-grid {
    width: 100%;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .75rem;
}

.yt-skeleton-simple {
    min-height: 3.15rem;
    align-items: center;
    gap: .75rem;
}

.yt-skeleton-provider {
    min-height: 3.15rem;
    align-items: center;
    gap: .6rem;
}
.yt-skeleton-line.yt-skeleton-job-id {
    width: 4.2rem;
}

.yt-skeleton-line.yt-skeleton-job-service {
    width: 7rem;
    height: 1rem;
}

.column.yt-skeleton-job-details {
    gap: 0.3rem;
}

.contact-item.preferred-provider.row.yt-customer-skeleton.yt-skeleton-provider {
    grid-template-columns: 1.5rem auto 5rem;
}

.yt-skeleton-line.label-medium.yt-skeleton-provider-name {
    width: 7rem;
}

.yt-skeleton-line.yt-skeleton-simple-main {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--block-border-2);
}

.yt-skeleton-line.yt-skeleton-simple-secondary {
    width: 12rem;
}

@media (min-width:769px){
    .salary-provider-mobile-status-row,
    .row.customer-actions,
    .mobile-view {
        display: none!important;
    }
    .salary-report-filter-row.grid {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    
    .salary-report-action-row.grid {
        grid-template-columns: 1fr 2rem;
        align-items: center;
        width: 100%;
    }
    .paystubs-grid-row,
    .paystubs-grid-header {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1rem;
    }
    .provider-availabitity-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }  
    .yt-timepicker-list.column {
        max-height: 30vh;
    }
}
@media (max-width:768px){
    .page {
        margin: 0;
        overflow-x: hidden;
    }
    .page.salary,
    .page.expenses {
        padding: 0;
        background: transparent;
    }
    .page.team {
        overflow-y: auto;
    }
    .page.team,
    .page.salary,
    .page.recurring-jobs,
    .page.customers,
    .page.mobile-overview {
        background: transparent;
        box-shadow: none;
    }
    .page-header {
        margin-top: 0.3rem;
        font-size: 0.7rem;
    }

    .multi-integration-launcher {
        bottom: 4rem;
        right: 0.5rem;
        width: 3rem;
        height: 3rem;
    }
    .grid.mobile-view {
        display: grid!important;
    }
    .delete-mod,
    #changeStatusMobile,
    .notif-action-btn.floating-card-hide,
    .link-button.preferred-provider-delete,
    .coupon-remove.outlined-button-secondary,
    .row.customer-actions,
    .mobile-view {
        display: flex!important;
    }
    .reschedule .column.mobile-font,
    .week-view .booking-action-buttons,
    .desktop-view{
       display:none!important; 
    }
    body {
        padding: 0rem;
    }
    #menu-holder {
        position: fixed;
        bottom: 0;
        width: 100%;
        z-index: 1;
    }
    #content,
    .main-container {
        width: 100%;
        height: calc(100% - 4.9rem);
        margin: 0;
    }
    .picker-body.column,
    #language-modal .modal-content .column {
        flex: 1;
    }
    .expenses-merchant-menu .picker-body.column {
        max-height: 80%;
    }
    .menu-bar-container {
        position:fixed;
        bottom:0;
        height: fit-content;
        width: 100%;
        display: flex;
        flex-direction: row;
        padding: 0.2rem 1rem 0.5rem 1rem;
        gap: 1rem;
        border-radius: 0;
        margin: 0;
        overflow-x: auto;
    }
    .reviews-modal {
        width:100%;
        height: 100%;
        max-height: 100%;
        background: #fcfcfc70;
    }
    .user-profile.row {
        align-items: center;
    }
    .recurring-ends-toolbar.row {
        align-items: start!important;
    }
    .calendar-navigation,
    .calendar-actions-top,
    .user-profile.row,
    .recurring-ends-toolbar.row,
    .eta-results-container {
        flex-direction: column;
    }
    #showToday,
    .calendar-period,
    .job-start-time,
    .address-row .label-medium,
    .booked-job-item-body span,
    .contact-item.job-item .grid .label-medium {
        white-space: nowrap;
    }
    .picker-list.column,
    .calendar-actions-top {
        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;
    }
    button,
    .calendar-date-selection,
    .outlined-button-secondary.active {
        border-radius: var(--block-border-2);
    }
    #infoSection .mo-provider-status-action {
        padding: 0.2rem 1rem;
        white-space: nowrap;
    }
    #infoSection .job-status-pill {
        position: initial;
        font-size:1rem;
        width: 100%;
        border-radius: var(--block-border-2);
    }
    #infoSection .job-status-pill.in-progress {
        grid-template-columns: 1fr auto;
    }
    .calendar-section-body {
        padding-top: 0.3rem;
    }
    .calendar-section {
        border-radius: 0;
    }
    .calendar-navigation {
        gap: 0;
        padding: 0;
        align-items: start;
    }
    .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);
    }
    .modal-footer {
        padding-top: 0.2rem;
    }
    .column.job-main-text {
        padding-left: 1.5rem;
    }
    .upcoming-job-item,
    .column.job-main-text,
    label.upcoming-job-item {
        gap: 0.3rem;
    }
    .job-section.upcoming-schedule .upcoming-job-item,
    .upcoming-job-item {
        grid-template-columns: 2rem 5rem auto auto;
    }
    .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;
    }
    .invoice-body-collapsible .invoice-summary {
    	width: 60%;
    }
    .job-index-circle {
        border: 1px solid;
        width: 1rem;
        text-align: center;
        border-radius: var(--block-border);
    }
    .job-inputs.row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .column.job-inline-total {
        grid-column: 1 / -1;
    }
    .salary-report-filter-row.grid {
        grid-template-columns: 1fr auto;
        width: 100%;
    }
    .row.salary-report-row {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 1rem .5rem;
    }
    
    .salary-report-action-row.grid {
        grid-template-columns: 1fr 2rem;
        align-items: center;
        width: 100%;
    }
    .job-summary-row .qty-wrapper.team-size {
        width: auto!important;
    }
    .duration-input.custom-service .invisible-input,
    .duration-input  .duration-input-span {
        padding: 0.4rem 0;
        width: 100%;
    }
    .salary-mobile-enabled .salary-mobile-detail .duration-input-span {
        padding: 0 0.2rem;
        font-size: 0.8rem;
    }
    .salary-mobile-enabled .duration-input-span {
        padding: 0.4rem 0;
    }
    .create-job.modal-content .modal-body {
        margin-bottom: 0!important;
    }
    .booked-job-item.mobile-overview-item .provider-image-section {
        display: flex;
        justify-content: end;
        width: 100%;
        height: fit-content;
        gap: .5rem
    }
    .booked-job-item.mobile-overview-item .provider-image-section .provider-img.provider {
        margin: 0;
    }
        .form-input-class{
        padding:0;
        margin: 0;
    }.form-input-class{
        padding:0;
        margin: 0;
    }
    #showToday {
        padding: 0.5rem 1rem;
    }

    .reviews-modal .provider-reviews-list.column,
    .reviews-modal-header {
        padding: 1rem;
    }
    .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;
    }

    .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;
    } 
    .menu-bar-container .menu-item.has-sub-menu.active .row.active,
    .menu-bar-container .menu-item.active {
        border-radius: 50%;
    }
    .share-menu {
        padding: 0.5rem 0.5rem 3rem;
    }
    .share-btn {
        gap: 1.5rem;
        padding: 1rem;
        font-size: 1.2rem;
    }
    .label-medium.header-price {
        font-size: 1.1rem;
        margin: 0;
    }
    .option-picker {
        max-height: 80%;
        width: 100%;
    }
    .picker-frame.column {
        position: fixed;
        max-width: 100%;
        width: 100%;
        max-height: 80%;
        gap: 2rem;
        padding: 1rem;
        padding-bottom: 4rem;
        bottom: 0;
        box-sizing: border-box;
        z-index:1000;
    }
    .picker-frame.column.schedule {
        overflow: hidden;
    }
    .picker-footer.row {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .picker-footer.row button {
        height: 4rem;
        border-radius: 0;
    }
    .yt-timepicker-list.column {
        height: calc(80vh - 5rem);
        padding-bottom: 2rem;
    }
    .qty-wrapper.bucket-team-size .qty-input {
        width: 3rem;
    }
    .qty-input, input.invisible-input {
        width: 5rem;
    }
    .qty-wrapper.bucket-team-size,
    .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;
    }
    span.dur-input {
        padding: 0 0.5rem;
    }
    .input.modal-content .duration-input .invisible-input {
        width: 4rem;
        font-size: 1.5rem;
    }
    .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: var(--modal-background-color);
        padding: 1rem;
        box-sizing:border-box;
    }
    .create-job.modal-content {
        padding: 0.5rem;
    }
    .modal-content.lightbox-modal-content {
        height:fit-content!important;
        padding: 0;
    }
    .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;
    }
    .picker-item.row.salary-team-picker-row {
        height: 2.5rem;
    }
    button {
        border: none;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
    .job-customer-item .customer-info {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
    }
    .pie-block.grid {
        justify-items: center;
    }
    .contact-item.payment-method {
        grid-template-columns: 2rem auto auto 2rem;
    }
    .available-resources-modal .resource-item {
        grid-template-columns: 1rem 2rem auto;
    }
    .selected-provider-list {
        grid-template-columns: repeat(2,1fr);
    } 
    .picker-item.expense-row.expense-row-grid {
        grid-template-columns: 5rem auto 6rem 1.2rem;
    }
    .service-mix-grid,
    .pie-block.grid,
    .special-day-row.grid,
    .map-section.grid,
    .recurring.grid,
    .bucket-header .grid,
    .provider-special-availability,
    .personal-availability-section {
        grid-template-columns: 1fr;
    }
    .card-user-info .row {
        flex-direction: column;
        align-items: start;
        gap: 0.5rem
    }
    .manage-user-buttons button {
        width: 100%;
    }
    label.upcoming-job-item .grid,
    .upcoming-job-item .grid {
        grid-template-columns: auto 8rem;
    }
    label.day-off.row,
    .zone-list.column {
        height: 100%;
    }
    #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;
    }
    .invoice-print-wrapper .label-micro,
    .invoice-print-wrapper .transaction-amount,
    .invoice-print-wrapper,
    .page-preview .label-small {
        font-size: 0.3rem;
    }
    .invoice-print-wrapper .invoice-service-header,
    .invoice-print-wrapper .transaction-summary-row,
    .page-preview .label-medium,
    .page-preview .business-info {
        font-size: 0.35rem
    }
    .calendar-section-header {
        font-size: 0.4rem;
    }
    .paystubs-grid div,
    .booked-job-item-body,
    .contact-item.discount .label-micro,
    .booked-job-item-body {
        font-size: 0.5rem;
    }
    .upcoming-job-item .column.mobile-font .label-medium {
        font-size: 0.6rem!important;
    }
    .job-duration,
    .column.name .label-medium,
    .label-medium.price,
    .contact-item.discount .label-medium,
    .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;
    }
    .eta-option .label-micro {
        font-size: 0.8rem;
    }
    .picker-body.column .label-small.provider {
        font-size: 0.8rem;
        font-weight: 300;
    }
    #dispAltName,
    .available-resources-modal .resource-item .label-medium,
    .booked-job-section.job-customer-section .customer-name,
    .manager-item .label-large,
    .get-direction-btn,
    .picker-body.column .label-medium,
    .picker-body.column .label-small {
        font-size: 1rem;
    }
    .column.user-field,
    .job-header-row.mobile-view .label-medium,
    .label-medium.picker-title,
    .duration-input {
        font-size: 1.2rem;
    }
    #bookedJobCustomerNameMobile {
        font-size: 1.5rem;
    }    
    .job-customer-item.column .customer-info .customer-contacts {
        gap: 1rem;
        font-size: 1rem;
        padding-top: 1rem;
    }
    .provider-actions {
        justify-content: end;
        width: 100%;
    }
    #dispAddress,
    #dispEmail {
        max-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;
    }
    .job-provider-item .remove-provider-btn {
        border: 2px solid;
        font-size: 1.2rem;
    }
    .booked-job-section .placeholder {
        font-size: 1rem;
    }
    .address-row .label-medium,
    .contact-item.job-item .grid .label-medium,
    .booked-job-item-body span,
    .paystubs-grid-cell {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .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-assignment-section {
        grid-template-columns: 1fr;
    }
    .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.8rem 3rem auto 4rem 4rem;
    }
    .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;
    }
    .booked-job.job-map-section {
        min-height: 220px;
        height: 220px;
    }
    .new-customers-navigation.row,
    .booked-job-item-header {
        flex-direction: column;
        align-items: start;
    }
    .job-start-time {
        font-size: 0.8em;
    }
    .provider-image{
        margin-right: -10px;
    }
    .job-header-row.mobile-view{
        justify-content:space-between;
        padding-left: 1em;
    }
    .job-main-info-section .column .row {
        flex-direction: column;
        align-items: start;
        height: fit-content;
    }
    .provider-avatar-wrapper .provider-unavailable,
    button.edit-service-address {
        padding: 0;
    }
    .next-week,
    .previous-week,
    .job-main-info-section button {
        background: transparent;
    }
    .value-modal .input-wrapper input,
    .value-modal .input-wrapper {
        border: none;
        font-size: 3rem!important;
        width: 15rem;
    }
    .address-row {
        display: flex;
        align-items: center;
        height: fit-content;
        width: 100%;
    }
    .address-row .label-medium {
        font-size: 1.1rem!important;
    }
    .booked-job-section {
        padding: 1em;
        background: var(--element-background-color);
    }
    .invoice-summary,
    .invoice-service-list {
        font-size:1.3rem;
        gap: 1rem!important; 
    }
    .send-invoice-btn,
    .print-invoice-btn {
        width: 2.2rem!important;
    }
    .invoice-button-bar.row,
    .invoice-sub-item,
    .earning-provider-item,
    .invoice-service-item,
    .invoice-container {
        gap: 1rem!important;
    }
    .job-provider-item {
        grid-template-columns: 2rem auto 7.5rem 7rem;
        height: 3rem;
        gap: 0.5rem;
    }

    .earning-provider-item .provider-item {
        grid-template-columns: 3rem auto 4rem;
        gap: 1em;
    }
    .job-time-btn.column {
        width: 4.5rem;
    }
    img.provider-avatar {
        width: 1.3rem;
        height: 1.3rem;
    }
    .assigned-probider-btn,
    .primary-icon.search-icon,
    #changeStatusMobile .primary-icon,
    .primary-icon.calendar-view.icon20,
    .booked-job-section .placeholder .primary-icon.icon20,
     #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;
    }
    .floating-menu-item img,
    .outlined-button-secondary[data-email-preview-device] .primary-icon,
    .modal-body.attached-to-providers .primary-icon.provider-avatar,
    .modal-body.attached-to-providers .provider-item img {
        height: 2rem;
        width: 2rem;
    }
    /*.job-provider-item img,*/
    .provider-item img{
        height: 3rem;
        width: 3rem;
    }    
    .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;
    }
    .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:80%;
        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;
    }
    .universal-floating-menu.mobile-menu.open,
    .upcoming-job-item .column.mobile-font .label-medium {
        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;
    }
    .salary-report-table.salary-mobile-enabled {
        display: block;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .row.salary-provider-header.salary-report-provider-header .label-medium {
        font-size: 0.7rem!important;
    }
    .row.salary-provider-header.salary-report-provider-header .label-small {
        font-size: 0.5rem!important;
    }
    .paystub-status.partially-paid {
        font-size: 0.6rem;
        padding: 0.1rem 0.3rem;
        text-align: center;
    }
    .paystubs-list,
    .row.salary-action-bar {
        background: var(--modal-background-color);
        padding: 0.5rem;
        border-radius: 1rem;
        margin: 0.3rem;
        box-shadow: var(--box-shadow-border);
    }
/***Salary***/    
@media (max-width: 768px) {
    .provider-block {
        height: calc(100vh - 7rem);
        max-height: calc(100vh - 7rem);
        overflow: hidden;
        padding: 1rem 0;
        background: transparent;
        display: flex;
        flex-direction: column;
    }

    .salary-provider-header,
    .salary-report-provider-header {
        flex: 0 0 auto;
    }

    .salary-provider-header > .unsaved-badge,
    .salary-provider-header > .paystub-status {
        display: none !important;
    }

    .salary-provider-mobile-status-row {
        display: flex;
        flex: 0 0 auto;
        gap: .5rem;
        align-items: center;
        justify-content: space-between;
        padding: .35rem .5rem 0;
        order: 3;
    }

    .salary-provider-mobile-status-row .unsaved-badge {
        margin-left: 0 !important;
    }

    .salary-provider-mobile-status-row .paystub-status {
        flex: 0 0 auto;
    }

    table.salary-report-table.salary-mobile-enabled {
        padding: 0.5rem;
        background: var(--modal-background-color);
    }
    .salary-report-table.salary-mobile-enabled {
        display: flex !important;
        flex-direction: column !important;
        margin: 0.3rem;
        width: fit-content;
        max-width: 100% !important;
        height: 45vh !important;
        max-height: 45vh !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        overflow: hidden !important;
        flex: 0 0 auto;
        order: 2;
    }

    .salary-report-table.salary-mobile-enabled thead {
        display: none !important;
    }

    .salary-report-table.salary-mobile-enabled tbody,
    .salary-report-table.salary-mobile-enabled tfoot {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .salary-report-table.salary-mobile-enabled .salary-mobile-scroll-body {
        display: block !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding-right: .15rem;
    }

    .salary-report-table.salary-mobile-enabled .salary-mobile-totals-footer {
        display: block !important;
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        background: var(--modal-background-color);
    }
    .salary-report-table.salary-mobile-enabled tbody tr {
        display: grid !important;
        grid-template-columns: minmax(5.25rem, .82fr) minmax(0, 1.38fr) minmax(5.25rem, .8fr) !important;
        gap: .35rem .45rem !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: .55rem .55rem !important;
        margin: .5rem 0 !important;
        border: 1px solid #ccc;
        border-radius: 10px !important;
        background: #fff;
        cursor: pointer !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr td {
        display: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        text-align: left !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr td.salary-mobile-main {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: .15rem !important;
        overflow: hidden !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr td.salary-mobile-main::before,
    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-detail::before {
        content: attr(data-label) !important;
        display: block !important;
        font-size: .62rem !important;
        line-height: 1.05 !important;
        font-weight: 500 !important;
        opacity: .68 !important;
        color: inherit !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr td.salary-mobile-main > * {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr td.salary-mobile-main.total-earned {
        align-items: stretch !important;
        text-align: right !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr td.salary-mobile-main.total-earned::before {
        text-align: right !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr td.salary-mobile-main.total-earned input {
        width: 100% !important;
        max-width: 11rem !important;
        text-align: right !important;
        align-self: flex-end !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-detail {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: minmax(7rem, .9fr) minmax(0, 1fr) !important;
        gap: .45rem !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: .4rem !important;
        border-top: 1px solid var(--border-color, #eee) !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-detail > * {
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: end !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-money {
        text-align: right !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-money::before {
        text-align: left !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-money > input,
    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-money > span,
    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-money > button {
        justify-self: end !important;
        text-align: right !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.commission-base-cell.salary-mobile-money {
        justify-items: end !important;
        text-align: right !important;
    }

    .salary-report-table.salary-mobile-enabled input,
    .salary-report-table.salary-mobile-enabled select {
        width: 100%;
        max-width: 11rem !important;
    }

    .salary-report-table.salary-mobile-enabled input[data-ci-decimals] {
        text-align: right !important;
    }

    .salary-report-table input[type="checkbox"] {
        width: 1rem !important;
        min-width: 1rem !important;
        max-width: 1rem !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-detail .duration-input {
        width: auto !important;
        max-width: 11rem !important;
        justify-content: flex-end !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.actions-cell.salary-mobile-detail,
    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-actions {
        grid-template-columns: 1fr !important;
        padding-top: .6rem !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.actions-cell.salary-mobile-detail::before,
    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.salary-mobile-actions::before {
        display: none !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr.salary-mobile-expanded td.actions-cell.salary-mobile-detail > .grid,
    .salary-report-table.salary-mobile-enabled .salary-mobile-actions-grid {
        width: auto !important;
        display: inline-grid !important;
        grid-template-columns: auto auto !important;
        gap: .75rem !important;
        justify-content: end !important;
        justify-items: center !important;
        align-items: center !important;
        justify-self: end !important;
    }

    .salary-report-table.salary-mobile-enabled .salary-mobile-actions-grid input[type="checkbox"] {
        width: 1rem !important;
        min-width: 1rem !important;
        max-width: 1rem !important;
        justify-self: center !important;
    }

    .salary-report-table.salary-mobile-enabled tbody tr:not(.salary-mobile-expanded) td.salary-mobile-detail {
        display: none !important;
    }

    .salary-report-table.salary-mobile-enabled tfoot tr {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: .35rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: .65rem .55rem !important;
        margin: .5rem 0 0 !important;
        border: 1px solid var(--border-color, #ddd) !important;
        border-radius: 10px !important;
        background: var(--surface, #fff) !important;
        box-sizing: border-box !important;
    }

    .salary-report-table.salary-mobile-enabled tfoot th {
        display: none !important;
        width: auto !important;
        max-width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    .salary-report-table.salary-mobile-enabled tfoot th.salary-mobile-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: .75rem !important;
    }

    .salary-report-table.salary-mobile-enabled tfoot th.salary-mobile-footer::before {
        content: attr(data-label) !important;
        font-size: .68rem !important;
        line-height: 1.1 !important;
        opacity: .7 !important;
    }

    .salary-report-table.salary-mobile-enabled tfoot th.salary-mobile-footer.salary-mobile-footer-action {
        justify-content: stretch !important;
    }

    .salary-report-table.salary-mobile-enabled tfoot th.salary-mobile-footer.salary-mobile-footer-action::before {
        display: none !important;
    }

    .salary-report-table.salary-mobile-enabled tfoot th.salary-mobile-footer.salary-mobile-footer-action button {
        width: 100% !important;
    }

    .salary-action-bar {
        flex: 0 0 auto;
        order: 4;
    }

    .paystubs-list {
        flex: 0 0 auto;
        order: 5;
        max-height: 18vh;
        overflow-y: auto;
    }

    .paystubs-grid {
        display: grid;
        grid-template-columns: minmax(6rem, 1fr) minmax(4.5rem, auto) minmax(5rem, auto) 2rem;
        gap: 6px 12px;
        align-items: center;
        font-size: .7rem;
    }
    .paystubs-grid-row {
        display: contents;
    }

    .paystubs-grid-cell {
        padding: 4px 0;
        min-width: 0;
    }
    .menu-item-span,
    .dashboard .page-footer,
    .salary-report-table.salary-mobile-enabled thead,
    .paystubs-grid-header,
    .paystubs-grid-row .paystubs-grid-cell:nth-child(4),
    .paystubs-grid-row .paystubs-grid-cell:nth-child(5) {
        display: none;
    }

    .paystubs-grid-head-cell {
        font-weight: 600;
        padding: 6px 0;
    }
}
.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;
    }
}