@rently-team/shepherd.js/dist/css/shepherd.css

Guide your users through a tour of your app.

.shepherd-button{background:#2b4790;border:0;border-radius:.75rem;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;line-height:1.25rem;margin-right:.5rem;padding:.5rem 1.5rem;text-align:center;transition:all .5s ease}.shepherd-button:not(:disabled):hover{background:#196fcc;color:hsla(0,0%,100%,.75)}.shepherd-button.shepherd-button-secondary{background:#f1f2f3;color:rgba(0,0,0,.75)}.shepherd-button.shepherd-button-secondary:not(:disabled):hover{background:#d6d9db;color:rgba(0,0,0,.75)}.shepherd-button:disabled{cursor:not-allowed}
.shepherd-footer{align-items:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px;display:flex;justify-content:space-between}.shepherd-footer .shepherd-button:last-child{align-self:flex-end;margin-right:0}.shepherd-footer-text{color:#4b5563;font-family:Inter;font-size:.75rem;font-weight:400;letter-spacing:0;line-height:20px}.shepherd-footer-buttons{align-items:center;display:flex;gap:20px;justify-content:flex-end}
.shepherd-cancel-icon{background:transparent;border:none;color:hsla(0,0%,50%,.75);cursor:pointer;font-size:2em;font-weight:400;margin:0;padding:0;transition:color .5s ease}.shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon{color:hsla(0,0%,50%,.75)}.shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover{color:rgba(0,0,0,.75)}
.shepherd-title-text{color:#111827;font-family:Inter;font-size:1rem;font-weight:600;letter-spacing:0;line-height:1.5rem}.shepherd-title-icon{display:block;height:24px;width:24px}.shepherd-title-container{align-items:center;display:flex;gap:8px;justify-content:center}
.shepherd-header{align-items:center;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;line-height:2em}.shepherd-has-title .shepherd-content .shepherd-header{background:#fff}
.shepherd-text{color:rgba(0,0,0,.75);font-family:Inter;font-size:.875rem;font-weight:400;letter-spacing:0;line-height:1.25rem}.shepherd-text p{margin-top:0}.shepherd-text p:last-child{margin-bottom:0}
.shepherd-content{gap:12px;outline:none;padding:0}.shepherd-body,.shepherd-content{display:flex;flex-direction:column}.shepherd-body{gap:24px}
.shepherd-element{background:#fff;border:none;border-radius:20px;box-shadow:0 -1px 8px -4px #10182814,0 10px 25px -3px #10182826;margin:0;max-width:288px;opacity:0;outline:none;padding:16px 20px;transition:opacity .3s,visibility .3s;visibility:hidden;width:100%;z-index:9999}.shepherd-enabled.shepherd-element{opacity:1;visibility:visible}.shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered){opacity:0;pointer-events:none;visibility:hidden}.shepherd-element,.shepherd-element *,.shepherd-element :after,.shepherd-element :before{box-sizing:border-box}.shepherd-arrow,.shepherd-arrow:before{height:8px;position:absolute;width:8px;z-index:-1}.shepherd-arrow:before{background:#fff;content:"";transform:rotate(45deg)}.shepherd-element[data-popper-placement^=top]>.shepherd-arrow{bottom:-4px}.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow{top:-4px}.shepherd-element[data-popper-placement^=left]>.shepherd-arrow{right:-4px}.shepherd-element[data-popper-placement^=right]>.shepherd-arrow{left:-4px}.shepherd-element.shepherd-centered>.shepherd-arrow{opacity:0}.shepherd-element.shepherd-has-title[data-popper-placement^=bottom]>.shepherd-arrow:before{background-color:#fff}.shepherd-target-click-disabled.shepherd-enabled.shepherd-target,.shepherd-target-click-disabled.shepherd-enabled.shepherd-target *{pointer-events:none}
.shepherd-modal-overlay-container{height:0;left:0;opacity:0;overflow:hidden;pointer-events:none;position:fixed;top:0;transition:all .3s ease-out,height 0s .3s,opacity .3s 0s;width:100vw;z-index:9997}.shepherd-modal-overlay-container.shepherd-modal-is-visible{height:100vh;opacity:.5;transform:translateZ(0);transition:all .3s ease-out,height 0s 0s,opacity .3s 0s}.shepherd-modal-overlay-container.shepherd-modal-is-visible path{pointer-events:all}