/* Basic text style */
    body {
        font-family: "Noto Sans", sans-serif;
        text-align: left;
        color: #303032;
        background-color: #f0f0f0;
        font-size: 18px;
        min-height: 100vh;
        margin: 0;

        display: flex;
        flex-direction: column;
    }

/* ================================ *//* ===================================== *//* ================================ */
/* ================================ *//* THE STARTING SCREEN + SHARED ELEMENTS *//* ================================ */
/* ================================ *//* ===================================== *//* ================================ */

    .fa {

    }

    .fa.big {
        margin: 0 0.1em;
        font-size: 32px;
        transform: translateY(4px);
    }

    #start_window, #test_window, #results_window, #login_window, #profile_window, #editor_window {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    }

    .locked {
        pointer-events: none;
        opacity: 0.5;
        cursor: default;
    }

    .editor_frame {
        width: calc(100% - 2em);
        padding: 0 1em;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: row;
        gap: 0.25em;
    }

    .editor_controls {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.75em;
    }


    .editor_navigation {
        font-size: inherit;
        font-weight: bold;
        color: #303032;
        background-color: #ffffff;
        box-shadow: 1px 1px 5px #AAAAAC;
        border-radius: 10px;
        border: none;
        transition: 60ms background-color ease-in-out;

        margin: 0.4em 0;
        padding: 0.4em 0.8em;
        width: auto;
        min-width: 2em;

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

    .nav_numbers
    {
        display: inline-block;
        text-align: center;
        width: 1.4em;
        border: none;
        padding: 0.1em 0.1em;
        color: #303032;
    }

    .desc_editor, .example_editor {
        display: inline-block;
        font-weight: normal;
        font-size: inherit;

        margin: 0.5em 0.35em 0;
        padding: 0.5em 0.75em;
        max-width: calc(100% - 2.2em);
        overflow-x: scroll;
        min-height: 3.6em;
        width: 100%;
    }

    .example_editor {
        margin: 0 0.35em 1.5em;
    }

    .function {
        display: inline-block;
        font-size: inherit;
        margin: 0.2em 0.75em 0.15em;
        padding: 0.25em 0.75em;
        min-width: 6em;
        min-height: 1.35em;
        width: calc(100% - 1.5em - 1.5em - 0.4em);
        text-align: center;
        border: 0.2em solid rgba(49, 49, 51, 0.15);
        border-radius: 10px;
        font-weight: bold;
        overflow-x: hidden;
    }

    .descriptions, #options_holder {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .descriptions {
        width: 100%;
        max-width: 32em;
    }

    .notes, .vertical_frame, .scoring {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    }

    .vertical_frame {
        min-width: calc(34% - 1.5em);
        margin: 0 0.75em;
    }

    .corrector_frame {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

    .notes, .scoring {
        width: 33%;
        max-width: 27em;
        height: 47.77em;
    }

    .box.editor_side {
        height: calc(100% - 13.725em);
    }

    .box.editor_side_big {
        height: calc((100% - 13.85em) / 2 - 2.25em);
    }

    .box.editor_side_small {
        height: calc((100% - 13.85em) / 2  - 0.7em );
    }

    #note_editor {
        height: calc(100% - 3.2em - 1em);
        padding: 0.5em 0.35em;
        overflow-y: auto;
    }

    .editor_line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }

    .flex_center {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.5em;
    }

    .deletion_button {
        color: rgba(49, 49, 51, 0.35);
        width: 1em;
        padding: 0.4em 0.4em;

        position: absolute;
        right: 0.5em;
        bottom: 0.5em;

        cursor: pointer;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        border-radius: 6px;
    }

    .deletion_button:hover {
        color: #303032;
        background-color: #bebebe;
    }

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

    .title_editor {
        margin-bottom: 0.75em;
        max-height: 2.75em;
        padding: 0.2em 0.25em;
        overflow-y: scroll;
    }

    .points {
        width: 100%;
        margin: 0 0 1.65em;
        display: grid;
        grid-template-rows: repeat(6, auto);
        justify-items: center;
        align-items: center;
        grid-auto-flow: column;
        text-align: center;
    }

    .score_editor {
        width: 2em;
        /*margin: 0.2em 0;*/
        /*padding: 0.25em 0.35em 0.2em 0.2em;*/
        text-align: center;
        display: inline-block;
        font-size: inherit;
        margin: 0.2em 0.35em 0;
        padding: 0.25em 0.5em;

        font-weight: normal;
        color: #000000;
        background-color: rgba(255, 255, 255, 0.97);
        border: 0.2em solid rgba(169, 169, 171, 0.5);
        border-radius: 10px;
    }

    .inner
    {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        margin-top: -0.175em;
        margin-bottom: 0.9em;
        gap: 0.35em;
    }

    .correctness {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 50%;
    }

    .corrector_stats {
        width: calc(100% - 1em);
        margin: -0.5em 0.5em 0.25em;
        display: grid;
        grid-template-rows: repeat(2, 25%);
        justify-items: center;
        align-items: center;
        grid-auto-flow: column;
        text-align: center;
        gap: 0 1em;
    }

    .corrector_stat {
        width: calc(100% - 1.4em);
        min-width: 1em;
        max-width: 3em;

        display: inline-block;
        font-size: inherit;
        text-align: center;
        margin: 0.2em 0 0;
        padding: 0.25em 0.5em;
        font-weight: normal;
        color: #000000;
        background-color: rgba(255, 255, 255, 0.97);
        border: 0.2em solid rgba(169, 169, 171, 0.5);
        border-radius: 10px;
    }

    .corrector_stat.long {
        width: calc(100% - 1.4em - 1em);
        max-width: 10em;
    }

    .score_label{
        width: 9em;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
    }

    a.invisible {
        color: inherit;
        text-decoration: inherit;
    }

    a.icon_center, label.icon_center {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.4em
    }

    .selection {
        flex-wrap: wrap;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;

        margin: 0.25em 0;
    }

    .selection.horizontal {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 0.75em;
    }

    .selection.spacious {
        margin: 1em 0 0.5em
    }

