body {
    padding: 0;
    margin: 0;
}
.disabledIp {
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    color: light-dark(rgb(84, 84, 84), rgb(170, 170, 170));
    border-color: rgba(118, 118, 118, 0.3);
}
nav {
    height: 55px;
    border-bottom: 2px solid #4CB8C4;
    background-image: linear-gradient(to right, #4CB8C4, #3CD3AD);
    width: 100%;
}

    nav a {
        color: white;
        font-weight: 500;
    }

    nav navbar-brand {
        font-size: 18px;
    }

.navbar-collapse li {
    margin-right: 1rem;
}

nav .navbar-brand {
    margin-right: 2.5rem;
    padding: 0.5rem 1rem;
    font-size: 1.7rem;
}

nav navbar-collpase {
    font-size: 17px;
    font-weight: 500;
}

.middle-box {
    background: yellow;
}

.content-area .reset-button {
    display: inline-block;
    vertical-align: top;
    margin-left: 1rem;
}

.section-header {
    border-bottom: 1.5px solid #dddddd;
    font-weight: 600;
    font-size: 18px;
    color: #2c8576;
    padding-left: 5px;
    margin-bottom: 8px;
    color: #3a7a7a;
    background: #ededed;
}

.orders-header {
    width: 92vw;
    display: inline-block;
}

.content-area {
    margin: 10px;
}

.table-header {
    font-weight: 400;
    color: #193c37;
    font-size: 16.5px;
}

.container {
    padding: 0;
}

    .container .column-name {
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 100%;
        max-width: 10rem;
        white-space: nowrap;
    }

@media (min-width: 1200px) {
    .container {
        max-width: 98%;
    }
}

.table input[type="text"] {
    width: 100%;
}

.content-area .table td,
.table th {
    padding: 0.35rem;
}

.order-number-cell {
    width: 13%;
}


.planner-section .custom-select {
    height: 1.8rem;
    padding: 0 0 0 2px;
}

.planner-section .input-cell {
    width: 15%;
}

.planner-section thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #eee;
}

.button-primary {
    background-color: #379a9b;
    border-color: #379a9b;
    padding: 2px 5px;
    vertical-align: top;
}

    .button-primary:hover {
        color: #fff;
        background-color: #1f5d5e;
        border-color: #1f5d5e;
    }

.planner-row label {
    text-align: right;
    margin-right: 3px;
}

.planner-row .delivery-date-label {
    max-width: 6.5rem;
}

.planner-row .order-details {
    display: inline-block;
    width: 13.5rem;
    line-height: 1.3;
    padding-left: 0;
    vertical-align: top;
}

    .planner-row .order-details textarea {
        width: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
        height: 41px;
        line-height: 1.1;
    }

    .planner-row .order-details .text-area {
        line-height: 1;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 13rem;
        height: 65px;
        vertical-align: top;
    }

.planner-row .order-no {
    vertical-align: top;
    min-width: 3rem;
}

.planner-row .label {
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 10px;
    width: 5.5rem;
}

.order-cell {
    width: 6%;
}

.dept-cell {
    width: 7%;
}

.item-cell {
    width: 15%;
}

.qty-cell {
    width: 7%;
}

.week-cell {
    width: 6%;
}

.status-cell {
    width: 12%;
}

.comments-cell {
    width: 13%;
}

    .comments-cell textarea {
        width: 100%;
        height: 30px;
    }

.forms-section {
    max-height: 31rem;
}

    .forms-section img {
        width: 7.5rem;
    }

#carouselExampleIndicators {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 0;
    right: 0;
    top: 0;
    width: 38%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.modal-content {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

#carouselExampleIndicators .close {
    position: absolute;
    top: 8px;
    right: 15px;
    color: #137f8d;
    font-size: 50px;
    font-weight: bold;
    transition: 0.3s;
    opacity: 1;
    z-index: 2;
}

    #carouselExampleIndicators .close:hover,
    #carouselExampleIndicators .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

