dialog{
	z-index: 20;
	border-color: var(--colorPurple);
	border-width: 4px;
	border-radius: 8px;
	position: fixed;
	margin: 0 auto;
	form{
		.formDialogEl{
			label, input, textarea{
				width: 100%;
				border-color: var(--colorPurple);
				border-width: 1px;
				outline: none;
				border-radius: 3px;
				&:is(.err){
					outline: 2px solid #ff0000;
				}
			}
			label{
				&:is(.req){
					&::after{
						content: '*';
						color: var(--colorPurple);
						font-weight: 700;
					}
				}
			}
			textarea{
				resize: none;
			}
		}
		input[type="submit"]{
			border: none;
				cursor: pointer;
				color: #fff;
				background-color: var(--colorPurple);
				font-weight: 500;
				&:hover{
					opacity: 0.85;
					transition: 0.4s;
				}
			}
	}
	svg{
		&:is(.closeModalButton){
			position: absolute;
			cursor: pointer;
			fill: var(--colorPurple);
			&:hover{
				transition: 0.4s;
				fill: var(--colorBlack);
			}
		}
	}
	.blur{
		filter: blur(3px);
	}
	&::backdrop{
		background: rgba( 0, 0, 0, 0.75 );
		backdrop-filter: blur(6px);
	}
}

button{
	&:is(.btn){
		color: #fff;
		border: none;
		background-color: var(--colorPurple);
		cursor: pointer;
		font-weight: 500;
		border-radius: 4px;
		line-height: 1.0;
		&:hover{
			opacity: 0.85;
		}
	}
}

@media(min-width: 62rem ){
	dialog{
		top: 15%;
		padding: 25px;
		max-width: 650px;
		h4{
			font-size: 1.5rem;
			margin-bottom: 5px;
		}
		p{
			font-size: 1.125rem;
			&:not(:last-child){
				margin-bottom: 10px;
			}
		}
		form{
			.formDialogEl{
				&:not(:last-child){
					margin-bottom: 10px;
				}
				input, textarea{
					padding: 5px 8px;
					font-size: 1.125rem;
				}
				input[type="submit"]{
					font-size: 1.25rem;
					padding: 0.5rem 2.5rem;
				}
			}
		}
		svg{
			&:is(.closeModalButton){
				top: 12px;
				right: 12px;
				width: 22px;
				height: 22px;
			}
		}
	}
	button{
		&:is(.btn-callback){
			font-size: 1.125rem;
			padding: 9px 12px;
		}
	}
}

@media(max-width: 62rem ){
	dialog{
		top: 10%;
		padding: 20px;
		h4{
			font-size: 1.25rem;
			margin-bottom: 5px;
		}
		form{
			.formDialogEl{
				&:not(:last-child){
					margin-bottom: 15px;
				}
				input, textarea{
					padding: 3px 6px;
					font-size: 1.0rem;
				}
				input[type="submit"]{
					font-size: 1.125rem;
					padding: 0.5rem 1.5rem;
				}
			}
		}
		svg{
			&:is(.closeModalButton){
				top: 10px;
				right: 10px;
				width: 18px;
				height: 18px;
			}
		}
	}
	button{
		&:is(.btn-callback){
			font-size: 1.375rem;
			padding: 14px 20px;
		}
	}
}