select.custom-select{
    display: none;
}
.select-box{
    position: relative;
    background: #fff;
    border:1px solid #e4e4e4;
    border-radius:10px;
    height:34px;
    display: flex;
    align-items: stretch;
    line-height: 14px;
    font-size:14px;
    flex-flow: row nowrap;
    cursor:pointer;
    z-index: 1000;
}

.select-box .option{
    display: flex;
    align-items: stretch;
    flex-flow: row nowrap;
    height:34px;
}
.select-box .option >*{
    display: flex;
    align-items: center;
}
.select-box .icon-arrow .icon{
    transition:all 0.2s ease-in-out;
}
.select-box .expand,
.select-box select{
    display: none;
}
.select-box .expand{
    position: absolute;
    left:-1px;
    top:100%;
    right:-1px;
    margin-top:1px;
    background: #fff;
    border:1px solid #e4e4e4;
    border-top:0;
    border-radius:0 0 10px 10px;
    box-shadow: 0 3px 10px -4px rgba(0,0,0,0.2);
}

.select-box .expand ul{
    list-style: none;
    padding: 14px 0 18px;
    margin:0;
}
.select-box .expand ul li{
    position: relative;
    padding: 6px 25px;
    font-size:12px;
}

.select-box .expand ul li span{
    position: relative;
    display: inline-block;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.select-box .expand ul li.selected{
    color:var(--main-general-color);
}

.select-box .icon-sort{
    position: relative;
    padding: 0 9px 0 10px;
}
.select-box .icon-sort img{
    width: 16px;
    height: 16px;
}
.select-box .icon-arrow{
    margin-right:16px;
    width:16px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='512' height='512'%3E%3Cg%3E%3Cpath d='M12,15.5a1.993,1.993,0,0,1-1.414-.585L5.293,9.621,6.707,8.207,12,13.5l5.293-5.293,1.414,1.414-5.293,5.293A1.993,1.993,0,0,1,12,15.5Z'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 16px;
}
.select-box label{
    cursor:pointer;
    margin-top:-2px;
    padding:0 11px 0 19px;
    white-space: nowrap;
}
.select-box .icon-sort + label{
    border-left:1px solid #e4e4e4;
}
.select-box.active{
    border-radius:10px 10px 0 0;
    box-shadow: 0 3px 7px -3px rgba(0,0,0,0.2);
    z-index:2000;
}
.select-box.active .icon-sort::after{
    content:'';
    position: absolute;
    display: block;
    width:100%;
    height:4px;
    left:0;
    bottom:0;
    background: #fff;
    z-index: 100;
}
.select-box.active .expand{
    display: block;
}
.select-box.active .icon-arrow{
    transform: rotate(-180deg);
}