html, body {
    margin: 0;
    padding: 0;
    background-color: #4f5861;
    height: 100%;
    color: #ecf2f6;
}
*, .mynq-font-family {
    font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
}
.el-header {
    background-color: #fff;
    color: #4f575f;
}
#app .el-header {
    box-shadow: 0 3px 16px 0 rgb(0 0 0 / 15%);
}
.el-header .mynq-header-title {
    margin-top: 16px;
    margin-bottom: 16px;
}
.text-light{
    text-align:right;
}
.mb-0{
    margin-bottom:0;
}
.mynq-nav-login-btn {
    width: 160px;
}
.mynq-nav-menus {
    margin-top: 8px;
}
.mynq-nav-btn {
    position: relative;
    font-size: 16px;
    background-color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    color: #66b1ff;
    transform: none;
    display: inline-block;
}
a.mynq-nav-btn {
    text-decoration: none;
}

    .mynq-nav-btn:hover {
        border: 1px solid #b3d8ff;
        padding: 8px 19px;
        cursor: pointer;
        color: #409eff;
        box-shadow: 0 3px 16px 0 #66b1ff7a;
    }
.mynq-nav-menus .mynq-nav-more-btn {
    margin-top: 10px;
    padding: 5px;
}
.mynq-drawer .el-drawer__body {
    padding: 0 20px 20px 20px;
}
.el-main h2.title {
    margin-top: 12px;
    margin-bottom: 12px;
}
    .el-main h2.title sub {
        font-size: 13px;
        margin-left: 5px;
        color: #c3c8d1;
        padding-bottom: 20px;
    }

.el-main .node-box {
    min-height: 248px;
    background-color: #475058;
    border: none;
    border-radius: 10px;
    /*box-shadow: inset -2px -2px 8px #434b52;*/
    box-shadow: 0 3px 16px 0 rgb(0 0 0 / 15%);
}
    .el-main .node-box .no-node {
        margin: 0 auto;
        text-align: center;
        line-height: 260px;
    }
    .el-main .node-box .node {
        width: 293px;
        font-size:14px;
        float:left;
        margin:10px;
        cursor:pointer;
    }
        .el-main .node-box .node .el-card__body {
            height: 151px;
        }
        .el-main .node-box .node .node-status-online, .mynode .node-status-online {
            color: #67c33a;
            line-height: 21px;
        }
        .el-main .node-box .node .node-status-offline, .mynode .node-status-offline {
            color: #e6a23c;
            line-height: 21px;
        }
        .el-main .node-box .node .node-status-unknown, .mynode .node-status-unknown {
            color: #909399;
            line-height: 20px;
        }
        .el-main .node-box .node .node-uptime {
            font-size: 12px;
            line-height: 21px;
            display: inline-block;
        }
        .el-main .node-box .node .node-name {
            margin: 6px 0;
            display: block;
            font-weight: 600;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .el-main .node-box .node .node-value {
            width: 207px;
            display: inline-block;
            margin-bottom: 1px;
        }
            .el-main .node-box .node .node-value .el-progress-bar__innerText {
                visibility:hidden
            }
        .el-main .node-box .node .el-divider--horizontal {
            margin:10px 0;
        }
.text-grey {
    color: #909399;
}
.el-tabs__item {
    color: #c2c8d3;
    font-weight: 600;
}
    .el-tabs__item.is-active {
        color: #eee
    }
        .el-tabs__item.is-active:hover, .el-tabs__item:hover {
            color: #fff
        }
.el-tabs--card > .el-tabs__header .el-tabs__item {
    background-color: #4f5861;
    border-bottom: 1px solid #e4e7ed;
}
    .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
        border-top-left-radius: 5px;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
        border-top-right-radius: 5px;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        border-bottom-color: #475058;
    }
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active, .el-tabs--card > .el-tabs__header .el-tabs__nav {
    background-color: #475058;
}
.el-tabs__content {
    color: #fff;
}
.el-descriptions .el-descriptions__body {
    color: #fff;
    background-color: #475058;
}
.el-tabs__header {
    margin: 0;
}
.el-tab-pane {
    background-color: #475058;
    padding: 20px;
}
.overview-load {
    padding: 5px 0;
    display: inline-block;
}
    .overview-load .overview-load-value {
        font-size: 24px;
    }
    .overview-load .overview-load-values {
        margin-left: 10px;
    }
