@font-face {
    font-family: 'Viljar Handwriting';
    src: url("./Fonts/ViljarHandwriting_No_Cap.cc909a16c548.otf");
    font-weight: 400;
}

:root {
    --color-black: #000000;
    --color-grey: #8a8a8a;

    --regular-max-width: 60rem;
    --medium-max-width: 40rem;
    --small-max-width: 25rem;

    --score-input-container-size: 11rem;
    --score-input-field-size: 10rem;

    --line-element-height: 1rem;
    --line-element-edge-width: 1rem;

    --seperator-line-element-width: 0.5rem;
    --seperator-line-element-edge-height: 0.5rem;

    --popup-padding: 2rem;
    /* double the popup padding */
    --popup-substract-width: 4rem;

    --handwriting: "Viljar Handwriting";
    --regular-font: Arial, Helvetica, sans-serif;
}

main {
    padding-bottom: 1rem;
}

h1 {
    font-size: 6rem;
    line-height: 3rem;
}

h2 {
    font-size: 5rem;
    line-height: 2.5rem;
}

h3 {
    font-size: 4rem;
    line-height: 2rem;
}

h4 {
    font-size: 3rem;
    line-height: 1.5rem;
}

html {
    font-family: var(--handwriting);
    text-transform: lowercase;
}

body {
    font-size: 2rem;
    line-height: 1rem;
}

input {
    font-size: inherit;
    font-family: inherit;
    color: var(--color-grey);
    text-align: center;
}

nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

nav .top-bar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 2rem;
    padding: 0 5rem;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--color-grey);
}

button {
    cursor: pointer;
}

a:visited {
    color: var(--color-grey);
}

.highlighted-text {
    color: var(--color-grey);
}

.centered-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.centered-content {
    margin: 5rem auto 1rem auto;
    width: max-content;
    text-align: center;
}

/* styling login page */
.account-container {
    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-left: auto;
    margin-right: auto;
    margin-top: 5rem;
    width: max-content;
    max-width: 30rem;
    gap: 1rem;
    text-align: center;
}

.account-container form p {
    text-align: center;
    font-size: 2rem;
    line-height: 1rem;
}

.account-container li {
    font-size: 2rem;
    line-height: 1rem;
    margin-left: 1.5rem;
    text-align: left;
    list-style: conic-gradient;
}

.account-container .custom-line-input-container {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.form-input-wrapper {
    margin: 1rem 0;
}

.errorlist.nonfield {
    margin: 1rem 0;
}

/* styling for the set your name page */
.container.set-your-name {
    font-size: 4rem;
    line-height: 2rem;
}

#set-your-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: calc(100vh - 7rem);
}

