:root { --primary-purple: rgb(192 100 247) }
@view-transition { navigation: auto; }
*{
    border: 0 solid;
}

/*表格認證(error提示)*/
.error { /* 當格式錯誤時，則新增此類別 */ border-color: red !important; color: red !important }

/*填選表格input*/
.form-control-col { display: block; height: calc(2.25rem + 2px); padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: .25rem; box-shadow: inset 0 0 0 transparent; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }

input[type="text"]:disabled { background-color: #e9ecef; opacity: 1; }

input[type="number"]:disabled { background-color: #e9ecef; opacity: 1; }

select[type="text"]:disabled { background-color: #e9ecef; opacity: 1; }

iframe { border: none; border-radius: 5px }

.cur-def { cursor: default; }
.cur-poi { cursor: pointer; }
/*list 上方新增按鈕*/

.add-new { height: 40px; font-weight: bold; font-size: 17px; text-shadow: none; min-width: 100px; border-radius: 50px; line-height: 12px; }
.add-new-sm { float: right; height: 36px; font-size: 15px; text-shadow: none; min-width: 100px; border-radius: 50px; line-height: 12px; }

.btn-info { color: #fff; background-color: #489ba9; border-color: #489ba9; }


/*List上方新增按鈕位置*/
.add { display: inline-block; left: -1rem !important; top: 0.25rem !important; }

/*List icon顏色*/
.list.red { color: #9b0909; }

.list.blue { color: #116bc2; }

.list.orange { color: #d47e13; }

.list.green { color: #52a10c; }

.list.purple { color: #5c12c7; }

.list.pink { color: #d964b0; }

/*List 按鈕格式*/
i { cursor: pointer; }

.fa-eye:before { color: green; margin: 0.2rem; }

/*List icon格式*/
.list.btn-app-small { border: #fff; text-align: center; background-color: inherit; transition: 0.2s; }
.list.btn-app-small:hover { transform: scale(1.2); transition: 0.2s; }
.list.btn-app-small i { cursor: inherit; }
.list.btn-app-small:disabled { opacity: 0.5; cursor: not-allowed; }

/*List icon背景綁白底*/
.td_stn { background-color: #fff }

/*List 列表資料置中*/
.wd_cen { text-align: center; }

/*Creat M03頁面 動作icon置中*/
.creat.td_icon { background-color: #fff; padding-left: 20px; text-align: center; vertical-align: inherit; }

/*icon去母版狀態*/
.bor-col { border-color: #FFF; }

/*Creat M03頁面 列表底下備註字體*/
.gray-font { font-size: x-small; color: #6c757d; }

/*頁面字體粗細*/
.bold { font-weight: bold; }

/*頁面按鈕*/
.Bot_Sty { display: inline-block; }

/*備註事項長度*/
.text-h { height: 10rem !important; }

.text-h-sm { height: 5rem !important; }

/*M03F01 新增圖片按鈕*/
.btn_bom { display: inline-block; position: relative; vertical-align: bottom; }

/*left 距離*/
.left-05 { left: 0.5rem !important; }

/*marign-left 0.4rem*/
.ml-04 { margin-left: 0.4rem !important; }

/*marign-left 0.2rem*/
.ml-02 { left: 0.2rem !important; }

/*marign-right 0.5rem*/
.mr-05 { right: 0.5rem !important; }

/*bottom 0.5rem*/
.bm-05 { bottom: 0.5rem !important; }

/*top 0.5rem*/
.tp-03 { bottom: 0.3rem !important; }

/*文字對齊頁面 走11%*/
.offset-011 { margin-left: 11%; }


/*列表滑動設定*/
.table-responsive-sm { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table-responsive-sm > .table-bordered { border: 0; }

/*M04表格後方的字體間隔*/
.span-Stn { margin-right: 1rem; margin-left: 1rem; display: block; position: relative; bottom: -5px; }

/*文字調整狀態(通用)*/
.span-Shar { margin-right: 1rem; margin-left: 1rem; display: block; position: relative; }

/*M04 頁面底邊的日期位置*/
.date-sy { display: block; position: relative; }

/*滑動按鈕style*/
.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20rem; }

.toggle.ios .toggle-handle { border-radius: 20rem; }

[class*=icheck-] { min-height: 32px; margin-top: 6px !important; margin-bottom: 6px !important; padding-left: 0; }

/*群組點選樣式*/
.btn-cir { font-size: 1.2rem; line-height: inherit; border-radius: 1.3rem; }

/*商品管理 圖片顯示*/
.del-small-trash { opacity: 0.8; display: inline-block; border: #fff; text-align: center; position: relative; left: -1.6rem; top: -3.03rem; }

/*圖片上傳間隔*/
.col-image { display: inline-block; margin: 0.2rem 0.2rem; position: relative; }
.col-image img { object-fit: scale-down; object-position: 50% 50%; }
input.col-image-radio:hover { border: 4px solid #52c9eb82; }
input.col-image-radio:checked { position: absolute; appearance: none; width: 136px; height: 136px; left: -4px; top: -4px; border: 4px solid #52c9eb; }
input.col-image-radio { position: absolute; appearance: none; width: 136px; height: 136px; left: -4px; top: -4px; }
input.col-image-radio:checked::before { content: '主圖'; display: flex; color: white; font-size: 0.8rem; font-weight: 900; padding: 0.1rem; position: absolute; line-height: 1.3; vertical-align: middle; left: 0px; width: 19px; height: 44px; border-top-right-radius: 5px; bottom: 0; background: #52c9eb; align-items: center; }

/*主動吃版*/
.flow_auto { width: inherit; height: inherit; overflow-x: auto; white-space: nowrap; webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }

/*頁面文字樣式*/
.categro { border: 1px #ffffff solid; border-radius: 10px; color: #ffffff; width: inherit; background-color: #499f8e; padding: 5px; margin: 0.3rem; }

/*頁面數字樣式*/
.categro_poin { border: 2px #6c757d solid; border-radius: 20px; width: inherit; text-align: center; padding: inherit; padding: 2rem; }

.categro_word { background-color: white; left: 30px; top: -10px; }

/*分區裝飾*/
.color_cust { width: 12px; background-color: darkgray; margin-right: 8px; }

/*對齊欄位*/
.input-form { padding: .375rem .75rem; }

/*Tab欄內對齊位置*/
.address-input { margin-left: 16.8%; }

/*checkbox欄位對齊*/
.checkbox-input { margin: 0.5rem; }

/*帳號狀態字體大小*/
.fontsi-me { font-size: medium }

/*上傳圖片字體標示大小*/
.fontsi-sm { font-size: small; }

/*radio點選背景顏色*/
.input-dis-bk { background-color: #e9ecef; }

/*select欄位長度控制*/
.select-width-first { width: 10rem; }

.select-width-nofirst { width: 14rem; }

/*隱藏按鈕*/
.hidebtn { display: none; }

.login-text { margin-bottom: 0.9rem; text-align: center; color: white; font-weight: 900; }

.login-text a { color: white; font-size: 1.7rem; font-weight: 900; filter: drop-shadow(1px 3px 2px #7979798c); text-align: center; }

/*右上角圖片*/
.img-circle-cus { border-radius: 50%; width: 30px; height: 30px }
#MerUsrRole { display: none; background: #a292e6; font-size: 0.9rem; padding: 0.2rem 0.3rem !important; border-radius: 5px; color: white; height: 26px; text-align: center; }
#MerUsrRole i { font-size: 0.7rem; padding-right: 0.2rem; color: #ffef00; filter: drop-shadow(0px 0px 0px white); transform: scale(0.9) translateY(-1px); }

.cir-headimg { width: 50px; height: 50px; border-radius: 50px; max-width: 50px; }
/*儀表版內容設置*/
.inner-cus { height: 7rem; width: 15.8rem; padding: 0.8rem; margin-left: 1.5rem; }

/*驗證碼css*/
.v_code { width: 600px; margin: 0 auto; }

.v_code > input { width: 60px; height: 36px; margin-top: 10px; }

.code { font-style: italic; background-color: #f5f5f5; color: darkblue; font-size: 25px; letter-spacing: 8.5px; font-weight: bolder; float: left; cursor: pointer; padding: 0 9px; text-align: center; }

.code a { text-decoration: none; font-size: 15px; color: #288bc4; cursor: pointer; margin: 0.8rem; }

.code a:hover { text-decoration: underline; }

/* sidebar */
.layout-fixed .wrapper .sidebar { height: calc(100vh - (12.5rem + 1px)); }
.os-viewport .nav-pills.nav-sidebar .nav-item a > i { font-size: 21px; width: 30px; margin-right: 10px; text-align: center; }
.os-viewport .nav-pills.nav-sidebar .nav-treeview .nav-item a > i { font-size: 18px; width: 30px; margin-right: 10px; text-align: center; }
.nav-sidebar .nav-item > .nav-link { position: relative; display: flex; align-items: center; }
.logo-link .logo-img { line-height: .8; position: relative; text-align: center; max-height: 48px; width: auto; }
.logo-link { text-align: center; display: block; font-size: 1.25rem; line-height: 1.5; padding: 0.8125rem 0.5rem; transition: width .3s ease-in-out; white-space: nowrap; width: 250px; }
[class*=sidebar-dark] .logo-link { border-bottom: 1px solid #4b545c; color: rgba(255,255,255,.8); }
.bd-1 { border: 1px; }
.bd-2 { border: 1px; }
.bd-l { border-left-style: solid; }
.bd-r { border-right-style: solid; }
.bd-t { border-top-style: solid; }
.bd-b { border-bottom-style: solid; }
.bd-black { border-color: black; }
.bd-gray { border-color: #00000029; }
.bd-main-purple { border-color: #623c80 !important; }

.br-1 { border-radius: 1px; }
.br-2 { border-radius: 2px; }
.br-3 { border-radius: 3px; }
.br-4 { border-radius: 4px; }
.br-5 { border-radius: 5px; }
.br-6 { border-radius: 6px; }
.br-7 { border-radius: 7px; }
.br-8 { border-radius: 8px; }
.br-9 { border-radius: 9px; }
/*select span 7-3 */
.select-sp { align-items: center; }

/* sidebar white purple*/
[class*=sidebar-white-] { background-color: #f2f1f3; }
.sidebar-white-purple .nav-sidebar > .nav-item.menu-open > .nav-link, .sidebar-white-purple .nav-sidebar > .nav-item:hover > .nav-link { transition: 0.2s; color: #583673; font-weight: 900; }
.sidebar-white-purple .nav-item > .nav-link.active, .sidebar-white-purple > .nav-item > .nav-link.active:focus, .sidebar-white-purple .nav-item > .nav-link.active:hover { background-color: #583673; color: white !important; }
.sidebar-white-purple .nav-treeview > .nav-item > .nav-link:focus, .sidebar-white-purple .nav-treeview > .nav-item > .nav-link:hover { background-color: #b7a8c6; color: white; }
[class*=sidebar-white-] .nav-treeview > .nav-item > .nav-link { color: #2e2b30; }

.nav-pills .nav-link { color: #2e2b30; outline: none; border: none; }
.sidebar-white-purple .badge-info { color: #fff; background-color: #623c80; }
.sidebar-white-purple .nav-link.active .badge-info { color: #623c80; background-color: #fff; }
.navbar-purple { background-color: #D6C5E4 !important; }
.content-wrapper.wrapper-white-purple { background: #f2edf6; }
[class*=sidebar-white-] .user-panel a { color: #2e2b30 !important; }
[class*=sidebar-white-] .user-panel a:hover { color: #623c80 !important; }
.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: rgb(61 19 69 / 22%); }
#MerUsrName { color: #583673; }
/* scrollbar */
.user-panel .image { display: inline-block; padding-left: 0rem; width: 40px; height: 40px; }
.user-panel img { height: 100%; width: 100%; }

i.tipInfo { font-size: 1rem; color: #596ba6; align-self: center; cursor: default }
/* login card tab*/
.card li.card-tab-option { list-style: none; cursor: pointer; padding: 0.8rem 0; width: 100%; border-bottom: 1px solid #8383834d; }
.card ul.card-tab { padding: 0rem; display: flex; text-align: center; margin: 0; justify-content: space-around; }
li.card-tab-option.active { background: #a84cd7ad; color: white; font-weight: 900; }
li.card-tab-option:not(.active):hover { background: #a74ad729; }

[name=loginIp] { display: none; opacity: 0 }

line { background: #06C755; height: 55px; overflow: hidden; min-width: 220px; cursor: pointer; max-width: 400px; display: block; border-radius: 4px; position: relative; }
line.login { background: #06C755; height: 40px; overflow: hidden; min-width: 220px; cursor: pointer; max-width: 400px; display: block; border-radius: 4px; position: relative; }
line::after { content: ''; }
line:active::after { content: ''; position: absolute; width: 100%; height: 100%; background: black; z-index: 5; opacity: 0.3; }
/*line:hover::after { content:''; position:absolute;width:100%;height:100%; background:black; z-index:5; opacity:0.1;}*/
line img { width: 48px; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); margin-top: 1px; cursor: pointer; }
line.login img { width: 36px; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); margin-top: 1px; cursor: pointer; }
line label { position: absolute; color: white; font-weight: bolder; margin-bottom: 0; left: calc(42px + ((100% - 42px) / 2) - 86px); padding-top: 2px; top: 50%; transform: translateY(-50%); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; font-size: 20px; }
line.login label { position: absolute; color: white; font-weight: bolder; margin-bottom: 0; left: calc(42px + ((100% - 42px) / 2) - 81px); padding-top: 2px; top: 50%; transform: translateY(-50%); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; cursor: pointer; font-size: 18px; }
#fbSelect { cursor: pointer; }
.bd-purple { border: 1px solid purple; }
.h-purple:hover { background: purple !important; color: white !important; }
.rg-line { color: #51c230; font-size: 0.9rem; }
.rg-line:hover { color: #65a85b; }
.rg-fb { color: #466ac2; font-size: 0.9rem; }
.rg-fb:hover { color: #405da5; }
[contenteditable] { outline: 0px solid transparent; caret-color: transparent }

/*** datatable ***/
.dt-container .dt-search { display: flex; justify-content: end; margin-bottom: 0.5rem; align-items: center; gap:0.5rem; }
.dt-container .selector { margin-bottom: 0.5rem; }

.table tbody td { vertical-align: middle; }
.table thead th { padding: 0.5rem; font-size: 0.95rem; line-height: 1.25rem; }
table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting { padding-right: 1.35rem; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before { right: 0.7rem; bottom: 0.5rem; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after { right: 0.2rem; bottom: 0.5rem; }

table.dataTable.table.table-striped > tbody > tr:nth-of-type(2n+1)[class*='dtrg-level'] > * { box-shadow: unset; }
/* pagination */
div.dt-container div.dt-paging ul.pagination { justify-content: end; }
/* head th type */
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date { text-align: left; }

.dt-container .toolbar, .toolbar > * { display: flex; align-items: center; }
.dt-container .toolbar { gap:0.5rem;}
/* 照片放大 */
img[data-toggle='imgbox'] { cursor: pointer; }
.image-full-show { background: #00000080; z-index: 1500; opacity: 0; box-shadow: inset 0px 0px 44px 20px #00000024, inset 0px 0px 56px 20px #00000024; width: 100vw; height: 100vh; top: 0; left: 0; position: fixed; display: flex; justify-content: center; align-items: center; }
.image-full-show img { opacity: 0; }
.image-full { max-height: 600px; }

div[id^=previewMultiple] p { margin-bottom: 0; line-height: 2rem; }
div[id^=previewMultiple] { margin: auto 0; }

.img-card { background: white; position: relative; width: 100%; height: 100%; max-height: 300px; overflow: auto; border-radius: 5px; }
.img-card img { height: 24rem; display: block; position: relative; margin: auto; }
.ck-editor__editable_inline { caret-color: #040101ed !important; }
.ck-editor__editable { min-height: 150px }
/*.ck-editor { max-width: 41.666666%; width: 41.666666% !important; }*/

.ck-read-only { background: #e9ecef !important; }
/* ckeditor disabled*/

.ck-button.ck-character-grid__tile.ck-off.ck-button_with-text { padding: var(--ck-spacing-tiny) var(--ck-spacing-standard); font-size: 1.05rem; }
.ck-button.ck-character-grid__tile.ck-off.ck-button_with-text .ck-button__label { left: -250%; position: relative; }
.ck-character-grid .ck-character-grid__tiles { /*height: 300px !important; overflow: auto; */}
.ck-powered-by {display:none !important;}


/*modal title icon*/
h4.modal-icon-warning.modal-title::before { content: '\f071'; position: relative; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-right: 0.5rem; color: #ffd945; filter: drop-shadow(1px 1px 0px black) drop-shadow(-1px -1px 0px black) drop-shadow(1px -1px 0px black) drop-shadow(-1px 1px 0px black); }
h4.modal-icon-success.modal-title::before { content: '\f00c'; position: relative; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-right: 0.5rem; color: #5bdc7d; filter: drop-shadow(1px 1px 0px #1f6f34) drop-shadow(-1px -1px 0px #1f6f34) drop-shadow(1px -1px 0px #1f6f34) drop-shadow(-1px 1px 0px #1f6f34); }
h4.modal-icon-error.modal-title::before { content: '\f00d'; position: relative; font-family: "Font Awesome 5 Free"; font-weight: 700; margin-right: 0.5rem; color: #f02c23; filter: drop-shadow(1px 1px 0px black) drop-shadow(-1px -1px 0px black) drop-shadow(1px -1px 0px black) drop-shadow(-1px 1px 0px black); }

.login_seperation { display: inline-block; vertical-align: middle; width: 100%; text-align: center; color: #91918F; line-height: 60px; }

.login_seperation:after, .login_seperation:before { content: " "; border-top: 1px solid #e5e5e5; width: 35%; display: inline-block; vertical-align: middle; }

/*手機列表Modal詳細資料子列表td title*/
.mobile-dt-childtr td:first-child { padding-right: 1rem !important; text-align: right; }

/*手機列表Modal詳細資料子列表td*/
.mobile-dt-childtr td { padding: 0.2rem !important; }

.responsive-table td { padding: 0.2rem }

.responsive-table tr td:first-child { white-space: nowrap; vertical-align: top; width: 6rem; }

tr.child td.child { padding: 0 !important }

td.child table { width: 100% }
tr.tr-child { background: #ffffff26 !important; }
td.child table tr td:first-child { min-width: 20%; }
td.child table tr td:last-child { min-width: 80%; }

table.dataTable tr.dtrg-group td { background-color: #f1f1f2; }
.rowgroup-block-title { background: #726c78; }
table.dataTable tr.dtrg-group.dtrg-level-1 td { background-color: #f1f1f2; }
.btn.bg-rg-btn { background: #726c78; }
.btn.bg-rg-btn:hover { background: #dfd3ea; color: #726c78 }

.dt-mobile-btn { position: relative; cursor: pointer; display: none; transform: translateX(-50%); width: 41%; height: 15px; border-radius: 20px; background: #6b6a7e; left: 50%; top: 5px; }
.dt-mobile-btn::before { content: '\f107'; position: absolute; left: 50%; top: -4px; height: 100%; color: white; transform: translateX(-50%); font-family: 'Font Awesome 5 Free'; font-weight: 900; }
table.collapsed[id*=buyDetailTable] tr[role='row'] td { vertical-align: top; }
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before { top: 50%; transform: translateY(-50%); }

.split-tag { position: absolute; top: 0px; left: 0px; border-radius: 0; font-size: 0.5rem !important; padding: 0.05rem 0.5rem; }

.IsTop-pin { appearance: none; cursor: pointer; }

.img-IsTop-div:hover .IsTop-pin:not(:checked) { appearance: none; position: absolute; right: -6px; bottom: -7px; width: 25px; height: 25px; border-radius: 50px; background: #ffffff7d; border: 2px solid #3c7ab8; }
.img-IsTop-div:hover .IsTop-pin:not(:checked)::before { content: '\f08d'; font-weight: 700; font-family: 'Font Awesome 5 Free'; color: #3c7ab8; position: absolute; left: 50%; font-size: 0.85rem; transform: translateX(-64%) translateY(-40%) rotate( 30deg ); top: 50%; }
.IsTop-pin:checked { appearance: none; position: absolute; right: -6px; bottom: -7px; width: 25px; height: 25px; border-radius: 50px; background: #3c7ab8; border: 2px solid #3c7ab8; }
.IsTop-pin:checked::before { content: '\f08d'; font-weight: 700; font-family: 'Font Awesome 5 Free'; color: #ffffff; position: absolute; left: 50%; font-size: 0.85rem; transform: translateX(-61%) translateY(-42%) rotate( 30deg ) scaleX(0.9); top: 50%; }
span.splitLine { border: 1px solid #d6d6d6; width: 100%; display: block; margin: 1rem 0rem; }

.bigdrop.select2-container .select2-results__options { max-height: 20em !important; }
/*.bigdrop .select2-results { max-height: 200px; }
.bigdrop .select2-choices { min-height: 150px; max-height: 150px; overflow-y: auto; }*/
/* flex */
/* row gap */
.row-gap-1 { row-gap: 1px !important; }
.row-gap-2 { row-gap: 2px !important; }
.row-gap-3 { row-gap: 3px !important; }
.row-gap-4 { row-gap: 4px !important; }
.row-gap-5 { row-gap: 5px !important; }
.row-gap-6 { row-gap: 6px !important; }
/* col gap */
.col-gap-1 { column-gap: 1px !important; }
.col-gap-2 { column-gap: 2px !important; }
.col-gap-3 { column-gap: 3px !important; }
.col-gap-4 { column-gap: 4px !important; }
.col-gap-5 { column-gap: 5px !important; }
.col-gap-6 { column-gap: 6px !important; }

/* 背景顏色 文字顏色 素材 */
/* -h結尾: 有Hover效果 */
.bg-purple, .bg-purple-h { background: #ad7dd3 !important; color: white !important; }
.bg-purple-h:hover { opacity: 0.8 !important; }
.bg-tp, .bg-tp-h { background: transparent !important; }
.bg-tp-h:hover { background: #ad7dd3 !important; color: white !important; }
.bg-blue, .bg-blue-h { background: #2d5578 !important; color: white !important; }
.bg-blue-h:hover { opacity: 0.8 !important; }
.bg-red, .bg-red-h { background: #d14e54 !important; color: white !important; }
.bg-red-h:hover { background: #c82333 !important; }
.bg-gray, .bg-gray-h { background: #6c757d !important; color: white !important; }
.bg-gray-h:hover { background: #5a6268 !important; }
.bg-gray-2, .bg-gray-2-h { background: #e3e3e3 !important; }
.bg-gray-2-h:hover { border: 1px solid #a7a7a7 !important; }
.bg-primary-purple { background: var(--primary-purple) }
.bd-purple { border: 1px solid #ad7dd3 !important; }

.t-fb-blue { color: #466ac2 !important; }
.t-line-green { color: #54C814 !important; }
.bg-line-green { background-color: #54C814 !important; }
.bg-fb-blue { background-color: #466ac2 !important; }

.font-size-14 { font-size: 1.4rem; }

button[class*=bg-btn-sm-] { height: 25px; }
.bg-btn-sm-red { background-color: #e92e20; color: white; padding: 0.05rem 0.5rem; font-size: 0.9rem;}
.bg-btn-sm-red:hover { background-color: #e72719; box-shadow: 0px 0px 5px #ed8383; color: #ffffff; transform: scale(1.02); }
.bg-btn-sm-orange { background-color: #fba246; color: #382e1d; padding: 0.05rem 0.5rem; font-size: 0.9rem; }
.bg-btn-sm-orange:hover { background-color: #fba246; box-shadow: 0px 0px 5px #fba246; color: #382e1d; transform: scale(1.02); }
.bg-btn-sm-yellow { background-color: #fdc22b; color: #2c2424; padding: 0.05rem 0.5rem; font-size: 0.9rem; }
.bg-btn-sm-yellow:hover { background-color: #fdc22b; box-shadow: 0px 0px 5px #ffca41; color: #2c2424; transform: scale(1.02); }
.bg-btn-sm-purple { background-color: #6373b5; color: white; padding: 0.05rem 0.5rem; font-size: 0.9rem; }
.bg-btn-sm-purple:hover { background-color: #6373b5; box-shadow: 0px 0px 5px #6373b5; color: white; transform: scale(1.02); }
.bg-btn-sm-green { background-color: #54C814; color: white; padding: 0.05rem 0.5rem; font-size: 0.9rem; }
.bg-btn-sm-green:hover { background-color: #54C814; box-shadow: 0px 0px 5px #54C814; color: white; transform: scale(1.02); }
.bg-btn-sm-darkgreen { background-color: #57a82a; color: white; padding: 0.05rem 0.5rem; font-size: 0.9rem; }
.bg-btn-sm-darkgreen:hover { background-color: #57a82a; box-shadow: 0px 0px 5px #57a82a; color: white; transform: scale(1.02); }
.bg-btn-sm-gray { background-color: #929a8d; color: white; padding: 0.05rem 0.5rem; font-size: 0.9rem; }
.bg-btn-sm-gray:hover { background-color: #929a8d; box-shadow: 0px 0px 5px #929a8d; color: white; transform: scale(1.02); }
.bg-btn-sm-pink { background-color: #f38f99; padding: 0.05rem 0.5rem; font-size: 0.9rem; }
.bg-btn-sm-pink:hover { background-color: #f38f99; box-shadow: 0px 0px 5px #f38f99; transform: scale(1.02); }
.bg-btn-sm-cyanblue { background-color: #8fd9c6; color: #143c31; padding: 0.05rem 0.5rem; font-size: 0.9rem; }
.bg-btn-sm-cyanblue:hover { background-color: #8fd9c6; box-shadow: 0px 0px 5px #8fd9c6; color: #143c31; transform: scale(1.02); }
.bg-btn-sm-lightpurple { background-color: #daa9e9; color: #240221; padding: 0.05rem 0.5rem; font-size: 0.9rem; }
.bg-btn-sm-lightpurple:hover { background-color: #daa9e9; box-shadow: 0px 0px 5px #daa9e9; color: #240221; transform: scale(1.02); }
.btn.btn-tag-sm-blue { --color: #2d5578; font-size: 0.9rem; font-weight: 700; background: white; color: var(--color); padding: 0.1rem 0.8rem; height: 23px; border: 1px solid #2d5578; border-radius: 23px; line-height: 19px; }
.btn.btn-tag-sm-blue:hover { background: var(--color); color: white; }

.bg-blue-1 { background: #9cb4d1; }
.small-box.bg-blue-1 { color: white !important; }
.small-box.bg-blue-1 .small-box-footer { background: white !important; color: #9cb4d1; }
.small-box.bg-blue-1 .icon i { color: white !important; }

.bg-green-1 { background: #b4d19c; }
.bg-green-2 { background: #9cd1b9; }
.bg-green-3 { background: #cdf1d5; }
.small-box.bg-green-1 { color: white !important; }
.small-box.bg-green-1 .small-box-footer { background: white !important; color: #b4d19c; }
.small-box.bg-green-1 .icon i { color: white !important; }

/* text color */
.t-main-purple { color: #623c80; }
.t-red { color: #db0000 !important; }

/* font-weight */
.fw-1 { font-weight: 100; }
.fw-2 { font-weight: 200; }
.fw-3 { font-weight: 300; }
.fw-4 { font-weight: 400; }
.fw-5 { font-weight: 500; }
.fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; }
.fw-8 { font-weight: 800; }
.fw-9 { font-weight: 900; }

/* font-size */
.fs-05 { font-size: 0.5rem; }
.fs-075 { font-size: 0.75rem; }
.fs-09 { font-size: 0.9rem; }
.fs-1-05 { font-size: 1.05rem; }
.fs-1-1 { font-size: 1.1rem; }
.fs-1-2 { font-size: 1.2rem; }
.fs-1-3 { font-size: 1.3rem; }
.fs-1-5 { font-size: 1.5rem; }
.fs-2 { font-size: 2rem; }
.fs-2-5 { font-size: 2.5rem; }

/* datatable 排序 下拉選單按鈕 */
.btn-sort-dd { border-radius: 0; border-bottom: 1px solid #5f5f5f; background: transparent; height: 30px; transition: 0.2s; position: relative; overflow: hidden; z-index: 5; }
/*.btn-sort-dd:hover { font-size: 1.03rem !important; transition: 0.2s; }*/
.btn-sort-dd::after { display: inline-block !important; margin-left: 1rem; }

/* tag button */
.tag-checkbox-div { position: relative; margin: 0rem 0.2rem; display: inline-block; width: auto; }
.tag-checkbox { --color: #2d5578; font-size: 0.9rem; font-weight: 700; background: white; position: absolute; color: var(--color); height: 23px; width: 100% !important; border: 1px solid #2d5578; border-radius: 23px; line-height: 19px; appearance: none; margin-left: 0px !important; cursor: pointer; }
.tag-checkbox-label { position: relative; margin-bottom: 0; vertical-align: top; text-align: center !important; font-size: 0.9rem; width: 100%; padding: 0rem 1.5rem; color: #2d5578; cursor: pointer }
.tag-checkbox:hover, .tag-checkbox:checked { background: #2d5578; }
.tag-checkbox-div .tag-checkbox:hover ~ label, #socFilterDiv .tag-checkbox:checked ~ label { color: white }
.tag-label { font-size: 0.93rem; color: #383838; height: 25px; background: #e7e7e7; border-radius: 5px; margin-left: 0px !important; padding: 0rem 0.8rem; cursor: pointer; margin-bottom: 0rem; display: flex; width: max-content; justify-content: center; line-height: 1.6rem; }
.tag-label-close { border-radius: 75px; width: 16px; height: 16px; text-align: center; line-height: 16px; font-size: 0.7rem; top: 1px; position: relative; transition: 0.2s; background: #989898; align-self: center; }
.tag-label-close:hover { background: #656565; }

.cir-sq-tag { padding: 0.2rem 0.5rem; border-radius: 5px; }

.t-var { top: var(--i) }

.btn-orange { background-color: #fba246; border-color: #fba246; color: #2c2101; }
.btn-orange:hover { background-color: #f19638; border-color: #f19638; }
.btn-blue { background-color: #61bde9; border-color: #61bde9; color: white }
.btn-blue:hover { background-color: #55abd4; border-color: #55abd4; color: white; }
.btn-yellow { background: #fdc22b; color: #2c2101; }
.btn-yellow:hover { background-color: #efb82d; border-color: #efb82d; }
.btn-purple { background: #6373b5; color: white; }
.btn-purple:hover { background-color: #505e9a; border-color: #505e9a; color: white; }
.btn.btn-message-number:not([value='0']) { --bgc: #eb4444; border-radius: 6px; background: var(--bgc); padding: 0.1rem 0.5rem; color: white; font-weight: 700; }
.btn.btn-message-number[value='0'] { --bgc: #48ce33; border-radius: 6px; background: var(--bgc); padding: 0.1rem 0.5rem; color: white; font-weight: 700; }
.btn.btn-message-number:hover { background-color: var(--bgc); box-shadow: 0px 0px 5px var(--bgc); transform: scale(1.02); }
.purple { color: #741a96 !important; }
.dropdown-toggle::after { display: none; }
.bg-yellow { background-color: #ffc107 !important; }

/* custom dropdown*/
.custom-dropdown { padding: 0.5rem 0.5rem; }
.custom-dropdown i.dropdown-icon { text-align: center; width: 4.5rem; font-size: 3rem; }
.custom-dropdown-item { border-radius: 0.3rem; padding: 0.8rem 0.5rem; margin: 0rem 0.2rem; cursor: pointer; }
.custom-dropdown-item:hover { filter: brightness(0.9) }
.custom-dropdown-item span { text-align: center; display: block; margin: auto; font-size: 0.95rem; margin-top: 0.3rem; font-weight: 700; cursor: pointer; }
.dropdown-menu-center { right: auto !important; left: 50% !important; top: 100% !important; -webkit-transform: translate(-50%, 0) !important; -o-transform: translate(-50%, 0) !important; transform: translate(-50%, 0) !important; }

/* sort (checkbox) dropdown*/
.dropdown-item-checkbox { display: flex; align-items: center; cursor: pointer; padding: 0rem 1rem; position: relative; margin: 3px 0rem; border-radius: 3px; }

.dropdown-item-checkbox:active { text-decoration: none; background-color: #691c6b7d; }
.dropdown-item-checkbox:hover { background: #97399947; transition: 0.2s; }
input.dropdown-item-input { display: inline-block; cursor: pointer; appearance: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 3px; }
input.dropdown-item-input::before { content: '\f111'; font-family: 'Font Awesome 5 Free'; font-weight: 100; transition: 0.2s; position: absolute; display: flex; align-items: center; height: 100%; color: #3e3e3e; left: 5px; }
input.dropdown-item-input:checked::before { content: '\f058'; font-weight: 700; font-family: 'Font Awesome 5 Free'; position: absolute; display: flex; align-items: center; height: 100%; color: #fefdff; left: 5px; transition: 0.2s }
.dropdown-item-sub input.dropdown-item-input::before { content: '\f0c8'; font-family: 'Font Awesome 5 Free'; font-weight: 100; transition: 0.2s; position: absolute; display:flex; align-items:center; height:100%; color: #3e3e3e; left: 5px; }
.dropdown-item-sub input.dropdown-item-input:checked::before { content: '\f14a'; font-weight: 700; font-family: 'Font Awesome 5 Free'; position: absolute; display: flex; align-items: center; height: 100%; color: #fefdff; left: 5px; transition: 0.2s }
label.dropdown-item-input-label { margin-bottom: 0; pointer-events: none; user-select: none; flex-basis: 100%; flex-grow: 1; flex-shrink: 0; cursor: pointer; font-weight: 600 !important; font-size: 0.95rem; border-radius: 3px; padding-top: 2px; width: 100%; margin-left: -1rem; margin-right: -1rem; padding-left: 30px; padding-right: 10px; }
input.dropdown-item-input:checked + label.dropdown-item-input-label { background: #9050d7ad; color: white; }
.dropdown-item-sub { /*margin-left: 20px; */ }

.popover { font-size: 0.96rem; }

.bootstrap-datetimepicker-widget.dropdown-menu { width: auto; }

/* 6-5 7-1 custom table*/
.custom-table td, .custom-table th { padding: 0.3rem 0.5rem; font-size: 0.95rem; }
.custom-table th { width: 30%; vertical-align: middle; }
.custom-table tr td:last-child { width: 24%; }

.card-body-title { background: #9D6DB2; padding: 0.5rem; border-radius: 2px; color: white; }

.soc-list { box-shadow: inset 0px 1px 4px 1px #00000040; padding: 1rem; min-height: 180px; max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.soc-list img { width: 420px; }

span.social-icon { font-size: 1.5rem; color: white; display: flex; position: relative; width: 24px; height: 24px; justify-content: center; align-items: center; }
span.social-icon i { left: -0.02rem; bottom: -0.08rem; position: relative; }
span.social-icon.circle-icon { font-size: 0.8rem; }
.circle-icon { border-radius: 9999px; padding: 0.3rem; }
.only-square-img { object-fit: scale-down; object-position: 50% 50%; }

.block-radio.active::before { content: 'L'; color: white; transform: rotate(221deg) scaleY(-1); font-weight: 700; position: absolute; top: 16px; left: 90%; display: flex; width: 25px; height: 25px; background: #d76acd; border-radius: 9999px; font-family: 'Source Sans Pro'; justify-content: center; font-size: 1.2rem; line-height: 1.4rem; }
.block-radio.active { background: linear-gradient(white, white) padding-box, linear-gradient(to right, #cd009f, darkorchid) border-box; border: 4px solid transparent; }

@media screen and (max-width: 1024px) {
    body::after { content: ''; margin-right: 0rem; }
    .login-box { margin: auto !important; }

    .modal-dialog { width: 96% !important }
    .dt-mobile-btn { display: inline-block }
    #loading { display: none; position: fixed; right: 0; width: 100%; background-color: #afafaf8a; z-index: 100000; opacity: 1; text-align: center; }

    #loading img { height: 45px; opacity: 1; webkit-animation: revolving 2s 0s infinite; animation: revolving 1s 0.4s infinite; }

    #loading > div { top: 50%; }

    #loading span.span-loading { font-size: 30px; vertical-align: middle; }

    .ck-editor { max-width: 100%; width: 100% !important; }
    .ck-character-grid .ck-character-grid__tiles { width: 15rem !important; height: 300px !important; overflow: auto; }
}