/* =========================================================
   01) TOKENS
========================================================= */
body.ff-app {
    /* Brand */
    --primary-seed: #1677ff;
    --primary: var(--primary-seed);
    --primary-hover: color-mix(in srgb, var(--primary-seed) 85%, white);
    --primary-active: color-mix(in srgb, var(--primary-seed) 85%, black);
    --on-primary: #ffffff;
    /* Semantic */
    --success: #52c41a;
    --warning: #faad14;
    --error: #ff4d4f;
    --info: var(--primary);
    /* Neutrals */
    --bg: #f5f5f5;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f0f0f0;
    --text: #1f1f1f;
    --text-muted: #595959;
    --text-disabled: #bfbfbf;
    --border: #d9d9d9;
    --divider: #f0f0f0;
    /* Navigation surfaces (LIGHT theme) */
    --nav-bg: #ffffff;
    --nav-bg-2: #f5f5f5;
    --nav-border: rgba(0,0,0,0.08);
    --nav-text: rgba(0,0,0,0.88);
    --nav-text-muted: rgba(0,0,0,0.60);
    --nav-icon: rgba(0,0,0,0.65);
    --nav-active: var(--primary);
    --nav-active-text: rgba(0,0,0,0.88);
    --nav-active-bg: rgba(22, 119, 255, 0.12);
    --nav-active-border: rgba(22, 119, 255, 0.35);
    --nav-wedge: var(--nav-bg-2); /* Clip-Two triangle/wedge color */
    /* Topbar */
    --topbar-bg: var(--surface);
    --topbar-border: var(--border);
    --topbar-text: var(--text);
    --topbar-text-muted: var(--text-muted);
    --topbar-hover: var(--surface-2);
    /* When a banner image is present, overlay keeps text readable */
    --topbar-overlay-from: rgba(255,255,255,0.78);
    --topbar-overlay-to: rgba(255,255,255,0.92);
    /* Layout */
    --ff-topbar-height: 60px; /* used only for fixed-navbar offset */
    /* Shape / elevation */
    --radius-sm: 6px;
    --radius-md: 10px;
    --shadow-1: 0 6px 18px rgba(0,0,0,0.08);
    /* Focus ring */
    --focus: rgba(22, 119, 255, 0.35);
    /* Perfect-scrollbar thumb */
    --ps-thumb: rgba(0,0,0,0.18);
    /* Let browser draw native controls appropriately */
    color-scheme: light dark;
}

    body.ff-app[data-theme="dark"] {
        /* make primary a touch “brighter” in dark mode */
        --primary: color-mix(in srgb, var(--primary-seed) 70%, white);
        --primary-hover: color-mix(in srgb, var(--primary) 85%, white);
        --primary-active: color-mix(in srgb, var(--primary) 85%, black);
        --on-primary: #0b1220;
        --bg: #0f1115;
        --surface: #151821;
        --surface-2: #1b2030;
        --surface-3: #232a3a;
        --text: #f0f0f0;
        --text-muted: #bfbfbf;
        --text-disabled: #6b7280;
        --border: #2a2f3a;
        --divider: #232a3a;
        /* Navigation surfaces (DARK theme) */
        --nav-bg: #0b0f1a;
        --nav-bg-2: #121a2b;
        --nav-border: rgba(255,255,255,0.10);
        --nav-text: rgba(255,255,255,0.86);
        --nav-text-muted: rgba(255,255,255,0.62);
        --nav-icon: rgba(255,255,255,0.72);
        --nav-active: var(--primary);
        --nav-active-text: #ffffff;
        --nav-active-bg: rgba(64, 150, 255, 0.22);
        --nav-active-border: rgba(64, 150, 255, 0.55);
        --nav-wedge: var(--nav-bg-2);
        /* Topbar */
        --topbar-bg: var(--surface);
        --topbar-border: var(--border);
        --topbar-text: var(--text);
        --topbar-text-muted: var(--text-muted);
        --topbar-hover: var(--surface-2);
        --topbar-overlay-from: rgba(15,17,21,0.55);
        --topbar-overlay-to: rgba(15,17,21,0.75);
        --shadow-1: 0 10px 28px rgba(0,0,0,0.45);
        --focus: rgba(64, 150, 255, 0.45);
        --ps-thumb: rgba(255,255,255,0.22);
    }

