/* File Uploader CSS START */
.uploader {
	 display: block;
	 clear: both;
	 margin: 0 auto;
	 width: 100%;
}
 .uploader label {
	 float: left;
	 clear: both;
	 width: 100%;
	 padding: 20px 15px;
	 text-align: center;
	 background: #fff;
	 border-radius: 5px;
	 border: 2px dashed var(--blue-700);
	 transition: all 0.2s ease;
	 user-select: none;
}
 .uploader label:hover {
	 border-color: var(--green--200);
}
 .uploader label.hover {
	 border: 3px solid var(--green-200);
}
 .uploader label.hover #start svg {
	 transform: scale(0.8);
	 opacity: 0.3;
}
 .uploader #start {
	 float: left;
	 clear: both;
	 width: 100%;
}
 .uploader #start.hidden {
	 display: none;
}
 .uploader #start svg, .uploader #response svg {
	 font-size: 40px;
	 margin-bottom: 0;
	 transition: all 0.2s ease-in-out;
}
 .uploader #response {
	 float: left;
	 clear: both;
	 width: 100%;
}
 .uploader #response.hidden {
	 display: none;
}
 .uploader #response #messages {
	 margin-bottom: 0.5rem;
}
 .uploader #file-image {
	 display: inline;
	 margin: 0 auto 0.5rem auto;
	 width: auto;
	 height: auto;
	 max-width: 180px;
}
 .uploader #file-image.hidden {
	 display: none;
}
 .uploader #notimage {
	 display: block;
	 float: left;
	 clear: both;
	 width: 100%;
}
 .uploader #notimage.hidden {
	 display: none;
}
 .uploader progress, .uploader .progress {
display: inline;
clear: both;
margin: 0 auto;
width: 100%;
max-width: 180px;
height: 8px;
border: 0;
border-radius: 4px;
background-color: #eee;
overflow: hidden;
}
 .uploader .progress[value]::-webkit-progress-bar {
border-radius: 4px;
background-color: #eee;
}
 .uploader .progress[value]::-webkit-progress-value {
background: linear-gradient(to right, #a7a7a7 0%, #bbb 50%);
border-radius: 4px;
}
 .uploader .progress[value]::-moz-progress-bar {
background: linear-gradient(to right, #a7a7a7 0%, #bbb 50%);
border-radius: 4px;
}
 .uploader input[type="file"] {
	 display: none;
}
 .uploader div {
	 margin: 0 0 0.5rem 0;
	 color: var(--body);
}
 .uploader .btn {
	 display: inline-block;
	 margin: 0.5rem 0.5rem 1rem 0.5rem;
	 clear: both;
	 font-family: inherit;
	 font-weight: 600;
	 font-size: 13px;
	 text-decoration: none;
	 text-transform: uppercase;
	 border: none;
	 border-radius: 0.2rem;
	 outline: none;
	 padding: 0 1.5rem;
	 height: 36px;
	 line-height: 36px;
	 color: #fff;
	 transition: all 0.2s ease-in-out;
	 box-sizing: border-box;
	 background: var(--body);
	 border-color: var(--body);
	 cursor: pointer;
}
 
 .uploader {
  --loading: 0;
  --success: var(--green-600);
  --danger: var(--red-500);
  --loading-color: hsla(39.9, 100%, 62.5%, var(--loading));
  will-change: border-color, background-color;
}
.uploader > .loading:hover,
.uploader > .loading {
  border-color: hsla(39.9, 100%, 62.5%, var(--loading));
}
.uploader > .success:hover,
.uploader > .success {
  border-color: var(--success);
}
.uploader > .error:hover,
.uploader > .error {
  border-color: var(--danger);
}
.uploader > .loading .progress[value]::-webkit-progress-value {
  background-image: unset;
  background-color: hsla(39.9, 100%, 62.5%, var(--loading));
  border-radius: 4px;
}
.uploader > .loading .progress[value]::-moz-progress-bar {
  background-image: unset;
  background-color: hsla(39.9, 100%, 62.5%, var(--loading));
  border-radius: 4px;
}
.uploader > .success .progress[value]::-webkit-progress-value {
  background-image: unset;
  background-color: var(--success);
  border-radius: 4px;
}
.uploader > .success .progress[value]::-moz-progress-bar {
  background-image: unset;
  background-color: var(--success);
  border-radius: 4px;
}
.uploader > .error .progress[value]::-webkit-progress-value {
  background-image: unset;
  background-color: var(--danger);
  border-radius: 4px;
}
.uploader > .error .progress[value]::-moz-progress-bar {
  background-image: unset;
  background-color: var(--danger);
  border-radius: 4px;
}

.uploader #file-drag.loading #start,
.uploader #file-drag.error #start,
.uploader #file-drag.success #start,
.uploader #file-drag.initial #response {
  display: none;
}
.uploader #file-drag.loading #response,
.uploader #file-drag.error #response,
.uploader #file-drag.success #response {
  display: block;
}
.uploader #file-drag.success,
.uploader #file-drag.success div,
.uploader #file-drag .success {
  color: var(--success);
}
.uploader #file-drag.error,
.uploader #file-drag.error div,
.uploader #file-drag .error {
  color: var(--danger);
}
 /* File Uploader CSS END */