:root {
   /* --text-50: hsl(250, 4%, 97%);*/
--text-50:#F5F7F8;
--text-100: hsl(240, 6%, 90%);
--text-200: hsl(240, 4%, 80%);
--text-300: hsl(240, 5%, 70%);
--text-400: hsl(240, 4%, 60%);
--text-500: hsl(240, 4%, 50%);
--text-600: hsl(240, 4%, 40%);
--text-700: hsl(240, 5%, 30%);
--text-800: hsl(240, 4%, 20%);
--text-900: hsl(240, 6%, 10%);
--text-950: hsl(240, 4%, 5%);

--background: #fcfcfc;

--primary-50: #f4e5ff;
--primary-100: #e9ccff;
--primary-200: #d399ff;
--primary-300: #bd66ff;
--primary-400: #1F2937;
--primary-500: #9000ff;
--primary-600: #70a84d;
--primary-700: rgb(3 7 18);
--primary-800: #3a0066;
--primary-900: #1d0033;
--primary-950: #0e001a;

--secondary-50: #f7e5ff;
--secondary-100:  hsl(240, 6%, 90%);
--secondary-200: #df99ff;
--secondary-300: #cf66ff;
--secondary-400: #be33ff;
--secondary-500:#1F2937;
--secondary-600: #8b00cc;
--secondary-700: #690099;
--secondary-800: #460066;
--secondary-900: #230033;
--secondary-950: #11001a;

--accent-50: hsl(245, 100%, 95%);
--accent-100: hsl(244, 100%, 90%);
--accent-200: hsl(243, 100%, 80%);
--accent-300: hsl(243, 100%, 70%);
--accent-400: hsl(243, 100%, 60%);
--accent-500: hsl(243, 100%, 50%);
--accent-600: hsl(243, 100%, 40%);
--accent-700: hsl(243, 100%, 30%);
--accent-800: hsl(243, 100%, 20%);
--accent-900: hsl(244, 100%, 10%);
--accent-950: hsl(242, 100%, 5%);

--white: #fff;
--light-green: hsl(121, 89%, 89%);
--dark-green: hsl(125, 100%, 30%);
--light-orange: hsl(41, 94%, 81%);
--dark-orange: hsl(32, 100%, 43%);
--light-red:hsl(0deg 42.49% 91.78%);
--dark-red: hsl(0, 100%, 50%);

}

a {
    cursor: pointer;
}

header {
    z-index: 1000;
    height: 60px;
    position: fixed;
    width: 100%;
    top: 0;
}

.qpe-logo {
    width: 250px;
    max-width: 100%;
    flex-shrink: 0;
}
#splitBtn{width:fit-content;margin:15px 0;}
.qpe-logo > div {
    max-width: 160px;
}
.whats-app-btn{position:fixed;background:#000;color:#fff}
.whats-app-btn svg{width:20px;height:20px;}
.simditor-placeholder {
  top: 10px !important;
}
.sticky-column{
    position: sticky;
    top: 70px;
    height: max-content;
}
.header {
    box-shadow: 0 2px 4px -1px rgba(7,14,35,.08);
    background-color: var(--white);
    height: 60px;
    width: 100%;
    z-index: 20;
    position: relative;
}
.or-customer-email{color:#000;}
.support-button {
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--text-200);
}

.offer-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-700);
}

.notifi-icon {
    cursor: pointer;
    position: relative;
}

img, video, canvas {
    max-width: 100%;
    display: block;
    height: auto;
}

.notifi-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    min-width: 400px;
    max-width: 500px;
    width: 100%;
    background: var(--background);
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px -4px rgba(18,20,23,.08);
   right: 10%;
   display: none;
   transition: 0.3s ease-in-out;
}

.notifi-menu {
    position: relative;
}

.select2-container .select2-selection--single {
  height: 32px !important;
}

.notifi-menu-header {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid var(--text-200);
    align-items: center;
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    line-height: 18px;
    justify-content: space-between;
    color: var(--text-700);
    cursor: default;
}

.notifi-header-title {
    display: flex;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-800);
    gap: 0.5rem;
}

.notifi-settings-icon {
    cursor: pointer;
}

.notifi-menu-body {
    max-height: 320px;
    overflow: auto;
}

.notifi-menu-nothing {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    text-align: center;
    color: var(--text-800);
    padding: 1.25rem;
    cursor: default;
}
.notifi-menu-item {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    color: var(--text-600);
    padding: 1.25rem;
    cursor: default;
    cursor: pointer;
    transition: 0.2s ease-in-out;
}

.notifi-menu-item:hover {
    background-color: var(--text-50);
    color: var(--text-900);
}

.user-menu-trigger {
    transition: transform 0.3s ease;
    cursor: pointer;
    user-select: none;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
}

.user-menu-info span:first-child {
    color: var(--text-800);
    font-size: 14px;
    line-height: 17px;
    font-weight: 500;
}

.user-menu-info span:last-child {
    color: var(--text-600);
    font-size: 12px;
    line-height: 12px;
    text-transform: capitalize;
}

.user-menu-name {
    color: var(--text-900);
}

.user-menu-dropdown {
    font-size: 14px;
    border-radius: 0.5rem;
    min-width: 260px;
    z-index: 999;
    top: calc(100% + 0.5rem);
    right: 0;
    box-shadow: 0 4px 24px -4px rgba(18,20,23,.08);
    line-height: 1rem;
    color: var(--text-600);
    display: none;
    transition: 0.3s ease-in-out;
}

.user-menu-header>div>span:last-child {
    font-size: 12px;
    line-height: 15px;
    text-transform: capitalize;
}

.user-menu-body-item {
    min-height: 36px;
    cursor: pointer;
    border-radius: 0.4rem;
    color: var(--text-700);
    transition: 0.2s ease-in-out;
}

.user-menu-body>div>a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    height: 36px;
}

.user-menu-body-item > a {
    color: var(--text-600);
}

.user-menu-body-item:hover {
    background-color: var(--text-100);
    color: var(--text-900);
}

.user-menu-body-item > a:hover {
    color: var(--text-900);
}

.user-menu-sign-out {
    margin-top: 8px;
    border-top: 1px solid var(--text-100);
}


body #main-content .app-body {
    display: flex;
    background-color: var(--background);
    width: 100%;
    max-width: 100%;
    margin-top: 60px;
    flex: 1;
}

.sidebar-container {
    position: fixed;
    z-index: 12;
    width: 240px;
    background: var(--text-50);
    margin-left: 0;
    padding-top: 0;
    margin-bottom: 0;
    transition: width .15s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    border-right: 1px solid var(--text-100);
    height: inherit;
    max-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebarOffCanvas {
    max-width: 270px;
}

.qpe-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--text-200);
    box-shadow: inset 0 1px 2px rgba(16,24,40,.05);
    border-radius: 0.5rem;
    background: var(--white);
    width: 100%;
    padding: 0 14px;
    transition: border .3s ease !important;
    height: 40px;
    max-height: 40px;
    outline: none;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-900);
}

label {
    margin-bottom: 0.75rem;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 17px;
    color: var(--text-500);
    display: inline-block;
    align-items: center;
}


.sidebar {
   
    overflow: auto;
    width: 240px;
    padding: 0.75rem 0 0 0;
    margin-bottom: 0;
    list-style: none;
    flex-direction: column;
    display: flex;
    transition: padding .15s ease;
    height: 100vh;
}

