.popup{
    position: fixed;
    bottom: 1em;
    left: 1em;
}
.toast__message {
    position: relative;
    width: 300px;
    min-height: 50px;
    border-radius: 3px;
    border: 1px solid black;
    margin-top: 16px;
    margin-right: 16px;
    padding: 0.5em;
    font-size: 16px;
    line-height: 1.8;
    box-shadow: 1px 1px 4px gray;
    transition: all 0.3s ease;
}
.toast__message-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0.4em;
}
.toast__message-cross-icon {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 20px;
	height: 20px;
	padding-top: inherit;
	transform: translateY(10%);
	cursor: pointer;
}
.toast__message--hidden {
    transform: translateX(50%);
    opacity: 0;
}
.toast__message--success {
    background:#ff9040;
    color: white;
}
.toast__message--success .toast__message-cross-icon {
    color: #327400;
}
.toast__message--info {
    background:#ff9040;
    color: white;
}
.toast__message--info .toast__message-cross-icon {
    color: white;
}
.toast__message--warning {
    background: #FFFAA7;
    color: #413d00;
}
.toast__message--warning .toast__message-cross-icon {
    color: #746d00;
}
.toast__message--error {
    background: #FF2C2C;
    color: white;
}
.toast__message--error .toast__message-cross-icon {
    color: white;
}