* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    
}

.sidebar {
  margin-top: 5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4rem;
    padding: 0rem;
    color: #fff;
    overflow: hidden;
    transition: all 0.5s linear;
    background: #181818;
}



.logo {
    height: 5rem;
    padding: 1rem;
}

.menu {
    height: 88%;
    position: relative;
    list-style: none;
    padding: 0;
    display: flex; /* Alinha os itens horizontalmente */
    justify-content: start; /* Centraliza os itens horizontalmente */
    align-items: center; /* Alinha verticalmente os itens no centro */
}


.menu li {
    padding: 0rem;
    margin: 0 0.12rem; /* Ajuste o espaçamento horizontal */
    border: 8px solid transparent; /* Adiciona uma borda para controle visual */
    transition: all 0.5s ease-in-out;
}


#launcher {
    z-index: 9999 !important; /* Um valor alto para garantir que sobreponha outros elementos */
}

.menu a {
    color: #999999;
    font-size: 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.menu a:hover {
    color: #c3ff2c;
}

.menu a span {
    overflow: hidden;
}

.menu a i {
    font-size: 1rem;
}


.logout {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/*** main body section ***/

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.content-wrapper {
  opacity: 1; /* Inicialmente invisível */
  transition: opacity 0.5s ease-in-out; /* A animação de transição de opacidade */
}

.content-wrapper.fade-in {
  opacity: 1; /* Torna visível após a animação */
}

.Lembretes{
    display: none;
    pointer-events: none;
}

.content-wrapper {
    flex: 1;
    margin-top: 6.975rem; /* Espaço à esquerda para a sidebar */
    padding-top: 50px;
    background: #2f2f2f; /* Fundo cinza para separar o conteúdo */
    padding-left: 20px; /* Ajuste o padding esquerdo */
    padding-right: 20px; /* Adiciona padding à direita */
    width: 100%; /* Usa 100% da largura disponível */
    max-width: 1200px; /* Define uma largura máxima para o conteúdo */
    margin-left: auto; /* Garante que o conteúdo seja centralizado */
    margin-right: auto; /* Garante que o conteúdo seja centralizado */
    min-height: 100vh; /* Assegura que a altura mínima seja a da janela */
    transition: all 0.5s ease; /* Suaviza as transições de estilo */
    display: flex; /* Usa flexbox para alinhar conteúdos internos */
    flex-direction: column; /* Orienta os itens em coluna */
}


.main-content {
      margin-left: 0px;
      padding: 3cm 2cm 20px;
      
    }

    .content-title {
      font-size: 24px;
      font-weight: bold;
      color: #FFFFFF; /* Título branco */
      margin-bottom: 10px;
    }


    .content-subtitle {
      font-size: 16px;
      color: #BBBBBB; /* Texto cinza claro */
      margin-bottom: 20px;
    }

    .content-container {
      width: 100%;
      max-width: 1140px; /* Aumentado para igualar os containers */
      background-color: #FFFFFF;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 0;
      margin-bottom: 20px;
    }

    .content-container2 {
      width: 100%;
      max-width: 1140px; /* Aumentado para igualar os containers */
      background-color: #FFFFFF;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 0;
      margin-bottom: 20px;
      display: none;
      pointer-events: none;
    }

    .table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden; /* Garante que o arredondamento funcione */
  border-radius: 8px; /* Bordas superiores arredondadas */
}

    .table th,
    .table td {
      padding: 15px;
      text-align: left;
      font-size: 14px;
      color: #333;
    }

.table th {
  background-color: #d2d2d2; /* Fundo cinza escuro */
  color: hsl(0, 0%, 20%); /* Texto em um tom escuro */
  font-weight: bold;
  border-bottom: 1px solid #eaeceb;
}


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

    .table tr:hover {
      background-color: #f1f3f6;
    }

    .plan-name {
      font-size: 20px;
      font-weight: bold;
      margin: 0;
    }

    .plan-subtitle {
      font-size: 14px;
      color: #076904; /* Verde original */
      margin: 2px 0 0;
    }

    .plan-type {
      font-size: 14px;
      font-weight: bold;
      margin-top: 5px;
    }

    .status {
  display: flex;
  align-items: center; /* Centraliza verticalmente o conteúdo */
  justify-content: center; /* Centraliza horizontalmente o conteúdo */
  gap: 5px;
}


    .status .material-icons {
      font-size: 16px;
      color: #076904; /* Verde original */
    }

    .btn {
      background-color: #c4da3f;
      color: #333;
      font-size: 14px;
      padding: 8px 12px;
      border: 1px solid #333;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .logo {
      width: 90%;
      height: 80%;
    }

    .btn-w {
      background-color: #FFFFFF;
      border: 1px solid #333;
      color: #333;
      font-size: 14px;
      padding: 8px 12px;
      border-radius: 4px;
      cursor: pointer;
    }

    .btn-w:hover {
      background-color: #c4da3f;
      color: #333;
    }

    .btn:hover {
      background-color: #a5b937;
    }
    @keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px); /* Animação de deslizamento para cima */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Chega à posição original */
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0); /* A posição original */
    }
    100% {
        opacity: 0;
        transform: translateY(-20px); /* Animação de deslizamento para cima ao fechar */
    }
}

