@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,500;1,700&display=swap');

        
    body {
        --primary: #00A88E;
        --secondary-theme: #000;
        --secondary: #333;
        --error: #e20b0b;
        --ok: #18A558;
        --warning: #FAD02C;
        --main-bg-color: #eee;
        --secondary-color: #818cab;
        --font-color: #333333;
        --font-color-theme: #ffffff;
        --bg-color: #fff;
        --card-theme-color: #ffffff;
        --color-light-white: #f5f5f5;
        --nav-icon: rgb(61 72 88 / 40%);
        --border-nav-color: #94A3B833;
        --white-color: #ffffff;
    }

    body.black-theme {
        --secondary-theme: #f2f2f2;
        --secondary: #333;
        --main-bg-color: #0F172A;
        --secondary-color: #818cab;
        --font-color: #ffffff;
        --color-light-white: #1E293B;
        --card-theme-color: #1E293B;
        --bg-color:#0F172A;
        --nav-icon: #95A3B8;
        --border-nav-color: #2A3243;
    }

    .form-control:read-only {
        background-image: none;
        border-radius: 6px;
    }
    .navbar .navbar-wrapper .menu-toggle,
    .dataTable>tbody>tr>td.dataTables_empty ,
    .navbar.navbar-transparent   {
        background-color: var(--bg-color) !important;
    }

    .navbar .navbar-wrapper .menu-toggle,  
    .dataTable>tbody>tr>td.dataTables_empty,
    .navbar .navbar-brand,  .form-check,  label,
    ul.nav.nav-pills.alarm-home-tabs li a {
        color: var(--font-color);
    }
    body {
        background-color: var( --main-bg-color);
        color: var(--font-color);
    } 
    body .card , .modal-content{
        background-color: var(--card-theme-color);
        color: var(--font-color);
    }
    .table th, .table td, button, body, p ,a , li ,ul, h2 ,h1 {
        font-family: 'Roboto', sans-serif !important;
    }
    .sidebar .nav li a, .sidebar .nav li .dropdown-menu a {
        color: #94A3B8;
    }
    .tim-typo {
    padding-left: 25%;
    margin-bottom: 40px;
    position: relative;
    width: 100%;
    }

    .tim-typo .tim-note {
    bottom: 5px;
    color: #c0c1c2;
    display: block;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    left: 0;
    margin-left: 20px;
    position: absolute;
    width: 260px;
    }

    /* offline-doc */

    .offline-doc .navbar.navbar-transparent {
    padding-top: 25px;
    border-bottom: none;
    }

    .offline-doc .navbar.navbar-transparent .navbar-minimize {
    display: none;
    }

    .offline-doc .navbar.navbar-transparent .navbar-brand,
    .offline-doc .navbar.navbar-transparent .collapse .navbar-nav .nav-link {
    color: var(--font-color-theme) !important;
    }

    .offline-doc .footer {
    z-index: 3 !important;
    }

    .offline-doc .page-header .container {
    z-index: 3;
    }

    .offline-doc .page-header:after {
    background-color: rgba(0, 0, 0, 0.5);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
    }

    #map {
    z-index: 2;
    height: calc(100vh - 70px);
    margin-top: 70px;
    }

    .off-canvas-sidebar .wrapper-full-page~.fixed-plugin .dropdown .dropdown-menu
    {
    -webkit-transform:none;
    transform: none;
    }

    .fixed-plugin .button-container .github-button
    {
    display:inline
    }
    .form-control:invalid {
        background-image: none !important;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
        font-family: "Roboto", "Helvetica", "Arial", sans-serif;
        font-weight: 500;
    }
    /*************************** LOGIN PAGE START *************************/

    /* Common style
    ================================== */
    .pd-0 {
        padding: 0;
    }

    header {
        position: absolute;
        left: 0;
        right: 0;
        padding: 20px 30px 0;
    }
    .d-flex{
        display: flex;
    }
    .align-center{
        align-items: center;
    }

    .justify-content-between{
        justify-content: space-between;
    }

    .custom-col{
        display: flex;
        align-items: center;
        height: 100vh;
    }
    .custom-form {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
    .custom-form h1 {
        text-align: center;
        color: var(--primary);
        font-weight: bold;
        text-transform: capitalize;
        margin: 0 0 50px;
    }

    .login-image{
        height: 100%;
    }
    .alarm-login{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .alarm-login-inner-card{
        text-align: center;
    }
    .alarm-login-inner-card img{
        width: 200px;
        height: auto;
        margin-bottom: 40px;
    }
    .alarm-login-inner-card{
        max-width: 600px;
    }
    .alarm-login-inner-card .card{
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border-radius:10px;
    }
    .alarm-login-inner-card .card h1{
        color: var(--secondary-theme);
        margin-bottom: 30px;
        font-size: 34px;
    }
    .alarm-login-inner-card form .form-group input.form-control {
        border: 1px solid #94A3B8 !important;
        padding: 10px 15px !important;
        border-radius: 6px;
        background-image: none !important;

    }
    .inner-part {
        background-image: url(/material/img/background.png);
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        background-color: #f3f4f6;
        background-position: center;
    }
    .custom-form form .form-control {
        border: 0;
        box-shadow: none !important;
        border-bottom: 1px solid #d3d3d3 !important;
        border-radius: 0;
        padding: 0 0 !important;
        background: transparent;
    }
    .custom-form form .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: #999999;
        font-weight: 500;
    }
    .custom-form form .form-control::-moz-placeholder { /* Firefox 19+ */
        color: #999999;
    }
    .custom-form form .form-control:-ms-input-placeholder { /* IE 10+ */
        color: #999999;
    }
    .custom-form form .form-control:-moz-placeholder { /* Firefox 18- */
        color: #999999;
    }
    .custom-form form button.btn {
        width: 100%;
        background-color: var(--primary);
        color: var(--font-color-theme);
        border: 0 none;
        font-size: 18px;
        border-radius: 0 !important;
        padding: 12px;
    }
    .custom-form form button:hover{
        background-color: var(--primary);
        color: var(--font-color-theme);
    } 
    .custom-col .inner-part img{
        height: 100vh;
    }
    .custom-col .inner-part p.caption {
        position: absolute;
        bottom: 100px;
        color: var(--font-color-theme);
        font-size: 36px;
        text-align: center;
        left: 0;
        right: 0;
    }
    p.forgot a{
        text-align: right;
        margin: 0 0 40px;
        text-decoration: underline;
        color: var(--font-color);
        display: block;
    }
    .terms a{
        color: var(--primary);
        text-decoration: underline;
    }
    p.terms {
        text-align: center;
        padding-top: 60px;
    }
    .remeber-forgot {
        margin-bottom: 20px;
    }
    .dataTables_wrapper .bs-select label, .dataTables_length label {
        display: flex;
        align-items: center;
        max-width: 120px;
        text-transform: capitalize;
    }
    .dataTables_wrapper .bs-select label select, .dataTables_length label select{
        padding-left: 6px;
    }
    .dataTables_wrapper .dataTables_filter {
        text-align: right;
    }
    .dataTables_wrapper .dataTables_filter label{
    text-align: left;
    }
    .dataTables_wrapper .dataTables_filter label span {
        margin-left: 14px;
    }
    .dataTables_length {
        padding: 12px 0;
    }
    .dataTables_wrapper .col-sm-12 {
        padding: 0px 20px;
    }

    .dataTables_wrapper .bs-select label:after , .dataTables_length label::after{
        position: absolute;
        color: var(--font-color);
        font-weight: 600;
        font-size: 10px;
        content: '\25BC';
        right: 0;
        left: 85px;
        z-index: 9;
        width: 10px;
    }

    .dataTables_length label.custom-fl:after{
        display: none;
    }
    .avg_weekly_filter, .is-focused .avg_weekly_filter{
        background: white !important;
        text-align: center;
        height: 25px;
    }
    .reorder-upper-form{
        position: absolute;
        top: 0;
        left: 30%;
    }
    .reorder-upper-form label.custom-fl{
        font-size: 12px;
        margin-bottom: 4px;
    }
    .update-reordert-submit{
        top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: 999999999;
    }
    .form-group input.custom-fc{
        height: 30px !important;
        padding: 0;
        padding-left: 5px !important;
        padding-right: 0px !important;
    }
    .apply-search-reorder{
        margin: 0;
        padding: 16px 30px;
    }
    .reorder-category-form{
        padding-top: 10px;
        padding-left: 10px;
        top:60px !important;
        z-index: 99 !important;
        margin: 0;
    }
    .dataTable>tbody>tr.group td, table#purchase_order_table th, table#purchase_order_table td {
        padding: 14px !important;
    }
    table#purchase_order_table td > span.plusClick {

        margin-right: 7px !important;
        top: 5px;
        left: 5px;
    }
    .dataTables_sizing {
        height: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .dataTables_scrollBody {
        max-height: calc(100vh - 50px);
    }

    .pagination {
        
        margin: 6px 0 0;
    }

    .card.pomamager-section.card .card-body {
        padding: 10px !important;
        position: relative;
    }

    .card.pomamager-section .dataTables_scrollBody {
        max-height: calc(100vh - 210px);
    }

    tr.group.even {
        background: var(--font-color-theme);
        border-radius: 0px 4px 4px 0px;
        cursor: pointer;
    }

    .dataTables_scroll .dataTable>thead>tr>th {
        padding: 10px 5px !important;
        background: var(--color-light-white);
    }

    .cus-table thead.text-primary tr th {
        position: sticky !important;
        top: 1px;
        background-color: #f5f5f5 !important;
        z-index: 99 !important;
        min-width: 220px;
        white-space: normal !important;
        border-left: 1px solid #999999;
        border-right: 1px solid #999999;
    }
    .cus-table thead.text-primary tr th:first-child {

        z-index: 999 !important;
    }
    table.cus-table tr th:first-child, table.cus-table tr td:first-child {
        min-width: 160px;
        max-width: 12px;
        white-space: normal !important;
        position: sticky !important;
        left: 0;
        background: #f6f8fa;
        z-index: 9;
    }
    table#service-payments-table tr th:first-child{
        max-width: 400px;
    }
    table#purchase_order_table thead.text-primary th:first-child {
        z-index: 999 !important;
    }
    .alert.alert-danger {
        font-weight: 600;
    }
    .category-custom .less-space.col-sm-3 .form-group {
        margin: 0;
    }
    .delete-projection-customer{
        cursor:pointer;
    }
    .delete-projection-customer:hover{
        background: #444 !important;
        color: #f6f8fa;
    }
    .dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    .bootstrap-select .dropdown-menu.show{
        z-index: 9999;
    }
    .hidesplit, .hidesplit_multiple{
        display: none !important;
    }
    tr td div.dropdown.action-drop {
        margin-left: 10px;
        display:inline-block;
        margin-right: 10px;
    }
    .btn.showaddbtn, .btn.reminder-freefield{
        padding: 4px 16px !important;
        margin: 0px;font-size: 12px;
    }
    table#purchase_order_table td.last-section{
        padding: 4px !important;
    }
    .showaddbtn{
        display: inline-block !important;
    }
    body .main-panel>.content.profile-page {
        margin-top: 30px;
        padding: 0px !important;
        min-height: 100%;
        max-width: 800px;
        margin: 10vh auto 0;
    }

    /* Purchase Order table Border */
    .dataTable>tbody>tr.group td, table#purchase_order_table th, table#purchase_order_table td {
        border: 1px solid #999999;
    }

    table#purchase_order_table thead.text-primary th {
        font-size: 14px;
        padding: 9px !important;
        position: sticky !important;
        top: 1px;
        background-color: #f5f5f5 !important;
        z-index: 99 !important;
        white-space: normal !important;
        border-left: 1px solid #999999;
        border-right: 1px solid #999999;
        color: #333;
    }
    body .btn.btn-sm, body .btn-group-sm>.btn, body .btn-group-sm .btn {
        padding: 8px 20px;
        font-size: 15px;
        line-height: 1.5;
        border-radius: 6px;
        text-transform: capitalize;
    }
    select.custom-select.custom-select-sm.form-control.form-control-sm {
        position: relative;
        padding: 6px 0px 4px 0;
        font-size: 12px;
        height: auto;
        margin: 0 6px;
        z-index: 99;
        /* background-color: var(--card-theme-color); */
    }
    .dataTables_filter input.form-control-sm{
        color : var(--font-color);
    }
    .card [class*="card-header-"]:not(.card-header-icon):not(.card-header-text):not(.card-header-image) {
        display: none;
    }
    .dataTables_filter label {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    thead.text-primary {
        color: var(--font-color) !important;
        background: var(--color-light-white);
        padding: 0;
    }
    td.td-actions .btn.detail:hover {
        background: var(--primary) !important;
    }

    .dataTables_wrapper table thead tr td, .dataTables_wrapper table thead tr th {
        padding: 12px 14px !important;
        font-size: 14px;
    }
    .dataTables_wrapper table > tbody > tr:nth-of-type(odd) {
        background-color: var(--font-color-theme);
    }
    table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
    
        right: 16px !important;
        content: "\2191";
    }
    .dataTables_info {
        font-weight: 500;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;    margin-top: 10px;
    }
    table .td-actions a.btn.btn-success.btn-link {
        background: #E8F2EF;
        border-radius: 5px;
        width: 30px;
        height: 30px;
        line-height: 28px;
    }
    .customer-tablehead.card-header.text-white {
        background-color: var(--primary);
    }
    table .td-actions button.btn.btn-delete{
        border-radius: 5px;
        width: 30px;
        height: 30px;
        background: #FFEDE5;
        padding: 0;    margin: 0 6px;
    }
    table .td-actions a.btn.btn-success.btn-link:hover, table .td-actions button.btn.btn-delete:hover {
        background: #f5f5f5 !important;
    }
    table .td-actions .btn {
        margin: 0px;
        padding: 5px;
    }
    table th, table td {
        padding: 0.75rem;
        vertical-align: middle;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    .dataTables_wrapper table > tbody > tr {
        position: relative;
    }
    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
        right: 10px !important;
        content: "\2193";
    }
    table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
        position: absolute;
        bottom: 0.9em;
        display: block;
        opacity: 0.3;
        top: 12px;
        font-size: 14px;
        right: 0;
        z-index: 999;
    }
    .dataTables_scrollBody table.customer-table-custom thead .sorting_asc:before, .dataTables_scrollBody table.customer-table-custom thead .sorting_desc:after, .dataTables_scrollBody table.customer-table-custom thead .sorting_desc:before, .dataTables_scrollBody table.customer-table-custom thead .sorting_asc:after, .dataTables_scrollBody table.customer-table-custom thead .sorting:before, .dataTables_scrollBody table.customer-table-custom thead .sorting:after{
        position: absolute !important;
        bottom: 0.9em !important;
        display: block;
        opacity: 0.3 !important;
        top: 12px !important;
        font-size: 14px !important;
        z-index: 999 !important;
    }
    thead.text-primary td, thead.text-primary th {
        border-bottom: 0;
    }
    table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
        cursor: pointer;
        position: relative;
    }
    table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after {
        opacity: 1;
    }
    ul.pagination {
        justify-content: flex-end;
    }
    .table thead tr th {	
        font-weight: 500;
    }
    .page-link, a {
        color: var(--primary);
    }
    .page-item.active .page-link {
    border-radius: 5px;
        background-color: var(--primary);
        border-color: var(--primary);
    }
    a.page-link {
        border-radius: 5px;
        font-weight: 500;
    }
    button.btn.btn-delete {
        box-shadow: none;
    }
    .sidebar .nav li a, .sidebar .nav li .dropdown-menu a {
        margin: 10px 0 0;
        border-radius: 0;
        font-weight: 500;
        color:#94A3B8;
    }
    .sidebar .nav li:first-child>a {
        margin: 0;
    }
    button.btn.btn-delete-poline a {
        padding: 0;
        margin: 0;
    }
    .navbar.navbar-transparent {
        padding: 0px;
        border: 2px solid var(--border-nav-color);
    }
    .sidebar .sidebar-wrapper {
       
        overflow-x: hidden !important;
        padding: 0px;
       
    }
    .sidebar .logo {
        background: #f6f8fa;
        padding: 5px 0;
        padding-bottom: 50px !important;
    }
    .sidebar .logo:after {
        height: 0;
    }
    .navbar .navbar-brand {
        font-size: 16px;
        font-weight: 600;
        color: var(--font-color);
        height: 45px !important;
        padding: 0.325rem 0 !important;
    }
    ul.nav.nav-pills.alarm-home-tabs {
        margin-bottom: 24px;
        justify-content: center;
    }
    .navbar .collapse .navbar-nav .nav-item .nav-link {
        padding: 0;
        font-weight: 400;
        font-size: 0;
        margin-left: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: var(--primary);
        line-height: 30px;
        text-align: center;
    }
    .navbar .collapse .navbar-nav .nav-item .nav-link:not(.btn) .material-icons {
        margin-top: 5px;
        top: 0px;
        position: relative;
        margin-right: 0;
        color: var(--font-color-theme);
    }
    .soon {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--font-color-theme);
        border-radius: 10px;
        box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%);
        font-size: 0;
        font-weight: 500;
        margin: 40px 20px;
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        text-align: center;
    }
    
    .daskboad-page-section {
        padding: 0px;
    }
    .daskboad-page-section img {
        object-fit: fill !important;
        width: 100%;
        margin: 0 auto;
    }
    .card .card-header-rose .card-icon, .card .card-header-rose .card-text, .card .card-header-rose:not(.card-header-icon):not(.card-header-text), .card.bg-rose, .card.card-rotate.bg-rose .front, .card.card-rotate.bg-rose .back {
        background: linear-gradient(
    60deg
    , var(--primary), var(--primary));
    }
    .btn.btn-rose:focus, .btn.btn-rose.focus, .btn.btn-rose:hover {
        color: var(--font-color-theme);
        background-color: #4a5564 !important;
        border-color: #4a5564 !important;
    }
    .btn.btn-rose:focus, .btn.btn-rose:active, .btn.btn-rose:hover {
        box-shadow: 0 14px 26px -12px rgb(153 153 153), 0 4px 23px 0px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(220 220 220);
    }
    .card .card-header-rose .card-icon, .card .card-header-rose .card-text, .card .card-header-rose:not(.card-header-icon):not(.card-header-text), .card.bg-rose, .card.card-rotate.bg-rose .front, .card.card-rotate.bg-rose .back {
        background: linear-gradient(
    60deg
    , var(--primary), var(--primary));
    }
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        width: 100%;
    }
    .btn, .btn.btn-default {
        box-shadow: none !important;
    }
    .btn.btn-rose {
        color: var(--font-color-theme);
        background-color: var(--primary);
        border-color: var(--primary);
        box-shadow: none !important;
        border-radius: 5px;
        opacity: 1;
        font-size: 14px;
        text-transform: capitalize;
    }
    .card .card-body .form-group {
        margin: 0 0 20px;
        padding: 0;
    }
    .form-group.apply-search-reorder-upper, .form-group.reorder-custom{
        margin: 0 !important;
    }
    .card .card-header-rose .card-icon, .card .card-header-rose:not(.card-header-icon):not(.card-header-text), .card .card-header-rose .card-text {
        box-shadow: 0 4px 20px 0px rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(0 167 141);
    }
    .btn:hover, .btn.btn-default:hover {
        background-color: #919191 !important;
        border-color: #7a7a7a !important;
    }
    td.td-actions .btn:active:hover ,
    td.td-actions button.btn.btn-delete:hover, td.td-actions button.btn.btn-delete:focus, td.td-actions .btn:active:focus,
    td.td-actions .btn:hover,  td.td-actions .btn.btn-default:hover{
        box-shadow: none !important;
        background-color: transparent !important;
        border-color: transparent !important;
            
    }
    .btn.btn-success.btn-link {
        background-color: transparent;
        color: var(--primary);
        box-shadow: none;
        padding: 0 0 !important;
    }

    table .td-actions a.btn.btn-success.btn-link.edit-payment-term{
        background: #E8F2EF !important
        }

    .form-check, label {
        color: #6c757d;
        font-weight: 400;
    }
    .form-check.mr-auto.ml-3.mt-3 {
        margin: 12px 0;
    }
    .card .card-header.card-header-icon h4, .card .card-header.card-header-text h4 {
        font-weight: 500;
        font-size: 24px;
    }
    .swal2-popup .swal2-styled.swal2-confirm {
        background-color: var(--primary) !important;
    }
    .swal2-popup .swal2-styled:focus {
        outline: none;
        box-shadow: none !important;
    }
    .alert.alert-success {
        background-color: var(--primary);
        color: var(--font-color-theme);
        font-size: 16px;
        font-weight: 500;
    }
    .alert .close i {
        color: var(--font-color-theme);
        font-size: 20px;
        opacity: 1 !important;
    }
    button.btn, .btn {
        font-weight: 500 !important;
        border-radius: 6px !important;
        text-transform: capitalize !important;
        font-size: 15px;
    }
    table#purchase_order_table th, table#purchase_order_table td { 
        white-space: nowrap; 
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    table#purchase_order_table  th[ot-attr="comment"], table#purchase_order_table td[td-attr="comments"] {
        min-width: 315px;
        max-width: 315px;
    }
    button:focus {
        outline: 0;
        outline: 0 !important;
    }

    table#purchase_order_table .subrow {        
        font-size:0;
        display:none;
        transition:font-size 400ms;
    }
    table#purchase_order_table td > span.plusClick {     
        float:left;
        width:1em;
        height:1em;       
        position:relative;
        margin-right:3px;    
    }
    table#purchase_order_table td > span.plusClick:before {
        content:'';
        position:absolute;
        width:80%;
        height:0;
        left:10%;
        top:50%;
        margin-top:-1px;
        border-top:2px solid var(--secondary-theme);     
        border-color:inherit;
    }
    table#purchase_order_table td > span.collapsed:after {
        content:'';
        position:absolute;
        height:80%;
        width:0;
        margin-left:-1px;
        border-left:2px solid var(--secondary-theme);
        border-color:inherit;    
        left:50%;
        top:10%;
    }
    table#purchase_order_table td > span.plusClick:hover {
    /*border-color:var(--warning);*/
    border-color: black;
    }
    .dataTables_wrapper {
        overflow: hidden !important;
    }
    input.freefield, input.splitfield, select.dropdown, input.account-manual, select.account-select-option, .supplier_freefield, .service_freefield {
        border: 1px solid var(--color-light-white);
        border-radius: 3px;
        font-size: 14px;
        padding: 4px 10px;
        text-align: center;
        color: #555;
    }
    .inputgroup-custom .input-group-addon:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .inputgroup-custom .input-group-addon {
        padding: 7px 17px 5px 7px;
        font-size: 14px;
        font-weight: 400;
        line-height: 1;
        color: #555;
        text-align: center;
        background-color: #f5f5f5;
        border: 1px solid var(--color-light-white);
        border-radius: 4px;
        width: 1%;
        white-space: nowrap;
        vertical-align: middle;
        display:table-cell;
    }
    select.account-select-option {
        background : #f5f5f5;
    }
    input.account-manual {
        height: 30px;
    }
    select.dropdown {
        width: auto;
        top: 0;
        padding-right: 20px !important;
        cursor: pointer;
    }

    .select_dropdown label, .account_select label {
        position: relative;
    }
    .account_select label{
        margin-bottom: 0px !important;
    }
    .select_dropdown label::after, .account_select label::after {
        position: absolute;
        color: var(--font-color);
        font-weight: 600;
        font-size: 10px;
        content: '\25BC';
        right: 6px;
        top: 8px;
    }
    .select_dropdown i {
        vertical-align: middle;
        background: #dddddd;
        border-radius: 5px;
        width: 27px;
        height: 27px;
        line-height: 28px;
        font-size: 22px;
        text-align: center;
    }
    .modal-body {
        padding: 30px 1rem 20px;
    }
    .modal-body input, .modal-body select {
        width: 100%;
        padding: 6px 10px;
        border-radius: 4px !important;
        font-size: 15px;
        border: 1px solid #d2d2d2 !important;
        box-shadow: none !important;
    }
    #deleteModal .modal-body::after {
        position: absolute;
        color: var(--font-color);
        font-weight: 600;
        font-size: 10px;
        content: '\25BC';
        right: 30px;
        top: 50%;
        transform: translate(0, -50%);
    }

    td.first-section {
        display: flex;
        align-items: center;
    }
    td.last-section{
        text-align: right;
    }
    td.last-section .dropdown button.btn {
        padding: 0;
        text-align: center;
        border-radius: 50px;
        height: 20px;
        width: 20px;
        margin: 0;
    }
    td.last-section .dropdown button.btn::after {
        margin-left: 0.5px;
        margin-top: 9px;
    }
    td.first-section span.plusClick {
        top: 0 !important;
    }
    td.first-section >span {
        font-size: 14px;
        font-weight: bolder;
    }

    .addoption_modal , .deleteoption_modal, .reminder_rules_modal, .reminder_po_modal, .accounts_reminder_rules_modal{
        cursor:pointer
    }
    .btn-top{
        padding: 5px 15px;
        font-size: 12px;
    }
    .loader {
        position: absolute;
        width: 100%;
        height: 100vh;
        z-index: 999999;
        background: url(/material/img/ep-loader.gif) 50% 50% no-repeat var(--font-color-theme);
        background-size: 140px;
    }
    body .sidebar .nav {
        margin: 0;
        display: block;
    }
    div#DataTables_Table_0_processing {
        padding: 24px;
        text-align: center;
        font-weight: 600;
        font-size: 18px;
    }

    .product-table.dataTable>thead>tr>th, .product-table.dataTable>tbody>tr>th, .product-table.dataTable>tfoot>tr>th, .dataTable>thead>tr>td, .product-table.dataTable>tbody>tr>td, .product-table.dataTable>tfoot>tr>td {
        padding: 5px 8px !important;
    }
    .form-group .form-control {
        font-size: 16px;
        border: 1px solid #707070;
        border-radius: 5px;
        height: 50px;
        padding: 10px 20px !important;      
    }
    .modal .form-group .form-control {
         color: var(--font-color);
    }
    .gm-style .gm-style-iw-c{
       color: #000;
    }
    
    .dropdown.bootstrap-select button.btn.dropdown-toggle.btn-light {
        margin: 0;
        height: 50px;
        padding: 14px 20px;
        background:var(--font-color-theme);
        border: 1px solid #707070;
        color: #707070;
        font-family: 'Roboto', sans-serif !important;
        width: 100%;
    }
    .dropdown.bootstrap-select button.btn.dropdown-toggle:hover {
        background-color: var(--font-color-theme) !important;
    }
    .mtop-5 {
        margin-top: 25px;
    }
    .mybtn{
        font-size:12px !important;
    }

    /* Tracking table border design */
    table.bordered th.week-header{
        border : 2px solid #000 !important;
    }
    table.bordered td.left-border, table.bordered th.left-border{
        border-left : 2px solid #000 !important;
        text-align: center;
    }

    table.bordered th, table.bordered td{
        border: 1px solid #d2d2d2 !important;
    }

    .negative, .negativerow{
        background-color:rgba(233, 214, 214, 0.9) !important;
    }
    .fullrowsection{
        background-color:#eee;
    }
    .projection_value{
        width: 50px;
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
    }
    .full-row th{
        padding: 20px;
    }

    .mybtn{
        font-size: 12px;
    }
    .pastweek{
        background-color: rgba(152,251,152, 0.5);
        font-weight: 600;
    }

    .menu-toggle{
        cursor:pointer;
    }

    body .daterangepicker .calendar-table th, body .daterangepicker .calendar-table td {
        white-space: nowrap;
        text-align: center;
        vertical-align: middle;
        min-width: 18px;
        width: 18px;
        height: 18px;
        line-height: normal;
        font-size: 12px;
        border-radius: 4px;
        border: 1px solid transparent;
        white-space: nowrap;
        cursor: pointer;
        padding: 6px !important;
    }
    .custom-height {
        overflow: auto;
        max-height: 200px;
        position: relative;
        padding-right: 0px;
        padding-left: 0px;
    }

    .sticky-head tr th{
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .stock-data .dataTables_filter{
        display:none;
    }

    /* CSS for switching portals - start */

    .switch-portal a:hover, .switch-portal a:focus{
        color: var(--primary);
    }

    .switch-portal li.nav-item{
        color: var(--primary);
        background-color : #d6f1ed;
        padding : 10px;
    }
    .switch-portal li.nav-item.active{
        background-color : var(--primary);
    }
    .switch-portal li.nav-item.active label{
        color:var(--font-color-theme);
    }
    .switch-portal label{
        color: var(--primary);
        font-size: 15px;
        text-decoration: none;
        font-weight: 500;
        display: inline-block;
    }
    /* CSS for switching portals - end */

    /* Force Hide Assign To Button for now */
    .force-hide{
        display : none !important;
    }

    .shipment_details select[name="origin_port"],
    .shipment_details select[name="destination"]{
        max-width: 150px;
    }
    .Amount_Paid, .Date_Paid{
        max-width: 150px;
    }


    @media screen and (max-width: 991px){

        .custom-col .inner-part img {
            height: auto;
        }
        .custom-col {
            display: flex;
            align-items: center;
            height: auto;
            flex-direction: column;
        }
        .custom-col .custom-form {
            max-width: 400px;
            margin: auto;
            padding: 150px 20px 100px;
            height: auto;
        }
        header img {
            max-width: 100px;
        }
        .menu-toggle {
            display: none;
        }
    }
    @media screen and (max-width: 767px){
        .custom-col .inner-part p.caption {
            bottom: 40px;
            font-size: 26px;
        }
    }

    @media screen and (max-width: 1700px){
        .expired_proj{
            top:88px !important;
        }
    }

    @media screen and (max-width: 1430px){
        .commom-projection-btn{
            position: relative;
            margin-bottom: 15px;
            left: 26px !important;
        }
        .expired_proj{
            top:88px !important;
        }
    }

    @media screen and (max-width: 1050px){
        .commom-projection-btn{
            position: relative;
            top: 10px !important;
            left: 26px !important;
        }
        .expired_proj{
            top:88px !important;
        }
    }

    .sidebar{
        z-index: 9999;
    }

    /**** MENU TOGGLE NAVIGATION ******/
    .navbar-expand-lg>.container-fluid,
    .sidebar,
    .sidebar-wrapper,
    .main-panel
    {
        transition: all 110ms linear !important;

    }

    .redirect-hover, .redirect-hover:focus{
        color: var(--secondary-theme);
    }

    .redirect-hover:hover{
        color: var(--primary);
    }


    /*************************** LOGIN PAGE END *************************/

    .inline{
    display: inline !important;
    }
    .btn-delete{
    background-color: transparent;
    }

    .customer-table-custom.dataTable>tbody>tr> td {
        padding: 8px 6px !important;
        vertical-align: middle;
        font-weight: 400;
        font-size: 14px;
    }
    .customer-table-custom th {
        white-space: nowrap;
        font-weight: 600;
    }
    .daterangepicker .drp-calendar {
        max-width: 100% !important;
    }

    .onhand-row .card{
        margin-bottom: 0px !important;
    }

    .trackng-row .card {
        margin-top: 0px !important;
        margin-bottom: 0 !important;
    }

    .tracking-card-body {
        max-height: calc(100vh - 320px);
        overflow-x: scroll;
        padding: 0  0 10px !important;
    }
    .tracking-card-body.graphpopupview{
        /*height: 100%;*/
    }
    body .main-panel>.content {
        min-height: calc(100% - 60px);
        margin-top: 60px;
        padding: 0;

    }
    .greyout .p-sku{
        padding: 14px 3px !important;
    }
    .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
        top: 10px;
    }
    .card{
        margin-top: 10px !important;
    }
    .card.tracking-card {
        padding: 10px;
        margin-top: 10px !important;
    }

    .table-responsive.tracking-sheet {
        overflow-x: visible !important;
        margin-bottom: 0px;
    }

    .tracking-card-row-container .row{
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .tracking-card-row-container.tracking-sales .row{
        width: 100%;
    }

    .table-section-row{
        padding-right: 0px !important;  
        padding-left: 0px !important; 
    }

    /**** STICKY ROWS - TRACKING SHEET ****/
    table.tracking-table tr th.sticky-row, table.tracking-table tr td.sticky-row 
    {
        position: sticky !important;
        left: -2px;
        background: #f6f8fa;
        z-index: 999;
        min-width: 200px;
        max-width: 200px;
        border: 1px solid #bbb !important;
        border-collapse: collapse;
        border-spacing: 0px;
        display: revert;
        height: 30px;
        /*text-transform: capitalize;*/
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis;
    }
    .btn-delete-poline {
        background-color: transparent;
        border-radius: 5px;
        width: 30px;
        height: 30px;
        background: #FFEDE5;
        padding: 0;
        margin-left: 6px;
    }

    .action-btn .btn{
        margin: 1px;
        padding: 3px;
    }

    .action-btn .btn-danger:hover{
        box-shadow: none !important;
        background-color: transparent !important;
        border-color: transparent 
    }

    table.tracking-table tr th.week-header{
        background: #eee;
        position: sticky;
        top: 0;
        z-index: 97;
        padding:0px !important;
    }
    table.tracking-table tr th.week-header.weeklyview{
        padding-left:2px !important;
        padding-right:2px !important;
    }

    table#purchase_order_table>tbody>tr.group td, table#purchase_order_table th, table#purchase_order_table td {
        padding: 5px !important;
    }
    table#purchase_order_table>tbody>tr.group td.first-section {
        padding-right: 0px !important;
    }
    td.first-section >span.rename_po_number{
        margin-left: 8px;
    }

    .header-sku, .futureweek, .pastweek, .greyout{
        white-space: normal !important;
        min-width: 70px !important;
        max-width: 70px !important;
        text-align: center;
    }

    p.back-btn{
        padding: 0px;
        margin: 0px;
        margin-top: 10px;
    }

    p.back-btn a{
        color: #3C4858;
        font-weight: bold;
        display: flex;
        align-items: center;
        width: 80px;
    }

    .back-btn a i {
        background-color: var(--primary);
        color: var(--font-color-theme);
        border-radius: 50%;
        padding: 0;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        margin-right: 7px;
    }

    .navbar .navbar-wrapper .menu-toggle {
        display: flex;
    }
    .navbar .navbar-wrapper .navbar-brand {
        display: flex;
        align-items: center;
    }
    .hidemenu .navbar.navbar-transparent {
        position: fixed;
        top: 0;
        left: 80px;
        right: 0;
        width: calc(100% - 80px);
    }
    .navbar.navbar-transparent .container-fluid {
        padding-right: 0;
    }
    img.ep-logo.ep-logo-small {
        padding: 0 !important;
        width: 40px;
    }
 

    table#eventsTable , table#usersTable{
        width:100% !important;
    }

    table.bordered th.header-sku{
        border-bottom: 1px solid #000 !important;
        line-height: 1.4;
        background: #eee;
        position: sticky;
        top: 25px;
        z-index: 97;
    }

    .select2-drop-active {
        border: 1px solid #000;
        margin-top: 1px  !important;
    }
    .select2-container-multi.select2-container-active .select2-choices , .select2-container.select2-container--open .select2-selection--multiple{
        border: 1px solid #707070 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
    .greyout {
        background: #ccc !important;
    }
    .card .card-body .form-group select.selectpicker-role {
        margin: 0;
        height: 50px;
        padding: 16px 20px;
        background:var(--font-color-theme);
        border: 1px solid #707070;
        color: #707070;
        font-family: 'Roboto', sans-serif !important;
        width: 100%;
    }

    .stock-table {
        margin-right: 5px;
        border: 2px solid #333 !important;
    }

    .onhand-stock-table {
        display: flex;
        align-items: center;
        margin: 0px 0 8px;
    }

    .skutop{
        height: 28px;
    }

    .hidecol{
        display:none;
    }
    .stock-row{
        padding: 10px 10px 0px 10px !important;
    }

    label.col-form-label {
        font-weight: 400;
        padding-bottom: 0;
    }
    .category-custom.col-sm-12.row {
        padding: 0px;
        background: var(--font-color-theme);
        border-radius: 8px;
        width: 100%;
        margin: 0;
        justify-content: space-between;
    }
    .category-custom.col-sm-12.row label.col-form-label {
        font-size: 12px;
        padding-top: 2px;
    }
    .pls-sel {
        margin-left: 5%;
    }

    .category-custom .bmd-form-group{
        margin: 2px 0 0;
    }

    .custom_product_add span {
        padding: 8px 6px;
        background: var(--primary);
        margin-right: 6px;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 400;
        color: var(--font-color-theme);
        margin-bottom: 6px;
        display: inline-block;
        text-align: center;
        max-width: 206px;
        width: 20%;
    }
    .custom_product_add {
        display: inline-block;
        width: 100%;
        height: auto;
    margin-bottom: 20px;
    }

    .select-product {
        width: 100%;
        margin-right: 15px;
    }
    .select-product .dropdown.bootstrap-select {
        width: 100% !important;
    }
    .btn-add-product button {
        height: 50px;
    }
    a.dropdown-item.selected.active {
        background: #eee;
    }
    .card-header.custom-header h4.card-title {
        margin-left: 0;
        font-size: 24px;
        width: 100%;
        margin: 14px 0 0;
    }
    .card-header.custom-header {
        display: flex;
        align-items: center;
    }
    .card.pomamager-section {
        margin-top: 15px !important;
        margin-bottom: 15px !important;
    }
    .card.pomamager-section .card-body {
        padding: 10px !important;
    }
    .card.pomamager-section {
        margin-bottom: 0 !important;
    }
    .category-custom .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        width: 100%;
    }
    .apply-btn button.mybtn.btn.btn-rose {
        margin: 8px 0 0;
        height: 50px;
        padding: 0 20px;
        font-size: 15px !important;
    }
    .apply-btn{
        margin-top:17px;
    }
    .tracking-table th, .tracking-table td {
        white-space: nowrap;
        font-size: 12px;
    }

    table.tracking-table th, table.tracking-table td {
        padding: 2px 2px !important;
    }

    .sticky-form{
        background:var(--font-color-theme);
        position: sticky;
        top: 0;
        z-index: 99;
    }

    .tracking-sheet{
        background:var(--font-color-theme);
        position: sticky;
        top: 0;
        /*z-index: 99;*/
    }

    .table-section-row{
        margin-bottom: 0;
    }

    input.splitfield.sku_names{
        width: 100%;
        font-size: 12px;
    }
    .page-item:first-child .page-link:hover, .page-item:first-child .page-link:focus, .page-item:last-child .page-link:hover, .page-item:last-child .page-link:focus {
        color: var(--font-color-theme);
        background-color: var(--primary);
        border-color: var(--primary);
    }
    .newsplitpo {
        border: 2px solid darkseagreen;
        box-shadow: 2px 2px 5px 2px #888888;
    }

    .chkbox{
        max-width:20px;
    }

    #export-to-xls{
        /*margin-left:10px;*/
    }

    .hide_po_number{
        display: none;
    }

    .group_po_number{
        display: none;
    }

    /** customer datatable */
    .dataTables_scrollBody table.data-table.customer-table-custom thead tr th .dataTables_sizing,
    .dataTables_scrollBody table.product-table thead tr th .dataTables_sizing,
    .dataTables_scrollBody table.event-table thead tr th .dataTables_sizing,
    .dataTables_scrollBody table.category-table thead tr th .dataTables_sizing,
    .dataTables_scrollBody table.product-add thead tr th .dataTables_sizing,
    .dataTables_scrollBody table.projection-history-table thead tr th .dataTables_sizing
    {
        overflow: hidden !important;
    }
    table.data-table.customer-table-custom, table.product-table, table.product-add, table.event-table, table.category-table, table.projection-history-table{
        width: 100%;
        height:100%;
    }

    .dataTables_scroll .customer-table-custom.dataTable>thead>tr>th,
    .dataTables_scroll .product-table.dataTable>thead>tr>th,
    .dataTables_scroll .product-add.dataTable>thead>tr>th,
    .dataTables_scroll .event-table.dataTable>thead>tr>th,
    .dataTables_scroll .category-table.dataTable>thead>tr>th,
    .dataTables_scroll .projection-history-table.dataTable>thead>tr>th
    {

        position: sticky;
        top: 0;
        z-index: 999;
        height: 100% !important;
        border-left: 1px solid #e8e8e8 !important;
    }
    .dataTables_scrollBody table.customer-table-custom thead .sorting_asc:before, 
    .dataTables_scrollBody table.customer-table-custom thead .sorting_desc:after,
    .dataTables_scrollBody table.customer-table-custom thead .sorting_desc:before, 
    .dataTables_scrollBody table.customer-table-custom thead .sorting_asc:after,
    .dataTables_scrollBody table.customer-table-custom thead .sorting:before, 
    .dataTables_scrollBody table.customer-table-custom thead .sorting:after
    {
        opacity : 0;
    }

    /** product datatable */
    .dataTables_scrollBody table.product-table thead .sorting_asc:before, 
    .dataTables_scrollBody table.product-table thead .sorting_desc:after,
    .dataTables_scrollBody table.product-table thead .sorting_desc:before, 
    .dataTables_scrollBody table.product-table thead .sorting_asc:after,
    .dataTables_scrollBody table.product-table thead .sorting:before, 
    .dataTables_scrollBody table.product-table thead .sorting:after
    {
        opacity : 0;
    }

    /** product add datatable */
    .dataTables_scrollBody table.product-add thead .sorting_asc:before, 
    .dataTables_scrollBody table.product-add thead .sorting_desc:after,
    .dataTables_scrollBody table.product-add thead .sorting_desc:before, 
    .dataTables_scrollBody table.product-add thead .sorting_asc:after,
    .dataTables_scrollBody table.product-add thead .sorting:before, 
    .dataTables_scrollBody table.product-add thead .sorting:after
    {
        opacity : 0;
    }

    /** event datatable */
    .dataTables_scrollBody table.event-table thead .sorting_asc:before, 
    .dataTables_scrollBody table.event-table thead .sorting_desc:after,
    .dataTables_scrollBody table.event-table thead .sorting_desc:before, 
    .dataTables_scrollBody table.event-table thead .sorting_asc:after,
    .dataTables_scrollBody table.event-table thead .sorting:before, 
    .dataTables_scrollBody table.event-table thead .sorting:after
    {
        opacity : 0;
    }

    /** category datatable */
    .dataTables_scrollBody table.event-table thead .sorting_asc:before, 
    .dataTables_scrollBody table.event-table thead .sorting_desc:after,
    .dataTables_scrollBody table.event-table thead .sorting_desc:before, 
    .dataTables_scrollBody table.event-table thead .sorting_asc:after,
    .dataTables_scrollBody table.event-table thead .sorting:before, 
    .dataTables_scrollBody table.event-table thead .sorting:after
    {
        opacity : 0;
    }

    /** PO Allocation : Disable Sorting */
    .dataTables_scrollBody table.po_allocation_table thead .sorting_asc:before, 
    .dataTables_scrollBody table.po_allocation_table thead .sorting_desc:after,
    .dataTables_scrollBody table.po_allocation_table thead .sorting_desc:before, 
    .dataTables_scrollBody table.po_allocation_table thead .sorting_asc:after,
    .dataTables_scrollBody table.po_allocation_table thead .sorting:before, 
    .dataTables_scrollBody table.po_allocation_table thead .sorting:after
    {
        opacity : 0;
    }

    .dataTable>thead>tr>th, .dataTable>tbody>tr>th, 
    .dataTable>tfoot>tr>th, .dataTable>thead>tr>td,
    .dataTable>tbody>tr>td, .dataTable>tfoot>tr>td {
        padding: 5px !important;
        border-left: 1px solid #e8e8e8;
    }
    /** SUCCESS MSG TOAST */
    .row .alert-success, .row .alert-danger, .row .alert-warning{
        position: fixed;
        z-index: 99999999;
        width: 500px;
        right: 20px;
        top: 20px;
    }
    .alert.alert-warning{
        background-color: #e98e08;
    }

    /** SELECT2 */
    .select2-container{
        width: 100% !important;
    }

    form#merge-form .select2-container-multi .select2-choices .select2-search-field input,
    .assign-body .select2-container-multi .select2-choices .select2-search-field input,
    .grouppo-body .select2-container-multi .select2-choices .select2-search-field input,
    .assign-body .select2-container .select2-selection--multiple li.select2-search input,
    .grouppo-body .select2-container .select2-selection--multiple li.select2-search input,
    form#merge-form .select2-container .select2-selection--multiple li.select2-search input,
    .tracking-graph-sku-section .select2-container .select2-selection--multiple li.select2-search input,
    .rule-body .select2-container .select2-selection--multiple li.select2-search input,
    .lockpo-body .select2-container .select2-selection--multiple li.select2-search input,
    .accounts-filter .select2-container .select2-selection--multiple li.select2-search input,
    .allocation-filter .select2-container .select2-selection--multiple li.select2-search input,
    .add-projection-modal .select2-container .select2-selection--multiple li.select2-search input,
    #bulkArchiveModal .select2-container .select2-selection--multiple li.select2-search input,
    #bulkMarkPaidModal .select2-container .select2-selection--multiple li.select2-search input
    
    {
        box-shadow : none;
        border: 0px !important;
    }

    .lockpo-body .select2-container--default.select2-container--focus .select2-selection--multiple,
    .lockpo-body .select2-container .select2-selection--multiple
    {
        border : 1px solid #d2d2d2 !important;
    }

    .epside{
        height: 65px;
    }

    table#purchase_order_table thead.text-primary th:first-child{
        padding: 5px !important;
    }

    .row.tracking-badge .alert-success, .row.tracking-badge .alert-danger{
        left: 45%;
        width: 150px;
        padding: 2px;
        margin: 0;
        text-align: center;
        padding-left: 5px;
        top: 15px;
    }
    .no-data-image {
        text-align: center;
        height: calc(100vh - 200px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .no-data-image.no-data-image-popup{
        height: auto !important
    }
    .no-data-image img {
        height: 200px;
    }
    /** Please Select design CSS - Tracking Sheet **/
    .track-option{
        background:var(--font-color-theme);
        text-align: center;
    }

    .track-option .first-sec{
        margin-top: 50px;
    }

    .track-no-option{
        width: 300px;
        height: 200px;
    }

    .display-block {
        display: block;
        margin-bottom: 50px;
        flex: 100%;
        max-width: 100%;
        padding: 0 !important;
    }

    .row.tracking-badge span{
        max-width: 100%;
    }

    .tracking-badge button{
        display: none;
    }

    .modal-customer-add .card{
        box-shadow: none;
    }

    .modal-customer-add .btn-cust-submit{
        display:none;
    }

    .modal-customer-add .row, .modal-customer-add .card, .modal-customer-add .card-body, .modal-customer-add .form-group{
        padding: 0 !important;
        margin: 0 !important;
        padding-top: 4px !important;
    }

    body .calendar-time select.hourselect,body .calendar-time select.minuteselect {
        -moz-appearance: auto;
        -webkit-appearance: auto;
    }

    table#purchase_order_table td textarea {
        border: 1px solid var(--color-light-white);
        border-radius: 3px;
        font-size: 14px;
        padding: 4px 10px;
        text-align: center;
        color: #555;
        width: 100%;
        height: 34px !important;
        float: left;
        min-width: 301px;
    }

    .po_error,.so_error, .po_num_error, .split_multiple_po_error, .rule_po_error, .lockpo_error, .shipdoc_error, .poreminder_adduser_error{
        color: #DC143C;
        padding: 0;
        margin: 0;
        margin-top: 8px;
        font-weight: 400;
    }
    .split_multiple_po_error{
        font-size: 14px;
    }
    .thdntexists:not(.thvalexists){
        color: #c8102E;
    }
    .for-main-po{
        display: none;
    }
    .shipdoc_error{
        text-align: center;
    }
    
    .modal-body.bulk-archive-body textarea{
        padding: 10px;
        width: 100%;
        padding: 6px 10px;
        border-radius: 4px !important;
        font-size: 15px;
        border: 1px solid #d2d2d2 !important;
        box-shadow: none !important;
    }

    @media only screen and (min-width: 991px) and (max-width: 1150px) { 

        .weeklysalavg{
            font-size: 9px !important;
        }

    } 

    .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
        outline: 0 !important;
        outline-offset: 0 !important;
    }
    body.hidemenu {
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }
    .table-responsive::-webkit-scrollbar,
    .tracking-card-body::-webkit-scrollbar,
    .card.pomamager-section .dataTables_scrollBody::-webkit-scrollbar ,
    .content.event-page .event-card-body::-webkit-scrollbar,
    .dataTables_scrollBody::-webkit-scrollbar{
        height: 10px;              /* height of horizontal scrollbar ← You're missing this */
        width: 10px;               /* width of vertical scrollbar */
        border: 1px solid var(--color-light-white);
    }
    
    /* Track */
    .table-responsive::-webkit-scrollbar-track,
    .tracking-card-body::-webkit-scrollbar-track,
    .card.pomamager-section .dataTables_scrollBody::-webkit-scrollbar-track, 
    .content.event-page .event-card-body::-webkit-scrollbar-track,
    .dataTables_scrollBody::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
    
    /* Handle */
    .table-responsive::-webkit-scrollbar-thumb, 
    .tracking-card-body::-webkit-scrollbar-thumb, 
    .card.pomamager-section .dataTables_scrollBody::-webkit-scrollbar-thumb, 
    .content.event-page .event-card-body::-webkit-scrollbar-thumb,
    .dataTables_scrollBody::-webkit-scrollbar-thumb{
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: var(--primary); 
        -webkit-box-shadow: inset 0 0 6px var(--primary); 
    }

    .table-responsive::-webkit-scrollbar-thumb:window-inactive, 
    .tracking-card-body::-webkit-scrollbar-thumb:window-inactive, 
    .card.pomamager-section .dataTables_scrollBody::-webkit-scrollbar-thumb:window-inactive, 
    .content.event-page .event-card-body::-webkit-scrollbar-thumb:window-inactive ,
    .dataTables_scrollBody::-webkit-scrollbar-thumb:window-inactive{
        background: rgb(153 153 153); 
    }

    /* perfect csroll css start */
    body .ps__rail-x{
        transition: none;
        -webkit-transition: none;
    }
    .ps__rail-x .ps__thumb-x {
        background-color: var(--primary);
        height: 10px;
        transition: none;
        -webkit-transition: none;
        bottom: 0;
    }
    .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking{
        background-color: #F5F5F5 !important;
        opacity: 1 !important;
        box-shadow: inset 0 0 6px rgb(0 0 0 / 30%) !important;
    }
    .ps .ps__rail-x:hover, .ps .ps__rail-x:focus, .ps .ps__rail-x.ps--clicking{
        height: 10px !important;
    }
    .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
        background-color: var(--primary) !important;
        height: 10px !important;
    }
    .ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y {
        background-color: #F5F5F5 !important;
        box-shadow: inset 0 0 6px rgb(0 0 0 / 30%) !important;
        opacity: 1 !important;
    }
    .ps--active-x > .ps__rail-x{
        height: 10px !important;
    }
    .ps__rail-y {
        width: 10px !important;
    }
    .ps__thumb-y {
        background-color: var(--primary) !important;
        width: 10px !important;
        right: 0 !important;
    }
    .ps__rail-y{
        box-shadow: inset 0 0 6px rgb(0 0 0 / 30%) !important;
        background-color: #F5F5F5 !important;
    }
    .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y{
        background-color: var(--primary) !important;
        width: 10px !important;
    }
    /* perfect csroll css end */

    /* loader css start */
    #ajaxloader, #innerajaxloader{
        display:none;
        position: absolute;
        left: 50%;
        top: 60%;
        z-index: 1;
        width: 100px;
        height: 100px;
        margin: -76px 0 0 -76px;
        border: 11px solid #f3f3f3;
        border-radius: 50%;
        border-top: 11px solid var(--primary);
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    .adjustment-customer{
        color: white !important;
        background: #2196f3 !important;
    }
    #innerajaxloader{
        position: relative;
        left: 55%;
        margin-top: 20%;
        margin-bottom: 20%;
    }
    
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    /* Add animation to "page content" */
    .animate-bottom {
        position: relative;
        -webkit-animation-name: animatebottom;
        -webkit-animation-duration: 1s;
        animation-name: animatebottom;
        animation-duration: 1s
    }
    
    @-webkit-keyframes animatebottom {
        from { bottom:-100px; opacity:0 } 
        to { bottom:0px; opacity:1 }
    }
    
    @keyframes animatebottom { 
        from{ bottom:-100px; opacity:0 } 
        to{ bottom:0; opacity:1 }
    }
    /* loader css end */


    /* targets css start */
    .target .tab-container{
        /*margin: 5% 10%;
        background-color: #c1e3d9;*/
        padding: 3%;
        border-radius: 4px;
    }

    .target .tab-menu ul{
        margin: 0;
        padding: 0;
    }
    .target .tab-menu ul li{
        list-style-type: none;
        display: inline-block;
    }
    .target .tab-menu ul li a{
        text-decoration: none;
        color: rgba(0,0,0,0.4);
        background-color: #b4cbc4;
        padding: 7px 25px;
        border-radius: 4px;
    }
    .target .tab-menu ul li a.active-a{
        background-color: var(--primary);
        color: var(--font-color-theme);
    }
    .target .tab{
        display: none;
    }
    .target .tab h2{
        color: rgba(0,0,0,.7);
    }
    .target .tab p{
        color: rgba(0,0,0,0.6);
        text-align: justify;
    }
    .target .tab-active{
        display: block;
    }
    .targetspage ul.nav-justified li {
        width: 100%;
    }
    .target ul.nav-justified a.tab-a {
        width: 100%;
        display: block;
        text-align: center;
        font-weight: 600;
        font-size: 18px;
    }
    .target .tab-container {
        padding: 1% 0;
    }
    table.target tr td {
        padding: 8px 14px !important;
    }
    input.manualtarget {
        border: 1px solid var(--color-light-white);
        border-radius: 3px;
        font-size: 14px;
        padding: 4px 10px;
        text-align: left;
        color: #555;
    }
    /* targets css end */

    form.form-horizontal.sticky-form {
        border-radius: 6px;
        margin-bottom: 10px;
    }
    body table td.select_dropdown i, i.reminder_rules_modal, i.reminder_po_modal, i.accounts_reminder_rules_modal {
        vertical-align: middle;
        background: var(--primary);
        width: 22px;
        height: 22px;
        line-height: 22px;
        font-size: 18px;
        text-align: center;
        color: var(--font-color-theme);
    }
    i.reminder_rules_modal, i.reminder_po_modal, i.accounts_reminder_rules_modal {
        border-radius: 5px;
        margin-left: 5px;
    }
    .rule_input, .rule_select{
        display: inline-block;
        width: 90px !important;
        height: 30px !important;
        margin-bottom: 10px;
    }
    select.rule_select{
        background-color: white !important;
    }
    /* Split PO left border color */
    .split_po_main td.first-section, .newsplitpo td.first-section{
        border-left-style: solid !important;
        border-left-width: 4px !important;
        border-radius: 4px;
    }
    .po_main td.first-section input[name="selectedpoid[]"]{
        width: 15px;
        height: 14px;
    }
    .p-text{
        font-size: 15px;
    }
    .reminder-users{
        margin-top: 10px;
    }
    body table td i.material-icons.deleteoption_modal {
        font-size: 16px;
        text-align: center;
        width: 23px;
    }
    body .modal-footer {
        padding: 0 1rem 1rem;
        border-top: none;
    }
    body .swal2-popup .swal2-styled.swal2-cancel {
        background-color: #aaa !important;
    }
    body .swal2-popup .swal2-title {
        display: block;
        font-size: 1.9em;
    }

    .content.event-page .card.event-card-body {
        margin-bottom: 0 !important;
    }
    .content.event-page .card {
        margin-top: 12px !important;
    }
    .content.event-page .event-card-body .card-body {
        padding: 10px;
    }
    footer.footer{
        display: none;
    }

    th.sticky-row input.btn.btn-default {
        padding: 4px 9px;
        font-size: 12px;
        text-transform: capitalize;
    }
    .custom-form a:hover, .custom-form a:focus {
        color: var(--primary);
    }
    .custom-form .card-footer .btn.active.focus, .custom-form .card-footer .btn.active:focus, .custom-form .card-footer .btn.focus, .custom-form .card-footer .btn:active.focus, .custom-form .card-footer .btn:active:focus, .custom-form .card-footer .btn:focus{
        color:var(--font-color-theme);
    }
    .sidebar-wrapper .nav .nav-item {
        position: relative;
        margin-bottom: 5px;
    }
    .sidebar-headings.nav-two {
        border-top: 1px solid #2a3243;
        margin-top: 15px;
    }
    .card .card-header.card-header-icon i.material-icons {
        width: auto;
        height: auto;
        line-height: initial;
    }
    form.inline1.form-horizontal {
        display: inline-block !important;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0px;
    }
    .dataTables_scrollHead {
        display: none;
    }
    * body .page-link:hover {
        color: var(--font-color-theme);
        text-decoration: none;
        background-color: var(--primary);
        border-color: var(--primary);
    }
    body .daterangepicker td.active, body .daterangepicker td.active:hover {
        background-color: var(--primary);
    }
    .modal .modal-header {
        background-color: var(--primary);
        border-radius: 0;
    }
    .modal .modal-header .modal-title {
        color: var(--font-color-theme);
    }
    .modal .modal-header .close {
        color: var(--font-color-theme);
        opacity: 1;
    }
    .modal-body input, .modal-body select {
        padding: 10px;
    }
    .modal-footer button {
        text-transform: capitalize;
        box-shadow: none;
        text-shadow: none;
        color: var(--font-color-theme);
        opacity: 1;
        transition: none;
        will-change: auto;
        font-size: 14px;
        font-weight: 500;
    }
    #viewProjectionDetails .form-control-sm, #viewProjectionHistory  .form-control-sm{
        border: none !important;
    }
    .modal-footer .btn.btn-secondary:hover, .modal-footer .btn.btn-secondary:focus, .modal-footer .btn.btn-secondary:active:hover, .modal-footer .btn.btn-secondary:active:focus, .modal-footer .btn.btn-secondary:active.focus, .modal-footer .btn.btn-secondary.active:hover, .modal-footer .btn.btn-secondary.active:focus, .modal-footer .btn.btn-secondary.active.focus, .modal-footer .open>.btn.btn-secondary.dropdown-toggle:hover, .modal-footer .open>.btn.btn-secondary.dropdown-toggle:focus, .modal-footer .open>.btn.btn-secondary.dropdown-toggle.focus, .modal-footer .show>.btn.btn-secondary.dropdown-toggle:hover, .modal-footer .show>.btn.btn-secondary.dropdown-toggle:focus, .modal-footer .show>.btn.btn-secondary.dropdown-toggle.focus {
        color: var(--font-color-theme);
    }
    .modal .modal-body {
        position: static;
    }
    .swal2-popup .swal2-content #swal2-content {
        font-size: 14px;
    }
    .swal2-popup .swal2-header h2 {
        font-size: 24px;
    }
    .swal2-popup {
        padding-top: 25px;
        padding-bottom: 30px;
    }
    .card .card-header.custom-header {
        padding-bottom: 0;
    }
    p.back-btn {
        margin-top: 15px;
    }
    table.border.section-header, table.border.accounts-section-header {
        position: sticky;
        top: 0;
        z-index: 999;
    }
    table.border.po_allocation-section-header {
        position: sticky;
        top: 0;
        z-index: 999;
    }
    table#purchase_order_table thead.text-primary th {
        font-size: 14px;
        padding: 6px !important;
        position: sticky !important;
        top: 36px;
        background-color: #f5f5f5 !important;
        z-index: 99 !important;
        white-space: normal !important;
        border-left: 1px solid #999999;
        border-right: 1px solid #999999;
        height: 100% !important;    line-height: normal !important;
    }

    /* Accounts Table */
    body table.accounts_table thead.text-primary th {
        padding: 10px 30px !important;
        background-color: #f5f5f5 !important;
        white-space: nowrap !important;
        color: #333 !important;
        line-height: normal !important;
        text-align: center;
    }
    body table.accounts_table thead.text-primary th.accts_payment_details_section.addborder {
        border-top: 1px solid #666 !important;
        border-bottom: 2px solid #666 !important;
    }

    body table.accounts_table thead.text-primary th.accts_payment_details_section.addborder[acct-attr="accts_po_total"],
    body table.accounts_table thead.text-primary th.accts_payment_details_section.addborder[acct-attr="accts_po_term1"],
    body table.accounts_table thead.text-primary th.accts_payment_details_section.addborder[acct-attr="accts_po_term2"],
    body table.accounts_table thead.text-primary th.accts_payment_details_section.addborder[acct-attr="accts_po_term3"],
    body table.accounts_table thead.text-primary th.accts_payment_details_section.addborder[acct-attr="accts_po_term4"]
    {
        border-left: 2px solid #666 !important;
    }
    body table.accounts_table thead.text-primary th.accts_payment_details_section.addborder[acct-attr="accts_po_due_date4"]{
        border-right: 2px solid #666 !important;
    }


    .accounts_table thead.text-primary{
        position: sticky;
        top: 0;
        z-index: 9;
    }

    .accounts_table>thead>tr>th,
    .accounts_table>tbody>tr>th, 
    .accounts_table>tfoot>tr>th, 
    .accounts_table>thead>tr>td, 
    .accounts_table>tbody>tr>td, 
    .accounts_table>tfoot>tr>td {
        white-space: nowrap;
    }

    .accounts_table  select {       
        min-width: 100px;
    }
    .apply-cover{
        margin-top: 17px;
    }
    .col-form-label.acct-label {
        padding-top: 0;
    }
    .card .card-body .form-group.accounts-filter{
        margin-bottom: 0;
    }
    .card-body.account-body,
    .card-body.po-allocation-body
    {
        padding-top: 10px;
    }
    .accounts-filter .select2-container .select2-selection--multiple,
    .allocation-filter .select2-container .select2-selection--multiple
    {
        padding: 1px 5px !important;
    }
    .accounts-filter .select2-container .select2-selection--multiple,
    .allocation-filter .select2-container .select2-selection--multiple,
    .date-range-picker
    {
        min-height: 40px;
        max-height: 40px;
    }
    .accounts-filter .select2-container .select2-selection--multiple li.select2-search,
    .allocation-filter .select2-container .select2-selection--multiple li.select2-search
    {
        padding: 2px 0 0 !important;
    }
    body .main-panel>.content.account-content,
    body .main-panel>.content.po-allocation-content 
    {
        margin-top: 50px;
    }

    /* Accounts Table */

    .dataTables_wrapper .dataTables_filter label span .form-control {

        height: 42px;
    }
    body .btn.btn-sm, body .btn-group-sm>.btn, body .btn-group-sm .btn {
        padding: 10px 20px;
        font-size: 14px;
        line-height: 1.5;
        border-radius: 6px;
    }
    a.btn.btn-primary.btn-sm.detail {
        padding: 4px 5px;
        font-size: 14px;
    }
    body .swal2-popup .swal2-styled {
        padding: 8px 20px;
        font-weight: 500;
        border-radius: 6px !important;
        font-size: 15px !important;
    }
    body .swal2-popup.swal2-loading .swal2-styled {
        border-radius: 100% !important;
    }
    .swal2-container.swal2-shown{
        background-color: rgba(0, 0, 0, 0.7) !important;
    }
    .swal2-icon.swal2-success .swal2-success-ring{
        border: 0.25em solid rgba(0, 168, 142, 0.9) !important;
    }
    .swal2-icon.swal2-success [class^='swal2-success-line']{
        background-color: var(--primary) !important;
    }
    input.reminder-freefield.btn.btn-default {
        margin: 0 10px;
    }
    .modal {
        z-index: 9999  !important;  
        background: rgb(153 153 153 / 48%)  !important;
    }

    .dataTables_scroll .customer-table-custom.dataTable>thead>tr>th {
        padding-bottom: 8px !important;
        position: sticky;
        top: 0;
        z-index: 999;
    }
    .customer-page .dataTables_scrollBody {
        max-height: calc(100vh - 280px);
    }
    .projection-page .dataTables_scrollBody {
        max-height: calc(100vh - 280px);
    }
    .dataTables_scrollBody {
        max-height: calc(100vh - 280px);
    }
    .event-page .dataTables_scrollBody {
        max-height: calc(100vh - 210px);
    }
    .custom-table .dataTables_scroll .dataTables_scrollBody {
        max-height: calc(100vh - 306px);
    }
    .po-allocation-content .dataTables_scrollBody, .account-content .dataTables_scrollBody {
        max-height: calc(100vh - 335px);
    }
    #service-payments-table_wrapper .dataTables_scrollBody {
        max-height: calc(100vh - 365px);
    }
    body .select2-container-multi .select2-choices,  body .select2-container .select2-selection--multiple{
        font-size: 12px;
        border: 1px solid #707070;
        border-radius: 5px;
        height: auto !important;
        padding: 8px 5px !important;
        background-image: none !important;
        overflow-y: auto;
        min-height: 50px;
        max-height: 50px;
    }
    body .select2-container-multi .select2-choices .select2-search-field,  body .select2-container .select2-selection--multiple li.select2-search{
        margin: 0;
        padding: 2px 0 0;
        white-space: nowrap;
    }
    body .select2-container-multi .select2-choices .select2-search-field input,  body .select2-container .select2-selection--multiple li.select2-search input{
        padding: 0;
        margin: 0;
    }
    .daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
        border: 2px solid var(--font-color-theme) !important;
    }
    .select2-container-multi .select2-choices .select2-search-field input, .select2-container .select2-selection--multiple li.select2-search input {
        padding: 0 !important;
        margin: 0px 0 !important;
    }
        .form-control::placeholder {
        color: #bbb !important;
        font-weight: 400 !important;
        letter-spacing: .4px  !important;
    }
    body .select2-results li {
        list-style: none;
        display: list-item;
        background-image: none;
        padding: 4px;
        font-weight: 400 !important;
        font-size: 12px;
    }
    body .select2-results .select2-highlighted {
        background: var(--primary) !important;
        color: var(--font-color-theme);
    }
    .select2-drop-active {
        border: 1px solid var(--font-color-theme) !important;
        border-top: 0;
    }

    .logo .ep-logo-big{
        width: 95px;
    }
    body .page-link:focus {
        z-index: 2;
        outline: 0;
        box-shadow: none;
        color: #000;
    }
    body .sidebar .nav li a, body .sidebar .nav li .dropdown-menu a {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        -ms-transition: none;
        transition: none;
    }

    td.td-actions {
        white-space: nowrap;
    }

    .orange:not(.greyout){
        background-color: rgba(243,199,118,0.4) !important
    }

    .yellow{
        background-color: rgba(248, 232, 3, 0.35) !important
    }

    .blue{
        background-color: rgba(140,188,236,0.4) !important;
    }
    table.tracking-table tr.full-row.backorderfullrow th.sticky-row, table.tracking-table tr.full-row.backorderfullrow td.fullrowsection {
        /*border-top: 3px solid  #f0cb86 !important;*/
        background: #f0cb86;
        color: var(--font-color-theme) !important;
    }
    table.tracking-table tr.backorderfullrow th.sticky-row,
    table.tracking-table tr.projectionfullrow th.sticky-row {
        border-right: 2px solid #000 !important;
    }
    table.tracking-table tr.full-row.backorderfullrow-last th.sticky-row, table.tracking-table tr.full-row.backorderfullrow-last td.fullrowsection {
        /*border-top: 2px solid  #f0cb86 !important;*/
        border-top: 2px solid  transparent !important;
        height: 0px !important;
        padding: 0 !important;
    }

    table.tracking-table tr.full-row.projectionfullrow th.sticky-row, table.tracking-table tr.full-row.projectionfullrow td.fullrowsection {
        /*border-top: 2px solid #4da48c !important;*/
        background: #4da48c;
        color: var(--font-color-theme) !important;
    }
    #addProjectionCustomerModal .filter-option-inner-inner {
        font-weight: 400;
    }
    table.tracking-table tr.full-row.projectionfullrow-last th.sticky-row, table.tracking-table tr.full-row.projectionfullrow-last td.fullrowsection {
        /*border-top: 2px solid #4da48c !important;*/
        border-top: 2px solid transparent !important;
    }
    .empty-section th.sticky-row, .empty-section td.fullrowsection{
        padding: 0 !important;
        height: 0px !important;
    }

    .sidebar .sidebar-wrapper>.nav [data-toggle="collapse"]~div>ul>li>a i, .sidebar .sidebar-wrapper .user .user-info [data-toggle="collapse"]~div>ul>li>a i {
        font-size: 24px;
        line-height: 20px;
        width: 30px;
    }

    .col-form-label-left{
        float:left;
        margin-right:10px;
        margin-top:15px;
        margin-bottom:10px;
    }

    .crawler-msg input{
        width:100% !important;
    }

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

    .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
    .show>.btn-light.dropdown-toggle:focus {
        outline: 0px !important;
    }
    .bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
        outline: 0 dotted #333!important;
        outline: 0 !important;
        outline-offset: 0 !important;
    }
    .product-table.dataTable>tbody>tr>td.dataTables_empty {
        padding: 30px 0 20px !important;
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        border-left: 0px;
    }
    table#purchase_order_table thead.text-primary th {
        white-space: nowrap !important;
        width: 100% !important;
        padding: 10px 12px !important;
    }
    li.selected.active a.dropdown-item.selected.active {
        background: var(--primary);
        color: var(--font-color-theme);
    }
    .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu a:hover, .dropdown-menu a:focus, .dropdown-menu a:active {
        box-shadow: none !important;

    }
    .bootstrap-select .dropdown-menu li {
        margin-bottom: 5px;
    }
    table#usersTable.customer-table-custom.dataTable>tbody>tr> td {
        padding: 8px 14px !important;
    }
    .ripple-container > div{
        background: var(--font-color-theme) !important;
    }
    body .select2-search-choice-close {
        top: 3px;
    }
    .dataTable>tbody>tr>td.dataTables_empty {
        padding: 40px !important;
        font-weight: 600;
        font-size: 18px;
        text-align: center;
    }
    li.paginate_button.page-item {
        margin: 0 2px;
    }

    body  .sidebar, body  .main-panel, body  .sidebar-wrapper {
        -webkit-transition-property: opacity, left, top, height;
        -moz-transition-property: opacity, left, top, height;
        -o-transition-property: opacity, left, top, height;
        transition-property: opacity, left, top, height;
        -webkit-transition-duration: .6s, .6s, .35s;
        -moz-transition-duration: .6s, .6s, .35s;
        -o-transition-duration: .6s, .6s, .35s;
        transition-duration: .6s, .6s, .35s;
        -moz-transition-timing-function: ease-in-out !important;
        -o-transition-timing-function: ease-in-out !important;
        -webkit-transition-timing-function: ease-in-out !important;
        transition-timing-function: ease-in-out !important;
    }
    .content.tracking .tracking {
        left: 15px;
        width: 98%;
        height: calc(100vh - 50px);
        background-size: 140px;
        border-radius: 10px;
    }
    .select2-container-multi .select2-choices li , .select2-container .select2-selection--multiple li {
        font-size: 12px;
    }
    .btn.btn-secondary {
        background: #919191 !important;
        color: var(--font-color-theme);
    }
    .btn.btn-secondary:hover {
        background: var(--primary) !important;
    }
    .less-space .form-group.bmd-form-group.is-filled #sales_avg_period {
        font-size: 14px;
    }

    * body label.col-form-label {
        padding-bottom: 0;
        color: #6c757d;
        font-weight: 400;
    }
    .tracking-card-row-container .track-option {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        margin-bottom: -3px;
    }
    .proceed-further h4 {
        font-size: 24px !important;
        margin-bottom: 24px;
    }
    .stock-table td ,
    .tracking-table td {
        text-align: center;
    }
    span.inner-assignee {
        padding: 6px;
        border-radius: 50%;
        background: var(--primary);
        max-width: 32px !important;
        max-height: 32px !important;
        font-size: 12px;
        font-weight: 500;
        margin: 2px;
    }
    span.inner-assignee:nth-child(2) {
        background: pink;
    }
    span.inner-assignee:last-child {
        background: #facf7e;
    }

    /* Graph CSS */
    .content.graph-content iframe {
        height: calc(100vh - 67px);
        width: 100%;
    }
    body .main-panel .content.graph-content {
        background: var(--font-color-theme);
        padding: 60px 20px 0;
        margin: 0;
        min-height: 100%;
    }

    /* Tracking Sheet - Sales CSS */
    .sales-div{
        margin-top: 17px;
    }
    .sales-div a.btn {
        margin: 8px 0 0;
        height: 50px;
        padding: 0 20px;
        font-size: 15px !important;
        line-height: 50px;
    }
    .pink{
        background: rgba(255,20,147,0.25);
    }


    /* Dashboard Page Graph CSS */
    .row.soon1 .daskboad-page-section{
        min-height: 600px;
    }
    .target .dashboad-page .tab iframe {
        height: 900px !important;
        width: 100%;
        overflow: auto;
        border: none;
    }
    #transaction-counter {
        border-top: 0;
        padding-top: 0;
        margin-top: 0px;
    }
    .dashboad-page .card {
        margin: 0 !important;
    }
    .dashboad-page .card .card-body {
        padding: 0;
        min-height: calc(100vh - 60px);
        overflow: auto;
    }
    .target .dashboad-page .card .card-body .tab-container {
        padding: 0;
    }
    /*.dashboad-page .tab-menu {
        width: auto;
        position: absolute;
        top: 20px;
        z-index: 99999;
        left: 15px;
    }
    .dashboad-page .tab-menu ul {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 60px;
        overflow: hidden;
    }
    .dashboad-page .tab-menu ul li a.tab-a {
        white-space: nowrap;
        border-radius: 0;
        font-size: 12px;
        text-transform: uppercase;
        padding: 8px 20px;
        min-width: 200px;
        background-color: #dededeee;
        color: #737373;
    }
    .dashboad-page .tab-menu ul li a.tab-a:hover, .dashboad-page .tab-menu ul li a.tab-a.active-a {
        color: var(--font-color-theme);
        background-color: var(--primary);
    }*/
    body .main-panel>.content.dashboard-target{
        min-height: calc(100% - 50px);
        margin-top: 50px;
    }


    /** NEW SELECT2 CSS FOR VERSION 4.0 */

    body .select2-results li.select2-results__option {
        padding: 7px 9px 7px;
        color:#111;
        margin-top: 4px;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected]{
        background-color: var(--primary) !important;
    }

    #select2-grouppos-results .select2-container {
        min-width: 400px;
    }
    
    #select2-grouppos-results .select2-results__option {
        padding-right: 20px;
        vertical-align: middle;
    }
    

    #select2-grouppos-results li.select2-results__option[id*="select2-grouppos-result-"]:before {
        content: "";
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        border: 2px solid #999999;
        border-radius: 4px;
        background-color: var(--font-color-theme);
        margin-right: 10px;
        vertical-align: middle;
    }
    
    #select2-grouppos-results .select2-results__option[id*="select2-grouppos-result-"][aria-selected=true]:before {
        font-family:fontAwesome;
        content: "\f00c";
        color: var(--font-color-theme);
        background-color: #999999;
        border: 0;
        display: inline-block;
        padding-left: 3px;
    }
    
    /* Tracking Sheet PopUp Graph - CSS */
    ul.select2-results__options[id*="select2-graphCategorySkus"] li.select2-results__option[id*="select2-graphCategorySkus"]:before,
    ul.select2-results__options[id*="select2-reorder_categories"] li.select2-results__option[id*="select2-reorder_categories"]:before,
    ul.select2-results__options[id*="select2-reorder_sku"] li.select2-results__option[id*="select2-reorder_sku"]:before{
        content: "";
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        border: 2px solid #999999;
        border-radius: 4px;
        background-color: var(--font-color-theme);
        margin-right: 10px;
        vertical-align: middle;
    }
    
    ul.select2-results__options[id*="select2-graphCategorySkus"] .select2-results__option[id*="select2-graphCategorySkus"][aria-selected=true]:before,
    ul.select2-results__options[id*="select2-reorder_categories"] .select2-results__option[id*="select2-reorder_categories"][aria-selected=true]:before,
    ul.select2-results__options[id*="select2-reorder_sku"] .select2-results__option[id*="select2-reorder_sku"][aria-selected=true]:before{
        font-family:fontAwesome;
        content: "\f00c";
        color: var(--font-color-theme);
        background-color: #999999;
        border: 0;
        display: inline-block;
        padding-left: 3px;
    }
    
    #select2-grouppos-results .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: var(--font-color-theme);
    }
    
    #select2-grouppos-results .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #eaeaeb;
        color: #272727;
    }
    
    #select2-grouppos-results .select2-container--default .select2-selection--multiple {
        margin-bottom: 10px;
    }
    
    #select2-grouppos-results .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
        border-radius: 4px;
    }
    
    #select2-grouppos-results .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #999999;
        border-width: 2px;
    }
    
    #select2-grouppos-results .select2-container--default .select2-selection--multiple {
        border-width: 2px;
    }
    
    #select2-grouppos-results .select2-container--open .select2-dropdown--below {
        
        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    
    }

    /* for others select 2 v4 */
    .select2-dropdown{
        z-index: 9999 !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice{
        padding: 3px 5px 3px 6px !important;
        margin: 3px 0 3px 5px;
        position: relative;
        line-height: 13px;
        color: #333 !important;
        cursor: default;
        border: 1px solid #aaa;
        border-radius: 3px;
        background-color: #e4e4e4;
        background-image: linear-gradient(to bottom,#f4f4f4 20%,#f0f0f0 50%,#e8e8e8 52%,#eee 100%);
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
        font-size: medium;
        position: relative;
        top: 1px;
    }

    body .select2-container .select2-selection--multiple{
        padding: 3px 5px !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered{
        position:relative;
        margin-top:2px !important;
    }

    body .select2-container-multi .select2-choices .select2-search-field, body .select2-container .select2-selection--multiple li.select2-search {
        padding: 6px 0 0 !important;
    }

    /* Search SO */
    .select2-container--default .select2-selection--single[aria-labelledby='select2-attachsos-container'],
    .select2-container--default .select2-selection--single[aria-labelledby='select2-initialselect-container']
    {
        padding: 6px 5px !important;
        min-height: 40px !important;
        margin-top: 10px !important;
    }
    .select2-container--default .select2-selection--single[aria-labelledby='select2-attachsos-container'] #select2-attachsos-container .select2-selection__placeholder,
    .select2-container--default .select2-selection--single[aria-labelledby='select2-initialselect-container'] #select2-initialselect-container .select2-selection__placeholder
    {
        color: #666 !important;
        font-size: small !important;
    }
    .range-date-allocate .select2-selection__placeholder 
    {
        color: #353535 !important;
        font-size: small !important;
    }
    .range-date-allocate .select2-selection__arrow b {
        display: none !important;
    }
    .select2-container .select2-selection--single .select2-selection__rendered{
        padding-top: 2px;
    }
    .range-date-allocate .select2-container .select2-selection--single .select2-selection__rendered{
        padding-top: 4px;
    }
    .select2-container--default .select2-selection--single[aria-labelledby='select2-attachsos-container'] #select2-attachsos-container,
    .select2-container--default .select2-selection--single[aria-labelledby='select2-initialselect-container'] #select2-initialselect-container 
    {
        font-size: small !important;
    }
    .select2-container--default .select2-selection--single[aria-labelledby='select2-attachsos-container'] .select2-selection__arrow,
    .select2-container--default .select2-selection--single[aria-labelledby='select2-initialselect-container'] .select2-selection__arrow
    {
        top: 17px !important;
    }

    /* Hide non Shipment Group PO */
    .hidepoline{
        display: none !important;
    }

    .PoForm{
        margin-bottom : 0;
    }

    .select2-container.select2-container--open {
        width: auto !important;
    }

    .account-sel .select2-container.select2-container--open {
        width: 100% !important;
    }

    .accounts-filter .select2-container.select2-container--open,
    .allocation-filter .select2-container.select2-container--open
    {
        width: 100% !important;
    }

    .datatable_supplier .select2-container.select2-container--open,
    .datatable_service .select2-container.select2-container--open,
    .category-custom .select2-container.select2-container--open,
    .reorder-custom .select2-container.select2-container--open,  
    .modal-body .select2-container.select2-container--open {
        width: 100% !important;
    }
    /* Wrap Content in reorder select options */
    .reorder-custom .select2-container .select2-selection--multiple .select2-selection__rendered{
        white-space:normal !important;
    }

    #supplier-payments-table .ex-factory-date{
        min-width: 145px;
    }
    #supplier-payments-table .comm-inv{
        min-width: 170px
    }
    #supplier-payments-table .supp-sku{
        min-width: 170px
    }
    #supplier-payments-table .PO_Number{
        min-width: 120px;
    }
    #supplier-payments-table .supp-po-date{
        min-width: 100px;
    }
    .supplier-payment-card-body .dataTables_scrollBody{
        max-height: calc(100vh - 375px);
    }

    /* PO Number Rename  */
    .rename_po_number{
        cursor: pointer;
    }

    .po_main .rename_po_number{
        display: none;
    }

    td.first-section >span i{
        font-size: 14px;
    }

    table.cus-table tr td:first-child span.po_number_span {
        width: 100px;
    }

    /*.split_po_data.hidesplit{
        display : block !important;
    }*/
    a.split_po_data{
        display: none !important;
    }
    .split_po_data_multiple.hidesplit_multiple{
        display : block !important;
    }
    body .sidebar .nav li.active>a, body .sidebar .nav a.nav-link.pop-over {
        margin: 0;
        padding: 5px 12px;
        border-radius: 4px;
        opacity: 1;
        border-left: 0;
        border-bottom: 0;
        display: flex;
    }
    body .sidebar .nav li.li-logout>a, body .sidebar ul.nav.alarm-parent-nav li.active>a, body .sidebar ul.nav.alarm-parent-nav a.nav-link.pop-over{
        padding: 5px 7px !important;
    }
    body .sidebar .nav {
        margin: 0;
        display: block;
    }
    body .sidebar .nav li.active>a,
    body .sidebar .nav li.parent-active>a,  
    body .sidebar .nav li.active>a i,
    body .sidebar .nav li.parent-active>a i {
        color: var(--font-color-theme);
    }
    body .sidebar[data-color="orange"] li.active>a {
        background-color: transparent;
        color: var(--font-color-theme);
    }
    .sidebar .nav li:first-child>a {
        margin: 0;
    }
    body .sidebar .nav li.active>a, 
    body .sidebar .nav li.parent-active>a, 
    body .sidebar .nav li.active>a i,
    body .sidebar .nav li.parent-active>a i {
        color: var(--font-color-theme);
    }
    .sidebar .nav i {
        color: #94A3B8;
    }
    body .sidebar .nav.alarm-parent-nav {
        margin-top: 4px;
        display: block;
        overflow: hidden;
        overflow-y: auto;
        height: calc(100vh - 340px);
    }
    .sidebar .nav p {
        font-size: 12px;
    }
    /* Theme toggle button css */
    .togglebutton label input[type=checkbox]:checked+.toggle {
        background-color: var(--primary);
    }
    .switch-select{
        width: auto;
    }
    /* Sales button css */
    @media screen and (max-width: 1900px){
        body .category-custom .btn.btn-rose {
            padding: 0 4px !important;
            font-size: 14px !important;
            width: 100%;
        }
        .apply-btn button.mybtn.btn.btn-rose {
            font-size: 14px !important;
        }
        body .category-custom .sales-div {
            padding-left: 5px;
        }
        body .category-custom .apply-btn {
            padding-right: 5px;
        }
    }
    @media screen and (max-width: 1400px){
        body .category-custom .btn.btn-rose, .apply-btn button.mybtn.btn.btn-rose {
            font-size: 12px !important;
        }
    }

    .card {
        box-shadow: none;
    }
    body .sidebar .nav li.nav-item.active a.nav-link.pop-over,
    body .sidebar .nav li.nav-item.parent-active a.nav-link.pop-over.droplink
    {
        opacity: 1;
        background: var(--primary);
    }

    .sidebar .nav li:hover>a, .sidebar .nav li .dropdown-menu a:hover, .sidebar .nav li .dropdown-menu a:focus, .sidebar .nav li.active>[data-toggle="collapse"] {
        background-color: var(--primary);
        color: var(--white-color);

    }
    .sidebar .nav li:hover>a i {
        color: var(--white-color);
    }
    /* li.nav-item.failed-alarms-tab .collapse.show {
        padding: 10px 0 0px 0;
        margin: 4px 4px 0px 20px;
    } */
    li.nav-item.failed-alarms-tab .collapse.show li.nav-item a i{
        font-size: 20px;
        width: auto;
    }
    li.nav-item.failed-alarms-tab .collapse.show li.nav-item a span{
        font-size: 12px;
    }
    li.nav-item.failed-alarms-tab .collapse.show ul.nav {
        margin: 0px;
    }

    li.nav-item.failed-alarms-tab .collapse.show li.nav-item {
        border-bottom: 1px solid #1a2337;
    }
    li.nav-item.failed-alarms-tab .collapse.show li.nav-item a i, li.nav-item.failed-alarms-tab .collapse.show li.nav-item a span {
        color: var(--white-color) !important;
    }
    /* body.hidemenu .sidebar .sidebar-wrapper h4 {
        display: none;
    } */
    .collapse.show {
        margin-top: 10px;
    }
    /* body .sidebar .nav li.nav-item a.nav-link.pop-over {
        background: hsl(0deg 0% 95% / 33%);
    } */
    ul.nav.nav-pills.alarm-home-tabs li a.nav-link.active {
        border-color: var(--primary);
        color: var(--primary);
        background: #00A88E29 0% 0% no-repeat padding-box;
    }
    .sidebar .sidebar-background {
        background: #0F172A 0% 0% no-repeat padding-box;
        border: 2px solid #2A3243;
    }
    .sidebar .sidebar-wrapper {
        background: #0F172A 0% 0% no-repeat padding-box;
        border-right: 2px solid #2A3243;
        color: #94A3B8;
    }
    .sidebar .logo {
        background: #0F172A 0% 0% no-repeat padding-box;
        border-right: 2px solid #2A3243;
    }
    .sidebar .nav li.active>a, 
    .sidebar .nav li.active>a i, 
    .sidebar .nav li.active>a p {
    color: #94A3B8;
    opacity: 1;
    }
    .sidebar .nav li.active>a, .sidebar .nav li.active>a i, .sidebar .nav li.active>a p {
        color: #fff;
        opacity: 1;
    }
    .sidebar-headings {
        padding: 0 12px;
        margin-top: 15px;
    }

    .sidebar-headings h4 {
        font-size: 15px;
        margin: 10px 0;
    }

    .sidebar::-webkit-scrollbar {
        width: 5px;
    }
    
    ::-webkit-scrollbar {
        width: 5px;
    }
    ::-webkit-scrollbar-thumb {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        background: #6d6d6d; 
    }
    ::-webkit-scrollbar-track {
        background-color: #ebebeb;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

  
    .dataTables_scroll .dataTable>thead>tr>th {
        padding: 10px 20px !important;
        font-weight: 600;
        background: #0f172b;
        color: #fff;
    }
    .datatable_cover .dataTable>thead>tr>th{
        padding: 10px 20px !important;
        font-weight: 600;
        background: #0f172b;
        color: #fff;
        position: sticky;
        top: 0;
        z-index: 999;
        height: 100% !important;
        border-left: 1px solid #e8e8e8 !important;
    }
    .sidebar .nav .nav-item>a img {
        margin-right: 17px;
        padding-left: 3px;
        padding-right: 2px;
        max-width: 26px;

    }
    .sidebar-wrapper .nav li.nav-item.li-logout {
        position: absolute;
        bottom: 48px !important;
        left: 0;
        background: #1e293b;
        width: 100%;
        z-index: 99999;
        margin: 0 !important;
       
    }
    body.hidemenu .sidebar .nav li.li-logout a.nav-link.pop-over p{
        display: none;
       
    }
    #supplier-payments-table.dataTable>tbody>tr>td:first-child {
        min-width: 150px;
    }
    body .sidebar .nav li.li-logout a.nav-link.pop-over{
        margin-left: 9px;
    }
    .sidebar-wrapper .nav li.nav-item.li-users{
        bottom: 45px !important;
    }
    .sidebar-wrapper .nav li.nav-item.li-toll-users{
        bottom: 45px !important;
    }
    .li-logout a.nav-link i{
        padding: 0 10px;
        margin-right: 20px;
    }
    .sidebar .nav .nav-item.active>a img, .sidebar .nav li:hover>a img{
        filter: contrast(7);
    }
    ul.nav.demo {
        height: calc(99vh - 210px);
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .go-to-login {
        text-align: right;
        margin-top: 12px;
        margin-bottom: 0;
    }
    body .sidebar .nav.alarm-parent-nav {
        margin-top: 4px;
        display: block;
        overflow: hidden;
        overflow-y: auto;
    }
    body .sidebar .nav li {
        margin: 0 10px 10px !important;
        display: list-item;
        overflow-x: hidden;
    }
    body .sidebar .nav.bottom-fixed {
        position: fixed;
        bottom: 0;
        background: var(--font-color-theme);
        overflow: auto;
        width: 260px;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    table.supplier_tracking_sheet, table.supplier_tracking_sheet th, table.supplier_tracking_sheet td {
        border: 1px solid #eeeeee;
        border-collapse: collapse;
    }
    select.form-control:not(select.custom-select) {
        background-color: var(--card-theme-color);
        color: var(--font-color);
        padding: 0 20px 0 10px !important;
        border: 1px solid var(--main-bg-color);
        background-color: var(--main-bg-color);
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23424242%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A) !important;
        background-position: right 8px center !important;
        background-repeat: no-repeat;
        background-size: auto 18px !important;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
    }
    body .sidebar .nav.alarm-parent-nav li.nav-item.active .collapse.show li.nav-item.active a.nav-link.pop-over i, body .sidebar .nav.alarm-parent-nav li.nav-item.active .collapse.show li.nav-item.active a.nav-link.pop-over span {
        color: var(--primary) !important;
    }
    body .sidebar .nav.alarm-parent-nav li.nav-item.active a.nav-link.pop-over {
        background: transparent;
        /* color: var(--primary); */
    }
    li.nav-item.failed-alarms-tab .collapse.show li.nav-item.active {
        border-right: 2px solid #34a88e;
    }   
    /* Login css */
    .login-card-body{
        padding: 50px;
    }

    .sidebar ul.nav.heading-ul p {
        margin-left: 17px;
    }
    .sidebar ul.nav.heading-ul img {
        margin-right: 0 !important;
    }

    /* DASHBOARD TABS START */
    ul.nav.dashboard-stock {
        margin: 0 0 !important;
        justify-content: center;
        clear: both;
        padding: 12px 0 !important;
    }
    ul.nav.dashboard-stock li a.tab-a.active-a {
        border-color: var(--primary);
        color: var(--primary);
        background: #00A88E29 0% 0% no-repeat padding-box;
    }
    ul.nav.dashboard-stock li a.tab-a.active-a {
        border-color: var(--primary);
        color: var(--primary);
        background: #00A88E29 0% 0% no-repeat padding-box;
    }
    ul.nav.dashboard-stock li a {
        font-weight: 500;
        font-size: 18px;
        background: transparent;
        padding: 6px 20px;
        border: 1px solid transparent;
        margin: 0 15px 0 0;
        color: var(--secondary-theme);
        border-radius: 5px;
    }
    /* DASHBOARD TABS END */

    .login-card-body .text-danger {
        color: #f44336;
        text-align: left;
        font-weight: 400;
    }
    .login-card-body .text-danger strong {
        font-weight: 500;
        font-size: 14px;
    }

     /* Eye on Password */
    .passwordfiled {
        position: relative;
    }
    span.eye {
        position: absolute;
        right: 5px;
        top: 12px;
        cursor: pointer;
    }

    /* Remove Background Image */
    input.form-control[type="text"], 
    .is-focused input[type="text"].form-control,
    input.form-control[type="email"], 
    .is-focused input[type="email"].form-control,
    input.form-control[type="number"], 
    .is-focused input[type="number"].form-control{
        background-image : none !important;
    }
    
    /* Reorder Tool CSS */
    body .main-panel>.reordertoolsection{
        min-height : calc(100vh - 50px) !important;
        margin-top: 50px !important;
    }
    #reordertable_wrapper .dataTables_scrollBody{
        max-height: calc(100vh - 220px) !important;
    }
    .reorder-table-cover #reordertable_wrapper{
        max-width: 100%;
    }
    body .dataTable .reorder-checkbox-column {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        min-height: 82px;
        width: 140px;
        word-break: break-word;
    }
    .reorder-checkbox-column .sku-status-icon {
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        display: inline-block;
        line-height: normal;
        font-size: 0;
        height: 4px;
        /*max-width: 25px;*/
    }
    input.reorder_chkbox {
        margin-right: 5px;
    }
    .custom-fg .custom-fl{
        position : relative;
        top: 0;
    }
    .recommendation-filter{
        margin-left:5px;
    }
    .recommendation.bg-warning{
        background-color: orange !important;
    }

    /* Trending Page Graph */
    a.sku-graph{
        cursor: pointer;
    }
    a.sku-graph:hover{
        color: grey;
    }
    a.sku-graph span{
        font-size: 18px;
    }

     /* Tracking Sheet Graph */
     .graph-tracking-body .tab{
        display: none;
     }
     .graph-tracking-body .tab-active{
        display: block;
     }
    .graph-category-cover{
        position: absolute;
        top: 37px;
        right: -9px;
        z-index: 9999;
    }
    button.graph-category-cover{
        position: relative;
        top: 5px !important;
    }
    button.graph-category-cover a.btn-graph {
        margin: 8px 0 0;
        height: 50px;
        padding: 0 20px;
        font-size: 15px !important;
        color: var(--font-color-theme);
        background-color: var(--primary);
        border-color: var(--primary);

    }
    button.graph-category-cover a.btn-graph:hover{
        color: var(--font-color-theme);
        background-color: #4a5564 !important;
        border-color: #4a5564 !important;
    }
    button.graph-category-cover a.btn-graph {
        background: transparent !important;
    }
    .reorder-category-graphs.graph-category-cover{
        position: absolute;
        top: 10px;
        right: -10px;
        z-index: 999;
    }
    .allgreyout{
        background: #ccc !important;
        color: transparent;
    }
    .card.tracking-card.stock-forecast{
        padding: 0px;
        margin-top: 0px !important;
    }
    .tracking-graph-view{
        margin-right: 0px;
    }
    .table-section-row-graph{
        padding-left: 15px !important;
    }
    table.tracking-table.tracking-table-graphview tr th.sticky-row, 
    table.tracking-table.tracking-table-graphview tr td.sticky-row{
        left: 0px !important;
    }
    table.bordered.tracking-table-graphview td.left-border, table.bordered.tracking-table-graphview th.left-border{
        /*border-right: 2px solid #000 !important;*/
    }
    table.bordered.tracking-table-graphview td.border-bottom, table.bordered.tracking-table-graphview th.border-bottom{
        border-bottom: 2px solid #000 !important;
    }
    .custom-weeks-section .label-cover{
        padding:0px
    }
    .custom-weeks-section label{
        vertical-align:text-top;
        padding-top: 0px;
        position: relative;
        left: -28px;
    }
    .custom-weeks-section .data-cover{
        padding-left:4px
    }
    .custom-weeks-input{
        position: relative;
        left: 30%;
        width: 100px !important;
        text-align: center;
    }
    .tracking-graph-sku-section{
        margin-top: 20px;
    }
    .tracking-graph-modal-body{
        padding-top:0px;
    }
    .tracking-graph-modal-body .row{
        margin-left: -10px;
    }
    /*.tracking-table tbody tr th.sticky-header::before {
        content: "";
        position: absolute;
        left: -1px;
        top: -1px;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        background: #eeeeee;
        z-index: -1;
        border: 2px solid #000;
    }
    .tracking-table tbody tr th.sticky-header {
        border: 0 !important;
        padding-left: 5px;
        padding-right: 5px;
    }*/
    /* centered columns styles */
    .row-centered {
        text-align:center;
    }
    .sku-status-icon{
        font-weight:bold;
        font-size:50px;
    }
    .col-centered {
        display:inline-block;
        float:none;
        /* reset the text-align */
        text-align:center;
        /* inline-block space fix */
    }
    .avgwklysales.alert span{
        max-width: 100%;
    }
    .row.sticky-form-div {
        /*background: var(--font-color-theme);*/
        /*position: sticky;*/
        top: 50px;
        z-index: 999;
    }
    .container-reorder{
        background: var(--font-color-theme);
        margin-left:0;
        margin-right:0;
    }
    .reset-wsa-cover{
        padding-top: 10px;
    }
    .tracking-graph-modal-body .card{
        margin-bottom : 5px !important;
    }
    .tracking-apply.apply-btn , .tracking-sales-apply.apply-btn{
        padding-right: 0;
    }
    .tracking-sales-apply.apply-btn{
        width: fit-content;
        margin-left:20px;
    }
    .graph-category-cover a:focus , .reorder-checkbox-column a:focus{
        color: grey;
    }
    .loading-graph-text{
        padding-top: 40px;
    }
    .custom_status_reorder{
        height: 30px !important;
        position: relative;
        top: 16px;
    }
    #reordertable_filter label span{
        margin-left: 3px;
        margin-right: 5px;
    }
    .reorder-table-cover button.custom_print {
        height: 30px;
        padding: 0 20px 0;
        position: relative;
        top: 7px;
        padding-left: 8px;
        padding-right: 8px;
    }
    .reordercover #reordertable_wrapper .dataTables_scrollBody {
        max-height: calc(100vh - 320px) !important;
    }
   .btn.btn-secondary.custom_print:focus, button.custom_print_proposedcsv:focus, button.custom_print_filtercsv:focus{
        color: white !important;
    }
    .reorder-table-cover .dataTables_filter {
        width: calc(100% - 80px);
        display: inline-flex;
        flex-direction: row-reverse;
        align-items: center;
        flex-wrap: wrap;
    }
    .reorder-table-cover .dataTables_filter>label {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        width: 35%;
        margin: 0;
    }
    .reorder-table-cover .dataTables_filter>label select.form-control {
        height: 30px !important;
        position: relative;
        top: 4px;
    }
    .reorder-table-cover .reorder-upper-form {
        width: 65%;
        position: static;
    }
    .reorder-table-cover .reorder-upper-form .reorder-modal-body .row>div {
        max-width: initial;
        flex: 0 0 auto;
        width: 20%;
    }
    .reorder-table-cover .custom_status_reorder {
        top: 0;
        font-size: 14px !important;
    }
    .reorder-table-cover .update-reordert-submit {
        top: 0;
        margin: 0;
    }
    .reorder-table-cover .dt-buttons.btn-group {
        float: right;
        margin: 0 0 20px;
    }
    .reorder-table-cover .form-group {
        margin: 0 !important;
    }
    .reorder-table-cover button.custom_print:hover, button.custom_print_proposedcsv:hover, button.custom_print_filtercsv:hover{
        color: #fff !important;
    }
    .reorder-common.description-col{
        min-width: 200px;
    }
    .container-reorder .reorder-category-form .row {
        justify-content: flex-end;
    }
    .trackingform .category-custom .less-space-1.col-sm-1 {
        flex: 0 0 auto;
        max-width: 13%;
        padding-left: 0;
    }
    .trackingform .category-custom button.graph-category-cover {
        white-space: inherit;
        height: 50px;
        margin: 20px 0 0;
    }
    .trackingform .category-custom button.graph-category-cover a.btn-graph {
        padding: 0;
    }
    .trackingform .category-custom .less-space-1.col-sm-1.tracking-apply {
        max-width: 8.333333%;
    }
    .trackingform .category-custom .less-space.wsap {
        flex: 0 0 auto;
        max-width: 10%;
        padding-right: 0;
    }
    .trackingform .category-custom .less-space.wsap.pls-sel{
        max-width: 41.666667% !important;
    }
    .trackingform .category-custom.col-sm-12.row label.col-form-label {
        white-space: nowrap;
    }
    .tracking-apply.apply-btn.pls-sel{
        margin-left : 0px !important;
    }
    button.consolidate-graph-btn{
        color: var(--font-color-theme);
        background-color: #4a5564 !important;
        border-color: #4a5564 !important;
        opacity : 0.7 !important;
    }
    .btn.btn-rose.consolidate-graph-btn:hover{
        opacity : 1 !important;
    }
    .graph-error{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: -15px;
        margin-top: 5px
    }
    .no-data-msg{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .span_week_qty{
        position: relative;
        left: -40px;
        font-weight: 400;
    }

    select.form-control.dear_accountype_filter{
        width: auto;
        margin-left: 5px;
        height: 28px !important;
        cursor: pointer;
    }

    select.form-control.dear_accountype_filter_reorder{
        width: auto;
        display: inline;
    }

    form#dear-account-filter-form-reorder{
        display: inline;
    }

    /* Chrome, Safari, Edge, Opera */
    input.reorderinput::-webkit-outer-spin-button,
    input.reorderinput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }

    /* Firefox */
    input.reorderinput {
    -moz-appearance: textfield;
    }

    .required-fields {
        color: red;
    }

    p.custerror {
        color: red;
        margin-top: 10px;
        margin-bottom: 5px;
    }

    /* PO Manager 5 section top header */
    table.section-header, table.section-header th, table.section-header td,
    table.accounts-section-header, table.accounts-section-header th, table.accounts-section-header td,
    table.po_allocation-section-header, table.po_allocation-section-header th, table.po_allocation-section-header td
    {
        border: 1px solid #999999;
        border-collapse: collapse;
    }

    table.section-header th, table.accounts-section-header th, table.po_allocation-section-header th{
        text-align: center;
        padding: 5px !important;
        color: var(--bg-color);
        font-size: medium;
    }

    /*.th-po { background-color: #4caf50; font-size:20px; }
    .th-kd { background-color: #ffa500ad; font-size:20px; }
    .th-sd { background-color: #0000ff73; font-size:20px; }
    .th-re { background-color: #a6d04d; font-size:20px; }
    .th-so { background-color: #ef8698; font-size:20px; }*/

    .th-po, .th-kd, .th-sd, .th-re, .th-so, .th-acct, .th-allo{
        background-color: #00A88E; 
        font-size: 20px;
        border: 1px solid white !important;
    }

    a.expa-coll{
        background-color: transparent; 
        color: var(--bg-color); 
        border: 1px solid var(--bg-color);
        padding: 0px;
        margin: 0;
        padding-left: 5px;
        padding-right: 5px;
    }

    a.expa-coll:hover{
        background-color: transparent !important; 
        color: var(--bg-color) !important; 
        border: 1px solid var(--bg-color) !important;
    }

    .section-tbody, .account-section-tbody, .po_allocation-section-tbody{
        line-height: 0px;
        visibility: hidden;
    }
    .section-tbody td, .account-section-tbody td, .po_allocation-section-tbody td{
        padding: 0px !important;
    }

    input.datepicker.reminder-field, td.reminder-section input.datepicker, input.datepicker.account-reminder-field{
        width: calc(100% - 25%);
    }
    table#purchase_order_table td:last-child {
        overflow: inherit;
    }
    .lockpo-picker{
        z-index: 90001 !important;
        margin-top: -5px !important;
    }
    .accounts_table thead tr th, .accounts_table tbody tr td {
        min-width: 222px !important;
        max-width: 222px !important;
    }
    table#accounts_table td { 
        white-space: initial;
        word-wrap: break-word;
    }
    div#accounts_table_wrapper .dataTables_scrollBody {
        border-bottom: 1px solid #e8e8e8;
    }
   table#accounts_table thead.text-primary {
        position: sticky;
        top: 36px;
        z-index: 99;
        
    }
    table#po_allocation_table thead.text-primary {
        position: sticky;
        top: 36px;
        z-index: 999;    
    }
    table#po_allocation_table thead.text-primary th:first-child {
        top: 0;
        left: 0;
        position: sticky;
        z-index: 9;
    }
    .date-range-picker.form-control[readonly] {
        background-color: transparent;
    }
    /* Accounts Section : sortion to date columns */
    table.accounts_table > thead > tr > th[class*="sort"]:before,
    table.accounts_table > thead > tr > th[class*="sort"]:after {
        content: "" !important;
    }
    table.accounts_table > thead > tr > th[class*="sort"][attr-sort="yes"]:before{
        content: "\2191" !important;
    }
    table.accounts_table > thead > tr > th[class*="sort"][attr-sort="yes"]:after {
        content: "\2193" !important;
    }
    /* Accounts Section : sortion to date columns */
    
    /* dropzone in po manager */
    .mydropzon {
        min-height: 150px;
        border: 2px solid rgba(0, 0, 0, 0.3);
        background: white;
        padding: 20px 20px;
      }
      
      .mydropzon.dz-clickable {
        cursor: pointer;
      }
      
      .mydropzon.dz-clickable * {
        cursor: default;
      }
      
      .mydropzon.dz-clickable .dz-message, .mydropzon.dz-clickable .dz-message * {
        cursor: pointer;
      }
      
      .mydropzon.dz-started .dz-message {
        display: none;
      }
      
      .mydropzon.dz-drag-hover {
        border-style: solid;
      }
      
      .mydropzon.dz-drag-hover .dz-message {
        opacity: 0.5;
      }
      
      .mydropzon .dz-message {
        text-align: center;
        margin: 2em 0;
      }
      
      .mydropzon .dz-preview {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin: 16px;
        min-height: 100px;
      }
      
      .mydropzon .dz-preview:hover {
        z-index: 1000;
      }
      
      .mydropzon .dz-preview:hover .dz-details {
        opacity: 1;
      }
      
      .mydropzon .dz-preview.dz-file-preview .dz-image {
        border-radius: 20px;
        background: #999;
        background: linear-gradient(to bottom, #eee, #ddd);
      }
      
      .mydropzon .dz-preview.dz-file-preview .dz-details {
        opacity: 1;
      }
      
      .mydropzon .dz-preview.dz-image-preview {
        background: white;
      }
      
      .mydropzon .dz-preview.dz-image-preview .dz-details {
        -webkit-transition: opacity 0.2s linear;
        -moz-transition: opacity 0.2s linear;
        -ms-transition: opacity 0.2s linear;
        -o-transition: opacity 0.2s linear;
        transition: opacity 0.2s linear;
      }
      
      .mydropzon .dz-preview .dz-remove {
        font-size: 14px;
        text-align: center;
        display: block;
        cursor: pointer;
        border: none;
        color: red;
      }
      
      .mydropzon .dz-preview .dz-remove:hover {
        text-decoration: underline;
      }
      
      .mydropzon .dz-preview:hover .dz-details {
        opacity: 1;
      }
      
      .mydropzon .dz-preview .dz-details {
        z-index: 20;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        font-size: 13px;
        min-width: 100%;
        max-width: 100%;
        padding: 2em 1em;
        text-align: center;
        color: rgba(0, 0, 0, 0.9);
        line-height: 150%;
      }
      
      .mydropzon .dz-preview .dz-details .dz-size {
        margin-bottom: 1em;
        font-size: 16px;
      }
      
      .mydropzon .dz-preview .dz-details .dz-filename {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .mydropzon .dz-preview .dz-details .dz-filename:hover span {
        border: 1px solid rgba(200, 200, 200, 0.8);
        background-color: rgba(255, 255, 255, 0.8);
      }
      
      .mydropzon .dz-preview .dz-details .dz-filename:not(:hover) {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .mydropzon .dz-preview .dz-details .dz-filename:not(:hover) span {
        border: 1px solid transparent;
      }
      
      .mydropzon .dz-preview .dz-details .dz-filename span, .mydropzon .dz-preview .dz-details .dz-size span {
        background-color: rgba(255, 255, 255, 0.4);
        padding: 0 0.4em;
        border-radius: 3px;
      }
      
      .mydropzon .dz-preview:hover .dz-image img {
        -webkit-transform: scale(1.05, 1.05);
        -moz-transform: scale(1.05, 1.05);
        -ms-transform: scale(1.05, 1.05);
        -o-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        -webkit-filter: blur(8px);
        filter: blur(8px);
      }
      
      .mydropzon .dz-preview .dz-image {
        border-radius: 20px;
        overflow: hidden;
        width: 120px;
        height: 120px;
        position: relative;
        display: block;
        z-index: 10;
      }
      
      .mydropzon .dz-preview .dz-image img {
        display: block;
      }
      
      .mydropzon .dz-preview.dz-success .dz-success-mark {
        -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
        -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
        animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      }
      
      .mydropzon .dz-preview.dz-error .dz-error-mark {
        opacity: 1;
        -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
        -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
        -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
        -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
        animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      }
      
      .mydropzon .dz-preview .dz-success-mark, .mydropzon .dz-preview .dz-error-mark {
        pointer-events: none;
        opacity: 0;
        z-index: 500;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        margin-left: -27px;
        margin-top: -27px;
      }
      
      .mydropzon .dz-preview .dz-success-mark svg, .mydropzon .dz-preview .dz-error-mark svg {
        display: block;
        width: 54px;
        height: 54px;
      }
      
      .mydropzon .dz-preview.dz-processing .dz-progress {
        opacity: 1;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        transition: all 0.2s linear;
      }
      
      .mydropzon .dz-preview.dz-complete .dz-progress {
        opacity: 0;
        -webkit-transition: opacity 0.4s ease-in;
        -moz-transition: opacity 0.4s ease-in;
        -ms-transition: opacity 0.4s ease-in;
        -o-transition: opacity 0.4s ease-in;
        transition: opacity 0.4s ease-in;
      }
      
      .mydropzon .dz-preview:not(.dz-processing) .dz-progress {
        -webkit-animation: pulse 6s ease infinite;
        -moz-animation: pulse 6s ease infinite;
        -ms-animation: pulse 6s ease infinite;
        -o-animation: pulse 6s ease infinite;
        animation: pulse 6s ease infinite;
      }
      
      .mydropzon .dz-preview .dz-progress {
        opacity: 1;
        z-index: 1000;
        pointer-events: none;
        position: absolute;
        height: 16px;
        left: 50%;
        top: 50%;
        margin-top: -8px;
        width: 80px;
        margin-left: -40px;
        background: rgba(255, 255, 255, 0.9);
        -webkit-transform: scale(1);
        border-radius: 8px;
        overflow: hidden;
      }
      
      .mydropzon .dz-preview .dz-progress .dz-upload {
        background: #333;
        background: linear-gradient(to bottom, #666, #444);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        -webkit-transition: width 300ms ease-in-out;
        -moz-transition: width 300ms ease-in-out;
        -ms-transition: width 300ms ease-in-out;
        -o-transition: width 300ms ease-in-out;
        transition: width 300ms ease-in-out;
      }
      
      .mydropzon .dz-preview.dz-error .dz-error-message {
        display: block;
      }
      
      .mydropzon .dz-preview.dz-error:hover .dz-error-message {
        opacity: 1;
        pointer-events: auto;
      }
      
      .mydropzon .dz-preview .dz-error-message {
        pointer-events: none;
        z-index: 1000;
        position: absolute;
        display: block;
        display: none;
        opacity: 0;
        -webkit-transition: opacity 0.3s ease;
        -moz-transition: opacity 0.3s ease;
        -ms-transition: opacity 0.3s ease;
        -o-transition: opacity 0.3s ease;
        transition: opacity 0.3s ease;
        border-radius: 8px;
        font-size: 13px;
        top: 130px;
        left: -10px;
        width: 140px;
        background: #be2626;
        background: linear-gradient(to bottom, #be2626, #a92222);
        padding: 0.5em 1.2em;
        color: white;
      }
      
      .mydropzon .dz-preview .dz-error-message:after {
        content: "";
        position: absolute;
        top: -6px;
        left: 64px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #be2626;
      }
    .mydropzon {
        background: white;
        border-radius: 5px;
        border: 2px dashed #00A88E;
        border-image: none;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }
    #uploadDocsModal .modal-dialog{
        max-width: 550px !important;
    } 
    .max-file {
        text-align: center;
    }
    .docs-checkbox input[type="checkbox"]{
        width: auto !important;
    }
    .docs-checkbox {
        text-align: center;
        display: block;
    }
    .docs-checkbox label {
        margin-right: 10px;
    }
    /* Prev Dropzone Images */
    .prev_images {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin: 16px;
        min-height: 100px;
        text-align: center;
    }
    
    .prev_images .drp-img {
        border-radius: 20px;
        overflow: hidden;
        width: 120px;
        height: 120px;
        position: relative;
        display: block;
        z-index: 10;
    }
    .remove-drpimg {
        color: red;
    }
    .remove-drpimg:hover {
        color: red;
        text-decoration: underline;
    }
    .shipdoc-file {
        color:#919191;
        font-size: 120px;
        margin-right: 9px;
        margin-left: 9px;
    }
    .shipdoc-file:hover {
        color:#919191;
    }
    .swal2-container{
        z-index: 19999 !important;
    }
    .drp-name {
        position: absolute;
        border: 1px solid rgba(200, 200, 200, 0.8);
        background-color: rgba(255, 255, 255, 0.8);
        z-index:99;
        word-break: break-all;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        line-height: 1;
        display: none;
    }
    .doc-link {
        color: black !important;
    }
    .prev_images:hover .drp-name {
        display: block;
    }
    .prev_images:hover .doc-link img, .prev_images:hover .doc-link i {
        -webkit-transform: scale(1.05, 1.05);
        -moz-transform: scale(1.05, 1.05);
        -ms-transform: scale(1.05, 1.05);
        -o-transform: scale(1.05, 1.05);
        transform: scale(1.05, 1.05);
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }
    .polock-icon{
        position: absolute;
        left: 2px;
        font-size: 18px;
    }
    .lockusers-label{
        margin-top: 20px;
    }

    table#purchase_order_table td > span.plusClick.lockhide:before, table#purchase_order_table td > span.collapsed.lockhide:after {
        display: none;
    }
    /* Greyout amount and terms of future quarters */
    td[attr-greyout='greyout-section'] input, 
    td[attr-greyout='greyout-section'] select,
    td[attr-greyout='greyout-section'] i.accounts_reminder_rules_modal{
        pointer-events: none;
        background-color: #e9ecef;
        opacity: 1;
    }

    /* Show colour differentiator for EE Products */
    .EE {
        position: relative;
    } 

    .EE::after {
        font-size: 12px;
        font-weight: 800;
        color: #00A88E;
        text-shadow: 0 0 3px #0c685a;
        content: ' *';
        position: absolute;
        transform: translate(-100%, 0);
    }
    .event-page .EE::after, .customer-table-custom .EE::after, .product-table .EE::after, .product-add .EE::after, .reorder-table .EE::after, #supplier-payments-table .EE::after, .supplier_tracking_sheet .EE::after, .supplier-term-table .EE::after{
        transform: translate(-100%, -1px);
    }

    /*.EE::after {
        font-size: 12px;
        font-weight: 800;
        color: #00A88E;
        text-shadow: 0 0 1px #0c685a;
        content: ' *';
        display: inline-block;
        position: relative;
        left: -6px;
        top: -1px;
    }*/

    /* for EE Customer with (DEAR) as suffix(Tracking sheet, Customers Page) */
    .EE_cust::after {
        font-size: 14px;  /*changed this*/
        font-weight: 800;
        color: #00A88E;
        text-shadow: 0 0 3px #0c685a;
        content: ' *';
        position: absolute;
        transform: translate(-723%, 0); /* changed this */
    }


    /* PO Allocation */
    body table.po_allocation_table thead.text-primary th {
        padding: 10px 30px !important;
        background-color: #f5f5f5 !important;
        white-space: nowrap !important;
        color: #333 !important;
        line-height: normal !important;
        text-align: center;
    }
    .account-common{
        display: none;
    }

    .po_allocation_table thead tr th, .po_allocation_table tbody tr td {
        min-width: 220px !important;
    }

    .trans-u {
        text-transform : capitalize;
    }
    .range-date-allocate .select2-container .select2-selection--single{
        height : 40px;
    }
    .range-date-allocate .select2-container--default .select2-selection--single{
        border: solid #707070 1px !important;
    }
    table.po_allocation_table tr td:first-child {
        white-space: normal !important;
        position: sticky !important;
        left: 0;
        background: #f6f8fa;
        z-index: 99;
    }
    /** Supplier Tracking Sheet CSS **/
    .table-responsive.supplier-tracking-table {
        display: block;
        width: 100%;
        max-height: 75vh;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    table.supplier_tracking_sheet thead.text-primary {
        color: var(--font-color) !important;
        background: var(--color-light-white);
        padding: 0;
        position: sticky;
        top: 0;
        z-index: 999999;
    }
    table.supplier_tracking_sheet th {
        min-width: 125px;
    }

    /* Add thick borders across Main header sections to seprate them */
    #purchase_order_table thead tr th.po_section + th:not(.po_section),
    #purchase_order_table tbody tr td.po_section + td:not(.po_section),
    #purchase_order_table thead tr th.shipment_details + th:not(.shipment_details),
    #purchase_order_table tbody tr td.shipment_details + td:not(.shipment_details),
    #purchase_order_table thead tr th.keydate_section + th:not(.keydate_section),
    #purchase_order_table tbody tr td.keydate_section + td:not(.keydate_section),
    #purchase_order_table thead tr th.reminder_section + th:not(.reminder_section),
    #purchase_order_table tbody tr td.reminder_section + td:not(.reminder_section),
    #purchase_order_table thead tr th.so_section + th:not(.so_section),
    #purchase_order_table tbody tr td.so_section + td:not(.so_section),
    #purchase_order_table thead tr th.reminder_section[ot-attr="comment"],
    #purchase_order_table tbody tr td.reminder_section.comment_section,
    #purchase_order_table tbody tr td.reminder_section[attr-first="forborder"],
    #accounts_table thead tr th.accts_so_section + th:not(.accts_so_section),
    #accounts_table tbody tr td.accts_so_section + td:not(.accts_so_section),
    #accounts_table thead tr th.accts_po_section + th:not(.accts_po_section),
    #accounts_table tbody tr td.accts_po_section + td:not(.accts_po_section),
    #accounts_table thead tr th.accts_payment_details_section + th:not(.accts_payment_details_section),
    #accounts_table tbody tr td.accts_payment_details_section + td:not(.accts_payment_details_section),
    #accounts_table thead tr th.accts_dept + th:not(.accts_dept),
    #accounts_table tbody tr td.accts_dept + td:not(.accts_dept),
    #po_allocation_table thead tr th.so__section + th:not(.so__section),
    #po_allocation_table tbody tr td.so__section + td:not(.so__section),
    #po_allocation_table thead tr th.po__section + th:not(.po__section),
    #po_allocation_table tbody tr td.po__section + td:not(.po__section),
    #po_allocation_table thead tr th.pd_section[alloc-attr='alloc_ter1'],
    #po_allocation_table thead tr th.pd_section[alloc-attr='alloc_ter2'],
    #po_allocation_table thead tr th.pd_section[alloc-attr='alloc_ter3'],
    #po_allocation_table thead tr th.pd_section[alloc-attr='alloc_ter4'],
    #po_allocation_table tbody tr td.pd_section[attr-brd="showborder"]
    {
        border-left: 2px solid black !important;
    }

    #accounts_table tbody tr td.accts_payment_details_section[attr-accts-due-date="due-section"],
    #accounts_table tbody tr td.accts_payment_details_section[attr-border="black"] {
        border-right: 2px solid black !important;
    }

    #accounts_table_wrapper .dt-buttons, #po_allocation_table_wrapper .dt-buttons{
        display: none;
    }

    /* Accounts Table Sticky Header */
    table.accounts_table tr td:first-child {
        white-space: normal !important;
        position: sticky !important;
        left: 0;
        background: #f6f8fa;
        z-index: 99;
    }

    table#accounts_table thead.text-primary th:first-child {
        top: 0;
        left: 0;
        position: sticky;
        z-index: 9;
    }

    /* PO Manager Server Side */
    .pomanager-server-side #purchase_order_table_processing {
        position: absolute;
        left: 0;
        top: 0;
        background: #ffffff77;
        z-index: 99999999;
        height: 100%;
        margin: 0 !important;
        border-radius: 0;
        opacity: 0;
    }
    .pomanager-server-side #purchase_order_table_processing i.fa {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 22px;
        color: var(--primary)
    }

       /* PO Manager Server Side */
    #projection-table-section_processing {
        position: absolute;
        left: 0;
        top: 0;
        background: #ffffff77;
        height: 100%;
        border-radius: 0;
    }
    #projection-table-section_processing i.fa {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 22px;
        color: var(--primary)
    }


    ul.dropdown-menu.show.add-scroll {
        height: 95px;
        overflow-y: auto;
    }

    .customer_drop {
        margin: 0px -20px;
    }
    .sales_avg_week {
        margin: 0px -20px;
    }
    .graph_btn {
        margin-left: 2px;
    }
    .projection_btn {
        margin-left: -20px;
    }
    .apply-search {
        margin-left: -20px;
    }
    .sale-history {
        margin-left: -15px
    }
    .sku_quantity {
        height: 50px;
    }
    .add-remove-quantity{
        width: 43px;
        border-radius: 30px !important;
        padding: 12px !important;
    }

    .remove-sku-quantity{
        background-color: #e96258 !important;
        margin-left: 19px;
        position: relative;
        bottom: 5px;
    }
    .add_non_dear{
        font-size: 13px;
        font-weight: bold;
        position: relative;
        left: 604px;
        text-decoration: underline;
    }
    .add_non_dear:hover{
        color: gray;
    }
    .weeks_md {
        margin-left: 10px;
    }
    .weeks_in {
        width: 65px !important;
    }
    #error_message, #error_message_update{
        position: relative;
        right: 197px;
        color: red;
    }

    #weeks_error_message,  #weeks_error_message_update{
        color: red;
        display:block;
        margin:auto auto;
        padding:5px;
        text-align:center;
    }

    #addNDandProjectionCustomerModal{
        z-index: 99999999 !important;
    }
    input.reoccur{
        width: 17px;
        height: 17px;
        position: relative;
        left: 19px;
        top: 14px;
    }
    .add_button {
        position: relative;
        top: -4px;
        left:18px;
    }
    .showmenu .common-btn{
        padding: 0 10px !important;
    }
    .modal-body .proj_input{
        border: 1px solid #707070 !important;
    }
    .projection-modal-footer{
        border-top: 1px solid #80808069 !important;
    }
    #addNewProjectionModal .modal-body{
        padding-top: 10px !important;
    }
    .proj_detail{
        display: flex;
        padding: 25px;
        justify-content: space-evenly;
    }
    .proj_value {
        position: relative;
        top: 6px;
    }
    .projection_popup_btn {
        justify-content: right;
    }
    .projection_popup_btn {
        position: relative;
        left: -35px;
    }
    .projection_update{
        margin-top:10px;
    }
    .proj_data .dataTables_wrapper{
        margin-top: -15px;
    }
    .delete_projection_btn{
        background-color: #e96258 !important;
        margin-right: 5px;
    }
    .modal-body_border input {
        width: 100%;
        border-radius: 4px !important;
        font-size: 15px;
        border: 1px solid white !important;
        box-shadow: none !important;
    }

    .proj-history-reset-div{ 
        /*position: absolute;
        left: 58%;*/
    }

    #viewProjectionDetails table, #viewProjectionDetails th, #viewProjectionDetails td {
        border: 1px solid #d2d2d2;
        border-collapse: collapse;
        padding: 7px !important;
    }
    #viewProjectionHistory table, #viewProjectionHistory th, #viewProjectionHistory td {
        border: 1px solid #D2D2D2;
        border-collapse: collapse;
        padding: 7px !important;
    }
    .delete_projections_btn{
        background-color: #E96258 !important;
    }
    .projections_popup_btn {
        position: relative;
        left: 78%;
        width: 200px;
        justify-content: space-between !important;
    }
    .projection-history-modal .form-control-sm {
        border: none !important;
    }
    .capital{
        text-transform: capitalize;
    }
    .datatable_proj {
        display: flex;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
        /* justify-content: space-between; */
    }
    .expired_proj {
        position: relative;
        top: 63px;
        font-weight: 500;
        font-size: 17px;
        left: 206%;  
        font-family: serif;
    }
    .deleted_proj{
        position: relative;
        top: 38px;
        font-weight: 500;
        font-size: 17px;
        left: 158%;  
        font-family: serif;
    }
    .checkbox_div {
        position: relative;
        top: 19px;
        float: right;
    }
    #delete_projection {
        width: 1.15em;
        height: 1.15em;
        border: 0.15em solid currentColor;
        border-radius: 0.15em;
        transform: translateY(-0.075em);
    }
    #expired_projection{
        width: 1.15em;
        height: 1.15em;
        border: 0.15em solid currentColor;
        border-radius: 0.15em;
        transform: translateY(-0.075em);
    }
    #delete_projection_check {
        width: 1.15em;
        height: 1.15em;
        border: 0.15em solid currentColor;
        border-radius: 0.15em;
        transform: translateY(-0.075em);
    }
    .delete_projection_check {
        /*position: absolute;
        left: 77%;*/
    }

    .datatable_proj .dataTables_length {
        padding: 38px 3px;
        height: 34px;
    }

    .proj_view_btn {
        color: #00a78d;
        background-color: #E8F2EF;
        width: 24px;
        border-radius: 5px;
        height: 24px;
        cursor: pointer;
    }
    .delete_view_icon{
        display: flex;
    }
    .material_delete_icon {
        color: #f44336 !important;
        cursor: pointer;
    }
    .proj_fa_eye{
        position: relative;
        left: 5px;
    }
    .delete_projection_row{
        width: 25px;
        height: 25px;
        background: #FFEDE5;
        padding: 0;
        margin: 0 6px;
        border-radius: 5px;
    }
    .delete_projection_row .material-icons{
        font-size:19px;
        position: relative;
        left:3px;
        top:3px;
    }

    .btn-ndcust-submit{
        display: none;
    }

    #exportProjections {
        /*position: absolute;
        left: 392%;
        top: -56px;
        height: 49px;*/   
    }

    .proj-search-btn{
        /*margin: 12px 0 0;
        height: 50px;
        font-size: 15px !important;*/
    }

    .proj-top-row-btn{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .adjust-space{
        position: relative;
        top: 29px;
    }

    .proj-top-row-btn{
        position: relative;
        right: 8px;
        margin-left: 8px;
    }
    .common-cls{
        padding:5px;
    }

    /* .searchDataTable{
        position: relative;
        left: 267%;
    } */

    .filter_div {
        display: flex;
    }

    #proj-history-form {
        margin-left: 35px;
        display: inline-block;
    }
    .proj-history-modal{
        max-width: 67%;
    }
    .proj-history-search{
        position: relative;
        right:8px !important;
        left:-8px !important;
    }

    .modal-body .proj_input.greyout_field{
        border: 1px solid #aaa !important;
    }
    .modal-body input.remove_greyout{
        border: 1px solid #707070 !important;
    }

    .datatable_supplier, .datatable_service{
        display: flex;
        width: 50%;
    }

    .remove-payment-btn-div {
        text-align: right !important;
    }

    .datatable_supplier .dropdown-menu, .datatable_service .dropdown-menu{
        z-index: 9999999 !important;
    }

    p.term-back-btn {
        margin-top: 27px;
    }

    p.term-back-btn a {
        color: #3C4858;
        font-weight: bold;
        align-items: center;
        width: 80px;
    }

    .term-back-btn a i {
        border-radius: 50%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        margin-right: 7px;
    }

    .dates_checkbox {
        display: flex !important;
        justify-content: space-between !important;
    }

    .main_heading {
        text-align: center;
        background-color: black !important;
    }

    .payment_head {
        color: white !important;
    }

    table.payment_table {
        border-collapse: collapse;
        border-radius: 1em;
        border: 1px solid black !important;
        /* overflow: hidden; */
    }

    .supplier-cell {
        cursor: pointer;
    }
    td.supplier-cell {
        position: relative;
        padding-left: 20px;
        min-width: 150px;
    }
    .su_po_number{
        min-width: 110px;
    }
    .su_po_date{
        min-width: 100px;
    }
    .add-border-right{
        border-right: 2px solid black
    }
    span.toggle-icon {
        position: absolute;
        left: 4px !important;
        top: 50%;
        transform: translateY(-50%);
        line-height: 10px;
        width: 18px;
        height: 18px;
        border-radius: 50px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #00a78d;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
    }

    /* Hide sorting in projection table */
    table.dataTable.projection-history-table > thead > tr > th[class*="sort"]:before,
    table.dataTable.projection-history-table > thead > tr > th[class*="sort"]:after,
    table.dataTable.projections-history-table > thead > tr > th[class*="sort"]:before,
    table.dataTable.projections-history-table > thead > tr > th[class*="sort"]:after {
        content: "" !important;
    }

    .sectionLengthDataTable{
        position: relative;
        top: 65px;
        display: none;
    }

    /* sidebar new design */
    .ep-hub .nav .nav-item .collapse {
        height: auto;
        transition: all .2s ease-in-out;
    }
    .ep-hub .nav .nav-item .collapsing {
        overflow: hidden;
        transition: height .35s ease;
    }
    .ep-hub .collapse:not(.show) {
        display: none;
    }
    .ep-hub .sidebar .nav i.fa-custom{
        float: right !important;
    }
    .ep-hub .dropdown-container{
        display: none;
        margin-top: 10px;
    }
    .ep-hub .nav-item .droplink .fa-custom {
        margin-left: auto;
        margin-right: 0;
    }
    .toggle-vis {
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
        color: #00A88E !important;
        text-decoration: underline !important;
    }
    .toggle-vis:hover {
        color: grey !important;
    }
    .toggle-inv {
        /*border: 1px solid #00A88E;*/
        /*padding-left: 5px;
        padding-right: 5px;*/
        margin-left: 0 !important;
    }

    /* Service Payment */
    input.select-all-service-payments-checkbox {
        position: relative;
        left: 8px;
    }
    input.select-all-supplier-payments-checkbox {
        position: relative;
        left: 44%;
    }
    .supplier-archived-table table#supplier-payments-table th:first-child,
    .supplier-archived-table table#supplier-payments-table td:first-child {
        display: none;
    }
    #service-payments-table_length {
        display: flex;
        flex-direction: row-reverse;
        gap: 20px;
        width: auto !important;
    }
    span.count_text{
        color: var(--primary);
    }
    #service-payments-table_length select.custom-select.custom-select-sm.form-control.form-control-sm {
        margin: 0 12px !important;
    }
    div#service-payments-table_wrapper select.custom-select.custom-select-sm.form-control.form-control-sm {
        padding: 0;
        min-height: 25px;
    }
    .display-inline{
        display: inline-block;
    }
    /* ONLY FOR MOZILLA FIREFOX */
    @-moz-document url-prefix() { 
        .EE::after {
            font-size: 14px;
            transform: translate(-100%, 0) !important;
        }
        .tracking-card-row-container .EE::after , .tracking-table-graphview .EE::after, .event-page .EE::after, .customer-table-custom .EE::after, .EE_cust::after, .product-table .EE::after{
            transform: none !important;
            font-size: 12px;
            position: relative;
            display: inline-block;
            left: -6px;
            top: 0px;
        }
        .customer-table-custom .EE::after{
            font-size: 14px;
        }
        .event-page .EE::after, .product-table .EE::after{
            top: -2px;
        }
        .EE_cust::after{
            font-size: 14px;
            left: -51px;
            top: 2px;
        }
        .tracking-card-row-container .EE::after , .tracking-table-graphview .EE::after{
            left: -5.5px;
        }
        .reorder-table .reorder-checkbox-column .EE::after{
            transform: translate(-100%, -3%) !important;
        }
        .reorder-table .DEAR-categories.EE::after{
            transform: translate(-80%, 0) !important;
        }
        .EE_skubig::after{
            transform: translate(-95%, 0) !important;
        }
    }

    /* for EE SKU with Heading 3 (in Tracking PopUp)*/
    .EE_skubig::after {
        font-size: 25px;  /* changed this */
        font-weight: 800;
        color: #00A88E;
        text-shadow: 0 0 3px #0c685a;
        content: ' *';
        position: absolute;
        transform: translate(-100%, 0);
    }

    /* for EE POs (PO Manager Section)*/
    tr[class*="PO-EE-"] .po_number_span::after {
        font-size: 12px;
        font-weight: 800;
        color: #00A88E;
        text-shadow: 0 0 3px #0c685a;
        content: ' *';
        position: absolute;
        transform: translate(50%, 0); /* changed this */
    }
    /* Show colour differentiator for EE Products */

    @media screen and (max-width: 1400px) {
        .trackingform .category-custom button.graph-category-cover a.btn-graph {
            font-size: 12px !important;
        }
        .trackingform .category-custom .less-space.col-sm-2:nth-child(4) {
            max-width: 12%;
            padding-left: 0;
        }
        .tracking-sales-apply.apply-btn{
            margin-left: 0px;
        }
    }

    @media screen and (max-width: 1600px) {
        .sectionLengthDataTable{
            position: relative;
            top: 85px;
        }
    }

    .paymentCard {
        padding: 20px;
        background: #F0F1F366;
        border-radius: 8px;
    }
    .payment_count {
        font-size: 14px;
        color: #333333;
        text-transform: capitalize;
    }
    .paymentCard .checkbox input.date-checkbox {
        width: 19px;
        height: 19px;
        padding: 6.19px 3.69px 5.19px 4.69px;
        border-radius: 4px 0px 0px 0px;
        accent-color: #00A88E;
        border: 1px solid #CCCCCC;
    }
    .paymentCard .form-group {
        gap: 16px;
    }
    
    .paymentCard .checkbox label {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        font-weight: 400;
        line-height: 16.41px;
        text-align: left;
        color: #333333;
    }
    .paymentCard .checkbox .form-control[disabled] {
        opacity: 0.3;
    }
    .paymentCard .checkbox label span {
        line-height: normal;
    }
    /* .form-group.bmd-form-group.dates_checkbox .form-control,  .form-group.bmd-form-group.dates_checkbox div {
        width: 100% !important;
    }
    .form-group.bmd-form-group.dates_checkbox.is-filled div {
        width: 100% !important;
    } */
     select.form-control:not(select.custom-select) {
        background-color: var(--card-theme-color);
        color: var(--font-color);
        padding: 0 20px 0 10px !important;
        border: 1px solid var(--main-bg-color);
        background-color: var(--main-bg-color);
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A%23424242%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A) !important;
        background-position: right 8px center !important;;
        background-repeat: no-repeat;
        background-size: auto 18px !important;
        -moz-appearance: none !important;
        -webkit-appearance: none;
        appearance: none;
    }


    .checkbox {
        width: 100%;
    }
    .payment_term_main_dev select#select-payment-term {
        width: 100% !important;
        min-width: 184px;
        border: 1px solid #2a324340;
    }

    .payment_term_main_dev .form-group.bmd-form-group.dates_checkbox.is-filled {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr);
        width: 1280px !important;
        justify-content: flex-start !important;
        margin: 0;
    }

    .payment_term_required, #term_error_message {
        color: red !important;
    }
    
    body .sidebar .dropdown-container li.nav-item a.nav-link {
        padding-left: 2px !important;
    }
    body .sidebar .dropdown-container ul.nav li.nav-item {
        margin-left: 0px !important;
    }
    body.showmenu .sidebar .dropdown-container li.nav-item a.nav-link {
        padding-left: 12px !important;
    }
    body.hidemenu .sidebar .nav li {
        margin: 0 12px 10px !important;
    }
    body.hidemenu .sidebar .dropdown-container li.nav-item {
        margin: 0 9px 10px !important;
    }
    body .sidebar .nav i {
        font-size: 28px;
        width: 32px;
    }
    body .sidebar .dropdown-container ul.nav li.nav-item a.nav-link.pop-over {
        padding: 2px 4px !important;
        margin-left: 12px;
    }
    .btn.btn-danger.btn-link.delete_term{
        background-color: #f4433633;
    }
    .btn.btn-danger.btn-link.delete_term:hover {
        background-color: #f4433633 !important; /* Maintain the same background color on hover */
    }
    .dataTables_wrapper table.payment-term-table > tbody > tr,
    .dataTables_wrapper table.supplier-term-table > tbody > tr
    {
        border-bottom: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
    }
    .add-payment-btn{
        color: #00A88E;
        cursor: pointer;
        padding-bottom: 15px !important
    }
    .remove-payment-btn{
        color: #ff0000c4;
        cursor: pointer;
    }
    .btn-cancel-term{
        color: black !important;
        background-color: white !important;
        border: 1px solid black !important;
    }

    input.performa_invoice {
        display: none;
    }

    /* Style the label as the custom button */
    label[class="performa_invoice_label"] {
        background: #00a88e;
        border: 2px solid #00a88e;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        font-size: 12px;
        outline: none;
        padding: 6px 20px;
        text-transform: uppercase;
        transition: all 1s ease;
    }

    .btn-cancel-term:hover{
        color: white !important;
        background-color: black !important;
        border: 1px solid white !important;
    }
    /* .below-button{
        padding: 10px;
        margin: 20px;
    } */
    #term_error_message{
        font-weight: 500 !important;
    }
    .arch-unarch{
        color: #999 !important;
        cursor: pointer;
    }
    .card .card-body .below-button {
        gap: 16px;
    }
    .payment-form {
        margin-bottom: 16px;
    }
    .card-body:has(.paymentCard) {
        padding-bottom: 6vw;
    }

    .paymentCard input#input-percentage[type=number]::-webkit-inner-spin-button, 
    .paymentCard input#input-percentage[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.paymentCard .form-group {
    position: relative;
}

