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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
Linha 1: Linha 1:
/* Consistent size for <small>, <sub> and <sup> */
/*--------------------------------------------------
small {
ESTILIZAÇÃO PADRÃO
font-size: 85%;
--------------------------------------------------*/
 
html{
scroll-behavior: smooth;
}
 
:root{
--content-bg: #fcfcfc;
--content-text: #000;
--simpleSearch-bg: #fff;
--searchInput-text:#aaaaaa;
--link-text: #0645ad;
--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;
}
}


.mw-body-content sub,
h1, h2 {
.mw-body-content sup,
    margin-bottom: 0.6em;
span.reference /* para Parsoid */ {
    border-bottom: 0px !important;
font-size: 80%;
}
}


/* Don't display some stuff on the main page */
#content {
body.page-Wikipédia_Página_principal #t-cite,
overflow-x: clip;
body.page-Wikipédia_Página_principal #lastmod,
body.page-Wikipédia_Página_principal #siteSub,
    color: var(--content-text);
body.page-Wikipédia_Página_principal #contentSub,
    background-color: var(--content-bg) !important;
body.page-Wikipédia_Página_principal h1.firstHeading {
border: none!important;
display: none !important;
box-shadow: rgba(0, 0, 0, .1) 0px 8px 24px, rgba(0, 0, 0, 0.15) 0px 0px 0px 2px;
}
}


/* Reduzir saltos de página ao esconder conteúdo recolhido/dispensado */
#simpleSearch {
.client-js .mw-special-Watchlist #watchlist-message,
    background-color: var(--simpleSearch-bg) !important;
.client-js .NavFrame.collapsed .NavContent,
}
.client-js .collapsible:not( .mw-made-collapsible).collapsed > tbody > tr:not(:first-child) {
 
display: none;
#p-personal{
right: 1em;
    top: .5em;
}
}


/* Criação de tópicos nas esplanadas "geral" e "propostas" */
#p-search {
/* Formata o aviso */
float: left;
div.aviso-novo-item-esplanada {
    margin-left: -0.1em;
font-style: italic;
    margin-right: 1em;
    margin-top: -0.4em;
}
}


/* Oculta ligação vermelha durante a criação dos tópicos */
#searchInput {
div.aviso-novo-item-esplanada + p>a.new {
    background-color: #231813;
display:none;
    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;  
}
}


/* Resultados de busca */
.mw-body {
.mw-search-results {
    margin-top: -1px;
margin-left: 0;
    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";
}
}


.mw-search-results li {
/* Consistent size for sub/sup */
margin: 0;
.mw-body sub,
padding: 0.35em 1em;
.mw-body sup,
border-bottom: 1px solid #d3daed;
span.reference /* for Parsoid */ {
background-color: #f6f8fc;
    font-size: 80%;
list-style-type: none;
list-style-image: none;
}
}


/* Modelos de predefinições */


/* infobox */
/* Hide confusing "Discussion" tab on [[Project:Support_desk]],
.infobox {
* For sanity, only do this if [[Project_talk:Support_desk]] is a
border: 1px solid #a2a9b1;
* redirect (which goes back to [[Project:Support_desk]]).
border-spacing: 3px;
* If that is changed for some reason, it automatically comes back.
background-color: #f8f9fa;
*/
color: black;
.page-Project_Support_desk #ca-talk a.mw-redirect {
/* @noflip */
display: none;
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
}
}


.infobox td,
/* CSS Hover Gallery for Mediawiki */
.infobox th {
 
vertical-align: top;
.gallery_zoom_img img{
/* @noflip */
-moz-transition:-moz-transform 0.1s ease-in;  
text-align: left;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
transition:transform 0.1 ease-in;
}
}


.infobox caption {
.gallery_zoom_img img:hover{
font-size: 125%;
-moz-transform:scale(2);  
font-weight: bold;
-webkit-transform:scale(2);
padding: 0.2em;
-o-transform:scale(2);
text-align: center;
transform:scale(2);
}
}


.infobox.bordered {
/*--------------------------------------------------
border-collapse: collapse;
CSS CUSTOMIZADO
--------------------------------------------------*/
 
/*--------------------------------------------------
Vector
--------------------------------------------------*/
 
.vector-menu-tabs li {
background: transparent ;
}
}


.infobox.bordered td,
/*--------------------------------------------------
.infobox.bordered th {
Tabber
border: 1px solid #a2a9b1;
--------------------------------------------------*/
 
.center-tab .tabber__header {
    justify-content: center;
}
}


.infobox.sisterproject {
/*--------------------------------------------------
width: 20em;
Tags de uso generalizado
font-size: 90%;
--------------------------------------------------*/
 
.mt-1{
margin-top: .75em;
}
}


.infobox.standard-talk {
.mt-2{
border: 1px solid #c0c090;
margin-top: 1.5em;
background-color: #f8eaba;
}
}


.infobox.standard-talk.bordered td,
.mt-4{
.infobox.standard-talk.bordered th {
margin-top: 3em;
border: 1px solid #c0c090;
}
}


/* Estilos para infocaixa com bordas com linhas fundidas */
.mt--4{
.infobox.bordered .mergedtoprow td,
margin-top: -2em;
.infobox.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #a2a9b1;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
}


.infobox.bordered .mergedrow td,
.mb-2{
.infobox.bordered .mergedrow th {
margin-bottom: 1em;
border: 0;
/* @noflip */
border-right: 1px solid #a2a9b1;
}
}


/* Estilos para infocaixas de geografia */
 
.infobox.geography {
.d-flex,
border-collapse: collapse;
.td-flex td{
line-height: 1.2em;
display:flex;
font-size: 90%;
}
}


.infobox.geography  td,
.d-block{
.infobox.geography  th {
display: block;
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.4em 0.6em;
}
}


.infobox.geography .mergedtoprow td,
.relative{
.infobox.geography .mergedtoprow th {
position:relative;
border-top: 1px solid #a2a9b1;
padding: 0.4em 0.6em 0.2em 0.6em;
}
}


