:root {
  --dark: #1c1d1f;
  --major: #194376;
  --minor: #00539C;
  --accent: #FFD662;
  --gray: #555555;
  --lightgray: #757575;
  --offwhite: #f4f4f4;
  --w60: 60px;
  --w80: 80px;
  --w100: 100px;
  --w120: 120px;
  --w160: 160px;
  --w180: 180px;
  --w240: 240px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  word-break: break-all;
}
.main-container{
  flex: 1;
  position: relative;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1c1d1f;
}
/* 
---------------------------------------------
bootstrap 修改或擴寫
--------------------------------------------- 
*/
.text-justify{ text-align: justify;}

.fs-20px{ font-size: 20px;}
.fs-18px{ font-size: 18px;}
.fs-17px{ font-size: 17px;}
.fs-16px{ font-size: 16px;}
.fs-15px{ font-size: 15px;}
.fs-14px{ font-size: 14px;}
.fs-13px{ font-size: 13px;}
.fs-12px{ font-size: 12px;}
.fs-7{ font-size: 0.8rem;}
.fs-8{ font-size: 0.7rem;}
.ls-1{ letter-spacing: 1px;}
.ls-2{ letter-spacing: 2px;}
.ls-4{ letter-spacing: 4px;}

.lh-17{ line-height: 1.7;}

