#main {
	width: 512px;
	height: 1024px;
	background-image: var(--bg2);
	background-size: 32%;
	position: relative;
	overflow: hidden;
}


#summary {
	position: relative;
	height: 65%;
	background-image: var(--bg1);
	background-repeat: repeat;
	background-size: 32%;
	overflow: hidden;
}


/* -----------
BACKGROUND IMAGE
------------*/

#summary > div:nth-of-type(1) {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
}

#syncPair_bg {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	margin: auto;
}


/* -----------
IMAGES TRAINER 
------------*/

#summary > div:nth-of-type(2) {
	z-index: 1;
	width: 44%;
	height: 80%;
	position: absolute;
	bottom: 0;
	left: 4%;
	display: flex;
}

#syncPair_trainerImageBase,
#syncPair_trainerImageEx {
	max-height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	margin: auto;
}


/* ----------------
IMAGES/NAME POKEMON
-----------------*/

#summary > div:nth-of-type(3) {
	--size: 224px;
	z-index: 2;
	width: var(--size);
	height: var(--size);
	position: absolute;
	top: 28%;
	right: 4%;
	display: flex;
	align-items: center;
	justify-content: center;
}

#syncPair_pokemon,
#syncPair_pokemon2 {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

#syncPair_pokemon div:first-child,
#syncPair_pokemon2 div:first-child {
	background-image: var(--bgPokeball);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 100%;
	position: relative;
}

#syncPair_pokemon div:last-child,
#syncPair_pokemon2 div:last-child {
	width: 100%;
	position: absolute;
	bottom: -36px;
}

#syncPair_pokemonImage,
#syncPair_pokemon2Image {
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	padding: 10px;
}

#syncPair_pokemonShiny,
#syncPair_pokemon2Shiny {
	position: absolute;
	left: 0;
	bottom: 25px;
	margin: auto;
	z-index: 1;
	width: 32px;
}

#syncPair_pokemonFormName,
#syncPair_pokemon2FormName {
	color: var(--textWhite);
	background-color: var(--button);
	border-radius: 50px;
	margin: auto;
	margin-bottom: 5px;
	word-break: break-word;
	text-align: center;
	width: 100%;
	white-space: pre;
	overflow: hidden;
}

#syncPair_pokemonName,
#syncPair_pokemon2Name {
	color: var(--text);
	background-color: rgba(255,255,255,80%);
	border: 1px solid #d7d7d7;
	border-radius: 5px;
	padding: 0px;
	margin: auto;
	word-break: break-word;
	text-align: center;
	width: 100%;
	white-space: pre;
	overflow: hidden;
}

.syncPair_pokemonGender {
	position: absolute;
	width: 19px;
	margin-left: 2px;
	margin-top: 5px;
}


/* -----------------------
BUTTONS EX, ALTER, DYNAMAX
------------------------*/

#btn_alter {
	width: 36px;
	position: absolute;
	right: -6px;
	bottom: -3px;
}
#btn_ex:hover,
#btn_alter:hover,
#btn_dynamax:hover {
	cursor: pointer;
}

#btn_ex:active,
#btn_dynamax:active {
	transform: scale(0.9);
	transition: 0.2s;
}

#btn_alter:active {
	transform: scale(0.9) rotate(-20deg);
	transition: 0.2s;
}


/* ------------
SYNC PAIR INFOS
-------------*/

#summary > div:nth-of-type(4) {
	color: var(--text);
	z-index: 3;
	width: 96%;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-wrap: nowrap;
	background-color: rgb(255 255 255 / 80%);
	margin: 1% auto;
	padding: 5px;
	border: 1px solid #D1E0E0;
	border-radius: 5px;
	min-height: 166px;
}


/*---------------
BTN EX & BTN GRID
---------------*/

#summary
> div:nth-of-type(4)
> div:nth-of-type(1) {

	display: flex;
	width: 100%;
	position: absolute;
	margin-top: -55px;
}

#btn_ex {
	width: auto;
	height: 45px;
}

#btn_grid {
	outline: none;
	white-space: nowrap;
	z-index: 4;
	overflow: hidden;
	padding: 0 12px 0 36px;
	min-width: 40%;
	margin: 10px;
	text-align: center;
	line-height: 25px;
	color: var(--textWhite);
	border: 2px solid #73968C;
	border-radius: 7px;
	box-shadow: 2px 2px rgb(163 178 183 / 50%);
	transition-duration: 100ms;
	background-color: rgb(28 161 128 / 90%);
	background-image: url(../images/icon_grid.png);
	background-size: contain;
	background-repeat: no-repeat;
}

