.mobit-filter-wrapper {
    background: #2d2d48;
    padding: 40px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* GENERAL SELECT STYLE */
.mobit-filter-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background: #3a384f;
    color: #ffffff;
    border: 1px solid #555268;
    padding: 14px 18px;
    border-radius: 12px;

    min-width: 280px;
    font-size: 17px;

    cursor: pointer;
    position: relative;

    transition: 0.2s;
}

/* PLACEHOLDER COLOR */
.mobit-filter-wrapper select option:first-child {
    color: #c8c8c8;
}

/* HOVER */
.mobit-filter-wrapper select:hover {
    border-color: #7874a3;
}

/* DISABLED */
.mobit-filter-wrapper select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* CUSTOM ARROW */
.mobit-filter-wrapper select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='14' viewBox='0 0 20 20' width='14' xmlns='http://www.w3.org/2000/svg'><path d='M5.516 7.548l4.484 4.48 4.484-4.48L16 8.516l-6 6-6-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
}

/* BUTTON */
#mobit-filter-button {
    background: #3a78ff;
    color: #ffffff;
    padding: 16px 28px;
    font-size: 17px;

    border: none;
    border-radius: 12px;

    cursor: pointer;
    min-width: 220px;

    transition: 0.25s;
}

/* DISABLED BUTTON */
#mobit-filter-button:disabled {
    background: #8886a5;
    cursor: not-allowed;
}

/* BUTTON HOVER */
#mobit-filter-button:hover:not(:disabled) {
    background: #1f64ff;
}