/* webfonts */

    @font-face {
        font-family: 'inter-Light';
        src: url('../fonts/Inter-Light.ttf');
    }

    @font-face {
        font-family: 'inter-Regular';
        src: url('../fonts/Inter-Regular.ttf');
    }

    @font-face {
        font-family: 'inter-Medium';
        src: url('../fonts/Inter-Medium.ttf');
    }

    @font-face {
        font-family: 'inter-SemiBold';
        src: url('../fonts/Inter-Bold.ttf');
    }

    @font-face {
        font-family: 'inter-Bold';
        src: url('../fonts/Inter-Bold.ttf');
    }

    @font-face {
        font-family: 'inter-ExtraBold';
        src: url('../fonts/Inter-ExtraBold.ttf');
    }


    /* webfonts end */

    :root {
        --secondary: #21291D;
        --primary-color: #97A880;
        --light-color: #B5B7BC;
        --white-text: #fff;
        --text-color: #21291D;
        --heading-color: #21291D;
        --font: 'inter-Regular';
        --font-light: 'inter-Light';
        --font-medium: 'inter-Medium';
        --font-semibold: 'inter-SemiBold';
        --font-bold: 'inter-Bold';
        --font-bold: 'inter-ExtraBold';
        /* coloe variable */
        --brown-color: #BBA677;
        --light-green: #77BB7E;
        --dark-blue: #6893A9;
        --light-blue: #52BDC4;
        --navy-blue: #5272C4;
        --dark-purple: #8868A9;
        --light-purple: #BB77B0;
        --magenta: #C45274;
        --orange: #C46452;
        --lime: #C8CFC9;
        --gray: #62645E;

    }


    a:focus {
        box-shadow: unset !important;
    }

    .header-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 7px 28px;
        border-bottom: 1px solid #EBEBEB;
        min-height: 64px;
    }

    .logo-right-box {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .profile-img-box img {
        min-width: 32px;
        border-radius: 50px;
        width: 32px;
        height: 32px;
        object-fit: cover;
    }

    .header-btn-process {
        min-width: 217px;
        display: inline-flex;
        background: #97A880;
        font-size: 14px;
        color: #21291D;
        font-family: var(--font-semibold);
        padding: 4px;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        border-radius: 33px;
        position: relative;
        padding-right: 10px;
    }

    .process-bar-header {
        background: #ABB999;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        padding: 3px;
        font-size: 13px;
    }

    .header-wrapper .logo-right-box .btn-group button.dropdown-item:hover {
        color: #a3af8a;
        background-color: transparent;
    }

    .header-icon {
        display: inline-block;
    }

    .header-wrapper button.dropdown-toggle {
        border: none;
        background-color: transparent;
        padding: 0px;
    }

    .header-wrapper .logo-right-box .btn-group .dropdown-menu.show li i {
        padding-right: 10px;
    }

    .header-wrapper .logo-right-box .btn-group .dropdown-menu.show li:last-child {
        border-top: 1px solid #ccc;
        text-align: center;
        margin-top: 10px;
        padding-top: 10px;
    }

    .dashboard-menu-list {
        padding: 42px 20px;
    }

    .dashboard-menu-list a {
        display: inline-flex;
        align-items: center;
        font-size: 16px;
        color: #21291D;
        gap: 18px;
        font-family: var(--font-semibold);
    }

    .dashboard-menu-list li .dropdown .dropdown-menu {
        position: unset !important;
        transform: unset !important;
        border: unset;
    }

    .dashboard-menu-list .dropdown li a {
        padding: 10px 0px 10px 25px;
        border-radius: 8px;
        border-radius: 8px;
    }

    .dashboard-menu-list .dropdown li:hover {
        background-color: #f2f3f5;
        border-radius: 8px;
    }

    .dashboard-menu-list li span {
        display: inline-flex;
        max-width: 18px;
        min-width: 18px;
    }

    .dashboard-main-box {
        display: flex;
    }

    .dashboard-main-box {
        display: flex;
        position: relative;
        overflow: hidden;
    }

    .dashboard-left-menus {
        border-right: 1px solid #EBEBEB;
        min-width: 240px;
    }

    .dashboard-right-content {
        width: calc(100% - 240px);
        position: relative;
    }

    .dashbard-heading {
        font-size: 24px;
    }

    .small-text {
        font-size: 14px;
    }

    .dashboard-content-wrapper {
        max-width: 960px;
        margin: 0 auto;
        padding: 0px;
    }

    .dashboard-content-wrapper.extra-width-area {
        max-width: 100%;
    }

    .dashboard-content-wrapper.checkout-empty-right-menu-content {
        max-width: 100%;
    }

    .dashboard-content-heading .dashbard-heading {
        margin-bottom: 16px;
    }

    .dashboard-content-heading {
        margin-bottom: 16px;
    }

    .list-box-no {
        width: 40px;
        height: 40px;
        background: #EBEBEB;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        font-size: 16px;
        font-family: var(--font-bold);
        margin-right: 16px;
        color: #696969;
    }

    .list-box-content h4 {
        font-size: 16px;
        font-family: var(--font-medium);
    }

    .countinue-content-box {
        display: flex;
        align-items: center;
        flex: 0 0 75%;
    }

    .countinue-account-list-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 23px;
        border-radius: 16px;
        margin-bottom: 16px;
    }

    .countinue-account-list-box:last-child {
        margin-bottom: 0px;
    }

    .countinue-account-list-box.active {
        background: #F4F6F2;
    }

    .countinue-account-list-box:hover {
        background: #F4F6F2;
    }

    .countinue-account-list-box.installed .list-box-no {
        background: #F2F3F5;
        color: #D4D4D4;
    }

    .countinue-account-list-box.installed .list-box-content h4,
    .countinue-account-list-box.installed .list-box-content p {
        color: #9C9C9C;
    }

    .dashboard-bottom-menu a {
        padding: 19px 34px;
        display: inline-flex;
        gap: 19px;
        align-items: center;
        color: #21291D;
        font-family: var(--font-semibold);
        border-top: 1px solid #EBEBEB;
        width: 100%;
    }

    .dashboard-bottom-menu a {
        padding: 19px 34px;
        display: inline-flex;
        gap: 19px;
        align-items: center;
        color: #21291D;
        font-family: var(--font-semibold);
        border-top: 1px solid #EBEBEB;
        width: 100%;
    }

    .dashboard-right-content {
        width: calc(100% - 240px);
        height: calc(100vh - 69px);
        overflow-y: auto;
        padding: 42px 0px;
    }

    .dashboard-menu-box {
        height: calc(100vh - 132px);
        overflow-y: auto;
    }

    .dashboard-close-btn {
        position: absolute;
        top: 46px;
        right: 64px;
        cursor: pointer;
    }

    /****************************
        Dashmenu Css Start
    ****************************/
    .dashbaord-right-menu-content {
        max-width: 960px;
        margin: 0 auto;
        /* padding: 50px 0px; */
    }

    .tab-type-text {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
        border-right: 1px solid #EBEBEB;
        padding-right: 16px;
    }

    .db-main-tabs .nav-tabs {
        border-bottom: unset;
    }

    .dashboard-tabs-right {
        display: flex;
        justify-content: space-between;
    }

    .tab-blocs {
        display: flex;
        align-items: center;
    }

    .db-main-tabs .nav-tabs .nav-link {
        border: unset;
        padding: 6px 20px;
        color: #21291D;
        font-size: 14px;
        gap: 10px;
        display: flex;
        align-items: center;
        /* padding-bottom: 18px; */
        border-bottom: 3px solid transparent;
        margin: 0 18px;
    }

    .db-main-tabs .nav-tabs .nav-link.active {
        border-bottom: 3px solid #21291D !important;
    }

    .db-main-tabs {
        padding: 0 18px;
    }

    .db-menu-category {
        display: flex;
        align-items: center;
    }

    .db-cat-icon {
        margin-right: 23px;
    }

    .db-cat-heading-box h3 {
        color: #9C9C9C;
        font-size: 14px;
        line-height: 22px;
        font-family: var(--font-semibold);
    }

    .db-cat-heading-box h2 {
        font-size: 24px;
        line-height: 32px;
        color: #6893A9;
    }

    .tab-menu-content {
        margin-top: 48px;
    }

    .db-menu-category {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
    }

    .db-cat-block-edit {
        flex: 0 0 147px;
    }

    .db-cat-block-edit a {
        flex: 0 0 147px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: var(--font-semibold);
        gap: 9px;
    }

    span.db-cat-icon-inner {
        padding: 0 8px;
        flex: 0 0 26px;
    }

    .db-cat-block {
        width: 100%;
        padding: 0 16px;
    }

    .cat-inner-list-box {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        background: #F7F8FA;
        /* align-items: center; */
        padding: 18px 16px;
        border-left: 10px solid;
        border-color: #6893A9;
        margin-bottom: 4px;
        gap: 16px;
    }

    .cat-sublist li {
        font-size: 14px;
        color: #9C9C9C;
        margin-bottom: 4px;
    }

    .variant-name-p {
        margin-bottom: 0px !important;
    }

    .db-cat-block ul {
        padding-top: 20px;
    }

    .db-cat-block:first-child ul {
        padding-top: unset !important;
    }

    .cat-sublist li {
        font-size: 14px;
        color: #9C9C9C;
        margin-bottom: 4px;
    }

    .db-cat-block p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .db-cat-block p:last-child {
        margin-bottom: 0px;
    }

    .db-cat-listbox {
        margin-bottom: 17px;
    }

    .db-cat-listbox.clr-2 .db-cat-heading-box h2 {
        color: #BBA677;
    }

    .db-cat-listbox.clr-2 .cat-inner-list-box {
        border-color: #BBA677;
    }

    .dot-dropdown-box .dropdown-toggle::after {
        display: none;
    }

    .db-cat-list-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .dropdown-menu-left {
        inset: unset !important;
        right: 0 !important;
        min-width: 124px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border: 1px solid #EBEBEB;
        padding: 4px 0px !important;
    }

    .cstm-dot-btn {
        padding: 0;
    }

    .dropdown-menu-left .dropdown-item {
        font-size: 14px;
        padding: 8px 12px;
    }

    .dropdown-menu-left .dropdown-item.delete-btn {
        color: #F53F3F;
    }

    /****************************
        db popup Css Start
    ****************************/
    label {
        font-size: 14px;
        font-family: var(--font-semibold);
        margin-bottom: 8px;
    }

    .db-popup-body {
        padding: 24px 20px;
    }

    .swatches-txt {
        font-size: 14px;
        color: #9C9C9C;
    }

    .db-popup-dialog .btn-close {
        position: absolute;
        right: 24px;
    }

    .db-popup-heading {
        width: 100%;
        font-size: 24px;
        text-align: center;
    }

    .delete-box {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
        width: 100%;
    }

    .delete-box .db-popup-heading {
        width: auto;
    }

    .rem-border .modal-header {
        border: unset;
        padding-bottom: 0;
    }

    .rem-border .modal-footer {
        border: unset;
        padding-top: 0;
    }

    .footer-center {
        align-items: center;
        justify-content: center;
    }

    /****************************
        service detail Css Start
    ****************************/

    .del-btn {
        background: #F53F3F;
        color: #fff;
    }

    .db-popup-dialog .btn {
        min-width: auto;
        padding: 7px 20px;
    }

    .service-block-heading-box {
        display: flex;
        justify-content: space-between;
        margin: 0 0 0 48px;
    }

    .del-btn-txt {
        color: #F53F3F;
        font-family: var(--font-semibold);
        font-size: 14px;
    }

    .service-block-heading {
        padding: 16px 48px;
        font-size: 24px;
    }

    .service-btn-box {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .basic-inf-box {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        padding: 20px 16px;
        margin: 16px 48px;
        position: relative;
    }

    .service-heading-box .service-heading {
        font-size: 24px;
        margin-bottom: 16px;
    }

    .service-heading-box {
        margin-bottom: 16px;
    }

    .icon-label {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .inline-checkbox {
        display: inline-flex;
        gap: 16px;
        width: 100%;
        flex-wrap: wrap;
    }

    .service-form-box {
        margin-bottom: 20px;
    }

    .large-textarea textarea {
        min-height: 95px;
    }

    .counter-text-box {
        position: absolute;
        right: 8px;
        bottom: 4px;
        font-size: 12px;
        color: #9C9C9C;
    }

    .service-form-box label {
        text-align: left;
        display: flex;
    }

    .form-sml-txt {
        font-size: 12px;
        color: #9C9C9C;
        text-align: left;
        margin-top: 2px;
    }

    .form-with-price span {
        display: flex;
        flex: 0 0 75px;
        align-items: center;
        background: #f2f3f5;
        padding: 0px 15px;
        gap: 10px;
        font-size: 14px;
        border-radius: 8px 0px 0px 8px;
        border-right: 1px solid #EBEBEB;
        margin-bottom: 16px;
        min-height: 40px;
        max-height: 40px
    }

    .form-with-price .form-control {
        border-radius: 0px 8px 8px 0px;
    }

    .form-with-price {
        display: flex;
    }

    .service-form-box .form-switch .form-check-input {
        margin: 0;
    }

    .service-form-box .form-switch {
        display: flex;
        padding-left: 0;
        align-items: center;
        gap: 17px;
    }

    .basic-inf-box.inner-info-box {
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        margin: 0;
    }

    .add-options-box {
        display: flex;
        color: #97A880;
        font-size: 14px;
        font-family: var(--font-medium);
        gap: 9px;
        padding: 5px 18px;
        align-items: center;
    }


    /* ****************************

        New service detail Css Start

    ********************************/

    .breeds-tabs-box {
        padding: 10px 10px;
        height: 260px;
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        overflow-y: auto;
    }

    .breeds-tabs-text {
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        color: #9C9C9C;
    }

    /* ===============================

        business setting page start

    ==================================*/

    .dashboard-main-heading {
        margin-bottom: 24px;
    }

    .dashboard-main-heading h2 {
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }

    .business-setting-inner-box {
        background-color: #F7F8FA;
        border-radius: 20px;
        padding: 20px 20px;
        height: 100%;
        cursor: pointer;
    }

    .business-setting-inner-box-content h3 {
        line-height: 24px;
    }

    .business-setting-inner-box-content p {
        line-height: 22px;
    }

    .business-setting-inner-box-model {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .business-setting-box {
        margin-bottom: 30px;
    }

    .business-setting-inner-box-model svg {
        width: 100%;
        max-width: 26px;
    }

    .business-setting-inner-box-model svg {
        width: 100%;
        max-width: 26px;
        margin-top: 5px;
    }

    /* ===============================

        business Account setting page start

    ==================================*/
    .service-block-heading-box p {
        margin: 0 0 30px 48px;
        font-size: 14px;
        font-weight: 400;
    }

    .service-block-heading-box p span {
        font-weight: 600;
        font-size: 14px;
    }

    .breadcrumb .breadcrumb-item {
        font-size: 14px;
        font-weight: 400;
    }

    .services-block.new-location-block {
        margin: 0 0 30px 0px;
    }

    .breadcrumb .breadcrumb-item.active {
        font-weight: 600;
        font-size: 14px;
        color: #21291D;
    }

    .business-account-save-btn {
        padding: 7px 43px;
    }

    .account-personal-detail {
        margin: 16px 48px;
    }

    .personal-detail-heading h3 {
        line-height: 24px;
        margin-bottom: 16px;
    }

    .personal-detail-profile-inner {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .file>input[type='file'] {

        display: none;

    }

    .camera-box {
        border-radius: 100%;
        background-color: #EBEBEB;
        cursor: pointer;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .file.file--upload {
        position: absolute;
        top: 35px;
        left: 49px;
    }

    .personal-detail-profile-box {
        position: relative;
    }

    .personal-detail-profile-box img {
        cursor: pointer;
    }

    .personal-detail-profile-box img {
        border-radius: 100%;
        object-fit: cover;
        height: 64px;
        width: 64px;
    }

    .green-outline-btn {
        border: 2px solid #97A880;
        border-radius: 8px;
        padding: 7px 20px;
        height: 36px;
        color: #97A880;
        font-size: 14px;
        font-weight: 600;
    }

    .account-security-box .personal-detail-heading h3 {
        padding: 0px 48px;
    }

    .account-security-password-box .personal-detail-heading h3 {
        text-align: left;
        padding: unset;
        margin-bottom: 0px;
    }

    .account-security-password-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 30px;
    }

    .social-login-account-box {
        padding: 10px;
    }

    .social-login-account-inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }

    .social-login-account-detail {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .social-login-account-content p {
        text-align: left;
        font-size: 14px;
        font-weight: 400;
    }

    .social-login-account-content h4 {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        text-align: left;
    }

    .social-login-account-box.connected-account {
        border-bottom: 1px solid #EBEBEB;
    }

    .delete-account-box {
        margin: 30px 48px 0;
        /* margin: 30px 350px 0; */
    }

    .delete-account-box .del-btn {
        /* padding: 7px 20px; */
        padding: 7px 7px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
    }

    .social-login-account-box .green-outline-btn {
        max-width: 119px;
        width: 100%;
    }

    .branding-appearance-box .form-switch {
        display: flex;
        gap: 10px;
        padding-left: 0px;
    }

    .brand-logo-heading h4 {
        font-size: 14px;
        font-weight: 600px;
        text-align: left;
    }

    .brand-logo-box {
        margin-top: 18px;
    }

    .upload-logo-box {
        padding: 22px 50px;
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        cursor: pointer;
    }

    .brand-logo-box .file {
        text-align: left;
        margin-top: 10px;
    }

    .brand-logo-para p {
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        color: #9C9C9C;
    }

    .brand-seleted-color {
        height: 32px;
        width: 50px;
        border-radius: 8px 0px 0px 8px;
        background-color: #97A880;
    }

    .brand-color-selector {
        display: flex;
        filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.1));
    }

    .color-selector-input {
        min-height: 32px;
        width: 91px;
        background-color: #fff;
        padding: 5px 12px 5px 12px;
        border-radius: 0px 8px 8px 0px;
    }

    .brand-color-box {
        margin-top: 12px;
        display: flex;
        gap: 25px;
        align-items: center;
    }

    .brand-color-box a {
        font-size: 14px;
        font-weight: 600;
    }

    .brand-color-selector .formfield {
        margin-bottom: 0px;
    }

    .location-logo-box {
        height: 52px;
        width: 52px;
        background-color: #F7F8FA;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 52px;
    }

    .location-logo-content h4 {
        font-weight: 500;
        text-align: left;
    }

    .location-logo-content p {
        color: #9C9C9C;
        text-align: left;
    }

    .location-box {
        display: flex;
        gap: 16px;
        align-items: center;
        position: relative;
    }

    .location-box .location-logo-content-icon-box svg {
        position: absolute;
        right: 6px;
        bottom: 17px;
    }

    .location-icon-box {
        width: 46px;
        height: 40px;
        background-color: #F2F3F5;
        border-radius: 8px 0px 0px 8px;
        border-right: 1px solid #EBEBEB;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .custom-location-input {
        display: flex;
    }

    .custom-location-input input {
        border-radius: 0px 8px 8px 0px;
        padding: 6px 16px;
    }

    .service-block-heading-box .service-btn-box .primary-btn {
        min-width: 119px;
        color: white;
    }

    .location-setting-block .service-btn-box .primary-btn {
        min-width: 119px;
        transition: unset;
    }

    .location-setting-block .service-block-heading-box {
        display: flex;
        justify-content: space-between;
        margin: 0 0 20px 48px;
    }

    .service-block-heading-box .service-block-heading {
        padding: 16px 0;
        font-size: 24px;
    }

    a.del-btn-txt.back-button {
        font-size: 24px;
        color: #000;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .service-form-box:last-child {
        margin-bottom: 0px;
    }

    .account-security-password-heading h3 {
        line-height: 24px;
        text-align: left;
        margin-bottom: 10px;
    }

    .services-block.business-account-block {
        padding: 0 0 0 0px;
    }


    .switch3 {
        position: relative;
        display: inline-block;
        width: 51px;
        height: 24px;
        border-radius: 37px;
        background-color: #97a880;
        cursor: pointer;
        transition: all .3s;
        overflow: hidden;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, .3);
    }

    .switch3 input {
        display: none;
    }

    .switch3 input:checked+div {
        left: calc(80px - 52px);
        box-shadow: 0px 0px 0px white;
    }

    .switch3 div {
        position: absolute;
        width: 18px;
        height: 18px;
        border-radius: 27px;
        background-color: white;
        top: 3px;
        left: 5px;
        box-shadow: 0px 0px 1px rgb(150, 150, 150);
        transition: all .3s;
    }

    .switch3 div:before,
    .switch3 div:after {
        position: absolute;
        content: 'ON';
        width: calc(80px - 40px);
        height: 37px;
        line-height: 37px;
        font-family: 'Varela Round';
        font-size: 14px;
        /* font-weight: bold; */
        top: -5px;
    }

    .switch3 div:before {
        content: 'OFF';
        color: rgb(255, 254, 254);
        left: 119%;
        width: calc(75px - 39px);
        top: -9px;
        font-size: 13px;
        font-family: var(--font) !important;
    }

    .switch3 div:after {
        content: 'ON';
        right: 100%;
        color: white;
        width: calc(80px - 54px);
        top: -10px;
        font-family: var(--font) !important;
    }

    .switch3-checked {
        background-color: #e74c3c;
        box-shadow: none;
    }

    .personal-detail-heading.billing-table-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .personal-detail-heading.billing-table-heading h3 {
        margin-bottom: 0px;
    }

    .basic-inf-box.text-center.billing-table-box {
        padding: 0px;
        border: unset;
    }

    .billing-table-box table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        width: 100%;
    }

    .billing-table-box table tr th,
    .billing-table-box table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 7px 0px 7px 20px;
        text-align: left;
    }

    .billing-table-box table tr th:first-child,
    .billing-table-box table tr td:first-child {
        border-left: 1px solid #bbb;
    }

    .billing-table-box table tr th {
        border-top: 1px solid #bbb;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
        color: #9C9C9C;
        background-color: #F7F8FA;
    }

    .billing-table-box table tr td {
        font-size: 16px;
        font-family: var(--font-semibold);
    }

    /* top-left border-radius */
    .billing-table-box table tr:first-child th:first-child {
        border-top-left-radius: 6px;
    }

    /* top-right border-radius */
    .billing-table-box table tr:first-child th:last-child {
        border-top-right-radius: 6px;
    }

    /* bottom-left border-radius */
    .billing-table-box table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }

    /* bottom-right border-radius */
    .billing-table-box table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }

    .billing-plan-box-heading p {
        text-align: left;
        font-size: 14px;
        font-weight: 400;
        color: #696969;
    }

    .billing-your-plan-content {
        margin-bottom: 1px;
    }

    .billing-plan-box-heading h3 {
        margin-top: 5px;
    }

    .your-plan-edit {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .billing-detail-dropdown,
    .billing-detail-dropdown:focus {
        background-color: transparent;
        border: unset;
        padding: unset;
        color: #a1b08c;
    }

    .checkbox-form-feild.billing-detail-dropdown-box {
        position: relative;
    }

    .detail-dropdown-icon {
        position: absolute;
        top: 0px;
        left: 50px;
    }

    .dropdown-toggle:after {
        display: none;
    }

    .billing-detail-dropdown {
        text-align: left;
        width: unset;
    }

    .billing-detail-dropdown .dropdown-toggle.show {
        border: unset !important;
        text-align: left;
        width: unset;
    }

    .billing-detail-dropdown .dropdown-menu.show {
        display: block;
        position: relative !important;
        inset: unset !important;
        transform: none !important;
        border: none;
    }

    .cancel-your-plan-box .primary-btn {
        min-width: 120px;
    }

    .billing-detail-dropdown .dropdown-toggle {
        position: relative;
        font-size: 14px;
        font-family: var(--font-light);
        color: #97A880;
        padding: 0.375rem 0.75rem 0.375rem 0rem;
        width: unset;
    }

    .billing-detail-dropdown .dropdown-toggle svg {
        position: absolute;
        left: 50px;
        top: 15px;
        transition: all 0.6s ease-in-out;
    }

    .billing-detail-dropdown .dropdown-toggle.show svg {
        transform: rotate(180deg);
    }

    .billing-detail-dropdown ul.dropdown-menu.show {
        padding: 0 0 0 30px;
    }

    .billing-detail-dropdown ul.dropdown-menu.show {
        list-style: disc;
    }

    .billing-detail-dropdown .dropdown-item {
        padding: 0.25rem 0rem;
    }

    .billing-payment-tab-box {
        padding: 14px 0px 0px 48px;
    }

    .billing-payment-tabs .nav-pills .nav-link {
        color: #696969;
        background-color: transparent;
        border-radius: unset;

    }

    .billing-payment-tabs .nav-pills .nav-link.active {
        color: #000;
        background-color: transparent;
        border-bottom: 2px solid;
        border-radius: unset;
        padding: unset;
        margin: 0rem 1rem;
        padding-bottom: 10px;
    }

    ul#pills-tab {
        border-bottom: 1px solid #EBEBEB;
    }

    .billing-payment-tabs .nav-pills .nav-link {
        padding: unset;
        margin: 0rem 1rem;
    }

    .Payment-management-tab-content .payment-method-box .account-personal-detail,
    .Payment-management-tab-content .payment-method-box .basic-inf-box {
        margin: 16px 0px;
    }

    .payment-method-box .basic-inf-box.text-center .Add-payment-box {
        padding: 20px 16px;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 9px;
        color: #a0af8a;
    }

    .payment-method-box .basic-inf-box {
        padding: unset;
    }

    .Payment-management-tab-content {
        margin-top: 32px;
    }

    .Payment-management-activity-wrapper {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .Payment-management-activity-wrapper a {
        min-width: 135px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .Payment-management-activity-wrapper .formfield {
        margin-bottom: 0px;
    }

    .filter-dropdown-box {
        margin: 16px 0 0 0;
    }

    .filter-dropdown-box h4 {
        margin-bottom: 16px;
    }

    .filter-dropdown-inner {
        position: relative;
        display: flex;
        gap: 12px;
    }




    .select-dropdown {
        position: relative;
        display: inline-block;
        max-width: 100%;
    }

    .select-dropdown__button {
        padding: 10px 35px 10px 50px;
        background-color: #fff;
        color: #616161;
        border: 1px solid #cecece;
        border-radius: 3px;
        cursor: pointer;
        width: 210px;
        text-align: left;
    }

    button.select-dropdown__button span {
        font-size: 14px;
    }

    .select-dropdown__button:focus {
        outline: none;
    }

    .select-dropdown__button .zmdi-chevron-down {
        position: absolute;
        right: 16px;
        top: 14px;
    }

    .select-dropdown__list {
        position: absolute;
        display: block;
        left: 0;
        top: 50px;
        right: 0;
        max-height: 300px;
        overflow: auto;
        margin: 0;
        padding: 0;
        list-style-type: none;
        opacity: 0;
        pointer-events: none;
        transform-origin: top left;
        transform: scale(1, 0);
        transition: all ease-in-out 0.3s;
        z-index: 2;
    }

    .select-dropdown__list.active {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1, 1);
    }

    .select-dropdown__list-item {
        display: block;
        list-style-type: none;
        padding: 10px 8px;
        background: #fff;

        font-size: 14px;
        line-height: 1.4;
        cursor: pointer;
        color: #616161;
        transition: all ease-in-out 0.3s;
    }

    ul.select-dropdown__list {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        max-width: 153px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        height: 276px;
        overflow-y: auto;
    }

    .select-dropdown__list-item label {
        margin-right: 0px !important;
    }

    .filter-dropdown-box .filter-dropdown-inner .billing-date-dropdown button {
        border-radius: 50px;
        background-color: #F2F3F5;
    }

    button.select-dropdown__button:hover {
        background-color: #fff !important;
        border: 1px solid #97A880;
    }

    .billing-date-dropdown-detail {
        position: absolute;
        top: 11px;
        left: 13px;
    }

    button.select-dropdown__button:before {
        content: ' ';
        height: 39px;
        width: 1px;
        background-color: #ccc;
        top: 1px;
        right: 36px;
        position: absolute;
    }

    .select-dropdown.billing-status-dropdown button {
        border-radius: 50px;
        padding: 10px 35px 10px 63px;
        background-color: #F2F3F5;
    }

    .activity-detail-box {
        padding: 24px 0 0 0;
    }

    .Payment-activity-main-pagination {
        padding: 21px 0px;
        display: flex;
    }

    .Payment-activity-main-pagination {
        padding: 21px 0px;
        display: flex;
        justify-content: flex-end;
    }

    li.billing-payment-pagination-list-item {
        display: inline-block;
    }

    .pagination-previous a,
    .pagination-total-page a,
    .pagination-next-page a {
        padding: 9px 13px;
    }

    .pagination-current-page a,
    .pagination-total-page a:hover {
        padding: 5px 13px;
        background-color: #F2F3F5;
        border-radius: 2px;
    }

    .pagination-total-page a {
        padding: 5px 13px;
    }

    .activity-detail-box-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #EBEBEB;
        padding-bottom: 5px;
    }

    .activity-detail-day {
        font-size: 14px;
        font-weight: 600;
        color: #9C9C9C;
    }

    .activity-detail-dollar {
        font-size: 14px;
        font-weight: 600;
        color: #21291D;
    }

    .activity-detail-inner {
        display: flex;
        justify-content: space-between;
        margin-top: 16px;
    }

    .activity-account-profile-box {
        height: 48px;
        width: 48px;
        background-color: #f2f3f5;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .activity-account-profile-box img {
        min-width: 32px;
    }

    .account-and-payment-status {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .account-and-payment-status p {
        font-size: 14px;
        font-weight: 400;
        color: #9C9C9C;
    }

    .activity-detail-transaction {
        font-size: 16px;
        font-weight: 700;
        color: #00B42A;
    }

    .activity-detail-transaction-time {
        font-size: 14px;
        font-weight: 400;
        color: #9C9C9C;
        text-align: right;
    }

    .transaction-arrow-box {
        width: 18px;
        height: 18px;
        background-color: #00B42A;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        bottom: 0;
        border-radius: 50px;
    }

    .decrease-payment-status .transaction-arrow-box {
        background-color: #C46452;
        transform: rotate(180deg);
    }

    .decrease-payment-status .transaction-time h4 {
        color: #000;
    }

    .Receipt-template-box .account-personal-detail,
    .Receipt-template-box .basic-inf-box {
        margin: unset;
    }

    .billing-credit-detail .credit-balance p {
        font-size: 16px;
        font-family: var(--font-medium);
        color: #21291D;
    }

    .billing-credit-detail .credit-balance span {
        font-size: 24px;
        font-family: var(--font-bold);
        color: #21291D;
    }

    .billing-credit-detail {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .billing-credit-history h3 {
        font-size: 16px;
        font-family: var(--font-bold);
        color: #21291D;
        margin: 16px 0;
    }

    .custom-charge-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 38px;
    }

    .custom-charge-box .basic-inf-box {
        margin: 16px 0;
    }

    h3 {
        font-size: 16px;
    }

    .billing-tax-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 36px;
    }

    .retail-price {
        border-radius: 8px;
        background-color: #F4F6F2;
        padding: 5px 8px;
        color: #97A880;
        margin-top: 8px;
    }


    .custom-charge-type-content .apply-service-charge-box .formfield {
        display: flex;
        gap: 13px;
    }


    .custom-charge-rate-detail .radio-box-btns label {
        font-size: 14px;
        font-weight: var(--font-medium);
    }

    .rate-type-inner-detail-formfield {
        padding-left: 20px;
    }

    .rate-type-dollar-box {
        width: 65px;
        height: 40px;
        background-color: #F2F3F5;
        border-radius: 8px 0px 0px 8px;
        border-right: 1px solid #EBEBEB;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #21291D;
    }

    .radio-label {
        font-family: var(--font-light);
    }

    .biling-tax-content .service-form-box {
        margin-bottom: unset;
    }

    .tax-calculation-desclaimer {
        border-radius: 8px;
        background-color: #F4F6F2;
        display: flex;
        gap: 9px;
        padding: 9px 16px;
        align-items: center;
    }

    .tax-retail-price-include-tax p {
        text-align: left;
        max-width: 400px;
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .tax-retail-price-include-tax span {
        text-align: left;
        font-size: 14px;
        font-family: var(--font-bold);
        color: #9C9C9C;
        display: block;
    }

    .tax-retail-price-include-tax {
        padding-left: 20px;
        margin-top: 16px;
    }

    .tax-calculation-radio-box {
        margin-top: 15px;
    }


    .modal .modal.show .modal-dialog .modal-content .modal-header h1 {
        text-align: center;
    }

    .new-location-model-body .model-heading h4,
    .db-popup-body .model-heading h4 {
        font-size: 16px;
        font-weight: 700;
    }

    .new-location-model-body .basic-inf-box,
    .db-popup-body .basic-inf-box {
        margin: 16px 0;
    }

    .payment-secureity-desclaimer {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .payment-secureity-desclaimer p {
        font-size: 12px;
        color: #9C9C9C;
        font-weight: 400;
    }

    .payment-method-hading-box {
        display: flex;
        justify-content: space-between;
    }

    .payment-card-box {
        padding: 0px 8px;
        border: 1px solid #CCCCCC;
        border-radius: 2px;
    }

    .payment-card-box img {
        width: 100%;
    }

    .payment-card-box-wrapper {
        display: flex;
        gap: 4px;
    }

    .payment-method-model-body .basic-inf-box .radio-label {

        font-family: var(--font-bold);
    }

    .dashboard-menu-list a {
        padding: 9px 10px 9px 13px;
        min-width: 191px;
    }

    /* ul.dashboard-menu-list li:hover,
    ul.dashboard-menu-list li.active {
        background: #F2F3F5;
        border-radius: 8px;
    } */

    ul.dashboard-menu-list li {
        margin-bottom: 5px;
    }

    .main-heading-box h2 {
        font-size: 24px;
        font-family: var(--font-bold);

    }

    .staff-member-table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        width: 100%;
    }

    .staff-member-table tr th {
        /* background: #eee; */
        border-top: 1px solid #EBEBEB;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
        color: #9C9C9C;
        background-color: #F7F8FA;
    }

    .staff-member-table tr th:first-child,
    .staff-member-table tr td:first-child {
        border-left: 1px solid #EBEBEB;
    }

    .staff-member-table tr:first-child th:first-child {
        border-top-left-radius: 6px;
    }

    .staff-member-table tr:first-child th:last-child {
        border-top-right-radius: 6px;
        min-width: 248px;
    }

    .staff-member-table tr th,
    .staff-member-table tr td {
        /* border-right: 1px solid #EBEBEB; */
        border-bottom: 1px solid #EBEBEB;
        /* padding: 5px; */
        padding: 7px 0px 7px 20px;
        text-align: left;
    }

    .staff-member-table tr td:last-child,
    .staff-member-table tr th:last-child {
        border-right: 1px solid #EBEBEB;

    }

    .staff-member-table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }

    .staff-member-table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }

    .staff-member-profile-wrapper {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .staff-member-profile-wrapper img {
        border-radius: 50%;
        object-fit: cover;
        height: 50px;
        width: 50px;
    }

    .staff-member-position-tag {
        margin: 8px 0px;
        position: relative;


    }

    .ownwr-tag {
        background-color: #F4F6F2;
        color: #97A880;
        max-width: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
    }

    .admin-tag {
        background-color: #E8F7FF;
        color: #3491FA;
        max-width: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
    }

    .member-tag {
        background-color: #F2F3F5;
        color: #21291D;
        max-width: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
    }

    .staff-member-position-tag img {
        position: absolute;
        right: -140px;
    }

    img.seen-data {
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
    }

    .form-control {
        position: relative;
    }

    .right-content-main-box {
        margin: 30px 48px;
    }

    .right-content-box-inner-heading h3 {
        text-align: left;
        font-size: 16px;
        font-family: var(--font-bold);
        color: #21291D;

    }

    .right-content-main-box-inner .basic-inf-box {
        margin: 16px 0px;
    }

    .member-selection p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
        text-align: left;
    }

    .member-selection label {
        font-family: var(--font-bold);
    }

    .member-selection {
        margin-bottom: 20px;
    }

    .calender-color-box .formfield {
        text-align: left;
    }

    .staff-working-address {
        padding: 17px 16px;
        border: 2px solid #cecece;
        border-radius: 8px;
        max-width: 395px;
        display: flex;
        gap: 16px;
        position: relative;
        margin-bottom: 10px;
    }

    .working-at-icon-box {
        height: 52px;
        width: 52px;
        background-color: #F7F8FA;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    .working-at-content-box span {
        font-size: 16px;
        font-family: var(--font-medium);
        color: #21291D;
    }

    .working-at-content-box p {
        font-size: 14px;
        font-family: var(--font-light);
        color: #9C9C9C;
    }

    .working-address-varification-icon {
        position: absolute;
        right: -23px;
        height: 40px;
        width: 40px;
        background-color: #000;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 4px solid #fff;
    }

    .staff-service-box-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .staff-service-box-heading span {
        font-size: 14px;
        font-family: var(--font-light);
        color: #9C9C9C;
    }

    .staff-member-service-table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 630px;
        width: 100%;
    }

    .staff-member-service-table tr th {
        border-top: 1px solid #EBEBEB;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
        color: #9C9C9C;
        background-color: #F7F8FA;
    }

    .staff-member-service-table tr th:first-child,
    .staff-member-service-table tr td:first-child {
        border-left: 1px solid #EBEBEB;
    }

    .staff-member-service-table tr:first-child th:first-child {
        border-top-left-radius: 6px;
    }

    .staff-member-service-table tr:first-child th:last-child {
        border-top-right-radius: 6px;

    }

    .staff-member-service-table tr th,
    .staff-member-service-table tr td {
        border-bottom: 1px solid #EBEBEB;
        padding: 7px 0px 7px 20px;
        text-align: left;
    }

    .staff-member-service-table tr td:last-child,
    .staff-member-service-table tr th:last-child {
        border-right: 1px solid #EBEBEB;

    }

    .staff-member-service-table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }

    .staff-member-service-table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }

    #css-dropdown {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        width: 300px;
        height: 42px;
        margin: 100px auto 0 auto;
    }

    .choices__list--multiple .choices__item {
        display: inline-block;
        vertical-align: middle;
        border-radius: unset !important;
        padding: 4px 10px;
        font-size: 12px;
        font-weight: 500;
        margin-right: 3.75px;
        margin-bottom: 3.75px;
        background-color: #fff !important;
        border: 1px solid #fff !important;
        color: #000 !important;
        word-break: break-all;
    }

    .choices[data-type*=select-multiple] .choices__button,
    .choices[data-type*=text] .choices__button {
        position: relative;
        display: inline-block;
        margin: 0 -4px 0 8px;
        padding-left: 16px;
        border-left: unset !important;
        background-image: url(../images/cross.png) !important;
        background-size: 8px;
        width: 8px;
        line-height: 1;
        opacity: .75;
        border-radius: 0;
    }

    .choices__inner {
        border-radius: 10px !important;
        border: unset !important;
    }

    /* select-service-slide */
    .select-service-slide-box {
        max-width: 520px;
        border: 1px solid #ebebeb;
        position: fixed;
        top: 0;
        right: 0px;
        width: 100%;
        background-color: #fff;
        height: 100vh;
        /* overflow-y: auto; */
        border-radius: 8px;
        z-index: 99999;
        transition: all 0.4s ease-in-out;
        transform: translate(101%, 0);
    }

    .select-service-slide-header {
        display: flex;
        justify-content: center;
        padding: 18px 20px;
        position: sticky;
        top: 0;
        border-bottom: 1px solid #EBEBEB;
        background-color: #fff;
        z-index: 10;
    }

    .select-service-slide-header h2 {
        font-size: 24px;
        font-family: var(--font-bold);
        color: var(--secondary);
    }

    .select-service-slide-header i {
        position: absolute;
        right: 20px;
        top: 18px;
        font-size: 20px;
        cursor: pointer;
    }

    .select-service-slide-body {
        padding: 24px 20px;
        overflow: auto;
        height: 100%;
        /* padding-bottom: 56px; */
        height: calc(100vh - 119px);
    }

    .select-service-slide-body .nav-pills {
        display: flex;
        justify-content: flex-start;
        border-bottom: unset !important;
        gap: 12px;
    }

    .select-service-slide-body .nav-pills .nav-link.active {
        background-color: #fff;
        color: #000;
        border-bottom: 2px solid;
        border-radius: unset;
    }

    .select-service-slide-body .nav-pills .nav-link {
        color: #000;
        border-radius: 100px;
    }

    .select-service-inner-tab .nav-pills .nav-link {
        font-size: 14px;
    }

    .select-service-inner-tab .nav-pills .nav-link.active {
        font-size: 14px;
        background-color: #000;
        color: #fff;
        border-radius: 100px;
        border-bottom: unset;
    }

    .dog-service-list-inner {
        display: flex;
        justify-content: space-between;
        padding: 9px 16px;
        border-bottom: 1px solid #EBEBEB;
        border-left: 10px solid transparent;
    }

    .dog-service-list-check-box {
        height: 20px;
        width: 20px;
        background-color: #D4D4D4;
        border-radius: 50px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .dog-service-list-heading {
        border-left: 10px solid #6893A9;
        background-color: #F7F8FA;
    }

    li.dog-service-list-inner.dog-service-list-heading .dog-service-list-info:first-child {
        min-width: 136px;
    }

    .dog-service-list-check-box.dark-check-box {
        background-color: #000;
    }

    .dog-service-list-check-box.services-listing.charcoal-grey-check-box {
        background-color: #869091 !important;
    }

    .dog-service-list-heading .dog-service-list-check-box {
        background-color: #ffffff;

    }

    .dog-service-list-heading .dog-service-list-check-box I {
        color: #ccc !important;
    }

    .select-service-slide-box.model-open {
        transform: translate(0%, 0);
    }

    body[class*="open"]::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        background-color: #121212;
        left: 0;
        opacity: 0.4;
        z-index: 99;
    }

    body[class*="open"] {
        position: relative;
        overflow: hidden;
        touch-action: none;
    }

    .service-table-show-more-btn {
        padding: 2px 5px;
        text-align: left;
        /* float: left; */
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 12px;
        color: var(--primary-color);
    }

    /* ======================================

        calender-model-start

    =========================================*/

    .new-appointment-modal-dialog {
        max-width: 1088px;
        max-height: 764px;
    }


    .new-appointment-model-wrapper .nav-tabs {
        border-bottom: unset;
        max-width: 512px;
        display: flex;
        margin-bottom: 10px;
    }

    .new-appointment-model-wrapper .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        color: #495057;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
        padding: 6px 80px;
    }

    .new-appointment-model-wrapper .nav-tabs .nav-link {
        margin-bottom: -1px;
        background: 0 0;
        border: 1px solid transparent;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        padding: 6px 80px;
        font-size: 14px;
        font-family: var(--font-medium);
        color: #696969;
    }

    .new-appointment-model-wrapper .nav-tabs .nav-link.active {

        padding: 6px 80px;
        background-color: var(--primary-color) !important;
        font-size: 14px;
        font-family: var(--font-bold);
        color: #21291D;
    }

    .new-appointment-model-wrapper ul li:first-child .nav-link {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border: 1px solid #ccc !important;
    }

    .new-appointment-model-wrapper ul li:last-child .nav-link {
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        border: 1px solid #ccc !important;
    }

    .new-appointment-field-box {
        display: flex;
        gap: 10px;
    }

    .clinet-detail-box {
        width: 251px;
        height: 126px;
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        padding: 10px 10px;

    }

    .new-appointment-field-box button.dropdown-toggle {
        min-width: 251px;
        border-radius: 8px;
        border: unset;
        min-height: 39px;
        padding: 2px 30px 2px 10px;
        position: relative;
        text-align: left;
    }

    .new-appointment-field-box button.dropdown-toggle .dropdown-icon {
        position: absolute;
        right: 11px;
        top: 13px;
        transition: all 0.4s ease-in;
    }

    .new-appointment-field-box button.dropdown-toggle.show .dropdown-icon {
        transform: rotate(180deg);
    }

    .new-appointment-field-box .new-appointment-field-left .dropdown {
        min-width: 251px;
        position: relative;
    }

    .new-appointment-field-left {
        margin-bottom: 16px;
    }

    .new-appointment-field-box .dropdown-icon {
        position: absolute;
        top: 8px;
        right: 10px;
    }

    .new-appointment-field-box .form-control .dropdown-toggle.show .dropdown-icon {
        transform: rotate(180deg);
    }

    .new-appointment-service-detail-wrapper {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        padding: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .new-appointment-service-name span {
        font-size: 14px;
        font-family: var(--font-bold);
        color: #21291D;
    }

    .new-appointment-service-name p {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #696969;
    }

    .new-appointment-service-charges {
        padding: 7px 16px;
        display: flex;
        background-color: #F2F3F5;
        border-radius: 8px;
        gap: 12px;
    }

    .new-appointment-service-provider .dropdown-toggle {
        min-width: 207px;
        border-radius: 8px;
        border: unset;
        min-height: 39px;
        padding: 2px 1px 2px 10px;
        position: relative;
        text-align: left;
    }

    .new-appointment-service-provider .dropdown-toggle .show .dropdown-icon {
        transform: rotate(180deg);
    }

    .new-appointment-service-provider .dropdown-toggle .dropdown-icon {
        position: absolute;
        top: 15px;
        right: 12px;
    }

    .new-appointment-service-cancel-box {
        font-size: 27px;
        cursor: pointer;
    }

    .new-appointment-service-time .dropdown-toggle {
        min-width: 175px;
        border-radius: 8px;
        border: unset;
        min-height: 39px;
        padding: 2px 1px 2px 10px;
        position: relative;
        text-align: left;
    }

    .new-appointment-service-time .dropdown-toggle .dropdown-icon {
        position: absolute;
        top: 13px;
        right: 12px;
    }

    .new-appointment-service-duration .dropdown-toggle {
        min-width: 175px;
        border-radius: 8px;
        border: unset;
        min-height: 39px;
        padding: 2px 1px 2px 10px;
        position: relative;
        text-align: left;
    }

    .new-appointment-service-duration .dropdown-toggle .dropdown-icon {
        position: absolute;
        top: 13px;
        right: 12px;
    }

    .new-appointment-service-time-duration {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .not-repeat-btn span {
        display: flex;
        gap: 10px;
        font-size: 14px;
        font-family: var(--font-bold);
        color: #21291D;
    }

    .new-appointment-box .checkbox-content span {
        font-size: 14px;
        font-family: var(--font-bold);
        color: #21291D;
    }

    .new-appointment-box .checkbox-content p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .new-appointment-message-box h3 {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .new-appointment-box .new-appointment-note-textarea {
        width: 100%;
        background-color: #f2f3f5;
        border-radius: 8px;
        border: unset;
        padding: 10px;
    }

    .new-appointment-model-body {
        position: relative;
        overflow: hidden;
    }

    .new-appointment-billing-box {
        padding: 24px 20px;
        border-top: 1px solid #EBEBEB;
        border-left: 1px solid #EBEBEB;
        border-top-left-radius: 8px;
        max-width: 350px;
        min-height: 228px;
        background-color: #fff;
    }

    .new-appointment-billing-main {
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        transition: all 0.4s ease-in-out;
    }

    .new-appointment-billing-inner-right .dropdown-toggle {
        min-width: 140px;
        border-radius: 8px;
        border: unset;
        min-height: 39px;
        padding: 2px 1px 2px 10px;
        position: relative;
        text-align: left;
    }

    .new-appointment-billing-inner {
        display: flex;
        align-items: center;
        min-width: 310px;
        width: 100%;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .new-appointment-billing-inner-left {
        max-width: 130px;
        text-align: right;
        width: 100%;
    }

    .new-appointment-billing-inner-right .formfield .select-country-text input {
        max-width: 86px;
    }

    .new-appointment-billing-inner-right .select-country-text .form-control {
        border-radius: 0px 8px 8px 0px;
        max-width: 86px;
    }

    .new-appointment-billing-inner-right .formfield {
        margin-bottom: unset;
    }

    .new-appointment-billing-inner-left span {
        font-size: 14px;
        color: #9C9C9C;
        font-family: var(--font-medium);
    }

    .dropdown-menu.add-client-dropdown-menu.show {
        max-width: 240px !important;
        width: 100%;
    }

    .add-client-dropdown-menu li a {
        padding: 7px 12px;
    }

    .add-client-dropdown-menu-content {
        display: flex;
        gap: 8px;
    }

    .add-new-client-btn {
        padding: 10px 12px;
        border-top: 1px solid #EBEBEB;
        cursor: pointer;
    }

    .add-new-client-btn a {
        display: flex;
        gap: 8px;
        align-items: center;
        color: var(--primary-color);
    }

    .new-appointment-billing-indicator-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 50px;
        background-color: #fff;
        display: flex;
        align-items: center;
        box-shadow: 1px 2px 11px #ccc;
        right: 37px;
        bottom: 240px;
        margin-bottom: 11px;
        justify-content: center;
        margin-right: 20px;
        transition: all 0.4s ease-in-out;
        cursor: pointer;
    }

    i.fa-sharp.fa-regular.fa-circle-question {
        cursor: pointer;
        color: #a4a4a4;
    }

    .dropdown-item.active,
    .dropdown-item:active {
        color: #000;
        text-decoration: none;
        background-color: transparent;
    }

    /* ======================================

        add new client slide

    =========================================*/

    .add-new-client-wrapper {
        position: fixed;
        right: 0;
        top: 0;
        max-width: 520px;
        background-color: #fff;
        width: 100%;
        border-radius: 8px;
        border: 1px solid #ebebeb;
        transition: all 0.4s ease-in-out;
        transform: translate(101%, 0);
        z-index: 99999;
    }

    .add-new-client-header {
        padding: 18px 20px;
        border-bottom: 1px solid #EBEBEB;
        position: relative;
    }

    .add-new-client-header i {
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 20px;
        cursor: pointer;
    }

    .add-new-client-header h2 {
        font-size: 24px;
        font-family: var(--font-bold);
        color: var(--secondary);
        text-align: center;
    }

    .new-client-slide-profile-box {
        width: 64px;
        height: 64px;
        background-color: var(--secondary);
        border-radius: 50px;
        margin: 24px auto 10px auto;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .new-client-slide-profile-box h1 {
        color: #fff;
        font-size: 38px;
    }

    .add-new-client-info-box {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        padding: 16px;
    }

    .add-new-client-info-wrapper {
        padding: 0px 20px;
    }

    .add-new-client-info-heading {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .add-new-client-info-heading span {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--primary-color);
    }

    .pet-info-heading {
        padding: 8px 16px;
        background-color: var(--primary-color);
        color: var(--secondary);
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .pet-id-box {
        padding: unset;
    }

    .new-client-pet-info {
        padding: 10px 20px;
    }

    .pet-id-box .dropdown-toggle {
        border: unset;
        width: 100%;
        min-height: 39px;
        border-radius: 8px;
        text-align: left;
        color: #21201d;
    }

    .new-client-pet-textarea {
        width: 100%;
        background-color: #f2f3f5;
        border-radius: 8px;
        border: unset;
        padding: 10px;
    }

    .new-client-pet-textarea-desclaimer {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .add-new-client-info-wrapper .dropdown-toggle {
        border: unset;
        border-radius: 8px;
        width: 100%;
        min-height: 39px;
        text-align: left;
    }

    .add-new-client-fotter {
        padding: 16px 20px;
        border-top: 1px solid #EBEBEB;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .add-new-client-fotter button {
        min-width: 112px;
    }

    .add-new-client-body {
        height: calc(100vh - 131px) !important;
        overflow: auto;
    }

    .pet-id {
        display: flex;
        gap: 10px;
    }

    .pet-id span {
        display: flex;
        gap: 4px;
        font-weight: 600;
        white-space: nowrap;
    }

    .add-new-client-wrapper.model-open {
        transform: translate(0%, 0);
    }

    .dropdown-menu.new-appointment-staff-dropdown.show {
        min-width: 250px;
        box-shadow: 0px 4px 10px 0px #0000001A;
        border: unset;
    }

    .new-appointment-staff-dropdown-person-detail {
        display: flex;
        gap: 8px;
    }

    .new-appointment-staff-dropdown-detail {
        display: flex;
        justify-content: space-between;
    }

    .new-appointment-staff-availability {
        color: #00B42A;
    }

    .staff-availability-not-available {
        color: #F53F3F;
    }

    button.dropdown-toggle.show {
        background-color: #fff;
        border: 1px solid var(--primary-color);


    }

    /* ======================================

        edit appointment model

    =========================================*/

    .bokking-id-robbon {
        padding: 8px 20px;
        background-color: #BBA677;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .bokking-id-detail {
        display: flex;
        gap: 10px;
    }

    .appointment-detail {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .bokking-id-number,
    .appointment-status-detail {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .appointment-status-heading,
    .bokking-id-heading {
        font-size: 14px;
    }

    .appointment-conformation-dropdown .dropdown-toggle {
        border: unset;
        padding: 5px 5px;
        border-radius: 8px;
        font-size: 14px;
        min-width: 154px;
        text-align: left;
        border: 1px solid transparent;
    }

    .appointment-conformation-dropdown .dropdown-menu.show {
        max-width: 154px;
    }

    .appointment-conformation-dropdown .dropdown-toggle img {
        right: 8px;
        position: absolute;
        top: 10px;
    }

    .appointment-conformation-dropdown .dropdown-toggle.show .dropdown-icon {
        transform: rotate(180deg);
    }

    .appointment-conformation-dropdown .dropdown-icon {
        transition: all 0.4s ease-in;
    }

    .text-in-red,
    .text-in-red:hover {
        color: #F53F3F;
    }

    .appointment-conformation-dropdown .dropdown-item:hover {

        background-color: transparent;
    }

    .clinet-detail-pet-breed {
        display: flex;
    }

    .clinet-detail-main-box {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .clinet-detail-main-box h5 {
        font-size: 14px;
        font-weight: 700;
        color: var(--secondary);
    }

    .clinet-detail-main-box p {
        font-size: 12px;
        font-weight: 400;
        color: #696969;
    }

    .clinet-detail-pet-img-box {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
    }

    .deposite-reminder-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .deposite-reminder-dropdown .dropdown-toggle {
        border: unset;
        width: 100%;
        min-width: 332px;
        min-height: 39px;
        border-radius: 8px;
        text-align: left;
        border: 1px solid transparent;
    }

    .deposite-reminder-dropdown .dropdown-icon {
        right: 15px;
        position: absolute;
        top: 14px;
    }

    .deposite-reminder-box .primary-btn {
        border-radius: 8px;
    }

    .modal-footer .primary-btn {
        border-radius: 8px;
    }


    /* ======================================

    cancel appointment model

    =========================================*/



    .appoinment-cancel-model-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .appoinment-cancelled .new-appointment-modal-dialog {
        max-width: 464px;
    }

    .appoinment-cancel-detail {
        text-align: center;
    }

    .appoinment-cancel-detail span {
        font-size: 14px;
        font-family: var(--font-medium);
        color: var(--secondary);
    }

    .appoinment-cancel-detail p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }


    /* ======================================

    refund deposit model

    =========================================*/


    .refund-deposite-model .new-appointment-modal-dialog {
        max-width: 520px;
    }

    .refund-deposite-inputfield-heading {
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
    }

    .refund-deposite-inputfield-heading h4 {
        font-size: 14px;
        font-weight: 600;
        color: var(--secondary);
    }

    .refund-deposite-inputfield-heading span {
        font-size: 16px;
        font-weight: 500;
        color: var(--secondary);
    }

    .refund-option-inputfield {
        position: relative;
    }

    .formfield.refund-option-inputfield img {
        position: absolute;
        top: 7px;
        right: 10px;
    }

    .refund-option-inputfield input:hover {
        border: 2px solid #21291D;
    }

    .refund-option-inputfield input {
        border: 2px solid transparent;
    }

    .demo-class {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
    }

    .reschedule-appointment-model .new-appointment-modal-dialog {
        max-width: 520px;
    }

    .reschedule-appointment-date-duration .new-appointment-service-time .dropdown-toggle,
    .reschedule-appointment-date-duration .new-appointment-service-time {
        width: 100%;

    }

    .reschedule-appointment-date-duration .new-appointment-service-duration .dropdown-toggle,
    .reschedule-appointment-date-duration .new-appointment-service-time {
        width: 100%;

    }

    .reschedule-appointment-date-duration .new-appointment-service-duration,
    .reschedule-appointment-date-duration .new-appointment-service-duration .dropdown-toggle {
        width: 100%;
    }

    .dropdown-icon-time {
        position: absolute;
        right: 12px;
        top: 10px;
    }

    .extra-spacing-top {
        margin-bottom: 30px;
    }

    .staff-shift-model-body ul li,
    .staff-shift-model-body ul li .nav-link {
        width: 100%;
    }

    .staff-shift-model-body .nav-tabs {
        display: flex;
        flex-wrap: nowrap;
    }

    .staff-shift-model-body .nav-tabs .nav-link.active {
        background-color: var(--primary-color);
        color: var(--secondary);
        padding: 8px 80px;
        font-family: var(--font-bold);
    }

    .staff-shift-model-body ul li:first-child .nav-link {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border: 1px solid #ccc;
        color: #696969;
    }

    .staff-shift-model-body ul li:last-child .nav-link {
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
        border: 1px solid #ccc;
        color: #696969;
    }

    .staff-shift-model-body .nav-tabs {
        border-bottom: unset;
    }

    .staff-shift-time-box {
        width: 100%;
    }

    .staff-shift-time-box .dropdown {
        width: 100%;
    }

    .staff-shift-time-box .dropdown .dropdown-toggle {
        width: 100%;
    }

    .staff-shift-time-calculation {
        width: 100%;
        max-width: 75px;
        display: flex;
        gap: 10px;
        align-items: center;
        margin-top: 10px;
    }

    .staff-shift-time-calculation i {
        font-size: 21px;
        cursor: pointer;
    }

    .staff-shift-time-calculation p {
        font-size: 16px;
        font-weight: 600;
        color: var(--secondary);
    }

    .staff-shift-time-calculation-display {
        font-size: 16px;
        font-family: var(--font-medium);
        color: var(--secondary);
        margin: 30px 30px 10px 0px;
        text-align: right;
    }

    .staff-shift-add-shift-btn {
        padding: 8px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--primary-color);
    }

    .staff-shift-regular-model-body .new-appointment-service-time .dropdown-toggle,
    .staff-shift-regular-model-body .new-appointment-service-duration .dropdown-toggle {
        width: 100%;
    }

    .regular-shift-time-table-box {
        display: flex;
        gap: 10px;
    }

    .regular-shift-time-table-start-time button.dropdown-toggle,
    .regular-shift-time-table-end-time button.dropdown-toggle {
        border: unset;
        height: 36px;
        border-radius: 8px;
        min-width: 141px;
        text-align: left;
    }

    .regular-shift-time-table-day {
        max-width: 116px;
        width: 100%;
    }

    .regular-shift-time-table-day .checkbox-form-feild label {
        font-size: 14px;
        font-family: var(--font-bold);
        color: var(--secondary);
    }



    /* ======================================

    subscription plan page start

    =========================================*/




    .subscription-plan-right-menu-content {
        max-width: 864px;
        /* padding-bottom: 60px; */
    }

    .subscription-plan-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .subscription-plan-heading-with-previous-btn {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .subscription-plan-heading-with-previous-btn h2 {
        font-size: 24px;
        font-family: var(--font-bold);
        color: var(--secondary);
    }

    .subscription-plan-cross-icon {
        cursor: pointer;
    }

    .find-plan-heading {
        margin-top: 48px;
        text-align: center;
    }

    .find-plan-heading h3 {
        font-size: 24px;
        font-family: var(--font-bold);
        color: var(--secondary);
        margin-bottom: 16px;
    }

    .find-plan-heading p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: var(--secondary);
    }

    .subscription-plan-tab .nav-tabs {
        justify-content: center;
    }

    .subscription-plan-tab .nav-tabs .nav-link.active {
        padding: 0.5rem 1rem;
        border: unset;
    }

    .subscription-plan-tab .nav-tabs .nav-link:hover,
    .subscription-plan-tab .nav-tabs {
        border: unset;
    }

    .subscription-plan-tab .nav-tabs .nav-links {
        border: unset;
        background-color: transparent;
    }

    .subscription-plan-tab {
        margin-top: 32px;
    }

    .subscription-plan-tab .tab-content {
        margin-top: 36px;
    }

    .subscription-plan-card-box {
        padding: 16px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: 424px;
        border-radius: 20px;
        border: 2px solid #EBEBEB;
        transition: all 0.4s ease-in;
        position: relative;
    }

    .subscription-plan-card-box:hover {
        border: 2px solid var(--primary-color);
    }

    .subscription-plan-card-type {
        display: flex;
        justify-content: space-between;
    }

    .subscription-plan-card-type h4 {
        font-size: 24px;
    }

    .subscription-plan-card-type .inline-checkbox {
        width: unset;
    }

    .subscription-plan-pricing {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .subscription-plan-pricing h3 {
        font-size: 56px;
        font-family: var(--font-bold);
        color: var(--secondary);
    }

    .subscription-plan-description {
        color: #9C9C9C;
    }

    .subscription-plan-pricing p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .subscription-plan-benifits h4 {
        /* margin-bottom: 4px; */
        font-size: 16px;
        font-family: var(--font-bold);
        color: var(--secondary);
    }

    .subscription-plan-benifits-list li {
        margin-top: 4px;
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .subscription-plan-benifits {
        padding-bottom: 30px;
    }

    .extra-light-btn {
        border-radius: 8px;
        background-color: #F4F6F2;
        color: var(--primary-color);
    }

    .subscription-plan-card-box-wrapper {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    .recomended-tag {
        position: absolute;
        background-color: var(--primary-color);
        border-radius: 20px;
        padding: 3px 8px;
        max-width: 117px;
        top: -13px;
        left: 149px;
    }

    .recomended-tag p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: var(--secondary);
    }

    .subscription-plan-primary-btn {
        max-width: 142px;
        border-radius: 8px;
        margin: 0 auto;
    }

    .subscription-plan-table-wrapper {
        margin-top: 36px;
    }

    .subscription-plan-table-wrapper .staff-member-service-table tr:first-child th:first-child {
        border-top-left-radius: unset !important;
    }

    .subscription-plan-table-wrapper .staff-member-service-table tr th:first-child,
    .subscription-plan-table-wrapper .staff-member-service-table tr td:first-child {
        border-left: unset !important;
    }

    .subscription-plan-table-wrapper .staff-member-service-table tr:first-child th:last-child {
        border-top-right-radius: unset !important;
    }

    .subscription-plan-table-wrapper .staff-member-service-table tr th:last-child,
    .subscription-plan-table-wrapper .staff-member-service-table tr td:last-child {
        border-right: unset !important;
    }

    .subscription-plan-table-wrapper .staff-member-service-table tr th,
    .subscription-plan-table-wrapper .staff-member-service-table tr td {
        font-size: 14px;
        font-family: var(--font-medium);
        color: var(--secondary);
    }

    .subscription-plan-table-wrapper .staff-member-service-table tr:first-child {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .subscription-plan-table-wrapper .staff-member-service-table tr:last-child {
        font-weight: 700;
        font-size: 14px;
    }

    .subscription-plan-table-wrapper .staff-member-service-table tr:last-child td {
        border-bottom: unset;
    }

    .subscription-plan-term-condition {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #696969;
        margin-top: 16px;
    }

    .subscription-plan-pricing-heading span {
        font-size: 24px;
        font-weight: 700;
    }

    .subscription-plan-pricing-heading {
        display: flex;
    }

    .conform-plan-billing-cycle-type {
        display: flex;
        gap: 16px;
    }

    .billing-summary-pro-plan {
        display: flex;
        justify-content: space-between;
        padding-bottom: 10px;
        border-bottom: 1px solid #EBEBEB;
    }

    .billing-summary-total-due {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
    }

    .billing-summary-total-due h4 {
        font-size: 16px;
        font-weight: 700;
    }

    .billing-summary-total-due span {
        font-size: 14px;
        font-weight: 600;
        color: #9C9C9C;
    }


    .payment-method-model-body {
        padding: 24px 20px;
        overflow: auto;
        height: 100%;
        height: 80vh;
    }

    .thank-you-model-wrapper {
        padding: 24px 32px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .thank-you-model-centered {
        max-width: 464px;
    }

    .thank-you-model-wrapper h4 {
        font-size: 24px;
        font-family: var(--font-bold);
        color: var(--secondary);
    }

    .thank-you-model-wrapper p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: var(--secondary);
    }

    .upgrade-to-pro-centered {
        max-width: 520px;
    }

    .upgrade-to-pro-centered .modal-content {
        background-color: var(--primary-color);
    }

    .upgrade-to-pro-wrapper .radio-box-btns input[type="radio"]:checked+label:after {
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        border: 4px solid #000000;
    }

    .upgrade-to-pro-wrapper .subscription-plan-pricing-para p {
        color: var(--secondary);
    }

    .upgrade-to-pro-wrapper .radio-formfeild label {
        color: var(--secondary);
        font-size: 14px;
        font-weight: 700;
    }

    .free-days {
        color: #fff !important;
    }

    .edit-appointment-arrived-model .deposite-reminder-dropdown .dropdown-toggle {
        border: unset;
        width: 100%;
        min-width: 391px;
        min-height: 39px;
        border-radius: 8px;
        text-align: left;
        border: 1px solid transparent;
    }

    .new-appointment-message-box p {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .new-appointment-arrival-reference {
        margin-top: 10px;
    }

    .new-appointment-arrival-reference h3 {
        margin-bottom: 10px;
    }

    .new-appointment-arrival-reference-img-box img {
        width: 40px;
        height: 60px;
    }

    .after-and-before-reference {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .before-reference-img-box {
        display: flex;
        gap: 8px;
        margin-top: 8px;
    }

    .before-reference-wrapper h5,
    .after-reference-wrapper h5 {
        font-size: 12px;
        font-family: var(--font-medium);
        color: var(--secondary);
    }

    .upload-reference-img {
        width: 40px;
        height: 60px;
        background-color: #F2F3F5;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .upload-reference-img-box input {
        display: none;
    }

    .billing-indicator-show {
        /* background-color: green; */
        transform: translateY(160px);
    }

    .billing-indicator-show .new-appointment-billing-indicator-icon-box {
        transform: rotate(180deg);
    }

    .new-appointment-arrival-reference-img-box {
        height: 60px;
        position: relative;
        max-width: 40px;
    }

    .new-appointment-arrival-reference-img-box:hover img {
        filter: brightness(0.5);
    }

    .new-appointment-arrival-reference-img-box:hover .view-img-icon {
        position: absolute;
        top: 21px;
        width: 20px !important;
        left: 13px;
        height: 15px !important;
        display: block;
    }

    .view-img-icon {
        display: none;
    }

    .edit-photo-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .edit-photo-wrapper img {
        width: 100%;
        max-width: 317px;
        max-height: 465px;
    }

    .edit-photo-del-btn {
        padding: 7px 20px;
    }

    .before-reference-img-box .new-appointment-arrival-reference-img-box,
    .after-reference-img-box .new-appointment-arrival-reference-img-box {
        cursor: pointer;
    }

    /* ======================

        service-detail-page

    =========================*/

    .service-form-box.Behavioural-charge-switch-box {
        padding-top: 40px;
        border-top: 1px solid #EBEBEB;
    }

    .service-form-pricing-varient {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 0.3fr;
        gap: 10px;
        /* align-items: center; */
    }

    .service-form-breedbox-main {
        display: flex;
        align-items: flex-start;
    }

    .service-form-breedbox-main .service-form-pricing-edit-breed {
        margin-top: 30px;
    }

    .service-form-pricing-varient-breed-box {
        width: 100%;
    }

    a.service-form-pricing-edit-breed {
        padding: 5px 16px;
        font-size: 14px;
        font-weight: 600;
        color: var(--primary-color);
        min-width: 109px;
    }

    .service-details-save-btn {
        max-width: 119px;
        width: 100%;
        border-radius: 8px;
    }

    .staff-member-inner-heading h5,
    .staff-member-commission h5 {
        font-size: 14px;
        font-family: var(--font-bold);
        color: var(--secondary);
        text-align: left;
    }

    .staff-member-commission-switch {
        text-align: left;
        margin-top: 10px;
        position: relative;
    }

    .staff-member-commission span {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #9C9C9C;
        position: absolute;
        left: 0;
        top: 24px;
    }

    .staff-member-inner-heading .inline-checkbox {
        display: inline-flex;
        gap: 16px;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 16px;
    }

    .modal-content.breed-content {
        min-width: 520px;
        width: 100%;
    }

    .breed-type-box {
        max-width: 480px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border: 2px solid #EBEBEB;
        border-radius: 8px;
    }

    .breed-type-box-inner {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .breed-type-box p {
        width: 100%;
        font-size: 12px;
        color: #9C9C9C;
        margin-top: 16px;
    }

    .db-popup-body.breed-model-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .breed-type-box h5 {
        font-size: 16px;
        font-family: var(--font-medium);
        color: var(--secondary);
    }

    .breed-type-box:hover {
        border: 2px solid #21291D;
    }

    .add-options-box {
        cursor: pointer;
        max-width: 150px;
        width: 100%;
    }

    .breed-type-box a {
        font-size: 16px;
        font-family: var(--font-medium);
    }

    button.dropdown-toggle {
        border: unset;
        height: 36px;
        border-radius: 8px;
        width: 100%;
        text-align: left;
        border: 1px solid transparent;
    }

    .breed-edit-dropdown-box .dropdown-menu.show {
        width: 100%;
        position: unset !important;
        transform: unset !important;
        margin-top: 15px !important;
        box-shadow: 0px 4px 10px 0px #0000001A;
        border: 1px solid #EBEBEB;
        border-radius: 4px;
    }

    .breed-edit-dropdown-box .dropdown-icon {
        position: absolute;
        right: 15px;
        top: 11px;
    }

    .breed-edit-dropdown-menu {
        padding: 10px;
        height: 276px;
        overflow-y: auto;
    }

    .breed-edit-types {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .breed-edit-types ul.breed-edit-types-list {
        max-width: 240px;
        width: 100%;
    }

    .breed-save-btn {
        border-radius: 8px;
    }

    .breed-save-btn-box {
        display: flex;
        justify-content: flex-end;
    }

    .breed-back-icon {
        position: absolute;
    }

    .breed-type-box span {
        color: #9C9C9C;
    }

    .breed-edit-dropdown-box button.dropdown-toggle.show img {
        transform: rotate(180deg);
    }

    ul.breed-edit-types-list li {
        margin-bottom: 7px;
    }


    /* ======================================

        calender business hours page start

    ==========================================*/

    .dashboard-heading-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 36px;
    }

    .dashboard-heading-box h2 {
        font-size: 24px;
        font-family: var(--font-bold);
        color: var(--secondary);
    }

    .dashboard-heading-btn {
        min-width: 119px;
        border-radius: 8px;
    }

    .dashboard-content-box {
        text-align: center;
        padding: 20px 48px;
        border-radius: 8px;
        border: 1px solid #EBEBEB;
    }

    .dashboard-content-box h3 {
        font-size: 24px;
        font-family: var(--font-bold);
        text-align: center;
        margin-bottom: 12px;

    }

    .wekkly-days-hours {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 12px;
    }

    .wekkly-business-days {
        min-width: 120px;
        background-color: var(--primary-color);
        color: #000;
        padding: 7px;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
    }

    .wekkly-off-business-days {
        background-color: #F2F3F5;
    }

    .wekkly-off-business-days p {
        color: #D4D4D4;
    }

    .wekkly-off-days-hours .wekkly-days-hours-input {
        opacity: 0.6;
    }

    input.wekkly-days-hours-input {
        max-width: 360px;
        width: 100%;
        border: none;
        background-color: #F2F3F5;
        min-height: 36px;
        padding: 7px 12px;
        border-radius: 8px;
    }

    a.wekkly-days-hours-add-btn {
        padding: 11px 6px;
        font-size: 14px;
        font-family: var(--font-bold);
        color: var(--primary-color);
        display: flex;
        gap: 8px;
        align-items: center;
        width: fit-content;
    }

    .closed-period-content-box p {
        text-align: center;
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .closed-period-boxs {
        padding: 12px;
        border-radius: 8px;
        border: 1px solid #EBEBEB;
    }

    .closed-period-time {
        display: flex;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    .closed-period-reason {
        margin-bottom: 10px;
    }

    .closed-period-boxs-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .closed-bagde {
        padding: 1px 8px;
        background-color: #FFECE8;
        border-radius: 2px;
    }

    .closed-bagde span {
        color: #F53F3F;
    }

    .closed-period-boxs-heading img {
        cursor: pointer;
    }

    .closed-period-time-date span {
        color: #9C9C9C;
    }

    /* =================================

        Calander page Start


    ===================================*/

    .table-main-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .table-main-heading-accounts {
        display: flex;
        align-items: center;
        gap: 8px;
        max-width: 500px;
        overflow: auto;
        padding-bottom: 6px;
    }

    .table-main-box-wrapper {
        border-radius: 8px;
        border: 1px solid #EBEBEB;

    }

    .calender-data-main {
        display: flex;
        justify-content: space-between;
        padding: 24px;
    }

    .calender-data-date {
        display: flex;
        gap: 20px;
    }

    .alender-data-date-weekly-box {
        display: flex;
        gap: 8px;
        background-color: #F2F3F5;
        padding: 7px 38px 7px 20px;
        /* margin-right: 32px; */
        border-radius: 8px;
        position: relative;
    }

    .alender-data-date-weekly-box img {
        position: absolute;
        right: 10px;
        top: 12px;
    }

    .calender-data-date-days {
        display: flex;
        gap: 8px;
    }

    .calender-data-date-day-box {
        background-color: #F2F3F5;
        padding: 7px 20px;
        border-radius: 8px;
    }

    .calender-data-date-7-day-box {
        background-color: #F2F3F5;
        padding: 7px 20px;
        border-radius: 8px;
    }

    .calender-data-day-tabs {
        min-width: 183px;
        display: flex;
        background-color: #F2F3F5;
        border-radius: 8px;
        padding: 4px;
        gap: 1px;
        position: relative;
    }

    .day-tabs-inner {
        padding: 4px 12px;
        display: flex;
        align-items: center;
        border-radius: 8px;
        cursor: pointer;
        background-color: #f2f3f5;
        border: none;
        width: 100%;
        min-width: 175px;
    }

    .day-tabs-inner:focus-visible {
        outline: none;
    }

    /*
    .day-tabs-inner.active,
    .day-tabs-inner:hover {
        background-color: #fff;
    } */

    .calender-weekly-day-wrapper {
        min-height: 90px;
        display: flex;
        justify-content: space-around;
    }

    .calender-slider-arrow-box {
        max-width: 80px;
        width: 100%;
    }

    .calender-weekly-day {
        max-width: 125px;
        width: 100%;
        padding: 10px;
    }

    .calender-weekly-day h2 {
        font-size: 24px;
        font-family: var(--font-bold);
        color: var(--secondary);
    }

    .calender-weekly-day-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        border-radius: 8px;
    }

    .calender-weekly-day-content.active,
    .calender-weekly-day-content:hover {
        background-color: var(--primary-color);
        cursor: pointer;
    }


    .slick-slider .element {

        /* width:100px; */
        width: 958px;
        background-color: #fff;
        /* color:#fff; */
        border-radius: 5px;
        display: inline-block;
        margin: 0px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 20px;
    }

    .slick-slider .slick-disabled {
        opacity: 0;
        pointer-events: none;
    }

    .calender-table {
        width: 100%;
    }

    .calender-table td {
        border: 1px solid #EBEBEB;
        /* max-width: 125px; */
        width: 125px;
        height: 73px;
        position: relative;
    }

    .calender-table td:first-child {
        width: 80px;
        border: unset;
    }

    .table-data-inner-div {
        height: 18.60px;
        border-bottom: 0.5px solid #EBEBEB;
        position: relative;
    }

    .table-data-inner-div .time-display:first-child {
        right: 30px;
    }

    .table-data-inner-div .time-display {
        display: flex;
        height: unset;
        overflow: unset;
        position: absolute;
        bottom: auto;
        right: 0px !important;
        left: auto;
    }

    .table-data-inner-div .small-time-box {
        font-size: 10px;
        font-family: var(--font-medium);
        display: none;
        /* padding: 0.2px 8px; */
    }

    .table-data-inner-div:hover {
        background-color: #D5DCCC;
    }

    .table-data-inner-div:hover p {
        display: block;
    }

    .table-data-inner-div:last-child {
        border-bottom: unset;
    }

    .calender-table-per-day-time {
        display: flex;
        height: 100%;
        width: 100%;
        /* justify-content: flex-end; */
    }

    .calender-slider-arrow-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .calender-slider-arrow {
        display: flex;
        gap: 10px;
    }

    #cms-slider-right img {
        transform: rotate(180deg);
        cursor: pointer;
    }

    #cms-slider-left img {
        cursor: pointer;
    }

    .table-appointment {
        /* position: absolute; */
        /* width: 100%; */
        height: 80%;
        /* background-color: #E8F7FF; */
        z-index: 1;
        bottom: 0;
        border-radius: 4px;
        padding: 4px;
        cursor: pointer;

    }

    .time-display {
        display: flex;
        /* height: 65%; */
        /* overflow: hidden; */
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .calender-appointment-detail-bar {
        height: 54px;
        width: 4px;
        border-radius: 2px;
        background-color: #3491FA;
    }

    .calender-appointment-detail-content h4 {
        font-size: 10px;
        font-family: var(--font-bold);
    }

    .calender-appointment-detail-content h5 {
        font-size: 10px;
        font-family: var(--font-medium);
    }

    .calender-appointment-detail-content p {
        font-size: 8px;
        font-weight: 400;
    }

    .calender-appointment-detail-wrapper {
        display: flex;
        gap: 4px;
        height: 110%;
    }

    .appointment-detail-wrapper-inner {
        display: flex;
        gap: 4px;
        overflow: hidden;
        /* height: 50%; */
    }

    .table-appointment-yellow {
        background-color: #FFF7E8;
        height: 54%;
    }

    .table-appointment-yellow .calender-appointment-detail-bar {
        background-color: #FF7D00;
        height: 34px;
    }

    .table-appointment-green {
        background-color: #E8FFFB;
        /* height: 51%; */
        /* overflow: hidden; */
    }

    .table-appointment-green .calender-appointment-detail-bar {
        background-color: #0FC6C2;
        height: 34px;
    }

    .table-appointment-gray .calender-appointment-detail-wrapper {
        display: block;
    }

    .table-appointment-gray .calender-appointment-detail-wrapper p {
        font-size: 12px;
        font-family: var(--font-medium);
    }

    .table-appointment-gray {
        background-color: #F2F3F5;
        height: 62%;
    }

    .calender-appointment-detail-wrapper {
        position: relative;
        transform: translateZ(0);
        /* webkit flicker fix */
        -webkit-font-smoothing: antialiased;
        /* webkit text rendering fix */
    }

    /* .wrapper {
        position: relative;
        -webkit-transform: translateZ(0);
        -webkit-font-smoothing: antialiased;
        } */

    .tooltip {
        background: #fff;
        bottom: 100%;
        border-radius: 8px;
        color: #fff;
        display: block;
        left: -75px;
        margin-bottom: 15px;
        opacity: 0;
        padding: 10px;
        pointer-events: none;
        position: absolute;
        width: 100%;
        min-width: 261px;
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px);
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
        -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
    }

    /* This bridges the gap so you can mouse into the tooltip without it disappearing */
    .tooltip:before {
        bottom: -20px;
        content: " ";
        display: block;
        height: 20px;
        left: 0;
        position: absolute;
        width: 100%;
    }

    /* CSS Triangles - see Trevor's post */
    .tooltip:after {
        border-left: solid transparent 10px;
        border-right: solid transparent 10px;
        border-top: solid #fff 10px;
        bottom: -10px;
        content: " ";
        height: 0;
        left: 50%;
        margin-left: -13px;
        position: absolute;
        width: 0;
    }

    .calender-appointment-detail-wrapper:hover .tooltip {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    .tooltip-appointment-detail h5, .tooltip-appointment-pricing h5, .tooltip-appointment-service-provider h5 {
        font-size: 16px;
    }
    .tooltip-appointment-service-provider, .tooltip-appointment-detail-service {
        display: flex;
        gap: 5px;
        margin-top: 5px;
        align-items: center;
        flex-wrap: wrap;
    }
    /* IE can just show/hide with no transition */
    .lte8 .wrapper .tooltip {
        display: none;
    }

    .lte8 .wrapper:hover .tooltip {
        display: block;
    }

    .tooltip-profile-data h5 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .tooltip-profile-data p {
        font-size: 10px;
        font-family: var(--font-medium);
        color: #696969;
    }

    .unconfirmed-badge {
        background-color: #F2F3F5;
        padding: 0px 8px;
    }

    .unconfirmed-badge p {
        font-size: 12px;
        font-family: var(--font-medium);
    }

    .tooltip-profile-wrapper {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
    }

    .tooltip-pet-images {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 10px;
        gap: 10px;
    }

    .tooltip-divider {
        width: 100%;
        height: 1px;
        background-color: #EBEBEB;
        margin: 10px 0px
    }

    .tooltip-appoitment-detail-service {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .tooltip-appoitment-detail-inner p {
        font-size: 12px;
        font-weight: 400;
        color: #696969;
    }

    .tooltip-appoitment-detail-service h5 {
        font-size: 14px;
    }

    .tooltip-appoitment-pricing h5 {
        font-size: 14px;
        font-family: var(--font-bold);
        white-space: nowrap;
    }

    .tooltip-appoitment-detail {
        display: flex;
        align-items: flex-end;
    }

    .tooltip-appoitment-service-provider {
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 8px 0px;
    }

    .tooltip-bar {
        height: 24px;
        width: 4px;
        border-radius: 2px;
        background-color: #0FC6C2;
    }

    .tooltip-appoitment-service-provider h5 {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    /* =================================

        calender-working-hours page start

    ===================================*/

    .calender-working-hours-right-menu-content {
        max-width: 100%;
        padding: 20px;
    }

    .dark-btn {
        background-color: #21291D;
        min-width: 58px;
    }

    .table-main-heading .inline-checkbox {
        width: unset;
    }

    .table-main-heading .calender-add-btn {
        border-radius: 8px;
    }

    .dark-btn:hover {
        color: #fff;
    }

    .calender-working-hours-right-menu-content .calender-data-main {
        justify-content: end;
    }

    .working-hours-week-day {
        max-width: 185px;
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .working-hours-week-day:first-child {
        max-width: 174px;
        width: 100%;
    }

    .working-hours-week-days {
        display: flex;
        justify-content: center;
    }

    .weekly-work-schedule {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
    }

    .weekly-work-schedule-box {
        max-width: 185px;
        /* height: 200px; */
        width: 100%;
        border: 1px solid #EBEBEB;
        padding: 10px;
        position: relative;
    }

    .weekly-work-schedule-morning p {
        font-size: 13px;
    }

    .weekly-work-schedule-lunch p {
        font-size: 13px;
    }

    .weekly-work-schedule-box-profile-content h5 {
        font-size: 16px;
    }

    .weekly-work-schedule-box:first-child {
        max-width: 174px;
        width: 100%;
        border: unset;
        padding: unset;
    }

    .weekly-work-schedule-box-profile {
        max-width: 166px;
        background-color: #F7F8FA;
        border-radius: 8px;
        padding: 12px 10px;
    }

    .weekly-work-schedule-box-profile-heading {
        display: flex;
        justify-content: space-between;
    }

    .weekly-work-schedule-box-profile-box {
        display: flex;
        margin-top: 70px;
        align-items: flex-start;
        gap: 4px;
    }

    .weekly-work-schedule-box-profile-content p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;

    }

    .weekly-work-schedule-annual-leave {
        /* max-width: 128px; */
        background-color: #d7d8da;
        background-image: url(../images/line-background.png);
        padding: 10px 10px;
        border-radius: 8px;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .weekly-work-schedule-annual-leave h5 {
        font-size: 16px;
        font-family: var(--font-medium);
        margin-bottom: 16px;
    }

    .weekly-work-schedule-annual-leave p {
        font-size: 14px;
        font-family: var(--font-medium);
        /* margin-bottom: 16px; */
    }

    .weekly-work-schedule-morning,
    .weekly-work-schedule-evening {
        padding: 10px 10px 12px 10px;
        background-color: #D5DCCC;
        border-radius: 8px;
    }

    .weekly-work-schedule-lunch {
        padding: 2px 8px;
        background-color: #F4F6F2;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .weekly-work-schedule-lunch p {
        color: var(--primary-color);
    }

    .weekly-work-schedule-morning {
        margin-bottom: 10px;
    }

    .empty-schedule-box:hover {
        background-color: #EBEBEB;
    }

    .add-shift-icon {
        position: absolute;
        left: 42%;
        top: 68px;
        display: none;
        cursor: pointer;
    }

    .empty-schedule-box:hover .add-shift-icon {
        display: block;
    }

    .weekly-work-schedule-box-profile .dropdown .dropdown-menu li:last-child a {
        color: #F53F3F;
    }

    .weekly-work-schedule-box-profile .dropdown .dropdown-menu {
        min-width: 139px;
        width: 100%;
    }

    .empty-schedule-box .dropdown {
        position: unset;
    }

    .empty-schedule-box .dropdown .dropdown-menu {
        transform: translate(-32px, 107px) !important;
    }

    /* ===============================

        client-page start

    ==================================*/

    .client-list-right-menu-content {
        max-width: 959px;
        margin: 0px auto;

    }

    .client-list-main-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 48px;
    }

    .client-list-main-heading h2 {
        font-size: 24px;
        font-family: var(--font-bold);
    }

    .client-list-main-content-box {
        max-width: 863px;
        margin: 48px auto 0px;
    }

    .client-member-list {
        display: flex;
        gap: 4px;
        align-items: center;
        margin-bottom: 16px;
    }

    .member-number {
        padding: 1px 8px;
        border: 1px solid #EBEBEB;
        border-radius: 8px;
    }

    .client-list-filter-by {
        margin-top: 16px;
    }

    .client-list-filter-dropdown-box {
        display: flex;
        gap: 12px;
        margin: 16px 0px;
    }

    .client-list-table table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 857px;
        width: unset;
        height: 100%;
        min-height: 155px;
    }

    .client-list-table {
        overflow: auto;
    }

    .client-list-table table tr:first-child th:first-child {
        border-top-left-radius: 6px;
    }

    .client-list-table table tr th:first-child,
    .client-list-table table tr td:first-child {
        border-left: 1px solid #bbb;
    }

    .client-list-table table tr:first-child th:last-child {
        border-top-right-radius: 6px;
    }

    .client-list-table table tr th {
        border-top: 1px solid #bbb;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
        color: #9C9C9C;
        background-color: #F7F8FA;
    }

    .client-list-table table tr th,
    .client-list-table table tr td {
        /* border-right: 1px solid #bbb; */
        border-bottom: 1px solid #bbb;
        padding: 7px 0px 7px 20px;
        text-align: left;
    }

    .client-list-table table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }

    .client-list-table table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }

    .client-list-table table tr th:last-child,
    .client-list-table table tr td:last-child {
        border-right: 1px solid #bbb;
        cursor: pointer;
    }

    .pet-name-with-icon {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .pet-name-with-icon p {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .client-table-profile-box {
        position: relative;
    }

    .client-table-profile-box img {
        border-radius: 50px;
    }

    .client-table-profile-box .file.file--upload {
        position: absolute;
        top: 19px;
        left: 29px;
    }

    .client-table-profile-box .camera-box {
        background-color: #F7F8FA;
    }

    .client-badgee {
        padding: 0px 8px;
        background-color: #FFF3E8;
        border-radius: 8px;
        color: #F77234;
        font-size: 12px;
        font-family: var(--font-medium);
    }

    .table-client-name {
        display: flex;
        gap: 8px;
    }

    .table-client-name h5 {
        font-size: 14px;
        font-weight: 400;
    }

    .table-client-info span {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .client-list-filter-dropdown-box .dropdown .dropdown-toggle {
        min-width: 212px;

        background-color: #F2F3F5;
        border-radius: 50px;
        justify-content: start;
        color: var(--secondary);
        position: relative;
        font-size: 14px;
    }

    .client-list-filter-dropdown-box .dropdown .dropdown-toggle:hover,
    .client-list-filter-dropdown-box .dropdown .dropdown-toggle.active {
        background-color: var(--primary-color);
    }

    .client-list-filter-dropdown-box .dropdown .dropdown-toggle:hover:before,
    .client-list-filter-dropdown-box .dropdown .dropdown-toggle.active:before {
        background-color: #788666;
    }

    .client-list-filter-dropdown-box .dropdown .dropdown-toggle:before {
        content: ' ';
        height: 33px;
        width: 1px;
        background-color: #EBEBEB;
        top: 1px;
        right: 36px;
        position: absolute;
    }

    .client-list-filter-dropdown-box .dropdown .dropdown-toggle i {
        position: absolute;
        right: 12px;
        color: var(--secondary);
        transition: all 0.4s ease-in-out;
    }

    .client-list-filter-dropdown-box .dropdown .dropdown-toggle.show i {
        transform: rotate(180deg);
    }

    .client-appoitment-main-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 48px;
    }

    .client-appoitment-main-heading .service-block-heading {
        padding: 16px 0px;
    }

    .client-appoitment-main-wrapper {
        padding: 0px 48px;
        margin-top: 32px;
    }

    .client-appoitment-main-wrapper .new-appointment-model-wrapper .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        color: #495057;
        background-color: #fff;
        border: unset;
        padding: 6px 20px;
    }

    .client-appoitment-main-wrapper .nav-tabs .nav-link:focus,
    .client-appoitment-main-wrapper .nav-tabs .nav-link:hover {
        border: unset !important;
        isolation: isolate;
        border-bottom: 3px solid transparent !important;

    }

    .client-Appointments-tab-content .accordion {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .client-Appointments-tab-content .accordion .accordion-item {
        border: unset;
    }

    .client-Appointments-tab-content .accordion .accordion-item .accordion-button {
        border-radius: 8px !important;
        background-color: #F2F3F5;
        height: 32px;

    }

    .client-Appointments-tab-content .accordion .accordion-item .accordion-button:not(.collapsed) {
        color: unset;
        box-shadow: unset;
    }

    .client-Appointments-tab-content .accordion .accordion-body {
        padding: 16px;
    }

    .upcoming-appointment-detail {
        display: flex;
    }

    .upcoming-appointment-date {
        max-width: 150px;
        width: 100%;
    }

    .upcoming-appointment-date p,
    .upcoming-appointment-info p {
        font-size: 13px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .upcoming-appointment-info {
        max-width: 282px;
        width: 100%;
        padding: 5px;
    }

    .upcoming-appointment-info h6 {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .upcoming-appointment-pet,
    .upcoming-appointment-pricing {
        max-width: 150px;
        width: 100%;
    }

    .upcoming-appointment-pricing p {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .upcoming-appointment-info-box:first-child,
    .upcoming-appointment-confirmation-badge:first-child {
        margin-bottom: 8px;
    }

    .upcoming-appointment-confirmation-badge {
        padding: 0px 8px;
        background-color: #E8FFEA;
        border-radius: 8px;
        font-size: 12px;
        font-family: var(--font-medium);
        color: #00B42A;
    }

    .upcoming-appointment-confirmation-badge.cancelled {
        background-color: #FFECE8;
        color: #F53F3F;
        font-size: 11px;
    }

    .upcoming-appointment-confirmation-badge.gray {
        background-color: #F2F3F5;
        color: #000;
    }

    .upcoming-appointment-reference {
        padding: 16px 20px;
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        margin-top: 8px;
    }

    .upcoming-appointment-notes-reference-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .upcoming-appointment-notes-content {
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .upcoming-appointment-notes-content img {
        padding-top: 3px;
    }

    .upcoming-appointment-notes-content p {
        font-size: 12px;
        font-family: var(--font-medium);
    }

    .upcoming-appointment-notes h5,
    .upcoming-appointment-references h5,
    .before-after-reference-box h5 {
        margin-bottom: 8px;
        font-size: 14px;

    }

    .edit-appoitment-box {
        margin-top: 8px;
        display: flex;
        justify-content: flex-end;
    }

    .edit-appoitment-box a {
        padding: 5px 16px;
    }

    .edit-appoitment-box {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .divider {
        height: 1px;
        width: 100%;
        background-color: #EBEBEB;
        margin: 8px 0px 16px 0px;
    }

    .Appointment-details--model-body {
        padding: 24px 20px;

    }

    .Appointment-details--model-body h5 {
        font-size: 14px;
        font-family: var(--font-bold);
        margin-bottom: 8px;
    }

    .Appointment-details-main-box {
        padding: 10px 20px;
        border: 1px solid #EBEBEB;
        border-radius: 8px;
    }

    .Appointment-details-id-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .Appointment-details-id h5 {
        font-size: 14px;
        font-family: var(--font-bold);
        margin-bottom: 0px;
    }

    .Appointment-details-id p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .upcoming-appointment-biling-list li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        gap: 20px;
    }

    .upcoming-appointment-biling-list li span {
        font-size: 14px;
        font-family: var(--font-bold);
        color: #9C9C9C;
        white-space: nowrap
    }

    .upcoming-appointment-biling-list li h6 {
        font-size: 14px;
        font-family: var(--font-bold);
        color: var(--secondary);
    }

    .upcoming-appointment-biling-list li:first-child h6 {
        color: var(--primary-color);
    }

    .upcoming-appointment-item-amount li {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .upcoming-appointment-item-amount li:first-child span {
        font-size: 14px;
        font-family: var(--font-bold);
        color: #9C9C9C;
    }

    .upcoming-appointment-item-amount-left h6 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .upcoming-appointment-item-amount-left span {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .upcoming-appointment-item-amount li {
        margin-bottom: 10px;
    }

    .upcoming-appointment-item-amount li h6 {
        font-size: 14px;
        font-family: var(--font-bold);
        min-width: 50px;
        /* color: #9C9C9C; */
    }

    .upcoming-appointment-item-amount-left {
        /* max-width: 300px; */
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .prize-and-detail {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 50px;
    }

    .prize-and-detail p {
        font-size: 12px;
    }

    .Appointment-details-model-content {
        min-width: 520px;
    }

    .upcoming-appointment-balance li {
        display: flex;
        justify-content: space-between;
    }

    .upcoming-appointment-balance li h5 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .upcoming-appointment-main-btns {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 16px 0px;
    }

    .upcoming-appointment-main-btns .green-outline-btn {
        gap: 8px;
    }

    .Client-details-box h2 {
        margin: 16px 0px;
        font-size: 16px;
    }

    .Client-details-owner-info h3 {
        font-size: 16px;
        font-family: var(--font-bold);
    }

    .Client-details-owner-info p {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .Client-details-box .basic-inf-box {
        margin: 16px 0px;
    }

    .Client-details-box {
        margin-top: 32px;
    }

    .Client-details-box:first-child {
        margin-top: unset;
    }

    .pet-detail-box {
        padding: 0px;
    }

    .new-client-pet-textarea-desclaimer {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #9C9C9C;
        /* text-align: left; */
        position: absolute;
        top: 67px;
        left: 0;
    }

    .new-client-pet-info .service-form-box .new-client-pet-textarea-desclaimer {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #9C9C9C;
        /* text-align: left; */
        position: absolute;
        top: 72px;
        left: 0;
    }

    .red-color-btn {
        color: #F53F3F;
    }

    .visa-info-box h5 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .visa-info-box p {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .visa-info-box span {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .payment-method-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .payment-visa-method-box {
        display: flex;
        gap: 10px;
    }

    .visa-info-box {
        text-align: left;
    }

    .client-detail-notification-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .notification-switch {
        text-align: left;
    }

    .notification-switch h3 {
        margin-bottom: 8px;
    }

    .client-appoitment-main-heading-btns {
        display: flex;
        gap: 10px;
        align-items: center;
        margin: 10px 0px;
        justify-content: flex-end;
    }

    .client-appoitment-main-heading-btns a:last-child {
        min-width: 119px;
        border-radius: 8px;
    }

    .block-btn {
        color: #9cac86;
        padding: 7px 20px;
    }

    .client-appoitment-delete-btn {
        padding: 7px 20px;
    }

    .block-btn:hover {
        color: #9cac86;
    }

    .block-client-model-body .basic-inf-box .dropdown .dropdown-icon {
        position: absolute;
        top: 12px;
        right: 10px;
        transition: all 0.4s ease-in-out;
    }

    .block-client-model-body .basic-inf-box .dropdown .dropdown-toggle.show {
        background-color: #fff;
        border: 1px solid #97A880;
    }

    .block-client-model-body .basic-inf-box .dropdown .dropdown-toggle.show .dropdown-icon {
        transform: rotate(180deg);
    }

    .personal-detail-profile-wrapper {
        display: flex;
        /* gap: 16px; */
        align-items: center;
        justify-content: space-between;
    }

    .personal-detail-profile-main {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .block-client-model-body .basic-inf-box .dropdown .block-client-dropdown-menu.show {
        max-width: 420px;
        width: 100%;
    }

    .blocked-client-box p {
        color: #F53F3F;
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .blocked-client-box {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .blocked-client-box .upcoming-appointment-confirmation-badge.cancelled {
        background-color: #FFECE8;
        color: #F53F3F;
        width: 100%;
        max-width: 65px;
    }

    .client-Review-profile-heading {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .client-Review-profile-heading h5 {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .client-Review-profile-heading span {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #696969;
    }

    .upcoming-appointment-confirmation-badge.new-client {
        background-color: #FFF3E8;
        color: #F77234;
    }

    .reply-btn {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .star-rating-box {
        margin: 16px 0px 12px 0px;
        display: flex;
        gap: 8px;
    }

    .client-Review-profile-box-info p {
        font-size: 12px;
        color: #9C9C9C;
    }

    .client-review-wrapper p {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .client-review-info-list li {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .client-review-info-list li span {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .client-review-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 8px;
    }

    .comment-section {
        padding: 16px;
        border: 1px solid #97A880;
        background-color: #F4F6F2;
        border-radius: 8px;
    }

    .comment-section-heading {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .comment-section-heading h5 span {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .comment-area-box textarea {
        width: 100%;
        border-bottom: 1px solid #EBEBEB;
        border-left: unset;
        border-right: unset;
        border-top: unset;
        background-color: transparent;
    }

    .comment-area-box {
        padding: 10px;
        margin-top: 4px;
    }

    .comment-area-box textarea:focus-visible {
        border: unset !important;
        outline: unset;
    }

    textarea:focus-visible {
        outline: unset;
    }

    .comment-btn-box {
        display: flex;
        justify-content: end;
        margin-top: 4px;
    }

    .comment-btn-box a {
        border-radius: 8px;
        min-width: 99px;
    }

    .comment-section.reply-from-box {
        border: unset;
    }

    .reply-from-box .comment-section-heading {
        display: flex;
        justify-content: space-between;
    }

    .comment-section-para {
        padding-left: 24px;
        margin-top: 4px;
    }

    .comment-section-para p {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .add-new-client-main-box {
        padding: 0px 48px;
    }

    .personal-detail-profile-box {
        position: relative;
        width: 64px;
        height: 64px;
        background-color: #D7D8DA;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .client-Messages-main-content-box {
        max-width: 863px;
        margin: 48px auto 0px;
    }

    .remaining-messages-box {
        margin: unset;
    }

    .primary-btn {
        gap: 10px;
    }

    .basic-inf-box.remaining-messages-box {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .remaining-messages-plan-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        background-color: #F4F6F2;
        border-radius: 8px;
    }

    .remaining-messages-box-inner {
        display: flex;
        gap: 10px;
        flex-direction: column;
    }

    .remaining-messages-box-inner h3 {
        font-size: 24px;
        font-family: var(--font-bold);
    }

    .remaining-messages-plan-badge a {
        font-size: 14pxl;
        font-family: var(--font-bold);
        color: var(--primary-color);
    }

    .appointments-message-wrapper h2 {
        font-size: 24px;
        font-family: var(--font-bold);
    }

    .appointments-message-wrapper {
        margin-top: 32px;
    }

    .appointments-message-card {
        margin-top: 16px;
        background-color: #F7F8FA;
        border-radius: 20px;
        padding: 16px;
        display: flex;
        gap: 16px;
        align-items: flex-start;
        min-height: 176px;
    }

    .appointments-message-card-content h3 {
        margin-bottom: 4px;
    }

    .appointments-message-card-badge {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }

    .upcoming-appointment-varification {
        display: flex;
        gap: 4px;
    }

    .upcoming-appointment-varification {
        display: flex;
        gap: 4px;
    }

    .upcoming-appointment-varification-box {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .appointments-message-card-badge .upcoming-appointment-confirmation-badge {
        font-size: 14px;
    }

    .appointment-varification-disabled h5 {
        color: #D4D4D4;
    }

    .appointment-varification-disabled img {
        filter: grayscale(1);
    }

    .appointments-message-card-content p span {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    /* .add-new-client-main-box .personal-detail-profile-box img {
        height: unset;
        width: unset;
    } */

    .edit-appointment-reminder-model-content {
        min-width: 520px;
        border-radius: 8px;
    }

    .edit-appointment-reminder-model-body .basic-inf-box {
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .edit-appointment-reminder-model-body .basic-inf-box h4 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .edit-appointment-reminder-model-body .basic-inf-box .switch3 {

        border-radius: 6px;
    }

    .Automation-rules-wrapper h4 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .Automation-rules-wrapper .basic-inf-box p {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .Automation-rules-wrapper .basic-inf-box p span {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .Channels-text-message-box-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .Channels-text-message-box-content h4 {
        margin-bottom: 8px;
    }

    .Channels-text-message-box-inner {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }

    .Channels-wrapper .basic-inf-box {
        display: block;
    }

    .client-receive-message-box {
        padding: 10px;
        background-color: #F2F3F5;
        border-radius: 8px;
    }

    .client-receive-message-box p {
        font-size: 14px;
    }

    .client-receive-message span {
        color: #9C9C9C;
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .client-receive-message {
        margin-top: 8px;
    }

    .email-message-switch {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .Channels-wrapper h4 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .avg-review-box h3 {
        font-size: 36px;
    }

    .avg-review-box .star-rating-box {
        margin: 5px 0px;
    }

    .avg-review-box p {
        font-size: 16px;
        font-family: var(--font-medium);
    }

    .ratting-stats-box {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .rating-progress-bar {
        width: 162px;
        height: 8px;
        border-radius: 10px;
        background-color: #EBEBEB;
        position: relative;
    }

    .rating-progress-bar::before {
        content: ' ';
        background-color: var(--primary-color);
        position: absolute;
        width: 78%;
        height: 8px;
        border-radius: 10px;
    }

    .pet-review-tabs {
        margin-top: 32px;
    }

    .pet-review-filter-box {
        display: flex;
        gap: 32px;
    }

    .all-review-wrapper .formfield,
    .all-review-wrapper .pet-review-filter-box,
    .all-review-wrapper .client-Review-profile-box {
        margin-top: 32px;
    }

    .all-review-wrapper .divider {
        margin: 18px 0px 0px 0px;
    }

    .pagination-box {
        display: flex;
        gap: 8px;
        align-items: center;
        justify-content: flex-end;
        margin-top: 32px;
    }

    .previous-page-btn {
        height: 36px;
        width: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
    }

    .page-number-btn {
        height: 36px;
        width: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
    }

    .next-page-btn {
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
    }

    .page-number-btn.active,
    .page-number-btn:hover,
    .next-page-btn:hover,
    .previous-page-btn:hover {
        background-color: var(--primary-color);
    }

    .previous-page-btn img {
        transform: rotate(180deg);
    }

    .accordion-button:not(.collapsed)::after {
        background-image: url("../images/down.png");
        transform: rotate(-180deg);
    }

    .accordion-button::after {

        background-image: url("../images/down.png");

    }

    .card-empty-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        gap: 23px;
        padding: 0px 20px;
    }

    .dashboard-middle-content {
        width: calc(100% - 240px);
        height: calc(100vh - 69px);
        overflow-y: auto;
        padding: 50px 0px;
    }

    .checkout-cart-section {
        width: 100%;
        height: calc(100vh - 64px);
        overflow-y: auto;
        border-left: 1px solid #EBEBEB;
        max-width: 320px;
        transition: all 0.4s ease-in;
        transform: translateX(1000px);
    }

    .checkout-cart-section.model-open {
        transform: translateX(0px);
    }

    .card-empty-wrapper h2 {
        font-size: 24px;
        font-family: var(--font-bold);
        text-align: center;
    }

    .card-empty-wrapper p {
        font-size: 14px;
        font-family: var(--font-bold);
        text-align: center;
        color: #9C9C9C;
    }

    .checkout-empty-heading {
        max-width: 742px;
        margin: 0 auto;
    }

    .checkout-empty-heading h2 {
        font-size: 24px;
        font-family: var(--font-bold);
    }

    .checkout-main-wrraper {
        max-width: 742px;
        margin: 0 auto;
    }

    .no-appoitment-for-checkout {
        margin-top: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 23px;
    }

    .days-appoitment-sec .light-btn {
        margin-left: 16px;
        border-radius: 8px;
    }

    .days-appoitment-sec .primary-btn {
        margin-left: 8px;
        border-radius: 8px;
        min-width: fit-content;
        transition: unset !important;
    }

    .days-appoitment-sec .btn {
        transition: unset !important;
    }

    .checkout-appoitment--box {
        max-width: 742px;
        border: 2px solid #EBEBEB;
        border-radius: 8px;
        padding: 10px 16px 10px 26px;
        margin-top: 32px;
        display: flex;
        gap: 10px;
        position: relative;
        overflow: hidden;
        /* background-size: cover; */
        justify-content: space-between;
    }

    .checkout-appoitment--box:hover,
    .checkout-appoitment--box.active {
        border: 2px solid #21291D;
        box-shadow: 0px 8px 20px 0px #0000001A;

    }

    .checkout-appoitment-profile h3 {
        font-size: 24px;
        font-family: var(--font-bold);
        margin-top: 4px;
    }

    .checkout-appoitment-profile h4 {
        font-size: 14px;
        font-family: var(--font-bold);
        margin-top: 4px;
    }

    .checkout-appoitment-profile h4 span {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .checkout-appoitment-profile h5 {
        font-size: 12px;
        font-family: var(--font-bold);
        margin-top: 4px;
    }

    .checkout-appoitment-profile p {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #696969;
        margin-top: 4px;
    }

    .checkout-appoitment-profile-img-box {
        padding: 11px 9.5px;
    }

    .vertical-divider {
        /* height: 100%; */
        width: 2px;
        background-color: #EBEBEB;
    }

    .checkout-appoitment-profile {
        max-width: 154px;
        width: 100%;
    }

    .checkout-appoitment {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .checkout-appoitment-info p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #696969;
    }

    .checkout-appoitment-info {
        display: flex;
        gap: 4px;
        flex-wrap: wrap;
        width: 100%;
        align-content: center;
        align-items: center;
        max-width: 440px;
    }

    .checkout-appoitment-info-inner {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
        position: relative;
        padding-left: 15px;
    }

    .checkout-appoitment-pricing {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 50px;
    }

    .appoitment-box-left-bar {
        position: absolute;
        width: 10px;
        height: 100%;
        background-color: #6893A9;
        left: 0;
        top: 0;
    }

    .appoitment-box-left-bar-red {
        position: absolute;
        width: 10px;
        height: 50%;
        background-color: #C46452;
        left: 0;
        bottom: 0;
    }

    .appoitment-box-left-bar-red.full-bar-red {
        height: 100%;
    }

    .checkout-ribbon {
        padding: 8px 20px;
        background-color: #BBA677;
    }

    .checkout-ribbon p {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .checkout-ribbon h3 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .checkout-ribbon-booking-id {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .checkout-cart-area-wrapper {
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: calc(100vh - 101px);
        /* border: 1px solid #EBEBEB; */
    }

    .checkout-cart-area-wrapper .basic-inf-box {
        margin: 0px;
    }

    .checkout-cart-area-wrapper .basic-inf-box {
        margin: 0px;
        display: flex;
        gap: 16px;
        border-radius: 20px;
    }

    .checkout-cart-area-wrapper .checkout-cart-content-name {
        display: flex;
        align-items: flex-start;
    }

    .checkout-cart-area-wrapper .checkout-cart-content-name h4 {
        font-size: 14px;
        font-family: var(--font-bold);
        max-width: 98px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 1;
        height: 21px;
        white-space: nowrap;
    }

    .checkout-cart-content h4 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .checkout-cart-content p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .checkout-cart-item-detail-info h4 {
        font-size: 16px;
        font-family: var(--font-bold);
    }

    .checkout-cart-item-detail-inner {
        display: flex;
        justify-content: space-between;
    }

    .checkout-cart-item-detail-info p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #696969;
    }

    .checkout-cart-item-detail-inner {
        padding: 16px 0px;
        border-top: 1px solid #EBEBEB;
    }

    .checkout-cart-item-detail-heading {
        margin: 10px 0px;
    }

    .checkout-cart-add-item a {
        display: flex;
        gap: 8px;
        color: var(--primary-color);
        width: 100%;
        max-width: 105px;
    }

    .checkout-cart-add-item {
        padding-bottom: 15px;
        border-bottom: 1px solid #EBEBEB;
    }

    .checkout-cart-payment-list li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .checkout-cart-payment-list li h3 span {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .checkout-cart-payment-list-discount {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .checkout-cart-payment-list-discount h3 {
        color: #00B42A;
    }

    .checkout-cart-payment-list-discount .upcoming-appointment-confirmation-badge {
        margin-bottom: unset;
        font-size: 14px;
        font-weight: 500;
    }

    .checkout-cart-payment-list li:last-child {
        padding: 11px 0px;
        border-top: 1px solid #EBEBEB;
        border-bottom: 1px solid #EBEBEB;
        margin-bottom: unset;
    }

    .checkout-cart-payment-list li:last-child h2 {
        font-size: 16px;
    }

    .checkout-cart-payment-list-btn-box {
        margin: 16px 0px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .checkout-cart-payment-list-btn-box a {
        width: 100%;
        border-radius: 8px;
    }

    .Edit-cart-item-model-content {
        min-width: 520px;
    }

    .service-form-box.pricing-varient-box {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .pricing-varient-dropdown {
        width: 100%;
    }

    .service-form-box.pricing-varient-box h3 {
        width: 65px;
    }

    .red-color-btn {
        color: #F53F3F;
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .edit-cart-footer {
        display: flex;
        justify-content: space-between;
    }

    .checkout-payment-box h3 {
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .checkout-payment-box-card {
        padding: 24px;
        border: 2px solid #EBEBEB;
        display: flex;
        flex-direction: column;
        gap: 10px;
        border-radius: 20px;
        align-items: center;
        width: 100%;
        max-width: 180px;
        margin-top: 32px;
        justify-content: center;
        min-height: 184px;
    }

    .checkout-payment-box-card:hover,
    .checkout-payment-box-card.active {
        border: 2px solid var(--secondary);
    }

    .payment-method-content h4 {
        font-size: 14px;
        font-family: var(--font-bold);
        text-align: center;
    }

    .payment-method-content p {
        font-size: 14px;
        font-family: var(--font-medium);
        color: #9C9C9C;
        text-align: center;
    }

    .payment-method-img-box {
        padding: 9px 12px;
        border: 1px solid #CCCCCC;
        border-radius: 8px;
    }

    .checkout-payment-wrapper {
        max-width: 742px;
        margin: 0 auto;
    }

    .checkout-payment-box {
        margin-top: 20px;
    }

    .cash-payment-total {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .cash-payment-box {
        padding: 38px 0px;
        border: 2px solid #EBEBEB;
        border-radius: 20px;
        max-width: 108px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .cash-payment-box:hover {
        border: 2px solid var(--secondary);
    }

    .cash-payment-box-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .modal-content.Cash-payment-model-content {
        min-width: 520px;
    }

    .cash-payment-change {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

    .checkout-inner-tabs {
        border-bottom: unset;
        max-width: 220px;
        margin: 0 auto;
        width: 100%;
        background-color: #F2F3F5;
        padding: 10px;
        border-radius: 50px;
        margin-bottom: 32px;
    }

    .checkout-inner-tabs .nav-item .nav-link.active {
        padding: 0.5rem 1rem;
        background-color: var(--primary-color);
        color: var(--secondary);
        border-radius: 50px;
    }

    .checkout-inner-tabs .nav-item {
        max-width: 100px;
        width: 100%;
    }

    .pet-review-tabs .nav-link {
        display: flex;
        gap: 8px;
        border-radius: 50px;
    }

    .pet-review-tabs .nav-link:focus-visible {
        outline: none;
    }

    .checkout-inner-table-tabs .nav-pills .nav-link.active {
        font-size: 14px;
        background-color: #000;
        color: #fff;
        border-radius: 100px;
        border-bottom: unset;
    }

    .checkout-inner-table-tabs .nav-pills .nav-link.active {
        font-size: 14px;
        background-color: #000;
        color: #fff;
        border-radius: 100px;
        border-bottom: unset;
        padding: 0.5rem 1rem;
    }

    .checkout-inner-table-tabs .nav-pills .nav-link {
        color: #000;
        border-radius: 100px;
        padding: 0.5rem 1rem;
    }

    .checkout-inner-table-tabs .nav-pills {
        display: flex;
        border-bottom: unset !important;
        gap: 12px;
    }

    .checkout-selected-slide-box {
        max-width: 760px;
        border: 1px solid #ebebeb;
        /* position: fixed; */
        top: 0px;
        right: 0px;
        width: 100%;
        background-color: #fff;
        height: calc(100vh - 64px);
        overflow-y: auto;
        border-radius: 8px;
        z-index: 99999;
        transition: all 0.4s ease-in-out;
        transform: translate(101%, 0);
        box-shadow: 0px 8px 20px 0px #0000001A;
        position: absolute;
    }

    .checkout-selected-slide-box .checkout-cart-content-name {
        display: flex;
        align-items: flex-start;
    }

    .checkout-selected-slide-box .basic-inf-box {
        margin: 0px;
        /* display: flex; */
        gap: 16px;
        border-radius: 20px;
    }

    .checkout-selected-slide-box .subscription-plan-heading-with-previous-btn {
        margin-bottom: 32px;
    }

    .checkout-selected-slide-box .checkout-cart-profile {
        margin-bottom: 32px;
    }

    .checkout-selected-slide-box .billing-payment-tabs .pet-detail-box {
        display: block;
    }

    .checkout-selected-slide-box .select-service-slide-body .nav-pills {
        display: flex;
        justify-content: start;
        border-bottom: unset !important;
        gap: 12px;
    }

    .checkout-selected-slide-box.model-open {
        transform: translate(0%, 0);
    }

    .checkout-inner-tabs .nav-link {
        display: flex;
        gap: 8px;
        border-radius: 50px;
        max-width: 100px;
        width: 100%;
        border: unset;
        justify-content: center;
        align-items: center !important;
    }

    .primary-heading-bold {
        font-size: 16px;
        font-family: var(--font-bold);
        min-width: 50px;
    }

    .primary-heading-medium {
        font-size: 16px;
        font-family: var(--font-medium);
    }

    .secoundry-heading-bold {
        font-size: 14px;
        font-family: var(--font-bold);
        color: #21291D;
        /* white-space: nowrap; */
        /* min-width: 111px; */
        display: flex;
    }

    .secoundry-heading-medium {
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .service-details-content {
        width: 100%;
    }

    .create-promotions-box {
        padding: 40px;
        background-color: #F7F8FA;
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 32px;
    }

    .create-promotions-box h3 {
        font-size: 24px;
        font-family: var(--font-bold);
    }

    .create-promotions-box p {
        color: #9C9C9C;
    }

    .promotions-coupon-box {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        display: flex;
        gap: 16px;
        padding: 16px;
        margin-top: 16px;
        position: relative;
    }

    .coupon-icon-box {
        height: 52px;
        width: 52px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        background-color: #F7F8FA;
        justify-content: center;
    }

    .promotions-coupon-box-content {
        max-width: 628px;
        width: 100%;
    }

    .promotions-coupon-box-content p {
        color: #9C9C9C;
    }

    .promo-code-box {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .promo-code-box .upcoming-appointment-confirmation-badge.gray {
        padding: 5px 8px;
        margin-bottom: 0px;
    }

    .promotions-coupon-box-active {
        max-width: 119px;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
    }

    .promotions-coupon-box-next-img {
        position: absolute;
        right: 31px;
        top: 84px;
    }

    .promotions-coupon-box-active .upcoming-appointment-confirmation-badge {
        padding: 5px 8px;
        margin-bottom: unset;
    }

    .new-promotion-popup-model .modal-dialog {
        transform: none;
        max-width: 520px;
    }

    .new-promotion-popup-model-body .service-form-box textarea {
        resize: vertical;
        width: 100%;
        background-color: #f2f3f5;
        border-radius: 8px;
        border: unset;
        padding: 10px;
    }

    .new-promotion-accordian .accordion-item {
        border: unset;
    }

    .new-promotion-accordian .accordion-item .accordion-header .accordion-button.collapsed {
        background-color: #F2F3F5;
        color: var(--secondary);
        border-radius: 8px;
    }

    .new-promotion-accordian .accordion-item .accordion-header .accordion-button:focus {
        background-color: #F2F3F5;
        color: var(--secondary);
    }

    .new-promotion-accordian {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .new-promotion-accordian .accordion-item .accordion-header .accordion-button:not(.collapsed) {
        color: var(--secondary);
        background-color: #F2F3F5;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
        border-radius: 8px;
    }

    .db-popup-body.new-promotion-popup-model-body {
        height: 700px;
        overflow: auto;
    }

    .new-promotion-values-input-inner {
        display: flex;
        gap: 10px;
    }

    .new-promotion-values-wrapper .rate-type-dollar-box {
        height: 40px;
    }

    .new-promotion-values-wrapper .new-promotion-values-input-inner .custom-location-input:first-child {
        min-width: 328px;
        width: 100%;
    }

    .new-promotion-values-wrapper .new-promotion-values-input-inner .custom-location-input {
        min-width: 88px;
        width: 100%;
    }

    .new-promotion-values-wrapper .new-promotion-limit-content p {
        color: #9C9C9C;
    }

    span.tip-class {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .new-promotion-popup-model .new-appointment-service-time-duration {
        margin-top: 20px;
    }

    .new-promotion-accordian {
        margin-top: 24px;
    }

    .new-promotion-values-wrapper .custom-location-input:last-child .rate-type-dollar-box {
        /* background-color: var(--secondary); */
        color: #fff;
        max-width: 91px;
        width: 100%;
    }

    .new-promotion-values-input-inner .custom-location-input input {
        border-radius: 0px 8px 8px 0px;
        padding: 6px 11px;
    }

    .promotion-next-coupon-box .upcoming-appointment-confirmation-badge {
        max-width: 53px;
        width: 100%;
        margin-top: 4px;
    }

    .promotion-next-coupon-box .promotions-coupon-box-active {
        padding: 10px;
    }

    .promotion-next-coupon-box .upcoming-appointment-confirmation-badge.gray {
        max-width: 90px;
    }

    .promotion-next-main-wrapper h3 {
        margin-bottom: 16px;
    }

    .promotion-next-main-wrapper {
        margin-top: 32px;
    }

    .promotion-next-main-wrapper .basic-inf-box {
        margin: unset;
        padding: 16px;
    }

    .promotion-next-main-wrapper .service-form-box textarea {
        resize: vertical;
        width: 100%;
        background-color: #f2f3f5;
        border-radius: 8px;
        border: unset;
        padding: 10px;
    }

    .promotion-next-main-wrapper .new-promotion-values-box {
        margin-top: 32px;
    }

    .promotion-next-main-wrapper .new-promotion-values-box h3 {
        margin-bottom: 16px;
    }

    .promotion-next-main-wrapper .new-promotion-values-box .new-promotion-values-wrapper .new-promotion-values-input-inner {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        align-items: flex-end;
    }

    .promotion-next-main-wrapper .new-promotion-values-box .new-promotion-values-wrapper .new-promotion-values-input-inner .custom-location-input:first-child {
        min-width: 707px;
        width: 100%;
    }

    .promotion-next-main-wrapper .new-appointment-service-time-duration {
        margin-top: 20px;
    }

    .analytics-main-wrapper .nav-pills {
        border-bottom: unset !important;
    }

    .analytics-main-wrapper .tab-content .divider {
        margin: 32px 0px;
    }

    .analytics-main-wrapper .tab-content .calender-data-main {
        padding: unset;
    }

    .analytics-main-wrapper .tab-content .calender-data-main .calender-data-day-tabs {
        min-width: unset;
    }

    .anylatics-content-box {
        margin: 32px 0px 0px;
    }

    .monthly-profit-box h4 {
        color: red;
    }

    .monthly-profit-box {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .analytics-main-wrapper .analytics-data-left h1 {
        font-size: 48px;
        font-family: var(--font-medium);
    }

    .analytics-data-left {
        max-width: 260px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 16px;
    }

    .analytics-main-wrapper .analytics-data-right-box {
        padding: 16px;
        border-radius: 8px;
        background: var(--color-fill-1, #F7F8FA);
        display: flex;
        justify-content: space-between;
    }

    .anylatics-content-box {
        margin: 32px 0px 0px;
        display: flex;
    }

    .analytics-data-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .analytics-type-sales-wrapper .Payment-management-activity-wrapper a {
        min-width: 174px;
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .analytics-type-sales-inner-content {
        margin: 0px 48px;
    }

    .analytics-type-sales-inner-content .account-personal-detail {
        margin: unset;
    }

    .analytics-type-sales-inner-content .client-list-filter-by {
        margin-top: 32px;
    }

    table.analytics-report-type-table {
        width: 100%;
    }

    .analytics-report-type-table tr th,
    .analytics-report-type-table tr td {
        padding: 9px 16px !important;
        width: 100%;
        min-width: 144px;
        font-size: 14px;
    }

    .analytics-report-type-table tr {
        border-bottom: 1px solid #EBEBEB;
    }

    .analytics-report-type-table tr td .upcoming-appointment-confirmation-badge.gray {
        max-width: 90px;
        padding: 1px 8px;
        font-size: 14px;
        font-family: var(--font-medium);
    }

    .analytics-report-type-table-box {
        margin-top: 32px;
        overflow: auto;
    }

    .overflow-text {
        max-width: 98px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 1;
        height: 21px;
        white-space: nowrap;
    }

    .analytics-sales-no-result-box {
        padding: 40px 16px;
        display: flex;
        gap: 16px;
        flex-direction: column;
        align-items: center;
        margin-top: 32px;
    }

    .analytics-sales-no-result-box h2 {
        font-size: 24px;
    }

    .analytics-sales-no-result-box p {
        color: #9c9c9c;
    }

    .analytics-report-type-table-box h3 {
        text-align: right;
    }

    .analytics-type-sales-inner-content-total {
        text-align: right;
    }

    .header-wrapper button.dropdown-toggle.show {
        outline: none;
        border: none;
    }

    .header-wrapper .dropdown-menu.show {
        display: block;
        margin-top: 12px !important;
        min-width: 322px;
        width: 100%;
        transform: translate3d(-291px, 38px, 0px) !important;
        padding: 16px;
    }

    .notification-profile-data-box {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 0px;
    }

    .notification-profile-content {
        font-size: 12px;
        color: #696969;
        font-family: var(--font-medium);
    }

    /* .dashboard-menu-list a img {
        position: absolute;
        right: 16px;
        transition: all 0.2s ease-in;
    } */

    .dashboard-menu-list .dropdown-toggle.show a img {
        transform: rotate(180deg);
    }

    .dashboard-menu-list a:hover,
    .dashboard-menu-list a.active {
        background-color: #f2f3f5;
        border-radius: 8px;
    }

    .dashboard-left-menus.full-left-bar {
        transform: unset;
    }

    .calender-overflow-scroll-wrapper {
        margin: 0;
        padding: 0;
    }

    .wekkly-days-hours-input-wrapper {
        display: flex;
        gap: 10px;
        width: 100%;
        max-width: 600px;
        flex-wrap: wrap;
    }

    .checkout-cart-section.full-left-bar {
        transform: unset;
    }

    .dashboard-upcomming-appointment {
        margin: 16px 0px 32px;
        padding: 16px;
        display: flex;
    }

    .dashboard-upcomming-appointment-detail {
        max-width: 260px;
        padding: 16px;
        width: 100%;
    }

    .dashboard-upcomming-appointment-detail span {
        color: #696969;
    }

    .dashboard-upcomming-appointment-conformation {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
    }

    .dashboard-upcomming-appointment-conformed,
    .dashboard-upcomming-appointment-cancell {
        background-color: #F7F8FA;
        padding: 16px;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .dashboard-upcomming-appointment-cancell span {
        color: #F53F3F;
    }

    .dashboard-appointment-activity {
        margin: 16px 0px;
        padding: 16px;
        display: flex;
        gap: 10px;
    }

    .dashboard-appointment-activity-day-btn-inner {
        max-width: 120px;
        width: 100%;
        background-color: #F7F8FA;
        padding: 7px;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
    }

    .dashboard-appointment-activity-day-btn {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 120px;
        width: 100%;
    }

    .dashboard-appointment-activity-day-btn-inner span {
        color: #696969;
    }

    .dashboard-appointment-activity-weekly-box {
        background-color: transparent;
        border-radius: 8px;
        padding: 8px 0px;
        min-width: 80px;
        margin: 10px;
        text-align: center;
        /* width: 100%; */
        cursor: pointer;
    }

    .dashboard-appointment-activity-weekly-box:hover,
    .dashboard-appointment-activity-weekly-box.active {
        background-color: var(--primary-color);
    }

    .dashboard-appointment-activity-weekly-btn {
        display: flex;
    }

    .dashboard-appointment-activity-weekly-box h3 {
        font-size: 24px;
    }

    .dashboard-main-menu-wrapper {
        max-width: 863px;
        width: 100%;
        margin: 0 auto;
    }

    .vertical-line {
        width: 1px;
        height: 155px;
        background-color: #D7D8DA;
        margin-top: unset;
        position: relative;
    }

    .vertical-line.active {
        background-color: var(--secondary);
    }

    .dashboard-main-appointment-detail-inner {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        margin-top: 16px;
    }

    .dashboard-main-appointment-detail-inner .checkout-appoitment--box {
        max-width: unset;
        border: 2px solid #EBEBEB;
        border-radius: 8px;
        padding: unset;
        margin-top: unset;
        display: flex;
        gap: 16px;
        position: relative;
        overflow-y: scroll;
        /* background-size: cover; */
        justify-content: space-between;
        width: 100%;
    }

    .vertical-line:before {
        content: ' ';
        width: 10px;
        height: 10px;
        background-color: #D7D8DA;
        position: absolute;
        border-radius: 50px;
        top: 0;
        left: -4px;
    }

    .vertical-line.active::before {
        content: ' ';
        width: 10px;
        height: 10px;
        background-color: var(--secondary);
        position: absolute;
        border-radius: 50px;
        top: 0;
        left: -4px;
    }

    .basic-inf-box.dashboard-top-services-table-wrapper {
        margin: 16px 0px;
    }

    .top-services-table {
        width: 100%;
        min-width: 829px;
    }

    table.top-services-table tr th {
        padding: 10px 0px;
        border-bottom: 1px solid #EBEBEB;
    }

    table.top-services-table tr td {
        padding: 10px 0px;
        border-bottom: 1px solid #EBEBEB;
    }

    table.top-services-table tr:last-child td {
        border-bottom: unset;
    }

    .top-rank-box {
        width: 32px;
        height: 32px;
        background-color: #000;
        color: #fff;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    table.top-services-table tr td {
        font-size: 14px;
        font-weight: 600;
        text-align: center;
    }

    table.top-services-table tr th {
        font-size: 14px;
        font-weight: 600;
        text-align: center;
    }

    table.top-services-table tr th {
        min-width: 190px;
        width: 100%;
    }

    table.top-services-table tr th:first-child {
        min-width: unset;
    }

    .top-services-table .top-service-content h3 {
        font-size: 14px;
        font-weight: 600;
    }

    .top-services-table .top-service-content p {
        font-size: 14px;
        font-weight: 400;
        color: #696969;
    }

    table.top-services-table tr th:first-child {
        text-align: left;
    }

    table.top-services-table tr th:nth-child(2) {
        text-align: left;
    }

    table.top-services-table tr td:nth-child(2) {
        text-align: left;
    }

    .top-services-table-box {
        overflow-x: auto;
    }

    .checkout-appoitment--box-outer-overflow {
        width: 100%;
    }

    .checkout-appoitment--box-inner {
        max-width: unset;
        border-radius: 8px;
        padding: 10px 16px 10px 26px;
        margin-top: unset;
        display: flex;
        gap: 16px;
        position: relative;
        overflow: unset;
        /* background-size: cover; */
        /* justify-content: space-between; */
        align-items: center;
        width: 100%;
        height: 158px;
    }

    .No-review-main-wrapper {
        margin: 20px 0px;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .No-review-main-wrapper h2 {
        font-size: 24px;
    }

    .No-review-main-wrapper p {
        color: #9C9C9C;
        font-size: 14px;
        font-weight: 600;
    }

    /* ==============================

        important-info-page

    =================================*/


    .important-info-main-content-wrapper {
        margin: 20px 48px;
    }

    .important-info-left,
    .important-info-right {
        margin: 16px 0px;
    }

    .important-info-left .new-appointment-note-textarea {
        width: 100%;
        background-color: #f2f3f5;
        border-radius: 8px;
        border: unset;
        padding: 10px;
        font-size: 14px;
    }

    .important-info-right .important-info-summary-content-box {
        margin: 16px 0px;
        padding: 10px 20px;
    }

    .important-info-right h2 {
        font-size: 24px;
    }

    .important-info-summary-list {
        width: 100%;
    }

    .important-info-summary-list li:first-child,
    .important-info-summary-list li:last-child {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .important-info-summary-list li {
        margin-bottom: 5px;
    }


    .Frequently-ask-question-wrapper {
        margin: 20px 48px;
    }

    .Frequently-ask-question-box {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .basic-inf-box.FAQ-question-box {
        margin: 16px 0px;
        min-width: 780px;
    }

    .Frequently-ask-question-box .outline-btn {
        padding: 10px;
        min-width: 67px;
        border-color: #97a880 !important;
        border: 2px solid #97a880 !important;
        color: #97a880 !important;
    }

    .Frequently-ask-question-box h3 {
        margin-bottom: 10px;
    }

    .Frequently-ask-question-box .outline-btn:hover {
        color: #000 !important;
        border: 2px solid #000 !important;
    }

    .FAQ-add-quetsion-btn {
        min-width: 102px;
        border-radius: 8px;
    }

    .Create-your-own-btn {
        border: 2px solid var(--primary-color) !important;
        color: var(--primary-color) !important;
    }

    .Create-your-own-btn:hover {
        color: #000 !important;
        border-color: #000 !important;
    }

    .set-staff-regular-shift {
        display: flex;
        gap: 20px;
        margin-top: 20px;
    }

    .set-staff-shift-left {
        width: 100%;
    }

    .regular-shift-time-table-wrapper {
        width: 100%;
    }

    .create-your-own-question-box textarea {
        width: 100%;
        border: unset;
        background-color: #f2f3f5;
        border-radius: 8px;
        padding: 10px;
    }

    .green-outline-btn {
        border: 2px solid #97a880 !important;
        color: #97a880 !important;
        /* background-color: #97A880;
        color: white; */
    }

    .green-outline-btn:hover {
        color: #000 !important;
        border-color: #000 !important;
    }

    .sidebar-open div#new-appointment {
        display: none !important;
    }

    .delete-question-btn {
        color: #F53F3F;
        text-align: center;
        display: block;
    }

    .pet-detail-table-heading {
        display: flex;
        justify-content: space-between;
    }


























    .check {
        height: 17px;
        width: 17px !important;
        position: relative;
        appearance: none;
        transition: 0.10s;
        background-color: #fff;
        text-align: center;
        font-weight: 600;
        color: white;
        border-radius: 3px;
        min-width: 17px;
        border: 1px solid #EBEBEB;
    }

    .check:checked {
        background-color: #97A880;
    }

    .check:checked {
        background-color: #97A880;
        min-width: 17px;
    }

    .check:checked:before {
        content: "✔";
        position: absolute;
        right: 3px;
        bottom: -1px;
        font-size: 12px;
    }

    .check:hover {
        cursor: pointer;
        opacity: 0.8;
    }

    .dashboard-menu-list a {
        padding: 9px 10px 9px 13px;
        min-width: 191px;
        position: relative;
    }

    /* ul.dashboard-menu-list li:hover,
    ul.dashboard-menu-list li.active {
        background: #F2F3F5;
        border-radius: 8px;
    } */
    ul.dashboard-menu-list li {
        margin-bottom: 5px;
    }

    .dog-service-list-check-box.dark-check-box {

        background-color: black;

    }

    .rate-type-dollar-box.custom-box {
        background: black;
        color: white;
    }

    .rate-type-dollar-box.percentage-box {
        background: black;
        color: white;
    }







    /* width */
    ::-webkit-scrollbar {
        width: 5px;

    }

    ::-webkit-scrollbar:horizontal {
        height: 5px;

    }

    /* Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 10px;
    }


    .weekly-work-schedule-box-profile-box img {
        height: 33px;
        width: 32px;
        border-radius: 50px;
        object-fit: cover;
    }









    .billing-paymentt-method-box {
        padding: 20px 16px;
        text-align: left;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .payment-method-type-data {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .payment-method-type-data span {
        color: #9C9C9C;
    }

    .add-bank-account-detail-body {
        padding: 24px 20px;
    }





    /* =====================================

        Customer pages design css

    =======================================*/



    .header-wrapper-storefront {
        padding: 20px 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .customer-Appointments-tabs {
        margin-top: 48px;
    }

    .customer-appointment-left-box {
        display: flex;
        justify-content: space-between;
    }

    .customer-appointment-wrapper {
        display: flex;
        gap: 32px;
    }

    .customer-appointment-left {
        width: 100%;
    }

    .customer-appointment-right {
        width: 100%;
    }

    .customer-appointment-service-name-with-icon {
        display: flex;
        align-items: center;
    }

    .customer-appointment-confirmation-detail h3 {
        color: #97A880;
        margin-bottom: 10px;
    }

    .customer-appointment-service-confirmation-badge .upcoming-appointment-confirmation-badge {
        margin-bottom: unset;
        text-align: center;
    }

    .customer-appointment-service-confirmation-badge {
        margin-top: 5px;
        display: flex;
        gap: 10px;
    }

    .customer-appointment-date-time p {
        font-size: 13px;
        font-weight: 400;
        color: #9C9C9C;
    }

    .customer-appointment-confirmation-detail {
        max-width: 211px;
        width: 100%;
    }

    div#pills-tabContent {
        margin-top: 32px;
    }

    .business-name-date {
        display: flex;
        align-items: center;
        margin-top: 10px;
        gap: 10px;
        justify-content: center;
    }

    .add-appointment-calender-box {
        text-align: center;
        margin-top: 20px;
    }

    .book-service-cinfirm-wrapper .secoundry-heading-bold {
        justify-content: center;
    }

    .book-service-cinfirm-wrapper .Appointment-details-main-box {
        max-width: 520px;
        margin: 0 auto;
    }

    .customer-appointment-right .Appointment-details-main-box .upcoming-appointment-biling-list li:first-child h6 {
        color: var(--secondary);
    }

    .customer-appointment-right .Appointment-details-main-box {
        margin-top: 16px;
    }

    .customer-appointment-right-btn-box {
        padding: 16px;
        display: flex;
        justify-content: center;
        gap: 16px;
    }


    /* .customer-appointment-right-btn-box .green-outline-btn {
        border: 2px solid #97a880  !important;
        color: #97a880  !important;
        display: flex;
        gap: 10px;
    } */
    .sidebar-open div#new-appointment {
        display: none !important;
    }

    .give-review-star {
        margin-top: 20px;
    }

    .add-new-client-info-wrapper .dropdown-toggle {
        background-color: #f2f3f5;
        padding: 8px 16px;
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
        background: transparent;
        bottom: 0;
        color: transparent;
        cursor: pointer;
        height: auto;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: auto;
    }

    select.dropdown-toggle {
        background-color: #f2f3f5;
        padding: 8px 16px;
        width: 100%;
        border-radius: 8px;
        border: unset;
    }

    .clone-div {
        margin-bottom: 6px;
        display: flex;
        gap: 10px;
        position: relative;
    }

    .left-input {
        /* display: flex; */
        gap: 9px;
        width: 100%;
    }

    span.show-row-column {
        width: 100%;
    }

    .left-input-box {
        display: flex;
        gap: 10px;
        margin-bottom: 6px;
        position: relative;
    }

    .input-close {
        position: absolute;
        top: 50%;
        right: -19px;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .add-new-client-wrapper.model-open div.modal.show .modal-dialog {
        filter: brightness(0.4);
    }


    .regular-shift-time-wrapper {
        display: flex;
        gap: 10px;
        margin-bottom: 5px;
    }

    .regular-shift-time-table-start-time input {
        max-width: 95px;
        background-color: #F2F3F5;
        padding: 8px 16px;
        font-size: 14px;
        border-radius: 8px;
        min-height: 40px;
        border: unset;
    }

    .regular-shift-time-table-end-time input {
        max-width: 95px;
        background-color: #F2F3F5;
        padding: 8px 16px;
        font-size: 14px;
        border-radius: 8px;
        min-height: 40px;
        border: unset;
    }

    .regular-shift-time-main-box-outer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .regular-shift-time-table-box {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .billing-detail-table {
        border-color: #EBEBEB !important;
        background-color: #fff;
        border-radius: 8px;
        caption-side: bottom;
        border-collapse: collapse;
        border: 1px solid;
    }

    input#colorpicker {
        height: 32px;
        width: 50px;
        border-radius: 8px 0px 0px 8px;
        border: unset;
        overflow: hidden;
    }

    .plan-name {
        margin-left: -45px;
        margin-top: 5px;
    }

    img.grromer_iii {
        width: 56px;
        height: fit-content;
    }

    .formfield.weight-detail {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .formfield.weight-detail select {
        width: 81px;
        padding: 7px 16px;
    }

    .formfield.weight-detail select {
        max-width: 80px;
        height: 40px;
        border: unset;
        background-color: #f2f3f5;
        border-radius: 8px;
    }

    .sm-devider {
        position: absolute;
        width: 4px;
        height: 1px;
        background-color: #9C9C9C;
        left: 84px;
        top: 18px;
    }

    a.edit-breed {
        cursor: pointer;
    }


    .StripeElement--empty {
        display: block !important;
    }

    .header-wrapper-storefront {
        padding: 20px 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .customer-Appointments-tabs {
        margin-top: 48px;
    }

    .customer-appointment-left-box {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .customer-appointment-wrapper {
        display: flex;
        gap: 32px;
    }

    .customer-appointment-left {
        width: 100%;
    }

    .customer-appointment-right {
        width: 100%;
        position: relative;
    }

    .customer-appointment-service-name-with-icon {
        display: flex;
        align-items: center;
    }

    .customer-appointment-confirmation-detail h3 {
        color: #97A880;
        margin-bottom: 10px;
    }

    .customer-appointment-service-confirmation-badge .upcoming-appointment-confirmation-badge {
        margin-bottom: unset;
        text-align: center;
    }

    .customer-appointment-service-confirmation-badge {
        margin-top: 5px;
        display: flex;
        gap: 10px;
    }

    .customer-appointment-date-time p {
        font-size: 13px;
        font-weight: 400;
        color: #9C9C9C;
    }

    .customer-appointment-confirmation-detail {
        max-width: 211px;
        width: 100%;
    }

    div#pills-tabContent {
        margin-top: 32px;
    }

    .business-name-date {
        display: flex;
        align-items: center;
        margin-top: 10px;
        gap: 10px;
        justify-content: flex-start;
    }

    .customer-appointment-right .Appointment-details-main-box .upcoming-appointment-biling-list li:first-child h6 {
        color: var(--secondary);
    }

    .customer-appointment-right .Appointment-details-main-box {
        margin-top: 16px;
    }

    .customer-appointment-right-btn-box {
        padding: 16px;
        display: flex;
        justify-content: center;
        gap: 16px;
    }


    .customer-appointment-right-btn-box .green-outline-btn {
        border: 2px solid #97a880 !important;
        /* color: #97a880  !important; */
        display: flex;
        gap: 10px;
    }

    .give-review-star li {
        margin-left: 10px;
        display: inline-block;
    }

    .give-review-star {
        margin-top: 20px;
    }


    li.nav-item.tab-on-small.tab-small-class {
        width: unset;
    }

    li.nav-item.tab-on-small.tab-small-class .nav-link {
        /* max-width: 150px !important; */
        width: unset !important;
        margin: unset;
        min-width: 243px;
    }

    .Storefront-menu-bars {
        cursor: pointer;
    }

    .dark-btn {
        background-color: #21291D;
        min-width: 58px;
        color: #fff;
    }

    .Storefront-service-detail-btn-box .dark-btn {
        border-radius: 20px;
        font-size: 24px;
    }

    .Storefront-service-detail-btn-box {
        margin-top: 16px;
    }

    .dark-outline-btn {
        border: 2px solid #212529;
        border-radius: 20px;
        font-size: 24px;
        /* min-width: 158px; */
        width: fit-content;
        white-space: nowrap;
        min-width: max-content;
    }

    .search-category-btn {
        border: 1px solid #212529;
        border-radius: 20px;
        font-size: 24px;
    }

    .dark-background-color {
        background-color: var(--secondary);
        color: #fff;
    }

    .dark-outline-btn:active {
        background-color: var(--secondary);
        color: #fff;
    }

    .Storefront-dropdown {
        min-width: 210px;
        cursor: pointer;
        background-color: #21291d;
        color: #fff;
        border-radius: 20px;
        font-size: 24px;
    }

    .Storefront-dropdown:focus {
        background-color: #21291d;
        color: #fff;
    }

    .Storefront-service-detail-box {
        display: flex;
        gap: 50px;
        justify-content: center;
    }

    .Storefront-service-detail-box-inner h3 {
        font-size: 24px;
        font-family: var(--font-bold);
        text-align: center;
    }

    .dark-outline-btn span {
        font-family: var(--font-medium);
    }

    .Storefront-service-detail-box:last-child {
        margin-top: 24px;
    }

    .Storefront-service-detail-btn-box {
        display: flex;
        gap: 12px;
        position: relative;
    }

    .Storefront-service-detail-wrapper {
        display: flex;
        flex-direction: column;
        padding: 100px 0px 0px 0px;
    }

    .size-guide {
        display: flex;
        justify-content: center;
        margin: 26px 0px;
        gap: 4px;
    }

    .search-service-btn {
        display: flex;
        max-width: 249px;
        margin: 0 auto;
        border-radius: 20px;
        font-size: 24px;
        font-weight: 700;
        width: 100%;
        min-height: 64px;
        border-radius: 100px;
    }

    a.skip-step {
        display: flex;
        justify-content: center;
        margin-top: 17px;
    }

    .Storefront-footer-bar .dark-btn {
        border-radius: 100px;
        font-size: 24px;
        font-weight: 700;
        padding: 20px;
    }

    .Storefront-footer-bar .dark-outline-btn {
        border: 2px solid var(--secondary);
        font-size: 24px;
        font-weight: 700;
        padding: 16px 20px;
        border-radius: 100px;
    }

    .Storefront-footer-bar .dark-btn {
        border-radius: 100px;
        font-size: 24px;
        font-weight: 700;
        padding: 20px;
    }

    .book-service-btn {
        background-color: #fff;
        font-size: 24px;
        border-radius: 100px;
        font-weight: 700;
        padding: 20px;
    }

    .Storefront-footer-bar {
        padding: 20px;
        background-color: var(--primary-color);
        border-radius: 20px;
        max-width: max-content;
        margin: 0 auto;
        position: fixed;
        bottom: 35px;
        width: 100%;
        left: 50%;
        margin-top: 20PX;
        transform: translateX(-50%);
        display: flex;
        gap: 20px;
        justify-content: center;
        z-index: 0;
    }

    .Storefront-menu-slide {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--primary-color);
        transition: 0.4s all ease-in;
        transform: translateY(-1000px);
    }

    .Storefront-menu-slide.slide-show {
        transform: translateY(0px);
    }

    .Storefront-menu-slide-header .center-logo-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .Storefront-menu-slide-header {
        position: relative;
    }

    .Storefront-menu-slide-header .cross-icon {
        position: absolute;
        right: 35px;
        top: 26px;
    }

    .Storefront-menu-btn-wrapper .Storefront-footer-bar .dark-outline-btn {
        border-radius: 20px;
    }

    .Storefront-menu-btn-wrapper .Storefront-footer-bar {
        display: flex;
        max-width: 830px;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .Storefront-search-slide {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--primary-color);
        transition: 0.4s all ease-in;
        transform: translateY(-1000px);
    }

    .Storefront-search-slide.slide-show {
        transform: translateY(0px);
    }

    .storefront-search-icon {
        cursor: pointer;
    }

    .Storefront-dropdown-whhite-icon {
        position: absolute;
        right: 13px;
        top: 23px;
    }

    .Storefront-search-wrapper {
        display: flex;
        justify-content: center;
        height: 100%;
        align-items: center;
        flex-direction: column;
    }

    .Storefront-search-slide-body {
        height: 100%;
    }

    .Storefront-search-section-box input {
        padding-bottom: 4px;
        border-bottom: 2px solid #000 !important;
        border: unset;
        min-width: 800px;
        width: 100%;
        font-size: 24px;
        font-weight: 700;
    }

    .Storefront-search-section-box {
        position: relative;
    }

    .Storefront-search-section-box .big-icon {
        position: absolute;
        right: 0;
        top: -17px;
    }

    .menu-slide-btns-box {
        position: relative !important;
        display: flex;
        max-width: 830px;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
    }

    .Storefront-menu-btn-wrapper {
        height: 100%;
        display: flex;
        justify-content: center;
    }

    .Storefront-menu-slide-body {
        height: 100%;
    }

    .Storefront-search-section-catogogies {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 0px;
        gap: 40px;
    }

    .Storefront-search-section-catogogies h3 {
        font-size: 24px;
        font-family: var(--font-bold);
    }

    .book-service-slide {
        height: 85vh;
        width: 100%;
        border: 0.2px solid #000;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        background-color: #fff;
        transition: all 0.4s ease-in;
        transform: translateY(1000px);
        overflow: hidden;
        overflow-y: hidden;
        z-index: 1;
    }

    .search-by-category {
        height: 85vh;
        width: 100%;
        border: 2px solid #000;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        background-color: #fff;
        transition: all 0.4s ease-in;
        transform: translateY(1000px);
        overflow: hidden;
        overflow-y: scroll;
    }

    .book-service-slide.slide-up {
        transform: translateY(0px);
    }

    .book-service-slide-header h1 {
        font-size: 36px;
        font-weight: 700;
    }

    .book-service-slide-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 40px 40px 20px;
    }

    .cross-icon {
        cursor: pointer;
    }

    .service-categories-number-box {
        background-color: #EBEBEB;
        color: #9C9C9C;
        border-radius: 20px;
        width: 36px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
    }

    .book-service-categories-box {
        display: flex;
        gap: 30px;
        align-items: center;
    }

    .book-service-slide-body {
        padding: 20px 40px;
        overflow-y: scroll;
        height: calc(85vh - 236px);
    }

    .book-service-categories {
        display: flex;
        gap: 20px;
    }

    .book-service-categories-box h3 {
        color: #9C9C9C;
    }

    .book-service-categories-box img {
        filter: invert(1);
    }

    .book-service-categories-box.active h3 {
        color: var(--secondary);
    }

    .book-service-categories-box.active .service-categories-number-box {
        background-color: var(--secondary);
        color: #fff;
    }

    .book-service-categories-box.active img {
        filter: unset;
    }

    .book-service-slide-body .divider {
        margin: 20px 0px;
    }

    .service-categories-left h3 {
        font-size: 24px;
        font-weight: 700;
    }

    .service-categories-left {
        display: flex;
        gap: 12px;
    }

    .service-categories-left h3.active {
        color: #6893A9;
    }

    .service-categories-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .service-categories-right {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
    }

    .service-categories-right .dark-btn {
        border-radius: 20px;
    }

    .basic-inf-box.service-categories-detail-box {
        margin: 16px 0px;
        border: 2px solid #EBEBEB;
        padding: 20px 30px;
        width: 100%;
    }

    .service-categories-detail-box .check:checked:before {
        content: "✔";
        position: absolute;
        right: 8px;
        bottom: 0px;
        font-size: 22px;
    }

    .service-categories-detail-box .check:checked {
        background-color: #97A880;
        min-width: 36px;
        height: 36px;
    }

    .service-categories-detail-box .check {
        min-width: 36px;
        height: 36px;
        border: 2px solid #000;
        border-radius: 8px;
        width: unset;
    }

    .service-categories-detail-box .inline-checkbox {
        display: inline-flex;
        gap: 16px;
        width: unset;
        flex-wrap: wrap;
    }

    .service-categories-detail-wrapper {
        display: flex;
        gap: 20px;
    }

    .service-categories-detail-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .service-categories-detail-heading-box h3 {
        color: #6893A9;
        font-size: 14px;
        font-family: var(--font-bold);
    }

    .service-categories-detail-heading-box h2 {
        font-size: 24px;
        font-family: var(--font-bold);
    }

    .service-categories-detail-para {
        color: #21291D;
        font-size: 20px;
        font-weight: 400 !important;
        margin-left: 56px;
        margin-top: 10px;
        font-family: var(--font-medium);
    }

    .book-service-slide-footer {
        padding: 30px 48px;
        border-top: 2px solid #EBEBEB;
        position: fixed;
        width: 100%;
        bottom: 0;
        background-color: #fff;
    }

    .service-slide-footer-wrapper {
        display: flex;
        justify-content: space-between;
    }

    .service-slide-footer-heading h2 {
        font-size: 36px;
    }

    .service-slide-footer-heading h3 {
        font-size: 24px;
    }

    .service-slide-footer-heading span {
        font-weight: 400;
    }

    .service-slide-footer-wrapper a {
        font-size: 36px;
        padding: 10px 20px;
        min-width: 183px;
        border-radius: 50px;
        display: flex;
        gap: 12px;
        color: #fff;
        min-height: 72px;
    }

    .book-service-next {
        height: 85vh;
        width: 100%;
        border: 2px solid #000;
        position: fixed;
        bottom: 0;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        background-color: #fff;
        transition: all 0.4s ease-in;
        transform: translateY(1000px);
        overflow: hidden;
        overflow-y: hidden;
        z-index: 1;
    }

    .book-service-next.slide-up {
        transform: translateY(0px);
    }

    .book-service-next .book-service-slide-header a {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .book-service-next-inner-box {
        margin: 16px 0px;
        padding: 20px 30px;

    }

    .book-service-next-inner-box-detail {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .book-service-next-inner-box-detail-left h3 {
        font-size: 16px;
        font-family: var(--font-bold);
        color: #6893A9;
    }

    .book-service-next-inner-box-detail-left h2 {
        font-size: 36px;
        font-family: var(--font-bold);
    }

    .book-service-next-inner-box-detail-right h2 {
        font-size: 36px;
        font-family: var(--font-bold);
    }

    .book-service-next-inner-box-detail-time {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .book-service-next-inner-box-detail-time p {
        font-size: 20px;
        font-weight: 600;
    }

    .book-service-next-para {
        font-size: 20px;
        font-weight: 600;
        max-width: 1160px;
    }

    .book-service-next-detail-inner h2 {
        font-size: 24px;
    }

    .book-service-next-detail-inner .dark-btn {
        border-radius: 50px;
        font-size: 24px;
    }

    .book-service-next-detail-inner .dark-outline-btn {
        border-radius: 50px;
        font-size: 24px;
    }

    .book-service-next-btns-box {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .book-service-next-detail-inner {
        padding: 20px 0px;
    }

    .book-service-next-detail {
        margin: 16px 0px;
    }

    .book-service-next-detail-inner p {
        margin-top: 16px;
    }

    .book-service-next-btns-box .dark-outline-btn span {
        color: var(--primary-color);
    }

    .service-slide-next-footer-wrapper .dark-btn {
        font-size: 36px;
        border-radius: 50px;
        padding: 16px 30px;
        max-height: 72px;
    }

    .service-slide-next-footer-wrapper {
        display: flex;
        justify-content: center;
    }

    .book-service-next-cross-icon,
    .book-service-cross-icon {
        cursor: pointer;
    }

    .storefront-filter-wrapper .dark-btn:last-child {
        font-size: 24px;
        border-radius: 50px;
        /* width: 100%; */
    }

    .storefront-filter-wrapper .Storefront-dropdown {
        max-width: 193px;
    }

    .storefront-filter-wrapper .Storefront-dropdown-whhite-icon {
        position: absolute;
        top: 23px;
        left: 167px;
    }

    .modal-header.storefront-filter-model-header {
        border-bottom: unset;
    }

    .modal-header.storefront-filter-model-header h3 {
        font-size: 36px;
    }

    .storefront-filter-model-content {
        border-radius: 20px;
    }

    .Size-guide-tabs .nav-link.active {
        color: #ffffff;
        background-color: #000;
        border: unset;
        padding: 6px 20px;
        font-size: 24px;
        border-radius: 50px;
        border: 2px solid #000;
    }

    .Size-guide-tabs .nav-link {
        font-size: 24px;
        color: #000;
        background-color: #fff;
        border-radius: 50px;
        margin-bottom: unset;
        border: 2px solid #000;
        padding: 7px 20px;
        max-height: 46px;
        display: flex;
        align-items: center;
    }

    .Size-guide-tabs {
        display: flex;
        justify-content: center;
        gap: 12px;
        border-bottom: unset;
    }

    .Size-guide-tabs .nav-link:hover {
        border: 2px solid #000 !important;

    }

    .size-guide-dog-table-box {
        padding: 16px;
        border: 1px solid #21291D;
        border-radius: 20px;
    }

    table.size-guide-dog-table {
        width: 100%;
    }

    .size-guide-dog-wrapper {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 17px;
    }

    table.size-guide-dog-table tr td {
        border-bottom: 1px solid #21291d;
    }

    table.size-guide-dog-table tr:last-child td {
        border-bottom: unset;
    }

    table.size-guide-dog-table tr th:first-child {
        width: 80px;
    }

    table.size-guide-dog-table tr td:first-child {
        font-weight: 700;
    }

    table.size-guide-dog-table tr td,
    table.size-guide-dog-table tr th {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .modal-content.Size-guide-model-content {
        border-radius: 20px;
    }

    .book-service-date {
        height: 85vh;
        width: 100%;
        border: 2px solid #000;
        position: fixed;
        bottom: 0;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        background-color: #fff;
        transition: all 0.4s ease-in;
        transform: translateY(1000px);
        overflow: hidden;
        overflow-y: hidden;
    }

    .book-service-date.slide-up {
        transform: translateY(0px);
    }

    .book-service-date-select-staff h2 {
        font-size: 24px;
        margin: 20px 0px;
    }

    .book-service-date-select-staff-box {
        padding: 16px;
        border: 2px solid #EBEBEB;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .book-service-date-select-staff-profile-box {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .book-service-date-select-staff-box:hover,
    .book-service-date-select-staff-box.active {
        border-color: var(--secondary);
    }

    .service-to-pet.active {
        border-color: var(--secondary);
    }

    .book-service-date-select-staff-box-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .book-service-date-select-staff-rating {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .book-service-date-time h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    .book-service-date-time-wrapper {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .book-service-date-timimg-box-inner {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
        max-width: 355px;
        width: 100%;
        flex-wrap: wrap;
    }

    .book-service-date-timimg-box-inner .dark-outline-btn {
        border: 2px solid #EBEBEB;
        max-width: 151px;
    }

    .book-service-summary {
        height: 85vh;
        width: 100%;
        border: 2px solid #000;
        position: fixed;
        bottom: 0;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        background-color: #fff;
        transition: all 0.4s ease-in;
        transform: translateY(1000px);
        overflow: hidden;
        overflow-y: hidden;
        z-index: 1;
    }

    .book-service-summary.slide-up {
        transform: translateY(0px);
    }

    .book-service-date-select-staff-box-add-new {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .book-service-date-select-staff-box-add-new h2 {
        margin: unset;
    }

    .book-service-date-select-staff-box.add-new {
        padding: 24px;
    }

    .book-service-date-select-staff .new-appointment-arrival-reference-img-box {
        max-width: 89px !important;
        width: 100%;
        height: 100%;
    }

    .book-service-date-select-staff .new-appointment-arrival-reference-img-box img {
        width: 89px;
        height: 133px;
    }

    .book-service-date-select-staff .new-appointment-arrival-reference-img-box:hover .view-img-icon {
        position: absolute;
        top: 56px;
        width: 20px !important;
        left: 32px;
        height: 15px !important;
        display: block;
    }

    .book-service-date-select-staff .upload-reference-img {
        width: 89px;
        height: 133px;
    }

    .book-service-summary-detail-box {
        border: 2px solid #EBEBEB;
        padding: 16px;
        border-radius: 20px;
    }

    .book-service-summary-detail-box .business-name-date {
        margin-top: unset;
        margin-bottom: 10px;
    }

    .book-service-summary-detail-list-desclaimer {
        padding: 9px 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: #F4F6F2;
        border-radius: 10px;
        margin-bottom: 8px;
    }

    ul.book-service-summary-detail-list li {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .book-service-payment {
        height: 85vh;
        width: 100%;
        border: 2px solid #000;
        position: fixed;
        bottom: 0;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        background-color: #fff;
        transition: all 0.4s ease-in;
        transform: translateY(1000px);
        overflow: hidden;
        overflow-y: hidden;
        z-index: 1;
    }

    .book-service-payment.slide-up {
        transform: translateY(0px);
    }

    .book-service-payment-cross-icon,
    .book-service-summary-cross-icon,
    .book-service-date-cross-icon {
        cursor: pointer;
    }

    .book-service-summary-detail-list-radio-box {
        display: flex;
    }

    .book-service-summary-detail-list-radio-box .radio-box-btns input[type="radio"]:checked+label:after {
        -webkit-transition: all .1s ease;
        transition: all .1s ease;
        border: 4px solid var(--secondary);
    }

    .book-service-summary-detail-list-radio-box .radio-label {
        font-family: var(--font-medium);
    }

    .book-service-confirm {
        height: 85vh;
        width: 100%;
        border: 2px solid #000;
        position: fixed;
        bottom: 0;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        background-color: #fff;
        transition: all 0.4s ease-in;
        transform: translateY(1000px);
        overflow: hidden;
        overflow-y: hidden;
    }

    .book-service-confirm.slide-up {
        transform: translateY(0px);
    }

    .book-service-confirm .Appointment-details-main-box {
        padding: 10px 20px;
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        margin: 0 auto;
        max-width: 480px;
    }

    .book-service-cinfirm-wrapper h2 {
        font-size: 24px;
        text-align: center;
        margin-bottom: 20px;
    }

    select.form-control.Storefront-photo-dropdown-main {
        font-size: 56px;
        font-weight: 700;
    }

    select.form-control.Storefront-photo-dropdown-main {
        font-size: 56px;
        font-weight: 700;
        /* min-width: 349px; */
        background-color: #ffffff;
        border: unset;
        color: #97a880;
        font-family: var(--font-bold);
        padding-right: 60px;
    }

    .Storefront-photo-dropdown {
        position: relative;
        max-width: 423px;
    }

    .Storefront-photo-dropdown .Storefront-dropdown-whhite-icon {
        position: absolute;
        right: 19px;
        top: 46px;
    }

    .Storefront-photo-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 1260px;
        margin: 0 auto;
    }

    .Storefront-photo-box {
        width: 235px;
        /* width: 100%; */
        height: 235px;
        background-color: #21291D;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .Storefront-photo-box h2 {
        color: #fff;
    }

    .Storefront-photo-wrapper-inner {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
        gap: 20px;
        width: 100%;
    }

    .Storefront-photo-box:before {
        content: "";
        height: 314px;
        width: 1px;
        background-color: #eee;
        position: absolute;
        transform: rotate(45deg);
    }

    .dark-outline-btn.active {
        background-color: var(--secondary);
        color: #fff;
    }

    .book-service-summary-payment-wrapper h2 {
        font-size: 24px;
        margin: 20px 0px;
    }

    .book-service-summary-payment-wrapper .basic-inf-box {
        margin: 16px 0px;
    }

    .storefont-review-main-heading-left .star-rating-box {
        margin: unset;
    }

    .storefont-review-main-heading-left {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .storefont-review-main-box {
        border: 2px solid #21291D;
        border-radius: 20px;
        max-width: 1344px;
        margin: 0 auto;
    }

    .storefont-review-main-heading {
        padding: 20px;
        border-bottom: 2px solid #21291D;
    }

    .storefont-review-main-heading {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .storefont-review-main-heading-left h1 {
        font-size: 56px;
    }

    .storefont-review-main-filter-wrapper {
        padding: 20px;
    }

    .storefont-review-main-filter-wrapper {
        padding: 20px;
        display: flex;
        gap: 30px;
        border-bottom: 2px solid #21291D;
    }

    .storefont-review-main-filter-left {
        display: flex;
        gap: 12px;
    }

    .storefont-review-main-filter-wrapper .form-control {
        width: auto;
        border: 1px solid #21291D;
        border-radius: 50px;
        padding-right: 42px;
    }

    .storefont-review-main-filter-wrapper .formfield .form-icon {
        position: absolute;
        right: 16px;
        top: 70%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
    }

    .storefont-review-main-filter-wrapper .formfield .vertical-devider {
        height: 39px;
        width: 1px;
        background-color: #000;
        position: absolute;
        top: 44%;
        right: 33px;
    }

    .storefont-review-main-content-box {
        padding: 20px;
        border-bottom: 2px solid #21291D;
    }

    .storefont-review-main-content-box:last-child {
        border-bottom: unset;
    }

    .storefont-review-accordian-wrapper {
        padding: 20px;
        border-bottom: 2px solid #21291D;
    }

    .storefont-review-accordian-wrapper .accordion-button:not(.collapsed) {
        color: var(--secondary);
        background-color: #fff;
        box-shadow: unset;
    }

    .storefont-review-accordian-wrapper .accordion-item {
        background-color: #fff;
        border: unset;
    }

    .storefont-review-accordian-wrapper .accordion-button,
    .storefont-review-accordian-wrapper .accordion-body {
        padding: 8px;
    }

    .storefont-review-accordian-wrapper:last-child {
        border-bottom: unset;
    }

    .storefont-find-us-main {
        display: flex;
        border-bottom: 2px solid #21291D;
    }

    .storefont-find-us-main-left {
        padding: 20px;
        width: 100%;
        border-right: 2px solid #21291D;
    }

    .storefont-find-us-main-right {
        padding: 20px;
        width: 100%;
    }

    .storefont-find-us-main-left-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    .storefont-find-us-left-content-box {
        display: flex;
        align-items: center;
        gap: 50px;
        margin-bottom: 10px;
    }

    .storefont-find-us-main-right .closed-period-boxs {
        max-width: 422px;
        margin-bottom: 10px;
    }

    .storefont-find-us-main-right .closed-period-boxs:last-child {
        margin-bottom: unset;
    }

    .storefont-find-us-main-right .closed-period-boxs .closed-period-reason {
        display: flex;
        justify-content: space-between;
    }

    .storefont-find-us-contact {
        padding: 20px;
        border-bottom: 2px solid var(--secondary);
    }

    .storefont-find-us-contact-inner {
        max-width: 300px;
        margin: 0 auto;
    }

    .storefont-find-us-contact-inne-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: center;
        margin-bottom: 10px;
    }

    .storefont-find-us-contact-inner p {
        text-align: center;
    }

    .storefont-find-us-left-content-box p {
        width: 100px;
    }

    .storefont-find-us-hour-timing p {
        width: 100%;
    }

    .storefont-find-us-map iframe {
        width: 100%;
        height: 790px;
    }




    .custom-dropdown {
        position: relative;
        padding: 6px 33px 6px 12px;
        border-radius: 8px;
        border: 1px solid #97A880;
        background: #FFF;
        max-width: 254px;
    }

    .custom-dropdown input {
        border: unset;
    }

    .custom-dropdown .custom-dropdown-menu {
        position: absolute;
        /* border: 1px solid #000; */
        max-width: 252px;
        width: 100%;
        left: 0;
        top: 50px;
        z-index: 1;
        background-color: #fff;
        display: none;
        border-radius: 8px;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    }

    /* .custom-dropdown ul li{
        padding: 7px 12px;
    } */
    .custom-dropdown.custom-dropdown-menu-show ul.custom-dropdown-menu {
        display: block;
        height: 300px;
        overflow-y: scroll;
    }

    .custom-dropdown-drop-icon {
        position: absolute;
        top: 17px;
        right: 15px;
        cursor: pointer;
        transition: all 0.4s ease-in-out;
    }

    .custom-dropdown.custom-dropdown-menu-show .custom-dropdown-drop-icon {
        transform: rotate(180deg);
    }



    .accordion-body ul li {
        /* padding-left: 10px; */
        margin-left: 20px;
        border-left: 1px solid #EBEBEB;
        padding: 5px 5px 5px 10px;
        cursor: pointer;
    }

    .accordion-body {
        padding: 4px 12px;
    }

    .accordion-button:not(.collapsed) {
        color: var(--secondary);
        background-color: #fff;
        box-shadow: unset;
    }

    .accordion-item {
        background-color: #fff;
        border: unset;
    }

    .custom-dropdown-menu .accordion-button::after {
        background-image: url("../images/dropdown-icon.png");
        size: 10px;
        background-size: auto;
        width: 10px;
        height: 9px;
    }

    .set-password-heading-tag {
        text-align: center;
        margin-bottom: 30px;
    }

    .set-password-heading {
        display: flex;
        margin-top: 10px;
    }

    .set-password-heading button {
        position: relative !important;
        margin: 0px !important;
        right: unset !important;
    }

    .set-password-modal-content {
        border: unset !important;
        border-radius: 20px !important;
    }

    .set-pass-confirm-btn {
        border-radius: 50px;
        background: #97A880 !important;
    }

    .set-password-modal-content .formfield span {
        top: 10px;
    }

    .dashboard-content-wrapper.calender-extra {
        max-width: 100%;
    }

    .dashbaord-right-menu-content.width-full {
        max-width: 100%;
    }

    .disable--schedule-box,
    .disable--schedule-box:HOVER {
        background-color: #4642428f;
    }

    .disable--schedule-box:hover .dropdown {
        display: none;
    }

    .regular-shift-time-main-box {
        display: flex;
        width: 100%;
        gap: 5px;
        align-items: flex-start;
        flex-direction: column;
    }

    .regular-shift-time-main-box select {
        max-width: 207px;
        padding: 8px;
    }

    .regular-shift-time-table-box.disable {
        opacity: 0.4;
    }

    .checkout-cart-item-detail-info p {
        margin-bottom: 5px;
    }

    .prize-and-detail.cutomer-variant {
        max-width: unset !important;
    }

    a.btn.primary-btn.view-btn {
        min-width: 100px;
    }

    .appointment-close {
        position: absolute;
        /* top: 181px; */
        right: 16px;
        cursor: pointer;
        z-index: 1;
    }

    .checkout-cart-section_2 {
        overflow-y: auto;
    }

    .checkout-cart-item-detail-inner-left {
        width: 100%;
    }

    form#edit-appointment {
        width: 100%;
    }

    .image-div-before {
        display: flex;
        flex-direction: row-reverse;
        gap: 5px;
    }

    .image-div-after {
        display: flex;
        flex-direction: row-reverse;
        gap: 5px;
    }

    .formSearch {
        border: unset;
    }

    div#ui-datepicker-div {
        border-radius: 23px !important;
        overflow: hidden;
        z-index: 99999999999999 !important;
    }

    .ui-datepicker .ui-datepicker-header {
        background-color: #fff !important;
        border: unset !important;
    }

    .ui-datepicker-calendar tr:hover {
        background-color: #fff !important;
    }

    .ui-datepicker-calendar tr th span {
        font-size: 12px;
        font-family: var(--font-medium);
        color: #9C9C9C;
    }

    .ui-datepicker-calendar tr td a {
        border-radius: 50px !important;
        border: unset !important;
        display: flex;
        justify-content: center;
        background-color: #fff !important;
    }

    .ui-datepicker-calendar tr td span {
        border-radius: 50px !important;
        border: unset !important;
        display: flex;
        justify-content: center;
        background-color: #fff !important;
    }

    .ui-state-highlight,
    .ui-widget-content .ui-state-highlight {
        border: 1px solid #161615 !important;
        background: #000 !important;
        color: #fff !important;
    }

    .ui-datepicker-calendar tr:hover {
        background-color: #808080 !important;
    }

    /* .ui-datepicker-calendar tr td a:hover{
        background: #000 !important;
        color: #fff !important;
    } */
    .ui-datepicker-calendar tr td a.ui-state-active {
        border: 1px solid #161615 !important;
        background: #000 !important;
        color: #fff !important;
    }

    .ui-datepicker-calendar tr:hover td a {
        background: #000 !important;
        color: #fff !important;
    }

    .ui-datepicker-calendar tr:hover {
        background-color: #FFF !important;
    }

    .ui-datepicker-header a.ui-corner-all {
        cursor: pointer;
        position: absolute;
        top: 0;
        width: 2rem;
        height: 2rem;
        margin: 0.5rem;
        border-radius: 0.25rem;
        transition: 0.3s all;
    }

    .ui-datepicker-header a.ui-corner-all:hover {
        background-color: #ECEFF1;
    }

    .ui-datepicker-header a.ui-datepicker-prev {
        left: 0;
        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==");
        background-repeat: no-repeat;
        background-size: 0.5rem;
        background-position: 50%;
        transform: rotate(180deg);
    }

    .ui-datepicker-header a.ui-datepicker-next {
        right: 0;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj48cGF0aCBmaWxsPSIjNDI0NzcwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik03LjI4OCA2LjI5NkwzLjIwMiAyLjIxYS43MS43MSAwIDAgMSAuMDA3LS45OTljLjI4LS4yOC43MjUtLjI4Ljk5OS0uMDA3TDguODAzIDUuOGEuNjk1LjY5NSAwIDAgMSAuMjAyLjQ5Ni42OTUuNjk1IDAgMCAxLS4yMDIuNDk3bC00LjU5NSA0LjU5NWEuNzA0LjcwNCAwIDAgMS0xLS4wMDcuNzEuNzEgMCAwIDEtLjAwNi0uOTk5bDQuMDg2LTQuMDg2eiIvPjwvc3ZnPg==');
        background-repeat: no-repeat;
        background-size: 10px;
        background-position: 50%;
    }

    .storefront-formfield input[type="radio"] {
        display: none;
    }

    .storefront-select-location-model-content {
        border-radius: 20px;
    }

    .storefront-select-location-model-content .modal-header {
        border-bottom: unset;
    }

    .storefront-select-location-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 19px 16px;
        border-radius: 20px;
        border: 2px solid #808080;
        cursor: pointer;
    }

    .storefront-select-location-box.active {
        border-radius: 20px;
        border: 3px solid #000;
    }

    .select-location-detail-box h2 {
        font-size: 24px;
        font-family: var(--font-bold);
    }

    .select-location-icon-box {
        height: 52px;
        min-width: 52px;
        background-color: #F7F8FA;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .select-location-detail-box p {
        font-size: 16px;
        font-family: var(--font-medium);
        color: #9C9C9C;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        /* max-width: 15em; */
        line-height: 1.5;
    }

    .storefront-select-location-model-body {
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-height: 253px;
        overflow: auto;
    }

    .storefront-select-location-model-content .modal-footer {
        justify-content: center;
    }

    .storefront-select-location-model-content .modal-footer a {
        width: 100%;
        min-height: 76px;
        border-radius: 100px;
        margin-top: 50px;
    }

    .storefront-select-location-model-content .modal-footer {
        border-top: unset;
    }

    .dark-gray-btn {
        width: 100%;
        min-height: 76px;
        border-radius: 100px;
        background: var(--color-fill-4, #D7D8DA);
        border: 0;
        /* font-family: Inter; */
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 44px;
        color: #fff;
    }

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



    .bank-file-upload-box {
        border-radius: 8px;
        border: 1px dashed var(--color-border-2, #EBEBEB);
        background: var(--color-fill-2, #F2F3F5);
        padding: 40px 16px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .file-upload-bank-proof input {
        display: none;
    }

    .bank-file-upload-content p {
        text-align: center;
        color: #21291D;
        font-size: 14px;
        font-weight: 400;
    }

    .bank-file-upload-content span {
        text-align: center;
        color: #9C9C9C;
        font-size: 12px;
        font-weight: 400;
    }

    .bank-file-upload-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .rate-type-inner-detail h4 {
        font-size: 16px;
        font-weight: 700;
    }

    .document-review-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 8px;
        background: var(--color-fill-2, #F2F3F5);
        padding: 7px 12px;
    }

    .document-detail-heading {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .detail-notes {
        font-size: 14px;
        font-weight: 400;
        color: #21291D;
        margin-top: 20px;
    }

    .detail-notes span {
        font-size: 14px;
        font-weight: 700;
        color: #21291D;
    }

    .rate-type-inner-detail-formfield p {
        font-size: 14px;
        font-weight: 400;
    }

    .warning-box {
        display: flex;
        gap: 8px;
        padding: 9px 16px;
        border-radius: 8px;
        background: #FFF7E8;
        align-items: center;
    }

    .pro-tag {

        background-color: #FADC19;

        border-radius: 4px;

        padding: 0px 8px;

        font-size: 12px;

        font-family: var(--font-bold);

        line-height: 20px;

        color: var(--heading-color);

    }

    ul.dropdown-menu.popup-ribbon-dropdown.show {

        min-width: 188px;

        transform: translate3d(-34px, 43px, 10px) !important;

    }

    .popup-ribbon-dropdown li a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
    }

    .sms-message-box {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 12px;
    }

    .sms-message-box h3 {
        margin-bottom: 0px;
    }

    .sms-message-box .pro-tag:nth-child(2) {
        border-radius: 50px;
        padding: 0px 6px;
    }

    .pro-upgrade-box {
        padding: 9px 16px;
        background-color: #FFFCE8;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-end;
        margin-bottom: 30px;
    }

    .pro-upgrade-box p {
        font-size: 14px;
        font-family: var(--font);
        line-height: 22px;
        color: var(--heading-color);
    }

    .pro-upgrade-box .pro-tag {
        padding: 7px 20px;
        border-radius: 8px;
    }

    .dashboard-appointment-activity-day-btn-inner.active {
        background-color: #97A880 !important;
    }

    .checkout-appoitment--box .checkout-aserppoitment-profile h3 {
        font-size: 24px !important;
        line-height: 32px;
    }

    .checkout-appoitment--box .checkout-aserppoitment-profile h4 {
        font-size: 14px;
        font-weight: 700;
        margin-top: 10px;
    }

    .checkout-appoitment--box .checkout-aserppoitment-profile h4 span {
        font-size: 14px;
        font-weight: 400;
        color: #696969;
    }

    .checkout-appoitment--box .checkout-aserppoitment-profile h5 {
        font-size: 12px;
        font-weight: 700;
        margin-top: 10px;
    }

    .checkout-appoitment--box .checkout-aserppoitment-profile p {
        font-size: 12px;
        font-weight: 400;
        color: #696969;
        margin-top: 10px;
    }

    .checkout-appoitment--box .vertical-divider {
        height: unset;
    }

    .checkout-appoitment--box-outer-overflow .vertical-divider {
        height: 100%;
    }

    .checkout-appoitment-info-inner img {
        position: absolute;
        left: 0;
        top: 9px;
    }

    .checkout-aserppoitment-profile {
        max-width: 154px;
        width: 100%;
    }

    .checkout-appoitment--box-absolute-text {
        position: absolute;
        right: 15px;
        top: 10px;
        padding: 1px 8px;
        border-radius: 5px;
        background-color: #F2F3F5;
        color: #21291D;
        font-size: 14px;
    }

    .checkout-appoitment--box-absolute-text.confirm {
        background-color: #E8FFEA;
        color: #00B42A;
    }

    .book-service-date-select-staff-profile-img-box {
        width: 64px;
        height: 64px;
        border-radius: 50px;
        overflow: hidden;
    }

    .book-service-date-select-staff-profile-img-box img {
        width: 100%;
        min-width: 64px;
        height: 64px;
    }

    .book-service-date-time-wrapper .formfield {
        max-width: 487px;
    }

    .book-service-date-timimg-wrapper {
        max-width: 350px;
        width: 100%;
    }

    .select-btn {
        display: flex;
        height: 50px;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        border-radius: 8px;
        cursor: pointer;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    }

    .select-btn .btn-text {
        font-size: 17px;
        font-weight: 400;
        color: #333;
    }

    .select-btn .arrow-dwn {
        display: flex;
        height: 21px;
        width: 21px;
        color: #fff;
        font-size: 14px;
        border-radius: 50%;
        background: #97A880;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    .select-btn.open .arrow-dwn {
        transform: rotate(-180deg);
    }

    .list-items {
        position: relative;
        margin-top: 15px;
        border-radius: 8px;
        padding: 16px;
        background-color: #fff;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        max-height: 220px;
        overflow-y: scroll;
        overflow-x: hidden;
        display: none;
    }

    .select-btn.open~.list-items {
        display: flex;
    }

    /* Always show the scrollbar of the dropdown */
    .select-btn.open~.list-items::-webkit-scrollbar {
        width: 8px;
        height: 0;
    }

    .select-btn.open~.list-items::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
        border-radius: 8px;
    }

    .select-btn.open~.list-items::-webkit-scrollbar-thumb:hover {
        background-color: rgba(0, 0, 0, .3);
    }

    .list-items .item {
        display: flex;
        align-items: center;
        list-style: none;
        height: 50px;
        cursor: pointer;
        transition: 0.3s;
        padding: 0 15px;
        border-radius: 8px;
    }

    .list-items .item:hover {
        background-color: #97a8803d;
    }

    .item .item-text {
        font-size: 16px;
        font-weight: 400;
        color: #333;
    }

    .item .checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 16px;
        width: 16px;
        border-radius: 4px;
        margin-right: 12px;
        border: 1.5px solid #c0c0c0;
        transition: all 0.3s ease-in-out;
    }

    .item.checked .checkbox {
        background-color: #97A880;
        border-color: #97A880;
    }

    .checkbox .check-icon {
        color: #fff;
        font-size: 11px;
        transform: scale(0);
        transition: all 0.2s ease-in-out;
    }

    .item.checked .check-icon {
        transform: scale(1);
    }

    .cutm-dropdown-inner {
        width: 100%;
    }

    .db-cat-listbox {
        margin-bottom: 17px;
        padding: 20px;
        border: 1px solid #ebebeb;
        border-radius: 10px;
    }

    .question-icon {
        position: relative;
        cursor: pointer;
    }

    .question-icon:hover .tooltip {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    .question-icon .tooltip {
        left: -162px;
        min-width: 350px;
        background-color: #000;
        padding: 20px;
    }

    .question-icon .tooltip table {
        width: 100%;
    }

    .question-icon .tooltip table tr {
        border-bottom: 1px solid #fff;
    }

    .question-icon .tooltip table tr:last-child {
        border-bottom: unset;
    }

    .question-icon .tooltip table tr th,
    .question-icon .tooltip table tr td {
        padding: 10px 0px;
    }

    .question-icon:hover .tooltip:after {
        border-top: solid #000 10px;
    }

    .checkbox-form-feild.inline-checkbox label img {
        width: 56px;
        height: 56px;
        object-fit: cover;
        border-radius: 50px;
    }

    ul.dropdown-menu.dropdown-menu-left.show {
        transform: translate3d(0px, 5px, 0px) !important;
    }

    .table-main-heading-left .formfield {
        min-width: 160px;
        margin-bottom: 0px;
        width: 100%;
    }

    .table-main-heading-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .table-main-heading-accounts a {
        min-width: 58px;
        background-color: #000;
        color: #fff;
        border-radius: 8px;
    }

    .calender-profile {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 137px;
    }

    .calender-profile .check:checked {
        background-color: #000;
        min-width: 17px;
    }

    .calendar-date-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-right: 32px;
    }

    .calender-date-after,
    .calender-date-before {
        padding: 7px 12px;
        background-color: #F2F3F5;
        border-radius: 8px;
    }

    /* gurjit */
    .set-business-hours-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #F4F6F2;
        border-radius: 8px;
        padding: 10px 20px;
    }

    .set-business-hours-box a {
        max-height: 27px;
        max-width: 180px;
        border-radius: 10px;
    }

    .formfield.calender-input input.form-control {
        padding-right: 42px;
    }

    .gray-outline-btn {
        border: 2px solid #C8CFC9 !important;
        color: #C8CFC9;
        max-height: 40px;
        max-width: 163px;
        padding: 10px 9px;
        margin-top: 10px;
        font-size: 14px;
    }

    .change-pwd-btn {
        display: flex;
        /* align-items: center; */
        height: 100%;
        margin-top: 20px;
    }

    a.btn.primary-btn.set-close-period {
        margin-top: 26px;
    }

    .dashboard-content-box .click-icon {
        position: absolute;
        right: 6px;
        top: 5px
    }

    .formfield-input {
        position: relative;
    }

    .closed-period-time-date h3 {
        font-size: 16px;
    }

    span.calender-position {
        position: absolute;
        top: 6px;
        right: 15px;
    }

    .calender-table td p.closedays {
        background-color: #D7D8DA;
        background-image: url(../images/cross-line.png);
    }

    .week-off-calender {
        background-color: #ebebeb;
        width: 100%;
        height: 18.6px;
        position: relative;
    }

    .week-off-calender:first-child::before {
        content: "";
        background-color: #d2d2d2;
        position: absolute;
        /* transform: rotate(149deg); */
        z-index: 10;
        background-image: url(../images/cross-line.png);
        width: 100%;
        height: 75px;
    }

    .table-data-inner-div.empty-block {
        background-color: #d2d2d2;
    }

    .free-PetEase-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .free-PetEase-body h3 {
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
    }

    .free-PetEase-body p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
    }

    .free-PetEase-content {
        border-radius: 8px;
    }

    .trial-tag {
        padding: 1px 8px;
        background-color: #FFF7E8;
        color: #FF7D00;
        border-radius: 8px;
    }



    /* -------- Billing Payment Tab Pages Start ---------- */

    .table-main-heading-left .formfield {
        min-width: 160px;
        margin-bottom: 0px;
        width: 100%;
    }

    .table-main-heading-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .table-main-heading-accounts a {
        min-width: 58px;
        background-color: #000;
        color: #fff;
        border-radius: 8px;
    }

    .calender-profile {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 137px;
    }

    .calender-profile .check:checked {
        background-color: #000;
        min-width: 17px;
    }

    .calendar-date-wrapper {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-right: 32px;
    }

    .calender-date-after,
    .calender-date-before {
        padding: 7px 12px;
        background-color: #F2F3F5;
        border-radius: 8px;
    }

    .new-appointment-field-left {
        margin-bottom: 16px;
    }

    select {
        appearance: none;
    }

    .formfield.select-country-text {
        max-width: 100%;
    }

    .set-business-hours-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #F4F6F2;
        border-radius: 8px;
        padding: 10px 20px;
    }

    .set-business-hours-box a {
        max-height: 27px;
        max-width: 180px;
        border-radius: 10px;
    }

    .Mandatory-deposit {
        border-radius: 8px;
        background: #F4F6F2;
        display: flex;
        gap: 8px;
        padding: 16px;
        margin-top: 16px;
    }

    .Mandatory-deposit-content h4 {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        color: #21291D;
    }

    .Mandatory-deposit-content p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: #21291D;
    }

    .Mandatory-deposit svg {
        margin-top: 4px;
    }

    .pills-deposite-content .basic-inf-box {
        margin: 16px 0px;
    }

    .billing-payment-tab-box li {
        display: flex;
        align-items: flex-start;

    }

    .billing-payment-tab-box li .pro-tag {
        margin-bottom: 10px;
    }

    .exclusive-features-box {
        border-radius: 8px;
        background: #F7F8FA;
        color: #F7F8FA;
        padding: 24px;
    }

    .exclusive-features-box h2 {
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
    }

    .exclusive-features-box p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        margin: 8px 0px 28px 0px;
        text-align: center;
        color: #21291D;
    }

    .exclusive-features-left {
        display: flex;
        gap: 8px;
    }

    .exclusive-features-right p {
        margin: 0px;
        text-align: left;
    }

    .exclusive-features-detail {
        margin-bottom: 8px;
    }

    .exclusive-features-detail:last-child {
        margin-bottom: 0px;
    }

    a.pro-tag.big-btn {
        padding: 7px 20px;
        border-radius: 8px;
        margin: 0 auto;
        width: 100%;
        display: flex;
        max-width: 120px;
        margin-top: 32px;
    }

    .subscription-plan-tab .radio-box-btns input[type="radio"]:checked+label:after {
        border: 4px solid #000000;
    }

    a.btn.light-btn.business-account-save-btn.green-outline-btn {
        background-color: #fff;
    }

    .db-cat-list-header button.dropdown-toggle.show {
        border: unset;
    }

    .storefront-templete-sec {
        padding: 40px 0px;
    }

    .storefront-templete-wrapper {
        padding: 0px 31px;
    }

    .storefront-templete-box {
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
        padding: 32px 31px;
        border: 1px solid #eee;
    }

    .storefront-templete-sec .logo-heading {
        padding: 40px 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .storefront-templete-sec .logo-heading span {
        background-color: #FFF7E8;
        color: #FF7D00;
        padding: 5px 8px;
        border-radius: 50px;
        margin-top: 24px;
    }

    .storefront-templete-sec .logo-heading h3 {
        font-size: 24px;
        font-weight: 700;
        color: #21291D;
        margin-top: 10px;
    }

    .storefront-templete-wrapper p {
        margin-bottom: 16px;
    }

    .redir-btn .dark-outline-btn {
        border: 1px solid #21291D;
        border-radius: 24px;
        color: #21291D;
        font-size: 14px;
        font-weight: 500;
    }

    .redir-btn .dark-outline-btn:hover {
        color: #fff;
    }

    .redir-btn .dark-outline-btn.active {
        color: #fff;
        background-color: #21291D;
    }

    .storefront-templete-sec .table-heading {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin: 36px 0px 30px;
    }

    .storefront-templete-sec .table-heading h3 {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
    }

    .storefront-templete-sec .table-heading p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: #696969;
    }

    .storefront-temp-table {
        width: 100%;
    }

    .storefront-temp-table th .storefront-temp-table-left h4,
    .storefront-temp-table th .storefront-temp-table-right h4 {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
    }

    .storefront-temp-table tr th {
        padding: 16px 24px;
        display: block;
    }

    .storefront-temp-table tr td {
        display: block;
        padding: 16px 24px;
    }

    .storefront-temp-table td .storefront-temp-table-left h5,
    .storefront-temp-table td .storefront-temp-table-right h5 {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .storefront-temp-table td .storefront-temp-table-left p {
        max-width: 300px;
    }

    .storefront-temp-table td .storefront-temp-table-left p,
    .storefront-temp-table td .storefront-temp-table-right p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: #9C9C9C;
    }

    .storefront-temp-table-wrap {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .storefront-temp-table-wrap {
        margin-bottom: 10px;
    }

    .storefront-temp-table tr {
        border-bottom: 1px solid #eee;
    }

    .grand-total {
        display: flex;
        justify-content: flex-end;
        padding: 14px 24px;
        border-bottom: 1.5px solid #eee;
    }

    .grand-total h3 {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        color: #9C9C9C;
    }

    .grand-total-box {
        display: flex;
        flex-direction: column;
        /* align-content: flex-end; */
        align-items: flex-end;
        padding: 14px 24px;
        margin-bottom: 20px;
    }

    .grand-total-box h2 {
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 32px;
    }

    .grand-total-box p {
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        color: #21291D;
    }

    .location-dabba h3 {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .location-dabba-inner h4 {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
    }

    .location-dabba-inner span {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: var(--primary-color);
    }

    .imp-info-box {
        margin-top: 16px;
    }

    .email-temp-description {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        color: #9C9C9C;
        margin-top: 48px;
        margin-bottom: 32px;
        display: block;
    }

    .powered-by p {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        color: #9C9C9C;
    }

    .powered-by {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 32px 0px;
        border-top: 1px solid #eee;
    }

    .loading {
        height: 0;
        width: 0;
        padding: 15px;
        border: 6px solid #ccc;
        border-right-color: #000;
        border-radius: 22px;
        -webkit-animation: rotate 1s infinite linear;
        /* left, top and position just for the demo! */
        position: absolute;
        left: 50%;
        top: 50%;
    }

    @-webkit-keyframes rotate {

        /* 100% keyframe for  clockwise.
       use 0% instead for anticlockwise */
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    /* -------- Billing Payment Tab Pages End   ---------- */


    .storefront-review-header {
        padding: 40px 31px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .storefront-review-header h2 {
        text-align: center;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
        max-width: 319px;
    }

    .templete-review-content {
        padding: 0px 31px;
    }

    .templete-review-content p {
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        color: #21291D;
        margin-bottom: 16px;
    }

    .templete-review-content .redir-btn {
        display: flex;
        justify-content: center;
        gap: 5px;
        margin-bottom: 36px;

    }

    .booking-and-view-box p {
        margin-bottom: 0px;
        text-align: center;
    }

    .booking-and-view-box a {
        display: flex;
        justify-content: center;
        color: var(--primary-color);
    }

    .booking-and-view-box {
        margin-bottom: 68px;
    }

    .templete-receipt-header {
        display: flex;
        justify-content: center;
    }

    .templete-receipt-wrapper h3 {
        margin: 20px 0px;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;
    }

    .templete-receipt-box {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        padding: 10px 20px;
    }

    .receipt-table-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    table.templete-receipt-table {
        width: 100%;
    }

    .receipt-table-heading-right span {
        color: #21291D;
        background-color: #F2F3F5;
        padding: 2px 8px;
        border-radius: 8px;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px
    }

    .receipt-table-heading-left h3 {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;
        margin: 0px;
    }

    .receipt-table-heading-left p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: #9C9C9C;
    }

    .receipt-table-contant {
        display: flex;
        justify-content: space-between;
    }

    .receipt-table-contant-box span {
        display: block;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        margin-bottom: 8px;
        color: #9C9C9C;
        margin: 0px;
    }

    .receipt-table-contant-box h3 {
        margin: 0px;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        margin-bottom: 8px;
        margin: 0px;
    }

    .receipt-table-contant-box p {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        color: #9C9C9C;
    }

    .receipt-table-contant-box {
        margin-bottom: 8px;
    }

    .horizon-line {
        width: 100%;
        height: 1px;
        margin: 10px 0px;
        background-color: #eaeaea;
        display: block;
    }

    .templete-receipt-wrapper .email-temp-description {
        margin-top: 16px;
        margin-bottom: 0px;
    }

    .receipt-table-contant .receipt-table-contant-box:last-child {
        text-align: right;
    }

    .Template-Preferences-wrapper {
        display: flex;
        gap: 32px;
    }

    .Display h3 {
        margin-bottom: 16px;
    }

    .Display .storefront-templete-box {
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
        border: unset;
    }

    .Receipt-template-box {
        max-width: 418px;
        width: 100%;
    }



    .storefront-templete-sec {
        padding: 40px 0px;
    }

    .storefront-templete-wrapper {
        padding: 0px 31px;
    }

    .storefront-templete-box {
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
        padding: 32px 31px;
        border: 1px solid #eee;
    }

    .storefront-templete-sec .logo-heading {
        padding: 40px 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .storefront-templete-sec .logo-heading span {
        background-color: #FFF7E8;
        color: #FF7D00;
        padding: 5px 8px;
        border-radius: 50px;
        margin-top: 24px;
    }

    .storefront-templete-sec .logo-heading h3 {
        font-size: 24px;
        font-weight: 700;
        color: #21291D;
        margin-top: 10px;
    }

    .storefront-templete-wrapper p {
        margin-bottom: 16px;
    }

    .redir-btn .dark-outline-btn {
        border: 1px solid #21291D;
        border-radius: 24px;
        color: #21291D;
        font-size: 14px;
        font-weight: 500;
    }

    .redir-btn .dark-outline-btn:hover {
        color: #fff;
    }

    .redir-btn .dark-outline-btn.active {
        color: #fff;
        background-color: #21291D;
    }

    .storefront-templete-sec .table-heading {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin: 36px 0px 30px;
    }

    .storefront-templete-sec .table-heading h3 {
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
    }

    .storefront-templete-sec .table-heading p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: #696969;
    }

    .storefront-temp-table {
        width: 100%;
    }

    .storefront-temp-table th .storefront-temp-table-left h4,
    .storefront-temp-table th .storefront-temp-table-right h4 {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
    }

    .storefront-temp-table tr th {
        padding: 16px 24px;
        display: block;
    }

    .storefront-temp-table tr td {
        display: block;
        padding: 16px 24px;
    }

    .storefront-temp-table td .storefront-temp-table-left h5,
    .storefront-temp-table td .storefront-temp-table-right h5 {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
    }

    .storefront-temp-table td .storefront-temp-table-left p {
        max-width: 300px;
    }

    .storefront-temp-table td .storefront-temp-table-left p,
    .storefront-temp-table td .storefront-temp-table-right p {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: #9C9C9C;
    }

    .storefront-temp-table-wrap {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .storefront-temp-table-wrap {
        margin-bottom: 10px;
    }

    .storefront-temp-table tr {
        border-bottom: 1px solid #eee;
    }

    .grand-total {
        display: flex;
        justify-content: flex-end;
        padding: 14px 24px;
        border-bottom: 1.5px solid #eee;
    }

    .grand-total h3 {
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
        color: #9C9C9C;
    }

    .grand-total-box {
        display: flex;
        flex-direction: column;
        /* align-content: flex-end; */
        align-items: flex-end;
        padding: 14px 24px;
        margin-bottom: 20px;
    }

    .grand-total-box h2 {
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 32px;
    }

    .grand-total-box p {
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        color: #21291D;
    }

    .location-dabba h3 {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 10px;
    }

    .location-dabba-inner h4 {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
    }

    .location-dabba-inner span {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: var(--primary-color);
    }

    .imp-info-box {
        margin-top: 16px;
    }

    .email-temp-description {
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        color: #9C9C9C;
        margin-top: 48px;
        margin-bottom: 32px;
        display: block;
    }

    .powered-by p {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 16px;
        color: #9C9C9C;
    }

    .powered-by {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 32px 0px;
        border-top: 1px solid #eee;
    }

    .appointment h3 {
        background: var(--primary-color);
        font-size: 24px;
        line-height: 32px;
        color: var(--secondary);
    }

    .appointment p {
        background: #D4D4D4;
    }

    .appointment p .btn-close {
        position: absolute;
        right: 10px;
    }

    .appointment p b {
        font-family: var(--font-semibold);
        font-weight: normal;
    }

    .appointments-in-calender {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .appointments-in-calender .calender-header {
        padding: 16px 0px;
        background-color: var(--primary-color);
    }

    .appointments-in-calender .calender-header h3 {
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        text-align: center;
        line-height: 32px;
    }

    .appointments-in-calender .blocked-time-popup {
        padding: 17px 0px;
        background-color: #D4D4D4;
        position: relative;
    }

    .appointments-in-calender .blocked-time-popup p {
        text-align: center;
    }

    .margin-top-80 {
        margin-top: 80px;
    }

    .cross-btnss {
        position: absolute;
        right: 16px;
        top: 16px;
        cursor: pointer;
    }

    svg.w-5.h-5 {
        width: 50px;
    }

    .error-for-js {
        font-size: 14px;
        font-family: var(--font-semibold);
        margin-bottom: 8px;
        color: #F53F3F;
    }

    .service-details-errors {
        color: red;
        text-align: left;
        width: 100%;
    }

    .error {
        color: red;
        text-align: left;
        width: 100%;
    }

    .form-with-price.formfield #price-error {
        margin-left: -71px;
    }

    .service-form-inner .form-with-price label.error {
        min-width: 150px;
        margin-left: -69px;
    }

    #behaviour_charge-error {
        margin-left: -75px;
    }

    .book-service-date-wrapper .row {
        gap: 48px;
    }

    .book-service-date-wrapper .row .col-md-6 {
        flex: 0 0 auto;
        width: 48%;
    }

    .service-categories-detail-heading-box h3 {
        margin-bottom: 2px;
        margin-left: 1px;
    }

    button.book-service-summary-opner.btn.dark-btn.service-next {
        border-radius: 100px;
        border: 2px solid #D7D8DA;
        background: #D7D8DA;
        font-size: 36px;
        font-weight: 700;
        line-height: 44px;
        min-width: 183px;
        gap: 8px;
        min-height: 76px;
    }

    button.book-service-summary-opner.btn.dark-btn.service-next.active {
        background-color: #000;
        min-height: 76px;
    }

    button.book-service-summary-opner.btn.dark-btn.active {
        background-color: #000;
    }

    .gray-shade-btn {
        border-radius: 100px;
        border: 2px solid #D7D8DA;
        background: #D7D8DA;
        font-size: 36px;
        font-weight: 700;
        line-height: 44px;
        min-width: 183px;
        gap: 8px;
    }

    button#payButton {
        border-radius: 100px;
        border: 2px solid #97A880;
        background: #97A880;
        padding: 16px 30px;
        font-size: 36px;
        font-weight: 700;
        line-height: 44px
    }

    .book-service-date-select-staff textarea {
        border-radius: 20px;
        background: var(--color-fill-2, #F2F3F5);
        height: 124px;
        padding: 4px 12px;
        max-width: 624px;
        border: 0;
        width: 100%;
    }

    .modal-open {
        min-height: 100vh;
    }

    .Storefront-search-section-box input::placeholder {
        color: #21291D;
        font-weight: 400;
    }

    .search-result-box {
        background-color: #fff;
        max-width: 800px;
        width: 100%;
        padding: 16px;
        border-radius: 8px;
        margin-top: 2px;
        position: absolute;
        z-index: 1;
    }

    .search-result-box h3 {
        margin-bottom: 8px;
        font-size: 16px;
    }

    ul.Search-results-list li {
        display: flex;
        align-items: center;
        padding: 8px 0px;
        margin: 8px 0px;
        border-bottom: 1px solid #EBEBEB;
        gap: 10px;
    }

    ul.Search-results-list li p {
        color: #6893A9;
        font-weight: 600;
    }

    ul.Search-results-list li span {
        color: #21291D;
        font-weight: 600;
    }

    .height-76 {
        min-height: 76px;
    }

    .service-categories-detail-box img.confirm-service-detail {
        cursor: pointer;
    }

    .business-name-date .secoundry-heading-bold {
        white-space: unset;
    }

    .storefont-review-main-box .accordion .accordion-header .accordion-button::after {
        background-image: url(../images/dropdown-icon-lg.png) !important;
        height: 10px;
    }


    .gallery-main-wrapper {
        display: flex;
        gap: 32px;
        flex-wrap: wrap;
    }

    .gallery-card-img-box img {
        width: 160px;
        height: 90px;
        object-fit: cover;
    }

    .gallery-card-date {
        margin-top: 10px;
    }

    .gallery-card-date p {
        font-size: 12px;
        font-weight: 400;
        color: #9C9C9C;
    }

    .Storefront-service-detail-wrapper label,
    .Storefront-service-detail-wrapper select,
    .Storefront-service-detail-wrapper button {
        border-radius: 50px;
    }

    .book-service-next-detail-inner select {
        border-radius: 50px;
    }

    .basic-inf-box.without-border {
        border: 0;
        padding: 0;
    }

    .account-pet-heading {
        margin-left: 48px;
    }

    .personal-detail-profile-inner .personal-detail-profile-box label {
        margin-bottom: 0px;
    }

    .service-block-heading-box .service-btn-box a {
        min-width: 119px;
        border-radius: 8px;
        color: #D4D4D4;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .basic-inf-box.text-center.customer-account-Client-details-box .social-login-account-box.connected-account {
        border-bottom: unset;
    }

    .dropdown-icon {
        position: absolute;
        right: 17px;
        top: 17%;
        transform: translateX(-50%);
    }

    .form-field {
        position: relative;
    }

    table.billing-detail-table {
        width: 100%;
    }

    .dark-background-color:hover {
        color: #fff;
    }

    .Storefront-service-detail-box .Storefront-service-detail-box-inner .Storefront-service-detail-btn-box select {
        min-width: 360px;
        padding-right: 30px;
    }

    .service-categories-left .nav-tabs {
        border-bottom: 0px;
    }

    .client-appoitment-main-wrapper .nav-tabs .nav-link:focus,
    .client-appoitment-main-wrapper .nav-tabs .nav-link:hover {
        border: unset !important;
        isolation: isolate;
        border-bottom: unset !important;
    }

    .client-appoitment-main-wrapper .nav-tabs .nav-link:focus,
    .client-appoitment-main-wrapper .nav-tabs .nav-link:hover {
        border: unset !important;
        isolation: isolate;
        border-bottom: unset !important;
    }

    .service-categories-left .nav-tabs .nav-link {
        margin-bottom: 0px;
        border: 0px !important;
        padding: 6px 20px;
    }

    .social-login-account-box {
        padding: 10px;
        padding-right: 0px;
    }

    .appointment-confirmed .business-name-date {
        justify-content: center;
    }

    .appointment-confirmed .business-name-date {
        justify-content: center;
        max-width: 235px;
        margin: 0 auto;
    }

    .upcoming-appointment-item-amount li h6 {
        white-space: nowrap;
        min-width: unset;
    }

    .upcoming-appointment-item-amount-left {
        /* max-width: 300px; */
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .final-slip {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .upcoming-appointment-item-amount li {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: column;
    }

    .final-slip h6 {
        text-align: right;
        min-width: unset;
    }

    .final-slip .upcoming-appointment-item-amount-left h6 {
        text-align: left;
        min-width: unset;
    }

    .upcoming-appointment-item-amount li {
        flex-direction: unset !important;
    }

    .Appointment-details-main-box .secoundry-heading-bold {
        /* min-width: unset; */
        /* overflow: hidden; */
        /* text-overflow: ellipsis; */
        /* overflow: hidden; */
        /* white-space: nowrap; */
        /* width: 40%; */
        /* text-align: left; */
        /* max-width: 119px; */
        justify-content: end;
        text-align: right;
    }

    .Appointment-details-main-box .secoundry-heading-bold p {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        /* width: 30%; */
        display: inline-block;
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .book-service-slide-body.last-slide-body {
        height: 100%;
    }

    .book-service-date-right .service-form-box .row {
        gap: unset;
    }

    .book-service-summary-payment-wrapper .radio-label {
        font-family: var(--font-medium);
    }

    .align-text-center {
        text-align: center;
    }


    .select-loc-data {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .book-service-summary-payment-wrapper .payment-card-box img {
        max-width: 20px;
    }

    .stripe-security {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    img.stripe-img {
        max-width: 43px;
    }

    .stripe-security span {
        height: 29px;
    }

    .behaviour-charge-save-btn {
        background: #97A880;
    }

    .appointment-confirmed a p {
        /* display: -webkit-box; */
        /* -webkit-line-clamp: 1; */
        /* -webkit-box-orient: vertical; */
        /* overflow: hidden; */
        display: inline-block;
        max-width: 256px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .appointment-confirmed .business-name-date .secoundry-heading-bold {
        min-width: unset;
    }

    .appointment-confirmed {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .confirm-service-detail {
        position: absolute;
        right: 40px;
        top: 41px;
        cursor: pointer;
    }

    .service-categories-lebel {
        position: relative;

    }

    .Storefront-photo-box:has(img)::before {
        display: none;
    }

    .Storefront-photo-box img {
        height: 235px;
        width: 235px;
        object-fit: cover;
    }

    .login-content.text-left,
    .login-content {
        position: relative;
    }

    .login-cross {
        position: absolute;
        right: 16px;
        top: 20px;
        cursor: pointer;
    }

    .invalid-feedback {
        text-align: left;
    }

    button.button.primary-btn.full-btn.create-account {
        border-radius: 100px;
    }

    button.button.primary-btn.full-btn.mb-3 {
        border-radius: 100px;
    }

    .Storefront-photo-wrapper h2 {
        font-size: 56px;
        font-family: var(--font-bold);
    }

    section.Storefront-Home-main-sec {
        padding-bottom: 200px;
    }

    .book-service-slide-body.last-slide-body {
        height: calc(85vh - 100px) !important;
    }

    button#payButton {
        color: #fff !important;
        font-size: 15px;
        padding: 12px 30px;
        max-height: 50px;
    }

    .customer-pay-deposit-model .modal-footer {
        justify-content: space-between;
    }

    .customer-pay-deposit-model a.btn.light-btn.outline-btn {
        padding: 12px 30px;
        min-width: 191px;
        border-radius: 50px;
    }

    .padding-horizontaly {
        padding: 0px 48px;
        position: relative;
        margin-top: 80px;
    }

    .cross-icon-dashboard {
        position: absolute;
        right: -6px;
        top: -45px;
    }

    .Petease-CBD-dropdown {
        min-width: 160px;
        min-height: 36px;
        padding: 5px 16px !important;
        padding-right: 40px !important;
    }

    .dropdown-field-box {
        /* max-width: 140px; */
        margin-bottom: 0;
    }

    .dropdown-field-box .dropdown-icon {
        position: absolute;
        right: 13px;
        top: 43%;
        transform: translateX(-50%);
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #F2F3F5 inset !important;
    }

    .add-categoery-modal-content {
        border-radius: 8px !important;
    }

    .add-client-dropdown-menu-content.client-name img {
        height: 24px;
        width: 24px;
        object-fit: cover;
        border-radius: 50px;
    }

    .pac-container {
        z-index: 9999;
    }

    .font-tip {
        font-size: 14px;
        color: #9C9C9C;
    }

    /* .checkout-main-wrraper .pet-review-tabs .tab-content .checkout-inner-tabs .nav-item .nav-link.active {
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: var(--secondary);
    border-radius: 50px;
    align-items: center;
} */
    .outer-box-new {
        display: flex;
        gap: 10px;
    }

    .formfield-custom {
        position: relative;
        width: 100%;
    }

    .min-width-input {
        min-width: 344px;
    }

    .formfield-custom .dropdown-icon {
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    a.del-btn-txt.dropdown-item.delete-btn {
        padding: 7px 20px;
        text-align: center;
        color: #F53F3F;
        font-weight: 600;
    }

    .service-btn-box a,
    .service-btn-box button {
        min-height: 36px;
    }

    .new-appointment-service-cancel-box.remove-variant {
        margin-top: 31px;
    }

    .checkout-appoitment-profile-img-box img {
        width: 24px;
        height: 24px;
    }

    textarea {
        resize: none;
    }

    .overflow-auto-model {
        max-height: 600px;
        overflow-y: auto;
        padding-bottom: 0;
    }

    .close-period-delete {
        display: flex;
        justify-content: flex-end;
        padding: 0px 20px;
        margin-bottom: 20px;
    }

    .close-period-delete a {
        border-radius: 8px;
    }

    .sticky-footer {
        position: sticky !important;
        bottom: 0;
        background-color: #fff;
    }

    .padding-cutm-24 {
        padding: 0px 24px;
    }

    .modal-footer {
        margin-top: 20px;
        background-color: #fff;
        z-index: 1;
        position: relative;
    }

    .formfield .tip-text {
        position: absolute;
        bottom: -16px;
    }

    .formfield:has(.tip-text) {
        margin-bottom: 24px;
    }

    .formfield.is-invalid .tip-text {
        position: absolute;
        bottom: 17px;
    }

    .slider.slider-calender-profile.slick-initialized.slick-slider {
        max-width: 446px;
        margin-bottom: 0px;
        margin-left: 17px;
    }

    .slider.slider-calender-profile .slick-track:before {
        display: none;
    }

    .slider.slider-calender-profile .slick-track:after {
        display: none;
    }

    .calender-next-btn.slick-arrow {
        position: absolute;
        width: 20px;
        height: 20px;
        /* background-color: green; */
        right: -7px;
        top: 7px;
        background-image: url(../images/next-arrow.png);
        background-repeat: no-repeat;
        background-color: var(--primary-color);
        border-radius: 50px;
        background-position: center;
    }

    .calender-prev-btn.slick-arrow {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: var(--primary-color);
        border-radius: 50px;
        /* background-color: green; */
        left: -5px;
        top: 7px;
        background-image: url(../images/next-arrow.png);
        transform: rotatey(176deg);
        background-repeat: no-repeat;
        background-position: center;
    }

    .slider-calender-profile-wrapper {
        position: relative;
    }

    .formfield.formfield-custom.is-invalid .dropdown-icon {
        top: 32%;
    }


    .custom-percentage-field {
        position: relative;
    }

    .custom-percentage-field #percentage-error {
        position: absolute;
        top: 38px;
        left: 55px;
    }

    .remember-me-box {
        display: flex;
        align-items: center;
    }

    .remember-me-box label {
        margin-bottom: 0;
    }

    .today-or-next-tabs li .nav-link.active {
        background-color: var(--primary-color);
        border-radius: 8px;
        color: #000;
        padding: 6px 20px;
        border: 0;
    }

    .today-or-next-tabs li .nav-link {
        background-color: #F2F3F5;
        border-radius: 8px;
        color: #000;
        padding: 6px 20px;
        border: 0;
    }

    .today-or-next-tabs {
        border-bottom: unset;
        gap: 10px;
    }

    .new-formfield {
        position: relative;
    }

    .new-formfield .form-icon {
        top: 50% !important;
        transform: translateY(-50%);
    }

    .business-location {
        position: relative;
        margin-bottom: 20px;
    }

    .business-location #business-location-error {
        position: absolute;
        top: 40px;
        left: 41px;
    }

    .forgot-password {
        position: absolute;
        right: 18px;
        top: 18% !important;
    }

    .test-new {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;

    }

    .intl-tel-input .country-list {
        position: absolute;
        z-index: 2;
        min-width: 384px;
        width: 100%;
    }

    .login-body-wrapper .intl-tel-input.allow-dropdown.separate-dial-code.iti-sdc-2 {
        width: 100%;
    }

    .login-body-wrapper .intl-tel-input.separate-dial-code .selected-dial-code {
        display: table-cell;
        vertical-align: middle;
        padding-left: 6px;
    }

    .login-body-wrapper .intl-tel-input.allow-dropdown.separate-dial-code.iti-sdc-4 {
        width: 100%;
    }

    .intl-tel-input {
        position: relative;
        display: inline-block;
        width: 100%;
    }

    .sticky-header-for-client {
        position: sticky;
        top: -42px;
        background-color: #ffff;
        z-index: 10;
        padding-top: 16px;
        padding-bottom: 10px;
    }

    .select-service-footer {
        position: sticky;
        bottom: 0;
        top: auto;
        padding: 10px 20px;
        background-color: #fff;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .intl-tel-input.separate-dial-code .selected-dial-code {
        display: table-cell;
        vertical-align: middle;
        padding-left: 10px !important;
    }

    .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag {
        width: 90px;
        padding: 0px 7px;
    }

    .add-new-client-info-wrapper .intl-tel-input.separate-dial-code .selected-dial-code {
        padding-left: 22px !important;
    }

    .add-bank-account-detail-body .intl-tel-input.separate-dial-code .selected-dial-code {
        padding-left: 22px !important;
    }

    .service-form-box .formfield.is-invalid {
        margin-bottom: 6px;
    }

    .selected-flag {
        max-height: 38px;
    }

    .formfield-custom:has(.dropdown.is-invalid) .dropdown-icon {
        top: 34%;
    }

    .new-location-model-body .intl-tel-input.separate-dial-code .selected-dial-code {
        padding-left: 22px !important;
    }

    .FAQ-new-question-wrapper .formfield textarea {
        resize: vertical;
    }

    .datepicker-months .table-condensed tr,
    .datepicker-years .table-condensed tr {
        align-items: center;
        justify-content: space-around;
        display: flex;
    }

    .datepicker-months .table-condensed tr td,
    .datepicker-years .table-condensed tr td {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        column-gap: 10px;
    }

    .datepicker-months .table-condensed,
    .datepicker-years .table-condensed {
        width: 100%;
    }

    .datepicker table tr td span {
        display: unset !important;
        width: unset !important;
        height: unset !important;
        line-height: unset !important;
        float: unset !important;
        margin: unset !important;
        cursor: pointer !important;
        -webkit-border-radius: unset !important;
        -moz-border-radius: unset !important;
        border-radius: unset !important;
    }

    .tooltip-pet-images img {
        max-width: 80px;
        height: 100px;
        object-fit: cover;
    }

    .calender-appointment-detail-status {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    /*-------------------    Error pages css   ----------------- */

    .error-wrapper {
        padding: 60px 0px;
    }

    .error-box {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .error-box h2 {
        font-size: 90px;
        color: #97A880;
        font-weight: 700;
        line-height: 1;
    }

    .error-box h4 {
        font-size: 32px;
        color: #97A880;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 40px;
    }

    .error-box img {
        margin-bottom: 20px;
    }

    .error-box p {
        font-size: 16px;
        line-height: 1;
        color: #000;
        font-weight: 400;
    }

    /*-------------------    Error pages css   ----------------- */


    .Cancel-appointment-model .modal-dialog {
        max-width: 520px !important;
    }

    .client-Appointments-tab-content .accordion .accordion-body {
        padding: 16px;
        border-bottom: 1px solid #EBEBEB;
    }

    .working-hour-header .dropdown-field-box {
        width: fit-content;
    }

    .working-hour-header {
        justify-content: flex-start;
        gap: 20px;
    }

    .modal-content.storefront-select-location-model-content .modal-footer {
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
    }

    .datepicker .day {
        border: 1px solid #5c5c5c82;
        /* display: flex; */
        text-align: center;
        cursor: pointer;
    }

    .datepicker .day:hover {
        background-color: #97a880;
        color: #fff;
    }

    .datepicker {
        width: 300px;
    }

    .datepicker .datepicker-days {
        padding: 20px;
    }

    .datepicker table.table-condensed {
        width: 100%;
    }

    label.quiz-default-color {
        color: #D4D4D4;
        font-weight: 500;
        border: 2px solid #D4D4D4;
    }

    .dropdown-breed-quiz {
        background-color: #D4D4D4;
    }


    .new-appointment-service-detail-wrapper>p {
        position: absolute;
        bottom: -22px;
        font-size: 14px;
        color: red;
        font-weight: 700;
        /* text-align: right; */
    }

    .new-appointment-service-detail-wrapper:has(.error-p) {
        margin-bottom: 20px;
    }

    .not-available-message {
        background-color: #FFF7E8;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 9px 16px;
    }

    .datepicker .datepicker-days td.active.day {
        background: #97a880;
        color: #fff;
    }

    .datepicker .datepicker-days td.today.day {
        background: #97a880;
        color: #fff;
    }

    .datepicker .datepicker-days th.next,
    .datepicker .datepicker-days th.prev {
        text-align: center;
        border: 1px solid #ddd;
        cursor: pointer;
    }

    .datepicker-months th.next,
    .datepicker-months th.prev {
        text-align: center;
        border: 1px solid #ddd;
        padding: 2px 10px;
        cursor: pointer;
    }

    .datepicker .datepicker-days th.datepicker-switch {
        text-align: center;
        border-bottom: 1px solid #ddd;
        cursor: pointer;
    }

    .datepicker-months th.datepicker-switch {
        border-bottom: 1px solid #ddd;
        cursor: pointer;
    }

    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background: #97a880 !important;
        color: #fff !important;
    }

    .daterangepicker td.in-range {
        background-color: #97a8806b !important;
        color: #FFF !important;
    }

    .daterangepicker .drp-buttons .btn.btn-primary {
        background-color: #97a880;
    }

    .daterangepicker td.end-date {
        border-radius: 0 4px 4px 0;
        color: #fff !important;
        background: #97a880 !important;
    }

    .calender-profile img {
        border-radius: 50px;
        height: 32px;
        width: 32px;
        object-fit: cover;
    }

    .calender-weekly-day-wrapper .calender-weekly-day {
        flex: 0 0 12%;
        max-width: 12%;
    }

    .calender-weekly-day-wrapper {
        overflow-x: auto;
    }

    .highlight {
        background-color: #D5DCCC;
    }

    .table-data-inner-div.highlight p {
        display: block;
    }

    .not-available-message {
        background-color: #FFF7E8;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 9px 16px;
    }

    .add-icon {
        display: flex;
        gap: 8px;
        align-items: center;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-top: 8px;
    }

    .select2-container--bootstrap4 .select2-dropdown {
        border-color: #ced4da;
        border-radius: 0;
        z-index: 99999;
    }

    .delete-breed {
        color: red;

    }

    .edit-delete-group {
        gap: 10px;
        display: flex;
    }

    img.dropdown-icon.breed-list {
        cursor: pointer;
    }

    .new-appointment-staff-availability {
        font-size: 11px;
    }

    .new-appointment-staff-dropdown-person-detail {
        font-size: 14px;
    }

    button.dropdown-toggle.staff-member-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        padding: 2px 35px 2px 10px;
    }

    .dropdown-toggle.staff-member-name p {
        font-size: 14px;
        color: red;
    }

    .dropdown-menu.new-appointment-staff-dropdown.show {
        max-height: 108px;
        overflow: auto;
    }

    .new-appointment-service-time-duration.reschedule-appointment-date-duration .new-appointment-service-time .datepicker {
        width: 100% !important;
        border-radius: 8px !important;
    }

    .time-class .time-display:nth-child(1) {
        z-index: 10;
    }

    .time-class .time-display:nth-child(2) {
        right: 12%;
        z-index: 9;
    }

    /* new-servce-details-page-css */

    .steps-box {
        color: #F53F3F;
        font-family: var(--font-semibold);
        font-size: 14px;
        margin-bottom: 2px;
    }

    .service-form-box label span {
        color: #9C9C9C;
        font-family: var(--font-medium);
    }

    .price-option-bx {
        box-shadow: 0px 2px 5px 0px #0000001A;
        border-radius: 8px;
        overflow: hidden;
    }

    .po-wrapper {
        background: #F4F6F2;
        font-size: 16px;
        text-align: left;
        padding: 16px;
    }

    .po-wrapper h5 {
        font-size: 16px;
    }

    .label-swich-bx {
        display: flex;
        gap: 16px;
        margin-bottom: 10px;
        align-items: center;
    }

    .price-option-bx .service-details-content {
        padding: 16px;
    }

    .doller-price span {
        flex: 0 0 41px;
    }

    .four-bx {
        grid-template-columns: repeat(4, 1fr);
    }

    .new-opt {
        max-width: 100%;
        margin-top: 20px;
    }

    .full-width-bx {
        max-width: 100%;
        text-align: left;
    }

    .heading-switch-bx {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 14px;
    }

    .heading-switch-bx h5 {
        font-size: 14px;
    }

    .heading-switch-bx .switch3 {
        margin: 0;
    }

    .name-table-heading {
        background: #EBEBEB;
        padding: 9px 16px;
    }

    .name-table-bx {
        border: 1px solid #EBEBEB;
        border-radius: 8px;
        overflow: hidden;
    }

    .name-heading-bx {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        align-items: center;
        margin-bottom: 20px;
    }

    .name-heading-bx h5 {
        font-size: 16px;
    }

    .name-table-heading h6 {
        font-size: 14px;
    }

    .name-table-bx li {
        padding: 9px 16px;
        border-top: 1px solid #EBEBEB;
        font-size: 14px;
    }

    span.new-appointment-service-cancel-box.remove-variant-box {
        float: right;
        margin-top: -28px;
    }

    /*==========================================   pet type steps =============================== */


    .petprofile-step1 {
        max-width: 1100px;
        margin: 0 auto;
    }

    .petprofile-loc {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 0 0 78px;
    }

    .petprofile-loc p {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        color: var(--primary-color);
        line-height: 24px;
    }

    .petprofile-steps h1 {
        text-align: center;
        font-size: 56px;
        font-weight: 700;
        line-height: 64px;
        max-width: 800px;
        margin: 0 auto 36px;

    }

    .petprofile-steps h1 span {
        color: var(--primary-color);
    }

    .petprofile-stepbox {
        border: 2px solid #21291D;
        border-radius: 15px;
        padding: 20px;
        width: fit-content;
        margin: 0 auto 24px;
        position: relative;
        min-height: 180px;
    }

    .petprofile-stepbox-inner {
        display: flex;
        align-items: center;
        gap: 20px;
        justify-content: space-between;
        /* padding: 40px 80px; */
    }

    .petprofile-stepbox-inner label {
        padding: 40px 60px;
        cursor: pointer;
        position: relative;
    }

    .petprofile-steplabel {
        display: flex;
        gap: 15px;
        align-items: center;
        border: 1px solid #21291D;
        padding: 10px;
        max-width: max-content;
        border-radius: 15px;
        width: 100%;
        position: absolute;
        top: -26px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;

    }

    .petprofile-stepbox-inner label {
        padding: 40px 60px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .petprofile-stepbox-inner label .pet-select-icon {
        display: none;
    }

    .petprofile-stepbox-inner label:has(input[type="radio"]:checked) .pet-select-icon {
        display: block;
    }

    img.pet-select-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
    }

    .petprofile-stepbox-inner label input {
        display: none;
    }

    .petprofile-steps>.primary-btn,
    .petprofile-stepbox-footer .primary-btn {
        text-align: center;
        margin: 0 auto 24px;
        width: 100%;
        width: fit-content;
        display: flex;
        padding: 12px 30px;
        border-radius: 50px;
        font-size: 16px;
        color: #fff;
        background-color: #D4D4D4;
        min-width: unset;
    }

    .petprofile-stepbox-footer .primary-btn {
        margin: unset;
    }

    .petprofile-stepbox-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .petprofile-stepbox-footer>a:first-child {
        color: #21291D;
        font-weight: 700;
    }

    .skip-pettype-btn {
        text-align: center;
        display: block;
        /* margin: 0 auto; */
        font-size: 14px;
        color: var(--primary-color);
    }

    .petprofile-steps:has(input[type="radio"]:checked)>.primary-btn {
        background-color: var(--primary-color);
    }

    .petprofile-steps h2 {
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        text-align: center;
        margin: 0 0 56px;
    }

    .petprofile-steps h2 span {
        color: var(--primary-color);
    }

    .petprofile-stepbox.stepbox-2 input,
    .petprofile-stepbox.stepbox-3 input,
    .petprofile-stepbox.stepbox-2 select,
    .petprofile-stepbox.stepbox-3 select {
        min-width: 328px;
        width: 100%;
        padding: 7px 16px;
        border-bottom: 1px solid #000 !important;
        border: 0;
    }

    .petprofile-stepbox.stepbox-2,
    .petprofile-stepbox.stepbox-3 {
        display: flex;
        align-items: center;
    }

    .petprofile-steps:has(input[type="text"]:focus) .petprofile-stepbox-footer .primary-btn {
        background-color: var(--primary-color);
    }

    .petprofile-stepbox.stepbox-2 input:focus,
    .petprofile-stepbox.stepbox-3 input:focus {
        border: 2px solid var(--primary-color);
        border-radius: 8px;
    }

    .header-wrapper-storefront .stepping-form-progress-bar-box {
        position: relative;
        top: unset;
        flex-wrap: nowrap;
        margin-bottom: 20px;
        padding: 10px 0px;
    }

    .header-wrapper-storefront .stepping-form-progress-bar-box .stepping-form-progress-bar {
        max-width: 100%;
    }

    .header-wrapper-storefront .stepping-form-progress-bar-box span {
        white-space: nowrap;
    }

    .header-wrapper-storefront:has(.back-cross) {
        flex-direction: column;
    }

    .back-cross {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin: 0 0 16px;
    }

    .petprofile-steplabel h5 {
        font-size: 16px;
    }

    .petprofile-steplabel h5 span {
        font-size: 14px;
        font-weight: 500;
        display: block;
        font-family: 'inter-Regular';
    }

    .petprofile-stepbox.stepbox-3 .dropdown-icon {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
    }

    .petprofile-stepbox.stepbox-3 .dropdown-menu.show {
        display: block;
        width: 100%;
    }

    .hair-size-guide-main {
        display: grid;
        grid-template-columns: .5fr 1fr;
        row-gap: 10px;
    }

    .hair-size-guide-main h4,
    .hair-size-guide-about h4 {
        font-size: 16px;
        line-height: 24px;
    }

    .hair-size-guide-about {
        padding-top: 10px;
        border-top: 1px solid;
        margin-top: 10px;
    }

    .Size-guide-tab-wrapper .Size-guide-tabs {
        flex-wrap: nowrap;
    }

    .Size-guide-tab-wrapper .Size-guide-tabs li {
        width: 100%;
    }

    .Size-guide-tab-wrapper .Size-guide-tabs li button {
        width: 100%;
        justify-content: center;
    }

    .petprofile-steps-header h2 {
        margin: 0 0 10px;
    }

    .petprofile-steps-header {
        margin: 0 0 50px;
    }

    .petprofile-steps-header p {
        text-align: center;
    }

    .complete-profile-img-box {
        display: flex;
        justify-content: center;
        margin: 0 0 36px;
    }

    .petprofile-stepbox-footer .primary-btn.active {
        background-color: var(--primary-color);
    }

    /* ==========================================   pet type steps =============================== *

/* ==========================================   visitor pages   =============================== */
    .page-main-heading {
        font-size: 24px;
       padding-left: 50px;
    }

    .page-main-heading span {
        color: var(--primary-color);
    }

    .bs-tab-list,
    .bs-filter-list {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .bs-tab-list li button {
        padding: 9px 20px;
        border: 2px solid var(--primary-color) !important;
        display: inline-flex;
        font-size: 13px;
        line-height: 1;
        gap: 8px;
        color: var(--primary-color);
        align-items: center;
        border-radius: 50px !important;
        font-family: var(--font-semibold);
    }

    .bs-tab-list li button.nav-link.active,
    .bs-tab-list li button.nav-link:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    .most-popular-block h6 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .mp-tags-heading p {
        font-family: var(--font-bold);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .book-services-top {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        background: #F7F8FA;
        border-radius: 20px;
        align-items: center;
        padding: 10px;
        margin-top: 10px;
    }

    .bs-filter-list a {
        padding: 5px 16px;
        border-radius: 100px;
        background: #fff;
        color: var(--primary-color);
    }

    .most-popular-box {
        border: 2px solid #EBEBEB;
        border-radius: 20px;
        padding: 20px;

    }

    .most-popular-box h5 {
        font-size: 14px;
        color: var(--primary-color);
    }

    .most-popular-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
        overflow-x: auto;
    }

    .cs-cat-heading {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .cs-cat-heading h4 {
        font-size: 16px;
        line-height: 24px;
    }

    .bs-cat-content h3 {
        color: var(--primary-color);
    }

    .bs-cat-content p {
        font-size: 14px;
        line-height: 22px;
    }

    .bs-cat-content {
        background: #F7F8FA;

        border-radius: 20px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .small-container {
        max-width: 1240px;
    }

    .bs-availabe-services-bx,
    .bs-category-box,
    .most-popular-block {
        margin-top: 20px;
    }

    .bs-availabe-services-bx h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .bs-availabe-services-list li+li {
        margin-top: 10px;
    }

    .bs-availabe-services-list .most-popular-box {
        max-width: 100%;
    }

    .most-popular-tags p {
        border: 2px solid #EBEBEB;
        padding: 8px 12px;
        border-radius: 100px;
        display: inline-flex;
        font-size: 14px;
        font-family: var(--font-semibold);
    }

    .most-popular-tags {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    section.book-services-section {
        padding: 40px 0px;
    }

    .bs-right-filter {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .filter-btn-box {
        border: 2px solid var(--primary-color);
        padding: 8px;
        border-radius: 50px;
        width: 36px;
        height: 36px;
        display: flex;
        position: relative;
    }

    .filter-btn-box img {
        max-width: 20px;
    }

    .filter-number-badge {
        background-color: var(--primary-color);
        border-radius: 50px;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border: 3px solid #fff;
        position: absolute;
        top: -5px;
        right: -14px;
        color: #fff;
    }

    .bs-availabe-services-bx ul li {
        margin-left: unset;
        border-left: unset;
        padding: unset;
        cursor: pointer;
    }

    .bs-category-box .accordion .accordion-header button {
        padding: 0;
    }

    .bs-category-box .accordion .accordion-body {
        padding: 0;
    }

    .bs-category-box .accordion .accordion-item .accordion-button::after {
        width: 25px;
        height: 25px;
        background-size: 0.8rem;
        border: 2px solid var(--heading-color);
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-position: center;
        border-radius: 15px;
    }

    .bs-category-box .accordion .accordion-item h2 button {
        background: #F7F8FA;
        border-radius: 20px;
        padding: 20px;
        align-items: start;
    }

    .bs-category-box .accordion .accordion-item:last-of-type .accordion-button.collapsed {
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .bs-availabe-services-list .accordion .accordion-item h2 button {
        background-color: #fff;
        padding: 0;
        margin-bottom: 10px;
    }

    .available-service-badge {
        background-color: #F4F6F2;
        display: inline-block;
        padding: 6px 12px;
        border-radius: 10px;
        color: var(--primary-color);
        margin: 0 0 10px;
    }

    .bs-availabe-services-list .accordion .accordion-body p {
        font-size: 14px;
        line-height: 22px;
    }

    .availabe-services-pricing .formfield select {
        width: 100%;
        padding: 9px 12px;
        border-radius: 50px;
        border: 2px solid #EBEBEB;
    }

    .availabe-services-pricing .formfield {
        position: relative;
    }

    .availabe-services-pricing .formfield .dropdown-icon {
        position: absolute;
        top: 23px;
        right: 20px;
    }

    .availabe-services-pricing {
        margin: 10px 0 0;
    }

    .pricing-option-desclaimer {
        background-color: #F4F6F2;
        padding: 16px;
        border-radius: 10px;
    }

    .pricing-option-desclaimer p {
        font-size: 14px;
        line-height: 22px;
    }

    .pricing-option-desclaimer h3 {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        margin: 0;
    }

    .fixed-footer-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 10px 0px;
    }

    .fixed-footer-wrapper h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .fixed-footer-wrapper p {
        font-size: 14px;
        line-height: 24px;
    }

    .fixed-footer-wrapper .primary-btn {
        padding: 12px 30px;
        border-radius: 100px;
        color: #fff;
        line-height: 24px;
        min-width: 127px;
    }

    section.fixed-footer {
        border-top: 1px solid #EBEBEB;
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #fff;
        z-index: 9;
    }

    body:has(.fixed-footer) main {
        padding-bottom: 77px;
    }

    .bs-left-tab ul {
        border-bottom: 0 !important;
    }

    .sticky-header-content {
        padding: 20px 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        background-color: #Fff;
        z-index: 99;
    }

    .services-breadcrumb {
        display: flex;
        gap: 50px;
        align-items: center;
    }

    .breadcrumb-number {
        width: 24px;
        height: 24px;
        background-color: #F2F3F5;
        color: #D4D4D4;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .services-breadcrumb li {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        gap: 4px;
    }

    .services-breadcrumb li p {
        color: #D4D4D4;
        font-size: 13px;
        line-height: 22px;
        font-weight: 600;
    }

    .services-breadcrumb li:after {
        content: "";
        width: 50px;
        height: 1px;
        background-color: #EBEBEB;
        position: absolute;
        top: 47%;
        transform: translateY(-50%);
        right: -50px;
    }

    .services-breadcrumb li:last-child:after {
        display: none;
    }

    .services-breadcrumb li.active p {
        color: var(--primary-color);
    }

    .services-breadcrumb li.active .breadcrumb-number {
        color: #fff;
        background-color: var(--primary-color);
    }

    .services-breadcrumb-box {
        padding: 10px 0px;
    }

    .most-popular-haed {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 10px;
    }

    .add-booking-btn-box {
        display: flex;
        justify-content: end;
        align-items: center;
        padding: 16px 0 0;
    }

    .round-btn {
        border-radius: 50px;
        padding: 12px 30px;
        width: fit-content;
        color: #fff;
    }

    .pet-love-box {
        padding: 16px;
        border-radius: 20px;
        border: 2px solid #EBEBEB;
    }

    .pet-love-box:hover,
    .pet-love-box.active {
        border-color: var(--primary-color);
    }

    .pet-love-box .formfield select {
        margin: 10px 0px;
        cursor: pointer;
    }

    .pet-love-box .formfield img {
        position: absolute;
        top: 16px;
        right: 15px;
    }

    .pet-love-box h4 {
        font-size: 14px;
        line-height: 18px;
    }

    .pet-love-box p {
        font-size: 14px;
        line-height: 22px;
    }

    .pet-love-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 10px 0 0;
    }

    .pet-love-list li+li {
        margin-top: 20px;
    }

    .db-popup-footer {
        display: flex;
        gap: 10px;
        padding: 10px 20px;
    }

    .db-popup-footer a {
        width: 100%;
        padding: 12px 30px !important;
        font-weight: 700;
    }

    .db-popup-footer .gray-btn {
        background-color: #D7D8DA;
    }

    .db-popup-footer .light-btn {
        color: #696969;
    }

    .pet-love-box.pet-behave-box {
        display: grid;
        grid-template-columns: 1fr 0.5fr;
        column-gap: 10px;
    }

    .pet-behave-time {
        display: flex;
        align-items: center;
        gap: 5px;
        justify-content: flex-end;
    }

    .pet-behave-time p {
        font-size: 14px;
    }

    .pet-behave-time img {
        max-width: 14px;
    }

    .pet-behave-charge h4 {
        text-align: right;
        font-size: 12px;
        line-height: 20px;
    }

    .pet-behave-charge h2 {
        font-size: 24px;
        line-height: 32px;
        text-align: right;
    }

    .pet-behave-details h3 {
        font-size: 16px;
        line-height: 24px;
    }

    .pet-behave-details p {
        font-size: 14px;
        line-height: 22px;
    }



    .popup-sec.fullhight {
        height: 100vh;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        background: rgba(29, 33, 41, 0.60);
    }

    .popup-sec {
        background: rgba(29, 33, 41, 0.60);
        padding: 40px 0px;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
    }

    .popup-modal {
        max-width: 480px;
        width: 100%;
        border-radius: 20px;
        background: var(---color-bg-2, #FFF);
    }

    .popup-header {
        padding: 16px;
        display: flex;
        justify-content: flex-end;
    }

    .popup-body {
        padding: 16px 20px;
    }

    .pet-profile-box {
        padding: 20px;
        border-radius: 20px;
        background: var(---color-bg-2, #FFF);
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    .pet-profile-popup h3 {
        text-align: center;
        font-size: 24px;
        line-height: 32px;
    }

    .pet-profile-popup>p {
        text-align: center;
        font-size: 14px;
        line-height: 22px;
        margin: 0 0 26px;
    }

    .popup-footer {
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }

    .profile-edit-delete-box .outline-btn {
        max-width: 241px;
        width: 100%;
        border-radius: 100px;
        border: 2px solid var(--primary-color) !important;
        color: var(--primary-color);
    }

    .profile-edit-delete-box .outline-btn:hover {
        color: #fff;
    }

    .profile-edit-delete-box {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 16px;
    }

    .profile-edit-delete-box .profile-delete-btn {
        color: red;
        font-weight: 600;
    }

    .priary-color {
        color: var(--primary-color);
    }

    .popup-footer .round-btn {
        width: 100%;
    }

    .modal-content.add-pet-profile-content {
        border-radius: 20px;
    }

    .pet-profile-modal-body h3 {
        text-align: center;
        font-size: 24px;
        line-height: 32px;
        margin: 0 0 10px;
    }

    .pet-profile-modal-body p {
        text-align: center;
        font-size: 14px;
        line-height: 22px;
        margin: 0 0 16px;
    }

    .pet-profile-form-box {
        padding: 16px;
        border-radius: 20px;
        border: 1px solid #EBEBEB;
    }

    .form-group label {
        position: relative !important;
        opacity: 1 !important;
        top: unset !important;
        left: unset !important;
        transform: unset !important;
    }

    .form-group label span {
        color: red;
    }

    .form-group label p {
        font-family: 'inter-Light';
        display: inline-block;
        margin: 0;
    }

    .form-group .form-field {
        position: relative;
    }

    .form-group .form-field .dropdown-icon {
        position: absolute;
        top: 15px;
        right: 20px;
    }

    .full-btn {
        width: 100% !important;
        min-width: auto;
    }

    .add-pet-profile-modal .modal-header {
        border-bottom: 0;
        display: flex;
        justify-content: end;
    }

    .select-pet-profile-box {
        border-radius: 20px;
        border: 2px solid var(---color-text-4, #D4D4D4);
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .select-pet-profile-box img {
        max-width: 45px;
    }

    .add-pet-profile-box {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .select-pet-profile>div+div {
        margin-top: 16px;
    }

    .add-pet-profile-box a {
        width: fit-content;
        min-width: unset;
    }

    .select-pet-profile-box:hover,
    .select-pet-profile-box.active {
        border-color: var(--primary-color);
    }

    .pet-profile-popup .book-service-summary-detail-list-desclaimer {
        align-items: start;
    }

    .pet-profile-popup .book-service-summary-detail-list-desclaimer img {
        margin-top: 6px;
    }

    .pet-profile-popup .book-service-summary-detail-list-desclaimer p {
        font-size: 14px;
    }

    .book-services-staff-date {
        margin: 10px 0 0;
    }

    .booking-status {
        display: flex;
        align-items: center;
        margin: 10px 0px 20px;
        gap: 10px;
    }

    .booking-service-date {
        line-height: 24px;
        margin: 0 0 10px;
        padding: 8px 0px;
    }

    .booking-service-date span {
        color: var(--primary-color);
    }

    .booking-service-time-btn label {
        padding: 7px 13px;
        border-radius: 50px;
        border: 2px solid #EBEBEB;
        cursor: pointer;
    }

    .booking-service-time-btn label input[type='radio'] {
        display: none;
    }

    .booking-service-time-btn label:has(input:checked) {
        background-color: var(--primary-color);
        border-color: var(--primary-color);
    }

    .booking-service-time-btn label:has(input:checked) p {
        color: #fff;
    }

    .booking-service-time {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .booking-service-time-btn {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .services-staff-date-box h3,
    .booking-preference-wrapper h3,
    .select-staff-wrapper h3 {
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 10px;
    }

    .booking-preference-box {
        padding: 16px;
        border-radius: 20px;
        border: 2px solid #EBEBEB;
        background: #FFF;
        cursor: pointer;
    }

    .booking-preference-box:hover,
    .booking-preference-box.active {
        border-color: var(--primary-color);
    }

    .booking-preference-box h4 {
        font-size: 16px;
        line-height: 24px;
    }

    .booking-preference-box p {
        font-size: 14px;
        line-height: 22px;
    }

    .booking-preference-wrapper>div+div,
    .select-staff-wrapper>div+div {
        margin-top: 16px;
    }

    .select-staff-box {
        padding: 16px;
        border-radius: 20px;
        border: 2px solid #EBEBEB;
        background: #FFF;
    }

    .select-staff-box {
        padding: 16px;
        border-radius: 20px;
        border: 2px solid #EBEBEB;
        background: #FFF;
        display: grid;
        grid-template-columns: 1fr 0.4fr;
        align-items: center;
        margin-bottom: 20px;
    }

    .select-staff-box:hover,
    .select-staff-box.active {
        border-color: var(--primary-color);
        cursor: pointer;
    }

    .select-staff-profile {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .select-staff-profile .select-staff-profile-para h4 {
        font-size: 16px;
        line-height: 24px;
    }

    .select-staff-profile .select-staff-profile-para p {
        font-size: 14px;
        line-height: 24px;
    }

    .select-staff-availability h4 {
        font-size: 16px;
        line-height: 24px;
        color: var(--primary-color);
    }

    .select-staff-availability p {
        font-size: 14px;
        line-height: 24px;
        color: #9C9C9C;
    }

    .comman-box h3 {
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 10px;
    }

    .comman-outline-btn {
        padding: 16px;
        border-radius: 20px;
        border: 2px solid #EBEBEB;
        background: #FFF;
    }

    .appointment-info-date,
    .appointment-info-time {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .appointment-info-date img {
        width: 24px;
    }

    .appointment-info-date .green-badge {
        background-color: #E8FFEA;
        color: #00B42A;
        padding: 0px 8px;
        font-size: 14px;
        line-height: 22px;
        border-radius: 2px;
    }

    .appointment-info-date p,
    .appointment-info-time p {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
    }

    .appointment-info-date span {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        color: var(--primary-color);
    }

    .appointment-category-prize {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .appointment-category h3 {
        margin: 0;
    }

    .behavioural-charge h3 {
        font-size: 16px;
        line-height: 24px;
    }

    .behavioural-charge {
        display: flex;
        justify-content: space-between;
        margin: 0 0 10px;
        align-items: center;
    }

    .comman-box-heading {
        display: flex;
        justify-content: space-between;
    }

    .primary-color,
    .primary-color:hover {
        color: var(--primary-color);
    }

    .calcellation-policy p {
        font-size: 14px;
        line-height: 22px;
        margin: 0 0 8px;
    }

    .booking-important-info p {
        font-size: 14px;
        line-height: 22px;
    }

    .booking-important-info li {
        margin-left: 15px;
        list-style-type: disc;
    }

    .booking-notes-box .form-field textarea {
        height: 100px;
        resize: none;
    }

    .booking-reference-photo {
        max-width: 89px;
        height: 133px;
        width: 100%;
        min-width: 89px;
    }

    .booking-reference-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .booking-reference-photo-box {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
    }

    .form-field.file-upload-field label {
        max-width: 89px;
        width: 100%;
        height: 100%;
        background-color: #0FC6C2;
    }

    .form-field.file-upload-field label input[type='file'] {
        display: none;
    }

    .form-field.file-upload-field label {
        min-width: 89px;
        width: 100%;
        height: 100%;
        background-color: #fff;
        padding: 39px 0px;
        margin: 0;
        border-radius: 10px;
        border: 2px dashed #F4F6F2;
        cursor: pointer;
    }

    .file-upload-icon-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .file-upload-icon-box h3 {
        margin: 0;
        color: var(--primary-color);
    }

    .confirm-book-location {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .book-location-details h3 {
        margin: 0;
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 4px;
    }

    .book-location-details>p {
        font-size: 14px;
        line-height: 22px;
        color: #9C9C9C;
        margin: 0 0 4px;
    }

    .book-location-details .gray-badge {
        padding: 1px 8px;
        border-radius: 8px;
        background: #F2F3F5;
        color: #21291D;
        font-size: 14px;
        line-height: 22px;
        display: inline-block;
        margin: 0 0 8px;
    }

    .loc-rating-review {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .loc-rating {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .loc-rating h3 {
        margin: 0;
    }

    .loc-review p {
        font-size: 16px;
        line-height: 24px;
    }

    .book-location-img-box {
        padding: 20px;
        max-width: 120px;
        width: 100%;
        height: 100%;
    }

    .book-location-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .confirm-book-client-list li {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .confirm-book-client-list li+li {
        margin-top: 10px;
    }

    .confirm-book-client-list li p {
        line-height: 24px;
        font-size: 16px;
        font-weight: 600;
    }

    .confirm-book-payment-list li label {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .confirm-book-payment-list li label {
        margin: 0;
        cursor: pointer;
    }

    .payment-type-box h3 {
        margin: 0;
        line-height: 24px;
        font-size: 16px;
    }

    .payment-type-box p {
        font-size: 16px;
        font-weight: 400;
        font-family: 'inter-Light';
        line-height: 24px;
    }

    .confirm-book-payment-list li+li {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #EBEBEB;
    }

    .confirm-book-payment-list li label .radio-formfeild label {
        margin-bottom: 10px;
    }

    .form-field.flex-form-field {
        display: flex;
        gap: 8px;
    }

    .form-field.flex-form-field .comman-outline-btn {
        max-width: 91px;
        width: 100%;
        font-size: 14px;
        padding: 5px 16px;
        line-height: 22px;
        border-radius: 10px;
        border-color: var(--primary-color);
        color: var(--primary-color);
    }

    .confirm-book-summary-list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .confirm-book-summary-list li p {
        font-size: 16px;
        font-weight: 500;
        font-family: 'inter-Medium';
        line-height: 24px;
    }

    .confirm-book-summary-list li+li {
        margin-top: 5px;
    }

    .confirm-book-summary-list li:last-child {
        margin-top: 10px;
        padding-top: 20px;
        border-top: 1px solid #EBEBEB;
    }

    .discount-list-p p {
        color: var(--primary-color);
    }

    .confirm-book-payment-option-box a {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .modal-content.cancel-policy-content {
        border-radius: 20px;
    }

    .cancel-policy-modal .modal-header {
        border-bottom: 0;
    }

    .booking-confirm-banner {
        width: 100%;
        background: var(---success-4, #4CD263);
        padding: 20px;
    }

    .cross-page-box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .cross-page-box a img {
        filter: invert(1) brightness(5);
    }

    .booking-confirm-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .booking-confirm-details h3 {
        color: #fff;
        font-size: 24px;
        line-height: 32px;
    }

    .booking-confirm-details .white-btn {
        background-color: #fff;
        padding: 12px 30px;
        border-radius: 50px;
        font-size: 16px;
        line-height: 24px;
    }

    .booking-confirm-detail {
        max-width: 480px;
        width: 100%;
        margin: 10px auto 0;
        padding: 0 20px;
    }

    .confirmed-logo-box {
        padding: 24px 0px;
        text-align: center;
    }

    .gray-commman-box {
        border-radius: 20px;
        background: var(---color-fill-1, #F7F8FA);
        padding: 16px;
        margin: 10px 0px;
    }

    .booked-items-amount ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .booked-items-total-amount ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .booked-items-total-amount ul li:last-child {
        margin-top: 10px;
        padding-top: 20px;
        border-top: 1px solid #EBEBEB;
    }

    .booked-items-total-amount ul li p {
        font-family: 'inter-Medium';
    }

    .booked-items-total-amount ul li span {
        font-size: 12px;
        line-height: 18px;
        color: #9C9C9C;
    }

    /* ==========================================   visitor pages   =============================== */




    .stepping-form-progress-bar.step1::before {
        width: 15% !important;
    }

    .stepping-form-progress-bar.step2::before {
        width: 35% !important;
    }

    .stepping-form-progress-bar.step3::before {
        width: 65% !important;
    }

    .stepping-form-progress-bar.step4::before {
        width: 97% !important;
    }

    .primary-bg {
        background-color: var(--primary-color) !important;
    }

    #output {
        padding: 20px;
        background: #dadada;
    }

    /* form {
        margin-top: 20px;
    } */

    select {
        width: 300px;
    }




    .select-pet-profile {
        max-height: 534px;
        overflow: auto;
        padding-right: 10px;
    }

    .edit-session-pet-profile form {
        max-width: 480px;
        width: 100%;
    }

    .selected-pet {

        border-color: var(--primary-color);
    }

    .add-pet-to-service input[type='checkbox'] {
        display: none;
    }

    .mp-tags-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 0 10px;
    }

    .book-service-date-time-wrapper .book-service-date-timimg-wrapper .book-service-date-timimg-box .book-service-date-timimg-box-inner {
        display: grid !important;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }

    .book-service-date-time .book-service-date-time-wrapper {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        flex-direction: column;
    }

    .page-main-outer {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .page-main-outer select {
        width: fit-content;
        border: 0;
        font-size: 24px;
        font-weight: 600;
        color: var(--primary-color);
    }

    .page-main-outer select:focus-visible {
        border: 0;
        outline: 0;
    }

    .time-class .time-display:nth-child(4) {
        right: 36%;
        z-index: 7;
    }

    .time-class .time-display:nth-child(5) {
        right: 48%;
        z-index: 5;
    }

    .time-class .time-display:hover {
        z-index: 11;
    }

    .hasDatepicker.appointment-date .ui-widget.ui-widget-content {
        border: 1px solid #EBEBEB;
        border-radius: 20px;
        overflow: hidden;
        max-width: 350px;
        width: 100%;
        min-width: 350px;
    }

    .hasDatepicker.appointment-date .ui-datepicker-calendar tr td a.ui-state-active {
        background-color: #97a880 !important;
        border: #97a880 !important;
    }

    .hasDatepicker.appointment-date .ui-datepicker-calendar tr:hover td a.ui-state-active {
        background-color: #97a880 !important;
        border: #97a880 !important;
        color: #fff !important;
        border: 1px solid !important;
    }

    .hasDatepicker.appointment-date .ui-datepicker-calendar tr:hover td a {
        background: #fff !important;
        color: #000 !important;
    }

    .hasDatepicker.appointment-date .ui-datepicker-calendar tr td a.ui-state-default:hover {
        border: 1px solid #97a880 !important;
    }

    .hasDatepicker.appointment-date .ui-datepicker-calendar tr td a.ui-state-default {
        border: 1px solid transparent !important;
    }

    .hasDatepicker.appointment-date .ui-state-highlight,
    .ui-widget-content .ui-state-highlight {
        border: 1px solid transparent !important;
        background: #fff !important;
        color: #000 !important;
    }

    .hasDatepicker.appointment-date .ui-datepicker-title>select {
        background-color: #F2F3F5;
        border: 0;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 400;
        color: #21291D;
        border-radius: 5px;
        max-width: 80px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.25354 1.21436L8.54643 0.507249L5.0109 4.04278L1.47537 0.507249L0.768259 1.21436L4.65732 5.10341C4.65732 5.10341 4.65735 5.10344 5.0109 4.74989L4.65732 5.10341L5.0109 5.457L9.25354 1.21436Z' fill='%23696969'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 62px 17px;
    }

    .hasDatepicker.appointment-date .ui-datepicker-title>select:focus-visible {
        border: 0;
        outline: 0;
    }

    .hasDatepicker.appointment-date .ui-datepicker-title {
        display: flex;
        gap: 5px;
        margin: 0;
    }

    .hasDatepicker.appointment-date .ui-datepicker-prev.ui-corner-all {
        right: 50px;
        left: auto;
        max-width: 24px;
        width: 100%;
        padding: 10px 14px;
        height: 24px;
        border-radius: 50px;
        background-color: #F2F3F5;
        transform: rotate(180deg) translateY(50%) !important;
        top: 12px;
        border:unset;

    }

    .hasDatepicker.appointment-date .ui-datepicker-next.ui-corner-all {
        max-width: 24px;
        height: 24px;
        width: 100%;
        padding: 10px 14px;
        border-radius: 50px;
        background-color: #F2F3F5;
        right: 9px;
        border:unset;
    }

    .hasDatepicker.appointment-date .ui-corner-all {
        background-position: center;
        border-bottom: 1px solid #EBEBEB;
        padding: 10px 16px;
        z-index: 9 !important;
    }

    .hasDatepicker.appointment-date .ui-corner-all .ui-icon {
        width: unset;
    }

    /* cart css start */

    .book-service-cart-main .popup-header {
        padding: 16px;
        display: flex;
        justify-content: space-between;
    }

    .book-service-cart-main .popup-header h3 {
        font-size: 24px;
    }

    .service-cart-box {
        border-radius: 20px;
        border: 2px solid var(---color-border-2, #EBEBEB);
        background: var(---color-bg-5, #FFF);
        padding: 16px;
    }

    .service-cart-info {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .service-cart-info h4 {
        font-size: 16px;
        line-height: 24px;
    }

    .service-cart-detail-prize {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .service-cart-detail-prize p {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
    }

    .service-cart-inner>h4 {
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 10px;
    }

    .service-cart-summary {
        border-radius: 20px;
        border: 2px solid var(---color-border-2, #EBEBEB);
        background: var(---color-bg-5, #FFF);
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .service-cart-summary h4 {
        font-size: 16px;
        line-height: 24px;
    }

    .service-cart-summary-main h3 {
        margin: 0 0 10px;
        font-size: 16px;
        line-height: 24px;
    }

    /* cart css end */

    .comman-outline-btn-main h3 {
        margin: 0 0 10px;
    }

    .comman-outline-btn-main {
        margin: 10px 0px;
    }

    .comman-outline-btn-main h3 {
        margin: 0 0 10px;
    }

    .comman-outline-main h3 {
        margin: 0 0 10px;
    }

    .comman-outline-main {
        margin: 10px 0px;
    }

    .comman-outline-head-main .appointment-info-date {
        flex-wrap: wrap;
    }

    .comman-outline-head-main {
        padding-bottom: 10px;
        margin-bottom: 5px;
        border-bottom: 1px solid #ebebeb;
    }


    .loading-container {
        position: relative;
        height: 40px;
        width: 40px;
    }

    .loading-progress {
        position: absolute;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        /* border: 5px solid #ACCAFF36; */
        border-radius: 50%;

        &::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #fff;
            /* top: -5px;
    left: -5px; */
            animation: spin 1s linear infinite;
        }
    }

    .loader-progress {
        position: absolute;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        /* border: 5px solid #ACCAFF36; */
        border-radius: 50%;

        &::before {
            content: "";
            position: absolute;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #fff;
            /* top: -5px;
      left: -5px; */
            animation: spin 1s linear infinite;
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }



    .loading-container {
        position: fixed;
        height: 5rem;
        width: 5rem;
        top: 50%;
        z-index: 99999999;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    .loading-container p {
        white-space: nowrap;
    }

    body:has(.loading-progress),
    body:has(.loader-progress) {
        position: relative;
    }

    body:has(.loading-progress):after {
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: var(--primary-color);
        position: absolute;
        z-index: 9999;
    }

    body:has(.loader-progress):after {
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: var(--primary-color);
        position: absolute;
        z-index: 9999;
    }

    .loading-container>p {
        position: absolute;
        top: 55px;
        left: -145px;
        color: #fff;
        font-size: 24px;
        font-weight: 700;
    }

    .booking-service-time {
        display: flex;
        gap: 10px;
        flex-direction: column;
    }

    .booking-service-time-btn p {
        font-size: 11px;
    }

    .book-services-staff-date .book-service-date-timimg-wrapper {
        max-width: 100%;
    }




    .booking-service-time>div {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .booking-service-time-head h3 {
        color: var(--primary-color);
    }

    .booking-service-time-head {
        grid-column: span 3;
        margin-bottom: 20px;
    }


    .page-main-outer h1 {
        white-space: nowrap;
    }

    .formfield.m-0.change-next-pet select {
        padding-right: 30px;
        z-index: 11;
        position: relative;
        background-color: transparent;
        cursor: pointer;
    }

    .change-next-pet .form-icon {
        right: 11px;
        top: 4px;
        z-index: 10;
    }

    .change-next-pet .form-icon .dropdown-icon {
        all: unset;
        position: relative;
        transform: unset;
        top: unset;
        right: unset;
    }

    .book-service-date-time-wrapper .hasDatepicker.appointment-date .ui-datepicker-calendar tr td a.ui-state-highlight {
        border: 1px solid var(--primary-color) !important;
    }

    /* Dog Loader CSS */
    .loader {
        width: 100%;
        height: 100%;
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        background: linear-gradient(to bottom left, #79C7C5 40%, #F9FBFF 100%);
        z-index: 9999;
    }

    .dog {
        width: 100px;
        height: 100px;
        z-index: 9999;
    }

    .dog:before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(118, 118, 118, 0.233);
        border-radius: 50%;
        -webkit-transform: translateY(-30%) scale(1.5);
        transform: translateY(-30%) scale(1.5);
    }

    .dog * {
        position: absolute;
    }

    .dog-body {
        top: -50%;
        -webkit-animation: dog-body 200ms ease-in-out infinite alternate;
        animation: dog-body 200ms ease-in-out infinite alternate;
    }

    .dog-body:before {
        content: '';
        position: absolute;
        bottom: 90%;
        right: 50%;
        width: 90%;
        height: 90%;
        border-top-left-radius: 100%;
        border-bottom-left-radius: 10%;
        border-top-right-radius: 10%;
        background: rgba(118, 118, 118, 0.233);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-animation: dog-tail-blur 200ms 33.3333333333ms ease-in-out infinite alternate both;
        animation: dog-tail-blur 200ms 33.3333333333ms ease-in-out infinite alternate both;
    }

    @-webkit-keyframes dog-tail-blur {
        from {
            -webkit-transform: rotate(0);
            transform: rotate(0);
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        to {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            opacity: 0;
        }
    }

    @keyframes dog-tail-blur {
        from {
            -webkit-transform: rotate(0);
            transform: rotate(0);
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        to {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
            opacity: 0;
        }
    }

    @-webkit-keyframes dog-body {
        from {
            -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
        }

        to {
            -webkit-transform: translateX(10%);
            transform: translateX(10%);
        }
    }

    @keyframes dog-body {
        from {
            -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
        }

        to {
            -webkit-transform: translateX(10%);
            transform: translateX(10%);
        }
    }

    @-webkit-keyframes dog-head {

        from,
        to {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        33.3% {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        66.6% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
    }

    @keyframes dog-head {

        from,
        to {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        33.3% {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        66.6% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
    }

    .dog-torso {
        display: none;
        top: -20%;
        animation: dog-torso 200ms ease-in-out infinite alternate-reverse;
    }

    @-webkit-keyframes dog-torso {
        from {
            -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
        }

        to {
            -webkit-transform: translateX(5%);
            transform: translateX(5%);
        }
    }

    @keyframes dog-torso {
        from {
            -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
        }

        to {
            -webkit-transform: translateX(5%);
            transform: translateX(5%);
        }
    }

    .dog-eyes {
        width: 60%;
        top: 46%;
        left: 20%;
        z-index: 1;
    }

    .dog-eyes:before {
        content: '';
        display: block;
        height: 40px;
        width: 40px;
        border-radius: 40px;
        position: absolute;
        background: #F5832C;
        top: -10px;
        left: -10px;
        z-index: 0;
        box-shadow: inset -12px -8px 40px rgba(118, 118, 118, 0.2);
        border: 4px solid #fcfcfc;
        border-left-width: 0;
        border-bottom-width: 0;
        border-top-width: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);

    }

    .dog-eye {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #544258;
        z-index: 1;
        -webkit-animation: dog-eye 1800ms infinite;
        animation: dog-eye 1800ms infinite;
    }

    @-webkit-keyframes dog-eye {

        from,
        to {
            -webkit-animation-timing-function: step-end;
            animation-timing-function: step-end;
            opacity: 1;
        }

        50%,
        55% {
            -webkit-animation-timing-function: step-start;
            animation-timing-function: step-start;
            opacity: 0;
        }
    }

    @keyframes dog-eye {

        from,
        to {
            -webkit-animation-timing-function: step-end;
            animation-timing-function: step-end;
            opacity: 1;
        }

        50%,
        55% {
            -webkit-animation-timing-function: step-start;
            animation-timing-function: step-start;
            opacity: 0;
        }
    }

    .dog-eye:first-child {
        left: 0;
    }

    .dog-eye:last-child {
        right: 0;
    }

    .dog-muzzle {
        width: 60%;
        left: 20%;
        height: 50%;
        border-bottom-left-radius: 100%;
        border-bottom-right-radius: 100%;
        background: #f9f9f9;
        bottom: -15%;
        box-shadow: inset -12px -8px 40px rgba(255, 255, 255, 0.233);
    }

    .dog-muzzle:before,
    .dog-muzzle:after {
        content: '';
        display: block;
        position: absolute;
    }

    .dog-muzzle:before {
        width: 6px;
        height: 20px;
        bottom: 0;
        left: calc(50% - 3px);
        background: rgba(84, 66, 88, 0.233);
    }

    .dog-muzzle:after {
        background: #544258;
        width: 20px;
        height: 15px;
        bottom: 12px;
        left: calc(50% - 10px);
        border-bottom-left-radius: 60% 60%;
        border-bottom-right-radius: 60% 60%;
        border-top-left-radius: 50% 40%;
        border-top-right-radius: 50% 40%;
    }

    .dog-tongue {
        width: 40px;
        height: 100%;
        left: calc(50% - 20px);
        z-index: -1;
        -webkit-transform-origin: center top;
        transform-origin: center top;
        -webkit-animation: dog-tongue 1800ms -50ms ease-in-out infinite;
        animation: dog-tongue 1800ms -50ms ease-in-out infinite;
    }

    @-webkit-keyframes dog-tongue {

        from,
        to {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }

        16.6666666667% {
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        33.3333333333%,
        66.6666666667% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }

        50%,
        83.3333333333% {
            -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }
    }

    @keyframes dog-tongue {

        from,
        to {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }

        16.6666666667% {
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        33.3333333333%,
        66.6666666667% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }

        50%,
        83.3333333333% {
            -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }
    }

    .dog-tongue:before {
        content: '';
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 40px;
        background: #FD3163;
        -webkit-animation: dog-tongue-inner 100ms ease-in-out infinite alternate;
        animation: dog-tongue-inner 100ms ease-in-out infinite alternate;
    }

    @-webkit-keyframes dog-tongue-inner {
        from {
            -webkit-transform: translateY(5%);
            transform: translateY(5%);
        }

        to {
            -webkit-transform: translateY(22%);
            transform: translateY(22%);
        }
    }

    @keyframes dog-tongue-inner {
        from {
            -webkit-transform: translateY(5%);
            transform: translateY(5%);
        }

        to {
            -webkit-transform: translateY(22%);
            transform: translateY(22%);
        }
    }

    .dog-ears {
        width: 40%;
        top: 16%;
        left: 30%;
        filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.233));
        -webkit-animation: dog-ears 1800ms 100ms ease infinite;
        animation: dog-ears 1800ms 100ms ease infinite;
    }

    @-webkit-keyframes dog-ears {

        42.3%,
        71.6% {
            -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
        }

        50.3%,
        79.6% {
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
        }

        5% {
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
        }

        12% {
            -webkit-transform: rotate(-5%);
            transform: rotate(-5%);
        }

        from,
        33.3%,
        66%,
        to {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
    }

    @keyframes dog-ears {

        42.3%,
        71.6% {
            -webkit-transform: rotate(-5deg);
            transform: rotate(-5deg);
        }

        50.3%,
        79.6% {
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
        }

        5% {
            -webkit-transform: rotate(5deg);
            transform: rotate(5deg);
        }

        12% {
            -webkit-transform: rotate(-5%);
            transform: rotate(-5%);
        }

        from,
        33.3%,
        66%,
        to {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
    }

    .dog-ear {
        bottom: -10px;
        height: 50px;
        width: 50px;
        background: #544258;
        -webkit-animation-duration: 400ms;
        animation-duration: 400ms;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .dog-ear:first-child {
        border-bottom-left-radius: 95%;
        border-top-right-radius: 80%;
        right: 100%;
        box-shadow: inset -15px 8px 0 1px #cb8148;
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }

    .dog-ear:last-child {
        border-top-left-radius: 95%;
        border-bottom-right-radius: 80%;
        left: 100%;
        box-shadow: inset 15px 8px 0 0 #cb8148;
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    .dog-tail {
        width: 22px;
        height: 24.2px;
        background: #ffb141;
        bottom: 40%;
        border-radius: 11px;
        left: calc(50% - 11px);
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
    }

    .dog-tail .dog-tail {
        -webkit-animation: dog-tail-segment 200ms ease-in-out infinite alternate;
        animation: dog-tail-segment 200ms ease-in-out infinite alternate;
    }

    @-webkit-keyframes dog-tail-segment {
        from {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }

        to {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
        }
    }

    @keyframes dog-tail-segment {
        from {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
        }

        to {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
        }
    }

    .dog-body>.dog-tail {
        bottom: 90%;
        -webkit-animation: dog-tail 200ms ease-in-out infinite alternate;
        animation: dog-tail 200ms ease-in-out infinite alternate;
    }

    @-webkit-keyframes dog-tail {
        from {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        to {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    }

    @keyframes dog-tail {
        from {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        to {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    }

    .dog-body,
    .dog-torso,
    .dog-head {
        border-radius: 50%;
        background: #ffb141;
        position: absolute;
        height: 100%;
        width: 100%;
        box-shadow: inset -12px -8px 40px rgba(118, 118, 118, 0.233);
        filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.233)) brightness(100%);
    }

    .dog-body,
    .dog-torso {
        /*  box-shadow: inset 0 -15px 0 0 #F5832C; */
        box-shadow: inset -12px -8px 40px #F5832C;

        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);


    }

    .dog-head {
        -webkit-animation: dog-head 1800ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
        animation: dog-head 1800ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
        background: #ffb141;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);

    }

    *,
    *:before,
    *:after {
        box-sizing: border-box;
        position: relative;
    }

    .dog-muzzle,
    .dog-muzzle:before,
    .dog-eyes:before,
    .dog-ear:first-child,
    .dog-ear:last-child,
    .dog-tail {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);

    }

    .arrow-with-heading-bx {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .booking-service-time .booking-no-staff {
        display: block;
        text-align: center;
    }
    .book-services-staff-date .disable{
        pointer-events: none;
        border-color: #b6b6b6 !important;
    }
    .book-services-staff-date .disable h4, .book-services-staff-date .disable p  {
        color: #c6c3c3;
    }
    .book-services-staff-date .disable {
        opacity: 0.5;
    }
    /* Dog Loader Done */

    .booking-id-ribbon {
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .client-detail-info, .client-detail-pet-breed {
        display: flex;
        gap: 4px;
        align-items: center;
    }
    .client-detail-info h5, .client-detail-pet-breed  h5 {
        font-size: 18px;
    }
    .client-detail-main-box {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .client-detail-main-box img {
        max-height: 100px;
    }
    form.back-page-btn {
        position: absolute;
        top: 5px;
        left: 0;
        z-index: 9999;
        border: 0;
        margin: 0top;
        top: 19px;
        left: 44px;
    }
    form.back-page-btn button{
        border: 0;
        background-color: unset;
    }
    .previous-for-pet {
        padding: 12px 30px;
        border-radius: 100px;
    }
    .booking-confirm-details > a:hover{
        color: #000;
    }
    .cs-cat-heading .dropdown select{
        border: 0;
        width: fit-content;

    }
    .cs-cat-heading .dropdown select:focus-visible{
        border: 0;
        outline: 0;
    }
    /* .cs-cat-heading .dropdown::after{
        content: "";
        position: absolute;
        right: 0;
        top: 10px;
        border-left: 1px solid var(--primary-color);
        border-bottom: 1px solid var(--primary-color);
        width: 8px;
        height: 8px;
        transform: rotate(90deg);
    } */

    .cs-cat-heading .dropdown .form-icon {
        position: absolute;
        right: -41px;
        top: 44%;
        align-items: center;
        width: 10px;
    }
    .skip-pettype-btn.home-go {
        padding: 16px 20px;
        font-size: 24px;
    }

    .disabled-class{
        opacity: 0.5;
        text-transform: capitalize;
        display: inline-flex;
        text-align: center;
        border-radius: 8px;
        align-items: center;
        transition: all 0.5s;
        min-width: 160px;
        justify-content: center;
        border: none;
        background: #97A880;
        border-color: #97A880;
        color: #21291D;
        font-size: 14px;
        font-family: var(--font-semibold);
        pointer-events:none;
    }

.upcoming-sidebar-new-box{
    overflow-x: auto;
}
.upcoming-sidebar-new-box .upcoming-appointment-detail {
    display: flex;
    min-width: 2084px;
}

.location-logo-content-icon-box {
    position: absolute;
    top: 50px;
    right: 15px;
    /* transform: translateY(-50%); */
}
.loader-30 {
	border: .2em solid transparent;
	border-top-color: currentcolor;
	border-bottom-color: currentcolor;
	border-radius: 50%;
	position: relative;
	animation: 1s loader-30 linear infinite;
	&:before,
	&:after {
		content: '';
		display: block;
		width: 0;
		height: 0;
		position: absolute;
		border: .2em solid transparent;
		border-bottom-color: currentcolor;
	}
	&:before {
		transform: rotate(135deg);
		right: -.3em;
		top: -.05em;
	}
	&:after {
		transform: rotate(-45deg);
		left: -.3em;
		bottom: -.05em;
	}
}

@keyframes loader-30 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.disabled.day{
    opacity:0.5;
}
.services-scroll-bar{
    max-height:550px;
    overflow: auto;
}