:root{
	/*modal尺寸位置設定*/
	--modalWidth:45vw;
	--modalHeight:70vh;
	--modalTop:0;
	--modalLeft:45vw;
}
.ck-editor__editable {max-height: 500px;overflow:auto;}
/*文字編輯器外觀設定*/

[v-cloak] {
display: none;
}
/*左上半部  標題與方向按鈕*/
#eventArrowLeft{/*左箭頭*/
	background-repeat:no-repeat; 
	background-position: center center;
	background-size: 50px 50px;
	background-image:url("../img/decoration/arrowLeft.png");
	opacity:0.5;
}
#eventArrowRight{/*右箭頭*/
	background-repeat:no-repeat; 
	background-position: center center;
	background-size: 50px 50px;
	background-image:url("../img/decoration/arrowRight.png");
	opacity:0.5;
}
#eventArrowLeft:hover,#eventArrowRight:hover{
	opacity:1;
	cursor:pointer;
}
#eventNumber{/*目前顯示的活動編號*/
	margin:auto;
	text-align: center;
	font-size:1.5em;
}
#eventTitle{/*活動標題*/
	height:10vh;
	/* background:blue; */
	justify-content:center;/*讓元素垂直分布*/
	display: flex;
    flex-direction:column;
	text-align:center;/*水平對齊*/
	font-size:1.5em;
	font-style:italic;
}
/*手機顯示畫面時  出現的縮小圖示*/
#menuButton{
	background-repeat:no-repeat; 
	background-position: center center;
	background-size: 50px 50px;
	background-image:url("../img/decoration/menuButton.png");
	/*min-width:30px;*/
	min-height:50px;
}
/*左上區域  顯示的活動圖*/
#eventPic{
	height:20vh;
	/* background:red; */
	/* overflow:hidden; */
}
#eventPicInnerDiv{
	/* background:blue; */
	height:20vh;
	width:64vh;/*原圖高.寬為250X800 比例為1:3.2*/
	overflow:hidden;/*裏頭的圖片放大時  會用遮色片那樣的方式隱藏*/
	margin:auto;
}
#eventPic img{
	height:100%;
	display:block;
	margin:auto;
	transition: all 0.5s ease-in-out;
}
#eventPic img:hover{cursor:pointer;transform: scale(1.2)}

/*左中區域  顯示的活動精靈圖*/
.eventFairyRowStyle>div img{
	height:80px;
}
#eventFairy{
	height:30vh;
	overflow:auto;
	margin-top:5vh;
}
/*左下區域的按鈕樣式*/
.warningMessage{
	height:5vh;
	line-height:4vh;
	font-size:.875rem;
	background:#fff3CD;
	padding-top:4px;
	padding-bottom:4px;
	border-radius:.2rem;
}
#leftButtonDiv{
	/* background:red; */
	height:8vh;
	justify-content:flex-end;
	align-items:center;
}
#leftButtonDiv button,#leftButtonDiv span{height:5vh;}


/*左下區域  想要抽選的盤面精靈*/
#lotteryFairy{
	height:50vh;
	overflow:auto;
}
#lotteryFairy div>div>div{
	background-position: center center;
	background-size:45px 45px;
	min-width:45px;
	min-height:45px;
}


/*這邊調整活動圖打開的活動一覽小窗*/
.modal-body{
	
	height: var(--modalHeight);
	overflow-y: auto;
}
.modal-body img{height:80px;}
.modal-body tbody tr:hover{background:rgba(0,0,255,0.2)}

.modal-content{
	width:var(--modalWidth);
	top:var(--modalTop);
	left: var(--modalLeft);
}

.modal-dialog {
	position: fixed;
}
.alert {
    margin:auto 0;
	text-align:center;
}
.warningMsgStyleCancel{
	color:red;
	font-weight:bold;
}
.warningMsgStyleImport{
	color:green;
	font-weight:bold;
}
/*中間按鈕區域*/
#middleButtonDiv_top{
	height:73vh;
}
#middleButtonDiv_btn{
	/* background:red; */
	flex-direction: column
}
#middleButtonDiv_btn button{
	margin-bottom:1vh;
}

/*右上半部篩選區域*/
#selectOptionArea{
	height:65vh;
	/* background:blue; */
}
#innerSelectOptionArea{padding-left:0}
#nameSelect{
	/* background:red; */
	height:5vh;
}	
#genderDiv{
	/* background:orange; */
	height:3vh;
	margin-top:2vh;
	margin-bottom:2vh;
}
#genderSelect{
	align-content: space-between;
	/* background:red; */
	height:45vh;
}
#genderSelect>div{
	padding-left:0;
}	
#genderSelect>div img{
	height:12vh;
}
#genderSelect img:hover{
	/* opacity:1!important; */
	/* background:red */
}
#genderSelect label:hover{cursor:pointer;}
#elementDiv{
	/* background:green; */
	height:3vh;
	margin-top:7vh;
	margin-bottom:2vh;
	}
#elementSelect{
	/* background:blue; */
	height:49vh;
	}
#elementSelect>div{
	/* background:pink; */
	justify-content:space-between;
	display:flex;
}
#elementSelect img{height:5vh}
#elementSelect img:hover{border-color:#007BFF !important;cursor:pointer;}

.borderAdded{border-width:3px !important;}
.elementDisplayNone{display:none;}
/* 右區域  底下按鈕外面一層的預設高度 */
#selectButtonDiv{
	/* background:red; */
	height:8vh;
	align-items:center;
}
#selectButtonDiv>div{padding:0}
#selectButtonDiv button{height:5vh;line-height:1.8em;}

img:hover{
	border:3px  solid rgba(255,255,255,0.5);
	cursor:pointer}

/*右下角  篩選結果*/
#selectFairy{
	height:50vh;
	overflow:auto;
}
#menu2>div:hover{/*推薦名單*/
	background: #ffd9a0;
	cursor: pointer;
}

/*最底部 授權聲明與個人圖標*/
#copyRightDiv{
	background:rgba(106, 203, 255, 0.2)
}
.iconDiv{
	justify-content:flex-end;
	display:flex;
	height:10vh;
	
}
.iconDiv img{
	height:5vh;
	margin-left:5vh;
}
.iconDivCenter{
	display:flex;
	flex-direction:column;
	/* background:blue; */
	justify-content:center;
	
	}