/**
* Bootstrap 3 → 4 Compatibility Shim
*
* 解決 Bootstrap 4.6.2 移除或改名的 v3 API：
* 1. col-xs-* → col-*（4.x 預設 breakpoint 為 xs）
* 2. btn-default → btn-secondary 風格
* 3. .well → 4.x 已移除，還原樣式
* 4. .panel-* → 4.x 已移除（改用 .card），還原樣式
* 5. visible-*/hidden-* → 4.x 改用 d-*，還原行為
* 6. pull-left / pull-right → 4.x 改用 float-left/float-right
* 7. center-block → mx-auto
*/
/* ==============================================================
* 1. Grid: col-xs-* → Bootstrap 4 col-* (無 breakpoint = xs)
* ============================================================== */
/* 注意：排除 th/td，避免套在 | 時把整列欄位都變成 width:100%
造成表格欄位擠壓成直書（原 M-1 shim 未排除 table cell 的副作用） */
:not(th):not(td).col-xs-1,
:not(th):not(td).col-xs-2,
:not(th):not(td).col-xs-3,
:not(th):not(td).col-xs-4,
:not(th):not(td).col-xs-5,
:not(th):not(td).col-xs-6,
:not(th):not(td).col-xs-7,
:not(th):not(td).col-xs-8,
:not(th):not(td).col-xs-9,
:not(th):not(td).col-xs-10,
:not(th):not(td).col-xs-11,
:not(th):not(td).col-xs-12 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
/* col-xs-* 的 flex/max-width 限制在 xs 範圍（< 576px），避免蓋掉 col-sm-* 等較大 breakpoint */
@media (max-width: 575.98px) {
.col-xs-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-xs-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-xs-3 { flex: 0 0 25%; max-width: 25%; }
.col-xs-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-xs-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-xs-6 { flex: 0 0 50%; max-width: 50%; }
.col-xs-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-xs-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-xs-9 { flex: 0 0 75%; max-width: 75%; }
.col-xs-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-xs-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
}
/* col-xs-offset-* */
.col-xs-offset-0 { margin-left: 0; }
.col-xs-offset-1 { margin-left: 8.333333%; }
.col-xs-offset-2 { margin-left: 16.666667%; }
.col-xs-offset-3 { margin-left: 25%; }
.col-xs-offset-4 { margin-left: 33.333333%; }
.col-xs-offset-6 { margin-left: 50%; }
/* ==============================================================
* 1b. .lcms-items 直接包含 .col-* 卡片（無 .row 包覆）
* Bootstrap 3 靠 float 橫排，Bootstrap 4 需模擬 .row 的 flex 行為
* ============================================================== */
.lcms-items {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
/* ==============================================================
* 2. Buttons: .btn-default → secondary 風格
* ============================================================== */
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-default.disabled,
.btn-default[disabled] {
background-color: #fff;
border-color: #ccc;
}
/* ==============================================================
* 3. Well（Bootstrap 3 元件，4.x 已移除）
* ============================================================== */
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well blockquote { border-color: #e3e3e3; }
.well-lg { padding: 24px; border-radius: 6px; }
.well-sm { padding: 9px; border-radius: 3px; }
/* ==============================================================
* 4. Panel（Bootstrap 3 元件，4.x 以 Card 取代）
* ============================================================== */
.panel {
margin-bottom: 20px;
background-color: #fff;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
padding: 15px;
}
.panel-body::after,
.panel-body::before { display: table; content: " "; }
.panel-body::after { clear: both; }
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle { color: inherit; }
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
}
.panel-title > a,
.panel-title > small,
.panel-title > .small,
.panel-title > small > a,
.panel-title > .small > a { color: inherit; }
.panel-footer {
padding: 10px 15px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
/* Panel variants */
.panel-default { border-color: #ddd; }
.panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; }
.panel-primary { border-color: #337ab7; }
.panel-primary > .panel-heading { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.panel-success { border-color: #d6e9c6; }
.panel-success > .panel-heading { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.panel-info { border-color: #bce8f1; }
.panel-info > .panel-heading { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.panel-warning { border-color: #faebcc; }
.panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.panel-danger { border-color: #ebccd1; }
.panel-danger > .panel-heading { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
/* Panel group (accordion) */
.panel-group { margin-bottom: 20px; }
.panel-group .panel { margin-bottom: 0; border-radius: 4px; }
.panel-group .panel + .panel { margin-top: 5px; }
.panel-group .panel-heading { border-bottom: 0; }
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group { border-top: 1px solid #ddd; }
.panel-group .panel-footer { border-top: 0; }
.panel-group .panel-footer + .panel-collapse .panel-body { border-bottom: 1px solid #ddd; }
/* ==============================================================
* 5. Visibility helpers
* Bootstrap 3: hidden-xs/sm/md/lg, visible-xs/sm/md/lg
* Bootstrap 4: d-none, d-sm-none, d-md-none, d-lg-none
* ============================================================== */
/* hidden-xs: 隱藏於 xs (<576px) */
@media (max-width: 575.98px) {
.hidden-xs { display: none !important; }
}
/* hidden-sm: 隱藏於 sm (576px-767px) */
@media (min-width: 576px) and (max-width: 767.98px) {
.hidden-sm { display: none !important; }
}
/* hidden-md: 隱藏於 md (768px-991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
.hidden-md { display: none !important; }
}
/* hidden-lg: 隱藏於 lg (>=992px) */
@media (min-width: 992px) {
.hidden-lg { display: none !important; }
}
/* visible-xs: 僅在 xs 顯示 */
.visible-xs, .visible-xs-block, .visible-xs-inline, .visible-xs-inline-block { display: none !important; }
@media (max-width: 575.98px) {
.visible-xs { display: block !important; }
.visible-xs-block { display: block !important; }
.visible-xs-inline { display: inline !important; }
.visible-xs-inline-block { display: inline-block !important; }
}
/* visible-sm: 僅在 sm 顯示 */
.visible-sm, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block { display: none !important; }
@media (min-width: 576px) and (max-width: 767.98px) {
.visible-sm { display: block !important; }
.visible-sm-block { display: block !important; }
.visible-sm-inline { display: inline !important; }
.visible-sm-inline-block { display: inline-block !important; }
}
/* visible-md: 僅在 md 顯示 */
.visible-md, .visible-md-block, .visible-md-inline, .visible-md-inline-block { display: none !important; }
@media (min-width: 768px) and (max-width: 991.98px) {
.visible-md { display: block !important; }
.visible-md-block { display: block !important; }
.visible-md-inline { display: inline !important; }
.visible-md-inline-block { display: inline-block !important; }
}
/* visible-lg: 僅在 lg 顯示 */
.visible-lg, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display: none !important; }
@media (min-width: 992px) {
.visible-lg { display: block !important; }
.visible-lg-block { display: block !important; }
.visible-lg-inline { display: inline !important; }
.visible-lg-inline-block { display: inline-block !important; }
}
/* ==============================================================
* 6. Misc: pull-*, center-block
* ============================================================== */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
/* ==============================================================
* 7. Navbar: navbar-toggle → navbar-toggler 別名
* Bootstrap 4 使用 navbar-toggler，還原 navbar-toggle 樣式
* ============================================================== */
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
.navbar-default .navbar-toggle { border-color: #ddd; }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #ddd; }
.navbar-default .navbar-toggle .icon-bar { background-color: #888; }
/* ==============================================================
* 8. Navbar: Bootstrap 3 navbar-default / navbar-right / navbar-left
* Bootstrap 4 大幅重構 Navbar，移除了以下 class：
* navbar-default、navbar-right、navbar-left、navbar-header
* ============================================================== */
/* navbar-default: BS3 預設淡色 navbar，BS4 改為 navbar-light */
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navbar-default .navbar-brand { color: #777; }
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus { color: #5e5e5e; background-color: transparent; }
.navbar-default .navbar-nav > li > a { color: #777; }
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: #333; background-color: transparent; }
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; }
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus { background-color: #e7e7e7; color: #555; }
.navbar-default .navbar-link { color: #777; }
.navbar-default .navbar-link:hover { color: #333; }
/* navbar-right / navbar-left: BS3 浮動定位，BS4 改用 Flex 工具 */
.navbar-right { margin-right: -15px; }
@media (min-width: 768px) {
.navbar-right ~ .navbar-right { margin-right: 0; }
}
.navbar-left { float: left !important; }
.navbar-right { float: right !important; }
/* navbar-header: BS3 包裝 brand + toggle 的容器，BS4 不需要 */
.navbar-header::after,
.navbar-header::before { display: table; content: " "; }
.navbar-header::after { clear: both; }
@media (min-width: 768px) {
.navbar-header { float: left; }
}
/* navbar-nav: BS3 list 式 nav，確保在 BS4 flex 容器內仍能橫向排列 */
.navbar-nav { margin: 7.5px -15px; }
@media (min-width: 768px) {
.navbar-nav { float: left; margin: 0; }
.navbar-nav > li { float: left; }
.navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; }
.navbar-nav.navbar-right { float: right !important; }
.navbar-nav.navbar-right ~ .navbar-right { margin-right: 0; }
}
/* navbar-text: 垂直置中文字 */
.navbar-text { margin-top: 15px; margin-bottom: 15px; }
@media (min-width: 768px) {
.navbar-text { float: left; margin-right: 15px; margin-left: 15px; }
.navbar-text.navbar-right { float: right; margin-right: 15px; }
.navbar-text.navbar-right ~ .navbar-right { margin-right: 0; }
}
/* dropdown-menu: BS3 vs BS4 z-index 差異 */
.navbar .dropdown-menu { z-index: 1000; }
/* ==============================================================
* 10. Dropdown toggle 箭頭：Bootstrap 4 自動在 .dropdown-toggle::after
* 加入 CSS border 箭頭；Bootstrap 3 模板已有 Font Awesome fa-caret-down，
* 兩者並存造成雙箭頭。隱藏 BS4 自動加的 ::after 箭頭。
* ============================================================== */
.dropdown-toggle::after {
display: none !important;
}
/* ==============================================================
* 11. Dropdown items：Bootstrap 4 改用 .dropdown-item class
* Bootstrap 3 的 HTML 使用 li > a，沒有 dropdown-item，
* Bootstrap 4 不對 li > a 套用 padding/hover 樣式 → 還原 BS3 行為
* ============================================================== */
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333333;
white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
background-color: #337ab7;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: #777;
cursor: not-allowed;
background-color: transparent;
}
/* 分隔線 */
.dropdown-menu > .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
/* ==============================================================
* 關鍵修正：Bootstrap 4 將 .navbar-nav .dropdown-menu 改為 position: static
* → 點開後選單嵌入在 navbar 列中而非向下展開（破版）
* Bootstrap 3 行為：dropdown-menu 永遠是 position: absolute
* 在桌面端強制還原為 absolute，讓 Popper.js 正確定位
* ============================================================== */
@media (min-width: 768px) {
.navbar-nav .dropdown-menu {
position: absolute !important;
float: left;
}
}
/* ==============================================================
* 9. 關鍵修正：navbar-collapse 在 Bootstrap 4 的 flex 破版問題
* Bootstrap 4: .navbar-collapse { flex-basis:100%; flex-grow:1; }
* → 讓 navbar-collapse 撐滿整行，把其他元素擠走
* Bootstrap 3: navbar-collapse 只是內容容器，無自動 grow
* ============================================================== */
/* 重置 Bootstrap 4 的 navbar-collapse flex-grow 行為 */
.navbar-collapse {
flex-basis: auto !important;
flex-grow: 0 !important;
}
@media (min-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
/* navbar-collapse 本身若在 desktop 需顯示 */
.navbar-collapse {
overflow: visible;
}
/* 關鍵：Bootstrap 4 將 .navbar-nav 預設為 flex-direction: column（垂直）
Bootstrap 3 在桌面端是水平排列（float: left 或 flex-direction: row）
在 .navbar 內的 navbar-nav 強制改回水平排列，且禁止換行 */
.navbar .navbar-nav {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center;
}
/* Bootstrap 4 的 .nav 預設 flex-wrap: wrap，此處禁止換行 */
.navbar .nav {
flex-wrap: nowrap;
}
/* navbar-right 在 flex 容器內改用 margin-left: auto 推到右側
(float: right 在 flex 子元素內無效) */
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
}
/* ==============================================================
* 12. Bootstrap 3 慣用：col-* 套在 | 上設定表格欄寬
* Bootstrap 4 的 .row 把 display 改為 flex，套在 上會破壞
* table-layout。強制還原 table/tr/td 的 display，並以 width 實現欄寬。
* ============================================================== */
table.row {
display: table !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
table.row > thead > tr,
table.row > tbody > tr,
table.row > tr {
display: table-row !important;
}
table.row > thead > tr > td,
table.row > thead > tr > th,
table.row > tbody > tr > td,
table.row > tbody > tr > th,
table.row > tr > td,
table.row > tr > th {
display: table-cell !important;
}
/* col-sm-* 欄寬（≥768px）套在 td/th 上時以 width 表現 */
@media (min-width: 768px) {
table td.col-sm-1, table th.col-sm-1 { width: 8.333333% !important; }
table td.col-sm-2, table th.col-sm-2 { width: 16.666667% !important; }
table td.col-sm-3, table th.col-sm-3 { width: 25% !important; }
table td.col-sm-4, table th.col-sm-4 { width: 33.333333% !important; }
table td.col-sm-5, table th.col-sm-5 { width: 41.666667% !important; }
table td.col-sm-6, table th.col-sm-6 { width: 50% !important; }
table td.col-sm-7, table th.col-sm-7 { width: 58.333333% !important; }
table td.col-sm-8, table th.col-sm-8 { width: 66.666667% !important; }
table td.col-sm-9, table th.col-sm-9 { width: 75% !important; }
table td.col-sm-10, table th.col-sm-10 { width: 83.333333% !important; }
table td.col-sm-11, table th.col-sm-11 { width: 91.666667% !important; }
table td.col-sm-12, table th.col-sm-12 { width: 100% !important; }
}
/* col-md-* 欄寬（≥992px）套在 td/th 上時以 width 表現 */
@media (min-width: 992px) {
table td.col-md-1, table th.col-md-1 { width: 8.333333% !important; }
table td.col-md-2, table th.col-md-2 { width: 16.666667% !important; }
table td.col-md-3, table th.col-md-3 { width: 25% !important; }
table td.col-md-4, table th.col-md-4 { width: 33.333333% !important; }
table td.col-md-5, table th.col-md-5 { width: 41.666667% !important; }
table td.col-md-6, table th.col-md-6 { width: 50% !important; }
table td.col-md-7, table th.col-md-7 { width: 58.333333% !important; }
table td.col-md-8, table th.col-md-8 { width: 66.666667% !important; }
table td.col-md-9, table th.col-md-9 { width: 75% !important; }
table td.col-md-10, table th.col-md-10 { width: 83.333333% !important; }
table td.col-md-11, table th.col-md-11 { width: 91.666667% !important; }
table td.col-md-12, table th.col-md-12 { width: 100% !important; }
}
/* ==============================================================
* 9. Bootstrap 3 雜項 class（4.x 已移除或改名）
* ============================================================== */
/* .hidden → 4.x 已移除，還原「永遠隱藏」行為（jQuery addClass('hidden') 仍可用）*/
.hidden { display: none !important; }
/* .navbar-fixed-top / .navbar-fixed-bottom → 4.x 改為 .fixed-top / .fixed-bottom */
.navbar-fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.navbar-fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
}
/* .img-circle / .img-rounded / .img-responsive → 4.x 已改名 */
.img-circle { border-radius: 50% !important; }
.img-rounded { border-radius: 6px !important; }
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
/* .alert-error → 4.x 統一為 .alert-danger（沿用 .alert-danger 的樣式） */
.alert-error {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
/* ==============================================================
* 9-補. .table cell padding 還原為 Bootstrap 3 的 4px
* Bootstrap 4 預設 .table th/td padding = 0.75rem (12px)，
* 比 BS3 (4-8px) 大 50-200%，導致欄位內容空間被壓縮，
* 中文欄標會被迫換行成直書（如「學員人數」變成 4 行單字）。
* 使用 !important 覆蓋 BS4 原版 .table th 的 padding: 0.75rem。
*
* 另外抑制 BS4 每 td 預設 border-top 的樣式干擾原 layout.css 設計。
* ============================================================== */
.table th,
.table td,
table.table th,
table.table td {
padding: 4px 6px !important;
}
.table-condensed th,
.table-condensed td {
padding: 3px !important;
}
/* Bootstrap 4 預設每 .table td / th 都畫 border-top，舊版 layout.css 以
`tr` 為單位畫 border-bottom，兩者衝突會造成雙重線條或行高不一致 */
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tbody > tr > td {
border-top: 0;
}
/* ==============================================================
* 9-補3. learn/mycourse 表格欄寬微調（.data2 .subject .t*）
* 原 layout.css 設 t1=3em、t2=4em、t3=5em，在 BS3 時代 table cell
* padding 較小、文字渲染較緊湊下尚可 2 字/行顯示「學員人數」等
* 欄標。BS4 環境下因整體 rendering 差異而每格再擠窄，導致每字
* 都換行。各欄 +1em 吸收差異，不破壞原視覺比例。
* ============================================================== */
.data2 .subject .t1 { width: 4em !important; }
.data2 .subject .t2 { width: 5em !important; }
.data2 .subject .t3 { width: 6em !important; }
/* ==============================================================
* 9-補4. .nav-tabs / .nav-orange hover 背景色還原
* Bootstrap 3 的 .nav-tabs > li > a:hover 預設 #eee 灰底，
* BS4 移除此規則，搭配 component.css 的 .nav-orange 主題
* （hover 只改字色為橘 #F3800F）會造成「橘字 + 橘色 tab bar
* 底色」同色看不見。補上 hover 背景色還原 BS3 行為。
* ============================================================== */
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
background-color: #eee;
text-decoration: none;
}
/* .nav-orange 採白底橘字（與 .active 狀態一致）*/
.nav-orange > li > a:hover,
.nav-orange > li > a:focus {
background-color: #FFFFFF !important;
}
/* ==============================================================
* 9-補4b. lcms-header 全寬 + 工具列靠右修正
* mooc_header.tpl 使用 ` |