.videoWrap {
  position: relative;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  height: 100%;
}

.contentWrap {
  height: 100%;

  video {
    width: 100%;
    height: 100%;
  }
}

.videoSection {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.controls {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.5s;

  &.hide {
    transform: translateY(100%);
  }

  .time {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #fff;
    font-size: 10px;
    padding: 4px 20px;
  }

  .slider {
    width: 100%;
    padding: 0 20px;

    :global {
      .n-slider {
        --n-handle-size: 13px !important;
        --n-fill-color: var(--van-primary-color) !important;
        --n-fill-color-hover: var(--van-primary-color) !important;
      }

      .van-loading {
        width: 100%;
        height: 100%;
      }
    }
  }

  .actions {
    display: flex;
    width: 100%;
    color: #fff;
    font-size: 12px;
    padding: 0 20px 5px 14px;
    align-items: center;

    .actionWrap {
      display: flex;
    }

    .actionBtn {
      display: flex;
      width: 24px;
      height: 24px;
      // padding: 4px 0;
      background: transparent;
      margin: 4px 16px 4px 0;
    }

    .actionBtn>img {
      width: 100%;
      height: 100%;
    }

    :global {
      .van-loading__circular {
        width: 100%;
        height: 100%;
      }
    }

    .playIcon {
      display: none;
    }

    .btnPlay img:nth-child(2) {
      display: block;
    }

    .btnPause img:nth-child(3) {
      display: block;
    }

    .btnPlay,
    .btnPause {
      :global {
        .van-loading {
          display: none;
        }
      }
    }

    .loopBtn {
      :global {
        .loop {
          display: block;
        }

        .loopActive {
          display: none;
        }
      }
    }

    .loopBtn.active {
      :global {
        .loop {
          display: none;
        }

        .loopActive {
          display: block;
        }
      }
    }

  }
}


.sliderPopup {
  position: absolute;
  z-index: 9999;
  left: 82px;
  bottom: 46px;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 190px;
  width: 45px;
  padding: 10px 0 15px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAGaCAMAAAC199R3AAAAY1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmaHTeAAAAIXRSTlOzABemsKsIoZB3G15aUBILlZqHgHs2MnRsZSwOVT9IJiO5jme8AAABrUlEQVR42u3VWXIaMRhF4Xtp9QhNgxnM4Gn/q0xsF+lgYqhg/W/nW8Ap1S2pJF+o5pM7zCtfOI8Pz7um1J3KZvc8fBt/bUv9UNm+/jPerZTFqruMPyVlkp6+xKuVMlpVf8ePjbJqjmO8apRZU/2Jr5Xd+hTvFaD/jE9KBSgnH/FWIdr3eJcUInWW9wqyt1woSGEdFOagmcLMtFaYtRYKs1ChMIWSwiQBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABESAqTVChMoUZhGrUK06pXmF5vCvMmLxVkaXmmIDPLx1IhyqNl7xVi7/f4UCtAPXzEvVGAjT/jniq7qU9xPyqzR49xP+Zvj3FP825yHve2Vib11l/jrqalMihnlcf4aOgX+qFFP3gkn+ledg/LujhJuiEVJ/XyYffS+Yx8zaG+cdCJr5Gvmj/oirbyPfHRLOkb6cm+N37rjhZb3xm/Pc2i8w/j3z/fdeVMcW+Liy/MeeKX05QbZ4pfTrPsnDnuTaFPq8HZ4563SVLR2wHx3/nN88H/QQ70CynDD0im9E3OAAAAAElFTkSuQmCC') no-repeat top center;
  background-size: contain;

  .iconAdd,
  .iconCut {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAABMlBMVEUAAAAkqP8ckv8zu/8op/81v/8ajv8elP82v/8rrv8elP4npv8yuf8elP8elf81v/8sr/8elf8vuv8dlv8srv8jn/8zu/8wtf82wP8oqP8npf8Zjf8mpP8Zjf8hmv8bj/40vP8wtP81wP8Zjf41vv8sr/8jnf8aj/0zuf8dlf81vv8rq/4kof4vsf8imP8aj/////8usv8qrP4jn/4inP4dlP4yuf8el/4srv8pqv4gmf4bkf40vf8ssP4wtP8lov4koP4xt/8npv4mpP4zu/8hmv4ajv4ckv4wtv4op/58x/5+y/6Cxv5/zf57xP6Dx/6BxP7u+P/t9/6a1f6Bz/56w/5iuP5zwP5Bpv4yoP6x3/6w3f6d2/6Wzv5tyf5pwv5nvv5svP5Rsv5Pr/5Mq/43p/49/opPAAAAMHRSTlMACoRW+Pf38dTUurGDWEhHR0cjI/b28fHr6+vr19fQ0Lq6sbGoqKiolZWGhoZSUlKk1yinAAAB+UlEQVQ4y43S6VbaQACG4S9E9h3c933fatISI4sWYxUjAVQQ99r2/m+hGQfGMJNEHw4M+XhPTn4AjpQNLM1MhUJTM0uBrAQ/qbXQmUNoLQUve3Nngrk9uMnHjlzF8hAkw0cewklwAr98BDBg47uvjYH72oNx1/WuHfdOFgqFu3qj8bfgiT13Pmy3DbNhtr3jcB5UTNe7DdM0f6s69dRqPemcGG13dV3t2G2737b3bW2+3gUxaxh/LHJfo+eWxLcGZxa2lKqqHcsyuyph2G8aq71rdpL/yar9tW5ZbypTJ3Fd5a0C0oiiKG9W51hhaKzwRiRkFeJfVRFiQRbbx4IaiWvivo14RUBjcY9julKlKtXXGvVA4ofexWuV/T6NyWrf9b6raxZMYuhnX8s9brFgyBE33eOmI5646PN6DBZMIHpIXJCPl0vqnjT3vYuXj9+jiB8KLkl8Je5xbB0Irt5jcd9C5utxBtKwph1oBDtprPH7sASsaFpJs5XYSeMSv68AyJR4NyS+EeYMbNFvHBrzaxTEDj8/k/iZX3fwboGby4/N5mOZGxdA5cbKnxrLoUcunxMn596nDCZx8okEHNZ/+FrHgIRfmwBHHj31MCpDkJsvntqvov0eOOdzcCNHioKIDC/p5aCzDC6n4UdKby5GxoPB8cjiZlrCoP+meld2tFTGwgAAAABJRU5ErkJggg==') no-repeat center;
    background-size: contain;
    flex-shrink: 0;

    &.disabled {
      opacity: 0.7;
    }
  }

  .iconCut {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAABGlBMVEUAAAAkqP8zu/8op/8ajv8aj/8yuP8elP4npv4dlP8elP8yuP8elP81v/8sr/8jnf8Zjf81v/81v/8jn/8zu/8wtf8gl/82wP8oqP8npf83wP8qqv8mpP8Zjf81vf8tsv8hmv8bj/41wP8qqv8lof8Zjf41vv8sr/8jnf8aj/0zuf8dlf8bjf00vP8xt/8zvf8stv8dmf8dkv8srv8trf8qq/7///8tsP4jn/4us/8srv8gmf4lov4yuf8dlf4wt/8inf4hm/4ck/4bkf4wtP8koP4mpf4fl/4op/40vP8ajv4pqf4zuv98x/5+y/6Bxf40vv80u/6Dx/6a1f5owP5PsP4/p/5zwP4oo/4yoP7u+P7u9/5svP5it/4TfkURAAAANXRSTlMACoT49+66uoaDWFJSR0dHR/j29vHx8evr69fX19fQ0NDQsbGxsaioqKiVlYZYWCMjIyP29l0yDtwAAAGnSURBVDjLjc6HVsIwGAXg27I37r33nkilWloXCGK17OH7v4YpSKSQtPnS5v7n5J6cYIyUPt1bC/j9gbW907QEN+kjf2mE/ygNnvhWacJWHCzXoWem0DUmRAPPHIEoxkSeXETgcPJEaGSx88Rxr6ZpaqOtcUVARTWt0DBNs06yoBGTSd99NV8gXeKnwDV/hYGQqrZNoqerfCH0xVXVaNr3GqqbOGybhlG3LKunG642QaQMXW9altkmaRhk42UKwKGu6xXLquteDgFpRlGUutV8VbzMSEj1h0ZL8ZZC+FVYGLsPwnaxSudWrcJQa9HCKpbehqp3TFVaWIKPzl12uUsLPviKQx12uUMLPiwWi+XBzHsGOR9YxEqZqn0y1MrUCnYy5Uyfd+4gnBEWRlK8nIR0kxN0KwEHuVzWnrNeeQAgmRWUBLEh1t2ALXYvJIa+oEg3iIHLuRdPc5f4c/6Sz+fd/3NQct6DjBHHj66O4SC7dWWMOZv94Jg9w4SL4Ps3WeRzZvACLLH1d8Iu/Od6DDyJ/emvEdP7CbiREvL28sLU1MLytpyQ4PQLtc9vYI2HRk0AAAAASUVORK5CYII=') no-repeat center;
    background-size: contain;
  }

  .sliderPoint {
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    height: 20px;
    color: #198CFE;
    min-width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      font-size: 11px;
    }
  }

  :global {
    .van-slider {
      margin: 10px 0;
    }

    .van-slider__bar {
      min-height: 5%;
      max-height: 95%;
    }
  }
}