.popover-stack * {box-sizing: border-box}

@keyframes popover-flyout {
  0% {opacity: 1; transform: translateY(0)}
  100% {opacity: 0; transform: translateY(-40px)}
}
@keyframes popover-flyin {
  0% {opacity: 0; transform: translateY(40px)}
  100% {opacity: 1; transform: translateY(0)}
}

.with-blocker.popover-stack .popover {top: 10%; bottom: auto; height: auto; visibility: visible; max-width: 100%; border-radius: 8px}
.with-blocker.popover-stack {perspective: 550px; perspective-origin: center center; width: 850px; max-width: 100%}
.popover-stack {transition: opacity 1s; perspective: 280px; perspective-origin: bottom center; height: calc(100% - 2px); width: 550px; min-width: 370px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; position: fixed; z-index: 9999999999}
.popover-stack > .popover {pointer-events: all; transition: transform 0.5s; overflow: hidden; transform: translate3d(0px, 0px, 0px); background: #fff; background: var(--bg-color); position: absolute; width: 100%; height: 200px; bottom: 0; animation: popover-flyin .3s; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3); z-index: 9999999}
.popover.popover-closing {animation: popover-flyout .3s forwards}
.popover:not(:last-child) .popover-header * {display: none}
.popover-header {position: relative; padding: 9px 35px 9px 10px; height: 45px}
.popover-header button {position: absolute; right: 0; top: calc(50% - 16px); margin: 0; height: 33px; background: transparent}
.popover-header button:hover {color: #8BC34A}
.popover-header h2 {font-size: 21px; color: #fff}
.popover-content {padding: 9px 10px; position: absolute; height: calc(100% - 45px); bottom: 0; left: 0; width: 100%; overflow: auto; max-height: 300px}
.popover-stack + .blocker {position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; background: rgba(26, 81, 124, .4); z-index: 9999}
.with-blocker.popover-stack .popover-footer {position: relative; bottom: 0; left: 0; width: 100%; height: 40px; background: #F4F4F4; background: var(--highlight-bg-color)}
.with-blocker.popover-stack .popover-footer button {position: absolute; right: 10px; top: 7px; font-size: 14px; margin: 0 0 0 3px; padding: 0 6px; height: 28px; line-height: 28px}
.with-blocker.popover-stack .popover-content {height: calc(100% - 85px); bottom: 40px; position: relative; top: 0; bottom: auto}
.popover-stack.policy:not(.with-blocker) {width: 100%; pointer-events: none}
.popover-stack.policy:not(.with-blocker) > .popover {visibility: hidden; padding: 30px 25px; text-align: center; background: rgba(0, 0, 0, 0.8); height: 132px}
.popover-stack.policy:not(.with-blocker) .popover:last-child {visibility: visible}
.popover-stack.policy:not(.with-blocker) .popover-header {background: transparent; top: 15px; width: 80%; margin: 0 auto; position: absolute; left: 0; right: 0; padding-left: 0; padding-right: 0}
.popover-stack.policy:not(.with-blocker) .popover-content {bottom: 0; color: #fff; height: calc(100% - 55px); width: 80%; margin: 0 auto; position: absolute; left: 0; right: 0; padding-top: 0; font-size: 15px}
.popover-stack.policy:not(.with-blocker) .popover-header h2 {font-variant-caps: small-caps}
.popover-stack.policy:not(.with-blocker) .popover-content * {font-size: 15px}
.popover-stack.policy:not(.with-blocker) .popover-footer {position: absolute; right: 0; left: calc(87% + 10px); margin: 0 auto; top: calc(50% - 28px); width: 90px}
.set-size.popover-stack .popover-content {height: 300px}
.popover-stack.policy:not(.with-blocker) .popover-footer button {background: transparent; border: solid 1px #fff; font-size: 15px}

@media only screen and (max-width: 780px) {
  .popover-stack.policy:not(.with-blocker) .popover-content {width: 90%; height: calc(100% - 78px)}
  .popover-stack.policy:not(.with-blocker) .popover-header {width: 90%; top: 0px}
  .popover-stack.policy:not(.with-blocker) .popover-footer {left: 0; top: calc(50% - 41px)}
}