:root {
      /* color variables */
    --color-primary  : #6C6CFF;
    --color-secondary: #FEAD01;
    --color-tertiary : #070707;
    
    --color-primary-hover: #4D4DFF;

    --color-negative      : #FF2F54;
    --color-positive      : #62C55A;
    --color-positive-hover: #289720;
    --color-reject        : #FF6200;
    --color-deactive      : #494949;
    --color-warning       : #FF6F00;

    --color-blue-dark: #0A0D14;
    --color-sky      : #5CADFF;
    --color-orchid   : #A367F0;
    --color-mint     : #52D47F;
    --color-lime     : #94C752;
    --color-pink     : #ff176b;
    --color-indigo   : #292461;
    --color-gray     : #F6F8FA;

    --color-base-one  : #ffffff;
    --color-base-two  : #E7E7FF;
    --color-base-three: #F4F4FF;

    --color-text-dark   : #07050b;
    --color-text-medium : #343A46;
    --color-text-light  : #6B677A;
    --color-text-reverse: #ffffff;
    --color-text-body   : #87858d;

    --color-border-primary  : #E2E4E9;
    --color-border-secondary: #DCDCEE;
    --color-border-tertiary : #D5D5FA;
    --color-border-light    : #eeeeee;

    --color-shadow-primary : rgba(78, 46, 206, 0.16);
    --color-shadow-dark    : rgba(78, 46, 206, 0.40);
    --color-shadow-tertiary: rgba(7, 7, 7, 0.5);

      /* color lighter */
    --color-primary-lighter  : rgb(108, 108, 255, 0.1);
    --color-secondary-lighter: rgb(254, 173, 1, 0.1);
    --color-sky-lighter      : rgb(92, 173, 255, 0.1);
    --color-orchid-lighter   : rgb(163, 103, 240, 0.1);
    --color-mint-lighter     : rgb(82, 212, 127, 0.1);
    --color-lime-lighter     : rgb(148, 199, 82, 0.1);
    --color-text-lighter     : rgb(107, 103, 122, 0.1);

      /* border_variables */
    --border-radius-xl : 16px;
    --border-radius-lg : 12px;
    --border-radius-md : 8px;
    --border-radius-smd: 6px;
    --border-radius-sm : 4px;

       /* button_variables */
    --btn-font-size  : 14px;
    --btn-font-weight: 500;
      /* --btn-line-height: 1.429em; */
    --btn-line-height       : 1.15em;
    --btn-vertical-padding  : 10px;
    --btn-horizontal-padding: 20px;

       /* animation_variables */
    --transition-md: 0.3s;

      /* typography_variables */
    --body-font-family: 'Inter', sans-serif;

    --font-weight-bold   : 600;
    --font-weight-medium : 500;
    --font-weight-regular: 400;
}

 
 /* Tab Style Compatibility With Dokan Plugin*/
 .wsx-tab-container {
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 4px;
    background-color: var(--color-base-two);
    border-radius: var(--border-radius-md);
}
.wsx-tab-container-secondary {
    display: flex;
    width: fit-content;
    gap: 40px;
    background-color: var(--color-base-two);
    width: 100%;
    padding: 0 32px;
    box-sizing: border-box;
}
.wsx-tab-container-secondary .wsx-tab-item {
    border-radius: 0;
    padding: 20px 0;
}
.wsx-tab-container-secondary .wsx-tab-item.active {
    color: var(--color-primary);
    background-color: transparent;
    border-bottom: 2px solid currentColor;
    padding-bottom: 18px;
}
.wsx-tab-item {
    padding: 6px 16px;
    border-radius: calc(var(--border-radius-md) - 2px);
    color: var(--color-text-medium);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
.wsx-tab-item.active {
    background-color: #ffffff;
}

 /* Dynamic Rules Search Compatibility With Dokan Plugin*/
.wsx-input-wrapper-with-icon {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    color: var(--color-text-light);
    cursor: pointer;
}
.wsx-input-wrapper-with-icon .wsx-icon {
    padding: 10px;
    transition: all var(--transition-md);
}
.wsx-input-wrapper-with-icon .wsx-icon.wsx-icon-left {
    border-right: 1px solid var(--color-border-secondary);
}
.wsx-input-wrapper-with-icon .wsx-icon.wsx-icon-right {
    border-left: 1px solid var(--color-border-secondary);
}
.wsx-input-wrapper-with-icon.active {
    position: relative;
}
.wsx-input-wrapper-with-icon.active .wsx-input-inner-wrapper svg {
    transform: rotate(180deg);
}
.post-type-wsx_conversation #titlediv #title,
.wsx-input-wrapper-with-icon input[type=text],
.wsx-input-wrapper-with-icon input:focus[type=text] {
    outline: none;
    border: none;
    box-shadow: none;
    background: transparent;
    min-width: 100px;
    min-height: 38px;
}




.wsx-btn-toggle-wrapper {
    overflow: hidden;
    position: relative;
    
}
.wsx-btn-toggle-container {
    display: flex;
    align-items: stretch;
    background-color: var(--color-base-two);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border-secondary);
    width: fit-content;
    height: 38px;
}
.wsx-btn-toggle-wrapper::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 38px;
    left: 50%;
    top: 0px;
    border-radius: var(--border-radius-md);
    background: #ffffff;
    transition: all var(--transition-md);
    border: 1px solid var(--color-primary);
}
.wsx-btn-toggle-wrapper.active::before {
    left: 0px;
}
.wsx-btn-toggle-container .wsx-w-fit {
    height: 100%;
}
.wsx-btn-toggle-item {
    width: 66px;
    height: 100%;
    padding: 0 10px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-body);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wsx-btn-toggle-item.active {
    color: var(--color-text-medium);
}
.wsx-btn-toggle-show {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 10px;
    border-radius: var(--border-radius-lg);
    background-color: var(--color-base-two);
    color: var(--color-primary);
    cursor: pointer;
    transition: all var(--transition-md);
}
.wsx-btn-toggle-show .wsx-icon {
    transition: all var(--transition-md);
}
.wsx-btn-toggle-show.active .wsx-icon {
    transform: rotate(180deg);
}