.infobox.geography .mergedrow td,
.text-justify{
.infobox.geography .mergedrow th {
text-align: justify;
border: 0;
padding: 0 0.6em 0.2em 0.6em;
}
}


.infobox.geography .mergedbottomrow td,
.align-center{
.infobox.geography .mergedbottomrow th {
align-items: center;
border-top: 0;
border-bottom: 1px solid #a2a9b1;
padding: 0 0.6em 0.4em 0.6em;
}
}


.infobox.geography .maptable td,
.align-top{
.infobox.geography .maptable th {
align-items: flex-start;
border: 0;
padding: 0;
}
}


/**
.justify-between{
* @deprecated: Remover assim que todas as ocorrências forem trocadas por "wikitable"
justify-content: space-between;
* @see: [[WP:Esplanada/propostas/Acabar com as tabelas bonitas! (4jul2012)]]
*/
table.prettytable {
margin: 1em 1em 1em 0;
background: #f9f9f9;
border: 1px #aaa solid;
border-collapse: collapse;
}
}


table.prettytable th,
.justify-center{
table.prettytable td {
justify-content: center;
border: 1px #aaa solid;
padding: 0.2em;
}
}


table.prettytable th {
.border-none{
background: #f2f2f2;
border: none!important;
text-align: center;
}
}


table.prettytable caption {
.w-25{
font-weight: bold;
width: 25%;
}
}


/* Predefinições informativas e mensagens MediaWiki */
.h-100 {
.caixa {
height: 100%;
width: 80%;
margin: 0 auto;
padding: .1em;
border: 1px solid #C7C7C7;
}
}


.caixaMW {
.flex-wrap{
margin: 1px 0;
flex-wrap: wrap;
padding: .1em;
font-size: 93%;
line-height:120%;
clear: both;
}
}


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


.caixaMW.infodestaque,
.badge{
.caixa.infodestaque {
padding: .25em .57em;
background-color: #f5faff;
margin: .45em;
border: 1px solid #cedff2;
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);
}
}


.caixaMW.aviso,
.card{
.caixa.aviso {
width: 100%;
background-color:#fff3f3;
min-height: 14em;
border: 1px solid #ffc9c9;
margin: 0 auto;
border-radius: 10px;
box-shadow: rgb(0 0 0 / 9%) 0px 3px 12px;
}
}


.caixaMW.avisodestaque,
.card-title{
.caixa.avisodestaque {
display: block;
background-color:#fff;
padding:.25em 0;
border: 2px solid #f00;
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;
}
}


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


/* Make the list of references smaller */
.scaleUp-hover:hover {
.references-small {
transform: scale(1.1);
font-size: 90%;
}
}


/* Realce a azul das referências ''clicadas'' para ajudar na navegação */
 
body.action-info .mw-body-content :target,
/*--------------------------------------------------
.citation:target {
Tooltip
background-color: #def;  /* Fallback */
--------------------------------------------------*/
background-color: rgba(0, 127, 255, 0.133);
 
.simple-tooltip-inline{
border: none!important;
}
}


/* Formatação de citações. Quebrar URLs longas etc., em vez de uma caixa transbordante */
.tooltipster-default{
.citation {
background-color: rgb(220, 220, 220);
word-wrap: break-word;
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{
Para números e IDs de documentos ligados, em que o número
borde-color: rgb(220, 220, 220)!important;
não precisa ser mostrado em uma tela ou dispositivo de mão,
mas deve ser incluído na versão impressa
*/
@media screen, handheld {
.citation .printonly {
display: none;
}
}
}


/**
#bigImage{
* Style for horizontal lists (separator following item).
position: absolute;
* @source https://www.mediawiki.org/wiki/Snippets/Horizontal_lists
transform: translate(0, -100%);
* @revision 7 (2015-11-12)
* @author [[User:Edokter]]
*/
.hlist dl,
.hlist ol,
.hlist ul {
margin: 0;
padding: 0;
}
}


/* Display list items inline */
/*--------------------------------------------------
.hlist dd,
Pagina Inicial
.hlist dt,
--------------------------------------------------*/
.hlist li {
.initialPage--table{
margin: 0;
width: 100%;
display: inline;
text-align: center;
}
}


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


.nonumtoc #toc ul,
.initialPage--title,
.nonumtoc .toc ul {
.initialPage--events{
line-height: 1.5em;
border: none;
list-style: none none;
border-collapse: separate;
margin: .3em 0 0;
padding: 0;
}
}


.hlist.nonumtoc #toc ul ul,
.initialPage--events th,  
.hlist.nonumtoc .toc ul ul {
.initialPage--title th {
/* @noflip */
color: black !important;
margin: 0;
padding: .4em;
}
}


/* Display nested lists inline */
.initialPage--title th {
.hlist.inline,
background-color: transparent !important;
.hlist.inline dl,
font-size: 2em;
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
display: inline;
}
}


/* Hide empty list items */
.initialPage--events{
.hlist .mw-empty-li {
display: flex;
display: none;
height: 20em;
}
}


/* Generate interpuncts */
.event-image{
.hlist dt:after {
aspect-ratio: 32 / 10;
content: ": ";
width: -webkit-fill-available;
max-width: 350px;
height: auto;
object-fit: fill;
position: relative;
}
}


.hlist dd:after,
#event-time{
.hlist li:after {
position: absolute;
content: " · ";
bottom: 3%;
right: 15%;
letter-spacing: 2px;
font-size: 1.15em;
font-weight: bold;
font-weight: bold;
color: #fff;
}
.initialPage--eventsLogo{
height: 100%;
padding: .5em 3.5em 2em 0;
display: flex;
align-items: center;
}
}


.hlist dd:last-child:after,
.initialPage--events td{
.hlist dt:last-child:after,
text-align:center;
.hlist li:last-child:after {
display: flex;
content: none;
align-items: center;
justify-content: flex-end;
}
}


