/* ---- Bootstrap 3 class aliases (app markup) on top of Bootstrap 5 ---- */
.pull-right{float:right!important;}
.pull-left{float:left!important;}
.hidden{display:none!important;}
@media (max-width:767.98px){
.hidden-xs{display:none!important;}
}
.btn-default{
--bs-btn-color:#333;
--bs-btn-bg:#fff;
--bs-btn-border-color:#ccc;
--bs-btn-hover-bg:#e6e6e6;
--bs-btn-hover-border-color:#adadad;
}
.row > .col-xs-1{flex:0 0 auto;width:8.33333333%;}
.row > .col-xs-2{flex:0 0 auto;width:16.66666667%;}
.row > .col-xs-3{flex:0 0 auto;width:25%;}
.row > .col-xs-4{flex:0 0 auto;width:33.33333333%;}
.row > .col-xs-5{flex:0 0 auto;width:41.66666667%;}
.row > .col-xs-6{flex:0 0 auto;width:50%;}
.row > .col-xs-7{flex:0 0 auto;width:58.33333333%;}
.row > .col-xs-8{flex:0 0 auto;width:66.66666667%;}
.row > .col-xs-9{flex:0 0 auto;width:75%;}
.row > .col-xs-10{flex:0 0 auto;width:83.33333333%;}
.row > .col-xs-11{flex:0 0 auto;width:91.66666667%;}
.row > .col-xs-12{flex:0 0 auto;width:100%;}
.input-group-addon{
display:flex;align-items:center;padding:0.375rem 0.75rem;font-size:1rem;
font-weight:400;line-height:1.5;color:var(--bs-body-color);text-align:center;
white-space:nowrap;background-color:var(--bs-tertiary-bg);border:1px solid var(--bs-border-color);
}
.input-group > .input-group-addon + .form-control{border-start-start-radius:0;border-end-start-radius:0;}
.huge{font-size:2.5rem;font-weight:700;line-height:1;}
.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-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px;}
.panel-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px;}
.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;}
.form-group{margin-bottom:1rem;}
.dropdown-submenu > .dropdown-menu{display:none;}
.dropdown-submenu:hover > .dropdown-menu{display:block!important;}

.side-sticky{
position:sticky;
position:-webkit-sticky;
top:0px;
}
.sticky-top {
position: fixed;
top: 0;
z-index:99999;
}
.snackbar-container{
z-index:99999999;
}
.snackbar-container p{
z-index:99999999;
font-size:1rem !important;
line-height:1.6rem !important;
}

.autocomplete {
position: relative;
display: inline-block;
width: 100%
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
/*when navigating through the items using the arrow keys:*/
background-color: #4285f4 !important;
color: #ffffff;
}
.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
}
.opacity-25{opacity:0.25;}
.opacity-50{opacity:0.5;}
.opacity-75{opacity:0.75;}

.shadow-ci{
box-shadow: 2px 3px 6px rgba(96, 96, 96, 0.4) ;
}
.shadow-primary{
box-shadow: 2px 3px 6px rgba(96, 96, 96, 0.4) ;
}
.shadow-success{
box-shadow: 2px 3px 6px rgba(96, 96, 96, 0.4) ;
}
.shadow-danger{
box-shadow: 2px 3px 6px rgba(96, 96, 96, 0.4) ;
}
.shadow-default{
box-shadow: 2px 3px 6px #ccc;
}


*{font-family: sans-serif,'Noto Sans TC','Microsoft JhengHei';}
html {
overflow-x: hidden;
max-width: 100%;
height: auto;
}
html, body {
min-height: 100% !important;
min-height: 100vh !important;
}
body {
overflow-x: hidden;
max-width: 100%;
position: relative;
min-height: 100vh;
height: auto;
}
body, table, p, div{
font-size:16px;
}
body, table, p, div, h1, h2, h3, h4, h5, h6{
color:#585757;
}

.object-fit-contain {
width: 100%;
height: 100%;
object-fit: contain; /*magic*/
}

img.icon {
width: 1em;
height: 1em;
object-fit:cover;
//margin-right:0em;
//vertical-align:top;
}

