/* =========================================================
   SHOWTHREAD – SCHNELLANTWORT
   EMBERS REMAIN
   ========================================================= */

.storm-quickreply {
	width: 100%;

	margin: 34px 0 30px;

	background: #292627;

	border-top: 1px solid rgba(154,129,105,.32);
	border-bottom: 1px solid rgba(154,129,105,.18);

	box-sizing: border-box;
}


/* =========================================================
   HEAD
   ========================================================= */

.storm-quickreply-head {
	display: flex;
	align-items: center;
	justify-content: space-between;

	min-height: 48px;

	padding: 0 18px;

	border-bottom: 1px solid rgba(154,129,105,.28);

	box-sizing: border-box;
}


/* Titel */

.storm-quickreply-title {
	font-family: Georgia, "Times New Roman", serif;

	font-size: 18px;
	font-weight: normal;

	color: #d8b49b;
}


/* Collapse */

.storm-quickreply-collapse {
	display: flex;
	align-items: center;
	justify-content: center;

	opacity: .55;

	transition: opacity .18s ease;
}

.storm-quickreply-collapse:hover {
	opacity: 1;
}

.storm-quickreply-collapse img {
	display: block;

	width: auto;
	height: auto;

	cursor: pointer;
}


/* =========================================================
   BODY
   ========================================================= */

.storm-quickreply-body {
	display: grid;

	grid-template-columns:
		210px
		minmax(0, 1fr);

	gap: 0;

	box-sizing: border-box;
}


/* =========================================================
   OPTIONEN LINKS
   ========================================================= */

.storm-quickreply-options {
	padding: 20px 18px;

	border-right: 1px solid rgba(154,129,105,.14);

	box-sizing: border-box;
}


/* Nachricht */

.storm-quickreply-label {
	margin-bottom: 4px;

	font-family: Georgia, "Times New Roman", serif;

	font-size: 13px;

	color: #d8d0ca;
}


/* Beschreibung */

.storm-quickreply-note {
	margin-bottom: 15px;

	font-size: 8px;
	line-height: 1.45;

	color: #817976;
}


/* Checkboxen */

.storm-quickreply-checks {
	display: flex;
	flex-direction: column;

	gap: 7px;

	font-size: 9px;

	color: #aaa19b;
}

.storm-quickreply-checks label {
	display: flex;
	align-items: center;

	gap: 6px;

	cursor: pointer;
}

.storm-quickreply-checks input[type="checkbox"] {
	margin: 0;
}


/* =========================================================
   EDITOR
   ========================================================= */

.storm-quickreply-editor {
	min-width: 0;

	padding: 20px 22px;

	box-sizing: border-box;
}


/* Textarea */

.storm-quickreply-editor textarea {
	display: block;

	width: 100%;
	min-height: 190px;

	padding: 14px;

	background: #302d2f !important;

	border: 1px solid #514b4b !important;
	border-radius: 0 !important;

	color: #cfc8c3 !important;

	font-family: inherit;
	font-size: 11px;
	line-height: 1.7;

	resize: vertical;

	outline: none;

	box-sizing: border-box;

	transition: border-color .18s ease;
}

.storm-quickreply-editor textarea:focus {
	border-color: #9a8169 !important;
}


/* =========================================================
   MULTIQUOTE
   ========================================================= */

.storm-quickreply-multiquote {
	width: 100% !important;

	margin: 8px 0 0 !important;
	padding: 8px 10px !important;

	background: rgba(255,255,255,.018) !important;

	border: 1px solid rgba(154,129,105,.14) !important;

	color: #817976 !important;

	font-size: 8px;

	box-sizing: border-box;
}

.storm-quickreply-multiquote a {
	color: #c8ad94 !important;

	text-decoration: none;
}

.storm-quickreply-multiquote a:hover {
	color: #c98a68 !important;
}


/* =========================================================
   BUTTONLEISTE
   ========================================================= */

.storm-quickreply-buttons {
	grid-column: 1 / 3;

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

	gap: 8px;

	padding: 11px 22px;

	background: #252324;

	border-top: 1px solid rgba(154,129,105,.14);

	box-sizing: border-box;
}


/* Buttons */

.storm-quickreply-buttons .button {
	height: 32px;

	padding: 0 15px;

	background: #454142 !important;

	border: 1px solid #5c5554 !important;
	border-radius: 0 !important;

	color: #d8b49b !important;

	font-size: 8px;
	letter-spacing: .8px;
	text-transform: uppercase;

	cursor: pointer;

	transition:
		background .18s ease,
		border-color .18s ease,
		color .18s ease;
}

.storm-quickreply-buttons .button:hover {
	background: #504a4b !important;

	border-color: #9a8169 !important;

	color: #e2bca4 !important;
}


/* =========================================================
   SPINNER
   ========================================================= */

#quickreply_spinner {
	text-align: center;

	padding: 10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 700px) {

	.storm-quickreply-body {
		display: block;
	}

	.storm-quickreply-options {
		border-right: 0;
		border-bottom: 1px solid rgba(154,129,105,.14);
	}

	.storm-quickreply-buttons {
		display: flex;
	}

}