/* Add parentheses around nested lists */
.initialPage--mainContainer{
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
display: flex;
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
align-items: flex-start;
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
content: " (";
font-weight: normal;
}
}


.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.initialPage--menuContainer{
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
width: 75%;
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
margin-right: 1.5em;
content: " )";
font-weight: normal;
}
}


/* Put ordinals in front of ordered list items */
.initialPage--sideMenuContainer{
.hlist ol {
width: 25%;
counter-reset: listitem;
}
}


.hlist ol > li {
.initialPage--menuTitle{
counter-increment: listitem;
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;
}
}


.hlist ol > li:before {
.initialPage--menu{
content: " " counter(listitem) " ";
display: flex;
white-space: nowrap;
flex-wrap: wrap;
}
}


.hlist dd ol > li:first-child:before,
.initialPage--menuItemContainer{
.hlist dt ol > li:first-child:before,
display: flex;
.hlist li ol > li:first-child:before {
justify-content: center;
content: " (" counter(listitem) " ";
flex-wrap: wrap;
padding: 1em 0;
}
}


/* Unbulleted lists */
.initialPage--menuItem{
.plainlist ol,
width: 22.5%;
.plainlist ul {
line-height: inherit;
list-style: none none;
margin: 0;
}
}
.plainlist ol li,
 
.plainlist ul li {
.initialPage--menuItem a img {
margin-bottom: 0;
width: 100%;
}
}


/* Estilo padrão para caixas de navegação (navbox) */
.initialPage--socialMediaContainer{
.navbox {                     /* Navbox container style */
box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #a2a9b1;
width: 100%;
width: 100%;
clear: both;
margin-top: 8em;
font-size: 88%;
padding: 0 1.5em;
text-align: center;
padding: 1px;
margin: 1em auto 0;       /* Prevent preceding content from clinging to navboxes */
}
}


.navbox .navbox {
.initialPage--socialMedia{
margin-top: 0;           /* No top margin for nested navboxes */
position: relative;
border-top: 2px solid #689cc0;
margin-top: 1em;
}
}


.navbox + .navbox {
.initialPage--socialMedia:before{
margin-top: -1px;         /* Single pixel border between adjacent navboxes */
content: '';
position: absolute;
top: -2px;
display: block;
width: 0;
height: 2px;
z-index: 1;
transition: width .25s ease;
}
}


.navbox-inner,
.initialPage--socialMedia:hover::before{
.navbox-subgroup {
width: 100%;
width: 100%;
}
}


.navbox-group,
.initialPage--socialMediaLink{
.navbox-title,
display: flex;
.navbox-abovebelow {
justify-content: space-between;
padding: 0.25em 1em;     /* Title, group and above/below styles */
align-items: center;
line-height: 1.5em;
text-align: 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;
}
}


th.navbox-group {             /* Group style */
.filter--icon img{
white-space: nowrap;
    filter: grayscale(.8);
/* @noflip */
    border-radius: 10px;
text-align: right;
   
    transition: all .25s ease;
}
}


.navbox,
.calcXp--tierIcon img {
.navbox-subgroup {
filter: drop-shadow(0px 1px 8px #4c91c900);
background-color: #fdfdfd; /* Background color */
    border-radius: 10px;
   
    transition: all .25s ease;
}
}


.navbox-list {
.filter--icon.active img{
line-height: 1.5em;
box-shadow: rgb(0 0 0 / 24%) 0px 2px 7px;
border-color: #fdfdfd;   /* Must match background color */
    filter: grayscale(0);
}
}


/* cell spacing for navbox cells */
.filter--icon.tier.active img,
tr + tr > .navbox-abovebelow,
.calcXp--tierIcon.active img{
tr + tr > .navbox-group,
transform: scale(.85);
tr + tr > .navbox-image,
tr + tr > .navbox-list {   /* Borders above 2nd, 3rd, etc. rows */
border-top: 2px solid #fdfdfd; /* Must match background color */
}
}


.navbox th,
.filter--icon.tier#bronze.active img,
.navbox-title {
.calcXp--tierIcon#bronze.active img{
background-color: #ccccff;     /* Level 1 color */
filter: drop-shadow(0px 1px 8px #f18a05);
}
}


.navbox-abovebelow,
.filter--icon.tier#silver.active img,
th.navbox-group,
.calcXp--tierIcon#silver.active img{
.navbox-subgroup .navbox-title {
filter: drop-shadow(0px 1px 8px #8b8b8b);
background-color: #ddddff;     /* Level 2 color */
}
}


.navbox-subgroup .navbox-group,
.filter--icon.tier#gold.active img,
.navbox-subgroup .navbox-abovebelow {
.calcXp--tierIcon#gold.active img{
background-color: #e6e6ff;     /* Level 3 color */
filter: drop-shadow(0px 1px 8px #fbc300);
}
}


.navbox-even {
.filter--icon.tier#diamond.active img,
background-color: #f7f7f7;     /* Even row striping */
.calcXp--tierIcon#diamond.active img{
filter: drop-shadow(0px 1px 8px #0391c5);
}
}


.navbox-odd {
.filter--input{
background-color: transparent; /* Odd row striping */
box-sizing: border-box;
padding: .45em;
    padding-right: 2.5em;
    border: 3px solid #b0cff1;
    font-size: 1.2em;
    border-radius: 8px;
    width: 23em;
}
}


.navbox .hlist td dl,
.filter--inputContainer{
.navbox .hlist td ol,
box-sizing: border-box;
.navbox .hlist td ul,
    position: relative;
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}
}


/* Default styling for Navbar template */
.filter--searchButton{
.navbar {
cursor: pointer;
display: inline;
    display: inline-block;
font-size: 88%;
    border: 3px solid #b0cff1;
font-weight: normal;
    position: absolute;
    width: 4.5em;
    height: -webkit-fill-available;
    right: 0;
    bottom: 0;
    border-radius: 0 8px 8px 0;
    background: #4c91c9;
   
}
}


