/*
 * common style classes core WP comment form
*/


.comments-title {
    width: 100%;
}

ul.comment-list > li {
    border-bottom: 0;
}
.comment-body {
    background-color: var(--color-separator);
    position: relative;
    padding: 20px 35px;
    margin-bottom: 30px;
}
.comment-body:before {
    content:'';
    background-image: var(--featured-gradient);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width:7px;
}
.comment-body .fn,
.comment-metadata a {
    font-size: 1.125em;
    font-weight: 600;
    text-decoration: none;
}
.comment-meta {
    display: flex;
    align-items: center;
}
.comment-author {
    margin-right: 1em;
    color:var(--color-link);
}
.comment-metadata {
    display: flex;
}
.comment-metadata a {
    color:#a1a1a1;
}
.comment-metadata time {
    width: 5.5em;
    overflow: hidden;
    display: block;
    height: 1.56em;
}
.comment-author .avatar {
    display: none;
}
.says {
    display: none;
}

.comment-content {
    font-size: .875em;
}
a.comment-reply-link {
    color:inherit;
}

#comments .children {
    margin: -15px 0 0 15px;
}

@media screen and (min-width: 769px) {
    #respond .comment-form {
        width: 100%;
    }
}
@media (min-width: 900px) {
    .comments-area {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .comment-list,
    .comment-respond {
        flex-basis: 48%;
    }
}

@media (max-width: 899px) {
    #comments ul {
        margin-bottom: 40px;
    }
}


/** Comment respond form */

#respond {
    --bgcolor-btn:var(--color-link);
    --minwidth-btn: 300px;
    --txttransform-btn:uppercase;
    box-shadow: 0 0 56px 9px rgba(5, 5, 5, 0.1);
    background: var(--color-white);
    border-top: 0;
    padding: 40px;
}
#comments #respond{
    margin-top: 0;
}

.comment-respond .comment-reply-title {
    font-size: 3.2rem;
    color:var(--color-link);
    text-align: initial;
    margin-bottom: 0;
    padding-bottom: 0;
}

.comment-form-comment label,
.comment-form-email label,
.comment-form-author label{
    display: none;
}

.comment-form-author input,
.comment-form-email input,
.comment-form-comment textarea {
    color:var(--color-input);
    padding: var(--padding-input);
    border:var(--border-input);
    background-color: var(--bgcolor-input);
    transition: border var(--transduration-body);
}

.comment-form .form-submit {
    margin-bottom: 0;
}
.comment-form-comment textarea{
    height: 130px;
}

.comment-form-author input:focus,
.comment-form-email input:focus,
.comment-form-comment textarea:focus {
    border-color: var(--focus-border-input);
}

@media (min-width: 1200px) {
    #respond .comment-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .comment-form p{
        flex-basis: 100%;
    }
    p.comment-form-author,
    p.comment-form-email,
    p.comment-form-comment {
        flex-basis: 48%;
    }
    p.comment-form-email {
        margin-top: -5em;
        position: relative;
        left: 52%;
    }
}
@media (max-width: 768px) {
    #comments #respond {
        padding:15px;
    }
}

.comment-list .comment-reply-title {
    font-size: 2rem;
}
.comment-list .comment-reply-title small {
    display: block;
}
#comments .comment-list #respond {
    padding:15px;
    margin: -30px 0 15px 15px;
}