@import "Badge.css?v=4";
@import "ButtonOverflow.css?v=2";
@import "DynarchCalendar.css?v=2";
@import "FieldFilter.css?v=7";
@import "FontFamily.css?v=2";

:root {
    --header-height: 46px;
    --primary-purple: #6314A8;
    --primary-purple-hover: #551290;
    --purple-light: #eef1fd;
    --page-bg: #f4f5f8;
    --surface: #ffffff;
    --surface-2: #f7f8fa;
    --border: #e3e6ec;
    --border-light: #edf0f4;
    --input-underline-width: 1.5px;
    --input-underline-color: var(--border);
    --input-underline-focus: var(--primary-purple);
    --input-underline: var(--input-underline-width) solid var(--input-underline-color);
    --text-1: #1a1d23;
    --text-2: #52596b;
    --text-muted: #6b7280;
    --text-header: #9199a8;
    --green: #15803d;
    --green-bg: #dcfce7;
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
}
/* ================================================================
   Button styles for Master-role users only.
   Scoped to .menu-btns — the action bar above the table in _V pages.
   Loaded conditionally via Includes.ascx when IsMaster = true.
   ================================================================ */

.pt-12 {
    padding: 12px 0 0 0 !important;
}

.mt-12 {
    margin-top: 12px !important;
}

.mt-10 {
    margin: 10px 0 0 0 !important;
}

.menu-btns {
    display: block;
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 16px;
}

.menu-btns button,
.menu-btns input[type="button"] {
    border: none !important;
    border-radius: 0 !important;
}

.menu-btns button:hover,
.menu-btns input[type="button"]:hover {
    color: #6314A8 !important;
    border-bottom: 2px solid #6314A8 !important;
    background-color: transparent !important;
}

.gray-edit-btn-text:hover {
    color: #6314A8 !important;
}

.menu-btns button:hover svg path {
    stroke: #6314A8;
}

/* Old-design restyle CRUD buttons keep their colour on hover (Default.css forces
   the icon stroke to #fff for a filled-button look, but the new toolbar hover makes
   the background transparent — without these the icon would go white/invisible). */
.menu-btns .add-btn-restyle:hover svg path {
    stroke: #23B13A !important;
}

.menu-btns .edit-btn-restyle:hover svg path {
    stroke: #5A6BFF !important;
}

.menu-btns .remove-btn-restyle:hover svg path {
    stroke: #FF5353 !important;
}

/* Old-design CRUD buttons carry no explicit display, so when the JS reveals them
   (class toggle, not jQuery .show()) they can fail to lay out. Force inline-block on
   the revealed (non-tb-hidden) ones; tb-hidden ones stay collapsed via :not(). */
body.legacy-design .menu-btns .add-btn-restyle:not(.tb-hidden),
body.legacy-design .menu-btns .edit-btn-restyle:not(.tb-hidden),
body.legacy-design .menu-btns .remove-btn-restyle:not(.tb-hidden) {
    display: inline-block;
}

.tb-hidden {
    visibility: hidden !important;
}

body.legacy-design .tb-hidden {
    display: none !important; /* !important so it beats inline display (e.g. IconText buttons' style="display:flex") */
    visibility: visible !important;
}

/* Custom toolbar buttons (.extra-btn) get .tb-hidden until a row is selected (added/removed by
   sortable-table.js / view.js). Once revealed they need a display, but not every button class
   supplies one (.gray-btn does; blue/green/red/none don't), so some stayed hidden. Reveal any
   un-hidden .extra-btn here — covers every class uniformly; the :not(.tb-hidden) keeps them
   hidden until selection. Scoped to the legacy action bar so other .extra-btn/.red-btn are untouched. */
body.legacy-design .menu-btns .extra-btn:not(.tb-hidden) {
    display: inline-block;
}

body.legacy-design .bi-main-view-container > .menu-btns {
    box-sizing: border-box;
    min-height: 40px;
    padding-top: 0;
    padding-bottom: 10px;
}

body.legacy-design .bi-main-view-container > .menu-btns .menu-btn-width {
    height: auto;
}

/* ---- Table header ---- */
table.sortable thead {
    background-color: white !important;
}

table.sortable thead input,
table.sortable thead select,
table.sortable thead .general input[type='text'] {
    background-color: white !important;
}

