/* This is to fix the issue of calendar in filter row doesn't show 'today' & 'clear' buttons. */
[id^=footerViewinnerCalendarjqxWidget] {
    height: 20px !important;
}

.cu-filter *, .cu-table *, .cu-footer * {
    font-family: 'Open Sans', sans-serif;
}

/*Applies to Viewer page (desigend for plazma TV. E.g. KSR Table View, Toughen Table View etc.)*/
.jqxGridViewer .jqx-grid-column-header {
    font-size: 30px !important;
    font-weight: bold;
}

/*Applies to Viewer page (desigend for plazma TV. E.g. KSR Table View, Toughen Table View etc.)*/
.jqxGridViewer .jqx-grid-cell {
    font-size: 20px !important;
}

/*Applies to Viewer page (desigend for plazma TV. E.g. KSR Table View, Toughen Table View etc.)*/
.jqxGridViewerCutting .jqx-grid-column-header {
    font-size: 20px !important;
    font-weight: bold;
}

/*Applies to Viewer page (desigend for plazma TV. E.g. KSR Table View, Toughen Table View etc.)*/
.jqxGridViewerCutting .jqx-grid-cell {
    font-size: 18px !important;
}


/*Applies to Viewer page (desigend for plazma TV. E.g. KSR Table View, Toughen Table View etc.)*/
.jqxGridViewerHeatsoak .jqx-grid-column-header {
    font-size: 25px !important;
    font-weight: bold;
}

/*Applies to Viewer page (desigend for plazma TV. E.g. KSR Table View, Toughen Table View etc.)*/
.jqxGridViewerHeatsoak .jqx-grid-cell {
    font-size: 20px !important;
}
/*Applies to Viewer page (desigend for plazma TV. E.g. KSR Table View, Toughen Table View etc.)*/
.jqxGridViewerHeatsoakDetail .jqx-grid-column-header {
    font-size: 20px !important;
    font-weight: bold;
}

/*Applies to Viewer page (desigend for plazma TV. E.g. KSR Table View, Toughen Table View etc.)*/
.jqxGridViewerHeatsoakDetail .jqx-grid-cell {
    font-size: 16px !important;
}

.grid-edit-cell-renderer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    cursor: pointer;
}

/*div.jqx-grid-cell.jqx-grid-cell-metro.jqx-item.jqx-item-metro.jqx-grid-cell-wrap.jqx-grid-cell-alt.jqx-grid-cell-alt-metro:has(> .grid-edit-cell-renderer) {*/ /* styles to apply to the li tag */
/*display: flex;
    align-items: center;
    justify-content: center;
}*/
div:has(> .grid-edit-cell-renderer) { /* styles to apply to the li tag */
    display: flex;
    align-items: center;
    justify-content: center;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: #212529;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #212529;
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6;
    background-color: #ffffff;
}

table {
    caption-side: bottom;
    border-collapse: collapse;
}

.table > thead {
    vertical-align: bottom;
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0;
}

tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
}

