div.uploader {
	background-color: #ededed;
	border: none /*1px solid #CCCCCC*/ ;
	min-height: 100px ;
	width: 100% ;
	padding: 40px;
	margin-bottom: 40px;
}

div.uploader a {
	display: block ;
	height: auto ;
	text-align: center ;
	text-decoration: none ;
}

div.uploader span.label {
	display: block ;
	padding: 27px 0px 0px 0px ;
	text-decoration: underline ;
}


div.uploader span.standby {
	color: #999999 ;
	display: block ;
	padding: 12px 0px 0px 0px ;
}

div.uploader span.progress {
	color: #999999 ;
	display: none ;
	min-height: 50px;
	padding: 12px 0px 0px 0px ;
}

div.uploader.uploading span.standby {
	display: none ;
}

div.uploader.uploading span.progress {
	display: block ;
}

ul.uploads {
	list-style-type: none ;
	margin: 20px 0 0 0 ;
	padding: 0 ;
	width: 100% ;
}

ul.uploads:after {
	clear: both ;
	content: "" ;
	display: block ;
	height: 0px ;
}

ul.uploads li {
	background-color: #f2f2f2 ;
	border: none ;
	border-radius: 0 ;
	float: left ;
	height: 200px ;
	margin: 10px 10px 0px 0px ;
	width: 100% ;
	display: flex;
	justify-content: center; 
	padding: 10px;
	position: relative;
	flex-direction: column;
	align-content: center;
     word-break: break-all;
}

ul.uploads li small {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
    font-size: 10px;
    line-height: 11px;
}

ul.uploads a.doc-icon {
	border-radius: 0 ;
	display: block;
	margin: 0px auto 0px auto ;
	height: 130px ;
	width: 130px ;
}

ul.uploads img, ul.uploads a img {
	border-radius: 0 ;
	display: flex ;
	margin: 0px auto 0px auto ;
	max-height: 130px ;
	max-width: 130px ;
	object-fit: contain;
}

/************** jeff added below ***************/

div.progress {
    display: -ms-flexbox;
    display: none;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #a3a5a7;
    border-radius: .25rem;
}

.uploading div.progress { display: flex; }

div.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #b2c516;
    transition: width .6s ease;
}

.delete_btn { display: flex; justify-content: center; position: absolute; top: -5px; right: -5px; background-color: #a1b533; border-radius: 50%; padding: 0; color: #ffffff !important; width: 22px !important; height: 22px !important; line-height: 22px; text-align: center; z-index: 1000; }
.delete_btn:hover { cursor: pointer; }
.delete_btn i { color: #ffffff !important; font-size: 14px; line-height: 22px; }

.pdf img,
.zip img,
.mp4 img,
.avi img,
.mpg img,
.mpeg img,
.ogg img,
.qt img,
.mov img,
.mp3 img,
.ppt img,
.doc img,
.docx img,
.eps img { display: none !important; }

.pdf:after,
.zip:after,
.mp4:after,
.avi:after,
.mpg:after,
.mpeg:after,
.ogg:after,
.qt:after,
.mov:after,
.mp3:after,
.ppt:after,
.doc:after,
.docx:after,
.eps:after {content: '\f15b'; font-family: 'Font Awesome 5 Pro', FontAwesome; font-size: 80px; font-weight: 300;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

.pdf:after {content: '\f1c1'; }
.zip:after {content: '\f1c6'; }
.mp4:after {content: '\f1c8'; }
.avi:after {content: '\f1c8'; }
.mpg:after, .mpeg:after, .ogg:after, .qt:after, .mov:after {content: '\f1c8'; }
.mp3:after {content: '\f1c7'; }
.ppt:after {content: '\f1c4'; }
.doc:after, .docx:after {content: '\f1c2'; }
.eps:after {content: '\f1c4'; }




@media (min-width: 576px) { 
}

@media (min-width: 768px) { 
	ul.uploads li {
		width: 150px ;
	}
}

@media (min-width: 992px) { 
}

@media (min-width: 1200px) { 
}