/*-- COMMENT START */
.comments {
	margin: 13px 33px 13px 33px;
}
.comments > .load_more { font-size:0.73em; text-align:center; text-transform:lowercase; font-weight:400; color:#385898; }

/*-- TABLE COMMENT REPLY FIELD START */
.comments > .field { margin:7px 0px 3px 0px; }
.comments > .field > .left { float:left; }
.comments > .field > .left > a { text-decoration:none; }       /* user profile url */
.comments > .field > .left > a > img {} /* user logo */
.comments > .field > .right { 
    position:relative; 
    margin:0px 0px 0px 33px;
    border-radius: 13px;
    border: solid 1px rgb(221, 225, 232);
    background: rgb(242, 243, 245);
    box-shadow: 0px 0px 3px 1px rgb(221, 225, 232);
}

.comments > .field > .right .options {
    position: absolute;
    z-index: 3;
    right: 7px;
    top: 3px;
    right: 0px;
    top: 0px;
    height: 30px;
}
.comments > .field > .right .options img {
    width:18px;
    height:16px;
}
.comments .right .options button {
    outline:none;
    border:none;
    background:transparent;
}
.comments > .field > .right .options .btn {
    display:inline-block;
    float:left;
}
.comments > .field > .right .options .btn:hover { text-decoration:none; }
.comments > .field > .right .options .btn_post_comment {
    position: relative;
	width: 37px;
	height: 25px;
}
/*.comments > .field > .right .options .btn_post_comment:before {
	content: "send";
	width: 37px;
	height: 25px;
	border-radius: 33px;
	position: absolute;
	top: 58%;
	left: 50%;
	transform: translate(-50%,-50%);
}*/
.comments > .field > .right .options .btn_emoji {}
.comments > .field > .right .options .btn_emoji .emosxxxfield {
    display:inline-block;
}
.comments > .field > .right .options .btn_emoji .emosxxxbutton {
    vertical-align: text-bottom;
    margin: 0px !important;
    line-height: 21px;
    font-size:21px;
    float:right;
}
.comments > .field > .right .editable {
    padding: 5px 22px 5px 6px;
    overflow: auto;
    max-height: 133px;
    outline-style: none;
    
    /*font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;*/
    /*font-family:system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort,system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;*/
    
    font-size:0.8em;
    vertical-align:baseline;
    font-weight:400;
    color:rgb(68, 68, 68);
}
.comments > .field > .right .editable.empty { color:gray; }
.comments > .field > .right .display_photos {
}
.comments > .field > .right .display_photos > div {
    width:80%;
    margin:0px auto;
    position:relative; /* for delete button */
}
.comments > .field > .right .display_photos > div > .commentImage {
    width:100%;
}
.comments > .field > .right .display_photos > div > .deleteCommentImage {
}
.comments > .field > .right .display_photos > div > .deleteCommentImage::before {
    position: absolute;
    content: "X";
    width: 15px;
    height: 15px;
    vertical-align: baseline;
    right: 3px;
    top: 3px;
    color: black;
    background: white;
    text-align: center;
    border-radius: 33px;
    box-shadow: 0px 0px 2px 1px grey;
    font-size: 0.73em;
    cursor:pointer;
}
.comments > .field > .right .display_photos > div > .deleteCommentImage:hover::before {
    background:yellow;
}
.comments > .field > .notice {
    font-size: 0.6em;
    color: #737373;
    margin: 0px 0px 6px 33px;
}


/*-- COMMENT DISPLAY START */
.comments > .display {}
.comments > .display .comment {
    margin:0px 0px 13px 0px;
}
.comments > .display .comment > .left {
	float:left;
}
.comments > .display .comment > .left a { text-decoration:none; }
.comments > .display .comment > .left > a > img {}
.comments > .display .comment > .right {
	margin:0px 0px 0px 33px;
}
.comments > .display .comment > .right > .display {
    display:inline-block;
    padding: 6px 30px 6px 6px;
    border-radius: 13px;
    margin: 0px 0px 0px 0px;
    background: rgb(242, 243, 245);
    color:rgb(68, 68, 68);
    position:relative;
}
.comments > .display .comment > .right > .display .display_photos {}
.comments > .display .comment > .right > .display .display_photos > div {
    width:80%;
    margin:0px auto;
}
.comments > .display .comment > .right > .display .display_photos > div .commentImage {
    width:100%;
}

.comments > .display .comment > .right > .display .user {
    display:inline-block;
    margin:0px 17px 0px 0px;
}
.comments > .display .comment > .right > .display .user a {
	color: #385898;
    text-decoration: none;
    font-weight: bolder;
}
.comments > .display .comment > .right > .display .text {
    /*font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;*/
    /*font-family:"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort,system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;*/
    /*font-family:system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort,system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;*/
    font-size:0.8em;
    line-height:1.6em;
    vertical-align:baseline;
    display:inline;
    font-weight:400;
}
.comments > .display .comment > .right > .display .menu {
    position: absolute;
    right: 2px;
    top: 49%;
    /* margin: 0px 0px; */
    margin: -4px 0px 0px 0px;
    z-index:1;
}
.comments > .display .comment > .right > .display .menu .btn {
    font-size:0.8em;
}
.comments > .display .comment > .right > .options {
    font-size:0.73em;
    text-transform:lowercase;
}
.comments > .display .comment > .right > .options > font.btn {
    font-weight:100;
    color:#385898;
}
.comments > .display .comment > .right > .options > font.duration {
    color:gray;
}
.comments > .display .comment > .right > .options > font:not(.jstext) {
}
.comments > .display .comment > .right > .options > font > .like_image {
    position:relative;
    display: inline-block;
    margin: 0px 0px 0px 21px;
}
.comments > .display .comment > .right > .options > font > .like_image:after {
    position:absolute;
    content:"";
    left: -22px;
    top: -2px;
    width: 21px;
    height: 21px;
    background-image: url(/img/LIKE-BUTTON.png);
    background-position: center;
    background-size: 21px 21px;
}

/*-- COMMENT REPLY FIELD START */
.comments > .display .comment > .right > .reply_display {
}
.comments > .display .comment > .right > .reply_field {
    margin:6px 0px 0px 0px;
}
.comments > .display .comment > .right > .reply_field .left { float:left; }
.comments > .display .comment > .right > .reply_field .left > a { text-decoration:none; }       /* user profile url */
.comments > .display .comment > .right > .reply_field .left > a > img {} /* user logo */
.comments > .display .comment > .right > .reply_field .right { 
    margin:0px 0px 0px 33px;
    position:relative;
    border-radius: 13px;
    border: solid 1px rgb(221, 225, 232);
    background: rgb(242, 243, 245);
    box-shadow: 0px 0px 3px 1px rgb(221, 225, 232);
}
.comments > .display .comment > .right > .reply_field .options {
    position: absolute;
    z-index: 3;
    right: 7px;
    top: 3px;
}
.comments > .display .comment > .right > .reply_field .options img {
    width:18px;
    height:16px;
}
.comments > .display .comment > .right > .reply_field .options .btn {
    display:inline-block;
    float:left;
}
.comments > .display .comment > .right > .reply_field .options .btn:hover { text-decoration:none; }
.comments > .display .comment > .right > .reply_field .options .btn_emoji {}
.comments > .display .comment > .right > .reply_field .options .btn_emoji .emosxxxfield {
    display:inline-block;
}
.comments > .display .comment > .right > .reply_field .options .btn_emoji .emosxxxbutton {
    vertical-align: text-bottom;
    margin: 0px !important;
    line-height: 21px;
    font-size:21px;
    float:right
}
.comments > .display .comment > .right > .reply_field .editable {
    padding: 5px 22px 5px 6px;
    overflow: auto;
    max-height: 133px;
    outline-style: none;
    
    font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
    font-size:0.8em;
    vertical-align:baseline;
    font-weight:400;
    color:rgb(68, 68, 68);
}
.comments > .display .comment > .right > .reply_field .editable.empty { color:gray; }
.comments > .display .comment > .right > .reply_field .display_photos {}
.comments > .display .comment > .right > .reply_field .display_photos > div {
    width:80%;
    margin:0px auto;
    position:relative; /* for delete button */
}
.comments > .display .comment > .right > .reply_field .display_photos > div > .commentImage {
    width:100%;
}
.comments > .display .comment > .right > .reply_field .display_photos > div > .deleteCommentImage {
}
.comments > .display .comment > .right > .reply_field .display_photos > div > .deleteCommentImage::before {
    position: absolute;
    content: "X";
    width: 15px;
    height: 15px;
    vertical-align: baseline;
    right: 3px;
    top: 3px;
    color: black;
    background: white;
    text-align: center;
    border-radius: 33px;
    box-shadow: 0px 0px 2px 1px grey;
    font-size: 0.73em;
    cursor:pointer;
}
.comments > .display .comment > .right > .reply_field .display_photos > div > .deleteCommentImage:hover::before {
    background:yellow;
}
.comments > .display .comment > .right > .reply_field .notice {
    font-size: 0.6em;
    color: #737373;
    margin: 0px 0px 6px 33px;
}