.table > :not(caption) > * > * {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.table > tbody {
    vertical-align: inherit;
}

thead {
    /*background-color: #034d8c;*/
    background: rgba(24, 24, 24, 0.8);
    cursor: pointer;
    color: #fff;
}

.cu-filter, .cu-footer {
    display: inline-block;
}

    .cu-filter a, .cu-footer a {
        color: black;
        float: left;
        padding: 8px;
        text-decoration: none !important;
    }

    .cu-filter button {
        padding: 5px 15px;
        font-size: 12px;
        line-height: 140%;
        border-radius: 35px;
        border: none;
        /*background-color: #034d8c;*/
        background-color: #025ca8;
        cursor: pointer;
        color: #fff;
    }

        .cu-filter button img {
            vertical-align: middle;
            width: 24px;
        }

.btnLogin {
    padding: 15px 13px;
    font-size: 14px;
    line-height: 140%;
    border-radius: 0px;
    border: none;
    background: rgba(24, 24, 24, 0.8);
    cursor: pointer;
    width: 160px;
    color: #fff;
}

.cu-filter button:hover {
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
    color: #fff;
}

.cu-filter label:not(.no-style) {
    font-size: 12px;
}

.cu-filter2 {
    margin-top: 17px !important;
}

    .cu-filter2 button {
        padding: 13px 13px;
        font-size: 14px;
        line-height: 140%;
        border-radius: 10px;
        /*border-radius: 10px;*/
        border: none;
        background: rgba(24, 24, 24, 0.8);
        cursor: pointer;
        /*width: 120px;*/
        color: #fff;
    }

        .cu-filter2 button:hover {
            background-color: #da2c46 !important;
            color: #ffffff !important;
        }

        .cu-filter2 button img {
            vertical-align: middle;
            width: 24px;
        }


    .cu-filter2 .btn-check-in {
        background: #3CB371 !important;
        color: #FFFFFF;
    }

        .cu-filter2 .btn-check-in:hover {
            background-color: #2E8B57 !important;
        }

    .cu-filter2 .btn-check-out {
        background: #FA8072 !important;
        color: #FFFFFF;
    }

        .cu-filter2 .btn-check-out:hover {
            background-color: #CD5C5C !important;
        }

.cu-filter-default {
    margin-top: 0px;
}

    .cu-filter-default button {
        padding: 13px 13px;
        font-size: 14px;
        line-height: 140%;
        border-radius: 10px;
        /*border-radius: 10px;*/
        border: none;
        background: rgba(24, 24, 24, 0.8);
        cursor: pointer;
        /*width: 120px;*/
        color: #fff;
    }

        .cu-filter-default button:hover {
            background-color: #da2c46 !important;
            color: #ffffff !important;
        }

        .cu-filter-default button img {
            vertical-align: middle;
            width: 24px;
        }


    .cu-filter-default .btn-check-in {
        background: #3CB371 !important;
        color: #FFFFFF;
    }

        .cu-filter-default .btn-check-in:hover {
            background-color: #2E8B57 !important;
        }

    .cu-filter-default .btn-check-out {
        background: #FA8072 !important;
        color: #FFFFFF;
    }

        .cu-filter-default .btn-check-out:hover {
            background-color: #CD5C5C !important;
        }

.dropdown {
    padding: 5.5px 15px 7px 15px;
    font-size: 14px;
    margin: 8px 0px 8px 0px;
    line-height: 140%;
    border-radius: 35px;
    border: none;
    background-color: #025ca8;
    cursor: pointer;
    color: #fff;
}



.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.center-div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.jqx-grid-widget {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/*Loading*/
.cu-loading {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    background-color: rgba(255,255,255,0.8);
    z-index: 99999;
    padding-top: 180px;
    text-align: center;
    display: none;
}

    .cu-loading img {
        width: 60px;
    }

    .cu-loading h3 {
        padding: 20px 0;
        font-size: 18px;
    }

.stillage-header {
    font-size: 16px;
    color: #ffffff !important;
}

.page-link {
    color: #000000 !important;
}

    .page-link:hover {
        color: #ffffff !important;
        background-color: #0a1c2d !important;
    }

.cu-filter button:hover {
    background-color: #da2c46 !important;
    color: #ffffff !important;
}

.cu-filter button.approve-button:hover {
    background-color: #1ebc73 !important;
    color: #ffffff !important;
}

.login_box {
    width: 100%;
    float: left;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 0px;
    box-shadow: 1px 4px 22px -8px #0004;
    display: flex;
    overflow: hidden;
}

    .login_box .left {
        width: 41%;
        height: 100%;
        padding: 25px 25px;
    }

    .login_box .right {
        width: 59%;
        height: 100%;
        background-image: url("../img/img1.png");
        background-repeat: no-repeat;
        background-size: cover;
    }

.left input {
    border: none;
    width: 80%;
    margin: 15px 0px;
    border-bottom: 1px solid #4f30677d;
    padding: 7px 9px;
    width: 100%;
    overflow: hidden;
    background: transparent;
    font-weight: 600;
    font-size: 14px;
}

.left h3 {
    text-align: center;
    margin-bottom: 40px;
}

.left {
    background: linear-gradient(-45deg, #dcd7e0, #fff);
}

.right .right-text {
    height: 100%;
    position: relative;
    transform: translate(2%, 39%);
}

.left .contact {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 100%;
    width: 73%;
    margin: auto;
}

.submit {
    border: none;
    padding: 15px 70px;
    border-radius: 0px;
    display: block;
    margin: auto;
    margin-top: 120px;
    background: rgba(24, 24, 24, 0.8);
    color: #fff;
    font-weight: bold;
}

    .submit:hover {
        background: #da2c46;
        -webkit-box-shadow: 0px 9px 15px -11px rgb(88 54 114);
        -moz-box-shadow: 0px 9px 15px -11px rgba(88,54,114,1);
        box-shadow: 0px 9px 15px -11px rgb(88 54 114);
        transition: all .5s;
    }

.jqx-action-buttons-edit .jqx-button {
    background-color: transparent !important;
    border: none !important;
}

/*/Loading*/
/*JQXGrid Status*/
/*/JQXGrid Status*/
[type="checkbox"] {
    vertical-align: middle;
}

.checkbox-label {
    display: contents;
}

.form-label {
    font-size: 16px !important;
}

.float-left {
    float: left;
    margin-right: 5px;
}

.float-right {
    float: right;
    margin-left: 5px;
}

.flex-buttons {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-evenly;
    align-content: space-evenly;
    width: fit-content;
    padding: 5px;
    height: 100%;
}

    .flex-buttons .flex-items {
        margin-left: 5px;
    }

.margin-top-align {
    margin-top: 11px !important;
}

.margin-padding-0 {
    margin: 0px;
    padding: 0px;
}

.cu-filter button {
    padding: 13px 13px;
    font-size: 14px;
    line-height: 140%;
    border-radius: 10px;
    /*border-radius: 10px;*/
    border: none;
    background: rgba(24, 24, 24, 0.8);
    cursor: pointer;
    /*width: 120px;*/
    color: #fff;
}

.dropdown2 {
    padding: 14px 13px;
    font-size: 14px;
    line-height: 140%;
    border-radius: 10px;
    border: none;
    margin-top: 0px;
    margin-left: 3px;
    background: rgba(24, 24, 24, 0.8);
    /* background-color: #0a1c2d; */
    cursor: pointer;
    width: 125px;
    color: #fff;
}

    .dropdown2:hover {
        background: #da2c46;
        border: none;
    }

    .dropdown2 option {
        background: rgb(70,70,70) !important;
    }


.dropdown-auto {
    padding: 14px 13px;
    font-size: 14px;
    line-height: 140%;
    border-radius: 10px;
    border: none;
    margin-top: 0px;
    margin-left: 3px;
    background: rgba(24, 24, 24, 0.8);
    /* background-color: #0a1c2d; */
    cursor: pointer;
    width: auto;
    color: #fff;
}

    .dropdown-auto:hover {
        background: #da2c46;
        border: none;
    }

    .dropdown-auto option {
        background: rgb(70,70,70) !important;
    }

.dropdown-wide {
    padding: 14px 13px;
    font-size: 14px;
    line-height: 140%;
    border-radius: 10px;
    border: none;
    margin-top: 0px;
    margin-left: 3px;
    background: rgba(24, 24, 24, 0.8);
    /* background-color: #0a1c2d; */
    cursor: pointer;
    width: 235px;
    color: #fff;
}

    .dropdown-wide:hover {
        background: #da2c46;
        border: none;
    }

    .dropdown-wide option {
        background: rgb(70,70,70) !important;
    }

.dropdown-wide-width {
    width: 180px !important;
}

.dropdown-wide-width_auto {
    width: 100% !important;
}

.dropdown-wide-width_height {
    width: 100% !important;
    padding: 11px 13px !important;
    margin-left: 0px !important;
}

.dropdown-wide-width_height-7 {
    width: 100% !important;
    padding: 7px 13px !important;
    margin-left: 0px !important;
}

.dropdown-wide-dashboard {
    padding: 7px 10px;
    cursor: pointer;
    width: 120px;
}


.full-view-width {
    width: 3%;
    float: left;
}

.full-view-width-small {
    width: 30%;
    float: left;
}

.logo-width {
    width: 180px;
}

.jqx-widget .jqx-grid-column-header div > div > span[style] { /*Cause header text to wrap to new line rather than be truncated*/
    white-space: normal !important;
}

.jqx-widget .jqx-grid-column-header div > div { /*Cause header text to wrap to new line rather than be truncated*/
    margin-top: 5px !important;
}

    .jqx-widget .jqx-grid-column-header div > div > div { /*Cause header text to wrap to new line rather than be truncated*/
        margin-top: -12px !important;
    }

        .jqx-widget .jqx-grid-column-header div > div > div > div { /*Cause header text to wrap to new line rather than be truncated*/
            margin-top: 0px !important;
        }

/*===============responsive class started===================*/
@media only screen and (max-width:1739px) and (min-width:1501px) {
    .windget-4 {
        width: 18.9%;
        float: left;
        margin: 5px;
    }
}

@media only screen and (max-width:1560px) and (min-width:900px) {
    .dropdown2 {
        width: 120px;
    }

    .btnLogin {
        width: 120px;
        color: #fff;
    }

    .full-view-width {
        width: 5%;
        float: left;
    }

    .leftMenu {
        /* height: 100%; */
        height: 100%;
        min-height: 132vh;
    }
}

@media only screen and (max-width:1500px) and (min-width:1436px) {

    .cu-filter {
        margin-top: 10px;
        width: 33%;
        float: left;
    }

    .dropdown2 {
        /*padding: 16px 14px;
    font-size: 14px;
    line-height: 140%;
    border-radius: 0px;
    border: none;
    margin-top: 0px;*/
        width: 120px;
    }

    .btnLogin {
        /* padding: 15px 13px;
    font-size: 14px;
    line-height: 140%;
    border-radius: 0px;
    margin-right: 7px;
    border: none;
    background: rgba(24, 24, 24, 0.8);
    cursor: pointer;*/
        width: 120px;
        color: #fff;
    }

    .fmdq-company-option .cu-filter {
        margin-top: 0;
    }
}

@media only screen and (max-width:1437px) and (min-width:1294px) {

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .cu-filter {
        margin-top: 10px;
        width: 33%;
        float: left;
    }

    .btnLogin {
        width: 127px;
        color: #fff;
    }

    .dropdown2 {
        width: 135px;
    }

    .margin-top-align {
        margin-top: 11px !important;
    }

    .fmdq-company-option .cu-filter {
        margin-top: 0;
    }
}

@media only screen and (max-width:1293px) and (min-width:1032px) {

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .cu-filter {
        margin-top: 0;
        margin-bottom: 10px;
        width: 33%;
        float: left;
    }

    .login_box .left {
        width: 70%;
        height: 100%;
        padding: 0px 0px;
    }

    .btnLogin {
        width: 100px;
        color: #fff;
    }

    .dropdown2 {
        width: 105px;
    }

    .margin-top-align {
        margin-top: 11px !important;
    }

    .reports-filters button {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media only screen and (max-width:1024px) and (min-width:600px) {
    .btnLogin {
        width: 95px;
        color: #fff;
    }

    .full-view-width {
        width: 5%;
        float: left;
    }

    .leftMenu {
        /* height: 100%; */
        height: 100% !important;
        min-height: 132vh !important;
    }

    .main-header #menu_bar {
        cursor: pointer;
        padding: 18px;
        font-size: 14px;
        width: 3%;
        float: left;
    }
}

@media only screen and (max-width:1031px) and (min-width:1001px) {
    .windget-1 {
        width: 18%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .cu-filter {
        margin-top: 10px;
        width: 33%;
        float: left;
    }



    .mobile-width {
        margin-top: 0 !important
    }


        .mobile-width #btnDashboardSearch {
            padding: 12px 13px !important;
            margin-top: 0 !important
        }



    .login_box .left {
        width: 70%;
        height: 100%;
        padding: 0px 0px;
    }

    .btnLogin {
        width: 135px;
        color: #fff;
    }

    .dropdown2 {
        margin-left: -1px;
        width: 135px;
    }

    .fmdq-company-option #btnDashboardSearch {
        padding: 8px 13px !important;
    }
}

@media only screen and (max-width:1032px) and (min-width:932px) {
    .dropdown2 {
        margin-left: 3px;
        width: 103px;
    }

    .btnLogin {
        width: 100px;
        color: #fff;
    }
}

@media only screen and (max-width:1035px) and (min-width:932px) {
    .dropdown2 {
        margin-left: 3px;
        width: 115px;
    }

    .btnLogin {
        width: 91px;
        color: #fff;
    }

    .cu-filter img {
        vertical-align: middle;
        width: 12px !important;
        margin: -2px 0px 0 0 !important;
    }

    .reports-filters button img {
        vertical-align: middle;
        width: 20px !important;
    }

    .reports-filters button {
        padding: 10px 10px !important;
    }

    .fmdq-company-option .cu-filter img {
        width: 25px !important;
    }

    .fmdq-company-option .aline-right .col-md-1 {
        width: 8.6%;
    }
}

@media only screen and (max-width:1010px) and (min-width:901px) {
    .dropdown2 {
        margin-left: 3px;
        width: 107px;
    }
}

@media only screen and (max-width:1000px) and (min-width:901px) {
    .full-view-width {
        width: 5%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .cu-filter {
        margin-top: 10px;
        width: 33%;
        float: left;
    }

    .mobile-width {
        margin-top: 0 !important
    }

        .mobile-width #btnDashboardSearch {
            padding: 8px 8px !important;
        }

    .login_box .left {
        width: 70%;
        height: 100%;
        padding: 0px 0px;
    }

    .btnLogin {
        width: 135px;
        color: #fff;
    }

    .dropdown2 {
        width: 135px;
    }

    .leftMenu {
        /* height: 100%; */
        height: 100%;
        min-height: 100vh;
    }
}

@media only screen and (max-width:900px) and (min-width:601px) {
    .windget-1 {
        width: 49%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .login_box .left {
        width: 70%;
        height: 100%;
        padding: 0px 0px;
    }

    .cu-filter {
        margin-top: 10px;
        width: 33%;
        float: left;
    }

    .mobile-width {
        margin-top: 0 !important
    }

        .mobile-width #btnDashboardSearch {
            padding: 8px 6px !important;
        }

    .login_box .left {
        width: 70%;
        height: 100%;
        padding: 0px 0px;
    }

    .btnLogin {
        width: 135px;
        color: #fff;
    }

    .dropdown2 {
        width: 135px;
    }
}

@media only screen and (max-width:882px) and (min-width:398px) {
    .full-view-width {
        width: 12%;
        float: left;
    }

    .breadcrumb:last-child {
        font-weight: 500;
        font-size: 12px;
        margin-top: 2px;
    }
}

@media only screen and (max-width:600px) and (min-width:501px) {

    .full-view-width {
        width: 10%;
        float: left;
    }

    .windget-1 {
        width: 47%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    /*.dropdown2 {
    margin-bottom: 2px;
}*/
    .dropdown2 {
        /*margin-left: -1px;*/
        width: 135px;
    }

    .btnLogin {
        width: 135px;
        color: #fff;
    }

    .cu-filter a, .cu-footer a {
        margin-bottom: 2px;
    }

    .cu-filter, .cu-footer {
        /* display: inline-block; */
        width: 33%;
        float: left;
        margin-top: 10px;
    }

    .login_box .left {
        width: 70%;
        height: 100%;
        padding: 0px 0px;
    }
}

@media only screen and (max-width:500px) and (min-width:413px) {

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .mobile-width {
        width: 100%;
        float: left;
    }

    .form-group {
        width: 100%;
        float: left;
    }

    .dropdown2 {
        margin-bottom: 2px;
    }

    .cu-filter a, .cu-footer a {
        margin-bottom: 2px;
    }

    .cu-filter, .cu-footer {
        /* display: inline-block; */
        width: 100% !important;
        float: left !important;
        margin-top: 10px;
    }

    .login_box .right {
        width: 100%;
        height: 100%;
        background-image: url(../img/img1.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
    }

    .right .right-text {
        height: 100%;
        position: relative;
        transform: translate(2%, 2%);
    }

    .login_box .left {
        width: 100%;
        height: 100%;
        padding: 25px 25px;
        z-index: 99;
    }

    .left {
        background: none;
    }

    .white-color {
        color: #ffffff;
    }

    .left .contact {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        height: 100%;
        width: 100%;
        margin: auto;
    }

    .login_box {
        width: 100%;
        float: left;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: #fff;
        border-radius: 0px;
        box-shadow: 1px 4px 22px -8px #0004;
        display: flex;
        overflow: hidden;
    }
}

@media only screen and (max-width:414px) and (min-width:374px) {

    .full-view-width {
        width: 12%;
        float: left;
    }

    .full-view-width-small {
        width: 56%;
        float: left;
    }

    .breadcrumb:last-child {
        font-weight: 500;
        font-size: 12px;
    }

    .mobile-width {
        width: 100%;
        float: left;
    }

    .form-group {
        width: 100%;
        float: left;
    }

    .dropdown2 {
        margin-bottom: 2px;
    }

    .cu-filter a, .cu-footer a {
        margin-bottom: 2px;
    }

    .cu-filter, .cu-footer {
        /* display: inline-block; */
        width: 100% !important;
        float: left !important;
        margin-top: 10px;
    }

    .login_box .right {
        width: 100%;
        height: 100%;
        background-image: url(../img/img1.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
    }

    .right .right-text {
        height: 100%;
        position: relative;
        transform: translate(2%, 2%);
    }

    .login_box .left {
        width: 100%;
        height: 100%;
        padding: 25px 25px;
        z-index: 99;
    }

    .left {
        background: none;
    }

    .white-color {
        color: #ffffff;
    }

    .left .contact {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        height: 100%;
        width: 100%;
        margin: auto;
    }

    .login_box {
        width: 100%;
        float: left;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: #fff;
        border-radius: 0px;
        box-shadow: 1px 4px 22px -8px #0004;
        display: flex;
        overflow: hidden;
    }

    .breadcrumb:last-child {
        font-weight: 500;
        font-size: 12px;
    }
}

@media only screen and (max-width:375px) and (min-width:321px) {

    .full-view-width-small {
        width: 86% !important;
        float: left;
    }

    .full-view-width {
        width: 12% !important;
        float: left;
    }

    .breadcrumb:last-child {
        font-weight: 500;
        font-size: 11px;
        margin-top: 5px;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .mobile-width {
        width: 100%;
        float: left;
    }

    .form-group {
        width: 100%;
        float: left;
    }

    .dropdown2 {
        margin-bottom: 2px;
    }

    .cu-filter a, .cu-footer a {
        margin-bottom: 2px;
    }

    .cu-filter, .cu-footer {
        /* display: inline-block; */
        width: 100% !important;
        float: left !important;
        margin-top: 10px;
    }

    .login_box .right {
        width: 100%;
        height: 100%;
        background-image: url(../img/img1.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
    }

    .right .right-text {
        height: 100%;
        position: relative;
        transform: translate(2%, 2%);
    }

    .login_box .left {
        width: 100%;
        height: 100%;
        padding: 25px 25px;
        z-index: 99;
    }

    .left {
        background: none;
    }

    .white-color {
        color: #ffffff;
    }

    .left .contact {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        height: 100%;
        width: 100%;
        margin: auto;
    }

    .login_box {
        width: 100%;
        float: left;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: #fff;
        border-radius: 0px;
        box-shadow: 1px 4px 22px -8px #0004;
        display: flex;
        overflow: hidden;
    }
}

@media only screen and (max-width:320px) and (min-width:316px) {

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .mobile-width {
        width: 100%;
        float: left;
    }

    .form-group {
        width: 100%;
        float: left;
    }

    .dropdown2 {
        margin-bottom: 2px;
    }

    .cu-filter a, .cu-footer a {
        margin-bottom: 2px;
    }

    .cu-filter, .cu-footer {
        /* display: inline-block; */
        width: 100% !important;
        float: left !important;
        margin-top: 10px;
    }

    .login_box .right {
        width: 100%;
        height: 100%;
        background-image: url(../img/img1.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
    }

    .right .right-text {
        height: 100%;
        position: relative;
        transform: translate(2%, 2%);
    }

    .login_box .left {
        width: 100%;
        height: 100%;
        padding: 25px 25px;
        z-index: 99;
    }

    .left {
        background: none;
    }

    .white-color {
        color: #ffffff;
    }

    .left .contact {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        height: 100%;
        width: 100%;
        margin: auto;
    }

    .login_box {
        width: 100%;
        float: left;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: #fff;
        border-radius: 0px;
        box-shadow: 1px 4px 22px -8px #0004;
        display: flex;
        overflow: hidden;
    }
}

@media only screen and (max-width:315px) and (min-width:280px) {

    .full-view-width {
        width: 17%;
        float: left;
    }

    .mobile-width {
        width: 100%;
        float: left;
    }

    .form-group {
        width: 100%;
        float: left;
    }

    .cu-filter a, .cu-footer a {
        margin-bottom: 2px;
    }

    .btnLogin {
        margin-bottom: 2px;
    }

    .cu-filter, .cu-footer {
        /* display: inline-block; */
        width: 100% !important;
        float: left !important;
        margin-top: 10px;
    }

    .dropdown2 {
        margin-bottom: 2px;
    }

    .login_box .right {
        width: 100%;
        height: 100%;
        background-image: url(../img/img1.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: absolute;
    }

    .right .right-text {
        height: 100%;
        position: relative;
        transform: translate(2%, 2%);
    }

    .login_box .left {
        width: 100%;
        height: 100%;
        padding: 25px 25px;
        z-index: 99;
    }

    .left {
        background: none;
    }

    .white-color {
        color: #ffffff;
    }

    .left .contact {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        height: 100%;
        width: 100%;
        margin: auto;
    }

    .login_box {
        width: 100%;
        float: left;
        height: 100%;
    }

    .left-input {
        border-bottom: 1px solid #ffffff;
    }
}

.checkbox-label-new {
    width: auto;
    display: inline-block;
    padding-bottom: 3px;
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 0;
}

.recover-btn {
    padding: 6px 8px !important;
}


.batch-box2 {
    padding: 10px 10px;
    border: solid 1px #c5c5c5;
    border-radius: 8px;
}

    .batch-box2 .form-group {
        margin-bottom: 0;
    }


.batch-box {
    padding: 10px 10px 0;
    border: solid 1px #c5c5c5;
    border-radius: 8px;
}

    .batch-box .form-group {
        margin-bottom: 0;
    }

.form-padding {
    padding-top: 5px;
}

.cu_filter2 {
    margin-bottom: 7px;
}

.form-label-new {
    width: 100%;
    display: inline-block;
    padding-bottom: 3px;
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 0;
}

.margin-top-align-ksr {
    margin-top: 17px !important;
}

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

.main-part-padding {
    padding: 5px 20px;
}


.right-side-menu {
    position: fixed !important;
    right: 0;
    top: 0;
}

    .right-side-menu .align-items-center {
        margin-bottom: 0;
    }

.profile-bg .nav-link {
    background-color: rgba(24, 24, 24, 1);
    color: #fff;
    padding: 0.75rem 1rem;
}

.version-bttom-part {
    width: 100%;
    display: inline-block;
    padding: 10px 15px;
    margin: 0;
    position: absolute;
    bottom: 0px;
    background-color: #232423;
}

    .version-bttom-part p {
        width: 100%;
        padding: 0;
        margin: 0;
        color: #fff;
        font-size: 14px;
    }

.sidebar.close .version-bttom-part {
    display: none;
}

.sidebar .version-bttom-part {
    display: block;
}

.right-side-menu .dropdown-toggle::after {
    display: none;
}

.right-side-menu .btn {
    padding: 0.6rem 0.75rem;
    color: #fff;
}

    .right-side-menu .btn:focus {
        box-shadow: inherit;
    }

.right-side-menu .dropdown-menu {
    padding: 0;
    background-color: rgba(24, 24, 24, 0.8);
    border: none;
}

.right-side-menu .use-img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.right-side-menu .btn:hover {
    color: #fff;
}

.right-side-menu .chevron-arrow {
    margin-right: 5px;
    margin-left: 5px;
    width: 20px;
    transition: all 0.3s ease;
}

#dropdownMenuClickable:has(+ ul.dropdown-menu.show) > .chevron-arrow {
    transform: rotate(-180deg);
}

.right-side-menu .dropdown-item {
    color: #fff;
}

    .right-side-menu .dropdown-item:active {
        background: #6c6a6a;
        /*color: #000;*/
    }


#TopBar i {
    transition: transform 0.3s ease, rotate 0.3s ease;
}

#navigation-panel.close ~ .home-section #TopBar i {
    transform: rotate(180deg);
}

/*.grid-edit-button .jqx-button {
    background-image: url("../img/pencil-edit-16.png");
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
    border: none;
}*/

.dropdown-menu {
    top: 100%;
    width: 100%;
}

.dropdown-item:focus, .dropdown-item:hover {
    /*color: #c9c7cf !important;*/
    background: #6c6a6a;
}

.dropdown-item {
    padding-top: 0.25rem;
    padding-bottom: 0.45rem;
    background: #3c3c3c;
    cursor: pointer;
}

.dropbtn span, .dropbtn img {
    pointer-events: none;
}
/*Progress Bar Start*/
progress[value] {
    --w: 75px; /* The width */
    /* The background property */
    --b: /* static layers */
    linear-gradient(#fff8,#fff0), repeating-linear-gradient(135deg,#0003 0 10px,#0000 0 20px),
    /* dynamic layers */
    /* if < 30% "red" */
    linear-gradient(red 0 0) 0 /calc(var(--w)*.4 - 100%) 1px,
    /* if < 60% "orange" */
    linear-gradient(orange 0 0) 0 /calc(var(--w)*.8 - 100%) 1px,
    /* else "green" */
    green;
    appearance: none;
    border: none;
    width: var(--w);
    height: 15px;
    display: block;
    margin: 5px 10px;
    margin-bottom: 0px;
    background-color: lightgrey;
    border-radius: 50px;
}

    progress[value]::-webkit-progress-bar {
        background-color: lightgrey;
        border-radius: 50px;
    }

    progress[value]::-webkit-progress-value {
        border-radius: 50px;
        background: var(--b);
    }

    progress[value]::-moz-progress-bar {
        border-radius: 50px;
        background: var(--b);
    }
/*Progress Bar End*/

/*Dashboard Start*/
#dashboard-container {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 30px;
    max-width: 100% !important;
}
/*Bonus Pot on Dashboard Start*/
.bonus-pot-title {
    height: 50%;
    border: 5px solid #dcdcdc;
    /*box-shadow: 0px 0px 20px 4px grey;*/
    padding: 0;
    margin-right: 20px;
    overflow: hidden;
}

    .bonus-pot-title .bonus-pot-label {
        /*background-color: #F2F2F2;*/
        background: repeating-conic-gradient(from -45deg at right,var(--g)) 100% 0;
        --g: #0000 0 25%,#e5e5e5 0 50%;
        background-size: 100% var(--s,100%) !important;
        background-repeat: repeat-y;
    }

        .bonus-pot-title .bonus-pot-label button {
            vertical-align: sub;
            padding: 0 .75rem;
        }

.bonus-pot-emp-title {
    height: 40%;
    padding: 0;
    margin-right: 20px;
}

    .bonus-pot-emp-title .bonus-pot-label {
        /*background-color: #F2F2F2;*/
        background: repeating-conic-gradient(from -45deg at right,var(--g)) 100% 0;
        --g: #0000 0 25%,#e5e5e5 0 50%;
        background-size: 100% var(--s,100%) !important;
        background-repeat: repeat-y;
    }
/*.bonus-pot-title .bonus-pot-label .widget-title {*/
.widget-title {
    /*margin-top: 10px;*/
    display: inline-block;
    text-align: left;
    color: #5FA5F8;
    /*color: #ef33cf;*/
    font-size: 26px;
    line-height: 50px;
    /*width: 100%;*/
    font-weight: 500;
    margin-left: 2%;
}

#divBonusPot {
    padding: 5% 0;
    text-align: center;
    float: center;
    font-size: 18Px;
    color: white;
    font-style: unset;
    width: -webkit-fill-available;
    font-weight: 600;
    text-transform: uppercase;
    background-color: #B56576;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#divBonusPotPreviousMonth {
    padding: 5% 0;
    text-align: center;
    float: center;
    font-size: 18Px;
    color: white;
    font-style: unset;
    /*width: -webkit-fill-available;*/
    font-weight: 600;
    text-transform: uppercase;
    /*background-color: #B56576;*/
    background-color: #866a70;
    /*height: 100%;*/
    display: flex;
    flex-direction: row;
}

#jqxBarGaugeBonusPot {
    width: 560px !important;
    height: 300px !important;
}
    /*#jqxBarGaugeBonusPot {
    width: 770px !important;
    height: 424px !important;
}*/

    #jqxBarGaugeBonusPot .chartContainer {
        height: 300px;
    }

    #jqxBarGaugeBonusPot #svgChart {
        height: 300px;
        margin-top: 30px;
        /*margin-left: 30px;*/
    }

#jqxBarGaugeBonusPotPreviousMonth {
    width: 560px !important;
    height: 300px !important;
}

    #jqxBarGaugeBonusPotPreviousMonth .chartContainer {
        height: 300px;
    }

    #jqxBarGaugeBonusPotPreviousMonth #svgChart {
        height: 300px;
    }


