#message-purchased {
    border:0 none;
    border-radius: 4px;
    box-shadow: 0 0 4px 0 rgb(0 0 0 / 40%);
    overflow: hidden;
    bottom:20px;
    display:none;
    font-family:tahoma,sans-serif;
    left:20px;
    position:fixed;
    right:auto!important;
    text-align:left;
    top:auto!important;
    width:auto;
    z-index:99999;
    align-items:center;
    flex-direction:row
}
#message-purchased.bottom_right {
    left:auto!important;
    right:20px!important
}
#message-purchased.top_right {
    left:auto!important;
    right:20px!important;
    top:20px!important;
    bottom:auto!important
}
#message-purchased.top_left {
    left:auto!important;
    top:20px!important;
    bottom:auto!important
}
#message-purchased img {
    float:left;
    width:auto;
    align-self:center;
    max-width:100px;
    max-height:100%;
    border-radius:0
}
#message-purchased p {
    float:left;
    font-size:13px;
    line-height:20px;
    margin:10px 10px 0 0;
    padding:0;
    width:auto;
}
#message-purchased.wn-product-without-image .wn-notification-message-container {
    padding:20px 0 20px 20px
}
#message-purchased.wn-product-with-image {
    max-width:500px;
    min-width:350px
}
#message-purchased.wn-product-without-image {
    max-width:400px;
    min-width:250px
}
#message-purchased .wn-notification-image-wrapper {
    display:flex;
    justify-content:center;
    align-items:center;
    max-width:100%;
    height:96px;
    text-align:center; padding-right: 10px;
}
#message-purchased p.wn-notification-message-container {
    overflow:hidden;
    max-width:600px;
    line-height:1.8;
    display:grid;
    align-items:center;
    flex-wrap:wrap;
    padding-top:15px;
    padding-bottom:10px;
    padding-right: 0px;
    padding-left:5px;
}
#message-purchased p .wn-popup-product-title,
#message-purchased p a {
    color:#000;
    display:block;
    font-size:14px;
    font-weight:700;
    width:100%;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:0;
    white-space:nowrap
}
#message-purchased p a:hover {
    color:#000
}
#message-purchased p small {
    display:block;
    font-size:10px;
    margin:0
}
#message-purchased.img-right .message-purchase-main .wn-notification-message-container {
    padding-left:20px!important;
    padding-right:20px!important
}
#message-purchased.img-right .message-purchase-main {
    padding:0
}
#message-purchased.img-right.wn-product-with-image .message-purchase-main {
    flex-direction:row-reverse;
    justify-content:space-between
}
#message-purchased #notify-close {
    cursor:pointer;
    position:absolute;
    right:0px;
    top:0px;
    width:22px;
    height:22px;
    border:none;
    overflow:hidden;
    display:flex;
    opacity:1;
    transition:opacity .2s
}
#message-purchased #notify-close:before {
    content:"";
    font-family:VI_WN_ICON_CLOSE;
    font-size:14px;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    text-align:center
}
#message-purchased #notify-close:hover {
    opacity:.6
}
#message-purchased.img-right #notify-close {
    right:-20px!important;
    top:-20px!important
}
body #message-purchased.wn-background-template-type-2 {
    max-width:515px
}
@media screen and (max-width:767px) {
    body #message-purchased {
        bottom:var(--bottom-margin-notif) !important;
        box-sizing:border-box;
        left:10px!important;
        right:10px!important;
        top:auto!important
    }
    body #message-purchased.wn-extended {
        bottom:var(--bottom-margin-notif) !important;
        box-sizing:border-box;
        margin:0 auto;
        top:auto!important
    }
    body #message-purchased.wn-extended.wn-background-template-type-2 {
        width:unset!important
    }
    #message-purchased.bottom_right {
        right:0!important
    }
    #message-purchased.top_right {
        right:0!important
    }
    #message-purchased p {
        font-size:11px
    }
    #message-purchased.wn-product-with-image p {
        width:70%
    }
    #message-purchased p a {
        font-size:13px
    }
    #message-purchased p small {
        margin-bottom:0
    }
    #message-purchased p.wn-notification-message-container {
        padding-top:0;
        padding-bottom:0
    }
    #message-purchased.wn-extended p.wn-notification-message-container {
        width:auto
    }
    #message-purchased.wn-extended.wn-product-with-image p.wn-notification-message-container {
        max-width:250px
    }
    #message-purchased.img-right #notify-close {
        right:-5px!important
    }
}
#woocommerce-notification-audio {
    display:none
}
#message-purchased a {
    color:#0f0f0f
}
@keyframes nFadeIn {
    0% {
        opacity:0;
        transform:translate3d(0,100%,0)
    }
    100% {
        opacity:1;
        transform:none
    }
}
#message-purchased.fade-in {
    animation-duration:1s;
    animation-fill-mode:both;
    animation-name:nFadeIn;
    opacity:0
}
@keyframes nFadeOut {
    0% {
        opacity:1
    }
    100% {
        bottom:0;
        opacity:0;
        transform:translate3d(0,100%,0)
    }
}
#message-purchased.fade-out {
    animation-duration:1s;
    animation-fill-mode:both;
    animation-name:nFadeOut;
    opacity:1
}
@keyframes nbounceIn {
    20%,
    40%,
    60%,
    80%,
    from,
    to {
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0% {
        opacity:0;
        transform:scale3d(.3,.3,.3)
    }
    20% {
        transform:scale3d(1.1,1.1,1.1)
    }
    40% {
        transform:scale3d(.9,.9,.9)
    }
    60% {
        opacity:1;
        transform:scale3d(1.03,1.03,1.03)
    }
    80% {
        transform:scale3d(.97,.97,.97)
    }
    to {
        opacity:1;
        transform:scale3d(1,1,1)
    }
}
#message-purchased.bounceIn {
    animation-duration:1s;
    animation-name:nbounceIn
}
@keyframes nbounceInDown {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0% {
        opacity:0;
        transform:translate3d(0,-3000px,0)
    }
    60% {
        opacity:1;
        transform:translate3d(0,25px,0)
    }
    75% {
        transform:translate3d(0,-10px,0)
    }
    90% {
        transform:translate3d(0,5px,0)
    }
    to {
        transform:none
    }
}
#message-purchased.bounceInDown {
    animation-duration:1s;
    animation-name:nbounceInDown
}
@keyframes nbounceInLeft {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    0% {
        opacity:0;
        transform:translate3d(-3000px,0,0)
    }
    60% {
        opacity:1;
        transform:translate3d(25px,0,0)
    }
    75% {
        transform:translate3d(-10px,0,0)
    }
    90% {
        transform:translate3d(5px,0,0)
    }
    to {
        transform:none
    }
}
#message-purchased.bounceInLeft {
    animation-duration:1s;
    animation-name:nbounceInLeft
}
@keyframes nbounceInRight {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    from {
        opacity:0;
        transform:translate3d(3000px,0,0)
    }
    60% {
        opacity:1;
        transform:translate3d(-25px,0,0)
    }
    75% {
        transform:translate3d(10px,0,0)
    }
    90% {
        transform:translate3d(-5px,0,0)
    }
    to {
        transform:none
    }
}
#message-purchased.bounceInRight {
    animation-duration:1s;
    animation-name:nbounceInRight
}
@keyframes nbounceInUp {
    60%,
    75%,
    90%,
    from,
    to {
        animation-timing-function:cubic-bezier(.215,.61,.355,1)
    }
    from {
        opacity:0;
        transform:translate3d(0,3000px,0)
    }
    60% {
        opacity:1;
        transform:translate3d(0,-20px,0)
    }
    75% {
        transform:translate3d(0,10px,0)
    }
    90% {
        transform:translate3d(0,-5px,0)
    }
    to {
        transform:translate3d(0,0,0)
    }
}
#message-purchased.bounceInUp {
    animation-duration:1.5s;
    animation-name:nbounceInUp
}
@keyframes nbounceOut {
    20% {
        transform:scale3d(.9,.9,.9)
    }
    50%,
    55% {
        opacity:1;
        transform:scale3d(1.1,1.1,1.1)
    }
    to {
        opacity:0;
        transform:scale3d(.3,.3,.3)
    }
}
#message-purchased.bounceOut {
    animation-duration:1.5s;
    animation-name:nbounceOut;
    opacity:0
}
@keyframes nbounceOutDown {
    20% {
        transform:translate3d(0,10px,0)
    }
    40%,
    45% {
        opacity:1;
        transform:translate3d(0,-20px,0)
    }
    to {
        opacity:0;
        transform:translate3d(0,2000px,0)
    }
}
#message-purchased.bounceOutDown {
    animation-duration:1.5s;
    animation-name:nbounceOutDown;
    opacity:0
}
@keyframes nbounceOutLeft {
    20% {
        opacity:1;
        transform:translate3d(20px,0,0)
    }
    to {
        opacity:0;
        transform:translate3d(-2000px,0,0)
    }
}
#message-purchased.bounceOutLeft {
    animation-duration:1.5s;
    animation-name:nbounceOutLeft;
    opacity:0
}
@keyframes nbounceOutRight {
    20% {
        opacity:1;
        transform:translate3d(-20px,0,0)
    }
    to {
        opacity:0;
        transform:translate3d(2000px,0,0)
    }
}
#message-purchased.bounceOutRight {
    animation-duration:1.5s;
    animation-name:nbounceOutRight;
    opacity:0
}
@keyframes nbounceOutUp {
    20% {
        transform:translate3d(0,-10px,0)
    }
    40%,
    45% {
        opacity:1;
        transform:translate3d(0,20px,0)
    }
    to {
        opacity:0;
        transform:translate3d(0,-2000px,0)
    }
}
#message-purchased.bounceOutUp {
    animation-duration:1.5s;
    animation-name:nbounceOutUp;
    opacity:0
}
@keyframes nfadeInDown {
    from {
        opacity:0;
        transform:translate3d(0,-100%,0)
    }
    to {
        opacity:1;
        transform:none
    }
}
#message-purchased.fadeInDown {
    animation-duration:1s;
    animation-name:nfadeInDown
}
@keyframes nfadeInDownBig {
    from {
        opacity:0;
        transform:translate3d(0,-2000px,0)
    }
    to {
        opacity:1;
        transform:none
    }
}
#message-purchased.fadeInDownBig {
    animation-duration:1s;
    animation-name:nfadeInDownBig
}
@keyframes nfadeInLeft {
    from {
        opacity:0;
        transform:translate3d(-100%,0,0)
    }
    to {
        opacity:1;
        transform:none
    }
}
#message-purchased.fadeInLeft {
    animation-duration:1s;
    animation-name:nfadeInLeft
}
@keyframes nfadeInLeftBig {
    from {
        opacity:0;
        transform:translate3d(-2000px,0,0)
    }
    to {
        opacity:1;
        transform:none
    }
}
#message-purchased.fadeInLeftBig {
    animation-duration:1s;
    animation-name:nfadeInLeftBig
}
@keyframes nfadeInRight {
    from {
        opacity:0;
        transform:translate3d(100%,0,0)
    }
    to {
        opacity:1;
        transform:none
    }
}
#message-purchased.fadeInRight {
    animation-duration:1s;
    animation-name:nfadeInRight
}
@keyframes nfadeInRightBig {
    from {
        opacity:0;
        transform:translate3d(2000px,0,0)
    }
    to {
        opacity:1;
        transform:none
    }
}
#message-purchased.fadeInRightBig {
    animation-duration:1s;
    animation-name:nfadeInRightBig
}
@keyframes nfadeInUp {
    from {
        opacity:0;
        transform:translate3d(0,100%,0)
    }
    to {
        opacity:1;
        transform:none
    }
}
#message-purchased.fadeInUp {
    animation-duration:1s;
    animation-name:nfadeInUp
}
@keyframes nfadeInUpBig {
    from {
        opacity:0;
        transform:translate3d(0,2000px,0)
    }
    to {
        opacity:1;
        transform:none
    }
}
#message-purchased.fadeInUpBig {
    animation-duration:1s;
    animation-name:nfadeInUpBig
}
@keyframes nfadeOutDown {
    from {
        opacity:1
    }
    to {
        opacity:0;
        transform:translate3d(0,100%,0)
    }
}
#message-purchased.fadeOutDown {
    animation-duration:1.5s;
    animation-name:nfadeOutDown;
    opacity:0
}
@keyframes nfadeOutDownBig {
    from {
        opacity:1
    }
    to {
        opacity:0;
        transform:translate3d(0,2000px,0)
    }
}
#message-purchased.fadeOutDownBig {
    animation-duration:1.5s;
    animation-name:nfadeOutDownBig;
    opacity:0
}
@keyframes nfadeOutLeft {
    from {
        opacity:1
    }
    to {
        opacity:0;
        transform:translate3d(-100%,0,0)
    }
}
#message-purchased.fadeOutLeft {
    animation-duration:1.5s;
    animation-name:nfadeOutLeft;
    opacity:0
}
@keyframes nfadeOutLeftBig {
    from {
        opacity:1
    }
    to {
        opacity:0;
        transform:translate3d(-2000px,0,0)
    }
}
#message-purchased.fadeOutLeftBig {
    animation-duration:1.5s;
    animation-name:nfadeOutLeftBig;
    opacity:0
}
@keyframes nfadeOutRight {
    from {
        opacity:1
    }
    to {
        opacity:0;
        transform:translate3d(100%,0,0)
    }
}
#message-purchased.fadeOutRight {
    animation-duration:1.5s;
    animation-name:nfadeOutRight;
    opacity:0
}
@keyframes nfadeOutRightBig {
    from {
        opacity:1
    }
    to {
        opacity:0;
        transform:translate3d(2000px,0,0)
    }
}
#message-purchased.fadeOutRightBig {
    animation-duration:1.5s;
    animation-name:nfadeOutRightBig;
    opacity:0
}
@keyframes nfadeOutUp {
    from {
        opacity:1
    }
    to {
        opacity:0;
        transform:translate3d(0,-100%,0)
    }
}
#message-purchased.fadeOutUp {
    animation-duration:1.5s;
    animation-name:nfadeOutUp;
    opacity:0
}
@keyframes nfadeOutUpBig {
    from {
        opacity:1
    }
    to {
        opacity:0;
        transform:translate3d(0,-2000px,0)
    }
}
#message-purchased.fadeOutUpBig {
    animation-duration:1.5s;
    animation-name:nfadeOutUpBig;
    opacity:0
}
@keyframes nflipInX {
    from {
        transform:perspective(400px) rotate3d(1,0,0,90deg);
        animation-timing-function:ease-in;
        opacity:0
    }
    40% {
        transform:perspective(400px) rotate3d(1,0,0,-20deg);
        animation-timing-function:ease-in
    }
    60% {
        transform:perspective(400px) rotate3d(1,0,0,10deg);
        opacity:1
    }
    80% {
        transform:perspective(400px) rotate3d(1,0,0,-5deg)
    }
    to {
        transform:perspective(400px)
    }
}
#message-purchased.flipInX {
    animation-duration:1s;
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    animation-name:nflipInX
}
@keyframes nflipInY {
    from {
        transform:perspective(400px) rotate3d(0,1,0,90deg);
        animation-timing-function:ease-in;
        opacity:0
    }
    40% {
        transform:perspective(400px) rotate3d(0,1,0,-20deg);
        animation-timing-function:ease-in
    }
    60% {
        transform:perspective(400px) rotate3d(0,1,0,10deg);
        opacity:1
    }
    80% {
        transform:perspective(400px) rotate3d(0,1,0,-5deg)
    }
    to {
        transform:perspective(400px)
    }
}
#message-purchased.flipInY {
    animation-duration:1s;
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    animation-name:nflipInY
}
@keyframes nflipOutX {
    from {
        transform:perspective(400px)
    }
    30% {
        transform:perspective(400px) rotate3d(1,0,0,-20deg);
        opacity:1
    }
    to {
        transform:perspective(400px) rotate3d(1,0,0,90deg);
        opacity:0
    }
}
#message-purchased.flipOutX {
    animation-duration:1.5s;
    animation-name:nflipOutX;
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    opacity:0
}
@keyframes nflipOutY {
    from {
        transform:perspective(400px)
    }
    30% {
        transform:perspective(400px) rotate3d(0,1,0,-15deg);
        opacity:1
    }
    to {
        transform:perspective(400px) rotate3d(0,1,0,90deg);
        opacity:0
    }
}
#message-purchased.flipOutY {
    animation-duration:1.5s;
    animation-name:nflipOutY;
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
    opacity:0
}
@keyframes nlightSpeedIn {
    from {
        transform:translate3d(100%,0,0) skewX(-30deg);
        opacity:0
    }
    60% {
        transform:skewX(20deg);
        opacity:1
    }
    80% {
        transform:skewX(-5deg);
        opacity:1
    }
    to {
        transform:none;
        opacity:1
    }
}
#message-purchased.lightSpeedIn {
    animation-duration:1s;
    animation-name:nlightSpeedIn;
    animation-timing-function:ease-out
}
@keyframes nlightSpeedOut {
    from {
        opacity:1
    }
    to {
        transform:translate3d(100%,0,0) skewX(30deg);
        opacity:0
    }
}
#message-purchased.lightSpeedOut {
    animation-duration:1.5s;
    animation-name:nlightSpeedOut;
    animation-timing-function:ease-in;
    opacity:0
}
@keyframes nrotateIn {
    from {
        transform-origin:center;
        transform:rotate3d(0,0,1,-200deg);
        opacity:0
    }
    to {
        transform-origin:center;
        transform:none;
        opacity:1
    }
}
#message-purchased.rotateIn {
    animation-duration:1s;
    animation-name:nrotateIn
}
@keyframes nrotateInDownLeft {
    from {
        transform-origin:left bottom;
        transform:rotate3d(0,0,1,-45deg);
        opacity:0
    }
    to {
        transform-origin:left bottom;
        transform:none;
        opacity:1
    }
}
#message-purchased.rotateInDownLeft {
    animation-duration:1s;
    animation-name:nrotateInDownLeft
}
@keyframes nrotateInDownRight {
    from {
        transform-origin:right bottom;
        transform:rotate3d(0,0,1,45deg);
        opacity:0
    }
    to {
        transform-origin:right bottom;
        transform:none;
        opacity:1
    }
}
#message-purchased.rotateInDownRight {
    animation-duration:1s;
    animation-name:nrotateInDownRight
}
@keyframes nrotateInUpLeft {
    from {
        transform-origin:left bottom;
        transform:rotate3d(0,0,1,45deg);
        opacity:0
    }
    to {
        transform-origin:left bottom;
        transform:none;
        opacity:1
    }
}
#message-purchased.rotateInUpLeft {
    animation-duration:1s;
    animation-name:nrotateInUpLeft
}
@keyframes nrotateInUpRight {
    from {
        transform-origin:right bottom;
        transform:rotate3d(0,0,1,-90deg);
        opacity:0
    }
    to {
        transform-origin:right bottom;
        transform:none;
        opacity:1
    }
}
#message-purchased.rotateInUpRight {
    animation-duration:1s;
    animation-name:nrotateInUpRight
}
@keyframes nrotateOut {
    from {
        transform-origin:center;
        opacity:1
    }
    to {
        transform-origin:center;
        transform:rotate3d(0,0,1,200deg);
        opacity:0
    }
}
#message-purchased.rotateOut {
    animation-duration:1.5s;
    animation-name:nrotateOut;
    opacity:0
}
@keyframes nrotateOutDownLeft {
    from {
        transform-origin:left bottom;
        opacity:1
    }
    to {
        transform-origin:left bottom;
        transform:rotate3d(0,0,1,45deg);
        opacity:0
    }
}
#message-purchased.rotateOutDownLeft {
    animation-duration:1.5s;
    animation-name:nrotateOutDownLeft;
    opacity:0
}
@keyframes nrotateOutDownRight {
    from {
        transform-origin:right bottom;
        opacity:1
    }
    to {
        transform-origin:right bottom;
        transform:rotate3d(0,0,1,-45deg);
        opacity:0
    }
}
#message-purchased.rotateOutDownRight {
    animation-duration:1.5s;
    animation-name:nrotateOutDownRight;
    opacity:0
}
@keyframes nrotateOutUpLeft {
    from {
        transform-origin:left bottom;
        opacity:1
    }
    to {
        transform-origin:left bottom;
        transform:rotate3d(0,0,1,-45deg);
        opacity:0
    }
}
#message-purchased.rotateOutUpLeft {
    animation-duration:1.5s;
    animation-name:nrotateOutUpLeft;
    opacity:0
}
@keyframes nrotateOutUpRight {
    from {
        transform-origin:right bottom;
        opacity:1
    }
    to {
        transform-origin:right bottom;
        transform:rotate3d(0,0,1,90deg);
        opacity:0
    }
}
#message-purchased.rotateOutUpRight {
    animation-duration:1.5s;
    animation-name:nrotateOutUpRight;
    opacity:0
}
@keyframes nrollIn {
    from {
        opacity:0;
        transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
    }
    to {
        opacity:1;
        transform:none
    }
}
#message-purchased.rollIn {
    animation-duration:1s;
    animation-name:nrollIn
}
@keyframes nrollOut {
    from {
        opacity:1
    }
    to {
        opacity:0;
        transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)
    }
}
#message-purchased.rollOut {
    animation-duration:1.5s;
    animation-name:nrollOut;
    opacity:0
}
@keyframes nzoomIn {
    from {
        opacity:0;
        transform:scale3d(.3,.3,.3)
    }
    50% {
        opacity:1
    }
}
#message-purchased.zoomIn {
    animation-duration:1s;
    animation-name:nzoomIn
}
@keyframes nzoomInDown {
    from {
        opacity:0;
        transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        animation-timing-function:cubic-bezier(.55,.055,.675,.19)
    }
    60% {
        opacity:1;
        transform:scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function:cubic-bezier(.175,.885,.32,1)
    }
}
#message-purchased.zoomInDown {
    animation-duration:1s;
    animation-name:nzoomInDown
}
@keyframes nzoomInLeft {
    from {
        opacity:0;
        transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);
        animation-timing-function:cubic-bezier(.55,.055,.675,.19)
    }
    60% {
        opacity:1;
        transform:scale3d(.475,.475,.475) translate3d(10px,0,0);
        animation-timing-function:cubic-bezier(.175,.885,.32,1)
    }
}
#message-purchased.zoomInLeft {
    animation-duration:1s;
    animation-name:nzoomInLeft
}
@keyframes nzoomInRight {
    from {
        opacity:0;
        transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);
        animation-timing-function:cubic-bezier(.55,.055,.675,.19)
    }
    60% {
        opacity:1;
        transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);
        animation-timing-function:cubic-bezier(.175,.885,.32,1)
    }
}
#message-purchased.zoomInRight {
    animation-duration:1s;
    animation-name:nzoomInRight
}
@keyframes nzoomInUp {
    from {
        opacity:0;
        transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);
        animation-timing-function:cubic-bezier(.55,.055,.675,.19)
    }
    60% {
        opacity:1;
        transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);
        animation-timing-function:cubic-bezier(.175,.885,.32,1)
    }
}
#message-purchased.zoomInUp {
    animation-duration:1s;
    animation-name:nzoomInUp
}
@keyframes nzoomOut {
    from {
        opacity:1
    }
    50% {
        opacity:0;
        transform:scale3d(.3,.3,.3)
    }
    to {
        opacity:0
    }
}
#message-purchased.zoomOut {
    animation-duration:1.5s;
    animation-name:nzoomOut;
    opacity:0
}
@keyframes nzoomOutDown {
    40% {
        opacity:1;
        transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);
        animation-timing-function:cubic-bezier(.55,.055,.675,.19)
    }
    to {
        opacity:0;
        transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);
        transform-origin:center bottom;
        animation-timing-function:cubic-bezier(.175,.885,.32,1)
    }
}
#message-purchased.zoomOutDown {
    animation-duration:1.5s;
    animation-name:nzoomOutDown;
    opacity:0
}
@keyframes nzoomOutLeft {
    40% {
        opacity:1;
        transform:scale3d(.475,.475,.475) translate3d(42px,0,0)
    }
    to {
        opacity:0;
        transform:scale(.1) translate3d(-2000px,0,0);
        transform-origin:left center
    }
}
#message-purchased.zoomOutLeft {
    animation-duration:1.5s;
    animation-name:nzoomOutLeft;
    opacity:0
}
@keyframes nzoomOutRight {
    40% {
        opacity:1;
        transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)
    }
    to {
        opacity:0;
        transform:scale(.1) translate3d(2000px,0,0);
        transform-origin:right center
    }
}
#message-purchased.zoomOutRight {
    animation-duration:1.5s;
    animation-name:nzoomOutRight;
    opacity:0
}
@keyframes nzoomOutUp {
    40% {
        opacity:1;
        transform:scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function:cubic-bezier(.55,.055,.675,.19)
    }
    to {
        opacity:0;
        transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);
        transform-origin:center bottom;
        animation-timing-function:cubic-bezier(.175,.885,.32,1)
    }
}
#message-purchased.zoomOutUp {
    animation-duration:1.5s;
    animation-name:nzoomOutUp;
    opacity:0
}
@keyframes nslideInDown {
    from {
        transform:translate3d(0,-100%,0);
        visibility:visible
    }
    to {
        transform:translate3d(0,0,0)
    }
}
#message-purchased.slideInDown {
    animation-duration:1s;
    animation-name:nslideInDown
}
@keyframes nslideInLeft {
    from {
        transform:translate3d(-100%,0,0);
        visibility:visible
    }
    to {
        transform:translate3d(0,0,0)
    }
}
#message-purchased.slideInLeft {
    animation-duration:1s;
    animation-name:nslideInLeft
}
@keyframes nslideInRight {
    from {
        transform:translate3d(100%,0,0);
        visibility:visible
    }
    to {
        transform:translate3d(0,0,0)
    }
}
#message-purchased.slideInRight {
    animation-duration:1s;
    animation-name:nslideInRight
}
@keyframes nslideInUp {
    from {
        transform:translate3d(0,100%,0);
        visibility:visible
    }
    to {
        transform:translate3d(0,0,0)
    }
}
#message-purchased.slideInUp {
    animation-duration:1s;
    animation-name:nslideInUp
}
@keyframes nslideOutDown {
    from {
        transform:translate3d(0,0,0);
        opacity:1
    }
    to {
        visibility:hidden;
        transform:translate3d(0,100%,0);
        opacity:0
    }
}
#message-purchased.slideOutDown {
    animation-duration:1.5s;
    animation-name:nslideOutDown;
    opacity:0
}
@keyframes nslideOutLeft {
    from {
        transform:translate3d(0,0,0);
        opacity:1
    }
    to {
        visibility:hidden;
        transform:translate3d(-100%,0,0);
        opacity:0
    }
}
#message-purchased.slideOutLeft {
    animation-duration:1.5s;
    animation-name:nslideOutLeft;
    opacity:0
}
@keyframes nslideOutRight {
    from {
        transform:translate3d(0,0,0);
        opacity:1
    }
    to {
        visibility:hidden;
        transform:translate3d(100%,0,0);
        opacity:0
    }
}
#message-purchased.slideOutRight {
    animation-duration:1.5s;
    animation-name:nslideOutRight;
    opacity:0
}
@keyframes nslideOutUp {
    from {
        transform:translate3d(0,0,0);
        opacity:1
    }
    to {
        visibility:hidden;
        opacity:0;
        transform:translate3d(0,-100%,0)
    }
}
#message-purchased.slideOutUp {
    animation-duration:1.5s;
    animation-name:nslideOutUp;
    opacity:0
}
#message-purchased .wn-nonajax {
    display:flex
}
#message-purchased .message-purchase-main {
    display:flex;
    position:relative;
    width:100%;
    height:100%
}
#message-purchased.wn-rounded-corner .message-purchase-main {
    border-radius:100px!important;
    overflow:hidden!important
}
#message-purchased.wn-rounded-corner img.wn-notification-image {
    border-radius:50px!important
}
#message-purchased.wn-rounded-corner #notify-close {
    right:-6px!important;
    top:-6px!important
}
#message-purchased.wn-rtl p,
.rtl #message-purchased p {
    float:right
}
#message-purchased.wn-rtl .message-purchase-main,
.rtl #message-purchased .message-purchase-main {
    padding:0 0 0 35px;
    text-align:right
}
#message-purchased.wn-rtl .message-purchase-main:before,
.rtl #message-purchased .message-purchase-main:before {
    transform:scaleX(-1)
}
#message-purchased.wn-rtl img,
.rtl #message-purchased img {
    float:right
}
#message-purchased.wn-rtl #notify-close,
.rtl #message-purchased #notify-close {
    right:unset!important;
    left:10px
}
#message-purchased.wn-rtl.wn-extended #notify-close,
.rtl #message-purchased.wn-extended #notify-close {
    right:unset!important;
    left:10px
}
#message-purchased.wn-rtl.wn-rounded-corner #notify-close,
.rtl #message-purchased.wn-rounded-corner #notify-close {
    right:unset!important;
    left:-6px
}