.dime-reservationagent {
	max-width: 720px;
}

.dime-reservationagent__form {
	display: grid;
	gap: 16px;
}

.dime-reservationagent__form label {
	display: grid;
	gap: 6px;
	font-weight: 600;
}

.dime-reservationagent__form input,
.dime-reservationagent__form select {
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	border: 1px solid #c7c7c7;
	border-radius: 4px;
	padding: 10px 12px;
	font: inherit;
}

.dime-reservationagent__form button {
	width: fit-content;
	min-height: 44px;
	border: 0;
	border-radius: 4px;
	background: #1f6f55;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 10px 18px;
}

.dime-reservationagent__form button:hover,
.dime-reservationagent__form button:focus {
	background: #185944;
}

.dime-reservationagent__notice {
	border-left: 4px solid #777;
	margin-bottom: 16px;
	padding: 12px 14px;
}

.dime-reservationagent__notice--success {
	background: #edf8f2;
	border-color: #1f6f55;
}

.dime-reservationagent__notice--error {
	background: #fff0f0;
	border-color: #b42318;
}

@media (min-width: 700px) {
	.dime-reservationagent__form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dime-reservationagent__form button {
		grid-column: 1 / -1;
	}
}