Mudanças entre as edições de "MediaWiki:Common.css"

Edição das 16h08min de 8 de dezembro de 2024

/*--------------------------------------------------
				ESTILIZAÇÃO PADRÃO
--------------------------------------------------*/

html {
	scroll-behavior: smooth;
}

:root {
	--content-bg: #fcfcfc;
	!important --content-text: #000;
	--simpleSearch-bg: #fff;
	--searchInput-text: #aaaaaa;
	--link-text: #0645ad;
	g --lightGray: rgba(240, 240, 240);
	--gray: rgb(190, 190, 190);
	--transparent-blue: #338be58c;
	--blue: #338be5;
}

.dark-mode:root {
	--content-bg: #fcfcfc;
}

.mw-body h1,
.mw-body-content h1,
.mw-body-content h2 {
	font-family: sans-serif !important;
}

a:visited,
a {
	color: var(--link-text) !important;
}

body {
	background-image: url(/images/3/31/Cinza_capriw.png);
	background-repeat: repeat;
	background-attachment: fixed;
}

h1,
h2 {
	margin-bottom: 0.6em;
	border-bottom: 0px !important;
}

#content {
	overflow-x: clip;

	color: var(--content-text);
	background-color: var(--content-bg) !important;
	border: none !important;
	box-shadow: rgba(0, 0, 0, .1) 0px 8px 24px, rgba(0, 0, 0, 0.15) 0px 0px 0px 2px;
}

#simpleSearch {
	background-color: var(--simpleSearch-bg) !important;
}

#p-personal {
	right: 1em;
	top: .5em;
}

#p-search {
	float: left;
	margin-left: -0.1em;
	margin-right: 1em;
	margin-top: -0.4em;
}

#searchInput {
	background-color: #231813;
	color: var(--searchInput-text);
	width: 100%;
	height: 2.15384615em;
	border: 1px solid #524136;
	padding: 5px 2.15384615em 5px 0.4em;
	font-family: inherit;
	font-size: 0.8125em;
	direction: ltr;
}

.mw-body {
	margin-top: -1px;
	border: 2px solid #5c3f2b !important;
	border-right-width: 2px !important;
}

/* Force lining numbers in headers (for fonts like Georgia) */
h1,
h2,
.firstHeading {
	-moz-font-feature-settings: "lnum";
	-webkit-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
}

/* Consistent size for sub/sup */
.mw-body sub,
.mw-body sup,
span.reference

/* for Parsoid */
	{
	font-size: 80%;
}


/* Hide confusing "Discussion" tab on [[Project:Support_desk]],
 * For sanity, only do this if [[Project_talk:Support_desk]] is a
 * redirect (which goes back to [[Project:Support_desk]]).
 * If that is changed for some reason, it automatically comes back.
 */
.page-Project_Support_desk #ca-talk a.mw-redirect {
	display: none;
}

/* CSS Hover Gallery for Mediawiki */

.gallery_zoom_img img {
	-moz-transition: -moz-transform 0.1s ease-in;
	-webkit-transition: -webkit-transform 0.1s ease-in;
	-o-transition: -o-transform 0.1s ease-in;
	transition: transform 0.1 ease-in;
}

.gallery_zoom_img img:hover {
	-moz-transform: scale(2);
	-webkit-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}

/*--------------------------------------------------
					CSS CUSTOMIZADO
--------------------------------------------------*/

/*--------------------------------------------------
				Vector 
--------------------------------------------------*/

.vector-menu-tabs li {
	background: transparent;
}

/*--------------------------------------------------
				Tabber 
--------------------------------------------------*/

.center-tab .tabber__header {
	justify-content: center;
}

/*--------------------------------------------------
				Tags de uso generalizado
--------------------------------------------------*/

.mt-1 {
	margin-top: .75em;
}

.mt-2 {
	margin-top: 1.5em;
}

.mt-4 {
	margin-top: 3em;
}

.mt--4 {
	margin-top: -2em;
}

.mb-2 {
	margin-bottom: 1em;
}


.d-flex,
.td-flex td {
	display: flex;
}

.d-block {
	display: block;
}

.relative {
	position: relative;
}

.text-justify {
	text-align: justify;
}

.align-center {
	align-items: center;
}

.align-top {
	align-items: flex-start;
}

.justify-between {
	justify-content: space-between;
}

.justify-center {
	justify-content: center;
}

.border-none {
	border: none !important;
}

.w-25 {
	width: 25%;
}

.h-100 {
	height: 100%;
}

.flex-wrap {
	flex-wrap: wrap;
}

