.neu-dropdown {
    min-width: 200px;
    width: 100%;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
}

.neu-dropdown::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    box-shadow: 3px 3px 20px rgba(36, 65, 93, 0.3);
    border-radius: 8px;
    z-index: 0;
}

.neu-dropdown:hover {
    background-image: linear-gradient(135deg, hsl(231, 16%, 89%) -50%, hsl(225, 18%, 94%) 120%);
}

.neu-dropdown.active {
    box-shadow: 1px 1px 12px rgba(88, 108, 138, 0.5) inset;
    padding: unset;
    border-bottom: 1px solid rgba(87, 95, 107, 0.137);
}

.neu-dropdown.active::before {
    box-shadow: -3px -3px 13px #FFF inset;
}

.neu-dropdown.active, .neu-dropdown.active::before {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}

.neu-dropdown > .neu-dropdown-options {
    display: none;
}

.neu-dropdown.active > .neu-dropdown-options {
    display: block;
}

.neu-dropdown.active .neu-dropdown-title span,
.neu-dropdown.active .neu-dropdown-title i {
    color: #8B278F;
}

.neu-dropdown.active .neu-dropdown-title span.content {
    font-weight: 500;
} 

.neu-dropdown-title {
    width: 100%;
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.neu-dropdown-options {
    width: auto;
    height: auto;
    max-height: 200px;
    overflow-y: auto;
    position: fixed;
    z-index: 5;
    background-image: linear-gradient(135deg, #E5E6EC -50%, #F2F3F6 120%);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 1px -5px 12px -3px rgba(88, 108, 138, 0.5) inset;
}

.fa-caret-down,
.fa-caret-up {
    margin-left: 30px;
}
