/*---------------SCROLL------------ */
::-webkit-scrollbar-track {
    background: rgb(31, 31, 31);
}
::-webkit-scrollbar-thumb {
    background-color: rgba(166, 101, 250, 0.6) !important;
}
::-webkit-scrollbar {
    width: 8px;
}
/*---------------FIM DO SCROLL------------ */

/* ---------------BODY-----------------*/

.body-background {
    background-color: #582788; /* Cor de fundo roxa escuro */
}

/* ---------------NAVBAR-----------------*/

/* --- Cor-navbar---*/
.bg-custom {
    background-color: #181818ce; /* Cor de fundo personalizada */
    padding: 15px;
}

/* --- Cor-letra-navbar---*/
.navbar-dark .navbar-nav .nav-link {
    font-family: "Barlow";
    color: white; /* Cor original do texto */
    transition: color 0.3s, border-bottom 0.3s; /* Transição suave para cor e borda */
    padding-bottom: 5px; /* Espaçamento para a borda inferior */
    border-bottom: 3px solid transparent; /* Borda transparente quando não está em hover */
}

.nav-link {
    padding: 10px 15px; /* Aumenta a área clicável dos links */
}

/* --- Hover-letra-navbar---*/

.navbar-dark .navbar-nav .nav-link:hover {
    color: #8f1ff8; /* Cor do texto no hover */
    border-bottom: 3px solid #8f1ff8; /* Borda vermelha no hover */
    border-radius: 2px; /* Bordas levemente arredondadas para a borda inferior */
}

/* --- Tipo-letra-navbar---*/
.nav-item {
    margin-right: 20px; /* Espaçamento entre os itens */
    font-size: 0.95rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.25;
    text-transform: uppercase;
}

.nav-item:last-child {
    margin-right: 0; /* Sem margem no último item */
}

.navbar-dark .navbar-nav .nav-link.active:hover {
    background-color: rgba(
        255,
        255,
        255,
        0.1
    ); /* Cor de fundo ao passar o mouse em item ativo */
}

.imagem-logo {
    height: 50px; /* Ajuste a altura do logo */
}

.dropdown {
    margin-right: 10px;
}

.select-lang .dropdown-item img {
    margin-right: 8px; /* Espaço entre a imagem da bandeira e o texto */
}

.nav-item.dropdown .dropdown-menu {
    right: 0; /* Alinha o menu dropdown à direita do elemento pai */
    left: auto; /* Anula qualquer valor pré-definido à esquerda */
}

.background-navbar {
    max-width: 100%; /* Garante que nenhum elemento seja mais largo que a tela */
    overflow-x: hidden; /* Oculta o conteúdo que excede a largura */
}

.background-navbar-image {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-navbar-image .background {
    width: 100%;
    height: auto;
    object-fit: cover; /* Garante que a imagem cubra o container sem distorção */
}

/* Texto sobreposto */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: white;
    white-space: nowrap;
    font-size: 100px;
    text-shadow: 4px 4px 15px rgba(0, 0, 0, 0.8);
}

/* Ajustes para dispositivos móveis */
@media (max-width: 767px) {
    .background-navbar-image {
        min-height: 300px; /* Define uma altura mínima para a imagem no mobile */
    }

    .background-navbar-image .background {
        min-height: 300px; /* Garante que a imagem tenha uma altura mínima */
        object-fit: cover; /* Faz com que a imagem preencha o espaço sem distorção */
    }

    .overlay-text {
        font-size: 1.4rem; /* Ajuste o tamanho da fonte no mobile */
        white-space: normal; /* Permite quebra de linha */
        padding: 0 20px; /* Adiciona um espaçamento lateral para o texto não encostar nas bordas */
    }

    .overlay-text {
        font-size: 30px; /* Ajuste o tamanho da fonte no mobile */
    }
}

.left-space {
    margin-right: 10px;
}

/* ---------------NAVBAR RESPONSIVE-----------------*/

/* Remove padding extra em telas menores */
@media (max-width: 991.98px) {
    .bg-custom {
        padding: 15px;
    }

    .nav-item {
        margin-right: 10px;
    }

    .imagem-logo {
        height: 40px; /* Reduz o logo em dispositivos menores */
    }
}

/* Ajustes no dropdown para mobile */
.nav-item .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
}

.nav-item .dropdown-menu.show {
    display: block;
}