.header-form-bar {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.text-form-bar {
    padding: 1rem;
    max-width: var(--regular-max-width);
    text-align: center;
}

.graphic-form-bar {
    padding: 1rem;
    max-width: var(--medium-max-width);
}

.graphic-form-bar img {
    height: 20rem;
}

.set-your-name-button {
    position: fixed;
    bottom: 3rem;
    right: 3rem;

    height: 10rem;
    width: 10rem;

    background: url("./Knoppen/Verder_Knop.d0149e642f2b.svg") no-repeat;
    background-size: cover;
    background-position: center;
    border: unset;
}

.set-your-name-button:hover {
    transform: scale(1.2);
}

.custom-line-input-container input {
    border: unset;
    width: 100%;
}

.custom-line-input-container {
    position: relative;
}

/* styling for explanation page */
.container.explanation-game {
    font-size: 3rem;
    line-height: 1.5rem;
    text-align: center;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: var(--regular-max-width);
    margin-left: auto;
    margin-right: auto;
}

.container.explanation-game h1 {
    font-size: 6rem;
    line-height: 3rem;
    margin-bottom: 1rem;
}

.button-link {
    display: inline-block;
    padding: 0.5rem;
    position: relative;
    margin: 0 0.5rem;
    min-width: 4rem;
    color: var(--color-black)
}

button.button-link {
    background: transparent;
    font-family: inherit;
    border: unset;
    font-size: inherit;
    padding: 0 1rem;
}

.line-segment {
    position: absolute;
    background-image: url("./Lijnen_en_Hoeken/Lijn_1.4bdc0585d65b.svg");
    height: 0.4375rem;
    left: 1.5rem;
    right: 1.5rem;
}

.corner-segment {
    position: absolute;
    background-image: url("./Lijnen_en_Hoeken/Hoek_Hard.77c833941bc4.svg");
    height: 1.5rem;
    width: 1.5rem;
    background-size: contain;
}

.line-segment.top-line {
    top: -0.1875rem;
}

.line-segment.bottom-line {
    bottom: 0rem;
}

.line-segment.left-line,
.line-segment.right-line {
    background-image: url("./Lijnen_en_Hoeken/Lijn_1_Verticaal.56387d2b030a.svg");
    width: 0.4375rem;
    top: 1.5rem;
    bottom: 1.5rem;
    left: unset;
    right: unset;
    height: auto;
}

.line-segment.left-line {
    left: 0rem;
    transform: rotate(180deg);
}

.line-segment.right-line {
    right: 0rem;
}

.corner-segment.top-left {
    top: 0;
    left: 0;
    transform: rotate(0deg);
}

.corner-segment.top-right {
    top: 0;
    right: 0;
    transform: rotate(90deg);
}

.corner-segment.bottom-left {
    bottom: 0;
    left: 0;
    transform: rotate(270deg);
}

.corner-segment.bottom-right {
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
}

/* styling for set scores */
.container.set-scores {
    font-size: 3rem;
    line-height: 1.5rem;
    text-align: center;

    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: var(--regular-max-width);
    margin-left: auto;
    margin-right: auto;
}

.container.set-scores h1 {
    font-size: 5rem;
}

.container.set-scores form {
    margin-top: 6rem;
}

.score-input-container {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    gap: 6rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 5rem;
    margin-right: 5rem;
}

.score-input-item {
    width: var(--score-input-container-size);
    height: var(--score-input-container-size);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url("./Lijnen_en_Hoeken/Score_Border_Hoek_Rond.13857a4f50c5.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.score-input-item img {
    position: absolute;
    top: -3.6rem;
    width: 6rem;
    height: 6rem;
}

.input-container input {
    width: var(--score-input-field-size);
    height: var(--score-input-field-size);
    font-size: var(--score-input-field-size);
    border: unset;
    background-color: transparent;
}

#actual-submit-button {
    visibility: hidden;
}

#fake-submit-button {
    height: 6rem;
    width: 20rem;
    margin-left: auto;
    margin-right: auto;
    border: unset;
    background-color: transparent;
    display: block;
    position: relative;
}

#fake-submit-button:after {
    content: '';
    background: url("./Knoppen/Klaar_Knop_Basic.272d7e961e29.svg");

    height: 100%;
    width: 100%;

    position: absolute;
    left: 0;
    bottom: 0;

    background-repeat: no-repeat;
    
    background-size: contain;
    background-position: bottom;

    pointer-events: none;
}

#fake-submit-button:before {
    content: '';
    height: 200%;
    width: 100%;

    position: absolute;
    left: 0;
    top: -200%;

    background-repeat: no-repeat;
    
    background-size: contain;
    background-position: bottom;

    pointer-events: none;
}

#fake-submit-button:hover:before {
    background-image: url("./Knoppen/Klaar_Knop_Hover_Kattem.c6b40bd8b189.svg");
}

#fake-submit-button.happy-kattem:before {
    background-image: url("./Knoppen/Klaar_Knop_Klik_Kattem.fbd21cfa35c5.svg");
}

#fake-submit-button.confused-kattem:before {
    background-image: url("./Knoppen/Klaar_Knop_Verward_Kattem.a0b5060f351a.svg");
}

/* splash screen after uploading scores */
.container.score-uploaded {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;

    width: 100%;
    font-size: 6rem;
}

.container.score-uploaded h1 {
    margin-bottom: 6rem;
    line-height: 3rem;
    text-align: center;
}

.kattem-image-container {
    height: 25vw;
    width: 50vw;
    position: relative;
}

.kattem-image-container img {
    object-fit: contain;
    width: 100%;
    height: 100%;


}

.kattem-image-container:after {
    content: '';
}

.kattem-image-container:before {
    content: '';

    background-image: url("./Afbeeldingen/Sparkles_Links_BoekjesPagina.fb2c5e05b2ad.svg");
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;
    top: -4rem;
    left: -6vw;

    width: 25vw;
    height: 100%;
}

.kattem-image-container:after {
    content: '';

    background-image: url("./Afbeeldingen/Sparkles_Rechts_BoekjesPagina.eb3c2dabd3e0.svg");
    background-repeat: no-repeat;
    background-size: contain;


    position: absolute;
    top: 0;
    right: -18vw;

    width: 25vw;
    height: 100%;
}

/* dashboard styling */
.container.dashboard {
    padding: 0 1rem 3rem 1rem;
}

.headerbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 8rem;
    margin: 1rem 0;
}

