.ss-main {
    position: relative;
    display: inline-block;
    user-select: none;
    color: #666;
    width: 100%
}

    .ss-main .ss-single-selected {
        display: flex;
        cursor: pointer;
        width: 100%;
        height: 30px;
        padding: 6px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        background-color: #fff;
        outline: 0;
        box-sizing: border-box;
        transition: background-color .3s;
    }

        .ss-main .ss-single-selected.ss-disabled {
            background-color: #dcdee2;
            cursor: not-allowed
        }

        .ss-main .ss-single-selected.ss-open-above {
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }

        .ss-main .ss-single-selected.ss-open-below {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0
        }

        .ss-main .ss-single-selected .placeholder {
            flex: 1 1 100%;
            text-align: left;
            width: calc(100% - 30px);
            line-height: 1em;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .ss-main .ss-single-selected .placeholder, .ss-main .ss-single-selected .placeholder * {
                display: flex;
                align-items: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

                .ss-main .ss-single-selected .placeholder * {
                    width: auto
                }

                .ss-main .ss-single-selected .placeholder .ss-disabled {
                    cursor: pointer;
                    color: #dcdee2
                }

        .ss-main .ss-single-selected .ss-deselect {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex: 0 1 auto;
            margin: 0 5px;
            font-weight: 700;
            font-family: Arial,Helvetica,sans-serif
        }

            .ss-main .ss-single-selected .ss-deselect.ss-hide {
                display: none
            }

        .ss-main .ss-single-selected .ss-arrow {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex: 0 1 auto;
            margin: 0 5px
        }

            .ss-main .ss-single-selected .ss-arrow span {
                border: solid #666;
                border-width: 0 2px 2px 0;
                display: inline-block;
                padding: 3px;
                transition: transform .2s,margin .2s
            }

                .ss-main .ss-single-selected .ss-arrow span.arrow-up {
                    transform: rotate(-135deg);
                    margin: 3px 0 0
                }

                .ss-main .ss-single-selected .ss-arrow span.arrow-down {
                    transform: rotate(45deg);
                    margin: -3px 0 0
                }

    .ss-main .ss-multi-selected {
        display: flex;
        flex-direction: row;
        cursor: pointer;
        min-height: 30px;
        width: 100%;
        padding: 0 0 0 3px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        background-color: #fff;
        outline: 0;
        box-sizing: border-box;
        transition: background-color .3s
    }

        .ss-main .ss-multi-selected.ss-disabled {
            background-color: #dcdee2;
            cursor: not-allowed
        }

            .ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled {
                color: #666
            }

            .ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete {
                cursor: not-allowed
            }

        .ss-main .ss-multi-selected.ss-open-above {
            border-top-left-radius: 0;
            border-top-right-radius: 0
        }

        .ss-main .ss-multi-selected.ss-open-below {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0
        }

        .ss-main .ss-multi-selected .ss-values {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            flex: 1 1 100%;
            width: calc(100% - 30px)
        }

            .ss-main .ss-multi-selected .ss-values .ss-disabled {
                display: flex;
                padding: 4px 5px;
                margin: 2px 0;
                line-height: 1em;
                align-items: center;
                width: 100%;
                color: #dcdee2;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap
            }

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes scaleOut {
    0% {
        transform: scale(1);
        opacity: 1
    }

    to {
        transform: scale(0);
        opacity: 0
    }
}

.ss-main .ss-multi-selected .ss-values .ss-value {
    display: flex;
    user-select: none;
    align-items: center;
    font-size: 12px;
    padding: 3px 5px;
    margin: 3px 5px 3px 0;
    color: #fff;
    background-color: #5897fb;
    border-radius: 4px;
    animation-name: scaleIn;
    animation-duration: .2s;
    animation-timing-function: ease-out;
    animation-fill-mode: both
}

    .ss-main .ss-multi-selected .ss-values .ss-value.ss-out {
        animation-name: scaleOut;
        animation-duration: .2s;
        animation-timing-function: ease-out
    }

    .ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {
        margin: 0 0 0 5px;
        cursor: pointer
    }

.ss-main .ss-multi-selected .ss-add {
    display: flex;
    flex: 0 1 3px;
    margin: 14px 12px 0 5px;
}

    .ss-main .ss-multi-selected .ss-add .ss-plus {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #666;
        position: relative;
        height: 10px;
        width: 2px;
        transition: transform .2s
    }

        .ss-main .ss-multi-selected .ss-add .ss-plus:after {
            background: #666;
            content: "";
            position: absolute;
            height: 2px;
            width: 10px;
            left: -4px;
            top: 4px
        }

        .ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross {
            transform: rotate(45deg)
        }

.ss-main .ss-content {
    position: absolute;
    width: 100%;
    margin: -1px 0 0;
    box-sizing: border-box;
    border: 1px solid #dcdee2;
    z-index: 1010;
    background-color: #fff;
    transform-origin: center top;
    transition: transform .2s,opacity .2s;
    opacity: 0;
    transform: scaleY(0);
    max-height: 300px;
}

    .ss-main .ss-content.ss-open {
        display: block;
        opacity: 1;
        transform: scaleY(1);
        overflow: auto;
    max-height: 200px;
    }

    .ss-main .ss-content .ss-search {
        display: flex;
        flex-direction: row;
        padding: 8px 10px
    }

        .ss-main .ss-content .ss-search.ss-hide, .ss-main .ss-content .ss-search.ss-hide input {
            height: 0;
            opacity: 0;
            padding: 0;
            margin: 0
        }

        .ss-main .ss-content .ss-search input {
            display: inline-flex;
            font-size: inherit;
            font-family: inherit;
            line-height: inherit;
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
            height: 30px;
            padding: 5px 10px;
            margin: 0;
            border: 1px solid #dcdee2;
            border-radius: 4px;
            background-color: #fff;
            outline: 0;
            text-align: left;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -webkit-appearance: textfield
        }

            .ss-main .ss-content .ss-search input::placeholder {
                color: #b3b3b3
            }

            .ss-main .ss-content .ss-search input:focus {
                box-shadow: 0 0 5px #5897fb
            }

        .ss-main .ss-content .ss-search .ss-addable {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 22px;
            font-weight: 700;
            flex: 0 0 30px;
            height: 30px;
            margin: 0 0 0 8px;
            border: 1px solid #dcdee2;
            border-radius: 4px;
            box-sizing: border-box
        }

    .ss-main .ss-content .ss-addable {
        padding-top: 0
    }

    .ss-main .ss-content .ss-list {
        /* max-height: 200px;
        overflow-x: hidden;
        overflow-y: auto;
        text-align: left */

        max-height: 180px;
        padding-bottom: 3px;
        overflow-x: hidden;
        overflow-y: auto;
    }

        .ss-main .ss-content .ss-list .ss-optgroup .ss-optgroup-label {
            padding: 6px 10px;
            font-weight: 700
        }

        .ss-main .ss-content .ss-list .ss-optgroup .ss-option {
            padding: 6px 6px 6px 25px
        }

        .ss-main .ss-content .ss-list .ss-option {
            padding: 6px 10px;
            cursor: pointer;
            user-select: none
        }

            .ss-main .ss-content .ss-list .ss-option * {
                display: inline-block
            }

            .ss-main .ss-content .ss-list .ss-option.ss-highlighted, .ss-main .ss-content .ss-list .ss-option:hover {
                color: #fff;
                background-color: #5897fb
            }

            .ss-main .ss-content .ss-list .ss-option.ss-disabled {
                cursor: default;
                color: #dcdee2;
                background-color: #fff
            }

            .ss-main .ss-content .ss-list .ss-option.ss-hide {
                display: none
            }

            .ss-main .ss-content .ss-list .ss-option .ss-search-highlight {
                background-color: #fff70062
            }