.filewrap {  } 
.filewrap.fixed { display:inline-block; }
.filewrap.wide { } 

.ui_upload { width:100%; } 

.fileupload { width: 200px; height: 150px; box-sizing:border-box; }


.fileupload label { width: 200px; height: 150px; display: block; border: 1px solid #ddd; color: #9e9e9e; position: relative; margin: 0 auto; cursor: pointer; overflow: hidden; z-index:10;  box-sizing:border-box; border-radius: .25rem;}
.fileupload label p { vertical-align:middle; position: absolute; top: 50%; text-align: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; line-height: 20px;  font-style: normal; color: #9e9e9e; }

.fileupload p span { display:inline-block; } 
.fileupload p span.material-icons { width:48px; margin-right:10px; color:#aaa; vertical-align:middle;  }
.fileupload p span.text { font-size:80%; text-align:left; line-height:1.4; color:#aaa; font-weight:300; vertical-align:middle;  } 


/* ui 에서 다시 맞추기 위해 필요 */
.ui_upload .fileupload p { display:flex; justify-content:center; align-items:center;  } 
.ui_upload .fileupload p span.text { font-size:0.938rem;  } 

.filewrap.image p span.material-icons { display:block; width:100%;  margin-right:0px; text-align:center; }
.filewrap.image p span.text { display:block; font-size:80%; text-align:center; line-height:1.4; color:#bbb; font-weight:300; } 


.filewrap.multi .fileupload { width:100% !important; height:120px !important; box-sizing:border-box;} 
.filewrap.multi .fileupload label { width:100% !important; height:120px !important; } 

.filewrap.wide {  width:100%; overflow:hidden;position:relative;display:block; height: 120px; border-radius: .25rem;} 
.filewrap.wide .preview { width:100%; height: 120px; position:absolute;  z-index:11; display:none; border-radius: .25rem; box-sizing:border-box; border:1px solid #ddd; overflow:hidden; } 


.filewrap.wide .preview .thumb { position:relative; width:100%; height:120px;  } 
.filewrap.wide .preview .thumb img { max-width:100%; border-radius: .25rem; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } 

/* wide */ 
.filewrap.wide .fileupload { width:100% !important; height:120px !important; box-sizing:border-box;} 
.filewrap.wide .fileupload label { width:100% !important; height:120px !important; border:1px solid #ddd; box-sizing:border-box;} 



.preview { width: 200px; height: 150px; position:absolute;  z-index:11; display:none; border-radius: .25rem; box-sizing:border-box; border:1px solid #ddd; overflow:hidden; } 
.preview .thumb { position:relative; width:100%; height:calc(100%);  background:#eee; } /*height:calc(100%); */
.preview .thumb img { border-radius: .25rem; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); object-fit: cover;} 
.preview .thumb.full img { width:100%; } 


.preview .delete-wrap { border:1px solid #ddd; background-color:rgba(255,255,255, 0.8);  border-radius: .25rem;  } 
.preview .delete { cursor:pointer; color:#fff; display:inline-block;position:absolute; top:9px;right:9px; width:22px; text-align:center; border:1px solid red; background:red;  border-radius: .15rem;} 
.preview .delete.on { transform: rotate(90deg); -webkit-transform: rotate(90deg); color:var(--pointC1); color:#fff; }

/*
.fileupload.error { border: 1px solid red; }
.fileupload .error { border: 1px solid blue; }
*/

.fileupload input:not([type=text]) { -webkit-appearance: none; opacity: 0; display: none; } 

.filelist { width:100%; margin-top:4px;}
.filelist li { list-style : none;   position:relative; font-size:13px; padding:5px 15px; line-height:2em; background:#efece8; border-bottom:0px; margin-bottom:2px; border-radius: .25rem;} 
.filelist li .delete { cursor:pointer; display:inline-block;position:absolute; top:9px;right:5px;width:32px;border:none; color:#7d7d7d;  border:0px solid #ccc; text-align:center; } 
.filelist li .delete.on { transform: rotate(90deg); -webkit-transform: rotate(90deg); color:var(--pointC1); color:#ff476e; }


.filelist li .delete { cursor:pointer; display:inline-block;position:absolute; top:9px;right:5px;width:32px;border:none; color:#7d7d7d;  border:0px solid #ccc; text-align:center; } 
.filelist li .delete.on { transform: rotate(90deg); -webkit-transform: rotate(90deg); color:var(--pointC1); color:#ff476e; }



/*progress { color:#000; } */

.progressbar {
/*
background-color: #1a1a1a;
height: 25px;
padding: 5px;
border-radius: 0px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
*/
}

/*
.progressbar span {
display: inline-block;
height: 100%;
border-radius: 0px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .5) inset;
transition: width .4s ease-in-out;
}
  .blue span {
    background-color: #34c2e3;
  }

  .orange span {
    background-color: #fecf23;
    background-image: linear-gradient(top, #fecf23, #fd9215);
  }

  .green span {
    background-color: #a5df41;
    background-image: linear-gradient(top, #a5df41, #4ca916);
  }
*/  	


progress {
	/*background-color: #DDDDDD;*/
	border: 1px solid #CCCCCC;
	border-radius: 2px;
	position: absolute;
	height: 25px;
	width:95%; margin-right:2.4%; margin-left:2.4%;
	margin-top:-2px; 
	top:50%; 
	transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%);
	opacity:.95;
	-webkit-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.3);
	 box-shadow:2px 2px 7px rgba(0, 0, 0, 0.3);
	z-index:5; 
}

progress::-webkit-progress-bar {
	border-radius: 2px;
	background-color: #F4F4F4;
}

progress::-webkit-progress-value{
	background-color: var(--mainC);
	background-color: #3182f6;
	border-radius: 2px;
}
progress .progressbar_txt { position:absolute; margin:0 auto; z-index:10; } 



.fileerror { display:inline-block; border: 1px solid #ddd; color: red;  padding:20px; border-radius: .25rem; } 



/* 관리자에서 한줄에 여러개 세팅 */ 
.fileupload-wrap { display:flex; flex-direction:row } 
.fileupload-wrap .fileupload-part { margin-right:1rem; } 
.fileupload-wrap .fileupload-part-info { text-align:center; padding-top:5px; letter-spacing:-0.05em; font-size:0.913rem; } 
.fileupload-wrap .fileupload-part-info .info { display:block; font-weight:300; line-height:1.4; margin-top:0.6rem; } 

@media screen and (max-width: 414px){
	.ui_upload .fileupload p { flex-direction: column; } 
}