/* The title box displayed at the top of the page */
    h2 {
        text-align: center;
        font-size: 30px;

        margin: 0 0 0.525em;
        padding: 0.5em 0 0.6em;
        width: 100%;

        color: #303032;
        background-color: #ffffff;
        box-shadow: 3px 3px 6px #e6e6e6;
    }

    .account {
        position: absolute;
        top: 0.95em;
        right: min(1.85em, 4.5%);
        height: 30px;
        text-decoration: none;
        font-weight: bold;
        color: rgba(49, 49, 51, 0.35);
    }

    .account:hover {
        color: #303032;
    }

    h3 {
        text-align: center;
        font-size: 26px;

        margin: -0.35em 0 0;
        padding: 0.55em 0 0.65em;
        width: 100%;

        font-weight: bold;
        font-style: italic;

        color: #303032;
        background-color: #ffffff;
    }

    h4 {
        text-align: center;
        font-size: 22px;

        margin: -0.35em 0 0;
        padding: 0.65em 0 0.45em;
        width: 100%;

        font-weight: bold;
        font-style: italic;

        color: #303032;
        background-color: #ffffff;
    }

    .subtitle {
        color: rgba(0, 0, 0, 0.33);
        font-size: 18px;
        margin-top: -1.5em;
    }

/* The main design of an element box */
    .box, .option, .editor_option, .result {
        margin: 0.55em 0.5em;
        padding: 1em 1.5em;
        max-width: 30em;
        width: 80%;

        text-align: justify;
        position: relative;

        color: #303032;
        background-color: #ffffff;
        box-shadow: 1px 1px 5px #AAAAAC;
        border-radius: 5px;

        transition: 70ms color ease-in-out, 70ms background-color ease-in-out;
    }

