/* по умолчанию делаем элементы скрытыми */

 .quiz_item,
 .answer_text>.descr,
 .quiz_item .quiz_button,
 .tquiz_progress {
     display: none;
 }
 
 .answer>.percent {
     visibility: hidden;
 }
 /* end */

 .question pre,
 .descr pre {
     text-align: left !important;
 }
  
 .descr pre,
 .question pre {
     overflow-x: auto !important;
     white-space: nowrap !important;
 }
 
 .question pre,
 .descr pre {
     text-align: left !important;
 }
 
 .question {
     text-align: center;
 }
 
 .correct_answer {
     color: #66994c;
 }
 
 .wrong_answer {
     color: #b32d2d;
 }
 
 .quiz_button {
     border-radius: 4px;
     border: 0;
     color: #fff;
     padding: 15px;
     background: var(--quiz-accent-color);
     font-weight: 500;
     text-transform: none;
     font-size: 18px;
     margin-top: 20px;
     margin-bottom: 20px;
     width: 300px;
 }
 
 .quiz_button:hover {
     background-color: var(--quiz-accent-color);
     outline: none;
     border-color: var(--quiz-accent-color);
     opacity: 0.9;
 }
 
 .quiz_item .quiz_button {
     width: 300px;
     margin: auto;
     margin-top: 20px;
 }
 
 .quiz_refresh_button {
     background: #6A6A6A;
     border: 0;
     padding: 10px;
     font-size: 17px;
     color: #fff;
     border-radius: 4px;
     outline: none;
 }
 
 .quiz_refresh_button:hover {
     opacity: 0.9;
 }
 
 .tquiz {
     text-align: center;
     font-size: 16px;
     padding-bottom: 20px;
 }
 
 .question {
     margin-bottom: 20px;
 }
 
 .answers {
     text-align: left;
 }
 
 .answer {
     cursor: pointer;
     padding: 10px;
     border-bottom: 1px solid #e6e6e6;
 }

 .answer:last-of-type {
    border-bottom: none;
 }
 
 .correct_answer,
 .wrong_answer {
     cursor: default !important;
 }
 
 #refresh_quiz,
 .quiz_share_vk {
     padding-right: 16px !important;
     ;
 }
 
 .descr {
     font-size: 14.5px;
     color: #262626;
     padding: 10px 0;
 }
 
 .descr:empty {
     display: none !important;
 }
 /* icon */
 /* circle */
 
 .answer_circle {
     border: 1px solid var(--quiz-accent-color);
     border-radius: 360px;
     padding: 9px;
     margin-right: 10px;
     font-size: 0.1px;
     color: rgba(0, 0, 0, 0);
     vertical-align: middle;
     opacity: 0.8;
 }
 
 .answer:hover .answer_circle {
     border: 6px solid var(--quiz-accent-color);
     padding: 4px;
     cursor: pointer;
 }
 
 .clicked .answer_circle {
     display: none;
 }
 /* square */
 
 .answer_square {
     border: 1px solid var(--quiz-accent-color);
     padding: 9px;
     margin-right: 10px;
     font-size: 0.1px;
     color: rgba(0, 0, 0, 0);
     vertical-align: middle;
     opacity: 0.8;
 }
 
 .clicked .answer_square {
     border: 1px solid var(--quiz-accent-color);
     background-color: var(--quiz-accent-color) !important;
 }
 
 .done .answer_square {
     display: none;
 }
 
 .quiz_result_total {
     font-size: 60px;
     color: var(--quiz-accent-color);
 }
 
 .quiz_result_title {
     font-size: 25px;
     margin: 6px 0px;
     line-height: 130%;
 }
 
 .quiz_result_desc {
     font-size: 15px;
 }
 /* таблица */
 
 .answer {
     display: table;
     width: 100%;
 }
 
 .quiz_item span.quiz_icon {
     width: 35px;
 }
 
 .quiz_item span.percent {
     width: 70px;
     text-align: left;
 }
 
 .answer_text,
 .quiz_item span.quiz_icon,
 .quiz_item span.percent {
     display: table-cell;
 }
 /* конец таблицы */
 /* прогресс над hr */
 
 .tquiz_progress_block {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 10px;
     position: relative;
 }

 .quiz-hr {
     position: absolute;
     width: 100%;
     z-index: -1;
 }
 
 .tquiz_progress {
     color: #adadad;
     background: #fff;
     padding: 0 10px;
     font-size: 15px;
     width: auto;
     display: inline-block;
 }
 /* конец прогресс */
 /* кнопки поделится */
 
 .quiz_result_wrapper {
     margin-top: 30px;
 }
 
 .quiz_share_wrapper {
     margin-top: 20px;
     display: inline-block;
 }
 
 .quiz_share {
     border: 0;
     padding: 10px 12px;
     font-size: 17px;
     color: #fff;
     border-radius: 4px;
     outline: none;
     min-height: 40px;
     min-width: 47px;
     margin-left: 2px;
 }
 
 .quiz_share_vk {
     background: rgba(82, 115, 151, 1);
 }
 
 .quiz_share_fb {
     background: rgba(48, 69, 145, 1);
 }
 
 .quiz_share_tw {
     background: #55acee;
 }
 
 .quiz_share_tg {
     background: #64a9dc;
 }
 
 .quiz_share_tg img {
     max-width: 24px;
 }
 
 .quiz_share:hover:after {
     opacity: 1;
     font-size: 17px;
 }
 
 .quiz_dont_load {
     margin: 0 auto;
     text-align: center;
     color: var(--quiz-accent-color);
     width: 90%;
 }
 
 .quiz_input_email {
     height: 40px !important;
     margin-bottom: 0px !important;
     width: 100% !important;
 }
 
 ._quiz_email_error_message {
     color: #e9322d;
     display: none;
 }
 
 .quiz_email_agree {
     opacity: 0.6;
 }
 
 .tp_quiz_email_input_block {
     position: relative;
     width: 100%;
 }
 
 .tp_quiz_email_input_block div {
     position: absolute;
     top: 0;
     right: 0;
     height: 30px;
     width: 51px;
     border: solid 1px #cccccc;
     background: none;
     border-radius: none;
     cursor: pointer;
     padding: 4px;
     text-align: center;
     border-radius: 0px 4px 4px 0px;
 }
 
 .tp_quiz_email_input_block div:hover {
     border-color: var(--quiz-accent-color);
 }
 
 .tp_quiz_email_input {
     width: 100%;
     margin: 0 !important;
     padding-right: 52px !important;
     box-shadow: none !important;
 }
 
 #quiz_email_sending_btn {
     top: 0.418px;
 }
 
 #quiz_send_email_form_block_after {
     margin-top: 15px;
 }
 
 .quiz_result_send_email {
     max-width: 460px;
     margin: 15px auto 0 auto;
 }
 
 @media screen and (min-width: 979px) {
     .answer:hover .answer_square {
         border: 6px solid var(--quiz-accent-color) !important;
         padding: 4px;
         cursor: pointer;
         background-color: #FFF;
     }
 }
 
 @media screen and (max-width: 979px) {
     div.answer img {
         min-width: calc(100% + 50px);
     }
 }
 
 @media screen and (max-width: 480px) {
     .quiz_button {
         width: 100% !important;
     }
     div.answer img {
         min-width: calc(100% + 125px);
         margin-left: -45px;
     }
 }
 /* CSS прелоадера */
 
 .circular,
 .showbox {
     top: 0;
     bottom: 0;
     left: 0;
     right: 0
 }
 
 #quiz_preloader .showbox {
    padding: 24px 0;
 }
 
 .loader {
     position: relative;
     margin: 0 auto;
     width: 50px
 }
 
 .loader:before {
     content: '';
     display: block;
     padding-top: 100%
 }
 
 .circular {
     -webkit-animation: rotate 2s linear infinite;
     animation: rotate 2s linear infinite;
     height: 100%;
     -webkit-transform-origin: center center;
     transform-origin: center center;
     width: 100%;
     position: absolute;
     margin: auto
 }
 
 .path {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
     -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
     animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
     stroke-linecap: round
 }
 
 @-webkit-keyframes rotate {
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg)
     }
 }
 
 @keyframes rotate {
     100% {
         -webkit-transform: rotate(360deg);
         transform: rotate(360deg)
     }
 }


 
 @-webkit-keyframes dash {
     0% {
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0
     }
     50% {
         stroke-dasharray: 89, 200;
         stroke-dashoffset: -35px
     }
     100% {
         stroke-dasharray: 89, 200;
         stroke-dashoffset: -124px
     }
 }
 
 @keyframes dash {
     0% {
         stroke-dasharray: 1, 200;
         stroke-dashoffset: 0
     }
     50% {
         stroke-dasharray: 89, 200;
         stroke-dashoffset: -35px
     }
     100% {
         stroke-dasharray: 89, 200;
         stroke-dashoffset: -124px
     }
 }
 
 @-webkit-keyframes color {
     0%,
     100% {
         stroke: var(--quiz-accent-color)
     }
     40% {
         stroke: var(--quiz-accent-color)
     }
     66% {
         stroke: var(--quiz-accent-color)
     }
     80%,
     90% {
         stroke: var(--quiz-accent-color)
     }
 }
 
 @keyframes color {
     0%,
     100% {
         stroke: var(--quiz-accent-color)
     }
     40% {
         stroke: var(--quiz-accent-color)
     }
     66% {
         stroke: var(--quiz-accent-color)
     }
     80%,
     90% {
         stroke: var(--quiz-accent-color)
     }
 }