#upload_button {
  vertical-align: middle;

  overflow: hidden;

  position: relative;

  padding: 0;

  margin-left: 5px;
}

#upload_button > span {
  display: inline-block;

  padding: 5px 10px;

  padding-left: 30px;

  background-image: url(../img/tag-plus.png);

  background-position: 5px center;

  background-repeat: no-repeat;
}

#upload_button.disabled {
  background-color: silver;
}

#upload_button.disabled input {
  display: none;
}

#upload_button input {
  cursor: pointer;

  font-size: 200px;

  opacity: 0;

  position: absolute;

  right: 0;

  top: 0;

  z-index: 1;
}

#upload_list {
  list-style: none outside none;

  margin: 0;

  padding: 0;

  overflow: auto;
}

#upload_list li {
  width: 100px;

  height: 100px;

  border: 4px solid #d1efdf;

  background-color: white;

  float: left;

  margin: 10px 5px;

  position: relative;

  background-position: center center;

  background-repeat: no-repeat;
}

#upload_list .upload_name {
  position: absolute;

  bottom: 0px;

  font-size: 10px;

  left: 0px;

  right: 0px;

  padding: 5px;

  background-color: rgba(255, 255, 255, 0.5);

  width: auto;

  word-wrap: break-word;

  overflow: hidden;
}

#upload_list li.uploading {
  background-image: url(../img/loader-med.gif);
}

#upload_list li:first-child {
  margin-left: 0;
}

.upload_progress {
  position: absolute;

  border: 1px solid silver;

  bottom: 5px;

  left: 5px;

  right: 5px;

  height: 10px;
}

.upload_cancel,
.upload_remove {
  display: block;

  cursor: pointer;

  position: absolute;

  opacity: 0.5;

  top: 5px;

  right: 5px;

  width: 16px;

  height: 16px;

  background-image: url(../img/tag-delete.png);
}

.upload_cancel:hover,
.upload_remove:hover {
  opacity: 1;
}

.upload_progress > div {
  background-color: darkgreen;

  width: 0px;

  height: 10px;
}

.upload_error {
  position: absolute;

  top: 70px;

  left: 5px;

  right: 5px;

  color: darkred;

  transform: translate(0, -50%);
}

#upload_list li.uploading .upload_remove {
  display: none;
}

#upload_list li.finished .upload_progress {
  display: none;
}

#upload_list li.finished .upload_cancel {
  display: none;
}

#upload_list li.cancelled .upload_remove {
  display: none;
}

#upload_list li.cancelled .upload_cancel {
  display: none;
}

#upload_list li.cancelled .upload_progress > div {
  background-color: gray;
}

#upload_list li.cancelled .upload_cancel {
  display: none;
}

#upload_list li.failed .upload_progress > div {
  background-color: darkred;
}

.green-title-bar {
  width: 100%;
  background-color: #7bc97a;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

.green-title-bar h3 {
  font-weight: 500;
}