/*
	*******************
	Template name:  Demandium
	Version:        2.7
	Author:         6amtech
	Author url:     https://6amtech.com/

	NOTE:
	-----
	Please DO NOT EDIT THIS CSS, you may need to use "custom.css" file for writing your custom css.
	We may release future updates so it will overwrite this file. it's better and safer to use "custom.css".

    ******** CSS INDEX ********
    01. Base
        1.1 Typography
        1.2 Spacing
        1.3 Color
    02. Components
        2.1 Helper
        2.2 Animation
        2.3 Social List
        2.4 Inputs
        2.5 Buttons
        2.6 Widget
        2.7 Pagination
        2.8 BackToTop
        2.9 Preloader
        2.10 Breadcrumb
    03. Layout
        3.1 Header
        3.2 Footer
        3.3 Blog
        3.4 404
        3.5 Coming Soon
        3.6 Banner
    04. Section
        4.1 Small Sections
    ********************/
    :root {
        --c1: #4153b3;
        --c1-rgb: 65, 83, 179;
        --c2: #ff6767;
        --bg-color: #f7f9fc;
        --bg-color2: #eee;
        --text-light-color: #758590;
        --text-color: #4b5864;
        --link-color: #ff5e00;
        --input-border-color: #e4e4e4;
        --input-border-color-active: rgba(65, 83, 179, 0.5);
        --title-color: #212b36;
        --title-color2: #758590;
        --border-color: #dddddd;
        --white-color: #ffffff;
        --dark-color: #18181a;
        --body-bg: #f5f5f5;
        --absolute-dark: #18181a;
        --absolute-white: #fff;
        --mobile-search-bg: #ddd;
        --shadow-color: rgba(0, 0, 0, 0.05);
        --dropdown-menu-color: #ffffff;
        --light-bg: #f7f9fc;
        --c1-light-bg: rgba(65, 83, 179, 0.05);
        --success-color: #16b559;
        --timeline-color: #dcdcdc;
        --title-font: "Public Sans", sans-serif;
        --body-font: "Public Sans", sans-serif;
        --thin: 100;
        --extra-light: 200;
        --light: 300;
        --regular: 400;
        --medium: 500;
        --semi-bold: 600;
        --bold: 700;
        --extra-bold: 800;
        --dark-color-bold: 900;
        --base_fz: 0.875rem;
        --h1_fz: 1.75rem;
        --h2_fz: 1.375rem;
        --h3_fz: 1.125rem;
        --h4_fz: 1rem;
        --h5_fz: 0.875rem;
        --h6_fz: 0.75rem;
        --base-line-height: 1.4;
        --title-line-height: 1.2;
    }

    [theme="dark"] {
        --c1: #4153b3;
        --c2: #ff5e00;
        --bg-color: #39393b;
        --dropdown-menu-color: #39393b;
        --text-light-color: #758590;
        --text-color: #ccd0d3;
        --title-color: rgba(255, 255, 255, 0.9);
        --title-color2: rgba(255, 255, 255, 0.7);
        --border-color: #5d5d5d;
        --white-color: #232325;
        --dark-color: #fff;
        --body-bg: #18181a;
        --mobile-search-bg: #505050;
        --shadow-color: rgba(255, 255, 255, 0.05);
        --light-bg: #2a2a2a;
        --c1-light-bg: rgba(65, 83, 179, 0.1);
        --timeline-color: #484848;
        --bs-border-color: #404040;
    }

    /* ************************
       01.1: Reset
       ********************* */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    * {
        outline: none !important;
    }

    html {
        font-family: sans-serif;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
        accent-color: var(--c1);
    }

    body {
        margin: 0;
        font-family: var(--body-font);
        font-weight: var(--regular);
        font-size: var(--base_fz);
        line-height: var(--base-line-height);
        color: var(--text-color);
        text-align: start;
        background-color: var(--body-bg);
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden !important;
        -webkit-margin-after: -2.5rem;
        margin-block-end: -2.5rem;
    }

    [tabindex="-1"]:focus {
        outline: 0 !important;
    }

    hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        padding: 0;
        margin: 0;
        font-weight: var(--semi-bold);
        line-height: var(--title-line-height);
        font-family: var(--title-font);
        color: var(--title-color);
    }

    h1 span:not(.counter),
    h2 span:not(.counter),
    h3 span:not(.counter),
    h4 span:not(.counter),
    h5 span:not(.counter),
    h6 span:not(.counter) {
        color: var(--c1);
    }

    h1 {
        font-size: var(--h1_fz);
    }

    h2 {
        font-size: var(--h2_fz);
    }

    h3 {
        font-size: var(--h3_fz);
    }

    h4 {
        font-size: var(--h4_fz);
    }

    h5 {
        font-size: var(--h5_fz);
    }

    h6 {
        font-size: var(--h6_fz);
    }

    p {
        -webkit-margin-before: 0;
        margin-block-start: 0;
        -webkit-margin-after: 1.25rem;
        margin-block-end: 1.25rem;
    }

    p:last-child {
        -webkit-margin-after: 0;
        margin-block-end: 0;
    }

    a {
        color: var(--title-color);
        text-decoration: none;
        background-color: transparent;
    }

    a:hover {
        color: var(--link-color);
    }

    input,
    button,
    select,
    optgroup,
    textarea {
        margin: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    button,
    input {
        overflow: visible;
    }

    button,
    select {
        text-transform: none;
    }

    select {
        word-wrap: normal;
        display: block;
    }

    select[readonly] {
        background-color: #d0dbe9;
    }

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        -webkit-appearance: button;
        appearance: button;
    }

    button:not(:disabled),
    [type="button"]:not(:disabled),
    [type="reset"]:not(:disabled),
    [type="submit"]:not(:disabled) {
        cursor: pointer;
    }

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        padding: 0;
        border-style: none;
    }

    input[type="radio"],
    input[type="checkbox"] {
        box-sizing: border-box;
        padding: 0;
    }

    textarea {
        overflow: auto;
        resize: vertical;
    }

    [type="checkbox"] {
        -webkit-margin-end: 0.3125rem;
        margin-inline-end: 0.3125rem;
    }

    ::-moz-selection {
        text-shadow: none;
        color: var(--absolute-white);
        background-color: var(--c1) !important;
    }

    ::selection {
        text-shadow: none;
        color: var(--absolute-white);
        background-color: var(--c1) !important;
    }

    ::-moz-placeholder {
        color: var(--title-color) !important;
        opacity: 0.4 !important;
    }

    ::placeholder {
        color: var(--title-color) !important;
        opacity: 0.4 !important;
    }

    iframe {
        max-width: 100%;
    }

    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: none !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* Order List */
    ol {
        -webkit-padding-start: 1.25rem;
        padding-inline-start: 1.25rem;
    }

    ol li:not(:last-child) {
        -webkit-margin-after: 0.3125rem;
        margin-block-end: 0.3125rem;
    }

    /* ************************
       01.2: Padding/Margin
       ********************* */
    .pt-120 {
        -webkit-padding-before: 7.5rem;
        padding-block-start: 7.5rem;
    }

    @media only screen and (max-width: 991px) {
        .pt-120 {
            -webkit-padding-before: 3.75rem;
            padding-block-start: 3.75rem;
        }
    }

    .pb-120 {
        -webkit-padding-after: 7.5rem;
        padding-block-end: 7.5rem;
    }

    @media only screen and (max-width: 991px) {
        .pb-120 {
            -webkit-padding-after: 3.75rem;
            padding-block-end: 3.75rem;
        }
    }

    .mt-30 {
        -webkit-margin-before: 1.875rem;
        margin-block-start: 1.875rem;
    }

    .mt-20 {
        -webkit-margin-before: 1.25rem;
        margin-block-start: 1.25rem;
    }

    .mt-10 {
        -webkit-margin-before: 0.625rem;
        margin-block-start: 0.625rem;
    }

    .mb-30 {
        -webkit-margin-after: 1.875rem;
        margin-block-end: 1.875rem;
    }

    .mb-40 {
        -webkit-margin-after: 2.875rem;
        margin-block-end: 2.875rem;
    }

    .mb-20 {
        -webkit-margin-after: 1.25rem;
        margin-block-end: 1.25rem;
    }

    .mb-10 {
        -webkit-margin-after: 0.625rem;
        margin-block-end: 0.625rem;
    }

    .mt-n1 {
        margin-top: -0.25rem !important;
    }

    .mt-n2 {
        margin-top: -0.5rem !important;
    }

    .mt-n3 {
        margin-top: -1rem !important;
    }

    .mt-n4 {
        margin-top: -1.5rem !important;
    }

    .mt-n5 {
        margin-top: -3rem !important;
    }

    .mb-n1 {
        margin-bottom: -0.25rem !important;
    }

    .mb-n2 {
        margin-bottom: -0.5rem !important;
    }

    .mb-n3 {
        margin-bottom: -1rem !important;
    }

    .mb-n4 {
        margin-bottom: -1.5rem !important;
    }

    .mb-n5 {
        margin-bottom: -3rem !important;
    }

    .mb-n30 {
        margin-bottom: -1.875rem !important;
    }

    .p-30 {
        padding: 1.875rem !important;
    }

    @media only screen and (max-width: 479px) {
        .p-30 {
            padding: 1.25rem 1rem !important;
        }
    }

    .p-20 {
        padding: 1.25rem !important;
    }

    @media only screen and (max-width: 479px) {
        .p-20 {
            padding: 1.25rem 1rem !important;
        }
    }

    .p-01 {
        padding: 0.0625rem;
    }

    /* ************************
       01.3: Color
       ********************* */
    .text-color {
        color: var(--text-color) !important;
    }

    .text-color-bg {
        background-color: var(--text-color) !important;
    }

    .text-color-bo {
        border-color: var(--text-color) !important;
    }

    .text-light-gray {
        color: var(--text-light-color) !important;
    }

    .text-info {
        --bs-info-rgb: 0, 178, 255;
    }

    .title-color {
        color: var(--title-color) !important;
    }

    .title-color-bg {
        background-color: var(--title-color) !important;
    }

    .title-color-bo {
        border-color: var(--title-color) !important;
    }

    .white-color {
        color: var(--white-color) !important;
    }

    .white-color-bg {
        background-color: var(--white-color) !important;
    }

    .white-color-bo {
        border-color: var(--white-color) !important;
    }

    .dark-color {
        color: var(--dark-color) !important;
    }

    .dark-color-bg {
        background-color: var(--dark-color) !important;
    }

    .dark-color-bo {
        border-color: var(--dark-color) !important;
    }

    .link-color {
        color: var(--link-color) !important;
    }

    .link-color-bg {
        background-color: var(--link-color) !important;
    }

    .link-color-bo {
        border-color: var(--link-color) !important;
    }

    .c1 {
        color: var(--c1) !important;
    }

    .c1-bg {
        background-color: var(--c1) !important;
    }

    .c1-bo {
        border-color: var(--c1) !important;
    }

    .c2 {
        color: var(--c2) !important;
    }

    .c2-bg {
        background-color: var(--c2) !important;
    }

    .c2-bo {
        border-color: var(--c2) !important;
    }

    .c1-light-bg {
        background-color: var(--c1-light-bg);
    }

    a,
    .socials a:after,
    .btn,
    .wizard .actions ul a,
    .btn--light-primary .material-icons,
    .btn--light-primary i,
    .pagination li a svg path,
    .pagination li span svg path,
    .aside-body .nav li.has-sub-item:after,
    .chat_list {
        transition: all 0.3s ease;
    }

    .list-inline,
    .list-info,
    .widget ul,
    .option-select-btn,
    .common-list,
    .contact-list,
    .wizard .steps ul,
    .wizard .actions ul,
    .services-tab-menu {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .list-inline li {
        display: inline-block;
    }

    .list-separator {
        display: flex;
        -moz-column-gap: 1.875rem;
        column-gap: 1.875rem;
        row-gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .list-separator li:not(:last-child) {
        position: relative;
    }

    .list-separator li:not(:last-child):after {
        position: absolute;
        inset-block-start: calc(50% - 0.1875rem);
        inset-inline-end: -1.125rem;
        inline-size: 0.375rem;
        block-size: 0.375rem;
        background-color: var(--border-color);
        content: "";
    }

    .list-info {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .list-info li {
        display: flex;
        gap: 0.625rem;
    }

    .btn,
    .wizard .actions ul a,
    .pagination li a,
    .pagination li span {
        font-weight: var(--medium);
    }

    .aside {
        background-color: var(--white-color);
    }

    .list-separator li:not(:last-child):after,
    .badge-dot,
    .timeline-number,
    .socials a,
    .count-btn .count,
    .badge .dot,
    .switcher_control::after,
    .modal-body .btn-close__style2,
    [type="radio"]:checked + label:before,
    [type="radio"]:not(:checked) + label:before,
    [type="radio"]:checked + label:after,
    [type="radio"]:not(:checked) + label:after,
    .img-wrap-circle,
    .wizard .steps ul .number,
    .service-man-list__item_header img,
    .avatar-status {
        border-radius: 50%;
    }

    .option-select-btn label span {
        border-radius: 0.1875rem;
    }

    .search-form__input_group,
    .btn,
    .wizard .actions ul a,
    .select2-container--default .select2-selection--multiple,
    .nav--tabs__style2 .nav-link,
    .business-summary,
    .statistics-card,
    .modal-body_title_bg,
    .aside-body .nav ul li,
    .user-profile,
    .message_text,
    .input_msg_write .send-msg-btns,
    .service-list-item {
        border-radius: 0.3125rem;
    }

    .dropdown-menu,
    .card,
    .upload-file__img img,
    .setting-box,
    .information-details-box,
    .service-man-list__item {
        border-radius: 0.625rem;
    }

    .btn .count,
    .wizard .actions ul a .count,
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice,
    .switcher_control,
    .upload-file__close,
    .upload-file__edit,
    .aside-body .nav li .link-title .count {
        border-radius: 3.125rem;
    }

    .list-separator li:not(:last-child):after,
    .badge-dot,
    .timeline-number,
    .socials a,
    .count-btn .count,
    .badge .dot,
    .switcher_control::after,
    .modal-body .btn-close__style2,
    [type="radio"]:checked + label:before,
    [type="radio"]:not(:checked) + label:before,
    [type="radio"]:checked + label:after,
    [type="radio"]:not(:checked) + label:after,
    .img-wrap-circle,
    .wizard .steps ul .number,
    .service-man-list__item_header img,
    .avatar-status {
        border-radius: 100%;
    }

    .box-shadow,
    .dropdown-menu,
    .card,
    .header,
    .aside,
    .settings-sidebar,
    .filter-aside {
        box-shadow: 0px 0px 0.125rem rgba(65, 83, 179, 0.05),
        0px 0.75rem 1.5rem -0.25rem rgba(65, 83, 179, 0.05);
    }

    .setting-box,
    .service-list-item {
        box-shadow: 0px 0.3125rem 0.625rem var(--shadow-color);
    }

    .option-select-btn label input:checked ~ span {
        box-shadow: 0px 1px 2px rgba(58, 58, 68, 0.1),
        0px 2px 3px rgba(90, 91, 106, 0.1);
    }

    .card {
        box-shadow: 0px 0.625rem 0.8125rem rgba(17, 38, 146, 0.05);
    }

    .btn,
    .wizard .actions ul a,
    .btn:focus {
        box-shadow: none !important;
    }

    .aside-body .nav li .link-title .count {
        line-height: 1;
    }

    .socials a:after {
        background: #ff0076;
        background: linear-gradient(45deg, #ff0076 0%, #590f87 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0076", endColorstr="#590f87", GradientType=1);
    }

    /* ************************
       02.1: Helper Classes
       ********************* */
    .ov-hidden {
        overflow: hidden !important;
    }

    .ovx-hidden {
        overflow-x: hidden !important;
    }

    .radius-3 {
        border-radius: 0.1875rem !important;
    }

    .radius-5 {
        border-radius: 0.3125rem !important;
    }

    .radius-10 {
        border-radius: 0.625rem !important;
    }

    .radius-50 {
        border-radius: 3.125rem !important;
    }

    .h-40 {
        height: 2.5rem !important;
    }

    .h-140 {
        height: 8.75rem !important;
    }

    .h-120 {
        height: 120px !important;
    }

    .overlay {
        position: relative;
        z-index: 1;
    }

    .overlay:after {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: -1;
        content: "";
        background-color: var(--body-bg);
        opacity: 0.8;
    }

    .gap-5 {
        gap: 0.3125rem !important;
    }

    .gap-10 {
        gap: 0.625rem !important;
    }

    .gap-20 {
        gap: 1.25rem !important;
    }

    .gap-30 {
        gap: 1.875rem !important;
    }

    .table-cover-img {
        max-width: 4.375rem;
    }

    /* Width */
    .mw-75 {
        max-inline-size: 75% !important;
    }

    .light-bg {
        background-color: var(--light-bg) !important;
    }

    /* Fonts */
    .title-font {
        font-family: var(--title-font);
    }

    .body-font {
        font-family: var(--body-font);
    }

    /* Gutter 60 */
    .media {
        display: flex;
        align-items: flex-start;
    }

    .media-body {
        flex: 1;
    }

    .fz-10 {
        font-size: 0.625rem !important;
    }

    .fz-12 {
        font-size: 0.75rem !important;
    }

    .fz-14 {
        font-size: 0.875rem !important;
    }

    .fz-16 {
        font-size: 1rem !important;
    }

    .fz-20 {
        font-size: 1.25rem !important;
    }

    .fz-26 {
        font-size: 1.625rem !important;
    }

    .fz-30 {
        font-size: 1.875rem !important;
    }

    .bg-img {
        background-size: cover;
        background-repeat: no-repeat;
    }

    .index-2 {
        z-index: 2;
    }

    .text--end {
        text-align: end !important;
    }

    .text--start {
        text-align: start !important;
    }

    .ms--auto {
        -webkit-margin-start: auto !important;
        margin-inline-start: auto !important;
    }

    /* Cursor */
    .cursor-pointer {
        cursor: pointer;
    }

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

    .img-dropshadow {
        border: 3px solid var(--white-color);
        filter: drop-shadow(0px 5px 10px rgba(0, 115, 180, 0.1));
    }

    /* Font Weight */
    .fw-medium {
        font-weight: var(--medium) !important;
    }

    .max-w220 {
        max-inline-size: 13.75rem;
    }

    .max-w220.js-select + .select2 {
        max-inline-size: 13.75rem;
    }

    .min-w180 {
        min-inline-size: 11.25rem;
    }

    .min-w180.js-select + .select2 {
        min-inline-size: 11.25rem;
    }

    .data-table-top {
        -webkit-margin-after: 1rem;
        margin-block-end: 1rem;
    }

    [data-bs-toggle="modal"] {
        cursor: pointer;
    }

    .badge-dot {
        width: 0.4375rem;
        height: 0.4375rem;
        background-color: var(--c1);
    }

    .timeline-steps {
        max-inline-size: 25rem;
        margin: 0 auto;
    }

    .timeline-step {
        display: flex;
        position: relative;
    }

    .timeline-step:after {
        content: "";
        position: absolute;
        inset-inline-start: 0.9375rem;
        inset-block-start: 2rem;
        block-size: 0rem;
        inline-size: 0.125rem;
        background-color: var(--timeline-color);
    }

    .timeline-step:not(:last-child):after {
        block-size: 100%;
    }

    .timeline-info {
        margin: 0.3125rem 0rem 1.25rem;
    }

    .timeline-title {
        font-size: 1rem;
        color: var(--timeline-color);
        margin: 0rem 0rem 0.5rem;
    }

    .timeline-text {
        -webkit-margin-after: 0.3125rem;
        margin-block-end: 0.3125rem;
        color: var(--timeline-color);
    }

    .timeline-number {
        width: 2rem;
        height: 2rem;
        background-color: var(--timeline-color);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9375rem;
        font-weight: var(--semi-bold);
        -webkit-margin-end: 0.875rem;
        margin-inline-end: 0.875rem;
    }

    .timeline-number svg {
        inline-size: 1rem;
        block-size: 1rem;
        -o-object-fit: contain;
        object-fit: contain;
        opacity: 0;
    }

    .timeline-number svg path {
        fill: var(--absolute-white);
    }

    .timeline-step.completed .timeline-number {
        background-color: var(--success-color);
    }

    .timeline-step.completed .timeline-number svg {
        opacity: 1;
    }

    .timeline-step.completed .timeline-title {
        color: var(--title-color);
    }

    .timeline-step.completed .timeline-text {
        color: var(--text-color);
        opacity: 0.5;
    }

    .timeline-step.completed:after {
        background-color: var(--success-color);
    }

    .bank-card-img {
        position: absolute;
        inset-block-start: 1.5rem;
        inset-inline-end: 1.875rem;
    }

    .bg-bottom {
        background-position: left bottom;
    }

    .bg-contain {
        background-size: contain;
    }

    /* ************************
       02.2: Animations
       ********************* */
    .animated {
        animation-duration: 1s;
        animation-fill-mode: backwards;
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .fadeIn {
        animation-name: fadeIn;
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translate3d(0, -2.5rem, 0);
        }

        to {
            opacity: 1;
            transform: translateZ(0);
        }
    }

    .fadeInDown {
        animation-name: fadeInDown;
    }

    @keyframes matrix {
        0% {
            transform: matrix(1, 0, 0, 1, 0, 0);
        }

        25% {
            transform: matrix(1, 0, 0, 1, 15, 20);
        }

        50% {
            transform: matrix(1, 0, 0, 1, -5, 25);
        }

        75% {
            transform: matrix(1, 0, 0, 1, -15, 15);
        }

        100% {
            transform: matrix(1, 0, 0, 1, 0, 0);
        }
    }

    @keyframes ripple {
        from {
            width: 0.1%;
            height: 0.1%;
            opacity: 1;
        }

        to {
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    }

    /* ************************
       02.3: Social List
       ********************* */
    .socials a {
        width: 2.8125rem;
        height: 2.8125rem;
        background-color: rgba(255, 255, 255, 0.1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.3125rem;
        position: relative;
        z-index: 1;
    }

    .socials a:not(:last-child) {
        -webkit-margin-end: 0.3125rem;
        margin-inline-end: 0.3125rem;
    }

    .socials a:after {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        z-index: -1;
        content: "";
        border-radius: 50%;
        transform: scale(0.7);
        opacity: 0;
    }

    .socials a:hover:after {
        transform: scale(1);
        opacity: 1;
    }

    /* ************************
       03.4: Inputs
       ********************* */
    .theme-input-style {
        display: block;
        inline-size: 100%;
        padding: 0.5rem 0.625rem;
        line-height: 1.5;
        color: var(--title-color);
        background-color: var(--white-color);
        background-clip: padding-box;
        border: 1px solid var(--border-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0.3125rem;
        transition: border-color 0.15s ease-in-out;
        block-size: 2.8125rem;
    }

    .theme-input-style:focus,
    .theme-input-style:active {
        border-color: var(--input-border-color-active);
    }

    .input-group > .theme-input-style {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
    }

    .search-form__input_group {
        background-color: var(--bg-color);
        align-items: center;
        padding: 0 0.625rem;
    }

    .search-form__icon {
        border: none;
        padding: 0.3125rem;
        background-color: transparent;
        opacity: 0.5;
        display: flex;
        padding-left: 0rem;
        padding-right: 0.5rem;
    }

    [dir="rtl"] .search-form__icon {
        padding-right: 0rem;
        padding-left: 0.5rem;
    }

    .search-form__icon .material-icons {
        font-size: 1.5rem;
    }

    .search-form__input {
        height: 1.875rem;
        padding: 0;
        border: none;
        background-color: transparent;
        color: var(--title-color);
    }

    .search-form_style-two {
        display: flex;
        gap: 0.3125rem;
    }

    @media only screen and (max-width: 575px) {
        .header .search-form {
            position: absolute;
            inset-block-start: -1000%;
            inset-inline-end: 1rem;
            inline-size: calc(100% - 2rem);
            opacity: 0;
            visibility: hidden;
            transition: opacity 200ms ease;
        }

        .header .search-form__input_group {
            block-size: 2.8125rem;
            z-index: 9;
            background-color: var(--mobile-search-bg);
        }

        .header .search-form.active {
            opacity: 1;
            visibility: visible;
            inset-block-start: 100%;
        }
    }

    @media only screen and (max-width: 419px) {
        .search-form_style-two input {
            font-size: 0.75rem;
        }

        .search-form_style-two button {
            padding-inline: 0.75rem;
        }
    }

    /* form control */
    .form-control,
    .form-select {
        background-color: var(--white-color);
        color: var(--title-color);
        border-color: var(--border-color);
        font-size: 0.875rem;
    }

    .form-control:focus,
    .form-select:focus,
    .form-control:active,
    .form-select:active {
        border-color: var(--input-border-color-active);
        box-shadow: none;
        background-color: var(--white-color);
        color: var(--title-color);
    }

    textarea.form-control,
    textarea.theme-input-style {
        block-size: 5rem;
    }

    /* Change the white to any color */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1.875rem var(--white-color) inset !important;
        -webkit-text-fill-color: var(--dark-color) !important;
    }

    .search-form input:-webkit-autofill,
    .search-form input:-webkit-autofill:hover,
    .search-form input:-webkit-autofill:focus,
    .search-form input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1.875rem var(--bg-color) inset !important;
        -webkit-text-fill-color: var(--dark-color) !important;
    }

    /* ************************
       02.5: Buttons
       ********************* */
    .btn,
    .wizard .actions ul a {
        font-size: 0.75rem;
        text-transform: uppercase;
        position: relative;
        z-index: 1;
        text-transform: uppercase;
        font-family: var(--title-font);
        line-height: 1;
        padding: 0.75rem 1.625rem;
        outline: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        border: none;
    }

    .btn--lg {
        padding: 0.875rem 1.875rem;
    }

    .btn i,
    .wizard .actions ul a i,
    .btn .material-icons,
    .wizard .actions ul a .material-icons,
    .btn .material-symbols-outlined,
    .wizard .actions ul a .material-symbols-outlined {
        font-size: 0.875rem;
        -webkit-margin-end: 0.4375rem;
        margin-inline-end: 0.4375rem;
    }

    .btn strong,
    .wizard .actions ul a strong {
        -webkit-margin-end: 0.125rem;
        margin-inline-end: 0.125rem;
    }

    .btn .count,
    .wizard .actions ul a .count {
        -webkit-margin-start: 0.3125rem;
        margin-inline-start: 0.3125rem;
        background-color: var(--bg-color);
        font-size: 0.75rem;
        color: var(--title-color);
        padding: 0.125rem 0.3125rem;
    }

    .btn:focus,
    .wizard .actions ul a:focus,
    .btn:hover,
    .wizard .actions ul a:hover {
        color: var(--absolute-white) !important;
        background-color: var(--c1);
    }

    .btn--primary,
    .btn--primary[disabled],
    .wizard .actions ul a {
        background-color: var(--c1);
        color: var(--absolute-white);
    }

    .btn-outline--primary {
        background-color: transparent;
        color: var(--title-color);
        border: 1px solid var(--border-color) !important;
    }

    .btn-outline--primary:hover {
        border-color: var(--c1) !important;
    }

    .btn--secondary {
        background-color: rgba(225, 225, 225, 0.8);
        color: var(--absolute-dark) !important;
    }

    .btn--secondary:active,
    .btn--secondary:focus,
    .btn--secondary:hover {
        background-color: #e2e2e2;
        color: var(--absolute-dark) !important;
    }

    .btn--secondary-two {
        background-color: rgba(65, 83, 179, 0.05);
        color: var(--c1);
        border: 1px solid rgba(65, 83, 179, 0.2);
    }

    [theme="dark"] .btn--secondary-two {
        border: 1px solid var(--c1);
    }

    .btn--danger {
        background-color: var(--c2);
        color: var(--absolute-white);
    }

    .btn--danger:hover {
        background-color: rgba(var(--bs-danger-rgb), 1);
    }

    .btn-soft--danger {
        background-color: rgba(255, 103, 103, 0.1);
        color: #ff6767;
    }

    .btn--success {
        background-color: var(--success-color);
        color: var(--absolute-white);
    }

    .btn--light {
        background-color: rgba(65, 83, 179, 0.05);
        color: var(--c1);
    }

    [theme="dark"] .btn--light {
        background-color: var(--bg-color);
        color: var(--c1);
    }
    [theme="dark"] .btn--light:hover {
        background-color: var(--c1);
        color: var(--absolute-white);
    }
    .btn--light.title-color:hover {
        color: var(--absolute-white) !important;
    }
    .btn--light.border-dashed:hover {
        border-color: var(--c1) !important;
    }

    .btn--light-primary {
        background-color: rgba(65, 83, 179, 0.05);
        color: var(--c1);
    }

    .btn--light-primary:hover .material-icons,
    .btn--light-primary:hover i {
        color: var(--absolute-white);
    }

    .btn-link {
        padding: 0rem;
        font-size: 0.875rem;
        font-weight: var(--regular);
    }

    .btn-link:active,
    .btn-link:focus,
    .btn-link:hover {
        background-color: transparent;
        color: var(--c2);
    }

    .btn-link.c1:active,
    .btn-link.c1:focus,
    .btn-link.c1:hover {
        color: var(--c2) !important;
    }

    .btn.filter-btn,
    .wizard .actions ul a.filter-btn {
        color: var(--title-color);
    }

    .btn.filter-btn:focus,
    .wizard .actions ul a.filter-btn:focus,
    .btn.filter-btn:hover,
    .wizard .actions ul a.filter-btn:hover {
        background-color: var(--bg-color2);
        color: var(--absolute-dark) !important;
    }

    .count-btn {
        position: relative;
    }

    .count-btn i,
    .count-btn .material-icons {
        font-size: 1.25rem;
    }

    .count-btn .count {
        position: absolute;
        inset-inline-end: -0.75rem;
        inset-block-start: -0.75rem;
        background-color: var(--c2);
        color: var(--absolute-white);
        font-size: 0.75rem;
        inline-size: 1.25rem;
        block-size: 1.25rem;
        display: grid;
        place-items: center;
    }

    .count-btn:hover {
        color: var(--dark-color);
    }

    /* ************************
       02.6: Widget
       ********************* */
    .widget:not(:last-child) {
        -webkit-margin-after: 2.5rem;
        margin-block-end: 2.5rem;
    }

    .widget .widget-title {
        -webkit-margin-after: 1.25rem;
        margin-block-end: 1.25rem;
    }

    /* ************************
       02.7: Pagination
       ********************* */
    .pagination {
        justify-content: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .pagination li a,
    .pagination li span {
        width: 2rem;
        height: 2rem;
        line-height: 1;
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 0.75rem;
        border-radius: 0.25rem;
    }

    .pagination li a:hover,
    .pagination li.active a,
    .pagination li span:hover,
    .pagination li.active span {
        background-color: var(--c1);
        color: var(--absolute-white);
    }

    .pagination li a,
    .pagination li span {
        color: var(--white-color);
    }

    .pagination li a,
    .pagination li span {
        background-color: var(--title-color);
    }

    .pagination li a,
    .pagination li span {
        font-family: var(--title-font);
    }

    .pagination li.nav-btn a.disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    /* ************************
    02.8: Plugins & Bootstrap CSS Customization
    ********************* */
    /* Bootstrap Floting Label */

    .form-floating > .form-control-plaintext::-moz-placeholder,
    .form-floating > .form-control::-moz-placeholder {
        color: transparent !important;
    }

    .form-floating > .form-control-plaintext::placeholder,
    .form-floating > .form-control::placeholder {
        color: transparent !important;
    }

    .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
        opacity: 1;
        transform: scale(1) translateY(-1.3rem) translateX(0rem);
    }

    .form-floating > .form-control-plaintext ~ label,
    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-floating > .form-select ~ label,
    .form-floating > .js-select ~ label,
    .form-floating > .multiple-select2 ~ label {
        opacity: 1;
        transform: scale(1) translateY(-1.3rem) translateX(0rem);
    }

    .form-floating > .form-control,
    .form-floating > .form-control-plaintext,
    .form-floating > .form-select,
    .form-floating > .js-select,
    .form-floating > .multiple-select2 {
        height: 2.8125rem;
    }

    .form-floating > textarea.form-control {
        height: 5rem;
    }

    .form-floating > label,
    .form-floating > .form-control,
    .form-floating > .form-control-plaintext {
        padding: 0.625rem 1.25rem;
        /* padding: 0.325rem 0.5rem; */
    }

    .form-floating > label {
        background-color: var(--white-color);
        padding: 0.5rem 0.75rem;
        inline-size: -moz-min-content;
        inline-size: min-content;
        block-size: auto;
        inset-inline-start: 0.5rem;
        /* inset-block-start: 0.25rem; */
        inset-block-start: 0;
        line-height: 1;
        /* font-size: 0.875rem; */
        font-size: 12px;
    }

    .form-floating .form-control + label {
        inset-block-start: 0.5rem !important;
    }

    .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown),
    .form-floating > .form-control:not(:-moz-placeholder-shown) {
        padding-top: 1rem;
    }

    .form-floating > .form-control-plaintext:focus,
    .form-floating > .form-control-plaintext:not(:placeholder-shown),
    .form-floating > .form-control:focus,
    .form-floating > .form-control:not(:placeholder-shown) {
        padding-top: 1rem;
    }

    /* Bootstrap Dropdown Taggle */
    .dropdown-toggle::after {
        -webkit-margin-start: 0.255em;
        margin-inline-start: 0.255em;
    }

    /* Apex Chart CSS */
    @media only screen and (max-width: 991px) {
        .apexcharts-title-text {
            opacity: 0;
            visibility: hidden;
        }
    }

    /* Custom Select2 CSS */
    .earning-statistics .select2-container {
        min-width: 9.375rem;
    }

    @media only screen and (max-width: 479px) {
        .earning-statistics .select2-container {
            min-width: 6.25rem;
        }
    }

    .select2-container--default,
    .select2-container {
        width: 100% !important;
    }

    .select2-container--default .select2-search--inline .select2-search__field {
        background: transparent;
        border: none;
        outline: 0;
        box-shadow: none;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

    .select2-container .select2-search--inline .select2-search__field {
        margin-top: 0.625rem;
        margin-left: 0.625rem;
    }

    .select2-container .select2-selection--multiple,
    .select2-container--default .select2-selection--multiple {
        background-color: var(--white-color) !important;
        border-color: var(--border-color) !important;
        min-block-size: 44px !important;
    }

    .select2-container .select2-search--inline .select2-search__field {
        margin-top: 12px !important;
        margin-left: 10px !important;
    }

    .select2-container--default.select2-container--focus
    .select2-selection--multiple {
        border-color: var(--input-border-color-active);
    }

    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
        background-color: #f3f4f5 !important;
        border: none;
        padding: 0.375rem 1rem 0.375rem 1.625rem;
        margin-top: 10px !important;
    }

    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
        border: none;
        color: var(--text-color) !important;
        font-size: 1.25rem;
        padding: 0 0.25rem 0 0.5rem;
        top: 0.0625rem;
    }

    .select2-container--default .select2-selection--single {
        background-color: var(--white-color) !important;
        border-color: var(--border-color) !important;
        min-block-size: 2.8125rem;
    }

    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
        color: var(--dark-color) !important;
    }

    .selected-item-c1
    + .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
        color: var(--c1) !important;
        font-weight: var(--medium);
    }

    .select2-dropdown {
        background-color: var(--white-color) !important;
        border-color: var(--border-color) !important;
    }

    [theme="dark"] .select2-container--default .select2-results__option--selected {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .select2-container--default[dir="rtl"]
    .select2-selection--multiple
    .select2-selection__choice__remove {
        border-left: 0px solid #aaa !important;
    }

    /* Datatables CSS */
    .dataTables_wrapper .dataTables_filter {
        display: none;
    }

    .dataTables_length > label {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    table.dataTable.no-footer {
        border-bottom: 0px solid var(--border-color);
    }

    table.dataTable tbody tr.selected > * {
        box-shadow: none;
        background: var(--bg-color);
    }

    table.dataTable tbody tr.selected > * {
        box-shadow: none;
        color: var(--title-color);
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td,
    table.dataTable thead th,
    table.dataTable thead td {
        border: none;
    }

    table.dataTable tbody td.select-checkbox:before,
    table.dataTable tbody th.select-checkbox:before {
        -webkit-margin-before: 0rem;
        margin-block-start: 0rem;
        background-color: #eeeeee;
        border-color: #eeeeee;
        block-size: 1rem;
        inline-size: 1rem;
        inset-block-start: 50%;
        transform: translateY(-50%);
    }

    table.dataTable tbody .selected td.select-checkbox:before,
    table.dataTable tbody .selected th.select-checkbox:before {
        border-color: var(--c1);
        background-color: var(--c1);
    }

    table.dataTable tr.selected td.select-checkbox:after,
    table.dataTable tr.selected th.select-checkbox:after {
        margin-top: -0.25rem;
        margin-left: -0.25rem;
        font-size: 1rem;
        text-shadow: none;
        color: var(--absolute-white);
        inset-block-start: 50%;
        transform: translateY(-50%);
    }

    table.dataTable tbody th,
    table.dataTable tbody td,
    table.dataTable tfoot th,
    table.dataTable tfoot td,
    table.dataTable thead th,
    table.dataTable thead td {
        -webkit-padding-before: 1.0625rem;
        padding-block-start: 1.0625rem;
        -webkit-padding-after: 1.0625rem;
        padding-block-end: 1.0625rem;
    }

    table.dataTable {
        -webkit-padding-after: 1rem;
        padding-block-end: 1rem;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        color: var(--text-color);
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        color: var(--title-color) !important;
        border-color: transparent;
        background-color: var(--bg-color);
    }

    /* floala text editor */
    .fr-box.fr-basic .fr-wrapper {
        border-radius: 0 0 10px 10px;
        max-block-size: 18.75rem;
        overflow-y: auto;
    }

    .fr-second-toolbar {
        display: none;
    }

    .fr-toolbar,
    .fr-box.fr-basic .fr-element {
        color: var(--title-color);
    }

    .fr-toolbar,
    .fr-box.fr-basic .fr-wrapper {
        background: var(--white-color);
        border-color: var(--border-color);
    }

    .fr-toolbar .fr-command.fr-btn svg path,
    .fr-popup .fr-command.fr-btn svg path,
    .fr-modal .fr-command.fr-btn svg path {
        fill: var(--title-color);
    }

    [theme="dark"] .fr-desktop .fr-command:hover:not(.fr-table-cell),
    [theme="dark"] .fr-desktop .fr-command:focus:not(.fr-table-cell),
    [theme="dark"] .fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell),
    [theme="dark"] .fr-desktop .fr-command.fr-expanded:not(.fr-table-cell) {
        background: #4e4e4e;
    }

    .fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active),
    .fr-toolbar .fr-more-toolbar {
        background-color: var(--bg-color);
    }

    /* Table */
    .table {
        width: 100%;
    }

    .table thead,
    .table tfoot {
        background-color: var(--bg-color);
    }

    .table--hover tbody tr:hover {
        background-color: var(--bg-color);
    }

    .table:not(.table-bordered) th,
    .table:not(.table-bordered) td {
        border: none;
    }

    .table th,
    .table td {
        padding: 1.25rem;
    }

    .table-variation {
        border-radius: 0.9375rem;
        overflow: hidden;
        border-style: hidden;
        box-shadow: 0 0 0 1px var(--input-border-color-active);
    }

    #pac-input,
    .table-variation .theme-input-style,
    .table-variation .form-control {
        min-inline-size: 5.625rem;
    }

    .table-variation thead {
        background-color: transparent;
        border-bottom: 2px solid var(--input-border-color-active);
    }

    .table-variation thead th {
        -webkit-padding-before: 1.25rem;
        padding-block-start: 1.25rem;
    }

    .table-variation tbody tr:first-child th,
    .table-variation tbody tr:first-child td {
        -webkit-padding-before: 1.25rem;
        padding-block-start: 1.25rem;
    }

    .table-variation tbody tr:last-child th,
    .table-variation tbody tr:last-child td {
        -webkit-padding-after: 1.25rem;
        padding-block-end: 1.25rem;
    }

    .table-variation tbody th {
        color: var(--c1);
    }

    .table-variation th,
    .table-variation td {
        text-align: center;
        padding: 0.625rem 1.5625rem;
    }

    .table-variation th:first-child,
    .table-variation td:first-child {
        text-align: start;
    }

    .table-variation th:nth-child(1),
    .table-variation th:nth-child(2),
    .table-variation td:nth-child(1),
    .table-variation td:nth-child(2) {
        background-color: rgba(82, 102, 208, 0.05);
    }

    @media only screen and (max-width: 991px) {
        .table-variation th,
        .table-variation td {
            padding: 0.625rem 0.9375rem;
        }
    }

    .table.align-center th:not(:nth-child(2)),
    .table.align-center td:not(:nth-child(2)) {
        text-align: center;
    }

    .table.align-center th .switcher,
    .table.align-center td .switcher {
        -webkit-margin-start: auto;
        margin-inline-start: auto;
        -webkit-margin-end: auto;
        margin-inline-end: auto;
    }

    .table.align-center th.sorting,
    .table.align-center td.sorting {
        -webkit-padding-end: 0.625rem;
        padding-inline-end: 0.625rem;
    }

    .table.align-center th.sorting::before,
    .table.align-center th.sorting::after,
    .table.align-center td.sorting::before,
    .table.align-center td.sorting::after {
        display: none;
    }

    .table-sm.align-right th:not(:first-child),
    .table-sm.align-right td:not(:first-child) {
        text-align: end;
    }

    .table.align-right th:not(:first-child),
    .table.align-right td:not(:first-child) {
        text-align: end;
    }

    /* Toast */
    .toast-body .btn-close {
        position: absolute;
        inset-block-start: 0.625rem;
        inset-inline-end: 0.625rem;
        background: transparent url("../img/icons/close.png") center/1em auto
        no-repeat;
    }

    /* Nav TAbs */
    .nav--tabs .nav-link {
        border: none;
        border-bottom: 2px solid transparent;
        background-color: transparent;
        opacity: 0.6;
        font-weight: var(--medium);
        color: var(--title-color);
        text-transform: capitalize;
    }

    .nav--tabs .nav-link.active {
        border-color: var(--title-color);
        opacity: 1;
    }

    .nav--tabs.border-color-primary .nav-link.active {
        border-color: var(--c1);
    }

    .nav--tabs__style2 .nav-link {
        border: none;
        opacity: 1;
        line-height: 1;
        padding: 0.5625rem 0.9375rem;
    }

    .nav--tabs__style2 .nav-link.active {
        background-color: var(--c1);
        font-weight: var(--medium);
        color: var(--absolute-white);
    }

    .nav--tabs__style3 {
        -webkit-border-after: 0.0625rem solid var(--c1);
        border-block-end: 0.0625rem solid var(--c1);
    }

    .nav--tabs__style3 .nav-link {
        border: none;
        opacity: 1;
        line-height: 1;
        border-radius: 0.3125rem 0.3125rem 0rem 0rem;
        padding: 0.5625rem 0.9375rem;
    }

    .nav--tabs__style3 .nav-link.active {
        background-color: var(--c1);
        font-weight: var(--medium);
        color: var(--absolute-white);
    }

    /* Accordion */
    .accordion-button {
        -webkit-padding-start: 2.8125rem;
        padding-inline-start: 2.8125rem;
        border: none;
        background-color: transparent;
        padding: 0;
        -webkit-padding-start: 2.25rem;
        padding-inline-start: 2.25rem;
        color: var(--title-color);
    }

    .accordion-button:not(.collapsed) {
        background-color: transparent;
        box-shadow: none;
        color: var(--c1);
    }

    .accordion-button:focus {
        box-shadow: none;
        border: none;
    }

    .accordion-button::after {
        position: absolute;
        inset-inline-start: 0rem;
        font-family: "Material Icons";
        content: "\e5cf";
        background: none !important;
        font-size: 1.5rem;
        width: auto;
        height: auto;
    }

    .accordion-header {
        background-color: rgba(65, 83, 179, 0.05);
        border: 1px solid var(--border-color);
        padding: 1rem;
    }

    .accordion-item {
        border: none;
        background-color: var(--white-color);
        color: var(--text-color);
    }

    .accordion-edit-btn i,
    .accordion-edit-btn .material-icons {
        color: var(--c1);
    }

    .accordion-delete-btn i,
    .accordion-delete-btn .material-icons {
        color: var(--c2);
    }

    /* Dropdown */
    @media only screen and (min-width: 992px) {
        .dropdown-menu-lg {
            min-inline-size: 15rem;
        }
    }

    .dropdown-menu:not(.border-none) li:not(:last-child) {
        border-bottom: 1px solid var(--border-color);
    }

    .dropdown-menu {
        max-inline-size: 20rem;
    }

    .dropdown-item,
    .card-text {
        color: var(--text-color);
    }

    .dropdown-item {
        text-align: start;
    }

    .dropdown-item:hover {
        background-color: transparent;
        color: var(--link-color);
    }

    /* Progress bar */
    .progress {
        --bs-progress-height: 0.5rem;
    }

    .progress-bar {
        background-color: var(--c1);
    }

    /* ************************
       02.11: Card
       ********************* */
    .dropdown-menu,
    .card {
        background-color: var(--white-color);
        border: none;
    }

    .dropdown-menu a:not(.media) {
        display: block;
        padding: 0.5rem 1rem;
    }

    .dropdown-menu {
        background-color: var(--dropdown-menu-color);
    }

    .bank-info-card {
        background-color: rgba(0, 106, 255, 0.05);
    }

    .card-header {
        background-color: var(--white-color);
        box-shadow: 0px 0px 0.125rem rgba(65, 83, 179, 0.05),
        0rem 0.375rem 0.75rem -0.1875rem rgba(65, 83, 179, 0.05);
        border-color: transparent;
    }

    .card-header,
    .card-body {
        padding: 1.25rem 1.25rem;
    }

    .business-summary,
    .statistics-card {
        background: linear-gradient(
            180deg,
            rgba(59, 177, 4, 0.95) 0%,
            rgba(54, 169, 0, 0.95) 100%
        );
        padding: 1.5rem 1.5rem 2.75rem;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }

    .business-summary *,
    .statistics-card * {
        color: var(--absolute-white);
    }

    .business-summary h2,
    .statistics-card h2 {
        font-weight: var(--bold);
        font-size: 1.75rem;
        -webkit-margin-after: 0.4375rem;
        margin-block-end: 0.4375rem;
    }

    .business-summary h3,
    .statistics-card h3 {
        font-weight: var(--regular);
    }

    .business-summary .absolute-img,
    .statistics-card .absolute-img {
        position: absolute;
        inset-block-end: 0.9375rem;
        inset-inline-end: 1.25rem;
    }

    .business-summary::after,
    .statistics-card::after {
        position: absolute;
        inset-inline-start: 0;
        inset-block-end: 0rem;
        background-color: var(--absolute-white);
        opacity: 0.05;
        content: "";
        block-size: 100%;
        inline-size: 8.125rem;
        z-index: -1;
        border-end-end-radius: 100%;
    }

    .business-summary-customers {
        background: linear-gradient(180deg, rgba(5, 89, 221, 0.9) 0%, #3577de 100%);
    }

    .business-summary-providers {
        background: linear-gradient(180deg, #ff9900 0%, #f48e2f 100%);
    }

    .business-summary-services {
        background: linear-gradient(180deg, #223dca 0%, #2542da 100%);
    }

    .statistics-card {
        background: var(--white-color);
        padding: 1.25rem;
    }

    .statistics-card.border {
        border-color: rgba(42, 149, 255, 0.5) !important;
    }

    .statistics-card::after {
        background: linear-gradient(
            180deg,
            rgba(224, 240, 255, 0.1) 0%,
            rgba(48, 168, 255, 0.1) 100%
        );
        border-end-end-radius: 0;
        border-start-end-radius: 12.5rem;
        opacity: 1;
        inline-size: 80%;
        block-size: 96%;
    }

    .statistics-card h2 {
        font-size: 2rem;
        color: #2a95ff;
        word-break: break-all;
    }

    .statistics-card h3 {
        color: var(--title-color);
        font-size: 0.875rem;
    }

    .statistics-card .absolute-img {
        inset-block-start: 0.9375rem;
    }

    .statistics-card__ongoing::after {
        background: linear-gradient(
            180deg,
            rgba(167, 255, 204, 0.1) 0%,
            rgba(71, 200, 128, 0.1) 100%
        );
    }

    .statistics-card__ongoing.border {
        border-color: rgba(59, 197, 117, 0.5) !important;
    }

    .statistics-card__ongoing .absolute-img svg circle {
        fill: #3bc575;
    }

    svg.danger circle {
        fill: #f15b52;
    }

    .statistics-card__ongoing h2 {
        color: #3bc575;
    }

    .statistics-card__primary::after {
        background: linear-gradient(
            180deg,
            rgba(167, 255, 204, 0.1) 0%,
            rgba(50, 67, 159, 0.1) 100%
        );
    }

    .statistics-card__primary.border {
        border-color: rgba(50, 67, 159, 0.5) !important;
    }

    .statistics-card__primary .absolute-img svg circle {
        fill: var(--c1);
    }

    .statistics-card__primary h2 {
        color: var(--c1);
    }

    .statistics-card__purple::after {
        background: linear-gradient(
            180deg,
            rgba(167, 255, 204, 0.1) 0%,
            rgba(170, 128, 249, 0.1) 100%
        );
    }

    .statistics-card__purple.border {
        border-color: rgba(170, 128, 249, 0.5) !important;
    }

    .statistics-card__purple .absolute-img svg circle {
        fill: #aa80f9;
    }

    .statistics-card__purple h2 {
        color: #aa80f9;
    }

    .statistics-card__not_served::after,
    .statistics-card__canceled::after {
        background: linear-gradient(
            180deg,
            rgba(255, 217, 217, 0.1) 0%,
            rgba(254, 104, 104, 0.1) 100%
        );
    }

    .statistics-card__total_provider.border,
    .statistics-card__subscribed-providers.border {
        border-color: rgba(243, 167, 53, 0.5) !important;
    }

    .statistics-card__total_provider .absolute-img svg circle,
    .statistics-card__subscribed-providers .absolute-img svg circle {
        fill: #f3a735;
    }

    .statistics-card__not_served.border,
    .statistics-card__canceled.border {
        border-color: rgba(255, 103, 103, 0.5) !important;
    }

    .statistics-card__not_served .absolute-img svg circle,
    .statistics-card__canceled .absolute-img svg circle {
        fill: #ff6767;
    }

    .statistics-card__not_served h2,
    .statistics-card__canceled h2 {
        color: #ff6767;
    }

    .statistics-card__total_provider::after,
    .statistics-card__subscribed-providers::after {
        background: linear-gradient(
            180deg,
            rgba(255, 240, 218, 0.1) 0%,
            rgba(243, 167, 53, 0.1) 100%
        );
    }

    .statistics-card__total_provider h2,
    .statistics-card__subscribed-providers h2 {
        color: #f3a735;
    }

    .statistics-card__style2 {
        border: 0.0625rem solid rgba(42, 149, 255, 0.5);
    }

    .statistics-card__style2 h3 {
        font-size: 0.875rem;
    }

    .statistics-card__style2 h2 {
        font-size: 1.375rem;
        color: #2a95ff;
        margin-block-end: 1rem;
    }

    .statistics-card__style2::after {
        background: rgba(42, 149, 255, 0.05);
    }

    .statistics-card__already-withdraw {
        border: 0.0625rem solid rgba(59, 197, 117, 0.5);
    }

    .statistics-card__already-withdraw h2 {
        color: #3bc575;
    }

    .statistics-card__already-withdraw::after {
        background: rgba(59, 197, 117, 0.05);
    }

    .statistics-card__withdrawable-amount {
        border: 0.0625rem solid rgba(255, 103, 103, 0.5);
    }

    .statistics-card__withdrawable-amount h2 {
        color: #ff6767;
    }

    .statistics-card__withdrawable-amount::after {
        background: rgba(255, 103, 103, 0.05);
    }

    .statistics-card__total-earning {
        border: 0.0625rem solid rgba(243, 167, 53, 0.5);
    }

    .statistics-card__total-earning h2 {
        color: #f3a735;
    }

    .statistics-card__total-earning::after {
        background: rgba(243, 167, 53, 0.05);
    }

    .statistics-card__collect-cash {
        border: 0.0625rem solid rgba(65, 83, 179, 0.3);
        text-align: center;
    }

    .statistics-card__collect-cash h3 {
        -webkit-margin-after: 1.25rem;
        margin-block-end: 1.25rem;
        font-size: 1.125rem;
    }

    .statistics-card__collect-cash h2 {
        -webkit-margin-after: 1.875rem;
        margin-block-end: 1.875rem;
        color: #4153b3;
    }

    .statistics-card__collect-cash::after {
        background: linear-gradient(
            180deg,
            rgba(65, 83, 179, 0.1) 0%,
            rgba(232, 235, 255, 0.1) 100%
        );
    }

    .statistics-card__order-overview {
        border: 0.0625rem solid rgba(65, 83, 179, 0.3);
        text-align: center;
    }

    .statistics-card__order-overview h3 {
        -webkit-margin-after: 1.25rem;
        margin-block-end: 1.25rem;
        font-size: 1.125rem;
    }

    /* ************************
       02.12: Common
       ********************* */
    .avatar {
        block-size: 2.1875rem;
        inline-size: 2.1875rem;
        overflow: hidden;
    }

    .avatar > img {
        inline-size: 100%;
        block-size: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .avatar-sm {
        block-size: 1.625rem;
        inline-size: 1.625rem;
    }

    .avatar-lg {
        block-size: 3.125rem;
        inline-size: 3.125rem;
    }

    /* Option Select */
    .option-select-btn {
        display: flex;
    }

    .option-select-btn label {
        margin: 0;
    }

    .option-select-btn label span {
        color: var(--text-color);
        background-color: var(--bg-color);
        text-transform: capitalize;
        padding: 0.5625rem 1rem;
        cursor: pointer;
    }

    .option-select-btn label input:checked ~ span {
        background-color: var(--white-bg);
        color: var(--c1);
        font-weight: var(--medium);
    }

    /* Events */
    .events {
        position: relative;
        display: grid;
        grid-template-columns: 1rem 1fr;
        row-gap: 1.875rem;
        inline-size: -moz-fit-content;
        inline-size: fit-content;
    }

    .events .event {
        display: grid;
        grid-template-columns: 16px 1fr;
        -moz-column-gap: 16px;
        column-gap: 16px;
        grid-column: 1/3;
    }

    .events .title > h5 {
        font-weight: var(--regular);
        -webkit-margin-after: 0.3125rem;
        margin-block-end: 0.3125rem;
    }

    .events .description > p {
        opacity: 0.7;
    }

    .events .knob {
        grid-column: 1/2;
        align-self: center;
        width: 100%;
        aspect-ratio: 1/1;
        z-index: 1;
        border: 2px solid var(--c1);
        background-color: var(--white-color);
        border-radius: 50%;
    }

    .events .title,
    .events .description {
        grid-column: 2/3;
        align-self: center;
    }

    .events .description span {
        opacity: 0.5;
    }

    .events .line {
        position: absolute;
        grid-column: 1/2;
        justify-self: center;
        block-size: 88%;
        inline-size: 1px;
        z-index: 0;
        background-color: #e9ecef;
        inset-block-start: 0.3125rem;
    }

    /* common List */
    .common-list li {
        position: relative;
        padding: 0.625rem 0;
        cursor: pointer;
    }

    .common-list li::after {
        inline-size: 70%;
        block-size: 1px;
        inset-inline-start: 0rem;
        inset-block-end: 0;
        background-color: var(--border-color);
        content: "";
        position: absolute;
        opacity: 0.5;
    }

    .common-list li h5 {
        font-weight: var(--bold);
        color: var(--title-color2);
        -webkit-margin-after: 0.3125rem;
        margin-block-end: 0.3125rem;
    }

    .common-list_success-rate {
        display: flex;
        justify-content: flex-end;
        opacity: 0.7;
        line-height: 1;
    }

    .common-list_rating {
        font-weight: var(--semi-bold);
        color: var(--c1);
        line-height: 1;
    }

    .common-list_rating .material-icons {
        font-size: 1rem;
        position: relative;
    }

    .common-list.after-none li:after {
        display: none;
    }

    .common-list__style2 li {
        display: grid;
        grid-template-columns: 9.375rem 1fr 3.125rem;
        align-items: center;
    }

    @media only screen and (max-width: 479px) {
        .common-list__style2 li {
            grid-template-columns: 5.625rem 1fr 1.875rem;
        }
    }

    .common-list__style2 .review-count {
        text-align: end;
    }

    /* Badge */
    .badge {
        font-size: 0.875rem;
        font-weight: var(--regular);
        display: inline-flex;
        gap: 0.375rem;
        align-items: center;
        text-transform: capitalize;
    }

    .badge .dot {
        block-size: 0.4375rem;
        inline-size: 0.4375rem;
        background-color: var(--white-color);
        display: block;
    }

    .badge-info {
        background-color: rgba(43, 149, 255, 0.1);
        color: #2b95ff;
    }

    .badge-info .dot {
        background-color: #2b95ff;
    }

    .badge-primary {
        background-color: rgba(65, 83, 179, 0.1);
        color: #4153b3;
    }

    .badge-primary .dot {
        background-color: #4153b3;
    }

    .badge-success {
        background-color: rgba(22, 181, 89, 0.1);
        color: #16b559;
    }

    .badge-success .dot {
        background-color: #16b559;
    }

    .badge-secondary {
        background-color: #7585901a !important;
        color: #758590 !important;
    }

    .badge-danger {
        background-color: rgba(255, 55, 55, 0.1);
        color: #ff3737;
    }

    .badge-danger .dot {
        background-color: #ff3737;
    }

    .badge-warning {
        background-color: rgba(228, 174, 35, 0.1);
        color: #e4ae23;
    }

    .badge-warning .dot {
        background-color: #e4ae23;
    }

    /* Switcher */
    .switcher {
        display: block;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        inline-size: 2.25rem;
        block-size: 1.125rem;
    }

    .switcher_control {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 2.25rem;
        block-size: 1.125rem;
        transition: background-color 0.15s ease-in;
        background-color: #ced7dd;
    }

    .switcher_control::after {
        content: "";
        position: absolute;
        inset-block-start: 0.0625rem;
        inset-inline-start: 0.0625rem;
        inline-size: 1rem;
        block-size: 1rem;
        transition: left 0.15s ease-in;
        background-color: var(--absolute-white);
    }

    .switcher_input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .switcher_input:checked ~ .switcher_control {
        background-color: var(--c1);
    }

    .switcher_input:checked ~ .switcher_control:after {
        inset-inline-start: 1.1875rem;
    }

    /* TAble Action Icons */
    .table-actions {
        display: flex;
        gap: 1.25rem;
    }

    .table-actions_view i,
    .table-actions_view .material-icons,
    .table-actions_view .material-symbols-outlined,
    .table-actions_edit i,
    .table-actions_edit .material-icons,
    .table-actions_edit .material-symbols-outlined {
        color: var(--c1);
    }

    .table-actions_delete {
        cursor: pointer;
    }

    .table-actions_delete i,
    .table-actions_delete .material-icons,
    .table-actions_delete .material-symbols-outlined {
        color: var(--c2);
    }

    /* Modal */
    .swal2-popup,
    .modal .modal-content {
        color: var(--title-color);
        background-color: var(--white-color) !important;
    }

    .modal-body .btn-close {
        position: absolute;
        inset-block-start: 0.625rem;
        inset-inline-end: 0.625rem;
    }

    .modal-body .btn-close:focus {
        box-shadow: none;
    }

    .modal-body .btn-close__style2 {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        background-color: var(--white-color);
        display: grid;
        place-items: center;
        inset-block-start: -1.875rem;
        inset-inline-end: -1.875rem;
    }

    @media only screen and (max-width: 575px) {
        .modal-body .btn-close__style2 {
            inset-inline-end: 0rem;
            inset-block-start: 0rem;
        }
    }

    .modal-body_title {
        -webkit-margin-after: 0.625rem;
        margin-block-end: 0.625rem;
    }

    .modal-body_title_bg {
        background-color: var(--bg-color);
        padding: 0.75rem;
    }

    .modal .meta-info {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: 0.125rem;
    }

    /* Custom checkbox */
    .custom-checkbox {
        display: block;
    }

    .custom-checkbox__input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        display: none;
        cursor: pointer;
    }

    .custom-checkbox__label {
        position: relative;
        cursor: pointer;
    }

    .custom-checkbox__label::before {
        content: "";
        -webkit-appearance: none;
        appearance: none;
        background-color: #eeeeee;
        inline-size: 1rem;
        block-size: 1rem;
        display: inline-block;
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        border-radius: 0.1875rem;
        -webkit-margin-end: 0.5rem;
        margin-inline-end: 0.5rem;
    }

    .custom-checkbox__input:checked + .custom-checkbox__label::before {
        background-color: var(--c1);
    }

    .custom-checkbox__input:checked + .custom-checkbox__label::after {
        content: "";
        display: block;
        position: absolute;
        inset-block-start: 0.1875rem;
        inset-inline-start: 0.375rem;
        inline-size: 0.3125rem;
        block-size: 0.75rem;
        border: solid var(--absolute-white);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    /* multiple-select-actions */
    .multiple-select-actions {
        block-size: 3.75rem;
        background-color: var(--bg-color);
        padding: 0.625rem 1.0625rem;
        inline-size: 100%;
        inset-block-start: 0rem;
        z-index: -1;
        visibility: hidden;
        opacity: 0;
        transition: all 200ms ease;
        line-height: 1;
        display: none;
    }

    .multiple-select-actions.active {
        visibility: visible;
        opacity: 1;
        z-index: 1;
        display: flex;
    }

    /* upload file */
    .upload-file {
        position: relative;
        cursor: pointer;
    }

    @media (max-width: 379px) {
        .upload-file {
            inline-size: 100%;
        }
    }

    .cover_attachment,
    .video_attachment,
    .upload-file__input {
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        inline-size: 100%;
        block-size: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .upload-file__img {
        max-inline-size: 8.75rem;
    }

    .upload-file__img img {
        aspect-ratio: 1/1;
        background-color: var(--white-color);
        object-fit: cover;
    }

    .upload-file__img_banner {
        max-inline-size: 20.9375rem;
    }

    @media only screen and (max-width: 1399px) {
        .upload-file__img_banner {
            inline-size: 100%;
        }
    }

    .upload-file__img_banner img {
        aspect-ratio: 3/1;
    }

    .upload-file__edit,
    .upload-file__close {
        inline-size: 2rem;
        block-size: 2rem;
        background-color: #ffe1e2;
        display: grid;
        place-items: center;
        padding: 0.3125rem;
        color: var(--c2);
        position: absolute;
        inset-inline-end: -0.625rem;
        inset-block-end: -0.625rem;
    }

    .upload-file__edit {
        background-color: #c1cbff;
        color: var(--c1);
    }

    .upload-file__edit.top {
        inset-block-end: unset;
        inset-block-start: -0.625rem;
        pointer-events: none;
    }

    .upload-file__edit .material-icons,
    .upload-file__close .material-icons {
        font-size: 1rem;
    }

    .upload-file__actions {
        position: absolute;
        inset-inline-end: 0.625rem;
        inset-block-start: 0.625rem;
    }

    .upload-file__actions .upload-file__delete_btn {
        background-color: var(--absolute-white) !important;
    }

    .upload-file__actions .upload-file__delete_btn:hover {
        background-color: var(--c2) !important;
    }

    /* .upload-file__edit_btn,
    .upload-file__delete_btn {
        display: grid;
        place-items: center;
        inline-size: 2rem;
        block-size: 2rem;
        background-color: #ffe1e2;
        color: var(--c2);
        padding: 0.3125rem;
        position: absolute;
        inset-inline-end: -0.625rem;
        inset-block-end: -0.625rem;
    } */

    /* Offcanvas Overlay */
    .offcanvas-overlay {
        position: fixed;
        inline-size: 100%;
        block-size: 100%;
        inset-inline-end: 0;
        inset-block-start: 0;
        background-color: rgba(0, 0, 0, 0.3);
        transition: opacity 150ms ease;
        z-index: -1;
        opacity: 0;
    }

    .offcanvas-overlay.active {
        opacity: 1;
        z-index: 1032;
    }

    .offcanvas-overlay.aside-active {
        opacity: 1;
        z-index: 1031;
    }

    /* Service Price List */
    .service-price-list {
        border: 1px solid var(--border-color);
    }

    .service-price-list-item {
        display: flex;
        justify-content: space-between;
        gap: 1.25rem;
        padding: 0.875rem 1.25rem;
        background-color: var(--white-bg);
        transition: background-color 150ms ease;
    }

    .service-price-list-item p {
        font-size: 1rem;
        color: var(--title-color);
        -webkit-margin-after: 0rem;
        margin-block-end: 0rem;
    }

    .service-price-list-item:not(:last-child) {
        -webkit-border-after: 1px solid var(--border-color);
        border-block-end: 1px solid var(--border-color);
    }

    .service-price-list-item:hover {
        background-color: var(--bg-color);
    }

    /* Contact List */
    .contact-list {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .contact-list li {
        display: flex;
        align-items: center;
        line-height: 1;
        gap: 0.625rem;
    }

    /* Rating Review */
    .rating-review__title {
        font-weight: var(--medium);
        font-size: 2.1875rem;
        color: #758590;
        -webkit-margin-after: 0.25rem;
        margin-block-end: 0.25rem;
    }

    .rating-review__out-of {
        font-size: 3.125rem;
        -webkit-margin-end: 0.3125rem;
        margin-inline-end: 0.3125rem;
    }

    .rating-review__info {
        color: #758590;
        font-weight: var(--semi-bold);
    }

    .rating i,
    .rating .material-icons,
    .rating .material-symbols-outlined {
        color: var(--c1);
    }

    /* Two Column List */
    .two-column-list {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }

    .two-column-list li:not(:last-child) {
        -webkit-margin-after: 0.625rem;
        margin-block-end: 0.625rem;
    }

    /* custom checkbox */
    .custom-radio {
        display: flex;
        align-items: center;
    }

    [type="radio"]:checked,
    [type="radio"]:not(:checked) {
        position: absolute;
        inset-inline-start: -9999px;
    }

    [type="radio"]:checked + label,
    [type="radio"]:not(:checked) + label {
        position: relative;
        -webkit-padding-start: 2rem;
        padding-inline-start: 2rem;
        cursor: pointer;
        line-height: 1.375rem;
        display: inline-block;
        text-transform: capitalize;
        color: var(--text-light-color);
    }

    [type="radio"]:checked + label {
        color: var(--title-color);
    }

    [type="radio"]:checked + label:before,
    [type="radio"]:not(:checked) + label:before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        inline-size: 1.375rem;
        block-size: 1.375rem;
        border: 0.0625rem solid var(--c1);
        background: var(--white-color);
    }

    [type="radio"]:checked + label:after,
    [type="radio"]:not(:checked) + label:after {
        content: "";
        inline-size: 1rem;
        block-size: 1rem;
        background-color: var(--c1);
        position: absolute;
        inset-block-start: 0.1875rem;
        inset-inline-start: 0.1875rem;
        transition: all 150ms ease;
    }

    [type="radio"]:not(:checked) + label:after {
        opacity: 0;
        transform: scale(0);
    }

    [type="radio"]:checked + label:after {
        opacity: 1;
        transform: scale(1);
    }

    /* Img Wrap Circle */
    .img-wrap-circle {
        inline-size: 6.25rem;
        block-size: 6.25rem;
        background-color: var(--bg-color);
        padding: 0.625rem;
        display: grid;
        place-items: center;
        overflow: hidden;
    }

    .img-wrap-circle img {
        border-radius: 100%;
        inline-size: 100%;
        block-size: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    /* ************************
       03.1: Header
       ********************* */
    .header {
        padding: 0.6875rem 0;
        -webkit-padding-start: 17.5rem;
        padding-inline-start: 17.5rem;
        block-size: 3.75rem;
        display: flex;
        align-items: center;
        -webkit-padding-end: 0.9375rem;
        padding-inline-end: 0.9375rem;
        background-color: var(--white-color);
    }

    @media only screen and (max-width: 1199px) {
        .header {
            -webkit-padding-start: 0.9375rem;
            padding-inline-start: 0.9375rem;
        }

        .header .aside-toggle {
            display: block !important;
        }
    }

    .toggle-search-btn {
        background-color: transparent;
        border: none;
        position: relative;
        inset-inline-end: -10px;
    }

    .toggle-search-btn i,
    .toggle-search-btn .material-icons {
        font-size: 1.5rem;
        color: var(--title-color);
    }

    .toggle-menu-button i,
    .toggle-menu-button .material-icons {
        font-size: 1.75rem;
    }

    /* ************************
       03.2: Footer
       ********************* */
    .footer {
        padding: 1.125rem 0 0.5rem;
    }

    /* ************************
       03.3: aside
       ********************* */
    .aside {
        inline-size: 16.875rem;
        position: fixed;
        inset-inline-start: 0;
        inset-block-start: 0;
        block-size: 100%;
        z-index: 1031;
        transition: width 100ms;
    }

    @media only screen and (max-width: 1199px) {
        .aside {
            transform: translateX(-100%);
        }
    }

    .aside-header {
        padding: 0.6875rem 1.25rem;
        block-size: 3.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        -moz-column-gap: 0.8rem;
        column-gap: 0.8rem;
    }

    .aside-body {
        padding: 0 1.25rem 1rem;
        max-block-size: calc(100% - 60px);
        position: relative;
    }

    .aside-body .nav {
        flex-direction: column;
    }

    .aside-body .nav li {
        font-size: 0.875rem;
        padding: 0.875rem 0;
        display: block;
    }

    .aside-body .nav li.nav-category {
        font-size: 12px;
        font-weight: var(--bold);
        text-transform: uppercase;
        position: relative;
    }

    .aside-body .nav li > a {
        display: flex;
        gap: 8px;
    }

    .aside-body .nav li .link-title {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-transform: capitalize;
    }

    .aside-body .nav li .link-title .count {
        background-color: var(--c2);
        color: var(--absolute-white);
        padding: 0.1875rem 0.5rem;
        font-size: 0.75rem;
    }

    .aside-body .nav li.has-sub-item {
        position: relative;
    }

    .aside-body .nav li.has-sub-item:after {
        font-family: "Material Icons";
        content: "chevron_right";
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 0.9375rem;
        z-index: -1;
    }

    .aside-body .nav li.sub-menu-opened:after {
        transform: rotate(90deg);
    }

    .aside-body .nav li.active > a {
        color: var(--link-color);
    }

    .aside-body .nav ul {
        -webkit-padding-before: 0.625rem;
        padding-block-start: 0.625rem;
    }

    .aside-body .nav ul li {
        -webkit-padding-start: 1.5rem;
        padding-inline-start: 1.5rem;
    }

    .aside-body .nav ul.sub-menu {
        display: none;
    }

    .mobile-logo {
        display: none;
    }

    a[disabled] {
        pointer-events: none;
        opacity: 0.6;
    }

    .user-profile {
        background-color: var(--bg-color);
        padding: 1.25rem 0.9375rem;
        transition: all 100ms;
    }

    .header .aside-toggle {
        display: none;
    }

    body.aside-open .aside {
        transform: translateX(0) !important;
    }

    body.aside-folded .header {
        -webkit-padding-start: 4.375rem;
        padding-inline-start: 4.375rem;
    }

    body.aside-folded .header .aside-toggle {
        display: block;
    }

    body.aside-folded .main-area {
        -webkit-padding-start: 4.6875rem;
        padding-inline-start: 4.6875rem;
    }

    @media only screen and (max-width: 991px) {
        body.aside-folded .main-area {
            margin-left: 0;
        }
    }

    body.aside-folded .aside {
        inline-size: 3.75rem;
    }

    body.aside-folded .aside .aside-toggle {
        display: none;
    }

    body.aside-folded .aside .mobile-logo {
        display: block;
    }

    body.aside-folded .aside .main-logo {
        display: none;
    }

    body.aside-folded .aside-header {
        padding: 0.3125rem;
        justify-content: center;
    }

    body.aside-folded .aside .user-profile {
        padding: 0;
        background-color: transparent;
    }

    body.aside-folded:not(.open-aside-folded) .aside .user-profile .avatar {
        block-size: 1.375rem;
        min-inline-size: 1.375rem;
    }

    body.aside-folded:not(.open-aside-folded) .aside .user-profile .avatar > img {
        inline-size: auto;
        block-size: auto;
    }

    body.aside-folded .aside .user-profile .media-body {
        visibility: hidden;
        max-height: 46px;
    }

    body.aside-folded .aside-body .nav-category {
        visibility: hidden;
        max-height: 42px;
    }

    body.aside-folded .aside-body .nav-category:before {
        position: absolute;
        content: "";
        width: 0.3125rem;
        height: 0.125rem;
        inset-inline-start: 0;
        inset-block-start: 50%;
        transform: translateY(-50%);
        background-color: var(--dark-color);
        visibility: visible;
    }

    body.aside-folded .aside-body li .material-icons {
        color: var(--dark-color);
    }

    body.aside-folded .aside-body li a span:not(.material-icons) {
        visibility: hidden;
        opacity: 0;
    }

    body.aside-folded .aside-body li.active i,
    body.aside-folded .aside-body li:hover i {
        color: var(--link-color);
    }

    body.aside-folded.open-aside-folded .header .aside-toggle {
        display: none;
    }

    body.aside-folded.open-aside-folded .aside {
        inline-size: 16.875rem;
    }

    body.aside-folded.open-aside-folded .aside .aside-toggle {
        display: block;
    }

    body.aside-folded.open-aside-folded .aside .mobile-logo {
        display: none;
    }

    body.aside-folded.open-aside-folded .aside .main-logo {
        display: block;
    }

    body.aside-folded.open-aside-folded .aside-header {
        padding: 0.6875rem 1.25rem;
        justify-content: space-between;
    }

    body.aside-folded.open-aside-folded .aside .user-profile {
        background-color: var(--bg-color);
        padding: 1.25rem 0.9375rem;
    }

    body.aside-folded.open-aside-folded .aside .user-profile .avatar {
        min-inline-size: 2.1875rem;
    }

    body.aside-folded.open-aside-folded .aside .user-profile .media-body {
        visibility: visible;
        max-height: inherit;
    }

    body.aside-folded.open-aside-folded .aside .aside-body li i {
        color: #aeaeae;
    }

    body.aside-folded.open-aside-folded .aside .aside-body li.nav-category {
        visibility: visible;
    }

    body.aside-folded.open-aside-folded .aside .aside-body li.nav-category:before {
        display: none;
    }

    body.aside-folded.open-aside-folded .aside .aside-body li a span {
        visibility: visible;
        opacity: 1;
    }

    body.aside-folded.open-aside-folded .aside .aside-body li.active i,
    body.aside-folded.open-aside-folded .aside .aside-body li:hover i {
        color: #8280fd;
    }

    /* ************************
       03.4: Main Area
       ********************* */
    .main-area {
        -webkit-padding-before: 5.625rem;
        padding-block-start: 5.625rem;
        -webkit-padding-start: 18rem;
        padding-inline-start: 18rem;
        -webkit-padding-end: 0.9375rem;
        padding-inline-end: 0.9375rem;
        block-size: 100vh;
        display: flex;
        flex-direction: column;
    }

    @media only screen and (max-width: 1199px) {
        .main-area {
            -webkit-padding-start: 0.9375rem;
            padding-inline-start: 0.9375rem;
        }
    }

    @media only screen and (max-width: 479px) {
        .main-area {
            -webkit-padding-start: 0;
            padding-inline-start: 0;
            -webkit-padding-end: 0;
            padding-inline-end: 0;
        }
    }

    .preloader {
        position: fixed;
        inline-size: 100%;
        block-size: 100%;
        background-color: var(--white-color);
        z-index: 9999999;
        display: grid;
        place-items: center;
    }

    .preloader::after {
        content: "";
        position: absolute;
        border: 0.3rem solid var(--c1);
        border-radius: 50%;
        border-top: 0.3rem solid var(--white-color);
        width: 2.75rem;
        height: 2.75rem;
        /* Safari */
        animation: spin 1s linear infinite;
    }

    /* Safari */
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* ************************
       03.5: Theme Switcher
       ********************* */
    .settings-sidebar,
    .filter-aside {
        position: fixed;
        background-color: var(--white-color);
        inline-size: 18.75rem;
        inset-inline-end: -18.75rem;
        inset-block-start: 0;
        z-index: 1029;
        block-size: 100vh;
        padding: 3.75rem 0rem 1.25rem;
        transition: transform 200ms ease;
    }

    @media only screen and (max-width: 479px) {
        .settings-sidebar,
        .filter-aside {
            inline-size: 16.25rem;
            inset-inline-end: -16.25rem;
        }
    }

    .settings-sidebar.active,
    .active.filter-aside {
        inset-inline-end: 0;
    }

    .settings-toggle-icon {
        position: absolute;
        inline-size: 2.8125rem;
        block-size: 2.8125rem;
        inset-inline-start: -2.8125rem;
        inset-block-start: 50%;
        transform: translateY(-50%);
        background-color: var(--c1);
        border-start-start-radius: 5px;
        border-end-start-radius: 5px;
        padding: 0.3125rem;
        display: grid;
        place-items: center;
        cursor: pointer;
        color: var(--absolute-white);
    }

    .settings-toggle-icon .material-icons {
        font-size: 1.5rem;
    }

    .settings-content h4 {
        padding: 1.25rem;
        border-bottom: 1px dashed var(--border-color);
        text-align: center;
    }

    .switchers-wrap {
        padding: 1.25rem;
    }

    .switch-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        -moz-column-gap: 0.625rem;
        column-gap: 0.625rem;
        row-gap: 1.25rem;
    }

    .setting-box {
        background-color: var(--body-bg);
        block-size: 6.25rem;
        display: grid;
        place-items: center;
        border: 1px solid transparent;
        padding: 0.9375rem;
        transition: border 200ms ease;
        cursor: pointer;
    }

    .setting-box.active {
        border-color: var(--c1);
    }

    .setting-box.dark-mode {
        background-color: var(--absolute-dark);
    }

    .setting-box.light-mode {
        background-color: var(--absolute-white);
    }

    .setting-box-wrap h5 {
        text-align: center;
        -webkit-margin-before: 0.625rem;
        margin-block-start: 0.625rem;
    }

    /* ************************
       03.6: RTL
       ********************* */
    [dir="rtl"] .nav {
        -webkit-padding-start: 0;
        padding-inline-start: 0;
    }

    [dir="rtl"] .aside-body .nav li.has-sub-item:after {
        content: "chevron_left";
    }

    [dir="rtl"] .aside-body .nav li.sub-menu-opened:after {
        transform: rotate(-90deg);
    }

    [dir="rtl"] .ps__rail-y {
        left: 0 !important;
        right: auto !important;
    }

    @media only screen and (max-width: 1199px) {
        [dir="rtl"] .aside {
            transform: translateX(100%);
        }
    }

    [dir="rtl"] .fr-box.fr-basic .fr-placeholder {
        text-align: end !important;
    }

    [dir="rtl"] .fr-box.fr-basic .fr-element,
    [dir="rtl"] .select2-container--default {
        direction: rtl;
    }

    [dir="rtl"] .apexcharts-legend-marker {
        margin-right: 0rem;
        margin-left: 0.1875rem;
    }

    [dir="rtl"] .apexcharts-yaxis-texts-g {
        transform: translateX(-20px);
    }

    [dir="rtl"] .send-msg-btns button[type="submit"] .material-icons {
        transform: rotate(180deg);
    }

    [dir="rtl"] .modal-header .btn-close {
        margin-left: 0;
        margin-right: auto;
    }

    /* ************************
       03.7: Filter Aside
       ********************* */
    .filter-aside {
        z-index: 1033;
        -webkit-padding-before: 0;
        padding-block-start: 0;
        inline-size: 25rem;
        inset-inline-end: -25rem;
    }

    @media only screen and (max-width: 479px) {
        .filter-aside {
            inline-size: 100%;
            inset-inline-end: -100%;
        }
    }

    .filter-aside__header {
        background-color: var(--bg-color);
        padding: 1.25rem 1.25rem;
        -webkit-margin-after: 0.625rem;
        margin-block-end: 0.625rem;
    }

    .filter-aside__title {
        text-transform: uppercase;
        color: var(--c1);
    }

    .filter-aside__body {
        padding: 1.25rem;
        block-size: 70vh;
        overflow-y: auto;
    }

    /* ************************
      03.8: Login
      ********************* */
    .register-form,
    .login-form {
        min-block-size: 100vh;
        display: flex;
        align-items: center;
        font-size: 0.75rem;
    }

    .register-wrap,
    .login-wrap {
        display: grid;
        grid-template-columns: 1fr minmax(auto, 650px);
        min-height: 100dvh;
    }

    @media only screen and (max-width: 991px) {
        .register-wrap,
        .login-wrap {
            grid-template-columns: 1fr;
        }
    }

    .register-right,
    .login-right {
        padding: 2.5rem;
        position: relative;
    }

    @media only screen and (max-width: 575px) {
        .register-right,
        .login-right {
            padding: 1.5rem 0.9375rem;
        }
    }

    .register-left,
    .register-img,
    .login-left,
    .login-img {
        block-size: 100%;
    }

    @media only screen and (max-width: 575px) {
        .register-left,
        .login-left {
            display: none;
        }
    }

    .register-footer,
    .login-footer {
        padding-block: 0.5rem;
        padding-inline: 1rem;
        -webkit-margin-before: auto;
        margin-block-start: auto;
    }

    .register-copy,
    .login-copy {
        background-color: #333f99;
        border-radius: 0.1875rem;
        color: var(--absolute-white);
        padding: 0.5rem 0.625rem;
    }

    .register-wrap {
        grid-template-columns: 15% 85%;
    }

    @media only screen and (max-width: 991px) {
        .register-wrap {
            grid-template-columns: 1fr;
        }
    }

    @media only screen and (max-width: 991px) {
        .register-left {
            display: none;
        }
    }

    /* ************************
       04.1: Dark Theme CSS
       ********************* */
    [theme="dark"] .settings-toggle-icon {
        background-color: var(--c1);
    }

    [theme="dark"] .events .line {
        background-color: #6c6c6c;
    }

    [theme="dark"] .apexcharts-yaxis-label,
    [theme="dark"] .apexcharts-xaxis-label,
    [theme="dark"] .apexcharts-title-text,
    [theme="dark"] .apexcharts-legend-text {
        color: rgba(255, 255, 255, 0.7) !important;
        fill: rgba(255, 255, 255, 0.7) !important;
    }

    [theme="dark"] .card-header {
        background-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0px 0px 0.125rem rgba(255, 255, 255, 0.05),
        0rem 0.375rem 0.75rem -0.1875rem rgba(255, 255, 255, 0.05);
    }

    [theme="dark"] .table {
        --bs-table-color: var(--absolute-white);
    }

    [theme="dark"] .btn-close {
        background: transparent url("../img/icons/close.png") center/1em auto
        no-repeat;
    }

    [theme="dark"]
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
        background-color: #838383 !important;
    }

    [theme="dark"]
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:hover,
    [theme="dark"]
    .select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:focus {
        background-color: #838383 !important;
        color: var(--absolute-white) !important;
    }

    [theme="dark"]
    .select2-container--default
    .select2-search--inline
    .select2-search__field {
        color: var(--absolute-white) !important;
    }

    [theme="dark"] ::-webkit-calendar-picker-indicator {
        filter: invert(1) !important;
    }

    /* ************************
       05.1: Jquery Steps
       ********************* */
    .wizard .content .title {
        display: none;
    }

    .wizard .steps {
        -webkit-margin-after: 3.75rem;
        margin-block-end: 3.75rem;
    }

    @media only screen and (max-width: 991px) {
        .wizard .steps {
            -webkit-margin-after: 2.5rem;
            margin-block-end: 2.5rem;
        }
    }

    .wizard .steps ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    @media only screen and (max-width: 479px) {
        .wizard .steps ul {
            flex-direction: column;
            gap: 1rem;
        }
    }

    @media only screen and (max-width: 767px) {
        #add-new-employee-form .steps ul {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }
    }

    .wizard .steps ul li {
        position: relative;
    }

    .wizard .steps ul li:not(:first-child) {
        -webkit-padding-start: 14.875rem;
        padding-inline-start: 14.875rem;
    }

    @media only screen and (max-width: 991px) {
        .wizard .steps ul li:not(:first-child) {
            -webkit-padding-start: 3.125rem;
            padding-inline-start: 3.125rem;
        }
    }

    @media only screen and (max-width: 479px) {
        .wizard .steps ul li:not(:first-child) {
            -webkit-padding-start: 0rem;
            padding-inline-start: 0rem;
        }
    }

    @media only screen and (max-width: 767px) {
        #add-new-employee-form .steps ul li:not(:first-child) {
            -webkit-padding-start: 0rem;
            padding-inline-start: 0rem;
        }
    }

    .wizard .steps ul li:not(:first-child)::after {
        inline-size: 11.875rem;
        block-size: 0.0625rem;
        background-color: #aaaaaa;
        position: absolute;
        inset-inline-start: 1.5rem;
        inset-block-start: 50%;
        transform: translateY(-50%);
        content: "";
    }

    @media only screen and (max-width: 991px) {
        .wizard .steps ul li:not(:first-child)::after {
            inset-inline-start: 0.625rem;
            inline-size: 1.875rem;
        }
    }

    @media only screen and (max-width: 479px) {
        .wizard .steps ul li:not(:first-child)::after {
            display: none;
        }
    }

    @media only screen and (max-width: 767px) {
        #add-new-employee-form .steps ul li:not(:first-child)::after {
            display: none;
        }
    }

    .wizard .steps ul li.first.done a {
        opacity: 1;
    }

    .wizard .steps ul li.first.done a .number {
        background-color: var(--c1);
    }

    .wizard .steps ul li a {
        color: var(--title-color);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        font-size: 1rem;
        opacity: 0.5;
    }

    .wizard .steps ul .number {
        inline-size: 1.5rem;
        min-inline-size: 1.5rem;
        block-size: 1.5rem;
        background-color: var(--title-color);
        display: grid;
        place-items: center;
        padding: 0.3125rem;
        color: var(--white-color);
        line-height: 1;
        font-size: 0.75rem;
    }

    .wizard .steps ul .current a {
        opacity: 1;
    }

    .wizard .steps ul .current-info {
        display: none;
    }

    .wizard .steps ul .current .number {
        background-color: var(--c1);
    }

    .wizard .steps ul :is(.current h4, .current p, .done h4, .done p) {
        color: var(--c1);
    }

    .wizard .actions {
        -webkit-margin-before: 1.875rem;
        margin-block-start: 1.875rem;
    }

    .wizard .actions ul {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* ************************
       05.2: Provider Details
       ********************* */
    .provider-details-overview {
        display: grid;
        gap: 0.625rem;
        grid-template-columns: 2fr 3fr 2fr;
    }

    @media only screen and (max-width: 991px) {
        .provider-details-overview {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media only screen and (max-width: 767px) {
        .provider-details-overview {
            grid-template-columns: 1fr;
        }
    }

    .provider-details-overview__statistics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.3125rem;
    }

    @media only screen and (max-width: 991px) {
        .provider-details-overview__statistics {
            order: -1;
            grid-column: 1/-1;
        }
    }

    @media only screen and (max-width: 379px) {
        .provider-details-overview__statistics {
            grid-template-columns: 1fr;
        }
    }

    /* Information Details Box */
    .information-details-box {
        background-color: var(--white-bg);
        border: 1px solid rgba(65, 83, 179, 0.05);
        box-shadow: 0px 0px 2px rgba(145, 158, 171, 0.2),
        0px 12px 24px -4px rgba(145, 158, 171, 0.1);
        padding: 1.875rem;
    }

    @media only screen and (max-width: 575px) {
        .information-details-box {
            padding: 1rem;
        }
    }

    .information-details-box__title {
        font-size: 1.25rem;
        -webkit-margin-after: 1.25rem;
        margin-block-end: 1.25rem;
    }

    .information-details-box__title i,
    .information-details-box__title .material-icons {
        font-size: inherit;
    }

    .information-details-box__subtitle {
        -webkit-margin-after: 1.25rem;
        margin-block-end: 1.25rem;
    }

    /* Service Man List */
    .service-man-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.25rem;
    }

    .service-man-list__item {
        border: 1px solid rgba(65, 83, 179, 0.05);
        box-shadow: 4px 4px 10px -4px rgba(145, 158, 171, 0.2);
    }

    .service-man-list__item_header {
        background: rgba(65, 83, 179, 0.05);
        border-radius: 0.625rem 0.625rem 1.25rem 1.25rem;
        padding: 0.9375rem;
        text-align: center;
    }

    .service-man-list__item_header img {
        inline-size: 3.625rem;
        block-size: 3.625rem;
        -webkit-margin-after: 0.5rem;
        margin-block-end: 0.5rem;
    }

    .service-man-list__item_header .service-man-name {
        color: var(--c1);
    }

    .service-man-list__item_header .service-man-phone {
        font-size: 0.75rem;
    }

    .service-man-list__item_body {
        padding: 0.9375rem;
    }

    /* ************************
       05.3: Chat
       ********************* */
    .avatar-status {
        position: absolute;
        inline-size: 0.625rem;
        block-size: 0.625rem;
        inset-block-end: 0rem;
        inset-inline-end: 0rem;
        border: 2px solid var(--absolute-white);
    }

    .chat_list {
        padding: 0.75rem 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
    }

    .chat_list:hover,
    .chat_list.active {
        background-color: rgba(217, 217, 217, 0.3);
    }

    .outgoing_msg,
    .received_msg {
        max-inline-size: 70%;
        -webkit-margin-after: 1rem;
        margin-block-end: 1rem;
        display: inline-flex;
        flex-direction: column;
    }

    .received_msg .message_text {
        background-color: rgba(217, 217, 217, 0.3);
    }

    .received_msg {
        -webkit-margin-end: auto;
        margin-inline-end: auto;
        align-items: flex-start;
    }

    .outgoing_msg {
        -webkit-margin-start: auto;
        margin-inline-start: auto;
        align-items: flex-end;
    }

    .outgoing_msg .message_text {
        background-color: var(--c1);
        color: var(--absolute-white);
    }

    .message_text {
        -webkit-margin-after: 0.3125rem;
        margin-block-end: 0.3125rem;
        padding: 0.625rem 1rem;
    }

    .time_date {
        font-size: 12px;
    }

    .card-chat {
        min-block-size: calc(100vh - 200px);
    }

    .inbox_chat,
    .inbox_msg {
        max-block-size: 45vh;
        overflow-y: auto;
        -webkit-padding-end: 0.5rem;
        padding-inline-end: 0.5rem;
    }

    @media only screen and (min-width: 1400px) {
        .inbox_chat,
        .inbox_msg {
            max-block-size: 58vh;
        }
    }

    .inbox_chat {
        max-block-size: 60vh;
    }

    .add-img,
    .add-attatchment {
        position: relative;
        cursor: pointer;
    }

    .add-img .material-icons,
    .add-attatchment .material-icons {
        cursor: pointer;
    }

    .add-img input,
    .add-attatchment input {
        opacity: 0;
        position: absolute;
        inline-size: 100%;
        block-size: 100%;
        inset-block-start: 0rem;
        inset-inline-start: 0rem;
        cursor: pointer;
    }

    .send-msg-btns {
        display: flex;
        flex-wrap: wrap;
        gap: 0.625rem;
        align-items: center;
    }

    .send-msg-btns button {
        border: none;
        color: var(--c1);
        background-color: transparent;
    }

    .input_msg_write {
        position: relative;
    }

    .input_msg_write textarea {
        -webkit-padding-after: 2.5rem;
        padding-block-end: 2.5rem;
        background: transparent;
        color: var(--text-color);
    }

    [theme="dark"] .send-msg-btns img {
        filter: invert(1);
    }

    /* .input_msg_write .send-msg-btns {
        -webkit-padding-before: 0.25rem;
        padding-block-start: 0.25rem;
        background-color: var(--white-color);
        position: absolute;
        z-index: 1;
        inline-size: calc(100% - 17px);
        inset-inline-start: 0.0625rem;
        inset-block-end: 0.0625rem;
    } */

    /* ************************
       05.4: Service
       ********************* */
    .service-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
        gap: 1.5625rem;
    }

    .service-list-wrap {
        display: grid;
        grid-template-columns: 16.25rem 1fr;
        align-items: start;
        gap: 1.875rem;
    }

    @media only screen and (max-width: 991px) {
        .service-list-wrap {
            grid-template-columns: 1fr;
        }
    }

    .service-list-item {
        background-color: var(--c1-light-bg);
        display: flex;
        flex-direction: column;
    }

    .service-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .service-title {
        background-color: var(--white-color);
        padding: 0.75rem;
        display: block;
        flex-grow: 1;
    }

    .service-actions {
        display: flex;
        padding: 0.5rem;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: space-between;
    }

    .services-tab-menu li {
        padding: 1.25rem;
        -webkit-border-start: 0.125rem solid var(--c1-light-bg);
        border-inline-start: 0.125rem solid var(--c1-light-bg);
        text-transform: capitalize;
        border-start-end-radius: 0.3125rem;
        border-end-end-radius: 0.3125rem;
    }

    .services-tab-menu li.active {
        border-color: var(--c1);
        background-color: var(--c1-light-bg);
    }

    /* Provider Panel CSS */
    .show-notification-list {
        max-block-size: 25rem;
        overflow-y: auto;
    }

    .show-notification-list .card-title {
        line-height: 1.5;
        -webkit-margin-after: 0.5rem;
        margin-block-end: 0.5rem;
    }

    .earning-statistics .select2-container--default .select2-selection--single {
        min-block-size: 2.125rem;
    }

    .earning-statistics
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
        height: 2.125rem;
    }

    .earning-statistics
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
        line-height: 2.125rem;
    }

    .service-list-item .service-img {
        block-size: 7.5rem;
        overflow: hidden;
    }

    .service-list-item .service-img img {
        -o-object-fit: cover;
        object-fit: cover;
        block-size: 100%;
        inline-size: 100%;
    }

    #search-form__input + .dropdown-menu:hover,
    #search-form__input:focus + .dropdown-menu {
        display: block !important;
        position: absolute;
        display: block;
        inset-block-start: calc(100% + 0.1rem);
        inset-inline-start: 0rem;
        max-block-size: 25rem;
        overflow-y: auto;
        inline-size: 17.5rem;
    }

    .lh-1\.5 {
        line-height: 1.5;
    }

    .hover-color-c2:hover {
        color: var(--c2) !important;
    }

    .img-square-90 {
        inline-size: 5.625rem;
        block-size: 5.625rem;
        -o-object-fit: cover;
        object-fit: cover;
    }

    #multi_image_picker {
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
    }

    #multi_image_picker img {
        max-block-size: 8.75rem;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .login-right-wrap {
        display: flex;
        flex-direction: column;
    }

    /* Admin Panel CSS */
    .show-notification-list {
        max-block-size: 25rem;
        overflow-y: auto;
    }

    .show-notification-list .card-title {
        line-height: 1.5;
        -webkit-margin-after: 0.5rem;
        margin-block-end: 0.5rem;
    }

    .earning-statistics .select2-container--default .select2-selection--single {
        min-block-size: 2.125rem;
    }

    .earning-statistics
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
        height: 2.125rem;
    }

    .earning-statistics
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
        line-height: 2.125rem;
    }

    .service-list-item .service-img {
        block-size: 7.5rem;
        overflow: hidden;
    }

    .service-list-item .service-img img {
        -o-object-fit: cover;
        object-fit: cover;
        block-size: 100%;
        inline-size: 100%;
    }

    #search-form__input + .dropdown-menu:hover,
    #search-form__input:focus + .dropdown-menu {
        display: block !important;
        position: absolute;
        display: block;
        inset-block-start: calc(100% + 0.1rem);
        inset-inline-start: 0rem;
        max-block-size: 25rem;
        overflow-y: auto;
        inline-size: 17.5rem;
    }

    .lh-1\.5 {
        line-height: 1.5;
    }

    .hover-color-c2:hover {
        color: var(--c2) !important;
    }

    .img-square-90 {
        inline-size: 5.625rem;
        block-size: 5.625rem;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .login-right-wrap {
        display: flex;
        flex-direction: column;
    }

    .show-upload-file {
        background-color: var(--bg-color);
        padding: 0.5rem 1rem;
        -webkit-margin-after: 0.5rem;
        margin-block-end: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .object-fit {
        inline-size: 100%;
        block-size: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .object-fit-cover {
        -o-object-fit: cover;
        object-fit: cover;
    }

    .select2-dropdown {
        z-index: 1056 !important;
        /*1051;*/
    }

    [theme="dark"] .apexcharts-tooltip.light {
        border: 1px solid #6c6c6c;
        background-color: #39393b;
    }

    [theme="dark"] .apexcharts-tooltip.light .apexcharts-tooltip-title {
        background-color: #39393b;
        border-bottom: 1px solid #6c6c6c;
    }

    [theme="dark"] .select2-container--default .select2-selection--multiple {
        background-color: #232325;
    }

    [theme="dark"]
    .select2-container--default
    .select2-results
    > .select2-results__options {
        background: #39393b;
    }

    .main-logo,
    .mobile-logo {
        max-block-size: 2.5rem;
    }

    .page-title {
        text-transform: capitalize;
    }

    label {
        text-transform: capitalize;
    }

    .information-details-box .avatar-img {
        max-inline-size: 8.75rem;
    }

    .max-w-100 {
        -webkit-max-inline-size: 100% !important;
        max-inline-size: 100% !important;
    }

    .grid-column-4 {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        gap: 1rem;
    }

    .ps-20 {
        padding-left: 1.25rem;
    }

    .bg--secondary {
        background-color: rgba(117, 133, 144, 0.1);
    }

    .form-floating input[type="password"] {
        -webkit-padding-end: 2.5rem;
        padding-inline-end: 2.5rem;
    }

    .form-floating .togglePassword {
        position: absolute;
        inset-inline-end: 0.75rem;
        inset-block-start: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }

    .header-icon > img {
        inline-size: 30px;
        block-size: 30px;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .pe--4 {
        -webkit-padding-end: 1.5rem !important;
        padding-inline-end: 1.5rem !important;
    }

    [theme="dark"]
    .select2-container--default
    .select2-search--dropdown
    .select2-search__field {
        background-color: #444 !important;
        color: var(--absolute-white) !important;
    }

    [theme="dark"]
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
        color: #c1c1c1 !important;
    }

    .max-w320 {
        max-inline-size: 20rem;
    }

    .max-w320 + .select2-container {
        max-inline-size: 20rem;
    }

    @media (max-width: 575px) {
        .max-w320 {
            max-inline-size: 100%;
        }
    }

    [theme="dark"] #toast-container > div {
        box-shadow: 0 0 12px #3c3c3c;
    }

    .toast-message {
        text-transform: capitalize;
    }

    #toast-container > div {
        border-radius: 0.25rem !important;
    }

    #toast-container > .toast-success {
        background-color: rgba(22, 181, 89, 0.9) !important;
    }

    #toast-container > .toast-warning {
        background-color: rgba(255, 180, 0, 0.9) !important;
    }

    #toast-container > .toast-error,
    #toast-container > .toast-danger {
        background-color: rgba(255, 76, 81, 0.9) !important;
    }

    #toast-container > .toast-info {
        background-color: rgba(22, 177, 255, 0.9) !important;
    }

    .swal2-popup .swal2-content,
    .swal2-popup .swal2-title {
        color: var(--title-color) !important;
    }
    .swal2-popup .swal2-title {
        font-size: 1.25rem !important;
    }
    .swal2-popup .swal2-content {
        font-size: 1rem !important;
    }

    /* QA Issue Fixing CSS */
    .login-logo {
        max-block-size: 60px;
        max-inline-size: 294px;
    }

    [theme="dark"] .inbox_msg::-webkit-scrollbar {
        inline-size: 0.5rem;
    }

    [theme="dark"] .inbox_msg::-webkit-scrollbar-track {
        background-color: rgba(255, 255, 255, 0.1);
    }

    [theme="dark"] .inbox_msg::-webkit-scrollbar-thumb {
        background-color: var(--c1);
        border-radius: 0.5rem;
        border: 2px solid var(--border-color);
    }

    [theme="dark"] .recaptcha,
    [theme="dark"] .dark-support {
        filter: brightness(0.8) contrast(1.2);
    }

    [theme="dark"] .statistics-card__order-overview {
        border-color: rgba(65, 83, 179, 0.7);
    }

    [theme="dark"] .shadow {
        box-shadow: 0 0.5rem 1rem rgba(65, 83, 179, 0.15) !important;
    }

    .accordion-body {
        text-align: justify;
    }

    .apexcharts-legend-text {
        text-transform: capitalize;
    }

    .upload-file-close {
        cursor: pointer;
    }

    .mw-340 {
        max-inline-size: 340px !important;
    }

    #name_of_file {
        max-inline-size: 9.375rem;
    }

    @media (max-width: 379px) {
        #name_of_file {
            max-inline-size: 6.25rem;
        }
    }

    [theme="dark"] .bg-light {
        --bs-light-rgb: 42, 42, 42;
    }

    .max-h320-auto {
        max-block-size: 20rem;
        overflow-y: auto;
    }

    .text-justify {
        text-align: justify !important;
    }

    .bootstrap-tagsinput {
        border-radius: 0.375rem !important;
        font-size: 0.875rem;
        min-height: 2.8125rem !important;
        padding-inline: 1rem !important;
    }

    .bootstrap-tagsinput input::-moz-placeholder {
        opacity: 1 !important;
        color: #999 !important;
    }

    .bootstrap-tagsinput input::placeholder {
        opacity: 1 !important;
        color: #999 !important;
    }

    .badge-soft-dark {
        background-color: #e0e7ee;
    }

    .fs-10 {
        font-size: 0.625rem !important;
    }

    .fs-12 {
        font-size: 0.75rem !important;
    }

    .bootstrap-tagsinput {
        border-radius: 0.375rem;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        height: 2.8125rem !important;
    }

    .action-btn {
        /* --size: 1.625rem; */
        --size: 30px;
        inline-size: var(--size);
        block-size: var(--size);
        border-radius: 0.25rem;
        background-color: transparent;
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .action-btn.btn--light-primary {
        background-color: rgba(var(--c1-rgb), 0.05);
        border: 1px solid var(--c1);
    }

    .action-btn.btn--light-primary:hover {
        background-color: rgba(var(--c1-rgb), 1);
    }

    .action-btn.btn--success {
        background-color: rgba(var(--bs-success-rgb), 0.05);
        border: 1px solid var(--bs-success);
        color: var(--bs-success);
    }

    .action-btn.btn--success:hover {
        background-color: rgba(var(--bs-success-rgb), 1);
        color: var(--absolute-white);
    }

    .action-btn.btn--danger {
        background-color: rgba(var(--bs-danger-rgb), 0.05);
        border: 1px solid var(--bs-danger);
        color: var(--bs-danger);
    }

    .action-btn.btn--danger:hover {
        background-color: rgba(var(--bs-danger-rgb), 1);
        color: var(--absolute-white);
    }

    .bg-primary-light {
        background-color: rgba(65, 83, 179, 0.05) !important;
    }

    .dropdown-hover {
        position: relative;
        cursor: pointer;
    }

    .dropdown-hover-menu {
        position: absolute;
        background-color: #fff;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
        border-radius: 0.25rem;
        inset-inline-end: calc(100% + 5px);
        inset-block-start: -110%;
        list-style: none;
        padding: 0;
        visibility: hidden;
        opacity: 0;
        transition: all 0.2s ease;
        min-inline-size: 17.5rem;
        max-block-size: 16rem;
        overflow-y: auto;
    }

    .dropdown-hover-menu li {
        padding: 1rem;
        border-radius: 0.5rem;
        border-block-end: 1px solid var(--border-color);
    }

    .dropdown-hover-menu li h5 {
        font-weight: 500;
    }

    .dropdown-hover:hover .dropdown-hover-menu {
        visibility: visible;
        opacity: 1;
        inset-inline-end: calc(100% + 5px);
        inset-block-start: -100%;
    }

    .form-floating > [class^="material-"] {
        position: absolute;
        inset-block-end: 0.8125rem;
        inset-inline-end: 0.8125rem;
        cursor: pointer;
    }

    .form-floating.form-floating__icon > [class^="material-"] {
        cursor: text;
    }

    input.remove-spin::-webkit-outer-spin-button,
    input.remove-spin::-webkit-inner-spin-button {
        /* display: none; <- Crashes Chrome on hover */
        -webkit-appearance: none;
        margin: 0;
        /* <-- Apparently some margin are still there even though it's hidden */
    }

    input.remove-spin[type="number"] {
        -moz-appearance: textfield;
        /* Firefox */
        appearance: textfield;
    }

    #pac-input {
        top: 0.5rem !important;
    }

    @media (max-width: 767px) {
        .gmnoprint {
            display: none;
        }
    }

    .inputDnD .form-control-file {
        position: relative;
        inline-size: 100%;
        block-size: 100%;
        min-block-size: 8rem;
        outline: none;
        visibility: hidden;
        cursor: pointer;
        border-radius: 10px;
    }

    .inputDnD .form-control-file:before {
        content: attr(data-title);
        position: absolute;
        inset-inline-start: 0;
        inline-size: 100%;
        min-block-size: 100%;
        line-height: 2em;
        opacity: 1;
        visibility: visible;
        text-align: center;
        border: 1px dashed currentColor;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }

    .inputDnD .form-control-file:hover:before {
        border-style: solid;
    }

    .img-fit {
        inline-size: 100%;
        block-size: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
    }

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

    .checkbox-color-primary {
        color: #005555 !important;
    }

    .d--none {
        display: none;
    }

    .ripple-animation {
        line-height: 1;
        box-shadow: 0 0 0px 0px rgba(2, 134, 255, 0.3);
        cursor: pointer;
        border-radius: 50%;
        transition: 250ms color;
        animation-name: wave;
        animation-duration: 1.3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    @keyframes wave {
        0% {
            box-shadow: 0 0 0px 0px rgba(2, 134, 255, 0.3);
        }

        100% {
            box-shadow: 0 0 0px 10px rgba(2, 134, 255, 0);
        }
    }

    /* .mb-30 {
        -webkit-margin-after: 1.25rem;
        margin-block-end: 1.25rem;
    } */

    .gap-4 {
        gap: 1.5rem !important;
    }

    .pl-sm-5,
    .px-sm-5 {
        padding-left: 2rem !important;
    }

    .__gap-2 {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

    #service_schedule__span {
        color: var(--title-color);
    }

    .qty-width {
        width: 50px !important;
        text-align: center;
    }

    #offline_payment_top_part,
    #offline_payment_bottom_part {
        background-color: #f0f1f1;
        cursor: not-allowed;
        opacity: 0.5;
        user-select: none;
    }

    #offline_payment_top_part.active,
    #offline_payment_bottom_part.active {
        background-color: #dff2fa !important;
        cursor: default;
        opacity: 1;
        user-select: all;
        animation: zoomInOut 0.3s 0.2s ease-in-out 1;
    }

    #paymentInfoModalButton,
    #bkashInfoModalButton {
        cursor: pointer;
        user-select: none;
    }

    @keyframes zoomInOut {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(0.9);
        }

        100% {
            transform: scale(1);
        }
    }

    .otp-form {
        max-width: 320px;
    }

    .otp-form .otp-field {
        --size: 3.75rem;
        inline-size: var(--size);
        block-size: calc(var(--size) / 2);
        border: none;
        border-bottom: 3px solid var(--c1);
        text-align: center;
        background-color: transparent;
    }

    /* booking evidence photos */
    .max-height-100 {
        max-height: 100px;
    }

    /* can combine partial payment settings */
    .combine-partial-payment {
        position: relative;
        bottom: -19px;
        margin-left: 20px;
        background: #fff;
    }

    .max-w360 {
        max-inline-size: 22.5rem;
    }

    .square-btn {
        --size: 26px;
        width: var(--size);
        height: var(--size);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--c1);
        color: var(--white-color);
    }

    .fs-14 {
        font-size: 14px !important;
    }

    .min-h45 {
        min-height: 45px;
    }

    [theme="dark"] .breadcrumb-item + .breadcrumb-item {
        padding-left: auto;
        padding-right: var(--bs-breadcrumb-item-padding-x);
    }

    [theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
        float: right;
        padding-right: auto;
        padding-left: var(--bs-breadcrumb-item-padding-x);
    }

    .navbar-nav .dropdown-menu.lang-menu {
        position: absolute;
    }

    @media (max-width: 575px) {
        .navbar-nav .dropdown-menu.lang-menu {
            left: unset;
            right: 0;
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .js-navbar-vertical-aside-toggle-invoker {
            margin-right: 0 !important;
        }
    }

    .apply-filter-button:focus,
    .apply-filter-button:hover {
        color: #fff !important;
    }

    /* new css */
    .booking-statistics-info {
        height: 392px;
        overflow-y: auto;
    }

    .multi-select-table-booking {
        min-width: 800px;
    }

    .bs-modal-width {
        --bs-modal-width: 630px;
    }

    .instruction-details {
        max-width: 340px;
    }

    .multi-select-table-provider {
        min-width: 800px;
        min-height: 220px;
    }

    .offer-detail-modal {
        --bs-modal-width: 430px;
    }

    .provider-info-modal {
        --bs-modal-width: 630px;
    }

    #location_map_canvas {
        height: 100%;
    }

    #location_map_div {
        height: 250px;
    }

    .provider-devider {
        --bs-breadcrumb-divider: "|";
    }

    .landing-images {
        height: 50px;
        width: 50px;
    }

    .web-images {
        width: 160px;
    }

    .default-lang {
        background: #d2ffe666;
        color: #00904b;
    }

    #documentationModal {
        --bs-modal-width: 436px;
    }

    .firebase-modal {
        --bs-modal-width: 480px;
    }

    .page-settings {
        display: flex;
        justify-content: space-between;
    }

    .payment-module-warning {
        color: #8c1515;
        padding-top: 10px;
    }

    .payment-image-preview {
        max-width: 100%;
        height: 100px;
    }

    .gateway-title {
        margin-bottom: 10px;
    }

    .lan-key-name {
        width: 50%;
        min-width: 300px;
    }

    .card_heading {
        color: #8c1515;
        padding-top: 10px;
    }

    .iti {
        width: 100%;
    }

    .location_map_class {
        height: 250px;
    }

    .canvas_class {
        height: 100%;
    }

    .service_selector {
        display: none;
    }

    .link_selector {
        display: none;
    }

    .resize-none {
        resize: none;
    }

    /* New style */
    .iti__flag-container + .form-control {
        height: 2.8125rem;
    }

    label.switcher.hasContent::before {
        content: attr(data-before);
        position: absolute;
        right: calc(100% + 15px);
        color: var(--c1);
        font-weight: 600;
        font-size: 0.75rem;
    }

    @media (min-width: 1400px) {
        .gap-xl-5 {
            gap: 3rem !important;
        }
    }

    .bg-custom {
        --bg-custom: rgba(4, 97, 165, 0.12);
        background-color: var(--bg-custom) !important;
    }

    /* .sidebar--search-form {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 9;
        background: #fff
    } */

    .sidebar--search-form .search--form-group {
        position: relative;
        transition: all ease 0.3s;
    }

    .sidebar--search-form .search--form-group .icon {
        position: absolute;
        left: 8px;
        top: 10px;
        color: #99a7ba !important;
    }

    .sidebar--search-form .form-control {
        padding-left: 34px;
    }

    .table-md > :not(caption) > * > * {
        padding: 0.4rem 0.25rem;
    }

    /** BEGIN CSS NEEDED FOR SWITCH **/
    .on-off-toggle {
        height: 24px;
        position: relative;
        display: inline-block;
    }

    .on-off-toggle__slider {
        line-height: 1;
        display: block;
        border-radius: 50rem;
        background-color: #dfe5eb;
        transition: background-color 0.15s ease-in;
        padding: 3px;
        color: var(--absolute-dark);
        user-select: none;
    }

    #service_schedule__span {
        cursor: pointer;
    }

    .on-off-toggle__input {
        position: absolute;
        opacity: 0;
    }

    .on-off-toggle__circle {
        --size: 18px;
        width: var(--size);
        min-width: var(--size);
        height: var(--size);
        border-radius: var(--size);
        background-color: var(--absolute-white);
        display: block;
    }

    .on-off-toggle__off,
    .on-off-toggle__on {
        display: flex;
        gap: 0.35rem;
        align-items: center;
        transition: all 300ms ease-in-out;
    }

    .on-off-toggle__on {
        display: none;
    }

    .on-off-toggle__on .on-off-toggle__text {
        padding-inline-start: 0.35rem;
    }

    .on-off-toggle__off .on-off-toggle__text {
        padding-inline-end: 0.35rem;
    }

    .on-off-toggle__text {
        font-size: 10px;
    }

    .on-off-toggle__input:checked + .on-off-toggle__slider .on-off-toggle__off {
        display: none;
    }

    .on-off-toggle__input:checked + .on-off-toggle__slider .on-off-toggle__on {
        display: flex;
    }

    .on-off-toggle__input:checked + .on-off-toggle__slider {
        background-color: var(--c1);
        color: var(--absolute-white);
    }

    /* Custom Dropdown Menu */
    .dropdown-menu__custom {
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
        --bs-dropdown-min-width: 14rem;
        padding: 5px;
    }

    .dropdown-menu__custom li {
        padding: 0.5rem 1rem;
        background-color: var(--absolute-white);
        border-radius: 0.35rem;
    }

    .dropdown-menu__custom li:hover {
        background-color: #f3f8ff;
        color: var(--c1);
    }

    .dropdown-menu__custom li:hover * {
        color: var(--c1);
    }

    /* Timeline CSS */
    #service_schedule__span {
        position: relative;
    }

    .timeline-container {
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 9;
        cursor: pointer;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: all 300ms ease-in-out;
    }

    #service_schedule__span:hover .timeline-container {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .timeline-sessions {
        position: relative;
        list-style-type: none;
        padding: 1rem;
        margin: 0;
        border-radius: 5px;
        background-color: var(--white-color);
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
        min-width: 180px;
        text-align: start;
    }

    .timeline-container li {
        padding-bottom: 1.5rem;
        border-left: 2px solid #f0ecec;
        position: relative;
        padding-left: 12px;
    }

    .timeline-container li.active {
        border-left: 2px solid var(--c1);
    }

    .timeline-container li:last-child {
        border: 0px;
        padding-bottom: 0;
    }

    .timeline-container li::before {
        content: "";
        width: 0.625rem;
        height: 0.625rem;
        background-color: var(--white-color);
        border: 2px solid #b4c3ce;
        border-radius: 50%;
        position: absolute;
        left: -6px;
        top: 0px;
    }

    .timeline-container li:last-child::before {
        left: -4px;
    }

    .timeline-container li.active:before {
        border: 2px solid var(--c1);
    }

    .timeline-date {
        position: relative;
        top: -3px;
    }

    .timeline-date,
    .timeline-time {
        color: var(--text-color);
        font-weight: 500;
        font-size: 12px;
    }

    .timeline-container li.active .timeline-date,
    .timeline-container li.active .timeline-time {
        color: var(--title-color);
    }

    .h-45 {
        height: 45px;
    }

    table th {
        font-weight: 600;
    }

    .min-w120 {
        min-inline-size: 7.5rem;
    }

    .text-two-line {
        display: -webkit-box;
        max-width: 400px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* upload Image */
    .input_msg_write .upload_img_box {
        position: relative;
        width: 40px;
        height: 40px;
        aspect-ratio: 1;
        border-radius: 4px;
        border: 1px solid #f5f5f5;
    }

    .input_msg_write .upload_img_box img {
        border-radius: 4px;
        overflow: hidden;
        aspect-ratio: 1;
        height: 40px;
        object-fit: cover;
    }

    .input_msg_write .upload_img_box .img-clear {
        position: absolute;
        width: 14px;
        height: 14px;
        color: var(--absolute-white);
        background-color: #9eadc1;
        border-radius: 100%;
        right: -6px;
        top: -6px;
        display: grid;
        place-items: center;
        line-height: 1;
        cursor: pointer;
        transition: all 300ms ease-in-out;
    }

    .input_msg_write .upload_img_box .img-clear:hover {
        background-color: var(--bs-danger);
    }

    /*.inbox-img-grid {*/
    /*    display: grid;*/
    /*    grid-template-columns: 70px 70px;*/
    /*    grid-template-rows: 70px 70px;*/
    /*    justify-content: end;*/
    /*    gap: 0.5rem;*/
    /*    margin-block-end: 0.3125rem;*/
    /*}*/

    .inbox-img-grid {
        display: flex;
        justify-content: end;
        gap: 0.5rem;
        margin-block-end: 0.3125rem;
        flex-wrap: wrap;
    }

    .inbox-img-grid > * {
        object-fit: cover;
        width: 70px;
        height: 70px;
        border-radius: 0.5rem;
        overflow: hidden;
    }

    .conv-img-wrap {
        position: relative;
    }

    .conv-img-wrap > img {
        border-radius: 0.5rem;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .conv-img-wrap-content {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 1rem;
        font-weight: 600;
        color: var(--absolute-white);
        border-radius: 0.5rem;
        line-height: 1.3;
    }

    [dir="rtl"] .input_msg_write .pl-8 {
        padding-right: 3.5rem !important;
    }

    .select2-search-has-icon {
        position: relative;
    }

    .select2-search-has-icon .select2-search__icon {
        position: absolute;
        top: 50%;
        left: 0.625rem;
        transform: translateY(-50%);
    }

    .select2-search--dropdown.select2-search-has-icon .select2-search__field {
        padding-left: 1.8rem;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        border-radius: 0.25rem;
        height: 35px;
    }

    .modal-content {
        max-height: 90dvh;
        overflow-y: auto;
    }

    input::-webkit-search-cancel-button {
        -webkit-appearance: none;
        height: 1.25rem;
        width: 1.25rem;
        border-radius: 50rem;
        background: var(--c1) url(../img/icons/close.svg) no-repeat center center;
        background-size: 70%;
        cursor: pointer;
    }

    .select2-container--default .select2-selection--multiple {
        max-height: 100px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #apex_radial-bar-chart foreignObject {
        overflow-x: auto;
    }

    #apex_radial-bar-chart .apexcharts-legend {
        flex-wrap: nowrap !important;
        min-width: max-content;
    }

    #apex_radial-bar-chart foreignObject::-webkit-scrollbar {
        height: 3px;
    }

    #apex_radial-bar-chart foreignObject::-webkit-scrollbar-thumb {
        border-radius: 6px;
        /* Set the border radius of the scrollbar thumb */
    }

    body.aside-folded:not(.open-aside-folded) .search--form-group {
        display: none;
    }

    .select2-search-has-icon {
        position: relative;
    }

    .select2-search-has-icon .select2-search__icon {
        position: absolute;
        top: 50%;
        left: 0.625rem;
        transform: translateY(-50%);
    }

    .select2-search-has-icon .select2-search__field {
        padding-left: 1.8rem;
    }

    #form-wizard .form-error-wrap + label,
    #form-wizard .form-floating + label {
        color: var(--bs-danger);
        margin-top: 0.5rem;
    }

    /* Chrome, Safari, Edge, Opera */
    .withdraw-input::-webkit-outer-spin-button,
    .withdraw-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    .withdraw-inputut[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

    .form-floating__icon .material-icons,
    .form-floating__icon .material-symbols-outlined {
        position: absolute;
        top: 45%;
        inset-inline-start: 10px;
        transform: translateY(-50%);
        width: max-content;
        color: var(--bs-gray-500);
    }

    .form-floating__icon .material-icons.togglePassword,
    .form-floating__icon .material-symbols-outlined.togglePassword {
        inset-inline-start: auto;
        inset-inline-end: 10px;
        cursor: pointer;
    }

    .form-floating__icon .form-control {
        padding-left: 44px;
    }

    .form-floating__icon > label {
        inset-inline-start: 24px;
        transition: all 300ms ease;
    }

    .form-floating__icon > input:focus + label {
        inset-inline-start: 0.5rem;
    }

    .lagn-drop-btn {
        background: var(--body-bg);
        padding: 10px 20px;
        border-radius: 10px;
        min-width: 200px;
    }

    @media (max-width: 767px) {
        .lagn-drop-btn {
            padding: 10px;
            min-width: initial;
        }
    }

    .lagn-drop-btn + .dropdown-menu {
        min-width: 200px;
    }

    .lagn-drop-btn + .dropdown-menu li:not(:last-child) {
        border-bottom: 1px solid var(--body-bg);
    }

    .offline-btn {
        background-color: #959ecf;
        color: #fff;
    }

    .bg-soft-danger {
        background-color: #ff67671a !important;
    }
    .bg-soft-light {
        background-color: rgba(82, 102, 208, 0.05) !important;
    }

    .border-danger-light {
        border-color: #ff676733 !important;
    }

    .cursor-auto {
        cursor: auto !important;
    }

    .h-69px {
        height: 69px !important;
    }

    .info-transform-fix {
        transform: translateY(4px);
    }

    .min-w-92px {
        min-width: 92px;
    }

    /* Hide the spin buttons for number inputs */
    input.spin-none[type="number"]::-webkit-inner-spin-button,
    input.spin-none[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
        /* Optional - adjust as needed */
    }

    input.spin-none[type="number"] {
        appearance: textfield;
        -moz-appearance: textfield;
    }

    .check-28 {
        width: 28px;
        height: 28px;
    }

    .tf-box {
        border-radius: 5px;
        border: 2px solid #fff;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0) 100%
        );
        backdrop-filter: blur(5px);
        max-width: 578px;
    }

    .tf-box h2 {
        font-size: 40px;
        font-weight: var(--medium);
    }

    @media (max-width: 1199px) {
        .tf-box h2 br {
            display: none;
        }
    }

    @media (max-width: 575px) {
        .tf-box h2 {
            font-size: 24px;
        }
    }

    .bg-center {
        background-position: center;
    }

    .login-right {
        max-width: 450px;
    }

    .register-right-wrap {
        max-height: 100dvh;
        overflow-y: auto;
    }

    .form-select {
        height: 2.8125rem;
    }

    /* Version_2.6 CSS */
    .mw-700 {
        max-width: 700px;
    }

    .grid-columns {
        --min: 10rem;
        --max: 1fr;
        --gap: 1rem;
        --repeat: auto-fill;
        display: grid;
        grid-template-columns: repeat(
            var(--repeat),
            minmax(var(--min), var(--max))
        );
        gap: var(--gap);
    }

    .dropdown__style--two .dropdown-menu {
        box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);
        padding: 5px;
    }

    .dropdown__style--two .dropdown-item {
        border-radius: 5px;
        border: 1px solid transparent;
        font-size: 14px;
        color: var(--dark-color);
        font-weight: var(--medium);
        transition: all 300ms ease-in-out;
    }

    .dropdown__style--two .dropdown-item:hover {
        border-color: #eef6ff;
        background-color: #f3f8ff;
        box-shadow: 0px 12px 24px -4px rgba(27, 127, 237, 0.05),
        0px 0px 2px 0px rgba(0, 113, 220, 0.05);
        color: var(--c1);
    }

    .scrollY {
        --mh: 100px;
        max-height: var(--mh);
        overflow-y: auto;
    }

    .table-responsive .dropdown,
    .table-responsive .btn-group,
    .table-responsive .btn-group-vertical {
        position: static;
    }

    #fade {
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 999998;
        -moz-opacity: 0.8;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

    #light {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        max-width: 620px;
        height: 380px;
        transform: translate(-50%, -50%);
        z-index: 999999;
        overflow: visible;
        background: #fff;
        border-radius: 10px;
        padding: 10px;
    }

    #boxclose {
        cursor: pointer;
        color: #fff;
        border: 1px solid #aeaeae;
        border-radius: 100%;
        background: #666;
        font-size: 14px;
        display: grid;
        place-items: center;
        line-height: 1;
        padding: 2px;
        width: 16px;
        height: 16px;
    }

    .boxclose:before {
        content: "×";
        position: relative;
        top: -2px;
    }

    #fade:hover ~ #boxclose {
        display: none;
    }

    .h-160 {
        height: 160px;
    }

    video#VisaChipCardVideo {
        max-width: 100%;
        border-radius: 8px;
        height: calc(100% - 24px);
    }

    .min-h-200 {
        min-height: 200px;
    }

    .h-200 {
        height: 200px !important;
    }

    .video video {
        width: 100%;
        height: 100%;
        border-radius: 10px;
    }

    .upload-file__img video {
        width: 100%;
        height: 100%;
        border-radius: 6px;
    }

    .remove-file-button {
        position: absolute;
        right: 15px;
        top: 15px;
        background: transparent;
        border: none;
        outline: none;
        z-index: 999;
        display: none;
        color: red;
    }

    .promotion-typewise-upload-box {
        display: none;
    }

    .top-80px {
        top: 80px;
    }

    .form--check {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0;
    }

    .form--check .form-check-input {
        margin: 0;
        min-width: 16px;
        min-height: 16px;
        box-shadow: none !important;
        outline: none !important;
    }

    .form--check .form-check-input:checked {
        background-color: var(--c1);
        border-color: var(--c1);
    }

    .form--check .form-check-input:not(:checked) ~ .form-check-label {
        opacity: 0.75;
    }

    .w-50 {
        width: 50%;
    }

    .w-75 {
        width: 75%;
    }

    .w-65 {
        width: 65%;
    }

    .w-35 {
        width: 35%;
    }

    .w-25 {
        width: 25%;
    }

    .text-8797AB {
        color: #8797ab;
    }

    .profile-prev-image {
        width: 30%;
        max-width: 90px;
        aspect-ratio: 1;
        border-radius: 50%;
    }

    .profile-preview-box .wishlist-btn {
        width: 30px;
        height: 30px;
        border-radius: 6px;
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .profile-preview-box .wishlist-btn-2 {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: absolute;
        right: 15px;
        top: 15px;
        background: var(--c1);
        color: var(--absolute-white);
    }

    .w-0 {
        width: 0;
    }

    .static-text {
        display: none;
    }

    @media screen and (min-width: 1200px) {
        .static-text {
            font-size: 0.9rem;
            line-height: 1.5;
        }
    }

    .line-limit-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .drp-buttons .btn {
        padding: 0.675rem 0.75rem !important;
        font-size: 0.875rem;
        border-radius: 0.25rem;
    }

    .drp-buttons .btn-primary {
        --bs-btn-bg: var(--c1);
        --bs-btn-border-color: var(--c1);
        --bs-btn-hover-bg: var(--c1);
        --bs-btn-hover-border-color: var(--c1);
        --bs-btn-active-bg: var(--c1);
        --bs-btn-active-border-color: var(--c1);
        --bs-btn-disabled-bg: var(--c1);
        --bs-btn-disabled-border-color: var(--c1);
    }

    .icon-absolute-on-right {
        position: absolute;
        font-size: 20px;
        opacity: 0.6;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    label.error {
        color: var(--bs-danger) !important;
        font-size: 12px;
    }

    #add-new-employee-form .steps {
        border-bottom: var(--bs-border-width) var(--bs-border-style)
        var(--bs-border-color) !important;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    #add-new-employee-form .steps ul {
        justify-content: flex-start;
    }

    .modal .modal-content.modal-content__search {
        background-color: transparent !important;
    }

    .search-list-item {
        padding: 0.5rem 1rem;
        background-color: transparent;
        border-radius: 10px;
        transition: all 0.3s ease;
    }

    .search-list-item:hover {
        background-color: rgba(4, 97, 165, 0.05);
    }

    .search-list {
        max-height: 300px;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .min-h-350 {
        min-height: 350px;
    }

    .ctrlplusk {
        letter-spacing: -0.3px;
    }

    .modal.fade.removeSlideDown .modal-dialog {
        transition: none;
        transform: none;
    }

    .bg-card {
        background-color: var(--white-color);
    }

    .pe--12 {
        padding-inline-end: 12px !important;
    }

    .span-full {
        grid-column: 1 / -1;
        order: 9999;
    }

    .alert-danger {
        --bs-alert-color: rgba(255, 103, 103, 1);
        --bs-alert-bg: rgba(255, 103, 103, 0.05);
        --bs-alert-border-color: transparent;
    }

    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
        width: 40px;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-right: 40px;
    }

    .form-floating
    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
        padding-inline: 40px;
    }

    .play-icon span {
        cursor: pointer;
        font-size: 50px;
        user-select: none;
        color: var(--white-color);
    }

    .absolute-centered {
        position: absolute;
        inset-inline-start: 50%;
        inset-block-start: 50%;
        transform: translate(-50%, -50%);
    }

    .iti__search-input,
    .iti__dropdown-content {
        background-color: var(--white-color) !important;
        color: var(--title-color) !important;
    }

    .icon-absolute-on-right {
        right: 16px;
        top: 50%;
    }

    .access-checkboxes hr {
        border-color: #b5b5b5;
    }

    .profile_img {
        aspect-ratio: 1;
        object-fit: cover;
    }

    .cancellantion-note {
        border: 1px solid rgba(255, 103, 103, 0.2);
        background: rgba(255, 103, 103, 0.1);
        padding: 10px;
    }

    /* version 2.7 CSS */
    .overview-card {
        position: relative;
        border-radius: 0.625rem;
        background-color: rgba(0, 224, 255, 0.1);
        padding: 1.25rem;
        z-index: 1;
    }

    .overview-card::after {
        border-radius: 5px 0px 400px 0px;
        background: rgba(91, 188, 255, 0.05);
        width: 124px;
        height: 125px;
        max-height: 100%;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        flex-shrink: 0;
        z-index: -1;
    }

    .overview-card.after-w50::after {
        width: 50%;
    }

    .img-circle {
        --size: 60px;
        width: var(--size);
        height: var(--size);
        border-radius: var(--size);
        display: grid;
        place-items: center;
        background-color: var(--bs-white);
        padding: 0.5rem;
    }

    .overview-card__title {
        color: var(--c1);
    }

    .overview-card.style__two {
        background-color: rgba(208, 172, 0, 0.1);
    }

    .overview-card.style__two .overview-card__title {
        color: #e27e26;
    }

    .overview-card.style__two::after {
        background-color: rgba(208, 172, 0, 0.05);
    }

    .overview-card.style__three {
        background-color: rgba(3, 157, 85, 0.05);
    }

    .overview-card.style__three .overview-card__title {
        color: #039d55;
    }

    .overview-card.style__three::after {
        background-color: rgba(3, 157, 85, 0.05);
    }

    .overview-card.style__four {
        background-color: rgb(201 0 11 / 10%);
    }

    .overview-card.style__four .overview-card__title {
        color: #039d55;
    }

    .overview-card.style__four::after {
        background-color: rgb(201 0 11 / 10%);
    }

    .max-w500 {
        max-width: 500px !important;
    }

    .business-summary.style__two {
        background: rgba(0, 224, 255, 0.1);
    }

    .business-summary.style__two h2 {
        color: var(--c1);
    }

    .business-summary.style__two h3 {
        color: var(--title-color);
    }

    .business-summary.style__two::after {
        background: rgba(91, 188, 255, 0.05);
        opacity: 1;
    }

    .business-summary.style__two.success {
        background: rgba(0, 197, 126, 0.1);
    }

    .business-summary.style__two.success h2 {
        color: var(--bs-success);
    }

    .business-summary.style__two.success::after {
        background: rgba(0, 197, 126, 0.05);
    }

    .business-summary.style__two.danger {
        background: rgba(255, 117, 0, 0.05);
    }

    .business-summary.style__two.danger h2 {
        color: var(--bs-danger);
    }

    .business-summary.style__two.danger::after {
        background: rgba(255, 103, 103, 0.05);
    }

    .business-summary.style__two.warning {
        background: rgba(208, 172, 0, 0.1);
    }

    .business-summary.style__two.warning h2 {
        color: var(--bs-warning);
    }

    .business-summary.style__two.warning::after {
        background: rgba(208, 172, 0, 0.05);
    }

    .statistics-card.style__two {
        border: 0.791px solid rgba(65, 83, 179, 0.3);
        box-shadow: 0px 0px 1.582px 0px rgba(145, 158, 171, 0.2),
        0px 9.49px 18.98px -3.163px rgba(145, 158, 171, 0.1);
    }

    .statistics-card.style__two::after {
        background: linear-gradient(
            180deg,
            rgba(65, 83, 179, 0.06) 0%,
            rgba(232, 235, 255, 0.06) 100%
        );
        border-end-end-radius: 100rem;
        border-start-end-radius: 0;
        opacity: 1;
        inline-size: 60%;
        block-size: 100%;
    }

    g[filter="url(#filter4_d_4021_1338)"] + path,
    g[filter="url(#filter4_d_4021_1338)"],
    g[filter="url(#filter7_d_4021_1338)"],
    g[filter="url(#filter2_d_4021_1338)"] + path,
    g[filter="url(#filter2_d_4021_1338)"],
    g[filter="url(#filter6_d_4021_1338)"],
    g[filter="url(#filter3_d_4021_1338)"] + path,
    g[filter="url(#filter3_d_4021_1338)"],
    g[filter="url(#filter5_d_4021_1338)"] {
        opacity: 0;
        transform: translateX(100px) scale(0.85);
        transition: 0.35s;
        transition-delay: 0.35s;
    }

    g[filter="url(#filter4_d_4021_1338)"] + path,
    g[filter="url(#filter4_d_4021_1338)"],
    g[filter="url(#filter2_d_4021_1338)"] + path,
    g[filter="url(#filter2_d_4021_1338)"],
    g[filter="url(#filter3_d_4021_1338)"] + path,
    g[filter="url(#filter3_d_4021_1338)"] {
        transition-delay: 0.5s;
    }

    g[filter="url(#filter4_d_4021_1338)"] + path,
    g[filter="url(#filter4_d_4021_1338)"],
    g[filter="url(#filter7_d_4021_1338)"],
    g[filter="url(#filter2_d_4021_1338)"] + path,
    g[filter="url(#filter2_d_4021_1338)"],
    g[filter="url(#filter6_d_4021_1338)"] {
        transform: translateX(-20px) scale(0.8);
    }

    #documentationModal.show g[filter="url(#filter3_d_4021_1338)"] + path,
    #documentationModal.show g[filter="url(#filter3_d_4021_1338)"],
    #documentationModal.show g[filter="url(#filter5_d_4021_1338)"],
    #documentationModal.show g[filter="url(#filter4_d_4021_1338)"] + path,
    #documentationModal.show g[filter="url(#filter4_d_4021_1338)"],
    #documentationModal.show g[filter="url(#filter7_d_4021_1338)"],
    #documentationModal.show g[filter="url(#filter2_d_4021_1338)"] + path,
    #documentationModal.show g[filter="url(#filter2_d_4021_1338)"],
    #documentationModal.show g[filter="url(#filter6_d_4021_1338)"] {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }

    .price-box hr {
        border-color: #b5b5b5;
    }

    .price-box.active {
        background-color: var(--c1);
        color: var(--absolute-white);
    }

    .price-box.active .price-box__top h5 {
        color: var(--absolute-white);
    }

    .price-box__top {
        --size: 600px;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

    .price-box__top::after {
        width: var(--size);
        height: var(--size);
        border-radius: var(--size);
        content: "";
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        z-index: -1;
        background: rgba(4, 97, 165, 0.05);
    }

    .price-box.active .price-box__top::after {
        background: rgba(255, 255, 255, 0.05);
    }

    .overflow-x-auto {
        overflow-x: auto !important;
    }

    .price-box-wrap {
        display: flex;
        gap: 1rem;
    }

    .price-box-wrap > .price-box {
        flex: 1 0 215px;
    }

    .min-h-62 {
        min-height: 62px;
    }

    .max-w-600 {
        max-width: 600px;
    }

    .payment-method-option {
        transition: all 250ms;
    }

    .payment-method-option.active {
        border-color: rgba(4, 97, 165, 0.51);
        box-shadow: 0px 8px 15px 0px rgba(4, 97, 165, 0.1);
    }

    .mw-632 {
        max-width: 632px;
    }

    /* Toaster CSS */
    .notifications-container {
        max-width: 520px !important;
    }

    .notifications-container .notify {
        --notify-gray-2: var(--text-color);
        --notify-gray: var(--title-color);
        --notify-padding: 1rem;
    }

    .notify--type-1.custom_toast {
        background-color: var(--white-color);
        border: none;
        border-left: 5px solid currentColor;
        align-items: flex-start;
    }

    .custom_toast .notify__title {
        margin-bottom: 6px;
    }

    .notifications-container .custom_toast.notify--type-1 {
        box-shadow: 0px 12px 32px 0px rgba(6, 28, 61, 0.08);
    }

    .billing-card-slider-item {
        width: 280px;
    }

    @media screen and (min-width: 576px) {
        .billing-card-slider-item {
            width: 330px;
        }
    }

    @media screen and (min-width: 1200px) {
        .billing-card-slider-item {
            width: 360px;
        }
    }

    .create-provider-item .icon-1,
    .create-provider-item .icon-2 {
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .create-provider-item .icon-1 {
        background: var(--c1);
        color: #fff;
    }

    .create-provider-item .icon-2 {
        color: var(--c1);
        border: 1px solid var(--c1);
        font-size: 15px;
    }

    .input-radio-item {
        display: block;
    }

    .input-radio-item .inner {
        padding: 22px 24px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        border: 1px solid #eff1f4;
        border-radius: 10px;
        cursor: pointer;
    }

    .input-radio-item .inner::after {
        content: "";
        width: 20px;
        height: 20px;
        border: 1px solid var(--c1);
        opacity: 0.4;
        display: inline-block;
        border-radius: 50%;
        color: #fff;
    }

    @keyframes zoomIn {
        0% {
            transform: scale(0);
        }

        100% {
            transform: scale(1);
        }
    }

    .input-radio-item input:checked ~ .inner::after {
        background: var(--c1);
        opacity: 1;
        content: "\e5ca";
        font-family: "Material Symbols Outlined";
        font-size: 20px;
        line-height: 20px;
        animation: zoomIn 0.3s;
        -webkit-animation: zoomIn 0.3s;
        -moz-animation: zoomIn 0.3s;
    }

    .input-radio-item input:checked ~ .inner {
        border-color: var(--c1);
        background: #4152b310;
    }

    .input-radio-item .inner h5 {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .plan-item {
        text-align: center;
        border-radius: 20px;
        margin: 0;
        width: 235px;
        height: calc(100% - 2px);
    }

    .plan-item-inner {
        border: 1px solid #0461a54d;
        padding: 20px;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        height: 100%;
        cursor: pointer;
        color: #212b36;
    }

    .plan-item input:checked ~ .plan-item-inner {
        border-color: var(--c1);
        background: var(--c1);
        color: rgba(255, 255, 255, 0.8);
    }

    .plan-item-inner .name {
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        color: #4b5864;
        margin-bottom: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
    }

    .plan-item-inner .name::before {
        width: 20px;
        height: 20px;
        border: 2px solid var(--c1);
        background: var(--absolute-white);
        border-radius: 50%;
        content: "";
        display: inline-block;
    }

    .plan-item-inner .name-content {
        max-width: calc(100% - 40px);
        text-align: left;
    }

    .plan-item-inner .price {
        font-size: 22px;
        font-weight: 700;
        color: #212b36;
        margin-bottom: 5px;
    }

    .plan-item-inner::after {
        content: "";
        width: 600px;
        height: 600px;
        background: #0461a50d;
        position: absolute;
        bottom: calc(100% - 65px);
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
    }

    .plan-item-inner .info {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 12px;
        gap: 11px;
        margin-top: 15px;
        padding-top: 20px;
        border-top: 1px solid #0461a533;
    }

    .plan-item input:checked ~ .plan-item-inner .info {
        border-color: #ffffff20;
    }

    .plan-item input:checked ~ .plan-item-inner .price,
    .plan-item input:checked ~ .plan-item-inner .name {
        color: #ffffff;
    }

    .plan-item input:checked ~ .plan-item-inner::after {
        background: #ffffff0a;
    }

    .plan-item input:checked ~ .plan-item-inner .name::before {
        content: "\e5ca";
        font-family: "Material Symbols Outlined";
        font-size: 16px;
        line-height: 18px;
        animation: zoomIn 0.3s;
        -webkit-animation: zoomIn 0.3s;
        -moz-animation: zoomIn 0.3s;
        color: var(--c1);
        border-color: #0083e2;
        background: #ffff00;
    }

    .price-box-slider .swiper-slide {
        width: fit-content !important;
    }

    .price-box-slider {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .price-box-slider .swiper-wrapper {
        max-width: 100% !important;
        width: unset !important;
    }

    #create-provider-form .steps {
        display: none;
    }

    .package-subscriber
    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
        max-width: 400px;
    }

    .min-width-200px {
        min-width: 200px !important;
    }

    .min-width-300px {
        min-width: 300px !important;
    }

    .max-height-45px {
        max-height: 45px;
    }

    .bg-soft-dark {
        background-color: rgba(19, 33, 68, 0.1);
    }

    .text-underline {
        text-decoration: underline;
    }

    .iti--inline-dropdown .iti__dropdown-content {
        z-index: 9999;
    }

    /* New CSS */
    .form--check {
        cursor: pointer;
    }

    .form--check--inline {
        padding: 16px 20px;
        background: var(--white-color);
    }

    .form--check--inline .form-check-label {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .form--check--inline .form-check-label .material-symbols-outlined {
        opacity: 0.6;
        font-size: 95%;
    }

    .border-2 {
        border: 1px solid rgba(208, 219, 233, 0.4);
    }

    .border-2 .form-control {
        border-color: #d0dbe9;
    }

    .mt-10px {
        margin-top: 10px;
    }

    [theme="dark"] .border-2 {
        border-color: rgba(255, 255, 255, 0.1);
    }

    [theme="dark"] .border-2 .form-control {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .btn-outline-primary {
        border: 1px solid var(--c1);
    }

    .btn-outline-primary:not(:hover) {
        color: var(--c1);
        background: transparent;
    }

    .add-content-btn {
        height: 40px;
        padding-inline: 15px;
        padding-block: 0 !important;
        font-size: 14px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        --c1: #00aa6d;
    }

    .edit-content-btn {
        height: 40px;
        padding-inline: 15px;
        padding-block: 0 !important;
        font-size: 14px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
    }

    .btn--light-danger {
        background-color: rgba(65, 83, 179, 0.05);
        color: var(--c2);
        border-color: var(--c2);
    }

    .robots-meta-checkbox-card {
        padding: 20px;
        border: 1px solid #3342571a;
        border-radius: 5px;
    }

    .robots-meta-checkbox-card .item {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .h-30 {
        height: 30px;
    }

    @media screen and (max-width: 450px) {
        .robots-meta-checkbox-card .item,
        .robots-meta-checkbox-card .checkbox--item {
            width: 100%;
        }
    }

    .form--check .form-check-input {
        transform: translateY(-2px);
    }

    .w-120px {
        width: 120px;
    }

    .selected-systems {
        row-gap: 6px;
        column-gap: 24px;
    }

    .form--check .form-check-input {
        transform: translateY(0);
    }

    .top-3 {
        top: 12px;
    }

    .right-3 {
        right: 12px;
    }

    .z-10 {
        z-index: 10;
    }

    .gap-x-30 {
        column-gap: 30px;
        row-gap: 10px;
    }

    .alert--message-2 {
        border-left: 3px solid var(--c1);
        border-radius: 6px;
        position: fixed;
        right: 20px;
        top: 80px;
        z-index: 9999;
        background: #fff;
        width: 80vw;
        display: flex;
        max-width: 330px;
        align-items: center;
        gap: 12px;
        padding: 16px;
        font-size: 12px;
        transition: all ease 0.5s;
        box-shadow: 0 0 2rem rgba(0, 0, 0, 0.075);
    }

    .alert--message-2 h6 {
        font-size: 16px;
    }

    .alert--message-2:not(.active) {
        transform: translateX(calc(100% + 40px));
    }

    .alert--message-3 {
        border-left: 3px solid var(--c1);
        border-: 3px solid var(--c1);
        border-radius: 6px;
        position: fixed;
        right: 20px;
        top: 80px;
        z-index: 9999;
        background: #fff;
        width: 80vw;
        display: flex;
        max-width: 330px;
        align-items: center;
        gap: 12px;
        padding: 16px;
        font-size: 12px;
        transition: all ease 0.5s;
    }

    .alert--container {
        position: fixed;
        right: 20px;
        top: 80px;
        z-index: 9999;
        width: 80vw;
        max-width: 330px;
    }

    [dir="rtl"] .alert--container {
        right: auto;
        left: 20px;
    }

    .alert--container:not(.active) {
        opacity: 0;
        visibility: hidden;
    }

    .alert--container .alert {
        position: unset !important;
        top: unset !important;
        left: unset !important;
        right: unset !important;
        margin-bottom: 10px;
        width: 100% !important;
    }

    .alert--container .alert:not(.active) {
        display: none;
    }

    .maintainance-text-button .square-btn {
        transform: translateY(4px);
    }

    .badge-soft-secondary {
        color: #363636;
        background-color: rgba(113, 134, 157, 0.1);
    }

    .max-w-215px {
        max-width: 215px;
    }

    .progress-circle-container .progress-circle {
        transform: rotate(-90deg);
        border: 4px solid transparent;
        aspect-ratio: 1;
        border-right-color: var(--c1);
        border-bottom-color: var(--c1);
        border-radius: 50%;
    }

    .upload--progress {
        height: 5px;
    }

    .progress-circle-container .progress-circle circle {
        fill: none;
        stroke-width: 8;
    }

    .progress-circle-container .progress-circle .bg {
        stroke: transparent;
    }

    .progress-circle-container .progress-circle .progress {
        stroke: var(--c1);
        stroke-dasharray: 283;
        stroke-dashoffset: 283;
        transition: stroke-dashoffset 1s ease;
        stroke-linecap: round;
    }

    .w-43px {
        width: 43px;
    }

    .text-9EADC1 {
        color: #9eadc1;
    }

    .modal-body-color-border {
        border-left: 5px solid var(--c1);
    }

    .flex-grow {
        flex-grow: 1;
    }

    .btn--container {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .mb-20px {
        margin-bottom: 20px;
    }

    .form-label {
        color: var(--absolute-dark);
    }

    .robots-meta-checkbox-card {
        padding: 20px;
        border: 1px solid #3342571a;
        border-radius: 5px;
    }

    .checkbox--item {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        font-size: 14px;
        margin: 0;
    }

    .checkbox--item:not(:last-child) {
        margin-bottom: 10px;
    }

    .checkbox--item input {
        display: none;
    }

    .checkbox--item .checked {
        display: none;
    }

    .checkbox--item input:checked ~ .checked {
        display: inline-block;
    }

    .checkbox--item input:checked ~ .unchecked {
        display: none;
    }

    .checkbox--item input:checked ~ * {
        font-weight: 600;
    }

    .robots-meta-checkbox-card .item {
        flex-grow: 1;
    }

    .h-30 {
        height: 30px;
    }

    @media screen and (max-width: 450px) {
        .robots-meta-checkbox-card .item,
        .robots-meta-checkbox-card .checkbox--item {
            width: 100%;
        }
    }

    .check-item-2 {
        display: inline-flex;
        border-radius: 3px;
        background: #eeeeee;
    }

    .check-item-2 input {
        width: 18px;
        height: 18px;
        border-radius: 3px;
        border: none !important;
    }

    .check-item-2 input:not(:checked) {
        opacity: 0;
    }

    .check-item-2 input:checked {
        background-color: #006fbd;
        opacity: 1;
    }

    .max-w-353px {
        max-width: 353px;
    }

    .__bg-FAFAFA {
        background: #fafafa;
    }

    .bg-F8F8F8 {
        background: #f8f8f8;
    }

    :root {
        --bs-primary-rgb: 65, 83, 179;
    }

    .left-0 {
        left: 0;
    }

    .right-0 {
        right: 0;
    }

    .earning-details-card-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .earning-details-card-wrapper .left-card {
        width: 230px;
        flex-grow: 1;
    }

    .earning-details-card-wrapper .slider-card {
        width: 100%;
    }

    @media screen and (min-width: 768px) {
        .earning-details-card-wrapper .left-card {
            flex-grow: 0;
        }

        .earning-details-card-wrapper .slider-card {
            width: 100px;
            flex-grow: 1;
        }
    }

    .earning-details-card-wrapper .slider-card .card-body {
        padding: 20px;
    }

    .wallet-slider {
        overflow: hidden;
        position: relative;
    }

    .wallet-slider .swiper-slide {
        width: fit-content;
    }

    .wallet-slider-card {
        width: 175px;
        padding: 10px;
        background: #eff6ff;
        border-radius: 10px;
        font-size: 14px;
        text-align: center;
        min-height: 109px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .wallet-slider .swiper-prev,
    .wallet-slider .swiper-next {
        position: absolute;
        height: 100%;
        width: 48px;
        position: absolute;
        top: 0;
        z-index: 9;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all ease 0.3s;
    }

    .wallet-slider .swiper-prev.swiper-button-disabled,
    .wallet-slider .swiper-next.swiper-button-disabled {
        visibility: hidden;
        opacity: 0;
    }

    .wallet-slider .swiper-prev {
        inset-inline-start: 0;
        background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 50%);
    }

    .wallet-slider .swiper-next {
        inset-inline-end: 0;
    }

    [dir="rtl"] .wallet-slider .swiper-next,
    [dir="rtl"] .wallet-slider .swiper-prev {
        transform: rotate(180deg);
    }

    .wallet-slider .swiper-prev .material-symbols-outlined,
    .wallet-slider .swiper-next .material-symbols-outlined {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 14px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .total--subscriptions {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -85%);
        text-align: center;
        font-size: 14px;
        z-index: 3;
    }

    .select2-container[dir="rtl"]
    .select2-selection--single
    .select2-selection__rendered {
        padding-left: 40px;
    }

    .aspect-square {
        aspect-ratio: 1;
    }

    .h-36px {
        height: 36px;
    }

    .rounded-full {
        border-radius: 999px;
    }

    .how-it-works-dialog {
        max-width: 650px;
    }

    .invert-1 {
        filter: invert(1);
        -webkit-filter: invert(1);
    }

    .cron-jobs-slider {
        overflow: hidden;
    }

    .swiper--pagination {
        position: relative !important;
        inset: unset !important;
        width: 0 !important;
        flex-grow: 1;
    }

    .swiper-pagination-bullet-active {
        background: var(--c1);
    }

    .modal-content {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .modal-content::-webkit-scrollbar {
        display: none;
    }

    .w-100px {
        width: 100px;
    }

    .executing-time {
        padding: 10px 15px;
        border-radius: 5px;
        text-align: center;
    }

    .text--grey {
        color: rgba(51, 66, 87, 0.8);
    }

    .instruction-info {
        font-size: 13px;
        line-height: 25px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .list-lower-alpha {
        list-style: lower-alpha;
    }

    .left-auto {
        left: auto;
    }

    .floating-label-info {
        padding-inline-end: 28px !important;
    }

    .floating-label-info .material-symbols-outlined,
    .floating-label-info .material-icons {
        inset-inline-start: auto;
        inset-inline-end: 5px;
        inset-block-start: 50%;
    }

    .form-floating .select2-container--open + .floating-label-info {
        inset-inline-start: 0.5rem;
    }

    .border-and-rounded-start-0 {
        border-radius: 6px;
        z-index: 10;
    }

    [dir="ltr"] .border-and-rounded-start-0 {
        border-left: none;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    [dir="rtl"] .border-and-rounded-start-0 {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .disabled-input .floating-label-info {
        background: transparent;
    }

    .disabled-input .form-control {
        background: #f4f4f4;
        border-color: transparent;
    }

    .copy-button {
        border-radius: 0px 6px 6px 0px;
        background: #efeff0;
        height: 45px;
        width: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        outline: none;
        box-shadow: none;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .copy-button .material-symbols-outlined {
        position: relative;
        inset: unset;
        transform: scale(1);
        color: rgba(0, 160, 141, 1);
    }

    [dir="rtl"] .copy-button {
        border-radius: 6px 0px 0px 6px;
    }

    .appearance-hidden {
        appearance: none;
        -webkit-appearance: none;
    }

    .appearance-hidden::-webkit-inner-spin-button,
    .appearance-hidden::-webkit-outer-spin-button {
        display: none;
    }

    .bootstrap-tagsinput {
        background-color: var(--white-color) !important;
        border-color: var(--bs-border-color) !important;
    }

    [theme="dark"] .form-control:disabled {
        background: rgba(117, 133, 144, 0.1);
        border-color: rgba(117, 133, 144, 0.1);
    }

    .review-tooltip {
        --bs-tooltip-max-width: 400px;
        --bs-tooltip-arrow-width: 1.4rem;
        --bs-tooltip-arrow-height: 0.8rem;
        --bs-tooltip-padding-x: 1.5rem;
        --bs-tooltip-padding-y: 1.2rem;
        --bs-tooltip-border-radius: 0.6rem;
        --bs-tooltip-opacity: 1;
    }

    .review-tooltip.custom {
        --bs-tooltip-max-width: 17.1875rem;
    }

    .review-tooltip .tooltip-inner {
        text-align: start;
    }

    .review-tooltip .tooltip-arrow {
        transform: translateX(-35px) !important;
        left: unset !important;
        right: 0;
        /* transform: translateX(35px) !important; */
    }

    .action-btn.btn--light-primary:hover {
        color: var(--white);
    }

    .action-btn .material-symbols-outlined,
    .action-btn .material-icons {
        font-size: 1rem;
    }
    .material-symbols-outlined.check {
        font-size: 1.5rem;
    }

    .repeat-icon {
        block-size: 0.875rem;
        inline-size: 0.875rem;
    }
    h3 .repeat-icon {
        block-size: var(--h3_fz);
        inline-size: var(--h3_fz);
        line-height: 1.2;
    }
    .select-with-text {
        position: relative;
    }
    .select-with-text label {
        position: absolute;
        inset-inline-start: 1rem;
        inset-block-start: 0;
        z-index: 1;
        line-height: 2.8125rem;
        color: var(--dark-color);
    }

    .select-with-text
    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
        padding-inline-start: 7.8125rem;
    }

    .border-dashed {
        border: 1px dashed rgba(222, 222, 222, 1) !important;
    }
    .color-93A2AE {
        color: #93a2ae;
    }
    .card-border {
        border: 1px solid rgba(153, 167, 186, 0.15);
    }

    .dropdown-menu.border-none li a {
        border-radius: 0.625rem;
    }
    .dropdown-menu.border-none li:hover a {
        color: var(--c1);
        background: #f6f7fc;
    }

    .js-select.without-search .select2-search {
        display: none !important;
    }

    .cancelModal .modal-dialog {
        --bs-modal-width: 590px;
    }

    [theme="dark"] .cancelModal .btn--light {
        background-color: var(--bg-color);
    }
    .cancelModal .btn--light {
        background-color: #eeeeee;
    }
    .cancelModal .btn--light:hover {
        background-color: var(--c1);
    }

    ::-webkit-inner-spin-button {
        display: none;
    }

    [theme="light"] .border-start {
        --bs-border-color: rgba(0, 0, 0, 0.2);
    }
    .ps-30 {
        padding-inline-start: 30px;
    }

    .border--start {
        position: relative;
    }

    .border--start::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 50%;
        transform: translateY(-50%);
        height: 70%;
        width: 1px;
        background-color: rgba(0, 0, 0, 0.2);
    }
    .ms-3 {
        margin-inline-start: 1rem !important;
    }
    .table {
        --bs-table-hover-bg: rgba(0, 0, 0, 0.02);
    }

    .pac-container {
        z-index: 1056 !important;
    }

    .tr-hover tr:hover td {
        --bs-bg-opacity: 0.7;
        background-color: rgba(
            var(--bs-light-rgb),
            var(--bs-bg-opacity)
        ) !important;
    }

    [theme="dark"] .tr-hover tr:hover td {
        --bs-bg-opacity: 0.02;
    }
    .margin-left-20 {
        margin-left: 20px;
    }

    .max-w120 {
        max-width: 7.5rem !important;
    }

    .max-w150 {
        max-width: 9.375rem !important;
    }

    .overflow-y-auto {
        overflow-y: auto !important;
    }

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

    .max-w-260px {
        max-width: 260px;
    }

    .form-floating.for-select
    .select2-container
    .select2-selection--single
    .select2-selection__rendered {
        padding-inline: 12px !important;
    }

    /* Multiple select with + value */
    .multiple-select2 + .select2-container--default .select2-selection--multiple {
        height: 45px;
        display: flex;
        overflow: hidden;
    }
    .multiple-select2
    + .select2-container--default
    .select2-selection--multiple
    .close-icon {
        cursor: pointer;
        color: var(--text-color);
        font-size: 12px;
        line-height: 1;
    }
    .multiple-select2
    + .select2-container--default
    .select2-selection--multiple
    .close-icon
    i {
        font-size: 12px;
    }
    .multiple-select2
    + .select2-container--default
    .select2-selection--multiple
    .select2-selection__rendered
    li {
        list-style: none;
    }
    .multiple-select2
    + .select2-container--default
    .select2-selection--multiple
    ul.select2-selection__rendered
    .select2-search {
        display: none;
    }
    .multiple-select2
    + .select2-container--default
    .select2-selection--multiple
    ul.select2-selection__rendered {
        display: flex;
        align-items: baseline;
        padding: 0;
        margin: 0;
        gap: 5px;
        margin-inline-start: 12px;
        white-space: nowrap;
    }
    .multiple-select2
    + .select2-container--default
    .select2-selection--multiple
    .name {
        border-radius: 5px;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--title-color);
        background-color: #f3f4f5 !important;
        border: none;
        padding: 3px 10px;
        margin-top: 10px;
    }
    [theme="dark"]
    .multiple-select2
    + .select2-container--default
    .select2-selection--multiple
    .name {
        background-color: #838383 !important;
    }
    .select2-container .more {
        color: var(--title-color);
        font-weight: 600;
        font-size: 14px;
    }

    .multiple-select2 select2-container--default .select2-results__option {
        padding: 0.5rem 3rem 0.5rem 0.5rem;
    }

    .multiple-select2
    + .select2-container
    .select2-search--inline
    .select2-search__field {
        margin-left: 0 !important;
    }

    .select2-container--default .select2-results__option[aria-selected="true"] {
        color: var(--text-color);
        background-color: rgba(189, 197, 209, 0.3);
    }

    .select2-container--default .select2-results__option:first-child,
    .select2-container--default .select2-results__option:first-child:hover {
        border-top-left-radius: 0.3125rem;
        border-top-right-radius: 0.3125rem;
    }

    .select2-container--default .select2-results__option:last-child,
    .select2-container--default .select2-results__option:last-child:hover {
        border-bottom-right-radius: 0.3125rem;
        border-bottom-left-radius: 0.3125rem;
    }

    .select2-container--default .select2-results__option {
        position: relative;
    }

    .select2-container--default
    .select2-results__option[aria-selected="true"]::after {
        position: absolute;
        top: 50%;
        inset-inline-end: 0.5rem;
        width: 1rem;
        height: 1rem;
        background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 110 110' fill='%2300868F' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M98.1,16.2c-2.5-2.3-6.4-2.2-8.7,0.2L36.7,70.1l-13-15.5c-2.9-3.5-7.9-4.1-11.1-1.4c-2.9,2.4-3.5,6.6-1.4,10.1l16.5,28c3.2,5.4,10.8,5.8,14.5,0.8l56.5-67.3C100.7,22.1,100.4,18.5,98.1,16.2z'/%3E%3C/svg%3E%0A")
        no-repeat right center/1rem 1rem;
        content: "";
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .select2-container--default
    .select2-results__option--highlighted[aria-selected]:not(
            [aria-selected="true"]
        ) {
        color: var(--text-color);
        background-color: rgba(189, 197, 209, 0.3);
    }

    .form-floating.phone-code-label label {
        inset-block-start: -1rem;
    }
    .form-floating.phone-code-label
    .iti--show-selected-dial-code
    .iti__selected-flag {
        background-color: transparent !important;
    }

    .border-758590 {
        border-color: #758590 !important;
    }

    .text-136DC7 {
        --c1: #136dc7;
        color: var(--c1);
    }

    @media (min-width: 575px) {
        .upload-file__img_banner .upload-textbox {
            min-inline-size: 20.9375rem;
        }
    }

    .ratio-2-1 {
        aspect-ratio: 2/1 !important;
    }

    .upload-file__img_banner.ratio-2-1 img {
        aspect-ratio: 2/1 !important;
    }

    .h-180px {
        block-size: 180px !important;
    }

    .remove-file-button.custom {
        inset-block-start: -12px;
        inset-inline-end: -12px;
        color: var(--bs-white);
        background-color: var(--bs-danger);
        border-radius: 50%;
        width: 20px;
        height: 20px;
    }

    .btn-outline--primary .c1 {
        transition: color 0.3s ease;
    }

    .btn-outline--primary:hover .c1,
    .btn-outline--primary:focus .c1 {
        color: var(--absolute-white) !important;
    }