body {
    font-family: 'Fira Code','Source Sans Pro','Helvetica Neue',Helvetica,Arial,微软雅黑,sans-serif;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.main-header .logo,
.login-logo, .register-logo{
    font-family: 'Fira Code','Source Sans Pro','Helvetica Neue',Helvetica,Arial,微软雅黑,sans-serif;
    font-weight: 200;
}
.btn-danger{
 color: #fff;
}
.ngdialog.ngdialog-theme-none .ngdialog-content{
    /*width: auto;*/
}

.ngdialog.ngdialog-theme-none.ngdialog-tn-max .ngdialog-content{
    width: auto;
}

.ngdialog.ngdialog-theme-none.ngdialog-tn-max500 .ngdialog-content{
    max-width: 500px;
}
.ngdialog.ngdialog-theme-none.ngdialog-tn-max1000 .ngdialog-content{
    max-width: 1000px;
}



.ngdialog.ngdialog-theme-none.ngdialog-packet .ngdialog-content{
    width: 1000px;
}
.ngdialog.ngdialog-theme-none.ngdialog-matching .ngdialog-content{
    width: 1000px;
}
:focus {
    outline: none;
}
.label-mini{
    font-size: 12px;
    font-weight: 200;
    padding: 4px;
    padding-top: 1px;
}


.control-sidebar-bg, .control-sidebar{
    width:350px;
    right: -350px;
    max-width: 100%;
}
.noHeadImg {
    display: inline-block;
    width: 45px;
    height: 45px;
    font-size: 20px;
    font-weight:200;
    line-height:44px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.2)),to(rgba(0,0,0,0)));
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(top,rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 100%);
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 100%);
    background-repeat: repeat-x;
    font-family: '微软雅黑', 'Source Sans Pro', sans-serif;
    position: relative;
}
.noHeadImg span{
    position: absolute;
    width: 16px;
    height: 16px;

    top: -1px;
    right: -1px;
    text-align: center;
    line-height:15px;
    color: #fff;
    font-size: 12px;
    font-weight: 200;


    background: #b03440;
    border-radius: 10px;
}

.sidebar-expanded-on-hover .user-panel>.image>.noHeadImg ,
.sidebar-collapse .user-panel>.image>.noHeadImg {
    width: 30px;
    height: 30px;
    line-height:30px;
    font-size: 20px;
}
.chat-history ul,
.chat-history li{
    list-style: none;
    padding-left:0;
    margin: 0;
}

.chat-header{
    background: #F9FAFC;
    padding:   0 10px;
    position: absolute;
    top: 0;
    left: 0;
    line-height:37px;
    height: 40px;
    width: 100%;
    overflow: hidden;
    z-index: 1;

}
.chat-history {
    background: #fff;
    padding: 10px 10px 10px;
    border-bottom: 2px solid white;
    /*overflow-y: scroll;*/
    /*height: 575px;*/
}
.chat-history{
    z-index: 1;
}
.chat-history .message-data {
    /*margin-bottom: 10px;*/
    margin-top: 15px;
}
.chat-history .message-data-time {
    color: #a8aab1;
    padding-left: 6px;
    font-size: 12px;
}
.chat-history .message {
    color: white;
    padding: 10px 15px;
    line-height: 26px;
    font-size: 16px;
    border-radius: 7px;
    margin-bottom: 0px;
    margin-top: 5px;
    width: 90%;
    position: relative;
}

