/* #region */


/* #endregion*/
/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
    user-select: none;      /* No text is selectable unless explicitly defining it on the html element. */
    -webkit-user-select: none; /* Specific for Safari */
    pointer-events: none;   /* No elements, e.g. input text fields or the canvas are clickable, unless explicitly defining it on the html element. */
    color: white;
}
*:focus {
    outline: none; /* Remove default focus outline. Without this: when pressing a numpad button, then it gets marked no matter what key is pressed afterwards. */
}


/* Define global color variables for use throughout the site */
:root {
    --iconBlue:   rgb(0, 0, 255);
    --iconGreen:  rgb(0, 255, 0);
    --iconRed:    rgb(255, 0, 0);
    --iconYellow: rgb(255, 255, 0);
    --buttonShadow: rgba(255, 255, 255, 0.3);
    --line1:           rgb(54, 162, 235);
    --line2:           rgb(255, 99, 132);
    /* --purpleText:      rgb(222, 45, 249); */

    --purpleText:      rgb(255, 0, 234);
    --greenText:       #34ff99; /*rgb(137, 255, 137);*/
    --blueText:        #009dff; /*rgb(137, 255, 137);*/
    --readableText:    rgba(255, 255, 255, 0.8);
    --fontSize:        17px;
    --fontWeight:      400;
}


@font-face {
    font-family: 'Schoolbell';
    src: url('fonts/Schoolbell-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito/Nunito-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 1000; /* Angiver weight range (200 til 1000) */
    font-style: normal;
}

@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 1000;
    font-style: italic;
}

.purpleText{
    color: rgb(255, 0, 255);
}

input, textarea, body, button { 
    font-family: 'Nunito';
}

#pageHovedregningID {
    overflow: hidden; /* Makes page inscrollable.*/
}


h1 {
    text-align: center;
    font-size: 60px;
    color: rgb(255, 0, 255);
}
h2 {
    white-space: nowrap; /* Prevents the header from making text wrap in the transition on a smart phone*/
    font-size: 40px;
    /* color: #8AFF8A; */
    color: rgb(138, 255, 138);
}
h3 {
    text-align: center;
    font-size: 24px;
    color: rgb(255, 0, 255);
}
h4 {
    text-align: center;
    font-size: 20px;
    color: rgb(255, 0, 255);
}
p {
    font-family: 'Nunito';
    font-weight: 350;
    font-size: 17px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.3px;  /* 0 is default.*/
}

.readable {
    color: var(--readableText); 
    line-height: 1.6;
    font-size: 17px;
    font-weight: 400;
    white-space: pre-line; /*Pre-line follows the way the text is written, so if there is line break in text, then it is also shown in the browser.*/
}



.bold{
    font-weight: 600;
}
.centered{
    text-align: center;
}
.link{
    color: var(--greenText);
    text-decoration: underline;
    cursor: pointer;
    pointer-events: all;
}


/* Forslag til farver, når baggrunden er sort:
   - Farvepalet A: 
       -- h1: lys lilla eller blå (#A388EE eller #5EB9F0)
       -- h2: lysegrøn (#8AFF8A)
       -- h3: lysegul (#FFE066)
       -- p: grå-hvid (#CCCCCC eller rgba(255,255,255,0.8))
   - Forslag B (mere levende): 
       -- h1: pink (#FF4BCB)
       -- h2: cyan (#19FFF6)
       -- h3: orange (#FFBB63)
       -- p: lidt gulhvid (#FFF7D6)
*/

.h1text{
    font-family: 'Nunito';
    font-weight: 700;
    font-size: 36px;
    color: var(--purpleText); /* lys lilla, kan evt. skiftes til #FF4BCB for pink */
    margin-bottom: 20px;
}
.h2text{
    font-family: 'Nunito';
    font-weight: 600;
    font-size: 24px;
    color: var(--greenText); /* lysegrøn, eller #19FFF6 for cyan */
    margin-bottom: 10px;
}
.h3text{
    font-family: 'Nunito';
    font-weight: 600;
    font-size: 20px;
    color: var(--purpleText);
}
.h4text{
    font-family: 'Nunito';
    font-weight: 600;
    font-size: 17px;
    color: var(--greenText);
}
.ptext{
    font-family: 'Nunito';
    font-weight: 350;
    font-size: 16px;
    color: var(--readableText); /* grå-hvid, evt. #FFF7D6 for lidt varm hvid */
    line-height: 1.6;
}
.pbold{
    font-family: 'Nunito';
    font-size: 16px;
    font-weight: 600;
}


.cleanHeader{
    font-family: sans-serif;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
}
.purple{
    color: rgb(255, 0, 255,0.8);
}

.pSansSerif{
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 300;
}
#h1HovedregningID{
    display: flex; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-size: 30px;

    /* font-family: sans-serif; */
    line-height: 1.6;
    font-size: 30px;
    color: rgba(255,255,255);
    white-space: pre-line;
    text-shadow: 0 0 20px rgba(255,255,255);
    font-weight: 350; 
    transition: opacity 2s ease;
}

.window { /*REMEMBER to user showHideWindow() function when changing the display property. It controls display and opacity.*/
    position: fixed;
    z-index: 5;
    opacity: 0; /* This makes it possible to fade in/out. */
    scale: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30px;
    pointer-events: all;/*  So that the user doesn't accidentially click on something behind the confirmation window. Black out should make this impossible though. */
    box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.5) , inset 0 0 20px 1px rgba(0, 0, 0, 0.8);
    transition: 0.8s ease;
    font-size: 20px;
    max-width: 800px;
    max-height: calc(100% - 100px); width: 100%;
    transform-origin: top left; /* This makes the window scale from the top center (not left, but this is due to the transform property). */
    overflow: hidden;
}
.closeWindowButton{
    position: absolute; 
    top: 2px; 
    right: 2px; 
    width: 50px; 
    height: 50px; 
    font-family: sans-serif;
    font-size: 20px;
    justify-content: center;   
    border-radius: 50%; 
    border: solid 1px white; 
    color: white; /*rgb(248, 51, 255);  */
    background-color: black;
}

