@charset "utf-8";
/* CSS Document */

@import url(sideMenu.css);
@import url(menuHead.css);                    /* header選單+手機板漢堡選單 */
@import url(tempusdominus-bootstrap-4.css);   /* 日曆 */
@import url(dcalendar.picker.css);            /* 日曆 */

body{
	font-family: '微軟正黑體', Arial, "Helvetica Neue", Helvetica, sans-serif;
	line-height: 1.7em;
	}
.bodyScroll{
	overflow:hidden;
	position:relative;
	}
*{
	margin:0;
	padding:0;
	}
a{
	color:#333;
	text-decoration:none;
	}
a:hover, a:focus, nav a:hover, nav a:focus{
	text-decoration:none;
	}
.mapContainer{
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  align-content: flex-start;
	}
.mapContainer{
	position: absolute;
  height: 100vh;
  top: 0;
  width: 100%;
  padding-top: 80px;
	}
.mainContainer{
	padding: 20px;
	overflow: hidden;
	zoom:1;
	}
.floatRight{
	float: right;
	}
.floatLeft{
	float: left;
	}
.sideMenuWrap{
	width: 20%;
	background-color: #fff;
	border-right:1px solid #ccc;
	}
.mainRight{
  width: 80%;
	}
.sideScroll, .mapWrap{
	height:100%;
	overflow-y: scroll;
	overflow-x: hidden;
	scrollbar-width:thin;  /*scrollbar 寬度*/
	z-index: 2;
	}
.sideScroll2{
	overflow-y: hidden;
	overflow-x: scroll;
	scrollbar-width:thin;  /*scrollbar 寬度*/
	z-index: 2;
	}
.sideScroll::-webkit-scrollbar, .mapWrap::-webkit-scrollbar, .sideScroll2::-webkit-scrollbar{
  width: 5px;  /*scrollbar 寬度*/
	}
.mapWrap{
	background: url(../images/map.jpg) 0 0 no-repeat;    /* 地圖demon展示用  可刪除 ==*/
	}
.mapWrap{
	width:auto;
	height:auto;
	position:absolute;
	z-index: 1;
  /*這四個方向的位置要寫全，否則(隱藏滾動條並可以滾動內容)不生效*/
  top:80px;
  bottom:0;
  right:-17px;
	left: 40%;
	overflow-x: hidden;
	overflow-y: scroll;
	}
/* ====================================================================================================================
 * 首頁 Star
 * ====================================================================================================================*/

.loginBody{
	background: url(../images/login_bg.png) 0 0 no-repeat;
	}
.loginWrap{
	width:380px;
	position: absolute;
	right:150px;
	top:50px;
	background: #fff;
	}
.loginWrap form{
	margin-top: 40px;
	padding: 0;
	}
.loginLogoBox{
	text-align: center;
	}
.loginLogoBox img{
	width:55%;
	margin-bottom: 25px;
	}
.loginWrap h1{
	font-size: 200%;
	font-weight: bold;
	}
.loginWrap label{
	font-weight: bold;
	}
.loginWrap input:focus{
	box-shadow: none;
	}
.loginWrap i{
	font-size: 120%;
	margin-right: 5px;
	}
.idBar .form-control, .pwBar .form-control, .codeBar .form-control{
	border:none;
	padding: .5rem 0;
	background-color: inherit;
	}
.idBar, .pwBar, .codeBar{
	margin: 0;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 2rem;
	}
.col-form-label{
	padding: 10px 0 10px 20px;
	}
.btnRefresh{
	background-color: inherit;
  border: none;
	vertical-align: top;
	}
.btnRefresh:hover{
	color:var(--bs-link-hover-color);
	}
