:root {
	--pickMaxWidthCenteredIcons: 230px;
	--pickMaxHeightCenteredIcons: 130px;
	--pickMaxWidthSmallIcons: 130px;
	--pickMaxHeightSmallIcons: 130px;
	--championMaxWidth: 100px;
	--championMaxHeight: var(--championMaxWidth);
	--banMaxWidth: 100px;
	--banMaxHeight: var(--banMaxWidth);
	--banMinWidth: 50px;
	--banMinHeight: 50px;
	--searchBarMaxWidth: 130px;
	--searchBarMaxHeight: 70px;
	--searchBarFontSize: 1.9rem;
	--dataButtonMaxWidth: 100px;
	--dataButtonMaxHeight: 33px;
	--dataButtonFontSize: 20px;
	--generalBorderRadius: 6px;
	--overlayBorderRadius: 24px;
	--draftPreviewIconSize: 60px;
	--arrowButtonMaxWidth: 50px;
	font-family: Helvetica, Arial, sans-serif;
}

:root[data-gradient="show"] {
	body {
		background:
			linear-gradient(
				90deg,
				transparent,
				rgb(0 0 255 / 15%) 0%,
				var(--bodyBackgroundColor) 50%,
				rgb(255 0 0/ 15%) 100%
			),
			var(--bodyBackgroundColor);
	}
}

:root[data-mode="super-compact"] {
	#champions-container {
		display: none !important;
	}

	.bans {
		justify-content: center !important;
	}

	#blue-team-bans {
		justify-content: end;
	}
	#red-team-bans {
		justify-content: start;
	}

	.utils {
		display: none !important;
	}
	--championsContainerWidth: 100%;
	--championContainerPadding: 4px 40px;
	--notBansWidth: 60%;
	--notBansMinWidth: 0px;
	--bansWidth: 60%;
	--headerWidth: 68%;
	--roleIconMaxWidth: 40px;
	--roleIconMaxHeight: var(--roleIconMaxWidth);
	--teamIconMaxWidth: 40px;
	--teamIconMaxHeight: 40px;
	--width: 1115px;
}

:root[data-mode="compact"] {
	--championsContainerWidth: 100%;
	--championContainerPadding: 4px 40px;
	--notBansWidth: 69%;
	--notBansMinWidth: 940px;
	--bansWidth: 69%;
	--headerWidth: 68%;
	--roleIconMaxWidth: 40px;
	--roleIconMaxHeight: var(--roleIconMaxWidth);
	--teamIconMaxWidth: 40px;
	--teamIconMaxHeight: 40px;
	--width: 1115px;
}

:root[data-mode="wide"] {
	--championsContainerWidth: 100%;
	--championContainerPadding: 4px 5vw;
	--notBansWidth: 100%;
	--bansWidth: 100%;
	--headerWidth: 100%;
	--roleIconMaxWidth: 100px;
	--roleIconMaxHeight: var(--roleIconMaxWidth);
	--teamIconMaxWidth: 100px;
	--teamIconMaxHeight: var(--teamIconMaxWidth);
}

@media screen and (max-width: 1175px) {
	:root[data-mode="wide"] {
		.team-selection#teams-container {
			display: none !important;
		}
		#toggle-ally-enemy-coloring-button,
		#save-draft-button {
			display: none;
		}
	}
}

@media screen and (max-width: 960px) {
	:root[data-mode="wide"] {
		.role-selection {
			display: none !important;
		}
	}
}

@media screen and (max-width: 1728px) {
	:root[data-mode="compact"],
	:root[data-mode="super-compact"] {
		.team-selection#teams-container {
			display: none !important;
		}
		#save-draft-button,
		#toggle-ally-enemy-coloring-button {
			display: none;
		}
	}
	#toggle-pick-ban-mode {
		display: none !important;
	}
}

@media screen and (max-width: 1394px) {
	:root[data-mode="compact"] {
		.role-selection {
			display: none !important;
		}
	}

	:root[data-mode="super-compact"] {
		#input_user_data,
		#default_data {
			display: none !important;
		}
	}
}

@media screen and (width < 961px) {
	:root[data-mode="wide"] {
		--championContainerPadding: 4px 0px !important;
	}
}

