:root {
    --blue: #025c72;
    --dark-blue: #002231;
    --yellow: #fbc447;
    --violet: #a05eb5;
    --red: #bd2026;
    --gray: #d9dee0;
    --light-blue: #0399a6;
    --light-gray: #dce1e3;
    --lighter-gray: #edf0f1;
    --medium-gray: #dbe0e2;
    --dark-gray: #a6b2b7;
    --gray-shadow: rgba(0, 0, 0, 0.25);
    --gradient: linear-gradient(90deg, rgba(190, 15, 15, 1) 0%, rgba(161, 94, 181, 1) 50%, rgba(0, 150, 164, 1) 94%);
    --default-margin: 2%;
    --default-border-radius: 0.5vw;
    --puzzle-width: 140%;

    --plyr-color-main: #a05eb5;
}

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--violet)
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--light-blue);
}

* {
    font-family: Poppins;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    background: #e8e8e8;
    overflow: hidden;
}

section, form {
    height: 100%;
}

p {
    margin: 0;
}

input[type="text"], input[type="email"] {
    background-color: white;
    text-align: center;
    color: var(--violet);
    border: 0.25vw solid transparent;
    border-radius: var(--default-border-radius);
}

input[type="text"]:focus, input[type="email"]:focus {
    outline: none;
    border-color: var(--violet);
}

input[type="text"]:focus, input[type="email"]:focus {
    outline: none;
    border-color: var(--violet) !important;
}

input[type="text"].error, input[type="email"].error, select.error {
    outline: none;
    border-color: var(--red);
}

select.error, input[type="checkbox"].error {
    outline: none;
    border: 0.2vw solid var(--red);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    background: white;
    border: none;
    border-radius: var(--default-border-radius);
    width: var(--default-margin);
    aspect-ratio: 1 / 1;
    margin-right: 1%;
}

input[type="checkbox"]:checked {
    position: relative;
    background: var(--violet);
}

input[type="checkbox"]:checked:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../../assets/img/check.png") no-repeat;
    background-size: contain;
    width: 80%;
    aspect-ratio: 1 / 1;
}

label {
    font-size: 1.5vw;
    line-height: 1.6vw;
}

input[type="checkbox"], label {
    cursor: pointer;
}

a {
    text-decoration: none;
    color: black;
}

.slide {
    height: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.slide-container {
    padding: 1.5vw;
}

.button {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: bold;
    background: whitead;
    border: 0.15vw solid transparent;
    border-radius: 2vw;
    box-shadow: 0 0 1vw 0.01vw var(--gray-shadow);
    padding: 0.5vw 2.4vw;
}

.button:not([data-target="start"]) {
    background:
            linear-gradient(white 0 0) padding-box,
            var(--gradient) border-box;
}

.button[data-target="start"] {
    padding: 0.3vw 4.2vw 0.3vw 3.5vw;
}

.button[data-target="start"] > span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 27%;
    transform: translateY(-50%);
    background: url("../../assets/img/arrow.png") no-repeat;
    background-size: contain;
    height: 38%;
    aspect-ratio: 1 / 1;
}

.button > span {
    font-size: 1.3vw;
    line-height: 1.3vw;
    background: var(--gradient);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    pointer-events: none;
}

.button.button-continue {
    padding-right: 3vw;
}

.button-continue > span::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14%;
    transform: translateY(-50%);
    background: url("../../assets/img/arrow.png") no-repeat;
    background-size: contain;
    height: 38%;
    aspect-ratio: 1 / 1;
}

.button.button-return {
    padding-left: 3vw;
}

.button-return > span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 19%;
    transform: translateY(-50%) scaleX(-1);
    background: url("../../assets/img/arrow.png") no-repeat;
    background-size: contain;
    height: 38%;
    aspect-ratio: 1 / 1;
}

.button.pulse, #resources-reminder-sidebar.pulse, #click-late-breaking.pulse {
    transform-origin: center;
    animation: 3s linear 0s infinite normal none running pulse2 !important;
    animation-delay: 0.5s !important;
}

.hg-theme-default {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
}

#resources-reminder-sidebar.pulse {
    transform-origin: center;
    animation: 3s linear 0s infinite normal none running pulse3 !important;
    animation-delay: 0.5s !important;
}

.button.bg-red {
    background: var(--red);
    color: white;
    border-color: white;
}

.button-margin {
    margin: var(--default-margin) calc(var(--default-margin) / 2);
}

.button-margin-y {
    margin: var(--default-margin) 0;
}

.button-margin-x {
    margin: 0 calc(var(--default-margin) / 2);
}

.button-close {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 1;
    background: var(--violet);
    font-weight: bold;
    color: white;
    border: none;
    aspect-ratio: 1 / 1;
}

