.comment {
    margin-bottom: 20px;
}
.comment-wrap {
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    padding: 25px;
}

.comment-wrap.mt-30 {
    margin-top: 30px
}

.comment-wrap.dark {
    border-color: #334155
}

.comment-title {
    font-size: 20px;
    line-height: 26px;
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center
}

.comment-title.dark {
    color: #e6e6e6
}

.comment-title svg {
    position: relative;
    left: -5px;
    margin: 0 10px 0 0
}

.comment-action {
    font-weight: 500;
    color: gray
}

.comment-action.dark {
    color: #b3b3b3
}

.comment-action.dark button:not(:nth-child(1))::before {
    border-left-color: #334155
}

.comment-action>*:not(:first-child) {
    margin: 0 0 0 7px
}

.comment-action button {
    padding: 0;
    background: rgba(0,0,0,0) none;
    border: 0;
    color: #2361ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.comment-action button:not(:nth-child(1))::before {
    content: "";
    position: relative;
    width: 0;
    height: 18px;
    border-left: 1px solid #ccc;
    margin: 0 7px 0 0
}

.comment-box {
    margin: 10px 0 0
}

.comment-box .textarea {
    background: #ffffff none;
    border-radius: 5px;
    padding: 2%;
    border: 1px solid #e4eef7;
 
    width:100%;
    height: 107px;
    outline: none;
    resize: none
}

.comment-box input {
    background: #ffffff none;
    border-radius: 5px;
    border: 1px solid #e4eef7;
    height: 34px;
    width: 100%;
    line-height: 34px;
    padding: 5px;
}

.comment-box .textarea.textarea-reply {
    height: 70px
}

.comment-box .action {
    margin: 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 34px
}

.comment-box .note {
    flex: 0 0 auto;
    max-width: 100%;
    width: calc(100% - 140px);
    color: gray
}

.comment-box .submit {
    border: 0;
    padding: 1px 0 0;
    border-radius: 5px;
    background: #1a7900 none;
    color: #f8fafc;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    width: 120px;
    height: 34px;
    cursor: pointer
}

.comment-box.dark .textarea {
    background-color: #1e293b;
    color: #b3b3b3
}

.comment-container {
    margin: 20px 0 0
}

.comment-nav {
    border-bottom: 1px solid #e6e6e6
}

.comment-nav::after {
    content: "";
    display: block;
    clear: both
}

.comment-nav>* {
    float: left
}

.comment-nav>*:not(:first-child) {
    margin: 0 0 0 20px
}

.comment-nav button {
    border: 0;
    padding: 7px 0;
    background: rgba(0,0,0,0) none;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
    color: gray;
    position: relative;
    cursor: pointer
}

.comment-nav button.active {
    color: #333
}

.comment-nav button.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 0;
    border-bottom: 3px solid #1a7900
}

.comment-nav.dark {
    border-bottom-color: #334155
}

.comment-nav.dark button {
    color: #b3b3b3
}

.comment-nav.dark button.active {
    color: #e6e6e6
}

.comment-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.comment-list>li {
    margin: 20px 0 0
}

.comment-list>li:not(:first-of-type) {
    border-top: 1px solid #e6e6e6;
    padding: 20px 0 0
}

.comment-list.child {
    margin-left: 52px
}

.comment-list.dark>li:not(:first-of-type) {
    border-top-color: #334155
}

.comment-list.dark .comment-author {
    color: #e6e6e6
}

.comment-list.dark .comment-empty::before,.comment-list.dark .comment-reply::before {
    background-color: #b3b3b3
}

.comment-empty {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.comment-empty svg {
    stroke: #999
}

.comment-empty span {
    margin: 10px 0 0;
    display: block
}

.comment-item {
    display: flex;
    flex-wrap: wrap
}

.comment-avatar {
    flex: 0 0 auto;
    max-width: 100%;
    width: 40px;
    height: 40px;
    margin: 0 12px 0 0
}

.comment-avatar .avatar {
    background: #1a7900;
    border-radius: 50%;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase
}

.comment-avatar .avatar.img-check {
    background: none
}

.comment-avatar img {
    width: 100%;
    border-radius: 50%
}

.comment-content {
    flex: 0 0 auto;
    max-width: 100%;
    width: calc(100% - 52px)
}

.comment-top {
    display: flex;
    align-items: center;
    line-height: 16px;
    color: #999
}

.comment-author {
    font-weight: 600;
    color: #333; 
    font-size: 16px;
}

.comment-author.dark {
    color: #e6e6e6
}

.comment-time {
    margin: 0 0 0 8px
}

.comment-text {
    margin: 8px 0 0;
    color: #333
}

.comment-bottom {
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #565656;
    float: right;
}

.comment-bottom li {
    position: relative
}

.comment-bottom li:not(:first-of-type) {
    display: flex;
    align-items: center
}

.comment-bottom li:not(:first-of-type)::before {
    content: "";
    position: relative;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ccc none;
    margin: 0 7px
}


.comment-bottom li button {
    padding: 0;
    background: rgba(0,0,0,0) none;
    border: 0;
    cursor: pointer;
    color: #565656
}

.comment-bottom li button.like {
    display: flex;
    align-items: center;
    line-height: 12px;
    gap: 8px
}

.comment-bottom li button.like.active {
    color: #2361ff
}

.comment-bottom li button.like.active::before {
    background: #2361ff none
}

.comment-bottom li button.like b {
    margin: 0 3px 0 0
}

.comment-bottom li button .icon {
    transition: all .3s ease-in-out
}

.comment-bottom li button .icon:hover {
    transform: scale(1.4);
    transform-origin: center
}

.comment-bottom li .reaction-list {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear .33s,opacity .33s linear;
    display: flex;
    list-style-type: none;
    gap: 8px;
    padding: 8px 15px;
    box-shadow: 0 1px 3.9px 0 rgba(0,0,0,.1490196078);
    border-radius: 100px;
    background: #fff;
    position: absolute;
    top: -48px;
    left: -36px;
    z-index: 2
}

.comment-bottom li .reaction-list.active {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s
}

.comment-bottom li .reaction-list::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1px;
    z-index: -1
}

