.select2-hidden-accessible{
    display:none;
    visibility: hidden;
}
.#{$css-prefix}-select2 {
    display: inline-block;
    input[type=text]::-ms-clear {  display: none; width : 0; height: 0; }
    input[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration { display: none; }
}

.select2-container{
    display: inline-block;
    margin:0 -1px 0 -1px;
    border-left: 1px solid #ced4d6;
    border-right: 1px solid #ced4d6;
    box-sizing: content-box;
    vertical-align: middle;
    min-height: 30px;
    .selection{
        display: block;  
        min-height: 30px;
        .select2-selection{            
            display: block;    
            .select2-selection__rendered{
                display: block;                
                .select2-selection__placeholder{
                    color:#999;  
                }
            }
            .select2-selection__arrow{
                display: inline-block;
            }
        }
        .select2-selection--single{
            background-color: #f1f6f8;
            outline: none;
            border:0;
            min-height: 30px;            
            @include border-radius(0);

            .select2-selection__rendered{
                cursor: pointer;
                min-height: 30px;
                display: block;
                margin-right: 31px;
                padding: 1px 0 0 9px;
                color: #33393b;
                margin-bottom: -30px;
                font-size:13px;
                .select2-selection__clear{
                    display:inline-block;
                    height: 30px;
                    width:30px;
                    color: #6e7272;
                    background-color: #f1f6f8;
                    float:right;
                    font-size: 16px;
                    cursor: pointer;
                    margin-top: -4px;
                    padding-top: 4px;
                    text-align: center;                    
                }
                &:after{
                    content:'';
                    display: block;
                    clear:both;
                }
            }
            .select2-selection__arrow{
                float: right;
                display: inline-block;
                background-color: #fff;
                width: 31px;
                border-left: 1px solid #ced4d6;
                height: 30px;
                top: 0;
                right: 0;
                b{
                    background:transparent;
                    color: #999;
                    border: 0;
                    &:before{
                        content:'\f107';
                        font-family: 'FontAwesome';
                        font-size: 18px;
                        position: relative;
                        left: -1px;
                        top: -11px;               
                    }
                    &:hover{
                        color: #555;
                    }
                }
            }
            &:after{
                content:'';
                display: block;
                clear:both;
            }
        }

        .select2-selection--multiple{
            z-index:300;
            line-height: 1px;
            border: 0;
            min-height: 30px;
            .select2-selection__rendered{                
                display: block;  
                min-height: 30px;  
                padding: 0px 0 0px 2px;
                .select2-selection__placeholder{
                    padding-left: 8px; 
                }
                .select2-selection__clear{
                    display:none;
                }
                
                input{
                    padding: 3px 6px;
                    margin-top: 0px !important;
                    display:inline-block;                    
                    background-color: transparent;
                    min-width: 30px;
                    line-height: 1px!important;
                }
                li{
                    margin:0;
                    outline: none;

                    &.select2-selection__choice{
                        line-height: 1px;
                        display:inline-block;
                        background-color: $reon-theme-color;
                        color:#fff;
                        float: left;
                        padding: 0px 9px;
                        margin-right: 2px;
                        margin-top: 2px;
                        margin-bottom: 0px;
                        border: 0;
                        @include border-radius(0);
                        .select2-selection__choice__remove{
                            display:inline-block;
                            padding-right: 4px;
                            cursor: pointer;
                            color:#fff;
                            vertical-align: 0px;
                            &:hover{
                                @include opacity(0.7);
                            }
                        }
                    }
                }
            }
        }

    }

    &.select2-container--open{
        .select2-selection--single{
            background-color: #fff;

            .select2-selection__rendered{
                .select2-selection__clear{
                    background-color: #fff;
                }
            }
            .select2-selection__arrow{
                b{
                    &:before{
                        content:'\f106';
                    }
                }  
            }
        }


    }



}   

.#{$css-prefix}-select2 {
    > .select2-container{
        border:0;
    }
}


&.select2-dropdown{
    display:block;
    z-index: 999999!important;
    left:0px;
    @include border-radius(0);
    @include box-shadow(0px, 5px, 25px, rgba(0,0,0,0.1));
    background-color: #fff;
    border: 1px solid #ced4d6;
    .select2-search{
        display:block;
        border-bottom: 1px solid #ced4d6;
        height: 32px;
        input{
            display:block;
            background-color: #fff;
            border-width:0;
            width:100%;
            min-width: 50px;
        }
        &:after{
            content:'\f002';
            font-family: 'FontAwesome';
            font-size: 12px;
            position: absolute;
            top: 3px;
            right: 8px;
            position: absolute;
            background-color: #fff;
        }

        &.select2-search--hide{
            display: none;
        }
    }
    .select2-results{
        display:block;
        ul.select2-results__options{
            display:block;
            padding:3px 0;
            li{
                outline: none!important;
                display: block;
                padding: 3px 13px;;
                cursor:pointer;
                &[aria-selected='true']{
                    background-color: #f7f7f7;

                }

                &.select2-results__option--highlighted{
                    color:#fff;
                    background-color: #00a0d2;

                }
                &.select2-results__message{
                    display:block;
                    color:#999;
                    cursor:initial;
                } 
            }



        }
        > ul.select2-results__options{
            max-height:300px;
        }
        .select2-results__option[role=group]{
            padding:0;
            .select2-results__group{
                font-weight: 600;
                padding: 3px 13px;
                color: #8db4c3;
            }
            .select2-results__options--nested{
                padding:0;
                .select2-results__option{
                    padding: 3px 13px;;
                }
            }
        }
    }



    .select2-results__option[data-selected=true]{
        background-color: #f7f7f7;
        outline: none;
    }
}

.#{$css-prefix}-columns{
    .#{$css-prefix}-select2 {
        width: 100%;
        display: block;
    }
}