.btnLogin{
	width: 100%;
	padding:11px 0;
	background-color: #2f17a3;
	border-radius:2rem;
	border:none;	
	background: linear-gradient(to right,  #ffaa44 0%,#dd3355 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
.codeBox{
	margin-bottom: 5px;
	display: inline;
  margin-right: 10px;
	}

/* ====================================================================================================================
 * 首頁 End
 * ====================================================================================================================*/

header{
	display: flex;
	padding: 10px 15px 0;
	height: 63px;
	background: url(../images/bg_head.jpg) 0 0 no-repeat;
	}
.logo{
	width: 170px;	
	}
.logo img{
	max-width: 95%;
	}
header h1{
	font-size:1.4em;
	font-weight: bold;
	line-height: 2.3em;
	flex-direction: row;
  margin-right: auto !important;
	}
header h1 a{
	text-decoration: none;
	}
header h1 a:hover{
	color:#000;
  }
.userTop{
	position: absolute;
	right:20px;
	top:25px;
	}
.userTop button{
	color:#fff;
	padding: 0;
	border:none;
	}
.userTop button:hover{
	border:none;
	}
.userTop button:focus{
	color: #fff;
	}
.userTop i{
	margin-right: 5px;
	}
.userTop button:hover{
	color: #fff;
	}
.userTop .btn.active, .userTop .btn.show, .userTop .btn:active{
	color: #fff !important;
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
	border:none;
	}
.dropdown-menu div{
	padding: 0 10px 10px 19px;
	border-bottom: 1px solid #ccc;
	}
.dropdown-item:focus{
	background-color: #16b;
	}
.sideTabContent1, .sideTabContent2, .sideTabContent3{
	padding: 20px;
	}
.mainContent{
	padding: 20px 0;
	}
.content{
	padding: 20px;
	background-color: #fff;
	border:1px solid #ccc;
	}
.breadcrumbs{
	font-size: 90%;
	margin-bottom: 20px;
	}
.breadcrumbs h2{
	font-size: 100%;
	font-weight: bold;
	display: inline-block;
	margin-bottom: 0;
	}
h3{
	font-size: 160%;
	font-weight: bold;
	padding-bottom: 5px;
	border-bottom: 3px solid #249;
	}
/* ====================================================================================================================
 * listBox
 * ====================================================================================================================*/

.totalDataBar{
	margin-bottom: 10px;
	padding: 0 8px;
	position: relative;
	}
.parkingData{
	width: 90%;
	}
.menuIcon{
	position: absolute;
	top:0;
	right:8px;
	}
.titleSite{
	color:#fff;
	font-size: 110%;
	padding: 8px;
	background-color: #6364a5;
	}
.parkingData{
	font-size:85%;
	font-weight: bold;
	color:#3f76c6;
	line-height: 1.5em;
	}
.parkingData span{
	display: block;
	}
.dataImg{
	padding: 0 8px;
	}
.dataImg img{
	max-width: 100%;
	}
.parkingListBox{
	margin-bottom: 20px;
	}
/*
listbox漢堡選單
*/
.parkingMenuLine {
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: block;
	}
.parkingMenu,
.parkingMenu::before,
.parkingMenu::after {
  background: #222;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  transition: background ease 0.15s, top ease 0.15s 0.15s, transform ease 0.15s;
  width: 20px;
	}
.parkingMenu {
  left: 0;
  top: 15px;
	}

.parkingMenu::before {
  top: -6px;
	}

.parkingMenu::after {
  top: 6px;
	}

.menu-list {
  width: 20px;
  position: fixed;
  z-index: 1;
  transition: all 0.3s;
  overflow: hidden;
	}

/*
listbox漢堡選單--隱藏核許框
*/
input#parkingMenu {
  display: none;
	}
.maintainBox{
	padding: 30px 0;
	}
.leftMaintain{
	font-size: 200%;
	font-weight: bold;
	display: flex;
  align-items: center;
	}
.leftMaintain p{
	color:#e00;
	width: 100%;
	text-align: center;
	}



























/* ====================================================================================================================
 * asideLeft Tabs
 * ====================================================================================================================*/
.nav-link:hover{
	color:#fff;
	}
.nav-tabs button{
	color:#fff;
	font-weight: bold;
	}
.nav-tabs .nav-link:hover {
	background-color: rgba(255,255,255,0.3);
	}
.nav-tabs .nav-link.active{
	color:#0a58ca;
	border:none;
	background-color: #fff;
	}
.nav-tabs .nav-link{
	border:none;
	}
.flowTitle{
	font-size: 95%;
	font-weight: bold;
	margin-bottom: 20px;
	}
.flowTitle i{
	font-size: 75%;
	vertical-align: text-top;
	margin-right: 3px;
	padding: 5px 6px;
    }
.flowTitle i, .flowTabs div{
	color:#fff;
	border-radius: 50%;	
	}
.flowTitle span{
	margin-right: 5px;
	margin:0 5px;
	}
.flowTitle span.flowColorGreen, .parkingFlowTabs .flowColorGreen i{
	color:#0ca903;
	}
.flowTitle span.flowColorYellow, .parkingFlowTabs .flowColorYellow i{
	color:#f7a60f;
	}
.flowTitle span.flowColorRed, .parkingFlowTabs .flowColorRed i{
	color:#e00000;
	}
.flowTitle .flowColorGreen i, .flowTabs .flowColorGreen{
	background-color: #0ca903;
	}
.flowTitle .flowColorYellow i, .flowTabs .flowColorYellow{
	background-color: #f7a60f;
	}
.flowTitle .flowColorRed i, .flowTabs .flowColorRed{
	background-color: #e00000;
	}
.sideTabContent2 .flowTitle i{
	font-size: 120%;
  background-color: inherit;
  padding: 0;
  margin-top: 2px;
	}
.sideTabContent2 .flowTitle .flowColorGreen i{
	color: #0ca903;
	}
.sideTabContent2 .flowTitle .flowColorYellow i{
	color: #f7a60f;
	}
.sideTabContent2 .flowTitle .flowColorRed i{
	color: #e00000;
	}
.flowTabs, .parkingFlowTabs{
	padding-left: 0;
	}
.flowTabs li, .parkingFlowTabs li{
	display: flex;
	padding:10px 0;
	border-bottom: 1px solid #ccc;
	}
.flowTabs p, .parkingFlowTabs p{
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 0;
	}
.flowTabs span, .parkingFlowTabs span{
	color: #555;
	font-size: 80%;
	font-weight: initial;
	display: block;
	}
.flowTabs div{
	margin-left: auto;
	margin-top: 8px;
	width: 40px;
	height: 40px;
	text-align: center;
	}
.parkingFlowTabs .flowLight{
  margin-left: auto;
	margin-top: 5px;
	}
.parkingFlowTabs i{
	font-size: 220%;
	line-height: 50px;
	}
.flowTabs i{
	vertical-align:inherit;
	line-height: 40px;
	}
.flowTimeUpdate{
	font-size: 90%;
	color:#777;
	text-align-last: right;
	}
#sideMenuList{
	padding-left:0;
	margin: 0;
	}
