/* Training tours (js/training-tour.js): driver.js's popover in Central's look. Plain CSS beside social-canvas.css, so the
   tour can be restyled without regenerating main1.css. */

.driver-popover.ebes-tour {
    max-width: 360px;
    padding: 18px 20px 14px;
    border-radius: 8px;
    font-family: inherit;
    color: #1f2933;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
}

.driver-popover.ebes-tour .driver-popover-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}

.driver-popover.ebes-tour .driver-popover-description {
    font-size: 14px;
    line-height: 1.5;
}

.ebes-tour__progress {
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #767676;
    margin-bottom: 6px;
}

.ebes-tour__hint {
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #eef6ff;
    color: #1d4f91;
    font-size: 13px;
}

.driver-popover.ebes-tour .driver-popover-footer button {
    font-family: inherit;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 4px;
    text-shadow: none;
}

.driver-popover.ebes-tour .driver-popover-next-btn {
    background: #1779ba;
    border-color: #1779ba;
    color: #fff;
}

.driver-popover.ebes-tour .driver-popover-next-btn:hover,
.driver-popover.ebes-tour .driver-popover-next-btn:focus {
    background: #14679e;
    border-color: #14679e;
}

/* Practice: the page stays usable under the dimming - driver.js otherwise lets only the highlighted element be clicked.
   See js/training-tour.js. */
body.ebes-tour-practice.driver-active * {
    pointer-events: auto;
}

/* After the rule above, which would otherwise catch the overlay too; !important over the inline style driver.js puts on
   the overlay's path. */
body.ebes-tour-practice.driver-active .driver-overlay,
body.ebes-tour-practice.driver-active .driver-overlay * {
    pointer-events: none !important;
}

/* "Training paused" - the tour waiting on a page it has no step for. */
.ebes-tour-paused {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000000001;
    max-width: 340px;
    padding: 14px 16px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
    font-size: 14px;
}

.ebes-tour-paused .button {
    margin: 8px 6px 0 0;
}