.comment {
    width:100%;
    position:relative;
    padding-top:20px;
    font-family:"Noto Sans";
}
.comment > .content {
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    width:100%;
    position:relative;
}
.comment > .content > .context {
    width:100%;
    flex-grow:1;
    margin-left:-37px;
    padding-left:33px;
    border-radius:4px;
    border-left:solid 4px rgba(0, 0, 0, 0);
    transition:border-left .5s;
}
.comment > .content > .profile-picture {
    min-width:70px;
}
.comment > .content > .context.with-replies,
.comment > .content > .context.making-reply {
    border-left:solid 4px var(--blue-2-5);
}
.comment > .content > .context > .content-wrapper {
    min-height:70px;
    background-color:var(--blue-3);
    border-radius:5px;
    padding:10px;
    box-sizing:border-box;
    margin-left:20px;
    position:relative;
    z-index:1;
}
.comment > .content > .context > .content-wrapper > .name {
    font-style:italic;
    padding-bottom:7px;
    color:var(--blue-6);
}

.comment > .content > .context > .content-wrapper > .date {
    font-style:italic;
    color:var(--blue-6);
    position:absolute;
    right:35px;
    top:7px;
    opacity:0;
    transition: opacity .1s;
}
.comment > .content > .context > .content-wrapper:Hover > .date {
    opacity:1;
}

.comment > .content > .context > .content-wrapper > .reply {
    color:var(--blue-6);
    position:absolute;
    right:10px;
    bottom:7px;
    
    width:30px;
    height:21px;
    background:url("../img/icons/reply.png");
    background-size:30px 43px;
    background-position:0px 0px;
    
    cursor:pointer;
    
    opacity:0;
    transition: opacity .1s, background-position .5s;
}
.comment > .content > .context > .content-wrapper:Hover > .reply {
    opacity:1;
}
.comment > .content > .context > .content-wrapper > .reply:Hover {
    background-position:0px 21px;
    opacity:1;
}

.comment > .content > .context > .content-wrapper > .dropdown {
    color:var(--blue-6);
    position:absolute;
    right:10px;
    top:14px;
    
    width:16px;
    height:8px;
    background:url("../img/icons/dropdown.png");
    background-size:16px 8px;
    
    cursor:pointer;
    
    opacity:0;
    transition: opacity .1s;
}
.comment > .content > .context > .content-wrapper:Hover > .dropdown {
    opacity:1;
}
.comment > .content > .context > .content-wrapper:Hover > .dropdown.empty {
    opacity:.5;
    cursor:default;
}

.comment > .content > .context > .content-wrapper > .content {
    width:100%;
    word-wrap:break-word;
    word-break:break-word;
}
.comment > .content > .context > .content-wrapper:Before {
    content:"";
    width:16px;
    height:16px;
    transform:rotate(45deg);
    background-color:var(--blue-3);
    position:absolute;
    top:27px;
    left:-7px;
    z-index:-1;
}
.comment > .content > .context > .comments {
    margin-left:-32px;
    padding-left:20px;
    position:relative;
    margin-top:-10px;
    padding-top:10px;
}

.comment.guest > .content > .context > .content-wrapper {
    background-color:var(--blue-2-5);
}
.comment.guest > .content > .context > .content-wrapper > .name {
    color:var(--blue-5);
}
.comment.guest > .content > .context > .content-wrapper:Before {
    background-color:var(--blue-2-5);
}

.comment.moderator > .content > .context > .content-wrapper {
    box-shadow: 0px 0px 0px 2px var(--blue-4);
}
.comment.moderator > .content > .context > .content-wrapper:Before {
    box-shadow: -2px 2px 0px 0px var(--blue-4);
}

.comment.unmoderated > .content > .context > .content-wrapper {
    border: solid 4px #279242;
    background-color:#116d1f;
}
.comment.unmoderated > .content > .context > .content-wrapper:Before {
    border-left: solid 2px #279242;
    border-bottom: solid 2px #279242;
    background-color:#116d1f;
    left:-11px;
}
.comment.unmoderated > .content > .context > .content-wrapper > .name {
    color:#73c788;
}

.comment.highlighted > .content > .context > .content-wrapper {
    border: solid 2px #FFFFFF;
}
.comment.highlighted > .content > .context > .content-wrapper:Before {
    border-left: solid 1px #FFFFFF;
    border-bottom: solid 1px #FFFFFF;
    left:-9px;
}

.comment.admin > .content > .context > .content-wrapper {
    box-shadow: 0px 0px 0px 2px var(--blue-5);
}
.comment.admin > .content > .context > .content-wrapper:Before {
    box-shadow: -2px 2px 0px 0px var(--blue-5);
}
.comment textarea {
    width:100%;
    height:4.5em;
    resize:vertical;
    margin:0;
    box-sizing:border-box;
    font-family:inherit;
    background-color:var(--blue-4);
    border:0;
    border-radius:5px;
    outline:0;
    color:#FFFFFF;
    font-size:inherit;
    overflow:auto;
}
.comment input {
    margin:0;
    box-sizing:border-box;
    font-family:inherit;
    background-color:var(--blue-4);
    border:0;
    padding:0px 4px;
    border-radius:5px;
    outline:0;
    color:#FFFFFF;
    font-size:inherit;
}
.comment input::placeholder,
.comment textarea::placeholder {
    color:var(--blue-6);
    font-size:inherit;
    font-style:italic;
}
.comment input:-webkit-autofill,
.comment input:-webkit-autofill:hover,
.comment input:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px var(--blue-4) inset;
    -webkit-text-fill-color:#FFFFFF;
}
.comment > .content > .context > .content-wrapper > .content > .edit {
    display:none;
}
.comment.reply > .content > .context > .content-wrapper .button {
    background-color:var(--blue-4);
}
.comment.reply > .content > .context > .content-wrapper .button:Hover {
    background-color:var(--blue-5);
}
.comment.reply {
    display:none;
}
.comment .error {
    display:none;
    background-color:#a03212;
    text-align:center;
    border-radius:5px;
    padding:5px;
    margin-bottom:5px;
    cursor:pointer;
}

.comment-dropdown {
    position:absolute;
    border-radius:5px;
    display:none;
    z-index:2;
    overflow:auto;
    box-sizing:border-box;
    cursor:default;
    user-select:none;
    box-shadow:0px 1px 12px -2px #000000;
}
.comment-dropdown .item {
    padding:5px;
    width:100px;
    height:15px;
    line-height:15px;
    background-color:var(--blue-4);
    cursor:pointer;
}
.comment-dropdown .item:Hover {
    background-color:var(--blue-5);
}
.comment .button {
    background-color:var(--blue-4);
    width:150px;
}
.comment .button:Hover {
    background-color:var(--blue-5);
}
.comment .button.edit {
    margin-left:0px;
}
.comment .button.cancel {
    width:auto;
}