@charset "utf-8";
:root, [data-bs-theme=light] {
    /* New Color Palette - Primary Definitions */
    --thistel: #927E8F;
    --error: #C00F0C;
    --mint--10: #E5F4F0;
    --mint--20: #CBE9E1;
    --mint--30: #B0DED3;
    --mint--40: #96D3C4;
    --mint--50: #7CC8B5;
    --mint--60-base: #62BDA6;
    --mint--70: #529E8A;
    --mint--80: #417E6F;
    --mint--90: #315F53;
    --mint--100: #213F37;

    --steel-blue--10: #E8EEF8;
    --steel-blue--20: #D1DDF0;
    --steel-blue--30: #B9CCE9;
    --steel-blue--40: #A2BBE2;
    --steel-blue--50: #8BAADA;
    --steel-blue--60-base: #7499D3;
    --steel-blue--70: #6180B0;
    --steel-blue--80: #4D668D;
    --steel-blue--90: #3A4D6A;
    --steel-blue--100: #273346;

    --thistel--10: #F9F4F8;
    --thistel--20: #F3E9F1;
    --thistel--30: #EDDEEB;
    --thistel--40: #E7D3E4;
    --thistel--50: #E1C8DD;
    --thistel--60: #DBBDD6; /* Matches original --vz-Pink-1 */
    --thistel--70: #B79EB2;
    --thistel--80: #927E8F;
    --thistel--90: #6E5F6B;
    --thistel--100: #493F47;

    --saffron--mango--10: #FDF6E3;
    --saffron--mango--20: #FCEDC6;
    --saffron--mango--30: #FAE4A9;
    --saffron--mango--40: #F8DB8D;
    --saffron--mango--50: #F7D271;
    --saffron--mango--60: #F5C954;
    --saffron--mango--70: #CCA746;
    --saffron--mango--80: #A38638;
    --saffron--mango--90: #7B652A;
    --saffron--mango--100: #52431C;

    --burning--orange--10: #FFE8DE;
    --burning--orange--20: #FED2BC;
    --burning--orange--30: #FEBB9B;
    --burning--orange--40: #FEA47A;
    --burning--orange--50: #FD8E58;
    --burning--orange--60: #FD7737;
    --burning--orange--70: #D3632E;
    --burning--orange--80: #A94F25;
    --burning--orange--90: #7F3C1C;
    --burning--orange--100: #542812;

    --slate--10: #E2E4E6; /* Matches original --vz-Gray-5 (#D9D9D9 is close, E2E4E6 is better match for D9D9D9 than C4C9CD) */
    --slate--20: #C4C9CD; /* Matches original --vz-Gray-1 */
    --slate--30: #A7AEB4; /* Matches original --vz-Gray-2 */
    --slate--40: #8A939B; /* Matches original --vz-Gray-3 */
    --slate--50: #6C7882; /* Original --vz-Gray-4 (#757575) is between slate-40 and slate-50. Using slate-50. */
    --slate--60-base: #4F5D69; /* Matches original --vz-darkTurbid-1 */
    --slate--70: #424E58;
    --slate--80: #353E46;
    --slate--90: #282F35;
    --slate--100: #1A1A1A; /* Original --vz-darkGray30 (#1E1E1E) is very close. */

    --violet---light--1: #FDFCFE;
    --violet---light--2: #FAF8FF;
    --violet---light--3: #F4F0FE;
    --violet---light--4: #EBE4FF;
    --violet---light--5: #E1D9FF;
    --violet---light--6: #D4CAFE;
    --violet---light--7: #C2B5F5;
    --violet---light--8: #AA99EC;
    --violet---light--9: #6E56CF;

    --background--cream: #FBF8EF; /* Matches original --vz-cream */
    --background---white: #FFFFFF;
    --background---black: #000000;
    --background---Light-turbid-1: #E8EEF8;
    --background---Light-turbid-2: #F9FBFF;
    --background---Light-turbid-3: #F7F9FF;
    --background--gray-1: #F1F3F5;
    --background--gray-2: #F9F9F9;
    --background--gray-3: #F2F2F2;
    --text---default---white: #FFFFFF;
    --text---default---black: #1A1F23;
    --text---default---secondary: #424E58;
    --text---disabled: #8A939B;
    --text--tertiary: #6C7882;

    --state--20: #C4C9CD;

    --neutral--1-rgb: 0, 0, 47;

    --background---white-rgb: 255, 255, 255;
    --background---black-rgb: 0, 0, 0;

    /* End of New Color Palette - Primary Definitions */

    --vz-cream: #FBF8EF;
    --vz-cream-rgb: 251, 248, 239;

    --vz-Pink-1: #DBBDD6;
    --vz-Pink-1-rgb: 219, 189, 114;

    --vz-Gray-1: #C4C9CD;
    --vz-Gray-1-rgb: 196, 201, 205;


    --vz-Gray-2: #A7AEB4;
    --vz-Gray-2-rgb: 167, 174, 180;

    --vz-Gray-3: #8A939B;
    --vz-Gray-3-rgb: 138, 147, 155;

    --vz-Gray-4: #757575;
    --vz-Gray-4-rgb: 117, 117, 117;

    --vz-Gray-5: #D9D9D9;
    --vz-Gray-5-rgb: 217, 217, 217;

    --vz-darkGray30: #1E1E1E;
    --vz-darkGray30-rgb: 30, 30, 30;

    --vz-darkGreen: #529E8A;
    --vz-darkGreen-rgb: 158, 138, 1;

    --vz-darkGreen-1: #417E6F;
    --vz-darkGreen-1-rgb: 65, 126, 111;

    --vz-Blue-1: #7499D3;
    --vz-Blue-1-rgb: 116, 153, 211;

    --vz-Blue-2: #E8EEF8;
    --vz-Blue-2-rgb: 232, 238, 248;

    --vz-darkBlue-1: #4D668D;
    --vz-darkBlue-1-rgb: 77, 102, 141;

    --vz-darkTurbid-1: #4F5D69;
    --vz-darkTurbid-1-rgb: 79, 93, 105;

    --vz-bg-opacity-100: 1;
}

.bg-third {
    --vz-bg-opacity: 1;
    background-color: rgba(var(--vz-third-rgb), var(--vz-bg-opacity)) !important
}

.border-third {
    --vz-border-opacity: 1;
    border-color: rgba(var(--vz-third-rgb), var(--vz-border-opacity)) !important
}

.text-primary {
    --vz-text-opacity: 1;
    border-color: rgba(var(--vz-third-rgb), var(--vz-text-opacity)) !important
}

.text-third {
    --vz-text-opacity: 1;
    border-color: rgba(var(--vz-third-rgb), var(--vz-text-opacity)) !important
}

.bg-skin {
    --vz-bg-opacity: 1;
    background-color: rgba(var(--vz-skin-rgb), var(--vz-bg-opacity)) !important
}

.border-skin {
    --vz-border-opacity: 1;
    border-color: rgba(var(--vz-skin-rgb), var(--vz-border-opacity)) !important
}

.text-skin {
    --vz-text-opacity: 1;
    border-color: rgba(var(--vz-skin-rgb), var(--vz-text-opacity)) !important
}


.pt-2px {
    padding-top: 2px;
}

.pt-10px {
    padding-top: 14px;
}


body {
    height: 100%;
    font-family: Noto Sans TC;
    margin: 0px;
    position: relative;
}

.css-landing, .css-course, .css-category {
    min-height: 80%;
}

.css-landing {
    background: linear-gradient(180deg, var(--background--cream) 38%, var(--mint--10) 96%, var(--steel-blue--60-base) 112%);
}

.css-course {
    background: linear-gradient(180deg, var(--background--cream) 50%, var(--background---white) 100%);
}

.css-page {
    min-height: calc(100vh - 125px);
    /*padding-top:90px;*/
    margin-top: 90px;
}

.css-navbar {
    height: 90px;
}

.css-navbar-ul {
    background: var(--background--cream);
}

.css-icbt-logo {
    width: 123px;
}

.css-icbt-text {
    font-size: 2rem;
    line-height: 3rem;
    vertical-align: bottom;
}

.css-icbt-beta {
    /*vertical-align:super;*/
    top: 10px;
    right: -50px;
}

.css-nav-active {
    font-weight: 700 !important;
    background-color: rgba(var(--mint--20), 1); /* CBE9E1 */
    border-radius: 8px;
}

.css-navbar-point-Red {
    width: 6px;
    height: 6px;
    top: 2px;
    right: -5px;

}

.css-nav-user1 {
    display: none;
}

