:root {
    --header-height-mobile: 70px;
    --footer-height-mobile: 6dvh;
  }

@media (max-width: 1000px) {

    /* --------------------------------------------------------------------------------------------- */
    /* --------------------------------------- Progress Bars --------------------------------------- */
    
    .progress-simple {
        background-color: #fff;
        height: 10px;
        /* width: 100%; */
        padding: 2px;
        border-radius: 100px;
        margin-top: 0;
    }
    
    .progress-done-simple {
        height: 100%;
        background-color: #ff565d;
        border-radius: 100px;
        display: grid;
        place-items: center;
        width: 5%;
        transition: width .5s ease;
    }
    
    .progress {
        background: linear-gradient(0.25turn, #0D7384, #54A252, #ffda36);
        height: 10px;
        width: 100%;
        padding: 2px;
        border-radius: 100px;
        margin-top: 0;
    }
    
    .progress-done {
        height: 100%;
        background-color: #fff;
        border-radius: 100px;
        display: grid;
        place-items: center;
        width: 5%;
        transition: width .5s ease;
    }
    
    .progress-header {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 12pt;
        margin-bottom: 1%;
        margin-top: 0;
        text-transform: uppercase;
        color: #ff565d;
        text-align: center;
        display: block;
    }
    
    .progress-marker-1 {
        height: 22px;
        width: 0;
        border-left: 1px solid #000;
        position: relative;
        left: -19dvw;
    }
    .progress-marker-2 {
        height: 22px;
        width: 0;
        border-left: 1px solid #000;
        position: relative;
        left: -13.3dvw;
    }
    
    .progress-star-1 {
        position: relative;
        top: -20px;
        left: -10px;
    }
    .progress-star-2 {
        position: relative;
        top: -20px;
        left: -10px;
    }
    
    .progress-star {
        margin-left: 5px;
        vertical-align: middle;
    }
    
    .progress-text {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 12pt;
        text-transform: uppercase;
        color: #ff565d;
        text-align: center;
    }

    /* --------------------------------------------------------------------------------------------- */
    /* ------------------------------------------ Menu --------------------------------------------- */

    .no-bs-czech-button {
        font-family: 'Bambe', serif !important;
        text-transform: uppercase;
        font-size: 30pt !important;
        line-height: 30px !important;
        height: 27px;
        white-space: nowrap;
        text-decoration: none;
        color: #000;
    }

    .no-bs-czech-span {
        font-size: 7pt;
        line-height: 7pt;
        margin-left: 5px;
        font-family: 'Montserrat', serif;
        text-transform: uppercase;
    }

    .no-bs-czech-button:visited {
        color: #000;
    }

    .open-menu-button {
        background-image: url("../images/menu/3-lines-black.svg");
        background-size: contain;
        background-position: center;
        padding: 5px !important;
        background-color: #fff !important;
        width: 40px;
        height: 40px;
        border: 0px;
    }

    .menu {
        width: 100%;
        height: var(--header-height-mobile);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        z-index: 6;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #fff;
        box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
    }

    .menu-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 20px;
        justify-content: space-around;
    }

    .menu-container-brand-name {
        justify-content: flex-start;
    }

    .menu-container-links-logged-out {
        flex-grow: 1;
        justify-content: center;
        gap: 5dvw;
    }

    .menu-container-social-media-buttons {
        gap: 10px;
        justify-content: flex-end;
    }

    .menu-container-register-button {
        margin-right: 20px;
    }

    .menu-container-dropdown-logged-in {
        justify-content: flex-end;
        margin-right: 10px;
    }

    .menu-hamburger-container {
        display: none;
        flex-direction: column;
        position: fixed;
        top: var(--header-height-mobile);
        right: 0;
        z-index: 7;
        padding-top: 5px;
        background-color:#fff;
        height: 100%;
        box-shadow: rgba(99, 99, 99, 0.2) -2px 8px 8px 0;
    }

    .menu-hamburger-container h1 {
        font-size: 20pt;
        line-height: 10pt;
        padding: 10px 10px 10px 0;
        margin: 10px;
        border-bottom: 2px solid #ff565d;
        width: fit-content;
    }

    .menu-hamburger-container a {
        padding: 0 10px 10px;
    }

    /* --------------------------------------------------------------------------------------------- */
    /* ------------------------------------------ Forms -------------------------------------------- */

    label {
        font-family: 'Roboto', sans-serif;
        font-size: 16pt;
        font-weight: 500;
    }

    input {
        border: 2px solid #a0a0a0;
        border-radius: 50px;
        padding: 5px;
        font-size: 12pt;
        font-family: 'Roboto', sans-serif;
        font-weight: 500;
        align-self: flex-end;
    }

    input:focus {
        border: 2px solid #000;
    }

    /* input[type="text"] {
        min-width: 200px;
    }

    input[type="password"] {
        min-width: 200px;
    }

    input[type="email"] {
        min-width: 250px;
    } */

    input[type="checkbox"] {
        align-self: flex-start;
    }

    input[type="submit"] {
        color: #fff;
        background-color: #000;
        text-decoration: none;
        cursor: pointer;
        border: 0;
        border-radius: 50px;
        white-space: nowrap;
        padding: 10px 70px 10px 70px;
        font-size: 12pt;
        font-weight: 500;
        align-self: center;
        /* min-width: 200px; */
    }

    input[type="submit"]:hover {
        background-color: #ff565d;
    }

    .form-container {
        display: flex;
        margin: 0 auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        height: 100%;
        max-width: 90dvw;
        margin-top: 3dvh;
    }

    .form-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    .form-error-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .form-js-error-row {
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .form-button-row {
        justify-content: center !important;
    }

    .form-column {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .form-column p {
        margin: 2% 0 2% 0;
        text-align: center;
    }

    .dashboard-button-box h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        background-color: #000;
        color: #fff;
        border-radius: 50px;
        padding: 15px;
        margin-top: 1%;
        margin-bottom: 1%;
    }

    .dashboard-button-box p {
        font-family: 'Roboto', sans-serif;
        font-size: 25pt;
        margin: 3% 0 3% 0;
    }

    .account-form-row label, .account-form-row div>label {
        display: flex;
        width: 100dvw;
        text-align: left;
    }

    /* --------------------------------------------------------------------------------------------- */
    /* --------------------------------------- Containers ------------------------------------------ */

    .star-scores-container {
        display: none;
        margin: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100dvw;
    }

    .star-scores-row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 1dvw;
        width: 100dvw;
        margin-bottom: 2dvh;
    }

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

    .star-scores-content-box {
        padding: 1% 0 1% 0;
        width: 100%;
    }

    .star-scores-column-header {
        width: 100%;
    }

    .star-scores-table {
        width: 100%;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #000;
        border-collapse: collapse;
    }

    .star-scores-table thead {
        background-color: #000;
        color: #fff;
    }

    .star-scores-table thead>tr>td {
        padding: 5px;
    }

    .star-scores-table tbody>tr:hover {
        background-color: #fff;
    }
    
    .star-scores-table-not-attempted {
        background-color: #eeeeee;
    }

    .star-scores-table-blue-star {
        background-color: #B0ECF7;
    }

    .star-scores-table-gold-star {
        background-color: #ffeea5;
    }

    .star-scores-table-green-star {
        background-color: #A9ECA8;
    }
    
    .star-scores-table-container {
        width: 100%;
        height: 0;
        overflow: hidden;
        max-height: 600px;
    }

    .user-stats-column-header {
        width: 100%;
        background-color:#e7e7e7;
        padding: 10px 0 10px 0;
        margin: 3% 0 3% 0;
    }

    .account-content-box {
        padding: 0 3% 0 3%;
        width: 94%;
        text-align: left;
    }

    .account-content-box>.button-narrow {
        width: 100% !important;
    }

    .error-row {
        display: none;
    }
    
    .account-form-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 10px;
        margin: 3% 0 3% 0;
        flex-wrap: wrap;
    }

    .account-button-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 96%;
        gap: 10px;
        margin: 2%;
        flex-wrap: wrap;
    }

    .account-content-box>form {
        border-top: 2px solid #e7e7e7;
    }

    .account-content-box input[type="text"], .account-content-box input[type="password"] {
        flex: 1;
        align-self: flex-start;
    }

    .account-content-box button {
        flex: 1;
    }

    #change-username-form {
        border: 0px;
    }
    
    .account-column-header {
        width: 100%;
        background-color:#e7e7e7;
    }

    .tutorial-start-box, .tutorial-end-box {
        /* color: #0D7384; */
        text-align: center;
        /* background-color: #fff; */
        /* border-radius: 20px; */
        width: 94%;
        height: fit-content;
        /* border: 3px solid #000; */
        padding: 3%;
        margin: 0px auto;
    }

    .tutorial-button-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .tutorial-start-container, .tutorial-end-container {
        position: absolute;
        bottom: 0px;
        left: -500px;
        width: 100dvw;
        height: fit-content;
        margin-bottom: 3%;
        background-color: #fff;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
        z-index: 101;
    }

    .daily-word-container {
        background-color:#dbfaff;
        width: 94%;
        padding: 1% 3% 1% 3%;
        text-align: center;
        margin-bottom: 3%;
    }

    .writing-practice-results {
        margin-top: 2dvh;
        width: 96dvw;
        max-height: 229dvh;
        overflow: auto;
        background-color: #dbfaff;
        padding: 2dvw;
    }

    .writing-practice-user-input {
        width: 90dvw;
        border: 2px solid #000;
    }

    .exercise-settings-container {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100dvw;
        height: 100dvh;
        background-color: #ffffff;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: auto;
        margin: 0px;
        z-index: 101;
    }

    .user-response-and-checkmark-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .exercise-trainer-content {
        background-color:#dbfaff;
        width: 100dvw;
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 3%;
    }
    
    .hidden-container {
        display: none;
        width: 94%;
        text-align: center;
        margin: 0px auto;
        gap: 10px;
        padding: 3%;
    }
    
    .hidden-content {
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100dvw;
        height: 100dvh;
        background-color: #fff;
        z-index: 101;
    }

    .exercise-timer-text {
        color: #000;
        font-family: 'Roboto', sans-serif;
        background-color: #dbfaff;
        font-size: 12pt;
        line-height: 12pt;
        z-index: 2;
        width: 100%;
        margin: 0px;
        border-radius: 12px;
        padding: 10px;
        white-space: nowrap;
    }

    .exercise-timer-text-green {
        color: #fff;
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 13pt;
        white-space: nowrap;
    }

    .dashboard-buttons-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100dvw;
        background-color: #fff;
    }

    .dashboard-button-box {
        display: flex;
        width: 94%;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding: 3%;
        overflow: hidden;
    }

    .exercise-row-header-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 96%;
        padding: 2% 2% 0 2%;
        gap: 10px;
    }

    .exercise-row-header-text-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        text-align: left;
        width: 100%;
    }

    .exercise-row-image-container {
        width: 75px;
        height: 75px;
    }

    .exercises-row-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        gap: 5px;
        overflow-x: hidden;
    }
    
    .exercise-row-box-container {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        overflow-x: auto;
        width: 98dvw;
        padding: 0 1dvw 0 1dvw;
        background-color: #fff;
    }

    .exercise-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #ffffff;
        padding: 1%;
        min-width: 200px;
    }

    .exercise-box-progress-container {
        width: 96%;
        border: 2px solid #000;
        border-radius: 15px;
    }

    .exercise-box-description-container {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 5% 0 5% 0;
    }

    .exercise-box-description-container p {
        margin: 0;
    }

    .exercises-block-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        overflow-y: visible;
        margin-top: 3%;
        text-align: center;
    }

    .exercises-button-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 3%;
        gap: 10px;
    }

    .exercise-progress-tooltip {
        display: none;
        padding: 10px;
        background-color: #fff;
        box-shadow: rgba(0, 0, 0, 0.16) 0 1px 4px;
        margin: 0;
    }

    .blog-pro-tip {
        background-color: #dbfaff;
        padding: 20px;
        margin: 10px;
    }

    .blog-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        justify-content: center;
        max-width: 94dvw;
        margin-bottom: var(--footer-height-mobile);
    }

    .blog-divider-line {
        width: 100%;
        margin: 3% auto;
        height: 0;
        position: relative;
        top: -2px;
        z-index: 1;
        /* border-radius: 50%; */
        border-bottom: 1px solid #000;
    }

    .breadcrumb-container {
        width: 96%;
        text-align: left;
        margin: 0;
        padding: 2%;
        background-color: #eeeeee;
        display: flex;
        flex-direction: row;
        align-items:center;
        justify-content: space-between;
    }

    .blog-table-of-contents {
        background-color: #eeeeee;
        margin-top: 20px;
        padding: 20px;
    }

    .footer-container-social-media-buttons {
        display: flex;
        flex-direction: row;
        gap: 10px;
        justify-content: center;
        align-items: center;
        margin-bottom: 5%;
    }

    .homepage-exercise-box {
        display: flex;
        flex-direction: row;
        padding: 0;
        margin: 0 0 8% 0;
        cursor: pointer;
        align-items: center;
        justify-content: flex-start;
    }
    
    .homepage-blog-box {
        display: flex;
        flex-direction: column;
        /* padding: 5%;
        padding-top: 2%; */
        margin: 0 0 8% 0;
        cursor: pointer;
        align-items: center;
        /* background-color:#eeeeee; */
        justify-content: center;
    }
    
    .homepage-container-3-side-scroller {
        margin: 0px;
        margin-top: 3%;
        margin-bottom: 3%;
        gap: 10px;
    }

    .homepage-container-4-grey {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 90%;
        margin: 0;
        margin-bottom: 10px;
        padding: 5% 5% 20px 5%;
        background-color: #e7e7e7;
    }

    .homepage-container-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 90%;
        margin: 0 auto;
        padding: 7% 5% 5% 5%;
        background-color: #fff;
    }

    .homepage-container-4-side-scroller {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .homepage-header-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .homepage-header-container-mask-picture {
        background-image: url('../images/PXL_20210808_145715937.jpg');
        background-size: cover;
        background-position: center;
        background-position-x: center;
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        /* mask: linear-gradient(0.25turn, black, #00000036, #00000025); */
        /* mask: #00000049;
        mask-mode: alpha; */
        /* backdrop-filter: blur(20px); */
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .homepage-header-container-mask {
        background-color: #fff;
        /* mask: linear-gradient(0.25turn, black, transparent);
        backdrop-filter: blur(20px); */
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: .8;
    }

    .homepage-header-container-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        z-index: 3;
        margin: 2dvh 3dvw 2dvh 3dvw;
        position: relative;
        width: 94dvw;
        gap: 3dvh;
    }
    
    .homepage-container-0 {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
        background-size: cover;
    }
    
    .content {
        margin-top: var(--header-height-mobile);
        padding-bottom: var(--footer-height-mobile);
        width: 100%;
        max-width: 100dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow-x: hidden;
        flex: 1;
        text-align: center;
    }
    
    .homepage-container-0 {
        position: relative;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
        background-size: cover;
    }
    
    .boarding-popover-item-animated {
        padding: 10px !important;
    }
    
    /* --------------------------------------------------------------------------------------------- */
    /* ------------------------------------------ Text --------------------------------------------- */

    .boarding-popover-description {
        font-family: 'Roboto', sans-serif !important;
        font-size: 12pt !important;
    }

    .boarding-popover-title {
        font-family: 'Roboto', sans-serif !important;
        font-size: 16pt !important;
    }

    .star-scores-column-header h3 {
        font-size: 35px;
        font-weight: 500;
        margin: 10px 0 10px 0 !important;
        padding: 10px 0 10px 0;
        background-color:#e7e7e7;
    }

    .user-stats-content-box span {
        color:#ff565d !important;
        font-size: 16pt !important;
    }

    .user-stats-column-header h3 {
        margin: 0;
    }

    .account-column-header h3 {
        padding: 3% 0 3% 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .tutorial-start-box p, .tutorial-end-box p {
        font-family: 'Roboto', sans-serif;
        margin-top: 0px;
        font-size: 13pt;
    }

    .writing-practice-results p {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        color: #000;
        line-height: 15pt;
    }

    .exercise-settings-container h3 {
        margin-top: 0;
        margin-bottom: 1%;
        background-color: #e7e7e7;
        width: 96%;
        padding: 2%;
        text-align: center;
    }
    
    .hint {
        font-size: 15pt !important;
        line-height: 15pt !important;
        font-style: italic;
        color:#b3b3b3 !important;
        margin: 0px 0px 5px 0px;
        background-color: #fff;
        padding: 3% 0 3% 0;
        width: 100%;
    }

    .hint span {
        color:#b3b3b3 !important;
    }

    .lesson-generated-question p {
        font-size: 25pt !important;
    }

    .lesson-generated-question span {
        font-size: 15pt !important;
    }

    .exercise-content p {
        margin: 3% 0 3% 0;
    }

    .exercises-duels-header-row h1 {
        margin: 0px;
    }

    .exercise-level-instructions {
        color: #000 !important;
        font-family: 'Roboto', sans-serif;
        margin-top: 0;
        margin-bottom: 2dvh;
    }

    .form-error-row p, .form-js-error-row p {
        color:#ff565d;
        margin: 0px;
        padding: 2%;
        text-align: center;
        width: 96%;
    }

    .form-js-error-row p {
        color:#ff565d;
        margin: 0px;
        padding: 1%;
        text-align: center;
        font-size: 12pt;
        width: 98%;
    }

    .exercise-row-header-text-container h3 {
        font-size: 26px !important;
        font-weight: 500;
        margin: 1% !important;
        padding: 0;
    }

    .exercise-row-header-text-container p {
        font-size: 17px !important;
        font-weight: 500;
        margin-top: 0;
        padding: 0;
        margin-left: 1%;
    }

    .exercise-progress-tooltip span {
        font-size: 11pt;
        font-family: 'Roboto', sans-serif;
        margin: 0;
        padding: 0;
    }

    .forgot-password-link {
        color:#a0a0a0 !important;
        text-align: center;
    }

    .blog-column p {
        margin: .5em 0 .5em 0;
    }

    .blog-column a:link, .blog-column a:visited, .blog-column a:active {
        color:#ff565d;
    }

    .blog-table-of-contents h4 {
        margin-top: 0;
    }

    .blog-table-of-contents a:link, .blog-table-of-contents a:visited, .blog-table-of-contents a:active {
        text-decoration: underline;
        color: #000 !important;
    }

    .table-of-contents-header {
        font-family: 'Roboto', sans-serif;
        color: #000;
        text-align: center;
        font-size: 25pt;
        line-height: 25pt;
        margin-bottom: 0;
        margin-top: 0;
        width: 100dvw;
        padding-top: 2%;
        padding-bottom: 2%;
        background-color: #dbfaff;
    }

    .breadcrumb-container h2 {
        margin: 0;
    }

    /* .blog-table-of-contents h4 {
        margin-top: 0;
    }

    .blog-table-of-contents a:link, .blog-table-of-contents a:visited, .blog-table-of-contents a:active {
        text-decoration: underline;
        color: #000 !important;
    }*/

    .column-container h4 {
        margin: 10px;
        line-height: 25pt;
        border-bottom: 2px dashed #000;
    }
    
    .copyright {
        font-family: 'Roboto', sans-serif;
        font-size: 15px;
        line-height: 15px;
        color: #a0a0a0;
        text-align: left;
    }

    .homepage-blog-box span {
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: #a0a0a0;
    }
    
    .homepage-exercise-box h3 {
        color:#000 !important;
        text-align: left !important;
    }

    .homepage-blog-box h3 {
        color:#000 !important;
        text-align: center;
        margin: 0;
        margin-top: 2%;
        width: 100%;
        padding: 1%;
        padding-top: 2%;
        background-color: #eeeeee;
    }
    
    .homepage-exercise-box p, .homepage-blog-box p {
        margin: 0;
        font-family: 'Roboto', sans-serif;
        font-size: 17px;
        font-weight: 500;
        font-style: italic;
        /* padding: 0; */
        padding: 1%;
        padding-bottom: 2%;
        text-align: center;
        color:#a0a0a0 !important;
        width: 100%;
        background-color: #eeeeee;
    }
    
    .homepage-exercise-box h3>i, .homepage-blog-box h3>i {
        color:#a0a0a0 !important;
    }

    .homepage-container-4 h1 {
        font-size: 30px;
        font-weight: 500;
        text-align: center;
        font-family: 'Roboto', sans-serif;
        color: #000;
        margin-top: 0;
        margin-bottom: 10%;
    }

    .homepage-container-4-grey h1 {
        font-family: 'Roboto', sans-serif;
        margin-top: 0;
        margin-bottom: 2%;
    }

    .homepage-container-4-grey p {
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: #000;
    }

    .homepage-container-4 h3, .homepage-container-4-grey h3 {
        text-align: center;
        font-family: 'Roboto', sans-serif;
        color: #a0a0a0;
        font-weight: 300;
    }

    .homepage-header-container-text h1 {
        font-family: 'Roboto', sans-serif;
        color: #000;
        font-size: 30px;
        font-weight: 500;
        margin: 0 auto;
    }

    .homepage-header-container-text h3 {
        font-family: 'Roboto', sans-serif;
        color: #000;
        font-size: 26px;
        font-weight: 500;
        margin: 0 auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }

    .homepage-header-container-text p {
        font-family: 'Roboto', sans-serif;
        color: #000;
        font-size: 16px;
        font-weight: 500;
    }

    .homepage-header-container-text ul {
        padding-left: 0;
        margin: 0 auto;
    }

    .homepage-header-container-text li {
        background-image: url("../images/icons8-check-20.svg");
        background-repeat: no-repeat;
        background-position-x: left;
        background-position-y: center;
        list-style-type: none;
        line-height: 30px;
        padding-left: 30px;
        font-family: 'Roboto', sans-serif;
        color: #000;
        font-size: 16px;
        text-align: left;
        font-weight: 500;
    }

    h1 {
        font-family: 'Roboto', sans-serif;
        font-size: 40px;
        color: #000;
        font-weight: 500;
    }

    h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 26px;
        color: #a0a0a0;
        font-weight: 500;
    }

    h3 {
        font-family: 'Roboto', sans-serif;
        color: #000;
        font-size: 26pt;
        font-weight: 500;
    }

    h4 {
        font-family: 'Roboto', sans-serif;
        color: #000;
        font-size: 20pt;
        font-weight: 500;
    }

    p {
        font-family: 'Roboto', sans-serif;
        color: #000;
        font-size: 16pt;
        font-weight: 500;
    }

    span {
        font-family: 'Roboto', sans-serif;
        color: #000;
        font-size: 12pt;
        font-weight: 500;
    }

    ul {
        padding-inline-start: 20px;
    }

    li {
        line-height: 30px;
        font-family: 'Roboto', sans-serif;
        color: #000;
        font-size: 16pt;
        font-weight: 500;
    }

    /* --------------------------------------------------------------------------------------------- */
    /* ----------------------------------------- Buttons ------------------------------------------- */

    .boarding-prev-btn, .boarding-next-btn {
        border-radius: 50px !important;
        border: 0px !important;
        background-color: #000 !important;
        color: #fff !important;
        font-family: 'Roboto', sans-serif !important;
        font-size: 12pt !important;
        padding: 5px 10px 5px 10px !important;
        cursor: pointer !important;
        margin: 2px !important;
        text-shadow: none !important;
    }
    
    .boarding-close-btn {
        border-radius: 50px !important;
        border: 0px !important;
        background-color: #ff565d !important;
        color: #fff !important;
        font-family: 'Roboto', sans-serif !important;
        font-size: 12pt !important;
        padding: 5px 10px 5px 10px !important;
        cursor: pointer !important;
        margin: 2px !important;
        text-shadow: none !important;
    }

    .tutorial-button-yes {
        background-color: #dbfaff;
        border: 2px solid #000;
        color: #000;
    }

    .exercise-settings-button {
        background-color: #e7e7e7;
        color: #000;
    }

    .exercise-settings-button-toggled {
        background-color: #000 !important;
        color: #fff !important;
    }
    
    .exercise-buttons {
        display: none;
        background-color:#dbfaff;
        width: 100dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2dvh 0px 2dvh 0px;
        gap: 10px;
    }

    .exercise-buttons-speech {
        display: none;
        background-color:#dbfaff;
        width: 100dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2dvh 0px 2dvh 0px;
        gap: 10px;
    }

    .exercise-settings-container-toggle {
        display: none;
    }

    .random-exercise-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 5px 30px 5px 30px;
        background-color: #ff565d;
        font-family: 'Roboto', sans-serif;
        line-height: 18pt;
        font-size: 18pt;
        color: #fff;
        margin: 0;
        font-weight: bold;
        white-space: nowrap;
        width: fit-content;
        border-radius: 100px;
        border: 0;
        cursor: pointer;
    }

    .random-exercise-button-image {
        max-width:50px;
        max-height:50px;
        vertical-align: middle;
        margin-right: 5px;
    }

    .login-register-google-button {
        background-image: url("../images/register-google-30.svg");
        background-size: contain;
        background-position: center;
        padding: 5px !important;
        width: 40px;
        height: 40px;
        border: 2px solid #000;
    }

    a:link, a:visited, a:active {
        font-family: 'Roboto', sans-serif;
        color: #000;
        text-decoration: none;
        cursor: pointer;
        /* white-space: nowrap; */
    }

    .homepage-button-try-exercises {
        margin: 0 auto;
    }

    .homepage-button-try-exercises span {
        color: #fff;
        vertical-align: middle;
    }

    .homepage-button-try-exercises-image {
        margin-left: 10px;
        vertical-align: middle;
    }

    button {
        color: #fff;
        background-color: #000;
        text-decoration: none;
        cursor: pointer;
        border: 0;
        border-radius: 50px;
        white-space: nowrap;
        padding: 10px 70px 10px 70px;
        font-size: 12pt;
        font-weight: 500;
    }

    button:disabled {
        color: #000;
        background-color:#e7e7e7;
    }

    .exercise-buttons button:disabled {
        background-color: #fff;
        color:#b3b3b3;
    }

    .button-narrow {
        padding: 10px 30px 10px 30px !important;
    }

    /* --------------------------------------------------------------------------------------------- */
    /* ---------------------------------- Social Media Buttons ------------------------------------- */

    .social-media-button {
        cursor: pointer;
        border-radius: 100px;
        width: 30px;
        height: 30px;
    }

    .tiktok-button {
        background-image: url("../images/tiktok-circle.svg");
        background-size: 30px 30px;
        background-repeat: no-repeat;
    }

    .facebook-button {
        background-image: url("../images/icons8-facebook-30.svg");
        background-size: 30px 30px;
        background-repeat: no-repeat;
    }

    .instagram-button {
        background-image: url("../images/instagram-with-circle-svgrepo-com.svg");
        background-size: 30px 30px;
        background-repeat: no-repeat;
    }

    /* ---------------------------------------------------------------------------------------------- */
    /* ------------------------------- Dropdown button with search ---------------------------------- */
    /* Dropdown Button */
    .dropbtn {
        background-color: #ff565d;
        color: white;
        font-family: 'Roboto', sans-serif;
        padding: 15px 40px 15px 40px;
        font-weight: 300;
        font-size: 20px;
        line-height: 30px;
        border-radius: 100px;
        cursor: pointer;
        border: 0;
    }

    /* Dropdown button on hover & focus */
    .dropbtn:hover,
    .dropbtn:focus {
        background-color: #000;
    }

    /* The search field */
    .exercise-dropdown-searchbox {
        box-sizing: border-box;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        background-position: 14px 12px;
        background-repeat: no-repeat;
        font-size: 14px;
        padding: 14px 20px 12px 12px;
        border: none;
        border-radius: 0 !important;
        font-weight: 300;
    }

    /* The search field when it gets focus/clicked on */
    .exercise-dropdown-searchbox:focus {
        outline: 2px solid #000;
    }

    /* The container <div> - needed to position the dropdown content */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* Dropdown Content (Hidden by Default) */
    .exercise-dropdown {
        display: none;
        position: absolute;
        background-color: #e7e7e7;
        border: 2px solid #000;
        z-index: 1;
        max-height: 50dvh;
        overflow: auto;
        overflow-x: hidden;
        font-weight: 400;
        font-size: 14pt;
    }

    /* Links inside the dropdown */
    .exercise-dropdown a {
        color: black;
        padding: 10px;
        text-decoration: none;
        display: block;
        background-color: #fff;
    }

    /* Change color of dropdown links on hover */
    .exercise-dropdown a:hover {
        background-color: #e7e7e7;
    }

    /* Links inside the dropdown */
    .exercise-dropdown p {
        padding: 10px;
        font-weight: bold;
        margin: 1% 0 0;
        color: #000 !important;
        background-color:#e7e7e7;
    }


























    .account-container {
        margin: 0px auto;
        margin-top: 5px;
        width: 95dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .account-basic-info-avatar {
        display: flex;
        flex-direction: column;
        width: fit-content;
        align-items: center;
        justify-content: center;
        margin: 10px;
    }
    .account-basic-info-user-details {
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    .account-basic-info-user-details p {
        margin: 10px;
    }
    .account-basic-info-user-details button {
        margin: 10px 0px 10px 0px;
    }

    .account-user-settings-button-row {
        display: flex;
        margin: 1%;
        width: 83dvw;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 5px;
    }
    .account-user-settings-button-row button {
        width: 100%;
    }
    .account-user-settings-input-row {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: space-between;
        justify-content: space-between;
        width: 84dvw;
        margin: 5px;
    }
    .account-user-settings-input-column {
        display: flex;
        flex-direction: column;
        width: 72%;
    }
    .account-user-settings-input-column span {
        font-size: 9pt;
        font-weight: 300;
        margin-right: 10px;
        font-style: italic;
        margin-left: 5px;
        font-family: 'Roboto', sans-serif;
        color: #0D7384;
    }
    .account-user-settings-input-row input {
        width: 100%;
    }
    .account-user-settings-input-row button {
        width: 15dvw;
        height: fit-content;
    }
    .account-user-settings-error-row {
        display: none;
        flex-direction: column;
        text-align: center;
        padding: 3px;
    }
    .account-notification-settings-input-row {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: flex-end;
        justify-content: flex-end;
        width: 100%;
        margin: 5px;
        margin-left: 0px;
    }
    .account-notification-settings-input-row label {
        width: fit-content;
    }
    .account-notification-settings-input-row input {
        width: 10%;
        float: right;
    }
    .account-notification-settings-button-row {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 5px 0px 5px 0px;
    }
    .account-notification-settings-button-row button {
        width: 40dvw;
    }
    
    .account-study-settings-input-row {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: flex-end;
        justify-content: space-between;
        width: 80dvw;
        margin: 5px;
    }
    .account-study-settings-input-row label {
        width: fit-content;
    }
    .account-study-settings-input-row input {
        width: fit-content;
        float: right;
    }
    .account-study-settings-button-row {
        width: 80dvw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 5px;
    }
    .account-study-settings-button-row button {
        width: 100%;
    }

    .account-table {
        width: 100%;
        border-spacing: 0px;
        overflow-y: hidden;
        height: 0px;
    }
    
    .account-table input {
        margin-left: 0px;
        margin-right: 0px;
    }
    
    .account-table label {
        margin-top: 1%;
        margin-bottom: 3%;
        text-align: center;
        line-height: 20pt;
    }

    .account-not-activated-content h3 {
        font-size: 15pt;
        font-family: 'Roboto', sans-serif;
        text-align: center;
    }

    .admin-button {
        display: block;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        padding: 10px;
        white-space: nowrap;
        background-color: #07868C;
        border: 0px;
        border-radius: 5px;
        color: #fff !important;
        width: 92%;
        text-align: center;
        margin: 0px auto;
        margin-top: 5%;
        text-transform: uppercase;
    }

    .blog-back-to-top-button {
        margin: 0px;
        margin-left: 15px;
        text-wrap: nowrap;
        white-space: nowrap;
        font-family: 'Roboto', sans-serif;
        line-height: 20pt;
        font-size: 10pt;
        text-transform: uppercase;
        background-color:#a0a0a0;
        color: #fff !important;
        padding: 5px;
        border-radius: 5px;
        text-decoration: none;
        vertical-align: middle;
    }

    .blog-content-with-ads button {
        margin: 3% auto;
        display: block;
    }
    
    .blog-content-with-ads h1 {
        font-family: 'Roboto', sans-serif;
        color: #0D7384;
        text-align: center;
        font-size: 25pt;
    }

    .blog-content-with-ads h1 {
        scroll-margin-top: 15dvh;
    }
    
    .blog-content-with-ads h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 25pt;
        line-height: 25pt;
        text-transform: uppercase;
        color: #0D7384;
        margin: 0px;
        cursor: pointer;
        text-align: left;
        padding-bottom: 1%;
    }
    
    .blog-content-with-ads h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        text-transform: uppercase;
        margin: 1%;
        color: #0D7384;
    }
    
    .blog-content-with-ads p {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #000;
        margin: 15px;
        text-align: center;
    }

    .blog-credits {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        text-align: center;
    }

    .blog-credits a:link, .blog-credits a:visited {
        color: #a0a0a0;
    }
    
    .blog-header h3 {
        margin: 0px !important;
        margin-top: 2% !important;
        margin-bottom: 2% !important;
        text-align: left !important;
    }
    
    .blog-header-bar {
        width: 100%;
        display: flex;
        margin-top: 25px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .blog-page-header {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 25pt;
        text-transform: uppercase;
        text-align: center;
        color: #0D7384;
        border-bottom: 3px dotted #0D7384;
        margin: 0px;
        padding: 3% 0px 3% 0px;
        width: 100%;
        background-color: transparent;
    }
    
    .blog-list {
        font-family: 'Roboto', sans-serif;
    }
    
    /* .blog-pro-tip {
        background-color: #dbfaff;
        border: 2px solid #000;
        border-radius: 10px;
        padding: 2%;
        margin: 2%;
    }
    
    .blog-pro-tip h4 {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        text-transform: uppercase;
        margin-top: 0px;
        margin-bottom: 1%;
        color: #000;
    }
    
    .blog-pro-tip p {
        font-size: 12pt !important;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: justify;
    } */

    .blog-table {
        border-collapse: collapse;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        text-align: center;
        border: 2px solid #e6e6e6;
        background-color: #fff;
        margin: 0px auto;
        width: 94dvw;
    }
    
    .blog-table td {
        border-bottom: 2px solid #e6e6e6;
    }
    
    .blog-table-header {
        background-color: #e6e6e6;
    }
    

    /* .blog-table-of-contents {
        background-color:#dbfaff;
        border-radius: 15px;
        margin: 2%;
        margin-bottom: 0px;
        padding: 35px;
        display: flex;
        flex-direction: column;
    }

    .blog-table-of-contents h2 {
        align-self: center;
        width: fit-content;
        font-size: 20pt;
        line-height: 20pt;
    }
    
    .blog-table-of-contents ul {
        list-style-position: outside;
        float: left;
        padding: 0px;
        margin: auto;
        margin-left: 15px;
        margin-top: 3%;
    }
    
    .blog-table-of-contents a {
        font-family: 'Roboto', sans-serif !important;
        color:#000;
        font-size: 14pt;
    } */

    .boarding-popover-title {
        font-family: 'Roboto', sans-serif !important;
        color: #000;
        margin: 0px !important;
    }
    
    .boarding-popover-description {
        font-family: 'Roboto', sans-serif !important;
    }

    .boarding-popover-footer {
        margin-top: 5% !important;
    }

    .button-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 0 2% 4% 2%;
    }
    
    .contact-table {
        table-layout: fixed;
        width: 100%;
        font-family: 'Roboto', sans-serif;
    }
    
    .contact-textarea {
        width: 98%;
        height: 10em;
    }
    .contact-textarea-character-limit {
        font-size: 10pt;
        font-style: italic;
    }
    .contact-textarea-character-limit-number {
        font-size: 10pt;
        font-style: italic;
    }
    
    .correct-checkmark-container {
        display: block;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 0px;
        margin-left: 2%;
    }
    .correct-checkmark-container-speaking {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .correct-checkmark-container-multiple-choice {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .lesson-user-response-speaking {
        display: none;
        margin-top: 1%;
        margin-bottom: 1%;
        margin-right: 5px;
        color: #000;
        font-size: 14pt;
    }

    #correct-checkmark {
        display: none;
        margin-left: 3px;
        height: 30px;
        width: 30px;
    }

    .danger-button {
        padding: 10px;
        background-color: #0D7384;
        border: 0px;
        font-family: 'Roboto', sans-serif;
        line-height: 12pt;
        font-size: 12pt;
        border-radius: 5px;
        color: #fff;
        margin: 0px;
        text-transform: uppercase;
    }
    
    .danger-button:disabled {
        padding: 10px;
        background-color: #a0a0a0;
        border: 0px;
        font-family: 'Roboto', sans-serif;
        line-height: 12pt;
        font-size: 12pt;
        border-radius: 5px;
        color: #fff;
        margin: 0px auto;
        text-transform: uppercase;
    }

    .dashboard-practiced-today {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 15pt;
        color: #000;
        background-color: #c6e6c7;
        margin: 0px auto;
        padding: 1%;
        padding-left: 2%;
        padding-right: 2%;
        width: fit-content;
        border-radius: 15px;
    }

    .dashboard-practiced-today img {
        display: inline;
        width: 20px;
        height: 20px;
        margin: 0px auto;
        margin-bottom: 2px;
        margin-right: 5px;
        vertical-align: middle;
    }

    /* .dashboard-button-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        white-space: nowrap;
        justify-content: center;
        background-color: #fff;
        border: 2px 0px 2px 0px dotted #000;
        font-family: 'Roboto', sans-serif;
        padding: 2%;
        min-width: 150px;
        overflow: hidden;
        height: 100%;
    } */

    /* .dashboard-button-box h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 15pt;
        width: fit-content;
        background-color: #fff;
        text-transform: uppercase;
        text-align: center;
        color: #000;
        padding: 10px;
        margin: 0px auto;
        border: 2px solid #000;
        border-radius: 15px;
        margin-top: 1%;
        margin-bottom: 1%;
    }

    .dashboard-button-box p {
        display: none;
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        font-style: italic;
        line-height: 15pt;
        color: #000;
        margin: 0px;
        padding-bottom: 2%;
        padding-top: 2%;
    } */

    .dashboard-button-icon {
        display: none;
    }

    .dashboard-container {
        height: 100%;
    }

    .dashboard-daily-word-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        width: 100dvw;
        padding: 5%;
        background-color: #fff;
    }

    .dashboard-daily-word-container h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 15pt;
        align-self: center;
        text-align: center;
        text-transform: uppercase;
        color: #000;
        padding-bottom: 1%;
        margin: 0px;
    }

    .dashboard-daily-word-czech {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 15pt;
        color: #ff565d;
        text-transform: none;
        margin: 0px;
    }
    
    .dashboard-daily-word-english {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 15pt;
        font-style: italic;
        text-transform: none;
        color: #000;
        margin: 0px;
        cursor: pointer;
    }

    .dashboard-daily-word-part-of-speech {
        font-family: 'Roboto', sans-serif;
        font-size: 10pt;
        line-height: 10pt;
        font-style: italic;
        align-self: center;
        text-transform: uppercase;
        color: #000;
        margin: 0px;
        cursor: pointer;
        margin-bottom: 2%;
    }

    .dashboard-daily-word-example {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 15pt;
        text-transform: uppercase;
        color: #000;
        margin: 0px;
        width: 100%;
        padding-top: 3%;
    }

    .dashboard-daily-word-example h4 {
        padding-top: 0px;
        padding-bottom: 1%;
        margin: 0px;
        text-align: left;
    }

    .dashboard-daily-word-example p {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 15pt;
        color: #ff565d;
        margin: 0px;
        text-transform: none;
        text-align: center;
    }

    .dashboard-daily-word-example-english {
        font-style: italic;
        color:#7a7a7a !important;
        font-size: 15pt !important;
    }

    .dashboard-daily-word-container h4 {
        font-family: 'Roboto', sans-serif;
        text-align: center;
        font-size: 15pt;
        line-height: 15pt;
        text-transform: uppercase;
        color: #000;
        margin: 0px;
    }
    
    .dashboard-daily-word-container p {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 15pt;
        color: #ff565d;
        margin: 0px;
    }

    .dashboard-page-header {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 25pt;
        text-transform: uppercase;
        text-align: center;
        color: #0D7384;
        border-bottom: 3px dotted #0D7384;
        margin: 0px;
        margin-top: 25px;
        padding: 3% 0px 3% 0px;
        width: 100%;
        background-color: transparent;
    }

    .dashboard-welcome-container {
        text-align: center;
        background-color: #dbfaff;
        overflow: hidden;
        width: 100dvw;
    }

    .dashboard-welcome-container h1 {
        font-family: 'Roboto', sans-serif;
        line-height: 20pt;
        font-size: 20pt;
        color: #000;
        margin: 2%;
        margin-bottom: 1%;
    }

    .dashboard-welcome-container h3 {
        font-family: 'Roboto', sans-serif;
        line-height: 12pt;
        font-size: 12pt;
        margin-top: 0px;
        color: #7a7a7a;
        margin-top: 2%;
        margin-bottom: 3%;
        font-style: italic;
    }

    .dashboard-welcome-container span {
        font-family: 'Roboto', sans-serif;
        line-height: 20pt;
        color: #ff565d;
        font-size: 20pt;
    }
    
    .register-button {
        background-color: #0D7384;
        width: auto !important;
        display: flex;
        margin: 0px auto;
        margin-bottom: 10px;
    }
    
    .register-spacer-mobile {
        display: block;
        height: 25px;
        width: 100%;
        margin-top: 25px;
    }

    .duel-button-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
    }
    
    /* Dropdown Button */
    /* .dropbtn {
        background-color: #0D7384;
        color: white;
        border: 2px solid #0D7384;
        border-radius: 15px;
        font-family: 'Roboto', sans-serif;
        padding: 10px;
        font-size: 25px;
        cursor: pointer;
        display: block;
        margin: 0px auto;
    } */

    /* Dropdown button on hover & focus */
    /* .dropbtn:hover,
    .dropbtn:focus {
        background-color: #fff;
        color: #0D7384;
        border: 2px solid #0D7384;
        padding: 10px;
        border-radius: 15px;
    } */

    /* The search field */
    /* .exercise-dropdown-searchbox {
        box-sizing: border-box;
        width: 100%;
        background-image: url('searchicon.png');
        background-position: 14px 12px;
        background-repeat: no-repeat;
        font-size: 16px;
        padding: 14px 20px 12px 45px;
        border: none;
        overflow: auto;
        z-index: 2;
        font-family: 'Roboto', sans-serif;
    } */

    /* The search field when it gets focus/clicked on */
    /* .exercise-dropdown-searchbox:focus {
        outline: 2px solid #000;
    } */

    /* The container <div> - needed to position the dropdown content */
    /* .dropdown {
        display: inline-block;
        width: 100%;
    } */

    /* Dropdown Content (Hidden by Default) */
    /* .exercise-dropdown {
        display: none;
        position: absolute;
        left: 0px;
        background-color: #dbfaff;
        border: 2px solid #000;
        z-index: 1;
        max-height: 40dvh;
        left: 0; 
        right: 0; 
        margin-inline: auto; 
        width: fit-content;
        overflow: auto;
        font-family: 'Roboto', sans-serif;
    } */

    /* Links inside the dropdown */
    /* .exercise-dropdown a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        background-color: #fff;
        font-family: 'Roboto', sans-serif;
    } */

    /* Links inside the dropdown */
    /* .exercise-dropdown p {
        padding: 12px 16px;
        margin: 0px;
        margin-top: 1%;
        color: #000 !important;
        background-color:#dbfaff;
    } */

    .duel-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .duel-container-opponent {
        flex-direction: column-reverse;
    }

    .duel-container h1 {
        margin-top: 0px;
        font-size: 18pt;
        text-transform: uppercase;
    }

    .duel-content {
        font-family: 'Roboto', sans-serif;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .duel-content p {
        margin: 10px;
    }

    .duel-header-bar {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 3dvw;
        padding: 3dvw;
        padding-top: 8dvh;
        width: 94dvw;
    }

    .duel-header-bar img {
        display: inline;
        /* vertical-align: middle; */
        /* padding: 1%; */
    }

    .duel-loading-opponent-container {
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100dvw;
        height: 100dvh;
        background-color: #ffffffe3;
    }

    .duel-loading-opponent {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .duel-loading-opponent h1 {
        font-family: 'Roboto', sans-serif;
        display: inline;
        text-align: center;
        margin: 0px auto;
    }

    .duel-loading-opponent p {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt !important;
        line-height: 15pt !important;
        color: #000 !important;
    }

    .duel-header-row {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        padding: 0px;
        margin: 0px;
        /* margin-bottom: 2dvh; */
    }
    
    .duel-info-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border: 2px solid #4db051;
        padding: 10px;
        margin: 0px;
        gap: 10px;
        flex-wrap: nowrap;
        border-radius: 15px;
        text-align: center;
        width: fit-content;
    }
    
    .duel-info-box h1 {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 12pt;
        margin: 0px;
        color: #4db051;
    }

    .duel-info-box-user {
        justify-content: center;
        display: none;
    }

    .duel-info-box-user h1 {
        font-size: 12pt;
        line-height: 12pt;
        color: #000;
    }

    .duel-opponent-info-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border: 2px solid #ff565d;
        padding: 10px;
        margin: 0px;
        border-radius: 15px;
        gap: 10px;
        height: 100%;
        text-align: center;
    }

    .duel-opponent-info-box h1 {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 12pt;
        margin: 0px;
        color: #ff565d;
    }
    
    .duel-info-box p, .duel-opponent-info-box p {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt !important;
        line-height: 12pt !important;
        margin: 0px;
        color: #000 !important;
        font-weight: bold;
    }

    .duel-page-container {
        background-color: #fff;
        width: 94dvw;
        margin: 0px auto;
        margin-top: 2dvh;
        padding: 3dvw;
    }
    
    .duel-page-header {
        font-family: 'Roboto', sans-serif;
        font-size: 18pt !important;
        width: 100%;
        padding: 0px !important;
        line-height: normal !important;
        margin: 0px;
    }
    
    .duel-timer {
        background-color: #ff565d;
        padding: 5px;
        text-align: center;
    }
    
    .duel-timer-green {
        background-color: #c6e6c7;
        padding: 15px;
        text-align: center;
    }

    .duel-timer-text {
        color: #fff;
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 13pt;
        white-space: nowrap;
    }

    .duel-timer-text-green {
        color: #000;
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 13pt;
        white-space: nowrap;
    }

    .opponent-response {
        display: none;
        width: 100%;
    }

    .duel-trainer-content-opponent > .user-response-and-checkmark-row > .lesson-user-response {
        display: none !important;
    }
    
    .duel-trainer-content-opponent > .user-response-and-checkmark-row > .correct-checkmark-container {
        display: none !important;
    }

    .duel-trainer-content-opponent > .hint {
        display: none !important;
    }
    
    .duel-trainer-content, .duel-trainer-content-opponent {
        width: 100% !important;
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 13pt;
        text-align: center;
    }
    
    .duel-trainer-content-opponent > .lesson-generated-question {
        color: #ff565d;
    }

    #opponent-response {
        color: #4db051;
    }

    .duel-user-interface-row {
        display: flex;
        flex-direction: column;
        gap: 2dvw;
        width: 100%;
        margin-bottom: 10dvh;
    }

    .error-404-content h3 {
        font-size: 20pt;
        font-family: 'Roboto', sans-serif;
        margin: 0px auto;
        margin-bottom: 5%;
        text-align: center;
    }
    
    .error-text {
        display: none;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #ff565d;
        font-weight: bold;
        text-align: center;
        padding: 2%;
        margin-top: 1%;
        margin-bottom: 1%;
        border-radius: 5px;
        width: 96%;
    }

    #exercise-report-error-submit {
        margin: 0px auto;
    }

    .exercises-content {
        margin-top: var(--header-height-mobile);
        margin-bottom: var(--footer-height-mobile);
        /* margin-bottom: 10px; */
        width: 100%;
        max-width: 100dvw;
        /* overflow-y: hidden; */
        margin: 0px auto;
        /* overflow: hidden; */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        overflow-x: hidden;
        flex: 1;
    }

    .exercises-block-header h3 {
        width: 100%;
        background-color:#eeeeee;
        font-size: 30pt;
        font-family: 'Roboto', sans-serif;
        color: #000;
        text-align: center;
        font-size: 25pt;
        line-height: 25pt;
        margin: 0;
        width: 100dvw;
        padding-top: 2%;
        padding-bottom: 2%;
    }
    
    .exercises-block {
        display: flex;
        width: 90dvw;
        height: fit-content;
        align-items: center;
        flex-direction: column;
        border: 3px solid #000;
        background-color: #dbfaff;
        border-radius: 15px;
        margin: 0px auto;
    }
    
    .exercises-block h3 {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        margin-bottom: 1% !important;
        color: #000 !important;
        text-transform: none !important;
        font-size: 15pt !important;
    }

    .exercises-block-button {
        color: #fff;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        background-color: #0D7384;
        border: 2px solid #0D7384;
        padding: 8px;
        border-radius: 10px;
        text-decoration: none;
        cursor: pointer;
        text-wrap: nowrap;
        text-align: center;
    }
    
    .exercises-block-button img, .exercises-block-button p {
        vertical-align: middle;
    }

    .exercises-block-button-register img, .exercises-block-button-register p {
        vertical-align: middle;
    }

    .exercises-block-button-container {
        display: flex;
        flex-direction: row;
        vertical-align: middle;
        padding: 1%;
        gap: 5px;
        margin-top: 1%;
        border-radius: 15px;
        text-align: center;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .exercises-block-paragraph-container p {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt !important;
        color: #000 !important;
    }
    
    .exercises-header-bar {
        width: 100%;
        display: flex;
        margin-top: 25px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .exercises-page-header {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 25pt;
        text-transform: uppercase;
        text-align: center;
        color: #0D7384;
        border-bottom: 3px dotted #0D7384;
        margin: 0px;
        padding: 3% 0px 3% 0px;
        width: 100%;
        background-color: transparent;
    }
    
    .exercise-button {
        padding: 10px;
        background-color: #000;
        border: 0px;
        width: 90%;
        font-family: 'Roboto', sans-serif;
        line-height: 12pt;
        font-size: 12pt;
        border-radius: 5px;
        color: #fff;
        margin: 0px;
        text-transform: uppercase;
    }

    .exercise-button-container {
        width: fit-content;
        margin: 0px auto;
        margin-top: 1dvh;
        background-color: #e6e6e6;
        gap: 15px;
        padding: 2%;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        overflow: visible;
        margin-right: auto;
    }
    
    .exercise-case, .exercise-gender {
        margin: 2px !important;
    }
    
    .exercise-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 5%;
        background-color: #fff;
    }
    
    .exercise-content {
        display: flex;
        margin: 0px 1% 0px 1%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: 'Roboto', sans-serif;
    }
    
    .exercise-header-bar {
        display: flex;
        flex-direction: row;
        width: 96%;
        justify-content: space-between;
        align-items: center;
        padding: 2%;
        border-bottom: 3px dotted #0D7384;
    }
    
    .exercise-page-header {
        font-size: 20pt !important;
        font-family: 'Roboto', sans-serif;
        margin: 0px;
        padding-top: 3%;
        text-align: center;
        text-transform: uppercase;
    }
    
    .exercise-page-header-small {
        font-size: 15pt !important;
        font-family: 'Roboto', sans-serif;
        margin: 0px;
        padding-top: 3%;
        text-align: center;
        text-transform: uppercase;
    }
    
    .exercise-page-subscribe-button {
        color: #fff;
        background-color: #000;
        border: 2px solid #000;
        padding: 8px;
        border-radius: 10px;
        text-decoration: none;
        cursor: pointer;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        text-align: center;
        margin: 0px auto;
        text-transform: uppercase;
    }

    .exercise-page-subscribe-button-container {
        width: 98%;
        margin: 0px auto;
        text-align: center;
        padding: 1%;
        margin: 0px auto;
        margin-top: 4%;
        margin-bottom: 4%;
    }
    
    .exercise-progress-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .exercise-bottom-button-row {
        width: 95dvw;
        margin: 0px auto;
        margin-bottom: 9dvh;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-top: 1%;
    }

    .exercise-translation-switch-label {
        margin-top: -4px;
        font-family: 'Sono', sans-serif;
        font-size: 7pt;
        font-weight: 700;
        letter-spacing: 0px;
        color: #000;
    }
    
    .exercise-score-container {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        margin-top: 2%;
        margin-bottom: 2%;
        width: 50%;
    }

    .exercise-score-number {
        padding: 0px;
        margin: 0px;
        font-size: 9pt !important;
        color:#0D7384;
        font-family: 'Cherry Bomb One' !important;
    }

    .exercise-score-number-animation {
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 0;
    }

    .exercise-settings {
        background-color: #fff;
    }

    .exercise-settings-column {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .exercise-settings-column p {
        margin-bottom: 5px !important;
    }
    
    /* .exercise-settings-container {
        display: flex;
        flex-direction: column;
        height: fit-content !important;
        width: 100% !important;
        margin: 0px 0px 1dvh 0px;
        overflow-y: scroll;
        text-align: center;
        background-image: none !important;
        background-color: #fff !important;
    } */
    
    /* .exercise-settings-container p {
        font-size: 12pt !important;
        margin: 1%;
    }
    
    .exercise-settings-container input[type="checkbox"] {
        height: fit-content !important;
        width: 5% !important;
        max-height: 25dvh;
        margin-top: 3%;
        overflow-y: scroll;
    }
    
    .exercise-settings-container input[type="radio"] {
        height: fit-content !important;
        width: 5% !important;
        max-height: 25dvh;
        margin-top: 3%;
        overflow-y: scroll;
    }

    .exercise-settings-container-popup {
        width: fit-content !important;
        height: fit-content !important;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .exercise-settings-container-toggle {
        position: fixed;
        bottom: 88px;
        right: 24px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
        z-index: 100;
        border-radius: 50%;
        width: 24px;
        height: 24px;
    } */
    
    .exercise-settings-row {
        display: block;
        margin-top: 2%;
        margin-bottom: 2%;
    }

    .exercise-timer-container {
        display: inline-block;
        -webkit-appearance: none;
        appearance: none;
        color: #07868C;
        border-radius: 15px;
        margin-top: 5%;
        margin-bottom: 2%;
        position: relative;
        transition: transform ease-in 0.1s, box-shadow ease-in 3s;
  
        &:focus {
            outline: 0;
        }
  
        &:before, &:after{
            position: absolute;
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            z-index: 1;
            transition: all ease-in-out 0.5s;
            background-repeat: no-repeat;
        }
  
        &:before{
            display: none;
            top: -75%;
            background-image: 
                radial-gradient(circle, #07868C 20%, transparent 20%),
                radial-gradient(circle, transparent 20%, #07868C 20%, transparent 30%),
                radial-gradient(circle, #07868C 20%, transparent 20%), 
                radial-gradient(circle, #07868C 20%, transparent 20%),
                radial-gradient(circle, transparent 10%, #07868C 15%, transparent 20%),
                radial-gradient(circle, #07868C 20%, transparent 20%),
                radial-gradient(circle, #07868C 20%, transparent 20%),
                radial-gradient(circle, #07868C 20%, transparent 20%),
                radial-gradient(circle, #07868C 20%, transparent 20%);
            background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
        }
  
        &:after{
            display: none;
            bottom: -75%;
            background-image: 
                radial-gradient(circle, #07868C 20%, transparent 20%), 
                radial-gradient(circle, #07868C 20%, transparent 20%),
                radial-gradient(circle, transparent 10%, #07868C 15%, transparent 20%),
                radial-gradient(circle, #07868C 20%, transparent 20%),
                radial-gradient(circle, #07868C 20%, transparent 20%),
                radial-gradient(circle, #07868C 20%, transparent 20%),
                radial-gradient(circle, #07868C 20%, transparent 20%);
            background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
        }
 
        &:active{
            transform: scale(0.9);
            background-color: #07868C;
        }
  
        &.animate{
            &:before{
                display: block;
                animation: topBubbles ease-in-out .75s forwards;
            }
            &:after{
                display: block;
                animation: bottomBubbles ease-in-out .75s forwards;
            }
        }
    }

    @keyframes topBubbles {
        0% {
            background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
        }
        50% {
            background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;}
        100% {
            background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
            background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
        }
    }

    @keyframes bottomBubbles {
        0% {
            background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
        }
        50% {
            background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;}
        100% {
            background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
            background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
        }
    }

	.exercise-timer-done-background {
	    animation: fill-bg .8s forwards;
    }

    .exercise-timer-progress {
        display: inline-flex;  
        border: 0px;
        --progress-deg: calc((0deg / 3) * 2);
        padding: 3px;
        background: conic-gradient( 
            #07868C var(--progress-deg), #dbfaff var(--progress-deg) 365deg);
        border-radius: 15px;
        overflow: hidden;
        backface-visibility: hidden;
    }

    @keyframes fill-bg {
        0% {
            background-color: #dbfaff;
        }

        50% {
            color: #07868C;
            background-color: #07868C;
        }

        51% {
            color: #fff;
            background-color: #fff;
        }

        100% {
            color: #fff;
            background-color: #07868C;
        }
    }
    
    .exercise-toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 0px;
        border-radius: 5px;
        color: #fff;
        margin: 0px;
        text-transform: uppercase;
    }

    /* .exercises-button-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        margin-top: 11dvh;
        padding-top: 2dvh;
        padding-bottom: 2dvh;
        width: 100%;
        gap: 10px;
        text-transform: uppercase;
        background-color:#dbfaff;
    } */

    .exercises-single-row p {
        padding: 2%;
        display: block;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        margin-top: 2%;
        margin-bottom: 2%;
        background-color:#e6e6e6;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .exercises-whitebox h4 {
        padding: 3%;
        margin: 0px;
        width: 80%;
        white-space: nowrap;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 12pt;
    }

    .footer-bar {
        display: flex;
        margin: 0;
        position: fixed;
        bottom: 0;
        background-color: #eeeeee;
        z-index: 100;
        flex-direction: row;
        width: 98dvw;
        text-align: center;
        max-width: 100dvw;
        padding-left: 1dvw;
        padding-right: 1dvw;
        height: 6dvh;
        align-items: center;
        justify-content: space-between;
    }
    
    /* .footer-link {
        font-family: 'Roboto', sans-serif;
        font-size: 10pt;
        color: #7a7a7a;
        float: right;
        text-align: center;
        text-transform: uppercase;
        text-decoration: none;
    } */
    
    /* .hidden-container h1 {
        font-family: 'Roboto', sans-serif;
        color: #0D7384;
        text-align: center;
        margin: 0px;
        font-size: 30pt;
    }
    
    .hidden-container h3 {
        font-family: 'Roboto', sans-serif;
        color: #7a7a7a;
        text-align: left;
        text-transform: uppercase;
        font-size: 17pt;
        margin-top: 2%;
        margin-bottom: 2%;
        border-top: 3px dotted #0D7384;
        border-bottom: 3px dotted #0D7384;
    }
     */
    /* .hidden-container input {
        border: 0px;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 14pt;
        padding: 5px;
        margin: 0px;
        width: 95%;
        margin-bottom: 2%;
        border-radius: 5px;
    }
    
    .hidden-container p {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        color: #000;
        margin: 0px;
        text-align: center;
        padding: 5px 0px 5px 0px;
    } */

    .homepage-bar-graph-box {
        width: 90%;
        margin: 0px auto;
    }
    
    .homepage-container-0 {
        background-color: #fff;
    }

    .homepage-container-3-blog-container {
        display: flex;
        padding: 1% 0px 1% 0px;
        width: 85dvw;
        cursor: pointer;
        align-items: center;
        flex-direction: column;
        border: 3px solid #000;
        background-color: #dbfaff;
        border-radius: 15px;
    }
    
    .homepage-container-3-blog-container h3 {
        margin-bottom: 1%;
        font-size: 15pt;
    }
    
    .homepage-container-3-blog-container img {
        width: 130px;
    }

    .homepage-container-3-paragraph-container p {
        margin: 5%;
        font-size: 12pt;
    }
    
    /* .homepage-container-4-side-scroller {
        display: flex;
        flex-direction: column;
        align-items: top;
        width: 100dvw;
        height: 100%;
        margin: 0px auto;
        margin-top: 2%;
        justify-content: center;
    } */

    /* .homepage-divider-text-container {
        width: 100dvw;
        background-color: #ff565d;
        z-index: 5;
        position: relative;
        padding: 4% 0 4% 0;
        margin: 0 auto;
        text-align: center;
    }
    
    .homepage-divider-text-container-2 {
        width: fit-content;
        height: 20px;
        background-color: #ff565d;
        text-align: center;
        z-index: 5;
        position: relative;
        padding: 10px;
        padding-left: 30px;
        padding-right: 30px;
        border-radius: 15px;
        margin: 0 auto;
        margin-top: -23px;
        margin-bottom: 10%;
    } */
    
    /* .homepage-divider-text {
        display: block;
        font-family: 'Roboto', sans-serif;
        color: #fff;
        font-size: 15pt;
        line-height: 13pt;
    } */
    @property --num-exercises {
        syntax: "<integer>";
        initial-value: 0;
        inherits: false;
    }

    @property --num-questions {
        syntax: "<integer>";
        initial-value: 0;
        inherits: false;
    }

    @property --num-hours {
        syntax: "<integer>";
        initial-value: 0;
        inherits: false;
    }

    @keyframes counter-exercises {
        from {
            --num-exercises: 0;
        }
        to {
            --num-exercises: 71;
        }
    }

    @keyframes counter-questions {
        from {
            --num-questions: 0;
        }
        to {
            --num-questions: 5800;
        }
    }

    @keyframes counter-hours {
        from {
            --num-hours: 0;
        }
        to {
            --num-hours: 80;
        }
    }

    .animate-exercises {
        animation: counter-exercises 1s ease-out forwards;
    }

    .homepage-header-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .homepage-header-container-text {
        text-align: center;
    }

    .homepage-header-container-image img {
        max-width: 85dvw;
        margin: 0px auto;
        margin-top: -2dvh;
        margin-bottom: -3dvh;
    }

    /* .homepage-button-try-exercises {
        padding: 12px;
        background-color: #ff565d;
        border-radius: 15px;
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 20pt;
        color: #fff;
        margin: 0px;
        margin-bottom: 2dvh;
        border: 2px solid #ff565d;
        text-transform: uppercase;
    } */

    .homepage-skill-box img {
        width: 40%;
    }
    
    .homepage-skill-box p {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        text-transform: uppercase;
        color: #000;
        margin: 0px;
        padding-bottom: 0px;
    }

    .homepage-stats-accuracy-box {
        display: flex;
        flex-direction: column;
        padding: .5%;
        gap: 5px;
        width: 100%;
        border-collapse: separate;
        text-indent: initial;
        border-spacing: 2px;
        box-sizing: border-box;
        align-items: center;
    }
    
    .homepage-stats-box {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        flex-basis: 20%;
        height: 20%;
        padding: 1%;
        background-color: #fff;
        border-radius: 15px;
        border: 2px solid #000;
        margin-bottom: 10px;
    }
    
    .homepage-stats-time-box {
        display: flex;
        flex-direction: column;
        background-color: #0D7384;
        text-align: center;
        border-radius: 10px;
        padding: 4%;
        box-sizing: border-box;
    }
    
    .homepage-stats-times-box {
        display: flex;
        flex-direction: row;
        border-radius: 10px;
        padding: 1%;
        gap: 5px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
    }
    
    .homepage-stats-top-speed-box {
        display: flex;
        flex-direction: column;
        background-color: #0D7384;
        padding: 4%;
        flex-grow: 1;
        max-width: 70px;
        justify-content: space-between;
        border-radius: 10px;
        box-sizing: border-box;
    }
    
    .homepage-stats-type-box {
        display: flex;
        flex-direction: column;
        /* background-color: #fff; */
        /* border: 2px solid #000;  */
        /* border-radius: 10px; */
        width: 100%;
        padding: .5%;
        gap: 5px;
        border-collapse: separate;
        text-indent: initial;
        border-spacing: 2px;
        box-sizing: border-box;
        align-items: center;
    }
    
    .homepage-stats-type-label {
        font-family: 'Roboto', sans-serif;
        font-size: 18pt;
        text-transform: uppercase;
        text-align: center;
        /* background-color: #000; */
        color: #000;
        margin-top: 2%;
        padding: 1%;
        border-radius: 10px 10px 0 0;
    }
    
    .homepage-stats-type-stats-box {
        display: flex;
        justify-content: center;
        gap: 10;
        flex-direction: row;
        border-top: 0px;
        border-radius: 0 0 10px 10px;
    }
    
    .input-error {
        outline: none !important;
        border: 2px solid #ff565d !important;
        font-size: 12pt !important;
        padding: 5px !important;
        line-height: 14pt !important;
        box-shadow: 0px !important;
    }
    
    .keyboard-button {
        display: none;
    }

    .leaderboard-content {
        overflow: auto;
        height: 100%;
    }
    
    .leaderboard-dropdown-row {
        display: flex;
        flex-direction: row;
        align-self: flex-start;
        align-items: flex-end;
        width: 100dvw;
        padding-top: 2dvh;
        border-top: 3px solid #dbfaff;
        padding-bottom: 2dvh;
        background-color: #fff;
    }

    .leaderboard-dropdown-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-family: 'Roboto', sans-serif;
        font-size: 13pt;
        width: 100%;
        text-align: center;
    }

    .leaderboard-time-dropdown {
        font-family: 'Roboto', sans-serif;
        font-size: 10pt;
        background-color: #dbfaff;
        color: black;
        cursor: pointer;
        border: 2px solid black;
        border-radius: 10px;
        margin-left: 1%
    }

    .leaderboard-content-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100dvw;
        overflow: hidden;
        margin-bottom: 15dvh;
        background-image: linear-gradient(#dbfaff 20%, #ffffff00);
    }
    
    .leaderboard-container {
        border-radius: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        max-height: 70dvh;
    }

    .leaderboard-container a {
        color: #ff565d;
        text-decoration: none;
    }

    .leaderboard-place-column {
        width: 15%;
        background-color: #0D7384;
        color: #fff;
        font-size: 15pt;
        text-align: center;
    }

    #leaderboard-practice-time-month {
        display: none;
    }

    .leaderboard-score-column {
        width: 25%;
        padding: 3%;
        background-color: #e6e6e6;
    }

    .leaderboard-section-header {
        width: 97%;
        padding: 3% 0px 3% 3%;
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 25pt;
        text-transform: uppercase;
        color: #0D7384;
        margin: 0px;
        border-bottom: 3px dotted #0D7384;
    }

    .leaderboard-table {
        width: 100%;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #000;
        border-collapse: separate;
        border-spacing: 0px 10px;
    }

    .leaderboard-username-column {
        width: 60%;
        padding: 3%;
    }

    .leaderboard-whitebox {
        background-color: #fff;
        padding: 5%;
        padding-top: 1%;
        padding-bottom: 1%;
        width: 100%;
        box-sizing: border-box;
    }

    .leaderboard-whitebox h4 {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #000;
        width: 100%;
        display: inline-flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-between;
        font-size: 15pt;
        margin: 0px;
    }
    
    .lesson-beer-container {
        display: flex;
        flex-direction: row;
        margin-top: 1%;
        margin-bottom: 1%;
        align-items: flex-end;
        justify-content: flex-end;
    }
    
    .lesson-container {
        width: 98.75%;
        height: 0px;
        flex-direction: column;
        padding: 1%;
        padding-top: 5%;
        padding-bottom: 3%;
        display: none;
        background-color: #e7e7e7;
        border-bottom: 3px solid #fff;
    }

    .lesson-generated-question {
        text-align: center;
        margin: 15px !important;
        font-size: 20pt;
    }

    .lesson-speaking-prompt {
        display: none;
        margin: 3%;
        color: #000;
        font-size: 14pt;
    }
    
    .lesson-image-column {
        display: flex;
        flex-direction: column;
        padding-right: 2%;
        align-items: center;
    }
    
    .lesson-multiple-choice-answer-column {
        text-align: right;
        max-width: 80dvw;
    }

    .lesson-multiple-choice-answer-column label {
        font-size: 15pt;
        line-height: 15pt;
    }
    
    .lesson-multiple-choice-radio-column {
        width: 5%;
    }
    
    .lesson-multiple-choice-table {
        width: fit-content;
        margin: 0px auto !important;
        margin-bottom: 2% !important;
    }
    
    .lesson-page-container {
        width: fit-content;
        margin: 2%;
    }
    
    .lesson-page-header {
        margin-left: 2% !important;
        margin-right: 2% !important;
        width: fit-content !important;
        text-align: center !important;
    }
    
    .lesson-practice-button {
        background-color: green;
        color: #fff;
        padding: 1%;
        border-radius: 15px;
    }
    
    .lesson-progress-container {
        max-width: 85%;
        margin-left: 35px;
    }
    
    .lesson-progress-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding: 5%;
    }
    
    .lesson-progress-row h3 {
        font-size: 12pt;
        color: #ff565d;
        padding-bottom: 5%;
    }
    
    .lesson-row {
        cursor: pointer;
        background-color: #fff;
        padding: 2%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 92%;
        margin: 0px auto;
        border-radius: 15px;
    }
    
    .lesson-text-column {
        font-family: 'Roboto', sans-serif;
        font-size: 10pt !important;
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        align-items: center;
        background-color: #fff;
        width: 100%;
        border-radius: 15px;
        max-height: 20dvh;
        overflow: auto;
        float: top;
        padding: 1%;
        margin: 0px;
    }
    
    .lesson-text-column h3 {
        color: #000;
        margin: 0px;
        padding-bottom: 2%;
        font-size: 15pt;
        line-height: 15pt;
    }
    
    .lesson-text-column p {
        color: #b3b3b3;
        margin: 0px;
        font-size: 15pt !important;
        line-height: 15pt !important;
    }
    
    .lesson-user-response {
        text-align: center;
        border: 2px solid #000;
        padding: 15px !important;
        display: block;
        min-width: 70dvw;
    }

    .login-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        width: 90dvw;
        margin: 0px auto;
        margin-top: 2%;
    }
    
    .error-row {
        display: none;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-bottom: 1%;
    }

    .error-row p {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #ff565d !important;
        font-weight: bold;
        text-align: center;
        margin: 2%;
    }

    .login-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
        margin-bottom: 1%;
    }

    .login-row a {
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
    }

    .login-row label {
        width: fit-content;
        text-wrap: nowrap;
    }
    
    .login-row input {
        width: 100%;
    }
    
    /* .login-table {
        margin: 0px auto;
    }
    
    .login-table input[type="text"], .login-table input[type="password"] {
        width: 96% !important;
    } */
    /* .menu {
        display: flex;
        flex-direction: column;
        align-items:center;
        width: 100dvw;
        height: 100dvh;
        position: fixed;
        top: 0dvh;
        overflow-y: auto;
        overflow-x: hidden;
        left: 120dvw;
        background-color: #dbfaff;
        z-index: 99;
    } */
    
    /* .menu-button {
        color: #000;
        text-decoration: none;
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        border-bottom: 1px solid #000;
        width: 100%;
        padding: 4%;
        text-align: center;
        text-transform: uppercase;
    }

    .open-menu-button {
        position: fixed;
        top: 14px;
        right: 14px;
        padding: 10px;
        background-color: #fff;
        box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px rgba(0,0,0,0.14),0px 1px 18px rgba(0,0,0,0.12);
        z-index: 100;
        border-radius: 50%;
        width: 24px;
        height: 24px;
    } */
    
    /* .menu {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 52px;
        overflow: hidden;
        align-items: center;
        gap: 15px;
        font-family: 'Roboto', sans-serif;
        font-size: 25pt;
        text-transform: uppercase;
        z-index: 6;
        position: fixed;
        top: 0px;
        left: 0px;
        margin: 0px;
        justify-content: space-between;
        background-color: #e6e6e6;
    } */
    
    .note-container {
        width: 98%;
        margin: 0px auto;
        text-align: center;
        padding: 1%;
        background-color: #fff;
        margin: 0px auto;
        margin-top: 2%;
        margin-bottom: 2%;
    }
    
    .note-container p {
        font-family: 'Roboto', sans-serif;
    }
    
    body {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 0px;
        margin: 0px;
        min-height: 100dvh;
        max-height: 100dvh;
        min-width: 100dvw;
    }
    
    .page-container {
        background-image: linear-gradient(#dbfaff 20%, #ffffff00);
        width: 100dvw;
        height: 100dvh;
    }
    
    .page-container a {
        color: #0D7384;
        text-decoration: none;
    }
    
    .page-container h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 25pt;
        line-height: 30pt;
        text-transform: uppercase;
        color: #0D7384;
        margin: 0px;
        padding: 0px;
        border-bottom: 3px dotted #0D7384;
        padding: 3%;
        background-color: transparent;
        width: 94%;
    }
    
    .page-container input {
        border: 0px;
        font-family: 'Roboto', sans-serif;
        font-size: 16pt;
        line-height: 14pt;
        padding: 5px;
        margin: 3px;
        background-color: #fff;
        border-radius: 10px;
        border: 2px solid #fff;
    }
    
    .page-container input:focus {
        outline: none !important;
        border: 2px solid #000;
        font-size: 12pt;
        padding: 5px;
        margin: 3px;
        line-height: 14pt;
        box-shadow: 0px;
    }
    
    .page-container input[type=submit] {
        padding: 10px;
        background-color: #0D7384;
        border: 0px;
        border-radius: 5px;
        color: #fff;
        width: 100%;
        margin: 0px;
        text-transform: uppercase;
    }
    
    .page-container label {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #000;
        margin: 0px;
        padding-bottom: 0px;
    }
    
    .page-container li {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #0D7384;
    }
    
    .page-container p {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        color: #000;
    }
    
    .page-container-account p {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #000;
    }

    .page-container-register a {
        color: #0D7384;
        text-decoration: none;
    }
    
    .page-container-register h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 25pt;
        line-height: 30pt;
        text-transform: uppercase;
        color: #0D7384;
        margin: 0px;
        padding: 0px;
        border-bottom: 3px dotted #0D7384;
        padding: 3%;
        background-color: transparent;
        width: 94%;
    }
    
    .page-container-register input {
        border: 0px;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 14pt;
        padding: 5px;
        margin: 3px;
        background-color: #fff;
        border-radius: 10px;
        border: 2px solid #fff;
    }
    
    .page-container-register input:focus {
        outline: none !important;
        border: 2px solid #000;
        font-size: 12pt;
        padding: 5px;
        margin: 3px;
        line-height: 14pt;
        box-shadow: 0px;
    }
    
    .page-container-register input[type=submit] {
        padding: 10px;
        background-color: #0D7384;
        border: 0px;
        border-radius: 5px;
        color: #fff;
        width: 100%;
        margin: 0px;
        text-transform: uppercase;
    }
    

    .page-container-signup-no-account {
        border-radius: 20px;
        background-image: linear-gradient(#dbfaff 20%, #ffffff00);
        margin: auto;
        height: 100dvh;
        text-align: center;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 14pt;
    }

    .page-container-signup-no-account h2 {
        color: #000 !important;
        text-transform: none !important;
        text-align: center !important;
    }
    
    .page-container-signup-no-account input[type=text] {
        border: 0px;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 14pt;
        padding: 5px;
        margin: 3px;
        background-color: #fff;
        border-radius: 5px;
        border: 2px solid #a0a0a0;
        width: 90dvw;
    }
    
    .page-container-signup-no-account input[type=checkbox] {
        padding: 5px;
    }

    .page-container-signup-no-account input:focus {
        outline: none !important;
        border: 2px solid #000;
        box-shadow: 0px;
    }
    
    .page-content {
        margin: 0px auto;
        width: 100dvw;
        min-height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.911);
        background-image: url('../images/siteBackground.svg');
        background-blend-mode: lighten;
        background-size: 50%;
    }

    .page-content-register-success {
        text-align: center;
        font-family: 'Roboto', sans-serif;
    }

    .page-content-404 a:visited {
        color: #000;
    }
    
    .page-content-signup-no-account {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100dvw;
        height: 100%;
        background-color: #ffffffee;
        background-image: url('../images/siteBackground.svg');
        background-blend-mode: lighten;
        background-size: 30%;
    }
    
    .page-content h1 {
        font-size: 20pt !important;
        font-family: 'Roboto', sans-serif;
        margin: 0px auto;
        margin-bottom: 5%;
        text-align: center;
    }
    
    .page-content p {
        font-size: 12pt !important;
    }
    
    .page-content-middle-column-with-ads {
        width: 94%;
        margin: 3%;
        margin-top: 0px;
        overflow-y: auto;
    }

    .page-content-middle-column-with-ads-dashboard {
        width: 100dvw;
        height: 90dvh;
        overflow: hidden;
    }
    
    .page-content-middle-column-with-ads-exercise {
        width: 100%;
        background-image: linear-gradient(#dbfaff 20%, #ffffff00);
    }

    .page-content-middle-column-with-ads-user-stats {
        width: 100dvw;
        height: 100dvh;
        background-image: linear-gradient(#dbfaff 20%, #ffffff00);
    }
    
    .page-content-middle-column-with-ads-star-scores {
        width: 100dvw;
        height: 100dvh;
        background-image: linear-gradient(#dbfaff 20%, #ffffff00);
    }
    
    .page-content-middle-column-with-ads-user-stats {
        width: 100dvw;
        height: 100dvh;
        background-image: linear-gradient(#dbfaff 20%, #ffffff00);
    }
    
    .page-content-with-ads {
        display: flex;
        overflow: auto;
        align-items: stretch;
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        background-color: #ffffffe7;
        background-image: url('../images/siteBackground.svg');
        background-blend-mode: lighten;
        background-size: 60%;
    }
    
    .page-content-with-ads-logged-out {
        display: flex;
        overflow: auto;
        align-items: stretch;
        width: 100%;
        height: 100%;
        min-height: 100dvh;
        background-color: #ffffffe7;
        background-image: url('../images/siteBackground.svg');
        background-blend-mode: lighten;
        background-size: 60%;
    }

    .password-eye {
        opacity: .5;
    }

    .practice-button-mobile {
        padding: 10px;
        background-color: #ff565d;
        border: 0px;
        font-family: 'Roboto', sans-serif;
        line-height: 12pt;
        font-size: 12pt;
        border-radius: 5px;
        color: #fff;
        margin: 0px;
        width: 100%;
        text-transform: uppercase;
    }
    
    .privacy-policy-container {
        margin: 0 auto;
        max-width: 94dvw;
    }

    /* PROGRESS BAR CLASSES */
    .progress {
        background: linear-gradient(0.25turn, #0D7384, #54A252, #ffda36);
        height: 10px;
        width: 100%;
        padding: 2px;
        border-radius: 100px;
        margin-top: 0px;
    }

    .progress-done {
        height: 100%;
        background-color: #fff;
        border-radius: 100px;
        display: grid;
        place-items: center;
        width: 5%;
        transition: width .5s ease;
    }

    .progress-star {
        display: none;
        margin-top: -4px;
        vertical-align: middle;
    }
    .progress-star-1 {
        display: none;
    }
    .progress-star-2 {
        display: none;
    }
    
    .progress-marker-1 {
        height: 22px;
        width: 0px;
        border-left: 1px solid #000;
        position: relative;
        left: -30dvw;
    }
    .progress-marker-2 {
        height: 22px;
        width: 0px;
        border-left: 1px solid #000;
        position: relative;
        left: -19.5dvw;
    }
    
    .progress-text {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 12pt;
        text-transform: uppercase;
        color: #ff565d;
        text-align: center;
    }
    
    /* .random-exercise-button {
        padding: 1%;
        padding-right: 2%;
        background-color: #fff;
        border: 2px solid #000;
        white-space: nowrap;
        font-family: 'Roboto', sans-serif;
        line-height: 20pt;
        font-size: 20pt;
        border-radius: 15px;
        color: #000;
        margin: 0px;
        text-align: center;
        text-transform: uppercase;
    }

    .random-exercise-button-image {
        max-width:60px;
        max-height:60px;
        vertical-align: middle;
        margin-right: 5px;
    } */

    .recording-button {
        width: 50px;
        height: 50px;
        opacity: .5;
    }

    .recording-waveform {
        border: 1px solid #000;
        background-color: #fff;
        min-height: 128px;
        margin-bottom: 2%;
        width: 90dvw;
    }

    .recording-waveform-container h3 {
        font-family: 'Roboto', sans-serif;
        color:#ff565d;
        line-height: 15pt;
        font-size: 15pt;
        margin: 4% 0px 4% 0px;
    }

    .recording-waveform-column {
        display: flex;
        flex-direction: column-reverse;
    }

    .recording-waveform-column h3 {
        font-family: 'Roboto', sans-serif;
        color:#000;
        line-height: 12pt;
        font-size: 12pt;
        margin: 1% 0px 6% 0px;
    }

    .recording-waveform-row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .reset-password-table button {
        display: block;
        margin: 0px auto !important;
        margin-top: 3% !important;
        justify-content: center;
        width: 100%;
    }
    
    .reset-password-table input[type="text"], .login-table input[type="password"] {
        width: 96% !important;
    }
    
    .row-container {
        position: relative;
        display: flex;
        width: 100%;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        margin-bottom: 5%;
    }

    .column-container {
        display: flex;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 3% 0 3%;
        width: 94%;
    }

    .video-container {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 3% 5% 3%;
        background-color:#dbfaff;
    }
    
    .section-container {
        text-align: center;
        display: flex;
        padding: .5%;
        margin: 1%;
        align-items: center;
        flex-direction: column;
        border: 3px solid #000;
        background-color: #e7e7e7;
        border-radius: 15px;
    }
    
    .section-container-locked {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt !important;
        text-align: center;
        /* width: 50%; */
        display: flex;
        padding: .5%;
        margin: 1%;
        align-items: center;
        flex-direction: column;
        border: 3px solid #e7e7e7;
        background-color: #fff;
        border-radius: 15px;
    }
    
    .section-header-row {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt !important;
        display: flex;
        cursor: pointer;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }
    
    .section-header-row h3 {
        color: #000;
        padding: .5%;
        margin: 0px;
    }
    
    .section-header-row img {
        color: #000;
        margin: 0px;
    }
    
    .section-header-row-locked h3 {
        margin: 5%;
        color: #7a7a7a;
    }

    .similar-articles-container {
        display: none;
    }
    
    .similar-articles-container-mobile {
        display: flex;
        width: 94%;
        flex-direction: column;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 12pt;
        color: #0D7384;
        margin: 0px;
        padding: 2%;
        border-radius: 10px;
        text-align: center;
        background-color: #fff;
        border: 2px solid #000;
        margin-top: 5%;
        margin-bottom: 10dvh;
    }
    
    .similar-articles-container-mobile a {
        color: #0D7384;
        text-decoration: none;
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 25pt;
        width: 80%;
    }
    
    .similar-articles-container-mobile h3 {
        color: #000;
        width: 100%;
        font-size: 20pt;
        line-height: 22pt;
        text-transform: none;
    }
    
    .similar-articles-container-mobile img {
        width: 150px;
        margin: 0px auto;
    }
    
    .similar-articles-container-mobile ul {
        padding-left: 15%;
        margin-top: 0px;
        text-align: left;
    }
    
    /* .site-button {
        padding: 8px;
        background-color: #fff;
        border-radius: 5px;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        line-height: 12pt;
        color: #0D7384;
        margin: 0px;
        border: 2px solid #0D7384;
        text-transform: uppercase;
    }
    
    .site-button:disabled {
        padding: 10px;
        background-color: #a0a0a0;
        border: 0px;
        font-family: 'Roboto', sans-serif;
        line-height: 12pt;
        font-size: 12pt;
        border-radius: 5px;
        color: #fff;
        margin: 0px;
        text-transform: uppercase;
    } */
    
    .star-scores-exercise-container {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        justify-content: center;
        height: fit-content;
        padding-bottom: 2dvh;
        text-align: center;
        padding: 2%;
        /* display: block; */
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        background-color:#fff;
        border: 2px solid #000;
        border-radius: 10px;
        width: 90%;
        margin: 0px auto;
        margin-bottom: 10px;
    }

    .star-scores-exercise-info-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .star-scores-exercise-progress-container {
        width: 90%;
        margin: 5px;
        margin-top: 20px;
        height: 0px;
    }
    
    .star-scores-expand-text {
        color:#0D7384;
        text-transform: uppercase;
        font-size: 12pt;
        margin: 0px;
        cursor: pointer;
        background-color: #fff;
        border: 2px solid #0D7384;
        border-radius: 10px;
        padding: 5px 10px 5px 10px;
        font-style: italic;
        font-weight: bold;
    }
    
    .star-scores-header-bar {
        width: 96%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0px auto;
        margin-top: 25px;
        margin-bottom: 10px;
    }
    
    .star-scores-page-header {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 25pt;
        text-transform: uppercase;
        text-align: center;
        color: #0D7384;
        margin: 0px;
        border-bottom: 3px dotted #0D7384;
        padding: 3% 0px 3% 0px;
        width: 97%;
    }
    
    .star-scores-table {
        width: 100%;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #000;
        border-collapse: collapse;
        border-spacing: 0px 10px;
    }

    .star-scores-table thead {
        background-color: #dbfaff;
        color: #000;
    }

    .star-box {
        display: none;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px;
        font-family: 'Roboto', sans-serif;
        font-size: 11pt;
        line-height: 11pt;
        text-align: center;
        color: #000;
        box-shadow: rgba(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0;
    }

    .star-box p {
        padding: 0;
        margin: 0;
    }

    .star-scores-table thead > tr > td {
        padding: 10px;
    }

    .star-scores-table-container {
        width: 100%;
        height: 0px;
        overflow: hidden;
        max-height: 300px;
    }
    
    .star-scores-table-not-attempted {
        background-color: #e6e6e6;
    }
    
    .star-scores-table-blue-star {
        background-color: #B0ECF7;
    }
    
    .star-scores-table-gold-star {
        background-color: #ffeea5;
    }
    
    .star-scores-table-green-star {
        background-color: #A9ECA8;
    }

    .subscribe-content {
        background-image: linear-gradient(#dbfaff 20%, #ffffff00);
        width: 100%;
        height: 100dvh;
    }

    .subscribe-header {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 25pt;
        text-transform: uppercase;
        color: #0D7384;
        margin: 0px;
        border-bottom: 3px dotted #0D7384;
        padding: 3%;
        width: 94%;
        margin-bottom: 2dvh;
    }

    .subscribe-paragraph {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        color: #000;
        text-align: center;
    }

    .subscribe-mobile-alert {
        background-color: #ff565d;
        color: #fff;
        padding: 3% 0 3% 0;
        border-radius: 15px;
        margin: 2%;
        width: 100%;
        font-weight: bold;
        font-family: 'Roboto', sans-serif;
        font-size: 20pt !important;
        line-height: 20pt;
    }
    
    .subscribe-button {
        padding: 12px;
        background-color: #000;
        border-radius: 15px;
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 20pt;
        color: #fff;
        margin: 0px;
        border: 2px solid #000;
        text-transform: uppercase;
    }

    .subscribe-option h3 {
        text-transform: uppercase;
        font-size: 22pt;
    }
    
    .subscribe-option li {
        text-align: left;
    }
    
    .subscribe-option ul {
        padding-left: 30%;
        /* padding-right: 25px; */
    }
    
    .subscribe-option-selected {
        height: fit-content;
        font-size: 15pt;
        background-color: #ff565d;
        box-shadow: rgba(0, 0, 0, 0.158) 0px 5px 15px;
        color: #fff;
    }

    .subscribe-option-selected h3 {
        color: #fff;
    }
    
    .subscribe-option-selected li {
        color: #000;
    }
    
    .subscribe-option-selected p {
        color: #fff;
        font-size: 15pt;
        margin: 0px auto;
        margin-bottom: 5%;
    }

    .subscribe-table {
        font-family: 'Roboto', sans-serif;
        display: table;
        width: 92%;
        margin: 0px auto;
        margin-top: 2%;
        padding-top: 5px;
    }
    
    .subscribe-table input {
        width: 98%;
    }

    .table-of-contents-content-row {
        width: 100%;
        background-image: linear-gradient(#dbfaff 20%, #ffffff00);
        padding-bottom: 15dvh;
    }

    .table-of-contents-container {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        justify-content: center;
        height: fit-content;
    }
    
    .table-of-contents-section-header {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 25pt;
        text-transform: uppercase;
        color: #0D7384;
        margin: 0px;
        border-bottom: 3px dotted #0D7384;
        padding: 3% 0px 3% 3%;
        width: 97%;
    }
    
    .table-of-contents-whitebox {
        padding: 2%;
        display: block;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        background-color:#fff;
        border: 2px solid #000;
        border-radius: 10px;
        width: 90%;
    }
    
    .table-of-contents-whitebox a:link, .table-of-contents-whitebox a:visited {
        padding: 0px;
        display: block;
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        margin: 2%;
        color: #000;
        text-decoration: none;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .table-of-contents-whitebox p {
        margin: 2%;
    }

    .table-of-contents-whitebox-disabled p {
        margin: 2%;
        color: #7a7a7a;
    }
    
    .table-of-contents-whitebox-disabled a:link, .table-of-contents-whitebox-disabled a:visited {
        color: #7a7a7a;
    }
    
    .test-button-row {
        bottom: 0px;
        z-index: 2;
        padding-top: 5%;
        position: absolute;
        bottom: 0px;
        max-width: 94%;
        background-color:#dbfaff;
    }
    
    .test-button-row button {
        margin: 1%;
        display: inline-block;
    }
    
    .test-page-container {
        width: fit-content;
        margin: 2%;
    }
    
    .test-page-header {
        margin-left: 2% !important;
        margin-right: 2% !important;
        width: fit-content !important;
        text-align: center !important;
    }
    
    .test-results-text {
        padding-bottom: 15%;
        max-height: 70%;
    }
    
    /* .tutorial-start-container, .tutorial-end-container {
        display: none;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 200;
        background-color: #dbfaffc5;
    } */

    .user-manager-page-content {
        margin: 0px auto;
        width: 100dvw;
        min-height: 100dvh;
        overflow: auto;
        font-family: 'Roboto', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.911);
        background-image: url('../images/siteBackground.svg');
        background-blend-mode: lighten;
        background-size: 50%;
    }

    .user-manager-table {
        border: 1px solid #000;
        border-collapse: collapse;
        width: 100dvw;
    }

    .user-manager-table thead {
        background-color: #07868C;
        color: #fff;
        font-weight: bold;
        font-size: 10pt;
    }

    .user-manager-table td {
        border: 1px solid #000;
        padding: 5px;
    }
    
    /* .user-response-and-checkmark-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: fit-content;
        margin: 0px auto;
        margin-top: 2%;
        margin-bottom: 2%;
    } */
    
    .user-icon {
        margin: 0px auto;
    }
    
    .user-stats-bar-graph-box {
        width: 300px;
        margin: 0px auto;
    }
    
    .user-stats-bar-graph-header {
        font-family: 'Roboto', sans-serif;
        font-size: 18pt;
        line-height: 30pt;
        text-transform: uppercase;
        text-align: center;
        width: 100%;
        display: block;
    }
    
    .user-stats-bottom-left-chunk-left-column {
        display: flex;
        margin-right: 7%;
        justify-content: space-between;
        flex-direction: column;
    }
    
    .user-stats-bottom-left-chunk-right-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .user-stats-container {
        position: relative;
        width: 90dvw;
        margin: 0px auto;
        margin-top: 3%;
        font-family: 'Roboto', sans-serif;
        padding-bottom: 10dvh;
        text-align: center;
    }
    
    .user-stats-header-bar {
        width: 100%;
        display: flex;
        margin-top: 25px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .user-stats-left-column {
        display: flex;
        width: 700px;
        flex-direction: row;
        gap: 1%;
        height: 100%;
    }
    
    .user-stats-page-header {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 25pt;
        text-transform: uppercase;
        text-align: center;
        color: #0D7384;
        border-bottom: 3px dotted #0D7384;
        margin: 0px;
        padding: 3% 0px 3% 0px;
        width: 100%;
        background-color: transparent;
    }
    
    .user-stats-right-column {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2%;
        padding-right: 3%;
        background-color: #fff;
        border: 2px solid #000;
        border-radius: 10px;
        width: 250px;
    }
    
    .user-stats-time {
        font-family: 'Roboto', sans-serif;
        font-size: 30pt;
        line-height: 30pt;
        color: #fff;
    }
    
    .user-stats-time-box {
        display: flex;
        flex-direction: column;
        background-color: #0D7384;
        /* padding: 10px; */
        text-align: center;
        border-radius: 10px;
        padding: 2%;
        margin: 2%;
    }
    
    .user-stats-time-label {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        color: #fff;
        text-transform: uppercase;
    }
    
    .user-stats-top-row {
        display: flex;
        flex-direction: row;
        background-color: #fff;
        border: 2px solid #000;
        border-radius: 10px;
        padding: 2%;
        align-items: center;
    }
    
    .user-stats-top-row img {
        width: 80px;
        height: 80px;
        background-color: #fff;
        border-radius: 50%;
        margin: 0px auto;
    }
    
    .user-stats-top-speed-box {
        display: flex;
        flex-direction: column;
        background-color: #0D7384;
        padding: 2%;
        margin: 1%;
        justify-content: space-between;
        height: 90%;
        border-radius: 10px;
    }
    
    .user-stats-top-speed-divider {
        width: 100%;
        border-bottom: 2px solid #fff;
        background-color: #0D7384;
    }
    
    .user-stats-top-speed-number {
        font-family: 'Roboto', sans-serif;
        font-size: 30pt;
        color: #fff;
    }
    
    .user-stats-top-speed-text-box {
        font-family: 'Roboto', sans-serif;
        font-size: 10pt;
        color: #000;
        width: 20px;
        height: 90px;
        text-transform: uppercase;
    }
    
    .user-stats-top-speed-text-box span {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        display: block;
        transform: rotate(-90deg);
        color: #000;
        height: 20px;
        width: 90px;
        text-align: center;
        margin: 0px auto;
        margin-top: 35px;
        margin-left: -35px;
    }
    
    .user-stats-top-speed-units {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        text-transform: uppercase;
        color: #fff;
    }
    
    .user-stats-word-stats-button {
        padding: 8px;
        background-color: #0D7384;
        border-radius: 15px;
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        line-height: 15pt;
        color: #fff;
        margin: 1%;
        text-wrap: nowrap;
        text-decoration: none;
        border: 2px solid #0D7384;
        text-transform: uppercase;
    }
    
    .user-stats-year-label {
        font-family: 'Roboto', sans-serif;
        font-size: 18pt;
        text-transform: uppercase;
        text-align: center;
        background-color: #000;
        color: #fff;
        margin-top: 5%;
        border-radius: 10px 10px 0 0;
    }
    
    .user-stats-year-stats-box {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        border: 2px solid #000;
        border-top: 0px;
        border-radius: 0 0 10px 10px;
    }
    
    .user-stats-year-stats-container {
        display: flex;
        flex-direction: column;
    }

    .writing-practice-buttons {
        margin-top: 2dvh;
    }

    .writing-practice-explanations {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        color: #000;
        line-height: 15pt;
    }
    
    .writing-practice-explanations li {
        font-size: 12pt;
        line-height: 12pt;
    }

    .writing-practice-loading {
        display: none;
    }

    .writing-practice-prompt-dropdown {
        max-width: 96dvw;
        margin-bottom: 1dvh;
    }

    .writing-practice-prompt-selector {
        text-align: center;
        max-width: 100dvw;
    }

    .writing-practice-prompt-selector p {
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
        margin: 1dvh;
        color: #000;
        line-height: 15pt;
    }

    .writing-practice-requests {
        margin-top: 1dvh;
        margin-bottom: 1dvh;
        color: #000;
        font-size: 15pt;
        text-align: center;
    }

    .writing-practice-requests span {
        color:#ff565d;
    }

    .writing-practice-requests p {
        margin: 0px;
        font-size: 12pt;
    }
    
    /* .writing-practice-results span, li {
        color: #07868C;
    } */

    .writing-practice-subscribe-container, .writing-practice-expired-container {
        position: absolute;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 0px;
        left: 0px;
        width: 100dvw;
        height: 100dvh;
        background-color:rgba(255, 255, 255, 0.7);
    }

    .writing-practice-subscribe-box, .writing-practice-expired-box {
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color:#dbfaff;
        border: 2px solid #000;
        border-radius: 15px;
        padding: 15px;
        text-align: center;
    }

    .writing-practice-subscribe-box p {
        margin-top: 0px;
        margin-bottom: 2dvh;
    }

    .writing-practice-page-container {
        width: 100dvw;
        font-family: 'Roboto', sans-serif;
        font-size: 15pt;
    }

    .writing-practice-expired-box h2 {
        font-family: 'Roboto', sans-serif;
        font-size: 25pt;
        line-height: 25pt;
        text-transform: uppercase;
        color: #0D7384;
        margin: 0px;
        cursor: pointer;
        text-align: left;
        padding-bottom: 1%;
    }

    .writing-practice-expired-box p {
        font-family: 'Roboto', sans-serif;
        font-size: 12pt;
        color: #000;
        margin: 15px;
        text-align: center;
    }

    .writing-practice-header-bar {
        width: 100%;
        display: flex;
        margin-top: 25px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .writing-practice-page-header {
        font-family: 'Roboto', sans-serif;
        font-size: 20pt;
        line-height: 25pt;
        text-transform: uppercase;
        text-align: center;
        color: #0D7384;
        border-bottom: 3px dotted #0D7384;
        margin: 0px;
        padding: 3% 0px 3% 0px;
        width: 100%;
        background-color: transparent;
    }
    .writing-practice-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-bottom: 5%;
        background-color: #fff;
    }
}