table.sortable thead td[order],
table.sortable thead tr td[order] input,
table.sortable thead tr td[order] .general input[type='text'] {
    background-color: white !important;
}

/* ---- Active sort column: purple → black bold ---- */
.purple {
    color: var(--text-default-black) !important;
    font-weight: bold !important;
}

table.sortable thead td[sort] > .slrm-sort-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    vertical-align: top;
}

table.sortable thead td[sort][order] > .slrm-sort-head {
    color: var(--primary-purple);
    font-weight: bold;
}

table.sortable thead td[sort] .slrm-sort-icon {
    flex: none;
    width: 12px;
    height: 12px;
    background: currentColor;
    opacity: 0;
    transition: opacity .12s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10V2.5M2.75 5.5 6 2.25 9.25 5.5'/%3E%3C/svg%3E") center / 12px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10V2.5M2.75 5.5 6 2.25 9.25 5.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

table.sortable thead td[sort]:hover .slrm-sort-icon {
    opacity: 0.45;
}

table.sortable thead td[sort][order] .slrm-sort-icon {
    opacity: 1;
}

table.sortable thead td[sort][order="desc"] .slrm-sort-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2v7.5M2.75 6.5 6 9.75 9.25 6.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2v7.5M2.75 6.5 6 9.75 9.25 6.5'/%3E%3C/svg%3E");
}

/* ---- BI nav buttons (bi-buttons-menu, section-nav) ---- */
.bi-buttons-menu input[type="button"],
.section-nav input[type="button"] {
    border: none !important;
    border-radius: 0 !important;
}

.bi-buttons-menu input[type="button"]:hover,
.section-nav input[type="button"]:hover,
.bi-buttons-menu input[type="button"].fill-gray-btn,
.section-nav input[type="button"].active {
    color: #6314A8 !important;
    border-bottom: 2px solid #6314A8 !important;
    background-color: transparent !important;
}

table.general tr td {
    font-weight: inherit;
}

/* ---- Table and tab view styling ---- */

#contentTabs {
    background-color: #6314A8 !important;
}

.menu-togle {
    background-color: inherit !important;
    padding-left: 0px;
    height: 100%;
    width: 100%;
}

#cntMain {
    border-bottom: none !important;
    background-color: white !important;
}

.menu-icon {
    height: 19px !important;
    width: 19px !important;
    margin: 0px !important; 
}

ul.slider-restyle li {
    padding: 0 12px;
    width: fit-content !important;
    height: 41px !important;
    margin-top: 5px !important;
    padding-top: 5px;
}

.close-tab {
    cursor: pointer;
    flex-basis: 15%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    opacity: 0.6;
    transition: all 0.15s;
    margin-left: 7px;
    color: #6314A8;
    margin-top: 7px !important;
    align-self: flex-start;
}

table.sortable thead tr:first-child td {
    border-top: 1px solid #e3e6ec;
    padding: 7px 7px 0px 7px !important;
    border-left: 0px;
}

table.sortable thead tr td[order] {
    background-color: white;
}

table.sortable thead tr td {
    height: 2px;
    color: var(--text-default-black);
    background-color: white;
}

table.sortable tr:last-child td {
    border-bottom: 1px solid #edf0f4;
    border-left: 0px;
}

table.sortable tbody tr td:first-child {
    border-left:  none !important;
}

table.sortable tr td:last-child {
    border-right: none !important; 
}

table.sortable tbody tr td {
    background-color: white;
    border-bottom: 1px solid #edf0f4;
    border-left: 0px;
    height: 23.2px;
}

table.sortable tbody tr:first-child td {
    height: 23.2px;
}

table.sortable thead .general input[type='text'],
table.sortable thead .input-group-btn,
table.sortable thead input,
table.sortable thead select,
.filter-panel input[type='text'],
.filter-panel .input-group-btn,
.filter-panel input,
.filter-panel select {
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    background-color: white !important;
    border-radius: 0px !important;
    font-variant-numeric: tabular-nums;
}

table.sortable thead tr td[order] input, 
table.sortable thead td[order] .general input[type='text'] {
    background-color: white !important;
}

table.sortable thead tr:first-child td:first-child {
    border-radius: 10px 0 0;
}

table.sortable thead tr td:first-child {
    border-left: none;
}

table.sortable tbody tr td {
    background-color: white;
    border-bottom: 1px solid #edf0f4 !important;
}

