#message-purchased {
    border: 0 none;
    border-radius: 0;
    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: 99999999;
    align-items: center;
    flex-direction: row;
}

#message-purchased.bottom_right {
    left: auto;
    right: 20px !important;
}

#message-purchased.top_right {
    left: auto !important;
    right: 20px !important;
    top: 20px !important;
    bottom: auto !important;
}

#message-purchased.top_left {
    top: 20px !important;
    bottom: auto !important;
}

#message-purchased img {
    border-radius: 0;
    transform: translateZ(0);
}

#message-purchased .wn-notification-image {
    width: 100%;
    max-height: 102%;
    object-fit:cover;
}

/*#message-purchased p {*/
#message-purchased .wn-notification-message-container {
    float: left;
    font-size: 13px;
    line-height: 20px;
    margin: 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: flex-start;
    align-items: center;
    width: auto;
    text-align: center;
    min-width: 102px;
    max-width: 102px;
}

#message-purchased .wn-notification-image
@media screen and (max-width: 600px) {
    #message-purchased .wn-notification-image-wrapper {
        width: 96px;
        max-width: 96px;
    }
    #message-purchased img {
        max-width: 100%;
    }
}

/*#message-purchased p.wn-notification-message-container {*/
#message-purchased .wn-notification-message-container {
    overflow: hidden;
    max-width: 400px;
    line-height: 1.8;
    display: grid;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
}

/*#message-purchased p a,*/
/*#message-purchased p .wn-popup-product-title {*/
#message-purchased .wn-notification-message-container a,
#message-purchased .wn-notification-message-container .wn-popup-product-title {
    text-decoration: none;
    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 {*/
#message-purchased .wn-notification-message-container a:hover {
    color: #000;
}

/*#message-purchased p small {*/
#message-purchased .wn-notification-message-container 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, .rtl #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 {
    box-sizing: content-box;
    cursor: pointer;
    position: absolute;
    padding: 2px;
    border: none;
    overflow: hidden;
    display: flex;
    opacity: 1;
    transition: opacity 200ms;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    right: -10px;
    top: -10px;
    z-index: 1;
}

#message-purchased #notify-close.classic {
    right: -26px;
    top: -16px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    background: unset !important;
}

#message-purchased #notify-close:before {
    content: "\2715";
    font-size: 14px;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
#message-purchased #notify-close.classic:before {
    font-size: 20px;
}

#message-purchased #notify-close:hover {
    opacity: .8;
}

#message-purchased.wn-rounded-corner .wn-notification-message-container .wn-notification-atc {
    right: 30px;
}

.rtl #message-purchased.wn-rounded-corner .wn-notification-message-container .wn-notification-atc {
    left: 30px;
}

#message-purchased.wn-rounded-corner #notify-close.classic {
    right: -15px;
    top: -10px;
}

#message-purchased.img-right .wn-notification-message-container .wn-notification-atc {
    right: 105px;
}

.rtl #message-purchased.img-right .wn-notification-message-container .wn-notification-atc {
    left: 105px;
}


body #message-purchased.wn-background-template-type-2 {
    max-width: 515px;
}

@media screen and (max-width: 767px) {
    body #message-purchased {
        bottom: 10px !important;
        box-sizing: border-box;
        left: 10px !important;
        right: 10px !important;
        top: auto !important;
        margin: 0 auto;
    }

    body #message-purchased.wn-extended {
        bottom: 10px !important;
        box-sizing: border-box;
        top: auto !important;
    }

    body #message-purchased.wn-extended.wn-background-template-type-2 {
        width: unset !important;
    }

    #message-purchased.bottom_right, #message-purchased.top_right {
        left: 10px !important;
        right: 10px !important;
    }

    body #message-purchased.top_left, body #message-purchased.top_right {
        top: 10px !important;
        bottom: auto !important;
    }

    #message-purchased .wn-notification-message-container {
        font-size: 11px;
    }

    #message-purchased.wn-product-with-image .wn-notification-message-container {
        width: 70%;
    }

    #message-purchased .wn-notification-message-container a {
        font-size: 13px;
    }

    #message-purchased .wn-notification-message-container small {
        margin-bottom: 0;
    }

    #message-purchased .wn-notification-message-container {
        padding-top: 0;
        padding-bottom: 0;
    }

    #message-purchased.wn-extended .wn-notification-message-container {
        width: auto;
    }

    #message-purchased.wn-extended.wn-product-with-image .wn-notification-message-container {
        max-width: 220px;
    }

    #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(0px, 100%, 0px);
    }
    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(0px, 100%, 0px);
    }
}

