body {
	-webkit-tap-highlight-color: transparent
}

.dialog-contact {
	position: relative;
	margin: auto;
	padding: 20px;
	border: none;
	border-radius: 6px;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	box-sizing: content-box;
}

@media (max-width: 575px) {
	.dialog-contact {
		width: 80%
	}
}

@media (min-width: 576px) {
	.dialog-contact {
		width: 500px
	}
}

.dialog-contact::backdrop {
	background-color: rgba(0, 0, 0, 0.3)
}

.dialog-contact .dialog-modal-content {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.dialog-contact .dialog-modal-header {
	padding-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e5e5e5;
	flex-wrap: wrap;
	justify-content: space-around;
}

.dialog-contact .dialog-modal-header svg {
	margin: 10px;
	stroke: #737373
}

.dialog-contact .dialog-modal-title {
	margin: 0;
	padding: 0;
	display: block;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 18px;
	line-height: 28px;
	color: #404040;
	font-weight: 600;
	text-align: center;
}

.dialog-contact .dialog-button-close {
	padding: 0;
	height: 32px;
	aspect-ratio: 1;
	background-color: #f5f5f5;
	border: none;
	border-radius: 50%;
	outline: none;
	cursor: pointer
}

.dialog-contact .dialog-button-close:enabled:hover {
	background-color: #e5e5e5
}

.dialog-contact .dialog-button-close:enabled:hover svg {
	stroke: #404040
}

.dialog-contact .dialog-button-close:disabled {
	opacity: 0.5;
	cursor: not-allowed
}

.dialog-contact .dialog-modal-body {
	/*max-height: 50vh;*/
	padding-right: 4px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	overflow: hidden auto;
	scrollbar-width: thin;
	scrollbar-color: #b5b5b5 transparent
}

.dialog-contact .dialog-modal-body form {
	margin: 0;
	display: block
}

.dialog-contact .dialog-modal-contact {
	display: flex;
	flex-direction: column;
	gap: 20px
}

.dialog-contact :is(.dialog-contact-multiple, .dialog-contact-unique, .dialog-contact-field) {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px
}

.dialog-contact .dialog-contact-items {
	/*max-height: 140px;*/
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background-color: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	overflow: hidden auto;
	scrollbar-width: thin;
	scrollbar-color: #b5b5b5 transparent
}

.dialog-contact .dialog-contact-items::-webkit-scrollbar {
	width: 6px;
	height: 6px
}

.dialog-contact .dialog-contact-items::-webkit-scrollbar-track {
	background-color: transparent
}

.dialog-contact .dialog-contact-items::-webkit-scrollbar-thumb {
	background-color: #b5b5b5;
	border: none;
	border-radius: 25px
}

.dialog-contact .dialog-contact-item {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px
}

.dialog-contact .dialog-contact-item input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	margin: 0;
	color: #1c7bb5;
	width: 20px;
	height: 20px;
	border: 2px solid #1c7bb5;
	border-radius: 6px;
	outline: none;
	display: inline-grid;
	place-content: center;
	cursor: pointer
}

.dialog-contact .dialog-contact-item input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	-webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(0);
	transform-origin: bottom left;
	background-color: #1c7bb5;
}

.dialog-contact .dialog-contact-item input[type="checkbox"]:checked::before {
	transform: scale(1)
}

.dialog-contact .dialog-contact-item input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	margin: 0;
	color: #1c7bb5;
	width: 20px;
	height: 20px;
	border: 2px solid #1c7bb5;
	border-radius: 50%;
	outline: none;
	display: inline-grid;
	place-content: center;
	cursor: pointer
}

.dialog-contact .dialog-contact-item input[type="radio"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	transform: scale(0);
	background-color: #1c7bb5;
}

.dialog-contact .dialog-contact-item input[type="radio"]:checked::before {
	transform: scale(1)
}

.dialog-contact label {
	display: block;
	flex: 1;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 14px;
	line-height: 20px;
	color: #404040;
	font-weight: 600
}

.dialog-contact label[for] {
	cursor: pointer
}

.dialog-contact label :is(b, strong) {
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 14px;
	line-height: 20px;
	color: #404040;
	font-weight: 700;
}

.dialog-contact .dialog-contact-field input:is([type="text"], [type="email"]) {
	padding: 8px;
	display: block;
	background-color: #fafafa;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	outline: none;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 14px;
	line-height: 20px;
	color: #a3a3a3
}

.dialog-contact .dialog-contact-field input:is([type="text"], [type="email"])::placeholder {
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 14px;
	line-height: 20px;
	color: #a3a3a3
}

.dialog-contact .dialog-alert-error {
	display: block;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: #dc2626
}

.dialog-contact .dialog-modal-footer {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	gap: 12px
}

.dialog-contact .dialog-modal-footer .dialog-button-contact {
	padding: 8px 12px;
	display: block;
	background-color: #1c7bb5;
	border: 1px solid #1c7bb5;
	border-radius: 6px;
	outline: none;
	cursor: pointer
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:disabled {
	opacity: 0.5;
	cursor: not-allowed
}

.dialog-contact .dialog-modal-footer .dialog-button-contact .dialog-button-contact-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:enabled .dialog-button-contact-image-send {
	display: block
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:disabled .dialog-button-contact-image-send {
	display: none
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:enabled .dialog-button-contact-image-load {
	display: none
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:disabled .dialog-button-contact-image-load {
	display: block
}

.dialog-contact .dialog-modal-footer .dialog-button-contact svg {
	height: 16px;
	display: block;
	fill: #ffffff;
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:disabled .dialog-button-contact-image-load svg {
	animation: rotation 2s infinite linear
}

@keyframes rotation {
	from {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(359deg)
	}
}

.dialog-contact .dialog-modal-footer .dialog-button-contact [class^="dialog-button-contact-label"] {
	display: block;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 16px;
	line-height: 24px;
	color: #ffffff;
	font-weight: 600;
	text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 10px;
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:enabled .dialog-button-contact-label-send {
	display: block
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:disabled .dialog-button-contact-label-send {
	display: none
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:enabled .dialog-button-contact-label-load {
	display: none
}

.dialog-contact .dialog-modal-footer .dialog-button-contact:disabled .dialog-button-contact-label-load {
	display: block
}

.dialog-contact .dialog-modal-footer .dialog-button-cancel {
	padding: 8px 12px;
	display: block;
	background-color: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	outline: none;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 16px;
	line-height: 24px;
	color: #737373;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer
}

.dialog-contact .dialog-modal-footer .dialog-button-cancel:enabled:hover {
	background-color: #e5e5e5;
	color: #404040
}

.dialog-contact .dialog-modal-footer .dialog-button-cancel:disabled {
	opacity: 0.5;
	cursor: not-allowed
}