@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css');
@import url('https://cdn.datatables.net/2.3.1/css/dataTables.bootstrap5.min.css');
@import url('https://cdn.datatables.net/buttons/3.2.3/css/buttons.bootstrap5.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
html,
body {
 height: 100%;
 margin: 0;
 padding: 0;
 font-size: 12px;
}
/* TABLE STYLES */
th,
td {
 vertical-align: middle;
}
.table-wrapper {
 width: 100%;
}
tr.prod-pinned td {
 background-color: #ffe6e6 !important;
}
.prod-pinned .order_Class {
 color: #222 !important;
}
table.drag-active > thead {
 background-color: #e1fce1 !important;
}
table.drag-active > tbody tr td {
 background-color: #f5fff5 !important;
}
thead th {
 position: relative;
}
table#firebaseTable th {
 font-family: 'Inter', sans-serif;
 font-size: 11px;
 line-height: 1;
 text-align: center;
 font-weight: 400;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}
table#firebaseTable td {
 font-family: 'Inter', sans-serif;
 font-size: 12px;
 text-align: center;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
}
#firebaseTable {
 table-layout: fixed !important;
 width: max-content !important;
}
/* COMPACT MODE */
td.name_Class a {
 color: #222222;
 text-decoration: none;
 font-weight: 400;
}
td.name_Class {
 min-width: 300px !important;
 max-width: 300px !important;
 width: 300px !important;
 white-space: wrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
 text-align: left !important;
}
.compact-mode td.name_Class {
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
 text-align: left !important;
}
/* .compact-mode .cover_url_Class {
 display: none !important;
} */

 .cover_url_Class img {
 max-width: 50px !important;
} 

.dt-buttons button.btn.btn-secondary {
 padding: 0px 7px 0px 7px;
 margin: 0px;
 background-color: transparent;
 border-width: 0px;
 border-color: transparent;
 color: #4d5761;
}
i.bi {
 font-size: 16px;
}
.dt-column-title i.bi {
 font-size: 13px;
}
@media screen and (max-width: 767px) {
 div.dt-container div.dt-search,
 div.dt-container div.dt-info {
  text-align: center;
  text-wrap-mode: nowrap;
 }
 .dt-buttons.btn-group.flex-wrap {
  margin: 0px;
 }
}
div.dt-container div.dt-search,
div.dt-container div.dt-info {
 text-align: center;
 text-wrap-mode: nowrap;
}
div.dt-container .row {
 --bs-gutter-y: 0rem !important;
}
tr:nth-child(odd) td.order_Class.sorting_1 {
 background-color: #555;
}
tr:nth-child(even) td.order_Class.sorting_1 {
 background-color: #111;
}
td.order_Class.sorting_1 {
 color: #efefef;
}
td.order_Class {
 font-size: 9px !important;
}
th.order_Class {
 background-color: #111 !important;
 color: #efefef;
}
th.order_Class .dt-column-order {
 color: #fffffe !important;
}
#firebaseTable th:nth-child(5),
#firebaseTable td:nth-child(5) {
 position: sticky;
 left: 0;
 z-index: 3;
 background: white;
}
#firebaseTable th:nth-child(5)::after,
#firebaseTable td:nth-child(5)::after {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 width: 1px;
 height: 100%;
 background: #999;
 z-index: 5;
}
.customize-section .section-grid {
 display: flex;
 gap: 0;
 flex-wrap: wrap;
 /* justify-content: space-between; */
}
/* SIZES */
/* COLUMNS */
.order_Class {
 min-width: 20px !important;
 max-width: 20px !important;
 width: 20px !important;
}


.cover_url_Class  {
 min-width: 40px !important;
 max-width: 40px !important;
 width: 40px !important;
}