.navbar ul {
.filter--searchButton img{
display: inline;
filter: invert(1);
white-space: nowrap;
}
}


.mw-body-content .navbar ul {
.calcXp--container{
line-height: inherit;
    box-sizing: border-box;
    padding: 2.25em 1.25em;
width: 43em;
    border: 3px solid #b0cff1;
    border-radius: 26px;
}
}


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


.navbar.mini li abbr[title] {
.calcXp--formItem{
font-variant: small-caps;
display: flex;
border-bottom: none;
align-items: center;
text-decoration: none;
}
cursor: inherit;


.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;
}
}


/* Navbar styling when nested in infobox and navbox */
.calcXp--formItem span{
.infobox .navbar {
font-size: 1.225em;
font-size: 100%;
    font-weight: 500;
    letter-spacing: .05em;
    margin-right: .5em;
    color: #386a93;
}
}


.navbox .navbar {
#calculate-btn{
    box-sizing: border-box;
    cursor: pointer;
display: block;
display: block;
font-size: 100%;
    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;
}
}


.navbox-title .navbar {
#calculate-btn:hover {
/* @noflip */
    color: #ffffff;
float: left;
    box-shadow: rgb(0 0 0 / 8%) 0px 3px 8px;
/* @noflip */
    transform: scale(.95);
text-align: left;
    background: #4685b8;
/* @noflip */
margin-right: 0.5em;
}
}


/* Styling for JQuery makeCollapsible, matching that of collapseButton */
#calc-result{
.mw-parser-output .mw-collapsible-toggle {
margin-top: 1em;
font-weight: normal;
display: flex;
/* @noflip */
    justify-content: center;
text-align: right;
padding-right: 0.2em;
padding-left: 0.2em;
}
}
.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
 
/* @noflip */
#calc-result .badge{
float: left;
    display: flex;
/* @noflip */
    align-items: center;
text-align: left;
    justify-content: center;
max-height: 5em;
    width: 5em;
}
}


/* Hatnotes and disambiguation notices */
.calcXp--xpIcon{
.hatnote {
margin-left: -.2em;
font-style: italic;
}
}


.hatnote i {
.calcXp--numberOfPots{
font-style: normal;
padding-top: .2em;
font-size: 1.15em;
}
}


div.hatnote {
#characters-container{
/* @noflip */
display: flex;
padding-left: 1.6em;
flex-wrap: wrap;
margin-bottom: 0.5em;
padding: 1em;
}
}


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


/* Redirect em verde
#characters-container > div.show{
* Faz com que os redirects apareçam em itálico e verde em [[Special:Allpages]] e [[Special:Watchlist]]
display: block;
*/
.allpagesredirect a,
.redirect-in-category a,
.unusedtemplatesredirect a,
.watchlistredir a {
font-style: italic;
color:green;
}
}


/* Íconpara predefinições medialist [[Template:Ouça]], [[Template:Multi-listen_start]], [[Template:Video]], [[Template:Multi-video_start]] */
#characters-container > div > a > img{
div.listenlist {
width: 100%;
background: url( "//upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Gnome-speakernotes.png/30px-Gnome-speakernotes.png" );
border-radius: 8px;
padding-left: 40px;
filter: grayscale(.3);
transition: all .25s ease;
}
}


div.videolist,
#characters-container > div:hover > a > img{
div.multivideolist {
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
background: url( "//upload.wikimedia.org/wikipedia/en/thumb/2/20/Tango-video-x-generic.png/40px-Tango-video-x-generic.png" );
filter: grayscale(0);
padding-left: 50px;
transform: scale(1.06);
}
}


/* Style rules for media list templates */
.characterPage--splashArt{
div.medialist {
position: absolute;
min-height: 50px;
    top: -2%;
margin: 1em;
    right: -2%;
background-position: top left;
    width: 35%;
background-repeat: no-repeat;
}
}


div.medialist ul {
.characterPage--table{
list-style-type: none;
margin-top: -4em;
list-style-image: none;
width: 100%;
margin: 0;
}
}


div.medialist ul li {
.characterPage--table > tbody{
padding-bottom: 0.5em;
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
}


div.medialist ul li li {
.characterPage--table > tbody > .characterPage--mainSection {
font-size: 91%;
display: flex;
padding-bottom: 0;
flex-wrap: wrap;
justify-content: space-between;
width: 65%;
}
}


/* Change the external link icon to an Adobe icon for all PDF files
.characterPage--table > tbody > .characterPage--sideSection {
* in browsers that support these CSS selectors, like Mozilla and Opera
box-sizing: border-box;
*/
display: flex;
#content a[href$=".pdf"].external,
justify-content: center;
#content a[href*=".pdf?"].external,
width: 33%;
#content a[href*=".pdf#"].external,
padding: 0 1em;
#content a[href$=".PDF"].external,
#content a[href*=".PDF?"].external,
#content a[href*=".PDF#"].external,
#mw_content a[href$=".pdf"].external,
#mw_content a[href*=".pdf?"].external,
#mw_content a[href*=".pdf#"].external,
#mw_content a[href$=".PDF"].external,
#mw_content a[href*=".PDF?"].external,
#mw_content a[href*=".PDF#"].external {
background: url( "//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif" ) center right no-repeat;
padding-right: 16px;
}
}


/* Change the external link icon to an Adobe icon anywhere the PDFlink class
.characterPage--characterInfoContainer{
* is used (notably Template:PDFlink). This works in IE, unlike the above.
width: 43%;
*/
#content span.PDFlink a,
#mw_content span.PDFlink a {
background: url( "//upload.wikimedia.org/wikipedia/commons/2/23/Icons-mini-file_acrobat.gif" ) center right no-repeat;
padding-right: 17px;
}
}


