@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
	--bug: #AAD23C; --bug1: #BBDB63; --bug2: #88A830;
	--dark: #9696B4; --dark1: #ABABC3; --dark2: #787890;
	--dragon: #32AACD; --dragon1: #5BBBD7; --dragon2: #2888A4;
	--electric: #FFDA3D; --electric1: #FFE164; --electric2: #CCAE31;
	--fairy: #FA9DAC; --fairy1: #FBB1BD; --fairy2: #C87E8A;
	--fighting: #F8925A; --fighting1: #F9A87B; --fighting2: #C67548;
	--fire: #EE6060; --fire1: #F18080; --fire2: #BE4D4D;
	--flying: #82A0F0; --flying1: #9BB3F3; --flying2: #6880C0;
	--ghost: #C89BC3; --ghost1: #D3AFCF; --ghost2: #A07C9C;
	--grass: #4FCA5C; --grass1: #72D57D; --grass2: #3FA24A;
	--ground: #D28246; --ground1: #DB9B6B; --ground2: #A86838;
	--ice: #78C8D2; --ice1: #93D3DB; --ice2: #60A0A8;
	--normal: #B0AEAC; --normal1: #C0BEBD; --normal2: #8D8B8A;
	--poison: #C873DC; --poison1: #D38FE3; --poison2: #A05CB0;
	--psychic: #F582AF; --psychic1: #F79BBF; --psychic2: #C4688C;
	--rock: #BE9678; --rock1: #CBAB93; --rock2: #987860;
	--steel: #96AAD7; --steel1: #ABBBDF; --steel2: #7888AC;
	--water: #5FC3EB; --water1: #7FCFEF; --water2: #4C9CBC;
	--trainer: #6DBFB3; --trainer1: #8ACCC2; --trainer2: #57998F;

	--maxmove: #333333;
	--maxmove2: #FC6481;
	--maxmove3: #DD1F65;

	--hp: #C7F1D3;
	--attack: #EFEBCF;
	--defense: #F3DFBA;
	--spattack: #D3F1F7;
	--spdefense: #BED3EF;
	--speed: #DBCDE7;

	--button: #7BA7B5; --button1: #C4D5D9; --button2: #A1C0C8;

	--skill: #55DBF1;
	--passive_master: #CF9FFF;
	--passive_arcsuit: #F4D275;
	--passive_superawakening: #2478D7;
	--theme: #5DD0B4; --theme1: #7DD9C3; --theme2: #4AA690;

	--text: #27646E;
	--textYellow: #FCF067;
	--textGray: #B2B2B2;
	--textWhite: white;

	--textOutline: -1px -1px 0 var(--text),	1px -1px 0 var(--text),	-1px 1px 0 var(--text),	1px 1px 0 var(--text);

	--bg1: url("../images/bg1.png");
	--bg2: url("../images/bg2.png");
	--bgPassive: url("../images/skill_passive.png");
	--bgPassiveMaster: url("../images/skill_master.png");
	--iconPassiveMaster: url("../images/icon_master.png");
	--bgLucky: url("../images/skill_lucky.png");
	--bgPokeball: url("../images/bg_pokeball.png");
	--bgSyncMove: url("../images/bg_syncMove.png");
	--bgSyncMove2: url("../images/bg_syncMove2.png");
	--bgDynamax: url("../images/bg_dynamax.png");
	--bgDivineMove: url("../images/bg_divineMove.png");
	--bgTera: url("../images/bg_tera.png");

	--bgPassiveArcsuit: url("../images/skill_arcsuit.png");
	--iconPassiveArcsuit: url("../images/icon_arcsuit.png");

	--bgPassiveSuperawakening: url("../images/skill_superawakening.png");
	--iconPassiveSuperawakening: url("../images/icon_superawakening.png");
}