#jqxBarGaugeBonusPotEmp {
    padding-top: 20px;
    padding-right: 0;
    padding-left: 0;
    /*width: 560px !important;*/
    height: 350px !important;
}

    #jqxBarGaugeBonusPotEmp .chartContainer {
        height: 350px !important;
    }

    #jqxBarGaugeBonusPotEmp #svgChart {
        /*height: 60%;*/
    }

        #jqxBarGaugeBonusPotEmp #svgChart text {
            margin-bottom: 30px;
        }

#jqxBarGaugeBonusPotEmpPreviousMonth {
    padding-top: 20px;
    padding-right: 0;
    padding-left: 0;
    /*width: 560px !important;*/
    height: 350px !important;
}

    #jqxBarGaugeBonusPotEmpPreviousMonth .chartContainer {
        height: 350px !important;
    }

    #jqxBarGaugeBonusPotEmpPreviousMonth #svgChart {
        /*height: 60%;*/
    }

        #jqxBarGaugeBonusPotEmpPreviousMonth #svgChart text {
            margin-bottom: 30px;
        }

.bonus-pot-month-title {
    text-align: center;
    color: #00C9A9;
    font-size: 18px;
    font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana;
    font-weight: 500;
}

.bonus-pot-month-title-emp {
    text-align: center;
    color: rgb(83 94 110);
    font-size: 22px;
    font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana;
    font-weight: 500;
}

.bonus-pot-month-labels {
    text-align: center;
    color: rgb(83 94 110);
    font-size: 20px;
    font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana;
    font-weight: 400;
}

.bonus-pot-month-label-remake {
    text-align: center;
    color: rgb(83 94 110);
    font-size: 22px;
    font-family: "Segoe UI", "Helvetica Neue", "Trebuchet MS", Verdana;
    font-weight: 500;
}

#viewBonusPotReport {
    outline: none !important;
    box-shadow: none !important;
}

    #viewBonusPotReport .svg-report-view {
        /*margin-top:-10px;*/
        width: 24px;
        height: 24px;
        background-color: #5b5b5b;
        mask: url(../img/report-view.svg) no-repeat center / contain;
        -webkit-mask: url(../img/report-view.svg) no-repeat center / contain;
    }
/*.svg-report-view {
    fill: #00C9A9;
}*/
/*
.jqx-bar-gauge-title {
    margin-bottom: 10px !important;
}*/
.dashboard-note {
    text-align: center;
    font-size: 22px;
    background: #ccc;
    padding: 30px 0;
    border-radius: 8px;
}

.dashboard-filters {
    background-color: #4d617a;
    padding-top: 5px;
    padding-left: 5px;
}

.dashboard-filter-main {
    width: 17%;
    display: inline-block;
}

