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

.eyeAppContainer {
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 1rem 0
}

.eyeAppContainer * {
    font-family: 'Segoe UI', Arial, sans-serif;
    user-select: none
}

.eyeAppContainer .app {
    background: #f4f6f9;
    border-radius: 18px;
    max-width: 30cm;
    min-width: 15cm;
    width: 95vw;
    box-sizing: border-box;
    box-shadow: 0 4px 32px 0 rgba(10, 32, 80, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative
}

.eyeAppContainer .app .page {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    display: none;
    height: 18cm
}

.eyeAppContainer .app .page.active {
    display: block
}

.eyeAppContainer .app .page.exercise {
    display: none;
    position: relative;
    flex-direction: column;
    align-items: center;
    border-radius: 18px;
    background: #f4f6f9
}

.eyeAppContainer .app .page.exercise.active {
    display: flex
}

.eyeAppContainer .app .page.exercise .exercise-header {
    width: calc(100%);
    height: 6rem;
    border-radius: 18px 18px 0px 0px;
    padding: 1rem;
    display: flex;
    justify-content: space-between
}

.eyeAppContainer .app .page.exercise .exercise-header .exercise-title {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start
}

.eyeAppContainer .app .page.exercise .exercise-header .exercise-title .center {
    gap: 2rem
}

.eyeAppContainer .app .page.exercise .exercise-header .exercise-meta {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center
}

.eyeAppContainer .app .page.exercise .exercise-header .exercise-meta .end-btn {
    width: 100%;
    height: 2.5rem;
    border-radius: 2.5rem;
    background-color: white;
    cursor: pointer
}

.eyeAppContainer .app .page.exercise .exercise-header .exercise-meta .end-btn.disabled {
    cursor: default;
    background-color: #e5e5e5
}

.eyeAppContainer .app .page.exercise .exercise-header .exercise-meta .score {
    text-align: center
}

.eyeAppContainer .app .page.exercise .exercise-area {
    width: 100%;
    height: calc(100% - 7rem);
    flex: 1;
    position: relative
}

.eyeAppContainer .app .page.exercise .exercise-area .point {
    width: 1rem;
    height: 1rem;
    background-color: #d9d9d9;
    box-shadow: inset 0 0 0 0.1rem #00000034;
    border-radius: 100%;
    position: absolute
}

.eyeAppContainer .app .page.exercise .exercise-area .char {
    position: absolute;
    font-size: 3rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.eyeAppContainer .app .page.exercise .exercise-area .char.active::before {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    background-color: #ff0000;
    box-shadow: inset 0 0 0 0.1rem #ff000034;
    border-radius: 100%;
    position: absolute;
    bottom: -10px
}

.eyeAppContainer .app .page.exercise .exercise-area .popUp {
    display: none;
    width: 40%;
    height: 80%;
    z-index: 0;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    font-size: 2rem;
    border-radius: 18px
}

.eyeAppContainer .app .page.exercise .exercise-area .popUp.active {
    display: flex
}

.eyeAppContainer .app .page.exercise .exercise-area .popUp div {
    text-align: center
}

.eyeAppContainer .app .page.exercise .exercise-area .popUp .end-btn {
    width: 60%;
    font-size: 1.3rem;
    height: 2.5rem;
    border-radius: 2.5rem;
    background-color: white;
    cursor: pointer
}

.eyeAppContainer .app .page.exercise .exercise-answer {
    padding: 1rem 0;
    width: 50%;
    gap: 0.6rem
}

.eyeAppContainer .app .page.exercise .exercise-answer input {
    color: black;
    flex: 1;
    padding: 0.4rem 1rem;
    border: 2px solid black;
    border-radius: 12px;
    text-align: center;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
    font-size: 1.5rem
}

.eyeAppContainer .app .page.exercise .exercise-answer input::placeholder {
    font-weight: 600;
    color: #333
}

.eyeAppContainer .app .page.exercise .exercise-answer .submit-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer
}

.eyeAppContainer .app .page.exercise.green .exercise-header {
    background-color: #5dc887
}

.eyeAppContainer .app .page.exercise.green .exercise-area .popUp {
    background-color: #5dc887
}

.eyeAppContainer .app .page.exercise.green .exercise-answer input {
    background-color: #e2f5ea
}

.eyeAppContainer .app .page.exercise.green .exercise-answer .submit-btn {
    background-color: #e2f5ea
}

.eyeAppContainer .app .page.exercise.blue .exercise-header {
    background-color: #bbd3ea
}

.eyeAppContainer .app .page.exercise.blue .exercise-area .popUp {
    background-color: #bbd3ea
}

.eyeAppContainer .app .page.exercise.blue .exercise-answer input {
    background-color: #fff
}

.eyeAppContainer .app .page.exercise.blue .exercise-answer .submit-btn {
    background-color: #fff
}

.eyeAppContainer .app .page.exercise.red .exercise-header {
    background-color: #ffd5c1
}

.eyeAppContainer .app .page.exercise.red .exercise-area .popUp {
    background-color: #ffd5c1
}

.eyeAppContainer .app .page.exercise.red .exercise-answer input {
    background-color: #fff
}

.eyeAppContainer .app .page.exercise.red .exercise-answer .submit-btn {
    background-color: #fff
}

.eyeAppContainer .app .page.exercise.teal .exercise-header {
    background-color: #a0e6d0
}

.eyeAppContainer .app .page.exercise.teal .exercise-area .popUp {
    background-color: #a0e6d0
}

.eyeAppContainer .app .page.exercise.teal .exercise-answer input {
    background-color: #fff
}

.eyeAppContainer .app .page.exercise.teal .exercise-answer .submit-btn {
    background-color: #fff
}

.eyeAppContainer .app .page.exercise.fern .exercise-header {
    background-color: #3ca96b
}

.eyeAppContainer .app .page.exercise.fern .exercise-area .popUp {
    background-color: #3ca96b
}

.eyeAppContainer .app .page.exercise.fern .exercise-answer input {
    background-color: #b3e4c8
}

.eyeAppContainer .app .page.exercise.fern .exercise-answer .submit-btn {
    background-color: #b3e4c8
}

.eyeAppContainer .app #mainPage {
    padding: 1rem 2rem 1rem 2rem
}

