@import "../public/public.less";
@import "../public/header.less";

//开锁信息列表
.title{
	height: 48px;
	line-height: 46px;
	position: relative;
	font-size: @UNLOCKINFO-TITLE-FONTSIZE;
	padding-left: 42px;
	border-bottom: 2px solid @UNLOCKINFO-TITLE-BOTTOMBORDER;/*no*/
	~ .custom-swipe-list{
		top: 92px;
	}
}

/*
.u-list();

.custom-unlockInfo-list{
	position: absolute;
	top: 44px;
	bottom: 0;
	left: 0;
	height: auto;
	.u-list-scroll .u-list-row{	
		color: @UNLOCKINFOLIST-TEXT-COLOR;
		font-size: @UNLOCKINFOLIST-TEXT-FONTSIZE;
		padding: 18px 42px 8px;
		&:after{
	    	.white_gradient_border();			
		}
	}
	//上拉加载
	.u-list-load{
		.listLoad();
	}
	//list 无内容
	.u-list-tip{
		.bgImg("unlockNoCont.png");
	    background-position: top center;
	    background-repeat: no-repeat;
	    .background-size(70px 70px);
	    padding-top: 88px;
	    color: @LIST-NOCONTTIP-COLOR;
		font-size: @LIST-NOCONTTIP-FONTSIZE;
	}
}
*/

.u-swipe-list();

 .tab{
        .display-box();
        position: relative;
        border-bottom: 1px solid #575a6d;/*no*/
        li{
            .flex();
            text-align: center;
            height: 45px;
            line-height: 45px;
            position: relative;
            color: #575a6d;
            font-size: 16px;
            &:after{
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 2px /*except*/;
                background-color: transparent;
            }
        }
        .newMsg {
            &:before{
                content: '';
                position: absolute;
                top: 9px;
                right: 22px;
                width: 7px;/*no*/
                height: 7px;/*no*/
                border-radius: 50%;
                background-color: #fc2168;
                z-index: 3;
            }
        }
        .active{
            color: #fff;
            &:after{
                background-color: #FFF;
            }
        }
    }
    
.infoList-list{
    width: 100%;
    overflow: auto;
    position: absolute;
    top: 90px;
    bottom: 0;
    left: 0;
    .infoList-list-scroll .infoList-list-row{     
        position: relative;
        height: 55px;
        padding: 0 42px;
        .display-box();
        .box-vertical-alignment();
        .infoList-list-handle{
            .u-swipe-list-title{
                .text_oneRow_ellipsis();
                font-size: 16px;
            }
            .u-swipe-list-subtitle{
                .text_oneRow_ellipsis();
            }
        }
        .infoList-list-button{
            position: absolute;
            top: 0;
            bottom: 0;
            right: 25px;
            z-index: 1;
            .display-box();
            .box-vertical-alignment();
            .infoList-list-buttonCont{
                float: left;
                padding: 10px;
                margin: 0 5px;
                color: #00f8dd;
                font-size: 14px;
                img{
                    width: 23px;
                    height: 23px;
                }
            }
        }
        &:after{
            .defaultBorder();   
            .white_gradient_border();
        }
    }
    //上拉加载
    .infoList-list-load{
        text-align: center;
    }
    
    //list 无内容
    .infoList-list-tip{
        .transformV_center(left,0);
        width: 100%;
        text-align: center;
        .listNoCont("unlockNoCont.png",70px 70px);  
    }   
    
    //list 无历史记录
    .noHistory-list-tip{
        .listNoCont("noCont.png",70px 70px);
    } 
}

//绑定开锁信息
.opendoorMode{
	border: solid #50515d;
    border-width: 2px 0;/*no*/
    overflow: hidden;
}

.modeSelect{
    padding: 10px 42px;
    font-size: 0;
    margin: 0 -12px;	
    position: relative;
    li{	
		color: #00ffff;
	    font-size: 14px;
		border: 1px solid;/*no*/
		position: relative;
		width: 80px;
	    display: inline-block;
	    text-align: center;
	    line-height: 1;
	    padding: 8px 0;
	    border-radius: 5px;
	    margin: 10px 12px;
	    &:before{
	    	content: '\e631';
	    	position: absolute;
	    	top: 50%;
	    	.transform(translate(-16px,-50%));
	    	.iconfont(15px);
	    	display: none;
	    }
	    &.active{
	    	background-color: #153D4C;
			&:before{
				display: inline-block;
			}
	    }			
	}
}

.u-select();

.custom-select{
    position: absolute;
    top: 266px;
    bottom: 211px;
    left: 0;
    height: auto;
	.u-select-scroll{
		.u-select-row{
		    display: block;
		    font-size: 16px;
		    padding: 22px 80px 11px 42px;
		    .u-select-title{
		    	float: left;
		    	margin-right: 36px;
		    }
		    &:before{
		    	content: '\e6a9';
		    	top: auto;
		    	bottom: 9px;
		    	right: 42px;
		    	font-family: iconfont;
		    	color: #00ffff;
		    	.transform(none);
		    	display: block;
		    }
		    &:after{
		    	.white_gradient_border();
		    }
		    &.active:before{
		    	content: '\e6aa';
		    }		    			
		}
	}
	.u-select-load{
		.listLoad();
	}
	.u-select-tip{
    	top: 80px;
		.transform(none);
		.listNoCont("noCont.png",45px 45px,inherit,57px);
	}
}

