/* **********************************************************
* Des: Initializer
* Date: 2020/10/22
* Author: Ken Chang
*************************************************************/
@charset "UTF-8";

/*************************    密碼修改頁面 *************************/
.ActPwdModifyRoot{
	background: rgba(70, 70, 70, 1);
	position: relative;
	display: flex;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 90%; 
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
}

.ActPwdModifyRoot > .ActOldPwditem,
.ActPwdModifyRoot > .ActNewPwditem,
.ActPwdModifyRoot > .ActNewConfirmPwditem,
.ActPwdModifyRoot > .ActPwdFormatInfo,
.ActPwdModifyRoot > .PwdMbottom{
	background-color: rgba(54, 85, 218, 0);
	position: relative;
	left: 50%;
	top: 2.5%;
	width: 40%;
	height: 16%;
	margin: 1rem 0 0 0;
	padding: 0 0 0 0;
	border: none;
	transform: translateX(-50%);
}

.ActPwdModifyRoot > .ActOldPwditem > .ActOldPwdTitleText,
.ActPwdModifyRoot > .ActNewPwditem > .ActNewPwdTitleText,
.ActPwdModifyRoot > .ActNewConfirmPwditem > .ActNewConfirmPwdTitleText{
	position: relative;
	background-color: rgba(231, 46, 231, 0);
	left: 0;
	top: 0;
	width: 100%;
	height: 38%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
	align-items: flex-end;
	color: white;
	font-size: var(--btnTextSize24);
}

.ActPwdModifyRoot > .ActOldPwditem > span,
.ActPwdModifyRoot > .ActNewPwditem > span,
.ActPwdModifyRoot > .ActNewConfirmPwditem > span{
	background-color: rgba(37, 50, 33, 0);
	position: relative;	
	left: 0%;
	top: 0%;
	width: 98%;
	height: 40%;
	margin: .5rem .0 0 0;
	padding: 0 .25rem 0 .25rem;
}

.ActPwdModifyRoot span > input{
	position: relative;	
	background-color: rgba(117, 243, 33, 0);
	left: 0%;
	top: 0%;
	width: 92%;
	height: 90%;
	margin: 0 0 0 0;
	padding: 0 .25rem 0 .25rem;
	font-size: var(--btnTextSize24);
	border: 1px solid var(--clrlistborderline);
	border-radius: 6px;
	outline: none; /* 當focus時, 不會出現 border */
	ime-mode: disabled; /* 禁止切換輸入法 */
	color: var(--clrwhitetext);
}

.ActPwdModifyRoot > .ActOldPwditem > span > .OldPwdHideShow,
.ActPwdModifyRoot > .ActNewPwditem > span > .NewPwdHideShow,
.ActPwdModifyRoot > .ActNewConfirmPwditem > span > .NewCfmPwdHideShow{
	position: absolute;	
	margin: 0 0 0 0;
	border: none;
	padding: 0 0 0 0;
	width: 1.6rem;
	height: 100%;
	left: 98%;
	top: 0;
	cursor: pointer;
	transform: translateX(-102%);
 	background-image: url('../img/hidepwd.png');
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center;
	outline: none;
}

.ActPwdModifyRoot > .ActOldPwditem > span > .OldPwdHideShow.askpwdshow,
.ActPwdModifyRoot > .ActNewPwditem > span > .NewPwdHideShow.askpwdshow,
.ActPwdModifyRoot > .ActNewConfirmPwditem > span > .NewCfmPwdHideShow.askpwdshow{
	background-image: url('../img/showpwd_white.svg');
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center;
	outline: none;
}


.ActPwdModifyRoot > .ActOldPwditem > span > .KBUpperCase,
.ActPwdModifyRoot > .ActNewPwditem > span > .KBUpperCase,
.ActPwdModifyRoot > .ActNewConfirmPwditem > span > .KBUpperCase{
	position: absolute;	
	margin: 0 0 0 0;
	border: none;
	padding: 0 0 0 0;
	width: 1.0rem;
	height: 100%;
	left: 90%;
	top: 0;
	transform: translateX(-102%);
 	background-image: url('../img/uppercase.png');
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center;
	outline: none;
	display: none;
	z-index: 20;
}


.ActPwdModifyRoot > .ActNewPwditem > .ActNewPwdErr,
.ActPwdModifyRoot > .ActNewConfirmPwditem > .ActNewConfirmPwdErr{
	position: relative;	
	background-color: rgba(117, 143, 35, 0);
	left: 0%;
	top: 0%;
	width: 90%;
	height: auto;
	margin: .2rem 0 0 .5rem;
	padding: 0 0 0 0;
	font-size: 1rem;
	color: rgb(253, 64, 62);
}

.ActPwdModifyRoot span > input:focus{
	border: 1px solid var(--askred);
	-webkit-box-box-shadow: 0 0 1rem var(--askred);
	-moz-box-shadow: 0 0 1rem var(--askred);
	-o-box-box-shadow: 0 0 1rem var(--askred);
	-ms-box-shadow: 0 0 1rem var(--askred);
	box-shadow: 0 0 1rem var(--askred);
}

.ActPwdModifyRoot > .PwdMbottom{
	margin: 4rem 0 0 0;
	height: 7%;
	justify-content: flex-end;
	align-items: center;
}

.ActPwdModifyRoot > .ActPwdFormatInfo{
/* 	background-color: var(--clrdialogbtnbk); */
	top: 7%;
	height: 18%;
	width: 39%;
	color: orange;
	font-size: var(--btnTextSize22);
	white-space: pre; /* 遇到\n就換行 */
}


.ActPwdModifyRoot > .PwdMbottom > .PwdMSubmit,
.ActPwdModifyRoot > .PwdMbottom > .PwdMExit{
	background: var(--lineargradientGrayval);
	position: relative;
	top: 0;
	left: 0rem;
	width: 5rem;
	height: 2.8rem;
	color: var(--clrwhitetext);
	margin: 0 2rem 0 3rem;
	padding: 0 0 0 0;
	border: none;
	border-radius: 4px;
	font-size: var(--btnTextSize22);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2;
	-ms-transition: all .2s;
	transition: all .2s;
}

.ActPwdModifyRoot > .PwdMbottom > .PwdMSubmit:hover,
.ActPwdModifyRoot > .PwdMbottom > .PwdMExit:hover{
	cursor: pointer;
	color: var(--clrwhitetext);
	background: var(--lineargradientRedval);
	-webkit-filter: drop-shadow(0 0 .5rem var(--clrshadowBlack));
	filter: drop-shadow(0 0 .5rem var(--clrshadowBlack))
}