*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    /* overflow: hidden; */
    overflow-x: hidden;
    position: relative;
    left: 0px;
    top: 0px;
}

#container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

header {
    background: #999;
    flex: 0 0 auto;
}

.main {
    flex: 1 0 auto;
}

.content {
    margin: 0 auto;
    width: 90%;
    max-width: 1920px;
}

footer {
    flex: 0 0 auto;
    width: 100%;
    background-color: #aaaaaa;
    color: white;
    padding: 1rem;
    text-align: center;
    font-size: small;
}

footer img {
    height: 1.25rem;
    margin-right: 1rem;
}

footer p {
    margin-bottom: 0%;
    font-weight: lighter;
}

/* 初始設定 end */
label {
    font-weight: bold;
}

ul,
li {
    list-style: none;
}

a:hover {
    text-decoration: none;
}

p {
    line-height: 1.8rem;
    letter-spacing: .02rem;
}

tbody {
    font-size: small;
}

tr {
    background-color: #47b2eb;
    color: #fff;
    border-bottom: none;
}

/* nav */
.nav-bright {
    background-color: #fff;
    box-shadow: .2rem .2rem .5rem #00000015;
}

.nav-dark {
    background-color: #676767;
    box-shadow: .2rem .2rem .5rem #00000015;
}

.nav-logo {
    color: #47b2eb;
    text-align: center;
    letter-spacing: 0.92px;
    padding-right: 1.5rem;
    padding-top: .5rem;
    padding-bottom: .25rem;
}

.nav-link {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    color: #676767;
}

.nav-item a:hover {
    color: #FCB42D;
}

.nav-dark .nav-item a {
    color: #fff;
}

.nav-item a:hover {
    color: #FCB42D;
}

.logout-button {
    color: #fff;
    background-color: #47b2eb;
    border: #47b2eb solid 1px;
}

.logout-button:hover {
    color: #fcb42d;
    background-color: #47b2eb00;
    border: #fcb42d solid 1px;

}

/* bg-box */
.bg-box {
    background-color: #fff;
    box-shadow: .2rem .2rem .5rem #00000015;
    color: #383838;
}

/* normal start */
.bg-bright {
    background-color: #f8f8f8;
}
.bg-dark{
    background-color: #2E2E2E;
}
.border-box {
    border: 1px solid rgb(170, 170, 170);
    border-radius: .5rem;
}

.bb-dashed {
    border-bottom: 1px dashed rgb(170, 170, 170);
}

.fs-sm {
    font-size: small;
}

.c-white {
    color: #fff;
}

.c-orange-dark {
    color: #fcb42d;
}

.c-blue-dark {
    color: #47b2db;
}

.c-gray {
    color: lightgray;
}

.c-blue {
    color: #0C88CB;
}

.c-yellow {
    color: #fda500;
}

/* normal end */
/* table */
table.dataTable.hover tbody tr,
table.dataTable.display tbody tr {
    background-color: #f3f0f0;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    color: #0C88CB;
}

a {
    color: #383838;
}

a:hover {
    color: #47b2eb;
}

/* data table */
.dataTable tr {
    background-color: #47b2eb;
    color: #fff;
    border-bottom: none;
}

.dataTable th {
    border-bottom: none;
}

.dataTable td {
    color: #383838;
}

table thead tr {
    background-color: #47b2eb;
    color: #fff;
    border-bottom: none;
}

table.dataTable thead th {
    border-bottom: none;
    align-items: center;
    text-align: center;
}

/* video box */
.video-box {
    background-color: #fff;
    box-shadow: .2rem .2rem .5rem #00000015;
    color: #383838;
    border: 1px solid rgb(231, 231, 231);
}

.video-teacher {
    font-size: small;
    color: #0c88cb;
}

.video-class {
    font-size: small;
    color: #fda500;
}

.video-date {
    font-size: small;
}

.video-time {
    font-size: small;
}

/* google icon */
.material-icons {
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
    transform: translateY(-.1em);
}

