@import "template-designer";
@import "react-components";

.clearfix {
	zoom: 1;
}

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.wp-html-mail-header{
	background: #fff;
    box-sizing: border-box;
    padding: 10px 20px;
    position: fixed;
    width: calc(100% - 160px);
    top: 32px;
	left:160px;
    z-index: 1001;
	display: flex;
	justify-content: space-between;

	.heading-wrap{
		display: flex;
		gap: 20px;

		h2{
			margin-top: 0;
			margin-bottom: 4px;
		}

		.subtitle{
			padding-left: 0;
			font-size: 12px;
			text-transform: uppercase;
		}
	}

	.nav-buttons a{
		margin-left:15px;
	}
}

.settings_page_wp-html-mail #wpbody{
	padding-top: 60px;
}

#haet_mail_form {
	margin-bottom: 80px;

	.wp-picker-container {
		line-height: 25px;
		display: inline-block !important;
		width: auto;

		a {
			margin-right: 0;
		}
	}

	.wp-color-result {
		margin-bottom: 0;
	}

	.postbox .hndle,
	.haet-mail-send-test .hndle {
		padding-left: 10px;
		cursor: text;
	}

	.form-table th,
	.form-table td {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.border-choice-label {
		display: inline-block;
		font-size: 8px;
		line-height: 10px;
		margin-right: 20px;
	}

	.border-choice {
		width: 16px;
		height: 16px;
		margin-top: 5px;
		border: none;
		border-collapse: collapse;
		display: inline-table;
		vertical-align: 1px;
	}

	.border-choice td {
		width: 8px;
		height: 7px;
		font-size: 0px;
		line-height: 0px;
		border: 1px dotted #999;
		padding: 0;
	}

	/* outer vertical */
	.border-choice.border-choice-outer-v td:first-child {
		border-left: solid 2px #000 !important;
	}

	.border-choice.border-choice-outer-v td:last-child {
		border-right: solid 2px #000;
	}

	/* inner vertical */
	.border-choice.border-choice-inner-v td:last-child {
		border-left: solid 2px #000;
	}

	/* outer horizontal */
	.border-choice.border-choice-outer-h tr:first-child td {
		border-top: solid 2px #000 !important;
	}

	.border-choice.border-choice-outer-h tr:last-child td {
		border-bottom: solid 2px #000;
	}

	/* inner horizontal */
	.border-choice.border-choice-inner-h tr:last-child td {
		border-top: solid 2px #000;
	}

	/* top */
	.border-choice.border-choice-top tr:first-child td {
		border-top: solid 2px #000;
	}

	/* bottom */
	.border-choice.border-choice-bottom tr:last-child td {
		border-bottom: solid 2px #000;
	}

	input[type="number"] {
		width: 50px;
	}
}

.haet-mail-info-icon {
	cursor: pointer;
}

.haet-font-toolbar {
	select {
		height: 25px;
	}
}

#haet_mail_form input[type="checkbox"].haet-toggle,
#haet_mail_form input[type="radio"].haet-toggle {
	display: none;

	&+label {
		display: inline-block;
		text-align: center;
		height: 28px;
		width: 28px;
		background-color: #f7f7f7;
		border: 1px solid #ccc;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: 0 1px 0 #ccc;
		box-shadow: 0 1px 0 #ccc;

		.dashicons {
			font-size: 19px;
			line-height: 1.5;
		}

		&.border-choice-label {
			margin-right: 0;
		}
	}

	&:checked+label {
		background-color: #dddddd;
		-webkit-box-shadow: 0 2px 0 #ccc inset;
		box-shadow: 0 2px 0 #ccc inset;

		.dashicons {
			line-height: 1.45;
		}
	}
}

/****************************************
*   HEADER
****************************************/
#haet_mailheaderimg {
	width: 380px;
	max-width: 90%;
}

label[for="haet_mail_headerimg_advanced"] {
	vertical-align: 5px;
}

.collapse-headerimg_advanced {
	margin-top: 5px;

	input#haet_mailheaderimg_width,
	input#haet_mailheaderimg_height {
		width: 60px;
		margin: 0 5px;
		text-align: right;
	}

	label {
		margin-left: 20px;

		&:first-child {
			margin-left: 0;
		}
	}
}

.haet-mail-send-test {
	max-width: 800px;
}

.haet-mail-dialog {
	display: none;
}

.customize-email-content-selection {
	a {
		text-decoration: none;
	}
}

/****************************************
*   SHOW PREVIEW
****************************************/
.haet-mail-preview-headline {
	float: left;
	margin: 8px 30px 0 0;
}


/****************************************
*   SEND PREVIEW
****************************************/
.haet-mail-send-preview {
	border: 1px solid #ccc;
	margin-bottom: 3px;
	display: inline-block;
	margin-left: 100px;
	padding-left: 10px;

	input {
		background: transparent;
		border-radius: 0;
		border: none;
		border-bottom: 1px dashed #0071a1;
		margin-left: 5px;
		margin-right: 5px;
	}

	button {
		background: transparent;
		border: none;
		color: #0071a1;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0);
		transition: all 0.4s ease-out;

		&:hover {
			text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
			color: #000;
		}
	}
}

/****************************************
*   PLUGINS
****************************************/
.haet-mail-plugin {
	width: 350px;
	margin: 20px;
	float: left;
	display: block;
	height: 128px;
	padding: 15px;
	border: 1px solid #eee;
	background: #f1f1f1;
}

.haet-mail-plugin.not-installed img {
	opacity: 0.5;
	transition: opacity 0.4s;
}

.haet-mail-plugin.not-installed:hover img {
	opacity: 1;
}

