/* 
    Document   : admin css
    Author     : Internet-Commerce TREINAMENTO
    Description:
        Formata o painel admin do projeto do curso de PHP OO da Internet-Commerce.
*/

/*supremo css*/


/*botoes do site no geral:*/
/* Estilo base para todos os botões */
button {
    display: inline-block;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    margin: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

/* Cores para cada tipo de botão */
button.btn-primary {
    background-color: #007bff;
    color: white;
}

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

button.btn-warning {
    background-color: #ffc107;
    color: #212529;
}

button.btn-warning:hover {
    background-color: #e0a800;
}

button.btn-secondary {
    background-color: #6c757d;
    color: white;
}

button.btn-secondary:hover {
    background-color: #5a6268;
}

button.btn-danger {
    background-color: #dc3545;
    color: white;
}

button.btn-danger:hover {
    background-color: #c82333;
}

button.btn-default {
    background-color: #f8f9fa;
    color: #212529;
}

button.btn-default:hover {
    background-color: #e2e6ea;
}

/* Ícones dentro dos botões */
button i {
    margin-right: 5px;
}

/* Organização responsiva */
.buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 15px 0;
}

/* Ajustes para mobile */
@media (max-width: 1280px) {
    button {
        width: 100%; /* Botões ocupam a largura total */
        text-align: center;
    }

    .buttons-container {
        flex-direction: column;
        align-items: center;
    }
}
/*css do separador gpt plus*/
/* Estilos específicos desta página */
.st-body {
    padding: 20px;
    background-color: #f8f9fa;
}

.st-textarea {
    resize: none;
}

.st-block {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
}

.st-copy-btn {
    position: absolute;
    right: 15px;
    top: 15px;
    padding: 5px 10px;
    font-size: 12px;
}

.st-nav-link {
    color: #fff !important;
}

.st-alert {
    display: none;
}

.st-copied {
    border: 2px solid #28a745;
    background-color: #e8f5e9;
}


.result-item {
    background-color: white;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    position: relative;
}
.result-item:hover {
    background-color: #f8f9fa;
}
.copy-button {
    background-color: #007bff;
    color: white;
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}
.copy-button:hover {
    background-color: #0056b3;
}
.copy-message {
    color: #28a745;
    margin-top: 5px;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background-color: white;
    padding: 5px;
    border: 1px solid #28a745;
    border-radius: 4px;
}
.suggestions-list {
    display: none;
    /* Esconde a lista inicialmente */
    position: absolute;
    top: calc(100% + 2px);
    /* Coloca a lista logo abaixo do input */
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 500px;
    /* Limita altura máxima */
    overflow-y: auto;
    /* Adiciona rolagem se necessário */
    z-index: 1000;
}

.suggestions-list li {
    padding: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
    /* Transição suave para a cor de fundo e texto */
}

/* Efeito de hover padrão */
.suggestions-list li:hover {
    background-color: #007bff;
    /* Cor de fundo ao passar o mouse */
    color: #fff;
    /* Cor do texto ao passar o mouse */
}
/* Ajustando tamanho do modal */
#verticalycenteredk .modal-dialog {
    max-width: 700px;
    /* Aumenta a largura */
}

/* Cabeçalho mais destacado */
#verticalycenteredk .modal-header {
    background-color: #f8d7da;
    /* Cor de alerta */
    color: #721c24;
    /* Texto em vermelho escuro para contraste */
}

/* Corpo do modal */
#verticalycenteredk .modal-body {
    font-size: 1.1em;
    /* Aumenta um pouco o tamanho da fonte */
    padding: 20px;
    /* Mais espaçamento */
}

/* Botões com tamanho maior */
#verticalycenteredk .btn {
    padding: 12px 20px;
    /* Botões maiores */
    font-size: 1em;
}
@media (max-width: 1000px) {
    .btn i {
        display: inline-block;
        /* Garante que o ícone seja exibido */
    }

    .btn span {
        display: none;
        /* Esconde o texto */
    }
}
#floatingAlert {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 20px;
    z-index: 1000;
    /* Garante que o aviso fique acima de outros elementos */
}

.banner-container {
    padding: 10px;
    /* Espaçamento interno do banner */
    background-color: #ffffff;
    /* Fundo branco para os banners */
    border-radius: 0.5rem;
    /* Bordas arredondadas dos banners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Sombra suave para os banners */
}

.banner-container img {
    max-width: 100%;
    /* Garantir que as imagens não excedam o tamanho do container */
    border-radius: 0.5rem;
    /* Bordas arredondadas para as imagens */
}

@media (max-width: 1280px) {
    .card-body {
        padding: 1rem;
        /* Ajuste do padding para telas menores */
    }
}
/*.card {
    border: none;
     Remove a borda padrão do card 
    border-radius: 0.5rem;
     Bordas arredondadas 
    background-color: #f8f9fa;
     Cor de fundo suave 
}*/
.dark-mode .card{
    background-color: #333 !important;
}
.ads-centro{
    margin: 20px;
}
.breadcrumb{
    margin: 10px;
}
.card-custom {
    margin: -20px; /* Remove as margens */
    padding: -20px; /* Remove o espaçamento interno */
    width: 100%; /* Faz o card ocupar toda a largura */
}

@media (max-width: 1280px) {
    .card-custom {
        width: 100% !important;
        margin: -20px; /* Garante que não há margens no mobile */
        padding: 20px; /* Remove paddings adicionais (valores negativos não são válidos para padding) */
    }
}

.custom-card {
    border: none;
    border-radius: 0.5rem;
    background-color: #f9f9f9;
    /* Cor de fundo suave */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra para profundidade */
    margin: 1rem 0;
    /* Margem para separação */
}

.custom-card-body {
    padding: 1.5rem;
    /* Padding interno */
}

.custom-card-title {
    font-weight: bold;
    /* Título em negrito */
    color: #333;
    /* Cor do texto */
    margin-bottom: 1rem;
    /* Margem abaixo do título */
}

.view-link {
    font-size: 0.9rem;
    /* Tamanho do texto reduzido */
    color: #007bff;
    /* Cor azul para o link */
    cursor: pointer;
    /* Indica que é clicável */
}

.custom-title {
    font-size: 1.2rem;
    /* Tamanho do título do aviso */
    color: #444;
    /* Cor do texto */
    margin-top: 1rem;
    /* Margem acima do título */
}

.custom-embed-responsive {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.custom-embed-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.custom-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    /* Margem acima do botão */
    padding: 0.5rem 1rem;
    /* Padding do botão */
    background-color: #28a745;
    /* Cor verde */
    color: white;
    /* Cor do texto */
    text-decoration: none;
    /* Remover underline */
    border-radius: 0.25rem;
    /* Bordas arredondadas */
    transition: background-color 0.3s ease;
    /* Transição suave */
}

.custom-btn:hover {
    background-color: #218838;
    /* Cor verde escuro ao passar o mouse */
}

.custom-text {
    color: #666;
    /* Cor do texto */
    margin-top: 0.5rem;
    /* Margem acima do texto */
}
/*preços da home page coinflix e cursos vip*/
.price-container {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #FF5722; /* Cor vibrante para chamar a atenção */
    display: inline-block;
    background: #f9f9f9; /* Fundo suave */
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.currency-symbol {
    font-size: 18px;
    vertical-align: top;
    margin-right: 5px;
}

.price {
    font-size: 28px;
}
/* Estilo básico para o botão de switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
}

/* O "slider" (a parte deslizante do switch) */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Estilo do slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

/* O círculo do slider */
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    border-radius: 50%;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

/* Quando o switch está ativo (modo escuro) */
input:checked + .slider {
    background-color: #4caf50;
}

/* Quando o círculo está movendo para a posição "ligada" */
input:checked + .slider:before {
    transform: translateX(20px);
}

/* Exibir ícone da lua no modo claro */
#darkModeToggle:not(:checked) + .slider + #modeLabel #moonIcon {
    display: inline-block;
}

/* Esconder ícone da lua no modo escuro */
#darkModeToggle:checked + .slider + #modeLabel #moonIcon {
    display: none;
}

/* Exibir ícone do sol no modo escuro */
#darkModeToggle:checked + .slider + #modeLabel #sunIcon {
    display: inline-block;
}

/* Esconder ícone do sol no modo claro */
#darkModeToggle:not(:checked) + .slider + #modeLabel #sunIcon {
    display: none;
}
/* Ignorar dark-mode e manter o estilo inline para os botões com fundo e cor definidos */
.dark-mode a.btn-light[style*="background-color: #FF6600"] {
    background-color: #FF6600 !important;
    color: white !important;
}

.dark-mode a.btn-light[style*="background-color: #00FF00"] {
    background-color: #00FF00 !important;
    color: black !important;
}

.dark-mode a.btn-light[style*="background-color: #8A2BE2"] {
    background-color: #8A2BE2 !important;
    color: white !important;
}

.dark-mode a.btn-light[style*="background-color: #FF6600"][style*="color: white"] {
    background-color: #FF6600 !important;
    color: white !important;
}

.dark-mode a.btn-light[style*="background-color: #d63384"] {
    background-color: #d63384 !important;
    color: white !important;
}