/* button */
/* login */
.btn-lg-blue-bright {
    color: #fff;
    background-color: #47b2eb;
    border: solid #47b2eb 1px;
    border-radius: 2rem;
    padding: .5rem 3rem;
    margin: 1.5rem;
}

.btn-lg-blue-bright:hover {
    color: #fff;
    background-color: #35c6ff;
    border: solid #35c6ff 1px;
    border-radius: 2rem;
}
.btn-lg-blue-bright:active{
    color: #fff;
    background-color: #399dd3;
    border: 1px solid #399dd3;
}

/* index */
.btn-lg-blue-outline-bright {
    color: #47b2eb;
    background-color: #fff;
    border: solid #47b2eb 1px;
    border-radius: 2rem;
    font-size: small;
    padding: .5rem 1rem;
    margin: 1.5rem;
}

.btn-lg-blue-outline-bright:hover {
    color: #fff;
    background-color: #47b2eb;
    border: solid #47b2eb 1px;
    border-radius: 2rem;
}

/* video page */
.btn-sm-orange-outline-dark {
    color: #FCB42D;
    background-color: #2e2e2e;
    border: solid #FCB42D 1px;
    border-radius: .5rem;
    font-size: small;
    padding: .25rem .5rem;
}

.btn-sm-orange-outline-dark:hover {
    color: #2e2e2e;
    background-color: #fcb42d;
    border: solid #FCB42D 1px;
    font-weight: bold;
}

.btn-sm-blue-outline-dark {
    color: #47b2eb;
    background-color: #2e2e2e;
    border: solid #47b2eb 1px;
    border-radius: .5rem;
    font-size: small;
    padding: .25rem .5rem;
}

.btn-sm-blue-outline-dark:hover {
    color: #2e2e2e;
    background-color: #47b2eb;
    border: solid #47b2eb 1px;
    font-weight: bold;
}

.btn-orange-outline-dark {
    color: #FCB42D;
    background-color: #2e2e2e;
    border: solid #FCB42D 1px;
    border-radius: .5rem;
    font-size: small;
    width: 100%;
    text-align: left;
    padding: .25rem .5rem;
    margin: .25rem 0rem;
}

.btn-orange-outline-dark:hover {
    color: #2e2e2e;
    background-color: #fcb42d;
    border: solid #FCB42D 1px;
    font-weight: bold;
}

.btn-blue-outline-dark {
    color: #47b2eb;
    background-color: #2e2e2e;
    border: solid #47b2eb 1px;
    border-radius: .5rem;
    font-size: small;
    width: 100%;
    text-align: left;
    padding: .25rem .5rem;
    margin: .25rem 0rem;
}

.btn-blue-outline-dark:hover {
    color: #2e2e2e;
    background-color: #47b2eb;
    border: solid #47b2eb 1px;
    font-weight: bold;
}

/* button */
.btn-sm-outline-dark {
    color: #fff;
    background-color: #2e2e2e;
    border: solid #fff 1px;
    border-radius: .5rem;
    font-size: small;
    margin: .25rem 0rem;
    padding: .25rem .5rem;
}

.btn-sm-outline-dark:hover {
    color: #2e2e2e;
    background-color: #fff;
    border: solid #fff 1px;
    font-weight: bold;
}

/* live page */
.btn-sm-orange-bright {
    color: #fff;
    background-color: #fcb42d;
    border: solid #FCB42D 1px;
    border-radius: .5rem;
    font-size: small;
    padding: .25rem .5rem;

}

.btn-sm-orange-bright:hover {
    color: #fff;
    background-color: #ffc14d;
    border: solid #ffc14d 1px;
}

.btn-sm-orange-bright:active{
    color: #fff;
    background-color: #f0a71f;
    border: solid #f0a71f 1px;
}

.btn-sm-blue-bright {
    color: #fff;
    background-color: #47b2eb;
    border: solid #47b2eb 1px;
    border-radius: .5rem;
    font-size: small;
    padding: .25rem .5rem;
}

.btn-sm-blue-bright:hover {
    color: #fff;
    background-color: #35c6ff;
    border: solid #35c6ff 1px;
}
.btn-sm-blue-bright:active {
    color: #fff;
    background-color: #399dd3;
    border: solid #399dd3 1px;
}

