*{font-family:"微軟正黑體","Microsoft JhengHei","Segoe UI Semibold","Segoe UI","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.cantSelect{-webkit-touch-callout:none;-webkit-user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body{margin:0;padding:0;background-image:url('../images/bg_dot.png')}
.mainFunctionBar{box-shadow:0px 6px 7px rgba(0,0,0,0.1);background-color:white;position:fixed;height:68px;position:fixed;z-index:10001;top:0;left:0;color:white;padding:10px;margin-bottom:5px;width:100%;border-bottom:2px solid #bfbfbf}

.hamburger{position:fixed;width:48px;height:45px;padding:8px 5px 0 5px;cursor:pointer;z-index:2;top:10px;left:5px}
.hamburger:hover{opacity:0.5}
.hamburger div{width:30px;height:3px;background-color:#999;margin:6px 0;border-radius:3px}

#idDiv_title_deviceList{color:#121212;display:inline-block;margin-right:10px}
#selectDeviceList,#selectDeviceList2,#selectDeviceList3,#selectDeviceList4{width:auto;margin-right:3px}
#selectDeviceList optgroup[label]{background-color:#d9d9d9}
#selectDeviceList option{background-color:#efefef}

#sideMenuAll{top:68px;position:fixed;padding:0px;left:-250px;width:240px;height:3000px;z-index:100;background-color:white;border:1px solid #ccc;border-top:3px solid #dadada}
#sideMenuAll .upMargin20{margin-top:0px}
#sideMenuAll .leftMenu{height:100%;overflow-x:none;overflow-y:hidden;border-right:1px solid #f2f2f2;background:white}
#sideMenuAll ul{list-style-type:none;padding-left:0;margin:0}
#sideMenuAll ul li ul{list-style-type:none;padding-left:0;margin:0}
#sideMenuAll .mainCategory{cursor:default;font-weight:bold;font-size:20px;display:inline-block;padding:10px 0px 10px 40px;width:100%;color:#2d2d2d;border:1px solid rgba(255,255,255,0.5);border-left:none;border-right:none}
#sideMenuAll .subCategory{cursor:pointer;display:inline-block;font-size:16px;width:100%;color:#999999;padding:10px 0px 10px 40px;background:white}
#sideMenuAll .mainCategory:hover{background:none;background-color:white}
#sideMenuAll .subCategory:hover{background:none;background-color:#f2f2f2}
#sideMenuAll .mcPic{float:right;margin-top:6px;display:none}

.pageMainTitleArea{position:absolute;left:58px;top:20px}
.pageMainTitle{font-size:20px;color:#666;font-weight:bold}
.modifyCnoText{position:relative;top:-2px;color:gray;font-size:14px;font-weight:bold;padding-left:20px}
.modifyCnoBtn{font-weight:bold;position:relative;top:-3px;border:1px solid #ccc;border-radius:3px;color:gray;font-size:12px;padding:5px;background-color:white}
#showCno{cursor:text}
#showCno:hover{background-color:#e6ffff;color:#ccc}
.macAddressBg{width:265px;margin-top:5px;display:inline-block;padding:3px 10px;border-radius:5px;-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.4);-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.4);box-shadow:inset 0 0 10px rgba(0,0,0,0.4)}
#procOpcAlarmArea{border-bottom:1px dashed #ccc;text-align:right;display:block;background-color:none;position:fixed;left:0;top:68px;width:100%;padding:0;z-index:1;background-color:#e6e6e6;padding:10px 25px}
.alertText{display:inline-block;margin-left:23px;font-weight:bold}
.staticNumber{display:inline-block;margin-top:1px;margin-left:5px;background-color:#fafafa;width:30px;border-radius:3px;text-align:center;color:#fafafa;overflow:hidden;white-space:nowrap;font-weight:normal}
.alertNumber{display:inline-block;margin-top:1px;margin-left:5px;background-color:rgba(255,255,255,0.95);width:30px;border-radius:3px;text-align:center;color:gray;overflow:hidden;white-space:nowrap;font-weight:normal}

.close{position:absolute;right:0px;top:10px;width:50px;height:50px;opacity:0.3}
.close:hover{opacity:1}
.close:before,.close:after{position:absolute;left:15px;content:' ';height:33px;width:2px;background-color:#333}
.close:before{transform:rotate(45deg)}
.close:after{transform:rotate(-45deg)}

.wclose{position:absolute;right:-7px;top:10px;width:50px;height:50px;opacity:1;cursor:pointer}
.wclose:hover{opacity:0.5}
.wclose:before,.wclose:after{position:absolute;left:15px;content:' ';height:33px;width:2px;background-color:white}
.wclose:before{transform:rotate(45deg)}
.wclose:after{transform:rotate(-45deg)}

.f9{font-size:12px}
.f10{font-size:12px}
.f11{font-size:12px}
.f12{font-size:12px}
.f14{font-size:14px}
.f16{font-size:16px}
.f18{font-size:18px}
.f20{font-size:20px}
.f22{font-size:22px}
.f24{font-size:24px}
.f32{font-size:32px;font-weight:bold}
.text_bold{font-weight:bold}
.text_green{color:#80BD00;font-weight:normal}
.text_black{color:black;font-weight:normal}
.text_red{color:red;font-weight:normal}
.text_purple{color:#b380ff;font-weight:normal}
.text_white{color:white;font-weight:normal}
.text_gray{color:gray;font-weight:normal}
.text_lgray{color:#bfbfbf;font-weight:normal}
.text_yellow{color:yellow;font-weight:normal}
.text_brown{color:#d1bd94}

.bgWhite{background:white}
.bgGreen{background:#0066B1}
.bgBlue{background:#33ccff}
.bgLightGreen{background:#e6ffe6}
.bgLightBlue{background:#ccffff}
.bgYellow{background:yellow}
.bgRed{background:red}
.bgOrange{background:orange}
.bgLightYellow{background:#ffffe0}
.bgGray{background:gray}

.w100{width:100%}
.text_center{text-align:center}
.transparent20{opacity:0.2}
.limitHint{font-size:14px;display:inline-block;float:right;padding:3px 10px;color:white;font-weight:bold;background-color:#bfbfbf;border-radius:3px 3px 0 0}
#whiteAreaOpacity{display:none;top:0;left:0;position:fixed;z-index:12;width:3000px;height:3000px;background:rgba(255,255,255,1)}
#blackAreaOpacity{display:none;top:0;left:0;position:fixed;z-index:10002;width:3000px;height:3000px;background:rgba(0,0,0,0.3)}
#blackArea{top:0;left:0;display:none;position:fixed;z-index:10002;width:100%;height:100%}
#blackAreaOpacity2{top:0;left:0;display:none;position:fixed;z-index:997;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea2{top:0;left:0;display:none;position:fixed;z-index:997;width:100%;height:100%}
#blackAreaOpacity3{top:0;left:0;display:none;position:fixed;z-index:10003;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea3{top:0;left:0;display:none;position:fixed;z-index:10003;width:100%;height:100%}
#blackAreaOpacity4{top:0;left:0;display:none;position:fixed;z-index:10002;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea4{top:0;left:0;display:none;position:fixed;z-index:10002;width:100%;height:100%}
#blackAreaOpacity5{top:0;left:0;display:none;position:fixed;z-index:10002;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea5{top:0;left:0;display:none;position:fixed;z-index:10002;width:100%;height:100%}
#blackAreaOpacity6{top:0;left:0;display:none;position:fixed;z-index:10002;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea6{top:0;left:0;display:none;position:fixed;z-index:10002;width:100%;height:100%}
#blackAreaOpacity7{top:0;left:0;display:none;position:fixed;z-index:9997;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea7{top:0;left:0;display:none;position:fixed;z-index:9997;width:100%;height:100%}
#blackAreaOpacity8{top:0;left:0;display:none;position:fixed;z-index:9999;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea8{top:0;left:0;display:none;position:fixed;z-index:9999;width:100%;height:100%}
#blackAreaOpacity9{top:0;left:0;display:none;position:fixed;z-index:997;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea9{top:0;left:0;display:none;position:fixed;z-index:997;width:100%;height:100%}
#blackAreaOpacity10{top:0;left:0;display:none;position:fixed;z-index:998;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea10{top:0;left:0;display:none;position:fixed;z-index:998;width:100%;height:100%}
#blackAreaOpacity11{top:0;left:0;display:none;position:fixed;z-index:998;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea11{top:0;left:0;display:none;position:fixed;z-index:998;width:100%;height:100%}
#blackAreaOpacity12{top:0;left:0;display:none;position:fixed;z-index:10001;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea12{top:0;left:0;display:none;position:fixed;z-index:10001;width:100%;height:100%}
#blackAreaOpacity13{top:0;left:0;display:none;position:fixed;z-index:10003;width:3000px;height:3000px;background:rgba(0,0,0,0.5)}
#blackArea13{top:0;left:0;display:none;position:fixed;z-index:10003;width:100%;height:100%}

.dialogArea,.dialogArea3,.dialogArea7,.dialogArea8,.dialogArea12,.dialogArea13{width:500px;left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;padding:50px 15px 0 15px;border:1px solid gray;padding-bottom:20px;border-radius:10px;-webkit-filter:drop-shadow(0px 5px 7px rgba(0,0,0,0.5));filter:drop-shadow(0px 5px 7px rgba(0,0,0,0.5));background:rgb(255,255,255);background:-moz-linear-gradient(top,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);background:linear-gradient(to bottom,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d6d6d6',GradientType=0 )}
.dialogArea2,.dialogArea6,.dialogArea9,.dialogArea10,.dialogArea11{width:500px;left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;padding:50px 15px 0 15px;border:1px solid gray;padding-bottom:20px;background:white;border-radius:10px;-webkit-filter:drop-shadow(0px 5px 7px rgba(0,0,0,0.5));filter:drop-shadow(0px 5px 7px rgba(0,0,0,0.5));background:rgb(255,255,255);background:-moz-linear-gradient(top,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);background:linear-gradient(to bottom,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d6d6d6',GradientType=0 )}
.dialogArea4{width:500px;left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;padding:50px 15px 0 15px;border:1px solid gray;padding-bottom:20px;background:white;border-radius:10px;-webkit-filter:drop-shadow(0px 5px 7px rgba(0,0,0,0.5));filter:drop-shadow(0px 5px 7px rgba(0,0,0,0.5));background:rgb(255,255,255);background:-moz-linear-gradient(top,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);background:linear-gradient(to bottom,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d6d6d6',GradientType=0 )}
.dialogArea5{width:1150px;left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;padding:50px 15px 0 15px;border:1px solid gray;padding-bottom:20px;background:white;border-radius:10px;-webkit-filter:drop-shadow(0px 5px 7px rgba(0,0,0,0.5));filter:drop-shadow(0px 5px 7px rgba(0,0,0,0.5));background:rgb(255,255,255);background:-moz-linear-gradient(top,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);background:linear-gradient(to bottom,rgba(255,255,255,1) 34%,rgba(214,214,214,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d6d6d6',GradientType=0 )}

.popupTitle{position:absolute;padding:10px;left:0;top:0;color:white;border-radius:10px 0 10px 0}
.equipOverflow{height:400px;overflow-y:auto}

.myGreenBtn2{color:#227e00;font-size:18px;font-weight:bold;border:none;padding:7px 0px;position:relative;background:none}
.myGreenBtn2:hover{color:#999;text-decoration:underline}
.myGreenBtn2:focus{outline:0 !important}
.myGreenBtn{font-size:16px;background-color:#0066B1;display:inline-block;color:#FFF;border:1px solid #999999;border-radius:15px;padding:8px 15px;cursor:pointer;font-weight:bold}
.myGreenBtn:hover{background:#005999}
.myGreenBtn:focus{outline:0 !important}
.myCancelBtn{font-size:16px;background-color:white;display:inline-block;color:#666;border:1px solid #999999;border-radius:15px;padding:8px 15px;cursor:pointer;font-weight:bold}
.myCancelBtn:hover{background:#f2f2f2}
.myCancelBtn:focus{outline:0 !important}
.myCancelBtn2{color:#737373;font-size:14px;font-weight:bold;border:1px solid #cccccc;border-bottom:1px dotted #a6a6a6;border-radius:5px;box-shadow:0 8px #808080;padding:7px 17px;background-color:#a6a6a6}
.myCancelBtn2:hover{background-color:#ccc}
.myCancelBtn2:active{background-color:#f2f2f2;box-shadow:0 5px #808080;transform:translateY(4px)}

.myLoginBtn:focus,.myCancelBtn:focus{outline:0 !important}
.firmwareBtnArea{margin:15px 0 20px 0;text-align:right;float:left;width:100%}
.firmwareBtn{font-size:14px;font-weight:bold;color:#ccc;cursor:pointer;padding:5px 10px;border:1px solid #ccc;background-color:#f2f2f2;border-radius:3px}
.firmwareBtn:hover{background-color:white}
.optionTickImg{margin-right:5px;width:20px;height:20px;display:inline-block;background-size:contain;background-image:url('../images/deviceSelectedIcon.png')}
.rainbowA{animation:rainBowAni 0.1s infinite}
.imgIcons{cursor:pointer}

#selectFindDeviceKeyWord div{margin:5px 0;color:#666}

@keyframes rainBowAni{0%{color:aqua}20%{color:aqua}21%{color:lime}40%{color:lime}41%{color:Yellow}60%{color:Yellow}61%{color:#ff00ff}80%{color:#ff00ff}81%{color:white}100%{color:white}}
.rotateX{-webkit-animation-name:spin;-webkit-animation-duration:300ms;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.rotateY{-webkit-animation-name:spin2;-webkit-animation-duration:300ms;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}.rotateZ{-webkit-animation-name:spin3;-webkit-animation-duration:150ms;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}
@keyframes spin2{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes spin3{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

#ieLoadingMask{position:fixed;top:0;left:0;z-index:999;width:100%;height:100%;background:rgba(0,0,0,0.3)}
#ieLoading{font-size:12px;padding:10px;background-color:#4d4d4d;border-radius:10px;text-align:center;position:relative;top:43%;border:1px solid #80BD00;margin:0 auto;width:66px}
.loader{border:4px solid #333;border-top:4px solid #66ff33;border-radius:50%;width:30px;height:30px;animation:spin 0.3s linear infinite;margin-left:8px;margin-bottom:5px}

@media only screen and (max-width:3840px){
.equipOverflow{height:190px;overflow-y:auto}
.equipPopupLeft{width:48%;margin-right:2%;float:left}
.equipPopupRight{width:48%;margin-left:2%;float:left}
.equipPopupLeft2{width:48%;margin-right:2%;float:left}
.equipPopupRight2{width:48%;margin-left:2%;float:left}
#menuLogo{display:block}
}

@media only screen and (max-width:1367px){
	
}

@media only screen and (max-width:1200px){
	.alertText{font-weight:normal}
	}
	
@media only screen and (max-width:1280px){
	#menuLogo{display:none}
	#idDiv_title_deviceList{display:none}
	}
	
@media only screen and (max-width:1024px){
	.equipOverflow{height:400px;overflow-y:auto}
	.equipPopupLeft2{width:100%;margin-right:0}
	.equipPopupRight2{width:100%;margin-left:0}
	}
	
@media only screen and (max-width:480px){
	
}

@media only screen and (max-width:414px){
	.dialogArea,.dialogArea2,.dialogArea3,.dialogArea9{width:300px}
	#procOpcAlarmArea{padding-top:70px !important}
	.step1{margin-top:55px}
	.routineBtn{margin-bottom:10px;width:120px;text-align:center}
}
	
@media only screen and (max-width:375px){
	.dialogArea,.dialogArea2,.dialogArea3,.dialogArea9{width:280px}
	}
	
@media only screen and (max-width:320px){
	
}