.ProgressBar, .InnerProgress { border-radius: 4px; } .ProgressBarWrapper { display: flex; flex-direction: row; align-items: center; } .ProgressBar { height: 20px; width: 100%; background-color: rgba(204, 204, 204, 0.5); color: #c5c5c5; border: 1px solid #ccc; } .InnerProgress { height: 100%; background-color: #fff; } .MainProgressText, .ProgressText { color: #c5c5c5; padding: 0px 10px; width: 30%; } .MainProgressText { width: 80%; } .MainProgressBarWrapper { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: #fff; text-shadow: 1px 1px 14px black; } .MainProgressBarWrapper .MainProgressText { font-size: 20px; font-weight: bold; color: #fff !important; } .MainProgressBarWrapper .ProgressBar { box-shadow: 0px 0px 5px 4px rgb(0 0 0 / 20%); } .MainProgressBarWrapper:hover { cursor: pointer; } .ProgressBarWrapper div { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .ProgressBarWrapper .InnerProgress { background-color: #ffc61e; } .ProgressBarWrapper .ProgressBar { border: none; } .DownloadControls { display: flex; flex-direction: row; align-items: center; justify-content: center; margin-left: 10px; } .DownloadControls div { height: 20px; } .DownloadControls div img { height: 100%; } .downloadStop:hover { cursor: pointer; }