@charset "UTF-8";
/* CSS Document */
body {
	color: #333333;
	line-height: 1.5em;
	font-size:0.8125em; 
    transition: background-color .5s;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
	
}
.index-view{
	max-width: 100% !important;
}
a,button {
	-webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;
}
::haver {
	-webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;
}
::-moz-selection { /* Code for Firefox */
    color: #FFF;
    background: #ff7e00;
}

::selection {
    color: #FFF;
    background: #ff7e00;
}

/*---- 維持footer置底 ----*/
html, body {
  height: 100%; /*外層高度100%*/
  margin: 0;
}

.text-blue{
  color:#0186a8;
}
.text-red{
  color:#ff3c00; 
} 
.text-center{
	text-align: center;
}
.wrapper {
  min-height: 100%; /*外層高度100%*/
  margin-bottom: -87px; /*隨footer高度需做調整*/
}
.contant{
  padding-bottom: 87px; /*避免文字超出瀏覽器時，內容區塊不會和footer打架*/
}

/*---- login ----*/
.main-bg {
	background: url("../images/main-bg.jpg") repeat;
	min-height: 60vh;
}
.login-board {
	width: 60%;
	margin: 10px auto;
	background: #FFF;
	padding: 20px;
}
.login-label {
	background-color: #bfe6f2;
	margin-top: 8px;
	padding: 5px 5%;
	color: #00445a;
	border-radius: 6px 6px 0 0;
	display: inline-block;
}
.login-input input {
	border-radius: 0 8px 8px 8px;
}
.login-btnbar {
	text-align: center;
	margin-top: 10px;
}
.login-btnbar .btn-login {
	background-color: #b9e9ff;
	width: 20%;
}
.login-btnbar .btn-login:hover {
	background-color: #007094;
	color: #FFF;
}

.login-btnbar .btn-pwd {
	background-color: #b9e9ff;
}
.login-btnbar .btn-pwd:hover {
	background-color: #007094;
	color: #FFF;
}
.login-btnbar .btn-fpw {
	background-color: #efefef;
	width: 20%;
}
.login-btnbar .btn-fpw:hover {
	background-color: #3a5651;
	color: #FFF;
}
@media only screen and (max-width: 576px) { 
.login-board {
	width: 100%;
	margin: 10px auto;
	background: #FFF;
	padding: 20px;
}
	.login-btnbar .btn-login,.login-btnbar .btn-fpw {
	width: auto;
}
}
/*-----  invalid-set -----*/
.invalid-set {
	text-align: center;
	padding: 10px 0;
}
.invalid-set i {
	font-size: 8em;
	color: #ff5a00;
	margin-top: 10px;
}
.invalid-set h3 {
	padding: 20px 0;
	color: #373737;
}
.invalid-set p {
	background-color: #eeeeee;
	width: 80%;
	margin: 10px auto;
	color: #575757;
	padding: 15px;
	border-radius: 8px;
}
/*------ fd header ---------*/
.header-bar {
	background-image: linear-gradient(to right, rgba(0,100,63, 1),  rgba(0,130,115, 1));
	box-shadow: 0 5px 10px rgba(0,0,0,.1);
}

.header-bar .logo-set {
	padding: 0;
	margin: 10px 0;
}

.header-bar .logo-set img {
	height: 68px;
}

@media only screen and (max-width: 576px) { 
	.logo-set {
		padding: 20px 0;
	}
}
/*------ bt head ---------*/
.head-bar {
	/*background-image: linear-gradient(to right, rgba(0,130,115, 1),  rgba(55,170,255, 1));*/
	background: url("../images/header_bg.jpg") top center;
	background-size: cover;
}

.head-bar .logo-set {
	padding: 0 0 10px 0;
	margin: -10px 0 0 0;
}

.head-bar .logo-set img {
	height: 65px;
	margin-left: 10px;
}

@media only screen and (max-width: 576px) { 
	.logo-set {
		padding: 20px 0;
	}
}
/*------------- side nav --------------*/
.btn-sidenav {
	font-size: 30px;
	cursor: pointer;
	padding: 0 0 0 5px;
	margin: 0;
}
.btn-sidenav i {
	margin-top: 0px;
	vertical-align: middle;
	color: #FFF;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #FFF;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 20px;
}
/*
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  color: #818181;
  display: block;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
	text-decoration: none;
}
*/
.sidenav img {
	width: 240px;
	margin-left: 8px;
	margin-bottom: 15px;
}
.sidenav a.closebtn {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 40px;
  margin-left: 0px;
	text-align: right;
	color: #818181;
}
.sidenav .active {
  background-color: #006f55;
  color: white;
}


/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

/*----------------sidebar-wrapper----------------*/
.page-wrapper {
	padding-bottom: 20px;
}
.sidebar-wrapper {
	margin-top: 0px;
}

.sidebar-wrapper ul li:hover a i,
.sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.sidebar-wrapper .sidebar-search input.search-menu:focus + span,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
  /*color: #333333;*/
}

.sidebar-wrapper ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.sidebar-wrapper a {
  text-decoration: none;
}
/*----------------------sidebar-menu-------------------------*/
.sidebar-wrapper .sidebar-menu .sidebar-content > ul > li:first-child {
  border-top: 1px solid #FFF;
}
.sidebar-wrapper .sidebar-menu .sidebar-content > ul > li:last-child {
  border:none;
}
.sidebar-wrapper .sidebar-menu ul li a {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  transition: color 0.3s;
  position: relative;
  padding: 8px;
}