.wsx-btn-toggle-show:hover {
    background-color: #D5D5FA;
}
.wsx-btn-toggle-show.active,
.wsx-migration-tool-btn,
a.wsx-migration-tool-btn,
a.wsx-migration-tool-btn:hover,
a.wsx-migration-tool-btn:focus {
    background-color: var(--color-primary);
    color: var(--color-text-reverse);
}


/* Accordion Style */
.wsx-accordion-wrapper {
    background-color: #F6F8FA;
    border-radius: 8px;
    border: 1px solid #E2E4E9;
}
.woocommerce_options_panel .wsx-accordion-wrapper input[type=number].wsx-input,
.wsx-accordion-wrapper input.wsx-input,
.wsx-accordion-wrapper select.wsx-select {
    background-color: #ffffff;
}
.wsx-accordion-wrapper .wsx-input-label {
    color: var(--color-text-medium);
}
.wsx-accordion-wrapper-profile .wsx-tier-wrapper {
    display: grid;
    grid-template-columns: 1.5fr repeat(2, minmax(144PX, .8fr)) 2.5fr 40px;
    gap: 24px;
    align-items: end;
}
.wsx-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 24px;
    cursor: pointer;
}
.wsx-accordion-header .wsx-icon {
    color: var(--color-tertiary);
}
.wsx-accordion-header .wsx-icon svg {
    transition: all 0.3s;
}
.wsx-accordion-header .wsx-icon.active svg {
    transform: rotate(180deg);
}
.wsx-accordion-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--color-text-medium);
}
.wsx-accordion-body {
    padding: 32px 24px;
    border-top: 1px solid #E2E4E9;
}
.wsx-accordion-wrapper-dynamic {
    display: grid;
    gap: 24px;
}
.wsx-accordion-wrapper-dynamic .wsx-switch-field-wrapper,
.wsx-accordion-wrapper-dynamic .wsx-slider-wrapper {
    display: flex;
    align-items: center;
    max-height: 40px;
    height: 100%;
}

.wsx-switch-field-wrapper .wsx-checkbox-option-wrapper {
    margin-right: 16px;
}