.small-icon-blue-slide {
    z-index: 2;
    width: 7%;
}

.icon-blue-slide {
    z-index: 2;
    width: 9%
}

.icon-separator {
    position: absolute;
    background: var(--gradient);
    width: 80%;
    height: 1%;
}

.advent-gradient {
    background: var(--gradient);
}

.bg-blue {
    background: var(--dark-blue);
}

.bg-light-gray {
    background: #dce1e3;
}

.bg-lighter-gray {
    background: var(--lighter-gray);
}

.title-violet {
    font-size: 2.4vw;
    line-height: 2.5vw;
    font-weight: bold;
    color: var(--violet);
    text-align: center;
    margin: var(--default-margin) 0;
}

.subtitle-yellow {
    font-size: 1.9vw;
    line-height: 1.2vw;
    color: var(--yellow);
    text-align: center;
}

.title-black {
    font-size: 2.1vw;
    line-height: 2.2vw;
    font-weight: bold;
    color: black;
    text-align: center;
}

.subtitle-black {
    font-size: 1.3vw;
    line-height: 1.4vw;
    color: black;
    text-align: center;
    margin: 1% 0;
}

.text-question-white {
    font-size: 1.5vw;
    line-height: 1.7vw;
    color: white;
    text-align: center;
    margin-top: var(--default-margin);
}

.text-violet {
    color: var(--violet);
}

.text-video {
    font-size: 1.2vw;
    line-height: 1.3vw;
    margin-top: 2%;
}

.text-video > button, .text-video > span {
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.text-video > button {
    background: none;
    border: none;
}

.text-late-breaking {
    font-weight: bold;
    font-style: italic;
    color: var(--red);
}

.w-70 {
    width: 70%;
}

.z-10 {
    z-index: 10 !important;
}

.plyr__video-wrapper, .plyr__controls {
    background: transparent !important;
}

#main-container.bg-image-none {
    background-image: none !important;
}

#main-container {
    position: absolute;
    margin: auto;
    inset: 0;
    background-size: 100%;
    max-width: 3840px;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    box-shadow: 0 0 19px 2px var(--gray-shadow);
    overflow: hidden;
}

#main-container.corners-only {
    background-image: url("../../assets/img/corners/corners-only.png") !important;
}

#main-container.corners-puzzle {
    background-image: url("../../assets/img/corners/corners-puzzle.png") !important;
}

#main-container.corners-document {
    background-image: url("../../assets/img/corners/corners-document.png") !important;
}

#main-container.corners-magnifying-glass {
    background-image: url("../../assets/img/corners/corners-magnifying-glass.png") !important;
}

#main-container.corners-exclamation-point {
    background-image: url("../../assets/img/corners/corners-exclamation-point.png") !important;
}

#main-container.corners-question-mark {
    background-image: url("../../assets/img/corners/corners-question-mark.png") !important;
}

#main-container.corners-x {
    background-image: url("../../assets/img/corners/corners-x.png") !important;
}

#main-container.corners-cup {
    background-image: url("../../assets/img/corners/corners-cup.png") !important;
}

#references {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 0.5vw;
}

#references > p:first-child {
    font-size: 0.7vw;
    line-height: 0.8vw;
    margin-bottom: 1%;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

@-webkit-keyframes pulse2 {
    0% {
        -webkit-transform: scale3d(1.0, 1.0, 1.0);
        -webkit-animation-timing-function: ease-in-out;
    }

    5% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15);
        -webkit-animation-timing-function: ease-in-out;
    }

    10% {
        -webkit-transform: scale3d(1.0, 1.0, 1.0);
        -webkit-animation-timing-function: ease-in-out;
    }
}

@-webkit-keyframes pulse3 {
    0% {
        -webkit-transform: scale3d(1.0, 1.0, 1.0) translate(-112%, -50%);
        -webkit-animation-timing-function: ease-in-out;
    }

    5% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15) translate(-112%, -50%);
        -webkit-animation-timing-function: ease-in-out;
    }

    10% {
        -webkit-transform: scale3d(1.0, 1.0, 1.0) translate(-112%, -50%);
        -webkit-animation-timing-function: ease-in-out;
    }
}

/* START */

#section-start {
    background: url("../../assets/img/start-img.jpg") top center;
    background-size: 120%;
}

#white-filter-start {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 0;
}

#left-container-start {
    border-top-right-radius: 5vw;
    border-bottom-right-radius: 5vw;
}

#top-inner-container-start {
    height: 89%;
}

#bottom-inner-container-start > p {
    font-size: 0.6vw;
    line-height: 0.8vw;
}

#title-start {
    font-size: 3.5vw;
    line-height: 4vw;
    font-weight: bold;
}

#subtitle-start {
    font-size: 1.6vw;
    line-height: 2.1vw;
    margin: 5% 0;
}

