.main-container {
    flex-direction: column;
}
.guestbook-warp {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.guestbook-comment-box, .guestbook-form-box {
    background-color: var(--vscing-background-color-1);
    border-radius: 5px;
    padding: 24px;
}
.guestbook-comment-box {
    flex: 1;
    margin-right: 15px;
}
.guestbook-comment-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    color: var(--vscing-text-color-1);
}
.comment-list .comment-item {
    margin-top: 30px;
    border-bottom: 1px solid var(--vscing-border-color-1);
}
.comment-inner {
    margin-bottom: 15px;
}
.comment-header {
    display: flex;
    align-items: center;
    font-size: 14px;
}
.comment-header .avatar {
    width: 40px;
    height: 40px;
}
.comment-header .avatar .icon {
    width: 40px;
    height: 40px;
    color: var(--vscing-text-color-4);
}
.comment-header .user-info {
    margin-left: 5px;
}
.comment-header .nickname {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: var(--vscing-text-color-1);
    margin-bottom: 3px;
}
.comment-header .time {
    display: flex;
    align-items: center;
    font-size: 14px;
    line-height: 22px;
    color: var(--vscing-text-color-3);
}
.comment-header .time .icon {
    width: 16px;
    height: 16px;
    color: var(--vscing-text-color-3);
    margin-right: 5px;
}
.comment-header .time .mr {
    margin-right: 10px;
}
.comment-content {
    font-size: 14px;
    padding: 15px 0;
    color: var(--vscing-text-color-1);
}
.comment-content .nickname {
    color: var(--vscing-text-color-3);
}
.comment-content .reply {
    padding: 0 5px;
}
.comment-actions {
    display: flex;
    align-items: center;
}
.comment-actions .comment-reply {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-right: 15px;
    color: var(--vscing-text-color-1);
}
.comment-actions .comment-reply:hover {
    color: var(--vscing-text-hover-color);
}
.comment-actions .comment-reply .icon {
    width: 16px;
    height: 16px;
    margin-right: 3px;
}
.comment-nested {
    margin-left: 45px;
}
.guestbook-form-box {
    width: 350px;
}
.guestbook-form .form-item {
    margin-bottom: 15px;
}
.guestbook-form .form-item label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}
.guestbook-form .form-item input, .guestbook-form .form-item textarea {
    min-height: 35px;
    width: 100%;
    padding: 5px;
    font-size: 14px;
    border: 1px solid var(--vscing-border-color-1);
    border-radius: 5px;
}
.guestbook-form .form-item button {
    cursor: pointer;
    width: 100%;
    padding: 8px 0;
    font-size: 14px;
    border: 1px solid var(--vscing-border-color-1);
    border-radius: 5px;
    background-color: var(--vscing-background-color-1);
}
.guestbook-comment-box .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 24px 0 16px 0;
}
.guestbook-comment-box .pagination .page-item {
    margin-right: 8px;
    margin-bottom: 8px;
}
.pagination .page-item .page-link {
    display: inline-block;
    border: 1px solid var(--vscing-border-color-1);
    color: var(--vscing-text-color-2);
    padding: 8px 12px;
    border-radius: 5px;
}
.pagination .page-item .page-link:hover {
    border-color: var(--vscing-text-hover-color);
    color: var(--vscing-text-hover-color);
}
.pagination .page-item .page-link.active {
    border-color: var(--vscing-text-hover-color);
    background-color: var(--vscing-text-hover-color);
    color: var(--vscing-text-color-5);
}