/* Ajax photo upload */
.au-box{
  /* Thumbnail blinking while the photo is uploading */
  --au-pulse-time:2s;   /* one blink every 2 seconds */
  --au-pulse-min:0;     /* opacity at the start/end of the blink (0 = fully transparent) */
  --au-pulse-max:1;     /* opacity in the middle of the blink (1 = 100%) */
  --au-thumb:80px;
  max-width:560px;font-family:inherit;font-size:inherit;text-align:left;
}
.au-box *{box-sizing:border-box}
.au-drop{display:block;position:relative;border:2px dashed #9aa5b1;border-radius:8px;padding:14px 12px;text-align:center;cursor:pointer;background:rgba(255,255,255,.55);color:inherit;transition:background .2s,border-color .2s}
.au-drop:hover,.au-drop.au-over{border-color:#2a7ae2;background:rgba(42,122,226,.10)}
.au-drop input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.au-choose{display:inline-block;padding:7px 16px;border-radius:5px;background:#2a7ae2;color:#fff;font-weight:bold;pointer-events:none}
.au-droptext{display:block;margin-top:6px;font-size:90%;opacity:.8;pointer-events:none}
.au-hint{margin-top:5px;font-size:85%;opacity:.7}
.au-list{margin-top:8px}
.au-item{display:flex;align-items:flex-start;gap:10px;padding:8px;margin-bottom:6px;border:1px solid #cfd6dd;border-radius:6px;background:rgba(255,255,255,.7)}
.au-item.au-err{border-color:#d33;background:rgba(221,51,51,.06)}
.au-left{flex:0 0 auto;width:var(--au-thumb);text-align:center}
.au-thumb{width:var(--au-thumb);height:var(--au-thumb);background:#e9edf1;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.au-thumb img{max-width:100%;max-height:100%;display:block;transition:transform .2s}
.au-rot{margin-top:4px;display:flex;justify-content:space-between}
.au-btn{cursor:pointer;border:1px solid #b9c2cc;background:#f6f8fa;color:#333;border-radius:4px;line-height:1;padding:0;width:32px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.au-btn:hover{background:#e6ebf0}
.au-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.au-main{flex:1 1 auto;min-width:0}
.au-name{font-size:90%;word-break:break-all;margin-bottom:5px}
.au-bar{position:relative;height:16px;border-radius:8px;background:#dfe5ea;overflow:hidden}
.au-fill{height:100%;width:0;background:#2a7ae2;transition:width .15s linear}
.au-pct{position:absolute;left:0;right:0;top:0;text-align:center;font-size:11px;line-height:16px;color:#111}
.au-item.au-ok .au-fill{background:#3aa655}
.au-status{margin-top:4px;font-size:85%;opacity:.85}
.au-msg{margin-top:4px;color:#c00;font-size:90%}
.au-del{flex:0 0 auto;cursor:pointer;border:1px solid #c9a0a0;background:#fff2f2;color:#a00;border-radius:4px;padding:5px 10px;font-size:90%}
.au-del:hover{background:#ffdede}
.au-note{margin-top:6px;font-size:90%}
.au-note.au-wait{padding:6px 8px;border-radius:5px;background:#fff7d6;border:1px solid #e6d27a;color:#6b5600}
.au-note.au-warn{color:#c00}
.au-hidden{display:none !important}

/* The blink: thumbnail opacity 0 -> 100% -> 0 once in 2 seconds */
@keyframes au-pulse{
  0%{opacity:var(--au-pulse-min)}
  50%{opacity:var(--au-pulse-max)}
  100%{opacity:var(--au-pulse-min)}
}
.au-item.au-busy .au-thumb{animation:au-pulse var(--au-pulse-time) ease-in-out infinite}


.au-num{font-weight:bold;font-size:90%;margin-bottom:2px}
.au-slots{margin-top:2px}
.au-slot{display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;padding:6px 8px;margin-bottom:4px;border:1px dashed #b9c2cc;border-radius:6px;background:rgba(255,255,255,.45);cursor:pointer}
.au-slot:hover,.au-slot.au-over{border-color:#2a7ae2;background:rgba(42,122,226,.08)}
.au-slot input{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.au-slotname{font-size:90%}
.au-choose-s{padding:4px 12px;font-size:90%}
@media (max-width:480px){
  .au-box{--au-thumb:72px}
  .au-del{padding:5px 7px}
}

.au-savebar{margin-top:8px}
.au-save{cursor:pointer;border:0;border-radius:5px;background:#3aa655;color:#fff;font-weight:bold;padding:8px 18px;font-size:100%}
.au-save:disabled{background:#a9b4be;cursor:default}

.au-audio .au-thumb{background:transparent}
.au-audio .au-drop{padding:10px 12px}