.section-title {
	display: block;
	border-radius: 8px;
	background: linear-gradient(to bottom, #459cca, #5684c8);
	width: fit-content;
	color: white;
	padding: .25em 5em;
	letter-spacing: 1px;
}

.badge {
	padding: .25em .57em;
	margin: .45em;
	border-radius: 6px;
	color: white;
	font-weight: bold;
	text-transform: capitalize;
	white-space: nowrap;
	max-height: 1.5em;
	font-size: .9em;
	letter-spacing: 1px;
	box-shadow: rgb(3 102 214 / 30%) 0px 0px 0px 3px;
	background: linear-gradient(to bottom, #459cca, #5684c8);
}

.card {
	width: 100%;
	min-height: 14em;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: rgb(0 0 0 / 9%) 0px 3px 12px;
}

.card-title {
	display: block;
	padding: .25em 0;
	margin-bottom: 1em;
	width: 100%;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(to bottom, #459cca, #5684c8);

	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	letter-spacing: 1px;
	color: white;
}

.scaleUp-hover {
	transition: all .25s ease;
	image-rendering: auto;
	/* ou crisp-edges */
}

.scaleUp-hover:hover {
	transform: scale(1.1);
}


/*--------------------------------------------------
			Tooltip 
--------------------------------------------------*/

.simple-tooltip-inline {
	border: none !important;
}

.tooltipster-default {
	background-color: rgb(220, 220, 220);
	color: black !important;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.tooltipster-arrow {
	borde-color: rgb(220, 220, 220) !important;
}

#bigImage {
	position: absolute;
	transform: translate(0, -100%);
}

/*--------------------------------------------------
			Pagina Inicial
--------------------------------------------------*/
.initialPage--table {
	width: 100%;
	text-align: center;
}

.initialPage--table>tbody>tr>th,
.initialPage--table>tbody>tr>td {
	background: transparent !important;
}

.initialPage--title,
.initialPage--events {
	border: none;
	border-collapse: separate;
}

.initialPage--events th,
.initialPage--title th {
	color: black !important;
	padding: .4em;
}

.initialPage--title th {
	background-color: transparent !important;
	font-size: 2em;
}

.initialPage--events {
	display: flex;
	height: 20em;
}

.event-image {
	aspect-ratio: 32 / 10;
	width: -webkit-fill-available;
	max-width: 350px;
	height: auto;
	object-fit: fill;

	position: relative;
}

#event-time {
	position: absolute;
	bottom: 3%;
	right: 15%;

	letter-spacing: 2px;

	font-size: 1.15em;
	font-weight: bold;
	color: #fff;
}

.initialPage--eventsLogo {
	height: 100%;
	padding: .5em 3.5em 2em 0;
	display: flex;
	align-items: center;
}

.initialPage--events td {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.initialPage--mainContainer {
	display: flex;
	align-items: flex-start;
}

.initialPage--menuContainer {
	width: 75%;
	margin-right: 1.5em;
}

.initialPage--sideMenuContainer {
	width: 25%;
}

.initialPage--menuTitle {
	display: block;
	text-align: center;
	width: 100%;
	font-size: 1.75em;
	font-weight: bold;

	background: linear-gradient(to bottom, #459cca, #5684c8);
	border-radius: 10px 10px 0 0;
	color: white;
}

.initialPage--menu {
	display: flex;
	flex-wrap: wrap;
}

.initialPage--menuItemContainer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	padding: 1em 0;
}

.initialPage--menuItem {
	width: 22.5%;
}

.initialPage--menuItem a img {
	width: 100%;
}

.initialPage--socialMediaContainer {
	box-sizing: border-box;
	width: 100%;
	margin-top: 8em;
	padding: 0 1.5em;
}

.initialPage--socialMedia {
	position: relative;
	border-top: 2px solid #689cc0;
	margin-top: 1em;
}

.initialPage--socialMedia:before {
	content: '';
	position: absolute;
	top: -2px;
	display: block;
	width: 0;
	height: 2px;
	z-index: 1;
	transition: width .25s ease;
}

.initialPage--socialMedia:hover::before {
	width: 100%;
}

.initialPage--socialMediaLink {
	display: flex;
	justify-content: space-between;
	align-items: center;

	font-size: 1.35em;
	font-weight: 600;
	letter-spacing: .03em;
	color: #689cc0 !important;

	padding: .9em .5em;
	transition: color .25s ease;
}

.initialPage--socialMediaLink:visited {
	color: #689cc0 !important;
}

.initialPage--socialMediaLink:hover {
	text-decoration: none;
}

.socialMedia--svg {
	display: flex;
	align-items: center;
}

.socialMedia--svg svg {
	width: 2em;
	fill: #689cc0;
	transition: all .25s ease;
}

.socialMedia--svg svg path {
	fill: inherit;
}

/*
	Discord
*/

.initialPage--socialMedia.discord>.initialPage--socialMediaLink:hover {
	color: #5865f2 !important;
}

.initialPage--socialMedia.discord:before {
	background: #5865f2;
}

.initialPage--socialMedia.discord>.initialPage--socialMediaLink:hover>.socialMedia--svg svg {
	fill: #5865f2 !important;
}

/*
	Instagram
*/

.initialPage--socialMedia.instagram>.initialPage--socialMediaLink:hover {
	color: #f09433 !important;
}

.initialPage--socialMedia.instagram:before {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.initialPage--socialMedia.instagram>.initialPage--socialMediaLink:hover>.socialMedia--svg svg {
	fill: url(#gradient-vertical);
}

/*
	Facebook
*/

.initialPage--socialMedia.facebook>.initialPage--socialMediaLink:hover {
	color: #4267B2 !important;
}

.initialPage--socialMedia.facebook:before {
	background: #4267B2;
}

.initialPage--socialMedia.facebook>.initialPage--socialMediaLink:hover>.socialMedia--svg svg {
	fill: #4267B2 !important;
}

/*--------------------------------------------------
			Ocultação de componentes
--------------------------------------------------*/

#p-navigation {
	background-color: transparent;
}

#mw-head-base {
	background-color: transparent;
	width: auto !important;
}

#p-logo {
	background-color: transparent;
}

#mw-page-base {
	background: transparent;
}

#mw-panel #p-tb h3 {
	color: rgb(0, 0, 0);
	font-size: .75em;
}