.haet-mail-plugin .haet-mail-plugin-left {
	width: 128px;
	float: left;
}

.haet-mail-plugin .haet-mail-plugin-right {
	margin-left: 10px;
	width: 205px;
	float: left;
}

/****************************************
*   TEMPLATE LIBRARY
****************************************/

.haet-mail-template-list {
	margin-top: 30px;

	.haet-mail-template {
		position: relative;
		display: block;
		width: 300px;
		height: 250px;
		margin-right: 40px;
		margin-bottom: 40px;
		float: left;
		background-size: cover;
		background-position: top center;
		outline: 10px solid #fff;
		box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4) inset;

		.template-name {
			position: absolute;
			display: inline-block;
			left: -1px;
			bottom: -1px;
			padding: 5px 10px;
			background: #fff;
			font-size: 13px;
			text-transform: uppercase;
			box-shadow: 2px -2px 3px rgba(0, 0, 0, 0.4);
		}
	}
}

#haet_mail_template_preview_dialog {
	.screenshot {
		width: 55%;
		margin-right: 5%;
		min-width: 300px;
		float: left;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
	}

	.template-description {
		width: 40%;
		float: left;
		min-width: 200px;
	}
}

/****************************************
*   WEBFONTS SALES PAGE
****************************************/

#wp-html-mail-webfonts-sales-page{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	.webfonts-intro{
		width: 100%;
		text-align: center;
		padding: 40px 10px;
		line-height: 1.0;

		.small-heading{
			font-family: 'Oswald',sans-serif;
			font-weight: 300;
			text-transform: uppercase;
			font-size: 25px;
		}

		.huge-heading {
			font-family: 'Train One', sans-serif;
			font-weight: 400;
			text-transform: uppercase;
			font-size: 50px;
			margin: 10px 0;
		}

		.hand{
			font-family: 'Rock salt',sans-serif;
			font-weight: 400;
			font-size: 13px;
		}
	}

	.webfonts-facts,
	.webfonts-cta-bar {
		font-family: Montserrat,sans-serif;
		font-weight: 300;
		line-height: 1.35;
		padding: 20px;
	}

	.webfonts-facts{
		color: #000;
		max-width: 650px;

		h2{
			font-family: Montserrat,sans-serif;
			font-weight:100;
			background-color: #176588;
			color:#fff;
			padding: 7px 15px 3px 15px;
			text-transform: uppercase;
			display: inline-block;
			font-size: 40px;
			margin-bottom: 20px;
		}

		h3 {
			font-family: Montserrat, sans-serif;
			font-weight: 200;
			color: #176588;
			font-size: 25px;
			text-transform: uppercase;
			margin-bottom: 0;
		}
	}

	.webfonts-cta-bar {
		width:100%;
		background-color: #176588;
		color: #fff;

		h3 {
			font-family: Montserrat, sans-serif;
			font-weight: 200;
			color: #fff;
			font-size: 25px;
			text-transform: uppercase;
			margin-bottom: 0;
		}

		.cq-cta{
			display: inline-block;
			margin:10px 0;
			background: #C6BF19;
			color: #000;
			text-transform: uppercase;
			padding: 6px 15px 5px 15px;
			text-decoration: none;
			font-size: 20px;
			font-weight: 200;
			transition: all 0.4s ease-out;

			&:hover{
				background: #fff;
			}

			.dashicons{
				color: #176588;
				vertical-align: -3px;
			}
		}
	}
}
@media screen and (min-width:768px){
	#wp-html-mail-webfonts-sales-page {
		.webfonts-intro {
			width: 36%;
			padding: 40px 0;
			
			.small-heading {
				font-size: 28px;
			}

			.huge-heading {
				font-size: 56px;
				margin: 10px 0;
			}

			.hand {
				font-size: 14px;
			}
		}

		.webfonts-facts {
			position: relative;
			width: 55%;
			padding: 0 0  40px 40px;
			
			&:before{
				content: '';
				position: absolute;
				left:0;
				top:15%;
				height: 70%;
				width: 3px;
				background: #C6BF19;
			}

			p{
				font-size: 16px;
			}
		}

		.webfonts-cta-bar {
			padding-left: 40px;

			p {
				font-size: 16px;
			}
		}
	}
}
/****************************************
*   ADVANCED
****************************************/
.haet-mail-toggle-export,
.haet-mail-toggle-import {
	max-height: 0;
	overflow: hidden;
	transition: all 0.5s ease-out;

	textarea {
		width: 100%;
		height: 200px;
		font-family: "Courier New", Courier, monospace;
		font-size: 13px;
	}

	&.toggle-active {
		max-height: 500px;
	}
}

/****************************************
*   SURVEY
****************************************/
.haet-survey-nag {
	display: block;

	.haet-star-rating {
		margin-left: 20px;
		vertical-align: -6px;
	}
}

.haet-star-rating {
	display: inline-block;

	a {
		display: inline-block;
		padding: 2px;
		float: left;
	}
}

.haet-mail-survey {
	.form-table th {
		width: 460px;
	}

	textarea {
		width: 400px;
		height: 120px;
	}

	.testimonial-inline-label {
		display: inline-block;
		width: 250px;
	}

	.testimonial-inline-field {
		display: inline-block;
		width: 250px;
	}

	.button-primary .dashicons {
		vertical-align: -5px;
	}
}



/****************************************
*   WOOCOMMERCE
****************************************/
.haet-mail-headline-row{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;

	a{
		margin: 0 8px;
	}

	h4 {
		min-width: 200px;

		a {
			margin-left: 0;
			margin-right: 20px;
		}
	}
}