#leaderboard-start {
    margin-top: 5%;
}

#leaderboard-start .container-leaderboard {
    height: 83%;
}

/* RANKING - SPECIALTY */

.initials-input {
    width: 6%;
    aspect-ratio: 1 / 1;
    font-size: 3.5vw;
    line-height: 4.3vw;
    caret-color: transparent;
    margin: 0 1.5%;
}

.dot {
    width: 1.2%;
    aspect-ratio: 1 / 1;
    background-color: #0098a5;
    border-radius: 50%;
    margin: 0 0.5%;
}

.dot.active {
    background-color: #99d5db;
}

#specialty-select {
    position: relative;
    appearance: none;
    background-image: url("../../assets/img/arrow-down.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    font-size: 1.3vw;
    line-height: 1.8vw;
    border-radius: var(--default-border-radius);
    height: 2.2vw;
    padding: 0 8% 0 0.8%;
    margin-bottom: var(--default-margin);
}

#specialty-select:focus {
    outline: none;
}

#check-text-specialty {
    font-size: 1.1vw;
    line-height: 1.2vw;
    color: white;
    margin-bottom: 1%;
}

#pediatric-label-specialty {
    margin-right: 5%;
}

#section-email label {
    font-size: 1.1vw;
    line-height: 1.2vw;
}

#email-input {
    width: 35%;
    font-size: 1.3vw;
    line-height: 1.7vw;
    padding: 0.3%;
    margin-bottom: var(--default-margin);
}

/* MEET */

.info-box-meet {
    position: relative;
    background: rgba(160, 94, 181, 0.1);
    border-radius: var(--default-border-radius);
    width: 65%;
    height: 35%;
    padding: 5%;
}

.info-box-right-meet {
    margin-right: -18.5%;
}

.info-box-left-meet {
}

.info-box-title-meet {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    font-size: 1vw;
    line-height: 1.1vw;
    font-weight: bold;
    color: white;
    background: var(--violet);
    padding: 1.5% 10%;
}

.info-box-icon-meet {
    position: absolute;
    left: 0;
    transform: translateX(-50%);
    background: white;
    border-radius: var(--default-border-radius);
    box-shadow: 0.2vw 0.2vw 0.5vw 0.01vw var(--gray-shadow);
    width: 35%;
    aspect-ratio: 1 / 1;
}

.info-box-icon-meet > img {
    width: 60%;
    height: auto;
}

.info-box-text-meet {
    font-size: 1.1vw;
    line-height: 1.2vw;
    color: black;
    margin-top: 5%;
    margin-left: 25%;
}

#container-meet {
    padding: 0 3%;
}

#box-meet {
    border-radius: var(--default-border-radius);
    box-shadow: 0.6vw 0.6vw 1.5vw 0.01vw var(--gray-shadow);
    width: 100%;
    margin-top: -1.4vw;
}

#box-meet > div {
    margin-top: 3%;
}

#meet-tim {
    font-size: 1.5vw;
    line-height: 2.3vw;
    font-weight: bold;
    color: white;
    padding: 0 3.5%;
    z-index: 1;
}

#central-container-meet {
    width: 28%;
}

#central-container-meet > span {
    font-size: 1.3vw;
    line-height: 1.4vw;
    font-weight: bold;
    margin: 2% 0;
}

/* DISEASE DOMAINS QUESTIONS */

#buttons-disease-domains-question {
    gap: 2%;
}

/* DISEASE DOMAINS */

.puzzle > div {
    position: relative;
    width: var(--puzzle-width);
}

.puzzle img {
    width: 100%;
}

.puzzle p {
    position: absolute;
    font-size: 0.9vw;
    line-height: 1vw;
    font-weight: bold;
    color: white;
    text-align: center;
    width: var(--puzzle-width);
}

.puzzle-container {
    border-radius: 1.5vw;
    box-shadow: 0.6vw 0.6vw 1.5vw 0.01vw var(--gray-shadow);
    width: 21%;
    aspect-ratio: 1 / 1;
}

.assessment-order-text {
    font-size: 1.2vw;
    line-height: 1.3vw;
    font-weight: bold;
    color: black;
    text-align: center;
    margin-top: 1%;
}

.percentage {
    font-size: 2.1vw;
    line-height: 2.2vw;
    font-weight: bold;
}

.arrow {
    width: 20%;
    height: auto;
}

.slider-order-disease-domains {
    position: relative;
    background: linear-gradient(90deg, rgba(166, 178, 184, 1) 0%, rgb(238, 239, 240) 93%);
    height: 3.5%;
    margin-top: 2%;
}

.slider-order-disease-domains > div {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    font-size: 1.4vw;
    line-height: 1.5vw;
    font-weight: bold;
    border: 0.1vw solid #a0a0a0;
    width: 4.5%;
    aspect-ratio: 1 / 1;
}