/* Messagebox templates */
.characterPage--statsInfoContainer{
.messagebox {
width: 55%;
border: 1px solid #aaa;
background-color: #f9f9f9;
width: 80%;
margin: 0 auto 1em auto;
padding: .2em;
}
}


.messagebox.merge {
.stats--container{
border: 1px solid #c0b8cc;
display: flex;
background-color: #f0e5ff;
justify-content:center;
text-align: center;
flex-wrap: wrap;
padding: 1.25em;
}
}


.messagebox.cleanup {
.stats--container > div{
border: 1px solid #9f9fff;
width: 45%;
background-color: #efefff;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
margin: .5em;
}
}


.messagebox.standard-talk {
.stats--container div img{
border: 1px solid #c0c090;
width: 2.25em;
background-color: #f8eaba;
}


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


.messagebox.nested-talk {
.bar-filled:first-child, .bar-notFilled:first-child{
border: 1px solid #c0c090;
border-radius: 6px 0 0 6px;  
background-color: #f8eaba;
}
width: 100%;
 
margin: 2px 4px 2px 4px;
.bar-filled:last-child, .bar-notFilled:last-child{
border-radius: 0 6px 6px 0;
}
}


.messagebox.small {
.bar-filled, .bar-notFilled{
width: 238px;
display: block;
font-size: 85%;
width: 18%;
float: right;
    height: 6px;
clear: both;
margin: 0 0 1em 1em;
line-height: 1.25em;
}
}


/**
.bar-filled{
* Infobox V2 - em fase de teste
background: var(--blue);
* Ver [[fr:Projet:Infobox/V2]]
**/
.infobox_v2 {
background: #f9f9f9;
color: #000;
font-size: 90%;
line-height: 1.1em;
float:right;
clear:right;
margin: 0.5em 0 0.5em 1em;
width: 23em;
border: 1px solid #aaa;
padding: 2px;
}
}


.infobox_v2 th {
.bar-notFilled{
vertical-align:top;
background: var(--transparent-blue);
text-align:left;
}
}


.infobox_v2 .topo{
.characterInfo--name{
height:45px;
margin: 0!important;
vertical-align:middle;
text-align:center;
font-size:120%;
font-weight:bolder;
line-height:1.2em;
color:#000;
}
}


.infobox_v2 .midia {
.characterInfo--badgeContainer{
height:35px;
display: flex;
vertical-align:middle;
justify-content: center;
text-align:center;
flex-wrap: wrap;
font-weight:bolder;
width: fit-content;
color:#000;
    margin:0 auto;
}
}


/* Imagens transparentes dos topos da infobox V2 */
.characterInfo--contentContainer{
/*.topo.padrao      {}*/
display: flex;
.topo.animangá    { background: url( "//upload.wikimedia.org/wikipedia/commons/6/63/Picto_infobox_anime_and_manga.png" ) no-repeat top right; }
justify-content: space-between;
.topo.astronomia  { background: url( "//upload.wikimedia.org/wikipedia/commons/e/ee/Picto_infobox_rocket.png" )          no-repeat top right; }
padding: .6em 1.3em;
.topo.bd          { background: url( "//upload.wikimedia.org/wikipedia/commons/2/2c/Picto_infobox_comicballoon.png" )  no-repeat top right; }
}
.topo.castelo    { background: url( "//upload.wikimedia.org/wikipedia/commons/5/5c/Picto_infobox_chateau.png" )      no-repeat top right; }
.topo.cerveja    { background: url( "//upload.wikimedia.org/wikipedia/commons/0/04/Picto_infobox_beer.png" )          no-repeat top right; }
.topo.cinema      { background: url( "//upload.wikimedia.org/wikipedia/commons/e/ea/Picto_infobox_cinema.png" )        no-repeat top right; }
.topo.computador  { background: url( "//upload.wikimedia.org/wikipedia/commons/c/ce/Arduino_ftdi_chip-1.png" )        no-repeat top right; }
.topo.comunicacao { background: url( "//upload.wikimedia.org/wikipedia/commons/a/a2/Picto_infobox_antenna.png" ) no-repeat top right; }
.topo.desporto   { background: url( "//upload.wikimedia.org/wikipedia/commons/8/8e/Picto_infobox_Olympic.png" ) no-repeat top right; }
.topo.edificioreligioso  { background: url( "//upload.wikimedia.org/wikipedia/commons/3/30/Pictogram-infobox-religious.png" ) no-repeat top right; }
.topo.europa      { background: url( "//upload.wikimedia.org/wikipedia/commons/c/c0/Picto_Infobox_Europe.png" )        no-repeat top right; }
.topo.fisica      { background: url( "//upload.wikimedia.org/wikipedia/commons/3/37/Fourier_infobox.png" )            no-repeat bottom right; }
.topo.internet    { background: url( "//upload.wikimedia.org/wikipedia/commons/a/aa/Picto_infobox_internet_PD.svg" )  no-repeat center right; }
.topo.humano      { background: url( "//upload.wikimedia.org/wikipedia/commons/8/82/Picto_infobox_manwoman.png" )      no-repeat top right; }
.topo.jogo        { background: url( "//upload.wikimedia.org/wikipedia/commons/2/2d/Picto_infobox_gamepad.png" )      no-repeat bottom right; }
.topo.jornal      { background: url( "//upload.wikimedia.org/wikipedia/commons/2/23/Picto_infobox_journal.png" )      no-repeat bottom right; }
.topo.mapa        { background: url( "//upload.wikimedia.org/wikipedia/commons/7/7a/Picto_infobox_map.png" )          no-repeat top right; }
.topo.musica      { background: url( "//upload.wikimedia.org/wikipedia/commons/6/60/Picto_infobox_music.png" )        no-repeat bottom right; }
.topo.televisao  { background: url( "//upload.wikimedia.org/wikipedia/commons/a/a6/Picto_infobox_TV-T%26PC.png" )    no-repeat top right; }
.topo.novela, .topo.televisao2  { background: url( "//upload.wikimedia.org/wikipedia/commons/a/a6/Picto_infobox_TV-T%26PC.png" )    no-repeat bottom right; }
.topo.palacio    { background: url( "//upload.wikimedia.org/wikipedia/commons/5/5e/Pictogram_infobox_palace.png" )    no-repeat top right; }
.topo.quimica    { background: url( "//upload.wikimedia.org/wikipedia/commons/9/95/Picto_infobox_chemistry.png" )    no-repeat bottom right; }
.topo.teatro      { background: url( "//upload.wikimedia.org/wikipedia/commons/3/37/Picto_infobox_masks.png" )        no-repeat top right; }
.topo.autor      { background: url( "//upload.wikimedia.org/wikipedia/commons/1/1e/Picto_infobox_auteur.png" )        no-repeat top right; }
.topo.wiki        { background: url( "//upload.wikimedia.org/wikipedia/commons/2/24/Picto_infobox_default.png" )      no-repeat top right; }
.topo.filme      { background: url( "//upload.wikimedia.org/wikipedia/commons/4/4d/Picto_infobox_film.png" )          no-repeat center right; }
.topo.ferramentas { background: url( "//upload.wikimedia.org/wikipedia/commons/c/cb/Picto_infobox_tools.png" )        no-repeat top right; }
.topo.livro      { background: url( "//upload.wikimedia.org/wikipedia/commons/4/42/Picto_infobox_book.png" )          no-repeat center right; }
.topo.espacial    { background: url( "//upload.wikimedia.org/wikipedia/commons/9/94/Picto_infobox_shuttle.png" )      no-repeat top right; }
.topo.rka        { background: url( "//upload.wikimedia.org/wikipedia/commons/1/1b/Picto_infobox_RKA.png" )          no-repeat top right; }
.topo.ginastica  { background: url( "//upload.wikimedia.org/wikipedia/commons/9/92/Picto_infobox_gymnastic.png" )    no-repeat top right; }
.topo.raio        { background: url( "//upload.wikimedia.org/wikipedia/commons/2/27/Picto_infobox_raio.png" )          no-repeat top right; }
.topo.robo        { background: url( "//upload.wikimedia.org/wikipedia/commons/5/5f/Picto_infobox_robot.png" )        no-repeat top right; }
.midia.audio { background: url( "//upload.wikimedia.org/wikipedia/commons/thumb/8/87/Gnome-mime-sound-openclipart.svg/35px-Gnome-mime-sound-openclipart.svg.png" ) no-repeat top left; }
.midia.video { background: url( "//upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Video-x-generic.svg/35px-Video-x-generic.svg.png" ) no-repeat top left; }


