h1, h2, h3, h4, h5, h6 {
    font-family: var(--Font-Alexandria);
}
a, p, span, div, li, input, textarea, button, select {
    font-family: var(--Font-Alexandria);
}
a {
    transition: all 0.5s ease;
}
body {
    color: var(--Color-Main);
}
h1 {
    font-size: 50px;
    font-weight: 700;
    color: var(--Color-Main);
    line-height: 1.3;
}
h2 {
    font-size: 40px;
    font-weight: 600;
    color: var(--Color-Main);
    line-height: 1.3;
    margin-bottom: 20px;
}
h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--Color-Main);
    line-height: 1.3;
}
input, select, textarea, button {
    color: var(--Color-Main);
}
textarea, input, select, input[type="text"], input[type="button"], input[type="submit"], 
input[type="reset"], input[type="search"], input[type="password"], input[type="url"] {
    border-radius: 4px;
}
textarea:read-only {
    background-color: #f0f0f1;
    outline: unset;
}
strong {
    font-weight: 700;
}
p {
    margin-bottom: 20px;
}
.hide {
    display: none;
}
.header-logo {
    display: block;
    height: 56px;
}
.header-logo-link {
    display: block;
}
.banner-content h1, .banner-content h2 {
    font-size: 64px;
    font-weight: 600;
    margin-bottom: 50px;
}
.main-header {
    background-color: var(--Color-Background);
    width: 100%;
    z-index: 1000;
}
.header-inner {
    display: grid;
    align-items: center;
    grid-template-columns: 145px 1fr;
    gap: 20px;
    width: 100%;
    justify-items: end;
    padding-top: 30px;
    padding-bottom: 10px;
    height: 70px;
}
.content-width {
    max-width: 1240px;
    padding-right: 20px;
    padding-left: 20px;
    margin-left: auto;
    margin-right: auto;
}
.content-width.wide {
    padding-right: 0px;
    padding-left: 0px;
}
.mobile-menu-toggle {
    display: none;
}
.mobile-header-content {
    opacity: 0;
    height: 0;
    pointer-events: none;
    display: none;
}
.menu-top-container .menu ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
}
.menu-top-container .menu ul a {
    text-decoration: none;
    font-weight: 600;
    color: var(--Color-Main);
    transition: all 0.5s ease;
}
.menu-top-container .menu ul a:hover {
    color: var(--Color-Hover);
}
.menu-top-container .menu ul li.current_page_item a {
    color: var(--Color-Hover);
}
.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.admin-bar .main-wrapper {
    min-height: calc(100vh - 33px);
}
.main-container {
    flex: 1;
    margin-top: 120px;
    z-index: 1;
}
.footer {
    margin-top: -100px;
    overflow: hidden;
    position: relative;
    pointer-events: none;
}
.footer-container {
    padding-top: 20px;
    padding-bottom: 0;
    position: relative;
    margin-top: 300px;
    pointer-events: auto;
}
#copyright {
    text-align: center;
    font-weight: 500;
}
.footer-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
}
.footer-content #eis_logo {
    margin: 20px auto 0;
    max-width: 200px;
}
.footer-links {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
}
.menu-footer-menu-container .menu {
    display: flex;
    flex-direction: row;
    column-gap: 40px;
}
.menu-footer-menu-container .menu a {
    color: #001C46;
    text-decoration: unset;
    transition: all 0.5s ease;
}
.menu-footer-menu-container .menu a:hover {
    color: var(--Color-DarkBorder);
}
.firm-name {
    color: #001C46;
}
.footer-contact {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-links .menu ul {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
}
.footer-links .menu ul a {
    text-decoration: none;
    font-weight: 600;
    color: var(--Color-Main);
    transition: all 0.5s ease;
}
.footer-links .menu ul a:hover {
    color: var(--Color-Hover);
}
.footer-links .menu ul li.current_page_item a {
    color: var(--Color-Hover);
}
.footer-contact-title {
    margin-bottom: 10px;
}
.footer-contact a {
    text-decoration: none;
    font-weight: 600;
    color: var(--Color-Main);
    transition: all 0.5s ease;
}
.footer-contact a:hover {
    color: var(--Color-Hover);
}
.content-section {
    margin: 80px 0;
}
.content-introduction .content-inner {
    max-width: 800px;
}
.hero-section {
    position: relative;
}
/*
.page-template-page-frontpage .main-container {
    margin-top: -100px;
}
*/
.game-frame .background-image {
    height: calc(100% - 90px);
    width: calc(100% - 60px);
    position: fixed;
    border-radius: 30px;
    z-index: 1;
    top: 60px;
    left: 30px;
    overflow: hidden;
}
.game-frame .background-image img {
    height: calc(100% + 90px);
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-top: -60px;
    object-fit: cover;
    filter: blur(2px) contrast(0.7);
}
.background-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
}
.hero-content {
    height: 600px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    color: var(--Color-Background);
    position: relative;
}
.hero-content-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    position: relative;
    max-width: 600px;
    height: 100%;
    gap: 20px;
}
.hero-content h1 {
    color: var(--Color-Background);
    font-weight: 600;
}
.btn {
    color: var(--Color-Background);
    text-decoration: none;
    font-size: 20px;
    padding: 24px 40px;
    background-color: var(--Color-Main);
}
.next-button-container .btn {
    width: 100%;
}
.btn.lightyellow {
    background: #FCF6D7;
    color: #001C46;
    border-color: #FCF6D7;
}
.btn.yellow {
    background: #FDD100;
    color: #001C46;
    border-color: #FDD100;
}
.btn.yellow:hover, .btn.blue:hover, .btn.white:hover, .btn.green:hover {
    border-color: var(--Color-Border);
    color: var(--Color-Main);
}
.btn.white {
    background: #FFFFFF;
    color: #001C46;
    border-color: #FFFFFF;
}
.btn.blue {
    background: var(--Color-Main);
    color: #fff;
    border-color: var(--Color-Main);
}
.btn.green {
    background: var(--Color-Green);
    color: #ffffff;
    border-color: var(--Color-Green);
}
.hero-slogan {
    margin-bottom: 20px;
}
.hero-subtext {
    margin-bottom: unset;
}
.steps-section {
    background-color: var(--Color-Background);
    padding: 40px 0;
}
.steps-content {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}
.step-icon {
    border-radius: 50%;
    background-color: var(--Color-Background);
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-icon img {
    width: 30px;
}
.step-icon img.handshake {
    width: 40px;
}
.step {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    background-color: var(--Color-Main);
    border-radius: 24px;
    width: 200px;
}
.step-text {
    color: var(--Color-Background);
}
.step-arrow {
    min-width: 40px;
    height: 30px;
    position: relative;
}
.step-arrow1 {
    width: 37px;
    height: 5px;
    position: absolute;
    background-color: #000;
    top: 50%;
    transform: translateY(-50%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.step-arrow2 {
    width: 20px;
    height: 5px;
    position: absolute;
    background-color: #000;
    right: -1px;
    top: 7px;
    transform: rotate(45deg);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.step-arrow3 {
    width: 20px;
    height: 5px;
    position: absolute;
    background-color: #000;
    bottom: 7px;
    right: -1px;
    transform: rotate(135deg);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Burger menu animation start */
.menuicon {
    display:block;
    cursor:pointer;
    color: #ffffff;
    
    transform:rotate(0deg);
    transition: .3s cubic-bezier(0.165, 0.840, 0.440, 1.000); 
}
.menuicon__bar, .menuicon__circle {
    fill:none;
    stroke: currentColor;
    stroke-width:3;
    stroke-linecap:round;
}
.menuicon__bar {
    transform: rotate(0deg);
    transform-origin:50% 50%;
    transition: transform .25s ease-in-out;
}
.menuicon__circle {
    transition: stroke-dashoffset .3s linear .1s;
    stroke-dashoffset: calc(23 * 2 * 3.141592653);
    stroke-dasharray: calc(23 * 2 * 3.141592653);
}
header.mobile-open .mobile-menu-toggle .menuicon {
    color:#ffffff;
    transform:rotate(180deg);
}
header.mobile-open .mobile-menu-toggle .menuicon__circle {
    stroke-dashoffset:0;
}
header.mobile-open .mobile-menu-toggle .menuicon__bar:nth-child(1),
header.mobile-open .mobile-menu-toggle .menuicon__bar:nth-child(4) {
    opacity:0;
}
header.mobile-open .mobile-menu-toggle .menuicon__bar:nth-child(2) {
    transform: rotate(45deg);
}
header.mobile-open .mobile-menu-toggle .menuicon__bar:nth-child(3) {
    transform: rotate(-45deg);
}
.list-create-btn {
    margin: 0 0 40px 0;
}
/* Burger menu animation end */
.create-game-section {
    margin-bottom: 60px;
}
.quiz-edit-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.quiz-label {
    width: 100%;
    max-width: 200px;
    font-size: 18px;
    padding: 10px 20px 0 0;
}
.quiz-edit-row input[type=text], .quiz-edit-row input[type=url], .quiz-edit-row input[type=number] {
    width: 100%;
    max-width: 600px;
    border: 1px solid var(--Color-Border);
    padding: 8px 12px;
    line-height: 1.3em;
    min-height: 36px;
    font-size: 16px;
    height: 26px;
}
.quiz-edit-row input[type=number] {
    max-width: 300px;
}
.textarea_characters {
    position: absolute;
    top: 100%;
    font-size: 14px;
    padding: 5px;
    color: #9F9F9F;
}
.quiz-question {
    position: relative;
}
.quiz-radio-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 600px;
    width: 100%;
}
.quiz-image-box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    max-width: 600px;
    width: 100%;
}
.quiz-radio-label img {
    width: 100%;
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
    filter: grayscale(1) blur(0.6px);
    border-radius: 4px;
}
.quiz-radio-label img:hover {
    filter: unset;
}
.quiz-radio-label input:checked + img {
    filter: unset;
}
.quiz-radio-label {
    position: relative;
    cursor: pointer;
}
.question_number {
    margin-left: 10px;
}
.quiz-question-name {
    margin-left: 20px;
}
input[type=radio], input[type=checkbox] {
    position: relative;
    border: 1px solid var(--Color-Border);
    appearance: none;
    min-width: 24px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin: 0;
}
input[type=radio]:checked, input[type=checkbox]:checked, input[type=radio]:hover, input[type=checkbox]:hover {
    border-color: var(--Color-Main);
}
.quiz-answer input[type=checkbox], .quiz-freeanswer input[type=checkbox] {
    border: 1px solid var(--Color-Border);
}
.quiz-answer input[type=checkbox]:checked, .quiz-answer input[type=checkbox]:hover,
.quiz-freeanswer input[type=checkbox]:checked, .quiz-freeanswer input[type=checkbox]:hover {
    border-color: var(--Color-Main);
}
input[type=radio] {
    border-radius: 50%;
}
input[type=checkbox] {
    border-radius: 4px;
}
input[type=radio]:disabled, input[type=checkbox]:disabled {
    cursor: not-allowed;
}
.quiz-image-box input[type=radio] {
    border: unset;
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 1;
}   
.quiz-image-box input[type=radio]:checked {
    border: 1px solid var(--Color-Border);
    background-color: #ffffff;
}
input[type=radio]:checked:before, input[type=checkbox]:checked:before {
    content: "";
    width: 5px;
    height: 10px;
    border-bottom: 2px solid var(--Color-Main);
    border-right: 2px solid var(--Color-Main);
    display: block;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.quiz-radio-box .quiz-radio-label {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}
button.btn, a.btn, label.btn {
    display: block;
    width: fit-content;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    background-color: #ffffff;
    border: 1px solid var(--Color-Border);
    color: var(--Color-Main);
    cursor: pointer;
    transition: all 0.5s ease;
    border-radius: 99px;
    text-align: center;
}
button.btn:disabled, a.btn:disabled, label.btn:disabled {
    background-color: var(--Color-Border);
    border-color: var(--Color-Border);
    opacity: 0.5;
    cursor: not-allowed;
}
button.btn:hover, a.btn:hover, label.btn:hover {
    background-color: var(--Color-Border);
}
button.btn.delete-item:hover, button.btn.delete-item:disabled {
    color: var(--Color-Main);
    background-color: transparent;
}
.quiz-settings {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    border: 1px solid var(--Color-Border);
    border-radius: 6px;
    padding: 60px;
}
.game-question-area {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    padding: 60px;
}
.quiz-video, .quiz-video-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 600px;
    width: 100%;
}
.quiz-video-placeholder {
    background-color: #f0f0f1;
    border: 1px solid var(--Color-Border);
    border-radius: 4px;
    height: 340px;
    width: 100%;
}
.quiz-textarea {
    display: flex;
    justify-content: flex-start;
    max-width: 600px;
    width: 100%;
}
.quiz-textarea textarea {
    width: 100%;
    overflow: hidden;
    min-height: 36px;
    max-height: 112px;
    height: 25px;
    border: unset;
    font-size: 16px;
    resize: none;
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--Color-Border);
    line-height: 1.3em;
}
.quiz-dropdown select {
    min-width: 200px;
    font-size: 16px;
    border: 1px solid var(--Color-Border);
    height: 36px;
    padding: 6px 8px;
    line-height: 1.3em;
}
span.right_answer {
    display: none;
}
.quiz-answer input:checked + span, .quiz-freeanswer input:checked + span {
    display: block;
}
.quiz-answer label, .quiz-freeanswer label {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    color: var(--Color-Main);
    min-width: 100px;
}
.quiz-image-text {
    font-size: 16px;
    line-height: 1.5;
    margin-top: 15px;
}
.image-upload input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.image-upload {
    border: 2px solid var(--Color-Border);
    padding: 4px 10px;
    background-color: #ffffff;
    color: var(--Color-Main);
    display: inline-block;
    cursor: pointer;
}
.image-upload.btn {
    padding: 12px 24px;
}
.quiz-checkbox {
    padding: 10px 0;
}
.quiz-image {
    display: flex;
    flex-direction: row;
    column-gap: 40px;
    padding: 10px 0;
}
.quiz-image img {
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
    display: block;
}
.quiz-image-container {
    border: 1px solid var(--Color-Border);
    width: fit-content;
    height: fit-content;
    padding: 10px;
    border-radius: 4px;
}
.quiz-image-container.placeholder {
    background-color: #f0f0f1;
    width: 100px;
    height: 100px;
}
.game-question-buttons {
    padding: 0 36px 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
.btn.delete-item {
    border: unset;
    color: red;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 0;
    margin-left: 24px;
    background-color: transparent;
}
.create-game-section.custom-create {
    display: block;
}
.btn.statistics-btn {
    border: unset;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    background-color: transparent;
    text-align: start;
    white-space: nowrap;
}
.btn.statistics-btn:hover {
    color: var(--Color-Hover);
    background-color: transparent;
}
.btn.statistics-btn svg {
    min-width: 16px;
}
.question-link {
    background-color: limegreen;
    color: #000000;
}
.question-link.active {
    background-color: #8aff8a;
}
.question-link:hover {
    opacity: 0.7;
}
.question-title {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    border-bottom: 1px solid var(--Color-Border);
    overflow: hidden;
}
.question-title h2 {
    margin: 10px 20px;
    display: flex;
}
.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}
.quiz-answer, .quiz-freeanswer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 40px;
    margin-bottom: 20px;
    position: relative;
}
.quiz-answer textarea, .quiz-freeanswer textarea {
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    min-height: 36px;
    max-height: 104px;
    height: 25px;
    border: unset;
    font-size: 16px;
    line-height: 1.3em;
    resize: none;
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--Color-Border);
}
.quiz-menu {
    margin-top: 60px;
    margin-bottom: 140px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
.quiz-menu .play-container {
    width: 100%;
    margin-top: 40px;
}
.play-container {
    margin-top: 60px;
}
.game-view-inner {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--Color-Border);
    border-radius: 6px;
    margin-bottom: 60px;
}
.file-error {
    color: red;
    font-weight: 600;
}
.games-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 30px;
    row-gap: 24px;
    margin-top: 80px;
    margin-bottom: 80px;
}
.content-width {
    max-width: 1440px;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
}
.home-game-card {
    padding: 48px 24px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-game-card.yellow {
    background: #FCF6D7;
}
.home-game-card.gray {
    background: #F7F6F7;
}
.home-game-card.dark {
    background: #162746;
    color: #ffffff;
}
.bottom-game-card {
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.bottom-game-card.yellow .bottom-card-content {
    background: #FCF6D7;
}
.bottom-game-card.gray .bottom-card-content {
    background: #F7F6F7;
}
.bottom-game-card.dark .bottom-card-content {
    background: #162746;
    color: #ffffff;
}
.quiz-answer-container {
    width: 100%;
    max-width: 600px;
    position: relative;
}
.save-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.save-message {
    font-size: 16px;
    color: var(--Color-Green);
    font-weight: 600;
    position: fixed;
    top: 0px;
    width: 100%;
    left: 0;
    background-color: #FCF6D7ee;
    border-bottom: 1px solid var(--Color-Hover);
    text-align: center;
    padding: 20px;
}
.user-quizzes {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 40px 0;
}
.user-quizzes.hide {
    display: none;
}
.my-quiz {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
}
.my-quiz-title {
    width: 100%;
    max-width: 400px;
    line-height: 1.3em;
}
.my-quiz-title svg {
    min-width: 16px;
}
.my-quiz-title a {
    text-decoration: unset;
    color: var(--Color-Main);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 42px;
}
.my-quiz-title:hover a {
    color: var(--Color-Hover);
}
.my-quiz .btn {
    flex-wrap: nowrap;
    white-space: nowrap;
}
.quiz-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 600px;
    width: 100%;
    gap: 20px 10px;
}
.quiz-categories label {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    cursor: pointer;
    width: fit-content;
}
.quiz-settings .quiz-menu {
    margin-top: 40px;
    margin-bottom: 0px;
}
.error_validation {
    display: none;
    background-color: #FFDEDE;
    border-radius: 6px;
}
.error_validation_inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}
.error_msg {
    color: red;
}
.quiz-edit-row.error .quiz-label {
    color: red;
}
.header-image {
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
    width: 100%;
    position: absolute;
    height: 132px;
}
.header-image img {
    position: relative;
    width: 100%;
    height: 132px;
    object-fit: fill;
    left: 50%;
    transform: translateX(-50%);
}
.footer-image {
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
    width: 100%;
    position: absolute;
    height: 400px;
    margin-top: 80px;
}
.footer-image img {
    position: relative;
    width: 100%;
    object-fit: fill;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    max-height: 400px;
    bottom: -40px;
}
.home-banner img {
    display: block;
    width: 100%;
    position: absolute;
    height: 100%;
    object-fit: cover;
}
.home-banner-section {
    margin-top: -100px;
}
.banner-content {
    position: relative;
    padding: 60px 0 60px 100px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 600px;
    text-align: center;
}
.home-banner-waves {
    position: relative;
    margin-top: -150px;
    overflow: hidden;
    height: 300px;
    z-index: 1;
}
.wave-top {
    position: relative;
    display: block;
    width: 100%;
    max-height: 400px;
    object-fit: fill;
    left: 50%;
    transform: translateX(-50%);
    object-position: top center;
}
img.game-card-image {
    width: 100%;
    display: block;
    height: 200px;
    object-fit: cover;
}
.games-section {
    margin-top: -280px;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}