#message-purchased.fade-out {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-name: nFadeOut;
    opacity: 1;
}

/*nbounceIn*/
@keyframes nbounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    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;
}

/*nbounceInDown*/
@keyframes nbounceInDown {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    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;
}

/*bounceInLeft*/
@keyframes nbounceInLeft {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    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;
}

/*bounceInRight*/
@keyframes nbounceInRight {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    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;
}

/*nbounceInUp*/
@keyframes nbounceInUp {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    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;
}

/*bounceOut*/
@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;
}

/*bounceOutDown*/
@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;
}

/*bounceOutLeft*/
@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;
}

/*bounceOutRight*/
@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;
}

/*nbounceOutUp*/
@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;
}

/*fadeInDown*/
@keyframes nfadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#message-purchased.fadeInDown {
    animation-duration: 1s;
    animation-name: nfadeInDown;
}

/*fadeInDownBig*/
@keyframes nfadeInDownBig {
    from {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#message-purchased.fadeInDownBig {
    animation-duration: 1s;
    animation-name: nfadeInDownBig;
}

/*fadeInLeft*/
@keyframes nfadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#message-purchased.fadeInLeft {
    animation-duration: 1s;
    animation-name: nfadeInLeft;
}

/*fadeInLeftBig*/
@keyframes nfadeInLeftBig {
    from {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#message-purchased.fadeInLeftBig {
    animation-duration: 1s;
    animation-name: nfadeInLeftBig;
}

/*fadeInRight*/
@keyframes nfadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#message-purchased.fadeInRight {
    animation-duration: 1s;
    animation-name: nfadeInRight;
}

/*fadeInRightBig*/
@keyframes nfadeInRightBig {
    from {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#message-purchased.fadeInRightBig {
    animation-duration: 1s;
    animation-name: nfadeInRightBig;
}

/*fadeInUp*/
@keyframes nfadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#message-purchased.fadeInUp {
    animation-duration: 1s;
    animation-name: nfadeInUp;
}

/*fadeInUpBig*/
@keyframes nfadeInUpBig {
    from {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

#message-purchased.fadeInUpBig {
    animation-duration: 1s;
    animation-name: nfadeInUpBig;
}

/*fadeOutDown*/
@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;
}

/*fadeOutDownBig*/
@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;
}

/*fadeOutLeft*/
@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;
}

/*fadeOutLeftBig*/
@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;
}

/*fadeOutRight*/
@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;
}

/*fadeOutRightBig*/
@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;
}

/*fadeOutUp*/
@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;
}

/*fadeOutUpBig*/
@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;
}

/*flipInX*/
@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;
}

/*flipInY*/
@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;
}

/*flipOutX*/
@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;
}

/*flipOutY*/
@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;
}

/*lightSpeedIn*/
@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;
}

/*lightSpeedOut*/
@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;
}

/*rotateIn*/
@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;
}

/*rotateInDownLeft*/
@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;
}

/*rotateInDownRight*/
@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;
}

/*rotateInUpLeft*/
@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;
}

/*rotateInUpRight*/
@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;
}

/*rotateOut*/
@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;
}

/*rotateOutDownLeft*/
@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;
}

/*rotateOutDownRight*/
@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;
}

/*rotateOutUpLeft*/
@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;
}

/*rotateOutUpRight*/
@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;
}

