/* Bootstrap 5 升級修正樣式 */

/* 修正字體大小，保持與原本設計一致 */
html {
    font-size: 14px !important;
    /* Bootstrap 5 預設是 16px，改回 14px */
}

/* 修正 Bootstrap 5 的強制重置 */
body {
    font-size: inherit !important;
    line-height: 1.42857143 !important;
    /* Bootstrap 3 的預設值 */
}

/* 修正表單元素間距 */
.form-control {
    margin-bottom: 0 !important;
    /* 移除 Bootstrap 5 預設的 margin-bottom */
}

/* 修正輸入框 focus 效果，恢復 Bootstrap 3 樣式 */
.form-control:focus {
    border-color: #66afe9 !important;
    outline: 0 !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
    /* Bootstrap 3 的藍色發光效果 */
}

/* 修正 input-group 內的輸入框 focus 效果 */
.input-group .form-control:focus {
    z-index: 3 !important;
    /* 確保 focus 時邊框在最上層 */
}

/* 修正 input-group-text 與 focus 輸入框相鄰時的邊框顏色 */
.input-group .form-control:focus+.input-group-text,
.input-group-text:has(+ .form-control:focus) {
    border-color: #66afe9 !important;
    /* 相鄰的圖示容器也要變色 */
}

/* 修正按鈕樣式 */
.btn {
    margin-bottom: 0 !important;
}

/* 修正 modal 相關樣式 */
.modal-dialog {
    margin: 30px auto !important;
    /* 保持 Bootstrap 3 的預設值 */
}

/* 修正 grid 系統的間距 */
.container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    max-width: none !important;
    width: 100% !important;
}

/* 修正 navbar 相關 */
.navbar {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

/* 修正 dropdown 位置與尺寸 */
.dropdown-menu {
    --bs-dropdown-min-width: 10.9rem !important;
    --bs-dropdown-padding-x: -1 !important;
}

#dropdown-menu {
    padding-top: 5px !important;
    border-bottom-width: 1px !important;
    padding-bottom: 5px !important;
}

.language-container {
    padding-top: 10px !important;
    left: 20% !important;
    padding-top: 5px !important;
    border-bottom-width: 1px !important;
    padding-bottom: 5px !important;
}

.card-body {
    --bs-card-border-width: var(0px) !important;
    --bs-card-spacer-y: 0.4rem !important;
}

/* 修正 fontsize-dropdown-menu 的尺寸 */
/* #fontsize-dropdown-menu {
    min-width: auto !important;
    width: auto !important;
    padding: 5px 0 !important;
} */

/* 修正 input-group 樣式 */
.input-group-text {
    border-radius: 4px 0 0 4px !important;
    /* 保持 Bootstrap 3 的圓角 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 12px !important;
    min-width: 38px !important;
    /* 確保圖示容器有固定寬度，不會蓋到輸入框 */
}

.input-group-text i {
    width: 14px !important;
    text-align: center !important;
    /* 確保圖示不會超出容器寬度 */
}

/* 修正 form-group 的間距 */
.mb-3 {
    margin-bottom: 15px !important;
    /* 保持 Bootstrap 3 的間距 */
}

/* 修正 modal 關閉按鈕 */
.close {
    font-size: 21px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    color: #000 !important;
    text-shadow: 0 1px 0 #fff !important;
    opacity: 0.2 !important;
}

/* 修正 modal-footer 按鈕對齊 - Bootstrap 3 預設靠右 */
.modal-footer {
    padding: 15px !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

/* 修正 glyphicon 到 Font Awesome 的過渡 */
.glyphicon {
    display: none !important;
    /* 隱藏任何殘留的 glyphicon */
}

/* 修正編輯使用者名稱圖示 - 從 glyphicon-edit 改為 Font Awesome */
.avatar_nickname_edit i {
    font-size: 1.4rem !important;
    cursor: pointer;
}

/* 修正沒有 href 的 a 標籤樣式（如滿意度調查連結） */
a:not([href]):not([class]) {
    color: #007bff !important;
    /* text-decoration: underline !important; */
    cursor: pointer !important;
}

a:not([href]):not([class]):hover {
    color: #0056b3 !important;
    text-decoration: underline !important;
}


/* 全站連結：預設無底線，hover/focus 才顯示底線 */
a,
a:link,
a:visited {
    text-decoration: none !important;
}

a:hover,
a:focus {
    text-decoration: underline !important;
}

/* 確保 Font Awesome 圖示正確顯示 */
.fas,
.far,
.fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro" !important;
}

/* 修正一些 Bootstrap 5 的新預設值 */
.card {
    margin-bottom: 0 !important;
}

/* 修正 flex 相關樣式 */
.flexAlignCenter {
    display: flex !important;
    align-items: center !important;
}

/* 恢復 label 的粗體樣式 */
label {
    font-weight: bold !important;
}

