.container { width: 450px; height: 220px; padding: 20px 0px 20px 0px; text-align: center; border: dashed 1px #979797; position: relative; margin: 0 auto; } input { opacity: 0; position: absolute; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; } h3 { font-size: 20px; font-weight: 600; color: #38424c; } .fileover { animation: shake 1s; animation-iteration-count: infinite; } .files-list { margin-top: 1.5rem; .single-file { display: flex; padding: 0.5rem; justify-content: space-between; align-items: center; border: dashed 1px #979797; margin-bottom: 1rem; img.delete { margin-left: 0.5rem; cursor: pointer; align-self: flex-end; } display: flex; flex-grow: 1; .name { font-size: 14px; font-weight: 500; color: #353f4a; margin: 0; } .size { font-size: 12px; font-weight: 500; color: #a4a4a4; margin: 0; margin-bottom: 0.25rem; } .info { width: 100% } } } /* Shake animation */ @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } .progress-cont { height: 7px; width: 100%; border-radius: 4px; background-color: #d0d0d0; position: relative; .progress { width: 0; height: 100%; position: absolute; z-index: 1; top: 0; left: 0; border-radius: 4px; background-color: #4c97cb; transition: 0.5s all; } }