.toast-title {
	font-family: Verdana, Geneva, sans-serif;
	font-weight: bold;
	padding: 0 10px;
	margin-bottom: 8px;
	opacity: 0.8;
}

.toast-message {
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	padding: 0 10px;
	font-size: 14px;
	opacity: 0.8;
	font-weight: bold;
}
.toast-title + .toast-message {
	opacity: 0.9;
	font-weight: normal;
}

.toast-close-button {
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 0px;
	transform: rotate(0deg);
}

.toast-close-button:hover,
.toast-close-button:focus {
	-webkit-transition: all .3s ease-in;
	-moz-transition: all .3s ease-in;
	-o-transition: all .3s ease-in;
	transition: all .3s ease-in;
	transform: rotate(180deg);
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
	cursor: pointer;
	border: 0;
	height: 20px;
	width: 20px;
	background: url(/images/interface_icons/cross_gray.svg) no-repeat;
	background-size: cover;
}

.toast-top-center {
	top: 0;
	right: 0;
	width: 100%;
}

.toast-top-left {
	top: 20px;
	left: 20px;
}

.toast-top-right {
	top: 20px;
	right: 20px;
}

#toast-container {
	position: fixed;
	z-index: 999999;
	pointer-events: none;
}

#toast-container > div {
	width: min(400px, calc(100% - 20px));
	margin: 20px auto auto;
	border-radius: 6px;
	background-color: #fff;
	position: relative;
	pointer-events: auto;
	overflow: hidden;
	padding: 15px 30px 15px 50px;
	-moz-box-shadow: 1px 1px 6px 0px rgba(35, 44, 58, 0.25);
	-ms-box-shadow: 1px 1px 6px 0px rgba(35, 44, 58, 0.25);
	-o-box-shadow: 1px 1px 6px 0px rgba(35, 44, 58, 0.25);
	-webkit-box-shadow: 1px 1px 6px 0px rgba(35, 44, 58, 0.25);
	box-shadow: 1px 1px 6px 0px rgba(35, 44, 58, 0.25);
}

#toast-container > :hover {
	-moz-box-shadow: 1px 1px 12px 0px rgba(35, 44, 58, 0.45);
	-ms-box-shadow: 1px 1px 12px 0px rgba(35, 44, 58, 0.45);
	-o-box-shadow: 1px 1px 12px 0px rgba(35, 44, 58, 0.45);
	-webkit-box-shadow: 1px 1px 12px 0px rgba(35, 44, 58, 0.45);
	box-shadow: 1px 1px 12px 0px rgba(35, 44, 58, 0.45);
	cursor: pointer;
}

.toast-error:before,
.toast-warning:before,
.toast-success:before,
.toast-info:before {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 50px;

	background-size: 30px 30px;
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: center;
}

.toast-error:before {
	background-color: var(--danger-color);
	background-image: url(/images/interface_icons/big_warning.svg);
}

.toast-warning:before {
	background-color: var(--warning-color);
	background-image: url(/images/interface_icons/big_warning.svg);
}

.toast-success:before {
	background-color: var(--success-color);
	background-image: url(/images/interface_icons/big_round_check.svg);
}

.toast-info:before{
	background-color: var(--gray-color);
	background-image: url(/images/interface_icons/big_round_info.svg);
}