.rs-recorder-view {
	max-width: 800px;
	margin: auto;
}

.recorder-container {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: #333;
	transition: background 0.3s ease-in-out;
}

.recorder-container:hover {
	background: #222;
}

.recorder-container.audio {
	border-radius: 1rem;
	background: #e3e3e3;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.03), 0 4px 4px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.03);
}

.recorder-container.audio .recorder-spacer {
	padding-top: 14%;
}

@media (max-width: 640px) {
	.recorder-container.audio .recorder-spacer {
		padding-top: 22%;
	}
}

.recorder-container.audio:hover {
	background: #eaeaea;
}

.recorder-container.audio .recorder-button-start {
	min-height: 4rem;
	min-width: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 2px rgba(0, 0, 0, 0.08), 0 4px 4px rgba(0, 0, 0, 0.08), 0 8px 8px rgba(0, 0, 0, 0.08), 0 16px 16px rgba(0, 0, 0, 0.08);
	z-index: 10;
}

.recorder-container.audio .recorder-button-start:hover {
	background: #e74468;
}

.recorder-container.audio .recorder-button {
	top: 50%;
}

.recorder-container.audio .recorder-countdown {
	font-size: 5rem;
	color: #777;
}

.recorder-container.audio .recorder-timer {
	color: #777;
}

.recorder-spacer {
	display: block;
	content: "";
	padding-top: 56.25%;
}

.recorder {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.recorder-button-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.recorder-button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translate(-50%, -50%);
	background: transparent;
	border-radius: 100%;
	border: 3px solid #e53058;
	width: 4rem;
	height: 4rem;
	transition: border 0.3s ease-in-out;
}

.recorder-button-start {
	min-width: 2.5rem;
	min-height: 2.5rem;
	background: #e53058;
	border-radius: 100%;
	transition: background 0.3s ease-in-out;
}

.recorder-button-stop {
	min-width: 1.75rem;
	min-height: 1.75rem;
	background: #e53058;
	border-radius: 3px;
	transition: background 0.3s ease-in-out;
}

.recorder-loading-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.recorder-loading:after {
	border-top: 2px solid #e53058;
}

.recorder-countdown {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 9rem;
	color: rgba(255, 255, 255, 0.7);
}

.recorder-timer {
	position: absolute;
	top: 1rem;
	right: 1rem;
	color: #fff;
}