.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-base-scroll,
.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-base-scroll {
    max-height: calc(100vh - 320px);
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-base-container,
.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-base-container {
    grid-template-rows: repeat(var(--total-itens), auto auto auto) auto;

    gap: 0 5px;
    height: fit-content;

    --duracao-animacao: 100ms;
    --duracao-animacao-2x: calc(var(--duracao-animacao) * 2);
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-base-container {
    grid-template-columns: minmax(100px, 1fr) 10px minmax(100px, 1fr);
    margin: 0 auto;
    padding-top: 60px;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-base-container {
    grid-template-columns: 10px minmax(100px, 1fr);
    width: 100%;
    padding: 10px 10px 0 10px;
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-card,
.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-card {
    align-self: center;

    --translate-card: 0px;
    transform: translateY(var(--translate-card));

    animation: govbr-timeline-card-surgir-vertical var(--duracao-animacao-2x) 1 calc(var(--idx-animacao) * var(--duracao-animacao)) both;
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-card {
    grid-row: calc(var(--idx) * 3 + 1) / span 4;
    grid-column: 1;
    margin: 2px 0;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-card {
    grid-row: calc(var(--idx) * 3 + 1) / span 3;
    grid-column: 2;
    max-width: initial;
    max-height: initial;
    margin: 5px 0;
    margin-left: 15px;
    width: calc(100% - 15px);
    padding: 5px 10px;
    background: linear-gradient(90deg, #f9f9f9 6px, color-mix(in oklab, 80% #f9f9f9, var(--cor-fundo)) 6px, color-mix(in oklab, 80% #f9f9f9, var(--cor-fundo)) 8px, #f9f9f9 8px);
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-card:not(.govbr-timeline-card-impar) {
    justify-self: end;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-card .govbr-timeline-cabecalho {
    grid-template-columns: auto 1fr;
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-card.govbr-timeline-card-possui-filho,
.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-card.govbr-timeline-card-filho {
    margin: 0;
    grid-row: calc(var(--idx) * 3 + 1) / span 3;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-card.govbr-timeline-card-possui-filho {
    margin-bottom: 0;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-card.govbr-timeline-card-filho {
    margin: 0 0 5px 40px;
    width: calc(100% - 40px);
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-card.govbr-timeline-card-impar,
.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-card.govbr-timeline-card-impar {
    align-self: center;
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-card.govbr-timeline-card-impar {
    grid-column: 3;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-card .govbr-timeline-titulo {
    margin: -2px -10px 0 -10px;
    padding: 12px 12px 6px 2px;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-card .govbr-timeline-titulo .govbr-timeline-abrir {
    float: left;
    margin-right: 6px;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-card.govbr-timeline-card-aberto .govbr-timeline-conteudo {
    margin-top: 5px;
    padding: 10px 0;
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-container-icone .govbr-timeline-icone,
.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-container-icone .govbr-timeline-icone {
    grid-row: calc(var(--idx) * 3 + 2);
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-container-icone .govbr-timeline-icone {
    grid-column: 2;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-container-icone .govbr-timeline-icone {
    grid-column: 1;
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-container-icone:not(.govbr-timeline-icone-last)::after,
.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-container-icone:not(.govbr-timeline-icone-last)::after {
    animation: govbr-timeline-icone-barra-surgir-vertical var(--duracao-animacao) 1 calc(var(--idx-animacao) * var(--duracao-animacao)) linear both;
}

.govbr-timeline-base.govbr-timeline-vertical .govbr-timeline-container-icone:not(.govbr-timeline-icone-last)::after {
    grid-column: 2;
    grid-row: calc(var(--idx) * 3 + 2) / span 4;
    height: calc(100% - 25px);
    width: 5px;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-container-icone:not(.govbr-timeline-icone-last)::after {
    width: 1px;
    grid-column: 1;
    grid-row: calc(var(--idx) * 3 + 2) / span 3;
    height: 100%;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-container-icone .govbr-timeline-icone::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 100%;
    height: 1px;
    width: 14px;
    background: var(--cor-fundo);
}

.govbr-timeline-base.govbr-timeline-vertical-lateral .govbr-timeline-container-icone.govbr-timeline-container-icone-filho .govbr-timeline-icone::after {
    width: 42px;
}

.govbr-timeline-base.govbr-timeline-vertical-lateral
    .govbr-timeline-container-icone.govbr-timeline-icone-possui-filho
    + .govbr-timeline-card-filho
    + .govbr-timeline-container-icone-filho::after {
    grid-row: calc(var(--idx) * 3 + 3) / span 3;
}

@keyframes govbr-timeline-card-surgir-vertical {
    0% {
        transform: translateY(var(--translate-card)) rotateX(90deg);
    }
    100% {
        transform: translateY(var(--translate-card)) rotateX(0deg);
    }
}

@keyframes govbr-timeline-icone-barra-surgir-vertical {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}