#sideMenuList li{
	list-style-type: none;
	}
.parkingFlowTabs span{
	display: inline-block;
	}
.parkingFlowTabs span:nth-child(2)::after {
  content: "|";
  padding-left: 6px;
  font-size: 80%;
	}
.parkingList em{
	color:#e00000;
	font-style: normal;
	font-weight: bold;
	}
.calendarGroup{
	width:100%;
	}
.btnVacation{
	color:#fff;
	font-weight: bold;
	width: 100%;
  background: linear-gradient(to right,  #ffaa44 0%,#dd3355 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
.fontBold{
	font-weight: bold;
	}
/* ====================================================================================================================
 * mainRight
 * ====================================================================================================================*/
.mapToolBar, .mapZoomBar{
	background-color: #fff;
	border-radius:25px;
	border:1px solid #ccc;
	position: fixed;
	right:15px;
	z-index: 999;
	}
.mapToolBar{
	margin-top: 15px;
	padding: 0 15px;
	top:80px;
	}
.mapToolBar i, .ruler img{
	margin-right: 3px;
	}
.mapToolBar button{
	padding: 3px 10px;
	border: none;
  background-color: inherit;
	}
.mapToolBar button:hover{
	background-color: #eee;
	}
.iconFuler img{
	width: 19px;
	vertical-align: sub;
	}
.mapToolBar span{
	vertical-align:middle;
	}
.mapZoomBar{
	padding: 8px 10px;
	bottom: 100px;
	}
.mapZoomBar button{
	border:none;	
	background-color: inherit;
	display: block;
	-webkit-text-stroke: 1px #fff;
	}
.btnVacationBar{
	position: relative;
	margin-bottom: 15px;
	}
.btnNew{
	position: absolute;
	right:0;
	}
.btnColor1, .btnColor2, .btnColor3, .btnColorGrey, .btnColor1:hover, .btnColor1:focus, .btnColor2:hover, .btnColor2:focus, .btnColorGrey:hover, .btnColorGrey:focus{
  color:#fff;
	}
.btnColor1, .btnColor1:focus{
	background-color: #66f;
	}
.btnColor1:hover{
	background-color: #88f;
	}
.btnColor2, .btnColor2:focus{
	background-color: #009987;
	}
.btnColor2:hover{
	background-color: #4a9;
	}
.btnColor3{
	font-size: 90%;
	padding: 3px 7px;;
	background-color: #48c;
	}
.btnColor3:hover, .btnColor3:focus{
	color:#fff;
	background-color: #16b;
	border-color:#16b;
	}
.btnColorGrey, .btnColorGrey:focus{
	background-color: #6c757d;
	}
.btnColorGrey:hover{
	background-color: #889;
	}
.btn-secondary {
  --bs-btn-focus-shadow-rgb: 250,250,250;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	}
.monitorBox{
	margin: 40px 0;
	padding: 20px 10px;
	background-color: #eee;
	border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
	position: relative;
	}
.monitorBox h4, .monitorBox .totalBar{
	display: inline-block;
	}
.monitorBox h4{
	margin-right: 20px;
	}
.monitorBox .btnOutReport{
	text-align: right;
	}
.monitorBox em{
	font-style: normal;
	font-weight: bold;
	color:#e00;
	}

.popBoxWrap{
	width: 20%;
	padding: 15px;
	}
.popBox{
	color: #fff;
  margin-bottom: 20px;
	}
.titleBox{
	font-size: 110%;
	font-weight: bold;
	padding: 5px 10px;
	background-color: #6364a6;
	}
.contentBox{
	color:#fff;
	padding: 15px;
	background-color: #000;
	}
.contentBox ul{
	padding-left:0;
	margin-bottom: 0;
	}
.contentBox li{
	margin: 0;
	list-style-type: none;
	}
.contentBox i{
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	}
.colorGreen i{
  background-color: #0ca903;
	}
.colorYellow i{
  background-color: #f7a60f;
	}
.colorPurple i{
  background-color: #92b;
	}
.roadSearchBar{
	margin-bottom: 20px;
	}
/* ====================================================================================================================
 * 日曆 star
 * ====================================================================================================================*/
.calendarRange .dropdown-menu div{
	padding: 0;
	border-bottom: none;
	}

.calendarRange span{
	padding: 7px 10px 0 0;
	}
.fontBold{
	font-weight: bold;
	}
.calendarRangeSearch{
	margin-top: 20px;
	margin-bottom: 30px;
	}
.calendarRangeSearch .input-group span{
	padding:7px 10px 0 0;
	}
.selectBarActivity span, .selectBarActivity select{
	display: inline-block;
	}
.selectBarActivity .form-select{
	width: auto;
	}
.searchDataBtnGroup{
	margin-left: -15px;
	}
.calendarRangeSearch .form-group{
	margin-bottom: 15px;
	}
.btnSubmitBar{
	text-align: center;
	}
.btnSubmitBar{
	margin-bottom: 20px;
	}

/* ====================================================================================================================
 * 表格
 * ====================================================================================================================*/
.tableMaintain thead, .tableAccount thead{
	color:#fff;
	background-color: #249;
	}
.tableMaintain tbody, .tableAccount tbody, .tablePopBox tbody{
	background-color: #fff;
	}
.tableMaintain th, .tableMaintain td, .tableAccount th, .tableAccount td, .tablePopBox th, .tablePopBox td{
  text-align: center;
	border: 1px solid #fff;
	}
.tableMaintain td, .tableAccount td, .tablePopBox td{
	vertical-align: middle;
	}
.space{
	flex: 0;
	padding: 0;
	}
tbody tr:nth-child(odd){
	background:#fff;
	}
tbody tr:nth-child(even){
	background-color: #e8f0fe;
	}
.tablePopBox thead{
	color:#fff;
	background-color: #6364a6;
	}
.tablePopBox th{
	min-width: 100px;
	vertical-align: top;
	}



/* ====================================================================================================================
 * footer
 * ====================================================================================================================*/
footer{
	text-align: center;
	font-size: 85%;
	padding:20px 0;
	}
.mainContent footer{
  color: var(--bs-body-color);
	text-align: center;
	margin-top: 20px;
	padding: 0;
	background-color: inherit;
	position: inherit;
	}
.mainContent footer span{
	display: none;
	}
/* ====================================================================================================================
 * PC 和 Mobile 切換
 * ====================================================================================================================*/
.navHome i{
	display:none;
	}
/* ====================================================================================================================
 * 漢堡選單樣式
 * ====================================================================================================================*/
#navMobile{
	display:none;
	}
.hamIcon {
	width: 40px;
	height: 40px;
	display: block;
	position: relative;
	cursor: pointer;
	}
.hamOrigin {
	position: absolute;
	top: 50%;
	left: 50%;
	}
.ham-bar {
	height: 2px;
	width: 26px;
	position: absolute;
	background: white;
	margin: -1px 0 0 -13px;
	transition: all .5s;
	}
.ham-barTop {
	transform: translateY(-6px);
	}
.ham-barBottom {
	transform: translateY(6px);
	}
#navToggle {
	display: none;
	}