.headerbar.reviewer a.navigation-tile {
    min-width: 15rem;
}

.headerbar .custom-title-element {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.top-headerbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    margin-bottom: 1rem;
}

.navigation-elements {
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: flex-end;
}

.headerbar:not(.reviewer) .navigation-elements {
    flex-grow: 1;
}

.logo-container {
    display: flex;
    align-items: center;
    height: 100%;
    width: 15rem;
}

.logo-container img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

a.navigation-tile {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 20%;
    min-width: 5rem;
    color: inherit;
}

a.navigation-tile h4 {
    text-align: center;
}

.navigation-tile img {
    height: 80%;
}

.horizontal-line {
    display: flex;
    flex-direction: row;
}

.vertical-seperator-line {
    display: flex;
    flex-direction: column;
    margin: 0 0.5rem;
}

.vertical-seperator-line .top-border {
    background-image: url("./Lijnen_en_Hoeken/Lijn_Uiteinde_WitRand_Verticaal.7f71f2fb9be4.svg");
    width: var(--seperator-line-element-width);
    height: var(--seperator-line-element-edge-height);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    transform: rotate(180deg);
}

.vertical-seperator-line .middle-border {
    background-image: url("./Lijnen_en_Hoeken/Lijn_1_WitRand_Verticaal.ed64a7163e9f.svg");
    width: var(--seperator-line-element-width);
    background-size: contain;
    background-size: 0.5rem;
    background-repeat: repeat-y;
    flex-grow: 1;
}

.vertical-seperator-line .bottom-border {
    background-image: url("./Lijnen_en_Hoeken/Lijn_Uiteinde_WitRand_Verticaal.7f71f2fb9be4.svg");
    width: var(--seperator-line-element-width);
    height: var(--seperator-line-element-edge-height);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
}

.horizontal-line .left-border {
    background-image: url("./Lijnen_en_Hoeken/Lijn_Uiteinde_Horizontaal.18228a427bb9.svg");
    height: var(--line-element-height);
    width: var(--line-element-edge-width);
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: contain;
}

.horizontal-line .middle-horizontal-border {
    background-image: url("./Lijnen_en_Hoeken/Lijn_1_WitRand_Horizontaal.4f034e12a011.svg");
    background-size: 75px;
    height: var(--line-element-height);
    flex-grow: 1;
    background-repeat: repeat-x;
}

.horizontal-line .right-border {
    background-image: url("./Lijnen_en_Hoeken/Lijn_Uiteinde_Horizontaal.18228a427bb9.svg");
    height: var(--line-element-height);
    width: var(--line-element-edge-width);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: center;
    transform: rotate(180deg);
}

.upper-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.upper-line img {
    height: 3.5rem;
}

.fixed-size-line {
    width: 3rem;
}

.small-fixed-size-line {
    width: 1rem;
}

.fill-space-line {
    flex-grow: 1;
}

.upper-line .dimension-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 3.5rem;
}

.dimension-widgets {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
}

.dimension-widget {
    height: 15rem;
    width: 25rem;
    cursor: pointer;
}

.dimension-widget .small-text {
    width: calc(100% - 2rem);
    text-align: center;
}


.dimension-placeholder {
    opacity: 0.5;
    cursor: not-allowed;
}

.tips-and-tricks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 25rem;
}

.tips-and-tricks img {
    height: 45%;
    transition: transform .2s;
}

.tips-and-tricks img:hover {
    transform: scale(1.2);
}

.tips-and-tricks p {
    font-size: 4rem;
    line-height: 2rem;
    text-align: center;
}

.small-text p {
    font-size: 2rem;
    line-height: 1rem;
}

.video-container,
.tips-and-tricks {
    position: relative;    
}

.video-container iframe {
    border-radius: 2rem;
}

.video-container:after,
.tips-and-tricks:after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
    background-image: url("./Lijnen_en_Hoeken/Video_Border_Hoek_Rond_WitRand.aa2200fceaa0.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    top: -0.5rem;
    left: -0.5rem;
}

/* fix for slightly larger iframe on explanation page */
.explanation-game .video-container {
    margin-top: 2rem;
}

.explanation-game .video-container:after {
    top: -1rem;
    height: calc(100% + 2rem);
}

.explanation-game .video-container {
    width: min-content;
    margin-left: auto;
    margin-right: auto;
}

/* custom video button */
.custom-video-player-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    height: 5rem;
    width: 5rem;

    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;

    transition: opacity 0.5s ease-in-out;
}

.custom-video-player-button.start-video {
    z-index: 1;
    background-image: url("./Knoppen/Video_Play_Knop.ff67ac2131ca.svg");
}