.sidebar-wrapper .sidebar-menu ul li:hover > a,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a {
  /*color: #b3b8c1;*/
}

.sidebar-wrapper .sidebar-menu ul li a i {
	color: #2c8570;
  
}
.sidebar-wrapper .sidebar-menu ul li a:hover i {
	color: #FFF;
  
}

.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
  display: inline-block;
  animation: swing ease-in-out 0.5s 1 alternate;
}


.sidebar-wrapper .fa,.sidebar-wrapper .fas {
      font-weight: 900;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a {
	padding-right: 20px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a.active:after {
	color: #666;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
  content: "\279C";
  font-family: Font Awesome 5 free;
  font-weight: 900;
  font-style: normal;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  background: 0 0;
  speak: none;
	font-size: .9em;
	color: #999;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: 8px;
  top: 10px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
  padding: 0 0 0;
	margin: 0;
	/*background-color: #ffc000;*/
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
	/*margin-left: 5px;*/
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li:first-child {
	border-top: 1px solid #FFF;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li:last-child {
	border-bottom: none;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu a {
	background-color: #318a75;
	padding-left: 30px;
	box-shadow: 0 5px 10px rgba(0,0,0, .2);
	color: #FFF!important;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu a:hover {
	/*background-color: #f5f2dd;
	color: #cb4300;*/
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
  /*content: "\26AC";
  font-family: Font Awesome 5 pro;
  font-weight: 900;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 5px;
	color: #666;
	*/
}

.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
  float: right;
  margin-top: 8px;
  margin-left: 5px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
  float: right;
  margin-top: 0px;
}

.sidebar-wrapper .sidebar-menu .badge {
  background: #384558;
}
.sidebar-wrapper .sidebar-menu .sidebar-submenu {
  display: none;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
  transform: rotate(90deg);
  right: 10px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-subtitle a {
	padding-left: 20px;
}

/*--------- leftNav-blue ------------*/
.leftNav-blue {
	background-color: #e7e7e7;
}
.leftNav-blue a {
	background-color: #e7e7e7;
}
.leftNav-blue a:hover {
	background-color: #006f55;
}
.leftNav-blue a.active {
	background-color: #006f55;
	color: #FFF;
}
.leftNav-blue li a i {
	color: #2c8570;
}

.leftNav-blue li {
	background-color: #e7e7e7!important;
	border-bottom: 1px solid #FFF;
}
.leftNav-blue li a {
	background-color: #e7e7e7;
	color: #111111;
}
.leftNav-blue li a:hover {
	background-color: #006f55!important;
	color: #FFF!important;
}
.leftNav-blue li li a:hover i {
	color: #FFF;
}
.leftNav-blue .sidebar-submenu > ul {
	background-color: #318a75;
}
.leftNav-blue .sidebar-submenu > li > a {
	background-color: #318a75!important;
	color: #FFF!important;
}
.leftNav-blue .sidebar-submenu li a i {
	color: #FFF!important;
}
.leftNav-blue .sidebar-submenu li a:hover {
	background-color: #006f55;
	color: #FFF;
}
.leftNav-blue .sidebar-submenu li a.active {
	background-color: #006f55!important;
	color: #FFF;
}
.leftNav-blue .sidebar-submenu li a.active i {
	color: #FFF!important;
}
.leftNav-blue .sidebar-submenu li a.active:hover {
	background-color: #005843!important;
	color: #FFF!important;
}

.leftNav-blue .sidebar-submenu li a:hover i {
	color: #FFF!important;
}
.leftNav-blue .sidebar-submenu li a.active:hover i {
	color: #FFF!important;
}
.leftNav-blue a.leftNav-blueLabel {
	background-color: #285584;
	color: #FFF;
	
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


/*------------- user-zone -------------*/
.user-zone {
	margin-top: 34px;
	color: #FFF;
	float: right;
	text-align: left;

}
.user-zone > i {
}
.user-zone .user-unit {
	margin:0 5px;
}
.user-zone .user-name {
	font-weight: 700;
	margin-right: 10px;
}
.user-zone #currectTime {
	float: left;
	font-size: 0.9em;
	color: #f6f6f6;
}
.user-zone a {
	display: inline;
	float: right;
	margin-top: -.4em;
}
.user-zone .dropdown-menu li a.dropdown-item {
	text-align: center;
	padding: 8px 0;
	
}
.user-zone .btn-logout {
	background-color: #dff5ff;
	color: #ff6600;
}
.user-zone .btn-logout:hover {
	color: #FFF;
	background-color: #ffa800;
}
.user-zone .btn-setting {
	background-color: #dff5ff;
	color: #007c7b;
	margin-right: 5px;
}
.user-zone .btn-setting:hover {
	color: #FFF;
	background-color: #00bbb9;
}
@media only screen and (max-width: 576px) { 
.user-zone {
	margin-top: 4px;
	margin-bottom: 10px;
	color: #FFF;
	float: right;
	text-align: left;

}
}
/*-------------- nav -----------------*/
.header-bar nav {
	padding: 0;
	margin: 0;
}
.navbar-nav {
	width: 100%;
	margin-top: 42px;
	margin-bottom: 0;
	padding: 0;
}
.navbar-nav .nav-item {
	width: 25%;
	display: inline-block;
	text-align: center;
}
.navbar-nav .nav-link {
	font-size: 1.125em;
	color: #FFF;
	border-bottom: 3px solid rgba(0,0,0,0);
	padding-bottom: 10px;
}
.navbar-nav .nav-link:hover {
	color: #FFF;
	border-bottom: 3px solid #94dc28;
	margin-top: -5px;
	padding-bottom: 15px;
}

.navbar-nav .active {
	color: #FFF;
	border-bottom: 3px solid #94dc28;
	margin-top: -5px;
	padding-bottom: 15px;
}
.navbar-gray .navbar-toggler {
	background-color: #646464;
}
.navbar button i {
	color: #FFF;
	font-size: 1.5em;
}
@media only screen and (max-width: 768px) { 
	.navbar-nav .nav-item {
	width: 100%;
	display: inline-block;
}
	.navbar-nav .nav-link:hover {
		
}
}
/*--------------for index----------------*/
h1.index-title {
	font-size: 1.125em;
	background-color: #62a300;
	display: inline-block;
}
ul.news-list {
	padding: 10px 10px;
	margin: 0;
}
ul.news-list li {
	padding: 20px 0;
}
ul.news-list li .news-date {
	font-size: .9em;
	color: #666666;
	text-align: center;
	width: 15%;
	display: inline-block;
	vertical-align: top;
}
ul.news-list li a {
	color: #004910;
	font-size: .95rem;
	width: 85%;
	display: inline-block;
}
ul.news-list li a:hover {
	color: #ff3c00;
	text-decoration: underline;
}
.btn-news {
	background-color: #f3f3f3;
	color: #666666;
	display: block;
	text-align: center;
}

/* feedbackInbox */
.feedbackInbox{
	background-color: #fff;
}
.feedbackInbox-iuput{
	height: 80px !important;
}
.btn-primary{
	background-color: #00a040 !important;
	border: #00a040 1px solid !important;
}
/*------card -----------*/
.card-banner img {
	width: 60px;
	margin: 0 10px 10px;
	
}
.card-banner .card-title {
	margin-top: 5%;
	text-align: center;
	font-size: 1.125em;
	color: #0186a8;
	padding-left: .5em;
	font-weight: 500;
}
.card-banner a:hover {
	background-image: linear-gradient(to top, rgba(190,240,255, 1),  rgba(240,255,250, 1));
}
@media only screen and (min-width:576px)and (max-width: 768px) {
	.card-banner{
		width: 48.5%;
		float: left;
	}
	.col-md-4 .card-banner:nth-child(1),.col-md-4 .card-banner:nth-child(3) {
		margin-right: 1.5%;
	}
	.col-md-4 .card-banner:nth-child(2),.col-md-4 .card-banner:nth-child(4) {
		margin-left: 1.5%;
	}
}

.card-theme .card-title {
	color: #FFF;
	font-size: 1.25em;
	margin-bottom: 0;
}
.card-theme .card-footer {
	font-size: 0.9em;
	padding-left: 5px;
	padding-right: 5px;
}
.card-theme .card-icon {
	filter: invert(1%) sepia(1%) saturate(0%) hue-rotate(0deg) brightness(100000%) contrast(100%);
	width: 70px;
	margin: 5px auto;
	transition: transform .2s;
}
.card-theme .card-icon:hover {
	transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.card-theme-a {
	background: url("../images/card-themeBg-a.jpg") top center no-repeat;
	background-size: cover;
}
.card-theme-b {
	background: url("../images/card-themeBg-b.jpg") top center no-repeat;
	background-size: cover;
}
.card-theme-c {
	background: url("../images/card-themeBg-c.jpg") top center no-repeat;
	background-size: cover;
}
.card-theme-d {
	background: url("../images/card-themeBg-d.jpg") top center no-repeat;
	background-size: cover;
}
.card-theme-e {
	background: url("../images/card-themeBg-e.jpg") top center no-repeat;
	background-size: cover;
}
.card-theme-f {
	background: url("../images/card-themeBg-f.jpg") top center no-repeat;
	background-size: cover;
}
.card-theme-g {
	background: url("../images/card-themeBg-g.jpg") top center no-repeat;
	background-size: cover;
}
.card-theme-h {
	background: url("../images/card-themeBg-h.jpg") top center no-repeat;
	background-size: cover;
}
.card-theme ul {
	padding: 0;
	margin: 0;
	font-size: 1em;
	min-height: 5.5em;
	color: #333333;
}
.card-theme li {
	padding: 2px 0;
}
.card-theme li a {
	color: #FFF;
	padding: 2px 1px;
	margin-left: 3px;
}
.card-theme a.bg-orange {
	background-color: #ff6d25;
}
.card-theme a.bg-blue {
	background-color: #00a4c2;
}
.card-theme a:hover.bg-orange {
	background-color: orange;
}
.card-theme a:hover.bg-blue {
	background-color: darkblue;
}
.card-theme .card-orange {
	background-color: #fbede2;
}
.card-theme .card-yellow {
	background-color: #f7f5d1;
}
.card-theme .card-green {
	background-color: #dcf3d8;
}
.card-theme .card-lightBlue {
	background-color: #c4f4eb;
}
.card-theme .card-bluePurple {
	background-color: #dfeefa;
}
.card-theme .card-greenBlue {
	background-color: #d8eff3;
}
.card-theme .card-red {
	background-color: #feedf6;
}
.card-theme .card-purple {
	background-color: #ecedf8;
}
.content-div {
	display: none;
}

/*--------------bread-bar----------------*/
.bread-bar {
	margin: 0 -12px;
	padding: 4px 10px;
	overflow: auto;
	font-size: 0.9em;
	background-color: #3a5651;
	color: #FFF;
}
.bread-bar i {
	margin-right: 4px;
	color: #FFF;
}
.bread-bar  a {
	color: #FFF;
	
}
.bread-bar a:hover {
	color: #ffaf40;
	text-decoration: none;
}
/*--------------content----------------*/

.news-board {
	background-color: #FFF;
	border-radius: 4px;
	overflow: auto;
	margin-top: 10px;
	margin-bottom: 20px;
	box-shadow: 0 0 18px rgba(0,0,0,.1);
	/* padding: 20px; */
}
.news-board .main-title {
	color: #017d8c;
}
.news-board h3 i {
	color: #00b4c9;
}
h3.main-title {
	font-size: 1.25em;
	padding: 8px;
	background-color: #0091c0;
	color: #FFF;
	border-radius: 6px;
}
h3 i {
	margin-right: 5px;
	font-size: 1.375em;
}
/* news page */
.news-title{
	background-color: #00b0ce;
	width:fit-content;
    font-size: 1.125em;
    color: #FFF;
    padding: 8px 15px 0 15px;
	border-radius: 8px 8px 0 0 ;
}
.news-content{
	background-color: #fff;
	padding: 20px 15px 0 15px;
	line-height: 160%;
	box-shadow: 0 0 18px rgba(0,0,0,.1);
}
.btn-back-news{
	background-color: #004910;
	color: #fff;
	display: block;
	text-align: center;
	padding: 5px 10px;
	border-radius: 3px;
}
.news-text{
	color: #666666 !important;
}
.news-text:hover {
	color: #18aeb0 !important;
}
/* news item */
.news-info {
    margin: 0 0 20px 0;
    padding: 0;
    clear: both;
    overflow: hidden;
    font-size: 1.125em;
}
.news-info li {
    float: left;
    margin: 0 20px 0 0;
    padding: 0 0 0 15px;
    background-image: url(/images/ic-link.png);
    background-repeat: no-repeat;
    background-position: 0 6px;
    list-style-type: none;
}

/*-- table-result --*/
.table a{
	cursor: pointer;
	color: #333333 !important;
	text-decoration: underline !important;
}
.table-result {
    width: 100%;
	
}
.table-result thead th {
	text-align: center!important;
	vertical-align: middle;
	background-color: #286056;
	color: #FFF;
}
.disastTable tr:nth-child(even) {
	background-color: #e7f6f7;	
}
.disastTable tr:nth-child(odd) {
	background-color: #c2e8e9;	
}
.table-result tr {
	border-bottom: 1px solid #d6d3cb;
	background-color: #FFF;
	
}

.table-result tr:hover {
	background-color: #e4f1f8!important;
}

.table-result td {
	text-align:center;
	
}

.table-result td a {
	color: #006399;
	text-decoration: none;
}
.table-result td a:hover {
            color: #004063;
        }

.table-result .text-achive {
	color: #0091c0;
}
.table-result .btn-edit {
	background-color: #0091c0;
	color: #FFF;
}
.table-result .btn-edit:hover {
	background-color: #FFF;
	color: #0091c0;
}
.table-result .btn-view {
	background-color: #00a040;
	color: #FFF;
}
.btn-threshold{
	background-color: #e27507;
	color: #FFF;
	border: #e27507;
}
.btn-threshold:hover{
	background-color: #8f4800;
	color: #FFF;
	border: #8f4800;
}
.table-result .btn-view:hover {
	background-color: #FFF;
	color: #147b00;
}
.table-result .btn-apply {
	background-color: #f97500;
	color: #FFF;
}
.table-result .btn-apply:hover {
	background-color: #FFF;
	color: #f97500;
}
.table-result .btn-review {
	background-color: #5d5b85;
	color: #FFF;
}
.table-result .btn-review:hover {
	background-color: #FFF;
	color: #5d5b85;
}
.table-result .btn-sm {
	margin-bottom: 2px;
	display: inline-block;
}
.table-result .dt-left {
	text-align: left;
}
.table-result .dt-right {
	text-align: right;
}
.table-compare td:first-child {
	text-align: right;
	background-color: #e5f6e0;
	padding-right: 6px;
	color: #666666;
	
}
.table-compare td b {
	color: #006230;
}

.table-set {
	margin: 10px 0;
}

ol.table-note {
	background-color: #eee;
	border-radius: 6px;
	padding: 15px;
	margin-top: 10px;
	font-size: 0.9em;
	color: #666666;
}
ol.table-note li {
	margin-left: 20px;
}


.table-detail tbody th {
	text-align: center!important;
	vertical-align: middle;
	background-color: #286056!important;
	color: #FFF;
}

.table-detail tbody tr, .table-detail tbody td {
		border: 1px solid #d6d3cb;
    background-color: #FFF;
    vertical-align:  middle;
 }

 .table-detail .td-center {
 		text-align: center;
 }

 .table-detail .th-w15 {
 		width: 15%;
 }
 .table-detail .lg-text {
 	font-size: 2em;
 	text-align: center;
 }
 /* 隱藏搜尋放大鏡 */
 #table-a_filter_table label {
    display: block; 
 }
 #table-a_filter label {
    display: none; 
 }

 #table-a_length{
	float: left;
 }
 .header-lightBlue{
	background-color: #00b0ce;
	color: #fff;
 }
 .header-darkBlue{
	background-color: #00445a;
	color: #fff;
 } 


@media only screen and (max-width: 768px) {

}

@media only screen and (max-width: 576px) {
	.table-result .me-1 {
		margin-right: 0!important;
		margin-bottom: 2px;
	}
	.links-img{
		
		width: 100%;
		
	}
	ul.news-list li a {
		color: #004910;
		font-size: .9rem;
		width: 75%;
		display: inline-block;
		margin-left: 32px;
	}
	/* links */
   #itemContainer{
	height: 50px;
	display: block !important;
	text-align: center;
}


}

/* common use */
.common-use{
	color: #444;
}
.common-use span{
	width: 20% !important;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}
.common-use a{
	text-decoration: underline;
	color: #444;
	width: 80% !important;
	display: inline-block;
}
/* links
#itemContainer{
	height: 80px;	
} */
/*---------------- footer ----------------------*/
.footer {
	/*background-image: linear-gradient(to right, rgba(0,130,115, 1),  rgba(55,170,255, 1));*/
	background: url("../images/footer_bg.jpg") top center;
	background-size: cover;
	padding: 20px 0 30px 0;
	color: #333333;
	font-size: 0.9em;
	text-align: center;
	height: 87px; /*設定footer本身高度，以維持置底*/
}
.footer-fd {
	background: url("../images/header_bg.jpg") top center;
	background-size: cover;
	padding: 20px 0;
	font-size: 0.9em;
	text-align: center;
	color: #FFF;
	height: 118px; /*設定footer本身高度，以維持置底*/
}
.footer-info img {
	width: 280px;
}
.footer-link {
	padding: 10px 0;
}
.footer-link a {
	color: #FFF;
}
.footer-link a:hover {
	color: aqua;
	text-decoration: none;
}
.footer-info p {
	color: #f4f4f4;
}
/*---- tree check ----*/
/* Remove default bullets */
ul, #tree-check {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#tree-check {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.tree-check .caret {
  cursor: pointer; 
  user-select: none; /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.tree-check .caret::before {
  content: "\25B6";
  color: #717f9c;
  display: inline-block;
  margin-right: 2em;
	float: left;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.tree-check .caret-down::before {
  transform: rotate(90deg); 
}

/* Hide the nested list */
.tree-check .nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.tree-check .active {
  display: block;
}

/*--------------- chart --------------------*/



.chart-area {
	margin: 20px 0;
	overflow: auto;
}
#chart-areab {
	height: 300px;
}

/*-------- btn ---------------------*/
.btn-more {
	border:1px solid #565656;
	background-color: #FFF;
	border-radius: 20px;
	font-size: 0.8em;
	color: #3a3a3a;
	margin: 0;
	padding: 4px 10px;
	width: 160px;
	display: inline-block;
	text-align: left;
}
.btn-more i {
	float: right;
	padding-top: 3px;
}
.btn-more:hover {
	background-color: #0797d3;
	color: #FFF;
	width: 100%;
}
@media only screen and (max-width: 768px) {
	.btn-more {
	width: 100%;
	}
}

.btn-add {
	border:1px solid #d0d0d0;
	background-color: #b3dfec;
	border-radius: 6px 6px 0 0;
	color: #3a3a3a;
	margin: 0;
	padding: 5px 10px;
	text-align: center;
	width: 160px;
	display: inline-block;
	float: right;
	text-decoration: none;
}
.btn-add:hover {
	background-color: #FFF;
	color: #006180;
}
.btn-help {
	border:1px solid #d0d0d0;
	background-color: #b3dfec;
	border-radius: 6px;
	color: #3a3a3a;
	margin: 0 0 0 5px;
	padding: 4px 10px;
	text-align: center;
	display: inline-block;
	float: right;
	text-decoration: none;
}
.btn-help:hover {
	background-color: #FFF;
	color: #006180;
}
.btnBar {
	text-align: center;
}
.btnBar i {
	padding-right: 5px;
}
.btnBar .btn-blue {
	background-color: #b0e6ff;
	color: #013e71;
}
.btnBar .btn-blue:hover {
	background-color: #013e71;
	color: #FFF;
}
.btnBar .btn-green {
	background-color: #94e6bb;
	color: #2c5d0e;
}
.btnBar .btn-green:hover {
	background-color: #2c5d0e;
	color: #FFF;
}
.btnBar .btn-pink {
	background-color: #fdbdcc;
	color: #8b0d00;
}
.btnBar .btn-pink:hover {
	background-color: #8b0d00;
	color: #FFF;
}
.btnBar .btn-gray {
	background-color: #e6e6e6;
	color: #484848;
}
.btnBar .btn-gray:hover {
	background-color: #484848;
	color: #FFF;
}
@media only screen and (max-width: 576px) {
	.btnBar .btn {
		margin-top: 10px!important;
	}
	.offset-3 {
		margin-left: 0!important;
	}
}

.sup-btnBar {
	float: right;
	margin-top: -12px;
}
/*-- page --*/
h3.page-title {
	display: inline-block;
	border:1px solid #565656;
	padding: 5px 6%;
	border-radius: 20px;
	font-size: 1.25em;
}

/*--- modal ---*/
.modal-set .modal-header {
	background-color: #00c8c5;
}
.modal-set .modal-title {
	font-size: 1.125em;
	color: #01362d;
}
.modal-set .modal-board {
	border-bottom: 1px solid #eee;
}
.modal-set p {
	color: #333;
}


/*--------- bt content ------------*/
ul.main-tabs {
	border-bottom: 3px solid #00b0ce;
	margin-top: 10px;
}

ul.main-tabs > li:first-child {
	border-radius: 8px 8px 0 0;
	background-color: #00b0ce;
	font-size: 1.125em;
	color: #FFF;
	margin: 0;
	padding: 8px 20px 6px;
	border: none;
}
ul.main-tabs > li.nav-item a {
	border-radius: 8px 8px 0 0;
	background-color: #FFF;
	font-size: 1em;
	color: #222222;
	margin-top: 6px;
	margin-left: 4px;
	padding: 5px 30px;
	border: 1px solid #d2d2d2;
	border-bottom: none;
}
ul.main-tabs > li.nav-item a:hover {
	background-color: #cfeaf2;
	color: #007195;
}
ul.main-tabs > li.nav-item a.active {
	background-color: #b2deec;
	border: 1px solid #b2deec;
	border-bottom: none;
	color: #00445a;
	font-weight: 700;
}
ul.main-tabs > li a.tab-link {
	text-decoration: none;
	display: inline-block;
	color: #00445a;
	margin-top: 12px;
	margin-left: 20px;
}
ul.main-tabs > li a.tab-link:hover {
	color: #009d82;
}
ul.main-tabs li li a.dropdown-item {
	border-radius: 0;
	background-color: #FFF;
	font-size: 1em;
	color: #222222;
	margin-top: 0px;
	margin-left: 0px;
	padding: 5px 30px;
	border-top: 1px solid #eeeeee;
	border-left: none;
	border-right: none;
}
ul.main-tabs li li:last-child a.dropdown-item  {
	border-bottom: 1px solid #eeeeee;
}
.output-set {
	margin-top: -37px;
	float: right;
}
.output-set .btn-help {
	border-radius: 6px 6px 0 0;
	 
}
h1.main-title {
	border-radius: 8px 8px 0 0;
	text-align: left;
	background-color: #00b0ce;
	font-size: 1.125em;
	color: #FFF;
	padding: 8px 15px 0 15px;
	height: 36px;
	margin: 0 0 1px 0;
	display: inline-block;
}
h1.main-title i {
	margin-right: 5px;
}
h1.table-title {
	border-radius: 8px 8px 0 0;
	text-align: left;
	background-color: #d67751;
	font-size: 1.125em;
	color: #FFF;
	padding: 8px 15px 0 15px;
	height: 36px;
	 
	display: inline-block;
	position: absolute;
	right: 12px;

}
h1.table-title i {
	margin-right: 5px;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #00a040 !important;
    border-color: #00a040 !important;
}
.board-header {
	float: right;
}
.board-header p {
	display: inline-block;
	margin: 0 15px 0 0;
	padding: 6px 0 0 0;
	vertical-align: middle;
}
a.btn-print {
	border-radius: 8px 8px 0 0;
	text-align: left;
	background-color: #b0b0b0;
	font-size: 1em;
	color: #FFF;
	padding: 6px 15px 5px 15px;
	margin: 3px 0 0 0;
	
}
a.btn-print:hover {
	background-color: #4b5f6c;
	color: #FFF;
}
a.btn-print i {
	margin-right: 5px;
}

/*second Tab*/

ul.second-tab > li.nav-item a {
	border-radius: 2px;
	background-color: #b3dfec;
	font-size: 1em;
	color: #222222;
	margin-top: 6px;
	margin-left: 4px;
	padding: 5px 10px;
	border: 1px solid #d2d2d2;
	border-bottom: none;
}
ul.second-tab > li.nav-item a:hover {
	background-color: #FFF;
	color: #222222;
}
ul.second-tab > li.nav-item a.active {
	background-color: #FFF!important;
	border: 1px solid #b2deec;
	border-bottom: none;
	color: #00445a;
	font-weight: 700;
}

/*--------------- search --------------------*/
.search-bar {
	background-color: #efefef;
	border-radius: 0 4px 4px;
	padding: 6px 6px 0 6px;
}
.search-bar .form-group {
	border-bottom: 1px solid #FFF;
	margin: 0!important;
	padding: 5px;
	overflow:hidden;
}
.search-bar .form-group .form-label {
	margin: 0;
	padding: 7px;
	text-align: right;
	color: #004d77;
	float: right;
}
.search-bar input {
	border: none;
}
.search-bar .btnBar {
	background-color: #efefef;
}
.updateInfo {
	float: right;
	background-color: #eaeaea;
	border-radius: 30px;
	font-size: 0.9em;
	display: inline-block;
	padding: 2px 12px;
	margin-top: 8px;
}
/*--------- bt form set ------------*/
.form-board {
	background-color: #FFF;
	border-radius:0 0 4px 4px;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	overflow: auto;
	padding: 10px 15px 10px 15px;
	 
}
.form-board h3.main-title {
	font-size: 1.25em;
	padding: 8px;
	background-color: #0091c0;
	color: #FFF;
	border-radius: 6px;
}
.form-board h3 i {
	margin-left: 5px;
	font-size: 1em;
}
.form-board p {
	background-color: #eeeeee;
	color: #555555;
	font-size: 0.9em;
	padding: 8px;
	border-radius: 4px;
}
.form-set .row .form-label {
	display:block;
	
	padding: 6px 0;
	text-align: right;
	color: #006383;
	height: 100%;
	
}
.form-set .form-label-left {
	padding: 6px 0 4px 4px;
	text-align: left;
	color: #006383;
	
}
.form-set > .row > .col-3 > .form-label {
	border-bottom: 1px solid #e9e9e9;
	display:block;
	padding: 6px 0;
	text-align: right;
	color: #006383;
	height: 100%;
	
}
.form-set .form-mark {
	color: #fa0000;
	padding-right: 2px;
}
.form-set .help-note {
	color: #e24a00;
	font-size: 0.9em;
	margin: 6px 0;
}
.form-set .help-note-block {
	margin: 5px;
}
.form-break {
	height: 36px;
}
.form-set h3.form-break-title {
	height: 40px;
	border-bottom: 1px solid #e9e9e9;
	border-left: 5px solid #00cec2;
	padding: 10px 0 0 15px;
	margin-top: 1px;
	font-size: 1em;
	color: #008e86;
	
}
.form-set .form-check-title {
	padding-bottom: 5px;
	margin-bottom: 4px;
	margin-top: 16px;
	border-bottom: 1px solid #b3dfec;
	color: #007fc0;
	font-weight: 700;
}
.form-set .form-check-sub {
	margin-left: 1.3em;
	
}
.form-set .form-topLine {
	border-top: 1px solid #e9e9e9;
}
.form-set .btn-form {
	background-color: #b0e6ff;
	color: #013e71;
	padding-top: 5px;
}
.form-set .w-input {
	background-color: #fff;
	color: #013e71;
	padding-top: 5px;
	border:1px solid #b0bcc2;
}
.form-set .btn-form:hover {
	background-color: #013e71;
	color: #FFF;
}
.form-set .btn-outline-form {
	background-color: #FFF;
	border: 1px solid #999;
	color: #013e71;
	padding-top: 5px;
}
.form-set .btn-outline-form:hover {
	background-color: #013e71;
	color: #FFF;
}
.form-set input,.form-set textarea,.form-set select {
	background-color: #e9f0f4;
	border:none;
	color: #003e63;
}
.form-set input[type=radio],.form-set input[type=checkbox] {
	border:1px solid #b0bcc2;
}
.form-set input.form-control-plaintext {
	background-color: #FFF;
}
.form-set .border-danger input {
	border:1px solid red!important;
	background-color: #FFF;
}
.longselect{
	width:100%;
}
@media only screen and (max-width: 1430px) {
	.longselect {
		width:200px !important;
		
	}
}
ul.select-pills {
	padding: 0;
	margin: 10px 0 20px;
}
ul.select-pills li {
	float: left;
	list-style: none;
	margin: 4px;
	padding: 3px 12px;
	background-color: #00ba97;
	color: #FFF;
	border-radius: 20px;
}
ul.select-pills li:hover {
	background-color: #00735e;
}
.nav-set button {
	background-color: #e0e0e0;
	border:none;
	border-radius: 6px 6px 0 0;
	color: #4b4b4b;
	text-decoration: none;
	padding: 6px 20px;
	margin-right: 2px;
	font-weight: 700;
}
.nav-set button.nav-btn:hover {
	background-color: #FFF;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.nav-set button.active {
	color: #FFF;
	background-color: #0089d0;
}
.nav-set button.active:hover {
	background-color: #006498;
}
@media only screen and (max-width: 576px) {
.form-set .row .form-label {
	text-align: left;
	display:inline-block;
	padding: 8px 0 0 0;
	
}
.form-set > .row > .col-3 > .form-label {
	text-align: left;
	padding: 8px 0 0 0;
	
	
}
	.form-set .mt-2, .form-set .mt-3 {
		margin-top: 0!important;
	}
}
/*--- chart board --*/
.chart-board {
	background-color: #FFF;
	border-radius:4px;
	box-shadow: 0 0 10px rgba(0,0,0,.15);
	overflow: auto;
	padding: 10px;
	margin-bottom: 20px;
}
.chart-board:hover {
	border-radius:8px;
	box-shadow: inset 0 0 12px rgba(0,130,110,.4);
	background-color: #f6fbfa;
}
.chart-board > h3.chart-mainTitle {
	border:1px solid #0091c0;
	color: #04708c;
	display: inline-block;
	padding: 7px 20px;
	font-size: 1.125em;
}
h3.chart-mainTitle {
	border:1px solid #0091c0;
	color: #04708c;
	display: inline-block;
	padding: 7px 20px;
	font-size: 1.125em;
}
h3.chart-subTitle {
	border:1px solid #0091c0;
	color: #04708c;
	padding: 7px 10px;
	font-size: 1.125em;
}
h3.chart-subTitle > i {
	font-size: 1.125em;
	margin-right: 5px;
	margin-left: 0;
}
.chart-board h3 {
	font-size: 1em;
	color: #365a00;
	padding-right: 0;
	margin-right: 0;
}
.chart-board h3 i {
	font-size: 1em;
	background-color: #6fb800;
	color: #FFF;
	border-radius: 50%;
	padding: 6px 5px;
	width: 30px;
	height: 30px;
	text-align: center;
}
.chart-board .number {
	display: block;
	margin: 1em auto;
	text-align: center;
	font-size: 1.8em;
	color: #009d86;
	font-weight: 700;
}
.chart-board .number small {
	font-size: 1rem;
	color: #009d86;
	font-weight: 700;
}
.chart-board .unit {
	text-align: right;
	font-size: 0.9em;
	color: #666666;
}
.chart-board a {
	color: #666;
	text-decoration: none;
}
.chart-board ul {
	margin: 0;
	padding: 0;
}
.chart-board ul li {
	padding: 5px;
	text-align: center;
}
.chart-board ul li span {
	font-size: 1.25em;
	font-weight: 700;
	color: #006fa3;
}
ul.proportion {
	padding: 0 10px;
	margin: 0 auto;
}
ul.proportion li {
	background-color: #f8f7f7;
	margin-bottom: 5px;
	padding: 6px 15px;
	border-radius: 30px;
}
ul.proportion li span {
	padding-left: 20px;
	letter-spacing: .2em;
	font-weight: 700;
	color: #00979d;
}
ul.proportion li span a {
	color: #00979d;
}
ul.proportion li:hover {
	background-color: #00bc9c;
	color: #FFF;
}
ul.proportion li:hover span {
	color: #FFF;
}

ul.proportion li:hover span a {
	color: #FFF;
}
.board-bar {
	border-radius: 0 0 4px 4px;
	padding: 15px;
	margin: 0 -20px -20px -20px;
	background-color: #e9f0f4;
}
.board-bar label {
	color: #006383;
	padding: 6px;
	text-align: right;
	width: 100%;
}
.board-bar input {
	background-color: #FFF;
	color: #003e63;
}
.text-green {
	color: #32bea6;
}
.text-grey {
	color: #5a5a5a !important;
}
#myChart {
	height: 600px;
}


