$plain-font: "Avenir",
Helvetica,
Arial,
sans-serif;
$head-color:#081128;
$head-light-color:#12213e;
$head-height:64px;

$basic-padding:20px;
$basic-btn-color:#081128;
$stripe-color:#28446b;
$hover-color:#28446b;

$left-color:#0a1832;
$main-color:#162947;
$main-light-color:#1c3150;

#app {

    /************登陆页面样式***************/
    .login {
        width: 100%;
        height: 100%;
        // background-image: url("../images/login-bg.jpg");
        // background-size: cover;
        // background-position: center;

        background: url("../images/bgdark.png") bottom, linear-gradient(90deg, #111e37, #1a2944);
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;

        &-con {
            position: absolute;
            right: 20%;
            top: 50%;
            transform: translateY(-60%);
            width: 360px;

            &-header {
                font-size: 16px;
                font-weight: 300;
                text-align: center;
                padding: 30px 0;
            }

            .form-con {
                padding: 10px 0 0;
            }

            .login-tip {
                font-size: 10px;
                text-align: center;
                color: #c3c3c3;
            }
        }
    }
    .software{
        color:#fff;
    }
    /************主框架页面样式***************/
    .main {
        .left-sider {
            background: $left-color;
        }

        .ivu-menu-light {
            background: $left-color;
        }

        .logo-con {
            height: $head-height;
            padding: 10px;
            display: flex;
            align-items: center;
            width: 256px;
            background: transparent;

            img {
                max-height: $head-height;
                width: auto;
                display: block;
                margin: 0 auto;
            }
        }

        .header-con {
            background: $head-color;
            padding: 0;
            width: 100%;
            display: flex;

            .ivu-menu-dark {
                background: transparent;
            }

            .ivu-menu {
                height: $head-height;
                line-height: $head-height;
                flex: 256px;

                .ivu-menu-item {
                    font-size: 18px;
                    position: relative;
                    letter-spacing: 1px;
                    color: #b5bbc9;

                    .line-border {
                        position: absolute;
                        right: 0;
                        height: 40px;
                        width: 1px;
                        display: inline-block;
                        background: linear-gradient(rgba(255, 255, 255, 0.2), $head-light-color, rgba(255, 255, 255, 0.3));
                    }

                    &:last-child .line-border {
                        display: none;
                    }
                }

                .ivu-menu-item-selected {
                    color: #fff;
                    text-shadow: 1px 2px 3px black;
                }
            }

            .head-right {
                float: right;
                height: auto;
                padding-right: 20px;
                line-height: 64px;
                background: transparent;
            }

            .user {
                float: right;
                padding-right: 20px;
                height: 100%;
                background: transparent;
                display: flex;
                justify-content: center;
                align-items: center;

                .ivu-input {
                    background-color: #455064;
                    border-radius: 20px;
                    border-color: #5b6a82;
                    color: #fff;
                    height: 42px;
                    line-height: 1;
                    padding: 0 20px;
                    background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
                    
                }

                .ivu-icon-md-menu {
                    color: #d3e4e7;
                    font-size: 20px;
                }

                .ivu-icon-md-contact {
                    font-size: 30px;
                    color: #d3e4e7;
                }

                .ivu-input-wrapper {
                    margin-right: 12px;

                    .ivu-input-suffix {
                        top: 5px;
                        right: 20px;

                        .ivu-icon-ios-search {
                            font-size: 28px;
                            color: #d3e4e7;
                        }
                    }
                }
            }
        }

        .main-content-con {
            height: 100%;
            overflow: hidden;
            background: $head-light-color;
            padding: 0;
            display: flex;
        }

        .main-div {
            width: calc(100% - 318px);
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .right-div {
            margin-left: 20px;
            width: 310px;
            background: #fff url('../images/right.png') no-repeat center top;
            height: 100%;

        }

        .side-div {
            width: 318px;
            height: 100%;
            border-left: 18px solid #EBF0F4;

            h2 {
                line-height: 60px;
                font-size: 18px;
                font-weight: bold;
                text-align: center;
                background: #D1ECF7;
                color: #36A0C5;
            }

        }

        /*****************页面框架样式*******************/
        .breadcrumb-separator{
            color: gray;
            padding: 0 5px;
          }
        .oo-page {
            display: flex;
            padding: 10px;
            height: calc(100% - 50px);
            background: $main-color;

            .i-table {
                width: 100% !important;

                .ivu-table-header,
                .ivu-table-fixed-header {
                    th {
                        background: $main-light-color;
                        color: #fff;
                        border: 0 none;
                    }
                }
            }

            .oo-server {
                height: 100%;
                width: 100%;
            }

            .oo-index {
                display: flex;
                flex-wrap: wrap;
                height: 100%;
                width: 100%;

                .oo-index-div {
                    width: 25%;
                    padding: 10px;

                    >div {
                        background: #F2F7FB;
                        height: 100%;
                    }

                    .oo-index-bg {
                        // height: 50%;
                        background: #ccc;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .oo-index-icon {
                            height: 120px;
                            width: 120px;
                            border-radius: 50%;
                            // background: red;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                    }

                    .top-0 {
                        background: #d4ebf4;

                        .oo-index-icon {
                            background: #b3e0f2;
                        }
                    }

                    .top-1 {
                        background: #a2e4d9;

                        .oo-index-icon {
                            background: #c3eee7;
                        }
                    }

                    .top-2 {
                        background: #d7e2f3;

                        .oo-index-icon {
                            background: #b2c9ee;
                        }
                    }

                    .top-3 {
                        background: #f3e7d4;

                        .oo-index-icon {
                            background: #e0cbab;
                        }
                    }

                    .top-4 {
                        background: #dcd7f2;

                        .oo-index-icon {
                            background: #cfc2f1;
                        }
                    }

                    .top-5 {
                        background: #f3e0d7;

                        .oo-index-icon {
                            background: #edccb6;
                        }
                    }

                    .top-6 {
                        background: #d4ebf4;

                        .oo-index-icon {
                            background: #b3e0f2;
                        }
                    }

                    .top-7 {
                        background: #c3eee7;

                        .oo-index-icon {
                            background: #a2e4d9;
                        }
                    }

                    .top-8 {
                        background: #f3e7d4;

                        .oo-index-icon {
                            background: #e0cbab;
                        }
                    }

                    .top-9 {
                        background: #c3eee7;

                        .oo-index-icon {
                            background: #a2e4d9;
                        }
                    }

                    .top-10 {
                        background: #d7e2f3;

                        .oo-index-icon {
                            background: #b2c9ee;
                        }
                    }

                    .top-11 {
                        background: #dcd7f2;

                        .oo-index-icon {
                            background: #cec4f1;
                        }
                    }

                    .oo-index-title {
                        height: 50px;
                        line-height: 50px;
                        text-align: center;
                        color: #0eb7dd;
                        font-size: 22px;
                    }

                    .oo-index-detail {
                        text-align: center;
                        padding: 0 20px 10px;
                    }
                }
            }
        }

        .bread-crumb-div {
            // margin-left:-30px;
            line-height: 30px;
            border-bottom: 5px solid $head-light-color;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            position: relative;
            background: $main-color;

            &:after {
                content: '';
                width: 8px;
                height: 30px;
                // background: #00BAFF;
                display: block;
                position: absolute;
                left: 20px;
                top: 15px;
            }

            .ivu-breadcrumb {
                span:last-child {
                    color: #fff;

                    a {
                        color: #fff;
                    }
                }
            }
        }
    }

    /*********左侧菜单页面样式***********/
    .ivu-menu-item {
        display: flex;
        align-items: center;
        color: #b5b9c3;

        .ivu-icon-ios-arrow-forward {
            position: absolute;
            right: 8px;
        }
    }

    .ivu-menu {
        font-size: 16px;
        color: #3cc4ff;

        .ivu-menu-submenu.ivu-menu-opened {
            .ivu-menu {
                background: #12213e;
            }
        }

        .ivu-icon-ios-arrow-down {
            display: none;
        }
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
        background: $head-light-color;
        color: #fff;
    }

    .ivu-menu-item>i {
        margin-right: 12px !important;
    }

    .ivu-menu-submenu>.ivu-menu>.ivu-menu-item>i {
        margin-right: 8px !important;
    }


    .ivu-select-dropdown.ivu-dropdown-transfer {
        max-height: 400px;
    }

    .sub-menu-custom {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;

        .ivu-dropdown {
            width: 100%;
            height: 100%;
        }
    }


    /*******头部组件样式********/
    .header-bar {
        width: 100%;
        height: 100%;
        position: relative;

        .custom-content-con {
            float: right;
            height: auto;
            padding-right: 20px;
            line-height: $head-height;

            &>* {
                float: right;
            }
        }
    }







    /**********************部署监控中心样式***********************/
    /*****组件配置弹出窗页面样式*****/
    .build-modal {
        .tab-btns {
            text-align: center;
            margin-top: 10px;
        }
    }

    /*****部署监控中心页面样式*****/

    .build-page {
        height: 100%;

        .deploy-span {
            margin-right: 100px;
        }

        .top-btn-div {
            border-bottom: 2px solid #2d8cf0;
            padding-bottom: 5px;
            text-align: right;
            height: 40px;

            .ivu-upload {
                display: inline-block;
            }

            button {
                margin-left: 10px;
            }
        }

        .center-carousel {
            height: calc(100% - 45px);

            >div {
                height: 100%;
            }
        }

        .ivu-table-cell {
            padding: 0 5px;
        }

        .ivu-carousel-list {
            padding: 35px 0;

            >div.ivu-carousel-track:not(.higher) {
                top: 35px !important;
                height: calc(100% - 70px) !important;
            }
        }

        .ivu-carousel-list,
        .ivu-carousel-track,
        .ivu-carousel-item {
            height: 100% !important;
        }

        .ivu-carousel-track {
            background: #fff;
            overflow: visible !important;
        }

        .icon-menus {
            float: right;

            .ivu-icon {
                font-size: 20px;
                margin-right: 5px;
                color: #2d8cf0;
                cursor: pointer;
            }
        }

        .ivu-carousel-item {
            display: flex;
            flex-wrap: wrap;

            >div {
                width: 33%;
                height: 33%;
                box-sizing: border-box;
                padding: 10px 0 0 10px;

                .table-tip {
                    line-height: 32px;
                    font-size: 14px;
                    font-weight: bold;
                    background: #f8f8f9;
                    border: 1px solid #dcdee2;
                    border-bottom: 0 none;
                    padding-left: 15px;
                }

                .ivu-table {
                    width: 100%;
                }
            }

            .table-carousel {
                .ivu-table-wrapper {
                    height: calc(100% - 33px);

                    .ivu-table-header {
                        width: 100%;

                        table {
                            width: 100% !important;
                        }
                    }

                    .ivu-table-body {
                        table {
                            width: 100% !important;
                        }
                    }
                }

                .ivu-tooltip {
                    width: 20px;
                    margin-right: 5px;
                }
            }

            .ivu-table-overflowX {
                overflow-x: hidden;
            }
        }
    }

    @media only screen and (max-width: 2559px) {
        .build-page {
            .ivu-carousel-item {
                >div {
                    width: 33%;
                    height: 50%;
                }
            }
        }
    }

    @media only screen and (max-width: 1600px) {
        .build-page {
            .ivu-carousel-item {
                >div {
                    width: 50%;
                    height: 50%;
                }
            }
        }
    }


}

/**********************公共页面类名样式***********************/
.op-page {
    width: 100%;
    height: 100%;
    background: #fff;
}



.ivu-modal-wrap {
    display: -webkit-flex;
    /* 新版本语法: Chrome 21+ */
    display: flex;
    /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;
    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;
    /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;
    /* 混合版本语法: IE 10 */
    justify-content: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

.ivu-tooltip {
    width: 100%;

    .nowrapShow {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .ivu-tooltip-popper {
        .ivu-tooltip-inner {
            width: 300px;
            white-space: normal;
        }
    }
}

.ivu-menu-vertical.ivu-menu-light:after,
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
    display: none !important;
}


.i-table {

    .ivu-table {
        background: $main-light-color;
        color: #b5b9c9;

        .ivu-table-tip td {
            background: $main-light-color;
            color: #fff;
            border: 0 none;
        }

        .ivu-checkbox-inner {
            border: 1px solid #2f547e;
            border-radius: 2px;
            background-color: #2d4a72;
        }
      
    }

    .ivu-table:before,.ivu-table-fixed-right::before, .ivu-table-fixed::before {
        display: none;
    }

    .ivu-table-border:after {
        display: none;
    }

    .ivu-table-wrapper-with-border {
        border: 0 none;
    }

    .ivu-table-header {
        th {
            background: $main-light-color;
            color: #fff;
            border: 0 none;
            font-size: 14px;
            border-color: #DEEBF1;
        }
    }

    // .ivu-table-stripe .ivu-table-body tr.ivu-table-row-hover td,
    // .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-hover td {
    //     background: $main-color;
    // }

    .ivu-table-tbody {
        td {
            border: 0 none;
            background: $main-color;

            .td-radio-input {
                width: 16px;
                height: 16px;
            }
        }

        tr:nth-child(2n) {
            td {
                background: $main-light-color;
            }
        }

        tr:hover,
        tr.ivue-table-row-hover {
            td {
                background: $hover-color;
            }
        }

    }

    .i-table-top-btns {
        margin: 10px 0;

        .ivu-input {
            background: #1d3655;
            border: 0 none;
        }

        button {
            margin-right: 5px;
            color: #fff;
            min-width: 80px;
            text-align: center;
            font-size: 13px;
            letter-spacing: 0.5px;
            padding: 2px 5px;

            &:focus {
                box-shadow: none;
            }

            span {
                margin-left: 0;
            }

            .ivu-icon {
                font-size: 16px;
            }
        }

        .ivu-upload {
            display: inline-block
        }
    }   
    .ivu-page {
        text-align: right;
        margin: 10px 0;
        .ivu-select-dropdown {
            overflow: hidden;
        }
    }

  .ivu-page-prev, .ivu-page-item,  .ivu-page-next, .ivu-select-item,
  .ivu-select-dropdown,  .ivu-select-placeholder,.ivu-select-selected-value
      {
        background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
        border-color: #515a6e;
    }

}

.ivu-dropdown-menu,.ivu-dropdown-item{
    color: #fff;
    background-color:#081128;
}
.ivu-date-picker,.ivu-input-number {
    width: 100%;
}
.ivu-select-item{
    color:#fff;
}
.ivu-select-item:hover,.ivu-select-item-focus {
    background-color:#36445e;
}
.ivu-select-dropdown {
    background-color:#1c3150;
    width: auto;
    max-height: 600px !important;
    box-shadow: none;
}
.ivu-time-picker-cells-cell-selected, .ivu-time-picker-cells-cell-selected:hover,.ivu-time-picker-cells-cell:hover{
    background-color: #36445e;
    border-color: #1c3150;
}
.ivu-table-stripe .ivu-table-body tr.ivu-table-row-hover td, .ivu-table-stripe .ivu-table-fixed-body tr.ivu-table-row-hover td {
    background-color: #334f7a;
}
.ivu-modal {
    margin: 0;
    top: 0 !important;

    // top: 100px;
    .ivu-modal-header {
        border-bottom: 1px solid #515a6e;
        padding: 10px 16px;
        line-height: 1;
        // background-image: linear-gradient(266deg, $head-color 0%, $head-light-color 100%);
        background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
        .ivu-modal-header-inner {
            color: #ffffff;
        }
    }
    .ivu-input-word-count{
        background-color: #081128;
        color: #c5c8ce;
        border-color: #515a6e;
    }

    .ivu-input-group-append, .ivu-input-group-prepend{
        color:#fff;
        border-color: #515a6e;
        background-color: #172841;
    }
    .ivu-input,.ivu-input.default,.ivu-select-single, .ivu-select-selection, .ivu-select-placeholder,
    .ivu-select-dropdown,.ivu-menu-item,.ivu-input-number-input{
        background-image: linear-gradient(266deg, #081128 20%, #1c3150 100%);
        color: #c5c8ce;
        border-color: #515a6e;
    }
    .ivu-card-body,.ivu-card-bordered,.ivu-table-column{
        padding: 0px;
        background-image: linear-gradient(266deg, #081128 20%, #1c3150 100%);
        color: #c5c8ce;
        border-color: #515a6e;
    }
   
    .ivu-card-head p,.ivu-wrapper-radio,.ivu-spin-text{
        color: #fff;
    }
    .ivu-spin-fix {
        background-color: #334f7a;
    }
    .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active {
        background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
        background: none;
        border-color: #515a6e;
    }
    .ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab {
        background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
        background: none;
        border-color: #515a6e;
    }
    .ivu-transfer-list-header{
        background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
        background: none;
        color:#c5c8ce;
        border-color: #515a6e;
    }
    .ivu-transfer-list-body,.ivu-divider,.ivu-divider-horizontal,
    .ivu-list,.ivu-list-item{
        color: #fff;
        border-color:#515a6e ;
    }
    .ivu-dropdown-menu,.ivu-dropdown-item{
        color: #fff;
        background-color:#081128;
    }

    .ivu-transfer-list-content-item ,.ivu-cell-title,.ivu-cell-extra{
        color:#c5c8ce;
    }
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
       background-color: $hover-color;
    }
    .ivu-transfer-list-content-item:hover ,.ivu-menu-item:hover,
    .ivu-cell:hover{
        background-color: $hover-color;
    }
    .vue-treeselect div,.ivu-card-head,.ivu-alert,.ivu-alert-desc,
    .ivu-alert-with-desc ,.ivu-alert-message {
        color:rgb(253, 250, 250);
        border-color: #515a6e;
        background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
    }
    
    .ivu-modal-wrap *{
        color: #e8eaec;
    }

    .ivu-modal-content {
        border-radius: 0 0 6px 6px !important;

        .ivu-modal-close {
            top: 5px;
        }

        .ivu-modal-close,
        .ivu-icon-ios-close {
            color: #fff;
        }
    }

    .ivu-modal-body {
        color: #fff;
        border-color: #515a6e;
        background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
        .ivu-table td ,.ivu-table-stripe .ivu-table-body tr:nth-child(2n) td, 
        .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
            color: #fff;
            border-color: #515a6e;
            background-color: #162947;
           }
        .model-div {         
            padding-left: 8%;

            .starttime {
                height: 50px;
            }
        }
    }

    .ivu-modal-footer {
        background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
        display: flex;
        justify-content: center;
        border-color: #515a6e;
    }

    .ivu-modal-header-inner {
        text-align: center;
    }

    .ivu-icon-ios-close-empty {
        color: #83b2b9;
    }
}

.ivu-menu-item {
    font-size: 15px;
}

.buttonDiv {
    text-align: center;

    .ivu-btn-primary {
        margin-right: 20px;
        background: #2D8CF0;
        border-color: $head-light-color;
    }
    .ivu-btn-default {
        color:#ffffff;
        margin-right: 20px;
        background: #2D8CF0;
        border-color: $head-light-color;
    }
}

.ivu-form-item-content>span {
    word-wrap: break-word;
}

.ivu-form-item-label{
    color: #fff;
}

.table-search .ivu-form-item {
    margin-bottom: 0px;
    .ivu-input,
    .ivu-select-selection,
    .ivu-input-number-input {
        background: #1d3655;
        border: 0 none;
    }

}

.table-form {

    .ivu-input[disabled],
    fieldset[disabled] .ivu-input,
    .ivu-select-disabled .ivu-select-selection,
    .ivu-input-number-disabled .ivu-input-number-input,
    .ivu-input-number-disabled {
        background-image: linear-gradient(266deg, #081128 0%, #1c3150 100%);
        color: #fff;
        // background: #fff;
        border: 1px solid transparent;
        resize: none;

        &::-webkit-input-placeholder {
            color: transparent;
        }
    }

    .ivu-input[disabled]:hover,
    fieldset[disabled] .ivu-input:hover,
    .ivu-select-disabled .ivu-select-selection:hover {
        border: 1px solid transparent;
        resize: none;
    }

    .ivu-select-disabled .ivu-select-selection .ivu-select-arrow {
        display: none;
    }

    .configuration-form-add {
        margin-left: 5%;
        color: #169bd5;

    }

    .configuration-form-add:hover {
        cursor: pointer;
        color: #08b1fb;
    }
   
}

.cmd-right-div {
    display: flex;
    margin-bottom: 15px;

    >div {
        flex: 1;
        height: 40px;
        color: #fff;
        border-radius: 3px;
        position: relative;
        line-height: 40px;
        text-align: right;
        margin-right: 10px;
        padding-right: 10px;
        font-weight: bold;
        font-size: medium;

        &:after {
            font-family: sans-serif;
            font-size: 24px;
            font-style: normal;
            position: absolute;
            left: 10px;
            bottom: 0;
            transform: rotateZ(-3deg);
            text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.62);
        }
    }

    .windows {
        background: $head-color;

        &:after {
            content: "Windows";
        }
    }

    .unix {
        background: #0eb1cc;

        &:after {
            content: "Unix";
        }
    }
}

.ivu-tag-dot {
    border: 1px solid #1d3655 !important;
    background: #1d3655 !important;

    .ivu-tag-text {
        color: #fff;
    }
 
}