body, html {
        font-size: 14px;
    }

    .form-group {
        label {
            position: relative;
            .star {
                color: red;
                position: absolute;
                left: -12px;
                top: 2px;
                font-style: normal;
            }
        }
    }

    body.svgBody {
        background-color: transparent !important;
        #toast-container {
            right: -67vw;
            bottom: -62vh;
        }
    }

    @media(max-width: 1200px) {
        body.svgBody {
            #toast-container {
                right: -49vw;
                bottom: -60vh;
            }
        }
    }

    .m-topbar .m-topbar__nav.m-nav>.m-nav__item>.m-nav__link .m-nav__link-icon>i:before {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #5867dd), color-stop(50%, #5867dd), color-stop(75%, #5867dd), to(#5867dd));
        background: linear-gradient(180deg, #5867dd 25%, #5867dd 50%, #5867dd 75%, #5867dd 100%);
        background-clip: text;
        text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    input.form-control {
        line-height: initial;
    } //bg white
    .fc-bg-FF {
        background-color: #fff;
    } //form
    .fc-Form.form-control {
        margin: 0 auto; // width: 96%;
    }

    .form-control:focus {
        border-color: #3695ff;
    }

    .chinaRegionPicker {
        .form-control {
            width: 100%;
        }
    }

    .modal-tabs-background {
        padding: 20px;
        background-color: #f5f5f5;
    }

    .modal-body-content {
        .form-group {
            position: relative;
            label {
                margin-left: 10px;
            }
            .checkbox {
                padding-left: 20px;
            }
        }
    }

    .Longitude {
        .col-xs-12 {
            margin-bottom: 15px;
            padding: 0 10px;
        }
        .row {
            padding: 0 25px;
            .col-md-6 {
                padding: 0 5px 0 0;
                .form-control {
                    width: 100%;
                }
            }
            .col-md-6:last-child {
                padding-left: 5px;
            }
        }
    } //btn
    .btn.fc-btn:not(.md-skip):not(.bs-select-all):not(.bs-deselect-all):hover {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .btn-group>.btn.fc-btn:not(.md-skip):not(.bs-select-all):not(.bs-deselect-all),
    .btn.fc-btn:not(.md-skip):not(.bs-select-all):not(.bs-deselect-all) {
        font-weight: normal;
        font-family: inherit;
        text-transform: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .btn.fc-btn,
    .btn.fc-btn:active,
    .btn.fc-btn:focus,
    .btn.fc-btn:hover {
        color: #fff;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .btn-color(@background-color, @border-color) {
        background-color: @background-color;
        border-color: @border-color;
    }

    .btn-create {
        .btn-color(#50c14e, #50c14e);
    }

    .btn-create:active,
    .btn-create:focus,
    .btn-create:hover {
        .btn-color(#2ca62a, #2ca62a);
    }

    .btn-cancel {
        .btn-color(#b5c2ca, #b5c2ca);
    }

    .btn-cancel:active,
    .btn-cancel:focus,
    .btn-cancel:hover {
        .btn-color(#7a92a1, #7a92a1);
    }

    .btn-save {
        .btn-color(#3695ff, #3695ff);
    }

    .btn-save:active,
    .btn-save:focus,
    .btn-save:hover {
        .btn-color(#226bbc, #226bbc);
    }

    .btn-delete {
        .btn-color(#e47079, #e47079);
    }

    .btn-delete:active,
    .btn-delete:focus,
    .btn-delete:hover {
        .btn-color(#c04040, #c04040);
    }

    .btn.fc-btn:disabled {
        .btn-color(#dddddd, #dddddd);
    }

    .btn.btn-edit {
        .btn-color(#fff, #ddd);
        color: #666;
        width: 60px;
        font-size: 12px;
        height: 28px;
    }

    .btn.btn-edit:hover,
    .btn-edit:active,
    .btn.btn-edit:focus,
    .btn.btn-edit:hover {
        color: #666;
    }

    .btn.btn-primary {
        .btn-color(#4d86ee, #4d86ee);
    }

    .btn-input-search {
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .btn-search {
        .btn-color(#4d86ee, #4d86ee);
        color: #ffffff;
    } //configure form
    .input-group-btn .btn{
        border-width: 2px;
    }
    .form-label(@margin, @display, @min-width) {
        margin: @margin;
        display: @display;
        min-width: @min-width;
    }

    .configure {
        .form-inline-label {
            .form-label(10px 10px 0 0, inline-block, 50px);
        }
        .form-block-label {
            .form-label(10px 0 0 10px, inline-block, 50px);
        }
        .form-inline-input {
            display: inline-block;
            width: 100px;
        }
        .form-inline-input:focus {
            border-color: #3695ff;
        }
        .form-block-input {
            .form-label(10px 0 5px 10px, inline-block, 100px);
            border-color: transparent;
            border-top: 1px solid #b5c2ca;
        }
        .form-block-input:focus {
            border-color: #3695ff;
        }
        .margin-left-bottom {
            margin-left: -4px;
            margin-bottom: 10px;
        }
        input,
        select {
            height: 30px;
        }
        select.form-control:not([size]):not([multiple]) {
            height: 30px;
            padding: 0 5px;
        }
        .form-control {
            padding: 0 1rem;
        }
        textarea {
            padding: 8px !important;
        } // colorPicker
        .colorPicker {
            width: 100px;
            border: 0;
        }
        .evo-cp-wrap {
            float: left;
        }
        .evo-pop {
            margin-left: 3px;
        }
        .history-data-name {
            .bootstrap-select.btn-group>.dropdown-toggle.btn-default {
                height: 30px;
                padding: 0 5px;
            }
            .form-control {
                padding: 0px;
            }
            .pull-left {
                padding-left: 5px;
            }
        }
    }

    .condition-combo {
        .btn-group.bootstrap-select.form-control.fc-Form {
            button.dropdown-toggle {
                padding: 0.393rem 1.25rem;
            }
        }
        .bootstrap-select.btn-group>.dropdown-toggle,
        .bs-searchbox input.form-control {
            padding: 0.393rem 1.25rem;
            padding-left: 8px;
        }
    }

    select.form-control:not([size]):not([multiple]) {
        padding-top: 0.73rem;
    }

    .primeng-datatable-container {
        .ui-datatable table {
            tbody tr.ui-datatable-even {
                background-color: #fbfbfe !important;
            }
            thead tr th {
                background-color: #e6e6e6 !important;
                text-align: left;
                border: transparent;
                span.ui-sortable-column-icon {
                    color: #c0bee7 !important;
                }
                &.ui-state-active {
                    span.ui-sortable-column-icon {
                        color: #4d86ee !important;
                    }
                }
            }
        }

        .fc-btn.btn {
            padding: 0;
        }
        .btn-warn {
            margin: 0;
        }
        .primeng-paging-container{
            .ui-paginator .ui-paginator-rpp-options {
                margin-left: 160px;
            }
            .ui-paginator span a.ui-state-active {
                background-color: #4d86ee;
            }
            // 分页样式
            .ui-paginator a {
                border-radius: 50% !important;
            }
        }
        td{
            border-right: transparent !important;
        }
    }

    .ui-datatable .ui-datatable-data>tr>td{
        border: transparent;
    }

    body .ui-datatable .ui-datatable-data tr.ui-datatable-even.ui-state-highlight {
        background-color: #0275d8 !important;
        color: #ffffff !important;
        border-color: #0267bf;
    }

    /*设备监控tree*/

    .treeDiv .jstree-default .jstree-leaf>.jstree-ocl {
        background-position: -68px -4px;
        display: none;
    }

    .treeDiv .jstree-default .jstree-wholerow {
        height: 34px;
        width: 100%;
    }

    .treeDiv .jstree-default .jstree-wholerow-clicked,.treeDiv .jstree-default .jstree-wholerow-hovered {
        background: #e4edfe;
    }

    /*组态*/

    .tabsHead>.nav.nav-tabs {
        margin: 0;
        padding: 3px 0px 2px 0px;
        border: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-width: 350px;
    }

    .tabsHead>.nav-tabs>li {
        float: none;
        display: inline-block;
    }
    .nav-tabs{
        border-bottom: 0;
    }
    .tabsHead>.nav-tabs>li>a {
        color: #e3edfe !important;
        border: none;
        background-color: transparent;
        border-bottom: 4px solid transparent !important;
        font-size: 16px;
    }
    .tabsHead>.nav-tabs>li>a.active,.tabsHead>.nav-tabs>li>a:hover {
        border-bottom: 4px solid #fff !important;
    }

    .tabsHead>.nav-tabs>li.active>a,
    .tabsHead>.nav-tabs>li.active>a:hover,
    .tabsHead>.nav-tabs>li.active>a:focus {
        color: #fff;
        border-bottom-color: #fff;
        background-color: transparent;
        border: none;
        border-bottom: 4px solid #fff;
    }
    .nav.nav-pills .nav-link, .nav.nav-tabs .nav-link{
        color: #666666;
        border-bottom: 1px solid transparent;
    }
    .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
        border-color: white;
        color: #3695ff;
    }
    .modal .nav-tabs .nav-item.show .nav-link,.modal .nav-tabs .nav-link.active{
        border-color:white;
        color: #3695ff;
        border-bottom: 2px solid #3695ff;
    }

    /*page-container*/

    .padding10 {
        padding: 10px;
    } // header-top-height
    @media (min-width: 993px) {
        .m-header,
        .m-brand .m-brand__logo,
        .m-brand .m-brand__tools {
            height: 50px !important;
        }
        .m-header--fixed .m-body {
            padding-top: 50px !important;
        }
        .m-aside-left--fixed.m-header--static .m-aside-left,
        .m-aside-left--fixed.m-header--fixed .m-aside-left {
            top: 50px;
        }
        .m-stack.m-stack--desktop.m-stack--ver>.m-stack__item {
            vertical-align: middle;
        }
    }

    @media (min-width: 993px) {
        li.dropdown-language a.m-dropdown__toggle {
            padding: 0px !important;
        }
        .m-nav.m-nav--inline>.m-nav__item>.m-nav__link {
            padding: 0 !important;
        }
    }

    @media (max-width: 992px) {
        li.dropdown-language a.m-dropdown__toggle {
            padding: 15px !important;
        }
    } // body-padding
    .m-body {
        div.m-subheader {
            padding: 20px 30px 0 30px;
        }
        .m-content {
            padding: 10px 30px !important;
        }
    }

    @media (max-width: 992px) {
        .m-body {
            div.m-subheader {
                padding-top: 45px;
            }
        }
    }

    .ng-trigger-routerTransition {
        padding-top: 0px !important;
    }

    .m-aside-menu .m-menu__nav>.m-menu__item>.m-menu__link .m-menu__link-text {
        font-size: 1.1rem;
    }

    .m-aside-menu .m-menu__nav>.m-menu__item>.m-menu__link .m-menu__link-icon,
    .m-aside-menu .m-menu__nav>.m-menu__item>.m-menu__link .m-menu__link-text {
        color: #c1c3d8 !important;
    }

    .m-aside-menu .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item>.m-menu__link .m-menu__link-text,
    .m-aside-menu .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item>.m-menu__link .m-menu__link-icon {
        color: #868aa8 !important;
    }

    .m-aside-menu .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item>.m-menu__link .m-menu__link-text {
        font-size: 1.05rem;
    } // font-color
    .m--font-primary {
        color: #4d86ee !important;
    }

    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-text,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-icon,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-icon,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-text {
        color: #FFF !important;
    }

    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__link {
        background-color: #4d86ee !important;
    }

    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-text,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-icon {
        color: #8c8ea4;
    }

    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item.m-menu__item--expanded {
        background: #2c2e3e;
    }

    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item.m-menu__item--expanded.m-menu__item--open {
        background: #292b3a;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 微软雅黑 !important;
        font-weight: 300;
    }

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/

    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background-color: #F5F5F5;
    }

    /*定义滚动条轨道 内阴影+圆角*/

    ::-webkit-scrollbar-track {
        background-color: #ddd;
    }

    /*定义滑块 内阴影+圆角*/

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        border: 2px solid #ddd;
        background-color: #bbb;
    }

    .margin-left-5 {
        margin-left: 5px !important;
    }

    .margin-right-5 {
        margin-right: 5px !important;
    }

    .margin-top-5 {
        margin-top: 5px !important;
    }

    .margin-top-15 {
        margin-top: 15px !important;
    }

    .margin-bottom-5 {
        margin-bottom: 5px !important;
    }

    .margin-bottom-5 {
        margin-bottom: 5px !important;
    }

    .margin-bottom-15 {
        margin-bottom: 15px !important;
    }

    .padding-left-5 {
        padding-left: 5px !important;
    }

    .padding-right-5 {
        padding-right: 5px !important;
    }

    .padding-top-5 {
        padding-top: 5px !important;
    }

    .padding-bottom-5 {
        padding-bottom: 5px !important;
    }

    .width-percent-5 {
        width: 5%;
    }

    .width-percent-10 {
        width: 10%;
    }

    .width-percent-15 {
        width: 15%;
    }

    .width-percent-20 {
        width: 20%;
    }

    .width-percent-30 {
        width: 30%;
    }

    .width-percent-40 {
        width: 40%;
    }

    .width-percent-50 {
        width: 50%;
    }

    .width-percent-100 {
        width: 100%;
    }

    /* Sweet alert */

    .swal-footer {
        text-align: center;
    }

    .m-aside-left--minimize {
        .normal-footer {
            margin-left: 80px !important;
        }
    }

    .normal-footer {
        margin-left: 255px
    }

    .m-footer.normal-footer {
        height: 30px;
        min-height: 30px;
    } // modal
    .modal .modal-content .modal-header,
    .modal .modal-content .modal-footer {
        padding: 10px 25px;
    } // routerToDevice
    .routerToDevice {
        text-decoration: none;
        color: #3695ff !important;
        cursor: pointer;
    } // badge
    @media (min-width: 993px) {
        .m-topbar .m-topbar__nav.m-nav>.m-nav__item>.m-nav__link .m-nav__link-badge {
            top: -8px;
        }
    } // primeNg table
    div.primeng-datatable-container .ui-datatable table tbody tr.ui-datatable-even.ui-state-highlight {
        background-color: #0275d8 !important;
        color: #ffffff !important;
    } // byrun
    .byrun {
        position: relative;
        font-size: 26px;
        font-weight: 600;
        color: #ee4b57;
    }

    @media (min-width: 1366px) {
        .byrun {
            left: 38%;
        }
    }

    @media (max-width: 1367px) {
        .byrun {
            left: 30px;
        }
    } // hisortyAlarmTable
    .hisortyAlarmTable {
        ul.dropdown-menu {
            max-height: 230px !important;
            li.dropdown-item {
                padding: 0.5rem 1.2rem;
            }
        }
    } //   downLoadApp
    @media (max-width: 1200px) and (min-width: 993px) {
        .m-topbar .m-topbar__nav.m-nav>.m-nav__item.nav-downLoadApp {
            padding: 0 12px;
        }
    }

    @media (max-width: 992px) {
        .m-topbar .m-topbar__nav.m-nav>.m-nav__item.nav-downLoadApp {
            padding: 0 12px;
        }
    }

    .nav-downLoadApp {
        background-color: #3695ff;
        margin-right: 100px;
        vertical-align: top !important;
        height: 30px !important;
        line-height: 30px !important;
        margin-top: -4px;
        font-size: 12px;
        position: relative;
        color: #fff;
        z-index: 1;
        &::after {
            content: "";
            width: 0;
            height: 0;
            border-top: 10px solid #3695ff;
            border-right: 54px solid transparent;
            border-left: 54px solid transparent;
            position: absolute;
            left: 0;
        }
        .nav-downLoadApp-Qr {
            opacity: 0;
            visibility: hidden;
            background-color: #fff;
            position: absolute;
            transition: all 0.3s ease-in;
            box-shadow: 0px 1px 15px 1px rgba(113, 106, 202, 0.08);
            top: 70px;
            left: -47px;
            padding: 20px;
            border-radius: 5px;
            .Qr-title {
                color: #000;
                text-align: center;
            }
            &::before {
                content: "";
                width: 0;
                height: 0;
                border-bottom: 10px solid #FFF;
                border-right: 10px solid transparent;
                border-left: 10px solid transparent;
                position: absolute;
                top: -10px;
                left: 98px;
            }
        }
        &:hover {
            .nav-downLoadApp-Qr {
                opacity: 1;
                visibility: visible;
            }
        }
    } //fullscreen
    .m-portlet.m-portlet--fullscreen {
        z-index: 1041;
    }

    .amap-sug-result {
        z-index: 99999
    }

    .amap-marker-content {
        span {
            position: absolute;
            border-radius: 50%;
            top: 50%;
            margin-top: -30px;
            margin-left: -30px;
            width: 60px;
            height: 60px;
            left: 50%;
            z-index: 3;
        }
        .alarm {
            box-shadow: 0 0 1px 2px rgba(243, 74, 90, 0.8);
            background: rgba(243, 74, 90, 0.6);
            opacity: 0;
            -webkit-animation: halo 1s 0.5s infinite ease-out;
            -moz-animation: halo 1s 0.5s infinite ease-out;
            animation: halo 1s 0.5s infinite ease-out;
        }
        .normal {
            box-shadow: 0 0 1px 2px rgba(54, 149, 255, 0.4);
            background: rgba(54, 149, 255, 0.4);
            opacity: 1;
        }
    }

    @-webkit-keyframes halo {
        0% {
            opacity: 0;
            -webkit-transform: scale(0.1);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -webkit-transform: scale(1.2);
        }
    }

    @-moz-keyframes halo {
        0% {
            opacity: 0;
            -moz-transform: scale(0.1);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -moz-transform: scale(1.2);
        }
    }

    @-ms-keyframes halo {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

    @-o-keyframes halo {
        0% {
            opacity: 0;
            -o-transform: scale(0.1);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            -o-transform: scale(1.2);
        }
    }

    @keyframes halo {
        0% {
            opacity: 0;
            transform: scale(0.1);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
            transform: scale(1.2);
        }
    } // 历史通道下拉样式
    .dropdown-item.active,
    .dropdown-item:active,
    .dropdown-menu>li>a.active,
    .dropdown-menu>.dropdown-item.active {
        background-color: transparent;
        color: #575962;
    }

    .angular-dropdown-multiselect-chop-text-button {
        margin-left: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }

    .dsContainer {
        select.form-control:not([size]):not([multiple]) {
            height: 30px;
            padding: 0 5px;
            border-radius: 0px;
            font-family: 微软雅黑;
            font-size: 14px;
        }
    }

    .ng-select .ng-select-container {
        min-height: 30px;
        border-color: #d7dbe5;
        border-radius: 0px;
        line-height: 20px;
    }

    .ng-select.ng-select-single .ng-select-container{
        height: 30px;
    }

    .ng-select.ng-select-multiple .ng-select-container{
        min-height: 30px;
    }

    .ng-input input{
        height: inherit;
    }

    body .ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item-group {
        padding: 10px 15px;
    }

    body .ui-dropdown-panel .ui-dropdown-items .ui-dropdown-item {
        padding: 10px 15px;
    }

    .ui-dropdown-panel .ui-dropdown-filter-container .fa {
        font-size: inherit;
    }

    body .ui-dropdown .ui-dropdown-label {
        margin-left: 0px;
    }

    body .ui-dropdown .ui-dropdown-trigger .fa {
        font-size: inherit;
    }
    .ui-table-scrollable-body{
        top:-1px;
    }
    .m-checkbox{
        padding-left: 20px;
    }
    body .ui-widget-header{
        background: #f2f3f8;
    }
    .operationCenterPage.star-blue-theme.use-science{
        .ui-widget-header,.ui-widget-content{
            background: #00173d;
            color: #3695ff;
        }
    }
    .operationCenterPage.star-blue-theme{
        .ui-widget-header,.ui-widget-content{
            background: #202647;
            color: rgba(255, 255, 255, 0.6);
        }
    }
    .vitality-orange-theme {
        .amap-marker-content{
            div{
                background-color: #ff9900!important;
            }
            .normal{
                box-shadow: 0 0 1px 2px rgba(255, 153, 0, 0.4);
                background: rgba(255, 153, 0, 0.4);
            }
            .alarm{
                box-shadow: 0 0 1px 2px rgba(243, 74, 90, 0.8);
                background: rgba(243, 74, 90, 0.6);
            }
            .alarm-icon-body {
                background-color: rgb(243,74,90)!important;
            }
        }
    }
    .operationCenterPage.vitality-orange-theme{
        .ui-widget-header,.ui-widget-content{
            background: #353a40;
            color: #cdc4aa;
        }

        .ui-paginator-bottom.ui-paginator.ui-widget.ui-widget-header a{
            background-color: #484a52;
        }
        .ui-paginator-bottom.ui-paginator.ui-widget.ui-widget-header a.ui-state-active{
            background-color: #ff9900;
        }
        .ui-paginator-bottom.ui-paginator.ui-widget.ui-widget-header a span{
            color: rgba(255, 255, 255, 0.6);
        }
        .ui-paginator .ui-paginator-pages .ui-paginator-page{
            color: rgba(255, 255, 255, 0.6);
        }
    }
    .vegetation-green-theme{
        .amap-marker-content{
            div{
                background-color: #17bb9b!important;
            }
            .normal{
                box-shadow: 0 0 1px 2px rgba(23, 187, 155, 0.4);
                background: rgba(23, 187, 155, 0.4);
            }
            .alarm-icon-body {
                background-color: rgb(243,74,90)!important;
            }
        }
    }
    .operationCenterPage.vegetation-green-theme{
        .ui-widget-header,.ui-widget-content{
            background: #1f2631;
            color: #aacdb7;
        }

        .ui-paginator-bottom.ui-paginator.ui-widget.ui-widget-header a{
            background-color: #293444;
        }
        .ui-paginator-bottom.ui-paginator.ui-widget.ui-widget-header a.ui-state-active{
            background-color: #17BB9B;
        }
        .ui-paginator-bottom.ui-paginator.ui-widget.ui-widget-header a span{
            color: rgba(255, 255, 255, 0.6);
        }
        .ui-paginator .ui-paginator-pages .ui-paginator-page{
            color: rgba(255, 255, 255, 0.6);
        }
    }
    .operationCenterPage{
        .ui-widget-content{
            border: 0;
        }
        .ui-paginator-pages{
            height: 2.25rem;
        }
        .ui-widget-header{
            background: #ffffff;
            border: 0;
            padding: 0;
        }
    }
    // p-table 操作按钮
    .fe-modal-middle  ul.dropdown-menu li a {
        cursor: pointer;
    }
    .fe-modal-middle .ng-placeholder{
        font-size: 14px;
        color: #666666!important;
    }
    .margin-top-10{
        margin-top: 10px;
    }
    .margin-top-20{
        margin-top: 20px;
    }
    // 多选下拉
    .fe-modal-middle .dropdown-item{
        border-bottom: 1px solid white;
        color: #666666;
        font-size: 14px;
    }
    .fe-modal-middle .dropdown-menu>.dropdown-item.active,.fe-modal-middle .dropdown-menu>li>a.active{
        background: #3695ff;
        color: white;
    }
    .fe-modal-middle .dropdown-menu{
        left: 5px;
    }
    .fe-modal-middle .dropdown-menu>.dropdown-item,.fe-modal-middle .dropdown-menu>li>a{
        padding: 0 20px;
    }
    .fe-modal-middle .primeng-datatable-container .primeng-no-data {
        border: 1px solid #d7dbe5;
        margin-top: -1px;
    }
    .fe-modal-middle .nav.nav-pills, .nav.nav-tabs{
        margin-bottom: 10px;
    }
//组态弹出框样式
    .fe-popup-default,.fe-popup-large,.fe-popup-small{
        background: white;
    }
    .fe-popup-header{
        width: 100%;
        padding: 10px 15px;
        font-size: 16px;
        color: #333333;
        height: 50px;
        border-bottom: 1px solid #f4f4f4;
        position: relative;
    }
    .fe-popup-header-close{
        width: 20px;
        height: 20px;
        position: absolute;
        right: 10px;
        top: 17px;
        font-size: 22px;
        line-height: 20px;
        text-align: center;
        color: #999999;
    }
    .fe-popup-header-close:hover{
        cursor: pointer;
    }
    .fe-popup-middle{
        width: 100%;
        padding: 10px 15px;
    }
    .fe-popup-bottom{
        width: 100%;
        padding: 10px 15px;
        height: 58px;
        border-top: 1px solid #f4f4f4;
        position: relative;
    }
    .fe-popup-show{
        margin-top: 10px;
    }
    .fe-popup-condition label:nth-child(2){
        margin-left: 80px;
    }
//表单
    .fe-form table{
        border-collapse: collapse;
        border: 1px solid #d7dbe5;
    }
    .fe-form th,.fe-form td{
        height: 30px;
        box-sizing: border-box;
        background: transparent;
        padding: 5px 10px;
    }
    .fe-form tr{
        border-bottom: 1px solid #d7dbe5;
    }
    //select
    .fe-modal-middle select,.fe-popup-middle select{
        padding: 0 5px;
        height: 30px;
        width: 100%;
    }
    //宽度
    .modal .half-width{
        width: 50%;
    }
    .modal .whole-width{
        width: 100%;
    }
//全局样式
    .modal label{
        margin-bottom: 0;
    }
    .modal .left-margin{
        margin-left: 10px;
    }
    .modal  .float-left{
        float: left;
    }
    .modal .float-right{
        float: right;
    }
.multiselect-container .dropdown-toggle{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.modal select{
        color: #666666;
    }
    .fe-modal-middle input[type=text],.fe-modal-middle input[type=number]{
        border: 1px solid #d7dbe5;
    }
     // 滚动条
     ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    // 滚动条滑动的滑块
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        border: 0;
        background-color: #b5c2ca;
    }
    //滚动条没有滑块的部分
    ::-webkit-scrollbar-track {
        background-color: #eeeff3;
    }
    .modal select{
        font-family: 微软雅黑!important;
    }
    //label 鼠标图标变成手指
    .modal label span:hover{
        cursor: pointer;
    }
    // 单选按钮
    .fe-modal-middle input[type=radio],.fe-popup-middle input[type=radio]{
        width: 14px;
        height: 14px;
        top: 1px;
        position: relative;
        margin-right: 10px;
    }
    .fe-modal-middle input[type=radio]:before, .fe-modal-middle input[type=radio]:after,.fe-popup-middle input[type=radio]:before, .fe-popup-middle input[type=radio]:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: -1px;
      border-radius: 50%;
      transition: .3s ease;
    }
    .fe-modal-middle input[type=radio]:before,.fe-popup-middle input[type=radio]:before {
      width: 14px;
      height: 14px;
      background-color: #fff;
      border: 1px solid #d7dbe5;
    }
    .fe-modal-middle input[type=radio]:after,.fe-popup-middle input[type=radio]:after {
      left: 2px;
      top: 3px;
      width: 8px;
      height: 8px;
      background-color: #fff;
    }
    .fe-modal-middle input[type=radio]:checked:after,.fe-popup-middle input[type=radio]:checked:after {
     left: 2px;
      top: 3px;
      width: 8px;
      height: 8px;
      background-color:#3695ff;
    }
    // 多选按钮样式
    .fe-modal-middle input[type=checkbox],.fe-popup-middle input[type=checkbox]{
        width: 14px;
        height: 14px;
        margin-right: 10px;
        position: relative;
    }
    .fe-modal-middle input[type=checkbox]:before,.fe-popup-middle input[type=checkbox]:before{
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 16px;
        height: 16px;
        background-color: white;
        content: '';
        border: 1px solid #d7dbe5;
    }
    .fe-modal-middle input[type=checkbox]:checked:before,.fe-popup-middle input[type=checkbox]:checked:before{
        background: url("../common/images/check.png") 0 0 no-repeat;
        background-size: 100% 100%;
        background-color: white;
    }

    .fe-modal-middle input[type=radio]:hover,.fe-modal-middle input[type=checkbox]:hover,
    .fe-popup-middle input[type=radio]:hover,.fe-popup-middle input[type=checkbox]:hover{
        cursor: pointer;
    }
    .fe-modal-middle textarea,.fe-popup-middle textarea{
        border: 1px solid #d7dbe5;
    }
    // input placeholder 样式
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #999999;
        font-size: 14px;
    }
//清楚浮动
    .clearfix:after{
        content:"";
        height:0;
        line-height:0;
        display:block;
        visibility:hidden;
        clear:both
    }
    .clearfix{
        zoom:1;//兼容ie
    }
// 组态 模态框
    .fe-popup-large{
        //   组态弹出框（大）
        width: 800px;
        max-width: 800px;
    }
    .fe-popup-default{
       //组态弹出框（中）
       width: 600px;
       max-width: 600px;
    }
    .fe-popup-small{
        //   组态弹出框（小）
        width: 500px;
        max-width: 500px;
    }
    .fe-modal-center{
        // 让模态框居中
        margin: 30px auto 0;

    }
    .modal .fe-modal-container{
        //模态框的容器
        width: 100%;
        border-radius: 4px;
        background: white;
        border-color: #b5c2ca!important;
        position: relative;
        left: 0;
        top: 0;
        font-size: 14px;
        .top-line{
            position: absolute;
            left: 0;
            top: 83px;
            height: 1px;
            width: 100%;
            background: #f4f4f4;
        }
        .fe-modal-header{
            //模态框的头部（也就是最大标题的容器）
            width: 100%;
            height: 50px;
            position: relative;
            padding: 0 15px;
            border: 0;
            .fe-modal-header-title{
                //头部标题
                height: 100%;
                font-size: 18px;
                line-height: 60px;
                color: #333333;
                font-weight: 500;
            }
            .fe-modal-header-close{
                //模态框关闭按钮（里面写一个 x 即可或者添加图片）
                width: 30px;
                height: 30px;
                position: absolute;
                right: 15px;
                top: 10px;
                font-size: 30px;
                line-height: 30px;
                text-align: center;
                color: #999999;
            }
            .fe-modal-header-close:hover{
                cursor: pointer;
                color: #666666;
            }
        }
        //模态框内容
        .fe-modal-middle{
            width: 100%;
            padding: 0 15px;
        }
    }
    .fe-modal-body{
        width: 100%;
        //选项
        .fe-option-head{
            height: 30px;
            width: 100%;
            line-height: 30px;
        }
        .fe-option-body{
            width: 100%;
            background: #f2f3f8;
            select{
                border-radius: 0;
            }
        }
    }
    .fe-modal-footer{
        // 模态框底部
        width: 100%;
        margin-top: 20px;
        height: 58px;
        position: relative;
        padding: 12px 15px;
        border: 1px solid #f4f4f4;
    }
    .button-group{
        height: 34px;
        position: absolute;
        right: 15px;
        .fe-btn{
            margin-right: 20px;
        }
        .fe-btn:last-child{
            margin-right: 0;
        }
    }
    .fe-modal-container .fe-modal-header.modal-border-bottom{
        border-bottom: 1px solid #f4f4f4
    }
    .fe-modal-content{
        width: 100%;
        padding: 10px;
        background: #f2f3f8;
        min-height:50px;
        select{
            border-radius: 0;
        }
        .fe-transverse-label:last-child{
            margin-bottom: 0;
        }
    }
// 布局
    //flex布局
    .flex{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    //上面单选，下面内容。多个radio一行排列
    .fe-radio-select-header{
        width: 100%;
        height: 30px;
        line-height: 30px;
        label{
            margin-right: 20px;
        }
    }
    .fe-radio-select-body{
        margin-top: 5px;
    }
    // 上面变量名 下面输入或者选择框。
    .fe-vertical-label{
        width:100%;
        .fe-vertical-title{
            line-height: 30px;
        }
        .fe-vertical-input,.fe-vertical-component{
            width: 100%;
            height: 30px;
            margin-top: 5px;
            border-color: #d7dbe5;
            color: #666666;
        }
        .fe-vertical-input{
            padding: 5px 10px;
            border-color: #d7dbe5;
            -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
        }
        .fe-vertical-input:focus{
            border-color: #3695ff;
        }
    }
    //一行两个
    .fe-half-line{
        width: calc(50% - 10px);
        float: left;
        margin-top: 10px;
    }
    .fe-half-line:nth-of-type(1){
        margin-top: 0px;
    }
    .fe-half-line:nth-of-type(2){
        margin-left: 20px;
        margin-top: 0px;
    }
    .fe-half-line:nth-of-type(2n){
        margin-left: 20px;
    }
    // 左边变量名 右边输入框。
    .fe-transverse-label{
        width: 100%;
        line-height: 30px;
        margin-bottom: 10px;
        .fe-transverse-title{
            width: 100px;
            margin-right: 5px;
            color: #333333;
            float: left;
            word-wrap: break-word;
            line-height: 20px;
            padding: 5px 0;
        }
        .fe-transverse-input,.fe-transverse-component{
            width: calc(100% - 105px);
            height: 30px;
            color: #666666;
            float: left;
            select{
                border-color: #d7dbe5;
                -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
                transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
                transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
                transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
            }
            select:focus{
                border-color: #3695ff;
            }
        }
        .fe-transverse-input{
            padding: 5px 10px;
            border-color: #d7dbe5;
            -webkit-transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
        }
        .fe-transverse-input:focus{
            border-color:#3695ff;
        }
    }
    //左边checkbox 右边内容 一行排列
    .fe-option-head-transverse,.fe-option-body-transverse{
        float: left;
        line-height: 30px;
    }
    .fe-option-head-transverse{
        width: 25%;
        word-wrap: break-word;
    }
    .fe-option-body-transverse{
        width: 75%;
    }
    //input
    .fe-modal-container input,.fe-modal-container select{
        color: #666666;
        font-size: 14px;
        border: 1px solid #d7dbe5;
        padding: 0 0 0 5px;
    }
// 按钮
    .fe-btn{
        display: inline-block;
        text-align: center;
        font-size: 14px;
        min-width: 80px;
        padding: 0 8px;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;
    }
    .fe-btn:hover{
        cursor: pointer;
    }
    .fe-btn.fe-btn-default{
        height: 34px;
        line-height: 34px;
    }
    .fe-btn.fe-btn-large{
        height: 40px;
        line-height: 40px;
    }
    .fe-btn.fe-btn-small{
        height: 30px;
        line-height: 30px;
    }
    .fe-btn.fe-btn-cancel-one{
        border: 1px solid #b5c2ca;
        background-color: white;
        color: #7F939F;
    }
    .fe-btn.fe-btn-cancel-one:hover{
        background-color: #f2f3f8;
    }
    .fe-btn.fe-btn-save{
        border:1px solid #3695ff;
        border-radius: 2px;
        background-color: #3695ff;
        color: white;
    }
    .fe-btn.fe-btn-save:hover{
        background-color: #226bbc;
    }
    .fe-btn.fe-btn-save:disabled{
        background-color:#ddd;
        border-color: #ddd;
    }
    .fe-btn.fe-btn-add{
        background-color: #0ac14b;
        color: white;
        border: 0;
    }
    .fe-btn.fe-btn-add:hover{
        background-color: #00a63b;
    }
    .fe-btn.fe-btn-cancel-two{
        background-color: #b5c2ca;
        color: white;
    }
    .fe-btn.fe-btn-cancel-two:hover{
        background-color: #7a92a1;
    }
    .fe-btn.fe-btn-delete{
        background-color: #ff4448;
        color: white;
    }
    .fe-btn.fe-btn-delete:hover{
        background-color: #f23135;
    }
    .fe-btn.fe-btn-secondary{
        background-color: #ffffff;
        border: 1px solid #3695ff;
        color: #3695ff;
    }
    .fe-btn.fe-btn-secondary:hover{
        background-color: #EEF3F9;
        border-color: #226bbc;
        color: #226bbc;
    }
    .fe-btn.disable{
        background: #cccccc;
        color: white;
    }
    .fe-btn.disable:hover{
        background: #cccccc;
        color: white;
        cursor: not-allowed;
    }
    .fe-btn-manage{
        width: 62px;
        cursor: pointer;
    }
    .fe-btn-operate{
        font-size: 14px;
        color: #7f939f;
        border: 1px solid #7f939f;
        background-color: white;
        transition: background-color .15s ease-in-out;
        cursor: pointer;
    }
    .fe-btn-operate:hover{
        background-color: #f2f3f8;
    }
    .modal .ng-input input[type=text]{
        padding-left: 0;
    }
    .gallerySettingModal{
        max-width: 700px;
    }
    .condition-setting-modal{
        max-width: 500px;
    }
    .modal .modal-content{
        border-radius: 0;
    }

    // new color-picker
    .color-picker .preset-area .preset-label{
        display: none;
    }
    .color-picker .preset-area hr{
        border: 0;
    }
    .color-picker .box .left{
        padding: 8px!important;
    }
    .color-picker .box .left .selected-color{
        top: 8px!important;
    }
    .color-picker .preset-area .preset-color{
        margin:3px!important;
    }
    .color-picker .hex-text .box,.color-picker .hsla-text .box, .color-picker .rgba-text .box{
        padding: 3px 24px 0px 8px!important;
    }
    .color-picker .box .right{
        padding: 7px 8px 0!important;
    }
    .color-picker .right .hue{
        margin-bottom: 10px!important;
    }
    .preset-area div{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .color-picker .hex-text,.color-picker .rgba-text,.color-picker .hsla-text, .color-picker .box{
        padding: 0 8px!important;
    }
    .color-picker .type-policy{
        top: 205px!important;
    }
    .edit-report-modal{
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        margin: 0;
        .modal-content{
            height: 100%;
        }
        edit-report-modal{
            height: 100%;
        }
    }

    .select2-container--bootstrap .select2-selection--multiple{
        min-height: 30px;
        line-height: 30px;
        border-radius: 0;
    }

    //tab
    .m-tabs-line a.m-tabs__link.active, .m-tabs-line a.m-tabs__link:hover, .m-tabs-line.nav.nav-tabs .nav-link.active, .m-tabs-line.nav.nav-tabs .nav-link:hover {
        background: 0 0;
        color: rgba(0, 0, 0, 0.9);
        border-bottom: 1px solid #3695FF;
    }
    .device-detail-tabset {
        .nav-tabs{
            border-bottom: 1px solid #ebedf2;
        }
        .m-tabs-line a.m-tabs__link.active, .m-tabs-line a.m-tabs__link:hover, .m-tabs-line.nav.nav-tabs .nav-link.active, .m-tabs-line.nav.nav-tabs .nav-link:hover {
            background: 0 0;
            color: #3f4047;
            border-bottom: 3px solid #3695ff;
        }
    }
    .work-information-base{
        .nav-tabs{
            border-bottom: 1px solid #ebedf2;
        }
        .nav-tabs .nav-link{
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }
        .nav.nav-pills .nav-item, .nav.nav-tabs .nav-item{
            margin-left: 0;
            a{
                padding: 7px 25px;
                display: inline-block;
                border-bottom:1px;
            }

        }
        .m-tabs-line a.m-tabs__link.active, .m-tabs-line a.m-tabs__link:hover, .m-tabs-line.nav.nav-tabs .nav-link.active, .m-tabs-line.nav.nav-tabs .nav-link:hover {
            background: 0 0;
            background: #EBECF0;
            color:rgba(0,0,0,0.6);
            border-bottom: 0;
        }
    }
    .report-detail-fullscreen{
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        margin: 0;
        background-color: #ffffff;
        .modal-content{
            height: 100%;
            width: 100%;
            report-detail-fullscreen{
                height: 100%;
                width: 100%;
            }
        }
    }
    .report-swiper{
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
        margin: 0;
        background-color: #ffffff;
        .modal-content{
            height: 100%;
            width: 100%;
            report-swiper{
                height: 100%;
                width: 100%;
            }
        }
    }
    .report-content>div{
        margin: 0 auto;
    }

    .report-preview-table-modal {
        color: #000;
        width:1250px;
        max-width: 1250px;
    }
    .modal-dialog.choose-monitor {
        max-width: 800px;
    }
    .modal-dialog.work-order-detail-modal{
        max-width: 940px;
        margin: 70px auto;
    }

    data-source-configuration .data-source-message, {
        .tab-content{
            height: calc(100% - 100px);
            .tab-pane{
                height: 100%;
                .primeng-datatable-container{
                    height: calc(100% - 50px);
                    .ui-table-resizable{
                        max-height: calc(100% - 50px);
                        overflow-x: hidden;
                        overflow-y: auto;
                    }
                }
            }
        }
    }
    #device-monitor-container{
        .full-screen-container{
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
    .portlet-body-left{
        .fcloud-blue-tooth-map-detail:before{
            font-size:17px !important;
        }
    }