
:root {
  --bs-body-bg: #FAFAFA;
  --bs-banner-bg:#F3F3F3;
  --bs-main-red: #9C2034;
  --bs-main-gray: #4B4B4B;
  --bs-main-bg: #F5F5F5;
  --bs-block-bg: #e5e5e5;
  --bs-block2-bg:#e9ecef;
  --bs-main-book: #826642;
  --bs-main-blue: #0c52b9;
  --bs-main-font: #3C3C3E;
  --bs-red-ncku-01: #3F030D;
  --bs-red-ncku-02: #A41830;
  --bs-review-no:#D27D0E;
  --bs-green:#198754;
  --bs-red: #F82749;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-yellow-100: rgb(255, 205, 0);
  --bs-red-ncku-01-rgb: 63, 3, 13;
  --bs-red-ncku-02-rgb: 164, 24, 48;
  --bs-red-ncku-03-rgb: 156, 32, 52;
  --bs-book-ncku-01-rgb: 130, 102, 66;
  --bs-gray-ncku-01-rgb: 84, 84, 88;
  --bs-gray-ncku-02-rgb: 225, 225, 225;
  --bs-gray-ncku-03-rgb: 243, 243, 243;
  --bs-yellow-100-rgb: 255, 205, 0;
  --bs-font-sans-serif:  -apple-system,  BlinkMacSystemFont, "MessinaSansTrial", "Microsoft JhengHei", "EudcKai"  , "EudcMing"  ,"Segoe UI",  "Roboto",  "Helvetica Neue", Arial, sans-serif,  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --bs-font-monospace: "MessinaSansTrial";
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-border-color:#cbcbcb;
}

/* 文字及背景用色 */
.color-main-red {
  color:var(--bs-main-red);
}
.color-main-gray {
  color:var(--bs-main-gray) !important;
}
.color-main-bg {
  color: var(--bs-main-bg);
}
.color-main-book {
  color: var(--bs-main-book);
}
.color-main-font {
  color: var(--bs-main-font);
}

.color-red-ncku-01 {
  color: var(--bs-red-ncku-01);
}
.color-red-ncku-02 {
  color: var(--bs-red-ncku-02);
}
.color-review-no {
  color: var(--bs-review-no);
}
.color-review-ok {
  color: var(--bs-review-ok);
}
.color-gray-500 {
  color:var(--bs-gray-500);
}
.color-gray-600 {
  color:var(--bs-gray-600);
}
.color-gray-700 {
  color:var(--bs-gray-700);
}
.color-gray-800 {
  color:var(--bs-gray-800);
}
.color-gray-900 {
  color:var(--bs-gray-900);
}
.bg-main-red {
  background: var(--bs-main-red);
}
.bg-main-gray {
  background: var(--bs-main-gray);
}
.bg-main-bg {
  background: var(--bs-main-bg);
}
.bg-block {
  background: var(--bs-block-bg);
}
.bg-block2 {
  background: var(--bs-block2-bg);
}
.bg-banner {
  background: var(--bs-banner-bg);
}
.bg-main-bgcolor {
  background-color: var(--bs-main-bg);
}
.bg-main-book {
  background: var(--bs-main-book);
}
.bg-red-ncku-01 {
  background: var(--bs-red-ncku-01);
}
.bg-red-ncku-02 {
  background: var(--bs-red-ncku-02);
}
.bg-gray-500 {
  background: var(--bs-gray-500);
}
.bg-gray-600 {
  background: var(--bs-gray-600);
}
.bg-gray-700 {
  background: var(--bs-gray-700);
}
.bg-gray-800 {
  background: var(--bs-gray-800);
}
.bg-green {
  background: var(--bs-green);
}
.bg-gray-900 {
  background: var(--bs-gray-900);
}
.border-main {
  border-color: var(--bs-main-bg);
}
.bolder-gray {
  border-color: var(--bs-main-gray)!important;
}
.bolder-book {
  border: 2px dashed #826642;
}
.text-bg-main {
  color: #fff !important;
  background-color: RGBA(166, 54, 72, var(--bs-bg-opacity, 1)) !important;
}
.text-bg-darkgreen {
    color: #fff !important;
    background-color: #385723;
}
.text-bg-darkblue {
    color: #fff !important;
    background-color: #2A5485;
}
.error {
  color: var(--bs-red-ncku-02)!important;
  font-weight: bold;
  padding: 5px;
}
.font-engword {
  word-break: keep-all;
}
.modal .fade .modal-dialog .modal-body{
  z-index: 1030;
}
.modal-header {
  background: var(--bs-main-bg);
  color: var(--bs-main-red);
}
.copyright-text {
  font-size:.8rem;
}
.form-control:disabled {
    background-color: #e5e5e5;
    opacity: 1;
}

