/* ==========================================================================
Breakpoints
========================================================================== */
@media only screen and (min-width: 360px) {}
@media only screen and (min-width: 600px) {}
@media only screen and (min-width: 768px) {}
@media only screen and (min-width: 992px) {}
@media only screen and (min-width: 1280px) {}
@media only screen and (min-width: 1440px) {}

/* ==========================================================================
   Reset
   ========================================================================== */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
/* ==========================================================================
Variables
========================================================================== */
html {
    overflow-x: hidden;
/* Colours */
    --QQRed: #DA0530;
    --CCBlue: #002859;
    --White: #FFFFFF;
    --Black: #000014;
/* Fonts */
    --CenturyGothic: "century-gothic", sans-serif;
}
html, body {
  overflow-x: clip;
  overscroll-behavior: none;
}
.hidden {
    display: none!important;
}
/* ==========================================================================
   Global Typography
   ========================================================================== */
body {
    color: var(--White);
    background-color: var(--CCBlue);
    font-family: Helvetica, sans-serif;
    font-weight: 400;
    line-height: 150%;
    font-size: clamp(16px, 1.8vw, 20px);
}
h1, h2, h3 {
    font-family: var(--CenturyGothic);
    font-weight: 700;
    font-style: normal;
    line-height: 100%;
}
h1 {
    font-size: clamp(42px, 4vw, 65px);
}
h2 {
    font-size: clamp(38px, 3.8vw, 56px);
}
ul {
    margin-left: 20px;
}
p, ul, ol, li {
    font-family: Helvetica, sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 150%;
}
p strong {
    font-weight: 600;
}
p sup {
    line-height: 0;
    font-size: clamp(10px, 1vw, 14px);
    vertical-align: super;
}
::selection {
    background: var(--White);
    color: var(--Black);
}
/* ==========================================================================
   Button styles
   ========================================================================== */
a.button, button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: var(--QQRed);
    color: var(--White);
    border: 2px solid var(--QQRed);
    border-radius: 8px;
    text-decoration: none;
    width: fit-content;
    font-weight: 600;
    font-family: var(--CenturyGothic);
    font-size: 18px;
    gap: 16px;
    cursor: pointer;
    transition: 0.2s ease background;
}
a.button:hover, button:hover {
    background: transparent;
}
a.button:focus-visible, button:focus-visible {
    outline: 2px solid var(--White);
    outline-offset: 2px;
}
a.button svg {
    width: 24px;
}
@media only screen and (min-width: 768px) {
    a.button, button {
        font-size: 24px;
        padding: 10px 30px;
    }
    a.button, button {
        border: 3px solid var(--QQRed);
    }
}
@media only screen and (min-width: 992px) {
    a.button, button {
        padding: 24px 40px;
        border-radius: 16px;
        border: 4px solid var(--QQRed);
    }
    a.button svg {
        width: unset;
    }
}
/* ==========================================================================
   Image styles
   ========================================================================== */
img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto;
}
/* ==========================================================================
   Header styles
   ========================================================================== */
header {
    width: 100%;
    height: 50vh;
    min-height: 600px;
    position: relative;
    box-sizing: border-box;
}
header::after {
    content: '';
    background: linear-gradient(180deg, rgba(0, 0, 20, 0.00) 25.58%, #000014 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
}
header.reg {
    height: 500px;
    min-height: unset;
}
header .qq-logo {
    top: 150px;
    z-index: 1;
}
.qq-logo.strapline {
    top: 180px;
    width: 300px;
}
.qq-logo {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: auto;
}
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero-img.secondary {
    top: 0;
    left: 0;
    position: absolute;
}
header.secondary {
    height: unset;
    min-height: unset;
    background-color: var(--Black);
}
header .nav-bar {
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: auto;
}
header .logo-container {
    width: 180px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
header .nav-bar .qq-logo {
    max-height: 42px;
    width: unset;
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
}
header.secondary::after {
    display: none;
}
.nav-button {
    width: 180px;
    display: none;
}
.nav-button .button {
    font-size: clamp(12px, 1vw, 14px);
    background: transparent;
    border: 1px solid var(--White);
    padding: 4px 12px;
    border-radius: 8px;
    width: fit-content;
    font-family: var(--CenturyGothic);
}
.nav-button .button:hover {
    background: var(--White);
    color: #000014;
}
.nav-icons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 26px;
    width: 180px;
}
.nav-icons a {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
.nav-icons a .line {
    width: 100%;
    height: 2px;
    margin-top: 8px;
    border-radius: 10px;
    background: var(--White);
    display: none;
}
.nav-icons a:hover .line {
    display: block;
}
.nav-icons .line.active {
    display: block;
}
@media only screen and (min-width: 600px) {
    .qq-logo {
        width: 200px;
    }
    .qq-logo.strapline {
        width: 500px;
    }
    .nav-button {
        display: flex;
    }
    header .nav-bar {
        padding: 20px 60px;
    }
    header .nav-bar .qq-logo {
        max-height: 64px;
    }
    header .logo-container {
        justify-content: center;
    }
}
@media only screen and (min-width: 1200px) {
    .qq-logo {
        width: 300px;
    }
    .qq-logo.strapline {
        width: 700px;
    }
}
/* ==========================================================================
   Footer styles
   ========================================================================== */
footer {
    margin: 16px;
}
footer .footer-logos {
    width: 100%;
    margin: 56px auto;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 36px;
}
footer .footer-logos img {
    height: 30px;
    width: auto;
}
footer .footer-text {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 32px auto;
}
footer .footer-text p {
    font-size: 14px;
    font-weight: 300;
    max-width: 120ch;
    margin-bottom: 16px;
    text-wrap: balance;
}
footer .footer-text p a {
    color: var(--White);
}
footer .footer-text .links {
    margin: 16px;
    display: flex;
    gap: 16px;
}
footer .footer-text .links a {
    color: var(--White);
    text-decoration: underline;
    font-size: 16px;
}
footer .footer-text .links a:hover {
    text-decoration: none;
}
footer hr {
    width: 90%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--White);
    opacity: 0.2;
}
@media only screen and (min-width: 600px) {
    footer .footer-logos {
        flex-flow: row;
    }
    footer .footer-logos img {
        height: 45px;
    }
}
@media only screen and (min-width: 1200px) {
    footer .footer-logos {
        gap: 80px;
    }
}
/* ==========================================================================
   404 styles
   ========================================================================== */
.error-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    min-height: 65vh;
    text-align: center;
}
.error-container h1 {
    font-size: clamp(72px, 10vw, 132px);
    margin-bottom: 16px;
}
/* ==========================================================================
   Text page styles
   ========================================================================== */
