body{
    background-color: #aaa;
    padding: 150px;
}
*{
    margin:0;
    padding: 0;
    box-sizing: border-box !important;
}
.select3{
    position: relative;
    >.input {
        width: 250px;
        padding:  12px 15px;
        border-radius: 10px;
        background-color: #fff;
        
        font-size: 13px;
        cursor: pointer;
        position: relative;
        >i{
            position: absolute;
            top: 50%;
            right:8px;
            transform: translateY(-50%);
            font-size: 12px;
        }
    }
    >.select{
        display: none;
        position: absolute;
        top: 44px;;
        left:0;
        width:250px;
        padding: 16px 10px;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box !important;
        overflow: hidden;
        animation: fadein .085s linear;
        >input[type='text']{
            outline: none;
            border:1px #999 solid;
            width: 100%;
            border-radius: 4px;
            height: 31px;
            padding: 12px ;
             margin-bottom: 3px;

        }
        >.options{
            overflow-y: scroll;
            max-height: 205px;
            height:auto;
            &::-webkit-scrollbar {
                width: 7px;
           }
            &::-webkit-scrollbar-track {
                background-color: transparent;
                background-size: 10px 10px;
                }
            &::-webkit-scrollbar-thumb {
                background: #aaa;
                border-radius: 5px;
                }
            
           
            >label{
                width:100%;
                display: block;
                padding: 10px;
                cursor: pointer;
                border-bottom: 1px #ccc solid;
                transition: .2s;
                &:hover{
                    transform: scale(1.05);
                }
                &.check{
                    background-color:#5BC0DE;
                    color:#fff;
                    animation: check .1s linear;
                   
                }
            }
        }
        
    }
}
@keyframes fadein {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes check {
    0%{
        transform: translateX(0px);
        background-color:rgba(91, 192, 222,0);
    }
    0%{
        transform: translateX(180px);
    }
    100%{
        transform: translateX(0px);
        background-color:rgba(91, 192, 222,1);
    }
}