#navToggle:checked ~ .hamIcon .ham-barMiddle {
	opacity: 0;
	}
#navToggle:checked ~ .hamIcon .ham-barTop {
	transform: rotate(-45deg);
	}
#navToggle:checked ~ .hamIcon .ham-barBottom {
	transform: rotate(45deg);
	}


#navMobile.navmenuListBox{
	display:block;
	}
.navmenuListBox .ham-bar{
	background:#555;
	}

/* ====================================================================================================================
 * RWD
 * ====================================================================================================================*/
@media (min-width: 768px){
		}
@media screen and (max-width: 1440px) {
	.loginBody{
		background-position: -300px 0;
		}
	.loginWrap{
		right:90px;
		}
	.sideMenuWrap, .popBoxWrap{
		width: 25%;
		}
	.mainRight{
		width: 75%;
		}
	.mapWrap{
		left: 50%;
		width: auto;
		}
	.mainContent .container{
		max-width: 95%;
		}
	}
@media screen and (max-width: 1366px) {
	.loginBody{
		background-position: -370px 0;
		}
	.loginWrap{
		right:90px;
		}
	.sideMenuWrap, .popBoxWrap{
		width: 26%;
		}
	.mainRight{
		width: 74%;
		}
	.mapWrap{
		left: 52%;
		width: auto;
		}
	}
