.stop-scrolling {
  height: 100%;
  overflow: hidden;
}	

#slogan{
	position: relative;
	width: max-content;
	font-size: 24pt;
	font-weight: 600;
	top: 20px;
	margin-top: 100px;
	padding-top: 0px;
	left: 0px;
	transform: translate(calc(50vw - 50%));
	z-index: 4;
	color: #ff385c;
	display: grid;
}

#search_back{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #00000052;
    z-index: 5;
    animation-name: slowchange;
    animation-duration: 1s;
    /* backdrop-filter: blur(2px); */
    display: none;
}


#change_for_menu{
	position: sticky;
	width: 100%;
	top: 8px;
	max-width: 400px;
	margin-top: 40px;
	padding-top: 8px;
	display: flex;
	/* background: #fff; */
	/* border: 2px solid #e7e7e7; */
	border-radius: 12px;
	overflow:hidden;
	border-bottom: none;
	left: 0px;
	transform: translate(calc(50vw - 50%));
	/* height: 45px; */
	z-index: 5;
	display: flex;
	filter: brightness(1);
	transition: 0.5s;
}

.head_correct{
	color:#fff!important;
	filter: brightness(10)!important;
	transition: 0.5s!important;
}

#change_for_menu div{
	width: 20%;
	text-align: center;
	border-bottom: 4px solid #fff;
	padding-top: 12px;
}

#change_for_menu .back{
	width: 48px;
	text-align: center;
	border-bottom: 4px solid #fff;
	padding-top: 12px;
	margin-top: 12px;
}

#change_for_menu a{
	width: 25%;
	text-align: center;
	/* border-bottom: 2px solid #f4f4f4 !important; */
	padding-top: 0px;
	opacity: 0.8;
	transition:0.2s;
}

#change_for_menu a:hover{
	opacity:1;
	transition:0.2s;
}

#change_for_menu .activepage{
	opacity: 1;
}

#change_for_menu .activepage h5{
	font-weight:600!important;
	padding: 0px;
	font-size: 11pt;
}


#change_for_menu img{
	width: 24px;
	height: 24px;
	/* display:none; */
}

#change_for_menu h5{
	margin: 8px auto 8px auto;
	font-weight:400;
	font-size: 11pt;
	width: max-content;
}

#change_for_search{
	position: fixed;
	bottom: 30px;
	width: max-content;
	display: flex;
	margin: 0px auto;
	background: #424e5b;
	border-radius: 28px;
	overflow:hidden;
	border: 2px solid #e7e7e7;
	left: 0;
	transform: translate(calc(50vw - 50%));
	cursor: pointer;
	transition:0.2s;

}

#change_for_search:hover{
	box-shadow: 0px 0px 10px #7f7f7f;
	transition:0.2s;
}

#new_search input{
	height: auto;
	width: calc(100% - 0px);
	padding: 0px;
	border-radius: 8px;
	border: none;
	font-family: "Poppins", sans-serif;
	font-size: 12pt;
	font-weight: 400;
	background: none;
	border: none;
	transition:0.2s;
	display: flex;
}

#new_search input:focus{
	font-weight: 600;
}

#search_content{position: sticky;z-index: 5;margin-top: 16px;width: calc(100% - 32px);top: 178px;}

#search_content .search_bottom{position: absolute;/* margin-top: 0px; */width: 100%;max-height: 210px;top: 0px;max-width: 796px;background: #ffffff;border-radius: 32px;overflow: auto;border: none;left: 0;transform: translate(calc(50vw - 50%));z-index: 5;align-items: center;box-shadow: 0px 0px 2px #a6a6a6;}

#search_content .search_sub{
	overflow:auto;
	display: grid;
	gap: 0px;
	/* padding: 16px; */
	max-height: 210px;
	font-size: 12pt;
}

#city_list {
	margin:0px;
	opacity: 1;
	transition: 0.2s;
	padding: 12px 16px 12px 16px;
}

#city_list button{
	background:none;
	border:none;
	font-size: 12pt;
	cursor:pointer;
	margin:0px;
	padding:0px;
	color: #000000;
	font-weight: 600;
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 4px;
}

#city_list:hover{
	transition:0.2s;
	padding: 12px 18px 12px 18px;
}

