:root {
	--btn-confirm-color: #4caf50;
	--btn-danger-color: #f44336;
}

.form-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 20px;
}

.form-area .row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.form-area input {
	width: 120px;
	padding: 8px 12px;
}

.form-area select,
button {
	padding: 8px 12px;
	border-radius: 4px;
	border: 1px solid #ccc;
}

.confirm-btn {
	background-color: var(--btn-confirm-color);
	color: white;
	border: none;
	cursor: pointer;
}

.danger-btn {
	background-color: var(--btn-danger-color);
	color: white;
	border: none;
	cursor: pointer;
}

.circle-btn,
.square-btn {
	background-color: #f1f1f1;
	border: 2px solid #333;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.circle-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	font-size: 24px;
	font-weight: bold;
}

.square-btn {
	width: 80px;
	height: 50px;
	font-size: 18px;
}

.circle-btn:hover,
.square-btn:hover {
	background-color: var(--btn-confirm-color);
	color: white;
}