body{
    padding-left: 20px;
    padding-right: 20px;
}


.comment-list{
    list-style: none;
    padding-left: 0; 
}
.custom-comments {
    display: flex;
    margin-top: 20px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 5px;
}

.comment-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    margin-left: 0 !important; /* Ensure no indentation */
}

.comment-item.depth-1 {
    margin-left: 0; /* Remove indentation for top-level comments */
}



.comment-top-row{
    display: flex;
    align-items: center;
}

.comment-info-column{
    display: flex;
    flex-direction: column;
}

.comment-avatar img {
    border-radius: 50%;
    margin-right: 20px;
}

.comment-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.comment-author {
    font-weight: bold;
    margin-bottom: 5px;
}

.comment-date {
    font-size: 12px;
    color: gray;
}

.comment-reply a {
    display: inline-block;
    margin-top: 5px;
    color: #0073aa;
    text-decoration: none;
}

.comment-reply a:hover {
    text-decoration: underline;
}

.comment-item ul.children {
    margin-left: 20px; /* Indent replies */
    padding-left: 20px;
    border-left: 2px solid #ddd; /* Optional visual separation */
}

.no-comments {
    font-style: italic;
    color: #777;
    padding: 10px;
}

.go-to-comments {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.go-to-comments:hover {
    background-color: #005f8d;
}