:root{
    --VS-primary-color: #55555e;
    --VS-secondary-color: #000;
    --VS-ternary-color: #f9f8f9;
    --VS-context:#FBB54B;
    --VS-context-menu:#f7eee1;
    --VS-context-dark:#F09205;
    --VS-context-light : #FDD69D;
    --VS-context-lighter : #FEE6C3;
    --VS-second-color: #38302E;
    --VS-white:#FFFF;
    --VS-header:#ebebeb;
    --VS-modal-header:#7C0A02;
    --VS-main-body:#d2d0d04d;
    --VS-button:#F09205;
    --VS-text-danger : #ff0000;
    /* New Color Variables */
    --VS-swal-cancel-button-bg: #5c5c76; /* Usage: SweetAlert cancel button background */
    --VS-swal-cancel-button-color: rgb(255, 255, 255); /* Usage: SweetAlert cancel button text color */
    --VS-modal-body-bg: #ebedf1; /* Usage: Modal body background */
    --VS-notification-hover-bg: #f6f7fc; /* Usage: Notification section hover background */
    --VS-company-switch-bg: #2c2f41; /* Usage: Company switch notification ripple background */
    --VS-user-photo-bg: rgb(241, 241, 241); /* Usage: User photo input label background */
    --VS-supplier-success-color: green; /* Usage: Supplier success message color */
    --VS-step-icon-border: #dae1e5; /* Usage: Supplier step icon border/background */
    --VS-step-icon-done-bg: #7cc576; /* Usage: Supplier step icon background when done */
    --VS-step-icon-active-bg: #09f; /* Usage: Supplier step icon background when active */
    --VS-swal-warning-icon-color: #e64942; /* Usage: SweetAlert warning icon color */
    --VS-upload-btn-bg: rgb(37, 55, 139); /* Usage: Upload button background */
    --VS-buyer-step-icon-border: #ddd; /* Usage: Buyer step icon border */
    --VS-buyer-step-icon-bg: #fff; /* Usage: Buyer step icon background */
    --VS-buyer-modal-select-color: #0D6EFD; /* Usage: Buyer modal select color */
    --VS-bullet-line-list-color: #bbb; /* Usage: Bullet line list color */
    --VS-alert-warning-color: #6e5400; /* Usage: Alert warning text color */
    --VS-modal-footer-bg: #f5f5f6; /* Usage: Modal footer background */
    --VS-badge-color: #0D6EFD; /* Usage: Badge color */
    --VS-nav-link-color: #5a5a5a; /* Usage: Nav link color */
    --VS-nav-link-active-color: #000; /* Usage: Nav link active color */
    --VS-tab-content-bg: #f9f9f9; /* Usage: Tab content background */
    --VS-btn-secondary-bg: #b7b7b7; /* Usage: Secondary button background */
    --VS-grey-tab-bg: rgb(123, 123, 123); /* Usage: Grey tab background */
    --VS-table-border: #c7ceeb; /* Usage: Table border color */
    --VS-new-table-head-bg: #eef1ff; /* Usage: New table header background */
    --VS-new-table-body-bg: #fff; /* Usage: New table body background */
    --VS-new-table-trash-color: #d9534f; /* Usage: New table trash icon color */
    --VS-new-table-light-bg: #e9ecef; /* Usage: New table light background */
    --VS-new-table-row-bg: #f6f6f6; /* Usage: New table row background */
    --VS-new-table-border-df: #dfdfdf; /* Usage: New table border color */
    --VS-new-table-control-border: #dee2e6; /* Usage: New table form control border */
    --VS-hover-underline-color: #0067ff; /* Usage: Hover underline color */
    --VS-filter-multi-select-item-bg: #7C0A02; /* Usage: Filter multi-select item background */
    --VS-toolbar-bottom-bg: #fff; /* Usage: Toolbar bottom background */
    --VS-bg-opacity-10: #f7f8ff; /* Usage: Background with opacity 10 */
    --VS-dtsp-top-row-bg: #eef1ff; /* Usage: DataTables search pane top row background */
    --VS-dtsp-clear-all-bg: #5c5c76; /* Usage: DataTables search pane clear all button background */
    --VS-dtsp-clear-all-color: #fff; /* Usage: DataTables search pane clear all button text color */
    --VS-notsupplier-bg: #f2f3f5; /* Usage: Not supplier background */
    --VS-pro-est-input-color: #7e7e7e; /* Usage: Professional estimate input color */
    --VS-select2-arrow-color: #343a40; /* Usage: Select2 arrow color */
    --VS-category-tags-bg: #CFE2FF; /* Usage: Category tags background */
    --VS-category-tags-border: #B6D4FE; /* Usage: Category tags border */
    --VS-category-tags-color: #20232a; /* Usage: Category tags text color */
    --VS-uploaded-files-list-bg: #fff; /* Usage: Uploaded files list background */
    --VS-uploaded-files-list-border: #ccc; /* Usage: Uploaded files list border */
    --VS-tabel-product-display-bg: #E2DEDE; /* Usage: Table product display background */
    --VS-comment-header-bg: #fff; /* Usage: Comment header background */
    --VS-user-line-list-hover-bg: var(--VS-header); /* Usage: User line list hover background */
    --VS-user-line-list-active-bg: var(--VS-context); /* Usage: User line list active background */
    --VS-user-line-list-active-color: #FFF; /* Usage: User line list active text color */
    --VS-supplier-prof-btn-bg: #0d6efd; /* Usage: Supplier professional button background */
    --VS-supplier-prof-btn-color: #fff; /* Usage: Supplier professional button text color */
    --VS-light-gallery-bg: #d7d9df; /* Usage: Light gallery background */
    --VS-light-gallery-border: #ccc; /* Usage: Light gallery border */
    --VS-light-gallery-active-border: #23af47; /* Usage: Light gallery active border */
    --VS-light-gallery-inactive-border: #1c2c42; /* Usage: Light gallery inactive border */
    --VS-group-image-edit-bg: #fbfbfb; /* Usage: Group image edit background */
    --VS-search-rfq-list-bg: #fff; /* Usage: Search RFQ list background */
    --VS-search-rfq-list-border: #ccc; /* Usage: Search RFQ list border */
    --VS-search-rfq-list-item-border: #ccc; /* Usage: Search RFQ list item border */
    --VS-category-popup-bg: #fff; /* Usage: Category popup background */
    --VS-category-popup-shadow: rgba(0, 0, 0, 0.08); /* Usage: Category popup shadow */
    --VS-category-popup-border: #ccc; /* Usage: Category popup border */
    --VS-progress-done-gradient-start: #FF9472; /* Usage: Progress done gradient start color */
    --VS-progress-done-gradient-end: #FF9472; /* Usage: Progress done gradient end color */
    --VS-progress-done-shadow-start: #FF9472; /* Usage: Progress done shadow start color */
    --VS-progress-done-shadow-end: #FF9472; /* Usage: Progress done shadow end color */
    --VS-kanban-initials-bg: #f748591c; /* Usage: Kanban initials background */
    --VS-kanban-initials-border: #f748591c; /* Usage: Kanban initials border */
    --VS-print-icon-inner-bg: #feebef; /* Usage: Print icon inner background */
    --VS-global-loader-color: #CF000F; /* Usage: Global loader color */
    --VS-chat-new-design-bg: #000; /* Usage: New chat design background */
    --VS-chat-new-design-shadow: rgba(0, 0, 0, 0.075); /* Usage: New chat design shadow */
    --VS-chat-new-design-sub-menu-bg: #000; /* Usage: New chat design sub menu background */
    --VS-uploaded-document-bg: #fff; /* Usage: Uploaded document background */
    --VS-uploaded-document-border: #ccc; /* Usage: Uploaded document border */
    --VS-action-main-tab-active-color: #FFFFFF; /* Usage: Action main tab active text color */
    --VS-action-main-tab-after-border: #cfcfcf; /* Usage: Action main tab after border */
    --VS-skip-button-color: #cf000f; /* Usage: Skip button color */
    --VS-tree-border: #ddd; /* Usage: Tree structure border */
    --VS-tree-text-color: #666666; /* Usage: Tree structure text color */
    --VS-tree-hover-border: #474747; /* Usage: Tree structure hover border */
    --VS-mobile-verification-icon-color: #cf000f; /* Usage: Mobile verification icon color */
    --VS-dashboard-tagline-bg: #E91E63; /* Usage: Dashboard tagline background */
    --VS-invoice-quantity-border: #cfcfcf; /* Usage: Invoice quantity border */
    --VS-search-cancel-button-color: red; /* Usage: Search cancel button color */
    --VS-livewire-loader-bg: rgba(0, 0, 0, 0.5); /* Usage: Livewire loader background */
    --VS-customer-tab-border-bg: #FFF; /* Usage: Customer tab border background */
    --VS-linear-header-gradient-start-1: #000; /* Usage: Linear header gradient start color 1 */
    --VS-linear-header-gradient-start-2: #Cf000F; /* Usage: Linear header gradient start color 2 */
    --VS-linear-header-gradient-start-3: #FBB54B; /* Usage: Linear header gradient start color 3 */
    --VS-linear-header-gradient-end: #FFF; /* Usage: Linear header gradient end color */


    --VS-icon-people-carry-white: url('../../../front-assets/images/icons/people-carry-1_white.png');
    --VS-icon-boxes-white: url('../../../front-assets/images/icons/boxes_white.png');
    --VS-icon-bank-white: url('../../../front-assets/images/icons/icon_bank_white.png');
    --VS-icon-check: url('../../../front-assets/images/check_icon.png');
    --VS-icon-contact-info: url('../../../assets/images/icon_contact_info.png');
    --VS-icon-buyer-W: url('../../../assets/images/icon_buyer_W.png');
    --VS-logo-background: url('../../../front-assets/images/logo_background.png');
    --VS-company-users-icon: url('/front-assets/images/icons/company_users.png');
    --VS-icon-group-W: url('../../../front-assets/images/icons/icon_group_w.png');
    --VS-icon-gallery-W: url('../../../front-assets/images/icons/icon_gallery_w.png');
    --VS-icon-dash-product-system-dark: url('../../icons/png/icon_dash_product_black.png');
    --VS-icon-dash-suppliers-system-dark: url('../../icons/png/icon_dash_suppliers_dark.png');
    --VS-icon-dash-rfqs-system-dark: url('../../icons/png/icon_dash_rfqs_dark.png');
    --VS-icon-unassigned: url('../../icons/png/rejected_15407547.png');
    --VS-icon-dash-order-system-dark: url('../../icons/png/icon_dash_order_black.png');
    --VS-icon-users-system-dark: url('../../icons/png/icon_users_dark.png');
    --VS-icon-quotes-system-dark: url('../../icons/png/icon_quotes_dark.png');
    --VS-icon-amount-system-dark: url('../../icons/png/icons_amount_dark.png');
    --VS-icon-overdue-system-dark: url('../../icons/png/icon_overdue_dark.png');
    --VS-icon-dash-limit-system-dark: url('../../icons/png/icons_dash_limit_dark.png');
    --VS-icon-virtual-account-system-dark: url('../../icons/png/icons_virtual_account_dark.png');
    --VS-icon-dash-virtual-balance-system-dark: url('../../icons/png/icon_dash_virtual_balance_dark.png');
    --VS-icon-xen-system-dark: url('../../icons/png/xen_icon_dark.png');
    --VS-icon-received-amount-system-dark: url('../../icons/png/icon_received_amount_dark.png');
    --VS-icon-pending-amount-system-dark: url('../../icons/png/icon_pending_amount_dark.png');
    --VS-icon-credit-image-system-dark: url('../../icons/png/credit_image_black.png');
    --VS-icon-expired-quotation: url('../../icons/png/clipboard_17809420.png');
    --VS-icon-upcoming: url('../../icons/svg/calendar.svg');
    --VS-icon-unresponded: url('../../images/Unresponded.png');
    --VS-icon-plus: url('/assets/icons/icon_plus.png');
    --VS-icon-people-carry-1: url('/assets/icons/people-carry-1.png');
    --VS-icon-search-b: url('../../images/icon_search_b.png');
    --VS-icon-times: url('/front-assets/images/icons/times.png');
    --VS-icon-dash-category-dark: url('/front-assets/images/icons/category.png');
    --VS-icon-dash-buisness-units-dark: url('/front-assets/images/icons/buisness_units.png');
    --VS-icon-dash-product-varaint-dark: url('/front-assets/images/icons/productVaraint.png');
    --VS-icon-address: url('/front-assets/images/icons/icon_pickup1.png');
    --VS-icon-address1: url(/front-assets/images/icons/icon_pickup1.png);

}

@font-face {
    font-family: "Jost";
    src: url("../../fonts/Jost/Jost-VariableFont_wght.ttf") format("truetype");
}

body {
    font-family: "Jost" !important;
    font-size: 15px;
}

/* Global Styles */
.hide, .hidden { display: none !important; }

/* SweetAlert Button Styles */
.swal-button--cancel {
    background-color: var(--VS-swal-cancel-button-bg);
    color: var(--VS-swal-cancel-button-color);
}
.swal-button--cancel:hover {
    background-color: var(--VS-context) !important;
    color: var(--VS-white) !important;
}

/* Modal Header Styles */
.modal-header { background-color: var(--VS-white);}

/* Modal Body Styles */
.modal-body { background-color: var(--VS-modal-body-bg); }

/* Large Modal Max Width */
.modal-lg { max-width: 900px; }

/* International Telephone Input (ITI) Styles */
.iti{ display: block !important; }
.iti--separate-dial-code .iti__selected-flag{font-size: 12px;  height: 100%; background-color: var(--VS-header) !important; color: var(--VS-secondary-color) !important;}
.iti input, .iti input[type=text], .iti input[type=tel]{z-index: 0 !important;}
.iti__country-list{z-index: 5000;}
.iti__country.iti__highlight{background-color: var(--VS-header) !important;}
.iti__dial-code{color: var(--VS-modal-header) !important;}

/* Navbar Dropdown Menu Positioning */
.navbar-nav .dropdown-menu{position: absolute;}

/* Profile Right Top Image Styles */
#profile_right_top_img{ height: 30px; width:30px; border-radius: 50%; }

/* Bell Animation Styles */
.bell_animation {
    -webkit-animation: ring 4s .20s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .20s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .20s ease-in-out infinite;
    transform-origin: 50% 4px;
}
@-webkit-keyframes ring {
    0% {-webkit-transform: rotateZ(0);}
    1% {-webkit-transform: rotateZ(30deg);}
    3% {-webkit-transform: rotateZ(-28deg);}
    5% {-webkit-transform: rotateZ(34deg);}
    7% {-webkit-transform: rotateZ(-32deg);}
    9% {-webkit-transform: rotateZ(30deg);}
    11% {-webkit-transform: rotateZ(-28deg);}
    13% {-webkit-transform: rotateZ(26deg);}
    15% {-webkit-transform: rotateZ(-24deg);}
    17% {-webkit-transform: rotateZ(22deg);}
    19% {-webkit-transform: rotateZ(-20deg);}
    21% {-webkit-transform: rotateZ(18deg);}
    23% {-webkit-transform: rotateZ(-16deg);}
    25% {-webkit-transform: rotateZ(14deg);}
    27% {-webkit-transform: rotateZ(-12deg);}
    29% {-webkit-transform: rotateZ(10deg);}
    31% {-webkit-transform: rotateZ(-8deg);}
    33% {-webkit-transform: rotateZ(6deg);}
    35% {-webkit-transform: rotateZ(-4deg);}
    37% {-webkit-transform: rotateZ(2deg);}
    39% {-webkit-transform: rotateZ(-1deg);}
    41% {-webkit-transform: rotateZ(1deg);}
    43% {-webkit-transform: rotateZ(0);}
    100% {-webkit-transform: rotateZ(0);}
}

/* Notification Select Form Styles */
.notification_select .form-select { font-size: 12px; }

/* Notification Section Hover Styles */
.notification_sections:hover { background-color: var(--VS-notification-hover-bg); }

/* Sidebar Navigation Badge Styles */
.sidebar .nav .nav-item .nav-link .badge { font-size: 11px; padding: 2px 3px; width: 22px; position: absolute; right: 0.8rem;}

/* Notification Ripple Background Styles */
.notification-ripple-bg.notification-ripple {
    height: 15px;
    width: 18px;
    position: absolute;
    right: -10px;
    top: -2px;
    line-height: inherit !important;
    border-radius: 8px !important;
    z-index: 1;
    font-size: 0.6em;
    color: var(--VS-white);
}
.notification-ripple-bg { background-color: var(--VS-company-switch-bg) !important; }

/* Company Switch Collapse Styles */
.company_switch .collapse,.company_switch .collapsing{ position: absolute; top: 60px; right: 5px; left: 5px; }

/* Date Range Picker Styles */
.daterangepicker.ltr .ranges{ clear: both; width: 100%; text-align: right;}
.daterangepicker.ltr .ranges .cancelBtn{ background-color: var(--VS-swal-cancel-button-bg); color: var(--VS-white); margin-right: 5px;}

/* Rotation Animation */
.rotate { animation: rotation 2s infinite linear;}

/* Loading Spinner Styles */
#loading{ width: 15px; height: 15px;}

/* Verification Icon Positioning */
.verify{ top: 26%; position: absolute; right: 20px;}

/* User Photo Styles */
.userphoto .user_info_photo { position: absolute; width: 100px; height: 100px; }
.user_info_photo {width: 100px; height: 100px; line-height: 116px; cursor: pointer;}
.user_info_photo {font-size: 1.5rem; color: var(--VS-white); border-radius: 4px; overflow: hidden;}
.userphotohover {font-size: .8rem; text-align: center; width: 100px !important; height: 100px !important; top: 0; color: var(--VS-white); line-height: 116px; border-radius: 4px; font-weight: bold;}

/* Input File Label Styles */
.inputfile+label {
    font-size: 13px;
    font-weight: 600;
    background-color: var(--VS-user-photo-bg);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.225rem 0.725rem;
    border-radius: 8px;
}
.inputfile-3+label:hover {color: var(--VS-context-dark);}