.carousel-control-next,
.carousel-control-prev {
    top: 45%;
    height: 4rem;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    height: 30px;
    background-color: #137f8d;
}

.carousel-indicators {
    position: sticky;
    top: 98%;
}

    .carousel-indicators li {
        background-color: rgb(51 52 52 / 46%);
        height: 7px;
        width: 60px;
    }

    .carousel-indicators .active {
        background-color: #4bd7e9;
    }

.unplanned-order {
    margin-right: 1rem;
}

    .unplanned-order tbody tr,
    .planned-order tbody tr,
    .held-orders tbody tr {
        cursor: pointer;
    }

    .unplanned-order tbody .selected-order,
    .planned-order tbody .selected-order,
    .held-orders tbody .selected-order {
        background-color: #89faff !important;
    }

    .unplanned-order .cust-ref-cell {
        min-width: 4rem;
        max-width: 4rem;
    }

    .unplanned-order .order-cell {
        min-width: 4.5rem;
    }

    .unplanned-order thead th,
    .planned-order thead th,
    .held-orders thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #eee;
    }

.held-orders .stock-code {
    max-width: 3.3rem;
}

.held-orders .stock-description {
    max-width: 7rem;
}

.planned-order .date-cell {
    max-width: 5rem;
}

.container .col-3,
.container .col-4,
.container .col-5 {
    margin-left: 0;
    padding-right: 0;
}

.content-area .table td,
.table th {
    padding: 0.2rem;
}

/*********************======================== handsonTable =======================**************/
.handsontable td, .handsontable th {
    padding: 4px;
}
/* ////========== filters =============//// */
.dropdown-filter-dropdown {
    position: unset;
}


/* /////============= Machine capacity =========== //// */

.machine-capacity .row {
    margin-right: -12px;
    margin-left: -13px;
}

.machine-capacity-table {
    max-height: 83vh;
    background-color: #242424;
    color: #e9e9e9;
    padding: 3px 5px;
}


    /* #161616 */


    /* #282828 */


    /* #032846 */

    .machine-capacity-table thead th,
    .machine-capacity-table td {
        border: none;
        text-align: center;
        padding: 2px 5px;
        min-width: 5rem;
    }

    .machine-capacity-table tbody th {
        white-space: nowrap;
        border: none;
        font-weight: 500;
    }

    .machine-capacity-table tbody td {
        border: 1px solid #0f4748;
    }

    .machine-capacity-table tbody .red-text {
        color: #db0c0c;
    }

    .machine-capacity-table tbody .green-text {
        color: red;
    }

.table-hover tbody tr:hover {
    background-color: rgb(7 153 123 / 10%);
}


/* green color #00a300 */


/* red #db0c0c */
/* /////////////////////// ========== Bay Delivery ============== /////////////////////// */

.bay-delivery-table {
    max-height: 87vh;
    background-color: #242424;
    color: #e9e9e9;
    padding: 3px 5px;
    text-align: center;
}

    .bay-delivery-table thead th {
        border: none;
    }

    .bay-delivery-table tbody tr:hover {
        background-color: rgb(7 153 123 / 10%);
    }

    .bay-delivery-table td {
        padding: 2px;
        border: none;
        height: 1.6rem;
    }

.e-gridheader .e-table {
    height: 55px;
}

.e-grid .e-headercelldiv {
    line-height: 16px !important;
    height: auto !important;
}

.e-grid.e-responsive .e-headercelldiv {
    white-space: pre-wrap !important;
}

.e-grid.e-resize-lines .e-gridheader th.e-headercell.e-lastcell {
    border-right-width: 1px !important;
}

.e-grid .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv {
    margin-right: 0 !important;
}

.e-grid .e-icon-filter::before, .e-grid .e-icon-filter.e-filtered::before,
.e-grid-menu .e-icon-filter::before, .e-grid-menu .e-icon-filter.e-filtered::before {
    content: '\e714';
}

@media (max-width:997px){
    .mainNavBarCtn ul {
        background-image: linear-gradient(to right, #4CB8C4, #3CD3AD);
        padding-inline:30px;

    }

}