#p-tb {
	display: none;
}

/* #ca-nstab-mediawiki { display: none; } */
/* #ca-talk { display: none; } */
#ca-view {
	display: none;
}

#ca-history {
	display: none;
}

#ca-viewsource {
	display: none !important;
}

/* #ca-unwatch { display: none; } */
/* #p-cactions { display: none; } */
/*
	Pacientes
*/

.table-pacients {
	display: block;
	max-width: 1400px;
	overflow-x: auto;
}

.table-pacients img {
	width: 15.715em;
	height: auto;
}

/*
	PERSONAGENS
*/

.filter--containerSearch {
	display: flex;
	padding: 0 2em;
	justify-content: flex-end;
	align-items: center;
}

.filter--container {
	display: flex;
	padding: 0 2em;
	justify-content: space-between;
	align-items: center;
}

.filter {
	width: fit-content;
	display: flex;
	justify-content: center;
	border: 3px solid #b0cff1;
	border-collapse: collapse;
	border-radius: 8px;
}

.filter--title {
	display: flex;
	border-right: 3px solid #b0cff1;
	background: #4c91c9;
	padding: 0 1em;
	align-items: center;
	border-radius: 4px 0 0 4px;
	font-size: 1.2em;
	letter-spacing: .15em;
	font-weight: bold;
	color: white;
}

.filter--icon,
.calcXp--tierIcon {
	padding: .35em .95em;
	background: transparent;
	cursor: pointer;
}

.filter--icon.tier img {
	filter: grayscale(.0);
}

.filter--icon.tier.active img {
	box-shadow: none;
}

.filter--icon img {
	filter: grayscale(.8);
	border-radius: 10px;

	transition: all .25s ease;
}

.calcXp--tierIcon img {
	filter: drop-shadow(0px 1px 8px #4c91c900);
	border-radius: 10px;

	transition: all .25s ease;
}

.filter--icon.active img {
	box-shadow: rgb(0 0 0 / 24%) 0px 2px 7px;
	filter: grayscale(0);
}

.filter--icon.tier.active img,
.calcXp--tierIcon.active img {
	transform: scale(.85);
}

.filter--icon.tier#bronze.active img,
.calcXp--tierIcon#bronze.active img {
	filter: drop-shadow(0px 1px 8px #f18a05);
}

.filter--icon.tier#silver.active img,
.calcXp--tierIcon#silver.active img {
	filter: drop-shadow(0px 1px 8px #8b8b8b);
}

.filter--icon.tier#gold.active img,
.calcXp--tierIcon#gold.active img {
	filter: drop-shadow(0px 1px 8px #fbc300);
}

.filter--icon.tier#diamond.active img,
.calcXp--tierIcon#diamond.active img {
	filter: drop-shadow(0px 1px 8px #0391c5);
}

.filter--input {
	box-sizing: border-box;
	padding: .45em;
	padding-right: 2.5em;
	border: 3px solid #b0cff1;
	font-size: 1.2em;
	border-radius: 8px;
	width: 23em;
}

.filter--inputContainer {
	box-sizing: border-box;
	position: relative;
}

.filter--searchButton {
	cursor: pointer;
	display: inline-block;
	border: 3px solid #b0cff1;
	position: absolute;
	width: 4.5em;
	height: -webkit-fill-available;
	right: 0;
	bottom: 0;
	border-radius: 0 8px 8px 0;
	background: #4c91c9;

}

.filter--searchButton img {
	filter: invert(1);
}

.calcXp--container {
	box-sizing: border-box;
	padding: 2.25em 1.25em;
	width: 43em;
	border: 3px solid #b0cff1;
	border-radius: 26px;
}

.calcXp--resultTitle {
	text-align: center;
	color: #4f7ca0;
	margin: 0;
	margin-top: -.5em !important;
	letter-spacing: .05em;
}

.calcXp--formItem {
	display: flex;
	align-items: center;
}

.calcXp--formItem input {
	box-sizing: border-box;
	padding: .35em;
	border: 2px solid #b0cff1;
	border-radius: 8px;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: .05em;
	width: 4em;
}

.calcXp--formItem span {
	font-size: 1.225em;
	font-weight: 500;
	letter-spacing: .05em;
	margin-right: .5em;
	color: #386a93;
}

#calculate-btn {
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	width: 15em;
	margin: 2em auto;
	padding: .45em 1em;

	border: none;
	border-radius: 6px;
	background: #4c91c9;
	box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
	color: white;

	font-size: 1.35em;
	text-transform: capitalize;
	letter-spacing: 0.05em;
	font-weight: bold;
	transition: .35s ease;
}