.menu-top-menu-container .menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 20px;
}
.menu-top-menu-container .menu a {
    color: #ffffff;
    text-decoration: unset;
    font-weight: 500;
    transition: all 0.5s ease;
}
.menu-top-menu-container .menu .yellow a {
    color: #FDD100;
    font-weight: 600;
}
.menu-top-menu-container .menu a:hover {
    color: var(--Color-Hover);
}
.menu-top-menu-container .menu li.current-menu-item a {
    color: var(--Color-Hover);
}
.menu-top-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 40px;
}
.language-choices a {
    color: #ffffff;
    text-decoration: unset;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    font-weight: 500;
    transition: all 0.5s ease;
}
.language-choices a:hover {
    color: var(--Color-Hover);
}
.bottom-card-content {
    padding: 32px 0 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}
.bottom-card-content .game-card-link {
    margin-top: auto;
}
.bottom-card-image-container {
    width: 100%;
    height: 250px;
}
.bottom-card-image-container img.game-card-image {
    height: 100%;
}
.bottom-card-content .game-card-text {
    margin-top: 0;
}
.game-card-text {
    margin: 36px 0 24px;
    text-align: center;
}
.image-content {
    display: flex;
    flex-direction: column;
    gap: 80px;
}
.bottom-cards-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 30px;
    row-gap: 24px;
}
.bottom-cards-section {
    margin: 80px 0;
}
.content-block {
    display: flex;
    flex-direction: row;
    gap: 40px;
}
.content-block-image {
    border-radius: 30px;
    overflow: hidden;
    width: 100%;
}
.content-block-image img {
    display: block;
    width: 100%;
}
.content-block-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.content-block-text {
    margin-bottom: 18px;
}
.bottom-banner-image img {
    display: block;
    width: 100%;
    border-radius: 30px;
}
.cta-section {
    margin: 160px 0 100px;
}
.cta-block {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.cta-block .btn {
    background-color: #FDD100;
    border: unset;
}
.generate-section {
    margin-bottom: 220px;
}
.logo-container {
    width: 100%;
    z-index: 1;
}
.cta-block-title {
    text-align: center;
}
.banner-container {
    position: relative;
    min-height: 600px;
}
.home-banner:hover .owl-nav {
    opacity: 1;
}
.owl-nav {
    margin: 0;
    position: absolute;
    top: calc(50% - 30px);
    width: 100%;
    pointer-events: none;
    opacity: 0;
    transition: all 0.5s ease;
}
.owl-prev {
    position: absolute;
    top: 0;
    /*left: 80px;*/
    left: 30px;
    pointer-events: auto;
    width: 44px;
    height: 44px;
}
.owl-next {
    position: absolute;
    top: 0;
    /*right: 80px;*/
    right: 30px;
    pointer-events: auto;
    width: 44px;
    height: 44px;
}
.owl-nav button {
    transition: all 0.5s ease;
}
.owl-nav button:hover {
    opacity: 0.7;
}
.banner-arrow-left {
    display: block;
    width: 100%;
    height: 100%;
}
.banner-arrow-right {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(180deg);
}
.image-desktop {
    display: block !important;
}
.image-mobile {
    display: none !important;
}
.my-quiz-date {
    min-width: 80px;
    font-size: 14px;
    font-weight: 300;
    text-align: right;
}
.quiz-list-user {
    margin-bottom: 100px;
}
.quiz-checkbox label {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    color: var(--Color-Main);
}
.all_right_answers-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 7px;
}
.quiz-freeanswer span.right_answer {
    display: block;
}
.quiz-video-text, .quiz-image-text {
    font-size: 14px;
    color: #9F9F9F;
}
.question-removed {
    color: red;
    font-size: 20px;
    margin-bottom: 60px;
}
.svg-logo-transition {
    transition: all 0.5s ease;
}
.header-logo-link:hover .svg-logo-transition {
    fill: #FDD100;
}
.pmpro #pmpro_login, .pmpro #pmpro_change_password {
    max-width: 600px;
}
#loginform .login-submit {
    width: fit-content;
}
.empty-list {
    font-size: 20px;
    max-width: 800px;
    line-height: 1.3em;
    margin: 40px 0 80px;
}
.radio-filter-container input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}
input[type=radio] + .radio-filter {
    border: 1px solid var(--Color-Border);
    font-size: 16px;
    background-color: #ffffff;
    padding: 12px 24px;
    border-radius: 6px;
    display: block;
    cursor: pointer;
    transition: all 0.5s ease;
}
input[type=radio]:checked + .radio-filter, label.radio-filter:hover {
    background-color: var(--Color-Main);
    color: #ffffff;
    border-color: var(--Color-Main);
}
.user-filters {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: center;
    column-gap: 40px;
    margin-bottom: 40px;
}
.total_scoreboard.not_final .joined-player-trophy {
    opacity: 0;
}
.popup-section {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 1000000;
}
.popup-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--Color-Border);
    opacity: 0.5;
}
.popup-background_noclick {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--Color-Border);
    opacity: 0.5;
}
.popup-inner {
    position: absolute;
    background-color: #ffffff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100vh - 40px);
    max-width: min(80vw, 800px);
    width: 100%;
    border-radius: 20px;
}
.create-user-container {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 40px 20px;
}
.create-game {
    padding-right: 20px;
}
.generate-game {
    padding-left: 20px;
}
.create-game, .generate-game {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.create-game h2, .generate-game h2 {
    white-space: nowrap;
}
.create-game a, .generate-game a {
    margin-bottom: 0;
}
.create-game img, .generate-game img {
    width: 100%;
    display: block;
    height: 200px;
    object-fit: cover;
}
.popup-close {
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    background: unset;
    border: unset;
    cursor: pointer;
}
.popup-close:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    height: 2px;
    width: 15px;
    border-bottom: 2px solid var(--Color-Main);
}
.popup-close:after {
    content: "";
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
    height: 2px;
    width: 15px;
    border-bottom: 2px solid var(--Color-Main);
}
.create-user-container .game-card-text {
    margin-bottom: 20px;
}
.quiz-title {
    display: flex;
    justify-content: flex-start;
    max-width: 600px;
    width: 100%;
    position: relative;
}
.entry-title {
    margin-bottom: 40px;
}

