/* /Pages/History.razor.rz.scp.css */

.container[b-cf18m95h8l] {
    height: 100%;
}

.history-space[b-cf18m95h8l] {
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box;
    height: calc(100% - 15px);
    max-width: 1000px;
    color: #333;
    user-select: none;
    border: 3px solid #DDD;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
}

.hisotry-list-wrapper[b-cf18m95h8l] {
    height: calc(100% - 160px);
    padding: 5px 0;
    padding-bottom: 20px;
    border: 5px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
}


.hisotry-list[b-cf18m95h8l] {
    width: 100%;
    height: calc(100% - 10px);
    padding: 0 20px;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}
/* /Pages/Home.razor.rz.scp.css */

.container[b-xatzab58r1]{
    height: 100%;
}

.top-space[b-xatzab58r1] {
    height: 20%;
}

.middle-space[b-xatzab58r1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 顶部对齐 */
    height: 40vh; /* 设置为视口高度的 30% */
    padding: 20px;
    box-sizing: border-box;
}

.bottom-space[b-xatzab58r1] {
    min-height: 150px;
}

.start-learning-button[b-xatzab58r1] {
    width: 250px;
    height: 250px;
    margin-left:calc(50% - 125px);
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    display:inline-block;
}

    .start-learning-button:hover[b-xatzab58r1] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-xatzab58r1] {
    position: relative;
    top: 100px;
    text-align: center;
    color: #fff;
}

.bottom-tool-button[b-xatzab58r1] {
    width: 220px;
    height: 130px;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-xatzab58r1] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-xatzab58r1] {
    color: #fff;
    position: relative;
    top: 40px;
    text-align: center;
}

.bottom-tool-button-text-middle-space[b-xatzab58r1] {
    color: #fff;
    position: relative;
    text-align: center;
}

.giveup-learning-button[b-xatzab58r1] {
    width: 330px; /* 增加按钮宽度 */
    height: 100px; /* 增加按钮高度 */
    background-color: #25899d;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0; /* 增加上下间距 */
    font-size: 20px; /* 增大字体大小 */
    background-color: #d45b6c;
}

    .giveup-learning-button:hover[b-xatzab58r1] {
        background-color: #e56b8b;
    }

.giveup-learning-button-text[b-xatzab58r1] {
    color: #fff;
    position: relative;
    top: 40px;
    text-align: center;
}

.task-select-learning-button[b-xatzab58r1] {
    width: 330px; /* 增加按钮宽度 */
    height: 100px; /* 增加按钮高度 */
    background-color: #25899d;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0; /* 增加上下间距 */
    font-size: 20px; /* 增大字体大小 */
}

    .task-select-learning-button:hover[b-xatzab58r1] {
        background-color: #45a9bd;
    }

.task-select-learning-button-text[b-xatzab58r1] {
    position: relative;
    top: 100px;
    text-align: center;
    color: #fff;
}

.guide[b-xatzab58r1]{
    height: 90%;
    width: 70%;
    background-color: burlywood;
    position: fixed;
    border-radius: 10px;
    padding: 20px;
    z-index: 999;
    overflow-y:auto;
}

.continue-learning-button[b-xatzab58r1] {
    width: 330px; /* 增加按钮宽度 */
    height: 100px; /* 增加按钮高度 */
    background-color: #25899d;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0; /* 增加上下间距 */
    font-size: 20px; /* 增大字体大小 */
}

.button-text[b-xatzab58r1] {
    color: #fff;
    text-align: center;
    font-weight: bold; /* 增加字体粗细 */
}

.left-buttons[b-xatzab58r1], .right-buttons[b-xatzab58r1] {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 居中对齐 */
    width: 50%; /* 分别占据容器的一半宽度 */
}
/* /Pages/Learning/IndexCooperateWritting.razor.rz.scp.css */
/* 基础布局 */
.navbar[b-r8brjp97un] {
    padding: 5px 0;
    background-color: rgb(241, 204, 154);
}

    .navbar[b-r8brjp97un]:after {
        content: "";
        position: absolute;
        width: 100%;
        bottom: 1px;
        z-index: -1;
        transform: scale(.9);
        box-shadow: 0px 0px 8px 2px #000000;
    }

.mask[b-r8brjp97un] {
    width: 100vw;
    height: calc(100vh - 57px);
    position: fixed;
    top: 57px;
    left: 0;
    z-index: 10;
    background-color: rgba(230,230,230,0.9);
}

.top-space[b-r8brjp97un] {
    margin-top: calc(100vh / 2 - 70px - 127px);
}

.mask-reconnecting[b-r8brjp97un] {
    background-color: rgba(245,245,245,0.9);
    padding: 15px;
}

.list-group[b-r8brjp97un] {
    list-style-type: none; /* 去除默认的列表样式 */
    padding: 0; /* 去除内边距 */
    margin: 0; /* 去除外边距 */
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-grow: 1;
    overflow-y: auto; /* 允许滚动 */
}

.list-group-item[b-r8brjp97un] {
    padding: 5px 10px; /* 列表项内边距 */
    border-bottom: 1px solid #ccc; /* 列表项间的分隔线 */
    width: 100%;
}

    .list-group-item:last-child[b-r8brjp97un] {
        border-bottom: none; /* 最后一项不显示分隔线 */
    }

/* 整体布局样式 */
.navbar .container-fluid[b-r8brjp97un] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-section[b-r8brjp97un], .center-section[b-r8brjp97un], .room-code[b-r8brjp97un], .right-section[b-r8brjp97un] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-section[b-r8brjp97un] {
    align-items: center;
    justify-content: flex-start; /* 结束学习按钮靠左对齐 */
}

.right-section[b-r8brjp97un] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
}

.center-section[b-r8brjp97un] {
    flex-grow: 2; /* 中间部分获得更多空间，保证标题居中 */
    align-items: center;
    justify-content: center; /* 确保内容水平居中 */
}

.room-code[b-r8brjp97un] {
    margin: 0 15px; /* 教室代码与其他元素的间距 */
}

/* 标题样式 */
.title[b-r8brjp97un] {
    text-align: center; /* 确保标题文字居中 */
}

.step-fragment-area[b-r8brjp97un] {
    width: 100%; /* 保证占满整个可用宽度 */
    padding: 10px;
}

.main-container[b-r8brjp97un] {
    width: 100%;
    height: calc(100vh - 60px); /* 假设 navbar 高度为 60px */
    overflow: auto
}

.main-content[b-r8brjp97un] {
    flex: 0 0 80%; /* 占据剩余空间的80% */
    overflow-y: auto;
    padding: 10px;
    height: 100%;
}

.right-side-content[b-r8brjp97un] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgb(241, 204, 154);
    padding: 10px;
    overflow: hidden; /* 防止内容溢出 */
}

.right-section-middle[b-r8brjp97un] {
    flex: 1; /* 分配一半空间给连线列表 */
    overflow-y: auto; /* 允许滚动 */
    padding: 10px;
}

.right-section-bottom[b-r8brjp97un] {
    flex: 1; /* 分配一半空间给聊天功能 */
    overflow-y: auto; /* 允许滚动 */
    padding: 10px;
}

.chat-section[b-r8brjp97un] {
    position: absolute;
    bottom: 100%; /* 根据需要调整定位 */
    right: 0;
    width: 300px; /* 或根据实际需求调整宽度 */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
}

.message-section[b-r8brjp97un] {
    padding: 10px 0;
    width: 100%; /* 确保输入框横跨整个聊天区域的宽度 */
}

.input-group[b-r8brjp97un] {
    width: 100%; /* 输入组占满整个宽度 */
}

.form-control[b-r8brjp97un] {
    flex-grow: 1; /* 输入框占用除按钮外的全部空间 */
}

.input-group-append[b-r8brjp97un] {
    /* 无需额外样式，仅保证按钮紧邻输入框 */
}

.btn[b-r8brjp97un] {
    z-index: 10; /* 确保按钮在内容上方 */ /* 确保按钮在内容之上 */
}

.toggle-buttons[b-r8brjp97un] {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    z-index: 1050;
}

.animated[b-r8brjp97un] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

@keyframes scaleIn-b-r8brjp97un {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.button-and-content[b-r8brjp97un] {
    display: flex;
    flex-direction: column-reverse; /* 使内容在按钮上方展开 */
    align-items: center;
    margin-left: 20px; /* 两个按钮之间的距离 */
    position: relative;
}

.content-area[b-r8brjp97un] {
    position: absolute;
    bottom: 50px; /* 确保内容显示在按钮上方 */
    right: 0;
    width: 200px; /* 根据需要调整宽度 */
    transition: transform 0.3s, opacity 0.3s;
    transform: scale(0);
    transform-origin: bottom right;
    opacity: 0;
}

.connection-list[b-r8brjp97un], .chat-section[b-r8brjp97un] {
    position: absolute;
    bottom: 100%; /* 仍然保持在按钮上方 */
    right: 0;
    width: 300px; /* 或根据实际需要调整宽度 */
    opacity: 1; /* 确保默认是可见的 */
    visibility: visible; /* 确保默认是可见的 */
    max-height: 300px; /* 最大高度限制 */
    overflow-y: auto; /* 超出部分显示滚动条 */
}
/* /Pages/Learning/IndexReading.razor.rz.scp.css */

.navbar[b-y4frecv4r0] {
    padding: 5px 0;
    /*background: linear-gradient(to bottom, rgba(241, 204, 154, 1) 0%, rgba(241, 204, 154, 1) 90%, rgba(241, 204, 154, 0) 100%);*/
    background-color: rgb(241, 204, 154);
}

    .navbar[b-y4frecv4r0]:after {
        content: "";
        position: absolute;
        width: 100%;
        bottom: 1px;
        z-index: -1;
        transform: scale(.9);
        box-shadow: 0px 0px 8px 2px #000000;
    }

.main-content[b-y4frecv4r0] {
    padding-top:7px;
    height: calc(95vh - 60px);
    overflow-y: auto;
}

.mask[b-y4frecv4r0] {
    width: 100vw;
    height: calc(100vh - 57px);
    position: fixed;
    top: 57px;
    left: 0;
    z-index: 10;
    background-color: rgba(230,230,230,0.9);
}

.top-space[b-y4frecv4r0] {
    margin-top: calc(100vh / 2 - 70px - 127px);
}

.mask-reconnecting[b-y4frecv4r0] {
    background-color: rgba(245,245,245,0.9);
    padding: 15px;
}
/* /Pages/Learning/IndexWritting.razor.rz.scp.css */

.navbar[b-2bkvy4yubm] {
    padding: 5px 0;
    /*background: linear-gradient(to bottom, rgba(241, 204, 154, 1) 0%, rgba(241, 204, 154, 1) 90%, rgba(241, 204, 154, 0) 100%);*/
    background-color: rgb(241, 204, 154);
}

    .navbar[b-2bkvy4yubm]:after {
        content: "";
        position: absolute;
        width: 100%;
        bottom: 1px;
        z-index: -1;
        transform: scale(.9);
        box-shadow: 0px 0px 8px 2px #000000;
    }

.main-content[b-2bkvy4yubm] {
    padding-top:7px;
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.mask[b-2bkvy4yubm] {
    width: 100vw;
    height: calc(100vh - 57px);
    position: fixed;
    top: 57px;
    left: 0;
    z-index: 10;
    background-color: rgba(230,230,230,0.9);
}

.top-space[b-2bkvy4yubm] {
    margin-top: calc(100vh / 2 - 70px - 127px);
}

.mask-reconnecting[b-2bkvy4yubm] {
    background-color: rgba(245,245,245,0.9);
    padding: 15px;
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_AbstractExampleReading.razor.rz.scp.css */

.container[b-kr02vbsnd9]{
    height: 100%;
}

.top-bar[b-kr02vbsnd9] {
    background: #f8f8f8;
    padding: 10px;
}

.example-view[b-kr02vbsnd9] {
    width: calc(100%);
    padding: 0;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.mindmap-area[b-kr02vbsnd9] {
    position: relative;
    width: calc(50% - 6px);
    height: calc(600px);
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    margin: 0 3px;
}

.start-learning-button[b-kr02vbsnd9] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-kr02vbsnd9] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-kr02vbsnd9] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-kr02vbsnd9] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-kr02vbsnd9] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-kr02vbsnd9] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.mindmap-title[b-kr02vbsnd9] {
    position: absolute;
    color: #333;
    width: 100%;
    top: 5px;
    left: 0;
    text-align:center;
    user-select:none;
}

