@font-face {
	font-family: 'shop-notification-ico';
	src: url('fonts/shop-notification-ico.eot?rzy642');
	src: url('fonts/shop-notification-ico.eot?rzy642#iefix') format('embedded-opentype'),
	url('fonts/shop-notification-ico.ttf?rzy642') format('truetype'),
	url('fonts/shop-notification-ico.woff?rzy642') format('woff'),
	url('fonts/shop-notification-ico.svg?rzy642#shop-notification-ico') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="shop-notification-ico-"], [class*=" shop-notification-ico-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'shop-notification-ico' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	padding: 3px;
	border: 3px solid #6E6F6D;
	border-radius: 100%;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.shop-notification-inner {
	display: flex;
	align-items: center;
	padding: 0;
}

.shop-notification-message-wrapper {
	padding: 1rem 0;
	flex: 1;
}

.shop-notification-message-wrapper p {
	margin: 0;
	padding: 1rem;
}

.shop-notification-icon-wrapper {
	font-size: 3rem;
}

.shop-notification-close-button:focus,
.shop-notification-close-button:hover,
.shop-notification-close-button:active,
.shop-notification-close-button {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	font: inherit;
	font-size: 1rem;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background: none;
	border: 0;
	color: #FFF;
	line-height: normal;
	overflow: visible;
	padding: 1rem;
	-webkit-appearance: button; /* for input */
	-webkit-user-select: none; /* for button */
	-moz-user-select: none;
	-ms-user-select: none;
	cursor: pointer;
	outline: none;
}

.shop-notification-ico-info:before {
	content: "\e901";
	color: #39AFE2;
}

.shop-notification-ico-dismiss:before {
	content: "\e9b6";
}

.shop-notification.info {
	background-color: #E2F5FD;
}

.shop-notification.info .shop-notification-close-button:hover {
	background-color: #39AFE2;
	color: #FFF;
}

.shop-notification.info .shop-notification-close-button {
	color: #39AFE2;
}

.shop-notification-ico-error:before {
	content: "\e900";
	color: #FF5F5D;
}

.shop-notification.error {
	background-color: #F8E2D7;
}

.shop-notification.error .shop-notification-close-button:hover {
	background-color: #FF5F5D;
	color: #FFF;
}

.shop-notification.error .shop-notification-close-button {
	color: #FF5F5D;
}

.shop-notification-ico-warning:before {
	content: "\e903";
	color: #E7D220;
}

.shop-notification.warning {
	background-color: #FEF8E7;
}

.shop-notification.warning .shop-notification-close-button:hover {
	background-color: #E7D220;
	color: #FFF;
}

.shop-notification.warning .shop-notification-close-button {
	color: #E7D220;
}

.shop-notification-ico-success:before {
	content: "\e902";
	color: #97CF80;
}

.shop-notification.success {
	background-color: #EDF3E4;
}

.shop-notification.success .shop-notification-close-button:hover {
	background-color: #97CF80;
	color: #FFF;
}

.shop-notification.success .shop-notification-close-button {
	color: #97CF80;
}

@media (max-width: 575px) {
	.shop-notification-icon-wrapper {
		padding-left: 1rem;
		font-size: 1.8rem;
	}

	.shop-notification-message-wrapper {
		padding: 0.5rem 0;
	}
}