.toast {position: relative; opacity: 0; position: fixed; bottom: 30px; right: 60px; z-index: 99999; background-color: #ffffff; padding: 20px; box-shadow: 0px 3px 6px #00000029; transition: transform .2s ease-in-out, opacity .2s ease-in-out; transform:translateY(30px); }
.toast.ok {border: 3px solid #4aad94; border-radius: 5px;}
.toast.error {border: 3px solid #ff0000; border-radius: 5px;}
.toast.info {border: 3px solid #7d9bbd; border-radius: 5px;}

.toast .msg i {margin-right: 10px;width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; color: #ffffff; border-radius: 100%;}
.toast.ok .msg i { background-color: #4aad94; }
.toast.error .msg i {background-color: #ff0000;}
.toast.info .msg i { background-color: #7d9bbd;}



.toast .btn {width: 100%; max-width: 100%; text-align: center; padding: 10px; min-width: 190px; font-weight: 600; border-radius: 50px; margin-top: 20px!important;}
.toast.on {opacity: 1; transform:translateY(0);}
.toast .msg {font-size: 1.2rem;  display: flex; align-items: center;}
.toast .msg strong{display: block; width: calc(100% - 40px);}

.toast .cls {cursor: pointer; position: absolute; right: 0px; top: 0px; width: 30px; height: 30px; background-color: #4b5d71; color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 100%; transform: translate(50%, -50%);}
.toast .cls:hover {background-color: #4aad94;}

@media screen and (max-width: 600px) {
   .toast {left: 15px; bottom: 5px; width: calc(100vw - 30px)!important;}
.toast .msg strong {font-size:0.9rem;}
.toast .msg i {font-size:1rem; width:25px; height:25px;}
}

@media screen and (max-width: 500px) {
    .toast .btn {margin-top: 15px!important;}
    .toast {padding: 15px;}
}