.readableText, .readableText * { /* The * means that sub elements are also affected. */
    font-family: sans-serif;
    line-height: 1.6;
    font-size: 16px;
    color: var(--readableText);
    white-space: pre-line;
    letter-spacing: 0.3px;
    text-shadow: 0 0 20px rgba(255,255,255,0.2);
    font-weight: 350;
}



/* 
.bullet1{
    margin-left: 25px;
    margin-bottom: 10px;
    color: var(--readableText); 
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
}
.bullet1::before {
    content: "➢";
    margin-right: 10px;
    color: var(--readableText); 
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
}

.bullet2{
    margin-left: 50px;
    margin-bottom: 10px;
    color: var(--readableText); 
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
}
.bullet2::before {
    content: "▪";
    margin-right: 10px;
    color: var(--readableText); 
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
}

.bullet3{
    margin-left: 75px;
    margin-bottom: 10px;
    color: var(--readableText); 
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
}
.bullet3::before {
    content: "-";
    margin-right: 10px;
    color: var(--readableText); 
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
} */



.bullets{
    display: flex;
    flex-direction: column;
    gap: 10px;
    
}

.bullet1::before{
    display: flex; 
    margin-left: 5px;
    margin-right: 10px;
    color: var(--readableText); 
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    content: "✦";/*➢*/
    transform: translateY(2px);
}
.bullet2::before{
    display: flex; 
    margin-left: 30px;
    margin-right: 10px;
    color: var(--readableText); 
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    content: "⋅";
    transform: scale(1.5);
}
.bullet3::before{
    display: flex; 
    margin-left: 50px;
    margin-right: 10px;
    color: var(--readableText); 
    font-size: var(--fontSize);
    font-weight: var(--fontWeight);
    content: "-";
}
.bulletRow{
    display: flex;
    flex-direction: row;
}


.welcomePoint{
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    height: 70px;
    /* border: solid 1px red; */
}

/*****************************************************************************************************************/
/**************************************      General page setup    ***********************************************/
/*****************************************************************************************************************/
/* The body is the main container. It consists of:
    o  the header, which is the top menu.
    o  the page, which is the page content, defined by which page button is pressed in the top menu
    o  the footer which contains the copyright info.
    o  NOTE: Putting a scrollbar on the body (the root element) makes the browser make an ugly scrollbar. */
body {
    display: flex;
    flex-direction: column;
    align-items: center;            /* Center horizontally. */
    /*min-height: 100vh;              /* 100vh should work better than 100%. If content takes more space, then body will adapt. */
    height: 100svh;                 /* svh is used instead of vh to make the height correct for ios portrait (somehow).*/
    width: 100%;                    /* 100% works perfect. 100vw will cause a horizontal scroll bar to appear. */
    justify-content: flex-start;    /* Place elements top down. */
    touch-action: manipulation;     /* Removes zoom when double tapping on a smartphone. Don't use 'none' as that may cause issues with scrolling. */
    overflow-y: hidden;             /* Prevents the body from scrolling when the user scrolls on the page. */
    overflow-x: hidden; 
    background: black; /*This background is not shown as background is handled in a wrapper element. BUT, it makes ios makes top bar black instead of grey.*/
}

.scrollY{
    pointer-events: all; /* So that the user can scroll the page. */
    overflow-y: scroll;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    scrollbar-width: none; 
    /*scrollbar-color: rgba(255,255,255,0.3) transparent; /*First color is thumb color, second is track color*/
}

#siteHeaderID {
    position: relative;
    display: none; /* Header should also be set to display: none in index.html in order to avoid FOUC (Flash of Unstyled Content). */
    justify-content: flex-end;      /* This positions the right menu (page menu) to the right. Notice that the rest of children elements are position: absolute (center menu and username). */
    align-items: flex-start;
    width: 100%;                    /* Width is full screen. Height is not defined and will adjust to the children elements. This is importnat for the mobile menu. */
    padding: 5px 10px 0px 0px;     /* Upper right lower left. */
    min-height: 50px;
}

.page {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;            /* Center horizontally. */
    width: 100%;
    flex: 1;                        /* Makes sure the page takes up the space available in height, so that the footer is in the botton.*/
    overflow-x: hidden;
    
    /* Settings for initial state. */      
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.section {
    display: flex;
    font-family: Nunito;
    font-size: 42px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 30px 10px;
    pointer-events: all;
    cursor: default;
}


.gradientBorder{
    height: 2px;
    width: 100%;
    background: linear-gradient(
        90deg, 
        #ff8d93,   /* stronger pastel red */
        #ffd380,   /* stronger pastel orange-yellow */
        #fff86b,   /* stronger pastel yellow */
        #70e390,   /* stronger pastel green */
        #58cdf6,   /* stronger pastel cyan */
        #78c7ff,   /* stronger pastel blue */
        #b085f5    /* stronger pastel violet/purple */
    );
    border-radius: 3px; /* much more rounding for rounded ends */
}

.greenBorder{
    height: 1px;
    width: 100%;
    background-color: var(--greenText);
    border-radius: 3px;
    box-shadow: 0 12px 40px 0 rgba(110, 180, 60, 0.6), 0 6px 30px 0 rgba(60, 180, 255, 0.7); 
}

.customFooter{
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 0;
    width: 100%;
    padding: 0px;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
}

footer, footer * {
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    margin-top: 0px;
    font-size: 12px;
}
footer a {
    color: #4CAF50;
    text-decoration: none;
    pointer-events: all;
}


#blackOutID{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    opacity: 0;
    /* background-color: rgba(0, 0, 0, 0.7); */
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 4;
    transition: opacity 0.5s ease;
}


