/* center the blockquote in the page */
.blockquote-wrapper {
   display: flex;
   padding: 0 10px;
}

/* Blockquote main style */
.blockquote {
    position: relative;
    font-family: var(--font-normal), sans-serif;
    /*max-width: 620px;*/
    margin: 20px auto;
    align-self: center;
}

/* Blockquote header */
.blockquote h3 {
    font-family: var(--font-accent), sans-serif;
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 125%;
    margin: 0;
    border: 2px solid #fff;
    border: 2px solid var(--color-main);
    border-radius:20px;
    padding: 20px;
}
.blockquote h3 .hl{color: var(--color-main)}

/* Blockquote right double quotes */
.blockquote h3:after {
    content:"";
    position: absolute;
    border: 2px solid var(--color-main);
    border-radius: 0 30px 0 0;
    width: 40px;
    height: 40px;
    bottom: 0px;
    left: 50px;
    border-bottom: none;
    border-left: none;
    z-index: 3; 
}

.blockquote h3:before {
    content:"";
    position: absolute;
    width: 60px;
    border: 6px solid #FFF;
    bottom: 40px;
    left: 50px;
    z-index: 2;
}

/* Blockquote subheader */
.blockquote h4 {
    position: relative;
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    padding-top: 15px;
    z-index: 1;
    margin-left:130px;
    padding-left:12px;
    height: 40px;
}

 
.blockquote h4:first-letter {
  margin-left:-12px;
}


.rate {
    padding: 0;
    width: 150px;
    font-size: 11px;
}
.rate:not(:checked) > input {
    position:absolute;
    top:-9999px;
}
.rate:not(:checked) > label {
    float:left;
    width:15px;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:20px;
    color:#ccc;
}
.rate:not(:checked) > label:before {
    content: '★ ';
}
/*.rate > input:checked ~ label {
    color: var(--color-accent); /*var(--star-background);    */
}*/
.rate:not(:checked) > label:hover,
.rate:not(:checked) > label:hover ~ label {
    color: #deb217;  
}
.rate label.marked{color:var(--color-accent);}
.rate > label:hover
/*.rate > input:checked + label:hover,
.rate > input:checked + label:hover ~ label,
.rate > input:checked ~ label:hover,
.rate > input:checked ~ label:hover ~ label,
.rate > label:hover ~ input:checked ~ label*/ {
    color: #c59b08;
}
#ratingresp{font-size: 9px; line-height: 100%; height: 12px}


.Stars {
  --percent: calc(var(--rating) / 5 * 100%);
  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;
}
.Stars::before {
  content: "★★★★★";
  letter-spacing: 3px;
  background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

      .ingrcb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  vertical-align: sub;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 3px;
  outline: none;
}
.ingrcb:checked {
  background-color: var(--color-main);
  border-color: #666666;
}
.ingrcb:checked + span {
  text-decoration: line-through;
  color: #b3b3b3;
  /*background-color: #f7f7f7;*/
}
.ingrcb:checked:focus, .ingrcb:checked:hover {
  box-shadow: 2px 2px 3px 1px rgba(0,0,0, 0.1);
  border-color: #666666;
}

.ingrcb:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjZmZmZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPmljb25fYnlfUG9zaGx5YWtvdjEwPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBmaWxsPSIjZmZmZmZmIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNi4wMDAwMDAsIDI2LjAwMDAwMCkiPjxwYXRoIGQ9Ik0xNy45OTk5ODc4LDMyLjQgTDEwLjk5OTk4NzgsMjUuNCBDMTAuMjI2Nzg5MSwyNC42MjY4MDE0IDguOTczMTg2NDQsMjQuNjI2ODAxNCA4LjE5OTk4Nzc5LDI1LjQgTDguMTk5OTg3NzksMjUuNCBDNy40MjY3ODkxNCwyNi4xNzMxOTg2IDcuNDI2Nzg5MTQsMjcuNDI2ODAxNCA4LjE5OTk4Nzc5LDI4LjIgTDE2LjU4NTc3NDIsMzYuNTg1Nzg2NCBDMTcuMzY2ODIyOCwzNy4zNjY4MzUgMTguNjMzMTUyOCwzNy4zNjY4MzUgMTkuNDE0MjAxNCwzNi41ODU3ODY0IEw0MC41OTk5ODc4LDE1LjQgQzQxLjM3MzE4NjQsMTQuNjI2ODAxNCA0MS4zNzMxODY0LDEzLjM3MzE5ODYgNDAuNTk5OTg3OCwxMi42IEw0MC41OTk5ODc4LDEyLjYgQzM5LjgyNjc4OTEsMTEuODI2ODAxNCAzOC41NzMxODY0LDExLjgyNjgwMTQgMzcuNzk5OTg3OCwxMi42IEwxNy45OTk5ODc4LDMyLjQgWiI+PC9wYXRoPjwvZz48L2c+PC9nPjwvc3ZnPg==");
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
}