@media (max-width: 400px) {
    .stockP{
        font-size: 11px !important;
    }
}

@media (max-width: 839px) {
    .shipmentCart{width: 50% !important; font-size: 11px !important;}
    h6{ font-size: 0.8rem !important; }
}
@media (min-width: 840px) and (max-width: 989px) {
    .shipmentCart{width: 33.3% !important; font-size: 12px !important;}
}
@media (min-width: 990px) and (max-width: 1149px) {
    .shipmentCart{width: 25% !important;}
}
@media (min-width: 1150px) and (max-width: 1349px) {
    .shipmentCart{width: 20% !important; font-size: 12px !important;}
}
@media(min-width: 1350px) and (max-width: 1469px) {
    .shipmentCart{width: 16.6% !important; font-size: 12px !important;}
}
@media (min-width: 1470px) and (max-width: 1649px) {
    .shipmentCart{width: 16.6% !important;}
}
@media (min-width: 1650px) {
    .shipmentCart{width: 12.5% !important;}
}

.timelineleft:before{
    inset-inline-start: 49% !important;
}

.timelineleft>li>.fa, .timelineleft>li>.glyphicon, .timelineleft>li>.ion{
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    position: unset !important;
}

.stepImg{
    background-color: #ffffff;
    border-radius: 50%;
    width: 90px;
    height: auto;
    padding: 5px;
    border: 2px solid #e1e1e1;
}

.trackStep{
    text-align: center;
}

.filename {
    width: 100%; /* Adjust the width as needed */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block; /* or inline-block */
}

.myTd{
    vertical-align: middle !important;
    white-space: nowrap !important;
}

@media (min-width: 983px) {
    #blContainer{
        min-height: 235px;
    }
}

.clickable-card{
    cursor: pointer;
}

.myDelete{
    position: absolute;
    background-color: #ff6e6e;
    color: white;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    line-height: 8px;
    top: 3px;
    left: 3px;
    display: block;
    border: none;
    padding: 0 0 3px 0;
}

#myTotal1 {
    text-align: left;
}

#myTotal2 {
    text-align: left;
}

#userProfile {
    text-align: right;
}

@media print {

    .print{ display: table-row !important; }
    #QrInfo{ width: 70% !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; padding-top: 30px !important;}
    #logo{ width: 25% !important; display: flex !important; align-items: end !important;}
    #QR { width: 30% !important; }
    #Info { width: 40% !important; }
    #invoiceHeader{ margin-bottom: 30px !important; }
}

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

.link-button {
    background: none;
    border: none;
    color: blue; /* You can change the color to match your link color */
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit; /* Ensure the font size matches surrounding text */
    padding: 0; /* Remove padding to make it consistent with links */
}

.link-button:hover {
    color: darkblue; /* Change color on hover for better UX */
    text-decoration: none; /* Optionally remove underline on hover */
}

.chosen-container .chosen-results li{
    padding: 5px 10px !important;
}

.table td{
    padding: 5px !important;
}
table.table-bordered.dataTable tbody td{
    padding: 0 10px !important;
    white-space: nowrap;
}

@media (min-width: 1200px) {
    .col-xl-5 {
        flex: 0 0 auto;
        width: 20%; /* لأن 100 ÷ 5 = 20 */
    }
}
.shadow-png {
    filter: drop-shadow(0 3px 3px rgba(59, 59, 59, 0.8)); /* 0px أزاحة X, 0px Y, 2px للانتشار, #000 للون */
}
@media (max-width: 575px) {
    .modal-dialog {
        width: 78% !important;
    }
}

tr input[type="text"],
tr input[type="number"] {
    border: 0;
    width: 100%;
}

.number-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
    justify-content: space-between;
}

.number-wrapper input {
    border: none !important;
    text-align: center !important;
    width: 100%;
    padding: 8px;
}

.number-wrapper input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.number-wrapper button {
    background: #f0f0f0;
    padding: 0 12px;
    font-size: 22px;
    border: none;
    cursor: pointer;
    user-select: none;
    z-index: 1000;
    line-height: 1.8;
}

.number-wrapper button:active {
    background: #e4e4e4;
}
.red-cell {
    background-color: rgb(255 219 219) !important;
}

.red-cell .length-input {
    color: red !important;
    background-color: rgb(255 219 219) !important;
    font-weight: bold;
}

.red-cell {
    border: 2px solid #ff0000 !important;
}

@media (min-width: 767px) {
    .timelineleft:before {
        content: "";
        position: absolute;
        top: 50% !important; /* ارتفاع الخط */
        left: 20px !important; /* بداية من اليسار */
        right: 20px !important; /* نهاية عند اليمين */
        height: 2px !important;
        width: calc(100% - 40px) !important; /* العرض ناقص الهوامش */
        background: rgba(152, 166, 173, 0.3);
        margin: 0 auto; /* توسيط إذا أردت */
        border-radius: 2px;
    }
}
@media (max-width: 768px) {
    .trackStep{
        text-align: left !important;
        min-width: 28%;
    }
    .trackDates{
        min-width: 28%;
        text-align: right !important;
    }
    .timelineleft:before {
        inset-inline-start: 50% !important;
    }
}