/**
 *  UMG Core 2
 *  ./assets/css/core-email.css
 *
 *  Email modal extra css - only loaded if exact-target or formbuilder are used
 */

/*	=Signup/Email modal
	========================================================================= */
#email-modal .the-form {
	width:43rem;
 	border:0;
}
#email-modal .the-form fieldset{
	padding:0 1em .5em;
}
#email-modal header{
	padding:.45em 1em 1em;
}
#email-modal header h2{
	line-height:1.3em;
}

/*	=formbuilder
	========================================================================= */
.formbuilder .the-form .loading{
	display:table;
	position:absolute;
	text-align:center;
	width:100%;
	height:78%;
	margin:0;
	background:lightgray;
}
.formbuilder .the-form .loading small{
	display:table-cell;
	vertical-align:middle;
}

.formbuilder .the-form{
    min-height:626px;
    max-height:calc(100vh - 45px);
    height:50vh;
}
.email-iframe{
	width:100%;
	height:78%;
}
.email-iframe iframe{
	height:100%;
}
/*	=exact target form colors
	========================================================================= */
#email-modal .the-form{
	background-color:#fafafa;
}
#email-modal .the-form,
#email-modal .the-form a{
	color:black;
}
#email-modal header{
	height:22%;
	background:rgba(0,0,0,.8);
	color:white;
}
#email-modal header h2{
	color:white;
}
#email-modal fieldset input.error,
#email-modal fieldset select.error{
	box-shadow: 0px 0px 4px #dd3000;
}

/* =font sizes
   ========================================================================== */
#email-modal .the-form {
    font-size:1.3em;
}
@media screen and (max-width:768px) and (max-height:780px) {
	#email-modal header {
		font-size:.8em;
	}
}
	#email-modal{
		overflow-x:hidden;
		overflow-y:visible;
	}

/* =respond for small screens - make modal full-screen
   ========================================================================== */
@media screen and (max-width:768px), screen and (max-height:715px) {
	body.off-canvas--open.email-modal--open{overflow:hidden;}
	body.off-canvas--open#email-modal--open .the-form{
		overflow-y:auto
	}
	#email-modal{
		overflow-x:hidden;
		overflow-y:visible;
	}
	#email-modal .the-form{
		z-index:10002;
		min-height:0;
		height:100vh;
		max-height:100vh;
		max-width:100%;
		width:100%;
		transform:none;
	}
	.off-canvas.with-cover #email-modal .inner{
		x-display:table-cell;
	}
	#xxemail-modal .email-iframe {
		width:100%;
		height:100%;
	}
	#email-modal .close.button{
		top:0;
	}
}