.chat-history .message:after {
    display: none;
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #86BB71;
    border-width: 10px;
    margin-left: -10px;
}
.chat-history div+.message:after{
    display: block;
}
.chat-history div+.message{
    margin-top: 10px;
}
.chat-history .my-message {
    background: #86BB71;
}
.chat-history .other-message {
    background: #94C2ED;
}
.chat-history .other-message:after {
    border-bottom-color: #94C2ED;
    left: 93%;
}
.chat-message {
    padding: 8px 10px;
    width: 100%;
    border-top:1px solid #D2D6DE;
}
.chat-message .textarea {
    border: 1px solid #E8ECF4;
    padding: 5px 5px;
    font:14px/22px monospace;
    border-radius: 5px;
    resize: none;
    display: block;
    width: calc( 100% - 50px );
    overflow-y:visible;
    margin: 0;
    max-height: 200px;
    background: #fff;
}
.chat-message .submit_btn{
    padding: 0;
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: #3C8DBC;
    color: #fff;
    width: 30px;
    height: 30px;
    line-height:29px;
    text-align: center;
    font-size: 14px;
    border-radius: 20px;
}
.chat-message .fa-file-o, .chat-message .fa-file-image-o {
    font-size: 16px;
    color: gray;
    cursor: pointer;
}
.chat-message button {
    float: right;
    color: #94C2ED;
    font-size: 16px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    font-weight: bold;
    background: #F2F5F8;
}
.chat-message button:hover {
    color: #75b1e8;
}
.online, .offline, .me {
    margin-right: 3px;
    font-size: 10px;
}
.online {
    color: #86BB71;
}
.offline {
    color: #E38968;
}
.me {
    color: #94C2ED;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.float-right {
    float: right;
}
.control-sidebar-fff{
    background: #F2F5F8;
    color: #434651;
    box-shadow: 0 0 6px -2px rgba(0,0,0,0.4);
    height: 100%;
    padding-bottom: 0 !important;
    padding-top:0;
    top:50px;
}
.Qchat{
    position: absolute;
    overflow: auto;
    left: 0;
    top: 40px ;
    bottom: 51px;
    right: 0;
    background: #fff;
}
.chat-message{
    background: #F9FAFC;
    position: absolute;
    bottom: 0;
    left: 0;
}
.chat-header{
    border-bottom: 1px solid #D2D6DE;
}
.control-sidebar{
    height: 100%;
    line-height:30px;
}
.control-sidebar>.tab-content{
    position: absolute;
    top: 91px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    overflow: auto;
}
.chat-header .noHeadImg{
    height: 30px;
    width: 30px;
    line-height:30px;
    font-size: 14px;
    margin-right: 10px;
}
.chat-user{
    padding: 0;
    margin: 0;
    list-style: none;
}
.chat-user{
    padding: 0 10px;
    /*border-top: 1px solid #ddd;*/
    /*margin-top: -1px;*/
}
.chat-user li{
    border-bottom: 1px solid #ddd;
}
.chat-user .pull-left{
    width: 55px;
    height: 45px;
    padding-right: 10px;
}
.chat-user h4{
    margin-bottom: 0;
}
button.close.Qchat-box-gb{
    display: block;
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 9999999;
    height: 41px;
    width: 40px;
    text-align: center;
    color: #636469;
    background: #E8ECF4;
    border-left: 1px solid #D2D6DE;
    border-bottom: 1px solid #D2D6DE;
    opacity: 1;
}
.control-sidebar .nav-tabs-box{
    margin-right: 40px;
}
@media (max-width: 768px){
    button.close.Qchat-box-gb{
        top: 0;

    }
    .control-sidebar{
        padding-top: 0;
        z-index: 99999;
    }
    .control-sidebar>.tab-content{
        position: absolute;
        top: 41px;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0;
        overflow: auto;
    }
    .control-sidebar-bg, .control-sidebar{
        width:100%;
        right: -100%;
        max-width: 100%;
    }
    .control-sidebar .nav-tabs.nav-justified>li>a{
        margin-bottom:0;
    }
}
@media (min-width: 768px){
    .control-sidebar-open .content-wrapper, .control-sidebar-open .right-side, .control-sidebar-open .main-footer {
        margin-right: 350px;
    }
}
.chat-sys{
    display: block;
    font-size: 12px;
}
.chat-sys{
    display: block;
    font-size: 12px;
    line-height:20px;
    text-align: center;
    padding: 5px 10px;
    color: #A8AAB1;
}
.chat-sys .chat-content{
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: inline-block;
    border-radius: 3px;
    padding: 0 5px;
}
.chat-state{
    position: absolute;
    bottom:2px;
    right:5px;
    font-size: 12px;
    line-height:12px;
}
.chat-state i{
    display: block;
    position: relative;
}
.chat-state .tooltip{
    left: auto !important;
    right: -5px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-state .tooltip .tooltip-arrow{
    left: auto !important;
    right: 7px !important;
}



.chat-history .inputing i{
    display: inline-block;
    width: 10px;
    height: 10px;
    line-height:10px;
    background: #86BB71;
    border-radius: 5px;
    -webkit-animation-name: color9;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

.chat-history .inputing i:nth-child(20n+1){animation-delay: -0ms, -0ms;}
.chat-history .inputing i:nth-child(20n+2){animation-delay: -400ms, -400ms;}
.chat-history .inputing i:nth-child(20n+3){animation-delay: -800ms, -800ms;}
@keyframes color9 {
    0%   { background: #94C2ED; }
    100% { background: #86BB71; }
}

.chat-history-in-r{
    -webkit-animation-name: elastic;
    -webkit-animation-duration: 400ms;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    transform-origin:right top;
}
.chat-history-in-l{
    -webkit-animation-name: elastic;
    -webkit-animation-duration: 400ms;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    transform-origin:left top;
}
@keyframes elastic {
    0%   { transform:scale(0.6); opacity: 0;}
    40%   { transform:scale(1);}
    60%   { transform:scale(0.95);}
    100% { transform:scale(1); opacity:1;}
}
.form-list .table-title{
    display: inline-block;
}
.form-list th{
    position: relative;
}
.form-list .table-sort{
    background: none;
    color: #eee;
    padding: 0;
    margin: 0;
    border: none;
    display: block;
    width: 20px;
    height: 20px;
    text-align: center;
    position: absolute;
    right: 5px;
    top: 8px;
}
.form-list .table-sort:hover,
.form-list .table-sort.hover{
    color: #999;
}
.form-list .table-title{
    padding-right: 15px;
}

.pagination li{
    position: relative;
}
.page-check{
    text-align: right;
    position: absolute;
    top: -7px;
    left: 0px;
    right:0px;
    padding: 0 1px;
    opacity: 2;
    /*width: 100%;*/
}
.page-check:hover{
    opacity:1 ;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.5);
}
.page-check span{
    margin-left:-3px;
    display: inline-block;
}
.page-error{
    color: #f00;
    position: relative;z-index: 1;
}
.page-info{
    color: #D8901F;
}
.label {
    font-weight: 200;
}
.main-header .navbar .nav>li>a>.label{
    top: 7px;
    right: 4px;
}


.packetGuide .jq-auto-height{
    min-height: 300px;
    overflow: auto;
}
.guideTree .quantity{
    padding-left: 25px;
    padding-right: 40px;
}
.guideTree .editbox{
    font-size: 12px;
}
.guideTree .editbox label{
    font-size: 12px;
    font-weight: 400;
    padding-right:10px;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}
.guideTree .editbox label input{
    vertical-align: middle;
    margin: 0;
}
.guideTree .editbox span{
    display: inline-block;
    vertical-align: middle;

}
.guideTree .splitNum{
    border: 1px solid #49545A;
    border-width: 0 0 1px 0 ;
    background: rgba(255,255,255,0.2);
    padding: 0 5px;
}
.guideTree .splitNum:focus {
    border-color: #007C98;
    background: rgba(255,255,255,0.8);

}
.guideTree ul,
.guideTree li{
    padding: 0;
    margin: 0;
    list-style: none;
}
.guideTree li{
    position: relative;
    padding: 10px 0;
    padding-left: 25px;
    padding-right:40px;
    border-radius: 0px;

}
.guideTree {
    text-align: center;
}
.guideTree h6{
    position: absolute;
    right: 10px;
    top: 50%;
    margin: 0;
    margin-top: -6px;
    color: #b5b7ba;

}
.guideTree .box-dib{
    display: inline-block;
    width:150px;
    margin: 10px 5px;
    padding: 15px;
}

.guideTree .info{
    font-size: 12px;
    color: #62696b;
}

.guideTree li:nth-of-type(1){background: rgba(0,0,0,0.00);}
.guideTree li:nth-of-type(2){background: rgba(0,0,0,0.02);}
.guideTree li:nth-of-type(3){background: rgba(0,0,0,0.04);}
.guideTree li:nth-of-type(4){background: rgba(0,0,0,0.06);}
.guideTree li:nth-of-type(5){background: rgba(0,0,0,0.08);}
.guideTree li:nth-of-type(6){background: rgba(0,0,0,0.1);}
.guideTree li:nth-of-type(7){background: rgba(0,0,0,0.1);}
.guideTree li:nth-of-type(8){background: rgba(0,0,0,0.1);}

.guideTree .buttonBox{
    padding: 10px 0;
    padding-left: 25px;
    padding-right: 40px;
    text-align: center;

}

.guideTree li:first-child{
    background: none;
}
.guideTree .user-info{
    text-align: center;
    font-size: 12px;
    overflow: hidden;
    padding: 0 5px;
    color: #818386;
    left: 0;
    top: 0;
    bottom: 0;
    white-space:nowrap;
}
.guideTree .user-info-t{
    position: absolute;
    top: 5px;
    left: 5px;
}
.guideTree .user-info-b{
    position: absolute;
    bottom: 5px;
    left: 5px;
}
.guideTree .top-button{
    position: absolute;
    left: 0;
    top: 20px;
    padding: 10px;

}
.guideTree .top-button button{
    border:none;
    background: none;
    font-size: 25px;
    color: #A2A5A5;
}
.guideTree .top-button button:hover{
    color: #676A6A;
}

.guideTree .top-right-button{
    position: absolute;
    top: 5px;
    right: 0;
    padding: 10px;
    border:none;
    background: none;
    font-size: 15px;
    color: #A2A5A5;
}
.guideTree .top-right-button:hover{
    color: #676A6A;
}
.guideTree .noprobox{
    display: inline-block;
}
.guideTree .noprobox button{
    display: block;
    border:none;
    background: none;
}

.guideTree .tooltip.left{
    left: -50px !important;
    left: -70px !important;
    white-space:nowrap;
}
.guideTree .user-info-t,
.guideTree .user-info-b{
    display: inline-block;
}

.guideTree li:hover{
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
    /*border-radius: 10px;*/
}
.navbar-nav>.user-menu .user-image{
    line-height: 25px;
    font-size: 15px;
    text-align: center;
}
.navbar-nav>.user-menu>.dropdown-menu>li.user-header>.noHeadImg{
    z-index: 5;
    height: 90px;
    width: 90px;
    border: 3px solid;
    border-color: transparent;
    border-color: rgba(255,255,255,0.2);
    font-size: 40px;
    line-height: 84px;
    background-size: 100px 100px;
    background-position: center;
}
.dropdown-menu{
    background: rgba(255,255,255,0.7);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.navbar-nav>.notifications-menu>.dropdown-menu>li.header, .navbar-nav>.messages-menu>.dropdown-menu>li.header, .navbar-nav>.tasks-menu>.dropdown-menu>li.header{
    background: rgba(255,255,255,0.05);
}
.navbar-nav>.notifications-menu>.dropdown-menu>li.footer>a, .navbar-nav>.messages-menu>.dropdown-menu>li.footer>a, .navbar-nav>.tasks-menu>.dropdown-menu>li.footer>a{
    background: rgba(255,255,255,0.05);
}
.skin-blue .main-header .navbar{
    background: linear-gradient(to bottom,rgba(60,141,188,1) 0,rgba(60,141,188,1) 10%,rgba(0,120,189,0.7) 100%);

    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.skin-blue .sidebar-menu>li>.treeview-menu{
    background: rgba(30,40,44,0.9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.music-menu{

}
.music-menu img{
    width: 40px;
    height: 40px;
    margin-top: 3px;
    border-radius: 50%;
}
.music-menu {
    position: relative;
    height: 50px;
    color: #fff;
    margin: 0 10px;

}
.music-menu a{
    color: #fff;
}
.music-menu .range{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #4DADE0;
}
.music-menu button{
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}
.music-menu .range i{
    display: block;
    position: absolute;
    left: 0;
    height: 3px;
    top: 0;
    background: #fff;
}
.progress-button .content{
    min-height: 0;
    padding:0;
    margin: 0;
}
.btn-progress{
    position: relative;
    overflow: hidden;
}
.btn-progress .bg{
    display: block;
    position: absolute;
    height: 100%;
    width: 0%;
    left: 0;
    top: 0;
    background: rgba(0,82,103,0.5);
    z-index: 10;
}
.btn-progress span{
    position: relative;
    z-index: 100;
}
.modal-danger input{
    border-radius: 3px;
    color: #fff !important;
    background: none !important;
    border: 1px solid #fff;
}
.modal-danger input:-webkit-autofill{
    background: none;
    border-color: #FAFFBD;
}