.select {
    position: relative;
    outline: none;
    height: 100%;
    display: flex;
    flex-flow: column;
    font: 16px/1.125 Roboto,"Helvetica Neue",sans-serif;
}

    .select .value {
        display: block;
        position: relative;
        color: #1f202a;
        padding: 8px 10px;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        cursor: pointer;
        overflow-x: hidden;
        white-space: nowrap;
        display: flex;
        flex: 1 1 auto;
        align-items: center;
    }

        .select .value::before {
            position: absolute;
            top: 50%;
            right: 0;
            margin: -2px 16px;
            width: 0px;
            height: 0px;
            content: "";
            border-width: 5px;
            border-style: solid;
            border-color: rgba(0,0,0,.54) transparent transparent
        }

    .select:focus .value {
        border: 2px solid #00aabc;
        border-radius: 4px;
    }

    .select:hover .value {
        border-color: black;
        border-width: 2px;
        color: black;
    }

    .select .list {
        position: absolute;
        top: 0;
        width: 100%;
        height: 0;
        background: #fff;
        opacity: 0;
        outline: none;
        -webkit-box-shadow: 0px 2px 9px rgba(0,0,0,0.35);
        box-shadow: 0px 2px 9px rgba(0,0,0,0.35);
        overflow: hidden;
        -webkit-transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
        transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
        z-index: 9999;
        border-radius: 4px;
    }

        .select .list.open {
            height: auto;
            opacity: 1.0;
        }

_:-ms-fullscreen, :root .select.large .list ul {
    display: flex;
    flex-flow: column;
}

        .select .list .filter {
            display: none;
        }

            .select .list .filter input {
                width: 100%;
                color: #1f202a;
                border: none;
                box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);
                margin: 0;
                padding-left: 8px;
                padding-top: 16px;
                padding-bottom: 16px;
                border-radius: 4px;
                font-size: 14px;
                outline: none;
            }

        .select .list ul {
            display: block;
            margin: 0;
            padding: 0
        }

            .select .list ul li {
                display: block;
                list-style: none;
                color: #1f202a;
                padding: 16px;
                cursor: pointer
            }

                .select .list ul li:hover, .select .list ul li.hovered {
                    color: rgba(0,0,0,.87);
                    background: rgba(0,0,0,.04);
                }

li.selected {
    color: #00aabc !important;
    background: rgba(0,0,0,.04);
}

    .select.large .filter {
        display: block
    }

    .select.large .list ul {
        max-height: 200px;
        overflow-y: auto;
    }