@charset "UTF-8";
/*
 * jQuery File Upload UI Plugin CSS 9.0.0
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */

.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle {
  margin-bottom: 5px;
}
.progress-animated .progress-bar,
.progress-animated .bar {
  background: url(../img/progressbar.gif) !important;
  filter: none;
}
.fileupload-process {
  float: right;
  display: none;
}
.fileupload-processing .fileupload-process,
.files .processing .preview {
  display: block;
  width: 32px;
  height: 32px;
  background: url("../img/loading.gif") center no-repeat;
  background-size: contain;
}
.files audio,
.files video {
  max-width: 300px;
}

.template-upload .upload-info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.template-upload .upload-name-error {
  flex: 1 1 140px;
  min-width: 0;
}
.template-upload .upload-name-error .name {
  overflow-wrap: break-word;
}
.template-upload .upload-size-progress {
  flex: 1 1 100px;
  min-width: 90px;
}
.template-upload .upload-buttons {
  flex: 0 0 auto;
  white-space: nowrap;
}
.template-upload .upload-preview-row {
  clear: both;
  margin-top: 8px;
  max-width: 100%;
}
.template-upload .upload-preview-row img,
.template-upload .upload-preview-row video,
.template-upload .upload-preview-row canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* has-error dismiss cross — flex-variant adapter.
   file-storage-form.css (3e24a40d) styles the rejected-file Cancel as a round
   × via float:right + margin:-50px, tuned for the flow layout (variant A). In
   this flex row (.upload-info-row) float is ignored and the negative margin
   flings the cross up/out, detaching it from the alert box. Pin it to the
   alert box top-right corner instead.
   In has-error the row switches to display:block: .upload-size-progress is
   already display:none and the emptied .upload-buttons (its .start is hidden,
   its .cancel is now position:absolute → out of flow) collapses to zero, so
   the block-level .upload-name-error / red .error box span the FULL row width.
   The row's right edge then equals the alert box's right edge, and the cross
   (position:absolute, right:8px relative to the position:relative row) lands
   exactly on the box's top-right corner — not 34px past it as it did while the
   flex button column still reserved width (padding-right:30px on
   .upload-name-error keeps the text clear beneath the cross). Scoped to
   .has-error .upload-info-row so the normal flex layout (variant A/B) is
   untouched; 5-class specificity beats the base .has-error .cancel rule
   regardless of stylesheet load order. */
.file-storage-list .template-upload.has-error .upload-info-row {
  position: relative;
  display: block;
}
/* file-storage-form.css puts padding-right:30px on the .upload-name-error
   WRAPPER as well as on .error/.name. In this block row that wrapper padding
   shrinks the red .error box's own width, so its red background stopped 30px
   short of the row's right edge while the absolute cross sits at the row edge —
   the cross landed in the bare wrapper padding, to the RIGHT of the red box
   ("outside the box"). Strip the wrapper padding here: .error then spans the
   full block-row width and its OWN padding-right:30px extends the red
   background under the cross, so right:8px pins the cross onto the box's red
   top-right corner. .name keeps its own padding (harmless). Scoped to
   .upload-info-row → variant A untouched. */
.file-storage-list .template-upload.has-error .upload-info-row .upload-name-error {
  padding-right: 0;
}
.file-storage-list .template-upload.has-error .upload-info-row .cancel {
  float: none;
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}

@media (max-width: 767px) {
  .fileupload-buttonbar .toggle,
  .files .toggle,
  .files .btn span {
    display: none;
  }
  .files .name {
    width: 80px;
    word-wrap: break-word;
  }
  .files audio,
  .files video {
    max-width: 80px;
  }
  .files img,
  .files canvas {
    max-width: 100%;
  }
}