.css-user {
    width: 40px;
    height: 40px;
    border: 0px !important;
    border-radius: 20px;
    background-color: rgba(var(--background--gray-2), 1.00); /* rgba(240,240,240,1.00) -> F0F0F0, close to F9F9F9 */
}

.css-username {
    color: rgba(var(--slate--70), 1); /* rgba(117,117,117,1) */
}

.css-username:hover {
    color: rgba(var(--slate--60-base), 1);
}

.css-nhrilogo {
    height: 56px;
}

/*------------------ start: button definition ------------------*/
.btn-primary {
    --vz-btn-bg: var(--mint--80);
    --vz-btn-border-color: var(--slate--60-base);

    --vz-btn-hover-bg: var(--mint--70);
    --vz-btn-hover-border-color: var(--slate--60-base);

    --vz-btn-focus-shadow-rgb: var(--mint--80);

    --vz-btn-active-bg: var(--mint--90);
    --vz-btn-active-border-color: var(--slate--70);

    --vz-btn-disabled-color: var(--slate--40);
    --vz-btn-disabled-bg: var(--slate--20);
    --vz-btn-disabled-border-color: var(--slate--30);
}

.btn-secondary {
    --vz-btn-bg: var(--steel-blue--80);
    --vz-btn-border-color: var(--slate--60-base);

    --vz-btn-hover-bg: var(--steel-blue--70);
    --vz-btn-hover-border-color: var(--slate--60-base);

    --vz-btn-focus-shadow-rgb: var(--steel-blue--80);

    --vz-btn-active-bg: var(--steel-blue--90);
    --vz-btn-active-border-color: var(--slate--70);

    --vz-btn-disabled-color: var(--slate--40);
    --vz-btn-disabled-bg: var(--slate--20);
    --vz-btn-disabled-border-color: var(--slate--30);
}

.btn-neutral {
    --vz-btn-bg: var(--slate--10);
    --vz-btn-border-color: var(--slate--30);

    --vz-btn-hover-bg: var(--slate--20);
    --vz-btn-hover-border-color: var(--slate--30);

    --vz-btn-focus-shadow-rgb: var(--slate--10);

    --vz-btn-active-bg: var(--slate--20);
    --vz-btn-active-border-color: var(--slate--30);

    --vz-btn-disabled-color: var(--text---disabled);
    --vz-btn-disabled-bg: var(--slate--20);
    --vz-btn-disabled-border-color: var(--slate--30);
}

.btn-subtle {
    --vz-btn-bg: var(--background---white);
    --vz-btn-border-color: var(--mint--60-base);

    --vz-btn-hover-bg: var(--mint--10);
    --vz-btn-hover-border-color: var(--mint--60-base);

    --vz-btn-focus-shadow-rgb: var(--background---white);

    --vz-btn-active-bg: var(--mint--20);
    --vz-btn-active-border-color: var(--mint--30);

    --vz-btn-disabled-color: var(--text---disabled);
    --vz-btn-disabled-bg: var(--slate--20);
    --vz-btn-disabled-border-color: var(--slate--30);
}

.btn-ghost {
    --vz-btn-color: var(--mint--80);
    --vz-btn-bg: transparent;
    --vz-btn-border-color: transparent;

    --vz-btn-hover-color: var(--mint--80);
    --vz-btn-hover-bg: var(--mint--10);
    --vz-btn-hover-border-color: var(--mint--60-base);

    --vz-btn-disabled-color: var(--text---disabled);
    --vz-btn-disabled-bg: transparent;
    --vz-btn-disabled-border-color: transparent;
}

.css-link-text-black {
    color: var(--text---default---black);
    background-color: transparent;
    border: 0px;
}

.css-link-text-black:hover {
    color: var(--slate--60-base);
    background-color: transparent;
    border: 0px;
}

.css-link-text-steelblue80 {
    font-weight: 700;
    color: var(--steel-blue--80);
    text-decoration: underline;
    text-decoration-color: var(--steel-blue--80);
}

.css-link-text-steelblue80:hover {
    color: var(--steel-blue--60-base);
    text-decoration-color: var(--steel-blue--60-base);
}

.css-link-text-blue80 {
    font-weight: 700;
    color: var(--steel-blue--80);
    /*text-decoration: underline;*/
    /*text-decoration-color: var(--steel-blue--80);*/
    border: none;
    background: none;
}

.css-link-text-blue80:hover {
    color: var(--steel-blue--60-base);
    text-decoration-color: var(--steel-blue--60-base);
}

/*------------------ start: button ------------------
.btn-ghost,.btn-ghost,.btn-secondary,.btn-primary, .btn-neutral,.btn-subtle,.btn-saffron-mango-60,.btn-steel-blue-20,.btn-thistel-30,*/
.btn-md, .btn-text-md,
    /*舊設定*/
.css-course-start, .css-curse-play, .css-course-continue, .css-course-finish, .css-card-button-yellow, .css-card-button-blue, .css-card-button-pink {
    min-width: 128px;
    height: 42px;
    font-size: 0.875rem;
    line-height: 2.5rem;
    text-align: center;
    border-radius: 30px;
}


.btn-sm, .btn-text-sm, .btn-border-mint-60-s,
    /*舊設定有新設定，若修改完可刪*/
.css-hero-submit, .css-course-unlock {
    max-width: 116px;
    min-width: 60px;
    height: 42px;
    font-size: 0.875rem;
    text-align: center;
    line-height: 2.5rem;
    border-radius: 16px;
    padding-left: 16px;
    padding-right: 16px;
}

.btn-sm, .btn-md, .btn-text-sm:hover, .btn-text-md:hover,
.btn-border-mint-60-s,
    /*舊設定有新設定，若修改完可刪*/
.css-course-start, .css-curse-play, .css-course-continue, .css-course-finish, .css-card-button-yellow, .css-card-button-blue, .css-card-button-pink {
    box-shadow: 0 2px 10px 0 rgba(var(--background---black-rgb), 0.15);
}

.btn-primary,
    /*舊設定*/
.css-course-continue {
    color: var(--text---default---white);
    background-color: var(--mint--80);
    border: 1px solid var(--slate--60-base);
}

.btn-primary:hover,
    /*舊設定*/
.css-course-continue:hover {
    background-color: var(--mint--70);
}

.btn-secondary,
    /*舊設定*/
.css-course-start, .css-practice-start {
    color: var(--text---default---white);
    background-color: var(--steel-blue--80);
    border: 1px solid var(--slate--60-base);
}

.btn-secondary:hover,
    /*舊設定*/
.css-course-start:hover, .css-practice-start:hover {
    background-color: var(--steel-blue--70);
    border: 1px solid var(--slate--60-base);
}

.btn-neutral {
    color: var(--text---default---white);
    background-color: var(--slate--10);
    border: 1px solid var(--slate--30);
}

.btn-neutral:hover {
    background-color: var(--slate--30);
}

.btn-subtle,
    /*舊設定有新設定，若修改完可刪*/
.css-hero-submit, .css-curse-play {
    color: var(--text---default---black);
    background-color: var(--background---white);
    border: 1px solid var(--mint--60-base);
}

.btn-subtle:hover,
    /*舊設定有新設定，若修改完可刪*/
.css-hero-submit:hover, .css-curse-play:hover {
    background-color: var(--mint--10);
}

.btn-ghost,
    /*舊設定有新設定，若修改完可刪*/
.css-course-finish {
    color: var(--mint--70);
    background-color: transparent;
    border: 0px;
}

.btn-ghost:hover,
    /*舊設定有新設定，若修改完可刪*/
.css-course-finish:hover {
    color: var(--text---disabled);
    background-color: transparent;
    border: 0;
}

.btn-ghost:disabled,
    /*舊設定有新設定，若修改完可刪*/
.css-course-finish:disabled {
    color: var(--mint--70);
    background-color: transparent;
    border: 0px;
}

.btn-saffron-mango-60,
    /*舊設定有新設定，若修改完可刪*/
.css-card-button-yellow {
    color: var(--text---default---black);
    background-color: var(--saffron--mango--60);
    border: 1px solid var(--saffron--mango--80);
}

.btn-saffron-mango-60:hover,
    /*舊設定有新設定，若修改完可刪*/
.css-card-button-yellow:hover {
    background-color: var(--saffron--mango--50);
}

.btn-steel-blue-20,
    /*舊設定有新設定，若修改完可刪*/
.css-card-button-blue {
    color: var(--text---default---black);
    background-color: var(--steel-blue--20);
    border: 1px solid var(--slate--30);
}

.btn-steel-blue-20:hover,
    /*舊設定有新設定，若修改完可刪*/
.css-card-button-blue:hover {
    background-color: var(--steel-blue--10);
}

