function addSelectArrows() {
	const selects = document.querySelectorAll('select.styled-select')
	
	selects.forEach(select => {
		if (select.parentElement.classList.contains('select-wrapper')) return
		
		select.style.paddingRight = '1.5rem'
		
		const wrapper = document.createElement('div')
		wrapper.className = 'select-wrapper'
		wrapper.style.position = 'relative'
		wrapper.style.display = 'inline-block'
		
		select.parentNode.insertBefore(wrapper, select)
		wrapper.appendChild(select)
		
		const arrow = document.createElement('div')
		arrow.innerHTML = `<svg width="16px" height="16px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 13.5L15.5 17L12 13.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M15.5 17V11C15.5 8.79086 13.7091 7 11.5 7H4.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>`
		arrow.style.position = 'absolute'
		arrow.style.right = '5px'
		arrow.style.top = '56%'
		arrow.style.transform = 'translateY(-50%)'
		arrow.style.pointerEvents = 'none'
		
		wrapper.appendChild(arrow)
	})
}