.vue-record-container {
  display: flex;
  margin-left: 0.5em !important;

  .vue-audio-recorder {
    width: 2.9em !important;
    height: 3.9em !important;
    padding: 0.5em !important;

    background-image: url("../img/Component-85--1.svg");
    // background-size: 70%;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff !important;

    &::before,
    &::after {
      content: none !important;
    }

    span {
      display: none !important;
    }

    &:hover {
      background-color: #eee !important;
    }

    &.active {
      background-image: url("../img/Component-236--1.svg");
      // background-size: 70%;
      // border-radius: 50%;
      box-shadow: 0 0 0 0 #179cdea9;
      background-color: #179cde !important;
      animation: pulse2 1.25s cubic-bezier(0.66, 0, 0, 1) infinite !important;
      color: #ffffffe5 !important;
      width: 3em!important;
      height: 3em!important;
    }
  }

 
}
@keyframes pulse2 {
  100% {
    box-shadow: 0 0 0 10px #179cde28!important;
    transform: scale(0.9);
  }
}