@media screen and (width < 911px) {
	:root[data-mode="wide"] {
		#browse-saved-drafts-button {
			display: none;
		}
	}
}
:root[data-theme="light"] {
	--bodyBackgroundColor: #696f77;
	--settingsButtonFilter: brightness(0.01) invert(84%);
	--sourceButtonBackgroundColor: white;
	--sourceButtonTextColor: black;
	--sourceButtonBorder: 1px solid var(--bodyBackgroundColor);
	--selectionBoxShadow: 0px 0px 2px 2px gold;
	--searchBarBackground: white;
	--searchBarBorder: none;
	--textInputBackgroundColor: white;
	--textInputPlaceholderColor: #797979;
	--textInputTextColor: black;
	--championPickBorder: 1px solid black;
	--championBanBorder: 1px solid black;
	--championIconBorder: 2px solid black;
	--onBackgroundColor: lightgreen;
	--offBackgroundColor: pink;
	--labelColor: black;
	--highlightedBackgroundColor: lightgreen;
	--settingsTooltipColor: black;
	--invalidBackgroundColor: red;
	--validBackgroundColor: lightgreen;
	--scrollbarColor: #aaaaaa var(--bodyBackgroundColor);
	--overlayBackgroundColor: #5b5b5b;
	--overlayTextColor: black;
	--pickBackgroundColor: lightgreen;
	--banBackgroundColor: pink;
}

:root[data-theme="dark"] {
	--bodyBackgroundColor: #0d1117;
	--settingsButtonFilter: brightness(0.1) invert(73%);
	--sourceButtonBackgroundColor: #06145e;
	--sourceButtonTextColor: #cccccc;
	--sourceButtonBorder: 1px solid #707070;
	--selectionBoxShadow: 0px 0px 2px 2px #0b2ee5;
	--searchBarBackground: none;
	--searchBarBorder: 1px solid #797979;
	--textInputBackgroundColor: #0f093e;
	--textInputPlaceholderColor: #797979;
	--textInputTextColor: #eeeeee;
	--championPickBorder: 1px solid #404040;
	--championBanBorder: 1px solid #404040;
	--championIconBorder: 2px solid #404040;
	--onBackgroundColor: darkgreen;
	--offBackgroundColor: darkred;
	--labelColor: #eeeeee;
	--highlightedBackgroundColor: darkgreen;
	--settingsTooltipColor: #eeeeee;
	--invalidBackgroundColor: #640d0d;
	--validBackgroundColor: darkgreen;
	--scrollbarColor: gray var(--bodyBackgroundColor);
	--overlayBackgroundColor: #1e1e1e;
	--overlayTextColor: white;
	--pickBackgroundColor: darkgreen;
	--banBackgroundColor: darkred;
	--bluesideBackground: blue;
	--redsideBackground: red;
}
:root[data-theme="village"] {
	--bodyBackgroundColor: #2c1b1b;
	--settingsButtonFilter: brightness(0.01) invert(84%);
	--sourceButtonBackgroundColor: #edc02ad1;
	--sourceButtonTextColor: black;
	--sourceButtonBorder: 1px solid #342020;
	--selectionBoxShadow: 0px 0px 2px 2px gold;
	--searchBarBackground: none;
	--searchBarBorder: 1px solid #eeeb90de;
	--textInputBackgroundColor: white;
	--textInputPlaceholderColor: #707070;
	--textInputTextColor: black;
	--championPickBorder: 1px solid black;
	--championBanBorder: 1px solid black;
	--championIconBorder: 2px solid black;
	--onBackgroundColor: #399339;
	--offBackgroundColor: #b30000;
	--labelColor: black;
	--highlightedBackgroundColor: #eeeb90de;
	--settingsTooltipColor: black;
	--invalidBackgroundColor: red;
	--validBackgroundColor: lightgreen;
	--scrollbarColor: #aaaaaa var(--bodyBackgroundColor);
	--overlayBackgroundColor: #5b5b5b;
	--overlayTextColor: white;
	--pickBackgroundColor: #d4d083;
	--banBackgroundColor: #c8a333;
}

