@charset "UTf-8";
/*Page CSS*/
.main{
    width:1200px;
    height:100%;
    margin:0 auto;
}
/* 0-1199 */
@media screen and (max-width:1199px){
    .main{
        width:100%;
        padding:0 1vw;
    }
    .wrap {
        width:100%;
        border: 0;
        margin: 50px auto 0;
    }
}
/* 0-767 */
@media screen and (max-width:767px){
    .main{
        padding:0 2vw;
    }
}
/* 1 Header */
.page-header{
    width: 100%;
    height:75px;
    background:#f6f6f6;
}
.page-header .main{
    position: relative;
}
/* 1.1 logo */
.page-header .header-img{
    display: inline-block;
    height:100%;
    width:50%;
    max-width: 178px;
    background-color: #f6f6f6;
    background-size: contain;
    background-position:center;
    background-repeat: no-repeat;
}
/* 1.2 Right Name */
.header-tel{
    display: flex;
    float: right;
    max-height: 75px;
    height: 100%;
}
.header-tel *{
    display: block;
    line-height: 75px;
}
.header-tel *:not(:last-child)::after{
    content:"|";
    display: inline-block;
    margin:0 10px;
}

.header-tel .tel-name{
    /*background: url(../images/r2.png) no-repeat center left;*/
    /*padding-left: 30px;*/
    /*padding-right:15px;*/
}
.header-tel a{
    color:#0080b5;
}
/* 1.5 Guide */
.header-nav{
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #f1f1f1;
    overflow: hidden;
}
.header-nav ul{
    display: flex;
}
.header-nav li a{
    display: block;
    text-align: center;
    font-size: 16px;
    padding: 0 20px;
    min-width: 70px;
    transition:all 0.4s ease;
}
.header-nav li a.on,.header-nav li:hover a{
    background:#0080b5;
    color:#fff;
}
/* 2 Bottom */
.page-footer{
    width: 100%;
    padding:20px 0;
    background:#f6f6f6;
    line-height: 180%;
    text-align: left;
    margin-top:20px;
}
.page-footer .main{
    display: block !important;
}
.page-footer a{
    color:#0080b5;
}