#calculate-btn:hover {
	color: #ffffff;
	box-shadow: rgb(0 0 0 / 8%) 0px 3px 8px;
	transform: scale(.95);
	background: #4685b8;
}

#calc-result {
	margin-top: 1em;
	display: flex;
	justify-content: center;
}

#calc-result .badge {
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 5em;
	width: 5em;
}

.calcXp--xpIcon {
	margin-left: -.2em;
}

.calcXp--numberOfPots {
	padding-top: .2em;
	font-size: 1.15em;
}

#characters-container {
	display: flex;
	flex-wrap: wrap;
	padding: 1em;
}

#characters-container>div {
	box-sizing: border-box;
	display: none;
	padding: 1em;
	width: 19%;
	margin-right: 1%;
}

#characters-container>div.show {
	display: block;
}

#characters-container>div>a>img {
	width: 100%;
	border-radius: 8px;
	filter: grayscale(.3);
	transition: all .25s ease;
}

#characters-container>div:hover>a>img {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	filter: grayscale(0);
	transform: scale(1.06);
}

.characterPage--splashArt {
	position: absolute;
	top: -2%;
	right: -2%;
	width: 35%;
}

.characterPage--table {
	margin-top: -4em;
	width: 100%;
}

.characterPage--table>tbody {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.characterPage--table>tbody>.characterPage--mainSection {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 65%;
}

.characterPage--table>tbody>.characterPage--sideSection {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	width: 33%;
	padding: 0 1em;
}

.characterPage--characterInfoContainer {
	width: 43%;
}

.characterPage--statsInfoContainer {
	width: 55%;
}

.stats--container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 1.25em;
}

.stats--container>div {
	width: 45%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: .5em;
}

.stats--container div img {
	width: 2.25em;
}

.stats--bar {
	display: flex;
	width: -webkit-fill-available;
	justify-content: space-between;
	padding: 0 1.25em;
}

.bar-filled:first-child,
.bar-notFilled:first-child {
	border-radius: 6px 0 0 6px;
}

.bar-filled:last-child,
.bar-notFilled:last-child {
	border-radius: 0 6px 6px 0;
}

.bar-filled,
.bar-notFilled {
	display: block;
	width: 18%;
	height: 6px;
}

.bar-filled {
	background: var(--blue);
}

.bar-notFilled {
	background: var(--transparent-blue);
}

.characterInfo--name {
	margin: 0 !important;
}

.characterInfo--badgeContainer {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: fit-content;
	margin: 0 auto;
}

.characterInfo--contentContainer {
	display: flex;
	justify-content: space-between;
	padding: .6em 1.3em;
}

.characterInfo--imageContainer {
	width: 25%;
}

.characterInfo--medal {
	margin-top: -1.5em;
}


.characterInfo--infoContainer {
	width: 75%;
	text-align: center;
}

.characterInfo--infoContainer #toc {
	display: none;
}

.characterPage--skins {
	width: 100%;
}

.characterPage--characterSkills {
	width: 100%;
}

/*
	Card de Skins
*/

.skins--container {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: -0.75em 0.75em;
	gap: -0.5em;
	/* Adiciona espaçamento consistente entre os itens */
}

