@charset "UTF-8";
/************************************************************
*Author: Ken Chang
************************************************************/
html {font-size: 16px;}

@font-face{
   font-family: askcloudcmsfont;
   src: url(../fonts/ASKCloud_Regular.ttf) format("opentype");
}

@font-face{
   font-family: askcloudcmsfontbold;
   src: url(../fonts/ASKCloud_semiBold.ttf) format("opentype");
}

@font-face{
   font-family: askcloudcmslightfont;
   src: url(../fonts/ASKCloud_Light.ttf) format("opentype");
}


body {
	position:relative;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: "askcloudcmslightfont", "微軟正黑體", '新微軟正黑體','Microsoft JhengHei', Arial, helvetica, Geneva, "Heiti TC", sans-serif;
	/* font-weight: 400; */
	/* Ken change to 1.2 to 避免多行會出現疊字*/
	line-height: 1.3;
	width: 100%;
	height: 100%;
	height: calc(var(--fixvh, 1vh) * 100); /* 解決手機 100vh 被下方控制bar吃掉高度的問題*/
	color: var(--clrbodytext);
	text-align: left;
	background-color: black;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* scroll-behavior: smooth; */
}

/*將 input number模式時, 會出現預設上下spinner 隱藏*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 	-webkit-appearance: none;
 	margin: 0;
 	padding: 0;
 	border:  0;
}

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


/* 讓IE/Edge input type為password時, 不要顯示 eyes icon. */
input::-ms-reveal,
input::-ms-clear {
  display: none;
}

/* 
::-webkit-input-placeholder { color: red; }
Firefox 4-18瀏覽器專用
input::-moz-placeholder { color: red; }
Firefox 19+瀏覽器專用
input::-moz-placeholder{color:red;}
IE10瀏覽器專用
:-ms-input-placeholder{color: red;}
 */
.csscom_width-100per {
	width: 100%;
}

.csscom_flex-row {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  flex-direction: row;
  -ms-flex-direction: row;
}

.csscom_flex-column {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

/*重直置中*/
.csscom_alignitems-center {
	align-items: center;
}

.csscom_flex-wrap {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
  
.csscom_flex-nowrap {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

/*重直水平置中 nowrap*/
.csscom_flex-nowrap_HVcenter {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content:center;
	align-items: center;
}

/*重直置中 水平靠右nowrap*/
.csscom_flex-nowrap_HrVc {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content:  flex-end;
	align-items: center;
}

/*重直置中 水平靠右wrap*/
.csscom_flex-wrap_HrVc {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content:  flex-end;
	align-items: center;
}

/*重直置中 水平靠左nowrap*/
.csscom_flex-nowrap_HlVc {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	justify-content:  flex-start;
	align-items: center;
}

/*重直置中 水平靠左wrap*/
.csscom_flex-wrap_HlVc {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content:  flex-start;
	align-items: center;
}


/*重直水平置中 wrap*/
.csscom_flex-wrap_HVcenter {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
}

/*水平置中*/
.csscom_flex-justify-center {
	justify-content:center;
}

/*水平平均配置*/
.csscom_flex-justify-spacebtw {
	justify-content: space-between;
}


/*文字水平置中*/
.csscom_TextHorizCenter {
	text-align: center;
}

/* 參數: 水平位移, 垂直位移,  模糊半徑, 擴散距離, 顏色, 內陰影*/
/*  右下黑陰影(big) for 四方型 only*/
.csscom_shadowBlackLR{
	-webkit-box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
	-o-box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
	box-shadow: .3rem .3rem .4rem var(--clrshadowBlack);
}

/*  右下黑陰影(small) for 四方型 only*/
.csscom_shadowBlackLRSmall{
	-webkit-box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
	-o-box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
	box-shadow: .15rem .15rem .4rem var(--clrshadowBlack);
}


/* 右下黑陰影 for 不規則圖 */
.csscom_dropshadowBlackLR {
    -webkit-filter: drop-shadow(.3rem .4rem .4rem var(--clrshadowBlack));
    filter: drop-shadow(.3rem .4rem .4rem var(--clrshadowBlack));
}

/*  右黑陰影*/
.csscom_shadowBlackR{
	-webkit-box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
	-o-box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
	box-shadow: .3rem 0rem .4rem var(--clrshadowBlack);
}


/*  下黑陰影*/
.csscom_shadowBlackLower{
	-webkit-box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
	-o-box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
	box-shadow: 0 .3rem .4rem var(--clrshadowBlack);
}
/*  上黑陰影*/
.csscom_shadowBlackUpper{
	-webkit-box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
	-o-box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
	box-shadow: 0 -.3rem .4rem var(--clrshadowBlack);
}

/*   中心點向外黑陰影*/
.csscom_shadowBlackCenter {
	-webkit-box-shadow: 0 0 .6rem var(--clrshadowBlack);
	-moz-box-shadow: 0 0 .6rem var(--clrshadowBlack);
	-o-box-shadow: 0 0 .6rem var(--clrshadowBlack);
	-ms-box-shadow: 0 0 .6rem var(--clrshadowBlack);
	box-shadow: 0 0 .6rem var(--clrshadowBlack);
}

/*   中心點向外黑陰影Big*/
.csscom_shadowBlackCenterBig {
	-webkit-box-shadow: 0 0 .8rem .3rem var(--clrshadowBlack);
	-moz-box-shadow: 0 0 .8rem .3rem var(--clrshadowBlack);
	-o-box-shadow: 0 0 .8rem .3rem var(--clrshadowBlack);
	-ms-box-shadow: 0 0 .8rem .3rem var(--clrshadowBlack);
	box-shadow: 0 0 .8rem .3rem var(--clrshadowBlack);
}

/* 中心點向外黑陰影 for 不規則圖 */
.csscom_dropshadowBlackCenter {
	-webkit-filter: drop-shadow(0 0 .5rem var(--clrshadowBlack));
	filter: drop-shadow(0 0 .5rem var(--clrshadowBlack));
}

/*  左下黑陰影(big) for 四方型 only*/
.csscom_shadowBlackRL{
	-webkit-box-shadow: -.3rem .3rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: -.3rem .3rem .4rem var(--clrshadowBlack);
	-o-box-shadow: -.3rem .3rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: -.3rem .3rem .4rem var(--clrshadowBlack);
	box-shadow: -.3rem .3rem .4rem var(--clrshadowBlack);
}

/*  左下黑陰影(small) for 四方型 only*/
.csscom_shadowBlackRLSmall{
	-webkit-box-shadow: -.15rem .15rem .4rem var(--clrshadowBlack);
	-moz-box-shadow: -.15rem .15rem .4rem var(--clrshadowBlack);
	-o-box-shadow: -.15rem .15rem .4rem var(--clrshadowBlack);
	-ms-box-shadow: -.15rem .15rem .4rem var(--clrshadowBlack);
	box-shadow: -.15rem .15rem .4rem var(--clrshadowBlack);
}


/* 左下黑陰影 for 不規則圖 */
.csscom_dropshadowBlackRL {
    -webkit-filter: drop-shadow(-.3rem .4rem .4rem var(--clrshadowBlack));
    filter: drop-shadow(-.3rem .4rem .4rem var(--clrshadowBlack))
}


/*  右下白陰影*/
.csscom_shadowWhiteLR{
	-webkit-box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);
	-moz-box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);
	-o-box-box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);
	-ms-box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);	
	box-shadow: .2rem .2rem .4rem var(--clrshadowWhite);
}