.this{
    margin-top:20px;
}
.this .main{
    display: flex;
}
/* 3 Menu Big */
.this .page-side{
    width:240px;
    margin-right: 20px;
}
.this .page-side ul{
    border-radius: 5px;
    background:#f6f6f6;
}
.this .page-side li:first-child a{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.this .page-side li:last-child a{
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.this .page-side a{
    display: flex;
    padding:0 20px;
    height:80px;
    line-height: 80px;
}
.this .page-side .on a,
.this .page-side  a:hover{
    color:#fff;
    background: #0080b5;
}
.this .page-side span{
    display: inline-block;
    height:80px;
    line-height: 80px;
    margin-left: 13px;
    font-size: 15px;
    white-space: nowrap;
}
/* 3 Content */
.this .con{
    width:calc(100% - 250px);
    border-radius: 5px;
    /* border: 1px solid #f1f1f1; */
}
/* 4 tab html(info numbers setting) */
.tab-nav{
    /* height: 55px; */
    line-height: 52px;
    padding-left: 4px;
}
.tab-nav span{
    display: inline-block;
    height: 52px;
    cursor: default;
}
.nobor.tab-nav span.on{
    border-bottom:0;
    font-size:18px;
}
/* 5.1 Blue background html(numbers) */
.bd-top{
    background: #d1e3ee;
    padding: 18px 1rem;
    height: auto;
}
.bd-top>p#form-se{
    margin-left:0 !important;
}
.bd-top>p#form-se i{
    margin-left:5px;
}
/* 5.2 Gray background */
.bg-top{
    background: #f7f8fa;
    padding: 30px 20px;
    margin-bottom: 10px;
    margin-top:10px;
}
/* 9 */
.msg{
    color: #f08400;
    padding: 5px 0 10px;
    line-height: 30px;
}
.msg a{
    color: #0080b5
}
/* 6 layui form html(info numbers setting) */
.con label .layui-input-block,.con .label .layui-input-block{
    display: inline-block;
    width: 100%;
}
.con .layui-form-label{
    padding:0;
    width: auto;
    text-align: left;
    white-space: nowrap;

}
.con .layui-input-block{
    margin-left:0
}
.con .layui-form-select{
    width: 80%;
}
.con .layui-form-select  input{
    width: 100% !important;
}
.con .layui-form-item{
    margin-bottom:0
}
/* 7 btn html(info numbers)*/
.form-btn{
    background-color: #fff;
    height: 30px;
    border: 1px solid #0080b5;
    line-height: 28px;
    text-align: center;
    color: #0080b5;
    font-size: 14px;
    padding: 0 30px 0 30px;
    display: inline-block;
    cursor: pointer;
    transition: all linear 0.2s;
    white-space: nowrap;
    margin-right: 10px!important;
}
.form-btn:hover{
    background-color:#0080B5;
    color:#fff;
}
.remind-sms{
    background-color: #fff;
    height: 30px;
    border: 1px solid #F08400;
    line-height: 28px;
    text-align: center;
    color: #F08400!important;
    font-size: 14px;
    padding: 0 30px 0 30px;
    display: inline-block;
    cursor: pointer;
    transition: all linear 0.2s;
    white-space: nowrap;
    margin-top: 10px;
}
.remind-sms:hover{
    background-color:#F08400;
    color: #ffffff !important;
}
/* 8 part html(setting extension) */
.part .msg{
    padding: 0 21px;
    margin: 15px 0;
}
.part [class*=part]>h6{
    padding:15px 21px;
    font-size: 16px;
    line-height: 200%;
    border-bottom: 1px solid #ededed;
    position: relative;
}
.part [class*=part]>h6::after{
    content: "";
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:100;
}
.part [class*=part]>h6 i{
    display: inline-block;
    margin-right: 10px;
    transform: rotate(-90deg);
    transition:all 1s ease;
}
.part [class*=part]>h6.on i{
    transform: rotate(0)
}
.part [class*=part]>h6 p{
    padding:0 !important;
    font-weight: normal;
    margin:0 !important;
}
.part .part-con{
    display: none;
    padding:21px;
    color: #666
}
.part .part-con>div{
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
}
/* 10 Form html(logo  register )*/
.login-con{
    border: 1px solid #e5e5e5;
    margin: 50px auto 0;
}
    /* Form top  html(logo  register )*/
.top .bd input {
    font-size: 14px;
    border: 0;
    line-height: 30px;
    height: 30px;
    outline: none;
    color: #999;
    width: 100%;
    background: none;
}
.top .bd li {
    font-size: 14px;
    letter-spacing: -0.05rem;
    /* height: 32px; */
    line-height: 32px;
    margin-bottom: 20px;
}
.top .bd li.border {
    border: 1px solid #e5e5e5;
    padding-left: 10px;
}
.top .bd .li3 {
    margin-bottom: 20px;
}

.top .bd .li2 .lf {
    width: 189px;
    border-right: 1px solid #e5e5e5;
    height: 32px;
}
.top .bd .li2 input {
    width: 100%;
}
    /* Login Bottom  html(logo  register )*/
.bottom{
    padding-left: 100px;
    color: #0080b5;
    border-top: 1px solid #e5e5e5;
}
.bottom p{
    line-height: 68px;
    background: url(/static/ext/icon/01.png) no-repeat left center;
    text-indent: 26px;
}
/* 11 Select √  html(list users recording.list listConsume) */
.checBox{
    width: 18px;
    height: 18px;
    background: url(/static/ext/icon/check.png) no-repeat right center;
    display: inline-block;
    position: relative;
    margin-right: 3px;
}
.onCheck {
    background-position: 0 0;
}
.checBox input{
    position: absolute;
    width: 18px;
    height: 18px;
    opacity: 0;
    left: 0;
    top: 0;
}
/* 12 Blue Search  html(list users recording.list listConsume) */

.search-box .label{
    display: flex;
}
.search-box .label,
.search-box span{
    height:30px;
    line-height: 30px;
}
.search-box span{
    margin:0 5px;
}
.search-box input{
    padding: 6px;
    height: auto;
    line-height: normal;
}

