/* ================================================
IMPORTS
================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css');

/* ================================================
VARIABLES
================================================ */
:root {
/* Font */
--font-family: "Inter", Arial, sans-serif;
--font-size-base: 16px;
--font-size-sm: 14px;
--font-size-exsm: 12px;
--font-size-lg: 18px;
--line-height: 1.4;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;

/* Colors */
--color-body-bg: #f1f1f1;
--color-surface: #ffffff;
--color-border: #e5e7eb;
--color-text: #1f2937;
--color-text-light: #6b7280;
--color-heading: #303030;
--color-link: #303030;

/* Dark Mode / Header */
--color-header-bg: #1c1c1c;
--color-header-surface: #303030;
--color-header-text: #e3e3e3;
--color-header-accent: #4a4a4a;

/* Primary */
--color-primary: #303030;
--color-primary-dark: #1c1c1c;
--color-hover: #f3f4f6;

/* Status Colors */
--status-paid-bg: rgba(0, 0, 0, 0.06);
--status-paid-text: rgb(97, 97, 97);
--status-unfulfilled-bg: rgb(255, 235, 120);
--status-unfulfilled-text: rgb(79, 71, 0);

/* Tags */
--tag-bg: #e3e3e3;
--tag-text: #303030;

/* Misc */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ================================================
RESET & BASE
================================================ */
* {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
font-family: var(--font-family);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height);
background: var(--color-body-bg);
color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
color: var(--color-heading);
}

p {
margin: 0;
}

.text-right {
text-align: right;
}

.text-left {
text-align: left;
}

a {
text-decoration: none;
color: var(--color-link);
transition: all 0.3s ease-in-out;
}

/* ================================================
DASHBOARD HEADER
================================================ */
.dashbr-topbar {
background-color: var(--color-header-bg);
padding: 10px 0;
position: fixed;
width: 100%;
z-index: 2;
top: 0;
left: 0;
}

.header-inr {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 0 30px;
}

.header-logo a {
display: inline-block;
color: #ffffff;
}

.header-center {
width: calc(100% - 480px);
max-width: 500px;
}

.header-searchbar {
position: relative;
}

.header-searchbar input[type="text"] {
width: 100%;
display: block;
padding: 10px 15px 10px 45px;
border-radius: var(--radius-md);
border: none;
outline: none;
font-size: var(--font-size-sm);
background-color: var(--color-header-surface);
color: var(--color-header-text);
}

.header-searchbar .fa.fa-search {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 12px;
color: var(--color-header-text);
}

.ls-topbar>ul>li>ul {
padding-left: 10px;
}

.ls-topbar>ul>li>ul>li>a {
gap: 3px;
}

.header-rsinr {
display: flex;
flex-wrap: wrap;
gap: 13px;
align-items: center;
justify-content: flex-end;
}

.header-noti {
height: 40px;
width: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-header-surface);
cursor: pointer;
color: var(--color-header-text);
}

.header-profile {
display: flex;
align-items: center;
gap: 7px;
background-color: var(--color-header-surface);
padding: 6px 12px;
border-radius: var(--radius-lg);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
cursor: pointer;
color: var(--color-header-text);
}

.header-profile i.fa.fa-user {
height: 30px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-header-accent);
border-radius: 50%;
}

.mob-menu {
display: none;
}

/* ================================================
MAIN BANNER LAYOUT
================================================ */
.dbbanner-section {
margin-top: 62px;
height: calc(100vh - 62px);
}

.dbbanner-inr {
display: flex;
flex-wrap: wrap;
height: 100%;
}

.dbbannerleft {
width: 250px;
background-color: #ebebeb;
padding: 15px;
height: 100%;
overflow: auto;
}

.dbbanner-rht {width: calc(100% - 250px);padding: 10px 20px 10px 10px;height: 100%;max-width: 100%;margin: 0 0 0 auto;}

.ls-topbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}

.ls-topbar ul li a {
display: flex;
align-items: center;
gap: 8px;
padding: 5px;
font-size: var(--font-size-sm);
color: var(--color-text);
border-radius: var(--radius-sm);
}

.ls-topbar ul li a:hover {
background-color: var(--color-hover);
}

.db-heading {
display: flex;
align-items: center;
gap: 5px;
}

.db-heading h1 {
font-size: 20px;
line-height: 1.2;
}

/* ================================================
DASHBOARD CONTENT (SUMMARY, TABLE, FILTERS, PAGINATION)
================================================ */


/* Header */

.btn {
padding: 6px 12px;
font-size: var(--font-size-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
cursor: pointer;
}

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

.btn.primary {
background: var(--color-primary);
color: var(--color-surface);
border: none;
}

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

.btn.dropdown i {
margin-left: 6px;
font-size: 12px;
}

.dashboard-card {
padding: 24px;
left: 250px;
position: relative;
}
/* Summary Cards */
.summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
border-bottom: 1px solid var(--color-border);
}