.dashboard-filter-main2 {
    width: 34%;
    display: inline-block;
}

    .dashboard-filter-main2 span {
        color: #fff;
        padding-left: 8px;
        padding-right: 8px;
    }

.dashboard-filter-main3 {
    width: 40%;
    display: inline-block;
}

    .dashboard-filter-main3 select {
        width: 80%;
        display: inline-block;
    }

.dashboard-filter-main4 {
    display: inline-block;
}

    .dashboard-filter-main4 button:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.dashboard-filter {
    width: auto;
    display: inline-block;
}

.dashboard-filter-button-image {
    width: 24px;
}

.dashboard-filter-redio-button-label {
    display: inline-block;
    padding: 0 10px 0 4px;
    margin: 0 !important;
    vertical-align: middle;
    color: #fff;
    font-size: 1.05rem;
}

.dashboard-filter-redio-button {
    display: inline-block;
    vertical-align: middle;
}

/*Bonus Pot on Dashboard End*/

.grid-modal {
    max-height: calc(100vh - 210px);
}

    .grid-modal .modal-content {
        height: 80%;
    }

.modal-grid-div {
    margin: 15px !important;
}

/*Dashboard End*/
.cursor-pointer {
    cursor: pointer !important;
}


.audit-box {
    background: transparent;
    border-radius: 8px;
    padding: 10px 15px;
    text-align: center;
    border: solid 2px #e7e7e7;
    height: 250px;
}

    .audit-box p {
        text-align: center;
        margin-bottom: 0;
    }

    .audit-box a {
        color: #000;
        font-size: 16px;
    }

    .audit-box h2 {
        text-align: center;
        font-size: 20px;
        margin: 0;
        position: relative;
    }

.form-input {
    width: 89%;
    display: inline-block;
    margin: 0 0 0 10px;
}


.btn-close-icon {
    text-align: right;
    vertical-align: middle;
    padding-top: 19px;
}

.modal-title-main {
    margin-top: 4px;
}

/*Audit Checklist Start*/
.report-main {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 5px 0 0 0;
}

    .report-main ul {
        width: auto;
        padding: 0;
        margin: 0;
        list-style-type: none;
    }

        .report-main ul li {
            width: 100%;
            display: inline-block;
            padding: 0;
            margin: 0 0 5px 0;
            font-size: 14px;
            text-align: left;
        }

            .report-main ul li span {
                width: auto;
                height: auto;
                position: relative;
                border: solid 1px #0000;
                display: inline-block;
                padding: 0 0 0 20px;
                margin: 0;
            }

                .report-main ul li span::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 70%;
                    transform: translateY(-70%);
                    width: 15px;
                    height: 15px;
                    border: 2px solid #FF0000;
                    background-color: #FF0000;
                    border-radius: 50%;
                }

                .report-main ul li span.active::before {
                    background-color: #4CAF50;
                    border: 2px solid #4CAF50;
                }

.report-btn {
    width: auto;
    padding: 5px 13px;
    margin: 0;
    display: inline-block;
    border-radius: 10px;
    text-align: center;
    background-color: rgba(24, 24, 24, 0.8);
    font-size: 14px;
    color: #fff;
}

    .report-btn:hover {
    color: #fff;
}

.audit-box h2 span {
    position: absolute;
    right: 0;
    top: 0;
}

    .audit-box h2 span img {
        width: 25px;
        height: 25px;
    }

/*Audit Checklist End*/


/*Customer Delivery Email Start*/
.invalid-email-address {
    background-color: #df8686 !important;
}

.valid-email-address {
    background-color: #ffffff !important;
}

.auditchecklist-header-color {
    color: #4e73df !important;
    font-weight: bold;
    font-size: 20px;
}

.jqx-grid-column-header-auditchecklist {
    font-size: 15px !important;
    font-weight: bold !important;
    /*Customer Delivery Email End*/
}

.jqx-grid-cell-auditchecklist div {
    font-size: 12px !important;
    /*Customer Delivery Email End*/
}

.jqx-grid-cell-auditchecklistcellcolor div {
    background-color: orange !important;
    /*Customer Delivery Email End*/
}


/*body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: "Overpass";
    font-size: 0.8em;
    font-weight: bold;
}

p {
    margin: 0;
    padding: 0;
}*/

.wrapper {
    width: 100px;
    height: 50%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

#custom-toggle {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 60px;
    background-color: #fff;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 0 2px;
    margin: 0;
    cursor: pointer;
    direction: rtl !important;
}

    #custom-toggle.tgl-def::-webkit-slider-thumb {
        /*background-color: orange;*/
        background-color: #787878;
    }

    #custom-toggle.tgl-on::-webkit-slider-thumb {
        background-color: #29AB87;
    }

    #custom-toggle.tgl-off::-webkit-slider-thumb {
        background-color: #DE5D83;
    }

    #custom-toggle::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
    }

    #custom-toggle:focus {
        outline: none;
    }

.rangeActive {
    background-color: green;
}

.auditchecklistimgcenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 35%;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none !important; /* Standard syntax */
}

.auditchecklistlistyle {
    position: relative;
    color: #fff !important;
    border-radius: 10px;
    line-height: 2em;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    padding: 1px 11px;
    font-size: 13px;
    margin-bottom: 5px;
    width: 100%;
    /*pointer-events: none;*/
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none !important; /* Standard syntax */
    cursor: pointer;
    text-align: left;
}

    .auditchecklistlistyle.success {
        background-color: #29AB87;
    }

    .auditchecklistlistyle.failure {
        background-color: #DE5D83;
    }

    .auditchecklistlistyle.NoChange {
        background-color: #f99e2c;
    }

    .auditchecklistlistyle.NotInUse {
        background-color: #808080;
    }

.auditchecklist-checbox {
    margin-top: -3px;
    margin-right: 4px;
}

