body
{
	background: white;
}

textarea
{
	padding: 0;
}

input[type="radio"] , input[type="checkbox"] , select
{
	vertical-align: middle;
}

input[type="radio"] , input[type="checkbox"]
{
	-webkit-appearance: auto !important;
	-moz-appearance:auto !important;
	appearance: auto !important;
}

button , select , input[type="radio"] , input[type="checkbox"] ,
input[type="submit"] , label , a
{
	cursor: pointer;
}

input[type="number"]
{
	-moz-appearance:textfield;
}

input[type="number"] , input[type="text"] , input[type="password"] ,
select
{
	min-height: 30px;
}

input[type="submit"]
{
	font-size: 16px;
}

input[type="file"]
{
	font-size: 16px;
	cursor: pointer;
}

span
{
	vertical-align: middle;
}
/*****     共同     *****/
.Notice
{
	color: red;
	display: none;
	font-size: 13px;
	text-align: left;
}

.Notice.active
{
	display: block;
}

.NoData /* 沒有資料 */
{
	text-align: center;
	font-size: 15px;
}

/*****     共同框架     *****/
.ContentContainer
{
	color: black;
	background-image: linear-gradient(to bottom,rgba(255,255,255,.5) 0% , rgba(255,255,255,.5) 100%);
	background-position: top;
	background-size: cover;
	background-repeat: repeat-y;
	min-height: calc(100vh - 140px);
	width: calc(100% - 310px);
	margin: 0 0 0 250px;
	padding: 30px 30px 50px 30px;
	transition: all 0.3s ease-in-out;
}

.ContentContainer.active
{
	width: calc(100% - 60px);
	margin: 0;
}

/*     display:grid 4格     */
.GridBlockBox
{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
}

.GridBlock
{
	border: 1px solid rgba(255,255,255,0.5);
	background: rgba(0,0,0,0.1);
	padding: 10px;
}

.GridBlockTopic
{
	width: 100%;
	margin: 0 0 10px 0;
}

.GridBlockList
{
	width: 100%;
	display: block;
}

.GridBlockList:not(:last-child)
{
	margin: 0 0 3px 0;
}

/*     搜尋     */
.Search
{
	margin: 0 0 10px 0;
}

/*     純顯示資訊表格     */
.Information
{
	width: 100%;
}

.InformationTit
{
	text-align: center;
	width: 100%;
	font-size: 18px;
	margin: 0 0 40px 0;
}

.InformationTitCell
{
}

.InformationName
{
	color: #0D395E;
	border-bottom: 2px solid #0D395E;
	padding: 0 0 8px 0;
	width: max-content;
	margin: 0 auto;
}

.InformationScroll
{
	width: auto;
	overflow-x: auto;
}

.InformationScroll::-webkit-scrollbar
{
	cursor: pointer;
	height: 7px;
	background-color: transparent;
}

.InformationScroll::-webkit-scrollbar-thumb
{
	background: #7a7a7a;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);	
}

.InformationTableBox
{
	width: 100%;
}

.InformationTableBox caption{
	background: #b9b9b9;
	padding: 10px;
}

.InformationTableBox table
{
	width: auto;
	min-width: calc(100% - 1px);
	text-align: center;
	/* table-layout: fixed; */
	/* word-break: break-all; */
}

.InformationTableBox table , .InformationTableBox tbody:nth-child(2n-1) tr ,
.InformationTableTr
{
	background: white !important;
}

.InformationTableBox thead , .InformationTableBox tbody , .InformationTableBox tr ,
.InformationTableTr
{
	width: 100%;
}

.InformationTableBox th , .InformationTableBox td ,
.InformationTableTh , .InformationTableTd
{
	/* min-width: 56px; */
	padding: 10px 3px;
}

.InformationTableBox th , .InformationTableTh
{
	background: #393E41;
	white-space: nowrap;
	color: white;
}

.InformationTableBox th:first-child
{
	border-radius: 10px 0 0 0;
}

.InformationTableBox th:last-child
{
	border-radius: 0 10px 0 0;
}

.InformationTableBox caption + thead th:first-child{
	border-radius: 0;
	border-left: 1px solid #393E41;
}

.InformationTableBox caption + thead th:last-child{
	border-radius: 0;
}

.InformationTableBox th:not(:last-child)
{
	border-right: 1px solid white;
}

.InformationTableBox tbody tr:nth-child(2n-1)
{
	/* background: #ECECEC; */
}

.InformationTableTr
{
	display: table-row;
}

.InformationTableBox tr:hover , .InformationTableTr:hover
{
	background: rgba(0,0,0,0.1);
}

.InformationTableTd
{
	display: table-cell;
}

.InformationTableBox td ,
.InformationTableBox .InformationTableTd
{
	border: 1px solid #4D4D4D;
	box-sizing: border-box;
}

.InformationTableBox td:last-child ,
.InformationTableBox .InformationTableTd:last-child
{
	min-width: 56px;
}

.InformationTableBox .Ipt , .InformationTableBox .Sel , .InformationTableBox .Textarea
{
	display: block;
}

.InformationTableBox .Ipt input , .InformationTableBox .Sel select , .InformationTableBox .Textarea textarea
{
	width: 100%;
}

/* .InformationTableBox img
{
	width: 100%;
	display: inline-block;
	margin: 0 0 -4px 0;
	max-width: 150px;
} */

.InformationTableBox tfoot tr:first-child td ,
.InformationTableBox tfoot .InformationTableTr:first-child .InformationTableTd
{
	border-top: 2px solid #b9b9b9;
}

.InformationThTitBox{
	display: flex;
	align-items: center;
	justify-content: center;
}

.InformationThTit{
	margin: 0 5px 0 0;
}

.InformationThTitActIcon{
	transition: all .1s;
}

