@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); }
	.transPopupContainer { 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:98vh; }
		.transPopupBtnHeader { height:44px; line-height:44px; color:#666; margin:-5px -5px 0px; font-size:20px; background:#f1f1f1; text-align:left; vertical-align: middle; }
			.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(98vh - 55px); overflow-y:auto; }


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




/* Remove Hover Effects for Mobile Devices */
@media (min-width: 800px)
{
	.transPopupBtn:hover .popupXBtn { color:#000; }
}