.sidebar .nav-item {
    width: 100%;
    padding: 0;
    position: relative;
}

.sidebar .nav-item .nav-link {
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: start;
    cursor: pointer;
    padding: 0.5rem;
    position: relative;
    margin: 0 1rem 0 1rem;
    font-size: 14px;
    color: var(--text-600);
}

.sidebar .nav-item .nav-link span {
    margin-left: 1rem;
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.sidebar .nav-item .nav-link.active {
    position: relative;
    cursor: pointer;
    background: var(--text-100);
    border-radius: 0.5rem;
}

.sidebar .nav-item .nav-link.active span {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    color: var(--text-900);
}

.sidebar-container.minimized {
    width: 68px;
}

.sidebar.minimized {
    width: 68px;
    overflow: auto;
    height: auto;
}

.sidebar.minimized>.nav-item>.nav-link {
    height: 35px;
    width: 35px;
    justify-content: center;
    transition: all .15s ease;
}

.sidebar.minimized>.nav-item>.nav-link>span {
    opacity: 0;
    display: none;
}

.sidebar.minimized>.nav-item:nth-child(1), .sidebar.minimized>.nav-item:nth-child(6), .sidebar.minimized>.nav-item:nth-child(8), .sidebar.minimized>.nav-item:nth-child(10) {
    margin-bottom: 1.2rem;
}

.sidebar .nav-item .nav-link-dropdown .nav-link, .sidebar .nav-item .nav-link-dropdown-minimized .nav-link {
    font-size: 14px;
    padding: 0.35rem 0.5rem 0.35rem 1.5rem;
    cursor: pointer;
    border-radius: 0.5rem !important;
}

.nav-link-dropdown {
    display: none;
}

.sidebar .nav-item .nav-link:hover {
    background-color: var(--text-100);
    border-radius: 0.5rem;
}

.sidebar .nav-item .nav-link.active {
    background-color: var(--text-100);
}

html body #main-content .app-body>.main {
    flex: 1;
    min-width: 0;
    background: var(--text-50);
    transition: margin-left .3s ease;
    margin-left: 240px;
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
    scrollbar-width: none !important;
    /* height: 100vh; */
}

html body #main-content .app-body>.main .main-container {
    max-width: 1280px;
    width: 100%;
    padding: 0 1.5rem;
    margin-right: auto;
    margin-left: auto;
    background: var(--text-50);
    
}

.dashboard-screen {
    position: relative;
} 

.qpe-badge-wrapper {
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
}

.screen-header {
    padding: 1.5rem 0;
    align-items: flex-end;
    justify-content: space-between;
    display: flex;
    position: relative;
}

.greeting-message {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-right: 2rem;
}

.greeting-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.greeting-message .greeting-title .title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-900);
    
}

.greeting-message .greet-breadcrumb .link {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-500);
}

.greet-breadcrumb {
    align-items: center;
    display: flex;
    margin: 0;
    white-space: nowrap;
    gap: 0.25rem;
}


.date-picker {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    height: 2.25rem;
    background: var(--background);
    font-size: .85rem;
    border-radius: 0.5rem;
    border: 1px solid var(--text-100);
    box-shadow: 0 1px 2px rgba(18,20,23,.06);
    cursor: pointer;
    gap: 0.3rem;
}

.daterangepicker {
    box-shadow: 0px 2px 4px -1px rgba(7,14,35,.08), 0px 2px 24px -2px rgba(7,14,35,.12);
    border-radius: 0.5rem;
    font-size: 14px;
    margin-top: 0.5rem;
    overflow: hidden;
    background: var(--background);
    border: none;
    position: absolute;
    z-index: 2;
    display: none;
   
    left: auto;
    right: 20px;
}

 .daterangepicker .ranges ul {
    min-width: 200px;
    padding: 1rem 0.75rem 0.75rem 0.75rem;
}

 .daterangepicker .ranges li.active {
    background-color: var(--text-50)  !important;
    color: var(--text-900) !important;
}

 .daterangepicker .ranges li.active {
    background-color: var(--text-100);
    color: var(--text-900);
}

 .daterangepicker .ranges li {
    padding: 0 0.75rem;
   
    border-top: 1px solid rgba(0,0,0,0);
    border-bottom: 1px solid rgba(0,0,0,0);
    color: var(--text-600);
    font-family: "Inter" !important;
    font-style: normal !important;
    font-weight: 500;
    font-size: 13px !important;
    /* line-height: 16px; */
    
    border-radius: 0.5rem;
    cursor: pointer;
}

.date-picker-container .date-picker-range ul li:hover {
    background-color: var(--text-100);
    color: var(--text-900);
}

.setup-guide-container {
    margin-bottom: 1rem;
    user-select: none;
    background-color: var(--background);
    border-radius: 0.5rem;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding: 1.5rem;
    box-shadow: 0 2px 4px -1px rgba(7,14,35,.08);
}

.setup-guide-title-container {
    flex: 1;
}

.progress-bar-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.progress-complete {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-700);
    text-align: left;
}

.progress-bar-wrapper {
    height: 8px;
    width: 160px;
    overflow: hidden;
    border-radius: 4px;
    background-color: var(--text-100);
}

.progress-bar {
    border-radius: 4px;
    background-color: var(--primary-600);
    width: 25%;
    height: 100%;
    transition: width 1s ease-in-out;
}

.setup-guide-header {
    margin-bottom: 20px;
}

.setup-guide-title {
    color: var(--text-800);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    margin: 0;
    padding-bottom: 5px;
}

.setup-guide-subtitle {
    color: var(--text-500);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    margin: 0;
    
}

.guide-category {
    box-shadow: 0 2px 4px -1px rgba(7,14,35,.08);
    border: 1px solid var(--text-100);
}

.guide-category-header {
    display: flex;
    gap: 16px;
    padding-block: 16px;
    padding-inline: 20px;
    max-height: 80px;
    height: 60px;
}

.accordion-button:hover {
    background-color: var(--secondary-50);
}

.category-icon > svg {
    stroke: var(--primary-600);
}

.category-icon-complete > svg {
    stroke: #fff;
    fill: var(--primary-600);
}

.guide-category-name {
    display: flex;
    flex: 1;
    text-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    justify-content: start;
}

.guide-category-name .category-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-900);
    text-align: left;
}

.guide-category-body {
    display: flex;
    gap: 25px;
    align-items: start;
    justify-content: space-between;
    background-color: var(--text-50);
}

.accordion-collapse .guide-category-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-content-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-600);
    text-align: left;
    padding-inline: 20px;
    padding-block: 6px;
}

.category-content-btn {
    padding-block: 5px;
    padding-inline: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.category-add-product-btn {
    padding: 6px 15px;
    background-color: var(--primary-600);
    color: #fff;
    border-radius: 0.6rem;
    font-size: 14px;
    font-weight: 600;
    transition: 0.2s ease-in-out;
    border: none;
}

.category-add-product-btn:hover {
    background-color: var(--primary-700);
}

.category-import-product-btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-700);
    padding: 6px 15px;
    transition: 0.2s ease-in-out;
    border-radius: 0.6rem;
}

.category-import-product-btn:hover {
    background-color: var(--text-100);
    
} 

