.volume {
	align-items: center;
	display: flex;
}

.volume .botao-volume {
	background-color: transparent;
	border: none;
	color: #fff;
	font-weight: 700;
	width: 2rem;
}

.volume .botao-volume:first-of-type {
	font-size: 2rem;
	text-align: left;
}

.volume .botao-volume:last-of-type {
	font-size: 1.5rem;
	text-align: right;
}

.volume .input-container {
	position: relative;
	width: 100%;
}

.volume input {
	appearance: none;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	width: 100%;
	-webkit-appearance: none;
}

.volume input::-webkit-slider-thumb {
	appearance: none;
	background: #7e7e7e;
	border: 0.375rem solid #fff;
	border-radius: 50%;
	cursor: pointer;
	height: 1.625rem;
	width: 1.625rem;
	-webkit-appearance: none;
}

.volume input::-moz-range-thumb {
	background: #7e7e7e;
	border: 0.375rem solid #fff;
	border-radius: 50%;
	cursor: pointer;
	height: 1.625rem;
	width: 1.625rem;
}

/* IE */

.volume input[type="range"]::-ms-track {
	background: transparent;
	border-color: transparent;
	border-width: 0.75rem 0;
	color: transparent;
	height: 0.375rem;
	width: 100%;
}

.volume input[type="range"]::-ms-fill-lower {
	background: #fff;
	border-radius: 1rem;
}

.volume input[type="range"]::-ms-fill-upper {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 1rem;
}

.volume input[type="range"]::-ms-thumb {
	border: 0.25rem solid #fff;
	height: 1rem;
	border-radius: 50%;
	background: #7e7e7e;
	width: 1rem;
}

/* IE */

.volume .range-tooltip {
	bottom: -1rem;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	left: calc(62% - 2rem);
	position: absolute;
	transform: translateX(calc(100% - 62%));
	width: 2rem;
}

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	.volume input {
		background: #fff;
		height: 0.5rem;
	}

	.volume .range-tooltip {
		bottom: -2rem;
	}
}

/* Firefox */
@-moz-document url-prefix() {
	.volume input::-moz-range-thumb {
		background: #7e7e7e;
		border: 0.375rem solid #fff;
		border-radius: 50%;
		cursor: pointer;
		height: 1.25rem;
		width: 1.25rem;
	}
}