.grid-container[b-kr02vbsnd9] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列 */
    gap: 10px; /* 间距 */
    height: calc(100vh - 140px); /* 总高度限制 */
    padding: 0;
    margin: 0;
}

.grid-box[b-kr02vbsnd9] {
    border: 2px solid #ccc; /* 边框 */
    padding: 10px; /* 内填充 */
    overflow-y: auto; /* 当内容溢出时显示滚动条 */
    height: 100%; /* 填满整个网格 */
}

textarea[b-kr02vbsnd9] {
    width: 100%; /* 填满父容器 */
    height: auto; /* 自动调整高度 */
    resize: none; /* 禁止调整大小 */
}

.background[b-kr02vbsnd9] {
    height: calc(100vh - 60px);
    padding: 0;
    margin: 0;
}

.container-fluid[b-kr02vbsnd9] {
    height: calc(100vh - 60px); /* 一致的高度 */
    padding: 0;
    margin: 0;
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_AbstractWriting.razor.rz.scp.css */

.container[b-egrbpzgxal] {
    height: 100%;
}

.example-view[b-egrbpzgxal] {
    width: 100vw;
    padding: 0 10px;
    height: calc(100vh - 160px);
    box-sizing: border-box;
}

.description-area[b-egrbpzgxal] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.description-area-wrapper[b-egrbpzgxal] {
    width: calc(50% - 10px);
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}

.mindmap-area-wrapper[b-egrbpzgxal] {
    width: calc(50% - 10px);
    margin: 0;
    height: 100%;
    display: inline-block;
}

.wrting-area[b-egrbpzgxal] {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-egrbpzgxal] {
    width: 100%;
    height: calc(100% );
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
}

.start-learning-button[b-egrbpzgxal] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-egrbpzgxal] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-egrbpzgxal] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-egrbpzgxal] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-egrbpzgxal] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-egrbpzgxal] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-egrbpzgxal] {
    font-size: 26px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 3px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    margin-top: 2px;
    box-sizing: border-box;
}

.fixed-edit-button[b-egrbpzgxal] {
    position: fixed; /* 固定定位 */
    top: 50%; /* 垂直置中 */
    right: 50px; /* 靠近頁面右側，距離右邊緣10px */
    transform: translateY(-50%); /* 確保垂直居中 */
    z-index: 1000; /* 確保按鈕在其他元素之上 */
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_ArticleExampleReading.razor.rz.scp.css */

.container[b-758crgujxa]{
    height: 100%;
}

.top-bar[b-758crgujxa] {
    box-sizing: border-box;
}

.example-view[b-758crgujxa] {
    width: calc(100%);
    padding: 0;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.mindmap-area[b-758crgujxa] {
    position: relative;
    width: calc(50% - 6px);
    height: calc(600px);
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    margin: 0 3px;
}

.start-learning-button[b-758crgujxa] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-758crgujxa] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-758crgujxa] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-758crgujxa] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-758crgujxa] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-758crgujxa] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.mindmap-title[b-758crgujxa] {
    position: absolute;
    color: #333;
    width: 100%;
    top: 5px;
    left: 0;
    text-align:center;
    user-select:none;
}

.grid-container[b-758crgujxa] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列 */
    gap: 10px; /* 间距 */
    height: calc(100vh - 140px); /* 总高度限制 */
    padding: 0;
    margin: 0;
}

.grid-box[b-758crgujxa] {
    border: 2px solid #ccc; /* 边框 */
    padding: 10px; /* 内填充 */
    overflow-y: auto; /* 当内容溢出时显示滚动条 */
    height: 100%; /* 填满整个网格 */
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_ArticleWriting.razor.rz.scp.css */

.container[b-xlrbeyss6n] {
    height: 100%;
}

.example-view[b-xlrbeyss6n] {
    width: 100vw;
    padding: 0 10px;
    height: calc(100vh - 160px);
    box-sizing: border-box;
}

.description-area[b-xlrbeyss6n] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.description-area-wrapper[b-xlrbeyss6n] {
    width: calc(50% - 10px);
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}

.mindmap-area-wrapper[b-xlrbeyss6n] {
    width: calc(50% - 10px);
    margin: 0;
    height: 100%;
    display: inline-block;
}

.wrting-area[b-xlrbeyss6n] {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-xlrbeyss6n] {
    width: 100%;
    height: calc(100% );
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
}

.start-learning-button[b-xlrbeyss6n] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-xlrbeyss6n] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-xlrbeyss6n] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-xlrbeyss6n] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-xlrbeyss6n] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-xlrbeyss6n] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-xlrbeyss6n] {
    font-size: 26px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 3px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    margin-top: 2px;
    box-sizing: border-box;
}

.fixed-edit-button[b-xlrbeyss6n] {
    position: fixed; /* 固定定位 */
    top: 50%; /* 垂直置中 */
    right: 50px; /* 靠近頁面右側，距離右邊緣10px */
    transform: translateY(-50%); /* 確保垂直居中 */
    z-index: 1000; /* 確保按鈕在其他元素之上 */
}

.grid-box[b-xlrbeyss6n] {
    border: 2px solid #ccc; /* 边框 */
    padding: 10px; /* 内填充 */
    overflow-y: auto; /* 当内容溢出时显示滚动条 */
    height: 100%; /* 填满整个网格 */
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_CommonMindMapDrawing.razor.rz.scp.css */

.container[b-ixbk7vvyvb] {
    height: 100%;
}

.example-view[b-ixbk7vvyvb] {
    width: 100vw;
    padding: 0 5px;
    height: calc(100vh - 120px);
    box-sizing: border-box;
}

.left-panel[b-ixbk7vvyvb] {
    width: calc(40% - 5px);
    max-width: calc(100vw - 915px);
    display: inline-block;
    box-sizing: border-box;
}

.mindmap-title[b-ixbk7vvyvb]{
    width:100%;
    position: absolute;
    left: 0;
    top: 10px;
    user-select: none;
    text-align:center;
}

.description-area[b-ixbk7vvyvb] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-ixbk7vvyvb] {
    width: 100%;
    height: 185px;
    padding: 3px 7px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area-wrapper[b-ixbk7vvyvb] {
    width: calc(60%);
    min-width: 900px;
    height: 100%;
    display: inline-block;
}

.prompt-area[b-ixbk7vvyvb] {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
    overflow-y: auto;
}

.toolbar[b-ixbk7vvyvb] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-ixbk7vvyvb] {
    position:relative;
    width: 100%;
    height: calc(100% - 195px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.essay-area[b-ixbk7vvyvb] {
    position: relative;
    width: 100%;
    height: calc(100% - 195px);
    padding: 3px 7px;
    margin: 0 auto;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    overflow-y:auto;
}

.start-learning-button[b-ixbk7vvyvb] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-ixbk7vvyvb] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-ixbk7vvyvb] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-ixbk7vvyvb] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-ixbk7vvyvb] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-ixbk7vvyvb] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-ixbk7vvyvb] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}

.disabled[b-ixbk7vvyvb] {
    opacity: 0.5; /* 视觉效果：半透明 */
    pointer-events: none; /* 禁用所有点击事件 */
}

    .disabled *[b-ixbk7vvyvb] {
        pointer-events: none; /* 确保内部所有元素都不能点击 */
    }
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_FinishArticleWriting.razor.rz.scp.css */

.text-area[b-l9k5yws13r] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-l9k5yws13r], .container-fluid[b-l9k5yws13r] {
    height: 100%;
}

.main-text[b-l9k5yws13r] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-l9k5yws13r] {
    height: 100%;
}

.reading-area-dictionary[b-l9k5yws13r] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-l9k5yws13r] {
    width: 500px;
    height: 100%;
}

.dictionary-area-border[b-l9k5yws13r] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}



.keyword-button[b-l9k5yws13r] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

    .keyword-button:hover[b-l9k5yws13r] {
        background-color: #ffe047;
        /*color: white;*/
    }

.keyword-button-selecting[b-l9k5yws13r] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #ffe047;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.discuss-container[b-l9k5yws13r] {
    display: flex;
    /*width: 500px;*/
    margin: 0 auto;
    padding: 10px;
}

.related-img[b-l9k5yws13r] {
    max-width: 80%;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

.related-video[b-l9k5yws13r] {
    margin-bottom: 80px;
    text-align: center;
}

.video-container[b-l9k5yws13r] {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: calc(100% * 9 / 16 );*/
}

.video-embed[b-l9k5yws13r] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.non-select[b-l9k5yws13r] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_Loading.razor.rz.scp.css */

.container[b-izgmd0bgcr]{
    height: 100%;
}

.top-space[b-izgmd0bgcr] {
    height: 20%;
}

.middle-space[b-izgmd0bgcr] {
    height: 55%;
}

.bottom-space[b-izgmd0bgcr] {
    height: 25%;
}

.start-learning-button[b-izgmd0bgcr] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-izgmd0bgcr] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-izgmd0bgcr] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-izgmd0bgcr] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-izgmd0bgcr] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-izgmd0bgcr] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_MainRoom.razor.rz.scp.css */

.container[b-7sf844yj6d] {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 使容器高度为整个视口高度，根据需要调整 */
    flex-direction: column; /* 子元素垂直排列 */
}

.example-view[b-7sf844yj6d] {
    width: 100vw;
    padding: 0 10px;
    height: calc(100vh - 160px);
    box-sizing: border-box;
}

.description-area[b-7sf844yj6d] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.description-area-wrapper[b-7sf844yj6d] {
    width: calc(50% - 10px);
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}

.mindmap-area-wrapper[b-7sf844yj6d] {
    width: calc(50% - 10px);
    margin: 0;
    height: 100%;
    display: inline-block;
}

.wrting-area[b-7sf844yj6d] {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-7sf844yj6d] {
    width: 100%;
    height: calc(100% );
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
}

.start-learning-button[b-7sf844yj6d] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-7sf844yj6d] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-7sf844yj6d] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-7sf844yj6d] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-7sf844yj6d] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-7sf844yj6d] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-7sf844yj6d] {
    font-size: 26px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 3px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    margin-top: 2px;
    box-sizing: border-box;
}

.row.mt-3[b-7sf844yj6d] {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 取决于您希望的行为，这将使整行高度为视窗的高度 */
    margin-top: -50px; /* 根据需要调整这个值 */
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_MindMapDrawing.razor.rz.scp.css */

.container[b-fnodf227ny] {
    height: 100%;
}

.example-view[b-fnodf227ny] {
    width: 100vw;
    padding: 0 5px;
    height: calc(100vh - 120px);
    box-sizing: border-box;
}

.left-panel[b-fnodf227ny] {
    width: calc(40% - 5px);
    max-width: calc(100vw - 915px);
    display: inline-block;
    box-sizing: border-box;
}

.mindmap-title[b-fnodf227ny]{
    width:100%;
    position: absolute;
    left: 0;
    top: 10px;
    user-select: none;
    text-align:center;
}

.description-area[b-fnodf227ny] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-fnodf227ny] {
    width: 100%;
    height: 185px;
    padding: 3px 7px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area-wrapper[b-fnodf227ny] {
    width: calc(60%);
    min-width: 900px;
    height: 100%;
    display: inline-block;
}

.prompt-area[b-fnodf227ny] {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.toolbar[b-fnodf227ny] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-fnodf227ny] {
    position:relative;
    width: 100%;
    height: calc(100% - 195px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.essay-area[b-fnodf227ny] {
    position: relative;
    width: 100%;
    height: calc(100% - 195px);
    padding: 3px 7px;
    margin: 0 auto;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    overflow-y:auto;
}

.start-learning-button[b-fnodf227ny] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-fnodf227ny] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-fnodf227ny] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-fnodf227ny] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-fnodf227ny] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-fnodf227ny] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-fnodf227ny] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_MindMapExampleReading.razor.rz.scp.css */