/* 罕用字，不能刪 */
@font-face {
  font-family: 'EudcKai';
  src: url('https://i.ncku.edu.tw/ncku/ncku_cns/font/EUDCKAI.TTF');
  font-display: fallback;
  unicode-range:  U+E000-EFFF, U+F000-F848 ;
}
@font-face {
  font-family: 'EudcMing';
  src: url('https://i.ncku.edu.tw/ncku/ncku_cns/font/EudcMing.TTF');
  font-display: fallback;
  unicode-range:  U+E000-EFFF, U+F000-F848 ;
}
/* 英文字型 bootstrap-css-fonts*/
@font-face {
font-family:'MessinaSansTrial';
src: url('fonts/MessinaSansWebTrial-Regular.eot'); /* IE9 Compat Modes */
src: url('fonts/MessinaSansWebTrial-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('fonts/MessinaSansWebTrial-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/MessinaSansWebTrial-Regular.woff') format('woff'); /* Pretty Modern Browsers */
font-weight: 400;
font-style: normal;
font-stretch: normal;
unicode-range: U+000D-FB04;
}

body {
  margin: 0;
  font-family: -apple-system,  BlinkMacSystemFont, "MessinaSansTrial", "Microsoft JhengHei", "EudcKai"  , "EudcMing"  ,"Segoe UI",  "Roboto",  "Helvetica Neue", Arial, sans-serif,  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-main-font);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* word-break: keep-all; */
}
.bg-apply {
  background-image: url("../css/images/bg-apply.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  backdrop-filter: blur(10px);
}

a {
  transition: all .35s;
  outline: none;
  color: #666;
  position: relative;
}

/* Layout 上方TOP */
.top-logo {
  width: 175px;
}

@media (min-width: 720px) and (min-height: 500px) {
  .top-logo {
      width: 260px;
  }
}
.nav_border_bottom_line {
  border-bottom: 5px solid #4b4b4b;
}
.nav-pills .nav-link {
  background: 0 0;
  border-top: 5px solid #4B4B4B;
  border-radius: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #4B4B4B;
  transition: 0.4s;
}
html[lang="en-US"] .nav-pills .nav-link {
  font-size: 1.1rem;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background-color: #fff;
  color: #a71522;
  border-top: 5px solid #a71522;
  transition: 0.4s;
}
@media (max-width: 767px) {
  .nav-pills .nav-link {
      background: 0 0;
      color: #4B4B4B;
      transition: 0.4s;
      text-align: center;
      border-top: 1px solid #4B4B4b;
  }
  .nav-pills .nav-link[type="button"]:checked
  {
      background-color: #a71522;
      color: #fff;
      padding-top: 1rem!important;
      padding-bottom: 1rem!important;
      font-size: 1.2rem;
      font-weight: 600;
  }
}
.offcanvas.offcanvas-top {
  height: 100%;
  max-height: 100%;
  transition: transform .3s ease-in-out;
}
.btn {
  font-family: -apple-system,  BlinkMacSystemFont, "MessinaSansTrial", "Microsoft JhengHei", "EudcKai"  , "EudcMing"  ,"Segoe UI",  "Roboto",  "Helvetica Neue", Arial, sans-serif,  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.modal .fade .modal-dialog .modal-body{
  z-index: 1030;
}
.modal-header {
  background: var(--bs-main-bg);
  color: var(--bs-main-red);
}
.footer-fs {
  font-size: .8rem;
}
.top-right-title-fs {
  color: var(--bs-red-ncku-02);
}
.shadow {
  box-shadow: .2rem .5rem 1rem .3rem rgba(0, 0, 0, .15) !important;
}
.btn-main {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-main-red);
  --bs-btn-border-color: var(--bs-main-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-main-gray);
  --bs-btn-hover-border-color: var(--bs-main-gray);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-main-red);
  --bs-btn-active-border-color: var(--bs-main-red);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-gray-600);
  --bs-btn-disabled-border-color: var(--bs-gray-600);
}
.btn-main-internation {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-red-ncku-01);
  --bs-btn-border-color: var(--bs-red-ncku-01);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg:  var(--bs-main-gray);
  --bs-btn-hover-border-color:  var(--bs-main-gray);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-red-ncku-01);
  --bs-btn-active-border-color: var(--bs-red-ncku-01);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-gray-600);
  --bs-btn-disabled-border-color: var(--bs-gray-600);
}
.btn-outline-main {
  --bs-btn-color: var(--bs-main-red);
  --bs-btn-border-color: var(--bs-main-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg:  var(--bs-main-red);
  --bs-btn-hover-border-color:  var(--bs-main-red);
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg:  var(--bs-main-red);
  --bs-btn-active-border-color:  var(--bs-main-red);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}
.btn-main-book {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-main-book);
  --bs-btn-border-color: var(--bs-main-book);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-red-ncku-01);
  --bs-btn-hover-border-color: var(--bs-red-ncku-01);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-main-book);
  --bs-btn-active-border-color: var(--bs-main-book);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-gray-600);
  --bs-btn-disabled-border-color: var(--bs-gray-600);
}
.btn-review-ok {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-green);
  --bs-btn-border-color: var(--bs-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-red-ncku-01);
  --bs-btn-hover-border-color: var(--bs-red-ncku-01);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-green);
  --bs-btn-active-border-color: var(--bs-green);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-gray-600);
  --bs-btn-disabled-border-color: var(--bs-gray-600);
}
.btn-review-no {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-red);
  --bs-btn-border-color: var(--bs-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-red-ncku-01);
  --bs-btn-hover-border-color: var(--bs-red-ncku-01);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-red);
  --bs-btn-active-border-color: var(--bs-red);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-gray-600);
  --bs-btn-disabled-border-color: var(--bs-gray-600);
}
.btn-outline-dark {
  --bs-btn-color: #4B4B4B;
  --bs-btn-border-color: #4B4B4B;
  --bs-btn-hover-color: #4B4B4B;
  --bs-btn-hover-bg: #f5f5f5;
  --bs-btn-hover-border-color: #4B4B4B;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4B4B4B;
  --bs-btn-active-border-color: #4B4B4B;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #4B4B4B;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #4B4B4B;
  --bs-gradient: none;
}
.btn-blue {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-main-blue);
  --bs-btn-border-color: var(--bs-main-blue);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-main-blue);
  --bs-btn-hover-border-color: var(--bs-main-blue);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-main-blue);
  --bs-btn-active-border-color: var(--bs-main-blue);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-main-blue);
  --bs-btn-disabled-border-color: var(--bs-main-blue);
}
.btn-login-incku {
  padding: 30px 20px 30px 100px; /* to ensure room */
  background-image: url(../../images/logo-CKPortal-word.svg);
  background-size: 85px 85px;
  background-repeat: no-repeat;
  background-position: center;
  color: #4b000d;
  background-color: #e0e4e3;
  border: 0px;
}
.btn-login-incku-en {
  padding: 30px 20px 30px 100px; /* to ensure room */
  background-image: url(../../images/logo-en-CKPortal-word.svg);
  background-size: 85px 85px;
  background-repeat: no-repeat;
  background-position: center;
  color: #4b000d;
  background-color: #e0e4e3;
  border: 0px;
}

