@-webkit-keyframes zoom-blur-animation-opening-keyframes { from { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0; -webkit-filter: blur(2px); filter: blur(2px); } to { -webkit-transform: none; transform: none; opacity: 1; -webkit-filter: blur(0); filter: blur(0); } } @keyframes zoom-blur-animation-opening-keyframes { from { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 0; -webkit-filter: blur(2px); filter: blur(2px); } to { -webkit-transform: none; transform: none; opacity: 1; -webkit-filter: blur(0); filter: blur(0); } } @-webkit-keyframes zoom-blur-animation-closing-keyframes { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-filter: blur(); filter: blur(0); } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; -webkit-filter: blur(2px); filter: blur(2px); } } @keyframes zoom-blur-animation-closing-keyframes { from { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-filter: blur(); filter: blur(0); } to { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0; -webkit-filter: blur(2px); filter: blur(2px); } } @-webkit-keyframes animation-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @keyframes animation-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes animation-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } @keyframes animation-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes modalShake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } } @keyframes modalShake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } } @keyframes slideFromTop { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideToTop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100px); opacity: 0; } } @keyframes slideFromBottom { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes slideToBottom { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100px); opacity: 0; } } @keyframes slideFromLeft { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideToLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100px); opacity: 0; } } @keyframes slideFromRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideToRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100px); opacity: 0; } } @-webkit-keyframes slideFromTop { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @-webkit-keyframes slideToTop { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100px); opacity: 0; } } @-webkit-keyframes slideFromBottom { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @-webkit-keyframes slideToBottom { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100px); opacity: 0; } } @-webkit-keyframes slideFromLeft { from { transform: translateX(-100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @-webkit-keyframes slideToLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100px); opacity: 0; } } @-webkit-keyframes slideFromRight { from { transform: translateX(100px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @-webkit-keyframes slideToRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100px); opacity: 0; } } @keyframes slideFullFromTop { from { transform: translateY(-100%); top: -100%; opacity: 0; } to { transform: translateY(0); top: 0; opacity: 1; } } @keyframes slideFullToTop { from { transform: translateY(0); top: 0; opacity: 1; } to { transform: translateY(-100%); top: -100%; opacity: 0; } } @keyframes slideFullFromBottom { from { transform: translateY(100%); bottom: -100%; opacity: 0; } to { transform: translateY(0); bottom: 0; opacity: 1; } } @keyframes slideFullToBottom { from { transform: translateY(0); bottom: 0; opacity: 1; } to { transform: translateY(100%); bottom: -100%; opacity: 0; } } @keyframes slideFullFromLeft { from { transform: translateX(-100%); left: -100%; opacity: 0; } to { transform: translateX(0); left: 0; opacity: 1; } } @keyframes slideFullToLeft { from { transform: translateX(0); left: 0; opacity: 1; } to { transform: translateX(-100%); left: -100%; opacity: 0; } } @keyframes slideFullFromRight { from { transform: translateX(100%); right: -100%; opacity: 0; } to { transform: translateX(0); right: 0; opacity: 1; } } @keyframes slideFullToRight { from { transform: translateX(0); right: 0; opacity: 1; } to { transform: translateX(100%); right: -100%; opacity: 0; } } @-webkit-keyframes slideFullFromTop { from { transform: translateY(-100%); top: -100%; opacity: 0; } to { transform: translateY(0); top: 0; opacity: 1; } } @-webkit-keyframes slideFullToTop { from { transform: translateY(0); top: 0; opacity: 1; } to { transform: translateY(-100%); top: -100%; opacity: 0; } } @-webkit-keyframes slideFullFromBottom { from { transform: translateY(100%); bottom: -100%; opacity: 0; } to { transform: translateY(0); bottom: 0; opacity: 1; } } @-webkit-keyframes slideFullToBottom { from { transform: translateY(0); bottom: 0; opacity: 1; } to { transform: translateY(100%); bottom: -100%; opacity: 0; } } @-webkit-keyframes slideFullFromLeft { from { transform: translateX(-100%); left: -100%; opacity: 0; } to { transform: translateX(0); left: 0; opacity: 1; } } @-webkit-keyframes slideFullToLeft { from { transform: translateX(0); left: 0; opacity: 1; } to { transform: translateX(-100%); left: -100%; opacity: 0; } } @-webkit-keyframes slideFullFromRight { from { transform: translateX(100%); right: -100%; opacity: 0; } to { transform: translateX(0); right: 0; opacity: 1; } } @-webkit-keyframes slideFullToRight { from { transform: translateX(0); right: 0; opacity: 1; } to { transform: translateX(100%); right: -100%; opacity: 0; } } @keyframes scale-full-in { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes scale-full-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } @-webkit-keyframes scale-full-in { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes scale-full-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } @keyframes prk-modal-zoom-in-center { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @keyframes prk-modal-zoom-out-center { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } } @-webkit-keyframes prk-modal-zoom-in-center { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes prk-modal-zoom-out-center { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.9); } } @keyframes prk-slide-3d-in-bottom { 0% { opacity: 0; transform: translateY(200px) scale(1.1); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes prk-slide-3d-out-bottom { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(200px) scale(1.1); } } @-webkit-keyframes prk-slide-3d-in-bottom { 0% { opacity: 0; transform: translateY(200px) scale(1.1); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @-webkit-keyframes prk-slide-3d-out-bottom { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(200px) scale(1.1); } } .prk-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 999; display: flex; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-out; backface-visibility: hidden; contain: layout paint; } .prk-modal-overlay.visible { opacity: 1; pointer-events: auto; transition: opacity 0.3s ease-out; } .prk-modal { background: white; z-index: 999; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); opacity: 0; pointer-events: none; align-self: center; position: relative; display: flex; flex-direction: column; overflow: hidden; backface-visibility: hidden; } .prk-modal.show { opacity: 1; pointer-events: auto; transition: opacity 0.3s ease-out; } html.modal-is-locked { overflow: hidden; -ms-touch-action: none; touch-action: none; } .prk-modal { width: 700px; max-height: 90vh; border-radius: var(--prk-overlay-radius, 12px); } .prk-modal-overlay.animation.modal-is-opening, .prk-modal-overlay.animation.modal-is-closing { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .prk-modal-overlay.animation-duration02.modal-is-opening, .prk-modal-overlay.animation-duration02.modal-is-closing { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; } .prk-modal-overlay.animation.modal-is-opening { -webkit-animation-name: animation-overlay-opening-keyframes; animation-name: animation-overlay-opening-keyframes; } .prk-modal-overlay.animation.modal-is-closing { -webkit-animation-name: animation-overlay-closing-keyframes; animation-name: animation-overlay-closing-keyframes; } .prk-modal[data-animation-type="zoom-blur"].modal-is-opening, .prk-modal[data-animation-type="zoom-blur"].modal-is-closing { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .prk-modal[data-animation-type="zoom-blur"].modal-is-opening { -webkit-animation-name: zoom-blur-animation-opening-keyframes; animation-name: zoom-blur-animation-opening-keyframes; } .prk-modal[data-animation-type="zoom-blur"].modal-is-closing { -webkit-animation-name: zoom-blur-animation-closing-keyframes; animation-name: zoom-blur-animation-closing-keyframes; } .prk-modal.required-shake { animation: modalShake 0.3s ease; } .prk-modal[data-animation-type="slide-full-top"].modal-is-opening { animation: slideFullFromTop 0.3s forwards; } .prk-modal[data-animation-type="slide-full-bottom"].modal-is-opening { animation: slideFullFromBottom 0.3s forwards; } .prk-modal[data-animation-type="slide-full-left"].modal-is-opening { animation: slideFullFromLeft 0.3s forwards; } .prk-modal[data-animation-type="slide-full-right"].modal-is-opening { animation: slideFullFromRight 0.3s forwards; } .prk-modal[data-animation-type="slide-full-top"].modal-is-closing { animation: slideFullToTop 0.3s forwards; } .prk-modal[data-animation-type="slide-full-bottom"].modal-is-closing { animation: slideFullToBottom 0.3s forwards; } .prk-modal[data-animation-type="slide-full-left"].modal-is-closing { animation: slideFullToLeft 0.3s forwards; } .prk-modal[data-animation-type="slide-full-right"].modal-is-closing { animation: slideFullToRight 0.3s forwards; } .prk-modal[data-animation-type="slide-top"].modal-is-opening { animation: slideFromTop 0.3s forwards; } .prk-modal[data-animation-type="slide-bottom"].modal-is-opening { animation: slideFromBottom 0.3s forwards; } .prk-modal[data-animation-type="slide-left"].modal-is-opening { animation: slideFromLeft 0.3s forwards; } .prk-modal[data-animation-type="slide-right"].modal-is-opening { animation: slideFromRight 0.3s forwards; } .prk-modal[data-animation-type="slide-top"].modal-is-closing { animation: slideToTop 0.3s forwards; } .prk-modal[data-animation-type="slide-bottom"].modal-is-closing { animation: slideToBottom 0.3s forwards; } .prk-modal[data-animation-type="slide-left"].modal-is-closing { animation: slideToLeft 0.3s forwards; } .prk-modal[data-animation-type="slide-right"].modal-is-closing { animation: slideToRight 0.3s forwards; } .prk-modal[data-animation-type="scale-full"].modal-is-opening { animation: scale-full-in 0.3s ease-out; } .prk-modal[data-animation-type="scale-full"].modal-is-closing { animation: scale-full-out 0.3s ease-out forwards; } .prk-modal[data-animation-type="zoom-in-center"].modal-is-opening { animation: prk-modal-zoom-in-center 0.4s ease-out; } .prk-modal[data-animation-type="zoom-in-center"].modal-is-closing { animation: prk-modal-zoom-out-center 0.4s ease-out forwards; } .prk-modal[data-animation-type="slide-3d-in-bottom"].modal-is-opening { animation: prk-slide-3d-in-bottom 0.2s ease-out; transform-origin: bottom center; } .prk-modal[data-animation-type="slide-3d-in-bottom"].modal-is-closing { animation: prk-slide-3d-out-bottom 0.2s ease-out forwards; transform-origin: bottom center; } @media (max-width: 1023px) { .prk-modal[data-enable-mobile-bottom-sheet="true"] { width: 100%; align-self: flex-end; max-height: calc(var(--vh) * 100); border-radius: var(--prk-overlay-radius, 16px) var(--prk-overlay-radius, 16px) 0 0; transform: translateY(100%); transition: transform 0.3s ease-out; backface-visibility: hidden; contain: layout paint; will-change: height, border-radius, transform; } .prk-modal[data-enable-mobile-bottom-sheet="true"].show { transform: translateY(0); } .prk-modal[data-enable-mobile-bottom-sheet="true"][data-bottom-sheet-gestures="true"] { transition: height 220ms cubic-bezier(.2,.8,.2,1), transform 0.3s ease-out; } .prk-modal[data-enable-mobile-bottom-sheet="true"] { display: flex; flex-direction: column; } .prk-modal .modal-header { flex: 0 0 auto; } .prk-modal .modal-body, .prk-modal .prk-modal-body, .prk-modal [data-modal-body], .prk-modal [data-prk-modal-body] { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } } [data-bs-handle]{ cursor: grab; position: relative; z-index: 1; touch-action: none; } [data-bs-handle]:active{ cursor: grabbing; } .prk-modal .modal-header { position: relative; } .prk-modal .modal-body, .prk-modal .prk-modal-body, .prk-modal [data-modal-body], .prk-modal [data-prk-modal-body] { overflow-y: auto; } .prk-modal[data-no-overlay="true"] { background: transparent; border-radius: unset; pointer-events: none; }