.skins--container span {
	width: 33.3%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.skins--imageSkin {
	max-width: 100%;
	/* Limita o tamanho máximo da imagem */
	max-height: 100%;
	/* Limita o tamanho máximo da imagem */
	object-fit: contain;
	/* Garante que a imagem se ajusta proporcionalmente */
}

/*
	Seção das skills do personagem
*/

.tabsContainer {
	width: 95%;
	margin: 0 auto;
	padding-bottom: .5em;
}

.tabsContainer table {
	width: 100%;
	border-collapse: collapse;
}

.tabsContainer table>tbody>tr>td {
	border-bottom: 2px solid rgb(225, 225, 225);
}

.tabSkill--container {
	padding-bottom: .85em;
	display: flex;
	max-width: 72em;
	overflow-x: auto;
}

.skillInfo--description::-webkit-scrollbar,
.tabSkill--container::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.skillInfo--description::-webkit-scrollbar-track,
.tabSkill--container::-webkit-scrollbar-track {
	background-color: #4799c954;
	border-radius: 10px;
}

.skillInfo--description::-webkit-scrollbar-thumb,
.tabSkill--container::-webkit-scrollbar-thumb {
	background-color: rgb(85 135 200 / 74%);
	border-radius: 10px;
}

.tab-skill {
	transition: all .25s ease;
	width: 100%;
	min-width: 5em;
}

.tab-skill.active {
	border-color: #459cca;
}

.tab-skill>div {
	cursor: pointer;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .25em;
}

.tab-skill>div>img {
	width: 100%;
	max-width: 40px;
	height: auto;
}

.skillInfo--container {
	width: 100%;
}

.skillInfo--container>td {
	border: none !important;
}

.skillInfo {
	display: none;
}

.skillInfo.active {
	display: table-cell;
}

.skillInfo.active {
	display: table-cell;
}

.skillInfo--videoContainer {

	align-self: center;
	width: 45%;
}

.skillInfo--skillVideo2 {
	display: none;
	border-radius: 8px;
}

.skillInfo--skillVideo2.active {
	display: flex;
}

.skillInfo--videoSelector {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background: var(--transparent-blue);
	cursor: pointer;
	margin-right: .85em;

	transition: all .25s ease;
}

.skillInfo--videoSelector.active {
	background: var(--blue);
	transform: scale(.8);
}

.skillInfo--infoContainer {
	width: 50%;
}

.skillInfo>div>.skillInfo--infoContainer b {
	color: #2a87c4 !important;
}

.skillInfo--infoContainer>center>b {
	font-size: 1.15em;
}

.skillInfo--name {
	font-size: 1.85em;
	letter-spacing: 1px;
	text-align: center;
}

.skillInfo--description {
	display: inline-block;
	font-size: 1.03em;
	line-height: 1.5em;
	padding: 0 1em;
	height: 12em;
	max-height: 12em;
	overflow-y: auto;
	text-align: justify;
}

.skillInfo--attributesContainer>h1 {
	color: #717171;
	font-size: 1.4em;
	text-align: center;
	letter-spacing: 1px;
}

/* card attributes */
.attribute--cardsContainer {
	display: flex;
	align-items: flex-start;

	width: fit-content;
	margin: 0 auto;

	background: var(--lightGray);
	border: 2px solid var(--gray);
}

.cardAttribute {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 8em;
}

.cardAttribute--icon {
	margin: .6em 0;
	height: 2em;
}

.cardAttribute--value {
	margin: 0 !important;

	font-size: .9em !important;
	font-weight: bold;
	line-height: 1.65em !important;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
}

/*------------------------------------
			WANTED
-----------------------------------*/

.selectWanted--container {
	display: flex;
	justify-content: center;
}

#selectbox-wanted {
	padding: .35em .5em;
	font-family: sans-serif;
	letter-spacing: .04em;
	font-size: 1.25em;
	width: 21em;
	border: 2px solid #5684c8;
	border-radius: 6px;
}

.wantedPortrait--container {
	width: 100%;
}

.wantedPortrait--title {
	width: 100%;
	color: #292929;
	font-size: 1.5em;
	font-weight: bold;
	letter-spacing: .035em;
}

.wantedPortraits {
	display: flex;
	flex-wrap: wrap;
}

.wantedPortrait {
	box-sizing: border-box;
	width: 18em;
	padding: .35em;
}

.wantedPortrait img {
	width: 100%;
}

@media screen and (max-width: 1440px) {
	:root {
		font-size: 14px;
	}

	.characterInfo--contentContainer {
		padding: .6em;
	}

	.characterInfo--infoContainer {
		width: 65%;
	}

	.characterInfo--imageContainer {
		width: 35%;
	}

	.tabSkill--container {
		max-width: 61em;
		margin: 0 auto;
	}

	.tab-skill>div>img {
		max-width: 38px;
	}

}

@media screen and (max-width: 1220px) {
	.tabSkill--container {
		max-width: 48em;
	}
}


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

	.flex-wrap-md {
		flex-wrap: wrap;
	}

	.justify-center-md {
		justify-content: center;
	}

	.initialPage--mainContainer {
		flex-wrap: wrap;
	}

	.initialPage--menuContainer {
		width: 100%;
		margin-right: 0;
	}

	.initialPage--sideMenuContainer {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 1.5em;
	}

	.initialPage--sideMenuContainer .card {
		width: 45%;
		min-height: 15em;
	}

	#event-time {
		bottom: 5%;
		right: 5%;
		font-size: 1.25em;
	}

	.initialPage--socialMediaContainer {
		margin-top: 2em;
		display: flex;
		justify-content: space-between;
	}

	.initialPage--socialMedia {
		width: 32%;
	}

	#p-search {
		margin-right: 1em;
	}

	.filter--containerSearch {
		justify-content: center;
	}

	.filter--container {
		margin-top: 1em;
		flex-wrap: wrap;
		justify-content: center;
	}

	.filter:last-of-type {
		margin-top: 1em;
	}

	#characters-container>div {
		width: 24%;
	}

	.characterPage--splashArt {
		display: none;
	}

	.characterPage--table>tbody>.characterPage--mainSection {
		width: 100%;
		justify-content: flex-start;
	}

	.characterPage--characterInfoContainer {
		width: 38%;
	}

	.characterPage--statsInfoContainer {
		width: 30%;
		margin-left: 1.5%;
	}

	.stats--container>div {
		width: 100%;
	}

	.characterInfo--contentContainer {
		flex-wrap: wrap;
	}

	.characterInfo--imageContainer {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.characterInfo--medal {
		margin-top: -2.5em;
	}

	.characterInfo--infoContainer {
		width: 100%;
	}

	.tabsContainer {
		width: 100%;
	}

	.tab-skill {
		min-width: 3.5em;
	}

	.tab-skill>div>img {
		max-width: 36px;
	}

	.skillInfo>div {
		flex-wrap: wrap-reverse;
	}

	.skillInfo--infoContainer {
		width: 100%;
	}

	.skillInfo--infoContainer>center>b {
		font-size: 1.2em;
	}

	.skillInfo--name {
		font-size: 2.2em !important;
		letter-spacing: 1px;
		margin-top: .5em !important;
		text-align: center;
	}

	.skillInfo--description {
		font-size: 1.35em !important;
		display: table;
		margin: 1em !important;

		height: 5em;
		max-height: 5em;
	}

	.skillInfo--videoContainer {
		width: 100%;
		margin: 0 auto;
		padding: 1em 10em;
		padding-bottom: 1em;
	}

	.cardAttribute--value {
		letter-spacing: 1px;
		font-size: 1.1em;
	}

	.characterPage--table>tbody>.characterPage--sideSection {
		width: 30%;
		padding-left: 1.5%;
		position: absolute;
		top: 0;
		right: 0;
	}

	.skins--imageSkin {
		width: 100%;
	}

	.skins--container {
		max-height: 14em;
		overflow-x: clip;
		overflow-y: auto;
	}

	.skins--container span {
		width: 50%;
	}

	.calcXp--formItem {
		justify-content: center;
	}

	.calcXp--container:last-of-type {
		margin-top: 2em;
	}

	#p-tb h3 {
		display: none;
	}

}