@media screen and (max-width: 1280px) {
	.loginWrap{
		right:70px;
		}
	.sideMenuWrap, .popBoxWrap{
		width: 28%;
		}
	.mainRight{
		width: 72%;
		}
	.mapWrap{
		left: 56%;
		width: auto;
		}
	}
@media screen and (max-width: 1080px) {
/* ====================================================================================================================
 * RWD 點擊漢堡選單 左側sideMenu滑出
 * ====================================================================================================================*/
	#navMobile{
		display:block;
		position: absolute;
		top:20px;
		left:25px;
		z-index: 10;
		border:1px solid #79b;
		border-radius: 5px;
		}
	#sideMenuClosed{
		color:#fff;
		font-size:150%;
		line-height:50px;
		cursor:pointer;
		padding:0 25px;
		margin: 20px 0 0 8px;
		}
	#sideMenuContainer{
		left:-100%;
		width:100%;
		}
	.sideMenuWrap{
		position:absolute;
		z-index:9;
		top:80px;
		bottom:0;
	  left: 0;
		border-right: none;
		}
	.sideMenu .submenu-indicator{
		right:30px;
		}
	
	/* ==== RWD 點擊漢堡選單 左側sideMenu滑出  end  ===*/
	
	.loginBody{
		background-color: #000c7c;
		background-position: 0 0;
		}
	.loginWrap{
		padding: 15px 25px;
		border-radius: 10px;
		top:100px;
		left:140px;
		}
	.loginLogoBox h1 span{
		display: block;
		}
	.col-sm-3{
		width:30%;
		}
	.col-sm-9{
		width: 70%;
		}
	header{
		display: block;
		background-position:right 0;
		}
	header h1{
		line-height: 1.9em;
		text-align: center;
		margin-left: 0;
		}
	header h1 a, header h1 a:hover{
		color:#fff;
		}
	.logo{
		display: none;
		text-align: center;
		}
	.bodyScroll{
		overflow-y: auto;
		overflow-x: hidden;
		position: inherit;
		}
	.mainRight{
		width:100%;
		left: 0;
		top:0;
		}
	.mapWrap{
		display: none;
		}
	.mapContainer{
		top:80px;
		position: initial;
		padding-top: 0;
		}
	.popBoxWrap{
		width: 100%;
		padding: 30px;
		background-color:inherit;
		}
	.sideScroll{
		height:auto;
    overflow: inherit;
		}
	.mapContainer .sideScroll{
		height:100vh;
		padding-bottom: 80px;
		}
	.sideScroll2{
		height: auto;
    overflow:auto;
    scrollbar-width:initial;
		}
	}