.guide-category-image-wrapper {
    width: 100px;
    overflow: hidden;
    max-width: 100%;
    box-shadow: 0 2px 4px -1px rgba(7,14,35,.08);
    border-radius: 0.4rem;
    margin-right: 2rem;
}

.guide-category-image-wrapper .guide-category-image {
    object-fit: cover;
    width: 100%;
}

.accordion-button:not(.collapsed) {
    background-color: var(--text-50);
}

.learn-more-btn {
    color: var(--accent-600);
    font-weight: 500;
    font-size: 14px;
    margin-left: 2px;
    cursor: pointer;
}

.learn-more-btn:hover {
    text-decoration: underline;
    text-underline-offset: 0.3rem;
}

.reports {
    margin: 0, 0, 1rem, 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}



.reports>div {
    width: calc(20% - 0.75rem);
}

.reports.reports-analytics>div {
    width: calc(25% - 0.75rem);
}

.stats-block {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.stats-block>div {
    width: 100%;
    /* margin-bottom: 1rem; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}


.stats-block>div:nth-child(1)>div:first-child {
    width: calc(70% - 1rem);
}

.stats-block>div:nth-child(1)>div:last-child {
    width: 30%;
}

.converse-percent {
    font-size: 22px;
    font-weight: 600;

}

.order-badge {
  right: 46%;
  top: 10%;
}

.order-badge-number {
  top: 10%;
  right: 50%;
  transform: translateX(50%);
  font-size: 9px !important;
  color: white !important;
   
}

.converse-stat-div {
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--text-200);
}

.converse-stat-div:last-child {
    border-bottom: none;
}

.converse-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-600);
}

.converse-subtext {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-500);
}

.top-selling {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    width: 70%;
}

.top-selling-header {
    border-top: 1px solid var(--text-100);
    border-bottom: 1px solid var(--text-100);
    padding: 0.5rem 1.25rem;
    display: flex;
    align-items: center;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: var(--text-400);
}

.top-selling-header>div:nth-child(1) {
    width: 60%;
}

.top-selling-header>div:nth-child(2) {
    width: 20%;
}

.top-selling-header>div:nth-child(3) {
    width: 20%;
    justify-content: flex-end;
    display: flex;
}

.top-selling-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-selling-body-item>div {
    display: flex;
    align-items: center;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: var(--text-900);
}

.top-selling-body-item {
    border-bottom: 1px solid var(--text-100);
    padding: 1rem 1.25rem;
    width: 100%;
    display: flex;
    cursor: pointer;
}

.top-selling-body-item:last-child {
    border-bottom: none;
}

.top-selling-body-item>div:nth-child(1) {
    width: 60%;
}

.top-selling-body-item>div:nth-child(2) {
    width: 20%;
    padding-left: 1.8rem;
}

.top-selling-body-item>div:nth-child(3) {
    width: 20%;
    justify-content: flex-end;
}

.list-unstyled.ui-sortable {
  padding-inline-start: 16px !important;
}

.top-selling-body-item-image-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 0.75rem;
    background: var(--text-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-selling-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 0.75rem;
}

.top-selling-body-item-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}



.top-selling-body-item-text div {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    color: var(--text-900);
    margin-bottom: 0.25rem;
}

.top-selling-body-item-text span {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: var(--text-400);
}

@media (max-width: 768px) {
.reports>div:nth-child(1) {
    width: 100%;
}

.get-sup-text {
    display: none;
}

.user-menu-info span {
    display: none;
}

.greeting-message .greeting-title .title {
    font-size: 1.2rem;
}
.greeting-message {
    gap: 0.2rem;
} 


.reports>div {
flex-wrap: wrap;
justify-content: space-between;
width: calc(50% - 0.5rem);
margin-bottom: 1rem;
}

.reports.reports-analytics>div {
    width: calc(50% - 0.5rem);
}

.stats-block>div:nth-child(1)>div:first-child {
    width: 100%;
}

.stats-block>div:nth-child(1)>div:last-child {
    width: 100%;
}

.top-selling {
   
    width: 100%;
}
}

.standard-block {
    padding: 1.2rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 2px 4px -1px rgba(7,14,35,.08), 0px 2px 8px -2px rgba(7,14,35,.05);
    margin: 0 0 1rem 0;
}

button:disabled {
    cursor: not-allowed;
    opacity: .85;
    background-color: var(--text-400) !important;
    color: var(--text-600);
}

.disabled-input {
    background-color: #f2f2f2 !important;
    cursor: not-allowed;
    user-select: none;
}
.standard-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-800);
    margin-bottom: 1rem;
    /* white-space: nowrap; */
}

.standard-block-count {
    display: flex;
    justify-content: space-between;
    padding: 0;
    flex-direction: column;
    
}

.standard-block-count>span {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 29px;
    color: var(--text-800);
    margin-bottom: 1.25rem;
}

.theme-content-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 17px;
    color: var(--text-900);
    margin-bottom: 1.5rem;
}

.theme-content-subtitle {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 17px;
    color: var(--text-500);
    margin-bottom: 1.5rem;
}

.standard-block-indicator {
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    padding: 0.125rem 0.5rem 0.125rem 0;
    width: fit-content;
    background-color: var(--light-orange);
}

.standard-block-indicator span {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 16px;
    padding: 0 0.25rem;
    
}

.dropdown-item {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-600);
}

.color-label {
    border: 1px solid var(--text-200);
    border-radius: 0.5rem;
    padding: 5px;
    margin: 0;
    font-size: 13px;
}

.qr-code-generated {
    margin: 1rem 0.5rem;
    width: 350px;
    border-radius: 0.75rem;
    background-color: #ffe600;
    height: auto;
}

.qr-img-heading {
    width: 100%;
    height: 40px;
    background-color: var(--text-950);
    color: #ffe600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem 0.75rem 0 0;
}

.qr-img-title-div {
    text-align: center;
    margin-top: 10px;
}

.qr-img-title {
    font-weight: 700;
    font-size: 30px;
}

.qr-img-subtitle  {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
}

.qr-img-top {
    width: 300px;
    height: 300px;
}

.black-badge {
    background-color: var(--text-950);
    color: #ffe600 !important;
}

.qr-logo-wrap {
    margin-top: 10px;
    width: 100px;
    height: auto;
    overflow: hidden;
}

.qr-logo-footer {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 1rem ;

}

.store-url-title {
    border-bottom: 1px solid var(--text-100);
    padding: 0.5rem 0.3rem;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-700);
}