#page-title {
    padding: 0px 0px !important;
    border-bottom: 1px solid var(--text-disabled) !important;
}

label {
    font-weight: bold !important;
    color: var(--text) !important;
    font-size: 12px !important;
}

fieldset legend {
    font-weight: bold !important;
}

.item-inner {
    font-weight: bold !important;
}


.liLine {
    line-height: 0px !important;
    padding-left: 5px !important;
    width: 100%;
    border-bottom: 1px solid var(--border);
    text-align: left !important;
}


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

.mini-stats li {
    margin: 0px !important;
}

.panel-heading .panel-heading-tabs > li {
    line-height: 5px !important;
    font-weight: bolder !important;
    color: var(--text) !important;
    text-transform: uppercase !important;
}

.text30 {
    font-size: 22px !important;
}

.whitebg {
    background-color: var(--surface) !important;
}

tr.row-selected {
    background-color: var(--success) !important;
    /*box-shadow: var(--primary) 0px 0px 5px 3px;*/
}

tr.rightClicked {
    box-shadow: var(--primary) 0px 0px 5px 3px;
}

tr.show-pointer {
    cursor: pointer;
}

.info_content {
    position: absolute;
    background: var(--text);
    padding: 24px;
    color: var(--surface);
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 15px;
}

thead {
    background-color: var(--primary);
}

.table > thead > tr > th {
    color: var(--surface) !important;
}

.position-fixed {
    position: fixed;
}

.width100 {
    width: 100%;
}

.bottom-bar {
    /* margin-top: 10px; */
    position: sticky;
    bottom: 0px;
    height: 50px;
    background-color: var(--text);
    z-index: 1000;
    margin-top: 10px;
}

.checkTB {
    transform: scale(1.5);
}


.fab2 {
    background-color: var(--primary);
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: var(--primary);
    border: none;
    outline: none;
    color: var(--surface);
    font-size: 36px;
    box-shadow: 0 3px 6px var(--text), 0 3px 6px var(--text);
    transition: .3s;
    -webkit-tap-highlight-color: transparent;
    right: 80px;
    bottom: 80px;
}

.fab {
    width: 70px;
    height: 70px;
    background-color: var(--primary);
    border-radius: 50%;
    box-shadow: 0 6px 10px 0 var(--text-muted);
    font-size: 50px;
    line-height: 70px;
    color: var(--surface);
    text-align: center;
    position: fixed;
    right: 50px;
    bottom: 60px;
    transition: all 0.1s ease-in-out;
    border: none;
    outline: none;
}

    .fab:hover {
        box-shadow: 0 6px 14px 0 var(--text-muted);
        transform: scale(1.05);
        cursor: pointer;
    }

tr.row-selected-noshadow {
    background-color: var(--success) !important;
}


.tablecheckbox > thead:first-child > tr:first-child > th:first-child {
    text-align: center !important;
}

.liRight {
    border-bottom: 1px solid var(--divider) !important;
}

.aRight {
    font-size: 16px !important;
    font-weight: 400 !important;
}

a.aRight {
    padding-left: 10px !important;
}

/*.has-error .form-control:focus, .has-error .form-control:hover {
    border-color: var(--surface-2);
    border-bottom-color: var(--text-muted) !important;
}*/

.has-error .txt {
    border-color: var(--surface-2);
    border-bottom-color: var(--text-muted) !important;
}

.color-var(--text) {
    color: var(--text) !important;
}

.trackingError {
    padding: 2px 25px 2px 2px !important;
    margin-bottom: 5px !important;
}


