.slide-msg-suc{
background-color:#73AF55;
color:white;
border:1px solid #73AF55;
border-color:#73AF55;
font-size:14px;
font-weight:600;
width:auto;
padding:5px;
border-radius:4px;
display:inline-block;
position:fixed;
//right:2%;
top:10%;
z-index:9999;
animation: slideMsgRight 200ms forwards;
}
.slide-msg-err{
background-color:#FF4433;
color:white;
border:1px solid #FF4433;
border-color:#FF4433;
font-size:14px;
font-weight:600;
width:auto;
padding:5px;
border-radius:4px;
display:inline-block;
position:fixed;
//right:2%;
top:10%;
z-index:9999;
animation: slideMsgRight 200ms forwards;
}

.msg-text-fade-in{
   /*opacity: 0;
 *    animation: fadeInMsg 0s forwards;*/
}
@keyframes fadeInMsg {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.msg-text-fade-out{
   /*opacity: 1;
   animation: fadeOutMsg 2s forwards;*/
   animation: fadeOutMsg 350ms forwards;
}
@keyframes fadeOutMsg {
  /*from { opacity: 1; }
  to   { opacity: 0; }*/
  from {right: 2%;}
  to {right: -100%;}
}
.highlight-msg-text-once {
   /*animation: highlightMsg 2s ease-out;*/
}
@keyframes highlightMsg {
   0%   { background-color: yellow; }
   100% { background-color: forestgreen; }
}
@keyframes slideMsgRight {
  from {right: 0%;}
  to {right: 2%;}
}
.close-sym{
   /*padding-right:7%;*/
}
.slide-popup-right{
   animation: slidePopupRight 1000ms ease forwards;
}
@keyframes slidePopupRight {
  from {right: 0%;}
  to {right: 25%;}
}