@import  'app/style/default.scss';
.matket-trade{
  height: 100%;
  display: flex;
  color: #C2C4CD;
  font-size: 14px;
  .aside{
    li{
      &:nth-of-type(2){   
        height: 70px;    
        i{          
          // width: 60px;
          height: 20px;
          text-align: center;
          font-size: 12px;      
          line-height: 20px;
          margin-left: 10px;
        }
        .ratio{
          margin-top: 4px;
          &>span{
            width: 60px;
          }
          &>span:nth-child(1){
            float: left;
          }
          &>span:nth-child(2){
            float: right;
          }
        }
        p{
          color: #fff;
          margin-left: 10px;
        }
        // .fright{
        //   background: #2FC77B;
        // }
        // .fleft{
        //   background-color: $text-red;
        // }
      }
      &:nth-of-type(5){
        input{
          margin-right: 0;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        i{
          background: #3C4350;
          height: 24px;
          float: right;
          width: 34px;
          line-height: 24px;
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;
          text-align: center;
        }
      }
      &:nth-of-type(7){
        p{
          width: 100%;
          margin-left: 9px;
          line-height: 18px;
        }
        .fright{
          font-size: 18px;
          color: $text-red;
        }

      }
      &:nth-of-type(8){
        margin-top: 0;
        padding-left: 9px;
        box-sizing: border-box;
        i{
          line-height: 36px;
        }
      }
      div{
        &.paydate{
          p{
            font-size: 12px;
            color: #787A7D ;
            margin-top: 8px;
            span{
              color: $text-red;
              display: inline-block;
              // max-width: 56px;
              vertical-align: middle;
              // text-overflow: ellipsis;
              // overflow: hidden;
            }
          }         
        }
        &.rate{
          display: flex;
          span{
            background: #3C4350;
            float: left;
            width: 24px;
            height: 24px;
            text-align: center;
            &:nth-of-type(1){
              border-top-left-radius: 2px;
              border-bottom-left-radius: 2px;
            }
            &:nth-of-type(2){
              border-top-right-radius: 2px;
              border-bottom-right-radius: 2px;
            }
          }
          input{
            width: 103px;
            margin: 0 1px;
            border-radius: 0;
          }
        }       
      }
    }
  }
  .ant-slider-rail{
    background: #313743;
    border-radius: 21px;
  }

  .ant-slider-handle{
    border-color: #4A90E2 #15171E #15171E #15171E!important;
    border-radius: 0;
    border-width: 4px;
    height: 4px;
    width: 4px;
    position: relative;
    top: -4px;
    &:hover{
      background:none;
    }
  }
  .ant-slider-mark-text-active,.ant-slider-mark-text{
      color: #C2C4CD;
    }
  .ant-slider-track{
    background: #4A90E2;
  }
  .ant-slider-handle:focus{
    box-shadow: none;
  }
  .ant-slider:hover{
    .ant-slider-rail,.ant-slider-handle:not(.ant-tooltip-open){
      background-color: #313743;
    } 
  }
  // .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open){
  //   border-color: #313743!important;
  // }

  .ant-slider-dot{
      background: none;
      border: 0;
    }
}