/* Common Components - starts */
.container {
	margin: 0 20px 0 220px;
	position: relative;
	width: calc(100% - 240px);
	padding: 80px 20px 0 20px;
	padding-top:80px;
}
.inline-block {
	display: inline-block;
}
.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.flex_center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}
.flex_start {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.flex_center2 {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}
.flex_center_end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
}
.flex_center_sb {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
}
.jus-start {
	justify-content: flex-start;
}
.jus-end {
	justify-content: flex-end;
}

.float-r {
	float: right;
}
.float-l {
	float: left;
}
.pdl-5 {
	padding-left: 5px;
}
.mgt-5 {
	margin-top: 5px;
}
.mgt-10 {
	margin-top: 10px;
}
.mgt-15 {
	margin-top: 15px;
}
.mgt-20 {
	margin-top: 20px;
}
.mgt-30 {
	margin-top: 30px;
}
.mgt-50 {
	margin-top: 50px;
}
.mgt-80 {
	margin-top: 80px;
}
.mgl-3 {
	margin-left: 3px;
}
.mgl-10 {
	margin-left: 10px;
}
.mgl-15 {
	margin-left: 15px;
}
.mgr-5 {
	margin-right: 5px;
}
.mgr-10 {
	margin-right: 10px;
}
.mgr-15 {
	margin-right: 15px;
}
.mgr-20 {
	margin-right: 20px;
}
.mgb-3 {
	margin-bottom: 3px;
}
.mgb-5 {
	margin-bottom: 5px;
}
.mgb-10 {
	margin-bottom: 10px;
}
.mgb-20 {
	margin-bottom: 20px;
}
.mgb-30 {
	margin-bottom: 30px;
}
.mgb-50 {
	margin-bottom: 50px;
}
.mg-3 {
	margin: 3px;
}
.mg-10 {
	margin: 10px;
}
.mg-20 {
	margin: 20px;
}
.mg-30 {
	margin: 30px;
}
.mg-30-0 {
	margin: 30px 0;
}
.mg-50 {
	margin: 50px;
}
.mg-15 {
	margin: 15px;
}
.mg-unset {
	margin: 0 !important;
}
.pdt-10 {
	padding-top: 10px !important;
}
.wid-80 {
	width: 80%;
}
.wid-100 {
	width: 100%!important;
}
.wid-100px {
	width: 100px;
}
.wid-200px {
	width: 200px!important;
}
.wid-503 {
	width: 503px !important;
}
.wid-450 {
	width: 450px !important;
}
input:focus, select:focus {
	border: 3px solid #cba60f;
}
textarea {
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	overflow: auto;
	border: 1px solid #979797;
	border-radius: 3px;
	resize: none;
	font-size: 16px;
	color: #3c3c3c;
}
input{
	height: 48px;
	width: 250px;
	background-color: #fff;
	border: 1px solid #3c3c3c;
	border-radius: 3px;
	padding: 6px 10px;
	box-sizing: border-box;
	margin-right: 8px;
	color:#333;
}
input.date{
	height: 48px;
	width: 250px;
	background-color: #fff;
	border: 1px solid #3c3c3c;
	border-radius: 3px;
	padding: 6px 10px;
	box-sizing: border-box;
	position: relative;
}
input.date:focus{
	border: 3px solid #cba60f;
}
input[type=date], .date {
	color: #cacaca;
}
.readonly {
	background-color: #ececec !important;
	color: #6d6d6d !important;
}
.wid-100 {
	width: 100%;
}
::-webkit-input-placeholder {
	color: #cacaca;
}
:-moz-placeholder {
	color: #cacaca;
}
::-moz-placeholder {
	color: #cacaca;
}
:-ms-input-placeholder {
	color: #cacaca;
}
select {
	width: 100%;
	height: 48px;
	color: #696969;
	border: 1px solid #3c3c3c;
	background-color: #fff;
	border-radius: 3px;
	padding: 5px;
}
option{
	color:#333;
}
.box {
	width: 100%;
	/* padding: 30px 5px; */
	background-color: #f8f8f8;
}
.boxTitle {
	font-size: 18px;
	color: #07689f;
	font-weight: 500;
}
.btnbox {
	position: relative;
	margin: 20px 0px!important;
}
.btnbox label {
	font-weight: 400;
}
.innerbox {
	border: 1px solid #696969;
	margin-top: -2px;
	background-color: #fff;
}
.visiting{
background: #518335;
color:#fff;
padding:6px;
}
.leave{
background: #E0E0E0;
padding:6px;
}
.force{
background: #7D0021;
color:#fff;
padding:6px;
}
.unbound{
	padding: 6px;
}
.remark{
background: #F8F8F8;
color: #07689f;
border:1px solid #07689f;
padding:5px;
display: inline-block;
margin-right: 5px;
}