#search_content a{
	padding: 8px 0px 8px 12px;
	transition:0.2s;
	width: calc(100% - 24px);
	display: block;
	font-size: 12pt;
	font-weight: 600;
}

#search_content a:hover{
	transition:0.2s;
	padding: 8px 0px 8px 16px;
}

.s_up{
	opacity:1;
    animation-duration: 0.5s;	
}

.nheigt{
	height: 20px;
	width: 100%;
}

#change_for_search .bar{
	width: 100%;
	/* border-radius: 26px; */
	padding: 4px 12px 4px 4px;
	display: flex;
	gap: 8px;
	/* justify-content: space-between; */
	align-items: center;
}

#change_for_search h5{
	margin:0px;
	color: #fff;
}

#change_for_search .bar img{
	width: 24px;
	height: 24px;
}

#new_search{position: sticky;margin-top: 16px;width: calc(100% - 32px);top: 91px;max-width: 780px;display: flex;background: #ffffff;border-radius: 38px;overflow: hidden;border: 2px solid #e7e7e7;left: 0;transform: translate(calc(50vw - 50%));z-index: 4;justify-content: space-between;padding: 8px 8px 8px 8px;align-items: center;box-shadow: 0px 4px 8px 0px #00000012;}

#new_search .search_a{
	width: 200px!important;
	padding-left: 12px;
	cursor: pointer;
	opacity: 1;
	transition:0.2s;
}


#new_search .search_a:hover{
	opacity:0.8;
	transition:0.2s;
}

#new_search .city_w{
	font-size: 10pt;
	color: #000000;
	font-weight:600;
}

#new_search .city_s{
	font-size: 18px;
	color:#303944;
	font-weight: 400;
}

#new_search .search_b{
	width: 100px;
	padding-left: 12px;
	cursor: pointer;
	opacity:1;
	transition:0.2s;
}

#new_search .search_c{
	width: calc(100% - 177px);
	border-left: 1px solid #e7e7e7;
	padding: 0px 12px 0px 12px;
	cursor: pointer;
	opacity: 1;
	transition:0.2s;
}

#new_search .search_d{
	width: calc(100% - 132px);
	border-left: 1px solid #e7e7e7;
	padding: 0px 12px 0px 12px;
	cursor: pointer;
	opacity:0.8;
	transition:0.2s;
}

#new_search .search_c:hover{
	opacity:0.8;
	transition:0.2s;
}


