/* .audioPanel { */
/* 	position: absolute; */
/* 	bottom: 22px; */
/* 	right: 15%; */
/* 	z-index: 30000; */
/* } */

.audioButton {
	/* trick to remove border inside Chrome and IE, and draw 32x32 image (it's a browser bug) */
	height: 0px;
	width: 0px;
	padding: 26px;
	
	background-size: 100%;
	cursor: pointer;
	background-color: transparent;
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.audioButton:focus {
	outline: 0;
}

.listenAudioButton {
	background-image: url('../assets/playAudio.png');
}

.listenAudioButtonWithMessage {
	background-image: url('../assets/playAudio.png');
	animation-name: pulse_animation;
	animation-duration: 400ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.registerAudioButton {
	
}

.sendTextButton {
	background-image: url('../assets/textMessage.png');
}

.registerAudioButtonReleased {
	background-image: url('../assets/recordAudio.png');
}

.registerAudioButtonPressed {
	background-image: url('../assets/stopRecording.png');
	
	animation-name: pulse_animation;
	animation-duration: 400ms;
	transform-origin:70% 70%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes pulse_animation {
	0% { transform: scale(1); }
	50% { transform: scale(1.15); }
	100% { transform: scale(1); }
}