@media only screen and (min-width:1280px) {
    .content {
        width: 68%;
    }
    .sidebar {
        width: 30%;
    }
    .commentsBox,
    .commentsBoxReply {
        width: 100%;
        min-height: 60pt;
        padding: 10pt;
        background-color: rgb(var(--main-1));
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .loginMessage {
        width: 100%;
        height: 60pt;
        line-height: 60pt;
        color: rgb(var(--white));
        font-size: 12pt;
        text-align: center;
    }
    .commentsUserImg {
        width: 40pt;
    }
    .commentsInput {
        width: calc(100% - 100pt);
        margin: 0 10pt;
    }
    .commentTxtArea,
    .commentTxtAreaReply {
        width: 100%;
        height: 40pt;
        resize: none;
        border: none;
        background: rgb(var(--main-0));
        font-size: 11pt;
        color: rgb(var(--white));
        padding: 6pt;
        overflow: hidden;
    }
    .commentsButton {
        width: 40pt;
    }
    .sendCommentBtn,
    .sendCommentBtnReply {
        width: 40pt;
        height: 40pt;
        line-height: 40pt;
        border: none;
        text-align: center;
        color: rgb(var(--white));
        font-size: 14pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .sendCommentBtn:hover,
    .sendCommentBtnReply:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .sendCommentBtn:active,
    .sendCommentBtnReply:active {
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .commentsInfo {
        width: 100%;
        padding: 10pt;
        background: rgb(var(--main-1));
        margin: 8pt 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .totalComments {
        width: 50%;
        text-align: left;
        color: rgb(var(--white));
        font-size: 12pt;
    }
    .comments {
        width: 100%;
        padding: 8pt;
        background: rgb(var(--main-1));
    }
    .emptyComments {
        width: 100%;
        text-align: center;
        font-size: 12pt;
        color: rgb(var(--white));
    }
    .comentRow,
    .comentRowReply {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        margin: 30pt 0;
    }
    .comentRowReply {
        width: calc(100% - 40pt);
        margin-left: 40pt;
        padding-left: 10pt;
        border-left: 1pt solid rgb(var(--white));
    }
    .comentRow:first-child,
    .comentRowReply:first-child {
        margin-top: 0;
    }
    .comentRow:last-child,
    .comentRowReply:last-child {
        margin-bottom: 0;
    }
    .comentUserImg {
        width: 40pt;
    }
    .comentUserImgLink {
        width: 40pt;
        text-decoration: none;
        border: none;
    }
    .comentUserImgLink img {
        width: 40pt;
        height: 40pt;
    }
    .comentBody {
        width: calc(100% - 50pt);
        margin-left: 10pt;
    }
    .comentHeader {
        width: 100%;
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows: 25pt 15pt;
        grid-template-areas: 'user vote' 'date vote';
    }
    .cUser {
        grid-area: user;
        width: 100%;
        height: 25pt;
        line-height: 25pt;
        text-align: left;
    }
    .comentUserLink {
        text-decoration: none;
        font-size: 14pt;
        color: rgb(var(--white));
    }
    .comentVoteBox {
        grid-area: vote;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
    }
    .voteplus,
    .voteamount,
    .voteminus {
        width: 20pt;
        height: 20pt;
        line-height: 20pt;
        text-align: center;
        color: rgb(var(--white));
        font-size: 10pt;
        -webkit-border-radius: 2pt;
        -moz-border-radius: 2pt;
        border-radius: 2pt;
    }
    .voteplus {
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .voteplus:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .voteplus:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .plusactive {
        background: rgb(var(--main-7));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
    }
    .plusactive:hover {
        cursor: pointer;
        background: rgb(var(--main-8));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
    }
    .plusactive:active {
        background: rgb(var(--main-9));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
    }
    .voteamount {
        min-width: 20pt;
        margin: 0 5pt;
    }
    .voteminus {
        background: rgb(var(--red-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
    }
    .voteminus:hover {
        cursor: pointer;
        background: rgb(var(--red-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
    }
    .voteminus:active {
        background: rgb(var(--red-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
    }
    .minusactive {
        background: rgb(var(--red-7));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
    }
    .minusactive:hover {
        cursor: pointer;
        background: rgb(var(--red-8));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
    }
    .minusactive:active {
        background: rgb(var(--red-9));
        background: -webkit-linear-gradient(-90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: linear-gradient(180deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
    }
    .commentDate {
        grid-area: date;
        width: 100%;
        height: 15pt;
        line-height: 15pt;
        text-align: left;
        font-size: 10pt;
        color: rgb(var(--grey-6));
    }
    .comentTxt {
        width: 100%;
        margin: 8pt 0;
        text-align: left;
        font-size: 12pt;
        color: rgb(var(--white));
    }
    .comentFooter {
        width: 100%;
        height: 9pt;
        line-height: 9pt;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .replyCommBtn {
        text-decoration: none;
        font-size: 9pt;
        color: rgb(var(--grey-4));
    }
    .replyCommBtn:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .commentImage {
        width: 100%;
        height: auto;
        margin: 8pt 0;
    }
    .plyr {
        margin: 8pt 0;
        margin-top: 0;
    }
    .userMentioned {
        text-decoration: none;
        color: rgb(var(--grey-4));
    }
    .userMentioned:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .removeComm {
        color: rgb(var(--grey-4));
        font-size: 10pt;
        text-decoration: none;
    }
    .removeComm:hover {
        cursor: pointer;
        color: rgb(var(--red-8));
    }
}

@media only screen and (min-width:900px) and (max-width:1279px) {
    .content {
        width: 68%;
    }
    .sidebar {
        width: 30%;
    }
    .commentsBox,
    .commentsBoxReply {
        width: 100%;
        min-height: 60pt;
        padding: 10pt;
        background-color: rgb(var(--main-1));
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .loginMessage {
        width: 100%;
        height: 60pt;
        line-height: 60pt;
        color: rgb(var(--white));
        font-size: 12pt;
        text-align: center;
    }
    .commentsUserImg {
        width: 40pt;
    }
    .commentsInput {
        width: calc(100% - 100pt);
        margin: 0 10pt;
    }
    .commentTxtArea,
    .commentTxtAreaReply {
        width: 100%;
        height: 40pt;
        resize: none;
        border: none;
        background: rgb(var(--main-0));
        font-size: 11pt;
        color: rgb(var(--white));
        padding: 6pt;
        overflow: hidden;
    }
    .commentsButton {
        width: 40pt;
    }
    .sendCommentBtn,
    .sendCommentBtnReply {
        width: 40pt;
        height: 40pt;
        line-height: 40pt;
        border: none;
        text-align: center;
        color: rgb(var(--white));
        font-size: 14pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .sendCommentBtn:hover,
    .sendCommentBtnReply:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .sendCommentBtn:active,
    .sendCommentBtnReply:active {
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .commentsInfo {
        width: 100%;
        padding: 10pt;
        background: rgb(var(--main-1));
        margin: 8pt 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .totalComments {
        width: 50%;
        text-align: left;
        color: rgb(var(--white));
        font-size: 12pt;
    }
    .comments {
        width: 100%;
        padding: 8pt;
        background: rgb(var(--main-1));
    }
    .emptyComments {
        width: 100%;
        text-align: center;
        font-size: 12pt;
        color: rgb(var(--white));
    }
    .comentRow,
    .comentRowReply {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        margin: 30pt 0;
    }
    .comentRowReply {
        width: calc(100% - 40pt);
        margin-left: 40pt;
        padding-left: 10pt;
        border-left: 1pt solid rgb(var(--white));
    }
    .comentRow:first-child,
    .comentRowReply:first-child {
        margin-top: 0;
    }
    .comentRow:last-child,
    .comentRowReply:last-child {
        margin-bottom: 0;
    }
    .comentUserImg {
        width: 40pt;
    }
    .comentUserImgLink {
        width: 40pt;
        text-decoration: none;
        border: none;
    }
    .comentUserImgLink img {
        width: 40pt;
        height: 40pt;
    }
    .comentBody {
        width: calc(100% - 50pt);
        margin-left: 10pt;
    }
    .comentHeader {
        width: 100%;
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows: 25pt 15pt;
        grid-template-areas: 'user vote' 'date vote';
    }
    .cUser {
        grid-area: user;
        width: 100%;
        height: 25pt;
        line-height: 25pt;
        text-align: left;
    }
    .comentUserLink {
        text-decoration: none;
        font-size: 14pt;
        color: rgb(var(--white));
    }
    .comentVoteBox {
        grid-area: vote;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
    }
    .voteplus,
    .voteamount,
    .voteminus {
        width: 20pt;
        height: 20pt;
        line-height: 20pt;
        text-align: center;
        color: rgb(var(--white));
        font-size: 10pt;
        -webkit-border-radius: 2pt;
        -moz-border-radius: 2pt;
        border-radius: 2pt;
    }
    .voteplus {
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .voteplus:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .voteplus:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .plusactive {
        background: rgb(var(--main-7));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
    }
    .plusactive:hover {
        cursor: pointer;
        background: rgb(var(--main-8));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
    }
    .plusactive:active {
        background: rgb(var(--main-9));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
    }
    .voteamount {
        min-width: 20pt;
        margin: 0 5pt;
    }
    .voteminus {
        background: rgb(var(--red-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
    }
    .voteminus:hover {
        cursor: pointer;
        background: rgb(var(--red-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
    }
    .voteminus:active {
        background: rgb(var(--red-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
    }
    .minusactive {
        background: rgb(var(--red-7));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
    }
    .minusactive:hover {
        cursor: pointer;
        background: rgb(var(--red-8));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
    }
    .minusactive:active {
        background: rgb(var(--red-9));
        background: -webkit-linear-gradient(-90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: linear-gradient(180deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
    }
    .commentDate {
        grid-area: date;
        width: 100%;
        height: 15pt;
        line-height: 15pt;
        text-align: left;
        font-size: 10pt;
        color: rgb(var(--grey-6));
    }
    .comentTxt {
        width: 100%;
        margin: 8pt 0;
        text-align: left;
        font-size: 12pt;
        color: rgb(var(--white));
    }
    .comentFooter {
        width: 100%;
        height: 9pt;
        line-height: 9pt;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .replyCommBtn {
        text-decoration: none;
        font-size: 9pt;
        color: rgb(var(--grey-4));
    }
    .replyCommBtn:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .commentImage {
        width: 100%;
        height: auto;
        margin: 8pt 0;
    }
    .plyr {
        margin: 8pt 0;
        margin-top: 0;
    }
    .userMentioned {
        text-decoration: none;
        color: rgb(var(--grey-4));
    }
    .userMentioned:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .removeComm {
        color: rgb(var(--grey-4));
        font-size: 10pt;
        text-decoration: none;
    }
    .removeComm:hover {
        cursor: pointer;
        color: rgb(var(--red-8));
    }
}

@media only screen and (min-width:501px) and (max-width:899px) {
    .content {
        width: 100%;
    }
    .sidebar {
        display: none;
    }
    .commentsBox,
    .commentsBoxReply {
        width: 100%;
        min-height: 60pt;
        padding: 10pt;
        background-color: rgb(var(--main-1));
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .loginMessage {
        width: 100%;
        height: 60pt;
        line-height: 60pt;
        color: rgb(var(--white));
        font-size: 12pt;
        text-align: center;
    }
    .commentsUserImg {
        width: 40pt;
    }
    .commentsInput {
        width: calc(100% - 100pt);
        margin: 0 10pt;
    }
    .commentTxtArea,
    .commentTxtAreaReply {
        width: 100%;
        height: 40pt;
        resize: none;
        border: none;
        background: rgb(var(--main-0));
        font-size: 11pt;
        color: rgb(var(--white));
        padding: 6pt;
        overflow: hidden;
    }
    .commentsButton {
        width: 40pt;
    }
    .sendCommentBtn,
    .sendCommentBtnReply {
        width: 40pt;
        height: 40pt;
        line-height: 40pt;
        border: none;
        text-align: center;
        color: rgb(var(--white));
        font-size: 14pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .sendCommentBtn:hover,
    .sendCommentBtnReply:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .sendCommentBtn:active,
    .sendCommentBtnReply:active {
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .commentsInfo {
        width: 100%;
        padding: 10pt;
        background: rgb(var(--main-1));
        margin: 8pt 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .totalComments {
        width: 50%;
        text-align: left;
        color: rgb(var(--white));
        font-size: 12pt;
    }
    .comments {
        width: 100%;
        padding: 8pt;
        background: rgb(var(--main-1));
    }
    .emptyComments {
        width: 100%;
        text-align: center;
        font-size: 12pt;
        color: rgb(var(--white));
    }
    .comentRow,
    .comentRowReply {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        margin: 30pt 0;
    }
    .comentRowReply {
        width: calc(100% - 40pt);
        margin-left: 40pt;
        padding-left: 10pt;
        border-left: 1pt solid rgb(var(--white));
    }
    .comentRow:first-child,
    .comentRowReply:first-child {
        margin-top: 0;
    }
    .comentRow:last-child,
    .comentRowReply:last-child {
        margin-bottom: 0;
    }
    .comentUserImg {
        width: 40pt;
    }
    .comentUserImgLink {
        width: 40pt;
        text-decoration: none;
        border: none;
    }
    .comentUserImgLink img {
        width: 40pt;
        height: 40pt;
    }
    .comentBody {
        width: calc(100% - 50pt);
        margin-left: 10pt;
    }
    .comentHeader {
        width: 100%;
        display: grid;
        grid-template-columns: 70% 30%;
        grid-template-rows: 25pt 15pt;
        grid-template-areas: 'user vote' 'date vote';
    }
    .cUser {
        grid-area: user;
        width: 100%;
        height: 25pt;
        line-height: 25pt;
        text-align: left;
    }
    .comentUserLink {
        text-decoration: none;
        font-size: 14pt;
        color: rgb(var(--white));
    }
    .comentVoteBox {
        grid-area: vote;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
    }
    .voteplus,
    .voteamount,
    .voteminus {
        width: 20pt;
        height: 20pt;
        line-height: 20pt;
        text-align: center;
        color: rgb(var(--white));
        font-size: 10pt;
        -webkit-border-radius: 2pt;
        -moz-border-radius: 2pt;
        border-radius: 2pt;
    }
    .voteplus {
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .voteplus:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .voteplus:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .plusactive {
        background: rgb(var(--main-7));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
    }
    .plusactive:hover {
        cursor: pointer;
        background: rgb(var(--main-8));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
    }
    .plusactive:active {
        background: rgb(var(--main-9));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
    }
    .voteamount {
        min-width: 20pt;
        margin: 0 5pt;
    }
    .voteminus {
        background: rgb(var(--red-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
    }
    .voteminus:hover {
        cursor: pointer;
        background: rgb(var(--red-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
    }
    .voteminus:active {
        background: rgb(var(--red-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
    }
    .minusactive {
        background: rgb(var(--red-7));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
    }
    .minusactive:hover {
        cursor: pointer;
        background: rgb(var(--red-8));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
    }
    .minusactive:active {
        background: rgb(var(--red-9));
        background: -webkit-linear-gradient(-90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: linear-gradient(180deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
    }
    .commentDate {
        grid-area: date;
        width: 100%;
        height: 15pt;
        line-height: 15pt;
        text-align: left;
        font-size: 10pt;
        color: rgb(var(--grey-6));
    }
    .comentTxt {
        width: 100%;
        margin: 8pt 0;
        text-align: left;
        font-size: 12pt;
        color: rgb(var(--white));
    }
    .comentFooter {
        width: 100%;
        height: 9pt;
        line-height: 9pt;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .replyCommBtn {
        text-decoration: none;
        font-size: 9pt;
        color: rgb(var(--grey-4));
    }
    .replyCommBtn:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .commentImage {
        width: 100%;
        height: auto;
        margin: 8pt 0;
    }
    .plyr {
        margin: 8pt 0;
        margin-top: 0;
    }
    .userMentioned {
        text-decoration: none;
        color: rgb(var(--grey-4));
    }
    .userMentioned:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .removeComm {
        color: rgb(var(--grey-4));
        font-size: 10pt;
        text-decoration: none;
    }
    .removeComm:hover {
        cursor: pointer;
        color: rgb(var(--red-8));
    }
}

@media only screen and (max-width:500px) {
    .content {
        width: 100%;
    }
    .sidebar {
        display: none;
    }
    .commentsBox,
    .commentsBoxReply {
        width: 100%;
        min-height: 30pt;
        padding: 4pt;
        background-color: rgb(var(--main-1));
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .loginMessage {
        width: 100%;
        height: 30pt;
        line-height: 15pt;
        color: rgb(var(--white));
        font-size: 10pt;
        text-align: center;
    }
    .commentsUserImg {
        display: none;
    }
    .commentsInput {
        width: calc(100% - 30pt);
        margin-right: 5pt;
    }
    .commentTxtArea,
    .commentTxtAreaReply {
        width: 100%;
        height: 30pt;
        resize: none;
        border: none;
        background: rgb(var(--main-0));
        font-size: 10pt;
        color: rgb(var(--white));
        padding: 6pt;
        overflow: hidden;
    }
    .commentsButton {
        width: 30pt;
    }
    .sendCommentBtn,
    .sendCommentBtnReply {
        width: 30pt;
        height: 30pt;
        line-height: 30pt;
        border: none;
        text-align: center;
        color: rgb(var(--white));
        font-size: 11pt;
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .sendCommentBtn:hover,
    .sendCommentBtnReply:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .sendCommentBtn:active,
    .sendCommentBtnReply:active {
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .commentsInfo {
        width: 100%;
        padding: 8pt;
        background: rgb(var(--main-1));
        font-size: 10pt;
        margin: 5pt 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }
    .totalComments {
        width: 50%;
        text-align: left;
        color: rgb(var(--white));
        font-size: 10pt;
    }
    .comments {
        width: 100%;
        padding: 8pt;
        background: rgb(var(--main-1));
    }
    .emptyComments {
        width: 100%;
        text-align: center;
        font-size: 10pt;
        color: rgb(var(--white));
    }
    .comentRow,
    .comentRowReply {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        margin: 25pt 0;
    }
    .comentRowReply {
        width: calc(100% - 25pt);
        margin-left: 25pt;
        padding-left: 5pt;
        border-left: 1pt solid rgb(var(--white));
    }
    .comentRow:first-child,
    .comentRowReply:first-child {
        margin-top: 0;
    }
    .comentRow:last-child,
    .comentRowReply:last-child {
        margin-bottom: 0;
    }
    .comentUserImg {
        width: 25pt;
    }
    .comentUserImgLink {
        width: 25pt;
        text-decoration: none;
        border: none;
    }
    .comentUserImgLink img {
        width: 25pt;
        height: 25pt;
    }
    .comentBody {
        width: calc(100% - 30pt);
        margin-left: 10pt;
    }
    .comentHeader {
        width: 100%;
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-rows: 20pt 10pt;
        grid-template-areas: 'user vote' 'date vote';
    }
    .cUser {
        grid-area: user;
        width: 100%;
        height: 20pt;
        line-height: 20pt;
        text-align: left;
    }
    .comentUserLink {
        text-decoration: none;
        font-size: 10pt;
        color: rgb(var(--white));
    }
    .comentVoteBox {
        grid-area: vote;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
    }
    .voteplus,
    .voteamount,
    .voteminus {
        width: 14pt;
        height: 14pt;
        line-height: 14pt;
        text-align: center;
        color: rgb(var(--white));
        font-size: 10pt;
        -webkit-border-radius: 2pt;
        -moz-border-radius: 2pt;
        border-radius: 2pt;
    }
    .voteplus {
        background: rgb(var(--main-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-2)) 0%, rgb(var(--main-3)) 100%);
    }
    .voteplus:hover {
        cursor: pointer;
        background: rgb(var(--main-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .voteplus:active {
        background: rgb(var(--main-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-3)) 0%, rgb(var(--main-4)) 100%);
    }
    .plusactive {
        background: rgb(var(--main-7));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-7)) 0%, rgb(var(--main-8)) 100%);
    }
    .plusactive:hover {
        cursor: pointer;
        background: rgb(var(--main-8));
        background: -webkit-linear-gradient(90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: linear-gradient(0deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
    }
    .plusactive:active {
        background: rgb(var(--main-9));
        background: -webkit-linear-gradient(-90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
        background: linear-gradient(180deg, rgb(var(--main-8)) 0%, rgb(var(--main-9)) 100%);
    }
    .voteamount {
        min-width: 15pt;
        margin: 0 5pt;
    }
    .voteminus {
        background: rgb(var(--red-2));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-2)) 0%, rgb(var(--red-3)) 100%);
    }
    .voteminus:hover {
        cursor: pointer;
        background: rgb(var(--red-3));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
    }
    .voteminus:active {
        background: rgb(var(--red-4));
        background: -webkit-linear-gradient(-90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
        background: linear-gradient(180deg, rgb(var(--red-3)) 0%, rgb(var(--red-4)) 100%);
    }
    .minusactive {
        background: rgb(var(--red-7));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-7)) 0%, rgb(var(--red-8)) 100%);
    }
    .minusactive:hover {
        cursor: pointer;
        background: rgb(var(--red-8));
        background: -webkit-linear-gradient(90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: -moz-linear-gradient(90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: linear-gradient(0deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
    }
    .minusactive:active {
        background: rgb(var(--red-9));
        background: -webkit-linear-gradient(-90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: -moz-linear-gradient(-90deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
        background: linear-gradient(180deg, rgb(var(--red-8)) 0%, rgb(var(--red-9)) 100%);
    }
    .commentDate {
        grid-area: date;
        width: 100%;
        height: 15pt;
        line-height: 15pt;
        text-align: left;
        font-size: 8pt;
        color: rgb(var(--grey-6));
    }
    .comentTxt {
        width: 100%;
        margin: 8pt 0;
        text-align: left;
        font-size: 10pt;
        color: rgb(var(--white));
    }
    .comentFooter {
        width: 100%;
        height: 9pt;
        line-height: 9pt;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .replyCommBtn {
        text-decoration: none;
        font-size: 9pt;
        color: rgb(var(--grey-4));
    }
    .replyCommBtn:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .commentImage {
        width: 100%;
        height: auto;
        margin: 8pt 0;
    }
    .plyr {
        margin: 8pt 0;
        margin-top: 0;
    }
    .userMentioned {
        text-decoration: none;
        color: rgb(var(--grey-4));
    }
    .userMentioned:hover {
        cursor: pointer;
        color: rgb(var(--main-8));
    }
    .removeComm {
        color: rgb(var(--grey-4));
        font-size: 10pt;
        text-decoration: none;
    }
    .removeComm:hover {
        cursor: pointer;
        color: rgb(var(--red-8));
    }
}