/*****************************************************************************************************************/
/**************************************      HEADER  content          ***************************************************/
/*****************************************************************************************************************/
.rightMenuContainer{
    display: flex;
    direction: rtl;
    gap: 10px;
}

.logo{
    position: absolute;
    display: none; /* Set to flex when sessionRole is visitor. */
    top: 0;
    left: 30px;
    height: 50px;
    justify-content: flex-start;
    align-items: center;
    font-family: 'Nunito';
    font-size: 24px;
    font-weight: 600;
    color: rgb(255, 255, 255);
    /* text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); */
    transition: all 0.5s ease;
    gap: 10px;
    cursor: pointer;
    pointer-events: all;
}

.menuButtonsContainer{
    display: flex;
    flex-direction: column;
    direction: rtl;
    transition: height 0.5s , opacity 0.5s;
    overflow: hidden;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0px 20px 0px 20px;
    border-radius: 20px;
    width: 230px;
}

.username {
    position: absolute;  
    display: flex;  
    height: 40px;
    left: 15px;
    justify-content: flex-start;
    align-items: center;
    font-size: 30px;
}
.rainbowText{
    background: linear-gradient(90deg, #ffe066, #6cfa88, #55d6ff, #4a7bff, #a45eff, #fb00ff, #f976a8, #ffe066);

    /* background: linear-gradient(90deg, rgb(156, 55, 55), rgb(162, 119, 40), rgb(45, 138, 45), rgb(57, 85, 187), rgb(114, 38, 169), rgb(142, 49, 142)); */
    background-size: 100%;
    -webkit-background-clip: text;/* Fixes issue seen on samsung phone, chrome browser. */
    background-clip: text;
    color: transparent;
}
.glowText{
    /*font-family: 'Schoolbell', cursive;*/
    line-height: 1.6;
    font-size: 30px;
    color: rgba(255,255,255);
    white-space: pre-line;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.723);
    font-weight: 350; 
    transition: opacity 2s ease;
}
/*****************************************************************************************************************/
/**************************************      Video setup          ***************************************************/
/*****************************************************************************************************************/
.videoThumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 800px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    background: #111;
    background-image: var(--poster);
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
  
  .videoThumb--small {
    width: 300px;
  }
  
  .videoThumbPlay {
    inset: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  
  .videoThumbPlay::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    transform: translate(-50%, -50%);
    box-sizing: content-box;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  }
  
  .videoThumbPlay::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-40%, -50%);
    box-sizing: content-box;
    width: 0;
    height: 0;
    border-left: 20px solid rgba(255,255,255,0.92);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
  }
  
  .videoThumb:hover .videoThumbPlay::before {
    background: rgba(0,0,0,0.65);
  }

/* Gør video-controls klikbare i dit setup (du har global pointer-events:none) */
.videoThumb video,
.videoThumb video * {
  pointer-events: auto;
}
/*****************************************************************************************************************/
/************************************      Theme button and Algorithm button     *********************************/
/*****************************************************************************************************************/

#buttonThemeID{
    transition: all 0.4s ease;
}

.colorWheel {
    width: 42px;
    height: 42px;
    background-image: conic-gradient(
        rgb(218, 2, 2),     /* Red */
        rgb(255, 89, 70),   /* Orange */
        rgb(255, 255, 0),   /* Yellow */
        rgb(0, 227, 0),     /* Green */
        rgb(0, 102, 255),   /* Blue */
        rgb(255, 0, 255),   /* Violet */
        rgb(218, 2, 2)      /* Close the gradient with Red */
    );
    /* background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); */

    border-radius: 50%;
}


#algorithmContentID{
    position: relative; 
    width: 100%; 
    height: 400px; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; 
    background-color: rgba(255, 255, 255, 0.1); 
    padding: 20px 10px 90px 10px;
}

#getStartedButtonID{
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%);
    color: var(--purpleText);
    border: 2px solid var(--purpleText);
    
}
/*****************************************************************************************************************/
/************************************      Trustpilot            ***************************************************/
/*****************************************************************************************************************/
.trustpilot-widget,
.trustpilot-widget *,
.trustpilot-widget iframe {
  pointer-events: auto;
}
/*****************************************************************************************************************/
/************************************      Trophies            ***************************************************/
/*****************************************************************************************************************/


.nTrophiesSmartPhone {
    background: none;
    color: white;
    background-color: red;
    font-weight: bold;
    text-align: center;
    width: 20px;
    border: none;
    font-size: 10px;
}
#eventMessageID{
    font-family: 'Schoolbell', cursive;
    display: flex; 
    justify-content: center;
    align-items: center;
    text-align: center;
    direction: ltr; /* This is to make sure the welcome message is displayed from left to right. Probably because the trophy header is rtl. */
    /*font-size: 30px;  Set in resizeControl function */
    transition: all 1s ease;
    transform: translateY(-10px);
    opacity: 0;
    z-index: 3.5;
}


/*****************************************************************************************************************/
/************************************      COLLUMNS            ***************************************************/
/*****************************************************************************************************************/

