[data-tour-backdrop] ~ #layout-position {
    position: static !important;
}

/*
.dashlet-container,
.dashlet-area {
    overflow: visible !important;
}
*/

[data-tour-message],
[data-tour-message] * {
    box-sizing: border-box !important;
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-base);
}

[data-tour-message] {
    position: fixed;
    z-index: 99999;
}

.tour-popup {
    position: relative;
    max-width: 406px;
    margin: 1rem 0.5rem;
    padding: 1rem;
    border-radius: 8px;
    font-size: var(--text-base);
    line-height: var(--leading-base);
    background-color: white;
    border: solid 1px var(--color-gray-300);
    box-shadow: var(--shadow-medium);
}

.tour-avatar {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    object-fit: cover;
    width: 2.5rem;
    height: 2.5rem;
    padding: var(--space-1);
    background-color: white;
    border-radius: 9999px;
    box-shadow: var(--shadow-small), var(--shadow-inner);
    border: solid 1px var(--color-gray-300);
    transform-origin: bottom right;
    transition: all 300ms ease-out;
}

.tour-message {
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--color-gray-50);
}

.tour-message b {
    font-weight: 500;
}

.tour-message u {
    text-decoration: underline dashed;
}

.tour-message h1,
.tour-message h2,
.tour-message h3,
.tour-message h4,
.tour-message h5,
.tour-message h6 {
    display: block;
    margin-bottom: 0.25rem;
}

.tour-message + .tour-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

[data-tour-action] {
    font-size: var(--text-sm) !important;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.325rem 0.5rem;
    background-color: var(--color-button-text-bg);
    color: var(--color-button-text-fg);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-tour-action]:hover {
    background-color: var(--color-button-text-bg-hover);
    color: var(--color-button-text-fg-hover);
}

[data-tour-action]:disabled {
    background-color: transparent !important;
    color: var(--color-gray-600) !important;
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

[data-tour-action="finish"] {
    margin-right: auto;
    color: hsl(0deg, 50%, 62%);
}

[data-tour-action="finish"]:hover {
    background-color: hsl(0deg, 50%, 96%);
    color: hsl(0deg, 50%, 62%);
}

[data-tour-backdrop] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 999 !important;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(3px);
}

[data-tour].highlighting {
    pointer-events: none !important;
    z-index: 99999 !important;
    border-radius: var(--radius);
}

[data-tour].highlighting::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    border: solid 3px var(--color-overlay-bg);
    background-color: white;
    border-radius: inherit;
    z-index: -1;
}

[data-tour].highlighting::after {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    border-radius: inherit;
    background-color: var(--color-overlay-bg);
    z-index: -2;
    animation: small-ping 1s infinite;
}

[data-tour].highlighting.field-composite::before,
[data-tour].highlighting.fieldset::before,
[data-tour].highlighting.dashlet-fieldset::before {
    top: -1rem;
    bottom: -1rem;
    left: -1rem;
    right: -1rem;
    border-radius: 6px;
    background-color: white;
}

[data-tour].highlighting.field-composite::after,
[data-tour].highlighting.fieldset::after,
[data-tour].highlighting.dashlet-fieldset::after {
    top: -1rem;
    bottom: -1rem;
    left: -1rem;
    right: -1rem;
    border-radius: 6px;
}

@keyframes small-ping {
    75%, 100% {
        transform: scale(var(--scale-x, 1.02), var(--scale-y, 1.02));
        opacity: 0;
    }
}