.btn-thistel-30,
    /*舊設定有新設定，若修改完可刪*/
.css-card-button-pink {
    color: var(--text---default---black);
    background-color: var(--thistel--30);
    border: 1px solid var(--slate--30);
}

.btn-thistel-30:hover,
    /*舊設定有新設定，若修改完可刪*/
.css-card-button-pink:hover {
    background-color: var(--thistel--10);
}


/*----start: 文字按鈕----*/
.btn-text-saffron-mango-70 {
    color: var(--saffron--mango--70);
    background-color: transparent;
    border: 0px;
}

.btn-text-saffron-mango-70:hover {
    color: var(--saffron--mango--70);
    background-color: var(--background---white);
}

.btn-sm:hover, .btn-md:hover,
.btn-text-saffron-mango-70:hover,
    /*舊設定有新設定，若修改完可刪*/
.css-course-finish:hover, .btn-text-mint-70:hover {
    box-shadow: 0 2px 10px 0 rgba(var(--background---black-rgb), 0.15);
}

.btn-text-disabled, .btn-text-saffron-mango-70:disabled {
    color: var(--text---disabled);
    background-color: transparent;
    border: 0px;
}

.btn-disabled, .btn-secondary:disabled, .btn-primary:disabled, .btn-neutral:disabled, .btn-subtle:disabled, .btn-mint-80:disabled, .btn-saffron-mango-60:disabled, .btn-steel-blue-20:disabled, .btn-thistel-30:disabled,
    /*舊設定有新設定，若修改完可刪*/
.css-course-unlock, .css-card-button-blue:disabled, .css-card-button-pink:disabled {
    color: var(--text---disabled);
    background-color: var(--slate--20);
    border: 1px solid var(--slate--30);
}


.css-category-course-lessonbutton {
    min-width: 335px;
    min-height: 85px;
    text-align: left;
    background: linear-gradient(90deg, var(--background---Light-turbid-1) 0%, var(--background--gray-3) 100%);
    border: 1px solid var(--steel-blue--60-base);
    border-radius: 16px;
    padding: 20px 24px 20px 26px;
    align-items: center;
}

.css-category-course-lessonbutton-title-1 {
    font-size: 1rem;
    color: var(--text---default---secondary);
    white-space: nowrap;
    word-break: keep-all
}

.css-category-course-lessonbutton-title-2 {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: left;
    line-height: 2.2rem;
    word-wrap: break-word;
}

.css-category-course-lessonbutton:hover {
    background: linear-gradient(90deg, var(--background---Light-turbid-2) 0%, var(--background--gray-3) 100%);
    border: 1px solid var(--steel-blue--60-base);
}

.css-card-btn-mR {
    margin-right: 8px;
}


.css-curse-play {
    width: 185px;
}

/*------------------ end: button ------------------*/


.nav-tabs {
    --vz-nav-tabs-border-width: var(--vz-border-width);
    --vz-nav-tabs-border-color: var(--steel-blue--80);
    --vz-nav-tabs-border-radius: 8px;
    --vz-nav-tabs-link-hover-border-color: var(--vz-secondary-bg) var(--vz-secondary-bg) var(--vz-border-color);
    --vz-nav-tabs-link-active-color: var(--vz-emphasis-color);
    --vz-nav-tabs-link-active-bg: var(--steel-blue--20);
    --vz-nav-tabs-link-active-border-color: var(--steel-blue--70) var(--steel-blue--70) var(--steel-blue--20);
    border-bottom: var(--vz-nav-tabs-border-width) solid var(--vz-nav-tabs-border-color)
}


/*----------*/

.pt-2px {
    padding-top: 2px;
}

.pt-10px {
    padding-top: 14px;
}


body {
    height: 100%;
    font-family: Noto Sans TC;
    margin: 0px;
    position: relative;
}

.css-landing, .css-course, .css-category {
    min-height: 100%;
}

.css-landing {
    background: linear-gradient(180deg, var(--background--cream) 38%, var(--mint--10) 96%, var(--steel-blue--60-base) 112%);
}

.css-course {
    background: linear-gradient(180deg, var(--background--cream) 50%, var(--background---white) 100%);
}

.css-page {
    min-height: calc(100vh - 125px);
    /*padding-top:90px;*/
    margin-top: 90px;
}

.css-page1 {
    min-height: calc(100vh - 165px);
    /*padding-top:90px;*/
    margin-top: 90px;
}

.css-navbar {
    height: 90px;
}

.css-navbar-ul {
    background: var(--background--cream);
}

.css-icbt-logo {
    width: 123px;
}

.css-icbt-beta {
    /*vertical-align:super;*/
    top: 10px;
    right: -50px;
}

.css-nav-active {
    font-weight: 700 !important;
    background-color: rgba(var(--mint--20), 1); /* CBE9E1 */
    border-radius: 8px;
}

.css-navbar-point-Red {
    width: 6px;
    height: 6px;
    top: 2px;
    right: -5px;

}

.css-nav-user1 {
    display: none;
}

.css-user {
    width: 40px;
    height: 40px;
    border: 0px !important;
    border-radius: 20px;
    background-color: rgba(var(--background--gray-2), 1.00); /* rgba(240,240,240,1.00) -> F0F0F0, close to F9F9F9 */
}

.css-username {
    color: rgba(var(--slate--70), 1); /* rgba(117,117,117,1) */
}

.css-username:hover {
    color: rgba(var(--slate--60-base), 1);
}

.css-nhrilogo {
    height: 56px;
}

.navbar-landing .navbar-nav .nav-item .nav-link.active, .navbar-landing .navbar-nav .nav-item .nav-link:focus, .navbar-landing .navbar-nav .nav-item .nav-link:hover {
    border-radius: 16px;
}

/*------------------ start: index hero info ------------------*/
.css-hero-container {
    padding: 48px;
    /*margin-top: 86px;
    margin-bottom: 16px;*/
}

.css-hero-img {
    margin: auto;
    display: block;
}

.css-hero-title {
    display: block;
}

.css-hero-title-1 {
    display: none;
}

.css-hero-title, .css-hero-title-1 {
    font-size: 2.95rem;
    color: var(--slate--60-base); /* #4F5D69 */
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    margin: 60px auto 18px auto;
}

.css-hero-text {
    font-size: 1.125rem;
    line-height: 2rem;
    text-align: center;
}

.css-hero-right {
    width: 300px;
    height: 275px;
    background-color: rgba(var(--background---white), 0.2);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 0 20px 0 rgba(var(--background---black-rgb), 0.15);
}

.css-hero-right-subheading {
    color: var(--text---default---black); /* #1A1F23 */
    font-weight: 700;
}

.css-hero-right-scoretable {
    width: 240px;
    height: 105px;
}

.css-hero-right-bar {
    width: 240px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--mint--30); /* #B0DED3 */
}

.css-hero-knob {
    top: -4px;
    transform: translate(-50%);
}

.css-hero-submit, .css-curse-play, .css-course-continue, .css-course-start {
    height: 42px;
    font-size: 0.875rem;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
}

.css-hero-submit, .css-curse-play {
    background-color: rgba(var(--background---white), 0.2);
    border: 1px solid var(--mint--60-base); /* #62BDA6 */
    box-shadow: 0 2px 10px 0 rgba(var(--background---black), 0.15);
}

.css-curse-play, .css-course-continue, .css-course-start {
    border-radius: 20px;
}

.css-hero-submit {
    width: 60px;
    border-radius: 16px;
}


.css-hero-barchart {
    font-size: 1rem;
    width: 111px;
    height: 32px;
    text-align: center;
}

.css-hero-barchart-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.form-range::-webkit-slider-runnable-track {
    background-color: var(--mint--30);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--mint--80);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--mint--70);
}

.mood-slider-wrapper {
    width: 100%;
    position: relative;
    padding: 0;
}

.mood-labels {
    margin-bottom: 8px;
    font-size: 16px;
    width: 100%;
}

.mood-labels > div {
    text-align: center;
}

/* 自訂每個標籤的寬度 */
.label-1 {
    width: 14%;
}

.label-2 {
    width: 26%;
}

.label-3 {
    width: 23%;
}

.label-4 {
    width: 22%;
}

.label-5 {
    width: 15%;
}

/*------------------ end: index hero info ------------------*/

/*------------------ start: index card info ------------------*/
.css-cards-padding-x {
    padding-right: 24px;
    padding-left: 24px;
}

.css-card-border-color-yellow, .css-card-border-color-blue, .css-card-border-color-pink {
    background-color: rgba(var(--background---white), 0.4);
    border-top: 10px solid !important;
}

