.nav_link.active[data-page="course"] .icon {
    background-image: url('../../src/book-active.svg');
}

.nav_link.active[data-page="community"] .icon {
    background-image: url('../../src/city-active.svg');
}

.nav_link.active[data-page="my_history"] .icon {
    background-image: url('../../src/me-active.svg');
}

.nav_link.active[data-page="stu_history"] .icon {
    background-image: url('../../src/docfolder-active.svg');
}

/*svg顏色*/
.svg_color_main {
    stroke: var(--main-color);
}

.nav_link .navbar_svg_color_main{
    stroke: #333333;
}

.nav_link.active .navbar_svg_color_main{
    stroke: var(--main-color);
}

.bg_1 {
    background-color: var(--main-color);
}

.bg_2 {
    background-color: var(--second-color);
}

.text_1 {
    color: var(--third-color);
}

.text_2 {
    color: var(--main-color);
}

.text_warn {
    color: var(--warn-color);
}

.btn_1 {
    border-color: var(--main-color);
    background-color: var(--main-color);
    color: #fff;
}

.btn_1:disabled {
    opacity: 65%;
}

.btn_outline_1 {
    border-color: var(--main-color);
    color: var(--main-color);
}

.btn_2 {
    border-color: #fff;
    background-color: #fff;
    color: var(--main-color);
}

.btn_opacity_2 {
    border-color: rgba(255, 255, 255, .2);
    background-color: rgba(255, 255, 255, .2);
    color: #fff;
}

/* sidebar */
.nav_link.active {
    color: var(--third-color);
}

/*test*/
.input_score[data-status='edit_score'] {
    border-color: var(--main-color);
}

.item:focus-within,
.item input:focus,
.item.opentype:focus-within,
.item.opentype input:focus {
    border-color: var(--main-color);
}

.item input:focus,
.item.opentype input:focus {
    color: var(--main-color);
}

/* checkbox */
input[type="checkbox"]:checked~.figure div {
    background-color: var(--main-color);
    border-color: var(--main-color);
}
input.checkbox_1[type="checkbox"]:checked~label .figure span {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

/*audio*/
input[type="range"].progress_input::-webkit-slider-thumb {
	background: var(--main-color) !important;
}