html {
    --background: #212226;
    --primary-timeline: #00af41;
    --line: #a6a7b5;
    --line-dark: #3d3d3f;
    --red: #f01100
    }

    body {
    /*background-color: var(--line-dark);*/
    /*font-family: Montserrat;*/
    /*letter-spacing: 0.03em;*/
    /*color: white;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*justify-content: center;*/
    /*height: 100vh;*/
    }

    article {
    display: flex;
    justify-content: flex-start;
    align-items: center;  
    padding: .25rem .5rem 0 1rem;
    background: var(--background);
    margin-bottom: 4px;
    }

    article .article-data {
        padding-right: 10px;
    }


    dl {
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    }

    .cell {
    grid-column: span 2;
    display: flex;
    padding: 0 1rem;
    }

    .cell:nth-child(2) {
    grid-column: span 3;
    justify-content: flex-end;
    }

    .cell-content {
    display: inline-flex;
    flex-direction: column;
    border-left: 1px dashed var(--line);
    position: relative;
    background: var(--background);
    }

    .cell-content::after {
    content: '';
    display: block;
    background: var(--line);
    height: .5rem;
    width: .5rem;
    position: absolute;
    left: -.25rem;
    border-radius: 50%;
    }
    .container-action {
    caret-color: transparent; /* Define a cor do cursor como transparente */
    outline: none; 
    }

    .hora {
    background: var(--background);
    padding-bottom: .25em;
    position: relative;
    left: -.25rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    }
    .hora.hora-Entrou {
        color: var(--primary-timeline);
    }
    .hora.hora-Saiu {
        color: var(--red);
    }
    

    .tipo-transacao {
    background: var(--background);
    margin: 0;
    position: relative;
    left: -.25rem;
    color: #f4f4f6;

    }

    .container-action:hover > .tipo-transacao,
    .container-action:hover > .hora {
        /* transform: scale(1.1); */
        cursor: pointer;
        color: #7e7f88;
        transition: .3s; 
        caret-color: transparent; /* Define a cor do cursor como transparente */
        outline: none; 
        /* box-shadow: -15px 3px 36px -4px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1); */

    }

    .cell:nth-child(odd) .cell-content {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    }

    .cell:nth-child(odd) .cell-content::after {
    bottom: -.25rem;
    }

    .cell:nth-child(odd) dd:last-child {
    padding-bottom: .5rem;
    }

    .cell:nth-child(even) .cell-content {
    padding-top: 1rem;
    position: relative;
    top: -1px;
    border-top: 1px solid var(--line);
    }

    .cell:nth-child(even) .cell-content::after {
    top: -.25rem;
    }

    .cell:nth-child(even) .hora {
    padding-top: .5rem;
    }

    .cell:nth-child(even) .tipo-transacao {
    flex-grow: 1;
    }

    .cell:last-child .cell-content {
    border-top-color: transparent;
    border-bottom-color: transparent;
    }