/*color start
  使用 tailwindcss
  故幾種顏色在文件中已定義好

  **background-color
  #721f6e rgb(114 31 110)主題紫
  bg-purple-main

  #6d256d rgb(109 37 109)深紫
  bg-purple-deep

  #7f1084 rgb(127 16 132)淡紫
  bg-purple-light

  **text-color
  text-purple-main
  text-purple-deep
  text-purple-light
*/

/*
  class="bg-violet-700/40"
*/

/*color end*/



/*--tw-bg-opacity: 0.4;
  background-color: linear-gradient(180deg, rgb(109 40 217/0.4) , #d084e7 );
  color:#f8f8f8;*/

html,
body {
  background-color: #f6f6f6;
}

@media (max-width: 768px) {
  header .header_inner .left-side #logo img.logo_mobile {
    display: block !important;
    height: 25px;
  }
}

@media (min-width: 768px) {
  header .header_inner .left-side #logo img.logo_mobile {
    display: none !important;
  }
}

.cd-secondary-nav li.active a, .cd-secondary-nav li.uk-active a {
  border-bottom: 3px solid #7f1084 !important;
}

.cd-secondary-nav li.active a, .cd-secondary-nav li.uk-active a, .cd-secondary-nav li:hover a {
  color: #7f1084 !important;
}

.is-transparent {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.3) !important;
    --tw-backdrop-blur: blur(40px);
}



.is-dark .header_menu > ul > li > a,
.is-dark .header_menu > ul > li > a:after {
  color: rgb(255, 255, 255) !important;
}

.header_menu > ul > li > a {
  color: rgb(255, 255, 255);
  font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif;
  font-size: 20px;
  padding: 1.5rem 0.9rem;
  text-transform: capitalize;
  font-weight: 500;
  margin: 0 4px;
  padding: 6px 8px;
  letter-spacing: -.01em;
  -webkit-transition: .2s color;
  transition: .2s color;
  border-radius: 4px;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.2;
}

.header_menu ul li a:after {
  content: '\e92e';
  padding-left: 2px;
  margin-top: 2px;
  line-height: 13px;
  color: rgb(255, 255, 255);
  opacity: 1;
  font-size: 16px;
}