.table > tbody > tr.warning > td {
    background-color: var(--border) !important;
}

.table > tbody > tr.success > td {
    background-color: var(--border) !important;
}

.label-inverse, .badge-inverse {
    background-color: var(--text);
}

.modalfieldset {
    border: 1px solid var(--text-disabled);
    background-color: var(--surface-2);
}

.table > tbody > tr.active > td, .table > tbody > tr.active > th {
    color: var(--text) !important;
}

.table > tbody > tr > td {
    color: var(--text) !important;
}

h1, h2, h3, h4, h5 {
    color: var(--text) !important;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

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

.table-dropdown.dropdown-menu.dropdown-light {
    min-width: 100px !important;
}

    .table-dropdown.dropdown-menu.dropdown-light li a {
        line-height: 25px !important;
        color: var(--text) !important;
    }

.menudd.clip-radio label {
    margin-bottom: 0px !important;
}

/*span.btn.btn-default.form-control.ui-select-toggle{
    overflow-x: hidden !important;
}*/

span.ui-select-match-text.ui-select-allow-clear {
    max-width: 83%;
    overflow: hidden;
    text-overflow: ellipsis;
}

span.ui-select-match-text {
    max-width: 93%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.symbol.required:before {
    display: table-caption;
    color: var(--error);
    font-size: 25px;
    height: 16px;
}

.has-error .symbol:before {
    font-size: 12px !important;
    height: 13px !important;
}

.has-success .symbol:before {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    height: 13px !important;
}

.has-error label {
    color: var(--error) !important;
}

.has-error .error {
    color: var(--error) !important;
}

.has-error .form-control {
    border-color: var(--error) !important;
}

.ng-table th.sortable.sort-desc, .ng-table th.sortable.sort-asc {
    background-color: var(--text-disabled) !important;
    color: var(--text) !important;
}

/*.tag-indexed {
    box-shadow: inset var(--text) 5px 0px 0px 0px;
}*/
/*table.tableRed tr > td.rowTd {
    color: var(--text-muted) !important;
}*/
tr.tag-indexed > td.rowTd {
    color: var(--error) !important;
}


.inactive {
    color: var(--border) !important;
    pointer-events: none !important;
    cursor: default !important;
}

.label-var(--text) {
    background-color: var(--text);
}

.dropdown-menu > li > button {
    color: var(--text) !important;
    border: none !important;
    font-size: 12px;
    display: block;
    padding: 0px 10px;
    clear: both;
    font-weight: bold;
    color: var(--text);
    var(--surface)-space: nowrap;
}

.panel-heading .panel-heading-tabs > li > button {
    color: var(--text) !important;
    border: none !important;
    font-size: 12px;
    display: block;
    padding: 0px 10px;
    clear: both;
    font-weight: bold;
    color: var(--text);
    var(--surface)-space: nowrap;
}

.uploader {
    max-height: 50px;
    max-width: 50px;
}

.page_aside {
    min-height: 200px;
    width: 240px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-right: 25px;
    -webkit-transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    left: 0;
    z-index: 1000;
}

aside#page_aside {
    min-height: 100vh !important;
}

.page_aside + * {
    -webkit-transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 265px;
}

@media only screen and (max-width: 959px) {
    .page_aside + * {
        margin-left: 25px;
    }
}

.page_aside_inner {
    /*padding: 12px 12px;*/
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
}

.page_aside_toggle {
    position: absolute;
    top: 0;
    right: -26px;
    height: 100%;
    width: 24px;
    background: var(--error);
    cursor: pointer;
    background: var(--bg);
    border-right: 1px solid var(--border);
    -webkit-transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .page_aside_toggle:hover {
        background: var(--border);
    }

    .page_aside_toggle:after {
        position: absolute;
        left: 3px;
        top: 25px;
        content: '\f0a8';
        /* '<<'; '\e314';*/
        font-family: "FontAwesome";
        font-size: 18px;
        display: block;
        color: var(--text-muted);
    }

.page_aside_collapsed .page_aside {
    -webkit-transform: translate3d(-240px, 0, 0);
    transform: translate3d(-240px, 0, 0);
}

    .page_aside_collapsed .page_aside + * {
        margin-left: 25px;
    }

.page_aside_collapsed .page_aside_toggle:after {
    content: '\f0a9'; /*'\e315';*/
    color: var(--primary);
}

.panel-heading-tabs > li > a {
    color: var(--text) !important;
}
/*Edited by Michael*/
#page-title .panel.panel-var(--surface) {
    border: none !important;
    background-color: var(--surface) /*var(--surface-2)*/ !important;
}

#page-title .border-light {
    border-bottom: none !important;
}

