/* default values that can be overwritten by more specific selectors */
.kartana ul{
    /* can be overwritten by .kartana .menu */
    width: 100%;
    max-height: 100px;
    background: #fff;
    border: 1px solid #aaa;
    padding: 0;
}
.kartana > input + ul > li:hover{
    /* can be overwritten by .kartana .option:hover */
    cursor: pointer;
    background: #eee;
}
.kartana > input + ul > li.highlighted{
    /* can be overwritten by .kartana .option.highlighted */
    background: #ccc;
}
/* clears the 'X' in the search field from Internet Explorer */
.kartana > input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
.kartana > input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }
/* clears the 'X' in the search field from Chrome */
.kartana > input[type="search"]::-webkit-search-decoration,
.kartana > input[type="search"]::-webkit-search-cancel-button,
.kartana > input[type="search"]::-webkit-search-results-button,
.kartana > input[type="search"]::-webkit-search-results-decoration { display: none; }
.kartana > input + ul > div {
    /* can be overwritten by .kartana .menu.acknowledgement
    You are allowed to remove the link to kartana.de (display: none)
    if you include a similar link to kartana.de on the same page
    */
    font-size: 0.5em;
    background: #eee;
    text-align: right;
    padding: 2px;
}
/* functional CSS that should not be modified or overwritten
   unless you know what you are doing */
.kartana.combobox{
    position: relative;
}
.kartana.combobox > .input{
    box-sizing: border-box;
    width: 100%;
}
.kartana.combobox > .menu:empty,
.kartana.combobox > .menu.closed {
    display: none;
}
.kartana.combobox > .menu{
    position: absolute;
    z-index: 999;
    list-style-type: none;
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
    margin: 0;
    overflow: auto;
    visibility: hidden;
    transition-property: visibility;
    transition-delay: 50ms;
}
.kartana.combobox > .menu.align-right{
    right: 0;
}
.kartana.combobox > .menu .option{
    padding: 4px 20px 4px 4px;
    white-space: nowrap;
}
.kartana.combobox > .input:focus + .menu,
.kartana.combobox > .input + .menu:active{
    visibility: visible;
    transition-property: visibility;
    transition-delay: 0ms;
}