.react-mui-context{ .joyride-beacon { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 0; cursor: pointer; display: inline-block; line-height: 1; padding: 0; height: 36px; position: relative; width: 36px; z-index: 1500 } .joyride-beacon:active,.joyride-beacon:focus,.joyride-beacon:hover { outline: none } .joyride-beacon__inner { -webkit-animation: joyride-beacon-inner 1.2s infinite ease-in-out; animation: joyride-beacon-inner 1.2s infinite ease-in-out; background-color: #f04; border-radius: 50%; display: block; height: 50%; left: 50%; opacity: .7; position: absolute; top: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 50% } .joyride-beacon__outer { -webkit-animation: joyride-beacon-outer 1.2s infinite ease-in-out; animation: joyride-beacon-outer 1.2s infinite ease-in-out; background-color: rgba(255,0,68,.2); border: 2px solid #f04; border-radius: 50%; box-sizing: border-box; display: block; height: 100%; left: 0; opacity: .9; position: absolute; top: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; width: 100% } .joyride-overlay { bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 1500 } .joyride-hole { border-radius: 2px; box-shadow: 0 0 0 9999px rgba(0,0,0,.5),0 0 15px rgba(0,0,0,.4); position: absolute; transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; } .joyride-hole.safari { box-shadow: 0 0 999px 9999px rgba(0,0,0,.4),0 0 15px rgba(0,0,0,.5) } .joyride-tooltip { background-color: #fff; border-radius: 2px; color: #555; cursor: default; -webkit-filter: drop-shadow(-1px -2px 3px rgba(0,0,0,.3)) drop-shadow(1px 2px 3px rgba(0,0,0,.3)); filter: drop-shadow(-1px -2px 3px rgba(0,0,0,.3)) drop-shadow(1px 2px 3px rgba(0,0,0,.3)); opacity: 0; padding: 16px; pointer-events: auto; -webkit-transform: translateZ(0); transform: translateZ(0); width: 290px; z-index: 1510 } .joyride-tooltip--animate { -webkit-animation: joyride-tooltip .4s forwards; animation: joyride-tooltip .4s forwards; -webkit-animation-timing-function: cubic-bezier(0,1.05,.55,1.18); animation-timing-function: cubic-bezier(0,1.05,.55,1.18) } .joyride-tooltip__triangle { background-repeat: no-repeat; position: absolute } .joyride-tooltip.bottom,.joyride-tooltip.bottom-left,.joyride-tooltip.bottom-right { margin-top: 10px } .joyride-tooltip.bottom-left .joyride-tooltip__triangle,.joyride-tooltip.bottom-right .joyride-tooltip__triangle,.joyride-tooltip.bottom .joyride-tooltip__triangle { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M24 12L12 0 0 12z'/%3E%3C/svg%3E"); height: 12px; left: 50%; top: -10px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 24px } .joyride-tooltip.top,.joyride-tooltip.top-left,.joyride-tooltip.top-right { margin-bottom: 10px } .joyride-tooltip.top-left .joyride-tooltip__triangle,.joyride-tooltip.top-right .joyride-tooltip__triangle,.joyride-tooltip.top .joyride-tooltip__triangle { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M0 0l12 12L24 0z'/%3E%3C/svg%3E"); bottom: -10px; height: 12px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 24px } .joyride-tooltip.bottom-left .joyride-tooltip__triangle,.joyride-tooltip.top-left .joyride-tooltip__triangle { left: 3%; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } @media screen and (min-width: 480px) { .joyride-tooltip.bottom-left .joyride-tooltip__triangle,.joyride-tooltip.top-left .joyride-tooltip__triangle { left:2% } } .joyride-tooltip.bottom-right .joyride-tooltip__triangle,.joyride-tooltip.top-right .joyride-tooltip__triangle { left: auto; right: 3%; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } @media screen and (min-width: 480px) { .joyride-tooltip.bottom-right .joyride-tooltip__triangle,.joyride-tooltip.top-right .joyride-tooltip__triangle { right:2% } } .joyride-tooltip.left { margin-right: 8px } .joyride-tooltip.left .joyride-tooltip__triangle { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M0 24l12-12L0 0z'/%3E%3C/svg%3E"); height: 24px; right: -10px; width: 12px } .joyride-tooltip.right { margin-left: 8px } .joyride-tooltip.right .joyride-tooltip__triangle { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 0L0 12l12 12z'/%3E%3C/svg%3E"); height: 24px; left: -10px; width: 12px } .joyride-tooltip__close { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 0; cursor: pointer; display: inline-block; line-height: 1; padding: 0; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.117.323L8.044 6.398 2.595.323a1.105 1.105 0 0 0-1.562 1.562L6.482 7.96.323 14.119a1.105 1.105 0 0 0 1.562 1.562L7.96 9.608l5.449 6.073a1.103 1.103 0 1 0 1.56-1.562L9.517 8.046l6.159-6.161a1.103 1.103 0 1 0-1.56-1.562z' fill='rgba(85,85,85,0.5)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; height: 12px; position: absolute; right: 10px; text-decoration: none; top: 10px; width: 12px; z-index: 10; display: block } .joyride-tooltip__close:active,.joyride-tooltip__close:focus,.joyride-tooltip__close:hover { outline: none } .joyride-tooltip__close:focus,.joyride-tooltip__close:hover { color: rgba(60,60,60,.5); outline: none } .joyride-tooltip__close--header { right: 20px; top: 20px } .joyride-tooltip__header { color: rgba(0,0,0,0.87); font-size: 20px; padding-bottom: 6px; padding-right: 18px; position: relative } .joyride-tooltip__header~.joyride-tooltip__main { padding: 12px 0 18px } .joyride-tooltip__main { font-size: 13px; padding-bottom: 18px; padding-right: 18px } .joyride-tooltip__footer { text-align: right; margin-bottom: -6px; margin-right: -6px; } .joyride-tooltip__button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: 0; cursor: pointer; display: inline-block; line-height: 1; padding: 0 } .joyride-tooltip__button:active,.joyride-tooltip__button:focus,.joyride-tooltip__button:hover { outline: none } .joyride-tooltip__button--primary { border-radius: 2px; color: #009688; padding: 6px 12px; transition: background-color .2s ease-in-out; text-transform: uppercase; font-weight: 500; font-size: 15px; } .joyride-tooltip__button--primary:active,.joyride-tooltip__button--primary:focus,.joyride-tooltip__button--primary:hover { /* background-color: #ff1f5a; color: #fff */ } .joyride-tooltip__button--secondary { color: #757575; font-weight: 500; margin-right: 12px; } .joyride-tooltip__button--skip { color: #ccc; float: left; margin-right: 10px } .joyride-tooltip--standalone .joyride-tooltip__main { padding-bottom: 0 } .joyride-tooltip--standalone .joyride-tooltip__footer { display: none } } @media screen and (min-width: 480px) { .joyride-tooltip { width:360px } } @media screen and (min-width: 960px) { .joyride-tooltip { width:450px } } @-webkit-keyframes joyride-tooltip { 0% { -webkit-transform: scale(.1); transform: scale(.1) } to { opacity: 1; -webkit-transform: perspective(1px) scale(1); transform: perspective(1px) scale(1) } } @keyframes joyride-tooltip { 0% { -webkit-transform: scale(.1); transform: scale(.1) } to { opacity: 1; -webkit-transform: perspective(1px) scale(1); transform: perspective(1px) scale(1) } } @-webkit-keyframes joyride-beacon-inner { 20% { opacity: .9 } 90% { opacity: .7 } } @keyframes joyride-beacon-inner { 20% { opacity: .9 } 90% { opacity: .7 } } @-webkit-keyframes joyride-beacon-outer { 0% { -webkit-transform: scale(1); transform: scale(1) } 45% { opacity: .7; -webkit-transform: scale(.75); transform: scale(.75) } to { opacity: .9; -webkit-transform: scale(1); transform: scale(1) } } @keyframes joyride-beacon-outer { 0% { -webkit-transform: scale(1); transform: scale(1) } 45% { opacity: .7; -webkit-transform: scale(.75); transform: scale(.75) } to { opacity: .9; -webkit-transform: scale(1); transform: scale(1) } }