.orders-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.manual-planning-order-list-table {
    position: relative;
    min-width: 100%;
    min-height: 30%;
    display: flex;
    flex-grow: 1;
}

#orders-panel::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Track */
#orders-panel::-webkit-scrollbar-track {
    background-color: white !important;
}

/* Handle */
#orders-panel::-webkit-scrollbar-thumb {
    background: var(--Logistic-Suit-Secondary) !important;
    border-radius: 10px !important;
}

    /* Handle on hover */
    #orders-panel::-webkit-scrollbar-thumb:hover {
        background: var(--Logistic-Suit-Secondary) !important;
    }



#orders-panel:hover {
    /*overflow: scroll;*/
}

.ordersPanelCornerForResize {
    position: absolute;
    z-index: 1000;
    inset-inline-start: 0;
    inset-block-end: 0;
    background: #ffffffd9;
    transform: rotate(90deg);
    height: 16px;
    border-radius: 213px 0px 0px 0px;
}
/* radzen search bar for orders */
.orderPanelTitleAndSearch {
    align-items: center;
    gap: 16px;
}

.orderPanelSearch {
    padding: 0;
    height: 24px;
    min-width: 240px;
}

    .orderPanelSearch input {
        height: 24px;
        width: 100%
    }

.ordersResizeLine {
    position: absolute;
    inset-inline-start: -9px;
    width: 12px;
    height: 100%;
    background: transparent;
    z-index: 200;
}

.ordersPanelLegends {
    display: flex;
    gap: 12px;
    color: #000000;
    padding: 10px 0;
    justify-content: start;
}

    .ordersPanelLegends .singleOrderStatus {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .ordersPanelLegends .singleOrderStatus .statusLabel {
            width: 11px;
            height: 7px;
            display: block;
            box-shadow: 2px 2px 4px 0px #00000040;
        }

        .ordersPanelLegends .singleOrderStatus.New .statusLabel {
            background: #ffffff
        }

        .ordersPanelLegends .singleOrderStatus.Force_closed .statusLabel {
            background: #0C1B35;
        }

        .ordersPanelLegends .singleOrderStatus.Executed .statusLabel {
            background: rgb(140, 140, 140, 0.7) !important;
        }

        .ordersPanelLegends .singleOrderStatus.Dispatched .statusLabel {
            background: #00FFFF
        }

        .ordersPanelLegends .singleOrderStatus.inPlanning .statusLabel {
            background: #FCF44C
        }

        .ordersPanelLegends .singleOrderStatus.PartiallyPlanned .statusLabel {
        
            background-color: #D3F4FF; /* Cyan background */
            background-image: linear-gradient(to right, white 1.5px, transparent 1px); /* Vertical white lines */
            background-size: 2.5px 100%;
            border: 1px solid #D3F4FF;
        }

        .ordersPanelLegends .singleOrderStatus.PartiallyDispatched .statusLabel {
            background-color: #00FFFF; /* Cyan background */
            background-image: linear-gradient(to right, white 1.5px, transparent 1px); /* Vertical white lines */
            background-size: 2.5px 100%;
            border: 1px solid #00FFFF;
        }

        .ordersPanelLegends .singleOrderStatus.plannedInNorma .statusLabel {
            /*background: #A7D7FA;*/
            background: #D3F4FF;
        }

        .ordersPanelLegends .singleOrderStatus.plannedexternal .statusLabel {
            background: #BAFFD6
        }

        .ordersPanelLegends .singleOrderStatus.inProcess .statusLabel {
            background: #5000AC
        }

.ordersKpisShown {
    padding-block-end: 44px;
}

@container resizablepanel (max-width: 700px) {
    .ordersPanelLegends .singleOrderStatus .statusText {
        font-size: 8px;
    }

    .norma-live-manual-planning-container p {
        font-size: 10px;
    }

    .norma-live-manual-planning-container  {
        padding-inline: 0 !important;
    }
}

    @container resizablepanel (max-width: 800px) and (min-width: 700px) {
        .ordersPanelLegends .singleOrderStatus .statusText {
            font-size: 10px;
        }
    }