ul.slider li a {
    text-decoration: none;
    font-size: 14px;
    z-index: 0;
    position: relative;
    color: #595959;
    height: var(--header-height);
    display: block;
    padding: 0 15px;
    padding-left: 7px;
    line-height: var(--header-height);
    color: var(--text-default-black);
    padding-left: 0px !important;
    color: #6314A8 !important;
}

ul.slider-restyle li:not(.selected-tab) {
    border-bottom: 1px solid #C59CEA !important;
    background-color: #6314A8 !important;
    border: none !important;
}

li.tab-menu:not(.selected-tab) a {
    color: white !important;
}

.selected-tab a, selected-tab:hover a {
    color: #6314A8 !important;
}

.tab-menu .close-tab {
    visibility: hidden;
    display: block;
}

.tab-menu:hover .close-tab,
.tab-menu.selected-tab .close-tab {
    visibility: visible;
    display: block;
} 

.tab-menu:not(.selected-tab) .close-tab {
    color: white;
    opacity: 1;
}

ul.slider-restyle li:not(.selected-tab) {
    border-bottom: none !important;
}

.tab-menu:hover a {
    color: #6314A8 !important;
}

#tab_CloseAllTabs {
    width: fit-content;
    background-color: #6314A8 !important;
    padding: 0 6px;
}

#tab_CloseAllTabs .close-tab {
    text-align: center;
    flex-basis: 100% !important;
    display: block;
    width: 21px;
    height: 21px;
    margin-left: 0px;
    visibility: hidden;
}

#contentTabs:hover #tab_CloseAllTabs .close-tab {
    visibility: visible;
}

#tab_CloseAllTabs .close-tab svg path {
    stroke: white;
    stroke-width: 2px;
}

.tab-menu div.ellipsis-overflow {
    overflow: visible;
    max-width: 170px;
    text-overflow: ellipsis;
}

.tab-name::after {
    content: attr(data-full);
    font-weight: bold;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

table.sortable thead tr td[order] select {
    background-color: white !important;
}

table.sortable tbody {
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.1);
}

table.sortable tbody tr.selectedRow td, table.sortable tbody tr.data-row:hover td {
    background-color: var(--primary-purple) !important;
    color: white !important;
}

table.sortable tbody tr.is-archived:not(.selectedRow) td {
    background-color: #eef0f4 !important;
    color: #6b7280 !important;
    font-weight: normal;
}

table.sortable tbody tr.is-archived:not(.selectedRow):hover td {
    background-color: #eef0f4 !important;
    color: #6b7280 !important;
}

table.sortable tbody tr.is-archived:not(.selectedRow) td.arch-date {
    color: #6b7280 !important;
}

table.sortable tbody tr.sched:not(.selectedRow) td.arch-date {
    color: #d97706 !important;
}

/*.jspVerticalBar {
    background: none repeat scroll 0 0 transparent;
    direction: ltr !important;
    height: 96%;
    left: 0;
    position: inherit;
    top: 5px;
    width: 6px;
}

.jspTrack {
    background: #fff;
    position: relative;
    border-radius: 30px;
    height: 100% !important;
}

.jspDrag {
    background: #c4c9d4;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    border-radius: 30px;
}

.table-border-bottom {
    border-bottom: none !important;
}

.div-scrollable {
    padding-left: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgb(196, 201, 212) transparent;
    display: block;
    white-space: nowrap;
    overflow: auto hidden;
    margin-left: 10px !important;
}

.header-table {
    overflow: auto;
    max-height: calc(-160px + 100vh);
    scrollbar-width: thin;
    scrollbar-color: rgb(196, 201, 212) transparent;
    display: block;
    white-space: nowrap;
    border-radius: 10px 10px 0 0;
    padding: 0px !important;
    margin-left: 0px !important;
}

table.sortable {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}

.jspPane{
    padding-left: 0px !important;
}

.div-scrollable:has(.jspVerticalBar) {
    margin-left: 0px !important;
}*/

/*.jspPane:has(+ .jspVerticalBar),
.jspPane:has(.jspVerticalBar) {
    margin-left: 10px !important;
}*/

/*.div-scrollable.jspScrollable {
    width: fit-content !important;
}*/
.header-table {
    margin-top: 12px !important;
}