#manager-section {
    display: none;
    width: 100%;
    max-width: 1140px; /* Mesma largura do container principal */
    background-color: #f8f9fa; /* Fundo suave e moderno */
    border: 1px solid #ddd; /* Borda clara */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 20px; /* Espaçamento interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-top: 20px;
    opacity: 0; /* Inicialmente invisível */
    transform: translateY(-20px); /* Começa com um deslocamento para cima */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

#manager-section.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out; /* Adiciona a animação de fadeIn */
    opacity: 1; /* Torna visível após a animação */
    transform: translateY(0); /* Retorna à posição original */
}

#manager-section.inactive {
    animation: fadeOut 0.5s ease-in-out; /* Animação de fadeOut */
    opacity: 0;
    transform: translateY(-20px);
}

    #manager-section h3 {
      font-size: 18px;
      color: #333;
      margin-bottom: 10px;
    }

    #manager-section .channels-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px; /* Espaçamento aumentado */
    }

    #manager-section .channels-grid label {
      font-size: 14px;
      color: #333;
      margin-bottom: 5px;
    }

    #manager-section input {
      width: 100%;
      padding: 5px; /* Reduzido para menor tamanho */
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    .addUser-btn{
      margin-top: 20px;
      display: inline-block;
      padding: 5px 20px;
      background-color: #c4da3f; /* Botão cinza */
      color: #333333; /* Texto escuro */
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      border: 1px solid #333333;
    }

    .addUser-btn:hover {
      background-color: #a5b937;
    }

    .save-btn {
      margin-top: 20px;
      display: inline-block;
      padding: 5px 20px;
      background-color: #c4da3f; /* Botão cinza */
      color: #333333; /* Texto escuro */
      font-size: 14px;
      font-weight: 400;
      text-align: center;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      border: 1px solid #333333;
    }

    .save-btn:hover {
      background-color: #a5b937;
    }


/* Garantir que o botão Acessar ocupe toda a largura quando Gerenciar for escondido */
.plan-actions {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

#gerenciar-btn {
    display: inline-block; /* Exibe o botão normalmente */
}


.plan-actions .btn,
.plan-actions .btn-w {
    width: 50%;  /* Garantir que ambos os botões ocupem 50% da largura */
    text-align: center; /* Centraliza o texto nos botões */
    padding: 10px; /* Adiciona espaçamento interno */
    border-radius: 5px; /* Adiciona bordas arredondadas */
    cursor: pointer; /* Define o cursor como pointer */
    transition: background-color 0.3s ease; /* Suaviza a mudança de cor */
}

.plan-actions .btn-w {
    background-color: #f9f9f9; /* Fundo branco */
    color: #333; /* Texto escuro */
    border: 1px solid #333; /* Borda escura */
}

.plan-actions .btn-w:hover {
    background-color: #ddd; /* Fundo cinza claro ao passar o mouse */
}


.user--info {
    display: flex;
    align-items: center;
    gap: 1rem;

}

