.space-auth {
  .dark-iview-select{
    margin:0px 10px;
    position: relative;
   
    width: 120px;
     .ivu-select-selection{
      outline: none !important;
      border-radius: 5px !important;
      background-color: #333237 !important;
      border:#4a4a4d 1px solid !important ;
      &:active,&:hover,&:focus{
        outline: none !important;
        border:#909096 1px solid !important ;
       }
      
     }
    
  }
  position: absolute;
  background-color: #2b2a2f;
  width: 30%;
  overflow: hidden;
  //top:120px;
  //right: 0%;
  z-index: 22;
  color: white;
  padding-left: 20px;

  .title {
    color: #bab8c0;
    font-size: 12px;
    font-weight: 600;
    padding: 13px 0px;
    border-bottom: 1px solid #434247;
  }

  .close-icon {
    position: absolute;
    right: 2%;
    top: 9px;
    font-size: 24px;
    cursor: pointer;

    &:hover {
      color: #1cc0f3;
    }
  }
  .title-btn-group {
    position: absolute;
    display: inline-block;
    right: 50px;
    top: 8px;
    .assign-btn {
      cursor: pointer;
      position: relative;
      margin: 0px 5px;
      line-height: 20px;
      background-color: #1cc0f3;
      color: #f5f5f5;
      text-align: center;
      display: inline-block;
      font-size: 10px;
      padding: 3px 16px;
      font-weight: 700;
      border-radius: 3px;
      &:hover {
        color: #f5f5f5;
        transition: 0.2s;
        background-color: darken(#1cc0f3, 10%);
      }
    }
  }
  .scroll-sprite {
    overflow: auto;
    .controlarea-title{
      font-size: 10px;
      font-weight: 400;
      color: #797979;
      margin: 25px 6px 30px 6px;   
    }
    .small-title {
      font-size: 10px;
      font-weight: 400;
      color: #797979;
      margin: 25px 6px 15px 6px;
    }

    .chart-view {
      animation: 0.5s fadeIn;
      margin-left: -15%;
      border-bottom: 1px solid #434247;
      .chart-title {
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        color: #777777;

        .chart-totalnum {
          color: #1cc0f3;
          font-weight: 700;
        }
      }

      .chart-label {
        margin-bottom: 0px;
        margin-left: -5%;
      }

      .chart-item {
        margin-bottom: 26px;

        .item-ball {
          display: inline-block;
          height: 10px;
          margin-right: 5px;
          width: 10px;
          border-radius: 50%;
          background-color: #fff;
        }

        .item-text {
          color: #777777;
          font-weight: 700;
          font-size: 10px;
        }

        .item-num {
          font-size: 20px;
          font-weight: 700;
          letter-spacing: 2px;
          color: #fff;
          margin-left: 15px;
          .small-text {
            font-size: 12px;
          }
        }
      }
    }
    .scroll-infoWrap {
      padding-top:1px;
      top: 0px;
      position: sticky;
      background-color: #2b2a2f;
      animation: 0.7s fadeIn;
      z-index: 2;
    }
    .scroll-view {
      position: relative;

      margin-left: -20px;
      padding-left: 40px;
      border-bottom: 1px solid #434247;

      .chart-item {
        margin-bottom: 26px;

        .item-ball {
          display: inline-block;
          height: 10px;
          margin-right: 5px;
          width: 10px;
          border-radius: 50%;
          background-color: #fff;
        }

        .item-text {
          color: #777777;
          font-weight: 700;
          font-size: 10px;
        }

        .item-num {
          font-size: 20px;
          font-weight: 600;
          letter-spacing: 1px;
          color: #fff;
          margin-left: 15px;
          .small-text {
            font-size: 12px;
          }
        }
      }
    }
    .option-item{
      margin-left:20px;
      height:48px;
      .option-text{
        color: #797979;
        font-size: 13px;
        font-weight: 400;
        line-height: 24px;
        .strong-text{
          font-weight: 900 !important;
          color:  #c0c0c0;
        }
      }
      .input-num{
        text-align: center;
         color: #c0c0c0;
         font-weight: 700;
         font-size: 14px;
         outline: none;
         background-color: #333237;
         width: 160px;
         border-radius: 8px;
         padding:4px 3px;
         margin:0 5px;
         top:-4px;
         position: relative;
         border:#4a4a4d 1px solid !important ;
         &:focus{
          border:#909096 1px solid !important ;
         }
          
      }
      .assign-btn{
        
        cursor: pointer;
        position: absolute;
        line-height: 20px;
       
        right:40px;
        background-color: #515151;
        color: #c0c0c0;
        text-align: center;
        display: inline-block;
        font-size: 10px;
        padding:2px 16px;
        font-weight: 700;
        border-radius: 5px;
        &:hover {
          color: #f5f5f5;
          transition: 0.2s;
          background-color: #1cc0f3
        }
       
      }  
    }
    
  }
  @keyframes spaceAuthSlideIn {
    0% {
      right: -30%;
    }

    100% {
      right: 0%;
    }
  }
  @keyframes spaceAuthSlideOut {
    0% {
      right: 0%;
    }

    100% {
      right: -30%;
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
}
.closeShow {
  animation: spaceAuthSlideOut 0.7s !important;
  right: 30%;
}