.container[b-22fk4uzxyq]{
    height: 100%;
}

.top-bar[b-22fk4uzxyq] {
    box-sizing: border-box;
}

.example-view[b-22fk4uzxyq] {
    width: calc(100%);
    padding: 0;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.mindmap-area[b-22fk4uzxyq] {
    position: relative;
    width: calc(50% - 6px);
    height: calc(600px);
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    margin: 0 3px;
}

.start-learning-button[b-22fk4uzxyq] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-22fk4uzxyq] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-22fk4uzxyq] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-22fk4uzxyq] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-22fk4uzxyq] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-22fk4uzxyq] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.mindmap-title[b-22fk4uzxyq] {
    position: absolute;
    color: #333;
    width: 100%;
    top: 5px;
    left: 0;
    text-align:center;
    user-select:none;
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_RoomCreating.razor.rz.scp.css */
.container[b-bi9qo73b1u] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 25px);
}

.box[b-bi9qo73b1u] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    border: 2px solid #ccc;
    border-radius: 20px; /* 設置圓角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.center-content[b-bi9qo73b1u] {
    text-align: center;
}

.input-wrapper[b-bi9qo73b1u] {
    margin-bottom: 20px;
}

input[type="text"][b-bi9qo73b1u] {
    width: 300px; /* 增加 input 的寬度 */
    height: 50px; /* 增加 input 的高度 */
    padding: 0 10px; /* 增加內部間距 */
    font-size: 20px; /* 增加字體大小 */
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: center; /* 水平置中 */
    line-height: 50px; /* 垂直置中，值應該與 input 高度一致 */
}

input[type="text"][b-bi9qo73b1u]::placeholder {
    text-align: center; /* 水平置中 */
    line-height: 50px; /* 垂直置中，值應該與 input 高度一致 */
    font-size: 20px; /* 增加 placeholder 字體大小 */
}

button.btn-complete[b-bi9qo73b1u] {
    padding: 10px 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_TaskComplete.razor.rz.scp.css */

.container[b-di3k88nm62]{
    height: 100%;
}

.wrapper[b-di3k88nm62] {
    width: 700px;
    height: calc(100% - 25px);
    box-sizing: border-box;
    border: 3px solid #edb448;
    border-radius: 10px;
    overflow-y:auto;
    user-select:none;
}
/* /Pages/Learning/StepsCooperateWritting/CoopWrite_TaskSelecting.razor.rz.scp.css */
.container[b-qt8h9acdy9], .container-fluid[b-qt8h9acdy9] {
    height: calc(100% - 7px);
}

.title[b-qt8h9acdy9] {
    user-select:none;
    height: 100px;
}

.difficult-button[b-qt8h9acdy9] {
    width:90%;
    padding: 5px 0;
    color: #333;
    user-select: none;
    cursor: pointer;
    border: 3px solid #edb448;
    border-radius: 10px;
    height:auto;
    background-color: #FFF;
    text-align:center;
}

.difficult-button.fat[b-qt8h9acdy9] {
    padding: 15px 0;
}

    .difficult-button:hover[b-qt8h9acdy9] {
        background-color: #fdb661;
    }

    .difficult-button:active[b-qt8h9acdy9] {
        box-shadow: rgba(200, 200, 200, 0.35) 0px 5px 15px;
    }

    .difficult-button.disabled[b-qt8h9acdy9] {
        opacity: 0.3;
        pointer-events: none;
    }

    .difficult-button.active[b-qt8h9acdy9] {
        background-color: #fdb661;
        pointer-events: none;
    }

.selection-list-wrapper[b-qt8h9acdy9] {
    width: 100%;
    height: calc(100% - 100px);
    padding: 5px 0;
    padding-bottom: 10px;
    border: 5px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
}

.selection-list[b-qt8h9acdy9] {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    padding-top: 10px;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.letter-spacing[b-qt8h9acdy9] {
    letter-spacing: 10px;
}

.tag[b-qt8h9acdy9] {
    background-color: #276c4b;
    color: #FFF;
    border-radius: 10px;
    padding: 5px 8px;
}

.selected-num[b-qt8h9acdy9] {
    right: 0; /* 定位到右侧 */
    width: 10%; /* 宽度为父容器的30% */
    padding: 5px 0;
    color: #333;
    user-select: none;
    cursor: pointer;
    border: 3px solid #edb448;
    border-radius: 10px;
    background-color: #FFF;
    text-align: center;
}

.horizontal-layout[b-qt8h9acdy9] {
    display: flex; /* 启用 flexbox */
    justify-content: flex-start; /* 将子元素向行的开始方向对齐 */
    align-items: center; /* 子元素在交叉轴上居中对齐 */
}
/* /Pages/Learning/StepsReading/Read_ArticleAbstractWriting_Learning.razor.rz.scp.css */

.text-area[b-d9eznbot1y] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-d9eznbot1y], .container-fluid[b-d9eznbot1y] {
    height: 100%;
}

.main-text[b-d9eznbot1y] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-d9eznbot1y] {
    height: 100%;
}

.reading-area-dictionary[b-d9eznbot1y] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-d9eznbot1y] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-d9eznbot1y] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.mindmap-area-wrapper[b-d9eznbot1y] {
    width: calc(60%);
    /*min-width: 940px;*/
    height: 100%;
    display: inline-block;
}

.mindmap-area[b-d9eznbot1y] {
    width: 100%;
    height: calc(100% - 250px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.container[b-d9eznbot1y] {
    height: 100%;
}


.example-view[b-d9eznbot1y] {
    width: 100%;
    padding: 0 5px;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.description-area[b-d9eznbot1y] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-d9eznbot1y] {
    width: calc(40% - 5px);
    /*max-width: calc(100vw - 955px);*/
    height: calc(100%);
    padding: 10px 10px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}


.prompt-area[b-d9eznbot1y] {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
    overflow-y: auto;
}

.toolbar[b-d9eznbot1y] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}



.start-learning-button[b-d9eznbot1y] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-d9eznbot1y] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-d9eznbot1y] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-d9eznbot1y] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-d9eznbot1y] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-d9eznbot1y] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-d9eznbot1y] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Read_ArticleAbstractWriting_Writing.razor.rz.scp.css */

.text-area[b-o3ik8pwiv7] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-o3ik8pwiv7], .container-fluid[b-o3ik8pwiv7] {
    height: 100%;
}

.main-text[b-o3ik8pwiv7] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-o3ik8pwiv7] {
    height: 100%;
}

.reading-area-dictionary[b-o3ik8pwiv7] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-o3ik8pwiv7] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-o3ik8pwiv7] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.mindmap-area-wrapper[b-o3ik8pwiv7] {
    width: calc(65%);
    /*min-width: 940px;*/
    height: 100%;
    display: inline-block;
}

.mindmap-area[b-o3ik8pwiv7] {
    width: 100%;
    height: calc(100% - 278px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.container[b-o3ik8pwiv7] {
    height: 100%;
}


.example-view[b-o3ik8pwiv7] {
    width: 100%;
    padding: 0 5px;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.description-area[b-o3ik8pwiv7] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-o3ik8pwiv7] {
    width: calc(35% - 5px);
    /*max-width: calc(100vw - 955px);*/
    height: calc(100%);
    padding: 10px 10px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}


.prompt-area[b-o3ik8pwiv7] {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
    overflow-y: auto;
}

.toolbar[b-o3ik8pwiv7] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}



.start-learning-button[b-o3ik8pwiv7] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-o3ik8pwiv7] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-o3ik8pwiv7] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-o3ik8pwiv7] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-o3ik8pwiv7] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-o3ik8pwiv7] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-o3ik8pwiv7] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Read_ArticleInfoStep1.razor.rz.scp.css */

.text-area[b-lmyq42djja] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-lmyq42djja], .container-fluid[b-lmyq42djja] {
    height: 100%;
}

.main-text[b-lmyq42djja] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-lmyq42djja] {
    height: 100%;
}

.reading-area-dictionary[b-lmyq42djja] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-lmyq42djja] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-lmyq42djja] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.keyword-button[b-lmyq42djja] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

    .keyword-button:hover[b-lmyq42djja] {
        background-color: #ffe047;
        /*color: white;*/
    }

.keyword-button-selecting[b-lmyq42djja] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #ffe047;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.keyword-button-selected[b-lmyq42djja] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #d6021e; /*紅色*/
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

/* /Pages/Learning/StepsReading/Read_ArticleInfoStep1_Answering.razor.rz.scp.css */
.text-area[b-spa2pin8us] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-spa2pin8us], .container-fluid[b-spa2pin8us] {
    height: 100%;
}

.main-text[b-spa2pin8us] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-spa2pin8us] {
    height: 100%;
}

.reading-area-dictionary[b-spa2pin8us] {
    width: calc(100% - 510px);
    height: 100%;

}

.dictionary-area[b-spa2pin8us] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-spa2pin8us] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.keyword-button[b-spa2pin8us] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

    .keyword-button:hover[b-spa2pin8us] {
        background-color: #ffe047;
        /*color: white;*/
    }

.keyword-button-selecting[b-spa2pin8us] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #ffe047;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.keyword-button-selected[b-spa2pin8us] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #d6021e; /*紅色*/
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

/*錯誤選項*/
.keyword-button-incorrect[b-spa2pin8us] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: palevioletred;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.keyword-button-correct[b-spa2pin8us] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color:lightgreen;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}
/* /Pages/Learning/StepsReading/Read_ArticleInfoStep1_Learning.razor.rz.scp.css */
/*錯誤選項*/
.keyword-button-incorrect[b-lvm985izuc] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: palevioletred;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.text-area[b-lvm985izuc] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-lvm985izuc], .container-fluid[b-lvm985izuc] {
    height: 100%;
}

.main-text[b-lvm985izuc] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-lvm985izuc] {
    height: 100%;
}

.reading-area-dictionary[b-lvm985izuc] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-lvm985izuc] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-lvm985izuc] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.keyword-button[b-lvm985izuc] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

    .keyword-button:hover[b-lvm985izuc] {
        background-color: #ffe047;
        /*color: white;*/
    }

.keyword-button-selecting[b-lvm985izuc] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #ffe047;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.keyword-button-selected[b-lvm985izuc] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #d6021e; /*紅色*/
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

/* /Pages/Learning/StepsReading/Read_ArticleInfoStep1_Selecting.razor.rz.scp.css */

.text-area[b-1wj046ltyv] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-1wj046ltyv], .container-fluid[b-1wj046ltyv] {
    height: 100%;
}

.main-text[b-1wj046ltyv] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-1wj046ltyv] {
    height: 100%;
}

.reading-area-dictionary[b-1wj046ltyv] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-1wj046ltyv] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-1wj046ltyv] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.keyword-button[b-1wj046ltyv] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

    .keyword-button:hover[b-1wj046ltyv] {
        background-color: #ffe047;
        /*color: white;*/
    }

.keyword-button-selecting[b-1wj046ltyv] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #ffe047;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.keyword-button-selected[b-1wj046ltyv] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #d6021e; /*紅色*/
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

/* /Pages/Learning/StepsReading/Read_ArticleInfoStep2.razor.rz.scp.css */

.text-area[b-1dxfxemtt6] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-1dxfxemtt6], .container-fluid[b-1dxfxemtt6] {
    height: 100%;
}

.main-text[b-1dxfxemtt6] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-1dxfxemtt6] {
    height: 100%;
}

.reading-area-dictionary[b-1dxfxemtt6] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-1dxfxemtt6] {
    width: 500px;
    height: 100%;
}