.flashLeft_Class,
.flashElapsed_Class {
 min-width: 40px !important;
 max-width: 40px !important;
 width: 40px !important;
}
.pin-btn-cell {
 min-width: 26px !important;
 max-width: 26px !important;
 width: 26px !important;
}
.show_Class {
 min-width: 26px !important;
 max-width: 26px !important;
 width: 26px !important;
}
.name_Class {
 min-width: 300px !important;
 max-width: 300px !important;
 width: 300px !important;
}
.category_name_Class {
 min-width: 152px !important;
 max-width: 152px !important;
 width: 152px !important;
}
.id_Class {
 min-width: 152px !important;
 max-width: 152px !important;
 width: 152px !important;
}
.promo_text_Class {
 min-width: 70px !important;
 max-width: 70px !important;
 width: 70px !important;
}
.product_source_Class {
 min-width: 70px !important;
 max-width: 70px !important;
 width: 70px !important;
}
.seller_id_Class {
 min-width: 150px !important;
 max-width: 150px !important;
 width: 150px !important;
}
.shop_id_Class {
 min-width: 150px !important;
 max-width: 150px !important;
 width: 150px !important;
}
.shop_name_Class {
 min-width: 110px !important;
 max-width: 110px !important;
 width: 110px !important;
}
.pin_count_Class {
 min-width: 30px !important;
 max-width: 30px !important;
 width: 30px !important;
}
.pin_duration_Class {
 min-width: 58px !important;
 max-width: 58px !important;
 width: 58px !important;
}
.pin_percent_Class {
 min-width: 55px !important;
 max-width: 55px !important;
 width: 55px !important;
}
.direct_gmv_usd_Class {
 min-width: 55px !important;
 max-width: 55px !important;
 width: 55px !important;
}
.dgmv_percent_Class {
 min-width: 55px !important;
 max-width: 55px !important;
 width: 55px !important;
}
.gmv_usd_Class {
 min-width: 55px !important;
 max-width: 55px !important;
 width: 55px !important;
}
.watch_gpm_Class {
 min-width: 55px !important;
 max-width: 55px !important;
 width: 55px !important;
}
.exposure_cnt_Class {
 min-width: 65px !important;
 max-width: 65px !important;
 width: 65px !important;
}
.sale_price_usd_Class {
 min-width: 45px !important;
 max-width: 45px !important;
 width: 45px !important;
}
.agmv_percent_Class {
 min-width: 55px !important;
 max-width: 55px !important;
 width: 55px !important;
}
.sales_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.paid_order_cnt_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.paid_main_order_cnt_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.created_order_cnt_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.paid_user_cnt_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.payment_success_rate_Class {
 min-width: 55px !important;
 max-width: 55px !important;
 width: 55px !important;
}
.click_through_rate_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.click_order_rate_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.click_order_rate_main_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.total_click_cnt_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.click_uv_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.view_to_order_rate_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.add_shop_cart_cnt_Class {
 min-width: 50px !important;
 max-width: 50px !important;
 width: 50px !important;
}
.new_user_cnt_Class {
 min-width: 43px !important;
 max-width: 43px !important;
 width: 43px !important;
}
.created_order_user_cnt_Class {
 min-width: 43px !important;
 max-width: 43px !important;
 width: 43px !important;
}
.inventory_left_cnt_Class {
 min-width: 45px !important;
 max-width: 45px !important;
 width: 45px !important;
}
td.flashElapsed_Class,
td.flashLeft_Class {
 text-align: center !important;
}
/* HIDE ARROWS */
/* HIDE SORT ARROWS */
th.order_Class span.dt-column-order {
 right: 0px;
 left: 2.2px;
}
th.flashLeft_Class .dt-column-order,
th.pin-btn-cell .dt-column-order,
th.show_Class .dt-column-order,
th.name_Class .dt-column-order,
th.cover_url_Class .dt-column-order,
th.id_Class .dt-column-order,
th.flashElapsed_Class .dt-column-order,
th.pin_count_Class .dt-column-order,
th.pin_duration_Class .dt-column-order,
th.pin_percent_Class .dt-column-order,
th.direct_gmv_usd_Class .dt-column-order,
th.dgmv_percent_Class .dt-column-order,
th.gmv_usd_Class .dt-column-order,
th.sales_Class .dt-column-order,
th.paid_order_cnt_Class .dt-column-order,
th.paid_main_order_cnt_Class .dt-column-order,
th.created_order_cnt_Class .dt-column-order,
th.paid_user_cnt_Class .dt-column-order,
th.payment_success_rate_Class .dt-column-order,
th.click_through_rate_Class .dt-column-order,
th.click_order_rate_Class .dt-column-order,
th.click_order_rate_main_Class .dt-column-order,
th.watch_gpm_Class .dt-column-order,
th.total_click_cnt_Class .dt-column-order,
th.click_uv_Class .dt-column-order,
th.exposure_cnt_Class .dt-column-order,
th.show_uv_Class .dt-column-order,
th.card_view_cnt_Class .dt-column-order,
th.view_to_order_rate_Class .dt-column-order,
th.add_shop_cart_cnt_Class .dt-column-order,
th.new_user_cnt_Class .dt-column-order,
th.created_order_user_cnt_Class .dt-column-order,
th.unit_price_usd_Class .dt-column-order,
th.main_aov_usd_Class .dt-column-order,
th.sale_price_usd_Class .dt-column-order,
th.inventory_left_cnt_Class .dt-column-order,
th.agmv_percent_Class .dt-column-order,
th.promo_text_Class .dt-column-order,
th.product_source_Class .dt-column-order,
th.seller_id_Class .dt-column-order,
th.shop_id_Class .dt-column-order,
th.shop_name_Class .dt-column-order,
th.avail_price_Class .dt-column-order,
th.commission_expense_Class .dt-column-order,
th.commission_rate_Class .dt-column-order,
th.category_name_Class .dt-column-order {
 display: none !important;
}
/* PINNED BTN AND ROW */
tr.prod-pinned td {
 background-color: #ffe6e6 !important;
}
.pin-btn,
.prod-pinned .pin-btn {
 color: #6c757d !important;
 border-color: #dc354600 !important;
 border-width: 0 !important;
 padding: 0 !important;
 margin: 0 !important;
 opacity: 0.3 !important;
}
.pin-btn:hover {
 background: #ffffff00 !important;
 border-color: #19875400 !important;
 filter: brightness(75%) !important;
 opacity: 0.7 !important;
}
.pin-btn:active {
 border-color: #33333300 !important;
 scale: 0.9 !important;
 background-color: #22222200 !important;
}
.prod-pinned .btn-check:checked + .btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
 background-color: #22222200 !important;
 border-color: #22222200 !important;
}
button.btn.btn-outline-secondary.btn-sm.pin-btn {
 vertical-align: text-top !important;
}
/* CUSTOMIZE MODAL */
/* CUSTOMIZE MODAL */
#customizeForm {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}
.customize-section {
 background-color: #f8f9fa;
 border: 1px solid #dee2e6;
 border-radius: 0.375rem;
 padding: 1rem;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}