/* Classic (sem tema): garantir texto branco nos botões escuros do cabeçalho */
body:not(.tema-youtube):not(.dark-mode) a.btn-light[style*="background-color: #FF6600"],
body:not(.tema-youtube):not(.dark-mode) a.btn-light[style*="background-color: #8A2BE2"],
body:not(.tema-youtube):not(.dark-mode) a.btn-light[style*="background-color: #d63384"],
body:not(.tema-youtube):not(.dark-mode) a.btn-light[style*="background-color:#ff"],
body:not(.tema-youtube):not(.dark-mode) a.btn-light[style*="background:#ff"] {
    color: #ffffff !important;
}
/* Exceção para o verde vibrante no Classic */
body:not(.tema-youtube):not(.dark-mode) a.btn-light[style*="background-color: #00FF00"] {
    color: #000000 !important;
}
/* Herdar cor para ícone e texto interno no Classic */
body:not(.tema-youtube):not(.dark-mode) a.btn-light[style*="background-color"] i,
body:not(.tema-youtube):not(.dark-mode) a.btn-light[style*="background-color"] span {
    color: inherit !important;
}

/* Estilos para o dark mode */
.dark-mode .card.border-light {
    background-color: #333 !important;
    /* Fundo escuro para o modo escuro */
    border-color: #444 !important;
    /* Borda um pouco mais clara para contraste */
}

.dark-mode .card.border-light .card-title,
.dark-mode .card.border-light .text-dark,
.dark-mode .card.border-light .btn-outline-primary {
    color: #ffffff !important;
    /* Texto branco para boa visibilidade */
    border-color: #ffffff !important;
    /* Bordas do botão em branco */
}

/* Estilos para o modo claro */
.card.border-light {
    background-color: #ffffff;
    /* Fundo claro no modo normal */
    border-color: #ddd;
    /* Borda leve */
}

.card.border-light .card-title,
.card.border-light .text-dark,
.card.border-light .btn-outline-primary {
    color: #212529;
    /* Texto padrão no modo claro */
    border-color: #212529;
    /* Borda do botão padrão */
}
/* Estilo para o elemento flutuante */
#elemento-flutuante {
    position: fixed;
    bottom: 14%; /* 5% da altura da tela até o rodapé */
    left: 50%;
    transform: translateX(-50%);
    background-color: red;
    color: white;
    z-index: 9;
    max-width: 90%; /* Largura máxima de 90% da largura da tela */
    padding: 10px; /* Aumentei um pouco o padding para melhorar a aparência responsiva */
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}


#youtube-form {
    display: flex;
    flex-wrap: wrap;
}

#youtube-form label {
    width: 100%;
}

#youtube-form input[type="text"],
#youtube-form select {
    flex: 1;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#youtube-form button[type="submit"] {
    flex-basis: 100%;
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#youtube-form button[type="submit"]:hover {
    background-color: #3e8e41;
}


label {
    display: block;
    margin-bottom: 10px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}
select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}

button[type="submit"] {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #3e8e41;
}

#video-list {
    margin-top: 20px;
}

.video-url {
    margin-bottom: 10px;
}

.video-url a {
    text-decoration: none;
    color: #337ab7;
}

.video-url a:hover {
    color: #23527c;
}
.vid {
    float: left;
    margin: 10px; /* Ajuste conforme necessário */
    width: calc(25% - 20px); /* Ajuste a porcentagem e subtraia o dobro da margem */
}

.container_vid {
    overflow: hidden;
}
#recomecar-btn {
    display: none;
    background-color: orange;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
}
.vid-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: flex-start;
}
.vid {
    flex: 1 1 200px; /* Define uma largura mínima para os vídeos */
    max-width: 200px; /* Define a largura máxima dos vídeos */
    box-sizing: border-box;
}
.vid iframe {
    width: 100%;
    height: 130px; /* Define a altura dos iframes */
}
.vid button {
    width: 100%;
    margin-top: 5px;
}
/*menu do botao direito do mouse*/
.unique-context-menu {
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: none;
    z-index: 1000;
    width: 200px;
}
.unique-context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.unique-context-menu li {
    padding: 8px 12px;
    cursor: pointer;
}
.unique-context-menu li:hover {
    background-color: #f0f0f0;
}

.random-gradient {
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    /*transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;*/
}

.random-gradient:hover {
    /*transform: scale(1.05);*/
}
#google_translate_element {
    display: none;
}

table.goog-te-banner-frame {
    display: none;
}

.notification-item {
    /* Estilos para o item da notificação */
}

.notification-content {
    display: flex;
    align-items: flex-start;
    /* Estilos para o conteúdo da notificação */
}

.notification-icon {
    /* Estilos para o ícone da notificação */
    margin-right: 10px;
}

.notification-details {
    /* Estilos para os detalhes da notificação */
}

.notification-date {
    color: #777; /* Cor da data da notificação */
    font-size: 14px; /* Tamanho da fonte da data da notificação */
}

.notifications {
    max-height: 720px; /* Set a max height for the dropdown */
    overflow-y: auto; /* Enable vertical scrolling */
}

.notification-container {
    max-height: 720px; /* Set a max height for the notification container */
    overflow-y: auto; /* Enable vertical scrolling within the container */
    padding: 10px; /* Add padding for better styling */
}

.btn-1 {
    background: rgb(6,14,131);
    background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
    border: none;
}
.btn-1:hover {
    background: rgb(0,3,255);
    background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
}

/* 2 */
.btn-2 {
    background: rgb(96,9,240);
    background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
    border: none;

}
.btn-2:before {
    height: 0%;
    width: 2px;
}
.btn-2:hover {
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
        -4px -4px 6px 0 rgba(116, 125, 136, .5),
        inset -4px -4px 6px 0 rgba(255,255,255,.2),
        inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
}


/* 3 */
.btn-3 {
    background: rgb(0,172,238);
    background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
    width: 130px;
    height: 40px;
    line-height: 42px;
    padding: 0;
    border: none;

}
.btn-3 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.btn-3:before,
.btn-3:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    background: rgba(2,126,251,1);
    /*transition: all 0.3s ease;*/
}
.btn-3:before {
    height: 0%;
    width: 2px;
}
.btn-3:after {
    width: 0%;
    height: 2px;
}
.btn-3:hover{
    background: transparent;
    box-shadow: none;
}
.btn-3:hover:before {
    height: 100%;
}
.btn-3:hover:after {
    width: 100%;
}
.btn-3 span:hover{
    color: rgba(2,126,251,1);
}
.btn-3 span:before,
.btn-3 span:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    background: rgba(2,126,251,1);
    /*transition: all 0.3s ease;*/
}
.btn-3 span:before {
    width: 2px;
    height: 0%;
}
.btn-3 span:after {
    width: 0%;
    height: 2px;
}
.btn-3 span:hover:before {
    height: 100%;
}
.btn-3 span:hover:after {
    width: 100%;
}

/* 4 */
.btn-4 {
    background-color: #4dccc6;
    background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
    line-height: 42px;
    padding: 0;
    border: none;
}
.btn-4:hover{
    background-color: #89d8d3;
    background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}
.btn-4 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.btn-4:before,
.btn-4:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),
        -4px -4px 6px 0 rgba(116, 125, 136, .2),
        inset -4px -4px 6px 0 rgba(255,255,255,.9),
        inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
    transition: all 0.3s ease;
}
.btn-4:before {
    height: 0%;
    width: .1px;
}
.btn-4:after {
    width: 0%;
    height: .1px;
}
.btn-4:hover:before {
    height: 100%;
}
.btn-4:hover:after {
    width: 100%;
}
.btn-4 span:before,
.btn-4 span:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),
        -4px -4px 6px 0 rgba(116, 125, 136, .2),
        inset -4px -4px 6px 0 rgba(255,255,255,.9),
        inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
    transition: all 0.3s ease;
}
.btn-4 span:before {
    width: .1px;
    height: 0%;
}
.btn-4 span:after {
    width: 0%;
    height: .1px;
}
.btn-4 span:hover:before {
    height: 100%;
}
.btn-4 span:hover:after {
    width: 100%;
}

/* 5 */
.btn-5 {
    width: 130px;
    height: 40px;
    line-height: 42px;
    padding: 0;
    border: none;
    background: rgb(255,27,0);
    background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
}
.btn-5:hover {
    color: #f0094a;
    background: transparent;
    box-shadow:none;
}
.btn-5:before,
.btn-5:after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    height:2px;
    width:0;
    background: #f0094a;
    box-shadow:
        -1px -1px 5px 0px #fff,
        7px 7px 20px 0px #0003,
        4px 4px 5px 0px #0002;
    transition:400ms ease all;
}
.btn-5:after{
    right:inherit;
    top:inherit;
    left:0;
    bottom:0;
}
.btn-5:hover:before,
.btn-5:hover:after{
    width:100%;
    transition:800ms ease all;
}