#btn_grid:focus {
	min-width: 40% !important;
	transition-duration: 100ms;
}

#btn_grid:empty {
	padding: 0;
	min-width: 30px;
	transition-duration: 100ms;
}


/*----------------------------
NAME, RARITY, ROLE, TYPE, WEAK
----------------------------*/

#summary
> div:nth-of-type(4)
> div:nth-of-type(2) {

	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


#syncPair_trainerName {
	font-size: 1.3em;
	padding: 5px;
}

#syncPair_rarity {
	padding: 5px;
}

#syncPair_rarity img {
	height: 26px;
}


/*----------------------
ROLE, TYPE, WEAK + ICONS
----------------------*/

#syncPair_role_type {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0 20px;
}

#syncPair_role img,
#syncPair_exRole img,
#syncPair_type img,
#syncPair_weakness img {
	height: 28px;
	margin: 5px;
}


/*---
STATS
---*/

#stats {
	display: flex;
	width: 90%;
}

#statsLabels {
	color: var(--text) 
}

#statsLabels,
#syncPair_pokemonStats,
#syncPair_pokemon2Stats {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#syncPair_pokemonStats,
#syncPair_pokemon2Stats {
	text-align: right;
	color: var(--textWhite);
	text-shadow: var(--textOutline);
}

#statsLabels p,
#syncPair_pokemonStats p,
#syncPair_pokemon2Stats p {
	padding: 2px 12px;
	font-size: 1.1em;
	letter-spacing: 1px;
	position: relative;
}

#stats div p:nth-child(1) { background-color: var(--hp); }
#stats div p:nth-child(2) { background-color: var(--attack); }
#stats div p:nth-child(3) { background-color: var(--defense); }
#stats div p:nth-child(4) { background-color: var(--spattack); }
#stats div p:nth-child(5) { background-color: var(--spdefense); }
#stats div p:nth-child(6) { background-color: var(--speed); }


.stat_up { color: var(--textYellow); }
.stat_down { color: var(--textGray); }

.highestStatTooltip {
	display: none;
	position: absolute;
	background-color: #000000cf;
	border-radius: 5px;
	font-family: 'Roboto';
	font-size: 13px;
	text-shadow: none;
	padding: 10px;
	z-index: 5;
	right: 80px;
	width: max-content;
	bottom: 5px;
}

.highestStatTooltip a {
	color: #31a98b;
	text-decoration: none;
}

#stats p:hover .highestStatTooltip {
	display: block;
}

.highestStatIcon {
	height: 84%;
	position: absolute;
	margin: -12px -26px;
}


/* --------------------------------
TABS : MOVES, PASSIVE, LUCKY, THEME
---------------------------------*/

#tabs {
	background-color: var(--button);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 5%;
}

.tab {
	color: var(--textWhite);
	background: linear-gradient(var(--button), var(--button2));
	border: 2px solid var(--button1);
	border-radius: 5px;
	padding: 10px;
	width: 22%;
	margin: 2px 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	letter-spacing: -1px;
}
.tab img {
	height: 20px;
	margin-bottom: -4px;
}
.tab:hover {
	color: var(--button);
	background: white;
	cursor: pointer;
}
.tab_selected {
	color: var(--button);
	background: white;
}


/* ----
ACTIONS
-----*/

#actions {
	position: relative;
	margin: 2% auto;
	height: 25%;
}

#moves, #moves2, #movesMAX, #movesSync, #moves2Sync, #moveTera {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	justify-content: space-between;
	align-items: center;
	width: 90%;
}

#moves, #moves2, #movesMAX {
	height: 60%;
}

#movesSync, #moves2Sync {
	width: 100%;
	height: 30%;
}



/*---
MOVES
---*/

.move {
	width: calc(100% * (1/2) - 8%);
	height: 35%;
	color: var(--textWhite);
	border-left: 6px rgba(0, 0, 0, 30%) solid;
	border-right: 6px rgba(0, 0, 0, 30%) solid;
	border-top: 2px rgba(0, 0, 0, 25%) solid;
	border-bottom: 3px rgba(0, 0, 0, 40%) solid;
	border-radius: 40px;
	box-shadow: 1px 3px rgb(0 0 0 / 24%);
	position: relative;
}

