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

.u-list();

.custom-list{
	position: absolute;
	top: 44px;
	bottom: 0;
	left: 0;
	height: auto;	
	.u-list-scroll .u-list-row{		
		height: 75px;
		padding: 0 38px 0 41px;
		.u-list-left-bg-image{
		    width: 30px;
		    height: 30px;
		    .background-size(cover);
		    background-position: center;
			margin-right: 33px;
		}
		.u-list-left-bg-image_1{
		    .bgImg("green_opendoor1_icon.png");
		}
		.u-list-left-bg-image_2{
            .bgImg("green_opendoor2_icon.png");
        }
        .u-list-left-bg-image_3{
            .bgImg("green_opendoor3_icon.png");
        }
        .u-list-left-bg-image_4{
            .bgImg("green_opendoor4_icon.png");
        }
        .u-list-left-bg-image_5{
            .bgImg("green_opendoor5_icon.png");
        }
        .u-list-left-bg-image_30{
            .bgImg("green_opendoor30_icon.png");
        }
        
        .u-list-left-bg-alarm_1{
            .bgImg("green_alarmInfo1_icon.png");
        }
        .u-list-left-bg-alarm_2{
            .bgImg("green_alarmInfo2_icon.png");
        }
        .u-list-left-bg-alarm_3{
            .bgImg("green_alarmInfo3_icon.png");
        }
        
        .u-list-left-bg-hijack{
            .bgImg("green_hijackMode20_icon.png");
        }
        
		.u-list-title{
			font-size: @CUSTOM-LIST-COMPONENT-TITLE-FONTSIZE;
			line-height: 20px;
		}
		.u-list-right-text{
			font-size: @CUSTOM-LIST-COMPONENT-RIGHTTEXT-FONTSIZE;
			word-wrap: break-word;
			width: 65px;
			line-height: 14px;
		}
		&:after{
			.white_gradient_border();
		}
	}
	.u-list-load{
		.listLoad();
		.u-list-load-animation{
		    width: 24px;
            height: 24px;
            display: inline-block;
            .bgImg("loading.png");
            -webkit-animation: refresh 1s steps(8, end) infinite;
            animation: refresh 1s steps(8, end) infinite;
            background-size: cover;
            vertical-align: middle;
		}
	}
	.u-list-tip{
		.listNoCont();
	}
}

@-webkit-keyframes refresh {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}
@keyframes refresh {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}

.notice{
	height: 62px;
	line-height: 62px;
	border-bottom: 2px solid #50515D;/*no*/
    text-align: center;
    color: #00ffff;
    font-size: 12px;
    > span{
    	color: #fc2168;
    	.iconfont(20px);
	    vertical-align: middle;
	    margin-right: 9px;
    }	
    p{
    	display: inline-block;
	    color: #00ffff;		
	    font-size: 12px;
	    line-height: 1;
	    border-bottom: 1px solid;/*no*/
	    padding-bottom: 1px;/*no*/
	    margin-left: 24px;
	    // >>
	    span{
	    	margin-left: 6px;
	    	&:before{
				content:'\e6c4';
				.iconfont(12px);	 
			}   
	    }    	
    }
	~ .custom-list{
		top: 106px;
	}	
}