.slider-order-disease-domains > div:first-child {
    left: 10.5%;
}

.slider-order-disease-domains > div:nth-child(2) {
    left: 37.1%;
}

.slider-order-disease-domains > div:nth-child(3) {
    left: 63.7%;
}

.slider-order-disease-domains > div:nth-child(4) {
    left: 90.3%;
}

#puzzle-container-disease-domains .puzzle[data-target="blue"] p {
    rotate: -13deg;
}

#puzzle-container-disease-domains .puzzle[data-target="violet"] p {
    rotate: 5deg;
}

#puzzle-container-disease-domains .puzzle[data-target="red"] p {
    rotate: 17deg;
}

#puzzle-container-disease-domains .puzzle[data-target="light-blue"] p {
    rotate: -10.5deg;
}

#puzzle-container-disease-domains {
    margin-top: 4%;
    margin-left: -5%;
}

#droppable-container-disease-domains {
    margin-top: -5%;
}

#droppable-container-disease-domains .puzzle > div, #puzzle-container-disease-domains-prioritized .puzzle > div, #puzzle-container-late-breaking .puzzle > div {
    left: -20%;
}

#puzzle-container-disease-domains .puzzle {
    width: 20%;
}

#puzzle-percentage-disease-domains {
    position: absolute;
    top: 13%;
}

#puzzle-percentage-disease-domains > div > div {
    width: 21%;
}

#puzzle-percentage-disease-domains p {
    font-size: 1.2vw;
    line-height: 1.3vw;
    color: black;
    text-align: center;
    margin-bottom: 7%;
}

#late-breaking-container-disease-domains {
    position: relative;
    border-radius: calc(var(--default-border-radius) * 2);
    box-shadow: 0.2vw 0.2vw 0.5vw 0.01vw var(--gray-shadow);
    padding: 0.8% 0.8% 0.8% 3.8%;
    margin-bottom: 1%;
}

#late-breaking-container-disease-domains > img {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -5%);
    height: 110%;
    aspect-ratio: 1 / 1;
}

#title-late-breaking-disease-domains {
    font-size: 1.4vw;
    line-height: 1.5vw;
}

#text-late-breaking-disease-domains {
    font-size: 0.9vw;
    line-height: 1vw;
}

/* DISEASE DOMAINS PRIORITIZED */

#puzzle-container-disease-domains-prioritized {
    margin-top: 3%;
}

/* LATE BREAKING */

#container-late-breaking {
    position: relative;
    border-radius: calc(var(--default-border-radius) * 2);
    padding: 1.5% 3% 1.5% 7%;
}

#container-late-breaking > img {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    height: 50%;
    aspect-ratio: 1 / 1;
}

#container-late-breaking .text-video {
    font-size: 1.3vw;
    line-height: 1.4vw;
    margin: 0;
}

#text-late-breaking {
    font-size: 1.2vw;
    line-height: 1.5vw;
    margin: 2% 0;
}

#section-late-breaking .text-video {
    font-size: 1.2vw;
    line-height: 1.5vw;
}

#title-late-breaking {
    font-size: 2.4vw;
    line-height: 2.5vw;
}

#puzzle-container-late-breaking {
    border-radius: calc(var(--default-border-radius) * 2);
    background: white;
    width: 40%;
    padding: 1% 3%;
    margin-top: 2%;
}

#puzzle-container-late-breaking .puzzle-container {
    border-radius: 0.5vw;
}

#puzzle-container-late-breaking .slider-order-disease-domains {
    height: 7%;
}

#puzzle-container-late-breaking p, #puzzle-container-late-breaking span {
    font-size: 0.7vw;
    line-height: 0.8vw;
}

#puzzle-container-late-breaking .puzzle p {
    font-size: 0.5vw !important;
    line-height: 0.6vw !important;
}

/* QUESTION */

#subtext-question {
    font-size: 1.3vw;
    line-height: 1.4vw;
    font-style: italic;
    color: white;
    margin: 4% 0;
}

/* TRY AGAIN */

#section-try-again .text-question-white {
    margin-bottom: 2%;
}

#icon-try-again {
    width: 23%;
    height: auto;
    margin-right: 5%;
}

#separator-try-again {
    background: var(--gradient);
    width: 35%;
    height: 0.1%;
    margin-top: 2%;
}

/* QUESTIONS (ALL) */

.puzzle-container-question {
    position: relative;
    width: 15%;
}

.puzzle-container-question > img {
    position: absolute;
    width: var(--puzzle-width);
}

.puzzle-container-question > p {
    position: absolute;
    font-size: 1vw;
    line-height: 1.1vw;
    font-weight: bold;
    color: white;
    text-align: center;
    width: var(--puzzle-width);
}