.columnContainer {
    transition: 0.4s ease;
    display: flex;
    justify-content: space-between;
    height: 100%;
    min-height: 300px;
    padding: 0px 5px 0px 5px;  /* Upper right lower left. */
    width: 100%;
    max-width: 1200px;
}
.column1 {
    transition: width 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 30px;
    /*Width is set in resizeControl function */
}
.column2 {
    transition: width 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 500px;
    /*Width is set in resizeControl function*/
}
.column3 {
    transition: width 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 200px;
    /*Width is set in resizeControl function*/
}
.panel{
    width: 100%;
}
.panelHeader {
    font-family: 'Nunito';
    font-size: 40px;
    font-weight: 600;

    transform-origin: center left; /* Ensure rotation respects the div */
    width: 300px;
    text-align: center;
    pointer-events: all;
    transition: transform 0.2s ease;
    z-index: 1;
}

#chaptersHeaderID { color: #ffe066; /* Soft gold */ }
#solveHeaderID    { color: #55d6ff; /* Bright cyan blue */ }
#answerHeaderID   { color: #6cfa88; /* Fresh mint green */ }
#helpHeaderID     { color: #f976a8; /* Pastel pink */ }



/* #chaptersHeaderID{color:rgb(255, 214, 153);}
#solveHeaderID   {color:rgb(255, 214, 153);}
#answerHeaderID  {color:rgb(255, 214, 153);}
#helpHeaderID    {color:rgb(255, 214, 153);} */

/*****************************************************************************************************************/
/***************************************      CHAPTERS    ******************************************************/
/*****************************************************************************************************************/
.chaptersPanel{
    background: none;/*rgb(21, 68, 255);*/
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap:10px;
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
    height: 100%;
}

.modeLabel{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
}
.modeText{
    font-size: 3px;
    margin: 0px;
    color: white;
}

.chapterPanelContent{
    display: flex; 
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap:0px;
}

.chapterContainer{
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;  /* The three flex-xx properties somehow adapts the height so that it fills the available space without extending beyond the height of the parent containers. */
    flex-shrink: 1;
    flex-basis: 0;
    min-height: 0;
    padding: 5px 12px 5px 2px;
}
.chapterRow {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 60px;
    padding-right: 15px;
}
.breakLine{
    display: flex;
    justify-content: space-between; /* This is necessary to make the scale appear in the correct position */
    align-items: center;
    width: 100%;
    height: 1px;
    position: relative; /* Add this to position the thumb relative to the container */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.6), inset 0 0 1px rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
    margin-top: 2px;

}
.done {
    display: flex;
    position: absolute;
    width: 40px;
    left: 13px;
    top: 30%;
    transform: translateY(-50%) ;
}

#eyeID{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: transparent;
    position: fixed; /* Has to be fixed in order to use getBoundingClientRect on it. */
    overflow: hidden;
    animation: pulseShadow 2s infinite alternate ease-in-out;
    transition: 0.2s ease;
    visibility: hidden;
    transform: translateX(-50%);
    z-index: 2;
}
@keyframes pulseShadow {
    /* 0% {
        box-shadow: 0 0 7px rgb(255, 46, 238), inset 0 0 7px rgba(255, 44, 251, 0.737);
    }
    100% {
        box-shadow: 0 0 7px rgb(255, 46, 238), inset 0 0 15px rgba(255, 44, 251, 0.9);
    } */
    0%   {box-shadow: inset 0 0 10px  rgba(95, 46, 255, 0.9);}
    100% {box-shadow: inset 0 0 13px rgba(195, 44, 255, 0.9);}
}
/*****************************************************************************************************************/
/*******************************************      SOLVE    *******************************************************/
/*****************************************************************************************************************/
.solvePanel{
    background: none; /*rgba(198, 205, 255, 0.35);*/
    display: flex;
    height: 200px;
    flex-direction: column;
    gap: 10px;  /* Vertical gap*/
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
}

.solvePanelContent{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
}

#playgroundID{
    font-family: 'Schoolbell', cursive;
    position: relative;
    display: flex;
    flex-direction: column;
    top: -20px; /* Move in order to use as much space as possible. */
    justify-content: flex-start;
    align-items: center;
    width: 350px;
    height: 190px;
    background-color: none;
    text-align: center;
    font-size: 40px;
}


#percentBoxID {/*Width and height is set in script.js*/
    display: none; /*Hide initially. the percent calculation function will set display: flex;*/
    flex-direction: column;
    flex-wrap: wrap;
    width: 200px;
    height: 100px;
    background-color: black;
    border-radius: 10px;
    border: solid white 5px;
}
.box{ /*Also used for percent box*/
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid black 2px;
    border-radius: 5px;
}
#celebrateBoxID {
    position: relative;
    top: -30px;
    display: none; /*Hide initially. the percent calculation function will set display: flex;*/
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 350px;
    height: 160px;
    gap: 10px;
}
#celebrateTextID{
    font-size: 40px;
    font-weight: 600;
}

.bigTrophy{
    display: flex;
    position: absolute;
    height: 200px;
    z-index: 2;
    transition: opacity 0.5s ease;
    /*transition is changed in endCelebration() where needed.*/
}


/*****************************************************************************************************************/
/*******************************************      ANSWER    ******************************************************/
/*****************************************************************************************************************/
.answerPanel{
    background: none;/*rgba(203, 252, 255, 0.35);*/
    display: flex;
    flex-direction: column;
    gap: 10px;  /* Vertical gap*/
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
}

.answerPanelContent{
    font-family: 'Schoolbell', cursive;
    display: flex;
    position: relative; /* this is necessary in order to use position on children divs. */
    flex-direction: column;
    width: 100%;
    gap:0px;
    align-items: center; /* Horizontally*/
    justify-content:center; /* Vertically */
    white-space: nowrap; /* Prevents the header from making text wrap in the transition on a smart phone*/
    font-size: 40px;
}
.answertext{
    display: flex;
    text-align: left;
    font-size: 40px;
    width: 135px; /*130px = room for 6 digits with fontSize 40px.*/
    background: none;/*rgba(86, 114, 255, 0.48);*/
    color:#fff;
    border: none;
    height: 50px;
    line-height: 40px;
    padding: 1px 2px;
}
.trueOrFalse{
    display: flex;
    position: absolute;
    right: -10px;
    top: -20px;
    height: 60px;
    font-size: 60px;
}