.card-board {
	background-color: #FFF;
	border-radius:4px;
	box-shadow: 0 0 10px rgba(0,0,0,.15);
	overflow: auto;
	padding: 5px;
	margin-bottom: 10px;
}
.card-board:hover {
	border-radius:8px;
	box-shadow: inset 0 0 12px rgba(0,130,110,.4);
	background-color: #f6fbfa;
}
.card-board h3 {
	font-size: 1em;
	color: #444444;
	padding-right: 0;
	margin-right: 0;
}
.card-board h3 i {
	font-size: 1em;
	background-color: #6fb800;
	color: #FFF;
	border-radius: 50%;
	padding: 6px 5px;
	width: 30px;
	height: 30px;
	text-align: center;
}
.card-board .content {
	margin: 1em auto;
	text-align: center;
	font-size: 1em;
	color: #009d86;
}
.chart-board .number {
	margin: 1em auto;
	text-align: center;
	font-size: 1.6em;
	color: #009d86;
	font-weight: 700;
}
/*--- high chart ---*/

.highcharts-figure {
    min-width: 310px;
    margin: 1em auto;
}
.highcharts-figureb {
	width: auto;
    margin: 1em auto;
}
#chart-teacher {
    height: 300px;
	width: 100%;
    margin: 0 auto;
}
#chart-langarge {
    height: 450px;
	width: 100%;
    margin: 0 auto;
}
#chart-pie01, #chart-pie03, #chart-pie04, #chart-pie05, #chart-bar03, #treeMap {
	height: 250px;
}
#chart-pie02 {
	height: 250px;
	width: 95%;
	margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