.customize-section h5 {
 margin: 0;
 padding-bottom: 0.5rem;
 font-weight: 600;
 border-bottom: 1px solid #dee2e6;
}
.customize-section .section-grid {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
}
.customize-section .form-check {
 flex: 0 1 23%;
 min-width: 140px;
}
.customize-section .form-check-input,
.customize-section .form-check-label {
 cursor: pointer;
}
.modal-dialog {
 max-width: 90%;
 margin: auto;
}
#customizeLink {
 display: none;
}
@media (min-width: 576px) {
 .modal-dialog {
  max-width: 95% !important;
  margin-right: auto;
  margin-left: auto;
 }
}
/* TOOLTIPS */
/* TOOLTIPS */
[tooltip] {
 position: static;
}
[tooltip]::before,
[tooltip]::after {
 font-size: 1em;
 line-height: 1;
 text-transform: none;
 user-select: none;
 pointer-events: none;
 position: absolute;
 display: none;
 opacity: 0;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
}
[tooltip]::before {
 content: '';
 border: 5px solid transparent;
 z-index: 1001;
}
[tooltip]::after {
 content: attr(tooltip);
 position: fixed;
 font-family: Helvetica, sans-serif;
 text-align: left;
 white-space: normal;
 word-break: break-word;
 padding: 1ch 1.5ch;
 border-radius: 0.3ch;
 box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
 background: #333;
 color: #fff;
 z-index: 1056;
 max-width: min(28em, 90vw);
 width: max-content;
 pointer-events: none;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
 display: block;
}
[tooltip='']::before,
[tooltip='']::after {
 display: none !important;
}
[tooltip]:not([flow])::before,
[tooltip][flow^='up']::before {
 bottom: 100%;
 border-bottom-width: 0;
 border-top-color: #333;
 left: 50%;
 transform: translate(-50%, -0.5em);
}
[tooltip]:not([flow])::after,
[tooltip][flow^='up']::after {
 bottom: auto;
 top: 10px;
 left: 50%;
 transform: translateX(-50%);
}
@-webkit-keyframes tooltips-vert {
 to {
  opacity: 0.9;
  transform: translate(-50%, 0);
 }
}
@keyframes tooltips-vert {
 to {
  opacity: 0.9;
  transform: translate(-50%, 0);
 }
}
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^='up']:hover::before,
[tooltip][flow^='up']:hover::after {
 -webkit-animation: tooltips-vert 300ms ease-out forwards;
 animation: tooltips-vert 300ms ease-out forwards;
}