.position{
    position: absolute;
    bottom: 122px;
    left: 0;
    width: 100%;	
}

.tip{
    text-align: center;
    color: #A0A0A7;	
}

.u-switch();

.custom-setHijack-switch{
	width: 200px;
	height: auto;
	text-align: center;
	color: #00ffff;
	margin: 27px auto 0;
	padding: 10px 0;
	.u-switch-handle{
		position: relative;
		top: auto;
		left: auto;
		.transform(none);
		width: 17px;
		height: 17px;
		border: 0;
		border-radius: 0;
		display: inline-block;
		vertical-align: middle;
		margin-right: 6px;
		&:before{
			.iconfont(17px);
			top: 0;
			width: auto;
			height: auto;
			border-radius: 0;
			background-color: transparent;
			.box-shadow(none);
		}
	}
	.u-switch-text{
		display: inline-block;
		vertical-align: middle;
	}
	&.u-switch-on .u-switch-handle{
		background-color: transparent;
		&:before{
			content: '\e6aa';
			left: 0;
		}
	}
	&.u-switch-off .u-switch-handle{
		background-color: transparent;
		&:before{
			content: '\e6a9';
			left: 0;
		}
	}
}

.u-button();

.custom-button{
	.button();
    .buttonPosition();
}

.guide-dialog{
    .mask(1051,@CUSTOM-BACKDROP-BG);
    .guideStep1{
        position: absolute;
        top: 46px;
        left: 0;
        width: 100%;
        .modeSelect:after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            width: 360px;
            height: 100%;
            margin: 0 auto;
            border: 2px dashed;/*no*/
            border-radius: 5px;
        }
        .guideStep1Tip{
            .bgImg("guideArrow1.png");
            background-position: 190px top;
            background-repeat: no-repeat;
            .background-size(24px 57px);
            padding-top: 64px;
            margin-top: -2px;
            font-size: 19px;
            font-family: tipFont;
            text-align: center;                             	
        }
    }
    .guideStep3{
        position: absolute;
        top: 147px;
        left: 0;
        width: 100%;
        .guideStep3Tip{
            .bgImg("guideArrow3.png");
            background-position: 184px bottom;
            background-repeat: no-repeat;
            .background-size(16px 65px);
            padding-bottom: 77px;
            margin-bottom: -2px;
            font-size: 19px;
            font-family: tipFont;
            text-align: center;     
		    line-height: 23px; 
		    span{
		    	color: #00ffff;
		    }       	
        }
        .guideStep3Cont{
        	position: relative;
        	padding-bottom: 7px;
        	ul{
        		li{
				    font-size: 16px;
				    padding: 22px 80px 11px 42px;
				    position: relative;
				    p{
				    	&:nth-child(1){
					    	float: left;
					    	margin-right: 36px;
					    	.text_oneRow_ellipsis();
				    	}
				    	&:nth-child(2){
				    		overflow: hidden;
				    		.text_oneRow_ellipsis();
				    	}
				    }
				    &:before{
				    	content: '\e6a9';
				    	position: absolute;
				    	bottom: 9px;
				    	right: 42px;
				    	.iconfont(25px);
				    	color: #00ffff;
				    }
				    &:after{
					    content: '';
					    position: absolute;
					    bottom: 0;
					    left: 0;
					    right: 0;
					    height: 1px;/*no*/
						.white_gradient_border();
				    }
				    &.active:before{
				    	content: '\e6aa';
				    }      			
        		}
        	}
            //虚线框
            &:after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                width: 360px;
                height: 100%;
                margin: 0 auto;
                border: 2px dashed;/*no*/
                border-radius: 5px;
            }      	
        }
    }
    .guideStep5{
        position: absolute;
        bottom: 116px;
        left: 0;
        width: 100%; 	
    	.guideStep5Tip{
            .bgImg("guideArrow4.png");
            background-position: 164px bottom;
            background-repeat: no-repeat;
            .background-size(39px 179px);
            padding-bottom: 188px;
            margin-bottom: -3px;
            font-size: 19px;
            font-family: tipFont;
            text-align: center;     
		    line-height: 23px;     		
    	}
    	.guideStep5Cont{
    		position: relative;
    		p{
    			text-align: center;
    			position: relative;
    			color: #00ffff;
    			padding: 17px 0;
				&:before{
					content: '\e6a9';
					.iconfont(17px);
					display: inline-block;
					vertical-align: middle;
					margin-right: 9px;
    			}
			    &.active:before{
			    	content: '\e6aa';
			    }
    		}
            //虚线框
            &:after{
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                width: 360px;
                height: 100%;
                margin: 0 auto;
                border: 2px dashed;/*no*/
                border-radius: 5px;
            }        		
    	}
    }
    .guideStep2,
    .guideStep4,
    .guideStep6{
        position: absolute;
        bottom: 65px; 
        left: 0;
        width: 100%;
    }
    .custom-dialog-button{
        .button(200px);
    }  
}  

.mediaPosition(true,true,true);   