.file-drag-and-drop { display: block; outline: 1px dashed #616161; cursor: pointer; vertical-align: middle; text-align: center; height: auto; background-color: #FAFAFA; overflow: auto; margin-top: 1em; padding: 3em; } .inactive-dropzone { cursor: default !important; } .inactive-dropzone:hover { background-color: #FAFAFA !important; } .file-drag-and-drop:hover { background-color: rgba(72, 218, 203, 0.2); } .file-drag-and-drop .file-drag-and-drop-dialog { font-size: 1.25em !important; margin-top: 1em; &:before { content: ' '; display: inline-block; vertical-align: middle; /* vertical alignment of the inline element */ height: 100%; } } .has-files { text-align: left; padding: 4% 0 0 0; } .file-drag-and-drop-position { display: inline-block; margin: 0 0 4% 4%; float:left; } .file-drag-and-drop-preview-table-wrapper { display: table; height:64px; width:74px; } .file-drag-and-drop-preview { overflow:hidden; cursor: default; background-color: #EEEEEE; border: 1px solid #616161; } .file-drag-and-drop-preview-image { display: table; height:74px; width:74px; overflow:hidden; border: 1px solid #616161; text-align: center; } .file-drag-and-drop-preview-image .action-file { font-size: 2.5em; margin-top: .3em; color: white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; cursor: pointer; &:hover { color: #d9534f; } } .file-drag-and-drop-preview-other .action-file { position: relative; top: .3em; margin-top: 0; font-size: 2.5em; color: white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; cursor: pointer; &:hover { color: #d9534f; } } .file-drag-and-drop-preview-other { display: table-cell; text-align: center; vertical-align: middle; } .file-drag-and-drop-preview-other span:not(:first-child) { display: block; margin-top: .5em; }