.eyeAppContainer .app #mainPage .optionsContainer {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1%
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option,
.eyeAppContainer .app #mainPage .optionsContainer .optCont .preview {
    display: flex;
    align-items: center;
    border-radius: 16px;
    padding: 0.6rem 1.8rem;
    font-size: 1.5rem;
    font-weight: 500;
    box-shadow: 0 2px 12px 0 rgba(10, 32, 80, 0.04);
    transition: transform 0.18s cubic-bezier(0.46, 1.48, 0.69, 0.99), box-shadow 0.15s;
    cursor: pointer;
    user-select: none
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option img,
.eyeAppContainer .app #mainPage .optionsContainer .optCont .preview img {
    width: 100%;
    object-fit: cover
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option:hover,
.eyeAppContainer .app #mainPage .optionsContainer .optCont .preview:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 8px 24px 0 rgba(10, 32, 80, 0.12)
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option.green,
.eyeAppContainer .app #mainPage .optionsContainer .optCont .preview.green {
    background: #5dc887;
    color: #151515
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option.blue,
.eyeAppContainer .app #mainPage .optionsContainer .optCont .preview.blue {
    background: #bbd3ea;
    color: #151515
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option.red,
.eyeAppContainer .app #mainPage .optionsContainer .optCont .preview.red {
    background: #ffd5c1;
    color: #151515
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option.teal,
.eyeAppContainer .app #mainPage .optionsContainer .optCont .preview.teal {
    background: #a0e6d0;
    color: #151515
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option.fern,
.eyeAppContainer .app #mainPage .optionsContainer .optCont .preview.fern {
    background: #3ca96b;
    color: #151515
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option {
    flex: 1;
    justify-content: space-between
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .option .arrow {
    font-size: 2.2rem;
    margin-left: 1.4rem;
    font-weight: bold
}

.eyeAppContainer .app #mainPage .optionsContainer .optCont .preview {
    width: 10%;
    justify-content: center
}

.eyeAppContainer .app #mainPage .optionsContainer .option {
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 16px;
    padding: 0.6rem 1.8rem;
    font-size: 1.5rem;
    font-weight: 500;
    box-shadow: 0 2px 12px 0 rgba(10, 32, 80, 0.04);
    transition: transform 0.18s cubic-bezier(0.46, 1.48, 0.69, 0.99), box-shadow 0.15s;
    cursor: pointer;
    user-select: none;
    width: 80%
}

.eyeAppContainer .app #mainPage .optionsContainer .option:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 8px 24px 0 rgba(10, 32, 80, 0.12)
}

.eyeAppContainer .app #mainPage .optionsContainer .option .arrow {
    font-size: 2.2rem;
    margin-left: 1.4rem;
    font-weight: bold
}

.eyeAppContainer .app #mainPage .optionsContainer .option.green {
    background: #5dc887;
    color: #151515
}

.eyeAppContainer .app #mainPage .optionsContainer .option.blue {
    background: #bbd3ea;
    color: #151515
}

.eyeAppContainer .app #mainPage .optionsContainer .option.red {
    background: #ffd5c1;
    color: #151515
}

.eyeAppContainer .app #mainPage .optionsContainer .option.teal {
    background: #a0e6d0;
    color: #151515
}

.eyeAppContainer .app #mainPage .optionsContainer .option.fern {
    background: #3ca96b;
    color: #151515
}

