.fileUploadArea {
  position: relative;
  background-color: #ebebeb;
  border: 1px solid #0069b4;
  padding: 12px;
  min-height: 164px;
  width: 97%;
}
.fileUploadArea::after {
  content: "";
  clear: both;
  display: table;
}
.fileUploadArea .addfile,
.fileUploadArea .file {
  margin: 5px;
  height: 130px;
  width: 160px;
  border-radius: 8px;
  float: left;
}
.fileUploadArea .addfile {
  background-color: #e7edf1;
  border: 2px dashed #6794b4;
  text-align: center;
  color: #6794b4;
  font-weight: bold;
  cursor: pointer;
  padding: 0 10px;
}
.fileUploadArea .addfile:hover {
  background-color: #dde5eb;
  border-color: #0069b4;
  color: #0069b4;
}
.fileUploadArea .addfile span {
  display: block;
  font-size: 15px;
  line-height: 20px;
}
.fileUploadArea .addfile span.icon {
  padding: 20px 0;
  font-size: 35px;
}
.fileUploadArea .file {
  padding: 4px;
  position: relative;
  background-color: #fff;
}
.fileUploadArea .file.withImage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.fileUploadArea .file.file_pdf {
  background-color: #f00;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8c3ZnIGhlaWdodD0iMzBweCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzAgMzAiIHdpZHRoPSIzMHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQoJPGc+DQoJCTxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjEuNTciIGQ9Ik0xNS40MDEsNC40MDggYzAuNDIxLDAuMTgzLDAuMzI3LDAuNDYsMC4xODgsMS43NjJjLTAuMTQzLDEuMzQ5LTAuNjE4LDMuODA2LTEuNTM1LDYuMjE4Yy0wLjkxOCwyLjQxNS0yLjI4LDQuNzg1LTMuNDY3LDYuNTQyICAgYy0xLjE4NSwxLjc1NS0yLjIwMSwyLjg5Ni0yLjk3NCwzLjU1NGMtMC43NzcsMC42NTgtMS4zMTQsMC44MzMtMS42NjUsMC44OTNjLTAuMzQ4LDAuMDYtMC41MDYsMC0wLjYtMC4xNzUgICBzLTAuMTI3LTAuNDctMC4wNDYtMC44MTljMC4wNzktMC4zNTMsMC4yNjgtMC43NjMsMC44MDQtMS4yODdjMC41NDEtMC41MjcsMS40MjYtMS4xNywyLjY2MS0xLjc3MiAgIGMxLjIzNS0wLjU5OSwyLjgxNi0xLjE1Niw0LjExNS0xLjUzNWMxLjI5OS0wLjM4MSwyLjMxMS0wLjU4NSwzLjE5Ny0wLjc0NWMwLjg4OC0wLjE2MSwxLjY0Ny0wLjI3OCwyLjM5LTAuMzM2ICAgYzAuNzQ1LTAuMDYsMS40NzQtMC4wNiwyLjE4NiwwYzAuNzEyLDAuMDU4LDEuNDA5LDAuMTc1LDIuMDExLDAuMzE5YzAuNjAxLDAuMTQ3LDEuMTA4LDAuMzIzLDEuNTUxLDAuNjAyICAgYzAuNDQyLDAuMjc3LDAuODIzLDAuNjU4LDEuMDEyLDEuMDgyYzAuMTkyLDAuNDI1LDAuMTkyLDAuODkzLDAuMDMzLDEuMjI5Yy0wLjE1OCwwLjMzNi0wLjQ3NiwwLjU0Mi0wLjgzOSwwLjY1NyAgIGMtMC4zNjMsMC4xMTctMC43NzUsMC4xNDYtMS4yNjYsMGMtMC40OTEtMC4xNDYtMS4wNjMtMC40NjctMS42NjMtMC44OTNjLTAuNi0wLjQyMy0xLjIzNC0wLjk0OC0yLjA1Ny0xLjc2OCAgIGMtMC44MjMtMC44Mi0xLjgzNy0xLjkzNC0yLjY5MS0zLjAxNWMtMC44NTQtMS4wODMtMS41NTMtMi4xMzYtMi4wMjgtMy4wMjhjLTAuNDczLTAuODkzLTAuNzI3LTEuNjI0LTAuOTMzLTIuMzU3ICAgYy0wLjIwNi0wLjczMS0wLjM2NC0xLjQ2Mi0wLjQyNy0yLjEyYy0wLjA2My0wLjY2LTAuMDMzLTEuMjQ1LDAuMDMxLTEuNzFjMC4wNjMtMC40NywwLjE2LTAuODIsMC4zMTctMS4wNTQgICBjMC4xNTgtMC4yMzUsMC4zODEtMC4zNTIsMC41MzktMC40MWMwLjE1OC0wLjA2LDAuMjU0LTAuMDYsMC4zNDgtMC4wNzNjMC4wOTQtMC4wMTQsMC4xODgtMC4wNDQsMC4zMzMsMCAgIEMxNS4wNjQsNC4yMDksMTUuMjQ4LDQuMzIxLDE1LjQwMSw0LjQwOHoiIC8+DQoJPC9nPg0KPC9zdmc+");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50px;
}
.fileUploadArea .file.file_doc,
.fileUploadArea .file.file_docx {
  background-color: #015CAB;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQoJPGc+DQoJCTxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yMy41LDIxaC0xMGMtMC4yNzYzNjcyLDAtMC41LTAuMjIzNjMyOC0wLjUtMC41czAuMjIzNjMyOC0wLjUsMC41LTAuNUgyM1Y0aC05LjUgQzEzLjIyMzYzMjgsNCwxMywzLjc3NjM2NzIsMTMsMy41UzEzLjIyMzYzMjgsMywxMy41LDNoMTBDMjMuNzc2MzY3MiwzLDI0LDMuMjIzNjMyOCwyNCwzLjV2MTcgQzI0LDIwLjc3NjM2NzIsMjMuNzc2MzY3MiwyMSwyMy41LDIxeiIvPg0KCQk8cG9seWdvbiBmaWxsPSIjRkZGRkZGIiBwb2ludHM9IjE0LDAgMCwyLjYwODY5NTcgMCwyMS4zOTEzMDQgMTQsMjQgICIvPg0KCQk8cmVjdCBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjEiIHdpZHRoPSI4IiB4PSIxMy41IiB5PSI1LjUiLz4NCgkJPHJlY3QgZmlsbD0iI0ZGRkZGRiIgaGVpZ2h0PSIxIiB3aWR0aD0iOCIgeD0iMTMuNSIgeT0iOC41Ii8+DQoJCTxyZWN0IGZpbGw9IiNGRkZGRkYiIGhlaWdodD0iMSIgd2lkdGg9IjgiIHg9IjEzLjUiIHk9IjExLjUiLz4NCgkJPHJlY3QgZmlsbD0iI0ZGRkZGRiIgaGVpZ2h0PSIxIiB3aWR0aD0iOCIgeD0iMTMuNSIgeT0iMTQuNSIvPg0KCQk8cmVjdCBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjEiIHdpZHRoPSI4IiB4PSIxMy41IiB5PSIxNy41Ii8+DQoJCTxwYXRoIGZpbGw9IiMwMTVDQUIiIGQ9Ik03LjkzNzQ5MjQsMTYuNTMxMjVsMS4wNjI4NzM4LDAuMDc1OTI3N2wyLjIxMzMxNzktOC4zNzI0MzY1TDkuNjMxMDQyNSw4LjM0Nzc3ODNsLTEuMTU2NDMzMSw0LjMzNTMyNzEgICBjMCwwLTAuNTg4MTM0OC0yLjEzOTY0ODQtMS4xNDY1NDU0LTQuMTcwODM3NGwtMS42ODkyNywwLjEyMDY2NjVsLTEuMTEzNDAzMyw0LjA1MDE3MDlMMy40ODYwMjI5LDguNzg2NjgyMUwxLjk2MTA1OTYsOC44OTU2Mjk5ICAgbDEuOTQyMzIxOCw3LjM0NzQ3MzFsMS4yMTY2MTM4LDAuMDg2OTE0MUw2LjUsMTEuNUM2LjUsMTEuNSw3LjI5MjQ4MDUsMTQuMjczODAzNyw3LjkzNzQ5MjQsMTYuNTMxMjV6Ii8+DQoJPC9nPg0KPC9zdmc+DQo=");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35px;
}
.fileUploadArea .file.file_odt {
  background-color: #3f4fd3;
}
.fileUploadArea .file .remove {
  float: right;
  background-color: rgba(0, 0, 0, 0.6);
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  font-size: 9pt;
  cursor: pointer;
}
.fileUploadArea .file .remove:hover {
  background-color: #000;
}
.fileUploadArea .file .extension {
  background-color: rgba(0, 0, 0, 0.6);
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  color: #fff;
  font-size: 9pt;
  line-height: 14px;
  font-weight: normal;
  text-transform: uppercase;
}
.fileUploadArea .file .bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #fff;
  padding: 20px 4px 4px 4px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 60px);
  border-radius: 0 0 8px 8px;
}
.fileUploadArea .file .bottom .name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden !important;
}
.fileUploadArea .file .bottom .size {
  font-size: 8pt;
}
.fileUploadArea .errorMessages {
  position: absolute;
  z-index: 3;
  width: 400px;
  top: 7px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.fileUploadArea .errorMessages .errorMessage {
  margin-top: 5px;
  border: 1px solid #f00;
  background-color: #ffd5d5;
  color: #970000;
  padding: 4px 8px;
  border-radius: 4px;
}
.fileUploadArea .errorMessages .errorMessage .filename {
  font-size: 9pt;
  color: #777;
}
.fileUploadArea .errorMessages .errorMessage .remove {
  float: right;
  background-color: rgba(151, 0, 0, 0.6);
  height: 18px;
  width: 18px;
  line-height: 18px;
  border-radius: 9px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  margin-right: -4px;
}
.fileUploadArea .errorMessages .errorMessage .remove:hover {
  background-color: #970000;
}
.fileUploadArea .drop_zone {
  display: none;
}
.fileUploadArea .drop_zone p {
  text-align: center;
  margin: auto;
  font-size: 18pt;
}
.is-any-dragover .fileUploadArea .drop_zone {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #e7edf1;
  background-color: rgba(231, 237, 241, 0.9);
  border-radius: 8px;
  border: 2px dashed #6794b4;
  z-index: 2;
  color: #6794b4;
}
.is-any-dragover .fileUploadArea.is-dragover .drop_zone {
  border-color: #0069b4;
  color: #0069b4;
  background-color: #dde5eb;
  background-color: rgba(221, 229, 235, 0.9);
}
.is-any-dragover .fileUploadArea .addfile {
  display: none;
}