.select-container {
    position: relative;
}

.custom-select-wrapper {
    width: 100%;
}

.custom-select {
    background: #FBFBFB;
    border: 1px solid #E7EAF1;
    width: 100%;
    border-radius: 10px;
    text-align: left;
    padding: 17px 16px;
}

.custom-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    background-color: white;
    z-index: 1;
    display: none;
    max-height: 288px;
    overflow-y: scroll;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .custom-select-options {
        max-height: 288px;
    }
}

.custom-select-options.active {
    display: block;
}

.custom-select-option {
    cursor: pointer;
    min-height: 18px;
    padding: 0 10px;
    line-height: 24px;
    font-size: 14px;
    letter-spacing: 0.04em;
    color: black;
    opacity: 0.8;
    text-align: left;
}
@media screen and (min-width: 992px) {
    .custom-select-option:hover {
        background-color: #f1f1f1;
    }
}

.custom-select:before {
    content: '';
    background-color: transparent;
    width: 24px;
    height: 24px;
    right: 16px;
    display: block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6" fill="none"><g clip-path="url(%23clip0_1_905)"><path d="M6.3957 5.25703L9.5832 2.06953C9.80352 1.84922 9.80352 1.49297 9.5832 1.275L9.05352 0.745313C8.8332 0.525 8.47695 0.525 8.25898 0.745313L5.99961 3.00469L3.74023 0.745313C3.51992 0.525 3.16367 0.525 2.9457 0.745313L2.41133 1.27266C2.19102 1.49297 2.19102 1.84922 2.41133 2.06719L5.59883 5.25469C5.81914 5.47734 6.17539 5.47734 6.3957 5.25703Z" fill="%239797B2"/></g><defs><clipPath id="clip0_1_905"><rect width="6" height="12" fill="white" transform="matrix(-4.37114e-08 1 1 4.37114e-08 0 0)"/></clipPath></defs></svg>');
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.custom-select {
    position: relative;
}