.dictionary-area-border[b-1dxfxemtt6] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.related-img[b-1dxfxemtt6] {
    max-width: 80%;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

/* /Pages/Learning/StepsReading/Read_ArticleInfoStep2_Answering.razor.rz.scp.css */

.text-area[b-17ojjvbk1j] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-17ojjvbk1j], .container-fluid[b-17ojjvbk1j] {
    height: 100%;
}

.main-text[b-17ojjvbk1j] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-17ojjvbk1j] {
    height: 100%;
}

.reading-area-dictionary[b-17ojjvbk1j] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-17ojjvbk1j] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-17ojjvbk1j] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.related-img[b-17ojjvbk1j] {
    max-width: 80%;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

/* /Pages/Learning/StepsReading/Read_ArticleInfoStep2_Learning.razor.rz.scp.css */

.text-area[b-h9h50csp54] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-h9h50csp54], .container-fluid[b-h9h50csp54] {
    height: 100%;
}

.main-text[b-h9h50csp54] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-h9h50csp54] {
    height: 100%;
}

.reading-area-dictionary[b-h9h50csp54] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-h9h50csp54] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-h9h50csp54] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.related-img[b-h9h50csp54] {
    max-width: 80%;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

/* /Pages/Learning/StepsReading/Read_ArticleInfoStep2_Selecting.razor.rz.scp.css */

.text-area[b-hibsus7ewf] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-hibsus7ewf], .container-fluid[b-hibsus7ewf] {
    height: 100%;
}

.main-text[b-hibsus7ewf] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-hibsus7ewf] {
    height: 100%;
}

.reading-area-dictionary[b-hibsus7ewf] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-hibsus7ewf] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-hibsus7ewf] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.related-img[b-hibsus7ewf] {
    max-width: 80%;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

/* /Pages/Learning/StepsReading/Read_ArticleInfoStep3.razor.rz.scp.css */

.text-area[b-k88jiygrlr] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-k88jiygrlr], .container-fluid[b-k88jiygrlr] {
    height: 100%;
}

.main-text[b-k88jiygrlr] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-k88jiygrlr] {
    height: 100%;
}

.reading-area-dictionary[b-k88jiygrlr] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-k88jiygrlr] {
    width: 500px;
    height: 100%;
}

.dictionary-area-border[b-k88jiygrlr] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.related-video[b-k88jiygrlr] {
    margin-bottom: 80px;
    text-align: center;
}

.video-container[b-k88jiygrlr] {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: calc(100% * 9 / 16 );*/
}

.video-embed[b-k88jiygrlr] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* /Pages/Learning/StepsReading/Read_ArticleInfoStep3_Answering.razor.rz.scp.css */

.text-area[b-7uwvrhggz8] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-7uwvrhggz8], .container-fluid[b-7uwvrhggz8] {
    height: 100%;
}

.main-text[b-7uwvrhggz8] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-7uwvrhggz8] {
    height: 100%;
}

.reading-area-dictionary[b-7uwvrhggz8] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-7uwvrhggz8] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-7uwvrhggz8] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.related-video[b-7uwvrhggz8] {
    margin-bottom: 80px;
    text-align: center;
}

.video-container[b-7uwvrhggz8] {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: calc(100% * 9 / 16 );*/
}

.video-embed[b-7uwvrhggz8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* /Pages/Learning/StepsReading/Read_ArticleInfoStep3_Learning.razor.rz.scp.css */

.text-area[b-onfy6avccs] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-onfy6avccs], .container-fluid[b-onfy6avccs] {
    height: 100%;
}

.main-text[b-onfy6avccs] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-onfy6avccs] {
    height: 100%;
}

.reading-area-dictionary[b-onfy6avccs] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-onfy6avccs] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-onfy6avccs] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
.related-video[b-onfy6avccs] {
    margin-bottom: 80px;
    text-align: center;
}

.video-container[b-onfy6avccs] {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: calc(100% * 9 / 16 );*/
}

.video-embed[b-onfy6avccs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* /Pages/Learning/StepsReading/Read_ArticleInfoStep3_Selecting.razor.rz.scp.css */

.text-area[b-789mfhgt48] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-789mfhgt48], .container-fluid[b-789mfhgt48] {
    height: 100%;
}

.main-text[b-789mfhgt48] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-789mfhgt48] {
    height: 100%;
}

.reading-area-dictionary[b-789mfhgt48] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-789mfhgt48] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-789mfhgt48] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.related-video[b-789mfhgt48] {
    margin-bottom: 80px;
    text-align: center;
}

.video-container[b-789mfhgt48] {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: calc(100% * 9 / 16 );*/
}

.video-embed[b-789mfhgt48] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* /Pages/Learning/StepsReading/Read_ArticleInfoStep4.razor.rz.scp.css */

.text-area[b-wlfnjb88oa] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-wlfnjb88oa], .container-fluid[b-wlfnjb88oa] {
    height: 100%;
}

.main-text[b-wlfnjb88oa] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-wlfnjb88oa] {
    height: 100%;
}

.reading-area-dictionary[b-wlfnjb88oa] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-wlfnjb88oa] {
    width: 500px;
    height: 100%;
}

.dictionary-area-border[b-wlfnjb88oa] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
/* /Pages/Learning/StepsReading/Read_ArticleInfoStep4_Answering.razor.rz.scp.css */

.text-area[b-wkjxdf935u] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-wkjxdf935u], .container-fluid[b-wkjxdf935u] {
    height: 100%;
}

.main-text[b-wkjxdf935u] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-wkjxdf935u] {
    height: 100%;
}

.reading-area-dictionary[b-wkjxdf935u] {
    width: calc(100% - 510px);
    height: 100%;
}
.dictionary-area[b-wkjxdf935u] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-wkjxdf935u] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
/* /Pages/Learning/StepsReading/Read_ArticleInfoStep4_Learning.razor.rz.scp.css */

.text-area[b-nzf736q5ic] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-nzf736q5ic], .container-fluid[b-nzf736q5ic] {
    height: 100%;
}

.main-text[b-nzf736q5ic] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-nzf736q5ic] {
    height: 100%;
}

.reading-area-dictionary[b-nzf736q5ic] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-nzf736q5ic] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-nzf736q5ic] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
/* /Pages/Learning/StepsReading/Read_ArticleInfoStep4_Selecting.razor.rz.scp.css */

.text-area[b-tzz8zv8tgy] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-tzz8zv8tgy], .container-fluid[b-tzz8zv8tgy] {
    height: 100%;
}

.main-text[b-tzz8zv8tgy] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-tzz8zv8tgy] {
    height: 100%;
}

.reading-area-dictionary[b-tzz8zv8tgy] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-tzz8zv8tgy] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-tzz8zv8tgy] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
/* /Pages/Learning/StepsReading/Read_ArticleMindMapDrawing_Answering.razor.rz.scp.css */

.text-area[b-of5wjoekkq] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-of5wjoekkq], .container-fluid[b-of5wjoekkq] {
    height: 100%;
}

.main-text[b-of5wjoekkq] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-of5wjoekkq] {
    height: 100%;
}

.reading-area-dictionary[b-of5wjoekkq] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-of5wjoekkq] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-of5wjoekkq] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
.mindmap-area-wrapper[b-of5wjoekkq] {
    width: calc(65%);
    /*min-width: 940px;*/
    height: 100%;
    display: inline-block;
}

.mindmap-area[b-of5wjoekkq] {
    width: 100%;
    height: calc(100% - 250px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.container[b-of5wjoekkq] {
    height: 100%;
}


.example-view[b-of5wjoekkq] {
    width: 100%;
    padding: 0 5px;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.description-area[b-of5wjoekkq] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-of5wjoekkq] {
    width: calc(35% - 5px);
    /*max-width: calc(100vw - 955px);*/
    height: calc(100%);
    padding: 10px 10px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}


.prompt-area[b-of5wjoekkq] {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
    overflow-y: auto;
}

.toolbar[b-of5wjoekkq] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}



.start-learning-button[b-of5wjoekkq] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-of5wjoekkq] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-of5wjoekkq] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-of5wjoekkq] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-of5wjoekkq] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-of5wjoekkq] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-of5wjoekkq] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Read_ArticleMindMapDrawing_Drawing.razor.rz.scp.css */

.text-area[b-czw7x4kizf] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-czw7x4kizf], .container-fluid[b-czw7x4kizf] {
    height: 100%;
}

.main-text[b-czw7x4kizf] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-czw7x4kizf] {
    height: 100%;
}

.reading-area-dictionary[b-czw7x4kizf] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-czw7x4kizf] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-czw7x4kizf] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
.mindmap-area-wrapper[b-czw7x4kizf] {
    width: calc(60%);
    /*min-width: 940px;*/
    height: 100%;
    display: inline-block;
}

.mindmap-area[b-czw7x4kizf] {
    width: 100%;
    height: calc(100% - 250px); 
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}
.container[b-czw7x4kizf] {
    height: 100%;
}


.example-view[b-czw7x4kizf] {
    width: 100%;
    padding: 0 5px;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.description-area[b-czw7x4kizf] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-czw7x4kizf] {
    width: calc(40% - 5px);
    /*max-width: calc(100vw - 955px);*/
    height: calc(100%);
    padding: 10px 10px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}


.prompt-area[b-czw7x4kizf] {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
    overflow-y: auto;
}

.toolbar[b-czw7x4kizf] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}



.start-learning-button[b-czw7x4kizf] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-czw7x4kizf] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-czw7x4kizf] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-czw7x4kizf] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-czw7x4kizf] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-czw7x4kizf] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-czw7x4kizf] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Read_ArticleReading.razor.rz.scp.css */

.text-area[b-d63gj96v23] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-d63gj96v23] , .container-fluid[b-d63gj96v23] {
    height: 100%;
}

.main-text[b-d63gj96v23] {
    min-height: calc(100% - 160px);
    font-size : 36px;
}

.reading-area[b-d63gj96v23] {
    height: 100%;
}

.reading-area-dictionary[b-d63gj96v23] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-d63gj96v23] {
    width: 500px;
    height: 100%;
}

.dictionary-area-border[b-d63gj96v23] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
/* /Pages/Learning/StepsReading/Read_ArticleSubjectSelecting_Selecting.razor.rz.scp.css */
.text-area[b-t8nl4bu8n5] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-t8nl4bu8n5], .container-fluid[b-t8nl4bu8n5] {
    height: 100%;
}

.main-text[b-t8nl4bu8n5] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-t8nl4bu8n5] {
    height: 100%;
}

.reading-area-dictionary[b-t8nl4bu8n5] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-t8nl4bu8n5] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-t8nl4bu8n5] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.mindmap-area-wrapper[b-t8nl4bu8n5] {
    width: calc(65%);
    /*min-width: 940px;*/
    height: 100%;
    display: inline-block;
}

.mindmap-area[b-t8nl4bu8n5] {
    width: 100%;
    height: calc(100% - 250px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.container[b-t8nl4bu8n5] {
    height: 100%;
}


.example-view[b-t8nl4bu8n5] {
    width: 100%;
    padding: 0 5px;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.description-area[b-t8nl4bu8n5] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-t8nl4bu8n5] {
    width: calc(35% - 5px);
    /*max-width: calc(100vw - 955px);*/
    height: calc(100%);
    padding: 10px 10px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}


.prompt-area[b-t8nl4bu8n5] {
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
    overflow-y: auto;
}

.toolbar[b-t8nl4bu8n5] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}



.start-learning-button[b-t8nl4bu8n5] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-t8nl4bu8n5] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-t8nl4bu8n5] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-t8nl4bu8n5] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-t8nl4bu8n5] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-t8nl4bu8n5] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-t8nl4bu8n5] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Read_DifficultWordCloze_Answering.razor.rz.scp.css */

.text-area[b-r5vttl2i7e] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-r5vttl2i7e], .container-fluid[b-r5vttl2i7e] {
    height: 100%;
}