.wsx-select-wrapper {
    position: relative;
}
.wsx-select-wrapper .wsx-input-inner-wrapper {
    position: relative;
    background-color: #ffffff;
}
.wsx-select,
select.wsx-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
    cursor: pointer;
    width: fill-available;
    width: -webkit-fill-available;
}
.wsx-select-value {
    max-width: 80%;
}
.wsx-select .wsx-icon {
    transition: all var(--transition-md);
}
.wsx-option-container {
    min-width: max-content;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 60vh;
    box-shadow: 0 2px 4px 0 var(--color-shadow-primary);
    background-color: #ffffff;
    position: absolute;
    transition: opacity var(--transition-md) ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wsx-option-item {
    padding: 7px 8px;
    cursor: pointer;
    color: var(--color-text-light);
}
.wsx-option-item-container {
    padding: 0px 8px;
    color: var(--color-text-body);
}
.wsx-option-item-container .wsx-option-item {
    padding-left: 16px;
}
.wsx-option-item:last-child {
    border-bottom: 0;
}
.wsx-option-item:hover,
.wsx-option-item.active  {
    background-color: var(--color-base-three);
    color: var(--color-text-medium);
}


/* Slider */
.wsx-slider-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: left var(--transition-md) ease;
}
.wsx-slider.active .wsx-slider-thumb {
    left: 22px;
}
.wsx-slider-md .wsx-slider-track {
    width: 40px;
    height: 20px;
}
.wsx-slider-md .wsx-slider-thumb {
    width: 16px;
    height: 16px;
    left: 2px;
}
.wsx-slider-md .wsx-slider.active .wsx-slider-thumb {
    left: 22px;
}
.wsx-slider-sm .wsx-slider-track {
    width: 28px;
    height: 16px;
}
.wsx-slider-sm .wsx-slider-thumb {
    width: 12px;
    height: 12px;
    left: 2px;
}
.wsx-slider-sm .wsx-slider.active .wsx-slider-thumb {
    left: 14px;
}

/* WholesaleX Tab */
#wsx_tab_data {
    padding: 32px;
}

.wsx-choose-box-options {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 8px;
    margin-bottom: 40px;
}
.wsx-choose-box-options label.wsx-label {
    padding: 10px !important;
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-sm);
    margin: 0px !important;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wsx-choose-box-options input[type=radio] {
    position: absolute;
    opacity: 0;
}
.wsx-choose-box-image {
    max-width: 100%;
    height: auto;
}
.wsx-choose-box-options label#choose-box-selected {
    border-color: var(--color-primary);
}
.wsx-visibility-select-options {
    display: flex;
    gap: 4px;
}
.wsx-visibility-select-options .wsx-input-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
    flex-basis: 50%;
}
.wsx-visibility-select-options .wsx-multiselect-wrapper {
    flex-basis: 50%;
}

.wsx-visibility-slider-fields {
    margin-bottom: 32px;
}
.wsx-visibility-slider-fields .wsx-slider-wrapper {
    margin-bottom: 16px;
}
.wsx-visibility-slider-fields .wsx-slider-wrapper:last-child {
    margin-bottom: 0px;
}
.wsx-gap-8 {
    gap: 8px;
}
.wsx-slider-content .wsx-input-label {
    margin-left: 8px;
    margin-right: 8px;
}

/* Conversation Table */
.wsx-lists-table {
    width: 100%;
    overflow-y: auto;
    border-spacing: 0;
    border-collapse: collapse;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 0px 4px 0 rgba(78, 46, 206, 0.16);
}
table.wsx-lists-table td {
    border: 0;
}
.wsx-flex-wrap {
    flex-wrap: nowrap;
}

/* Header style */
.wsx-header-wrapper {
    background: var(--color-base-one);
}
.wsx-header {
    display: none;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}
.wsx-header-content {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-left: 1px solid var(--color-border-primary);
    border-left: 1px solid var(--color-border-primary);
    padding: 16px 0 16px 40px;
    margin-left: 24px;
}
.wsx-header-content .wsx-btn-group .wsx-dropdown .wsx-icon svg {
    width: 30px;
    height: 30px;
}
.wsx-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
}
.wsx-logo img {
    width: 136px;
}
.wsx-version {
    font-size: 12px;
    color: var(--color-primary);
    line-height: 16px;
    font-weight: var(--font-weight-medium);
    padding: 2px 10px;
    border: 1px solid currentColor;
    border-radius: 40px;
}

.wsx-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    width: 100%;
}
.wsx-menu.wsx-scrollbar {
    overflow-y: auto;
    height: 70vh;
}
.wxs-menu-item {
    transition: all var(--transition-md) ease;
}
.wsx-nav-link {
    color: var(--color-tertiary);
    font-weight: var(--font-weight-medium);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}