.qualitycontrol-form-label {
    font-size: 14px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.qualitycontrol-form-row {
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

.qualitycontrol-form-row-m0 {
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 500;
    width: 100%;
}

.qualitycontrol-form-row-margin {
    margin-bottom: 0.25rem;
    margin-top: 0.75rem;
    font-weight: 500;
}

.qualitycontrol-form {
    display: none;
}

.qualitycontrol-onselect {
    background-color: #f99e2c !important
}

.qualitycontrol-aftersave {
    background-color: #29AB87 !important;
}

.qualitycontrol-beforesave {
    background-color: #DE5D83 !important;
}

.qualitycontrol-othercontrol {
    display: none;
}
/*Customer Delivery Email End*/

.input-date {
    width: 150px;
}

.qualitycontrol-card-title {
    margin-left: 0.3em;
    margin-top: 0.2em;
}

.breaktest-checbox {
    margin-top: 0px;
    margin-right: 4px;
}

#excelExportReport {
    display: none;
}

.uploadfile {
    background-color: #0b5ed7;
    color: white;
    padding: 0.5rem;
    border-radius: 0.3rem;
    cursor: pointer;
    margin-top: 0.5rem;
    display: block;
}

.auditchecklist_imagestyle {
    border: 1px solid #acacac;
    min-height: 150px;
    text-align: center;
    display: flex;
    align-items: center;
}

.site2order_inproduction {
    background-color: #f99e2c !important;
    color: #FFFFFF !important;
}

.site2order_notstarted {
    background-color: #DE5D83 !important;
    color: #FFFFFF !important;
}

.site2order_ready {
    background-color: #29AB87 !important;
    color: #FFFFFF !important;
}


.sales-summary-tg {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0px auto;
}

    .sales-summary-tg td {
        border-color: black;
        border-style: solid;
        border-width: 1px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        overflow: hidden;
        padding: 10px 5px;
        word-break: normal;
    }

    .sales-summary-tg th {
        border-color: black;
        border-style: solid;
        border-width: 1px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
        padding: 10px 5px;
        word-break: normal;
    }

    .sales-summary-tg .sales-summary-tg-fymr {
        border-color: inherit;
        font-weight: bold;
        text-align: left;
        vertical-align: top
    }

    .sales-summary-tg .sales-summary-tg-0pky {
        border-color: inherit;
        text-align: left;
        vertical-align: top
    }

.sales-summary-div {
    font-family: Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
    padding: 10px 5px;
    word-break: normal;
}

    .sales-summary-div .sales-summary-div-fymr {
        border-color: inherit;
        font-weight: bold;
        text-align: left;
        vertical-align: top
    }

    .sales-summary-div .sales-summary-div-0pky {
        border-color: inherit;
        text-align: left;
        vertical-align: top
    }

.grid-box-main {
    display: block;
}

.sale-main-box {
    display: none;
}

.modal-dialog-centered .dropdown-wide {
    width: 100% !important;
}

.remake-reason-detail-title {
    font-size: 20Px;
    color: #000000;
    font-style: unset;
    width: -webkit-fill-available;
    font-weight: 600;
    margin-left: 30px;
}

@media (max-width: 1600px) {
    .sale-main-box .col-xl-3 {
        flex: 0 0 auto;
        width: 33.33%;
        float: left;
    }
}

@media (max-width: 1300px) {
    .sale-main-box .col-xl-3 {
        flex: 0 0 auto;
        width: 50%;
        float: left;
    }

    .grid-box-main {
        display: none;
    }

    .sale-main-box {
        display: block;
    }


    .remake-reason-mobile-view-card .div-header {
        border-color: inherit;
        font-weight: bold;
        text-align: left;
        vertical-align: top;
    }

    .remake-reason-mobile-view-card .div-value {
        border-color: inherit;
        text-align: left;
        vertical-align: top
    }

    .remake-reason-mobile-view-card .card-lines {
        display: flex;
        justify-content: space-between;
        padding: 5px;
    }
}

@media (max-width: 991px) {
    .sale-main-box .col-xl-3 {
        flex: 0 0 auto;
        width: 100%;
        float: left;
    }
}

@media (max-width: 991px) {
    .modal-dialog {
        max-width: 753px;
        margin: 1.75rem auto;
    }
}

@media (max-width: 1200px) {
    .modal-dialog {
        max-width: 1500px;
        margin: 1.75rem auto;
    }
}


@media (max-width: 640px) {
    .right-side-menu span {
        font-size: 0;
    }

    .right-side-menu .use-img {
        margin-right: 0;
    }

    .modal-title-mobile {
        font-size: 15px !important;
    }

    .remake-reason-detail-title {
        font-size: 15px !important;
    }

    .remake-reason-mobile-view-input {
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .modal-dialog {
        max-width: 600px;
        margin: 1.75rem auto;
    }
}



.machine-checklist-part-bottom .col-sm-6 {
    float: left;
    width: 50%;
}

    .machine-checklist-part-bottom .col-sm-6:last-child {
        text-align: right;
    }

.machine-checklist-part-bottom label {
    padding: 0;
    margin: 0;
}

.input-group-label label {
    margin: 0px;
    padding: 0px;
}

.input-group-label .form-check-input {
    margin-right: 5px;
}

ul.bonus-pot-prev-title {
    width: 100%;
    max-width: 205px;
    display: inline-block;
    padding: 0;
    margin: 0;
}

    ul.bonus-pot-prev-title li {
        width: 100%;
        display: inline-block;
        padding: 0;
        margin: 0;
    }

ul.bonus-pot-prev-value {
    width: 100%;
    max-width: 120px;
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.bonus-pot-prev-value {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.previous-months span {
    margin-bottom: 8px;
    display: block;
}

.previous-months hr {
    color: white;
    width: 80%;
    align-self: center;
    border-width: 1px;
    border-style: solid;
    opacity: 1;
    display: inline-block;
}

.Bonus-PotPrevious-Month {
    padding: 4.15% 0 !important;
}

.bonus-pot-prev {
    width: 100%;
}


.qualitycontrol-form-span span {
    width: 100%;
    display: inline-block;
}


@media (max-width: 1730px) {
    .bonus-pot-laptop-view .col-md-2 {
        flex: 0 0 auto;
        width: 30%;
    }

    .bonus-pot-laptop-view .col-md-5 {
        flex: 0 0 auto;
        width: 70%;
    }

    .bonus-pot-laptop-view .last-col {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .bonus-pot-laptop-view .col-md-2 {
        flex: 0 0 auto;
        width: 100%;
    }

    .bonus-pot-laptop-view .col-md-5 {
        flex: 0 0 auto;
        padding-top: 30px;
        padding-bottom: 60px;
        width: 100%;
    }

    .bonus-pot-laptop-view .last-col {
        flex: 0 0 auto;
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width:991px) {
    .bonus-pot-prev {
        width: 1000px;
        overflow-x: scroll;
        height: 280px;
        overflow-y: hidden;
        display: inherit;
    }

    ul.bonus-pot-prev-value {
        min-width: 140px;
        max-width: inherit;
    }

    ul.bonus-pot-prev-title {
        min-width: 250px;
        max-width: inherit;
    }

    .other-bottom-part .col-6 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media (max-width:767px) {
    /*    .card-batch {
        width: 800px;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .card-overflow{
        overflow:hidden;
    }*/
}

@media (max-width:640px) {
    .quality-control-title {
        width: 100%;
        margin-bottom: 15px;
    }

    .quality-control-second-col {
        width: 50%;
    }

    .quality-control-third-col {
        width: 50%;
        margin-bottom: 15px;
    }

    .quality-control-fourth-col {
        width: 90%;
    }
}

@media (max-width:575px) {

    .quality-control-fourth-col {
        width: 100%;
    }
}





.fs-14 {
    font-size: 14px !important;
}

.fw_thick {
    font-weight: bold;
}



.upload__box {
    padding: 20px 0 10px 0;
}

.upload__inputfile {
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.upload__btn {
    display: inline-block;
    font-weight: 600;
    color: #fff;
    text-align: center;
    min-width: 116px;
    padding: 5px;
    transition: all .3s ease;
    cursor: pointer;
    border: 2px solid;
    background-color: #4045ba;
    border-color: #4045ba;
    border-radius: 10px;
    line-height: 26px;
    font-size: 14px;
    margin-bottom: 0;
}

    .upload__btn p {
        margin: 0;
    }

    .upload__btn:hover {
        background-color: unset;
        color: #4045ba;
        transition: all .3s ease;
    }

.upload-box {
    margin-bottom: 10px;
}

.upload__img-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.upload__img-box {
    width: 125px;
    padding: 0 10px;
    margin-bottom: 12px;
    position: relative;
}

.upload__img-close {
    display: inline-block;
    width: calc(20.666667% - 1rem);
    /* padding-bottom: calc(16.6666667% - 1rem); */
    height: 25px;
    position: absolute;
    /* margin: 0.5rem; */
    background-color: #000;
    cursor: default;
    top: 0;
    cursor: pointer;
    right: 0px;
    width: 25px;
    text-align: center;
    opacity: 1;
}

    .upload__img-close:after {
        content: '\2716';
        font-size: 14px;
        color: #fff;
        opacity: 1;
    }

.img-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding-bottom: 100%;
}



.upload-file {
    padding: 0px;
}

.upload-inputfile {
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.upload-btn {
    display: inline-block;
    font-weight: 600;
    color: #fff;
    text-align: center;
    min-width: 116px;
    padding: 5px;
    transition: all .3s ease;
    cursor: pointer;
    border: 2px solid;
    background-color: #4045ba;
    border-color: #4045ba;
    border-radius: 10px;
    line-height: 26px;
    font-size: 14px;
    margin-bottom: 0;
}

    .upload-btn p {
        margin: 0;
    }

    .upload-btn:hover {
        background-color: unset;
        color: #4045ba;
        transition: all .3s ease;
    }

/**/
.upload-list {
    max-height: 220px;
    overflow-y: auto;
}

    /* Each file row */
    .upload-list .list-group-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        font-size: .875rem;
    }

    /* File name */
    .upload-list .file-name {
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* File size */
    .upload-list .file-size {
        font-size: .75rem;
        color: var(--bs-secondary-color);
    }

    /* Remove button */
    .upload-list .btn-remove {
        padding: 0;
        border: 0;
        background: none;
        color: var(--bs-danger);
        font-size: 1.1rem;
        line-height: 1;
    }

        .upload-list .btn-remove:hover {
            color: var(--bs-danger-text-emphasis);
        }

    .upload-list .view-file {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        color: var(--bs-primary);
        text-decoration: none;
        transition: background-color .2s ease, color .2s ease;
    }

        .upload-list .view-file:hover {
            /*background-color: rgba(13, 110, 253, 0.1);*/ /* Bootstrap primary */
            color: var(--bs-primary-text-emphasis);
            cursor: pointer;
        }

.jqx-enableselect, .jqx-widget-content, .jqx-widget-content-metro {
    z-index: 666 !important;
}

body.modal-open section.home-section {
    overflow: hidden;
}
/*body.modal-open {
    overflow: auto !important;
    padding-right: 0 !important;
}*/
.recently-ready-batch-items-rows {
    background-color: #E1E7CE !important;
    color: #000;
}

.recently-ready-barcode-rows {
    background-color: #CEDBE7 !important;
    color: #000;
}

.display-block {
    display: block !important;
}

.auditChecklist-dropdown-content {
    cursor: auto;
    color: #000;
    background-color: #fff;
    display: none;
    position: absolute;
    min-width: inherit;
    margin: 0;
    padding: 8px;
    z-index: 1;
    right: 0;
    top: 85%;
    border-radius: 6px;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    font-size: 13px;
}

.auditChecklist-bar-item {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.aline-right .col-md-1 {
    flex: 0 0 auto;
    width: 4.6%;
    text-align: right;
}

.aline-right .dropdown-wide {
    width: 100%;
}

.reports-filters .dropdown-wide {
    width: 100% !important;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-left: 0;
}

.reports-filters label {
    padding: 0;
    margin: 0;
}

.reports-filters .form-input {
    margin-left: 0;
}

.reports-filters button {
    padding-bottom: 7px;
    padding-top: 7px;
}

.reports-filters {
    width: 100%;
    display: inline-block;
}

.auditChecklist-bar-item {
    color: #000;
}

.doc-tracker-rdo-btn {
    display: inline-block;
    vertical-align: middle;
}

.doc-tracker-rdo-btn-labels {
    display: inline-block;
    padding: 0 10px 0 4px;
    margin: 0 !important;
    vertical-align: middle;
    color: #000000;
    font-size: 1.05rem;
}

.invalid-field {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

    .invalid-field:focus {
        border-color: #dc3545;
        box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25);
    }

#formCraneTestFailReport .has-error .help-block {
    display: block;
    border: none;
    color: #737373;
    padding-top: 5px;
}






.document-tracker-modal {
    width: 100% !important;
}


/*@media (max-width:1570px) {*/
@media (max-width:1768px) {
    .document-tracker .col-lg-1 {
        flex: 0 0 auto;
        width: 10.333333%;
    }

    .document-tracker.cu-filter {
        width: 100% !important;
    }

    .document-tracker button img {
        width: 24px !important;
    }


    .document-tracker-modal button img {
        width: 24px !important;
    }
}

/*@media (max-width:1278px) {*/
@media (max-width:1486px) {
    .document-tracker .col-lg-1 {
        flex: 0 0 auto;
        width: 15%;
    }
}

/*@media (max-width:991px) {*/
@media (max-width:1109px) {

    .document-tracker .col-lg-1 {
        flex: 0 0 auto;
        width: 20%;
    }

    .document-tracker .col-sm-6 {
        flex: 0 0 auto;
        width: 25%;
    }
}

/*@media (max-width:767px) {*/
@media (max-width:904px) {

    .document-tracker .col-lg-1 {
        flex: 0 0 auto;
        width: 25%;
    }

    .document-tracker .col-sm-6 {
        flex: 0 0 auto;
        width: 35%;
    }
}
/*@media (max-width:583px) {*/
@media (max-width:783px) {
    .document-tracker .col-lg-1 {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 10px;
    }

    .document-tracker .col-sm-6 {
        flex: 0 0 auto;
        width: 48%;
    }
}

/*@media (max-width:480px) {*/
@media (max-width:680px) {


    .document-tracker .col-sm-6 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/*New Login  ----START---- */

.main-login-part {
    width: 100%;
    display: inline-block;
    position: relative;
}

    .main-login-part img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: fixed;
        top: 0;
    }

.login-right-part {
    width: 100%;
    max-width: 550px;
    padding: 25px 25px;
    position: fixed;
    right: 0;
    height: 100%;
    top: 0;
    bottom: 0;
    background-color: #0A1C2D;
}

.login-logo {
    width: 100%;
    text-align: left;
}

    .login-logo img {
        width: auto;
        height: 100%;
        position: inherit;
        overflow: inherit;
    }

.login-text {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.login-right-part .mobile-screen {
    /*    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;*/
    height: 100%;
    width: 100%;
    margin: auto;
    position: relative;
}

.login-text h2 {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 35px;
}

.login-text p {
    width: 100%;
    display: inline-block;
    text-align: left !important;
    margin: 0 !important;
    padding: 0;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #fff;
}

.login-part {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.login-form-control {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 60px;
    line-height: 60px;
    padding: 18px 26px 18px 60px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #212121 !important;
}

.password-form-control {
    width: 100%;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 60px;
    line-height: 60px;
    padding: 18px 26px 18px 60px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #212121 !important;
}

.login-btn {
    width: 100%;
    text-align: center;
    display: inline-block;
    border: none;
    padding: 0;
    margin: 0;
    background: #DA2C46;
    height: 55px;
    line-height: 55px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    border-radius: 30px;
}

.mobile-screen p {
    width: 100%;
    text-align: center;
    display: inline-block;
    padding: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

    .mobile-screen p a {
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        text-decoration: none;
    }

.overlap-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(10, 28, 45, 0.5) 9.6%, rgba(10, 28, 45, 0) 100%);
}


.user-input {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 30px;
    width: 100%;
    display: inline-block;
    position: relative;
    height: 60px;
    background-image: url(../img/username.png) !important;
    background-position: 20px center;
    background-repeat: no-repeat;
    background-size: 22px;
}

    .user-input .login-form-control {
        margin-left: 0;
        width: 85%;
        position: absolute;
        right: 0;
        padding-left: 0;
        border: none;
        background: transparent;
        border-radius: 0 30px 30px 0;
        height: 59px;
    }

.password-input {
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 30px;
    width: 100%;
    display: inline-block;
    position: relative;
    height: 60px;
    background-image: url(../img/password-icon.png) !important;
    background-position: 20px center;
    background-repeat: no-repeat;
    background-size: 22px;
}

    .password-input .password-form-control {
        margin-left: 0;
        width: 85%;
        position: absolute;
        right: 0;
        padding-left: 0;
        border: none;
        background: transparent;
        border-radius: 0 30px 30px 0;
        height: 59px;
    }

.remember-me-input {
    width: 100%;
    display: inline-block;
    position: relative;
    height: 30px;
    color: #FFFFFF;
    text-align: left;
    margin-left: 5px;
}

    .remember-me-input .qualitycontrol-form-label {
        z-index: 1001;
        cursor: pointer;
    }

    .remember-me-input #chkRememberMe {
        cursor: pointer;
    }

.login-middle-sec {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    width: 73%;
}

.login-form-control:-webkit-autofill,
.login-form-control:-webkit-autofill:hover,
.login-form-control:-webkit-autofill:focus,
.login-form-control:-webkit-autofill:active,
.password-form-control:-webkit-autofill,
.password-form-control:-webkit-autofill:hover,
.password-form-control:-webkit-autofill:focus,
.password-form-control:-webkit-autofill:active {
    transition: background-color 600000s 0s, color 600000s 0s;
}


@media only screen and (max-width:1024px) {
    .login-right-part {
        max-width: 50%;
    }

    .reports-filters button img {
        vertical-align: middle;
        width: 20px !important;
    }

    .reports-filters button {
        padding: 10px 10px !important;
    }

    .fmdq-company-option .col-lg-3 {
        flex: 0 0 auto;
        width: 50%;
    }
}

@media only screen and (max-width:991px) {
    .login-middle-sec {
        width: 95%;
    }

    .reports-filters .col-2 {
        flex: 0 0 auto;
        width: 32.666667%;
    }

    .reports-filters .input-date {
        width: 100%;
    }

    .fmdq-company-option .col-md-2 {
        flex: 0 0 auto;
        width: 45%;
    }

    .fmdq-company-option .aline-right .col-md-1 {
        width: 10%;
    }
}

@media only screen and (max-width:767px) {
    .login-right-part {
        max-width: 100%;
    }

    .login-middle-sec {
        width: 75%;
    }

    .user-input .login-form-control {
        width: 90%;
    }

    .password-input .password-form-control {
        width: 90%;
    }

    .mobile-screen-767 .col-md-2 {
        width: 40%;
    }
}

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

    .login-middle-sec {
        width: 73%;
    }

    .user-input .login-form-control {
        width: 85%;
    }

    .password-input .password-form-control {
        width: 85%;
    }

    .fmdq-company-option .aline-right .col-md-1 {
        width: 20%;
    }

    .fmdq-company-option .cu-filter {
        margin-top: 0;
    }
}

@media only screen and (max-width:575px) {
    .user-input .login-form-control {
        width: 85%;
    }

    .password-input .password-form-control {
        width: 85%;
    }

    .fmdq-company-option .aline-right .col-md-1 {
        width: 14% !important;
    }

    .fmdq-company-option .col-lg-3 {
        flex: 0 0 auto;
        width: 100%;
    }
}

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

    .login-middle-sec {
        width: 100%;
    }

    .user-input .login-form-control {
        width: 80%;
    }

    .password-input .password-form-control {
        width: 80%;
    }

    .reports-filters .col-2 {
        flex: 0 0 auto;
        width: 50%;
    }

    .fmdq-company-option .aline-right .col-md-1 {
        width: 14% !important;
    }
}

#btnDashboardSearch {
    padding: 8px 13px !important;
}

/*New Login  ----END---- */

.customer-credit-limit-overlimit {
    background-color: #ff8000 !important;
}

.customer-credit-limit-underlimit {
    /*background-color:#ffffff;*/
}

.auditchecklist-dashboard-role-area {
    background-color: #dc354557 !important;
}

.auditchecklist-dashboard-role-documenttype {
    background-color: #0dcaf054 !important;
}

.customer-price-basicprice-5 {
    background-color: #3CB371 !important;
    color: #ffffff !important;
}

.customer-price-basicprice-not0 {
    background-color: #fa8072 !important;
    color: #ffffff !important;
}

.customer-price-basicprice-default {
    /*background-color:#ffffff;*/
}

.georgian-bar-order-no-cortizo {
    background-color: #fa8072 !important;
    color: #ffffff !important;
}

.georgian-bar-inset {
    background-color: #B0E0E6 !important;
    color: #000 !important;
}

.georgian-bar-gb-remove {
    background-color: #3CB371 !important;
    color: #ffffff !important;
}

.georgian-bar-gb-docs {
    background-color: #f99e2c !important;
    color: #ffffff !important;
    cursor: pointer;
}

.georgian-bar-gb-production {
    background-color: #FFD700 !important;
    color: #000000 !important;
    cursor: pointer;
}

.nav-customer-price {
    margin-top: 0px;
}

.nav-customer-price {
    margin-top: 0px;
}

#video {
    border: 1px solid black;
    box-shadow: 2px 2px 3px black;
    width: 320px;
    height: 240px;
}

#photo {
    border: 1px solid black;
    box-shadow: 2px 2px 3px black;
    width: 320px;
    height: 240px;
}

#canvas {
    display: none;
}

.camera {
    width: 340px;
    display: inline-block;
}

.output {
    width: 340px;
    display: inline-block;
    vertical-align: top;
}

#startbutton {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    bottom: 32px;
    background-color: rgb(0 150 0 / 50%);
    border: 1px solid rgb(255 255 255 / 70%);
    box-shadow: 0px 0px 1px 2px rgb(0 0 0 / 20%);
    font-size: 14px;
    font-family: "Lucida Grande", "Arial", sans-serif;
    color: rgb(255 255 255 / 100%);
}

.contentarea {
    font-size: 16px;
    font-family: "Lucida Grande", "Arial", sans-serif;
    width: 760px;
}

.HSEQ-issue-register-highpriority {
    background-color: #DE5D83 !important;
}

.HSEQ-issue-register-mediumpriority {
    background-color: #f99e2c !important;
    color: #ffffff !important;
}

.HSEQ-issue-register-lowpriority {
    background-color: #29AB87 !important;
}

.select2-dropdown.select2-dropdown--below {
    z-index: 9999;
}

.select2-dropdown.select2-dropdown--above {
    z-index: 9999;
}

#HASIsueLogRegisterHeader {
    margin-top: 20px;
}

