.Select,.ComboBox {
    display: inline-block;
}

.Select li.selected > div,
.ComboBox li.selected > div{
    background: #ddf;
}


.Select .overlay,
.ComboBox .overlay  {
    box-sizing:border-box;
    position: absolute;
    background: white;
    padding: 2px;
    border: 1px solid #aaa;
    border-radius: .2rem;
    z-index:100;
    flex-direction:column;
}



.Select .overlay>ul,
.ComboBox .overlay>ul {
    box-sizing:border-box;
    position: relative;
    overflow: auto;
    height: 100%;
}

.Select li div,
.ComboBox li div {
    padding: 1px;
    border-top: 1px solid #ccc;
    margin: 1px
}

.Select  a.clear,
.ComboBox  a.clear{
    position:absolute;
    top:3px;
    right:5px;
    text-decoration:none;
}

.Select  a.clear:hover,
.Combobox  a.clear:hover{
    background:none;
}

.Select  a.clear:before,
.ComboBox  a.clear:before {
    content: "\39";
    font-family: 'elements';
    font-size: 1em;
    color: var(--danger);
}

.Select .input,
.ComboBox .input{
    position:relative;
}

/* ComboBox */

.ComboBox input {
    width:100% !important;
}

.ComboBox.filtered li:not(.on) {
    display: none;
}

.ComboBox[data-match='false'] input{
    background:rgba(255,165,0,0.2);
}

.ComboBox input:invalid{
    background:rgba(255,0,0,0.1);
}


/* Select */

.Select ul ul {
    padding-left: 10px;
    list-style-type: none;
}


.Select li.path div {
    color: grey;
}

.Select li.on div {
    color: black
}

.Select.filtered li:not(.on):not(.path) {
    display: none;
}


.Select select {
    display: none;
}

.Select input {
    display: block;
    width: 100%;
    background: white;
    box-sizing: border-box;
}

.Select .value {
    display: block;
    padding: 1px;
    padding-right: 15px;
    border-radius: .2rem;
    border: 0.5px solid #a9a9a9;
    line-height: 15px;
    min-width: 150px;
    position: relative;
}

.Select .value:after {
    display: block;
    content: "\2304";
    position: absolute;
    top: -3px;
    right: 5px;
    font-size: 15px;
}