html,
body {
	background-color: #fff;
  	color: #555;
  	font-family: Microsoft JhengHei;
    height: 100%;
}
body.no-scroll{
  overflow:hidden;
  position: fixed;
}
h1{
	font-size: 1.6rem!important;
}
h2{
	font-size: 1.5rem!important;
}
h3{
	font-size: 1.4rem!important;
}
a, a:hover{
  text-decoration: none!important;
}
.cursor-p{
	cursor: pointer;
}
.container-fluid{
  max-width: 1300px;
}
.is-invalid{
	animation: error-shake 0.4s;
}
.word-break{
  word-break: break-word; 
  white-space: break-spaces;
}

@keyframes error-shake {
  0% { transform: translate(2px, 0px); }
  10% { transform: translate(0px,0px); }
  20% { transform: translate(-2px,0px); }
  30% { transform: translate(0px,0px); }
  40% { transform: translate(2px,0px); }
  50% { transform: translate(0px,0px); }
  60% { transform: translate(2px,0px); }
  70% { transform: translate(0px,0px); }
  80% { transform: translate(-2px,0px); }
  90% { transform: translate(0px,0px); }
  100% { transform: translate(2px, 0px); }
}
.vertical-center{
  position: relative; top:50%; transform:translateY(-50%);
}
.hide{
  display: none;
}

.enlarge{
  transform:scale(1.05,1.05);
}
.input-group > .left-input{
  border-radius: 25px 0 0 25px;
}
.input-group-append > .group-btn{
  border-radius: 0 25px 25px 0!important; 
  border: 1px solid #ced4da;
}

.backdrop{
  display: none; 
  background: #000; 
  opacity: 0.8; 
  height: 100vh; 
  width: 100vw; 
  position: fixed; 
  top: 0; 
  left: 0;
}
.loader{
  display: none;
}
.w-fit-content{
  width: fit-content;
}
.w-100px{
  width: 100px;
}

.file-btn > input{
  position: absolute;
  font-size: 1rem;
  left: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}
/*login page start*/
body.loginpage{
	background-image: url(/resources/img/pcoc_bg.jpg); 
	background-size: cover; 
	background-position: center center;
}
body.loginpage > .filter-block{
	position: fixed; 
	width: 100vw; 
	height: 100vh; 
	background-color: #fff; 
	filter: opacity(0.4);
}
/*login page end*/

/*header menu*/
.masthead-brand a{
	text-decoration: none!important;
}
header{
  text-align: center;
}
/* .main-header{
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  z-index: 1000;
  width: 100%;
  top: 0;
  left: 0;
} */
header .drop-menu>.list{
	display: none;
}
header .dropdown-menu{
	top: 20px !important;
	font-size: 0.9rem;
	border-color: #888;
}
header .dropdown-menu::before {
    position: absolute;
    top: -6px;
    right: 20px;
    content:"";
    width: 0;
    height: 0;
    z-index: 2;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #fff transparent;
}
header .dropdown-menu::after {
    z-index: 1;
    position: absolute;
    top: -8px;
    right: 20px;
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #888 transparent;

}

/*header menu*/

@media (max-width: 365px){
  header > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .d-xxs-none{
    display: none;
  }
}

@media (max-width: 767px){
	.main-header{
		padding-top: .25rem;
		padding-bottom: .25rem;
	}
  .masthead-brand {
    margin-bottom: 0.5rem !important;
    margin-top: 1rem!important;
  }
  
  #mainContent{
    min-height: calc(100vh - 86px); 
  }
  
  .page-item .page-link{
  	padding: .25rem .5rem!important;
    font-size: .875rem!important;
    line-height: 1.5!important;
  }
}
@media (max-width: 575px) and (orientation: portrait) {
 
	body.modal-open{
		overflow:hidden;
		position: fixed;
	}
	
}
@media (min-width: 576px){
  .modal-dialog.modal-sm{
    max-width: 350px !important;
  }
}
@media (min-width: 768px){
	header{
	    padding-top: 0.65rem!important;
	}
  .masthead-brand {
    float: left;
  }
  .nav-masthead {
    float: right;
  }
  /* .nav-masthead > li:nth-child(3), .nav-masthead > li:nth-child(4){
    border-left: 2px solid #cacaca;
  } */
  /* #mainContent{
    min-height: calc(100vh - 50px);
    margin-top: 50px;
  } */
}
@media (min-width: 768px) and (max-width: 991px){
  .page-item .page-link{
  	padding: .25rem .5rem!important;
    line-height: 1.5!important;
  }
}
@media (min-width: 992px) and (max-width: 1200px){
  
}
@media (min-width: 1200px){
  
}
@media (min-width: 1300px){
 
}

/*
left menu animation
*/