#answerFractionID{
    position: absolute;  
    display: none; /* Set to flex in JS*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: -25px;
    width: 200px;
    height: 80px;
}
.fractionField{
    width: 90%; 
    height: 40%;  
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5); /* Also set in JS. */
    margin-top: 2px;
    border-radius: 8px;
    font-size: 30px;
    text-align: center;
}
.fractionLine{
    width: 100%; 
    height:2px; 
    background:rgba(255, 255, 255, 1); 
    margin-top:2px
}

.numpad{
    display: flex; /* Set to flex in JS*/
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;  /*This somehow removes the space between the button rows*/
    width: 100%;
    min-height: 50px;
    aspect-ratio: 1;
    margin-top: -10px;
}

.secondaryNumpad{
    display: flex; /* Set to flex in JS*/
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;  /*This somehow removes the space between the button rows*/

    height: 300px;
    width: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}


/*****************************************************************************************************************/
/*******************************************      Help    ********************************************************/
/*****************************************************************************************************************/
.helpPanel{
    background: none; /*rgba(255, 197, 245, 0.35);*/
    display: flex;
    height: 100%;
    flex-direction: column;
    /* flex-grow: 1; */
    gap: 20px;  /* Vertical gap*/
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */  
}
.helpPanelContent{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 30px;
    align-items: center; /* Horizontally*/
    justify-content: flex-start; /* Vertically */
    /*white-space: nowrap; /* Prevents the header from making text wrap in the transition on a smart phone*/
    
}


#tipID{ /* This is the tip text box. It can contain both text and html code. */

    position: relative; /* Makes it possible to place elements absolutely within it. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    /* box-sizing: border-box; */
    background: none;
    /* color: white; */
    
    resize: none; /*So that it is not possible to drag the text box larger or smaller*/
    word-wrap: break-word; /* Ensure words wrap properly */
    overflow-wrap: break-word; /* Ensure words wrap properly */




    /* The three flex-xx properties somehow adapts the height so that it fills the available space without extending beyond the height of the parent containers. */
    flex-grow: 1;  
    flex-shrink: 1;
    flex-basis: 0;
    min-height: 0;
    
}
/*****************************************************************************************************************/
/**************************************      buttons            ***************************************************/
/*****************************************************************************************************************/
/*
Buttons are unified, but could maybe be organized a bit better. The following list is not completed. Form button class should be moved to this section.

Button types:

    adminButton:
        States:
            Active: adminButton
        Look: Simple
        Example: selectpage, modify user, ok, cancel, logout

    actionButton:
        States:
            Active: actionButton
            Hover:  :hoverHover
        Look: Action. Press to go forward.
        Example: Login, buy, create account.

    chapterButton:
        States:
            Active:        chapterButton
            Selected:      chapterButtonSelected
            Not clickable: chapterButtonNotClickable
        Look: Beautiful
        Example: select user, select chapter.
    
    iconButton:

    formButton:
*/
button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border: none;/*1px solid transparent;*/
    padding: 0px 15px 0px 15px;
    height: 50px;
    border-radius: 25px;
    background: none; /* Using background-color is not enough */
    cursor: pointer;  /* Arrow changes to a hand when hovering over the button */
    font-size: 20px;
    font-weight: 400;
    transition: background-color 0.2s, transform 0.2s; /* Transform is for button pressed animation. */
    pointer-events: all; /* Makes the button pressable */
    white-space: nowrap; /* Forces the text to not wrap to the next line */
    direction: ltr;
}
.buttonActive{
    background-color: rgba(255, 255, 255, 0.1);
}


.pulseButton {
    animation: pulse 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    background-color: transparent;
}

@keyframes pulse {
    0%   { background-color: rgba(255,255,255,0); }
    50%  { background-color: rgba(255,255,255,0.2); }
    100% { background-color: rgba(255,255,255,0); }
}



.packageButton {
    font-size: 20px;
    border: solid 1px rgba(255, 255, 255, 0.4);
    width: 200px;
    color: rgba(255, 255, 255, 0.7);
}
.packageOn {
    background-color: rgba(0, 136, 255, 0.13);
    border: 1.5px solid #34ff99;
    color: #34ff99;
}
.packageAccessible {
    background-color: rgba(0, 136, 255, 0.13);
    border: 1.5px solid #34ff99;
    color: #34ff99;
}
.packageAccessible::after {
    content: '✓';
    color: #34ff99;
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 15px;
    font-weight: 400;
    pointer-events: none;
}




.buyButton {
    font-size: 20px;
    border: solid 1px rgba(255, 255, 255, 0.4);
    width: 200px;
    cursor: default;
    pointer-events: none;
}
.buyButtonActive {
    color: rgba(255, 255, 255, 0.7);
    width: 200px;
    border: 1.5px solid #34ff99;
    color: #34ff99;
    cursor: pointer;
    pointer-events: all;
}
.buyButtonActive:hover{
    background-color: rgba(0, 136, 255, 0.13);
}

.administrateSubscriptionButton {
    /* border: 1.5px solid rgb(255, 0, 0);
    color: rgb(255, 0, 0); */
    font-size: 10px;
}

.actionButton{
    width: 150px;
    background-color: rgba(0, 255, 38, 0.8);
    box-shadow: inset 0 0 6px var(--buttonShadow);
    transition: background-color 0.8s ease;
}
.actionButton:hover{
    background-color: rgb(255, 0, 191);
}