/* 13 List html(list users recording.list listConsume) */
.search-box .form-btn{
    margin-left:15px;
}
/* Tools */
.list-tools{
    /* height: 40px; */
    color: #565656;
    font-size: 14px;
    line-height: 40px;
    padding-left: 1rem;
    border-bottom:1px solid #ededed
}
.list-tools i{
    margin-right:5px;
}
.list-tools a{
    display: inline-block;
    margin-right: 25px;
}
.list-tools a:hover{
    color:#0080B5
}
.list-list .checBox{
    margin:11px 0;
}
/* List */
.list-list li{
    display: flex;
    /* height:40px; */
    line-height: 40px;
    border-bottom:1px solid #ededed;
    padding:5px 1rem;
}
.list-list li.list-title{
    background: #f7f8fa;
}
.list-list li.has-data{
    display: none;
    padding: 20px 0!important;
    height: 95px!important;
}

.list-data .no-data{
    text-align: center;
    width: 100%;
}
.list-data .no-data p{
    text-align: center;
    width: 100%;
}
.list-list li>p{
    width: 100%;
    text-align: center;
}
.list-list li div{
    display: inline-block;
    height:40px;
    text-align: left;
    line-height: 40px;
}
.list-list li div:nth-child(1) {
    width: 50px;
}
.list-list li div:nth-child(2) {
    width: 80px;
}
.list-list li div:nth-child(3) {
    width: 130px;
}
.list-list li div:nth-child(4) {
    width: 120px;
}
.list-list li div:nth-child(5) {
    width: 160px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    padding-right: 5px;
}
.list-list li div:nth-child(6){
    width: 60px;
}
.list-list li div:nth-child(7){
    width: 70px;
}
.list-list li div:nth-child(8) {
    width: 120px;
}
.list-list li div:nth-child(9) {
    width: 145px;
}
/* Data List */

.list-data li:hover{
    background: #f7f8fa;
    cursor: default;
}
.list-data li.unread{
    background-color: #d1e3ee;
}
.list-data div{
    color: #565656;
}
.list-data div .checBox{
    vertical-align: middle;
}
.list-data div s,
.list-data div small{
    line-height: 1;
    height: auto;
    display: block;
    height:20px;
    line-height: 20px;
}
.list-data div small{
    font-size: smaller;
    height: 23px;
    overflow: hidden;
    color: #999;
}
.sms-type{
    color: #fff;
    display: inline-block;
    background-color: #999;
    border-radius: 3px;
    padding: 0 5px;
    line-height: 25px;
    height: 25px;
}
.mms-type{
    color: #fff;
    display: inline-block;
    background-color: #0080b5;
    border-radius: 3px;
    padding: 0 5px;
    line-height: 25px;
    height: 25px;
}
.vm-type{
    color: #fff;
    display: inline-block;
    background-color: #f08400;
    border-radius: 3px;
    padding: 0 5px;
    line-height: 25px;
    height: 25px;
}

.list-data div .btn-type{
    color: #fff;
    display: inline-block;
    background-color: #999;
    border-radius: 3px;
    padding: 0 5px;
    line-height: 25px;
    height: 25px;
}
.list-data div .btn-type{
    background-color: #666;
}
.list-data div .group-ext-pre {
    display: inline-block;
    width:26px;
    height:26px;
    margin-top:7px;
    /* text-align: center; */
    line-height: 26px;
    background-color: #f08400;
    padding: 0 8px;
    border-radius: 15px;
    color: #fff;
}
.list-data div .user-ext{
    background-color: #0080b5;
    padding: 5px 10px;
    border-radius: 15px;
    color: #fff;
}
.list-data div.us-icon:before {
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    top: .15rem;
    content: "";
    text-align: center;
    line-height: 15px;
    margin-right:5px;
}
.list-data div.available:before {
    background: #63c46b;
}
.list-data div.invisible:before {
    background: #555;
}
.list-data div .vm-type{
    color: #fff;
    display: inline-block;
    background-color: #f08400;
    border-radius: 3px;
    padding: 0 5px;
    line-height: 25px;
    height: 25px;
}
.list-data div em{
    display: inline-block;
    color: #fff;
    background-color: #666;
    border-radius: 3px;
    padding: 0 5px;
    line-height: 25px;
    height: 25px;
    font-weight: normal;
    position: relative;
}
.list-data div em::after{
    content: "";
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:5;
}

