/*!
 * WebEngine CMS - Tema Abismo Noturno
 * Uma estética sombria e misteriosa para seu mundo de trevas
 * Absolutamente nenhum elemento branco permitido
 */

/* Reset global - banindo o branco do reino das sombras */
*, *::before, *::after {
    color: #888888 !important;
    border-color: #333333 !important;
    text-shadow: 0 0 3px #000000 !important;
}

/* Fundos e containers */
html, body {
    background: #050505 url('../img/background.jpg') no-repeat top center fixed !important;
    background-size: cover !important;
    color: #888888 !important;
}

/* Restaurando a imagem para telas grandes */
@media only screen and (min-width: 2000px) {
    body {
        background: #050505 url('../img/background-2600.jpg') no-repeat top center fixed !important;
        background-size: cover !important;
    }
}

#container, .container, #wrapper, .wrapper, #content, .content {
    background-color: rgba(10, 10, 10, 0.95) !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

/* Elementos de texto - tons de cinza esfumaçado */
p, span, div, li, td, th, label {
    color: #999999  !important;
}

/* Títulos com aura mística */
h1, h2, h3, h4, h5, h6, .page-title, .panel-title {
    color: #9c59ff !important;
    text-shadow: 0 0 8px rgba(104, 24, 202, 0.7) !important;
    letter-spacing: 1px !important;
}

