/* ============================
  SW ORDER MANAGEMENT SYSTEM
  designed by Fensons
  Copyright, 2016-2024. All rights reserved.
======================= */


/* GLOBAL
======================= */
/* apply a natural box layout model to all elements */
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background-repeat: no-repeat!important; list-style: none!important; }


/* GENERAL
======================= */
html { font: 0.7em/1.3em Tahoma!important; }
body { font-size: inherit!important; margin: 0; background: #eae9e2; font-family: Tahoma; }
a { color: #000; }
button { border: 0; padding: 4px 7px; margin: 0 1px; border-radius: 3px; line-height: 1.2em; box-shadow: 0px 1px 0 #00000060; }
button:disabled { cursor: not-allowed; }
.container { width: 100%!important; padding-left: 5px; padding-bottom: 200px; }
.hidden { display: none }
.ui-dialog { z-index: 10002 }
.modal-lg { width: 700px!important; }
.flex-break { flex-basis: 100%; height: 0px; }
.pointer-cursor { cursor: pointer; }
.no-select { user-select: none; /* Disable text selection */ }


/* VIEWS
======================= */
.view-returns #middle h3 { text-transform: capitalize; font-weight: bolder; }
a.tabsItem { display: block; width: 100%; height: 100%; text-decoration: none; }
a.tabsItem:hover { color: #f36; }

.view-returning { background-color: #eae9e2; }
.view-returning #middle h3 { text-transform: capitalize; font-weight: bolder; }

/* TABS */
#header { position: fixed; top: 0; left: 0; width: 100%; min-height: 100px; overflow: auto; background: #eae9e2; padding: 0 0 0 5px; z-index: 10000; }
#header h1 { display: none; }
#header ul.tabs { background: #fff; padding: 0 5px; text-align: center; margin: 0; height: 25px; }
#header ul.tabs li { display: inline-block; font-size: 1.1em; padding: 4px 20px; width: fit-content; text-transform: uppercase; line-height: 1.5em; height: 25px; }
#header ul.tabs li.active { background: #000; color: #fff; }
#header ul.tabs li.active a { color: #fff; text-transform: uppercase; font-weight: bold; }



/* HEADER
======================= */
.update button { height: 50px; background: #fa0065; text-shadow: 1px 1px #B10349; color: #fff; text-transform: uppercase; margin-bottom: 5px; margin-left: 0; }
.update .last-update {}
.update .last-update span { display: block; font-weight: bold; }
.update .reset-button { height: 50px; color: #fff; background: #f49a35; text-transform: uppercase; text-shadow: 1px 1px #D07A1B; }
.quickbar { display: table; border-collapse: separate; border-spacing:0; padding-bottom: 10px; max-width: 1980px; }
.quickbar div.col { display: table-cell; vertical-align: top; padding: 10px 10px 0 10px; }
.quickbar div.col:nth-last-child(1) { border-right: 0; }
.quickbar .admin-buttons { }
.quickbar h3 { font-size: 1.4em!important; font-weight: bold; text-transform: uppercase; margin: 0 0 5px 0; padding-bottom: 3px; border-bottom: 1px dotted #ccc; xtext-align: center; }
.quickbar .update { min-width: 170px; padding-top: 10px!important; }
.quickbar .search-bar { width: 175px; }
.quickbar .search-bar input { width: 100%; padding: 5px ; border-radius: 4px; border: 0; border-bottom: 1px solid #ccc; font-size: 1.0em; margin-bottom: 4px; xtext-align: center; }
.quickbar .search-bar input::placeholder { color: #ccc; }
    #selected-rows,
    .order-numbers { display: inline-block; }
    #selected-rows span,
    .order-numbers span { font-weight: bold; }
.quickbar .statuses { xwidth: 730px; xtext-align: center; }
.quickbar .statuses .statuses-content,
.quickbar .actions .actions-content { height: 48px; overflow: hidden; }
.quickbar .statuses .statuses-content:hover,
.quickbar .actions .actions-content:hover { height: auto; overflow: auto; }
.quickbar .view { width: 155px; }
.quickbar .actions { width: 675px; position: relative; }
.quickbar .actions .actions-tabs { position: absolute; text-align: right; top: 11px; left: 95px; border-left: 1px solid #ccc; padding-left: 10px; }
.quickbar .actions .actions-tabs > a { margin: 0 3px; text-transform: uppercase; font-size: 9.5px; }
.quickbar .actions .actions-tabs a.active { border: 1px solid #ccc; padding: 3px 10px; background: #333; color: #fff; border-radius: 5px; text-decoration: none; }
.quickbar .actions .actions-content button[data-category="customer-service"] { background: #c9c49e; }
.quickbar .actions .actions-content button[data-category="returns"] { background: #f5f3e1; }
.quickbar .actions .actions-content button[data-category="shipping"] { background: #dbd6a6; }
.quickbar .actions .actions-content button[data-category="orders"] { background: #f8ee92; }
.quickbar .actions .actions-content button[data-category="wfi"] { background: #989789; }
.quickbar button { margin: 0 1px 3px 0; position: relative; }
.quickbar button.cumulative:before { content: "+"; position: absolute; top: 0; left: 0; color: #000; font-size: 7px; padding: 1px 2px; line-height: 1em; font-weight: bold; }
.quickbar button.textWhite:before { color: #fff!important; }
.quickbar button.open { background: #fff; }
.quickbar button.reopened { background: #f6f6f6; }
.quickbar a.open { background: #fff; border: 1px solid #ccc; padding: 5px 10px; margin: 0 3px; border-bottom: 2px solid #333!important; border-radius: 5px; text-decoration: none}
.quickbar button.entered { background: #D0D102; }
.quickbar button.entered-on-hold { background: linear-gradient(to bottom, #d0d102 0%,#d0d102 50%,#c3d825 51%,#fd6e8a 100%); }
.quickbar button.to-enter { background: #f2ca51; }
.quickbar button.wfi { background: #75ccff; }
.quickbar button.coming { background: #86c089; }
.quickbar button.expecting { background: #95b71b; }
.quickbar button.temp { background: #22ff4c; }
.quickbar button.dropship { background: #ff7635; }
.quickbar button.sent { background: #fb9c70; }
.quickbar button.inv-hold { background: #f33; }
.quickbar button.sn { background: #99f999; }
.quickbar button.consolidating { background: #5498a2; }
.quickbar button.consolidating-sent { background: #427f88; }
.quickbar button.consolidating-coming { background: #44b0c0; }
.quickbar button.cancelled { color: #939393; background: #d7d3d3; text-decoration: line-through; }
.quickbar button.completed { color: #bbb; background: #e3e3e3; }
.quickbar button.lost-completed { color: #b3b3b3; background: #dedede; }
.quickbar button.on-hold { background: #FD6E8A; }
.quickbar button.rts { background: #bb5087; }
.quickbar button.returning { background: #bf3aa0; color: #ff78cd; }
.quickbar button.returning-ds { background: #982f80; color: #ff78cd; }
.quickbar button.returned { background: #ccc; color: #666; }
.quickbar button.returned-ds { background: #a77b9d; color: #333; }
.quickbar button.returned-pending { background: #c8b8b8; color: #666; }
.quickbar button.done-returned { background: #bbb9b9; color: #666; text-decoration: line-through; }
.quickbar button.returning-wfi-ds { background: #7b1b65; color: #ff78cd; }
.quickbar button.rejected-returned { background: #000; color: #f59397; }
.quickbar button.rejected-storage { background: #000; color: #f59397; }
.quickbar button.rejected-bounced { background: #333; color: #f59397; }
.quickbar button.hurt-returned { background: #ff4a4a; color: #f5c794; }
.quickbar button.store-credit-returned { background: #dfb4fd; color: #000; }
.quickbar button.temp { background: #22ff4c; }
.quickbar button.not-received { background: #e29bd4; }
.quickbar button.archive { display: none; background: #848D82; color: #444; }
.loading { position: fixed; top: 0; left: 250px; background: rgb(193, 19, 19); color: #fff; padding: 5px 40px 5px 50px; text-transform: uppercase; font-size: 2em; z-index: 10000000; border-radius: 0 0 10px 10px; height: 40px; line-height: 27px; font-weight: bold }
.status-minis { float: right; }
.undo-statuses { background: #fff url("../fensons/undo.png") 2px center no-repeat!important; padding-left: 19px!important; box-shadow: none!important; }
.js-lock-statuses { box-shadow: none!important; padding: 2px 8px!important; }
.js-lock-statuses.js-pressed { background: #999; border: 1px solid #555; }
.col.view.show-options { line-height: 0em; }

.columns { float: right; box-shadow: none!important; }

.edited { position: absolute; top: 5px; right: 50px; background: rgba(255,255,255,0.8) url("../fensons/cloud-warning.png") center 0 no-repeat; height: 85px; text-align: center;
    padding: 55px 20px 40px; border-radius: 10px; box-shadow: 0 0 6px #666; }
.edited-text { text-transform: uppercase; font-weight: bold; }
.edited-date { display: block; }

.pagination { display: table; margin: 0 auto -20px auto; }
.view-all,
#select-returned-completed { border: 1px solid #ccc; background: #fff; border-radius: 2px; padding: 1px 6px; text-decoration: none; text-transform: uppercase; color: #666; margin: 0 0 0 10px; font-size: 0.9em; }
#select-returned-completed { margin-left: 0; }
.view-all:hover,
#select-returned-completed:hover { background: #d9f7a9; color: #000; text-decoration: none; border: 1px solid #85c564; }

/* DETAILS BAR */
.details-wrap { position: fixed; top: 160px; bottom: 0; left: 0; width: 180px; margin: 0; padding: 0 10px 10px 10px; z-index: 10000; background: #eae9e2; }
	.view-returns .details-wrap { background-color: rgba(234,233,226,0.9); }
.details { height: 100%; overflow-y: auto; margin-bottom: 15px}
.details h1 { display: none; font-size: 2.1em; font-weight: bold; margin-top: 10px; }
.details h2 { font-size: 25px; font-weight: bold; margin: 5px 0 10px 5px; }
.details h3 { margin: 0px 0 3px 0; font-size: 1.3em!important; font-weight: bold!important; }

.boxes.itemsstatus { margin-top: 5px; }
.details .spendstats .stat-header { font-weight: bold; }
.details .spendstats span { text-align: right; display: table-cell; width: 55px; }
.details .spendstats span.stat-usd { width: 70px; }
.details .spendstats span.stat-count { width: 15px; text-align: left; padding-left: 5px; }
.details .spendstats div { display: table-row; }
.details .yearstats { border-bottom: none; max-height: 38px; }
.details p { margin-top: 0; line-height: 1.3em; }
.details .ordernumber { font-size: 2.5em; font-weight: bold; margin-top: 12px; padding-bottom: 0; line-height: 0.4em; }
.details .items-count { font-size: 20px; font-weight: 100; padding: 0 0 2px 7px; width: 90%; display: block; }
.details p.ip { margin: 0; }
.details p.geoIP.mismatch span { background: #f33; color: #fff; padding: 0px 4px; text-transform: uppercase; }
.details .spendstats .stat-shipments { margin-top: 10px; border-top: 1px solid #ccc; display: block; padding-top: 10px; }
.settings { position: absolute; top: 5px; right: 5px; vertical-align: middle; line-height: inherit; font-weight: bold; }
.settings span { color: #f33; }
.details .col.hurts { background: #fcdce1; }
.details .col.shipments { background: beige; }
.items-details { xdisplay: table; }
.boxes { display: flex; flex-wrap: wrap; margin: 10px 0; }
.boxes > .col { flex: 50%; font-size: 0.9em; margin: 0; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.boxes h3 { font-size: 9px!important; color: #000; font-weight: normal!important; margin: 4px 0 0 7px; overflow: hidden; letter-spacing: 0.5px; text-transform: uppercase!important; }
.boxes.smaller .items-count { font-size: 16px; }
.details span.changed { width: auto; background: #f36; color: #fff; display: table; text-align: center; text-transform: uppercase; padding: 1px 4px; }
/* Fix problem with inline contenteditable elements */
span[contenteditable=true] { display: inline-block; xborder: 1px dotted #ccc; min-width: 20px; min-height: 15px; }
.details span#address-2 { display: block; }
.details .ip { margin: 0; }
.details .geoIP.mismatch span { background: #f33; color: #fff; padding: 0 4px; text-transform: uppercase; }
.details .shipping span:empty:before { content: attr(data-placeholder); color: #aaa; font-weight: normal; }
.details span#shipping-email { width: 120px; vertical-align: top; }
.details .quicksearchlink { float: right; line-height: 1em; }
.details .quicksearchlink span { background: #fff; padding: 2px 5px; border-radius: 5px; line-height: 1em; font-size: 10px; display: inline-block; margin-top: -2px; box-shadow: 0 1px 0px #00000060; }
.details .quicksearchlink span.s3x { background: #efed58; box-shadow: 0 1px 0px #e2ab96; }
.details .quicksearchlink span.s4x { background: orange; color: #fff; box-shadow: 0 1px 0px #ff000090;}
.details .quicksearchlink span.s6xplus { background: #ff7a24; color: #fff; box-shadow: 0 1px 0px #8b0000; }
.details-minis { margin: 5px 0px 15px 0; border: 1px solid #ccc; border-width: 1px 0; padding: 10px 0; border-top-color: #000; }
.details .additional-tax-fields { margin: 20px 0; }
.details .additional-tax-fields span { display: block; margin: 10px 0 0 0; font-weight: bold; }
.minis { color: #000!important; font-size: 8.5px; display: inline-block; background: #fff; padding: 2px 4px; xbox-shadow: 0 0 3px #aaa; text-transform: uppercase; margin: 0; border-radius: 3px; text-decoration: none!important; box-shadow: 0px 1px 0 #00000060; }
.minis:hover { background: #000; color: #fff !important; }
.minis.edit-address { }
.view-sales .boxes.sizefitdata > .col { flex: inherit; width: 60px; }
.view-sales .boxes.sizefitdata .items-count { font-size: 14px!important; }
.details .discount-code { border: 1px dashed #000; text-align: center; padding: 8px 5px; background: #ffffffaa; font-weight: bold; }

/* Basic styling for tabs */
.details .tabs-index { margin-top: 15px; }
.details .tabs { display: flex; justify-content: start; margin-bottom: 10px; text-transform: uppercase; border-bottom: 1px solid #000; }
.details .tabs .quicksearchlink { line-height: inherit; }
.details .tab-link { padding: 3px 6px; text-decoration: none!important; margin-right: 5px; text-decoration: none!important; font-size: 9px; letter-spacing: 0.5px; color: #000; }
.details .tab-link:hover { background-color: #fff; color: #000; }
.details .tab-link.active { background-color: #000; color: #fff; }
.details .tab-content { display: none; }
.details .tab-content.active,
.details .tab-content:target { display: block; }

.details #shipping [contenteditable="true"] { background-color: #00000010; }



/* MAIN TABLE
======================= */
#middle { width: calc(100% - 200px); font-size: 0.95em; margin-top: 155px; margin-left: 180px; }
.main { xdisplay: table-cell; xborder: 1px solid #ccc; padding: 0; background-color: inherit; }
thead tr { }
.main thead th { text-align: left; padding: 0 auto; vertical-align: bottom; line-height: 13px; }
.main thead th a { color: #000; }
.main thead tr:nth-child(2) th { font-weight: 300; border-bottom: 1px solid #333; }
.main thead th:nth-child(4),
.main thead td:nth-child(4) input { width: 18px; text-align: center; } /* CHANNELS field */
.main thead input { width: 100%; padding: 5px ; border-radius: 4px; border: 1px solid #ddd; font-size: 1.0em; margin-bottom: 4px; text-align: center; background: #ffffff90; }
.main thead input:focus { background: #fff; }
.main thead .sortedby:before { content: "*"; color: #f36!important; }
.main tbody { height: 200px; overflow: auto; }
.main tbody tr { border-top: 1px solid #eee!important; }
.main tbody tr.neworder { border-top: 1px solid #000!important; }
.main tbody td { padding: 0 2px; border-width: 3px!important; }
.main tbody td:focus { background: #ffc; border: 0; outline: 0; border-bottom: 1px solid #000!important; }
.main button { border: 0!important; color: #000; }
.kv-editable-link { color: #000; background: inherit; }
.kv-editable, .kv-editable-value { width: 100%; }
.kv-grid-loading { /* styles for loading */ }
.main button { border: 0!important; text-align: left; }
tr#w0-filters { border-bottom: 1px solid #333; padding-bottom: 2px; }
.kv-table-header { background: inherit; }

/* checkbox */
.main th:nth-child(1),
.main td:nth-child(1) { width: 20px; text-align: center; zoom: 1.4; }
.shipments .main th:nth-child(1), 
.shipments .main td:nth-child(1) { zoom: inherit; }

/* row # */
.main th:nth-child(2),
.main td:nth-child(2) { width: 30px; text-align: center; }
.main [data-attribute='date'] { min-width: 70px; text-align: center; }
.main [data-attribute='warning_classes'] { width: 5px; }
.main td[data-attribute='warning_classes']:not(:empty) { min-width: 20px; text-align: center; }
.main .warning td:nth-child(3),
.main .warning td:nth-child(3):not(:empty) { text-indent: -1000px; background: #000 url("../fensons/icon-warning.svg") center center no-repeat; background-size: 11px; }
.main .fraud-alert td:nth-child(3),
.main .fraud-alert td:nth-child(3):not(:empty) { text-indent: -1000px; background: #000 url("../fensons/icon-fraud-alert4.svg") center center no-repeat; background-size: 12px; }
.main .unpaid td:nth-child(3),
.main .unpaid td:nth-child(3):not(:empty) { text-indent: -1000px; background: #000 url("../fensons/icon-unpaid.svg") center center no-repeat; background-size: 13px; }
.main .warning.unpaid td:nth-child(3),
.main .warning.unpaid td:nth-child(3):not(:empty) { text-indent: -1000px; background: #000 url("../fensons/icon-warning-unpaid.svg") center center no-repeat; background-size: 13px; height: 50px; }
.main .warning td[data-attribute='warning_classes']:focus,
.main .warning td[data-attribute='warning_classes']:empty,
.main .fraud-alert td[data-attribute='warning_classes']:focus,
.main .fraud-alert td[data-attribute='warning_classes']:empty,
.main .unpaid td[data-attribute='warning_classes']:focus,
.main .unpaid td[data-attribute='warning_classes']:empty,
.main .warning.unpaid td[data-attribute='warning_classes']:focus,
.main .warning.unpaid td[data-attribute='warning_classes']:empty { text-indent: inherit; background: none; }

.main [data-attribute='channel'] { color: transparent; width: 15px; min-width: 15px; max-width: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main .facebook td[data-attribute='channel'],
.main .facebook td[data-attribute='channel']:not(:empty) { background: url("../fensons/icon-facebook.svg") center center no-repeat; background-size: 13px; }
.main .instagram td[data-attribute='channel'],
.main .instagram td[data-attribute='channel']:not(:empty) { background: url("../fensons/icon-instagram.svg") center center no-repeat; background-size: 13px; }
.main .shopify td[data-attribute='channel'],
.main .shopify td[data-attribute='channel']:not(:empty) { xbackground: url("../fensons/icon-shopify.svg") center center no-repeat; background-size: 13px; }
.main .synced td[data-attribute='channel'],
.main .synced td[data-attribute='channel']:not(:empty) { background-size: 10px; background-color: black; /* Change this color as needed */  mask: url("../fensons/icon-sync5-black.svg") center center no-repeat; -webkit-mask: url("../fensons/icon-sync5-black.svg") center center no-repeat; mask-size: 10px; -webkit-mask-size: 10px; }
.main td[data-attribute='channel']:focus,
.main td[data-attribute='channel']:empty { text-indent: inherit; background: none; }
.main [data-attribute='order_number'] { min-width: 50px; cursor: pointer; font-weight: 600; }
.main [data-attribute='status'] { min-width: 90px; padding: 2px 1px; }
.main [data-attribute='status'] [class^="s-"] { cursor: pointer; }
.main [data-content='REJECTED-Returned, Completed'] [class^='s-'] { color: #fff6; }
.main td[data-attribute='prod-img'] { background: #fff; max-width: 50px; padding: 0; position: relative; }
    .onVendor [data-attribute="prod-img"]:before { content: "V"; background: #000; color: #fff; font-size: 7px; padding: 1px 5px; position: absolute; top: 0; right: 0; border-radius: 0px; }
.main [data-attribute='sku'] { width: 100px; overflow: hidden!important; text-overflow: ellipsis; white-space: nowrap; padding-left: 5px; }
.main [data-attribute='sku']:focus { max-width: 150px; }
.main [data-attribute='swt'],
.main [data-attribute='available_qty'],
.main td[data-attribute='star'] { width: 20px;  text-align: center; }
.main td[data-attribute='star']:not(:empty) { background: #000; color: #fff; vertical-align: middle; }
.main [data-attribute='available_qty']:empty:after { content: "-"; }
.main .newstar td[data-attribute='star']:not(:empty) { background: #f36; }
.main tr.entered td[data-attribute='star']:not(:empty) { background: none; color: transparent; }
.main .newstar td[data-attribute='star']:not(:empty) { background: #f33; }
.main .newstar td[data-attribute='star']:not(:empty):after { content: "**"; }
.main [data-attribute='brand'] { overflow: hidden!important; max-width: 60px; text-overflow: ellipsis; white-space: nowrap; }
.main [data-attribute='brand']:focus { max-width: 150px; }
.view-orders .main [data-attribute='product_name'] { overflow: hidden!important; max-width: 60px; text-overflow: ellipsis; white-space: nowrap; }
.view-orders .main [data-attribute='product_name']:focus { max-width: 300px; }
.main [data-attribute='size'] { width: 35px!important; text-align: center; }
.main [data-attribute='year'] { width: 30px; text-align: center; }
.view-orders .main [data-attribute='style_number'] { overflow: hidden!important; max-width: 60px; text-overflow: ellipsis; white-space: nowrap; }
.view-orders .main [data-attribute='style_number']:focus { max-width: 200px; }
.main [data-attribute='collection_group'] { overflow: hidden!important; max-width: 60px; text-overflow: ellipsis; white-space: nowrap; }
.main [data-attribute='collection_group']:focus { max-width: 120px; }
.main [data-attribute='addition_bag'] { width: 25px; text-align: center; }
.main [data-attribute='ds'] { width: 35px; text-align: center; }
.main [data-attribute='pre_order'] { width: 25px; text-align: center; }
.main [data-attribute='final_sale'] { width: 25px; text-align: center; }
.main [data-attribute='po'] { overflow: hidden!important; max-width: 40px; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.main [data-attribute='po']:focus { max-width: 120px; }
.main [data-attribute='country'] { width: 25px; text-align: center; }
.main [data-attribute='notes'] { min-width: 200px; position: relative; }
.main .has-labels [data-attribute='notes'] { padding-top: 12px; }
.main .has-labels [data-attribute='notes']::before { content: attr(data-note-content); color: #fff; text-transform: uppercase; position: absolute; right: 0; top: 0; background: #f36; padding: 0 4px; font-size: 8px; letter-spacing: 0.5px; }
.main [data-attribute='srp'],
.main [data-attribute='price'],
.main [data-attribute='price_usd'],
.main [data-attribute='discount'],
.main [data-attribute='discount_usd'],
.main [data-attribute='paid'],
.main [data-attribute='cost'],
.main [data-attribute='days_since_ordered'],
.main [data-attribute='days_since_received'],
.main [data-attribute='margin'] { width: 40px; text-align: right; position: relative; }
.main [data-discount-content]::before { content: attr(data-discount-content); color: #000; text-transform: uppercase; position: absolute; right: 0; top: 0 /*calc( 50% - 20px)*/; background: #ffffff30; padding: 1px 4px; font-size: 8px; font-weight: normal; letter-spacing: 0.5px; border-radius: 0; box-shadow: 0 0.5px 0px #333; }
.main [data-discount-content]:not([data-discount-content])::before { content: none !important; display: none !important; }
.main [data-all-days]::before { content: attr(data-all-days); color: #000; text-transform: uppercase; position: absolute; right: 0; top: 0 /*calc( 50% - 20px)*/; background: #ffffff30; padding: 1px 4px; font-size: 8px; font-weight: normal; letter-spacing: 0.5px; border-radius: 0; box-shadow: 0 0.5px 0px #333; }
.main [data-all-days-received]::before { content: attr(data-all-days-received); color: #000; text-transform: uppercase; position: absolute; right: 0; top: 0 /*calc( 50% - 20px)*/; background: #ffffff30; padding: 1px 4px; font-size: 8px; font-weight: normal; letter-spacing: 0.5px; border-radius: 0; box-shadow: 0 0.5px 0px #333; }
.main td[data-attribute='need_by_date'] { width: 75px; text-align: center; }
.main td[data-attribute='need_by_date']:not(:empty) { background: #000!important; color: #fff!important; }
.main [data-attribute='shipped'] { width: 75px; text-align: center; }
.main [data-attribute='ship_code'] { width: 45px; }
.view-orders .main [data-attribute='tracking'] { overflow: hidden!important; max-width: 60px; text-overflow: ellipsis; white-space: nowrap; }
.main [data-attribute='tracking']:focus { max-width: 200px; }
.main [data-attribute='tracking_status'] div { background: #ffffff80; padding: 3px 8px; display: inline-block; border-radius: 4px; color: #000; text-transform: capitalize; font-size: 10px; text-align: center; box-shadow: 0 1px 1px #666; }
.tracking-transit-address-issue,
.tracking-transit-contact-carrier,
.tracking-transit-delayed,
.tracking-transit-location-inaccessible,
.tracking-transit-notice-left,
.tracking-transit-package-damaged,
.tracking-transit-package-forwarded,
.tracking-transit-package-held,
.tracking-transit-pickup-available,
.tracking-transit-reschedule-delivery,
.tracking-returned-package-unclaimed,
.tracking-failure-package-undeliverable,
.tracking-failure-package-disposed,
.tracking-failure-package-lost,
.tracking-transit-delivery-attempted,
.tracking-transit-delivery-rescheduled { background-color: gold!important; }
.tracking-returned-return-to-sender { background: #ff7171 !important; color: #fff; }
.tracking-delivered-delivered { background-color: #cddc39!important; color: #000000!important; }
.tracking-pre-transit-information-received { background-color: #b11!important; color: orange!important; }
.tracking-pre-transit-information-received span:nth-child(1) { color: #fff!important; }
.main [data-attribute='tracking_status'] div span:nth-child(1) { font-weight: bold; text-transform: uppercase; }
.tracking-definition { font-weight: bold; }
[class*="carrier-"] [data-attribute='tracking'] { background-position: center calc(50% - 12px)!important; }
.carrier-fedex [data-attribute='tracking'] { background: url("../fensons/icon-fedex.svg") center no-repeat; background-size: 25px; }
.carrier-dhl [data-attribute='tracking'] { background: url("../fensons/icon-dhl.svg") center no-repeat; background-size: 35px; }
.carrier-ups [data-attribute='tracking'] { background: url("../fensons/icon-ups.svg") center no-repeat; background-size: 15px; }
.carrier-usps [data-attribute='tracking'] { background: url("../fensons/icon-usps.svg") center no-repeat; background-size: 20px; }

[data-attribute='payment_method'] { color: transparent; width: 20px; min-width: 20px; max-width: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-credit-card [data-attribute='payment_method'] { background: url("../fensons/icon-cc.svg") center no-repeat; background-size: 17px; }
.pt-paypal [data-attribute='payment_method'] { background: url("../fensons/icon-paypal.svg") center no-repeat; background-size: 15px; }
.pt-klarna [data-attribute='payment_method'] { background: url("../fensons/icon-klarna.svg") center no-repeat; background-size: 15px; }
.pt-gift-card [data-attribute='payment_method'] { background: url("../fensons/icon-gift-card.svg") center no-repeat; background-size: 15px; }
.pt-afterpay [data-attribute='payment_method'] { background: url("../fensons/icon-afterpay.svg") center no-repeat; background-size: 15px; }
.pt-gift-card.pt-afterpay [data-attribute='payment_method'] { background: url("../fensons/icon-gift-card-afterpay.svg") center no-repeat; background-size: 30px; }
.pt-gift-card.pt-klarna [data-attribute='payment_method'] { background: url("../fensons/icon-gift-card-klarna.svg") center no-repeat; background-size: 30px; }
.pt-gift-card.pt-paypal [data-attribute='payment_method'] { background: url("../fensons/icon-gift-card-paypal.svg") center no-repeat; background-size: 30px; }
.pt-gift-card.pt-credit-card [data-attribute='payment_method'] { background: url("../fensons/icon-gift-card-cc.svg") center no-repeat; background-size: 30px; }

.main [data-attribute='days_since_ordered'],
.main [data-attribute='days_since_received'],
.main [data-attribute='currency'] { width: 30px; text-align: center; }

.main td[data-attribute='paid'] { font-weight: bold; }
.main tbody td.express::before { content: "EXP"; font-size: 8px; border: 1px solid #000; border-radius: 2px; padding: 1px 1px 1px 2px; margin: 0 2px 1px 0; background: #000; line-height: 8px; color: #fff; letter-spacing: 1px; }

/* QTIP Tooltip for Discount amounts on the PAID column */
.qtip-discount { font-size: 12px!important; }
div[class*="qtip-disc-"] span { display: inline-block; width: 100px; }
.qtip-disc-total { font-weight: bold; border-top: 1px dotted #000; }

.prod-images.js-sku { background: #fff; }
.prod-images.js-sku img { width: 50px; height: auto; padding: 3px 0; }
.glyphicon { zoom: 1.1; }

.view-orders cats, 
.view-orders totalcost { display: none!important; }
.view-orders totalstock { border-top: 1px dotted #000; padding: 2px 0 2px 0!important; }

/* STATUS - ROW COLOURING
============== */
.main tbody tr:nth-child(odd) { xbackground-color: #eee; }

.main tbody tr.open { background: #fff; }
.main tbody tr.reopened { background: #f6f6f6; }
.main tbody tr.entered { background: #D0D102; }
.main tbody tr.entered-on-hold { background: linear-gradient(to bottom, #d0d102 0%,#d0d102 50%,#c3d825 51%,#fd6e8a 100%); }
.main tbody tr.to-enter { background: #f2ca51; }
.main tbody tr.wfi { background: #75ccff; }
.main tbody tr.coming { background: #86c089; }
.main tbody tr.dropship { background: #ff7635; }
.main tbody tr.sent { background: #fb9c70; }
.main tbody tr.sent.open { background: #dc8258; }
.main tbody tr.inv-hold { background: #f33; }
.main tbody tr.not-received { background: #e29bd4; }
.main tbody tr.sn { background: #99f999; }
.main tbody tr.consolidating { background: #5498a2; }
.main tbody tr.consolidating-sent { background: #427f88; }
.main tbody tr.consolidating-coming { background: #44b0c0; }
.main tbody tr.on-hold { background: #FD6E8A!important; }
.main tbody tr.cancelled { color: #939393; background: #d7d3d3; text-decoration: line-through; }
.main tbody tr.completed { color: #6b6b6b; background: #e3e3e3; }
  .shipments .main tbody tr.completed { background: #ffffff80; color: #000; }
.main tbody tr.lost-completed { color: #b3b3b3; background: #dedede; }
.main tbody tr.archive { background: #848D82; color: #444; }
.main tbody tr.expecting { background: #95b71b; }
.main tbody tr.temp { background: #22ff4c; }
.main tbody tr.rts { background: #bb5087; }
.main tbody tr.returning { background: #bf3aa0; color: #ff78cd; }
.main tbody tr.returning-ds { background: #982f80; color: #ff78cd; }
.main tbody tr.returned { background: #ccc; color: #666; }
.main tbody tr.returned-ds { background: #a77b9d; color: #333; }
.main tbody tr.returned-pending { background: #c8b8b8; color: #666; }
.main tbody tr.done-returned { background: #bbb9b9; color: #666; text-decoration: line-through; }
.main tbody tr.returning-wfi-ds { background: #7b1b65; color: #ff78cd; }
.main tbody tr.rejected-returned { background: #000; color: #f59397; }
.main tbody tr.rejected-storage { background: #000; color: #f59397; }
.main tbody tr.rejected-bounced { background: #333; color: #f59397; }
.main tbody tr.hurt-returned { background: #ff4a4a; color: #f5c794; }
.main tbody tr.store-credit-returned { background: #dfb4fd; color: #000; }


.main tbody tr.completed a,
.main tbody tr.lost-completed a { color: inherit; text-decoration: none; cursor: pointer; }
.main tbody tr.completed a:hover,
.main tbody tr.lost-completed a:hover { color: #000; }

.main tbody tr.last-update td { border-top: 5px solid #000!important; }
.qtip-content img { width: 100%; }

span[class^="s-"] { border-radius: 3px; padding: 2px 4px; color: #333; background: #ffffff30; text-transform: uppercase; font-size: 9px; margin: 1px 0; display: inline-block; box-shadow: 0 1px 1px #00000040; }
.s-to-enter, .s-sent, .s-on-hold, .s-consolidating-sent, .s-consolidating-coming, .s-inv-hold, .s-rts, .s-not-received, .s-returning, .s-returning-ds, .s-returned,, .s-returned-ds, .s-returned-pending, .s-hurt-returned, .s-store-credit-returned, .s-rejected-returned, .s-rejected-bounced, .s-rejected-storage, .s-temp { background: #ffffff80 !important; }

/* MANUAL ENTRY LINES */
.AddEntries { width: 100%; clear: both; margin-top: 50px; }
.AddEntries > h3 { font-weight: 200; font-size: 1.5em; margin-left: 7px; }
.AddEntries button { margin-top: 10px; font-size: 1.0em; font-weight: 300; vertical-align: middle; background: #D0D102; color: #000; border: none; }
.newLine { background: #000!important; color: #fff; font-weight: bold; }

.main.add { display: inherit; }
.main.add input { width: 100%; border: 0; background: transparent; }
.main.add input:focus { background: #ffc; }
.main.add tr.add td { border-top: 10px solid #000; }


/* SHIPMENT #s DISPLAY 
jQuery is used to implement "content" values for .shmpt1 .shpmt2 etc. search "FENSONS: Shipment #s :before content generation" */ 
.shpd { position: relative; padding-left: 16px!important; }
[class*="shpmt"]::before { position: absolute; background: #f36; color: #fff; font-size: 8px; padding: 1px 4px; top: 50%; /* Vertically center */ transform: translateY(-50%) translateY(0); /* Center and move 10px up */ left: 0; border-radius: 2px; font-weight: bold; }


/* BUTTON PRESS VISUAL FEEDBACK */
a.js-submit.btn.btn-success.pull-right { transition: all 0.4s ease-in; position: relative; }
a.js-submit.btn.btn-success.pull-right:before { content: ''; background-color: #f36; border-radius: 50%; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: scale(0.001, 0.001); }
a.js-submit.btn.btn-success.pull-right:focus { outline: 0; color: #fff; }
a.js-submit.btn.btn-success.pull-right:focus:before { animation: effect_dylan 0.8s ease-out; }
@keyframes effect_dylan {
	50% {
    transform: scale(1.5, 1.5);
    opacity: 0;
  }
  99% {
    transform: scale(0.001, 0.001);
    opacity: 0;
  }
  100% {
    transform: scale(0.001, 0.001);
    opacity: 1;
  }
}


/* SALES VIEW */
body.view-sales { background: #fff; }
.view-sales #header { border-bottom: 2px solid #000; }
.view-sales #header { min-height: 0; }
.view-sales #middle { margin-top: 0; }
.view-sales #sales-container { margin-top: 40px; }
.view-sales .quickbar { position: fixed; top: 44px; left: 0; width: 195px; display: inherit; padding-left: 10px; }
.view-sales .quickbar div.col { padding: 0; }
.view-sales .details-wrap { top: 200px; }
.view-sales table.table thead tr th, table.table thead tr td { border: none; }
.view-sales tr#sales-grid-filters { border: none}
.view-sales .js-sales-table th { border-bottom: none; font-size: 1.3em; padding-bottom: 0; } /* filters table */
.view-sales span.select2-container { height: 34px !important; line-height: 1em; }
.view-sales a.quick-filter { margin-left: 10px; }
.view-sales .quick-filter.available { text-decoration: underline; }
.view-sales .quick-filter.disabled { pointer-events: none; }
.view-sales .grid-view .summary { margin-left: 8px; }
.view-sales .sales-quick-filters { margin: 10px 5px 50px 5px}
.view-sales .sales-quick-filters .col-lg-9 { padding-left: 30px}
.view-sales .sales-quick-filters .col-md-9 { font-size: 1.1em; padding-left: 3px}
.view-sales .padding-0 { padding: 0; }
.view-sales .sales-quick-filters .col-md-3 { padding-right: 3px}
.view-sales .prod { width: 135px; display: inline-block; margin: 0 5px 25px 0; vertical-align: top; }
.view-sales .prod img { width: 100%; background: #f3f3f3; }
.view-sales .prod .stat-label { font-weight: bold; }
.view-sales .prod .prod-img { position: relative; display: table-cell; width: 100%; height: auto; vertical-align: middle; background: #fff; min-width: 135px; }
.view-sales .prod-img a { width: 100%; display: block; height: auto; }
.view-sales .prod .flag.on { position: absolute; left: 0; background-color: #000; color: #fff; font-size: 11px; padding: 0 5px; bottom: 48px; }
.view-sales .prod .product-brand { text-transform: uppercase; padding: 5px 0 0 0; font-weight: bold; margin: 0; text-align: left; display: block; font-size: 12px; }
.view-sales .prod .product-stylename { display: block; font-size: 12px; line-height: 14px; }
.view-sales .prod .collection { display: block; font-size: 12px; line-height: 14px; margin: 2px 0; }
.view-sales .prod .mfgnumber { display: block; font-size: 12px; margin-bottom: 5px; color: #999; }
.view-sales .stat-margin { margin: 0 0 5px 0; border-bottom: 1px solid #ccc; padding-bottom: 3px; }
.view-sales .prod .sku { display: block; font-size: 10px; line-height: 1.1em; color: #555; border-bottom: 1px dotted #ccc; margin: 2px 0; padding: 1px 0 2px 0; }
.view-sales .prod .data { float: right; text-align: center; text-decoration: inherit; display: inline-block; margin-left: 2px; padding: 0 3px; font-size: 10px; border-radius: 3px; }
.view-sales .prod .returned { background: #eeacac; }
.view-sales .prod .qty { background: #b9de9b; }
.view-sales .prod .wfi-qty { background: #f8e163; }
.view-sales .grid-view .pagination { margin-bottom: 15px; }
.view-sales .cancel-filter { margin-top: 15px; }
.view-sales .cancel-filter span { margin-left: 5px; margin-bottom: 7px; }
.view-sales .filter-item { max-width: 500px; overflow: hidden; display: inline-block; vertical-align: bottom; text-overflow: ellipsis; }
.view-sales .cancel-filter .close-button { font-weight: bold; margin-left: 5px }

#data-panel { position: fixed; bottom: 0; width: 100%; background: #e5e0dd; left: 0; z-index: 100000; height: 150px; max-height: 70%; overflow-y: auto; box-shadow: 0 3px 20px; border-top: 1px solid #999; padding: 20px 20px 100px 0; }
#data-panel:before { content: "Sales Data"; font-size: 42px; font-weight: bold; margin: 0 0 20px 10px; /* text-transform: uppercase; */ color: #fff; text-shadow: 0 1px 2px #ccc; }
#data-panel h2 { padding-left: 5px; margin-top: 40px; }
#data-panel .items-count { display: inline-block; width: fit-content; }
#data-panel .items-percent { display: inline-block; }
#data-panel span.items-percent { font-size: 9px; margin-left: 3px; color: #999;}
.view-sales #brand-total-data { margin-top: 25px; }
.view-sales .stats-header { margin: 0 0 5px 0; font-weight: bold; font-size: 1.5em; }
.view-sales .stats-figures { float: right; text-align: right; }
.view-sales .brand-sales { margin: 15px 0 15px 0; }
#data-panel ul { list-style: none; text-align: left; margin: 0 0 40px; padding: 0; max-height: 230px; overflow: auto; }
#data-panel li { text-align: left; margin-bottom: 1px; background: #fff; padding: 3px 0 3px 15px; }
#data-panel span { display: inline-block; min-width: 40%; }
.view-sales .size-container { margin: 0; }
.view-sales .size-container .product-name { padding-top: 15px; }
.view-sales .size-container .items-details .col { width: 55px; }
.view-sales .size-container .items-details .col .items-count { font-size: 1.5em}
.yearstats { margin-top: 20px; }

/* PRODUCTS VIEW */
.view-products { font: 80%/120% Tahoma, Arial, Helvetica,  non-serif; background: #fff; background: #fff; color: #000; }
.view-products #header { border-bottom: 2px solid #000; }
.view-products .container { }
.view-products #middle { margin-top: 25px!important; }
.view-products .quickbar { position: fixed; top: 44px; left: 0; width: 195px; height: calc(100% - 44px); }
.view-products .quickbar #updated-time { font-size: 0.95em; }
.view-products .quickbar .update-button { background-color: #e4e4e4; text-shadow: none; height: 20px; width: fit-content; display: block; margin: 5px 0; color: #000; }
.view-products .quickbar .updatebuttons { position: absolute; bottom: 5px; left: 10px; }
.view-products .quickbar .quickie-filters { margin-top: 50px; }
.view-products .quickbar h3 { font-size: 1.1em !important; border: 0; font-weight: normal; }
.view-products .quickbar .quickie-filters span { }
.view-products .quickbar .quickie-filters a { display: block; width: fit-content; }

.view-products .filters-header { position: sticky; top: 25px; background: #fff; z-index: 10; width: 100%;  }
.view-products .current-filters span.title { display: block; text-transform: uppercase; font-weight: bold; margin: 0 0 5px 10px; }

.view-products #data-panel button { margin: 20px 10px; }
.view-products #data-panel { padding: 50px 30px !important; }

.filters-views-actions {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  width: 100%; /* Full width container */
  gap: 10px; /* Optional: space between elements */
}

.filters-views-actions .current-filters {
  flex: 0 0 25%; /* Fixed width at 25% */
}

.filters-views-actions .col-filters {
  flex: 0 0 20%; /* Fixed width at 15% */
}

.filters-views-actions .col-views {
  flex: 0 0 15%; /* Fixed width at 10% */
}

.filters-views-actions .col-actions {
  flex: 1; /* Remaining space */
}

.view-products #data-panel { position: fixed; bottom: 0; width: 100%; background: #e5e0dd; left: 0; z-index: 100000; height: 150px; max-height: 70%; overflow-y: auto; box-shadow: 0 3px 20px; border-top: 1px solid #999; padding: 20px 20px 100px 0; }
.view-products #data-panel:before { content: "Selected SKUs"; font-size: 42px; font-weight: bold; margin: 0 0 20px 10px; /* text-transform: uppercase; */ color: #fff; text-shadow: 0 1px 2px #ccc; }
#selected-skus-content pre {text-wrap: pretty; }
#selected-skus-content div {display: inline-block;width: 200px;vertical-align: top;margin-right: 20px;padding-right: 10px;border-left: 1px solid #ccc;padding-left: 10px;}
#selected-skus-content span {display: block;font-weight: bold;font-size: 20px;margin-bottom: 5px;}

    /* TOGGLE SWITCHES for the VIEW OPTIONS Panel */
.view-products .col-views:before { content: "View Options"; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 10px; }
.view-products .col-views .header-views { column-count: 2; }
.view-products .col-views .toggle-switch-container { display: flex; align-items: center; margin-bottom: 2px; } /* Flex container for toggle and label */
.view-products .col-views .toggle-switch { position: relative; display: inline-block; width: 30px; height: 15px; margin-right: 10px; margin-bottom: 1px; zoom: 0.8; } /* Adjusted size */
.view-products .col-views .toggle-switch input { opacity: 0; width: 0; height: 0; } /* Hide default checkbox */
.view-products .col-views .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: background-color 0.4s ease, transform 0.4s ease; border-radius: 15px; } /* Animation added */
.view-products .col-views .slider:before { position: absolute; content: ""; height: 13px; width: 13px; left: 1px; bottom: 1px; background-color: white; transition: transform 0.4s ease; border-radius: 50%; } /* Transition added */
.view-products .col-views input:checked + .slider { background-color: #2196F3; }
.view-products .col-views input.toggle-orange:checked + .slider { background-color: #ff8801; }
.view-products .col-views input:checked + .slider:before { transform: translateX(15px); } /* Animation on the slider */
.view-products .col-views label span { white-space: nowrap; } /* Spacing for text */

/* ACTIONS BUTTONS */
.view-products .col-actions { display: flex; flex-wrap: wrap; }
.view-products .col-actions button { flex: 1 1 calc(50% - 10px); background: #efefef; margin: 2px 2px; color: #000; }
.view-products .col-actions button.js-show-selected, 
.view-products .col-actions button.js-show-selected-or, 
.view-products .col-actions button.js-export-csv { flex: 1 1 calc(33.33% - 10px); }
.view-products .col-actions button.uncheck-selected, 
.view-products .col-actions button.js-select-all { background: #d7d7d7 !important; }
.view-products .col-actions select { flex: 1 1 100%; width: fit-content; height: auto; padding: 5px; font-size: 11px; }
.view-products .quickie-filters { line-height: inherit; }
.view-products .quickie-filters button { margin: 1px; }
.view-products .quickie-filters span { display: block; text-transform: uppercase; font-weight: bold; margin-bottom: 5px; }
.view-products .quickie-filters a { display: inline-block; margin: 3px 0; text-transform: uppercase; border: 1px solid #ccc; padding: 3px 10px; text-decoration: none; font-size: 10px; }
.view-products .quickie-filters a:hover { color: #fff; background: #000; }
.view-products .summary { margin: 10px 0; }
.view-products .summary b { margin-right: 10px; }
.view-products .row.sales-quick-filters { margin-bottom: 10px; }
.js-cancel-filter { margin-right: 5px; background: #000; font-size: 11px; padding: 5px 10px 5px 15px; border-radius: 5px; color: #fff; border: none; max-width: 500px;
  overflow: hidden !important;  text-overflow: ellipsis; white-space: nowrap;}
.view-products b.filter-item { margin-left: 5px; }
.view-products .js-cancel-filter .close-button { margin: 0 0 0 5px; }
.view-products .js-stock-table th { border-bottom: none; font-size: 1.3em; padding-bottom: 0; } /* filters table */
.view-products .js-stock-table td { width: 200px; } /* filters table */
.view-products span.select2-container { height: 34px !important; line-height: 1em; }
.view-products .prod { position: relative; width: 135px; display: inline-block; margin: 0 5px 25px 0; vertical-align: top; font-size: 1.3em; padding: 9px 0 15px 0; }
.view-products .prod img { width: 100%; height: auto; background: #fff; }
.view-products .pimg { position: relative; margin-bottom: 5px; background: #fff; }
.view-products .pimg .flag { position: absolute; right: 0px; background: #f36; color: #fff; font-size: 0.7em; padding: 1px 5px; }
.view-products .pimg .hvn { bottom: 21px; padding: 3px 5px; background: #009688; }
.view-products .pimg .pre { bottom: 41px; }
.view-products .pimg .fs { bottom: 61px; }
.view-products .pimg .sfd { bottom: 62px; }
.view-products .pimg .sfd span { text-transform: uppercase; }
.view-products .pimg .co { bottom: 0; left: 0; right: 0; background: rgba(11, 153, 255, 0.95)!important; text-align: center; box-shadow: none!important; }
.view-products .pimg .new { bottom: 82px; text-transform: uppercase; }
.view-products d { position: absolute; bottom: 5px; left: 0; background: #c00; color: #fff; padding: 2px 5px; font-size: 0.85em; }
.view-products brand { text-transform: uppercase; padding: 0; font-weight: bold; text-align: left; display: block; font-size: 12px; line-height: 1em; }
.view-products year { font-size: 0.7em; }
.view-products name { margin: 2px 0 10px 0; display: block; font-size: 0.9em; line-height: 1em; }
.view-products coll { display: block; font-size: 0.75em; line-height: 1.0em; margin: 0 0 8px 0; }
.view-products .sku-actions { position: relative; display: block; margin: 10px auto 0 auto; text-align: center; border: 1px solid transparent; }
.view-products .sku-actions:hover { border: 1px dotted #ccc; }
.view-products .sku-actions input[type="checkbox"] { zoom: 1.7; margin-top: 2px; }
.view-products .stylenumber { font-size: 0.75em; font-weight: bold; }
.view-products .sku { display: block; font-size: 10px; line-height: 1.1em; border-bottom: 1px dotted #ccc; padding-top: 2px; }
.view-products .copy-sku { position: absolute; right: 0; }
.view-products .sku-actions button { margin-top: 5px; text-transform: uppercase; font-size: 10px; }
.view-products .sku .stock { text-transform: uppercase; }
.view-products .sku .data { float: right; text-align: right; text-decoration: inherit; }
.view-products .sku.g { font-weight: bold; }
.view-products .sku.g .oos { xcolor: #c00; }
.view-products .sku.c {}
.view-products .sku.oos { xbackground: url("../fensons/oos.png") no-repeat -3px -3px; xpadding-left: 10px; xcolor: #999; xtext-decoration: line-through; }
.view-products .sku.s.ds { color: #369; }
.view-products .sku.s .stock { color: #c00!important; font-weight: bold; }
.view-products .sku.s .stock span { color: #fff !important; padding: 0 2px; background: #119eff; border-radius: 2px; }
.view-products .sku.disabled { background: url("../fensons/disabled.png") no-repeat 0 2px; padding-left: 12px; color: #ccc; }
.view-products totalstock { display: block; font-size: 11px; border-top: 1px dotted #000; padding: 2px 0 0 0; }
.view-products totalcost { font-size: 11px; border-bottom: 1px dotted #000; display: block; padding: 0 0 2px 0; }
.view-products totalcost span, 
.view-products totalstock span { font-weight: bold; }
.view-products cats { margin: 5px 0; }
.view-products cats ul { padding: 0; margin: 10px 0; overflow: auto; }
.view-products cats a { color: #fff; }
.view-products cats a:hover { color: #666; text-decoration: none; }
.view-products cats li {  background-color: #521988; border: 1px solid #EEEEEE; float: left; list-style: none; margin: 0; padding: 2px 4px; font-size: 0.7em; }
.view-products cats li:hover { background-color: #eee; }
.view-products cats.all-cats { xdisplay: none; } /* show/hide all categories */
.view-products cats.all-cats li { background-color: #f6f6f6; padding: 0 4px; margin: 0 2px 1px 0; border: 1px solid #ddd; }
.view-products cats.all-cats li a { color: #000; }
.view-products .buttons { position: fixed; top: 0; right: 0; z-index: 1000; font-size: 100%; background-color: rgba(0,0,0,0.6); padding: 10px 20px; .view-products border-radius: 0 0 0 4px; }
.view-products .buttons button { display: inline-block; padding: 3px 15px; }
.view-products .button-csv { margin-bottom: 20px; }
.view-products price { margin: 5px 0 5px 0; font-size: 0.8em; display: block; }
.view-products price p { margin: 0; display: inline-block; }
.view-products .special-price .price-label { display: none; }
.view-products .sel-container { display: flex; flex-wrap: wrap; padding: 10px 0; font-size: 11px; background: #ffe892; margin-top: 8px; }  /* PERCENTAGES BOX */
.view-products .sel-container .sel { font-weight: normal; flex: 50%; margin-bottom: 0; text-align: left; }
.view-products .sel-container .sel input { margin: 0; vertical-align: middle; }
.view-products button#listMoreButton { zoom: 2; }

.view-products .minimal-price {}
.view-products .regular-price,
.view-products .regular-price .price { color: inherit; font-weight: bold; font-size: inherit; }
.view-products .old-price,
.view-products .old-price .price { text-decoration: line-through; padding-right: 5px; font-weight: normal; color: inherit; }  /* for striking out old prices to show sale price */
.view-products .special-price,
.view-products .special-price .price { color: #c00!important; font-weight: normal; }  /* SALE PRICE - new price when on sale */
.view-products .regular-price .price { color: #000!important; font-weight: 400!important; }
.view-products .prod.retired { opacity: 0.6; background: #ddd; xborder-top: 12px solid #d72929; xborder-radius: 5px 5px 0 0; }
.view-products .prod.retired .pimg { mix-blend-mode: darken; }
.view-products .prod.retired cats.all-cats li { background: none; border: 1px solid #bbb; }
.view-products .prod.retired .sku.disabled { color: #000; }
.view-products .prod.synced:before { content: ""; background: #000 url("../fensons/icon-sync5-white.svg") center no-repeat; background-size: 10px; height: 20px; width: 20px; display: inline-block; position: absolute; top: 5px; z-index: 5; border-radius: 20%; }
.view-products .synced { background: #ffe9ff; box-shadow: 0 0 3px #f36; }
.view-products .synced .data.qty.stock {  background-color: #c00 !important; color: #fff!important; display: inline-block; border-left: 1px dotted #000; padding: 0 3px; }
.view-products .synced .data.qty.stock span { color: #fff !important; padding: 0 2px; background: #119eff; border-radius: 2px; }
.view-products .synced cats li { background: #eac2d5; color: #000; box-shadow: 0 0 3px #ccc; border: 0.5px solid #fff; }
.view-products .synced img { mix-blend-mode: darken !important; }


.view-products .js-stock-table th:nth-child(6), table.table.js-stock-table td:nth-child(6) { width: 100px; }  /* YEAR */
.view-products .js-stock-table th:nth-last-child(2), table.table.js-stock-table td:nth-last-child(2) { padding-right: 40px; }
.view-products .js-stock-table th:last-child, table.table.js-stock-table td:last-child { border-left: 1px solid #ccc; padding-left: 40px; }

.view-products .sku-actions li.select2-selection__choice { background: #2196F3 !important; color: #fff !important; border: 0 !important; font-size: 11px !important; border-radius: 3px !important; }
.view-products .sku-actions span.select2-selection__choice__remove { margin: 0 auto 0 5px !important; color: #fff !important; text-shadow: none !important; opacity: 1 !important; }
.view-products .js-add-remove-collection { font-size: 11px; font-weight: normal; font-family: monospace; padding: 5px 4px; position: absolute; top: 0; right: 0; }
.view-products .js-add-remove-tags { font-size: 11px; font-weight: normal; font-family: monospace; padding: 5px 4px; }


/* RESIZE IMAGES BUTTONS */
.resize-images { margin: 25px 0 10px 0; }
.resize-images span { display: block; padding-bottom: 3px; font-size: 10.5px; text-transform: uppercase; }
.resize-images button { background: #efefef; margin: 2px 2px; color: #000; width: 25px; height: auto; text-shadow: none; font-size: 1.2em; }


/* COPY TO CLIPBOARD */
.copy-to-clipboard { float: right; }
.copy-to-clipboard.glyphicon { zoom: 1.1; }
.view-products .copy-to-clipboard { display: none; text-decoration: none; }
.view-products .prod:hover .copy-to-clipboard { display: inline-block; }
.clipboard-notification { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgb(193, 19, 19); font-size: 20px; color: #fff; border-radius: 10px; padding: 20px 40px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); display: none; }
.clipboard-notification { display: block; /* Make it visible when added */ animation: fadeinout 2s; }
@keyframes fadeinout {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}


/* EMAIL ACTIONS TEMPLATES */
#email-template-container [contenteditable="true"] { background: rgba(226,223,220,0.3); }  /* highlight editable sections */
.status-text-bar:hover { max-height: 1000px; }
.silently { display: inline-block; margin: 10px 14px 0 0; color: #ccc; }
.silently label { font-weight: normal; vertical-align: top; line-height: 1em; padding: 0; margin: 0; text-transform: uppercase; font-size: 10px; }
.silently label input { margin: 0 2px 0 0; padding: 0; line-height: 1em; border-color: #ccc !important; }


/* BLACKLIST VIEW */
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,0.3); }


/* STATUS EMAIL */
td.js-form-status img { width: 140px!important; }
.subjectline { padding: 10px; padding: 10px 20px; font-size: 1.2em; background: #f3f3f3; border: 1px solid #e3e3e3; }
.subjectline span { margin-left: 10px; padding: 2px 5px; }

/* HIGHLIGHT ROW WHEN CHECKMARK SELECTED */
.main tbody tr.highlight { background-color: #fffc8e;  }


/* FOOTER
============== */
#footer { margin-top: 40px; font-size: 0.9em; text-align: center; padding-bottom: 20px;  }

/* ALERTS */
.absolute-alert { position: absolute; z-index: 10002; top: 0; width: 800px; left: 50%; margin-left: -400px; font-size: 1.5em; }
.alert-danger { background-color: #ff4040; color: #fff; padding: 50px; }
.alert-danger button.close { color: #fff; opacity: 1; text-shadow: none; background: rgba(255,255,255,0.1); padding: 5px 10px; }

.modal { z-index: 15002; }
.status-text-bar {  overflow-x: scroll; white-space: nowrap; width: 90%; margin: 15px 0 0 15px; max-height: 75px; }
.status-text-bar div { display: inline-block; margin-right: 20px; vertical-align: top; max-width: 150px; white-space: normal; }

/* UPDATE VENDOR ACTION MODAL */
div[aria-describedby="update-vendor-dialog"] { width: 800px!important; }
div[aria-describedby="update-vendor-dialog"] .ui-dialog-titlebar { background: #fff; border: 0; font-size: 28px; margin: 40px 50px 10px 20px; letter-spacing: -1px; }
#update-vendor-dialog { padding: 0 50px 10px 50px; }
#update-vendor-dialog p:first-child { font-size: 14px; margin-bottom: 0; padding-bottom: 20px; border-bottom: 1px solid #ccc; }
#update-vendor-dialog p { line-height: 1.2em; }
#update-vendor-dialog fieldset { margin-bottom: 15px; }
#update-vendor-dialog label { font-size: 1.3em; margin-bottom: 0; }
#update-vendor-dialog input[type="checkbox"] { zoom: 1.2; } 
#update-vendor-dialog textarea { font-size: 1.2em; }
#update-vendor-dialog fieldset:last-child { margin-bottom: 0; }
#update-vendor-dialog tr.order-number-row td { padding-top: 20px!important; }
#update-vendor-dialog tr.order-item-row td { padding: 10px 0 20px 0 !important; }

/* CHECK SHIPPING RATES MODAL */
#shipping-rates-container div { margin: 0 0 10px 0; }
#shipping-rates-container div b { display: block; font-size: 14px; }

/* WFI SSA/MIS DOWNLOAD MODAL */
#wfi-ssa-msi-modal .modal-footer { text-align: inherit; }

/* MIS DOWNLOAD FOR DS RETURNS MODAL */
#mis-ds-returns-modal .modal-footer { text-align: left; }
#mis-returns-number { background: #e3e3e3; padding: 10px; }


/* COPY DIV TO CLIPBOARD ENCLOSING DIV EMAIL STATUSES */
.copy-content,
.copy-table-cell { cursor: pointer; position: relative; }
.copy-content:hover {  }

.copy-button { position: relative; }
.copy-button:hover .copy-button-element { display: block; }
.copy-button-element { display: none; position: absolute; top: 0; right: 0; background-color: #000; color: #fff; padding: 2px 5px; border-radius: 3px; font-size: 8px; cursor: pointer; font-weight: normal; }
.copied-message { position: absolute; top: 0; right: 0; background-color: #ffcd00; padding: 2px 5px; display: none; text-transform: uppercase; font-size: 8px; border-radius: 3px; color: #000;  }

/* EXPAND/CONTRACT BUTTONS */
.expanding { max-height: 70px; overflow: hidden; transition: max-height 0.3s ease-in-out; border-bottom: 1px solid #ccc; }
.expanding.details-boxes { max-height: 90px; }
.expanding:hover { max-height: 1000px!important; /* A value large enough to fit the content */ }
.details .spendstats { margin: 10px 0 10px 0; max-height: 45px; }
.expanded-button { background-color: rgb(53, 54, 53); color: white; }
.expand-all-button-container { text-align: right; }
.expand-all-button-container #expand-all-button { text-transform: uppercase; font-size: 8px; letter-spacing: 0.5px; background: none; box-shadow: none; }
.expand-all-button-container #expand-all-button img { width: 15px; height: 15px; }
.expanding:after { height: 15px; background: linear-gradient(0deg, rgba(2, 0, 36, 0.06) 0%, rgba(0, 0, 0, 0.005) 100%); content: ""; display: block; position: sticky;bottom: 0; }



/*
VENDORS TAB
========================================*/
.view-vendor { xfont: 1.2em/1.7em Tahoma!important; background: #9e9d8e; /*#eae9e2;*/ }
.view-vendor #siteholder { position: relative; width: 100%; max-width: 1500px; margin: 0 auto; box-shadow: 0 1px 4px #666; background: #eae9e2; min-height: 900px; }
.view-vendor #header,
.view-vendor .details-wrap,
.view-vendor .status-filter { position: absolute!important; }
.view-vendor .sn-alert { height: 70px; background: #ffc300; font-size: 20px; color: #444; display: flex; align-items: center; justify-content: center; text-align: center; }
.view-vendor .sn-alert strong { color: #000; margin-right: 10px; }
.view-vendor .sn-alert span { xpadding: 5px 8px; xborder-radius: 5px; xbackground-color: #bdda91; xfont-size: 14px; xbox-shadow: 0px 1px 1px #0005; font-weight: bold; margin: 0 10px; }

.view-vendor #header { background: #eae9e2; }
.view-vendor #header .tabs { font-size: 10px; margin-bottom: 20px; border-bottom: 1px solid #ddd; }
.view-vendor #header .quickbar { width: 100%; display: flex; padding-left: 175px;  }
.view-vendor #header .quickbar .search-bar { width: 200px; }
.view-vendor #header .quickbar .view { width: 250px; }
.view-vendor #header .quickbar .update { min-width: 140px; }
.view-vendor #header .quickbar .actions { margin-left: 25px; width: fit-content; }
.view-vendor .tabsItem span { margin: 0 10px; font-weight: normal; }
.view-vendor .quickbar button { font-size: 11px; }
.view-vendor .quickbar .actions .actions-content { height: inherit; }
.view-vendor .action-label { display: inline-block; text-transform: uppercase; margin-right: 5px; padding-left: 5px; }
.view-vendor .action-label:nth-of-type(2) { margin-left: 20px; }
.view-vendor .packing-slip-and-shipping-label { margin-top: 5px; }

.view-vendor #middle { font-size: 11px; }

.view-vendor .vendor-brands { width: 300px; margin: 0; position: absolute; right: 30px; padding: 10px 15px 10px 15px; xbackground: #fff; xbox-shadow: 0 1px 2px #ccc; border-radius: 4px; }
.view-vendor .vendor-brands:before { content: "Vendors:"; font-weight: bold; font-size: 15px; }
.view-vendor .vendor-brands #vendor-brands-form span.select2-selection.select2-selection--multiple { border-radius: 2px; background: #fff; border: 0; box-shadow: 0 1px 1px #ccc; }
.view-vendor .vendor-brands #vendor-brands-form li.select2-selection__choice { background: #fff; text-transform: uppercase; font-size: 11px; line-height: 20px; }
.view-vendor .vendor-brands #vendor-brands-form span.select2-selection__choice__remove { line-height: 13px; font-weight: normal; font-size: 15px; color: #000!important; padding-left: 3px; }
.view-vendor .report-issue { background: #ff8e8e!important; }
.view-vendor .send-sns { background: #bdda91!important; }
.view-vendor .confirm-return { background: #f4e7a8 !important; }
.view-vendor .print-packing-slip,
.view-vendor .print-shipping-label { background: #f6f6f6 url("../fensons/icon-printer-white.svg") 7px center no-repeat !important; padding-left: 26px; background-size: 14px !important; }
.view-vendor .export-packing-slip,
.view-vendor .export-shipping-label { background: #f6f6f6 url("../fensons/icon-download.svg") 3px 2px no-repeat !important; padding-left: 21px; background-size: 15px !important; }

.view-vendor .status-filter { top: 210px; left: 0; width: 180px; margin: 0; background-color: #111727; z-index: 10001; }
.view-vendor ul.vTabs { padding: 0; margin: 0; font-size: 15px; }
.view-vendor ul.vTabs li { padding: 0; }
.view-vendor ul.vTabs li a { color: #7E7A7A; padding: 5px 15px !important; display: block; text-decoration: none; }
.view-vendor ul.vTabs li a:hover { text-decoration: none; }
.view-vendor ul.vTabs li.active { padding: 0px; background-color: #504C4C; color: #fff; }
.view-vendor ul.vTabs li.active a { color: #fff; font-weight: bold; }
.view-vendor ul.vTabs li .orders-count { float: right; background: #FF2D47; color: #fff; padding: 2px 7px; border-radius: 8px; font-size: 10px; font-weight: bold; margin: 5px 15px 0 0; border: 1px solid #920315; }

.view-vendor .details-wrap { top: 25px; background: #111727; padding-top: 455px; color: #ccc; padding-left: 15px; }
.view-vendor .details-wrap:before { content: ""; position: absolute; top: 75px; left: 0; height: 50px; background-image: url("https://cdn.shopify.com/s/files/1/0326/1330/2408/files/sw-white-vertical.svg?v=1727516056"); background-size: 140px; background-repeat: no-repeat; background-position: center; xfilter: invert(1); width: 100%; }
.view-vendor .beta:before { content: "Beta"; position: absolute; top: 30px; text-transform: uppercase; transform: translate(-50%); left: 50%; color: #ffffff90; background: #444; padding: 1px 11px 1px 10px; xborder-radius: 0 2px 2px 0; }
.view-vendor .ordernumber { color: #fff; margin-bottom: 30px;  }
.view-vendor .details h3 { font-weight: normal!important; }
.view-vendor .details .tabs { display: flex; justify-content: start; margin-bottom: 10px; text-transform: uppercase; border-bottom: 1px solid #333; }
.view-vendor .details .tab-link.active { background: none; color: #888; }
.view-vendor .details .shipping span:empty:before { color: #555; }
.view-vendor .shipping-name { color: #fff; }
.view-vendor #shipping-first-name,
.view-vendor #shipping-last-name,
.view-vendor #address-1,
.view-vendor #address-2,
.view-vendor #shipping-city,
.view-vendor #shipping-region,
.view-vendor #shipping-country,
.view-vendor #shipping-postcode,
.view-vendor #shipping-telephone { cursor: pointer; /* Change to pointer cursor */ user-select: none; /* Prevent text selection on double-click */ }

.view-vendor #middle { margin-top: 165px; margin-left: 190px; }

.view-vendor .filters td { background: none !important; }
.view-vendor .main input { width: 100%!important; }
.view-vendor .main tbody tr { background: #fff!important; }
.view-vendor .main tbody tr.cancelled { color: #939393; background: #d7d3d3!important; text-decoration: line-through; }
.view-vendor .main tbody tr.completed { color: #bbb; background: #e3e3e3!important; }
.view-vendor .main tbody tr.returning-ds { background: #982f80!important; color: #ff78cd; }
.view-vendor .main tbody tr.returning-wfi-ds { background: #7b1b65!important; color: #ff78cd; }
.view-vendor .main tbody tr.consolidating,
.view-vendor .main tbody tr.consolidating-coming { background: #b5e0e2!important; }
.view-vendor .main tbody tr.on-hold { background: #FD6E8A!important; }
.view-vendor .main tbody tr.sn { background: #99f999!important; }

.view-vendor .main [data-attribute='date']) { width: 80px!important; min-width: inherit; }
.view-vendor .main [data-attribute='order_number'] { width: 60px!important; text-align: center; }
.view-vendor .main [data-attribute='status'] { width: 80px; max-width: 110px; min-width: inherit; cursor: pointer; }
.view-vendor .main [data-attribute='prod-img'] { max-width: 50px; text-align: center; }
.view-vendor .main [data-attribute='style_number'],
.view-vendor .main [data-attribute='product_name'] { cursor: pointer; }
.view-vendor .main [data-attribute='sku'] { max-width: 155px!important; }
.view-vendor .main [data-attribute='barcode'] { padding: 0 10px; }
.view-vendor .main td[data-attribute='tracking'] { background: #174e0840; min-width: 100px; border-radius: 10px; text-align: center; }
.view-vendor .main td[data-attribute="tracking"]:empty:before { content: "Enter tracking here"; font-size: 10px; color: #00000070; pointer-events: none; padding-left: 2px; }
.view-vendor .main td[data-attribute='tracking']:focus { background: #f6e797; }
.view-vendor .main .returned td[data-attribute='tracking'] { background: inherit; }
.vv-fulfilled.view-vendor .main td[data-attribute='tracking'],
.vv-all.view-vendor .main td[data-attribute='tracking'] { background: inherit!important; }

.view-vendor .synced td[data-attribute="order_number"]::before { content: "X"; background-size: 10px; background-color: #f36; mask: url(../fensons/icon-sync5-black.svg) center center no-repeat; -webkit-mask: url(../fensons/icon-sync5-black.svg) center center no-repeat; mask-size: 10px; -webkit-mask-size: 10px; margin-right: 5px; }


/* MODALS */
.view-vendor #send-sns-modal .modal-dialog { width: 600px!important; }
.view-vendor #send-sns-modal .col-lg-6, 
.view-vendor #send-sns-modal .col-lg-8 { width: inherit; }
.view-vendor #send-sns-modal .modal-body { font-size: 14px; }

.view-vendor .modal-body table { width: 100%; }
.view-vendor .modal-lg { width: 900px !important; }
.view-vendor .modal-lg .modal-content.email-templates { padding: 30px 50px; background: #f1f0ee; }
.view-vendor .modal-lg textarea { border: 0; background: #eee; }
.view-vendor .modal-lg .vmodalmessage { font-size: 15px; width: 100%; }
.view-vendor .footer .links { display: inline-block; text-transform: uppercase; margin-bottom: 5px; }
.view-vendor .footer .links a { display: block; border: 1px solid #bbb; padding: 3px 10px; border-radius: 3px; background: #fff; box-shadow: 0 1px 1px #ccc; text-decoration: none;  }
.view-vendor .footer .copyright { }

.view-vendor.vv-unfulfilled .main [data-attribute='shipped'],
.view-vendor.vv-on-hold .main [data-attribute='shipped'],
.view-vendor.vv-cancelled .main [data-attribute='tracking'],
.view-vendor.vv-cancelled .main [data-attribute='sw_label'],
.view-vendor.vv-cancelled .main [data-attribute='shipped'],
.view-vendor.vv-returning .main [data-attribute='shipped'],
.view-vendor.vv-returning .main [data-attribute='sw_label'],
.view-vendor.vv-returning .main [data-attribute='tracking'],
.view-vendor.vv-returning .main [data-attribute='vendor_notes'],
.view-vendor.vv-returning .main [data-attribute='days_since_ordered'],
.view-vendor.vv-returned .main [data-attribute='vendor_notes'],
.view-vendor.vv-returned .main [data-attribute='sw_label'],
.view-vendor.vv-returned .main [data-attribute='tracking'],
.view-vendor.vv-returned .main [data-attribute='days_since_ordered'],
.view-vendor.vv-returned .main [data-attribute='shipped'],
.view-vendor.vv-fulfilled .main [data-attribute='sw_label'] { display: none; }


/* EMAIL TEMPLATE Warning notice */
.fee-warning { position: absolute; top: 140px; background: #ff0442; width: 100%; text-align: center; color: #fff; font-size: 3.0em; line-height: 2em; font-weight: bold; }


/* SHOW/HIDE TOGGLE FOR EMAIL TEMPLATES */
.modal-content { max-height: calc(100vh - 40px) !important; overflow: auto; transition: max-height 0.3s ease; }
.modal-content.collapsed { max-height: 150px!important; }
.modal-body { max-height: calc(100vh - 40px); overflow: auto; }
.modal-footer { position: sticky; bottom: 0; background: #fff; }

/* ACTION DOTS POPUP */
.hover-cell { position: relative; cursor: pointer;  }
.dots { display: none; position: absolute; top: 50%; left: 100%; background-color: #fff; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; padding: 0; z-index: 1000; font-size: 12px; }
.dots::before { content: ''; position: absolute; top: 50%; left: -6px; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #eee; }
.dots b { text-transform: uppercase; }
.dots ul.dots-dropdown { padding: 5px 0; }
.dots ul { list-style-type: none; margin: 0; padding: 0; }
.dots ul li { margin: 0; white-space: nowrap; padding: 7px 15px; border-bottom: 1px solid #eee; }
.dots ul li:last-child { border: 0; }
.dots ul li:hover,
.dots ul li:hover > a { background: #eee!important; }
.dots ul li a { text-decoration: none; display: block; width: 100%; height: 100%; color: #000!important; }
.dots ul li a:hover { color: #fff; }
.hover-cell:hover .dots { display: block; }

/* ON HOLD Vendor Order Updated notification */
.vendor-update-notification-popup { padding: 20px; background-color: #c8b8b8; left: 700px; top: 25px; }


/* LEGEND tab */
.legend-container { position: fixed; right: 0; top: 30%; transform: translate(100%, -50%); z-index: 1000; transition: transform 0.3s ease; }
.legend-container.open { transform: translate(0, -50%); }
.legend-tab { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); background-color: #333; color: white; padding: 15px 10px; cursor: pointer; border-radius: 5px 0 0 5px; font-weight: bold; writing-mode: vertical-rl; text-orientation: mixed; user-select: none; }
.legend-tab:hover { background-color: #555; }
.legend-panel { background-color: white; border: 2px solid #333; border-right: none; border-radius: 5px 0 0 5px; padding: 20px; box-shadow: -2px 0 10px rgba(0,0,0,0.1); min-width: 200px; }