/*  下白陰影*/
.csscom_shadowWhiteLower{
	-webkit-box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
	-moz-box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
	-o-box-box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
	-ms-box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
	box-shadow: 0 .3rem .4rem var(--clrshadowWhite);
}

/*  上白陰影*/
.csscom_shadowWhiteUpper{
	-webkit-box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
	-moz-box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
	-o-box-box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
	-ms-box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
	box-shadow: 0 -.3rem .4rem var(--clrshadowWhite);
}

/*   中心點向外白陰影*/
.csscom_shadowWhiteCenter {
	-webkit-box-shadow: 0 0 1rem var(--clrshadowWhite);
	-moz-box-shadow: 0 0 1rem var(--clrshadowWhite);
	-o-box-box-shadow: 0 0 1rem var(--clrshadowWhite);
	-ms-box-shadow: 0 0 1rem var(--clrshadowWhite);
	box-shadow: 0 0 1rem var(--clrshadowWhite);
}

/*  左亮白陰影*/
.csscom_shadowLighWhiteL{
	-webkit-box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
	-moz-box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
	-o-box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
	-ms-box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
	box-shadow: -.3rem 0rem 1rem var(--clrshadowLighWhite);
}


/*  上下內灰陰影*/
.csscom_innershadowTopBotmLightGray{
	-webkit-box-shadow: inset 0px 11px 8px -10px var(--clrshadowLighWhite), inset 0px -11px 8px -10px var(--clrshadowLighWhite);
	-moz-box-shadow: inset 0px 11px 8px -10px var(--clrshadowLighWhite), inset 0px -11px 8px -10px var(--clrshadowLighWhite);
	-o-box-shadow: inset 0px 11px 8px -10px var(--clrshadowLighWhite), inset 0px -11px 8px -10px var(--clrshadowLighWhite);
	-ms-box-shadow: inset 0px 11px 8px -10px var(--clrshadowLighWhite), inset 0px -11px 8px -10px var(--clrshadowLighWhite);
	box-shadow: inset 0px 11px 8px -10px var(--clrshadowLighWhite), inset 0px -11px 8px -10px var(--clrshadowLighWhite);
}


/* 參數: 水平位移, 垂直位移,  模糊半徑, 擴散距離, 顏色, 內陰影*/
/*  右下藍陰影(big) for 四方型 only*/
.csscom_shadowBlueLR{
	-webkit-box-shadow: .3rem .3rem .4rem var(--clrshadowBlue);
	-moz-box-shadow: .3rem .3rem .4rem var(--clrshadowBlue);
	-o-box-shadow: .3rem .3rem .4rem var(--clrshadowBlue);
	-ms-box-shadow: .3rem .3rem .4rem var(--clrshadowBlue);
	box-shadow: .3rem .3rem .4rem var(--clrshadowBlue);
}

/*  右下藍陰影(small) for 四方型 only*/
.csscom_shadowBlueLRSmall{
	-webkit-box-shadow: .15rem .15rem .4rem var(--clrshadowBlue);
	-moz-box-shadow: .15rem .15rem .4rem var(--clrshadowBlue);
	-o-box-shadow: .15rem .15rem .4rem var(--clrshadowBlue);
	-ms-box-shadow: .15rem .15rem .4rem var(--clrshadowBlue);
	box-shadow: .15rem .15rem .4rem var(--clrshadowBlue);
}


/* 右下藍陰影 for 不規則圖 */
.csscom_dropshadowBlueLR {
    -webkit-filter: drop-shadow(.3rem .4rem .4rem var(--clrshadowBlue));
    filter: drop-shadow(.3rem .4rem .4rem var(--clrshadowBlue))
}


.csscom_sticky-top {
	position: -webkit-sticky; 
	position: sticky;
	top: 0;
	z-index: 1020;
}


.csscom_margin-allzero {
	margin: 0;
}

.csscom_border-allzero {
	border: 0;
}

.csscom_padding-allzero {
	padding: 0;
}

.csscom_fontsize-1-5rem {
	font-size: 1.5rem;
}


.csscom_btn {
	display: block;
	border: none;
	border-radius: 4px;
}

/* Anination mode */
.csscom_TransitionTime15 {
	-webkit-transition: all .15s;
	-moz-transition: all .15s;
	-o-transition: all .15s;
	-ms-transition: all .15s;
	transition: all .15s;	
}

.csscom_TransitionTime20 {
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-o-transition: all .25s;
	-ms-transition: all .25s;
	transition: all .25s;	
}

.csscom_TransitionTime35 {
	-webkit-transition: all .35s;
	-moz-transition: all .35s;
	-o-transition: all .35s;
	-ms-transition: all .35s;
	transition: all .35s;	
}


.csscom_TransitionTime50 {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;	
}