.menu-btns ~ .header-table,
.menu-btns ~ div .header-table,
div:has(.menu-btns) ~ .header-table,
.general ~ .header-table,
label ~ .header-table,
div:has(.menu-button-width) ~ .header-table{
    margin-top: 0px !important;
}

.header-table.force-mt-0  {
    margin-top: 0px !important;
}

.menu-btns.force-pt-0  {
    padding-top: 0 !important;
}

/* ===== Single-table sticky-header grid (container approach) =====
   Generic layout for any _V page migrated to the single-table pattern: one <table>
   (colgroup + sticky thead + tbody#tblBody) inside a native-overflow .grid-scroll
   container, replacing the legacy two-table frozen-header + jScrollPane combo. Keyed
   off the .grid-scroll class so it applies to every migrated page with NO per-page
   CSS. Height is set by generalViewObj.resizeDPW (also gated on .grid-scroll);
   native scroll/pagination + header repoint live in jquery.view.js (initScroll /
   initNativeScroll / setScrollTop); the sort/append fix is the sortable-table
   singleTable opt. Loaded after withtabs.css, so these win equal-specificity ties. */
.table-area {
    position: relative;          /* anchor for the column-toggle trigger button */
    /* 12px breathing room on every side of the grid box. Left is 2px because
       .containerTabs already adds 10px padding-left (2 + 10 = 12). Top is the gap
       below the toolbar. Right is enforced together with grid-scroll's max-width:100%
       below. Bottom is set by generalViewObj.resizeDPW (bottomGapG: 12). */
    margin: 12px 12px 0 2px;
    min-width: 0; /* shrink when the grid itself is the flex item (see below) */
}

/* When the grid sits beside a side filter panel inside a display:flex row, the flex
   item wrapping the grid defaults to min-width:auto and refuses to shrink below the
   wide table's intrinsic width, so the grid overflows instead of scrolling internally.
   min-width:0 lets it shrink to the remaining space, restoring grid-scroll's
   max-width:100% cap and its horizontal scrollbar. No effect outside flex. */
:has(> .table-area) {
    min-width: 0;
}

/* Container: hug the table, capped at its CONTAINER width (not the viewport, which
   includes the left nav), then scroll horizontally inside the box. With the wrapper's
   12px right margin, max-width:100% keeps a constant 12px right gap on any screen.
   max-content (not a fixed --table-width) makes width follow the columns. */
div.grid-scroll {
    width: max-content !important; /* beat the generic [id^=divScroll] width rule */
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid #d3d3d3;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.1);
    scrollbar-width: thin;
    scrollbar-color: #c4c9d4 transparent;
}

/* Table: fixed layout so the <col width> values are authoritative; intrinsic width =
   their sum, so changing a column width auto-resizes the table (and container). Beats
   the generic [id^=divScroll] table { width: var(--table-width) } rule. */
div.grid-scroll > table.sortable {
    direction: ltr;
    table-layout: fixed;
    width: max-content !important;
}

/* Sticky header: the whole thead (titles + filters rows) pins to the top while the
   body scrolls vertically; it scrolls horizontally with the body (same table), so
   columns stay aligned with zero JS sync. */
div.grid-scroll > table.sortable > thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

div.grid-scroll > table.sortable > thead td {
    background: #fff;            /* opaque so scrolled rows don't show through */
}

.bi-main-view-container .header-table {
    margin-top: 0px !important;
}

.bi-main-view-container {
    padding-top: 16px;
    padding-left: 10px;
}

#cntMain,
#contentTabs,
.border11:has(.main-munu-btn) {
    height: var(--header-height);
}

.containerTabs {
    padding-top: 0px;
    margin-top: 0px !important;
}

.header-section {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 20px;
    background-color: #6314A8 !important;
    width: 100%;
    height: var(--header-height);
}

.main-menu-toggle {
    cursor: pointer;
    height: 100%;
}

#menu-icon-wrapper {
    height: 100%;
    vertical-align: middle;
    display: flex;
    align-items: center;
}

.header-section-element {
    height: 100%;
}

#graphs-salesTodayDashboard,
#dept-heat-map-graphs {
    margin-top: 16px;
}

.info-block {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 175px;
    margin: 0px !important;
    margin-top: 15px !important;
}

.site-name {
    font-size: 12.5px;
    margin-bottom: 1px;
}

.time {
    font-size: 10.5px;
    color: rgba(255,255,255,0.5);
}