.list-data div em:hover{
    background-color: #0080B5
}
.list-data div em.rp-free{
    background-color: #0080b5;
}
/* 15  */
/* Page */
#page-box{
    float: right;
    margin:20px;
}

@media screen and (max-width:767px) {
    .ant-tone-btn{
        margin-left: 0 !important;
    }
}

@media screen and (max-width:1179px){
}
@media screen and (max-width:1150px){
    /* 13 List html(list users recording.list listConsume) */
    .list-list {
        overflow-x:scroll;
    }
    .list-list ul{
        min-width: 915px;
    }
    .list-list li>p{
        text-align: left;
    }
    .list-tools a{
        font-size: 1rem;
        margin-right: 0.8rem;
    }
    /* 15 Page */
    #page-box{
        margin:0rem;
    }
    /* #page-box .layui-laypage a,  #page-box .layui-laypage span{
        padding:0 0.3rem;
    } */
}
@media screen and (max-width:969px){
    /* 10  html(logo  register )*/
    .bottom{
        padding-left:200px;
    }
}
@media screen and (max-width:767px){
    /* 1.1 logo */
    .page-header .header-img{
        width:25%;
        position: absolute;
        top:0;
        left: 2vw;
        z-index:5;
    }
    /* 1.2 Right */
    .page-header .header-right{
        position: absolute;
        z-index: 1000003;
        top: 0;
        left: 0;
        width: 100%;
        height: 75px;
    }
    .page-header .header-right>div{
        position: relative;
        height: 100%;
    }
    /* 1.2.1 Name */
    .page-header .header-tel{
        display: none;
        font-size: 14px;
    }
    .show.header-tel{
        display: flex;
        height:75px;
        background:#fff;
        width:100%;
        padding:0 10px;
        float: none;
        position: absolute;
        top:0;
        left:0;
        z-index: 20
    }
    /* 1.2.2 Three */
    .page-header .header-top {
        display: inline-block;
        margin:18px ;
        position: absolute;
        right: 0;
        top:0;
        z-index:5;
    }
    .page-header .header-top div{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:999;
    }
    .page-header .header-top span{
        display: block;
        min-width: 30px;
        height: 3px;
        margin: 7px auto;
        background:#898787;
    }
    /* 1.2.3 Close */
    .show+.header-close{
        display: block;
    }
    .header-close{
        display: none;
        position: absolute;
        z-index: 1000003;
        top: 0;
        right: 20px;
        width: 30px;
        height: 100%;
    }
    .header-close span{
        width: 30px;
        max-width: 30px;
        height: 3px;
        background: #898787;
        display: block;
        position: absolute;
        top: 50%;
    }
    .header-close span:first-child{
        transform: rotate(45deg) translate(-1px,-50%);
    }
    .header-close span:last-child{
        transform: rotate(-45deg) translate(1px,-50%);
    }
    /* 1.5 Nav */
    .header-show{
        display: none;
        position: relative;
        /* top:0;
        left:0; */
        /* height: 100%;
        width: 100%; */
    }
    .header-show .page-ceng{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height: 100%;
        z-index:10000;
        background:rgba(0,0,0,0.3);
        border:1px solid transparent;
    }
    .header-show .page-nav{
        position: relative;
        z-index: 10050;
        background:#f6f6f6;
        margin-top: calc(0.5rem);
        padding:10px 0;
    }
    .header-show .page-nav li{
        line-height: 40px;
        padding:0  2vw ;
        font-size: 1rem;
        background:#f6f6f6;
    }
    .header-show .page-nav .nav-title{
        border-bottom:1px solid #333;
        position: relative;
    }
    .header-show .page-nav .nav-title i{
        position: absolute;
        right: 2vw;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.5rem;
        z-index:1;
        transition:all 1s ease;
    }
    .header-show .page-nav .on .nav-title i{
        transform: translateY(-50%) rotate(180deg)
    }
    .header-show .page-nav .nav-title p{
        position: absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        z-index:10;
    }
    .header-show .page-nav .nav-subtitle{
        display: none;
    }
    .header-show .page-nav a{
        display: block;
        padding-left:2vw;
        display: flex;
        height: 50px;
        line-height: 50px;
    }
    .header-show .page-nav a i{
        margin-right:1vw;
    }
    /* 2 Bottom */
    .page-footer{
        padding:8px 0;
        font-size: 12px;
    }
    .this{
        margin-top:0.8rem;
    }
    /* 3 Menu Big */
    .this .con{
        width:100%;
    }
    /* 4 tab  html(info numbers setting)*/
    .tab-nav{
        display: flex;
        flex-wrap: wrap;
        /* padding-left:17px; */
    }
    .tab-nav span{
        display: flex;
        font-size: 1.3rem;
    }
    .tab-nav span:not(:last-child)::after{
        content: "";
        display: inline-block;
        height:12px;
        width: 1px;
        background:#ededed;
        margin:20px 0.4rem;
    }
    .tab-nav span.on{
        color: #0080b5
    }
    /* 6 layui form html(info number) */
    .con .layui-form-select{
        width:100%;
    }
    /* 7 btn html(info numbers) */
    .form-btn{
        margin-left:0;
        float: none;
        font-size: 1rem;
    }

    /* 10 html(logo  register ) */
    .login-con{
        border:0;
    }
    /* 10 html(logo  register ) */
    .bottom{
        padding-left:4vw;
    }
    .bottom p {
        background: url(/static/ext/icon/01.png) no-repeat left center;
    }
    /* 10 Footer */
    #login .page-footer,
    #register .page-footer{
        margin-top:0;
    }
    /* 13 List html(list users recording.list listConsume) */
    .list-list::-webkit-scrollbar{
        display: none;
    }
    .search-box input{
        padding:0 0.4rem;
    }
    .search-box form{
        font-size: 1rem;
    }
    .form-btn{
        padding:0 0.7rem
    }
    /* .list-tools a{
        font-size: 0.8rem;
    } */
}
@media screen and (max-width:720px){
    #page-box .layui-laypage{
        display: flex;
    }
}