.css-card-border-color-yellow {
    border-top-color: var(--saffron--mango--60) !important;
}

.css-card-border-color-blue {
    border-top-color: var(--steel-blue--60-base) !important;
}

.css-card-border-color-pink {
    border-top-color: var(--thistel--60) !important;
}

.css-icon-48 {
    width: 48px;
}

.css-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 24px;
    color: var(--text---default---black);
    padding-left: 24px;
}

.css-card-text {
    font-size: 1rem;
    line-height: 1.75rem;
    font-family: Noto Sans TC;
    color: var(--text---default---secondary);
    height: 120px;
}

/*------------------ end: index card info ------------------*/

/*------------------ start: index card button ------------------*/
.css-card-link-yellow {
    font-size: 0.875rem;
    color: var(--saffron--mango--70); /* #CCA746 */
    margin-right: 8px;
    padding: 12px 18px;
    text-decoration: none;
}

.css-card-link-yellow:hover {
    text-decoration: underline;
}

.css-card-button-yellow, .css-card-button-blue, .css-card-button-pink {
    height: 42px;
    color: var(--text---default---black); /* #1A1F23 */
    font-size: 0.875rem;
    line-height: 16px;
    padding: 12px 36px;
    border-radius: 20px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
}

.css-card-button-yellow {
    background-color: var(--saffron--mango--60); /* #F5C954 */
    border: 1px solid var(--saffron--mango--80); /* #A38638 */
}

.css-card-button-blue {
    background-color: var(--steel-blue--20); /* #D1DDF0 */
    border: 1px solid var(--slate--30); /* #A7AEB4 */
}

.css-card-button-pink {
    background-color: var(--thistel--30); /* #EDDEEB */
    border: 1px solid var(--slate--30); /* #A7AEB4 */
}

.css-record-button {
    width: 120px;
    border-radius: 20px;
}

.css-record-complete-button {
    color: var(--text---default---black);
}

/*------------------ end: index card button ------------------*/


/*------------------ start: icbt mood ------------------*/
.icbt-mood, .icbt-moodrecords {
    width: 100%;
    height: 100%;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
}

.icbt-close {
    width: 30px;
    height: 30px;
    font-size: 30pt;
    line-height: 30px;
    border-radius: 15px;
    color: rgba(0, 0, 0, 0.8);
    background: rgba(var(--background---white), 1.00);
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: center;
    z-index: 23;
}

.icbt-closebar {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 40px;
    right: calc((100vw - 88% - 30px) / 2 - 4px);
}

.icbt-close:hover {
    color: rgba(var(--text---default---white), 1.00);
    background: rgba(var(--background---black), 1);
}

.divfull {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0px;
    right: -120px;
    z-index: 21;
}

/*------------------ end: icbt mood ------------------*/


/*------------------ start: course --------------*/
.css-course-titleBg, .css-practice-titleBg, .css-video-titleBg {
    width: 1028px;
    height: 409px;
    background-repeat: no-repeat;
    background-size: cover;
}

.css-course-titleBg, .css-practice-titleBg, .css-video-titleBg {
    padding: 31px 36px;
}

.css-course-titleBg {
    background-image: url("../../images/icbt/content-title-course.svg");
}

.css-course-title, .css-course-description-title, .css-practice-title, .css-video-title, .css-category-course-title, .css-category-practice-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--slate--100);
}

.css-course-title, .css-practice-title, .css-video-title {
    padding: 10px;
}

.css-course-item {
    padding: 35px 10px;
}

.css-course-item-li::marker {
    font-size: 10px;
}

.css-course-item-li {
    font-size: 1.125rem;
    line-height: 2rem;
}

.css-curse-play {
    width: 185px;
}


.css-course-section, .css-practice-section, .css-video-section {
    width: 1020px;
    font-size: 1.125rem;
    border-radius: 0 0 12px 12px;
    padding: 12px 12px 0px 12px;
    margin: 25px auto;
}

.css-course-section {
    border-top: 5px solid var(--mint--70);
    border-right: 1px solid var(--mint--70);
    border-bottom: 1px solid var(--mint--70);
    border-left: 1px solid var(--mint--70);
}

.css-course-section-title, .css-practice-section-title {
    font-weight: 700;
    background-color: var(--background--cream);
    padding: 12px;
}

.css-course-section-title {
    border-bottom: 1px solid var(--mint--70);
}

.css-course-text {
    padding-top: 5px;
}

.css-course-btn-x {
    text-align: right;
    padding-right: 2%;
}

.css-course-description-titleBg {
    width: 100%;
    height: 206px;
    background-image: url("../../images/icbt/content-title-course-description.svg");
    background-repeat: no-repeat;
    background-size: cover;
}

.css-course-description-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--slate--100);
}

.css-section-course-description {
    width: 100%;
    max-width: 995px;
}

/*------------------ end: course --------------*/

/*------------------ start: lesson --------------*/
.css-lesson-section {
    border: none;
    box-shadow: 0 0 20px 0 rgba(var(--background---black-rgb), 0.15);
    width: 100%;
    font-size: 1.125rem;
    padding: 12px 12px 0px 12px;
    margin: 25px auto;
}

.css-lesson-title {
    color: var(--text---default---black)
}

.css-lesson-subtitle {
    color: var(--text---default---secondary);
}

.css-lesson-ul {
    color: var(--text---default---secondary);
    font-size: 16px;
    font-weight: bold;
}

.css-lesson-check-input {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    cursor: pointer;
    vertical-align: middle;
}


/*------------------ end: lesson --------------*/


/*------------------ start: practice --------------*/
.css-practice-titleBg {
    background-image: url("../../images/icbt/content-title-practice.svg");
}

.css-practice-title, .css-video-title {
    margin-top: 120px;
}

.css-practice-section, .css-video-section {
    border-top: 5px solid var(--steel-blue--60-base);
    border-right: 1px solid var(--steel-blue--60-base);
    border-bottom: 1px solid var(--steel-blue--60-base);
    border-left: 1px solid var(--steel-blue--60-base);
}

.css-practice-section-title {
    border-bottom: 1px solid var(--steel-blue--60-base);
}

.css-practice-text, .css-video-text {
    line-height: 32px;
}

.css-practice-start {
    width: 88px;
    height: 42px;
    font-size: 0.875rem;
    line-height: 40px;
    text-align: center;
    color: var(--text---default---white);
    background-color: var(--steel-blue--80);
    border: 1px solid var(--slate--60-base);
    border-radius: 20px;
    margin: 0 auto;
}

/*------------------ end: practice --------------*/


/*------------------ start: video --------------*/
.css-video-titleBg {
    background-image: url("../../images/icbt/content-title-video.svg");
}

.css-video-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    background-color: var(--background--cream);
    border-bottom: 1px solid var(--thistel--60);
    padding: 12px 12px 25px 12px;
    margin-bottom: 30px;
}

.css-video-item {
    width: 240px;
    height: 308px;
    background-color: var(--steel-blue--10);
    border: 1px solid var(--slate--10);
    border-radius: 20px;
    padding: 20px 16px;
}

.css-video-item2 {
    width: 240px;
    height: 236px;
    background-color: var(--steel-blue--10);
    border: 1px solid var(--slate--10);
    border-radius: 20px;
    padding: 20px 16px;
    cursor: pointer;
}

.css-video-play-img {
    width: 208px;
}

.css-video-item-text {
    color: var(--text---default---black);
    padding: 8px 0px 8px 4px;
}

.css-video-item-time {
    font-size: 0.875rem;
    color: var(--text---default---secondary); /* #757575 */
    padding: 0px 0px 20px 5px;
}

/*------------------ end: video --------------*/

/*------------------ start: questionaire --------------*/
.css-questionaire-section {
    font-size: 1.125rem;
}

.css-questionaire-card {
    font-size: 1rem;
    background-color: var(--background--cream);
    border-top: 5px solid var(--mint--60-base);
    border-right: 1px solid var(--mint--60-base);
    border-bottom: 1px solid var(--mint--60-base);
    border-left: 1px solid var(--mint--60-base);
}

/*------------------ end: questionaire --------------*/


/*------------------ start: category - course --------------*/
.css-category {
    background-color: var(--background---white);
}

.css-category-course-title {
    font-size: 2.25rem;
}

.css-category-course-titleBg, .css-category-practice-titleBg {
    width: 100%;
    max-width: 1200px;
    height: 383px;
    background-repeat: no-repeat;
    background-size: cover;
    /*padding:67px 0 0 0;*/
    align-content: center;
}

.css-category-course-titleBg {
    background-image: url("../../images/icbt/category-title-course.svg");
}

