/**
 * Adapted from the exported styles.css, scoped to .pc-tour-container instead
 * of html/body so it can live inside normal theme page flow.
 */
.pc-tour-container {
    position: relative;
    overflow: hidden;
    background-color: #1d292c;
    width: 100%;
}

.pc-tour-container canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-tap-highlight-color: transparent;
}

.pc-tour-container canvas:focus {
    outline: none;
}

.pc-tour-container canvas.fill-mode-NONE {
    margin: auto;
}

.pc-tour-container canvas.fill-mode-KEEP_ASPECT,
.pc-tour-container canvas.fill-mode-FILL_WINDOW {
    width: 100%;
    height: 100%;
}

.pc-tour-splash-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #283538;
    z-index: 2;
}

.pc-tour-splash {
    position: absolute;
    top: calc(50% - 28px);
    width: 264px;
    left: calc(50% - 132px);
}

.pc-tour-splash img {
    width: 100%;
}

.pc-tour-progress-container {
    margin: 20px auto 0 auto;
    height: 2px;
    width: 100%;
    background-color: #1d292c;
}

.pc-tour-progress-bar {
    width: 0%;
    height: 100%;
    background-color: #f60;
}

@media (max-width: 480px) {
    .pc-tour-splash {
        width: 170px;
        left: calc(50% - 85px);
    }
}

.pc-tour-error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #8CE;
    color: #1d292c;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: Helvetica, arial, sans-serif;
}