#new_search img{
	width: 48px;
	height: 48px;
}

	
	/*
	[][][][][][][][][][][]
	Filter popup
	*/
	
	
	#f_popup{
	    position: fixed;
	    top: 0px;
	    width: 100%;
	    height: 100%;
	    background: #0000007d;
	    z-index: 10;
	    animation-name: slowchange;
	    animation-duration: 1s;
	    backdrop-filter: blur(1px);
	    display: block;
	    align-items: end;
	    justify-content: normal;
	}
		
	#f_popup .frame{
	   width:100%;
	   height: calc(100% - 76px);
	   /* height: 100%; */
	   max-width:1000px;
	   max-height: none;
	   background:#fff;
	   border-radius: 32px 32px 0px 0px;
	   /* border-radius: 0px; */
	   position: absolute;
	   bottom: 0px;
	   overflow: hidden;
	}

	#f_popup .cover{
		width: 100%;
		aspect-ratio: 1/1;
		background-position: center;
		display: grid;
		align-content: end;
		border-radius: 0px 0px 32px 32px;
	}	


	#f_popup .base_information{display: grid;gap: 2px;height: max-content;padding: 16px;border-radius: 0px 0px 32px 32px;}
	
	#f_popup .data_name{font-size: 16pt;font-weight: 600;color: #fff;}
	
	#f_popup .data_sub{font-size: 12pt;color: #fff;}

	#f_popup .official{
		display:flex;
		gap:8px;
		margin-top: 4px;
	}
		
	#f_popup .comment{display: flex;gap: 8px;color: #fff;align-items: center;justify-content: space-between;/* border: 2px solid #fff; */border-radius: 12px;padding: 8px;background: #0000003b;width: -webkit-fill-available;font-size: 12pt;}
	
	#f_popup .year{display: flex;gap: 8px;color: #fff;align-items: center;justify-content: space-between;/* border: 2px solid #fff; */border-radius: 12px;padding: 8px;background: #0000003b;width: max-content;font-size: 12pt;font-weight: 600;}
		
	#f_popup img{width: 20px;height: 20px;}


	#f_popup .process{
	   width: calc(100% - 32px);
	   height: calc(100% - 417px);
	   margin: 16px auto 0px auto;
	   /* aspect-ratio: 1/1; */
	   /* border-radius: 0px; */
	   /* background-size: cover; */
	   /* display: grid; */
	   /* align-content: baseline; */
	   /* padding: 0px; */
	   /* gap: 12px; */
	   /* overflow: auto; */
	}	

	#f_popup .popup_heading{
		font-size: 12pt;
		font-weight:600;
		display:flex;
		align-items:center;
		gap:4px;
	}

	#f_popup .popup_heading img{
		width: 22px;
		height: 22px;
	}
	

	#f_popup .popup_li{
		font-size: 10pt;
	}

	#f_popup .maptags{
		font-size: 8pt;
		font-weight:600;
		padding: 4px 8px 4px 8px;
		background: #f4f4f4;
		border-radius: 8px;
	}	

	#f_popup .bottom_information{
		width: 100%;
		overflow:hidden;
		position: absolute;
		bottom: 0px;
		padding: 7px 0px 12px 0px;
		background: rgb(255 255 255 / 0%);
		/* background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%); */
		animation-name: slowchange;
		animation-duration: 4s;
	}

	#f_popup .f_submit{
	   width: auto;
	   background: #2ed87b!important;
	   background-size: cover;
	   padding: 8px 16px 8px 12px;
	   font-size: 10pt;
	   color: #fff;
	   font-weight: 600;
	   text-align: center;
	   border-radius: 20px;
	   margin: 0px auto;
	   display: flex;
	   align-items: center;
	   border: none;
	   justify-content: center;
	   gap: 6px;
	   box-shadow: 0px 2px 4px #d0d0d0;
	}	

	#f_popup .f_submit img{
	   width:24px;
		height:24px;
	}		

	#f_popup .top_information{
		display: flex;
		justify-content: space-between;
		padding: 16px;
		position: absolute;
		z-index: 3;
		width: calc(100% - 32px);
	}



	#f_popup .form_top{
	display: flex;
	gap: 8px;
	padding: 60px 16px 0px 16px;
	}


	#f_popup .sub_cover{
		height: 110px!important;
		aspect-ratio: 1/1;
		/* background: #4f4f4f1c; */
		border-radius:20px;
		background-size: cover;
		background-position: center;
	}

	#f_popup .middle_information{overflow: auto;height: 100%;width: 100%;}

	#f_popup .middle_sub{
    padding: 16px;
    display: grid;
    gap: 12px;
    margin-bottom: 96px;
}

	#f_popup .middle_information::-webkit-scrollbar {	
	width: 8px!important;
	height:8px!important;	
	display:none;
	}

	#f_popup .top_information a{
		background: #00000075;
		display: flex;
		align-items: center;
		width:max-content;
		font-size: 12pt;
		font-weight: 600;
		border-radius: 16px;
		padding: 4px 4px 3px 12px;
		gap: 4px;
		color: #fff;
	}	

	#f_popup .top_information img{
		width: 16px;
		height: 16px;
		filter: brightness(10);
	}		
	
	#f_popup .close{
		background: #00000075;
		width:32px;
		height:32px;
		background-image: url(../../assets/vector-images/dark_close.svg)!important;
		border-radius:16px;
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: center;
		filter: brightness(10);
		cursor: pointer;
	}

	#f_popup .back{
		background: #00000075;
		width: 40px!important;
		height: 32px!important;
		background-image: url(../../assets/vector-images/dark_arrow_left.svg)!important;
		border-radius:16px;
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: center;
		filter: brightness(10);
		cursor: pointer;
	}

	#f_popup .base_information{
		/* border-radius:16px; */
		text-shadow: 1px 1px 10px #000;
	}


	#f_popup .data_score{
		color:#fff;
		font-weight: 400;
		font-size: 12pt;
		display: flex;
		gap: 8px;
		align-items: center;
	}

	#f_popup .score_base{
		color:#fff;
		font-weight: 600;
		font-size: 12pt;
		display: flex;
		gap: 4px;
		align-items: center;
	}	

	#f_popup .score_base img{
		width: 16px;
		height: 16px;
		margin-bottom: 2px;
		/* filter: brightness(10); */
	}	

	#f_popup .sub_data_name{
		color: #1e1e1e;
		font-weight:600;
		font-size: 14pt;
	}

	#f_popup .sub_data_score{
		color: #3f3f3f;
		font-weight: 400;
		font-size: 12pt;
		display: flex;
		gap: 8px;
		align-items: center;
	}

	#f_popup .sub_score_base{
		color: #5b5b5b;
		font-weight: 600;
		font-size: 12pt;
		display: flex;
		gap: 4px;
		align-items: center;
	}	

	#f_popup .sub_score_base img{
		width: 16px;
		height: 16px;
		margin-bottom: 2px;
		/* filter: brightness(10); */
	}	