/* Fim da fase de teste da Infobox V2 */
.characterInfo--imageContainer{
width: 25%;
}


/* Fundo logo Wikipédia */
.characterInfo--medal{
.fundologo {
margin-top:-1.5em;
background: url( "//upload.wikimedia.org/wikipedia/commons/1/10/Wikipedia-logo-v2-200px-transparent.png" );
}
}


/* Barra de navegação */
 
div.Boxmerge,
.characterInfo--infoContainer{
div.NavFrame {
width: 75%;
margin: 0;
padding: 2px;
border: 1px solid #aaa;
text-align: center;
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: .25em .75em;
}
.skins--container span {
width: 33.3%;
display: flex;
justify-content: center;
}
/*
Seção das skills do personagem
*/
.tabsContainer{
width: 95%;
margin: 0 auto;
padding-bottom: .5em;
}
.tabsContainer table {
width: 100%;
border-collapse: collapse;
border-collapse: collapse;
font-size: 95%;
}
}


div.Boxmerge div.NavFrame {
.tabsContainer table > tbody> tr > td{
border-style: none;
border-bottom: 2px solid rgb(225, 225, 225);
border-style: hidden;
}
}


div.NavFrame + div.NavFrame {
.tabSkill--container{
border-top-style: none;
padding-bottom: .85em;
border-top-style: hidden;
display: flex;
max-width: 72em;
overflow-x: auto;
}
}


div.NavPic {
.skillInfo--description::-webkit-scrollbar,
background-color: #fff;
.tabSkill--container::-webkit-scrollbar {
margin: 0;
  width: 8px;
padding: 2px;
  height: 8px;
float: left;
}
}


div.NavFrame div.NavHead {
.skillInfo--description::-webkit-scrollbar-track,
height: 1.6em;
.tabSkill--container::-webkit-scrollbar-track {
font-weight: bold;
  background-color: #4799c954;
font-size: 100%;
  border-radius: 10px;
background-color: #efefef;
position:relative;
}
}


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


div.NavFrame div.NavContent {
.tab-skill{
font-size: 100%;
transition: all .25s ease;
width: 100%;
min-width: 5em;
}
}


div.NavFrame div.NavContent p {
.tab-skill.active{
font-size: 100%;
border-color: #459cca;
}
}


div.NavEnd {
.tab-skill > div{
margin: 0;
cursor: pointer;
padding: 0;
box-sizing: border-box;
line-height: 1px;
width: 100%;
clear: both;
display: flex;
justify-content: center;
align-items: center;
padding: .25em;
}
}


a.NavToggle {
.tab-skill > div > img{
position:absolute;
width: 100%;
top:0;
max-width: 40px;
right:3px;
height: auto;
font-weight:normal;
font-size:smaller;
}
}


/* Geographical coordinates defaults. See [[Template:Coord/link]]
.skillInfo--container{
  for how these are used. The classes "geo", "longitude", and
width: 100%;
  "latitude" are used by the [[Geo microformat]]. */
}
.geo-default, .geo-dms, .geo-dec  { display: inline; }
.geo-nondefault, .geo-multi-punct { display: none; }
.longitude, .latitude            { white-space: nowrap; }


