.attachment{ display: flex;  padding: 15px; flex-direction: column }
.attachment-title{ margin-bottom: 10px;}

.upload-container{ display: flex;   flex-wrap: wrap; gap: 10px;  margin-bottom: 10px}

.upload-file {width: 80px; max-width: 100px; height: 80px; max-height: 100px; border-radius: 10px; overflow: hidden; border: 1px solid #CFDEF1; opacity: 0; transition: all 0.6s ease ; cursor: pointer; cursor: zoom-in}
.upload-file.is-show{opacity: 1}
.upload-file.is-show.is-remove{ width: 0; height: 0}


.upload-file-preview{ display: flex; align-items: center; justify-content: center; height: 100%; z-index: 20 }
.upload-file-preview img{ opacity: 0; width: 100%; height: 100%; object-fit: cover;  opacity: 0; transition: all 0.3s ease; z-index: 5}
.upload-file-preview.loaded img{ opacity: 1}

.upload-file-xls{ display: block; height:100%; width:100%; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0nMS4wJyBlbmNvZGluZz0ndXRmLTgnPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPjxzdmcgd2lkdGg9JzgwMHB4JyBoZWlnaHQ9JzgwMHB4JyB2aWV3Qm94PScwIDAgMzIgMzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHRpdGxlPmZpbGVfdHlwZV9leGNlbDI8L3RpdGxlPjxwYXRoIGQ9J00yOC43ODEsNC40MDVIMTguNjUxVjIuMDE4TDIsNC41ODhWMjcuMTE1bDE2LjY1MSwyLjg2OFYyNi40NDVIMjguNzgxQTEuMTYyLDEuMTYyLDAsMCwwLDMwLDI1LjM0OVY1LjVBMS4xNjIsMS4xNjIsMCwwLDAsMjguNzgxLDQuNDA1Wm0uMTYsMjEuMTI2SDE4LjYxN0wxOC42LDIzLjY0MmgyLjQ4N3YtMi4ySDE4LjU4MWwtLjAxMi0xLjNoMi41MTh2LTIuMkgxOC41NWwtLjAxMi0xLjNoMi41NDl2LTIuMkgxOC41M3YtMS4zaDIuNTU3di0yLjJIMTguNTN2LTEuM2gyLjU1N3YtMi4ySDE4LjUzdi0ySDI4Ljk0MVonIHN0eWxlPSdmaWxsOiMyMDc0NGE7ZmlsbC1ydWxlOmV2ZW5vZGQnLz48cmVjdCB4PScyMi40ODcnIHk9JzcuNDM5JyB3aWR0aD0nNC4zMjMnIGhlaWdodD0nMi4yJyBzdHlsZT0nZmlsbDojMjA3NDRhJy8+PHJlY3QgeD0nMjIuNDg3JyB5PScxMC45NCcgd2lkdGg9JzQuMzIzJyBoZWlnaHQ9JzIuMicgc3R5bGU9J2ZpbGw6IzIwNzQ0YScvPjxyZWN0IHg9JzIyLjQ4NycgeT0nMTQuNDQxJyB3aWR0aD0nNC4zMjMnIGhlaWdodD0nMi4yJyBzdHlsZT0nZmlsbDojMjA3NDRhJy8+PHJlY3QgeD0nMjIuNDg3JyB5PScxNy45NDInIHdpZHRoPSc0LjMyMycgaGVpZ2h0PScyLjInIHN0eWxlPSdmaWxsOiMyMDc0NGEnLz48cmVjdCB4PScyMi40ODcnIHk9JzIxLjQ0Mycgd2lkdGg9JzQuMzIzJyBoZWlnaHQ9JzIuMicgc3R5bGU9J2ZpbGw6IzIwNzQ0YScvPjxwb2x5Z29uIHBvaW50cz0nNi4zNDcgMTAuNjczIDguNDkzIDEwLjU1IDkuODQyIDE0LjI1OSAxMS40MzYgMTAuMzk3IDEzLjU4MiAxMC4yNzQgMTAuOTc2IDE1LjU0IDEzLjU4MiAyMC44MTkgMTEuMzEzIDIwLjY2NiA5Ljc4MSAxNi42NDIgOC4yNDggMjAuNTEzIDYuMTYzIDIwLjMyOSA4LjU4NSAxNS42NjYgNi4zNDcgMTAuNjczJyBzdHlsZT0nZmlsbDojZmZmZmZmO2ZpbGwtcnVsZTpldmVub2RkJy8+PC9zdmc+"); background-repeat: no-repeat; background-position: center; background-size: 34px;}

.upload-file-preview button{display: block; position: absolute; border: none; top: 5px; right: 5px; width: 16px; height: 16px; background-color: transparent; cursor: pointer;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZScgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48Y2lyY2xlIGN4PScxMCcgY3k9JzEwJyByPScxMCcgZmlsbD0nI0Q5RDlEOScvPjxwYXRoIGQ9J002IDZMMTQgMTQnIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjxwYXRoIGQ9J00xNCA2TDYgMTQnIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPgo="); background-repeat: no-repeat;background-size: contain; opacity: .7; z-index: 100}
.upload-file-preview button:hover{opacity: 1}

.upload-progress{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; background-image: url(preloader.svg);
	background-repeat: no-repeat; background-position: center; background-size: 26px 26px; background-color:rgb(22 100 182 / 2%); z-index:0; opacity: 1; transition: all 0.6s ease;}
.upload-progress.is-show{ z-index: 10}
.upload-progress.loaded{ opacity: 0;}

.upload-file-wrap{
	height: 50px;
  	padding: 5px 0;
	margin: 5px auto;
}
.upload-file-icon{
	display: block;
	line-height: 60px;
  float: left;
  margin: 0px 10px 0px 0px;
  width: 45px;
  height: 45px;
  text-align: center;
  background: #868686;
  line-height: 45px;
  color: #eee;
  font-size: 20px;
  letter-spacing: -1px;
  font-style: italic;
  border-radius: 15px 0 15px 0;

}
.upload-file-icon .psd{
  background: #3F64A8;
}

.upload-file-progress{
	display: block;
  width: 200px;
  height: 20px;
  background: #BCBCBC;
   margin: 0px 10px 4px 60px;
	border-radius: 5px;

	background-position:0px 0px;
	line-height:20px;
	text-align: center;
  color: #fff;
  font-weight: bold;
    transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease;

}
.upload-file-progress.process{}
.upload-file-progress.loaded{}

.upload-file-progress.noloaded{}
.upload-file-name{}
.upload-file-message{ font-size: 10px; text-align: center; color: #E83437}
.error{}


.upload-file-delete{
	background:url(icon-delete.png) no-repeat center;
	width:15px;
	height:15px;
	display:block;
	position:absolute;
  top: 7px;
  left: 277px;
  cursor:pointer;
  }
  


.preview.img{
	width:100%;
	height:100%;
	background-size:contain !important;
}
/******************************/

.uploadfile-button{	width: 100%; height: 30px; border-radius: 5px; border: 1px dashed var(--border2); position: relative;  transition: all 0.3s ease;}
.uploadfile-button:hover{background: var(--hover1)}

.uploadfile-button:before{content: '+'; font-family:  serif; position: absolute;  display: block; left:50%; top:50%;font-size: 32px; transform: translate(-50%, -50%)}

.uploadfile-poster{
	width:100%;
	height:100%;
}
.uploadfile-poster.add{

	background-position:center;
	background-repeat:no-repeat;
	background-size:auto;
}
.uploadfile-poster.progress{
	background-position:center;
	background-repeat:no-repeat;
}

.uploadfile-button:hover{
	cursor:pointer;

}
.uploadfile-progress{
	display:block;
	font-size:12px;
	text-align:center;
 }
.uploadfile-progress.add{
	position:absolute;
	bottom:5px;
}
.uploadfile-progress.progress{
	line-height:150px;
}

.uploadfile-input-file{
	visibility:hidden;
	position:absolute;
	top:-9999px;
}

@media only screen and (min-width: 768px) {
	.attachment-title{ margin-bottom: 0; margin-right: 10px;}

	.attachment{ flex-direction:row; align-items: center;}
	.upload-container{ margin-bottom: 0; margin-right: 10px;}
	.upload-file {width: 120px; max-width: 120px;  height: 80px; }
	.uploadfile-button{	width: 80px; height: 80px;  }

}