.overview-card {
    float: left;
}
.overview-card:not(:first-child){
    margin-left:20px;
}
.el-page-header {
    color: #fff;
    padding-bottom: 20px;
}
.el-page-header, .el-page-header .el-page-header__content {
    color: #fff;
}
.detail-tabs{
    width:986px;
    margin:0 auto;
}
.detail-tabs>.el-tabs__content {
    overflow-x: auto;
    box-shadow: 0 3px 16px 0 rgb(0 0 0 / 15%);
}
    .detail-tabs > .el-tabs__header .el-tabs__nav {
        box-shadow: 0 3px 16px 0 rgb(0 0 0 / 50%);
    }
.detail-nav .el-page-header {
    padding-bottom: 0;
}
    
.refreshTip {
    font-size: 13px;
    color: #c3c8d1;
    padding: 10px 0;
    display: inline-block;
}
.mynq-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    opacity: 0.9;
    text-align: center;
    padding: 12px;
    color: #181b1d;
    z-index: 100;
}
    .mynq-footer a {
        color: #000;
        text-decoration: none;
    }
        .mynq-footer a:hover {
            color: #409EFF;
            cursor: pointer;
            text-decoration: underline;
        }
.report-card .el-tab-pane, .report-card .el-tabs__nav .el-tabs__item {
    background-color: white;
    color: #000000;
}
.report-card .title {
    position: absolute;
    margin: 2px;
    font-size: 18px;
}
    .report-card .title sub {
        color: #9fa1a7;
        padding-left:3px;
    }
.report-card .el-tabs__nav {
    margin-left: 150px;
}

.report-card .el-tabs__nav .el-tabs__item {
    border-bottom: 2px solid #e4e7ed;
    color: #303133;
    font-size: 12px;
}
.chart-tooltip-icon {
    display: inline-block;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    position: relative;
    margin-right:2px;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.mt-4 {
    margin-top: 1rem !important;
}
.mr-1 {
    margin-right: 0.25rem !important;
}
.mr-2 {
    margin-right: 0.5rem !important;
}
.mr-4 {
    margin-right: 1rem !important;
}
.mt-1 {
    margin-top: 0.25rem !important;
}
.mt-0 {
    margin-top: 0 !important;
}
.mynode {
    width: 100%;
    line-height:21px;
    cursor:pointer;
}
    .mynode > .el-card__body {
        padding: 10px 20px;
        font-size: 14px;
    }
.mynode:not(:first-child){
    margin-top:10px;
}
    .mynode .node-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 240px;
        display: inline-block;
        line-height: 14px;
        vertical-align: middle;
    }
    .mynode .node-status i {
        vertical-align: middle;
        margin-top: 1px;
    }
.text-right{
    text-align:right;
}
.text-black {
    color: #606266;
}
.icon-action {
    cursor: pointer
}
.el-progress.is-warning .el-progress-bar__inner {
    background-color: #ffc107;
}
.drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
    .drawer-content .el-scrollbar, .drawer-content .drawer-body {
        flex: 1;
    }
    .drawer-content .el-scrollbar .el-scrollbar__wrap{
        overflow-x:hidden;
    }
    .drawer-content .drawer-footer {
        padding-top: 10px;
        display: flex;
    }
        .drawer-content .drawer-footer button {
            flex: 1;
        }
.el-link.el-link--default {
    color: #e6e9f1;
}
    .el-link.el-link--default:hover {
        color: #fff;
    }