.navbar, #page-wrapper{
border:0px;
}
.page-wrapper{
padding-left:1rem;
padding-right:1rem;
max-width:1024px;
margin: 0 auto;
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page-wrapper > footer{
margin-top: auto;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
padding-top: 1rem;
}
.page-wrapper > #_modal{
flex-shrink: 0;
}
/* Full-bleed section inside .page-wrapper: background reaches viewport edges */
.blog-page-bleed{
margin-left:-1rem;
margin-right:-1rem;
padding-left:1rem;
padding-right:1rem;
box-sizing:border-box;
}
.page-thin{
margin:0 auto;
max-width:768px;
padding-left:1em;
padding-right:1em;
}
footer{
width:100%;
}
footer, footer li, footer p, footer a, footer a, .footer{
font-size:.95rem;color:#805439;line-height:1.5em;
}
.fa-blank{
visibility:hidden !important;
}

a, a:hover, a:focus, a:active, a:visited{
color:#4285f4;
cursor:pointer;
text-decoration: none !important;
}

.text, a.text, span.text {
color:#585757 !important;
}
.text-none, .text-none:hover{
text-decoration: none ;
}

.text-bold{
font-weight: 900;
}
.text-unbold{
font-weight: 400;
}
.text-larger {
font-size: 120%;
}
.text-lg {
font-size: 140%;
}
.text-rating{
color:#585757 !important;
}
.smaller {
font-size: 70%;
}
.smallest {
font-size: 50%;
}
.text-link{
color:#4285f4;
}
.text-ci{
color:#2F8BF2;
}
.text-right{
text-align:right;
}
.text-left{
text-align:left;
}
.text-middle{
vertical-align:middle !important;
}
.badge{
font-weight:400 !important;
}
hidden{
display:none;
}
.cursor-pointer{
cursor:pointer;
}

/* Icon + following text: align icon with first line when text wraps; single-line rows use align-items-center on flex parent */
.search-result-line-link{
line-height: 1.45;
}
.search-result-line-icon{
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 1.35em;
min-height: 1.45em;
}
.search-result-line-icon .fa,
.search-result-line-icon .fa-solid,
.search-result-line-icon .fa-regular,
.search-result-line-icon .fa-brands{
line-height: 1;
}
.search-result-line-static{
line-height: 1.45;
}
.search-result-website-link .search-result-website-text{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover,
.pagination .page-item.active .page-link
{
background-color:#4285f4 ;
border-color:#4285f4 ;
color:#fff !important;
}


.pagination>li>a, .pagination>li>span,
.pagination .page-item:not(.active) .page-link
, .text-primary, a.text-primary:hover, a.text-primary:focus{
color:#4285f4;
}
.text-success, .btn-success.btn-outline{
color:#28a745 !important;
}
.text-danger{
color:#dc3545 !important;
}

.btn-primary, .btn-primary:hover, .panel-primary>.panel-heading{
background-color: #4285f4;
border-color: #4285f4 !important;
outline-color: #4285f4 !important;
}
.panel-primary{
border-color: #4285f4 !important;
}
.panel{
background:transparent;
}
.btn-outline{
//color:#4285f4 !important;
background-color: #ffffff;
}
.btn-outline:hover{
color: #4285f4 !important;
background-color:#ffffff !important;
}

.btn-code{
border:1px #ccc solid;
margin:2px;
padding:3px 7px;
}

.form-control:focus{
border-color:#4285f4 !important ;
box-shadow: 0 0 1px #4285f4;
}
.form-control{
color: #4285f4;
}

.form-label-sm label{
font-weight:400;font-size:1em;color:#666;
}
input[type=checkbox]{
width: 1.3em;
height: 1.3em;
}

}
.topbar-nav a, .topbar-nav fa{
color:#666666;
}
.sidebar-nav a, .sidebar-nav fa{
color:#666666;
}
.nav-kw{
width:100%;
padding-top:2rem;
}
.nav-kw a{
}

.sidebar ul li{border-bottom-width:0px !important;}
ul.align-left{
padding-left:0;
list-style-type:none;
}
.page-header, h1{
font-size:1.5em; font-weight: 500; margin-top:25px;margin-bottom:15px !important;color:#000;;border-color:#fff; text-shadow: 0.5px 0.5px #eee;
}
h2{
font-size:1.2em;
padding-top:.5rem;
padding-bottom:1rem;
font-weight:500;
}
.section-header{
background:#fff; text-shadow: 0.5px 0.5px #eee;
padding-top:.8em;
padding-right:1em;
//color:#2F8BF2 !important;
}
.vcenter-block {
display: inline-block; vertical-align: middle; float: none;
}
.vcenter {
vertical-align: middle;
}
.flex-center{
display: flex;
align-items: center;
justify-content: center;
}
.flex-center-h{
display: flex;
justify-content: center;
}
.flex-center-v{
display: flex;
align-items: center;
}

