.ui-container {
  position: fixed;
  bottom: 5%;
  width: 100%;
  display: none;
  justify-content: space-between;
  
}

.ui-container.ui-container--visible {
  display: flex;
}

.ui-item {
  position: relative;
  display: block;
  width: 20vmin;
  height: 20vmin;
  max-width: 30vmin;
  max-height: 30vmin;
}

.ui__record-btn-container {
  /* width: 16vmin;
  height: 16vmin;
  max-width: 6rem;
  max-height: 6rem; */
  transition: 0.3s opacity;

}

.ui__record-btn-container.active, .ui__record-btn-container.recording {

}

.ui__record-btn-container.active .ui__record__progress-container, .ui__record-btn-container.recording .ui__record__progress-container {

  /* transform: scale(1.0); */
  
}

.ui__record-btn-container.active .ui__record__middle-circle, .ui__record-btn-container.recording .ui__record__middle-circle {
  transform: scale(0.52);
    background: #fff5;
}

.ui__record-btn-container.recording .ui__record__progress-bar {
  opacity: 1;
}

.ui__record-btn-container.recording .ui__record__progress-track {
  stroke: #fff5;
}

.ui__record__progress-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.9);
  transition: 0.3s transform, 0.3s opacity;
}

.ui__record__progress-track, .ui__record__progress-bar, .ui__record__loading-circle {
  fill: transparent;
  stroke-width: 3;
}

.ui__record__progress-track {
  stroke: #ffffff;
  transition: 0.3s stroke;
}

.ui__record__progress-bar {
  opacity: 0;
  transform-origin: 50% 50%;
  stroke: #f00;
  transform: rotate(-90deg);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: 0.1s stroke-dashoffset;
}

.ui__record__loading-circle {
  stroke-dasharray: 25 25 25 25;
  stroke-dashoffset: 0;
  stroke: #ffffff;
  opacity: 0;
  transform-origin: 50% 50%;
}

.ui__record__middle-circle {
  position: absolute;
  border-radius: 50%;
  color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  margin: 0;
  padding: 0;
  background: #fff;
  transform-origin: 50% 50%;
  transform: scale(0.6);
  transition: 0.3s border-radius, 0.3s transform, 0.3s background-color;
}

.ui__bark-btn-container {
  
}

.ui__bark-btn {
  position: absolute;
  display: block;
  /* background: #00f; */
  background: url('icon-bark-btn.png') 0 0 no-repeat;
  background-size: cover;
  top: 50%;
  left: initial;
  right: 15%;
  width: 80%;
  transform: translateY(-50%);
  
}

.ui__bark-btn::after {
  content: '';
  display: block;
  padding-top: calc(127 / 156 * 100%);
}

.ui__bark-btn.disabled {
  opacity: 0.5;
}

@media (min-width: 768px) {
  .ui-container {

  }

  .ui-item {
    width: 17vmin;
    height: 17vmin;
  }

  .ui__bark-btn {
    width: 70%;
  }
}

@media (min-width: 1024px) {
  .ui-container {
    bottom: 4%;
  }

  .ui-item {
    width: 15vmin;
    height: 15vmin;
  }

  .ui__bark-btn {
    width: 65%;
  }
}

@media (min-width: 1280px) {
  .ui-item {
    width: 15vmin;
    height: 15vmin;
  }

  .ui__bark-btn {
    width: 65%;
  }
}

@media (max-height: 1024px) {

}