/* PMPRO CSS CHANGES */
.pmpro .pmpro_card_actions {
    background-color: var(--Color-Footer);
}
.classic-page {
    margin-bottom: 100px;
}
.pmpro {
    max-width: 1024px;
}
.pmpro * {
    color: var(--Color-Main);
}
.pmpro a {
    text-decoration: unset;
    transition: all 0.5s ease;
}
.pmpro a:hover {
    color: var(--Color-DarkBorder);
}
.pmpro .pmpro_card_title {
    color: var(--Color-Main);
}
.pmpro_level-expiration {
    grid-column: 1/3;
}

.pmpro_btn.pmpro_btn-outline:hover, .pmpro_btn.pmpro_btn-cancel:hover,
.pmpro_btn.pmpro_btn-submit-checkout:hover, .pmpro_btn.pmpro_btn-submit-change-password:hover,
.pmpro_btn.pmpro_btn-submit-update-profile:hover, .pmpro_btn.pmpro_btn-renew:hover,
.pmpro_btn.pmpro_btn-submit:hover, .pmpro .pmpro_section #loginform .login-submit .button.button-primary:hover,
.pmpro_btn.pmpro_btn-select:hover {
    background-color: var(--Color-Border);
    color: var(--Color-Main);
    border-color: var(--Color-Border);
}
.pmpro_btn.pmpro_btn-outline, .pmpro_btn.pmpro_btn-cancel {
    background: #FFFFFF;
    color: #001C46;
    border-color: #FFFFFF;
    border-radius: 99px;
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.5s ease;
    text-decoration: none;
    text-align: center;
    border: 1px solid var(--Color-Border);
    box-shadow: none;
}
.pmpro_btn.pmpro_btn-submit-checkout, .pmpro_btn.pmpro_btn-submit-change-password,
.pmpro_btn.pmpro_btn-submit-update-profile, .pmpro_btn.pmpro_btn-renew,
.pmpro_btn.pmpro_btn-submit, .pmpro .pmpro_section #loginform .login-submit .button.button-primary,
.pmpro_btn.pmpro_btn-select {
    background: var(--Color-Main);
    color: #fff;
    border-color: var(--Color-Main);
    border-radius: 99px;
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.5s ease;
    text-decoration: none;
    text-align: center;
}
#member-profile-edit .pmpro_form_submit {
    margin-top: 40px;
}
.login-remember label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.logged-in .login-link {
    display: none;
}
/* PMPRO CSS CHANGES END */