/* 6 */
.btn-6 {
    background: rgb(247,150,192);
    background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
}
.btn-6 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.btn-6:before,
.btn-6:after {
    position: absolute;
    content: "";
    height: 0%;
    width: 1px;
    box-shadow:
        -1px -1px 20px 0px rgba(255,255,255,1),
        -4px -4px 5px 0px rgba(255,255,255,1),
        7px 7px 20px 0px rgba(0,0,0,.4),
        4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-6:before {
    right: 0;
    top: 0;
    transition: all 500ms ease;
}
.btn-6:after {
    left: 0;
    bottom: 0;
    transition: all 500ms ease;
}
.btn-6:hover{
    background: transparent;
    color: #76aef1;
    box-shadow: none;
}
.btn-6:hover:before {
    transition: all 500ms ease;
    height: 100%;
}
.btn-6:hover:after {
    transition: all 500ms ease;
    height: 100%;
}
.btn-6 span:before,
.btn-6 span:after {
    position: absolute;
    content: "";
    box-shadow:
        -1px -1px 20px 0px rgba(255,255,255,1),
        -4px -4px 5px 0px rgba(255,255,255,1),
        7px 7px 20px 0px rgba(0,0,0,.4),
        4px 4px 5px 0px rgba(0,0,0,.3);
}
.btn-6 span:before {
    left: 0;
    top: 0;
    width: 0%;
    height: .5px;
    transition: all 500ms ease;
}
.btn-6 span:after {
    right: 0;
    bottom: 0;
    width: 0%;
    height: .5px;
    transition: all 500ms ease;
}
.btn-6 span:hover:before {
    width: 100%;
}
.btn-6 span:hover:after {
    width: 100%;
}

/* 7 */
.btn-7 {
    background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
    line-height: 42px;
    padding: 0;
    border: none;
}
.btn-7 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.btn-7:before,
.btn-7:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    background: rgba(251,75,2,1);
    box-shadow:
        -7px -7px 20px 0px rgba(255,255,255,.9),
        -4px -4px 5px 0px rgba(255,255,255,.9),
        7px 7px 20px 0px rgba(0,0,0,.2),
        4px 4px 5px 0px rgba(0,0,0,.3);
    transition: all 0.3s ease;
}
.btn-7:before{
    height: 0%;
    width: 2px;
}
.btn-7:after {
    width: 0%;
    height: 2px;
}
.btn-7:hover{
    color: rgba(251,75,2,1);
    background: transparent;
}
.btn-7:hover:before {
    height: 100%;
}
.btn-7:hover:after {
    width: 100%;
}
.btn-7 span:before,
.btn-7 span:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: rgba(251,75,2,1);
    box-shadow:
        -7px -7px 20px 0px rgba(255,255,255,.9),
        -4px -4px 5px 0px rgba(255,255,255,.9),
        7px 7px 20px 0px rgba(0,0,0,.2),
        4px 4px 5px 0px rgba(0,0,0,.3);
    transition: all 0.3s ease;
}
.btn-7 span:before {
    width: 2px;
    height: 0%;
}
.btn-7 span:after {
    height: 2px;
    width: 0%;
}
.btn-7 span:hover:before {
    height: 100%;
}
.btn-7 span:hover:after {
    width: 100%;
}

/* 8 */
.btn-8 {
    background-color: #f0ecfc;
    background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
    line-height: 42px;
    padding: 0;
    border: none;
}
.btn-8 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.btn-8:before,
.btn-8:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    background: #c797eb;
    /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
      inset -4px -4px 6px 0 rgba(255,255,255,.5),
      inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
    transition: all 0.3s ease;
}
.btn-8:before{
    height: 0%;
    width: 2px;
}
.btn-8:after {
    width: 0%;
    height: 2px;
}
.btn-8:hover:before {
    height: 100%;
}
.btn-8:hover:after {
    width: 100%;
}
.btn-8:hover{
    background: transparent;
}
.btn-8 span:hover{
    color: #c797eb;
}
.btn-8 span:before,
.btn-8 span:after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background: #c797eb;
    /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
      inset -4px -4px 6px 0 rgba(255,255,255,.5),
      inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
    transition: all 0.3s ease;
}
.btn-8 span:before {
    width: 2px;
    height: 0%;
}
.btn-8 span:after {
    height: 2px;
    width: 0%;
}
.btn-8 span:hover:before {
    height: 100%;
}
.btn-8 span:hover:after {
    width: 100%;
}


/* 9 */
.btn-9 {
    border: none;
    transition: all 0.3s ease;
    overflow: hidden;
}
.btn-9:after {
    position: absolute;
    content: " ";
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1fd1f9;
    background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
    transition: all 0.3s ease;
}
.btn-9:hover {
    background: transparent;
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
        -4px -4px 6px 0 rgba(116, 125, 136, .2),
        inset -4px -4px 6px 0 rgba(255,255,255,.5),
        inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
    color: #fff;
}
.btn-9:hover:after {
    -webkit-transform: scale(2) rotate(180deg);
    transform: scale(2) rotate(180deg);
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
        -4px -4px 6px 0 rgba(116, 125, 136, .2),
        inset -4px -4px 6px 0 rgba(255,255,255,.5),
        inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
}

/* 10 */
.btn-10 {
    background: rgb(22,9,240);
    background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
    overflow: hidden;
}
.btn-10:after {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    -webkit-transform: scale(.1);
    transform: scale(.1);
}
.btn-10:hover {
    color: #fff;
    border: none;
    background: transparent;
}
.btn-10:hover:after {
    background: rgb(0,3,255);
    background: linear-gradient(0deg, rgba(2,126,251,1) 0%,  rgba(0,3,255,1)100%);
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* 11 */
.btn-11 {
    border: none;
    background: rgb(251,33,117);
    background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
    color: #fff;
    overflow: hidden;
}
.btn-11:hover {
    text-decoration: none;
    color: #fff;
}
.btn-11:before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: shiny-btn1 3s ease-in-out infinite;
}
.btn-11:hover{
    opacity: .7;
}
.btn-11:active{
    box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
        -4px -4px 6px 0 rgba(116, 125, 136, .2),
        inset -4px -4px 6px 0 rgba(255,255,255,.2),
        inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
}


@-webkit-keyframes shiny-btn1 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}


/* 12 */
.btn-12{
    position: relative;
    right: 20px;
    bottom: 20px;
    border:none;
    box-shadow: none;
    width: 130px;
    height: 40px;
    line-height: 42px;
    -webkit-perspective: 230px;
    perspective: 230px;
}
.btn-12 span {
    background: rgb(0,172,238);
    background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
    display: block;
    position: absolute;
    width: 130px;
    height: 40px;
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
        7px 7px 20px 0px rgba(0,0,0,.1),
        4px 4px 5px 0px rgba(0,0,0,.1);
    border-radius: 5px;
    margin:0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.btn-12 span:nth-child(1) {
    box-shadow:
        -7px -7px 20px 0px #fff9,
        -4px -4px 5px 0px #fff9,
        7px 7px 20px 0px #0002,
        4px 4px 5px 0px #0001;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
}
.btn-12 span:nth-child(2) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
}
.btn-12:hover span:nth-child(1) {
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
        7px 7px 20px 0px rgba(0,0,0,.1),
        4px 4px 5px 0px rgba(0,0,0,.1);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.btn-12:hover span:nth-child(2) {
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
        7px 7px 20px 0px rgba(0,0,0,.1),
        4px 4px 5px 0px rgba(0,0,0,.1);
    color: transparent;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}


/* 13 */
.btn-13 {
    background-color: #89d8d3;
    background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
    border: none;
    z-index: 1;
}
.btn-13:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    border-radius: 5px;
    background-color: #4dccc6;
    background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
    box-shadow:
        -7px -7px 20px 0px #fff9,
        -4px -4px 5px 0px #fff9,
        7px 7px 20px 0px #0002,
        4px 4px 5px 0px #0001;
    transition: all 0.3s ease;
}
.btn-13:hover {
    color: #fff;
}
.btn-13:hover:after {
    top: 0;
    height: 100%;
}
.btn-13:active {
    top: 2px;
}


/* 14 */
.btn-14 {
    background: rgb(255,151,0);
    border: none;
    z-index: 1;
}
.btn-14:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 5px;
    background-color: #eaf818;
    background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
        7px 7px 20px 0px rgba(0, 0, 0, 0.1),
        4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.btn-14:hover {
    color: #000;
}
.btn-14:hover:after {
    top: auto;
    bottom: 0;
    height: 100%;
}
.btn-14:active {
    top: 2px;
}

/* 15 */
.btn-15 {
    background: #b621fe;
    border: none;
    z-index: 1;
}
.btn-15:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background-color: #663dff;
    border-radius: 5px;
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
        7px 7px 20px 0px rgba(0,0,0,.1),
        4px 4px 5px 0px rgba(0,0,0,.1);
    transition: all 0.3s ease;
}
.btn-15:hover {
    color: #fff;
}
.btn-15:hover:after {
    left: 0;
    width: 100%;
}
.btn-15:active {
    top: 2px;
}


/* 16 */
.btn-16 {
    border: none;
    color: #000;
}
.btn-16:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    direction: rtl;
    z-index: -1;
    box-shadow:
        -7px -7px 20px 0px #fff9,
        -4px -4px 5px 0px #fff9,
        7px 7px 20px 0px #0002,
        4px 4px 5px 0px #0001;
    transition: all 0.3s ease;
}
.btn-16:hover {
    color: #000;
}
.btn-16:hover:after {
    left: auto;
    right: 0;
    width: 100%;
}
.btn-16:active {
    top: 2px;
}

.custom-btn {
    display: inline-block;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

#floating-element {
    position: fixed;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #ff9900, #e74c3c) !important; /* Degrade de cores */

    color: #fff;
    padding: 18px 32px;
    border-radius: 40px;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    z-index: 999;
    overflow: hidden;
    white-space: nowrap;
}

