@font-face {
    font-family: 'Proxima Soft';
    src: url('/fonts/proxima-soft/ProximaSoft-Thin.eot');
    src: local('/fonts/proxima-soft/Proxima Soft Thin'), local('/fonts/proxima-soft/ProximaSoft-Thin'),
        url('/fonts/proxima-soft/ProximaSoft-Thin.eot?#iefix') format('embedded-opentype'),
        url('/fonts/proxima-soft/ProximaSoft-Thin.woff2') format('woff2'),
        url('/fonts/proxima-soft/ProximaSoft-Thin.woff') format('woff'),
        url('/fonts/proxima-soft/ProximaSoft-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Soft';
    src: url('/fonts/proxima-soft/ProximaSoft-Bold.eot');
    src: local('/fonts/proxima-soft/Proxima Soft Bold'), local('/fonts/proxima-soft/ProximaSoft-Bold'),
        url('/fonts/proxima-soft/ProximaSoft-Bold.eot?#iefix') format('embedded-opentype'),
        url('/fonts/proxima-soft/ProximaSoft-Bold.woff2') format('woff2'),
        url('/fonts/proxima-soft/ProximaSoft-Bold.woff') format('woff'),
        url('/fonts/proxima-soft/ProximaSoft-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Soft';
    src: url('/fonts/proxima-soft/ProximaSoft-Regular.eot');
    src: local('/fonts/proxima-soft/Proxima Soft Regular'), local('/fonts/proxima-soft/ProximaSoft-Regular'),
        url('/fonts/proxima-soft/ProximaSoft-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/proxima-soft/ProximaSoft-Regular.woff2') format('woff2'),
        url('/fonts/proxima-soft/ProximaSoft-Regular.woff') format('woff'),
        url('/fonts/proxima-soft/ProximaSoft-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Soft';
    src: url('/fonts/proxima-soft/ProximaSoft-SemiBold.eot');
    src: local('/fonts/proxima-soft/Proxima Soft SemiBold'), local('/fonts/proxima-soft/ProximaSoft-SemiBold'),
        url('/fonts/proxima-soft/ProximaSoft-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('/fonts/proxima-soft/ProximaSoft-SemiBold.woff2') format('woff2'),
        url('/fonts/proxima-soft/ProximaSoft-SemiBold.woff') format('woff'),
        url('/fonts/proxima-soft/ProximaSoft-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}





/*Tooltip start*/

.tooltipped {
    position: relative
}

.tooltipped:after {
    position: absolute;
    z-index: 1000000;
    display: none;
    padding: 5px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: break-word;
    white-space: pre;
    pointer-events: none;
    content: attr(aria-label);
    background: rgba(0, 0, 0, .8);
    border-radius: 3px;
    -webkit-font-smoothing: subpixel-antialiased
}

.tooltipped:before {
    position: absolute;
    z-index: 1000001;
    display: none;
    width: 0;
    height: 0;
    color: rgba(0, 0, 0, .8);
    pointer-events: none;
    content: "";
    border: 5px solid transparent
}

.tooltipped:focus:before,
.tooltipped:focus:after {
    display: inline-block;
    text-decoration: none
}


.tooltipped-s:after {
    top: 100%;
    right: 50%;
    margin-top: 5px
}

.tooltipped-s:before {
    top: auto;
    right: 50%;
    bottom: -5px;
    margin-right: -5px;
    border-bottom-color: rgba(0, 0, 0, .8)
}

.tooltipped-s:after {
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%)
}

/* Tooltip end */





/* select options css */

body {  
    font-family:var(--font) !important;
    color:var(--main-color);
    background:var(--main-bg);
    font-style:var(--font-style);
    line-height:1;
    font-size:22px;
  }  
body { 
    font-family: var(--font) !important; 
    color: var(--main-color); 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    margin: 0; 
    touch-action: manipulation; 
    width: 100vw; 
    background: var(--main-bg); 
    position: relative; 
    font-style: var(--font-style); 
    line-height: 1; 
    font-size: 22px; 
    text-wrap: pretty;
} 
.pure-button, .pure-g, a, body, button, div, h1, h2, h3, h4, input, optgroup, p, select, span, textarea {
    font-family:var(--font) !important;
}




@media (prefers-color-scheme: dark){ 
  :root { 
    --main-bg: #121212; 
    --main-color: #fff; 
    --light-color: #a19fb1; 
    --placeholder-color-active: #494957; 
    --correct-answer-bg: var(--green);
  } 
}     

:root { 
    --img-arrow-bottom: url("/images/custom_quiz/down-arrow.svg"); 
} 


textarea:focus {
    box-shadow: inset 0 0 0 2px #29e778;
    outline: none;
    border: none;
}

.info { 
    transition: .3s ease; 
    padding: 0px; 
    /*width: calc(100% - 32px); */
    max-width: 728px; 
    margin: 0 auto;
} 

.info { 
    flex-direction: column;
} 

.info { 
    margin-bottom: -16px; 
    align-items: center;
} 

.info .header  { 
    text-align: center; 
    margin-bottom: 12px;
} 

@media (min-width: 500px){ 
  .info .header  { 
    margin-bottom: 24px;
  } 
}     

.arrow-bottom { 
    position: relative;
} 

.info .how-to  { 
    padding: 24px; 
    color: #d6d6e5; 
    background: var(--card-bg); 
    font-weight: 400; 
    font-size: 17px; 
    list-style: none; 
    counter-reset: numCounter; 
    border-radius: 32px; 
    margin: 0; 
} 

@media (prefers-color-scheme: dark){ 
  .info .how-to  { 
    box-shadow: inset 0 0 0 3px var(--placeholder-color-active);
  } 
}     

.arrow-bottom:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    background-image: var(--img-arrow-bottom); 
    background-size: contain; 
    background-position: 50%; 
    background-repeat: no-repeat; 
    width: 30px; 
    height: 104px; 
    z-index: 1; 
    pointer-events: none;
} 

.info .how-to::after { 
    bottom: -54px; 
    right: 10px; 
    transform: rotate(18deg);
} 

.info .header h1  { 
    margin: 16px 0 10px; 
    font-size: 30px; 
    font-weight: 800;
} 

.info .header p  { 
    margin: 0; 
    font-size: 24px; 
    line-height: 1.1; 
    color: var(--light-color);
} 

.info .how-to li  { 
    counter-increment: numCounter; 
    display: flex; 
    align-items: center; 
    font-size: 18px;
} 

.info .how-to li::before { 
    flex-shrink: 0; 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    border-radius: 99px; 
    width: 25px;
    height: 25px;
    font-size: 20px;
    font-weight: 900;
    margin-right: 10px;
    content: counter(numCounter); 
    color: #fff;
} 

.info .how-to li:nth-child(1)::before { 
    background: #00b9e6;
} 

.info .how-to li:nth-child(2)  { 
    margin: 12px 0;
} 

.info .how-to li:nth-child(2)::before { 
    background: #fe2591;
} 

.info .how-to li:nth-child(3)::before { 
    background: #ffa202;
} 






/*------------*/

:root { 
    --font: 'Proxima Soft', sans-serif; 
    /*--font-style: italic; */
    --main-color: #0b0528; 
    --light-color: #504f57; 
    --placeholder-color-active: #dbdbe8; 
    --main-bg: #fff; 
    --green: #22ca62; 
    --red: #ff2d55;
} 

:root { 
    --font: 'Proxima Soft', sans-serif; 
    /*--font-style: italic; */
    --main-color: #0b0528; 
    --light-color: #504f57; 
    --input-border: #e3e3f2; 
    --input-bg: transparent; 
    --main-bg: #fff; 
    --card-bg: #fff; 
    --card-border: #e4e4ec; 
    --green: #22ca62; 
    --border-radius: 30px; 
    --border-radius-inputs: 20px; 
} 

@media (prefers-color-scheme: dark){ 
  :root { 
    --main-bg: #161619; 
    --card-bg: #202026; 
    --card-border: transparent; 
    --main-color: #fff; 
    --light-color: #a19fb1; 
    --input-border: #9c9cab; 
    --correct-answer-bg: var(--green);
  } 
}     

.L { 
    padding: 24px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background: var(--card-bg); 
    border-radius: var(--border-radius); 
    box-shadow: inset 0 0 0 3px var(--card-border);
} 

.app .start  { 
    padding: 0; 
    box-shadow: none; 
    background: 0 0;
} 

.app { 
    transition: .3s ease; 
    padding: 16px 0px; 
    /*width: calc(100% - 32px); */
    max-width: 728px; 
    margin: 0 auto;
} 

.C { 
    transition: .3s ease;
    border: none;
} 

.C { 
    font-weight: 600; 
    display: flex; 
    justify-content: center; 
    font-size: 20px; 
    align-items: center; 
    height: 64px; 
    background: #5000ff; 
    color: #fff; 
    width: 100%; 
    border-radius: 99px; 
    cursor: pointer;
} 

.app .start .C  { 
    text-align: center; 
    font-weight: 400;
    background: #5000ff; 
    font-size: 24px;
} 

.app .start .C ~ .C  { 
    margin-top: 16px;
} 

.app .start .C.active  { 
    display: flex;
} 

.app .start .input-wrap  { 
    width: 100%; 
    position: relative; 
    margin: 0; 
    padding: 10px 0px;
} 

input { 
    transition: .3s ease;
} 

input { 
    border: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    outline: none; 
    padding: 0; 
    font-family: var(--font); 
    font-size: 24px; 
    border-radius: var(--border-radius-inputs); 
    font-weight: 800; 
    color: var(--main-color); 
    line-height: 1.2; 
    font-style: var(--font-style); 
    box-shadow: inset 0 0 0 3px var(--input-border); 
    background: var(--input-bg);
} 

.app .start input  { 
    width: 100%; 
    padding: 18px 24px;
} 

.app .start small  { 
    text-align: center; 
    font-weight: 800;
} 

.app .start small  { 
    font-size: 16px; 
    opacity: 0; 
    position: absolute; 
    bottom: 10px; 
    right: 16px; 
    font-weight: 800; 
    color: var(---placeholder-color);
} 


  


/* ------------------------ */




*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.2;
}

body img {
    max-width: 100%;
}

body a {
    text-decoration: none;
    color: inherit;
}

.quiz {
    max-width: 65rem;
    margin-inline: auto;
    padding-block: 2rem;
    padding-inline: 2rem;
    -webkit-transition: display 2s;
    transition: display 2s;
}

.center {
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
}
.hide, .hidden{
    opacity: 0;
    display: none;
}


.quiz__header {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.quiz__img {
    max-width: 25rem;
    margin-inline: auto;
}

.quiz__name {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-top: 1.5rem;
}

.quiz__caption {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    margin-top: 1rem;
    font-weight: 400;
}

.option_img{
    width:35px;
    height:35px;
    border-radius:5px;
}

.option_err{
    text-align: center;
    color: #e53232;
    font-size: 18px;
    margin-top: 10px;
    font-weight: 800;
    animation: shake 0.5s infinite;
}

@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}


.instruction {
    margin-top: 4rem;
    border-radius: 2rem;
    background: #2e2d45;
    color: #fff;
    padding-inline: 1.75rem;
    padding-block: 2rem;
}

.instruction__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
}

.instruction__item:not(:first-child) {
    margin-top: 2rem;
}

.instruction__no {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.75rem;
    -webkit-animation: pop 1.5s infinite;
    animation: pop 1.5s infinite;
    -webkit-animation-timing-function: cubic-bezier(0, 1.07, 0.58, 1.68);
    animation-timing-function: cubic-bezier(0, 1.07, 0.58, 1.68);
}

.instruction__no.one {
    background: #0095ff;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.instruction__no.two {
    background: #08d154;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.instruction__no.three {
    background: #ff8b00;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.instruction__text {
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

@-webkit-keyframes pop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pop {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    75% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.name__card {
    margin-top: 4rem;
    text-align: center;
    padding-inline: 1rem;
    padding-block: 2rem;
    border: 4px solid;
    border-color: linear-gradient(to bottom, #00a5ff, #0081ff);
    border-radius: 2rem;
    -webkit-animation: borderChange 5s ease-in-out infinite;
    animation: borderChange 5s ease-in-out infinite;
}

.name__title {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    padding-block: 1rem;
}

.name__form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 2rem;
}

.lang__input{
    box-shadow: inset 0 0 0 3px var(--input-border);
    width: 100%;
    padding: 18px 24px !important;
    color: white;
    margin-top: 6px;
}

.name__input, .lang__input {
    padding: 1.5rem;
    /*border: 1px solid #685b5b;*/
    border-radius: 1.5rem;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    outline: none;
}

.name__input::-webkit-input-placeholder {
    font-family: inherit;
    font-weight: 500;
}

.name__input:-ms-input-placeholder {
    font-family: inherit;
    font-weight: 500;
}

.name__input::-ms-input-placeholder {
    font-family: inherit;
    font-weight: 500;
}

.name__input::placeholder {
    font-family: inherit;
    font-weight: 500;
}



.name__submit {
    border: none;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#00a5ff),
        to(#0081ff)
    );
    background: linear-gradient(to bottom, #00a5ff, #0081ff);
    color: #fff;
    font-family: inherit;
    font-weight: bold !important;
    font-size: clamp(1.75rem, 3vw, 3rem);
    border-radius: 1.5rem;
}

@-webkit-keyframes borderChange {
    0% {
        border-color: #2196f3;
    }
    50% {
        border-color: lightgrey;
    }
    100% {
        border-color: #2196f3;
    }
}

@keyframes borderChange {
    0% {
        border-color: #2196f3;
    }
    50% {
        border-color: lightgrey;
    }
    100% {
        border-color: #2196f3;
    }
}

.questions__container {
    padding-inline: 2rem;
    padding-block: 4rem;
    max-width: 65rem;
    margin-inline: auto;
    -webkit-transition: display 2s;
    transition: display 2s;
}

.questions__header {
    border: 2px solid #b4b0b0;
    border-radius: 2rem;
    padding-inline: 2rem;
    padding-block: 1.5rem;
    text-align: center;
    margin-bottom: 3rem;
    background: var(--card-bg);
}

.questions__title {
    font-size: 28px;
    padding: 0.5rem 1rem;
}

.questions__subtitle {
    font-size: 22px;
    font-weight: 400;
    padding: 0.5rem 1rem;
}

.desc {
    margin: 3rem 0rem;
}

.desc__item:not(:first-child) {
    margin-top: 3rem;
}

.desc__title {
    font-size: 26px;
}

.desc__subtitle {
    font-size: 20px;
    font-weight: normal;
    margin-top: 5px;
}

.desc__text {
    margin-top: 1rem;
    font-size: 18px;
    font-weight: 100;
}

.desc__points {
    padding-left: 1.7rem;
    margin-top: 1rem;
}

.desc__point {
    font-size: clamp(1.65rem, 2.5vw, 1.9rem);
    font-weight: 700;
}

.share__wrapper {
    /*display: none;*/
    max-width: 65rem;
    margin-inline: auto;
    padding: 2rem 2rem 4rem;
    background: var(--card-bg);
    border-radius: 30px;
}

/*.share__link {
    border: 3.5px solid lightgrey;
    border-radius: 2rem;
    padding-inline: 1rem;
    padding-block: 2rem;
    text-align: center;
}*/

.share__title {
    margin-top: 1rem;
    font-size: 24px;
}

.share__subtitle {
    margin-top: 1rem;
    font-size: 18px;
    font-weight: 400;
}


.share__url{
    margin-top: 2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}




.share__url,
.share__copy-btn,
.share__btn {
    display: block;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    padding: 1.5rem;
    border: none;
    border-radius: 2rem;
}

.share__copy-btn{
    margin-top: 10px !important;
    height: 35px !important;
    width: auto !important;
    font-size: 14px !important;
    padding: 10px !important;
    border-radius: 2rem !important;
}

.share__url {
    background: #f0f0f6;
    color: black;
}


.question__wrapper {
    margin-top: 7rem;
    position: relative;
    border: 3px solid #ff2d55;
    border-radius: 2rem;
    padding-block: 2rem;
    padding-inline: 1rem;
    -webkit-transition: border-color 1s ease;
    transition: border-color 1s ease;
    background: var(--card-bg);
}

.question__no {
    padding: 1rem;
    left: 2rem;
}
.question__change {
    padding: 0.5rem;
    padding-bottom: 1px;
    right: 2rem;
}
.question__change, .question__no {
    position: absolute;
    display: inline-block;
    background-color: #ff2d55;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    top: -4rem;
    border-radius: 1rem 1rem 0 0;
    -webkit-transition: background-color 1s ease;
    transition: background-color 1s ease;
}


.registered_quiz_id {
    padding: 20px 10px;
}

textarea {
    resize: none;
}

.question__text {
    width: 100%;
    height: 100%;
    background: #f3f3f8;
    /*overflow: hidden;*/
    border: 1px solid #f0f0f6;
    font-weight: 700;
    padding: 1.5rem;
    border-radius: 2rem 2rem 0 2rem;
    font-size: clamp(1.8rem, 3.5vw, 2.2rem);
    font-family: inherit;
    resize: vertical;
    color: black;
}

.question__text::-webkit-scrollbar {
    width: 0;
}

.question__choices {
    margin-top: 2rem;
}

.question__choice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 0.3rem;
}

.question__choice:not(:first-child) {
    margin-top: 1.5rem;
}

textarea.question__text:focus{
    border: 1px solid #29e778;
}


.question__input {
    overflow: hidden;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 1rem;
    border: none;
    /*border: 3px solid #f0f0f6;*/
    /*background: #f0f0f6;*/
    color: black;
    border-radius: 1rem;
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 1.8rem);
}

.question__input::-webkit-input-placeholder {
    font-family: inherit;
    font-weight: inherit;
}

.question__input:-ms-input-placeholder {
    font-family: inherit;
    font-weight: inherit;
}

.question__input::-ms-input-placeholder {
    font-family: inherit;
    font-weight: inherit;
}

.question__input::placeholder {
    font-family: inherit;
    font-weight: inherit;
}




.question__delete  { 
    display: inline-flex; 
    width: 24px; 
    height: 24px; 
    flex-shrink: 0; 
    cursor: pointer; 
    border-radius: 99px; 
    transition: .3s ease; 
    position: relative; 
    justify-content: center; 
    align-items: center;
} 

.question__delete  { 
    background-image: url(/images/custom_quiz/close-white.svg); 
    background-color: var(--red); 
    background-size: cover;
} 






.radio__label {
    cursor: pointer;
    margin-top: 4px;
}



.radio__btn  { 
    display: inline-flex; 
    width: 24px; 
    height: 24px; 
    flex-shrink: 0; 
    cursor: pointer; 
    border-radius: 99px; 
    transition: .3s ease; 
    position: relative; 
    justify-content: center; 
    align-items: center;
} 

.radio__btn  { 
    background-color: var(--card-bg); 
    background-size: cover; 
    box-shadow: inset 0 0 0 3px var(--input-border);
} 

.radio__btn.active  { 
    background-color: var(--green); 
    background-image: url(/images/custom_quiz/check.svg); 
    box-shadow: inset 0 0 0 0 var(--green);
} 



/*
.radio__btn {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #f0f0f6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
*/
/*.radio__btn i {
    display: none;
    font-size: 2rem;
    color: #29e778;
}

.radio {
    display: none;
}

.radio:checked + .radio__label > .radio__btn > i {
    display: block;
}*/

.question__input--active {
    box-shadow: inset 0 0 0 3px #29e778;
    background-color: #beecba;
}

.add-btn {
    display: block;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin-inline: auto;
    margin-top: 2rem;
    border: none;
    padding: 1rem 1.5rem;
    font-family: inherit;
    background: #57606f;
    color: #fff;
    font-weight: 700;
    border-radius: 2rem;
    cursor: pointer;
}

/*@media screen and (min-width: 50rem) {*/
    .question__choice {
        gap: 0.5rem;
    }
/*}*/



.themes {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin-inline: auto;
    margin-top: 3rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /*background: #fff;*/
    gap: 1rem;
}

.themes__btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    cursor: pointer;
}

.themes__btn.active {
    background-image: url(/images/common/check.svg);
    background-size: cover;
}


.themes__red {
    background: #c82d44;
}

.themes__green {
    background: #86c232;
}

.themes__orange {
    background: #ff652f;
}

.themes__yellow {
    background: #f33d04;
}

.themes__purple {
    background: #c56cf0;
}

.themes__darkblue {
    background: #6d46fc;
}

.themes__lightblue {
    background: #2f89ec;
}

.show {
    opacity: 1;
    display: block;
}

/*# sourceMappingURL=main.css.map */

/* Loader */

.loader {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 75px;
    display: inline-block;
    vertical-align: middle;
}

.loader-star {
    position: absolute;
    top: calc(50% - 12px);
}

/*LOADER-2*/

.loader-2 .loader-star {
    position: static;
    width: 60px;
    height: 60px;
    -webkit-transform: scale(0.7);
    -ms-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-animation: loader-2-star 1s ease alternate infinite;
    animation: loader-2-star 1s ease alternate infinite;
}

.loader-2 .loader-circles {
    width: 8px;
    height: 8px;
    background: #18ffff;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 4px);
    top: calc(50% - 4px);
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-animation: loader-2-circles 1s ease-in-out alternate infinite;
    animation: loader-2-circles 1s ease-in-out alternate infinite;
}

@keyframes loader-2-circles {
    0% {
        -webkit-box-shadow: 0 0 0 #18ffff;
        box-shadow: 0 0 0 #18ffff;
        opacity: 1;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-box-shadow: 24px -22px #18ffff, 30px -15px 0 -3px #18ffff,
            31px 0px #18ffff, 29px 9px 0 -3px #18ffff, 24px 23px #18ffff,
            17px 30px 0 -3px #18ffff, 0px 33px #18ffff,
            -10px 28px 0 -3px #18ffff, -24px 22px #18ffff,
            -29px 14px 0 -3px #18ffff, -31px -3px #e11a2b,
            -30px -11px 0 -3px #18ffff, -20px -25px #18ffff,
            -12px -30px 0 -3px #18ffff, 5px -29px #18ffff,
            13px -25px 0 -3px #18ffff;
        box-shadow: 24px -22px #18ffff, 30px -15px 0 -3px #18ffff,
            31px 0px #18ffff, 29px 9px 0 -3px #18ffff, 24px 23px #18ffff,
            17px 30px 0 -3px #18ffff, 0px 33px #18ffff,
            -10px 28px 0 -3px #18ffff, -24px 22px #18ffff,
            -29px 14px 0 -3px #18ffff, -31px -3px #18ffff,
            -30px -11px 0 -3px #18ffff, -20px -25px #18ffff,
            -12px -30px 0 -3px #18ffff, 5px -29px #18ffff,
            13px -25px 0 -3px #18ffff;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        opacity: 0;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-box-shadow: 25px -22px #18ffff, 15px -22px 0 -3px black,
            31px 2px #18ffff, 21px 2px 0 -3px black, 23px 25px #18ffff,
            13px 25px 0 -3px black, 0px 33px #18ffff, -10px 33px 0 -3px black,
            -26px 24px #18ffff, -19px 17px 0 -3px black, -32px 0px #18ffff,
            -23px 0px 0 -3px black, -25px -23px #18ffff,
            -16px -23px 0 -3px black, 0px -31px #18ffff, -2px -23px 0 -3px black;
        box-shadow: 25px -22px #18ffff, 15px -22px 0 -3px black,
            31px 2px #18ffff, 21px 2px 0 -3px black, 23px 25px #18ffff,
            13px 25px 0 -3px black, 0px 33px #18ffff, -10px 33px 0 -3px black,
            -26px 24px #18ffff, -19px 17px 0 -3px black, -32px 0px #18ffff,
            -23px 0px 0 -3px black, -25px -23px #18ffff,
            -16px -23px 0 -3px black, 0px -31px #18ffff, -2px -23px 0 -3px black;
    }
}

@-webkit-keyframes loader-2-star {
    0% {
        -webkit-transform: scale(0) rotate(0deg);
        transform: scale(0) rotate(0deg);
    }
    100% {
        -webkit-transform: scale(0.7) rotate(360deg);
        transform: scale(0.7) rotate(360deg);
    }
}

@keyframes loader-2-star {
    0% {
        -webkit-transform: scale(0) rotate(0deg);
        transform: scale(0) rotate(0deg);
    }
    100% {
        -webkit-transform: scale(0.7) rotate(360deg);
        transform: scale(0.7) rotate(360deg);
    }
}


.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 2px solid #FF3D00;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
.loader::after {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 4px;
    top: 4px;
    border: 2px solid #FFF;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
    
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 



/* loader end */










/*------------------------*/




.table  { 
    width: 100%;
} 

.L  { 
    animation: pulseBordeResults 2s ease infinite;
} 

.table .table-head  { 
    display: flex; 
    font-weight: 700; 
    padding: 8px;
} 

.table .table-head div:first-of-type  { 
    flex-grow: 1;
} 

.table .content .entry  { 
    display: flex; 
    padding: 8px;
} 

.table .content .entry .name  { 
    flex-grow: 1;
} 


/* score */


.pure-button, .pure-g, a, body, button, div, h1, h2, h3, h4, input, optgroup, p, select, span, textarea {
    color: white;
}

                        
.L.score  { 
    background: #202026; 
    box-shadow: none; 
    text-align: center; 
    color: #fff !important;
    font-size: 36px; 
    font-weight: 900; 
    margin: 15px 0 6px;
} 

#showanswer h1{
    font-size: 30px;
}

 

/* progress bar */

.L { 
    padding: 24px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background: var(--card-bg); 
    border-radius: var(--border-radius); 
    box-shadow: inset 0 0 0 3px var(--card-border);
} 

.quiz-taker-header-card { 
    margin-bottom: 24px;
} 

.quiz-taker-header-card .headline  { 
    font-weight: 700; 
    font-size: 30px; 
    background: green; 
    color: #fff; 
    width: 100%; 
    text-align: center; 
    padding: 24px; 
    margin: -24px 0 0; 
    border-radius: var(--border-radius)var(--border-radius)0 0;
} 

.quiz-taker-header-card .subhead  { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    background: var(--card-bg); 
    padding: 24px; 
    margin: 0 0 -24px; 
    border-radius: 0 0 var(--border-radius)var(--border-radius);
} 

.quiz-taker-header-card .subhead .counter  { 
    margin-right: 20px; 
    display: flex; 
    justify-content: center; 
    font-weight: 700;
} 

.quiz-taker-header-card .subhead .bar  { 
    height: 20px; 
    background: var(--input-border); 
    flex-grow: 1; 
    overflow: hidden; 
    border-radius: 10px;
} 

.quiz-taker-header-card .subhead .bar .progress  { 
    border-radius: 10px; 
    transition: .3s ease; 
    height: 20px; 
    background: var(--green); 
    width: calc(100%/10 * var(--progress));
} 





/* select options */


.L { 
    padding: 24px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background: var(--card-bg); 
    border-radius: var(--border-radius); 
    box-shadow: inset 0 0 0 3px var(--card-border);
} 

.question-card { 
    margin-bottom: 24px; 
    box-shadow: none;
} 

.quiz-card .headline  { 
    width: 100%; 
    padding: 24px; 
    margin: -24px 0 0; 
    line-height: 1.3; 
    font-size: 24px; 
    color: #fff; 
    font-weight: 800; 
    border-radius: var(--border-radius)var(--border-radius)0 0;
    background-color: darkorange;
} 

.quiz-card .wrap  { 
    width: 100%; 
    margin-top: 24px;
} 

.quiz-card .wrap .answer  { 
    font-size: 20px; 
    padding: 12px 16px; 
    box-shadow: inset 0 0 0 3px var(--input-border); 
    display: flex; 
    margin: 8px 0; 
    border-radius: 24px; 
    cursor: pointer; 
    transition: .3s ease; 
    position: relative;
    width: initial;
} 

.quiz-card .wrap div:first-of-type  { 
    margin-top: 0;
} 

.quiz-card .wrap .answer::after { 
    content: ""; 
    width: 26px; 
    height: 26px; 
    border-radius: 13px; 
    display: block; 
    position: absolute; 
    right: 9px; 
    bottom: 9px; 
    opacity: 0; 
    transition: .3s ease; 
    background-size: cover;
} 


.quiz-card .wrap .answer.red {
    box-shadow: inset 0 0 0 3px var(--red);
}
.quiz-card .wrap .answer.green {
    box-shadow: inset 0 0 0 3px var(--green);
}

.quiz-card .wrap .answer.green::after {
    background-image: url(https://psycatgames.com/app/truth-or-dare/img/check.svg);
    background-color: var(--green);
}
.quiz-card .wrap .answer.red::after {
    background-image: url("https://psycatgames.com/images/supporting/close-white.svg");
    background-color: var(--red);
}




.quiz-card .wrap div:last-of-type  { 
    margin-bottom: 0;
} 

.option_txt{
    text-align: left !important;
    font-weight: 600;
}