.eyeAppContainer .app #mainPage .maxim {
    text-align: center;
    color: #888;
    font-size: 1.16rem;
    font-style: italic;
    margin: 0.6rem 0;
    letter-spacing: 0.01em
}

.eyeAppContainer .app #mainPage .headerSection {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 8rem;
    margin-bottom: 1.5rem
}

.eyeAppContainer .app #mainPage .headerSection .profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%
}

.eyeAppContainer .app #mainPage .headerSection .profile img {
    height: 90%;
    object-fit: cover;
    border-radius: 10px
}

.eyeAppContainer .app #mainPage .headerSection .profile .name {
    margin-top: 8px;
    font-weight: bold;
    font-size: 14px;
    text-align: center
}

.eyeAppContainer .app #mainPage .headerSection .titleInfo {
    text-align: center;
    min-width: 200px
}

.eyeAppContainer .app #mainPage .headerSection .titleInfo h1 {
    margin: 0;
    font-size: 3rem;
    font-weight: bold
}

.eyeAppContainer .app #mainPage .headerSection .titleInfo .links {
    margin-top: 4px;
    font-size: 13px;
    color: #333
}

.eyeAppContainer .app #mainPage .headerSection .titleInfo .links a {
    color: #1976d2;
    text-decoration: none
}

.eyeAppContainer .app #mainPage .headerSection .titleInfo .links a:hover {
    text-decoration: underline
}

.eyeAppContainer .app #mainPage .headerSection .copyright {
    height: 100%
}

.eyeAppContainer .app #mainPage .headerSection .copyright img {
    height: inherit;
    object-fit: cover
}

.eyeAppContainer .app #mainPage .allRights {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    font-size: 0.75rem;
    color: #e67300
}

@media (max-width: 650px) {
    .eyeAppContainer .app #mainPage {
        padding: 1.1rem 0.4rem;
        min-width: unset;
        max-width: 99vw
    }

    .eyeAppContainer .app #mainPage .option {
        padding: 1.1rem 0.8rem;
        font-size: 1.1rem;
        border-radius: 11px
    }

    .eyeAppContainer .app #mainPage .option .arrow {
        font-size: 1.4rem;
        margin-left: 0.8rem
    }

    .eyeAppContainer .app #mainPage .maxim {
        font-size: 1rem
    }
}

@media (max-width: 400px) {
    .eyeAppContainer .app #mainPage {
        padding: 0.5rem 0.1rem
    }

    .eyeAppContainer .app #mainPage .option {
        font-size: 1rem;
        padding: 0.85rem 0.6rem
    }

    .eyeAppContainer .app #mainPage .option .arrow {
        font-size: 1.1rem;
        margin-left: 0.4rem
    }
}

.read .exercise-area,
.exam .exercise-area {
    display: flex;
    align-items: center;
    justify-content: space-around
}

.read .exercise-area .arrow-container,
.exam .exercise-area .arrow-container {
    flex-direction: column;
    margin-left: 1rem;
    gap: 0.5rem
}

.read .exercise-area .arrow-container .arrow-button,
.exam .exercise-area .arrow-container .arrow-button {
    width: 2rem;
    height: 2rem;
    padding: 0.3rem;
    font-size: 1.7rem;
    background-color: #a83600;
    color: white;
    border-radius: 2rem;
    cursor: pointer;
    transition: background-color 0.3s;
    scale: 1.3;
}

.read .exercise-area .arrow-container .arrow-button#up,
.exam .exercise-area .arrow-container .arrow-button#up {
    rotate: 180deg
}

.read .exercise-area .arrow-container .arrow-button#left,
.exam .exercise-area .arrow-container .arrow-button#left {
    rotate: 90deg
}

.read .exercise-area .arrow-container .arrow-button#right,
.exam .exercise-area .arrow-container .arrow-button#right {
    rotate: 270deg
}

.read .exercise-area .arrow-container .arrow-button.disabled,
.exam .exercise-area .arrow-container .arrow-button.disabled {
    cursor: default;
    background-color: #e5e5e5
}

.read .exercise-area .arrow-container .arrow-button.disabled:hover,
.exam .exercise-area .arrow-container .arrow-button.disabled:hover {
    background-color: #e5e5e5
}

.read .exercise-area .arrow-container .arrow-button:hover,
.exam .exercise-area .arrow-container .arrow-button:hover {
    background-color: #ff7f42
}

.read .exercise-area .popUp,
.exam .exercise-area .popUp {
    position: absolute;
    width: 80% !important
}

.read .exercise-area .popUp .container_select_passage,
.read .exercise-area .popUp .container_select_cursor,
.read .exercise-area .popUp .container_select_speedMode,
.exam .exercise-area .popUp .container_select_passage,
.exam .exercise-area .popUp .container_select_cursor,
.exam .exercise-area .popUp .container_select_speedMode {
    gap: 1rem;
    width: 80%
}