.searh--box {
    background: rgb(237, 237, 237);
    border-radius: 15px;
    color: #1f1f1f;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
}
.searh--box:hover {
    background-color: rgba(0, 0, 0, 0.2);
    transition: 0.10s;
}

.searh--box input {
    background: transparent;
    padding: 10px;
}

.searh--box i {
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.5s ease-out;
}

.searh--box i:hover {
    transform: scale(1.2);
}

/*** card container ***/

.card--container {
    background-color: #fff;
    padding: 16px;
    border-radius: 10px;

}

.card--wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.main--title {
    color: #1f1f1f;
    padding-bottom: 10px;
    font-size: 15px;

}

.payment--card {
    background: rgb(239, 239, 239);
    border-radius: 10px;
    padding: 1.2rem;
    width: 290px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.5s ease-in-out;
}

.btn-sm {
    padding: 5px 10px;
    background-color: #4CAF50; /* Verde */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-sm:hover {
    background-color: #45a049;
}


.payment--card:hover {
    transform: translateY(-5px);
}

.card--header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

}

.amount {
    display: flex;
    flex-direction: column;
}

.title {
    font-size: 12px;
    font-weight: 200;
}

.amount--value {
    font-size: 24px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
}

.icon {

    color: #ffffff;
    padding: 1rem;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    font-size: 1.5rem;
    background: rgb(0, 0, 0);

}

.card--detail {
    font-size: 18px;
    color: #777777;
    letter-spacing: 5px;
}

.light-red {
    background: rgb(210, 210, 210);
}

.light-purple {
    background: rgb(218, 217, 218);
}

.light-green {
    background: rgb(216, 216, 216);
}

.light-blue {
    background: rgb(206, 206, 206)
}
.dark-red {
    background:rgb(211, 211, 211) ;
}
.dark-purple {
    background: rgb(0, 0, 0);
}
.dark-green {
    background:rgb(0, 0, 0) ;
}
.dark-blue {
    background:rgb(0, 0, 0) ;
}

/*** tabular section ***/
.tabular--wrapper {
    background: #fff;
    margin-top: 1rem;
    border-radius: 10px;
    padding: 2rem;

}
.table--container {
    width: 100%;
}



thead {
    padding: 15px;
    text-align: left;
}
tbody {
    background: #f2f2f2;

}
tr:nth-child(even)  {
    background: #ffff;
    
}


tfoot {
    background-color: #181818;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Uniformiza a largura das colunas */
}

th, td {
    padding: 0.75rem 1rem; /* Adiciona espaçamento interno */
    text-align: left; /* Alinha o texto à esquerda */
    border-bottom: 1px solid #ddd; /* Adiciona uma borda para separação */
}

