/* .autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:* /
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
  /*when hovering an item:* /
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:* /
  background-color: DodgerBlue !important;
  color: #ffffff;
} */


/* tag handling */
@font-face { 
    font-family: 'RobotoFlex'; 
    src: url('../fonts/RobotoFlex-Regular.ttf'); 
    font-weight: normal; 
  }
  
  body,
  body.light {
    --main-text-color: rgba(0, 0, 0, .8);
    --important-text-color: rgba(0, 0, 0, 1);
    --main-color: #da0216;
    --bg-color: #fff;
    --card-bg-color: #fff;
    --active-color: #da0216;
    --active-bg-color: #d9d9d9;

    --light-gray-color: #cfcfcf;
  
    --unactive-color: #cfcfcf;
    --unactive-hovered-color: #aaa;
  
    --unactive-gray-background-color: #cfcfcf50;
  
    --pressed-background-color: rgba(0, 0, 0, .8);
    --pressed-text-color: #eeeeee;

    --red-point-color: rgba(226, 55, 12, 1);
    --green-point-color: rgb(127, 255, 212, 1);
    --grey-point-color: rgb(204, 204, 204, 1);
    --yellow-point-color: rgba(212, 226, 12, 1);

    --shadow: 0px 0px 4px 0px rgb(0 0 0 / 10%);
    --shadow-hover: 0px 0px 4px 0px rgb(0 0 0 / 20%);
  
    --disabled-opacity: 0.3;
    --radius: 25px;
    --gap: 10px;
  }

  a, a:focus, a:visited {
    color: currentColor;
    text-decoration: none;
    transition: color .3s;
  }

  a:not(.button):hover {
    color: var(--important-text-color);
  }
  
  .new-round-load {
    pointer-events: none;
  }
  
  /* @media (prefers-color-scheme: dark) {
    body {
      
    }
  } */
  
  #reviewFormHolder {
    width: calc(100% + 20px);
    margin-left: -10px;
  }
  
  .marks-holder,
  .buttons-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .marks-holder>* {
    padding: 5px;
  }
  
  .buttons-holder>* {
    margin: 5px;
  }
  
  
  .name-holder {
    background-color: #ccc;
    /* width: auto; */
    text-align: center;
    width: min-content;
    display: flex;
    padding: 5px 15px;
    border-radius: 17px;
    position: relative;
    color: #000;
    cursor: pointer;
    align-items: center;
    width: 100%;
  }
  
  .tag-passive .name-holder {
    background-color: unset;
    /* border: 1px solid black; */
    line-height: 23px;
  }
  
  .tag-passive{
    border: 1px solid black;
    border-radius: 17px;
  }
  
  .tag-passive.tag-stata-line .name-holder {
    width: 200px;
    overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  .tag-passive.tag-stata-line .right-line-part {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-basis: 400px;
    flex-shrink: 1;
    overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  
  }
  
  .tag-passive.tag-stata-line .right-line-part div {
    flex-shrink: 1;
    flex-basis: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }
  
  .tag-passive.tag-stata-line {
    width: calc(100% + 30px);
    margin-left: -15px;
    margin-right: -15px;
    display: flex;
    justify-content: space-between;
    align-content: center;
  
    border: none;
    /* border-bottom: 1px solid black; */
    background-color: var(--unactive-gray-background-color);
    border-radius: unset;
  }
  
  [data-grade="0"] .name-holder {
    background-color: #ccc;
  }
  [data-grade="1"] .name-holder {
    background-color: rgba(81,255,151,1);
  }
  [data-grade="2"] .name-holder {
    background-color: rgba(183,255,54,1);
  }
  [data-grade="3"] .name-holder {
    background-color: rgba(255,245,23,1) ;
  }
  [data-grade="4"] .name-holder {
    background-color: rgba(255,81,0,1);
  }
  
  .icon-grade {
    width: 25px;
    height: 25px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .grade-number {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .icon-grade-custom span {
    width: 25px;
    height: 25px;
    /* background-image: url(http://films.new4.me/attachment/?id=138672); */
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .grade-ring {
    width: 25px;
    height: 25px;
    stroke: #000;
  }
  /* .grade-ring:after {
    content: "x";
    position: relative;
  } */
  
  .icon-grade .grade-number:before {
    content: "x";
    /* width: 100%; */
    margin: 0 auto;
    text-align: center;
    /* left: 11px; */
    font-size: 11px;
    position: relative;
  }
  
  .icon-grade-custom .grade-number:before {
    left: 10px;
    bottom: 8px;
  }
  .grade-ring circle {
    stroke-width: 2px;
    fill: transparent;
    cx: 12px;
    cy: 13px;
    r: 9px;
    /* stroke-dasharray: 0 100; */
    /* stroke: #00000080; */
  }
  [data-grade="0"] .grade-ring circle {
    /* stroke-dasharray: 0 100; */
    stroke: #00000080;
  }
  [data-grade="1"] .icon-grade .grade-number:before {
    content: "1";
  }
  [data-grade="1"] .grade-ring circle {
    stroke-dasharray: /*0 2*/ 9 100;
  }
  [data-grade="2"] .icon-grade .grade-number:before {
    content: "2";
  }
  [data-grade="2"] .grade-ring circle {
    stroke-dasharray: /*0 2*/ 9 5 9 100;
  }
  [data-grade="3"] .icon-grade .grade-number:before {
    content: "3";
  }
  [data-grade="3"] .grade-ring circle {
    stroke-dasharray: /*0 2*/ 9 5 9 5 9 100;
  }
  [data-grade="4"] .icon-grade .grade-number:before {
    content: "4";
    left: -1px;
  }
  [data-grade="4"] .icon-grade-custom .grade-number:before {
    left: 9px;
  }
  [data-grade="4"] .grade-ring circle {
    stroke-dasharray: /*0 2*/ 9 5 9 5 9 5 9;
  }
  
  .name-holder .slide-track {
    width: 100%;
    height: 400%;
    position: absolute;
    left: 0;
    bottom: 0;
    /* background-color: #dcdcdc; */
    background: rgb(204,204,204);
    background: linear-gradient(0deg, rgba(204,204,204,0.8) 0%, rgba(81,255,151,0.8) 25%, rgba(183,255,54,0.8) 50%, rgba(255,245,23,0.8) 75%, rgba(255,81,0,0.8) 100%);
    border-radius: 17px;
  }
  
  .slide-track .name-holder {
    bottom: 0;
    position: absolute;
    z-index: 2;
  }
  
  .name-holder.activated {
    color: #00000000;
    background-color: #00000000;
    border-color: #00000000;
  }
  .name-holder.activated > .icon{
    visibility: hidden;
  }
  
  .tag-holder input[type="radio"] {
    display: none;
  }
  .tag-holder input[type="text"],
  /* textarea[name="review_content"], */
  textarea[name="hint_content"],
  input.lined-text-field  {
    outline: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    border-color: #ccc;
    background-color: #00000000;
  }
  
  .closer {
    position: absolute;
    right: 3px;
    top: 3px;
  }
  
  textarea[name="hint_content"] {
    display: none;
  }
  
  .tag-holder input[type="text"]:focus,
  input.lined-text-field:focus {
    border-color: green
  }
  
  #add_teg {
    display: none;
  }
  
  /* #marksHolder .rating-holder {
    display: none;
  } */
  
  .card-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .card,
  .card-like,
  .post-wrapper,
  main>article.post {
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    border-radius: 25px;
    background-color: var(--card-bg-color);
    overflow: hidden;
  }
  
  .card-like {
    overflow: unset;
  }
  
  .content-card {
    padding: 20px;
  }
  /* .block,
  article.post {
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 10%);
    border-radius: 25px;
  }
  
  .block:hover,
  article.post:hover {
    box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 20%);
  } */
  
  .card.big {
    width: calc(100% - 40px);
    max-width: unset;
  }
  
  .card h3 {
    font-size: 20px;
    /* margin-left: -10px; */
    margin-top: unset;
  }
  
  .card-block {
    padding: 20px;
    margin: 10px;
    max-width: 500px;
    min-width: 300px;
    /* min-height: 200px; */
  }
  
  .card-content {
    display: flex;
    flex-wrap: wrap;
    margin: -5px;
    justify-content: center;
    align-items: center;
    min-height: calc(100% + 10px);
  }
  
  h3 + .card-content {
    min-height: calc(100% - 42px + 10px);
  }
  
  .card-description + .card-content {
    min-height: calc(100% - 42px - 24px + 10px);
  }
  
  .card-content > *{
    margin: 5px;
   }
  
  .card-no-content {
    margin: auto;
    color: var(--unactive-hovered-color);
    text-align: center;
    margin: 20px auto;
  }
  
  .card-description {
    position: relative;
    font-size: 12px;
    top: -20px;
    margin-left: 10px;
    margin-right: 10px;
    color: var(--unactive-hovered-color);
  }
  
  .card-achievements .card-content{
    justify-content: left;
  }
  
  .message {
    padding: 5px 20px;
    border-radius: 25px;
    max-width: 80%;
    background-color: rgba(0, 0, 0, 0.565);
  }
  
  .achievement {
    box-shadow: 0px 0px 0px 1px black inset;
    border-radius: 17px;
    padding: 20px;
    display: flex;
    color: black;
    min-width: 250px;
    max-width: 546px;
    flex-grow: 1;
  }
  
  .message.achievement {
    /* box-shadow: unset; */
    background-color: white;
    padding: 10px 20px;
  }
  
  .achievement.colored{
    box-shadow: none;
    color: white;
  }
  
  .achievement .achievement-info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
  }
  
  .achievement .achievement-title{
    font-weight: 600;
  }
  
  .achievement .achievement-date{
    color: var(--unactive-hovered-color);
    text-align: right;
    margin-top: 5px;
    font-size: 10px;
  }
  
  .achievement.colored .achievement-date{
    color: inherit;
    filter: opacity(0.8);
  }
  
  .achievement .achievement-image {
    width: 100px;
    margin-right: 10px;
  }
  
  .inverted {
    filter: invert();
  }
  
  #quiz.safari-is-a-shit {
      /* margin-bottom: 100px;
      height: calc(100vh - 100px); */
  }
  .item-card {
    max-width: 460px;
    width: calc(100vw - 110px);
    margin: auto;
    /* padding: 20px; */
    overflow: hidden;
    position: relative;
  
    /* height: calc(100vh - 180px); */
    min-height: 400px;
    /* min-height: 440px; */
    max-height: 740px;
    max-height: min(740px, calc(100vh - 180px));
    aspect-ratio: 267 / 475;
  
    /* bottom: -50px; */
  }
  
  .safari-is-a-shit .item-card {
    /* width: calc(100vw - 60px); */
    /* height: calc(100vh - 200px); */
  } 
  
  .item-card .cover {
    /* margin: -21px; */
    /* max-width: calc(100% + 42px); */
    /* max-width: calc(100%); */
    width: calc(100%);
    object-fit: cover;
    aspect-ratio: 267 / 375;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 45%);
    mask-image: linear-gradient(to top, transparent 0%, black 45%);
  }
  
  .item-card h2 {
    font-size: 1.625rem;
    display: block;

    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .item-info-holder {
    /* margin-top: -90px; */
    /* width: calc(100% - 40px);
    position: absolute;
    bottom: 10px; */
  
  
    /* margin-top: -90px; */
    width: calc(100% - 40px);
    padding: 20px;
    position: absolute;
    /* bottom: 10px; */
    bottom: 0;
    /* padding-top: 200px; */
    padding-top: 30px;
    /* margin: -20px; */
    background: linear-gradient(to top, var(--card-bg-color) calc(100% - 250px), transparent 100%);
  }
  
  #quiz {
    position: relative;
    height: 100dvh;
    width: 100dvw;
    overflow: hidden;
    display: flex;
    /* min-height: 700px; */
    min-height: 500px;
  }
  
  .hover-full-size {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #ffffff93;
    backdrop-filter: blur(5px);
    overflow: hidden;
    display: flex;
    z-index: 100;
    align-items: start;
    justify-content: center;
    padding: 20px;
  }
  
  .point {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    z-index: 1;
  }
  
  .point > div {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
  
    width: calc( min(100vw, 100vh) / 4);
    height: calc( min(100vw, 100vh) / 4);
    border-radius: 100%;
  
    max-width: 200px;
    max-height: 200px;
  
  }
  
  /* .point.active {
    z-index: 1;
  }  */
  .point > div::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transition: all .3s;
    box-shadow: 0px 0px min(40vh, 150px) min(40vh, 150px) transparent;
    background-color: transparent;
    opacity: 0;
    z-index: -1;
  }

  .point.active > div::before {
    opacity: 0.8;
    background-color: var(--point-color);
    box-shadow: 0px 0px min(40vh, 150px) min(40vh, 150px) var(--point-color);
  }

  .point.red {
    --point-color: var(--red-point-color);
  }

  .point.green {
    --point-color: var(--green-point-color);
  }

  .point.grey {
    --point-color: var(--grey-point-color);
  }

  .point.yellow {
    --point-color: var(--yellow-point-color);
  }
  
  #leftPoint {
    left: 0;
    height: 100%;
    transform: rotate(-90deg);
  }
  
  #leftPoint > div{
    margin-top: 20px;
    width: calc( 80vh);
    height: calc( 80vh);
  }
  
  #rightPoint {
    right: 0;
    height: 100%;
    transform: rotate(90deg);
  }
  
  #rightPoint > div{
    margin-top: 20px;
    width: calc( 80vh);
    height: calc( 80vh);
  }
  
  #topPoint {
    top: 0;
    width: 100%;
    /* transform: rotate(90deg); */
  }
  
  #topPoint > div{
    margin-top: 20px;
    width: calc( 80vw);
    height: calc( 80vw);
  }
  
  #bottomPoint {
    bottom: 0;
    width: 100%;
    /* transform: rotate(90deg); */
  }
  
  #bottomPoint > div{
    margin-top: -20px;
    width: calc( 80vw);
    height: calc( 80vw);
  }
  
  #quiz button[type="submit"],
  #quiz button[name="seen"]{
    display: none;
  }
  
  /* Safari */
  /* :-webkit-full-screen {
    background-color: yellow;
  }
  
  /* IE11 * /
  :-ms-fullscreen {
    background-color: yellow;
  }
  
  / * Standard syntax */
  :fullscreen {
    background-color: var(--bg-color);
  }
  
  #fullscreen {
    /* width: 30px; */
    /* height: 30px; */
    /* display: flex;
    align-items: center;
    justify-content: center; */
    /* right: 0; */
    /* bottom: 0; */
    /* position: absolute; */
    /* cursor: pointer; */
    /* z-index: 3; */
  }
  
  #lightDarkButton {
    padding: 10px;
  }
  
  #lightDarkButton .light-dark--button {
    --color-current-bg: var(--light-gray-color);
  }
  
  .light-dark--button {
    position: relative;
    --color-current-bg: var(--bg-color);
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  
  .light-dark--button::before {
    content: '';
    position: absolute;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    transition: all .3s;
  
    background-color: var(--color-current); 
  }
  
  .light-dark--button::after {
    content: '';
    position: absolute;
    border-radius: 100%;
    width: 80%;
    height: 80%;
    background-color: var(--color-current-bg);
    transition: all .3s;
    
  }
  
  @keyframes glowing {
    0%{box-shadow: 0px 0px 0px var(--color-current)}
    20%{box-shadow: 0px 0px 5px var(--color-current)}
  }
  
  body.dark .light-dark--button::before {
    --color-current: grey;
  }
  
  body:not(.dark) .light-dark--button::before {
    --color-current: yellow;
    animation: glowing 3s infinite;
  }
  
  body.dark .light-dark--button::after {
    top: 0%;
    left: 20%;
    transform-origin: 35% 40%;
    transform: rotate(-195deg);
  }
  
  body:not(.dark) .light-dark--button::after {
    width: 0%;
    height: 0%;
    top: 40%;
    left: 40%;
    /* top: 20%;
    left: 20%;*/
    background-color: transparent;
  }
  
  #quizButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    max-width: calc(100vw - 20px);
    height: 40px;
    /* top: 20px; */
    /* top: calc( (100vh - min(100vh - 120px, 550px)) / 2 + 50px - 40px / 2); */
    top: calc( ((100vh - min(max(100vh - 120px, 550px), 778px)) / 2 + 50px - 40px) / 2);
    /* card height calc(100vh - 120px), min height 550px, max height 778px*/
    left: 50%;
    translate: -50%;
    z-index: 2;
    /* gap: var(--gap); */
    background-color: var(--light-gray-color);
    border-radius: var(--radius);
  }
  
  #quizButtons > div {
    min-width: 40px;
    height: 40px;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  
  #nextCardsHolder,
  #nextCardsHolder > div {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    pointer-events: none;
  }
  
  .hint-bubble {
    /* width: 100px;
    height: 60px; */
    position: absolute;
    box-shadow: 0px 0px max(100vh, 100vw) max(100vh, 100vw) rgb(0 0 0 / 70%);
    -webkit-box-shadow: 0px 0px max(100vh, 100vw) max(100vh, 100vw) rgb(0 0 0 / 70%);
    border-radius: 100%;
    /* left: 503px; */
    /* top: 766px; */
    /* background-color: #000000D0; */
    z-index: 2;
    pointer-events: none;
  }
  
  
  
  
  /*New hints after 07.12.2020*/
  .hint-hg-wrapper {
    /*z-index: 9999999;*/
    z-index: 899;
    position: absolute;
    bottom: unset;
    right: unset;
  
  }
  
  /* @media (max-width: 768px) {
    .hint-hg-wrapper {
        display: none;
    }
  } */
  
  .hint-hg-block {
  
    padding: 15px;
    width: 200px;
  
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    border-radius: 25px;
    background-color: var(--card-bg-color);
  }
  
  .hint-hg-block.hint-important {
    background-color: #bb280f;
  }
  
  .hint-hg-block .up, .hint-hg-block .down {
    position: absolute;
    background-color: var(--card-bg-color);
    width: 8px;
    height: 8px;
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
    z-index: -1;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
  
  .hint-hg-block.hint-important .up, .hint-hg-block.hint-important .down {
    background-color: #bb280f;
  }
  
  .hint-hg-block .down {
    z-index: 9999999;
    box-shadow: none;
    -webkit-box-shadow: none;
  }
  
  .hint-hg-block .btn-cancel {
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
  }
  
  .hint-hg-block.hint-important .btn-cancel {
    filter: url(#white) url(#peach);
  }
  
  
  .hint-hg-block.hint-important .btn-cancel:hover {
    filter: url(#white);
  }
  
  
  .hint-hg-block .title {
    color: var(--important-text-color);
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    margin-bottom: 4px;
  }
  
  .hint-hg-block.hint-important .title {
    color: #fff;
  }
  
  .hint-hg-block .text {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
  }
  
  .hint-hg-block.hint-important .text {
    color: #eec9c3;
  }
  
  .hint-hg-block .button {
    display: flex;
    align-items: center;
    margin-top: 10px;
    justify-content: center;
  }
  
  /* .hint-hg-block.hint-important .button {
    filter: url(#white);
  }
  
  .hint-hg-block .button:hover {
    filter: url(#hover);
  }
  
  .hint-hg-block.hint-important .button:hover {
    filter: url(#white) url(#peach);
  } */
  
  
  /*Hints END*/
  
  /* Переключатель - коробка вокруг ползунка */
  .switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
  }
  
  /* Скрыть флажок HTML по умолчанию */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* Ползунок */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--light-gray-color);
    -webkit-transition: .4s;
    transition: .4s;
  }

  .toggle {
    transition: .4s;
  }
  
  .toggle:hover {
    color: var(--important-text-color);
  }

  .slider::before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: rgba(255, 255, 255, .8);
    scale: 1;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .toggle:hover .slider::before {
    background-color: rgba(255, 255, 255, 1);
    scale: 1.1;
  }
  
  input:checked + .slider {
    background-color: var(--active-color);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px var(--active-color);
  }
  
  input:checked + .slider::before {
    /* -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px); */
    translate: 13px;
  }
  
  input:disabled + .slider {
    filter: opacity(var(--disabled-opacity));
  }
  
  /* Закругленные ползунки */
  .slider.round {
    border-radius: 17px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  
  #quizStartScreen{
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    /* align-content: center; */
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    background-color: var(--bg-color);
  }
  
  .button, button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  #respond input[type="submit"] {
    border: 1px solid;
    border-color: var(--unactive-gray-background-color);
      /* border-color: #ccc #ccc #bbb; */
      /* border-radius: 3px; */
      /* background: #e6e6e6; */
      color: var(--active-color);
      /* font-size: 12px; */
      /* font-size: 0.75rem; */
      /* line-height: 1; */
      /* padding: .6em 1em .4em; */
  
    cursor: pointer;
    background-color: transparent;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    transition: all .3s;
    /* font-size: inherit;
    font-size: inherit;
    line-height: inherit; */
  }
  
  .button:hover, button:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover,
  input[type="submit"]:hover {
    /* border-color: #ccc #bbb #aaa; */
    /* background-color: var(--unactive-hovered-color); */
    background-color: var(--unactive-gray-background-color);
  }
  
  .button:focus, button:focus,
  input[type="button"]:focus,
  input[type="reset"]:focus,
  input[type="submit"]:focus,
  .button:active, button:active,
  input[type="button"]:active,
  input[type="reset"]:active,
  input[type="submit"]:active {
      /* border-color: #aaa #bbb #bbb; */
    background-color: var(--unactive-gray-background-color);
    /* background-color: var(--main-color); */
  }
  
  .button:disabled, button:disabled,
  input[type="button"]:disabled,
  input[type="reset"]:disabled,
  input[type="submit"]:disabled {
      /* background-color: var(--unactive-color); */
    filter: opacity(var(--disabled-opacity));
  }
  
  
  
  /* #respond input[type="submit"]:hover,
  #respond input[type="submit"]:focus {
      border-color: #fe504f; 
      background-color: #fe504f; 
  } */
  
  /* input[type="submit"] {
      background-color: #272B2F;
      color: #fff;
      font-size: 14px;
  }
  input[type="submit"]:hover,
  input[type="submit"]:focus {
      background-color: #fe504f;
  } */
  
  #quizStart {
    margin-top: 50px;
  }
  
  #quizStartText {
    margin: 0 50px 50px;
    text-align: center;
    max-width: 650px;
  }
  .toggle {
    display: flex;
    align-items: center;
  }
  .toggle label {
    cursor: pointer;
  }
  .toggle label.switch {
    margin-right: 10px;
  }
  
  /* AUTHORIZATION WIdGETS */
  
  .wp-social-login-widget {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  #loginform {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .login-username,
  .login-password {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .login-username label,
  .login-password label{
    font-size: 10px;
      position: relative;
      bottom: -4px;
      line-height: 10px;
      left: 10px;
      align-self: flex-start;
      background: white;
      padding-left: 3px;
      padding-right: 3px;
  }
  
  .login-username:focus-within label,
  .login-password:focus-within label{
    color: var(--main-color);
  }
  
  #loginform p{
    margin: 0.4em 0;
  }
  
  #quizLoginRequired {
    margin-bottom: 50px;
    text-align: center;
  }
  
  #quizLoginRequired > p {
    margin: 25px;
    text-align: center;
  }
  
  #quizLoggedIn {
    display: flex;
    position: relative;
  }
  
  .profile-link {
    margin-top: 5px;
    /* margin-bottom: 50px; */
    color: var(--main-text-color);
    text-decoration: none;
    font-weight: bold;
  }

  .profile-link:focus,
  .profile-link:visited {
    color: var(--main-text-color);
  }

  .profile-buttons {
    /* margin-bottom: 50px; */
    display: flex;
    gap: var(--gap);
    flex-wrap: wrap;
    justify-content: center;
    /* margin-top: 20px; */
    max-width: 650px;
    margin: 10px 20px 50px;
  }

  .profile-buttons .profile-message {
    width: 100%;
    text-align: center;
    font-size: var(--small-font-size);
  }
  
  
  /* #quizLoggedIn */ .avatar {
    border-radius: 100%;

  }

  #quizLoggedIn .avatar {
    width: 96px;
    background-color: white;
  }
  
  .avatar-wrapper {
    position: relative;
    z-index: 0;
  }
  
  .card-user .card-content .user-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
  } 
  
  .card-user .card-content .user-profile > *{
    margin: 10px;
  }
  
  .user-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 200px;
  }
  
  .user-control > *{
    margin: 10px;
  }
  
  
  @keyframes growProgressBar {
    0%, 33% { --pgPercentage: 0; }
    100% { --pgPercentage: var(--value); }
  }
  
  @property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }
  
  div[role="progressbar"] {
    --size: 106px;
    --fg: var(--main-color);
    --bg: var(--unactive-gray-background-color);
    /* --bg: var(--unactive-color); */
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: 
      radial-gradient(closest-side, white 80%, transparent 0 101%, white 0),
      conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
      ;
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 10);
    color: var(--fg);
  
    position: absolute;
    z-index: -1;
    /* left: 0; */
    top: -5px;
    margin: auto;
    left: -5px;
  }
  
  div[role="progressbar"]::before {
    /* counter-reset: percentage var(--value);
    content: counter(percentage) '%'; */
    counter-reset: percentage var(--index);
    content: counter(percentage);
    position: absolute;
    top: 0;
    right: 0;
  }
  
  /* demo */
  body.quiz-body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100dvh;
  }
  
  /* SPINNER */
  
  .spiner{
    display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; position: absolute;
  }
  
  .spiner-wrapper {
    display: flex; justify-content: center; align-items: center; height: 100%; position: relative; -webkit-transform-origin: center; transform-origin: center;
  }
  .spiner-wrapper .big-spiner {
    width: 20px; height: 20px; border: 3px solid var(--main-color); border-left-color: rgba(0, 0, 0, 0); border-radius: 50%; -webkit-transform-origin: center; transform-origin: center;
    -webkit-animation: load 2s infinite linear; animation: load 2s infinite linear; position: absolute;
  }
  .spiner-wrapper .small-spiner {width: 15px;height: 15px;border: 3px solid var(--unactive-color);border-left-color: rgba(0, 0, 0, 0);border-radius: 50%;-webkit-animation: load_back 1s infinite linear;animation: load_back 1s infinite linear;
  }
  @-webkit-keyframes load {
    from {-webkit-transform: rotate(0);transform: rotate(0);}
    to {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
  }
  @keyframes load {
    from {-webkit-transform: rotate(0); transform: rotate(0);}
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  }
  @-webkit-keyframes load_back {
    from {-webkit-transform: rotate(0);transform: rotate(0);}
    to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
  }
  @keyframes load_back { 
    from { -webkit-transform: rotate(0); transform: rotate(0); }
    to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
  }
  
  .index {
    font-size: 11px;
    position: relative;
    bottom: 5px;
  }
  
  
  .featured-image a {
    display: block;
  }
  
  #main .blog-posts-wrapper article .entry-container {
    pointer-events: none;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    background-color: rgba(255,255,255,0.7);
  }
  
  
  .blog-posts-wrapper article {
    padding: 0 20px;
  }
  
  
  .entry-container a {
    pointer-events: auto;
  }
  
  
  .site-branding {
    text-align: left;
  }
  
  h1.page-title {
    font-size: 2rem;
  }
  
  .item-user-review{
    display: flex;
    justify-content: center;
    padding: 30px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: unset;
  }
  
  
  @media screen and (min-width: 992px) {
  
    .right-sidebar #primary {
      width: 100%;
    }
  
    main>article.post {
      display: flex;
      border-radius: 15px;
      overflow: hidden;
      margin: 0 auto;
      max-width: 1000px;
      justify-content: center;
    }
  
    .item-user-review{
      max-width: 1000px;
    }
  
    .debug-content {
      max-width: 1000px;
      margin: 20px auto;
    }
  
    main>article.post .featured-image {
      /* max-width: 30%; */
      /* height: 524px; */
      /* width: auto; */
      width: 333.5px;
      height: 500px;
      flex-shrink: 0;
      overflow: hidden;
    }
  
    main>article.post .featured-image img {
      height: 100%;
      width: auto; 
      vertical-align: middle;
      /* width: 333.5px;
      height: 500px; */
    }
  
    main>article.post .item-wrapper {
      padding: 30px;
      max-height: 500px;
      overflow: auto;
    }
  
  }
  
  .pressed {
    background-color: var(--pressed-background-color);
    color: var(--pressed-text-color);
  }
  
  .unactive {
    opacity: 0.3;
    pointer-events: none;
  }
  
  .site-title a {
    font-size: 2rem;
  }