div#comments {
    margin:20px 0px;
}

div#comments ul.children {
    padding-left:0px!important;
}

#comments .comment-list {
    border-bottom:0!important;
}

div#comments ul.children li.depth-3 {
    margin-left:20px!important;
}

form#commentform {
    background:none;
    padding:0;
}

.comment-sorting {
    margin-bottom: 20px;
}

.comment-sorting label[for=comment-sort] {
    display: inline;
    width: auto;
    font-size:12pt;
}

.comment-sorting select#comment-sort {
    display: inline;
    width: auto;
    border: 0 !important;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size:12pt;
    color:#000000;
    height:21px;
}


p.comment-form-comment {
    width:100%!important;
    display:block;
}

.comment-respond .form-submit {
    display: flex; /* Use flexbox to align items horizontally */
    gap: 10px; /* Add some space between the submit button and the character count */
    width: 100%!important;
}

p.comment-form-comment textarea#comment {
    height:100px!important;
    box-shadow: 2px 2px 7px rgba(0, 0, 0, .07);
    border:1px solid rgba(0, 0, 0, .07)!important;
    border-bottom: 1px solid rgba(0, 0, 0, .07)!important;
    border-radius:5px!important;
    color:#333333!important;
    padding:12px!important;
    font-size:12pt!important;
}

ol.comment-list div.comment-respond {
    margin:20px!important;
}

form.comment-form input#submit {
    display:none;
    margin-bottom:20px!important;
}

div#comments p.comments-area-notification {
    font-size:10pt;
}

.comments-area article.comment-body {
    padding:12px!important;
}

.comments-area article.comment-body a.comment-reply-login {
    display:none!important;
}

li.comment.depth-1 {
    border:1px solid rgba(0, 0, 0, .07)!important;
    border-bottom: 1px solid rgba(0, 0, 0, .07)!important;
    border-radius:5px!important;
    margin-bottom:20px;
}

li.comment.depth-2 {
    margin-left:30px;
}

footer.comment-meta div.comment-author {
    font-size:12pt!important;
    color:#333333!important;
    display:block!important;
}
footer.comment-meta div.comment-author b.fn {
    font-weight:bold!important;
}
footer.comment-meta div.comment-metadata {
    font-size:10pt!important;
    color:#999999!important;
    display:block!important;
    margin:5px 0 12px 0!important;
}

article.comment-body div.comment-content {
    font-size:12pt!important;
    color:#333333!important;
    margin:0px 0px 6px 0px!important;
    line-height:16pt!important;
}

article.comment-body {
    display: block!important;
    padding: 20px; /* Optional: Add padding to the comment body */
    position: relative; /* For any positioning needs */
}

article.comment-body div.comment-content div.tagespresse-voting {
    margin-top:20px!important;
}

.tagespresse-vote-counts-container {
    display: flex; /* Enables flexbox for the vote counts */
    justify-content: center; /* Center contents horizontally */
}

.tagespresse-vote-counts {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    padding: 5px;
    border-radius: 4px;
    height: 65px;
}

.tagespresse-vote-counts button {
    border: none;
    font-size: 12pt;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    background:none;
    border-radius:5px;
    padding:10px;
}

button.vote-button:hover {
    box-shadow:none!important;
}

article.comment-body div.reply {
    display: inline-flex!important;
    justify-content: center;
    width: 100%;
}

article.comment-body div.reply a.comment-reply-link {
    padding:12px 24px!important;
    margin:0 0 6px 0;
    font-size:10pt!important;
}
article.comment-body div.reply a.comment-reply-link:hover {
    text-decoration:none!important;
    background:#cccccc!important;
}


.tagespresse-vote-counts button[data-vote-type="up"] {
    color: green;
}

.tagespresse-vote-counts button[data-vote-type="down"] {
    color: red;
}

div.tagespresse-vote-counts p {
    margin: 0 !important;
}

.vote-bar-container {
    position: relative;
    height: 6px; /* Fixed height of the bar */
    display: flex; /* Use flexbox to align bars side by side */
    margin: 0px 8px;
    background-color: #f0f0f0; /* Light background for the container */
    border-radius: 3px;
}

.upvote-bar {
    background-color: green; /* Color for upvotes */
    height: 100%; /* Full height for consistency */
    border-radius: 0 3px 3px 0;
}

.downvote-bar {
    background-color: red; /* Color for downvotes */
    height: 100%; /* Full height for consistency */
    border-radius: 3px 0 0 3px;
    border-right:1px solid white!important;
}




.downvote-bar-triangle {
    display: inline-block;
    width: 2em; /* Adjust size as needed */
    height: 2em; /* Adjust size as needed */
    position: relative;
    margin-right: 8px;
}