/* 參考  https://www.colorzilla.com/gradient-editor/  */
/*   灰 to 黑漸層, 左上到右下*/
.csscom_blackgradintULtoLR{
	background: -moz-linear-gradient(-45deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: -webkit-linear-gradient(-45deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: linear-gradient(135deg,#606060 0%, #333333 24%, #212121 49%, #000000 79%);
}
/*   灰 to 黑漸層, 右上到左下*/
.csscom_blackgradintURtoLL{
	background: -moz-linear-gradient(45deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: -webkit-linear-gradient(45deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: linear-gradient(225deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
}

/*  灰 to 黑漸層, 右下到左上*/
.csscom_blackgradintRLtoUL{
	background: -moz-linear-gradient(135deg, #606060 0%, #333333 32%, #212121 53%, #000000 79% );
	background: -webkit-linear-gradient(135deg, #606060 0%, #333333 32%, #212121 53%, #000000 79% );
	background: linear-gradient(-45deg, #606060 0%, #333333 32%, #212121 53%, #000000 79%);
}


/* 灰 to 黑漸層, 由下到上*/
.csscom_blackgradinBtoT{
	background: -moz-linear-gradient(180deg, #606060 0%, #333333 4%, #212121 49%, #000000 79%);
	background: -webkit-linear-gradient(180deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: linear-gradient(0deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
}

/* 灰 to 黑漸層, 由上到下*/
.csscom_blackgradinTtoB{
	background: -moz-linear-gradient(180deg, rgb(0, 0, 0) 11%, #262626 55%, #404040 75%, #595959 84%, #7f7f7f 98%);
	background: -webkit-linear-gradient(180deg, #000000 11%, #262626 55%, #404040 75%, #595959 84%, #7f7f7f 98%);
	background: linear-gradient(0deg, #000000 11%, #262626 55%, #404040 75%, #595959 84%, #7f7f7f 98%);
}


/*  灰 to 黑漸層, 由左到右*/
.csscom_blackgradinLtoR{
	background: -moz-linear-gradient(-90deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: -webkit-linear-gradient(-90deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
	background: linear-gradient(90deg, #606060 0%, #333333 24%, #212121 49%, #000000 79%);
}

.csscom_bordstyle{
	border-style: solid;
	border-width: .1rem;
	border-color: rgb(90, 90, 90, 1);
	border-radius: 0;
}


.csscom_ellipsis1row{
 	/*  字數超過, 出現省略字元*/
 	overflow: hidden;
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis;
	display: -webkit-inline-box !important;
	-webkit-line-clamp: 1; 
	-webkit-box-orient: vertical; 
	word-break: break-all;

}

.csscom_ellipsis2row{
 	/*  字數超過, 出現省略字元*/
 	overflow: hidden;
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis;
	display: -webkit-inline-box !important;
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical; 
	word-break: break-all;
 	/* height: auto !important; */
 	white-space: pre-wrap;
}

.csscom_ellipsis3row{
 	/*  字數超過, 出現省略字元*/
 	overflow: hidden;
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis;
	display: -webkit-inline-box !important;
	-webkit-line-clamp: 3; 
	-webkit-box-orient: vertical; 
	word-break: break-all;
 	/* height: auto !important; */
 	white-space: pre-wrap;
}


.csscom_Dialogroot{
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: calc(var(--fixvh, 1vh) * 100); /* 解決手機 100vh 被下方控制bar吃掉高度的問題*/
	overflow-x: auto;
	overflow-y: auto;
	z-index: var(--maxzindex);
}

.csscom_Dialogroot > .csscom_DialogWin{
	position: relative;
	background-color: var(--clrpopwinbackground);
	margin: 0;
	padding: 0;
	border: none;

}
/*  Ken Chang for RWD*/

/*33%,  25% (超過 3840px)*/
@media (min-width: 3840px) {
	.csscom_Dialogroot > .csscom_DialogWin{
		width: 80rem;
		height: 40rem;
	}
}

/*67%,  50% (2560~3840)*/
@media (max-width: 3840px) {
	.csscom_Dialogroot > .csscom_DialogWin {
		width:75rem;
		height: 40rem;
	}
}

/*75%, 80%,  90% (1920~2560)*/
@media (max-width: 2560px) {
	.csscom_Dialogroot > .csscom_DialogWin {
		width: 55rem;
		height: 30rem;
	}
}


/*100%, 110%,  125%, 150%, 175% (1024~1920) 橫式*/
@media (max-width: 1920px) {
	.csscom_Dialogroot > .csscom_DialogWin {
		width: 48rem;
		height: 30rem;
	}	
}

/*200%  (768~1024)*/
@media (max-width: 1024px) {
	.csscom_Dialogroot > .csscom_DialogWin {
		width: 33rem;
		height: 20rem;
	}
}

/*(640以下, 直式)*/
@media (max-width: 640px) {
	.csscom_Dialogroot > .csscom_DialogWin {
		width:30em;
		height:18rem;
	}
}

/*480以下*/
@media (max-width: 480px) {
	.csscom_Dialogroot > .csscom_DialogWin {
		width: 95%;
		height: 15rem;
	}
}

/*320以下*/
@media (max-width: 320px) {
	.csscom_Dialogroot > .csscom_DialogWin {
		width: 95%;
		height: 15rem;
	}
}

/*  禁止使用者輸入, 不會出現 游標閃爍 icon*/
.csscom_DisableUserSelect{
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}


.csscom_EnableUserSelect{
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
}


.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinTop{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 13%;
	margin:0;
	padding:0;
	border: 0;
/* 	border-top-left-radius: inherit;
	border-top-right-radius: inherit; */
	color: var(--clrwhitetext);
	background-color:var(--clrpopwintitle);
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinTop > .csscom_DialogWinIcon{
	position: relative;
	left: 0;
	margin-left: 1rem;
	margin-right: .5rem;
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	outline: none;
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinTop > .csscom_DialogWinIconNotice{
	/* background-color: navy;  */
	left: 0;
	width: 60%;
	height: auto;
	position: relative;
	font-size: var(--btnTextSize22);
}


.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg{
	position: relative;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 68%;
	margin: 0 0 0 0;
	padding: 0 .0 0 0;
	border: none;
	/* background-color: navy; */
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogWinmsgTitle{
	/*background-color: navy;*/
	position: relative;
	display: flex;
	vertical-align: middle;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 20%;
	word-break: break-all;
	text-align: center;
	font-size: var(--btnTextSize24);
	margin-top: .5rem;
	margin-bottom: .5rem;
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogWinmsgTextBlk{
	position: relative;
	top: 0%;
	left: 50%;
	width: 90%;
	height: 74%;
	border: none;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	overflow-x: hidden;
	overflow-y: auto;
	transform: translateX(-50%);
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogWinmsgTextBlk .csscom_DialogWinmsgText{
/* 	background-color: orange; */
	top: 0%;
	left: 0;
	position: relative;
	width: 97%;
	height: 100%;
	margin: 0 0 0 0;
	font-size: var(--btnTextSize22);
	border: none;
	line-height: 1.5;
 	text-overflow: ellipsis;
 	-o-text-overflow: ellipsis;
	display: -webkit-box;
	word-break: break-word;
	-webkit-box-orient: vertical;
	white-space:pre-wrap;
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogIptDiv{
	background-color: rgba(17, 20, 33, 0);
	position: relative;	
	left: 50%;
	top: 0%;
	width: 90%;
	height: 40%;
	margin: 0 0 0 0;
	padding: 0 .0 0 0;
	border: none;
	transform: translateX(-50%); /* 減去自身 50% left */
	display: flex;
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogIptDiv > .csscom_DialogIpt{
	position: relative;	
	background-color: rgba(117, 243, 33, 0);
	left: 0%;
	top: 0%;
	width: 95%;
	height: 50%;
	margin: 0 0 0 0;
	padding: 0 .25rem 0 .25rem;
	font-size: var(--btnTextSize20);
	border: 1px solid var(--clrlistborderline);
	border-radius: 6px;
	outline: none; /* 當focus時, 不會出現 border */
	ime-mode: disabled; /* 禁止切換輸入法 */
}
.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogIptDiv > .csscom_DialogIptErrText{
	background-color: rgba(117, 23, 33, 0);
	position: relative;	
	left: 0%;
	top: 0%;
	width: 90%;
	height: 20%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
	font-size: var(--btnTextSize18);	
	color: var(--askred);
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv{
/* 	background-color: silver; */
	position: relative;	
	left: 50%;
	top: 20%;
	width: 90%;
	height: 50%;
	margin: 0 0 0 0;
	padding: 0 .0 0 0;
	border: 1px solid rgba(213, 213, 213, 1);
	transform: translateX(-50%); /* 減去自身 50% left */
	display: flex;
	border-radius: 4px;
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTitleTxt{
/* 	background-color: purple; */
	position: relative;	
	left: 0%;
	top: 0%;
	width: 95%;
	height: 15%;
	margin: .5rem 0 .5rem .5rem;
	padding: 0 0 0 0;
	border: 0;
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggernowDiv,
.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggercusDiv{
/* 	background-color: olive; */
	position: relative;	
	left: 0%;
	top: 0%;
	width: 99%;
	height: 35%;
	margin: 0 0 1rem 0;
	padding: 0 0 0 0;
	border: none;
}


.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggernowDiv  > .csscom_DialogDeployTriggernowBtn,
.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggercusDiv > .csscom_DialogDeployTriggercusBtn{
	background-color: rgba(121,45,23, 0);
	position: relative;	
	left: 2vmax;
	top: 50%;
	width:.8vmax;
	height: .8vmax;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: 2px solid rgba(160, 160, 160, 1);
	border-radius: 5rem;
	transform: translateY(-50%);
	cursor: pointer;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2;
	-ms-transition: all .2s;
	transition: all .2s;	
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggernowDiv > .csscom_DialogDeployTriggernowBtn:hover,
.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggercusDiv > .csscom_DialogDeployTriggercusBtn:hover{
	background-color: var(--askred);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2;
	-ms-transition: all .2s;
	transition: all .2s;	
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggernowDiv > .csscom_DialogDeployTriggernowBtn.beSeled,
.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggercusDiv > .csscom_DialogDeployTriggercusBtn.beSeled{
	background-color: var(--askred);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2;
	-ms-transition: all .2s;
	transition: all .2s;	
}


.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggernowDiv  > .csscom_DialogDeployTriggernowtxt,
.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggercusDiv > .csscom_DialogDeployTriggercustxt{
/* 	background-color: rgba(121, 45, 123, 1); */
	position: relative;	
	left: 2.5vmax;
	top: 50%;
	width:fit-content;
	height:fit-content;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
	transform: translateY(-50%);
}


.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggercusDiv > .csscom_DialogDeployTriggerTimeslot{
/* 	background-color: rgba(12, 90, 123, 1); */
	position: relative;	
	left: 4vmax;
	top: 50%;
	width: 20%;
	height: 70%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: 1px solid rgba(200, 200, 200, 1);
	transform: translateY(-50%);
	border-radius: 4px;
	cursor: not-allowed;
	color: var(--clrgraytext);
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinmsg > .csscom_DialogDeployDiv > .csscom_DialogDeployTriggercusDiv > .csscom_DialogDeployTriggerTimeslot.beEnable{
	cursor: pointer;
	color: black;
	border: 1px solid rgb(151 151 151);
}


.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogDeployTriggerTimeslotList{
 	background-color: var(--clraskGraybackground);
 	position: absolute;
	left: 0;
	top: 0%;
	width: 50%;
	height: 40%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: 1px solid rgba(213, 213, 213, 1);
	border-radius: 4px;
	display: none;
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogDeployTriggerTimeslotList > .timeslotitems{
/*  	background-color: maroon; */
 	position: relative;
 	left: 0;
	top: 0%;
	width: 25%;
	height: 20%;
	margin: 0 .5rem 0 .5rem;
	padding: 0 0 0 0;
	border-bottom: 4px solid rgba(0,0,0,0);
	cursor: pointer;
	color: var(--clrgraytext);
	-webkit-transition: all .35s;
	-moz-transition: all .35s;
	-o-transition: all .35;
	-ms-transition: all .35s;
	transition: all .35s;	
}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogDeployTriggerTimeslotList > .timeslotitems:hover{
	border-bottom: 4px solid var(--askred);
	color: black;
}


.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinBtnArea{
	/*background-color: red;*/
	position: relative;
	width: 100%;
	height: 14%;
	margin-top: 1rem;
	margin-bottom: 0;
/* 	border-top-style: solid;
	border-top-width: .5px;
	border-top-color: rgba(90, 90, 90, 1); */

}

.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinBtnArea > .csscom_DialogWinBtns{
	position: relative;
	background: var(--clrdialogbtnbk);
	width: fit-content;
	height: 3rem;
	top: 0;
	margin-left: 4.5vmin;
	margin-right: 4.5vmin;
	margin-top: 0;
	margin-bottom: 0;
	/* border-radius: .4vmin; */
	padding: 0 1rem 0 1rem;
	color: var(--clrwhitetext);
	display: none;
	outline: none;
	border-radius: 4px;
	font-size: var(--btnTextSize24);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2;
	-ms-transition: all .2s;
	transition: all .2s;	
}
.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinBtnArea > .csscom_DialogWinBtns:hover,
.csscom_Dialogroot > .csscom_DialogWin > .csscom_DialogWinBtnArea > .csscom_DialogWinBtns:focus{
	cursor: pointer;
	background: var(--lineargradientRedval);
}


/* ********************************** Rename dialog 區Start****************************/
.csscom_RenameDialogroot{
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: calc(var(--fixvh, 1vh) * 100); /* 解決手機 100vh 被下方控制bar吃掉高度的問題*/
	overflow-x: auto;
	overflow-y: auto;
	z-index: var(--maxzindex);
}

.csscom_RenameDialogroot > .csscom_RenameDialogWin{
	position: relative;
	background-color: var(--clrpopwinbackground);
	top: 0;
	left: 0;
	width: 45%;
	height: 50%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;

}

.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinTop{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 14%;
	margin:0;
	padding:0;
	border: 0;
/* 	border-top-left-radius: inherit;
	border-top-right-radius: inherit; */
	color: var(--clrwhitetext);
	background-color:var(--clrpopwintitle);
}

.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinTop > .csscom_RenameDialogWinIcon{
	position: relative;
	left: 0;
	margin-left: 1.5rem;
	margin-right: 1rem;
	width: 1.2rem;
	height: 1.2rem;
	border: none;
	outline: none;
}

.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinTop > .csscom_RenameDialogWinIconNotice{
	/* background-color: navy;  */
	left: 0;
	width: 60%;
	height: auto;
	position: relative;
	font-size: var(--btnTextSize22);
}


.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinmsg{
	position: relative;
	width: 100%;
	height: 60%;
	/* background-color: navy; */
}

.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinmsg > .csscom_RenameDialogOriNameTitle,
.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinmsg > .csscom_RenameDialogNameTitle{
	/* background-color: navy; */
	display: flex;
	left: 0;
	width: 90%;
	height: fit-content;
	position: relative;
	word-break: break-all;
	text-align: center;
	font-weight: bold;
	font-size: var(--btnTextSize22);
	margin: 3rem 0 .5rem 1rem;
	padding: 0 0 0 0;
	border: none;
}

.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinmsg > .csscom_RenameDialogWinmsgText{
	/*background-color: orange;*/
	position: relative;
	top:0;
	left: 0;
	width: 90%;
	height: 10%;
	margin: .5rem 0 0 0;
	padding: 0 0 0 0;
	border: none;
	font-size: var(--btnTextSize22);
}


.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinmsg > .csscom_RenameDialogOriName,
.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinmsg > .csscom_RenameDialogNameInput{
	position: relative;	
	background-color: rgba(117, 243, 33, 0);
	left: 2rem;
	top: 0%;
	width: 85%;
	height: 3rem;
	margin: 0 0 0 0;
	padding: 0 .5rem 0 .5rem;
	font-size: var(--btnTextSize20);
	border: 1px solid var(--clrlistborderline);
	border-radius: 6px;
	outline: none; /* 當focus時, 不會出現 border */
}

.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinmsg > .csscom_RenameDialogOriName{
	color: var(--clrgraytext);
}


.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinmsg > .csscom_RenameDialogOriName{
	border: none;
	border-radius: 0;
}


.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinmsg > .csscom_RenameDialogNameInput: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);
}


.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinBtnArea{
	/*background-color: red;*/
	position: relative;
	width: 100%;
	height: 14%;
	margin-top: 2rem;
	margin-bottom: 0;
/* 	border-top-style: solid;
	border-top-width: .5px;
	border-top-color: rgba(90, 90, 90, 1); */

}

.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinBtnArea > .csscom_RenameDialogWinBtns{
	position: relative;
	background-color: var(--clrdialogbtnbk);
	width: 10%;
	height: 70%;
	top: 0;
	margin-left: 4.5vmin;
	margin-right: 4.5vmin;
	margin-top: 0;
	margin-bottom: 0;
	/* border-radius: .4vmin; */
	color: var(--clrwhitetext);
	display: flex;
	font-size: var(--btnTextSize22);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2;
	-ms-transition: all .2s;
	transition: all .2s;	
}
.csscom_RenameDialogroot > .csscom_RenameDialogWin > .csscom_RenameDialogWinBtnArea > .csscom_RenameDialogWinBtns:hover{
	cursor: pointer;
	color: var(--clrwhitetext);
	background-color: var(--askred);
}
/* ********************************** Rename dialog 區End****************************/


/* ********************************** Input File Name dialog 區Start****************************/
.csscom_IptFileNameDialogroot{
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	height: calc(var(--fixvh, 1vh) * 100); /* 解決手機 100vh 被下方控制bar吃掉高度的問題*/
	overflow-x: auto;
	overflow-y: auto;
	z-index: var(--maxzindex);
}

.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin{
	position: relative;
	background-color: var(--clrpopwinbackground);
	top: 0;
	left: 0;
	width: 45%;
	height: 50%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;

}

.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinTop{
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 14%;
	margin:0;
	padding:0;
	border: 0;
/* 	border-top-left-radius: inherit;
	border-top-right-radius: inherit; */
	color: var(--clrwhitetext);
	background-color:var(--clrpopwintitle);
}

.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinTop > .csscom_IptFileNameDialogWinIcon{
	position: relative;
	left: 0;
	margin-left: 1.5rem;
	margin-right: 1rem;
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	outline: none;
}

.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinTop > .csscom_IptFileNameDialogWinIconNotice{
	/* background-color: navy;  */
	left: 1rem;
	width: 60%;
	height: auto;
	position: relative;
	font-size: var(--btnTextSize26);
}


.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinmsg{
	left: 0%;
	top: 15%;
	position: relative;
	width: 100%;
	height: 40%;
	/* background-color: navy; */
}

.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinmsg > .csscom_IptFileNameDialogNameTitle{
	/* background-color: navy; */
	display: flex;
	left: 0;
	width: 90%;
	height: fit-content;
	position: relative;
	word-break: break-all;
	text-align: center;
	font-weight: bold;
	font-size: var(--btnTextSize22);
	margin: 3rem 0 .5rem 1rem;
	padding: 0 0 0 0;
	border: none;
}

.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinmsg > .csscom_IptFileNameDialogWinmsgText{
	/*background-color: orange;*/
	position: relative;
	top:0;
	left: 0;
	width: 90%;
	height: 10%;
	margin: .5rem 0 0 0;
	padding: 0 0 0 0;
	border: none;
	font-size: var(--btnTextSize22);
}


.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinmsg > .csscom_IptFileNameDialogNameInput{
	position: relative;	
	background-color: rgba(117, 243, 33, 0);
	left: 2rem;
	top: 0%;
	width: 85%;
	height: 3rem;
	margin: 0 0 0 0;
	padding: 0 .5rem 0 .5rem;
	font-size: var(--btnTextSize20);
	border: 1px solid var(--clrlistborderline);
	border-radius: 6px;
	outline: none; /* 當focus時, 不會出現 border */
}


.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinmsg > .csscom_IptFileNameDialogNameInput: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);
}


.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinBtnArea{
	/*background-color: red;*/
	position: absolute;
	left:0;
	top: 98%;
	width: 100%;
	height: 14%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;
	transform:translateY(-100%);
/* 	border-top-style: solid;
	border-top-width: .5px;
	border-top-color: rgba(90, 90, 90, 1); */

}

.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinBtnArea > .csscom_IptFileNameDialogWinBtns{
	position: relative;
	background-color: var(--clrdialogbtnbk);
	width: 12%;
	height: 75%;
	top: 0;
	margin-left: 4.5vmin;
	margin-right: 4.5vmin;
	margin-top: 0;
	margin-bottom: 0;
	border-radius: .4vmin;
	color: var(--clrwhitetext);
	display: flex;
	font-size: var(--btnTextSize22);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2;
	-ms-transition: all .2s;
	transition: all .2s;	
}
.csscom_IptFileNameDialogroot > .csscom_IptFileNameDialogWin > .csscom_IptFileNameDialogWinBtnArea > .csscom_IptFileNameDialogWinBtns:hover{
	cursor: pointer;
	color: var(--clrwhitetext);
	background-color: var(--askred);
}
/* ********************************** Input File Name dialog 區End****************************/





/* ********************************** Waiting Ball 動畫　Start****************************/
.csscom_WaitBall_circle {
  animation: 1.8s ease-in-out infinite both circle-animation;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  transform-origin: 50% 50%;
}

@keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
}
  100% {
    transform: rotateZ(360deg)
  }
}


@keyframes circle-animation {
  0%,
  25% {
		stroke-dashoffset: 280;
    	transform: rotate(0);
	}

  50%,
  75% {
  	  stroke-dashoffset: 75;
 	   transform: rotate(45deg);
    }
    
    100%{
 	   stroke-dashoffset: 280;
 	   transform: rotate(360deg);
	}
}
/* ********************************** Waiting Ball 動畫　End****************************/

/* ********************************** Sear Auto-complete portion  Start****************************/
.csscom_AutocompleteContainer{
	/* background-color: rgba(255, 0, 0, 0);  */
	position: absolute;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	margin: 0;
	border: none;
	padding: 0;
	z-index: var(--maxzindex1);
	outline: none;
	/* transform: translateX(-50%); */
}

.csscom_AutocompleteContainer > .csscom_SearAutocompleteList{
	/* background-color: rgba(55, 67, 34, 0); */
	background-color: var(--clrlistbackground);
	position: relative;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	margin: 0;
	border: none;
	padding: 0 0 0 0;
	outline: none;
/* 	transform:translate(-50%, -50%); */
	/* border-radius: .5rem; */
	/* border: 1px var(--clrlistborderline) solid; */
	z-index: var(--maxzindex1);
}

.csscom_SearAutocompleteList .csscom_SearAutocompleteitms{
 	background-color: var(--clrlistbackground);
	position: relative;
	top: 0%;
	left: 50%;
	width: 95%;
	height: 2rem;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: none;	
	outline: none;
	/* border-bottom: 1px var(--clrlistborderlinelightgray) solid; */
	font-size: var(--btnTextSize20);
	transform: translateX(-50%);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s;	
}

.csscom_SearAutocompleteList .csscom_SearAutocompleteitms:nth-child(2n){
/* 	background-color: rgb(240 241 241);
	border-bottom: 1px var(--clrlistborderlinelightgray) solid;
	border-top: 1px var(--clrlistborderlinelightgray) solid; */
}

.csscom_SearAutocompleteList .csscom_SearAutocompleteitms > p{
	padding: 0 .5rem 0 .5rem;
}

.csscom_SearAutocompleteList .csscom_SearAutocompleteitms:hover{
	background-color: var(--askred);
	color: var(--clrwhitetext);
	cursor: pointer;
}


/* ********************************** Sear Auto-complete portion  End****************************/



/**************************  For Time Setting window *********************/
.csscom_TimesetContainer{
	background-color: white;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0 0 0 0;
	border: none;
	padding: 0;
	z-index: 	var(--maxzindex2);
	outline: none;
	font-size: var(--btnTextSize26);
	color: black;
	display: none;
}

.csscom_TimesetContainer .TimesetTitleName{
	/* background-color: teal; */
	position: relative;
	left: 0%;
	top: 0%;
	width: fit-content;
	height: auto;
	margin: 1rem 0 0 2rem;
	border-bottom: 3px solid red;;
	padding: 0 1rem 0 1rem;
	font-size: var(--btnTextSize26);
}

.csscom_TimesetContainer .TimesetTitleExtraInfo{
	/* background-color: teal; */
	position: relative;
	left: 0%;
	top: 0%;
	width: 80%;
	height: auto;
	margin: 1rem 0 0 2rem;
	border: none;
	padding: 0 0 0 0;
	font-size: var(--btnTextSize20);
}


.csscom_TimesetContainer > .csscom_TimesetStart,
.csscom_TimesetContainer > .csscom_TimesetStop{
/* 	background-color: maroon; */
	position: absolute;
	left: 50%;
	top: 30%;
	width: 30%;
	height: 20%;
	margin: 0 0 0 0;
	border: none;
	padding: 0 0 0 0;
	transform: translate(-50%, -50%);
	font-size: var(--btnTextSize22);
	font-family: inherit;
	color: inherit;
}

.csscom_TimesetContainer > .csscom_TimesetStop{
	top: 65%;
	transform: translate(-50%, -50%);
}

.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetBlk,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetBlk{
	background: rgba(210, 210, 210, 1);
	position: absolute;
	left : 50%;
	top: 50%;
	width: 75%;
	height: 30%;
	border: 1px solid  rgba(180, 180, 180, 1);;
	margin: 0 0 0 0;
	padding: .4rem;
	outline: none;
	transform: translate(-50%, -50%);
	border-radius: 20rem;
	justify-content: center;
}



.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetTitleStart,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetTitleStop{
	/* background-color: buttonhighlight; */
	position: relative;
	left: 0%;
	top: 0%;
	width: 80%;
	height: 20%;
	margin: 0 0 0 0;
	border: none;
	padding: 0 0 0 0;
	font-size: var(--btnTextSize26);
	color: inherit;
}

.csscom_TimesetContainer .csscom_TimesetItemHourBlk,
.csscom_TimesetContainer .csscom_TimesetItemMinsBlk{
	/* background-color: red; */
	position: relative;
	left: 0%;
	top: 0%;
	width: 20%;
	height: 100%;
	margin: 0 0 0 0;
	border: none;
	padding: 0 0 0 0;
	outline: none;
	font-size: var(--btnTextSize24);
	text-align:center;
	color: inherit;
}

.csscom_TimesetContainer .csscom_TimesetItemHourBlk > .csscom_HourSetUparrow,
.csscom_TimesetContainer .csscom_TimesetItemHourBlk > .csscom_HourSetDownarrow{
	/* background-color: navy; */
	position: absolute;
	left: 50%;
	top: 0%;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0 0 0 0;
	border: none;
	padding: 0 0 0 0;
	transform: translate(-50%, -170%);
	outline: none;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-o-transition: all .25s;
	-ms-transition: all .25s;
	transition: all .25s;
	cursor: pointer;
	display:none;
}

.csscom_TimesetContainer .csscom_TimesetItemHourBlk > .csscom_HourSetUparrow{
 	background-image: url('../img/Uarrow_black.svg');
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center;	
}

.csscom_TimesetContainer .csscom_TimesetItemHourBlk > .csscom_HourSetDownarrow{
 	background-image: url('../img/Darrow_black.svg');
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center;	
}

.csscom_TimesetContainer .csscom_TimesetItemHourBlk > .csscom_HourSetDownarrow{
	bottom: 0%;
	top: unset;
	transform: translate(-50%, 170%)
}

.csscom_TimesetContainer .csscom_TimesetItemHourBlk > .csscom_HourSetUparrow:hover{
 	background-image: url('../img/Rarrow_up.svg');

}
.csscom_TimesetContainer .csscom_TimesetItemHourBlk > .csscom_HourSetDownarrow:hover{
 	background-image: url('../img/Rarrow_down.svg');

}

.csscom_TimesetContainer .csscom_TimesetItemMinsBlk > .csscom_MinSetUparrow,
.csscom_TimesetContainer .csscom_TimesetItemMinsBlk > .csscom_MinSetDownarrow{
	/* background-color: navy; */
	position: absolute;
	left: 50%;
	top: 0%;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0 0 0 0;
	border: none;
	padding: 0 0 0 0;
	transform: translate(-50%, -170%);
	outline: none;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-o-transition: all .25s;
	-ms-transition: all .25s;
	transition: all .25s;
	cursor: pointer;
 	display:none;
}

.csscom_TimesetContainer .csscom_TimesetItemMinsBlk > .csscom_MinSetUparrow{
 	background-image: url('../img/Uarrow_black.svg');
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center;	
}

.csscom_TimesetContainer .csscom_TimesetItemMinsBlk > .csscom_MinSetDownarrow{
 	background-image: url('../img/Darrow_black.svg');
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center;	
}

.csscom_TimesetContainer .csscom_TimesetItemMinsBlk > .csscom_MinSetDownarrow{
	bottom: 0%;
	top: unset;
	transform: translate(-50%, 170%)
}

.csscom_TimesetContainer .csscom_TimesetItemMinsBlk > .csscom_MinSetUparrow:hover{
 	background-image: url('../img/Rarrow_up.svg');

}
.csscom_TimesetContainer .csscom_TimesetItemMinsBlk > .csscom_MinSetDownarrow:hover{
 	background-image: url('../img/Rarrow_down.svg');

}

.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetBlk > .csscom_TimesetItemHourBlk > .csscom_TimesetHour,
.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetBlk > .csscom_TimesetItemMinsBlk > .csscom_TimesetMins,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetBlk > .csscom_TimesetItemHourBlk > .csscom_TimesetHour,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetBlk > .csscom_TimesetItemMinsBlk > .csscom_TimesetMins{
	background-color: rgba( 11, 22, 33, 0);
	position: relative;
	left: 0%;
	top: 50%;
	width: 100%;
	height: 100%;
	margin: 0 0 0 0;
	border: solid 1px rgba(212,212,212,0);
	padding: 0 0 0 0;
	transform: translateY(-50%);
	outline: none;
	font-size: inherit;
	text-align:center;
	font-family: inherit;
	color: inherit;	
}

.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetBlk > .csscom_TimesetItemHourBlk > .csscom_TimesetHour:hover,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetBlk > .csscom_TimesetItemHourBlk > .csscom_TimesetHour:hover,
.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetBlk > .csscom_TimesetItemMinsBlk > .csscom_TimesetMins:hover,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetBlk > .csscom_TimesetItemMinsBlk > .csscom_TimesetMins:hover,
.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetBlk > .csscom_TimesetItemHourBlk > .csscom_TimesetHour:focus,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetBlk > .csscom_TimesetItemHourBlk > .csscom_TimesetHour:focus,
.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetBlk > .csscom_TimesetItemMinsBlk > .csscom_TimesetMins:focus,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetBlk > .csscom_TimesetItemMinsBlk > .csscom_TimesetMins:focus{
	cursor: pointer;
	color: var(--askred);
}

.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetBlk > .csscom_TimesetItemHourBlk > .csscom_TimesetHour:focus ~ div,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetBlk > .csscom_TimesetItemHourBlk > .csscom_TimesetHour:focus ~ div,
.csscom_TimesetContainer > .csscom_TimesetStart > .csscom_TimesetBlk > .csscom_TimesetItemMinsBlk > .csscom_TimesetMins:focus ~ div,
.csscom_TimesetContainer > .csscom_TimesetStop > .csscom_TimesetBlk > .csscom_TimesetItemMinsBlk > .csscom_TimesetMins:focus ~ div{
	display:block;
}

.csscom_TimesetContainer .csscom_TimesetColon{
/* 	background-color: teal; */
	position: relative;
	left: 0%;
	top: 50%;
	width: 20%;
	height: 100%;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	border: solid 1px rgba(0,0,0,0);
	transform: translateY(-50%);
	outline: none;
	font-size: inherit;
	text-align:center;
	font-family: inherit;
	color: inherit;
}

.csscom_TimesetContainer > .csscom_TimesetOKBtn,
.csscom_TimesetContainer > .csscom_TimesetCancleBtn{
	position: absolute;
	background-color: rgba(64, 64, 64, 1); 
 	width: 10%;
	height: 5%;
	top: 92%;
	left: 40%;
	transform: translate(-50%, -50%);
	margin: 0 0 0 0;
	color: rgba(255, 255, 255, 1);
	font-size: 1.2rem;
	border-radius: 4px;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
	-o-transition: all .25s;
	-ms-transition: all .25s;
	transition: all .25s;	
}

.csscom_TimesetContainer > .csscom_TimesetCancleBtn{
	left: 60%;
}

.csscom_TimesetContainer > .csscom_TimesetOKBtn:focus,
.csscom_TimesetContainer > .csscom_TimesetCancleBtn:focus,
.csscom_TimesetContainer > .csscom_TimesetOKBtn:hover,
.csscom_TimesetContainer > .csscom_TimesetCancleBtn:hover{
	cursor: pointer;
	color: rgba(255, 255, 255, 1);
	background-color: rgba(229, 21, 19, 1);
	outline-width: 0;
}

/**************************  For Time Setting window end *********************/



/************************** for group/device pop select list *********************/
.csscom_groupdevpopuplistBlk{
	background-color: rgba(255, 0, 0, 0);
	position: absolute;
	display: flex;
	margin: 0 0 0 0 ;
	border: none;
	padding: 0 0 0 0;
	width: 100%;
	height: 100%;
	left: 0%;
	top: 0%;
	z-index: var(--maxzindex1);

}

.csscom_groupdevpopuplistBlk > .csscom_groupdevpopuplist{
	position: relative;
	background-color: white;
	display: none;
	top: 0%;
	left: 0%;
	margin: 0 0 0 0 ;
	border: 1px solid gray;
	padding: 0 0 0 0;
	width: 30vmax;
	height: 50vmin;

}

.csscom_groupdevpopuplistBlk > .csscom_groupdevpopuplist > .titleBlk{
    position: relative;
    background-color: var(--clrpopwintitle);
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0;
    width: 100%;
    height: 12%;
    top: 0;
    left: 0;
}

.csscom_groupdevpopuplistBlk > .csscom_groupdevpopuplist > .titleBlk > .titletxt{
	position: relative;
	display: flex;
	top: 50%;
	left: 50%;
	margin: 0 0 0 0 ;
	border: none;
	padding: 0 0 0 0;
	width: 70%;
	height: fit-content;
	transform: translate(-50%, -50%);
	font-size: var(--btnTextSize22);
	color: white;
}


.csscom_groupdevpopuplistBlk > .csscom_groupdevpopuplist > .titleBlk > .closeicon{
	position: absolute;
	display: flex;
	top: 50%;
	left: 96%;
	margin: 0 0 1vmax 0 ;
	border: none;
	padding: 0 0 0 0;
	width: 1.5vmax;
	height: 1.5vmax;
	background-image: url(../img/cross_white.svg); 
	background-size: .8vmax .8vmax;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	border-radius: 10vmax;
	transform: translate(-50%, -50%);
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-o-transition: all .2s;
	-ms-transition: all .2s;
	transition: all .2s;
}

.csscom_groupdevpopuplistBlk > .csscom_groupdevpopuplist > .titleBlk > .closeicon:hover{
	background-color: var(--askred);
}


.csscom_groupdevpopuplistBlk > .csscom_groupdevpopuplist > .itemsBlk{
	position: relative;
    background-color: var(--clrpopwinbackground);
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
    height: 88%;
    top: 0;
    left: 0;
}


.csscom_groupdevpopuplistBlk > .csscom_groupdevpopuplist > .itemsBlk > .items{
	background-color: rgba(12, 67, 43, 0);
	position: relative;
	display: flex;
	margin: 0 0 0 0;
	border: none;
	padding: 0 0 0 0;
	width: 100%;
	height: 20%;
	left: 0%;
	top: 0%;
	color: black;
	cursor: pointer;
    white-space: pre-line;
   	font-size: var(--btnTextSize20);
}

.csscom_groupdevpopuplistBlk > .csscom_groupdevpopuplist > .itemsBlk > .items:hover{
	background-color: var(--askred);
	color: white;
}
/************************** for group/device pop select list End*********************/