#fileDropBox { line-height: 5em; text-align: center; border-radius: 7px; color: #0f3c4b; background-color: #e5edf1; outline: 1px dashed gray; outline-offset: -6px; box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); padding: 25px 0 0; width: 100%; } .box_icon { width: 100%; height: 60px; vertical-align: middle; text-align: center; fill: #92b0b3; } .box_file { position: absolute; } #fileDropBox label { cursor: pointer; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #fileDropBox label:hover, #fileDropBox label:focus { background: #207ab6; cursor: pointer; } input[type='file'] { display: none; } #fileDropBox label { background-color: #3498db; color: #fff; margin: 10px; padding: 6px 20px; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; border-radius: .2em; } .box_button { border: 0; outline: none; padding: 10px; font-size: 1rem; width: 9rem; text-transform: uppercase; letter-spacing: .1em; background-color: #3498db; color: #ffffff; transition: all 0.5s ease; -webkit-appearance: none; box-shadow: 0 2px 5px 2px rgba(19, 35, 47, 0.3); font-weight: bold; } .box_button img { margin-bottom: -2px; margin-left: 2px; width: 18px; } #upload_conf { display: flex; } .box_button:hover, .box_button:focus { background: #207ab6; cursor: pointer; } #list { max-height: 400px; min-height: 100px; border: 1px solid #ccc; margin-top: 30px; overflow: auto; width: 100%; } #list ul { margin: 0; padding: 10px; list-style-type: none; color: #687b9d; } #list li { margin-top: 3px; background-color: #f2f3f5; border: 1px solid #dbdbdb; padding: 5px 0px 6px 8px; word-wrap: break-word; font-size: 14px; } #list .uploaded { text-decoration: none; color: #3498db; } #list .uploaded:hover { color: #207ab6; cursor: pointer; } .removeItem { color: red; font-size: 20px; text-decoration: none; } .removeItem:hover { font-weight: bold; cursor: pointer; } spam#fileProperties { color: #687b9d; } spam#info { color: #92b0b3; }