.btn-green {
  background-color: #43a047;
  color: #fff;
}
.btn-green:hover {
  background-color: #2e7d32;
  color: #fff;
}

.btn-red {
  background-color: #e53935;
  color: #fff;
}
.btn-red:hover {
  background-color: #c62828;
  color: #fff;
}

.notRecordingButton {
  width: 15px;
  height: 15px;
  font-size: 0;
  background-color: darkred;
  border: 0;
  border-radius: 25px;
  outline: none;
  cursor: pointer;
}

.recordingButton {
  width: 15px;
  height: 15px;
  font-size: 0;
  background-color: red;
  border: 0;
  border-radius: 25px;
  outline: none;
  animation: pulse 1.5s infinite linear;
  cursor: pointer;
}

@keyframes pulse {
  0% {
    box-shadow: 0px 0px 5px 0px rgba(173, 0, 0, 0.3);
  }
  65% {
    box-shadow: 0px 0px 5px 13px rgba(173, 0, 0, 0.3);
  }
  90% {
    box-shadow: 0px 0px 5px 13px rgba(173, 0, 0, 0);
  }
}

.loading-content-pulse {
  animation: content-pulse 1.5s ease-in-out 0.5s infinite;
  background-color: lightgrey;
  border-radius: 16px;
}

@keyframes content-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}