.comment-respond{

    .required{
        color: red;
    }
    
    .comment-reply-title{
        margin: 15px 0; 
        font-size: 1.5rem;
        font-weight: 700;
    }
    
    .comment-form {

        input:not([type="checkbox"]):not([type="submit"]),textarea{
            width: 100%;
            border: none;
            background-color: #f7f7f7;
            font-size: 1rem;
            padding: 0.8rem;
        }

        label{
            font-size: 0.9rem;
            color: #727272;
        }

    }
}

.comments-area{
    .comments-title{
        margin: 3.5rem 0 2rem;
        font-size: 1.6rem;
        font-weight: 700;
        padding-left: 2.5rem;
        position: relative;

        &:before{
            content: "\f086";
            font-size: 1.6rem;
            font-family: 'Font Awesome 5 Free';
            position: absolute;
            margin-right: 0.4rem;
            left: 0;
        }
    }

    .comment-list{
        list-style: none;

        ol{
            list-style: none;
        }
        
        .comment-body{
            padding-left: 3rem;
            position: relative;
            margin-bottom: 3rem;

            + .comment-respond{
                padding-left: 3rem;
                margin-bottom: 4rem;
            }

            .comment-awaiting-moderation{
               background: #f7f7f7;
                display: block;
                padding: 0.8rem;
                font-size: 0.85rem;
                margin: 0.5rem 0;
                border-left: 2px solid #000;

                + br{
                    display: none;
                }
            }

            .comment-meta{
                color: #000;
                font-size: 0.8rem;

                *{
                    color: #767676;
                }
            }

            .comment-author{
                cite{
                    font-weight: 600;
                    font-style: inherit;

                    a{
                        color: #000;
                        text-decoration: underline;
                    }
                }

                
            }

            p{
                margin-top: 0.5rem;
               background: #f7f7f7;
                padding: 0.8rem;
                font-size: 0.9rem;
                margin-bottom: 0.4rem;
            }

            .reply{
                a{
                    font-weight: 600;
                    color: #000;
                    font-size: 0.85rem;
                }
            }
            
            .comment-reply-link{
                &:before{
                    content: "\f3e5";
                    font-size: 0.85rem;
                    margin-right: 0.3rem;
                    font-size: 0.85rem;
                    font-family: "Font Awesome 5 Free";
                }
            }
            .comment-author{
                img{
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
    }
}


.comment-respond{
    .comment-reply-title,
    .logged-in-as{
        a{
            font-size: 0.9rem;
            color: #767676;
            text-decoration: underline;
        }
    }

    .comment-reply-title{
        a{
            float: right;
            margin-top: 0.5rem;
            margin-left: 0.7rem;

             @include mobile {
                display: block;
                float: none;
                text-align: right;
             }
        }
    }
}

.comment-navigation {
    + * {
        margin-top: 65px;
    }
} 

.comment-notes{
    padding: 16px;
    border-left: 4px solid #000000;
    background: #fff;
    font-size: 0.9rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.058823529411764705);
}

.form-submit {
    .submit{
        padding: 15px 20px;
        border: none;
       background: #f92a28;
        color: #fff;
        display: inline-block;
        font-size: 16; 
        &:hover {
            background: #f67280;
        }
    }
    
}