.main-text[b-r5vttl2i7e] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-r5vttl2i7e] {
    height: 100%;
}

.reading-area-dictionary[b-r5vttl2i7e] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-r5vttl2i7e] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-r5vttl2i7e] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}


.keyword-button[b-r5vttl2i7e] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.keyword-button:hover[b-r5vttl2i7e] {
    background-color: #ffe047;
    /*color: white;*/
}

.keyword-button-selecting[b-r5vttl2i7e] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #ffe047;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.discuss-container[b-r5vttl2i7e] {
    display: flex;
    /*width: 500px;*/
    margin: 0 auto;
    padding: 10px;
}

.related-img[b-r5vttl2i7e] {
    max-width: 80%;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

.related-video[b-r5vttl2i7e] {
    margin-bottom: 80px;
    text-align: center;
}

.video-container[b-r5vttl2i7e] {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: calc(100% * 9 / 16 );*/
}

.video-embed[b-r5vttl2i7e] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.non-select[b-r5vttl2i7e] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* /Pages/Learning/StepsReading/Read_DifficultWordCloze_Learning.razor.rz.scp.css */

.text-area[b-kkxisuoypv] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-kkxisuoypv], .container-fluid[b-kkxisuoypv] {
    height: 100%;
}

.main-text[b-kkxisuoypv] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-kkxisuoypv] {
    height: 100%;
}

.reading-area-dictionary[b-kkxisuoypv] {
    width: calc(100% - 510px);
    height: calc(100%);
    overflow-y: auto;
}

.dictionary-area[b-kkxisuoypv] {
    width: 510px;
    height: 100%;
}

.dictionary-area-border[b-kkxisuoypv] {
    height: calc(100%);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.unknown-word[b-kkxisuoypv] {
    background: #fbbea1;
    border-radius: 20px;
    padding: 10px;
}

.unknown-word-text[b-kkxisuoypv] {
    font-size: 1.5em;
}

img[b-kkxisuoypv] {
    max-width: 75%;
    max-height: 60%;
}
/* /Pages/Learning/StepsReading/Read_DifficultWordCloze_Selecting.razor.rz.scp.css */

.text-area[b-rnpk8s3e8d] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-rnpk8s3e8d], .container-fluid[b-rnpk8s3e8d] {
    height: 100%;
}

.main-text[b-rnpk8s3e8d] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-rnpk8s3e8d] {
    height: 100%;
}

.reading-area-dictionary[b-rnpk8s3e8d] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-rnpk8s3e8d] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-rnpk8s3e8d] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.keyword-button[b-rnpk8s3e8d] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.keyword-button:hover[b-rnpk8s3e8d] {
    background-color: #ffe047;
    /*color: white;*/
}

.keyword-button-selecting[b-rnpk8s3e8d] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #ffe047;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.discuss-container[b-rnpk8s3e8d] {
    display: flex;
    /*width: 500px;*/
    margin: 0 auto;
    padding: 10px;
}

.related-img[b-rnpk8s3e8d] {
    max-width: 80%;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

.related-video[b-rnpk8s3e8d] {
    margin-bottom: 80px;
    text-align: center;
}

.video-container[b-rnpk8s3e8d] {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: calc(100% * 9 / 16 );*/
}

.video-embed[b-rnpk8s3e8d] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.non-select[b-rnpk8s3e8d] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* /Pages/Learning/StepsReading/Read_ExampleReading.razor.rz.scp.css */

.container[b-jkjzc67zhg]{
    height: 100%;
}

.top-bar[b-jkjzc67zhg] {
    box-sizing: border-box;
}

.example-view[b-jkjzc67zhg] {
    width: calc(100%);
    padding: 0 10px;
    height: calc(100vh - 170px);
    box-sizing: border-box;
}

.mindmap-area[b-jkjzc67zhg] {
    position: relative;
    width: calc(50% - 5px);
    height: calc(100%);
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0;
}

.start-learning-button[b-jkjzc67zhg] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-jkjzc67zhg] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-jkjzc67zhg] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-jkjzc67zhg] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-jkjzc67zhg] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-jkjzc67zhg] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.mindmap-title[b-jkjzc67zhg] {
    position: absolute;
    color: #333;
    width: 100%;
    top: 5px;
    left: 0;
    text-align:center;
    user-select:none;
}
/* /Pages/Learning/StepsReading/Read_ExampleReadingGuide.razor.rz.scp.css */

.container[b-3pjmz2hqx4]{
    height: 100%;
}

.top-bar[b-3pjmz2hqx4] {
    box-sizing: border-box;
}

.example-view[b-3pjmz2hqx4] {
    width: calc(100%);
    padding: 0;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.mindmap-area[b-3pjmz2hqx4] {
    position: relative;
    width: calc(50% - 6px);
    height: calc(600px);
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    margin: 0 3px;
}

.start-learning-button[b-3pjmz2hqx4] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-3pjmz2hqx4] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-3pjmz2hqx4] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-3pjmz2hqx4] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-3pjmz2hqx4] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-3pjmz2hqx4] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.mindmap-title[b-3pjmz2hqx4] {
    position: absolute;
    color: #333;
    width: 100%;
    top: 5px;
    left: 0;
    text-align:center;
    user-select:none;
}
/* /Pages/Learning/StepsReading/Read_KeySentenceSelecting.razor.rz.scp.css */

.sentence-block[b-r1ee6y1xk6] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
}

    .sentence-block:hover[b-r1ee6y1xk6] {
        background-color: #DDD;
        border: 3px solid #777;
        /*box-shadow: 2px 2px 4px 4px darkgray;*/
    }

/*右側文章使用 hover*/
.sentence-block-fixed[b-r1ee6y1xk6] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
}

.wrong-sentence-label-prompt[b-r1ee6y1xk6] {
    background-color: #FFA3A3;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}

.wrong-sentence-label-prompt-yellow[b-r1ee6y1xk6] {
    background-color: #fcfe03;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}


.toolbar[b-r1ee6y1xk6] {
    width: 100%;
    border-bottom: 1px solid #777;
    padding-bottom: 5px;
    background-color: #faf9f8;
}

.left-side[b-r1ee6y1xk6] {
    border: 2px solid #9eecff;
}

.right-side[b-r1ee6y1xk6] {
    border: 2px solid #9eecff;
}
/* /Pages/Learning/StepsReading/Read_KeySentenceSelecting_DeleteUnimportant.razor.rz.scp.css */
.text-area[b-jlkamxegp8] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-jlkamxegp8], .container-fluid[b-jlkamxegp8] {
    height: 100%;
}

.main-text[b-jlkamxegp8] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-jlkamxegp8] {
    height: 100%;
}

.reading-area-dictionary[b-jlkamxegp8] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-jlkamxegp8] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-jlkamxegp8] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.sentence-block[b-jlkamxegp8] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
}

    .sentence-block:hover[b-jlkamxegp8] {
        background-color: #DDD;
        border: 3px solid #777;
        /*box-shadow: 2px 2px 4px 4px darkgray;*/
    }

/*右側文章使用 hover*/
.sentence-block-fixed[b-jlkamxegp8] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
}

.wrong-sentence-label-prompt[b-jlkamxegp8] {
    background-color: #FFA3A3;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}

.wrong-sentence-label-prompt-yellow[b-jlkamxegp8] {
    background-color: #fcfe03;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}


.toolbar[b-jlkamxegp8] {
    width: 100%;
    border-bottom: 1px solid #777;
    padding-bottom: 5px;
    background-color: #faf9f8;
}

.left-side[b-jlkamxegp8] {
    border: 2px solid #9eecff;
}

.right-side[b-jlkamxegp8] {
    border: 2px solid #9eecff;
}
/* /Pages/Learning/StepsReading/Read_KeySentenceSelecting_ModifyKeySentenceSelection.razor.rz.scp.css */
.text-area[b-6kubkvaes3] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-6kubkvaes3], .container-fluid[b-6kubkvaes3] {
    height: 100%;
}

.main-text[b-6kubkvaes3] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-6kubkvaes3] {
    height: 100%;
}

.reading-area-dictionary[b-6kubkvaes3] {
    width: calc(100% - 510px);
    height: 100%;
}
.dictionary-area[b-6kubkvaes3] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-6kubkvaes3] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.sentence-block[b-6kubkvaes3] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
    z-index:9999;
}

.sentence-block:hover[b-6kubkvaes3] {
    background-color: #DDD;
    border: 3px solid #777;
    /*box-shadow: 2px 2px 4px 4px darkgray;*/
}

/*右側文章使用 hover*/
.sentence-block-fixed[b-6kubkvaes3] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
}

.wrong-sentence-label-prompt[b-6kubkvaes3] {
    background-color: #FFA3A3;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}

.wrong-sentence-label-prompt-yellow[b-6kubkvaes3] {
    background-color: #fcfe03;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}


.toolbar[b-6kubkvaes3] {
    width: 100%;
    border-bottom: 1px solid #777;
    padding-bottom: 5px;
    background-color: #faf9f8;
}

.left-side[b-6kubkvaes3] {
    border: 2px solid #9eecff;
}

.right-side[b-6kubkvaes3] {
    border: 2px solid #9eecff;
}
/* /Pages/Learning/StepsReading/Read_KeySentenceSelecting_ModifyUnimportantDeletion.razor.rz.scp.css */
.text-area[b-w3mge4quyd] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-w3mge4quyd], .container-fluid[b-w3mge4quyd] {
    height: 100%;
}

.main-text[b-w3mge4quyd] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-w3mge4quyd] {
    height: 100%;
}

.reading-area-dictionary[b-w3mge4quyd] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-w3mge4quyd] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-w3mge4quyd] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
.sentence-block[b-w3mge4quyd] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
}

.sentence-block:hover[b-w3mge4quyd] {
    background-color: #DDD;
    border: 3px solid #777;
    /*box-shadow: 2px 2px 4px 4px darkgray;*/
}

/*右側文章使用 hover*/
.sentence-block-fixed[b-w3mge4quyd] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
}

.wrong-sentence-label-prompt[b-w3mge4quyd] {
    background-color: #FFA3A3;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}

.wrong-sentence-label-prompt-yellow[b-w3mge4quyd] {
    background-color: #fcfe03;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}


.toolbar[b-w3mge4quyd] {
    width: 100%;
    border-bottom: 1px solid #777;
    padding-bottom: 5px;
    background-color: #faf9f8;
}

.left-side[b-w3mge4quyd] {
    border: 2px solid #9eecff;
}

.right-side[b-w3mge4quyd] {
    border: 2px solid #9eecff;
}
/* /Pages/Learning/StepsReading/Read_KeySentenceSelecting_SelectKeySentence.razor.rz.scp.css */
.text-area[b-xkfvvfpyc2] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-xkfvvfpyc2], .container-fluid[b-xkfvvfpyc2] {
    height: 100%;
}

.main-text[b-xkfvvfpyc2] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-xkfvvfpyc2] {
    height: 100%;
}

.reading-area-dictionary[b-xkfvvfpyc2] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-xkfvvfpyc2] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-xkfvvfpyc2] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.sentence-block[b-xkfvvfpyc2] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
}

    .sentence-block:hover[b-xkfvvfpyc2] {
        background-color: #DDD;
        border: 3px solid #777;
        /*box-shadow: 2px 2px 4px 4px darkgray;*/
    }

/*右側文章使用 hover*/
.sentence-block-fixed[b-xkfvvfpyc2] {
    cursor: pointer;
    user-select: none;
    margin: 5px;
    border: 3px solid transparent;
    padding-bottom: 1px;
    padding-top: 6px;
    line-height: 200%;
}

