/* (A) ENTIRE PAGE */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

/* (B) WRAPPER */
.upwrap { 
  max-width: 100%; 
}

/* (C) DRAG-DROP UPLOAD */
/* (C1) DROP ZONE */
.updrop {
  color: #555;
  font-weight: 700;
  text-align: center;
  padding: 50px 0;
  border-radius: 10px;
  border: 2px dashed #ddd;
  width:100%;
  max-width:30vw;
  min-height:30vw;
  float:left;
}
.updrop.highlight {
/*  background: #eee;*/
  border: 2px dashed #aaaaaa;
}

/* (D) UPLOAD STATS */
.upstat { 
  margin-top: 10px;
  width:49%;
  float:right;
}
.uprow {
  padding: 15px;
/*  background: #ededed;*/
}
.upstat .uprow:nth-child(even) { background: #f5f5f5; }
.upfile { margin-bottom: 5px; }
.upprog, .upbar, .uppercent {
  width: 100%;
  height: 20px;
}
.upprog {
  position: relative;
  background: #fff;
}
.upbar {
  background: #dc481e;
  width: 0;
  transition: width 0.5s;
}
.uppercent {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
}