.card {
padding: 16px;
border-left: 1px solid var(--color-border);
}

.card:first-child {
border-left: none;
}

.label {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}

.value {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--color-text);
}

.value .sub {
font-size: 13px;
font-weight: var(--font-weight-normal);
color: var(--color-text-light);
}

.progress {
margin-top: 8px;
background: var(--color-border);
height: 6px;
border-radius: var(--radius-sm);
overflow: hidden;
}

.progress .bar {
height: 100%;
background: var(--color-primary);
}

/* Filters */
.filters {
display: flex;
justify-content: space-between;
}

.filter-tabs {
display: flex;
gap: 8px;
}

.tab {
cursor: pointer;
}

.tab:hover {
background: var(--color-hover);
}

.filter-actions {
display: flex;
gap: 6px;
}

.icon-btn {
width: 32px;
height: 32px;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
background: transparent;
}

.icon-btn:hover {
background: var(--color-border);
}

.summary {
padding: 5px 0;
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 7px;
}

/* Table */
.table-wrapper {
overflow-x: auto;
}

.orders-table {
width: 100%;
overflow-x: auto;
}

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

.status {
padding: 2px 6px;
border-radius: var(--radius-md);
font-size: 12px;
font-weight: var(--font-weight-medium);
}

.tabs-heading {
display: flex;
align-items: center;
gap: 5px;
}

.status.paid {
background: var(--status-paid-bg);
color: var(--status-paid-text);
}

.status.unfulfilled {
background: var(--status-unfulfilled-bg);
color: var(--status-unfulfilled-text);
}

.tag {
display: inline-block;
padding: 2px 6px;
margin-right: 4px;
background: var(--tag-bg);
color: var(--tag-text);
border-radius: var(--radius-md);
font-size: 12px;
}

input[type="checkbox"] {
margin: 0;
}

/* Pagination */
.pagination {
display: flex;
align-items: center;
padding: 12px 0 5px;
gap: 12px;
font-size: var(--font-size-sm);
color: var(--color-text-light);
background-color: var(--color-surface);
position: sticky;
bottom: -10px;
}

.pagination button {
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: var(--radius-md);
cursor: pointer;
}

.pagination button:hover:not([disabled]) {
background: var(--color-border);
}

.pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}


.header-profile {
position: relative;
}

.header-profile ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
top: 100%;
background-color: var(--color-surface);
width: max-content;
right: 0;
padding: 8px 5px;
border-radius: 6px;
margin-top: 5px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
transition: all ease .3s;
visibility: hidden;
opacity: 0;
min-width: 100%;
}

.header-profile ul li a {
padding: 5px 10px;
display: block;
border-radius: 5px;
}

.header-profile:hover ul {
visibility: visible;
opacity: 1;
}

.header-profile ul li+li {
margin-top: 2px;
}

.header-profile ul li a:hover {
background-color: var(--color-body-bg);
}

#options-container .card.p-3.mb-3 {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

div#options-container .card {
margin-top: 1px;
}

.buttons.mt-3 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

div#options-container {
margin-bottom: 15px;
}

.variant-options.orders-table {
min-width: auto;
text-align: left;
}

.variant-options td {
width: 30%;
}

.variant-options td:first-child,
.variant-options th:first-child {
width: 40%;
text-align: left;
}

.variant-options td:last-child {
width: 20%;
}


.variant-options.orders-table {
padding-top: 20px;
}

@media (max-width: 768px) {

.mob-menu {
color: #fff;
display: inline-block;
margin-right: 5px;
cursor: pointer;
}

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

.header-inr {
padding: 0 15px;
}

.header-logo {
width: auto;
}

.header-logo,
.header-rht {
width: auto;
}



.header-profile>span,
i.fa.fa-caret-down {
display: none;
}


.header-profile i.fa.fa-user {
height: 40px;
width: 40px;
}

.header-profile {
padding: 0;
background: transparent;
}

.header-rsinr {
gap: 10px;
}

.header-icon {
display: none;
}

.header-center {
width: calc(100% - 150px);
}

.header-inr {
gap: 10px;
}

.dbbannerleft {
display: none;
}

.dbbanner-rht {
width: 100%;
padding: 15px;
}

.con-header {
flex-wrap: wrap;
row-gap: 10px;
padding-top: 0;
}

.filters {
flex-wrap: wrap;
}

.filter-tabs {
flex-wrap: wrap;
}

.pagination {
bottom: -15px;
}

.dbbannerleft {
position: absolute;
display: none;
z-index: 2;
top: 60px;
left: 0;
height: calc(100vh - 60px);
}

}

/* PRODUCT FORM STYLES (scoped under .product-form) */
.height100 {
height: calc(100vh - 62px);
overflow: auto;
}

.product-form {
max-width: 1080px;
margin: 0 auto;
padding: 20px;
}

.product-form h2 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
margin-bottom: 16px;
color: var(--color-heading);
}

.product-form .form-group {
margin-bottom: 16px;
}

