/* -----------------------------------------
   Tour plugin
----------------------------------------- */
#joyRideTipContent { display: none; }
.joyRideTipContent { display: none; }

/* Default styles for the container */
.joyride-tip-guide {

    position: absolute;
    background: @tour-bg;
    display: none;
    color: #fff;
    width: 300px;
    top: 0; /* keeps the page from scrolling when calculating position */
    left: 0;
    font-weight: normal;
    border-radius: @border-radius-base;
    z-index: 9999;

    span.joyride-nub {

        display: block;
        position: absolute;
        left: 22px;
        width: 0;
        height: 0;
        border: solid 14px;
        border: solid 14px;

        &.top {
            border-color: @tour-bg;
            border-top-color: transparent !important;
            border-left-color: transparent !important;
            border-right-color: transparent !important;
            border-top-width: 0;
            top: -14px;
            bottom: none;
        }

        &.bottom {
            border-color: @tour-bg;
            border-bottom-color: transparent !important;
            border-left-color: transparent !important;
            border-right-color: transparent !important;
            border-bottom-width: 0;
            bottom: -14px;
            bottom: none;
        }

        &.right {
            border-color: @tour-bg;
            border-top-color: transparent !important;
            border-right-color: transparent !important;
            border-bottom-color: transparent !important;
            border-right-width: 0;
            top: 22px;
            bottom: none;
            left: auto;
            right: -14px;
        }

        &.left {
            border-color: @tour-bg;
            border-top-color: transparent !important;
            border-left-color: transparent !important;
            border-bottom-color: transparent !important;
            border-left-width: 0;
            top: 22px;
            left: -14px;
            right: auto;
            bottom: none;
        }

        &.top-right {
            border-color: @tour-bg;
            border-top-color: transparent !important;
            border-left-color: transparent !important;
            border-right-color: transparent !important;
            border-top-width: 0;
            top: -14px;
            bottom: none;
            left: auto;
            right: 28px;
        }
    }


    /* Typography */
    h1,h2,h3,h4,h5,h6 {
        line-height: 1.25;
        margin: 0;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
    }

    h1 { font-size: 30px; }
    h2 { font-size: 26px; }
    h3 { font-size: 22px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
    h6 { font-size: 14px; }

    p {
        font-size: 13px;
        line-height: 18px;
    }

    a {
        color: @white;
        text-decoration: none;
    }

    .joyride-next-tip {
        display: inline-block;
        margin-bottom: 0; // For input.btn
        font-weight: @btn-font-weight;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
        border: 1px solid transparent;
        white-space: nowrap;
        .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base);
        .user-select(none);
        .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
    }

    .joyride-close-tip {
        position: absolute;
        right: 10px;
        top: 10px;
        color: rgba(255,255,255,0.6) !important;
        text-decoration: none;
        font-family: Verdana, sans-serif;
        font-size: 10px;
        font-weight: bold;
        border-bottom: none !important;

        &:hover {
            color: rgba(255,255,255,1) !important;
        }
    }


    .joyride-content-wrapper {
        padding: 10px 10px 15px 15px;
    }
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .joyride-tip-guide {
    width: 95% !important;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    left: 2.5% !important;
  }
  .joyride-tip-guide-wrapper {
    width: 100%;
  }
}

.joyride-timer-indicator-wrap {
  width: 50px;
  height: 3px;
  border: solid 1px rgba(255,255,255,0.1);
  position: absolute;
  right: 17px;
  bottom: 16px;
}
.joyride-timer-indicator {
  display: block;
  width: 0;
  height: inherit;
  background: rgba(255,255,255,0.25);
}

.joyride-modal-bg {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgb(0,0,0);
  background: transparent;
  background: rgba(0,0,0, 0.5);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: 0.5;
  z-index: 100;
  display: none;
  top: 0;
  left: 0;
  cursor: pointer;
}

.joyride-expose-wrapper {
    background-color: #ffffff;
    position: absolute;
    z-index: 102;
    -moz-box-shadow: 0px 0px 30px #ffffff;
    -webkit-box-shadow: 0px 0px 30px #ffffff;
    box-shadow: 0px 0px 30px #ffffff;
}

.joyride-expose-cover {
    background: transparent;
    position: absolute;
    z-index: 10000;
    top: 0px;
    left: 0px;
}