.dtree {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size: 11px;color: #666;white-space: nowrap;width:100%;max-width: 200px;float:left;}
.dtree img {border: 0px;vertical-align: middle;}
.dtree a {color: #333;text-decoration: none;}
.dtree a.node, .dtree a.nodeSel {white-space: nowrap;padding: 1px 2px 1px 2px;}
.dtree a.node:hover, .dtree a.nodeSel:hover {color: #333;text-decoration: underline;}
.dtree a.nodeSel {background-color: #c0d2ec;}
.dtree .clip {overflow: hidden;}
.dtree i {color: #cccccc;}
.dtree i:hover {color: #000000;}
.cbform-info {text-align:left;font-weight:700;padding:10px;margin: 10px 0 23px 0;background-color: #cccccc;display:block;}
.cbform-row {  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  margin-bottom:13px;width:100%;vertical-align:middle;}
.cbform-label {display:block;float:left;width:20%;min-width: 150px;padding-right:5px;font-weight:700;height:40px;}
.cbform-field {margin-top:-8px;width:80%;text-align:left;}
.cbform-input, .custom-file-input {padding: 5px 10px;width:95%;height:40px;border: 1px solid #cccccc;}
#cbform-submit {padding: 5px 20px;border-radius: 5px;}
.alert-success {  color: #155724;  background-color: #d4edda;  border-color: #c3e6cb;padding:10px;margin:10px;}
.alert-danger {  color: #721c24;  background-color: #f8d7da;  border-color: #f5c6cb;padding:10px;margin:10px;}
#produkblock {width: 30%;min-width: 200px;float: left;border: solid 1px #cccccc;margin: 10px;padding: 10px;display: block;}
#produkbox {height: 400px;overflow: auto;}
#produkpic {width: 100%;height: 200px;}
#produktitle {font-weight: 900;margin: 10px 0;}
#produkactionbox {margin-top: 10px;}
#produkinfo {padding:5px 15px; display:block; text-decoration:none; float:left; background: #0F5DC1;text-align: center;font-weight: 700;color: white;border-radius: 5px;}
#produkinfo:hover {background: #083674;}
#produkorder {padding:5px 15px;display: block; text-decoration:none; float:right; background: #0DC152;text-align: center;font-weight: 700;color: white;border-radius: 5px;}
#produkorder:hover {background: #088939;}
.tombolhijau {padding:5px 15px; display: inline-block; text-decoration:none; background: #0DC152; text-align: center;font-weight: 700;color: white;border-radius: 5px;}
.tombolhijau:hover {background: #088939;}
.menuproduk {width: 100%;padding: 10px;}
.leftmenuproduk {width: 100%;max-width: 500px;float: left;}
.rightmenuproduk {width: 100%;max-width: 400px;float: right;} .searchproduk {
all: unset; width: 60% !important;
max-width: 400px !important;
height: 35px !important;
border: solid 1px #cccccc !important;
border-radius: 3px;
padding: 2px 5px !important;
box-sizing: border-box !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background: #ffffff !important;
margin-right: 5px;
}
.submitsearch {
all: unset;
height: 25px; margin: 0;
padding: 5px 20px;
background: #0DC152;
border-radius: 3px;
color: #ffffff;
display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
#pronavbar {width: 100%;text-align: center;padding: 10px;}
a.pronavi {padding: 2px 8px;border: solid 1px #cccccc;color: #484848; display:inline-block; width: 40px;}
a.proaktif {padding: 2px 8px;border: solid 1px #cccccc;background: #484848;color: #ffffff;pointer-events: none;display:inline-block; width: 40px;}
@media (max-width: 477px) {
#produkblock {width:98%;border: solid 1px #cccccc;margin: 10px;padding: 10px;}
}
#downline1 {float:left;font-size:11px; width:100%; max-width:400px; overflow: hidden;}
.geserkanan {margin:0; padding: 0 0 0 15px; background:url(//tokoview.com/wp-content/plugins/wp-affiliasi/img/line.gif) repeat-y;}
.listmember {background:url(//tokoview.com/wp-content/plugins/wp-affiliasi/img/line.gif) repeat-y;}
#detilprofil {      position: fixed; z-index: 1; top: 0;  left: 0;  width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
a:hover {cursor:pointer;}
#themember {  position: fixed;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  font-size:10px;  background-color: #ffffff;  width: 100%;  max-width: 500px;  height: 80%;  overflow-y: scroll;  padding: 10px;}
.close {position: sticky;  top: 10px;  float: right;padding: 5px;background-color: red;color: white;}
.stickytooltip {box-shadow: 5px 5px 8px #818181; -webkit-box-shadow: 5px 5px 8px #818181; -moz-box-shadow: 5px 5px 8px #818181; display:none; position:absolute; border:5px solid black; padding:4px; background:white; z-index:3000;}
.stickytooltip .stickystatus {background:black; color:white; padding:5px; text-align:center; font:bold 11px Arial;}
.pyramid-container {
max-width: 900px; margin: 1px auto; padding: 1rem;
background-color: #f8f8f8;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
font-family: 'Inter', sans-serif;
}
.level-row {
display: flex; align-items: center; width: 100%; padding: 1px 0;
}
.level-row:last-child {
border-bottom: none; } .level-bar-container {
flex-grow: 1; display: flex; justify-content: center; align-items: center; }
.no-members-message {
text-align: center;
color: #718096;
padding: 1rem;
}@font-face {
font-family: "VI_WN_ICON_CLOSE";
src: url(//tokoview.com/wp-content/plugins/woo-notification/fonts/icons-close.eot);
src: url(//tokoview.com/wp-content/plugins/woo-notification/fonts/icons-close.eot?#iefix) format("embedded-opentype"),
url(//tokoview.com/wp-content/plugins/woo-notification/fonts/icons-close.woff2) format("woff2"),
url(//tokoview.com/wp-content/plugins/woo-notification/fonts/icons-close.woff) format("woff"),
url(//tokoview.com/wp-content/plugins/woo-notification/fonts/icons-close.ttf) format("truetype"),
url(//tokoview.com/wp-content/plugins/woo-notification/fonts/icons-close.svg#icons-close) format("svg");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@font-face {
font-family: "VI_WN_ICON_CLOSE";
src: url(//tokoview.com/wp-content/plugins/woo-notification/fonts/icons-close.svg#icons-close) format("svg");
}
}
[class^="vi-wn-icons-close-"]:before, [class*=" vi-wn-icons-close-"]:before,
[class^="vi-wn-icons-close-"]:after, [class*=" vi-wn-icons-close-"]:after {
font-family: VI_WN_ICON_CLOSE;
font-size: 20px;
font-style: normal;
}
.vi-wn-icons-close-cancel:before {
content: "\f100";
}
.vi-wn-icons-close-cross:before {
content: "\f101";
}
.vi-wn-icons-close-close:before {
content: "\f102";
}#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 {
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;
height: 100%;
text-align: center;
min-width: 96px;
max-width: 96px;
}
@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 {
overflow: hidden;
max-width: 400px;
line-height: 1.8;
display: grid;
align-items: center;
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 10px;
}
#message-purchased p a,
#message-purchased p .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 {
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: 10px;
top: 10px;
width: 22px;
height: 22px;
border: none;
overflow: hidden;
display: flex;
opacity: 1;
transition: opacity 200ms;
}
#message-purchased #notify-close:before {
content: "\f101";
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: 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 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: 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;
} @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;
} @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;
} @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;
} @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;
} @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;
} @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(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;
} @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;
} @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;
} @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;
} @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(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;
} @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(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;
} @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 {
box-sizing: border-box;
padding: 0 35px 0 0;
display: flex;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
position: relative;
width: 100%;
height: 96px;
overflow: hidden;
}
#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;
} .rtl #message-purchased p,
#message-purchased.wn-rtl p {
float: right;
}
.rtl #message-purchased .message-purchase-main,
#message-purchased.wn-rtl .message-purchase-main {
padding: 0 0 0 35px;
text-align: right;
}
#message-purchased.img-right .message-purchase-main, .rtl #message-purchased.img-right .message-purchase-main {
padding: 0;
}
.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,
#message-purchased.wn-rtl #notify-close {
right: unset !important;
left: 10px;
}
.rtl #message-purchased.img-right #notify-close,
#message-purchased.wn-rtl.img-right #notify-close {
left: -20px;
}
.rtl #message-purchased.wn-extended #notify-close,
#message-purchased.wn-rtl.wn-extended #notify-close {
right: unset !important;
left: 10px;
}
.rtl #message-purchased.wn-rounded-corner #notify-close,
#message-purchased.wn-rtl.wn-rounded-corner #notify-close {
right: unset !important;
left: -6px;
}
.wn-slider-wrapper {
padding: 0 60px;
position: relative;
}
#message-purchased .wn-notification-image-wrapper {
vertical-align: middle;
box-sizing: border-box;
}