/* Links como portais para outros reinos */
a, a:link, a:visited {
    color: #9c59ff !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

a:hover, a:active, a:focus {
    color: #b088ff !important;
    text-shadow: 0 0 10px rgba(156, 89, 255, 0.7) !important;
}

/* Painéis e cards como janelas para o abismo */
.panel, .card, .box, .well, .jumbotron, .thumbnail, .alert, 
.panel-general, .panel-news, .panel-downloads, .panel-sidebar {
    background-color: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
}

/* Cabeçalhos de painéis como portais místicos */
.panel-heading, .card-header, .panel-title {
    background-color: rgba(20, 20, 20, 0.95) !important;
    border-bottom: 1px solid rgba(104, 24, 202, 0.3) !important;
    background-image: linear-gradient(to right, rgba(104, 24, 202, 0.1), transparent) !important;
}

/* Formulários como rituais arcanos */
input, textarea, select, .form-control {
    background-color: #111111 !important;
    border: 1px solid #333333 !important;
    color: #363434 !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
    background-color: #181818 !important;
    border: 1px solid #6818ca !important;
    box-shadow: 0 0 10px rgba(104, 24, 202, 0.7) !important;
    color: #999999 !important;
}

/* Botões como cristais mágicos */
.btn, button, input[type="button"], input[type="submit"] {
    background-color: #222222 !important;
    background-image: linear-gradient(to bottom, #222222, #181818) !important;
    border: 1px solid #333333 !important;
    color: #888888 !important;
    text-shadow: 0 1px 2px #000000 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

.btn:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7) !important;
}

/* Botões primários com energia mística */
.btn-primary, button.primary, input[type="submit"] {
    background-color: #6818ca !important;
    background-image: linear-gradient(to bottom, #6818ca, #5714a8) !important;
    border-color: #5714a8 !important;
    color: #aaaaaa !important;
    box-shadow: 0 0 10px rgba(104, 24, 202, 0.5) !important;
}

.btn-primary:hover, button.primary:hover, input[type="submit"]:hover {
    background-image: linear-gradient(to bottom, #7929db, #6818ca) !important;
    box-shadow: 0 0 15px rgba(104, 24, 202, 0.7) !important;
}

/* Tabelas como pergaminhos antigos */
table, .table {
    background-color: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

th, thead tr {
    background-color: rgba(20, 20, 20, 0.95) !important;
    color: #9c59ff !important;
    border-bottom: 2px solid #6818ca !important;
    background-image: linear-gradient(to bottom, rgba(104, 24, 202, 0.2), transparent) !important;
}

tr:nth-child(odd) {
    background-color: rgba(18, 18, 18, 0.95) !important;
}

tr:nth-child(even) {
    background-color: rgba(15, 15, 15, 0.95) !important;
}

tr:hover {
    background-color: rgba(30, 30, 30, 0.95) !important;
}

/* Navegação como caminhos no abismo */
#navbar {
    background-color: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(104, 24, 202, 0.3) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

#navbar ul li a {
    color: #888888 !important;
    text-shadow: 0 0 3px #000000 !important;
    transition: all 0.3s ease !important;
}

#navbar ul li a:hover {
    color: #aaaaaa !important;
    background-color: rgba(104, 24, 202, 0.3) !important;
    text-shadow: 0 0 8px rgba(104, 24, 202, 0.7) !important;
}

/* Rodapé como o fim do abismo */
.footer {
    background-color: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(104, 24, 202, 0.2) !important;
    color: #666666 !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.8) !important;
}

/* Painéis de notícias como proclamações do além */
.panel-news {
    background-color: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
}

.panel-news .panel-heading {
    background-color: rgba(20, 20, 20, 0.95) !important;
    border-bottom: 1px solid rgba(104, 24, 202, 0.3) !important;
    background-image: linear-gradient(to right, rgba(104, 24, 202, 0.2), transparent) !important;
}

.panel-news .panel-footer {
    background-color: rgba(10, 10, 10, 0.95) !important;
    border-top: 1px solid rgba(104, 24, 202, 0.2) !important;
    color: #666666 !important;
}

/* Rankings como tábuas de poder */
.rankings-table {
    background-color: rgba(15, 15, 15, 0.95) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
}

.rankings-table tr:first-child td {
    color: #9c59ff !important;
    border-bottom: 3px solid #6818ca !important;
    background-color: rgba(104, 24, 202, 0.2) !important;
    background-image: linear-gradient(to bottom, rgba(104, 24, 202, 0.2), transparent) !important;
}

.rankings-class-image {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    filter: brightness(1.1) contrast(1.1) !important;
}

/* Melhorando a exibição de imagens */
img {
    max-width: 100% !important;
    height: auto !important;
    transition: all 0.3s ease !important;
}

img:hover {
    filter: brightness(1.2) !important;
}

.webengine-mu-logo {
    filter: drop-shadow(0 0 10px rgba(113, 2, 249, 0.987)) !important;
}

.webengine-mu-logo:hover {
    filter: drop-shadow(0 0 15px rgba(104, 24, 202, 0.7)) brightness(1.2) !important;
    transform: scale(1.05) !important;
}

/* Efeitos de hover e interação */
.panel:hover, .card:hover, .btn:hover, a:hover, .rankings-class-image:hover {
    transform: translateY(-2px) !important;
    transition: all 0.3s ease !important;
}

/* Barra de informações do cabeçalho */
.header-info-container .header-info {
    background: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
}

/* Barra de jogadores online */
.webengine-online-bar {
    background: rgba(5, 5, 5, 0.95) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
}

.webengine-online-bar .webengine-online-bar-progress {
    background: #6818ca url('../img/online_progress_bar.jpg') no-repeat left center !important;
    box-shadow: 0 0 10px rgba(104, 24, 202, 0.7) !important;
}

/* Elementos específicos do painel de usuário */
.panel-usercp {
    background: linear-gradient(to bottom, #181818, #111111) !important;
    border: 1px solid rgba(104, 24, 202, 0.2) !important;
}

.panel-usercp ul li {
    background-color: rgba(20, 20, 20, 0.9) !important;
    border-left: 3px solid transparent !important;
    transition: all 0.3s ease !important;
}

.panel-usercp ul li:hover {
    background-color: rgba(30, 30, 30, 0.9) !important;
    border-left: 3px solid #6818ca !important;
    transform: translateX(3px) !important;
}



/* Melhorando a exibição de ícones de classe */
.rankings-class-filter-selection img {
    filter: brightness(1.1) contrast(1.1) drop-shadow(0 0 5px rgba(0, 0, 0, 0.8)) !important;
    transition: all 0.3s ease !important;
}

.rankings-class-filter-selection img:hover {
    filter: brightness(1.3) contrast(1.2) drop-shadow(0 0 8px rgba(104, 24, 202, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* Melhorando a exibição de banners */
.sidebar-banner img {
    filter: brightness(1.1) contrast(1.1) !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
}

.sidebar-banner img:hover {
    filter: brightness(1.3) contrast(1.2) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(104, 24, 202, 0.5) !important;
}

/* Animações sutis para elementos interativos */
@keyframes pulse {
    0% { box-shadow: 0 0 5px rgba(104, 24, 202, 0.5); }
    50% { box-shadow: 0 0 15px rgba(104, 24, 202, 0.7); }
    100% { box-shadow: 0 0 5px rgba(104, 24, 202, 0.5); }
}

.btn-primary:hover, .panel-title, .page-title {
    animation: pulse 2s infinite !important;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 10px !important;
    background-color: #111111 !important;
}

::-webkit-scrollbar-thumb {
    background-color: #333333 !important;
    border-radius: 5px !important;
    border: 1px solid #6818ca !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #444444 !important;
}

/* Efeito de névoa para o fundo */
body::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.7)) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Efeito de brilho para elementos importantes */
.btn-primary, .panel-title, .page-title, a:hover {
    position: relative !important;
}

.btn-primary::after, .panel-title::after, .page-title::after, a:hover::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to right, transparent, rgba(104, 24, 202, 0.2), transparent) !important;
    transform: translateX(-100%) !important;
    animation: shine 3s infinite !important;
    pointer-events: none !important;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    20% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* Melhorias para imagens específicas */
.castle-siege-block .castle-owner-panel {
    background: rgba(0, 0, 0, 0.7) url('../img/castle_owner_bg.jpg') no-repeat center center !important;
    background-size: cover !important;
}

.castle-owner-widget {
    background: rgba(0, 0, 0, 0.7) url('../img/castle_owner_bg.jpg') no-repeat center center !important;
    background-size: cover !important;
}

/* Melhorias para o logo e imagens de cabeçalho */
#header {
    padding: 80px 0px 10px 0px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 1 !important;
}

#header::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at center, rgba(104, 24, 202, 0.1), transparent) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Melhorias para imagens de perfil e avatares */
.profiles-image, .avatar-image {
    border: 2px solid rgba(104, 24, 202, 0.5) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) !important; /* Sombra mais leve */
    transition: all 0.3s ease !important;
    filter: none !important; /* Remove qualquer filtro */
    -webkit-filter: none !important;
    opacity: 1 !important;
}

.profiles-image:hover, .avatar-image:hover {
    border-color: #7303fdea !important;
    box-shadow: 0 0 20px rgba(113, 4, 245, 0.7) !important;
    transform: scale(3.03) !important;
}

/* Melhorias para imagens de itens do jogo */
.item-image, .webshop-item, .inventory-item {
    background-color: rgba(20, 20, 20, 0.9) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7) !important;
    padding: 5px !important;
    transition: all 0.3s ease !important;
}