/* Permite limitar a quantidade de níveis num índice;
.skillInfo--container > td{
* <div class="toclimit-3">, por exemplo, limitará somente
border: none!important;
* a ==nível 2== e ===nível 3=== e nada inferior, contanto
}
* que não exista =nível 1= na pagina.
 
*/
.skillInfo{
.toclimit-2 .toclevel-2,
.toclimit-3 .toclevel-3,
.toclimit-4 .toclevel-4,
.toclimit-5 .toclevel-5,
.toclimit-6 .toclevel-6,
.toclimit-7 .toclevel-7 {
display: none;
display: none;
}
}


/* Remove bordas brancas de miniaturas */
.skillInfo.active{
div.thumb {
display: table-cell;
border: none;
}
}


div.tright {
.skillInfo.active{
border: none;
display: table-cell;
margin: 0.5em 0 0.8em 1.4em;
}
}


div.tleft {
.skillInfo--videoContainer{
border: none;
margin: 0.5em 1.4em 0.8em 0;
align-self: center;
width: 45%;
}
}


/* Suporte para [[Predefinição:AFI]], [[Predefinição:Unicode]] e [[Predefinição:politônico]] */
.skillInfo--skillVideo2 {
.AFI {
display: none;
font-family: "Charis SIL", "Doulos SIL", Gentium, GentiumAlt,
border-radius: 8px;
"DejaVu Sans", Code2000, "TITUS Cyberbit Basic",
"Arial Unicode MS", "Lucida Sans Unicode",
"Chrysanthi Unicode";
}
}


.Unicode {
.skillInfo--skillVideo2.active {
font-family: Code2000, Code2001, "Free Serif", "TITUS Cyberbit Basic",
display: flex;
"Doulos SIL", "Chrysanthi Unicode", "Bitstream Cyberbit",
"Bitstream CyberBase", Thryomanes, Gentium, GentiumAlt,
"Lucida Grande", "Free Sans", "Arial Unicode MS",
"Microsoft Sans Serif", "Lucida Sans Unicode";
}
}


.politonico {
.skillInfo--videoSelector{
font-family: "Athena Unicode", Gentium, "Palatino Linotype",
display: inline-block;
"Arial Unicode MS", "Lucida Sans Unicode",
width: 1.1em;
"Lucida Grande", Code2000;
height: 1.1em;
border-radius: 50%;
background: var(--transparent-blue);
cursor: pointer;
margin-right: .85em;
transition: all .25s ease;
}
}


/* Prevent line breaks in silly places:
.skillInfo--videoSelector.active{
  1) Where desired
background: var(--blue);
  2) Links when we don't want them to
transform: scale(.8);
  3) Bold "links" to the page itself
  4) Ref tags with group names <ref group="Note"> --> "[Note 1]" */
.nowrap,
.nowraplinks a,
.nowraplinks .selflink,
sup.reference a {
white-space: nowrap;
}
}


/* But allow wrapping where desired: */
.skillInfo--infoContainer{
.wrap,
width: 50%;
.wraplinks a {
white-space: normal;
}
}


/* Para a documentação das predefinições */
.skillInfo > div > .skillInfo--infoContainer b{
.template-documentation {
color: #2a87c4 !important;
clear: both;
margin: 1em 0 0 0;
border: 1px solid #C0C0C0;
background-color: #ECFCF4;
padding: 1em;
}
}


/* Ícone do [[MediaWiki:WikiLove.js]] */
.skillInfo--infoContainer > center > b{
#ca-wikilove.icon a {
font-size: 1.15em;
background-image: url( //upload.wikimedia.org/wikipedia/commons/thumb/8/87/Symbol_thumbs_up.svg/16px-Symbol_thumbs_up.svg.png );
}
}


#ca-wikilove.icon a:hover,
.skillInfo--name{
#ca-wikilove.icon a:focus {
font-size: 1.85em;
background-position: 5px 60%;
letter-spacing: 1px;
background-image: url( //upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Symbol_thumbs_up_color.svg/16px-Symbol_thumbs_up_color.svg.png );
text-align: center;
}
}


/* Oculta qualquer conteúdo que só é de interesse para grupos específicos de usuários.
.skillInfo--description{
* Torna-se visível novamente por meio de
display: inline-block;
* - [[MediaWiki:Group-user.css]]
font-size: 1.03em;
* - [[MediaWiki:Group-autoreviewer.css]]
line-height: 1.5em;
* - [[MediaWiki:Group-eliminator.css]]
    padding: 0 1em;
* - [[MediaWiki:Group-rollbacker.css]]
height: 12em;
* - [[MediaWiki:Group-sysop.css]]
max-height: 12em;
* - [[MediaWiki:Group-bureaucrat.css]]
overflow-y: auto;
*/
text-align: justify;
.bureaucrat-show,
.sysop-show,
.eliminator-show,
.rollbacker-show,
.autoreviewer-show,
.autoconfirmed-show,
.user-show {
display: none;
}
}


/* Make <math display="block"> be left aligned with one space indent for compatibility with style conventions */
.skillInfo--attributesContainer > h1{
.mwe-math-fallback-image-display,
color: #717171;
.mwe-math-mathml-display {
    font-size: 1.4em;
margin-left: 1.6em !important;
    text-align: center;
margin-top: 0.6em;
    letter-spacing: 1px;
margin-bottom: 0.6em;
}
}
.mwe-math-mathml-display math {
 
display: inline;
/* card attributes */
.attribute--cardsContainer{
display: flex;
align-items: flex-start;
width: fit-content;
margin:0 auto;
background: var(--lightGray);
border: 2px solid var(--gray);
}
}


/* hidden sortkey for tablesorter */
.cardAttribute{
td .sortkey,
box-sizing: border-box;
th .sortkey {
display: flex;
display: none;
flex-direction: column;
speak: none;
justify-content: center;
align-items: center;
width: 8em;
}
}