:root[data-theme="retro"] {
	--bodyBackgroundColor: #0d1117;
	--settingsButtonFilter: brightness(0.1) invert(73%);
	--sourceButtonBackgroundColor: #790b0d;
	--sourceButtonTextColor: #cccccc;
	--sourceButtonBorder: 1px solid #707070;
	--selectionBoxShadow: 0px 0px 2px 2px #0b2ee5;
	--searchBarBackground: none;
	--searchBarBorder: 1px solid #707070;
	--textInputBackgroundColor: #0f093e;
	--textInputPlaceholderColor: #797979;
	--textInputTextColor: #eeeeee;
	--championPickBorder: 1px solid #404040;
	--championBanBorder: 1px solid #404040;
	--championIconBorder: 2px solid #404040;
	--onBackgroundColor: darkgreen;
	--offBackgroundColor: darkred;
	--labelColor: #eeeeee;
	--highlightedBackgroundColor: #031d6ade;
	--settingsTooltipColor: #eeeeee;
	--invalidBackgroundColor: #640d0d;
	--validBackgroundColor: darkgreen;
	--scrollbarColor: gray var(--bodyBackgroundColor);
	--overlayBackgroundColor: #1e1e1e;
	--overlayTextColor: white;
	--pickBackgroundColor: #031d6ade;
	--banBackgroundColor: #790b0d;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	height: 100vh;
	width: 100vw;
	background-color: var(--bodyBackgroundColor);
	overflow: hidden;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 10px;
	height: 100vh;
	width: 100vw;
	padding-top: 10px;
}

.draft-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 0;
	width: 100%;
}

.draft-team {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.draft-team > .stage-separator-vertical {
	height: 50px;
	background-color: gray;
}

.champions-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: var(--championContainerPadding);
	gap: 5px;
	min-height: 0;
	width: var(--championsContainerWidth);
	max-height: 80.2vh;
	overflow-y: auto;
	scrollbar-color: var(--scrollbarColor);
}

.champion-icon {
	max-width: var(--championMaxWidth);
	max-height: var(--championMaxHeight);
	width: var(--championMaxWidth);
	height: var(--championMaxHeight);
	border: var(--championIconBorder);
	cursor: pointer;
}

.selected {
	box-shadow: var(--selectionBoxShadow);
}

.champion-pick {
	height: 100%;
	width: 100%;
}

.draft-team > .champion-pick > img {
	border: var(--championPickBorder);
}

.champion-pick > img[src="./img/pick_icon.webp"] {
	min-width: var(--pickMaxWidthCenteredIcons);
	min-height: var(--pickMaxHeightCenteredIcons);
	width: var(--pickMaxWidthCenteredIcons);
	height: var(--pickMaxHeightCenteredIcons);
	max-width: var(--pickMaxWidthCenteredIcons);
	max-height: var(--pickMaxHeightCenteredIcons);
}

.champion-pick > img[src="./img/ban-icon.webp"] {
	min-width: var(--pickMaxWidthSmallIcons);
	min-height: var(--pickMaxHeightSmallIcons);
	width: var(--pickMaxWidthSmallIcons);
	height: var(--pickMaxHeightSmallIcons);
	max-width: var(--pickMaxWidthSmallIcons);
	max-height: var(--pickMaxHeightSmallIcons);
}
.champion-pick > img[src*="small"] {
	max-width: var(--pickMaxWidthSmallIcons) !important;
	max-height: var(--pickMaxHeightSmallIcons) !important;
	width: var(--pickMaxWidthSmallIcons) !important;
	height: var(--pickMaxHeightSmallIcons) !important;
	cursor: pointer;
}

.champion-pick > img[src*="centered"] {
	width: var(--pickMaxWidthCenteredIcons) !important;
	height: var(--pickMaxHeightCenteredIcons) !important;
	cursor: pointer;
}

.role-selection {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 1;
	gap: 5px;
	min-width: 150px;
}

.role-selection > img {
	max-width: var(--roleIconMaxWidth);
	max-height: var(--roleIconMaxHeight);
	border-radius: var(--generalBorderRadius);
	width: 100%;
	height: 100%;
	flex-shrink: 1;
	min-width: 0px;
}

.utils {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 11px;
	flex-shrink: 1;
	width: 100%;
	height: var(--roleIconMaxHeight);
}

.search-bar {
	height: 100%;
	max-width: var(--searchBarMaxWidth);
	max-height: var(--searchBarMaxHeight);
	font-size: var(--searchBarFontSize);
	background: var(--searchBarBackground);
	color: var(--textInputTextColor);
	border: var(--searchBarBorder);
	border-radius: var(--generalBorderRadius);
	padding: 4px;
}

.search-bar::placeholder {
	color: var(--textInputPlaceholderColor);
}

.team-selection {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-shrink: 1;
	min-width: 150px;
}

.team-selection > img {
	max-width: var(--teamIconMaxWidth);
	max-height: var(--teamIconMaxHeight);
	min-width: 0px;
	width: 100%;
	height: auto;
	flex-shrink: 1;
}

.not-bans {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	min-height: 0;
	width: var(--notBansWidth);
	min-width: var(--notBansMinWidth);
	padding: 0px 10px;
}

