:root {
    --font-family: "Space Grotesk", Tajawal, sans-serif;
    --color-text-primary: #000;
    --color-text-secondary: #666666;
    --color-border: #e6e6e6;
    --color-bg-light: #fafafa;
    --color-bg-white: #ffffff;
    --color-primary: #8BC4FF;
    --color-badge-bg: #e1ecfb;
    --color-badge-text: #005cc8;
    --color-text: #333;
    --color-text-dark: #050505;
    --color-accent: #005cc8;
    --color-muted: #666;
    --color-light: #999;
    --color-bg: #f0f0f0;
    --color-row-alt: #f5f5f5;
    --color-button-bg: #8bc4ff;
    --color-border-light: #f0f0f0;
    --color-error: #ff4d4f;
    --color-success: #52c41a;
}
.w-30 {
    width: 30% !important;
}
button {
    cursor:pointer;
}
.min-height-200 {
    min-height:200px;
} 
.min-height-300 {
    min-height:300px;
} 
.margin-top-12-percent {
    margin-top:12%;
}

.profile-modal {
    position: absolute;
    bottom: 8.5vh;
    left: 0.938rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 250px; /* Adjusted to make modal wider */
    padding: 8px 0px; /* Adjusted to make modal taller */
}

.dashboard-container {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
    font-family: 'Segoe UI', sans-serif;
}

input {
    line-height: 20px !important;
}

.form-input {
    width: 100%;
    padding: 12px;
    padding-left: 12px !important;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    background-color: #fff;
}

    .form-input:focus {
        border-color: #E6E6E6;
        outline: none;
        box-shadow: none;
    }

    .form-input::placeholder {
        color: #999;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .form-input:disabled {
        background-color: #E6E6E6;
    }


select {
    line-height: 20px !important;
}

#profileModal {
    z-index: 10000;
}

.profile-modal.active {
    display: block;
}

.profile-modal-item {
    padding: 8px 14px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .profile-modal-item:hover {
        background-color: #f5f5f5;
    }

.thin-line {
    border: none;
    border-top: 1px solid #ccc;
    margin: 4px 0;
}

.profile-modal-item img {
    margin-right: 8px;
    height: 16px;
    width: 34px;
}

.profile-modal-item.sign-out {
    color: #333;
}

.user-profile {
    cursor: pointer;
    display: flex;
    align-items: center;
    /*padding: 8px;*/
    position: relative;
}

    .user-profile img {
        margin-right: 8px;
    }
/* Select2 multi-checkbox styles */
/* Blue background + checkmark when selected */
.select2-results__option .select2-checkbox .fake-checkbox{
  width:20px;height:20px;border:1px solid #dcdcdc;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#fff;vertical-align:middle;
}
.select2-results__option[aria-selected=true] .select2-checkbox .fake-checkbox,
.select2-results__option--selected .select2-checkbox .fake-checkbox,
.select2-results__option .select2-checkbox .fake-checkbox.is-checked{
  background:#2563eb !important;border-color:#2563eb !important;color:#fff;
}
.select2-results__option[aria-selected=true] .select2-checkbox .fake-checkbox::after,
.select2-results__option--selected .select2-checkbox .fake-checkbox::after,
.select2-results__option .select2-checkbox .fake-checkbox.is-checked::after{
  content:'\2713';font-size:14px;line-height:1;
}


/* General Styles */
body {
    background-color: #f8f9fa;
    font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}



/* Top Search Bar */
.header-class {
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap:8px;
}

.hamburger-btn {
    border-radius: 10px;
    background: #F5F5F5;
    cursor: pointer;
    display: flex;
    padding: 12px;
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 44px;
}



.search-box {
    background-color: #F5F5F5;
    padding: 12px;
    max-width: 527px;
    width: 100%;
    border-radius: 8px;
}

.fillMinWidth {
    min-width: -webkit-fill-available !important;
}

.fillMaxWidth {
    max-width: -webkit-fill-available !important;
}


.top-search-input {
    width: 100%;
    padding-left: 25px;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

    .top-search-input:focus {
        border-color: transparent;
        box-shadow: none;
        outline: none;
    }

.top-right-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-select {
    width: 100%;
    max-width: max-content;
    color: #050505;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: '';
}

    select::-ms-expand {
        display: none;
    }

    select:focus {
        border-color: transparent;
        box-shadow: none;
        outline: none;
    }

.form-select:focus {
    border-color: #E6E6E6;
    box-shadow: none;
    outline: none;
}

/* body section */

.body-class {
    border-radius: 24px 0px 0px 0px;
    border-top: 1px solid #E6E6E6;
    border-left: 1px solid #E6E6E6;
    background: #F0F0F0;
    padding: 24px;
    height: calc(116vh - 81px);
    overflow-y: auto;
}

.partner-heading {
    color: #050505;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.text-class {
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 24px;
}

/* table container */
.table-container {
    background-color: #fff;
    background: #fff;
    max-width: 5600px;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}


/* Sidebar Styles */
/*.sidebar {
    background-color: #fff;
    height: 100vh;
    width: 80px;
    position: fixed;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
    overflow-x: hidden;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}*/

 /*   .sidebar.expanded {
        width: 288px;
        align-items: flex-start;
        border-right: 1px solid #E6E6E6;
    }
*/

.sidebar-items {
    padding-top: 20px;
}

.sidebar-item {
    padding: 12px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-top: 8px;
}

.menu-text {
    margin-left: 15px;
    display: none;
    transition: opacity 0.3s ease;
    color: #666;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.sidebar.expanded .menu-text {
    display: flex;
}

.sidebar-item.active {
    border-radius: 8px;
    background-color: #000;
    color: #fff;
}

    .sidebar-item.active .menu-text {
        color: #fff;
    }

.sidebar-footer {
    border-top: 1px solid #F0F0F0;
    padding: 16px;
    width: 100%;
}

.img-div-footer {
    padding: 16px 30px;
    display: none;
    position: relative;
    height: 370px;
    width: 100%;
    margin-bottom: 16px;
}

    .img-div-footer::before {
        background-image: url(/assets/icons/sidebar-footer.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        content: "";
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        bottom: 0;
        z-index: -1;
        border-radius: 16px !important;
    }

.footer-title {
    color: #050505;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: auto;
    width: 222px;
    font-weight: 700;
    line-height: 28px;
}

.footer-para {
    color: #050505;
    overflow: hidden;
    text-wrap: auto;
    width: 222px;
   
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 4px;
}
.img-div-content-footer {
    width: -webkit-fill-available;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: -moz-available;
}
.footer-btn {
    border-radius: 8px;
    background: #000;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    padding: 10px 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border: none;
    box-shadow: none;
    justify-self:center;
}


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

.user-info {
    display: none;
}

.sidebar.expanded .user-info {
    display: block;
}


.profile-arrows {
    display:none;
}
.sidebar.expanded .profile-arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -4px;
}
.user-name {
    color: #050505;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.user-email {
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.avatar {
    border-radius: 4px;
    object-fit: cover;
}

/* submenu sidebar */
/*.sidebar-submenu {
    position: fixed;
    top: 0;
    left: 80px;
    width: 288px;
    height: 100vh;
    background: #fff;
    z-index: 1200;
    transition: all 0.3s;
    display: none;
    padding: 16px;
    border-left: 1px solid #E6E6E6;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    gap: 30px;
}*/

    .sidebar-submenu.open {
        display: flex;
    }

.submenu-back-btn {
    background: none;
    border: none;
    font-size: 20px;
    font-weight: 500;
    box-shadow: none;
    color: #050505;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.submenu-img-footer::before {
    left: 0px;
    right: 0px;
}

/*.main-content.submenu-open {
    margin-left: 369px !important;
    transition: margin-left 0.3s;
}*/

#sidebarSubmenu .sidebar-item.active {
    background: #000;
    color: #fff;
}

    #sidebarSubmenu .sidebar-item.active .menu-text {
        color: #fff;
    }

    #sidebarSubmenu .sidebar-item.active img {
        filter: brightness(0) invert(1);
    }


/* Main Content Styles */
.main-content {
    margin-left: 80px;
    transition: margin-left 0.3s ease;
}

    .main-content.shifted {
        margin-left: 288px;
    }

/* Search Container Styles */
.search-container {
    position: relative;
    max-width: 300px;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
    background: #FFF;
}
.search-container-max {
    position: relative;
    
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
    background: #FFF;
}
.search-icon {
    
    left: 12px;
    top: 50%;
    
    color: #6c757d;
}

.search-input {
    width: 100%;
    padding: 0px 0px 0px 35px;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
    box-shadow: none;
    background-color: transparent;
}

    .search-input:focus {
        border-color: transparent;
        box-shadow: none;
        outline: none;
    }


/* Table Header Section */
.table-header {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.header-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-label {
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
}

.header-value {
    color: #212529;
    font-size: 16px;
    font-weight: 600;
}

/* Table Styles */

.table-fixed-height-10 {  min-height: 590px;  overflow: auto; width: 100%; }
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* margin-bottom: 1rem; */
}

.table {
    background-color: #fff;
    border-radius: 0px;
    box-shadow: none;
    margin-bottom: 0px;
    min-width: 1000px;
    /* Ensures table maintains minimum width */
    width: 100%;
}

    .table thead {
        border-bottom: 1px solid #F0F0F0;
        padding: 16px;
    }

    .table th {
        background-color: #FAFAFA;
        color: #333;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        border-left: 1px solid #F0F0F0;
        padding: 16px;
        white-space: nowrap;
        vertical-align: -webkit-baseline-middle;
        /* Prevents header text wrapping */
    }