/* Garantir que o dropdown fique abaixo do toggle em dispositivos móveis */
@media (max-width: 991.98px) {
    .navbar-nav .dropdown-menu {
        position: relative;
    }
}

/* ---------------PRE-CONTENT-----------------*/

.introduce-guide-content {
    width: 100%;
    padding: 2rem;
    background-color: #181818ce;
}

.all-guide-introduce {
    font-family: "Barlow";
    font-size: 40px;
}

/* --------------- sidebar --------------- */

.centered-flex {
    background-color: #292929;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 50px;
    position: relative;
}
#sidebar {
    width: 300px;
    margin-right: 20px; /* Espaço entre o menu e o conteúdo principal */
    /*border: 2px solid silver;
  box-shadow: 0 0 3px silver; /* Efeito brilhoso para a borda */
}
#main-content {
    flex-grow: 1;
    width: 70%; /* Ajuste a largura conforme necessário */
    /*border: 2px solid silver;
  box-shadow: 0 0 3px silver;*/
}
.menu-item {
    padding: 10px;
    border-bottom: 1px solid #444;
    background-color: #232323;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.submenu div {
    padding-left: 20px;
    transition: max-height 0.5s ease-in-out;
}

.accordion-button {
    background-color: #333;
    color: #333;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: background-color 0.4s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Barlow";
}

/* cor da box de dentro */
.accordion-body {
    font-family: "Barlow";
    background-color: #232323;
}

/* cor do hover */
.accordion-button:hover,
.accordion-button:focus {
    background-color: #3b3b3b;
}
/* cor do nomes */
.accordion-button span {
    color: white;
}

/* cor de fundo da seta */
.accordion-button::after {
    display: none;
}

.accordion-collapse {
    margin-top: 2px;
    background-color: #232323;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion-body {
    padding: 18px;
    border-top: 1px solid #444;
}

.accordion-item {
    background-color: rgba(83, 83, 83, 0.5);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.accordion-item .accordion-button {
    color: #3b3b3b;
    background-color: rgba(125, 5, 180, 0.5); /* Define a transparência aqui */
    border: none; /* Remove a borda, se necessário */
}

.accordion-item:first-of-type .accordion-button {
    color: #3b3b3b;
    background-color: #3b3b3b; /* Define a transparência aqui */
    border: none; /* Remove a borda, se necessário */
    outline: none;
    box-shadow: none;
}

.accordion-item:first-of-type:hover .accordion-button:hover {
    color: #383838;
    background-color: #383838; /* Define a transparência aqui */
    outline: none;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: #3b3b3b;
    background-color: #3b3b3b; /* Define a transparência aqui */
    outline: none;
    box-shadow: none;
    border-radius: 4px;
}

.accordion-button:hover {
    color: #383838;
    background-color: #383838; /* Define a transparência aqui */
    outline: none;
    box-shadow: none;
    border-radius: 4px;
}

/* Links das Subcategorias */
.hover-effect-topics {
    position: relative;
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.hover-effect-topics:hover {
    color: #8f1ff8; /* Cor roxa no hover */
}

.nav-link-right-space{
    margin-left: 10px;
}

/* Ajustes para o Responsivo */
@media (max-width: 768px) {
    .centered-flex {
        flex-direction: column;
        padding: 20px;
    }
    #sidebar {
        width: 100%;
        margin-right: 0;
    }
    #main-content {
        width: 100%;
        margin-top: 20px;
    }
}

/* ---------------CONTENT-----------------*/

.main-content {
    font-family: "Barlow";
    background-color: #191919;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.guide-content {
    font-family: "Barlow";
    background-color: #232323;
}

.line-guide {
    border-radius: 0px;
    border: 0.5px solid #333;
}
/* ---------------Botao-de-voltar-----------------*/
.btn-back-to-top {
    background-color: #d3ac60;
}

.btn-back-to-top:hover {
    background-color: #d6b572;
}

/* ---------------Verificar Bordas-----------------*/
/* * {
    border: 1px solid red; /* Coloca uma borda em todos os elementos */
/*} */

.underline-letter {
    position: relative;
    display: inline-block;
}

.underline-letter::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* Ajuste para alinhar a linha com a parte inferior da letra */
    width: 100%;
    height: 1px; /* Ajuste a altura da linha */
    background-color: white; /* Ajuste a cor da linha */
}

