.toast {
position: fixed;
top: 0;
right: 0;
width: 100%;
z-index: 101;
}

.toast__message {
position: relative;
max-width: 500px;
min-height: 50px;
border-radius: 5px;
border: 1px solid;
margin: 10px auto;
padding: 0.7em 0.9em;
font-size: 14px;
line-height: 1.25;
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: 0;
right: 0.8em;
width: 0.8em;
height: 1.8em;
padding-top: inherit;
transform: translateY(10%);
cursor: pointer;
}

.toast__message--hidden {
transform: translateX(50%);
opacity: 0;
}

.toast__message--success {
background: #CDFFA7;
border-color: #48a700;
color: #1c4100;
}
.toast__message--success .toast__message-cross-icon {
color: #327400;
}

.toast__message--info {
background: #A7FFE4;
border-color: #00a774;
color: #00412d;
}
.toast__message--info .toast__message-cross-icon {
color: #007450;
}

.toast__message--warning {
background: #FFFAA7;
border-color: #a79e00;
color: #413d00;
}
.toast__message--warning .toast__message-cross-icon {
color: #746d00;
}

.toast__message--error {
background: #FFA7A7;
border-color: #a70000;
color: #740000;
}
.toast__message--error .toast__message-cross-icon {
color: #a70000;
}