.el-link.is-underline:hover:after {
    border-bottom: 1px solid #fff;
}
.el-link.edit-buttion {
    float: right;
    margin-right: 10px;
    margin-top: 24px;
    position: relative;
    z-index: 100;
}

.el-notification{
    z-index:99999;
}
.login-card {
    width:300px;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-150px;
}
.text-center {
    text-align: center;
}
.update-btn{
    width:120px;
}
.mynq-required:before {
    content: '*';
    color: #F56C6C;
    margin-right: 4px;
}
.mynq-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    color: white;
}
.mynq-icon-list {
    background: url("../icons/list-ul-solid.svg");
}

.mynq-icon-grid {
    background: url("../icons/th-solid.svg")
}
.node-list{
    margin-top:-30px;
}
.node-list-mode-row {
    position: relative;
    top: 15px;
}

.node-list-mode-box {
    background-color: #475058;
    /*box-shadow: 0 0px 16px 0 rgb(0 0 0 / 15%);*/
    padding: 5px;
    width: 47px;
    border-radius: 6px;
    margin: 0 auto;
}
.node-list-mode {
    width: 41px;
    margin: 0px auto;
    border: 1px solid #ffffff54;
    padding: 1px;
    border-radius: 5px;
    height: 16px;
    line-height: 18px;
}
    .node-list-mode:hover {
        border: 1px solid #ffffffc7;
    }
    .node-list-mode-btn {
        padding: 1px;
        height: 16px;
        width: 18px;
        background: none;
        border: none;
    }
    .node-list-mode-btn:hover{
        cursor:pointer;
    }
    .node-list-mode-btn svg {
        width: 14px;
        color: #ffffff85;
    }
    .node-list-mode-btn.is-active svg {
        color: #fff;
    }
    .node-list-mode-btn:hover svg {
        color: #fff
    }
.node-value-progress-box {
    padding-top: 2px;
}
.node-value-text {
    width: 55px;
    float: left;
    line-height: 18px;
    text-align: right;
}
.node-value-progress {
    margin-left: 55px;
}
    .node-value-progress .el-progress-bar__innerText {
        line-height: 13px;
        font-size: 10px;
    }
    .node-uptime {
        font-size: 12px;
        line-height: 17px;
    }
.nowrap {
    white-space: nowrap;
}

.text-overhidden {
    overflow-x: hidden;
    text-overflow: ellipsis;
}
.edit-drawer .el-scrollbar__view{
    padding-right:15px;
}
.editNodeForm .el-select {
    width: 100%;
}
.netinfo{
    font-size:13px;
}
.vue-country-intl .country-intl-input, .vue-country-intl .vue-country-item, .vue-country-intl .country-intl-label {
    padding: 0 15px;
    color: #606266;
}
.vue-country-intl .country-intl-input, .vue-country-intl .country-intl-label {
    width: calc(100% - 30px);
}
    .vue-country-intl .vue-country-list {
        padding: 0;
    }
        .vue-country-intl .vue-country-list .vue-country-item {
            list-style: none;
        }
.vue-country-item.selected, .vue-country-item.selected .vue-country-areaCode {
    color: #409EFF;
    font-weight: 700;
    background-color: #fff;
}
.vue-country-list .vue-country-item:hover, .vue-country-list .vue-country-item:hover .vue-country-areaCode {
    background-color: #F5F7FA;
    color: #606266;
}
.vue-country-list-wrap{
    z-index:2000
}
.iti-flag {
    display: inline-block;
}
.node-name .iti-flag, .node-title .iti-flag {
    margin-right: 5px;
    vertical-align: middle;
    margin-top: -2px;
}
.edit-country .clean-country-btn i {
    color: #606266;
}
.edit-country .clean-country-btn i:hover {
    color: #409EFF;
}
.el-descriptions-item__content .iti-flag {
    vertical-align: middle;
    margin-top: -3px;
}
.report-card .el-card__body > .title {
    padding-right: 5px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}