.copy-div-icon {
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    border-left: 1px solid var(--text-200);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.copy-div-icon:hover {
    background-color: var(--text-800);
    color: var(--white);
    border-radius: 0 0.5rem 0.5rem 0;
}

.store-url-link {
    border-radius: 0.5rem;
    border: 1px solid var(--text-200);
    padding: 8px;
}

.store-link-text {
    font-size: 12px;
    color: var(--text-400);
}
/* .standard-block-indicator .orange-badge {
    color: var(--dark-orange);
    
}



.standard-block-indicator .green-badge {
    color: var(--dark-green);
    background-color: var(--light-green);
}
.standard-block-indicator .red-badge {
    color: var(--dark-red);
    background-color: var(--light-red);
} */

.tooltip-info-icon {
    margin-left: 5px;
    cursor: pointer;
}

.empty-list-container {
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.empty-list-icon {
    width: 3rem;
    height: 3rem;
    background: var(--secondary-100);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-list-icon>svg {
    color: var(--primary-400);
}

.empty-list-title {
    margin: 1.25rem 0 0.5rem 0;
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: var(--text-800);
}

.empty-list-subtitle {
    text-align: center;
    margin: 0 0 1.25rem 0;
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-500);
}

.button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 1rem;
    text-align: center;
    font-family: "Inter" !important;
    border-radius: 0.5rem;
    font-size: .875rem;
    line-height: 18px;
    box-sizing: border-box;
    user-select: none;
    border: none;
    cursor: pointer;
}


.button.primary-btn {
    color: var(--white);
    background-color:#70a84d !important;
    font-weight: 600;
}
.button.primary-btn:hover {
    color: var(--white);
    background-color: rgb(3 7 18);
    font-weight: 600;
}

.button.light-btn {
    color: var(--text-700);
    background-color: var(--white);
    font-weight: 600;
    border: 1px solid var(--text-600);
}

.button.light-btn:hover {
    color: var(--text-50);
    background-color: var(--text-900);
    font-weight: 600;
    
}

.button.secondary-btn {
    color: var(--text-900);
    background-color: var(--text-100);
}
.button.secondary-btn:hover {
    color: var(--text-900);
    background-color: var(--text-200);
}

.button.danger-btn {
    color: var(--dark-red);
    background-color: var(--white);
    border: 1px solid var(--dark-red);
}

.button.danger-btn:hover {
    background-color: var(--dark-red);
    color: var(--white);
}

.button.withIcon {
    padding: 0 1rem 0 0.75rem;
}

.button.large-btn {
    height: 2.25rem;
}

.button.small-btn {
    height: 1.75rem;
}


.product-title-div h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-900);
}

.product-btn-group {

}

.import-dropdown {
    font-size: 13px;
    border-radius: 0.5rem;
    min-width: 140px;
    z-index: 999;
    top: calc(100% + 0.5rem);
    right: 0;
    background-color: var(--white);
    box-shadow: 0 4px 24px -4px rgba(18,20,23,.08);
    line-height: 1rem;
    color: var(--text-600);
    display: none;
    transition: 0.3s ease-in-out;
}

.import-dropdown li {
    line-height: 1.5;
    padding: 0.4rem 0.6rem;
}
.import-dropdown li:hover {
    background-color: var(--text-50);
}





.qpe-table {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
/* table.dataTable.no-footer {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(7,14,35,.06), 0 2px 8px -1px rgba(7,14,35,.05);
    width: 100%;
    max-width: 100%;
    margin-top: 1rem;
    background-color: var(--white);
} */
table.dataTable tbody tr.odd {
 background-color: var(--white) !important;
}
table.dataTable.display > tbody > tr.odd > .sorting_1 {
    box-shadow: none !important;
}
table.dataTable.display>tbody>tr.odd>* {
    box-shadow: none !important;
}
table.dataTable.display>tbody>tr:hover{
background: var(--text-50);
}
/* table.dataTable.display>tbody>tr.even>*:hover {
    box-shadow: none !important;
} */
table.dataTable>thead>tr {
    background-color: var(--text-50);
}
table.dataTable tbody>tr>td {
    font-size: 12px;
    font-weight: 500;
}
table.dataTable thead>tr>th {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-600);
}
table.dataTable thead>tr>th:last-child {
text-align: right;
}

.table-product-img-wrapper {
    max-width: 50px;
    max-height: 50px;
    overflow: hidden;
}
.table-product-img {
    aspect-ratio: 1;
    width: 50px;
    height: 50px;
    object-fit: cover;
    
}

.table-product-name {
    font-size: 12px;
    text-overflow: ellipsis;
    max-width: 300px;
    display: inline-block;
    color: var(--text-700);
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.table-final-price {
    color: var(--text-800);
}

.table-initial-price {
    color: var(--text-400);
    text-decoration: line-through;
}

.qpe-badge {
    width: fit-content;
    padding-left: 6px;
    padding-right: 6px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-transform: capitalize;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    color: var(--light-green);
}

.qpe-badge.badge-active {
    background-color: var(--light-green);
    color: var(--dark-green);
}

.qpe-badge.badge-draft {
    background-color: var(--light-orange);
    color: var(--dark-orange);
}
.qpe-badge.badge-archived {
    background-color: var(--text-100);
    color: var(--text-800);
}
.qpe-badge.badge-danger {
    background-color: var(--light-red);
    color: var(--dark-red);
}
.eye-icon-wrapper {
    padding: 6px;
    border-radius: 50%;

}

.eye-icon-wrapper:hover, .more-actions:hover {
    background-color: var(--text-100);
    color: var(--text-800);
}

.more-actions {
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
}

.more-actions-dropdown {
    display: flex;
    gap: 10px;
    right: 40px;
    font-size: 13px;
    top: 0;
    min-width: auto;
    width: auto;
    background-color: var(--white);
    box-shadow: 0 1px 3px rgba(7,14,35,.06), 0 2px 8px -1px rgba(7,14,35,.05);
    border-radius: 0.4rem;

   
}

.more-actions-dropdown>li {
    padding: 8px;
    
}

.more-actions-dropdown>li>a {
    color: var(--text-600);
}

.more-actions-dropdown>li>a:hover {
    color: var(--text-900);
}

.more-actions-dropdown>li:hover {
    background-color: var(--text-50);
    
}

.table-delete-btn {
    color: var(--dark-red) !important;
}

.dataTables_length {
    display: none;
}

.dataTables_wrapper {
    padding-block: 15px;
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right;
    position: relative;
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_info {
    margin-top: 1.2rem;
    font-size: 14px;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 1.2rem;
    font-size: 14px;
}



.table-search-input {
    border-radius: 0.4rem !important;
    padding-left: 35px !important;
    font-size: 14px;
}

.table-search-icon {
    position: absolute;
    top: 8px;
    left: 10px;
    cursor: pointer;
}

.back-btn {
    padding: 5px;
    border-radius: 0.5rem;
    cursor: pointer;
}

.back-btn:hover {
    background-color: var(--text-100);
}

.add-pr-content {
    padding: 1.5rem;
}

.quick-nav-div {
    width: 25%;
    background-color: var(--white);
    box-shadow: 0 1px 3px rgba(7,14,35,.06), 0 2px 8px -1px rgba(7,14,35,.05);
    padding: 1rem 1.5rem ;
    /* position: fixed; */
}

.quick-nav-div .quick-nav-heading {
    font-size: 17px;
    font-weight: 600;
    padding: 0.5rem 0 0.7rem 0;
}

.quick-nav-div .quick-nav-list>li {
    padding: 0.7rem 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-600);
    border-bottom: 1px solid var(--text-200);
    cursor: pointer;
}

.quick-nav-div .quick-nav-list>li:hover {
    color: var(--text-400);
}

.quick-nav-div .quick-nav-list>li:last-child {
    border: none;
}

.add-pr-form {
    width: 100%;
}

.add-pr-heading {
    margin-bottom: 1rem;
}

.pr-details-body {
    padding: 10px !important;
}


.ql-toolbar.ql-snow {
    border-radius: 0.5rem;
    font-family: "Inter" !important;
    border: none !important;
}

.ql-container {
    box-sizing: border-box;
    font-family: "Inter" !important;
    font-size: 13px;
    height: 180px;
    margin: 0px;
    position: relative;
    border: none !important;
}

.pr-form-desc {

}

.pr-desc-editor {
    border: 1px solid var(--text-200);
    border-radius: 0.5rem;
}

.desc-label {
    margin-bottom: 0.5rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-800);
}

