/*------------------------------------------------------------------------------------------------------- 
popup modal filter checkboxes 
--------------------------------------------------------------------------------------------------------*/
.popfilter {/*overal container*/
	margin: 0 auto; clear:both;
 	width:100%;height:auto;
 	position: relative; display:block; font-size: 1.5rem; border: #E1E1E1 1px solid;  
}

.popfilter .header { 
 	clear:both; float:none; 
	width:100%; min-height:35px;
 	position: relative; display:block; background-color: #E1E1E1; padding-left:5px; 
	border-bottom: #ccc 1px solid;
}

.popfilter .header .title {
  font-size: 1.6rem; 
  font-weight: bold;
}

 
.popfilter .content {
  	clear:both; float:none; 
	width:100%; height:auto;
 	position: relative; display:flex; text-align: left; border: lightblue 0px solid; padding-top:10px; padding-bottom:10px;   
}

.popfilter .content > div {
  margin: 1px;  
  padding-left: 5px;
}

.flexbox0 {width:20%; height:auto; padding-left:10px; border: yellow 0px solid;}
.flexbox1 {width:80%; height:auto; padding-left:10px; border: pink 0px solid;}


.popfilter .footer { 
 	clear:both; float:none; 
	width:98%; height:auto;
 	position: relative; display:block; text-align: right; font-size: 1.75rem;     
}

.popfilter-wrapper { 
 	clear:both; float:none; 
	width:98%; height:auto; border-radius: 5px; padding:10px; border:1px solid #f1f1f1; 
 	position: relative; display:block; min-height:50px; max-height:150px; overflow-y: scroll;    
}

.popfilter-wrapper::-webkit-scrollbar {width:10px;} /*vertical scrollbar size*/
.popfilter-wrapper::-webkit-scrollbar-track {background:#ccc; border-radius: 10px;} /*the vertical track line*/
.popfilter-wrapper::-webkit-scrollbar-thumb {background:#666; border-radius: 10px;} /*the moving part*/

.popfilter-wrapper .subfield {width:50%; display:block; position:relative; border:0px solid red; float:left; }


.popfilter:after, 
.popfilter .header:after, 
.popfilter .footer:after, 
.popfilter .content:after,
.flexbox0:after,
.flexbox1:after,
.popfilter-wrapper:after
{ 
	content: "";
	display:block;  
	clear:both;
}

 
@media all and (max-width: 360px) {
.popfilter {font-size: 1.45rem;} 
.popfilter .header .title {font-size: 1.55rem;} 

.popfilter-wrapper {width:100%;} 

.flexbox0 {width:30%;}
.flexbox1 {width:70%;}
}