.twin-select {

    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        border: none;
        background: #D9D9D9;
    }

    * {
        box-sizing: border-box;
    }

    label {
        display: block;
        margin-bottom: 6px;
        color: #333F44;
    }

    .twin-selected-options {
        list-style-type: none;
        margin: 0;
        max-width: 400px;
        padding: 0;
    }

    .twin-selected-options li {
        display: inline-block;
        margin-bottom: 5px;
    }

    .twin-multi-select {
        display: block;
        max-width: 250px;
        position: relative;
    }

    .twin-multi-select::after {
        border-bottom: 2px solid rgba(0,0,0,.5);
        border-right: 2px solid rgba(0,0,0,.5);
        content: '';
        display: block;
        height: 8px;
        pointer-events: none;
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translate(0, -65%) rotate(45deg);
        width: 8px;
    }

    .twin-multi-select .twin-menu {
        background-color: #f6f6f6;
        border: none;
        box-shadow: 0 0 4px 2px #cacacc;
        border-radius: 0 0 10px 10px;
        display: none;
        max-height: 300px;
        overflow-y:scroll;
        left: 0;
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: 100;
    }

    .twin-multi-select.open .twin-menu {
        display: block;
    }

    .twin-multi-select .twin-menu:focus,
    .twin-multi-select .twin-menu.focused,
    .twin-multi-select input:focus {
        box-shadow: 0 0 4px 2px #6da5d1;
        outline: 5px solid transparent;
    }

    .twin-multi-select .twin-menu .twin-option,
    .twin-multi-select .twin-menu .twin-nothingFound {
        padding: 10px 12px 12px;
    }

    .twin-multi-select .twin-menu .twin-option:hover,
    .twin-multi-select .twin-menu .twin-option.twin-current {
        background-color: #c3c3c3;
    }

    .twin-multi-select .twin-menu .twin-option.twin-selected {
        padding-right: 30px;
        position: relative;
    }

    .twin-multi-select .twin-menu .twin-option.twin-selected::after {
        border-bottom: 2px solid #333F44;
        border-right: 2px solid #333F44;
        content: '';
        height: 16px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translate(0, -50%) rotate(45deg);
        width: 8px;
    }

    .twin-multi-select input {
        background-color: #F6F6F6;
        border: none;
        box-shadow: 0 0 4px 2px #cacacc;
        border-radius: 1.5em;
        display: block;
        min-height: 2.5em;
        padding-left: 1.5em;
        padding-right: 3.5em;
        width: 100%;
        text-align: left;
    }

    .twin-multi-select.open input {
        border-radius: 1.5em 1.5em 0 0;
    }

    .twin-remove-option {
        background-color: #333F44;
        border: 1px solid #333F44;
        border-radius: 15px;
        color: #fff;
        font-weight: bold;
        margin-bottom: 6px;
        margin-right: 6px;
        padding: 0.25em 2.0em 0.25em 1.25em;
        position: relative;
    }

    .twin-remove-option:focus {
        outline: 5px solid transparent;
        box-shadow: 0 0 4px 2px #6da5d1;
    }

    .twin-remove-option::before,
    .twin-remove-option::after {
        border-right: 2px solid #fff;
        content: "";
        height: 0.75em;
        right: 1.0em;
        position: absolute;
        top: 50%;
        width: 0;
    }

    .twin-remove-option::before {
        transform: translate(0, -50%) rotate(45deg);
    }

    .twin-remove-option::after {
        transform: translate(0, -50%) rotate(-45deg);
    }
}