.money-pot-image-field .input-initial_image input[type="file"],
.money-pot-image-field input[type="file"][name$="[image]"] {
	display: none;
}

.money-pot-image-field .input-initial_image svg {
	max-width: 335px;
	width: 100%;
	height: 100%;
	padding: 24px 0 14px;
	cursor: pointer;
}

.money-pot-image-field .input-initial_image .input-box {
	align-items: center;
	gap: 10px;
}

/* The picker's two actions (modify / delete) are a <label> and a <button> that
   each size to their own text. Grouping them in a stretch column makes both take
   the width of the wider one, so they read as one consistent pair. */
.money-pot-image-field .input-initial_image .input-box__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.money-pot-image-field .input-initial_image .help-text {
	text-align: center;
}

@media screen and (min-width: 720px) {

	#money-pot-image-popup,
	#preview-popup {
		min-width: 720px;
	}

	#money-pot-image-popup {
		width: 50%;
		top: 50vh;

		.modal__content {
			max-height: 80vh;
		}
	}
}