/* Aspas retas para <q> */
.cardAttribute--icon{
q {
margin: .6em 0;
quotes: '"' '"' "'" "'";
height: 2em;
}
}


/* Evitar colisão de blockquote com elementos flutuantes ao trocar margem com padding */
.cardAttribute--value{
blockquote {
margin: 0!important;
overflow: hidden;
margin: 1em 0;
font-size: .9em!important;
padding: 0 40px;
font-weight: bold;
line-height: 1.65em!important;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
}
}
/*------------------------------------
WANTED
-----------------------------------*/


pre, .mw-code {
.selectWanted--container{
overflow-x: hidden;
display: flex;
overflow-wrap: break-word;
justify-content: center;
}
}


/* Mesmo espaçamento para parágrafos indentados e não-indentados em páginas de discussões */
#selectbox-wanted {
.ns-talk .mw-body-content dd {
padding: .35em .5em;
margin-top: 0.4em;
    font-family: sans-serif;
margin-bottom: 0.4em;
    letter-spacing: .04em;
    font-size: 1.25em;
    width: 21em;
    border: 2px solid #5684c8;
    border-radius: 6px;
}
}


/* Reajustar estilização em itálico definido pelo agente de utilizador */
.wantedPortrait--container{
cite, dfn {
width: 100%;
font-style: inherit;
}


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


/* Classes genéricas para serifa baseada em Times, classe texhtml para matemática em linha */
.wantedPortraits{
.times-serif,
display: flex;
span.texhtml {
flex-wrap: wrap;
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
}
}


span.texhtml {
.wantedPortrait{
white-space: nowrap;
box-sizing: border-box;
width: 18em;
padding: .35em;
}
}


span.texhtml span.texhtml {
.wantedPortrait img{
font-size: 100%;
width: 100%;
}
}


span.mwe-math-mathml-inline {
@media screen and (max-width: 1440px) {
font-size: 118%;
: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;
}
}
}


/* Forçar exibição tabular e de revestimento para dígitos e texhtml */
@media screen and (max-width: 1220px) {
.digits,
.tabSkill--container{
.texhtml {
max-width: 48em;
-moz-font-feature-settings: "lnum", "tnum", "kern" 0;
}
-webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
}
font-feature-settings: "lnum", "tnum", "kern" 0;
 
font-variant-numeric: lining-nums tabular-nums;
 
font-kerning: none;
@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;
}
}


ol.references,
.mostrar-aba {
div.reflist {
    cursor: pointer;
font-size: 90%;           /* font-size padrão */
    padding: 0;
margin-bottom: 0.5em;
    background-color: transparent;
    text-align: center;
    border: none;
    position: relative;
    transition: all 0.2s ease-in-out;
}
}
div.reflist ol.references {
 
font-size: 100%;           /* Resetar font-size quando aninhado em div.reflist */
.imagem-botao {
margin-bottom: 0;         /* Evitar margem dupla quando aninhado em div.reflist */
    display: inline-block;
list-style-type: inherit; /* Habilitar tipos de estilo de lista personalizadoss */
    width: auto;
    height: auto;
}
}


/* Resetar margem de topo para listas embutidas em colunas */
.sec-aba-cem {
div.columns {
    padding: 5px;
margin-top: 0.3em;
    font-weight: bold;
    text-align: center;
    color: #333;
}
}
div.columns dl,
 
div.columns ol,
.mostrar-aba img {
div.columns ul {
    border: none;
margin-top: 0;
    background-color: transparent;
    margin: 5px;
}
}


/* Make it possible to hide checkboxes in <inputbox> */
.mostrar-aba:hover::after {
.inputbox-hidecheckboxes form .inputbox-element,
    content: '';
.inputbox-hidecheckboxes .mw-ui-checkbox {
    position: absolute;
display: none !important;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: rgba(0, 0, 0, 0.4); /* Barrinha sutil ao passar o mouse */
}
}


/* Ajuste na cor do símbolo de não-patrulhado nas [[WP:Mudanças recentes]], em conformidade com o [[WP:Padrão visual]] */
.mostrar-aba:hover img {
abbr.unpatrolled {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); /* Sombra leve ao passar o mouse */
    color: #B60000
}
}


/* Confetes do [[Mediawiki:Sitenotice]] dos 20 anos */
.mostrar-aba:active img {
.top-banner-20 {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
  background: url( "//upload.wikimedia.org/wikipedia/donate/0/08/Wikipedia20_banner_backgroundtop2.svg" );
  background-size: auto 36px;
  background-repeat: repeat-x;
  position: absolute;
  width: 100%;
  height: 36px;
  overflow: hidden;
  z-index: 0;
  margin-right: 149px;
}
}
.bottom-banner-20 {
 
    background: url( "//upload.wikimedia.org/wikipedia/donate/c/c9/Wikipedia20_banner_backgroundbottom2.svg" );
.mostrar-aba.ativa::after {
    background-size: auto 36px;
     content: '';
     background-repeat: repeat-x;
     position: absolute;
     position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #000;
}
.aba {
    display: none;
    margin-top: 20px;
}
.aba.atual {
    display: block;
}
.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%;
     width: 100%;
     height: 36px;
    color: #000; /* Garante que o texto dentro das transcrições será preto */
     overflow: hidden;
}
     transform: translateY(-36px);
 
     margin-right: 149px;
.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;
}
}

Edição atual tal como às 17h36min de 21 de novembro de 2024

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

html{
	scroll-behavior: smooth;
}

:root{
	--content-bg: #fcfcfc;
	--content-text: #000;
	--simpleSearch-bg: #fff;
	--searchInput-text:#aaaaaa;
	--link-text: #0645ad;
	
	--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: .25em .75em;
}

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

/*
	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;
}

.aba {
    display: none;
    margin-top: 20px;
}

.aba.atual {
    display: block;
}

.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;
}
Disponível em “http://wiki.gla.com.br/index.php?title=MediaWiki:Common.css&oldid=23411”