#page-title .panel-heading {
    padding: 0px !important
}

#page-title .mainTitle {
    padding-top: 10px !important
}

aside {
    height: 100% !important;
}

fieldset {
    padding: 15px !important;
    padding-bottom: 0px !important;
}

.show-hand {
    cursor: pointer !important;
}

.minWidth50 {
    min-width: 50px !important;
}

.minWidth100 {
    min-width: 100px !important;
}

.text18 {
    font-size: 18px;
}

.modalImage {
    position: relative !important;
    width: 100% !important;
}

/*.notopnavbar {
    margin-top: -50px !important;
    z-index: 100 !important;
}

.navbar {
    z-index: 50 !important;
}*/

/*.container-fullw{
    padding-top:10px !important;
    padding-bottom : 10px !important;
}*/


.navbar-default {
    background-color: var(--surface) !important;
}

.mini-stats {
    border-bottom: none !important;
    border: 1px solid var(--text-disabled) !important;
    border-radius: 10px 10px 10px 10px;
    margin-top: -2px !important;
}

    .mini-stats > li:first-child {
        border-left: none !important;
    }

.panel-heading .panel-heading-tabs > li {
    border-left-color: var(--text-disabled) !important;
}

.panel-var(--surface) .border-light, .partition-var(--surface) .border-light {
    border-color: var(--text-disabled) !important;
}

.panel-heading {
    min-height: 49px !important;
}

.swMain > ul {
    margin: 10px 0 10px 0 !important;
}

@media (min-width: 992px) {
    .app-sidebar-closed .app-aside > .item-inner .title {
        margin-left: 0px !important;
    }

        .app-sidebar-closed .app-aside > .item-inner .title:first-child {
            margin-left: 20px !important;
        }
}


.title-icon {
    display: inline-grid;
    text-align: center;
    padding: 0px 5px;
    border-left: 1px solid;
    cursor: pointer;
    min-width: 60px;
}

    .title-icon:first-child {
        border-left: none;
    }

    .title-icon > i {
        margin-bottom: 3px;
    }

.shipmentheader {
    font-weight: bold !important;
    margin-left: 15px !important;
    background-color: var(--text) !important;
    padding: 5px 10px !important;
}

.timeline-xs .timeline-item.info:after {
    width: 15px !important;
    height: 15px !important;
    margin-left: -8px !important;
}

.text-var(--text) {
    color: var(--text) !important;
}

/*div.uib-daypicker .btn-default {
    border-color: transparent;
}*/

.uib-daypicker {
    padding: 15px;
    outline: none !important;
}

    .uib-daypicker .btn-default {
        border-color: transparent !important;
    }

.dropdown-menu > li > button.uib-close {
    padding: 5px 10px !important;
    clear: none;
}

.uib-daypicker table > thead {
    background-color: var(--surface) !important;
}

textarea, select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    border-radius: 4px !important;
}

.trTotal {
    color: var(--surface) !important;
    font-weight: bold !important;
    background-color: var(--text-disabled) !important;
}

.tableTotal > .table > tbody > tr > td {
    color: var(--surface) !important;
}

