/* Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}

/* Baseline */
body, p, h1, h2, h3, h4, h5, h6 {font:normal 12px/1.3em Helvetica, Arial, sans-serif; color:#414141; }
h1 {font-size:22px; font-weight:bold;}
h2 {font-size:19px; font-weight:bold;}
h3 {font-size:16px; font-weight:bold;}
h4 {font-size:14px; font-weight:bold;}
h5 {font-size:12px; font-weight:bold;}
p {margin: 0 0 16px;}
p:last-of-type {
  margin-bottom: 0;
}


body {
  margin:40px;
  background-color: #f1f3f6;

}
#frame {
  width: 100%;
  min-height: 100%;
  text-align:left;
}

.upload {
  width: 550px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 0 12px 14px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.upload p {
  font-size: 14px;
}

.upload-info {
  padding: 50px 40px;
  border-bottom: 1px solid #e7e7e7;
  position: relative;
  background-color: #f9fafc;
  text-align: center;
}

.upload-info h1 {
  margin: 32px 0;
}

.upload-data {
  padding: 32px 0;
}

/* Uploader: Drag & Drop */
.resumable-error {display:none; font-size:14px; font-style:italic;}
.resumable-drop {
  width: 90%;
  height: 80px;
  line-height: 80px;
  margin: 0 auto;
  display:none;
  text-align:center;
  color:#fff;
  font-size: 16px;
  font-weight:500;
  background-color:#ec6e33;
  border-radius:2px;
  z-index:9999;
}

.resumable-drop a {
  cursor: pointer;
}

.dragover {padding:30px; color:#555; background-color:#ddd; border:1px solid #999;}

/* Uploader: Progress bar */
.resumable-progress {
  display:none;
  width:90%;
  margin:30px auto;
}

.resumable-file-name {
  display: block;
  font-weight: 600;
}

.resumable-file-progress {
  display: block;
  font-size: 14px;
}

.progress-container {height:7px; background:#dce7ed; position:relative; border-radius: 2px; overflow: hidden;}
.progress-bar {position:absolute; top:0; left:0; bottom:0; background:#329424; width:0;}
.progress-text {font-size:11px; line-height:9px; padding-left:10px;}
.progress-pause {padding:0 0 0 7px;}
.progress-resume-link {display:none;}
.is-paused .progress-resume-link {display:inline;}
.is-paused .progress-pause-link {display:none;}
.is-complete .progress-pause {display:none;}

/* Uploader: List of items being uploaded */
.resumable-list {
  width: 90%;
  list-style: none;
  margin: 20px auto;
  padding: 0;
  display:none;
  font-size: 15px;
}

.resumable-list li {
  line-height: 1.5;
  margin: 0 0 16px;
  color: #787878;
}

.uploader-item {width:148px; height:90px; background-color:#666; position:relative; border:2px solid black; float:left; margin:0 6px 6px 0;}
.uploader-item-thumbnail {width:100%; height:100%; position:absolute; top:0; left:0;}
.uploader-item img.uploader-item-thumbnail {opacity:0;}
.uploader-item-creating-thumbnail {padding:0 5px; font-size:9px; color:white;}
.uploader-item-title {position:absolute; font-size:9px; line-height:11px; padding:3px 50px 3px 5px; bottom:0; left:0; right:0; color:white; background-color:rgba(0,0,0,0.6); min-height:27px;}
.uploader-item-status {position:absolute; bottom:3px; right:3px;}

/* Uploader: Hover & Active status */
.uploader-item:hover, .is-active .uploader-item {border-color:#4a873c; cursor:pointer; }
.uploader-item:hover .uploader-item-title, .is-active .uploader-item .uploader-item-title {background-color:rgba(74,135,60,0.8);}

/* Uploader: Error status */
.is-error .uploader-item:hover, .is-active.is-error .uploader-item {border-color:#900;}
.is-error .uploader-item:hover .uploader-item-title, .is-active.is-error .uploader-item .uploader-item-title {background-color:rgba(153,0,0,0.6);}
.is-error .uploader-item-creating-thumbnail {display:none;}