/*
[][][][][][][][][][][]
Filter popup
*/


#f_popup{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    background: #00000030;
    z-index: 10;
    animation-name: slowchange;
    animation-duration: 1s;
    backdrop-filter: blur(2px);
    display:flex;
    justify-content:center;
    align-items: center;
}



#f_popup .frame{
   width: 400px;
   height:100%;
   max-height:800px;
   background:#fff;
   border-radius:20px;
   position: relative;
   align-items: center;
}


@keyframes slowchange_1 {
0%   {opacity:0;}	
100%  {opacity:1;}	
}

@keyframes slowchange_2 {
0%   {opacity:1;}	
100%  {opacity:0;}	
}


@media (max-width: 600px) {
	
	#slogan{
		font-size: 16pt;
		font-weight: 600;
		top: -13px;
		margin-top: -20px;
		transform: translate(calc(50vw - 50%));
	}
	
	#new_search{position: sticky;margin-top: 28px;width: calc(100% - 48px);top: 48px;max-width: 580px;display: flex;background: #ffffff;border-radius: 32px;border: none;z-index: 1;border: 2px solid #f4f4f4;padding: 8px 6px 8px 8px;}

	
	#change_for_menu{
		position: sticky;
		top: -34px;
		margin-top: 0px;
		border-radius: 12px;
		/* height: 57px; */
		/* border-left: 2px solid #f4f4f4; */
		/* border-top: 2px solid #f4f4f4; */
		/* border-right: 2px solid #f4f4f4; */
		background: #fff;
		z-index: 2;
		padding-top: 8px;
		width: calc(100% - 36px);
	}
	
	#change_for_menu img{
		width: 24px;
		height: 24px;
		display: inline;
	}	
	
	#change_for_menu .activepage{
		border-bottom: 2px solid #ff385c!important;
		padding-top: 0px;
		opacity: 1;
	}	
	
	#new_search .search_a{
		padding-left: 4px;
	}
	
	.nheigt{
		height: 86px;
		width: 100%;
	}	
	
	#new_search img{
		width: 48px;
		height: 48px;
		margin-right: 4px;
	}
	
	#search_content{top: 125px;}
	
	
	/*
	[][][][][][][][][][][]
	Filter popup
	*/
	
	
	#f_popup{
	    position: fixed;
	    top: 0px;
	    width: 100%;
	    height: 100%;
	    background: #0000007d;
	    z-index: 10;
	    animation-name: slowchange;
	    animation-duration: 1s;
	    backdrop-filter: blur(1px);
	    display: block;
	    align-items: end;
	    justify-content: normal;
	}
		
	#f_popup .frame{
	   width:100%;
	   height: calc(100% - 76px);
	   /* height: 100%; */
	   max-width:1000px;
	   max-height: none;
	   background:#fff;
	   border-radius: 32px 32px 0px 0px;
	   /* border-radius: 0px; */
	   position: absolute;
	   bottom: 0px;
	   overflow: hidden;
	   animation-name: popup_open;
	   animation-duration: 1s;
	}

	#f_popup .cover{
	   width: calc(100% - 0px);
	   /* max-width: 350px; */
	   /* height: 300px; */
	   /* max-height: 350px; */
	   aspect-ratio: 1/1;
	   background: #4f4f4f1c;
	   border-radius: 0px 0px 32px 32px;
	   background-size: cover;
	   background-position: center;
	   display: grid;
	   align-content: end;
	   /* padding: 12px; */
	}	

	#f_popup .process{
	   width: calc(100% - 32px);
	   height: calc(100% - 417px);
	   margin: 16px auto 0px auto;
	   /* aspect-ratio: 1/1; */
	   /* border-radius: 0px; */
	   /* background-size: cover; */
	   /* display: grid; */
	   /* align-content: baseline; */
	   /* padding: 0px; */
	   /* gap: 12px; */
	   /* overflow: auto; */
	}	

	#f_popup .popup_heading{
		font-size: 12pt;
		font-weight:600;
		display:flex;
		align-items:center;
		gap:4px;
	}

	#f_popup .popup_heading img{
		width: 22px;
		height: 22px;
	}
	

	#f_popup .popup_li{
		font-size: 10pt;
	}

	#f_popup .maptags{
		font-size: 8pt;
		font-weight:600;
		padding: 4px 8px 4px 8px;
		background: #f4f4f4;
		border-radius: 8px;
	}	

	#f_popup .bottom_information{
		width: 100%;
		overflow:hidden;
		position: absolute;
		bottom: 0px;
		padding: 7px 0px 12px 0px;
		background: rgb(255 255 255 / 0%);
		/* background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 100%); */
		animation-name: slowchange;
		animation-duration: 4s;
	}

	#f_popup .f_submit{
	   width: auto;
	   background: #2ed87b!important;
	   background-size: cover;
	   padding: 8px 16px 8px 12px;
	   font-size: 10pt;
	   color: #fff;
	   font-weight: 600;
	   text-align: center;
	   border-radius: 20px;
	   margin: 0px auto;
	   display: flex;
	   align-items: center;
	   border: none;
	   justify-content: center;
	   gap: 6px;
	   box-shadow: 0px 2px 4px #d0d0d0;
	}	

	#f_popup .f_submit img{
	   width: 18px;
	   height: 18px;
	}		

	#f_popup .top_information{
		display: flex;
		justify-content: space-between;
		padding: 16px;
		position: absolute;
		z-index: 3;
		width: calc(100% - 32px);
	}

	#f_popup .middle_information{overflow: auto;height: 100%;width: 100%;}

	#f_popup .middle_sub{
    padding: 16px;
    display: grid;
    gap: 12px;
    margin-bottom: 96px;
}

	#f_popup .middle_information::-webkit-scrollbar {	
	width: 8px!important;
	height:8px!important;	
	display:none;
	}

	#f_popup .top_information a{
		background: #00000075;
		display: flex;
		align-items: center;
		width:max-content;
		font-size: 12pt;
		font-weight: 600;
		border-radius: 16px;
		padding: 4px 4px 3px 12px;
		gap: 4px;
		color: #fff;
	}	

	#f_popup .top_information img{
		width: 16px;
		height: 16px;
		filter: brightness(10);
	}		
	
	#f_popup .close{
		background: #00000075;
		width:32px;
		height:32px;
		background-image: url(../../assets/vector-images/dark_close.svg)!important;
		border-radius:16px;
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: center;
		filter: brightness(10);
	}

	#f_popup .base_information{
		text-shadow: 1px 1px 10px #000;
		background: linear-gradient(0deg, rgba(2,28,68,1) 0%, rgba(2,28,68,0.3897934173669467) 50%, rgba(2,28,68,0.022846638655462215) 100%);
	}


	#f_popup .data_name{
		color:#fff;
		font-weight:600;
		font-size: 14pt;
	}

	#f_popup .data_score{
		color:#fff;
		font-weight: 400;
		font-size: 12pt;
		display: flex;
		gap: 8px;
		align-items: center;
	}

	#f_popup .score_base{
		color:#fff;
		font-weight: 600;
		font-size: 12pt;
		display: flex;
		gap: 4px;
		align-items: center;
	}	

	#f_popup .score_base img{
		width: 16px;
		height: 16px;
		margin-bottom: 2px;
		/* filter: brightness(10); */
	}	

	.head_correct{
		color: #4a525b !important;
		filter: brightness(1)!important;
	}

	#new_search .search_a{
		width: 100px!important;
	}	
		
}