/*#sidebar nav > ul .sub-menu > li.active a {
    background: var(--success) !important;
}*/

ul.sub-menu li ul.sub-menu li a {
    padding-left: 70px !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

#sidebar nav > ul .sub-menu > li.open {
    background: var(--text) !important;
}

.app-sidebar-closed .app-aside > .item-inner .title {
    color: var(--surface) !important;
}


.app-sidebar-closed .app-aside .sub-menu {
    background: var(--bg) !important;
}



.inline-switches {
    height: 20px !important;
    width: 42px !important;
}

.switch small {
    height: 20px !important;
    width: 20px !important;
}

.ng-table-filters {
    background-color: var(--surface-3) !important;
}

.bgoffwhite {
    background-color: var(--surface-2) !important;
}

.borderradius5 {
    border-radius: 5px !important;
}

.font20 {
    font-size: 20px !important
}

.settings.panel .setting-boxff {
    border-bottom: 1px solid var(--text-disabled);
    padding-left: 8px;
}

.radio-inline, .radio-inline + .radio-inline, .checkbox-inline, .checkbox-inline + .checkbox-inline {
    margin-bottom: 5px !important;
}

table.tableheadernowrap th.header {
    var(--surface)-space: nowrap !important;
}

.tableheadernowrap2 {
    var(--surface)-space: nowrap !important;
}

ul.dropdown-menu.generate-menu {
    top: 120% !important;
    right: 0 !important;
    left: unset;
}

.width50 {
    width: 50px !important;
}

.width70 {
    width: 70px !important;
}

.width100td {
    width: 100px !important;
}

.widthMinMax70 {
    min-width: 70px !important;
    max-width: 70px !important;
    width: 70px !important
}

.widthMinMax20 {
    min-width: 20px !important;
    max-width: 20px !important;
    width: 20px !important
}

.width120 {
    width: 120px !important;
}

.width160 {
    width: 160px !important;
}

.minwidth160 {
    min-width: 160px !important;
}

.margin-top-35 {
    margin-top: 35px !important;
}

.width300 {
    width: 300px !important;
}

.width30 {
    width: 30px !important;
}


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

.border-0 {
    border: 0px !important;
}

fieldset {
    margin: 15px 0 15px 0;
}

.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
    background-color: pink;
}

.userli {
    cursor: pointer;
    margin-top: 1px;
    background: transparent !important;
    outline: 0px !important;
    text-decoration: none !important;
    border-radius: 5px !important;
}

.font16 {
    font-size: 16px !important
}


input.form-control.partialallocated {
    background-color: #ff000054 !important;
}

input.form-control.fullyallocated {
    background-color: #5cb85c73 !important;
}

span.amt.partialallocated {
    background-color: #ff0000ba !important;
    border: 1px solid #ff0000ba !important;
}