/* Prefix Form Select Styles */
.prefix .form-select { font-size: 0.875rem;}

/* DataTables Filter Input Styles */
div.dataTables_wrapper div.dataTables_filter input{   padding: 8px 5px;}

/* Button Padding Styles */
.btnPadding{    padding: 0.25rem 0.5rem;}

/* Color Gray Utility Class */
.color-gray {color: gray;}

/* Table Cell Word Wrap */
table td {word-wrap: break-word;  max-width: 400px;}

/* Supplier Table Cell White Space */
#supplierTable td {white-space:inherit;}

/* Awesomplete Styles */
.awesomplete { width: 100%; display: block; }

/* Supplier Success Message Styles */
.suplier-succ { color: var(--VS-supplier-success-color); font-size: 20px; }

/* Supplier Steps List Styles */
#supplier-steps ul { margin: 0 auto; }
#supplier-steps ul:before { display: none; }
#business_unit-steps ul { margin: 0 auto; }
#business_unit-steps ul:before { display: none; }

/* Contact Step Navigation Link Styles */
.contact_step a.nav-link { position: relative; }
.contact_step .step_img { position: absolute; top: 0; left: 0; right: 0; text-align: center; }
.contact_step .icon { height: 60px; width: 60px; background: var(--VS-white); border: 1px solid var(--VS-buyer-step-icon-border); margin: 4px auto; border-radius: 100%; padding: 2px; position: relative; z-index: 100 !important; }
.contact_step .icon .pen_icon { border: 1px solid var(--VS-step-icon-border); border-radius: 100%; background-color: var(--VS-step-icon-border); display: inline-block; height: 54px; width: 54px; }
.contact_step .icon .pen_icon.supplier{ background-image: var(--VS-icon-people-carry-white); background-repeat: no-repeat; background-position: center center;}
.contact_step .icon .pen_icon.product{ background-image: var(--VS-icon-boxes-white);background-repeat: no-repeat; background-position: center center;}
.contact_step .icon .pen_icon.bank{background-image: var(--VS-icon-bank-white);background-repeat: no-repeat; background-position: center center;}
.contact_step .icon .pen_icon.address{background-image: var(--VS-icon-address1);background-repeat: no-repeat; background-position: center center; background-size: 33px;}
.contact_step .icon .pen_icon.company { background-image: var(--VS-icon-contact-info); background-repeat: no-repeat; background-position: center center; }
.contact_step .icon .pen_icon.buyer { background-image: var(--VS-icon-buyer-W); background-repeat: no-repeat; background-position: center center; }
.contact_step .icon .pen_icon.users { background-image: var(--VS-company-users-icon); background-repeat: no-repeat; background-position: center center; }
.contact_step .icon .pen_icon.group { background-image: var(--VS-icon-group-W); background-repeat: no-repeat; background-position: center center; }
.contact_step .icon .pen_icon.gallery { background-image: var(--VS-icon-gallery-W); background-repeat: no-repeat; background-position: center center; }
.contact_step .icon .pen_icon.address { background-image: var(--VS-icon-address1); background-repeat: no-repeat; background-position: center center; }


/* Navigation Link Done State Styles */
.nav-link.done .pen_icon{
    border: 2px solid var(--VS-step-icon-done-bg);
    background-color: var(--VS-step-icon-done-bg);
}
.nav-link.done .icon { border-color: var(--VS-step-icon-done-bg);}
.nav-link.active .pen_icon{background-color: var(--VS-context) !important;}

/* Tags Input Styles */
div.tagsinput{ width: auto; border-color: var(--VS-new-table-control-border); padding: 5px;}
div.tagsinput span.tag{ margin-bottom: 1px; margin-top: 2px;}
div.tagsinput input{    padding: 2px 5px; margin: 0 5px 2px 0;}

/* Form Switch Input Styles */
.form-switch .form-check-input { margin-left: 2.5em; }

/* Table Image Styles */
.table td img { width: 20px; height: 20px; border-radius: 0px; }

/* Form Control Padding */
.form-control { padding: 0.7rem 0.375rem; }

/* SweetAlert Confirm Button Styles */
.swal-button--confirm {
    color: var(--VS-white);
    background-color: var(--VS-button);
    border-color: var(--VS-button);
}
.swal-button--confirm:hover { background-color: var(--VS-context) !important; color: var(--VS-white) !important; }

/* SweetAlert Warning Icon Styles */
.swal-icon--warning__body,
.swal-icon--warning__dot { background-color: var(--VS-swal-warning-icon-color) !important; }
.swal-icon--warning { border-color: var(--VS-swal-warning-icon-color) !important; }

/* Parsley Errors List Item Styles */
.parsley-errors-list li { font-weight: normal;line-height: 1.8;color: var(--VS-text-danger);font-weight: normal; }
.cypFirstName .parsley-errors-list li { font-weight: normal;line-height: 8; }
ul.parsley-errors-list { padding-left: 0px; list-style-type: none; }

/* Parsley ID 32 Margin */
#parsley-id-32 { margin-left: 0px !important; }

/* Media Query for Small Screens (Smart Wizard Navigation) */
@media (max-width: 575.98px){ .sw > .nav { flex-direction:unset !important; } }

/* Parsley ID Multiple Company Type Margin */
#parsley-id-multiple-companyType { margin-top: 32px !important; margin-left: 10px !important;}

/* Date Input Parsley Errors List Positioning */
.date{position: relative;}
.date .parsley-errors-list { position: absolute; bottom: -40px;}

/* Buyer Steps List Styles */
#buyer-steps ul { margin: 0 auto;}
#buyer-steps ul:before { display: none; }

/* Buyer Image Section Styles */
.img_section_buyer { display: grid; place-items: center;}

/* User Admin Image Section Styles */
.image_section_user_admin { height: 80px;  width: 80px;}

/* Logo Banner Section Styles */
.logobanner_section { background: var(--VS-logo-background) center center; height: 200px; background-position: cover; }
.logobanner_section img { max-height: 120px; }

.logoFile:hover, .download-icon:hover {color: var(--VS-context);}

/* Smart Wizard Theme Dots Navigation After Pseudo-element Styles */
.sw-theme-dots > .nav .nav-link::after { content: '' !important; height: 3px !important; background: var(--VS-step-icon-border) !important; width: 12vw !important; position: absolute !important; right: -100% !important; top: 60% !important; left: 50px !important; }
.sw-theme-dots > .nav .nav-link:first-child::after { background: var(--VS-step-icon-border) !important; }
.sw-theme-dots > .nav .nav-link.active:after { background: var(--VS-context) !important; }
.sw-theme-dots > .nav .nav-link::before { display: none !important; }
.sw-theme-dots > .nav li:last-child .nav-link:first-child::after { display: none; }
.sw-theme-dots > .nav .nav-link{ margin-top: 0 !important;}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .supplierProfessionalPro li.nav-item button span{background-color: var(--VS-white) !important; color: var(--VS-context); border: 1px solid var(--VS-context) !important;}
.supplierProfessionalPro li.nav-item button span{ color: var(--VS-secondary-color) !important; border-color: var(--VS-secondary-color) !important;}
.supplierProfessionalPro li.nav-item button div.small-text{ color: var(--VS-secondary-color) !important;}


@media screen and (max-width: 1799.98px) {.sw-theme-dots > .nav .nav-link::after{ width: 12rem !important;}}
@media screen and (max-width: 1499.98px) {.sw-theme-dots > .nav .nav-link::after{ width: 13rem !important;}}
@media screen and (max-width: 1299.98px) {.sw-theme-dots > .nav .nav-link::after{ width: 15rem !important;}}
@media screen and (max-width: 1200.98px) {.sw-theme-dots > .nav .nav-link::after{ width: 18rem !important;}}
@media screen and (max-width: 1024.98px) {.sw-theme-dots > .nav .nav-link::after{ display: none !important;}}

/* Button File Styles */
.btn-file { position: relative; overflow: hidden; }
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    cursor: inherit;
    display: block;
}

/* SweetAlert Success Icon Ring Styles */
.swal-icon--success__ring{border: 4px solid hsla(98,55%,69%,1);}

/* Bullet Line List Link Styles */
.bullet-line-list a { color: var(--VS-header);  text-decoration: none;}
.bullet-line-list li.active h6 a { color: var(--VS-nav-link-active-color);}
.bullet-line-list li.active:before { border: 4px solid var(--VS-nav-link-active-color);}

/* Order Disbursement IDs Width */
.order-disburseIds{  min-width:250px;}

/* Strikethrough Text Decoration */
.strikethrough{ text-decoration: line-through;}

/* Margin Right 5px Utility */
.mr-5{margin-right: 5px !important;}

/* Form Check Input Read-only Filter */
.form-check-input:read-only{filter: brightness(100%); }

/* Tab Content Select Box Styles */
.tab-content .selectBox { background-color: var(--VS-white) !important; height: 40px !important; }


/* Group Steps List Styles */
#group-steps ul { margin: 0 auto; }
#group-steps ul:before { display: none; }

/* Form Select Padding */
.form-select{ padding: 0.7rem 0.375rem; }

/* Light Gallery Image Styles */
.lightGallery .lightgallery_img { background-color: var(--VS-light-gallery-bg); border: 1px solid var(--VS-light-gallery-border); max-height: 150px; max-width: 150px; line-height: 146px;overflow: hidden; }
.lightGallery .lightgallery_img img,
.lightGallery>div img { max-width: 100%; max-height: 100%; }
.lightGallery>div .image-tile { height: 100%; width: 100%; margin-bottom: 0; padding: 0; }
.lightGallery .col-6 { position: relative; }
.lightGallery .input-group-text { position: absolute; right: 0rem; top: 1px; }
.lightGallery .active { border: 1px solid var(--VS-light-gallery-active-border); }
.lightGallery .inactive { border: 1px solid var(--VS-light-gallery-inactive-border); }

/* Show Images Container Styles */
#show-images div{ width: 150px; height: 150px; display: inline-block; background-color: var(--VS-light-gallery-bg);  border: 1px solid var(--VS-light-gallery-border); position: relative;   line-height: 148px;}
#show-images .thumb{ height: auto; width: auto; max-width: 100%; max-height: 100%;}

/* Opacity 25 Utility */
.opacity-25{ opacity: .25;}

/* Group Image Edit Styles */
#groupImageEdit{background-color: var(--VS-group-image-edit-bg); border: 1px dashed var(--VS-light-gallery-border);}

/* Back to Top Button Styles */
body .back_to_top {display: none; position: fixed; bottom: 43px; right: 55px; padding: 10px 10px; }

/* Media Queries for Back to Top Button and Parsley Errors List */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
        body .back_to_top {right: 15px; }
        .parsley-errors-list li{line-height:1.2;}}
@media screen and (max-device-width: 640px)
    and (orientation: landscape) {
        body .back_to_top {right: 15px; }
        .parsley-errors-list li{line-height:1.2;}}
@media screen
    and (max-device-width: 640px) {
        body .back_to_top {right: 15px; }
        .parsley-errors-list li{line-height:1.2;}}
@media screen and (min-device-width: 320px)
    and (-webkit-min-device-pixel-ratio: 2) {
        body .back_to_top {right: 15px; }
        .parsley-errors-list li{line-height:1.2;}}
@media (device-height: 568px)
    and (device-width: 320px)
    and (-webkit-min-device-pixel-ratio: 2) {
        body .back_to_top {right: 15px; }
        .parsley-errors-list li{line-height:1.2;}}
@media (min-device-height: 667px)
    and (min-device-width: 375px)
    and (-webkit-min-device-pixel-ratio: 3) {
        body .back_to_top {right: 15px; }
        .parsley-errors-list li{line-height:1.2;}}

/* Set Password Input Styles */
.setPassword{ position: relative; }
.setPassword .input_img{ position: absolute; bottom: 6px ; left: 10px; }
.setPassword .input_img_2{ position: absolute; bottom: 6px ; right: 10px; }

