fuzzymail/src/assets/css/fuzzy.css

Responsive email template generator.

.main-wrapper {
	padding: 0 0 20px 0;
	width: 100%;

	@media (--screen-mobile) {
		padding: 0 20px 20px 20px !important;
	}
}

.main-table {
	background: var(--color-gray-light);
	margin: 0;
	padding: 0;
	width: 100%;

	& .main-data {
		@media (--screen-mobile) {
			width: 100% !important;
		}
	}
}

.layout {
	width: 600px;
	max-width: 600px;
	margin: auto;
	background: var(--color-light);
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;

	@media (--screen-mobile) {
		width: 100% !important;
		max-width: 100% !important;
	}
}

.reset {
	margin: 0;
	padding: 0;
	min-width: 20px;

	@media (--screen-mobile) {
		display: none !important;
	}
}

.logo-wrapper {
	width: 100%;

	& tr,
	& td {
		width: 100%;
	}

	& td {
		padding-top: 20px;
	}
}

.logo {
	width: 77px;
	height: 77px;
	margin: auto;
}

.header {
	color: var(--color-light);

	& td {
		padding: 20px 0 0;
	}
}

.header-image {
	width: 600px;
	height: auto;

	@media (--screen-mobile) {
		width: 100% !important;
		height: auto !important;
	}
}

.single {
	width: 100%;

	& tr,
	& td {
		width: 100%;
	}

	& td {
		padding: 20px;
	}
}

.remove-bottom {
	& td {
		padding-bottom: 0;
	}
}

.text-lineheight {
	font-size: var(--size-text-desktop);
	line-height: var(--lineheight-text-desktop);
}

.title-lineheight {
	font-size: var(--size-h1-desktop);
	line-height: var(--lineheight-h1-desktop);
}

.black {
	color: var(--color-dark);
}

.light {
	color: var(--color-light);
}

.gray {
	color: var(--color-gray);
}

.multi-columns {
	width: 100%;

	& td,
	& th {
		padding: 0 20px;
		width: 50%;

		&.first {
			padding-right: 10px;
		}

		&.last {
			padding-left: 10px;
		}
	}

	@media (--screen-mobile) {
		& td,
		& th {
			padding: 0 20px !important;

			&.mobile {
				width: 100% !important;
				display: block !important;
			}

			&.first {
				padding-bottom: 20px !important;
				padding-right: 20px !important;
			}

			&.last {
				padding-left: 20px !important;
			}
		}
	}
}

.socials {
	width: 600px;

	@media (--screen-mobile) {
		width: 100% !important;
	}

	& tr {
		width: 100%;
	}

	& td {
		padding: 20px;
	}
}

.social-icon {
	width: 32px;
	height: 32px;
}

.footer {
	color: var(--color-light);
	background: var(--color-secondary);
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
	width: 600px;

	@media (--screen-mobile) {
		width: 100% !important;
	}

	& td {
		width: 100%;
	}

	& td {
		padding: 20px;
	}

	& a {
		color: var(--color-light);
	}
}