.App {
	width: 100%;
	max-width: 1160px;
	margin: 0 auto;
}

.Calculator {
	font-family: 'AvenirNext', Arial, sans-serif;
	box-sizing: border-box;
	font-size: 16px;
}

.Calculator__title {
	color: #000000;
	font-size: 46px;
	max-width: 60%;
	line-height: 1;
	font-weight: 700;
	margin: 40px 0;
}

.Calculator__bigButtons {
	display: flex;
	gap: 30px;
}

.Calculator__bigButton {
	padding: 10px 20px;
	border: 2px solid rgb(149, 149, 149);
	background: white;
	margin: 30px 0;
	cursor: pointer;
	font-size: 16px;
	min-width: 280px;
	color: black;
}

.Calculator button {
	transition: all .3s ease;
}

.Calculator button:hover {
	background-color: rgb(149, 149, 149);
	color: white;
}

.Calculator__bigButton_active {
	background-color: rgb(149, 149, 149);
	color: white;
}

.Calculator__smallButtons {
	display: flex;
	gap: 20px;
	
}

.Calculator__smallButton {
	padding: 10px 20px;
	color: #000000;
	background-color: white;
	border: 2px solid rgb(149, 149, 149);
	cursor: pointer;
	min-width: 200px;
	font-size: 16px;
}

.Calculator__smallButton_active {
	background-color: rgb(149, 149, 149);
	color: white;
}

.Calculator__square_title {
	margin: 20px 0;

}

.Range_thumb {
	position: relative;
	background: white;
}

.Range_thumb_value {
	position: absolute;
	top: 20px;
	left: 50%;
	border: 0;
	background: white;
	transform: translateX(-50%);
}

.Calculator__results {
	display: flex;
	border: 2px solid rgb(149, 149, 149);
	justify-content: space-around;
	min-height: 80px;
	color: #000000;
	background: white;
	margin: 40px 0;
	padding: 20px;
}

.Calculator__results_value {
	font-size: 25px;
	font-weight: 700;
}

.Calculator__results_block_title {
	font-size: 14px;
}

.Calculator__results_block_value {
	margin: 5px 0 0 0;
}

@media(max-width: 600px) {
	.Calculator {
		width: 100%;
		padding: 20px;
	}

	.Calculator__title {
		font-size: 30px;
	}

	.Calculator__bigButtons {
		flex-direction: row;
		gap: 20px;
		margin: 0 0 20px 0;
		padding-bottom: 10px;
		gap: 20px;
		border-bottom: 1px solid rgb(149, 149, 149);
	}

	.Calculator__bigButton {
		margin: 0;
		min-width: 0;
	}

	.Calculator__smallButtons {
		flex-direction: column;
	}

	.Calculator__smallButton {}

	.Calculator__results {
		flex-direction: column;
		gap: 20px;
	}

	.Calculator__results_block_title {
		font-size: 20px;

	}
}

.slidecontainer {
	width: 100%;
	/* Width of the outside container */
}

/* The slider itself */
.slider {
	position: relative;
	-webkit-appearance: none;
	/* Override default CSS styles */
	appearance: none;
	width: 100%;
	/* Full-width */
	height: 4px;
	/* Specified height */
	background: #000000;
	/* Grey background */
	outline: none;
	/* Remove outline */
	-webkit-transition: .2s;
	/* 0.2 seconds transition on hover */
	transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
	opacity: 1;
	/* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	/* Override default look */
	appearance: none;
	width: 20px;
	/* Set a specific slider handle width */
	height: 20px;
	/* Slider handle height */
	background: #000000;
	/* Green background */
	border-radius: 50%;
	cursor: pointer;
	/* Cursor on hover */
}

.slider::-moz-range-thumb {
	border-radius: 50%;
	width: 20px;
	/* Set a specific slider handle width */
	height: 20px;
	/* Slider handle height */
	background: #000000;
	/* Green background */
	cursor: pointer;
	/* Cursor on hover */

}


.slider::before {
	position: absolute;
	content: "0м²";
	top: 20px;
	left: 0;
	/* transform: translate(-50%, 0); */
	color: rgb(149, 149, 149);
}

.slider::after {
	position: absolute;
	content: "1000м²";
	top: 20px;
	right: 0;
	/* transform: translate(50%, 0); */
	color: #000000;
}
/* The slider itself */
.slider2 {
	position: relative;
	-webkit-appearance: none;
	/* Override default CSS styles */
	appearance: none;
	width: 100%;
	/* Full-width */
	height: 4px;
	/* Specified height */
	background: #000000;
	/* Grey background */
	outline: none;
	/* Remove outline */
	-webkit-transition: .2s;
	/* 0.2 seconds transition on hover */
	transition: opacity .2s;
}

/* Mouse-over effects */
.slider2:hover {
	opacity: 1;
	/* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider2::-webkit-slider-thumb {
	-webkit-appearance: none;
	/* Override default look */
	appearance: none;
	width: 20px;
	/* Set a specific slider handle width */
	height: 20px;
	/* Slider handle height */
	background: #000000;
	/* Green background */
	border-radius: 50%;
	cursor: pointer;
	/* Cursor on hover */
}

.slider2::-moz-range-thumb {
	border-radius: 50%;
	width: 20px;
	/* Set a specific slider handle width */
	height: 20px;
	/* Slider handle height */
	background: #000000;
	/* Green background */
	cursor: pointer;
	/* Cursor on hover */

}

.slider2::before {
	position: absolute;
	content: "0м²";
	top: 20px;
	left: 0;
	/* transform: translate(-50%, 0); */
	color: #000000;
}
.slider2::after {
	position: absolute;
	content: "600м²";
	top: 20px;
	right: 0;
	/* transform: translate(50%, 0); */
	color: #000000;
}
#calculator{
	background: #d7d7d7;
	padding: 20px 0;
}