/* 恢復其他需要粗體的元素 */
.ChatMessageSenderName {
    font-weight: bold !important;
}

.cardsTitle {
    font-weight: bold !important;
}

.StatusMessage {
    font-weight: bold !important;
}

.webcallphone {
    font-weight: bold !important;
}

#loading span {
    font-weight: bold !important;
}

.streaming-message.typing::after {
    font-weight: bold !important;
}

.service-group-item {
    font-weight: bold !important;
}

.hotTopic-item {
    font-weight: bold !important;
    margin: 0.6rem 0 !important;
}

/* 修正聊天訊息時間字體大小 - 調整為合適的大小 */
.ChatMessageTime {
    font-size: 12px !important;
    /* 調整為合適的大小 */
}


.ChatMessageGptSatisBar {
    font-size: 12px !important;
    /* 調整為合適的大小 */
}

.ChatSystemMessage {
    font-size: 13px !important;
    /* 調整為合適的大小 */
}

/* 修正其他小字體元素 - 確保在 14px 基礎上計算 */
.quickreply-btn {
    font-size: 0.857142rem !important;
    /* 12px */
}

.fontsize-btn {
    font-size: 12px !important;
    /* 保持原本大小 */
}

.fontsize-btn-helf {
    font-size: 10px !important;
    /* 調整為可讀大小 */
}

.card-title-helf {
    font-size: 14px !important;
    /* 調整為可讀大小 */
}

.card-title-full {
    font-size: 12px !important;
    /* 保持原本大小 */
}

.fontsize-btn-full {
    font-size: 11px !important;
    /* 調整為可讀大小 */
}

.modalwording {
    font-size: 1rem !important;
    /* 12px */
}

.btn {
    font-size: 1rem !important;
    /* 14px */
}

.form-control {
    font-size: 1rem !important;
    /* 14px */
}

/* 修正 header 按鈕 - 確保不顯示 Font Awesome 圖示 */
#fontsize-menu,
#language-menu,
#hamburger-menu,
#LoginButton {
    font-family: inherit !important;
}

#fontsize-menu::before,
#language-menu::before,
#hamburger-menu::before,
#LoginButton::before {
    content: none !important;
}

#fontsize-menu::after,
#language-menu::after,
#hamburger-menu::after,
#LoginButton::after {
    content: none !important;
}

/* 修正 LoginModal 版面問題 */
.modal-dialog_cust {
    max-width: 400px !important;
    margin: 30px auto !important;
}

/* 修正 modal 陰影立體效果 */
.modal-content {
    border-radius: 6px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    /* Bootstrap 3 的陰影立體效果 */
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    background-color: #fff !important;
}

.modal-body {
    padding: 15px !important;
}

.input-group {
    margin-bottom: 15px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    /* 確保元素不會重疊 */
}

.input-group-text {
    background-color: #f8f9fa !important;
    border: 1px solid #ced4da !important;
    border-right: 1px solid #ced4da !important;
    margin-right: -1px !important;
    flex-shrink: 0 !important;
    /* 防止圖示區域被壓縮，邊框重疊以避免雙邊框 */
}

.input-group .form-control {
    border: 1px solid #ced4da !important;
    flex: 1 1 auto !important;
    /* 確保輸入框有完整邊框 */
}

.input-group .btn {
    border: 1px solid #ced4da !important;
    border-left: 1px solid #ced4da !important;
    margin-left: -1px !important;
    flex-shrink: 0 !important;
    /* 防止按鈕被壓縮，邊框重疊以避免雙邊框 */
}

/* .btn_box { margin: 20px 0 !important; } */

.btn_box div {
    border-radius: 4px !important;
    text-align: center !important;
    line-height: 35px !important;
}

.login_other {
    margin-top: 20px !important;
    text-align: center !important;
}

.login_other>div {
    display: inline-block !important;
    margin: 0 10px !important;
}

/* 修正 Modal 標題置中和大小 */
.modal-title {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.2857142rem !important;
    /* 保持原本大小 9px */
}

.modal-header {
    text-align: center !important;
    position: relative !important;
    padding: 8px !important;
}

.modal-header .close {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    color: inherit !important;
    /* 繼承 header 的顏色 */
    opacity: 1 !important;
}

/* 修正密碼輸入區域 - 讓圖示、輸入框、忘記密碼按鈕在同一排 */
.inputcolumn {
    width: 80% !important;
    /* 確保寬度不超過 80% */
    max-width: 350px !important;
    /* 限制最大寬度 */
}

/* 修正 LoginPasswd 寬度問題 */
#LoginPasswd {
    width: auto !important;
    flex: 1 1 0 !important;
    /* 讓 flex 控制寬度 */
    max-width: 120px !important;
    /* 進一步縮小最大寬度 */
}


#forgetPasswordlink {
    margin-left: auto !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
}


