/* ------------------------------------------------------------ Popovers Styles for the popover component * Popovers * Open/Close * Positioning * Triangles classes ------------------------------------------------------------ */ .throbber-container { z-index: 998; } .tour-background { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999; background: rgba(54,83,109,0.08); } .tour.liquid-wormhole-element { z-index: 999; } .tour .popover-item { padding: 25px; max-width: none; width: 480px; border: #bfbfbf 1px solid; background: #fff; box-shadow: rgba(0,0,0,0.15) 0 1px 8px; color: var(--midgrey); } .tour .popover-title { margin-bottom: 0.4em; color: var(--darkgrey); font-size: 1.8rem; font-weight: bold; } .tour .popover-desc { margin: 0; } .tour .popover-body { margin: 0; font-size: 1.5rem; line-height: 1.55em; } .tour .popover-foot { display: flex; justify-content: space-between; margin-top: 25px; } .tour-optout { align-self: flex-end; } /* 'dem Triangles */ .tour .popover-triangle-top:before, .tour .popover-triangle-top-left:before, .tour .popover-triangle-top-right:before { border-right: 14px solid transparent; border-bottom: calc(14px * 0.8) solid #bfbfbf; border-left: 14px solid transparent; } .tour .popover-triangle-top:after, .tour .popover-triangle-top-left:after, .tour .popover-triangle-top-right:after { top: -10px; border-right: 14px solid transparent; border-bottom: calc(14px * 0.8) solid #fff; border-left: 14px solid transparent; } .tour .popover-triangle-bottom:before, .tour .popover-triangle-bottom-left:before, .tour .popover-triangle-bottom-right:before { border-top: calc(14px * 0.8) solid #bfbfbf; border-right: 14px solid transparent; border-left: 14px solid transparent; } .tour .popover-triangle-bottom:after, .tour .popover-triangle-bottom-left:after, .tour .popover-triangle-bottom-right:after { bottom: -10px; border-top: calc(14px * 0.8) solid #fff; border-right: 14px solid transparent; border-left: 14px solid transparent; } .tour .popover-triangle-left:before, .tour .popover-triangle-left-top:before, .tour .popover-triangle-left-bottom:before { border-top: 14px solid transparent; border-right: calc(14px * 0.8) solid #bfbfbf; border-bottom: 14px solid transparent; } .tour .popover-triangle-left:after, .tour .popover-triangle-left-top:after, .tour .popover-triangle-left-bottom:after { left: -10px; border-top: 14px solid transparent; border-right: calc(14px * 0.8) solid #fff; border-bottom: 14px solid transparent; } .tour .popover-triangle-right:before, .tour .popover-triangle-right-top:before, .tour .popover-triangle-right-bottom:before { border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: calc(14px * 0.8) solid #bfbfbf; } .tour .popover-triangle-right:after, .tour .popover-triangle-right-top:after, .tour .popover-triangle-right-bottom:after { right: -10px; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: calc(14px * 0.8) solid #fff; }