.usernamecrypto {
    color: #3c8dbc;
}

.timeline {
    border-left: 3px solid #727cf5;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    background: rgba(114, 124, 245, 0.09);
    margin: 0 auto;
    margin-right: 0 ;
    letter-spacing: 0.2px;
    position: relative;
    line-height: 1.4em;
    font-size: 1.03em;
    padding: 20px;
    list-style: none;
    text-align: left;
    max-width: 80%;
}

@media (max-width: 767px) {
    .timeline {
        max-width: 98%;
        padding: 25px;
    }
}

.timeline h1 {
    font-weight: 300;
    font-size: 1.4em;
}

.timeline h2,
.timeline h3 {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 10px;
}

.timeline .event {
    border-bottom: 1px dashed #e8ebf1;
    padding-bottom: 25px;
    margin-bottom: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .timeline .event {
        padding-top: 30px;
    }
}

.timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline .event:before,
.timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .event:before {
    left: -207px;
    content: attr(data-date);
    text-align: right;
    font-weight: 100;
    font-size: 0.9em;
    min-width: 120px;
}

@media (max-width: 767px) {
    .timeline .event:before {
        left: 0px;
        text-align: left;
    }
}

.timeline .event:after {
    -webkit-box-shadow: 0 0 0 3px #727cf5;
    box-shadow: 0 0 0 3px #727cf5;
    left: -55.8px;
    background: #fff;
    border-radius: 50%;
    height: 9px;
    width: 9px;
    content: "";
    top: 5px;
}

@media (max-width: 767px) {
    .timeline .event:after {
        left: -31.8px;
    }
}

.rtl .timeline {
    border-left: 0;
    text-align: right;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-right: 3px solid #727cf5;
}

.rtl .timeline .event::before {
    left: 0;
    right: -170px;
}

/* Seletor de idioma no topo (relato do Gesiel, 2026-10-19): o tema fixa a
   largura do .pc-head-link em 34px porque pensa so no icone; com o NOME do
   idioma do lado, o icone e o texto ficavam um por cima do outro. Aqui o botao
   do idioma passa a caber no proprio conteudo, com folga lateral e espaco entre
   o icone e o nome. Vale a partir do breakpoint `sm` (576px), o mesmo do
   `d-none d-sm-inline` do nome: abaixo dele o texto nao aparece e o botao
   continua quadrado, como os outros do topo (que nao mudam). */
@media (min-width: 576px) {
    #header-language .pc-head-link {
        width: auto;
        padding: 0 10px;
        gap: 6px;
    }
}

/* Coluna de ACAO DE LINHA presa na direita (relato do Gesiel, 2026-10-19): a
   tabela de eventos tem ~1800px dentro de um container de ~930px e o botao
   Aprender ficava fora da tela ate rolar tudo para o lado. A classe vem do
   objeto de tabela (`.aa1-actions-col`, nas colunas de acao) e vale no th e no
   td.

   O fundo e OPOSTO de proposito: o `--bs-table-bg` das celulas e transparente
   (quem aparece e o card, #fff) e, sem fundo proprio, o texto que rola por
   baixo da coluna presa passaria por tras dela. O tom da linha e recomposto
   SOBRE esse fundo opaco nas regras de zebra/hover mais abaixo (o
   `--bs-table-accent-bg` sozinho nao basta: o tema aplica a cor no TR, e a
   base opaca a esconderia).

   Os seletores levam o container (`.table-responsive`, o dono da rolagem) e a
   tabela: no th eles precisam vencer o `position: relative` que o CSS do
   DataTables poe nos cabecalhos ordenaveis (a tela do painel carrega o CSS do
   DataTables DEPOIS deste arquivo, no bloco extrastyle). */
div.table-responsive table.dataTable thead > tr > th.aa1-actions-col,
div.table-responsive table.dataTable tbody > tr > td.aa1-actions-col {
    position: sticky;
    right: 0;
    z-index: 2;
}

div.table-responsive table.dataTable thead > tr > th.aa1-actions-col {
    /* o cabecalho do tema ja e opaco (cor propria do thead); aqui so sobe a
       pilha, para o th preso ficar acima das celulas presas. */
    z-index: 3;
}

div.table-responsive table.dataTable tbody > tr > td.aa1-actions-col {
    background-color: var(--bs-card-bg, #ffffff);
    background-image: linear-gradient(var(--bs-table-accent-bg, transparent),
                                      var(--bs-table-accent-bg, transparent));
}

/* A zebra e o hover do TEMA pintam o TR, nao a celula: `.table-striped tbody
   tr:nth-of-type(2n+1)` e `.table-hover tbody tr:hover` usam
   rgba(105, 27, 27, 0.03). A base opaca da celula presa cobriria essa cor e a
   coluna ficaria mais clara que a vizinha (medido pelo rev-1: 242 contra 237 na
   zebra). Aqui o mesmo tom e recomposto sobre a base; a sombra por celula do
   DataTables (o realce de zebra/hover dele) vale para ela como para as
   vizinhas. */
div.table-responsive table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > td.aa1-actions-col,
div.table-responsive table.dataTable.table-hover > tbody > tr:hover > td.aa1-actions-col {
    background-image: linear-gradient(rgba(105, 27, 27, 0.03), rgba(105, 27, 27, 0.03));
}

.rtl .timeline .event::after {
    left: 0;
    right: -55.8px;
}