.question-text-container {
    margin-top: 5%;
    margin-left: 8%;
}

.question-text-container > p {
    font-size: 1.7vw;
    line-height: 2.1vw;
    font-weight: bold;
}

.question-text-container > p.info {
    font-size: 1.1vw;
    line-height: 1.2vw;
    font-weight: normal;
    margin: 2% 0;
}

.question-text-container > p.instructions {
    font-size: 1.5vw;
    line-height: 1.6vw;
    font-weight: bold;
    font-style: italic;
}

.question-text-container > div {
    margin-top: 8%;
}

.question-text-container > div > button:nth-child(1) {
    margin-right: 5%;
}

.answer-select {
    cursor: pointer;
    pointer-events: all;
}

.answer-select .button {
    padding: 0.8vw 1.6vw;
    pointer-events: none;
}

.answer-select.selected:not(.answer-4-select) {
    border-color: white;
    background: var(--gradient);
}

.button.selected > span {
    color: white;
    -webkit-background-clip: content;
}

.answer-select.error:not(.answer-4-select) {
    border-color: white;
    background: var(--red);
}

.button.error > span {
    color: white;
    -webkit-background-clip: content;
}

.answer-select .answer-text {
    font-size: 1.5vw;
    line-height: 1.6vw;
    font-weight: bold;
    pointer-events: none;
}

#continue-btn-question-1, #continue-btn-question-2 {
    margin-top: 20%;
}

#section-question-1 .question-text-container, #section-question-2 .question-text-container {
    margin-top: 17%;
}

/* QUESTION 3 */

#section-question-3 .box-header {
    margin-top: 5%;
}

#section-question-3 .question-text-container {
    margin-top: 0%;
}

.box-question-3-drag {
    border-radius: calc(var(--default-border-radius) * 2);
    border-color: var(--light-blue);
    border: 0.2vw solid var(--light-blue);
    margin: 3% 0%;
    padding: 1% 0%;
}

#img-erefs {
    width: 50%;
}

#img-arrow-ring-blue {
    position: absolute;
    top: 28.8%;
    left: 26.8%;
    width: 8%;
}

#img-arrow-furrow-blue {
    position: absolute;
    top: 62.7%;
    left: 26.5%;
    width: 12.1%;
}

#img-arrow-stricture-blue {
    position: absolute;
    top: 11.6%;
    left: 55.3%;
    width: 16.9%;
}

#img-arrow-edema-blue {
    position: absolute;
    top: 47.2%;
    left: 49.5%;
    width: 24.7%;
}

#img-arrow-exudate-blue {
    position: absolute;
    top: 73.2%;
    left: 58.8%;
    width: 13.3%;
}

.question-3-element {
    position: absolute;
    background-color: var(--light-blue);
    border-radius: calc(var(--default-border-radius) * 2);
    color: white;
    font-size: 0.9vw;
    line-height: 1vw;
    font-weight: bold;
    width: 20%;
    z-index: 10;
    border: none;
    padding: 0.5% 0;
}

.question-3-element.gray {
    background-color: var(--medium-gray);
}

.question-3-element.dropped {
    color: var(--light-blue);
    background-color: #fff;
    border: 0.1vw solid var(--light-blue);
}

.question-3-element.dropped.error {
    color: #fff;
    background-color: var(--red);
    border: none;
}

#section-question-3 .box-drag {
    position: relative;
}

.question-3-ring {
    top: 24%;
    left: 7%;
}

.question-3-furrow {
    top: 59%;
    left: 7%;
}

.question-3-stricture {
    top: 6%;
    left: 72%;
}

.question-3-edema {
    top: 42%;
    left: 74%;
}

.question-3-exudate {
    top: 78%;
    left: 72%;
}

.question-3-droppable {
    position: relative;
    background-color: var(--light-gray);
    width: 95%;
    height: 80%;
    border-radius: calc(var(--default-border-radius) * 2);
}

.question-3-droppable::after {
    content: '';
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 0.9vw;
    line-height: 1vw;
    font-weight: bold;
    background: var(--light-blue);
    border-radius: calc(var(--default-border-radius) * 2);
    height: 15%;
    width: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0%;
}

#question-3-inflammation::after {
    content: 'Inflammation';
}

#question-3-fibrosis::after {
    content: 'Fibrosis';
}

/* QUESTION 4 */

#section-question-4 .box-header {
    margin-top: 9%;
    margin-bottom: 3%;
}

#section-question-4 .question-text-container {
    margin-top: 0%;
}

#buttons-container-question-4 .button {
    border-color: var(--light-blue);
    background: white;
    width: 9.5%;
    padding: 1.5% 0;
}

