/**! hopscotch - v0.2.6
*
* Copyright 2016 LinkedIn Corp. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
 * This fade animation is based on Dan Eden's animate.css (http://daneden.me/animate/), under the terms of the MIT license.
 *
 * Copyright 2013 Dan Eden.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */
.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInUp {
  0% {
    opacity: 0;
    -moz-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInUp {
  0% {
    opacity: 0;
    -o-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-up {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -ms-transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -ms-transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fade-in-down {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    -moz-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    -o-transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-right {
  -webkit-animation-name: fadeInRight;
  -moz-animation-name: fadeInRight;
  -o-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -moz-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -o-transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -o-transform: translateX(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fade-in-left {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
.hopscotch-nav-button {
  margin-left: 5px;
  padding: .75em 1.2em .65em;
  background-color: #1c88c7;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  line-height: 1.2;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 3px;
}
.hopscotch-nav-button:hover {
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
}

.hopscotch-nav-button.prev {
  border: none;
  background-color: transparent;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  color: #1c88c7;
}
.hopscotch-nav-button.prev:hover {
  background-color: #d8e8f5;
  background-image: none;
}
div.hopscotch-bubble {
  background-color: #ffffff;
  border: 3px solid #7A94A8;
  border-radius: 3px;
  box-shadow: 0 17px 35px -14px rgba(39, 26, 5, .3);
  color: #333;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  font-size: 13px;
  position: absolute;
  z-index: 501;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -moz-background-clip: padding;
  /* for Mozilla browsers*/
  -webkit-background-clip: padding;
  /* Webkit */
  background-clip: padding-box;
  /*  browsers with full support */
}
div.hopscotch-bubble * {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
div.hopscotch-bubble.animate {
  -moz-transition-property: top, left;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: ease-in-out;
  -ms-transition-property: top, left;
  -ms-transition-duration: 1s;
  -ms-transition-timing-function: ease-in-out;
  -o-transition-property: top, left;
  -o-transition-duration: 1s;
  -o-transition-timing-function: ease-in-out;
  -webkit-transition-property: top, left;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: top, left;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
div.hopscotch-bubble.invisible {
  opacity: 0;
}
div.hopscotch-bubble.hide,
div.hopscotch-bubble .hide,
div.hopscotch-bubble .hide-all {
  display: none;
}
div.hopscotch-bubble h3 {
  margin: 0px;
  padding: 17px 50px 17px 15px;
  background-color: rgba(122, 148, 168, .2);
  font-family: var(--font-primary);
font-weight: var(--font-weight-bold);
  color: #333;
  font-size: 18px;
  line-height: 19px;
  font-weight: 400;
  text-transform: none;
}
div.hopscotch-bubble .hopscotch-bubble-container {
  position: relative;
  overflow: hidden;
  width: 280px;
  padding: 0px;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  /* to fix text flickering */
}
div.hopscotch-bubble .hopscotch-content {
  margin: 5px 15px 0px;
  padding: 8px 0px 0px;
  font-family: var(--font-primary);
font-weight: var(--font-weight-normal);
  font-size: 16px;
  line-height: 1.4em;
  font-weight: 400;
}
div.hopscotch-bubble .hopscotch-bubble-content {
  margin: 0;
}
div.hopscotch-bubble.no-number .hopscotch-bubble-content {
  margin: 0;
}
.hopscotch-bubble-close {
  position: absolute;
  top: 12px;
  right: 15px;
  display: block;
  padding: 7px 6px;
  border-radius: 10em;
  background-color: #1c88c7;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #fff;
  font-size: 25px;
  line-height: 0.5;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.hopscotch-bubble-close:hover {
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1));
}
div.hopscotch-bubble .hopscotch-bubble-close.hide,
div.hopscotch-bubble .hopscotch-bubble-close.hide-all {
  display: none;
}
div.hopscotch-bubble .hopscotch-bubble-number {
  display: none;
  width: 30px;
  height: 30px;
  margin-top: 15px;
  margin-right: 10px;
  margin-left: 10px;
  padding-right: 0px;
  padding-left: 2px;
  float: left;
  font-family: var(--font-primary);
font-weight: var(--font-weight-bold);
  color: #faa519;
  font-size: 33px;
  line-height: 25px;
  font-weight: 400;
  text-align: center;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container {
  position: absolute;
  width: 34px;
  height: 34px;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow,
div.hopscotch-bubble .hopscotch-bubble-arrow-container .hopscotch-bubble-arrow-border {
  width: 0;
  height: 0;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.up {
  top: -18px;
  left: 10px;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
  border-bottom: 13px solid rgb(228, 234, 238);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  position: relative;
  top: -12px;
  left: 4px;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
  border-bottom: 17px solid #7A94A8;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.down {
  bottom: -35px;
  left: 10px;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
  border-top: 13px solid #ffffff;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  position: relative;
  top: -18px;
  left: 4px;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
  border-top: 17px solid #7A94A8;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.left {
  top: 10px;
  left: -17px;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {
  border-bottom: 13px solid transparent;
  border-right: 13px solid #ffffff;
  border-top: 13px solid transparent;
  position: relative;
  left: 5px;
  top: -30px;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
  border-right: 17px solid #7A94A8;
  border-bottom: 17px solid transparent;
  border-top: 17px solid transparent;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.right {
  top: 10px;
  right: -35px;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
  border-bottom: 13px solid transparent;
  border-left: 13px solid #ffffff;
  border-top: 13px solid transparent;
  position: relative;
  left: -1px;
  top: -30px;
}
div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
  border-left: 17px solid #7A94A8;
  border-bottom: 17px solid transparent;
  border-top: 17px solid transparent;
}
.hopscotch-actions {
  margin: 15px;
  text-align: right;
}

/* EXTERNAL LINK TOOLTIP */
div.hopscotch-bubble.tour-externalTooltip {
  border: 3px solid #faa519;
}
div.hopscotch-bubble.tour-externalTooltip h3 {
  background-color: rgba(250, 165, 25, .2);
}
div.hopscotch-bubble.tour-externalTooltip .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
  border-bottom: 13px solid rgb(254, 237, 209);
}
div.hopscotch-bubble.tour-externalTooltip .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
  border-bottom: 17px solid #faa519;
}
div.hopscotch-bubble.tour-externalTooltip .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
  border-top: 17px solid #faa519;
}
div.hopscotch-bubble.tour-externalTooltip .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
  border-right: 17px solid #faa519;
}
div.hopscotch-bubble.tour-externalTooltip .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
  border-left: 17px solid #faa519;
}
/* draft quote*/
div.hopscotch-bubble.tour-draft {
  border: 2px solid #3e6787;
}

div.hopscotch-bubble.tour-draft .hopscotch-title {
  padding-bottom: 0;
  background: none;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  color: #595454;
}
div.hopscotch-bubble.tour-draft .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border{
  border-left: 17px solid #3e6787;
  border-width: 15px;
}
div.hopscotch-bubble.tour-draft .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
  border-bottom: 15px solid transparent;
  border-left: 15px solid #ffffff;
  border-top: 15px solid transparent;
  position: relative;
  left: -3px;
  top: -30px;
}
div.hopscotch-bubble.tour-draft .hopscotch-bubble-arrow-container.up{
  top: -16px;
}
div.hopscotch-bubble.tour-draft .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border{
  border-bottom: 17px solid #3e6787;
  border-width: 15px;
}
div.hopscotch-bubble.tour-draft .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  position: relative;
  top: -12px;
  left: 0px;
}
div.hopscotch-bubble.tour-draft .hopscotch-nav-button {
  padding: 5px 26px;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  line-height: 30px;
}
div.hopscotch-bubble.tour-draft .hopscotch-nav-button.prev {
  font-weight: bold;
}
div.hopscotch-bubble.tour-draft .hopscotch-bubble-close {
    right: 18px;
    font-size: 24px;
    width: 26px;
    box-sizing: border-box;
    height: 26px;
    text-align: center;
    line-height: 13px;
    text-indent: 0.5px;
}
div.hopscotch-bubble.tour-draft .hopscotch-content {
  line-height: 1.3em;
  color: #595454;
  padding-right: 5px;
}