.item-image:hover, .webshop-item:hover, .inventory-item:hover {
    background-color: rgba(30, 30, 30, 0.9) !important;
    border-color: #6818ca !important;
    box-shadow: 0 0 15px rgba(104, 24, 202, 0.5) !important;
    transform: translateY(-3px) !important;
}

/* Melhorias para ícones e imagens pequenas */
.icon-image, .small-image {
    filter: brightness(1.1) contrast(1.1) !important;
    transition: all 0.3s ease !important;
}

.icon-image:hover, .small-image:hover {
    filter: brightness(1.3) contrast(1.2) drop-shadow(0 0 5px rgba(104, 24, 202, 0.5)) !important;
    transform: scale(1.1) !important;
}

/* Melhorias para imagens de fundo de eventos */
.event-background {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
}

.event-background::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    pointer-events: none !important;
}

/* Melhorias para imagens de fundo de usercp */
.panel-usercp {
    background: #111111 url('../img/usercp_bg.jpg') no-repeat center center !important;
    background-size: cover !important;
    position: relative !important;
}

.panel-usercp::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.panel-usercp ul, .panel-usercp ul li, .panel-usercp ul li a {
    position: relative !important;
    z-index: 1 !important;
}

/* Correções para imagens específicas que podem estar quebradas */
img[src*="broken"], img:not([src]), img[src=""] {
    display: none !important;
}