/* ---------------Sistema PVE-----------------*/
.PveContentGuide {
    margin-top: 100px;
}

.FirstTopicPve {
    margin-top: 100px;
}

.coinpve {
    width: 48px;
    height: 48px;
    margin-left: 90px;
}

.PveFirstTopicContent {
    margin-left: 25px;
    margin-top: 30px;
}

.npc-violet {
    margin-top: 60px;
}

.SecodTopicCordNPC {
    margin-top: 60px;
}

.ThirdTopicTitle {
    margin-top: 30px;
}

.ThirdTopicChange {
    margin-top: 50px;
}

.sacao-do-ready {
    margin-left: 10px;
    margin-right: 10px;
}

/* ---------------Emissarios-----------------*/

.EmissaryContent {
    margin-top: 100px;
}

.FirstTopicEmissaryTitle {
    margin-top: 100px;
}

/* cor tabelas */

/* Estilo da tabela */
.table-dark {
    background-color: #333;
    color: #fff;
}

.table-dark th,
.table-dark td {
    border-color: #444;
}

.table-dark thead th {
    background-color: #444;
    color: #fff;
}

.table-dark tbody tr:nth-child(odd) {
    background-color: #3b3b3b;
}

.table-dark tbody tr:nth-child(even) {
    background-color: #444;
}

.table-dark tbody tr:hover {
    background-color: #555;
}

/* Estilo dos botões e links */
.btn-link {
    color: #ffffff;
    text-decoration: none;
}

.btn-link:hover {
    color: #cccccc;
    text-decoration: none;
}

.btn-link:focus {
    outline: none;
    box-shadow: none;
}

/* Estilo dos cabeçalhos dos cards */
.card-header {
    background-color: #2c2c2c;
    border-color: #444;
}

/* Estilo dos cards */
.card {
    background-color: #2c2c2c;
    border-color: #444;
}

/* Estilo dos links de navegação */
a {
    color: #1e90ff;
}

a:hover {
    color: #ff4500;
}

.btn-link {
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: none;
}

.btn-link:focus {
    outline: none;
    box-shadow: none;
}

.EmissaryTable {
    margin-bottom: 500px;
}

/* ---------------Dungeons Normais-----------------*/

.NormalDungeonsContent {
    margin-top: 100px;
}

.NormalDungeonContentBottom {
    margin-bottom: 100px;
}

/* Estilo da tabela */
.NormalDungeonsContent-table {
    background-color: #333;
    color: #fff;
}

.NormalDungeonsContent-table th,
.NormalDungeonsContent-table td {
    border-color: #444;
}

.NormalDungeonsContent-table thead th {
    background-color: #444;
    color: #fff;
}

.NormalDungeonsContent-table tbody tr:nth-child(odd) {
    background-color: #3b3b3b;
}

.NormalDungeonsContent-table tbody tr:nth-child(even) {
    background-color: #444;
}

.NormalDungeonsContent-separator-row {
    border-top: 2px solid #444;
}

.table-image-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

.DungeonNormalCollapse {
    cursor: pointer;
}

.collapse-content {
    display: none;
}

.btn-link {
    text-decoration: none;
    color: inherit;
}

.btn-texted:hover {
    color: #ffffff;
    text-decoration: underline; /* adicionar sublinhado ao passar o mouse */
}

.card-header {
    padding: 0;
}
.btn-block {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px;
}

.space-text {
    margin-left: 10px;
}

.btn-texted {
    margin-right: auto;
}
.space-text {
    margin-left: auto;
}
@media (max-width: 576px) {
    .flex-md-row {
        flex-direction: column !important;
    }
}

/* ---------------Dungeons Mutantes-----------------*/

/* ---------------Dungeons Infernais-----------------*/

.infernal-dungeon {
    margin-top: 50px;
}

.image-container-infernal {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 300px; /* Define a altura do container */
}

.image-container-infernal-choices {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
}

/* Estilização da imagem */
.JoinInfernalDungeonEntrace {
    max-width: 100%;
    max-height: 100%;
}

.after-mission {
    margin-top: 30px;
}

.prian-redeem {
    margin-top: 50px;
    margin-bottom: 100px;
}

.changes-rewards-prian {
    margin-top: 50px;
}

.prian-first-option {
    margin-top: 50px;
}

.prian-second-option {
    margin-top: 50px;
}

.info-imagens-guide {
    width: 461px;
    height: 265px;
    object-fit: cover;
}