.InformationThTitActIcon i{
	display: block;
}

.InformationThTitActIcon.active{
	color: #71b2ff;
}

@media (min-width: 1200px){
	.InformationThTitActIcon{
		cursor: pointer;
	}

	.InformationThTitActIcon:hover{
		color: #71b2ff;
		filter: brightness(1.5);
	}
}

.InformationThTitActIcon.up{
	margin-bottom: -6px;
}

.InformationThTitActIcon.down{
	margin-top: -6px;
}

/*     Information需要做切換資訊     */
.Information.tab .InformationTitCell
{
	cursor: pointer;
	opacity: 0.5;
}

.Information.tab .InformationTitCell.active
{
	opacity: 1;
}

.Information.tab .InformationTableBox
{
	display: none;
}

.Information.tab .InformationTableBox.active
{
	display: block;
}

/*     需點擊查看詳細     */
.InformationTableBox.detail tbody tr:nth-child(2n-1)
{
	background: transparent;
}

.InformationTableBox.detail tbody:nth-child(2n-1)
{
	background: #ECECEC;
}

.InformationTableBox.detail tbody:hover
{
	background: rgba(0,0,0,0.1);
}

.DetailTr
{
	display: none;
}

.DetailTr.active
{
	display: table-row;
}

.DetailBoxTable
{
	background: #e2e2e2;
	border-collapse: separate;
	border-spacing: 1px;
	width: 100%;
}

.DetailBoxTable > div > div > div
{
	background: #fafafa;
	padding: 8px 5px;
	vertical-align: top;
	text-align: left;
}

.DetailBoxCell1
{
	width: 120px;
	min-width: 120px;
}

.DetailBoxCell2
{
	width: calc(100% - 120px);
}

.DetailBoxCell2 .Ipt , .DetailBoxCell2 .Sel , .DetailBoxCell2 .Sel select ,
.DetailBoxCell2 .Textarea , .DetailBoxCell2 .Textarea textarea
{
	width: 100%;
}

.DetailBoxCell2 .Ipt input[type="number"] , .DetailBoxCell2 .Ipt input[type="text"] , .DetailBoxCell2 .Ipt input[type="password"]
{
	min-width: 100%;
}

/*     區塊元素     */
.Block
{
	width: 100%;
	word-break: break-all;
}

.BlockTit , .BlockTxt
{
	display: block;
	width: 100%;
}

.Block .Textarea textarea
{
	min-width: 500px;
	min-height: 150px;
}

.PopupBox .Block .Textarea textarea{
	min-width: unset;
	width: 290px;
	max-width: 100%;
}

.BlockImg
{
	width: 100%;
}

.BlockImg img
{
	width: auto;
	max-width: 50%;
}

/*     行內區塊元素     */
.InlineBlock
{
	display: inline-block;
	vertical-align: middle;
}

.InlineBlockTit , .InlineBlockTxt
{
	display: inline-block;
	vertical-align: middle;
}

.InlineBlockTit
{
	margin-right: 5px;
}

.must{
	color: red;
}

.InlineBlockImg
{
	display: inline-block;
	width: 500px;
}

.InlineBlockImg img
{
	width: auto;
	max-width: 100%;
}

/*     編輯頁面     */
.EditBtnBox
{
	background: rgba(0,0,0,0.1);
	padding: 20px 20px;
	margin: 80px 0 0 0;
	width: calc(100% - 40px);
	text-align: right;
}

.PopupBox .EditBtnBox{
	background: transparent;
}

.EditBtn
{
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	font-size: 18px;
	padding: 6px 15px;
}

.EditBtn , .EditBtn.blue
{
	color: white;
	background: #0d73ba;
}

.EditBtn.red
{
	color: white;
	background: #c4272c;
}

.EditBtn:not(:last-child)
{
	margin: 0 15px 0 0;
}

.EditBtn:hover
{
	opacity: 0.9;
}

