/*This controls the file input tag, goal of the css is to not make it visible but ensure it is on top of a different styled button*/
input.file_browse{
 	cursor:pointer !important;
	position:absolute;
	height:29px;
	width:108px;
  margin-left:-108px;
  opacity:0.0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
}

/*If the file is selected then it makes the input size smaller to fit the font awesome fa-times element*/
.file_browse.selected {
	width:20px;
	height:20px;
  margin-left:-21px;
}

/*Since on hover does not work on an invisible input tag, this class is added on hover to the font awesome created button*/
.file-hover-select-file {
	background-color:#F1F1F2 !important;	
	border-color:#F1F1F2 !important;
}

/*Since on hover does not work on an invisible input tag, this class is added on hover to the font awesome created fa-times*/
.file-hover-remove-file {
	color: #6aa2b8 !important;	
}
/*When a file is selected the button is replaced with X so the user can remove the file, this applies the color*/
.fa-times {
	color:#D57E00;	
}

input[type=file] {
 display:inline-block !important;
}