/*rollIn*/
@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;
}

/*rollOut*/
@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;
}

/*zoomIn*/
@keyframes nzoomIn {
    from {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

#message-purchased.zoomIn {
    animation-duration: 1s;
    animation-name: nzoomIn;
}

/*zoomInDown*/
@keyframes nzoomInDown {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

#message-purchased.zoomInDown {
    animation-duration: 1s;
    animation-name: nzoomInDown;
}

/*zoomInLeft*/
@keyframes nzoomInLeft {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

#message-purchased.zoomInLeft {
    animation-duration: 1s;
    animation-name: nzoomInLeft;
}

/*zoomInRight*/
@keyframes nzoomInRight {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

#message-purchased.zoomInRight {
    animation-duration: 1s;
    animation-name: nzoomInRight;
}

/*zoomInUp*/
@keyframes nzoomInUp {
    from {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

#message-purchased.zoomInUp {
    animation-duration: 1s;
    animation-name: nzoomInUp;
}

/*zoomOut*/
@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;
}

/*zoomOutDown*/
@keyframes nzoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

#message-purchased.zoomOutDown {
    animation-duration: 1.5s;
    animation-name: nzoomOutDown;
    opacity: 0;
}

/*zoomOutLeft*/
@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;
}

/*zoomOutRight*/
@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;
}

/*zoomOutUp*/
@keyframes nzoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

#message-purchased.zoomOutUp {
    animation-duration: 1.5s;
    animation-name: nzoomOutUp;
    opacity: 0;
}

/*slideInDown*/
@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;
}

/*slideInLeft*/
@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;
}

/*slideInRight*/
@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;
}

/*slideInUp*/
@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;
}

/*slideOutDown*/
@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;
}

/*slideOutLeft*/
@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;
}

/*slideOutRight*/
@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;
}

/*slideOutUp*/
@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;
}

/*Non ajax*/
#message-purchased .wn-nonajax {
    display: flex;
}

/*rounded corner*/
#message-purchased .message-purchase-main {
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 30px 0 0;
    display: flex;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
    position: relative;
    width: 100%;
    height: 96px;
}

#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;
}

/*RTL*/
/*.rtl #message-purchased p,*/
/*#message-purchased.wn-rtl p {*/
.rtl #message-purchased .wn-notification-message-container,
#message-purchased.wn-rtl .wn-notification-message-container {
    float: right;
}

.rtl #message-purchased .message-purchase-main,
#message-purchased.wn-rtl .message-purchase-main {
    padding: 0 0 0 30px;
    text-align: right;
}

.rtl #message-purchased .message-purchase-main:before,
#message-purchased.wn-rtl .message-purchase-main:before {
    transform: scaleX(-1);
}

.rtl #message-purchased img,
#message-purchased.wn-rtl img {
    float: right;
}

.rtl #message-purchased #notify-close.classic,
#message-purchased.wn-rtl #notify-close.classic {
    right: unset !important;
    left: -26px;
}
.rtl #message-purchased #notify-close.default,
#message-purchased.wn-rtl #notify-close.default {
    right: unset !important;
    left: -10px;
}

.rtl #message-purchased.wn-extended.default #notify-close,
#message-purchased.wn-rtl.wn-extended.default #notify-close {
    right: unset !important;
    left: -10px;
}

.rtl #message-purchased.wn-extended.classic #notify-close,
#message-purchased.wn-rtl.wn-extended.classic #notify-close {
    right: unset !important;
    left: -26px;
}


.rtl #message-purchased.wn-rounded-corner #notify-close,
#message-purchased.wn-rtl.wn-rounded-corner #notify-close {
    right: unset !important;
    left: -6px;
}


#message-purchased .wn-notification-message-container .wn-notification-atc {
    box-sizing: border-box;
    position: absolute;
    color: inherit;
    width: auto;
    max-width: 150px;
    height: 20px;
    font-size: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    background-color: currentColor;
    border-radius: 25px;
    padding: 2px 3px;
    cursor: pointer;
    transition: 0.2s;
    user-select: none;

}

