/* Form tweaks on top of main.css */

/* main.css removes the native arrow from every select (appearance: none),
   which makes drop downs look like text boxes. Draw a chevron instead. */
form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a8c8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85em center;
	background-size: 0.75em auto;
	padding-right: 2.25em !important;
	cursor: pointer;
}
	/* main.css resets the background on focus, keep the chevron */
	form select:focus {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a8c8a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 0.85em center;
		background-size: 0.75em auto;
	}

/* A drop down with a small square button next to it (e.g. add location) */
.select-with-add {
	display: flex;
	align-items: stretch;
	gap: 0.5em;
	margin-bottom: 0.75em;
}
	.select-with-add select {
		flex: 1;
		min-width: 0;
	}
	.select-with-add .add-button,
	.select-with-add input[type="button"].add-button {
		flex: none;
		/* select height = 1.25em line + 0.5em padding + 2px border (main.css) */
		width: calc(1.75em + 2px);
		padding: 0;
		font-size: 1em;
		line-height: 1;
		border-radius: 0.35em;
	}