/*******************************************************************************
PRESET: ABAS
*******************************************************************************/
.tabela-abas {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	margin-bottom: 20px;
}

.mostrar-aba {
	cursor: pointer;
	padding: 0;
	background-color: transparent;
	text-align: center;
	border: none;
	position: relative;
	transition: all 0.2s ease-in-out;
}

.imagem-botao {
	display: inline-block;
	width: auto;
	height: auto;
}

.sec-aba-cem {
	padding: 5px;
	font-weight: bold;
	text-align: center;
	color: #333;
}

.mostrar-aba img {
	border: none;
	background-color: transparent;
	margin: 5px;
}

.mostrar-aba:hover::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: rgba(0, 0, 0, 0.4);
	/* Barrinha sutil ao passar o mouse */
}

.mostrar-aba:hover img {
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
	/* Sombra leve ao passar o mouse */
}

.mostrar-aba:active img {
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}

.mostrar-aba.ativa::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-color: #000;
}

.preset-aba {
	margin: 0;
	padding: 0;
}

.container-conteudo {
	margin: 0;
	padding: 0;
}

.aba {
	display: none;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	margin-top: 20px;
}

.aba.atual {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.container-coliseu {
	display: block;
	text-align: center;
}

.coluna-abas {
	flex: 0 0 200px;
	margin-right: 20px;
}

/*******************************************************************************
TOC: ÍNDICE
*******************************************************************************/
.toc .tocnumber {
	display: none;
}

.toc ul li:before {
	content: "• ";
	/* Adiciona um ponto antes de cada item */
	color: #000;
	font-weight: bold;
}

/*******************************************************************************
PRESET: DIÁLOGOS
*******************************************************************************/
.transcrições {
	background-color: #F2F2F2;
	border-radius: 5px;
	box-shadow: 0 0 6px #B2B2B2;
	display: inline-block;
	padding: 10px 10px 10px 18px;
	position: relative;
	vertical-align: top;
	width: 100%;
	color: #000;
	/* Garante que o texto dentro das transcrições será preto */
}

.transcrições b,
.transcrições strong {
	color: #000 !important;
	/* Garante que o texto negrito também será preto */
}

.transcrições::before {
	background-color: #F2F2F2;
	content: "\00a0";
	display: block;
	height: 16px;
	position: absolute;
	top: 11px;
	transform: rotate(29deg) skew(-35deg);
	-moz-transform: rotate(29deg) skew(-35deg);
	-ms-transform: rotate(29deg) skew(-35deg);
	-o-transform: rotate(29deg) skew(-35deg);
	-webkit-transform: rotate(29deg) skew(-35deg);
	width: 20px;
}

.me {
	float: left;
	margin: 5px 45px 5px 20px;
	color: #000;
	/* Garante que o texto dentro da classe .me será preto */
}

.me::before {
	box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4);
	left: -9px;
}

/*******************************************************************************
 BUZINAS
*******************************************************************************/
.horn-audio {
	cursor: pointer;
	transition: transform 0.2s ease;
}

/* Efeito visual ao passar o mouse */
.horn-audio:hover {
	transform: scale(1.1);
	filter: brightness(1.2);
}

/*******************************************************************************
 PREDEFINIÇÃO ITEMBOX E RESPONSIVIDADE DAS PÁGINAS DE ITEM
*******************************************************************************/
.item-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 20px auto;
	max-width: 100%;
}

@media (max-width: 1024px) {
	.item-grid>* {
		flex: 1 1 calc(25% - 10px);
		max-width: calc(25% - 10px);
	}
}

@media (max-width: 768px) {
	.item-grid>* {
		flex: 1 1 calc(33.33% - 10px);
		max-width: calc(33.33% - 10px);
	}
}

@media (max-width: 480px) {
	.item-grid>* {
		flex: 1 1 calc(50% - 10px);
		max-width: calc(50% - 10px);
	}
}

