.dropzone { padding: 5px 10px 15px 10px; min-height: 129px; position: relative; }
.dropzone.dz-clickable a { cursor: pointer; }
.dropzone .dz-placeholder { text-align: center; color: #888; position: absolute; bottom: 0; left: 0; right: 0; }
.dropzone .dz-preview { background: #fff; border-radius: 10px; border: 1px solid #e8e8e8; margin: 10px; white-space: nowrap; height: 80px; min-height: auto; }
.dropzone .dz-preview:hover { border-color: #bbb; z-index: inherit; }
.dropzone .dz-size { white-space: normal }
.dropzone.horizontal .dz-preview .dz-details .dz-size span.dz-pagecount-label { padding-left: 5px; }
.dropzone .dz-advice {}

.dropzone.boxy .dz-preview { width: 210px; }
.dropzone.horizontal .dz-preview { display: block; width: auto; }

.dropzone .dz-preview .dz-image { z-index: 0; border-radius: 10px 0 0 10px; width: 78px; height: 78px; position: absolute; }
.dropzone .dz-preview.dz-file-preview .dz-image { border-radius: 10px 0 0 10px; }
.dropzone .dz-preview .dz-image IMG { width: 78px; height: 78px; object-fit: cover; object-position: left top; }
.dropzone .dz-preview:hover .dz-image IMG { filter: none; transform: none; }
.dropzone.horizontal .dz-preview .dz-image { border-right: 1px solid #eee; }

.dropzone .dz-preview .dz-details { opacity: 1; }

.dropzone.boxy .dz-preview .dz-details { z-index: 0; display: flex; flex-direction: column; width: 100%; padding: 4px 3px; text-align: right; }
.dropzone.boxy .dz-preview .dz-details .dz-size { order: 2; margin-bottom: 0; }
.dropzone.boxy .dz-preview .dz-details .dz-filename { order: 1; }

.dropzone.boxy .dz-preview .dz-details .dz-filename:not(:hover) span, .dropzone.boxy .dz-preview .dz-details .dz-size:not(:hover) span { border: 1px solid rgba(255,255,255,0.85); }
.dropzone.boxy .dz-preview .dz-details .dz-filename:hover span, .dropzone.boxy .dz-preview .dz-details .dz-size:hover span { background: #fff; border: 1px solid rgba(240,240,240,0.9); }
.dropzone.boxy .dz-preview .dz-details .dz-filename span, .dropzone.boxy .dz-preview .dz-details .dz-size span { background: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.85); padding: 3px 6px; }
.dropzone.boxy .dz-preview .dz-details .dz-filename, .dropzone.boxy .dz-preview .dz-details .dz-size { padding: 3px 0 3px 3px; }

.dropzone.horizontal .dz-preview .dz-details { text-align: left; margin-left: 80px; font-size: inherit; line-height: inherit; min-width: auto; max-width: none; width: auto; right: 65px; padding: 4px 0 4px 6px; }
.dropzone.horizontal .dz-preview .dz-details .dz-filename span, .dropzone.horizontal .dz-preview .dz-details .dz-size span { padding: 0; }
.dropzone.horizontal .dz-preview .dz-details .dz-filename:hover span, .dropzone.horizontal .dz-preview .dz-details .dz-size:hover span { border-color: transparent; }

.dropzone.horizontal .dz-preview .dz-details .dz-filename { overflow: hidden; text-overflow: ellipsis; padding-left: 0; }
.dropzone.horizontal .dz-preview.dz-title-inputted .dz-details .dz-filename { overflow: auto; text-overflow: unset; }

.dropzone.horizontal .dz-preview .dz-index { position: absolute; top: 8px; left: 35px; font-weight: bold; font-size: 16px; display: none; }

.dropzone A.dz-pdf-conversion { font-size: 95%; }
.dropzone .dz-pagecount-input { width: 50px; }
.dropzone .dz-input { cursor: auto; }
.dropzone .dz-input.dz-error { border-color: darkred; background: #fcc; }


.dropzone.horizontal .dz-preview .dz-details .dz-filename span, .dropzone.horizontal .dz-preview .dz-details .dz-size span, .dropzone.horizontal .dz-preview .dz-details .dz-filename:hover span, .dropzone.horizontal .dz-preview .dz-details .dz-size:hover span {
    background: none;
}

.dropzone .dz-preview .dz-remove { text-align: right; display: inline; bottom: 0; right: 22px; padding: 8px; position: absolute; font-size: 20px; border-radius: 10px; font-family: "FontAwesome"; text-decoration: none; color: #777; }
.dropzone .dz-preview .dz-remove:hover { text-decoration: none; color: #222; }
.dropzone.horizontal .dz-preview .dz-remove { background: #fff; }

.dropzone .dz-preview .dz-crop-button { bottom: 30px; right: 1px; position: absolute; cursor: pointer; display: none; }

.dropzone.horizontal .dz-preview .dz-info-message { z-index: 1; position: absolute; top: auto; left: 90px; bottom: 0; width: auto; border-radius: 8px 8px 0 0; padding: 0.3em 1.2em 0.1em; background: #111; color: #fff; transition: opacity 0.3s ease; }

.dropzone .dz-preview .dz-error-message { top: 80px; left: 80px; width: auto; opacity: 1; white-space: normal; }

SELECT.dz-mediaType-input { width: 250px; }

.dropzone.horizontal .dz-preview > * { z-index: 2; }
.dropzone.horizontal .dz-error-message { z-index: 10; }
.dropzone.horizontal .dz-error-mark { z-index: 0; }

/* progress styling */
.dropzone .dz-preview .dz-progress { height: 40px; margin-top: -20px; width: 120px; margin-left: -60px; border: 1px solid rgba(0,0,0,0.1); }
.dropzone .dz-preview .dz-progress .dz-upload { bottom: auto; height: 16px; }
.dropzone .dz-progress .dz-progressText { position: absolute; text-align: center; bottom: 0; width: 100%; }

/* handle */
.dropzone .dz-handle {
    border-left: 1px solid #e8e8e8;
    position: absolute;
    right: 0;
    width: 20px;
    height: 100%;
    vertical-align: middle;
    box-sizing: border-box;
    padding: 30px 5px;
    color: #888;
    font-size: 16px;
    cursor: grab;
}
.dropzone .dz-handle:active:hover {
    cursor: grabbing;
}
.dropzone .dz-preview:hover .dz-handle {
    border-color: #bbb;
}

/* details */
.dropzone.horizontal .dz-details {
    display: flex;
    flex-direction: column;
}

/* filename */
.dropzone.horizontal .dz-filename SPAN, .dropzone.horizontal .dz-filename A {
    font-size: 16px;
    font-weight: bold;
    color: black;
}
.dropzone.horizontal .dz-filename {
    order: 1;
    margin-bottom: 7px;
}

/* size */
.dropzone.horizontal .dz-size {
    order: 2;
    padding-left: 10px;
}

/* default text */
.dropzone .dz-default {
    display: none;
}

/* inline buttons */
.dropzone .dz-inline-button {
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 10px;
    height: 80px;
    flex: 1;
    margin: 10px;
    box-sizing: border-box;
    padding: 5px;
    cursor: pointer;
    color: #555;
    font-size: 18px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    filter: drop-shadow(0 0 2px #fff);
}
.dropzone .dz-inline-button::before {
    font-size: 130px;
    line-height: 70px;
    position: absolute;
    color: rgba(0,0,0,0.08);
}
.dropzone .dz-inline-button:hover, .dz-drag-hover .dz-add-buttons .dz-add-button.dz-file-button {
    border-width: 2px;
    padding: 4px;
    color: #333;
    background: rgba(0,0,0,0.01);
}
.dropzone .dz-inline-button:hover::before, .dz-drag-hover .dz-add-buttons .dz-add-button.dz-file-button::before {
    color: rgba(0,0,0,0.12);
}

/* add buttons */
.dropzone .dz-add-buttons {
    display: flex;
    margin: 10px;
}
.dz-max-files-reached .dz-add-buttons {
    display: none;
}
.dropzone .dz-add-button {
    margin: 0 0 0 10px;
}
.dropzone .dz-add-button:first-of-type {
    margin: 0;
}
.dropzone .dz-add-buttons .dz-add-button::before {
    content: '+';
}

/* crop button */
.dropzone .dz-crop-button::before {
    content: '\f125';
    font-family: "FontAwesome";
    font-size: 70px;
}

/* dropzone box */
.dz-drag-hover.dropzone, .dz-drag-hover .dropzone {
    border-color: #0d71bb;
}
.dz-max-files-reached .dropzone.dz-clickable, .dropzone.dz-max-files-reached.dz-clickable {
    cursor: default;
}
.dropzone {
    pointer-events: none;
}
.dropzone .dz-preview, .dropzone .dz-add-button, .dropzone .dz-inline-button {
    pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   A source still waiting for its artwork.

   The component draws every tile in its success/complete state, because as far
   as it is concerned the entry is settled. Here the entry is settled and the
   artwork is not, so the tile is re-dressed as a slot expecting a file rather
   than one already holding it.

   Two markers, because they mean different things:
     .dz-artwork-outstanding   a file is expected here  (order form AND supply form)
     .dz-artwork-suppliable    ...and it can be sent now (supply form only)
   The upload affordance and the drop states are scoped to the second, so the
   order form -- where the promise is being made, not kept -- does not invite a
   drop it has nowhere to send.

   The icon is an inline SVG, not a font glyph: FontAwesome is NOT loaded on the
   workflow form page, so the '\f0ee' this first used rendered as a missing-
   character box. Nothing here may depend on a font that page does not have.
   --------------------------------------------------------------------------- */
/* A slot is an ordinary tile. Everything about how it is drawn -- the white, the 1px #e8e8e8 edge, the
   corner radius, and the #bbb it darkens to on hover -- comes from `.dropzone .dz-preview` above, and is
   deliberately NOT restated here.
   ⚠️ Restating it is not harmless: `.dropzone .dz-preview.dz-artwork-outstanding` has the same specificity
   as `.dropzone .dz-preview:hover` and sits later in the file, so a `border` declared here silently beats
   the hover rule and the slot stops darkening like every other tile. Only differences belong in this block.
   The one real difference is the height: a tile is a fixed 80px, and a slot has to grow to fit the name, the
   estimate and the button. */
.dropzone .dz-preview.dz-artwork-outstanding {
    height: auto;
    min-height: 82px;
}

/* An ordinary tile is a fixed 80px with its details absolutely positioned on top, which is fine for a
   filename and a size. A waiting slot carries four things -- what it is, its name, the estimate and the way
   in -- and at 125px they used to spill out of the tile and across the one below it. Putting the details back
   into the flow lets the tile take the height it actually needs. `right` is dropped with the positioning, so
   the room the handle occupies is kept as a margin instead. */
.dropzone.horizontal .dz-preview.dz-artwork-outstanding .dz-details {
    position: static;
    margin-right: 65px;
    display: flex;
    flex-direction: column;
    padding: 6px 0 6px 8px;
}
/* Children stretch rather than shrink-wrapping. dz_resize_detailElements() narrows the name field whenever
   the row it sits in overflows, so a shrink-wrapped row makes it measure its own content and squeeze the
   field down to nothing. */
.dropzone.horizontal .dz-preview.dz-artwork-outstanding .dz-details > * { align-self: stretch; }

/* The handle sets no `top`, so it took its position from the flow -- which used to start at the top of the
   tile because the details were absolute, and now starts below them. Pin it back to the tile. */
.dropzone.horizontal .dz-preview.dz-artwork-outstanding .dz-handle { top: 0; }
/* source order is button, advice, name, estimate; read order is what it is, its name, its size, how to send */
.dropzone.horizontal .dz-preview.dz-artwork-outstanding .dz-details .dz-advice   { order: 1; }
.dropzone.horizontal .dz-preview.dz-artwork-outstanding .dz-details .dz-filename { order: 2; }
.dropzone.horizontal .dz-preview.dz-artwork-outstanding .dz-details .dz-size     { order: 3; }
.dropzone.horizontal .dz-preview.dz-artwork-outstanding .dz-details .dz-supply   { order: 4; }

.dropzone .dz-preview.dz-artwork-outstanding .dz-details .dz-advice { color: #666; }
/* the name field was being clipped by the details box rather than fitting inside it */
.dropzone .dz-preview.dz-artwork-outstanding .dz-details .dz-filename { max-width: 100%; }
.dropzone .dz-preview.dz-artwork-outstanding .dz-title-input { max-width: 100%; box-sizing: border-box; }

/* nothing on a slot is an upload in progress, so the component's own progress and outcome marks
   have nothing to say here and would only sit on top of the content now filling the tile */
.dropzone .dz-preview.dz-artwork-outstanding .dz-progress,
.dropzone .dz-preview.dz-artwork-outstanding .dz-success-mark,
.dropzone .dz-preview.dz-artwork-outstanding .dz-error-mark { display: none; }

/* the generic file-type icon is a lie on a slot with no file in it -- but an empty square is not much better,
   so the slot gets a clock: this is a file we have been promised and will ask for later. The supply form
   replaces it with the upload arrow below, because there the file can be sent now. */
.dropzone .dz-preview.dz-artwork-outstanding .dz-image IMG { display: none; }
.dropzone .dz-preview.dz-artwork-outstanding .dz-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    /* The divider itself is the default `.dropzone.horizontal .dz-preview .dz-image` border-right; only its
       height is wrong here. `.dz-image` is absolutely positioned at a fixed 78x78 -- right for an 80px tile,
       but a slot grows to fit what it carries, so the rule stopped partway down and left the bar hanging.
       Pinning top and bottom lets it take the tile's height, whatever that turns out to be. */
    top: 0;
    bottom: 0;
    height: auto;
}

/* only where a file can actually be sent now */
.dropzone .dz-preview.dz-artwork-outstanding.dz-artwork-suppliable {
    /* the only tiles whose colours move -- the hover and drag states below. An ordinary tile does not
       animate, so this is scoped to the ones that do rather than sitting on every slot. */
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.dropzone .dz-preview.dz-artwork-outstanding.dz-artwork-suppliable .dz-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%239fb0c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
}
.dropzone .dz-preview.dz-artwork-outstanding.dz-artwork-suppliable:hover {
    border-color: #0d71bb;
    background-color: #f5f9fd;
}
.dropzone .dz-preview.dz-artwork-outstanding.dz-artwork-suppliable:hover .dz-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%230d71bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}

/* a file is being dragged somewhere on the page: show every slot that wants one */
BODY.dz-file-dragging .dropzone .dz-preview.dz-artwork-outstanding.dz-artwork-suppliable {
    border-color: #0d71bb;
    background-color: #f0f7fd;
}
BODY.dz-file-dragging .dropzone .dz-preview.dz-artwork-outstanding.dz-artwork-suppliable .dz-image {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%230d71bb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
}
/* ...and this is the one under the pointer */
.dropzone .dz-preview.dz-artwork-outstanding.dz-artwork-suppliable.dz-slot-hover {
    border-color: #0d71bb;
    background-color: #e4f0fa;
    box-shadow: inset 0 0 0 1px #0d71bb;
}

/* the file is on its way to this source; nothing else may be started on it */
.dropzone .dz-preview.dz-supplying { opacity: 0.7; }
.dropzone .dz-preview.dz-supplying .dz-image { background-image: none; }

/* On a supplied slot the name row carries the label, the field AND the link to what was sent, and a tile is
   nowrap by default -- so dz_resize_detailElements() squeezes the field down to make the row fit on one line,
   leaving a name too narrow to read. Letting the row wrap gives the field its width back and costs a line
   only when one is actually needed. */
.dropzone.horizontal .dz-preview.dz-artwork-suppliable .dz-details .dz-filename { white-space: normal; }

/* the way in, on the tile itself */
.dropzone .dz-preview .dz-supply { margin-top: 3px; }
.dropzone .dz-preview .dz-supply-button {
    font: inherit;
    line-height: normal;
    color: #0d71bb;
    background: #fff;
    border: 1px solid #b9c4cf;
    border-radius: 4px;
    padding: 2px 10px;
    cursor: pointer;
}
.dropzone .dz-preview .dz-supply-button:hover:not(:disabled) {
    border-color: #0d71bb;
    background: #f0f7fd;
}
.dropzone .dz-preview .dz-supply-button:disabled { color: #999; cursor: default; }

/*# sourceMappingURL=/Users/ben/dev/printerface/release-main/build/production/neon/WEB-INF/classes/com/pirionsystems/ne/sites/standard/skin/staticContent/style/dropzone-local.css.map */