.asi{margin:0; z-index:10; width: 100%; max-width:100%; height:46px;  cursor:pointer; position:relative;}
.asi_name{line-height:46px; position: relative; height:46px; background: rgba(255, 255, 255, 0.65);white-space: nowrap; padding:0 5px; overflow:hidden; border-radius:5px;  border:1px #bcbcbc  solid;}       
.asi_name_selected .asi_name:before{content:""; width:40px; height:100%; background: rgba(255,255,255,0.9); position: absolute; right:0; top:0; }
.asi .asi_stuff{display:block; max-height:0; opacity:0; transition:0.5s opacity; overflow:hidden;}
.asi .asi_stuff input{}
.asi.asi_open .asi_stuff{display:block; opacity:1; max-height:300px; background:#fff; position:absolute; left:0; top:34px; width:100%; border:1px #bcbcbc solid; border-top:none; padding:5px; }
.asi_open{ z-index:100; }
.asi .asi_stuff ul{display:flex; flex-direction: column; max-height:200px; padding:0px; overflow:hidden; overflow-y:auto; margin:0; list-style:none;}

.asi .asi_stuff ul li{padding:5px; border-top:1px #ddd solid; cursor:pointer; }
.asi .asi_stuff ul li:hover{}

.asi_name_selected .asi_name{font-weight:bold;}


.asi .asi_stuff ul li.sort1{order:1;}
.asi .asi_stuff ul li.sort2{order:2;}
.asi_cleaner{width:20px; height:20px; line-height: 20px;  border-radius: 50%;  text-align: center;  position:absolute; right:20px; top:14px; z-index:10; display:none;}
.asi_name_selected .asi_cleaner{display:block;  transition:0.5s; opacity:0.7;} 
.asi_name_selected .asi_cleaner:hover{display:block; opacity:1; color:#da3b44;} 
.asi_open.asi_name_selected .asi_cleaner{display:none;}

.asi_name:after{content:""; width: 0; height: 0; transition:0.5s; border:4px transparent solid; border-top:6px #333  solid;position: absolute; right:9px; top:19px;}
.asi.asi_open .asi_name:after{transform:rotate(180deg); top:14px;}

@media (max-width: 639px)
{
 .asi.asi_open{position: fixed; background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.4); left: 10%; top: 40px; width: 80%; height: auto; z-index:150; }
 .asi .asi_stuff ul{max-height:150px;} 
}