.no_move {
	pointer-events: none;
	filter: grayscale(100%);
	opacity: 25%;
	background: rgb(190 190 190) !important;
}

.no_move * {
	opacity: 0;
}

.move_basics {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.move_name {
	text-align: center;
	color: var(--textWhite);
	text-shadow: -1px -1px 0 var(--text),	1px -1px 0 var(--text),	-1px 1px 0 var(--text),	2px 2px 1px var(--text);
	width: 90%;
	z-index: 2;
}

.b_move {
	height: 118%;
	margin: auto;
	margin-top: -1%;
	overflow: hidden;
}

.b_move+.move_name {
	position: absolute;
}

.b_move img:nth-child(1) {
	height: 100%;
	filter: opacity(95%);
	z-index: 1;
	position: relative;
}

.b_move img:nth-child(2) {
	display: none;
}

.b_move img:nth-child(3) {
	position: absolute;
	width: 101%;
	height: 100%;
	left: -1px;
	right: 0;
	top: 0;
	bottom: 0;
}


#moveTera {
	position: absolute;
	right: 10px;
	bottom: 36px;
	z-index: 5;
	width: 12%;
	height: 21%;
}

#moveTera .move {
	width: 100%;
	height: 100%;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background-size: 70%, cover !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background: none !important;
}

#moveTera .move_basics {
	background-image: none;
}

#moves .tera_icon , #moves2 .tera_icon,
#moveTera .move_details_description, #moveTera .tera_bg,
#moveTera .move_name, #moveTera .move_gauge_uses, #moveTera .move_user {
	display: none;
}

.tera {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	margin: auto;
	top: 0;
	left: 0;
}

.tera_bg {
	position: absolute;
	margin: auto;
	top: -4px;
	left: -4px;
	bottom: 0px;
	right: -4px;
	overflow: hidden;
	background-image: var(--bgTera);
	mix-blend-mode: multiply;
	border-radius: 40px;
	text-align: center;
}

.tera_icon {
	background-repeat: no-repeat;
	position: relative;
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-size: 64%, 98%;
}

.tera_icon img {
	position: absolute;
	opacity: 20%;
	width: 100%;
}


#moves .move_target_icon, #moves2 .move_target_icon {
	width: 28%;
	margin: auto;
	height: 17px;
	position: absolute;
	top: -18px;
	clip-path: polygon(0% 100%, 13% 65%, 25% 100%, 37% 100%, 50% 64%, 63% 100%, 75% 100%, 88% 65%, 100% 100%);
	filter: brightness(75%);
}

.move_user,
.move_gauge_uses,
.move_details_description { display: none; }

.icon_sync_center {
	position: absolute;
	top: -100%;
	left: 0;
	right: 0;
	margin: auto;
	pointer-events: none;
}

.icon_sync_center img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	pointer-events: none;
}

.icon_sync_center > img:nth-of-type(1) { width: 75px; }
.icon_sync_center > img:nth-of-type(2) { width: 45px; }


/*-------
MOVE SYNC
-------*/

#movesSync .move,
#moves2Sync .move {
	width: 75%;
	height: 100%;
	margin: auto;
	border: none;
	border-radius: 0px;
	background-image: var(--bgSyncMove2) !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	box-shadow: none;
}

#movesSync .move_basics,
#moves2Sync .move_basics {
	background-image: none;
	height: inherit;
}

#movesSync .move_name,
#moves2Sync .move_name {
	font-size: 1.3em;
	color: #ffeca8;
	text-shadow: var(--textOutline);
	width: 80%;
}


/*----------
MOVE DYNAMAX
----------*/

#movesMAX .move {
	background: linear-gradient(var(--maxmove2), var(--maxmove3)) !important;
}

#movesMAX .icon_sync_center {
	filter: grayscale(100%);
	opacity: 0.3;
	top: 0;
	bottom: 0;
}

#movesMAX .move_basics {
	filter: grayscale(100%) contrast(100%);
}

#btn_dynamax {
	z-index: 3;
	position: absolute;
	right: 12px;
	bottom: 25px;
	height: 40px;
}


.move,
.skill {
	transition-duration: 200ms;
}