@media (max-width: 360px) {
	.item-grid>* {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

.iteminfobox {
	padding: 10px;
	background: #eeeded;
	border-radius: 25px;
	box-shadow: rgba(24, 27, 46, 0.24) 4px 4px 4px;
	width: 230px;
	height: 270px;
	position: relative;
	text-align: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.iteminfobox b {
	font-size: clamp(10px, 2vw, 14px);
	color: #6587c4;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/**********************************
		GURREN DA SILVA SAURO
**********************************/
/**********************************
        SKINS
**********************************/
.characterPage--skins-test {
    width: 55%;
    overflow: hidden; /* Garante que nada saia do contêiner */
    position: relative; /* Para controle preciso de posicionamento */
}

/* Contêiner das Skins */
.skins--container-test {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end; /* Alinha os "pés" das skins */
    overflow-x: auto; /* Scroll horizontal apenas */
    overflow-y: hidden; /* Remove scroll vertical */
    padding-bottom: 2.68em; /* Ajuste na parte inferior para comportar o scroll */
    padding-left: 1em; /* Espaçamento entre a borda esquerda e a primeira skin */
    white-space: nowrap; /* Mantém tudo em uma linha */
    scroll-behavior: smooth; /* Scroll fluido */
    box-sizing: border-box; /* Inclui o padding nas dimensões do contêiner */
}

/* Estilo do Scroll (um pouco mais espesso e posicionado melhor) */
.skins--container-test::-webkit-scrollbar {
    height: 8px; /* Scroll mais grosso para melhor visualização */
}

.skins--container-test::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.4); /* Cor mais visível, mas ainda discreta */
    border-radius: 5px; /* Bordas arredondadas para suavidade */
}

.skins--container-test::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Fundo do trilho levemente visível */
}

/* Estilo dos Itens de Skin */
.skins--container-test span {
    display: inline-flex; /* Alinha itens horizontalmente */
    justify-content: center;
    align-items: flex-end; /* Alinha a base das imagens com o fundo do contêiner */
}

/* Estilo das Imagens das Skins */
.skins--imageSkin-test {
    width: auto; /* Mantém o tamanho natural da imagem */
    height: auto; /* Ajusta automaticamente */
    max-height: 100%; /* Evita que ultrapassem o contêiner */
    object-fit: contain; /* Ajusta proporcionalmente */
}
/**********************************
		INFOPERSO
**********************************/
/* Estilo geral para Tier */
.characterInfo--tier-test {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin: 0.5em 0;
    padding: 0.3em 0.5em;
    border-radius: 8px;
    display: inline-block;
}

/* Tier Diamante */
.tier-diamante {
    color: #00c0ff; /* Azul brilhante */
    text-shadow: 0 0 3px #00c0ff, 0 0 6px #63d3ff; /* Brilho mais discreto */
}

/* Tier Ouro */
.tier-ouro {
    color: #ffcf40; /* Dourado */
    text-shadow: 0 0 3px #e0ac1c, 0 0 6px #ffcf40; /* Brilho mais discreto */
}

/* Tier Prata */
.tier-prata {
    color: #cccccc; /* Prateado */
    text-shadow: 0 0 3px #a6a6a6, 0 0 6px #ffffff; /* Brilho mais discreto */
}

/* Tier Bronze */
.tier-bronze {
    color: #d19042; /* Bronze */
    text-shadow: 0 0 3px #a6682a, 0 0 6px #d19042; /* Brilho mais discreto */
}

.characterInfo--obtain-test {
    font-size: 1em;
    color: #777;
    margin-top: 1em;
    text-align: center;
}

.characterPage--characterInfoContainer-test {
	width: 44%;
}

.characterInfo--contentContainer-test {
	display: flex;
	justify-content: space-between;
	padding: .6em 1.3em;
}

.characterInfo--imageContainer-test {
	width: 25%;
}

.characterInfo--medal-test {
	margin-top: -1.5em;
}

.characterInfo--infoContainer-test {
	width: 75%;
	text-align: center;
}

.characterInfo--infoContainer-test #toc {
	display: none;
}

.characterInfo--name-test {
	margin: 0 !important;
}

.characterInfo--badgeContainer-test {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: fit-content;
	margin: 0 auto;
}

/**********************************
		CARD/BADGE/TABLE MAINSECTION
**********************************/
.characterFlexbox {
display: flex;
flex-direction: column;
gap: 1em;
width: 100%;
margin: 2em auto;
}
.flex-row {
display: flex;
justify-content: space-between;
gap: 1em;
}
.card-test {
width: 100%;
flex: 1 1 48%; /* Mantém o layout flexível */
min-height: 16em; /* Define uma altura mínima */
background: #fff; /* Fundo branco para os cards */
border-radius: 8px; /* Bordas arredondadas */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra sutil para destacar o card */
padding: 1em; /* Espaço interno */
overflow: hidden; /* Evita que elementos extravasem */
display: flex;
flex-direction: column; /* Alinha itens verticalmente */
justify-content: flex-start;
align-items: center; /* Centraliza os conteúdos */
}

