.dropzone {

	box-sizing: border-box;

	min-height: 18.75rem;

	padding: .5rem;

	background: transparent;

}

.dropzone * {

	box-sizing: border-box;

}

.dropzone.dz-clickable {

	cursor: pointer;

}

.dropzone.dz-clickable * {

	cursor: default;

}

.dropzone.dz-clickable .dz-message {

	cursor: pointer;

}

.dropzone.dz-clickable .dz-message * {

	cursor: pointer;

}

.dropzone.dz-started .dz-message {

	display: none;

}

.dropzone.dz-drag-hover {

	border-color: #28a745;

	background: rgba(40, 167, 69, 0.15);

}

.dropzone.dz-drag-hover .dz-message {

	opacity: .5;

	color: #28a745;

}

.dropzone.is-valid {

	border-color: #28a745;

}

.dropzone.is-valid .dz-message {

	color: #28a745;

}

.dropzone.is-invalid {

	border-color: #dc3545;

}

.dropzone.is-invalid .dz-message {

	color: #dc3545;

}

.dropzone .dz-message {

	margin-top: 8.25rem;

	text-align: center; 

}

.dropzone .dz-preview {

	position: relative;

	display: inline-block;

	min-height: 5rem;

	margin: .5rem;

	vertical-align: top;

}

.dropzone .dz-preview:hover {

	z-index: 1000;

}

.dropzone .dz-preview:hover .dz-details {

	opacity: 1;

}

.dropzone .dz-preview.dz-file-preview .dz-image {

	background-color: #54a7ff;

}

.dropzone .dz-preview.dz-file-preview .dz-image:hover {

	background-color: #007bff;

}

.dropzone .dz-preview.dz-file-preview .dz-details {

	opacity: 1;

}

.dropzone .dz-preview.dz-image-preview {

	background: transparent;
    height:10.5rem;
}

.dropzone .dz-preview.dz-image-preview .dz-details {

	transition: opacity 200ms linear;

}

.dropzone .dz-preview .dz-remove {

	display: block;

	cursor: pointer;  

	border: none;

	text-align: center;

}

.dropzone .dz-preview .dz-remove:hover {

	text-decoration: underline;

}

.dropzone .dz-preview:hover .dz-details {

	opacity: 1;

}

.dropzone .dz-preview .dz-details {

	z-index: 20;

	position: absolute;

	top: 8rem;

	left: 0;

	min-width: 100%;

	max-width: 100%;

	height: auto;

	padding: .5rem;   
	font-size: 0.705rem;
    font-family: "IBM Plex Sans", sans-serif;

	text-align: center;

	line-height: 150%;

	color: black;

	opacity: 0.9;

}
 

.dropzone .dz-preview .dz-details .dz-size,

.dropzone .dz-preview .dz-details .dz-filename {

	white-space: nowrap;

}

.dropzone .dz-preview .dz-details .dz-size:hover:before,

.dropzone .dz-preview .dz-details .dz-filename:hover:before {

	content: "";

	margin-left: -100%;

}

.dropzone .dz-preview .dz-details .dz-size:hover:after,

.dropzone .dz-preview .dz-details .dz-filename:hover:after {

	content: "";

	margin-right: -100%;

}

.dropzone .dz-preview .dz-details .dz-size:hover span,

.dropzone .dz-preview .dz-details .dz-filename:hover span {

	padding: .125rem .375rem;
    color: white;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 0.2rem;

}

.dropzone .dz-preview .dz-details .dz-size:not(:hover),

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {

	overflow: hidden;

	text-overflow: ellipsis;

}

.dropzone .dz-preview .dz-image {

	overflow: hidden;

	width: 7.5rem;

	height: 7.5rem;

	position: relative;

	display: block;

	z-index: 10;

}

.dropzone .dz-preview .dz-image img {

	display: block;

}

.dropzone .dz-preview.dz-success .dz-success-mark {

	animation: passing-through 300ms cubic-bezier(0.77, 0, 0.175, 1);

}

.dropzone .dz-preview.dz-error .dz-error-mark {

	opacity: 1;

	animation: slide-in 300ms cubic-bezier(0.77, 0, 0.175, 1);

}

.dropzone .dz-preview .dz-success-mark,

.dropzone .dz-preview .dz-error-mark {

	pointer-events: none;

	opacity: 0;

	z-index: 500;

	position: absolute;

	display: block;

	top: 45%;

	left: 40%; 

}

.dropzone .dz-preview .dz-success-mark svg,

.dropzone .dz-preview .dz-error-mark svg {

	display: block;

	width: 1.5rem;

	height: 1.5rem;

}

.dropzone .dz-preview .dz-success-mark svg * {

	fill: #28a745;

	fill-opacity: 1;

}

.dropzone .dz-preview .dz-error-mark svg * {

	fill: #dc3545;

	fill-opacity: 1;

}

.dropzone .dz-preview.dz-processing .dz-progress {

	opacity: 1;

	transition: all 200ms linear;

}

.dropzone .dz-preview.dz-complete .dz-progress {

	opacity: 0;

	transition: opacity 400ms ease-in;

}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {

	animation: pulse 6s ease infinite;

}

.dropzone .dz-preview .dz-progress {

	opacity: 1;

	z-index: 1000;

	pointer-events: none;

	position: absolute;

	left: 35%;

	top: 100%;

	width: 7.5rem;

	height: 0.6rem;

	margin-top: .3rem;

	margin-left: -2.6rem; 

	background: rgba(255, 255, 255, 0.6);

	-webkit-transform: scale(1);

	overflow: hidden;

}

.dropzone .dz-preview .dz-progress .dz-upload {

	background: #28a745;

	background: linear-gradient(to bottom, #28a745, #1e7d34);

	position: absolute;

	top: 0;

	left: 0;

	bottom: 0;

	width: 0;

	transition: width 300ms ease-in-out;

}

.dropzone .dz-preview.dz-error .dz-error-message {

	display: block;

}

.dropzone .dz-preview.dz-error:hover .dz-error-message { 
	opacity: 1;

	pointer-events: auto;

}

.dropzone .dz-preview .dz-error-message {

	pointer-events: none;

	z-index: 1000;

	position: absolute;

	display: block;

	display: none;

	top: 8.5rem;

	left: -.5rem;

	width: 28.5rem;

    border-width: 2px;
    border-color: #0168fa;
    border-style: solid;   
    box-sizing: border-box; 
    border-radius: 3px;
    
    font-weight: 500;    
	font-size: 0.775rem;
    font-family: "IBM Plex Sans", sans-serif;
    
    padding: 11px 15px;
	opacity: 0;
    color: #0168fa;
    background-color: #cce1fe;    
	transition: opacity 300ms ease;
    align-items: center;   

}

.dropzone .dz-preview .dz-error-message:after {

	content: '';

	position: absolute;

	top: -.5rem;

	left: 3.75rem;

	width: 0;

	height: 0;

	border-left: .5rem solid transparent;

	border-right: .5rem solid transparent;

	border-bottom: 0.5rem solid #0168fa;

}

.has-success .dropzone {

	border-color: #28a745;

}

.has-success .dropzone .dz-message {

	color: #28a745;

}

.has-danger .dropzone {

	border-color: #dc3545;

}

.has-danger .dropzone .dz-message {

	color: #dc3545;

}