.wrong-sentence-label-prompt[b-xkfvvfpyc2] {
    background-color: #FFA3A3;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}

.wrong-sentence-label-prompt-yellow[b-xkfvvfpyc2] {
    background-color: #fcfe03;
    padding-bottom: 2px;
    padding-top: 7px;
    line-height: 200%;
}


.toolbar[b-xkfvvfpyc2] {
    width: 100%;
    border-bottom: 1px solid #777;
    padding-bottom: 5px;
    background-color: #faf9f8;
}

.left-side[b-xkfvvfpyc2] {
    border: 2px solid #9eecff;
}

.right-side[b-xkfvvfpyc2] {
    border: 2px solid #9eecff;
}
/* /Pages/Learning/StepsReading/Read_KeywordSelecting.razor.rz.scp.css */

.text-area[b-e26l225qe0] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-e26l225qe0], .container-fluid[b-e26l225qe0] {
    height: 100%;
}

.main-text[b-e26l225qe0] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-e26l225qe0] {
    height: 100%;
}

.reading-area-dictionary[b-e26l225qe0] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-e26l225qe0] {
    width: 500px;
    height: 100%;
}

.dictionary-area-border[b-e26l225qe0] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}



.keyword-button[b-e26l225qe0] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

    .keyword-button:hover[b-e26l225qe0] {
        background-color: #ffe047;
        /*color: white;*/
    }

.keyword-button-selecting[b-e26l225qe0] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #ffe047;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.discuss-container[b-e26l225qe0] {
    display: flex;
    /*width: 500px;*/
    margin: 0 auto;
    padding: 10px;
}

.related-img[b-e26l225qe0] {
    max-width: 80%;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

.related-video[b-e26l225qe0] {
    margin-bottom: 80px;
    text-align: center;
}

.video-container[b-e26l225qe0] {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: calc(100% * 9 / 16 );*/
}

.video-embed[b-e26l225qe0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.non-select[b-e26l225qe0] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* /Pages/Learning/StepsReading/Read_KeywordSelecting_Selecting.razor.rz.scp.css */

.text-area[b-acbv4aqvd0] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-acbv4aqvd0], .container-fluid[b-acbv4aqvd0] {
    height: 100%;
}

.main-text[b-acbv4aqvd0] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-acbv4aqvd0] {
    height: 100%;
}

.reading-area-dictionary[b-acbv4aqvd0] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-acbv4aqvd0] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-acbv4aqvd0] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.keyword-button[b-acbv4aqvd0] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

    .keyword-button:hover[b-acbv4aqvd0] {
        background-color: #ffe047;
        /*color: white;*/
    }

.keyword-button-selecting[b-acbv4aqvd0] {
    user-select: none;
    width: 50%;
    font-size: 20px;
    background-color: #ffe047;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.discuss-container[b-acbv4aqvd0] {
    display: flex;
    /*width: 500px;*/
    margin: 0 auto;
    padding: 10px;
}

.related-img[b-acbv4aqvd0] {
    max-width: 80%;
    text-align: center;
    margin-top: 80px;
    margin-bottom: 80px;
}

.related-video[b-acbv4aqvd0] {
    margin-bottom: 80px;
    text-align: center;
}

.video-container[b-acbv4aqvd0] {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding-top: calc(100% * 9 / 16 );*/
}

.video-embed[b-acbv4aqvd0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.non-select[b-acbv4aqvd0] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* /Pages/Learning/StepsReading/Read_Loading.razor.rz.scp.css */

.container[b-jm2ti0qzz7]{
    height: 100%;
}

.top-space[b-jm2ti0qzz7] {
    height: 20%;
}

.middle-space[b-jm2ti0qzz7] {
    height: 55%;
}

.bottom-space[b-jm2ti0qzz7] {
    height: 25%;
}

.start-learning-button[b-jm2ti0qzz7] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-jm2ti0qzz7] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-jm2ti0qzz7] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-jm2ti0qzz7] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-jm2ti0qzz7] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-jm2ti0qzz7] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}
/* /Pages/Learning/StepsReading/Read_MindMapDrawing.razor.rz.scp.css */

.background[b-8ioj3wp1pp] {
    width: 100%;
    height: calc(100% - 5px);
    padding: 0;
    box-sizing:border-box;
}

.main-area[b-8ioj3wp1pp] {
    width: 100%;
    height: calc(100% - 60px);
    box-sizing:border-box;
}

.text-area[b-8ioj3wp1pp] {
    width: calc(40% - 20px);
    height: calc(100%);
    padding: 0;
    margin-left: 5px ;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
}

.text-area-tool-bar[b-8ioj3wp1pp] {
    width: 100%;
    height: 71px;
    padding: 10px;
    background-color: #FAF0E6;
    border-bottom: 1px solid #D0D0D0;
    box-sizing: border-box;
}

.text-area-text[b-8ioj3wp1pp] {
    width: 100%;
    height: calc(100% - 71px);
    overflow-y: auto;
    background-color: #FFF5EE;
    padding: 10px;
    box-sizing: border-box;
}

.mindmap-area-wrapper[b-8ioj3wp1pp] {
    width: calc(60%);
    /*min-width: 600px;*/
    height: 100%;
    display: inline-block;
    margin-right: 5px;
}

.toolbar[b-8ioj3wp1pp] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-8ioj3wp1pp] {
    width: 100%;
    height: calc(100% - 65px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}



.btn-build[b-8ioj3wp1pp] {
    font-size: 28px;
    color: #333;
    user-select: none;
    cursor: pointer;
    border: 3px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    padding: 2px 15px;
}

    .btn-build:hover[b-8ioj3wp1pp] {
        background-color: #fdb661;
    }


.input-block[b-8ioj3wp1pp] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Read_MindMapDrawingGuide.razor.rz.scp.css */

.container[b-bgevk90za1] {
    height: 100%;
}

.example-view[b-bgevk90za1] {
    width: 100%;
    padding: 0 5px;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.description-area[b-bgevk90za1] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-bgevk90za1] {
    width: calc(35% - 5px);
    /*max-width: calc(100vw - 955px);*/
    height: calc(100%);
    padding: 10px 10px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}

.mindmap-area-wrapper[b-bgevk90za1] {
    width: calc(65%);
    /*min-width: 940px;*/
    height: 100%;
    display: inline-block;
}

.prompt-area[b-bgevk90za1] {
    width: 100%;
    height: 110px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
    overflow-y: auto;
}

.toolbar[b-bgevk90za1] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-bgevk90za1] {
    width: 100%;
    height: calc(100% - 180px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.start-learning-button[b-bgevk90za1] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-bgevk90za1] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-bgevk90za1] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-bgevk90za1] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-bgevk90za1] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-bgevk90za1] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-bgevk90za1] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Read_MindMapDrawingGuide_Drawing.razor.rz.scp.css */
.main-text[b-1j6g31i57t] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-1j6g31i57t] {
    height: 100%;
}

.reading-area-dictionary[b-1j6g31i57t] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-1j6g31i57t] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-1j6g31i57t] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-1j6g31i57t] {
    height: 100%;
}

.example-view[b-1j6g31i57t] {
    width: 100%;
    padding: 0 5px;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.description-area[b-1j6g31i57t] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-1j6g31i57t] {
    width: calc(40% - 5px);
    /*max-width: calc(100vw - 955px);*/
    height: calc(100%);
    padding: 10px 10px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}

.mindmap-area-wrapper[b-1j6g31i57t] {
    width: calc(60%);
    /*min-width: 940px;*/
    height: 100%;
    display: inline-block;
}

.prompt-area[b-1j6g31i57t] {
    width: 100%;
    height: 110px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
    overflow-y: auto;
}

.toolbar[b-1j6g31i57t] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-1j6g31i57t] {
    width: 100%;
    height: calc(100% - 180px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.start-learning-button[b-1j6g31i57t] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-1j6g31i57t] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-1j6g31i57t] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-1j6g31i57t] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-1j6g31i57t] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-1j6g31i57t] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-1j6g31i57t] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Read_MindMapDrawingGuide_Learning.razor.rz.scp.css */
.main-text[b-ccv1fk6fj9] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-ccv1fk6fj9] {
    height: 100%;
}

.reading-area-dictionary[b-ccv1fk6fj9] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-ccv1fk6fj9] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-ccv1fk6fj9] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}
.container[b-ccv1fk6fj9]{
    height: 100%;
}

.top-bar[b-ccv1fk6fj9] {
    box-sizing: border-box;
}

.example-view[b-ccv1fk6fj9] {
    width: calc(100%);
    padding: 0;
    height: calc(100vh - 130px);
    box-sizing: border-box;
}

.mindmap-area[b-ccv1fk6fj9] {
    position: relative;
    width: calc(50% - 6px);
    height: calc(600px);
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    margin: 0 3px;
}

.start-learning-button[b-ccv1fk6fj9] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-ccv1fk6fj9] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-ccv1fk6fj9] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-ccv1fk6fj9] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-ccv1fk6fj9] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-ccv1fk6fj9] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.mindmap-title[b-ccv1fk6fj9] {
    position: absolute;
    color: #333;
    width: 100%;
    top: 5px;
    left: 0;
    text-align:center;
    user-select:none;
}
/* /Pages/Learning/StepsReading/Read_ParagraphAbstractWriting_Learning.razor.rz.scp.css */

.text-area[b-say8wnxvyj] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-say8wnxvyj], .container-fluid[b-say8wnxvyj] {
    height: 100%;
}

.main-text[b-say8wnxvyj] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-say8wnxvyj] {
    height: 100%;
}

.reading-area-dictionary[b-say8wnxvyj] {
    width: calc(100% - 510px);
    height: 100%;
}
.dictionary-area[b-say8wnxvyj] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-say8wnxvyj] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-say8wnxvyj] {
    height: 100%;
}

.example-view[b-say8wnxvyj] {
    width: 100vw;
    padding: 0 5px;
    height: calc(100vh - 120px);
    box-sizing: border-box;
}

.left-panel[b-say8wnxvyj] {
    width: calc(40% - 5px);
    max-width: calc(100vw - 915px);
    display: inline-block;
    box-sizing: border-box;
}

.mindmap-title[b-say8wnxvyj]{
    width:100%;
    position: absolute;
    left: 0;
    top: 10px;
    user-select: none;
    text-align:center;
}

.description-area[b-say8wnxvyj] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-say8wnxvyj] {
    width: 100%;
    height: 185px;
    padding: 3px 7px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area-wrapper[b-say8wnxvyj] {
    width: calc(60%);
    min-width: 900px;
    height: 100%;
    display: inline-block;
}

.prompt-area[b-say8wnxvyj] {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.toolbar[b-say8wnxvyj] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-say8wnxvyj] {
    position:relative;
    width: 100%;
    height: 100%-195px;
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.essay-area[b-say8wnxvyj] {
    position: relative;
    width: 100%;
    height: calc(100% - 195px);
    padding: 3px 7px;
    margin: 0 auto;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    overflow-y:auto;
}

.start-learning-button[b-say8wnxvyj] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-say8wnxvyj] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-say8wnxvyj] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-say8wnxvyj] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

.bottom-tool-button:hover[b-say8wnxvyj] {
    background-color: #45a9bd;
}

.bottom-tool-button-text[b-say8wnxvyj] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-say8wnxvyj] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Read_ParagraphAbstractWriting_Writing.razor.rz.scp.css */

.text-area[b-x13jj9ghzt] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}

.container[b-x13jj9ghzt], .container-fluid[b-x13jj9ghzt] {
    height: 100%;
}

.main-text[b-x13jj9ghzt] {
    min-height: calc(100% - 160px);
    font-size: 36px;
}

.reading-area[b-x13jj9ghzt] {
    height: 100%;
}

.reading-area-dictionary[b-x13jj9ghzt] {
    width: calc(100% - 510px);
    height: 100%;
}

.dictionary-area[b-x13jj9ghzt] {
    width: 500px;
    height: 100%;
    top: 75px; /* 靠近畫面的頂部 */
    right: 0; /* 靠近畫面的右邊 */
    z-index: 9999; /* 確保懸浮在最上層 */
    position: fixed;
    background: white;
}

.dictionary-area-border[b-x13jj9ghzt] {
    height: calc(100% - 90px);
    padding: 15px;
    border: 7px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
    overflow-y: auto;
}