.header-badge {
    font-size: 9.5px;
    font-weight: 500;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.9);
    padding: 1px 6px;
    border-radius: 20px;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255,255,255,0.2);
    align-self: flex-start;
}

#divCompanyHeadTitle {
    display: flex;
    gap: 1px;
    font-size: 12.5px;
    height: 16px;
    margin-bottom: 5px;
}

.user-name,
.time {
    margin-left: 0px;
    padding: 0px;
}

#spanUserName {
    height: 16px;
}

#spanCompanyHeadTitle {
    font-size: 14px;
}

.user-name-wrapper:hover #spanUserName {
    text-decoration: none;
    border-bottom: 1px solid #edf0f4;
}

.header-help {
    color: rgba(255,255,255,1);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.header-help:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}

ul.slider {
    left: 51px;
}

#menu-section {
    width: fit-content;
    background: white !important;
    border-right: 1px solid #ebe8f0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    padding: 10px;
    gap: 2px;
}

.menu-links {
    height: 100%;
    border: none !important;
    width: 210px;
    margin: 0px;
}

.menu-links ul li {
    padding-left: 10px !important;
    margin-bottom: 2px;
}

.menu-links ul li svg {
    height: 18px;
    width: 18px;
}

.tablinks {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    cursor: pointer;
    border-radius: 7px;
    font-size: 14px;
}

.tablinks .icon {
    margin: 0px;
    height: 18px;
}

span.title.menu-align {
    color: var(--text-default-black);
}

.menu-togle.active-menu-link {
    background-color: inherit !important;
}

.active-menu-link {
    background: #f3edf9 !important;
    color: #6314a8 !important;
    font-weight: 500;
}

.selected-menu-underline {
    display: none;
}

.active-menu-text {
    color: #6314a8 !important;
}

.tablinks:hover {
    background-color: #f7f6f9 !important;
}

.menu-links li:hover svg path {
    stroke: grey !important;
}

.active-menu-link .icon svg path {
    stroke: #6314a8 !important;
}

.active-menu-link a, .menu-links li:hover a {
    color: #6314a8 !important;
}

#menu_logout:hover {
    background: #fff0f0 !important;
}

#menu_logout:hover svg path {
    stroke: #dc2626;
}

#menu_logout:hover span {
    color: #dc2626 !important;
}

.border2 {
    top: var(--header-height);
}

.tabcontent {
    margin: 0px;
}

.section-content li a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none;
    color: gray;
}

.section-content svg {
    border: none;
    width: 16px;
    height: 16px;
}

.section-content li .icon {
    margin-bottom: 0px;
}

.section-content .title.menu-align {
    margin-left: 0px;
    text-align: left;
    color: #5a5368;
    line-height: 1.35;
}

.section-content li {
    justify-content: flex-start;
}

.section-content li:hover a .icon svg,
.section-content li:hover a .icon svg path,
.section-content li:hover a .icon svg rect.cls-1,
.section-content li:hover a .icon svg circle.cls-1 {
    fill: #6314a8 !important;
}

.border-black li:hover, .section-content li:hover {
    background-color: white !important;
    border: 1px solid #e0caf0 !important;
    box-shadow: 0 2px 8px rgba(99, 20, 168, 0.07);
}

.section-content li {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 11px 12px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
    text-align: left;
    gap: 7px;
    background: transparent;
    border: 1px solid transparent;
    width: 140px;
}

.section-content ul {
    margin: 0px;
}

.section-content li:hover a .icon.dependOnStroke svg path {
    fill: none !important;
    stroke: white !important;
}

.section-content li:hover a .icon.dependOnStroke svg path {
    fill: none !important;
    stroke: #6314a8 !important;
}

.section-content li:hover span {
    color: #6314a8 !important;
}

.border-black li a span {
    font-size: 14px;
}

.search-and-links-container {
    margin: 0px;
    background: rgb(247, 246, 249);
    padding: 0px 24px 24px;
    width: 100%;
    overflow: auto;
}

.search {
    width: 100%;
    gap: 10px;
    border: 0.8px solid #ebe8f0;
}

.search:focus-within {
    border-color: #e0caf0;
    box-shadow: 0 0 0 3px rgba(99,20,168,0.08);
}

.search:focus-within svg {
    fill: #6314A8 !important;
}

