@import"https://fonts.googleapis.com/css?family=Roboto:400,400i,700";.upload{--color-black-softest: #485461;--color-black-soft: #363F48;--color-black-hard: #2d353c;--color-black-hardest: #21282e;--color-green-light: #65cca9;--color-green: #29b586;--ease-in-out-quartic: cubic-bezier(.645, .045, .355, 1);position:relative;display:inline-flex;background:#485461;border-radius:10px;box-shadow:0 1.7px 1.4px #00000005,0 4px 3.3px #00000007,0 7.5px 6.3px #00000009,0 13.4px 11.2px #0000000b,0 25.1px 20.9px #0000000d,0 60px 50px #00000012;overflow:hidden;transform:rotate(0);cursor:pointer;transition:transform .2s}.upload:hover{transform:scale(1.02)}.upload-info{display:flex;align-items:center;padding:16px;margin-right:40px;fill:#fff;color:#fff}.upload-filename{padding-left:8px;transition:opacity .3s ease;font-family:Roboto,sans-serif;font-weight:700}.upload-filename.inactive{opacity:.6}.upload-button{position:relative;margin:0;font-size:100%;padding:0 8px;font-family:inherit;background:none;border:none;border-radius:inherit;outline:none}.upload-button-text{padding:8px 16px;color:#fff;background-color:var(--color-green);border-radius:inherit;outline:none;cursor:pointer;transition:background-color .2s ease,box-shadow .3s ease;font-weight:700}.upload-button-text:hover,.upload-button-text:focus{background-color:var(--color-green-light)}.upload-button-text.inactive{background-color:#ffffff61;cursor:not-allowed}.upload-hint{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;color:#fff;transform:translateY(100%);font-weight:700}.upload-progress{position:absolute;top:90%;left:-100%;width:100%;height:100%;color:#fff;background:linear-gradient(270deg,#87e0c2,#65cca9,#26b082);transform-origin:left}.upload.uploading .upload-button-text{animation:fade-up-out .4s .4s forwards,button-pulse .5s forwards}.upload.uploading .upload-info>*{animation:fade-up-out .4s .4s forwards}.upload.uploading .upload-hint{animation:fade-up-in .4s .8s forwards}.upload.uploading .upload-progress{animation:load-right 2s 1s cubic-bezier(.645,.045,.355,1) forwards;animation-iteration-count:infinite}@keyframes button-pulse{0%{box-shadow:0 0 0 0 var(--color-green-light)}to{box-shadow:0 0 0 8px #fff0}}@keyframes fade-up-out{to{opacity:0;transform:translateY(-40%)}}@keyframes fade-up-in{to{opacity:1;transform:translateY(0)}}@keyframes load-right{0%{left:-100%}50%{left:0}to{left:100%}}