.text-container {
    width: 90%;
    max-width: 100ch;
    margin: auto;
    padding: 60px 0;
}
.text-container h1 {
    margin-bottom: 40px;
    text-align: center;
}
.text-container h3 {
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 24px;
}
.text-container p,
.text-container ul {
    margin-bottom: 20px;
}
.text-container ul li {
    margin-bottom: 8px;
}
/* ==========================================================================
   Registration styles
   ========================================================================== */
.register-container.glass {
    padding: 20px;
    max-width: 1200px;
}
.register-container h1 {
    font-size: clamp(38px, 3.8vw, 56px);
    margin-bottom: 20px;
    margin-top: 20px;
}
.register-container hr {
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--White);
    opacity: 0.2;
    margin-bottom: 40px;
}
.reg-form hr {
    margin-top: 40px;
}
.register-container label,
.submit-container label {
    text-transform: uppercase;
    font-family: var(--CenturyGothic);
    font-weight: 700;
}
.register-container label.custom-checkbox,
.submit-container label.custom-checkbox {
    text-transform: none;
}
.submit-container .form-field {
    padding: 20px 10px;
}
.login-form-container {
    max-width: 600px;
    margin: auto;
}
.login-form-container .reg-form {
    padding-top: 0;
}
.reg-form,
.login-form,
.fogpass-form,
.booking-form {
    display: flex;
    flex-flow: column;
    padding: 20px 0;
    box-sizing: border-box;
}
.form-row {
    display: flex;
    flex-flow: column;
}
.form-field {
    flex: 1;
    width: 100%;
    padding: 20px 5px 5px 5px;
    box-sizing: border-box;
    text-align: left;
    gap: 16px;
    display: flex;
    flex-flow: column;
}
.form-field.reduced-gap {
    padding-bottom: 0;
}
input {
    border-radius: 8px;
    background-color: rgba(0, 0, 20, 0.60);
    color: var(--White);
    border: 0.8px solid #D9D9D9;
    padding: 20px 30px;
    width: 100%;
    box-sizing: border-box;
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 300;
}
.custom-checkbox {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}
.form-field button,
.register-container .button {
    padding: 12px 20px;
    border: 2px solid var(--QQRed);
    border-radius: 8px;
    margin: auto;
    box-sizing: border-box;
    font-size: clamp(16px, 1.8vw, 20px);
    font-family: var(--CenturyGothic);
}
.register-container .button {
    margin-top: 40px;
}
.register-container p {
    max-width: 750px;
    margin: auto;
}
.custom-checkbox__label p {
    max-width: unset;
}
.register-container p.help-link {
    margin-top: 40px;
    font-size: 14px;
    font-weight: 700;
}
.register-container a,
.submit-container a {
    color: var(--White);
}
.register-container a:hover,
.submit-container a:hover {
    text-decoration: none;
}
.register-container p {
    text-wrap: balance;
}
.form-field button.custom-select__trigger {
    display: flex;
    width: 100%;
    background-color: rgba(0, 0, 20, 0.60);
    color: grey!important;
    border: 0.8px solid #D9D9D9;
    padding: 20px 30px;
    margin: unset !important;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    font-family: Helvetica, sans-serif;
    font-weight: 400;
    cursor: pointer;
}
.form-field.custom-select {
    gap: 0;
}
.form-field.custom-select label {
    margin-bottom: 16px;
}
.custom-select__panel ul {
    list-style: none;
    margin: 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    text-align: left;
    padding: 0px 20px 20px 20px;
    background: rgba(0, 0, 20, 0.6);
    border: 0.8px solid var(--White);
    border-top: 0;
    border-radius: 0 0 10px 10px;
}
.custom-select__icon {
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.custom-select__icon .open-icon {
    display: none;
    width: 15px;
    height: 4px;
}
.custom-select.open .custom-select__icon .open-icon {
    display: block;
    width: 15px;
    height: 4px;
}
.custom-select.open .custom-select__icon .closed-icon {
    display: none;
}
.custom-select__option:hover {
    background: var(--White);
    color: var(--Black);
}
input:focus {
    outline: transparent!important;
    border: 0.8px solid var(--White)!important;
}
.reg-form__submit:focus,
.login-form__submit:focus,
.fogpass-form__submit:focus,
.booking-form__submit:focus {
    outline: transparent;
    border: 2px solid var(--QQRed);
}
.custom-select__trigger:focus {
    outline: transparent;
    border: 1px solid transparent;
}
.custom-select__trigger:hover {
    outline: transparent;
    border: 1px solid transparent;
}
.custom-select.open .custom-select__trigger:hover {
    box-shadow: none;
    border-bottom: 0px solid transparent!important;
}
.custom-select.open .custom-select__trigger {
    border-bottom: 0px solid transparent;
    border-radius: 10px 10px 0 0;
}
.custom-select__option {
    cursor: pointer;
    border-radius: 10px;
    padding: 5px 10px;
}
.form-field .reg-form__submit,
.form-field .booking-form__submit {
    cursor: pointer;
}
.form-field .login-form__submit,
.form-field .fogpass-form__submit,
.form-field .booking-form__submit {
    cursor: pointer;
}
.form-field .reg-form__submit p,
.form-field .login-form__submit p,
.form-field .fogpass-form__submit p,
.form-field .booking-form__submit p {
    font-weight: 600;
}
.form-field .reg-form__submit:hover,
.form-field .login-form__submit:hover,
.form-field .fogpass-form__submit:hover,
.form-field .booking-form__submit:hover {
    background-color: none;
}
.form-field .login-form__submit:hover,
.form-field .fogpass-form__submit:hover,
.form-field .booking-form__submit:hover {
    border-color: var(--QQRed);
}
.custom-checkbox {
    --size: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    position: relative;
}
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.form-field.checkbox-field {
    justify-content: flex-start;
    display: flex;
    flex-flow: column;
}
.custom-checkbox__box {
    width: var(--size);
    height: var(--size);
    border: 0.8px solid var(--White);
    border-radius: 10px;
    background: rgba(0, 0, 20, 0.60);
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.custom-checkbox input:checked + .custom-checkbox__box {
    border: 0.8px solid transparent;
}
.custom-checkbox__box::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 14px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.18s ease, transform 0.18s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14' fill='none'%3E%3Cpath d='M5.61246 8.05271L2.93891 5.43025C2.50635 5.00595 1.80625 5.00595 1.37543 5.43025L0.324422 6.46117C-0.108141 6.88547 -0.108141 7.57218 0.324422 7.99478L5.61246 13.1818C6.04502 13.6061 6.74511 13.6061 7.17594 13.1818L17.6756 2.88275C18.1081 2.45846 18.1081 1.77174 17.6756 1.34915L16.6246 0.318223C16.192 -0.106074 15.4919 -0.106074 15.0611 0.318223L7.17594 8.05271C6.74338 8.47701 6.04329 8.47701 5.61246 8.05271Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
.custom-checkbox input[type="checkbox"]:checked + .custom-checkbox__box::after {
  opacity: 1;
  transform: scale(1);
}
.custom-checkbox input[type="checkbox"]:focus-visible + .custom-checkbox__box {
  outline: 2px solid var(--White);
  outline-offset: 4px;
}
.custom-checkbox__label {
    line-height: 1.4;
    font-weight: 400;
    text-align: left;
}
.custom-checkbox__label a:hover,
.form-redirect a:hover {
    text-decoration: none;
}
body.purple .custom-checkbox__label a:focus-visible,
.form-redirect a:focus-visible {
    outline: 2px solid var(--QQRed);
    border-radius: 5px;
    outline-offset: 2px;
}
.form-field.checkbox-field.checkbox-field--last {
  padding-top: 0;
}
.form-field.checkbox-field.location-selector p:first-of-type {
    margin-left: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    text-wrap: unset;
    max-width: unset;
}
.form-field.checkbox-field.location-selector .custom-checkbox__label p,
.form-field.checkbox-field.location-selector .validation-msg p {
    margin: 0;
}
.form-redirect {
    font-weight: 400;
    margin-top: 20px;
}
.form-redirect p {
    margin-bottom: 8px;
}
.validation-msg {
    display: none;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    text-align: left;
}
.validation-msg.invalid-login {
    padding: 5px;
    color: var(--QQRed);
}
.validation-msg p {
    font-size: clamp(12px, 0.8vw, 14px);
    margin: unset;
}
.form-field.error .validation-msg {
    display: flex;
}
.form-field.error input {
    border-color: var(--QQRed);
}
.form-field.error button {
    border-color: var(--QQRed);
}
.form-field.error button:hover {
    border-color: var(--QQRed)!important;
}
.form-field.error .custom-select__panel ul {
    border-color: var(--QQRed);
}
.form-field.error .custom-checkbox__box {
    border-color: var(--QQRed);
}
.reg-container {
    z-index: 2;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
}
.reg-container p.standfirst {
    font-weight: 600;
    margin-bottom: 12px;
}
.reg-container p a:hover {
    text-decoration: none;
}
.reg-container img {
    width: clamp(178px, 18vw, 250px);
    margin: auto;
}
@media only screen and (min-width: 400px) {
    .register-container h1 {
        margin-top: 0px;
    }
    .register-container.glass {
        padding: 40px;
    }
}
@media only screen and (min-width: 600px) {
    .form-row {
        display: flex;
        flex-flow: row;
    }   
}
@media only screen and (min-width: 768px) {
    .register-container h1 {
        margin-bottom: 40px;
    }
    .register-container.glass {
        padding: 40px 60px;
    }
}
@media only screen and (min-width: 992px) {
    .reg-container {
        padding: 50px;
    }
    .form-field {
        padding: 20px 10px;
    }
    .validation-msg.invalid-login {
        padding: 10px;
    }
    a.button.fog-pass-result {
        width: 100%;
        max-width: 450px;
    }
    input {
        border-radius: 16px;
    }
    .form-field button.custom-select__trigger {
        border-radius: 16px;
    }
}
@media only screen and (min-width: 1200px) {
    .register-container.glass {
        padding: 40px 80px;
    }
}
@media only screen and (min-width: 1440px) {
    .reg-form,
    .login-form,
    .fogpass-form {
        padding: 40px 0;
    }
}
/* ==========================================================================
   Homepage styles
   ========================================================================== */
main {
    background: linear-gradient(180deg, #000014 0%, #002859 100%);
}
:root {
  --panel-20: linear-gradient(-3deg, rgba(255, 255, 255, 0.01) 52.95%, rgba(255, 255, 255, 0.1) 99.93%);
}
.glass {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--panel-20);
/*
    backdrop-filter: blur(10px) saturate(90%);
    -webkit-backdrop-filter: blur(10px) saturate(90%);
*/
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 24px;
    box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.24),
    inset 0 1px 1px rgba(255, 255, 255, 0.40),
    inset 0 -1px 1px rgba(255, 255, 255, 0.10);
    width: 90%;
    max-width: 1800px;
    margin: auto auto 20px auto;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      circle at top left,
      rgba(255, 255, 255, 0.35),
      transparent 35%
    );
  opacity: 0.55;
}
.intro-container, .booking-container {
    transform: translatey(-50px);
}
.intro-container.glass, .booking-container.glass {
    margin-bottom: -30px;
}
.intro-container h1 {
    margin-bottom: 32px;
}
.booking-container h1 {
    margin-bottom: 40px;
}
.intro-container p {
    line-height: 2;
    margin: 0 auto 16px auto;
    max-width: 95%;
}
.links-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
.links-container a.button {
    flex: 1;
    margin: 10px;
    min-width: fit-content;
}
.links-container p {
    margin-bottom: 32px;
    text-wrap: balance;
}
.ticker-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
.ticker-container p {
    font-weight: 700;
    font-size: 30px;
    margin: 50px auto 20px auto;
}
.position-value, .bookings-value, .points-value {
    font-size: clamp(72px, 15vw, 132px);
    font-weight: 700;
    line-height: 1;
    font-family: var(--CenturyGothic);
    padding: 10px 30px;
}
.position-value {
    border: 2px solid var(--White);
    border-radius: 16px;
}
.bookings-value span, .points-value span {
    border-radius: 16px;
    background: linear-gradient(180deg, #FFF 0%, #EEE 100%);
    box-shadow: 0 3.053px 3.053px 0 rgba(0, 0, 0, 0.25) inset;
    padding: 0 20px;
    margin: 3px;
    color: var(--Black);
}
.leaderboard-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.leaderboard-container hr {
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--White);
    opacity: 0.2;
    margin-bottom: 40px;
}
.leaderboard-title {
    flex-flow: column;
}
.leaderboard-desc {
    flex-flow: row nowrap;
}
.leaderboard-title, .leaderboard-desc {
    display: flex;  
    justify-content: center;
    align-items: center;
    gap: 16px;
}
.leaderboard-desc {
    margin: 32px;
    text-align: left;
    align-items: flex-start;
}
.leaderboard-title svg {
    width: 72px;
}
.leaderboard-desc svg {
    flex-shrink: 0;
    margin-top: 4px;
}
.leaderboard-table {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 100%;
    text-align: left;
}
.leaderboard-row {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    background: var(--Black);
    margin: 2px auto;
    padding: 6px 12px;
    box-sizing: border-box;
    border-radius: 16px;
}
.leaderboard-row:nth-child(2) {
    background: rgba(0, 0, 20, 0.4);
}
.leaderboard-row:nth-child(3) {
    background: rgba(0, 0, 20, 0.6);
}
.leaderboard-row:nth-child(4) {
    background: rgba(0, 0, 20, 0.8);
}
.leaderboard-row.titles {
    font-family: var(--CenturyGothic);
    font-size: clamp(18px, 2vw, 34px);
    font-weight: 700;
    background: none;
    margin-bottom: 20px;
}
.leaderboard-row.titles .leaderboard-position {
    color: var(--White);
}
.leaderboard-position {
    width: 35%;
    font-weight: 700;
    color: var(--Black);
    position: relative;
    z-index: 0;
}
.leaderboard-row:not(.titles) .leaderboard-position {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.leaderboard-row:not(.titles) .leaderboard-position span {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 44px;
  isolation: isolate;
  padding-top: 4px;
}
.leaderboard-row:not(.titles) .leaderboard-position span::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 46px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='44' viewBox='0 0 46 44' fill='none'%3E%3Cpath d='M23.8433 0.42445L31.41 10.5947C31.8882 11.2379 32.5501 11.72 33.3077 11.9781L45.2855 16.0555C45.9518 16.2827 46.2123 17.0881 45.8066 17.665L38.5049 28.0283C38.0432 28.6836 37.7903 29.4647 37.7804 30.2667L37.6177 42.9566C37.6089 43.6627 36.925 44.1602 36.2532 43.9517L24.1742 40.1854C23.4101 39.9471 22.5921 39.9471 21.8279 40.1854L9.74901 43.9517C9.07722 44.1613 8.39334 43.6627 8.38455 42.9566L8.22182 30.2667C8.21193 29.4636 7.95905 28.6836 7.49726 28.0283L0.193382 17.6639C-0.212328 17.0881 0.0482504 16.2816 0.714538 16.0544L12.6923 11.977C13.4499 11.7189 14.1118 11.2368 14.59 10.5936L22.1567 0.42445C22.5778 -0.141483 23.4222 -0.141483 23.8433 0.42445Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
  z-index: -1;
  pointer-events: none;
}
.leaderboard-row:nth-child(n + 22) .leaderboard-position span::before {
  background: none;
}
.leaderboard-row:nth-child(n + 22) .leaderboard-position span {
  color: var(--White);
}
.leaderboard-name {
    width: 40%;
}
.leaderboard-agency {
    display: none;
}
.leaderboard-points {
    width: 15%;
    font-weight: 700;
}
.leaderboard-name, .leaderboard-agency, .leaderboard-points {
    align-items: center;
}
.leaderboard-name, .leaderboard-points {
    display: flex;
}
.leaderboard-container button {
    font-size: clamp(16px, 1.8vw, 20px);
    padding: 12px 20px;
    border-radius: 8px;
    margin-top: 20px;
    border: 2px solid var(--QQRed);
}
@media only screen and (min-width: 768px) {
    .position-value {
        border: 4px solid var(--White);
    }
    .bookings-value span, .points-value span {
        margin: 5px;
    }
    .leaderboard-name {
        width: 30%;
    }
    .leaderboard-agency {
        display: flex;
        width: 40%;
    }
    .leaderboard-points {
        width: 10%;
    }
    .leaderboard-position {
        width: 20%;
    }  
    .glass {
        padding: 30px;
    }
    .leaderboard-row {
        padding: 12px 20px;
    }
    .leaderboard-title {
        flex-flow: row nowrap;
    }
}
@media only screen and (min-width: 992px) {
    .glass {
        padding: 40px;
    }
    .intro-container p {
        max-width: 80%;
    }
}
/* ==========================================================================
   Booking styles
   ========================================================================== */
