body, html {
	padding: 0;
	margin: 0;
}

* {
	box-sizing: border-box;
}

body {
	font-family: Arial, Sans-serif;
	font-size: 16px;
	background-color: #f0f0f0;
}


#grid {
	padding: 32px 16px;
	max-width: 1658px;
	margin: 0 auto;

	display: grid;
	gap: 32px;
	
	grid-template-areas: "p"
						 "c"
						 "f";
	
}


#preview, #form-wrapper {
	width: 100%;
	padding: 32px;
	border-radius: 6px;
	margin: 0 auto;
	background-color: #FFF;
}



#preview {
	grid-area: p;
	
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


#controls {
	grid-area: c;
}


#form-wrapper {
	grid-area: f;
}



form label {
	display: inline-block;
	margin-bottom:6px;
	font-size: 12px;
}

input, select, textarea, button{
	font-family:inherit;
}


form input, textarea {
	display: inline-block;
	margin-bottom:24px;
	height:48px;
	width: 100%;
	padding: 0 .5em;
	box-sizing: border-box;
	border-radius: 4px;
	border: solid 1px #ccc;
	font-size: 16px;
	line-height: 24px;

}

textarea {
	height:96px;
	padding: 0.5em;
	resize:vertical;
}

button, .button {
	height: 40px;
	border-radius:4px;
	padding: 0 20px;
	width: auto;
	margin: 0 8px 8px 0;
	font-size: 14px;
	line-height:16px;
	color: #000;
	font-weight: 600;

	
	display: inline-block;
	vertical-align: top;
	border: none;

	background: #fff;
	border-bottom: 2px solid #ddd;

	
	cursor: pointer;
	
}

a {
	text-decoration:none;
}

button:hover, .button:hover {
	background-color: #f7f7f7;
}

.button.color {
	width: auto;
	border: none;
	background-color: #D71345;
	color: #FFF;
	padding-top:2px;
}

.button.color:hover {
	background-color: #b4103a;
}








#download-container, #mailsign-template {
	display: none;
}





.material-symbols-outlined {
	font-size: 16px !important;
	margin-right:4px;
	vertical-align: top;
}






.tooltip {
	font-size: 16px;
	position: relative;
	display: inline-block;  
	margin-left:.5em;	
	color: #999	;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 250px;
	background-color: #666;
	color: #fff;
	border-radius: 4px;
	padding: 10px 10px;
	font-size: 12px;
	line-height: 16px;


	/* Position the tooltip */
	position: absolute;
	top: 0;
	left:1.5em;
	z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}








@media screen and (min-width: 940px)  {

#grid {
	padding: 56px;
	gap: 56px;
	
	grid-template-areas: "p f"
						 "c f";
	grid-template-rows: auto 1fr;

}


#preview {

}

}