.comment-bottom li .reaction-active {
    display: flex;
    gap: 8px;
    color: #0f6c32;
    align-items: center;
    line-height: 12px
}

.comment-bottom li .reaction-item {
    position: relative
}

.comment-bottom li .reaction-item-name {
    visibility: hidden;
    opacity: 0;
    transition: all .2s ease-in-out;
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(86,86,86,.8980392157);
    border-radius: 16px;
    padding: 4px 10px;
    line-height: 14px;
    color: #fff;
    white-space: nowrap;
    font-size: 12px
}

.comment-bottom li .reaction-item:hover .reaction-item-name {
    visibility: visible;
    opacity: 1
}

.comment-bottom li:hover .list-reacted-detail {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s
}

.comment-bottom li .list-reacted {
    display: flex;
    gap: 12px
}

.comment-bottom li .list-reacted-icon {
    display: flex;
    position: relative
}

.comment-bottom li .list-reacted-item:not(:first-of-type) {
    margin-left: -8px
}

.comment-bottom li .list-reacted-count {
    color: #888;
    margin-left: 6px
}

.comment-bottom li .list-reacted-count.high-light {
    color: #0f6c32
}

.comment-bottom li .list-reacted-detail {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear .33s,opacity .33s linear;
    display: flex;
    position: absolute;
    top: -42px;
    left: 50%;
    padding: 8px 12px;
    gap: 12px;
    box-shadow: 0 1px 3.9px 0 rgba(0,0,0,.1490196078);
    background: #fff;
    border-radius: 100px;
    align-items: center;
    transform: translate(-50%, -10%)
}

.comment-bottom li .list-reacted-detail::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1px;
    z-index: -1;
    top: 6px
}

.comment-bottom li .list-reacted-detail-item {
    display: flex;
    gap: 6px;
    color: #222;
    font-size: 14px;
    justify-content: space-between;
    align-items: center
}

.comment-bottom li .icon {
    display: block;
    width: 24px;
    height: 24px
}



.comment-reply {
    margin: 12px 0 0 52px;
    display: flex;
    align-items: center;
    padding: 0;
    background: rgba(0,0,0,0) none;
    border: 0;
    cursor: pointer;
    color: #0f6c32;
    text-decoration: underline;
    font-size: 15px;
    line-height: 20px;
}

.comment-more {
    margin: 20px 0 0;
    display: flex;
    align-items: center;
    padding: 12px 28px;
    background: #f4f6fa none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    color: #0f6c32;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30px
}

 #modal {
        width: 300px;
        max-width: 80%;
        background-color: white;
        border: 1px solid #ccc;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        text-align: center;
        display: none;
    }
    #modal-message.success {
    color: green;
}


#modal-message.error {
    color: red;
}

#modal-message {
    margin: 0;
    padding: 0;
    color: #333;
}

   
/* .ratings {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  direction: rtl;
  text-align: left;
  margin-bottom: 5px;
}

.star {
  position: relative;
  line-height: 30px;
  display: inline-block;
  transition: color 0.2s ease;
  color: #111111;
}

.star:before {
  content: '\2605';
  width: 30px;
  height: 30px;
  font-size: 30px;
}

.star:hover,
.star.selected,
.star:hover ~ .star,
.star.selected ~ .star{
  /* transition: color 0.8s ease; */
  /* color: rgb(253, 249, 17);
} */

* { box-sizing: border-box; }

.container {
  background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/concrete-texture.png");
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.rating {
  display: flex;
  width: 100%;
  justify-content: center;
  overflow: hidden;
  flex-direction: row-reverse;
  height: 150px;
  position: relative;
}

.rating-0 {
  filter: grayscale(100%);
}

.rating > input {
  display: none;
}

.rating > label {
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin-top: auto;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 76%;
  transition: .3s;
}

.rating > input:checked ~ label,
.rating > input:checked ~ label ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}


.rating > input:not(:checked) ~ label:hover,
.rating > input:not(:checked) ~ label:hover ~ label {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

.emoji-wrapper {
  width: 100%;
  text-align: center;
  height: 100px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.emoji-wrapper:before,
.emoji-wrapper:after{
  content: "";
  height: 15px;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1;
}

.emoji-wrapper:before {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
}

.emoji-wrapper:after{
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
}

.emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: .3s;
}

.emoji > svg {
  margin: 15px 0; 
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}

#rating-1:checked ~ .emoji-wrapper > .emoji { transform: translateY(-100px); }
#rating-2:checked ~ .emoji-wrapper > .emoji { transform: translateY(-200px); }
#rating-3:checked ~ .emoji-wrapper > .emoji { transform: translateY(-300px); }
#rating-4:checked ~ .emoji-wrapper > .emoji { transform: translateY(-400px); }
#rating-5:checked ~ .emoji-wrapper > .emoji { transform: translateY(-500px); }

.feedback {
  max-width: 100%;
  background-color: #fff;
  width: 100%;
  padding: 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: 0 4px 30px rgba(0,0,0,.05);
}