.checkbox {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    margin-right: 15px;
    pointer-events: all;
    cursor: pointer;
}



.chapterButton{
    width: 150px;
    pointer-events: none;
    cursor: default;
}
.chapterNumber{
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
}
.chapterName{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}
.chapterSelectable{
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) , inset 0 0 20px rgba(0, 0, 0, 0.3);
    /* box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3); */
    pointer-events: all;
    cursor: pointer;
}
.chapterSelected{
    /* box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) , inset 0 0 20px rgba(255, 255, 255, 0.8); */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.8);
}

.tutorStamp{
    display: none;
    position: absolute;
    bottom: 25px;
    right: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 9px;
    transform: rotate(-20deg);
}



.iconButton{
    width: 45px;
    height: 45px;
    border-radius: 22.5px;
    box-shadow: inset 0 0 6px var(--buttonShadow);
    padding: 0px;
    transition: transform 0.2s; /* For the button pressed animation. */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) , inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.musicTrackList {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 350px;
    padding: 15px 10px 30px 10px;
    gap: 6px;
}

.musicTrackItem {
    width: 100%;
    padding: 0px 15px 0px 15px;
    height: 50px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 16px;
    color: var(--readableText);
    cursor: pointer;
    pointer-events: all;
    transition: box-shadow 0.2s ease;
    background-color: rgba(255, 255, 255, 0.1);
    text-align: left;
}

.musicTrackItemActive {
    box-shadow: 0 0 6px rgba(255, 0, 234, 0.7);
}


.numpadButton {  /* Note that the button element itself has css code */
    font-family: 'Schoolbell', cursive;
    width: 66px;
    height: 66px; /* 66px + 2*2px = 70px. So 70px is the total width and height of the button. */
    border-radius: 33px;
    margin: 2px;
    box-shadow: inset 0 0 6px var(--buttonShadow);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) , inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.groupButton{
    width: 95px;
    height: 45px;
    font-size: 14px;
}

/*****************************************************************************************************************/
/***********            SLIDERS         **************************************************************************/
/*****************************************************************************************************************/
.sliderContainer{
    display: flex;
    justify-content: space-between; /* This is necessary to make the scale appear in the correct position */
    align-items: center;
    width: 100px;
    height: 1px;
    position: relative; /* Add this to position the thumb relative to the container */
    background-color: rgba(255, 255, 255, 0.1);
}
.sliderContainer span{
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 0; /* This is necessary to make the scale appear in the correct position */
    transition: all 0.1s;
    text-align: center;
}
.thumbContainer {
    display: flex; 
    align-items: center;    
    position: absolute; 
    justify-content: center;
    width: 0;
    height: 0;
}
.thumb {
    border-radius: 50%;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
    position: absolute; /* Add this to position the thumb absolutely within the container */
    pointer-events: all;
    z-index: 1;
    /* box-shadow: 0 0 5px rgba(255, 255, 255, 0.3) , inset 0 0 20px rgba(0, 0, 0, 0.3); */
    box-shadow: 0 0 5px rgb(255, 255, 255,0.6), inset 0 0 5px rgb(0, 0, 0);
}                            
/*****************************************************************************************************************/
/**************************************      Themes            ***************************************************/
/*****************************************************************************************************************/

.backgroundContainer {
    display: flex;
    position: fixed;
    height: 100%;
    width: 100%;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;       /* Prevents the image from repeating */
    z-index: -1;                        /* Ensure the pseudo-element is behind the content */
}


.themetest { /* white */
    /* Background properties*/
    background-image: 'none';
    background-color: rgb(0, 0, 0);
}

.theme1 { /* BLACK */
    
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgba(0, 0, 0, 0.766);
    filter: brightness(270%) contrast(110%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); 
    /*Image brightness. Not color brightnes.*/
}
.theme2 { /* BLUE */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgb(0, 73, 129);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme3 { /* RED */ 
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgb(125, 0, 2);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme4 { /* GREEN */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgb(34, 121, 0);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}

.theme5 { /* PURPLE */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgb(100, 0, 133);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme6 { /* TURQUOISE */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgb(0, 122, 111);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}

.theme7 { /* COPPER */
    /* Background properties*/
    background-image: url("images/background1.jpg");
    background-color: rgb(149, 82, 0);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); /*Image brightness. Not color brightnes.*/
}
.theme8 { /* SILVER */
    background-image: url("images/background1.jpg");
    background-color: rgb(101, 101, 101);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%);  
}
.theme9 { /* GOLD */
    background-image: url("images/background1.jpg");
    /* background-color: rgba(169, 147, 1, 0.809);
    filter: brightness(170%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%); */

    background-color: rgb(143, 127, 29);
    filter: brightness(200%) contrast(100%) grayscale(0%) sepia(0%) hue-rotate(0deg) saturate(100%);  
}

.screenSize {
    color: white;
    background: none;
    border: none;
    text-align: center;
}

/*****************************************************************************************************************/
/**************************************      Kom godt igang    ***************************************************/
/*****************************************************************************************************************/
.tablinks {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 120px;
    height: 50px;
    border-radius: 20px 20px 0px 0px;
    pointer-events: all;
    cursor: pointer;
}

.tabContent{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    border-radius: 20px;
    padding: 20px;
    /* max-width: 1200px; */
}
/*****************************************************************************************************************/
/**************************************      Om                ***************************************************/
/*****************************************************************************************************************/
.aboutContent{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    padding: 5px 0px 0px 0px; /*upper right lower left*/
}
/*****************************************************************************************************************/
/**************************************      Welcome                ***************************************************/
/*****************************************************************************************************************/
.welcomeContent{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: auto;   /* This is what makes the scrollY work. */
    padding: 5px 0px 0px 0px; /*upper right lower left*/
    max-width: 1200px;
}
/*****************************************************************************************************************/
/**************************************      Forms: Create user, Log in and Admin page             ***************/
/*****************************************************************************************************************/
.formContainer{
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: flex-start; 
    gap: 20px;
    width: 350px;
    border-radius: 20px;
    padding: 10px; /*upper and lower cannot be included because of height transition*/
    /* Height can be individually set. */
}
.formRow{
    display: flex;
    width: 100%;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
}
.formName{
    width: 180px;
    padding-left: 10px;
    font-size: 16px;
}
.formInput{
    font-family: sans-serif;
    font-size: 16px;
    width: 300px;
    height: 40px;
    border-radius: 20px;
    padding: 0px 10px 0px 10px;
    pointer-events: all;
    outline: none; /* Remove default focus outline */
    border: none;
    background-color: inherit;
    background-color: rgba(255, 255, 255, 0.2);
}

.formButton{ /* Additions to basis class: button */
    font-family: sans-serif;
    font-size: 20px;
    border: solid 1px rgba(255, 255, 255, 0.4);
    justify-content: center;   
    transition: none; /* Buttons have transitions, but this is not necessary for form buttons.*/
}
.formThreeDotsButton{ /* Used for header and in JS created userlist */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    border: solid 1px rgba(255, 255, 255, 0.4);
}
.formDot{
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: white;
}
#modifyUserWindowID{ /* addition to basis class: formContainer */
    background-color: rgba(255, 255, 255, 0.2);
    transition: all 1s;
    height: 0px; /* height is set by JS under function: openModifyUserWindow*/
    padding: 0 20px;
}
.packageInfoWindow{
    align-items: flex-start;
}