/* Readonly Select Styles */
.readonly-select{background-color: #eef2f5; pointer-events: none; }

/* Cursor Pointer Utility */
.cursor-pointer {cursor: pointer !important;}

/* Login Error and Error Message Styles */
.loginError, .error { color: red; }

/* Remove File Icon Styles */
.removeFile {color: red;margin-left: 5px;cursor: pointer;}

/* Settings Trigger Display */
#settings-trigger{ display: none;}

/* Select2 Container Default Single Selection Styles */
.select2-container--default .select2-selection--single{ background-color: var(--VS-white) !important; border: 1px solid var(--VS-new-table-control-border) !important; font-weight: 400 !important; font-size: 0.875rem !important;padding: 0.5rem  0.5rem !important; height: 39px !important; border-radius: inherit !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 20px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow{top: 4px!important;}
.select2-container{ display: block !important; width: 100% !important; border-radius: 4px;}

/* Form Group Margin */
.form-group{margin-bottom: 0.5rem;}

/* Table Header Font Styles */
.table th{font-size: 0.8125rem; font-weight: normal;}

/* Table Cell Color */
.table td, .jsgrid .jsgrid-table td{ color: var(--VS-nav-link-active-color);}

/* Form Group File Upload Info Padding */
.form-group .file-upload-info { padding: 0.71rem 1.375rem;}

/* Modal Version 2 Card Styles */
.modal.version2 .card {border-radius: 0; border-color: var(--VS-header);}

/* Modal Version 2 Large Modal Max Width */
.version2 .modal-lg {max-width: 900px;}

/* Modal Version 2 Header Styles */
.version2 .modal-header {background-color: var(--VS-white) !important;color: var(--VS-context-dark) !important;}

/* Modal Version 2 Content Border */
.version2 .modal-content {border: 0;}

/* Modal Version 2 Title Styles */
.version2 .modal-title {color: var(--VS-button);font-size: 1.2rem;font-weight: normal;}

/* Modal Version 2 Body Background */
.version2 .modal-body {background-color: var(--VS-ternary-color);}

/* Modal Version 2 Card Header H5 Margin */
.modal.version2 .card-header h5 {margin: 0;}

/* Modal Version 2 Form Check Input Margin */
.modal.version2 .form-check .form-check-input { margin-top: 10px; }


/* Modal Version 2 Form Check Label Line Height */
.modal.version2 .form-check .form-check-label {line-height: inherit;}

/* Modal Version 2 Close Button Styles */
.modal.version2 .btn-close {background: inherit;padding-top: 6px; filter: inherit !important;}

/* Modal Version 2 Select Styles */
.modal.version2 .modalselect {border: 0;color: var(--VS-buyer-modal-select-color);font-weight: 600;width: auto;padding: 0;}

/* Version 2 RFQ Form View Label Styles */
.version2 .rfqform_view label { color: #232323; font-size: 12px; font-weight: 400; margin-bottom: 0px;}
.version2 .rfqform_view label+div { color: var(--VS-context-dark); font-size: 13px; }
.version2 .rfqform_view div, .version2 .rfqform_subview div { font-weight: 600;}

/* Version 2 Bullet Line List Styles */
.version2 .bullet-line-list li:before {width: 15px;height: 15px;left: -30px;top: 0;border: 3px solid var(--VS-bullet-line-list-color);margin-right: 15px;z-index: 2;background: var(--VS-white);}
.version2 .bullet-line-list:after {content: "";border: 1px solid var(--VS-bullet-line-list-color);position: absolute;top: 0;bottom: 40px;left: 7px;}
.version2 .bullet-line-list .form-check-label {color: var(--VS-bullet-line-list-color);text-decoration: none;cursor: auto;}
.version2 .bullet-line-list li.active h6 a, .version2 .bullet-line-list li.active .form-check-input:checked + .form-check-label {color:var(--VS-context-dark) !important;font-weight: 500;}
.version2 .bullet-line-list li.active:after {content: "";border: 1px solid var(--VS-context);position: absolute;top: -38px;bottom: 0px;left: -23px;z-index: 1;}

/* Version 2 Alert Warning Styles */
.version2 .alert-warning{color: var(--VS-alert-warning-color);}

/* Font Size 14px Utility */
.fs_14{font-size: 0.813rem;}

/* Modal Version 2 Print Icon Styles */
.modal.version2 .printicon{ color: var(--VS-white); background-color: transparent; border: 0; width: 40px; height: 40px; padding: 0; margin-right: 5px !important; text-align: center; line-height: 36px;}
.modal.version2 .printicon:hover{background-color: var(--VS-context-lighter) !important;}
.modal.version2 .printicon a{ color: var(--VS-button); color: var(--VS-secondary-color) !important;}
.modal.version2 .printicon a i.fa{font-size: 1.4rem;}

/* Modal Version 2 Dialog Margin */
.modal.version2 .modal-dialog{ margin-top: 1rem;}

/* Modal Version 2 Footer Background */
.modal.version2 .modal-footer{ background-color: var(--VS-modal-footer-bg);}

/* Modal Version 2 Send Quote Color */
.modal.version2 .sendquote{color: var(--VS-context);}

/* Modal Version 2 Bottom Margin */
.modal.version2 .btm{font-weight: 600;}

/* Modal Version 2 Badge Styles */
.modal.version2 .badge{padding: 0.2rem 0.5625rem; font-size: 11px; color: var(--VS-secondary-color) !important; border: 1px solid var(--VS-context) !important; border-radius: 25px !important; }

/* Modal Version 2 Form Check Inline Display */
.modal.version2 .form-check-inline,.tab-content .form-check-inline{ display: inline-block !important;}

/* Modal Version 2 Form Check Label Styles */
.modal.version2 .form-check .form-check-label{ margin-left: 0px; margin-right: 1.25rem; font-weight: 600; font-size: 13px}

/* Modal Version 2 Table Border */
.modal.version2 .table, .modal.version2 .table td, .modal.version2 .table th{border: 1px solid var(--VS-table-border);}

.table thead tr,tr.bg-light { background-color: var(--VS-header) !important;}

/* Modal Version 2 Card Header Styles */
.modal.version2 .card-header,.tab-content .card-header{ min-height: 40px;background-color:var(--VS-header);}
.modal.version2 .card-header img,.tab-content .card-header img{opacity: .7;}

/* Button Focus Outline Removal */
button:focus:not(:focus-visible) { box-shadow: none !important;}

/* Nav Tabs Link Styles */
.nav-tabs .nav-link{color: var(--VS-nav-link-color);font-size: 0.813rem;}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{ color: var(--VS-nav-link-active-color); font-weight: bold;}

/* Nav Tabs Content Background */
.nav-tabs + .tab-content{ background-color: var(--VS-tab-content-bg);}

/* Align Items Center Utility */
.align-items-center { align-items: center!important;}

/* Display Flex Utility */
.d-flex {  display: flex!important;}

/* Display Inline Flex Utility */
.d-inline-flex {  display: inline-flex!important;}

/* Label Plus Div Font Styles */
/* label+div{ font-weight: bold; font-size: 13px;} */

/* Label Font Size */
label{font-size: 13px;}

/* Tab Content Primary Text Color */
.tab-content .text-primary, .text_blue{color: var(--VS-context-dark) !important;}

/* Tab Content Select Box Plus Icon Display */
.tab-content .selectBox + i, .tab-content .selectBox + ul+ i{display: none;}

/* New Version Tabs Navigation Link Styles */
.newversiontabs .nav-link{font-weight: bold; color: var(--VS-nav-link-active-color); background-color: var(--VS-white); border: 0; border-bottom: 1px solid #EBEDF2;}
.newversiontabs .nav-link.active{background-color: var(--VS-context); color: var(--VS-secondary-color); border-bottom: 1px solid var(--VS-context) !important; border-color: var(--VS-context) !important; letter-spacing: 1px; border-radius: 5px !important;}

/* Tab Content Form Check Label Styles */
.tab-content .form-check .form-check-label{ margin-left: 0; margin-right: 1.5rem;}

/* Secondary Button Styles */
.btn-secondary{background-color: var(--VS-btn-secondary-bg); border: 0;}

/* Bullet Line List Styles */
.bullet-line-list {padding-left: 30px;position: relative;list-style-type: none;overflow: hidden;}
.bullet-line-list li {position: relative;}
.rtl .bullet-line-list {padding-left: unset;padding-right: 30px;}
.rtl .bullet-line-list li:before {left: unset;right: -45px;}
.bullet-line-list li:before {content: "";position: absolute;border-radius: 100%;}
.rtl .bullet-line-list:after {left: unset;right: 7px;}
.bullet-line-list a {color: var(--VS-bullet-line-list-color);text-decoration: none;cursor: auto;}
.bullet-line-list li.active h6 a {color: var(--VS-context-dark);}
.bullet-line-list li.active:before {border: 3px solid var(--VS-context);}
.bullet-line-list li p::before {content: '';display: inline-block;}
.bullet-line-list li:last-child.active:after {bottom: 36px;top: -56px;}
.bullet-line-list h6 {font-size: 14px;}
.bullet-line-list p {margin-bottom: .5rem;}

/* Grey Tab Background */
.grey_tab {background-color: var(--VS-grey-tab-bg);}

/* Dark Blue Background Utility */
.dark_blue_bg {background-color: var(--VS-context); color: var(--VS-white) !important;}

/* Blue Background Utility */
.blue_bg {background-color: var(--VS-upload-btn-bg);color: var(--VS-white);}

/* Table Striped Styles */
.table-striped, .table-striped th, .table-striped td{border: 1px solid var(--VS-table-border);}

/* Input/Select/Textarea Focus Outline Removal */
input:focus,select:focus,textarea:focus,input:active,select:active,textarea:active{box-shadow: none !important;}

/* Order Status Details Bullet Line List Styles */
#orderStatusDetails .bullet-line-list li:before, .order-item-status-view .bullet-line-list li:before{width: 15px;height: 15px;left: -30px;top: 0;border: 3px solid var(--VS-bullet-line-list-color);margin-right: 15px;z-index: 2;background: var(--VS-white);}
#orderStatusDetails .bullet-line-list:after, .order-item-status-view:after {content: "";border: 1px solid var(--VS-bullet-line-list-color);position: absolute;top: 0;bottom: 40px;left: 7px;}
#orderStatusDetails .bullet-line-list li.active:after, .order-item-status-view  li.active:after  {content: "";border: 1px solid var(--VS-context-dark);position: absolute;top: -38px;bottom: 0px;left: -23px;z-index: 1;}
#orderStatusDetails .bullet-line-list li.active h6 a , .order-item-status-view  li.active h6 a  {color: var(--VS-context-dark);}
#orderStatusDetails .bullet-line-list li.active:before , .order-item-status-view li.active:before{border: 3px solid var(--VS-context-dark);}
#orderStatusDetails .bullet-line-list li:last-child.active:after , .order-item-status-view li:last-child.active:after {bottom: 36px;top: -56px;}
#orderStatusDetails .form-check-inline, #getSingleOrderDetail .form-check-inline{vertical-align: top;}
#orderStatusDetails .form-check-inline .form-check-input, #getSingleOrderDetail .form-check-inline .form-check-input{ margin-top: 0;}
#orderStatusDetails .form-check .form-check-label,#getSingleOrderDetail .form-check .form-check-label{ line-height: inherit;}
#orderStatusDetails .active .form-check .form-check-input:checked + .form-check-label,#getSingleOrderDetail .active .form-check .form-check-input:checked + .form-check-label {color: var(--VS-context-dark); opacity: 1;}

/* Vendor Order Status Details Bullet Line List Styles */
#vendorOrderStatusDetails .bullet-line-list li:before, .order-item-status-view .bullet-line-list li:before{width: 15px;height: 15px;left: -30px;top: 0;border: 3px solid var(--VS-bullet-line-list-color);margin-right: 15px;z-index: 2;background: var(--VS-white);}
#vendorOrderStatusDetails .bullet-line-list:after, .order-item-status-view:after {content: "";border: 1px solid var(--VS-bullet-line-list-color);position: absolute;top: 0;bottom: 40px;left: 7px;}
#vendorOrderStatusDetails .bullet-line-list li.active:after, .order-item-status-view  li.active:after  {content: "";border: 1px solid var(--VS-context-dark);position: absolute;top: -38px;bottom: 0px;left: -23px;z-index: 1;}
#vendorOrderStatusDetails .bullet-line-list li.active h6 a , .order-item-status-view  li.active h6 a  {color: var(--VS-context-dark);}
#vendorOrderStatusDetails .bullet-line-list li.active:before , .order-item-status-view li.active:before{border: 3px solid var(--VS-context-dark);}
#vendorOrderStatusDetails .bullet-line-list li:last-child.active:after , .order-item-status-view li:last-child.active:after {bottom: 36px;top: -56px;}
#vendorOrderStatusDetails .form-check-inline, #getSingleOrderDetail .form-check-inline{vertical-align: top;}
#vendorOrderStatusDetails .form-check-inline .form-check-input, #getSingleOrderDetail .form-check-inline .form-check-input{ margin-top: 0;}
#vendorOrderStatusDetails .form-check .form-check-label,#getSingleOrderDetail .form-check .form-check-label{ line-height: inherit;}
#vendorOrderStatusDetails .active .form-check .form-check-input:checked + .form-check-label,#getSingleOrderDetail .active .form-check .form-check-input:checked + .form-check-label {color: var(--VS-context-dark); opacity: 1;}

/* Dashboard Icons Background Styles */
.bg_product, .bg_Suppliers, .bg_RFQs, .bg_Orders, .bg_Users, .bg_Quotes, .bg_Amount, .bg_Overdue, .bg_Va_account, .bg_Limit_application, .bg_virtual_balance, .bg_xen, .bg_re_amount, .bg_pe_amount, .bg_limit, .bg_unassigned, .bg_Limit_application, .bg_QuotesExpired, .bg_UpcomingQuotes, .bg_UnrespondedRFQs, .bg_categories, .bg_buisness_units, .bg_productVaraint {
    background-repeat: no-repeat;
    background-position: 98% 90%;
    background-size: 60px;
}
.bg_product{background-image: var(--VS-icon-dash-product-system-dark);}
.bg_categories{background-image: var( --VS-icon-dash-category-dark);}
.bg_buisness_units{background-image: var(--VS-icon-dash-buisness-units-dark);}
.bg_productVaraint{background-image: var(--VS-icon-dash-product-varaint-dark);}
.bg_Suppliers{background-image: var(--VS-icon-dash-suppliers-system-dark);}
.bg_RFQs{background-image: var(--VS-icon-dash-rfqs-system-dark);}
.bg_unassigned { background-image: var(--VS-icon-unassigned); background-position: 98% 90%; background-size: 60px;}
.bg_Orders{background-image: var(--VS-icon-dash-order-system-dark);}
.bg_Users{background-image: var(--VS-icon-users-system-dark);}
.bg_Quotes{background-image: var(--VS-icon-quotes-system-dark);}
.bg_Amount{background-image: var(--VS-icon-amount-system-dark);}
.bg_Overdue{background-image: var(--VS-icon-overdue-system-dark);}
.bg_Va_account{background-image: var(--VS-icon-dash-limit-system-dark);}
.bg_Limit_application { background-image: var(--VS-icon-virtual-account-system-dark); background-position: 98% 90%; background-size: 60px;}
.bg_virtual_balance{background-image: var(--VS-icon-dash-virtual-balance-system-dark);}
.bg_xen{background-image: var(--VS-icon-xen-system-dark);}
.bg_re_amount{background-image: var(--VS-icon-received-amount-system-dark);}
.bg_pe_amount{background-image: var(--VS-icon-pending-amount-system-dark);}
.bg_limit { background-image: var(--VS-icon-credit-image-system-dark);}
.bg_QuotesExpired{ background-image: var(--VS-icon-expired-quotation); background-position: 98% 90%; background-size: 60px;}
.bg_UpcomingQuotes{ background-image: var(--VS-icon-upcoming); background-position: 98% 90%; background-size: 50px;}
.bg_UnrespondedRFQs{background-image: var(--VS-icon-unresponded); background-position: 98% 90%; background-size: 50px;}

/* Media Query for Font Size */
@media (max-width: 1400px) {html, body{font-size: 14px;}label{font-size: 12px;}}

/* Cancel Button Styles */
.btn-cancel{background-color: var(--VS-header) !important; color: var(--VS-button) !important; border-color: var(--VS-header) !important;}
.btn-cancel:hover{background-color: var(--VS-context) !important; color: var(--VS-white) !important; border-color: var(--VS-context) !important;}

.btn-success{background-color: var(--VS-secondary-color); color: var(--VS-white); border-color: var(--VS-secondary-color);}
.btn-success:hover{background-color: var(--VS-primary-color); color: var(--VS-white); border-color: var(--VS-primary-color);}

/* New Table Version 2 Styles */
.newtable_v2 {border: 0;}
.newtable_v2 table tbody{background-color: var(--VS-new-table-body-bg);}
.newtable_v2 .fa-edit{ color: var(--VS-nav-link-active-color); height: 14px; width: 14px;}
.newtable_v2 .fa-trash{color: var(--VS-new-table-trash-color); height: 14px; width: 14px;}
.newtable_v2 .fa-eye{height: 14px; width: 14px;}
.newtable_v2 .fa-comments, .newtable_v2 .fa-commenting{ color: var(--VS-nav-link-active-color) !important; height: 14px; width: 14px;}
.newtable_v2 .fa-send, .newtable_v2 .fa-share-alt{background-color: var(--VS-new-table-row-bg); height: 14px; width: 14px;}
.newtable_v2 .bg-light{ background-color: var(--VS-new-table-light-bg);}
.newtable_v2.dataTables_wrapper .dataTable thead .sorting:before { line-height: 1.5;}
.newtable_v2 .dataTables_wrapper .dataTable thead .sorting:after { line-height: 1.5;}
.newtable_v2 .main-panel{ background-color: var(--VS-modal-body-bg);}
.newtable_v2 .content-wrapper { padding: 1.25rem 1.25rem;}
.newtable_v2 .table thead th {padding: 0.9rem 0.6375rem;}
.newtable_v2 .table tbody td{padding: 0.65rem 0.6375rem;}
.newtable_v2 div.table-responsive > div.dataTables_wrapper > div.row {margin: 0;padding: 0px 0px 0px 0px;background-color: var(--VS-new-table-row-bg);}
.newtable_v2 .dataTables_length, .newtable_v2 .dataTables_filter, .newtable_v2 .dataTables_info,.newtable_v2 .dataTables_paginate{padding: 5px;}
.newtable_v2 .footer-wrapper { padding: 1.25rem 1.25rem;}
.newtable_v2 .paginate_button{line-height: 1.2em;}
.newtable_v2 .form-control {border: 1px solid var(--VS-new-table-control-border);font-weight: 400;font-size: 0.875rem;height: 25px;}
.newtable_v2 .form-control-sm {min-height: calc(1em + 0.5rem + 2px);border-radius: 0.2rem;}
.newtable_v2 .fa-edit,.newtable_v2 .fa-trash, .newtable_v2 .fa-eye, .newtable_v2 .bg_icon, .newtable_v2 .fa-send, .newtable_v2 .fa-share-alt, .newtable_v2 .fa-comments, .newtable_v2 .fa-chain, .newtable_v2 .fa-commenting, .iconsection .fa {width: 20px;height: 20px;text-align: center; border-radius: 4px; line-height: 20px; vertical-align: middle;}

/* Content Wrapper Background */
.content-wrapper{ background-color: var(--VS-modal-body-bg);}

/* New Table Version 2 DataTables Length */
.newtable_v2 .dataTables_length{ padding: 10px; }

/* New Table Version 2 DataTables Filter */
.newtable_v2 .dataTables_filter{ padding: 10px;}

/* New Table Version 2 DataTables Paginate */
.newtable_v2 .dataTables_paginate {padding-right: 10px; }

/* New Table Version 2 DataTables Info */
.newtable_v2 .dataTables_info{ padding-left: 10px; }

/* New Table Version 2 DataTables Styles */
.newtable_v2 .table.dataTable{margin: 0 !important;border-bottom:1px solid var(--VS-new-table-border-df);border-top:1px solid var(--VS-new-table-border-df); width:100% !important;}
.newtable_v2 .table thead th{border-bottom:1px solid var(--VS-new-table-border-df) !important;}

/* Version 2 Bullet Line List Form Check Input Disabled Styles */
.version2 .bullet-line-list .form-check-input:disabled, .version2 .form-check-input[disabled] ~ .form-check-label,.version2 .form-check-input:disabled ~ .form-check-label{ opacity: 1 !important;}

/* Hover Underline Styles */
.hover_underline {display: inline-block;position: relative;}
.hover_underline:hover{color: var(--VS-context) !important;}
.hover_underline:after {content: '';position: absolute;width: 100%;transform: scaleX(0);height: 2px;bottom: -2px;left: 0;background-color: var(--VS-hover-underline-color);transform-origin: bottom right;transition: transform 0.25s ease-out;}
.hover_underline:hover:after {transform: scaleX(1);transform-origin: bottom left;}

/* Tooltip Z-index */
.tooltip {z-index: 100000000;}

/* Bullet Line List Active Select Options Label Color */
.bullet-line-list .active.selectoptions .form-check-label {color: var(--VS-context-dark);}

/* DataTables Sorting Icons Line Height */
.dataTables_wrapper .dataTable thead .sorting:before, .dataTables_wrapper .dataTable thead .sorting:after, .dataTables_wrapper .dataTable thead .sorting_asc:before, .dataTables_wrapper .dataTable thead .sorting_asc:after, .dataTables_wrapper .dataTable thead .sorting_desc:before, .dataTables_wrapper .dataTable thead .sorting_desc:after, .dataTables_wrapper .dataTable thead .sorting_asc_disabled:before, .dataTables_wrapper .dataTable thead .sorting_asc_disabled:after, .dataTables_wrapper .dataTable thead .sorting_desc_disabled:before, .dataTables_wrapper .dataTable thead .sorting_desc_disabled:after{line-height: 1.5;}

/* Tooltip Minimum Width */
.tooltip{min-width: inherit;}

/* TinyMCE Statusbar Display */
.tox .tox-statusbar {  display: none !important;}

/* Filter Multi-Select Item Background */
.filter-multi-select > .viewbar > .selected-items > .item{ background-color: var(--VS-context) !important;color: var(--VS-secondary-color) !important;filter: none !important;}
.filter-multi-select > .viewbar > .selected-items > .item > button {color: var(--VS-secondary-color) !important; }

/* Select2 Container Default Multiple Selection Border */
.select2-container--default .select2-selection--multiple, .tox-tinymce{ border: 1px solid var(--VS-new-table-control-border) !important;}

/* Breadcrumb Styles */
.breadcrumb{border: 0; padding: 0;}

/* Filter Multi-Select Checkbox Checked/Indeterminate Background */
.filter-multi-select .dropdown-item .custom-checkbox:checked ~ .custom-control-label::before, .filter-multi-select .dropdown-item .custom-checkbox:indeterminate ~ .custom-control-label::before{ background-color: var(--VS-context) !important; border-color: var(--VS-context) !important;}

/* Form Check Label Input Checkbox Disabled Checked After Pseudo-element */
.form-check .form-check-label input[type="checkbox"]:disabled:checked + .input-helper:after{background: var(--VS-context);}


/* Toolbar Bottom Background */
.toolbar-bottom{background-color: var(--VS-toolbar-bottom-bg);}

/* SweetAlert Button Font Weight */
.swal-button{font-weight: normal;}

/* SweetAlert Text and Title Color */
.swal-text,.swal-title{color: var(--VS-nav-link-active-color);}

/* Background Opacity 10 Utility */
.bg-opacity-10{ background-color: var(--VS-bg-opacity-10) !important;}

/* Text Blue Utility */
.text-blue{color: var(--VS-context-dark);}

/* Table Cell Link Display */
.table td a, .jsgrid .jsgrid-table td a{ display: inline-block;}

/* DataTables Search Panes Container Styles */
.dtsp-panesContainer{display: none;  transition: height 200ms; margin-top: 5px; background-color: var(--VS-white); border: 2px solid var(--VS-white);}
.dtsp-panesContainer.show{display:inherit; transition: height 200ms;}

/* DataTables Search Panes Top Row Background */
.dtsp-topRow{ background-color: var(--VS-dtsp-top-row-bg);}

/* DataTables Search Panes Top Row Input Font Size */
div.dtsp-topRow div.dtsp-subRow1 input{font-size: .8rem;}

/* DataTables Search Panes Input Button Hover Styles */
div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane input.dtsp-paneInputButton:hover, div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane button.dtsp-paneButton:hover{ background-color: var(--VS-white);}

/* DataTables Scroll Body Font Size */
.dataTables_scrollBody{ font-size: .8rem !important;}

/* DataTables Search Panes Clear All Button Styles */
div.dtsp-panesContainer button.dtsp-clearAll, div.dtsp-panesContainer button.dtsp-clearAll:hover{ font-size: .8rem; background-color: var(--VS-dtsp-clear-all-bg); padding: 2px 3px; color: var(--VS-dtsp-clear-all-color);}
div.dtsp-panesContainer button.dtsp-clearAll:disabled{ opacity: .5;}

/* DataTables Search Panes Title Styles */
.dtsp-title{ margin-left:5px; font-size: .8rem; font-weight: bold;}

/* DataTables Search Panes Clear All Button Margin */
.dtsp-clearAll{margin-right: 5px; margin-top: 7px;}

/* New Table Version 2 DataTables Length Width */
.newtable_v2 .dataTables_length{ width: 50%; float: left;     background-color: var(--VS-new-table-row-bg);}

/* New Table Version 2 DataTables Filter Width */
.newtable_v2 .dataTables_filter{ width: 50%; float: right;     background-color: var(--VS-new-table-row-bg);}

/* Media Query for Navbar and Main Panel Width */
@media (min-width: 991px) { .navbar .navbar-brand-wrapper {width: 230px;} .navbar .navbar-menu-wrapper {width: calc(100% - 230px);} .main-panel {width: calc(100% - 230px);} .sidebar{width: 230px;}}

/* Media Query for Font Size and Brand Logo Image Height */
@media (-webkit-min-device-pixel-ratio: 1.25) {html, body{ font-size: 14px;}.auth-form-light .brand-logo img{ max-height: 80px;}}

/* Not Supplier Background Styles */
.notsupplier.bg-light, .notsupplier.bg-light .accordion-button{ background-color: var(--VS-notsupplier-bg) !important}

/* Form Select Font Size */
.form-select{ font-size: .875rem;}

/* Navbar Menu Wrapper Dropdown Menu Font Size */
.navbar-menu-wrapper .dropdown-menu {font-size: 0.813rem;}

/* Professional Estimate Input Styles */
.proEst_input{position: relative;}
.proEst_input input{padding-right: 30px;}
.proEst_input::after{content: 'Kg'; position: absolute;  right: 6px;top: 6px;}

/* Form Select Disabled/Readonly Styles */
.form-select:disabled, .form-control:disabled, .form-select:readonly, .form-control:readonly{ color: var(--VS-pro-est-input-color) !important; }

/* Smart Wizard Justified Navigation Link Display */
.sw.sw-justified > .nav > li, .sw.sw-justified > .nav .nav-link{ display: inline-block; padding: 0;}

/* Select2 Container Default Single Selection Arrow Styles */
.select2-container--default .select2-selection--single .select2-selection__arrow{background-image:var(--VS-select2-arrow-color); background-repeat: no-repeat; background-position: 0 center; background-size: 12px; width: 25px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow b{display: none;}

/* Filter Multi-Select Viewbar Background */
.filter-multi-select > .viewbar{ background-color: var(--VS-white);}

/* Order Status Change Font Size and Padding */
#orderStatusChange{font-size: 1rem; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;}

/* Table Cell Image and Background Icon Styles */
.table td img, .bg_icon {width: 16px !important;height: 16px !important;border-radius: 0px !important;}

/* Label Text Alignment */
label, label.form-label{text-align: left;}

/* Textbox Error Styles */
.textbox_error{position: relative;}
.textbox_error .parsley-errors-list{position: relative; margin: 0; padding: 10px;}
.parsley-errors-list{ position: relative; margin: 0;}

/* Error Response Parsley Errors List Styles */
/* .error_res .parsley-errors-list{position: relative;margin-bottom: 0;padding-bottom: 0;} */

/* Error UI Styles */
.error_ui{ position: relative;}
.error_ui .parsley-errors-list{margin-bottom: 0; padding-bottom: 0; position: absolute; bottom: -20px;}

/* Sidebar Navigation Link Position */
.sidebar .nav .nav-item .nav-link{position: relative;}

/* Sidebar Sub-Menu Padding */
.sidebar .nav.sub-menu{padding: 0.25rem 0 0 1.5rem}
.sidebar .first-level{padding: 0.25rem 0 0 2.5rem !important}

/* Preview List Item Content Paragraph Styles */
.preview-list .preview-item .preview-item-content p{color: var(--VS-nav-link-active-color); margin-bottom: 0;}

/* Datepicker Input Group Border */
.datepicker.input-group, .datepicker.asColorPicker-wrap{ border: initial;}

/* Media Query for Main Heading Pseudo-elements Width */
@media (min-width: 991.98px) and (max-width: 1460.98px){.mainheading::before, .mainheading::after{ width: 9vw !important; }}

/* Navbar Menu Wrapper Search Input Group Styles */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group{ padding-left: .8rem; line-height: 1;}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .mdi-magnify{ height: 12px;}

/* Form Control and Form Select Padding and Line Height */
.form-control,.form-select { padding: 0.7rem 0.375rem; line-height: 1.2;}

/* Width 100px Utility */
.w100p{ width: 100px;}

/* Error Per Absolute Positioning */
.error_per_ab{position: relative;}
.error_per_ab ul.parsley-errors-list{ bottom: -18px; padding-bottom: 0;}

/* Preferred Supplier Styles */
.prefsupp {position: absolute !important; bottom: 25px; right: 0px; width: 400px; text-align: left; z-index: 99;}
.prefsupp1{left:0px;}
.prefer-edit{max-height: 165px;overflow-x: hidden;}
.preferbtn  {font-size: 12px;padding: 1px ;line-height: .5;height: 18px;}
.preffered-trusted{margin-top:20px; margin-right: 15px;}
.category-tags{background: var(--VS-category-tags-bg); border: 1px solid var(--VS-category-tags-border); color: var(--VS-category-tags-color);}
.prefer-edit, .prefer-edit a, .prefer-edit .dealing-rfq { font-size: 12px; }
.suppCheckBox { width: 15px; height: 15px; margin-top: 10px;}
.prefsupp.collapsing{ transition: none 0s }
.icon_prefferd_admin{background-image:var(--VS-icon-plus);background-position:center center;background-repeat:no-repeat; width: 12px; height: 12px; display: inline-block; background-size: cover; margin-top: 5px;}
.icon_prefferd_admin[aria-expanded=true]{background-image:var(--VS-icon-plus);background-position:center center;background-repeat:no-repeat;transform: rotate(45deg);}
.icon_prefferd_admin[aria-expanded=false]{background-image:var(--VS-icon-people-carry-1);background-position:center center;background-repeat:no-repeat; width: 18px; height: 18px;}

/* Multiple RFQ Attachment Button Styles */
.btnlistuploaded{ width: 36px; position: relative;}
.btnlistuploaded .listofuploadedfiles {visibility: hidden;opacity: 0;transition: visibility 0s linear .8s, opacity .8s;}
.btnlistuploaded:hover .listofuploadedfiles {visibility: visible;opacity: 1;transition: visibility 0s linear 0s, opacity .8s;}
.listofuploadedfiles{position: absolute !important;background: var(--VS-uploaded-files-list-bg);border:1px solid var(--VS-uploaded-files-list-border);border-radius: 8px;box-shadow:0 10px 2rem rgba(0,0,0,.2);z-index: 5;top: 16px;left: calc(100% - 140px);font-size: 12px;font-weight: normal;width:280px;overflow: auto; max-height: 180px;}

/* Supplier Video Tutorial Dropdown Toggle Styles */
#supplier_video_tutorial .dropdown-toggle::after {display: none; }
#supplier_video_tutorial .dropdown-menu[data-bs-popper] {top:88%;}
#supplier_video_tutorial .dropdown-menu-end[data-bs-popper] {right: 0x}

/* Quincus Table Checkbox Styles */
.checkbox-class {width: 10px;}

/* Table Header Padding */
.table thead th, .jsgrid .jsgrid-table thead th {padding: 0.5rem 0.5rem;}

/* Quincus Table Styles */
.quincus_table table thead th{padding: 0.5rem 0.5rem !important;}
.quincus_table table tbody td{padding: 0.5rem 0.5rem !important;}
.quincus_table{max-height: 250px;overflow-y: auto;}
.quincus_table-head{position: sticky;top: 0;z-index: 99;}
.quincus_table .form-check .form-check-input{margin: 0 !important;}

/* Tooltip Section Multi Product List Styles */
.tooltip_section.multi_pro_list {bottom: inherit;left: 0;max-height: 200px;overflow-y: auto;}

/* Table Product Display Styles */
.tabel-product-display{background-color: var(--VS-tabel-product-display-bg);position: sticky;top: -5px;z-index: 1;}

/* Accordion Button After Pseudo-element Margin */
.accordion-button::after {margin-left:50px;}

/* Select2 Container Default Open Z-index */
span.select2-container.select2-container--default.select2-container--open{z-index: 1060;}

/* Sidebar Icon Only Navigation Item Chat Background Display */
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item + .chat-bg .chatName, .sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item + .chat-bg .dots  { display:none}
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item + .chat-bg {padding:1rem;}

/* Background Amount/Overdue/Xen Background Size */
.bg_Amount1, .bg_Overdue1, .bg_xen1{ background-size: 90px;}

/* Comment Button Font Size */
.comment-btn {font-size: 0.9rem !important;}

/* Comment Placeholder Font Size */
.comment-placeholder {font-size: 1rem !important;}

/* Header Sub Text Font Size */
.header-sub-text {font-size: 0.85rem !important;}

/* Comment Section Max Height */
.comment-section {max-height: 290px;overflow: auto;}

/* Comment Header Image Styles */
.comment-header img{ width: 36px; height: 36px}

/* Right Sidebar Position Sticky Z-index */
#right-sidebar > position-sticky{ z-index:5}

/* Feedback Description Font Styles */
#feedback_description{font-size: 13px; font-weight: normal !important;}

/* Message Names List Styles */
.message-names ul{margin: 0px;padding: 0px;list-style: none;}
.message-names li{position: relative;}
.message-names li .user-link{text-decoration: none;max-width: 310px;justify-content: space-between;}

/* User Line List Hover Styles */
.user-line-list li:hover{background-color: var(--VS-user-line-list-hover-bg);}

/* User Line List Active Styles */
.user-line-list li.active{ background-color: var(--VS-user-line-list-active-bg); color: var(--VS-user-line-list-active-color) !important;}
.user-line-list li.active p,.user-line-list li.active .time,.user-line-list li.active .badge{color: var(--VS-user-line-list-active-color) !important;}

/* User Line List Max Height */
.user-line-list{max-height: 150px;overflow-y: auto;}

/* RFQ Name Active State Background */
.rfq-name a[aria-expanded="true"]{background-color: var(--VS-tab-content-bg);}
.rfq-name a[aria-expanded="true"] + div{background-color: var(--VS-tab-content-bg) ;}

/* Tracking Display */
.tracking{display: flex !important;margin-left: 0px !important;}

/* Badge Section Badge Width */
.badgesection .badge{ width: 100%;}

/* Media Query for DataTable Width and Category Popup Hover Styles */
@media  (min-width: 1600.98px) and (max-width: 1600.98px) {.dataTable {width: 100% !important;}
.categorysection_popup:hover .categoryhover.editQuoteAttribute{ display: inherit; position: absolute; top: 2rem; width: 400px !important; left: calc(50% - 200px ) !important; max-height: 115px; height: 200px; overflow-y: auto; overflow-x: hidden; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
.categorysection_popup:hover .categoryhover.createQuoteAttribute{ display: inherit; position: absolute; top: 2rem !important; width: 400px !important; left: calc(50% - 200px ) !important; max-height: 95px; height: 200px; overflow-y: auto; overflow-x: hidden; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
.form-label{font-size: 12px !important;}
}

/* Non-PKP Button Margin Top */
input.non-pkp-btn, input.pkp-btn{margin-top: 1px;}

/* Supplier Professional Profile Styles */
.supplierProfessionalPro li.nav-item { margin-right: 0; font-size: 10px;}
.supplierProfessionalPro li.nav-item button span{ width: 20px; height: 20px; border-radius: 50%; background-color: var(--VS-supplier-prof-btn-bg); display: inline-block; color: var(--VS-context);line-height: 19px; text-align: center;}
.supplierProfessionalPro li.nav-item button.active span{border:1px solid var(--VS-white);}
.supplierProfessionalPro.nav-pills {border-bottom: 0px solid #f6f2f2; padding-bottom: 0rem;}
.supplierProfessionalPro .tab-content{border: 0;}
@media (max-width:1599.98px) { .supplierProfessionalPro li button.nav-link{ padding-left: .5rem; padding-right: .5rem;} }
@media (min-width:1400px) { .supplierProfessionalPro li.nav-item{font-size: 12px;} }
@media (max-width:1399.98px) { .supplierProfessionalPro {font-size: 14px;} table.table.table-hover.tablecatagory_pop.dataTable.no-footer{width: 100% !important;}}

/* Select2 Container Default Single Selection Height */
.select2-container--default .select2-selection--single {height: 40px !important;}

/* Placeholder Font Size */
::placeholder {font-size: 13px; }

/* DataTables Processing Message Position */
div.dataTables_wrapper div.dataTables_processing {position: fixed !important;border:none !important;background:transparent !important;}

/* Search RFQ Category Search Styles */
.search_rfq .categorysearch{ padding-right: 2rem; background-image: var(--VS-icon-search-b); background-repeat: no-repeat; background-position: 99% 10px; width: 100%;}
.search_rfq .list-group { background-color: var(--VS-search-rfq-list-bg); display: none; border: 1px solid var(--VS-search-rfq-list-border); border-top: 1px var(--VS-white) !important; border-bottom: 1px var(--VS-white) !important; list-style-type: none; position: absolute; left: 0; top: 63px; width: 100%; z-index: 9999; max-height: 170px; overflow-y: auto;}
.search_rfq .list-group .list-group-item{ border-bottom: 1px solid var(--VS-search-rfq-list-item-border); font-size: 13px !important; font-weight: normal;}
.search_rfq .form-control:focus + .list-group { display: block;}

/* UI Autocomplete Max Height */
.ui-autocomplete {max-height: 150px !important;overflow-y: auto;overflow-x: hidden;}

/* UI Menu Item Font Size */
.ui-menu-item{font-size: 13px !important;}

/* Search RFQ Edit Category Search Styles */
.search_rfq_edit .categorysearch{ padding-right: 2rem; background-image: var(--VS-icon-search-b); background-repeat: no-repeat; background-position: 99% 10px; width: 100%;}
.search_rfq_edit .list-group { background-color: var(--VS-search-rfq-list-bg); display: none; border: 1px solid var(--VS-search-rfq-list-border); border-top: 1px var(--VS-white) !important; border-bottom: 1px var(--VS-white) !important; list-style-type: none; position: absolute; left: 0; top: 63px;  width: 100%; z-index: 9999; max-height: 180px; overflow-y: auto;}
.search_rfq_edit .list-group .list-group-item{ border-bottom: 1px solid var(--VS-search-rfq-list-item-border); font-size: 13px !important; font-weight: normal;}
.search_rfq_edit .form-control:focus + .list-group { display: block;}

/* Smart Wizard Tab Content Overflow */
.sw > .tab-content{overflow: initial !important;}

/* Multi-Select All Custom Control Display */
.multiselectall .filter-multi-select .custom-control:first-child{ display: none;}

/* Blink Animation */
.blink{animation: 1.5s linear condemned_blink_effect;animation-iteration-count: 1;}
@keyframes condemned_blink_effect {
    0% { box-shadow: 0 0 0 0.25rem rgba(190, 31, 46, .25) !important; }
    100% { box-shadow: 0 0 0 0.25rem rgba(249, 1, 26, 0.753) !important; }
    0% { box-shadow: 0 0 0 0.25rem rgba(190, 31, 46, .25) !important; }
}

/* Category Section Popup Styles */
.categorysection_popup{ position: relative; padding: 3px;}
.categorysection_popup .categoryhover{display: none;}
.categorysection_popup .categoryhover ol{margin-bottom: 0; margin-left: 0px !important; text-wrap: wrap !important;}
.categorysection_popup .categoryhover ol li{padding: 3px; margin:0 5px;}
.categorysection_popup:hover .categoryhover{ display: inherit; position: absolute; top: 0rem; width: 250px; left: calc(50% - -30px); max-height: 140px; overflow: auto; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
.categorysection_popup:hover .categoryhover.rfcView{ display: inherit; position: absolute; top: 0rem; width: 250px; left: calc(50% - -43px ) !important; max-height: 140px; overflow: auto; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
.categorysection_popup:hover .categoryhover.AttributeHover{ display: inherit; position: absolute; top: 0rem; width: 500px; left: calc(50% - -11px ) !important; max-height: 100px; /* height: 150px; */ overflow-y: auto; overflow-x: hidden; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
.categorysection_popup:hover .categoryhover.editQuoteAttribute{ display: inherit; position: absolute; top: 2rem; width: 500px; left: calc(50% - 30px ) !important; max-height: 115px; height: 200px; overflow-y: auto; overflow-x: hidden; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
.categorysection_popup:hover .categoryhover.createQuoteAttribute{ display: inherit; position: absolute; top: 2rem !important; width: 400px !important; left: calc(50% - 200px ) !important; max-height: 95px; height: 200px; overflow-y: auto; overflow-x: hidden; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
#supplierTable tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover{  top: inherit; bottom: 0px;}
#supplierTable tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover{  top: inherit; bottom: 0px;}
#supplierTable tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover{  top: inherit; bottom: 0px;}
#supplierTable tr:nth-child(1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(1) .categorysection_popup:hover .categoryhover{  top: 0rem !important; bottom: inherit !important;}
#supplierTable tr:nth-child(2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(2) .categorysection_popup:hover .categoryhover{  top: 0rem !important; bottom: inherit !important;}
#supplierTable tr:nth-child(3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(3) .categorysection_popup:hover .categoryhover{  top: 0rem !important; bottom: inherit !important;}
.QuoteAttributeTable tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover{  top: 0px; bottom: inherit;}
.QuoteAttributeTable tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover{  top: 0px; bottom: inherit;}
.QuoteAttributeTable tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover{  top: inherit ; bottom: 0px;}
.QuoteAttributeTable tr:nth-child(1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(1) .categorysection_popup:hover .categoryhover{  bottom: 0px !important;}
.QuoteAttributeTable tr:nth-child(2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(2) .categorysection_popup:hover .categoryhover{  bottom: 0px !important;}
.QuoteAttributeTable tr:nth-child(3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(3) .categorysection_popup:hover .categoryhover{  bottom: 0px !important;}
.Order_Attribute tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover{  top: 0px; bottom: inherit;}
.Order_Attribute tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover{  top: 0px; bottom: inherit;}
.Order_Attribute tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover{  top: inherit ; bottom: 0px;}
.Order_Attribute tr:nth-child(1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(1) .categorysection_popup:hover .categoryhover{ bottom: 0px !important;}
.Order_Attribute tr:nth-child(2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(2) .categorysection_popup:hover .categoryhover{ bottom: 0px !important;}
.Order_Attribute tr:nth-child(3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(3) .categorysection_popup:hover .categoryhover{ bottom: 0px !important;}
.Payment_Attribute tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover{  top: 0px; bottom: inherit;}
.Payment_Attribute tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover{  top: 0px; bottom: inherit;}
.Payment_Attribute tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover{  top: inherit ; bottom: 0px;}
.Payment_Attribute tr:nth-child(1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(1) .categorysection_popup:hover .categoryhover{ bottom: 0px !important;}
.Payment_Attribute tr:nth-child(2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(2) .categorysection_popup:hover .categoryhover{ bottom: 0px !important;}
.Payment_Attribute tr:nth-child(3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(3) .categorysection_popup:hover .categoryhover{ bottom: 0px !important;}

/* Seller Download Air Waybill Dropdown Toggle After Pseudo-element */
.sellerDownloadAirWayBill.dropdown-toggle:after{float: right;  margin-top: 3px;}

/* DataTables Scroll Body and Tbody Height */
.dataTables_scrollBody, .tbodyheight{min-height: 415px;background-color: var(--VS-white);}

/* Blink Me Animation for Checkbox */
.blink_me {animation: blinker 1s linear infinite;position: relative;}
.blink_me::after{content: '';box-shadow: 0 0 0 1px var(--VS-white), 0 0 0 3px var(--VS-modal-header);width: 8px;height: 8px;display: block;top: 7px;position: absolute;left: 2px;}
@keyframes blinker { 50% { opacity: .3; } }


/* Multisteps Form Progress Styles */
.multisteps-form__progress {display: grid;grid-template-columns: repeat(auto-fit, minmax(0, 1fr));}
.multisteps-form__progress-btn {transition-property: all;transition-duration: 0.15s;transition-timing-function: linear;transition-delay: 0s;position: relative;padding-top: 20px;color: rgba(108, 117, 125, 0.7);text-indent: -9999px;border: none;background-color: transparent;outline: none !important;cursor: pointer;}
@media (min-width: 500px) {.multisteps-form__progress-btn {text-indent: 0;}}
.multisteps-form__progress-btn:before {position: absolute;top: 0; left: 50%; display: block; width: 13px; height: 13px; content: ""; transform: translateX(-50%); transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s; border: 2px solid currentColor; border-radius: 50%; background-color: var(--VS-white); box-sizing: border-box; z-index: 3;}
.multisteps-form__progress-btn{font-size: 14px;}
.multisteps-form__progress-btn:after {position: absolute;  top: 5px; left: calc(-50% - 13px / 2); transition-property: all; transition-duration: 0.15s; transition-timing-function: linear; transition-delay: 0s; display: block; width: 100%; height: 2px; content: ""; background-color: currentColor; z-index: 1; }
.multisteps-form__progress-btn:first-child:after { display: none; }
.multisteps-form__progress-btn.js-active { color: var(--VS-context); }
.multisteps-form__progress-btn.js-active:before {transform: translateX(-50%) scale(1.2); background-color: currentColor; }
.multisteps-form__form { position: relative; }
.multisteps-form__panel { position: absolute; top: 0; left: 0; width: 100%; height: 490px; opacity: 0; visibility: hidden;}
.multisteps-form__panel .button-row{position: absolute;right: 0;bottom: 0px;}
.multisteps-form__panel.js-active {  opacity: 1; visibility: visible; }
.multisteps-form__panel[data-animation=scaleIn] {transform: scale(0.9);}
.multisteps-form__panel[data-animation=scaleIn].js-active {transition-property: all;transition-duration: 0.2s;transition-timing-function: linear;transition-delay: 0s;transform: scale(1);}
.multisteps-form__content .accordion .accordion-item .accordion-button{background-color: #f0f3ff !important;}

/* Multisteps Form Content Table Responsive Styles */
.multisteps-form__content .table-responsive{ overflow-y: inherit !important; height: auto !important }

/* Product Description Styles */
.productDiscriptionCss{width: 35%;word-break: break-all;min-width: 250px !important;}

/* Multiple Product Hover Tooltip HTML Styles */
.multipleproducthover .tooltiphtml{ height: inherit; display: inline-block;}
@media (min-width: 768px) {.multipleproducthover .tooltip_section{ min-width:550px;}}
.multipleproducthover .tooltiphtml .tooltip_section {height: 0; transition: visibility 0s linear .8s, opacity .8s;}
.multipleproducthover .tooltiphtml:hover .tooltip_section {height: inherit; transition: visibility 0s linear .8s, opacity .8s;}

/* Multi Product List Table Styles */
.multi_pro_list table{ border: 1px solid #CCCCCC; font-size: 12px;}
.multi_pro_list table thead{ background-color: var(--VS-tabel-product-display-bg);}

/* Tooltip Section Multi Product List Positioning */
.tooltip_section.multi_pro_list{ bottom: inherit; left: 0; max-height: 200px;  overflow-y: auto; }
.tooltip_section.multi_pro_list::before, .tooltip_section.multi_pro_list::after{content: ''; width: 0; height: 0; border-left: 0px solid transparent; position: absolute; }
.tooltip_section.multi_pro_list::before{border-left: 0px solid transparent; border-right: 0px solid transparent;border-bottom: 0px solid #ccc; top: -8px; left: 8px;}
.tooltip_section.multi_pro_list::after{border-right: 0px solid transparent;border-bottom: 0px solid #fff; bottom: inherit; top: -11px; left: 7px;}

/* Bulk Disbursement Modal Content Tooltip HTML Styles */
#bulkdisbursement-modal-content .tooltiphtml{position: relative;}
#bulkdisbursement-modal-content .tooltiphtml .tooltip_section {visibility: hidden;opacity: 0;transition: visibility 0s linear .8s, opacity .8s;}
#bulkdisbursement-modal-content .tooltip_section {position: absolute;background: var(--VS-white);border: 1px solid var(--VS-category-popup-border);border-radius: 8px;box-shadow: 0 10px 2rem rgb(0 0 0 / 20%);z-index: 5;bottom: 0;left: calc(50% - 150px);font-size: 12px;font-weight: normal;min-width: 300px;bottom: 1.2rem;overflow: hidden;}
#bulkdisbursement-modal-content .tooltiphtml:hover .tooltip_section { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity .8s;}

/* Tooltip Section Subproducts Max Height */
.tooltip_section .subproducts{max-height: 100px; overflow-y: auto;}

/* Confirm Order Products Modal Tooltip Section Multi Product List Pseudo-elements */
#confirmOrderProductsModal .tooltip_section.multi_pro_list::before, #confirmOrderProductsModal .tooltip_section.multi_pro_list::after{display: none;}

/* Professional Progress Styles */
.profprogress {position: relative; text-align: center;}
.barOverflow {position: relative; overflow: hidden; width: 60px; height: 30px; margin-bottom: -18px;}
.bar { position: absolute; top: 0; left: 0;  width: 60px; height: 60px; border-radius: 50%; box-sizing: border-box; border: 5px solid #eee; border-bottom-color: #1D0FFF; border-right-color: #1D0FFF;}

/* Fill Details Modal Close Button Styles */
#filldetailsmodal .modal_btn-close {position: absolute;background-color: transparent;border-radius: 50%;top: -40px;right: -11px;}

/* Fill Details Modal Content Styles */
#filldetailsmodal .modal-content {border-radius: 1rem !important;background-color: var(--VS-header);}

/* Image Left Popup Styles */
.img_left_pop {position: relative;left: -15%;}
@media (min-width: 576px){#filldetailsmodal .modal-dialog {max-width: 520px;margin: 1.75rem auto;}}
@media (max-width: 767px){ .img_left_pop { position: relative; left: 0; text-align: center; line-height: 2; } .img_left_pop img{ max-height: 150px; margin-top: -60px; } .img_left_pop div{padding-right: 1rem;} #closeSupplierProfilePopubHide{position: absolute;top: 0;z-index: 5000;} #closeSupplierProfilePopubHide .btn-close{ padding: .8rem !important; width: 36px;}}

/* Button Blink Animation */
@keyframes glowing { 0% { background-color: #1E2C6F; box-shadow: 0 0 5px rgba(70, 85, 156, 0.3); } 50% { background-color: #1932ab; box-shadow: 0 0 20px rgba(70, 85, 156, 1); } 100% { background-color: #1E2C6F; box-shadow: 0 0 5px rgba(70, 85, 156, 0.8); } }
.button_blink { animation: glowing 1300ms infinite; }

/* Resize Vertical */
.resize { resize: vertical;}

/* Category Section Popup Anchor White Space */
.categorysection_popup > a{ white-space: nowrap;}

/* Media Queries for Responsive Design */
@media (max-width: 575.98px){
    .bg_product, .bg_Suppliers, .bg_RFQs, .bg_Orders, .bg_Users, .bg_Quotes, .bg_Amount, .bg_Overdue, .bg_Va_account, .bg_Limit_application, .bg_virtual_balance, .bg_xen, .bg_re_amount, .bg_pe_amount, .bg_limit, .bg_unassigned, .bg_Limit_application, .bg_QuotesExpired, .bg_UpcomingQuotes, .bg_UnrespondedRFQs { height: 90px; background-size: 60px !important;}
    h2,h3{ font-size: 1.2rem; }
    h4{margin-bottom: 0.5rem !important;}
    .newtable_v2 .dataTables_length{ width: 100% !important; float: none !important;}
    .newtable_v2 .dataTables_filter{ width: 100% !important; float: none !important;}
    .dt-buttons{margin-bottom:0rem !important;}
    .responsive_column{ justify-content: start !important; }
    .productDiscriptionCss{ min-width: 250px !important; }
    .bg_Amount1, .bg_Overdue1, .bg_xen1{ background-size: 60px !important; }
    .notification_sections{ position: relative;}
    .notification_sections > div:nth-child(1){position: absolute; padding-left: .5rem; align-items: flex-start !important;}
    .notification_sections > div{padding-left: 2rem;}
    .responsive_btn{padding: 0.8em 1em !important;font-size: .75rem !important;}
    .modal .modal-dialog .modal-content .modal-footer{ flex-direction: unset; align-items: self-start; }
    .modal .modal-dialog .modal-content .modal-footer > :not(:first-child){ margin-left: 10px; }
}
@media (max-width: 767.98px) {
    .newtable_v2 .dataTables_length, .newtable_v2 .dataTables_filter{width: 100%}
    .supplierProfessionalPro ul.nav-pills{ display: flex; width: 100%; overflow: auto; flex-wrap: nowrap; justify-content:start !important;}
    .supplierProfessionalPro ul.nav-pills li{white-space: nowrap}
}

/* Font Size 11px Background Pre Styles */
.fs-11.bg-pre {background-color: var(--VS-white) !important; border: 1px solid #dde9f9; width: 100%;padding: 2px;display: block; text-align: center; border-radius: 4px;}

/* Font Size 11px Text Received Styles */
.fs-11.text-recieved { color: var(--VS-secondary-color) !important; background-color: var(--VS-white) !important; border-color: var(--VS-context) !important;}

/* Right Sidebar Tab Content Card Header Min Height */
#right-sidebar .tab-content .card-header{min-height:inherit}

/* Modal Open Body Height and Overflow */
body.modal-open{height: 100vh !important; overflow-y: auto !important;}

/* Input Focus Box Shadow */
.inputfocus{box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);}

/* DataTables Filter Input Padding */
.dataTables_filter input{ padding: .5rem;}

/* DataTables Scroll Head Inner Min Width */
.dataTables_scrollHeadInner{min-width: 100%;}

/* Form Control Disabled/Readonly Background */
.form-control:disabled, .form-control[readonly], .form-select:disabled, .form-select[readonly], .select2-container--default.select2-container--disabled .select2-selection--single { background-color: #EEF2F5 !important; }

/* Profile Name Company Name Hover Styles */
.profile-name .company-name:hover { max-width: 150px !important; cursor: pointer; white-space: normal; word-break: break-word; }


/* Company Switch Style Overflow */
.company_switch_style{overflow: inherit !important;}

/* Company Switch Collapse Positioning */
#CompanySwitchcollapse{ position: absolute; top: 50px; left: 235px; right: 1430px; min-width:200px;}
@media  (max-width: 1399.99px) { #CompanySwitchcollapse{ right:1200px;} }
@media screen and (max-width: 1799.98px) { #CompanySwitchcollapse{right: 1430px;} }
@media screen and (max-width: 1499.98px) { #CompanySwitchcollapse{right: 1020px;} }
@media screen and (max-width: 1299.98px) { #CompanySwitchcollapse{right: 840px;} }
@media screen and (max-width: 1200.98px) { #CompanySwitchcollapse{right: 840px;} }
@media screen and (max-width: 1024.98px) { #CompanySwitchcollapse{top: 50px;} }
@media (min-width: 347.98px) and (max-width: 988.98px) { #CompanySwitchcollapse{top: 50px; left: 5px; top: 74px; right: 0px;z-index:100;} }

/* Company Name List Display */
.company_namelist{display: none;}

/* Company Name Company Switch Hover Styles */
.company-name.company_switch:hover{ white-space: inherit; word-break: inherit;}

/* Media Query for Category Section Popup Hover Left Position */
@media screen and (max-width: .98px){.categorysection_popup:hover .categoryhover{left: calc(50% - 30px);}}

/* Select2 Container Default Single Selection Arrow Height */
.select2-container--default .select2-selection--single .select2-selection__arrow{height:35px !important; }

/* Tooltip Right Align Tooltip HTML Styles */
.tooltiprightalign .tooltiphtml .tooltip_section, .tooltiprightalign .tooltiphtml:hover .tooltip_section{ bottom: inherit !important; left: 20px !important; top: -36px;}

/* Date Range Picker Position */
.daterangepicker{position:absolute !important;}

/* Static Backdrop Overflow */
#staticBackdrop{overflow-y: auto;}

/* Admin Image Width */
.admin_img{width: 100px;}

/* Quote Counts Position */
#quoteCounts{position: absolute; right: 2.5rem;}

/* Partner Card Styles */
.partnercard{width: auto;max-width: 100px;max-height: 100px;filter: drop-shadow(0px 0px 1px #666666);}

/* Sidebar Powered By Text Styles */
.sidebar span.text-light.position-fixed.poweredby{ bottom: 20px !important; margin-left: 15px; font-size: 12px; }
@media(max-height:800px) {.sidebar span.text-light.position-fixed.poweredby{position: relative !important; bottom: inherit !important; padding-top: 1rem; padding-bottom: 1rem;}}

/* Text Small Font Size */
.text-small{font-size: 0.8em;}

/* Primary Button Magic Hover Color */
.primary-button-magic:hover{color: var(--VS-white) !important;}

/* Close Button White Background Image */
.close-btn-white { background-image: var(--VS-icon-times) !important; background-repeat: no-repeat !important; background-position: center !important; }

/* Media Query for Datepicker Z-index and Action Main Tab Styles */
@media(max-width:1366px) {.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-right.datepicker-orient-top{z-index: 100 !important;}  .actionMainTab .select-tabesBtn {margin-right: 300px !important;} .actionMainTab .select-tabesBtn2.other { margin-right: 300px !important;} .actionMainTab .select-tabesBtn .tagCategorybox.triple::after{ width: 350px !important; } .actionMainTab .select-tabesBtn2 .tagAddress.triple::after{width: 376px !important;} .select2-container--default .select2-selection--single .select2-selection__arrow{top: 0px !important;} .nav-link.select-tabesBtn.active + .nav-link.select-tabesBtn3{ margin-left: 193px !important; } .actionMainTab .select-tabesBtn .tagCategorybox.multiple::after{width: 386px !important;}}

/* Import Highlight Background */
.importHighlight { background-color: #e1effff5; }

/* Branch Highlight Background and Border */
.branchHighlight { background-color: #fffae1f5;  border: 1px solid #e7e7e7;}

/* Deactivated Branch Color */
.deactivatedBranch { color: #8080809c; }

/* Direct Order Highlight Background */
.directOrderHighlight { background-color: #e1effff5 !important;}

/* Auto Quote Highlight Background */
.autoQuoteHighlight { background-color: #e1fff4f5 !important;}

/* Small Text Color */
.small-text{color: var(--VS-context-dark);}

/* User Brand Logo Styles */
.userBrandLogo{ width: 100%; height: 60px !important;}

/* Sidebar Background Color */
.sidebar{background-color: var(--VS-ternary-color);}

/* Sidebar Navigation Link and Icon Colors */
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link, .sidebar .nav .nav-item .nav-link i.menu-arrow, .sidebar .nav .nav-item .nav-link i.menu-icon{color: var(--VS-secondary-color); letter-spacing: 0.9px;}

/* Sidebar Navigation Active Item Color */
.sidebar .nav .nav-item.active > .nav-link,.sidebar .nav .nav-item.active > .nav-link .menu-icon{color: var(--VS-secondary-color) !important;}
.sidebar .nav.sub-menu .nav-item .nav-link.active{ font-weight: 600; letter-spacing: 0.9px;color: var(--VS-secondary-color) !important;}

/* Sidebar Navigation Hover Item Styles */
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link{color: var(--VS-secondary-color) !important; background-color: var(--VS-context); letter-spacing: 0.85px;}

/* Navbar Brand Wrapper and Sidebar Sub-Menu Before Pseudo-element Background */
.navbar .navbar-brand-wrapper, .sidebar .nav.sub-menu .nav-item::before{background-color: var(--VS-white); margin-top: 13px;}
.sidebar .nav.sub-menu .nav-item::before{background-color: var(--VS-secondary-color) !important;}

/* Sidebar Navigation Profile Name Color */
.sidebar .nav .nav-item.nav-profile .profile-name .name{color: var(--VS-secondary-color); letter-spacing: 0.9px;}

/* Navbar Brand Wrapper Toggler Color */
.navbar .navbar-brand-wrapper .navbar-toggler{color: var(--VS-secondary-color);}

/* Sidebar Navigation Hover Item Icon Colors */
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link i.menu-arrow,.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link i.menu-icon{color: var(--VS-secondary-color);}

/* Badge Info Styles */
.badge-info, .preview-list .preview-item .preview-thumbnail .badge.badge-offline{color: var(--VS-secondary-color); border: 1px solid var(--VS-context);padding-right: 5px;}

/* Sidebar Navigation Hover Item Badge Info Styles */
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link .badge-info{color: var(--VS-white); border: 1px solid var(--VS-white); padding-right: 5px;}

/* Sidebar Sub-Menu Background */
.sidebar .nav.sub-menu{background-color: var(--VS-context-menu);}

/* Sidebar Sub-Menu Navigation Link Color */
/* .sidebar .nav.sub-menu .nav-item .nav-link{color: var(--VS-secondary-color) !important;} */
.sidebar .nav.sub-menu .nav-item .nav-link:hover{color: var(--VS-secondary-color) !important;font-size: 0.75rem;font-weight: 600;}

/* Sidebar Navigation Hover Expanded Link Styles */
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link[aria-expanded="true"]{background-color: var(--VS-context); color: var(--VS-secondary-color) !important;}

/* Sidebar Navigation Expanded Link Styles */
.sidebar .nav .nav-item .nav-link[aria-expanded="true"]{background-color: var(--VS-context); color: var(--VS-secondary-color) !important;}
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow:before{color: var(--VS-secondary-color);}

/* Navbar Menu Wrapper Background */
.navbar .navbar-menu-wrapper{background-color: var(--VS-ternary-color);}

/* Dropdown Item Hover Styles */
.dropdown-item:hover{background-color: var(--VS-context); color: var(--VS-white) !important;}

/* Navbar Menu Wrapper Dropdown Count Indicator Hover Styles */
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator:hover, .changeStatus:hover {color: var(--VS-context);}

/* Dropdown List Notification Item Hover Styles */
#dropdownListNotification .dropdown-item:hover .preview-item-content .preview-subject{color: var(--VS-white) !important;}
#dropdownListNotification .dropdown-item:hover .preview-item-content p.fw-light.small-text {color: var(--VS-white) !important;}

/* Content Wrapper and Footer Wrapper Background */
.content-wrapper, .footer-wrapper{background-color: #edeef2 !important;}

/* Button Group Home Language Dropdown Toggle Hover Styles */
.btn-group.home_lenguage .btn.dropdown-toggle:hover, .navbar .navbar-brand-wrapper .navbar-toggler:hover{color: var(--VS-context);}

/* Sidebar Navigation Active Item Background */
.sidebar .nav .nav-item.active, .hover_underline:after{background-color: var(--VS-context);}

/* New Table Version 2 Table Header Styles */
.newtable_v2 table thead{background-color: var(--VS-header); color: var(--VS-nav-link-active-color); letter-spacing: 0.9px;}

/* Pagination Active Page Link Styles */
.pagination .page-item.active .page-link,.pagination .page-item:focus .page-link{background-color: var(--VS-context); color: var(--VS-secondary-color) !important; border-color: var(--VS-context);}

/* Pagination Hover Page Link Styles */
.pagination .page-item:hover .page-link{background-color: var(--VS-ternary-color); color: var(--VS-context) !important; border-color: var(--VS-context) !important;}

/* Page Link Color */
.page-link{color: var(--VS-primary-color);}

/* Page Item Disabled Page Link Color */
.page-item.disabled .page-link{color: var(--VS-primary-color);}

/* Primary Button Styles */
.btn.btn-primary,.btn.btn-dark{background-color: var(--VS-secondary-color) !important; color: var(--VS-white) !important; border-color: var(--VS-secondary-color) !important;}
.btn:hover.btn-primary,.btn:hover.btn-dark{background-color: var(--VS-context) !important; color: var(--VS-white) !important; border-color: var(--VS-context) !important;}

/* Anchor Color */
a{ color: #222222;}

/* Navigation Link Color */
a.nav-link{color: var(--VS-secondary-color) !important;}

/* Anchor and Navigation Link Hover Color */
a:hover, a.nav-link:hover{color: var(--VS-context-dark) !important;}

/* Button Icon Font Size */
.btn i, .fc button i, .ajax-upload-dragdrop .ajax-file-upload i, .swal2-modal .swal2-buttonswrapper .swal2-styled i, .swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-confirm i, .swal2-modal .swal2-buttonswrapper .swal2-styled.swal2-cancel i, .wizard > .actions a i{font-size: 0.875rem;}

/* Form Check Input Checked Background */
.form-check-input:checked{background-color: var(--VS-context); border-color: var(--VS-context-dark);}
input[type="radio"]{accent-color: var(--VS-context);}

/* Upload Button Styles */
#upload_btn, .upload_btn{background-color: var(--VS-context) !important; color: var(--VS-white) !important; border-color: var(--VS-context) !important; font-weight: 500 !important; padding: 2px 5px; border-radius: 5px !important; white-space: nowrap !important;}

/* Back to Top Button Background */
body .back_to_top{background-color: var(--VS-context) !important; color: var(--VS-white) !important; border-color: var(--VS-context);}

/* Input Group Text Background */
.input-group-text{background-color: var(--VS-header) !important; color: var(--VS-secondary-color) !important;}

/* Form Control Focus Border Color */
.form-control:focus{border-color: var(--VS-context);}

/* CP Dropdown Background */
.cp-dropdown{background-color: var(--VS-header) !important; color: var(--VS-button) !important;}

/* Item Background */
.item{background-color: var(--VS-white) !important;}

/* Bar Border Colors */
.bar{border-bottom-color:var(--VS-context); border-right-color:var(--VS-context);}

/* Bullet Line List Before Pseudo-element Border Color */
.bullet-line-list li:before{border-color: var(--VS-header) !important;}

/* Bullet Line List Active Before Pseudo-element Border Color */
.bullet-line-list li.active::before{border-color: var(--VS-context) !important;}

/* Background Utility */
.bg-success{background-color: var(--VS-context) !important;}
.badge-bg-primary{background-color: var(--VS-context);}

/* Media Query for Sidebar Icon Only Menu Title Background */
@media (min-width: 992px){ .sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link .menu-title{background-color: var(--VS-context) !important; color: var(--VS-white);} }

/* Search Input Group Text Background */
#search.input-group-text{background-color: var(--VS-white) !important;}

/* SweetAlert Danger Button Hover Background */
.swal-button--danger:not([disabled]):hover{background-color: var(--VS-context);}

/* JS Send Email Hover Color */
.js-sendemail:hover{color: var(--VS-modal-header);}

/* Dropdown Toggle Hover Color */
.dropdown-toggle:hover{color: var(--VS-context);}

/* Outline Primary Button Styles */
.btn-outline-primary{border-color: var(--VS-context); color: var(--VS-secondary-color);}
.btn-outline-primary:hover{background-color: var(--VS-context); border-color: var(--VS-context); color: var(--VS-secondary-color);}

/* Account Details Tab Color */
#accountDetailsTab{color: var(--VS-modal-header);}

/* Profile Update Popup Hover Color */
#profileUpdatePopup:hover {color: var(--VS-context) !important;}

/* New Table Version 2 Eye/Comments/Edit Icon Hover Color */
.newtable_v2 .fa-eye:hover, .newtable_v2 .fa-comments:hover, .newtable_v2 .fa-commenting:hover, .newtable_v2 .fa-edit:hover{color: var(--VS-context) !important;}

/* Webkit Autofill Transition */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color  9999s ease-in-out 0s; }

/* Accordion Button Not Collapsed After Pseudo-element Filter */
.accordion-button:not(.collapsed)::after{filter: brightness(0.5) !important;}

/* Text Info Color */
.text-info{color: var(--VS-context) !important;}

/* Border Info Color */
.border-info{border-color: var(--VS-context) !important;}

/* Info Button Styles */
.btn-info{background-color: var(--VS-context) !important; color: var(--VS-white) !important; border-color: var(--VS-context) !important;}
.btn-info:hover{background-color: var(--VS-button) !important; color:var(--VS-white) !important; border-color: var(--VS-button) !important; }

/* Accordion Button Not Collapsed Styles */
.accordion-button:not(.collapsed){color: var(--VS-secondary-color) !important; background-color: var(--VS-context-lighter) !important;}

/* Form Check Input Focus Border Color */
.form-check-input:focus{border-color: var(--VS-context) !important;}


/* Dropdown List Notification Preview Item Focus Styles */
#dropdownListNotification .preview-item:focus{background-color: var(--VS-header) !important; color: var(--VS-white);}
#dropdownListNotification .preview-item:focus:hover  .preview-item-content .preview-subject {color: var(--VS-white) !important;}
#dropdownListNotification .preview-item:focus:hover  .preview-item-content p.fw-light.small-text {color: var(--VS-button) !important;}

/* Sidebar Navigation Expanded Link Badge Info Styles */
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] .badge.badge-info{color: var(--VS-secondary-color) !important; border: 1px solid var(--VS-white) !important;}
.sidebar .menu-title,.sidebar .nav .nav-item.active > .nav-link i { color: var(--VS-secondary-color) !important;}

/* Sidebar Sub-Menu Navigation Link Badge Info Styles */
.sidebar .nav.sub-menu .nav-item .nav-link .badge.badge-info{color: var(--VS-secondary-color) !important; border: 1px solid var(--VS-white) !important; right: 37px;}

/* Preview Item Background Light Hover Styles */
.preview-item.bg-light:hover{background-color: var(--VS-context) !important; color: var(--VS-white) !important;}

/* Switch Company Button Random Icon Color */
.switchcompanybtn .fa-random{color: var(--VS-context) !important;}

/* Navigation Item Hover Switch Company Button Random Icon Color */
.nav-item:hover .switchcompanybtn .fa-random{color: var(--VS-white);}

/* Accordion Button Focus Box Shadow */
.accordion-button:focus{box-shadow: 0 0 0 0.25rem var(--VS-context-lighter) !important;}

/* Product Detail Check Checked Background */
.product-detail-check:checked{background-color: var(--VS-context) !important;}

/* SVG Fill Color */
svg {fill:var(--VS-white);}

/* Download PO SVG Fill Color */
.downloadPo svg{ fill: var(--VS-white) !important;}
.downloadPo:hover svg{fill: var(--VS-context);}

/* Navigation Profile Hover Switch Company Button Random Icon Color */
.nav-profile:hover .switchcompanybtn .fa-random{color: var(--VS-white) !important;}

/* Custom Control Input Checkbox Hover Styles */
.custom-control-input.custom-checkbox:hover, .dropdown-item.custom-control:hover{color: var(--VS-button) !important;}

/* Select2 Container Default Multiple Selection Choice Background */
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+1)
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+2),
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+3),
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+4),
.select2-container--default .select2-selection--multiple .select2-selection__choice:nth-child(5n+5) {
    background-color: var(--VS-context) !important;
    border-color: var(--VS-context);
}

/* Close Button Focus Box Shadow */
.btn-close:focus{box-shadow: none !important;}

/* Datepicker Days Table Active Day Before Pseudo-element Background */
.datepicker.datepicker-dropdown .datepicker-days table.table-condensed tbody td.day.active:before, .datepicker.datepicker-inline .datepicker-days table.table-condensed tbody td.day.active:before{background-color: var(--VS-context) !important;}

/* Verify JS Resend Email Styles */
.verify.js-resendemail{top: 36px; font-size: .875rem; padding-right: 5px; padding-left: 5px;}

/* Verify Admin Contact Change Styles */
.verify.adminContactChange{top: 36px;}

/* Background Table Color */
.bg-tableColor{background-color: var(--VS-primary-color); color: var(--VS-white);}

/* Button Check Checked Primary Focus Box Shadow */
.btn-check:checked + .btn-primary:focus, .wizard > .actions .btn-check:checked + a:focus, .btn-check:active + .btn-primary:focus, .wizard > .actions .btn-check:active + a:focus, .btn-primary:active:focus, .wizard > .actions a:active:focus, .btn-primary.active:focus, .wizard > .actions a.active:focus, .show > .btn-primary.dropdown-toggle:focus, .wizard > .actions .show > a.dropdown-toggle:focus{box-shadow: none !important;}

/* MDI Calendar Input Group Text Padding */
span.mdi.mdi-calendar.input-group-text{padding: 0.79rem 0.75rem !important;}

/* FBI Color Fill */
.FBI_color{fill: var(--VS-context) !important;}

/* Media Queries for Responsive Design */
@media screen and (max-device-width: 480px)
    and (orientation: portrait) {
        .navbar .navbar-brand-wrapper{padding: 0px !important;}
        #closeSupplierProfilePopubHide{position: relative;}
        .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini{align-content: center;}
        .responsive-languageBtn{font-size: 1rem !important;}
        .navbar .navbar-menu-wrapper .navbar-nav .nav-item:last-child{margin-right: .75rem !important;}
        .sidebar-offcanvas{position: absolute !important; top: 60px !important; max-height: calc(100vh + 100%);}
        .modal-open .modal{z-index: 9999 !important;}
        .userBrandLogo{align-content: center !important;}
        .navbar .navbar-brand-wrapper .brand-logo-mini img{width: calc(70px - 40px) !important;}
        .responsive_margin{margin-bottom: 20px !important;}
        .submit-btn{margin-top: 10px;}
        .responsive-toggle{display: none !important;}
        .responsive-radio{display: block !important;}
        #buyer_editable{margin-left: 22px !important;  margin-top: 10px !important;}
        .blink_me{margin-top: 25px; margin-bottom: 25px;}
        .text-truncate{overflow: hidden;text-overflow: unset; white-space: unset;}
        .responsive_column{width: 90% !important;}
        .responsive_delete{width: 10% !important; padding-top: 0px !important; padding-bottom: 24px !important;}
        #pickupAddressDateTimeModal{z-index: 9999;}
        .preview-list .preview-item .preview-item-content p{text-wrap: wrap !important;}
        span.mdi.mdi-calendar.input-group-text{padding: 0.79rem 0.75rem !important;}
        .responsive_margin{margin-left: 0px !important;}
        .margin_responsive { margin-bottom: 30px; }
        .responsive-margin { margin-top: 25px; }
        .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom{top: 1049.438px !important;}
        .sidebar-offcanvas.active{z-index: 999;}
}
@media screen and (max-device-width: 640px)
    and (orientation: landscape) {
        .navbar .navbar-brand-wrapper{padding: 0px !important;}
        #closeSupplierProfilePopubHide{position: relative;}
        .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini{align-content: center;}
        .responsive-languageBtn{font-size: 1rem !important;}
        .navbar .navbar-menu-wrapper .navbar-nav .nav-item:last-child{margin-right: .75rem !important;}
        .sidebar-offcanvas{position: absolute !important; top: 60px !important; max-height: calc(100vh + 100%);}
        .modal-open .modal{z-index: 9999 !important;}
        .userBrandLogo{align-content: center !important;}
        .navbar .navbar-brand-wrapper .brand-logo-mini img{width: calc(70px - 40px) !important;}
        .responsive_margin{margin-bottom: 20px !important;}
        .responsive-toggle{display: none !important;}
        .responsive-radio{display: block !important;}
        #buyer_editable{margin-left: 22px !important;  margin-top: 10px !important;}
        .blink_me{margin-top: 25px; margin-bottom: 25px;}
        .text-truncate{overflow: hidden;text-overflow: unset; white-space: unset;}
        .responsive_column{width: 90% !important;}
        .responsive_delete{width: 10% !important; padding-top: 0px !important; padding-bottom: 24px !important;}
        #pickupAddressDateTimeModal{z-index: 9999;}
        .preview-list .preview-item .preview-item-content p{text-wrap: wrap !important;}
        span.mdi.mdi-calendar.input-group-text{padding: 0.79rem 0.75rem !important;}
        .responsive_margin{margin-left: 0px !important;}
        .margin_responsive { margin-bottom: 30px; }
        .responsive-margin { margin-top: 25px; }
        .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top{top: 1049.438px !important;}
        .sidebar-offcanvas.active{z-index: 999;}
}
@media screen
    and (max-device-width: 640px) {
        .navbar .navbar-brand-wrapper{padding: 0px !important;}
        #closeSupplierProfilePopubHide{position: relative;}
        .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini{align-content: center;}
        .responsive-languageBtn{font-size: 1rem !important;}
        .navbar .navbar-menu-wrapper .navbar-nav .nav-item:last-child{margin-right: .75rem !important;}
        .sidebar-offcanvas{position: absolute !important; top: 60px !important; max-height: calc(100vh + 100%);}
        .modal-open .modal{z-index: 9999 !important;}
        .userBrandLogo{align-content: center !important;}
        .navbar .navbar-brand-wrapper .brand-logo-mini img{width: calc(70px - 40px) !important;}
        .responsive_margin{margin-bottom: 20px !important;}
        .responsive-toggle{display: none !important;}
        .responsive-radio{display: block !important;}
        #buyer_editable{margin-left: 22px !important;  margin-top: 10px !important;}
        .blink_me{margin-top: 25px; margin-bottom: 25px;}
        .text-truncate{overflow: hidden;text-overflow: unset; white-space: unset;}
        .responsive_column{width: 90% !important;}
        .responsive_delete{width: 10% !important; padding-top: 0px !important; padding-bottom: 24px !important;}
        #pickupAddressDateTimeModal{z-index: 9999;}
        .preview-list .preview-item .preview-item-content p{text-wrap: wrap !important;}
        span.mdi.mdi-calendar.input-group-text{padding: 0.79rem 0.75rem !important;}
        .responsive_margin{margin-left: 0px !important;}
        .margin_responsive { margin-bottom: 30px; }
        .responsive-margin { margin-top: 25px; }
        .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom{top: 1011.391px !important;}
        .sw > .nav{flex-direction: row !important;}
        .sidebar-offcanvas.active{z-index: 999;}
}
@media screen and (max-device-width: 320px)
    and (-webkit-min-device-pixel-ratio: 2) {
        .navbar .navbar-brand-wrapper{padding: 10px !important;}
        #closeSupplierProfilePopubHide{position: relative;}
        .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini{align-content: center;}
        /* .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown{top: 120px;} */
        .responsive-languageBtn{font-size: 1rem !important;}
        .navbar .navbar-menu-wrapper .navbar-nav .nav-item:last-child{margin-right: .75rem !important;}
        .sidebar-offcanvas{position: absolute !important; top: 60px !important; max-height: calc(100vh + 100%);}
        .modal-open .modal{z-index: 9999 !important;}
        .userBrandLogo{align-content: center !important;}
        .navbar .navbar-brand-wrapper .brand-logo-mini img{width: calc(70px - 40px) !important;}
        .responsive_margin{margin-bottom: 20px !important;}
        .responsive-toggle{display: none !important;}
        .responsive-radio{display: block !important;}
        #buyer_editable{margin-left: 22px !important;  margin-top: 10px !important;}
        .blink_me{margin-top: 25px; margin-bottom: 25px;}
        .text-truncate{overflow: hidden;text-overflow: unset; white-space: unset;}
        .responsive_column{width: 90% !important;}
        .responsive_delete{width: 10% !important; padding-top: 0px !important; padding-bottom: 24px !important;}
        #pickupAddressDateTimeModal{z-index: 9999;}
        .preview-list .preview-item .preview-item-content p{text-wrap: wrap !important;}
        span.mdi.mdi-calendar.input-group-text{padding: 0.79rem 0.75rem !important;}
        .responsive_margin{margin-left: 0px !important;}
        .margin_responsive { margin-bottom: 30px; }
        .responsive-margin { margin-top: 25px; }
        .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom{top: 1049.438px !important;}
        #companyUserTab{margin-left: 10px;}
        .sidebar-offcanvas.active{z-index: 999;}
}
@media (device-width: 568px)
    and (device-width: 320px)
    and (-webkit-min-device-pixel-ratio: 2) {
        .navbar .navbar-brand-wrapper{padding: 0px !important;}
        #closeSupplierProfilePopubHide{position: relative;}
        .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini{align-content: center;}
        /* .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown{top: 120px;} */
        .responsive-languageBtn{font-size: 1rem !important;}
        .navbar .navbar-menu-wrapper .navbar-nav .nav-item:last-child{margin-right: .75rem !important;}
        .sidebar-offcanvas{position: absolute !important; top: 60px !important; max-height: calc(100vh + 100%);}
        .modal-open .modal{z-index: 9999 !important;}
        .userBrandLogo{align-content: center !important;}
        .navbar .navbar-brand-wrapper .brand-logo-mini img{width: calc(70px - 40px) !important;}
        .responsive_margin{margin-bottom: 20px !important;}
        .responsive-toggle{display: none !important;}
        .responsive-radio{display: block !important;}
        #buyer_editable{margin-left: 22px !important;  margin-top: 10px !important;}
        .blink_me{margin-top: 25px; margin-bottom: 25px;}
        .text-truncate{overflow: hidden;text-overflow: unset; white-space: unset;}
        .responsive_column{width: 90% !important;}
        .responsive_delete{width: 10% !important; padding-top: 0px !important; padding-bottom: 24px !important;}
        #pickupAddressDateTimeModal{z-index: 9999;}
        .preview-list .preview-item .preview-item-content p{text-wrap: wrap !important;}
        span.mdi.mdi-calendar.input-group-text{padding: 0.79rem 0.75rem !important;}
        .responsive_margin{margin-left: 0px !important;}
        .margin_responsive { margin-bottom: 30px; }
        .responsive-margin { margin-top: 25px; }
        .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom{top: 1049.438px !important;}
        .sidebar-offcanvas.active{z-index: 999;}
    }
@media (max-device-width: 667px)
    /* and (min-device-width: 375px) */
    and (-webkit-min-device-pixel-ratio: 3) {
        .navbar .navbar-brand-wrapper{padding: 0px !important;}
        #closeSupplierProfilePopubHide{position: relative;}
        .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini{align-content: center;}
        /* .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown{top: 120px;} */
        .responsive-languageBtn{font-size: 1rem !important;}
        .navbar .navbar-menu-wrapper .navbar-nav .nav-item:last-child{margin-right: .75rem !important;}
        .sidebar-offcanvas{position: absolute !important; top: 60px !important; max-height: calc(100vh + 100%);}
        .modal-open .modal{z-index: 9999 !important;}
        .userBrandLogo{align-content: center !important;}
        .navbar .navbar-brand-wrapper .brand-logo-mini img{width: calc(70px - 40px) !important;}
        .responsive_margin{margin-bottom: 20px !important;}
        .responsive-toggle{display: none !important;}
        .responsive-radio{display: block !important;}
        #buyer_editable{margin-left: 22px !important;  margin-top: 10px !important;}
        .blink_me{margin-top: 25px; margin-bottom: 25px;}
        .text-truncate{overflow: hidden;text-overflow: unset; white-space: unset;}
        .responsive_column{width: 90% !important;}
        .responsive_delete{width: 10% !important; padding-top: 0px !important; padding-bottom: 24px !important;}
        #pickupAddressDateTimeModal{z-index: 9999;}
        .preview-list .preview-item .preview-item-content p{text-wrap: wrap !important;}
        span.mdi.mdi-calendar.input-group-text{padding: 0.79rem 0.75rem !important;}
        .responsive_margin{margin-left: 0px !important;}
        .sidebar-offcanvas.active{z-index: 999;}
        .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom{top: 1007.391px !important;}
        .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top{top: 653.391px !important;}
        .search_icon{top: 25px;padding: 6px 6px; font-size: 17px;}
}
@media (min-width:1366px) and (max-width:1399px)
{
    .sidebar-offcanvas{position: unset !important; top: 60px !important; max-height: calc(100vh + 100%);}
    .navbar .navbar-brand-wrapper{padding: 25px !important;}
    .bg_product, .bg_Suppliers, .bg_RFQs, .bg_Orders, .bg_Users, .bg_Quotes, .bg_Amount, .bg_Overdue, .bg_Va_account, .bg_Limit_application, .bg_virtual_balance, .bg_xen, .bg_re_amount, .bg_pe_amount, .bg_limit, .bg_unassigned, .bg_Limit_application, .bg_QuotesExpired, .bg_UpcomingQuotes, .bg_UnrespondedRFQs{background-repeat: no-repeat; background-position: 96% center;}
    .verify.js-resendemail{background-color: var(--VS-white); top: 35px;}
    .verify.adminContactChange{ top: 32px;}
    .publicReviewModalView{text-wrap: nowrap;}
    span.mdi.mdi-calendar.input-group-text{padding: 0.79rem 0.75rem !important;}
    .parsley-errors-list li{line-height: 1.5 !important;}
    .responsive_margin{margin-left: 0px !important;}
    .filter-multi-select > .dropdown-menu {min-width: 24.3rem !important;}
    .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom{top: 601.438px !important;}
    .datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-top{top: 242.219px !important;}
    .sidebar-offcanvas.active{z-index: 999;}
    html, body{font-size: 12px !important;}
    .actionMainTab .select-tabesBtn {margin-right: 300px !important;}
    .actionMainTab .select-tabesBtn2.other { margin-right: 300px !important;}
    .actionMainTab .select-tabesBtn .tagCategorybox.triple::after{ width: 350px !important; }
    .actionMainTab .select-tabesBtn2 .tagAddress.triple::after{width: 376px !important;}
    .select2-container--default .select2-selection--single { height: 32px !important; }
    .select2-container--default .select2-selection--single .select2-selection__arrow{top: 0px !important;}
    .nav-link.select-tabesBtn.active + .nav-link.select-tabesBtn3{ margin-left: 193px !important; }
    .actionMainTab .select-tabesBtn .tagCategorybox.multiple::after{width: 576px !important;}
}
@media (min-width:1400px) and (max-width:1440px){
    .categorysection_popup:hover .categoryhover.editQuoteAttribute{ display: inherit; position: absolute; top: 2rem; width: 400px; left: calc(50% - 200px ) !important; max-height: 115px; height: 200px; overflow-y: auto; overflow-x: hidden; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
    .categorysection_popup:hover .categoryhover.createQuoteAttribute{ display: inherit; position: absolute; top: 2rem !important; width: 400px !important; left: calc(50% - 200px ) !important; max-height: 95px; height: 200px; overflow-y: auto; overflow-x: hidden; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
    .form-label{font-size: 12px !important;}
    html, body{font-size: 12px !important;}
}

.btn-red{background-color: var(--VS-context); color: var(--VS-white);}
.btn-red:hover{background-color: var(--VS-modal-header); color: #fff;}

/* Form Label Styles */
.form-label{font-size: 12px; font-weight: 700;}

/* Card Header Background */
.card-header{background-color: #F2F2F2;}

/* Main Content Padding */
.main-content{ padding: 20px;}

/* Text Primary Color */
.text-primary{ color: var(--VS-context) !important;}

/* Danger Button Styles */
.btn-danger{ background-color: var(--VS-secondary-color); color: var(--VS-white); border-color: var(--VS-secondary-color);}

/* Heartbeat Animation */
.heartbeat { -webkit-animation: heartbeat 1.5s ease-in-out infinite both; animation: heartbeat 1.5s ease-in-out infinite both; }
@-webkit-keyframes heartbeat { from { -webkit-transform: scale(1);  transform: scale(1); -webkit-transform-origin: center center;  transform-origin: center center; -webkit-animation-timing-function: ease-out;  animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }
@keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } }

/* Progress Animation */
@keyframes progress { 0% { --percentage: 0; } 100% { --percentage: var(--value); } }
@property --percentage { syntax: '<number>'; inherits: true; initial-value: 0; }
@media only screen and (max-width: 990px){ .progress{ margin-bottom: 20px; } }
.progress { background-color: var(--VS-context-light); border-radius: 20px; position: relative; margin: 15px 0; height: 10px; width: 180px; font-size: 0.6rem; }
.progress-done { background: linear-gradient(to left, var(--VS-progress-done-gradient-start), var(--VS-progress-done-gradient-end)); box-shadow: 0 3px 3px -5px var(--VS-progress-done-shadow-start), 0 2px 5px var(--VS-progress-done-shadow-end); border-radius: 20px; color: var(--VS-white); display: flex; align-items: center; justify-content: center; height: 100%; width: 0; opacity: 0; transition: 1s ease 0.3s; }

/* Bar Overflow Styles */
.barOverflow{width: 50px; height: 25px; margin-bottom: -12px;margin-left:0px;}

/* Bar Styles */
.bar {width: 50px;height: 50px;border-radius: 50%;position: absolute;transform: rotate(45deg);transition: transform 3s ease;}

/* Professional Progress Main Page Span Styles */
.profprogress.mainPage span {font-size: 12px;z-index: 1; margin-left: -60% !important;}

/* Product Accordion Display */
.product_accordion{display: flex !important  ; align-items: center; }

/* Responsive Action Display */
.responsive_action{display: flex; justify-content: end; align-items: center;}

/* Responsive Card Display */
.responsive_Card{display: flex; align-items: center;}

/* Media Queries for Responsive Design */
@media (min-width:1366.98px) and (max-width:1366.98px){
    .profprogress.mainPage span{margin-left: -56% !important; }
    .categorysection_popup:hover .categoryhover.editQuoteAttribute{ display: inherit; position: absolute; top: 2rem !important; width: 400px !important; left: calc(50% - 200px ) !important; max-height: 115px; height: 200px; overflow-y: auto; overflow-x: hidden; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
    .categorysection_popup:hover .categoryhover.createQuoteAttribute{ display: inherit; position: absolute; top: 2rem !important; width: 400px !important; left: calc(50% - 200px ) !important; max-height: 95px; height: 200px; overflow-y: auto; overflow-x: hidden; background-color: var(--VS-category-popup-bg); padding: 3px;  box-shadow: 0px 5px 5px var(--VS-category-popup-shadow); border-radius: 5px; border: 1px solid var(--VS-category-popup-border); z-index: 1;}
    .form-label{font-size: 12px !important;}
    .actionMainTab .select-tabesBtn {margin-right: 300px !important;}
    .actionMainTab .select-tabesBtn2.other { margin-right: 300px !important;}
    .actionMainTab .select-tabesBtn .tagCategorybox.triple::after{ width: 350px !important; }
    .actionMainTab .select-tabesBtn2 .tagAddress.triple::after{width: 376px !important;}
    .select2-container--default .select2-selection--single { height: 32px !important; }
    .select2-container--default .select2-selection--single .select2-selection__arrow{top: 0px !important;}
    .nav-link.select-tabesBtn.active + .nav-link.select-tabesBtn3{ margin-left: 193px !important; }
    .actionMainTab .select-tabesBtn .tagCategorybox.multiple::after{width: 576px !important;}
}
@media (min-width:430px) and (max-width:430px){
    .profprogress.mainPage span{margin-left: -55%  !important;}
    .responsive_name{display: none;}
    .fa.fa-filter, .fa.fa-columns{margin-right: 0px !important;}
    .responsiveBody{margin: 0px 30px;}
}
@media (min-width:600px) and (max-width:600px){.profprogress.mainPage span{margin-left: -55% !important; }.responsive_name{display: none;}  .fa.fa-filter, .fa.fa-columns{margin-right: 0px !important;}}
@media (min-width:320px) and (max-width:390px){
.profprogress.mainPage span{margin-left: -54.7% !important;}
.responsive_Card{display: inline-block ; align-items: center;}
.responsive_name{display: none;}
.fa.fa-filter, .fa.fa-columns{margin-right: 0px !important;}
}

/* Kanban Initials Styles */
.initials{ border: 1px solid var(--VS-context); padding: 5px; border-radius: 55% !important; font-size: 0.775rem; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center;}

/* Kanban Edit Hover Show Icon Edit Color */
.kanbanEdit:hover .show-icon .fa-edit{color:var(--VS-white) !important;}

/* Form Select Focus Styles */
.form-select:focus{border-color: var(--VS-context) !important; box-shadow: none;}

/* Page Link Focus Styles */
.page-link:focus, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button a:focus, .jsgrid .jsgrid-pager .jsgrid-pager-page a:focus{box-shadow: none; color: var(--VS-context) !important;border: 1px solid var(--VS-context);}

/* Print Icon Inner Styles */
.printicon.innerPrint{ background-color: var(--VS-print-icon-inner-bg) !important; }
.modal.version2 .printicon.innerPrint{width: 34px !important; height: 34px !important;}

/* Global Loader Styles */
.global_loader { width: 50px; aspect-ratio: 1; display: grid; }
.global_loader::before { content:""; grid-area: 1/1; --c:no-repeat radial-gradient(farthest-side,#000 100%,#0000); background:   var(--c) 50%  0,   var(--c) 50%  100%,   var(--c) 100% 50%,   var(--c) 0    50%; background-size: 12px 12px; animation: globalLoader 1s infinite; }
.global_loader::after{ content:""; grid-area: 1/1; --c:no-repeat radial-gradient(farthest-side,var(--VS-global-loader-color) 100%,#0000); background:     var(--c) 50%  0,     var(--c) 50%  100%,     var(--c) 100% 50%,     var(--c) 0    50%; background-size: 12px 12px; animation: globalLoader 1s infinite; }
.global_loader::before { margin: 4px; filter: hue-rotate(45deg); background-size: 8px 8px; animation-timing-function: linear }
@keyframes globalLoader { 100%{transform: rotate(.5turn)} }

/* Cursor Default Utility */
.cursor-default { cursor: default; }

/* Sidebar Navigation Expanded Link Dots Background */
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] .dots{background:var(--VS-white) !important;}

/* Sidebar Navigation Hover Link Dots Background */
.sidebar .nav .nav-item .nav-link:hover .dots, .sidebar .nav .nav-item.active .nav-link .dots{background:var(--VS-white) !important;}

/* New Design Chat Navigation Item Styles */
.nav-item.addedNewDesignChat,.nav-item.addedNewDesignChat i:first-child,.nav-item.addedNewDesignChat:hover i,.nav-item.addedNewDesignChat span,.nav-item.addedNewDesignChat .nav-link[aria-expanded="true"] i.menu-arrow:before{ background-color: var(--VS-secondary-color) !important; color: var(--VS-white) !important;  }
.nav-item.addedNewDesignChat{ border-radius: 1.313rem 1.313rem 1.313rem 1.313rem !important; }
.nav-item.addedNewDesignChat.active{ box-shadow:0 0.125rem 0.25rem var(--VS-chat-new-design-shadow); color: var(--VS-white) !important; }
.nav-item.addedNewDesignChat .nav-link{ color: var(--VS-white) !important; background-color: var(--VS-secondary-color) !important;  border-radius: 1.313rem 1.313rem 1.313rem 1.313rem !important; box-shadow:0 0.125rem 0.25rem var(--VS-chat-new-design-shadow) ;}

/* New Design Sub Menu Styles */
.newdesignSubMenu{background-color: var(--VS-secondary-color) !important; margin-top: 5px !important; border-radius: 1.313rem 1.313rem 1.313rem 1.313rem !important;}
.newdesignSubMenu .nav-link:hover, .newdesignSubMenu .nav-link.active{ font-weight: 900; }

/* Table Responsive Wrapper Row Background */
div.table-responsive > div.dataTables_wrapper > div.row{background-color: var(--VS-tab-content-bg);}

/* Branch Table Category Section Popup Hover Styles */
.branchTable tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 3) .categorysection_popup:hover .categoryhover{  top: inherit; bottom: 0px;}
.branchTable tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 2) .categorysection_popup:hover .categoryhover{  top: inherit; bottom: 0px;}
.branchTable tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-last-child(-n + 1) .categorysection_popup:hover .categoryhover{  top: inherit; bottom: 0px;}
.branchTable tr:nth-child(1) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(1) .categorysection_popup:hover .categoryhover{  top: 0rem !important; bottom: inherit !important;}
.branchTable tr:nth-child(2) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(2) .categorysection_popup:hover .categoryhover{  top: 0rem !important; bottom: inherit !important;}
.branchTable tr:nth-child(3) .categorysection_popup:hover .categoryhover, .tablecatagory_pop tr:nth-child(3) .categorysection_popup:hover .categoryhover{  top: 0rem !important; bottom: inherit !important;}

/* Product Modal Large Product Supplier Model Styles */
#productModal .modal-lg.productSupplierModel{ width: 100% !important; max-width: 100% !important; margin: 0px !important; }

/* Uploaded Document/Files List Button/Attachment Files Font Size */
.uploaded_document,.uploaded_files_list_btn,.attachment_files{ font-size:13.5px !important; }

/* Uploaded Document/New Attached Files Icon Font Size */
.uploaded_document i,.new-attached-files i{ font-size: 14px !important; }

/* Uploaded Files List Button Position */
.uploaded_files_list_btn{ position: relative; }

/* Uploaded Files List Styles */
.uploaded_files_list { position: absolute !important; background: var(--VS-uploaded-document-bg); border: 1px solid var(--VS-uploaded-document-border); border-radius: 8px; box-shadow: 0 10px 2rem rgba(0, 0, 0, .2); z-index: 5; top: 20px; left: calc(100% - 140px); font-size: 12px !important; font-weight: normal; width: 280px; overflow: auto; max-height: 180px; }
.uploaded_files_list_btn .uploaded_files_list{ visibility: hidden; opacity: 0; transition: visibility 0s linear .8s, opacity .8s; }
.uploaded_files_list_btn:hover .uploaded_files_list{ visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity .8s; }

/* Action Main Tab Styles */
.actionMainTab { justify-content: center; border: none; }
.actionMainTab .select-tabesBtn {margin-right: 450px;border: none;background: none;}
.actionMainTab .select-tabesBtn2.other { margin-right: 450px; border: none; background: none; }
.actionMainTab .select-tabesBtn2.single { border: none; background: none; }
.actionMainTab .select-tabesBtn3 { margin-right: 0px; border: none; background: none; }
.actionMainTab .select-tabesBtn .tagCategorybox,
.actionMainTab .select-tabesBtn2 .tagAddress,
.actionMainTab .select-tabesBtn3 .tagCompanyPrimaryDetails { border-radius: 100%; height: 70px; width: 70px; border: 2px solid var(--VS-context-dark); background-color: var(--VS-context-light); position: relative; align-content: center; margin-bottom: 15px; }
.actionMainTab .select-tabesBtn.active .tagCategorybox,
.actionMainTab .select-tabesBtn2.active .tagAddress,
.actionMainTab .select-tabesBtn3.active .tagCompanyPrimaryDetails { background: var(--VS-context); }
.actionMainTab .select-tabesBtn.active .tagCategorybox h1,
.actionMainTab .select-tabesBtn2.active .tagAddress h1,
.actionMainTab .select-tabesBtn3.active .tagCompanyPrimaryDetails h1 {color: var(--VS-action-main-tab-active-color);}
.actionMainTab .select-tabesBtn.active .tagCategorybox::before,
.actionMainTab .select-tabesBtn2.active .tagAddress::before,
.actionMainTab .select-tabesBtn3.active .tagCompanyPrimaryDetails::before { content: ''; height: 85px; width: 85px; position: absolute; border-radius: 50%; top: -9px; left: -9px; border: 2px solid var(--VS-context-dark); background: var(--VS-white), bottom; }
 /* Apply styles only if the user has permission */
.actionMainTab .select-tabesBtn .tagCategorybox.multiple::after { content: ''; position: absolute; top: 35px; left: 68px; border: 2px solid var(--VS-action-main-tab-after-border); width: 576px; }
/* Apply styles only if the user has permission */
.actionMainTab .select-tabesBtn .tagCategorybox.triple::after { content: ''; position: absolute; top: 35px; left: 68px; border: 2px solid var(--VS-action-main-tab-after-border); width: 521px; }
.actionMainTab .select-tabesBtn2 .tagAddress.triple::after { content: ''; position: absolute; top: 35px; left: 68px; border: 2px solid var(--VS-action-main-tab-after-border); width: 550px; }
.actionMainTab .select-tabesBtn2 .tagAddress.single::after { display: none; }
.actionMainTab .select-tabesBtn.active .tagCategorybox::after,
.actionMainTab .select-tabesBtn2.active .tagAddress::after { content: ''; border: 2px solid var(--VS-context-dark); }

/* Sub Items Font Size */
.subItems { font-size: 14px; }

/* Tab Content Border */
.tab-content { border: 0px; }

/* Skip Button Styles */
.skipButton { text-decoration: none; color: var(--VS-skip-button-color); font-size: 18px; align-content: center; }
.skipButton:hover { border-bottom: 1px solid var(--VS-skip-button-color); }

/* Tree Structure List Styles */
ol { margin-left: 30px; counter-reset: item; list-style-type: none !important; }
.wtree li { list-style-type: none !important; margin: 10px 0 10px 10px; position: relative; }
.wtree li.follow:before { content: ""; counter-increment: item; position: absolute; top: -17px; left: -33px; border-left: 2px dashed var(--VS-tree-border); border-bottom: 2px dashed var(--VS-tree-border); width: 30px; height: 35px; }
.wtree li:last-child:after { display: none; }
.wtree li span { display: block; border: 1px solid var(--VS-tree-border); padding: 10px; color: var(--VS-tree-text-color); text-decoration: none; }
.wtree li span:hover, .wtree li span:focus { color: var(--VS-nav-link-active-color); border: 1px solid var(--VS-tree-hover-border); } .wtree li span:hover + ol li span, .wtree li span:focus + ol li span { color: var(--VS-nav-link-active-color); border: 1px solid var(--VS-tree-hover-border); }
.wtree li span:hover + ol li:after, .wtree li span:hover + ol li:before, .wtree li span:focus + ol li:after, .wtree li span:focus + ol li:before { border-color: var(--VS-tree-hover-border); }

/* More Icon Styles */
.bouncy-transition, .more, .hamburger5, .hamburger4, .hamburger2, .hamburger1 { transition: 0.2s ease-out all 0.2s; }
.bouncy-transition:before, .more:before, .hamburger5:before, .hamburger4:before, .hamburger2:before, .hamburger1:before, .bouncy-transition:after, .more:after, .hamburger5:after, .hamburger4:after, .hamburger2:after, .hamburger1:after { transition: all 0.6s cubic-bezier(0.46, -0.41, 0.3, 1.52) 0.1s; }
.open-state .bouncy-transition, .open-state.more, .open-state .hamburger5, .open-state .hamburger4, .open-state .hamburger2, .open-state .hamburger1 { transition: all 0.6s cubic-bezier(0.46, -0.41, 0.3, 1.52) 0.1s; }
.open-state .bouncy-transition:before, .open-state.more:before, .open-state .hamburger5:before, .open-state .hamburger4:before, .open-state .hamburger2:before, .open-state .hamburger1:before, .open-state .bouncy-transition:after, .open-state.more:after, .open-state .hamburger5:after, .open-state .hamburger4:after, .open-state .hamburger2:after, .open-state .hamburger1:after { transition: all 0.6s cubic-bezier(0.46, -0.41, 0.3, 1.52) 0.1s; }
.more { display: block; position: relative; }
.more:before, .more:after { content: ""; position: absolute; top: 0px; left: 0px; width: 14px; transform: translate(-50%, -50%); border-bottom: 4px solid var(--VS-context-dark); }
.more:before { transform: translate(-50%, -50%) rotate(90deg); }
.more4:before, .more4:after { transition: 0.2s width 0.2s, 0.2s transform; }
.open-state.more4:before, .open-state.more4:after { width: 14px; transition: 0.2s width, 0.2s transform 0.2s; }
.open-state.more4:before { transform: translate(-50%, -50%) rotate(-180deg); }
.open-state.more4:after { transform: translate(-50%, -50%) rotate(180deg); }

/* Mobile Verification Styles */
.mobileVerification{ position: relative; }
.mobileVerification .verificaonIcon{position: absolute; bottom: 8px; right: 25px;}

/* Navigation Link Select Tabs Button Active Plus Navigation Link Select Tabs Button 3 Margin Left */
.nav-link.select-tabesBtn.active + .nav-link.select-tabesBtn3{ margin-left: 8px; }

/* Media Queries for Action Main Tab Styles */
@media (min-width: 1024px) and (max-width: 1266px) {
    .actionMainTab .select-tabesBtn, .actionMainTab .select-tabesBtn2.other{margin-right: 190px !important;}
    .actionMainTab .select-tabesBtn .tagCategorybox.triple::after{width: 252px !important;}
    .actionMainTab .select-tabesBtn2 .tagAddress.triple::after{width: 278px !important;}
}
@media (min-width: 1366px) and (max-width: 1440px){
    .actionMainTab .select-tabesBtn, .actionMainTab .select-tabesBtn2.other{margin-right: 300px!important;}
    .actionMainTab .select-tabesBtn .tagCategorybox.triple::after{width: 350px!important;}
    .actionMainTab .select-tabesBtn2 .tagAddress.triple::after{width: 370px !important;}
}
@media (min-width: 768px) and (max-width: 768px){
    .actionMainTab .select-tabesBtn, .actionMainTab .select-tabesBtn2.other{margin-right: 100px!important;}
    .actionMainTab .select-tabesBtn .tagCategorybox.triple::after{width: 170px!important;}
    .actionMainTab .select-tabesBtn2 .tagAddress.triple::after{width: 187px !important;}
}

/* Text Container Pseudo-elements Background */
.text-container:after, .text-container:before {
    content: " ";
    display: block;
    position: absolute;
    bottom: -.5em;
    width: fit-content;
    height: 100%;
    background-color: var(--VS-context);
    pointer-events: none;
    z-index: -1;
}
.text-container:after {
    right: -.57em;
}
.text-container:before {
    bottom: auto;
    top: -.5em;
    left: -.57em;
}

/* Text Styles */
.text {
    position: absolute;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    color: var(--VS-white);
    background-color: var(--VS-context);
}
.text.show {
    opacity: 1;
    transform: scale(1.1);
}
.text:after, .text:before {
    content: " ";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    bottom: -.5em;
    left: -.05em;
    pointer-events: none;
    -webkit-mask: none;
}
.text:before {
    bottom: auto;
    top: -.5em;
    border-bottom: 0.5em solid var(--VS-context);
    border-left: .5em solid transparent;
}
.text:after {
    left: auto;
    right: -.05em;
    border-top: 0.5em solid var(--VS-context);
    border-right: .5em solid transparent;
}

/* Bank Name/Account Name/Account No/Signature/Invoice Quantity Focus/Hover Styles */
#BankName:focus, #BankAcNameAndCode:focus, #BankAccountNo:focus, #Signature:focus, .invoiceQuantity:hover{
    border: 1px solid var(--VS-secondary-color);
    font-size: 12px;
}

/* Invoice Quantity Border */
.invoiceQuantity{border: 1px solid var(--VS-invoice-quantity-border) !important;}

/* Active Filter Background */
.activeFilter {
    background-color:var(--VS-context-light) !important;
}

/* Search Input Webkit Search Cancel Button Styles */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 15px;
    width: 15px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="red" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>') no-repeat center;
    background-size: contain;
    cursor: pointer;
}

/* Livewire Loader Styles */
.livewire-loader{
    position: fixed;
    z-index: 999;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--VS-livewire-loader-bg);
    top: 0px;
    left: 0px;
}

/* Category Section Popup Category Hover Ordered List Styles */
.categorysection_popup .categoryhover ol {
    list-style-type: auto !important;
    margin-left: 0px !important;
}

/* Button Hover Dark Styles */
.btn:hover.btn-dark {
    background-color: var(--VS-context) !important;
    color: var(--VS-white) !important;
    border-color: var(--VS-context) !important;
}

/* Count Font Sizes */
#amountCount, #unAssignedCount, #rfqCount, #productCount, #buyerCount, #supplierCount, #quoteCount, #orderCount, #branchAmountCount, #branchUnAssignedCount, #branchOrderCount, #branchRfqCount, #branchQuoteCount, #branchRfqToQuoteCount, #branchQuoteToOrderCount, #branchRfqToOrderCount, #unRespondedCount, #userRfqToQuoteCount, #userQuoteToOrderCount,#userRfqToOrderCount, #expiredQuoteCount, #upcomingExpireQuoteCount, #unBranchRespondedCount, #branchExpiredQuoteCount, #branchUpcomingExpireQuoteCount, #productVariantsCount, #businessUnitCounts, #categoryCount {
    font-size: 1.2rem !important;
  }

/* Media Query for Background Size and Count Font Sizes */
@media (min-width:1024px) and (max-width:1024px) {
    .bg_product, .bg_Suppliers, .bg_RFQs, .bg_Orders, .bg_Users, .bg_Quotes, .bg_Amount, .bg_Overdue, .bg_Va_account, .bg_Limit_application, .bg_virtual_balance, .bg_xen, .bg_re_amount, .bg_pe_amount, .bg_limit, .bg_unassigned, .bg_Limit_application, .bg_QuotesExpired, .bg_UpcomingQuotes, .bg_UnrespondedRFQs, .bg_productVaraint, .bg_buisness_units, .bg_categories {
        background-size: 60px !important;
      }
      #amountCount, #unAssignedCount, #rfqCount, #productCount, #buyerCount, #supplierCount, #quoteCount, #orderCount, #branchAmountCount, #branchUnAssignedCount, #branchOrderCount, #branchRfqCount, #branchQuoteCount, #branchRfqToQuoteCount, #branchQuoteToOrderCount, #branchRfqToOrderCount, #unRespondedCount, #userRfqToQuoteCount, #userQuoteToOrderCount,#userRfqToOrderCount, #expiredQuoteCount, #upcomingExpireQuoteCount, #unBranchRespondedCount, #branchExpiredQuoteCount, #branchUpcomingExpireQuoteCount, #productVariantsCount, #businessUnitCounts, #categoryCount {
        font-size: 18px !important;
      }
}

/* Valid Till Date Range Cursor */
.validTilldateRange  {
    cursor: pointer;
}

/* Date Range Custom Cursor */
.daterangecustom {
    cursor: pointer;
}

/* Pickup Address Modal Overflow */
#pickupAddressModal{
    overflow-y: scroll;
}

/* Customer Tab Border Styles */
.customerTabBorder{
    background-color: var(--VS-customer-tab-border-bg) !important;
    color: var(--VS-context) !important;
    border-bottom: 2px solid var(--VS-context) !important;
    border-radius: 0px !important;
}

/* Linear Header Styles */
.linear-header{
    text-align: center;
    background: linear-gradient(to right, var(--VS-linear-header-gradient-start-1) 20%, var(--VS-linear-header-gradient-start-2) 40%, var(--VS-linear-header-gradient-start-3) 60%, var(--VS-linear-header-gradient-end) 100%);
    background-size: 200% auto;
    color: var(--VS-secondary-color);
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: shine 2s linear infinite;
            animation: shine 2s linear infinite;
  }
  @-webkit-keyframes shine {
    to {
      background-position: 200% center;
    }
  }
  @keyframes shine {
    to {
      background-position: 200% center;
    }
  }

  .additionalContent{
    display: none;
  }

  .custonButton:hover .additionalContent{
    display: block;
  }

  .custonButton{
    position: relative;
  }

  .additionalContent{
    position: absolute;
    width: 500px;
  }
  .disabled-section {
    background-color: #EEF2F5 !important;
    pointer-events: none;
    opacity: 0.6;
    }

/* Progress Background Color */
.progress.progress_background{
    background-color: var(--VS-header);
}

#annual_sales_currency,#net_income_currency,#financial_target_currency { border-radius: 0px;width:65px;color:#0a0b18 !important;text-align:center;background-image:none !important;}
select[name="salutation"]{border-radius: 0px;  background-color: #ebebeb; font-size: 0.875rem;}

.bg-light{
    background-color: var(--VS-context-lighter) !important;
}

/* jquery ui css overwrite */
.ui-widget-content {
    color: var(--VS-secondary-color) !important;
}
.ui-menu-item-wrapper:hover,.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border-color: var(--VS-context) !important;
    background:var(--VS-context) !important;
}

/* Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--VS-context) !important;
  color: var(--VS-white) !important;
}

/* tagInput */
div.tagsinput span.tag{
   border: 1px solid var(--VS-context) !important;
   color: var(--VS-context) !important;
}
div.tagsinput span.tag a{
   color: var(--VS-context) !important;
}

.sidebar .nav .nav-item .nav-link .fa{ display: inline-block; text-align: right; margin-right: 10px; width: 15px;}

.btnAttributeValueClone:hover {
    background-color: var(--VS-context) !important;
    border-color: var(--VS-context) !important;
    color: #fff !important;
    transition: all 0.2s ease-in-out;
}