#HSEQIssueLogHeadertext {
    font-weight: 600;
}

.notification-count {
    width: auto;
    height: auto;
    padding: 4px 6px;
    margin: 0;
    color: #000;
    background: #f58220;
    font-size: 10px;
    text-align: center;
    border-radius: 50%;
    /*position: absolute;
    left: 15px;*/
    /*top: 0;*/
}

.notification-dot {
    /*width: auto;
    height: auto;
    margin: 0;*/
    color: #f58220;
    font-size: 20px;
    text-align: center;
    position: absolute;
    left: 26px;
    line-height: 20px;
    /*top: -14px;*/
    /*top: 0;*/
}

.HSEQ-issue-register-IsReadHighlight {
    background-color: #B0C4DE !important;
}

#HASIsueLogRegisterHeader {
    font-weight: 600 !important;
    font-size: large;
}

.serviceandMaintenanceupload-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    /* Style the list items */
    .serviceandMaintenanceupload-ul li {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 5px;
        text-decoration: none;
        font-size: 15px;
        color: black;
        display: block;
        position: relative;
    }

        /* Add a light grey background color on hover */
        .serviceandMaintenanceupload-ul li:hover {
            background-color: royalblue;
        }

/* Style the close button (span) */
.serviceandMaintenanceclose {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0%;
    padding: 12px 16px;
    transform: translate(0%, -50%);
}

    .serviceandMaintenanceclose:hover {
        background: #bbb;
    }



.stillageLoadUpload-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    /* Style the list items */
    .stillageLoadUpload-ul li {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 5px;
        text-decoration: none;
        font-size: 15px;
        color: black;
        display: block;
        position: relative;
    }

        /* Add a light grey background color on hover */
        .stillageLoadUpload-ul li:hover {
            background-color: royalblue;
        }

/* Style the close button (span) */
.stillageLoadClose {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0%;
    padding: 12px 16px;
    transform: translate(0%, -50%);
}

    .stillageLoadClose:hover {
        background: #bbb;
    }


.HeatsoakReportBatch-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    /* Style the list items */
    .HeatsoakReportBatch-ul li {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 5px;
        text-decoration: none;
        font-size: 15px;
        color: black;
        display: block;
        position: relative;
    }

        /* Add a light grey background color on hover */
        .HeatsoakReportBatch-ul li:hover {
            background-color: royalblue;
        }

/* Style the close button (span) */
.HeatsoakBatchclose {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0%;
    padding: 12px 16px;
    transform: translate(0%, -50%);
}

    .HeatsoakBatchclose:hover {
        background: #bbb;
    }



.Heatsoakupload-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    /* Style the list items */
    .Heatsoakupload-ul li {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 5px;
        text-decoration: none;
        font-size: 15px;
        color: black;
        display: block;
        position: relative;
    }

        /* Add a light grey background color on hover */
        .Heatsoakupload-ul li:hover {
            background-color: royalblue;
        }

.HeatsoakUploadclose {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0%;
    padding: 12px 16px;
    transform: translate(0%, -50%);
}

    .HeatsoakUploadclose:hover {
        background: #bbb;
    }

/*
.jqx-grid-customer-relation {
    font-size:15px !important;
}*/
.jqx-grid-customer-relation .jqx-grid-column-header {
    font-size: 15px !important;
}

.jqx-grid-customer-relation .jqx-widget-content .jqx-grid-cell {
    font-size: 14px !important;
}


.COSHHRiskAssessmentUploadFile-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    /* Style the list items */
    .COSHHRiskAssessmentUploadFile-ul li {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 5px;
        text-decoration: none;
        font-size: 15px;
        color: black;
        display: block;
        position: relative;
    }

        /* Add a light grey background color on hover */
        .COSHHRiskAssessmentUploadFile-ul li:hover {
            background-color: royalblue;
        }

/* Style the close button (span) */
.COSHHRiskAssessmentClose {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0%;
    padding: 12px 16px;
    transform: translate(0%, -50%);
}

    .COSHHRiskAssessmentClose:hover {
        background: #bbb;
    }

/*#COSHHGHSClassification > .select2.select2-container > .selection > .select2-selection.select2-selection--multiple {
    min-height: 50px !important;
}*/
#COSHHGHSClassification span.select2.select2-container span.selection span.select2-selection.select2-selection--multiple {
    min-height: 50px !important;
}

span.select2.select2-container span.selection span.select2-selection.select2-selection--multiple {
    border: 1px solid #ced4da !important;
}

.COSHHControlMeasures {
    border: solid 1px #c5c5c5;
    border-radius: .25rem;
    padding: 2px 2px 2px 2px;
}

    .COSHHControlMeasures .nav-link {
        color: var(--bs-body-color);
        padding: 2px 4px;
    }

        .COSHHControlMeasures .nav-link.active {
            color: var(--bs-body-color) !important;
            border-radius: .25rem !important;
            background-color: #aaabad !important;
            border-color: #0f1010 !important;
        }

    .COSHHControlMeasures textarea {
        width: 100%;
        border: 1px solid #ced4da;
        resize: none;
        box-sizing: border-box;
    }

    .COSHHControlMeasures #v-pills-tabContent {
        width: 73% !important;
    }



.TaskRiskAssessmentUploadFile-ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    /* Style the list items */
    .TaskRiskAssessmentUploadFile-ul li {
        border: 1px solid #ddd;
        margin-top: -1px; /* Prevent double borders */
        background-color: #f6f6f6;
        padding: 5px;
        text-decoration: none;
        font-size: 15px;
        color: black;
        display: block;
        position: relative;
    }

        /* Add a light grey background color on hover */
        .TaskRiskAssessmentUploadFile-ul li:hover {
            background-color: royalblue;
        }

/* Style the close button (span) */
.TaskRiskAssessmentClose {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 0%;
    padding: 12px 16px;
    transform: translate(0%, -50%);
}

    .TaskRiskAssessmentClose:hover {
        background: #bbb;
    }

/*#TaskGHSClassification > .select2.select2-container > .selection > .select2-selection.select2-selection--multiple {
    min-height: 50px !important;
}*/
#TaskGHSClassification span.select2.select2-container span.selection span.select2-selection.select2-selection--multiple {
    min-height: 50px !important;
}

span.select2.select2-container span.selection span.select2-selection.select2-selection--multiple {
    border: 1px solid #ced4da !important;
}

.TaskControlMeasures {
    border: solid 1px #c5c5c5;
    border-radius: .25rem;
    padding: 2px 2px 2px 2px;
}

    .TaskControlMeasures .nav-link {
        color: var(--bs-body-color);
        padding: 2px 4px;
    }

        .TaskControlMeasures .nav-link.active {
            color: var(--bs-body-color) !important;
            border-radius: .25rem !important;
            background-color: #aaabad !important;
            border-color: #0f1010 !important;
        }

    .TaskControlMeasures textarea {
        width: 100%;
        border: 1px solid #ced4da;
        resize: none;
        box-sizing: border-box;
    }

    .TaskControlMeasures #v-pills-tabContent {
        width: 73% !important;
    }



.img-width {
    max-width: 150px;
    max-height: 150px;
}

/* style.css file*/


.container {
    width: 100%;
    max-width: 500px;
    margin: 5px;
}

    .container h1 {
        color: #ffffff;
    }

.section {
    background-color: #ffffff;
    padding: 50px 30px;
    border: 1.5px solid #b2b2b2;
    border-radius: 0.25em;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.25);
}

#my-qr-reader {
    padding: 20px !important;
    border: 1.5px solid #b2b2b2 !important;
    border-radius: 8px;
}

    #my-qr-reader img[alt="Info icon"] {
        display: none;
    }

    #my-qr-reader img[alt="Camera based scan"] {
        width: 100px !important;
        height: 100px !important;
    }



