* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.drag-drop {
  height: 100vh;
  padding: 5rem 1.25rem;
  background: #f3f8fe;
}

.drag-drop .inner {
  max-width: 680px;
  margin: 0 auto;
}

.drop-zone {
  position: relative;
  padding: 100px 20px;
  text-align: center;
  background: #fff;
  color: #5b5b7b;
  outline: 2px dashed #c2cdda;
  outline-offset: -10px;  
  border-radius: 2px;
  transition: outline-offset .15s ease-in-out, background-color .15s linear;
}

.drop-zone.is-dragover {
  outline-offset: -15px;
}

.drop-zone .cloud-icon {
  display: block;
  width: 100%;
  height: 80px;
  margin-bottom: 40px;
}

.drop-zone input {
  display: none;
}

.drop-zone label {
  display: inline-block;
  width: 120px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #fff;
  border-radius: 3px;
  background-color: #111;
  cursor: pointer;
  margin-top: 40px;
}

.files {
  background-color: #fff;
  border-radius: 0 0 2px 2px;
  padding-bottom: 4px;
}

.files > div {
  display: flex;
  justify-content: space-between;
  padding: 8px;
}

.files > div span {
  cursor: pointer;
}