/* Título do card */
.card-title-test {
width: 100%;
padding: 0.5em 0;
margin-bottom: 1em;
font-size: 1.2em;
font-weight: bold;
text-align: center;
color: white;
border-radius: 8px 8px 0 0;
background: linear-gradient(to bottom, #459cca, #5684c8); /* Gradiente azul */
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1); /* Sombra leve para destacar */
letter-spacing: 0.05em;
}

/* Para o card de Habilidades */
.cardskills-test {
flex: 1 1 100%; /* Ocupa 100% da largura */
min-height: 20em;
padding: 1.5em; /* Mais espaço interno */
}

/* Ajuste para responsividade */
@media (max-width: 768px) {
.flex-row {
flex-direction: column;
gap: 1em;
}
.card-test {
flex: 1 1 100%; /* Cards ocupam toda a largura */
}
}

.badge-test {
    padding: 0.3em 0.7em; /* Ajuste leve no padding */
    margin: 0.4em;
    border-radius: 8px; /* Bordas arredondadas */
    color: white; /* Cor do texto */
    font-weight: bold;
    text-transform: capitalize;
    white-space: nowrap;
    font-size: 0.9em;
    letter-spacing: 1px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    background: linear-gradient(to bottom, #42a5f5, #1e88e5); /* Gradiente vibrante */
    border: 1px solid #1a73e8; /* Borda sólida */
}

.characterPage--table-test {
	margin-top: -4em;
	width: 100%;
}

.characterPage--table-test>tbody {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.characterPage--table-test>tbody>.characterPage--mainSection-test {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
/**********************************
		SKILLS
**********************************/
.characterPage--characterSkills-test {
	width: 100%;
	margin-top: 0rem;
}

.tabsContainer-test {
	width: 95%;
	margin: 0 auto;
	padding-bottom: .5em;
}

.tabsContainer-test table {
	width: 100%;
	border-collapse: collapse;
}

.tabsContainer-test table>tbody>tr>td {
	border-bottom: 2px solid rgb(225, 225, 225);
}

.tabSkill--container-test {
	padding-bottom: .85em;
	display: flex;
	max-width: 72em;
	overflow-x: auto;
}

.tabSkill--container-test.test {
	width: 100%;
	max-width: none;
}

.tab-skill-test {
	transition: all .25s ease;
	width: 100%;
	min-width: 5em;
}

.tab-skill-test.active {
	border-color: #459cca;
}

.tab-skill-test>div {
	cursor: pointer;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: .25em;
}

.tab-skill-test>div>img {
	width: 100%;
	max-width: 40px;
	height: auto;
}

.skillInfo--container-test {
	width: 100%;
}

.skillInfo--container-test>td {
	border: none !important;
}

.skillInfo-test {
	display: none;
}

.skillInfo-test.active {
	display: table-cell;
}

.skillInfo--videoContainer-test {

	align-self: center;
	width: 45%;
}

.skillInfo--skillVideo2-test {
	display: none;
	border-radius: 8px;
}

.skillInfo--skillVideo2-test.active {
	display: flex;
}

.skillInfo--videoSelector-test {
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background: var(--transparent-blue);
	cursor: pointer;
	margin-right: .85em;

	transition: all .25s ease;
}

.skillInfo--videoSelector-test.active {
	background: var(--blue);
	transform: scale(.8);
}

.skillInfo--infoContainer-test {
	width: 50%;
}

.skillInfo-test>div>.skillInfo--infoContainer-test b {
	color: #2a87c4 !important;
}

.skillInfo--infoContainer-test>center>b {
	font-size: 1.15em;
}

.skillInfo--name-test {
	font-size: 1.85em;
	letter-spacing: 1px;
	text-align: center;
}

.skillInfo--description-test {
	display: inline-block;
	font-size: 1.03em;
	line-height: 1.5em;
	padding: 0 1em;
	height: 12em;
	max-height: 12em;
	overflow-y: auto;
	text-align: justify;
}

.skillInfo--attributesContainer-test>h1 {
	color: #717171;
	font-size: 1.4em;
	text-align: center;
	letter-spacing: 1px;
}

.attribute--cardsContainer-test {
	display: flex;
	align-items: flex-start;

	width: fit-content;
	margin: 0 auto;

	background: var(--lightGray);
	border: 2px solid var(--gray);
}

.cardAttribute-test {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 8em;
}

.cardAttribute--icon-test {
	margin: .6em 0;
	height: 2em;
}

.cardAttribute--value-test {
	margin: 0 !important;

	font-size: .9em !important;
	font-weight: bold;
	line-height: 1.65em !important;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
}
/* SKILL ALTERNATIVA */
.alternate-version-icon,
.return-skill-icon {
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s ease, filter 0.2s ease; /* Transição suave */
}

.alternate-version-icon:hover,
.return-skill-icon:hover {
    transform: scale(1.03); /* Aumento sutil */
    filter: brightness(1.1); /* Brilho leve */
}

.alternate-version-icon.active,
.return-skill-icon.active {
    transform: scale(1.05); /* Leve destaque no ativo */
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(255, 215, 0, 0.7)); /* Brilho dourado */
}