#drop-area {
	  border: 2px dashed #ccc;
	  border-radius: 8px;
	  padding: 20px;
	  text-align: center;
	  cursor: pointer;
	  min-height: 300px;
	  margin: 10px;
	  background-color: #ddd;
	}
	#drop-area:hover {
	  border: 2px dashed green;
	  border-radius: 8px;
	}
	.instructions {
	  display: block;
	  margin-bottom: 10px;
	  font-size: 16px;
	  color: #555;
	}
//	input{
//	   display: inline-block;
//	   margin-top: 20px;
//	}
	.preview-container{
	   display: grid;
	   grid-template-columns: repeat(auto-fit, minmax(150px, 250px));
	   grid-column-gap: 30px;
	   grid-row-gap: 50px;
	   margin-top: 50px;
	}
	.image-container{
	   padding: 5px;
	   background-color: #3c4d68;
	   color: white;
	}
	.preview-container img{
	   display: inline-block;
	   width: 100%;
	}
	.preview-container .info{
	   margin-top: 10px;
	   padding: 10px;
	}
	.preview-container .remove-button{
	   display: inline-block;
	   margin-top: 30px;
	   border: none;
	   padding: 8px 20px;
	   font-size: 16px;
	   background-color: #d9687c;
	   color: white;
	   cursor: pointer;
	   margin-bottom: 20px;
	}
	.preview-container .remove-button:hover{
	   filter: brightness(1.2);
	}
//	.error{
//	   color: #712c2c;
//	   background: pink;
//	   padding: 10px;
//	   margin-top: 30px;
//	   display: none;
//	}

	progress {
	   width: 100%;
	   display: block;
	   margin-top: 10px;
	   height: 20px;
	}
	.percentage-number{
	   margin-top: 20px;
	   font-weight: bold;
	   font-size: 22px;
	   text-align: center;
	}
	.far, .fas{
	   font-size: 30px;
	   display: inline-block;
	   margin-right: 10px;
	   color:  #888;
	}
//	img{
//	   width: 100%;
//	   background-color: #f4f4f4;
//	}
	.preview-container{
	   padding: 20px;
//	   border: thin solid #d4d4d4;
	   /*margin-top: 20px;*/
	}
	.preview-container img:hover{
	   cursor: pointer;
	   box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
	}
	.image-info img{
	   background-color: #f4f4f4 !important;
	}
	.image-info p{
	   font-weight: bold;
	}
	.image-info i{
	   cursor: pointer;
	   color: #b85b5b;
	}
	.image-info ._error{
	   color: red;
	   font-weight: bold;
	   font-size: 15px;
	   margin-top: 10px;
	}
	.butt{
	   border: none;
	   padding: 8px 20px;
	   font-size: 16px;
	   display: inline-block;
	   margin-top: 20px;
	   cursor: pointer;
	   background-color: #00ba0f;
	   color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;


	}
	.butt:hover{
	   background-color: #14761c;
	}
	.but:active{
	   background-color: red;
	}
//	form{
//	   margin-top: 80px;
//	}
//	.error{
//	   color: #af0606;
//	   padding: 10px;
//	   line-height: 30px;
//	   background-color: #ffedf0;
//	}
	.file-error{
	   background-color: #e4e4e4;
	}
	.success{
	   color: #008e00;
	   font-size: 22px;
	   font-weight: bold;
	   margin-top: 40px;
	   text-align: center;
	}

	.dd {
	    width: 98%;
	    padding: 20px;
	    position: absolute;
	    z-index: 5;
	    background-color: #eee;
	    border: 1px;
	    border-style: solid;
	    border-color: gray;
	    border-radius: 5px;
	}

input[type="file"]::file-selector-button {
  background-color: #00ba0f;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  margin: auto;
}