/* Melhorias para imagens de gens */
.rankings-gens-img {
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8)) !important;
    transition: all 0.3s ease !important;
}

.rankings-gens-img:hover {
    filter: drop-shadow(0 0 8px rgba(104, 24, 202, 0.5)) brightness(1.2) !important;
    transform: scale(1.1) !important;
}

/* Corrigir o fundo branco em campos preenchidos automaticamente */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #1a1a1a inset !important; /* Fundo escuro para campos autofill */
    -webkit-text-fill-color: #aaaaaa !important; /* Cor do texto para campos autofill */
    transition: background-color 5000s ease-in-out 0s; /* Hack para prevenir o fundo branco */
    background-clip: content-box !important;
}

/* Firefox e outros navegadores */
@-moz-document url-prefix() {
    input:-webkit-autofill {
        background-color: #1a1a1a !important;
    }
}

/* Microsoft Edge */
input:-ms-input-placeholder:-ms-autofill {
    background-color: #1a1a1a !important;
}

/* Estilos adicionais para garantir consistência */
input[type="text"], 
input[type="password"], 
input[type="email"],
input[type="number"],
textarea,
select {
    background-color: rgba(20, 20, 20, 0.9) !important;
    color: #aaaaaa !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
}

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    background-color: rgba(25, 25, 25, 0.9) !important;
    color: #cccccc !important;
    border: 1px solid #6818ca !important;
    box-shadow: 0 0 10px rgba(104, 24, 202, 0.5) !important;
}
/* Estilos para o painel de controle do usuário com !important em todas as propriedades */
.panel-sidebar.panel-usercp,
.panel.panel-sidebar.panel-usercp,
#content .panel.panel-sidebar.panel-usercp {
    background-color: #1a1a1a !important;
    background-image: linear-gradient(to bottom, #222222, #111111) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

.panel-sidebar.panel-usercp .panel-heading,
.panel.panel-sidebar.panel-usercp .panel-heading,
#content .panel.panel-sidebar.panel-usercp .panel-heading {
    background-color: rgba(20, 20, 20, 0.95) !important;
    border-bottom: 1px solid rgba(104, 24, 202, 0.3) !important;
    background-image: linear-gradient(to right, rgba(104, 24, 202, 0.1), transparent) !important;
}

.panel-sidebar.panel-usercp .panel-body,
.panel.panel-sidebar.panel-usercp .panel-body,
#content .panel.panel-sidebar.panel-usercp .panel-body {
    background-color: rgba(15, 15, 15, 0.95) !important;
    background-image: none !important;
    padding: 10px !important;
}

.panel-sidebar.panel-usercp ul,
.panel.panel-sidebar.panel-usercp ul,
#content .panel.panel-sidebar.panel-usercp ul {
    list-style-type: none !important;
    padding: 10px !important;
    margin: 0px !important;
    background-color: transparent !important;
}

.panel-sidebar.panel-usercp ul li,
.panel.panel-sidebar.panel-usercp ul li,
#content .panel.panel-sidebar.panel-usercp ul li {
    display: block !important; 
    width: 100% !important;
    margin-bottom: 5px !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
    border-left: 3px solid transparent !important;
    background-color: rgba(30, 30, 30, 0.9) !important;
    padding: 0 !important; 
    position: relative !important; 
    height: auto !important; 
    min-height: 40px !important; 
    line-height: normal !important;
}

.panel-sidebar.panel-usercp ul li:hover,
.panel.panel-sidebar.panel-usercp ul li:hover,
#content .panel.panel-sidebar.panel-usercp ul li:hover {
    background-color: rgba(40, 40, 40, 0.9) !important;
    border-left: 3px solid #6818ca !important;
}