.container[b-x13jj9ghzt] {
    height: 100%;
}

.example-view[b-x13jj9ghzt] {
    width: 100vw;
    padding: 0 5px;
    height: calc(100vh - 120px);
    box-sizing: border-box;
}

.left-panel[b-x13jj9ghzt] {
    width: calc(40% - 5px);
    max-width: calc(100vw - 915px);
    display: inline-block;
    box-sizing: border-box;
}

.mindmap-title[b-x13jj9ghzt]{
    width:100%;
    position: absolute;
    left: 0;
    top: 10px;
    user-select: none;
    text-align:center;
}

.description-area[b-x13jj9ghzt] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-x13jj9ghzt] {
    width: 100%;
    height: 185px;
    padding: 3px 7px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area-wrapper[b-x13jj9ghzt] {
    width: calc(60%);
    min-width: 900px;
    height: 100%;
    display: inline-block;
}

.prompt-area[b-x13jj9ghzt] {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.toolbar[b-x13jj9ghzt] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-x13jj9ghzt] {
    position:relative;
    width: 100%;
    height: 100%-195px;
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.essay-area[b-x13jj9ghzt] {
    position: relative;
    width: 100%;
    height: calc(100% - 195px);
    padding: 3px 7px;
    margin: 0 auto;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    overflow-y:auto;
}

.start-learning-button[b-x13jj9ghzt] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-x13jj9ghzt] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-x13jj9ghzt] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-x13jj9ghzt] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

.bottom-tool-button:hover[b-x13jj9ghzt] {
    background-color: #45a9bd;
}

.bottom-tool-button-text[b-x13jj9ghzt] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-x13jj9ghzt] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}



/*錯誤選項*/
.keyword-button-incorrect[b-x13jj9ghzt] {
    user-select: none;
    width: 90%;
    font-size: 20px;
    background-color: palevioletred;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.keyword-button-correct[b-x13jj9ghzt] {
    user-select: none;
    width: 90%;
    font-size: 20px;
    background-color: lightgreen;
    color: black;
    border: 2px solid #555555;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

.keyword-button[b-x13jj9ghzt] {
    user-select: none;
    width: 90%;
    font-size: 20px;
    background-color: white;
    color: black;
    border: 2px solid #ffe047;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;
}

    .keyword-button:hover[b-x13jj9ghzt] {
        background-color: #ffe047;
        /*color: white;*/
    }
/* /Pages/Learning/StepsReading/Read_TaskComplete.razor.rz.scp.css */

.container[b-isaxh9yc17]{
    height: 100%;
}

.wrapper[b-isaxh9yc17] {
    width: 700px;
    height: calc(100% - 25px);
    box-sizing: border-box;
    border: 3px solid #edb448;
    border-radius: 10px;
    overflow-y:auto;
    user-select:none;
}
/* /Pages/Learning/StepsReading/Read_TaskSelecting.razor.rz.scp.css */
.container[b-t5e8e88f6a], .container-fluid[b-t5e8e88f6a] {
    height: calc(100% - 7px);
}

.title[b-t5e8e88f6a] {
    user-select:none;
    height: 100px;
}

.difficult-button[b-t5e8e88f6a] {
    padding: 5px 0;
    color: #333;
    user-select: none;
    cursor: pointer;
    border: 3px solid #edb448;
    border-radius: 10px;
    height:auto;
    background-color: #FFF;
    text-align:center;
}

.difficult-button.fat[b-t5e8e88f6a] {
    padding: 15px 0;
}

    .difficult-button:hover[b-t5e8e88f6a] {
        background-color: #fdb661;
    }

    .difficult-button:active[b-t5e8e88f6a] {
        box-shadow: rgba(200, 200, 200, 0.35) 0px 5px 15px;
    }

    .difficult-button.disabled[b-t5e8e88f6a] {
        opacity: 0.3;
        pointer-events: none;
    }

    .difficult-button.active[b-t5e8e88f6a] {
        background-color: #fdb661;
        pointer-events: none;
    }

.selection-list-wrapper[b-t5e8e88f6a] {
    width: 100%;
    height: calc(100% - 100px);
    padding: 5px 0;
    padding-bottom: 10px;
    border: 5px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
}

.selection-list[b-t5e8e88f6a] {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    padding-top: 10px;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.letter-spacing[b-t5e8e88f6a] {
    letter-spacing: 10px;
}

.tag[b-t5e8e88f6a] {
    background-color: #276c4b;
    color: #FFF;
    border-radius: 10px;
    padding: 5px 8px;
}
/* /Pages/Learning/StepsReading/Write_MindMapDrawing.razor.rz.scp.css */

.container[b-blik2tthtv] {
    height: 100%;
}

.example-view[b-blik2tthtv] {
    width: 100vw;
    padding: 0 5px;
    height: calc(100vh - 120px);
    box-sizing: border-box;
}

.left-panel[b-blik2tthtv] {
    width: calc(40% - 5px);
    height: calc(100% - 5px);
    max-width: calc(100vw - 915px);
    display: inline-block;
    box-sizing: border-box;
}

.mindmap-title[b-blik2tthtv]{
    width:100%;
    position: absolute;
    left: 0;
    top: 10px;
    user-select: none;
    text-align:center;
}

.description-area[b-blik2tthtv] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-blik2tthtv] {
    width: 100%;
    height: 100%;
    padding: 3px 7px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area-wrapper[b-blik2tthtv] {
    width: calc(60%);
    min-width: 900px;
    height: 100%;
    display: inline-block;
}

.prompt-area[b-blik2tthtv] {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.toolbar[b-blik2tthtv] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-blik2tthtv] {
    position:relative;
    width: 100%;
    height: calc(100% - 70px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.start-learning-button[b-blik2tthtv] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-blik2tthtv] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-blik2tthtv] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-blik2tthtv] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-blik2tthtv] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-blik2tthtv] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-blik2tthtv] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsReading/Write_MindMapDrawingGuide.razor.rz.scp.css */

.container[b-akrtkbom64] {
    height: 100%;
}

.example-view[b-akrtkbom64] {
    width: 100vw;
    padding: 0 5px;
    height: calc(100vh - 120px);
    box-sizing: border-box;
}

.left-panel[b-akrtkbom64] {
    width: calc(40% - 5px);
    max-width: calc(100vw - 915px);
    display: inline-block;
    box-sizing: border-box;
}

.mindmap-title[b-akrtkbom64]{
    width:100%;
    position: absolute;
    left: 0;
    top: 10px;
    user-select: none;
    text-align:center;
}

.description-area[b-akrtkbom64] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
    overflow-x: hidden;
}

.description-area-wrapper[b-akrtkbom64] {
    width: 100%;
    height: 185px;
    padding: 3px 7px;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area-wrapper[b-akrtkbom64] {
    width: calc(60%);
    min-width: 900px;
    height: 100%;
    display: inline-block;
}

.prompt-area[b-akrtkbom64] {
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.toolbar[b-akrtkbom64] {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-akrtkbom64] {
    position:relative;
    width: 100%;
    height: calc(100% - 195px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.essay-area[b-akrtkbom64] {
    position: relative;
    width: 100%;
    height: calc(100% - 195px);
    padding: 3px 7px;
    margin: 0 auto;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    overflow-y:auto;
}

.start-learning-button[b-akrtkbom64] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-akrtkbom64] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-akrtkbom64] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-akrtkbom64] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-akrtkbom64] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-akrtkbom64] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-akrtkbom64] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 2px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsWritting/Write_ArticleWriting.razor.rz.scp.css */

.container[b-5dm2f4x3xd] {
    height: 100%;
}

.example-view[b-5dm2f4x3xd] {
    width: 100vw;
    padding: 0 10px;
    height: calc(100vh - 160px);
    box-sizing: border-box;
}

.description-area[b-5dm2f4x3xd] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.description-area-wrapper[b-5dm2f4x3xd] {
    width: calc(50% - 10px);
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}

.mindmap-area-wrapper[b-5dm2f4x3xd] {
    width: calc(50% - 10px);
    margin: 0;
    height: 100%;
    display: inline-block;
}

.wrting-area[b-5dm2f4x3xd] {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-5dm2f4x3xd] {
    width: 100%;
    height: calc(100% );
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
}

.start-learning-button[b-5dm2f4x3xd] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-5dm2f4x3xd] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-5dm2f4x3xd] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-5dm2f4x3xd] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-5dm2f4x3xd] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-5dm2f4x3xd] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-5dm2f4x3xd] {
    font-size: 26px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 3px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    margin-top: 2px;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsWritting/Write_ArticleWritingGuide.razor.rz.scp.css */

.container[b-hbd14z8j2e] {
    height: 100%;
}

.example-view[b-hbd14z8j2e] {
    width: 100vw;
    padding: 0 10px;
    height: calc(100vh - 160px);
    box-sizing: border-box;
}

.description-area[b-hbd14z8j2e] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.description-area-wrapper[b-hbd14z8j2e] {
    width: calc(50% - 10px);
    height: 100%;
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}

.mindmap-area-wrapper[b-hbd14z8j2e] {
    width: calc(50% - 10px);
    margin: 0;
    height: 100%;
    display: inline-block;
}

.wrting-area[b-hbd14z8j2e] {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-hbd14z8j2e] {
    width: 100%;
    height: calc(100% );
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
}

.start-learning-button[b-hbd14z8j2e] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-hbd14z8j2e] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-hbd14z8j2e] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-hbd14z8j2e] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-hbd14z8j2e] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-hbd14z8j2e] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-hbd14z8j2e] {
    font-size: 26px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 3px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    margin-top: 2px;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsWritting/Write_ExampleReading.razor.rz.scp.css */

.container[b-ewyrmn7wbp] {
    height: 100%;
}

.example-view[b-ewyrmn7wbp] {
    width: 100vw;
    padding: 0 10px;
    height: calc(100vh - 160px);
    box-sizing: border-box;
}

.description-area[b-ewyrmn7wbp] {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.description-area-wrapper[b-ewyrmn7wbp] {
    width: calc(40% - 10px);
    max-width: calc(100vw - 825px);
    height: 100%;
    padding: 5px 0;
    /*border: 5px double #fdb661;
    background-color: #f8efe4;
    border-left: 0;
    border-right: 0;*/
    box-sizing: border-box;
    display: inline-block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
}

.mindmap-area-wrapper[b-ewyrmn7wbp] {
    width: calc(60% - 10px);
    min-width: 820px;
    height: 100%;
    display: inline-block;
}

.wrting-area[b-ewyrmn7wbp] {
    width: 100%;
    height: 165px;
    box-sizing: border-box;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    background-color: #fff5ee;
    margin-bottom: 5px;
}

.mindmap-area[b-ewyrmn7wbp] {
    width: 100%;
    height: calc(100% - 170px);
    padding: 0;
    box-sizing: border-box;
    display: block;
    border: 2px dotted #bdbdbd;
    border-radius: 7px;
    padding: 0;
    margin: 0 auto;
}

.start-learning-button[b-ewyrmn7wbp] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-ewyrmn7wbp] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-ewyrmn7wbp] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-ewyrmn7wbp] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-ewyrmn7wbp] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-ewyrmn7wbp] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}

.input-block[b-ewyrmn7wbp] {
    font-size: 22px;
    max-width: 300px;
    color: #333;
    padding: 5px;
    border: 3px solid #edb448;
    border-radius: 20px;
    background-color: #FFF;
    margin-top: 2px;
    box-sizing: border-box;
}
/* /Pages/Learning/StepsWritting/Write_Loading.razor.rz.scp.css */

.container[b-39hzmvft3j]{
    height: 100%;
}

.top-space[b-39hzmvft3j] {
    height: 20%;
}

.middle-space[b-39hzmvft3j] {
    height: 55%;
}

.bottom-space[b-39hzmvft3j] {
    height: 25%;
}

