.shepherd-button { background: #3288e6; border: 0; border-radius: 3px; color: hsla(0, 0%, 100%, .75); cursor: pointer; margin-right: .5rem; padding: .5rem 1.5rem; 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 { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; display: flex; justify-content: flex-end; padding: 0 1rem 1rem; } .shepherd-footer .shepherd-button:last-child { margin-right: 0; } .shepherd-cancel-icon { background: transparent; border: none; color: hsla(0, 0%, 50.2%, .75); font-size: 2em; cursor: pointer; 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.2%, .75); } .shepherd-has-title .shepherd-content .shepherd-cancel-icon:hover { color: rgba(0, 0, 0, .75); } .shepherd-title { display: flex; font-size: 1rem; font-weight: 400; flex: 1 0 auto; margin: 0; padding: 0; } .shepherd-header { align-items: center; border-top-left-radius: 5px; border-top-right-radius: 5px; display: flex; justify-content: flex-end; padding: 0.5rem 1rem 0; } .shepherd-has-title .shepherd-content .shepherd-header { padding: 1rem; } .shepherd-text { font-size: 1rem; padding: 1rem; } .shepherd-text p { margin-top: 0; } .shepherd-text p:last-child { margin-bottom: 0; } .shepherd-content { border-radius: 5px; outline: none; padding: 0; } .shepherd-element { border-radius: 5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); max-width: 400px; outline: none; z-index: 9999; line-height: 1.2; } .shepherd-element, .shepherd-element *, .shepherd-element :after, .shepherd-element :before { box-sizing: border-box; } .shepherd-element .shepherd-arrow { border: 16px solid transparent; content: ""; display: block; height: 16px; pointer-events: none; position: absolute; width: 16px; z-index: 10000; } .shepherd-element.shepherd-element-attached-bottom.shepherd-element-attached-center .shepherd-arrow, .shepherd-element.shepherd-pinned-top .shepherd-arrow { bottom: 0; border-top-color: #232323; left: 50%; transform: translate(-50%, 100%); } .shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center .shepherd-arrow { border-bottom-color: #232323; left: 50%; top: 0; transform: translate(-50%, -100%); } .shepherd-element.shepherd-element-attached-top.shepherd-element-attached-center.shepherd-has-title .shepherd-arrow { border-bottom-color: #303030; } .shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-left .shepherd-arrow, .shepherd-element.shepherd-pinned-right .shepherd-arrow { border-right-color: #232323; left: 0; top: 50%; transform: translate(-100%, -50%); } .shepherd-element.shepherd-element-attached-middle.shepherd-element-attached-right .shepherd-arrow, .shepherd-element.shepherd-pinned-left .shepherd-arrow { border-left-color: #232323; right: 0; top: 50%; transform: translate(100%, -50%); } .shepherd-modal-overlay-container { -ms-filter: progid:dximagetransform.microsoft.gradient.alpha(Opacity=50); filter: alpha(opacity=50); fill-rule: evenodd; height: 0; left: 0; opacity: 0; overflow: hidden; pointer-events: none; position: fixed; top: 0; transition: all .3s ease-out, height 0ms .3s, opacity .3s 0ms; width: 100vw; z-index: 9997; } .shepherd-modal-overlay-container.shepherd-modal-is-visible { height: 100vh; opacity: .5; transition: all .3s ease-out, height 0s 0s, opacity .3s 0s; } .shepherd-modal-overlay-container.shepherd-modal-is-visible path { pointer-events: all; }