/*
File Name: 		custom.css
Description:  You can add your custom CSS here and it will overwrite template styles
*/
/*# sourceMappingURL=maps/custom.css.map */

.linkSellItem {
  font-weight: bold;
}

.botaoCategoria {
text-align: center;
}

.botaoOusters {
  background-color:#13ad49;
  
}

.botaoOusters:hover {
  background-color:#1af567;
}

.botaoAll {
  background-color:#0875f1 !important;
  color:#ffffff;
}

.botaoAll:hover{
  background-color:#0c4e99 !important;
}

.botaoCommon {
  background-color:#f5961a;
  color:#ffffff;
}

.botaoCommon:hover {
  background-color:#ff9100;
}

.errorColor {
  color:#f13232 !important;
}

.successColor {
  color:#26f348 !important;
}

.pulse {
    animation: pulse 0.7s infinite;
    margin: 0 auto;
    display: table;
    animation-direction: alternate;
    -webkit-animation-name: pulse;
    animation-name: pulse;
    font-size:15px !important;
    
  }

  @-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale(1);
      -webkit-filter: brightness(100%);
    }
    100% {
      -webkit-transform: scale(1.1);
      -webkit-filter: brightness(200%);
    }
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
      filter: brightness(100%);
    }
    100% {
      transform: scale(1.1);
      filter: brightness(200%);
    }
  }


  .posts__thumb:hover {opacity:0.8; cursor:pointer;}

  /* Container principal */
  .market-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    background-color: #392d49; /* Cor de fundo */
    padding: 8px;
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    height: 215px;
    margin-bottom:30px;
  }

  /* Banner da esquerda */
  .market-banner {
    width: 200px;
    height:200px;
    margin-right: 20px;
  }

  .market-banner img {
    width: 100%;
    border-radius: 3px;
    height: 100%;
    object-fit: cover;
    
    transition: transform 0.3s ease;
  }

  .market-banner img:hover{
    transform: scale(1.05);
    opacity:0.7;
  }

  /* Contêiner dos produtos */
  .market-products {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: space-between;
  }

  /* Item de produto */
  .product-item {
    width: 19%;
    position: relative;
      display: inline-block;
    text-align: center;
    background-color: #1e1a26;
    border-radius: 6px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Sombra leve */
    padding: 10px;
    height:200px;
    transition: transform 0.3s ease;
    border: 1px solid #4c3a67; /* Borda estilizada */
    background-image: radial-gradient(circle, #392d49, #211a32);
  }

  .product-item:hover {
    transform: scale(1.05);
  }

  .product-item .productImage {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 1px;
  }

  /* Etiqueta de news como imagem */
  .news-label {
    position: absolute;
    top: 3px; /* Posição no topo */
    left: 10px; /* Posição à esquerda */
    z-index: 9999; /* Garante que a etiqueta fique sobre a imagem */
    cursor:pointer;
  }

  /* Estilo da imagem da etiqueta de news */
  .news-label-image {
    width: 50px; /* Ajuste o tamanho da imagem conforme necessário */
    height: auto;
    display: block;
  }

  .news-label-image:hover{
    opacity:0.7;
  }

  .product-item p {
    font-size: 14px;
    margin-bottom: 10px;
    color: #fff; /* Ajuste de cor de texto */
    font-weight: bold;
  }

  /* Botão de compra */
  .btn-buy {
    display: inline-block;
    padding: 5px 10px;
    background-color: #007BFF;
    color: white;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .btn-buy:hover {
    background-color: #0056b3;
  }

  /* Estilos responsivos */
  @media (max-width: 768px) {
    .market-container {
      flex-direction: column;
      height: auto;
    }

    .market-banner {
      margin-bottom: 20px;
      width: 100%;
    }

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

    .product-item {
      margin-right: 10px;
      margin-left: 10px;
    }
  }

  .destaqueMarket {
    background-color:#130e1c !important;
    border-radius:5px !important;
  }

  .headerSidebar {
    background-color:#130e1c !important;
    height:40px;
    font-weight:bold;
    padding:5px;
    font-style: normal !important;
  }

  .headerSidebar h4 {
  font-style: normal !important;
  font-size: 20px !important;
  text-align: center;
  display: flex; /* Usar flexbox */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  height: 100%; /* Garante que o elemento ocupe toda a altura do contêiner pai */
  margin: 0; /* Remove qualquer margem para evitar deslocamento */
}

  @media (max-width: 480px) {
    .product-item {
      width: 100%;
    }

    .product-item .productImage {
      width: 80px;
      height: 80px;
    }
  }


/* Container principal */
.race-rank-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px;
  background-color: #292039; /* Cor de fundo escura com tom roxo */
  border-radius: 6px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  flex-wrap: wrap; /* Responsivo */
  width: 100%; /* Ocupa 100% da largura */
  border: 2px solid #1c142b; /* Adiciona borda escura */
margin-bottom:30px;
}

/* Estilo de cada bloco de rank */
.race-rank {
  flex: 1 1 30%;
  background-color: #2f2547; /* Fundo do bloco de rank */
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Sombra leve */
  padding: 10px;
  text-align: left; /* Alinhamento à esquerda */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box; /* Inclui padding na largura total */
  color: #fff; /* Texto branco para melhor contraste */
  border: 1px solid #4c3a67; /* Borda estilizada */
  position: relative;
  background-image: radial-gradient(circle, #392d49, #211a32);
}

/* Efeito hover para os blocos de rank */
.race-rank:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Títulos de cada raça */
.race-rank h3 {
  font-style: normal;
  margin-bottom: 8px;
  color: #ffffff;
  padding: 3px 0;
  font-size: 13px;
  border-radius: 1px;
  font-weight: bold;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4); /* Fundo escuro para destaque */
  text-transform: uppercase;
  border-bottom: 2px solid #fff; /* Linha abaixo do título */
  letter-spacing: 1px;
}

/* Estilo de lista */
.race-rank ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

/* Estilo de cada item da lista */
.race-rank li {
  font-size: 12px;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  margin-bottom: 3px;
  border-radius: 4px;
  white-space: nowrap; /* Previne a quebra de linha */
  overflow: hidden; /* Oculta o excesso de texto */
  text-overflow: ellipsis; /* Adiciona reticências para textos longos */
}

/* Espaçamento entre os textos de cada item */
.race-rank li span {
  margin-right: 10px;
}

/* Definindo largura proporcional para as colunas */
.race-rank .position {
  flex-basis: 5%; /* Posição */
  font-weight: bold;
  text-align: center;
}

.race-rank .name {
  flex-basis: 45%; /* Nome */
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.race-rank .lvl {
  flex-basis: 25%; /* LVL */
  text-align: right;
}

.race-rank .rank {
  flex-basis: 10%; /* Rank */
  text-align: left;
}

.effectHero {flex-basis: 12%; text-align: left;/* Rank */}
.effectHero img {
  cursor:pointer;
  transition: transform 1s, opacity 1s; /* Ajuste na propriedade transition */
}

.effectHero img:hover {
  transform: scale(1.1); /* Adiciona o efeito de zoom */
  opacity: 0.5; /* Mantém a alteração de opacidade */
}

/* Cores para cada raça no título */
.slayer-rank h3 {
color: #429aff;
  border: 2px solid #429aff; /* Azul */
  border-bottom: 2px solid #0066cc; /* Linha azul abaixo do título */
background-color:transparent;
}

.vampire-rank h3 {
color: #ad1b47;
border: 2px solid #ad1b47; /* Azul */
  border-bottom: 2px solid #cc0000; /* Linha vermelha abaixo do título */
background-color:transparent;
}

.ousters-rank h3 {
color: #7caf1b;
border: 2px solid #7caf1b; /* Azul */
  border-bottom: 2px solid #218838; /* Linha verde abaixo do título */
background-color:transparent;
}

/* Responsividade */
@media (max-width: 768px) {
  .race-rank {
      flex: 1 1 48%; /* 2 por linha em telas médias */
  }
}

@media (max-width: 480px) {
  .race-rank {
      flex: 1 1 100%; /* 1 por linha em telas pequenas */
  }
}

/* NEWS */

/* Container principal para o layout 100% */
/* Container principal para o layout 100% */
.news-container {
  width: 100%;
  background-color: #292039; /* Cor de fundo escura */
  padding: 8px; /* Padding ajustado */
  border-radius: 6px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  border: 2px solid #1c142b; /* Adiciona borda escura */
  margin-bottom: 20px;
}

/* Cabeçalho das notícias */
.news-header {
  display: flex;
  justify-content: space-between;
  padding: 5px;
  background-color: #392d49; /* Fundo do cabeçalho */
  border-bottom: 2px solid #4c3a67;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  letter-spacing: 1px;
}

.news-header .cabCategory {
width:15%;
text-align:center;
}

.news-header .cabTitle {
width:40%;
text-align:left;
}

.news-header .cabDate {
text-align:center;
width:20%;
}

.news-header .cabView {

}

/* Linha de cada notícia */
.news-item {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  background-color: #2f2547;
  color: #fff;
  margin-bottom: 6px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

/* Efeito hover nas notícias */
.news-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
cursor:pointer;
}

/* Categoria */
.news-category {
  flex-basis: 15%;
  text-align: center;
  padding: 1px;
  border-radius: 1px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
}

/* Estilos específicos para cada categoria */
.news-category.update {
  background-color: #9f9916; /* Azul para Update */
}

.news-category.news {
  background-color: #1b618f; /* Vermelho para News */
}

.news-category.event {
  background-color: #b33939; /* Verde para Event */
}

/* Título da notícia */
.news-title {
  flex-basis: 50%;
  padding-left: 10px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Data da notícia */
.news-date {
  flex-basis: 20%;
  font-size: 11px;
  display: flex;
  justify-content: center;
  align-items: center; /* Centraliza verticalmente */
}

/* Views da notícia */
.news-views {
  flex-basis: 15%;
  text-align: right;
  font-size: 11px;
  display: flex;
  justify-content: flex-end;
  align-items: center; /* Centraliza verticalmente */
}

/* Limitação para exibir apenas 5 notícias */
.news-item:nth-child(n+6) {
  display: none; /* Esconde todas as notícias após o 5º item */
}