@charset "UTF-8";
/* CSS Document */

html, body { padding:0px; margin:0px; }
.transPopup { display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; background-color: rgba(0,0,0,.5); backdrop-filter: blur(5px); }
	.transPopupContainer { display:table; margin:0 auto; background:#fff; padding:5px; box-shadow:0px 0px 3px #000; border-radius:5px; overflow:hidden; position:relative; top:50%; transform:translateY(-50%); max-height: calc(100vh - 100px); }
		.transPopupBtnHeader { height:44px; line-height:44px; color:#666; margin:-5px -5px 0px; font-size:20px; background:#f1f1f1; text-align:left; vertical-align: middle; overflow:hidden; z-index:100; }
			.transPopupBtnHeader span { margin-left:20px; float:left; }
		.transPopupBtnContainer { float:right; width:44px; height:44px; border-left:1px solid #f1f1f1; background:#f1f1f1; cursor:pointer; border-radius:0px 5px 0px 0px; }
					.transPopupBtn { margin:0px; width:45px; height:45px; overflow:hidden; }
						.popupXBtn { width:45px; height:45px; transform: rotate(45deg); font-size:50px; color:#bbb; text-align:center; transition:all .5s ease; }
		.transPopupContent { padding-top:5px; max-height: calc(100vh - 90px); max-width: calc(100vw - 50px); overflow-y:auto; }


	.transPopup[data-state="mobile"] .transPopupContainer { width:94% !important; }

	.transPopup[header=""] .transPopupBtnHeader,
		.transPopup[data-header=""] .transPopupBtnHeader,
		.transPopup:not([header]):not([data-header]) .transPopupBtnHeader { position:absolute; width:100%; background:transparent; height:0px; overflow:initial; }
	.transPopup[header=""] .transPopupBtnHeader span,
		.transPopup[data-header=""] .transPopupBtnHeader span,
		.transPopup:not([header]):not([data-header]) .transPopupBtnHeader span { display:none; }
	.transPopup[header=""] .transPopupBtnContainer,
		.transPopup[data-header=""] .transPopupBtnContainer,
		.transPopup:not([header]):not([data-header]) .transPopupBtnContainer { background:#fff; border-color:transparent; border-radius:0 5px 0 5px; }
	.transPopup[header=""] .transPopupContent,
		.transPopup[data-header=""] .transPopupContent,
		.transPopup:not([header]):not([data-header]) .transPopupContent { padding-top:0px; border-radius:3px; }
	
/* Remove Hover Effects for Mobile Devices */
@media (min-width: 800px)
{
	.transPopupBtn:hover .popupXBtn { color:#000; }
}