#buttons-container-question-4 .button > span {
    color: var(--light-blue);
    -webkit-background-clip: content;
    text-align: center;
    width: 100%;
}

#buttons-container-question-4 .selected .button {
    color: white;
    background: var(--light-blue);
    border-color: white;
}

#buttons-container-question-4 .selected .button > span {
    color: white;
}

#buttons-container-question-4 .error .button {
    color: white;
    background: var(--red);
    border-color: white;
}

#buttons-container-question-4 .error .button > span {
    color: white;
}

/* ANSWERS (ALL) */

.puzzle-container-answer {
    position: relative;
    background: white;
    border-radius: calc(var(--default-border-radius) * 2);
    box-shadow: 0.2vw 0.2vw 0.5vw 0.01vw var(--gray-shadow);
    width: 12%;
    aspect-ratio: 1 / 1;
    margin-right: 3%;
}

.puzzle-container-answer > img, .puzzle-container-answer > p {
    position: absolute;
    transform: translateX(9%);
    width: 110%;
}

.puzzle-container-answer > p {
    font-size: 0.9vw;
    line-height: 1vw;
    color: white;
    text-align: center;
}

.container-answer-title {
    margin-top: 10%;
}

.container-answer-info {
    position: relative;
    border-radius: calc(var(--default-border-radius) * 2);
    padding: 2%;
    margin-top: 4%;
    width: 63%;
}

#section-besttime .container-answer-info {
    margin-bottom: 7%;
}

.container-answer-info .text-answer {
    font-size: 1.1vw;
    line-height: 1.2vw;
    font-weight: bold;
}

.container-answer-info .text-answer-reference {
    font-size: 0.9vw;
    line-height: 1vw;
    margin: 1% 0%;
}

.correct-icon {
    width: 10%;
    aspect-ratio: 1 / 1;
    margin-right: 3%;
}

.answer-separator {
    background: var(--gradient);
    width: 100%;
    height: 1%;
    margin: 2% 0;
}

/* ANSWER 2 */
#section-answer-2 .puzzle-container-answer > img,
#section-answer-2 .puzzle-container-answer > p {
    position: absolute;
    transform: translateX(-7%);
    width: 110%;
}

/* ANSWER 3 */
#section-answer-3 .puzzle-container-answer > img {
    position: absolute;
    transform: translateY(-8%);
    width: 110%;
}

#section-answer-3 .puzzle-container-answer > p {
    position: absolute;
    transform: translate(-5%, -21%);
    width: 110%;
}


/* ANSWER 4 */
#section-answer-4 .puzzle-container-answer > img,
#section-answer-4 .puzzle-container-answer > p {
    position: absolute;
    transform: translate(-2%, 11%);
    width: 110%;
}

#section-answer-4 .puzzle-container-answer > p {
    transform: translateY(50%);
}

/* BEST TIME */

#separator-besttime {
    background: var(--gradient);
    width: 100%;
    height: 1%;
    margin: 4% 0;
}

/* PUZZLE PATIENT INTRO */

#continue-btn-puzzlepatient-intro {
    margin: 4% 0%;
}

/* PUZZLE PATIENT */

.puzzle-patient-container {
    border-radius: 1.5vw;
    box-shadow: 0.6vw 0.6vw 1.5vw 0.01vw var(--gray-shadow);
    width: 21%;
    aspect-ratio: 1 / 1;
    margin: 2%;
}

.puzzle-container-card {
    position: relative;
    width: 45%;
    aspect-ratio: 1 / 1;
}

.puzzle-container-card > img, .puzzle-container-card > p {
    position: absolute;
    width: 110%;
}

.puzzle-container-card > p {
    font-size: 0.7vw;
    line-height: 0.8vw;
    font-weight: bold;
    color: white;
    text-align: center;
}

.puzzle-container-card > p > span {
    font-size: 0.5vw;
    line-height: 0.6vw;
    font-weight: bold;
    color: white;
    text-align: center;
}

.puzzlepatient-dragdropcontainer {
    margin: 4% 0%;
}

.card-red-container {
    width: 25%;
    position: absolute;
    top: 27%;
    left: 18%;
    z-index: 2;
}

.card-blue-container {
    width: 25%;
    position: absolute;
    top: 39%;
    left: 11%;
}

.card-light-blue-container {
    width: 25%;
    position: absolute;
    top: 51%;
    left: 18%;
    z-index: 2;
}

.card-violet-container {
    width: 25%;
    position: absolute;
    top: 63%;
    left: 11%;
}

.card-red .puzzle-container-card > p {
    transform: translateY(-30%);
}

.card-blue .puzzle-container-card > p {
    transform: translateY(7%);
}

/* PUZZLE PATIENT ANIMATION */