.btn-sm-outline-bright {
    color: #47b2eb;
    background-color: #fff;
    border: solid #47b2eb 1px;
    border-radius: .5rem;
    font-size: small;
    margin: .25rem 0rem;
    padding: .25rem .5rem;
}

.btn-sm-outline-bright:hover {
    color: #fff;
    background-color: #47b2eb;
    border: solid #47b2eb 1px;
}

.btn-orange-bright {
    color: #fff;
    background-color: #fcb42d;
    border: solid #FCB42D 1px;
    border-radius: .5rem;
    padding: .25rem .5rem;

}

.btn-orange-bright:hover {
    color: #fff;
    background-color: #ffc14d;
    border: solid #ffc14d 1px;
}

.btn-orange-bright:active{
    color: #fff;
    background-color: #f0a71f;
    border: solid #f0a71f 1px;
}
/* 換頁 */
.page-link {
    color: #47b2eb;
}

.page-link:hover {
    color: #fff;
    background-color: #47b2eb;
}

.page-link:active {
    color: #fff;
    background-color: #47b2eb;
}

/* live */
.live-right-area {
    border: 1px solid rgb(170, 170, 170);
    border-radius: .5rem;
    overflow: auto;
    height: 50vh;
}

.participants {
    display: block;
    border-bottom: #a0a0a0 dashed 1px;
    padding: .1rem;
}

.participants .material-icons {
    font-size: 32px;
    margin: 8px;
    color: #47b2eb;
}

#chat{
    display: flex;
    flex-direction: column;
    height:-webkit-fill-available;
}
.btn-send {
    border: none;
    background-color: transparent;
    color: #47b2eb;
}

.btn-send:hover {
    color: #35c6ff;
}

.btn-send:active {
    color: #399dd3;
}
.text-area{
    overflow-y: scroll;
}
.text-box{
    border-bottom: 1px dashed lightgray;
    margin-bottom: .5rem;
}
.user-name{
    font-size: 12px;
    font-weight: bold;
    color: #399dd3;
    margin-bottom: .25rem;
    line-height: 1;
}
.user-text{
    margin-bottom: 0;
}
/* test */
.test-info {
    text-align: left;
    margin: 1.25rem;
    margin-bottom: 3rem;
}

.qu-box {
    border-bottom: dashed 1px lightgray;
}

.qu-box-2 {
    text-align: left;
}

.selection {
    padding: 1.5rem;
}


/* test-ans page */
.ans p {
    margin: 0rem;
}

.stu-wrong-ans {
    border-bottom: red solid 1.5px;
    color: red;
    font-size: large;
}

.stu-correct-ans {
    border-bottom: solid 1.5px;
    font-size: large;
}

.correct-ans {
    font-size: small;
    color: #0c88cb;
    margin-top: 1rem;
}

.analysis-box {
    color: #0c88cb;
    font-size: small;
    padding: 1rem;
    background-color: #fff;
    border: .5px solid #dadada;
    box-shadow: .2rem .2rem .5rem #00000015;
}

/* qa page */
.question-box {
    padding: 1rem;
    background-color: #fff;
    border: .5px solid #dadada;
    box-shadow: .2rem .2rem .5rem #00000015;
}

.qa-info {
    color: #0c88cb;
    text-align: left;
    margin: 1.25rem 0rem 3rem 0rem;
}

.qa-box {
    text-align: left;
    border-bottom: dashed 1px #767676;
}

.qa-box h6 {
    color: #fcb42d;
}

/* side-list */
.side-list-box {
    padding: 1rem;
    text-align: left;
    background-color: #fff;
    border: .5px solid #dadada8a;
    min-width: 180px;
}

.side-list-box:hover {
    padding: 1rem;
    text-align: left;
    color: #0c88cb;
    background-color: #89cff588;
    border: .5px solid #dadada;
    min-width: 180px;
    box-shadow: .2rem .2rem .5rem #00000015;
}

.side-list-box:active {
    color: #2d9ffc;
    background-color: #fff;
}