/*!****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./styles/base_waveform.style.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************/
.waveform ::part(region-handle-right) {
  border-right-width: 3px !important;
  border-right-color: #ff9533 !important;
  border-radius: 15px !important;
  z-index: 10;
}

.waveform ::part(region-handle-left) {
  border-left-width: 3px !important;
  border-left-color: #ff9533 !important;
  border-radius: 15px !important;
  z-index: 10;
}

.waveform ::part(region-handle-right)::after {
  content: "";
  width: 28px;
  height: 28px;
  background-color: #ff9533;
  border-radius: 50%;
  position: absolute;
  right: -30px;
  top: 80%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 12 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.83914 5.32149C8.4194 5.90175 8.4194 6.84833 7.83914 7.42859L4.57914 10.6886C4.38388 10.8839 4.06729 10.8839 3.87203 10.6886C3.67677 10.4933 3.67677 10.1767 3.87203 9.98149L7.13203 6.72149C7.32177 6.53175 7.32177 6.21833 7.13203 6.02859L3.87203 2.76859C3.67677 2.57333 3.67677 2.25675 3.87203 2.06149C4.06729 1.86622 4.38388 1.86622 4.57914 2.06149L7.83914 5.32149Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
}

.waveform ::part(region-handle-left)::after {
  content: "";
  width: 28px;
  height: 28px;
  background-color: #ff9533;
  border-radius: 50%;
  position: absolute;
  left: -1.5px !important;
  top: 20%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 12 13' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.16086 7.67851C3.5806 7.09825 3.5806 6.15167 4.16086 5.57141L7.42086 2.31141C7.61612 2.11615 7.93271 2.11615 8.12797 2.31141C8.32323 2.50667 8.32323 2.82326 8.12797 3.01851L4.86797 6.27851C4.67823 6.46825 4.67823 6.78167 4.86797 6.97141L8.12797 10.2314C8.32323 10.4267 8.32323 10.7432 8.12797 10.9385C7.93271 11.1338 7.61612 11.1338 7.42086 10.9385L4.16086 7.67851Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
}
.waveform ::part(cursor):after,
.waveform-original ::part(cursor):after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 100;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid red;
}
.waveform-music ::part(canvases) {
  min-height: 290px;
  z-index: 5;
}
.waveform-music ::part(wrapper) {
  z-index: 5;
}

.waveform-vocal ::part(canvases) {
  min-height: 0px;
  top: -1000 !important;
  z-index: -1000 !important;
}
.waveform-music ::part(cursor) {
  background-color: red;
  height: 100%;
  position: absolute !important;
  z-index: 5 !important;
}
.waveform ::part(cursor):after,
.waveform-music ::part(cursor):after {
  content: var(--cursor-time);
  position: absolute;
  top: 0px;
  left: var(--cursor-left);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background: #555;
  color: #fff;
  padding: 2px 6px;
  height: 15px;
  width: 55px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
}
.waveform-vocal ::part(cursor) {
  height: 0%;
}

.waveform-vocal ::part(hover) {
  display: none;
}

.waveform-original ::part(timeline-notch-tick),
.waveform ::part(timeline-notch-tick) {
  top: 0px !important;
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./components/Player/AudioPlayerV2/styles/waveform.style.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************/
@media (min-width: 0px) {
  .waveform ::part(region) {
    height: 150px;
  }
}

@media (min-width: 768px) {
  .waveform ::part(region) {
    height: 280px;
  }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./components/Player/VideoPlayer/styles/waveform.style.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************/
@media (min-width: 0px) {
  .waveform ::part(region) {
    height: 150px;
  }
}

@media (min-width: 768px) {
  .waveform ::part(region) {
    height: 280px;
  }
}