.custom-select {
    position: relative;
    height: 30px;
    margin: 6px auto;
    width: 100%;    
}

select {
    font-family: "Poppins", sans-serif;
    width: 100%;
    height: 30px;
    /*box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);*/
    font-size: 12pt;
    padding: 6px;
    background: none;
    color: #333;
    border: 0;
}

.custom-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    display: block;
    background: #f3f3f3;
    pointer-events: none;
}

    .custom-arrow:before,
    .custom-arrow:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        --size: 0.6em;
        left: 60%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .custom-arrow:before {
        border-left: var(--size) solid transparent;
        border-right: var(--size) solid transparent;
        border-bottom: var(--size) solid rgba(0,0,0,.5);
        top: 30%
    }

    .custom-arrow:after {
        border-left: var(--size) solid transparent;
        border-right: var(--size) solid transparent;
        border-top: var(--size) solid rgba(0,0,0,.5);
        top: 70%;
    }