.logged-in-dropdown-container {
    position: relative;
    max-width: 250px;
    z-index: 10000;
}
.logged-in-dropdown-content {
    position: relative;
}
.logged-in-dropdown-content.hidden {
    position: relative;
}
.logged-in-dropdown-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 6px;
    background-color: #ffffff;
    transition: opacity 0.5s ease;
    margin-top: 12px;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    padding: 20px;
    border: 1px solid var(--Color-Main);
}
.logged-in-dropdown-options-container {
    display: none;
    position: absolute;
    width: 100%;
}
.header-user-btn {
    cursor: pointer;
    width: 100%;
    
    border: unset;
    border-radius: 99px;
    padding: 12px 20px;
    background-color: #ffffff;
    pointer-events: auto;
    transition: all 0.5s ease;
    min-width: 200px;
}
.header-user-btn:hover {
    background-color: var(--Color-DarkBorder);
}
.header-user-btn span {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0 auto;
    width: fit-content;
    font-size: 16px;
    word-break: break-word;
    font-weight: 500;
}
.logout-link {
    margin-top: 10px;
}
.header-user-btn img {
    width: 12px;
    height: 12px;
    display: block;
    max-width: unset;
}
.hidden-dropdown-for-responsive-width {
    height: auto;
    overflow: hidden;
    visibility: hidden;
    z-index: -1;
    position: relative;
    pointer-events: none;
}
.logged-in-dropdown-options a {
    text-decoration: none;
    color: var(--Color-Main);
    font-size: 16px;
    background-color: #ffffff;
    transition: all 0.5s ease;
}
.logged-in-dropdown-options a:hover {
    color: var(--Color-DarkBorder);
}
img.header-arrow {
    width: 14px;
    height: 14px;
    transition: all 0.5s ease;
}
.logged-in-dropdown-content.open img.header-arrow {
    transform: rotate(180deg);
}
.pmpro_levels_table thead {
    display: none;
}
.pmpro_levels_table tbody {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.pmpro_table.pmpro_levels_table .benefits {
  display: none;
}
.pmpro-levels .wp-block-table {
  max-width: 1024px;
}
.pmpro_level {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    min-height: 320px;
    text-align: center;
    line-height: 1.2;
    padding: 12px 0 4px;
}
.pmpro_level-price, .pmpro_level-title {
    font-size: 24px;
}
.pmpro_level-expiration {
    font-size: 18px;
    font-weight: 600;
}
.pmpro_level:nth-child(3n-2) {
    background-color: var(--Color-Footer);
}
.pmpro_level:nth-child(3n-1) {
    background-color: #F7F6F7;
}
.pmpro_level:nth-child(3n) {
    background-color: var(--Color-Main);
}
.pmpro_level:nth-child(3n-2) .pmpro_btn-select {
    background-color: #FDD100;
    border-color: #FDD100;
    color: var(--Color-Main);
}
.pmpro_level:nth-child(3n-2) .pmpro_btn-select:hover {
    background-color: var(--Color-Border);
    border-color: var(--Color-Border);
    color: var(--Color-Main);
}
.pmpro_level:nth-child(3n) .pmpro_btn-select {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--Color-Main);
}
.pmpro_level:nth-child(3n) .pmpro_btn-select:hover {
    background-color: var(--Color-Border);
    border-color: var(--Color-Border);
    color: var(--Color-Main);
}
.pmpro_level:nth-child(3n) * {
    color: #ffffff;
}
.pmpro_level:nth-child(3n) .pmpro_btn.pmpro_btn-outline,
.pmpro_level:nth-child(3n) .pmpro_btn.pmpro_btn-outline:focus {
	color: #001C46;
	background: #FFFFFF;
}
.pmpro_level th, .pmpro_level td {
    border: unset !important;
    background-color: unset !important;
}
.pmpro_level td.pmpro_level-buttons {
    margin-top: auto;
}
.pmpro #pmpro_levels .pmpro_card_content {
    padding: 12px;
}
.pmpro_level-buttons {
    padding: 12px 0px 20px !important;
    max-width: 192px;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
}
.pmpro_level-buttons button {
    width: 100%;
}
.pmpro_level-buttons button:disabled {
    cursor: not-allowed;
    background-color: var(--Color-Border) !important;
    border-color: var(--Color-Border) !important;
}
.pmpro_level-price.tolower {
    text-transform: lowercase;
}