.booking-content {
    margin-top: 0px;
}
.booking {
    background: var(--Black);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-top: 10px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}
.booking.accepted {
    background: var(--White);
    color: var(--Black);
}
.booking h4 {
    font-size: clamp(20px, 1.5vw, 24px);
    font-weight: 700;
}
.booking p {
    font-size: 16px;
}
.booking .title {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    text-align: left;
}
.booking .status {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 20px;
}
.booking .status p {
    display: none;
}   
.booking.rejected .title, .booking.rejected .status {
    opacity: 0.4;
}
.intro-container .button {
    margin: 40px auto 0 auto;
    padding: 10px 20px;
    border-width: 2px;
    border-radius: 8px;
}
.booking-form {
    max-width: 600px;
    margin: auto;
}
.booking-form label {
    text-align: center;
}
.booking-form .custom-checkbox__box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}
.booking-form .custom-checkbox {
    gap: 20px;
}
.form-field.ghosted {
    opacity: 0.4;
    pointer-events: none;
}
@media only screen and (min-width: 992px) {
    .booking .status p {
        display: block;
    }
    .booking-content {
        margin-top: 60px;
    }
    .booking {
        min-height: 50px;
    }
    .intro-container .button {
        padding: 12px 20px;
    }
    .booking-form .custom-checkbox__box {
        width: 68px;
        height: 68px;
        border-radius: 16px;
    }
}
/* ==========================================================================
   Training styles
   ========================================================================== */