.css-category-course-title-Area, .css-category-practice-title-Area {
    background-color: rgba(var(--background---white-rgb), 0.3);
    box-shadow: 0 0 20px rgba(var(--background---black-rgb), 0.1);
    border-radius: 8px;
    padding: 20px 0 20px 20px;
    margin: 0 auto;
}

.css-category-course-title-Area {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 0 auto;
}

.css-category-practice-title-Area {
    width: 70%;
    padding: 20px 0 20px 20px;
    margin: 0 auto;
}

.css-category-course-lession, .css-category-practice-lession,
.css-category-course-text, .css-category-practice-text {
    color: var(--text---default---secondary); /* #424E58 */
}

.css-category-course-lession, .css-category-practice-lession {
    font-size: 1.125rem;
    padding: 5px 0 2px 0;
}

.css-category-course-text, .css-category-practice-text {
    font-size: 1rem;
    line-height: 1.65rem;
    padding: 5px 0 0 0; /* "adding" was a typo */
}

.css-category-course-text-ul {
    padding: 0;
    margin: 0 0 0 20px;
}

.css-category-course-text-li {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75rem;
    padding: 0 0 0 0px;
}

.css-category-course-text-li::marker, .css-category-practice-text-li::marker {
    font-size: 10px !important;
    font-weight: 400 !important;
    padding: 0 0 0 0;
}


.css-category-course-list {
    height: 100%;
    font-size: 1.125rem;
    line-height: 1.7rem;
    border-radius: 8px;
    background-color: var(--background--gray-1); /* #F1F3F5 */
    padding: 15px 15px 15px 15px;
}

.css-category-course-list-1 {
    color: var(--background---black);
    border-radius: 4px;
    padding: 0px 5px;
}

.css-category-course-list a.active .css-category-course-list-1 {
    color: var(--background---black);
    background-color: var(--slate--10);
}

.css-category-course-list-1:hover {
    color: var(--background---black);
    background-color: var(--slate--10);
}

.css-category-list-btn-up, .css-category-list-btn-down {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px 35px;
    border: 0px;
    position: absolute;
    top: 15px;
    right: 6%;
    padding: 27px 5px 5px 5px;
}

.css-category-list-btn-up {
    background-image: url("../../images/icbt/up-gray.svg");
}

.css-category-list-btn-down {
    background-image: url("../../images/icbt/down-gray.svg");
}

.css-category-list-button {
    width: 40px;
    height: 40px;
    background-image: url("../../images/icbt/down-gray.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px 35px;
    border: 0px;
    position: absolute;
    top: 10px;
    right: 55px;
    padding: 27px 5px 5px 5px;
    display: none;
}

.css-category-course-section {
    font-size: 1.125rem;
    line-height: 2rem;
    padding: 0px 10px 0px 30px;
}

.title-all /*,.title-1, .title-2, .title-3, .title-4 , .title-5*/
{
    top: -100px;
}

.css-category-course-section-title, .css-category-practice-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    padding: 30px 0 20px 0;
}

.css-category-course-film {
    width: 95%;
    border-radius: 8px;
}

.css-category-course-content-ul-A, .css-course-description-content-ul {
    list-style-type: disc;
    padding: 0 0 0 22px;
}

.css-category-course-content-ul-A li::marker, .css-course-description-content-ul li::marker {
    font-size: 12px;
}

.css-category-course-content-ol-A, .css-course-descript-content-ol {
    padding: 0 0 0 22px;
}

.css-course-descript-content-ol li::marker {
    font-weight: 600;
}

.css-cate-course-lesson1-05, .css-cate-course-lesson1-06, .css-cate-course-lesson1-07, .css-cate-course-lesson1-08 {
    width: 80px;
}


.css-category-course-pointline {
    background-color: var(--background--cream);
    border: 1px solid rgba(var(--neutral--1-rgb), 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.css-category-course-point {
    min-height: 80px;
    background-color: var(--saffron--mango--30);
}

.css-category-course-point-title, .css-category-course-point-green-title {
    width: calc(100% - 80px);
    line-height: 1.6rem;
    align-content: center;
}

.css-category-course-pointline-green {
    background-color: var(--mint--10);
    border: 1px solid rgba(var(--neutral--1-rgb), 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.css-category-course-point-green {
    background-color: var(--mint--20);
}

.css-category-course-pic-1, .css-category-course-pic-2, .css-category-course-pic-4 {
    width: 80px;
    height: auto;
    min-height: 80px;
    background-position: center;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    border-radius: 0px 99px 99px 0;
}

.css-category-course-pic-1 {
    background-color: var(--saffron--mango--60);
    background-image: url("../../images/icbt/category-course-lesson-point-bulb1.webp");
}

.css-category-course-pic-2 {
    background-color: var(--mint--60-base);
    background-image: url("../../images/icbt/category-course-lesson-point-checkbox.webp");
}

.css-category-course-pointline-blue {
    border: 1px solid var(--steel-blue--50);
    border-radius: 8px;
    overflow: hidden;
}

.css-category-course-point-blue {
    background-color: var(--steel-blue--10); /* #FAE4A9 */
}

.css-category-course-point-blue-title {
    line-height: 1.6rem;
    align-content: center;
}

.css-category-course-pic-3 {
    width: 120px;
    height: 80px;
    background-position: center;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    border-radius: 0px 40px 40px 0;
}

.css-category-course-pic-3 {
    background-color: var(--steel-blue--30);
    background-image: url("../../images/icbt/category-course-lesson-point-bulb2.webp");
}

.css-category-course-pointL, .css-category-course-pointL-txt {
    background-color: var(--steel-blue--10);
}

.css-category-course-pointR, .css-category-course-pointR-txt {
    background-color: var(--steel-blue--20);
}

.css-category-course-pointL, .css-category-course-pointR {
    font-size: 1.5rem;
    font-weight: 700;
}

.css-category-course-pointL, .css-category-course-pointL-txt, .css-category-course-pointR, .css-category-course-pointR-txt {
    height: 100%;
    border-radius: 8px;
    padding: 10px;
}

.css-category-course-pointL-img, .css-category-course-pointR-img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}


.checkbox-item {
    display: flex; /* 讓 checkbox 和 label 水平排列 */
    align-items: flex-start; /* 頂部對齊，如果文字多行，checkbox 不會跑到中間 */
    margin-bottom: 15px; /* 項目之間的間距 */
    position: relative; /* 為了 ::before 和 ::after 的定位 */
}

/* 1. 隱藏原生的 checkbox */
.custom-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* 2. 設計 label 作為點擊區域，並為自訂 checkbox 預留空間 */
.checkbox-item label {
    line-height: 1.5;
    cursor: pointer;
    position: relative;
    padding-left: 35px; /*  重要：為自訂 checkbox 預留空間 */
    user-select: none; /* 防止選取文字 */
}

/* 3. 創建自訂 checkbox 的外觀 (未選中狀態) - 使用 ::before 偽元素 */
.checkbox-item label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px; /* 微調垂直位置，使其與文字對齊 */
    width: 24px; /* 自訂 checkbox 的寬度 */
    height: 24px; /* 自訂 checkbox 的高度 */
    border: 2px solid var(--mint--60-base); /* 綠色邊框 */
    background-color: transparent; /* 透明背景 */
    border-radius: 4px; /* 輕微圓角，根據圖示調整 */
    transition: all 0.2s ease-in-out; /* 過渡效果 */
}

/* 4. 創建選中時的勾勾 - 使用 ::after 偽元素 */
.custom-checkbox:checked + label::after {
    content: "";
    position: absolute;
    left: 9px; /* 調整勾勾在框內的位置 */
    top: 4px; /* 調整勾勾在框內的位置 */
    width: 8px;
    height: 16px;
    border: solid var(--mint--60-base); /* 勾勾的顏色 */
    border-width: 0 2px 2px 0; /* 創建 L 形狀的勾勾 */
    transform: rotate(45deg); /* 旋轉成勾勾 */
}

.css-category-course-pointline-pink {
    background-color: var(--thistel--10); /* #FBF8EF */
    border: 1px solid rgba(var(--neutral--1-rgb), 0.15);
    border-radius: 8px;
    overflow: hidden;
}

.css-category-course-point-pink {
    min-height: 80px;
    background-color: var(--thistel--20); /* #FAE4A9 */
}

.css-category-course-point-pink-title {
    width: calc(100% - 135px);
    line-height: 1.6rem;
    align-content: center;
    align-items: center;
}

.css-category-course-pic-4 {
    background-color: var(--thistel--60);
    background-image: url("../../images/icbt/category-course-lesson-point-exemple.webp");
}

.css-category-course-number {
    width: 50px;
}

.css-line-marking {
    /* height:0px;
     background-color:var(--burning--orange--20);
     border-radius: 10px;
     overflow: visible;
     margin-top: 20px;
     padding-top:8px;
     display: inline-block;*/
}

.css-line-marking-txt {
    margi: 0px auto;
    text-decoration: underline;
    text-decoration-thickness: 8px;
    text-underline-offset: -2px;
    text-decoration-color: var(--burning--orange--20);
}

.css-category-course-sportline {
    border: 1px solid var(--saffron--mango--70);
    border-radius: 8px;
    overflow: hidden;
}

.css-category-course-sport {
    background-color: var(--saffron--mango--10);
}

.css-category-course-sport-no {
    width: 72px;
    height: auto;
    min-height: 56px;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--saffron--mango--30);
    clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 50%, 100% 100%, 0% 100%); /*右側的斜切效果 */
}