.free_quiz_section {
    margin: 80px 0;
}
.quiz-list_section {
    margin: 80px 0;
}
.quiz-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 60px;
}
.quiz-card {
    background-color: var(--Color-Main);
    color: #ffffff;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.quiz-list .quiz-card:nth-child(9n-8) {
    background-color: var(--Color-Main);
    color: #ffffff;
}
.quiz-list .quiz-card:nth-child(9n-8) .btn {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n-7) {
    background-color: var(--Color-Footer);
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n-7) .btn {
    background-color: #FDD100;
    border-color: #FDD100;
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n-6) {
    background-color: #F7F6F7;
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n-6) .btn {
    background-color: var(--Color-Main);
    border-color: var(--Color-Main);
    color: #ffffff;
}
.quiz-list .quiz-card:nth-child(9n-5) {
    background-color: var(--Color-Footer);
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n-5) .btn {
    background-color: #FDD100;
    border-color: #FDD100;
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n-4) {
    background-color: #F7F6F7;
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n-4) .btn {
    background-color: var(--Color-Main);
    border-color: var(--Color-Main);
    color: #ffffff;
}
.quiz-list .quiz-card:nth-child(9n-3) {
    background-color: var(--Color-Main);
    color: #ffffff;
}
.quiz-list .quiz-card:nth-child(9n-3) .btn {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n-2) {
    background-color: #F7F6F7;
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n-2) .btn {
    background-color: var(--Color-Main);
    border-color: var(--Color-Main);
    color: #ffffff;
}
.quiz-list .quiz-card:nth-child(9n-1) {
    background-color: var(--Color-Main);
    color: #ffffff;
}
.quiz-list .quiz-card:nth-child(9n-1) .btn {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n) {
    background-color: var(--Color-Footer);
    color: var(--Color-Main);
}
.quiz-list .quiz-card:nth-child(9n) .btn {
    background-color: #FDD100;
    border-color: #FDD100;
    color: var(--Color-Main);
}
.quiz-card .quiz-card-image-container {
    width: 100%;
    height: 250px;
}
.quiz-card .quiz-card-image-container img {
    width: 100%;
    display: block;
    height: 250px;
    object-fit: cover;
}
.quiz-card .quiz-content-container {
    padding: 32px 20px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
}
.quiz-card .quiz-content-title {
    margin: 0 0 24px;
    text-align: center;
}
.home-game-card .game-card-link {
    margin-top: auto;
}
.quiz-card .quiz-content-container .btn {
    margin-top: auto;
}
.player-register-container {
    background-color: #FCF6D7;
    border-radius: 30px;
    padding: 50px;
    max-width: 800px;
    display: grid;
    grid-template-columns: 101px 1fr;
    align-items: center;
}
.player-register-img-container img {
    width: 100%;
    display: block;
    border-radius: 50%;
    position: absolute;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
}
.player-register-img-container {
    padding-bottom: 100%;
    position: relative;
}
.player-register-name-container {
    padding: 20px 0 20px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.player-register-name-container input, .question-free-label input {
    width: 100%;
    max-width: 600px;
    border: 1px solid var(--Color-Border);
    padding: 8px 12px;
    line-height: 1.3em;
    min-height: 37px;
    font-size: 16px;
    height: 26px;
}
button.change-avatar {
    position: absolute;
    right: -6px;
    top: -6px;
    background-color: #FDD100;
    border-radius: 50%;
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.change-avatar svg {
    width: 100%;
    height: 100%;
}
.avatar-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    padding: 20px;
    gap: 20px;
    background-color: #FCF6D7;
    border-radius: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 40px;
    overflow-x: hidden;
}
.change-avatar-choice {
    padding-bottom: 100%;
    position: relative;
    width: 90px;
    height: 90px;
    display: block;
}
.change-avatar-choice.chosen {
    outline: 10px solid #FDD100;
    border-radius: 50%;
}
.change-avatar-choice input[type=radio] {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}
.change-avatar-choice img {
    width: 100%;
    display: block;
    border-radius: 50%;
    position: absolute;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
    cursor: pointer;
    transform: scale(1.30);
}
.change-avatar-choice.chosen img {
    filter: grayscale(1) blur(0.6px);
}
.change-avatar-choice img:hover {
    scale: 1.25;
    z-index: 1;
}
.change-avatar-choice.chosen img:hover {
    scale: 1;
    z-index: unset;
}
.player-list-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    background-color: #F7F6F7;
    border-radius: 30px;
    padding: 50px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    position: relative;
    min-height: 200px;
    padding: 40px;
    gap: 24px;
}
.player-view .player-list-container {
    max-height: calc(100vh - 90px - 125px - 80px);
}
.player-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    overflow-y: auto;
    gap: 10px;
}
.joined-player {
    display: flex;
    flex-direction: row;
    gap: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    align-items: center;
    padding: 20px;
    font-size: 20px;
    font-weight: 400;
    border: 1px solid var(--Color-Border);
}
.player-list .joined-player {
    padding: 10px;
}
.joined-player.current {
    border: 1px solid var(--Color-Blue);
    font-weight: 600;
    background: var(--Color-Blue) !important;
    color: #ffffff;
}
.joined-player-img {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: scale(1.3);
}
.player-list-count, .player-list-empty {
    font-weight: 600;
    font-size: 22px;
}
.player-list-count {
    margin-top: auto;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 2px;
}
.player-list-counter {
    font-weight: 600;
    font-size: 22px;
}
.player-list-empty {
    font-size: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0px 50px;
    width: 100%;
    text-align: center;
}
.player-open_view-section h1 {
    margin-bottom: 20px;
    text-align: center;
}
.player-open_view-section {
    padding: 80px 0 60px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.player-open_view-section h2 {
    margin-top: 40px;
    text-align: center;
}
.footer.game-footer {
    z-index: 1;
}
.player-list-container-outer.player-list-outer-host {
    display: flex;
    flex-direction: row;
    gap: 40px;
    max-height: calc(80vh - 160px);
}
.player-host-share {
    padding: 50px;
    border-radius: 30px;
    background-color: var(--Color-Main);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 400px;
    width: 100%;
    max-height: 514px;
    height: max(400px, 100%);
}
.game-shortlink {
    text-decoration: unset;
    color: #FDD100;
    font-size: 22px;
    font-weight: 600;
    overflow-wrap: break-word;
    transition: all 0.5s ease;
}
.game-shortlink:hover {
    color: var(--Color-DarkBorder);
}
.host-game-buttons {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
.qr-code {
    border-radius: 10px;
    max-height: calc(100% - 100px);
    min-height: 150px;
}
.qr-code svg {
    max-height: 300px;
    display: block;
    height: 100%;
    background: #ffffff;
    border-radius: 10px;
}

.timer {
    margin-top: 10px;
}
.timer text {
    fill: var(--Color-Main);
}
.timer text tspan {
    fill: var(--Color-Main);
}
  
.timer > svg {
    width: 200px;
    height: 200px;
}

.timer > svg > circle {
    fill: none;
    stroke: var(--Color-Hover);
    stroke-width: 10;
    transform-origin: center center;
    transform: rotate(-90deg);
}

.timer > svg > circle + circle {
    stroke: var(--Color-Main);
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke-linecap: butt;
    stroke-opacity: 1;
}
.player-timer-section .timer > svg > circle {
    fill: none;
    stroke: var(--Color-Main);
    stroke-width: 10;
    transform-origin: center center;
    transform: rotate(-90deg);
}

.player-timer-section .timer > svg > circle + circle {
    stroke: var(--Color-Hover);
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    stroke-linecap: butt;
    stroke-opacity: 1;
}

.timer.animatable > svg > circle + circle {
    transition: stroke-dashoffset 0.3s ease;
}

.timer-text-top {
    font-size: 16px;
}
.timer-text-mid {
    font-size: 80px;
    font-weight: 600;
}
.timer-text-bot {
    font-size: 16px;
}
.timer-container {
    background-color: #FCF6D7;
    border-radius: 30px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.question-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.question-container h2 {
    margin-bottom: 40px;
}
.question-videoblock,
.question-imageblock,
.question-textblock {
    height: 30vh;
    width: 100%;
    min-height: 200px;
}
.question-imageblock {
    height: fit-content;
}
.question-imageblock img {
    display: block;
    height: 100%;
    border: 3px solid #ffffff;
    border-radius: 30px;    
    width: 100%;
    object-fit: contain;
    max-height: 30vh;
}
.question-videoblock iframe {
    max-width: min(1380px, calc(100vw - 60px));
    height: 30vh;
    aspect-ratio: 5 / 3;
    display: block;
    border: 3px solid #ffffff;
    border-radius: 30px;
}
.question-choices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 20px;
    padding-bottom: 40px;
    margin-top: 40px;
}
.question-choice {
    background-color: #ffffff;
    color: var(--Color-Main);
    border-radius: 10px;
    padding: 15px 27px 15px 19px;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    cursor: pointer;
    line-height: 1.2;
    border: 3px solid transparent;
    transition: all 0.5s ease;
}
.question-choice input[type=checkbox] {
    background: #ffffff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    min-width: 20px;
    position: absolute;
    pointer-events: none;
    opacity: 0;
}
.question-timer {
    position: fixed;
    top: calc(50% + 15px);
    right: 30px;
    transform: translateY(-50%);
    background: #FCF6D7;
    padding: 10px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    z-index: 1;
    transition: all 0.4s ease;
    transform-origin: top right;
}
.next-button-container {
    position: fixed;
    top: calc(50% + 15px);
    right: 30px;
    transform: translateY(-50%);
    background: #FCF6D7;
    padding: 10px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    z-index: 2;
    transition: all 0.4s ease;
    transform-origin: top right;
    width: 160px;
}
.next-button-container.hide-right {
    right: -240px;
}
.game-frame.with-timer .next-button-container {
    top: calc(50% + 15px);
}
.question-timer .timer svg {
    width: 140px;
    height: 140px;
}
.question-timer .timer-text-mid {
    font-size: 50px;
}
.question-timer.hide-right {
    right: -240px;
}
.question-choice.chosen {
    background-color: #FCF6D7;
    border: 3px solid #FDD100;
}
.question-choice.right {
    background-color: #FDD100;
}
.question-choice.chosen.wrong {
    background-color: red;
    color: #ffffff;
}
#register_player_name.error {
    border-color: red;
}
.joined-player-nr {
    font-weight: 400;
    font-size: 20px;
    min-width: 30px;
    max-width: 30px;
    text-align: end;
}
.joined-player.first-place {
    border-color: #FDD100;
    border-width: 3px;
    font-size: 20px;
    font-weight: 400;
}
.joined-player.second-place {
    border-color: #FDD100;
    border-width: 3px;
    font-size: 20px;
    font-weight: 400;
}
.joined-player.third-place {
    border-color: #FDD100;
    border-width: 3px;
    font-size: 20px;
    font-weight: 400;
}
.scoreboard {
    border-radius: 30px;
    padding: 50px;
    background-color: #F7F6F7;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 910px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    max-height: calc(100vh - 340px);
    transition: all 0.5s ease;
}
.game-frame.with-timer .scoreboard {
    max-width: min(calc(100vw - 280px), calc(50vw + 235px));
    margin-left: 0;
}
.score-title, .score-question-title, .score-quiz-title {
    text-align: center;
}
.score-question-title, .score-quiz-title {
    font-size: 32px;
    margin-bottom: 40px;
}
.score-quiz-title {
    font-weight: 600;
}
.group-title {
    font-size: 20px;
    margin-bottom: 40px;
    font-weight: 400;
    text-align: center;
    width: 100%;
    display: block;
}
.group-title .group-title-name {
    font-weight: 600;
}
.joined-player-pts {
    font-weight: 400;
    min-width: 30px;
    max-width: 30px;
    width: 100%;
    text-align: end;
}
.current .joined-player-pts {
    font-weight: 600;
}
.first-place .joined-player-nr {
    font-size: 20px;
}
.second-place .joined-player-nr {
    font-size: 20px;
}
.third-place .joined-player-nr {
    font-size: 20px;
}
.game-header, .game-footer {
    display: none;
}
.main-container.game-main {
    margin-top: 0px;
}
.question-free {
    max-width: 600px;
    width: 100%;
}
.player-register-section {
    width: 100vw;
    height: calc(100vh - 90px);
    top: 60px;
}
.player-register-section .content-width {
    height: 100%;
}
.player-register-container {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--Color-Hover);
}
section.player-section {
    z-index: 2;
    position: relative;
}
.game-frame {
    background: var(--Color-Main);
    height: 100vh;
}
.admin-bar .game-frame {
    height: calc(100vh - 32px);
}
.player-register-section {
    z-index: 2;
    position: relative;
}
.game-frame .content-width {
    padding-left: 60px;
    padding-right: 60px;
    max-width: 1030px;
    width: 100%;
}
.game-frame .logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    position: fixed;
    z-index: 3;
}
.game-frame h1, .game-frame h2, .game-frame .score-quiz-title {
    color: #ffffff;
    text-align: center;
    /*text-shadow: 0px 0px 4px #fff;*/
}
.game-frame h1 {
    padding-top: 40px;
}
.player-open_view-section h2 {
    padding-bottom: 20px;
}
.content-width.player-list-outer-host {
    max-width: 1470px;
}
.player-open_view-section.host-view {
    padding: 30px 0 60px;
    justify-content: space-evenly;
}
.player-timer-section {
    display: flex;
    align-items: center;
    height: 100vh;
}
.player-timer-section .content-width {
    padding-top: 80px;
    padding-bottom: 50px;
}
.player-timer-section .content-width h2 {
    color: var(--Color-Main);
    text-shadow: unset;
}
.timer-logo {
    border-radius: 10px;
    background-color: var(--Color-Main);
    padding: 10px 10px 0px;
    margin-top: 20px;
}
.player-final-score-section, .player-question-score-section {
    display: flex;
    align-items: center;
    height: 100%;
}
.player-question-section {
    position: relative;
    display: flex;
    align-items: center;
    height: calc(100vh - 90px);
    top: 60px;
    overflow-y: auto;
}
.player-question-section .content-width {
    height: 100%;
}
.player-question-section .question-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    height: 100%;
    padding: 0;
    align-items: center;
}
.background-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-color: var(--Color-Main);
}
.game-frame-background {
    background-color: var(--Color-Main);
    height: 100vh;
    width: 100vw;
    position: fixed;
}
.game-frame-right {
    background: var(--Color-Main);
    position: fixed;
    width: 30px;
    height: 100vh;
    right: 0;
    z-index: 5;
}
.mobile-change-avatar {
    display: none;
}
#start_quiz:disabled {
    opacity: 1;
    background-color: var(--Color-Border);
    border-color: var(--Color-Border);
}
.popup-avatar-title {
    position: absolute;
    top: 19px;
    font-size: 22px;
    z-index: 1;
    padding: 0 50px;
    width: 100%;
    text-align: center;
    color: var(--Color-Main);
}
.question-choice .question_answer {
    word-break: break-word;
}
.question-center {
    margin: 20px 0;
}
.question-container.text .question-center {
    display: none;
}
.question-container h2 {
    padding-top: 20px;
}
.player-question-section.host-view .question-choice {
    cursor: not-allowed;
}
.mobile-question-timer {
    display: none;
    position: fixed;
    z-index: 10;
    bottom: 0;
    width: 100vw;
    left: 0;
    height: 30px;
    background-color: var(--Color-Main);
}
.timer-progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--Color-Blue);
}
.timer-number-container {
    position: absolute;
    height: 30px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: 500;
    display: flex;
    color: #ffffff;
    align-items: end;
    opacity: 1;
    padding: 5px 0 2px;
}
.timer-number-container.animate {
    animation-name: timerPop;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-iteration-count: 5;
}
@keyframes timerPop {
    0% {font-size: 20px; opacity: 1;}
    50% {opacity: 0.5;}
    100% {font-size: 60px; opacity: 0;}
}
.timer-ended {
    font-size: 16px;
    padding: 5px 0;
}
.joined-player-trophy {
    display: block;
    width: 50px;
    height: 50px;
    margin-left: auto;
}
html.game-html {
    overflow: hidden;
}
html.game-html body {
    height: 100%;
    width: 100%;
    position: fixed;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
h2.score-title {
    margin-bottom: 40px;
}
h1.score-title {
    margin-bottom: 20px;
}
.background-image_desktop {
    display: block;
}
.background-image_mobile {
    display: none;
}
.score-page-section .content-width {
    width: 100%;
}
.score-page-section .scoreboard {
    max-height: unset;
}
.btn.statistics-btn.grayed {
    font-size: 16px;
    font-weight: 500;
    padding: 12px 24px;
    background-color: transparent;
    color: var(--Color-DarkBorder);
    cursor: initial;
    transition: all 0.5s ease;
    border-radius: 99px;
}
.back-button {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    margin-bottom: 40px;
    margin-top: -20px;
    font-size: 16px;
    background-color: transparent;
    border: unset;
    padding: 0;
    cursor: pointer;
    transition: all 0.5s ease;
}
.back-button:hover {
    color: var(--Color-Hover);
}
.back-button svg {
    width: 20px;
    height: 20px;
}
.generate-section .quiz-menu {
    align-items: center;
}
.play-container .my-quiz-play {
    margin-left: 0;
}
.quiz-menu.buttons_hide #add_question,
.quiz-menu.buttons_hide .play-container {
    display: none;
}
.type1-type-container {
    display: flex;
    gap: 20px;
}
.generate_from_text-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    border: 1px solid var(--Color-Border);
    border-radius: 6px;
    padding: 60px;
    margin: 60px 0;
}
.quiz-input-text {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 40px;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}
.quiz-input-text-container {
    width: 100%;
    max-width: 600px;
    position: relative;
}
.quiz-input-text textarea {
    width: 100%;
    max-width: 600px;
    overflow: auto;
    min-height: 312px;
    max-height: 312px;
    height: 25px;
    border: unset;
    font-size: 16px;
    line-height: 1.3em;
    resize: none;
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--Color-Border);
}
.quiz-radio-box.three {
    grid-template-columns: 1fr 1fr 1fr;
}
.loader {
    border: 10px solid #FCF6D7;
    border-radius: 50%;
    border-top: 10px solid var(--Color-Hover);
    width: 100px;
    height: 100px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 52px;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.player-question-section .question-free {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}
.player-question-section .question-free-label {
    width: 100%;
}
#send_free_answer.disabled {
    cursor: not-allowed;
    display: none;
}
#send_free_answer:focus-visible {
    outline: 2px solid var(--Color-Hover);
}
.host-free-answer-text {
    color: #fff;
    text-align: center;
    margin: 0 auto;
    font-size: 28px;
    font-weight: 500;
    background-color: #000000a0;
    padding: 30px;
    border-radius: 10px;
    line-height: 1.3;
}
.question-free-label.sent input {
    outline: 2px solid var(--Color-Hover);
}
.question-free-label.right input {
    outline: unset;
    background-color: var(--Color-Hover);
}
.question-free-label.wrong input {
    outline: unset;
    background-color: red;
    color: #ffffff;
}
.question-free-label.wrong input::placeholder {
    color: #ffffff;
}
.question-choices.checking .question-choice {
    opacity: 0.75;
}
.question-choices.checking .question-choice.right, 
.question-choices.checking .question-choice.wrong {
    opacity: 1;
}
.create-warning {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--Color-Hover);
    border-radius: 6px;
    padding: 30px;
    margin-bottom: 60px;
    background: #FCF6D7;
    max-width: 800px;
}
.warning {
    color: var(--Color-Main);
    line-height: 1.3;
}
.bottom-cards-title {
    text-align: center;
    margin-bottom: 40px;
}
.timer-container .loader {
    height: 203px;
    width: 200px;
    margin: 10px 0 0;
}
.quiz-radio-label.disabled {
    cursor: not-allowed;
    color: var(--Color-DarkBorder);
}
.groups-list {
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    margin-top: 40px;
}
.group-listing {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.group-details {
    position: relative;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
    padding: 15px 0 0px;
    z-index: 1;
}
.group-details.sticky {
    position: sticky;
}
.group-fields {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    row-gap: 0px;
}
.group_name, .group_player_name {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--Color-Border);
    padding: 8px 12px;
    line-height: 1.3em;
    min-height: 36px;
    font-size: 16px;
    height: 26px;
}
.group_name {
    max-width: 412px;
}
.group_name.text, .group_player_name.text {
    cursor: default;
    border: unset;
    max-width: 412px;
    outline: unset !important;
}
.group-error {
    display: none;
    color: red;
    margin-top: 15px;
}
.start-edit {
    border: unset;
    padding: unset;
    background-color: unset;
    transition: all 0.5s ease;
    cursor: pointer;
}
.start-edit.transparent {
    opacity: 0.5;
    pointer-events: none;
}
.start-edit:hover {
    color: var(--Color-Hover);
}
.start-edit svg {
    display: block;
    pointer-events: none;
}
.btn.plus {
    padding: 8px 24px;
    font-weight: 400;
    font-size: 14px;
    margin-top: 5px;
}
.group-players {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 38px;
    padding-bottom: 15px;
}
.group-player {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    position: relative;
}
.group-player::before {
    content: "\21B3";
    position: absolute;
    left: -20px;
    font-size: 20px;
    padding-bottom: 18px;
}
.group-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding-bottom: 35px;
    border-bottom: 1px solid var(--Color-Border);
    margin-left: 0;
}
.group_player_name.error {
    border-color: red;
}
.btn.toggle {
    border: unset;
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    color: var(--Color-DarkBorder);
    margin-left: auto;
    padding: 0;
}
.btn.toggle:hover {
    background-color: #ffffff;
    color: var(--Color-Main);
}
.new-group-pen {
    border: unset;
    padding: unset;
    background-color: unset;
}
.group-players .btn.delete-item {
    color: #b10c0c;
    font-size: 14px;
}
.group-players .btn.delete-item svg {
    width: 14px;
    height: 14px;
}
.add_new_group_listing {
    margin-top: 30px;
}
.group-inputs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 438px;
}
.add_group {
    white-space: nowrap;
}
.quiz-menu .delete-quiz {
    margin-left: auto;
}
.delete-container {
    margin-left: auto;
}
.add_new_group_listing .group-buttons {
    padding-bottom: 0;
    border-bottom: unset;
}
.group-quiz {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
    margin-left: 126px;
    min-height: 45px;
}
.group-quiz-select {
    border: 1px solid var(--Color-Border);
    font-size: 16px;
    padding: 6px 12px;
    max-width: 228px;
    min-width: 228px;
    width: 100%;
}
.my-quiz-container {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    padding: 20px 0;
    width: fit-content;
}
.group-results-links {
    position: absolute;
    left: -9999999px;
    opacity: 0;
}
.my-quiz .my-quiz-play,
.group-quiz .my-quiz-group-play {
    display: flex;
    align-items: center;
    position: relative;
}
.my-quiz .my-quiz-play svg,
.group-quiz .my-quiz-group-play svg {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 20px;
    pointer-events: none;
}
.my-quiz .my-quiz-play span,
.group-quiz .my-quiz-group-play span {
    margin-left: 25px;
    pointer-events: none;
}
.my-quiz-container:nth-child(odd) {
    background-color: #FCF6D7;
}
.group-quiz-name-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    max-width: 374px;
    width: 100%;
}
.content-width-quizzes {
    max-width: 1440px;
    padding-left: 30px;
    padding-right: 30px;
    margin-left: auto;
    margin-right: auto;
}
.player-register-name-container select {
    border: 1px solid var(--Color-Border);
    font-size: 16px;
    padding: 6px 12px;
}
.joined-player-name {
    display: flex;
    gap: 5px;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.delete-player {
    color: red;
    margin-left: auto;
    border: unset;
    background-color: unset;
    cursor: pointer;
    transition: all 0.5s ease;
    padding: 0;
}
.delete-player:hover {
    color: var(--Color-Main);
}
.delete-player svg {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
}
.player-kicked-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-align: center;
    line-height: 1.5;
}
.register_player_error {
    grid-column: 1 / 3;
    color: red;
    text-align: center;
}
.btn.delete-item.delete-group {
    margin-left: auto;
}
select.group-title-name {
    border: 1px solid var(--Color-Border);
    font-size: 16px;
    padding: 6px 12px;
    min-width: 228px;
    max-width: min(800px, calc(100vw - 24px));
}
.player-final-score-section .group-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 22px;
    row-gap: 10px;
}
.quiz-settings.validate-error,
.game-view-inner.validate-error,
.quiz-edit-row.validate-error textarea,
.quiz-edit-row.validate-error input {
    border-color: red;
}
.quiz-answers.validate-answers-error textarea,
.quiz-answers.validate-trueanswers-error input[type=checkbox] {
    border-color: red;
}
.quiz-video.validate-error input {
    border-color: red;
}
.quiz-image.validate-error .quiz-image-container {
    border-color: red;
}
.quiz-edit-row.validate-error {
    color: red;
}
.game-type1-errors {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: red;
    width: 100%;
    background-color: #FFDEDE;
    border-radius: 6px;
    padding: 20px 24px;
}
.quiz-edit-row.error #quiz_name {
    border-color: red;
}
.quiz-edit-row.error #quiz_question_amount {
    border-color: red;
}