.start-learning-button[b-39hzmvft3j] {
    width: 30vmin;
    height: 30vmin;
    margin: 0 auto;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .start-learning-button:hover[b-39hzmvft3j] {
        background-color: #45a9bd;
    }

.start-learning-button-text[b-39hzmvft3j] {
    position: relative;
    top: 11vmin;
    text-align: center;
    font-size: 5vmin;
    color: #fff;
}

.bottom-tool-button[b-39hzmvft3j] {
    width: 20vmin;
    height: 15vmin;
    background-color: #25899d;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
}

    .bottom-tool-button:hover[b-39hzmvft3j] {
        background-color: #45a9bd;
    }

.bottom-tool-button-text[b-39hzmvft3j] {
    color: #fff;
    position: relative;
    top: 5vmin;
    text-align: center;
    font-size: 3.5vmin;
}
/* /Pages/Learning/StepsWritting/Write_TaskComplete.razor.rz.scp.css */

.container[b-65g2wnc5o1]{
    height: 100%;
}

.wrapper[b-65g2wnc5o1] {
    width: 700px;
    height: calc(100% - 25px);
    box-sizing: border-box;
    border: 3px solid #edb448;
    border-radius: 10px;
    overflow-y:auto;
    user-select:none;
}
/* /Pages/Learning/StepsWritting/Write_TaskSelecting.razor.rz.scp.css */
.container[b-lw2645dh25], .container-fluid[b-lw2645dh25] {
    height: calc(100% - 7px);
}

.title[b-lw2645dh25] {
    user-select:none;
    height: 100px;
}

.difficult-button[b-lw2645dh25] {
    padding: 5px 0;
    color: #333;
    user-select: none;
    cursor: pointer;
    border: 3px solid #edb448;
    border-radius: 10px;
    height:auto;
    background-color: #FFF;
    text-align:center;
}

.difficult-button.fat[b-lw2645dh25] {
    padding: 15px 0;
}

    .difficult-button:hover[b-lw2645dh25] {
        background-color: #fdb661;
    }

    .difficult-button:active[b-lw2645dh25] {
        box-shadow: rgba(200, 200, 200, 0.35) 0px 5px 15px;
    }

    .difficult-button.disabled[b-lw2645dh25] {
        opacity: 0.3;
        pointer-events: none;
    }

    .difficult-button.active[b-lw2645dh25] {
        background-color: #fdb661;
        pointer-events: none;
    }

.selection-list-wrapper[b-lw2645dh25] {
    width: 100%;
    height: calc(100% - 100px);
    padding: 5px 0;
    padding-bottom: 10px;
    border: 5px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
}

.selection-list[b-lw2645dh25] {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    padding-top: 10px;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.letter-spacing[b-lw2645dh25] {
    letter-spacing: 10px;
}

.tag[b-lw2645dh25] {
    background-color: #276c4b;
    color: #FFF;
    border-radius: 10px;
    padding: 5px 8px;
}
/* /Pages/Learning/TeachingPanel/TeachingPanelVideoYoutube.razor.rz.scp.css */
.video-container[b-hgoc9yj92c] {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: calc(100% * 9 / 16 );
}

.video-embed[b-hgoc9yj92c] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* /Pages/Learning/TopPanel.razor.rz.scp.css */

.background[b-yskq8qdtcm] {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(200,200,200,0.9);
}

.main-content[b-yskq8qdtcm] {
    height: calc(100vh - 20px);
    width: calc(100vw - 20px);
    margin: 10px auto;
    box-sizing: border-box;
    display: block;
    border: 3px solid #B87333;
    border-radius: 7px;
    overflow-y: auto;
    background-color: #f8efe4;
}

.content-wrapper[b-yskq8qdtcm] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 11;
}
/* /Pages/Process.razor.rz.scp.css */

.container[b-26vhb48usf] {
    height: 100%;
}

.history-space[b-26vhb48usf] {
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box;
    height: calc(100% - 15px);
    max-width: 1800px;
    color: #333;
    user-select: none;
    border: 3px solid #DDD;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
}

.hisotry-list-wrapper[b-26vhb48usf] {
    height: calc(100% - 160px);
    padding: 5px 0;
    padding-bottom: 20px;
    border: 5px double #fdb661;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    background-color: #f8efe4;
}


.hisotry-list[b-26vhb48usf] {
    width: 100%;
    height: calc(100% - 10px);
    padding: 0 20px;
    overflow-y: auto;
    scrollbar-color: #888 #DDD;
    scrollbar-width: thin;
    box-sizing: border-box;
}
/* /Pages/Profile.razor.rz.scp.css */

.container[b-1rbkton9ci] {
    height: 100%;
    max-width: 600px;
}

.top-sapce[b-1rbkton9ci] {
    width: 100%;
    height: calc(50vh - 400px);
}

.profile-space[b-1rbkton9ci] {
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box;
    min-height: 350px;
    color: #333;
    user-select: none;
    border: 3px solid #DDD;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
}
/* /Pages/Setting.razor.rz.scp.css */

.container[b-mn7wg5tc12]{
    height: 100%;
}

.top-space[b-mn7wg5tc12] {
    height: 10%;
}

.setting-space[b-mn7wg5tc12] {
    margin: 0 auto;
    padding: 10px 20px;
    box-sizing: border-box;
    height: 80%;
    max-width: 800px;
    color: #333;
    user-select: none;
    border: 3px solid #DDD;
    border-radius: 10px;
    background-color: rgba(255, 255, 255 , 0.9);
}

.setting-row[b-mn7wg5tc12] {
    width: 100%;
    box-sizing:border-box;
}

.setting-name[b-mn7wg5tc12] {
    width: 270px;
    padding: 10px;
    display: inline-block;
    text-align:center;
}

.setting-value[b-mn7wg5tc12] {
    width: 65px;
    padding: 10px;
    display: inline-block;
}

.setting-input[b-mn7wg5tc12] {
    width: calc(100% - 365px);
    padding: 10px;
    display: inline-block;
}

.form-check[b-mn7wg5tc12] {
    display: inline-block;
}
/* /Shared/ArticleDisplay.razor.rz.scp.css */
.video-link[b-0djd1u7yw6] {
    margin-top: 30px;
    color: transparent;
}

    .video-link span[b-0djd1u7yw6] {
        display: none;
    }

    .video-link:hover span[b-0djd1u7yw6] {
        display: inline-block;
        color: black;
    }
/* /Shared/ArticleKeySentenceDisplay.razor.rz.scp.css */
.video-link[b-w8xyfsbeew] {
    margin-top: 30px;
    color: transparent;
}

.video-link span[b-w8xyfsbeew] {
    display: none;
}

.video-link:hover span[b-w8xyfsbeew] {
    display: inline-block;
    color: black;
}
/* /Shared/ChatAgent.razor.rz.scp.css */
.chat-toggle-button[b-5pzf9597c7] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #f1cc9a;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    height:100px;
    width:100px;
}

.chat-toggle-button i[b-5pzf9597c7] {
    font-size: 50px; /* Increase the icon size to fill the button */
    color: white; /* Set the icon color */
}

.chat-window[b-5pzf9597c7] {
    position: fixed;
    bottom: 0;
    right: 20px;
    width: 750px;
    height: 700px;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
    z-index:9999;
}

.chat-header[b-5pzf9597c7] {
    background-color: #d99232;
    color: black;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-body[b-5pzf9597c7] {
    padding: 10px;
    flex-grow: 1;
    overflow-y: auto;
    height:300px;
}

.message-sender[b-5pzf9597c7] {
    margin-bottom: 5px;
    background-color: #f1cc9a;
    padding: 20px;
    display:inline-block;
}

.message-sender-right[b-5pzf9597c7] {
    border-radius: 10% 0% 10% 10%;
}

.message-sender-left[b-5pzf9597c7] {
    border-radius: 0% 10% 10% 10%;
}

.chat-footer[b-5pzf9597c7] {
    padding: 10px;
    border-top: 1px solid #ccc;
    display: flex;
}

.chat-input[b-5pzf9597c7] {
    flex-grow: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height:100px;   
}

.send-button[b-5pzf9597c7] {
    margin-left: 10px;
    background-color: #f1cc9a;
    color: black;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    width:300px;
}

.close-button[b-5pzf9597c7] {
    background: none;
    color: black;
    border: none;
    cursor: pointer;
    font-size: 20px;
}
/* /Shared/Layout/HomeLayout.razor.rz.scp.css */

.background[b-d04u42cera] {
    height: 100%;
    box-sizing: border-box;
    background: url('https://www.ghibli.jp/gallery/chihiro043.jpg') no-repeat;
    background-size: cover;
    background-position: center center;
}

.background-mask[b-d04u42cera] {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.6);
}

.navbar[b-d04u42cera] {
    padding: 10px 10px 20px 10px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 65%, rgba(255, 255, 255, 0) 100%);
}


.main-content[b-d04u42cera] {
    height: calc(100vh - 90px);
}
/* /Shared/Layout/LearningLayout.razor.rz.scp.css */

.background[b-jicnoq1vor] {
    height: 100%;
    box-sizing: border-box;
    /*background: url('https://www.ghibli.jp/gallery/chihiro043.jpg') no-repeat;
    background-size: cover;
    background-position: center center;*/
    background-color: rgb(255, 250, 245);
}

.background-mask[b-jicnoq1vor] {
    height: 100%;
    /*background-color: rgba(255, 255, 255, 0.6);*/
}
/* /Shared/Layout/MainLayout.razor.rz.scp.css */
.content-box[b-2pedi8cr7z] {
    width: 650px;
    margin: 0 auto;
    background-color: #fcfcfc;
    box-sizing: border-box;
    opacity: 0.95;
    user-select:none;
}

.upper-space[b-2pedi8cr7z] {
    height: 15vh;
    min-height: 20px;
}

.full-height[b-2pedi8cr7z] {
    height: 100%;
    box-sizing: border-box;
    background: url("https://www.ghibli.jp/gallery/ponyo006.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.page[b-2pedi8cr7z] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-2pedi8cr7z] {
    flex: 1;
}

.sidebar[b-2pedi8cr7z] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-2pedi8cr7z] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-2pedi8cr7z]  a, .top-row .btn-link[b-2pedi8cr7z] {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child[b-2pedi8cr7z] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-2pedi8cr7z] {
        display: none;
    }

    .top-row.auth[b-2pedi8cr7z] {
        justify-content: space-between;
    }

    .top-row a[b-2pedi8cr7z], .top-row .btn-link[b-2pedi8cr7z] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-2pedi8cr7z] {
        flex-direction: row;
    }

    .sidebar[b-2pedi8cr7z] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-2pedi8cr7z] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .main > div[b-2pedi8cr7z] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Shared/PersuitScoreSurvey.razor.rz.scp.css */

.container[b-h9iste0u91]{
    height: 100%;
}

.wrapper[b-h9iste0u91] {
    width: 1000px;
    height: calc(100% - 25px);
    box-sizing: border-box;
    border: 3px solid #edb448;
    border-radius: 10px;
    overflow-y:auto;
    user-select:none;
}


.background[b-h9iste0u91] {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: rgba(200,200,200,0.9);
}

.main-content[b-h9iste0u91] {
    height: calc(100vh - 20px);
    width: calc(100vw - 20px);
    margin: 10px auto;
    box-sizing: border-box;
    display: block;
    border: 3px solid #B87333;
    border-radius: 7px;
    overflow-y: auto;
    background-color: #f8efe4;
}

.content-wrapper[b-h9iste0u91] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 11;
}
/* /Shared/TextLoadingSpinner.razor.rz.scp.css */
.lds-ripple[b-0jrkkqjyh3] {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

    .lds-ripple div[b-0jrkkqjyh3] {
        position: absolute;
        border: 4px solid #FFDEAD;
        opacity: 1;
        border-radius: 50%;
        animation: lds-ripple-b-0jrkkqjyh3 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .lds-ripple div:nth-child(2)[b-0jrkkqjyh3] {
            animation-delay: -0.5s;
        }

@keyframes lds-ripple-b-0jrkkqjyh3 {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}