.driver-active .driver-stage { pointer-events: none; } .driver-active * { pointer-events: none; } .driver-active .driver-active-element, .driver-active .driver-active-element * { pointer-events: auto; } @keyframes animate-fade-in { 0% { opacity: 0; } to { opacity: 1; } } .driver-fade .driver-stage { animation: animate-fade-in 100ms ease-in-out; } /* Popover styles */ .driver-popover { color: #2d2d2d; margin: 0; border-radius: 5px; min-width: 250px; max-width: 300px; box-shadow: 0 1px 10px #0006; z-index: 1000000000; position: fixed; top: 0; right: 0; background-color: #fff; } .driver-popover-arrow { content: ""; position: absolute; border: 5px solid #fff; } /** Popover Arrow Sides **/ .driver-popover-arrow-side-left { left: 100%; border-right-color: transparent; border-bottom-color: transparent; border-top-color: transparent; } .driver-popover-arrow-side-right { right: 100%; border-left-color: transparent; border-bottom-color: transparent; border-top-color: transparent; } .driver-popover-arrow-side-top { top: 100%; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .driver-popover-arrow-side-bottom { bottom: 100%; border-left-color: transparent; border-top-color: transparent; border-right-color: transparent; } .driver-popover-arrow-side-center { display: none; } /* Left/Start + Right/Start */ .driver-popover-arrow-side-left.driver-popover-arrow-align-start, .driver-popover-arrow-side-right.driver-popover-arrow-align-start { top: 15px; } /* Top/Start + Bottom/Start */ .driver-popover-arrow-side-top.driver-popover-arrow-align-start, .driver-popover-arrow-side-bottom.driver-popover-arrow-align-start { left: 15px; } /* End/Left + End/Right */ .driver-popover-arrow-align-end.driver-popover-arrow-side-left, .driver-popover-arrow-align-end.driver-popover-arrow-side-right { bottom: 15px; } /* Top/End + Bottom/End */ .driver-popover-arrow-side-top.driver-popover-arrow-align-end, .driver-popover-arrow-side-bottom.driver-popover-arrow-align-end { right: 15px; } /* Left/Center + Right/Center */ .driver-popover-arrow-side-left.driver-popover-arrow-align-center, .driver-popover-arrow-side-right.driver-popover-arrow-align-center { top: 50%; margin-top: -5px; } /* Top/Center + Bottom/Center */ .driver-popover-arrow-side-top.driver-popover-arrow-align-center, .driver-popover-arrow-side-bottom.driver-popover-arrow-align-center { left: 50%; margin-left: -5px; } /* No arrow */ .driver-popover-arrow-none { display: none; }