.read .exercise-area .popUp .container_select_passage #select_passage,
.read .exercise-area .popUp .container_select_passage #select_cursor,
.read .exercise-area .popUp .container_select_passage #select_speedMode,
.read .exercise-area .popUp .container_select_cursor #select_passage,
.read .exercise-area .popUp .container_select_cursor #select_cursor,
.read .exercise-area .popUp .container_select_cursor #select_speedMode,
.read .exercise-area .popUp .container_select_speedMode #select_passage,
.read .exercise-area .popUp .container_select_speedMode #select_cursor,
.read .exercise-area .popUp .container_select_speedMode #select_speedMode,
.exam .exercise-area .popUp .container_select_passage #select_passage,
.exam .exercise-area .popUp .container_select_passage #select_cursor,
.exam .exercise-area .popUp .container_select_passage #select_speedMode,
.exam .exercise-area .popUp .container_select_cursor #select_passage,
.exam .exercise-area .popUp .container_select_cursor #select_cursor,
.exam .exercise-area .popUp .container_select_cursor #select_speedMode,
.exam .exercise-area .popUp .container_select_speedMode #select_passage,
.exam .exercise-area .popUp .container_select_speedMode #select_cursor,
.exam .exercise-area .popUp .container_select_speedMode #select_speedMode {
    height: 70%;
    width: 30%
}

.read .exercise-area .popUp #startPopUpClose.disabled,
.exam .exercise-area .popUp #startPopUpClose.disabled {
    cursor: default;
    background-color: #e5e5e5
}

.read .exercise-area .textArea,
.exam .exercise-area .textArea {
    height: calc(100% - 1.5rem);
    margin: 1rem 1rem;
    overflow: hidden;
    overflow-wrap: break-word;
    padding-bottom: 4px
}

.read .exercise-area .textArea .title,
.exam .exercise-area .textArea .title {
    height: auto;
    text-align: center;
    font-size: 1.5rem
}

.read .exercise-area .textArea .passage,
.exam .exercise-area .textArea .passage {
    font-weight: 400;
    text-align: justify
}

.read .exercise-area .textArea .passage span.highlighted,
.exam .exercise-area .textArea .passage span.highlighted {
    background-color: chartreuse
}

.exam .end-btn {
    padding: 0 0.5rem
}

.exam .exercise-area {
    display: flex
}

.exam .exercise-area .arrow-container {
    width: calc(100% - 2rem);
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1rem;
    gap: 0;
    margin: 0;
    position: absolute
}

.exam .exercise-area .questionArea {
    width: 80%;
    height: calc(100% - 2rem);
    margin: 1rem 1rem
}

.exam .exercise-area .questionArea .question_sentence {
    height: auto;
    text-align: center;
    font-size: 1.5rem;
    margin: 0 0 1rem 0
}

.exam .exercise-area .questionArea .container_options {
    display: flex;
    flex-direction: column;
    flex-direction: container;
    align-items: center;
    justify-content: center;
    gap: 0.3rem
}

.exam .exercise-area .questionArea .container_options .option {
    background-color: #e1e5ea;
    border: 1.5px solid #ccc;
    width: 90%;
    display: flex;
    justify-content: flex-start;
    gap: 1.2rem;
    align-items: center;
    border-radius: 12px;
    padding: 0.6rem 1.8rem;
    font-size: 1.5rem;
    font-weight: 500;
    box-shadow: 0 2px 12px 0 rgba(10, 32, 80, 0.04);
    transition: transform 0.18s cubic-bezier(0.46, 1.48, 0.69, 0.99), box-shadow 0.15s;
    cursor: pointer;
    user-select: none
}

.exam .exercise-area .questionArea .container_options .option.chosen {
    background-color: #9ec5ff;
    border: 0px solid #ccc
}

.exam .exercise-area .questionArea .container_options .option:hover {
    background-color: #cfe2ff;
    border: 0px solid #ccc;
    transform: translateY(-1px) scale(1.015);
    box-shadow: 0 8px 24px 0 rgba(10, 32, 80, 0.12)
}


#finishUp {
    width: 60% !important;
    height: 65%
}

#finishUp.green {
    background: rgba(93, 200, 135, 0.8);
    color: #151515
}

#finishUp.blue {
    background: rgba(187, 211, 234, 0.8);
    color: #151515
}

#finishUp.red {
    background: rgba(255, 213, 193, 0.8);
    color: #151515
}

#finishUp.teal {
    background: rgba(160, 230, 208, 0.8);
    color: #151515
}

#finishUp.fern {
    background: rgba(60, 169, 107, 0.8);
    color: #151515
}

select{
    font-size:1rem !important;
}