.rtl #message-purchased .wn-notification-message-container .wn-notification-atc {
    right: unset;
    left: 10px;
}

.wn-notification-atc.wn-notification-loading::before {
    content: "";
    position: absolute;
    border-width: 8px;
    border-style: solid;
    border-radius: 50%;
    border-color: currentColor currentColor currentColor transparent;
    filter: invert();
    left: 2px;
    top: 2px;
    animation: wn-circle 1s linear infinite;
    z-index: 1;
}

.rtl .wn-notification-atc.wn-notification-loading::before {
    left: unset;
    right: 2px;
}

.wn-notification-atc.wn-notification-loading::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    z-index: 2;
}

.rtl .wn-notification-atc.wn-notification-loading::after {
    left: unset;
    right: 3px;
}

.wn-notification-atc.wn-notification-loading i {
    visibility: hidden;
}

@keyframes wn-circle {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

#message-purchased .wn-notification-message-container .wn-notification-atc:hover {
    filter: invert(1);
}

#message-purchased .wn-notification-message-container .wn-notification-atc > i {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-right: 2px;
    background-color: currentColor;
    filter: invert();
}

.rtl #message-purchased .wn-notification-message-container .wn-notification-atc > i {
    margin-right: unset;
    margin-left: 2px;
}

#message-purchased .wn-notification-message-container .wn-notification-atc > i img {
    filter: invert();
    mix-blend-mode: difference;
    max-width: 16px !important;
}

#message-purchased .message-purchase-main .wn-notification-message-container .wn-notification-atc > a {
    color: inherit;
    width: fit-content;
    filter: invert();
    /*text-shadow: 0 0 currentColor;*/
    font-weight: 700;
    font-size: 10px;
    background: initial;
    border: 0;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-transform: math-auto;
}
#message-purchased .message-purchase-main .wn-notification-message-container .wn-notification-atc > a:before,
#message-purchased .message-purchase-main .wn-notification-message-container .wn-notification-atc > a:after {
    display: none;
}
#message-purchased .message-purchase-main .wn-notification-message-container .wn-notification-atc .added_to_cart {
    display: none;
}

.wn-notification-warning-wrap {
    max-width: calc(100% - 40px);
    min-width: 250px;
    height: auto;
    min-height: 60px;
    max-height: 200px;
    padding: 5px 10px;
    position: fixed;
    z-index: 9999999999;
    left: 50%;
    bottom: 20px;
    background: #111;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    animation-fill-mode: both;
    transform: translate(-50%, 0);
}
.wn-notification-warning-wrap a, .wn-notification-warning-wrap .wc-forward {
    display: none !important;
}
.wn-notification-warning-wrap *::before,
.wn-notification-warning-wrap *::after {
    display: none !important;
}
.wn-notification-warning-wrap * {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    border: unset !important;
    list-style: none !important;
}
.wn-notification-warning-wrap.wn-notification-warning-wrap-open {
    animation-duration: 1s;
    animation-name: vi-wn-warning-slide_in_up;
}

@keyframes vi-wn-warning-slide_in_up {
    from {
        transform: translate3d(-50%, 100%, 0);
        visibility: visible;
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.wn-notification-warning-wrap.wn-notification-warning-wrap-close {
    animation-duration: 1s;
    animation-name: vi-wn-warning-slide_out_down;
}

@keyframes vi-wn-warning-slide_out_down {
    from {
        transform: translate3d(-50%, 0, 0);
        opacity: 1;
    }
    to {
        visibility: hidden;
        transform: translate3d(-50%, 100%, 0);
        opacity: 0;
    }
}

#message-purchased .wn-notification-image-wrapper {
    vertical-align: middle;
    box-sizing: border-box;
}
.wn-notification-wrap_select{
    display:flex;
}
.wn-notification-wrap_select .dropdown{
    width: 100%;
}