html, body { width: 100%; height: 100%; min-width: 100%; min-height: 100%; font-family: 'Noto Sans', 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', 'Heiti TC', 'LiHei Pro', sans-serif !important; letter-spacing: 0.05em; font-size: 14px; }
@media screen and (min-width: 768px) { html, body { font-size: 16px; } }
@media screen and (min-width: 1200px) { html, body { font-size: 18px; } }
@media screen and (min-width: 1400px) { html, body { font-size: 20px; } }

body { background-color: #173490; background: url("../images/bg-img-left.png"), url("../images/bg-img-right.png"), url("../images/bg.png"); background-attachment: fixed; background-position: top left, top right, center center; background-size: auto 80%, auto 100%,  cover; background-repeat: no-repeat; }
body::-webkit-scrollbar { width: 10px; background-color: transparent; }
body::-webkit-scrollbar-track { background-color: transparent; }
body::-webkit-scrollbar-thumb { background-color: #0deaff; border-radius: 10px; }

header .header-logo { padding: 0 .75rem; line-height: 1; width: 6rem; height: auto; position: absolute; top: 0; left: 0; }
@media screen and (min-width: 1200px) { header .header-logo { width: 10%; } }
header .header-logo img, header .header-logo svg { width: 100%; }

main { width: 100%; height: 100%; }
main > [class*="container"] { height: 100%; }

.robot-frame { height: 20vh; max-height: 20vh; padding: 0 1rem; position: relative; z-index: 5; display: flex; align-items: center; }
.robot-frame .avatar { flex: 0 0 auto; width: auto; height: 20vh; margin: 0 1rem 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 1rem 100%, 1rem calc(100% - 1rem), 0 calc(100% - 1rem)); }
@media screen and (min-width: 992px) { .robot-frame .avatar { height: 22.5vh; margin: 0 1rem; } }
.robot-frame .avatar > img, .robot-frame .avatar > svg { width: auto; height: 100%; }
.robot-frame .dialog { background-color: #fff; border-radius: 0.375rem; border-top-left-radius: 0; position: relative; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.robot-frame .dialog .dialog-text { padding: .75rem 1rem; max-height: 16vh; overflow-y: auto; }
@media screen and (max-width: 575px) { .robot-frame .dialog .dialog-text h2, .robot-frame .dialog .dialog-text .h4 { font-size: 1rem; } }
.robot-frame .dialog .dialog-text h2:last-child, .robot-frame .dialog .dialog-text .h4:last-child { margin-bottom: 0; }
.robot-frame .dialog .dialog-text::-webkit-scrollbar { width: 10px; background-color: transparent; }
.robot-frame .dialog .dialog-text::-webkit-scrollbar-track { background-color: transparent; }
.robot-frame .dialog .dialog-text::-webkit-scrollbar-thumb { background-color: #adb5bd; border: 2px solid #fff; border-radius: 10px; }
.robot-frame .dialog::before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 1rem 1rem 0; border-color: transparent #fff transparent transparent; position: absolute; top: 0; left: -1rem; z-index: 1; }
.robot-frame .dialog::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 1rem 1rem 0; border-color: transparent rgba(0, 0, 0, 0.075) transparent transparent; position: absolute; top: .125rem; left: -1rem; z-index: -1; filter: blur(0.25rem); }

.futuristic-frame { height: calc(100% - 1rem); max-height: calc(100% - 1rem); padding-top: 1rem; position: relative; color: #43a047; }
.futuristic-frame::before { content: ""; display: block; width: 55%; height: 25%; max-width: 100%; border-radius: 0 0 1.2rem 0; border-bottom: 0.325rem solid #43a047; border-right: 0.325rem solid #43a047; position: absolute; z-index: -1; bottom: -.75rem; right: -.75rem; }
.futuristic-frame::after { /*content: "";
display: block;
position: absolute;
z-index: 5;
bottom: -.75rem;
right: 3rem;
min-width: 149px;
min-height: 123px;
min-width: 149px;
min-height: 123px;
background-color: transparent;
mask-image: url($slash-svg);
mask-repeat: no-repeat;
mask-size: cover;*/ /* transform-origin: bottom; transform: skewX(-30deg);*/ }
.futuristic-frame .futuristic-frame-border { height: 100%; max-height: 100%; background-color: rgba(0, 0, 0, 0.25); border: 0.325rem solid transparent; border: 0.325rem solid #43a047; border-radius: 1rem; position: relative; padding-left: 0; padding-right: 3px; box-shadow: 0 0 1rem #0deaff; }
.futuristic-frame .futuristic-frame-border::before { content: ""; display: block; width: 70%; height: calc(1.5rem + 0.325rem); clip-path: polygon(0 0%, 100% 0, 100% 100%, 1.5rem 100%); background-color: #43a047; position: absolute; top: 0; right: 0; z-index: 5; border-radius: 0 0.5rem 0 0; }
.futuristic-frame .futuristic-frame-content { display: flex; flex-direction: column; justify-content: space-evenly; align-items: stretch; height: calc(100% - (1.5rem + 0.325rem)); max-height: calc(100% - (1.5rem + 0.325rem)); overflow-X: hidden; overflow-y: scroll; padding: 3rem 1.5rem; margin-top: calc(1.5rem + 0.325rem); }
@media screen and (min-width: 576px) and (max-width: 991px) { .futuristic-frame .futuristic-frame-content { padding: 3rem 6rem; } }
@media screen and (min-width: 1400px) { .futuristic-frame .futuristic-frame-content { padding: 3rem 6rem; } }
.futuristic-frame .futuristic-frame-content::-webkit-scrollbar { width: 7px; background-color: transparent; }
.futuristic-frame .futuristic-frame-content::-webkit-scrollbar-track { background-color: transparent; }
.futuristic-frame .futuristic-frame-content::-webkit-scrollbar-thumb { background-color: #43a047; border-radius: 7px; }
.futuristic-frame .futuristic-frame-content .futuristic-frame-tool { position: absolute; top: 0; left: 0; right: 0; z-index: 9; height: calc(1.5rem + 0.325rem); display: flex; flex-direction: row; align-items: center; padding: 0 .75rem; }
.futuristic-frame .futuristic-frame-content .futuristic-frame-tool a { color: #409843; line-height: 1; }
.futuristic-frame .futuristic-frame-content .futuristic-frame-tool a > span { display: none; }
@media screen and (min-width: 992px) { .futuristic-frame .futuristic-frame-content .futuristic-frame-tool a > span { display: inline; } }
.futuristic-frame .futuristic-frame-content .futuristic-frame-tool a i { font-size: 1.25rem; }

.futuristic-frame.chat { height: calc(100% - 1rem); max-height: calc(100% - 1rem); padding-top: 1rem; position: relative; color: #0deaff; }
.futuristic-frame.chat::before { content: ""; display: block; width: 55%; height: 25%; max-width: 100%; border-radius: 0 0 1.2rem 0; border-bottom: 0.325rem solid #0deaff; border-right: 0.325rem solid #0deaff; position: absolute; z-index: -1; bottom: -.75rem; right: -.75rem; }
.futuristic-frame.chat::after { /*content: "";
display: block;
position: absolute;
z-index: 5;
bottom: -.75rem;
right: 3rem;
min-width: 149px;
min-height: 123px;
min-width: 149px;
min-height: 123px;
background-color: transparent;
mask-image: url($slash-svg);
mask-repeat: no-repeat;
mask-size: cover;*/ /* transform-origin: bottom; transform: skewX(-30deg);*/ }
.futuristic-frame.chat .futuristic-frame-border { height: 100%; max-height: 100%; background-color: rgba(0, 0, 0, 0.25); border: 0.325rem solid transparent; border: 0.325rem solid #0deaff; border-radius: 1rem; position: relative; padding-left: 0; padding-right: 3px; box-shadow: 0 0 1rem #0deaff; }
.futuristic-frame.chat .futuristic-frame-border::before { content: ""; display: block; width: 70%; height: calc(1.5rem + 0.325rem); clip-path: polygon(0 0%, 100% 0, 100% 100%, 1.5rem 100%); background-color: #0deaff; position: absolute; top: 0; right: 0; z-index: 5; border-radius: 0 0.5rem 0 0; }
.futuristic-frame.chat .futuristic-frame-content { display: flex; flex-direction: column; justify-content: space-evenly; align-items: stretch; height: calc(100% - (1.5rem + 0.325rem)); max-height: calc(100% - (1.5rem + 0.325rem)); overflow-X: hidden; overflow-y: scroll; padding: 3rem 1.5rem; margin-top: calc(1.5rem + 0.325rem); }
@media screen and (min-width: 576px) and (max-width: 991px) { .futuristic-frame.chat .futuristic-frame-content { padding: 3rem 6rem; } }
@media screen and (min-width: 1400px) { .futuristic-frame.chat .futuristic-frame-content { padding: 3rem 6rem; } }
.futuristic-frame.chat .futuristic-frame-content::-webkit-scrollbar { width: 7px; background-color: transparent; }
.futuristic-frame.chat .futuristic-frame-content::-webkit-scrollbar-track { background-color: transparent; }
.futuristic-frame.chat .futuristic-frame-content::-webkit-scrollbar-thumb { background-color: #0deaff; border-radius: 7px; }
.futuristic-frame.chat .futuristic-frame-content .futuristic-frame-tool { position: absolute; top: 0; left: 0; right: 0; z-index: 9; height: calc(1.5rem + 0.325rem); display: flex; flex-direction: row; align-items: center; padding: 0 .75rem; }
.futuristic-frame.chat .futuristic-frame-content .futuristic-frame-tool a { color: #0cdef2; line-height: 1; }
.futuristic-frame.chat .futuristic-frame-content .futuristic-frame-tool a > span { display: none; }
@media screen and (min-width: 992px) { .futuristic-frame.chat .futuristic-frame-content .futuristic-frame-tool a > span { display: inline; } }
.futuristic-frame.chat .futuristic-frame-content .futuristic-frame-tool a i { font-size: 1.25rem; }

.futuristic-frame.practice { height: calc(100% - 1rem); max-height: calc(100% - 1rem); padding-top: 1rem; position: relative; color: #173490; }
.futuristic-frame.practice::before { content: ""; display: block; width: 55%; height: 25%; max-width: 100%; border-radius: 0 0 1.2rem 0; border-bottom: 0.325rem solid #173490; border-right: 0.325rem solid #173490; position: absolute; z-index: -1; bottom: -.75rem; right: -.75rem; }
.futuristic-frame.practice::after { /*content: "";
display: block;
position: absolute;
z-index: 5;
bottom: -.75rem;
right: 3rem;
min-width: 149px;
min-height: 123px;
min-width: 149px;
min-height: 123px;
background-color: transparent;
mask-image: url($slash-svg);
mask-repeat: no-repeat;
mask-size: cover;*/ /* transform-origin: bottom; transform: skewX(-30deg);*/ }
.futuristic-frame.practice .futuristic-frame-border { height: 100%; max-height: 100%; background-color: rgba(0, 0, 0, 0.25); border: 0.325rem solid transparent; border: 0.325rem solid #173490; border-radius: 1rem; position: relative; padding-left: 0; padding-right: 3px; box-shadow: 0 0 1rem #0deaff; }
.futuristic-frame.practice .futuristic-frame-border::before { content: ""; display: block; width: 70%; height: calc(1.5rem + 0.325rem); clip-path: polygon(0 0%, 100% 0, 100% 100%, 1.5rem 100%); background-color: #173490; position: absolute; top: 0; right: 0; z-index: 5; border-radius: 0 0.5rem 0 0; }
.futuristic-frame.practice .futuristic-frame-content { display: flex; flex-direction: column; justify-content: space-evenly; align-items: stretch; height: calc(100% - (1.5rem + 0.325rem)); max-height: calc(100% - (1.5rem + 0.325rem)); overflow-X: hidden; overflow-y: scroll; padding: 3rem 1.5rem; margin-top: calc(1.5rem + 0.325rem); }
@media screen and (min-width: 576px) and (max-width: 991px) { .futuristic-frame.practice .futuristic-frame-content { padding: 3rem 6rem; } }
@media screen and (min-width: 1400px) { .futuristic-frame.practice .futuristic-frame-content { padding: 3rem 6rem; } }
.futuristic-frame.practice .futuristic-frame-content::-webkit-scrollbar { width: 7px; background-color: transparent; }
.futuristic-frame.practice .futuristic-frame-content::-webkit-scrollbar-track { background-color: transparent; }
.futuristic-frame.practice .futuristic-frame-content::-webkit-scrollbar-thumb { background-color: #173490; border-radius: 7px; }
.futuristic-frame.practice .futuristic-frame-content .futuristic-frame-tool { position: absolute; top: 0; left: 0; right: 0; z-index: 9; height: calc(1.5rem + 0.325rem); display: flex; flex-direction: row; align-items: center; padding: 0 .75rem; }
.futuristic-frame.practice .futuristic-frame-content .futuristic-frame-tool a { color: #163189; line-height: 1; }
.futuristic-frame.practice .futuristic-frame-content .futuristic-frame-tool a > span { display: none; }
@media screen and (min-width: 992px) { .futuristic-frame.practice .futuristic-frame-content .futuristic-frame-tool a > span { display: inline; } }
.futuristic-frame.practice .futuristic-frame-content .futuristic-frame-tool a i { font-size: 1.25rem; }

.robot-frame + .futuristic-frame { padding-top: 1rem; height: calc(80% - 1rem); max-height: calc(80% - 1rem); }

.file-preview { border-radius: 10px; border: 1px solid transparent; padding: 0; width: 100%; margin-bottom: 20px; /*.fileinput-remove{ display: none;
}*/ }

.file-drop-zone { border: 1px dashed #43a047; min-height: 290px; border-radius: 4px; text-align: center; vertical-align: middle; margin: 0; padding: 0; }

.file-drop-zone.clickable:hover, .file-drop-zone.clickable:focus, .file-drop-zone.clickable:active { border-width: 1px; border-color: #43a047; }

.file-drop-zone-title { color: #495057; font-size: 1.1em; text-align: center; padding: 0 10px; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); line-height: 1.8; }
.file-drop-zone-title > i { line-height: 1; font-size: 2.5rem; }
.file-drop-zone-title > small { color: #999; font-size: .9rem; }
.file-drop-zone-title:hover .btn { background-color: #f8d7da; }

.file-preview-status { color: #dc3545 !important; }

.file-highlighted { border: 1px dashed #43a047 !important; background-color: #eee; }

.file-error-message { color: #a94442; background-color: #f2dede; margin: 5px; border: 1px solid #ebccd1; border-radius: 4px; padding: 15px; position: absolute; top: 0; left: 0; right: 0; height: 220px; display: flex; justify-content: center; align-items: center; }
.file-error-message button { position: absolute; top: 5px; right: 5px; }

.krajee-default.file-preview-frame { margin: 0; border: none; box-shadow: none; padding: 6px; float: left; text-align: center; width: 100%; }

.krajee-default.file-preview-frame .kv-file-content { width: 100%; height: 225px; }
.krajee-default.file-preview-frame .kv-file-content * { width: 100%; }

.krajee-default.file-preview-frame .kv-file-content.kv-pdf-rendered { width: 100%; }

.krajee-default.file-preview-frame[data-template="audio"] .kv-file-content { width: 100%; height: 225px; }

.krajee-default.file-preview-frame .file-thumbnail-footer { height: 2.7rem; }

.krajee-default.file-preview-frame:not(.file-preview-error):hover { border: none; box-shadow: none; }

.krajee-default .file-footer-caption { display: block; text-align: center; padding-top: 0; font-size: .9rem; color: #999; margin-bottom: 0; font-family: 'Noto Sans', 'Noto Sans TC', 'Microsoft JhengHei',  'PingFang TC', 'Heiti TC',  'LiHei Pro', sans-serif !important; }
.krajee-default .file-footer-caption * { font-family: 'Noto Sans', 'Noto Sans TC', 'Microsoft JhengHei',  'PingFang TC', 'Heiti TC',  'LiHei Pro', sans-serif !important; }

samp { font-family: 'Noto Sans', 'Noto Sans TC', 'Microsoft JhengHei',  'PingFang TC', 'Heiti TC',  'LiHei Pro', sans-serif !important; }

.krajee-default .file-caption-info, .krajee-default .file-size-info { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; height: 1.35rem; margin: auto; line-height: 1.5; }

.krajee-default .file-drag-handle, .krajee-default .file-upload-indicator { position: absolute; bottom: 0; left: 0; display: none; }

.krajee-default .file-footer-buttons { float: right; position: absolute; bottom: -5px; right: -5px; }
.krajee-default .file-footer-buttons button { color: #43a047; border-color: transparent; }
.krajee-default .file-footer-buttons button:hover, .krajee-default .file-footer-buttons button:focus, .krajee-default .file-footer-buttons button:active { color: #b02a37; border-color: transparent !important; background-color: transparent !important; }

.kv-zoom-actions { text-align: right; }
.kv-zoom-actions button:not(.btn-kv-close) { display: none; }
.kv-zoom-actions button { color: #43a047; border-color: transparent; }
.kv-zoom-actions button:hover, .kv-zoom-actions button:focus, .kv-zoom-actions button:active { color: #b02a37; border-color: transparent !important; background-color: transparent !important; }
.kv-zoom-actions .btn-kv-close { color: #adb5bd; }

.g-fw-300, .g-fw-light { font-weight: 300 !important; }

.g-fw-400, .g-fw-regular { font-weight: 400 !important; }

.g-fw-500, .g-fw-medium { font-weight: 500 !important; }

.g-fw-700, .g-fw-bold { font-weight: 700 !important; }

.g-fw-900, .g-fw-black { font-weight: 900 !important; }

@keyframes flashAn { from { opacity: 1.0; }
  to { opacity: 0.25; } }
@keyframes volume { 0% { background-image: none; }
  25% { background-image: url("../images/volume-1.svg"); }
  50% { background-image: url("../images/volume-2.svg"); }
  75% { background-image: url("../images/volume-3.svg"); }
  100% { background-image: none; } }
@keyframes rec { 0% { box-shadow: 0 0 0 0.25rem rgba(67, 160, 71, 0.5); }
  50% { box-shadow: 0 0 0 0.25rem rgba(67, 160, 71, 0); }
  100% { box-shadow: 0 0 0 0.25rem rgba(67, 160, 71, 0.5); } }
.btn__playTitle { background-color: transparent; border: none; font-size: 1rem; padding: 0 !important; position: relative; }
.btn__playTitle::before { content: "\f028"; display: inline-block; font-family: "Font Awesome 6 Free"; font-weight: 900; width: 1.3em; height: 1.3em; line-height: 1.3em; vertical-align: middle; overflow: hidden; text-align: left; margin-top: -.125em; margin-right: .25rem; border-radius: 0; font-size: 1.25rem; }

.btn__playTitle.current::before { width: .7em; margin-right: calc(.25rem + .2em + .2em + .2em); }
.btn__playTitle.current::after { content: ""; display: inline-block; width: .6em; height: 1.3em; position: absolute; top: 50%; left: .7em; margin-top: -.7em; background-image: url("../../images/volume-3.svg"); background-size: 100% 100%; background-repeat: no-repeat; animation: volume 3s infinite; }
.btn__playTitle.current.disabled, .btn__playTitle.current:disabled, .btn__playTitle.current[disabled], .btn__playTitle.current[disabled="disabled"] { filter: opacity(1); opacity: 1.0; color: #43a047; }

.btn__record, .btn__playRec, .btn__next, .btn-next, .btn__end, .btn-end { border-radius: 100%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0.2rem #6dc271; background-color: #fff; border-color: transparent; }
.btn__record.btn-lg, .btn__playRec.btn-lg, .btn__next.btn-lg, .btn-next.btn-lg, .btn__end.btn-lg, .btn-end.btn-lg { width: calc(2em + 1rem + 1rem - 2px); height: calc(2em + 1rem + 1rem - 2px); }
.btn__record.btn-lg > i, .btn__playRec.btn-lg > i, .btn__next.btn-lg > i, .btn-next.btn-lg > i, .btn__end.btn-lg > i, .btn-end.btn-lg > i { font-size: 1.5rem; }
.btn__record.btn-sm, .btn__playRec.btn-sm, .btn__next.btn-sm, .btn-next.btn-sm, .btn__end.btn-sm, .btn-end.btn-sm { width: calc(1em + 1rem + 1rem - 2px); height: calc(1em + 1rem + 1rem - 2px); }
.btn__record.btn-sm > i, .btn__playRec.btn-sm > i, .btn__next.btn-sm > i, .btn-next.btn-sm > i, .btn__end.btn-sm > i, .btn-end.btn-sm > i { font-size: 1rem; }
.btn__record > i, .btn__playRec > i, .btn__next > i, .btn-next > i, .btn__end > i, .btn-end > i { color: #43a047; }
.btn__record::after, .btn__playRec::after, .btn__next::after, .btn-next::after, .btn__end::after, .btn-end::after { border-radius: 100%; }
.btn__record:hover > i, .btn__record:active > i, .btn__record.hover > i, .btn__record.active > i, .btn__playRec:hover > i, .btn__playRec:active > i, .btn__playRec.hover > i, .btn__playRec.active > i, .btn__next:hover > i, .btn__next:active > i, .btn__next.hover > i, .btn__next.active > i, .btn-next:hover > i, .btn-next:active > i, .btn-next.hover > i, .btn-next.active > i, .btn__end:hover > i, .btn__end:active > i, .btn__end.hover > i, .btn__end.active > i, .btn-end:hover > i, .btn-end:active > i, .btn-end.hover > i, .btn-end.active > i { color: #fff !important; }
.btn__record:hover::after, .btn__record:active::after, .btn__record.hover::after, .btn__record.active::after, .btn__playRec:hover::after, .btn__playRec:active::after, .btn__playRec.hover::after, .btn__playRec.active::after, .btn__next:hover::after, .btn__next:active::after, .btn__next.hover::after, .btn__next.active::after, .btn-next:hover::after, .btn-next:active::after, .btn-next.hover::after, .btn-next.active::after, .btn__end:hover::after, .btn__end:active::after, .btn__end.hover::after, .btn__end.active::after, .btn-end:hover::after, .btn-end:active::after, .btn-end.hover::after, .btn-end.active::after { transform: scale(1.5, 1.5) !important; }
.btn__record:disabled, .btn__record.disabled, .btn__recorddisabled, .btn__record[disabled="disabled"], .btn__playRec:disabled, .btn__playRec.disabled, .btn__playRecdisabled, .btn__playRec[disabled="disabled"], .btn__next:disabled, .btn__next.disabled, .btn__nextdisabled, .btn__next[disabled="disabled"], .btn-next:disabled, .btn-next.disabled, .btn-nextdisabled, .btn-next[disabled="disabled"], .btn__end:disabled, .btn__end.disabled, .btn__enddisabled, .btn__end[disabled="disabled"], .btn-end:disabled, .btn-end.disabled, .btn-enddisabled, .btn-end[disabled="disabled"] { background-color: #fff !important; border-color: transparent !important; }
.btn__record.btn-empty, .btn__playRec.btn-empty, .btn__next.btn-empty, .btn-next.btn-empty, .btn__end.btn-empty, .btn-end.btn-empty { --bs-btn-border-color: transparent; box-shadow: none !important; background-color: transparent !important; border-color: transparent !important; pointer-events: none; }
.btn__record.btn-empty > i, .btn__playRec.btn-empty > i, .btn__next.btn-empty > i, .btn-next.btn-empty > i, .btn__end.btn-empty > i, .btn-end.btn-empty > i { color: transparent !important; }

.btn__record.current, .btn__playRec.current { animation: rec 2s infinite; box-shadow: 0 0 0 0.25rem rgba(67, 160, 71, 0.5); background-color: #43a047; }
.btn__record.current > i, .btn__playRec.current > i { color: #fff; }
.btn__record.current::after, .btn__playRec.current::after { display: none; }

.btn__speed { --bs-btn-padding-x: 0.375rem; min-width: 4rem; font-size: .75rem; margin-top: -.325rem; color: #fff; }
.btn__speed:hover { color: #173490; }
.btn__speed i { margin-right: .25rem; }
.btn__speed + .dropdown-menu { background-color: rgba(0, 0, 0, 0.9); border-color: transparent; font-size: 0.75rem; min-width: auto; padding: 0; margin-top: 0.4rem; }
.btn__speed + .dropdown-menu::before { content: ""; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 0 0.4rem 0.4rem; border-bottom-color: rgba(0, 0, 0, 0.9); position: absolute; top: 0; right: 0; transform: translate(-1.5rem, -100%); }
.btn__speed + .dropdown-menu .dropdown-header { color: #43a047; }
.btn__speed + .dropdown-menu .dropdown-item { color: #fff; }
.btn__speed + .dropdown-menu .dropdown-item:hover, .btn__speed + .dropdown-menu .dropdown-item:focus { background-color: rgba(67, 160, 71, 0.5); }
.btn__speed + .dropdown-menu .dropdown-item.active, .btn__speed + .dropdown-menu .dropdown-item:active { background-color: var(--bs-dropdown-link-active-bg); }
.btn__speed + .dropdown-menu li:last-child .dropdown-item { border-radius: 0 0 0.375rem 0.375rem; }

.text-gray-100 { color: #f8f9fa; }

.text-gray-200 { color: #e9ecef; }

.text-gray-300 { color: #dee2e6; }

.text-gray-400 { color: #ced4da; }

.text-gray-500 { color: #adb5bd; }

.text-gray-600 { color: #6c757d; }

.text-gray-700 { color: #495057; }

.text-gray-800 { color: #343a40; }

.text-gray-900 { color: #212529; }

.text-purple { color: #4A40C3; }

.text-pink { color: #C340B2; }

.text-teal { color: #18ba96; }

.text-green { color: #43a047; }

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #495057; -webkit-box-shadow: 0 0 0 1000px rgba(139, 213, 220, 0.2) inset; transition: background-color 5000s ease-in-out 0s; }

.sr-only-goContent { background-color: #43a047; color: #FFF; position: absolute !important; top: 0; left: 0; text-decoration: none; font-size: 1rem; padding: .25rem .5rem 0 .25rem; z-index: 5000; }
.sr-only-goContent:active, .sr-only-goContent:focus { position: static; width: auto !important; height: auto !important; margin: 0; overflow: visible; clip: auto; }

.tooltip-inner { text-align: left; }

.btn:disabled, .btn.disabled, .btndisabled, .btn[disabled="disabled"] { filter: opacity(0.5); }

.btn__circle { border-radius: 100%; width: calc(2em + 1rem + 1rem - 2px); height: calc(2em + 1rem + 1rem - 2px); display: inline-flex; align-items: center; justify-content: center; }

.btn { position: relative; }
.btn::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--bs-btn-border-color); }
.btn:hover::after { border: 1px solid transparent; transform: scale(1.15, 1.5); transition: all 2s cubic-bezier(0.19, 1, 0.22, 1); }

.btn.rounded-pill::after { border-radius: var(--bs-border-radius-pill) !important; }

.style-h3 { color: #43a047; font-weight: bold; background-color: #d9ecda; border-radius: 4em; padding-top: .5rem; padding-bottom: .5rem; text-align: center; margin-bottom: 1rem; }

@media screen and (min-width: 992px) { .min-ratio { height: 100% !important; } }

[data-bs-toggle="tooltip"] { position: relative; }
[data-bs-toggle="tooltip"] a { display: block; }

[class*="Interface-bar"] { display: flex; align-items: center; width: 70%; width: calc(70% + 3rem); height: calc(1.5rem + .325rem); position: absolute; top: 0; right: 0; z-index: 9; }
[class*="Interface-bar"] .progress-count { color: #fff; flex: 1; min-width: 3rem; text-align: right; padding-top: .325rem; }
[class*="Interface-bar"] .progress-bar { background-color: #fff; width: 100%; height: .5rem; border-radius: .5rem; margin-left: 2rem; margin-right: .5rem; padding: 1px; }
[class*="Interface-bar"] .progress-bar .progress-bar-fill { background-color: #fbc400; height: .5rem; border-radius: .5rem; }

/* ************************************************* */
.lightboxModal { display: block; position: relative; }
.lightboxModal::after { content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; bottom: .5rem; right: .5rem; color: #43a047; font-size: 1.5em; line-height: 1; }
.lightboxModal:hover { cursor: pointer; filter: brightness(0.8); }

#lightboxModal .modal-dialog .modal-content { background-color: transparent; border-color: transparent; }

#lightboxModal.lightbox2 .modal-dialog .modal-content img { max-height: 90vh; max-height: calc(100vh - 1.75rem - 1rem - 1.5rem - 1.5rem); margin: 0 auto; display: block; }

/* ************************************************* */
.task-complete { z-index: 4; }
.task-complete.all { position: relative; }
.task-complete.all [class*="bookmark"] { font-size: 2rem; color: #fff; text-shadow: 1px 1px #b4d9b5, -1px -1px #b4d9b5, -1px 1px #b4d9b5, 1px -1px #b4d9b5; position: relative; }
.task-complete.all [class*="crown"] { color: #b4d9b5; font-size: .95rem; position: absolute; top: .325em; left: 0; }
.task-complete.all.done [class*="bookmark"] { color: #43a047; text-shadow: none; }
.task-complete.easy, .task-complete.medium, .task-complete.hard { width: calc(2.5rem + 3px*2); height: calc(2.5rem + 3px*2); font-size: 2.5rem; border-radius: 100%; background-color: #FFF; border: 1px solid #b4d9b5; color: #b4d9b5; display: flex; justify-content: center; align-items: center; }
.task-complete.easy i, .task-complete.medium i, .task-complete.hard i { font-size: .6em; }
.task-complete.easy::after, .task-complete.medium::after, .task-complete.hard::after { content: ""; display: block; font-size: .2em; font-weight: bold; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; color: #43a047; text-shadow: 0 0 2px rgba(0, 0, 0, 0.25); }
.task-complete.easy.done, .task-complete.medium.done, .task-complete.hard.done { background-color: #43a047; color: #343a40; }
.task-complete.easy.done::after, .task-complete.medium.done::after, .task-complete.hard.done::after { color: #fff; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); }
.task-complete.easy::after { content: "Easy"; }
.task-complete.medium::after { content: "Medium"; }
.task-complete.hard::after { content: "Hard"; }

.spinner { position: fixed; z-index: 9999; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; }
.spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; }
.spinner .spinner-border { width: 3rem; height: 3rem; }

.hideText { background-color: transparent; color: transparent; user-select: none; }
.hideText * { background-color: transparent; color: transparent; user-select: none; }

.loading-bot-modal .spinner-bot { max-width: 15rem; margin: 0 auto; }
.loading-bot-modal .spinner-bot > img, .loading-bot-modal .spinner-bot > svg { max-width: 100%; }
.loading-bot-modal .spinner-text { font-size: 1.25rem; color: #fff; margin-top: .75rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.loading-bot-modal .spinner-text::after { content: ""; display: inline-block; animation: spinnerDots 2s steps(3, end) infinite; }

@keyframes spinnerDots { 0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
  100% { content: "..."; } }
[id*="TEEMI-Bot-"] #face { fill: #fff; }
[id*="TEEMI-Bot-"] #body, [id*="TEEMI-Bot-"] #rightHand, [id*="TEEMI-Bot-"] #leftHand { fill: #0ADA86; }
[id*="TEEMI-Bot-"] #foot, [id*="TEEMI-Bot-"] #rightEye, [id*="TEEMI-Bot-"] #leftEye, [id*="TEEMI-Bot-"] #mouth, [id*="TEEMI-Bot-"] #tele, [id*="TEEMI-Bot-"] #bodyShadow { fill: #237DAF; }
[id*="TEEMI-Bot-"] #leftHand2 { fill: #0ADA86; }
[id*="TEEMI-Bot-"] #trumpetMain { fill: #F4CE36; }
[id*="TEEMI-Bot-"] #trumpetTrump { fill: #F5CF37; }
[id*="TEEMI-Bot-"] #trumpetGrip, [id*="TEEMI-Bot-"] #trumpetEdge1, [id*="TEEMI-Bot-"] #trumpetEdge2 { fill: #F5B935; }
[id*="TEEMI-Bot-"] #heart { fill: #F4CE36; }
[id*="TEEMI-Bot-"] #dialogueBg, [id*="TEEMI-Bot-"] #screwdriver { fill: #EBC83F; }
[id*="TEEMI-Bot-"] #gear1, [id*="TEEMI-Bot-"] #gear2 { fill: #FFFFFF; }

@keyframes footAn { 0% { transform: translateX(-5px) rotate(2.5deg); }
  50% { transform: translateX(5px) rotate(-2.5deg); }
  100% { transform: translateX(-5px) rotate(2.5deg); } }
[id*="TEEMI-Bot-"] #foot { transform-origin: 335px 530px; animation: footAn 2s infinite; }

@keyframes Wave1An { 0% { opacity: 0; }
  33.3% { opacity: 1; }
  66.4% { opacity: 1; }
  100% { opacity: 0; } }
[id*="TEEMI-Bot-"] #leftWave1, [id*="TEEMI-Bot-"] #rightWave1 { transform-origin: 335px 530px; animation: Wave1An 2s infinite; }

@keyframes Wave2An { 0% { opacity: 0; }
  33.3% { opacity: 0; }
  66.4% { opacity: 1; }
  100% { opacity: 0; } }
[id*="TEEMI-Bot-"] #leftWave2, [id*="TEEMI-Bot-"] #rightWave2 { transform-origin: 335px 530px; animation: Wave2An 2s infinite; }

@keyframes sayHiAn { 0% { transform: rotate(10deg); }
  15% { transform: rotate(0deg); }
  30% { transform: rotate(10deg); }
  45% { transform: rotate(0deg); }
  60% { transform: rotate(10deg); }
  100% { transform: rotate(10deg); } }
#TEEMI-Bot-hi #rightHand { transform-origin: 189.4px 352.9px; animation: sayHiAn 2s infinite; }

@keyframes liftTrumpetRightAn { 0% { transform: rotate(-10deg); }
  30% { transform: rotate(0deg); }
  45% { transform: rotate(0deg); }
  60% { transform: rotate(-10deg); }
  100% { transform: rotate(-10deg); } }
#TEEMI-Bot-announce #rightHand { transform-origin: 161px 337px; animation: liftTrumpetRightAn 2s infinite; }

@keyframes liftTrumpetLeftAn { 0% { transform: rotate(0deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(-10deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); } }
#TEEMI-Bot-announce #leftHand, #TEEMI-Bot-announce #leftHand2, #TEEMI-Bot-announce #trumpet { transform-origin: 436.5px 357.8px; animation: liftTrumpetLeftAn 2s infinite; }

@keyframes heartBotAn { 0% { transform: scaleY(1); }
  20% { transform: scaleY(1.05); }
  40% { transform: scaleY(1); }
  60% { transform: scaleY(1); }
  80% { transform: scaleY(1); }
  100% { transform: scaleY(1); } }
#TEEMI-Bot-love { transform-origin: bottom center; animation: heartBotAn 4s infinite; }

@keyframes heartEyeAn { 0% { transform: scale(1); }
  20% { transform: scale(1); }
  21% { transform: scale(1); }
  25.5% { transform: scale(0.1); }
  30% { transform: scale(1); }
  34.5% { transform: scale(0.1); }
  39% { transform: scale(1); }
  40% { transform: scale(1); }
  60% { transform: scale(1); }
  80% { transform: scale(1); }
  100% { transform: scale(1); } }
#TEEMI-Bot-love #leftEye { transform-origin: 395.5px 221.2px; animation: heartEyeAn 4s infinite; }

#TEEMI-Bot-love #rightEye { transform-origin: 260px 225.1px; animation: heartEyeAn 4s infinite; }

@keyframes heart1fadeAn { 0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 1; }
  60% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes heart2fadeAn { 0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0; }
  60% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes heart3fadeAn { 0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0; }
  60% { opacity: 0; }
  80% { opacity: 1; }
  100% { opacity: 0; } }
#TEEMI-Bot-love #heart1 { animation: heart1fadeAn 4s infinite; }

#TEEMI-Bot-love #heart2 { animation: heart2fadeAn 4s infinite; }

#TEEMI-Bot-love #heart3 { animation: heart3fadeAn 4s infinite; }

@keyframes highRightAn { 0% { transform: rotate(-5deg); }
  5% { transform: rotate(0deg); }
  10% { transform: rotate(-6deg); }
  15% { transform: rotate(0deg); }
  20% { transform: rotate(-5deg); }
  100% { transform: rotate(-5deg); } }
#TEEMI-Bot-high #rightHand { transform-origin: 224.3px 349.6px; animation: highRightAn 2s infinite; }

@keyframes highLeftAn { 0% { transform: rotate(0deg); }
  5% { transform: rotate(-5deg); }
  10% { transform: rotate(0deg); }
  15% { transform: rotate(-5deg); }
  20% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); } }
#TEEMI-Bot-high #leftHand { transform-origin: 465.6px 349.6px; animation: highLeftAn 2s infinite; }

@keyframes highBotAn { 0% { transform: translateY(0px); }
  5% { transform: translateY(-3px); }
  10% { transform: translateY(0px); }
  15% { transform: translateY(-3px); }
  20% { transform: translateY(0px); }
  100% { transform: translateY(0px); } }
#TEEMI-Bot-high { transform-origin: 335.1px 529.9px; animation: highBotAn 2s infinite; }

@keyframes bendRightAn { 0% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); } }
#TEEMI-Bot-bend #rightHand { transform-origin: 225.7px 353.6px; animation: bendRightAn 2s infinite; }

@keyframes bendLeftAn { 0% { transform: rotate(5deg); }
  50% { transform: rotate(20deg); }
  100% { transform: rotate(5deg); } }
#TEEMI-Bot-bend #leftHand { transform-origin: 503.6px 314.2px; animation: bendLeftAn 2s infinite; }

@keyframes bendBotAn { 0% { transform: rotate(0.5deg); }
  50% { transform: rotate(0deg); }
  100% { transform: rotate(0.5deg); } }
#TEEMI-Bot-bend { transform-origin: 335px 530px; animation: bendBotAn 2s infinite; }

@keyframes tossBallAn { 0% { transform: rotate(10deg) translateY(-5px); }
  50% { transform: rotate(0deg) translateY(0px); }
  100% { transform: rotate(10deg) translateY(-5px); } }
.end-an-robot #TEEMI-Bot-hi #rightHand { transform-origin: 189.4px 352.9px; animation: tossBallAn 2s infinite; animation-delay: 1s; }

@keyframes hereLeftAn { 0% { transform: rotate(0deg) translate(0px, 0px); }
  50% { transform: rotate(20deg) translate(10px, 20px); }
  100% { transform: rotate(0deg) translate(0px, 0px); } }
#TEEMI-Bot-here #leftHand { transform-origin: 463.6px 265.4px; animation: hereLeftAn 3s infinite; }

@keyframes toolGear1An { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }
#TEEMI-Bot-tool #gear1 { transform-origin: 566.6995px 63.3175px; animation: toolGear1An 11s linear infinite; will-change: transform; }

@keyframes toolGear2An { 0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); } }
#TEEMI-Bot-tool #gear2 { transform-origin: 613.55px 93.1px; animation: toolGear2An 6s linear infinite; will-change: transform; }

@keyframes toolLeftAn { 0% { transform: rotate(0deg); }
  50% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); } }
#TEEMI-Bot-tool #leftHand, #TEEMI-Bot-tool #leftHand2, #TEEMI-Bot-tool #screwdriver { transform-origin: 463.6px 265.4px; animation: toolLeftAn 3s infinite; }

.futuristic-frame.chat .topic-section .btn { border-radius: 0 500px 500px 500px; }
.futuristic-frame.chat .topic-section .btn::after { border-radius: 0 500px 500px 500px; }
.futuristic-frame.chat .topic-section .btn:hover::after { transform: scale(1.075, 1.25); }
.futuristic-frame.chat .topic-section .card .card-img { border-radius: 0 500px 500px 500px; }
.futuristic-frame.chat .topic-section .card .task-complete.all [class*="bookmark"] { left: 1.5rem; transform: translateX(-50%); }
.futuristic-frame.chat .topic-section .card .task-complete.all [class*="crown"] { left: 1.5rem; transform: translateX(-50%); }
.futuristic-frame.chat .topic-section .card .task-complete.all.done [class*="crown"] { color: #0deaff; }
.futuristic-frame.chat .topic-section .card .task-complete.done { color: #0deaff; }
.futuristic-frame.chat .difficulty-section .difficulty-title span { border-top-color: #0deaff; }
.futuristic-frame.chat .difficulty-section .difficulty-title span::before, .futuristic-frame.chat .difficulty-section .difficulty-title span::after { background-color: #0deaff; }
.futuristic-frame.chat .difficulty-section .difficulty-title::before, .futuristic-frame.chat .difficulty-section .difficulty-title::after { border-bottom-color: #0deaff; }
.futuristic-frame.chat .difficulty-section .difficulty-title::before { border-right-color: #0deaff; }
.futuristic-frame.chat .difficulty-section .difficulty-title::after { border-left-color: #0deaff; }
.futuristic-frame.chat .difficulty-section .difficulty-btn .task-complete.easy.done, .futuristic-frame.chat .difficulty-section .difficulty-btn .task-complete.medium.done, .futuristic-frame.chat .difficulty-section .difficulty-btn .task-complete.hard.done { color: #0deaff; }
.futuristic-frame.chat .record-summary .record-title span { border-bottom-color: #0deaff; }
.futuristic-frame.chat .record-summary .record-title::before, .futuristic-frame.chat .record-summary .record-title::after { border-top-color: #0deaff; }
.futuristic-frame.chat .record-summary .record-title::before { border-right-color: #0deaff; }
.futuristic-frame.chat .record-summary .record-title::after { border-left-color: #0deaff; }
.futuristic-frame.chat .record-summary .record-val { border-bottom-color: #0deaff; }
.futuristic-frame.chat .end-animate .end-an .end-an-ball .task-complete { color: rgba(255, 255, 255, 0.75); }
.futuristic-frame.chat .end-animate .end-an .end-an-ball .task-complete.done { color: #0deaff; }

.chatInterface-content { padding-bottom: calc((2em + 1rem + 1rem - 2px) + 1rem); }

.chatInterface-frame { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; padding: 1.5rem 1rem; }
.chatInterface-frame .btn { padding: 0 0.375rem; transition: none; }
.chatInterface-frame .avatar { width: 3rem; height: 3rem; background-color: transparent; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 100%; overflow: hidden; margin-left: 0; margin-right: 1rem; }
@media screen and (min-width: 992px) { .chatInterface-frame .avatar { width: 3.75rem; height: 3.75rem; } }
@media screen and (min-width: 1200px) { .chatInterface-frame .avatar { margin-left: 1rem; margin-right: 1rem; } }
.chatInterface-frame .avatar .avatar-img { display: block; width: 100%; height: 100%; }
.chatInterface-frame .avatar .avatar-img > img { width: 100%; height: 100%; }
.chatInterface-frame .avatar .avatar-text { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #43a047; color: #fff; font-size: 1.5rem; }
@media screen and (min-width: 992px) { .chatInterface-frame .avatar .avatar-text { font-size: 1.875rem; } }
.chatInterface-frame .dialog { min-width: 5rem; max-width: 75%; position: relative; }
.chatInterface-frame .dialog .dialog-tools { text-align: right; position: absolute; top: 0; left: 0; right: 0; transform: translateY(-100%); }
.chatInterface-frame .dialog .dialog-text { background-color: #fff; border-radius: 0.375rem; border-top-left-radius: 0; padding: .75rem 1rem .75rem .5rem; color: #343a40; position: relative; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); display: flex; align-items: flex-start; margin-bottom: .25rem; }
.chatInterface-frame .dialog .dialog-text::before { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 1rem 1rem 0; border-color: transparent #fff transparent transparent; position: absolute; top: 0; left: -1rem; z-index: 1; }
.chatInterface-frame .dialog .dialog-text::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 1rem 1rem 0; border-color: transparent rgba(0, 0, 0, 0.15) transparent transparent; position: absolute; top: .125rem; left: -1rem; z-index: -1; filter: blur(0.125rem); }
.chatInterface-frame .dialog .dialog-translate { font-size: .9rem; color: #fff; padding: .25rem 1rem .25rem 2rem; }
.chatInterface-frame .dialog .dialog-suggest { font-size: .9rem; color: #fff; }
.chatInterface-frame .dialog .dialog-suggest .btn { padding-top: 0; padding-bottom: 0; }
.chatInterface-frame .dialog .dialog-tools .btn-link, .chatInterface-frame .dialog .dialog-translate .btn-link, .chatInterface-frame .dialog .dialog-suggest .btn-link { color: #fff; filter: brightness(5); }
.chatInterface-frame .dialog .dialog-tools .btn-link:hover, .chatInterface-frame .dialog .dialog-translate .btn-link:hover, .chatInterface-frame .dialog .dialog-suggest .btn-link:hover { color: #fbc400; filter: brightness(1); }

.chatInterface-frame.right { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row-reverse; }
.chatInterface-frame.right .avatar { margin-left: 1.5rem; margin-right: 0; }
@media screen and (min-width: 1200px) { .chatInterface-frame.right .avatar { margin-left: 1.5rem; margin-right: 1.5rem; } }
.chatInterface-frame.right .dialog .dialog-text { background-color: #d9ecda; border-radius: 0.375rem; border-top-right-radius: 0; padding: .75rem 1rem .75rem .5rem; }
.chatInterface-frame.right .dialog .dialog-text::before { border-width: 1rem 1rem 0 0; border-color: #d9ecda transparent transparent transparent; left: auto; right: -1rem; }
.chatInterface-frame.right .dialog .dialog-text::after { border-width: 1rem 1rem 0 0; border-color: rgba(0, 0, 0, 0.15) transparent transparent transparent; left: auto; right: -1rem; }

.chatInterface-footer { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; padding: 1rem; margin-bottom: 1rem; }
.chatInterface-footer .btn { margin-left: 1rem; margin-right: 1rem; }

.completion-section.chat .task-complete.easy.done, .completion-section.chat .task-complete.medium.done, .completion-section.chat .task-complete.hard.done { color: #0deaff; }

.btn__teacherTip { background-color: transparent; border: none; padding: 0 !important; width: 2rem; text-align: center; }
.btn__teacherTip::before { content: "\f4ad"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.btn__teacherTip::after { content: "\f075"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.btn__teacherTip:hover::after { transform: none; transition: none; }

.btn__teacherTip[aria-expanded="false"]::after { display: none; }
.btn__teacherTip[aria-expanded="false"]::after { display: inline-block; }

.btn__teacherTip[aria-expanded="true"]::after { display: inline-block; }
.btn__teacherTip[aria-expanded="true"]::after { display: none; }

.btn__translate { background-color: transparent; border: none; padding: 0 !important; display: inline-flex; }
.btn__translate::before { content: "\41"; font-family: "Font Awesome 6 Free"; display: inline-flex; width: 1.8em; height: 1.8em; line-height: 1.8em; position: relative; font-weight: 900; font-size: .6em; background-color: #43a047; color: #fff; border: 2px solid #43a047 !important; border-radius: 2px 0 0 2px; justify-content: center; align-items: center; margin-right: -1px; }
.btn__translate::after { content: "\f0ac"; font-family: "Font Awesome 6 Free"; display: inline-flex; width: 1.8em; height: 1.8em; line-height: 1.8em; position: relative; border: 2px solid #43a047 !important; font-weight: 900; font-size: .6em; background-color: transparent; color: #43a047; border-radius: 0 2px 2px 0; justify-content: center; align-items: center; margin-left: -1px; }
.btn__translate:hover::after { transform: none; transition: none; }

.btn__translate[aria-expanded="false"]::before { background-color: #43a047; color: #fff; }
.btn__translate[aria-expanded="false"]::after { background-color: transparent; color: #43a047; }

.btn__translate[aria-expanded="true"]::before { background-color: transparent; color: #43a047; }
.btn__translate[aria-expanded="true"]::after { background-color: #43a047; color: #fff; }

.btn__screenText { background-color: transparent; border: none; padding: 0 !important; width: 2rem; text-align: center; }
.btn__screenText::before { content: "\f06e"; display: inline-block; font-family: "Font Awesome 6 Free"; font-weight: 900; }

.btn__screenText[aria-expanded="true"]::before { content: "\f06e"; }

.btn__screenText[aria-expanded="false"]::before { content: "\f070"; }

.btn__suggest { background-color: transparent; border: none; padding: 0 !important; width: auto; text-align: center; margin-right: .25rem; }
.btn__suggest::before { content: "\f4ad"; display: inline-block; font-family: "Font Awesome 6 Free"; transform: scaleX(-1); }

.btn__suggest[aria-expanded="true"]::before { content: "\f4ad"; }

.btn__suggest[aria-expanded="false"]::before { content: "\f075"; }

.completion-section.chat { color: #0deaff; }
.completion-section.chat .completion-title span { background-color: rgba(13, 234, 255, 0.25); }
.completion-section.chat .completion-title::before, .completion-section.chat .completion-title::after { background-color: rgba(13, 234, 255, 0.25); }
.completion-section.chat .completion-content { background-color: rgba(13, 234, 255, 0.25); }

.log-modal.chat { color: #0deaff; }
.log-modal.chat .log-accordion1 > .accordion-item > .accordion-header > .accordion-button:hover { background-color: rgba(13, 234, 255, 0.25); }
.log-modal.chat .log-accordion1 > .accordion-item > .accordion-header > .accordion-button:not(.collapsed) { background-color: rgba(13, 234, 255, 0.1); }
.log-modal.chat .log-accordion1 > .accordion-item > .accordion-collapse.collapse.show { background-color: rgba(13, 234, 255, 0.1); }

.futuristic-frame.practice .topic-section .btn { border-radius: 500px; }
.futuristic-frame.practice .topic-section .btn::after { border-radius: 500px; }
.futuristic-frame.practice .topic-section .btn:hover::after { transform: scale(1.075, 1.25); }
.futuristic-frame.practice .topic-section .card .card-img { border-radius: 500px; margin-bottom: 0; }
.futuristic-frame.practice .topic-section .card .task-complete.all [class*="bookmark"] { left: calc(150px/2); transform: translateX(-50%); }
.futuristic-frame.practice .topic-section .card .task-complete.all [class*="crown"] { left: calc(150px/2); transform: translateX(-50%); }
.futuristic-frame.practice .topic-section .card .task-complete.all.done [class*="crown"] { color: #455da6; }
.futuristic-frame.practice .topic-section .card .task-complete.done { color: #455da6; }
.futuristic-frame.practice .difficulty-section .difficulty-title span { border-top-color: #173490; }
.futuristic-frame.practice .difficulty-section .difficulty-title span::before, .futuristic-frame.practice .difficulty-section .difficulty-title span::after { background-color: #173490; }
.futuristic-frame.practice .difficulty-section .difficulty-title::before, .futuristic-frame.practice .difficulty-section .difficulty-title::after { border-bottom-color: #173490; }
.futuristic-frame.practice .difficulty-section .difficulty-title::before { border-right-color: #173490; }
.futuristic-frame.practice .difficulty-section .difficulty-title::after { border-left-color: #173490; }
.futuristic-frame.practice .difficulty-section .difficulty-btn .task-complete.easy.done, .futuristic-frame.practice .difficulty-section .difficulty-btn .task-complete.medium.done, .futuristic-frame.practice .difficulty-section .difficulty-btn .task-complete.hard.done { color: #455da6; }
.futuristic-frame.practice .record-summary .record-title span { border-bottom-color: #173490; }
.futuristic-frame.practice .record-summary .record-title::before, .futuristic-frame.practice .record-summary .record-title::after { border-top-color: #173490; }
.futuristic-frame.practice .record-summary .record-title::before { border-right-color: #173490; }
.futuristic-frame.practice .record-summary .record-title::after { border-left-color: #173490; }
.futuristic-frame.practice .record-summary .record-val { border-bottom-color: #0deaff; }
.futuristic-frame.practice .end-animate .end-an .end-an-ball .task-complete { color: rgba(255, 255, 255, 0.75); }
.futuristic-frame.practice .end-animate .end-an .end-an-ball .task-complete.done { color: #455da6; }

.practiceInterface-topic { color: #343a40; display: flex; align-items: flex-start; justify-content: center; margin-bottom: 1rem; }
.practiceInterface-topic .btn { padding: 0 0.375rem; transition: none; }

.practiceInterface-feedback { display: inline-flex; justify-content: center; text-align: center; font-size: .9rem; border-top: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; padding: .5rem; margin: 0 auto; border-radius: 0.375rem; margin-bottom: 4rem; }
.practiceInterface-feedback i { font-size: 1.25em; margin-right: .25rem; }

.level-excellent, .speak-excellent { color: #18ba96; }

.level-good { color: #fbc400; }

.speak-good { color: #c99d00; }

.level-fair, .speak-fair { color: #dc3545; }

[class*="level-"] { display: flex; flex-direction: row; align-items: center; justify-content: center; margin: 0 .5rem; }

.practiceInterface-footer { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; padding: 1rem; margin-bottom: 1rem; }
.practiceInterface-footer .btn { margin-left: 1rem; margin-right: 1rem; }

.completion-section.practice .task-complete.easy.done, .completion-section.practice .task-complete.medium.done, .completion-section.practice .task-complete.hard.done { color: #455da6; }

.completion-section.practice { color: #173490; }
.completion-section.practice .completion-title span { background-color: rgba(23, 52, 144, 0.25); }
.completion-section.practice .completion-title::before, .completion-section.practice .completion-title::after { background-color: rgba(23, 52, 144, 0.25); }
.completion-section.practice .completion-content { background-color: rgba(23, 52, 144, 0.25); }

.log-modal.practice { color: #173490; }
.log-modal.practice .log-accordion1 > .accordion-item > .accordion-header > .accordion-button:hover { background-color: rgba(23, 52, 144, 0.25); }
.log-modal.practice .log-accordion1 > .accordion-item > .accordion-header > .accordion-button:not(.collapsed) { background-color: rgba(23, 52, 144, 0.1); }
.log-modal.practice .log-accordion1 > .accordion-item > .accordion-collapse.collapse.show { background-color: rgba(23, 52, 144, 0.1); }

.modal-start .modal-body { padding-top: 0; padding-bottom: 0; text-align: center; display: flex; align-items: center; justify-content: center; }
.modal-start .robot-frame { height: auto; max-height: unset; filter: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)); }
.modal-start .robot-frame .dialog { background-color: transparent; box-shadow: none; }
.modal-start .robot-frame .dialog .dialog-text { max-height: unset; overflow-y: auto; color: #FFF; }
.modal-start .robot-frame .dialog::before, .modal-start .robot-frame .dialog::after { display: none; }

.guide-img { margin-top: -6vh; position: relative; z-index: 1055; }
.guide-img img { max-height: 70vh; }

.guide-btn { margin: 1rem 0; }

.btn-outline-guide { background-color: #fff; }

.index-btn { display: flex; flex-direction: column-reverse; text-align: center; }
.index-btn i { font-size: 5rem; color: #43a047; margin-bottom: 1rem; }
.index-btn .btn:not(:hover) { color: #43a047; border-color: #43a047; }
.index-btn .btn:not(:hover)::after { border: 1px solid #43a047; }

.index-btn.chat .btn:hover + i { color: #fbc400; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }

.index-btn.practice .btn:hover + i { color: #173490; transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); }

.topic-section { margin-top: 1.5rem; margin-bottom: 3rem; text-align: center; }
.topic-section .card { flex-direction: row; align-items: center; padding: 0; }
.topic-section .card.pe-none { color: #6c757d; border-color: #dee2e6; }
.topic-section .card .card-img { width: 30%; flex: 0 0 30%; overflow: hidden; margin-bottom: auto; }
.topic-section .card .card-img img { width: 100%; height: 100%; }
.topic-section .card .card-body { padding: .5rem 2.5rem .5rem .5rem; flex: 1 1 auto; }
.topic-section .card .card-body .card-title { font-size: 1.25rem; margin-bottom: .25rem; text-align: left; position: relative; }
.topic-section .card .card-body .card-title:last-child { margin-bottom: 0; }
.topic-section .card .task-complete.all { position: absolute; top: -4px; }
.topic-section .card .task-complete.easy, .topic-section .card .task-complete.medium, .topic-section .card .task-complete.hard { flex: 0 0 auto; }
.topic-section .card .task-complete.easy { position: absolute; top: 50%; right: 0; transform: translate(0, calc(-50% - 2rem - .5rem)); }
.topic-section .card .task-complete.medium { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); }
.topic-section .card .task-complete.hard { position: absolute; top: 50%; right: 0; transform: translate(0, calc(-50% + 2rem + .5rem)); }

.topic-title { display: inline-block; position: relative; margin-bottom: 2rem; }
.topic-title span { color: #343a40; position: relative; z-index: 1; }
.topic-title::before, .topic-title::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform-origin: bottom; transform: skewX(-30deg); }
.topic-title::before { border: 2px solid currentColor; top: -.25em; left: -1em; }
.topic-title::after { background-color: currentColor; right: -1em; bottom: -.25em; }

.difficulty-section { margin-bottom: 3rem; }
@media screen and (min-width: 576px) and (max-width: 991px) { .difficulty-section { margin-left: -3rem; margin-right: -3rem; } }
.difficulty-section .difficulty-title { color: #343a40; margin-bottom: 2rem; display: flex; justify-content: center; }
.difficulty-section .difficulty-title span { border-top: 2px solid red; padding: .25rem 1rem 0 1rem; position: relative; }
.difficulty-section .difficulty-title span::before, .difficulty-section .difficulty-title span::after { content: ""; display: block; width: 0; height: calc(100% - .25em + 2px); padding-left: calc((100% - .25em + 2px) * 36/145*10); position: absolute; top: -1px; bottom: 0; background-color: red; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='145' height='36' viewBox='0 0 145 36'%3E %3Cg id='Group_185' data-name='Group 185' transform='translate(-9408 -1018)'%3E %3Crect id='Rectangle_66' data-name='Rectangle 66' width='25' height='36' transform='translate(9408 1018)' fill='%23000000'/%3E %3Crect id='Rectangle_67' data-name='Rectangle 67' width='25' height='36' transform='translate(9448 1018)' fill='%23000000'/%3E %3Crect id='Rectangle_68' data-name='Rectangle 68' width='25' height='36' transform='translate(9488 1018)' fill='%23000000'/%3E %3Crect id='Rectangle_69' data-name='Rectangle 69' width='25' height='36' transform='translate(9528 1018)' fill='%23000000'/%3E %3C/g%3E %3C/svg%3E "); mask-repeat: no-repeat; mask-size: auto 100%; transform-origin: top; }
.difficulty-section .difficulty-title span::before { transform: translateX(calc(-100% - .25em - 1px)) skewX(-30deg); left: 0; mask-position: center right; }
.difficulty-section .difficulty-title span::after { transform: translateX(calc( 100% + .25em + 1px)) skewX(30deg); right: 0; mask-position: center left; }
.difficulty-section .difficulty-title::before, .difficulty-section .difficulty-title::after { content: ""; display: block; flex: 1; border-bottom: 2px solid red; transform-origin: top; }
.difficulty-section .difficulty-title::before { border-right: 2px solid red; transform: skewX(-30deg); }
.difficulty-section .difficulty-title::after { border-left: 2px solid red; transform: skewX(30deg); }
.difficulty-section .difficulty-btn { display: block; position: relative; }
.difficulty-section .difficulty-btn .task-complete { margin-left: 1px; }
.difficulty-section .difficulty-btn .task-complete.easy, .difficulty-section .difficulty-btn .task-complete.medium, .difficulty-section .difficulty-btn .task-complete.hard { width: calc(1.25rem + .5rem*2 - 8px); height: calc(1.25rem + .5rem*2 - 8px); font-size: calc(1.25rem + .5rem*2 - 8px); position: absolute; top: 50%; left: 0; transform: translateY(-50%) scale(1.5); transform-origin: left center; }
.difficulty-section .difficulty-btn .task-complete.easy::after, .difficulty-section .difficulty-btn .task-complete.medium::after, .difficulty-section .difficulty-btn .task-complete.hard::after { display: none; }

@media screen and (min-width: 576px) and (max-width: 991px) { .record-summary { margin-left: -3rem; margin-right: -3rem; } }
.record-summary .record-title { color: #343a40; display: flex; justify-content: center; overflow: hidden; }
.record-summary .record-title > span { border-bottom: 2px solid #d9ecda; padding: 0 1rem .5rem 1rem; position: relative; }
.record-summary .record-title::before, .record-summary .record-title::after { content: ""; display: block; flex: 1; border-top: 2px solid #d9ecda; transform-origin: bottom; }
.record-summary .record-title::before { border-right: 2px solid #d9ecda; transform: skewX(30deg); }
.record-summary .record-title::after { border-left: 2px solid #d9ecda; transform: skewX(-30deg); }
.record-summary .record-val { color: #43a047; font-size: 2.5rem; font-weight: 900; text-align: center; border-bottom: 2px solid #d9ecda; padding: 1rem; margin-bottom: 1rem; }

.end-animate { margin-bottom: 1rem; text-align: center; }
.end-animate .end-title { color: #43a047; font-size: 2rem; }
.end-animate .end-an { display: inline-block; width: 335px; max-width: 75%; position: relative; }
@media screen and (min-width: 768px) { .end-animate .end-an { width: 335px; max-width: 50%; } }
.end-animate .end-an .end-an-robot { width: 100%; height: auto; }
.end-animate .end-an .end-an-ball { border-radius: 100%; border: 1px solid #43a047; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at 90% 90%, rgba(67, 160, 71, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%); position: absolute; top: 50%; left: 0; transform: translate(-25%, -100%); animation: ballMove 2s infinite; animation-delay: 1s; }
.end-animate .end-an .end-an-ball .task-complete { background-color: transparent; border-color: transparent; color: red; width: 5rem; height: 5rem; font-size: 5rem; }
.end-animate .end-an .end-an-ball .task-complete .done { color: red; }

@keyframes ballMove { 0% { transform: translate(-25%, -150%); }
  50% { transform: translate(-25%, -100%); }
  100% { transform: translate(-25%, -150%); } }
@media screen and (min-width: 768px) { .record-summary + .end-animate { margin-top: calc((2rem*1.2 + 0.5rem)*2*-1); } }

.completion-section { text-align: center; margin-top: 2.5rem; margin-bottom: 2.5rem; }
.completion-section .completion-title { font-size: 1.25rem; font-weight: 500; color: #343a40; display: flex; justify-content: center; }
.completion-section .completion-title span { min-width: 5em; padding: .5rem 2rem 0 2rem; position: relative; clip-path: polygon(1.125em 0.2em, calc(100% - 1.125em) 0.2em, 100% calc(100% + 1px), 0% calc(100% + 1px)); background-color: rgba(67, 160, 71, 0.5); }
.completion-section .completion-title::before, .completion-section .completion-title::after { content: ""; display: block; flex: 1; background-color: rgba(67, 160, 71, 0.5); }
.completion-section .completion-title::before { margin-right: -1.125em; clip-path: polygon(0% 0%, calc(100% - 0.2em) 0%, calc(100% - 0.2em - 1.125em) calc(100% - 0.2em), 0% calc(100% - 0.2em)); }
.completion-section .completion-title::after { margin-left: -1.125em; clip-path: polygon(0.2em 0%, 100% 0%, 100% calc(100% - 0.2em), calc(0.2em + 1.125em) calc(100% - 0.2em)); }
.completion-section .completion-content { background-color: rgba(67, 160, 71, 0.5); padding: 1rem; color: #43a047; }
.completion-section .completion-content .completion-bar { display: inline-block; border-radius: 100%; padding: 3px; background: conic-gradient(#43a047 0% calc(var(--completed)/var(--total)*100%), #fff calc(var(--completed)/var(--total)*100%) 100%); transform: scale(1.75); margin: calc(6px + 1rem); }
.completion-section .completion-content .completion-bar .task-complete { border: 3px solid #fff; }

.completion-section .completion-title:nth-of-type(1)::before, .completion-section .completion-title:nth-of-type(1)::after { background-color: transparent; }

.completion-content + .completion-content { margin-top: 0.2em; }

.log-modal { --bs-modal-bg: transparent; color: #43a047; }
.log-modal .modal-header { padding-bottom: 0; }
.log-modal .modal-body { padding-left: 3rem; padding-right: 3rem; padding-bottom: 2rem; }
.log-modal .modal-body::-webkit-scrollbar { width: 10px; background-color: transparent; }
.log-modal .modal-body::-webkit-scrollbar-track { background-color: transparent; }
.log-modal .modal-body::-webkit-scrollbar-thumb { background-color: #43a047; border-radius: 10px; }
.log-modal .log-title { text-align: center; }
.log-modal .log-title .topic-title { margin-bottom: .5rem; }
.log-modal .log-frame { background-color: #fff; border: .325rem solid currentColor; border-radius: 1rem; overflow-y: auto; flex: 1; }
.log-modal .log-frame::-webkit-scrollbar { width: 10px; background-color: transparent; }
.log-modal .log-frame::-webkit-scrollbar-track { background-color: transparent; }
.log-modal .log-frame::-webkit-scrollbar-thumb { border-radius: 10px; background-color: currentColor; border-left: 2px solid #fff; border-right: 2px solid #fff; }
.log-modal .log-list { display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.log-modal .log-list::before { content: ""; display: block; width: 2rem; height: 75%; background-color: currentColor; position: absolute; top: 50%; left: calc(var(--bs-gutter-x)*.5); transform: translate(-100%, calc(-50% + 1rem)); clip-path: polygon(0 1.125em, 100% 0%, 100% 100%, 0 calc(100% - 1.125em)); }
.log-modal .log-list::after { content: ""; display: block; width: 2rem; height: 75%; background-color: currentColor; position: absolute; top: 50%; right: calc(var(--bs-gutter-x)*.5); transform: translate(100%, calc(-50% + 1rem)); clip-path: polygon(0 0, 100% 1.125em, 100% calc(100% - 1.125em), 0 100%); }
.log-modal .log-text { display: flex; flex-direction: column; justify-content: space-between; padding-top: 2.5rem; position: relative; }
.log-modal .log-text .log-frame { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 90%, 2rem calc(90% - 1.125em), 2rem calc(9% + 1.125em), 0% 9%); }
.log-modal .log-text .log-frame::before { content: ""; display: block; width: 2rem; height: calc(81% - .325rem*4.5); background-color: currentColor; position: absolute; top: 50%; left: calc(.325rem + var(--bs-gutter-x)*.5); transform: translate(0, calc(-50% + 1rem)); clip-path: polygon(0 0, 100% 1.125em, 100% calc(100% - 1.125em), 0 100%); }
.log-modal .log-text .log-frame .log-txt { color: #343a40; white-space: pre-wrap; padding: 1rem 1.25rem 1rem 3.25rem; font-size: .9rem; }
.log-modal .log-accordion1 { --bs-accordion-border-color: transparent; }
.log-modal .log-accordion1 .accordion-img { width: 2.5rem; border-radius: 0 500px 500px 500px; overflow: hidden; margin-right: .5rem; }
.log-modal .log-accordion1 .accordion-topic { display: flex; flex-wrap: wrap; flex: 1; flex-direction: column; }
.log-modal .log-accordion1 .accordion-topic .accordion-title { margin-right: .25rem; font-weight: 500; }
.log-modal .log-accordion1 > .accordion-item > .accordion-header > .accordion-button:focus { border-color: transparent; box-shadow: none; }
.log-modal .log-accordion1 > .accordion-item > .accordion-header > .accordion-button:hover { border-color: transparent; box-shadow: none; background-color: rgba(67, 160, 71, 0.25); color: #43a047; }
.log-modal .log-accordion1 > .accordion-item > .accordion-header > .accordion-button:not(.collapsed) { background-color: rgba(67, 160, 71, 0.1); padding-bottom: 0; }
.log-modal .log-accordion1 > .accordion-item > .accordion-header > .accordion-button::after { background-image: none; }
.log-modal .log-accordion1 > .accordion-item > .accordion-collapse.collapse.show { background-color: rgba(67, 160, 71, 0.1); }
.log-modal .log-accordion1 > .accordion-item > .accordion-collapse > .accordion-body { padding-top: 0; padding-left: calc(2.5rem + .5rem); padding-right: 0; }
.log-modal .log-accordion2 { --bs-accordion-bg: transparent; --bs-accordion-border-color: transparent; }
.log-modal .log-accordion2 > .accordion-item > .accordion-header > .accordion-button { background-color: transparent; padding-top: calc(1rem*.75); padding-bottom: calc(1rem*.75); flex-direction: row-reverse; justify-content: flex-end; }
.log-modal .log-accordion2 > .accordion-item > .accordion-header > .accordion-button:focus { border-color: transparent; box-shadow: none; }
.log-modal .log-accordion2 > .accordion-item > .accordion-header > .accordion-button:hover { border-color: transparent; box-shadow: none; color: #43a047; }
.log-modal .log-accordion2 > .accordion-item > .accordion-header > .accordion-button::after { margin-left: 0; margin-right: .25rem; transform: rotate(-90deg); }
.log-modal .log-accordion2 > .accordion-item > .accordion-header > .accordion-button:not(.collapsed) { padding-bottom: 0; }
.log-modal .log-accordion2 > .accordion-item > .accordion-header > .accordion-button:not(.collapsed)::after { transform: rotate(0deg); }
.log-modal .log-accordion2 > .accordion-item > .accordion-collapse > .accordion-body { padding-top: 0; padding-bottom: 0; padding-right: 0; }
.log-modal .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: rgba(0, 0, 0, 0); --bs-list-group-action-hover-color: #43a047; --bs-list-group-action-hover-bg: transparent; --bs-list-group-action-active-color: #43a047; --bs-list-group-action-active-bg: transparent; --bs-list-group-active-color: #43a047; --bs-list-group-active-bg: transparent; --bs-list-group-active-border-color: transparent; }
.log-modal .list-group .list-group-item { padding-left: calc(1.25rem + .25rem); }