﻿.mySelect {
    position: relative;
}

    .mySelect .inputWrap {
        width: 100%;
        min-height: 35px;
        border: 1px solid #ccc;
        border-radius: 3px;
        position: relative;
        cursor: pointer;
        background-color: #fff;
    }

    .mySelect ul {
        padding: 0 5px;
        margin: 0;
        padding-right: 35px;
    }

    .mySelect ul, li {
        list-style: none;
    }

    .mySelect li {
        display: inline-block;
        background: #eaeaea;
        padding: 5px;
        margin: 5px 5px 5px 0;
        border-radius: 5px;
    }

    .mySelect .fa-close {
        cursor: pointer;
    }

        .mySelect .fa-close:hover {
            color: #237eff;
        }

    .mySelect .mySelect-option {
        width: 100%;
        border: 1px solid #ccc;
        max-height: 200px;
        overflow-y: scroll;
        position: absolute;
        height: 0;
        opacity: 0;
        background-color: #fff;
        z-index:999;
    }

        .mySelect .mySelect-option .mySelect-option-item { 
            line-height: 35px;
            padding-left:6px;
        }
        .mySelect .mySelect-option .mySelect-option-cb {
            position: relative;
            top: 2px;
            left: -5px;
        }
.mySelect .inputWrap > i {
    position: absolute;
    padding: 13px;
    right: 0;
    top: 0;
}

.mySelect-option div {
    cursor: pointer;
    border-bottom: 1px solid #e7e7e7;
    margin: 5px;
}

    .mySelect-option div i {
        float: right;
        color: #ffffff;
    }

    .mySelect-option div.selected {
        background: #237eff;
        color: #ffffff;
        border-radius: 5px;
    }

    .mySelect-option div:hover {
        /*background: #9ec6ff;*/
        color: #9ec6ff;
        border-bottom: 1px solid #9ec6ff;
    }