@media screen and (max-width:500px){
    /* 13 List html(list users recording.list listConsume) */
    .search-box form{
        display: block;
        width: 100%;
    }
    .search-box form>div{
        display: block;
    }
    .search-box .label{
        margin:1rem 0 ;
        border:1px solid #ededed;
        background:#fff;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        position: relative;
        /* overflow: hidden; */
    }
    .search-box input{
        border:0;
    }

    .search-box span{
        width:15%;
    }
    .search-box .form-btn{
        margin-left:0;
    }
    .list-tools{
        padding:0;
        display: flex;
        flex-wrap: wrap;
    }
    .list-tools i{
        margin-right:0.3rem;
    }
    .list-tools a{
        font-size: 1.1rem;
        margin-right: 0.4rem;
        /* color:red; */
    }
    #page-box .layui-laypage a,
    #page-box .layui-laypage span{
        padding:0 0.6rem;
    }
    .header-tel .tel-name {
        width: 100%;
        overflow: hidden;
    }
    .pagination .page-total{
        display: none!important;
    }
    .pagination .jump-page{
        display: none!important;
    }
}
@media screen and (max-width:480px){
    /* 10 html(logo  register )*/
   .bottom{
        padding-left:40px;
    }
    .header-tel .tel-name {
        width: 100%;
        overflow: hidden;
    }
}
@media screen and (max-width:460px){
    #login .top .signBox{
        font-size: 14px !important
    }
    /* 1.2.1 Name */
    .page-header .header-tel{
        font-size: 13px;
    }
    /* 10 html(logo  register ) */
    .bottom{
        font-size: 0.9rem;
        padding-left: 10px;
    }
    .bottom p {
        background: url(/static/ext/icon/01.png) no-repeat 15px center;
        text-indent: 8vw;
    }
    .header-tel .tel-name {
        width: 100%;
        overflow: hidden;
    }
}
@media screen and (max-width:360px){
    .show.header-tel{
        display: block;
        height: auto;
    }
    .header-tel *{
        line-height: 250%;
        padding-left: 30px;
    }
    .header-tel *:not(:last-child)::after{
        display: none;
    }
    /* 4 tab html(info numbers) */
    /* .tab-nav span{
        font-size: 0.8rem;
    } */
    /* 10 html(logo  register ) */
    .bottom{
        font-size: 0.5rem;
        text-align: center;
        padding-left: 20px
    }
    .bottom p{
        background: url(/static/ext/icon/01.png) no-repeat left center;
        text-indent:0rem;
        font-size: 0.8rem
    }
    .header-tel .tel-name {
        width: 40%;
        overflow: hidden;
    }
}