.product-form label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
display: block;
margin-bottom: 6px;
color: var(--color-text);
}

.product-form input[type="text"],
.product-form input[type="number"],
.product-form textarea,
.product-form select {
width: 100%;
padding: 8px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
background: var(--color-surface);
color: var(--color-text);
}

.product-form textarea {
min-height: 100px;
resize: vertical;
}

.product-form .media-upload {
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
padding: 20px;
text-align: center;
color: var(--color-text-light);
margin-bottom: 1rem;
font-size: var(--font-size-sm);
}

.product-form .pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}

.product-form .checkbox {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0;
font-size: var(--font-size-sm);
color: var(--color-text);
}

.product-form .btn-submit {
background: var(--color-primary);
color: #fff;
border: none;
padding: 12px 20px;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
cursor: pointer;
margin-top: 1rem;
}

.product-form .btn-submit:hover {
background: var(--color-primary-dark);
}

.product-form .media-upload {
border: 2px dashed var(--color-border);
border-radius: var(--radius-md);
padding: 30px 20px;
text-align: center;
color: var(--color-text-light);
font-size: var(--font-size-sm);
cursor: pointer;
position: relative;
transition: border-color 0.2s ease;
}

.product-form .media-upload:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}

.product-form .media-upload input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}

.product-form .media-upload span {
pointer-events: none;
}


.page-header {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 20px;
}

.page-header .page-icon a {
background: transparent;
border-radius: var(--radius-md);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}

.page-header .page-icon a:hover {
background: var(--status-paid-bg);
}

.page-header .page-icon i {
font-size: 14px;
color: var(--color-text-light);
}

.page-header h2 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
color: var(--color-heading);
margin: 0;
}

span.right-icon {
font-size: 10px;
display: block;
}

.formfields-list {
background: var(--color-surface);
padding: 20px;
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}

.formfields-list+.formfields-list {
margin-top: 20px;
}

.product-form-inner {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}

.product-form-left {
width: 70%;
padding: 0 10px;
}

.product-form-right {
width: 30%;
padding: 0 10px;
}

.form-btn {
padding: 0 10px;
margin-top: 9px;
}

@media (max-width: 768px) {
.product-form {
padding: 15px;
}

.product-form h2 {
font-size: 16px;
}

.product-form-left,
.product-form-right {
width: 100%;
}

.product-form-right {
padding-top: 20px;
}
}


