:root{--file-container-bg:#eeeeee;--file-bg:#f8f8f8;--file-border-color:#606060;--file-rounded:15px;--file-color:#2b2b2b;--table-border-color:#dbdbdb;--delete-button-bg:#f53636;--delete-button-color:#ffffff;--font-size:0.875em;--font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;--shadow:0px 8px 15px -8px rgba(0, 0, 0, 0.5)}*{margin:0;padding:0;box-sizing:border-box}.file-container{width:100%;font-family:var(--font-family);.file-upload{width:100%;display:flex;background-color:var(--file-container-bg);border-radius:var(--file-rounded);transition:all 0.3s;&:hover{box-shadow:var(--shadow)}>div{width:100%;background-color:var(--file-bg);padding:25px;margin:25px;border-radius:10px;border:1px dashed var(--file-border-color);text-align:center;cursor:pointer;>i{font-size:3.125em;color:var(--file-color)}>p,span,div{font-size:var(--font-size);line-height:30px;color:var(--file-color)}>div{width:max-content;padding:0 10px;margin:0 auto;border:1px solid var(--file-border-color);border-radius:8px}}}>table{width:100%;border-collapse:collapse;font-size:var(--font-size);margin-top:20px;& th,td{border-bottom:1px solid var(--table-border-color);padding:8px;text-align:left}>tbody{>tr{>td{&:nth-child(1){font-weight:700}&:nth-child(2){white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:1px}&:nth-child(3){text-align:center}>img{border-radius:5px;box-shadow:var(--shadow)}&.no-file{text-align:center;font-weight:400}>i{font-size:1.125em}}}}& button{background-color:var(--delete-button-bg);width:30px;height:30px;border:none;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{box-shadow:var(--shadow)}>i{color:var(--delete-button-color);font-size:1.125em}}}}