.css-category-course-sport-title {
    line-height: 1.5rem;
}

.category-course-lesson2-03 {
    width: 100%;
    max-width: 462px;
}

.category-course-lesson2-06, .category-course-lesson2-07 {
    width: 100%;
    max-width: 360px;
}

.category-course-lesson2-08 img {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

.category-course-lesson2-12 {
    width: 100%;
    max-width: 790px;
}


.css-category-course-toplineA {
    font-size: 1.125rem;
    border-top: 1px solid var(--saffron--mango--40); /* #F8DB8D */
}

.css-category-course-step {
    width: 94px !important;
    height: auto;
    min-height: 60px;
    text-align: center;
    flex-wrap: nowrap;
    border-radius: 0 0 40px 0;
    background-color: var(--saffron--mango--40); /* #F8DB8D */
}

.css-category-course-step-title {
    width: calc(100% - 94px);
    line-height: 1.6rem;
    align-content: center;
}

.css-category-course-no {
    border: 1px solid var(--steel-blue--30); /* #B9CCE9 */
    border-radius: 8px;
}

.css-category-course-toplineB, .css-category-course-toplineC {
    background-color: var(--steel-blue--10); /* #E8EEF8 */
}

.css-category-course-toplineB {
    border-radius: 8px 8px 0 0;
}

.css-category-course-toplineC {
    border-radius: 0px 0px 0 0;
}

.css-category-course-no1, .css-category-course-no2, .css-category-course-no3 {
    width: 100px !important;
    height: auto;
    text-align: center;
    background-color: var(--steel-blue--30); /* #B9CCE9 */
    align-content: center;
}

.css-category-course-no1 {
    border-radius: 8px 999px 0 0;
}

.css-category-course-no2 {
    border-radius: 0 0 0 0;
}

.css-category-course-no3 {
    border-radius: 0 0 99px 0;
}

.css-category-course-method {
    width: calc(100% - 150px);
    line-height: 1.6rem;
    align-content: center;
}

.css-category-course-updown {
    width: 50px;
}

.css-category-course-lesson-half-Lblue {
    background-color: var(--steel-blue--10); /* #E8EEF8 */
    border-radius: 8px 0 0 8px;
}

.css-category-course-lesson-half-Rgray {
    background-color: var(--slate--10); /* #E2E4E6 */
    border-radius: 0 8px 8px 0;
}

.css-category-course-lesson1-pic-3 {
    background-image: url("../../images/icbt/category-course-lesson1-03.png");
    background-size: 147px 203px;
    background-position: top 50% right 10px;
    background-repeat: no-repeat;
}

.css-category-course-lesson1-pic-4, .css-category-course-lesson2-pic-5 {
    background-image: url("../../images/icbt/category-course-lesson1-04.png");
    background-size: 135px 205px;
    background-position: top 50% right 10px;
    background-repeat: no-repeat;
}

.category-course-lesson-roundfigureA {
    width: 123px;
}

.category-course-lesson-roundfigureB {
    width: 155px;
}

.css-category-course-lesson2-pic-4 {
    background-image: url("../../images/icbt/category-course-lesson2-04.webp");
    background-size: 133px 194px;
    background-position: top 50% right 10px;
    background-repeat: no-repeat;
}

.css-category-course-lesson2-pic-13 {
    background-color: var(--slate--10); /* #E8EEF8 */
    background-image: url("../../images/icbt/category-course-lesson2-13.webp");
    background-size: 133px 211px;
    background-position: top 50% right 8px;
    background-repeat: no-repeat;
}

.css-category-course-lesson2-pic-5 {
    background-color: var(--slate--10); /* #E2E4E6 */
    background-image: url("../../images/icbt/category-course-lesson2-05.webp");
    background-size: 135px 240px;
    background-position: right;
    background-repeat: no-repeat;
    border-radius: 0 8px 8px 0;
}

.css-category-course-exemple {
    padding: 30px 30px 30px 30px;
}

.css-category-course-exemple-ol {
    list-style: none;
    counter-reset: my-counter;
    padding-left: 0px;
}

.css-category-course-exemple-ol li:nth-child(odd) {
    counter-increment: my-counter;
    text-indent: 0em;
}

.css-category-course-exemple-ol li:nth-child(odd)::before {
    content: counter(my-counter) ". ";
}

.css-category-course-exemple-ol li {
    border-bottom: 1px solid var(--state--20);
    text-indent: 0em;
    padding: 10px 0px 10px 0px;
    margin-top: 0;
}

.css-category-course-exemple-ol li:nth-last-child(-n+2) {
    border-bottom: 0px solid var(--state--20);
    padding: 10px 0px 0px 0px;
}

.css-category-course-lesson3-01 {
    width: 100%;
    max-width: 400px;
    margin-top: 10px;
}

.css-category-course-lesson3-02 {
    width: 100%;
    max-width: 160px;
}

.css-category-course-lesson3-03, .css-category-course-lesson3-04 {
    width: 100%;
    max-width: 120px;
}

.css-category-course-lesson4-01 {
    width: 100%;
    max-width: 450px;
    margin-top: 10px;
}

.css-category-course-lesson5-05 {
    width: 100%;
    max-width: 500px;
}

.css-bg-gray-2 {
    background-color: var(--background--gray-2)
}

.css-bg-yallow {
    background-color: var(--saffron--mango--20);
    border-radius: 6px;
    column-gap: 12px;
}

.css-card-bg-white-area {
    margin-bottom: 12px;
    column-gap: 12px;
}

.css-card-bg-white {
    background-color: var(--background---white);
    font-size: 0.875rem;
    line-height: 1.4rem;
    border-radius: 8px;
    padding: 12px;
}

.css-category-course-lesson6-icon30x30 {
    width: 30px;
}

.css-color-slate-60 {
    color: var(--slate--60-base);
}

.css-font-18 {
    font-size: 1.125rem;
}

.category-course-lesson7-01, .category-course-lesson5-05 {
    width: 100%;
    max-width: 520px;
}

.css-category-course-lesson7-02 {
    width: 100%;
    height: 270px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2.2rem;
    background: url("../../images/icbt/category-course-lesson7-02.webp");
    background-size: 100% 270px;
    background-repeat: no-repeat;
    align-content: center;
    justify-content: center;

}

.css-category-course-lesson8-02 {
    width: 100%;
    max-width: 320px;
}

.css-category-course-lesson10-01, .css-category-course-lesson10-04 {
    width: 100%;
    max-width: 210px;
}

.css-category-course-lesson11-01 {
    width: 100%;
    max-width: 525px;
}

.css-category-course-lesson11-02 {
    width: 100%;
    max-width: 550px;
}

.css-category-course-lesson11-03 {
    width: 100%;
    max-width: 588px;
}

.css-category-course-lesson11-04 {
    width: 100%;
    max-width: 565px;
}

.css-category-course-lesson11-05 {
    width: 100%;
    max-width: 590px;
}

.css-category-course-lesson11-06 {
    width: 100%;
    max-width: 605px;
}

.css-category-course-lesson11-07 {
    width: 100%;
    max-width: 573px;
}

.css-category-course-lesson11-08 {
    width: 100%;
    max-width: 400px;
}

.css-category-course-lesson12-01 {
    width: 100%;
    max-width: 520px;
}

.css-category-course-lesson12-05 {
    width: 100%;
    max-width: 280px;
}

.css-category-course-lesson12-pic-06 {
    background-image: url("../../images/icbt/category-course-lesson12-06.png");
    background-size: 140px 210px;
    background-position: top 50% right 8px;
    background-repeat: no-repeat;
}

.css-category-course-lesson12-pic-07 {
    background-image: url("../../images/icbt/category-course-lesson12-07.png");
    background-size: 135px 240px;
    background-position: top 50% right 8px;
    background-repeat: no-repeat;
}

.css-category-course-polygon-white-1 {
    width: 100%;
    background-color: var(--background---white);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 35px), calc(50% + 60px) calc(100% - 35px), 50% 100%, calc(50% - 60px) calc(100% - 35px), 0% calc(100% - 35px));
    border-radius: 8px;
    padding: 15px 12px 40px 12px;
}

