CSS :Nth-Child(Even) - Problems

Question

Hello. I am developing a program and on one page I had to use "col" to make a layout similar to "Tables". I can’t use "Tables" because the line needs to expand downward when you click a certain button. But I need to switch colors from one line to another, table pattern (white / gray / white type...)

I tried using css :Nth-Child(Even), either by class or by id, in none of the ways did I get the expected result. Any ideas?

<div class="page" data-name="mensagens">
<div class="navbar">
    <div class="navbar-inner cor-padrao">
        <div class="left sumir">
            <a href="#" class="link back"> <i class="icon icon-back"></i> </a>
        </div>
        <div class="title">
            <h3>Mensagens</h3>
        </div>
    </div>
</div>
<div class="page-content">
    <div class="row linha-botao">
        <div class="col-100 tablet-100 desktop-100">
            <div class="card">
                <div class="card-header">
                    <h1>Últimas Mensagens (3)</h1>
                </div>
                <div class="card-content">
                    <div class="accordion-item alterna">
                        <div class="row">
                            <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                <p><b class="sumir-agora">Data:&ensp;</b>15/05/2018</p>
                            </div>
                            <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                <p class="truncar"><b class="sumir-agora">Remetente:&ensp;</b>Gabriel Marinho</p>
                            </div>
                            <div class="col-100 tablet-40 desktop-50 card-content-padding">
                                <p class="truncar"><b class="sumir-agora">Assunto:&ensp;</b>Alterar as fotos do Barra Eye Clinic e Facebook</p>
                            </div>
                            <div class="col-100 tablet-20 desktop-10 card-content-padding coluna-acao accordion-item-toggle">
                                <b class="sumir-agora">Ações:&ensp;</b>
                                <a href="#" class="link popup-open" data-popup=".popup-services"><i class="material-icons dots">reply</i></a>
                                <a href="#" class="link"><i class="material-icons dots green">check</i></a>
                            </div>
                            <div class="col-100 tablet-100 desktop-100 accordion-item-content">
                                <div class="row block" style="background-color: #ececec; padding: 20px;">
                                    <div class="col-100 tablet-100 desktop-100">
                                        <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                                        <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <hr>
                                        <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <hr>
                                        <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>18/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <div class="list no-hairlines-md" style="margin: 0px">
                                            <ul>
                                                <li class="item-content item-input">
                                                    <div class="item-inner">
                                                        <div class="item-title item-floating-label">Responder</div>
                                                        <div class="item-input-wrap">
                                                            <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                                            <span class="input-clear-button"></span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="accordion-item alterna">
                        <div class="row">
                            <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                <p><b class="sumir-agora">Data:&ensp;</b>15/05/2018</p>
                            </div>
                            <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                <p class="truncar"><b class="sumir-agora">Remetente:&ensp;</b>Gabriel Marinho</p>
                            </div>
                            <div class="col-100 tablet-40 desktop-50 card-content-padding">
                                <p class="truncar"><b class="sumir-agora">Assunto:&ensp;</b>Alterar as fotos do Barra Eye Clinic e Facebook</p>
                            </div>
                            <div class="col-100 tablet-20 desktop-10 card-content-padding coluna-acao accordion-item-toggle">
                                <b class="sumir-agora">Ações:&ensp;</b>
                                <a href="#" class="link popup-open" data-popup=".popup-services"><i class="material-icons dots">reply</i></a>
                                <a href="#" class="link"><i class="material-icons dots green">check</i></a>
                            </div>
                            <div class="col-100 tablet-100 desktop-100 accordion-item-content">
                                <div class="row block" style="background-color: #ececec; padding: 20px;">
                                    <div class="col-100 tablet-100 desktop-100">
                                        <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                                        <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <hr>
                                        <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <hr>
                                        <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>18/05/2018</b></p>
                                        <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                        <div class="list no-hairlines-md" style="margin: 0px">
                                            <ul>
                                                <li class="item-content item-input">
                                                    <div class="item-inner">
                                                        <div class="item-title item-floating-label">Responder</div>
                                                        <div class="item-input-wrap">
                                                            <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                                            <span class="input-clear-button"></span>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popup popup-services">
        <div class="view popup-view">
            <div class="page">
                <div class="navbar">
                    <div class="navbar-inner" style="padding-left: 20px">
                        <div>
                            <h2>Responder</h2>
                        </div>
                        <div class="right">
                            <a href="#" class="link">15/05/2018</a>
                        </div>
                    </div>
                </div>
                <div class="page-content block">
                    <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                    <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                    <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                    <hr>
                    <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                    <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                    <hr>
                    <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                    <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                    <div class="list no-hairlines-md" style="margin: 0px">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-title item-floating-label">Responder</div>
                                    <div class="item-input-wrap">
                                        <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                        <span class="input-clear-button"></span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row"></div>
                    <div class="espaco-vazio"></div>
                </div>
            </div>
        </div>
    </div>
