* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 .file-container {
   /*position: absolute;*/
   font-family: sans-serif;
   font-size: 11pt;
   color: #4d4d4d;
 }
 .file-container .file-overlay {
   position: fixed;
   /*width: 20vw;
   height: 10vh;*/
   width: 10%;
   height: 10%;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 10;
   background-color: rgba(0, 0, 0, 0.7);
 }
 .file-container .file-wrapper {
   position: relative;
   display: block;
   /*width: 40vw;
   height: 20vh;*/
   width: 80%;
   height: 17%;
   max-height: 500px;
   /*min-height: 400px;*/
   /*top: 10vh;*/
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   background-color: #e9ecef;
   z-index: 20;
   border-radius: 10px;
   padding: 10px;
 }
 .file-container .file-wrapper .file-input {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #000;
   z-index: 10;
   cursor: pointer;
   opacity: 0;
 }
 .file-container .file-wrapper .file-input--active + .file-content {
   background: #e3e5e8;
 }
 .file-container .file-wrapper .file-input--active + .file-content .file-icon {
   opacity: 0.5;
 }
 .file-container .file-wrapper .file-input--active + .file-content .file-icon i {
   animation-name: bounce;
   animation-duration: 0.6s;
   animation-iteration-count: infinite;
   animation-timing-function: ease;
 }
 .file-container .file-wrapper .file-input--active + .file-content .file-icon .icon-shadow {
   animation-name: shrink;
   animation-duration: 0.6s;
   animation-iteration-count: infinite;
 }
 .file-container .file-wrapper .file-content {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   border: 8px dashed rgba(73, 80, 87, 0.6);
   border-radius: 10px;
   transition: 0.2s;
 }
 .file-container .file-wrapper .file-content .file-infos {
   position: absolute;
   display: flex;
   width: 90%;
   height: 90%;
   /*min-width: 400px;
   min-height: 202px;*/
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   flex-direction: column;
   justify-content: center;
 }
 .file-container .file-wrapper .file-content .file-infos .file-icon {
   position: relative;
   width: 100%;
   height: 100%;
   /*width: 30vw;
   height: 10vh;*/
   margin: 0;
   color: rgba(73, 80, 87, 0.6);
   background-color: #f1f1f1;
   border-radius: 10px;
   padding: 10px;
   box-shadow: inset 0px 0px 6px 0px #ccc;
   transition: 0.2s;
 }
 .file-container .file-wrapper .file-content .file-infos .file-icon i {
   margin-bottom: 10px;
   width: 100%;
   /*width: 10vw;
   height: 10vh;*/
 }
 .file-container .file-wrapper .file-content .file-infos .file-icon .icon-shadow {
   position: relative;
   display: block;
   /*width: 95px;
   height: 7px;*/
   width: 50%;
   height: 10%;
   border-radius: 100%;
   background-color: #e3e5e8;
   /*top: -30%;*/
   margin-left: auto;
   margin-right: auto;
 }
 .file-container .file-wrapper .file-content .file-infos .file-icon > span {
   position: absolute;
   bottom: 1%;
   width: calc(100% - 10px * 2);
   /*width: 30vw;
   height: 10vh;*/
 }
 .file-container .file-wrapper .file-content .file-infos .file-icon > span span {
   display: none;
 }
 .file-container .file-wrapper .file-content .file-infos .file-icon > span .has-drag {
   display: inline;
 }
 .file-container .file-wrapper .file-content .file-infos .file-icon i, .file-container .file-wrapper .file-content .file-infos .file-icon span {
   display: block;
   text-align: center;
   text-transform: uppercase;
   font-weight: bold;
 }
 .file-container .file-wrapper .file-content .file-name {
   position: absolute;
   width: 100%;
   text-align: middle;
   left: 0;
   top: 115%;
   /*bottom: 5%;*/
   right: 0;
   font-weight: bold;
   font-size: 10pt;
   margin: auto;
   text-align: center;
 }
 @keyframes bounce {
   0% {
     transform: translateY(0px);
   }
   50% {
     transform: translateY(-15px);
   }
   100% {
     transform: translateY(0px);
   }
 }
 @keyframes shrink {
   0% {
     width: 35px;
   }
   50% {
     width: 75px;
   }
   100% {
     width: 95px;
   }
 }