.text-major{ color: var(--major);}
.text-minor{ color: var(--minor);}
.text-accent{ color: var(--accent);}
.text-gray{ color: var(--gray);}
.text-lightgray{ color: var(--lightgray);}
.text-pearlblue{ color: #445069;}
.text-hover-white:hover{ color: #ffffff;}

.bg-major{ background-color: var(--major);} 
.bg-minor{ background-color: var(--minor);} 
.bg-accent{ background-color: var(--accent);} 
.bg-offwhite{ background-color: var(--offwhite);} 
.bg-lightgray{ background-color: #dbdbdb;}

.flex-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-start{
  display: flex;
  align-items: center;
  justify-content: start;
}

.link-light{ opacity: 0.85;}
.link-light:hover{ opacity: 1;}
@media screen and (max-width: 767.9px){
  .md-fs-15px{ font-size: 15px;}
}
@media screen and (max-width: 575.9px){
  .sm-fs-20px{ font-size: 20px;}
  .sm-fs-18px{ font-size: 18px;}
  .sm-fs-17px{ font-size: 17px;}
  .sm-fs-16px{ font-size: 16px;}
  .sm-fs-15px{ font-size: 15px;}
  .sm-fs-14px{ font-size: 14px;}
  .sm-fs-13px{ font-size: 13px;}
}
/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
a,
.btn{ 
  text-decoration: none;
  transition: all 0.2s linear 0s;
}
a:hover,
a:active,
a:focus{
  color: #ef5049;
  text-decoration: none;
}
button,
.btn:focus,
.btn:active,
.btn:focus,
.navbar-toggler:focus,
a:focus,
.btn-close:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.accordion-button:focus,
.page-link:focus{
  outline: none;
  box-shadow: none;
}
.form-check-input:checked {
  background-color: var(--minor);
  border-color: var(--minor);
}
.hidden{ display: none;}
.word-break{ word-break: break-all;}
.wrap-block{
  white-space: pre-wrap;
  word-break: break-all;
}
.opacity-9{ opacity: 0.9;}
.opacity-8{ opacity: 0.8;}
.opacity-7{ opacity: 0.7;}
.opacity-5{ opacity: 0.5;}
.flex-60{ flex: 0 0 60px;}
.flex-80{ flex: 0 0 80px;}
.flex-110{ flex: 0 0 110px;}
.flex-120{ flex: 0 0 120px;}
.flex-240{ flex: 0 0 240px;}
.flex-280{ flex: 0 0 280px;}
.btn-major{
  background-color: var(--major);
  color: #ffffff;
}
.btn-major:hover{
  background-color: var(--minor);
  color: #ffffff;
}
.btn-minor{
  background-color: var(--minor);
  color: #ffffff;
}
.btn-minor:hover{
  background-color: var(--major);
  color: #ffffff;
}
.btn-accent{
  background-color: var(--accent);
  color: #ffffff;
}
.btn-accent:hover{
  background-color: var(--accent);
  color: #ffffff;
  opacity: 0.8;
}
.btn-lightgray{
  background-color: var(--lightgray);
  color: #ffffff;
}
.btn-lightgray:hover{
  background-color: var(--minor);
  color: #ffffff;
  opacity: 0.8;
}
.btn-outline-minor{
  color: var(--minor);
  border-color: var(--minor);
}
.btn-outline-minor:hover{
  color: #ffffff;
  background-color: var(--minor);
}
/* page title */
.page-title h2{
  letter-spacing: 8px;
  text-indent: 8px;
  font-weight: 400;
}
.page-title h3{
  letter-spacing: 1px;
  text-indent: 1px;
  font-weight: 100;
  font-family: Arial;
}
/* pagination */
.pagination li a.page-link{
  color: var(--dark);
  background-color: transparent;
  font-size: 15px;
  font-weight: 400;
  line-height: 32px;
  height: 32px;
  width: 30px;
  padding: 0;
  margin: 0 12px;
  border: 0px;
  border-bottom: 2px solid transparent;
  border-radius: 0px;
  transition: all 0.4s ease 0s;
  text-align: center;
}
.pagination li.active a.page-link,
.pagination li a.page-link:hover{
  color: var(--dark);
  background-color: transparent;
  border-bottom: 2px solid var(--accent);
}
.pagination li:first-child a.page-link,
.pagination li:last-child a.page-link,
.pagination li.disabled a.page-link{
  background-color: transparent;
  border-width: 0px;
}
.pagination li.disabled a.page-link{
  opacity: 0.3;
}
/* 
---------------------------------------------
loading page-header menu footer 
--------------------------------------------- 
*/
/*header*/
.header .header-top{ padding: 16px 12px 54px;}
.header .header-nav{
  margin-top: -38px;
  margin-bottom: -37px;
}
.header .header-banner > * {
  position: relative;
  z-index: 2;
}
.header-bottom{
  background: var(--accent);
  padding-top: 64px;
  padding-bottom: 23px;
}
.header-bottom h1{ 
  color: var(--minor); 
  opacity: 0.9;
}
.error-container .header-bottom{
  padding-top: 60px;
  padding-bottom: 0px;
}
.header .nav-link{
  color: var(--lightgray);
  margin: 0 12px;
  font-weight: 600;
  outline: none;
  font-size: 18px;
  letter-spacing: 1px;
}
.header .nav-link.active,
.header .nav-link:hover{ 
  color: var(--minor);
}
/* submenu */
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 20px;
  background-color: #ffffff;
  min-width: 120px;
  border: 1px solid #dddddd;
  z-index: 1;
}
.dropdown-content a {
  color: #777777;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}
.dropdown-content a:hover {background-color: #eaeaea;}
.dropdown:hover .dropdown-content {display: block;}

/* search block */
.search-box .form-control,
.search-box .form-select{
  background-color: transparent;
  border-width: 0px;
  border-radius: 0px;
  border-bottom: 1px solid var(--dark);
  color: #333333;
  font-size: 15px;
  padding: 6px 8px;
}
.search-box .form-control::placeholder{
  color: #555555;
}
@media screen and (max-width: 575.9px){
  .search-box .form-control,
  .search-box .form-select{
    font-size: 14px;
  }
}
/* back to top */
.back-to-top{
  display: none;
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 99;
}
.top-hidden{ opacity: 0%;}
@media screen and (max-width: 991.9px){
  .header-logo{ width: 120px;}
  .navbar-collapse{
    position: absolute;
    top: 66px;
    right: 0px;
    z-index: 99;
    width: 100vw;
    border-top: 1px solid #f0f0f0;
  }
  .navbar-nav{
    background: rgba(255,255,255,0.9);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
  }
  .navbar-nav li.nav-item{
    width: 100%;
    text-align: center;
    padding: 6px 12px;
  }
  .navbar-nav li.nav-item:first-child{
    padding-top: 16px;
  }
  .navbar-nav li.nav-item:last-child{
    padding-bottom: 16px;
  }
  .navbar-nav li.nav-item a.nav-link{
    font-size: 17px;
  }
  .error-container .header-bottom{
    background: transparent;
    padding-top: 40px;
  }
  .footer .copyright{
    border-top: 1px solid rgba(255,255,255,0.25);
    padding-top: 8px;
  }
  .back-to-top{ display: block;}
  .dropdown-content {
    display: block;
    position: relative;
    background-color: transparent;
    border-width: 0;
    font-size: 15px;
  }
  .dropdown-content a {
    color: #888888;
    padding: 10px 16px;
  }
}
@media screen and (max-width: 767.9px){
  .header-bottom h1{ 
    font-size: 24px!important;
    font-weight: bold!important;
  }
}
@media screen and (max-width: 575.9px){
  .header .header-top{ padding: 8px 12px 46px;}
  .header-logo{ width: 100px;}
  .header .header-banner{
    min-height: 160px;
  }
  .navbar-collapse{
    top: 62px;
  }
}
/* 
---------------------------------------------
註冊 & 登入 & 會員中心
--------------------------------------------- 
*/
.account-container h1{
  padding-bottom: 16px;
  border-bottom: 3px solid var(--major);
  color: var(--major);
}
.login-input{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.login-input .form-label {
  flex: 0 0 156px;
  color: var(--major);
  font-weight: 600;
  margin-bottom: 0px;
  font-size: 17px;
}
.login-input .form-control{
  flex: 0 0 calc(100% - 156px);
  border-radius: 0px;
  background-color: var(--offwhite);
  color: var(--dark);
  border-width: 0px;
  border-bottom: 1px solid var(--minor);
  padding: 12px 20px;
}
.login-input .invalid-feedback{
  padding-left: 156px;
}
@media screen and (max-width: 575.9px){
  .login-input .form-label {
    flex: 0 0 100%;
    margin-bottom: 12px;
    font-size: 15px;
  }
  .login-input .form-control{
    flex: 0 0 100%;
    font-size: 15px;
  }
  .login-input .invalid-feedback{
    padding-left: 0px;
  }
}
/* 
---------------------------------------------
錯誤頁
--------------------------------------------- 
*/
.error-title{
  font-family: Rubik Mono One, Arail;
  font-weight: 600;
  font-size: 120px;
  line-height: 1;
}
@media screen and (max-width: 991.9px){
  .error-title{ font-size: 80px;}
  .error-img{ max-width: 400px;}
}
@media screen and (max-width: 575.9px){
  .error-img{ max-width: 100%;}
  .error-title{ font-size: 11vw;}
}
/* 
---------------------------------------------
表格相關
--------------------------------------------- 
*/
/* 整體表格樣式 */
.table-major thead tr th{ 
  font-size: 15px;
  min-width: var(--w80);
  padding: 12px 8px;
}
.table-major tbody tr td{ 
  word-break: break-all;
  font-size: 14px;
  color: var(--gray);
  padding: 12px 8px;
}
.table-major tbody tr:hover td{
  background-color: var(--offwhite);
}
.table-major.table-video tbody tr:hover td{
  background-color: inherit;
}

/* rwd 樣式不同寫法 */
@media screen and (max-width: 991.9px){
  /* rwd 橫排全改直列顯示格式 */
  .table-rwd.table > :not(:first-child){ border-top-width: 0px;}
  .table-rwd thead{
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .table-rwd tbody tr td{ 
    display: flex;
    flex-wrap: nowrap;
    padding: 3px 18px;
    border-bottom-width: 0px;
  }
  .table-rwd tbody tr td:first-child{ 
    padding: 19px 18px 3px;
  }
  .table-rwd tbody tr td:last-child{ 
    border-bottom: 1px solid #DEE2E6;
    padding: 3px 18px 19px;
  }
  .table-rwd tbody tr td:before{
    content: attr(data-label);
    flex: 0 0 88px;
    color: var(--dark);
    font-weight: 600;
  }

  /* rwd 右側有功能之格式 */
  .row-lg-hide{ display: none;}
  .table-rwdSide.table > :not(:first-child){ border-top-width: 0px;}
  .table-rwdSide thead{
    border-width: 0px;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  .table-rwdSide tbody tr td:last-child{display: block;}
  .show-video-table .table-rwdSide tbody tr td:last-child{display: table-cell;}
  .table-rwdSide .mobile-content{
    padding: 4px 4px 4px 10px;
  }
  .table-rwdSide .mobile-content .row-items{
    display: flex;
    padding: 3px 0px;
  }
  .table-rwdSide .mobile-content .row-title{
    flex: 0 0 88px;
    color: var(--dark);
    font-weight: 600;
  }
  .table-rwdSide .mobile-content .row-data{
    flex-grow: 1;
  }
}

/* 各自表格設定 */
.table-course .th-img{ width: var(--w240);}
.table-course .th-title{ min-width: var(--w160);}
.table-course .th-open,
.table-course .th-coupon{ 
  width: var(--w80);
}
.table-course .th-onDate,
.table-course .th-offDate{
  width: var(--w100);
}

.table-course .th-action{ width: var(--w120);}
.table-member .th-businessNo{ width: var(--w100);}
.table-member .th-isEnabled{ width: var(--w80);}
.table-member .th-regTime,
.table-member .th-startTime,
.table-member .th-latestTime{ 
  min-width: var(--w160);
}
.table-files .th-date{ min-width: var(--w160);}
.table-files .th-status{ width: var(--w100);}
.table-files .th-size,
.table-files .th-isEnabled{
  width: var(--w80);
}
.table-files .th-captions{ width: var(--w80);}
.table-files .th-radio{ width: 40px;}
.table-files .th-action{ width: 320px;}
.table-files.table-files-test .th-action{ width: 120px;}

.table-coupon .th-num{ width: var(--w80)}
.table-coupon .th-action{ width: 220px;}
.table-coupon .th-MFG,
.table-coupon .th-EXP{ width: 220px;}
@media screen and (max-width: 1199.9px){
  .table-course .row-rightSide a{ 
    margin-bottom: 4px;
  }
  .table-member .th-regTime,
  .table-member .th-startTime,
  .table-member .th-latestTime,
  .table-files .th-date{ 
    min-width: var(--w100);
    width: var(--w100);
  }
  .table-files.table-files-test .th-date{ min-width: var(--w160);}
  .table-files .th-action{ width: 160px;}
  .table-coupon .th-MFG{ width: 100px;}
  .table-coupon .th-EXP{ width: 120px;}
}
@media screen and (max-width: 991.9px){
  .table-course .row-leftSide{
    flex: 0 0 var(--w160);
  }
  .table-course .row-rightSide{
    padding-left: 188px;
    margin-top: 8px;
  }
}
@media screen and (max-width: 575.9px){
  .table-course .row-rightSide{ 
    padding-left: 0px;
    margin: 12px 4px;
  }
  .table-course .row-rightSide a{ 
    width: 100%;
    font-size: 14px;
    padding: 4px 12px;
    margin-bottom: 8px;
  }
}

/* 
---------------------------------------------
學習者清單
--------------------------------------------- 
*/
.form-switch .form-check-input{ 
  height: 18px;
  width: 36px;
}
.form-switch .form-check-input:checked {
  background-color: var(--minor);
  border-color: var(--minor);
}
/* 
---------------------------------------------
檔案管理
--------------------------------------------- 
*/
.table-files.table-video .th-isEnabled.th-action{ width: 130px;}
.table-video .dropdown-toggle::after{
  display: none;
}
.table-video .dropdown-menu .dropdown-item{
  padding: 8px 12px;
  font-size: 15px;
  color: var(--gray);
}
.traffic-info{
  border-right: 1px solid #cccccc;
}
@media screen and (max-width: 991.9px){
  .table-files.table-rwd tbody tr td.td-action{
    padding-top: 20px;
  }
  .table-files.table-rwd tbody tr td.td-action:before{
    flex: 0 0 0px;
  }
  .traffic-info{
    border-right-width: 0px;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 16px;
  }
  .table-files.table-video .row-rightSide{ flex: 0 0 64px; }
}
/* 
---------------------------------------------
課程清單
--------------------------------------------- 
*/
.table-course .td-info{
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
/* 
---------------------------------------------
兌換券管理
--------------------------------------------- 
*/
@media screen and (max-width: 991.9px){
  .table-coupon.table-rwd tbody tr td.td-action{
    padding-top: 20px;
  }
  .table-coupon.table-rwd tbody tr td.td-action .btn{
    flex-grow: 1;
    margin-right: 4px;
  }
  .table-coupon.table-rwd tbody tr td.td-action .btn:last-child{
    margin-right: 0px;
  }
  .table-coupon.table-rwd tbody tr td.td-action:before{
    flex: 0 0 0px;
  }
}
/* 
---------------------------------------------
編輯單一課程資訊頁
--------------------------------------------- 
*/
.editor-container .form-label{
  color: var(--gray);
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.editor-container .excel-modal .form-label{
  font-size: 16px;
  margin-bottom: 8px;
}
.editor-container .form-control,
.editor-container .form-select{ font-size: 15px;}
.editor-container .btn-collapse[aria-expanded="true"] .fa-caret-up:before{
  content: "\f0d7";
}
.editor-container .modal-footer .btn{ font-size: 15px;}
.editor-container .chapter-hr {
  position: relative;
}
.editor-container .chapter-hr:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0%;
  width: 100%;
  height: 1px;
  background-color: #dddddd;
  z-index: -1;
}
/* switch show */
.editor-container .form-switch .form-check-input{
  position: relative;
}
.editor-container .form-switch .form-check-input:after{
  position: absolute;
  content: "\f070";
  font-family: "Font Awesome 5 Free";
  font-size: 10px;
  font-weight: 900;
  color: #888888;
  opacity: 0.5;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}
.editor-container .form-switch .form-check-input:checked:after {
  content: "\f06e";
  font-weight: 400;
  color: #ffffff;
  left: 4px;
}
/* form error */
.error-prompt{
  padding: 8px 16px;
  background-color: #f2dede;
  border: 1px solid #ebccd1;
  font-size: 15px;
  margin-bottom: 24px;
}
/* CKeditor */
.ck.ck-toolbar{
  border-color: #ced4da!important;
  border-top-left-radius: 0.25rem!important;
  border-top-right-radius: 0.25rem!important;
}
.ck-content{
  height: 160px;
  overflow-y: auto;
}
.ck.ck-editor__editable_inline {
  padding: 0.375rem 0.75rem!important;
}
.ck.ck-editor__main>.ck-editor__editable:not(.ck-focused){
  border-color: #ced4da!important;
  border-bottom-left-radius: 0.25rem!important;
  border-bottom-right-radius: 0.25rem!important;
}
.ck.ck-editor__main>.ck-editor__editable.ck-focused{
  border-color: #86b7fe!important;
  box-shadow: 0px 0px 0px rgba(0,0,0,0)!important;
}
.ck-placeholder,.ck-content p{
  font-size: 15px;
  line-height: 1;
}
/* loading animate */
.letter {
  display: inline-block;
  font-weight: 700;
  animation-name: loadingF;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: linear;
}
.l-1{ animation-delay: 0.48s;}
.l-2{ animation-delay: 0.6s;}
.l-3{ animation-delay: 0.72s;}
.l-4{ animation-delay: 0.84s;}
.l-5{ animation-delay: 0.96s;}
.l-6{ animation-delay: 1.08s;}
.l-7{ animation-delay: 1.2s;}
.l-8{ animation-delay: 1.32s;}
@keyframes loadingF {
    0%{ opacity: 0;}
  100%{ opacity: 1;}
}
@media screen and (max-width: 575.9px){
  .editor-container .form-label{ font-size: 16px;}
}
/* 
---------------------------------------------
編輯單一課程資訊頁　：　大單元列表相關
--------------------------------------------- 
*/
.chapter-items{ margin-bottom: 24px;}
.chapter-header{
  background-color: #ECF2FF;
  padding: 12px 20px;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  box-shadow: 0px 0px 2px rgba(34,102,141,0.4);
}
.chapter-header .chapter-show{
  flex: 0 0 52px;
}
.chapter-header .chapter-title{
  flex: 1;
  font-weight: bold;
  font-size: 17px;
  line-height: 1.5rem;
}
.chapter-header .chapter-action{
  flex: 0 0 240px;/*20241028*/
  text-align: right;
}
.chapter-header .chapter-class{
  flex: 0 0 100px;
  color: #E76032;
  font-size: 0.9rem;
  text-align: right;
  padding: 4px 0px;
}
.chapter-header .chapter-class[aria-expanded="true"] .fa-chevron-down:before{
  content: "\f077";
}
.chapter-items .btn-action{
  font-size: 14px;
  padding: 2px 8px;
}
.chapter-items .class-badge{
  font-size: 13px;
  border-radius: 20px;
  margin-right: 8px;
  color: #ffffff;
  padding: 2px 8px;
  background-color: #6C757D;
}
.class-badge.bg-test{ background-color: #F80003;}
.class-badge.bg-quest{ background-color: #198754;}
.chapter-items .class-remarks{
  color: var(--lightgray);
  font-weight: normal;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 767.9px){
  .chapter-header{ 
    flex-wrap: wrap;
    padding: 12px;
  }
  .chapter-header .chapter-class{ flex: 0 0 30px;}
  .chapter-header .chapter-title{
    flex: 0 0 calc(100% - 82px);
    font-size: 16px;
  }
  .chapter-header .chapter-action{
    flex: 0 0 100%;
    order: 1;
    padding-left: 52px;
    text-align: left;
    margin-top: 8px;
  }
  .chapter-items .class-remarks{
    -webkit-line-clamp: 10;
  }
}
/* 
---------------------------------------------
編輯單一課程資訊頁　：　小單元列表相關
--------------------------------------------- 
*/
.chapter-items p.class-name{
  font-size: 15px;
  font-weight: 600;
  color: #555555;
  margin-bottom: 0px;
}
.table-class thead{ 
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  position: absolute;
}
.table-class tbody{ border-top-width: 0px!important;}

.table-class td.row-sort{ 
  width: 120px;
  text-align: center;
}
.table-class i.drag-icon{
  cursor: pointer;
  padding: 8px 2px;
}
.table-class td.row-time{ width: 88px;}
.table-class td.row-action{ width: 180px;}
.table-class td.row-show{ width: 60px;}

.table-class .btn-class-action{
  width: 32px;
  height: 32px;
  padding: 0px;
  line-height: 30px;
  text-align: center;
  border-radius: 0.25rem;
  font-size: 15px;
  margin: 0px 4px 0px 0px;
  color: #445069;
}
.table-class .btn-class-delete{
  width: 32px;
  height: 32px;
  padding: 0px;
  line-height: 30px;
  text-align: center;
  border-radius: 0.25rem;
  font-size: 15px;
  margin: 0px 8px 0px 0px;
}
@media screen and (max-width: 991.9px){
  .table-rwd.table-class tbody tr td {
    padding: 8px 12px;
  }

  .table-rwd.table-class tbody tr td:first-child {
    padding: 16px 12px 8px;
  }
  .table-rwd.table-class tbody tr td:last-child {
    padding: 8px 12px 16px;
  }
  .table-rwd.table-class tbody tr td:before {
    flex: 0 0 76px;
  }

  .table-class td.row-sort,
  .table-class td.row-time,
  .table-class td.row-action,
  .table-class td.row-show{
    width: 100%;
    text-align: left;
  }
  .table-rwd.table-class tbody tr td.row-sort > div{
    display: flex;
    flex: 1;
    justify-content: space-between;
  }
  .table-rwd.table-class tbody tr td.row-sort .drag-icon{
    order: 2;
  }
  .table-class .class-badge{
    background-color: transparent;
    padding: 0px;
    color: var(--gray);
    font-size: 14px;
  }
  .table-class p.class-name{
    font-size: 14px;
    font-weight: normal;
    color: var(--gray);
    margin-bottom: 4px;
  }
  .table-class td.row-show{
    order: -1;
  }
}
/* 
---------------------------------------------
編輯單一課程資訊頁　：　視窗功能相關
--------------------------------------------- 
*/
.modal-footer > .btn:last-child {
  margin-right: 0px;
}
.table-excel th{ min-width: 80px;}
.table-excel th.th-question{ min-width: 120px;}
.table-excel th.th-options{ min-width: 160px;}
.table-excel th.th-ans{ min-width: 160px;}
.table-excel th.th-score{ width: 80px;} 
/* 編輯單元  */
#class-modal .table-rwd td{
  font-size: 14px;
  color: #777777;
}
/* 修改解答 */
.test-edit li{
  display: inline-block;
  margin: 4px 8px;
}
.editor-container .input-checkbox { display: none;}
.editor-container .label-checkbox{
  font-size: 14px;
  display: block;
  position: relative;
  cursor: pointer;
  font-weight: normal;
  padding-left: 28px;
}
.editor-container .sort-video .label-checkbox{
  display: inline-block;
}
.editor-container .label-checkbox::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
  font-weight: 900;
  color: transparent;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 2px;
  background: #fff;
  border: 1px solid #ced4da;
  left: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.editor-container .input-checkbox:checked + .label-checkbox::before {
  color: #00539C;
}
/* 補考設定 */
.editor-container .td-checkbox{ width: 60px;}
.editor-container .td-checkbox .label-checkbox{
  height: 20px;
}
/* 作答結果 */
.stu-ans{
  border: 1px solid #dedede;
  background-color: #f4f4f4;
  padding: 8px;
  color: #4d4d4d;
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
}
.stu-ans.ans-items{
  background-color: transparent;
  border-width: 0px 0px 2px 0px;
  border-style: dotted;
  font-size: 15px;
  color: #A86464;
}
.stu-ans > .d-flex > div:first-child{
  flex: 0 0 360px;
  word-break: break-all;
}
.stu-ans > .d-flex > div:last-child{
  flex: 0 0 160px;
}
.stu-ans.ans-items > .d-flex > div:first-child{
  flex: 0 0 100px;
}
.stu-ans.ans-items > .d-flex > div:nth-child(3){
  flex: 0 0 200px;
}
.stu-ans.ans-items > .d-flex > div:last-child{
  flex: 0 0 140px;
}
.ans-container .table-ans{
  border: 1px solid #dddddd;
}
.ans-container .table-ans th{
  border-bottom: 1px solid #dddddd;
}
.ans-container .table-ans tbody{
  border-top: 0px;
}
.ans-container .stu-ans[aria-expanded="true"] .fa-caret-down:before{
  content: "\f0d8";
}
.ans-container .stu-ans[aria-expanded="true"] .fa-angle-down:before{
  content: "\f106";
}
@media screen and (max-width: 991.9px) {
  #class-modal .table-rwd tbody tr td:first-child {
    padding: 10px 9px 3px;
  }
  #class-modal .table-rwd tbody tr td:last-child {
    padding: 3px 9px 10px;
  }
  .stu-ans > .d-flex{ flex-wrap:wrap;}
  .stu-ans > .d-flex > div:first-child,
  .stu-ans > .d-flex > div:nth-child(2),
  .stu-ans > .d-flex > div:last-child{
    flex: 0 0 100%;
  }
  .stu-ans.ans-items > .d-flex{ flex-wrap: nowrap;}
  .stu-ans > .d-flex > div{
    padding: 4px 0px;
    border-bottom: 1px dotted #cccccc;
  }
  .stu-ans > .d-flex > div:last-child,
  .stu-ans.ans-items > .d-flex > div{
    border-bottom-width: 0px;
  }
  .table-quest-ans.table-rwd tbody tr td:before{
    flex: 0 0 60px;
  }
  .stu-ans.ans-items > .d-flex{
    flex-wrap: wrap;
  }
  .stu-ans.ans-items > .d-flex > div:first-child,
  .stu-ans.ans-items > .d-flex > div:nth-child(2),
  .stu-ans.ans-items > .d-flex > div:last-child{
    flex: 0 0 100%;
  }
}

/* ----- 以下配合移除csp的unsafe-inline將頁面的style移到css檔 ----- */
.maxWidth80px;{
    max-width: 80px;
}
.videoDivSty{
    display: flex; align-items: center; justify-content: center; height: 70vh;
}
.videoDivSty2{
    display: flex; justify-content: center; align-items: center; max-height: 70vh; width: 100%; height: 100%;
}
.videoSty{
    max-height: 70vh; width: 100%;
}