</div>

I don’t understand why it’s not working. The Divs I want the background to be colored are with the alternating class. And in CSS it’s like

div .alterna:nth-child(even) {background-colr:red !important};

Answer 1

Dude your problem is because it has a tag <hr> between a block of content and another, thus it "breaks" the ordering of your Nth-Child.

To fix this change nth-child for nth-of-type ai it only indents the elements with the same class and ignores the other tags that exist between one and the other understands. See more details in this answer that has an example Bos of the difference between these two types What is the difference between :Nth-Child and :Nth-of-type?

Here is the concept applied in your code:

.card-content .alterna:nth-of-type(odd) { 
    background-color: #f00;
}

    <div class="page" data-name="mensagens">
        <div class="navbar">
            <div class="navbar-inner cor-padrao">
                <div class="left sumir">
                    <a href="#" class="link back"> <i class="icon icon-back"></i> </a>
                </div>
                <div class="title">
                    <h3>Mensagens</h3>
                </div>
            </div>
        </div>
        <div class="page-content">
            <div class="row linha-botao">
                <div class="col-100 tablet-100 desktop-100">
                    <div class="card">
                        <div class="card-header">
                            <h1>Últimas Mensagens (3)</h1>
                        </div>
                        <div class="card-content">
                            <div class="accordion-item alterna">
                                <div class="row">
                                    <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                        <p><b class="sumir-agora">Data:&ensp;</b>15/05/2018</p>
                                    </div>
                                    <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                        <p class="truncar"><b class="sumir-agora">Remetente:&ensp;</b>Gabriel Marinho</p>
                                    </div>
                                    <div class="col-100 tablet-40 desktop-50 card-content-padding">
                                        <p class="truncar"><b class="sumir-agora">Assunto:&ensp;</b>Alterar as fotos do Barra Eye Clinic e Facebook</p>
                                    </div>
                                    <div class="col-100 tablet-20 desktop-10 card-content-padding coluna-acao accordion-item-toggle">
                                        <b class="sumir-agora">Ações:&ensp;</b>
                                        <a href="#" class="link popup-open" data-popup=".popup-services"><i class="material-icons dots">reply</i></a>
                                        <a href="#" class="link"><i class="material-icons dots green">check</i></a>
                                    </div>
                                    <div class="col-100 tablet-100 desktop-100 accordion-item-content">
                                        <div class="row block" style=" padding: 20px;">
                                            <div class="col-100 tablet-100 desktop-100">
                                                <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                                                <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <hr>
                                                <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <hr>
                                                <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>18/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <div class="list no-hairlines-md" style="margin: 0px">
                                                    <ul>
                                                        <li class="item-content item-input">
                                                            <div class="item-inner">
                                                                <div class="item-title item-floating-label">Responder</div>
                                                                <div class="item-input-wrap">
                                                                    <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                                                    <span class="input-clear-button"></span>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class="accordion-item alterna">
                                <div class="row">
                                    <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                        <p><b class="sumir-agora">Data:&ensp;</b>15/05/2018</p>
                                    </div>
                                    <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                        <p class="truncar"><b class="sumir-agora">Remetente:&ensp;</b>Gabriel Marinho</p>
                                    </div>
                                    <div class="col-100 tablet-40 desktop-50 card-content-padding">
                                        <p class="truncar"><b class="sumir-agora">Assunto:&ensp;</b>Alterar as fotos do Barra Eye Clinic e Facebook</p>
                                    </div>
                                    <div class="col-100 tablet-20 desktop-10 card-content-padding coluna-acao accordion-item-toggle">
                                        <b class="sumir-agora">Ações:&ensp;</b>
                                        <a href="#" class="link popup-open" data-popup=".popup-services"><i class="material-icons dots">reply</i></a>
                                        <a href="#" class="link"><i class="material-icons dots green">check</i></a>
                                    </div>
                                    <div class="col-100 tablet-100 desktop-100 accordion-item-content">
                                        <div class="row block" style=" padding: 20px;">
                                            <div class="col-100 tablet-100 desktop-100">
                                                <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                                                <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <hr>
                                                <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <hr>
                                                <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>18/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <div class="list no-hairlines-md" style="margin: 0px">
                                                    <ul>
                                                        <li class="item-content item-input">
                                                            <div class="item-inner">
                                                                <div class="item-title item-floating-label">Responder</div>
                                                                <div class="item-input-wrap">
                                                                    <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                                                    <span class="input-clear-button"></span>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item alterna">
                                <div class="row">
                                    <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                        <p><b class="sumir-agora">Data:&ensp;</b>15/05/2018</p>
                                    </div>
                                    <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                        <p class="truncar"><b class="sumir-agora">Remetente:&ensp;</b>Gabriel Marinho</p>
                                    </div>
                                    <div class="col-100 tablet-40 desktop-50 card-content-padding">
                                        <p class="truncar"><b class="sumir-agora">Assunto:&ensp;</b>Alterar as fotos do Barra Eye Clinic e Facebook</p>
                                    </div>
                                    <div class="col-100 tablet-20 desktop-10 card-content-padding coluna-acao accordion-item-toggle">
                                        <b class="sumir-agora">Ações:&ensp;</b>
                                        <a href="#" class="link popup-open" data-popup=".popup-services"><i class="material-icons dots">reply</i></a>
                                        <a href="#" class="link"><i class="material-icons dots green">check</i></a>
                                    </div>
                                    <div class="col-100 tablet-100 desktop-100 accordion-item-content">
                                        <div class="row block" style=" padding: 20px;">
                                            <div class="col-100 tablet-100 desktop-100">
                                                <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                                                <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <hr>
                                                <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <hr>
                                                <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>18/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <div class="list no-hairlines-md" style="margin: 0px">
                                                    <ul>
                                                        <li class="item-content item-input">
                                                            <div class="item-inner">
                                                                <div class="item-title item-floating-label">Responder</div>
                                                                <div class="item-input-wrap">
                                                                    <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                                                    <span class="input-clear-button"></span>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item alterna">
                                <div class="row">
                                    <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                        <p><b class="sumir-agora">Data:&ensp;</b>15/05/2018</p>
                                    </div>
                                    <div class="col-100 tablet-20 desktop-20 card-content-padding">
                                        <p class="truncar"><b class="sumir-agora">Remetente:&ensp;</b>Gabriel Marinho</p>
                                    </div>
                                    <div class="col-100 tablet-40 desktop-50 card-content-padding">
                                        <p class="truncar"><b class="sumir-agora">Assunto:&ensp;</b>Alterar as fotos do Barra Eye Clinic e Facebook</p>
                                    </div>
                                    <div class="col-100 tablet-20 desktop-10 card-content-padding coluna-acao accordion-item-toggle">
                                        <b class="sumir-agora">Ações:&ensp;</b>
                                        <a href="#" class="link popup-open" data-popup=".popup-services"><i class="material-icons dots">reply</i></a>
                                        <a href="#" class="link"><i class="material-icons dots green">check</i></a>
                                    </div>
                                    <div class="col-100 tablet-100 desktop-100 accordion-item-content">
                                        <div class="row block" style=" padding: 20px;">
                                            <div class="col-100 tablet-100 desktop-100">
                                                <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                                                <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <hr>
                                                <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <hr>
                                                <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>18/05/2018</b></p>
                                                <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                                                <div class="list no-hairlines-md" style="margin: 0px">
                                                    <ul>
                                                        <li class="item-content item-input">
                                                            <div class="item-inner">
                                                                <div class="item-title item-floating-label">Responder</div>
                                                                <div class="item-input-wrap">
                                                                    <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                                                    <span class="input-clear-button"></span>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup popup-services">
                <div class="view popup-view">
                    <div class="page">
                        <div class="navbar">
                            <div class="navbar-inner" style="padding-left: 20px">
                                <div>
                                    <h2>Responder</h2>
                                </div>
                                <div class="right">
                                    <a href="#" class="link">15/05/2018</a>
                                </div>
                            </div>
                        </div>
                        <div class="page-content block">
                            <h2 style="font-size: 24px; margin: 0px">Correção Site Aramil (Fotos e Textos)</h2>
                            <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                            <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                            <hr>
                            <p style="font-size: 13px; margin: 0px"><b>Resposta</b>&nbsp;-&nbsp;<b>16/05/2018</b></p>
                            <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                            <hr>
                            <p style="font-size: 13px; margin: 0px"><b>João Carlos</b>&nbsp;-&nbsp;<b>15/05/2018</b></p>
                            <p style="font-size: 16px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tortor non mauris ornare ultrices. Etiam fermentum sem a euismod tempor. Pellentesque placerat a augue sed congue. </p>
                            <div class="list no-hairlines-md" style="margin: 0px">
                                <ul>
                                    <li class="item-content item-input">
                                        <div class="item-inner">
                                            <div class="item-title item-floating-label">Responder</div>
                                            <div class="item-input-wrap">
                                                <textarea class="resizable" placeholder="Responda aqui..."></textarea>
                                                <span class="input-clear-button"></span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="row"></div>
                            <div class="espaco-vazio"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>