.orderEditor .searchClient{
    border: 2px solid #aaa; 
    /*background: orange;*/
    width: -webkit-fill-available;
    float:top;
    /*top:-20px;*/
    /*left: -10px;*/
    /*opacity: 0.7;*/
    /*position: absolute;*/
    font-size: 1.2em;
}

.orderEditor .delivery{
    /*border: 1px solid orange;*/
    padding: 10px;
    margin-top: 10px;
    /*font-size: 20px;*/
}
/*.orderEditor .delivery input{

}*/

.orderEditor .comment{
    width: 100%;
}
/*.orderEditor .courierMsg{
    width: 250px;
    float: right;
    line-height: 1;
}*/
.orderEditor .pcount{
    width: 40px;
}

.orderEditor .ctime{
    position: absolute;
    width: 400px;
    border-top: 1px solid orange;
    bottom: 2px;
    right: 2px;
}

/*.orderEditor .pnl-order{
    position: relative;
    width: 550px;
}*/

.orderEditor .jsgrid-cell { 
    overflow: hidden; 
}

.orderEditor .jsgrid-pager { text-align: center; }

.orderEditor .total-row {
    font-weight: bold;
    position:absolute;
    left:0px;
    bottom:0px;
    width:100%;
    height: 34px;
    /*border: 1px solid;*/
    
    /*line-height: 20px;*/
    /*text-align: center;*/
    /*vertical-align: middle;*/
}

/* Style the tab */
.orderEditor .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    margin-left: 6px;
    margin-right: 6px;
}

/* Style the buttons inside the tab */
.orderEditor .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 8px 16px;
    transition: 0.3s;
    /*font-size: 17px;*/
}

/* select:invalid {
    background-color: rgb(148, 0, 0);
} */

select:invalid {
    border: 2px solid red;
}

/* Change background color of buttons on hover */
.orderEditor .tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.orderEditor .tab button.active {
    background-color: #ccc;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* Style the tab content */
.orderEditor .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

.ui-autocomplete-input.ui-autocomplete-loading {
    /*background: url("../images/ui-anim_basic_16x16.gif") right center no-repeat;*/
    background: url(images/ajax-loader.gif) white no-repeat center right;
}
.ui-autocomplete{
    z-index: 9999;
}
/*.ui-autocomplete-input{
    opacity: 0.8;
    background: url("../images/user16.png") white right center no-repeat;
}*/ 

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .orderEditor {
        display: flex;
        flex-direction: column !important;
        padding: 8px;
        gap: 8px;
    }

    .orderEditor .floating-actions {
        left: 8px !important;
        right: 8px !important;
        width: auto;
    }

    .orderEditor .w3-flex {
        flex-direction: column !important;
        height: auto !important;
    }

    .orderEditor .w3-flex > div {
        width: 100% !important;
        flex: 0 0 auto !important;
    }

    .orderEditor img.w3-bar-item {
        width: 60px !important;
    }

    .orderEditor .order-type-bar {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
        flex-wrap: wrap;
    }
}

/* keep type switch visible and wrapping on compact viewports */
.orderEditor .order-type-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 0;
    align-items: center;
    min-height: 40px;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
}

.orderEditor .order-type-bar .w3-button {
    flex: 1 1 100px;
    min-width: 80px;
    text-align: center;
    white-space: normal;
}

.orderEditor .order-header {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    padding: 4px 0;
}