.upload-container{max-width:620px}[dir] .upload-container{padding:20px;border-radius:8px;margin:auto}[dir] .file-preview{margin-top:20px}.file-icon img{width:50px;height:50px;-o-object-fit:cover;object-fit:cover}[dir=ltr] .file-icon img{margin-right:10px}[dir=rtl] .file-icon img{margin-left:10px}.file-preview{-ms-flex-wrap:wrap;flex-wrap:wrap}.file-item,.file-preview{display:-webkit-box;display:-ms-flexbox;display:flex}.file-item{-webkit-box-align:center;-ms-flex-align:center;align-items:center}[dir] .file-item{margin:8px;padding:8px;border:1px solid #ccc;border-radius:4px;background-color:#f0f0f0}.file-icon img{width:100px;height:auto}.file-details{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-name{font-weight:700;font-size:11px}.file-size{font-size:10px;color:#666}.drag-and-drop{-webkit-box-shadow:0 4px 8px rgba(0,0,0,.1);transition:background-color .3s ease,border-color .3s ease,-webkit-box-shadow .3s ease;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,-webkit-box-shadow .3s ease}[dir] .drag-and-drop{border:1px dashed #e74c3c;padding:100px;text-align:center;cursor:pointer;background-color:#f5f5f5;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.1);-webkit-transition:background-color .3s ease,border-color .3s ease,-webkit-box-shadow .3s ease}.drag-and-drop:hover{-webkit-box-shadow:0 12px 12px rgba(0,0,0,.1)}[dir] .drag-and-drop:hover{background-color:#f4f4f4;border-color:#000;box-shadow:0 12px 12px rgba(0,0,0,.1)}.drag-and-drop p{font-size:18px;color:#000}@-webkit-keyframes shake-ltr{0%,to{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@-webkit-keyframes shake-rtl{0%,to{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(10px);transform:translateX(10px)}20%,40%,60%,80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}}@keyframes shake-ltr{0%,to{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake-rtl{0%,to{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(10px);transform:translateX(10px)}20%,40%,60%,80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}}[dir=ltr] .shake-animation{-webkit-animation:shake-ltr .8s ease-in-out;animation:shake-ltr .8s ease-in-out}[dir=rtl] .shake-animation{-webkit-animation:shake-rtl .8s ease-in-out;animation:shake-rtl .8s ease-in-out}