.form-label {
    
        margin-bottom: 0.75rem;
        font-family: "Inter";
        font-style: normal;
        font-weight: 500;
        font-size: 13px;
        line-height: 17px;
        color: var(--text-500);
        display: flex;
        align-items: center;
}
.input-group-text {
    font-family: "Inter";
        font-style: normal;
        font-weight: 500;
        font-size: 13px;
        color: var(--text-500);
}

.form-control, .form-selects {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-700);
    padding: 0.6rem 0.9rem;
   
}

.form-select {  
    font-size: 14px;
    font-weight: 500;
    color: var(--text-700);
    padding: 0.6rem 0.4rem;

}

.settings-page-footer {
    border-top: 1px solid var(--text-100);
    padding-top: 1rem;
}

.add-pr-heading .add-pr-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-800);
    line-height: 1.6;
}

.add-pr-heading .add-pr-subtitle {
    font-size: 14px;
    color: var(--text-500);
}

.standard-card {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(7,14,35,.06), 0 2px 8px -1px rgba(7,14,35,.05);
    padding: 1rem;
    background-color: var(--white);
}

.mult-select-tag .body {
    min-height: 2rem;
    
}

.mult-select-tag .input {
    margin: 6px 10px;
    font-size: 14px;
    font-family: "Inter" !important;
}

.mult-select-tag .drawer>ul>li {
    font-family: "Inter" !important;
    padding: 0.3rem;
    font-size: 14px;
}

.mult-select-tag button {
    display: grid;
    place-items: center;
}

.sub-cat-select {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--text-100);
    border-radius: 0.3rem;
}


.dropzone {
    min-height: 125px;
    border: 2px dashed var(--text-100);
    border-radius:0.5rem;
    padding: 20px 20px;
}

.dropzone:hover {
  border: 1px dashed var(--text-300);
}

.drp-message {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-700);
}

.drp-message-light {
    font-size: 12px;
    color: var(--text-500);
    font-weight: 500;
}

.dropzone-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-600);
}

.form-switch .form-check-input {
    width: 2.5rem;
    height: 1.5rem;
    margin-left: 0;
}

.pr-price-heading {
    border-bottom: 1px solid var(--text-100);
}

.pr-price-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-800);
}
.pr-price-subtitle {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-400);
}

.prepend-text {
    top: 25%;
    left: 10px;
}

.form-floating>label {
    left: 10px;
}

.pr-add-variant-btn {
    display: grid;
    place-items: center;
}