#floating-element:hover {
    background: linear-gradient(to right, #e74c3c, #ff9900) !important; /* Degrade de cores no hover */
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
}

#floating-element i {
    margin-right: 8px;
}
#close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
/*//CSS BANNER FLUTUANTE*/
.highlight-text {
    font-size: 18px;
    /*font-weight: bold;*/
    position: relative;
}

.highlight-text::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #007bff; /* Cor de destaque */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease-in-out;
}

.highlight-text.highlighted::before {
    transform: scaleX(1);
}



.disabled-link {
    /*pointer-events: none !important;  Impede interações de clique */
    color: gray !important; /* Define a cor do texto como cinza */
    text-decoration: none !important; /* Remove sublinhado */
    /*cursor: not-allowed !important;  Define o cursor como "não permitido" */
    display: inline-block; /* Torna o contêiner ocupar apenas o espaço do conteúdo */
}

/* Opcionalmente, você pode adicionar estilos específicos para o link dentro do contêiner */
.disabled-link a {
    color: gray !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

#conteudo{
    /* margin:0 auto;
     width:1000px; 
     height:800px;
     background-color:#DDD;	*/
}
#banner{
    position:fixed;
    top:100px;
    left:0;
    float:left;
    /*width:650px;  largura */
    /* altura */
    background-color:#0066CC; /* cor de fundo */
    -webkit-border-radius: 8px; /* canto arredondado */
    -moz-border-radius: 8px; /* canto arredondado */
    border-radius: 8px; /* canto arredondado */
    z-index:999999; /* posicionando sobre os demais */
    display:none;
    color:#FFFFFF;
}
#banner a{
    color:#FFFFFF;
    text-decoration:none
}
/*                    #banner p {
                        padding: 5px 10px 0;
                    }*/
p.link{
    text-align:center;
    clear:both
}
#fechar{
    position:fixed;
    float:right;
    width:20px;
    height:20px;
    background-color:#000000;
    color:#FFFFFF;
    text-align:center;
}
/*FIM DO AVISANDO*/
.youtube-thumbnail {
    position: relative;
    /* Defina o tamanho máximo da thumbnail (opcional) */
}
.play-icon {
    width: 120px; /* Defina o tamanho do ícone de play (ajuste conforme necessário) */
    height: 120px;
    background-image: url("https://gatocoin.com/img/play.png"); /* URL da imagem do ícone de play */
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Estilos para o texto dos comentários */
.comment-text {
    color: #1c1e21; /* Cor do texto dos comentários */
    font-size: 16px; /* Tamanho da fonte dos comentários */
    line-height: 1.5; /* Altura da linha dos comentários */
}

.comment-text a {
    color: #385898; /* Cor dos links nos comentários */
    text-decoration: none; /* Remover sublinhado nos links dos comentários */
}

.comment-text a:hover {
    text-decoration: underline; /* Sublinhar o link quando o mouse estiver sobre ele */
}

.comment-container {
    margin-top: 20px;
    width: 100%;
}

.comment {
    margin-bottom: 10px;
}
.comment strong {
    /*font-weight: bold;*/
}
.comment p {
    margin: 5px 0;
}
.comment p {
    margin: 5px 10px; /* Margem de 5px na parte superior e inferior, 10px à esquerda e à direita */
}


/* Estilos para os comentários */
.comment {

    padding: 10px;
    margin-bottom: 10px;
}

.comment strong {
    display: block;
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
    /*font-weight: bold;*/
    margin-bottom: 5px;
}

.comment p {
    margin: 5px 0;
}

/* Estilos para as respostas */
.reply {
    border: 1px solid #f0f0f0;
    padding: 8px;
    margin-left: 20px;
}

.reply strong {
    display: block;
    background-color: #f0f0f0;
    padding: 5px;
    border-radius: 5px;
    /*font-weight: bold;*/
    margin-bottom: 5px;
}

.reply p {
    margin: 5px 0;
}
.reply2{
    margin-left: 40px !important;
}
.resposta {
    display: none;
}

/*comentarios*/
/*PERFIL DO USUARIO*/
/* Profile Header Styles */
.profile-header {
    position: relative;
    padding: 20px;
    background-color: #f0f2f5;
}

.cover-photo {
    height: 200px;
    background-size: cover;
    background-position: center;
    margin-bottom: 20px;
}

.profile-picture {
    width: 150px;
    height: 150px;
    border: 5px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 120px;
    left: 20px;
}

.user-info {
    display: flex;
    align-items: flex-start; /* Align items to the left */
    margin-bottom: 20px;
    margin-left: 200px;
}

.user-name {
    font-size: 24px;
    color: #333;
    margin-right: 10px;
}

.user-arroba {
    font-size: 16px;
    color: #555;
}

.follow-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 8px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

/* User Posts Styles */
.user-posts .card {
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    text-decoration: none !important; /* Remover sublinhado padrão */
}
/*link de perfil*/
/* Estilos padrão para links */
.linkperfil {
    color: black !important; /* Cor do texto */
    text-decoration: none !important; /* Remover sublinhado padrão */
    font-size: 16px !important; /* Tamanho da fonte */
}
.like-btn{
    color:#999;
    text-decoration: none !important; /* Remover sublinhado padrão */
}
a .like-btn{
    text-decoration: none !important; /* Remover sublinhado padrão */
}
a .like-btn:hover{
    border-bottom: 1px solid black !important; /* Adicionar traço na parte inferior */
}
a .share-btn:hover{
    border-bottom: 1px solid black !important; /* Adicionar traço na parte inferior */
}
.engajamentos-text{
    color: #999;
    text-decoration: none !important; /* Remover sublinhado padrão */
    padding: 4px;
}
.comment-btn{
    color: #999;
    text-decoration: none !important; /* Remover sublinhado padrão */
}
.share-btn{
    color: #999;
    text-decoration: none !important; /* Remover sublinhado padrão */
}
a .comment-btn{
    text-decoration: none !important; /* Remover sublinhado padrão */
}
a .share-btn{
    text-decoration: none !important; /* Remover sublinhado padrão */
}
a .comment-btn:hover{
    border-bottom: 1px solid black !important; /* Adicionar traço na parte inferior */
}
/* Efeito ao passar o mouse */
.linkperfil:hover {
    border-bottom: 1px solid black !important; /* Adicionar traço na parte inferior */
}

/* Estilos padrão para links */
a .linkperfil {
    color: black; /* Cor do texto */
    text-decoration: none; /* Remover sublinhado padrão */
    font-size: 16px !important; /* Tamanho da fonte */
    cursor: pointer !important;
}

/* Efeito ao passar o mouse */
a .linkperfil:hover {
    border-bottom: 1px solid black !important; /* Adicionar traço na parte inferior */
}

/*redes social*/
.post-card{
    padding: 10px;
}
/* Estilo para o container da mídia (imagem ou vídeo) */.post-media-container {
    position: relative;
    max-height: 400px !important; /* Mantém a altura máxima */
    overflow: hidden;
    width: 400px !important; /* Define largura fixa no desktop */
    margin: 0 auto; /* Centraliza no desktop */
}

/* Para telas menores (mobile) */
@media (max-width: 768px) {
    .post-media-container {
        width: 100% !important; /* Ocupa toda a largura da tela */
        max-width: none !important; /* Remove qualquer restrição de tamanho */
    }
}
@media(max-width: 1024px){
    .celularpost{
    width:100% !important;
    }
}

/* Estilo para a mídia (imagem ou vídeo) dentro do container */
.post-media-container img {
    width: 100% !important;
    height: auto;
    transition: transform 0.3s ease;
}

/* Estilo para a mídia (imagem ou vídeo) ao passar o mouse sobre ela */
.post-media-container:hover img {
    transform: scale(1.1); /* Aumenta o tamanho em 10% ao passar o mouse */
}

/* Estilo para a mídia (imagem ou vídeo) ao passar o mouse sobre ela */
.post-media-container:hover::before {
    transform: scale(1.1); /* Aumenta o tamanho em 10% ao passar o mouse */
}

/* Estilo para a mídia (imagem ou vídeo) dentro do container */
.post-media-container::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 468px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: transform 0.3s ease;
}

/* Estilo para o contêiner do iframe do YouTube */
.youtube-iframe-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporção para manter a relação de aspecto 16:9 (dividindo 9 por 16) */
    height: 0;
    overflow: hidden;
}

/* Estilo para o iframe do YouTube */
.youtube-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*rede social*/
.card-link {
    cursor: pointer; /* This will change the cursor to a pointer (hand) */
}
.liked {
    background-color: transparent;
    color: #06F !important;
    padding: 5px 10px;
    border-radius: 5px;
    margin-right: 5px;
}
/*classes do seguir e seguindo*/
/* Botão Seguir */

/*classes do seguir e seguindo*/

/*botoes movendo*/
#MYBUTTONS {
    display: none;
    /*    position: absolute;*/
    /*    top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;*/
}

@media screen and (min-width: 990px) {
    #MYBUTTONS {
        /*position: static;*/
    }
}

@media screen and (max-width: 400px) {
    #MYBUTTONS {
        /*position: fixed;*/
    }
}
/*############################### div flutuante views recebidas #########################*/