.bans {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0px 10px;
	gap: 10px;
	width: var(--bansWidth);
	min-width: var(--notBansMinWidth);
}

.draft-team-bans {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 75%;
	flex-shrink: 1;
	gap: 10px;
}

.draft-team-bans#red-team-bans {
	flex-direction: row-reverse;
	justify-content: end;
}

.draft-team-bans#blue-team-bans {
	justify-content: start;
}

.ban-separator {
	width: 15px;
}

.pick-separator {
	height: 15px;
}

.champion-ban {
	height: fit-content;
	border: var(--championBanBorder);
	aspect-ratio: 1;
	height: 100%;
	width: 100%;
	min-height: var(--banMinHeight);
	min-width: var(--banMinWidth);
	max-height: var(--banMaxHeight);
	max-width: var(--banMaxWidth);
}

.draft-team-bans > .champion-ban > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.draft-team-bans > .champion-ban > img:not([src="./img/ban-icon.webp"]) {
	cursor: pointer;
}

.source-button {
	min-width: var(--dataButtonMaxWidth);
	min-height: var(--dataButtonMaxHeight);
	font-size: var(--dataButtonFontSize);
	border: var(--sourceButtonBorder);
	padding: 4px 8px;
	border-radius: 6px;
	background-color: var(--sourceButtonBackgroundColor);
	color: var(--sourceButtonTextColor);
	cursor: pointer;
}

#user_data_form_container > textarea {
	font-size: 15px;
	scrollbar-color: var(--scrollbarColor);
}

#user_data_form_container > label {
	font-size: 30px;
	color: var(--overlayTextColor);
}

#user_data_form_container > label > a {
	color: #5eeb73;
}

.hidden {
	display: none !important;
}

[data-team="both"] {
	border-color: orange;
}

[data-team="ally"] {
	border-color: green;
}

[data-team="enemy"] {
	border-color: red;
}

.settings-button,
.settings-button > img {
	max-height: 28px;
	max-width: 28px;
	height: 28px;
	width: 28px;
	cursor: pointer;
}

.settings-button > img[src="./img/question-mark.webp"] {
	height: 28px;
	width: 22px;
}

.settings-button > img {
	filter: var(--settingsButtonFilter);
}

.settings-button {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bodyBackgroundColor);
	border: 0px;
}

#left-overlay {
	position: fixed;
	left: 0px;
	top: 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1;
	height: 100%;
	opacity: 0.95;
	font-size: 1.3rem;
}

#settings-menu {
	background-color: var(--overlayBackgroundColor);
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	padding: 10px 10px;
	border-radius: 0 var(--overlayBorderRadius) var(--overlayBorderRadius) 0;
	height: 100%;
	max-width: 40vw;
	gap: 30px;
	overflow: auto;
	color: var(--overlayTextColor);
	scrollbar-color: var(--scrollbarColor);
}

#settings-menu > label {
	padding: 0px 2px;
}

.setting-container {
	display: flex;
	flex-direction: column;
	width: 80%;
	gap: 2px;
}

.setting-container > input {
	width: fit-content;
	text-align: left;
	color: inherit;
}

.settings-tooltip {
	width: 100%;
	color: var(--overlayTextColor);
}

#right-overlay {
	position: fixed;
	right: 0px;
	top: 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1;
	height: 100%;
	opacity: 0.95;
}
#user_data_form_container {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	background-color: var(--overlayBackgroundColor);
	padding: 10px 10px;
	border-radius: var(--overlayBorderRadius) 0 0 var(--overlayBorderRadius);
	height: 100%;
	gap: 10px;
}

#header {
	display: flex;
	flex-direction: row;
	align-items: start;
	justify-content: space-between;
	padding: 4px 4px 0 4px;
	width: var(--headerWidth);
	min-width: var(--notBansMinWidth);
}

#leave-settings-button {
	font-weight: 700;
	color: inherit;
}

#manual-text {
	max-height: 96.3vh;
	overflow-y: auto;
	display: flex;
	align-items: start;
	justify-content: center;
	scrollbar-color: var(--scrollbarColor);
}

.team-logo {
	filter: var(--teamLogoFilter);
	border-radius: var(--generalBorderRadius);
	display: var(--teamIconDisplay);
}

.custom-data-input-textarea {
	border: var(--sourceButtonBorder);
	background-color: var(--textInputBackgroundColor);
	color: var(--textInputTextColor);
}