.panel-sidebar.panel-usercp ul li a,
.panel.panel-sidebar.panel-usercp ul li a,
#content .panel.panel-sidebar.panel-usercp ul li a {
    display: block !important;
    width: 100% !important;
    padding: 10px 10px 10px 45px !important; 
    color: #e0e0e0 !important;
    font-weight: bold !important;
    text-decoration: none !important;
    box-sizing: border-box !important; 
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important;
}

.panel-sidebar.panel-usercp ul li a:active, 
.panel-sidebar.panel-usercp ul li a:hover,
.panel.panel-sidebar.panel-usercp ul li a:active,
.panel.panel-sidebar.panel-usercp ul li a:hover,
#content .panel.panel-sidebar.panel-usercp ul li a:active,
#content .panel.panel-sidebar.panel-usercp ul li a:hover {
    color: #6818ca !important;
}

.panel-sidebar.panel-usercp ul li img,
.panel.panel-sidebar.panel-usercp ul li img,
#content .panel.panel-sidebar.panel-usercp ul li img {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 25px !important;
    height: 25px !important;
    z-index: 1 !important; 
}

.panel-sidebar.panel-usercp .panel-title,
.panel.panel-sidebar.panel-usercp .panel-title,
#content .panel.panel-sidebar.panel-usercp .panel-title {
    color: #6818ca !important;
    text-shadow: 0 0 8px rgba(104, 24, 202, 0.7) !important;
}

.panel-sidebar.panel-usercp .btn-primary,
.panel.panel-sidebar.panel-usercp .btn-primary,
#content .panel.panel-sidebar.panel-usercp .btn-primary {
    background-color: #6818ca !important;
    background-image: linear-gradient(to bottom, #6818ca, #5714a8) !important;
    border-color: #5714a8 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

.panel-sidebar.panel-usercp .btn-primary:hover,
.panel.panel-sidebar.panel-usercp .btn-primary:hover,
#content .panel.panel-sidebar.panel-usercp .btn-primary:hover {
    background-image: linear-gradient(to bottom, #7929db, #6818ca) !important;
    box-shadow: 0 0 10px rgba(104, 24, 202, 0.7) !important;
}

/* Restaurar efeitos visuais para o painel de informações do cabeçalho */
.header-info-container .header-info {
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
    text-shadow: 1px 1px 3px #000000 !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.header-info-container .header-info:hover {
    border: 1px solid rgba(104, 24, 202, 0.5) !important;
    box-shadow: 0 0 20px rgba(104, 24, 202, 0.3) !important;
}

/* Restaurar efeitos visuais para a barra de usuários online */
.webengine-online-bar {
    background: rgba(10, 10, 10, 0.7) !important;
    border: 1px solid rgba(104, 24, 202, 0.3) !important;
    height: 8px !important;
    margin: 10px 0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.webengine-online-bar:hover {
    border-color: rgba(104, 24, 202, 0.5) !important;
    box-shadow: 0 0 10px rgba(104, 24, 202, 0.3) !important;
}

.webengine-online-bar .webengine-online-bar-progress {
    height: 8px !important;
    background: #6818ca url('../img/online_progress_bar.jpg') no-repeat left center !important;
    border-radius: 0 1px 1px 0 !important;
    box-shadow: 0 0 5px rgba(104, 24, 202, 0.7) !important;
}

/* Restaurar cor para a contagem de usuários online */
.header-info-container .header-info .header-info-block .online-count {
    color: #00ff00 !important;
    font-weight: bold !important;
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
}

/* Melhorar a aparência dos horários */
.header-info-container .header-info .header-info-block #tServerTime,
.header-info-container .header-info .header-info-block #tLocalTime {
    color: #ffffff !important;
    font-weight: bold !important;
}

.header-info-container .header-info .header-info-block #tServerDate,
.header-info-container .header-info .header-info-block #tLocalDate {
    color: #cccccc !important;
    font-style: italic !important;
}