.btn-maximize {
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    /*font-weight: bold;*/
    padding: 10px 16px;
    cursor: pointer;
}

.btn-maximize:hover {
    background-color: #0069d9;
}

.btn-maximize:focus {
    box-shadow: none;
}

.btn-maximize i {
    font-size: 20px;
    margin-right: 8px;
}

.btn-maximize:before {
    content: "\f2d0";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
}

.btn-maximize:active:before {
    transform: scale(0.9);
}



/*fim de maximizar*/

.ativa2, .desativa2 {
    z-index: 1100 !important; /* Define um z-index ainda maior para os botões */
}
/*#posiciona5 {
    position: absolute;
    margin: 0
    left: 0;
    width: 100%;
    background-color: rgba(150, 100, 100, 0.45);
    z-index: 1;
    height: calc(100% - 2%);
}*/
#posiciona5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 93% !important;
    background-color: rgba(150, 100, 100, 0.0);
    z-index: 1;
}

#player2 {
    position: relative;
    z-index: 0;
}

#player2-seek-bar {
    z-index: 1100;
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background-color: #ddd;
}
#player2-seek-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4CAF50;
    cursor: pointer;
}

#speed-selector-copy-2, #speed-selector {
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.7 9.8l4.6 4.6 4.6-4.6c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-5 5c-.2.2-.4.3-.7.3s-.5-.1-.7-.3l-5-5c-.4-.4-.4-1 0-1.4s1-.4 1.4 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
    padding-right: 20px;
}

#speed-selector-copy-2, #speed-selector option {
    padding: 5px;
    font-size: 16px;
}
.postar {
    display: none;
}

/*game*/
.zoom-effect {
    transition: transform 0.5s;
}

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

a {
    color: blue;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2px;
}
.grid-item {
    display: grid;
    grid-template-rows: 1fr auto;
    margin: 2px;
    overflow: hidden;
    position: relative;
}

.grid-item img {
    object-fit: cover;

}

.slick-slide img {
    pointer-events: none;

}

.grid-item img:hover {
    transform: scale(1.1) !important;
    transition: all 0.3s ease !important;
}



.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
}



.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-size: 0;
    line-height: 0;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
}

.slick-prev {
    position: absolute;
    top: 10px;
    left: 10px;
}


.slick-next {
    position: absolute;
    top: 10px;
    right: 10px;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-container a {
    width: 100%;
    margin-top: 10px;
}

.button-container a:focus {
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.imgcentr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}
.slick-slider .slick-prev,
.slick-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-size: 0;
    line-height: 0;
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
}

.slick-slider .slick-prev {
    left: 10px;
}

.slick-slider .slick-next {
    right: 10px;
}

.slick-dots {
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
}

/*.slick-dots li {
    margin: 0 5px;
    display: inline-block;
}*/

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    border: none;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.6s ease;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    background-color: #717171;
}
.zoom {
    transition: transform 0.2s ease-out !important;
}
.grid-container {
    max-height: calc(80vh);
}

.zoom:hover {
    transform: scale(1.1) !important;
}
@media screen and (max-width: 400px) {
    .grid-item {
        grid-template-rows: 100px auto 100px;
    }
}
.grid-item {
    max-height: 450px;
}
.button-container {
    max-height: 70px; /* altere o valor de acordo com o que desejar */
    overflow: hidden;
    padding-bottom: 10px; /* adicione um padding inferior para separar o botão do conteúdo abaixo */
}
#floating-frame {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: 100;
    background-color: #fff;
    border: 1px solid #000;
    padding: 10px;
}

#minimize-frame {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

/*game*/
/*novo*/
.h5e {
    position: relative;
    /*display: inline-block;*/
}

.promo-tag {
    position: relative;
    top: -10;
    left: 0px;
    background-color: red;
    color: white !important;
    padding: 5px 10px;
    font-size: 8px;
}
.h5e::after {
    content: "Novo";
    background-color: red;
    color: white;
    padding: 2px 5px ;
    margin-top: 5px;
    position: absolute;
    font-size: 8px;
    right: 0px;
    top: 0px;
    border-radius: 50%;
    animation: blink 1s linear infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*novo*/
/* Style para a div flutuante */
#espaco, #espaco2 {
    display: none;
}
.responseText {
    font-size: 20px;
    /*    font-weight: bold;*/
    text-align: center;
    color: #333;
}
#responseText{
    margin-bottom: 10px;
}
.video-container {
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
    max-width: 250px;
}

.video2 {
    width: calc(33.33% - 10px);
    margin: 5px;
}
.video-container2 {
    width: 250px;
    height: 300px;
    overflow: hidden;
    margin: 5px;
}
.video {
    width: 90%;
    height: 90%;
    object-fit: cover;
    margin: 5px;
}
.bi-circle-new {
    margin-left: 2px;
    float: right;
    width: 35px;
    height: 20px;
    font-size: 8px;
    background-color: green;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    margin-right: 10px;
}
/*############################### div flutuante views recebidas #########################*/
#us-flag, #mx-flag {
    display: inline-block;
    margin-right: 10px; /* adicione um espaçamento de 10px entre as bandeiras */
}
#minimizar-ganhar-coins.expanded{
    background-color: red;
    color: white;
}
#minimizar-ganhar-coins.minimized{
    background-color: green;
    color: white;
}
.floating-div {
    width: 400px;
    height: auto; /* Altura máxima possível */
    position: fixed; /* Fixa na tela */
    top: 60px; /* Fica encostada no topo da div flutuante existente */
    right: 10px; /* Fica no canto direito */
    z-index: 1000; /* Fica acima da outra div flutuante */
    background-color: white;
    border: 1px solid gray;
}

#minimize-button {
    position: absolute;
    top: 0;
    right: 0;
}

.enquete-form {
    z-index: 999;
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    display: block;
    background-color: white;
    border: 1px solid gray;
    padding: 10px;
}
.enquete-form span{
    z-index: 1000;
    bottom: 1;
}
.enquete-pergunta {
    margin-bottom: 10px;
}

.enquete-pergunta p {
    margin: 0;
}

.enquete-pergunta select,
.enquete-pergunta input[type="text"] {
    width: 100%;
    padding: 5px;
    font-size: 16px;
    border: 1px solid gray;
    box-sizing: border-box;
}

.enquete-pergunta button[type="submit"] {
    width: 100%;
    padding: 5px;
    font-size: 16px;
    background-color: blue;
    border: none;
    cursor: pointer;
}

