.conversation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}    
.conversation ul li{
    position: relative;
    padding-left: 2.75rem;
    padding-right: 2.75rem;
}  
.conversation ul li:nth-child(2n+2) {
    text-align: right;        
} 
.conversation ul li:nth-child(2n+1)::before {
    content: '';
    position: absolute;
    left: 0;
}
.conversation ul li:nth-child(2n+2)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;    
}
.conversation ul li::before, .conversation ul li::after{
    width: 40px; 
    height: 40px;
    background-image: url('/media/manual/conversation/vaartaalaap.png');
}
.conversation ul li.F::before, .conversation ul li.F::after {    
    background-position: -10px -10px;
}
.conversation ul li.M::before, .conversation ul li.M::after {    
    background-position: -70px -10px;
}
.conversation ul li p {
    border: 1px solid #eee;
    padding: 0.5rem;
    border-radius: 4px;
    position: relative;
    background: #eee;
}
.conversation ul li:nth-child(2n+1) p::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #eee;
    position: absolute;
    left: -10px;
    top: 6px;
}
.conversation ul li:nth-child(2n+2) p::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #eee;
    right: -10px;
    position: absolute;
    top: 7px;
}