.ya-tools-waveform {
  border: 1px solid #d1d7dc;
  border-radius: 8px;
  padding: 0.75rem;
  background: #fff;
  font-family:
    'Segoe UI',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}

.ya-tools-waveform__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.ya-tools-waveform__title {
  font-weight: 600;
  margin-right: 0.5rem;
}

.ya-tools-waveform__time {
  font-variant-numeric: tabular-nums;
}
.ya-tools-waveform__time--duration,
.ya-tools-waveform__time--current {
  font-size: 1rem;
}

.ya-tools-waveform__canvas {
  min-height: 80px;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}

.ya-tools-waveform__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
  pointer-events: none;
  z-index: 10;
}

.ya-tools-waveform--loading .ya-tools-waveform__loading {
  opacity: 1;
  visibility: visible;
}

.ya-tools-waveform__loading-icon {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(34, 43, 53, 0.2);
  border-top-color: var(--ya-tools-waveform-progress-color, #086178);
  border-radius: 50%;
  animation: ya-tools-waveform-spinner 0.8s linear infinite;
}

.ya-tools-waveform__canvas canvas {
  width: 100% !important;
  height: 80px !important;
}

.ya-tools-waveform__fallback {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
}

.ya-tools-waveform--interactive .ya-tools-waveform__fallback {
  display: none;
}

.ya-tools-waveform__caption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.ya-tools-waveform-preprocess {
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ya-tools-waveform-preprocess-status {
  font-size: 0.85rem;
}

.ya-tools-waveform-preprocess-status.success {
  color: #21759b;
}

.ya-tools-waveform-preprocess-status.error {
  color: #c00;
}

.ya-tools-waveform__timeline {
  margin-top: 0.5rem;
  width: 100%;
  min-height: 32px;
  position: relative;
  font-size: 0.75rem;
  pointer-events: none;
}

.ya-tools-waveform__timeline-notch {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
}

.ya-tools-waveform__timeline-line {
  width: 1px;
  height: 10px;
  background: rgba(31, 61, 75, 0.35);
  margin-bottom: 2px;
}

.ya-tools-waveform__timeline-notch-label {
  font-size: 0.65rem;
  font-family: inherit;
  color: inherit;
}
.ya-tools-waveform__timeline-notch:last-child {
  display: none;
}
.ya-tools-waveform__timeline-subnotch {
  position: absolute;
  bottom: 15px;
  width: 1px;
  height: 6px;
  margin-bottom: 0;
  background: rgba(31, 61, 75, 0.25);
  transform: translateX(-50%);
}

.ya-tools-waveform__controls-row {
  margin-top: 0.35rem;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, max-content) auto minmax(0, max-content);
  align-items: center;
  gap: 0.75rem;
}

.ya-tools-waveform__controls-row .ya-tools-waveform__time--current {
  justify-self: start;
}

.ya-tools-waveform__controls-row .ya-tools-waveform__controls {
  justify-self: center;
}

.ya-tools-waveform__controls-row .ya-tools-waveform__time--duration {
  justify-self: end;
}

.ya-tools-waveform__control {
  border: 1px solid rgba(8, 97, 120, 0.5);
  background: #f3f7fb;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  padding: 0;
  font-size: 1rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.ya-tools-waveform__control:hover {
  background: #f5f3f5;
}
.ya-tools-waveform__control:focus {
  background: #ebebebff;
}

.ya-tools-waveform__control:active {
  transform: translateY(1px);
}

.ya-tools-waveform__control--forward .ya-tools-waveform__icon {
  transform: scaleX(-1);
}

.ya-tools-waveform__selection {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(8, 97, 120, 0.15);
  border: 1px solid rgba(8, 97, 120, 0.45);
  border-radius: 4px;
  pointer-events: none;
  display: none;
}

.ya-tools-waveform__hover {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.ya-tools-waveform__hover-visible {
  opacity: 1;
}

.ya-tools-waveform__hover-line {
  pointer-events: none;
}

.ya-tools-waveform__hover-label {
  font-size: 0.65rem;
  font-family: inherit;
  white-space: nowrap;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 4px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.ya-tools-waveform__controls {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}

.ya-tools-waveform__controls,
.ya-tools-waveform__controls-row {
  position: relative;
  z-index: 1;
}

.ya-tools-waveform__control {
  border: none;
  background: transparent;
  color: #15222d;
  padding: 0.25rem 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease;
}

.ya-tools-waveform__icon {
  font-family: 'fontello';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  speak: none;
  display: inline-block;
  line-height: 1;
  font-size: 25px;
}
.ya-tools-waveform__control {
  margin: 0 12px;
}
@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot');
  src:
    url('fonts/fontello.eot?#iefix') format('embedded-opentype'),
    url('fonts/fontello.woff2') format('woff2'),
    url('fonts/fontello.woff') format('woff'),
    url('fonts/fontello.ttf') format('truetype'),
    url('fonts/fontello.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

@keyframes ya-tools-waveform-spinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 600px) {
  #player-outer {padding: 0!important;}
  .ya-tools-waveform__control {
    margin: 0;
  }
  .ya-tools-waveform__icon {
    font-size: 18px;
  }
  .container.is-postupload {

  padding: 20px 10px;
}
}