/* filter */
.filterbox {
	opacity: 0;
	visibility: hidden;
	font-size: 16px;
	position: absolute;
	right: 0;
	background: #ffffff;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
	border: 1px solid #ececec;
	padding: 20px 20px;
	margin: 5px 0;
	color: #32576f;
}
.filterbox.open {
	opacity: 1;
	visibility: visible;
	z-index: 10;
}
.filterInner {
	position: relative;
	width: 350px;
	min-height: 30px;
	line-height: 42px;
	margin: 8px 0px;
	padding-left: 120px;
}
.filterInner label {
	position: absolute;
	line-height: 48px;
	width: 100px;
	text-align: right;
	font-size: 16px;
	top: 0;
	left: 0;
}
.filterInner input {
	width: 100%;
}
.filterInner a {
	width: 100%;
}
.line {
	width: 100%;
	height: 1px;
	background-color: #e0e0e0;
}
#alert-center-link {
	list-style: none;
	display: flex;
	height: 48px;
}
/*--------align settings--------*/
.ver-align {
	vertical-align: middle;
	align-items: center;
}
.align_left {
	text-align: left;
}
.align_right {
	text-align: right;
}
.align_center {
	text-align: center;
}
/* Fonts Settings */
h1 {
	font-size: 20px;
	color: #32576f;
}
h2 {
	font-size: 16px;
	color: #000000;
}
.pagetitle {
	font-size: 20px;
	font-weight: 600;
	color: #cba60f;
	letter-spacing: 1px;
	display: block;
}
.fw-600 {
	font-weight: 600;
}
.fs-50 {
	font-size: 50px;
}
.fs-40 {
	font-size: 40px;
}
.fs-24 {
	font-size: 24px;
}
.fs-20 {
	font-size: 20px;
}
.fs-18 {
	font-size: 18px;
}
.fs-16 {
	font-size: 16px;
}
.fs-14 {
	font-size: 14px;
}
.fs-12 {
	font-size: 12px;
}
.wh_word {
	color: #fff;
}
.basic001 {
	color: #000000;
}
.basic002 {
	color: #333333;
}
.basic003 {
	color: #6d6d6d;
}
.basic004 {
	color: #bdbdbd;
}
.basic005 {
	color: #e0e0e0;
}
.basic006 {
	color: #f8f8f8;
}
.lemon {
	color: #cba60f;
}
.mainblue {
	color: #32576f;
}
.preblue {
	color: #07689f;
}
.text_grey {
	color: #cacaca;
}
.darkgrey{
	color: #3C3C3C;
}
/* Button Components */
.filterbox .button, .buttons-print {
	height: 48px!important;
}
.filterbtn {
	position: absolute;
	top: 20px;
	right: 0;
}
.adminbutton {
	color: #fff;
	background-color: #32576f;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0px 1px 2px rgba(97, 97, 97, 0.2), 0px 2px 6px rgba(97, 97, 97, 0.2);
}
.button, .buttons-print {
	font-size: 18px;
	font-weight: 600;
	padding: 0 20px;
	height: 50px;
	/* width: 118px; */
	border-radius: 8px;
	text-align: center;
	/* box-shadow: 0px 1px 2px rgba(97, 97, 97, 0.2),
    0px 2px 6px rgba(97, 97, 97, 0.2); */
}
.tbl_button {
	font-size: 16px;
	font-weight: 600;
	padding: 0 10px;
	height: 40px;
	width: 90px;
	border-radius: 8px;
	text-align: center;
}


