#modal-comentarios .commentlist {margin:0; padding: 0; width: 100%;float: none;}



.depth-1  {
padding: 0;	
margin: 50px 0;
	position: relative;
}


.commentlist .depth-1:last-child  {margin-bottom: 0}

.depth-2, .depth-3, .depth-4, .depth-5  {
margin: 20px 0;
}


.comment-content {position:relative}

.article .comment-content {font-size:90%}

body .floatcomment .comment-content {
  font-size: 82%;
}



.comment-text {
  max-height: none;
  overflow: visible;
  padding-bottom: 4px;
  position: relative;
}

/* Expand/collapse UI removed — always show full comment text */
.comment-text .toggle-comment,
.comment-text .fog {
  display: none !important;
}

.article .comment-text img {margin: 3px auto;}

.article .comment-content .comment-text p,
.article .comment-text img {margin-bottom: 10px;}


.comment-form-comment {position: relative; min-height: 50px;}




.comment-content .comment-meta {
	color: #999;

align-items: center;
display: inline-flex;
margin-top: -33px;
padding: 0 10px;}

.comment-meta .date {font-size: 75%; padding-left: 6px; }

.comment-content .comment-meta .author {
text-transform: uppercase;
font-size: 88%;
font-weight: 700;}

 .article .comment-content p {
    line-height: 1.5em;
    margin-bottom: 0;
   
}

.depth-2 .comment-content .comment-meta {margin-top:0; padding: 0}


.depth-2 .comment-body {border-left: 1px solid #ccc;}



.comment-meta .avatar {
height: 60px;
width: 60px;
fill: #c5c5c5;
margin-right: 5px;}

.comment-body{

	padding: 0 20px 10px 20px;
	width: 100%;
}


 .comment-content .comment-reply-link, .comment-text .toggle-comment,  .showdeptanswer {
color: #888;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 2px 10px;
	 text-decoration: none;
}

.showdeptanswer {border: none; 
	position: absolute;
  bottom: -10px; 
	transform: translate(-50%, 0);
  left: 50%; 
	background: #fff; 
	padding: 2px 23px 2px 14px; 
	white-space: nowrap}


.comment-text .toggle-comment {
	border-radius: 4px;
	padding: 2px 23px 2px 14px;
  position: absolute;
  right: 50%;
  bottom: -2px;
  background: #fff;
  transform: translateX(50%);
	z-index: 2; 
	border: 2px dotted #ccc; 
	cursor: pointer; 
	white-space: nowrap;}

.toggle-on.comment-text .toggle-comment {bottom: -11px;}

.toggle-comment::after, .showdeptanswer::after {width: 20px;}

.toggle-div .comment-content {display: none}

.toggle-on .comment-content {display: block}



.toggle-comment .cont, .comment-text.toggle-on .toggle-comment .exp, .showdeptanswer .cont, .toggle-on .showdeptanswer .exp{display: none}

.comment-text.toggle-on .toggle-comment .cont, .toggle-on .showdeptanswer .cont {display: inline-block}


.comment-reply-link svg {
	width: 15px;
height: 15px;
fill: #999;
vertical-align: text-bottom;}





.article .logged-in-as {margin-bottom: 4px;
    font-size: 90%;}


.article #modal-comentarios .sticky-header-passos .passos-header {margin:0}

#modal-comentarios .scroll{z-index: 9;position: relative;}




#respond  {
position: sticky;
bottom: 0;
z-index: 9;
margin-top: 15px;
padding: 15px;
border: 3px solid #f0f0f0;
border-radius: 5px; 
	user-select: none;
}

#respond.form-open {padding: 7px 15px 15px;}



.comment-form textarea {
border: 1px solid #D8D8D8;
	padding: 10px 40px 10px 45px; 
	font-size: 90%;
line-height: 22px; 
	min-height: 50px;
  resize: none;  overflow: hidden;
}


.comment-respond:not(.form-open) .comment-form textarea {height: 50px !important; overflow-y: auto !important}




.comment-form input {display:none; font-size: 93%;}

.form-open input {display:inline-block}


.article .comment-reply-title {
text-transform: uppercase;
font-weight: 700;
	font-size: 85%;
margin-bottom: 0;
}