/* 修正按鈕區域置中 */
.btn_box.space-around {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    /* margin: 20px auto !important; */
    width: 75% !important;
}

.btn_box div {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 80px !important;
    padding: 0 15px !important;
}

#left-header {
    margin-left: 0 !important;
    padding-left: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* logo 容器置中、避免位移 */
#logo.chat-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* width: 30px; */
    /* 與原設定一致 */
    /* height: 40px; */
    padding-bottom: 10px;
    /* 與 .navbar-brand 高度相近，便於垂直置中 */
}

/* 圖檔與列高一致、避免偏下 */
#logoImage {
    /* max-height: 26px; */
    /* 視覺接近原先大小，可調 24~28 視覺微調 */
    display: block;
}

#header-info-div {
    padding-right: 15px;
    padding-left: 15px;
}

.LanguageMenuButton.menu-close:after {
    border: 0.32rem solid transparent !important;
    border-top-color: inherit !important;
}

button.close {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#loading span {
    font-size: 3rem !important;
}

.richMenuButton.menu-open:after {
    border: 0.6rem solid transparent !important;
    border-bottom-color: inherit !important;
    margin-left: 0.6rem !important;
    margin-top: -0.84rem !important;
}

.richMenuButton.menu-close:after {
    border: 0.6rem solid transparent !important;
    border-top-color: inherit !important;
    margin-left: 0.6rem !important;
    margin-top: -0.24rem !important;
}

#header-btn-div div {
    margin-left: 0.6rem !important;
}

.SurveyButton {
    margin-top: 20px !important;
}

.service-group-item {
    font-size: 1rem !important;
    margin: 0.6em 0 !important;
}

#dvServiceGroupModalBody {
    max-height: 20rem !important;
}

.form-group {
    margin-bottom: 15px;
}

#HotTopicList {
    max-height: 20rem !important;
}

.hotTopic-item {
    font-size: 1rem !important;
}

.dynamic_tab>div {
    font-size: 0.8571428rem !important;
}

/* 修正 modal backdrop 預設樣式 - 避免閃黑 */
.modal-backdrop {
    background-color: white !important;
}

/* 修正 queueZoneModal 背景為白色 */
#queueZoneModal.show~.modal-backdrop.show {
    background-color: white !important;
    opacity: 1 !important;
}

#queueZoneModal .modal-content {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 修正 ServiceGroupModal 背景為半透明 */
#ServiceGroupModal.show~.modal-backdrop.show {
    background-color: white !important;
    opacity: 0.5 !important;
}

#ServiceGroupModal .modal-content {
    background-color: white !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
    /* 確保此 modal 也有陰影效果 */
}

#AI3-WebChat .QuickreplySlide {
    font-size: 1.16rem !important;
}

/* Fix: Remove Bootstrap 5's default card background and border */
.card {
    background-color: transparent !important;
    --bs-card-bg: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.fullwidthBtn {
    margin: 15px 0px 15px 0px !important;
}

.avatar_box .avatar_nickname {
    font-size: 1.14285714rem !important;
}

#webmakecallbtn {
    font-size: 1.2rem !important;
}

#ExitButton {
    margin-right: 0.6rem !important;
}

.modal-footer .btn+.btn {
    margin-left: 5px !important;
}

#btnP4PageMinimum img {
    width: 1.5rem !important;
}

#btnP4PageClose img {
    width: 1.5rem !important;
}

#btnP4PageZoomIn img {
    width: 1.5rem !important;
}

#ifP4Url {
    margin-top: 2.5rem !important;
}

#btnP4PageClose {
    right: 2rem !important;
}

#btnP4PageMinimum {
    right: 4rem !important;
}

#btnP4PageZoomIn {
    right: 4rem !important;
    top: 0.6rem !important;
}

#waitQueue {
    line-height: 30px !important;
}

#cancelQueue {
    line-height: 30px !important;
}

#dvP4Page {
    border-radius: 2rem !important;
}

.avatar_box .avatar_nickname .avatar_nickname_editbox .nicknamebtn {
    font-size: 1rem !important;
}

#OTP_phone {
    font-size: 2rem !important;
}

#otp-image {
    width: 8rem !important;
}

.prev {
    font-size: 1.285714rem !important;
}

/* 為 step_line 的父層 row 設置高度 */
.row:has(.step_line) {
    height: 25px !important;
}

/* 修正 Bootstrap 5 的 embed-responsive 樣式 */
.embed-responsive {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.embed-responsive::before {
    display: block !important;
    content: "" !important;
}

.embed-responsive-4by3::before {
    padding-top: 75% !important;
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
}

/* 修正 WebChat.css 中 .col-md-6 的高度問題 - 使用更具體的選擇器提高優先級 */
div.col-md-6,
.row .col-md-6,
.service_con_box02 .col-md-6 {
    height: auto !important;
}

.webcallagentName {
    font-size: 1.2857142rem !important;
}