body.syngli-confirm_open {
	overflow: hidden;
}

.syngli-confirm_modal {
	position: fixed;
	inset: 0;
	z-index: 13050;
}

.syngli-confirm_backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.35);
}

.syngli-confirm_dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(420px, calc(100vw - 32px));
	padding: 18px;
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	background: #ffffff;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
	transform: translate(-50%, -50%);
}

.syngli-confirm_title {
	color: #333333;
	font-family: source_sans_prosemibold, serif;
	font-size: 18px;
	line-height: 24px;
}

.syngli-confirm_message {
	margin-top: 10px;
	color: #555555;
	font-size: 14px;
	line-height: 22px;
}

.syngli-confirm_actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

.syngli-confirm_btn {
	appearance: none;
	border: 1px solid #c8c8c8;
	border-radius: 4px;
	background: #ffffff;
	color: #444444;
	font-family: source_sans_proregular, serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	padding: 8px 14px;
	cursor: pointer;
}

.syngli-confirm_btn:hover,
.syngli-confirm_btn:focus {
	background: #f4f4f4;
	color: #222222;
	outline: none;
}

.syngli-confirm_btn--primary {
	background: #4f7ca7;
	border-color: #4f7ca7;
	color: #fff;
}

.syngli-confirm_btn--primary:hover,
.syngli-confirm_btn--primary:focus {
	background: #3e6489;
	border-color: #3e6489;
	color: #fff;
}

@media only screen and (max-width: 480px) {
	.syngli-confirm_dialog {
		width: calc(100vw - 24px);
		padding: 16px;
	}

	.syngli-confirm_actions {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
}