#modifyUserWrapperID{
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s;
    height: 0px; /* height is set by JS under function: openModifyUserWindow*/
}


/*test*/
.inputWrapper { 
    position: relative; 
    padding: 2px; 
    width: 100%;
    max-width: 350px;
    border-radius: 27px; 
    background: conic-gradient( 
            from var(--angle), 
            rgb(255, 255, 255,0.2) 0deg, 
            rgb(255, 255, 255,0.5) 72deg, 
            rgb(255, 255, 255,1)     144deg, 
            rgb(255, 255, 255,0.5) 216deg, 
            rgb(255, 255, 255,0.2) 288deg 
        ); 
    animation: spin 10s linear infinite; 
} 
.inputWrapper input { 
    display: flex;
    font-family: sans-serif;
    font-size: 16px;
    height: 50px; 
    width: 100%; 
    padding: 10px; 
    border: none; /* Border is created by the wrapper containing the conic-gradient animation effect */ 
    border-radius: 25px;
    outline: none; 
    background-color: rgb(23, 23, 23);
    pointer-events: all;
    outline: none; /* Remove default focus outline */
}
.inputCorrect{
    background: conic-gradient( 
            from var(--angle), 
            rgb(0, 255, 0, 0.2) 0deg, 
            rgb(0, 255, 0, 0.5) 72deg, 
            rgb(0, 255, 0, 1)     144deg, 
            rgb(0, 255, 0, 0.5) 216deg, 
            rgb(0, 255, 0, 0.2) 288deg 
        ); 
}
.inputWrong{
    background: conic-gradient( 
            from var(--angle), 
            rgb(255, 0, 0,0.2) 0deg, 
            rgb(255, 0, 0,0.5) 72deg, 
            rgb(255, 0, 0,1) 144deg, 
            rgb(255, 0, 0,0.5) 216deg, 
            rgb(255, 0, 0,0.2) 288deg 
        ); 
}

.errorText{
    color: red;
}

@property --angle { 
    syntax: "<angle>"; initial-value: 0deg; inherits: false; 
} 

@keyframes spin { 
    to { --angle: 360deg; } 
}
/*****************************************************************************************************************/
/**************************************      Keyboard codes    ***************************************************/
/*****************************************************************************************************************/
/* Close button style */
.close-btn {
    display: block;
    text-align: right;
    cursor: pointer;
    font-size: 30px;
    margin-bottom: 10px;
    color: white;
    pointer-events: all;
    position: absolute;
    right: 22px;
    top: 15px;
}
/*****************************************************************************************************************/
/**************************************      Cannons    ***************************************************/
/*****************************************************************************************************************/
.canvasElement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through */
    z-index: 6;
}
#cannonAreaID { /* Defines the area where the cannons operate. */
    position: absolute;
    bottom: 30px;
    height: 300px; /* Height not important.*/
    width: 100%;
    overflow: clip; /* This is necessary to prevent the cannons from overflowing the container. */
    z-index: 7;
}
.cannonAssembly {
    display: flex;
    position: absolute;
    height: 50px; /* Adjusted in JS: 30px in slim mode.  Used to define the size of the cannon bowl and wheel. The wheel height adapts to this, and the width adapts the wheel width. Maybe it can be made nicer :).*/
    bottom: 30px; /* Make room for cannon rekyl */
    /*left: -150px; /* This is determined in the HTML code, depending on it it is a L og R cannon*/
    transition: 4s linear;
    align-items: center;
}
.cannonWheel {
    display: block;
    position: relative; /*When makin relative, the wheel takes up space in the div and determines its size*/
    height: 100%;
    z-index: 2;
    left: 0%;
    transform-origin: 50% 50%; /* For wheel rotation. Places position and rotation point in the center of the wheel*/
    transition: 4s linear;
}
.cannonBowlContainer {
    display: flex;
    position: absolute;
    width: 200%;
    transform-origin: 25% 50%; /* For aiming. Places position and rotation point in the center of the wheel*/
    transition: 0.2s; 
    transform: rotate(-0deg); /* Places bowl of center vertically. -20% for degrees -90 to 90, and +20% for degrees 90-235. */
}
.cannonBowl {
    display: block; /* The cannonAssembly will now fit its height to this img height.*/
    position: relative;
    width: 100%;
    transform: translate(-10%,-20%); /* Transition is set in JS.*/
}       
/*****************************************************************************************************************/
/**************************************      User statistics    ***************************************************/
/*****************************************************************************************************************/
.US_pageContent{
    position: relative; 
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    padding: 0px 0px 0px 0px; /*upper right lower left*/
}