.training-container {
    padding-bottom: 64px;
}
.training-container button,
.training-container .button {
    padding: 10px 20px;
    margin: 40px auto;
    border-width: 2px;
    border-radius: 8px;
}   
.training-container hr {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #d9d9d9;
    opacity: 0.2;
}
.training-container p {
    margin-bottom: 20px;
}
.training-container h2 {
    margin-top: 30px;
    margin-bottom: 24px;
    font-size: clamp(24px, 3vw, 32px);
}
.training-container .training-title {
    margin: 0 auto;
    padding: 32px 0;
    width: 90%;
    max-width: 1800px;
    text-align: center;
}
.training-container .training-title h1 {
    padding: 0 30px 30px 30px;
}
.training-container .training-title p {
    font-size: 14px;
}
.training-intro p,
.training-outro p {
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}
.training-outro p {
    margin-bottom: 0;
}
.outro-home-button {
    margin: auto; 
    text-align: center; 
    display: block; 
    color: #fff;
}
.outro-home-button:hover {
    text-decoration: none;
}
.training-intro .complete p {
    max-width: 70ch;
    margin-bottom: 0;
}
.content-full .image,
.content-half .image,
.content-multi .image {
    border-radius: 16px;
    overflow: hidden;
    max-height: 600px;
    margin: auto;
}
.content-full .image img,
.content-half .image img,
.content-multi .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.content-full .image {
    width: 100%;
    aspect-ratio: 5 / 3;
}
.content-full .text {
    max-width: 900px;
    margin: auto;
}
.content-half {
    display: flex;
    flex-flow: column;
}
.content-half .image {
    aspect-ratio: 1 / 1;
}
.content-keypoints {
    width: 90%;
    max-width: 1800px;
    margin: auto auto 20px auto;
    padding: 40px 0;
}
.content-keypoints h2 {
    text-align: center;
}
.check-list {
    list-style: none;
    padding-left: 0;
    max-width: 700px;
    margin: auto;
}
.check-list li {
    position: relative;
    padding-left: 38px;
    margin-bottom: 20px;
    font-size: clamp(18px, 1.5vw, 24px);
}
.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 36C14.4399 36 10.9598 34.9443 7.99975 32.9665C5.03966 30.9886 2.73257 28.1774 1.37019 24.8883C0.00781775 21.5992 -0.348667 17.98 0.345866 14.4884C1.0404 10.9967 2.75475 7.78943 5.2721 5.27209C7.78944 2.75475 10.9967 1.04041 14.4884 0.345876C17.98 -0.348658 21.5993 0.00779071 24.8883 1.37017C28.1774 2.73254 30.9886 5.03965 32.9665 7.99974C34.9443 10.9598 36 14.4399 36 18C36 22.7739 34.1036 27.3523 30.7279 30.7279C27.3523 34.1036 22.7739 36 18 36ZM7.8084 22.059C7.42133 21.6677 7.20423 21.1394 7.20423 20.589C7.20423 20.0386 7.42133 19.5103 7.8084 19.119L8.86803 18.0654C9.04823 17.8836 9.2631 17.7398 9.49993 17.6426C9.73676 17.5454 9.99073 17.4968 10.2467 17.4997C10.5027 17.5025 10.7555 17.5568 10.9901 17.6592C11.2247 17.7617 11.4363 17.9102 11.6124 18.096L13.4844 20.0382C13.5737 20.1324 13.6812 20.2074 13.8004 20.2586C13.9196 20.3099 14.048 20.3363 14.1777 20.3363C14.3075 20.3363 14.4359 20.3099 14.5551 20.2586C14.6743 20.2074 14.7817 20.1324 14.871 20.0382L24.411 10.2042C24.5884 10.0171 24.8018 9.86777 25.0383 9.76524C25.2749 9.66271 25.5297 9.60908 25.7876 9.60757C26.0454 9.60606 26.3008 9.65668 26.5386 9.75643C26.7763 9.85618 26.9914 10.003 27.171 10.188L28.2 11.2284C28.5776 11.6181 28.7888 12.1395 28.7888 12.6822C28.7888 13.2249 28.5776 13.7463 28.2 14.136L15.5346 27.0066C15.3579 27.1896 15.1464 27.3354 14.9125 27.4355C14.6787 27.5357 14.4272 27.5881 14.1728 27.5898C13.9184 27.5915 13.6662 27.5424 13.4311 27.4453C13.1959 27.3482 12.9825 27.2052 12.8034 27.0246L7.8084 22.059Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 36C14.4399 36 10.9598 34.9443 7.99975 32.9665C5.03966 30.9886 2.73257 28.1774 1.37019 24.8883C0.00781775 21.5992 -0.348667 17.98 0.345866 14.4884C1.0404 10.9967 2.75475 7.78943 5.2721 5.27209C7.78944 2.75475 10.9967 1.04041 14.4884 0.345876C17.98 -0.348658 21.5993 0.00779071 24.8883 1.37017C28.1774 2.73254 30.9886 5.03965 32.9665 7.99974C34.9443 10.9598 36 14.4399 36 18C36 22.7739 34.1036 27.3523 30.7279 30.7279C27.3523 34.1036 22.7739 36 18 36ZM7.8084 22.059C7.42133 21.6677 7.20423 21.1394 7.20423 20.589C7.20423 20.0386 7.42133 19.5103 7.8084 19.119L8.86803 18.0654C9.04823 17.8836 9.2631 17.7398 9.49993 17.6426C9.73676 17.5454 9.99073 17.4968 10.2467 17.4997C10.5027 17.5025 10.7555 17.5568 10.9901 17.6592C11.2247 17.7617 11.4363 17.9102 11.6124 18.096L13.4844 20.0382C13.5737 20.1324 13.6812 20.2074 13.8004 20.2586C13.9196 20.3099 14.048 20.3363 14.1777 20.3363C14.3075 20.3363 14.4359 20.3099 14.5551 20.2586C14.6743 20.2074 14.7817 20.1324 14.871 20.0382L24.411 10.2042C24.5884 10.0171 24.8018 9.86777 25.0383 9.76524C25.2749 9.66271 25.5297 9.60908 25.7876 9.60757C26.0454 9.60606 26.3008 9.65668 26.5386 9.75643C26.7763 9.85618 26.9914 10.003 27.171 10.188L28.2 11.2284C28.5776 11.6181 28.7888 12.1395 28.7888 12.6822C28.7888 13.2249 28.5776 13.7463 28.2 14.136L15.5346 27.0066C15.3579 27.1896 15.1464 27.3354 14.9125 27.4355C14.6787 27.5357 14.4272 27.5881 14.1728 27.5898C13.9184 27.5915 13.6662 27.5424 13.4311 27.4453C13.1959 27.3482 12.9825 27.2052 12.8034 27.0246L7.8084 22.059Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.content-question .form-field.error .custom-checkbox__box {
    border-color: var(--White);
}
.content-question .question {
    align-items: flex-start;
    width: fit-content;
    margin: auto;
}
.content-question .question .form-field {
    padding: 10px;
}
.content-question p,
.content-fillblank p,
.content-dragdrop p {
    max-width: 54ch;
    margin: auto;    
}
.content-question .question p {
    margin: 0px auto 30px auto;
    font-size: clamp(18px, 1.5vw, 24px);
    text-wrap: balance;
}
.content-question .question .form-field p {
    margin-bottom: 0;   
}
.content-question .custom-checkbox__box {
    width: 48px;
    height: 48px;
    border-radius: 8px;
}
.content-question hr,
.content-fillblank hr,
.content-dragdrop hr,
.content-crossword hr {
    margin: 30px 0;
}
.content-question .answer-container {
    margin: auto; 
}
.content-question .question-validation {
    text-align: center;
    margin: auto;
    margin-top: 30px;
}
.content-question .question-validation p {
    font-size: clamp(12px, 1vw, 18px);
}
@keyframes checkbox-error-flash {
	0%,
	100% {
		border-color: initial;
	}

	25%,
	75% {
		border: 0.8px solid var(--QQRed);
	}
}
.custom-checkbox__box.checkbox-error-flash {
	animation: checkbox-error-flash 0.25s ease-in-out 3;
}
.training-nav {
    display: flex;
    flex-flow: column;
    width: 90%;
    margin: auto;
}
.training-nav button {
    width: 100%;
    margin: 20px auto 0 auto;
}
.training-nav button.ghosted {
    opacity: 0.4;
    pointer-events: none;
}
.content-multi .intro h2 {
    margin-top: 0;
}
.content-multi .intro p {
    max-width: 70ch;
    margin: 0 auto 30px auto;
}
.content-multi .multi-container {
    display: flex;
    flex-flow: row wrap;
    gap: 28px 42px;
}
.content-multi .multi-container .multi-item {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-flow: column;
}
.content-multi .multi-container .multi-item .image {
    aspect-ratio: 3 / 2;
    margin: 0;
}
.content-multi .multi-container .multi-item .text {
    padding: 24px;
}
.content-multi .multi-container .multi-item .text h3 {
    margin-bottom: 14px;
}
.content-multi .multi-container .multi-item .text p {
    margin-bottom: 0;
}
@media only screen and (min-width: 992px) {
    .training-container .training-title {
        padding: 64px 0;
    }
    .content-half {
        flex-flow: row;
        align-items: flex-start;
    }
    .content-half .image {
        flex: 1;
    }
    .content-half .text {
        flex: 1;
        padding: 0 28px;
        text-align: left;
    }
    .content-half .text h2 {
        margin-top: 0;
    }
    .check-list li {
        padding-left: 56px;
    }
    .check-list li::before {
        width: 36px;
        height: 36px;
    }
    .content-question .custom-checkbox__box {
        width: 68px;
        height: 68px;
        border-radius: 16px;
    }
    .content-question .custom-checkbox {
        gap: 24px;
    }
    .training-nav {
        flex-flow: row;
        gap: 20px;
        max-width: 700px;
    }
    .training-nav button {
        width: 50%;
    }
    .content-half.flipped .image {
        order: 2;
    }
}
@media only screen and (min-width: 1440px) {
    .training-intro p {
        max-width: 100ch;
    }
    .content-multi .multi-container .multi-item {
        min-width: 350px;
    }
}
@media only screen and (min-width: 1700px) {
    .content-multi .multi-container .multi-item {
        min-width: 450px;
    }
}

