@charset "UTF-8";
/*
* 响站通用css
*/


/**
 * 新表单
 */

/*表单分类*/
.classly+.classly,
.formList+.classly{
    margin-top:32px;
}
.classlyhead{
    display:block;
    border-top:1px solid #e1e1e1;
    margin:40px 0 16px;
}
.classlytitle{
    display:block;
    line-height:48px;
    font-size:12px;
    color:#999;
}
.classlytitle i{
    display:inline-block;
    font-size:12px;
    width:32px;
    float:right;
    text-align:center;
    -webkit-transition:transform .3s ease 0s;
    -moz-transition:transform .3s ease 0s;
    -ms-transition:transform .3s ease 0s;
    -o-transition:transform .3s ease 0s;
    transition:transform .3s ease 0s;
}
.classlytitle.active i{
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.classlytitle.active i:before{
    content:"\e214";
}

.formList{
    line-height:40px;
    position:relative;
}
.formList+.formList,
.classly+.formList,
.moreForm+.formList{
    margin-top:32px;
}
.formList.noMargin{
    margin-top:0 !important;
}
.formList.mt8{
    margin-top:8px !important;
}
.formListL{
    width:160px;
    float:left;
    padding-right:24px;
    text-align:right;
}
.formListR{
    margin-left:160px;
    position:relative;
    padding-right:24px;
}
.formList .inputBar{
    width:320px;
}
.submitList{
    margin-top:40px;
}
.formList .infoRow{
    background-color:#fafafa;
    line-height:24px;
    padding:8px;
    border-radius:2px;
    border:1px dotted #ccc;
}

/*提示*/
.formTip{
    margin-top:8px;
    line-height:1.2;
    color:#999;
    font-size:12px;
}

/*下拉框*/
.formList .fancySelect{
    width:320px !important;
    line-height:38px;
}
.formList .fancySelectBtn{
    color:#666;
}

.formList .fancySelectBtn .xzicon-arrow-b{
    color:#ccc;
    font-size:12px;
}

/*普通按钮*/
.formBtn{
    padding:0 12px 0 12px;
    color:#666 !important;
    font-size:14px;
    border-radius:2px;
    display:inline-block;
    vertical-align:top;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.formBtn:active{
    background-color:#f6f6f6;
}

.formList[role="expandSelect"] .formBtn.inputBar,
.formList.expandSelect .formBtn.inputBar{
    border:1px solid #eee;
    position:relative;
}
.formList[role="expandSelect"] .formBtn.inputBar:after,
.formList.expandSelect .formBtn.inputBar:after{
    content: "\e154";
    font-family:xzicon;
    color:#ccc;
    display:inline-block;
    width:40px;
    position:absolute;
    right:0;
    top:0;
    text-align:center;
    font-size:12px;
}

/*表单按钮*/
.formBtn.inputText{
    border:0 none !important;
    cursor:pointer;
}
.iconBtnBox{
    position:relative;
    color:#666;
}
.iconBtnBox.inputBar{
    border:1px solid #eee;
}
.iconBtnBox .iconBtn{
    width:40px;
    font-size:20px;
    display:inline-block;
    text-align:center;
    position:absolute;
    left:0;
    top:0;
    color:#999;
}
.iconBtnBox .inputText,
.iconBtnBox .textInput{
    padding-left:40px;
    width:100%;
}
.iconBtnBox .dialog.picker{
    width:320px !important;
}

/*添加按钮*/
.addFormRow{
    line-height:32px;
    display:block;
    margin-top:8px;
    padding:4px 0;
}
.addFormRow:first-child{
    margin-top:0;
}
.addFormRow span{
    display:inline-block;
    vertical-align:top;
}
.addFormRow .addIcon{
    display:inline-block;
    vertical-align:middle;
    width:30px;
    height:30px;
    line-height:30px;
    border-radius:50%;
    text-align:center;
    border:1px solid #ccc;
    font-size:16px;
    color:#ccc;
}
.addFormRow .addText{
    margin-left:16px;
    color:#999;
    font-size:14px;
}

/*等于行*/
.formEqualList{
    border:1px solid #e1e1e1;
    border-radius:2px;
    position:relative;
    text-align:center;
}
.formEqualList span{
    display:inline-block;
    vertical-align:top;
}
.formEqualList span:not(.center){
    width:50%;
}
.formEqualList .left{
    padding-right:20px;
    float:left;
}
.formEqualList .right{
    padding-left:20px;
    float:right;
}
.formEqualList .center{
    width:40px;
    height:40px;
    line-height:39px;
    font-size:12px;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-20px;
}
.formEqualList .inputText,
.formEqualList .textInput{
    border:0 none !important;
    background-color:transparent;
    text-align:center;
    width:100%;
}

/*链接*/
.selectLinkBtn{
    display:inline-block;
    text-align:center;
    font-size:18px;
    width:40px;
    height:40px;
    line-height:40px;
    color:#666;
}

/*时间日期行*/
.formDateList{
    border:1px solid #e1e1e1;
    border-radius:2px;
    display:table;
    position:relative;
}
.formDateList .deleteBtn{
    display:none;
    width: 40px;
    height: 40px;
    line-height: 42px;
    text-align: center;
    padding: 0;
    vertical-align: top;
    position:absolute;
    right:-40px;
    top:0;
}
.formDateList .deleteBtn i{
    display:inline-block;
    color: #fff;
    background-color: #ddd;
    border-radius:50%;
    font-size:12px;
    width:24px;
    height:24px;
    line-height:24px;
    -webkit-transform:scale(0.8);
    -moz-transform:scale(0.8);
    -ms-transform:scale(0.8);
    -o-transform:scale(0.8);
    transform:scale(0.8);
}
.formDateList.showEmpty .deleteBtn{
    display:block;
}
.formDateList .iconBtnBox{
    display:table-cell;
    width:50%;
    color:#666;
}
.formDateList .iconBtnBox+.iconBtnBox .iconBtn{
    left:0;
}

/*带操作图标按钮*/
.formBtnBox{
    display:inline-block;
    white-space:nowrap;
}
.formBtnBox .button{
    opacity:0;
    visibility:hidden;
    width:40px;
    height:40px;
    line-height:39px;
    text-align:center;
    color:#666;
    padding:0;
    vertical-align:top;
}
.formBtnBox .button i{
    margin-right:0;
    font-size:18px;
}

/*域名*/
.domainInputBox{
    position:relative;
    padding-right:0;
}
.domainInputBox .formSuffix{
    position:absolute;
    right:0;
    top:0;
    width:115px;
    padding-right:8px;
    text-align:right;
}
.domainInputBox .inputText,
.domainInputBox .textInput{
    width:100%;
    padding-right:120px;
}

/*颜色输入框*/
.colorInput{
    position:relative;
}
.colorInput > .colorBar{
    width:20px;
    height:20px;
    border-radius:20px;
    position:absolute;
    left:10px;
    top:10px;
    border:1px solid #eee;
}
.colorInput .inputText,
.colorInput .textInput{
    width:100%;
    padding-left:40px;
}

@media(max-width:768px){
    /*表单分类*/
    .classly+.classly,
    .formList+.classly{
        margin-top:32px;
    }
    .classlyhead{
        margin:32px 16px 8px;
    }
    .classlyMain{
        margin-top:16px;
    }

    .formList + .formList{
        margin-top:24px;
    }
    .formListL{
        color:#000;
        width:auto;
        text-align:left;
        padding-right:0;
    }
    .formListR{
        margin-left:0;
    }
    .formList:not(.rightList):not(.arrowList) .formListL{
        float:none;
        line-height:24px;
        font-size:12px;
        padding:0 16px;
    }
    .formList:not(.rightList):not(.arrowList) .formListR{
        padding:0 16px;
    }

    /*右对齐行*/
    .formList.rightList .formListR{
        padding-right:16px;
    }
    .formList.rightList .formListR:not(.formHScroll){
        float:right;
    }
    .formList.rightList .formListL{
        padding:0 0 0 16px;
        width:100px;
    }
    .formList.rightList .formListR.tipsListR,
    .formList.arrowList .formListR.tipsListR{
        padding:0 16px;
    }
    .wordNumber8 .formList.rightList .formListL{
        width:130px;
    }

    /*箭头行*/
    .formList.arrowList .formListL{
        width:120px;
        position:absolute;
        left:0;
        top:0;
        z-index:5;
        padding-left:16px;
    }
    .formList.arrowList .formListR:not(.tipsListR){
        text-align:right;
        padding-right:0;
    }


    /*输入框*/
    .formList .inputBar{
        width:100%;
        padding:0;
    }
    .formList .fancySelect{
        width:100% !important;
    }
    .formList .inputBar.formBtn{
        display:block;
    }
    .formList .inputText,
    .formList .textarea{
        border:0 none;
        border-radius:0;
        border-bottom:1px solid #e1e1e1;
    }
    .formList .textarea{
        height:70px;
        padding:14px 0;
    }
    .formList .textarea.inputBar{
        width:100% !important;
    }

    /*单选，多选*/
    .formList .circleLabel,
    .formList .hookLabel{
        vertical-align:middle;
    }
    .formList .circleText,
    .formList .hookText{
        line-height:31px;
        height:32px;
        display:inline-block;
        padding-left:0;
        min-width:72px;
        text-align:center;
        background-color:#f6f6f6;
        border:1px solid #f6f6f6;
        font-size:12px;
        color:#999;
        -webkit-box-sizing:border-box;
        -mos-box-sizing:border-box;
        box-sizing:border-box;
    }
    .formList .circleText{
        border-radius:16px;
        padding:0 12px;
    }
    .formList .hookText{
        border-radius:2px;
        padding:0 24px;
        position:relative;
        -webkit-transition:padding .3s ease;
        -moz-transition:padding .3s ease;
        -ms-transition:padding .3s ease;
        -o-transition:padding .3s ease;
        transition:padding .3s ease;
    }
    .formList .circle,
    .formList .hookBox{
        display:none;
    }
    .formList .circleLabel+.circleLabel,
    .formList .hookLabel+.hookLabel{
        margin-left:8px;
    }
    .formList .hookText:before{
        content: "\e250";
        font-family:xzicon;
        display:inline-block;
        text-align:center;
        width:16px;
        height:16px;
        line-height:16px;
        font-size:12px;
        position:absolute;
        top:50%;
        left:12px;
        margin-top:-8px;
        -webkit-transition:transform .3s ease;
        -moz-transition:transform .3s ease;
        -ms-transition:transform .3s ease;
        -o-transition:transform .3s ease;
        transition:transform .3s ease;
        -webkit-transform:scale(0);
        -moz-transform:scale(0);
        -ms-transform:scale(0);
        -o-transform:scale(0);
        transform:scale(0);
    }
    .formList input[type="radio"]:checked ~ .circleText,
    .formList input[type="checkbox"]:checked ~ .hookText{
        background-color:transparent;
        border-color:#dd0000;
        color:#dd0000;
    }
    .formList input[type="checkbox"]:checked ~ .hookText{
        padding:0 16px 0 32px;
    }
    .formList input[type="checkbox"]:checked ~ .hookText:before{
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        -o-transform:scale(1);
        transform:scale(1);
    }

    /*链接*/
    .formList.linkList .selectLinkBtn{
        position:absolute;
        top:0;
        right:0;
    }
    .formList.linkList .formListR{
        position:relative;
        padding-right:40px !important;
    }

    /*提示行*/
    .formListR.tipsListR{
        width:100%;
    }

    /*按钮*/
    .formList.arrowList .formBtn{
        background-color:transparent;
        border:0 none !important;
        position:relative;
        padding:0 40px 0 120px;
    }
    .formList.arrowList .formBtn.inputBar:after{
        content: "\e104";
        font-family:xzicon;
        width:32px;
        color:#ccc;
        font-size:12px;
        text-align:center;
        position:absolute;
        right:8px;
        top:0;
    }
    .formList.arrowList .formBtn:active{
        background-color:#f6f6f6;
    }

    .formList .addFormRow{
        padding:8px 0;
    }

    /*带操作图标按钮*/
    .formBtnBox{
        width:100%;
        position:relative;
    }
    .formBtnBox.active{
        padding-right:40px;
    }
    .formBtnBox .button{
        display:none;
        opacity:1;
        visibility:visible;
        position:absolute;
        right:0;
        top:0;
    }
    .formBtnBox.active .button{
        display:block;
    }
    .formBtnBox .formBtn{
        width:100%;
        background-color:transparent;
        padding:0 12px;
    }

    /*等于*/
    .formEqualList{
        border:0 none;
    }
    .formEqualList .inputText{
        border-bottom:1px solid #e1e1e1 !important;
    }
    .formEqualList .inputText:focus{
        border-bottom-color:#111 !important;
    }


    /*域名*/
    .domainInputBox .formSuffix{
        right:16px;
    }

    /*日期时间*/
    .formList .formDateList,
    .formDateList .formBtn{
        border:0 none;
    }
    .formList .formDateList.showEmpty{
        padding-right:40px;
    }
    .formDateList .deleteBtn{
        right:0;
    }


    .iconBtnBox .iconBtn{
        font-size:18px;
    }

    /*横行滚动*/
    .formHScroll{
        height:40px;
        white-space: nowrap;
        position: relative;
        overflow:hidden;
    }
    .formHScrollBox{
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 30px;
        -webkit-overflow-scrolling: touch;
        height: 100%;
    }

    /*颜色*/
    .colorInput .inputText{
        padding-left:40px;
    }
}