.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)
  }
}