.ms-tour-root {
display: none;
}
.ms-tour-root.ms-tour-open {
display: block;
} .ms-tour-backdrop {
position: fixed;
inset: 0;
z-index: 9990; background: transparent;
} .ms-tour-highlight {
position: fixed;
z-index: 9991;
border-radius: 12px;
box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
pointer-events: none;
transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
} .ms-tour-tooltip {
position: fixed;
z-index: 9992;
max-width: 340px;
width: calc(100vw - 32px); max-height: 90vh;
overflow-y: auto;
background: #ffffff;
border-radius: 14px;
border: 1px solid #e2e8f0; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.28);
padding: 18px 18px 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-sizing: border-box;
transition: top 0.25s ease, left 0.25s ease;
outline: none;
}
.ms-tour-tooltip *,
.ms-tour-tooltip *::before,
.ms-tour-tooltip *::after {
box-sizing: border-box;
}
.ms-tour-title {
margin: 0 24px 6px 0;
font-size: 15px;
line-height: 1.35;
font-weight: 700;
color: #0d9488; }
.ms-tour-text {
margin: 0 0 14px;
font-size: 13px;
line-height: 1.55;
color: #475569; }
.ms-tour-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.ms-tour-counter {
font-size: 11px;
font-weight: 600;
color: #94a3b8; white-space: nowrap;
}
.ms-tour-actions {
display: inline-flex;
gap: 8px;
}
.ms-tour-btn {
appearance: none;
-webkit-appearance: none;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #475569;
font-size: 12px;
font-weight: 600;
line-height: 1;
padding: 8px 14px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ms-tour-btn:hover {
background: #f8fafc; color: #1e293b;
}
.ms-tour-btn:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.ms-tour-btn-primary {
background: #0d9488; border-color: #0d9488;
color: #ffffff;
}
.ms-tour-btn-primary:hover {
background: #0f766e; border-color: #0f766e;
color: #ffffff;
} .ms-tour-close {
position: absolute;
top: 8px;
right: 8px;
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
color: #94a3b8;
font-size: 20px;
line-height: 1;
width: 28px;
height: 28px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.ms-tour-close:hover {
background: #f1f5f9; color: #334155;
} .ms-tour-skip {
display: block;
margin: 10px 0 0;
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 0;
font-size: 11px;
font-weight: 600;
color: #94a3b8;
text-decoration: underline;
cursor: pointer;
transition: color 0.15s ease;
}
.ms-tour-skip:hover {
color: #0d9488;
} .ms-tour-launcher {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex-shrink: 0;
border-radius: 9999px;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #64748b; font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.ms-tour-launcher:hover {
color: #0d9488; background: #f0fdfa; border-color: #5eead4; } @media (prefers-reduced-motion: reduce) {
.ms-tour-highlight,
.ms-tour-tooltip,
.ms-tour-btn,
.ms-tour-close,
.ms-tour-skip,
.ms-tour-launcher {
transition: none;
}
} .ms-tour-location {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #0f766e; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 999px;
padding: 3px 10px;
margin-bottom: 8px;
} .ms-tour-active-tab {
position: relative;
z-index: 9992 !important;
outline: 3px solid #0d9488;
outline-offset: 2px;
border-radius: 10px;
background: #ffffff !important;
} .ms-tour-text {
white-space: pre-line;
} @media (max-width: 1280px) {
.ms-tour-tooltip {
max-width: 480px;
}
}