.BlockLine input[type="submit"] , .EditBtn input[type="submit"]
{
	opacity: 0;
	display: inline-block;
	width: 100%;
	height: 100%;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.EditBtn i , .EditBtn span
{
	display: inline-block;
	vertical-align: middle;
}

/*****     共同零件     *****/
/*     開關     */
.SwitchHorizontal , .SwitchHorizontalSlider
{
	height: 30px;
}

.SwitchHorizontal
{
	position: relative;
	display: inline-block;
	min-width: 75px;
}

.SwitchHorizontal:not(:last-child)
{
	margin: 0 5px 0 0;
}

.SwitchHorizontal input[type="checkbox"]
{
	display: none;
	width: 0;
	height: 0;
}

.SwitchHorizontalSlider
{
	background: #d41818;
	position: relative;
	cursor: pointer;
	/* top: 0;
	left: 0;
	right: 0;
	bottom: 0; */
	-webkit-transition: .3s;
	transition: 0.3s;
	border-radius: 999rem;
}

.SwitchHorizontal input[type="checkbox"]:checked + .SwitchHorizontalSlider
{
	background: #00b33f;
}

.SwitchHorizontalSlider:before
{
	background: white;
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	top: 50%;
	transform: translateY(-50%);
	left: 4px;
	border-radius: 50%;
}

.SwitchHorizontal input[type="checkbox"]:checked + .SwitchHorizontalSlider:before
{
	right: 4px;
	left: unset;
}

.SwitchHorizontalTxt
{
	color: white;
	width: calc(100% - 40px);
	padding: 0 10px 0 30px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	z-index: 5;
}

.SwitchHorizontal input[type="checkbox"]:checked + .SwitchHorizontalSlider .SwitchHorizontalTxt
{
	padding: 0 30px 0 10px;
}

/*     Input & Select & Textarea     */
.Ipt , .Sel , .Textarea
{
	border: 1px solid #9B9D9E;
	background: white;
	box-shadow: 6px 6px 5px 0 rgba(0,0,0,0.2);
	border-radius: 2px;
	display: inline-block;
	margin: 0 5px 0 0;
}

.Ipt , .Sel , .Textarea:not(:last-child)
{
	margin: 0 5px 5px 0;
}

.Ipt , .Sel
{
	vertical-align: middle;
}

.Ipt input::placeholder , .Sel select::placeholder , .Textarea textarea::placeholder
{
	color: #808080;
}

/*     Input     */
.Ipt input[type="number"] ,
.Ipt input[type="text"] ,
.Ipt input[type="password"]
{
	min-width: 300px;
	font-size: 15px;
	padding: 5px 0 5px 5px;
}

.PopupBox .Ipt input[type="number"] ,
.PopupBox .Ipt input[type="text"] ,
.PopupBox .Ipt input[type="password"]
{
	min-width: 230px;
}

.Ipt input[name="sStartTime"] ,
.Ipt input[name="sEndTime"] ,
.Ipt input[name="sShowStartTime"] ,
.Ipt input[name="sShowEndTime"]
{
	min-width: 150px;
}

/*     Select     */
.Sel
{
	position: relative;
}

.Sel select
{
	color: #808080;
	min-width: 70px;
	font-size: 15px;
	padding: 5px 20px 5px 5px;
}

.Sel::after
{
	border-top: 2px solid #808080;
	border-right: 2px solid #808080;
	pointer-events: none;
	cursor: pointer;
	content: '';
	position: absolute;
	top: calc(50% - 7px);
	right: 10px;
	display: block;
	width: 6px;
	height: 6px;
	transform: rotate(135deg) translateY(-50%);
	-webkit-transform: rotate(135deg) translateY(-50%);
	transform-origin: center;
	z-index: 2;
}

/*     Textarea     */
.Textarea
{
	vertical-align: top;
}

.Textarea Textarea
{
	min-width: 150px;
	min-height: 60px;
	font-size: 15px;
	padding: 5px 0 5px 5px;
}

/*     Radio     */
.IptRadio
{
	display: inline-block;
	vertical-align: middle;
}

.IptRadio.block{
	display: block;
}

.IptRadio:not(:last-child)
{
	margin: 0 15px 0 0;
}

.IptRadio input[type="radio"]
{
	background: #FFFFFF;
	border: 1px solid #8C8C8C;
	border-radius: 999rem;
	width: 18px;
	height: 18px;
	position: relative;
	margin: 0 5px 0 0 !important;
}

.IptRadio input[type="radio"]:checked
{
	border: 1px solid #4073FF;
}

.IptRadio input[type="radio"]:checked::after
{
	background: #4073FF;
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 999rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}

/*     Checkbox     */
.IptCheckbox
{
	display: inline-block;
	vertical-align: middle;
	margin: -4px 0 0 0;
}

.IptCheckbox.block{
	display: block;
}

.IptCheckbox:not(:last-child)
{
	margin: 0 15px 0 0;
}

.IptCheckbox input[type="checkbox"]
{
	background: #FFFFFF;
	border: 1px solid #8C8C8C;
	width: 18px;
	height: 18px;
	position: relative;
	margin: 0 5px 0 0 !important;
}

.IptCheckbox input[type="checkbox"]:checked
{
	border: 1px solid #4073FF;
	background: #4073FF;
}

/*.IptCheckbox input[type="checkbox"]::after
{
	border: solid #FFFFFF;
	content: '';
	position: absolute;
	left: calc(50% - 1px);
	top: 3px;
	width: 3px;
	height: 7px;	
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg) translateX(-50%);
	-ms-transform: rotate(45deg) translateX(-50%);
	transform: rotate(45deg) translateX(-50%);
	display: none;
}

.IptCheckbox input[type="checkbox"]::after
{
	display: block;
}*/

.IptCheckbox span , .IptCheckbox input[type="checkbox"]
{
	vertical-align: middle;
}

/*     箭頭     */
.AfterArrow
{
	border-top: 2px solid white;
	border-right: 2px solid white;	
	display: inline-block;
	width: 10px;
	height: 10px;
}

.AfterArrow.right
{
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

/*     按鈕     */
.TableBtn , .TableBtnIcon ,
.TableBtnFont , .TableBtnBg
{
	margin: 0 0 5px 0;
	border-radius: 3px;
	padding: 3px;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}

.TableBtnBg.block
{
	display: block;
	width: max-content;
	box-sizing: border-box;
	padding: 3px 5px;
	margin: 0 auto;
}

.TableBtn , .TableBtnFont
{
	font-size: 16px;
}

.TableBtn , .TableBtn.blue ,
.TableBtnFont , .TableBtnFont.blue
{
	color: #0000FF;
}

.TableBtn.red , .TableBtnFont.red
{
	color: #FF0000;
}

.TableBtnIcon , .TableBtnBg
{
	font-size: 15px;
	min-width: 20px;
	min-height: 16px;
}

.TableBtnIcon , .TableBtnIcon.blue ,
.TableBtnBg , .TableBtnBg.blue
{
	background: #0000FF;
	color: white;
}

.TableBtnIcon.red , .TableBtnBg.red
{
	background: #FF0000;
	color: white;
}

.TableBtnIcon:hover , .TableBtnBg:hover
{
	opacity: 0.8;
}

.TableBtn:not(:last-child) ,
.TableBtnIcon:not(:last-child) ,
.TableBtnFont:not(:last-child) ,
.TableBtnBg:not(:last-child)
{
	margin: 0 5px 5px 0;
}

.TableBtn:hover , .TableBtnFont:hover
{
	text-decoration: underline;
}

.TableBtnBg.block:not(:last-child)
{
	margin: 0 auto 10px auto;
}

/*     新增按鈕     */
.BtnAdd
{
	background: #F6B663;
	box-shadow: inset 0 0 0 1px #3E3E3F;
	color: white;
	border: 1px solid #8D8C8D;
	border-radius: 10px;
	padding: 5px 10px;
	font-size: 16px;
	display: inline-block;
}

.BtnAdd:hover
{
	background: #eba953;
}

/*     分類按鈕     */
.BtnKind
{
	border: 1px solid #03448f;
	color: #03448f;
	border-radius: 5px;
	padding: 3px 6px;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	font-size: 16px;
}

.BtnKind:not(:last-child)
{
	margin: 0 5px 0 0;
}

.BtnKind.active
{
	background: #03448f;
	color: #FFFFFF;
}

/*     隨便按鈕     */
.BtnAny , .BtnAny2
{
	background: #1765B2;
	color: white;
	text-align: center;
	padding: 5px 10px;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	font-size: 16px;
	box-sizing: border-box;
	border-radius: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
}

.BtnAny2
{
	background: #BC0000;
}

.BtnAny input[type="submit"]
{
	padding: 6px;
	font-size: 15px;
}

.BtnAny:hover,.BtnAny2:hover
{
	opacity: 0.9;
}

/*****     登入頁     *****/
.loginBox
{
	background: #79A1BB;
	/* background-image: url('../../../images/bg.jpg');
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat; */
	width: 100%;
	height: 100vh;
}

.loginContainer
{
	/* background: #F2F2F2; */
	height: 100vh;
	width: 900px;
	margin: 0 calc(50% - 450px);
	text-align: center;
	position: relative;
}

.loginInner
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.loginWebName
{
	color: #0D395E;
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 80px 0;
}

.loginTable
{
	width: 200px;
	border-spacing: 0 20px;
	margin: 0 0 20px 0;
}

.loginCellIcon
{
	color: #0D395E;
	font-size: 24px;
	min-width: 50px;
	text-align: center;
}

.loginCellWrite
{
	width: calc(100% - 50px);
}

.loginCellWrite .Ipt
{
	width: 100%;
}

.loginRem
{
	color: #0D395E;
	width: 100%;
	margin: 0 0 40px 0;
}

.loginRem input , .loginRem span
{
	vertical-align: middle;
	display: inline-block;
}

.loginRem input
{
	background: #FFFFFF;
	border: 1px solid #8C8C8C;
	-webkit-appearance: unset !important;
	appearance: unset !important;
	border-radius: 2px;
	position: relative;
	margin: 0 5px 0 0 !important;
	width: 21px;
	height: 21px;
}

.loginRem input[type="checkbox"]:checked
{
	border: 1px solid #0D395E;
	background: #0D395E;
}

.loginRem input[type="checkbox"]::after
{
	border: solid #FFFFFF;
	content: '';
	position: absolute;
	left: calc(50% - 1px);
	top: 4px;
	width: 5px;
	height: 11px;	
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg) translateX(-50%);
	-ms-transform: rotate(45deg) translateX(-50%);
	transform: rotate(45deg) translateX(-50%);
	display: none;
}

.loginRem input[type="checkbox"]::after
{
	display: block;
}

.loginRem span
{
	font-size: 18px;
}

.loginBtn
{
	background: #0D395E;
	color: #FFFFFF;
	border-radius: 5px;
	box-sizing: border-box;
	width: 100%;
	display: block;
	padding: 8px 0 !important;
	font-size: 16px;
}

/*****     Header     *****/
header , header.active .headerBtnNav
{
	background: #FFF7D2;
	color: #333333;
}

header
{
	width: calc(100% - 250px);
	margin: 0 0 0 250px;
	transition: all 0.3s ease-in-out;
}

header.active
{
	width: 100%;
	margin: 0;
}

.headerContainer
{
	width: 100%;
	text-align: right;
	padding: 10px 0;
	position: relative;
}

.headerCircle , .headerSwitch , .headerLangBox ,
.headerCtrlBox , .headerCtrlContainer , .headerInf
{
	display: inline-block;
	vertical-align: middle;
}

.headerBtnNav
{
	margin: 0 10px 0 0;
	cursor: pointer;
	position: absolute;
	font-size: 30px;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}

.headerPageTit
{
	text-align: left;
	word-break: break-all;
	position: absolute;
	font-size: 24px;
	top: 50%;
	left: 60px;
	transform: translateY(-50%);
}

.headerCtrlBtn
{
	display: none;
}

.headerCircle
{
	background: #0D395E;
	color: white;
	margin: 0 10px 0 0;
	border-radius: 999rem;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 20px;
	cursor: pointer;
}

.headerCircle .fa-volume-up
{
	display: none;
}

.headerCircle .fa-volume-mute
{
	display: inline-block;
}

.headerCircle.active .fa-volume-up
{
	display: inline-block;
}

.headerCircle.active .fa-volume-mute
{
	display: none;
}

.headerSwitch
{
	margin: 0 10px 0 0;
}

.headerInf
{
	background: #1766B3;
	color: white;
	cursor: pointer;
	position: relative;
	border-radius: 5px 0 0 5px;
	font-size: 16px;
}

.headerInf.active
{
	border-radius: 5px 0 0 0;
}

.headerInfName
{
	padding: 5px 10px;
	border-radius: 5px 0 0 0;
}

.headerInfName i
{
	vertical-align: middle;
	text-align: left;
	width: 20px;
	font-size: 18px;
}

.headerInfMenu
{
	background: #1766B3;
	width: 100%;
	text-align: left;
	position: absolute;
	opacity: 0;
	z-index: -2;
	transition: all 0.2s ease-in-out;
	border-radius: 0 0 0 5px;
}

.headerInf.active .headerInfMenu
{
	opacity: 1;
	z-index: 1;
}

.headerInfMenuList
{
	width: 100%;
}

.headerInfMenuList a
{
	color: white;
	border-top: 1px solid #1766B3;
	display: block;
	padding: 5px 0 5px 38px;
	width: calc(100% - 38px);
}

.headerInfMenuList a:last-child
{
	border-radius: 0 0 0 5px;
}

.headerInfMenuList a:hover
{
	background: #115599;
}

.headerCtrlBtnClose
{
	display: none;
}

.headerCtrlBg
{
	display: none;
}

/*****     Nav     *****/
nav , .navContainer
{
	background: #1A2E48;
}

nav
{
	width: 250px;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	transition: all 0.3s ease-in-out;
	overflow-y: scroll;
}

nav::-webkit-scrollbar
{
	display: none;
}

nav.active
{
	left: -250px;
	z-index: -1;
}

.navContainer
{
	width: 100%;
}

.navWebName
{
	width: 100%;
	text-align: center;
	font-size: 20px;
}

.navWebName > div
{
	width: 100%;
	padding: 15px 0;
}

.navWebName a
{
	color: white;
}

.navMenu
{
	width: 100%;
}

.navMenuBlock
{
	width: 100%;
	cursor: pointer;
}

.navMenuTopic
{
	position: relative;
	width: calc(100% - 40px);
	padding: 10px 20px;
	font-size: 18px;
}

.navMenuTopic:hover
{
	background: rgba(0,0,0,.1);
}

.navMenuTopic.active
{
	background: rgba(0,0,0,.3);
}

.navMenuTopic i , .navMenuTopicName , .navMenuTopic .AfterArrow
{
	vertical-align: middle;
	display: inline-block;
}

.navMenuTopic i
{
	color: white;
	font-size: 20px;
}

.navMenuTopicName
{
	color: white;
	width: calc(100% - 55px);
}

.navMenuTopic .AfterArrow
{
	position: absolute;
	top: calc(50% + 1px);
	transform: translateY(-50%) rotate(45deg);
	-webkit-transform: translateY(-50%) rotate(45deg);
	right: 20px;
}

.navMenuTopic.active .AfterArrow
{
	transform: translateY(-50%) rotate(135deg);
	-webkit-transform: translateY(-50%) rotate(135deg);
}

.navMenuListBox
{
	background: rgba(0,0,0,.1);
	width: 100%;
	display: none;
}

.navMenuTopic.active +.navMenuListBox
{
	display: block;
}

.navMenuList
{
	font-size: 16px;
	width: calc(100% - 40px);
	padding: 0 0 0 40px;
	text-align: left;
}

.navMenuList:hover
{
	background: #0D395E;
}

.navMenuList.active
{
	background: #0D395E;
}

.navMenuListName
{
	color: white;
	display: block;
	width: calc(100% - 40px);
	padding: 10px 20px;
}

/*****     聊天室     *****/
.chatUserBox , .chatMsgBox , .chatCanBox
{
	float: left;
}

.chatTopic
{
	width: 100%;
	font-weight: 600;
	margin: 0 0 10px 0;
}

.chatUserBox
{
	width: 220px;
	overflow-y: scroll;
}

.chatUserBox::-webkit-scrollbar ,
.chatMsgInner::-webkit-scrollbar ,
.chatCanBox::-webkit-scrollbar
{
	width: 5px;
	background-color: transparent;
}

.chatUserBox::-webkit-scrollbar-thumb ,
.chatMsgInner::-webkit-scrollbar-thumb ,
.chatCanBox::-webkit-scrollbar-thumb
{
	background: #4d4d4d;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);	
}

.chatUserScroll
{
	width: 100%;
	height: calc(100vh - 162px);
}

.chatUser
{
	width: calc(100% - 10px);
	padding: 5px;
	cursor: pointer;
}

.chatUser:not(:last-child)
{
	margin: 0 0 10px 0;
}

.chatUser:hover
{
	opacity: 0.9;
}

.chatUser.active
{
	color: white;
	background: rgba(0,0,0,0.5);
}

.chatMsgBox
{
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
	width: calc(100% - 480px);
	margin: 0 20px;
	border-radius: 10px;
	display: none;
}

.chatMsgBox.active
{
	display: block;
}

.chatMsgUptBox
{
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
	width: 100%;
	border-radius: 10px;
}

.chatMsgContainer
{
	width: 100%;
	border-radius: 10px 10px 0 0;
	padding: 0 0 10px 0;
}

.chatMsgTop
{
	background: #292929;
	width: 100%;
	text-align: center;
	border-radius: 10px 10px 0 0;
}

.chatMsgInner
{
	width: 100%;
	overflow-y: scroll;
	margin: 10px 0 0 0;
}

.chatMsgScroll
{
	width: 100%;
	height: calc(100vh - 278px);
}

.chatMsgUser
{
	color: white;
	width: 100%;
	padding: 10px 0;
}

.serviceList
{
	width: 80%;
}

.serviceList:not(:last-child)
{
	margin-bottom: 15px;
}

.serviceList.AdmMsg
{
	margin-left: 20%;
}

.serviceListInf
{
	width: 100%;
}

.serviceList.UserMsg .serviceListInf
{
	padding: 0 0 0 12px;
}

.serviceList.AdmMsg .serviceListInf
{
	padding: 0 12px 0 0;
}

.serviceListName
{
	font-size: 12px;
	margin: 0 0 5px 0;
}

.serviceListNameTxt
{
	color: #081836;
}

.serviceList.AdmMsg .serviceListNameTxt
{
	text-align: right;
}

.serviceListBot
{
	width: 100%;
}

.serviceList.UserMsg .serviceListBot
{
	text-align: left;
}

.serviceList.AdmMsg .serviceListBot
{
	text-align: right;
}

.serviceListMsgBox , .serviceListTime
{
	display: inline-block;
	vertical-align: bottom;
}

.serviceListMsgBox
{
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
	max-width: calc(100% - 80px);
	padding: 4px 8px;
	border-radius: 5px;
	position: relative;
	min-height: 16px;
}

.serviceList.UserMsg .serviceListMsgBox
{
	background: #E8E8E8;
	margin: 0 5px 0 0;
}

.serviceList.AdmMsg .serviceListMsgBox
{
	background: #4A6EA4;
	margin: 0 0 0 5px;
}

.serviceListMsgBox::after
{
	width: 0;
	height: 0;
	content: '';
	position: absolute;	
	border-style: solid;
	z-index: 2;
	top: 7px;
}

.serviceList.UserMsg .serviceListMsgBox::after
{
	border-color: transparent #E8E8E8 transparent transparent;
	border-width: 5px 8px 5px 0;	
	left: -6px;
}

.serviceList.AdmMsg .serviceListMsgBox::after
{
	border-color: transparent transparent transparent #4A6EA4;
	border-width: 5px 0 5px 8px;
	right: -6px;
}

.serviceListMsg
{
	font-size: 15px;
	word-break: break-all;
}

.serviceList.service .serviceListMsg
{
	color: #333333;
}

.serviceList.AdmMsg .serviceListMsg
{
	color: white;
}

.serviceListTime
{
	width: 120px;
	height: 16px;
	position: relative;
}

.serviceListTimeTxt
{
	color: #bbbbbb;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	font-size: 12px;
}

.chatMsgSend
{
	background: #d6d6d6;
	border-radius: 0 0 10px 10px;
	padding: 10px;
	width: calc(100% - 20px);
}

.chatMsgSendMsg
{
	padding: 0 10px 0 0;
}

.chatMsgSend .Textarea , .chatMsgSend .Textarea textarea
{
	width: 100%;
}

.chatMsgSend .BtnAny
{
	width: 60px;	
}

.chatCanBox
{
	width: 220px;
	position: relative;
	overflow-y: scroll;
}

.chatCanScroll
{
	width: 100%;
	height: calc(100vh - 162px);
}

.chatCanBlock
{
	background: rgba(0,0,0,0.1);
	width: 100%;
	cursor: pointer;
}

.chatCanBlock:not(:last-child)
{
	margin: 0 0 10px 0;
}

.chatCanSort
{
	width: calc(100% - 10px);
	padding: 5px;
}

.chatCanSort:hover
{
	background: rgba(0,0,0,0.2);
}

.chatCanListBox
{
	width: 100%;
	display: none;
}

.chatCanSort.active +.chatCanListBox
{
	display: block;
}

.chatCanList
{
	background: rgba(0,0,0,0.2);
	color: white;
	font-size: 15px;
	width: calc(100% - 10px);
	padding: 5px;
}

.chatCanList:not(:last-child)
{
	border-bottom: rgba(0,0,0,0.3);
}

.chatCanList:hover
{
	background: rgba(0,0,0,0.4);
}

.chatCanListBox
{
	width: 100%;
}

.chatCanBox::after
{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	clear: both;
}

/*     會員層級     */
.familyBox
{
	width: 100%;
	border-spacing: 20px;
	/* animation: familyDisplay 0.5s ease-in-out; */
}

@keyframes familyDisplay
{
	from
	{
		transform: scale(0);
	}

	to
	{
		transform: scale(1);
	}
}

.familyTable:not(:last-child)
{
	margin: 0 0 -20px 0;
}

.familOneBox
{
	width: 100%;
	margin: 0 0 10px 0;
}

.familOne
{
	display: block;
	width: 200px;
	position: relative;
}

.familOne:not(:last-child)
{
	margin: 0 0 30px 0;
}

.familyTable
{
	position: relative;
}

.familOne:not(:first-child)::after , .familyTable::after
{
	border-left: 1px solid #808080;
	border-bottom: 1px solid #808080;
	position: absolute;
	content: '';
	display: block;
	left: -28px;
	border-radius: 0 0 0 5px;
	width: 55px;
	height: 55px;
}

.familOne:not(:first-child)::after 
{
	left: -55px;
	top: -30px;
}

.familyTable::after
{
	left: -35px;
	top: -10px;
}

.familBlock
{
	color: black;
	border: 1px solid #808080;
	border-radius: 5px;
	padding: 5px;	
	vertical-align: top !important;
	cursor: pointer;		
	font-size: 14px;
	transition: all 0.1s ease-in-out;
}

.familBlockInner
{
	width: calc(100% - 10px);	
}

.familBlock:hover
{
	background: rgba(0,0,0,0.1);
}

.familBlockLine
{
	width: 100%;
}

.familBlockLine:not(:last-child)
{
	margin: 0 0 5px 0;
}

.familBlockLineTit , .familBlockLineTxt
{
	display: inline-block;
	word-break: break-all;
}

/*     對齊     */
.Block .InlineBlockTit
{
	min-width: 120px;
}

/*     jumpmsg     */
.jpListBox
{}

.jpListBlock
{
	border-top: 1px solid #CCCCCC;
	padding: 20px 0;
}

.jpList
{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.jpList:not(:last-child)
{
	margin: 0 0 10px 0;
}

.jpListTit
{
	width: 80px;
}

.jpListTxt
{
	width: calc(100% - 60px);
	box-sizing: border-box;
	padding: 0 0 0 10px;
}

/********** 微改版 **********/
/* 資訊呈現頁面  */
.NoWrapBox
{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: 0 0 -15px 0;
}

.NoWrapBox:not(:last-child)
{
	margin: 0 0 20px 0;
}

.NoWrapItem
{
	margin: 0 0 15px 0;
}

.SpecialBlock{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.SpecialBlockTit{
	margin: 0 5px 0 0;
}

.SpecialBlockTit .must{
	color: red;
}

.NoWrapItem .Ipt , .NoWrapItem .Sel , .NoWrapItem .Textarea
{
	margin: 0;
}

.NoWrapItem:not(:last-child)
{
	margin: 0 20px 15px 0;
}

.NoWrapItem .Ipt input
{
	min-width: 120px;
	width: 170px;
	text-align: center;
}

.InforamtionViewImg
{
	width: 80px;
	height: 80px;
	margin: 0 auto;
	cursor: zoom-in;
	position: relative;
	overflow: hidden;
}

.InforamtionViewImg.active
{
	width: auto;
	max-width: 250px;
	height: auto;
	cursor: zoom-out;
	overflow: unset;
}

.InforamtionViewImg img
{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}

.InforamtionViewImg.active img
{
	position: unset;
	top: unset;
	left: unset;
	transform: unset;
}

.Information .Ipt input[type="number"], .Information .Ipt input[type="password"] , .Information .Ipt input[type="text"]
{
	min-width: 150px;
	width: 150px;
	/* width: 100%;
	min-width: 100%; */
}

.Information .Ipt
{
	width: fit-content;
	margin: 0 auto;
}

.Information .Ipt input[type="text"]
{
	min-width: 200px;
	width: 200px;
}

/* upt頁面  */
.UptViewImgBox /* 裝所有圖片&控制項目 */
{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
	margin: 30px 0 -30px 0;
}

.UptViewImgBlock
{
	margin: 0 30px 30px 0;
}

.Information .UptViewImgBlock
{
	margin: 0;
}

.UptViewImg
{
	margin: 5px 0 0 0;
	max-width: 100px;
	max-height: 100px;
	width: 100px;
	height: 100px;
	cursor: zoom-in;
	position: relative;
	overflow: hidden;
}

.UptViewImg.nofile
{
	width: unset;
	height: unset;
}

input[type="file"].active + .UptViewImg
{
	width: 100px;
	height: 100px;
}

.Information .UptViewImg
{
	margin: 0 auto;
}

.UptViewImg.active
{
	width: auto;
	max-width: 250px;
	cursor: zoom-out;
	overflow: unset;
	height: unset;
	max-height: unset;
}

.UptViewImg img
{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}

.UptViewImg.active img
{
	position: unset;
	top: unset;
	left: unset;
	transform: unset;
}

.UptViewFileName
{
	font-size: 14px;
}

.userBriefAvatarBox,.userBriefDetailBox{
	background: #FFFFFF;
	box-shadow: 0 4px 10px 0 rgba(0,0,0,.15);
	border-radius: 20px;
	padding: 20px;
}

.userBriefAvatarBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.userBriefAvatar{
	flex-shrink: 0;
	margin: 0 15px 0 0;
}

.userTabBlockBox{
	background: #F2F7FD;
	padding: 30px;
}

.userTabBtnBox{
	overflow-x: auto;
	display: flex;
	align-items: center;
}

.userTabBtn{
	transition: all .2s ease-in;
	cursor: pointer;
	padding: 4px 15px;
	border-radius: 5px 5px 0 0;
}

@media (min-width: 1200px){
	.userTabBtn:hover{
		background: #F2F7FD;
	}
}

.userTabBtn.active{
	background: #F2F7FD;
}

.userTabBlock:not(.active){
	display: none;
}

.userBriefDetailBox{
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.userBriefDetailBlock{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.userBriefDetailBlockTit{
	margin: 0 10px 0 0;
}

.userAreaBox{
	background: #FFFFFF;
	box-shadow: 0 4px 10px 0 rgba(0,0,0,.15);
	border-radius: 20px;
}

.Topic1AreaTop{
	border-bottom: 1px solid #c9c9c9;
	padding: 15px;
}

.Topic1AreaBot{
	padding: 15px;
}

.Topic1AreaBot.big{
	padding: 30px;
}

.Topic1{
	position: relative;
	padding: 0 0 0 8px;
}

.Topic1::after{
	background: #66B3FF;
	content: '';
	position: absolute;
	top: 4px;
	left: 0;
	width: 3px;
	height: 18px;
}

.userPhotoBox{
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.userPhoto img{
	filter: drop-shadow(0 0 3px rgba(0,0,0,.2));
}

.userColBox{
	display: grid;
	gap: 30px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.userAreaItem{
	display: flex;
	align-items: center;
}

.userAreaItem:not(:last-child){
	margin: 0 0 8px 0;
}

.userAreaItem.between{
	justify-content: space-between;
}

.userAreaItem:not(.between) .userAreaItemTit{
	margin: 0 5px 0 0;
}

.userAreaItemTit{
	width: 80px;
}

.userPhotoBox2{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: -10px;
}

.userPhoto2{
	position: relative;
	cursor: pointer;
	margin-bottom: 10px;
}

.userPhoto2:not(:last-child){
	margin-right: 10px;
}

.userPhoto2.active::after{
	border: 4px solid #79BDFF;
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
}

.userPhoto2 img{
	display: block;
}

.FileBox{
	position: relative;
	text-align: center;
	display: block;
	border-radius: 5px;
	max-width: 300px;
}

.FileBox:not(.active){
	border: 1px dashed #c9c9c9;
}

.FileBox.active .FileDefaultBox{
	display: none;
}

.FileBox:not(.active) .FileChosenBox{
	display: none;
	cursor: pointer;
}

.FileDefaultBox{
	transition: all .2s ease-in;
	padding: 30px 10px;
}

@media (min-width: 1200px){
	.FileDefaultBox:hover{
		background: rgba(0,0,0,.1);
	}
}

.FileIpt{
	opacity: 0;
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.FileTxtBox{
	text-align: center;
}

.FileTxt:not(:last-child){
	margin: 0 0 5px;
}

.FileChosenBox{
	position: relative;
}

.FileChosenDel{
	background: #FFFFFF;
	color: #000000;
	cursor: pointer;
	position: absolute;
	transition: all .2s ease-in;
	text-align: right;
	border-radius: 5px;
	padding: 5px 10px;
	top: 10px;
	right: 10px;
	font-size: 20px;
}

@media (min-width: 1200px){
	.FileChosenDel:hover{
		opacity: .7;
	}
}

.FilterActBox{
	margin: 10px 0 0;
}

.PopupBox{
	background: rgba(0,0,0,.3);
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 199;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.PopupBox:not(.active){
	display: none;
}

.PopupCase{
	background: #FFFFFF;
	border-radius: 20px;
	padding: 40px;
	position: relative;
	box-sizing: border-box;
	z-index: 5;
	width: calc(100% - 40px);
	max-width: 900px;
}

.PopupBox.wide .PopupCase{
	max-width: 1000px;
}

@media (min-width: 1400px){
	.PopupBox.wide .PopupCase{
		max-width: 1200px;
	}
}

@media (min-width: 1600px){
	.PopupBox.wide .PopupCase{
		max-width: 1500px;
	}
}

.PopupBox.narrow .PopupCase{
	max-width: 400px;
}

.PopupBox.middle .PopupCase{
	max-width: 450px;
}

.PopupBox.userBrief .PopupCase{
	padding: 0;
}

.PopupContent{}

.PopupInner{
	max-height: 70vh;
	max-height: 70dvh;
	overflow-y: auto;
}

.PopupTitle{
	text-align: center;
	font-weight: 700;
	font-size: 24px;
	margin: 0 0 20px;
}

.PopupBox.noPadding .PopupInner{
	padding: 20px;
}

@media (min-width: 1200px){
	.PopupBox.noPadding .PopupInner{
		padding: 40px;
	}
}

.PopupClose{
	color: #333333;
	position: absolute;
	transition: all .3s ease-in-out;
	cursor: pointer;
	font-size: 18px;
	top: 20px;
	right: 20px;
}

@media (min-width: 1200px){
	.PopupClose:hover{
		opacity: .6;
	}
}

.PopupBg{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

@media (min-width: 1200px){
	.FilterActBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.userBriefBox{
		display: flex;
	}

	.userBriefAvatarBox{
		margin: 0 20px 0 0;
		min-width: 400px;
	}

	.userBriefAvatarName{
		font-size: 20px;
	}

	.userBriefDetailBox{
		flex: 1;
	}

	.userBriefDetailBox{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.userPhotoBox{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.userColBox{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ScrollBox{
	border: 1px solid #CCCCCC;
	padding: 10px;
	width: 250px;
}

.ScrollInner{
	overflow: hidden
}

.ScrollBar{
	overflow-y: auto;
	max-height: 100px;
}

.ScrollBar .IptCheckbox{
	padding: 5px;
}

.openScrollItem{
	padding: 5px;
}

.contractRecordBox{
	border: 1px solid #CCCCCC;
	padding: 10px;
	text-align: center;
}

.contractRecordTitle{
	margin: 0 0 5px;
}

.contractRecordDate{
	text-decoration: underline;
}

.planBlock{
	border: 1px solid #333333;
	color: #000000;
	display: flex;
	position: relative;
	text-align: center;
	padding: 5px 20px;
}

@media (min-width: 1200px){
	.planBlock:hover{
		background: rgba(0,0,0,.1);
	}
}

.planBlock i{
	color: #000000;
	position: absolute;
	transition: all .3s ease;
	top: 50%;
	transform: translateY(-50%);
	right: 10px;
}

@media (min-width: 1200px){
	.planBlock i:hover{
		opacity: .8;
	}
}

.status{
	padding:5px;
	font-size:15px;
	border-radius:5px;
	color:white;
}

.info{
	background: #286fc8;
}
.pending{
	background: #fea000;
}
.success{
	background: #2aa864;
}
.error{
	background:#f0412f;
}

.rank-circle {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8em;
    text-align: center;
    border-radius: 50%;
    color: #fff;
}

.rank-1 { background-color: #FFD700; }  /* gold */
.rank-2 { background-color: #C0C0C0; color: #000; } /* silver with black text */
.rank-3 { background-color: #CD7F32; }  /* bronze */
.rank-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
	max-width: 1000px;
	width: 100%;
}
.rank-card {
	flex: 1 1 250px;
	max-width: 280px;
	background: white;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	padding: 30px 20px 25px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rank-name {
	font-size: 1.4rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 5px;
	margin-top: 10px;
}
.rank-container2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	width: 100%;
}
.rank-card2 {
	flex: 1 1 150px;
	width: 20%;
	background: white;
	border-radius: 20px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
	padding: 30px 20px 25px;
	text-align: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.popover-trigger {
	cursor: pointer;
	text-decoration: underline;
}
.popover {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	z-index: 1000;
	max-width: 80%;
	max-height: 80%;
	overflow: auto;
}
.popover-content {
	padding: 20px;
}
.popover-content h4 {
	margin-top: 0;
	margin-bottom: 10px;
}
.popover-table {
	width: 100%;
	border-collapse: collapse;
}
.popover-table th, .popover-table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
}
.popover-table th {
	background-color: #f2f2f2;
}
.popover-close {
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	color: #666;
}
.popover-close:hover {
	color: #000;
}
.export-excel-btn {
	background: #007bff;
	color: white;
	border: none;
	padding: 5px 10px;
	border-radius: 3px;
	cursor: pointer;
	margin-right: 10px;
	margin-bottom: 10px;
}
.export-excel-btn:hover {
	background: #0056b3;
}