.copyright {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
}
    .copyright a {
        color: #ecf2f6;
        text-decoration: none;
    }
    .copyright a:hover {
        cursor: pointer;
        text-decoration: underline;
    }


    #full-loading-mask {
        background-color: #4f5861;
    }

    #full-loading-mask .el-loading-spinner {
        margin-top: -40px;
    }
        #full-loading-mask .el-loading-spinner .path {
            animation: auto;
        }
        #full-loading-mask .el-loading-spinner .circular {
            height: 80px;
            width: 80px;
        }

.body-after {
    font-size: 14px;
    max-width: 100%;
    width: 100%;
    margin: 10px 0 0 0;
}

.cart {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 15px;
    right: 15px;
}
    .cart .cart-btn {
        width: 100%;
        height: 100%;
        text-decoration: none;
        overflow: hidden;
        margin: 0px;
        background-color: rgb(64, 158, 255);
        border-radius: 50%;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 16px 0px;
        color: white;
        display:inline-block;
    }
        .cart .cart-btn i {
            margin: 11px;
        }
        .cart .cart-btn i:before {
            font-size: 38px;
        }

.extend-tab-content {
    min-height: 500px;
    font-size:14px;
}
    .extend-tab-content h1 {
        font-size: 1.4em;
    }
    .extend-tab-content h2 {
        font-size: 1.2em;
    }
    .extend-tab-content h3 {
        font-size: 1em;
    }
    .extend-tab-content h4 {
        font-size: 0.8em;
    }
    .extend-tab-content table {
        width: 100%;
        display: table;
        text-align: left;
        border-collapse: collapse;
    }
        .extend-tab-content table tr {
            border: 0;
            border-top: 1px solid #ccc;
        }
            .extend-tab-content table tr th {
                font-weight: bold;
                background-color: #4f5861;
            }
            .extend-tab-content table tr th, .extend-tab-content table tr td {
                font-size: 14px;
                border: 1px solid #ccc;
                text-align: left;
                padding: 10px;
            }
    .extend-tab-content tbody {
        border: 0;
    }
    .extend-tab-content table tr {
        border: 0;
        border-top: 1px solid #ccc;
    }
        .extend-tab-content table tr th, #nice table tr td {
            font-size: 14px;
            border: 1px solid #ccc;
            padding: 5px 10px;
            text-align: left;
        }
    .extend-tab-content blockquote {
        background: #4f5861;
        border-left: 10px solid #e4e7ed;
        margin: 1.5em 10px;
        padding: 1em 10px 0.1em 10px;
        quotes: "\201C""\201D""\2018""\2019";
    }
    .extend-tab-content code {
        font-size: 90%;
        color: #ff91ae;
        border-radius: 3px;
    }
    .extend-tab-content pre {
        background-color: #3b3d42;
        padding: 15px;
        border-radius: 5px;
    }
        .extend-tab-content pre code {
            color: #fff;
        }
    .extend-tab-content a {
        color: #fff;
        text-decoration: none;
    }
    .extend-tab-content a:hover {
        cursor: pointer;
        text-decoration: underline;
    }

@media screen and (max-width:420px) {
    .area-icon{
        display:none;
    }

    .el-main .node-box > .el-card__body {
        padding: 0;
    }

    .el-main .node-box {
        padding-bottom: 0;
    }

        .el-main .node-box .node {
            float: none;
            margin: 20px auto;
        }

    .el-drawer {
        width: 360px !important;
        max-width: 100%;
    }

    .el-dialog {
        min-width: 90%;
    }

    .detail-nav .el-page-header .el-page-header__content {
        max-width: 63%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .node-list-mode-row {
        display: none;
    }

    .node-list {
        margin-top: 0;
    }
}

.netinfo .node-speed {
    margin-left: 5px;
    float: right;
}
.netinfo .node-showip {
    max-width: 81px;
    display: inline-block;
}