/* ==========================================================================
   Word scramble styles
   ========================================================================== */

/* WORD SCRAMBLE STYLES */
.fillblank-modal p {
    font-weight: 700;
    font-size: clamp(18px, 1.8vw, 24px);
}
.word-scrambles {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.word-scrambles input {
    width: 34px;
    height: 48px;
    text-transform: uppercase;
    border-radius: 8px;
    padding: 0;
    background: linear-gradient(180deg, #FFFFFF99 0%, #EEEEEE99 100%);
    box-shadow: 0 3.053px 3.053px 0 rgba(0, 0, 0, 0.25) inset;
    color: var(--Black);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 64px);
    caret-color: transparent;
    text-align: center;
    border: transparent;
}
.word-scrambles input:focus {
    background: linear-gradient(180deg, #FFFFFF 0%, #EEEEEE 100%);
    border: none!important;
}
.word-scrambles input.success-color {
    background: linear-gradient(180deg, #FFFFFF 0%, #EEEEEE 100%);
    border: none!important;
}
.word-scramble {
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.scramble-form {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center; 
    margin: 30px auto 30px auto;
}
.scramble-letters {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 0.4em;
}
@media only screen and (min-width: 400px) {
    .word-scrambles input {
        width: 40px;
        height: 60px;
        border-radius: 12px;
    }
@media only screen and (min-width: 992px) {
    .word-scrambles input {
        width: 80px;
        height: 120px;
        border-radius: 16px;
    }
    .scramble-letters {
        gap: 0.8em;
    }
}
/* ==========================================================================
   Crossword styles
   ========================================================================== */
.GameContainer {
  position: relative;
  width: 100%;
  height: 100%;
}
.grid-container,
.clues-container {
  padding-bottom: 20px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.clues-container {
    display: flex;
    text-align: left;
    flex-flow: column;
    gap: 28px;
    padding: 28px;
}
.clues-container h3 {
    margin-bottom: 16px;
    font-size: clamp(18px, 1.5vw, 24px);
}
.grid-container {
  display: flex;
  justify-content: center;
  width: fit-content;
  align-items: center;
  padding-bottom: 0;
  border-radius: 8px;
  margin: auto;
}
.grid {
  padding: 20px;
  border: none;
}
.grid-cell,
.grid-cell input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  margin: 2px;
  padding: 0;
  aspect-ratio: 1/1;
  min-width: 0;
  min-height: 0;
  max-width: 60px;
  max-height: 60px;
}
.content-crossword input[type="text"] {
  padding: 0;
  margin: 0;
  height: 100%;
  font-size: inherit;
}
.grid-cell input {
  outline: none;
}
.grid-cell.blank {
  border: 0.5px solid rgba(0, 22, 105, 0.05);
}
.grid-cell:has(input:focus) {
  z-index: 2;
}
.grid-cell input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
}
.grid-cell input.active-word:not(.correct) {
    background-color: rgba(255, 255, 255, 0.2);
    border: 0.5px solid var(--White);
    outline: 0.5px solid var(--White);
}
.grid-cell.letter input.active-word:focus {
    background-color: var(--White);
}
.grid-cell.letter input.correct {
    pointer-events: none;
    user-select: none;
    z-index: 1;
    color: var(--Black);
    background-color: var(--White);
}
.grid-cell.letter input.correct:focus {
    background-color: var(--White);
}
.grid-cell.letter::after {
    content: attr(data-number);
    position: absolute;
    top: -4px;
    left: 4px;
    font-size: clamp(8px, 1vw, 14px);
    z-index: 1;
    pointer-events: none;
    font-weight: 700;
    color: var(--Black);
}
.grid-cell.letter input {
  caret-color: transparent;
  font-size: clamp(18px, 2.5vw, 36px);
  background: linear-gradient(180deg, #FFFFFF99 0%, #EEEEEE99 100%);
  color: var(--CCBlue);
  font-weight: 700;
  box-shadow: 0 3.053px 3.053px 0 rgba(0, 0, 0, 0.25) inset;
}
.grid-cell.letter input::selection {
  background: transparent;
  color: inherit;
}
.clues-container p,
.clue-block {
  min-width: 0;
}
.clue-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.clue-block li {
  display: flex!important;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.clue-block li.correct span.clue-text {
  text-decoration: line-through;
}
.clue-number {
  font-weight: bold;
  margin-right: 0.5rem;
}
.GameContainer ul {
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.GameContainer li {
  display: block;
  width: fit-content;
}
.GameContainer li.highlight {
  background-color: #EEEEEE33;
}
@media (min-width: 600px) {
    .grid-cell.letter::after {
        top: 0px;
        left: 8px;
    }
}
@media (max-width: 768px) {
  .grid-container,
  .grid {
    padding: 10px;
  }
}
@media screen and (min-width: 992px) {
  .grid-container {
    border-radius: 16px;
  }
  .clues-container {
    flex-flow: row;
  }
  .grid-cell,
  .grid-cell input {
    margin: 3px;
  }
}
@media (max-width: 600px) {
    .grid-container,
    .grid {
        padding: 5px;
    }
}
/* ==========================================================================
   Drag Drop styles
   ========================================================================== */
.drag-container {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    justify-content: center;
    margin: 30px 0;
}
.drag-item {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    cursor: grab;
    width: fit-content;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEEEEE 100%);
    box-shadow: 0 3.053px 3.053px 0 rgba(0, 0, 0, 0.25) inset;
    touch-action: none; /* Prevent default touch gestures like scrolling */
    user-select: none;  /* Prevent text selection during dragging */
    -webkit-user-drag: none; /* Disable native drag on iOS Safari */
}
.drag-item.lifted {
    opacity: 0.6;
}
.drag-item.completed {
    background-color: var(--CCBlue);
}
.drag-item p {
    margin: 15px 30px;
    user-select: none;
    font-size: clamp(16px, 1.5vw, 20px);
    color: var(--Black);
    font-weight: 700;
}
.CP-activity-drop {
    display: flex;
    flex-flow: column;
    justify-content: stretch;
    gap: 5px;
    max-width: 1200px;
    margin: 30px auto;
}
.drop-container {
    flex: 1 1 0;
    padding: 10px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 200px;
    flex-flow: column;
    border: 2px solid var(--White);
    border-radius: 8px;
    overflow: hidden;
}
.drop-container h3 {
    padding: 10px 10px 20px 10px;
    user-select: none;
    font-size: clamp(18px, 2.5vw, 24px);
}
.drop-area {
    min-height: 100px;
    width: 100%;
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-flow: row wrap;
    border: 2px solid transparent;
    border-radius: 8px;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    box-sizing: border-box;
}
.dragdrop-container .question p {
    font-weight: 700;
    font-size: clamp(18px, 1.8vw, 24px);
}
@media only screen and (min-width: 568px) {
    .CP-activity-drop {
        gap: 10px;
    }
}
@media only screen and (min-width: 768px) {
    .drop-area {
        min-height: 200px;
    }
    .CP-activity-drop {
        flex-flow: row;
    }
}
@media only screen and (min-width: 992px) {
    .drop-container {
        border-radius: 16px;
    }
}
.drop-area.highlight {
    border-color: var(--Pink2);
    transition: border-color 0.2s ease-in-out;
}
.drop-area .drag-item {
    background: linear-gradient(180deg, #FFFFFF 0%, #EEEEEE 100%);
    box-shadow: 0 3.053px 3.053px 0 rgba(0, 0, 0, 0.25) inset;
    color: var(--White);
}