.downvote-bar-triangle::before {
    content: "";
    position: absolute;
    top: 46%;
    left: 50%;
    width: 0.6em;
    height: 0.6em;
    border-right: 0.2em solid red;
    border-top: 0.2em solid red;
    transform: translate(-50%, -50%) rotate(-225deg); /* Matches your original rotation */
    transition: border-color 0.2s, transform 0.2s;
}

.downvote-bar-triangle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.8em; /* Circle slightly larger than arrow */
    height: 1.8em; /* Circle slightly larger than arrow */
    border: 1px solid #ccc; /* 1px thin circle */
    border-radius: 50%; /* Makes it a circle */
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}
.downvote-bar-triangle:hover::after {
    border: 1px solid red; /* 1px thin circle */
}

/* Hover effect to change arrow size */
.downvote-bar-triangle:hover::before {
    width: 0.7em; /* Slightly larger arrow on hover */
    height: 0.7em; /* Slightly larger arrow on hover */
}

.upvote-bar-triangle {
    display: inline-block;
    width: 2em; /* Adjust size as needed */
    height: 2em; /* Adjust size as needed */
    position: relative;
    margin-left: 8px;
}

.upvote-bar-triangle::before {
    content: "";
    position: absolute;
    top: 56%;
    left: 50%;
    width: 0.6em;
    height: 0.6em;
    border-right: 0.2em solid green;
    border-top: 0.2em solid green;
    transform: translate(-50%, -50%) rotate(-45deg); /* Matches your original rotation */
    transition: border-color 0.2s, transform 0.2s;
}

.upvote-bar-triangle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.8em; /* Circle slightly larger than arrow */
    height: 1.8em; /* Circle slightly larger than arrow */
    border: 1px solid #ccc; /* 1px thin circle */
    border-radius: 50%; /* Makes it a circle */
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}
.upvote-bar-triangle:hover::after {
    border: 1px solid green; /* 1px thin circle */
}

/* Hover effect to change arrow size */
.upvote-bar-triangle:hover::before {
    width: 0.7em; /* Slightly larger arrow on hover */
    height: 0.7em; /* Slightly larger arrow on hover */
}

.vote-up-count,
.vote-down-count {
    font-weight: bold;
    font-size:10pt;
}

.vote-up-count {
    color: rgb(31, 137, 31);
    margin-left: 5px;
}

.vote-down-count {
    color: rgb(177, 24, 24);
    margin-right: 5px;
}

li.comment ul.children {
    background:#eeeeee;
}

li.comment ul.children li.comment {
    background:#ffffff;
}

button.load-more-replies {
    color:#444444;
    background:#cccccc;
    border-radius:0px;
    width:100%;
    padding:10px;
    margin:0px;
    border-radius: 0px 0px 3px 3px;
}
button.load-more-replies:hover {
    box-shadow:0!important;
}

button#load-more-comments {
    color: #ffffff;
    background: linear-gradient(to bottom, #6c6057, #35302c); 
    border-radius: 3px;
    width: 100%;
    padding: 14px 10px;
    margin: 0px;
    border:0;
}



#char-count {
    font-size: 10pt;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 10px;
    white-space: nowrap; 
    width: 100%;
    text-align: right;
}

.comment-respond .form-submit {
    float:left!important;
}

.tp-admin-comment .comment-author b.fn {
    color:#a1472c!important;
}
.tp-user-comment .comment-author b.fn {
    color:#333333!important;
}

.tp-featured-comment {
    box-shadow: inset 0 0 6px 3px #fff1cf;
}

nav.comment-navigation {display:none!important;}

.tagespresse-vote-counts button.login-required span,
.tagespresse-vote-counts button:disabled span {
    color: #9a9a9a !important;   /* light grey */
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;        /* blocks hover effects too */
}

/* --- Inline report confirmation box --- */
.tp-report-confirm {
    display: inline-block;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 6px 0 0 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tp-report-confirm-text {
    font-size: 11pt;
    color: #333333;
    margin: 0 0 6px 0;
}
.tp-report-confirm button {
    font-size: 10pt;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #cccccc;
    background: #aaaaaa;
    cursor: pointer;
}
.tp-report-confirm .tp-report-yes {
    background: #c0392b;
    color: #ffffff;
    border-color: #c0392b;
    margin-right: 8px;
}
.tp-report-confirm .tp-report-yes:hover {
    background: #a33225;
    border-color: #a33225;
}
.tp-report-confirm .tp-report-cancel:hover {
    background: #eeeeee;
}