.css-category-course-polygon-white-2 {
    width: 100%;
    background-color: var(--background---white);
    clip-path: polygon(0 0, calc(50% - 60px) 0, 50% 35px, calc(50% + 60px) 0, 100% 0, 100% calc(100% - 35px), calc(50% + 60px) calc(100% - 35px), 50% 100%, calc(50% - 60px) calc(100% - 35px), 0% calc(100% - 35px));
    border-radius: 8px;
    padding: 15px 12px 40px 12px;
    margin-top: -12px;
}

.css-category-course-polygon-white-3 {
    width: 100%;
    background-color: var(--background---white);
    clip-path: polygon(0 0, calc(50% - 60px) 0, 50% 35px, calc(50% + 60px) 0, 100% 0, 100% 100%, 0% 100%);
    border-radius: 8px;
    padding: 15px 12px 5px 12px;
    margin-top: -12px;
    margin-bottom: 12px;
}

.css-category-course-bgL-steelBlue-10 {
    background-color: var(--steel-blue--10);
    border-radius: 12px 0 0 12px;
    padding: 25px 0 5px 15px;
}

.css-category-course-bgR-slate-10 {
    background-color: var(--slate--10);
    border-radius: 0 12px 12px 0;
    padding: 25px 0 5px 15px;
}

.css-category-btn-radius-16 {
    border-radius: 16px !important; /* 使用 !important 來確保能覆蓋 Bootstrap 的預設樣式 */
}

.css-category-course-hr {
    background-color: var(--mint--60-base);
}

.css-category-course-bottom-next {
    color: var(--mint--80);
    transition: color 0.3s ease;
}

.css-category-course-bottom-next:hover {
    color: var(--mint--60-base);
}

/*------------------ start: category - practice --------------*/
.css-category-practice-titleBg {
    background-image: url("../../images/icbt/category-title-practice.svg");
}

.css-category-practice-tab .nav-tabs {
    --vz-nav-tabs-bg: #f5f6f7;
    --vz-nav-tabs-border-width: var(--vz-border-width);
    --vz-nav-tabs-border-color: var(--steel-blue--80);
    --vz-nav-tabs-border-radius: 8px;
    --vz-nav-tabs-link-hover-border-color: var(--vz-secondary-bg) var(--vz-secondary-bg) var(--vz-nav-tabs-border-color);
    --vz-nav-tabs-link-active-color: var(--vz-emphasis-color);
    --vz-nav-tabs-link-active-bg: var(--steel-blue--20);
    --vz-nav-tabs-link-active-border-color: var(--steel-blue--70) var(--steel-blue--70) var(--steel-blue--20);
    background-color: var(--vz-nav-tabs-bg);
    border-bottom: var(--vz-nav-tabs-border-width) solid var(--vz-nav-tabs-border-color);
    border-radius: 8px 8px 0 0;
}

.css-category-practice-tab-ul {
}

.css-category-practice-tab .nav-item {
    width: 50%;
    text-align: center;
}

.css-category-practice-tab .nav-item .nav-link {
    color: var(--slate--50);
    font-size: 1.125rem;
    padding-top: 24px;
    padding-bottom: 24px;
}

.css-category-practice-tab .nav-item .nav-link:hover {
    color: var(--text---default---black);
}

.nav-tabs .nav-link.active {
    color: var(--text---default---black);
}

.css-category-practice-guide {
    font-size: 1.125rem;
    line-height: 2rem;
}

.css-category-practice-guide-video {
    font-size: 1.125rem;
}

.css-category-practice-bgframe-A {
    border: 1px solid var(--steel-blue--30);
    border-radius: 12px;
    padding: 24px;
}

.css-category-practice-bgframe-B {
    background-color: var(--background--gray-1);
    border-radius: 12px;
    padding: 24px;
}

.css-category-practice-frame {
    font-size: 1rem;
}

.css-category-practice-field {
    line-height: 1.7rem;
    border-radius: 8px;
    border: 1px solid var(--slate--10);
    background-color: var(--background---white);
    padding: 9px 16px 9px 16px;
}

.css-category-practice-field:focus {
    -webkit-box-shadow: 0 0 0 1px rgba(var(--vz-primary-rgb), .25);
    box-shadow: 0 0 0 1px rgba(var(--vz-primary-rgb), .25);
    outline: none;
}

.css-category-practice-field::placeholder {
    color: var(--vz-Gray-2);
}

.css-category-practice-field-inputDate, .css-category-practice-field-inputTextA, .css-category-practice-field-select {
    width: 100%;
    max-width: 240px;
}

.css-category-practice-field-select-input {
    width: 100%;
    max-width: 240px;
}

.css-category-practice-field-select {
    font-size: 1rem;
    padding: 12px 16px 12px 16px;
}

.css-category-practice-field-inputText {
    width: 100%;
}

.css-category-practice-field-textarea {
    width: 100%;
    height: 120px;
}

.css-category-practice-bgframe-C {
    border: 1px solid var(--steel-blue--70);
    border-top: 5px solid var(--steel-blue--70);
    border-radius: 0 0 12px 12px;
    padding: 1px;
}

.css-category-practice-bgframe-C-toptitle {
    background-color: var(--steel-blue--10);
    border-bottom: 1px solid var(--steel-blue--70);
    padding: 12px;
}

.css-category-practice-bgframe-C-title {
    width: calc(100% - 36px)
}

.category-practice-pic01-date {
    width: 18px;
    vertical-align: baseline;
    margin-right: 8px;
}

.category-practice-btn-del {
    width: 36px;
    height: 36px;
    background: url("../../images/icbt/category-practice-pic02-del.webp");
    border: 0;
}

.css-category-practice-record-text {
    font-size: 0.75rem;
    color: var(--text---disabled);
}

/*---------- start: audio ---------*/
.audio-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

.player-btn {
    background: none;
    border: none;
    padding: 0 15px;
}

.player-btn img {
    width: 24px;
    height: 24px;
}

.player-time {
    font-size: 0.9em;
    color: #6c757d; /* 灰色文字 */
    width: 50px; /* 固定寬度以避免跳動 */
    text-align: center;
}

.player-slider {
    flex-grow: 1; /* 讓滑塊填滿剩餘空間 */
    margin: 0 15px;
    -webkit-appearance: none; /* 移除預設樣式 */
    width: 100%;
    height: 5px;
    background: #e9ecef; /* 滑塊軌道背景 */
    outline: none;
    opacity: 0.9;
    transition: opacity .2s;
    border-radius: 5px;
}

.player-slider:hover {
    opacity: 1;
}

/* Chrome, Safari, Opera, Edge */
.player-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #007bff;
    cursor: pointer;
    border-radius: 50%;
}

/* Firefox  */
.player-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: #007bff;
    cursor: pointer;
    border-radius: 50%;
    border: none;
}

/*---------------- end: audio ---------------*/


/*------------------ start: footer --------------*/
.css-bg-footer {
    background-color: rgba(var(--background---white-rgb), 0.5);
}

.css-text-footer {
    line-height: 25px;
}

/*------------------ end: footer ---------------*/

.dropdown-header {
    font-size: 1rem; /* 或者根據需要自行設定字體大小 */
    color: var(--text---default---secondary);
}

.user-name-text {
    font-size: 1rem;
}

.nav-link.active {
    background-color: var(--mint--20);
}


/*------------------ start: media --------------*/
@media (min-width: 1800px) {
}

@media (min-width: 1600px) and (max-width: 1799.89px) {
}

@media (min-width: 1400px) and (max-width: 1599.89px) {
}

@media (min-width: 1400px) {

}

@media (min-width: 1200px) and (max-width: 1399.89px) {


}

