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

  :global {
    .plyr--video {
      width: 100%;
      height: 100%;
    }

    .plyr__time {
      display: block !important;
    }

    .plyr__video-wrapper {
      pointer-events: none;
    }
  }
}

:global(.bottomFixed).controls {
  width: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
  padding: 0 !important;
  flex-direction: column;
  transition: all 0.5s;

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

    :global {
      .plyr__time+.plyr__time:before {
        content: '';
      }
    }
  }

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

    :global {
      .van-slider__button {
        background: var(--van-primary);
      }

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

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

    .actionWrap {
      display: flex;
    }

    .actionBtn {
      display: flex;
      width: 30px;
      height: 30px;
      padding: 4px 0;
      background: transparent;
    }

    .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;
        }
      }
    }


    .speedBtn {
      position: relative;
    }

    .popoverGroup {
      position: absolute;
      z-index: 99;
      left: -22px;
      background-color: #fff;
      border-radius: 8px;
      bottom: 38px;
      width: 80px;
      color: #333;
      padding: 4px 0;
      display: none;

      &.active {
        display: block;
      }
    }
  }
}

.sliderPopup {
  position: absolute;
  z-index: 9999;
  left: 74px;
  bottom: 46px;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 165px;
  width: 45px;
  padding: 10px 0 15px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAAGaCAMAAAC46aQwAAAAOVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC8dlA9AAAAE3RSTlNaAAxUVwdPRSc7MzYsEEoXGgshjXaABwAAAZBJREFUeNrt1GtO40AQReF77X46tvPY/2IHhiCDA0Ez7pb4cb4FHLVaVSU/isM/i360S5+nnIL+Q0h5On+fXuqoQ8a6fJm+VjVQr4/pEtREKPt0VTP1UzpmNZTjh3RWU3lLn9TY6T1d1Fx5S8eg5kL8m57UwfSaHoI6CIPlSV1MlpO6SNaiThbN6mRWVSdVWZ1kJXWSFNRJEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADg9wnqJGhVJ6uyOsmq6qSqqJOiqzq5yqu6WC3P6mK2HEd1MEbLfZ49+zXtpOaS39IXNXe5p13UWPF72ic1dfKW9ql1eUu7tP2NLf3inNREOnuXflFGHTaWrSdvYsk6JJfoXXoTb1PNabwL+kEY71Ku023r7tOPYv5pFJ6Rn5qfj8KRtC+jvjGefSztYdWX1sFH0k82tUY3SPsWtDfZTdJekj4JN7dKO1Z9kBY3ST+er3x10/R2vqrdOO04BUnp4nbpTVwug30g3cwf1jMLKix6VfsAAAAASUVORK5CYII=') no-repeat top center;
  background-size: contain;

  .iconAdd,
  .iconCut {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+6YCf5bqm5Yqg5aSH5Lu9PC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iMCUiIHkxPSI3NS41MTIxOTI3JSIgeDI9IjEwMCUiIHkyPSI1MCUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGODA1NyIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZBMjg0IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxjaXJjbGUgaWQ9InBhdGgtMiIgY3g9IjExIiBjeT0iMTEiIHI9IjExIj48L2NpcmNsZT4KICAgICAgICA8ZmlsdGVyIHg9Ii0zLjYlIiB5PSItOC4yJSIgd2lkdGg9IjEwNy4zJSIgaGVpZ2h0PSIxMTAuOSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0zIj4KICAgICAgICAgICAgPGZlTW9ycGhvbG9neSByYWRpdXM9IjAuMSIgb3BlcmF0b3I9ImRpbGF0ZSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd1NwcmVhZE91dGVyMSI+PC9mZU1vcnBob2xvZ3k+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9Ii0xIiBpbj0ic2hhZG93U3ByZWFkT3V0ZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuODE0Mjk1NjcyICAgMCAwIDAgMCAwLjQ0NjM1MDI0ICAgMCAwIDAgMCAwLjMyNjg0NjU5NSAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSLor77ku7bliqDmipXlsY8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLor77ku7bmkq3mlL7vvIjlgI3pgJ/lpIfku70iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzAuMDAwMDAwLCAtMTI2LjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0i6YCf5bqm5Yqg5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxODIuMDAwMDAwLCAxMzcuMDAwMDAwKSBzY2FsZSgtMSwgLTEpIHJvdGF0ZSgtMzYwLjAwMDAwMCkgdHJhbnNsYXRlKC0xODIuMDAwMDAwLCAtMTM3LjAwMDAwMCkgdHJhbnNsYXRlKDE3MS4wMDAwMDAsIDEyNi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLmpK3lnIblvaLlpIfku70tMyI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTMpIiB4bGluazpocmVmPSIjcGF0aC0yIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMiI+PC91c2U+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuMzkwNzUzOCwxOC42OTY4MzA3IEMxOC41MTE5OTQ2LDE4LjY5NjgzMDcgMTguNzUzNzQxMSwxNy42NzQxNzUyIDE4Ljc1Mzc0MTEsMTYuMzEzMDI1NiBDMTguNzUzNzQxMSwxNC45NTE4NzYgMTguNTMyNDY3NSwxMy42OTY4MzA3IDE3LjQxMTIyNjYsMTMuNjk2ODMwNyBDMTYuMjg5OTg1OCwxMy42OTY4MzA3IDE2Ljk2OTY2ODYsMTQuOTIxNDk3NiAxNi45Njk2Njg2LDE2LjI4MjY0NzIgQzE2Ljk2OTY2ODYsMTcuNjQzNzk2NyAxNi4yNjk1MTI5LDE4LjY5NjgzMDcgMTcuMzkwNzUzOCwxOC42OTY4MzA3IFoiIGlkPSLmpK3lnIblvaIiIGZpbGw9IiNGRkZGRkYiIG9wYWNpdHk9IjAuNDQzNjMwNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTcuNzUzNzQxLCAxNi4xOTY4MzEpIHJvdGF0ZSgzOS4wMDAwMDApIHRyYW5zbGF0ZSgtMTcuNzUzNzQxLCAtMTYuMTk2ODMxKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMSw1IEMxMS42NjI3NDE3LDUgMTIuMiw1LjQxMzI3NTYyIDEyLjIsNS45MjMwNzY5MiBMMTIuMTk5LDkuOCBMMTYuMDc2OTIzMSw5LjggQzE2LjU4NjcyNDQsOS44IDE3LDEwLjMzNzI1ODMgMTcsMTEgQzE3LDExLjY2Mjc0MTcgMTYuNTg2NzI0NCwxMi4yIDE2LjA3NjkyMzEsMTIuMiBMMTIuMTk5LDEyLjE5OSBMMTIuMiwxNi4wNzY5MjMxIEMxMi4yLDE2LjU4NjcyNDQgMTEuNjYyNzQxNywxNyAxMSwxNyBDMTAuMzM3MjU4MywxNyA5LjgsMTYuNTg2NzI0NCA5LjgsMTYuMDc2OTIzMSBMOS44LDEyLjE5OSBMNS45MjMwNzY5MiwxMi4yIEM1LjQxMzI3NTYyLDEyLjIgNSwxMS42NjI3NDE3IDUsMTEgQzUsMTAuMzM3MjU4MyA1LjQxMzI3NTYyLDkuOCA1LjkyMzA3NjkyLDkuOCBMOS44LDkuOCBMOS44LDUuOTIzMDc2OTIgQzkuOCw1LjQxMzI3NTYyIDEwLjMzNzI1ODMsNSAxMSw1IFoiIGlkPSLlvaLnirbnu5PlkIgiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') no-repeat center;
    background-size: contain;
    flex-shrink: 0;

    &.disabled {
      opacity: 0.7;
    }
  }

  .iconCut {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8dGl0bGU+6YCf5bqm5YeP5aSH5Lu9PC90aXRsZT4KICAgIDxkZWZzPgogICAgICAgIDxsaW5lYXJHcmFkaWVudCB4MT0iMCUiIHkxPSI3NS41MTIxOTI3JSIgeDI9IjEwMCUiIHkyPSI1MCUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZGODA1NyIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkZBMjg0IiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgICAgIDxjaXJjbGUgaWQ9InBhdGgtMiIgY3g9IjExIiBjeT0iMTEiIHI9IjExIj48L2NpcmNsZT4KICAgICAgICA8ZmlsdGVyIHg9Ii0zLjYlIiB5PSItOC4yJSIgd2lkdGg9IjEwNy4zJSIgaGVpZ2h0PSIxMTAuOSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0zIj4KICAgICAgICAgICAgPGZlTW9ycGhvbG9neSByYWRpdXM9IjAuMSIgb3BlcmF0b3I9ImRpbGF0ZSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd1NwcmVhZE91dGVyMSI+PC9mZU1vcnBob2xvZ3k+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9Ii0xIiBpbj0ic2hhZG93U3ByZWFkT3V0ZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSI+PC9mZU9mZnNldD4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAuODE0Mjk1NjcyICAgMCAwIDAgMCAwLjQ0NjM1MDI0ICAgMCAwIDAgMCAwLjMyNjg0NjU5NSAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgIDwvZGVmcz4KICAgIDxnIGlkPSLor77ku7bliqDmipXlsY8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLor77ku7bmkq3mlL7vvIjlgI3pgJ/lpIfku70iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzAuMDAwMDAwLCAtMjgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0i6YCf5bqm5YeP5aSH5Lu9IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxODIuMDAwMDAwLCAyOTMuMDAwMDAwKSBzY2FsZSgtMSwgLTEpIHJvdGF0ZSgtNTQwLjAwMDAwMCkgdHJhbnNsYXRlKC0xODIuMDAwMDAwLCAtMjkzLjAwMDAwMCkgdHJhbnNsYXRlKDE3MS4wMDAwMDAsIDI4Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSLmpK3lnIblvaIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjAwMDAwMCwgMTEuMDAwMDAwKSBzY2FsZSgxLCAtMSkgdHJhbnNsYXRlKC0xMS4wMDAwMDAsIC0xMS4wMDAwMDApICI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTMpIiB4bGluazpocmVmPSIjcGF0aC0yIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMiI+PC91c2U+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy44ODMyNzE1NCw3LjI3OTM1OTggQzUuMDA0NTEyMzcsNy4yNzkzNTk4IDUuMjQ2MjU4ODgsNi4yNTY3MDQzIDUuMjQ2MjU4ODgsNC44OTU1NTQ3MyBDNS4yNDYyNTg4OCwzLjUzNDQwNTE1IDUuMDI0OTg1MjQsMi4yNzkzNTk4IDMuOTAzNzQ0NCwyLjI3OTM1OTggQzIuNzgyNTAzNTcsMi4yNzkzNTk4IDMuNDYyMTg2MzMsMy41MDQwMjY3MiAzLjQ2MjE4NjMzLDQuODY1MTc2MjkgQzMuNDYyMTg2MzMsNi4yMjYzMjU4NiAyLjc2MjAzMDcsNy4yNzkzNTk4IDMuODgzMjcxNTQsNy4yNzkzNTk4IFoiIGlkPSLmpK3lnIblvaLlpIfku70tNCIgZmlsbD0iI0ZGRkZGRiIgb3BhY2l0eT0iMC40NDM2MzA0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjI0NjI1OSwgNC43NzkzNjApIHNjYWxlKC0xLCAtMSkgcm90YXRlKDM5LjAwMDAwMCkgdHJhbnNsYXRlKC00LjI0NjI1OSwgLTQuNzc5MzYwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIGZpbGw9IiNGRkZGRkYiIHg9IjYiIHk9IjEwIiB3aWR0aD0iMTEiIGhlaWdodD0iMiIgcng9IjEiPjwvcmVjdD4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+') no-repeat center;
    background-size: contain;
  }

  .sliderPoint {
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px rgba(102, 102, 102, 0.77);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #FF8057;
    min-width: 35px;
    text-align: center;
    vertical-align: text-bottom;

    span {
      font-size: 12px;
    }
  }

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