.main-sidebar,
.left-side {
  position: absolute;
  top: 102px;
  left: 0;
  background-color: #18adda;
  padding: 0;
  width: 230px;
  z-index: 810;
  /*overflow-x: auto;*/
  height: calc(100% - 50px);
  /*-webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;*/
}
@media (max-width: 767px) {
  .main-sidebar,
  .left-side {
  	top: 86px;
    -webkit-transform: translate(-230px, 0);
    -ms-transform: translate(-230px, 0);
    -o-transform: translate(-230px, 0);
    transform: translate(-230px, 0);
  }
}
@media (min-width: 768px) {
  .sidebar-collapse .main-sidebar,
  .sidebar-collapse .left-side {
    -webkit-transform: translate(-230px, 0);
    -ms-transform: translate(-230px, 0);
    -o-transform: translate(-230px, 0);
    transform: translate(-230px, 0);
  }
}
@media (max-width: 767px) {
  .sidebar-open .main-sidebar,
  .sidebar-open .left-side {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.sidebar-menu{
	list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    /*margin-top: 20px;*/
}
.sidebar-menu > li{
	padding: 0.5rem 0;
}

.sidebar-menu > li > a{
	padding: 0 1.5rem;
	display: block;
	width: 100%;
}
.sidebar-menu > li.selected{
    background-color: #f9e9a6;
}
.sidebar-menu > li > *{
    color: #fff!important;
    text-decoration: none!important;
}
.sidebar-menu > li i{
   width: 2.3rem;
}
.sidebar-menu > .treeview{
	position: relative;
}
.sidebar-menu > .treeview > .fas{
	position: absolute;
	right: 0;
	top: 10px;
	cursor: pointer;
}
.sidebar-menu > .treeview > a> img{
	width: 25px;
	height: 25px;
	margin-right: 5px;
}
.sidebar-menu > .treeview > .treeview-menu{
    padding: 0;
    margin: 0;
    list-style: none;
    padding-inline-start: 0;
    background-color: #58d8ff;
    margin-top: 0.5rem;
}

.sidebar-menu > .treeview > .treeview-menu > li{
	padding: 0.4rem 0;
}
.sidebar-menu > li.current, .sidebar-menu > .treeview > .treeview-menu > li.current{
	background-color: #126680;
}
.sidebar-menu > li.current > a, .sidebar-menu > .treeview > .treeview-menu > li.current > a,{
	color: #fff!important;
}
.sidebar-menu > .treeview > .treeview-menu > li > a{
	padding-left: 1.8rem;
    font-size: 0.9rem;
    color: #444;
    text-decoration: none!important;
}
.sidebar-menu > .treeview > .treeview-menu > li.current > a{
	color: #fff!important;
}
.sidebar-menu > .treeview > .treeview-menu > li > a > i{
	font-size: 0.4rem;
    width: 2.3rem;
}
/*
 * Content Wrapper - contains the main content
 * ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper  ```
 */
 /* .right-side{
	padding: 15px 25px;
} */
.content-wrapper,
.main-footer {
  /*-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  -moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  -o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;*/
  /* margin-left: 230px; */
  z-index: 820;
}

@media (max-width: 767px) {
  .content-wrapper,
  .right-side,
  .main-footer {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .sidebar-collapse .content-wrapper,
  .sidebar-collapse .right-side,
  .sidebar-collapse .main-footer {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .sidebar-open .content-wrapper,
  .sidebar-open .right-side,
  .sidebar-open .main-footer {
    -webkit-transform: translate(230px, 0);
    -ms-transform: translate(230px, 0);
    -o-transform: translate(230px, 0);
    transform: translate(230px, 0);
  }
}
.content-wrapper,
.right-side {
  min-height: 100%;
  background-color: #fafafa;
}

/*
nav menu
*/
.breadcrumb{
	background-color: transparent!important;
	font-size: 1.2rem;
	padding: .75rem 0 0;
}
.breadcrumb-item+.breadcrumb-item::before{
	content: ">"!important;
}
.breadcrumb-item > a, .breadcrumb-item > span{
	color: #444!important;
}

/*footer start*/
footer{
  background-color: #4f4f4f; 
  color: #fff;
  padding: 10px 20px;
  font-size: 0.9rem;
}
/*footer end*/

.shake{
  animation: shake 1.2s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  10% { transform: rotate(-2deg); }
  20% { transform: rotate(2deg); }
  30% { transform: rotate(0deg); }
  40% { transform: rotate(2deg); }
  50% { transform: rotate(-2deg); }
  60% { transform: rotate(0deg); }
  70% { transform: rotate(-2deg); }
  80% { transform: rotate(2deg); }
  90% { transform: rotate(0deg); }
  95% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0.5deg); }
}

.border{
    border: 0px solid #dee2e6 !important;
	margin: 0;
    /* background-color: white; */
    padding: 0.5rem;
    position:relative; 
    margin-top:0.5rem
}
.table-data{
	min-width: 770px;
}

.table-mobile th, .table-xl-mobile th  {
	text-align: center; 
}

.table-mobile td.setting, .table-xl-mobile td.setting {
	width: 150px;
}
.table-mobile td.setting .btn, .table-xl-mobile td.setting .btn{
	width: 100%;
	margin: .125rem 0; 
}
.table-mobile ol, .table-xl-mobile ol {
	margin-bottom: 0; }

@media (max-width: 992px) {
  
	.table-mobile {
		border-width: 0!important; 
	}
	.table-mobile thead {
		display: none; 
	}
	.table-mobile tr {
		display: flex;
		flex-wrap: wrap;
		border: 1px solid #ddd;
		border-radius: .5rem;
		margin-bottom: .5rem;
	}
	.table-mobile td {
		display: block;
    border-right: 1px solid #999!important;
    margin-top: 5px;
    border-top-width: 0!important;
    border-bottom-width: 0!important;
    border-left-width: 0!important;
	}
	.table-mobile td:last-child {
		display: block;
		border-width: 0!important; 
	}
	.table-mobile td.setting{
		white-space: normal;
		margin-left: auto; 
    	margin-left: auto;
    	width: auto;
	}
	.table-mobile td.setting > .btn{
		width: auto;
	}
	.table-mobile td.order {
		white-space: nowrap;
		display: inline-block;
		background-color: #666;
		color: #fff; 
	}
	.table-mobile td.setting {
		
	}
	.table-mobile td.setting .btn {
		margin: .125rem 0; 
 	} 
}
@media (max-width: 1200px) {
  .table-xl-mobile {
    border-width: 0!important; 
  }
  .table-xl-mobile thead {
    display: none; 
  }
  .table-xl-mobile tr {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ddd;
    border-radius: .5rem;
    margin-bottom: .5rem;
  }
  .table-xl-mobile td {
    display: block;
    border-right: 1px solid #999!important;
    margin-top: 5px;
    border-top-width: 0!important;
    border-bottom-width: 0!important;
    border-left-width: 0!important;
  }
  .table-xl-mobile td:last-child {
    display: block;
    border-width: 0!important; 
  }
  .table-xl-mobile td.setting{
    white-space: normal;
    margin-left: auto; 
      margin-left: auto;
      width: auto;
  }
  .table-xl-mobile td.setting > .btn{
    width: auto;
  }
  .table-xl-mobile td.order {
    white-space: nowrap;
    display: inline-block;
    background-color: #666;
    color: #fff; 
  }
  .table-xl-mobile td.setting {
    
  }
  .table-xl-mobile td.setting .btn {
    margin: .125rem 0; 
  } 
}

.th-sort{
	position: relative;
	cursor: pointer;
}
.th-sort.asc:after{
	position: absolute;
	top: 3px;
	right: 0;
	content: '\f0de';
	font-size: 1rem;
	color: #000;
	font-family: "Font Awesome 5 Free";
}
.th-sort.desc:after{
	position: absolute;
	top: 3px;
	right: 5px;
	content: '\f0dd';
	font-size: 1rem;
	color: #000;
	font-family: "Font Awesome 5 Free";
}
div[aria-expanded="true"]::before {
    content: "\f078";
    position: absolute;
    right: 12px;
    top: 13px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
div[aria-expanded="false"]::before {
    content: "\f053";
    position: absolute;
    right: 12px;
    top: 13px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.wm-100px{
  min-width: 100px;
}
.wm-125px{
  min-width: 125px;
}
.wm-150px{
  min-width: 150px;
}
.wm-170px{
  min-width: 175px;
}
.wm-200px{
  min-width: 200px;
}

/*會擋到顯示密碼按鈕 所以移除紅色驚嘆號圖示*/
.exclamationMarkRemove{
    background-image: none !important;
    padding-right: calc(1.5em - .75rem) !important;
}

.pw_div {
    position:relative;
    display: inline-block;
}

.color-grey {
    color: #757575;
}

.pw_eye {
    position: absolute;
    top: 8px;
    right: 95px;
}

.border-2 {
  border: 2px solid #dee2e6 !important;
}

.border-2 {
  border-radius: 3%;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.2);
}

.bg-light-bk {
  background-image: url(/mAnaGEr/images/a7w7q-as1id.jpg);
  background-size: cover;
}

/*個別類別藍色外框底色*/
.bg-azure {
    background-color: #3bb7dc;
}

header, .main .bg-light {
    background-color: #f1f1f1 !important;
}

.table .thead-azure th {
    background-color: #25afd4;
    color: #fff;
}

@media (max-width: 384px) {
  .d-flex {
      display:block !important;
  }


}

@media (max-width: 768px) {
  .ml-2, .mx-2{
  margin-left: .0rem !important;
}
}