.highcharts-college .chart-container {
    width: 16%;
    height: 200px;
    float: left;
}
.gauge-group .chart-container {
   width: 25%;
    height: 250px;
    float: left;
}

.gauge-groupB .chart-container {
   width: 50%;
    height: 250px;
    float: left;
}

.highcharts-data-table table {
  min-width: 310px;
  max-width: 800px;
  margin: 1em auto;
}

.highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}

.highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}

.highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
  padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}

.highcharts-data-table tr:hover {
  background: #f1f7ff;
}


#openUp {
  /*display: none;*/
  position: fixed;
  top: 210px;
	width: 180px;
  right: 0;
  z-index: 99;
  font-size: 0.9em;
  border: none;
  outline: none;
  /*background-color: #999;
	box-shadow: 0 5px 5px rgba(0,0,0,.2);
  color: white;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 4px;*/
	-webkit-transition-duration: 0.3s; /* Safari */
    transition-duration: 0.3s;
}

#openUp:hover {
  /*background-color: #00b8c8;*/
}
#openUp button {
	position: absolute;
	right: -160px;
	transition: 0.3s;
	width: 200px;
	text-align: left;
}
#openUp button i {
	width: 35px;
	text-align: left;
}
#openUp button:hover {
	right: -10px;
}
#openUp button:last-child {
	top: 35px;
}
@media screen and (max-width: 576px) {
	#openUp {
  bottom: 20px;
  right: 10px;
	}
}


