﻿.stil-select {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    padding-right: 8px;
}

    .stil-select ul {
        list-style: none;
        display: inline-block;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .stil-select li {
        vertical-align: middle;
        line-height: 24px;
        display: none;
        padding: 10px 16px;
        margin: 0;
        box-sizing: initial;
        width: 100%;
    }

    .stil-select ul.stil-select-value li {
        white-space: nowrap;
        height: 24px;
    }

    .stil-select > ul:first-of-type li.selected {
        display: inline-block;
        height: 24px;
        max-width: calc(100% - 24px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .stil-select ul.stil-select-drop {
        position: absolute;
        z-index: 9999;
        visibility: hidden;
        opacity: 0;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        top: 0;
        left: 0;
        transition: 0.24s;
        max-height: 0;
        overflow: hidden;
        overflow-y: auto;
        width: 100%;
    }

    .stil-select ul.stil-select-drop.show {
        visibility: visible;
        opacity: 1;
        max-height: 160px; /* COMMENT IF YOU DON?T NEED MAX HEIGHT */
    }

    .stil-select ul.stil-select-drop li {
        display: block;
        transition: background 0.24s;
        cursor: pointer;
    }

    .stil-select ul.stil-select-drop li.selected {
        background: rgba(0,0,0,0.07);
    }

    .stil-select ul.stil-select-drop li:hover {
        background: rgba(0,0,0,0.04);
    }

    .form__field--select .form__item.stil-select {
        padding-left: 0;
        padding-right: 2rem;
    }

    .tooltip {
        z-index: 10001;
    }

    div.tooltip-arrow:empty {
        display:unset;
    }