.variant-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: 1000; 
  }

 
  
  .variant-modal-container {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    width: 550px;
    min-width: 400px;
    min-height: 300px;
    height: auto;
    z-index: 1001; 
    border-radius: 1rem;
  }

  .orders-status-bar  {
    display: flex;
    align-items: center;
    background-color: var(--white);
    border-radius: 0.8rem;
    margin-bottom: 1rem;
   padding: 0.5rem !important;
   gap: 20px;
    
  }

  .or-status-item {
    cursor: pointer;
    min-width: 6.3rem;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-600);
    height: 4rem;
    border-radius: 0.5rem;
    border-right: 1px solid var(--text-100);
  }

  .or-status-item:hover {
    background-color: var(--text-50);
  }

  .or-timing-drp-menu {
    min-width: 12rem;
    background-color: var(--white);
    top: calc(100% - 0.2rem);
    left: 0;
    display: none;
  }

  .or-status-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-700);
  }

  .or-span {
    font-weight: 700;
    font-size: 15px;
  }
  
  @media (max-width: 768px) {
    .variant-modal-container {
      width: 80%;
    }
  }

  .add-variants-select {
    width: 200px;
  }

  .variant-type-names {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-900);
  }

  .var-tags-div {
    margin-top: 10px;
    padding: 4px 6px;
    font-size: 13px;
    border-radius: 2rem;
    display: flex;
    justify-content: center;
    background-color: var(--text-100);
    color: var(--text-600);
    min-width: 60px;
  }

  .form-text {
    font-size: 12px;
    color: var(--text-400);
  }

  .form-check-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-700);
  }
  

  .product-var-value {
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-100);
    background-color: var(--text-700);
    border-radius: 2rem;
  }

  .or-table-id {
    font-weight: 600;
    color: var(--accent-600);
  }

  .back-btn-div {
    border: 2px solid var(--text-200);
    padding: 6px;
    border-radius: 0.4rem;
    
    color: var(--text-500);
  }

  .back-btn-div:hover {
    background-color: var(--text-100);
  }

  .or-details-id {
    font-size: 22px;
    font-weight: 600;
  }

  .or-details-timing {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-500);
  }

  .or-pr-left-section {
    width: 60%;
  }
  .or-pr-img-wrapper {
    
    height: 70px;
    min-width:70px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--text-300);
    border-radius: 0.5rem;
  }

  .or-pr-img {
    object-fit: contain;
    object-position: center;
    aspect-ratio: 1;
    border-radius: 0.5rem;
    width:100%;
    height:100%;
    max-width: 100%;
  }

  .or-img-badge {
    padding: 3px 8px;
    top: -15%;
    right: -16%;
    background-color: var(--text-400);
    border-radius: 50%;
    font-size: 10px;
    color: var(--text-50);
  }

  .or-pr-name {
    font-size: 14px;
    font-weight: normal;
    color: var(--text-800);
    max-width:95%;
  }

  .or-pr-calculate {
    font-size: 14px;
    color: var(--text-600);
  }

  .or-pr-card-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-800);
  }

  .or-pr-final-total {
    font-size: 15px;
    color: var(--text-800);
  }

  .or-pr-body, .or-pr-remarks {
    border-bottom: 1px solid var(--text-100);
  }

  .or-pr-body:last-child {
    border-bottom: none;
  }

  .or-pr-text-div {
    gap: 80px;
  }
  .or-pr-text {
    font-size: 15px;
    color: var(--text-800);
    font-weight: 600;
  }

  .or-pr-subtext {
    font-size: 14px;
    color: var(--text-500);
    font-weight: 500;
  }

  .or-pr-total-amount {
    font-size: 14px;
    color: var(--text-600);
    font-weight: 600;
  }

  .or-pr-right-section {
    width: 40%;
  }

  .no-notes-div {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-500);
  }

  .notes-div {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-700);
    word-wrap: break-word;
  }

  .close-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
  }

  .or-customer-name {
    line-height: 1.7;
    font-size: 16px;
    color: var(--text-800);
    word-wrap: break-word;
    font-weight: 600;
    margin-bottom: 8px;
  }

  .or-customer-orders {
    font-size: 14px;
    color: var(--text-500);
    font-weight: 500;
  }

  .or-pr-card-subtitle {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-700);
  }

  .or-customer-email {
    color: var(--accent-400);
  }

  .or-customer-mobile {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-800);
    margin-top: 8px;
  }

  .no-phone-no {
    font-size: 14px;
    color: var(--text-500);
    font-weight: 500;
  }

  .customer-add-house {
    word-wrap: break-word;
    max-width: 250px;
    line-height: 1.7;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-600);
  }

  .coup-name {
    color: var(--text-700);
    font-weight: 500;
  }

  .coup-subname {
    color: var(--text-400);
    font-weight: 500;
    font-size: 12px;
  }

  .coupon-modal-header {
    border-bottom: 1px solid var(--text-100);
    padding: 0 0 0.8rem 0;
  }

  .coup-badge {
    border-radius: 0.8rem;
    font-size: 12px;
    color: var(--text-600);
    background-color: var(--text-100);
    padding: 0.1rem 0.3rem;
  }

  .coupon-modal-body-item {
    padding: 0.8rem 0.4rem;
    border-bottom: 1px solid var(--text-100);
  }
  .coupon-modal-body-item:last-child {
   
    border-bottom: none;
  }

  .coupon-modal-body-item:hover {
    background-color: var(--text-50);
    border-radius: 0.5rem;
  }

  .coup-preview-header {
    border-bottom: 1px solid var(--text-100);
    padding: 0.7rem 0.3rem;
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-700);
  }

  .empty-img-preview {
    background-color: var(--text-100);
    border-radius: 0.8rem;
    width: 250px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .report-modal-type {
    background: var(--text-50);
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
  }
  .report-modal-type>div {
    display: inline-flex;
    height: 2rem;
    align-items: center;
    justify-content: space-around;
    border-radius: 0.5rem;
    width: 100%;
}

.report-modal-type>div button {
    padding: 0;
    background: rgba(0,0,0,0);
    cursor: pointer;
    height: 100%;
    align-items: center;
    display: flex;
    outline: none;
    width: calc(50% - 0.5rem);
    justify-content: center;
    border: none;
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    color: var(--text-400);
    border-radius: 0.5rem;
}

.report-modal-type>div button.active {
    background: var(--white);
    color: var(--black9);
    box-shadow: 0 2px 8px -1px rgba(7,14,35,.05);
}

.blog-image-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    border-radius: 0.6rem;
    border: 2px solid var(--text-100);
  }

  .upload-btn-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .file-upload-input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

 

  .uploaded-image {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .remove-button {
    display: none;
  }

  .blog-table-img-wrap {
    max-width: 100px;
    max-height: 80px;
    border: 1px solid var(--text-100);
    border-radius: 0.3rem;
  }

  .blog-table-img {
    object-fit: contain;
    width: 100%;
    aspect-ratio: 5/4;
  }

  .blog-table-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-800);
  }

  .blog-table-author {
    color: var(--text-600);
    font-size: 14px;
    font-weight: 500;
  }

  .blog-table-time {
    color: var(--text-400);
    font-weight: 600;
    font-size: 14px;
  }

  .action-btn-group {
    opacity: 0;
  }

  .blog-table-list-item:hover {
    background-color: var(--text-50);
    cursor: pointer;
  }

  .blog-table-list-item:hover .action-btn-group {
    opacity: 1;
  }

  .form-check-input {
    border: 1px solid var(--text-500);
  }

  .form-check-input:checked {
    background-color: var(--primary-400);
    border-color: var(--primary-400);
  }


  .themes-container {
    max-width: 1000px;
    margin: 0 auto;
  }

  .active-theme-container {
    padding: 1rem;
    max-width: 80%;
    margin: 0 auto;
    aspect-ratio: 1.9/1;
    overflow: hidden;
    background-color: #f9f9f9;
    border-radius: 1rem;

  }

  .active-theme-container > img {
    object-fit: cover;
    aspect-ratio: 1.9/1;
  }

  .active-theme-mini-img {
    width: 100px;
    aspect-ratio: 1.5/1;
    overflow: hidden;
    border: 1px solid var(--text-100);
    border-radius: 0.5rem;
    padding: 6px;
  }

  .active-theme-info {
    border-top: 1px solid var(--text-100);
    padding-inline: 15px;
  }

  .active-theme-mini {
    object-fit: contain;
    max-width: 100%;
    width: 100%;
  }

  .active-theme-type {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-600);
  }

  .themes-gallery-grid {
    display: grid;
    grid-template-columns:  repeat(2, 1fr);
    column-gap: 15px;
    row-gap: 20px;
  }
  
  .themes-card {
  
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 12px;
  }

  .theme-card-img-wrap {
    aspect-ratio: 3/2 auto;
    width: 100%;
    padding: 4px;
    max-height: 320px;
    border-radius: 0.6rem;
    overflow: hidden;
    position: relative;
    
  }
  
  .theme-card-img-wrap:hover .theme-card-img {
    animation: scrollImage 30s linear infinite;
  }

  .theme-card-img {
    
    width: 100%;
    border-radius: 0.6rem;
    opacity: .85;
    object-fit: cover;
    height: auto;
    transform: 0.5s ease-in-out;
    
  }

  .theme-img-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s ease-in-out;
  }

  .theme-title-icon {
    width: 50px;
    height: 50px;
    border-radius: 0.5rem;
    background-color: var(--secondary-100);
    color: var(--secondary-500);
  }

  .theme-card-img-wrap:hover .theme-img-overlay {
    opacity: 1;
  }

    .app-filter-btn {
background-color: #fff;
    color: var(--text-600);
    border-radius: 0.4rem;
    border: none;
    height: 2.2rem;
    font-size: 13px;
padding-inline: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
text-transform: capitalize;
  }
  .app-filter-btn:hover {
    background-color: var(--text-900);
    color: var(--text-50);
  }

  .app-filter-btn.active {
    background-color: #222;
    color: var(--text-50);
  }

  .app-search-input {
    border-radius: 0.4rem;
    border: 1px solid var(--text-200);
    height: 2rem;
    font-size: 14px;
    padding-left: 25px;
  }

  .search-icon {
    top: 4px;
    left: 5px;
  }

  .app-inte-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 15px;
    row-gap: 20px;
  }

  .app-inte-name {
    font-size: 15px !important;
    font-weight: 600;
  }

  .app-img-wrapper {
    max-width: 60px;
    height: 60px;
    

  }
  .app-img-wrapper > img {
    max-width: 100%;
    object-fit: cover;
  }

  .app-inte-text {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-size: 13px;
    line-height: 17px;
    color: var(--text-500);
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 7;
    word-wrap: break-word;
    text-overflow: ellipsis;
  }

  .facebook-insta-div, .other-social-div {
    max-width: 960px;
    margin: 0 auto;
  }

  .facebook-insta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
    column-gap: 20px;
  }

  .other-social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    column-gap: 20px;
  }

  .insta-card-img-wrap > img {
    width: 40px;
    height: 40px;
    flex-shrink: 0;

  }

  .insta-card-img-wrap {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .insta-grid-text {
    max-width: 40ch;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 3;
    word-wrap: break-word;
    text-overflow: ellipsis;
  }

  .insta-grid-card {
    padding: 12px;
    border-radius: 0.75rem;
    border: 1px solid var(--text-100);
  }

  .camp-type-img-wrap {
    width: 50px;
    height: 50px;
  }
  .camp-type-img-wrap > img {
    width: 50px;
    height: 50px;
  }

  .create-post-form {
    width: 60%;
  }

  .preview-post-div {
    width: 40%;
    height: fit-content;
  }

  .campaign-type-pills {
    border-bottom: 1px solid var(--text-300);
    padding-bottom: 15px;
  }

  .text-type-form-div {
    padding: 5px 10px;
    border-radius: 0.4rem;
    border:  1px solid var(--text-200);
    cursor: pointer;
    font-size: 15px;
    color: var(--text-800);

  }

  .text-type-form-div.active {
    background-color: var(--text-800);
    color: var(--text-50);

  }
  .switcher {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 1.5rem;
    margin: 0 0 0 1rem;
}

.switcher input {
    display: none;
    position: absolute;
    margin-top: .3rem;
    margin-left: -1.25rem;
    width: 50px;
}

.switcher .switcher-slider {
    background-color: var(--text-100);
    border: none;
    border-radius: 50em;
    font-size: 12px;
    position: relative;
    display: block;
    height: inherit;
    cursor: pointer;
    transition: .15s ease-out;
}

.switcher input:checked+.switcher-slider {
    background-color: var(--primary-600);
    border-color: var(--primary-600);
}

.switcher .switcher-slider:before {
    width: 20px;
    height: 20px;
    top: 2px;
    border-radius: 100%;
    position: absolute;
    left: 2px;
    box-sizing: border-box;
    content: "";
    background-color: var(--white);
    border: 1px solid var(--text-100);
    transition: .15s ease-out;
    box-shadow: 0px 2px 4px rgba(0,0,0,.05);
}

.switcher input:checked+.switcher-slider::before {
    border-color: var(--primary-600);
}
.switcher input:checked~.switcher-slider::before {
    transform: translateX(19px);
}

.switcher-container.withBorder {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--text-100);
}
.switcher-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.switcher-container.withBorder:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.schedule-post-time {
    margin-block: 10px;
    background-color: var(--text-50);
    border-radius: 0.5rem;
}