/* Melhorar a aparência dos rótulos */
.header-info-container .header-info .header-info-block .col-xs-6.text-left {
    color: #aaaaaa !important;
}

/* Efeito de transparência para a barra de navegação */
#navbar {
    background-color: rgba(10, 10, 10, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgb(113, 5, 244) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
    transition: all 0.3s ease !important;
}

#navbar:hover {
    border-bottom: 1px solid rgba(104, 24, 202, 0.5) !important;
}

#navbar ul {
    text-align: center !important;
    margin: 0px !important;
    -webkit-padding-start: 0px !important;
}

#navbar ul li {
    list-style-type: none !important;
    display: inline-block !important;
    font-size: 16px !important;
}

#navbar ul li a {
    display: inline-block !important;
    color: #cccccc !important;
    text-decoration: none !important;
    padding: 20px 30px !important;
    transition: all .3s ease !important;
    text-transform: uppercase !important;
    position: relative !important;
    overflow: hidden !important;
}

#navbar ul li a:active, 
#navbar ul li a:focus, 
#navbar ul li a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    background-color: rgba(104, 24, 202, 0.3) !important;
    text-shadow: 0 0 5px rgba(104, 24, 202, 0.7) !important;
}

/* Efeito de brilho ao passar o mouse */
#navbar ul li a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(104, 24, 202, 0.2), transparent) !important;
    transition: 0.5s !important;
}

#navbar ul li a:hover::after {
    left: 100% !important;
}

/* Indicador de item ativo */
#navbar ul li a.active {
    background-color: rgba(104, 24, 202, 0.3) !important;
    color: #ffffff !important;
    border-bottom: 2px solid #6818ca !important;
}

/* Efeito de transparência para o footer */
.footer {
    background-color: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(104, 24, 202, 0.3) !important;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.7) !important;
    transition: all 0.3s ease !important;
    color: #aaaaaa !important;
}

.footer:hover {
    border-top: 1px solid rgba(104, 24, 202, 0.5) !important;
    box-shadow: 0 -5px 20px rgba(104, 24, 202, 0.2) !important;
}

.footer a {
    color: #9c59ff !important;
    transition: all 0.3s ease !important;
}

.footer a:hover {
    color: #b088ff !important;
    text-shadow: 0 0 10px rgba(156, 89, 255, 0.7) !important;
    text-decoration: none !important;
}

.footer hr {
    border-top: 1px solid rgba(104, 24, 202, 0.2) !important;
    margin: 20px 0 !important;
}

.footer p {
    color: #777777 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

.footer-social-link {
    display: inline-block !important;
    transition: all 0.3s ease !important;
    filter: grayscale(100%) !important;
    opacity: 0.7 !important;
}

.footer-social-link:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: translateY(-5px) !important;
}

.footer-social-link img {
    transition: all 0.3s ease !important;
}

.footer-social-link:hover img {
    filter: drop-shadow(0 0 5px rgba(104, 24, 202, 0.7)) !important;
}

/* Correção para os indicadores de status online */
.online-status-indicator {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    max-width: none !important;
    height: auto !important;
}

.online-status-indicator:hover {
    filter: none !important;
    transform: none !important;
}
/* Correção específica para imagens de status online/offline */
img[src*="online.gif"],
img[src*="offline.png"],
img.online-status-indicator {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    max-width: none !important;
    width: 10px !important;
    height: 10px !important;
}

/* Garantir que não haja efeitos de hover */
img[src*="online.gif"]:hover,
img[src*="offline.png"]:hover,
img.online-status-indicator:hover {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Correção específica para imagens de status online/offline */
img[src*="online.gif"],
img[src*="offline.png"],
img.online-status-indicator {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    max-width: none !important;
    width: 5px !important;
    height: 5px !important;
}

/* Garantir que não haja efeitos de hover */
img[src*="online.gif"]:hover,
img[src*="offline.png"]:hover,
img.online-status-indicator:hover {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    border: none !important;
    box-shadow: none !important;
}