.bg_bug { background: linear-gradient(var(--bug), var(--bug2)) !important; }
.bg_dark { background: linear-gradient(var(--dark), var(--dark2)) !important; }
.bg_dragon { background: linear-gradient(var(--dragon), var(--dragon2)) !important; }
.bg_electric { background: linear-gradient(var(--electric), var(--electric2)) !important; }
.bg_fairy { background: linear-gradient(var(--fairy), var(--fairy2)) !important; }
.bg_fighting { background: linear-gradient(var(--fighting), var(--fighting2)) !important; }
.bg_fire { background: linear-gradient(var(--fire), var(--fire2)) !important; }
.bg_flying { background: linear-gradient(var(--flying), var(--flying2)) !important; }
.bg_ghost { background: linear-gradient(var(--ghost), var(--ghost2)) !important; }
.bg_grass { background: linear-gradient(var(--grass), var(--grass2)) !important; }
.bg_ground { background: linear-gradient(var(--ground), var(--ground2)) !important; }
.bg_ice { background: linear-gradient(var(--ice), var(--ice2)) !important; }
.bg_normal { background: linear-gradient(var(--normal), var(--normal2)) !important; }
.bg_poison { background: linear-gradient(var(--poison), var(--poison2)) !important; }
.bg_psychic { background: linear-gradient(var(--psychic), var(--psychic2)) !important; }
.bg_rock { background: linear-gradient(var(--rock), var(--rock2)) !important; }
.bg_steel { background: linear-gradient(var(--steel), var(--steel2)) !important; }
.bg_water { background: linear-gradient(var(--water), var(--water2)) !important; }
.bg_trainer { background: linear-gradient(var(--trainer), var(--trainer2)) !important; }
.bg_ { background: none; }

.icon_bug { background-image: url("../images/move_bug.png"); }
.icon_dark { background-image: url("../images/move_dark.png"); }
.icon_dragon { background-image: url("../images/move_dragon.png"); }
.icon_electric { background-image: url("../images/move_electric.png"); }
.icon_fairy { background-image: url("../images/move_fairy.png"); }
.icon_fighting { background-image: url("../images/move_fighting.png"); }
.icon_fire { background-image: url("../images/move_fire.png"); }
.icon_flying { background-image: url("../images/move_fly.png"); }
.icon_ghost { background-image: url("../images/move_ghost.png"); }
.icon_grass { background-image: url("../images/move_grass.png"); }
.icon_ground { background-image: url("../images/move_ground.png"); }
.icon_ice { background-image: url("../images/move_ice.png"); }
.icon_normal { background-image: url("../images/move_normal.png"); }
.icon_poison { background-image: url("../images/move_poison.png"); }
.icon_psychic { background-image: url("../images/move_psychic.png"); }
.icon_rock { background-image: url("../images/move_rock.png"); }
.icon_steel { background-image: url("../images/move_steel.png"); }
.icon_water { background-image: url("../images/move_water.png"); }
.icon_trainer { background-image: url("../images/move_trainer.png"); }
.bg_ { background-image: none; }

.icon_dynamax { background-image: url("../images/dynamax.png"); }
.icon_sync { background-image: url("../images/sync.png"); }
.icon_dynamax { background-size: 90% 100%; }
.icon_sync { background-size: 80%; }

.tera_bug { background-image: url("../images/tera/icon_bug.png"), url("../images/tera/bg_bug.png") !important; }
.tera_dark { background-image: url("../images/tera/icon_dark.png"), url("../images/tera/bg_dark.png") !important; }
.tera_dragon { background-image: url("../images/tera/icon_dragon.png"), url("../images/tera/bg_dragon.png") !important; }
.tera_electric { background-image: url("../images/tera/icon_electric.png"), url("../images/tera/bg_electric.png") !important; }
.tera_fairy { background-image: url("../images/tera/icon_fairy.png"), url("../images/tera/bg_fairy.png") !important; }
.tera_fighting { background-image: url("../images/tera/icon_fighting.png"), url("../images/tera/bg_fighting.png") !important; }
.tera_fire { background-image: url("../images/tera/icon_fire.png"), url("../images/tera/bg_fire.png") !important; }
.tera_flying { background-image: url("../images/tera/icon_flying.png"), url("../images/tera/bg_flying.png") !important; }
.tera_ghost { background-image: url("../images/tera/icon_ghost.png"), url("../images/tera/bg_ghost.png") !important; }
.tera_grass { background-image: url("../images/tera/icon_grass.png"), url("../images/tera/bg_grass.png") !important; }
.tera_ground { background-image: url("../images/tera/icon_ground.png"), url("../images/tera/bg_ground.png") !important; }
.tera_ice { background-image: url("../images/tera/icon_ice.png"), url("../images/tera/bg_ice.png") !important; }
.tera_normal { background-image: url("../images/tera/icon_normal.png"), url("../images/tera/bg_normal.png") !important; }
.tera_poison { background-image: url("../images/tera/icon_poison.png"), url("../images/tera/bg_poison.png") !important; }
.tera_psychic { background-image: url("../images/tera/icon_psychic.png"), url("../images/tera/bg_psychic .png") !important; }
.tera_rock { background-image: url("../images/tera/icon_rock.png"), url("../images/tera/bg_rock.png") !important; }
.tera_steel { background-image: url("../images/tera/icon_steel.png"), url("../images/tera/bg_steel.png") !important; }
.tera_water { background-image: url("../images/tera/icon_water.png"), url("../images/tera/bg_water.png") !important; }

