body { margin: 0; padding: 0; } button { border: none; border-radius: 2px; padding: 12px 18px; font-size: 16px; text-transform: uppercase; cursor: pointer; color: white; background-color: #2196f3; box-shadow: 0 0 4px #999; outline: none; } pre { white-space: pre-line; } form, input, label, p { color: white !important; } #icon { max-width: 45px; height: auto; border-radius: 50%; } .column { flex-grow: 1; display: inline-block; } /* Ripple effect */ .ripple { background-position: center; transition: background 0.8s; } .ripple:hover { background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; } .ripple:active { background-color: #6eb9f7; background-size: 100%; transition: background 0s; } /* DRAG AND DROP */ .file-upload { width: 100%; margin: 0 auto; } .file-upload-btn { width: 100%; margin: 0; color: #fff; background: #2196f3; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #2879f3; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .file-upload-btn:hover { background: #2175f3; color: #ffffff; transition: all .2s ease; cursor: pointer; } .file-upload-btn:active { border: 0; transition: all .2s ease; } .file-upload-content { display: none; text-align: center; } .file-upload-input { position: absolute; margin: 0; padding: 0; width: 100%; height: 100%; outline: none; opacity: 0; cursor: pointer; } .image-upload-wrap { margin-top: 20px; border: 4px dashed #2196f3; position: relative; } .image-dropping, .image-upload-wrap:hover { background-color: #2196f3; border: 4px dashed #ffffff; } .image-title-wrap { padding: 0 15px 15px 15px; color: #222; } .drag-text { text-align: center; } .drag-text .buttonText { font-weight: 100; text-transform: uppercase; color: #fff; padding: 60px 0; } .file-upload-image { max-height: 200px; max-width: 200px; margin: auto; padding: 20px; } .remove-image { width: 200px; margin: 0; color: #fff; background: #cd4535; border: none; padding: 10px; border-radius: 4px; border-bottom: 4px solid #b02818; transition: all .2s ease; outline: none; text-transform: uppercase; font-weight: 700; } .remove-image:hover { background: #c13b2a; color: #ffffff; transition: all .2s ease; cursor: pointer; } .remove-image:active { border: 0; transition: all .2s ease; }