.custom-data-input-textarea::placeholder {
	color: var(--textInputPlaceholderColor);
}

.on {
	background-color: var(--onBackgroundColor);
}

.off {
	background-color: var(--offBackgroundColor);
}

.data {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.control-buttons {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.highlighted {
	background-color: var(--highlightedBackgroundColor);
}

.invalid {
	background-color: var(--invalidBackgroundColor);
}

.valid {
	background-color: var(--validBackgroundColor);
}

#input-error-box {
	color: var(--textInputTextColor);
	font-size: var(--dataButtonFontSize);
	border: var(--sourceButtonBorder);
	background-color: var(--sourceButtonBackgroundColor);
	border-radius: var(--generalBorderRadius);
	padding: 2px 4px;
	max-width: 400px;
}

[data-mode="pick"] {
	background-color: var(--pickBackgroundColor);
}
[data-mode="ban"] {
	background-color: var(--banBackgroundColor);
}

#toggle-pick-ban-mode {
	min-width: 117px;
	text-align: left;
}

#switch-theme-button {
	min-width: 81px;
	text-align: center;
}

.input-buttons-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#close-manual-button,
#go-to-top-button {
	background-color: var(--highlightedBackgroundColor);
}

:root[data-theme="dark"] {
	#close-manual-button,
	#go-to-top-button {
		background-color: var(--sourceButtonBackgroundColor);
	}
}

#welcome-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	padding: 30px;
	gap: 40px;
	color: var(--sourceButtonTextColor);
	height: 100vh;
	overflow: auto;
	scrollbar-color: var(--scrollbarColor);
}

:root[data-theme="village"] {
	#welcome-screen {
		color: white;
	}
	.search-bar {
		color: white;
	}
	.draft-name {
		color: black;
	}
}

#welcome-screen-title {
	font-weight: 900;
	font-size: 2rem;
}

#welcome-screen-text {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	max-width: 50vw;
	gap: 10px;
	font-size: 1.3rem;
}

.text-header {
	font-weight: 700;
	font-size: 1.5rem;
}

.welcome-screen-key-feature {
	font-weight: 600;
}

#welcome-screen-text > ol > li {
	padding: 5px;
}

#welcome-screen-text > ol > li > ul > li {
	padding: 2px;
	list-style: inside;
}

#welcome-screen-buttons {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
	gap: 4px;
}

#middle-overlay {
	position: fixed;
	padding: 10px;
	right: 20vw;
	top: 3vh;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	z-index: 1;
	width: 60vw;
	height: 94vh;
	min-width: 600px;
	opacity: 0.9;
	gap: 15px;
	background: var(--bodyBackgroundColor);
	overflow: hidden;
	border-radius: var(--overlayBorderRadius);
	color: var(--overlayTextColor);
	font-size: 1.3rem;
}

#middle-overlay-utils {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

#draft-snapshots-container {
	padding-top: 30px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: start;
	flex-wrap: wrap;
	row-gap: 30px;
	column-gap: 10px;
	height: 87%;
	overflow: auto;
	scrollbar-color: var(--scrollbarColor);
}

.draft-preview-icon-container,
.draft-preview-icon-container > img {
	max-width: var(--draftPreviewIconSize);
	max-height: var(--draftPreviewIconSize) "";
}

:root {
	--complexDraftPreviewIconSize: 43px;
}
.complex-draft-preview-icon-container > img,
.reverse-complex-draft-preview-icon-container > img {
	max-width: var(--complexDraftPreviewIconSize);
	max-height: var(--complexDraftPreviewIconSize);
}

.complex-draft-preview-icon-container {
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 10px;
	padding: 0px 5px;
	height: calc(1.1 * var(--complexDraftPreviewIconSize));
	width: 50%;
	border: var(--sourceButtonBorder);
	font-size: 0.94rem;
}

.reverse-complex-draft-preview-icon-container {
	display: flex;
	align-items: center;
	justify-content: start;
	flex-direction: row-reverse;
	gap: 10px;
	padding: 0px 5px;
	height: calc(1.1 * var(--complexDraftPreviewIconSize));
	width: 50%;
	border: var(--sourceButtonBorder);
	font-size: 0.94rem;
}

.complex-draft-snapshot-container {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: calc(var(--draftPreviewIconSize) * 5.08);
	max-height: calc(var(--draftPreviewIconSize) * 7.93);
	min-width: calc(var(--draftPreviewIconSize) * 5.08);
	min-height: calc(var(--draftPreviewIconSize) * 7.93);
	border: var(--championPickBorder);
	cursor: pointer;
}

