:root {
--color1:#8d12c7;
--color2:#0957c3;
--color3:#440c5e;
--color4:#260d29;
--color5:#1c0a1f;
--color6:#ebf0f9;}
.header-block {
    align-items: center;
    border-radius: 0.625rem;
    height: auto;
    justify-content: center;
    padding: 40px 60px;
    background-color: var(--color6);
    margin-bottom:20px;
    opacity: 1; transform: translateY(0px);
    
}
.text-content a {
  color: var(--color1);
}
.text-content a:hover {
  color: var(--color2);
}
.top-header-nav a {color: var(--color1);}
.text-content ul li::before {background: var(--color1);}
#toc_container {background-color: var(--color6);}
.product-info {
    display: flex;
    flex-direction: column;
}
.product-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color1);
    margin-bottom:10px;
}
.product-description {
    color: #333;
    text-align: left;
    margin: 10px 0;
}
.button-group {
    display: flex;
    gap: 15px;
    margin: 10px 0;
    width: 100%;
}
a.btn-header-template.btn-log {
    color: var(--color1);
    transition: .3s;
    border: 2px solid var(--color1);
}
.btn-header-template {
    border-radius: 0.625rem;
    padding: 10px 20px;
}
a.btn-header-template.btn-reg {
    color: #fff;
    background: linear-gradient(137deg, var(--color1) 1.11%, var(--color2) 100%);
}
.btn-header-template.btn-reg {
    position: relative;
    overflow: hidden;
}
.imglogosmal {width:100px;height:auto; margin-right:20px; margin-top:-10px;}




.animate-wrapper {
    margin-top: 50px;
    margin-bottom: 20px;
}
@media (min-width: 501px) {
  .header-block {display: none;}
}
@media (max-width: 500px) {
   .header-block {
    align-items: center;
    border-radius: 0.625rem;
    height: auto;
    justify-content: center;
    padding: 30px 50px;
    background-color: var(--color6);
    margin-top:0px;}
    .animate-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
}
}

   
.comment-wrapper {
    padding-top: 50px;
}


.comment-wrapper .text-32 {
    margin-bottom: 20px;
}


.comment-form {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
}

.comment-row input[type=text],
.comment-row input[type=email],
.comment-row textarea {
    width: 100%;
    border-radius: 4px;
    padding: 15px;
    border: 1px solid #e4e4e4;
    background: #fbfafa;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
    -ms-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    resize: none;
}

.comment-row input[type=text]:focus,
.comment-row input[type=email]:focus,
.comment-row textarea:focus {
    background: #fff;
}

.comment-row.double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

.comment-list {
    margin-top: 70px;
}

.comment {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 20px;
}

.comment-input {
    position: relative;
    z-index: 2;
}

.author {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.author span {
    font-weight: 600;
}

.author .date {
    font-size: 14px;
    color: dimgrey;
}

.text {
    font-size: 16px;
}


.rating {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    overflow: hidden;
    flex-direction: row-reverse;
    position: relative;
    margin: 10px 0;
}

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

.rating > input {
    display: none;
}

.rating > label {
    cursor: pointer;
    width: 33px;
    height: 33px;
    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: 0.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");
}

#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);
}


@media (max-width: 767px) {
    .comment-row.double {
        grid-template-columns: 1fr;
    }
}