.custom-video-player-button.pause-video {
    background-image: url("./Knoppen/Video_Pauze_Knop.c02bc9ba3845.svg");
}

.video-container .start-video {
    opacity: 0;
}

.video-container .start-video.active {
    opacity: 1;
}

.video-container .pause-video {
    opacity: 0;
    
}

.video-container:hover .pause-video.active {
    opacity: 1;
}

/* display scrollable page styling */
#pdf-js-viewer {
    width: 100%;
    height: calc(100vh - 11rem);
}

/* styling reviewer dashboard (temp for now) */
.reviewer-dashboard th,
.reviewer-dashboard td {
    padding: 0.2rem 0.5rem;
}

.review-group-tile {
    width: 15rem;
}

.dashboard a {
    color: var(--color-black);
}

.go-back-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    max-width: 30rem;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 2.5rem;
}

.go-back-link:before {
    content: "";
    width: 3rem;
    height: 3rem;
    background-image: url("./Knoppen/Verder_Knop.d0149e642f2b.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
    display: inline-block;
}

.hidden {
    display: none !important;
}

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    padding: var(--popup-padding);
    height: calc(100vh - var(--popup-substract-width));
    width: calc(100vw - var(--popup-substract-width));
    z-index: 1;
    background-color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.popup-inner-container {
    position: relative;
    max-width: 74rem;
    max-height: calc(100% - 10rem);
    width: calc(100% - 4rem);
    padding: var(--popup-padding);
}

.popup-content-container {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}

.disable-scrollbars::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
}
      
.disable-scrollbars {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none;  /* IE 10+ */
}

#close-popup {
    position: absolute;
    top: 0.5rem;
    right: 0rem;
    font-size: 6rem;
    height: 3rem;
    width: 3rem;
    text-align: center;
    cursor: pointer;
}

#close-popup:hover {
    color: var(--color-grey);
}

.popup-base-container .small-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.popup-base-container p,
.popup-base-container .small-text p,
.popup-base-container ul {
    font-family: var(--regular-font);
    text-transform: initial;
    font-size: 1rem;
    line-height: 1rem;
}

.popup-base-container p img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.popup-base-container ul {
    list-style: square;
    margin-left: 1rem;
}

.popup-base-container {
    padding: 1rem;
}

.article-header {
    width: 100%;
    min-height: 10rem;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.article-icon {
    width: 6rem;
    height: 6rem;
    padding: 2rem;
}

.article-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.article-intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bold,
strong {
    font-weight: 700;
}

.cursive,
em {
    font-style: italic;
}

.lesson-summary {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.summary-segment {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.summary-segment .category {
    font-family: var(--handwriting);
    font-size: 4rem;
}

.summary-segment .value {
    font-family: var(--regular-font);
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

.lesson-materials,
.student-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
    
}

.lesson-material-tile,
.student-tile {
    position: relative;

    height: 10rem;
    width: 10rem;
    padding: 1.5rem 2rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    background-image: url("./Lijnen_en_Hoeken/Border_Hoek_Rond.b318ca3fb6c9.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.student-tile img {
    width: 4rem;
}

.student-tile p:not(.small-text) {
    font: var(--handwriting);
    font-size: 2rem;
}

.student-tile p {
    text-align: center;
}

.student-tile .mark-crisis-solved {
    opacity: 0;
    transition: all 0.3s;
    display: block;
    position: absolute;
    bottom: -1.5rem;
    font-size: 3rem;

    cursor: not-allowed;
}

.student-tile:hover .mark-crisis-solved {
    opacity: 1;
}

.lesson-material-tile:hover {
    scale: 1.1;
    transition: all 0.3s;
}

.lesson-material-tile img {
    width: 100%;
}

.snowflake-tile img {
    scale: 118%;
    margin-top: 1rem;
}

.smaller-image-tile img {
    width: calc(100% - 2rem);
}

.lesson-material-tile p {
    text-align: center;
    color: var(--color-black);
    font-size: 1.5rem;
}

.crisis-intro p {
    font-family: var(--handwriting);
    font-size: 4rem;
    line-height: 1.5rem;
}

.dimension-warning {
    cursor: pointer;
}

.dimension-warning:hover img {
    scale: 1.2;
    transition: all 0.3s;
}

.crisis-lesson-container > .small-text,
.crisis-intro {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    max-width: 60rem;
    width: calc(100% - 4rem);
    text-align: center;
}

.crisis-lesson-container h2 {
    text-align: center;
}

.crisis-intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}