@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');


/**** Light Theme ****/

.select_wrap {

	width: auto;
	min-width:220px;
	margin: 5px auto;
	position: relative;
	user-select: none;
  
}


.select_wrap .default_option {
 
	background: #fff;
	border-radius: 20px;
	position: relative;
	margin-bottom:0px;
	padding-left:0px;
	border:1px solid #777777;
	cursor: pointer;
  
}


.select_wrap .default_option li {
	
	list-style-type:none;
	height:35px;
    padding: 10px 10px 10px 20px;
	
}


.select_wrap .default_option:before {
	
    content: "";
    position: absolute;
    top: 13px;
    right: 18px;
    width: 6px;
    height: 6px;
    border: 2px solid;
    border-color: transparent transparent #555555 #555555;
    transform: rotate(-45deg);
	
}


.select_wrap .select_ul {
	
	position: absolute;
	top: 45px;
	left: 0;
	width: 100%;
	background: #fff;
	border-radius: 20px;
	display: none;
	border:1px solid #777777;
	margin-bottom:0px;
	padding-left:0px;
	z-index: 1000;
  
}


.select_wrap .select_ul li {
	
	list-style-type:none;
	padding: 10px 10px 10px 20px;
	cursor: pointer;
  
}


.select_wrap .select_ul li:first-child:hover {
	
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
  
}


.select_wrap .select_ul li:last-child:hover {
	
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
  
}


.select_wrap .select_ul li:hover {
	
	background: #EEEEEE;
  
}


.select_wrap .option {
	
	display: flex;
	align-items: center;
	margin-right: 26px;
  
}


.select_wrap .option_div {
	
	margin-bottom:0px;
	font-size:12px;
	color:black
	
}


.select_wrap.active .select_ul {
	
	display: block;
	
}


.select_wrap.active .default_option:before {
	
	top: 17px;
	transform: rotate(-225deg);
	
}


/**** Dark Theme ****/

.multi_select_wrap {

	width: 100%;
	min-width:220px;
	margin: 0px auto;
	position: relative;
	user-select: none;
  
}


.multi_select_wrap .default_multi_option {
 
	background: #333;
	border-radius: 5px;
	position: relative;
	margin-bottom:0px;
	padding-left:0px;
	border:1px solid #444;
	cursor: pointer;
  
}


.multi_select_wrap .default_multi_option li {
	
	list-style-type:none;
	height:50px;
    padding: 10px 10px 10px 20px;
	display:flex;
	
}


.multi_select_wrap .default_multi_option:before {
	
	font-family: "Font Awesome 5 Free";
	font-size: 20px;
	font-weight: 900;
    content: "\f107";
    position: absolute;
    top: 11px;
    right: 19px;
	
}


.multi_select_wrap.active .default_multi_option:before {
	
	font-family: "Font Awesome 5 Free";
	font-size: 20px;
	font-weight: 900;
	content: "\f106";
	
}


.multi_select_wrap .multi_select_ul {
	
	position: absolute;
	top: 60px;
	left: 0;
	width: 100%;
	max-height: 320px;
	background: #393939;
	border-radius: 5px;
	overflow-y:auto;
	display: none;
	border:1px solid #555;
	box-shadow: 0px 10px 33.25px 1.75px #191919;
	margin-bottom:0px;
	padding-left:0px;
	z-index: 1000;
  
}


.multi_select_wrap .multi_select_ul li {
	
	list-style-type:none;
	padding: 15px 10px 15px 20px;
	cursor: pointer;
  
}


.multi_select_wrap .multi_select_ul li:first-child:hover {
	
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
  
}


.multi_select_wrap .multi_select_ul li:last-child:hover {
	
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
  
}


.multi_select_wrap .multi_select_ul li:hover {
	
	border:1px solid #595959;
	background: #494949;
  
}


.multi_select_wrap.active .multi_select_ul {
	
	display: block;
	
}


.multi_select_wrap .option {
	
	display: flex;
	align-items: center;
	margin-right: 26px;
  
}


.multi_select_wrap .option_div {
	
	margin-bottom:0px;
	font-weight: 400;
	font-size: 15px;
	font-family: 'Montserrat', sans-serif;
	color:var(--default-white);
	
}


@media (max-width: 480px) {
	
	.select_wrap {
		min-width:180px;
	}
	
}