span.amt.fullyallocated {
    background-color: #5cb85cd4 !important;
    border: 1px solid #5cb85cd4 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

.editable-span input {
    /*border: none !important;
    background: transparent !important;*/
}


    .editable-span input:focus {
        background: var(--success) !important;
    }

.editable-span .form-control {
    height: 20px !important;
}

.noborder.table tbody > tr > td {
    border-bottom: none !important;
}

.grid {
    /* width: 100%;*/
    height: 75vh;
}

.totalUL {
    border-bottom: 2px solid var(--text);
    margin-top: 10px;
}

.ui-grid-cell-contents {
    /* Old Solution */
    min-width: max-content !important;
    /* New Solution */
    display: grid;
    grid-auto-columns: max-content;
    /* IE Solution */
    display: -ms-grid;
    -ms-grid-columns: max-content;
}

/*.dropdown-menu {
    min-width:100px !important;
}*/
/*.textdarkGrey{
    color:var(--text-muted) !important;
}*/
/* Slide Effect*/
/*[ui-view].ng-enter, [ui-view].ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

[ui-view].ng-enter {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

[ui-view].ng-leave {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}*/
/* End Slide Effect*/
.tableinputtext {
    height: 25px;
    padding: 2px 5px !important;
}

.tableFixHead {
    overflow-y: auto;
    height: 75vh;
}

.tableFixHead50vh {
    overflow-y: auto;
    height: 50vh;
}

.ng-table th.sortable.sort-asc, .ng-table th.sortable.sort-desc {
    background-color: var(--text-muted);
}

.tableFixHead thead th {
    position: sticky;
    top: 0;
    background-color: var(--primary);
    var(--surface)-space: nowrap !important;
}

.tableFixHead thead th {
    background-color: var(--primary);
}

.nowrap {
    var(--surface)-space: nowrap !important;
}

.nopager .ng-table-pager.ng-scope {
    display: none;
}

.btn-var(--text-muted):active, .btn-var(--text-muted).active, .btn-var(--text-muted).active:focus, .btn-var(--text-muted):active:focus, .btn-var(--text-muted):active:hover, .btn-var(--text-muted).dropdown-toggle:active:hover {
    background-color: var(--text-disabled) !important;
    border-color: var(--text-muted) !important;
    color: var(--text-muted) !important;
}

.errorH4 {
    color: var(--text-muted) !important
}

.text-capitalize {
    text-transform: capitalize !important;
}

table.thheadernowrap th {
    var(--surface)-space: nowrap !important;
}

.linkDisabled {
    cursor: not-allowed;
    pointer-events: none;
    color: var(--text-muted) !important;
}

.table-dropdown.dropdown-menu.dropdown-light li button {
    background: none;
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    var(--surface)-space: nowrap;
    font-size: 14px;
}

.greyBorderBottom {
    border-bottom: 1px solid var(--border);
}

.ff-clear-filters:before {
    content: "\f0b0";
}

.multiselect-parent.btn-group.dropdown-multiselect, .multiselect-parent.btn-group.dropdown-multiselect button {
    width: 100%;
}
/*ul.dropdown-menu.dropdown-menu-form{
    max-height:250px !important;
}*/
.dropdown-multiselect .checkbox {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    /*var(--surface)-space:  break-spaces;*/
}

.dropdown-multiselect ul li a label {
    font-weight: 500 !important;
    font-size: 13px !important;
    color: var(--text) !important;
}

.multiselect-group ul li a > span {
    display: none !important;
}

    .multiselect-group ul li a > span.glyphicon {
        display: initial !important;
    }

.multiselect-group li.dropdown-header {
    font-weight: bold !important;
    color: var(--text) !important;
    font-size: 13px !important;
}

.no-display {
    display: none !important;
}

.alert-danger h4.alert-heading, .alert-danger h5.alert-heading {
    color: var(--text-muted) !important;
}

.swal2-title {
    color: var(--text-muted) !important;
    /*font-family: "Raleway", sans-serif !important;*/
    font-size: 30px !important;
    text-align: center !important;
    font-weight: 300 !important;
    text-transform: none !important;
    position: relative !important;
    margin: 0 10px !important;
    padding: 0 !important;
    line-height: 40px !important;
    display: block !important;
    overflow-x: auto;
}

h2 .swal2 {
    color: var(--text-muted) !important;
    font-family: "Raleway", sans-serif !important;
    font-weight: 300 !important;
}

.swal2-html-container {
    color: var(--text) !important;
    font-size: 14px !important;
    text-align: center !important;
    font-weight: 300 !important;
    position: relative !important;
    /*    text-align: inherit !important;*/
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
}

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

.swal2-styled.swal2-confirm {
    margin-right: 30px !important;
}

.radiocheck-col {
    margin-top: 28px !important;
}

.modal-body {
    padding: 15px 25px !important;
}

.input-group-addon + .form-control {
    border-radius: 0px 4px 4px 0px !important;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    font-weight: bold;
}

li.uib-tab.nav-item a {
    color: var(--text) !important;
}

.nav-tabs > li:first-child {
    border-left: none !important;
}

.font12 {
    font-size: 12px;
}

.favpage-ul {
    max-height: 415px;
    overflow-y: auto;
}

.favpage-li-a {
    text-align: left !important;
    line-height: 20px !important;
}

span.error {
    color: var(--error);
}

.favourite-page {
    color: gold !important
}

.unfavourite-page {
    color: var(--text) !important
}

header .navbar-collapse .navbar-right > li.open > a {
    background: transparent !important;
}

header .navbar-collapse .navbar-right > li > a:hover, header .navbar-collapse .navbar-right > li > a:focus, header .navbar-collapse .navbar-right > li > a:active {
    background: transparent !important;
}

.input-group-addon-less-padding {
    padding: 0px 0px !important;
}

.input-padding23 > input {
    padding-left: 20px !important;
    padding-right: 1px !important;
}

.agentLegend {
    background-color: var(--bg);
    padding: 5px 15px;
    border-radius: 5px;
}

#gridContainer, #gridContainer1 {
    max-height: 70vh;
    /*  min-height: 120px;*/
}