.btn-login-id {
  height: 60px;
  padding-left: 20px;
  padding-right: 20px;
  background-size: 55px 55px;
  background-repeat: no-repeat;
  background-position: center;
  color: #4b000d;
  background-color: #e0e4e3;
  border: 0px;
}
.btn-language {
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
  cursor: pointer;
  z-index: 999;
  font-size: .75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-font {
  color:var(--bs-gray-600);
  font-size: 12px;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bclip-path:url(%23b);%7D.b%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='b'%3E%3Crect width='22' height='22'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='a' class='a'%3E%3Cpath class='b' d='M20,10A10,10,0,1,1,10,0,10,10,0,0,1,20,10M5.625,9.375a.625.625,0,0,0,0,1.25h8.75a.625.625,0,0,0,0-1.25Z' transform='translate(1 1)'/%3E%3C/g%3E%3C/svg%3E");
  height: 1.8rem;
  width: 3.6rem;
  border-radius: 3.25rem;
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='22' height='22' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bclip-path:url(%23b);%7D.b%7Bfill:%23fff;%7D%3C/style%3E%3CclipPath id='b'%3E%3Crect width='22' height='22'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='a' class='a'%3E%3Cpath class='b' d='M20,10A10,10,0,1,1,10,0,10,10,0,0,1,20,10M15.037,6.213a.937.937,0,0,0-1.35.027L9.346,11.771,6.73,9.154a.937.937,0,0,0-1.325,1.325l3.307,3.309a.938.938,0,0,0,1.349-.025l4.99-6.237a.938.938,0,0,0-.012-1.312Z' transform='translate(1 1)'/%3E%3C/g%3E%3C/svg%3E");}
.form-switch.form-check .form-check-input {
  border: 0;
  background-color: #888888;
}
.form-switch.form-check .form-check-input:checked {
  background-color: var(--bs-main-red);
}
/* 審核作業 */
.filter-label {
  display: flex;
  padding: 0.3rem .8rem;
  box-shadow: 0 0 0 1px #a5a5a5;
  margin: 0.2rem 1rem 0.5rem 0;
  border-radius: 90px;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 700;
}
.filter-label-cross {
  min-width: 1rem;
  height: 1rem;
  background-image: url(../css/images/icons-plus.svg#16-close-dark);
  background-repeat: no-repeat;
}
@media (min-width: 899px) {
  .filter-label {
      flex-wrap: wrap;
  }
  .query-filters,.query-filters-agree,.query-filters-disagree {
      display: flex;
      flex-wrap: wrap;
  }
}
@media (max-width: 898px) {
  .query-filters,.query-filters-agree,.query-filters-disagree {
      display: block;
  }
}
.ncku-list-columns, .ep-comment__reply>ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .ncku-list-columns, .ep-comment__reply>ul {
      -moz-columns: 4;
      columns: 4;
  }
}
.ncku-list-uncolumns, .ep-comment__reply>ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}
.filter-button {
  display: block;
  text-decoration: none;
  width: 100%;
  box-shadow: none;
}
.filter-button input[type='checkbox'] {
  opacity: 0;
  position: absolute;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.filter-button input[type='checkbox']+label {
  display: block;
  position: relative;
  max-width: 50rem;
  font-weight: normal;
  color: var(--color-dark,#2d2d2d);
  font-size: 1.2rem;
  letter-spacing: 0;
  line-height: 1.3;
  padding: 0.5rem 0.7rem 0.5rem 2.8rem;
  width: 100%;
}
.filter-button input[type='checkbox']:checked+label::before, .filter-button input[type='checkbox']:indeterminate+label::before {
  background-color: var(--bs-red-ncku-03);
  border: 0 none;
  background-image: url(../../images/icons-plus.svg#16-checkbox_check-light);
  background-position: center center;
  background-repeat: no-repeat;
}
.filter-button input[type='checkbox']+label::before {
  content: '';
  position: absolute;
  top: 0.6rem;
  left: 1rem;
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border: 0.18rem solid var(--color-dark,#2d2d2d);
  background-color: var(--color-light,#fff);
}
.accordion-content {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  padding-right: 0;
}
.course-search {
  align-items: center;
  display: flex;
  width: 100%;
}
.course-search .aalto-search-field-button {
  background-color: var(--bs-red-ncku-03);
  color: var(--color-light,#fff);
  height: 50px;
  top: 0;
  right: 0;
  left: unset;
  width: 4.2rem;
  border: 1px solid var(--bs-red-ncku-03);
  border-radius: 0 6.4rem 6.4rem 0;
  background-image: url(../../images/icons-plus.svg#16-magnifier_lens-light);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: left 1.2rem center;
}
@media (max-width: 900px) {
  .course-search-notext {
      text-align: center;
      padding-top: 10px
  }
}

/* 課程全覽 */
.btn_dept {
  cursor: pointer;
}

.all-dep-list {
  height: 250px;
  overflow: auto;
}
/* 登入後 */
.bi {
  width: 2em;
  height: 2em;
  vertical-align: -0.125em;
  fill: currentcolor;
}

.form-floating>label {
  z-index: auto!important;
}



/* 登入頁 */
.login-block-bg {
  background: transparent linear-gradient(220deg, #e0e0e0b0 0%, #fbfbfb96 100%) 0% 0% no-repeat padding-box;
  border: 8px solid #e5e5e5;
  border-radius: 2rem;
}
.login-footer-bg {
  background: transparent linear-gradient(220deg, #f8f8f8b0 0%, #ffffff96 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF;
  border-radius: 1rem;
}
.common-bg {
  background: transparent linear-gradient(220deg, #f8f8f8b0 0%, #ffffff96 100%) 0% 0% no-repeat padding-box;
  border: 2px solid #FFFFFF;
  border-radius: 1rem;
}

.ncku-dt-details {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 3px;
  border-bottom: 1px solid #9c2034;
  padding: 1rem;
  margin:0px;
}

.ncku-dt-details > li {
  flex: 1 1 0;
  min-width: fit-content;
  border-left: 5px solid #e0e0e0;
  /* border-top: 1px solid #b1b1b1; */
  padding-left: 0.5rem;
  padding-top: 0.3rem;
}

/* jQuery BlockUI 插件 */
div.blockMsg {
  width: 300px;
  text-align: center;
  border:5px solid #f5f5f5!important;
  opacity:.70;
}
div.blockMsg {
  font-size:20px;
  /* padding-top:15px; */
}
@media (max-width: 575.99px) {
  div.blockMsg {
    width:90%!important;
    left:5%!important;
    text-align: center;
    border:5px solid #f5f5f5!important;
    opacity:.70;
    font-size:16px;
  }
}

.mandatory::after {
  content: "*";
  color: red;
}

table.dataTable.collapsed>tbody>tr>td.dtr-control:before, table.dataTable.collapsed>tbody>tr>th.dtr-control:before {
  border-left: 10px solid #0d6efd!important;
  border-top: 8px solid transparent!important;
  border-bottom: 8px solid transparent!important;
}

table.dataTable.collapsed>tbody>tr.dtr-expanded>td.dtr-control:before, table.dataTable.collapsed>tbody>tr.dtr-expanded>th.dtr-control:before {
  border-top: 10px solid #9C2034!important;
  border-left: 8px solid transparent!important;
  border-bottom: 0px solid transparent;
  border-right: 8px solid transparent!important;
}

/* 學生端UI */
/* 手機 */
  #apply_stu .grid-container{
    display: grid;
    grid-template-columns: 1fr; /* 預設手機單欄 */
    grid-auto-rows: auto;
    gap:  .5rem;
  }
  #apply_stu .grid-basic-title {
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 1rem;
  }
  #apply_stu .grid-basic-info {
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-field-title {
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 1rem;
  }
  #apply_stu .grid-field-info {
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-field-info2 {
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-upload-title {
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 1rem;
  }
  #apply_stu .grid-upload-file {
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-container-2{
    display: grid;
    grid-template-columns: 1fr; /* 預設手機單欄 */
    grid-auto-rows: auto;
    gap:0.5rem;
  }
  #apply_stu .grid-modules-title {
        grid-column: 1/ span 1;
    grid-row: 1 / span 1;
    background: var(--bs-red-ncku-01);
    color:#fff;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left:1rem;
  }
  #apply_stu .grid-modules-B {
    grid-column: 1/ span 4;
    grid-row: 2 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:0.2rem 1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-3 {
    grid-column: 1/ span 4;
    grid-row: 3 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:0 1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-4 {
    grid-column: 1/ span 4;
    grid-row: 4 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:0 1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-5 {
    grid-column: 1/ span 4;
    grid-row: 5 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:0 1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-arrow {
    grid-column: 2/ span 1;
    grid-row: 1 / span 1;
    color: var(--bs-red-ncku-01);
    font-size: 3rem;
    font-weight: 600;
    align-items: center;
    align-content: center;
  }
  #apply_stu .grid-modules-result {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:.5rem;
    align-content: center;
    text-align: center;
  }
  #apply_stu .grid-modules-result img {
    width:1.5rem;
  }
  #apply_stu .grid-container-3-all {
    display: grid;
    grid-template-columns: 1fr; /* 預設平板單欄 */
    grid-template-rows: repeat(1, 1fr) 1fr;
    gap: .8rem;
    grid-auto-rows: auto;
    border-radius: .5rem;
  }
  #apply_stu .add-1 {
    grid-template-columns: 1fr; /* 預設手機單欄 */
    grid-row: 1 / span 2;
    font-size: 1rem;
    font-weight: 600;
    border: 2px dotted #942035;
    border-radius: 1rem;
    background: var(--bs-block2-bg);
    padding: .5rem;
  }
  #apply_stu .add-2 {
    grid-template-columns: 1fr; /* 預設手機單欄 */
    grid-row: 3 / span 1;
    font-size: 1rem;
    font-weight: 600;
    border: 2px dotted #942035;
    border-radius: 1rem;
    background: var(--bs-block2-bg);
    padding: .5rem;
  }
  #apply_stu .grid-container-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr) 1fr;
    gap: .8rem;
    grid-auto-rows: auto;
    border: 2px dotted #942035;
    border-radius: 1rem;
    background: #e9ecef;
  }
  #apply_stu .grid-add-course-icon-4-1  {
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0 0 10px;
  }
  #apply_stu .grid-add-course-4-1 {
    grid-column: 2 / span 3;
    grid-row: 1 / span 2;
    gap: .8rem;
    grid-auto-rows: auto;
    padding:1rem;
  }

/* 平版 */
@media (min-width: 767px) and (max-width: 1250px) {
  #apply_stu .grid-container{
    display: grid;
    grid-template-columns: 1fr; /* 預設平板單欄 */
    grid-auto-rows: auto;
    gap: .5rem;
  }
  #apply_stu .grid-basic-title {
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 1rem;
  }
  #apply_stu .grid-basic-info {
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-field-title {
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 1rem;
  }
  #apply_stu .grid-field-info {
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-field-info2 {
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-upload-title {
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 1rem;
  }
  #apply_stu .grid-upload-file {
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-container-2{
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    /* grid-template-rows: repeat(1, 1fr) 1fr; */
    grid-auto-rows: auto;
    gap:.5rem;
  }
  #apply_stu .grid-modules-title {
    grid-column: 1/ span 4;
    grid-row: 1 / span 1;
    background: var(--bs-red-ncku-01);
    color:#fff;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left:1rem;
  }
  #apply_stu .grid-modules-B {
    grid-column: 1/ span 4;
    grid-row: 2 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:0 1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-3 {
    grid-column: 5/ span 4;
    grid-row: 2 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:.2rem 1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-4 {
    grid-column: 1/ span 4;
    grid-row: 3 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:0 1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-5 {
    grid-column: 5/ span 4;
    grid-row: 3 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:0 1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-arrow {
    grid-column: 5/ span 2;
    grid-row: 1 / span 1;
    color: var(--bs-red-ncku-01);
    font-size: 3rem;
    font-weight: 600;
    align-items: center;
    padding:.2rem;
    align-content: center;
  }
  #apply_stu .grid-modules-result {
    grid-column: 7 / span 2;
    grid-row: 1 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:.2rem;
    align-content: center;
    text-align: center;
  }
  #apply_stu .grid-modules-result img {
    width:2rem;
  }
  #apply_stu .grid-container-3-all {
    display: grid;
    grid-template-columns: 1fr; /* 預設平板單欄 */
    grid-template-rows: repeat(1, 1fr) 1fr;
    gap: .8rem;
    grid-auto-rows: auto;
    border-radius: .5rem;
  }
  #apply_stu .add-1 {
    grid-column: 1 / span 3;
    grid-row: 1 / span 2;
    font-size: 1rem;
    font-weight: 600;
    border: 2px dotted #942035;
    border-radius: 1rem;
    background: var(--bs-block2-bg);
    padding: .5rem;
  }
  #apply_stu .add-2 {
    grid-column: 1 / span 3;
    grid-row: 3 / span 1;
    font-size: 1rem;
    font-weight: 600;
    border: 2px dotted #942035;
    border-radius: 1rem;
    background: var(--bs-block2-bg);
    padding: .5rem;
  }
  #apply_stu .grid-container-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr) 1fr;
    gap: .8rem;
    grid-auto-rows: auto;
    border: 2px dotted #942035;
    border-radius: 1rem;
    background: #e9ecef;
  }
  #apply_stu .grid-add-course-icon-4-1  {
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0 0 10px;
  }
  #apply_stu .grid-add-course-4-1 {
    grid-column: 2 / span 3;
    grid-row: 1 / span 2;
    gap: .8rem;
    grid-auto-rows: auto;
    padding:1rem;
  }
}
/* 桌機 */
@media (min-width: 1250px) {
  #apply_stu .grid-container {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(1, 1fr) 1fr;
    gap: .8rem;
    grid-auto-rows: auto;
  }
  #apply_stu .grid-container-review {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: auto;
    gap: .8rem;
    grid-auto-rows: auto;
  }
  #apply_stu .grid-basic-title {
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left:1rem;
  }
  #apply_stu .grid-basic-info {
    grid-column: 2 / span 8;
    grid-row: 1 / span 2;
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-field-title {
    grid-column: 1 / span 1;
    grid-row: 3 / span 3;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left:1rem;
  }
  #apply_stu .grid-field-title[name='review-field-title'] {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left:1rem;
  }
  #apply_stu .grid-field-info {
    grid-column: 2 / span 4;
    grid-row: 3 / span 3;
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-field-info2 {
    grid-column: 6 / span 4;
    grid-row: 3 / span 3;
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-field-info2[name='review-field-info'] {
    grid-column: 2 / span 8;
    grid-row: 1 / span 1;
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-upload-title {
    grid-column: 1 / span 1;
    grid-row: 6 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left:1rem;
  }
  #apply_stu .grid-upload-title[name='review-upload-title'] {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left: 1rem;
  }
  #apply_stu .grid-upload-file[name='review-upload-file'] {
    grid-column: 2 / span 8;
    grid-row: 2 / span 1;
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-upload-file {
    grid-column: 2 / span 8;
    grid-row: 6 / span 1;
    background: var(--bs-main-bg);
    padding:1rem 2rem;
  }
  #apply_stu .grid-container-2{
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(1, 1fr) 1fr;
    gap:.8rem;
    grid-auto-rows: auto;
  }
  #apply_stu .grid-modules-title {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    background: var(--bs-red-ncku-01);
    color:#fff;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding-left:1rem;
  }
  #apply_stu .grid-modules-B {
    grid-column: 3 / span 3;
    grid-row: 1 / span 2;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-3 {
    grid-column: 6 / span 3;
    grid-row: 1 / span 2;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-4 {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-5 {
    grid-column: 13 / span 3;
    grid-row: 1 / span 2;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-arrow {
    grid-column: 16/ span 1;
    grid-row: 1 / span 2;
    color: var(--bs-red-ncku-01);
    font-size: 3rem;
    font-weight: 600;
    align-items: center;
    padding:1rem;
    align-content: center;
  }
  #apply_stu .grid-modules-result {
    grid-column: 17 / span 2;
    grid-row: 1 / span 2;
    background: var(--bs-block2-bg);
    font-size: 1rem;
    font-weight: 600;
    padding:1rem;
    align-content: center;
    text-align: center;
  }
  #apply_stu .grid-modules-result img {
    width:2.5rem;
  }
  #apply_stu .grid-container-3-all {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 1fr) 1fr;
    gap: .8rem;
    grid-auto-rows: auto;
    border-radius: .5rem;
  }
  #apply_stu .add-1 {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
    font-size: 1rem;
    font-weight: 600;
    border: 2px dotted #942035;
    border-radius: 1rem;
    background: var(--bs-block2-bg);
    padding: .5rem;
  }
  #apply_stu .add-2 {
    grid-column: 5 / span 2;
    grid-row: 1 / span 2;
    font-size: 1rem;
    font-weight: 600;
    border: 2px dotted #942035;
    border-radius: 1rem;
    background: var(--bs-block2-bg);
    padding: .5rem;
    align-content: center;
  }
  #apply_stu .grid-container-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr) 1fr;
    gap: .8rem;
    grid-auto-rows: auto;
    border: 2px dotted #942035;
    border-radius: 1rem;
    background: #e9ecef;
  }
  #apply_stu .grid-add-course-icon-4-1  {
    grid-column: 1 / span 1;
    grid-row: 1 / span 2;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 0 0 10px;
  }
  #apply_stu .grid-add-course-4-1 {
    grid-column: 2 / span 3;
    grid-row: 1 / span 2;
    gap: .8rem;
    grid-auto-rows: auto;
    padding:1rem;
  }
}
.font-modules-no {
  font-size:3rem;
}
.fs-7 {
  font-size:.8rem;
}
.border-alert {
  border-radius: 20px;
  max-width: 850px;
  margin: auto;
  background: #e9ecef;
  border: 5px solid #fff;
}
/* 承辦端按鈕 */
#uiba11114_container button[name=view] {
  border-radius: 90px;
  background: #BBD846;
  color: #211f1c;
  padding: 0px 18px;
  line-height: 2;
  border: 2px solid #fff;
}
#uiba11114_container button[name=revoke] {
  border-radius: 90px;
  background: #E66449;
  color: #211f1c;
  padding: 0px 18px;
  line-height: 2;
  border: 2px solid #fff;
}
#uiba11114_container button.btn-export{
  border-radius: 90px;
  border-color: #ddf8fc;
  color: #211f1c;
  background-color: #4fc9da;  padding: 0px 18px;
  line-height: 2;
  border: 2px solid #fff;
}
#uiba11114_container button.btn-phase-mgr {
  border-radius: 10px;
  background: #F8F6F2;
  color: #211f1c;
  padding: 0px 18px;
  line-height: 2;
  border: 2px solid #fff;
}
#uiba11114_container button.btn-phase-review {
  border-radius: 10px;
  background: var(--bs-main-red);
  color: #fff;
  padding: 0px 18px;
  line-height: 2;
  border: 2px solid #fff;
}
#uiba11114_container button:disabled {
  opacity: 30%;
}
button[name=add] {
  color: #fff !important;
  background-color: #234957;
  border: 0;
}
button[name=upd] {
  color: #fff !important;
  background-color: #652f11;
  border: 0;
}
button[name=del] {
  color: #fff !important;
  background-color: #cb000c;
  border: 0;
}

