.red-ui-tourGuide-shade {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index: 2000;
    overflow: hidden;
}

.red-ui-tourGuide-shade-focus {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 2001;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--red-ui-tourGuide-border);

    &.transition {
        transition: 0.4s ease;
        transition-property: width,height;
    }

    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: solid 6000px var(--red-ui-shade-color);
        margin-left: -6000px;
        margin-top: -6000px;
        pointer-events: none;
    }
}
.red-ui-popover.red-ui-tourGuide-popover {
    z-index: 2003;
    --red-ui-popover-background: var(--red-ui-secondary-background);
    --red-ui-popover-border: var(--red-ui-tourGuide-border);
    --red-ui-popover-color: var(--red-ui-primary-text-color);

    .red-ui-popover-content {
        h2 {
            text-align: center;
            margin-top: 0px;
            line-height: 1.2em;
            color: var(--red-ui-tourGuide-heading-color);
            i.fa {
                font-size: 1.5em
            }
        }
    }

}

.red-ui-tourGuide-toolbar {
    min-height: 36px;
    position: relative;
    display: flex;
    align-items: flex-end;
}
.red-ui-tourGuide-breadcrumbs {
    flex-grow: 1;

    display:  flex;
    align-items: center;
    justify-content: center;
    font-size: 6px;
    & > div {
        display: inline-block;
    }
    i {
        line-height: 16px;
        margin: 0 3px;
    }
}
.red-ui-tourGuide-popover-description {
    padding: 10px 20px 5px;

    img {
        max-height: 150px;
        border: 1px solid var(--red-ui-tourGuide-border);
        border-radius: 2px;
    }
}
.red-ui-tourGuide-popover-full {
    .red-ui-tourGuide-popover-description {
        padding: 20px 40px 10px;
        text-align: center;
    }
}
.red-ui-popover.red-ui-tourGuide-popover button.red-ui-button {
    &:not(.primary) {
        background: var(--red-ui-secondary-background);
        color: var(--red-ui-primary-text-color) !important;
    }
    &:not(.primary):not(.disabled):not(.ui-button-disabled):hover {
        border-color: var(--red-ui-popover-button-border-color-hover);
    }
}


// .red-ui-tourGuide-popover-bounce {
//     animation: 10s ease-in 5s infinite both red-ui-tourGuide-popover-bounce;
// }
// // @keyframes *must* be on multiple lines so build-custom-theme can filter them out
// @keyframes red-ui-tourGuide-popover-bounce {
//     0%,
//     10%,
//     100% {
//         -webkit-transform: translateY(0);
//         transform: translateY(0);
//     }
//     2%,8% {
//         -webkit-transform: translateY(-5px);
//         transform: translateY(-5px);
//     }
//     5% {
//         -webkit-transform: translateY(5px);
//         transform: translateY(5px);
//     }
// }