.p-title{
padding:2.5em 0 1.5em 0;
margin:0px;
font-weight:600;
font-size:1em;
}
.p-title .btn{
font-size:85%;
}

span.btn{
-webkit-user-select: auto; /* Safari 3.1+ */
-moz-user-select: auto; /* Firefox 2+ */
-ms-user-select: auto; /* IE 10+ */
user-select: auto; /* Standard syntax */
}
.card{
white-space:nowrap;
margin-right:10px;
}


table th{font-weight: 500;color:#585757; text-shadow: 0px 0px #eee;height:3em;}
.table>thead>tr>th {
border-bottom: 1.5px solid #333;
}
.table>tfoot {
border-top: 1.5px solid #333;
}
td span > button{
padding: 0px 12px 0px 12px !important;
}
.table-no-border tr,.table-no-border td,.table-no-border th,.table-no-border tbody{border:0px !important;}
.table-condensed th, .table-condensed td{padding: 2px !important;height:1.4em;}
.table-vcenter th, .table-vcenter td{vertical-align: middle !important;}
tr.vcenter td{vertical-align: middle !important;}

.tr-off td, .tr-off td a {
color: #999 !important;
}

.modal-content{padding:15px 15px 5px 15px;box-shadow:0 3px 3px rgba(200,200,200,.5);margin:15px;}
.table-nowrap th, .table-nowrap td{white-space:nowrap;}

.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}

.fixed-header {
position: fixed;
top: 0px;
opacity: 1;
z-index: 99;
background-color: #fff;
width: 100%;
}
.bg-fade{
background-color: #f8f8f8;
}
.bg-th{
background-color: #ddd;
}
.bg-ch{
background:#fff0f6;
}
.div-me{
background-color: #ffffee;
border: #cccc99 1px solid;
}
.bg-hl-y{
background-color: #ffffee;
}
.bg-hl-r{
background-color: #ffeeee;
}
.bg-hl-g{
background-color: #eeffee;
}
.bg-hl-b{
background-color: #eeeeff;
}

.bg-none, .bg-none:hover, .bg-none:focus, .bg-none:active, .bg-none:focus-within{
background-color:rgba(255, 255, 255, 0.0) !important;
border: none !important;
outline:none !important;
}
.filter-tag, .recordcount-tag{
padding:0px 0px 0px 10px;
margin:0px;
}


.dropdown-submenu {
position: relative;
}

.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
overflow-y: auto;
}

.dropdown-submenu:hover>.dropdown-menu {
display: block;
}

.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}

.dropdown-submenu.pull-left {
float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
.rotate90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate270 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.text-bold{font-weight:600 !important;}
.text-xbold{font-weight:900 !important;}
.text-small{font-size:85% !important;}
.text-i{font-style: italic; !important;}
.text-code{font-family:Consolas;}
.text-break{word-wrap:break-word !important;overflow-wrap:break-word !important;white-space:normal !important;}
.text-ellipsis{text-overflow:ellipsis !important;}
.w-100{width:100%;}
.border-primary{
border: 3px #4285f4 solid !important;
}
.one-line{overflow:hidden;line-height:1em;height:1em;}
.two-lines{overflow:hidden;line-height:1.5em;height:3.4em;}

.border-ch-primary, .border-ch-primary:focus{
border: 3px #2F8BF2 solid !important;
}
.border-normal, .border-normal:focus{
border: 3px #666 solid !important;
}

.full-screen{
width:100% !important;height:100% !important;min-width:100% !important;min-height:100% !important;
position:absolute !important;top:0 !important;left:0 !important;margin:0 !important;overflow: hidden !important;
z-index:99999;
}

.shink{
transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8); /* IE 9 */
-webkit-transform: scale(0.8, 0.8); /* Safari and Chrome */
-o-transform: scale(0.8, 0.8); /* Opera */
-moz-transform: scale(0.8, 0.8); /* Firefox */
transform-origin: top left;
}

/******************employee_form_tool***************************/

.li_tool .fa-trash-o{
display: none;
}
.li_tool:hover .fa-trash-o{
display: block;
}

.click2copy{
cursor:pointer;
border-bottom: 1px dashed #666 !important;
}

.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
display: none;
width: 50px;
height: 50px;
background-color: rgba(51, 51, 51, 0.7);
color: white !important;
text-align: center;
line-height: 50px;
font-size: 24px;
border-radius: 50%;
cursor: pointer;
z-index: 1000;
transition: opacity 0.3s ease;
}

.back-to-top:hover {
background-color: rgba(51, 51, 51, 0.7);
}