@media (max-width: 1199.98px) {
    .css-hero-title {
        display: none;
    }

    .css-hero-title-1 {
        display: block;
    }

    .css-hero-submit {
        color: #f5f5f5;
        background-color: #417E6F;
        border: 1px solid #4F5D69;
    }

    .css-course-titleBg, .css-course-description-titleBg, .css-practice-titleBg, .css-video-titleBg, .css-category-course-titleBg {
        width: 100%;
    }

    .css-course-title-Area { /* This class seems to be a typo for .css-category-course-title-Area */
        width: 90%;
        margin: 0px auto;
    }

    .css-category-course-title-Area, .css-category-practice-title-Area { /* Added to ensure it's distinct if needed */
        width: 90%;
        margin: 0px auto;
    }

    .css-course-section, .css-practice-section, .css-video-section {
        width: 90%;
    }

    .css-category-course-no1, .css-category-course-no2, .css-category-course-no3 {
        width: 100px !important;
        height: auto;
    }

}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .css-icbt-logo {
        width: 110px;
    }

    .css-icbt-text {
        font-size: 2rem;
    }

    .css-hero-right {
        width: 280px;
        border-radius: 8px;
        padding: 24px;
    }

    .css-hero-right-bar {
        width: 240px;
    }

    .css-card-text {
        font-size: 1rem;
        line-height: 1.75rem;
        font-family: Noto Sans TC;
        color: var(--text---default---secondary); /* #424E58 */
        height: 150px;
    }
}

@media (min-width: 992px) {
    .css-category-list-btn-up {
        display: none;
    }

    .css-category-list-btn-down {
        display: none;
    }
}

@media (min-width: 992px) {
    .css-category-course-menu {
        position: -webkit-sticky;
        position: sticky;
        top: 110px;
        align-self: flex-start;
        max-height: calc(100vh - 10px);
    }

    .css-category-course-list {
        /*height: 100%;*/
        min-height: 78vh;
        border-radius: 8px;
        padding: 15px;
        width: 100%;
        background-color: var(--background--gray-1); /* #F1F3F5 */
        transition: height 0.1s ease-out;
    }

    #button-up, #button-down {
        display: none !important;
    }
}

@media (max-width: 992px) {
    .css-nav-user1 {
        display: block;
    }

    .css-nav-user2 {
        display: none;
    }

    .css-nav-active {
        background-color: rgba(var(--mint--20), 0); /* rgba(203,233,225,0) */
    }

    .css-nav-li {
        border-bottom: 1px solid rgba(var(--mint--80), 0.1); /* rgba(65,126,111,0.1) */
        padding: 12px 65px;
        margin: 0 32px;
    }

    .css-hero-text {
        text-align: justify;
    }

    .css-nhri-info-2 {
        display: block;
    }

    .css-course .css-page .section .container, .css-category .css-page .section .container {
        max-width: 100% !important;
    }

    /* .css-course-titleBg (already defined) */
    .css-course-title-Area { /* Typo for .css-category-course-title-Area? */
        width: 90%;
        margin: 0px auto;
    }

    .css-category-course-title-Area, .css-category-practice-title-Area { /* Ensuring this is targeted */
        width: 90%;
        margin: 0px auto;
    }

    .css-course-section, .css-practice-section, .css-video-section {
        width: 90%;
    }

    .css-category-course-menu {
        z-index: 99;
        height: 90px;
        position: relative;
        overflow-y: visible;
    }

    .css-category-course-list {
        width: 90%;
        height: 70px;
        overflow-y: hidden;
        padding: 5px 5px 5px 5px;
        margin: 0 auto;
    }

    .css-category-course-list-1 {
        width: calc(100% - 50px);
        /*padding: 25px 0;*/
    }

    .css-category-list-btn-up {
        display: none;
    }

    .css-category-list-btn-down {
        display: block;
    }

    .css-category-course-section {
        padding: 0px 15px 0px 15px;
    }
}

@media (max-width: 991.98px) {

    /* 1. 讓整個選單容器黏在頂部 */
    .css-category-course-menu {
        position: -webkit-sticky;
        position: sticky;
        top: 120px;
        z-index: 1020;
    }

    .css-category-course-section {
        padding-top: 85px;
    }

    .css-category-course-list {
        display: flex; /* 啟用 Flexbox 佈局 */
        flex-direction: column; /* 讓子項目垂直排列 */
        max-height: 70px; /* 收合時的高度 */
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        background-color: var(--background--gray-1); /* #F1F3F5 */
    }

    .css-category-course-list a.active .css-category-course-list-1 {
        background-color: transparent;
    }

    .css-category-course-list a {
        order: 1;
    }

    .css-category-course-list a.active {
        order: -1;
    }

    #css-category-list {
        transition: height 0.3s ease-in-out;
    }

    .title-all /*,.title-1, .title-2, .title-3, .title-4 , .title-5*/
    {
        top: -180px;
    }
}

@media (min-width: 767px) and (max-width: 991.98px) {
    .css-nhri-info-2 {
        display: block;
    }

}

@media (max-width: 767.98px) {
    .css-course-title-Area { /* Typo for .css-category-course-title-Area? */
        width: 95%;
    }

    .css-category-course-title-Area, .css-category-practice-title-Area { /* Ensuring this is targeted */
        width: 95%;
    }

    .css-nhri-info-2a {
        overflow-wrap: break-word;
    }

    .css-category-course-lesson-half-Lblue, .css-category-course-lesson-half-Rgray {
        background-position: bottom;
        padding-bottom: 190px;
    }

    .css-category-course-lesson1-pic-3, .css-category-course-lesson2-pic-4 {
        background-size: 140px 220px;
    }

    .css-category-course-polygon-white-1 {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        padding: 15px 12px 12px 12px;
    }

    .css-category-course-polygon-white-2 {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        padding: 15px 12px 12px 12px;
        margin-top: 12px;
    }

    .css-category-course-polygon-white-3 {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        padding: 15px 12px 12px 12px;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .css-category-course-exemple-ol li:nth-child(odd), .css-category-course-exemple-ol li:nth-last-child(1) {
        border-bottom: 0px;
    }

    .css-category-course-exemple-ol li:nth-child(even) {
        padding: 10px 0px 15px 0px;
    }
}

@media (min-width: 576px) and (max-width: 766.98px) {
    .css-icbt-logo {
        width: 110px;
    }

    .css-icbt-text {
        font-size: 2rem;
    }

    .css-hero-title {
        font-size: 2.25rem;
    }

    .css-card-bg-white {
        padding: 12px 0px 12px 10px;
    }
}


@media (min-width: 576px) and (max-width: 991.98px) {

}


@media (max-width: 575.98px) {
    .css-icbt-logo {
        width: 123px;
        display: block
    }

    .css-icbt-text {
        font-size: 1.5rem;
        line-height: 1.75rem;
    }

    .css-icbt-beta {
        width: 48px;
        top: 40px;
        right: 12px;
    }

    .css-navbar {
        height: 120px;
    }

    .css-hero-title-1 {
        text-align: left;
        white-space: inherit;
        overflow-wrap: break-word;
    }


    .css-page {
        min-height: calc(100vh - 125px);
        margin-top: 120px;
    }

    .css-course-titleBg {
        background-position: 15%;
    }

    .css-course-btn-x {
        text-align: left;
        padding-right: 0px;
    }

    .css-course-title, .css-practice-title, .css-video-title, .css-category-course-title, .css-category-practice-title {
        line-height: 60px;
    }

    /*.css-course-continue,.css-course-start{
        width:50%;
        min-width: 150px;
    }
    .css-practice-start{
        margin: 0px;
    }
    .css-course-unlock{
        width: 40%;
        min-width: 120px;
        text-align: center;
        margin: 0;
    }*/
    .css-category-course-titleBg, .css-category-practice-titleBg {
        width: 100%;
        /*padding:30px 0 0 0;*/
    }

    .css-category-course-title-Area, .css-category-practice-title-Area {
        width: 100%;
        padding: 20px 35px;
    }

    .css-category-course-lesson-half-Lblue {
        border-radius: 8px 8px 0 0;
    }

    .css-category-course-lesson-half-Rgray {
        border-radius: 0 0 8px 8px;
    }

    .css-category-course-no1 {
        height: 100% /* heigh typo */
    }

    .css-category-course-toplineB-arrow {
        width: 50px;
        /*padding:20px 5px;*/
    }

    .css-category-course-no1 {
        height: auto;
    }

    .css-category-course-no1, .css-category-course-no2, .css-category-course-no3 {
        width: 100px !important;
        height: auto;
    }

    .css-nhri-info-1 {
        display: block;
    }

    .css-category-course-lessonbutton {
        min-width: 300px;
        text-align: left;
        padding: 20px 24px;
    }
}

@media (max-width: 374.98px) {
    .css-hero-right {
        width: 280px;
        height: 262px;
    }

    .css-category-course-titleBg, .css-category-practice-titleBg {
        padding: 25px 0 0 0;
    }

    /*.css-category-course-title-Area {
        padding: 0 30px;
    }*/
    .css-category-course-pointL, .css-category-course-pointL-txt, .css-category-course-pointR, .css-category-course-pointR-txt {
        padding: 7px;
    }
}


