/* ------------------------------------------------------------ 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: 20px; max-width: none; width: 460px; color: #fff; background: linear-gradient(135deg, color(var(--blue) l(+3%)) 0%,color(var(--blue) l(-5%) s(-5%)) 100%); box-shadow: rgba(0,0,0,0.05) 0 0 0 1px inset, rgba(0,0,0,0.15) 0 1px 8px; border-radius: 10px; } .tour .popover-item a { color: #fff; font-weight: 500; } .tour .popover-title { margin-bottom: 0.4em; color: #fff; font-size: 2.4rem; font-weight: 600; letter-spacing: 0.5px; } .tour .popover-desc { margin: 0; } .tour .popover-body { margin: 0; font-size: 1.5rem; line-height: 1.55em; font-weight: 200; letter-spacing: 0.5px; color: rgba(255,255,255,0.85); } .tour .popover-foot { display: flex; justify-content: space-between; margin-top: 25px; } .tour .popover-item .tour-optout { align-self: flex-end; margin-bottom: 7px; font-size: 1.2rem; font-weight: 200; } .tour .popover-item .tour-optout em { font-style: normal; font-weight: 400; text-decoration: underline; } /* '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 color(var(--blue) l(-5%) s(-10%)); 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 color(var(--blue) l(-5%) s(-10%)); 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 color(var(--blue) l(-5%) s(-10%)); 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 color(var(--blue) l(-5%) s(-10%)); 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 color(var(--blue) l(-5%) s(-10%)); 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 color(var(--blue) l(-5%) s(-10%)); 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 color(var(--blue) l(-5%) s(-10%)); } .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 color(var(--blue) l(-5%) s(-10%)); }