/* =============================================================================
   AREA OFFSEC
   -----------------------------------------------------------------------------
   Estilos da area de seguranca ofensiva: monitor de ameacas, console de
   eventos, feed de vulnerabilidades e as paginas internas da area.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DROPDOWN DO MENU
   -------------------------------------------------------------------------- */

/* Item do menu que abre uma lista de submenu */
.menu-item-submenu {
    position: relative;
}

/* Botao que abre o submenu */
.menu-disparador {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
    padding-block: 0.35rem;
    cursor: pointer;
    transition: color var(--transicao);
}

/* Destaca o botao quando o cursor passa por cima */
.menu-disparador:hover,
.menu-disparador[aria-expanded="true"] {
    color: var(--cor-destaque);
}

/* Seta que indica a abertura do submenu */
.menu-seta {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform var(--transicao);
}

/* Gira a seta quando o submenu esta aberto */
.menu-disparador[aria-expanded="true"] .menu-seta {
    transform: rotate(180deg);
}

/* Lista do submenu */
.menu-submenu {
    position: absolute;
    top: calc(100% + 12px);
    left: -14px;
    min-width: 238px;
    padding: 0.5rem;
    background: rgba(16, 20, 28, 0.98);
    border: 1px solid var(--cor-borda-forte);
    border-radius: var(--raio-pequeno);
    box-shadow: var(--sombra-cartao);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}

/* Estado do submenu aberto */
.menu-item-submenu.aberto .menu-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Item do submenu */
.menu-submenu li a {
    display: block;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--cor-texto-suave);
    transition: background-color var(--transicao), color var(--transicao);
}

/* Destaca o item do submenu quando o cursor passa por cima */
.menu-submenu li a:hover {
    background: var(--cor-destaque-tenue);
    color: var(--cor-destaque-claro);
}

/* -----------------------------------------------------------------------------
   2. CONSOLE DE EVENTOS
   -------------------------------------------------------------------------- */

/* Console que registra os eventos conforme chegam */
.console-mini {
    margin-top: 0.75rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    background: rgba(6, 9, 13, 0.82);
    overflow: hidden;
}

/* Cabecalho do console */
.console-mini-cabecalho {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.45rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--cor-borda);
}

/* Circulo colorido do cabecalho do console */
.console-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cor-texto-tenue);
}

/* Titulo do console */
.console-mini-titulo {
    margin-left: 0.35rem;
    font-family: var(--fonte-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--cor-texto-tenue);
}

/* Area onde as linhas do console sao exibidas */
.console-mini-linhas {
    height: 118px;
    padding: 0.55rem 0.7rem;
    overflow: hidden;
    font-family: var(--fonte-mono);
    font-size: 0.64rem;
    line-height: 1.65;
    color: var(--cor-texto-suave);
}

/* Linha registrada no console */
.console-linha {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    animation: entrarLinha 0.32s ease;
}

/* Animacao de entrada da linha do console */
@keyframes entrarLinha {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Marca colorida da categoria do ataque no console */
.console-linha-marca {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Seta da rota no console */
.console-linha-seta {
    color: var(--cor-texto-tenue);
    flex-shrink: 0;
}

/* Categoria do ataque no console */
.console-linha-tipo {
    color: var(--cor-destaque);
    flex-shrink: 0;
}

/* Horario da linha do console */
.console-linha-hora {
    color: var(--cor-texto-tenue);
    flex-shrink: 0;
}

/* Rota da linha do console */
.console-linha-rota {
    color: var(--cor-tecnica);
    flex-shrink: 0;
}

/* Nome do ataque na linha do console */
.console-linha-ataque {
    color: var(--cor-texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
   3. PAINEL DO MONITOR
   -------------------------------------------------------------------------- */

/* Grade do monitor, com o globo e a lista de eventos */
.monitor-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

/* Caixa do monitor */
.monitor-caixa {
    background: linear-gradient(168deg, var(--cor-superficie), rgba(10, 12, 16, 0.92));
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.1rem;
    box-shadow: var(--sombra-cartao);
    position: relative;
    overflow: hidden;
}

/* Linha de destaque no topo da caixa */
.monitor-caixa::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cor-destaque), transparent);
}

/* Cabecalho da caixa do monitor */
.monitor-caixa-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

/* Titulo da caixa do monitor */
.monitor-titulo {
    font-family: var(--fonte-mono);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

/* Area do globo grande */
.globo-grande {
    width: 100%;
    height: auto;
    border-radius: var(--raio-pequeno);
    background: radial-gradient(circle at 50% 45%, rgba(79, 179, 217, 0.08), transparent 68%);
    cursor: grab;
}

/* Area do console grande */
.console-grande .console-mini-linhas {
    height: 260px;
    font-size: 0.68rem;
}

/* -----------------------------------------------------------------------------
   4. LISTA DE EVENTOS
   -------------------------------------------------------------------------- */

/* Lista dos ataques recebidos */
.lista-ameacas {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 0.3rem;
}

/* Item da lista de ataques */
.item-ameaca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.022);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    font-size: 0.79rem;
}