/* ============================================================================================ */
/* category */
.dbbnr-right {font-family: "Lexend", sans-serif;padding: 24px;background-color: #FFFFFF;}
.table-inr {padding: 12px 18px;border: 1px solid #DEDEDF;border-radius: 16px;display: flex;flex-wrap: wrap;}
.table-col {width: 25%;padding: 0 15px;}
.table-tl span {line-height: 0;}
.table-tl {display: inline-flex;align-items: center;gap: 10px;font-size: 16px;line-height: 1.5;font-weight: 500;color: #1E253F;}
.table-md {padding-top: 16px;display: flex;align-items: flex-end;flex-wrap: wrap;gap: 8px;}
.table-price {font-size: 32px;font-weight: 700;color: #1E253F;line-height: 1.25;}
.table-perc {display: inline-flex;align-items: center;border: 1px solid #DEDEDF;padding: 4px 6px;border-radius: 8px;gap: 4px;font-size: 16px;line-height: 1.5;color: #1E253F;}
.table-perc span {line-height: 0;}
.table-btm {padding-top: 4px;}
.table-duration {color: #575757;font-size: 14px;line-height: 1.57;}
.table-col + .table-col {border-left: 1px solid #DEDEDF;}
.con-header {padding: 24px 0 16px;display: block;}
.tabs-heading {display: block;}
.tabs-heading h1 {color: #1E253F;font-weight: 500;font-size: 20px;line-height: 1.4;}
.tabs-heading h1 span{line-height: 0;}
.filters {padding: 0 0 7px;margin: 0 0 14px;border-bottom: 1px solid #DEDEDF;}
.tab {color: #575757;padding: 4px 8px;font-size: 14px;line-height: 1.5;transition: all ease .3s;border-radius: 5px;display: flex;align-items: center;position: relative;}
.tab.active, .tab:hover {background-color: #1E253F14;color: #1E253F;}
.search-tab {min-width: 325px;position: relative;}
.search-tab input[type="search"], .search-tab input[type="text"] {border: 1px solid #DEDEDF;padding: 6px 8px 6px 32px;color: #919194;font-size: 12px;line-height: 1.67;border-radius: 10px;width: 100%;}
.search-tab svg, .search-tab img {position: absolute;top: 50%;transform: translateY(-50%);left: 8px;}
.search-tab ::placeholder {color: #919194;font-family: "Lexend", sans-serif;font-size: 12px;line-height: 1.67;}
.select-column {width: 1.72%;padding: 10px 0;line-height: 0;}
.select-column input[type="checkbox"] {height: 20px;width: 20px;border: 1px solid #A9ACB6;background: #F4F4F6;}
.id-column {width: 11.77%;}
.name-column {width: 17.10%;}
.orders-table tr {display: flex;flex-wrap: wrap;/* align-items: center; */}
thead th {padding: 10px 16px;}
.email-column {width: 22.34%;}
.amount-column {width: 9.45%;}
.tax-column {width: 6.87%;}
.status-column {width: 9.02%;}
.date-column {width: 17.27%;}
.action-column {width: 4.46%;}
.orders-table {font-size: 14px;line-height: 1.67;}
thead th {color: #575757;font-weight: 400;display: inline-flex;align-items: center;gap: 8px;}
thead th span {line-height: 0;}
td.id-column {padding: 18px 16px;}
td.name-column {display: inline-flex;align-items: center;gap: 8px;padding: 16px;}
td.name-column img {width: 24px;height: 24px;}
td.email-column {padding: 18px 16px;}
td.amount-column {padding: 18px 16px;}
td.tax-column {padding: 18px 16px;}
td.status-column {padding: 15px 16px;}
td.status-column span {padding: 3px 6px;font-size: 14px;line-height: 1.56;border-radius: 8px;}
span.unpaid-status {color: #EF4444;background-color: #FFD0D0;}
span.paid-status {background-color: #E6FFD4;color: #67AA38;}
td.date-column {padding: 18px 16px;}
td.action-column {border-left: 1px solid #DEDEDF;padding: 18px 16px;}
.action-column svg {cursor: pointer;}
tbody tr {border-top: 1px solid #DEDEDF;}
.tab:before {content: "";position: absolute;width: 100%;height: 1px;background: transparent;transition: all ease .3s;left: 0;bottom: -8px;}
.tab.active:before {background: #EE8262;}
.btm-row {padding-top: 16px;}
.btm-rowinr {display: flex;flex-wrap: wrap;justify-content: space-between;}
.btm-ls {width: 40%;display: flex;align-items: center;gap: 8px;}
.btm-rs {width: 60%;padding-left: 20px;}
.result-number {color: #575757;font-size: 16px;line-height: 1.5;}
.result-select select {padding: 4px 27px 4px 8px;border: 1px solid #DEDEDF;border-radius: 8px;color: #575757;font-weight: 400;font-size: 14px;line-height: 1.57;background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9712 6.19526C12.2316 6.45561 12.2316 6.87772 11.9712 7.13807L8.30458 10.8047C8.04423 11.0651 7.62212 11.0651 7.36177 10.8047L3.6951 7.13807C3.43475 6.87772 3.43475 6.45561 3.6951 6.19526C3.95545 5.93491 4.37756 5.93491 4.63791 6.19526L7.83317 9.39052L11.0284 6.19526C11.2888 5.93491 11.7109 5.93491 11.9712 6.19526Z' fill='%23919194'/%3E%3C/svg%3E%0A");background-position: calc(100% - 11px) center;}
.pagination-page {display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 16px;align-items: center;}
.page-numbers {display: flex;align-items: center;gap: 4px;font-size: 14px;line-height: 1.57;color: #575757;}
.page-numbers span {height: 28px;width: 28px;border-radius: 8px;transition: all ease .3s;cursor: pointer;display: flex;align-items: center;justify-content: center;}
span.active-page {background: #EDEEF0;}
.orders-table td, .orders-table th {display: block;}
.db-rsinr {overflow: auto;}
.table-width {min-width: 1000px;}
.name-inr, .name-inr a {display: inline-flex;align-items: center;gap: 5px;}

/* order */
.order-table-sec .con-header {padding: 0 0 16px;display: flex;flex-wrap: wrap;align-items: center;}
.order-table-sec .con-header-left {width: 55%;padding-right: 30px;}
.order-table-sec .con-header-right {width: 45%;display: flex;flex-wrap: nowrap;gap: 8px;justify-content: flex-end;}
.order-table-sec .newcategory a {padding: 5px 12px;font-size: 14px;line-height: 1.57;display: inline-block;vertical-align: middle;background-color: #EE8262 !important;}
.order-table-sec .select-column {width: 20px; padding:16px 0;}
.order-table-sec .action-column {width: 80px;}
.order-table-sec .prodname-column {width: calc(25% - 50px);}
.order-table-sec .internalname-column {width: calc(75% - 50px);}
.order-table-sec tbody td {padding: 16px ;}
.order-table-sec .action-buttons span {line-height: 0;}
.order-table-sec .action-buttons {display: flex;align-items: center;gap: 8px;}

/* tax */
.tax-head .con-header-left {width: 30%;}
.tax-head .con-header-right {width: 70%;}
.txname-column, .taxrate-column, .taxinc-column, .taxstatus-column, .taxupdate-column {width: calc(20% - 20px);}

/* currency */
.currname-column {width: 20%;}
.currsymbol-column , .currRate-column , .currdefault-column , .currstatus-column , .currupdate-column{ width:14%; }

/* product */
.product-sec .con-header {padding: 0 0 16px;}
.product-sec .tabs-desc {padding-top: 6px;}
.product-sec .tabs-desc p {color: #575757;font-size: 14px;line-height: 1.57;}
.product-sec .search-item {display: flex;flex-wrap: wrap;align-items: center;gap: 8px;}
.product-sec .search-tab input[type="text"] {border: 1px solid #DEDEDF;padding: 7px 8px 7px 32px !important;color: #919194;font-size: 12px;line-height: 1.67;border-radius: 10px;width: 100%;}
.product-sec .search-item form {margin: 0 !important;}
.product-sec .add-productbtn .btn.primary {display: inline-block;vertical-align: middle;background-color: #EE8262;padding: 4px 12px;font-size: 14px;line-height: 1.57;color: #fff;}
.product-sec .filters {gap: 20px;flex-wrap: wrap;}
.product-sec .first-col {width: 1.39%;padding: 10px 0;}
.product-sec .two-col {width: 8.76%;}
.product-sec .three-col {width: 24.40%;}
.product-sec .four-col {width: 11.08%;}
.product-sec .five-col {width: 7.82%;}
.product-sec .six-col {width: 15.3%;}
.product-sec .sev-col {width: 10.65%;}
.product-sec .eight-col {width: 16.07%;}
.product-sec .last-col {width: 4.47%;}
.product-sec .first-col input {width: 20px;height: 20px;border: 1px solid #A9ACB6;background: #F4F4F6;}
.product-sec tbody td {padding: 10px 16px;}
.product-sec td.last-col a {padding: 0;background: none !important;}
.product-sec td.two-col a {display: inline-block;height: 44px;width: 44px;display: flex;align-items: center;justify-content: center;}
.product-sec td.two-col a img {width: 100%;height: 100%;background: none;border-radius: 4px;border: none;}
.product-sec td.three-col a {display: inline-block;vertical-align: middle;transition: all ease .3s;color: #1E253F;font-size: 14px;line-height: 1.42;}
.product-sec .status-badge.active {color: #67AA38;background-color: #E6FFD4;padding: 3px 6px;border-radius: 8px;min-width: auto;font-size: 14px;font-weight: 400;line-height: 1.42;}
.product-sec td.last-col {text-align: center;}
.product-sec .category-box {display: inline-flex;border: 1px solid #C9CAD2;font-size: 14px;line-height: 1.42;padding: 3px 6px;color: #575757;border-radius: 8px;}
.product-sec .orders-table td, .product-sec .orders-table th {display: flex;align-items: center;}
.product-sec .orders-table tr {align-items: unset;}
.product-sec .last-col {border-left: 1px solid #DEDEDF;}
.product-sec .table-wrapper table {min-width: 1164px;}
.product-sec .three-col a {display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}

/* custom property */
.check-column {padding: 16px 0 !important;}
.label-column {width: calc(28% - 100px);}
.propname-column {width: 32%;}
.groupname-column  {width: 40%;}
.customprop-tabel .action-column {width: 100px;}
.action-column span {display: flex;align-items: center;gap: 8px;justify-content: center;line-height: 0;}

/* sidebar */
.dbbannerleft.new-slidebar {background-color: #FFFFFF;border-right: 1px solid #DEDEDF;padding: 0;font-family: "Lexend", sans-serif;position: fixed;left: 0;}
.dbbannerleft.new-slidebar .sidebar-toptext {padding: 4px;color: #575757;font-size: 14px;line-height: 1.42;font-weight: 600;}
.dbbannerleft.new-slidebar .ls-topbar ul li a {display: flex;flex-wrap: wrap;gap: 8px;color: #575757;font-size: 16px;line-height: 1.42;border-radius: 0;padding: 7px 8px;transition: all ease .3s;position: relative;}
.dbbannerleft.new-slidebar .ls-topbar ul li a span{line-height:0;}
.dbbannerleft.new-slidebar .ls-topbar ul li a:before {content: "";position: absolute;height: 22px;border-radius: 0 60px 60px 0;background-color: #EE8262;width: 4px;left: -8px;transition: all ease .3s;opacity: 0;}
.dbbannerleft.new-slidebar .ls-topbar ul li a:hover:before, .ls-topbar ul li a.active:before {opacity:1 !important;}
.dbbannerleft.new-slidebar .ls-topbar ul li a:hover, .ls-topbar ul li a.active {background-color: #F4F4F6 !important;color: #1E253F !important;}
.dbbannerleft.new-slidebar .ls-topbar ul li a svg path {fill: #575757;transition: all ease .3s;}
.dbbannerleft.new-slidebar .ls-topbar ul li a:hover svg path, .ls-topbar ul li a.active svg path{fill: #1E253F !important;}
.dbbannerleft.new-slidebar .sidebar-footer {background-color: #fff;border-top: 1px solid #DEDEDF;padding: 12px 0 20px;}
.dbbannerleft.new-slidebar .ls-topbar {padding: 8px;}
.dbbannerleft.new-slidebar .menu-col {padding: 0 8px;}
.dbbannerleft.new-slidebar .col-label {padding: 4px;color: #575757;font-size: 16px;line-height: 1.42;}
.dbbannerleft.new-slidebar .menu-list ul {margin: 0;padding: 0;list-style: none;}
.dbbannerleft.new-slidebar .menu-list ul li a {width: 100%;display: inline-flex;align-items: center;gap: 8px;color: #575757;font-size: 16px;line-height: 1.5;padding: 7px 8px;transition: all ease .3s;}
.dbbannerleft.new-slidebar .menu-list ul li a span {line-height: 0;}
.dbbannerleft.new-slidebar .menu-list ul li a:hover {background-color: #F4F4F6;}
.dbbannerleft.new-slidebar .user-row {margin: 18px 8px;display: flex;align-items: center;justify-content: space-between;gap: 20px;padding: 6px 8px;}
.dbbannerleft.new-slidebar .sidebar-user {margin: 0;padding: 0 10px 10px;}
.dbbannerleft.new-slidebar .user-info h4 {color: #1E253F;font-size: 16px;line-height: 1.42;}
.dbbannerleft.new-slidebar .user-info p {color: #575757;font-size: 14px;line-height: 1.42;padding-top: 4px;}
.dbbannerleft.new-slidebar .user-icon {line-height: 0;cursor: pointer;}

/* add category popup form */
.modal-content {box-shadow: 0px 4px 8px 0px #00000040 !important;background-color: #FFFFFF !important;padding: 24px !important;font-family: "Lexend", sans-serif !important;}
.modal-content h3 {color: #1E253F;font-size: 18px;font-weight: 500;}
.modal-close {color: #575757;}
.modal-content input[type="text"] {padding: 6px 8px;border: 1px solid #DEDEDF;border-radius: 10px;color: #919194;font-size: 16px;line-height: 1.4;font-weight: 400;}
.modal-content form {padding-top: 24px;}
.modal-content input[type="submit"] {padding: 6px 12px;background-color: #EE8262;border-radius: 8px;font-size: 16px;line-height: 1.5;font-weight: 400;border: 1px solid #EE8262;transition: all ease .3s;}
.modal-content input[type="submit"]:hover {color: #EE8262;background-color: transparent;}

/* select new custom property popup form */
.modal-content br {display: none;}
.product-modal-content form label {color: #1E253F;font-weight: 500;font-size: 16px;margin: 0 0 6px;}
.modal-content input[type="submit"] {margin-top: 18px;}
select {border: 1px solid #DEDEDF;padding: 6px 8px;border-radius: 10px;color: #919194;font-size: 14px;font-weight: 400;background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.9717 6.19526C12.2321 6.45561 12.2321 6.87772 11.9717 7.13807L8.30506 10.8047C8.04471 11.0651 7.6226 11.0651 7.36225 10.8047L3.69559 7.13807C3.43524 6.87772 3.43524 6.45561 3.69559 6.19526C3.95594 5.93491 4.37805 5.93491 4.6384 6.19526L7.83366 9.39052L11.0289 6.19526C11.2893 5.93491 11.7114 5.93491 11.9717 6.19526Z' fill='%23919194'/%3E%3C/svg%3E%0A");cursor: pointer;}
.product-modal-content p {margin: 11px 0 0 !important;}
.product-modal-content form .field {padding: 0 0 16px !important;}
.modal-content h2 {font-weight: 500;}

/* tax popup form */
.product-form {padding: 0;}
.form-group.inclusive {display: flex;flex-wrap: wrap;gap: 8px;align-items: center;flex-direction: row-reverse;justify-content: flex-end;margin: 0;}
.form-group.inclusive label {margin: 0;}

/* switch account popup form */
.portal-actions  .btn.primary {display: inline-flex;margin: 15px 0 0;background-color: #EE8262;border: 1px solid #EE8262;font-size: 16px;padding: 6px 12px;border-radius: 8px;transition: all ease .3s;}
.portal-actions .btn.primary:hover {color: #EE8262;background: transparent;}
.row-right button {padding: 8px 12px;background-color: #EE8262;border: 1px solid #EE8262;color: #fff;font-family: inherit;border-radius: 8px;font-size: 14px;}
.port-name h2 {font-size: 16px;line-height: 1.4;color: #1E253F;font-weight: 500;}
.row-left p {color: #575757;font-size: 14px;line-height: 1.57;}
.row-right form {padding: 0;}
.modal-content {max-width: 600px !important;width: 100% !important;}
.popup-bg {position: fixed;inset: 0;background: rgba(0, 0, 0, 0.55);backdrop-filter: blur(2px);display: flex;align-items: center;justify-content: center;padding: 20px;z-index: 9999;font-family: "Lexend", sans-serif;}
.portal-popup {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 424px;padding: 24px;background-color: #ffffff;box-shadow: 0px 4px 8px 0px #00000040;border-radius: 18px;}
.popup-title h5 {color: #1E253F;font-size: 20px;line-height: 1.4;display: inline-flex;align-items: center;gap: 8px;font-weight: 500;}
.popup-title h5 span {line-height: 0;}
.popup-cont {padding-top: 25px;}
.popup-tl h6 {font-size: 16px;line-height: 1.5;font-weight: 500;color: #1E253F;}
.popup-desc {padding: 4px 0 0;}
.popup-desc p {font-size: 14px;color: #575757;line-height: 1.42;}
.portal-row {border-top: 1px solid #00000026;margin-top: 18px;padding-top: 18px;}
.portal-rowinr {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 20px;}
.portal-row input[type="checkbox"] {height: 16px;width: 16px;border-radius: 4px;border: 1px solid #1E253F40;position: relative;}
.portal-row input[type="checkbox"]:before {content: "";position: absolute;top: -1px;left: -1px;width: 100%;height: 100%;border-radius: 4px;border: 1px solid #1E253F40;opacity: 1;visibility: visible;z-index: 2;transition: all ease .3s;}
.portal-row input[type="checkbox"]:after {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_125_530' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_125_530)'%3E%3Cpath d='M4.7751 7.57451L9.0126 3.33701C9.1126 3.23701 9.22927 3.18701 9.3626 3.18701C9.49594 3.18701 9.6126 3.23701 9.7126 3.33701C9.8126 3.43701 9.8626 3.55576 9.8626 3.69326C9.8626 3.83076 9.8126 3.94951 9.7126 4.04951L5.1251 8.64951C5.0251 8.74951 4.90844 8.79951 4.7751 8.79951C4.64177 8.79951 4.5251 8.74951 4.4251 8.64951L2.2751 6.49951C2.1751 6.39951 2.12719 6.28076 2.13135 6.14326C2.13552 6.00576 2.1876 5.88701 2.2876 5.78701C2.3876 5.68701 2.50635 5.63701 2.64385 5.63701C2.78135 5.63701 2.9001 5.68701 3.0001 5.78701L4.7751 7.57451Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");height: 16px;width: 16px;background-position: center center;background-size: contain;background-repeat: no-repeat;z-index: 3;}
.portal-row input[type="checkbox"]:checked:before {background-color: #EE8262;border-color: #EE8262;}

/* header topbar */
.dashbr-topbar.new-header {background-color: #1E253F;padding: 10px 0;font-family: "Lexend", sans-serif;z-index: 99999;}
.dashbr-topbar.new-header .header-ls {line-height: 0;width: 228px;}
.dashbr-topbar.new-header .mob-menu i {color: #fff;}
.dashbr-topbar.new-header .header-inr {padding: 0 15px;gap: 0;}
.dashbr-topbar.new-header .header-rs {width: calc(100% - 228px);padding: 0 16px;display: flex;flex-wrap: wrap;gap: 20px;justify-content: space-between;align-items: center;}
.dashbr-topbar.new-header .header-searchbar input[type="text"] {border: 1px solid #DEDEDF;padding: 7px 8px 7px 32px !important;color: #919194;font-size: 12px;line-height: 1.67;border-radius: 10px;width: 100%;background-color: #fff;min-width: 325px;}
.dashbr-topbar.new-header .header-searchbar img {position: absolute;top: 50%;left: 10px;transform: translateY(-50%);}
.dashbr-topbar.new-header .header-rsinr {gap: 20px;}
.dashbr-topbar.new-header .header-rsrow ul {display: flex;flex-wrap: wrap;align-items: center;gap: 12px;margin: 0;padding: 0;}
.dashbr-topbar.new-header .header-rsrow ul li {line-height: 0;}
.dashbr-topbar.new-header .header-rsrow ul li a {vertical-align: middle;height: 24px;width: 24px;display: flex;align-items: center;justify-content: center;}
.dashbr-topbar.new-header .user-circle {margin: 0; cursor:pointer;}

.user-icon {position: relative;}
.user-icon ul {margin: 0;list-style: none;border-radius: 10px;box-shadow: 0px 2px 6px 0px #0000001F;background-color: #fff;padding: 0;}
.user-icon ul li a {padding: 9px 20px;display: block;transition: all ease .3s;color: #1E253F;}
.user-menu {position: absolute;top: calc(100% - 5px);right: 0;min-width: 120px;z-index: 3;padding-top: 10px;opacity: 0;visibility: hidden;transition: all ease .3s;}
.user-icon ul li a:hover {background-color: #EE8262;color: #fff;}
.user-icon ul li:first-child a{border-radius: 10px 10px 0 0;}
.user-icon ul li:last-child a{border-radius: 0 0 10px 10px ;}
.user-icon:hover .user-menu {opacity: 1;visibility: visible;}

/* add product form */
.addProduct-form {background-color: #F4F4F6;padding: 24px 24px 72px;font-family: "Lexend", sans-serif;height: auto;}
.addProduct-form .product-form {max-width: 1080px;position: relative;}
.addProduct-form .page-header {gap: 8px;margin-bottom: 18px;}
.addProduct-form span.right-icon {line-height: 0;}
.addProduct-form .page-header .page-icon a {padding: 0;}
.addProduct-form .page-header h2 {color: #1E253F;font-size: 20px;line-height: 1.4;}
.addProduct-form .formfields-list {background-color: #fff;border: 1px solid #DEDEDF;box-shadow: none;}
.addProduct-form .product-form .form-group {margin-bottom: 20px;}
.addProduct-form .product-form label, .addProduct-form .formfields-list h3 {margin-bottom: 4px;font-size: 14px;line-height: 1.42;font-weight: 400;}
.addProduct-form .product-form input[type="text"], .addProduct-form .product-form input[type="number"], .addProduct-form .product-form textarea, .addProduct-form .product-form select {padding: 6px 8px;color: #919194;font-size: 12px;}
.addProduct-form .product-form select {padding: 6px 25px 6px 8px;}
.addProduct-form #variants-container button {background-color: #FFFFFF;display: block;width: 100%;color: #919194;text-align: left;font-family: inherit;}
.addProduct-form .variant-options.orders-table {padding: 0;}
.addProduct-form div#options-container {margin: 0;}
.addProduct-form .product-form .pricing-grid {padding-top: 10px;}
.addProduct-form .product-form .form-group:last-child {margin-bottom: 0;}
.addProduct-form .product-form .pricing-grid .form-group {margin: 0;}
.addProduct-form .form-btn {margin-top: 0;/* padding: 0; */position: absolute;top: 0;right: 0;}
.addProduct-form .form-btn input[type="submit"] {background-color: #EE8262;padding: 5px 12px;border-radius: 8px;color: #FFFFFF;font-weight: 400;font-size: 16px;line-height: 1.57;border: 1px solid #EE8262;transition: all ease .3s;}
.addProduct-form .form-btn input[type="submit"]:hover {background-color: transparent;color: #EE8262;}
.addProduct-form .product-form-left {padding: 0 6px;}
.addProduct-form .product-form-inner {margin: 0 -6px;}
.addProduct-form .product-form-right {padding: 0 6px;}
.addProduct-form .formfields-list+.formfields-list {margin-top: 12px;}
.addProduct-form div#options-container .card {margin: 10px 0;}
.addProduct-form div#options-container .buttons {display: flex;flex-wrap: wrap;gap: 12px;margin: 12px 0 0;}
.addProduct-form #variants-container button {display: inline-block;width: auto;}
.addProduct-form #variants-container button.add-value {padding: 6px 12px;background-color: #1E253F;color: #fff;border-radius: 4px; transition: all ease .3s;border: 1px solid #1E253F;}
.addProduct-form #variants-container button.add-value:hover { color: #1E253F; background-color: transparent;}
.addProduct-form #variants-container button.delete {color: #EF4444;padding: 0;display: inline-flex;align-items: center;gap: 8px;}

.addProduct-form #variants-container button.opt-btn {background-color: #EE8262;color: #fff;padding: 8px 12px;margin: 10px 0;transition: all ease .3s;border: 1px solid #EE8262;}
.addProduct-form #variants-container button.opt-btn:hover{color: #EE8262; background-color: transparent; }
.addProduct-form .var-name {width: 40% !important;}
.addProduct-form .price-num {width: 25% !important;}
.addProduct-form .inv-num {width: 25% !important;}
.addProduct-form .action-col {width: 10% !important;padding: 10px 0 !important;}
.addProduct-form table#variants-table {width: 100%;min-width: 540px;}
.addProduct-form .table-bordered tbody td {padding: 10px 6px;}
.addProduct-form .action-col button {padding: 0;}
.addProduct-form .remove-row {display: flex !important;align-items: center;justify-content: center;height: 100%;width: 100% !important;background: none !important;}

@media(max-width:1350px){
.order-table-sec .con-header-left {width: 100% !important;padding-right: 0;}
.order-table-sec .con-header-right {width: 100% !important;justify-content: flex-start;padding-top: 20px;}
}

@media(max-width:991px){
.header-searchbar {display: none;}
.dashbr-topbar.new-header .header-rs {justify-content: flex-end;}
.product-form-left {width: 100%;}
.product-form-right {width: 100%;margin-top: 12px;}
}

@media(max-width: 767px){
.search-tab {min-width: auto;width: 80%;}
.product-sec .search-item form {gap: 0;width: 100%;}
.search-tab button {width: 20%;}
.search-item form .btn.primary {width: 20%;}
.dbbannerleft.new-slidebar {transform: translateX(-100%);transition: all ease .3s;z-index: 9999;}
.dbbannerleft.new-slidebar.active {transform: translateX(0%);}
.header-rsrow {display: none;}
}