.comment-reply-title small a{color: #ff0036; margin-left: 7px}

.comment-form input:not(#submit) {height: 35px;
width: 48%;
padding: 0;
border: none;
border-bottom: 1px solid #D8D8D8; 
	margin-bottom: 15px; border-radius: 0}

#commentform input:focus, .comment-form textarea:focus {
border-color: #888;}


#respond:not(.form-open) #emojis-wrapper {display: none}


#emojis-wrapper {padding-bottom: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow-x: auto;}


#emojis-wrapper span {cursor: pointer; font-size: 120%; padding: 0 4px;}

.comment-form #author {margin-right: 2.2%;}

.comment-form .form-submit {
position: absolute;
right: 0;
bottom: 0;
margin: 0;
background-color: #fc0;
height: 40px;
width: 40px;
	border-radius: 5px;}

.comment-form #submit {
display: block;
position: absolute;
background: transparent;
bottom: 0;
top: 0px;
left: 0;
right: 0;
width: 100%;
cursor: pointer;
}

.comment-form-comment .avatar {
	position: absolute;
margin-left: 5px;
fill: #c5c5c5;
margin-top: 6px;
height: 38px;
width: 38px;}

.form-submit svg {
position: absolute;
right: 7px;
bottom: 8px;
fill: #fff; height: 25px;}

.comment-form {position: relative}

.comment-form #submit:hover  {opacity: .8}

.comment-form label {display:none }

.floatcomment .scroll {height: calc(100% - 60px);}


#comment-status{
  position: absolute;
  z-index: 1;
  font-size: 90%;
  font-style: italic;
  left: 50%;
  top: -8px;
  transform: translate(-50%,-0%);
  padding: 0px 5px;
  border-radius: 7px;
  color: red; white-space: nowrap;
}

.article #comment-status p{ margin: 0;
line-height: 1rem;}

.awaiting-moderation {
	width: 100%;
text-align: center;
font-size: 13px;
border: 1px solid #eee;
padding: 5px;
background-color: #f9f9f9;
margin-bottom: 10px;}

.article .awaiting-moderation p {margin-bottom: 2px; font-style: italic;}



.depth-1 {border: 1px solid #ccc; border-radius: 5px;}

.depth-2 .comment-margin {margin-left: 40px;}

.depth-3 .comment-margin {margin-left: 80px;}

.depth-4 .comment-margin {margin-left: 120px;}

.depth-5 .comment-margin {margin-left: 160px;}


.depth-2.toggle-div {margin: 0} 

.depth-2.toggle-on {margin: 20px 0;}


.comment-footer {display: flex;
    justify-content: space-between;
	align-items: center; padding-top: 10px;
 border-top: 2px dotted #ccc;}

.cld-like-dislike-wrap {display: flex;
  line-height: 15px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 0 8px; position: relative;}

.cld-like-dislike-wrap a {
 position: static
}


.cld-like-dislike-wrap a::before {
  bottom: 0;
  content: " ";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}


.heart {
width: 22px;
    height: 20px;
    display: inline-flex;
    user-select: none;
}


.heart::before, .heart::after {
transform: translateY(-50%);
    width: 19px;
    height: 20px;
    position: absolute;
    top: 50%;
}


.heart::before {
  content: url(https://dica.com.br/img/emptyheart.svg);
}

.cld-undo-trigger .heart::after {
  content: url(https://dica.com.br/img/filledheart.svg);
}

.cld-undo-trigger .heart::before {
  display: none
}


.cld-count-wrap {line-height: 21px; font-size: 80%; font-weight: 700;
  color: #888;}




.form-open .comment-form .form-submit {bottom: 50px;}


.form-submit {display: none}

.form-open .form-submit {display: block}




@media screen and (max-width: 551px) {
	
	
	
	.comment-form #author {
    margin-right: 2%;
}
	
	
	
	

	

	
}



@media screen and (max-width: 451px) {


.depth-2 .comment-content, .depth-3 .comment-content, .depth-4 .comment-content, .depth-5 .comment-content {
    overflow-x: auto;
    
}



.depth-2 .comment-body, .depth-3 .comment-body, .depth-4 .comment-body, .depth-5 .comment-body {
	overflow-x: auto;
min-width: 350px;}

	
}