header {
  background-color: rgb(78 4 80 / 82%);;
  border-bottom: 1px solid #E5E9EF;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  height: 72px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

header .header_inner .left-side .triger::before {
  font-family: "Feather-Icons";
  font-size: 22px;
  content: '\e98f';
  line-height: 30px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  color: white;
}

@media (max-width: 1200px){
  header .header_menu ul li a:after,
  header .header_menu ul ul li a:after {
    content: '\e930';
    margin-top: 7px;
    line-height: 13px;
    position: absolute;
    right: 20px;
    color: #ffffff;
    font-size: 20px;
  }
}


.note_font{
  font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif;
}

.transparent{
  background-color: rgb(114 31 110 /90%);
}

.transparent_gray{
  background-color: rgba(124, 121, 121, 0.5);;
}

.header_menu.is-visible {
  display: block !important;
  position: fixed;
  background: rgb(78 4 80 / 82%);
  width: 50%;
  left: 0;
  top: 0;
  z-index: 2;
  height: 100vh;
  overflow: hidden;
}

/*.is-dark .header_menu > ul > li > a:hover, .is-dark .header_menu > ul > li > a:hover {
  background-color: rgba(176, 169, 177, 0.82);
}*/

a:hover{
  color: rgba(127, 16, 132, 0.82);
}

.hover_gray:hover{
  background-color: rgba(176, 169, 177, 0.82);
}

.sidebar-lavender{
    box-shadow:0 3px 3px -2px rgba(39,44,51,.1),0 3px 4px 0 rgba(39,44,51,.04),0 1px 8px 0 rgba(39,44,51,.02);
    background:rgb(247, 227, 255)
}

.bg-nthu-dark-purple{
    background:#721f6e
}

.fs-16px{
    font-size: 16px;
}

.fs-title{
    font-size: 20px;
}

.fs-color-purple{
    color: #cb40f5;
}

/*course card*/
.courseCard{
    overflow-y:scroll;
    max-height:180px;
    min-height:180px;
}

/*botton*/
.bg-purple-600:hover{
  --tw-bg-opacity: 0.4;
  background-color: linear-gradient(180deg, rgb(109 40 217/0.4) , #d084e7 );
  color:#f8f8f8;
}

.smallbtn{
    padding-top: 0.25rem;
    padding-right: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.25rem;
}

.btn-purple.disabled,.btn-purple:disabled{
    color:#212529
}
.btn-purple.disabled,.btn-purple:disabled{
    background-color:#d5ace2;
    border-color:#d5ace2
}

.btn-purple:not(:disabled):not(.disabled).active,.btn-purple:not(:disabled):not(.disabled):active,.show>.btn-purple.dropdown-toggle{
    color:#fff
}

.btn-purple:not(:disabled):not(.disabled).active,.btn-purple:not(:disabled):not(.disabled):active,.show>.btn-purple.dropdown-toggle{
    background-color:#d5ace2;border-color:#d5ace2
}

.btn-purple:not(:disabled):not(.disabled).active:focus,.btn-purple:not(:disabled):not(.disabled):active:focus,.show>.btn-purple.dropdown-toggle:focus{
    box-shadow:inset 0 3px 5px rgba(39,44,51,.125),0 0 0 1px rgba(106,170,55,.5)}




/*for figure so big*/
figure {
    background-color: #fff;
    padding: 5px;
    font-size: .875em;
    display: table;
}

figure img {
    display: block;
    width: 100%;
}


/*text*/
.text-table-info{
    font-size: 15px;
    color: rgba(20, 15, 20, 0.596);
}

textarea{
    height: auto;
    line-height: 27px;
    min-height: 130px;
    min-width: 100%;
    padding: .5rem .75rem;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #edf0f2;
    border-radius: .25rem;
    box-shadow: inset 0 1px 1px rgb(39 44 51 / 8%);
}

.ck-content {
    height: 250px;
    min-width: 100%;
    padding: .5rem .75rem;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #edf0f2;
    border-radius: .25rem;
    box-shadow: inset 0 1px 1px rgb(39 44 51 / 8%);
}


/*loader*/
.loader-purple{
    border-color: #6610f2 #6610f2 transparent;
}

.loader-center{
    margin-left: auto;
    margin-right: auto;
}



/*border*/
.border-r10{
    border-radius:10px;
}

.border-card-forms{
    border-radius:10px;
    border-style: solid;
    border-color: rgb(213, 224, 235);
    max-width: 480px;
    min-height: 500px;
    padding: 1.5rem;
}

.item-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

/*icon*/
.icon-f22m10{
    font-size: 22px;
    margin-right: 10px;
}

.disabled {
    pointer-events: none;
    cursor: default;
}


.header_widgets, .header_widgets:hover {
  color: rgb(127 16 132);
}




/*
<svg class="animate-spin -ml-1 mr-3 h-5 w-5" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
*/

.animate-spin{
    animation: spin 1s linear infinite;
    color: blueviolet;

    @keyframes spin {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
}

/*table start*/

.styled-table {
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.styled-table thead tr {
  background-color: rgb(127 16 132 /80%);
  color: #ffffff;
  text-align: left;
  font-size: 18px;
  text-align: center;
}

.styled-table th,
.styled-table td {
  padding: 12px 15px;
  text-align: center;
}

.styled-table tbody tr {
  border-bottom: 1px solid #dddddd;
  font-size: 18px;
  text-align: center;
}

.styled-table tbody tr:nth-of-type(even) {
  background-color: #f2e7f5;
}

.styled-table tbody tr:last-of-type {
  border-bottom: 2px solid rgb(127 16 132);
}


.header_menu.is-visible {
  display: block !important;
  position: fixed;
  background: rgba(111, 0, 145, 0.9);
  width: 35%;
  left: 0;
  top: 0;
  z-index: 2;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 560px) {
  .header_menu.is-visible,
  .header_menu.is-visible li li .uk-drop.uk-open {
    width: 65% !important;
  }
}

header .header_inner .left-side #logo img {
  max-width: none;
  height: 50px;
}

/*table end*/



#curriculum li {
  margin-bottom: 3px;
}
#curriculum li.uk-active {
  background-color: rgba(42, 65, 232, 0.07);
  color: #2a41e8;
  border-radius: 10px;
  display: list-item !important;
}
.course-watch .sidebar ul.course-curriculum-list li > a {
  word-break: break-all;
  margin: 0;
}
.course-watch .sidebar ul.course-curriculum-list li.uk-active > a {
  color: #2a41e8;
  background-color: unset;
  border-radius: unset;
}
.course-watch .sidebar ul.course-curriculum-list li > div {
  padding: 5px 10px;
}
#curriculum ul li a:hover, #curriculum ul li.active-submenu a:hover {
    background-color: unset;
}
#curriculum ul li:hover, #curriculum ul li.active-submenu:hover {
  background-color: #f3f4f6;
  border-radius: 10px;
}
#curriculum ul li a:after {
  content: none;
}
.idxcuslisticons {
  width: 38px;
  min-width: 38px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.idxcuslisticons > i {
  padding-right: 0 !important;
  top: 0 !important;
}
/*  */
@media (min-width: 1200px) {
  .sidebar .side_overly {
    background-color: unset;
  }
}
@media (max-width: 1200px) {
  #inxcuslist {
    width: auto;
  }
}
@media (min-width: 1024px) {
  .course-watch .sidebar ul.course-curriculum-list li > a {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 1024px) {
  .course-watch .sidebar {
    flex-wrap: wrap;
  }
  #backbtn {
    display: none;
  }
  #courseInfoName {
    width: calc(100% - 40px);
  }
  .course-watch.is-active .btn-close-mobi {
    left: unset;
    right: 1px;
  }
  #inxcuslist {
    width: calc(100% - 20px);
    margin-left: calc(-100%);
  }
  .course-watch.is-active #inxcuslist {
    margin-left: 0;
  }
}

