.drop {
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.drop.open {
    z-index: 100;
}
.drop.open .drop-screen {
    z-index: 100;
    display: block;
}
.drop.open .drop-options {
    z-index: 200;
    max-height: 200px;
}
.drop.open .drop-display {
    z-index: 200;
    border-color: #1c1c1c;
}
.drop select {
    display: none;
}

.drop-options a{
    text-decoration: none;
}

.drop .drop-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000;
    top: 0px;
    left: 0px;
    opacity: 0;
    display: none;
    z-index: 1;
}

.drop .drop-display {
    position: relative;
    padding: 0px 20px 5px 5px;
    border: 2px solid #0D0D0D;
    width: 92%;
    background: #333333;
    z-index: 1;
    margin: 0px;
    font-size: 16px;
    min-height: 58px;
}
.drop .drop-display:hover:after {
    opacity: 0.75;
}
.drop .drop-display:after {
    font-family: 'Material Icons';
    content: "\e5c6";
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 24px;
    color: #151515;
}
.drop .drop-display .item {
    position: relative;
    display: inline-block;
    border: 2px solid #0D0D0D;
    margin: 5px 5px -4px 0px;
    padding: 0px 25px 0px 10px;
    overflow: hidden;
    height: 40px;
    line-height: 36px;
    cursor: pointer;
}
.drop .drop-display .item .btnclose {
    color: #151515;
    position: absolute;
    font-size: 16px;
    right: 5px;
    top: 10px;
    cursor: pointer;
}
.drop .drop-display .item .btnclose:hover {
    opacity: 0.75;
}
.drop .drop-display .item.remove {
    -webkit-animation: removeSelected 0.2s, hide 1s infinite;
    animation: removeSelected 0.2s, hide 1s infinite;
    -webkit-animation-delay: 0s, 0.2s;
    animation-delay: 0s, 0.2s;
}
.drop .drop-display .item.add {
    -webkit-animation: addSelected 0.2s;
    animation: addSelected 0.2s;
}
.drop .drop-display .item.hide {
    display: none;
}
.drop .drop-options {
    background: #444;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    position: absolute;
    width: 92%;
    max-height: 0px;
    overflow-y: auto;
    transition: all 0.25s linear;
    z-index: 1;
}
.drop .drop-options a {
    display: block;
    height: 40px;
    line-height: 40px;
    padding: 0px 20px;
    color: white;
    position: relative;
    max-height: 40px;
    transition: all 1s;
    overflow: hidden;
}
.drop .drop-search {
    width: 100%;
    box-sizing: border-box;
    background: #222;
    border: 1px solid #0D0D0D;
    padding: 8px 12px;
    font-size: 16px;
    color: #fff;
    outline: none;
    margin-bottom: 5px;
    position: sticky;
    top: 0;
    z-index: 5;
}

.drop .drop-search::placeholder {
    color: #aaa;
}

.drop .drop-search:focus {
    border-color: #1c1c1c;
    background: #2a2a2a;
}


.drop .drop-options a:hover {
    background: #181818;
    cursor: pointer;
}
.drop .drop-options a.remove {
    -webkit-animation: removeOption 0.2s;
    animation: removeOption 0.2s;
    max-height: 0px;
}
.drop .drop-options a.add {
    -webkit-animation: addOption 0.2s;
    animation: addOption 0.2s;
}
.drop .drop-options a.hide {
    display: none;
}

@-webkit-keyframes pop {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pop {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes removeOption {
    from {
        max-height: 40px;
    }
    to {
        max-height: 0px;
    }
}
@keyframes removeOption {
    from {
        max-height: 40px;
    }
    to {
        max-height: 0px;
    }
}
@-webkit-keyframes addOption {
    from {
        max-height: 0px;
    }
    to {
        max-height: 40px;
    }
}
@keyframes addOption {
    from {
        max-height: 0px;
    }
    to {
        max-height: 40px;
    }
}
@-webkit-keyframes removeSelected {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@keyframes removeSelected {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    to {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}
@-webkit-keyframes addSelected {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes addSelected {
    from {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes hide {
    from, to {
        max-height: 0px;
        max-width: 0px;
        padding: 0px;
        margin: 0px;
        border-width: 0px;
    }
}
@keyframes hide {
    from, to {
        max-height: 0px;
        max-width: 0px;
        padding: 0px;
        margin: 0px;
        border-width: 0px;
    }
}