.form-set .multiselect-container {
	padding: 5px;
}
.form-set .multiselect-container a {
	color: #333333;
}

.indent-17 {
    text-indent: 17px;
}
.title{
	background-color: #3054C6;
	color:#fff;
	text-align: center ;
}
.title-bg{
	width: fit-content;
	padding: 2px 10px;
	border-radius: 5px;
}
#city.title-bg{
    background-color: #754B00;
	color: #fff;
} 
#store.title-bg{
	background-color: #0c4402;
	color:#fff;
} 
#pay.title-bg{
	background-color: #1684d6;
	color:#fff;
}
#society.title-bg{
	background-color: #ce4406;
	color:#fff;
}
.text-right{
	text-align: right;
}

.fixed{
	position: fixed;
	width:100%;
	background-color: #fff;
	z-index: 500;	 
	 
}

.societyhouse, .ownerhouse{
	width: 100%;
	color: #333333;
	border: 1px solid #333 !important;
	text-align: center;
}
.society-body{
    background-color: #ffe4c7;
}

.society-head ,.society-bottom{
	color: #fff;
	background-color: #873d21 !important;
}
.owner-head{
	color: #fff;
	background-color: #347a06 !important;
}
.owner-body{
	background-color: #aff283;
}
.legalservice li {
	background-color: #efefef;
	padding: 2px 10px !important;
	width: 100%;
	border-radius: 50px;
	text-align: left !important;
}
.legalservice  li span {
	color: #347a06 !important;
}

/* PowerBI 容器樣式 */
.powerbi-container {
    width: 100%;
    height: 80vh;
    min-height: 600px;
    border: none;
    margin: 0;
    padding: 0;
}

#powerbi-report {
    width: 100%;
    height: 100%;
}