span.clickable {
  cursor: pointer;
}

span.multimedia {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  vertical-align: top;
}
span.multimedia > .multimediaImage {
  position: relative;
  min-height: 50px;
  min-width: 50px;
}
span.multimedia > .multimediaImage > img,
span.multimedia > .multimediaImage > video {
  /* this should be in sync with the MAX_THUMBNAIL_HEIGHT */
  /* in multimedia.react.js */
  max-height: 200px;
  max-width: 100%;
  display: inherit;
}
/* Prevent borders around images without src attribute */
span.multimedia > .multimediaImage > img:not([src]) {
  visibility: hidden;
}
span.multimedia > .multimediaImage svg.removeUpload {
  display: none;
  position: absolute;
  top: 3px;
  right: 3px;
  color: white;
  border-radius: 50%;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  background-color: rgba(34, 34, 34, 0.67);
}
span.multimedia:hover > .multimediaImage svg.removeUpload {
  display: inherit;
}
span.multimedia svg.uploadError {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  color: white;
  border-radius: 50%;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  background-color: #dd2222;
}
span.multimedia > svg.progressIndicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto auto;
  width: 50px;
  height: 50px;
}

:global(.CircularProgressbar-background) {
  fill: #666 !important;
}
:global(.CircularProgressbar-text) {
  fill: #fff !important;
}
:global(.CircularProgressbar-path) {
  stroke: #fff !important;
}
:global(.CircularProgressbar-trail) {
  stroke: transparent !important;
}

.loadingIndicatorContainer {
  position: absolute;
}