.paymentCard .form-group span.icon-per {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}
/* supplier-payments */
div#supplier-payments-table_wrapper, div#service-payments-table_wrapper{
    margin-top: 10px;
}

div#supplier-payments-table_wrapper .dataTables_length, div#service-payments-table_wrapper .dataTables_length {
    padding: 5px 0px;
    float: left;
    width: 125px;
    margin-right: 16px;
    margin-top: 6px;
}

button.btn.btn-primary.mb-2.export-btn-supplier {
    padding: 8px 22px !important;
}

.performa_invoice_field {
    margin-bottom: 10px !important;
}

div#supplier-payments-table_wrapper .dataTables_length label, div#service-payments-table_wrapper .dataTables_length label{
    margin: 0;
}

#supplier-payments-table_wrapper .dt-buttons, #service-payments-table_wrapper .dt-buttons{
    margin: 0;
    float: left;
    margin-top: 7px;
}

#supplier-payments-table_wrapper .dt-buttons button.btn.btn-secondary, 
#service-payments-table_wrapper .dt-buttons button.btn.btn-secondary{
    padding: 6px 16px;
    display: none;
}

table#supplier-payments-table thead.text-primary, table#service-payments-table thead.text-primary {
    position: sticky;
    top: 0;
    z-index: 9999;
}