.hide { display: none !important; }
.hideMax  { display: none !important; }


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

html { scroll-behavior:smooth; }

body {
	margin: auto;
	width: fit-content;
	padding: 0;
	background-color: black;
	font-family: 'Roboto','Verdana';
	display: flex;
	flex-direction: row;
	position: relative;
}

p:empty:not(#btn_grid):not(.move_description) { display: none !important; }

img[src$="empty.png"] { display: none !important; }
img[src$="sync_.png"] { display: none !important; }


#loadApp {
	position: fixed;
	width: 100%;
	height: 125%;
	z-index: 111;
	background-color: black;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
#loadApp img {
	position: absolute;
	width: auto;
	height: auto;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#slider { display: none; }

#editor {
	width: 512px;
	height: 1024px;
	z-index: 10;
	position: relative;
	color: white;
	margin-left: auto;
	margin-right: 5px;
	margin-top: 5px;
}

#editor>div {
	width: inherit;
	position: fixed;
	display: flex;
	flex-direction: column;
}

#render {
	margin-right: auto;
	display: flex;
	flex-direction: column;
	width: min-content;
}

#input_sync_pairs,
#input_backgrounds,
#input_pokemon_art,
#input_gridTemplates {
	padding: 5px;
	outline: none;
	border: 1px solid var(--text);
	color: var(--text);
	border-top-left-radius: 6px;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 2px;
	box-shadow: 2px 2px 3px #585858;
	margin: 2px 0;
}

#input_backgrounds {
	width: auto;
	border-bottom-right-radius: 0;
}

#input_pokemon_art {
	width: 100%;
	border-radius: 0;
}

#input_gridTemplates {
	width: auto;
	border-top-left-radius: 0;
}

.options {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.option {
	width: 100%;
	padding: 5px;
	outline: none;
	border: 2px solid var(--text);
	background: linear-gradient(#ffffff, #cccccc);
	color: var(--text);
	border-top-left-radius: 6px;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 2px;
	margin: 2px auto;
	box-shadow: 2px 2px 3px #585858;
	transition-duration: 50ms;
	font-size: 12px;
	text-align: center;
	font-family: "kenya-SouthSide", "Roboto", "Tahoma", "monospace;";
}
.option:hover {
	cursor: pointer;
}
.option:active {
	transform: scale(0.95);
	transition-duration: 50ms;
	background: linear-gradient(#D1EC96, #B8F33B);
}
input+.option {
	margin-left: 4px;
}
.optionSelected {
	background: linear-gradient(#D1EC96, #B8F33B);
}


input[type=file] {
	display: none;
}

.exclamation {
	position: absolute;
	right: -12px;
	top: 2px;
	filter: hue-rotate(270deg);
	animation: none !important;
	height: 25px !important;
}


#syncPairModeBtn,
#syncGridModeBtn,
#syncScoutModeBtn,
#syncOptionsModeBtn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	padding: 6px;
	border: 2px solid;
	border-radius: 6px;
	font-size: 0.9em;
	margin: 6px 0px;
	margin-top: 8px;
	color: var(--text);
	box-shadow: 2px 2px 3px #585858;
	background-image: url("../images/bg_btn.png");
	background-repeat: no-repeat;
	background-size: cover;
	transition-duration: 50ms;
}

#syncPairModeBtn img,
#syncGridModeBtn img,
#syncScoutModeBtn img,
#syncOptionsModeBtn img {
	height: 20px;
	margin: auto 5px;
}
#syncPairModeBtn { margin-right: 2px; }
#syncGridModeBtn,
#syncScoutModeBtn { margin-left: 2px; margin-right: 2px; }
#syncOptionsModeBtn { margin-left: 2px; width: auto; filter: hue-rotate(90deg); }

#syncPairModeBtn:hover,
#syncGridModeBtn:hover,
#syncScoutModeBtn:hover,
#syncOptionsModeBtn:hover {
	cursor: pointer;
}

#syncPairModeBtn:hover > img,
#syncGridModeBtn:hover > img,
#syncScoutModeBtn:hover > img {
	animation: translateIcon 500ms infinite;
}
@keyframes translateIcon {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-2px); }
	100% { transform: translateY(0px); }
}