.wsx-nav-link:hover, .wsx-nav-link.active {
    color: var(--color-primary);
}
.wsx-header-side-menu {
    position: fixed;
    top: 0px;
    padding-top: 70px;
}
.wsx-hamburger-icon {
    margin-left: 20px;
}
.wsx-dropdown.active .wsx-hamburger-icon {
    position: fixed;
    z-index: 99;
}

/* Accordion Style */
.wsx-accordion-wrapper {
    background-color: #F6F8FA;
    border-radius: 8px;
    border: 1px solid #E2E4E9;
}
.woocommerce_options_panel .wsx-accordion-wrapper input[type=number].wsx-input,
.wsx-accordion-wrapper input.wsx-input,
.wsx-accordion-wrapper select.wsx-select {
    background-color: #ffffff;
}
.wsx-accordion-wrapper .wsx-input-label {
    color: var(--color-text-medium);
}
.wsx-accordion-wrapper-profile .wsx-tier-wrapper {
    display: grid;
    grid-template-columns: 1.5fr repeat(2, minmax(144PX, .8fr)) 2.5fr 40px;
    gap: 24px;
    align-items: end;
}
.wsx-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 24px;
    cursor: pointer;
}
.wsx-accordion-header .wsx-icon {
    color: var(--color-tertiary);
}
.wsx-accordion-header .wsx-icon svg {
    transition: all 0.3s;
}
.wsx-accordion-header .wsx-icon.active svg {
    transform: rotate(180deg);
}
.wsx-accordion-title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--color-text-medium);
}
.wsx-accordion-body {
    padding: 32px 24px;
    border-top: 1px solid #E2E4E9;
}
.wsx-accordion-wrapper-dynamic {
    display: grid;
    gap: 24px;
}
.wsx-accordion-wrapper-dynamic .wsx-switch-field-wrapper,
.wsx-accordion-wrapper-dynamic .wsx-slider-wrapper {
    display: flex;
    align-items: center;
    max-height: 40px;
    height: 100%;
}

.wsx-switch-field-wrapper .wsx-checkbox-option-wrapper {
    margin-right: 16px;
}

.wsx-select-wrapper {
    position: relative;
}
.wsx-select-wrapper .wsx-input-inner-wrapper {
    position: relative;
    background-color: #ffffff;
}
.wsx-select,
select.wsx-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 20px;
    cursor: pointer;
    width: fill-available;
    width: -webkit-fill-available;
}
.wsx-select-value {
    max-width: 80%;
}
.wsx-select .wsx-icon {
    transition: all var(--transition-md);
}
.wsx-option-container {
    min-width: max-content;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 60vh;
    box-shadow: 0 2px 4px 0 var(--color-shadow-primary);
    background-color: #ffffff;
    position: absolute;
    transition: opacity var(--transition-md) ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wsx-option-item {
    padding: 7px 8px;
    cursor: pointer;
    color: var(--color-text-light);
}
.wsx-option-item-container {
    padding: 0px 8px;
    color: var(--color-text-body);
}
.wsx-option-item-container .wsx-option-item {
    padding-left: 16px;
}
.wsx-option-item:last-child {
    border-bottom: 0;
}
.wsx-option-item:hover,
.wsx-option-item.active  {
    background-color: var(--color-base-three);
    color: var(--color-text-medium);
}



.wsx-single-product-settings-wrapper .wsx-tier-wrapper{
   
}

.wsx-accordion-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 24px;
    cursor: pointer;
}
section .wsx-input-label {
    margin-bottom: 8px;
    display: block;
}
.wsx-role-based-prices-section {
    margin-bottom: 32px;
}
.wsx-font-18 {
    font-size: 18px;
    margin: 24px 0;
}
.wsx-slider, label.wsx-slider {
    display: flex !important;
    align-items: center;
    cursor: pointer;
}

.wsx-radio-field-options.wsx-radio-flex {
    display: flex !important;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.dokan-form-group .wsx-single-product-settings-wrapper .wsx-tier-wrapper {
    border-bottom: 0px !important;
}

.dokan-form-group .wsx-tier-price-table-wrapper select.wsx-tier-table-select {
    background-color: #ffffff;
}