/*course info review-bars*/
.full_bar {
  position: relative;
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background-color: #e2e2e2;
}

.full_bar .bar_filler {
  position: absolute;
  top: -1px;
  left: 0;
  right: -1px;
  bottom: -1px;
  height: auto;
  background-color: #721f6e;
  border-radius: 8px;
}

/*footer*/
.bc-gray{
  background-color: #696969;
}

.checkbox input:checked + label span.checkbox-icon {
  border-color: #7f1084;
  background-color: #7f1084;
}

.radio input[type="radio"]:checked + label .radio-label {
  border-color: #7f1084;
  background-color: #7f1084;
  -webkit-box-shadow: inset 0 0 0 3px #fff;
  box-shadow: inset 0 0 0 3px #fff;
}

.input_number {
  width:60px!important;
  height:40px!important;
  padding:5px!important;
}

.bg-purple-deep:hover{
  background-color: rgb(127 16 132)!important;
  color: white;
}



/* fuyoru */
/* discuss */

.newdiscuss{
  margin: 16px 0;
}
.newdiscuss label{
  margin-right: 8px;
  margin-bottom: 0;
}
.discussSearch input{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.discussSearch button{
  font-size: 32px;
  background-color: #e0e0e0;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: 0 7px;
  height: 46px;
}
.sp-title{
  width: 72%;
}
.sp-title a p{  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* discussinfo */
.flex-d-c{
  flex-direction: column;
}
.w-space-no{
  white-space: nowrap;
}
.sp-edit{
  margin-left: auto;
}
.discussinfo-txt{
  word-wrap: break-word;
  padding: .5rem 0 0 4rem;
}
.discussinfo-title{
  width: 100%;
  word-wrap: break-word;
}
@media (max-width: 500px) {
  .flex-d-cr{
    flex-direction: column-reverse;
  }
  .sp-edit span{
    padding-top: 0;
  }
}

/* quiz */
.sm-w-100,.sm-w-400{
  width: 100%;
}
@media (min-width: 500px){
  .sm-w-100{
    width: 150px;
  }
  .sm-w-400{
    width: 400px;
  }
}

/* list-grid */
.h-360px{
  height: 360px;
}
.h-200px{
  height: 200px;
}
@media (min-width:571px){
  .sm\:grid-cols-f2{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (min-width:850px){
  .md\:grid-cols-f3{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}
@media (min-width:1130px){
  .lg\:grid-cols-f4{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}