.sort {
	background: none;
}
.sort {
	background: none;
}
.sort:focus {
	border: none;
}
.searchbtn {
	padding: 10px 75px;
}
.editbtn,
.deletebtn,
.searchbtn,
.seebtn,
.allbtn,
.recordbtn {
	color: #f8f8f8;
	border: 1px solid #07689f;
	background-color: #07689f;
}
.delete{
	background: #CBA60F;
	border: 1px solid #CBA60F;
}
.searchbtn2 {
	color: #f8f8f8;
	border: 1px solid #07689f;
	background-color: #07689f;
	width: 115px;
}
.recordbtn {
	width: 120px;
}
.allbtn {
	max-width: 55px;
}
.closebtn {
	color: #f8f8f8;
	border: 1px solid #6d6d6d;
	background-color: #6d6d6d;
}
.nextbtn,
.prebtn,
.addbtn,
.confirmbtn,
.buttons-print {
	border: 1px solid #c0c0c0;
	color: #07689f;
	background-color: #fff;
}
.cancelbtn {
	/* border: 1px solid #f0f0f0; */
	border: 1px solid #c0c0c0;
	color: #6d6d6d;
	background-color: #fff;
}
.filterbtn {
	font-weight: normal;
	z-index: 10;
}
.nextbtn {
	font-size: 16px;
	font-weight: 600;
	color: #0051a5;
	border: 1px solid #0051a5;
	background-color: #fff;
	border-radius: 3px;
}
.btnText {
	line-height: 28px;
	margin-left: 10px;
}
/* Color Components */
.state {
	padding: 2px;
	border-radius: 12.5px;
	color: #ffffff;
	height: 25px;
	font-size: 18px;
}
/* character */
.wordback {
	background-color: #f8f8f8;
	padding: 3px 5px;
}
.clearfix {
	clear: both;
}
.tag {
	display: inline-block;
	padding: 6px 8px;
	border-radius: 3px;
	text-align: center;
}
.bg-box {
	font-size: 16px;
	font-weight: 400;
	right: 0;
	background: #ffffff;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 20px 15px;
	color: #333;
	height:100%;
}

/* loader */
.loader_outer{
	width: 100%;
	height:100vh;
	position: fixed;
	z-index:300;
	/* background: rgba(0, 0, 0, 0.7); */
  }
  .loader{
	height: 100%;
	width: 100%;
  }
  /* loader end */

  .overlay {
	position: fixed;
	top: 0;
	z-index: 1000;
	width: 100%;
	height:100vh;
	display: none;
	background: rgba(0,0,0,0.7);
  }

/* tooltip */
  .tooltip, .tooltip2{
	font-size: 14px;
	font-weight: 500;
	background: #333333; 
	border-radius: 3px;
	width: 282px; 
	position: absolute; 
	top: 65px; 
	right: 93px; 
	z-index: 100;
	padding: 12px;
	line-height: 130%;
	opacity: 0;
	cursor: default;
  }
  
  #same:hover + div.tooltip, #reason_tooltip:hover + div.tooltip2{
	opacity: 1;
  }
/* tooltip */


.bottom_line{
	border-bottom: 1px solid #07689F;
}
.top_line{
	border-top: 1px solid #07689F;
}


body ::-webkit-scrollbar {
	float: left;
	width: 8px;
	height:8px;
	overflow-y: scroll;
	margin-bottom: 25px;
}
body ::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
	background-color: rgba(85, 85, 85, 0.75);
}

