.file-list:empty {
    display: none;
}

.file-uploader {
  background-color: #dbefe9;
  border-radius: 3px;
  color: #242424;
}

.file-uploader__message-area {
  font-size: 18px;
  padding: 1em;
  text-align: center;
  color: #377a65;
}

.file-list {
  background-color: white;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

.file-list__name {
	max-width: 70%;
	float: left;
	padding-top: 7px;
    display: table-cell;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


.file-list li {
    display: table;
    table-layout: fixed;
	margin-bottom: 3px;
    width: 100%;
}


li:last-child {
margin-bottom:0!important;
}

.removal-button {
  width: 35px;
  height:35px;
  border: none;
  float: left;
  display: inline-block!important;
  margin-right:5px;
  border-radius:100px;
  background-color: #333333;
  color:#FFF;
  cursor: pointer;
}
.removal-button::before {
  content: "\f014";
  font-family: FontAwesome;
  cursor: pointer;
  font-size:150%;
}

.removal-button:focus {
  outline: 0;
}

.file-chooser {
  transition: background-color 1s, height 1s;
}
.file-chooser p {
  font-size: 12px;
  padding-top: 1em;
}

.file-uploader {
  max-width: 100%;
  height: auto;
  margin: 2em auto;
}
.file-uploader * {
  display: block;
}
.file-uploader input[type=submit] {
  margin-top: 2em;
  float: right;
}

.file-list {
  margin: 0 auto;
  max-width: 90%;
  position:relative;
  padding:10px;
  background: #f1f1f1;
    border-radius: 10px;
    border: #e0e0e0 1px solid;
}

.removal-button {

}

.file-chooser {
  width: 90%;
  margin: .5em auto;
}

.file-chooser__input {
  margin: 0 auto;
}

.file-uploader__submit-button {
  width: 100%;
  border: none;
  font-size: 1.5em;
  padding: 1em;
  background-color: #72bfa7;
  color: white;
}
.file-uploader__submit-button:hover {
  background-color: #a7d7c8;
}

.file-list li:after, .file-uploader:after {
  content: "";
  display: table;
  clear: both;
}

.hidden {
  display: none;
}
.hidden input {
  display: none;
}

.error {
  background-color: #d65d38;
  color: #000;
}

*, *::before, *::after {
  box-sizing: border-box;
}

.file-drop-area {
  position: relative;
  box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
  align-items: center;
  width: 100%;
  background: #EEE;
  background: linear-gradient(to top, #dbefe9, #dbefF1);
  max-width: 100%;
  padding: 25px;
  border: 1px dashed #000;
  font-weight:bold;
  border-radius: 3px;
  transition: 0.2s;
  &.is-active {
    background-color: rgba(255, 255, 255, 0.05);
  }
}

.fake-btn {
  position: relative;
  display: block;
  background-color: #FFF;
  border-radius: 3px;
  padding: 8px;
  font-size: 12px;
}

.file-msg {
  display: block;
  font-size: small;
  font-weight: 300;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin-top: 20px;
}

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  &:focus {
    outline: none;
  }
}

ul {
    list-style-type: none;
}