.preview-header {
    border-bottom: 1px solid var(--text-200);
    padding-bottom: 0.6rem;
}

.preview-fb-img-wrap {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.preview-fb-img-wrap > img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;

}

.preview-heading {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-800);
}

.preview-subtitle {
    color: var(--accent-300) !important;
    max-width: 45ch;
}

.facebook-pre-post-wrapper {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.facebook-pre-post-wrapper > img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.custom-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: 400px;
    max-height: 400px;
    cursor: pointer;
}

.auto-standard-title {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    color: var(--text-700);
    margin-bottom: 1rem;
    white-space: nowrap;
}

.automation-grid {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    row-gap: 30px;
}

.ai-added-pages {
    max-width: 1060px;
    margin: 0 auto;
}

.auto-grid-card {
    cursor: pointer;
}


.ai-active-name {
    font-size: 20px;
    color: var(--text-700);
    font-weight: 600;
}

.ai-added-pages-header, .bot-reply-number > .standard-title {
    border-bottom: 1px solid var(--text-100);
}

.or-left, .or-right {
    width: 48%;
    height: 3px;
    background-color: var(--text-100);
}

.or-div > p {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-500);
}

.ai-img-preview {
    width: 100%;
    max-width: 100%;
    max-height: 350px;
    overflow: hidden;
}

.ai-video-preview {
    width: 100%;
    max-width: 100%;
}

.ai-img-preview > img {
    object-fit: contain;
}

.variation-type {
    padding: 1.2rem;
    border-bottom: 1px solid var(--text-100);
}

.variation-type:last-child {
    border-bottom: none;
}

.var-table-header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
    background-color: var(--text-50);
    border-radius: 0.5rem;
}

.var-table-body {
    display: flex;
    flex-direction: column;
    
    max-height: 400px;
    overflow-y: auto;

}

.var-table-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
    border-bottom: 1px solid var(--text-100);
}

.var-initial, .var-final {
    position: relative;
    width: 140px;
    border: 1px solid var(--text-200);
    border-radius: 0.5rem;
    padding-left: 25px;
}

.var-rupee-sign {
    top: 3px;
    left: 10px;
}


  /* .themes-card {
    background-color: var(--text-50);
    border-radius: 0.5rem;
  } */

@media (min-width: 564px) {
.date-picker-container .date-picker-range ul {
    width: 140px;
}
}


@media (max-width: 768px) {
    .user-menu-dropdown {
    width: 100%;
    top: 100%;
    }

    html body #main-content .app-body>.main .main-container {
        max-width: 1280px;
        width: 100%;
        padding: 0 1rem;
        margin-right: auto;
        margin-left: auto;
        background: var(--text-50);
    }

    .button {
        font-size: 0.8rem;
        padding: 0 0.5rem;
    }


.form-text {
    font-size: 12px;
    color: var(--text-400);
    line-height: 10px;
}

.learn-more-btn {
    font-size: 12px;

}
    .qpe-logo {
        width: 180px;
        max-width: 100%;
        flex-shrink: 0;
    }

    .standard-block {
        padding: 0.8rem;
    }

    .setup-guide-subtitle {
        color: var(--text-500);
        font-size: 10px;
        font-weight: 500;
        text-align: left;
        margin: 0;
    }

    .progress-bar-container { 
        width: 100%;
        margin-top: 15px;
        justify-content: center;
    }

    .date-picker-container {
        width: 100%;
    }

    .date-picker {
        width: 100%;
    }

    .setup-guide-container {
        padding: 15px;
    }

    .category-content-text {
        font-size: 12px;
        padding-inline: 15px;
    }

    .category-add-product-btn {
        font-size: 12px;
        padding: 6px 10px;
    }

    .sidebar-container {
        border-right: none;
    }

    .guide-category-name .category-title {
        font-size: 13px;
    }

    .guide-category-header {
        padding-inline: 10px;
    }

    .screen-header {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }
    
    .notifi-dropdown {
      min-width: 300px;
    }

    .category-import-product-btn {
        font-size: 12px;
    }

    .guide-category-body {
        padding: 10px;
    }

    .category-content-btn {
        gap: 10px;
        padding-inline: 10px;
    }

    


    html body #main-content .app-body>.main {
        margin-left: 0;
    } 

    .themes-gallery-grid { 
        grid-template-columns: 1fr;
    }

    .app-inte-grid {
     
        grid-template-columns: 1fr;
       
      }

      .facebook-insta-grid, .other-social-grid  {
        grid-template-columns: 1fr;
 
      }

      .create-post-form {
        width: 100%;
      }
    
      .preview-post-div {
        width: 100%;
      }

      .automation-grid {
     
        grid-template-columns: 1fr;
     
    }

    .offer-text, .user-menu-info {
        display: none;
    }
}


