$plain-font: "Avenir", Helvetica, Arial, sans-serif;
$head-color:#3a91b3;
$head-light-color:#4bb2da;
$head-height:64px;

$basic-padding:20px;
$basic-btn-color:#428BCA;
$stripe-color:#EDF5F8;
$hover-color:#bde5f5;

$left-color:#fff;

#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;
      }
    }
  }
  /************主框架页面样式***************/
  .main {
    .left-sider{
      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: #fff;
          .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;
        }
        .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: #EBF0F4;
      padding: 18px;
      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;
      }
      
    }
    /*****************页面框架样式*******************/
      .oo-page{
        display: flex;
        padding: 10px;
        height:calc(100% - 50px);
        background: #fff;
        .i-table{
          width:100% !important;
          .ivu-table-header,.ivu-table-fixed-header  {
            th {
              background: $head-color;
              color:#fff;
            }
          }
        }
        .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 #EBF0F4;
      padding: 10px 20px;
      font-size: 16px;
      font-weight: bold;
      position: relative;
      background: #fff;
      &:after{
        content: '';
        width: 8px;
        height: 30px;
        // background: #00BAFF;
        display: block;
        position: absolute;
        left: 20px;
        top: 15px;
      }
    }
  }
  /*********左侧菜单页面样式***********/
  .ivu-menu-item{
    display: flex;
    align-items: center;
    .ivu-icon-ios-arrow-forward{
      position: absolute;
      right: 8px;
    }
  }
  .ivu-menu{
    font-size:16px;
      .ivu-menu-submenu.ivu-menu-opened{
        .ivu-menu{
              background: #EFF4F7;
        } 
      }
      .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-header {
      th {
          background: $head-color;
          color: #fff;
          border-right: 1px solid;
          font-size: 14px;
          border-color: #DEEBF1;
      }
  }
  .ivu-table-tbody {
      td {
          border-right: 1px solid;
          border-color: #DEEBF1;
          .td-radio-input {
              width: 16px;
              height: 16px;
          }
      }
      tr:nth-child(2n) {
          td {
              background: $stripe-color;
          }
      }
      tr:hover {
          td {
              background: $hover-color;
          }
      }
  }
  
  .i-table-top-btns {
      margin: 10px 0;
      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-date-picker,
.ivu-input-number {
  width: 100%;
}

.ivu-select-dropdown {
  width: auto;
  max-height: 600px !important;
  box-shadow: none;
}

.ivu-modal {
  margin: 0;
  top: 0!important;
  // top: 100px;
  .ivu-modal-header {
      border-bottom: 1px solid #e9eaec;
      padding: 10px 16px;
      line-height: 1;
      background-image: linear-gradient(266deg, $head-color 0%, $head-light-color 100%);
      .ivu-modal-header-inner {
          color: #ffffff;
      }
  }
  .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 {
      .model-div {
          padding-left: 8%;
          .starttime {
              height: 50px;
          }
      }
  }
  .ivu-modal-footer {
      display: flex;
      justify-content: center;
  }
  .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: $head-color;
      border-color:$head-light-color;
  }
}

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


.table-search .ivu-form-item{
  margin-bottom: 0px
}
.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{
      color: #515a6e;
      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: 30px;
      font-style: normal;
      position: absolute;
      left: 10px;
      bottom: 0;
      transform: rotateZ(-3deg);
      transform: rotateZ(-3deg);
      text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.62);
    }
  }
  .windows{
    background: #0eb1cc;
    &:after{
      content: "Windows";
    }
  }
  .unix{
    background: #42a529;
    &:after{
      content: "Unix";
    }
  }
}