.drop-menu {
    position: relative;
    cursor: default;
}

    .drop-menu > .drop-list {
        width: 100%;
        display: none;
        position: absolute;
        overflow: hidden;
        border-radius: 8px;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 4px 6px 0px;
        transition: .2s cubic-bezier(0.4,0,0.2,1);
        top: 56px;
        left: 0px;
        z-index: 9;
        padding: 8px;
    }

        .drop-menu > .drop-list.show {
            display: block;
        }

        .drop-menu > .drop-list > li {
            padding: 10px;
            border-radius: 8px;
            transition: all .25s;
            margin: 1px;
        }
            .drop-menu > .drop-list > li.active {
                background-color: #e8f0f7;
            }
            .drop-menu > .drop-list > li:hover {
                background-color: #e8f0f7aa;
            }

    .drop-menu > .drop-bar {
        display: flex;
        justify-content: space-between;
        font-weight: bold;
    }

        .drop-menu > .drop-bar::after {
            display: block;
            content: '\f107';
            font-family: 'FontAwesome';
            transition: transform 0.2s ease;
        }

        .drop-menu > .drop-bar.active::after {
            transform: rotate(180deg);
        }

.drop-primary {
    background-color: #fff;
    border-radius: 8px;
    transition: all 350ms cubic-bezier(0.33,1,0.68,1);
    word-break: keep-all;
    box-shadow: rgba(0,0,0,.08) 0px 4px 6px 0px,rgba(0,0,0,.05) 0px 0px 0px 1px;
    padding: 10px 16px;
    text-align: center;
    color: #243042;
}

    .drop-primary:hover {
        box-shadow: rgba(23,25,29,.2) 0px 16px 16px -16px,rgb(23 25 29/3%) 0px 14px 20px 0px,rgb(23 25 29/4%) 0px 0px 0px 1px;
    }
.drop-bar.error {
    box-shadow: rgb(255 25 29 / 40%) 0px 14px 16px -16px, rgb(255 25 29 / 0%) 0px 10px 20px 0px, rgb(255 25 29 / 64%) 0px 0px 0px 1px;
}
    .drop-bar.error:hover {
        box-shadow: rgba(255,25,29,.2) 0px 16px 16px -16px,rgb(255 25 29/3%) 0px 14px 20px 0px,rgb(255 25 29/4%) 0px 0px 0px 1px;
    }
.clear-btn {
    position: absolute;
    right: 36px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background-color: #ccc;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.3s;
    pointer-events: none;
}
    .clear-btn::before {
        content: '\f00d';
        font-family: 'FontAwesome';
    }
    .clear-btn:hover {
        background-color: #999;
    }
.drop-bar.has-value:hover .clear-btn,
.drop-bar.has-value.active .clear-btn {
    opacity: 1;
    pointer-events: visible;
}