@media screen and (max-width:320px){
    /* 10 html(logo  register ) */
    .bottom{
        padding-left: 0px
    }
        /* #page-box{
            width: 100%;
        } */
    #page-box .layui-laypage .layui-laypage-count{
        display: none;
    }
}
@media screen and (min-width:768px){
    .this .con{
        border: 1px solid #f1f1f1;
    }
    /* 4 tab html(info numbers) */
    .tab-nav{
        border-bottom: 1px solid #ededed;
    }
    .tab-nav span{
        font-size: 16px;
        padding: 0 17px;
    }
    .tab-nav span.on{
        color:#0080b5;
        border-bottom:4px solid #0080b5;
    }
}
@media screen and (min-width:1179px){
    /* 4 tab html(info numbers) */
    .tab-nav span{
        margin-right: 30px;
    }
}


.bd-top form>div{
    display: flex;
}
.bd-top .cengC.form-btn{
    display: none
}
@media screen and (min-width:502px){
    .bd-top form {
        display: block !important;
    }
}
@media screen and (max-width: 501px){
    .bd-top form {
        display: none;
        /* margin-top:20px; */
    }
    .bd-top form>div{
        display: block;
    }
    .bd-top .cengC.form-btn{
        display:block;
    }


    .con .layui-form-label{
        padding:8px 0;
    }
    #info .con .layui-form-label{
        padding:0;
    }
    .search-box input{
        padding-top:8px;
        padding-bottom:8px;
    }
    .search-box .label, .search-box span, .search-box input {
        height: auto;
        line-height: 1;
        /* padding: 10px 0; */
    }
    .layui-form-select dl{
        /* top:2.5rem; */
    }
}

.btnBox input {
    height: 34px;
    line-height: 34px;
}



.layui-layer-iframe.layui-layer-border{
    box-sizing:content-box;
}
.layui-layer-setwin .layui-layer-close1{
    /*transform: scale(1.7)*/
}
.layui-layer-setwin .layui-layer-min,
.layui-layer-setwin .layui-layer-max{
    display: none
}
.pull-right {
    float: right;
    padding-right:15px;
}
.pagination {
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 30px;
    margin-top:30px;
    padding-left: 0;
}
.pagination .page-total{
    background-color: #fff;
    border: 1px solid #ddd;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
.pagination .jump-page{
    background-color: #fff;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    position: relative;
}
.pagination .jump-page span{
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    background-color: #eee;
}
.pagination .jump-page .input-pageNo{
    background-color: #fff;
    border: 1px solid #ddd;
    float: left;
    width: 35px;
    height: 33px;
    border-left: none;
    text-align: center;
    padding: 3px;
}
.pagination .jump-btn-li:hover{
    background-color: #f08400;
    color:#fff;
    border-color:#f08400;
}
.pagination .jump-page-btn{
    background-color: #0080b5;
    color:#fff;
    border-color:#0080b5;
}
.pagination .jump-page-btn:hover,.pagination .jump-page-btn:focus{
    background-color: #f08400;
    color:#fff;
    border-color:#f08400;
}
.pagination > li {
    display: inline!important;
}
.pagination > li > a, .pagination > li > span {
    background-color: #fff;
    border: 1px solid #ddd;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}
.pagination > li:last-child > a, .pagination > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    background-color: #eee;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #0080b5;
    border-color: #0080b5;
    color: #fff;
    cursor: default;
    z-index: 2;
}
.pagination > .disabled > span, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
    background-color: #fff;
    border-color: #ddd;
    color: #999;
    cursor: not-allowed;
}
.pagination-lg > li > a, .pagination-lg > li > span {
    font-size: 18px;
    padding: 10px 16px;
}
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}
.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
}
.pagination-sm > li > a, .pagination-sm > li > span {
    font-size: 12px;
    padding: 5px 10px;
}
.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