/* 字數超過長度45px時結尾顯示... */
.ellipsis_num{
    width:65px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* 一行 */
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* 成功/失敗跳窗 */
#status {
	border-radius: 8px;
	height: 70px;
	width: calc(100% - 280px);
	z-index: 201;
	position: fixed;
	padding: 0 32px;
	display: none;
	align-items: center;
}
#status p{
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 1.125px;
	margin:0;
}
.success{
	color:#2A562A;
	background: #D9ECDB;
}
.error{
	background: #ECD9D9;
	color: #A41F1F;
}
.close {
	cursor: pointer;
	position: absolute;
	top: 50%;
	right: 2%;
	font-size:20px;
	transform: translate(0%, -50%);
	opacity: 1;
	color:#2A562A!important;
}
/* 成功/失敗跳窗 */


/* 確認跳窗 */
.alert_block {
	width: 100%;
	height: 100vh;
	display: none; /* block toggle */
	position: fixed;
	z-index: 1000;
	top: 0px;
	left: 0px;
	background-color: rgba(0, 0, 0, 0.2);
}
.alert_box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 519px;
	height: 256px;
	border-radius: 8px;
	background-color: #f8f8f8;
	border: 1px solid #cba60f;
	box-sizing: border-box;
}
.btn_block {
	margin-top: 54px;
	display: flex;
	justify-content: center;
}
.alert_box > p {
	width: 100%;
	margin-top: 75px;
	text-align: center;
	font-family: "Noto Sans TC";
	font-weight: 500;
	font-size: 20px;
	color: #004266;
	letter-spacing: 0.5625px;
}

.btn_block > a:nth-child(1) {
	display: inline-flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	width: 101px;
	height: 48px;
	vertical-align: top;
	line-height: 48px;
	background-color: #5f5f5f;
	color: #e0e0e0;
	border-radius: 8px;
	text-align: right;
	padding-right: 16px;
	position: relative;
	cursor: pointer;
	margin-right: 15px;
	box-shadow: 0px 1px 2px #61616133, 0px 2px 4px #61616133;
}

.btn_block > a:nth-child(2) {
	display: inline-flex;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	width: 101px;
	height: 48px;
	vertical-align: top;
	line-height: 48px;
	background-color: #004266;
	color: #e0e0e0;
	border-radius: 8px;
	text-align: right;
	padding-right: 16px;
	position: relative;
	cursor: pointer;
	box-shadow: 0px 1px 2px #61616133, 0px 2px 4px #61616133;
}

.btn_block > a.confirm{
	background-color: #004266;
	margin-right: 0;
}


.btn_block > a > span {
	display: inline-block;
	vertical-align: middle;
}
/* 確認跳窗 */

a#print, a#add, a#outputexcel{
	z-index:2;
}

#alertLabel{
	margin-left:20px;
}

.print_btn{
	position: absolute;
	display: flex;
	align-items: flex-start;
	height:52px!important;
}
.dt-buttons{
	display: flex;
	justify-content: center;
	align-items: center;
	height:50px!important;
}
.buttons-print{
	padding:0 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	height:100%!important;
}
.buttons-print img{
	height:20px;
}
.buttons-print span{
	height:100%;
	padding-top:11px;
}
.displayNone{
	display: none!important;
}
.h-32{
	height: 32px;
}



@media (max-width: 1440px) {
	input {
		width: 195px;
	}
}

/* DataTables 1.10.23 客製規則遷移（升級至 1.13.7 後仍套用） */
.dataTables_wrapper { overflow: hidden; }
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px 12px;
    height: 40px;
    background-color: transparent;
}
.dataTables_wrapper .dataTables_filter { margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 6px 12px;
    background-color: transparent;
    margin-left: 3px;
    margin-right: 60px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #cba60f !important;
    background: #333 !important;
    border: none;
}