.w-modal-open{ overflow: hidden; }
.w-modal-backdrop{ position: fixed; z-index: 100; top: 0; bottom: 0; left: 0; right: 0; }
.w-modal-container, .w-modal-title, .w-modal-close, .w-modal-content{ box-sizing: border-box; }
.w-modal-container{ position: relative; top: 20vh; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 10px; margin: auto;  padding: 1em 2em; width: 50vw; background-color: #fff; box-shadow: 0 0 1px 2px rgba(0,0,0,0.2); }
.w-modal-title{ font-weight: bold; font-size: 1.5em; line-height: 1.5; color: #222; padding: 0 0.5em; }
.w-modal-button-container{ display: flex; column-gap: 10px; }
.w-modal-close{ display: block; position: absolute; top: 0; right: 0; text-decoration: none; color: #FFF; font-size: 30px; line-height: 30px; width: 30px; text-align: center; font-weight: bold; cursor: pointer; }
.w-modal-accept{ display: block; position: absolute; top: 0; right: 0; text-decoration: none; color: #FFF; font-size: 30px; line-height: 30px; width: 30px; text-align: center; font-weight: bold; cursor: pointer; }
.w-modal-decline{ display: block; position: absolute; top: 0; right: 0; text-decoration: none; color: #FFF; font-size: 30px; line-height: 30px; width: 30px; text-align: center; font-weight: bold; cursor: pointer; }
.w-modal-close:first-child{ background-color: #000; border-radius: 50%; top: -0.5em; right: -0.5em; }
.w-modal-accept:first-child{ background-color: #000; border-radius: 50%; top: -0.5em; right: -0.5em; }
.w-modal-decline:first-child{ background-color: #000; border-radius: 50%; top: -0.5em; right: -0.5em; }
.w-modal-content{ max-height: calc(100 - 2em); overflow: auto; padding: 20px; }
.iframe .w-modal-content{ padding: 0; }
.w-modal-content iframe{ width: 100%; height: 60vh; }

.w-modal[data-position] .w-modal-backdrop{ background-color: transparent; margin: 1em;}
.w-modal[data-position] .w-modal-container{ top: auto; }
.w-modal[data-position*="top"] .w-modal-backdrop{ bottom: auto; }
.w-modal[data-position="top-left"] .w-modal-backdrop{ right: auto; }
.w-modal[data-position="top-right"] .w-modal-backdrop{ left: auto; }
.w-modal[data-position*="bottom"] .w-modal-backdrop{ top: auto; }
.w-modal[data-position="bottom-left"] .w-modal-backdrop{ right: auto; }
.w-modal[data-position="bottom-right"] .w-modal-backdrop{ left: auto; }
.w-modal[data-position*="left"] .w-modal-container,
.w-modal[data-position*="right"] .w-modal-container,
.w-modal-container[data-position*="center"]{ min-width: 50vw; max-width: calc(100vw - 2em); width: min-content; }


/* transitions */
.w-modal:not(.no-animation) .w-modal-backdrop{ background-color: rgba(255,255,255,0); transition: background-color 0.4s; -webkit-transition: background-color 0.4s; }
.w-modal.activate:not([data-position]) .w-modal-backdrop,
.w-modal.no-animation:not([data-position]) .w-modal-backdrop{ background-color: rgba(255,255,255,0.4); }

.w-modal.fade{ opacity: 1; transition: none; -webkit-transition: none; } /* only here as a boostrap override */
.w-modal.fade .w-modal-container{ opacity: 0; transition: opacity 0.5s; -webkit-transition: opacity 0.5s; }
.w-modal.fade.activate .w-modal-container{ opacity: 1; }

.w-modal.top .w-modal-container,
.w-modal.left .w-modal-container,
.w-modal.bottom .w-modal-container,
.w-modal.right .w-modal-container{ transition: transform 0.3s 0s; -webkit-transition: -webkit-transform 0.3s 0s;}
.w-modal.top .w-modal-container{ transform: translateY(-100vh); -webkit-transform: translateY(-100vh); }
.w-modal.left .w-modal-container{ transform: translateX(-100vw); -webkit-transform: translateX(-100vw); }
.w-modal.bottom .w-modal-container{ transform: translateY(100vh); -webkit-transform: translateY(100vh); }
.w-modal.right .w-modal-container{ transform: translateX(100vw); -webkit-transform: translateX(100vw); }
.w-modal.top.activate .w-modal-container,
.w-modal.left.activate .w-modal-container,
.w-modal.bottom.activate .w-modal-container,
.w-modal.right.activate .w-modal-container{ transform: translate(0); -webkit-transform: translate(0); transition-delay: 0.1s; -webkit-transition-delay: 0.1s;  }

@media screen and (max-width: 768px){
    .w-modal[class*=w-privacyalert-] .w-modal-content img{ display: none; }
}