.btnBox{
    padding-bottom: 10px;
    padding-right: 20px;
    text-align: right;
}

.mainR .hd h2{
    padding-left: 15px;
}
.btnBox input{
    width: 120px!important;
    height: 34px;
    line-height: 34px;
    border:1px solid #0080b5;
    display: inline-block;
    color: #fff;
    padding:0 20px;
    background-color:#0080b5;
}
.btnBox .cancelBtn{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    color: #333;
    cursor: pointer;
    font-weight: 400;
    height: 34px;
    line-height: 34px;
    margin: 6px 6px 0 0;
    padding: 0 15px;
}
.btnBox .warnBtn{
    background-color:#7CCD7C;
    border: 1px solid #7CCD7C;
    color: #fff;
    cursor: pointer;
    font-weight: 400;
    height: 34px;
    line-height: 34px;
    margin: 6px 6px 0 0;
    padding: 0 15px;
}
.goBack{
    background-color:#0080b5;
    height: 30px;
    border:1px solid #0080b5;
    line-height: 30px;
    color: #fff;
    font-size: 14px;
    margin-left: 20px;
    padding: 0 30px 0 30px;
    display: inline-block;
}
.goBack:hover{
    background-color: #fff;
    color:#0080b5!important;
}
.ant-tone-btn{
    background-color:#fff;
    height: 30px;
    border:1px solid #0080b5;
    line-height: 28px;
    color: #0080b5;
    font-size: 14px;
    margin-left: 20px;
    /*padding: 0 30px 0 30px;*/
    text-align: center;
    width: 100px;
    display: inline-block;

}
.ant-tone-btn:hover{
    background-color: #0080b5;
    color:#ffffff!important;
}
.ant-tone-gray-btn{
    background-color:#fff;
    height: 30px;
    border:1px solid #565656;
    line-height: 28px;
    color: #565656;
    font-size: 14px;
    padding: 0 30px 0 30px;
    display: inline-block;

}
.ant-tone-gray-btn:hover{
    background-color: #565656;
    color:#ffffff!important;
}
.rp-btn{
    color: #fff;
    display: inline-block;
    background-color: #666;
    border-radius: 3px;
    padding: 0 5px;
    line-height: 25px;
    height: 25px;
}
.rp-btn:hover{
    color:#fff;
    background-color: #0080b5;
}
.rp-free{
    background-color: #0080b5;
}
.btn-box-list{
    width: 100%;
    padding: 15px 0px;
    text-align: right;
}
.tz-tips{
    color: #666;
    font-size: 14px;
    margin-right:10px;
}
.tz-tips em{
    font-size:14px;
    color:#fff;
    border-radius:5px;
    background-color: #0080b5;
    padding:3px 5px;
    cursor: pointer;
    font-weight: normal;
}
.tz-tips em:hover{
    background-color: #333;
}
.header-tel .tel-tag:after,.header-tel li:after {
    content: none !important;
}
.header-tel .tel-tag {
    position: relative;
    cursor: default;
}
.header-tel .tel-tag ul:before{
    content: "";
    position: absolute;
    top: -16px;
    left: 0px;
    width: 0;
    height: 0;
    border: 8px solid #ccc;
    border-color: transparent transparent #fff transparent;
    z-index: 300;
}
.header-tel .tel-tag ul{
    position: absolute;
    top:60px;
    left:0;
    z-index:1000;
    display: none;
    width:130px;
    background:#fff;
    -webkit-box-shadow:  2px 4px 12px 0px #a89f9f;
    -moz-box-shadow: 2px 4px 12px 0px #a89f9f;
    box-shadow: 2px 4px 12px 0px #a89f9f;
    cursor: default;
}

.header-tel .tel-tag li{
    height:45px;
    line-height: 45px;
    padding:0 10px;
    cursor: pointer;
}
.header-tel .tel-tag li:hover{
    background-color: #0080b5;
    color:#fff;
}