.move:hover,
.skill:hover {
	transform: scale(0.99);
	cursor: pointer;
	transition-duration: 200ms;
}


/* ---
SKILLS
----*/

#skills {
	margin: 3% auto;
	height: 25%;
}

.skill {
	color: var(--text);
	padding: 5px;
	background-color: var(--skill);
	background-image: var(--bgPassive);
	background-size: cover;
	border: 1px rgba(0, 0, 0, 30%) solid;
	border-radius: 50px;
	margin: 6px 5px;
	box-shadow: 1px 3px rgb(0 0 0 / 24%);
	min-height: 36px;
}

.skill_name {
	letter-spacing: 1px;
	padding: 2px;
	color: var(--textWhite);
	text-align: center;
	text-shadow: var(--textOutline);
	white-space: nowrap;
}

.skill_description {
	display: none;
	padding: 5px;
	background-color: rgba(255,255,255,70%);
	border-radius: 2px;
}


#passiveMaster, #passivesArcSuit, #passivesSuperawakening, #passives, #passives2 {
	display: flex;
	flex-direction: column;
}


#passiveMaster .skill {
	background-color: var(--passive_master);
	background-image: var(--bgPassiveMaster);
	background-size: cover;
}

#passiveMaster .skill_name {
	background-image: var(--iconPassiveMaster);
	background-repeat: no-repeat;
	background-size: 24px;
}


#passivesArcSuit .skill {
	background-color: var(--passive_arcsuit);
	background-image: var(--bgPassiveArcsuit);
	background-size: cover;
}

#passivesArcSuit .skill_name {
	background-image: var(--iconPassiveArcsuit);
	background-repeat: no-repeat;
	background-size: 24px;
}

#passivesSuperawakening .skill {
	background-color: var(--passive_superawakening);
	background-image: var(--bgPassiveSuperawakening);
	background-size: cover;
}

#passivesSuperawakening .skill_name {
	background-image: var(--iconPassiveSuperawakening);
	background-repeat: no-repeat;
	background-size: 24px;
}


#passiveSkills, #luckySkills {
	display: flex;
	flex-direction: column;
	width: 70%;
	margin: auto;
}

#luckySkills .skill {
	background-image: var(--bgLucky);
	background-size: cover;
}


#themeSkills {
	display: flex;
	flex-wrap: wrap;
	width: 88%;
	margin: auto;
	justify-content: start;
	align-items: center;
}

#themeSkills .skill {
	font-size: 0.9em;
	width: calc(100% * (1/3) - 10px);
	padding: 8px;
	border-radius: 50px;
	background: linear-gradient(var(--theme), var(--theme2));
	border: 2px rgba(0, 0, 0, 33%) solid;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin-bottom: 3%;
}

#themeSkills .skill_name {
	z-index: 2;
}

#themeSkills .skill_theme_icon {
	position: absolute;
	top: -15px;
	left: -2px;
	height: 30px;
}


/* Preset backgrounds */
img[src^="./images/bg/"] {
	width: auto !important;
	left: -64% !important;
	clip-path: polygon(66% 0, 0% 146%, 0 0%);
}


#screenshot {
	width: 512px;
}


#grid {
	width: 512px;
	height: 1024px;
}

#gridInfos {
	width: 25%;
}

#cells {
	transform: scale(66%);
	transform-origin: left top;
	margin-top: -12%;
}

#cells .cellName { display: none; }

.cell[data-cellid]:hover:before,
.cell[data-cellid]:hover:after {
	font-size: 1.2em;
}

#selectedCells .cellDescription {
	display: none;
}


#syncPair_trainerImageBase[src*="iono"],
#syncPair_trainerImageEx[src*="iono"] {
	left: -70% !important;
}


#syncPair_trainerImageBase[src*="v2.48.0"],
#syncPair_trainerImageEx[src*="v2.48.0"],
#syncPair_trainerImageBase[src*="v2.49.0"],
#syncPair_trainerImageEx[src*="v2.49.0"],
#syncPair_trainerImageBase[src*="v2.5"],
#syncPair_trainerImageEx[src*="v2.5"],
#syncPair_trainerImageBase[src*="v2.6"],
#syncPair_trainerImageEx[src*="v2.6"] {
    width: 690px;
    height: auto;
    top: -156px;
    left: -224px;
    max-height: fit-content;
}