.enquete-pergunta button[type="submit"]:hover {
    background-color: lightskyblue;
    color: white;
}
.fourth {
    border-color: #f1c40f;
    color: ff0404;
    background-image: -webkit-linear-gradient(45deg, #f1c40f 50%, transparent 50%);
    background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
    background-position: 100%;
    background-size: 400%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

.first {
    -webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
    transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
    box-shadow: 0 0 40px 40px #e74c3c inset;
}

.second {
    border-radius: 3em;
    border-color: #ff0404;
    color: #fff;
    background-image: -webkit-linear-gradient(left, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%);
    background-image: linear-gradient(to right, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%);
    background-position: 0 0;
    background-size: 100%;
    -webkit-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}
.second:hover {
    background-position: 100px;
}
.fourth:hover {
    background-position: 0;
}
.btn:hover, .btn:focus {
    color: #fff;
    outline: 0;
}
/* CLASES DA PAGINA DE COMPATIBILIDADE DE ACESSORIOS */
.buttonf {
    -moz-border-radius: 25px;
    -moz-box-shadow: #e5d5d2 0px 0px 10px;
    -moz-transform: rotate(0deg);
    -moz-transition: all 0.9s ease-out;
    -ms-transform: rotate(0deg);
    -ms-transition: all 0.9s ease-out;
    -o-transform: rotate(0deg);
    -o-transition: all 0.9s ease-out;
    -webkit-border-radius: 25px;
    -webkit-box-shadow: #6E7849 0 0 10px;
    -webkit-transform: rotate(0deg);
    -webkit-transition: all 0.9s ease-out;
    background-color: #4A5CF2;
    background-image: -moz-linear-gradient(90deg, #7b85db, #4A5CF2);
    background-image: -ms-linear-gradient(90deg, #7b85db, #4A5CF2);
    background-image: -o-linear-gradient(90deg, #7b85db, #4A5CF2);
    background-image: -webkit-linear-gradient(90deg, #7b85db, #4A5CF2);
    background-image: linear-gradient(90deg, #7b85db, #4A5CF2);
    border-radius: 25px;
    border: 2px solid #ffffff;
    box-shadow: #e5d5d2 0px 0px 10px;
    color: #ffffff;
    display: inline-block;
    font-family: cursive;
    font-size: 0.9em;
    margin: auto;
    padding: 15px;
    text-decoration: none;
    /*text-shadow: #141414 5px 5px 15px;*/
    transform: rotate(0deg);
    transition: all 0.9s ease-out;
}
.buttonf:hover {
    -moz-transform: rotate(6deg) scaleY(1.1);
    -ms-transform: rotate(6deg) scaleY(1.1);
    -o-transform: rotate(6deg) scaleY(1.1);
    -webkit-transform: rotate(6deg) scaleY(1.1);
    background-color: #fdfb2b;
    background-image: -moz-radial-gradient(center 90deg, circle cover, #ffeb29, #fdfb2b);
    background-image: -ms-radial-gradient(center 90deg, circle cover, #ffeb29, #fdfb2b);
    background-image: -webkit-radial-gradient(center 90deg, circle cover, #ffeb29, #fdfb2b);
    background-image: radial-gradient(center 90deg, circle cover, #ffeb29, #fdfb2b);
    color: #ffffff;

    padding: 15px;
    transform: rotate(6deg) scaleY(1.1);
}
.ocult{
    display: none !important;
}
.break {
    flex-basis: 100%;
    height: 0;
}
.avisotop{
    background-color: red;
    z-index: 98;
    bottom:0 !important;
    border: solid 2px;
    color: white;
    position:fixed;
    width: 100%;
    height: 8%;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    box-shadow: 10px 10px 5px grey;
    display: flex;
    padding: 2px;
    padding-top: 10px;
}
.chat {

    position:fixed;
    bottom:0 !important;
    top: 0;
    width:350px;
    height: 550px;
    background-color: #CCCE;
    border: solid 2px;
    border-color: red;
    opacity: none;
    display: flex;
    /*justify-content: center;*/
    /*align-items: center;*/
    margin-right: 10px;
    box-shadow: 10px 10px 5px grey;
}

.chatframe{
    /*    z-index: 98;*/
    /*position:fixed;*/
    /*bottom:0 !important;*/
    /*    top: default;*/
    width:102% !important;
    height: 550px;
    background-color: #CCCE;
    border: solid 2px;
    border-color: red;
    opacity: none;
    /*    display: flex;*/

    /*margin-right: 10px;*/

    position: relative;
    top: 20px;
    /*left:60%;*/
}
.boxchat{
    position:absolute !important;
    z-index: 98;
    display:block;
    left: 60%;
    right: 10% !important;
    justify-content: center;
    align-items: center;
    align-items: center;
    bottom:0 !important;
    top: default;
    box-shadow: 10px 10px 5px grey;
}
.mostrandochat{ /*CABEÇALHO PRETO*/
    z-index: 98;
    position:fixed;
    bottom:0 !important;
    top: default;
    width:350px;
    height: 590px;
    background-color: #CCCE;
    border: solid 2px;
    border-color: red;
    opacity: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    box-shadow: 10px 10px 5px grey;
    /*left:60%;*/
}
.mostrandochat .buttonminim{
    position: absolute;
    top: 0 !important;
    float: right;
    left: 90%;
    justify-content: center;
    padding-bottom:10px;
    margin-bottom: 10px;
}
.cabeca{
    width: 100%;
    position: absolute;
    top:0;
    padding: 5px;
    height:40px;
    background-color: black;
    color:white;
}
.chatminimizado{

    z-index: 100;
    position:fixed;
    bottom:0 !important;
    top: default;
    width:350px;
    height: 50px;
    border: solid 2px;
    border-color: red;
    opacity: 0.9;
    background-color: red;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    /*left: 60%;*/
    box-shadow: 10px 10px 5px grey;
}
.chatminimizado button{
    float: right;
    position: absolute;
    right: 5px;
    padding: 5px;
    margin: 3px;
    top: 5px;
}
.chatmaximizar{

    z-index: 100;
    position:fixed;
    bottom:0 !important;
    top: default;
    width:350px;
    height: 50px;
    border: solid 2px;
    border-color: red;
    opacity: 0.9;
    background-color: #CCCE;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    /*left: 70%;*/
    box-shadow: 10px 10px 5px grey;
}
#maximiza .chatminimizado{
    /*left: 70%;*/
}
.chat header{
    height: 50px;
    width: 350px;
    position: absolute;
    top: 0 !important;
    background-color: red;
    color:white;
    margin: 0;
    padding: 10px;
    justify-content: center;
}
.chat header button{
    float: right;
    padding: 5px;
}
.chat footer{
    width: 350px;
    height: 40px;
    position: fixed;
    bottom: 0;
    margin-bottom:10px;
    padding: 0;
    background-color: black;
    flex: 1;
}
#oi{
    height: 440px;
    overflow-y: scroll;
    max-width: 350px;
}
.chat textarea{
    margin:0;
    float: left;
    bottom: 10px;
    height: 40px;
    width: 302px !important;
    font-size: 14px;
    padding: 0;
    justify-content: center;
}
.chat message p {
    margin: 0;
    padding: 1px;

}
.message{
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column-reverse;
    /*overflow-y: auto;*/
    height: 465px;
    position: relative;
    margin-top: 30px;
    padding: 10px;
    width: 350px;
}

.modal_bg{
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top:10%;
    left: 0;
    width:100%;
    height: 100%;
    z-index: 99;
}
.modal_area{
    max-width: 500px;
    height: auto !important;
    padding:35px;
    margin: 30px auto;
    background-color: #FFFFFF;
    border-radius: 5px;
}
.fech {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.titulo{
    font-size: 24px;
    /*font-weight: bold;*/
    color: #06F;
    text-decoration: none;
}
.acessorio{
    background-color: #FFC !important;
}
.listlado{
    float: left;
    list-style-type: none;
}
.listlado h3{
    color: #09F;
    font-size: 24px;
    font-weight: bolder;
    text-transform: capitalize;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 1em;
}
.seta{
    backgroun: url(../icons/seta.png) repeat-no;
}
.floating-div {
    width: 400px;
    height: auto;
    /* Altura máxima possível */
    position: fixed;
    /* Fixa na tela */
    top: 60px;
    /* Fica encostada no topo da div flutuante existente */
    right: 10px;
    /* Fica no canto direito */
    z-index: 1000;
    /* Fica acima da outra div flutuante */
    background-color: white;
    border: 1px solid gray;
}

/* CLASES DA PAGINA DE COMPATIBILIDADE DE ACESSORIOS */

body.login{
    background: #09f;
}
body.painel{
    background: url(../images/header_bg.png) repeat-x #fbfbfb;
}


/*FLOATS*/
.right{
    float: right !important;
}
.left{
    float: left !important;
}
.center{
    text-align: center !important;
}

/*MENSAGENS DO SISTEM*/
.trigger{
    padding: 15px 15px 15px 40px;
    background: #eee;
    font-size: 14px;
    margin-bottom: 15px;
}
.trigger a{
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    padding: 5px 15px;
    background: #069;
    color: #fff;
}
.trigger a:hover{
    background: #09f;
    color: #fff;
}

.accept{
    background: #71ca73 url(../icons/accept.png) center left 10px no-repeat
}
.infor{
    background:  #c8dbfd url(../icons/infor.png) center left 10px no-repeat
}
/*.alert{background:  #faf7b7 url(../icons/alert.png) center left 10px no-repeat}*/
.error{
    background:  #ffafaf url(../icons/error.png) center left 10px no-repeat
}

/*CAIXAS DE IMAGEM*/
.thumb_small{
    width: 120px;
    height: 70px;
    background: #FFFFFF url(../images/header_logo.png) center center no-repeat;
    background-size: 70%
}
.thumb_emp{
    width: 120px;
    height: 60px;
    background: #00254A url(../images/header_logo.png) center center no-repeat;
    background-size: 70%
}
.thumb_medium{
    width: 200px;
    height: 116px;
    background: #00254A url(../images/header_logo.png) center center no-repeat;
    background-size: 70%
}

/*APENAS TELA DE LOGIN*/
#login{
    width: 100%;
}
#login .boxin{
    position: absolute;
    width: 322px;
    min-height: 300px;
    background: #eee;
    left: 50%;
    top: 50%;
}
#login .boxin{
    padding: 20px 20px 10px;
    margin-left: -181px;
    margin-top: -170px;
}
#login .boxin h1{
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 600;
    color: #09f;
    border-bottom: 5px solid #09f;
}
#login .boxin h1{
    margin-bottom: 15px;
    padding-bottom: 5px;
    text-align: center;
}
#login form label{
    display: block;
    margin-bottom: 15px;
}
#login form label span{
    display: block;
    margin-bottom: 5px;
}
#login form label input{
    width: 300px;
    padding: 10px;
    font-size: 18px;
    border: none;
}
#login form .btn{
    margin-top: 10px;
}
/*
PAINEL ADMIN
#navadmin{
    width: 100%;
    height: 147px;
    position: relative;
    margin-bottom: 50px;
}
#navadmin .content{
    width: 968px;
    display: block;
    margin: 0 auto;
}
#navadmin .logomarca{
    float: left;
    font-size: 0;
    width: 200px;
    height: 60px;
    margin-top: 20px;
    background: url(../images/header_logo.png) left center no-repeat;
}

NAV SYSTEM
#navadmin .systema_nav{
    float: right;
    padding: 5px 5px 10px;
    background: #006699;
    position: relative;
    top: -10px
}
#navadmin .systema_nav li{
    float: left;
}
#navadmin .systema_nav li a{
    float: left;
    margin: 0 15px;
    width: 30px;
    height: 30px;
    font-size: 0;
}
#navadmin .systema_nav li a:hover{
    background-color: #09f;
}
#navadmin .systema_nav li .profile{
    background: url(../icons/profile.png) center center no-repeat;
}
#navadmin .systema_nav li .users{
    background: url(../icons/users.png) center center no-repeat;
}
#navadmin .systema_nav li .logout{
    background: url(../icons/logout.png) center center no-repeat;
}
#navadmin .systema_nav li .icon{
    background-size: 80%;
}
#navadmin .systema_nav .username{
    margin: 5px 15px;
    float: left;
    font-variant: small-caps;
    color: #fff;
}

MENU CENTRAL
#navadmin nav{
    width: 100%;
    display: block;
    float: left;
    position: absolute;
    bottom: 0px;
}
#navadmin nav h1{
    float: left;
    font-size: 18px;
    background: #F2F2F2;
    margin-right: 15px;
    border-bottom: 1px solid #F2F2F2;
}
#navadmin nav h1 a{
    color: #09f;
    padding: 11px 26px 11px 26px;
    float: left;
}
#navadmin nav h1 a:hover{
    background: #09f;
    color: #fff;
}
#navadmin nav ul{
    float: left;
    margin-top: 6px;
}
#navadmin nav ul .li{
    float: left;
    margin-right: 5px;
    position: relative;
}
#navadmin nav ul li:hover .opensub{
    background: #F2F2F2;
    color: #333
}
#navadmin nav ul .li:last-child{
    margin: 0;
}
#navadmin nav ul .li .opensub{
    float: left;
    padding: 10px 20px;
    color: #fff;
    background: #005875;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #777777;
}
#navadmin nav ul .li .opensub:hover{
    background: #F2F2F2;
}
#navadmin nav ul li:hover .sub{
    display: block;
}
#navadmin nav ul .li .sub{
    position: absolute;
    top: 33px;
    width: 960px;
}
#navadmin nav ul .li .sub li{
    float: left;
    font-size: 12px;
    text-transform: uppercase;
    margin-right: 20px;
}
#navadmin nav ul .li .sub li a{
    float: left;
    font-weight: bold;
    color: #999;
    padding: 17px 10px;
}
#navadmin nav ul .li .sub li a:hover{
    color: #333;
}
#navadmin nav ul .li .sub{
    display: none;
}
#navadmin nav ul .active .opensub{
    background-color: #F2F2F2 !important;
    color: #333 !important;
}*/

/*GERAL CONTENT*/
#painel{
    width: 100%;
    padding: 30px 0 30px;
}
#painel .content{
    width: 968px;
    margin: 0 auto;
}
#painel .notfound{
    min-height: 320px;
}