.tooltip {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 8px;
    font-size: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .invalid-feedback {
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: var(--dark-red);
  }
.highcharts-credits{
display:none !important
}
.gallery-v2 {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1px;
}
.gallery-v2 .gallery {
  flex: 0 0 50%;
  max-width: 50%;
  margin: 0;
  padding: 1px;
}
@media (min-width: 576px) {
  .gallery-v2 .gallery {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }
}
@media (min-width: 768px) {
  .gallery-v2 .gallery {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@media (min-width: 992px) {
  .gallery-v2 .gallery {
    flex: 0 0 12.5%;
    max-width: 12.5%;
  }
}
.gallery-v2 .gallery a {
  display: block;
  transition-property: opacity;
  transition-duration: 50ms;
}
.gallery-v2 .gallery a:hover {
  opacity: 0.75;
}
.ratio-4x3 {
    --bs-aspect-ratio: 75%;
}

.ratio {
    position: relative;
    width: 100%;
}
.or-status-item-active {
    background-color: var(--text-50);
}


/* Works on Chrome, Edge, and Safari */
/* *::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background:inherit;
}

*::-webkit-scrollbar-thumb {
  background-color:var(--text-50);
  border-radius: 20px;
  border: 3px solid var(--text-100);
} */
.table-search-input {
    border-radius: 0.4rem !important;
    padding-left: 35px !important;
    font-size: 14px;
  padding: 0.4rem 0.6rem !important;
  padding-left: 35px !important;
  width: 100%;
}
.table-search-input:hover {
    background-color: var(--text-50);
}
.table-search-input:focus {
    box-shadow: none;
}
.table-search-icon {
    position: absolute;
    top: 8px;
    left: 10px;
    cursor: pointer;
}
.table-sort-button {
    background-color: var(--white);
    padding: 0 0.6rem;
    border: 1px solid var(--text-100);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
.table-sort-button:hover, .table-export-button:hover {
    background-color: var(--text-100);
}
.table-export-button {
    background-color: var(--white);
    padding: 0 0.6rem;
    border: 1px solid var(--text-100);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.filter-tab {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 8px;
    margin-right: 10px;
    font-size: 12px;
  }
  .filter-tab.active {
    background-color: var(--text-100);
  }
  .filter-tab:hover {
    background-color: var(--text-100);
  }
  .dataTables_filter {
    display: none;
  }
.dataTables_scrollHeadInner{
width :100% !important;
}
table.dataTable{
width: 100% !important;
}
table.dataTable.display>tbody>tr.even>.sorting_1{
box-shadow: none;
}
.dataTables_wrapper .dataTables_info {
    font-size: 12px !important;
    color: var(--text-600) !important;
    margin-top: 0.9rem !important;
 }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border-radius: 8px;
    background: #fff !important;
    font-size: 12px;
    color: var(--text-700);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}
/* .text-end{
float: right !important;
} */
.category-header-table{
width: 100%;
font-size: 13px;
font-weight: 500;
color:var(--text-500);
background: var(--text-50);
padding-inline: 20px;
border-bottom: 1px solid var(--text-100);

}

.category-header-table>thead>tr {
  padding-block: 10px;
}
.category-header-table>thead>tr>th {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  line-height: 3;
}

.category-header-table>thead>tr>th:nth-child(1){
width:40%;

}
.category-header-table>thead>tr>th:nth-child(2){
width:20%;
}
.category-header-table>thead>tr>th:nth-child(3){
width:10%;
}
.category-header-table>thead>tr>th:nth-child(4){
width:10%;
}
.category-header-table>thead>tr>th:nth-child(5){
width:10%;
}
.category-header-table>thead>tr>th:nth-child(6){
width:10%;
}
.category-data-table{
width: 100%;
font-size: 12px;
font-weight: 500;
color:var(--text-700);
}
.category-data-table>tbody>td:nth-child(1){
width:40%;

}
.category-data-table>tbody>tr>td:nth-child(2){
width:20%;
}
.category-data-table>tbody>tr>td:nth-child(3){
width:10%;
}
.category-data-table>tbody>tr>td:nth-child(4){
width:10%;
}
.category-data-table>tbody>tr>td:nth-child(5){
width:10%;
padding-right: 0.6rem;
}
.category-data-table>tbody>tr>td:nth-child(6){
width:10%;
}
.cat-img-holder{
padding: 5px;
}
.cat-img-holder img{
width: 40px;
aspect-ratio: 1;
object-fit: cover;
max-width: 100%;
border-radius: 8px;
}
.category-data-table>tbody>tr{
padding-block: 5px;
border-bottom: 1px solid var(--text-200);
cursor: move;
}
.category-data-table>table:last-child>tbody>tr{
border-bottom: none;
}
.media-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 25px;
    column-gap: 20px;
}

.gallery-image-div {
    width: 100%;
    height: 150px;
    border: 1px solid var(--text-100);
    border-radius: .8rem;
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.media-img-name {
    font-size: 13px;
    color: #777777;
    overflow: hidden;
    display: -webkit-box;
    max-width: 20ch;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    padding: 5px;
}

.gallery-image-div img {
    width: 100%;
    max-width: 100%;
    object-fit: contain;
    height: 100%;
}

.gallery-image-div:hover .gallery-image-overlay {
    opacity: 1;
    visibility: visible;
}

.gallery-image-overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.05);
    width: 100%;
    height: 100%;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}



.addImg-dropzone-label {
    border: 2px dashed #888888;
    border-radius: 2rem;
    margin-top: 1rem;
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.05);
    transition: all 0.4s ease;
    height: 250px;

}

.addImg-dropzone-label:hover {
    background-color: rgba(128, 128, 128, 0.10);
}

.addImg-svg {
    padding-top: 20px;
    padding-bottom: 24px;
}

.addImg-svg svg {
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
    color: var(--text-500);
}

.addImg-pone {
    color: var(--text-500);
    font-size: 14px;
    margin-bottom: 8px;
}

.addImg-ptwo {
    color: var(--text-500);
    font-size: 13px;

}

.img-prev-container {
    width: 70%;
}

.img-prev-details {
    width: 30%;
    font-size: 12px;
    border-left: 1px solid;
}

.img-prev-wrap {
    max-height: 500px;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.img-prev-container {
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.img-prev-wrap img {
    height: 100%;
    object-fit: contain;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {

    .img-prev-container {
        width: 100%;
    }

    .img-prev-details {
        width: 100%;
    }

    .media-gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
        column-gap: 15px;
    }

}
.product-img-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border: 1px dashed var(--text-500);
    border-radius: 8px;
    width: 100%;
    max-width: 120px;
    height: 120px;
    cursor: pointer;
    transition: all 0.4s ease;
    background-color: white;
}

.product-img-button:hover {
    border: 1.5px dashed var(--text-800);
}

.img-upload-container {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    max-width: 100%;
    padding-bottom: 15px;
}

.img-upload-container::-webkit-scrollbar {
    width: 4px;
    /* width of the scrollbar */
    height: 5px;
}

.img-upload-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* color of the track */
}

.img-upload-container::-webkit-scrollbar-thumb {
    background: #888;
    /* color of the thumb */
    border-radius: 5px;
    /* roundness of the thumb */
}

.img-upload-container::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* color of the thumb on hover */
}

.single-uploaded-img {
    width: 120px;
    max-width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s ease;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    flex-shrink: 0;
}

@keyframes scrollImage {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3000px);
  }
}

.single-uploaded-img img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

.single-img-overlay {
    inset: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    padding: 10px;
    cursor: grab;
    opacity: 0;
    visibility: hidden;
}

.single-img-overlay svg {
    cursor: pointer;
}

.single-uploaded-img:hover .single-img-overlay {
    opacity: 1;
    visibility: visible;
}
/* .active{
background:var(--text-100);
border-radius:8px;
} */

.nav-link.text-active-primary.active {
  background-color: var(--text-800);
  color: #fff !important;
  border-radius: 10px;
}

@keyframes scrollImage {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3000px); 
  }
}

input:disabled {
    background-color: #f0f0f0;
    color: #999;            
    border: 1px solid #ccc; 
    cursor: not-allowed;    
    opacity: 0.5;     
}

input:disabled::placeholder {
    color: #bbb;      
}