.table tbody td {
        border-top: 1px solid #F0F0F0;
        padding: 26px 16px;
        vertical-align: middle;
        color: #050505;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        white-space: nowrap;
        /* Prevents text wrapping in cells */
    }

.btn-red {
    color: #F13944;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0px;
}

.btn-edit {
    background-color: transparent;
    border: none;
    box-shadow: none;
    color: #005CC8;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 0px;
    margin-left: 16px;
}


/* Status Badge Styles */
.status-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
}

.status-expired {
    color: #974600;
    background: #FEEEE3;
}

.status-active {
    color: #005CC8;
    background: #E1ECFB;
}

.status-pending {
    color: #333;
    background: #F0F0F0;
}

.status-cancelled {
    color: #B2242E;
    background: #FFECEA;
}

/* Button Styles */
.btn-primary {
    padding: 8px 16px;
    border-radius: 6px;
}

/* Pagination Styles */
.pagination {
    display: flex;
    gap: 8px;
    margin: 0;
}

.pagination-btn {
    border-radius: 8px;
    border: 1px solid #DBDBDB;
    background: #FFF;
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    color: #050505;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.pagination-results {
    color: #999;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.page-number {
    background-color: white;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    border-radius: 8px;
}

[dir="rtl"] .menu-text {
    margin-left: 0;
    margin-right: 15px;
}
[dir="rtl"] .search-input {
    padding: 0px 35px 0px 0px;
}
    .page-number:hover {
        background: #F5F5F5;
        color: #666;
    }

    .page-number.active {
        background: #000;
        color: #FFF;
    }

.page-dots {
    color: #666;
    display: flex;
    align-items: center;
    font-size: 14px;
}


/* Responsive Adjustments */
@media (max-width: 1024px) {
 /*   .sidebar {
        width: 60px;
        position: fixed;
        left: -250px;
        z-index: 20;
        transition: left 0.3s ease;
    }*/
/*
        .sidebar.expanded {
            width: 288px;
            left: 0;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }*/

    .main-content.submenu-open {
        margin-left: 0px !important;
    }
/*
    .sidebar-submenu {
        left: 0px;
    }
*/
    .main-content {
        margin-left: 0px;
        width: 100%;
    }

        .main-content.shifted {
            margin-left: 0px;
        }

    .header-class {
        flex-direction: row;
        align-items: flex-start;
        gap:8px;
        width: 100%;
    }



    .responsive-class {
        justify-content: flex-end;

    }

    .search-container {
        width: 100%;
    }

    .d-flex {
        flex-wrap: wrap;
        gap: 15px;
        flex-direction: row;
    }

    .body-class {
        height: calc(116vh - 84px);
        
    }
}

@media (max-width: 650px) {

    .body-class {
        padding: 12px;
    }
}


/* Placeholder styling for all inputs */
input::placeholder {
    color: #999;
    font-family: "Space Grotesk";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* For Firefox */
input::-moz-placeholder {
    color: #999;
    font-family: "Space Grotesk";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* For Edge */
input::-ms-input-placeholder {
    color: #999;
    font-family: "Space Grotesk";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* For Chrome, Safari, and Opera */
input::-webkit-input-placeholder {
    color: #999;
    font-family: "Space Grotesk";
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* Plan Badge Styles */
.plan-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid #DBDBDB;
    gap: 4px;
    width: max-content;
}

.plan-standard {
    color: #050505;
}

.plan-standard-active {
    color: #007223;
}

.plan-premium {
    color: #974600;
}


::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f9f9f9;
}

::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #888;
    }

.header-logo {
    display: block;
    object-fit: contain;
    max-width: 100%;
    height: auto;
}

.logo-container {
    position: relative;
   
}

.small-logo {
    display: block;
}

.full-logo {
    display: none;
}

.sidebar.expanded .small-logo {
    display: none;
}

.sidebar.expanded .full-logo {
    display: block;
}

.sidebar.expanded .img-div-footer {
    display: flex;
    justify-content: flex-end;
    align-items: end;
}

.table-responsive::-webkit-scrollbar {
    height: 3px;
    width: 3px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f9f9f9;
    border-radius: 3px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #888;
    }

.select2-selection select2-selection--single {
    border-radius: var(--xs, 8px) !important;
    border: var(--border-1-rem-16-px, 1px) solid var(--color-bd-neutral-secondary-default, #E6E6E6) !important;
    background: var(--color-bg-neutral-primary-default, #FFF) !important;
}

.selected-keyword-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: nowrap;
}

.left-section {
    max-width: 250px;
    width: 100%;
}

.middle-section {
    min-width: 135px;
    margin-left: 16px;
    flex-shrink: 0;
}

.recommended-bid {
    margin-top: 26px;
}

.remove-section {
    margin-right: 16px;
    flex-shrink: 0;
}

.bid-input-container {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 134px;
    width: 100%;
    margin-top: 8px;
}

.currency-dropdown {
    padding: 12px 0;
    border-right: 1px solid #E6E6E6;
    min-width: 90px;
}

.select-arrow {
    position: absolute;
    right: 43px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.bid-input {
    padding: 12px 0;
    border: none;
    width: 100%;
    text-align: right;
    padding-left: 8px;
    border-left: 1px solid #E6E6E6;
}

.keyword {
    font-weight: 500;
    color: #050505;
}

.bg-key {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #017EC4;
}

.gray {
    color: #999999;
    font-size: 13px;
}

.bold-price {
    color: #050505;
    font-weight: 600;
}

.red {
    color: #B2242E;
}

.remove-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 4px;
}

.small-btn-primary {
    text-align: center;
    color: white;
    border: none;
    background-color: #0b5ed7 !important;
    border-radius: 6px !important;
    height: 30px;
    width: 100px;
    justify-content: center
}

.font-italic {
    font-style: italic;
}

.text-danger {
    float: inline-end;
    font-size: 12px;
}

.phone-input-container {
    display: flex;
    align-items: center;
    border: 1px solid #E6E6E6;
    overflow: visible !important;
    width: 100%;
    overflow: visible;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    background-color: #fff;
    gap: 0px;
}

.phone-input {
    border: none;
    width: 100%;
    font-size: 14px;
    color: rgb(102, 102, 102);
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: none;
    padding: 12px;
    border-radius: 10px;
}

    .phone-input::placeholder {
        color: #999;
    }

.select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;
    overflow: visible;
    z-index: 10;
    border-radius: 10px;
}

.dropdown-container {
    position: relative;
    width: 100%;
    cursor: pointer !important;
    transition: border-color 0.3s ease !important;
}

    .dropdown-container:hover {
        border-color: #999 !important;
    }

.select-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.select2-container--open .select2-dropdown--below {
    border: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.search-bar select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

    .search-bar select:focus {
        border-color: #1DA1F2;
    }

.select-with-icon {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background-color: #fff;
    padding: 10px 40px; /* includes space for padding and icon */
}

    .select-with-icon select {
        appearance: none;
        border: none;
        outline: none;
        background: transparent;
        font-size: 14px;
        padding: 0; /* avoid double padding with container */
        padding-right: 20px; /* internal space for text, icon already padded on container */
        cursor: pointer;
        width: 100%; /* optional, to expand full width */
    }

    .select-with-icon svg {
        position: absolute;
        right: 10px;
        pointer-events: none;
    }

/* If you're using an input inside this component */
/*.input-with-icon {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    background-color: #fff !important;
    flex: 1 !important;
    height: 44px !important;
    position: relative;
    flex-grow: 1;
    width: 100%;
    margin-left: 14px;
}*/

.input-with-icon {
    position: relative;
    flex-grow: 1;
    width: 100%;
    margin: 0 14px 0 0;
}


    .input-with-icon svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none; /* Makes the icon non-interactive */
        z-index: 2; /* Ensures icon stays above input */
    }

    .input-with-icon input {
        width: 100%;
        padding: 8px 12px 8px 36px; /* Extra left padding for icon */
        border: 1px solid #ddd;
        border-radius: 8px !important; /* Consistent rounded corners */
        font-size: 14px;
        outline: none;
        background: transparent;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
        height: 44px;
    }

    /*.input-with-icon input:focus {
            border-color: #1DA1F2;*/ /* Blue border on focus */
    /*box-shadow: 0 0 0 2px rgba(29, 161, 242, 0.2);*/ /* Optional focus glow */
    /*}*/

    /* For cases where you want no border */
    .input-with-icon.input-no-border input {
        border: none;
    }
/* keeps arrow overlay like your old button */
.select-cs + .select2-container .select2-selection {
    padding-right: 28px; /* space for arrow */
}

.select-cs + .select2-container .select2-selection__arrow {
    display: none; /* hide default arrow */
}

.select2-container--open .select2-dropdown {
    z-index: 1050; /* Ensure it appears above other elements */
}

.select2-container {
    width: 100% !important;
}
/* your custom arrow (SVG) positioned via wrapper if needed */
.select2.select2-container {
    width: 100% !important;
}
/* Dropdown container remove bg */
.select2-container .select2-dropdown {
    background: transparent;
    border: none;
    margin-top: -5px;
}

    /* Search bar hide */
    .select2-container .select2-dropdown .select2-search input {
        /*display: none;*/
    }


    /* Results padding reset */
    .select2-container .select2-dropdown .select2-results {
        padding: 0;
        margin-top:5px;
    }

/* Single selection box */
.select2-container--default .select2-selection--single {
    display: flex;
    height: 44px !important;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
    background: #fff;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.3s ease !important;
}

    .select2-container--default .select2-selection--single:hover {
        border-color: #999 !important;
    }
    /* Selected text inside box */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--color-text-neutral-primary, #050505);
        text-align: center;
        /* Label/small-12/Medium */
        font-family: var(--type-family-label, "Space Grotesk");
        font-size: var(--type-size-label-small, 14px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--type-line-height-label-small, 16px); /* 133.333% */
        letter-spacing: var(--type-letter-spacing-label-small, 0);
    }