/*BOX GERAL*/
.boxtitle{
    font-size: 24px;
    color: #888;
    font-weight: 400;
    border-bottom: 5px solid #888;
    margin-bottom: 15px;
    padding-bottom: 5px;
}
.boxsubtitle{
    font-size: 16px;
    color: #444;
    font-weight: 400;
    margin-bottom: 10px;
}
.boxaside{
    width: 298px;
    padding: 10px;
    background: #eee;
    margin-bottom: 20px;
}
.boxaside:last-child{
    margin: 0;
}

/*HOME PAINEL*/
/*Estatísticas*/
.home aside{
    float: left;
    width: 318px;
}
.home aside .sitecontent ul{
    float: left;
    width: 298px;
    font-size: 12px;
}
.home aside .sitecontent ul li{
    float:left;
    width:258px;
    background: white;
    padding: 15px 0 15px 40px;
    margin-bottom: 10px;
}
.home aside .sitecontent ul li:last-child{
    margin: 0;
}
.home aside .sitecontent ul .line{
    padding: 1px 20px;
    background: #ccc;
}
.home aside .sitecontent ul .view{
    background: #fff url(../icons/e_view.png) left 10px center no-repeat;
}
.home aside .sitecontent ul .user{
    background: #fff url(../icons/e_user.png) left 10px center no-repeat;
}
.home aside .sitecontent ul .page{
    background: #fff url(../icons/e_page.png) left 10px center no-repeat;
}
.home aside .sitecontent ul .post{
    background: #fff url(../icons/e_post.png) left 10px center no-repeat;
}
.home aside .sitecontent ul .emp{
    background: #fff url(../icons/e_emp.png) left 10px center no-repeat;
}
.home aside .sitecontent ul .prof{
    background: #fff url(../icons/profile.png) left 10px center no-repeat;
}
.home aside .sitecontent ul .comm{
    background: #fff url(../icons/e_comm.png) left 10px center no-repeat;
}

/*Navegadores*/
.home aside .useragent ul{
    float: left;
    width: 258px;
    font-size: 12px;
    padding: 20px;
    background: #fff;
}
.home aside .useragent ul li{
    float:left;
    width:258px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted #333;
}
.home aside .useragent ul li:last-child{
    margin: 0;
    padding: 0;
    border: none;
}
.home aside .useragent ul li strong{
    font-size: 16px;
}
.home aside .useragent ul li span{
    background: #09f;
    display: block;
    padding: 10px 0;
    margin: 5px 0;
}

/*Conteúdo*/
.home .content_statistics{
    float: right;
    width: 620px;
}
.home .content_statistics section{
    padding: 20px;
    background: #fff;
    margin-bottom: 20px;
    float: left;
    width: 580px;
}
.home .content_statistics section:last-child{
    margin: 0;
}
.home .content_statistics section .boxsubtitle{
    border-bottom: 3px solid #eee;
    margin-bottom: 20px;
    padding-bottom: 5px;
}
.home .content_statistics section article{
    margin-bottom: 18px;
    padding-bottom: 18px;
    float: left;
    width: 580px;
    border-bottom: 1px dotted #eee;
}
.home .content_statistics section article:last-child{
    margin: 0;
    padding: 0;
    border: none;
}
.home .content_statistics section article .img{
    float: left;
    margin-right: 15px;
}
.home .content_statistics section article h1{
    font-size: 14px;
    margin-bottom: 10px;
}
.home .content_statistics section article h1 a{
    font-weight: 600;
    color: #005875
}
.home .content_statistics section article h1 a:hover{
    text-decoration: underline;
}

/*POSTS*/
.post_actions{
    float: left;
    width: 298px;
    font-size: 12px;
}
.post_actions li{
    float: left;
    margin-right: 6px;
}
.post_actions li:first-child{
    margin-right: 32px;
    margin-top: 4px;
}
.post_actions li:last-child{
    margin: 0;
}
.post_actions li a{
    background: #ccc;
    text-transform: uppercase;
    font-size: 10px;
    color: #333;
    width: 25px;
    height: 25px;
    float: left;
    font-size: 0;
}
.post_actions li a:hover{
    background-color: #09f;
    color: #fff;
}
.post_actions li .act_view{
    background: #eee url(../icons/act_view.png) center center no-repeat;
}
.post_actions li .act_edit{
    background: #eee url(../icons/act_edit.png) center center no-repeat;
}
.post_actions li .act_precooff{
    background: #eee url(../icons/icone-precooff.png) center center no-repeat;
}
.post_actions li .act_precoon{
    background: #eee url(../icons/icone-preco.png) center center no-repeat;
}
.post_actions li .act_ative{
    background: #eee url(../icons/act_ative.png) center center no-repeat;
}
.post_actions li .act_inative{
    background: #eee url(../icons/act_inative.png) center center no-repeat;
}
.post_actions li .act_compatible{
    background: #eee url(../icons/compativel.png) center center no-repeat;
    width: 100px !important;
    height: 25px;
}
.post_actions li .act_incompatible{
    background: #eee url(../icons/incompativel.png) center center no-repeat;
    width: 100px !important;
    height: 25px;
}
.post_actions li .act_imagens{
    background: #eee url(../icons/envia_imagem.png) center center no-repeat;
    width: 100px !important;
    height: 25px;
}
.post_actions li .act_delete{
    background: #eee url(../icons/act_delete.png) center center no-repeat;
}

/*FORM CADASTRO*/
.form_create .trigger{
    margin: 20px 0 25px 0;
}
.form_create article form{
    padding: 20px;
    background: #fff;
    margin-top: 10px;
}
.form_create article form .label{
    display: block;
    margin-bottom: 15px;
}
.form_create article form .field{
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}
.form_create article form label input,
.form_create article form label select,
.form_create article form label textarea{
    padding: 10px;
    border: 5px solid #ccc;
    width: 900px;
    font-size: 18px;
    font-family: 'Trebuchet MS', sans-serif;
    font-weight: initial;
    color: #333;
}
.form_create article form .label_line{
    float: left;
    width: 930px;
    margin-bottom: 15px;
    color:black;
}

.form_create article form .label_small{
    float: left;
    width: 280px;
}
.form_create article form .label_small:last-child{
    float: right;
}
.form_create article form .label_small:first-child{
    float: left;
    margin-right: 44px;
}
.form_create article form .label_small input{
    width: 250px;
}
.form_create article form .label_small select{
    width: 280px;
    padding: 9px 10px
}

.form_create article form .label_medium{
    float: left;
    width: 442px;
    float: left;
    margin-right: 44px;
}
.form_create article form .label_medium:last-child{
    float: right;
    margin-right: 0;
}
.form_create article form .label_medium input{
    width: 412px;
}
.form_create article form .label_medium select{
    width: 442px;
    padding: 9px 10px
}

.form_create article form .btn{
    margin-top: 5px;
    margin-right: 15px;
}