/* ---------------Dungeons Imortals-----------------*/

.crast-options-images {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Para que as imagens se ajustem ao layout em resoluções menores */
}

.CrastFirstWindow2 {
    width: 100%; /* O Bootstrap img-fluid já faz isso, mas você pode adicionar como garantia */
    height: auto; /* Mantém a proporção da imagem */
    max-width: 365px; /* Define o limite máximo da largura, caso queira */
    max-height: 355px; /* Define o limite máximo da altura, caso queira */
    object-fit: contain; /* Garante que a imagem se ajuste sem distorcer */
}

.CrastChange {
    width: 100%; /* O Bootstrap img-fluid já faz isso, mas você pode adicionar como garantia */
    height: auto; /* Mantém a proporção da imagem */
    max-width: 461px; /* Define o limite máximo da largura, caso queira */
    max-height: 406px; /* Define o limite máximo da altura, caso queira */
    object-fit: contain; /* Garante que a imagem se ajuste sem distorcer */
}

.PotatoSacks{
    width: 100%; /* O Bootstrap img-fluid já faz isso, mas você pode adicionar como garantia */
    height: auto; /* Mantém a proporção da imagem */
    max-width: 32px; /* Define o limite máximo da largura, caso queira */
    max-height: 32px; /* Define o limite máximo da altura, caso queira */
    object-fit: contain; /* Garante que a imagem se ajuste sem distorcer */
    margin-right: 10px;
}

/* Estilo para mobile */
@media (max-width: 768px) {
    .crast-options-images {
        flex-direction: column;
        align-items: center;
    }
}

.ImortalRewardsView img {
    vertical-align: middle;
}

.ImortalRequiresToEnter{
    margin-top: 30px;
}

@media (max-width: 768px) {
    .ImortalRequiresToEnterView {
        max-width: 100%;
        padding: 15px;
        border-radius: 10px;
    }

    .ImortalRequiresToEnter h5 {
        font-size: 18px;
    }

    .ImortalRequiresToEnter ul {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .ImortalRequiresToEnterView {
        padding: 10px;
        border-radius: 8px;
    }

    .ImortalRequiresToEnter h5 {
        font-size: 16px;
    }

    .ImortalRequiresToEnter ul {
        font-size: 12px;
    }
}

.ContractImortal {
    border-radius: 8px; border: 2px solid silver;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

.ImortalContractNPC{
    margin-top: 30px;
}

.spacing-enchant-search{
    margin-top: 30px;
    margin-bottom: 30px;
}

/*---------------Dungeons Altares-----------------*/

.AltarSpriteImage{
    margin-top: 80px;
}

.AltarRequirements{
    margin-top: 90px;
}

.AltarRequirementsTable{
    margin-top: 50px;
}


.AltarDungeonEntry{
    margin-top: 50px;
}

.AltarShopSprite{
    margin-top: 100px;
}

.PreAltarAccordion{
    margin-top: 50px;
    margin-bottom: 50px;
}

.AltarShopImage{
    width: 100%; /* O Bootstrap img-fluid já faz isso, mas você pode adicionar como garantia */
    height: auto; /* Mantém a proporção da imagem */
    max-width: 362px; /* Define o limite máximo da largura, caso queira */
    max-height: 352px; /* Define o limite máximo da altura, caso queira */
    object-fit: contain; /* Garante que a imagem se ajuste sem distorcer */
}

.AltarTable{
    margin-top: 60px;
}

@media (max-width: 768px) {
    .AltarTable {
        margin-top: 50px;
    }
}

@media (max-width: 576px) {
    .AltarTable {
        margin-top: 50px;
    }
}

.icon-items{
    width: 32px; /* Ajuste o tamanho conforme necessário */
    height: 32px; /* Ajuste o tamanho conforme necessário */
}
/* ---------------off-Talentos-----------------

.talent-tooltip {
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
    pointer-events: none;
    white-space: nowrap;
    display: none;
}

.talent-tooltip h4 {
    margin: 0;
    font-size: 14px;
}

.talent-tooltip p {
    margin: 5px 0 0;
    font-size: 12px;
}

.btn-classes {
    background-color: #3b3b3b;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 5px;
    transition: background-color 0.3s;
}

.table-talents {
    text-align: center;
    position: relative;
}

.choose-class-title {
    margin-bottom: 20px;
}

.class-table {
    margin-bottom: 20px;
}

.table-preview {
    position: relative;
    display: inline-block;
}

.background-image {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.talent-section {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.row {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 20px;
}

.talent-grid {
    display: flex;
    align-items: center;
    gap: 10px;
}

.talent-box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #444;
}

.talent-box img {
    width: 100%;
    height: 100%;
}

.talent-box.big {
    width: 37px;
    height: 36px;
}

.talent-box.small {
    width: 26px;
    height: 25px;
}

.combo-image {
    width: 50px; /* Ajuste o tamanho conforme necessário *
    height: 50px; /* Ajuste o tamanho conforme necessário
    position: absolute;
    bottom: 10px; /* Ajuste a posição conforme necessário
    right: 10px; /* Ajuste a posição conforme necessário
}

.table-preview {
    position: relative;
}

.talent-section {
    position: relative;
    z-index: 2;
    margin-top: 89px;
    margin-left: -15px;
}

#combo-image-container {
    position: relative;
    z-index: 3;
}

.talent-background {
    position: absolute;
    top: 0; /* Ajuste conforme necessário
    left: 0; /* Ajuste conforme necessário
    z-index: 1;
}
*/

/* ---------------Talentos--------------*/

.TalentComboContent {
    margin-bottom: 100px;
}

.icon-talent-space {
    margin-top: 10px;
}

.text-icon-space-right {
    margin-left: 10px;
}

/* For mobile/tablets */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto; /* Enable horizontal scroll */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for mobile */
    }

    .table td,
    .table th {
        white-space: nowrap; /* Prevent text wrapping */
        padding: 12px; /* Adjust padding for better readability */
        font-size: 14px; /* Adjust font size for mobile */
    }

    /*.table img {
        width: 48px;
        height: 48px;
    }*/

    .text-icon-space-right {
        font-size: 16px; /* Increase font size slightly for mobile readability */
    }
}

