/* 最上層 */
.topBar{
	display: flex;
	box-shadow: 1px 1px 20px rgba(0,0,0,0.2);
	overflow: hidden;
}
.topMenuBtn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 240px;
	height: 100%;
	padding: 0;
	background-size: auto 45px;
	background-position: center center;
	box-shadow: 2px -6px 20px rgba(0, 0, 0, 0.5);
	/* background: url(../imagesBackend/icon_topMenu.png)no-repeat; */
	/* background-position: center center; */
}
.topLogo{
	flex: 1;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}

.MenuAreaMask {
    display: none;
    z-index: 110000;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.MenuAreaMask.open{
	display: block;
}
.topBarSystemName{
	width: 240px;
	height: 100%;
	/* 如有logo可打開使用 */
	background: url(../imagesBackend/Menu/topBar_systemName.png)no-repeat;
}
@media (max-width: 768px){
	.topLogo{
		padding-right: 0px;
	}
	.topMenuBtn{
		width: 190px;
		/* height: 100%; */
	}
}
  /*資訊列表*/
  .showContentBtn {
	display: none;
    position: absolute;
    left: 240px;
    top: 100px;
    width: 130px;
    padding: 0 5px;
    background: rgba(0,0,0,0.6) ;
    background-position: 97% center;
    color: #fff;
    transition: all 0.4s ease-in-out;
}
@media (max-width: 767px){
	.showContentBtn{
		left: -130px;
	}
	/* .layerSettingBtn:hover{
		background:rgba(0,47,73,0) url(../imagesBackend/icon_layer.png)no-repeat;
		background-position: center center;
		background-size: 40%;
	} */
}
.showContentBtn:hover,
.showiframeBoxBtn:hover{
	color: #fff;
	background: rgb(180, 122, 122);
}
/*css3 menu*/
.menu-opener, 
.menu-opener:hover, 
.menu-opener.active, 
.menu-opener-inner, 
.menu-opener-inner::before, 
.menu-opener-inner::after, 
.menu, 
.menu.active {
	-webkit-transition: 250ms all;
	transition: 250ms all;
  }
  
  .menu-opener {
	/* display: inline-block; */
	display: flex;
    justify-content: center;
    align-items: center;
	cursor: pointer;
	width: 40px;
	height: 100%;
	margin: 0 6px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  .menu-opener:hover{
	  background: #00000020;
  }
  .menu-opener-inner {
	background: #ffffff;
	height: 1px;
	margin-left: 10%;
    /* margin-top: 45%; */
	width: 80%;
  }
  .menu-opener-inner::before, .menu-opener-inner::after {
	background: #ffffff;
	content: '';
	display: block;
	height: 1px;
	width: 80%;
  }
  

  .menu-opener-inner::before {
	-webkit-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	transform: translateY(-10px);
  }
  .menu-opener-inner::after {
	-webkit-transform: translateY(8px);
	-ms-transform: translateY(8px);
	transform: translateY(8px);
  }

  @media (max-width: 520px){
	.menu-opener-inner {
		/* margin-top: 65%; */
	}
}
.iconLogo{
	width: 46px;
    /* padding-top: 5px; */
	margin-right: 2px;
}

.iconLogo img{
	width: 100%;
}
.systemText{
	line-height: 1;
	/* text-align: right; */
}
.sName{
	margin-bottom: 4px;
	font-size: 1.063rem;
	color: #c3f7ff;
}
.systemName{
	font-size: 1rem;
	color: #ffffff;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.systemName .area{
	font-size: 1.2rem;
	font-weight: bold;
}
.hiddenMenu{
	display: none;
}

@media (max-width: 414px){
	.sName,.systemName{
		display: none;
	}
	.topMenuBtn {
		width: 80px;
	}
}
@media (max-width: 768px){
	.topMenuBorder{
		display: none;
	}
	.hiddenMenu{
		display: inline-block;
	}
}
.topSearch{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	color: #fff;
	cursor: pointer;
	background-position: center center;
}

.tipGroup a.topSearch:hover{
	color: #fff;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.5);
}
.topSearch i,.topSearch span{
	line-height: 1.1;
}
@media (max-width: 768px){
	.topSearch{
		width: 30px;
		height: 100%;
		margin-right: 2px;
		background-size: 100% auto;
	}
}

/*小提示、登出、關鍵字*/
.tipGroup{
	display: flex;
	color: #fff;
}

.topWarnGroup{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;	
	padding: 0 10px;
}
.NumberGroup{
	position: relative;
	width: 28px;
	height: 26px;
}
.topWarnGroup .text{
	font-size: 1rem;
	color: #00000080;
}
.NumberMsg{
	position: absolute;
	right: -23px;
    top: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: #fff;
	background: #FB1656;
	box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.onlineGroup{
	display: flex;
	padding: 4px 10px;
	margin-right: 4px;
	color: #fff;
}
.onlineGroup:hover{	
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}
.onlineGroup > div{
	padding:  0 2px;
	display: flex;
	align-items: center;
}
.onlineGroup .text{
	width: 36px;
	line-height: 1.2;
}
.changeWindowItem.btn-group{
	display: flex;
	align-items: center;
}
.changeWindowItem.btn-group a[class*="btn-outline"]:not(.active){
	/* background: #ffffff; */
    /* --bs-btn-hover-color: #1f1f1f !important;    */
}
.changeWindowItem a[class*="btn-outline"] {    
    --bs-btn-hover-color: #d2eef8 !important;    
	--bs-btn-hover-bg: #078acc80 !important;  
}
.userArea{
	padding: 14px 10px;
	display: flex;
	align-items: center;
	background: #59BA89;
}
.userArea > div:first-child{
	border-left: 0 !important;
	padding-left: 5px;
}
.userGroup{
	display: flex;	
	padding: 0 10px;
	border-left: 1px solid #fff;	
	border-right: 1px solid #fff;
}
.userGroup > div{	
	padding: 0 2px;
}
.userChange{
	display: flex;
	flex-direction: column;
}
.userChange a{
	line-height: 20px;
    margin: 1px 0px 1px 0;
    font-size: 1.2rem;
	color: #fff;
}
.userPhoto{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 100%;
	overflow: hidden;
}
.userPhoto img{
	width: 40px;
	border-radius: 50%;
	border: 2px solid #ffffff;
}
.userName{
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.userName .name{
	/* line-height: 24px; */
	font-size: 1rem;
	font-weight: bold;
}
.userName .jobTitle{
	line-height: 18px;
	font-size: 1rem;
}
.signOut{	
    height: 100%;
	margin-left: 2px;
}
.signOut a{
	line-height: 1.2;
	display: flex;
	align-items: start;
	justify-content: center;
	flex-direction: column;
	padding: 2px 10px;
    height: 100%;
	color: #fff;
	font-weight: bold;
	font-size: 1rem;
}
.signOut a:hover{	
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.5);
}
.tip-red{
	position: absolute;
	top: 8px;
    right: 5px;
	width: 6px;
	height: 6px;
	background: #ff3333;
	border-radius: 20px;
}
.tipItem{
	display: flex;
	justify-content: center;
	align-items: center;	
    padding: 4px 0 0 0;
}
.tipItem > a{
	margin: 0 10px;	
	padding: 10px 10px;
}

.tipGroup .tipItem a.topSearch {
	border-radius: 10px;
	color: #01575C;
}
.tipGroup .tipItem a.topSearch span,
.tipGroup .tipItem a.topSearch i{
	color: #01575C;
}
.tipGroup .tipItem .topSearch {
    width: auto;
    height: auto;
}
.tipGroup .tipItem a.topSearch i{
	font-size: 2.3rem;
}
.tipGroup .tipItem a.topSearch:hover {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
}
/* 地圖切換 */
.toggleBtnBox{
	display: flex;
	padding: 10px 10px;
}

.menuBox .tipGroup{
	display: none;
}
@media (max-width: 1024px){
	.topBar .toggleBtnBox .openDoubleCol,
	.topBar .toggleBtnBox .openLeft_s,
	.topBar .toggleBtnBox .openRight_s
	{
		display: none;
	}
	.topBar .tipGroup{
		display: none;
	}
	.menuBox .tipGroup{
		display: block;		
		margin: 0;
		padding: 0;
	}
	.menuBox .userArea {
		flex-wrap: wrap;
		padding: 6px 6px 4px 6px;
	}
	.menuBox .signOut,
	.menuBox .onlineGroup{
		flex: 1;		
		justify-content: center;
	}
	.menuBox .signOut a {
		justify-content: center;
		align-items: center;
		padding: 10px 2px;
	}
	.userGroup{
		width: 100%;
		order: 3;
		flex-direction: column;
		border: 0;
		border-top: 1px solid #fff;
	}
	.userName {
		flex-direction: row;
		align-items: center;
	}
	.userName > div{
		padding: 0 4px;
	}
	.userChange {
		display: flex;
		flex-direction: row;		
		justify-content: center;
	}
}
@media (max-width: 768px){
	.topBar .toggleBtnBox {
		padding: 10px 4px;
	}
	.menu-opener {
		width: 40px;
	}
}
@media (max-width: 540px){
	.topBar .toggleBtnBox .openDoubleCol,
	.topBar .toggleBtnBox .openLeft_s,
	.topBar .toggleBtnBox .openRight_s
	{
		display: none;
	}
	.topBar .toggleBtnBox a i{
		display: none;
	}
	.tipGroup {
		padding: 10px 6px;
	}
	.tipGroup a{
		padding: 0 8px;
	}
	.onlineGroup {
		padding: 6px;
	}
	.userGroup {
		padding: 0 6px;
	}

}
@media (max-width: 400px){
	.topBar .toggleBtnBox {
		padding: 10px 0px;
	}
	.tipGroup {
		padding: 10px 0;
	}
	.tipGroup a{
		padding: 0 8px;
	}
	
	.tipGroup .tipItem a.topSearch {
		padding: 2px 10px 4px 10px;
		border-radius: 10px;
		color: #01575C;
	}

}

.toggleBtnBox > a{
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	margin: 0 1px;
	background: #ebf6ff;
	color: #337ab7;
	border-radius: 6px;
	transition: all 0.3s;
}
.toggleBtnBox > a i {
	font-size: 1.125rem;
	margin-right: 2px;
}
.toggleBtnBox > a:hover{
	background: #0d71bf;
	color: #fff;
}
.toggleBtnBox > a.active{
	background: #178bef;
	color: #fff;
}

.topSearchBox .toggleBtnBox{
	display: flex;
	float: none;
	height: 50px;
	margin-bottom: 10px;
}
.topSearchBox .toggleBtnBox a{
    flex: 1;
    justify-content: center;
    align-items: center;
}
/* 左邊主選單 */
.menuArea{
	z-index: 200000;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	transition: all 0.3s;
}
.menuArea.out{
	left: -240px;
}
.menuBox{
	width: 240px;
	height: inherit;
	background: #fff;
	/* border-right: 1px solid #F7F9FD; */
}

.menuBox .scrollBar{
	max-width: 100%;
	height: 100%;
	padding-top: 70px;
	color: #fff;
	overflow-y: auto;
}
@media (max-width: 1024px) {
	
	.menuArea{
		left: -240px;
	}
	.menuArea.in{
		left: 0px;
	}
}
/*基礎設定顏色*/
.leftMenu{
	display: block;
	/* padding: 1rem; */
}
.leftMenu > li{
	position: relative;
	display: block;
	padding: 0 0 0 0;
	font-size: 1.125rem;
	transition: all 0.3s;
}
.leftMenu a{
	position: relative;
}
.leftMenu > li > a{
	position: relative;
    display: block;
    width: 100%;
    line-height: 1.2;
    padding: 16px 4px 16px 10px;
    text-align: left;
    font-size: 1.125rem;
    color: #111120;
    transition: all 0.3s;
}
.leftMenu > li > a > i{
	margin-right: 6px;
}
.leftMenu > li:hover > a {
	color: #111120;
	background: #DCE6BC;
}
.leftMenu > li:hover > a > i {
	color: #111120;
}
.leftMenu > li.active {
	position: relative;
	color: #111120;
	background: #ECEFE0;
}
.leftMenu > li.active > a {
	font-weight: bold;
	background: #DCE6BC;
	
}
.leftMenu > li.active > a i {
	color: #111120;
}

.leftMenu > li.active > ul > li > a > i {	}
/*選單滑動提示*/
.subMenu > li > a > i.icon-add {
	font-size: 1.2rem;
}
.leftMenu .icon-add{
	position: absolute;
    top: 21%;
    left: 100%;
}
.leftMenu > li > a > .icon-add{
	position: absolute;
    top: 30%;
    left: 100%;
}
.subMenu > li > .nav > li > a >.icon-add{
	position: absolute;
    top: 21%;
    left: 97.5%;
	font-size: 1.2rem;
}

/*第二層選單*/
.subMenu{
	display: none;
	opacity: 1;
	width: 100%;
	padding: 0.625rem 0;
	box-sizing: border-box;
}
.subMenu > li:last-child{
	border: 0;
}
.subMenu > li{
	display: block;
	margin: 0 10px;
	color: #111120;
}
.subMenu > li.active{
	display: block;
}
.subMenu > li.active > ul{
	border-radius: 10px;
    box-shadow: 6px 6px 10px #00000010;
	background: #ffffff;
}
.subMenu > li > a{
	display: flex;
    align-items: center;
    width: 100%;
    line-height: 20px;
	padding: 10px 10px;
    text-align: left;
    font-size: 1.125rem;
	color: #5D6170;
	transition: all 0.3s;
}

.subMenu > li > a::before{
	content: " ";
	display: flex;
	margin-right: 1rem;
	width: 3px;
	height: 18px;
	background: #5D617000;
	border-radius: 2px;
}
.subMenu > li:hover > a::before{
	content: " ";
	background: #5D6170;
}
.subMenu > li.active > a{
	color: #000000;
	font-weight: bold;
	position: relative;
}
.subMenu > li.active > a::before{
	content: " ";
	background: #000000;
}
.subMenu > li.active > a i{
	/* color: #fff; */
}



/*第三層選單*/
.navMenu{
	display: none;
	margin: 0 0 0 0.5rem;
}
.navMenu > li{
	display: block;
	padding: 0;
	font-size: 1rem;
}
.navMenu > li > a{
	position: relative;
	display: block;
    line-height: 1.1;
	padding: 0.75rem 0.5rem 0.75rem 1rem;
    font-size: 1.063rem;
    text-align: left;
	color: #5D6170;
	transition: all 0.3s;
}
.navMenu > li > a > i{
    color: inherit;
}

.navMenu> li:hover > a{
	color: #01575C;
}
.navMenu> li:hover > a i{
	/* color: #fff; */
}
.navMenu > li > a:hover,
    .navMenu > li > a:focus {
        text-decoration: none;
        /* background: #484aa3; */
    }
.navMenu > li > a > i{
	margin-right: 4px;
}
.navMenu > li.active > a{
	color: #59BA89;
}
.navMenu > li.active > a i{
	color: inherit;
}


/*第四層選單*/
.navlist{
	display: none;
	background: rgba(0,0,0,0.4);
}
.navlist > li{
	display: block;
	padding: 0;
	font-size: 1rem;
}
.navlist > li > a{
	position: relative;
	display: block;
    line-height: 20px;    
	padding: 10px 22px 10px 49px;
    text-indent: -6px;
    text-align: left;
    color: #fff;
	transition: all 0.3s;
}

.navlist > li > a > i{
    color: #fff;
}
.navlist> li:hover > a{
	background: rgba(255,255,255,0.3);
}

.navlist > li.active > a{
	/* background: #2B3047; */
	background: #ffffff10;
}
.navlist > li > a > i{
	margin-right: 4px;
}

.navlist li a > .icon-add{
	position: absolute;
    top: 21%;
    left: 96.5%;
	font-size: 1.2rem;
}

/*第五層選單*/
.navlistItem{
	display: none;
	background: rgba(0,0,0,0.8);
}
.navlistItem > li{
	display: block;
	padding: 0;
	font-size: 1rem;
}
.navlistItem > li > a{
	position: relative;
	display: block;
    line-height: 20px;
    padding: 10px 20px 10px 54px;
	text-indent: -7px;
    text-align: left;
    color: #fff;
	transition: all 0.3s;
}

.navlistItem > li:hover > a{
	background: rgba(0, 0, 0, 1);
}

.navlistItem > li.active > a{
	background: #0e264d;
}
.navlistItem > li > a > i{
	margin-right: 4px;
}

.navlistItem li a > .icon-add{
	position: absolute;
    top: 21%;
    left: 97%;
	font-size: 1.2rem;
}
/*第六層選單*/
.navItem{
	display: none;
	background: rgba(0,0,0,0.8);
}
.navItem > li{
	display: block;
	padding: 0;
	font-size: 1rem;
}
.navItem > li > a{
	position: relative;
	display: block;
    line-height: 20px;
    padding: 10px 20px 10px 66px;
	text-indent: -7px;
    text-align: left;
    color: #fff;
	transition: all 0.3s;
}

.navItem > li:hover > a{
	background: rgba(255,255,255,0.3);
}

.navItem > li.active > a{
	background: rgba(0,0,0,0.5);
}
.navItem > li > a > i{
	margin-right: 4px;
}

.navItem li a > .icon-add{
	position: absolute;
    top: 21%;
    left: 97.5%;
	font-size: 1.2rem;
}



/*選單點選後滑出內容*/
.form-control{
	/* border-radius: 0; */
}
.contentBox .form-control{
	padding: 5px 10px;
    color: #fff;
    background: rgba(0,0,0,0.5);
	border: 0;
	
    border-bottom: 1px solid #fff;
}
.contentBox .form-control:focus {
    border-color: rgba(0,0,0,0);
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 8px rgba(0,0,0,0);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 8px rgba(0,0,0,0);
}
.contentBox .form-control option {
    padding: 5px 10px;
    color: #fff;
    background: rgba(0,0,0,1);
}
.contentBox  .form-group {
    margin-bottom: 5px;
    padding: 0 10px;
}
.contentBox{
	z-index: 1;
	position: absolute;
	left: -500px;
	top: 0;
	width: 400px;
	height: 100%;
	padding-top: 50px;
	background: rgba(0,0,0,0.8);
	color: #fff;
	overflow: hidden;
	transition: all 0.3s;
	/* left: 130px; */
}


/*文字顏色*/
.text-lightpurple{
	font-size: 0.875rem;
	/* line-height: 14px; */
	color: #dee7ff;
}
.text-title{
	font-size: 1rem;
	line-height: 22px;
	color: #fff;
}
.text-blue{
	color: #484AA3;
}
.text-yellow{
	color: #E9C71C;
}
.text-green{
	color: #01575C;
}
.text-red{
	color: #EB6260;
}
.text-grey{
	color: #5A6171;
}
.text-purple{
	color: #6C63FE;
}
.text-orange{
	color: #FFA059;
}

.blueBox{background: #2695c9;}
.yellowBox{background: #ffd500; color: #333;}
.lightgreenBox{background: #28ff00; color: #333;}
.greenBox{background: #029c47;}
.redBox{background: #d90000;}
.lightgrayBox{background: #d6d6d6;}
.purpleBox{background: #A15CD6;}
.orangeBox{background: #FFA059;}
.grayBox{background: #333; color: #fff;}

.colorBlcok span:nth-child(2){
	color: #fff;
	background: #333;
}
.redBlock span:nth-child(1){
	color: #fff;
	background: #ff3333;
}
.orangeBlock span:nth-child(1){
	color: #333;
	background: #FFA059;
}
.yellowBlock span:nth-child(1){
	color: #333;
	background: #ffd500;
}
.greenBlock span:nth-child(1){
	color: #333;
	background: #28ff00;
}


/* radinButtons*/
.radioBox {
	display: inline-block;
    width: 40%;
	position: relative;
	padding-left: 28px;
	margin-bottom: 6px;
	cursor: pointer;
	font-size: 1rem;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  }
  
  /* Hide the browser's default radio button */
  .radioBox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark {
	position: absolute;
	top: 50%;
	left: 20%;
    transform: translate(-50%,-50%);
	height: 20px;
	width: 20px;
	background-color: #eee;
	border-radius: 50%;
  }
  
  /* On mouse-over, add a grey background color */
  .radioBox:hover input ~ .checkmark {
	background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .radioBox input:checked ~ .checkmark {
	background-color: #2196F3;
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
	content: "";
	position: absolute;
	display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .radioBox input:checked ~ .checkmark:after {
	display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .radioBox .checkmark:after {
	top: 6px;
	left: 6px;
	  width: 8px;
	  height: 8px;
	  border-radius: 50%;
	  background: white;
  }


/* 選單綠色版 */
.layoutGreen .topMenuBtn{
	background: #59ba89;
}
.layoutGreen .topLogo{
	background: #dce6bc url(../imagesBackend/topBar_green.png)no-repeat;
}
.layoutGreen .userArea {
    background: #59BA89;
}
.layoutGreen .menuBox{
	background: #59ba89;
}
.layoutGreen .leftMenu > li > a {    
    color: #ffffff;
}
.layoutGreen .leftMenu > li:hover > a {
	color: #111120;
	background: #D2E87E;
}
.layoutGreen .leftMenu > li.active {
	position: relative;
	color: #111120;
	background: #ECEFE0;
}
.layoutGreen .leftMenu > li.active > a {
	color: #000000;	
}
.layoutGreen .leftMenu > li.active:hover > a {
	background: #DCE6BC;
}
/* 選單紅色版 */
.layoutRed .topMenuBtn{
	background: #E08287;
}
.layoutRed .topLogo{
	background: #E3B6BA url(../imagesBackend/topBar_Red.png)no-repeat;
}
.layoutRed .userArea {
    background: #E08287;
}
.layoutRed .menuBox{
	background: #E08287;
}
.layoutRed .leftMenu > li > a {    
    color: #ffffff;
}
.layoutRed .leftMenu > li:hover > a {
	color: #111120;
	background: #FFCCCC;
}
.layoutRed .leftMenu > li.active {
	position: relative;
	color: #111120;
	background: #F2D3D5;
}
.layoutRed .leftMenu > li.active > a {
	background: #E3B6BA;
	color: #000000;	
}
.layoutRed .leftMenu > li.active:hover > a {
	background: #E3B6BA;
}
/* 選單橘色版 */
.layoutOrange .topMenuBtn{
	background: #DE8E66;
}
.layoutOrange .topLogo{
	background: #FACEB9 url(../imagesBackend/topBar_orange.png)no-repeat;
}
.layoutOrange .userArea {
    background: #DE8E66;
}
.layoutOrange .menuBox{
	background: #DE8E66;
}
.layoutOrange .leftMenu > li > a {    
    color: #ffffff;
}
.layoutOrange .leftMenu > li:hover > a {
	color: #111120;
	background: #FFC1A3;
}
.layoutOrange .leftMenu > li.active {
	position: relative;
	color: #111120;
	background: #FFE3D6;
}
.layoutOrange .leftMenu > li.active > a {
	background: #FACEB9;
	color: #000000;	
}
.layoutOrange .leftMenu > li.active:hover > a {
	background: #FACEB9;
}

/* 選單藍色版 */
.layoutBlue .topMenuBtn{
	background: #078acc;
}
.layoutBlue .topLogo{
	background: #77d9fb url(../imagesBackend/topBar_blue.png)no-repeat;
}
.layoutBlue .userArea {
    background: #078acc;
}
.layoutBlue .menuBox{
	background: #078acc;
}
.layoutBlue .leftMenu > li > a {    
    color: #ffffff;
}
.layoutBlue .leftMenu > li:hover > a {
	color: #06050b;
	background: #10baff;
}
.layoutBlue .leftMenu > li.active {
	position: relative;
	color: #111120;
	background: #d2eef8;
}
.layoutBlue .leftMenu > li.active > a {
	color: #000000;	
}
.layoutBlue .leftMenu > li.active:hover > a {
	background: #77d9fb;
}
.layoutBlue .leftMenu > li.active > a {
    font-weight: bold;
    background: #77d9fb;
}
.layoutBlue .navMenu > li.active > a {
    color: #0153a9;
	font-weight: bold;
}

.layoutBlue .subMenu > li > a{
	color: #3f4353;
}
.layoutBlue .navMenu > li > a{
	color: #3f4350;
}


/* 選單藍綠色版-上方藍綠+左側選單白底 */
.layout_TiffanyBlue .topMenuBtn{
	background: var(--wdaets-green);
}
.layout_TiffanyBlue .topLogo{	
	/* background: var(--wdaets-green) url(../imagesBackend/Menu/topBar_Blue.png)no-repeat; */
	background: var(--wdaets-green);
}
.layout_TiffanyBlue .userArea {
    background: var(--wdaets-green);
}
.layout_TiffanyBlue .menuBox{
	background: var(--fit-white);
}
.layout_TiffanyBlue .leftMenu > li > a {    
    color: var(--wdaets-blue);
}
.layout_TiffanyBlue .leftMenu > li:hover > a {
	color: #111120;
	background: #7EE8D6;
}
.layout_TiffanyBlue .leftMenu > li.active > a {
    font-weight: bold;
    background: #B9F0EE;
}
.layout_TiffanyBlue .leftMenu > li.active {
	position: relative;
	color: #111120;
	background: #E8FBFB;
}

.layout_TiffanyBlue .leftMenu .navMenu > li.active > a{
	color: var(--wdaets-green);
}
.layout_TiffanyBlue .leftMenu > li.active > a {
	color: #000000;	
}
.layout_TiffanyBlue .leftMenu > li.active:hover > a {
	/* background: #DCE6BC; */
}
.font-size-switcher{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1px;
}
.font-size-switcher a{
	width: 34px;
	height: 34px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--wdaets-blue);
	border: 2px solid rgba(var(--wdaets-blue-rgb), 0.8);
	background-color: var(--fit-white);
	border-radius: 50%;
}
.font-size-switcher a:hover{
	color: var(--fit-white);
	border: 2px solid rgba(var(--wdaets-blue-rgb), 0.8);
	background-color: rgba(var(--wdaets-text-dark-rgb), 0.5);
}
.font-size-switcher a.active{
	color: var(--fit-white);
	background-color: var(--wdaets-blue);
	border: 2px solid rgba(var(--wdaets-blue-rgb), 0.8);
}