/*.dx-datagrid {
    height: 70vh;
}*/
.dx-popup-content .dx-list-item {
    display: block !important;
}

.dx-overlay-content.dx-popup-normal.dx-resizable.dx-dropdowneditor-overlay-flipped {
    width: max-content !important;
}

tr.dx-row.dx-column-lines.dx-header-row {
    color: var(--surface) !important;
    font-weight: 500;
    background-color: var(--primary);
}

.dx-datagrid .dx-scrollable-scrollbar.dx-scrollbar-vertical,
.dx-datagrid .dx-scrollable-scrollbar.dx-scrollbar-vertical .dx-scrollable-scroll {
    width: 15px;
}


.dx-datagrid .dx-scrollable-scrollbar.dx-scrollbar-horizontal,
.dx-datagrid .dx-scrollable-scrollbar.dx-scrollbar-horizontal .dx-scrollable-scroll {
    height: 15px;
}

.dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button) {
    width: 100%;
}

.margin-top-22 {
    margin-top: 22px !important;
}

.accordion-no-display .panel-heading {
    display: none !important;
}

.btnLi .dropdownBtn {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: var(--text) !important;
    var(--surface)-space: nowrap;
    background-color: var(--surface);
    font-size: 14px;
    cursor: pointer;
}

.btn-group .txt-postfix-rd {
    border-radius: 4px 0px 0px 4px !important;
}
/*.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1,
    .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10,
    .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11,
    .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 .col-md-1-5 {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }*/
/*table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px 16px;
}

th {
    background: "var(--divider)";
}*/

.input-dropdown {
    display: inline-flex !important;
}

    .input-dropdown > input {
        margin-right: -15px !important;
    }

    .input-dropdown > .dropdown-toggle {
        padding-left: 3px !important;
        padding-right: 3px !important;
        border: 1px solid var(--text-disabled) !important
    }

.padding-right-0 {
    padding-right: 0px !important
}

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

.border-radius-0 {
    border-radius: 0px;
}

.left-border-rd-0 .border-rd-left-0 {
    border-radius: 0px 4px 4px 0px !important;
}

.dropdown-header {
    text-align: center;
    padding: 5px 0px 0px 0px;
    font-weight: bold;
    color: var(--text);
}


