.toastify {
padding: 12px 20px;
color: #ffffff;
display: inline-block;
background: var(--main);
position: fixed;
opacity: 0;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
border-radius: 2px;
cursor: pointer;
text-decoration: none;
max-width: 351px;
z-index: 2147483647;
padding-right: 45px;
overflow: hidden;
}
.toastify.on {
opacity: 1;
}
.push-notification:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: var(--main);
animation: backgroundAnimate 4.5s cubic-bezier(.15,.85,.45,1) forwards;
transform-origin: left;
width: 100%;
}
.toastify .push-notification + .toast-close {
color: var(--heading);
}
.push-notification {
color: var(--heading);
display: flex;
align-items: center;
max-width: 351px;
}
.push-notification .mess-inner {
padding-left: 16px;
}
.push-notification .mess-inner label {
font-weight: 700;
font-size: 16px;
}
.push-notification img {
width: 40px;
}
.push-notification p.d-block {
font-size: 12px;
opacity: .5;
}
.push-notification .view {
color: var(--main);
text-decoration: underline;
display: inline-block;
margin-left: 6px;
}
.toastify .toast-close {
position: absolute;
top: 10px;
right:15px;
padding: 0;
border: 0;
background: transparent;
color:#fff;
font-size:0;
&::before{
width:20px;
height:20px;
content:'\E814';
font-family:"jws_icon";
font-size:20px;
}
}
.toast-close img {
display: none !important;
}
.toastify-right {
right: 15px;
}
.toastify-left {
left: 15px;
}
.toastify-top {
top: -150px;
}
.toastify-bottom {
bottom: -150px;
}
.toastify-rounded {
border-radius: 25px;
}
.toastify-avatar {
width: 1.5em;
height: 1.5em;
margin: -7px 5px;
border-radius: 2px;
}
.toastify-center {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
max-width: fit-content;
max-width: -moz-fit-content;
}
.jws-matching-clear span[data-name]:after {
content: '\e814';
font-family: "jws_icon";
}
@keyframes backgroundAnimate {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
} .message-item.sending {
opacity: 0.55;
pointer-events: none;
}
.message-item.sending .messasge-content {
position: relative;
}
.message-item.send-failed {
opacity: 0.7;
}
.message-item.send-failed .message-wrap {
position: relative;
}
.message-item.send-failed .message-wrap::after {
content: "!";
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50 .message-item.sending {
opacity: 0.55;
pointer-events: none;
}
.message-item.send-failed {
opacity: 0.7;
}
.message-item.send-failed .message-wrap {
position: relative;
}
.message-item.send-failed .message-wrap::after {
content: "!";
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: #e74c3c;
color: #fff;
font-size: 11px;
font-weight: bold;
position: absolute;
right: -24px;
top: 50%;
transform: translateY(-50%);
}