.main_block{
/*	margin-top: -20px;*/
	padding-top: 20px;
	background-color: #FAFEFF;
	min-height: 1000px;
}
.title_1{
	text-align: center;
	margin-bottom: 15px;
}
.extra_info_block{
	background-color: #edf3ff;
	margin: 5px 0 15px 0;
}
.extra_info_block p{
	text-align: center;
	padding: 10px 0;
}
.catalogs{
	display: flex;
/*	gap: 50px;*/
/*	align-items: center;*/
	padding: 20px 0;
/*	margin: auto 0;*/
 	justify-content: center;

 	gap: 5%;
}
#selected_catalog{
/*	color: green;*/
	background-color: #e1fafc;
	border: 2px solid #bccdcf;
}
.catalogs a{
	color: #5b5c5e;
	border: 1px solid #bccdcf;
	border-radius: 8px;
	padding: 5px;
	text-decoration: none;
}
.catalogs a:hover{
	background-color: #d6fbff;
}

.select_block{
	padding: 10px;
	margin: 0 50px;
	background-color: #e4f0f2;
/*	border: 1px solid #7f8485;*/
	border-radius: 10px;
}
.select_block button{
/*	align-items: center;*/
/*	justify-content: center;*/
/*	margin: 0 auto;*/
/*	margin-left: 50px;*/
	display: flex;
/*	background-color: #e1fafc;*/
	background-color: white;
	border: 1px solid #40A1AC;
	border-radius: 15px;
	padding: 5px;
/*	margin: 7px;*/
/*	margin-bottom: 20px;*/
	font-size: 15px;
}
.select_block button:hover{
	background-color: #e1fafc;
}
#id_skin_name{
/*	background-color: rgba(0, 0, 0, 0);*/
	background-color: white;
	height: 25px;
	width: 100%;
	max-width: 170px;
	font-size: 15px;

	margin-left: 5px;
	border: 0;
	border-bottom: 1px solid #888888;
	border-radius: 5px;
}
.skin_name_div, .skin_type_div{
	margin-bottom: 10px;
/*	justify-content: center;*/
}
#id_skin_type label{
	color: #5c6263;
}
.skin_name_div{
	display: flex;
	align-items: center;
}
.clear_input{
	width: 20px;
	height: 20px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.clear_input:hover{
	cursor: pointer;
	span{
		background-color: #d1211b;
	}
}
.clear_input span{
	background-color: #888888;
	position: absolute;
	height: 2px;
	width: 13px;
	border-radius: 30px;
}
.clear_input span:first-child{
	rotate: 45deg;
}
.clear_input span:last-child{
	rotate: -45deg;
}
.form_label{
	margin-bottom: 6px;
}
#id_skin_type_0{
	width: 15px;
  	height: 15px;
/*  	justify-content: center;*/
/*	align-items: center;*/
}
#id_skin_type div{
/*	display: flex;*/
/*	align-items: center;*/
/*	justify-content: center;*/
	margin-bottom: 2px;
}
#id_skin_type label input{
	width: 15px;
  	height: 15px;
}

.color_list{
	margin: 20px 20px 0 20px;
	display: grid;
/*	grid-template-rows: 300px;*/
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-row-gap: 20px;
	grid-column-gap: 10px;
}
.color_div, .pattern_div{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.color_div img{
/*	max-width: 100%;*/
/*	overflow: hidden;*/
	max-width: 100%;
	height: 300px;
	object-fit: cover;
	border-radius: 10px;
/*	box-shadow: 2px 2px 5px black;*/
}
.color_div p, .pattern_div p{
	margin-top: 5px;
	font-family: 'Roboto';
}
.pattern_div img{
	max-width: 100%;
/*	border-radius: 10px;*/
}

#id_skin_type{
/*	display: flow;*/
}
#id_skin_type label{
/*	margin-right: 10px;*/
}
.not_found{
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	color: #5c6263;
	margin-top: 40px;
}



.extra_colors{
	margin: 0 40px;
	padding: 50px 0;
}
.extra_colors h3{
	color: #545c5b;
}
.extra_colors h3 a{
	color: #3c7b82;
}
.extra_colors h3 a:hover{
	color: #63afb8;
}
.colors{
/*	max-width: 800px;*/
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-column-gap: 25px;
	justify-content: center;
}
.grid_item{
	justify-content: center;
	margin: 20px auto;
}
.grid_item img{
	max-width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 15px
}
.color_w{
	width: 350px;
}



@media (max-width:970px){
	.color_list{
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.colors{
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media (max-width:767px){
	.color_list{
		grid-template-columns: 1fr 1fr 1fr;
	}	
	.select_block{
		margin: 0 20px;
	}
	.select_block button{
/*		margin: 0 auto;*/
	}
	.grid_item img{
		height: 200px;
	}
	.extra_colors{
		margin: 0 20px;
		padding: 40px 0;
	}
	.colors{
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width:520px){
	.color_list{
		grid-template-columns: 1fr 1fr;
	}	
	.color_div img{
		height: 200px;
	}
}