@media screen and (max-width: 1060px) {
    .content-width-quizzes {
        padding-left: 0;
        padding-right: 0;
    }
    .my-quiz-container {
        padding-left: 30px;
        padding-right: 30px;
        width: 100%;
    }
}
@media screen and (max-width: 1200px) {
    .host-view .player-list {
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 1000px) {
    .header-image img {
        width: 1000px;
    }
    .home-banner-waves .wave-top {
        width: 1000px;
    }
    .footer-image img {
        width: 1000px;
    }
    .my-quiz {
        column-gap: 10px;
    }
    .group-quiz {
        column-gap: 10px;
        margin-left: 116px;
    }
    .create-game h2, .generate-game h2 {
        font-size: 32px;
    }
    .player-list-container-outer.player-list-outer-host {
        align-items: center;
        flex-direction: column;
        overflow-y: auto;
    }
    .player-list-outer-host .player-list-container {
        max-height: unset;
        overflow-y: unset;
    }
}

@media screen and (max-width: 880px) {
    .group-quiz-name-container span {
        display: none;
    }
    .group-quiz-select {
        max-width: 374px;
    }
    .group-quiz-name-container {
        max-width: 374px;
        width: 100%;
    }
}

@media screen and (min-width: 801px) {
    .logo-container .next-button-container {
        display: none !important;
    }
}
@media screen and (max-width: 800px) {
    .user-filters {
        justify-content: flex-start;
        row-gap: 10px;
        column-gap: 10px;
    }
    .my-quiz-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .my-quiz {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            'date date date date play results'
            'title title title title play results';
        row-gap: 10px;
        padding: 0;
    }
    .group-quiz {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
            'drop drop drop drop play results';
        margin-left: 0;
    }
    .group-quiz-select {
        max-width: 400px;
        min-width: unset;
    }
    .group-quiz-name-container {
        grid-area: drop;
        max-width: 400px;
        grid-column: span 4;
    }
    .my-quiz-group-play {
        grid-area: play;
        margin-left: auto;
    }
    .my-quiz-container:nth-child(odd) {
        background-color: #FCF6D7;
    }
    .my-quiz-date {
        grid-area: date;
        text-align: start;
    }
    .my-quiz-title {
        grid-area: title;
        grid-column: span 4;
        align-self: baseline;
    }
    .my-quiz-title svg {
        display: none;
    }
    .my-quiz-play {
        grid-area: play;
        margin-left: auto;
    }
    .btn.statistics-btn{
        grid-area: results;
        margin-left: auto;
        padding-right: 0px;
        width: unset;
    }
    .btn.statistics-btn.grayed {
        padding-right: 0px;
    }
    .my-quiz .btn.statistics-btn,
    .group-quiz .btn.statistics-btn {
        white-space: nowrap;
    }
    .btn.delete-item {
        grid-area: delete;
        margin-left: auto;
    }
    .mobile-open .menu-top-container {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: flex-start;
    }
    .menu-top-container {
        display: none;
    }
    .mobile-menu-toggle {
        display: block;
    }
    .header-inner .header-menus {
        display: none;
    }
    .mobile-header-content {
        display: block;
        opacity: 0;
        transition: all 0.5s ease;
        pointer-events: none;
        width: 100%;
        height: 0;
    }
    header.mobile-open .mobile-header-content {
        opacity: 1;
        pointer-events: initial;
        height: calc(100vh - 88px);
        overflow-y: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 12px;
        padding-right: 12px;
        background: #001C46;
    }
    header {
        display: grid;
    }
    header.mobile-open {
        position: fixed;
        top: 0;
        z-index: 100000;
        width: 100%;
    }
    header .header-inner {
        width: 100%;
        z-index: 2;
        transition: all 0.5s ease;
    }
    html.mobile-open {
        overflow-y: hidden;
    }
    .mobile-header-content .menu-top-container .menu ul {
        flex-direction: column;
    }
    .steps-content {
        flex-direction: column;
    }
    .step-arrow {
        transform: rotate(90deg);
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .content-width {
        padding-left: 12px;
        padding-right: 12px;
    }
    .quiz-edit-row {
        flex-direction: column;
        row-gap: 10px;
    }
    .quiz-answer, .quiz-freeanswer {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 10px;
    }
    .quiz-answer label, .quiz-freeanswer label {
        margin-top: 20px;
    }
    .quiz-image img {
        max-width: min(200px, 25vw);
    }
    .bottom-cards-content, .games-content {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
    .bottom-banner-image img {
        min-height: 300px;
        object-fit: cover;
    }
    .banner-content {
        padding-left: 20px;
        padding-right: 20px;
        margin: 0 auto;
        background: #ffffffc0;
    }
    .image-desktop {
        display: none !important;
    }
    .image-mobile {
        display: block !important;
    }
    .content-block {
        flex-direction: column;
    }
    .content-block.reverse {
        flex-direction: column-reverse;
    }
    .menu-top-container {
        flex-direction: column;
        row-gap: 60px;
        height: 100%;
    }
    .menu-top-menu-container .menu {
        flex-direction: column;
        font-size: 24px;
        font-weight: 300;
        row-gap: 20px;
    }
    .language-choices a {
        font-size: 18px;
        font-weight: 300;
    }
    .menu-footer-menu-container .menu {
        flex-direction: column;
        row-gap: 20px;
        text-align: center;
    }
    .footer-links {
        flex-direction: column;
        row-gap: 20px;
    }
    .footer-container {
        margin-top: 300px;
        background: #FCF6D7;
    }
    .cta-section {
        margin: 120px 0 140px;
    }
    .create-user-container {
        grid-template-columns: 1fr;
    }
    .create-user-container img {
        display: none;
    }
    .create-game {
        padding: 0 0 40px 0;
        border-bottom: 1px solid var(--Color-Border);
    }
    .generate-game {
        padding: 30px 0 0 0;
    }
    .popup-inner {
        max-width: calc(100% - 24px);
        width: fit-content;
    }
    #change-avatar-popup .popup-inner {
        width: 100%;
    }
    .create-user-container .game-card-text {
        margin-top: 0;
    }
    
    .mobile-header-user {
        box-sizing: border-box;
        border: unset;
        padding: 0px 0px 20px 0;
    }
    .mobile-header-user span {
        margin: 0;
        font-size: 26px;
        font-weight: 800;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 12px;
        width: fit-content;
        word-break: break-word;
        align-items: center;
    }
    .mobile-header-content .logged-in-dropdown-container-mobile {
        max-width: unset;
        z-index: unset;
        padding: 60px 0;
        border-top: 1px solid #d9d9d9;
        border-bottom: 1px solid #d9d9d9;
        background-color: #FAFAFA;
        width: 100vw;
        margin-left: -12px;
    }
    .mobile-header-content .logged-in-dropdown-content {
        position: relative;
        padding-left: 12px;
        padding-right: 12px;
        pointer-events: all;
    }
    .mobile-header-content .logged-in-dropdown-options {
        opacity: 1;
        padding: 0;
        border: unset;
        background-color: unset;
        position: relative;
        pointer-events: auto;
        border-radius: 0;
    }
    .mobile-header-content .logged-in-dropdown-options a {
        font-size: 20px;
        background-color: unset;
    }
    .logged-in-dropdown-options-container {
        display: block;
        position: relative;
    }
    .mobile-header-content .language-switcher {
        padding-bottom: 40px;
    }
    .header-image {
        transition: all 0.5s ease;
    }
    header.mobile-open .header-inner {
        height: 88px;
    }
    .mobile-open .header-image {
        background-color: var(--Color-Main);
    }
    .pmpro_levels_table tbody {
        grid-template-columns: 1fr;
    }
    .pmpro_level th::before, .pmpro_level td::before {
        display: none;
    }
    .pmpro_table tbody tr.pmpro_level th, .pmpro_table tbody tr.pmpro_level td, .pmpro_table tfoot tr.pmpro_level td {
        grid-template-columns: 1fr;
    }
    .pmpro_level-title {
        padding-top: 12px !important;
    }
    .quiz-list {
        grid-template-columns: 1fr;
        max-width: 456px;
        margin: 60px auto 0;
    }
    .quiz-list_section h2 {
        text-align: center;
    }
    .scoreboard {
        padding: 12px;
        gap: 10px;
        border-radius: 10px;
    }
    .game-frame.with-timer .scoreboard {
        max-width: unset;
        margin-left: auto;
    }
    .joined-player {
        padding: 10px;
        gap: 14px;
        font-size: 16px;
    }
    .joined-player-nr {
        font-size: 16px;
        min-width: 24px;
        max-width: 24px;
    }
    .joined-player.first-place {
        font-size: 16px;
        font-weight: 600;
    }
    .joined-player.second-place {
        font-size: 16px;
    }
    .joined-player.third-place {
        font-size: 16px;
    }
    .first-place .joined-player-nr {
        font-size: 22px;
    }
    .second-place .joined-player-nr {
        font-size: 20px;
    }
    .third-place .joined-player-nr {
        font-size: 18px;
    }
    .joined-player-img {
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }
    .player-question-score-section .joined-player.first-place,
    .player-question-score-section .joined-player.second-place,
    .player-question-score-section .joined-player.third-place {
        background-color: #ffffff;
    }
    .player-list {
        grid-template-columns: 1fr 1fr;
    }
    .game-frame h1 {
        font-size: 24px;
    }
    .game-frame h2 {
        font-size: 22px;
    }
    .player-list-container {
        max-height: calc(100vh - 90px - 125px - 20px);
        padding: 24px 12px;
        border-radius: 10px;
    }
    .player-list-empty {
        font-size: 22px;
    }
    
    .popup-close {
        width: 30px;
        height: 30px;
    }
    .popup-close:before {
        width: 20px;
    }
    .popup-close:after {
        width: 20px;
    }
    .mobile-change-avatar {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    .question-timer {
        display: none;
    }
    .mobile-question-timer.show {
        display: block;
    }
    .mobile-question-timer.show.hide {
        display: none;
    }
    .joined-player-trophy {
        display: block;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }
    .question-container.text h2 {
        font-size: 28px;
    }
    h2.score-title {
        margin-bottom: 40px;
        font-size: 28px;
    }
    .score-question-title, .score-quiz-title {
        font-size: 24px;
        margin-bottom: 40px;
    }
    .background-image_desktop {
        display: none;
    }
    .background-image_mobile {
        display: block;
    }
    .game-frame .logo-container {
        justify-content: space-between;
    }
    .next-button-container {
        top: 0 !important;
        transform: unset;
        padding: 0;
        background: unset;
    }
    .mobile-question-timer + .next-button-container {
        display: none !important;
    }
    .next-button-container.hide-right {
        opacity: 0;
        right: unset;
    }
    .logo-container .next-button-container {
        right: unset;
        position: relative;
        width: fit-content;
    }
    .logo-container .next-button-container button {
        padding: 6px 24px;
    }
    .game-frame .logo-container {
        padding: 0 30px;
    }
}

@media screen and (max-width: 782px) {
    .admin-bar .main-wrapper {
        min-height: calc(100vh - 46px);
    }
    .admin-bar .game-frame {
        height: calc(100vh - 46px);
    }
    /*
    .game-head + body .admin-bar .game-frame {
        height: 100vh;
    }
    .game-head + body .admin-bar .main-wrapper {
        height: 100vh;
    }
        */
}

@media screen and (max-width: 600px) {
    h1 {
        font-size: 36px;
    }
    .delete-container {
        margin-left: 0;
        width: 100%;
    }
    .delete-container .btn.delete-item {
        margin-left: 0;
    }
    .quiz-image-box {
        grid-template-columns: 1fr 1fr;
    }
    .quiz-settings {
        padding: 40px 20px;
    }
    .game-question-area {
        padding: 40px 20px;
    }
    .banner-content h1, .banner-content h2 {
        font-size: 40px;
    }
    h2 {
        font-size: 32px;
    }
    .home-game-card, .content-block-image, .bottom-game-card, .bottom-banner-image img {
        border-radius: 15px;
    }
    /*
    .my-quiz {
        grid-template-areas:
            'title title title title title play'
            'title title title title title results'
            'date date date date date delete';
    }
    .my-quiz-title {
        grid-column: span 5;
    }
    .btn.statistics-btn, .btn.delete-item {
        padding-right: 11px;
    }
    .my-quiz .btn.statistics-btn {
        padding-right: 11px;
    }
    */
    .my-quiz {
        grid-template-columns: 1fr 1fr 1fr 1fr 45px 45px;
    }
    .group-quiz {
        grid-template-columns: 1fr 1fr 1fr 1fr 45px 45px;
    }
    .my-quiz .my-quiz-play, 
    .group-quiz .my-quiz-group-play {
        width: 45px;
        height: 45px;
        padding: 0;
        justify-content: center;
    }
    .my-quiz-play span,
    .my-quiz-group-play span {
        display: none;
    }
    .my-quiz .my-quiz-play svg, 
    .group-quiz .my-quiz-group-play svg {
        left: unset;
    }
    .btn.statistics-btn {
        padding: 0;
        width: 45px;
        height: 45px;
        border: 1px solid var(--Color-Border);
        justify-content: center;
    }
    .btn.statistics-btn.grayed {
        padding: 0;
    }
    .statistics-btn span {
        display: none;
    }

    button.change-avatar {
        right: -10px;
        top: -10px;
    }
    .player-register-img-container {
        padding-bottom: 70px;
        width: 70px;
        margin-top: 20px;
    }
    .player-register-container {
        grid-template-columns: 1fr;
        padding: 12px;
        justify-items: center;
    }
    .player-register-name-container {
        padding-left: 0;
        width: 100%;
        align-items: center;
    }
    .game-frame .content-width {
        padding-left: 18px;
        padding-right: 18px;
    }
    .game-frame .background-image {
        height: calc(100% - 52px);
        width: calc(100% - 12px);
        border-radius: 10px;
        top: 46px;
        left: 6px;
    }
    .game-frame .logo-container {
        height: 46px;
        padding: 0 6px;
    }
    .game-frame .logo-container svg {
        width: 110px;
    }
    .game-frame .logo-container a {
        margin-top: 6px;
    }
    /*
    .player-list {
        grid-template-columns: 1fr;
    }
    */
    .question-choice {
        padding: 12px 10px;
    }
    .question_answer {
        font-size: 16px;
    }
    .game-frame-right {
        width: 6px;
    }
    .popup-inner {
        border-radius: 6px;
    }
    .avatar-list {
        border-radius: 6px;
    }
    .player-register-section {
        height: calc(100vh - 52px);
        top: 46px;
    }
    .player-timer-section .content-width {
        padding-top: 56px;
        padding-bottom: 16px;
    }
    .question-choices {
        gap: 10px;
    }
    .player-question-section {
        height: calc(100vh - 52px);
        top: 46px;
    }
    .scoreboard {
        width: calc(100vw - 12px);
        margin-left: -12px !important;
        border-radius: 0;
    }
    .player-question-section .question-free {
        flex-direction: column;
    }
    .group-fields {
        flex-direction: column;
        align-items: start;
    }
    .group-listing.add_new_group_listing .group-fields {
        flex-direction: row;
        align-items: center;
    }
    .btn.toggle {
        padding: 12px 12px;
    }
    .player-final-score-section .group-title span {
        display: none;
    }
    .register_player_error {
        grid-column: unset;
    }
    .score-page-section .scoreboard {
        width: 100vw;
    }
}
@media screen and (max-height: 570px) {
    .timer-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 50px;
        padding: 20px 20px 30px;
        justify-content: center;
    }
    .timer-container h2 {
        width: 100%;
        text-align: center;
    }
    .game-frame .background-image {
        height: calc(100% - 52px);
        width: calc(100% - 12px);
        border-radius: 10px;
        top: 46px;
        left: 6px;
    }
    .game-frame .logo-container {
        height: 46px;
    }
    .game-frame .logo-container svg {
        width: 110px;
    }
    .game-frame .logo-container a {
        margin-top: 6px;
    }
    .game-frame-right {
        width: 6px;
    }
    .player-open_view-section, .player-timer-section {
        height: calc(100vh - 52px);
        top: 46px;
        padding: 0;
        overflow-y: auto;
    }
    /*
    .player-timer-section {
        align-items: unset;
        display: block;
    }
    */
    .player-list-container-outer.player-list-outer-host {
        overflow-y: unset;
    }
    .player-open_view-section.host-view {
        justify-content: unset;
        padding: 0 0 40px;
    }
    .player-open_view-section.host-view .player-list-container-outer.player-list-outer-host {
        max-height: unset;
    }
    .player-timer-section .content-width {
        padding: 18px 18px;
    }
    .question-timer {
        display: none;
    }
    .question-choices {
        gap: 10px;
    }
    .player-question-section {
        height: calc(100vh - 52px);
        top: 46px;
    }
    .mobile-question-timer.show {
        display: block;
    }
}
@media screen and (max-width: 400px) {
    .change-avatar-choice {
        width: calc((100vw - 104px) / 3);
        height: calc((100vw - 104px) / 3);
    }
}


/*  
    This code would turn orientation back to vertical if in landscape mode
    Might need an overlay to tell the guest to turn page around back to portrait mode
*/
/*
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    .quiz-wrapper {
        transform: rotate(-90deg);
        transform-origin: left top;
        width: 100vh;
        height: 100vw;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .game-frame {
        height: 100vw;
    }
    .player-open_view-section, .player-timer-section,
    .player-question-section, .player-final-score-section, 
    .player-question-score-section {
        height: 100vw;
    }
}
*/
/* Privacy */
.content-header-title {
    color: #000;
    font-size: 36px;
    line-height: 133%;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0;
    word-wrap: break-word;
}
.content-section {
	max-width: 1024px;
	margin: 0 auto;
	line-height: 1.7em;
	font-weight: 300;
}
.content-section strong {
	font-weight: 500;
}
@media screen and (max-width: 600px) {
	.content-header-title {
        font-size: 24px;
    }
	.image-content {
		gap: 40px;
	}
}