.view-contacts {

    .key-controls {
        display: flex;
        flex-direction: row;
        margin: 30px;

        .key-controls-search {
            flex-grow: 1;
            input[type=text] {
                line-height: 28px;
                width: 100%;
            }
        }
        .key-controls-import {
            display: block;
            width: 8em;
            flex-shrink: 0;
            margin-left: 0.5em;
            input[type=file] {
                visibility: hidden;
                width: 0;
                height: 0;
                position: absolute;
            }
            .btn {
                width: 100%;
            }

            @include respond-to(md) {
                width: 10em;
            }
        }
    }

    .key-list {
        position: relative;
        margin: 20px;

        .key-list-scroll {
            max-height: 400px;
            overflow-y: scroll;
        }

        table {
            th, td {
                padding: 5px 10px;
            }

            .hover {
                cursor: pointer;
            }

            button.remove {
                font-size: 0.75em;
                border: none;
                background: none;
                outline: none;
                padding: 0;
                vertical-align: middle;

                svg {
                    height: 0.8em;
                    width: 0.8em;
                    fill: $color-grey-input;
                }
            }
        }

        // pull tooltip upwards to keep popup inside lightbox
        .tooltip {
            margin-top: -20px;
        }
    }

}