tp-modal{display:none;background-color:rgba(0,0,0,.5);backdrop-filter:blur(2px);position:fixed;height:100%;width:100%;left:0;top:0;z-index:99;max-width:100%;overflow-y:auto;padding:20px;box-sizing:border-box}tp-modal[open]{display:flex}tp-modal-close{position:absolute;top:20px;right:20px}tp-modal-content{display:block;min-width:0;margin:auto;padding:20px;background-color:#fff;max-width:80ch}

.modal{align-items:center;justify-content:center;padding:var(--spacing-5);overflow:hidden}@media screen and (max-width: 575px){.modal{padding-inline:0}}@media screen and (max-width: 575px),screen and (max-height: 767px){.modal{padding-bottom:0;align-items:flex-end}}.modal[open]{z-index:var(--fixed-z-index)}.modal--open{transition:fadein var(--transition-time) var(--transition-easing);animation:fadein var(--transition-easing) var(--transition-time)}@keyframes fadein{0%{opacity:0}100%{opacity:1}}.modal--open .modal__content{transition:slideup var(--transition-time) var(--transition-easing);animation:slideup var(--transition-easing) var(--transition-time)}@keyframes slideup{0%{transform:translateY(150%)}}.modal--close{transition:fadeout var(--transition-time) var(--transition-easing);animation:fadeout var(--transition-easing) var(--transition-time)}@keyframes fadeout{0%{opacity:1}100%{opacity:0}}.modal--close .modal__content{transition:slidedown var(--transition-time) var(--transition-easing);animation:slidedown var(--transition-easing) var(--transition-time)}@keyframes slidedown{100%{transform:translateY(150%)}}.modal__content{margin:0;width:100%;max-width:600px;padding:var(--spacing-5);position:relative;border-radius:var(--border-radius-large);background-color:var(--color-gray-5)}@media screen and (max-width: 575px),screen and (max-height: 767px){.modal__content{border-radius:var(--border-radius-large) var(--border-radius-large) 0 0;padding-bottom:0}}.modal *:has(>.modal__body,>.modal__header,>self__footer){max-height:calc(100dvh - var(--spacing-7));display:flex;flex-direction:column;gap:var(--spacing-6)}.modal__header{padding-inline:var(--spacing-5);text-align:center}@media screen and (max-width: 575px){.modal__header{text-align:left;padding-left:0}}@media screen and (max-width: 575px),screen and (max-height: 767px){.modal__header{padding-bottom:var(--spacing-4);margin-bottom:0}}.modal__header h3{margin:0}.modal__header p{color:var(--color-gray-60)}.modal__body{overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-grow:1}.modal__body::-webkit-scrollbar{display:none}@media screen and (max-width: 575px),screen and (max-height: 767px){.modal__body{padding-bottom:var(--spacing-3)}.modal__body:has(+.modal__footer){margin-bottom:calc(-1*var(--spacing-6))}}@media screen and (max-width: 575px),screen and (max-height: 767px){.modal__footer{background:var(--color-white);padding-block:var(--spacing-3);margin-inline:calc(-1*var(--spacing-5));padding-inline:var(--spacing-5);border-top:solid 1px rgba(35,41,51,.06)}}.modal__close-button{position:absolute;top:15px;right:15px;border-radius:50%}.modal__close-button button{display:flex;justify-content:center;align-items:center;height:24px;width:24px;border-radius:50%}.modal__close-button :hover{background:var(--color-gray-30)}.modal .toast-message{position:absolute;inset:var(--spacing-1) auto auto 50%;width:90%;transform:translate(-50%)}@media(min-width: 768px){.modal .toast-message{top:calc(-1*var(--spacing-4));width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:450px}}