.res-subredditManager #sr-header-area {
	overflow: hidden;

	.res-subredditManager-allowLowercase & {
		text-transform: none;
	}
}

#srList {
	position: absolute;
	display: block;
	top: 18px;
	max-height: calc(100vh - 40px);
	left: 0;
	z-index: 9999;
	border: 1px solid black;
	background-color: #fafafa;
	min-width: 320px;
	padding: 2px 2px 0 2px;
	overflow-y: auto;
	overscroll-behavior-y: contain;

	tbody tr {
		border-bottom: 1px solid gray;

		&:hover {
			background-color: #eef;
		}
	}

	thead td {
		cursor: pointer;
	}

	td {
		padding: 3px 8px;

		a {
			width: 100%;
			display: block;
		}
	}
}

#srLeftContainer,
#RESStaticShortcuts,
#RESShortcuts,
#srDropdown {
	display: inline;
	float: left;
	position: relative;
	z-index: 5;
}

// Edit shortcut dialog.
#editShortcutDialog {
	z-index: 999;
	position: absolute;
	top: 25px;
	left: 5px;
	width: auto;
	padding: 10px;
	background: #f0f3fc;
	border: 1px solid #aaa;
	border-radius: 7px;
	font-size: 12px;
	color: #000;
	box-shadow: 2px 2px 7px rgba(0, 0, 0, .1);

	h3 {
		margin: 0 0 1em 0;
	}

	.RESFormItem {
		clear: both;
		margin: 0 0 1em 0;
	}

	.RESFieldItem {
		margin: 0 0 0 8em;
	}

	label {
		clear: both;
		float: left;
		width: 8em;
		padding: 4px 0;
	}

	input[type=text] {
		width: 270px;
		border: 1px solid #aaa;
		margin: 0;
		padding: 2px 0 2px 3px;
		font-size: 100% !important;
		box-sizing: border-box;
	}

	#shortcut-subreddit {
		width: 240px;
	}

	#sortButton {
		border: 1px solid #aaa !important;
		border-left: none !important;
		border-radius: 3px 0 0 3px;
		background: rgb(230, 230, 230);
		color: #333 !important;
		margin: 0;
		padding: 2px 0 !important;
		text-align: center;
		cursor: pointer;
		display: inline-block !important;
		width: 30px !important;
		line-height: normal;
		box-shadow: none;
		font-size: 100% !important;
	}

	#shortcut-subreddit.unsortable {
		width: 270px;

		+ #sortButton {
			display: none !important;
		}
	}

	.RESDescription {
		font-size: smaller;
		color: #666;
		width: 270px;
	}

	[name=shortcut-save] {
		float: right;
	}
}

#srLeftContainer {
	z-index: 4;
	padding-left: 4px;
	margin-right: 6px;
}

#RESShortcutsViewport {
	width: auto;
	overflow: hidden;
}

#RESShortcuts {
	z-index: 6;
	white-space: nowrap;
	overflow-x: hidden;
	padding-left: 2px;

	.separator:last-of-type {
		display: none;
	}
}

#RESSubredditGroupDropdown {
	position: absolute;
	z-index: 99999;
	background-color: #f0f0f0;
	border: 1px solid black;
	border-top-width: 0;
	font: 12px/1.5 verdana, sans-serif;
	padding: 0 !important;
	margin-left: -5px;

	> .RESShortcutsEditButtons {
		.res-icon {
			color: black;
			font-size: 12px;
			padding: 5px;
			margin: 0 !important;
		}

		.delete {
			float: right;
		}
	}

	.shortcutSuffix {
		opacity: .4;
	}

	a:hover .shortcutSuffix {
		opacity: .6;
	}

	ul {
		padding: 15px 0;
		overflow: hidden auto;
		max-width: 300px;
		max-height: 500px;
		border-bottom: 1px rgba(0, 0, 0, .5) solid;

		li {
			padding: 0;
		}

		a {
			display: block;
			padding: 1px 15px;

			&:hover {
				background-color: rgba(255, 255, 255, .6);
			}
		}

		&:empty {
			display: none;
		}

		&:only-child {
			border-bottom-width: 0;
		}
	}
}

#RESShortcutsEditContainer {
	width: 69px;
	position: absolute;
	overflow: hidden;
	right: 0;
	top: 0;
	z-index: 999;
	background-color: #f0f0f0;
	height: 16px;
	user-select: none;

	.res-icon {
		font-size: 14px;
	}
}

#RESShortcutsSort,
#RESShortcutsRight,
#RESShortcutsLeft,
#RESShortcutsAdd {
	width: 16px;
	cursor: pointer;
	background: #f0f0f0;
	font-size: 20px;
	color: #369;
	height: 18px;
	line-height: 15px;
	position: absolute;
	top: 0;
	z-index: 999;
	user-select: none;
}

#RESShortcutsRight {
	right: 0;
}

#RESShortcutsAdd {
	right: 15px;
}

#RESShortcutsLeft {
	right: 31px;
}

#RESShortcutsSort {
	right: 47px;
	font-size: 14px;
}

#res-trash-overlay {
	transition: opacity .2s;
	position: fixed;
	inset: 20px 0 0 0;
	background-color: rgba(255, 255, 255, .7);
	z-index: 999;
}

#res-shortcut-trash {
	transition: opacity .2s;
	overflow: hidden;
	z-index: 1000;
	width: 400px;
	padding: 20px;
	position: fixed;
	top: 20%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, 0);
	background-color: rgb(255, 255, 255);
	border: 5px solid rgb(156, 193, 228);
	border-radius: 5px;
	box-shadow: 2px 2px 1px 0 rgba(0, 50, 100, .1);
	font: 14px/1.5 verdana, sans-serif;
	color: rgb(30, 30, 30);
	box-sizing: content-box;

	strong {
		font-weight: bold;
	}
}

#res-shortcut-trash-zone {
	display: block;
	padding: 10px;
	margin: 10px 0;
	border: 2px dashed rgb(200, 200, 200);
	font-size: 32px;
	text-align: center;
	color: rgb(200, 200, 200);

	&::before {
		content: '\F155';
		font-family: 'Batch';
	}
}

#res-dragDrop-tip {
	font-size: 12px;
	line-height: 1.5;
}

.srSep {
	margin-left: 6px;
}

#RESShortcutsAddFormContainer {
	position: absolute;
	width: 300px;
	padding: 5px 10px;
	right: 2px;
	top: 21px;
	z-index: 10000;
	background-color: #f0f3fc;
	border: 1px solid #c7c7c7;
	border-radius: 3px;
	font-size: 12px;
	color: #000;
	box-sizing: content-box;
	box-shadow: 2px 0 7px rgba(0, 0, 0, .1);
}

#shortCutsAddForm {
	div {
		margin: 5px 0;
		clear: both;
	}

	label {
		display: inline-block;
		width: 100px;
	}

	.res-shortcuts-add-tip {
		font-size: smaller;
		color: #666;
	}

	input[type=text] {
		width: 200px;
		box-sizing: border-box;
	}

	input[type=submit] {
		float: right;
	}

	.res-shortcuts-add-footer {
		text-align: right;
		padding-top: 5px;
	}
}

#sr-header-area a.RESShortcutsCurrentSub,
#RESSubredditGroupDropdown .RESShortcutsCurrentSub a {
	color: orangered !important;
	font-weight: bold;
}

#srLeftContainer,
#RESShortcutsViewport,
#RESShortcutsEditContainer {
	max-height: 18px;
}