#html5-qrcode-anchor-scan-type-change {
    text-decoration: none !important;
    color: #1d9bf0;
}

video {
    width: 100% !important;
    border: 1px solid #b2b2b2 !important;
    border-radius: 0.25em;
}

.GlassTagNumber-received {
    background-color: #DE5D83 !important;
}

.GlassTagNumber-checkedin {
    background-color: #f99e2c !important;
    color: #ffffff !important;
}

.GlassTagNumber-completed {
    background-color: #29AB87 !important;
}

.GlassTagNumber-label {
    margin-bottom: 10px !important;
    padding: 0 !important;
    font-size: 22px;
    font-weight: 500;
}

#listBoxdropdownlisteditorjqxGridHeatsoakBatchDetailReasonCode {
    z-index: 999999 !important;
}

#dropdownlistArrowdropdownlisteditorjqxGridHeatsoakBatchDetailReasonCode {
    z-index: 999999 !important;
}

.heatsoak-pending {
    background-color: #DE5D83 !important;
    color: #FFFFFF !important;
}

.heatsoak-partial {
    background-color: #F99E2C !important;
    color: #FFFFFF !important;
}

.heatsoak-done {
    background-color: #29AB87 !important;
    color: #FFFFFF !important;
}

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

tr.selected {
    background-color: #808080 !important;
    color: white !important;
}

.card-max650 {
    max-height: 750px;
}

.card-max350 {
    max-height: 350px;
}

.card-max400 {
    max-height: 420px;
}

.newclass {
    min-height: 250px;
    height: auto;
    max-height: none;
    overflow: hidden;
}

#progressContainer {
    display: none; /* Hidden by default */
    margin-top: 20px;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.audit-checklist-break-test-footnotes {
    font-size: 14px !important;
    font-weight: 400;
}

.new-sale-summary-chart {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-shadow: 5px 10px 18px #888888;
    min-height: 300px;
}


select:disabled {
    opacity: 0.7 !important;
}

/*.jqx-grid-audit-checklist-form .jqx-scrollbar-thumb-state-normal {
    width: 5px;
}*/

/*.jqx-scrollbar-thumb-state-normal {
    width: 5px !important;
}
#jqxScrollWrapverticalScrollBarjqxGrid{
    width: 6px !important;
}
*/
/*
.audit-checklist-column-index {
    width: 30px !important;
}

.audit-checklist-cell-index {
    width: 30px !important;
}

.audit-checklist-column-doc {
    width: 255px !important;
}

.audit-checklist-cell-doc {
    width: 255px !important;
}

.audit-checklist-column-button {
    width: 50px !important;
}

.audit-checklist-cell-button {
    width: 50px !important;
}
*/

.audit-checklist-cell-doc {
    word-wrap: break-word;
    white-space: initial !important;
}

    .audit-checklist-cell-doc div {
        margin-top: 4px !important;
    }




@media only screen and (min-width:320px) and (max-width:355px) {
    #modalAuditChecklist div .modal-title-div {
        width: 40%;
    }

    #modalAuditChecklist h5 .modal-title {
        font-size: 13px !important;
    }

    #modalAuditChecklist .modal-date {
        width: 165px;
    }

    #modalAuditChecklist input .modal-date {
        font-size: 13px !important;
        margin: 0;
        width: 77%;
    }

    #modalAuditChecklist .modal-shift {
        margin-top: 1%;
        width: 10%;
    }

        #modalAuditChecklist .modal-shift select {
            width: 139px !important;
        }

    #modalAuditChecklist .modal-machine {
        margin-top: 1%;
    }

    #modalAuditChecklist .modal-user {
        margin-top: 1%;
    }

    #modalAuditChecklist .modal-close {
        position: absolute;
        right: 3px;
        top: 0;
    }

    #txtRemarks {
        width: 180px;
    }
}

@media only screen and (min-width:356px) and (max-width:400px) {
    #modalAuditChecklist div .modal-title-div {
        width: 46%;
    }

    #modalAuditChecklist h5 .modal-title {
        font-size: 13px !important;
    }

    #modalAuditChecklist .modal-date {
        width: 165px;
    }

    #modalAuditChecklist input .modal-date {
        font-size: 13px !important;
        margin: 0;
        width: 77%;
    }

    #modalAuditChecklist .modal-shift {
        margin-top: 1%;
        width: 10%;
    }

        #modalAuditChecklist .modal-shift select {
            width: 139px !important;
        }

    #modalAuditChecklist .modal-machine {
        margin-top: 1%;
    }

    #modalAuditChecklist .modal-user {
        margin-top: 1%;
    }

    #modalAuditChecklist .modal-close {
        position: absolute;
        right: 3px;
        top: 0;
    }

    #txtRemarks {
        width: 180px;
    }
}

@media only screen and (min-width:401px) and (max-width:500px) {
    #modalAuditChecklist div .modal-title-div {
        width: 56%;
    }

    #modalAuditChecklist h5 .modal-title {
        font-size: 13px !important;
    }

    #modalAuditChecklist .modal-date {
        width: 165px;
    }

    #modalAuditChecklist input .modal-date {
        font-size: 13px !important;
        margin: 0;
        width: 77%;
    }

    #modalAuditChecklist .modal-shift {
        margin-top: 1%;
        width: 40%;
    }

        #modalAuditChecklist .modal-shift select {
            width: 139px !important;
        }


    #modalAuditChecklist .modal-machine {
        /*margin-left: 23%;*/
        margin-top: 1%;
        width: 60%;
    }

        #modalAuditChecklist .modal-machine select {
            width: 170px !important;
        }

    #modalAuditChecklist .modal-user {
        /*margin-left: 10%;*/
        margin-top: 1%;
        width: 1%;
    }

        #modalAuditChecklist .modal-user select {
            width: 139px !important;
        }

    #modalAuditChecklist .modal-close {
        position: absolute;
        right: 3px;
        top: 0;
    }
}

@media only screen and (min-width:501px) and (max-width:600px) {
    #modalAuditChecklist .modal-title-div {
        width: 66%;
    }

    #modalAuditChecklist .modal-date {
        width: 34%;
    }

    #modalAuditChecklist .modal-shift {
        margin-top: 1%;
        width: 10%;
    }

        #modalAuditChecklist .modal-shift select {
            width: 139px !important;
        }

    #modalAuditChecklist .modal-machine {
        margin-left: 23%;
        margin-top: 1%;
        width: 34%;
    }

        #modalAuditChecklist .modal-machine select {
            width: 139px !important;
        }

    #modalAuditChecklist .modal-user {
        /*margin-left: 10%;*/
        margin-top: 1%;
        width: 1%;
    }

        #modalAuditChecklist .modal-user select {
            width: 139px !important;
        }

    #modalAuditChecklist .modal-close {
        position: absolute;
        right: 3px;
        top: 0;
    }
}

@media only screen and (min-width:601px) and (max-width:768px) {
    #modalAuditChecklist .modal-title-div {
        width: 66%;
    }

    #modalAuditChecklist .modal-date {
        width: 34%;
    }

    #modalAuditChecklist .modal-shift {
        margin-top: 1%;
        width: 25%;
    }

        #modalAuditChecklist .modal-shift select {
            width: 139px !important;
        }

    #modalAuditChecklist .modal-machine {
        margin-top: 1%;
        width: 35%;
    }

    /*#modalAuditChecklist .modal-machine select {
            width: 170px !important;
        }*/

    #modalAuditChecklist .modal-user {
        /*margin-left: 10%;*/
        margin-top: 1%;
        width: 25%;
    }

    /*#modalAuditChecklist .modal-user select {
            width: 139px !important;
        }*/

    #modalAuditChecklist .modal-close {
        position: absolute;
        right: 3px;
        top: 0;
    }
}

@media only screen and (min-width:769px) and (max-width:999px) {
    #modalAuditChecklist .modal-title-div {
        width: 66%;
    }

    #modalAuditChecklist .modal-date {
        width: 34%;
    }

    #modalAuditChecklist .modal-shift {
        margin-top: 1%;
        width: 25%;
    }

        #modalAuditChecklist .modal-shift select {
            width: 139px !important;
        }

    #modalAuditChecklist .modal-machine {
        /*margin-left: 23%;*/
        margin-top: 1%;
        width: 45%;
    }

    /*#modalAuditChecklist .modal-machine select {
            width: 170px !important;
        }*/

    #modalAuditChecklist .modal-user {
        /*margin-left: 10%;*/
        margin-top: 1%;
        width: 30%;
    }

    /*#modalAuditChecklist .modal-user select {
            width: 139px !important;
        }*/

    #modalAuditChecklist .modal-close {
        position: absolute;
        right: 3px;
        top: 0;
    }
}


@media only screen and (min-width:1000px) and (max-width:1120px) {
    #modalAuditChecklist .modal-title-div {
        width: 22%;
    }

    #modalAuditChecklist .modal-date {
        width: 17%;
    }

    #modalAuditChecklist .modal-shift {
        width: 16%;
    }

        #modalAuditChecklist .modal-shift select {
            width: 139px !important;
        }

    #modalAuditChecklist .modal-machine {
        width: 21%;
    }

    /*#modalAuditChecklist .modal-machine select {
            width: 170px !important;
        }*/

    #modalAuditChecklist .modal-user {
        width: 11%;
    }

    /*#modalAuditChecklist .modal-user select {
            width: 139px !important;
        }*/

    #modalAuditChecklist .modal-close {
        position: absolute;
        right: 3px;
        top: 0;
    }
}

.ScanEmployeelabel {
    font-size: 1.5rem;
    padding: 0.5rem;
    margin-bottom: 10px;
    display: inline-block;
    border-radius: 3px;
}

.success {
    background-color: #28a745;
    color: #fff;
}

.alert {
    background-color: #dc3545;
    color: #fff;
}

.warning {
    background-color: #ffc107;
    color: #212529;
}

.jqx-wrap-text {
    white-space: normal;
    word-wrap: break-word;
    height: auto;
    max-width: 200px; /* Adjust the width according to your requirement */
}

.QualityControlImageUpload {
    max-width: 256px;
    max-height: 150px;
}

.modal-header.ui-draggable-handle {
    cursor: move;
}

.stock-scanning-barcode-not-match {
    background-color: #df8686 !important;
}

.title-favicon {
    width: 30px;
    height: 25px;
    margin: 0px 8px 0px 0px;
}

.submenu-icon {
    width: 27px !important;
    height: 22px !important;
    margin: 0px 5px 0px 0px !important;
}

.purchase-order-status-completed {
    background-color: #29AB87 !important;
}

.purchase-order-status-partialreceived {
    background-color: #f99e2c !important;
    color: #ffffff !important;
}

.purchase-order-status-notreceived {
    background-color: #DE5D83 !important;
}

.word-wrap-grid-col1 {
    z-index: 0 !important;
    box-sizing: border-box !important;
}


.inline-input {
    display: inline-block;
    width: auto;
    margin-left: 10px;
}

.coshh-risk-matrix-low {
    background-color: #3CB371 !important;
}

.coshh-risk-matrix-medium {
    background-color: #FFFF00 !important;
}

.coshh-risk-matrix-high {
    background-color: #FF6347 !important;
}

.task-risk-matrix-low {
    background-color: #3CB371 !important;
}

.task-risk-matrix-medium {
    background-color: #FFFF00 !important;
}

.task-risk-matrix-high {
    background-color: #FF6347 !important;
}

.min-height-56 {
    min-height: 56px !important;
}

.p-b-5 {
    min-height: 56px !important;
}

.no-resize {
    resize: none;
}

.width-100 {
    width: 100% !important;
}

.width-custom {
    width: var(--custom-width) !important;
}


#page-header {
    background-color: #3c3c3c;
    color: #ffffff;
}

.card-head-container {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    font-weight: bold;
}

.card-action-buttons {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}

.page-header {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}

.customer-delivery-order-main-box {
    /*display: none;*/
    font-size: 16px !important;
}

.customer-delivery-order-icon-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-width-24 {
    width: 24px !important;
}

.logo-width-20 {
    width: 20px !important;
}

.customer-delivery-order-cards-text {
    font-size: 16px !important;
}

