.logo-image::before, .hero-image::before, .item-image::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; background: linear-gradient(to right, #B3B3B3 10px, transparent 6px) repeat-x, linear-gradient(to bottom, #B3B3B3 10px, transparent 6px) repeat-y, linear-gradient(to right, #B3B3B3 10px, transparent 6px) repeat-x bottom, linear-gradient(to bottom, #B3B3B3 10px, transparent 6px) repeat-y right; background-size: 16px 4px, 4px 16px, 16px 4px, 4px 16px; background-position: top left, top left, bottom left, top right; pointer-events: none; }
.logo-image:has(img[src^="data:"])::before, .hero-image:has(img[src^="data:"])::before, .item-image:has(img[src^="data:"])::before { content: none; display: none; }
.logo-image img, .hero-image img, .item-image img { cursor: pointer; }
.logo-image:hover, .hero-image:hover, .item-image:hover { transform: scale(1.02); }

.image-input .del { display: none; position: absolute; top: 6px; right: 6px; padding: 10px 10px; border: 1px solid #333; 
    border-radius: 10px; background: #fff; font-size: 16px; color: #333; opacity: 0.2; transform: scale(1); transition: all 0.1s; }
.image-input:has(img[src^="data"]) .del { display: flex; }
.image-input:has(img[src^="data"]):hover .del { opacity: 0.7; }
.image-input:has(img[src^="data"]) .del:hover { transform: scale(1.2); top: 8px; right: 8px; opacity: 0.9; cursor: pointer; }

.finances-box { border: 1px solid silver; border-radius: 8px; padding: 20px; background-color: #ffffff; }
.orders-addresslsit { margin-left: 20px; }
.orders-addresslsit div:empty { display: none; }
.order-payment-status { padding: 11px 16px 11px 18px; border-radius: 10px; margin: 0px; box-shadow: inset 0 0 10px 6px #ffffff55; }
.order-row { cursor: auto; }

.order-expected { margin: -10px; padding: 10px; cursor: default;}

.order-actions-button { margin: -10px; padding: 10px; cursor: pointer; }
.order-actions-menu { transition: all .4s; padding: 10px 0; line-height: 40px; color: #444; top: -5px; right: -12px; background: #ffffff; border: 1px solid #cccccc; border-radius: 10px; box-shadow: 0 0 4px #b3b3b3db; min-width: 280px; z-index: 1; }
.order-actions-menu-item { border: 1px solid transparent; padding: 0 20px; }
.order-actions-menu-item.hover:hover { background-color: #ececec; border: 1px solid #dddddd; cursor: pointer; }

.order-status-button i.fa-square-check { display: none; }
.order-status-button.active i.fa-square { display: none; }
.order-status-button.active i.fa-square-check { display: block; margin:0 !important; }
.order-status-button.active { background-color: #505050 !important; color: #eee !important; border: 1px solid #444; }
.order-actions-tracking { padding: 7px 10px 6px 10px; outline: none; border: 1px solid #aaa; border-radius: 5px; width:100%; box-shadow: 0px 0px 3px 0px #00000033;  }
.order-actions-close-button { position: absolute; right: -10px; top: -3px; padding: 15px; margin: -15px; cursor: pointer; }

.store-qr-code-icon { position: absolute; right: 1px; top: 1px; border-radius: 10px; width: 20px; height: 20px; cursor: pointer; background: #ffffff; border: 10px solid #ffffff; box-sizing: content-box; }

.bg-success { background-color: #cef1cf; color: #2f813a; }
.bg-warning { background-color: #ffe0b4; color: #975800; }
.bg-danger  { background-color: #ffc0be; color: #a34949; }

@media(max-width: 850px) {
    .order-columns { flex-direction: column; }
    .order-columns .orders-addresslsit { width: 100%; }
    .order-payment-status { margin-left: 0; }
    .orders-addresslsit { margin-left: 0; }
    .order-delivery-details { margin-left: 10px; }
}