#syncOptionsModeBtn:hover > img {
	animation: rotateIcon 2000ms infinite;
}
@keyframes rotateIcon {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}
@keyframes rotateIcon {
	0% { transform: rotate(0deg); }
	60% { transform: rotate(216deg); }
	100% { transform: rotate(360deg); }
}

#syncPairModeBtn:active,
#syncGridModeBtn:active,
#syncScoutModeBtn:active,
#syncOptionsModeBtn:active {
	transform: scale(0.98);
	transition-duration: 50ms;
}

.syncGridModeBtnPending > img {
    animation: rotateIcon 2000ms infinite !important;
}

.syncModeBtnSelected {
	filter: hue-rotate(270deg);
}

#source_valid,
#sourceGrid_valid {
	position: absolute;
	left: -50px;
}
.sourceValid { color: green; }
.sourceInvalid { color: red; }

#source_syncpair,
#source_syncgrid {
	font-family: monospace;
	height: 50%;
	min-width: 512px;
	width: 512px;
	max-width: 1024px;
	min-height: 50%;
	max-height: 80%;
	color: white;
	background-color: rgb(0 0 0 / 80%);
	pointer-events: auto;
	outline: none;
	border-top-left-radius: 6px;
	border-bottom-right-radius: 6px;
	margin: 0px;
	box-shadow: 2px 2px 3px #585858;
}


#syncOptions {
	background-color: #0c0c0d;
	border-radius: 5px;
	margin: 5px 0;
	padding: 5px;
	max-height: 512px;
	display: flex;
	flex-direction: column;
	height: 456px;
	overflow-y: scroll;
	padding-right: 32px;
}

#syncOptions h2 {
	color: rgb(174 217 255);
	padding-bottom: 5px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgb(174 217 255);
}

#syncOptions h3 {
	color: rgb(254 255 174);
	padding-bottom: 5px;
	margin-top: 10px;
	position: relative;
}

#syncOptions h4 {
    margin: 15px 0px 5px;
    color: rgb(248 249 192);
}

#syncOptions input {
	outline: none;
}
#syncOptions input[type="button"]:hover {
	cursor: pointer;
}

#syncOptions > div {
	width: 98%;
	display: flex;
	justify-content: space-between;
	margin: 4px 1%;
	position: relative;
}

#syncOptions > div > p {
	width: 50%;
}

#syncOptions > div > div {
	width: 50%;
	display: flex;
	justify-content: space-between;
}

#syncOptions > div > div > input {
	width: 100%;
}

#syncOptions > div label,
#syncOptions > div label+input {
	width: 50%;
}

.checkBox {
	width: auto !important;
	margin-right: auto;
}

.mirrorOption {
	width: 49% !important;
	margin-left: auto !important;
}

#btn_reset_adjustments {
	width: 49%;
	margin-top: 2px;
	margin-left: 50%;
}

#btn_sliderMode,
#btn_verticalMode {
	width: 24%;
	pointer-events: none;
	filter: brightness(40%);
}

#localstorage {
	width: 100%;
	outline: none;
}
#btn_saves {
	width: 49% !important;
	margin-top: -4px !important;
	margin-left: 50% !important;
}
#btn_saves > input {
	width: 100%;
	margin: 5px 0;
}


#infos {
	font-family: monospace;
	font-size: 14px;
}

#infos p:nth-of-type(1) {
	color: #D1EC96;
}

#infos ul {
	padding-inline-start: 20px;
	height: 200px;
	overflow: auto;
	scrollbar-width: none;
}
#infos ul::-webkit-scrollbar {
	display: none;
}

#infos p, #infos li {
	width: 100%;
	margin: 10px 0;
}

/*
#infos li:first-child::after {
	content: ".";
	color: transparent;
	margin-left: 10px;
	padding: 3px;
	background-image: url(../images/exclamation2.png);
	background-size: cover;
}
*/

#infos li:not(#infos li:first-child) {
	color : #444444
}