.puzzle-patient-animation-container {
    border-radius: 1.5vw;
    box-shadow: 0.6vw 0.6vw 1.5vw 0.01vw var(--gray-shadow);
    /*width: 30%;*/
    /*height: 40%;*/
    aspect-ratio: 1 / 1;
    margin: 2%;
    position: relative;
}

.card-red-animation-container {
    position: absolute;
    top: 0%;
    right: 0%;
    width: 50%;
}

.card-blue-animation-container {
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 50%;
}

.card-light-blue-animation-container {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 50%;
}

.card-violet-animation-container {
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 50%;
}

.card-red-animation,
.card-blue-animation,
.card-light-blue-animation,
.card-violet-animation {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.img-patient-animation {
    height: 71%;
    display: none;
}

.text-1, .text-2 {
    font-size: 0.8vw !important;
    line-height: 0.9vw !important;
}

.card-light-blue-animation .text-1, .card-light-blue-animation .text-2 {
    transform: translateX(-3%);
}

.text-1 > span {
    font-size: 0.6vw !important;
    line-height: 0.7vw !important;
}

/* PATIENT VIDEO */
.patient-container-video {
    border-radius: 1.5vw;
    background-color: transparent;
    box-shadow: 0.6vw 0.6vw 1.5vw 0.01vw var(--gray-shadow);
    margin: 2%;
    position: relative;
    width: 48%;
}

#video-patient-video {
    border-radius: calc(var(--default-border-radius) * 3);
    width: 100%;
    aspect-ratio: 16 / 9;
}

#section-patient-video .plyr {
    border-radius: 1.5vw;
}

/* RESOURCES & REFERENCES */

.title-resources-references {
    border-top-left-radius: var(--default-border-radius);
    border-top-right-radius: var(--default-border-radius);
    cursor: pointer;
}

.title-resources-references > p {
    font-size: 1.5vw;
    line-height: 1.6vw;
    font-weight: bold;
    padding: 2% 0;
}

.references-column > div, .references-column > a {
    height: 20%;
}

.qrcode {
    height: 85%;
    object-fit: contain;
}

.qrcode-text {
    font-size: 0.7vw;
    line-height: 0.8vw;
    text-align: center;
    width: 14%;
    height: 6%;
}

.icon-resources {
    box-shadow: 0.2vw 0.2vw 0.5vw 0.01vw var(--gray-shadow);
    border-radius: calc(var(--default-border-radius) * 1.3);
    height: 80%;
    margin-right: 3%;
}

.title-resources {
    font-size: 1.2vw;
    line-height: 1.3vw;
}

.subtitle-resources {
    font-size: 1vw;
    line-height: 1.1vw;
    margin-top: 0.5%;
}

#container-resources-references {
    box-shadow: 0.6vw 0.6vw 1.5vw 0.01vw var(--gray-shadow);
    border-radius: var(--default-border-radius);
    height: 77%;
}

#container-resources-references > div:first-child {
    border-bottom: 0.2vw solid var(--violet);
}

#content-resources-references {
    overflow: hidden;
    padding: 2% 3%;
}

#content-resources-references li {
    font-size: 1.1vw;
    line-height: 1.2vw;
    padding-left: 1%;
    margin-bottom: 1%;
}

#resources-resources-references > div > div:nth-child(2) {
    height: 94%;
}

#qrcode-container-references-resources {
    width: 8%;
    margin: 0 3%;
}

#separator-resources-references {
    border: 0.05vw dashed var(--dark-gray);
    margin-right: 3%;
}

#link-container-references-resources {
    width: 86%;
}

/* LEADERBOARD */

.player-coin {
    width: 13%;
    aspect-ratio: 1 / 1;
}

.initials-leaderboard {
    background: rgba(125, 37, 170, 0.1);
    border-radius: var(--default-border-radius);
    width: 13%;
    aspect-ratio: 1 / 1;
}

.initials-leaderboard > p {
    font-size: 2.1vw !important;
    line-height: 2.2vw !important;
}

.second-initials-leaderboard {
    margin: 0 -3%;
}

.time-leaderboard {
    background: rgba(125, 37, 170, 0.1);
    width: 15%;
    padding: 2% 0;
}

.time-leaderboard > p {
    font-size: 1vw !important;
    line-height: 1.1vw !important;
    font-weight: bold;
}

.margin-row-leaderboard {
    margin-top: 4%;
}

.bg-gold {
    background: rgba(247, 186, 0, 0.25) !important;
}

.bg-silver {
    background: #ebebed !important;
}

.bg-bronze {
    background: rgba(218, 120, 48, 0.3) !important;
}

.container-leaderboard {
    background: white;
    box-shadow: 0.6vw 0.6vw 1.5vw 0.01vw var(--gray-shadow);
    border-radius: var(--default-border-radius);
    overflow: hidden;
    width: 40%;
    height: 80%;
}