th {
    background-color: #181818;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

td {
    color: #333;
    word-wrap: break-word; /* Quebra o texto, caso seja muito longo */
}

tfoot td {
    font-weight: bold;
    text-align: center; /* Centraliza o texto no rodapé */
    background-color: #f9f9f9;
}


.table--container button {
    color: green;
    background: none;
    cursor: pointer;
}

td button:hover {
    color: rgb(0, 0, 0);
}

tfoot tr {
    font-weight:600;
}
.copyright {
    text-align: center;
    color: #555;
    font-size: 14px;
    margin-top: 50px;
}

.header {
    background-color: #c3ff2c;
    padding: 40px 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinha tudo à esquerda */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 50px; /* Altura da barra principal ajustada */
    border-bottom: 0.5px solid #282828;
}

.header-logo {
    margin-right: 0px; /* Espaço entre logo e texto */
}

.header-logo img {
    display: block; /* Remove espaço extra causado por inline-block */
    border: none; /* Remove qualquer borda */
    outline: none; /* Remove qualquer contorno */
    box-shadow: none; /* Remove qualquer sombra */
    background-color: transparent; /* Garante que o fundo seja transparente */
}


.header img.logo {
    height: 90px; /* Ajuste a altura da logo conforme necessário */
    width: 190px;
}

.header-org h2,
.header-title h2 {
    color: #bbbbbb;
    font-size: 14px; /* Tamanho do texto */
    margin: 0;
    padding: 0 20px; /* Espaçamento interno entre textos */
    font-weight: 400;
}

.header-divider h3 {
    color: #918b8b9e;
    font-size: 20px; /* Tamanho do divisor */
    margin: 0;
    padding: 0 10px;
    font-weight: 200;
}

.plan-details2 {
    display: flex;
    align-items: center; /* Alinha o ícone, texto e botão verticalmente */
    justify-content: space-between; /* Coloca o ícone e texto à esquerda e o botão à direita */
    gap: 15px; /* Espaçamento entre os elementos */
    width: 100%;
}

.radio-container2 {
    background-color: #b8d222b1; /* Verde claro */
    border-radius: 4px; /* Tornar o container arredondado */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Tamanho do container */
    height: 40px; /* Tamanho do container */
    border: #1d1e20 1px solid;
}

.text-container2 {
    text-align: left; /* Alinha o texto à esquerda */
    flex: 1; /* Faz o texto ocupar o máximo de espaço possível */
}

.plan-name2 {
    font-size: 16px;
    font-weight: bold;
    color: #1d1e20;
    margin: 0;
}

.plan-subtitle2 {
    font-size: 14px;
    color: #6e7081;
    margin: 0;
}

.renew-button {
    background-color: #c4da3f; /* Cor de fundo do botão */
    color: #333; /* Cor do texto do botão */
    font-size: 14px;
    padding: 8px 12px;
    border: 1px solid #333;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.renew-button:hover {
    background-color: #a5b937; /* Cor ao passar o mouse */
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro com opacidade */
    z-index: 9999; /* Garantir que o overlay sobreponha outros elementos */
    display: block; /* Torna o overlay visível ao carregar a página */
}



  
.content-title2 {
    display: flex;
    align-items: center; /* Alinha o texto e o ícone verticalmente */
  
    font-size: 22px;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 10px;
}

/* Defina a animação de fade-in */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}



.notification-icon {
    background-color: #b9ff07c6; /* Cor de fundo */
    border-radius: 50%; /* Torna o ícone redondo */
    display: flex;
    justify-content: center; /* Centraliza o ícone dentro do círculo */
    align-items: center; /* Alinha verticalmente */
    width: 19px; /* Tamanho do círculo */
    height: 19px; /* Tamanho do círculo */
    margin-left: 10px; /* Espaço entre o título e o ícone */
    margin-bottom: 0px;
}

.notification-icon{
    color: #1f0000; /* Cor do ícone */
    font-size: 12px; /* Tamanho do ícone */
}
/* Garantir que o conteúdo ocupe toda a altura da tela e o rodapé fique no fundo */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;  /* Garante que o conteúdo ocupe toda a altura da tela */
    display: flex;
    flex-direction: column;  /* Permite que a página role para baixo */
    background-color: #2f2f2f;
}

.content-wrapper {
    flex: 1;  /* Faz o conteúdo ocupar o espaço disponível, empurrando o rodapé para o final */
    padding-bottom: 100px; /* Espaço para o rodapé */
}
/* Rodapé */
.footer {
    width: 100%;
    background-color: #181818;
    color: #fff;
    display: flex;
    flex-direction: column;  /* Alinha os itens em coluna */
    align-items: flex-start; /* Alinha os itens à esquerda */
    padding: 20px;
    box-sizing: border-box;
    margin-top: 20px;  /* Espaço acima para não grudar no conteúdo */
    padding-left: 310px; /* Adiciona o espaçamento à esquerda */
}

.footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap; /* Permite que os links se ajustem para telas pequenas */
    gap: 20px;
    padding-left: 30px;
}

.footer-links li {
    font-size: 14px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #c3ff2c;
}

.footer-country {
    font-size: 14px;
    text-align: left;  /* Alinha o texto à esquerda */
    margin-top: 10px;   /* Espaçamento entre os links e o copyright */
    padding-left: 30px; /* Adiciona o espaçamento à esquerda no copyright */
}

.copyright {
    width: 100%;
    background-color: #181818;
    color: #aaa;
    text-align: left;
    font-size: 12px;
    padding: 5px 0;
}

#no-subscriptions-message {
    display: none; /* Esconde a mensagem inicialmente */
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 16px;  /* Aumenta o tamanho da fonte para visibilidade */
}