/* CSS Document */

a { 
    text-decoration: none;
}

a:hover { 
    text-decoration: underline;
}

html, body { 
	display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body { 
	font-family: "Microsoft JhengHei", Verdana, Arial;
}

/*------------system_box------------*/
.system_box {
	display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/*------menu_box------*/
.menu_box {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 228px;
	height: 100%;
	background: #177691;
	z-index: 13;
}

.sys_title, .sys_title div {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
}

.sys_title div img {
	display: block;
	width: 100%;
	height: auto;
}
	
.sys_title .app_title {
	text-align: center;
	color: #177691;
	display: none;
}

.m_btn {
	float: right;
	display: inline-block;
	margin: 10px -20px 0 0;
	padding: 0;
	border-radius: 0 4px 4px 0;
	text-align: center;
	background: #d5ffff;
}

.m_btn_c, .m_btn_o {
	display: block;
	width: 20px;
	height: 24px;
	margin: 0;
	padding: 0 2px;
	color: #138035;
}

.m_btn a:hover {
	color: #025e41;
}

.menu_btn, .sys_title .logo_s {
	display: none;
}

.main_menu {
	display: block;
	margin: 0;
	padding: 1em 0.3em 0 0.3em;
	font-size: medium;
	height: calc(100% - 180px);
	overflow-y: auto;
}

.w_40 {
	width: 40px;
}

.m_btn_group {
	display: block;
	position: relative;
	margin-bottom: 0.5em;
}

.m_menu_btn .accordion-button {
	margin-bottom: 0;
	padding: 0.5em 0.8em;
	color: #8adfe5;
	background: none;
	box-shadow: none;
}

.m_menu_btn .menu_button {
	display: block;
	margin-bottom: 0;
	padding: 0.5em 0.8em;
	color: #8adfe5;
}

.m_menu_btn .active {
	color: #17657b;
	font-weight: bold;
	background: #fff;
	border-radius: 0.5em;
}

.m_menu_btn .accordion-button::after {
	background-color: rgba(255, 255, 255, 0.7);
	background-position: center;
	background-size: 80%;
	padding: 0.5em;
	border-radius: 2em;
}

.m_menu_btn .accordion-button.hide-after::after {
	display: none;
}

.m_menu_btn .accordion-button i {
	width: 20px;
	text-align: center;
}

.main_menu .m_menu_btn .m_p8 {
	padding: 6px;
}

.m_menu_list1 {
	margin: 0.3em;
	padding: 0.5em 0.5em;
	background: #17586d;
	border-radius: 0.5em;
	z-index: 999; 
}

.m_menu_list1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.5em; /* 與文字的距離 */
  width: 100%;
  height: 1px;/* 底線粗細 */
  background-color: #7cb5b0;
}

.m_menu_list1 li {
	list-style: none;
	display: block;
	margin: 0.2em 0;
	padding: 0.5em 0.3em;
	text-align: center;
}

.m_menu_list1 .active {
	margin-left: -0.4em;
	margin-right: -0.4em;
	background: #d5ffff;
}

.m_menu_list1 .active a, .m_menu_list1 .active a:hover {
	color: #000;
	font-weight: bold;
}

.m_menu_list1 li a {
	color: #8ad3d8;
}

.m_menu_list1 li a:hover {
	color: #eeeeee;
}

.list-group_up {
	position: absolute;
	display: inline-block;
	width: auto;
	min-width: 240px;
	left: 30px;
	top: -4px;
	box-shadow: 2px 2px 4px #666;
	&::before {
		position: absolute;
		top: 16px;
		left: -8px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 8px 8px 8px 0;
		border-color: transparent #17586d transparent transparent;
		content: "";
		transform: translateY(-50%);
	  }
}

.w_40 .main_menu {
	height: calc(100% - 60px);
	overflow-y: inherit;
}

.w_40 .m_menu_list1::after {
	height: 0;
}

/*------con_box------*/
.con_box {
	display: block;
	margin: 0 0 0 228px;/*--menu_box_寬度--*/
	padding: 0 0 2em 0;
	min-height: 100%;
	background: #fff;
}

/*----跑馬燈----*/
.msg_box {
	display: block;
	width: 100%;
	color: #c53f3f;
	margin: 0;
	padding: 0 0.5em;
	font-size: large;
	font-weight: bold;
}

.msg_box a {
	color: #c53f3f;
}

.msg_inline {
	display: inline-block;
	width: auto;
	min-width: 100%;
}

.ml_40 {
	margin-left: 40px;	
}

.top_box .breadcrumb {
	padding: 0.8em 0.5em 0.5em 2em;
	background-color: #cccccc;
}

.top_box .breadcrumb-item {
    color: #666666;
}

.top_box .breadcrumb-item.active {
    color: #333333;
	font-weight: bold;
}

.top_box {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
	background: #cccccc;
}

.user_box {
	float: right;
	margin: 0.5em 0.5em 0 0;
	z-index: 3;
}

.user_list {
	font-size: large;
	font-weight: bold;
	margin: 0;
	padding: 0.2em;
	color: #333333;
	z-index: 9;
}

.user_list .btn {
	white-space: nowrap;
}

.user_btn {
	display: none;
}

.user_name {
	margin: 2px;
	padding: 0.5em 1em;
	font-size: 15px;
}

.alert-title {
	background: #2961aa;
	color: #ffffff;
	font-size: large;
	font-weight: bold;
}

.img_list {
	display: inline-block;
	border: #000000 1px solid;
	border-radius: 0.3em;
	margin: 0 0.3em 0 0;
	padding: 0.2em;
}

.img_list img {
	height: 100px;
	width: auto;
}

.con_box .btn.border-secondary {
    border-color: #ced4da !important;
}

/*----------公告事項列表----------*/
.inf_board li {
	font-size: medium;
	line-height: 1.5em;
	border-bottom: dashed 1px #666666;
	margin: 05.em;
	padding: 0.5em 0;
}

.inf_board li a {
	color: #333333;
}

/*----------工作天維護----------*/
.date_work {
	background-color: #d4f0f7;
}

.date_off {
	background-color: #f7ced4;
}

.table_date {
	background-color: #fff;
}

.table_date .active {
	border: 2px solid #BF0003;
}

.table_date thead th {
	text-align: center;	
}

.table_date tbody td {
	height: 5em;
}

.table_date th:nth-child(1), .table_date td:nth-child(1), .table_date th:nth-child(7), .table_date td:nth-child(7) {
	background-color: #f9fafb;
}

.date_t {
	display: inline-block;
	max-width: 29em;
	margin: 0 auto;
}

.date_m_btn {
	display: block;
	margin: 0.2em 1.8em;
	padding: 0.2em 0.3em;
	border-radius: 0.3em;
	text-align: center;
	font-size: small;
}
.tr_alert {
    background-color: rgba(246,233,186,.2);
}

.table-striped tbody .tr_alert:nth-of-type(odd) {
    background-color: rgba(224,204,134,.2);
}

.list_nav .nav-link {
    color: #999;
}

.list_nav .nav-link.active {
    color: #027db4;
	border-top: solid 2px #027db4;
}

/*------footer_box------*/
.footer_box {
	position: fixed;
	bottom: 0;
	right: 0;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.5em;
	background: #e9ecef;
	text-align: right;
	color: #666;
	z-index: 9;
}

.footer_box p {
	font-size: small;
	margin: 0;
	padding: 0;
}

/*------web_style------*/

.text-purple {
    color: #8400ff!important;
}

.text-purple2 {
    color: #c280ff!important;
}

.text-purple3 {
    color: #6d000e!important;
}

.text-warning2 {
    color: #b8741a!important;
}

.text-pink {
    color: #ec808d!important;
}

.text-lime {
    color: #bfbf00!important;
}

.bg-danger2 {
    background-color: #f7ced4!important;
}

.bg-danger3 {
    background-color: #c8c1c9!important;
}

.bg-danger4 {
    background-color: #7b4d12!important;
}

.bg-egger {
    background-color: #b7b79e!important;
}

.bg-info2 {
    background-color: #bed5dd!important;
}

.bg-info3 {
    background-color: #3db6cb!important;
}

.bg-lightyellow {
    background-color: #fffadf!important;
}

.bg-lime {
    background-color: #bfbf00!important;
}

.bg-lime2 {
    background-color: #f5feeb!important;
}

.bg-pink {
    background-color: #ec808d!important;
}

.bg-purple {
	background-color: #8400ff!important;
}

.bg-purple2 {
    background-color: #c280ff!important;
}

.bg-purple3 {
    background-color: #6d000e!important;
}

.bg-secondary2 {
	background: #90a2b0;
}

.bg-secondary3 {
	background: #939393;
}

.bg-warning2 {
    background-color: #b8741a!important;
}

.bg-warning3 {
    background-color: #e7ded3!important;
}

.btn-darkblue {
    color: #fff;
    background-color: #074c60;
}

.btn-darkblue:hover {
  color: #fff;
  background-color: #043c4c;
}

.btn-darkblue:focus, .btn-darkblue.focus {
  box-shadow: 0 0 0 0.2rem rgba(16, 118, 147, 0.5);
}

.btn-darkblue.disabled, .btn-darkblue:disabled {
  color: #fff;
  background-color: #66848d;
  border-color: #66848d;
}

.btn-danger2 {
    color: #fff;
    background-color: #b3736c;
    border-color: #b3736c;
}

.btn-danger2:hover {
    color: #fff;
    background-color: #a65c54;
    border-color: #a65c54;
}

.btn-danger2:focus, .btn-danger2.focus {
  box-shadow: 0 0 0 0.2rem rgba(211, 114, 103, 0.5);
}

.btn-danger2.disabled, .btn-danger2:disabled {
  color: #fff;
  background-color: #b99e9b;
  border-color: #b99e9b;
}

.btn-info2 {
    color: #fff;
    background-color: #72c8d9;
    border-color: #72c8d9;
}

.btn-info2:hover {
    color: #fff;
    background-color: #4da4b5;
    border-color: #4da4b5;
}

.btn-info2:focus, .btn-info2.focus {
  box-shadow: 0 0 0 0.2rem rgba(114, 200, 217, 0.5);
}

.btn-info2.disabled, .btn-info2:disabled {
  color: #fff;
  background-color: #b3c3c6;
  border-color: #b3c3c6;
}

.btn-primary2 {
    color: #fff;
    background-color: #2385bf;
    border-color: #2385bf;
}

.btn-primary2:hover {
    color: #fff;
    background-color: #12689b;
    border-color: #12689b;
}

.btn-primary2:focus, .btn-primary2.focus {
  box-shadow: 0 0 0 0.2rem rgba(18, 104, 155, 0.5);
}

.btn-primary2.disabled, .btn-primary2:disabled {
  color: #fff;
  background-color: #9db1bd;
  border-color: #9db1bd;
}

.btn-success2 {
    color: #fff;
    background-color: #7fa184;
    border-color: #7fa184;
}

.btn-success2:hover {
    color: #fff;
    background-color: #5b7f60;
    border-color: #5b7f60;
}

.btn-success2:focus, .btn-success2.focus {
  box-shadow: 0 0 0 0.2rem rgba(148, 195, 155, 0.5);
}

.btn-success2.disabled, .btn-success2:disabled {
  color: #fff;
  background-color: #adc1b0;
  border-color: #adc1b0;
}

.btn-secondary2 {
    color: #fff;
    background-color: #90a2b0;
    border-color: #90a2b0;
}

.btn-secondary2:hover {
    color: #fff;
    background-color: #7c8891;
    border-color: #737c83;
}

.btn-secondary2:focus, .btn-secondary2.focus {
  box-shadow: 0 0 0 0.2rem rgba(163, 180, 193, 0.5);
}

.btn-secondary2.disabled, .btn-secondary2:disabled {
  color: #fff;
  background-color: #afbeca;
  border-color: #afbeca;
}

.btn-warning2 {
    color: #fff;
    background-color: #948c75;
    border-color: #948c75;
}

.btn-warning2:hover {
    color: #fff;
    background-color: #7e755a;
    border-color: #7e755a;
}

.btn-warning2:focus, .btn-warning2.focus {
  box-shadow: 0 0 0 0.2rem rgba(195, 178, 128, 0.5);
}

.btn-warning2.disabled, .btn-warning2:disabled {
  color: #fff;
  background-color: #c7c1b1;
  border-color: #c7c1b1;
}

.btn-warning3 {
    color: #fff;
    background-color: #fad132;
    border-color: #fad132;
}

.btn-warning3:hover {
    color: #fff;
    background-color: #f2c30a;
    border-color: #f2c30a;
}

.btn-warning3:focus, .btn-warning3.focus {
  box-shadow: 0 0 0 0.2rem rgba(250, 209, 50, 0.5);
}

.btn-warning3.disabled, .btn-warning3:disabled {
  color: #fff;
  background-color: #d5c99a;
  border-color: #d5c99a;
}

.border-secondary2 {
    border-color: #ced4da !important;
}

.modal-xxl {
	max-width: 95%;	
}

.min_w_12 {
	min-width: 12em;	
}

.min_w_20 {
	min-width: 20em;	
}

.list_title {
	border-left: solid 4px #208ad7;
	font-weight: bold;
	padding: 0.3em 0.5em;
	margin-bottom: 0.5em;
}

.list_title2 {
	border-left: solid 4px #828270;
	font-weight: bold;
	padding: 0.3em 0.5em;
	margin-bottom: 0.5em;
}

.list_pic {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
	max-width: 240px;
}

/*--------------list_table-------------*/

.list_table thead th, .list_table thead td {
	vertical-align: middle;
}

.list_table tbody td, .list_table tbody th {
    vertical-align: middle;
}

/*--------------rwd_table-------------*/
.rwd-table td:before {
	display: none;
}

.rwd-table th, .rwd-table td {
	display: table-cell;
	padding: 0.25em 0.5em;
}

.rwd-table th:first-child, .rwd-table td:first-child {
	padding-left: 0;
	padding-right: 0;
}

.rwd-table th, .rwd-table td {
	padding: 0.5em !important;
}

/*------table_點擊底色------*/

.table_active_bg {
	background: #fdffe3;
	font-weight: bold;
}

.table_active_bg td:first-child {
	border-left: 4px solid #70cfd3;
}

.table_td_l td {
	padding: 0.5em 0;
	line-height: 1.3em;
}

/*-----------------960_web-------------------*/

/*Styles for screen 960px and lower*/
@media screen and (max-width: 960px) {
	
	.user_box {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		padding: 0;
	}
	
	.user_list {
		display: none;
		position: absolute;
		right: 0;
		top: 40px;
		padding: 0.5em;
		text-align: right;
		background: #fff;
		font-size: medium;
		box-shadow: 1px 1px 1px #333;
		border-radius: 0.3em;
	}
	
	.user_list span {
		display: block;
		white-space: nowrap;
		margin-bottom: 0.2em;
	}

	.user_btn {
		display: block;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 10px 0 0 0;
		border-radius: 0 0 0 4px;
	}
	
	.m_btn {
		display: none;
	}
	
	.system_box {
		position: relative;
	}
	
	.menu_box {
		position: static;
		width: 100%;
		height: auto;
		min-height: auto;
		border-right: none;
		background: #d5ffff;
	}
	
	.sys_title {
		display: block;
		width: auto;
		min-height: 48px;
		margin: 0 48px;
		padding-bottom: 0.5em;
	}
	
	.sys_title .logo_big, .sys_title .logo_s {
		display: none;
	}
	
	.sys_title .app_title {
		display: block;
	}
	
	.sys_title .app_title img {
		display: inline-block;
		height: 24px;
		width: auto;
	}
	
	.menu_btn {
		display: inline-block;
		float: left;
		width: 48px;
		height: 48px;
		margin: 0;
		padding: 10px 0 0 0;
		border-radius: 0 0 4px 0;
	}
	
	.main_menu {
		position: absolute;
		left: 0;
		top: 40px;
		display: none;
		width: 90%;
		height: auto;
		padding: 1em;
		background: #177691;
		z-index: 9;
		border-radius: 0.5em;
		box-shadow: 1px 1px 1px #666;
	}

	/*------con_box------*/
	.con_box {
		margin-left: 0;/*--menu_box_寬度--*/
		padding-bottom: 0;
	}

	.top_box .breadcrumb {
		padding-left: 0.5em;
	}
	
	/*------footer_box------*/
	.footer_box {
		position: static;
		text-align: center;
		
	}
	
	.rwd-table {
		background: #fff;
		min-width: 100%;
	}

	.rwd-table th {
		display: none;
	}

	.rwd-table td {
		display: block;
		width: 100%;
	}

	.rwd-table td:before {
		content: attr(data-th) " : ";
		font-weight: bold;
		display: inline-block;
		margin-right: 0.5em;
	}

	.rwd-table th, .rwd-table td {
		text-align: left;
	}

	.rwd-table th, .rwd-table td:before {
		font-weight: bold;
	}
	
}

.box_hide, .table_dp_c {
	display: none;
}