/* Marca colorida da categoria do ataque */
.item-ameaca-marca {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Corpo do item da lista */
.item-ameaca-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex-grow: 1;
}

/* Nome do ataque */
.item-ameaca-nome {
    color: var(--cor-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rota do ataque */
.item-ameaca-rota {
    font-family: var(--fonte-mono);
    font-size: 0.66rem;
    color: var(--cor-texto-tenue);
}

/* Contagem de ocorrencias */
.item-ameaca-contagem {
    flex-shrink: 0;
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    color: var(--cor-destaque);
}

/* -----------------------------------------------------------------------------
   4. FAIXA DE EVENTOS NO TOPO DO MONITOR
   -------------------------------------------------------------------------- */

/* Faixa que passa com os últimos eventos */
.monitor-ticker {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    background: rgba(6, 9, 13, 0.6);
    overflow: hidden;
}

/* Rótulo fixo da faixa */
.monitor-ticker-rotulo {
    display: grid;
    place-items: center;
    padding: 0 0.7rem;
    background: var(--cor-destaque-tenue);
    color: var(--cor-destaque);
    font-family: var(--fonte-mono);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

/* Área de rolagem da faixa */
.monitor-ticker-faixa {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 0.45rem 0.8rem;
    overflow: hidden;
    flex: 1;
    min-width: 0;
}

/* Item da faixa */
.monitor-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    font-family: var(--fonte-mono);
    font-size: 0.68rem;
    white-space: nowrap;
    color: var(--cor-texto-suave);
    animation: entrarLinha 0.32s ease;
}

/* Bandeirinha do país na faixa */
.monitor-ticker-bandeira {
    font-size: 0.9rem;
    line-height: 1;
}

/* Rota exibida na faixa */
.monitor-ticker-rota {
    color: var(--cor-tecnica);
}

/* Categoria exibida na faixa */
.monitor-ticker-tipo {
    color: var(--cor-destaque);
}

/* Nome do ataque exibido na faixa */
.monitor-ticker-ataque {
    color: var(--cor-texto-tenue);
}

/* -----------------------------------------------------------------------------
   5. BANDEIRINHAS E CONTADORES
   -------------------------------------------------------------------------- */

/* Bandeirinha do país no console */
.console-linha-bandeira {
    font-size: 0.78rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Bandeirinha do país na lista */
.item-ameaca-bandeira {
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   6. FILTROS
   -------------------------------------------------------------------------- */

/* Grupo dos botoes de filtro */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

/* Botao de filtro */
.filtro {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--cor-borda-forte);
    border-radius: 999px;
    font-family: var(--fonte-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
    cursor: pointer;
    transition: all var(--transicao);
}

/* Destaca o filtro quando o cursor passa por cima */
.filtro:hover {
    border-color: var(--cor-destaque);
    color: var(--cor-destaque);
}

/* Estado do filtro ativo */
.filtro.filtro-ativo {
    background: var(--cor-destaque-tenue);
    border-color: var(--cor-destaque);
    color: var(--cor-destaque-claro);
}

/* -----------------------------------------------------------------------------
   6. FAIXA DE ALERTA DE VULNERABILIDADES
   -------------------------------------------------------------------------- */

/* Faixa de alerta das vulnerabilidades */
.faixa-alerta {
    padding-block: 1.6rem;
    background:
        linear-gradient(90deg, rgba(239, 106, 90, 0.12), rgba(239, 106, 90, 0.03) 55%, transparent),
        var(--cor-fundo-alt);
    border-block: 1px solid rgba(239, 106, 90, 0.28);
}

/* Conteudo da faixa de alerta */
.faixa-alerta-conteudo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.3rem;
    align-items: center;
}

/* Marca de alerta */
.faixa-alerta-marca {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(239, 106, 90, 0.14);
    border: 1px solid rgba(239, 106, 90, 0.42);
    color: var(--cor-ameaca-alta);
    font-family: var(--fonte-mono);
    font-size: 1.3rem;
    font-weight: 700;
}

/* Texto da faixa de alerta */
.faixa-alerta-texto {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

/* Titulo da faixa de alerta */
.faixa-alerta-titulo {
    color: var(--cor-texto);
    font-size: 1.02rem;
}

/* Descricao da faixa de alerta */
.faixa-alerta-descricao {
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
    max-width: 78ch;
}

/* Destaque com o produto mais citado na janela */
.faixa-alerta-destaque {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(239, 106, 90, 0.12);
    border: 1px solid rgba(239, 106, 90, 0.3);
    color: #f3a89c;
    font-family: var(--fonte-mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.faixa-alerta-destaque:empty {
    display: none;
}

/* Grupo de numeros da faixa de alerta */
.faixa-alerta-numeros {
    display: flex;
    gap: 1.8rem;
}

/* Numero da faixa de alerta */
.faixa-alerta-numero {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Valor do numero da faixa de alerta */
.faixa-alerta-numero-valor {
    font-family: var(--fonte-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cor-ameaca-alta);
    line-height: 1.1;
}

/* Rotulo do numero da faixa de alerta */
.faixa-alerta-numero-rotulo {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--cor-texto-tenue);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   7. LISTA DE VULNERABILIDADES
   -------------------------------------------------------------------------- */

/* Aviso de carregamento do feed */
.carregando-feed {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.4rem 0;
    font-family: var(--fonte-mono);
    font-size: 0.8rem;
    color: var(--cor-texto-tenue);
}

/* Aviso de erro do feed */
.erro-feed {
    padding: 1.1rem 1.2rem;
    border: 1px solid rgba(239, 106, 90, 0.3);
    border-radius: var(--raio-pequeno);
    background: rgba(239, 106, 90, 0.08);
    color: #f5b3a9;
    font-size: 0.9rem;
}

/* Lista de vulnerabilidades */
.lista-vulnerabilidades {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* Item da lista de vulnerabilidades */
.item-vulnerabilidade {
    padding: 1.15rem 1.25rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-left: 2px solid var(--cor-ameaca);
    border-radius: var(--raio-pequeno);
    transition: border-color var(--transicao), transform var(--transicao);
}

/* Eleva o item quando o cursor passa por cima */
.item-vulnerabilidade:hover {
    transform: translateX(3px);
}

/* Cabecalho do item de vulnerabilidade */
.item-vuln-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

/* Identificador do aviso */
.item-vuln-id {
    font-family: var(--fonte-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--cor-texto);
}

/* Etiqueta de severidade */
.item-vuln-severidade {
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    font-family: var(--fonte-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Severidade critica */
.severidade-critica {
    background: rgba(239, 106, 90, 0.16);
    border: 1px solid rgba(239, 106, 90, 0.45);
    color: #f89b8d;
}

/* Severidade alta */
.severidade-alta {
    background: rgba(240, 180, 74, 0.15);
    border: 1px solid rgba(240, 180, 74, 0.4);
    color: #f3c877;
}

/* Severidade media */
.severidade-media {
    background: rgba(79, 179, 217, 0.13);
    border: 1px solid rgba(79, 179, 217, 0.35);
    color: #86cbe6;
}

/* Marcador de exploracao conhecida */
.item-vuln-kev {
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    background: rgba(181, 124, 240, 0.16);
    border: 1px solid rgba(181, 124, 240, 0.42);
    color: #c9a6f5;
    font-family: var(--fonte-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

/* Pontuacao do aviso */
.item-vuln-cvss {
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    color: var(--cor-texto-tenue);
}

/* Data de publicacao do aviso */
.item-vuln-data {
    margin-left: auto;
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    color: var(--cor-texto-tenue);
}

/* Produto afetado pelo aviso */
.item-vuln-produto {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 0.3rem;
}

/* Descricao resumida do aviso */
.item-vuln-descricao {
    font-size: 0.88rem;
    margin-bottom: 0.6rem;
}

/* Link para o aviso completo */
.item-vuln-link {
    font-family: var(--fonte-mono);
    font-size: 0.74rem;
    color: var(--cor-destaque);
    transition: color var(--transicao);
}

/* Destaca o link quando o cursor passa por cima */
.item-vuln-link:hover {
    color: var(--cor-destaque-claro);
}

/* Nota de atribuicao da base de dados */
.nota-atribuicao {
    margin-top: 1.6rem;
    font-size: 0.76rem;
    color: var(--cor-texto-tenue);
}

/* -----------------------------------------------------------------------------
   8. ETAPAS DO TRABALHO
   -------------------------------------------------------------------------- */

/* Lista de etapas */
.etapas-lista {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Etapa do trabalho */
.etapa {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1.05rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
}

/* Numero da etapa */
.etapa-numero {
    font-family: var(--fonte-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cor-destaque);
    flex-shrink: 0;
    padding-top: 0.1rem;
}

/* Titulo da etapa */
.etapa-titulo {
    display: block;
    font-size: 0.96rem;
    color: var(--cor-texto);
}

/* Descricao da etapa */
.etapa-descricao {
    display: block;
    font-size: 0.87rem;
    color: var(--cor-texto-suave);
    margin-top: 0.15rem;
}

/* -----------------------------------------------------------------------------
   9. BLOCOS DA AREA OFFSEC
   -------------------------------------------------------------------------- */

/* Grade dos blocos da area OFFSEC */
.grade-blocos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.1rem;
}

/* Bloco da area OFFSEC */
.bloco-offsec {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.5rem 1.4rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    transition: border-color var(--transicao), transform var(--transicao);
}

/* Eleva o bloco quando o cursor passa por cima */
.bloco-offsec:hover {
    border-color: var(--cor-destaque-borda);
    transform: translateY(-3px);
}

/* Marcador numerado do bloco */
.bloco-offsec-marca {
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--cor-destaque);
}

/* Titulo do bloco */
.bloco-offsec-titulo {
    font-size: 1.14rem;
}

/* Resumo do bloco */
.bloco-offsec-resumo {
    font-size: 0.92rem;
}

/* -----------------------------------------------------------------------------
   10. CARDS DE CARTILHA
   -------------------------------------------------------------------------- */

/* Grade das cartilhas */
.grade-cartilhas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.05rem;
}

/* Cartao de cartilha */
.cartao-cartilha {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.35rem 1.3rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

/* Titulo da cartilha */
.cartao-cartilha-titulo {
    font-size: 1.04rem;
}

/* Publico da cartilha */
.cartao-cartilha-publico {
    font-family: var(--fonte-mono);
    font-size: 0.66rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cor-tecnica);
}

/* Lista do conteudo da cartilha */
.cartao-cartilha-lista {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    margin-top: 0.2rem;
}

/* Item da lista da cartilha */
.cartao-cartilha-lista li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    color: var(--cor-texto-suave);
}

/* Marcador da lista da cartilha */
.cartao-cartilha-lista li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cor-destaque);
}

/* -----------------------------------------------------------------------------
   11. RESPONSIVIDADE
   -------------------------------------------------------------------------- */

/* Ajustes aplicados nas telas de tablet */
@media (max-width: 980px) {
    /* O monitor passa a ter uma coluna */
    .monitor-grade {
        grid-template-columns: 1fr;
    }

    /* A faixa de alerta passa a ter duas linhas */
    .faixa-alerta-conteudo {
        grid-template-columns: auto minmax(0, 1fr);
    }

    /* Os numeros da faixa de alerta ficam a esquerda */
    .faixa-alerta-numeros {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    /* Os numeros da faixa de alerta ficam alinhados a esquerda */
    .faixa-alerta-numero {
        align-items: flex-start;
    }
}

/* Ajustes aplicados nas telas de celular */
@media (max-width: 780px) {
    /* O submenu deixa de ser flutuante */
    .menu-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0.3rem 0 0.5rem 0.8rem;
        min-width: 0;
        display: none;
    }

    /* Estado do submenu aberto */
    .menu-item-submenu.aberto .menu-submenu {
        display: block;
    }
}

/* Ajustes aplicados nas telas de celular */
@media (max-width: 560px) {
    /* A faixa de alerta fica em uma coluna */
    .faixa-alerta-conteudo {
        grid-template-columns: 1fr;
    }

    /* Os numeros da faixa de alerta ficam em linha */
    .faixa-alerta-numeros {
        gap: 1.2rem;
    }

    /* A data do aviso fica no inicio da linha */
    .item-vuln-data {
        margin-left: 0;
        width: 100%;
    }
}