.user-ext {
    background-color: #0080b5;
    padding: 5px 10px;
    border-radius: 15px;
    color: #fff;
}
.support-pay-type{
    width: 100%;
    float: left;
    margin-top: 10px;
    line-height: 30px;
    cursor: pointer;
}
.support-pay-type i{
    width: 25px;
    height: 25px;
    background-size: 100% 100%;
    background-color: #fff;
    border: 1px solid #ededed;
    opacity: .85;
    float: left;
    margin-left:4px;
    margin-bottom: 5px;
}
.support-pay-type .paypal{
    background-image: url(/static/ext/images/social-paypal.png);
}
.support-pay-type .creditcard{
    background-image: url(/static/ext/images/creditcard_icon.png);
}
.support-pay-type .alipay{
    background-image: url(/static/ext/images/alipay_icon.png);
}
.support-pay-type .wechat{
    background-image: url(/static/ext/images/wechat_icon.png);
}
.support-pay-type span{
    float: left;
    font-size: 14px;
    margin-right: 5px;
    color: #999;
}
.warning{
    background-color: #fcf8e3;
    color: #222;
    line-height: 25px;
    padding: 5px;
    border-radius: 5px;
}
.tools {
    border-top: 1px solid #f2f2f2;
    text-align: right;
    padding-top: 10px;
    width: 100%;
    margin-bottom: 10px;
    float: right;
}
.at-checkbox{
    width: 70px;
}
.at-checkbox input{
    width: 30px!important;
    height: 30px!important;
}
.at-checkbox .layui-form-checkbox{
    width: 22px!important;
    height: 22px!important;
    line-height: 22px!important;
    padding: 0!important;
}
.at-checkbox .layui-form-checkbox i{
    width: 22px;
    font-size:15px;
}
.console-version{
    background-color: #7CCD7C;
    color: #fff;
    border-radius: 15px;
    padding: 5px 10px;
    top: 33px;
    position: absolute;
    font-size: 12px;
}

@media screen and (max-width:520px){
    .console-version {
        background-color: #7CCD7C;
        color: #fff;
        border-radius: 15px;
        padding: 5px 10px;
        top: 28px;
        position: absolute;
        font-size: 12px;
        z-index: 10;
        left: 8rem;
    }
    .list-data .no-data p{
        text-align: left;
        width: 100%;
        padding-left:2rem;
    }
}

.tel-tag .icon{
    display: inline;
    padding-left: 0px;
    height: 30px;
    line-height: 30px;
    position: relative;
    font-size: 14px;
    top:2px;
    cursor: pointer;
    padding-right:5px;
}
.tel-tag .icon:before{
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    top: .15rem;
    content: "";
    text-align: center;
    line-height: 15px;
}
.tel-tag .available:before{
    background: #63c46b;
}
.tel-tag .busy:before{
    background: #ff7676;
}
.tel-tag .disturb:before{
    background: #ff7676;
    content: "-";
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    line-height: 12px;
    height: 14px;
    width: 14px;
}
.tel-tag .invisible:before{
    background: #555;
}

.cursor{
    cursor: pointer!important;
}
.sms-delivered{
    color:#7CCD7C;
    font-size:20px;
}
.sms-undelivered{
    color:#F08400;
    font-size:20px;
}
.sms-failure{
    color:#FF0000;
    font-size:20px;
}
.sms-queued{
    color:#0080b5;
    font-size:20px;
}
.voice-recording-play{
    color:#0080b5;
    font-size:20px;
}
.at-theme-orange{
    color: #f08400!important;
}
.at-theme-blue{
    color: #0080b5!important;
}
.at-theme-green{
    color: #0ccd6a !important;
}

.badge {
    display: inline-block!important;
    line-height: 25px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    background-color: #0080b5;
    padding: 0.1rem 0.5rem;
}
.badge-success{
    background-color: #7CCD7C;
}
.badge-warning{
    background-color: #f08400;
}
.badge-danger{
    background-color: #FF0000;
}
.badge-primary{
    background-color: #0080b5;
}
.a2p-name{
    width: 250px!important;
}
.a2p-type{
    width: 120px!important;
}
.a2p-status{
    width: 200px!important;
}
.a2p-time{
    width: 150px!important;
}
.a2p-action{
    width: 100px!important;
}