/* For larger screens */
@media (min-width: 769px) {
    .table td,
    .table th {
        padding: 16px; /* More padding for larger screens */
        font-size: 16px; /* Larger font size */
    }

    /*.table img {
        width: 32px; /* Default image size
        height: 32px;
    }*/

    .text-icon-space-right {
        font-size: 18px; /* Larger font size for better readability on big screens */
    }
}

/* ---------------Footer-----------------*/
.guide-footer {
    background-color: #08090a;
    color: white;
    padding: 20px 0;
    text-align: center;
    font-family: "Barlow";
}
.footer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
.footer-link {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}
.footer-link:hover {
    color: #ccc;
}

.guide-footer-icons {
    width: 40px;
    height: 40px;
    margin-left: 10px;
}


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

.tooltip-game-container {
    position: relative;
    display: inline-block;
}

body {
    overflow-x: hidden; /* Evita scroll horizontal em toda a página */
}

.container.talent-container {
    overflow: visible; /* Permite que o conteúdo da tooltip saia dos limites do container */
    max-width: 100%; /* Garante que o container não ultrapasse os limites da viewport */
}

.talent-table-responsive {
    overflow-x: auto; /* Permite que a tabela seja rolada horizontalmente apenas quando necessário */
}

.tooltip-game {
    position: fixed; /* Mantém a tooltip fixa para não ser presa a nenhum container */
    max-width: calc(100vw - 20px); /* Limita a largura da tooltip para evitar ultrapassar os limites da tela */
    white-space: normal; /* Permite quebra de linha na tooltip */
    overflow-wrap: break-word; /* Quebra palavras longas */
    z-index: 2147483647; /* Garante que a tooltip esteja acima de todos os elementos */
    background-color: #555; /* Cor de fundo da tooltip */
    color: #fff; /* Cor do texto */
    padding: 10px; /* Espaçamento interno para dar "folga" ao texto */
    border-radius: 6px; /* Arredonda os cantos da tooltip */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra para dar profundidade */
    text-align: center; /* Alinha o texto ao centro */
    font-size: 12px; /* Define um tamanho de fonte menor */
    opacity: 0; /* Começa invisível */
    transition: opacity 0.3s; /* Transição suave ao aparecer */
}

.tooltip-game.show {
    visibility: visible;
    opacity: 1;
}

.container, .talent-container, .talent-table-responsive {
    overflow: visible; /* Permite que a tooltip se sobreponha e não seja cortada */
}