.comments {
    display: grid;
    row-gap: 1rem;
    align-self: start;
    overflow-y: auto;
    max-height: 100%;
}

.comments > .comment {
    display: grid;
    grid-template-areas: 
        "author time"
        "text text"
        "reply reply";
    grid-template-columns: 1fr auto;
    row-gap: 3px;
    padding: 0.5rem 0.5rem;
    position: relative;
    background-color: white;
    border-radius: 0.3rem;
    box-shadow: 0 2px 2px 0 #0000000a;
    transition: background-color 0.7s;
}
.comments > .comment.withcite {
    grid-template-areas: 
        "cite   time"
        "author author"
        "text   text"
        "reply  reply";
    column-gap: 10px;
}
.comments > .comment.withcite .author {
    margin-top: 7px;
}

.comments > .comment.highlight {
    background-color: #c9d9e7;
}

.comments > .comment .author {
    grid-area: author;
    font-weight: 600;
}
.comments > .comment .time {
    grid-area: time;
    font-size: 0.8rem;
    align-self: start;
    color: #7a7a7a;
}

.comments > .comment .cite {
    grid-area: cite;
    display: grid;
    width: fit-content;
    padding: 0.3rem 0.2rem 0.3rem 0.5rem;
    background-color: #f7f7f7;
    box-shadow: 0 2px 2px 0 #0000001f;
    border-radius: 0.2rem;
    border-left: 2px solid #aaa;
    cursor: pointer;
}
.comments > .comment .cite-author {
    font-size: 14px;
    font-weight: 600;
    padding: 3px 0 1px 0;
}
.comments > .comment .cite-text {
    white-space: pre-wrap;
    font-size: 14px;
    color: #7e7e7e;
}
.comments > .comment .text {
    grid-area: text;
    white-space: pre-wrap;
}
.comments > .comment .reply {
    grid-area: reply;
    width: fit-content;
    display: flex;
    justify-self: right;
    cursor: pointer;
    border-bottom: 1px dotted;
    color: slategray;
    user-select: none;
}

.leave-comment {
    display: grid;
    row-gap: 0.5rem;
    border-radius: 0.3rem;
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    background-color: #a3b3c1;
    box-shadow: 0 2px 2px 0 #0000000a;
    position: relative;
}

.leave-comment .header {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
}

.answer {
    align-self: center;
    color: #ffffff;
}

.answer .error {
    color: #b30000;
}

.leave-comment .close {
    width: 27px;
    height: 27px;
    position: relative;
    justify-self: end;
    cursor: pointer;
    border-radius: 3px;
}
.leave-comment .close:hover {
    background-color: #869aad;
}
.leave-comment .close .x1, .leave-comment .close .x2 {
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background-color: #ffffff;
}
.leave-comment .close .x1 {
    top: 12px;
    transform: rotate(45deg);
}
.leave-comment .close .x2 {
    bottom: 12px;
    transform: rotate(-45deg);
}

.leave-comment-btn {
    width: fit-content;
    padding: 0.3rem 0.8rem 0.4rem 0.8rem;
    margin-bottom: 0.3rem;
    border-radius: 0.4rem;
    background-color: white;
    box-shadow: 0 2px 2px 0 #0000000a;
    border: 1px solid #e5e5e5;
    cursor: pointer;
    user-select: none;
}
[data-rid] + .leave-comment-btn {
    display: none;
}

.leave-comment .send {
    width: fit-content;
    justify-self: right;
    padding: 0.3rem 0.8rem 0.4rem 0.8rem;
    border-radius: 0.4rem;
    background-color: white;
    color: #535d66;
    box-shadow: 0 2px 2px 0 #0000000a;
    cursor: pointer;
    transform: translate3d(0,0,0);
    transition: .3s;
    user-select: none;
}
.leave-comment .send:active {
    transform: translateY(2px);
    box-shadow: 0 0 0 0 #0000000a;
}


.input-group {
    position: relative;
}
.input-group > label {
    position: absolute;
    left: 0.4rem;
    top: 2px;
    font-size: 0.9rem;
    color: #535d66;
}
.input-group > input {
    padding: 1.6rem 0.2rem 0.4rem 0.4rem;
}
.input-group > input, .input-group > textarea {
    width: 100%;
    border-radius: 4px;
    font-size: 1rem;
    background-color: white;
    border: 0;
    outline: 0;
}

.input-group > textarea {
    padding: 1.6rem 0.2rem 1.4rem 0.4rem;
    overflow: hidden;
    overflow-wrap: break-word;
    font-family: sans-serif;
    resize: none;
}
