body, html{ background-color: transparent !important; .hash_load_error{ text-align: center; color: #dddddd; margin: 20% !important; font-size: 3em; } } #ajxp_unique_dl{ align-items: center; justify-content: center; .download-block{ cursor: pointer; /* width: auto; max-width: 400px; min-width: 220px; */ width: 300px; margin: 0 auto; text-align: center; background: rgba(255, 255, 255, 0.91); padding: 20px; border-radius: 4px; box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23); .dl-filename{ font-size: 22px; line-height: 22px; word-break: break-all; } .dl-owner{ font-size: 14px; } > span{ display: block; } div.dl-icon{ width: 220px; margin: 0 auto; position: relative; span.mdi.mdi-file{ font-size: 180px; color: rgba(0,0,0,0.33); color: #009688; } span.mdi.mdi-download{ position: absolute; top: 90px; left: 80px; font-size: 60px; color: #f4f4f4; transition: all 1500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; } } div.dl-details{ font-size: 13px; line-height: 18px; color: rgba(0,0,0,0.43); .row { display: flex; .label{ flex: 1; text-align: right; padding-right: 6px; color: rgba(0,0,0,0.43); font-weight: 500; } .value{ flex: 1; text-align: left; color: rgba(0,0,0,0.73); } } div.click-legend{ font-size: 12px; margin-top: 10px; } } div#share_page_button { position: absolute; bottom: 0px; width: 100%; color: rgba(255,255,255,0.73); left: 0; font-size: 13px; font-weight: bold; } &.dl-started{ span.mdi.mdi-download{ opacity: 0.3; } } } } .react-mui-context .minisite-dropzone{ margin: 20px; border: 2px dashed #CFD8DC; border-radius: 4px; }