#btn_help {
	margin: 5px auto;
}

#help {
	display: none;
	color: white;
	background-color: rgb(0 0 0 / 60%);
	width: 100% !important;
	height: 100%;
	padding: 5%;
	overflow-y: auto;
}

#help div {
	margin: 12px 0;
	border: 1px solid #15659f;
	color: #44b1ff;
	background-color: rgb(68 177 255 / 20%);
	border-radius: 5px;
	padding: 10px;
}
#help div:hover {
	color: white;
	background-color: rgb(68 177 255 / 60%);
	cursor: pointer;
}

#help p:not(:first-child),
#help pre {
	display: none;
	margin: 4px 0;
	font-size: 14px;
}

#help div:hover > * {
	display: block;
}

#help div:hover > p:first-child {
	border-bottom: 1px solid #82c8fb;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

#help span {
	background-color: rgb(0 0 0 / 50%);
	padding: 1px 2px;
	border-radius: 5px;
	font-family: monospace;
	font-size: 14px;
}

#help pre {
	font-size: 12px;
	background-color: rgb(0 0 0 / 50%);
	border-radius: 5px;
	padding: 5px;
	margin: 5px 0;
}


.madeWith {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	right: 0;
	z-index: 5;
	font-size: 0.9em;
	color: #6a8f97;
	font-family: monospace;
	margin: auto;
	pointer-events: none;
	border-radius: 4px;
	padding: 0 5px;
}

.madeWith span {
	outline: none;
	padding: 0 2px;
	pointer-events: auto;
	font-size: 0.9em;
}
.madeWith span:hover {
	border: 1px solid #6ea9b6;
}
.madeWith span:focus {
	border: 1px solid #6ea9b6;
}


#screenshot {
	max-width: 1024px;
	z-index: 10;
	background-color: #0c0c0d;
	background-image: url(../images/bg2.png);
	padding-top: 24px;
}

#screenshot p {
	margin-top: 24px;
	text-align: center;
}

#screenshot img {
	width: 100%;
}


.backgroundSmall {
	clip-path: polygon(90% 0, 0% 80%, 0 0%);
	opacity: 80%;
	filter: blur(2px);
}

.backgroundLarge {
	clip-path: none !important;
	opacity: 70% !important;
	filter: none !important;
}

#syncPair_pokemonImage[src*="/pokemon/other/home/"],
#syncPair_pokemon2Image[src*="/pokemon/other/home/"],
#scout_pokemon[src*="/pokemon/other/home/"],
.grid_icon_origin img[src*="/pokemon/other/home/"] { filter: drop-shadow(0px 0px 0px #000) drop-shadow(0px 0px 1px #888); }

#pokemonHome_art {
	height: 27.5px;
	filter: grayscale(1);
	margin: auto;
	transition-duration: 100ms;
}
#pokemonHome_art:hover { cursor: pointer; }
.pokemonHome_art_selected {
	filter: none !important;
	transition-duration: 100ms;
}


.exEffect {
	display: block;
	bottom: 5px;
	right: 5px;
	color: white;
	text-shadow: var(--textOutline);
	width: 100%;
	font-size: 13px;
	border: 0px rgba(0, 0, 0, 30%) solid;
	border-radius: 4px;
	padding: 5px;
	margin-top: 5px;
}


.exEffect::before {
	content: "6★EX";
	color: var(--textYellow);
	background-color: rgb(66 66 66 / 30%);
	width: 100%;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding: 2px 5px;
	margin: -5px;
	margin-bottom: 5px;
	display: block;
}


@media only screen and (max-width: 1024px) {
	body { flex-direction: column; }
	#editor { width: 100%; margin: auto; height: auto; }
	#editor>div { position: relative; width: 100%; }
	#render { margin: auto; }
	#input_sync_pairs, .options, #input_pokemon_art { width: 100%; }
	#main { width: 100%; margin: auto; }
	#infos * { display: none; }
	#infos #btn_help { display: block !important; }

	#gridInfos {
		width: 96% !important;
		position: absolute !important;
		z-index: 10 !important;
		margin: auto !important;
		bottom: 2% !important;
		right: 0 !important;
		left: 0 !important;
	}

	#syncPairCodeEditor[class="hide"] +
	#syncGridCodeEditor[class="hide"] +
	#syncOptions +
	#infos *:not(#help) {
		display: block !important;
	}
}