@charset "utf-8";

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?t=201910291442');
    src:  url('fonts/icomoon.eot?t=201910291442') format('embedded-opentype'),
    url('fonts/icomoon.ttf?t=201910291442') format('truetype'),
    url('fonts/icomoon.woff?t=201910291442') format('woff'),
    url('fonts/icomoon.svg?t=201910291442') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "Microsoft YaHei","icomoon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* BIµƒ≤Àµ•iconÕº±Í */
@font-face {
    font-family: 'icomoon2';
    src:  url('fonts/icomoon2.eot?idxcd2');
    src:  url('fonts/icomoon2.eot?idxcd2#iefix') format('embedded-opentype'),
    url('fonts/icomoon2.ttf?idxcd2') format('truetype'),
    url('fonts/icomoon2.woff?idxcd2') format('woff'),
    url('fonts/icomoon2.svg?idxcd2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon2-"], [class*=" icon2-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon2' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'icomoon3';
    src:  url('fonts/icomoon3.eot?u8hu72');
    src:  url('fonts/icomoon3.eot?u8hu72#iefix') format('embedded-opentype'),
      url('fonts/icomoon3.ttf?u8hu72') format('truetype'),
      url('fonts/icomoon3.woff?u8hu72') format('woff'),
      url('fonts/icomoon3.svg?u8hu72#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  
  [class^="icon3-"], [class*=" icon3-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon3' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon3-admin:before {
    content: "\e900";
    color: #fff;
  }
  .icon3-help:before {
    content: "\e901";
    color: #fff;
  }
  .icon3-refresh:before {
    content: "\e902";
    color: #fff;
  }

  .icon3-refresh {
    margin-left: 2px;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
}

.icon3-help {
    margin-left: 6px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    font-size: 19px;
}

.icon3-admin {
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
}

.icon2-bi-icon:before {
    content: "\e900";
    font-size: 1.2em;
    margin-left: 6px;
}

.icon2-bi-icon {
    padding-top: 7px !important;
}

.icon-user:before {
    content: "\e925";
}
.icon-logo:before {
    content: "\e91d";
}
.icon-admin:before {
    content: "\e900";
    font-size: 1.2em;
    margin-left: 3px;
}
.icon-icon-custom:before {
    content: "\e901";

}
.icon-price-tag:before {
    content: "\e902";

}
.icon-21:before {
    content: "\e903";

}
.icon-icon_event:before {
    content: "\e904";

}
.icon-icon-user .path1:before {
    content: "\e905";

}
.icon-icon-user .path2:before {
    content: "\e906";
    margin-left: -1em;

}
.icon-icon-user .path3:before {
    content: "\e907";
    margin-left: -1em;

}
.icon-icon-user .path4:before {
    content: "\e908";
    margin-left: -1em;

}
.icon-icon_dashboard:before {
    content: "\e909";

}
.icon-17:before {
    content: "\e90a";

}
.icon-icon_stats:before {
    content: "\e90b";

}
.icon-icon_ap:before {
    content: "\e90c";

}
.icon-icon_device:before {
    content: "\e90d";

}
.icon-icon_map:before {
    content: "\e90e";

}
.icon-12:before {
    content: "\e90f";

}
.icon-11:before {
    content: "\e910";

}
.icon-icon_firmware:before {
    content: "\e911";

}
.icon-icon_setting:before {
    content: "\e912";

}
.icon-icon_edit:before {
    content: "\e913";

}
.icon-icon_delete:before {
    content: "\e914";

}
.icon-refresh:before {
    content: "\e915";
    font-size: 1.4em;

}
.icon-icon_more:before {
    content: "\e916";

}
.icon-3:before {
    content: "\e918";

}
.icon-icon-fold:before {
    content: "\e919";

}
.icon-help_info:before {
    content: "\e91a";
    font-size: 1.5em;

}
.icon--7:before {
    content: "\e91b";
    color: #497fe5;
}
.icon--6:before {
    content: "\e91c";
    color: #f2b218;
}
.icon-search:before {
    content: "\e91e";
    font-size: 1.4em;
    vertical-align: middle;
}
.icon-show:before {
    content: "\e91f";
    color: #5d5d5d;
}
.icon-add_ap:before {
    content: "\e920";
    color: #4e4e4e;
}
.icon-1:before {
    content: "\e921";

}
.icon-2:before {
    content: "\e922";
    color: #8692a8;
}
.icon-110:before {
    content: "\e923";

}
.icon-icon-logo:before {
    content: "\e924";
}



* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    font-family: Arial, sans-serif;
    font-weight: normal;
    /*letter-spacing: 0.01em;*/
}

input, select, textarea{
    color: #000;
}

hr {
    border: none;
    border-bottom: 1px solid #ccc
}

.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected {
    background-color: #0089FF;
    color: #fff;
}

.inline-block { display: inline-block }
.left { text-align: left }
.center { text-align: center }
.block-center { margin-left: auto; margin-right: auto }
.right { text-align: right }
.nowrap { text-overflow: ellipsis; white-space: nowrap }

.pure-input:focus, .pure-form input[type=text]:focus, .pure-form input[type=password]:focus, .pure-form input[type=email]:focus, .pure-form input[type=url]:focus, .pure-form input[type=date]:focus, .pure-form input[type=month]:focus, .pure-form input[type=time]:focus, .pure-form input[type=datetime]:focus, .pure-form input[type=datetime-local]:focus, .pure-form input[type=week]:focus, .pure-form input[type=number]:focus, .pure-form input[type=search]:focus, .pure-form input[type=tel]:focus, .pure-form input[type=color]:focus, .pure-form select:focus, .pure-form textarea:focus {
    border-color: #0089FF;
    outline: none
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background-color: transparent;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    background: #ccc;
    border-radius: 1.3px;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 50px;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 0 0 10px #ccc;
    border: 1px solid rgba(0,0,0,.3);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    background: #ccc;
    border-radius: 1.3px;

    border: 1px solid rgba(0,0,0,.1);
    border-radius: 50px;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 0 0 10px #ccc;
    border: 1px solid rgba(0,0,0,.3);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #ccc;
    border: 0.2px solid #808080;
    border-radius: 2.6px;
    border-radius: 50px;
}

input[type=range]::-ms-fill-upper {
    background: #ccc;
    border: 0.2px solid #808080;
    border-radius: 2.6px;
    border-radius: 50px;
}

input[type=range]::-ms-thumb {
    box-shadow: 0 0 10px #ccc;
    border: 1px solid rgba(0,0,0,.3);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
    background: #367ebd;
}

input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

select[type=toggle]{
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
    width: 60px;
    height: 32px !important;
    background-color: #eee;
    border: 1px solid #ccc !important;
    border-radius: 2em;
    padding: 0;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    color: transparent;
}
select[type=toggle] option{
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    padding: 6px 0;
    position: relative;
    vertical-align: middle;
    width: 100%;
    height: 100%;
    text-align: center;
    /*box-shadow: 0 0 0 2em #eee inset;*/
    /*background: transparent;*/
    color: transparent;
    position: absolute;
    z-index: 1;
    /*box-shadow: 0 0.2em 0.5em rgba(0,0,0,.1) inset;*/
    text-indent: -9999px
}
select[type=toggle]:disabled option { background: linear-gradient(#ddd, #ddd) !important; box-shadow: none }
/*select[type=toggle] option:first-child{
    background: linear-gradient(#5d7, #5d7);
}*/
select[type=toggle] option:checked {
    background: linear-gradient(#5d7, #5d7);
    z-index: 0
}

select[type=toggle] option:first-child:checked{
    background: linear-gradient(#eee, #eee);
}

select[type=toggle] option:checked:after {
    /*content: attr(value);*/
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 2em;
    background: #fff;
    position: absolute;
    left: auto;
    right: 1px;
    top: 1px;
    border: none;
    pointer-events: none;
    box-shadow: 0 3px 1px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.3);
}
select[type=toggle] option:first-child:checked:after { left: 1px; right: auto; }

/*
 * A custom checkbox input box implementation.
 * Usage:
 *  <input type="checkbox" class="my-checkbox" id="fancy-checkbox" checked="">
 *  <label for="fancy-checkbox"></label>
 */
input[type="checkbox"].toggle {
    background-color: #eee;
    padding: 0;
    margin: 0 .5em 0 0;
    border-radius: 2em;
    display: inline-block;
    position: relative;
    border: 1px solid rgba(0,0,0,.1);
    box-sizing: content-box;
    vertical-align: middle;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
    width: 49px !important;
    height: 28px !important;
}
input[type="checkbox"].toggle:before { display: none !important }
input[type="checkbox"].toggle:after {
    content: '';
    width: 26px;
    height: 26px;
    margin: 1px;
    position: absolute;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    border-radius: 2em;
    background-color: #fff;
    border: none;
    pointer-events: none;
    box-shadow: 0 3px 1px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.3);
}
input[type="checkbox"].toggle:checked { background-color: #5d7 }
input[type="checkbox"].toggle:checked:after { margin: 1px 1px 1px 22px; background-color: #fff; }
input[type="checkbox"].toggle:focus { outline: none !important }
/*
.my-checkbox {
    display: none !important;
}

.my-checkbox+label {
    background-color: #eee;
    padding: 9px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    margin-right: .5em;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    border: 1px solid rgba(0,0,0,.1);
    box-sizing: content-box;
    vertical-align: middle;
    width: 30px !important;
    height: 10px
}

.my-checkbox+label:after {
    content: ' ';
    position: absolute;
    top: 0;
    -webkit-transition: box-shadow .1s ease-in;
    transition: box-shadow .1s ease-in;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    box-shadow: inset 0 0 0 0 #ddd,0 0 1px rgba(0,0,0,.4);
}

.my-checkbox+label:before {
    content: ' ';
    position: absolute;
    background: #fff;
    top: 1px;
    left: 1px;
    z-index: 1;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    height: 26px;
    width: 26px;
    border-radius: 100px;
    box-shadow: 0 3px 1px rgba(0,0,0,.1),0 0 1px rgba(0,0,0,.3)
}

.my-checkbox:active+label:after {
    box-shadow: inset 0 0 0 20px #eee,0 0 1px #eee
}

.my-checkbox:active+label:before {
    width: 37px
}

.my-checkbox:checked:active+label:before {
    width: 37px;
    left: 10px
}

.my-checkbox+label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,.05),inset 0 1px 3px rgba(0,0,0,.1)
}

.my-checkbox:checked+label:before {
    content: ' ';
    position: absolute;
    left: 22px;
    border-radius: 100px
}

.my-checkbox:checked+label:after {
    content: ' ';
    font-size: 1.5em;
    position: absolute;
    background: #5d7;
    box-shadow: 0 0 1px #5d7
}
*/

/* Normal checkbox. */

input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;

    position: relative;
    vertical-align: -4px;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

input[type="checkbox"]:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

input[type="checkbox"]:focus {
    outline: none !important;
}

input[type="checkbox"]:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -1px;
    margin-right: 5px;
    margin-left: -0px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    -webkit-transition: 240ms;
    -o-transition: 240ms;
    transition: 240ms;
    background-color: #eee;
    /*box-shadow: inset 0px 0px 10px 0px #ddd,0 0 1px rgba(0, 0, 0, .4);*/
}

input[type="checkbox"]:checked:before {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    display: table;
    width: 6px;
    height: 12px;
    border: 2px solid #fff;
    border-top-width: 0;
    border-left-width: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    box-shadow: none;
}

input[type="checkbox"]:checked:after {
    background-color: #0089FF;
    border-color: #0089FF;
}

input[type="checkbox"]:disabled:after {
    border-color: #bbbbbb;
}

input[type="checkbox"]:disabled:checked:after {
    background-color: #bbbbbb;
    border-color: transparent;
}


/* --------------------------
 * Element Styles
 * --------------------------
*/

body {
    min-width: 320px;
    color: #333;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    /*color: rgb(75, 75, 75);*/
}
h3 {
    font-size: 1.25em;
}
h4 {
    font-size: 1.125em;
}

a, a:visited {
    color: #000;/*#3b8bba;*/ /* block-background-text-normal */
    text-decoration: none;
}

a:hover{
    color: #0089FF;
}

dt {
    font-weight: bold;
}
dd {
    margin: 0 0 10px 0;
}

aside {
    background: #1f8dd6; /* same color as selected state on site menu */
    padding: 0.3em 1em;
    border-radius: 3px;
    color: #fff;
}
aside a, aside a:visited {
    color: rgb(169, 226, 255);
}


/* --------------------------
 * Layout Styles
 * --------------------------
*/

/* Navigation Push Styles */
.pure-layout {
    position: relative;
    padding-left: 0;
}
.pure-layout.active {
    position: relative;
    left: 64px;
}
.pure-layout.active .pure-nav-menu {
    left: 104px;
    width: 64px;
    box-shadow: 20px 0px 20px rgba(0,0,0,.1)
}

/* Apply the .box class on the immediate parent of any grid element (pure-u-*) to apply some padding. */
.l-box {
    padding: 1em;
}

.l-wrap {
    margin-left: auto;
    margin-right: auto;
}
.content .l-wrap {
    margin-left: -1em;
    margin-right: -1em;
}


/* --------------------------
 * Header Module Styles
 * --------------------------
*/

.header {
    margin: 0 auto;
    padding: 1em;
    color: #000;
}
.header h1 {
    font-size: 1.5em;
    /*        text-align: center;*/
    /*        margin: 0;*/
}
.header h2 {
    font-size: 1.2em;
    /*        text-align: center;*/
    /*        margin: 0;*/
}


/* --------------------------
 * Content Module Styles
 * --------------------------
*/

/* The content div is placed as a wrapper around all the docs */
.content {
    /*display: block;*/
    margin-left: auto;
    margin-right: auto;
    /*    padding-left: 1em;
        padding-right: 1em;*/
    /*max-width: 768px;*/
}

.content .content-subhead {
    margin: 2em 0 1em 0;
    font-weight: 300;
    color: #888;
    position: relative;
}

.content .content-spaced {
    line-height: 1.8;
}

.content .content-quote {
    font-family: "Georgia", serif;
    color: #666;
    font-style: italic;
    line-height: 1.8;
    border-left: 5px solid #ddd;
    padding-left: 1.5em;
}

/*    .content-link {
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        height: 100%;
        width: 20px;
        background: transparent url('/img/link-icon.png') no-repeat center center;
        background-size: 20px 20px;
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
        .content-link {
            background-image: url('/img/link-icon@2x.png');
        }
    }*/


/* --------------------------
 * Code Styles
 * --------------------------
*/

pre, code, .code, .pre {
    font-family: Consolas, Courier, monospace;
    color: #333;
    background: rgb(250, 250, 250);
}

code {
    padding: 0.2em 0.4em 0.2em 0;
    white-space: nowrap;
}
.content p code {
    font-size: 90%;
}

.code {
    margin-left: -1em;
    margin-right: -1em;
    padding: 1em;
    border: 1px solid #eee;
    border-left-width: 0;
    border-right-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.code code {
    font-size: 95%;
    white-space: pre;
    word-wrap: normal;
    padding: 0;
    background: none;
}
.code-wrap code {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* --------------------------
 * Footer Module Styles
 * --------------------------
*/

.footer {
    font-size: 87.5%;
    border-top: 1px solid #eee;
    margin-top: 3.4286em;
    padding: 1.1429em;
    background: rgb(250, 250, 250);
}

.legal {
    line-height: 1.6;
    text-align: center;
    margin: 0 auto;
}

.legal-license {
    margin-top: 0;
}
.legal-links {
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}
.legal-copyright {
    margin-top: 0;
    margin-bottom: 0;
}
.legal .logo{
    display: block;
    position: relative;
    font-size: 10em;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    color: #000;
    border: none;
    transition: all .3s ease-out;
    margin-bottom: 20px;
}
.legal .logo:hover{
    color: #ff9c00;
    transform: scale(1.05);
}
.legal .logo:after{
    content: '';
    display: block;
    position: absolute;
    border: 0px solid rgba(255,255,255,.5);
    background-color: #ffb847;
    opacity: 1;
    width: 0px;
    height: 0px;
    top: 100px;
    left: 100px;
    border-radius: 100%;
    transition: all .2s ease-out;
}
.legal .logo:hover:after{
    opacity: .1;
    border-width: 50px;
    top: -50px;
    left: -50px;
    width: 300px;
    height: 300px;
}


/* --------------------------
 * Main Navigation Bar Styles
 * --------------------------
*/

/* Add transition to containers so they can push in and out */
.pure-layout,
.pure-nav-menu,
.menu-link {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.pure-layout{ left: 0px; }
.pure-layout.active .menu-link {
    /*    left: 94px;*/
    /*background-color: #fff;*/
}

.pure-nav-menu {
    /*margin-left: -104px; /!* ".pure-nav-menu" width *!/*/
    width: 64px;
    position: fixed;
    top: 0;
    left: -10px;
    bottom: 0;
    z-index: 1; /* so the menu or its navicon stays above all content */
    background: #fff;
    /*overflow-y: auto;*/
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
}
ul li span {display: none}
.ap-item ul li span , .device-item ul li span {display: inline-block}
.pure-nav-menu li{height: 40px}
.pure-nav-menu ul{position: relative}
.pure-nav-menu li.admin{position: absolute;border-bottom: 100px}
.pure-nav-menu li i{position: relative}
.pure-nav-menu li i b{
    position: absolute;
    left: 53px;
    top: 10px;
    display: none;
    font-size:12px;
    width: 100px;
    z-index: 11;
    /*padding: 0 1em;*/
    text-align: center;
    height: 26px;
    line-height: 26px;
    background-color: #19233D;
    /*display: block;*/
    z-index: 9999;
    border-radius: 2px;
}
.pure-nav-menu li i b:before {
    content: '';
    position: absolute;
    z-index: -1;
    left:-5px;
    top: 1px;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-right: 15px solid #19233D;
    border-bottom: 11px solid transparent;

    /*border-radius: 5px;*/
}
.pure-nav-menu li:hover b {display: block}
/*.pure-nav-menu li:hover i {height: 150px}*/
.pure-nav-menu a {
    color: #000;
    border: none;
    white-space: normal;
    padding: .3em 1em;
    display: block;
    transition: all .2s ease-in;
    padding: 5px 0 0;
}
.pure-nav-menu a span {
    font-size: .8em;
}
.pure-nav-menu a i.icomoon {
    font-size: 2em
}
.pure-nav-menu a i.iconfont {
    font-size: 1.4em
}
.pure-menu-selected a {
    background-color: #0089FF;
}

.pure-nav-menu .pure-menu-open {
    background: #19233D;
    border: 0;
    height: calc(100%);
}
.pure-nav-menu  a {
    color: #8296A8;
}
.pure-nav-menu  a i {
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-bottom: 5px;
}
.pure-nav-menu .pure-menu ul {
    border: none;
    background: transparent;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 0m;
    text-align: center;
}

.pure-nav-menu .pure-menu ul li {
    padding: 0;
    margin: 0;
    /*height: 50px;*/
}
.pure-nav-menu .pure-menu ul li:hover a{
    color: #ffffff;
    /*background-color: rgba(41,55,89,1);*/
}

.pure-nav-menu .pure-menu ul,
.pure-nav-menu .pure-menu li {
    position: relative;
}
.pure-nav-menu .pure-menu ul,
.pure-nav-menu .pure-menu .menu-item-divided {
    border-top: 1px solid rgba(0,0,0,.2);
    margin-top: 10px;
}

.pure-nav-menu  a:hover,
.pure-nav-menu  a:focus {
    /*background: rgba(0,0,0,.1);*/
    color: #9BA9C1;
}
.pure-nav-menu  a.active {
    background-color: red;
}
.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* ".pure-nav-menu width" */
    /*background: rgba(255,255,255,.8);*/ /*rgba(0,0,0,0.7);*/
    font-size: 11px; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 4em;
    height: 4em;
    padding: 1em;
}

.menu-link:hover,
.menu-link:focus {
    /*background: #fff;*/
}

.menu-link span {
    position: relative;
    display: block;
    margin-top: 0.9em;
}

.menu-link span,
.menu-link span:before,
.menu-link span:after {
    background-color: #fff;
    width: 100%;
    height: .2em;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.menu-link span:before,
.menu-link span:after {
    position: absolute;
    top: -.55em;
    content: " ";
}

.menu-link span:after {
    top: .55em;
}

.menu-link.active span {
    background: transparent;
}

.menu-link.active span:before {
    -webkit-transform: rotate(45deg) translate(.5em, .4em);
    -moz-transform: rotate(45deg) translate(.5em, .4em);
    -ms-transform: rotate(45deg) translate(.5em, .4em);
    -o-transform: rotate(45deg) translate(.5em, .4em);
    transform: rotate(45deg) translate(.5em, .4em);
}

.menu-link.active span:after {
    -webkit-transform: rotate(-45deg) translate(.4em, -.3em);
    -moz-transform: rotate(-45deg) translate(.4em, -.3em);
    -ms-transform: rotate(-45deg) translate(.4em, -.3em);
    -o-transform: rotate(-45deg) translate(.4em, -.3em);
    transform: rotate(-45deg) translate(.4em, -.3em);
}

.pure-nav-menu .pure-menu-heading {
    font-size: 125%;
    font-weight: bold;
    color: #fff;
    margin-top: 0;
    border: none;
    padding: 0.5em 0.8em;
    background-color: #000;
    height: 44px;
    visibility: hidden;
}

.pure-nav-menu .pure-menu-selected {
    /*background: #0089FF;*/
}

.pure-nav-menu .pure-menu-selected a {
    color: #ffffff;
    /*background-color: rgba(0,137,255,1);;*/
}

.pure-nav-menu li.pure-menu-selected a:hover,
.pure-nav-menu li.pure-menu-selected a:focus {
    /*background: none;*/
}



/* ---------------------
 * Smaller Module Styles
 * ---------------------
*/

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

.pure-paginator .pure-button {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

.pure-button {
    font-family: inherit;
}
.pure-button:active {
    transform: translateY(1px);
}
a.pure-button-primary {
    color: white;
}

/*.pure-filter {
    -webkit-appearance: none;
    display: inline-block;
}*/
table .pure-filter { max-width: 100px; }
.pure-input.filter-date{
    padding: 0;
}
.pure-input.filter-date input,
.pure-input.filter-date select{
    border: none;
    font-size: .8em;
    padding: .5em 0;
    cursor: pointer;
    text-align: center;
}
.pure-input.filter-date button{
    padding:.5em .2em;
    background: none;
    box-shadow: none;
}


/* green call to action button class */
.notice {
    background-color: #61B842;
    color: white;
}

.muted {
    color: #ccc;
}



/* -------------
 * Table Styles
 * -------------
*/

.pure-table th,
.pure-table td {
    padding: .5em 0 .5em .5em;
    position: relative;
}
/*.pure-table tr { position: relative }
.pure-table tr.processing:after {
    content: '';
    display: block;
    background-color: rgba(0,0,255,.2);
    width: 10%;
    height: 100%;
}*/
.pure-table th{
    white-space: nowrap;
}

.pure-table th select{
    display: inline-block;
    border: none;
    background: transparent;
    color: #000;
    font-weight: bold;
    outline-style: none;
}

.pure-table th.sorted.ascending:after {
    content: " \2191";
}

.pure-table th.sorted.descending:after {
    content: " \2193";
}

.table-responsive {
    /*    margin-left: -1em;
        margin-right: -1em;*/
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1em;
    position: relative;
}
.table-responsive table {
    width: 100%;
    min-width: 35.5em;
    border-left-width: 0;
    border-right-width: 0;
    border: none;
}

.pure-table-horizontal td, .pure-table-horizontal th{ border-top: none; }
.pure-table thead { background-color: #eee }

.table-responsive .mq-table {
    width: 100%;
    min-width: 44em;
}
.mq-table th.highlight {
    background-color: rgb(255, 234, 133);
}
.mq-table td.highlight {
    background-color: rgb(255, 250, 229);
}
.mq-table th.highlight code,
.mq-table td.highlight code {
    background: rgb(255, 255, 243);
}
.mq-table-mq code {
    font-size: 0.875em;
}

/* ----------------------------
 * Example for full-width Grids
 * ----------------------------
*/

.grids-example {
    background: rgb(250, 250, 250);
    margin: 2em auto;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* --------------------------
 * State Rules
 * --------------------------
*/


.is-code-full {
    text-align: center;
}
.is-code-full .code {
    margin-left: auto;
    margin-right: auto;
}


/* --------------------------
 * Responsive Styles
 * --------------------------
*/

@media screen and (min-width: 35.5em) {

    .legal-license {
        text-align: left;
        margin: 0;
    }
    .legal-copyright,
    .legal-links,
    .legal-links li {
        text-align: right;
        margin: 0;
    }

}

@media screen and (min-width: 48em) {

    .l-wrap,
    .l-wrap .content {
        padding-left: 1em;
        padding-right: 1em;
    }
    .content .l-wrap {
        margin-left: -2em;
        margin-right: -2em;
    }

    .header,
    .content {
        /*padding-left: .8em;*/
        /*padding-right: .8em;*/
    }

    .header h1 {
        text-align: left;
        /*font-size: 320%;*/
    }
    .header h2 {
        text-align: left;
        /*font-size: 128%;*/
    }

    .content p {
        font-size: 1.125em;
    }

    .code {
        margin-left: auto;
        margin-right: auto;
        border-left-width: 1px;
        border-right-width: 1px;
    }

    .table-responsive {
        margin-left: auto;
        margin-right: auto;
    }
    .table-responsive table {
        border-left-width: 1px;
        border-right-width: 1px;
    }

}

/*@media (min-width: 58em) {*/

.pure-layout {
    padding-left: 50px; /* left col width ".pure-nav-menu" */
    left: 0;
}
.pure-nav-menu {
    /*left: 94px;*/
}
.menu-link {
    position: fixed;
    left: 94px;
    display: none;
}
.pure-layout.active .menu-link {
    left: 94px;
}

/*}*/





/* --------------------------
 * Components Styles
 * --------------------------
*/

.pure-modal-bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: rgba(0,0,0,.4);
    display: block;
}
.pure-modal-bg .pure-modal{
    background: #fff;
    padding: 1.5em;
    box-sizing: border-box;
    width: auto;
    /*margin: -20em 1em 1em 1em;*/
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 2em 2em rgba(0,0,0,.1);
    transition: all .2s ease-out;
    opacity: .2;
}
.fullsize .pure-modal {
    padding: 0;
}
.pure-modal-bg.show .pure-modal{
    margin: 1em;
    opacity: 1;
}
.pure-modal-bg.show .pure-modal .modal-header .top{
    padding: .5em 1em;
}

.pure-modal-bg.fullsize {
    background: transparent !important;
    pointer-events: none;
}
.pure-modal-bg.fullsize .pure-modal{
    position: absolute;
    top: 44px;
    margin: 0;
    right: 1em;
    bottom: 0;
    width: calc(100% - 94px - 1em);
    pointer-events: all;
}

@media (min-width: 58em){
    .pure-modal-bg .pure-modal{
        width: 60%;
        margin: -20em auto 1em auto;
        opacity: .2;
    }
    .pure-modal-bg.show .pure-modal{
        margin: 1em auto;
        opacity: 1;
        margin-top: 0;
    }
}

.pure-modal-bg .pure-modal h3,
.pure-modal-bg .pure-modal h4{
    margin: 0;
}
.pure-modal-bg .pure-modal h4{
    font-size: 1em;
    /*margin: .5em 0;*/
    color: #666;
}
.pure-modal-bg .pure-modal .modal-header{
    border-bottom: 1px solid #eff2F6;
    padding-bottom: 0em;
    margin-bottom: .8em;
    position: relative;
}
.pure-modal-bg .pure-modal .modal-footer{
    font-size: 1.1em;
    text-align: center;
    position: relative;
}
.pure-modal-bg .pure-modal .modal-footer .pure-button-primary{
    font-weight: bold;
    min-width: 80px;
}
.pure-modal-bg .pure-modal .modal-header .btn-close{
    /*padding: .2em .5em;*/
    padding: 0;
    display: block;
    width: 23px;
    height: 23px;
    position: absolute;
    top: 9px;
    right: 10px;
    background-color:rgba(23,36,71,1);
    color: #fff;
    line-height: 23px;
    border-radius: 50%;
}














/* --------------------------
 * User Styles
 * --------------------------
*/

body{
    font-size: .9em;
    /*letter-spacing: -.01em;*/
    /*background-color: #ddd*/
    /*background-color: #f5f5f5;*/
    background-color: #fff
}
html, body, button, input, select, textarea, .pure-g, .pure-g [class *= "pure-u"]{
    font-family: 'PingFang SC',Arial,'Hiragino Sans GB','\5FAE\8F6F\96C5\9ED1',sans-serif;
    /*font-family: Consolas,Courier,monospace;*/
    /*font-family: poppin,'PingFang SC',Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;*/
}
html{  height: calc(100%)}
code { border-radius: 4px }
textarea.code, textarea.pre { background-color: #fff; margin: 0 }

a { color: #0089FF; transition: all .1s ease-in-out; border-bottom: 1px solid }
a:hover { color: #006 }

aside.error { background-color: #e66 }

/*
table a{ position: relative; transition: all .15s ease-in; }
table a:before,
table a:after {
    content: " ";
    display: block;
    position: absolute;
    left: 50%;
    width: 0;
    bottom: -2px;
    height: 1px;
    background-color: #0089FF;
    transition: all .1s ease-in-out;
}
table a:before{ width: 100%; left: 0; background-color: #666; }
table a:hover:after {
    left: 0;
    width: 100%;
    opacity: .8;
    pointer-events: none;
    height:2px;
}
table a:hover:before { opacity: 0 }
*/

.pure-nav-menu { /*background-color: transparent;*/  background-color: #eee; }
.pure-menu ul { border: none !important; }
.pure-nav-menu .pure-menu li.menu-item-divided { border: none !important }
.pure-nav-menu .pure-menu li span { font-weight: bold }

.tip { position: absolute; display: inline-block; margin: 5px; color:#fff; vertical-align: middle; line-height:20px;text-align: left }
.tip:before { content:'?'; display: inline-block; width:20px; height:20px; background:#BFBFBF; text-align:center; border-radius:100%; }
.alert-tip:before { font-size: 15px; content:'!'; margin: 0 10px 2px 10px; display: inline-block; width:17px; height:17px; line-height: 17px; vertical-align: middle; color:#fff; background:#FF9C00; text-align:center; border-radius:100%; }
.alert-tip { font-size: 14px; color: #FF9C00; display: none;}
.tip.alert:before { content:'?' }
.res-tip.tip:before{content:'?' }
.tip i { display:block; margin:-24px 8px 0 0; position: relative; font-style: normal;text-align: left; opacity: 0; left: 0; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; padding:8px 16px; background: #ff9c00; border-radius: 4px; pointer-events: none;font-size: 13px }
.modal-ap-config .tip i {display: none}
.modal-ap-config  {background-color: #F9FBFF}
.modal-ap-config table th {background-color: #eff2F6 !important;border: 0px solid transparent !important;}
.error .tip i {display: block}
.tip:hover i { display: block; opacity: 1; left: 32px; }
.tip i:before { display: none; position: absolute; top: 4px; left: -1px; -webkit-transform: rotate(45deg); transform: rotate(45deg); border: none; content: ''; height: 14px; width: 14px; background: #ff9c00; }
.tip:hover i:before { display: block; }
.mqtt.tip:hover {
    width: 300px;
    z-index: 99;
    /*word-break: break-all;*/
}
.datapath i {
    width: 0;
    visibility: hidden;
    display: none;
}
.datapath .tip:hover i {
    visibility: visible;
    width: auto;
    display: block;
}
.sqs-tip i {width: 400px}
.mqtt-tip:hover{width:300px; }
.res-tip:hover{width:300px; }
.mqtt-tip:hover[value=en]{width:400px;  }
.encry.mqtt-tip:hover[value=en]{width:300px; }
.encry.mqtt-tip:hover[value=en] i{top:-100px}
.encry.mqtt-tip:hover[value=en] i:before{top:106px}
.tip.error i,
.tip.error i:before { background-color: #e66; color: #fff }
.tip.error i { opacity: .9; left: 5px; }
.tip.error i:before { display: block; }
.tip.error:before { content: '.'; background-color: transparent; }

@media only screen and (max-width: 480px){
    /*
    .tip { position: absolute; right: 0; top: 0; margin: 0 }
    .tip i { right: -10px; left: auto; margin: 0 }
    .tip:hover i { right: 32px; left: auto; }
    .tip:hover i:before { right:-2px; left: auto; }

    .tip.error { position: relative; display: block; width: auto; height: auto; border-radius: 0; background: none; }
    .tip.error i { position: relative; right: 0; left: 0; padding: 0 }
    .tip.error:before, .tip.error i:before { display: none; opacity: 0 }
    .pure-control-group.error { background-color: #e66; color: #fff; padding: .6em; margin: .5em -.6em 0; border-radius: 4px }
    */
}

#el-session {
    margin: 6em auto;
    min-width: 1130px;
    width: 1130px;
    height: 558px;
    background: #FFFFFF;
    box-shadow: 0 0 19px 0 rgba(148,162,175,0.21);
    border-radius: 14px;
    border-radius: 14px;
}
#el-session .error i { min-width: 200px; }
@media only screen and (max-width: 480px){
    #el-session {
        width: auto;
        margin: 4em 1em;
    }
}

.modal-ap-config form .pure-control-group{
    padding: 0 0 1em 0;
    /*border-bottom: 1px solid #eee*/
}
.modal-ap-config form .pure-control-buttons{ text-align: right; padding: 0 .5em }
.modal-ap-config form .pure-button{
    width: 90px;
    margin-right: 10px;
    background-color: #0089FF;
    color: #fff;
}
.btn-cancel {
    background-color: #E6E6E6 !important;
    color: #000 !important;
}
.modal-ap-config form p { margin: .5em 0; }
.modal-ap-config .pure-form-aligned label { text-align: left; width: 25%; margin-right: 2% }
.details .pure-control-group label {width: 25%;text-align: right; }
.bypass label{padding-right: 1.5em}
.details .pure-control-group div.tag {
    width: 70%;
    max-width: 70%;
    display: inline-block;
    border: 1px solid #CCC;
    background-color: #fff;
    height: 2.7em;
    vertical-align: middle;
    border-radius: 4px;
    padding: 0.5em 0 0 0.5em;
    max-height: 20em;
    overflow: auto; }
.pure-control-group div.tag.pure-u-1-2 {width: 50%; max-width: 50%;display: inline-block;border: 1px solid #CCCCCC;background-color: #fff;height: 6em;vertical-align: middle;border-radius: 4px;padding: .5em;max-height: 20em;overflow: auto }
.pure-control-group b {  cursor: pointer;  }
.modal-ap-config .pure-form-aligned select, .modal-ap-config .pure-form-aligned input:not([type='checkbox']), .modal-ap-config .pure-form-aligned textarea { width: 70%; max-width: 70% }
.modal-ap-config input[readonly] { background-color: transparent; }
.modal-ap-config .tip.error { position: relative }
.modal-ap-config .tip.error i:before { display: none }


#el-ap-discover {
    position: fixed;
    bottom: -540px;
    width: 100%;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: all .2s ease-out;
}
#el-ap-discover .pure-box { margin: 0; background-color: #fff; box-shadow: 0 -2em 2em rgba(0,0,0,.1); }
#el-ap-discover.show:before{
    content: '';
    display: block;
    position: fixed;
    background: rgba(0,0,0,.3);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
#el-ap-discover.show{
    display: block;
    bottom: 0;
    opacity: 1;
}
#el-stats .pure-box .header .tag-status { font-size: .7em; color: rgba(0,0,0,.4); padding: .2em .8em; border: none }
/*.charts .header .tag-status { font-size: .7em; color: rgba(0,0,0,.4); padding: .2em .8em; border: none }*/


#el-my-account .iconfont.icon-user{
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 100px;
    border-radius: 100%;
    margin: 30px;
    /*border: 5px solid;*/
    color: #0089FF;
}
#el-setting .pure-navbar{
    position: fixed;
    top: 4em;
    right: 2em;
}
@media only screen and (max-width: 480px){
    #el-setting .pure-navbar{
        position: static;
    }
    #el-setting .pure-navbar .pure-button{
        width: 100%;
    }
}

.pure-topnav {
    /*background-color: #333;*/
    background-color: #222;
    color: #fff;
    top: 0px;
    right: 0px;
    left: 0px;
    height: 44px;
    z-index: 2;
    position: fixed;
    box-shadow: 0 1px 0 0 rgba(0,0,0,.05),0 2px 4px 0 rgba(0,0,0,.1);
}

.pure-topnav h1 {
    display: inline-block;
    padding: 0 0 0 3em;
    margin: 0;
    font-size: 1.2em;
    line-height: 44px;
    transition: all .2s ease-out;
}
.pure-topnav h1 small { font-weight: normal }
.pure-topnav .license-notify { background-color:#fc3; color:#000; padding:.2em }
.pure-topnav .user {
    right: 0;
    top: 0;
    height: 44px;
    line-height: 44px;
    text-align: right;
    position: absolute;
}
.pure-topnav .user a{ color: #fff; border: none; }
.pure-topnav .user i.iconfont { font-size: 1.5em ;vertical-align: middle}
.pure-topnav .user label{ padding: 0 .5em; display: inline-block; vertical-align: middle; }
.pure-topnav .user label.user-profile span{
    max-width: 15em;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}

.pure-topnav .user label.user-help span{
    max-width: 15em;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}

.pure-topnav .user .user-events span{
    background: #e66;
    font-size: 12px;
    padding: 0 5px;
    border-radius: 5px;
    border: none;
    position: relative;
    top: -10px;
    left: -10px;
}

.pure-layout.active .pure-topnav h1 { padding: 0 0 0 3em; }
@media (min-width: 58em) {
    .pure-topnav h1 { padding: 0 0 0 1em; }
}

@media only screen and (max-width: 480px){
    .pure-form-aligned .pure-control-group { position: relative; }
    .pure-form-aligned .pure-control-group input,
    .pure-form-aligned .pure-control-group textarea,
    .pure-form-aligned .pure-control-group select
    {
        display: block;
        width: 100%;
    }
}

.main { margin-top: 3em }

.pure-g {
    letter-spacing: 0 !important;
}

.pure-input, .pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form select, .pure-form textarea {
    box-shadow: none;
}
.pure-button { border-radius: 4px }
.pure-button:hover { background-image: linear-gradient(rgba(255,255,255,.2) 0%,rgba(255,255,255,.2) 100%); transform: translateY(-1px); box-shadow: 0 1px 1px 0 rgba(0,0,0,.2) }
.pure-button:active { box-shadow: none }
.details .pure-button {  float: right;  }
.details .clear { clear: both}
.pure-form select { height: auto }
/*.pure-box { background-color: #fff; border-radius: 4px; padding: .01em 1em .01em 1em; margin-bottom: 1em; position: relative; transition: all .2s ease-out; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05); }*/
.pure-box { padding: .01em 1em; border-bottom: 1px solid #eee; position: relative }
#el-ap .pure-box {border: none;}
.pure-box-s { padding-right: .5em; padding-left: .5em }

#el-ap .license-alert.show{ width: calc(100% - 64px); left: 54px;background-color: #FFDBA3;height: 30px;position: fixed;top: 44px;width: 100%;z-index: 9;line-height: 30px;color:#E79311;font-size: 14px;padding-left: 1em}
#el-ap .license-alert.show+.pure-box{padding-top: 3em}
#el-ap .license-alert.show+.pure-box .header.fixed{ top: 70px;}
.pure-box .header{ padding: 0; }
.pure-box .header.fixed {
    position: fixed;
    width: calc(100% - 64px);
    z-index:1;
    background: #fff;
    top: 44px;
    left: 65px;
}
.pure-box .header.fixed h1,
.pure-box .header.fixed h2 { /*padding-left: 1em*/margin-bottom: 0px }
.pure-box .header h1,
.pure-box .header h2,
.pure-modal-bg .pure-modal h4{ color: #000; position: relative; }
#el-dashboard .pure-box .header h2 {color: #74777C;  margin-bottom: .5em;  padding-left: 1em;display: inline-block;
    font-size: 1em;}
#el-dashboard .pure-box .header  {border-bottom: 1px solid #eee }
#el-dashboard .pure-box   {border-bottom: none }
#el-dashboard .charts .header span   {display: inline-block; height: 30px;border-bottom: 2px solid transparent;margin-right: 1em;cursor: pointer}
#el-dashboard .charts .header span.active {color:#0089FF;border-color: #0089FF;
    font-weight: bold;}
/*#el-dashboard .charts canvas {  width: 100% !important; height: 300px!important;}*/
#el-dashboard .containt {  padding-top: 20px;text-align: center}
#el-dashboard .containt select{ width: 100% }
#el-dashboard .containt ul,#el-dashboard .containt ul li{  list-style: none;  margin: 0;  padding: 0;  font-size: 1em; }
#el-dashboard .containt ul li{height: 60px}
#el-dashboard .containt li .index{  display: inline-block;width: 20px;height: 20px;text-align: center;line-height: 20px;
    margin-right: 10px;color: #fff;  margin-left: 0px;  float: left;border-radius: 5px}
#el-dashboard .containt li .router{  display: inline-block;width: 45%;height: 20px;text-align: left;line-height: 20px;max-width:45%;overflow: hidden;  text-overflow:ellipsis;  white-space: nowrap;padding-left: 1em}
#el-dashboard .containt li b.router{width: 30%;max-width: 35%;padding: 0}
#el-dashboard .containt li:nth-child(1) .index {background-color: rgba(73,127,229,1)}
#el-dashboard .containt li:nth-child(2) .index {background-color: rgba(73,127,229,.9)}
#el-dashboard .containt li:nth-child(3) .index {background-color: rgba(73,127,229,.8)}
#el-dashboard .containt li:nth-child(4) .index {background-color: rgba(73,127,229,.7)}
#el-dashboard .containt li:nth-child(5) .index {background-color: rgba(73,127,229,.6)}
#el-dashboard .containt li:nth-child(6) .index {background-color: rgba(73,127,229,.5)}
#el-dashboard .containt li:nth-child(7) .index {background-color: rgba(73,127,229,.4)}
#el-dashboard .containt li:nth-child(8) .index {background-color: rgba(73,127,229,.35)}
#el-dashboard .containt li:nth-child(9) .index {background-color: rgba(73,127,229,.25)}
#el-dashboard .containt li:nth-child(10) .index {background-color: rgba(73,127,229,.2)}




.pure-box .header h2:before,
.pure-modal-bg .pure-modal h4:before{
    /* content: '';
     display: inline-block;
     margin-right: .5em;
     width: 6px;
     height: 18px;
     background-color: #0089FF;
     vertical-align: sub;
     border-radius: 2em;
     opacity: .7; */
}
.pure-box .pure-navbar { position: absolute; right: 1em; top: 0; font-size: 1em; transition: all .2s ease-out; }

.pure-box-s .header {padding: 0 .5em;}
.pure-tabs {padding-top: 0.5em;  height: 38px;}
.pure-tabs a{ color: #666; letter-spacing: 0; margin: 0 1em ; text-decoration: none; border-bottom: 2px solid transparent;padding-bottom: .2em; }
.pure-tabs a.active, .pure-tabs a:hover, .pure-tabs a:active{ color: #0089FF; border-width: 2px; border-color: #0089FF;display: inline-block ;
    font-weight: bold;}
.modal-header .pure-tabs { font-size: 1.1em }

select.pure-paginator {
    -webkit-appearance: none;
    height: 1.6em;
    overflow-y: hidden;
    outline: none;
    border: none;
    cursor: pointer;
}
select.pure-paginator option { display: inline-block; border-radius: 4px; padding: .2em .5em }

.pure-paginator { display: inline-block; vertical-align: middle; }
.pure-paginator a { float: left; border-radius: 2px; color:#666; border: none; padding: 0 .4em }
.pure-paginator a[selected] { color:#fff; background-color: #0089FF }
.pure-paginator:after{ content: ''; display: block; clear: both }

.button-success,
.button-error,
.button-warning {
    color: white;
}

.button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.button-xsmall {
    font-size: 70%;
}

.button-small {
    font-size: 85%;
}

.button-large {
    font-size: 110%;
}

.button-xlarge {
    font-size: 125%;
}


.tag-green, .tag-blue, .tag-purple, .tag-red,
.tag-status{
    border-radius: 2px;
    padding: 0em ;
    background-color: #fff;
    text-transform: uppercase;
    color: #333;
    border: 1px solid;
    font-size: .5em;
    /*font-weight: bold;*/
    vertical-align: middle;
    display: inline-block;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 10px;
    white-space: nowrap;
}

.tag-status[value='online'],.tag-status[value='offline'] {
    width: 6em;
    position: relative;
    padding-right: 1.5em;
}
.tag-status[value='online'] img,.tag-status[value='offline'] img {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
}

#el-device .tag-status {width: auto;}
h2 .tag-status {
    width: auto;
}
.tag-gray{
    color: #aaa !important;
    border-color: #aaa !important;
}
.tag-green, .tag-status[value=online], .tag-status[value=connected],.tag-status[value=rebooting],.tag-status[value=running] {
    background-color: #5d7 !important;
    border-color: #5d7 !important;
    color: #ffffff;
}
.tag-blue, .tag-status[value=updating] , .tag-status[value=deleting] , .tag-status[value=reseting] , .tag-status[value=downloading], .tag-status[value=installing]{
    color: #69f !important;
    border-color: #69f !important;
}
.tag-purple, .tag-status[value=detected]  {
    color: #86e !important;
    border-color: #86e !important;
}
.tag-status[value=offline],.tag-status[value=not_support],.tag-status[value=not_exist] , .tag-status[value=stop], .tag-status[value=unknown]{
    background-color: #BABABA !important;
    border-color: #BABABA !important;
    color: #ffffff;
}
.tag-status[value=update_ok] ,.tag-hide{
    display: none
}
.tag-red, .tag-status[value=update_fail], .tag-status[value=error] {
    background-color: #e66 !important;
    border-color: #e66 !important;
    color: #ffffff;
}
i.tag-status[value=update_ok]  {
    color: #5d7 !important;
    border-color: #5d7 !important;
    cursor: pointer;
    font-size: 1em;
    font-weight: bolder;
    /*text-align: center;*/
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
i.tag-status[value=update_fail]  {
    /*display: none !important;*/
    /*font-size: 1em;*/
    color: #e66 !important;
    border-color: #e66 !important;
    padding: 0;
    cursor: pointer;
    font-weight: bolder;
    text-align: center;
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
}
.tag-group {
    /*/!*width: 30px;*!/*/
    max-width: 9em;
    font-size: .9em;
    font-weight: normal;
    color: #000;
    background-color: #F7F8F9;
    padding: 0em 1em 0em .25em;
    display: inline-block;
    /*text-align: center;*/
    border-radius: 25px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    vertical-align: middle;

}
.tag-group[title='']{display: none}
.tag-group:before{color:#8692a8 ;font-size: .8em;vertical-align: middle}
.tag-group[value="F07C7C"]:before,.tag-group[id="F07C7C"]:before{  color: #F07C7C;}
.tag-group[value="7cA3F0"]:before,.tag-group[id="7cA3F0"]:before{  color: #7cA3F0;}
.tag-group[value="91c6d8"]:before,.tag-group[id='91c6d8']:before{  color: #91c6d8;}
.tag-group[value="91d891"]:before,.tag-group[id="91d891"]:before{  color: #91d891;}
.tag-group[value="d8b291"]:before,.tag-group[id="d8b291"]:before{  color: #d8b291;}
.tag .tag-group {
    max-width: 35em;
    /*margin-left: .5em;*/
    margin-bottom: .3em;
}
.tag-group:before {
    margin-right: .6em;
}
.config-ap-list{
    max-height: 200px;
    overflow-y: auto;
    font-size: .8em
}
.config-ap-list table{ width: 100% }
.config-ap-list table td, .config-ap-list table th{ padding: .2em }


.map-thumbnail,
.map-thumbnail-add{
    margin: .5em;
    background: #fff;
    border-radius: 4px;
    transition: all .2s ease-out;
    position: relative;
    border: 1px solid #ddd;
}

.map-thumbnail.selected{
    box-shadow: 0 0 0 2px #0089FF;
}
.map-thumbnail-add.btn-add , .map-thumbnail-add.btn-add-site{
    color: #0089FF;
    cursor: pointer;
    text-align: center
}

.map-thumbnail.remove{
    transform: scale(0,0);
}

.map-thumbnail .pic,
.map-thumbnail-add.btn-add .pic , .map-thumbnail-add.btn-add-site .pic{
    height: 154px;
    background-repeat: no-repeat;
    background-color: #eee;
    background-size: cover;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.map-little {
    display: inline-block;
    width: 49%;
    background-size: 100%;
    height: 72px;
    margin-bottom: -2px;
    cursor: pointer;
    position: relative;
}
.groupList {
    position: relative;
}
.groupList .map_num {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    background-color: #000;
    height: 20px;
    text-align: center;
    line-height: 20px;
    opacity: 0.4;
    color: #fff;
}
.map-thumbnail-add.btn-add .pic , .map-thumbnail-add.btn-add-site .pic{
    background-color: #fff;
    font-size: 5em
}
.map-thumbnail .pic .g{
    opacity: 0;
    position: absolute;
    background: rgba(0,0,0,.5);
    width: 100%;
    height: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transition: all .2s ease-out;
}
.map-thumbnail .pic:hover .g{
    opacity: 1;
}
.map-thumbnail .pic button{
    position: absolute;
    left: 25%;
    top: 100%;
    margin-top: -16px;
    width: 50%;
    background: #0089FF;
    border: none;
    color: #fff;
    border-radius: 4px;
    line-height: 2em;
    opacity: .5;
    transition: all .2s ease-out;
}
.map-thumbnail .pic:hover button{
    top: 50%;
    opacity: 1;
}
.pic .add-icon {
    color: #fff;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 30px;
}
.map-thumbnail .info,
.map-thumbnail-add .info{
    border-top: 1px solid #ddd;
    padding: 10px;
    position: relative;
    overflow: hidden;
    height: 3em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.map-thumbnail .info .btn-del, .map-thumbnail .info .btn-edit , .map-thumbnail .info .btn-del-site, .map-thumbnail .info .btn-edit-site  {
    position: absolute;
    font-size: 2em;
    background: none;
    box-shadow: none;
    padding: .5em;
    right: -10px;
    bottom: -18px;
}
.map-thumbnail .info .btn-del:hover, .map-thumbnail .info .btn-edit:hover  ,.map-thumbnail .info .btn-del-site:hover, .map-thumbnail .info .btn-edit-site:hover{
    color: #0089FF;
}
.map-thumbnail .info .btn-edit ,.map-thumbnail .info .btn-edit-site {
    right: 20px;
}
.map-thumbnail-add .info { border-top-color: transparent;  }


button.btn-replace-map {
    font-size: 1.5em;
    background-color: #ccc;
    padding: .3em .5em;
    position: absolute;
    right: 0;
    z-index: 99;
}

input.map-range-zoom[type=range]{
    transform: rotateZ(-90deg);
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 50px -30px 80px 0;
    width: 94px;
    height: 40px;
    outline: none;
}

.map-basemap{
    position: relative;
    background-color: #eee;
}

.map-basemap .map-upload-box{
    text-align: center;
    margin: 0 auto;
    width: 50%;
    padding-top: 20%
}
.map-basemap .map-upload-box p{
    font-size: 16px;
    font-family:Helvetica;
}

/*.map-basemap .btn-upload-map{*/
/*position: relative;*/
/*overflow: hidden;*/
/*font-size: 6em;*/
/*color: #0089FF;*/
/*border: 2px dashed;*/
/*border-radius: 20px;*/
/*background: transparent !important;*/
/*}*/
/*.map-basemap .btn-upload-map input{*/
/*opacity: 0;*/
/*left: 0;*/
/*position: absolute;*/
/*}*/

.map-content{
    position: relative;
    background-color: #fff;
}

.map-editor-content { overflow: hidden }

.map-ap-list{
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
}
.map-ap-list .map-ap-list-item{
    border-bottom: 1px solid #ccc;
    margin: .6em .8em;
    /*padding: 0 0 .5em 0;*/
    position: relative;
}

.map-ap-list .map-ap-list-item.selected{
    background-color: #eee;
}
.map-ap-list .map-ap-list-item h4{
    margin: 0;
    font-size: 1em;
    font-weight: normal;
}
.map-ap-list .map-ap-list-item h4 b{
    display: inline-block;
    width: 33%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    vertical-align: top;
}
.map-ap-list .map-ap-list-item .tag-status,
.map-ap-list .map-ap-list-item code { font-size: .8em }

.map-ap-list .map-ap-list-item .btn-del-ap,
.map-ap-list .map-ap-list-item .btn-add-ap{
    position: absolute;
    right: 0;
    bottom: .6em
}
.map-ap-list .map-ap-list-item .position{
    position: relative;
    padding-left: 1.5em;
    display: block;
}
.map-ap-list .map-ap-list-item .position:before{
    content: '';
    display: block;
    position: absolute;
    border-radius: 2em;
    width: 14px;
    height: 14px;
    left: 0;
    vertical-align: middle;
    background-color: #888;
}
.map-ap-list .map-ap-list-item .position:after{
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    left: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid #888;
}
.map-ap-list .map-ap-list-item .position.thismap:before{
    background-color: #f30;
}
.map-ap-list .map-ap-list-item .position.thismap:after{
    border-top-color: #f30;
}
.map-ap-list .map-ap-list-item .position.none:before{
    background-color: #ddd;
}
.map-ap-list .map-ap-list-item .position.none:after{
    border-top-color: #ddd;
}




.throughput-item { padding-top: 30px;height: 3.5em }
.throughput-bt { margin-bottom: 10px }
.throughput-item label{
    vertical-align: middle;
    display: block;
}
.throughput-item small{  color: gray;}
.throughput-item label i{
    font-size: .8em;
    color: #999;
    padding-left: 1em;
}
.throughput-item span{
    vertical-align: middle;
    display: inline-block;
    width: 49%;
    position: relative;
    text-align: center;
}
.throughput-item span.unit {
    display: inline;
}
.throughput-item span b { position: relative; padding-left: 25px; font-size: 2em ;padding-right: 5px}
.throughput-item span b:before,
.throughput-item span b:after{ display: block; content: ''; position: absolute; }
.throughput-item span.up b:before{
    width: 0;
    left: 0;
    top: -2px;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #F2B218;
    border-width: 6px;
}
.throughput-item span.up b:after{
    left: 5px;
    height: 20px;
    width: 2px;
    top: 10px;
    background-color: #F2B218;
}
.throughput-item span.down b:before{
    width: 0;
    left: 1px;
    top: 24px;
    border-style: solid;
    border-color: transparent;
    border-top-color: #497FE5;
    border-width: 6px;
}
.throughput-item span.down b:after{
    left: 6px;
    height: 20px;
    width: 2px;
    top: 4px;
    background-color: #497FE5;
}

.system-item { padding-top: 12px;height: 3.5em}
.ram-item { margin-bottom: 10px }

.system-item label{
    vertical-align: middle;
    display: block;
}
.system-item label i{
    font-size: .8em;
    color: #999;
    padding-left: 1em;
}
.system-item .progress-bar{
    display: inline-block;
    vertical-align: middle;
    height: 1.5em;
    position: relative;
    background: #F1F1F1;
    overflow: hidden;
    border-radius: 1em;
    width: 80%;
}
.system-item .progress-bar i{
    display: inline-block;
    height: 100%;
    -webkit-transition: all .3s ease-in;
    transition: all .3s ease-in;
    border-radius: 1em;
}
.system-item .progress-bar.low i{ background-color: #6D99EA }
.system-item .progress-bar.medium i{ background-color: #6D99EA }
.system-item .progress-bar.high i{ background-color: #6D99EA }
.system-item.disk-item .progress-bar.high+b{ color:#fa0000 ;}

.disk-item .progress-bar i.log {
    margin-left: -4px;
    background-color: #6699FF;
    border-radius: 0;
    border-bottom-left-radius: 1em;
    border-top-left-radius: 1em;
}
.disk-item .progress-bar i.database {
    margin-left: -4px;
    background-color: #FF99CC;
    border-radius: 0;
}
.disk-item .progress-bar i.others {
    margin-left: -4px;
    background-color: #FF9900;
    border-radius: 0;
    border-top-right-radius: 1em;
    border-bottom-right-radius: 1em;
}
.disk-item .progress-bar i {
    margin-left: -4px;
    background-color: #6699FF;
}

.system-item  b{
    /*position: absolute;*/
    /*text-align: center;*/
    /*left: 0;*/
    /*top: 10px;*/
    /*width: 100%;*/
    font-size: 1.5em;
    display: inline-block;
    width: 18%;
    text-align: right;
    position: relative;
    top: 5px;
}

.ap-item, .device-item{
    /*height: 200px;*/
    text-align: left;
    margin-bottom: 10px;
    padding-left: 5%;
}
.ap-item.disabled, .device-item.disabled{
    opacity: .4
}
.ap-item.disabled canvas, .device-item.disabled canvas{
    border-radius: 100%;
    background-color: #ddd
}
.ap-item canvas, .device-item canvas{
    display: inline-block;
    vertical-align: middle;
    width: 120px !important;
    height: 120px !important;
    margin: 20px 0;
}
.ap-item ul, .device-item ul{
    list-style: none;
    margin: 0;
    padding: 0 0 0 7%;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10%;
    margin-top: 55px;
}
.ap-item li b, .device-item li b{
    font-weight: normal;
    display: inline-block;
    font-size: 1.5em;
    /*padding-left:  1em;*/
    position: relative;
    width: 3.3em;
    max-width: 3.3em;
}
.ap-item li b:before, .device-item li b:before {
    display: inline-block;
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    left: -1.5em;
    top: 12px;
}
.online b:before {
    background-color: RGB(76,224,106);
}
.offline b:before {
    border: 1px solid RGB(76,224,106);
}
.connected b:before {
    background-color: RGB(73, 127, 229);
}
.detected b:before {
    border:1px solid RGB(73, 127, 229) ;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: visible;
    height: 400px;
}
@media only screen and (max-width: 1024px){
    .timeline{
        overflow-y: auto;
    }
}
.timeline > li {
    margin: 0 0 0 4px;
    padding: 0 0 1em 1.2em;
    position: relative;
    border-left: 3px #eee solid;
    position: relative;
}
.timeline > li:before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #ccc;
    position: absolute;
    left: -7px;
    top: 0;
    border-radius: 100%;
}
.timeline p { font-size: 1em; margin: 0 }
.timeline h3 { font-size: 1em; margin: 0 }

.timeline .date {
    color: #999;
    padding-bottom: .5em;
    font-size: .8em
}
.timeline-content {
    padding: .5em;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.timeline > li.alert{
    border-color: #e66;
}
.timeline > li.alert .timeline-content{
    background-color: #e66;
    border-color: #e66;
    color: #fff;
}
.timeline > li.alert a { color: #fff; border-color: #fff; }
.timeline > li.alert:before{
    background-color: #e66;
}
.timeline > li.warning{
    border-color: #fc3;
}
.timeline > li.warning .timeline-content{
    background-color: #fc3;
    border-color: #fc3;
}
.timeline > li.warning a { color: #000; border-color: #000; }
.timeline > li.warning:before{
    background-color: #fc3;
}



.lab .pure-topnav h1:after { content: 'LAB'; margin-left:1em; font-size: 14px; padding: 4px 8px; color: #000; background-color: #0f6 }

.spin {
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}
.loading {
    box-sizing: border-box;
    border-radius: 9em;
    border: 3px solid rgba(0,0,0,.2);
    border-top-color: #0089FF;
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    display: inline-block;
    vertical-align: middle;
}
.loading.small              { width: 15px; height: 15px }
.loading, .loading.noraml   { width: 30px; height: 30px }
.loading.large              { width: 80px; height: 80px }
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}











/* line 2, ../sass/_sortable.sass */
table[data-sortable] {
    border-collapse: collapse;
    border-spacing: 0;
}
/* line 6, ../sass/_sortable.sass */
table[data-sortable] th {
    vertical-align: bottom;
    font-weight: bold;
}
/* line 10, ../sass/_sortable.sass */
table[data-sortable] th, table[data-sortable] td {
    text-align: left;!important;
    position: relative;
    /*padding: 10px;*/
}
/* line 14, ../sass/_sortable.sass */
table[data-sortable] th:not([data-sortable="false"]) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    cursor: pointer;
}
/* line 26, ../sass/_sortable.sass */
table[data-sortable] th:after {
    content: "?";
    visibility: hidden;
    display: inline-block;
    opacity: .5;
    margin-left: 0.6em;
    font-weight: lighter;
    /*  vertical-align: inherit;
      height: 0;
      width: 0;
      border-width: 5px;
      border-style: solid;
      border-color: transparent;
      margin-right: 1px;
      position: absolute;
      right: 0;*/
    /*margin-left: 10px;*/
    /*float: right;*/
}
/* line 40, ../sass/_sortable.sass */
table[data-sortable] th[data-sorted="true"]:after {
    visibility: visible;
}
table[data-sortable] th[data-sortable="false"]:after {
    display: none;
}
/* line 43, ../sass/_sortable.sass */
table[data-sortable] th[data-sorted-direction="descending"]:after {
    /*  border-top-color: #000 !important;
      margin-top: 8px;*/
    transform: rotateZ(90deg);
}
/* line 47, ../sass/_sortable.sass */
table[data-sortable] th[data-sorted-direction="ascending"]:after {
    /*  border-bottom-color: #000 !important;
      margin-top: 3px;*/
    transform: rotateZ(270deg);
}
table[data-sortable] th[data-sorted-direction="descending"],
table[data-sortable] th[data-sorted-direction="ascending"]{
    background-color: #dee5ed;
    visibility: visible;
}


/* line 9, ../sass/sortable-theme-light.sass */
/*table[data-sortable].sortable-theme-light tbody td {
  border-top: 1px solid #e0e0e0;
}*/
/* line 12, ../sass/sortable-theme-light.sass */
/*table[data-sortable].sortable-theme-light th[data-sorted="true"] {
  background: #e0e0e0;
}*/





[type="date"],[type="week"],[type="month"] {
    position: relative;
}
[type="date"]::-webkit-clear-button,
[type="date"]::-webkit-inner-spin-button,
[type="week"]::-webkit-clear-button,
[type="week"]::-webkit-inner-spin-button,
[type="month"]::-webkit-clear-button,
[type="month"]::-webkit-inner-spin-button
{
    display:none;
}
[type="date"]::-webkit-calendar-picker-indicator,
[type="week"]::-webkit-calendar-picker-indicator,
[type="month"]::-webkit-calendar-picker-indicator
{
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0
}
/*[type="date"]::-webkit-datetime-edit-text {
  color: transparent;
}
[type="date"]::-webkit-datetime-edit-text::before {
  content: '-';
  position: absolute;
}*/
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-ampm-field {
    background: none;
}

::-webkit-input-placeholder { /* WebKit browsers */
    °°°°color:#aaa;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    °°°°color:#aaa;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    °°°°color:#aaa;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    °°°°color:#aaa;
}

::selection {
    background-color: #def;
    color: #0089FF;
}

::-moz-selection {
    background-color: #def;
    color: #0089FF;
}

::-webkit-selection {
    background-color: #def;
    color: #0089FF;
}

form::-webkit-scrollbar, div::-webkit-scrollbar, table::-webkit-scrollbar, textarea::-webkit-scrollbar {
    -webkit-appearance: none;
    background-color: #eee;
    width: 8px;
    height: 8px
}

form::-webkit-scrollbar, div::-webkit-scrollbar-thumb, table::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #bbb
}


.setting-div{
    /*display: none;*/
    position: fixed;
    width: 200px;
    /*height: 20px;*/
    background-color: #fff;
    top: 103px;
    font-weight: normal;
    z-index: 100;
    /*border: 1px solid darkgray;*/
    box-shadow: 5px 3px 6px rgba(200,200,200,.4);
    border-radius: 5px;
}
.column-detail input , .column-detail select{
    margin-left: 20px;
}
.column {
    /*border-bottom: 1px solid darkgray;*/
    padding: 5px 0;
}
.column:nth-child(1){
    border-top: 1px solid #eff2F6;
}
.column:nth-last-child(1){
    border-bottom: none;
}

.paginator {font-size: 12px;margin-top: 5px;padding-top: 20px;border-top: 1px solid #eee}
.paginator .select,.paginator .pagination {
    float: left;
    margin-left: 10px;
}

.pagination a {
    text-decoration: none;
    border: 1px solid #AAE;
    /*color: #15B;*/
}
.pagination a, .pagination a, .pagination span {
    display: inline-block;
    width: 28px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.pagination .current {
    background: #18E;
    color: #fff;
    border: 1px solid #18E;
}
.pagination .current.prev , .pagination .current.next {
    border: 1px solid #AAE;
}

button.current {
    display: inline-block;
    padding: 0 0.33em;
    /*width: 30px;*/
    height: 26px;
    background: #26B;
    color: #fff;
    border: 1px solid #AAE;

}
button.current[disabled] {
    color:#999;
    border-color:#999;
    background:#fff;
}

.pagination .current.prev, .pagination .current.next{
    color:#999;
    border-color:#999;
    background:#fff;

}
.pagination .prev, .pagination .next {
    width: auto;
    height: 26px;
    box-sizing: border-box;
    display: inline-block;
    padding: 0 0.4em;
    margin-right: 5px;
    margin-bottom: 5px;
}
/*.ap-setting:before { content: "*"; }*/
.show-head {
    width: 100%;
    border: 1px solid #eff2F6;
    padding: 0.5em 1em;
    border-radius: 4px;
    margin-bottom: 10px;
    background-color: #FFFFFF;
}
.show-head .toggle {
    cursor: pointer;
}
.show-head .deployment {
    cursor: pointer;
}
.show-head .toggle span:nth-child(1) {
    position: relative;
    display: inline-block;
    width: 20px;
    /*height: 30px;*/
}
.show-head .deployment span:nth-child(1) {
    position: relative;
    display: inline-block;
    width: 20px;
    /*height: 30px;*/
}
.show-head .toggle span:nth-child(1):before {
    display: inline-block;
    position: absolute;
    content: "+";
    top: -11px;
    left: 0px;
    width: 12px;
    height: 12px;
    background-color: rgba(120,120,120,1);
    line-height: 10px;
    color: #fff;
    text-align: center;
}
.show-head .deployment span:nth-child(1):before {
    display: inline-block;
    position: absolute;
    content: "";
    top: -15px;
    left: 0px;
    width: 18px;
    height: 18px;
    line-height: 10px;
    color: #fff;
    text-align: center;
    background: url("/assets/css/fonts/wrench.png") no-repeat;
}
.show-head .toggle span.fold:before{
    content: "-";
}
.show-head .toggle h4 {
    display: inline;
    color:#505050;
    position: relative;
    margin-left: 1em;
}

.show-head .toggle>span+h4 {
    margin-left: 0;
}
.show-head .deployment h4:before {
    width: 3px;
    height: 12px;
    content: '';
    position: absolute;
    background-color: #505050;
    top: 2px;
    left: -15px;

}
.show-head .deployment>span+h4:before {
    width: 0;
}
.show-head .deployment h4 {
    display: inline;
    color:#505050;
    position: relative;
    margin-left: 1em;
}

.show-head .deployment>span+h4 {
    margin-left: 0;
}
.show-head .deployment h4:before {
    width: 3px;
    height: 12px;
    content: '';
    position: absolute;
    background-color: #505050;
    top: 2px;
    left: -15px;

}
.show-head .deployment>span+h4:before {
    width: 0;
}
.show-head .details {
    padding-left: 1em;
    /*max-height: 300px ;*/
    overflow: hidden;
}
.show-head .details div {
    padding: 0.1em 0;
    line-height: 22px;
}
.show-head .details div b {
    color: #505050 ;
}
.t-detail .show-head .details>div {
    border-bottom: 1px solid #eff2F6;
}
.show-head .details>div {
    padding: 0.5em 0;
}
.show-head .details>div:nth-last-child(1) {
    border: none;
}
.chip-params-detail {
    display: none;
}
.detail div input {
    border: none;;
    outline: none;
    box-shadow: none;
}
#container {margin: 10px auto;}
#container span {position: relative;}
#container span label {width: auto;height: auto }
#container .input_check {position: absolute;visibility: hidden;}
#container .input_check+label {display: inline-block;width: 16px;height: 16px;
    background-color: #7cA3F0;border-radius: 50%;
    position: relative;}
#container .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 7px;width: 13px;height: 8px;
    border: 2px solid #ffffff;border-top-color: transparent;border-right-color: transparent;
    color: #ffffff;
    -ms-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -webkit-transform: rotate(-60deg);
    transform: rotate(-45deg);}
.add-tag {display: none}
.select-tag b span {margin-left: 1em;color: #505050}
.mac-length{height: 23px;width: 23px;line-height: 20px;margin-left: 1em;border: 1px solid #000;border-radius: 50%;display: inline-block;text-align: center}

.moreOperte {
    display:inline-block;
    /*background-color: red;*/
    position: absolute;
    top: 40px;
    left: 0px;
    display: none;
    font-family: 'PingFang SC',Arial,'Hiragino Sans GB','\5FAE\8F6F\96C5\9ED1',sans-serif;
    padding: 0;
    box-shadow: 5px 3px 6px rgba(200,200,200,.4);
    border-radius: 5px;
    /*overflow: hidden;*/
    z-index: 10;
    font-size: 12px;
    color: #505050
}
.moreOperte h3 {padding: 0;margin: 0;height: 26px;line-height: 26px}
.moreOperte div.item {
    text-align: left;
    /*padding-left: 10px;*/
    box-sizing: border-box;
    display: block;
    /*height: 26px;*/
    background-color: #fff;
    /*line-height: 26px;*/
    width: 150px;
    position: relative;
}
.moreOperte div[disabled]{
    color: #E6E6E6;
    cursor: default;
}
.moreOperte .circle:after {
    content: '';
    display: inline-block;
    position: absolute;
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(216,216,216,1);
    border-left: 5px solid transparent;

    top: 11px;
    right: 10px;
}
.moreOperte .circle:hover:after{
    top: 10px;
    right: 6px;
    border-top: 5px solid transparent;
    border-left: 5px solid rgba(216,216,216,1);
    border-bottom: 5px solid transparent;
}
.moreOperte .itembox {
    position: absolute;
    left: 150px;
    top: 0;
    height:0px;
    transition-property:all;
    transition-duration:.5s;
    overflow: hidden;
    background-color: #fff;
}
.moreOperte .item span , .moreOperte .itembox div {
    display: block;
    padding: 0;
    margin: 0;
    height: 26px ;
    line-height: 26px;
    padding-left: 10px;
}
.moreOperte .item span:hover {
    background-color: #eff2F6;
    color: #0089FF;
}
.moreOperte .item:hover .itembox{width: 80px;height: 82px}
.moreOperte .item:hover .itembox.container{width:90px;height: 130px}
.moreOperte .item:hover .itembox.app{width:90px;height: 52px}
.moreOperte .item:hover .itembox.router{width:120px;height: 104px}
.moreOperte .item:hover .itembox.router-exp{width:90px;height: 52px}
.moreOperte .itembox div:hover {
    background-color: #eff2F6;
    color: #0089FF;
    /*background-color: red;*/
}
.moreOperte .itembox div[disabled]:hover {
    background-color: #FFFFFF;
    color: #E6E6E6;
    cursor: default;
    /*background-color: red;*/
}

.pure-navbar button.icomoon {
    padding: 0px;
}
.pure-navbar button.icomoon:before{font-size: 2em}
/* for THINaer hidden*/
#el-device-policy, #el-ap-policy/*, .pure-box.stats-throughput*/ {
    display: none
}
.mqtt_err tr, .sqs_err tr{ display:none}
.pure-table th {  background-color: #eff2F6;}
.pure-table tr:hover {  background-color: rgb(250,250,250);cursor: pointer}
.pure-table tr code {  background-color: transparent}

span.select {
    font-weight: normal;
    font-size: .8em;
    width: 100px;
    display: inline-block;
    position: relative;
    top: 4px;
    cursor: pointer;
    white-space:nowrap;!important;
}
span.select.size {  top: -1px;}
span.select .main {
    border-radius: 5px;
    position: absolute;
    left: 0;
    display: inline-block;
    top: -3px;
    background-color: #FFFFFF;
    /*border: 1px solid #000;*/
    box-shadow:5px 3px 6px rgba(200,200,200,.4);
    overflow: auto;
    max-width: 300px;
    max-height: 300px;
    /*font-size: 12px;*/
}
span.select .main.size {
    top: -142px;
}

span.select .main.hidden{
    display: none;
}
span.select .main span {
    display: block;
    width: auto;
    min-width: 100px;
    height: 26px;
    line-height: 26px;
    max-width: 300px;
    padding-left: 10px;
    font-size: 12px;
}
span.select .main span:hover {
    background-color: #eff2F6;
    color: #0089FF;
}
.size span.pure-filter{height: 16px}
.size span.pure-filter:after{  top: 11px;}
span.pure-filter {
    position: relative;
    display: inline-block;
    font-weight: normal;
    font-size: 1em;
    border: 1px solid #cccccc;
    padding: 7px 10px 3px 10px;
    box-sizing: content-box;
    width: 80px;
    color: #000;
    border-radius: 2px;
    /*max-width: 100px;*/
    overflow: hidden;
}
span.pure-filter:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 6px solid #000000;
    right: 5px;
    top: 13px;
}
span.pure-filter span {
    margin: 0;
    padding: 0;
    display: block;
    width: 78px;
    max-width: 300px;
    overflow: hidden;
    /*background-color: red;*/
}
.tags span b.tag-status {
    position: relative;;
    font-weight: normal;
    /*font-size: 12px;*/
    display: inline-block;
    margin-left: 2.5em;
    border: none; !important;
}
.tags span b.tag-status:before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #f0a818;
    left: -14px;
    top: 5px;
    border-radius: 50%;
}
.tags span b.tag-status.down:before {
    background-color: rgba(68,132,255,1);

}
.tags span b.tag-status.online:before {
    background-color: rgba(76,224,106,1);

}
.tags span b.tag-status.offline:before {
    background-color: rgba(76,224,106,.5);

}
.tags span b.tag-status.con:before {
    background-color: rgba(73,127,229,1);
}
.tags span b.tag-status.det:before {
    background-color: rgba(73,127,229,.5);
}

.tags span b.tag-status.suc:before {
    background-color: #3d7505;
}
.tags span b.tag-status.err:before {
    background-color: #a04f14;
}

.pure-button.btn-multi[disabled] {
    background-color: #eff2F6;
    color: inherit;
}
.pure-button.btn-multi {
    background-color: rgba(0,137,255,0.07);
    color: rgba(0,137,255,1);
}
.pure-button.icon-icon_more.icomoon{
    background-color: rgba(0,137,255,0.07);
    color: rgba(0,137,255,1);
}
.pure-button.icomoon{
    height: 34px;
    width: 34px;}
.pure-control-group .add-tag {
    border: 1px solid #eff2F6;
    /*margin-left: 28%;*/
    width: 70%;
    display: none;
}
.pure-1-2.add-tag {
    width: 50%;
}
.pure-control-group .add-tag.show {
    display: inline-block;
}
.tag-groups {display: none}
.input.icomoon {
    position: absolute;
    top: 14px;
    left: 30%;
    color:#bababa;
    /*margin-left: 25%;*/
}
.pure-1-2 .input.icomoon {
    position: absolute;
    top: 11px;
    left: 26%;
    color:#bababa;
    /*margin-left: 25%;*/
}
.pure-1-2 .pure-button {float: right}

.pure-control-group .add-tag label{
    text-align: left;
    padding-left: 1em;
}
.add-tag .pure-control-group {  position: relative;}

tr.ERR{color:red}
tr.ERR code{color:red}
.icomoon.icon-icon_event.ERR::after{
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    top: 8px;
    right:-12px;
    display: inline-block;
}
#el-device h4 span  {
    padding: 0.2em 10px;
    display: inline-block;
    color:rgba(80,80,80,1);
    font-size: 0.9em;
    font-weight: normal;
    cursor: pointer
}
#el-device h4 span.active  {
    border-top: 5px solid #0089FF;
    color: #0089FF;
    background-color: #EFF2F6;
}

#el-device h4 span.connect  {
    margin-left: 10px;
}
.sqs_stas  {display: none  }
.pure-control-group label+a {
    text-decoration: none;
    color: #0089FF;
    border: none;
}
.modal-upgrade-container .modal-header{
    padding-bottom: .8em;!important;
}
.modal-upgrade-container .modal-body {
    border-bottom: 1px solid #eff2F6;
    padding-bottom: 1.5em;
    margin-bottom: 2em
}
.suppot_tip {
    width: 20px;
    height: 20px;
    background-color: #FF9C00;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    color: #ffffff;
    text-align: center;
    line-height: 20px;
}
.suppot_tip + label {
    font-size: 1.2em;
}
.install_tip,.up_router ,.no_support{
    text-align: center;
    padding-top: 30px;
    font-size: 14px;
    font-family: PingFangSC;
}
.install_tip a , .up_router a {
    border:0 none;
    display: inline-block;
    width: 70px;
    height: 30px;
    background-color: #0089FF;
    color: #ffffff;
    margin-top: 30px;
    margin-bottom: 31px;
    line-height: 30px;
    border-radius: 2px;
    font-family:'PingFang SC',Arial,'Hiragino Sans GB','\5FAE\8F6F\96C5\9ED1',sans-serif;
}
.install_tip .operation a {
    margin-top: 5px;
    margin-bottom: 10px;
}

.firmware .pure-u-1-3 {
    width: 200px;!important;
}
.firmware .pure-u-2-3 {
    width: calc(100% - 200px);!important;
}
.maintenance-header {
    margin: 0;
    padding: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 2em;
    border-bottom: 1px solid #8692A8;
}
.firmware  ul , .firmware ul li{
    font-size: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    cursor: pointer;
}
#el-firmware .pure-button {
    padding: 0.25em 1em;
}
.firmware ul li.active:before {
    position: absolute;
    content: '';
    display: inline-block;
    width: 4px;
    height: 34px;
    left: 4px;
    top: 0;
    background-color: #0089FF;
}
.firmware ul li.active {
    color: #0089FF;
}
.firmware ul li {
    height: 34px;
    padding-left: 1em;
    line-height: 34px;
}
.firmware ul li.active {
    background-color: rgba(234,246,254,1);
}

.firmware .pure-fix-right {
    display: inline-block;
    width: 300px;;
    height: 300px;
    background-color: green;
}
.modal-header .export {
    color: #000000;
    cursor: pointer;
    margin-top: -1px;
    float: right;
    margin-right: 10px;
    border: none;
    font-size: 2em;
    color: #0089FF;
}
.modal-header .export.disabled {
    color: #999;
    cursor: auto;
}
.modal-confirm-p {
    color: #FF0000;
}
/*Add Map */
.router-list {
    position: absolute;
    top: 70px;
    left: 30px;
    font-size: 0.8em;
}
.device-fillter {
    position: absolute;
    left: 30px;
    top: 110px;
    font-size: 0.8em;
}
.resize-map {
    display: none;
    position: absolute;
    left: 30px;
    bottom: 100px;
    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.2);
    border-radius:4px
}
.resize-map span{
    display: block;
    width: 32px;
    height: 32px;
    background-color: #ffffff;
    line-height: 25px;
    text-align: center;
    color: #000000;
    cursor: pointer;
    font-size: 1.5em;
    background-position: center;
}
.resize-map span.add {
    background: url('/assets/map/zoom out_normal_map.png');
    background-color: #fff;
    background-position: center;
}
.resize-map span.add:hover {
    background: url('/assets/map/zoom out_hover_map.png');
    background-color: #fff;
    background-position: center;
}


.resize-map span.subtract {
    background: url("/assets/map/zoom in_normal_map.png");
    background-color: #fff;
    background-position: center;
}


.resize-map span.subtract:hover {
    background: url("/assets/map/zoom in_hover_map.png");
    background-color: #fff;
    background-position: center;
}


.router-list .icon , .device-fillter span {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: #0089FF;
    /*line-height: 25px;*/
    text-align: center;
    color: #ffffff;
    cursor: pointer;
}
.map-ap-content {
    background-color: #fff;
    position: absolute;
    top: -35px;
    left: -500px;
    width: 300px;
    transition: all .5s;
}
.map-ap-content.show {
    left: 40px;
}

.close-list {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #000;
    color: #fff;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: 5px;
    cursor: pointer;
}
.add_to_map {
    text-align: right;
    font-size: 2.5em;
    margin-left: 10%;
    cursor: move;
    line-height: 32px;
}
.lockMapAp , .cfgMapAp , .delMapAp {
    position: fixed;
    width: 32px;
    height: 32px;
    /*border-radius: 50%;*/
    /*background-color: rgb(0, 0, 0);*/
    z-index: 1000;
    color: rgb(255, 255, 255);
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    background-size: 20px 20px;
    background-position: center;
    background-color: #fff;
    /*box-shadow: 0px 2px 9px 0px rgba(0,0,0,0.11);*/
}
.showRssi {
    position: fixed;
    width: 136px;
    height: 24px;
    text-align: center;
    /*border-radius: 50%;*/
    /*background-color: rgb(0, 0, 0);*/
    z-index: 1000;
    background-color: red;
    color: #fff;
}
.lockMapAp.unlock {
    background: url("/assets/map/lock_maps.png");
}

.lockMapAp {
    background: url("/assets/map/unlock_maps.png");
}

.cfgMapAp {
    background: url("/assets/map/detail_maps.png");
}

.delMapAp {
    background: url('/assets/map/delete_maps.png');
}
.delMapAp.disabled {
    background: url('/assets/map/delete_disabled_maps.png');
}


.device-filter {
    position: absolute;
    left: 30px;
    top: -1px;
    font-size: 0.8em;
    display: none;
}
.map-upload-box .add-icon {
    display: inline-block;
    color: #fff;
    width: 80px;
    height: 80px;
    background: #0089FF;
    border-radius: 50%;
    text-align: center;
    line-height: 90px;
    left: 50%;
    margin-top: 30px;
    cursor: pointer;
}
.modal-body.add-new-map {
    height: calc(100% - 70px);
}
.modal-body.add-new-map .pure-g{
    position: relative;
    padding-top: .5em;
    height: calc(100% - 40px);
}

.modal-body.add-new-map .pure-g .map-editor-content , .modal-body.add-new-map .pure-g .map-editor-content .map-basemap , .modal-body.add-new-map .pure-g .map-editor-content .map-basemap .map-upload-box{
    height: 100%;
}

.set-scale input , .set-scale select {
    height: 35px;
    border-radius: 0 !important;
}
.set-scale input {
    margin-right: -5px;
    width: 150px;
}
.set-scale button {
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 0.8em;
    line-height: 25px;
    margin-left: 1em;
}
.set-scale button.btn-cancel {
    line-height: 23px;
}
.scale-icon {
    display: none;
    position: absolute;
    left: 30px;
    bottom: 200px;
    /*box-shadow: 0 2px 8px 0 rgba(0,0,0,0.2);*/
    border-radius: 4px;
    cursor: pointer;
}
.scale-icon .icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url("/assets/map/scale_normal_map.png");
    background-color: #fff;
    background-position: center;

}
.scale-icon .icon:hover {
    background: url("/assets/map/scale_hover_map.png");
    background-color: #fff;
    background-position: center;
}

.scale-icon .tips {
    display: inline-block;
    background: #e66;
    color: #fff;
    padding: 5px 10px;
    margin-left: 5px;
    border-radius: 5px;
    position: relative;
    display: none;
}
.scale-icon .tips:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 5px;
    left: -13px;
    border-color: transparent #e66 transparent transparent;
    border-style: solid;
    border-width: 8px;

}

.scale-detail {
    position: fixed;
    right: 40px;
    bottom: 60px;
}
.scale-detail span {
    width: 100px;
    height: 5px;
    border: 1px solid #000;
    border-top: none;
    display: inline-block;
}
.add-new-map .scale-detail {
    display: none;
}
.add-new-map .tip.error {
    position: relative;
}
.map-content canvas {
    position: relative;
}
.router-list .icomoon.icon {
    background: url('/assets/map/add router_normal_map.png');
    background-color: #fff;
    background-position: center;
}
.router-list .icomoon.icon:hover {
    background: url('/assets/map/add router_hover_map.png');
    background-color: #fff;
    background-position: center;
}
.device-fillter span {
    display: inline-block;
    background: url('/assets/map/filter_normal_map.png');
    background-color: #fff;
    background-position: center;
}
.device-fillter span:hover {
    background: url('/assets/map/filter_hover_map.png');
    background-color: #fff;
    background-position: center;
}
.add-icon.btn-upload-map {
    background: url("/assets/map/upgrade_map.png");
}
.add_icon_pic {
    background: url("/assets/map/add site_map.png") no-repeat;
    background-position: center;

}
.return-last {
    text-decoration: none;
    border: none;
    display: inline-block;
    background: url("/assets/map/back_map.png");
    background-repeat: no-repeat;
    padding-left: 20px;
    cursor: pointer;
    background-position-y: center;
    color: #000;
    font-size: 14px;
    font-weight: normal;
}
.t-tool .details .pure-control-group label {
    text-align: left;
}
.t-tool .details .pure-control-group label {
    width: 55px;
}

/*.t-tool .details .pure-control-group input {*/
/*position: absolute;*/
/*visibility: hidden;*/
/*}*/

/*.t-tool .details .pure-control-group label.scan , .t-tool .details .pure-control-group label.scan{*/
/*display: inline-block;*/
/*width: 16px;*/
/*height: 16px;*/
/*background-color: #7cA3F0;*/
/*border-radius: 50%;*/
/*position: relative;*/
/*}*/

/*.t-tool .details .pure-control-group label.scan:after , .t-tool .details .pure-control-group label.scan:after{*/
/*content: "";*/
/*position: absolute;*/
/*left: 2px;*/
/*bottom: 7px;*/
/*width: 13px;*/
/*height: 8px;*/
/*border: 2px solid #fff;*/
/*border-top-color: transparent;*/
/*border-right-color: transparent;*/
/*color: #fff;*/
/*-ms-transform: rotate(-60deg);*/
/*-moz-transform: rotate(-60deg);*/
/*-webkit-transform: rotate(-60deg);*/
/*transform: rotate(-45deg);*/
/*}*/



.modal-ap-config .t-tool  input {
    width: 30px !important;
    vertical-align: middle;
}
.modal-ap-config .t-tool  input.item-input {
    width: auto !important;
    vertical-align: middle;
    padding: .1em .6em;
}

.t-tool .detected-devices {
    position: relative;
    border-top: 1px solid #eff2F6 !important;
}
.t-tool .detected-devices .title{
    position: absolute;
    display: inline-block;
    background: #fff;
    top: -14px;
    padding: 0 20px 0 0;
    /*font-weight: bold;*/
}
.t-tool .left {
    float: left;
}
.t-tool .right {
    float: right;
}
.device-detail {
    padding-top: 20px;
}
.device-detail .name , .device-detail .type , .device-detail .action, .device-detail .mac , .device-detail .rssi {
    float: left;
    /*width: 33.33% ;*/
    width: 20%;
}

.device-detail .type {
    width: 10%;
}
.device-detail .rssi {
    width: 10%;
}
.device-detail .action {
    width: 40%;
}

.t-tool .action span {
    padding: 3px 10px;
    border-radius: 2px;
    display: inline-block;
    color: #ffffff;
    cursor: pointer;
    margin-right: 10px;
}
.t-tool .action span.connect {
    background-color: #0099FF;
}
.t-tool .action span.disconnect {
    background-color: #e6e6e6;
    color: #000;
}

.t-tool .action span.pair {
    background-color: #0099FF;
}
.t-tool .action span.serivice {
    background-color: #0099FF;
}


.t-tool .action span.unpair {
    background-color: #e6e6e6;
    color: #000;
}


.t-tool .action span.disconnect {
    background-color: #e6e6e6;
    color: #000;
}
.device-detail .device-body {
    padding-top: 10px;
}
.device-title  {
    height: 35px;
    margin-bottom: 5px;
}
.device-body .list {
    height: 40px;
}
.device-title {
    border-bottom: 2px solid #EFF2F6;
}
.server-list a {
    border: none;
}
ul.server-list li span {
    display: inline-block;
}
.server-list {
    padding: 0;
    margin: 0;
    margin-top: -7px;
    background:rgba(249,251,255,1)
}

.item-tree {
    line-height: 14px;
}
.item-tree li {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.item-box, .item-box * {
    -webkit-box-sizing: content-box!important;
    -moz-box-sizing: content-box!important;
    box-sizing: content-box!important;
}
.item-tree li .item-tree-spread, .item-tree li a {
    display: inline-block;
    vertical-align: top;
    height: 26px;
    cursor: pointer;
}
.item-tree li i {
    padding-left: 6px;
    color: #333;
}
.item-icon {
    font-family: item-icon!important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.item-tree li {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.item-tree li ul {
    display: none;
}
.item-show {
    display: block!important;
}
.item-tree li a cite {
    padding: 0 6px;
    font-size: 14px;
    font-style: normal;
}


.item-tree li a i {
    font-size: 16px;
}
.item-tree li i {
    padding-left: 6px;
    color: #333;
}
.item-btn {
    display: inline-block;
    height: 20px;
    /*line-height: 38px;*/
    padding: 0 18px;
    background-color: #0089FF;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    opacity: .9;
    filter: alpha(opacity=90);
}
.t-tool .debug_up {
    transform: rotate(90deg);
}
.t-tool img {
    vertical-align: middle;
}
a {
    color: #333;
}
input[name="chip"] + label::before {
    content: "\a0"; /*≤ªªª––ø’∏Ò*/
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 1em;
    height: 1em;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid #0099FF;
    text-indent: .15em;
    line-height: 1;
}
input[name="chip"]:checked + label::before {
    background-color: #0099FF;
    background-clip: content-box;
    padding: .2em;
}
input[name="chip"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}
input[name="usechip"] + label::before {
    content: "\a0"; /*≤ªªª––ø’∏Ò*/
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 1em;
    height: 1em;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid #0099FF;
    text-indent: .15em;
    line-height: 1;
}
input[name="usechip"]:checked + label::before {
    background-color: #0099FF;
    background-clip: content-box;
    padding: .2em;
}
input[name="usechip"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

.portForwardConfig .form-g , .app_config .form-g  {
    width: 49%;
    display: inline-block;
}
.portForwardConfig label ,.app_config label  , .app_config .title{
   display: block;
    text-transform: capitalize;
}
.app_config .title {
    font-weight:600;
}
.portForwardConfig select , .portForwardConfig input , .app_config select , .app_config input  {
    width: 90% !important;
    max-width: 90% !important;
}



.layui-tab-card {
    border: 1px solid #e2e2e2;
    border-radius: 2px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
}

.layui-tab {
    margin: 10px 0;
    overflow: hidden;
    text-align: left!important;
}

.layui-tab-title {
    height: 38px;
    /* overflow: auto; */
    /* overflow-y: hidden; */
}
.layui-tab-card>.layui-tab-title {
    background-color: #f2f2f2;
    padding-left: 0;
    cursor: n-resize;
}
.layui-tab-title {
    position: relative;
    left: 0;
    height: 40px;
    white-space: nowrap;
    font-size: 0;
    border-bottom: 1px solid #e2e2e2;
    transition: all .2s;
    -webkit-transition: all .2s;
}
.layui-tab-title li {
    line-height: 30px;
    height: 30px;
    padding: 0 15px;
    margin-left: 2px;
    color: #4DB7D9;
}
.log .right .layui-tab-title>li {
    font-size: 12px;
    border-radius: 5px;
}
.layui-tab-card>.layui-tab-title li {
    margin-right: -1px;
    /* margin-left: -1px; */
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    margin-top: 5px;
}
.layui-tab-title li {
    font-size: 14px;
    transition: all .3s;
    -webkit-transition: all .3s;
    position: relative;
    line-height: 40px;
    min-width: 65px;
    padding: 0 10px;
}
.layui-fixbar li, .layui-tab-bar, .layui-tab-title li, .layui-util-face ul li {
    cursor: pointer;
    text-align: center;
}
.layui-nav .layui-nav-item, .layui-tab-title li {
    display: inline-block;
    vertical-align: middle;
}
.touch {
    background: #fff;
    margin: 0 3px;
}
li {
    list-style: none;
}
.layui-tab-content li pre {
    margin: 0;
    padding: 0;
}
.layui-tab-content li pre.fail {
    color: red;
}
.layui-tab-content {
    height: 110px;
    overflow: auto;
}
.layui-tab-content ul li span {
    display: inline-block;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
}
.layui-tab-content ul li span:nth-child(1) {
    padding-left: 0;
    color: #de34ca;
}

.layui-tab-content ul li span:nth-child(2) {
    font-style: italic;
}

.layui-tab-content ul li span:nth-child(3) {
    color: #5FB878;
}


.layui-tab-item, .layui-util-face .layui-layer-TipsG {
    display: none;
}

.layui-tab-item ul {
    padding-left: 10px;
}

.layui-tab-item ul pre{
    overflow: inherit;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", Œ¢»Ì—≈∫⁄, Tahoma, Arial, sans-serif;
}

.modal-ap-config .t-tool .pure-control-group input {
    width: 45px !important;
}
















#fontColor .layui-tab-card>.layui-tab-title .layui-this {
    background-color: #4DB7D9;
    color: #fff;
}

::-webkit-scrollbar {
    width:5px;
    height:5px

}
::-webkit-scrollbar-button:vertical {
    display:none
}
::-webkit-scrollbar-corner, ::-webkit-scrollbar-track {
    background-color:#e2e2e2
}
::-webkit-scrollbar-thumb {
    border-radius:5px;
    background-color:rgba(0, 0, 0, .3)
}
::-webkit-scrollbar-thumb:vertical:hover {
    background-color:rgba(0, 0, 0, .35)
}
::-webkit-scrollbar-thumb:vertical:active {
    background-color:rgba(0, 0, 0, .38)
}
.map-editor-content {
    overflow: auto;
}
/*.picInner {*/
    /*display: none;*/
/*}*/
/*.pic:hover .picInner {*/

    /*display: block;*/
/*}*/
/*.pic .icon {*/
    /*width: 100%;*/
    /*margin: 0 auto;*/
    /*text-align: center;*/
    /*margin-top: 41px;*/

/*}*/
/*.pic .icon div {*/
    /*width: 70px;*/
    /*display: inline-block;*/
    /*height: 70px;*/
    /*background-size: 100% 100%;*/

/*}*/
/*.pic .icon div.left {*/
    /*background-image: url('/assets/map/deployment survey.svg');*/
    /*margin-right: 20px;*/
/*}*/
/*.pic .icon div.left:hover {*/
    /*background-image: url('/assets/map/deployment survey_hover.svg');*/
    /*margin-right: 20px;*/
/*}*/

/*.pic .icon div.right {*/
    /*background-image: url('/assets/map/locationing.svg');*/
    /*margin-right: 20px;*/
/*}*/
/*.pic .icon div.right:hover {*/
    /*background-image: url('/assets/map/locationing_hover.svg');*/
    /*margin-right: 20px;*/
/*}*/

/*.suppot_tip:before {*/
/*content: "£°";*/
/*display: inline-block;*/
/*position: absolute;*/
/*top: 0;*/
/*left: 3px;*/
/*color: #ffffff;*/
/*}*/
/*.throughput-item.throughput-tcp { margin: 62px 0; }*/
/*.throughput-item.throughput-bt { display: none }*/
.icon-refresh  {
    display: inline-block;
    vertical-align: middle;
}
.signal {
    cursor: pointer;
    padding: 3px 5px;
    border-radius: 3px;
    color: #fff;
}
.signal.GOOD {
    background-color: #29CE3A;
}
.signal.MEDIUM {
    background-color: #F7B500;
}
.signal.POOR {
    background-color: #E02020;
}
.modal-exports label {
    width: 70px;
    display: inline-block;
}

.stat-table {border: 0px; width: 100%;border-collapse:initial; margin-top: 10px;}
.stat-table tr td{border-bottom: 1px solid #FFFFFF;}
.stat-table .head{text-align: right; padding-right: 2px;width: 1%; border-right: 1px solid #000000; border-bottom: 0px;}
.stat-table .suc{background-color: #eff4ea; text-align: center; width: 6.25%; min-width: 6.25%;}
.stat-table .err{background-color: #fff8f3; text-align: center;border-right: 3px solid #FFFFFF; width: 6.25%; min-width: 6.25%;}
.stat-table .stat-time {text-align: center;border-top: 1px solid #000000}

.stat-table-detail {border: 0px; width: 100%;border-collapse:initial; margin-top: 20px;}
.stat-table-detail tr td{border-bottom: 1px solid #FFFFFF;}
.stat-table-detail .head{text-align: right; padding-right: 2px;width: 1%; border-right: 1px solid #000000; border-bottom: 0px;}
.stat-table-detail .suc{background-color: #eff4ea; text-align: center; width: 4.15%; min-width: 4.15%;}
.stat-table-detail .err{background-color: #fff8f3; text-align: center;border-right: 3px solid #FFFFFF; width: 4.15%; min-width: 4.15%;}
.stat-table-detail .stat-time {text-align: center;border-top: 1px solid #000000}