.valuesonly .checkbox {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.check-inline {
    display: inline
}

.dx-datagrid-summary-item {
    color: var(--text);
}

.dx-checkbox.dx-state-readonly .dx-checkbox-icon {
    border-color: var(--text);
}

.dx-checkbox .dx-checkbox-icon {
    border-color: var(--text);
}

.text-big {
    font-size: 18px !important;
    font-weight: 800 !important;
}

.label100 {
    font-size: 100% !important;
}

input[disabled].editable-rates {
    background-color: var(--surface) !important;
    border: none !important;
}

.maxWidth100 {
    max-width: 100px !important;
}

.height25 {
    height: 25px !important;
}

.noresDiv {
    margin-top: 20px !important;
    border: 1px solid var(--border);
    padding: 10px;
    background-color: var(--surface);
    color: var(--text);
    font-size: 14px;
}

.form-control {
    height: 30px !important;
}


.dx-button-has-icon .dx-icon {
    width: 18px;
    height: 5px;
    background-position: 0 0;
    background-size: 5px 5px;
    padding: 0;
    font-size: 18px;
    text-align: center;
    line-height: 8px;
    margin-right: 0;
    margin-left: 0;
    font-weight: bold;
}

.dx-dropdownbutton-content .dx-list .dx-empty-message, .dx-dropdownbutton-content .dx-list .dx-list-item {
    border-bottom: 1px solid var(--border);
}

.btn {
    padding: 6px 9px;
    line-height: 1.1;
}

.dx-texteditor-input {
    min-height: 30px;
}

.autoExpand {
    width: 100%;
}

.StepTitle, h2 {
    font-size: 15px;
    font-weight: bold;
    margin: 0px !important;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 10px;
    padding-left: 10px;
}

.input-group-addon {
    font-size: 12px;
}

.div-shadow {
    box-shadow: 6px 11px 10px 1px lightgrey;
}

.fieldset.chart {
    border: 2px solid lightgrey;
}

.swal2-center-field .swal2-input {
    margin: 0 auto; /* Centers the input horizontally */
}

#submitNewRow:focus, #submitNewRow:hover {
    all: unset;
    background-color: unset !important;
}

/* History Tabs */
.history-tabs {
    overflow-x: scroll;
    overflow-y: hidden;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 43px;
    scrollbar-gutter: stable;
    var(--surface)-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Optional for smoother scroll on mobile */
    scrollbar-width: thin; /* Firefox */
}

#history-tabs-inner {
}

.history-tabs .nav-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    min-width: max-content; /* Important for Chrome */
    border-bottom: unset;
}

    .history-tabs .nav-tabs > li {
        border: unset;
        margin-left: 1px;
        display: inline-block;
        float: none; /* Ok to keep as fallback */
    }


.nav-tabs > li > a {
    color: var(--surface);
    margin: 0px;
    padding: 5px 15px;
    background-color: var(--text);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

    .nav-tabs > li > a:hover {
        color: var(--surface);
        background-color: var(--text);
    }

.tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    color: var(--surface);
    background-color: var(--text);
    border-radius: 50%;
    font-size: 8px;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
}

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

.swal2-input, .swal2-file, .swal2-textarea, .swal2-select, .swal2-radio, .swal2-checkbox {
    margin: 1em 0 0 !important;
}
/* History Tabs Container */
/*.history-tabs {
    margin: 20px 60px;
    padding: 10px;
    background-color: var(--surface);
    border-radius: 10px;
    box-shadow: 0 1px 3px var(--text);
    overflow-x: auto;*/ /* Keep horizontal scrolling if needed */
/*var(--surface)-space: nowrap;
}*/
/* Nav Tabs List */
/*.nav-tabs {
    margin: 0;
    border-bottom: none;
    list-style: none;
    padding-left: 0;
    display: inline-flex;
}*/
/* Individual History Tab */
/*.history-tab {
    display: inline-block;
    margin: 0 5px;
}

    .history-tab a {
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
        background-color: var(--surface-3);
        border-radius: 20px;
        text-decoration: none;
        color: var(--text-muted);
        transition: background-color 0.3s ease;
    }

        .history-tab a:hover {
            background-color: var(--border);
        }*/
/* Tab Message & Close Button */
/*.tab-message {
    margin-right: 8px;
}

.tab-close {
    font-weight: bold;
    color: var(--accent-purple);
    cursor: pointer;
    transition: color 0.2s ease;
}

    .tab-close:hover {
        color: var(--error);
    }*/