/* Dropdown items container */
.select2-container .select2-dropdown .select2-results ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px;
    gap: 4px;
    border-radius: 12px;
    background: #fff;
}

    /* Dropdown options hover */
    .select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
        display: flex;
        padding: 4px 8px;
        align-items: center;
        gap: 12px;
        color: black;
        align-self: stretch;
        border-radius: 4px;
        background: var(--color-bg-brand-clear-default, #E1ECFB);
    }

.select2-results__option--selectable {
    align-self: stretch !important;
}
/* Selected option style */
.select2-container--default .select2-results__option--selected {
    background: #E1ECFB;
    color: black;
    border-radius: 4px;
}

/* Arrow icon */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 9px;
    right: 10px;
    width: 20px;
}


.dropdown-item-custom {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 8px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

/* Dropdown Menu Container */
.dropdown-menu-custom {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 210px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 8px;
    top: 100%;
    left: 20px;
    margin-top: 14px;
    padding: 10px 0;
}

    .dropdown-menu-custom.show {
        display: block;
    }

/* Dropdown Item */
.dropdown-item-custom {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    gap: 8px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
}

    .dropdown-item-custom:hover {
        background-color: #f1f1f1;
    }

    /* Icon inside item */
    .dropdown-item-custom svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    /* Label styles */
    .dropdown-item-custom .label-text {
        font-weight: 500;
        color: #333;
    }

    .dropdown-item-custom .label-write {
        font-weight: 500;
        color: #939191;
    }

    /* Custom checkbox logic */
    .dropdown-item-custom .checkbox-custom {
        display: none;
    }

    .dropdown-item-custom .checkmark-custom {
        width: 20px;
        height: 20px;
        border: 2px solid #ccc;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .dropdown-item-custom input:checked + .checkmark-custom {
        background-color: #007bff;
        border-color: #007bff;
    }

        .dropdown-item-custom input:checked + .checkmark-custom::after {
            content: '';
            width: 8px;
            height: 14px;
            border: solid white;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

/* Special Styling for Specific Items */
.dropdown-menu-custom .dropdown-item-custom:nth-of-type(2),
.dropdown-menu-custom .dropdown-item-custom:nth-of-type(6),
.dropdown-menu-custom .dropdown-item-custom:nth-of-type(9) {
    border: 2px solid black;
    padding: 6px 14px;
    line-height: 1;
}

.dropdown-menu-custom .dropdown-item-custom:nth-of-type(3),
.dropdown-menu-custom .dropdown-item-custom:nth-of-type(7),
.dropdown-menu-custom .dropdown-item-custom:nth-of-type(10) {
    background-color: #e0f7ff;
    padding: 2px 14px;
    line-height: 1;
}

.dropdown-menu-custom .dropdown-item-custom:nth-of-type(4),
.dropdown-menu-custom .dropdown-item-custom:nth-of-type(8),
.dropdown-menu-custom .dropdown-item-custom:nth-of-type(11) {
    background-color: #f0faff;
    padding: 2px 14px;
    line-height: 1;
}

.dropdown-menu-custom .dropdown-item-custom:nth-of-type(5) {
    background-color: #f5f5f5;
    padding: 2px 14px;
    line-height: 1;
}

.status-dropdown-wrapper {
    border-radius: 8px;
    background: var(--color-bg-brand-clear-default, #E1ECFB);
    display: flex;
    width: 386px;
    padding: 8px 12px;
    align-items: center;
    gap: 12px;
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    line-height: 20px;
    text-align: center;
    pointer-events: none;
    color: #aaa;
    margin: 9px 0px;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

    .toggle-icon.rotated {
        transform: rotate(180deg);
    }

.active-tab {
    border-bottom: 2px solid #000;
    color: #000;
}

.active-tab {
    border-bottom: 2px solid #000;
    color: #000;
}


.body-class {
    position: sticky;
}

.currencySelectorContainer {
    /*padding: 12px 28px 12px 44px;*/
    border: none;
    background: transparent;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 175px;
}

/* .country-select:focus {
        outline: none;
    }

}

.keyword-info-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: nowrap;
    min-width: 0;
}

.keyword-info-block {
    min-width: 135px;
    margin-left: 16px;
    flex-shrink: 0;
}

.recommended-bid {
    min-width: 135px;
    margin-top: 26px;
}

.keyword-title {
    margin-bottom: 0px;
    color: var(--color-text-neutral-primary, #050505);
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-medium, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-line-height-label-medium, 20px);
    letter-spacing: var(--type-letter-spacing-label-medium, 0px);
}

    .keyword-title.light {
        color: #666;
    }

.keyword-subtext {
    overflow: hidden;
    color: var(--color-text-neutral-tertiary, #999999);
    text-overflow: ellipsis;
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-medium, 13px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-line-height-label-medium, 20px);
    letter-spacing: var(--type-letter-spacing-label-medium, 0px);
}

.bid-amount {
    font-family: var(--type-family-label, "Space Grotesk") --type-family-label is not defined;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-line-height-label-medium, 20px);
    letter-spacing: var(--type-letter-spacing-label-medium, 0px);
    color: #050505;
}

.remove-action {
    margin-right: 16px;
    flex-shrink: 0;
}

.remove-text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
    cursor: pointer;
    color: #B2242E;
    font-weight: 500;
    text-align: center;
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-small, 12px);
    font-style: normal;
    line-height: var(--type-line-height-label-small, 16px);
    letter-spacing: var(--type-letter-spacing-label-small, 0px);
}

.remove-icon {
    margin-left: 4px;
}
/* Wrapper for the keyword block */
.keyword-block {
    padding: 0.5rem 1rem;
}

/* Top row containing keyword text and label */
.keyword-header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Keyword name */
.keyword-text {
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

/* Label next to keyword */
.bg-keyword-label {
    background-color: #f0f4f8;
    color: #017EC4;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

/* The blue circle icon */
.keyword-dot {
    margin-right: 2px;
}

/* Match text */
.match-type {
    color: #888;
    font-size: 12px;
    margin: 4px 0;
}

.slider-block {
    max-width: 200px;
    width: 200px;
}

.slider-bid-input-group {
    max-width: 165px;
    width: 100%;
    margin-bottom: 0;
}

.currency-selector-container {
    padding: 12px 0;
    border-right: 1px solid #E6E6E6;
    min-width: 90px;
}

.arrow-over-currency {
    right: 43px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.bid-input {
    padding: 12px 0 !important;
}

.select-wrapper-bordered {
    border: none;
    border-left: 1px solid #E6E6E6;
    border-radius: 0px;
}

.info-spacer {
    min-width: 135px;
}

.keyword-info-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: nowrap;
    min-width: 0;
}

.keyword-stats {
    min-width: 135px;
    margin-left: 16px;
    flex-shrink: 0;
}

.recommended-bid {
    min-width: 135px;
    margin-top: 26px;
}

.remove-action {
    margin-right: 16px;
    flex-shrink: 0;
}

.no-margin {
    margin: 0;
}

.pointer {
    cursor: pointer;
}

.muted-text {
    color: #666;
}

.dark-text {
    color: #050505;
}

.ml-1 {
    margin-left: 4px;
}

.currencySelectorContainer .select2-selection.select2-selection--single {
    border: none;
    border-left: 1px solid #E6E6E6;
    border-radius: 0 10px 10px 0;
    background: #fff;
    box-sizing: border-box;
}

.currencySelectorContainerRight .select2-selection.select2-selection--single {
    border: none;
    border-right: 1px solid #E6E6E6; /* Changed to right border */
    border-radius: 10px 0 0 10px; /* Flipped the radius values */
    background: #fff;
    box-sizing: border-box;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    padding-right: 10px; /* Padding on opposite side */
}

.currencySelectorContainerRight {
    width: 125%;
}

.m-t-15 {
    margin-top: 15px;
}
/*.filter-select {
    position: relative;
    padding: 12px 24px;
    width: 200px;
    color: #050505;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 10px;
    border: 1px solid #E6E6E6;
    background: #FFF;
    cursor: pointer;
    font-family: Arial, sans-serif;
}*/
/* Campaign specific styles */
.campaign-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.stat-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-title {
    font-size: 14px;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-value {
    margin-top: 8px;
    margin-bottom: 16px;
    color: #050505;
    text-align: right;
    font-feature-settings: 'liga' off;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-change {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #666;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

.icon-bg {
    height: 48px;
    width: 48px;
    background-color: #8BC4FF;
    border-radius: 16px;
}


/* Campaign table specific styles */
.table-heading {
    color: #050505;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.campaign-table th {
    font-weight: 500;
    color: #666;
    padding: 16px;
}

.campaign-table td {
    padding: 16px;
    vertical-align: middle;
}

.campaign-name {
    font-weight: 500;
    color: #1A1A1A;
}

.campaign-budget {
    font-weight: 500;
    color: #1A1A1A;
}

.campaign-metrics {
    color: #666;
}

/* Status badges specific to campaigns */
.status-badge.status-active {
    background: #E8F5E9;
    color: #00C853;
}

.status-badge.status-pending {
    background: #FFF3E0;
    color: #FF9800;
}

.status-badge.status-paused {
    background: #FFEBEE;
    color: #F13944;
}

/* Campaign action buttons */
.campaign-actions {
    display: flex;
    gap: 8px;
}

.btn-edit {
    background: #F5F5F5;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: #1A1A1A;
    font-size: 14px;
    cursor: pointer;
}

.btn-pause {
    background: #FFEBEE;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: #F13944;
    font-size: 14px;
    cursor: pointer;
}

/* Campaign filters */
.campaign-filters {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}




.text-wrapper {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}


.custom-divider {
    border: none;
    margin: 4px 0 2px;
    border-top: 1px solid #ccc;
}

/* Wizard Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-modal-container {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.12);
    padding: 32px 32px 24px 32px;
    min-width: 420px;
    max-width: 540px;
    width: 100%;
    position: relative;
}

.wizard-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    justify-content: space-between;
    border-radius: 16px;
    border: 1px solid #F0F0F0;
    background: #FFF;
    padding: 32px 24px;
}

.wizard-content {
    margin-bottom: 24px;
}

.wizard-nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* step 0 */
.step0 {
    border-radius: 16px;
    border: 1px solid #F0F0F0;
    background: #FFF;
    padding: 24px;
}

.step-title {
    color: #050505;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 12px;
}

.form-label {
    display: block;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 8px;
}


.form-check-input:checked {
    background-color: #8BC4FF;
    border-color: #8BC4FF;
}

    .form-check-input:checked[type=checkbox] {
        --bs-form-check-bg-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e);
    }

.form-check-input[type=radio] {
    border-radius: 6px;
}

.select-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.btn-back, .btn-next {
    padding: 12px 24px;
    color: #050505;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    border-radius: 10px;
    cursor: pointer;
}

.btn-back {
    background: #FFF;
    border: 1px solid #E6E6E6;
}

.btn-next {
    background: #8BC4FF;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.m5 {
    margin: 5px;
}

@media (max-width: 1400px) {

    .campaign-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1150px) {

    .campaign-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .gridClass {
        grid-template-columns: repeat(2,1fr);
    }

    .grid2 {
        grid-template-columns: repeat(1,1fr);
    }

    .responsiveClass {
        border-bottom: 1px solid #E6E6E6 !important;
    }
}

@media (max-width: 550px) {

    .campaign-stats {
        grid-template-columns: repeat(1, 1fr);
    }
}


.wizard-tab {
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    margin-right: 10px;
    transition: background-color 0.3s ease;
}

/* Wizard Stepper Styles */
.wizard-stepper-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
}

.wizard-stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
    z-index: 1;
    cursor: pointer;
    min-width: 80px;
}

    .wizard-stepper-step::before {
        position: absolute;
        content: "";
        border-bottom: 2px solid #E6E6E6;
        width: 100%;
        top: 20px;
        left: -35%;
        z-index: 2;
    }

    .wizard-stepper-step.completed::before,
    .wizard-stepper-step.active::before {
        border-bottom: 2px solid #000;
    }

    .wizard-stepper-step::after {
        position: absolute;
        content: "";
        border-bottom: 2px solid #E6E6E6;
        width: 100%;
        top: 20px;
        left: 50%;
        z-index: 2;
    }

    .wizard-stepper-step.completed::after,
    .wizard-stepper-step.active::after {
        border-bottom: 2px solid #000;
    }

    .wizard-stepper-step:first-child::before {
        content: none;
    }

    .wizard-stepper-step:last-child::after {
        content: none;
    }


.wizard-stepper-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EBEBEB;
    display: flex;
    padding: 12px;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: background 0.3s;
    position: relative;
    z-index: 7;
}

.wizard-stepper-label {
    color: #666;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
}

.wizard-stepper-step.active .wizard-stepper-circle {
    background: #8BC4FF;
}

.wizard-stepper-step.completed .wizard-stepper-circle {
    background: #000;
}

.wizard-stepper-step.active .wizard-stepper-label {
    font-weight: 500;
    color: #050505;
}

.wizard-stepper-step.completed .wizard-stepper-label {
    color: #050505;
    font-weight: 500;
}
/* Custom tabs for wizardStep1 */
.custom-tabs-container {
    margin: 0 0 24px 0;
}

.custom-tabs {
    display: flex;
    border-bottom: 1px solid #eee;
    padding-top: 24px;
}

.custom-tab {
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    color: #888;
    width: 50%;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    text-align: center;
}

    .custom-tab.active {
        color: #222;
        font-weight: 600;
        border-bottom: 2px solid #222;
    }

.custom-tab-content {
    padding: 24px;
}

.hoverMe {
    position: relative;
}

    .hoverMe p {
        background-color: #BDBDBD;
        height: 16px;
        width: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        cursor: pointer;
        color: #fff;
        font-style: italic;
        font-weight: 400;
        font-size: 12px;
        margin-bottom: 0px;
    }

    .hoverMe .tooltiptext {
        display: none;
        width: 328px;
        border: 1px solid #E6E6E6;
        background: #FFF;
        border-radius: 4px;
        position: absolute;
        z-index: 1;
        padding: 12px;
        top: -100px;
        box-shadow: 1px 0px 13px 2px rgb(110 110 110 / 19%);
        left: -154px;
    }

        .hoverMe .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #fff transparent transparent transparent;
        }

    .hoverMe:hover .tooltiptext {
        display: flex;
    }

    .hoverMe:hover p {
        background-color: #333333;
    }

.tab2-btn {
    border-radius: 8px;
    border: 1px solid #E6E6E6;
    background: #FFF;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: none;
    outline: none;
}

.body-copy {
    border-radius: 12px;
    background: #FFF;
    padding: 12px;
}

.copy-p {
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0px;
}

.textDiv {
    padding: 24px;
    border-top: 1px solid #E6E6E6;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.target-heading {
    color: var(--color-text-neutral-secondary, #333);
    max-width: 292px;
    width: 100%;
    /* Label/large-16/Medium */
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-large, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-line-height-label-large, 24px); /* 150% */
    letter-spacing: var(--type-letter-spacing-label-large, 0px);
}

.target-para {
    color: var(--color-text-neutral-tertiary, #666);
    flex: 1;
    /* Paragraph/large-16/Regular */
    font-family: var(--type-family-paragraph, "Space Grotesk");
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 175% */
    letter-spacing: var(--type-letter-spacing-paragraph-medium, 0px);
}

.right-panel {
    padding: 20px 20px;
    border-bottom: 1px solid #F0F0F0;
}

.right-panel-heading {
    color: var(--color-text-neutral-primary, #050505);
    /* Label/medium-14/Regular */
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-medium, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-line-height-label-medium, 20px); /* 142.857% */
    letter-spacing: var(--type-letter-spacing-label-medium, 0px);
}

.right-all {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.inner-content {
    padding: 24px;
    border-bottom: 1px solid #f0f0f0;
}

.more-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 9px;
}

.keyword {
    color: var(--color-text-neutral-primary, #050505);
    /* Label/medium-14/Medium */
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-medium, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-line-height-label-medium, 20px); /* 142.857% */
    letter-spacing: var(--type-letter-spacing-label-medium, 0px);
}

.bg-key {
    border-radius: var(--2xs, 4px);
    background: var(--color-bg-brand-clear-default, #E1ECFB);
    display: flex;
    padding: var(--vertical-0125-rem-2-px, 2px) var(--horizontal-025-rem-4-px, 4px);
    justify-content: center;
    align-items: center;
    gap: var(--gap-025-rem-4-px, 4px);
    color: var(--color-text-info-primary, #005CC8);
    text-align: center;
    /* Label/small-12/Medium */
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-small, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-line-height-label-small, 16px); /* 133.333% */
    letter-spacing: var(--type-letter-spacing-label-small, 0px);
}

.gray {
    overflow: hidden;
    color: var(--color-text-neutral-tertiary, #666);
    text-overflow: ellipsis;
    /* Label/medium-14/Regular */
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-medium, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-line-height-label-medium, 20px); /* 142.857% */
    letter-spacing: var(--type-letter-spacing-label-medium, 0px);
}

.red {
    color: var(--color-text-danger-secondary, #F13944);
    text-align: center;
    cursor: pointer;
    justify-content: flex-end;
    /* Label/small-12/Medium */
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-small, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-line-height-label-small, 16px); /* 133.333% */
    letter-spacing: var(--type-letter-spacing-label-small, 0px);
    display: flex;
    align-items: center;
    gap: 4px;
}

.remove-btn {
    display: flex;
    padding: var(--vertical-05-rem-8-px, 8px) var(--horizontal-1-rem-16-px, 16px);
    justify-content: center;
    align-items: center;
    gap: var(--gap-025-rem-4-px, 4px);
    display: flex;
    border: none;
    box-shadow: none;
    border-radius: var(--xs, 6px);
    background: var(--color-bg-danger-clear-default, #FFECEA);
    outline: none;
    color: var(--color-text-danger-primary, #B2242E);
    text-align: center;
    /* Label/small-12/Medium */
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-small, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-line-height-label-small, 16px); /* 133.333% */
    letter-spacing: var(--type-letter-spacing-label-small, 0px);
}

.remove-add {
    border-radius: var(--xs, 6px);
    background: #F5F5F5;
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: var(--gap-025-rem-4-px, 4px);
    color: var(--color-text-neutral-primary, #050505);
    text-align: center;
    border: none;
    /* Label/small-12/Medium */
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-small, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-line-height-label-small, 16px); /* 133.333% */
    letter-spacing: var(--type-letter-spacing-label-small, 0px);
}

.sort-by {
    display: flex;
    align-items: center;
    color: var(--color-text-neutral-primary, #050505);
    text-align: center;
    /* Label/medium-14/Medium */
    font-family: var(--type-family-label, "Space Grotesk");
    font-size: var(--type-size-label-medium, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--type-line-height-label-medium, 20px); /* 142.857% */
    letter-spacing: var(--type-letter-spacing-label-medium, 0px);
    gap: 4px;
}

@media (max-width: 1200px) {
    .wizard-stepper-container {
        padding: 0 10px;
    }

    .wizard-stepper-step {
        min-width: 70px;
    }

    .wizard-stepper-circle {
        width: 40px;
        height: 40px;
        padding: 10px;
    }

    .wizard-stepper-label {
        font-size: 13px;
    }
}

@media (max-width: 992px) {
    .wizard-stepper-container {
        padding: 0 5px;
    }

    .wizard-stepper-step {
        min-width: 60px;
    }

    .wizard-stepper-circle {
        width: 36px;
        height: 36px;
        padding: 8px;
    }

    .wizard-stepper-label {
        font-size: 12px;
        line-height: 16px;
    }

    .gridClass {
        grid-template-columns: repeat(1,1fr);
    }
}

@media (max-width: 768px) {
    .wizard-stepper-container {
        overflow-x: auto;
        padding: 0;
        justify-content: flex-start;
        gap: 10px;
    }

    .wizard-stepper-step {
        min-width: 50px;
        flex: 0 0 auto;
    }

    .wizard-stepper-circle {
        width: 32px;
        height: 32px;
        padding: 6px;
        margin-bottom: 8px;
    }

    .wizard-stepper-label {
        font-size: 11px;
        line-height: 14px;
    }

    .wizard-stepper-step::before,
    .wizard-stepper-step::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .wizard-stepper-container {
        gap: 5px;
    }

    .wizard-stepper-step {
        min-width: 45px;
    }

    .wizard-stepper-circle {
        width: 28px;
        height: 28px;
        padding: 5px;
        margin-bottom: 6px;
    }

    .wizard-stepper-label {
        font-size: 10px;
        line-height: 12px;
    }
}

.bgClass {
    border-radius: 16px;
    border: 1px solid #F0F0F0;
    background: #FFF;
}

.section1 {
    padding: 24px;
    border-bottom: 1px solid #E6E6E6;
}

.headingsection {
    color: #050505;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

.orangeDiv {
    border-radius: 8px;
    border: 1px solid #FEDBC3;
    background: #FEEEE3;
    padding: 12px 16px;
    color: #050505;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.para {
    color: #333;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    margin-top: 24px;
    margin-bottom: 0px;
}

.cardClass {
    border-radius: 16px;
    border: 1px solid #E6E6E6;
    background: #FFF;
    padding: 24px;
}

.cardHeading {
    color: #050505;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.cardPara {
    color: #666;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 8px;
}


/* Quill editor custom styles */
.bold-text-area {
    margin-top: 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
    padding: 0;
}

    .bold-text-area .ql-toolbar {
        border-radius: 8px 8px 0 0 !important;
        border: none;
        border-bottom: 1px solid #E6E6E6 !important;
        background: #f5f5f5 !important;
        padding: 10px !important;
    }

    .bold-text-area .ql-container {
        border-radius: 0 0 8px 8px;
        border: none;
        min-height: 100px;
        font-size: 15px;
        padding: 8px 12px;
    }

    .bold-text-area .ql-editor {
        min-height: 80px;
        font-size: 15px;
        padding: 8px 0;
    }

    .bold-text-area .ql-toolbar button {
        border-radius: 4px;
    }

    .bold-text-area .ql-toolbar .ql-picker-label {
        border-radius: 4px;
    }

    .bold-text-area .ql-toolbar .ql-active {
        background: #f0f0f0;
    }

    .bold-text-area .ql-toolbar .ql-picker {
        margin-right: 8px;
    }

    .bold-text-area .ql-toolbar .ql-formats {
        margin-right: 12px;
    }

/* Summary Step 5 Styles */
.summary-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.summary-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    padding: 24px;
    margin-bottom: 0;
}

.summary-title {
    font-size: 18px;
    font-weight: 400;
    color: #050505;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 230px;
    width: 100%;
}

.summary-icon {
    width: 40px;
    height: 40px;
}

.summary-label {
    color: #050505;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0px;
}

.summary-value {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0px;
}

.summary-products {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

.summary-product {
    border-radius: 12px;
    border: 1px solid #E6E6E6;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

    .summary-product img {
        width: 72px;
        height: 100%;
        border-radius: 12px 0px 0px 12px;
    }

.summary-product-desc {
    overflow: hidden;
    color: #050505;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.summary-product-meta {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

@media (max-width: 1300px) {
    .summary-products {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width: 900px) {
    .summary-row, .summary-products {
        flex-wrap: wrap;
        gap: 12px;
    }

    .summary-card {
        padding: 16px;
    }

    .summary-products {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 600px) {
    .summary-products {
        grid-template-columns: repeat(1,1fr);
    }

    .summary-section {
        gap: 16px;
    }

    .summary-card {
        padding: 10px;
        border-radius: 10px;
    }

    .summary-row, .summary-products {
        gap: 8px;
    }

    .summary-title {
        font-size: 15px;
    }
}

.dropdown-item {
    display: flex;
    align-items: center; /* Changed to center to keep everything in one line */
    padding: 8px 16px;
    cursor: pointer;
    width: 80%;
    box-sizing: border-box;
    gap: 5px;
    border: 2px solid black; /* Added black border */
}

.dropdown-item-:hover {
    background-color: #f1f1f1;
}

.dropdown-item-.checkbox-custom {
    display: none;
}

.checkbox-custom {
    width: 18px; /* default ~16px, this is bigger */
    height: 20px;
    cursor: pointer;
}


.dropdown-item- .checkmark-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-item input:checked + .checkmark-custom {
    background-color: #007bff;
    border-color: #007bff;
}

.dropdown-item-input:checked + .checkmark-custom::after {
    content: '';
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.dropdown-item-.text-container {
    display: flex;
    flex-direction: row; /* Changed to row to keep text in one line */
    flex-grow: 1;
}

.dropdown-item .label-text {
    font-weight: 500;
    color: #333;
}

.dropdown-item .sublabel-text {
    color: #999;
    font-size: 0.8em;
}

.dropdown-item.selected {
    background-color: #e9f5ff;
    border: 1px solid #007bff;
    border-radius: 8px;
}

.label-write {
    font-weight: 500;
    color: #939191;
}

.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5; /* Light gray background (OFF) */
    transition: 0.4s;
    border-radius: 34px;
}

    .slider::before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        right: 4px; /* ON = move to left */
        top: 4px;
        background-color: white;
        border-radius: 50%;
        transition: 0.4s;
    }

    .slider::after {
        content: "";
        position: absolute;
        transition: 0.3s;
    }

/* OFF STATE: gray ring */
.switch input:not(:checked) + .slider::after {
    left: 8px;
    top: 8px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: 2px solid #ccc;
    opacity: 1;
}

/* ON STATE: vertical white line on right */
.switch input:checked + .slider {
    background-color: #0084ff;
}

    .switch input:checked + .slider::before {
        left: 4px;
        right: auto;
    }

    .switch input:checked + .slider::after {
        top: 9px;
        right: 10px;
        height: 10px;
        width: 2px;
        background-color: white;
        opacity: 1;
        border: none;
        border-radius: 0;
        left: auto;
    }

.selected-option {
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 6px;
    padding: 12px;
    padding-right: 36px;
    border: none;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.custom-select-wrapper {
    position: relative;
    border-left: 1px solid #E6E6E6;
    background: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
}

.selected-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.select-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.custom-options {
    position: absolute;
    z-index: 999;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}




.label-text {
    font-weight: 500;
    font-size: 14px;
}

.label-write {
    font-size: 12px;
    color: #777;
}

.label-write {
    font-weight: 500;
    color: #939191;
}

.custom-divider {
    border: none;
    margin: 4px 0 2px;
}


.dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    max-height: 460px;
}

.product-performance ul {
    list-style: none;
    padding: 0;
}

.card.product-performance {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
}

.product-performance li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.product-performance img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 12px;
}

.product-performance .stars {
    margin-left: auto;
    color: #facc15;
}


.review {
    border-top: 1px solid #eee;
    padding: 16px 0;
}

    .review:first-child {
        border-top: none;
    }

    .review h4 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .review small {
        color: #666;
    }

.stars {
    font-size: 18px;
    display: inline-flex;
    align-items: center;
}

.yellow-star {
    color: #C7C700;
}

.gray-star {
    color: #b0aeae;
    position: relative;
    margin-left: 2px;
}

.review-text {
    text-overflow: ellipsis;
    color: var(--color-text-neutral-secondary, #333);
    font-family: var(--type-family-paragraph, "Space Grotesk");
    font-size: var(--type-size-paragraph-medium, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-line-height-paragraph-medium, 24px);
    letter-spacing: var(--type-letter-spacing-paragraph-medium, 0px);
}

.helo {
    font-size: 14px;
    color: #000;
    margin-left: 4px;
}

.stars {
    color: #C7C700;
}

.helo {
    color: #000000;
}

.gray-star {
    color: #b0aeae;
    text-shadow: 0 0 1px #888;
}

.review p {
    margin: 10px 0;
    color: #444;
    line-height: 1.4;
}

.review a {
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
}

@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr;
    }
}

.light-review {
    color: #999;
    font-size: 14px;
}

.rating-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 20px 10px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-height: 460px;
}

    .rating-card h3 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
    }


.y-axis {
    position: absolute;
    left: -20px;
    bottom: 30px;
    font-size: 12px;
    color: #888;
}


.bold-text-area {
    margin-top: 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #E6E6E6;
    padding: 0;
}

    .bold-text-area .ql-toolbar {
        border-radius: 8px 8px 0 0 !important;
        border: none;
        border-bottom: 1px solid #E6E6E6 !important;
        background: #f5f5f5 !important;
        padding: 10px !important;
    }

    .bold-text-area .ql-container {
        border-radius: 0 0 8px 8px;
        border: none;
        min-height: 100px;
        font-size: 15px;
        padding: 8px 12px;
    }

    .bold-text-area .ql-editor {
        min-height: 80px;
        font-size: 15px;
        padding: 8px 0;
    }

    .bold-text-area .ql-toolbar button {
        border-radius: 4px;
    }

    .bold-text-area .ql-toolbar .ql-picker-label {
        border-radius: 4px;
    }

    .bold-text-area .ql-toolbar .ql-active {
        background: #f0f0f0;
    }

    .bold-text-area .ql-toolbar .ql-picker {
        margin-right: 8px;
    }

    .bold-text-area .ql-toolbar .ql-formats {
        margin-right: 12px;
    }

.summary-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.summary-card {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    padding: 24px;
    margin-bottom: 0;
}

.summary-title {
    font-size: 18px;
    font-weight: 400;
    color: #050505;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.summary-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.summary-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 230px;
    width: 100%;
}

.summary-icon {
    width: 40px;
    height: 40px;
}

.summary-label {
    color: #050505;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0px;
}

.summary-value {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 0px;
}

.summary-products {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}

.summary-product {
    border-radius: 12px;
    border: 1px solid #E6E6E6;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

    .summary-product img {
        width: 72px;
        height: 100%;
        border-radius: 12px 0px 0px 12px;
    }

.summary-product-desc {
    color: #050505;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.summary-product-meta {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

@media (max-width: 1300px) {
    .summary-products {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width: 900px) {
    .summary-row, .summary-products {
        flex-wrap: wrap;
        gap: 12px;
    }

    .summary-card {
        padding: 16px;
    }

    .summary-products {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 600px) {
    .summary-products {
        grid-template-columns: repeat(1,1fr);
    }

    .summary-section {
        gap: 16px;
    }

    .summary-card {
        padding: 10px;
        border-radius: 10px;
    }

    .summary-row, .summary-products {
        gap: 8px;
    }

    .summary-title {
        font-size: 15px;
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    width: 80%;
    box-sizing: border-box;
    gap: 5px;
    border: 2px solid black;
}

.dropdown-item-:hover {
    background-color: #f1f1f1;
}

.dropdown-item-.checkbox-custom {
    display: none;
}

.checkbox-custom {
    width: 18px;
    height: 20px;
    cursor: pointer;
}


.dropdown-item- .checkmark-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-item input:checked + .checkmark-custom {
    background-color: #007bff;
    border-color: #007bff;
}

.dropdown-item-input:checked + .checkmark-custom::after {
    content: '';
    width: 8px;
    height: 14px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.dropdown-item-.text-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.dropdown-item .label-text {
    font-weight: 500;
    color: #333;
}

.dropdown-item .sublabel-text {
    color: #999;
    font-size: 0.8em;
}

.dropdown-item.selected {
    background-color: #e9f5ff;
    border: 1px solid #007bff;
    border-radius: 8px;
}

.label-write {
    font-weight: 500;
    color: #939191;
}

.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    transition: 0.4s;
    border-radius: 34px;
}

    .slider::before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        right: 4px;
        top: 4px;
        background-color: white;
        border-radius: 50%;
        transition: 0.4s;
    }

    .slider::after {
        content: "";
        position: absolute;
        transition: 0.3s;
    }

.switch input:not(:checked) + .slider::after {
    left: 8px;
    top: 8px;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    border: 2px solid #ccc;
    opacity: 1;
}

.switch input:checked + .slider {
    background-color: #0084ff;
}

    .switch input:checked + .slider::before {
        left: 4px;
        right: auto;
    }

    .switch input:checked + .slider::after {
        top: 9px;
        right: 10px;
        height: 10px;
        width: 2px;
        background-color: white;
        opacity: 1;
        border: none;
        border-radius: 0;
        left: auto;
    }

/* Campaign table specific styles */
.table-heading {
    color: #050505;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
}

.campaign-table th {
    font-weight: 500;
    color: #666;
    padding: 16px;
}

.campaign-table td {
    padding: 16px;
    vertical-align: middle;
}

.campaign-name {
    font-weight: 500;
    color: #1A1A1A;
}

.campaign-budget {
    font-weight: 500;
    color: #1A1A1A;
}

.campaign-metrics {
    color: #666;
}

/* Status badges specific to campaigns */
.status-badge.status-active {
    background: #E8F5E9;
    color: #00C853;
}

.status-badge.status-pending {
    background: #FFF3E0;
    color: #FF9800;
}

.status-badge.status-paused {
    background: #FFEBEE;
    color: #F13944;
}

/* Campaign action buttons */
.campaign-actions {
    display: flex;
    gap: 8px;
}

.btn-edit {
    background: #F5F5F5;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: #1A1A1A;
    font-size: 14px;
    cursor: pointer;
}

.btn-pause {
    background: #FFEBEE;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    color: #F13944;
    font-size: 14px;
    cursor: pointer;
}

/* Campaign filters */
.campaign-filters {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.bar-fill.bar-empty {
    background-color: transparent;
}

.bar-fill.bar-green {
    background-color: #4CAF50 !important; /* Green */
}

.bar-fill.bar-yellow {
    background-color: #FFEB3B !important; /* Yellow */
}

.bar-fill.bar-orange {
    background-color: #FF9800 !important; /* Orange */
}

.bar-fill.bar-red {
    background-color: #F44336 !important; /* Red */
}

.bar-fill.bar-darkred {
    background-color: #b71c1c !important; /* Darker Red for 1-star */
}

/* IMPORTANT: Custom Date Picker Styles */
.custom-date-picker {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 36px 10px 32px !important;
    min-height: 42px !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: border-color 0.3s ease !important;
}

    .custom-date-picker:hover {
        border-color: #999 !important;
    }

.calendar-icon {
    position: absolute !important;
    left: 10px !important;
    height: 16px !important;
    width: 50px !important;
    pointer-events: none !important;
}

.date-picker-text {
    padding-left: 22px !important;
    /*padding-right: 22px !important;*/
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px;
    font-weight: 500;
}

.date-range-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

.clear-date-btn {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    color: #666 !important;
    cursor: pointer !important;
    z-index: 3 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

    .clear-date-btn:hover {
        color: #000 !important;
    }

button,
input,
select,
textarea,
a,
.custom-date-picker,
.phone-input-container,
[role="button"] {
    cursor: pointer !important;
    transition: border-color 0.3s ease !important;
}

    button:hover,
    input:hover,
    select:hover,
    textarea:hover,
    a:hover,
    .custom-date-picker:hover,
    .phone-input-container:hover,
    [role="button"]:hover {
        border-color: #999 !important;
    }

.rating-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 200px; /* Slightly increased height for better proportionality */
    position: relative;
    padding-bottom: 40px; /* Increased padding for better spacing */
    margin-top: 220px; /* Adjusted to align with y-axis labels */
    gap: 12px; /* Slightly increased gap for better spacing */

    border-radius: 8px; /* Rounded corners for the container */
    padding: 16px; /* Added padding for a cleaner look */
}

.bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    text-align: center;
    transition: transform 0.3s ease; /* Smooth scaling animation on hover */
}

    .bar:hover {
        transform: translateY(-4px); /* Slight lift effect on hover */
    }

.bar-bg {
    background: #e5e7eb !important; /* Softer gray for background */
    width: 100% !important;
    height: 322px !important; /* Consistent height with original */
    border-radius: 8px !important; /* Softer, more modern rounded corners */
    position: relative !important;
    display: flex !important;
    align-items: flex-end !important;
    overflow: hidden !important; /* Ensures fill stays within rounded corners */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important; /* Inner shadow for depth */
}

.bar-fill {
    width: 100% !important;
    border-radius: 8px 8px 0 0 !important; /* Rounded top corners only */
    transition: height 0.5s ease, background-color 0.3s ease !important; /* Smooth height and color transitions */
    position: relative;
    overflow: hidden !important;
}

    /* Gradient and glow effects for each bar */
    .bar-fill.bar-green {
        background: linear-gradient(180deg, #4CAF50 0%, #2e7d32 100%) !important; /* Green gradient */
        box-shadow: 0 -2px 8px rgba(76, 175, 80, 0.5) !important; /* Subtle glow */
    }

    .bar-fill.bar-yellow {
        background: linear-gradient(180deg, #FFEB3B 0%, #fbc02d 100%) !important; /* Yellow gradient */
        box-shadow: 0 -2px 8px rgba(255, 235, 59, 0.5) !important;
    }

    .bar-fill.bar-orange {
        background: linear-gradient(180deg, #FF9800 0%, #ef6c00 100%) !important; /* Orange gradient */
        box-shadow: 0 -2px 8px rgba(255, 152, 0, 0.5) !important;
    }

    .bar-fill.bar-red {
        background: linear-gradient(180deg, #F44336 0%, #d32f2f 100%) !important; /* Red gradient */
        box-shadow: 0 -2px 8px rgba(244, 67, 54, 0.5) !important;
    }

    .bar-fill.bar-darkred {
        background: linear-gradient(180deg, #b71c1c 0%, #8e0000 100%); /* Dark red gradient */
        box-shadow: 0 -2px 8px rgba(183, 28, 28, 0.5);
    }

    .bar-fill.bar-empty {
        background: transparent !important; /* No fill for empty bars */
    }

.bar-emoji {
    margin-top: 8px !important;
    font-size: 18px !important; /* Slightly larger emojis for emphasis */
    transition: transform 0.3s ease !important; /* Smooth scaling for emojis */
}

.bar:hover .bar-emoji {
    transform: scale(1.2) !important; /* Slight zoom effect on hover */
}

.bar-label {
    margin-top: 8px !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important; /* Darker text for better contrast */
    font-family: "Space Grotesk", sans-serif !important; /* Consistent typography */
}

.bar-number {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
}

.y-axis-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    margin-right: 12px; /* Increased margin for better spacing */

    font-size: 12px;
    color: #666; /* Softer gray for labels */
    height: 360px; /* Consistent with bar-bg height */
    padding-bottom: 16px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 400;
}

    .y-axis-labels div {
        transition: color 0.3s ease; /* Smooth color transition on hover */
    }

        .y-axis-labels div:hover {
            color: #1a1a1a; /* Darker color on hover for interactivity */
        }

.max-w23perc {
    max-width: 23%;
}

/* Target when the hidden <select> has the font-w-500 class */
select.font-w-500 + .select2.select2-container .select2-selection__rendered {
    font-weight: 500 !important;
}

.w-28 {
    width: 28% !important;
}

.ad-credit-modal-container {
    width: 454px;
    background: #F5F5F5;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ad-credit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.ad-credit-inner-header {
    display: flex;
    flex-direction: column;
}

.ad-credit-title {
    font-size: 18px;
    color: #050505;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
}

.ad-credit-close-button {
    background: none;
    border: none;
    cursor: pointer;
}

.ad-credit-body {
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

.ad-credit-note {
    color: #666666;
    font-size: 14px;
    line-height: 24px;
    font-family: 'Space Grotesk';
}

.ad-credit-label {
    color: #333333;
    font-size: 14px;
    font-family: 'Space Grotesk';
}

.ad-credit-input-container {
    display: flex;
    align-items: center;
    border: 1px solid #E6E6E6;
    border-radius: 10px;
    background: white;
    padding: 12px;
    gap: 8px;
}

.ad-credit-input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: 'Space Grotesk';
    color: #050505;
    background: transparent;
}

.ad-credit-currency {
    color: #666666;
    font-size: 14px;
}

.ad-credit-icon {
    width: 20px;
    height: 20px;
}

.ad-credit-svg {
    width: 20px;
    height: 20px;
}

.ad-credit-quick-amounts {
    display: flex;
    gap: 8px;
}

.ad-credit-quick-input {
    width: 135px;
    display: flex;
    align-items: center;
    border: 1px solid #E6E6E6;
    border-radius: 10px;
    padding: 12px;
    flex: 1;
    gap: 6px;
    background: white;
}

.ad-credit-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.ad-credit-btn-group {
    display: flex;
    gap: 8px;
}

.ad-credit-btn-back,
.ad-credit-btn-next {
    padding: 12px 24px;
    border-radius: 10px;
    font-family: 'Space Grotesk';
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #E6E6E6;
    background: white;
    color: #050505;
}

.ad-credit-btn-next {
    background: #8BC4FF;
    border: none;
}

.ad-credit-arrow-icon {
    width: 16px;
    height: 16px;
    margin-left: 6px;
}

.badge {
    gap: 4px;
    background-color: #e0f2fe;
    color: #0369a1;
    font-size: 12px;
    border-radius: var(--2xs, 4px);
    font-weight: 500;
}

/* Optional variations */
.badge-plain {
    background-color: transparent;
    color: #666;
}

.badge-grayed {
    background-color: #F0F0F0;
    color: #050505;
}

.badge-primary {
    background-color: #2563eb;
    color: white;
}

.badge-success {
    background-color: #dcfce7;
    color: #166534;
}

.badge-warning {
    background-color: #fef9c3;
    color: #854d0e;
}

.badge-average {
    background-color: #FEEEE3 !important;
    color: #974600 !important;
}

.badge-low-danger {
    background-color: #FEEEE3;
    color: #974600;
}

.badge-danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-md {
    font-size: 14px !important;
}

.badge-lg {
    font-size: 16px !important;
}

.badge svg {
    margin-bottom: 2px;
}
.dynamic-chart-container {
    width: 100%;
    height: 250px;
    position: relative;
    margin-top: 1rem;
}

    .dynamic-chart-container canvas {
        width: 100% !important;
        height: auto !important;
    }

.btn-back, .btn-next, .btn-class {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.3s ease;
}



.btn-class {
    border-radius: 10px;
    background: #8BC4FF;
    color: #050505;
    text-align: center;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: max-content;
    width: 100%;
    cursor: pointer !important;
}



    .btn-class:hover {
        border-color: #999 !important;
    }
.display-none {
    display: none !important;
}
.nested-tabs-container .custom-tabs .custom-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    justify-content: center;
    width: 100%;
    color: #666;
    font-size: 16px;
    font-weight: 500;
}



    .nested-tabs-container .custom-tabs .custom-tab.active {
        border-radius: 8px;
        background: #8BC4FF;
        color: #050505;
        border-bottom: none;
    }



        .nested-tabs-container .custom-tabs .custom-tab.active svg path {
            stroke: #050505;
        }



.item-main-info {
    flex-grow: 1;
}



/* Styles for Keywords/Manual Entry tabs */

.nested-tab-content[data-nested-content="0"] .custom-tabs-container .custom-tab {
    color: #666;
    font-weight: 500;
    border-bottom: 2px solid transparent !important;
    background-color: transparent !important;
}



    .nested-tab-content[data-nested-content="0"] .custom-tabs-container .custom-tab.active {
        color: #222222 !important;
        border-bottom: 2px solid #222222 !important;
        background-color: transparent !important;
        border-radius: 0px !important;
    }



.select2 {
    color: #050505 !important;
    text-align: center !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0px !important;
}



.w-100 {
    width: 100%;
}



.m-r-14 {
    margin-right: 14px
}



.daterangepicker {
    border-radius: 8px;
    z-index: 2000 !important;
    background-color: #fff;
}
.daterangepicker .drp-calendar,
.daterangepicker .calendar-table,
.daterangepicker .calendar-table table,
.daterangepicker .drp-calendar .calendar-table {
    background-color: #fff !important;
}
.chart-wrapper {
    display: flex;
    width : 100%;
    height: 100%;
    justify-content: center;
}
/*.img-div-footer {
    padding: 16px 32px;
    display: none;
    position: relative;
    height: 380px;
    width: 100%;
    margin-bottom: 16px;
}

    .img-div-footer::before {
        background-image: url(/assets/icons/sidebar-footer.png) !important;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        content: "";
        position: absolute;
        top: 0;
     
        bottom: 0;
        z-index: -1;
    }
*/
.sidebar-main {
    position: fixed;
    top: 0;
    left: 0;
    width: 80px; /* collapsed width */
    height: 116vh;
    background: #fff;
    z-index: 10;
    transition: width 0.3s ease;
}

    .sidebar-main.expanded {
        width: 288px; /* expanded width */
    }

.sidebar-submenu {
    position: fixed;
    top: 0;
    height: 116vh;
    width: 208px;
    background: #fff;
    overflow: hidden;
    transition: left 0.3s ease;
    z-index: 9;
}

.main-content {
    transition: margin-left 0.3s ease;
}
.sidebar-submenu-colapse  {
    width: 86px;
}
    .sidebar-submenu-colapse .sidebar-item{
        width:52px;
    }
.absolute-search-icon {
    position: absolute;
    top: 12px;
    left: 11px;
}
.bold-spinner {
    margin-top: 8px;
    font-feature-settings: 'liga' off;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.flex-center {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}   
/* Sidebar Styles */
.sidebar {
    background-color: #fff;
    height: 116vh;
    width: 80px;
    position: fixed;
    left: 0;
    top: 0;
    transition: width 0.3s ease, left 0.3s ease;
    overflow-x: hidden;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.sidebar.expanded {
    width: 280px;
    align-items: flex-start;
}

/* Submenu Sidebar */
.sidebar-submenu {
    position: fixed;
    top: 0;
    left: 80px;
    width: 80px;
    height: 116vh;
    background: #fff;
    z-index: 1200;
    transition: all 0.3s ease;
    display: none;
    padding: 16px;
    border-left: 1px solid #E6E6E6;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    gap: 30px;
}
.sidebar-submenu.open {
    display: flex;
}
.sidebar-submenu.expanded {
    width: 280px;
}

.max-50 {
    max-height: 50vh !important;
    overflow: scroll !important;
}
    .sidebar-submenu.collapsed {
        width: 80px;
  
    }

/* Main Content Styles */
.main-content {
    margin-left: 80px;
    transition: margin-left 0.3s ease, width 0.3s ease;
    width: calc(100% - 80px);
}
.main-content.shifted {
    margin-left: 280px;
    width: calc(100% - 280px);
}
.main-content.submenu-open {
    margin-left: 560px;
    width: calc(100% - 560px);
}
.main-content.submenu-collapsed {
    margin-left: 360px;
    width: calc(100% - 360px);
}

/* Sidebar Item Active Styles */
/* RTL mirrors */
[dir="rtl"] .sidebar { left: auto; right: 0; }
[dir="rtl"] .sidebar-submenu { left: auto; right: 80px; border-left: none; border-right: 1px solid #E6E6E6; }
[dir="rtl"] .main-content { margin-left: 0; margin-right: 80px; }
[dir="rtl"] .main-content.shifted { margin-right: 280px; }
[dir="rtl"] .main-content.submenu-open { margin-right: 560px; }
[dir="rtl"] .main-content.submenu-collapsed { margin-right: 360px; }
.sidebar-item {
    padding: 12px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-top: 8px;
}
.sidebar-item.active {
    border-radius: 8px;
    background-color: #000;
    color: #fff;
}
.sidebar-item.active .menu-text {
    color: #fff;
}
#sidebarSubmenu .sidebar-item.active {
    background: #000;
    color: #fff;
}
#sidebarSubmenu .sidebar-item.active .menu-text {
    color: #fff;
}
#sidebarSubmenu .sidebar-item.active img {
    filter: brightness(0) invert(1);
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .sidebar {
        width: 80px;
        left: -280px;
        z-index: 20;
        transition: left 0.3s ease, width 0.3s ease;
    }
    .sidebar.expanded {
        width: 280px;
        left: 0;
      
    }
    .sidebar-submenu {
        left: 0;
        width: 80px;
    }
    .sidebar-submenu.expanded {
        width: 280px;
    }
    .main-content {
        margin-left: 0;
        width: 100%;
    }
    .main-content.shifted, .main-content.submenu-open, .main-content.submenu-collapsed {
        margin-left: 0;
        width: 100%;
    }
}
.logo-container {
    cursor:pointer;
}
.flex-center {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.submenu-title{
    margin-top:9px;
}
.centered {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mr-8px {
    margin-right: 8px;
}
.ml-16px {
    margin-left: 16px;
}
.fill-avialblewidth {
    width: -webkit-fill-available !important;
    
    width: -moz-available !important;
}
.pr-5 {
    padding-right:3rem;
}
.text-gray {
    color: #918e8e;
    font-weight: 400;
}
.text-normal-md {
    color: var(--color-text-neutral-secondary, #333) !important;
    /* Label/medium-14/Regular */
    font-family: var(--type-family-label, "Space Grotesk"), sans-serif !important;
    font-size: var(--type-size-label-medium, 14px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--type-line-height-label-medium, 20px) !important; /* 142.857% */
    letter-spacing: var(--type-letter-spacing-label-medium, 0) !important;
}
.text-muted-sm {
    overflow: hidden;
    color: var(--color-text-neutral-tertiary, #666);
    text-overflow: ellipsis;
    /* Label/small-12/Regular */
    font-family: var(--type-family-label, "Space Grotesk"), sans-serif;
    font-size: var(--type-size-label-small, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--type-line-height-label-small, 16px); /* 133.333% */
    letter-spacing: var(--type-letter-spacing-label-small, 0);
}
.text-muted-sm-ellipsis {
    overflow: hidden;
    color: var(--color-text-neutral-tertiary, #666) !important;
    text-overflow: ellipsis;
    /* Label/small-12/Regular */
    font-family: var(--type-family-label, "Space Grotesk"), sans-serif;
    font-size: var(--type-size-label-small, 12px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--type-line-height-label-small, 16px); /* 133.333% */
    letter-spacing: var(--type-letter-spacing-label-small, 0);
    
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    align-self: stretch;
}
.modal-txt {
    font-size: 14px;
  
}
.max-width-40 {
    max-width: 40vw !important;
}
.w-73{
    width:73% !important;
}
.w-235{
    width:235% !important;
}
.line-height-0 {
    line-height:0 !important;

}
.g-14px {
    gap:14px;
}
.flex-end {
    justify-content:flex-end !important;
}
.submenu-title {
    text-wrap-mode: nowrap;
}
.divider, .icon-divider {
    margin-bottom: 15px;
}
.w-220 {
    width:220px;
}

/* Light button variant */
button.btn--light {
    background: #fff;
    color: #050505;
    border: 1px solid var(--color-border);
    text-align: center;
    font-weight: 500;
    line-height: 20px;
    transition: all 0.3s ease;
}

    /* Hover effect for light button */
    button.btn--light:hover {
        background: #8BC4FF;
        color: #050505;
    }
.select {
    font-family: var(--font-family);
    font-size: 14px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 4px;
}
.border-none {
    border: none !important;
}
.w-65px {
    width: 65px !important;
}
.g-6 {
    gap:6px
}
select2-selection__choice {
    border:none !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background: red !important;
    color:#fff !important;
    border: none !important;
}
.select2-selection--multiple {
    width: 100% !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    background-color: rgb(255, 255, 255) !important;
    padding: 6px 12px 8px !important;
    border-width: 1px !important;
    border-style: solid;
    border-color: rgb(230, 230, 230) !important; 
    border-image: initial !important;
    border-radius: 8px !important;
}
.Activate-btn {
    color: green;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    background-color: transparent;
    box-shadow: none;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding: 0px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    margin-top:6px !important;

}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    float: inline-start;
}
.h-auto-my--35-mx--auto {
    height: auto !important;
    min-height: 275px;
    margin: 35vh auto 35vh auto !important;
}
.h-auto-my--25-mx--auto {
    height: auto !important;
    min-height: 275px;
    margin: 25vh auto 25vh auto !important;
}
.btn-next.btn-disabled,
.btn-next:disabled {
    background-color: #6c757d !important; 
    border-color: #6c757d !important; 
    color: #ffffff !important; 
    opacity: 0.6; 
    cursor: pointer; 
    pointer-events: none; 

}

    .btn-next.btn-disabled:hover,
    .btn-next:disabled:hover {
        background-color: #6c757d !important;
        border-color: #6c757d !important;
        color: #ffffff !important;
        opacity: 0.6;
    }
.t-20-l-45 {
    left: 45vw !important;
    top: 20vh !important;
}
.d-flex-center {
    
    justify-content: center !important;
    align-items: center !important;
    justify-items: center !important;
}

/* RTL adjustments for profile modal in Admin layout */
[dir="rtl"] .profile-modal {
    direction: rtl;
    left: auto;
    right: 16px; /* mirror from right */
    text-align: right;
}

    [dir="rtl"] .profile-modal .profile-modal-item {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* icon then text in RTL */
    }

        /* Swap spacing for icons inside modal items */
        [dir="rtl"] .profile-modal .profile-modal-item svg {
            margin-left: 8px;
            margin-right: 0;
        }

/* Utility override for existing mr-8px used on the sign-out icon */
[dir="rtl"] .mr-8px {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

[dir="rtl"] .input-with-icon svg {
    left: auto;
    right: 12px;
}
[dir="rtl"] .input-with-icon input {
    padding: 8px 36px 8px 12px;
}
[dir="rtl"] .search-icon {
    left: auto;
    right: 12px;
}
[dir="rtl"] .select-arrow {
    right: auto;
    left: 8px;
}
[dir="rtl"] .table th, [dir="rtl"] .table td {
    text-align: right;
}
[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}
[dir="rtl"] .pagination-results {
    text-align: right;
}

[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-2 { margin-right: 0.5rem !important;  margin-left: 0 !important; }
[dir="rtl"] .me-1 { margin-left: 0.25rem !important;  margin-right: 0 !important; }
[dir="rtl"] .me-2 { margin-left: 0.5rem !important;   margin-right: 0 !important; }
[dir="rtl"] .ml-16px { margin-right: 16px !important; margin-left: 0 !important; }
[dir="rtl"] .m-r-14 { margin-left: 14px !important;   margin-right: 0 !important; }
[dir="rtl"] .mr-10 { margin-left: 10px !important;     margin-right: 0 !important; }