* {
  box-sizing: border-box;
}

 



 

video {
  width: 100% !important;
  height: auto !important;
  
}



.upload {

  background: #FFFFFF;
  border: 1px dashed #97999B;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-flow: column nowrap;
  margin: 0 auto;
  padding: 10px 10px 0;
 
  
}
.upload h1 {
 
  font-size: 1.5rem;
  margin: 0 0 10px;
  font-weight: normal;
}
.upload__description {

  color: #97999B;
  margin: 0 0 10px;
}
.upload__input {
  width: 100%;
  
  font-weight: normal;
}
.upload__files {
  
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row wrap;
  margin: 10px 0 0;
  padding: 0;
  width: 100%;
}
.upload__files *:nth-child(3n) {
  margin-right: 0;
}

.preview {
 
  background: #e5e7e9;
  padding: 10px 10px 5px;
  margin: 0 10px 10px 0;
  width: calc((100% - 20px) / 3);
}
.preview__thumb {
  
  background: #FFF;
  border: 1px solid #97999B;
  height: 80px;
  -webkit-box-flex: 0;
          flex: 0 0 100%;
  margin: 0 0 10px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.preview__thumb img,
.preview__thumb video {

  max-width: 100%;
  max-height: 78px;
}
.preview__name, .preview__type {
  
  display: inline-block;
  font-size: 0.8571rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.preview__name {

  font-weight: 700;
}