.mr-5 {
    margin-right: 5px;
}

@media (max-width: 991px) {
    .customer-delivery-order-main-box {
        display: block;
    }

    .customer-delivery-order-jqxgrid {
        display: none;
    }
}

@media (min-width: 992px) {
    .customer-delivery-order-main-box {
        display: none;
    }

    .customer-delivery-order-jqxgrid {
        display: block;
    }
}

@media (max-width: 499px) {
    .customer-delivery-order-main-box {
        font-size: 14px !important;
    }
}



.stillage-load-reexam-status-done {
    background-color: #29AB87 !important;
}

.stillage-load-reexam-status-due {
    background-color: #f99e2c !important;
    color: #ffffff !important;
}

.stillage-load-reexam-status-overdue {
    background-color: #DE5D83 !important;
}

.camera-btn {
    width: 50px;
    height: 40px;
    margin-top: 18px;
}


#control-measure-container .accordion-body {
    display: block;
}

#control-measure-container .accordion-button {
    background: rgba(24, 24, 24, 0.8) !important;
    color: #ffffff !important;
}

    #control-measure-container .accordion-button:hover {
        background-color: #da2c46 !important;
        color: #ffffff !important;
    }

.server-and-maintenance-completed {
    background-color: #29AB87 !important;
}

.server-and-maintenance-due {
    background-color: #f99e2c !important;
    color: #ffffff !important;
}

.server-and-maintenance-overdue {
    background-color: #DE5D83 !important;
}

.server-and-maintenance-recentadd {
    background-color: #5FA5F8 !important;
}


.task-risk-accordion-header {
    position: relative;
}

    .task-risk-accordion-header:hover .task-risk-header-button {
        z-index: 100 !important;
    }

/*.task-risk-accordion-header:hover .task-risk-header-div {
        z-index: 100 !important;
    }*/

.task-risk-header-button {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    /*transform: translateY(-50%) translateX(-70%);*/
    z-index: -100;
}
/*
.task-risk-header-div {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -100;
}
    .task-risk-header-div .dropdown-menu{
        min-width: 300px !important;
    }*/


.server-and-maintenance-ticketcreated {
    background-color: #BAEB33 !important;
}

.break-test-selection-modal .modal-body {
    min-height: 180px;
}

.stock-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px;
    margin-bottom: 15px;
    width: 100%;
}

.stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 5px;
    border-bottom: 1px solid #eee;
}

    .stock-row:last-child {
        border-bottom: none;
    }

.stock-header {
    font-weight: bold;
    background: #e9ecef;
    border-bottom: 2px solid #ddd;
    font-size: 13px;
}

.stock-desc {
    flex: 1;
    font-size: 12px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal; /* allow text wrapping */
    word-break: break-word; /* break long words if needed */
    line-height: 1.4em;
}

.stock-qty {
    flex-basis: 30px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #007bff;
}

.stock-actions {
    flex-basis: 50px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

    .stock-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px;
    }


.card-body-no-padding {
    padding: 1rem 0rem !important;
}

.scannstocklist-itemdesc {
    word-wrap: normal;
}

.glassstock-submit {
    background-color: #DE5D83 !important;
}

.glassstock-not-submit {
    background-color: #29AB87 !important;
}

.glassstock-submit-color {
    color: #DE5D83 !important;
}

.glassstock-not-submit-color {
    color: #29AB87 !important;
}

.igpbatch_detail {
    background-color: #FFC0CB !important;
}

.igpbatch_detail_batchno {
    background-color: #B8B8FF !important;
}

.igpbatch-actual-qty-incomplete {
    background-color: #DE5D83 !important;
}

.igpbatch-actual-qty-complete {
    background-color: #29AB87 !important;
}

.sticky-header2 {
    position: sticky;
    top: 86px; /* or adjust for navbar height */

    z-index: 9;
    padding: 0.5rem 1rem;
    /*border-bottom: 2px solid #dee2e6;*/ /* optional */
}


/*@media only screen and (min-width:1501px) and (max-width:1739px) {*/
@media only screen and (min-width:801px) {
    .sticky-header2 {
        position: sticky;
        top: 86px; /* or adjust for navbar height */
        z-index: 9;
        padding: 0.5rem 1rem;
        /*border-bottom: 2px solid #dee2e6;*/ /* optional */
    }
}

/*@media only screen and (min-width:1501px) and (max-width:1739px) {*/
@media only screen and (min-width:881px) {
    .sticky-header2 {
        position: sticky;
        top: 88px; /* or adjust for navbar height */
        z-index: 9;
        padding: 0.5rem 1rem;
        /*border-bottom: 2px solid #dee2e6;*/ /* optional */
    }
}


/*@media only screen and (min-width:1501px) and (max-width:1739px) {*/
@media only screen and (min-width:1201px) {
    .sticky-header2 {
        position: sticky;
        top: 93px; /* or adjust for navbar height */
        z-index: 9;
        padding: 0.5rem 1rem;
        /*border-bottom: 2px solid #dee2e6;*/ /* optional */
    }
}

/*@media only screen and (min-width:1501px) and (max-width:1739px) {*/
@media only screen and (min-width:1501px) {
    .sticky-header2 {
        position: sticky;
        top: 98px; /* or adjust for navbar height */
        z-index: 9;
        padding: 0.5rem 1rem;
        /*border-bottom: 2px solid #dee2e6;*/ /* optional */
    }
}

.sticky-header {
    position: sticky;
    top: 49px; /* or adjust for navbar height */
    background: #a7afc7; /* same as page background */
    z-index: 10;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid #dee2e6; /* optional */
}

    .sticky-header.is-stuck {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        background-color: #4e5366;
        color: #ffffff;
    }

    .sticky-header .lorry-logo > img {
        display: none;
    }

    .sticky-header .weight-logo > img {
        display: none;
    }

    .sticky-header .lorry-logo {
        background-image: url('../img/truck-black.svg');
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 5px;
        margin-bottom: -2px;
    }

    .sticky-header.is-stuck .lorry-logo {
        background-image: url('../img/truck-white.svg');
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 5px;
        margin-bottom: -2px;
    }

    .sticky-header .weight-logo {
        background-image: url('../img/weight.svg');
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 5px;
        margin-bottom: -2px;
    }

    .sticky-header.is-stuck .weight-logo {
        background-image: url('../img/weight-white.svg');
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 5px;
        margin-bottom: -2px;
    }

    .sticky-header .stillage-logo {
        background-image: url('../img/stillage-black.svg');
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 25px;
        display: inline-block;
        margin-right: 5px;
        margin-bottom: -5px;
    }

    .sticky-header.is-stuck .stillage-logo {
        background-image: url('../img/stillage-white.svg');
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 25px;
        display: inline-block;
        margin-right: 5px;
        margin-bottom: -5px;
    }

    .sticky-header h4 {
        margin-bottom: 2px !important;
        display: inline-block !important;
    }

    .sticky-header.is-stuck h4 {
        margin-bottom: 4px !important;
        display: inline-block !important;
    }



.offcan-lorry {
    /*position: sticky;
    top: 49px;*/ /* or adjust for navbar height */
    background: #3d7283; /* same as page background */
    color: #ffffff;
    z-index: 10;
    padding: 0.5rem 1rem;
    /*border-bottom: 2px solid #dee2e6;*/ /* optional */
}


    .offcan-lorry .lorry-logo {
        background-image: url('../img/truck-white.svg');
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 5px;
        margin-bottom: -2px;
    }

    .offcan-lorry h4 {
        margin-bottom: 2px !important;
        display: inline-block !important;
    }

.offcan-cust {
    margin-top: 5px;
}

    .offcan-cust .cust-logo {
        display: inline-block;
    }

    .offcan-cust .cust-title {
        display: inline-block;
    }

.customer-delivery-report-headers h5 {
    margin-bottom: 4px !important;
    display: inline-block !important;
}

.customer-delivery-report-headers img {
    margin-bottom: 6px !important;
    display: inline-block !important;
}



.customer-delivery-report-card-header {
    background-color: #D8C4B6;
    color: #000000;
}

.customer-delivery-report-table thead {
    background-color: #F5EFE7;
    color: #000000;
    cursor: auto;
}

.customer-delivery-report-rooflight-card-header {
    background-color: #B3C8CF;
    color: #000000;
}

.customer-delivery-report-rooflight-table thead {
    background-color: #E5E1DA;
    color: #000000;
    cursor: auto;
}
/*
.customer-delivery-report-card-header {
    background-color: #00b6b0;
    color: #000000;
}

.customer-delivery-report-table thead {
    background-color: #fff7d6;
    color: #000000;
}*/

.customer-delivery-report-total-row {
    font-weight: bold;
    background-color: #F5EFE7;
    color: #000000;
}

.pointer {
    cursor: pointer;
}

.center-text {
    text-align: center;
    vertical-align: middle
}

.customer-delivery-report-glass-single {
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: #CD853F;
}

.customer-delivery-report-glass-mirror {
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: #4682B4;
}

.customer-delivery-report-glass-site2 {
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: #32CD32;
}

.customer-delivery-report-glass-double-single {
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: #00D1CA;
}

.customer-delivery-report-glass-template {
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: #778899;
}

.customer-delivery-report-glass-double {
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: #7B68EE;
}

.pre-wrap {
    white-space: pre-wrap; /* Preserve line breaks */
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

.rotate-img {
    width: 150px;
    height: 150px;
}

.rotate {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
/* Checkmark animation */
.checkmark-icon {
    font-size: 20px;
    color: green;
    font-weight: bold;
    animation: pop 0.6s ease-out infinite;
}

@keyframes pop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}


.scrollTop {
    display: block;
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: #3CB371;
    padding: 10px;
    border-radius: 10px;
    z-index: 300;
}

.scrollTopHide {
    display: none;
}

body.offcanvas-scroll-lock {
    position: fixed;
    width: 100%;
    overflow: visible !important;
}

.table-valign-middle-all {
    vertical-align: middle;
}

    .table-valign-middle-all th {
        vertical-align: middle;
    }

    .table-valign-middle-all td {
        vertical-align: middle;
    }


.button-dark {
    border: none;
    background: rgba(24, 24, 24, 0.8);
    color: #fff;
}

.button-round {
    border-radius: 50px !important;
    padding: 3px !important;
}

.img-16 {
    width: 16px !important;
    height: 16px !important;
}

.hover-row:hover {
    background-color: #ffeeba;
    cursor: pointer;
}



.traffic-color-green {
    background-color: #29AB87 !important;
}

.traffic-color-yellow {
    background-color: #f99e2c !important;
    color: #ffffff !important;
}

.traffic-color-red {
    background-color: #DE5D83 !important;
}

#contenttablejqxGridStockOrder .jqx-grid-validation {
    left: auto !important;
    right: 10px !important;
}
.st-tracking-addresstype-factory {
    background-color: #FFC0CB !important;
}
.st-tracking-stillagestatus-Infactory {
    background-color: #3fb28f !important;
}

.st-tracking-stillagestatus-clientside {
    background-color: #08bcc5 !important;
}
.st-tracking-stillagestatus-overdue {
    background-color: #ffa500 !important;
}
.st-tracking-stillagestatus-inproduction {
    background-color: #f36945 !important;
}

#accordion-stillage-examination {
    height: 600px;
    overflow-y: scroll;
}

    #accordion-stillage-examination .accordion-button {
        background: rgba(24, 24, 24, 0.8) !important;
        color: #ffffff !important;
    }

        #accordion-stillage-examination .accordion-button:hover {
            background-color: #da2c46 !important;
            color: #ffffff !important;
        }


#custom-toggle-default {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 60px;
    background-color: #fff;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 0 2px;
    margin: 0;
    cursor: pointer;
    direction: ltr !important;
}

    #custom-toggle-default.tgl-def::-webkit-slider-thumb {
        /*background-color: orange;*/
        background-color: #787878;
    }

    #custom-toggle-default.tgl-on::-webkit-slider-thumb {
        background-color: #29AB87;
    }

    #custom-toggle-default.tgl-off::-webkit-slider-thumb {
        background-color: #DE5D83;
    }

    #custom-toggle-default::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
    }

    #custom-toggle-default:focus {
        outline: none;
    }