.US_chapterContainer{
    position: relative;
    display: flex;
    width: 100%;
    /* margin: 5px 0;  Set in JS */
    background-color: rgba(255, 255, 255, 0.05);
    /* border-radius: 10px; Set in JS */
    pointer-events: all;
    transition: margin 1s linear, border-radius 1s linear;
    padding: 0 20px 0 0;
}
.US_chapterNumber{
    font-size: 10px;
    opacity: 0.5;
    margin-right: 2px;
}
.US_chapterHeader{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    writing-mode: vertical-rl;

    transform: rotate(180deg);
    /* Optional: align text properly after rotation */
    white-space: nowrap;
    transition: font-size 1s linear;
    width: 30px;
    margin-right: 10px; /* Places the header more to the left of center.*/
}

.US_barContainer{
    position: relative; /* In this way the axis can be placed absolute inside the container.*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%; /* This fills up the rest of the parent container width.*/
    height: 100%;
    padding: 20px 0 5px 0; /* Set in JS */
    transition: padding 1s linear;
}

.US_bar{
    position: relative;
    display: flex;
    left: 0px;
    width: 0%; /* Width is set in JS. */
    /* Height is set in JS in order for the toggleBarThickness function to work on first onclick on chapter section. */
    background-color: rgb(27, 51, 176);
    border-radius: 3px;
    /* margin: 2px 0; Set in JS */
    transition: all 1s linear;
}
.US_stepNumber{
    position: absolute;
    font-family: sans-serif;
    left: 0px;
    top: 50%;
    left: -5px;
    transform: translate(-50%, -50%);
    /* font-size: 10px; Set in JS */
    opacity: 0.5;
    transition: font-size 1s linear;
}
.US_barValue{
    position: absolute;
    font-family: sans-serif;
    left: calc(100% + 5px);
    top: 50%;
    transform: translate(0%, -50%);
    /* font-size: 10px; Set in JS */
    opacity: 0.8;
    display: flex;
    white-space: nowrap;
    transition: font-size 1s linear , opacity 1s linear;;
}
.US_tick{
    position: absolute;
    display: flex;
    justify-content: center;
    font-family: sans-serif;
    font-size: 10px;
    text-align: center;
    top: 5px;
    width: 1px;
}
.US_grid{
    position: absolute;
    /* top: 25px; Set in JS */
    /* bottom: 5px; Set in JS */
    width: 1px;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.05);
    transition: left 1s linear, top 1s linear, bottom 1s linear;
}

.US_axis{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s linear;
}

.US_menuButton{
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 45px;
    border-radius: 22.5px;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: white;
    box-shadow: inset 0 0 6px var(--buttonShadow);
    pointer-events: all;
    cursor: pointer;
    transition: top 0.5s ease;
}

.US_historyChartContainer{
    position: absolute; /* Important for positioning the graph legends.*/
    background-color: rgba(255, 255, 255, 0.05);
    padding: 10px;
    transition: all 1s linear, background-color 0.3s linear;
    border-radius: 10px;
}



.canvasChart{
    width: 100%;
    aspect-ratio: 16/9;
    pointer-events: all;
}
.legend{
    position: absolute;
    /* top: Set in JS */
    width: 90px;
    height: 30px;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 15px;
    transition: 1s linear, transform 0.3s ease;
}
.legend:hover{
    transform: scale(1.1) translate(0, 5px);
}


/*****************************************************************************************************************/
/**************************************      createWheel    ***************************************************/
/*****************************************************************************************************************/
/* iPhone-style vertical scroll wheel (driven by createWheel in script9.js). */
/* Per-instance overrides are set via inline style: --wheelItemH (set by JS). */
.wheelContainer {
    --wheelItemH: 40px;     /* Default; JS overrides this per instance. */
    position: relative;
    width: 150px;
    height: 250px;
    overflow: hidden;
    margin: 5px 0 0 0;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    pointer-events: all;       
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    /* box-shadow: inset 0 0 6px var(--buttonShadow); */
    cursor: grab;
}
.wheelContainer:active {
    cursor: grabbing;
}

.wheelList {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform;
    transform: translateY(0);
}

.wheelItem {
    height:      var(--wheelItemH, 40px);
    line-height: var(--wheelItemH, 40px);
    text-align: center;
    font-family: 'Nunito';
    font-size: 20px;
    font-weight: 400;
    color: var(--readableText);
    pointer-events: none;
    transform-origin: center center;
    white-space: nowrap;
}

.wheelItem.wheelItemSelected {
    color: #ffffff;
    font-weight: 700;
}

.wheelHighlight {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    height: var(--wheelItemH, 40px);
    transform: translateY(-50%);
    border-top: 1px solid var(--buttonShadow);
    border-bottom: 1px solid var(--buttonShadow);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

.wheelOverlayTop,
.wheelOverlayBottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 80px;
    pointer-events: none;
    z-index: 2;
}
.wheelOverlayTop {
    top: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}
.wheelOverlayBottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
}
/*****************************************************************************************************************/
/**************************************          ***************************************************/
/*****************************************************************************************************************/