/* Top line displayed at the top of a .box element */
    .top_line {
        width: calc(100% + 3em);
        height: 0.3em;
        margin: -1em -1.5em 0.8em -1.5em;
        border-radius: 10px 10px 0 0;
        background-color: #AAAAAC;
        transition: 70ms background-color ease-in-out;
    }
    .top_line.green_line {background-color: #41A059;}
    .top_line.blue_line {background-color: #5F82D6;}
    .top_line.yellow_line {background-color: #F0A422;}
    .top_line.purple_line {background-color: #A25197;}

/* Popup window*/
    #popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -55%);

        margin: 0;
        padding: 1.4em 2.1em;
        max-width: 27em;
        width: 75%;

        text-align: justify;

        color: #303032;
        background-color: #ffffff;
        border-radius: 10px;

        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);

        z-index: 1001;
    }

    .dark {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        background-color: rgba(93, 93, 96, 0.5);
        width: 101vw;
        height: 101vh;

        z-index: 1000;
    }

/* Starting button */
    .start_button, .navigation_button, .radio_label, .results_button, .popup_button, .data_button {
        font-size: inherit;
        font-weight: bold;
        text-align: center;
        color: #303032;
        background-color: #ffffff;

        margin: 0.5em 0;
        padding: 1em 1em;
        max-width: 80%;
        width: 10em;
        cursor: pointer;

        box-shadow: 1px 1px 5px #AAAAAC;
        border-radius: 10px;
        border: none;
        transition: 10ms background-color ease-in-out, 10ms color ease-in-out;
    }

    .start_button:hover, .navigation_button:hover, .radio_label:hover, .results_button:hover, .popup_button:hover, .data_button:hover {
        color: #303032;
        background-color: #bebebe;
    }

    .start_button:disabled, .navigation_button:disabled, .radio_label:disabled, .results_button:disabled, .popup_button:disabled, .data_button:disabled {
        color: rgba(0, 0, 38, 0.4);
        background-color: rgba(161, 161, 161, 0.4);
    }

    .start_button {
        max-width: 100%;
    }

    .navigation_button {
        max-width: 100%;
        min-width: 10ch;
    }


.data_button {
        margin: 0.4em 0;
        padding: 0.5em 0.5em;
        max-width: 80%;
        width: 8em;
    }

    .data_button.add {
        color: rgba(49, 49, 51, 0.35);
        width: calc(100% - 1em);
        max-width: 30em;
    }
    .data_button.add:hover {
        color: #303032;
        background-color: #bebebe;
    }

    .data_button.small {
        width: 1.2em;
    }

    .data_button.stretch {
        width: 15em;
        min-width: 8em;
    }

    .data_button.fit {
        width: calc(80% + 3em);
        max-width: inherit;
    }

    .loading {
        color: #3d3d40;
        background-color: rgba(161, 161, 161, 0.4);
    }

/* Align elements inside a checkbox label */
    label.checkbox{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin: 0.2em 0 0;
        padding: 0.25em 0;
    }

    label.checkbox.flex {
        flex-wrap: wrap;
    }

    .search {
        padding: 0.75em 1.25em;
        max-width: calc(30em + 0.5em);
        width: calc(80% + 0.5em);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.3em;
    }

    .search_box{
        text-align: left;

        width: 100%;
        padding: 0.25em 0.5em;

        font-weight: normal;

        color: #000000;
        background-color: rgba(255, 255, 255, 0.97);
        border: 0.2em solid rgba(169, 169, 171, 0.5);
        border-radius: 10px;
    }

    .search_box::placeholder {
        color: rgba(49, 49, 51, 0.35);
    }

    label.input {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        margin: 0.35em 0;
        padding: 0.25em 0;
        font-weight: bold;
        gap: 0.25em;
    }

    label.setting {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        margin: 0.35em 0;
        padding: 0.25em 0;
        gap: 0.25em;
    }

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

    div.tight_flex_container {
        margin: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;

        max-width: 33em;
        width: calc(80% + 3em);
        gap: 0.4em;
    }

    div.flex_container {
        margin: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        max-width: 33em;
        width: 100%;
        gap: 1em;
    }

    label.radio {
        width: 15.75em;
        margin: 0.2em 0 0;
        padding: 0.25em 0;

        text-align: center;
        flex-grow: 1; flex-basis: 0;
        cursor: pointer;

        color: rgba(169, 169, 171, 0.5);
        font-weight: bold;
        background-color: rgba(255, 255, 255, 0.97);
        border: 0.2em solid rgba(169, 169, 171, 0.5);
        border-radius: 10px;

        transition:
        80ms background-color ease-in-out,
        80ms color ease-in-out,
        80ms border-color ease-in-out;

    }

    label.radio input {
        width: 0; height: 0;
        position: absolute;
        opacity: 0;
        cursor: default;
    }

    label.radio:hover {
        background-color: rgba(169, 169, 171, 0.25);
    }

    label.radio:has(input:checked).blue {
        color: #FFFFFFFF;
        background-color: #5F82D6;
    }

    label.radio:has(input:checked).green {
        color: #FFFFFFFF;
        background-color: #41A059;
    }

    label.radio:has(input:checked).yellow {
        color: #FFFFFFFF;
        background-color: #F0A422;
    }

    label.radio:has(input:checked).purple {
        color: #FFFFFFFF;
        background-color: #A25197;
    }

    /*!* Checkbox border color *!*/
    /*label.radio.green  {border-color: #41A059;}*/
    /*label.radio.blue   {border-color: #5F82D6;}*/
    /*label.radio.yellow {border-color: #F0A422;}*/
    /*label.radio.purple {border-color: #A25197;}*/

    /* Checkbox border color */
    label.radio:has(input:checked).green  {border-color: #41A059;}
    label.radio:has(input:checked).blue   {border-color: #5F82D6;}
    label.radio:has(input:checked).yellow {border-color: #F0A422;}
    label.radio:has(input:checked).purple {border-color: #A25197;}

    /* Checkbox style */
    input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        font: inherit;

        width: 1.2em;
        height: 1.2em;
        margin: 0 0.25em;
        border-radius: 0.20em;

        border: 0.15em solid #AAAAAC;
        background-color: white;

        transform: translateY(+0.1em);
        transition: 50ms background-color ease-in-out;

        display: grid;
        place-content: center;
    }

/* Checkbox checkmark style */
    input[type="checkbox"]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;

        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        box-shadow: inset 1em 1em white; /* Checkmark color */
        transition: 75ms transform ease-in-out;
        transform: scale(0);
    }
    input[type="checkbox"]:checked::before{
        transform: scale(1);
    }

    input[type="checkbox"].monitor {
        font-size: inherit;
        border: 0.2em solid rgba(169, 169, 171, 0.5);
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
        margin-right: 0.4em;
    }

    input[type="checkbox"].monitor::before {
        width: 0.8em;
        height: 0.8em;
    }

    /* Checkbox border color */
    input[type="checkbox"]        {border-color: rgba(169, 169, 171, 0.5)}
    input[type="checkbox"].green  {border-color: #41A059;}
    input[type="checkbox"].blue   {border-color: #5F82D6;}
    input[type="checkbox"].yellow {border-color: #F0A422;}
    input[type="checkbox"].purple {border-color: #A25197;}

/* Checked checkbox background color */
    input[type="checkbox"]:checked        {background-color: #AAAAAC;}
    input[type="checkbox"]:checked.green  {background-color: #41A059;}
    input[type="checkbox"]:checked.blue   {background-color: #5F82D6;}
    input[type="checkbox"]:checked.yellow {background-color: #F0A422;}
    input[type="checkbox"]:checked.purple {background-color: #A25197;}

    input[type="checkbox"]:disabled
    {
        border-color: rgba(169, 169, 171, 0.75);
    }

    input[type='button']:enabled:hover
    {
        cursor: pointer;
    }

    input {
        font: inherit;
        background: none;
    }

    input[type='text'] {
        cursor: text;
    }

    select {
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;

        font-family: inherit;
    }

    input.profile, select.profile {
        font-size: inherit;
        text-align: left;
        min-width: 10em;
        width: 15em;

        margin: 0.2em 0.35em 0;
        padding: 0.25em 0.5em;

        font-weight: normal;

        color: #000000;
        background-color: rgba(255, 255, 255, 0.97);
        border: 0.2em solid rgba(169, 169, 171, 0.5);
        border-radius: 10px;
    }

    input.profile.short, select.profile.short {
        width: 6em;
        min-width: inherit;
    }

/* The test id display*/
    #test_id, .id_field {
        text-align: center;
        font-size: 24px;
        font-weight: bold;

        max-width: 6.58em;
        margin: 0.2em auto 0.2em;
        padding: 0.05em 0.075em 0.1em;

        color: #d7d7d7;
        border: 0.15em solid rgba(169, 169, 171, 0.5);
        border-radius: 10px;
    }

    .id_field {
        width: 100%;
        max-width: 100%;
        font-size: 18px;
        margin: 0.4em 0;
        padding: 0.5em 0.5em;
        border: 0.2em solid rgba(169, 169, 171, 0.5);
    }

    #test_id::placeholder, .id_field::placeholder
    {
        color: #d7d7d7;
    }

    #test_id.active, .id_field.active
    {
        color: #303032;
    }

    @keyframes flash_red{
        0% {
            border-color: #d1afcd;
            color: #A25197;
            background-color: #edd3ea;
        }
        100% {
            border-color: rgba(169, 169, 171, 0.5);
            color: #303032;
            background-color: #ffffff;
        }
    }

    @keyframes flash_dark_red{
        0% {
            border-color: #d1afaf;
            color: #a04141;
            background-color: #edd3d3;
        }
        100% {
            border-color: rgba(49, 49, 51, 0.15);
            color: #303032;
            background-color: #ffffff;
        }
    }

    @keyframes flash_green{
        0% {
            border-color: #b0d1b8;
            color: #41A059;
            background-color: #d3edda;
        }
        100% {
            border-color: rgba(169, 169, 171, 0.5);
            color: #303032;
            background-color: #ffffff;
        }
    }

    input.flash_red {
        animation: flash_red 0.75s ease-in-out;
    }
    input.flash_green {
        animation: flash_green 0.75s ease-in-out;
    }

    div.flash_dark_red {
        animation: flash_dark_red 0.75s ease-in-out;
    }

/* Makes the text inside the element unselectable */
    .unselectable {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .text {
        margin: 0.9em 0;
    }

    .text_highlight {
        font-weight: bold;
        font-style: italic;
        color: rgba(49, 49, 51, 0.95);
    }

    .text_info {
        font-size: 16px;
        margin: 0.75em 0 0;
        font-style: italic;
        color: rgba(49, 49, 51, 0.5);
    }

    .monospace {
        font-family: monospace;
    }

    #monitor_list {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

/* ================================ *//* ===================================== *//* ================================ */
/* ================================ *//*           THE TEST ELEMENTS           *//* ================================ */
/* ================================ *//* ===================================== *//* ================================ */

    .progress_bar_border {
        border: 4px solid #AAAAAC;
        width: calc(90% - 8px);
        max-width: calc(29em - 8px);
        margin: 0;
        border-radius: 10px;
    }

    .progress_bar {
        padding: 0.25em 1px 0.35em;
        margin: -1px;
        text-align: center;
        min-width: 6ch;
        background-color: #AAAAAC;
        font-weight: bold;

        transition: 250ms width ease-in-out;
    }

    .options_holder, #options_holder {
        width: 100%;
        max-width: 80em;
        margin: 0.4em 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        flex-direction: row;
    }

    .editor_option {
        position: relative;
        text-align: justify;
        min-height: 17em;
        width: calc(100% - 3em);
        max-width: 28em;
    }

    .option {
        text-align: justify;
        min-height: 17em;
        max-width: calc(29em - 3em);
        width: calc(90% - 3em);
    }

    .selected, .radio_label:has(input:checked) {
        background-color: #ddf1e6;
        box-shadow: 1px 1px 8px rgba(66, 161, 90, 0.6);
        color: #326232;
    }

    .description, .example {
        margin: 0 0.2em 0.6em;
    }

    .example {
        font-style: italic;
    }

    .buttons_holder {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        gap: 0.2em;

        margin: 0 auto 0;
        padding: 0 0 0.2em;
        width: 90%;
        max-width: 29em;
    }

    input[name="sureness_buttons"] {
        -webkit-appearance: none;
        appearance: none;
        font: inherit;
        width: 0; height: 0;
        position: absolute;
        opacity: 0;
        cursor: default;
    }

    .radio_label {
        max-width: 20%;
    }

    .bottom_bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;

        font-size: 15px;

        width: 100%;
        padding: 0.2em 0;
        margin-top: 8em;

        color: rgba(49, 49, 51, 0.325);
        background-color: rgba(255, 255, 255, 0.4);
        box-shadow: -3px -3px 6px rgba(230, 230, 230, 0.8);
    }

    a {
        color: rgba(49, 49, 51, 0.4);
    }

    .bottom_bar_content {
        margin: 0.2em 1em;
    }

    .scoreboard_line
    {
        width: calc(100% - 1.5em - 0.4em);
        min-height: 1.5em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;

        margin: 0.2em 0;
        padding: 0.25em 0.75em;

        color: #000000;
        background-color: rgba(255, 255, 255, 0.97);
        border: 0.2em solid rgba(169, 169, 171, 0.5);
        border-radius: 10px;
    }

    .side_line {
        align-self: stretch;
        height: calc(100% + 0.5em + 0.3em);
        margin: -0.4em 0.4em 0 -0.75em;
        width: 0.3em;
        border-radius: 0.35em 0 0 0.35em;
        background-color: #AAAAAC;
        transition: 70ms background-color ease-in-out;

    }
    .side_line.green_line  {background-color: #41A059;}
    .side_line.blue_line   {background-color: #5F82D6;}
    .side_line.yellow_line {background-color: #F0A422;}
    .side_line.purple_line {background-color: #A25197;}

    .monitor_flex, .monitor_line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0.25em 0;
    }

    .monitor_label {
        margin: 0.65em 0.25em 0 0;
    }

    .transparent
    {
        color: rgba(0, 0, 0, 0.5);
    }

    .answers {
        height: 23.25em;
        overflow-y: auto;
    }

    .scoreboard_frame {
        margin: 0.8em -1em 0;
        padding: 0.1em 0.6em;
    }

    .progress_holder
    {
        text-align: center;
        width: 5em;
        margin: 0.25em auto -0.2em;
        font-weight: bold;
    }

    .option_holder
    {
        display: flex;
        overflow-x: auto;
        width: calc(100% + 0.925em);
        padding: 0.65em 0.2em 1em;
        margin: 0 -0.85em;
    }

    .option_box
    {
        min-width: calc(100% - 2em - 0.5em);
        margin: 0 0.25em;
        padding: 1em 1em;
        border: 0.2em solid rgba(169, 169, 171, 0.5);
        border-radius: 10px;
    }



/* ================================ *//* ===================================== *//* ================================ */
/* ================================ *//*         RESULTS PAGE ELEMENTS         *//* ================================ */
/* ================================ *//* ===================================== *//* ================================ */

    .types_holder {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    }

    .types_holder.onlyTypes
    {
        flex-direction: row;
        max-width: 100%;
        flex-flow: row wrap;
    }

    .result {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        min-height: 10em;
        max-width: calc(29em - 3em);
        width: calc(90% - 3em);
        padding: 1em 1.5em 1.5em;
    }

    .result.onlyType {
        align-self: stretch;

        width: calc(25% - 4em);
        min-width: 15em;
    }

/* Functions stats graphs */

    .graph_holder {
        height: 13.5em;
        padding: 0.25em 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .graph_axis {
        height: 90%;
        width: 20%;
        margin: 0.4em 0.3em;
        display: grid;
        grid-template-rows: 50% 50%;
        grid-gap: 6px 0;
        justify-items: center;
        text-align: center;
    }

    .graph_legend {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        margin: 0.2em;
        height: 1.5em;

        white-space: nowrap;
    }

    .graph_bar {
        background-color: #AAAAAC;
        color: #ffffff;

        width: 80%;
        max-width: 3.25em;
        min-height: 0;
        max-height: calc(100% - 1.5em);

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .top .graph_bar { border-radius: 4px 4px 2px 2px; }
    .bottom .graph_bar { border-radius: 2px 2px 4px 4px; }

    .graph_bar.green_line {background-color: #41A059;}
    .graph_bar.blue_line {background-color: #5F82D6;}
    .graph_bar.yellow_line {background-color: #F0A422;}
    .graph_bar.purple_line {background-color: #A25197;}

    .graph_side {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .graph_side.bottom { justify-content: flex-start; }
    .graph_side.top { justify-content: flex-end; }

    .function_explanation {
        margin: 0 1em;
    }

    .results_button {
        width: 48%;
    }

    .popup_button {
        min-width: calc(50% - 15px);
        max-width: 100%;
    }

    #functions_graph {
        padding-bottom: 1.45em;
    }

    .help_holder {
        position: relative;
        width: 100%
    }

    .help {
        position: absolute;
        right: -0.8em;
        bottom: -1em;
        min-width: 2em;
        min-height: 2em;

        text-align: center;


        color: rgba(188, 188, 188, 0.65);
        background-color: rgba(0, 0, 0, 0);
        border-radius: 8em;
        font-weight: bold;
        border: rgba(188, 188, 188, 0.65) solid 3px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
    }

    #function_help
    {
        margin: 0;
        width: 100%;
        padding-top: 1.25em;
    }

    .help.active {
        color: rgba(255, 255, 255);
        background-color: #AAAAAC;
        border-color: #AAAAAC;
    }

/* Divider between the functions stats and the types scoreboard */
    .divider {
        max-width: 30em;
        width: 100%;
        border-top: 4px dotted rgba(49, 49, 51, 0.15);
        margin: 0.85em auto;
    }

 /* A type card */
    .type_name {
        text-align: center;
        font-size: 40px;
    }
    .green  { color: #41A059; }
    .blue   { color: #5F82D6; }
    .yellow { color: #F0A422; }
    .purple { color: #A25197; }
    .bold { font-weight: bold; }

    .type_score {
        margin-top: -0.2em;
        text-align: center;
        color: rgba(49, 49, 51, 0.7);
    }

    .type_functions {
        font-size: 30px;
        margin: 0.25em 0;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        gap: 0.5ch;
    }

    .hidden {
        display: none;
    }

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

    ::-webkit-scrollbar-track {
        background: #f2f2f2; /* Light gray background similar to Firefox's track */
    }

    ::-webkit-scrollbar-thumb {
        background: #bdbdbd; /* Darker gray thumb similar to Firefox's thumb */
        border-radius: 5px; /* Rounded corners for the thumb */
    }

    @media screen and (max-width: 800px)
    {
        .answers {
            height: auto;
        }

        .editor_frame {
            flex-wrap: wrap;
        }

        #title_holder {
            font-size: 21px;
            width: calc(100% - 1.2em);
            padding-left: 0.6em;
            padding-right: 0.6em;
        }

        .box, .option, .editor_option, .result, #popup {
            text-align: left;
        }

        .mobile_hidden {
            display: none;
        }

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

        .radio.icon_flex {
            padding: 0.45em 0 0.35em 0
        }

    }

    @media screen and (max-width: 1600px)
    {
        .editor_mobile_shrink {
            width: 1.25em;
        }

        .editor_mobile_hidden {
            display: none;
        }
    }

    @media screen and (max-width: 1300px)
    {
        .editor_frame {
            flex-direction: column;
            align-items: center;
        }

        .vertical_frame { order: 0; }
        .scoring { order: 1; }
        .notes { order: 2; }

        .notes, .scoring {
            width: 100%;
            max-width: 35em;
            height: auto;
        }

        .score_editor {
            width: 1.25em;
        }

    }

    @media screen and (max-width: 500px) {
        .monitor_flex {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .mobile_hidden {
            display: none;
        }
    }