.title-leaderboard {
    font-size: 2.2vw;
    line-height: 2.3vw;
    font-weight: bold;
    color: white;
    text-align: center;
    border-top-left-radius: var(--default-border-radius);
    border-top-right-radius: var(--default-border-radius);
    padding: 3% 0;
}

.players-container-leaderboard {
    overflow: hidden;
    padding: 0 5%;
    margin: 4% 0;
}

.players-container-leaderboard p {
    font-size: 1.7vw;
    line-height: 1.8vw;
    font-weight: bold;
}

.position {
    text-align: end;
    width: 8%;
}

/* STOPWATCH */

#stopwatch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 60%);
    background: #dce0e1;
    box-shadow: 0.2vw 0.2vw 0.5vw 0.01vw var(--gray-shadow);
    width: 45%;
    height: 8%;
}

#stopwatch > div {
    position: relative;
    padding: 0 4%;
}

#best-time-stopwatch {
    position: absolute;
    top: 0;
    right: 5%;
    transform: translateY(-100%);
    background: var(--violet);
    box-shadow: 0.2vw 0 0.5vw 0.01vw var(--gray-shadow);
    width: 30%;
    height: 60%;
}

#best-time-stopwatch > p {
    font-size: 1vw;
    line-height: 1.1vw;
    color: white;
    text-align: center;
    margin: 0;
}

#icon-stopwatch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18%;
    height: auto;
}

#current-time-stopwatch, #puzzle-stopwatch {
    width: 35%;
    height: 100%;
}

#puzzle-stopwatch > img {
    width: auto;
    height: 80%;
}

#current-time-stopwatch > p {
    font-size: 2.1vw;
    line-height: 2.2vw;
    font-weight: bold;
    text-align: center;
    margin: 0;
}

/* SIDEBAR */

.separator-sidebar {
    position: relative;
    background: white;
    width: 55%;
    padding: 0.5% 0;
}

.icon-container-sidebar {
    cursor: pointer;
    padding: 17%;
}

#sidebar {
    position: absolute;
    top: 0;
    right: -1.5vw;
    z-index: 1;
    border-top-left-radius: calc(var(--default-border-radius) * 2);
    border-bottom-left-radius: calc(var(--default-border-radius) * 2);
    background: var(--dark-blue);
    box-shadow: -0.2vw 0.2vw 1vw 0.01vw var(--gray-shadow);
    width: 7.5%;
}

#sidebar img {
    width: 100%;
    aspect-ratio: 1 / 1;
}

#sidebar p {
    font-size: 0.65vw;
    line-height: 0.75vw;
    font-weight: bold;
    color: white;
    text-align: center;
    margin-top: 10%;
}

#resources-reminder-sidebar {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-112%, -50%);
    background: var(--gray);
    border-radius: calc(var(--default-border-radius) * 2);
    width: 190%;
    padding: 12% 0;
}

#resources-reminder-sidebar p {
    font-size: 0.7vw;
    line-height: 0.8vw;
    font-weight: normal;
    color: black;
    margin: 0;
}

#resources-reminder-sidebar > div::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.7vw;
    transform: translateY(-50%);
    border-width: 0.6vw 0.6vw 0.6vw 1.2vw;
    border-style: solid;
    border-color: transparent transparent transparent var(--gray);
}

#close-btn-resources-reminder-sidebar {
    font-size: 1vw;
    line-height: 1vw;
    width: 15%;
}

/* VIDEO MODAL */

.modal {
    background: rgba(255, 255, 255, 0.85);
}

.modal-dialog {
    max-width: 65%;
    width: 65%;
}

.modal-content {
    position: relative;
    background: transparent;
    width: 100%;
    aspect-ratio: 16 / 9;
}

#close-btn-video-modal {
    font-size: 1.6vw;
    line-height: 1.6vw;
    width: 5%;
}

#video-container > video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--default-border-radius);
}

.play-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.play-icon > img {
    width: 10%;
    height: auto;
}

#video-modal .plyr {
    border-radius: var(--default-border-radius);
}

/* LOADER */

.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid;
    border-color: rgba(190, 15, 15, 1) transparent rgba(0, 152, 165, 1) transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

#loader > div {
    position: absolute;
    width: 1366px;
    height: 1024px;
    z-index: 4;
}

#rotate-device {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99999;
}

#rotate-device p {
    color: #fff;
    font-size: 12px;
    text-align: center;
    display: block;
    position: relative;
    top: 32%;
}

#rotate-device img {
    display: block;
    position: relative;
    width: 30%;
    height: auto;
    top: 25%;
    left: 35%;
    filter: invert(1);
    animation: rotate90deg 2s infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate90deg {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(90deg);
    }
}