.settings-wrap {
	pointer-events: none;
	z-index: 8;
	background-color: rgba(0, 0, 0, 0);

	display: flex;
	justify-content: center;
	align-items: flex-end;

	transition: 0.6s background-color;
}

.settings-wrap.visible {
	pointer-events: all;
	background-color: rgba(0, 0, 0, 0.8);
	color: #FFEED3;
}

.settings {
	transform: translateY(100%);

	opacity: 0;
	border: 2px solid;
	border-image: linear-gradient(145deg, #FFAA22 0%, #FA9A00 60%, #D38200 100%) 1;

	transition: 0.6s opacity, 0.6s transform;
}

.settings-wrap.visible .settings {
	transform: translateY(8px);

	opacity: 1;
}

.settings .block-header {
	border-image: linear-gradient(to right, #FFAA22 0%, #FA9A00 60%, #D38200 100%) 1 !important;
	background: linear-gradient(to right, rgba(255, 170, 34, 1) 20%, rgba(255, 170, 34, 0) 100%) !important;
	color: #0E0900 !important;
}

.settings .block-container {
	position: relative;
	height: calc(100% + 4px);

	padding-bottom: 4em;

	background-color: rgba(0, 0, 0, 0.6);
}

.settings .block-container::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;

	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%), url("../img/bg/settings.png") no-repeat;

	filter: blur(1px) opacity(0.6);
}

.settings .flex-wrapper {
	flex-wrap: wrap;
}

.settings-panel {
	border: 1px solid rgba(255, 170, 34, 0.2);
}

.settings-panel-inner {
	padding: 0.5em;
}

.settings-panel-header {
	padding: 0 0 0.25em 0;
	margin: 0;

	color: #FFAA22;
	text-shadow: 0px 0px 2px rgba(255, 170, 34, 0.8);

	font-family: "Bold";
	font-size: 2em;
	font-weight: normal;
	text-align: center;
}

.settings-panel-inner .checkbox-desc {
	vertical-align: 16%;
	color: #F5ECDD;
}

.checkbox {
	display: inline-block;
	position: relative;

	width: 1.5em;
	height: 1.5em;
	border-radius: 1.5em;
	margin-right: 6px;
	margin-bottom: 0.5em;
	vertical-align: middle;
	cursor: pointer;

	background-color: #0E0900;
	border: 2px solid #FFC15D;

	transition: 0.3s background-color;
}

.checkbox:hover {
	background-color: rgba(132, 82, 0, 0.2);
}

.checkbox.checked {
	background-color: #FA9A00;
}

.slider {
    -webkit-appearance: none;
    width: 16em;
    height: 1px;

    border: 1px solid rgba(255, 170, 34, 0.6);
    background-color: #0E0900;
    padding: 0;
    margin: 1em 0 0.25em 0;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #FA9A00;
	border: 2px solid #FFC15D;
    border-radius: 12px;
}

.slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #FA9A00;
	border: 2px solid #FFC15D;
    border-radius: 12px;
}

.slider::-webkit-slider-runnable-track {
    opacity: 1;
}

.slider::-moz-range-track {
    opacity: 0;
}

.setting-desc {
	text-align: right;
	opacity: 0.6;
}

.settings-button {
	display: block;
	width: 11.5em;

	cursor: pointer;
	margin-bottom: 1em;
	padding: 0 0.5em;
	font-family: "Bold";
	font-size: 1em;
	text-align: left;

	background-color: #0E0900;
	color: #FFAA22;
	border: 1px solid #FFAA22;
	border-left: 16px solid;
	box-shadow: none;

	opacity: 0.6;

	transition: 0.3s opacity;
}

#display-cookies-button {
	margin-top: 0.75em;
}

.settings-button:last-child {
	margin-bottom: 0;
}

.settings-button:hover {
	opacity: 1;
}

.settings-button:active {
	background-color: #FFAA22;
	color: #0E0900;
	border-color: #FFAA22;
}

.settings-wrap ::selection {
	background-color: #FFAA22 !important;
	color: #0E0900 !important;
}

.settings-wrap .block-header::selection {
	background-color: #0E0900 !important;
	color: #FFAA22 !important;
}

.settings-wrap .block-header ::selection {
	background-color: #0E0900 !important;
	color: #FFAA22 !important;
}

.settings-button:active::selection {
	background-color: #0E0900 !important;
	color: #FFAA22 !important;
}

.settings-wrap ::-moz-selection {
	background-color: #FFAA22 !important;
	color: #0E0900 !important;
}

.settings-wrap .block-header::-moz-selection {
	background-color: #0E0900 !important;
	color: #FFAA22 !important;
}

.settings-wrap .block-header ::-moz-selection {
	background-color: #0E0900 !important;
	color: #FFAA22 !important;
}

.settings-button:active::-moz-selection {
	background-color: #0E0900 !important;
	color: #FFAA22 !important;
}