.search-input {
    width: 100% !important;
    color: var(--text-default-black) !important;
}

#search-window {
    margin: 0px;
    width: 100%;
}

.main-menu-container {
    height: 100%;
}

#softphone-button {
    color: rgba(255,255,255,1) !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255,255,255,1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    background: transparent;
    flex-shrink: 0 !important;
    width: 27.6px !important;
    height: 27.6px !important;
}

#softphone-button:hover {
    background: rgba(255,255,255,0.12) !important;
    color: white !important;
}

#softphone-button svg {
    fill: none !important;
    width: 15px !important;
    height: 15px !important;
}

#softphone-button svg path {
    stroke: rgba(255,255,255,1) !important;
}

#menu_iq .icon {
    font-size: 17px;
    height: 18px;
    width: 18px;
}

#menu_iq .title.menu-align {
    height: 14px;
}

#menu_iq:hover a {
    color: grey !important; 
}

.tab-menu.selected-tab .tab-name, 
.tab-menu:hover .tab-name {
    opacity: 1;
}

.tab-name {
    opacity: 0.75;
}

.tab-menu:not(.selected-tab):hover {
    font-weight: revert;
}

.newDesignRowColoring, 
.newDesignRowColoring td {
    color: #5f5f5f !important;
    background-color: white !important;
    font-weight: normal;
}

.search-group-line {
    flex: 1;
    height: 1px;
    background: #ebe8f0;
}

.search-group-title {
    font-size: 11px;
    font-weight: 600;
    color: #9990a8;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.search-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    padding: 0 2px;
}

.search-container {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 20px 0 12px;
    margin-bottom: 8px;
    background: rgb(247, 246, 249);
}

#overflowButtonContainer {
    padding-top: 0 !important;
}

.nav-overflow {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    height: 100%;
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.nav-overflow:hover, .nav-overflow.open {
    color: #fff;
    background: rgba(255,255,255,0.10);
}

.nav-overflow-menu {
    position: fixed;
    min-width: 240px;
    max-width: 320px;
    background: #fff;
    border: 1px solid #e3e6ec;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
    padding: 4px;
    z-index: 200;
}

.nav-overflow-head {
    padding: 6px 10px 8px;
    font-size: 11px;
    color: #52596b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #e3e6ec;
    margin-bottom: 4px;
}

.nav-overflow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px 7px 10px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-default-black);
    cursor: pointer;
    transition: background 0.15s;
}

.nav-overflow-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--text-default-black);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.nav-overflow-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-filters-row {
    height: 30px;
}

/* binaComplete autocomplete in grid filter row — keep wrapper within column width */
table.sortable thead .header-filters-row .bina-complete-wrapper {
    width: 100% !important;
    float: none !important;
    display: flex !important;
    box-sizing: border-box;
}

table.sortable thead .header-filters-row .complete-select {
    flex: 1;
    min-width: 0;
    float: none;
}

table.sortable thead tr:first-child td {
    border-top: none !important;
    padding: 7px !important;
}

table.sortable thead tr:first-child {
    height: 40px;
}

/* ---- FeesCalculation tab — unique spacing ---- */
.fees-calculation-view {
    padding-top: 12px;
}

.fees-calculation-view .header-table {
    padding-top: 0 ! important;
}

.table-border-bottom {
    border-bottom: none !important;
}

.div-scrollable {
    padding-left: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgb(196, 201, 212) transparent;
    display: block;
    white-space: nowrap;
    overflow: auto hidden;
    margin-left: 10px !important;
}

.header-table {
    overflow: auto;
    max-height: calc(-160px + 100vh);
    scrollbar-width: thin;
    scrollbar-color: rgb(196, 201, 212) transparent;
    display: block;
    white-space: nowrap;
    border-radius: 10px 10px 0 0;
    padding: 0px !important;
    margin-left: 0px !important;
}

table.sortable {
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}

.tab-name-wrapper {
    display: flex;
    align-items: flex-end;
    height: 36px;
}

.menu-btns .menu-btn-width {
    float: none;
}

.containerTabs:has(.menu-btns):not(:has(.bi-main-view-container)) input[type='text'],
.containerTabs:has(.menu-btns):not(:has(.bi-main-view-container)) input[type='password'],
.containerTabs:has(.menu-btns):not(:has(.bi-main-view-container)) select {
    border-bottom-color: rgb(211, 211, 211);
}