

.rdFileUpload{
	font-family:arial;
	position:relative;
	width:100%;
	height:100%;
	padding:15px;
	height:200px;
	background-color:#efefef;
	border-radius: 5px;
}

.rdFileUpload form{
	height:100%;
	margin:0;
	padding:0;
}

.rdFileUpload .fileSelectArea{
	width:calc(100% - 30px);
	height:calc(100% - 30px);
	border:3px dashed #ccc; 
	background-color:#fff;
	transition: all 0.4s;
	position: absolute;
}


.rdFileUpload .uploadBtn{
	width:calc(100% - 30px);
	overflow:hidden;
	height:0px;
	border:1px solid #7e9aff; 
	background-color:#0093ff;
	transition: all 0.2s ease-in-out 0.3s;
	transition: background-color 0.05s ease-in-out;
	position: absolute;
	z-index:2;
	font-weight:bold;
	font-size:16px;
	color:#fff;
	cursor:pointer;
	visibility:hidden;
}

.rdFileUpload.select .uploadBtn{
	height:40px;
	visibility:visible;
}

.rdFileUpload .uploadBtn:hover{
	background-color:#355fdb;
}


.rdFileUpload.select .fileSelectArea{
	height:40px;
}


.rdFileUpload .plus{
	position:absolute;
	width:100%;
	height:auto;
	text-align:center;
	top:calc(50% - 25px);
	font-size:44px;
	color:#ccc;
}



.rdFileUpload .fileInput{
	opacity: 0.0;
	z-index:2; 
   /* IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

   /* IE 5-7 */
   filter: alpha(opacity=0);
 
   /* Netscape or and older firefox browsers */
   -moz-opacity: 0.0;

   /* older Safari browsers */
   -khtml-opacity: 0.0;

   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height:100%;
   cursor:pointer;
   
}

.rdFileUpload.select .fileInput{
	display:none;
}


.rdFileUpload .selectedFileArea{
	width:100%;
	height:0px;
	transition: all 0.4s;
	background-color:#fafafa;
	margin-top:50px;
	overflow:hidden;
	padding:10px;
	display:none;
	animation-delay: 0.5s;
}


.rdFileUpload.select .selectedFileArea{
	height:120px;
	overflow-y:auto;
	display:inline-block;
}

.rdFileUpload .selectedFileArea .file{
	width:100%;
	height:100px !important;
	padding:0 5px;
	margin-bottom:0px;
	float:left;
	background-color:#fff;
	position:relative;
}

.rdFileUpload.oneFile .selectedFileArea .file{
	height:calc(100% - 3px);	
}

.rdFileUpload .selectedFileArea .file .iconArea{
	float:left;
	background-image: url(fileIcon-grey.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top; 
	width:15%;
	margin-right:10px;
	height:calc(100% - 10px);
	padding-top:20px;
	text-align:center;
	font-weight: bold;
	font-size:12px;
	color: #656565;
	text-transform: uppercase;
}

.rdFileUpload .selectedFileArea .file .detailArea{
	width:60%;
	height:calc(100% - 25px);
	float:left;
	overflow:hidden;
	padding:5px;
}
.rdFileUpload.oneFile .selectedFileArea .file .detailArea{
	width:100%;
}

.rdFileUpload .selectedFileArea .detailArea input{
	width:100%;
	padding:5px;
	margin-bottom:10px;
}
.rdFileUpload .selectedFileArea .detailArea h4{
	float:left;
	margin:5px 0 0 0;
	font-size:14px !important;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	width:calc(85% - 10px);
	height:20px;
}
.rdFileUpload .selectedFileArea .detailArea h5{
	margin:5px 0;
	color:#aaa8a8;
	width:80%;
	float:left;
}


.rdFileUpload .selectedFileArea .file .btnArea{
	position:absolute;
	right:0;
	bottom:0;
}

.rdFileUpload .selectedFileArea .file .btnArea .remove{
	background-color:#f73636;	
	padding: 0px 11px 3px 11px !important;
    border: 0 !important;
    font-size: 19px;
	color:#fff;
	cursor:pointer;
}

.rdFileUpload .selectedFileArea .file .btnArea .remove:hover{
	background-color:#e53030;	
}


.rdFileUpload .percentArea{
	display:none;
	position:absolute;
	z-index:3;
	width:100%;
	height:100%;
	left:-10px;
	top:0;
	cursor:wait;
	background-color:rgba(0,0,0,0.5);
}

.rdFileUpload .percentArea .text{
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  color: #fff;
  margin-top:20px;
  margin-bottom: 25px;
}

.rdFileUpload .percentArea .progress-bar{
  width: calc(100% - 5px);
  height: 22px;
  background: #444;
  border-radius: 13px;
  padding: 3px;
  box-sizing: border-box;
}
.rdFileUpload .percentArea .progress{
  width: 4%;
  height: 16px;
  background: #f60d54;
  border-radius: 13px;
}
.rdFileUpload .percentArea .percent{
  position: absolute;
  left: calc(50% - 15px);
  color: #fdb5ca;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 23px;
  z-index:1;
}