.suppler-tracking {
    padding-left: 7px !important;
}

form#uploadForm [type="file"] {
    /* Style the color of the message that says 'No file chosen' */color: #878787;border: none;padding: 0;}
    [type="file"]::-webkit-file-upload-button {
      background: #00a88e;
      border: 2px solid #00a88e;
      border-radius: 4px;
      color: #fff;
      cursor: pointer;
      font-size: 12px;
      outline: none;
      padding: 6px 12px;
      text-transform: uppercase;
      transition: all 1s ease;
    }
    
    form#uploadForm [type="file"]::-webkit-file-upload-button:hover {
      background: #fff;
      border: 2px solid #535353;
      color: #000;
    }
    
    form#uploadForm {
        float: left;
        width: calc(100% - 45px);
        overflow: hidden;
    }
    a.view-doc-td {
        display: flex;
        align-items: center;
        border: 1px solid;
        justify-content: center;
        border-radius: 8px;
        padding: 4px;
        font-size: 12px;
        font-weight: 500;
        width: 34px;
        height: 34px;
        margin: 0 auto;
    }
    
    a.view-doc-td svg {
        width: 18px;
        height: 18px;
    }
    a.view-doc-td:hover{
        color: #00a88e;
        opacity: 0.8;
    }
    .supplier-term-table select.form-control:not([size]):not([multiple]), 
    select.supplier_payment_term.form-control:not([size]):not([multiple]) {
        background-color: transparent;
        min-width: 100px;
    }
    .inputgroup-custom.supplier-term-section, .inputgroup-custom.service-term-section{
        min-width: 140px;
    }