@media (min-width: 1200px) {
  .col-xl-2 {
    width: 20%;
  }
}

@media screen and (max-width: 1024px) {
	.table-responsive{
		overflow-x: auto;
		/*表格左右滑動下方內容不變，只有表格左右滑動。*/
		}
	.tableBox, .table{
		width: 1000px;
		/*自訂適合手機瀏覽的表格寬度。      表格下方會出現x軸scrollbar，而且內容文字不會因為寬度太小而變垂直呈現*/
		}
	}
@media screen and (max-width: 960px) {
	}
@media screen and (max-width: 900px) {	
	}
@media screen and (max-width: 834px) {
	.loginBody{
		background: url(../images/login_bg2.jpg) center 0 no-repeat;
		}
	.loginWrap{
		position: inherit;
		margin:150px auto 0;
		}
	}
@media screen and (max-width: 812px) {
	}
@media screen and (max-width: 768px) {
	}
@media screen and (max-width: 766px) {
	}
@media screen and (max-width: 750px) {
	}
@media screen and (max-width: 667px) {
	}
@media screen and (max-width: 568px) {
	.userTop button span{
		display: none;
		}
	.userTop i{
		margin-right: -7px;
		}
	}
@media screen and (max-width: 428px) {
	.mapToolBar{
		width: 82%;
		padding: 0 10px;
		border-radius: 10px;
		}
	.col-6 {
		width: 100%;
		}
	}
@media screen and (max-width: 414px) {
	}
@media screen and (max-width: 390px) {
	.mapToolBar{
		width: 70%;
		}
	}
@media screen and (max-width: 375px) {
	}
@media screen and (max-width: 360px) {
	.mapToolBar{
		width: 50%;
		}
	}