.uploader {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* UPLOAD BOX */
.uploader .upload-box {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.uploader .upload-box:hover form[name="mapUploader"] {
	border-color: rgba(255, 255, 255, 0.08);
}

/* FORM */
.uploader .upload-box form[name="mapUploader"] {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	position: relative;
	width: 100%;
	margin: auto;
	padding: 50px 0 50px 0;

  	background-color: var(--box--backgroundColor);
	border: 8px dashed #1D1F25;
	border-radius: var(--radius-2) !important;

	transition: 0.25s ease;
}

/* DISCLAMER */
.uploader .upload-box form[name="mapUploader"] .disclamer {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.uploader .upload-box form[name="mapUploader"] .disclamer i {
	font-weight: 900;
	font-size: 5em;
}

.uploader .upload-box form[name="mapUploader"] .disclamer h2 {
	text-align: center;
	text-transform: uppercase;
	font-weight: 900;
	font-size: 1.6em;
}

/* INPUT FILE */
.uploader .upload-box form[name="mapUploader"] input[type="file"] {
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	outline: none;
	opacity: 0;

	cursor: pointer;
}

.uploader .upload-box form[name="mapUploader"] input[type="file"]:focus {
	outline: none;
}

.uploader .upload-box form[name="mapUploader"] input[type="file"].title {
	visibility: hidden;
}

/* UPLOADED/SELECTED/REMOVE MAP */
.uploader .upload-box form .uploaded-map {
	display: inline-flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	display: none;
}

.uploader .upload-box form .uploaded-map .selected-map {
	/*display: none;*/
	position: relative;
	z-index: 1000;

	display: inline-flex;
	flex-wrap: nowrap;

	padding: 15px 20px;

	background: var(--box--backgroundColor);
	border-radius: 10px 0 0 10px;
}

.uploader .upload-box form .uploaded-map .selected-map:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
	color: var(--box--backgroundColor);
	margin-right: 10px;
}

.uploader .upload-box form .uploaded-map .remove-file {
	display: inline-flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	width: auto;
	margin: auto;
	padding: 15px 20px;

	color: #FFF;
	font-weight: 900;
	text-transform: uppercase;
	background: rgba(230, 35, 35, 0.9);
	border-radius: 0 10px 10px 0;

	cursor: pointer;

	transition: 0.25s ease;
}

.uploader .upload-box form .uploaded-map .remove-file:hover {
	background: var(--box--backgroundColor);
}

.uploader .upload-box form .uploaded-map .remove-file i {
	margin: auto;
	padding: 0;
	line-height: 0;
	vertical-align: middle;
}

/* UPLOAD BUTTON */
.uploader .upload-box form[name="mapUploader"] button[type="submit"] {
	display: none;

	position: absolute;
	bottom: 10%;
	z-index: 1000;

	margin: 20px 0 0 0;
	padding: 10px 20px;

	font-size: 1.3em;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	background: #ff4500;
	border: none;
	border-radius: 100px;

	transition: 0.25s ease;
}

.uploader .upload-box form[name="mapUploader"] button[type="submit"]:hover {
	cursor: pointer;
	filter: brightness(1.1);
}

.uploader .upload-box form[name="mapUploader"] button[type="submit"]:hover {
	filter: brightness(0.9);
}

.uploader .upload-box form[name="mapUploader"] button[type="submit"]:focus {
	outline: none;
}

.uploader .upload-box form[name="mapUploader"] button[type="submit"] span:nth-child(2) {
	display: none;
}

/* REQUIREMENTS */
.uploader .require {
  	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
 
	width: 100%;
	padding: 10px;
 
	background: var(--box--backgroundColor);
 
	border-radius: 10px;
}

.uploader .require .item {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
 
	width: 100%;
	padding: 10px;
 
	font-size: 1.1em;
	 
	background: rgb( var(--theme-comment_count) );
	border: 1px solid transparent;
	border-radius: 10px;
}

.uploader .require div + div {
  	margin-top: 10px;
}

.uploader .require .item .icon {
  	display: flex;
	justify-content: center;
	align-items: center;
 
	width: 28px;
	height: 28px;
	padding: 18px;
 
	background: var(--box--backgroundColor);
	border-radius: 100px;
}

#button_container {
 	display: flex;
  	gap: 10px;
  	flex-wrap: wrap;
  	margin-bottom: 10px;
}

#button_container > button {
 	padding: 15px 10px;
  	flex: 1 0 40%;
  	border: none;
  	border-radius: var(--radius-2);
  	color: #fff;
  	font-weight: 700;
  	background-color: var(--box--backgroundColor);
  	text-shadow: 1px 1px black;
}

#button_container > button:hover {
 	cursor: pointer; 
}

#button_container > button span:nth-child(1) {
 	float: left; 
}

#button_container > button span:nth-child(2) {
 	float: right; 
}

#button_container > button.active {
 	background-color: rgb( var(--theme-timeline_color) ); 
}

.highlight {
 	font-weight: 800;
  	color: rgb( var(--theme-timeline_color) );
}

.uploader .require .item .icon i {
  	font-size: 1.2em;
}

.uploader .require .item div + span {
  	margin-left: 10px;
}