.complex-draft-text-container {
	position: absolute;
	top: -25px;
	min-width: calc(var(--draftPreviewIconSize) * 5);
	max-width: calc(var(--draftPreviewIconSize) * 5);

	display: flex;
}

.complex-draft-name,
.complex-draft-team-name-input {
	background: var(--sourceButtonBackgroundColor);
	border: var(--sourceButtonBorder);
	border-radius: var(--generalBorderRadius);
	color: inherit;
	text-align: center;
	font-size: var(--dataButtonFontSize);
}

.complex-draft-name {
	width: 70%;
}
.complex-draft-team-name-input {
	width: 15%;
}

.snapshot-pick-container {
	background: darkgreen;
}
.snapshot-ban-container {
	background: darkred;
}

.draft-snapshot-container {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: calc(var(--draftPreviewIconSize) * 3);
	max-height: calc(var(--draftPreviewIconSize) * 6);
	min-width: calc(var(--draftPreviewIconSize) * 3);
	min-height: calc(var(--draftPreviewIconSize) * 6);
	border: var(--championPickBorder);
	cursor: pointer;
}

.draft-snapshot-remove-button {
	position: absolute;
	top: 10px;
	right: 10px;
	filter: invert(80%);
}

.draft-snapshot-container > .take-snapshot-screenshot-icon {
	position: absolute;
	top: 10px;
	left: 0px;
	filter: invert(80%);
	max-width: 20px;
}

.take-snapshot-screenshot-icon {
	position: absolute;
	top: 3px;
	left: 3px;
	filter: invert(80%);
	max-width: 20px;
}

.complex-draft-snapshot-container > .draft-snapshot-remove-button {
	position: absolute;
	top: 0px;
	right: 0px;
	filter: invert(90%);
}

.draft-text-container {
	position: absolute;
	top: -20px;
	min-width: calc(var(--draftPreviewIconSize) * 3);
	max-width: calc(var(--draftPreviewIconSize) * 3);
}

.draft-name,
.draft-team-name-input {
	background: var(--sourceButtonBackgroundColor);
	border: var(--sourceButtonBorder);
	border-radius: var(--generalBorderRadius);
	color: inherit;
	text-align: center;
	font-size: var(--dataButtonFontSize);
}

.draft-name {
	width: 50%;
}

.draft-team-name-input {
	width: 25%;
}

#snapshots-input-error-box {
	font-size: var(--dataButtonFontSize);
	border: var(--sourceButtonBorder);
	background-color: var(--sourceButtonBackgroundColor);
	border-radius: var(--generalBorderRadius);
	padding: 2px 4px;
	max-width: 700px;
}

#bind-menu {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	gap: 6px;
	width: 100%;
	max-width: 450px;
}

.bind-menu-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.bind-menu-input {
	max-width: 2rem;
	text-align: center;
}

#snapshots-pagination-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	text-align: center;
}

#snapshots-pagination-container > label {
	font-size: inherit;
}

#snapshots-pagination-page-counter,
#draft-counter {
	max-width: var(--dataButtonMaxWidth);
	text-align: center;
}

#draft-snapshots-per-page {
	background: none;
	color: inherit;
	border: var(--sourceButtonBorder);
	border-radius: var(--generalBorderRadius);
	height: var(--dataButtonMaxHeight);
	padding: 0px 4px;
	font-size: inherit;
}

#draft-snapshots-per-page > option {
	background-color: var(--overlayBackgroundColor);
	color: inherit;
}

:root[data-ally-enemy-colors="none"] {
	--allyBackground: none;
	--enemyBackground: none;
}

:root[data-ally-enemy-colors="B/R"] {
	--allyBackground: blue;
	--enemyBackground: red;
}

:root[data-ally-enemy-colors="R/B"] {
	--allyBackground: red;
	--enemyBackground: blue;
}

#ally {
	background: var(--allyBackground);
}
#enemy {
	background: var(--enemyBackground);
}

.greentext {
	color: lightgreen;
	font-weight: 900;
}

.source-button:hover,
.role-icon:hover {
	filter: brightness(120%);
}

.team-logo:hover {
	filter: invert(20%);
}

.arrow-button {
	max-width: var(--arrowButtonMaxWidth);
	width: var(--arrowButtonMaxWidth);
	min-width: 10px !important;
}

#toggle-ally-enemy-coloring-button {
	width: 132px;
}