.dual-listbox {
    display: flex;
    flex-direction: column;

    .dual-listbox__container {
        display: flex;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .dual-listbox__search {
        border: 1px solid #ddd;
        padding: 10px;
        width: 100%;
    }

    .dual-listbox__available,
    .dual-listbox__selected {
        border: 1px solid #ddd;
        height: 300px;
        overflow-y: auto;
        padding: 0;
        width: 300px;
        margin-top: 0;
        -webkit-margin-before: 0;
    }

    .dual-listbox__buttons {
        display: flex;
        flex-direction: column;
        margin: 0 10px;
    }

    .dual-listbox__button {
        margin-bottom: 5px;
        border: 0;
        background-color: #ddd;
        padding: 10px;
        color: #fff;
        cursor: pointer;

        &:hover {
            background-color: #ccc;
        }
    }

    .dual-listbox__title {
        padding: 15px 10px;
        font-size: 120%;
        font-weight: bold;
        border-left: 1px solid #efefef;
        border-right: 1px solid #efefef;
        border-top: 1px solid #efefef;
        margin-top: 1rem;
        -webkit-margin-before: 1rem;
    }

    .dual-listbox__item {
        display: block;
        padding: 10px;
        cursor: pointer;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        border-bottom: 1px solid #efefef;
        transition: background 0.2s ease;

        &.dual-listbox__item--selected {
            background-color: transparentize(#089de3, 0.3);
        }
    }

    .dragging {
        opacity: 0.5;
        background-color: #ddd;
    }

    .drop-in {
        border: 1px solid #aaa;
    }

    .drop-above {
        border: 0;
        border-top: 1px solid rgb(124, 144, 255);
    }
}