/*GALERIA*/
.form_create article form .gbform{
    padding: 20px 20px 5px;
    margin: 10px 0 20px;
    background: #fbfbfb;
    float: left;
    width: 890px
}
.form_create article form .gbform input{
    width: 860px;
}
.form_create article form .gbform .thumb_small{
    width: 146px;
    height: 100px
}
.form_create article form .gbform .right{
    margin-right: 0;
}
.form_create article form .gallery{
    width: 890px;
    float: left;
}
.form_create article form .gallery li{
    float:left;
    padding: 10px;
    margin: 0 15px 15px 0;
    background: #fff;
    position: relative;
}
.form_create article form .gallery li .del{
    position: absolute;
    background: #900;
    right: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
}
.form_create article form .gallery li .del{
    text-transform: uppercase;
    color: #fff;
    font-size: 0;
    background: url(../icons/logout.png) center center no-repeat;
    background-size: 80%;
}
.form_create article form .gallery li .del:hover{
    background-color: red
}

/*LISTA CONTENT*/
.list_content h1{
    margin-bottom: 10px;
}
.list_content article{
    padding: 20px;
    background: #fff;
    margin-bottom: 20px;
    float: left;
    width: 434px;
    min-height: 76px;
}
.list_content article .img{
    float: left;
    margin-right: 15px;
}
.list_content article h1{
    font-size: 14px;
}
.list_content article h1 a{
    color: #069;
}
.list_content article h1 a:hover{
    text-decoration: underline;
}

/*LISTA CATEGORIAS*/
.cat_list h1{
    margin-bottom: 10px;
}
.cat_list section section{
    padding: 20px 20px 0;
    margin-bottom: 30px;
    background: #fff;
    float: left;
    width: 928px;
    border-bottom: 10px solid #ccc
}
.cat_list section:last-child{
    margin: 0;
}
.cat_list section section header{
    display: block;
    float: left;
    width: 928px
}
.cat_list section section header h1{
    font-size: 20px;
    margin: 0 !important;
    /*font-weight: bold;*/
    text-transform: uppercase;
    color: #333
}
.cat_list section section header .tagline{
    font-size: 16px;
    margin: 15px 0;
    color: #666;
}
.cat_list section section header .info{
    padding: 10px;
    margin-bottom: 20px;
    background: #fbfbfb;
    display: block;
    width: 908px;
}

.cat_list section section h2{
    font-size: 18px;
    margin: 15px 0 !important;
    font-weight: 600;
    color: #999
}
.cat_list section section article{
    float: left;
    width: 256px;
    padding: 20px;
    background: #eee;
    margin: 0 20px 20px 0;
}
.cat_list section section .right{
    margin-right: 0;
}
.cat_list section section article h1{
    font-size: 14px
}
.cat_list section section article .info{
    width: 256px;
}
.cat_list section section article .info li:first-child{
    margin-right: 21px;
}

/*EMPRESAS*/
.list_emp article h1{
    margin: 0;
}
.list_emp article h2{
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.list_emp article h2 a{
    color: #666;
    /*font-weight: bold;*/
}
.list_emp article h2 a:hover{
    text-decoration: underline;
}

/*PAGINATOR*/
.paginator{
    padding: 10px;
    background: #fff;
    text-align: center
}
.paginator li{
    display: inline;
}
.paginator a, .paginator span{
    margin: 0 5px;
    padding: 3px 8px;
    font-size: 14px;
    color: #333;
    font-weight: 600
}
.paginator a:hover{
    background: #09f;
    color: #fff;
}
.paginator .active{
    background: #333;
    color: #fff;
}

/*USUÁRIOS*/
.user_cad{
    float: right;
    background: #bee2b0;
    padding: 8px 20px;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
}
.user_cad:hover{
    background: #80e258
}
.ultable{
    width: 968px;
    display: block;
    margin: 20px auto;
    overflow: hidden;
    background: #eee;
    list-style: none;
    padding: 0;
}
.ultable .t_title{
    background: #333;
    color: #fff;
    border-color: #333;
    width: 968px;
}
.ultable .t_title span{
    border-color: #fff;
}
.ultable li{
    float: left;
    display: block;
    border: 1px solid #333;
    border-top: none;
    width: 968px;
    font-size: 14px;
}
.ultable li span{
    float: left;
    padding: 15px;
    border-right: 1px solid #ccc;
    min-height: 22px
}
.ultable li .center{
    text-align: center;
}
.ultable li .ui{
    width: 20px;
}
.ultable li .un{
    width: 210px;
}
.ultable li .ue{
    width: 200px;
}
.ultable li .ur{
    width: 80px;
}
.ultable li .ua{
    width: 150px;
}
.ultable li .ul{
    width: 40px;
}
.ultable li .ed{
    width: 50px;
    border-right-color: #333;
}
.ultable li .ed a{
    background: #069;
}
.ultable li .ed a:hover{
    background-color: #09f;
}
.ultable li .ed a:last-child{
    background-color: #efc3c2;
}
.ultable li .ed a:last-child:hover{
    background-color: red;
}
.ultable li .ed .action{
    width: 25px;
    height: 22px;
    display: block;
    font-size: 0;
    float: left;
}
.ultable li .ed .user_edit{
    background: #ccc url(../icons/act_edit.png) center center no-repeat;
    background-size: 70%
}
.ultable li .ed .user_dele{
    background: #ccc url(../icons/act_delete.png) center center no-repeat;
    background-size: 70%
}

/*FOOTER GERAL*/
.main_footer{
    background: #00254A;
    width: 100%;
    padding: 30px 0;
    text-align: center;
    border-top: 2px solid #444;
}
.main_footer a{
    font-size: 14px;
    color: #fff;
    font-variant: small-caps;
}
.main_footer a:hover{
    text-decoration: underline;
}
/*dados da tela de pedidos*/
.head{
    /*font-weight: bold;*/
    color: #963 !important;
    text-decoration: none;
}
.head a{
    color:#333;
}
.btnp{
    padding: 2px;
    cursor:pointer;
    border-radius: 2px;
}
.textos{
    padding-left: 2em;
    padding-bottom: 2px;
    color: #333;
    font-size: 15px;
    list-style-type: none;
}
.red{
    background:#FFF !important;
    color: #F00 !important;
}
.azul{
    background:#FFF !important;
    color: #06F !important;
}
.verde{
    background:#FFF !important;
    color: #063 !important;
}

css da tela social feed de noticias like points

/* Estilização da prévia do link */
.link-preview {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    max-width: 640px; /* Define a largura máxima da prévia */
}

.link-preview img {
    max-width: 100%;
    height: auto;
}
.btn-max-width {
    width: 105%;
}
.engajamentos-text span:hover,
.engajamentos-text i:hover {
    text-decoration: underline;
}

.youtube-thumbnail {
    width: 115%;
    height: 400px;

    display: block;
    position: relative;
    overflow: hidden;
}
.tab-content{
    width: 100%;
    margin: 0px !important;
}
.youtube-thumbnail img {
    width: 115%;
    margin-left: 3px !important;
    cursor: pointer;
}


/* Para telas maiores que 768px (Desktop e Tablets) */
@media (min-width: 769px) {
    .card.gedf-card {
        width: 768px !important; /* Ocupe 70% da largura da tela */
        max-width: 1200px !important; /* Impede que fique muito largo */
        margin: 0 auto !important; /* Centraliza na tela */
    }
}

/* Para telas menores que 768px (Mobile) */
@media (max-width: 768px) {
    .card.gedf-card {
        width: 100% !important; /* Ocupa toda a largura */
        margin: 0 !important; /* Remove qualquer margem */
    }
}


/* Dark Mode: Widget carregado dinamicamente */
.dark-mode #reels {
    background-color: #333 !important; /* Fundo escuro */
    color: #ffffff !important;         /* Texto claro */
    padding: 10px;                     /* Espaçamento interno */
    border-radius: 8px;                /* Cantos arredondados */
}

/* Ajustar estilos internos do conteúdo injetado */
.dark-mode #reels * {
    background-color: transparent !important; /* Evitar fundos pretos indesejados */
    color: #ffffff !important;                /* Texto branco para legibilidade */
}

/* Vídeos carregados dinâmicos */
.dark-mode #reels video {
    background-color: #000 !important; /* Fundo para vídeos */
    border: 1px solid #555 !important; /* Adiciona contraste ao redor do vídeo */
}

/* Links dentro do widget no modo escuro */
.dark-mode #reels a {
    color: #1e90ff !important; /* Azul claro para links */
    text-decoration: none;     /* Remove sublinhado */
}

.dark-mode #reels a:hover {
    color: #87ceeb !important; /* Destaque ao passar o mouse */
}
.dark-mode .task-priority{
    background-color: ignore;
    color: initial;
}
/*suggestion-list do form superior*/
 .suggestions-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1000;
        background-color: #ffffff;
        border: 1px solid #ddd;
        border-radius: 4px;
        max-height: 200px; /* Limita a altura da lista */
        overflow-y: auto; /* Permite rolagem caso necessário */
        padding: 0;
        margin: 0;
        list-style: none;
        display: none; /* Inicialmente escondido */
    }

    .suggestions-list li {
        padding: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
    }

    .suggestions-list li:hover {
        background-color: #007bff; /* Azul claro */
        color: #ffffff; /* Texto branco para contraste */
    }

    .suggestions-list li:not(:hover) {
        background-color: #f9f9f9; /* Fundo claro */
        color: #333; /* Texto escuro */
    }