* {
  box-sizing: border-box;
  width: 100%;
  margin:0px;
}
:root {
  --bgcolor1: #fff; /* snow white */
  --bgcolor2: #f7931a; /* bitcoin orange */
  --bgcolor3: #d32f2f; /* santa red */
  --bgcolor4: #ffd700; /* gold */
  --bgcolor5: #bbdefb; /* frosty blue  */
  --highlightcolor: #4CAF50; /* festive green */
  --fontcolor1: #424242; /*  dark grey */
  --fontcolor2: #ffd700; /* gold */
  --fontcolor3: #d32f2f; /* santa red */
  --fontcolor4: #fff; /* snow white */
  --fontcolor5: #bbdefb; /* frosty blue  */
  --highlightfontcolor: #CEF7F7;
  --bordercolordark: #333;
  --bordercolorlight: #444;
  --buttoncolor: #222;
  --buttoncolorhover: #333;
  --contentcolorhover: #333;
  --pageHeaderHeight:50px;
  --borderRadius:4px;
  --walletDetailsOnScreenPos:120px;
  --walletDetailsOffScreenPos:-500px;
  --walletDetailsBgOnScreenPos:50px;
  --walletDetailsBgOffScreenPos:-1000px;
}

body {background-color: var(--bgcolor5);}

p, h1, h2, h3, h4 {
	padding:0px;
	color: var(--fontcolor1);
	font-family: Figtree;
}
p {font-size: 100%;}
textarea {min-height: 100px;}

.floatLeft {float: left;}
.floatRight {float: right;}
.clearFix {clear: both;}
.displayNone {display: none;}
.displayInlineBlock {display: inline-block;}
.displayInline {display: inline;}

.pageHeader {
	position:fixed;
	top:0px; left:0px;
	height:var(--pageHeaderHeight);
	background-color: var(--bgcolor3); 
	border-bottom: 1px solid var(--fontcolor1);
	z-index: 100;
}
.pageHeader p {line-height: var(--pageHeaderHeight);}
.pageHeaderLeft, .pageHeaderRight {width: 30%;}
.pageHeaderCenter{width: 40%;}
.pageHeaderLeft p {text-align: left;}
.pageHeaderCenter p {text-align: center;}
.pageHeaderRight p {text-align: right;}
.pageHeaderRight button {
	width: 70%;
	height:24px;
	margin:12px 0px 0px 20%; 
	border-radius: 8px;
	background-color:var(--highlightcolor);
	color:var(--fontcolor4);
	outline: none;
	border:1px solid var(--fontcolor4);
	font-size: 100%;
	line-height: 0px;
}
.pageHeaderCenter img {
	width: 64px;
	padding-top:4px;
}

#pageHeaderLeftOpenNav {
	font-size: 200%;
	line-height: 48px;
	padding-left: 15px;
	color:var(--highlightcolor);
}

#pageHeaderLogoImg {width: 48px; display: block; margin: auto;}

.pageBody {
	margin-top:var(--pageHeaderHeight);
	margin-bottom:var(--pageHeaderHeight);
}


.pageBodyTitle {
	margin-top: 100px;
}


.pageBodyTitle h1 {
	text-align: center;
	font-size: 300%;
	line-height: 60px;
	color: var(--fontcolor3);

}
.pageBodyTitle h1:hover {
	color: var(--fontcolor2);
}
#pageBodyBottomTitle {
	margin-top: 20px;
	font-size: 80%;
}

.pageBodyTitleLogo {width: 80%;margin: 20px auto 0px auto;}
#pageBodyBottomLogo {width: 38%; margin-top: 100px;}


.pageFooter {
	position:fixed;
	bottom:0px; left:0px;
	height:var(--pageHeaderHeight);
	background-color: var(--bgcolor3); 
	border-top: 1px solid var(--fontcolor1);
}


.pageSideNav {
	height: 100%;
	width: 320px;
	background-color: var(--bgcolor2); 
	position: fixed;
	top: 0;
	border-right: 1px solid var(--fontcolor1);
	z-index: 100;
}

.pageSideNavScrollable {
	margin-top: 4px;
	height:75%;
	overflow-y: scroll;
}

#pageSideNavCloseBar {
	height: 100%;
	width: 100px;
	background-color: var(--bgcolor3); 
	opacity: 0.025;
	z-index: 98;
	position: fixed;
	top: 0px;
}

#pageSideNavProfileName, #pageSideNavProfileAddress, #profileFollows {
	padding-left:30px;
	line-height: 24px;
}

.pageSideNavLink {
	height:40px; width: 260px;
	margin:20px 0px 0px 30px;
	line-height:40px;

}
.pageSideNavSectionDivider {
	border-bottom: 1px solid var(--fontcolor1);
	width: 260px; margin:40px auto;
}

.pageSideNavLink h2, .pageSideNavLink h3 {
	display: inline;
}
.pageSideNavLink:hover {
	background-color: var(--bgcolor3);
}
#pageSideNavProfileImg {
	width: 50px; height: 50px; border-radius: 25px;
	margin: 20px 0px 30px 30px;
}
#pageSideNavProfileName, .profileFollowsNum, .pageSideNavLink h2, .pageSideNavLink h3, .rightNavIcons {color: var(--highlightfontcolor);}

#pageSideNavLinkHomeIcon {
	font-size: 175%;
}

.pageSideNavLink a {
	text-decoration: none;
	color:var(--fontcolor4);
}
.pageSideNavLink a:visited {
	color:var(--fontcolor4);
}
.pageSideNavLink a:hover {
	color:var(--highlightcolor);
}


.pageSideNavCopyWalletAddress {
	color: var(--fontcolor1);
	font-size: 75%;
}
.pageSideNavCopyWalletAddress:hover {
	color: var(--highlightcolor);
	cursor: pointer;
}




.profileFollows {padding-bottom: 6px;}

.pageBodyPost {
	width: 99%; margin: 0px 0px 16px 1%;
	border-bottom: 1px solid var(--fontcolor1);
} 

.pageBodyPostHeaderProfilePic {
	width: 48px; height:48px;
	margin:2px 10px 0px 2px;
}

.pageBodyPostHeaderProfilePic img {
	width: 48px;
}
.pageBodyPostContent {
	width: 80%;
}
.pageBodyPostContent p {
	line-height: 24px;
	font-size: 105%;
}
.pageBodyPostContentName {
	font-weight: bold;
	font-size: 115%;
	color: var(--highlightfontcolor);
}
.pageBodyPostContentAddress {
	color: var(--highlightfontcolor);
}



.pageBodyPostFooter {
	margin:5px 0px;
}


.pageBodyPostFooterNum {
	color: var(--highlightfontcolor);

}


#pageLiveNavBar {
	width: 90%; 
	height:var(--pageHeaderHeight);
	position: fixed;
	top:60px;
	background-color: var(--bgcolor2);
	border-radius: 25px;
	border:1px solid var(--fontcolor3);
	z-index: 98;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);
}

#pageLiveNavBar p {
	color: var(--fontcolor4);
}


#pageLiveNavBarOpen {
	float: left;
	height:40px; width: 40px;
	margin: 5px 0px 0px 5px;
}
#pageLiveNavBarClose {
	float: right;
	height:40px; width: 40px;
	margin: 5px 5px 0px 0px;
}
#pageLiveNavBarCloseIcon, #pageLiveNavBarOpenIcon {
	font-size: 230%;
}

.pageLiveNavBarOnScreen {
	animation: moveLiveBarOnScreen 0.1s ease-out 0s 1 normal;
	right: 2%;
}
.pageLiveNavBarOffScreen {
	animation: moveLiveBarOffScreen 0.1s ease-out 0s 1 normal;
	right: -75%;
}

#pageLiveNavBarContent {
	display:inline-block;
	height:40px; width: 250px;
	margin: 5px 5px 0px 0px;
	overflow-x: scroll;
	scrollbar-width: none;

}
#pageLiveNavBarContentScroller {
	width:1000px;
}
#pageLiveNavBarContentScroller p {
	line-height: 40px;
	color: var(--fontcolor4);
}

.pageBodyContent p {
	padding: 6px 30px;
	font-size: 110%;
}



#profileNiceListNum {background-color: var(--highlightcolor); padding:0px 4px;}
#profileNaughtyListNum {background-color: var(--fontcolor3); padding:0px 4px;}

.letterToSantaNaughtyOrNice {
	width:48%; float:left;
	height:50px;
	background-color: rgba(255, 255, 255, 0.25);
}
.letterToSantaNaughtyOrNice h2 {text-align: center; line-height: 50px;}

#letterToSantaNaughty {margin:10px 2% 10px 0px;}
#letterToSantaNice {margin:10px 0px 10px 2%;}


.letterToSantaNaughtySelected {background-color: var(--bgcolor3);}
.letterToSantaNiceSelected {background-color: var(--highlightcolor);}
.letterToSantaNaughtySelected h2 {color: var(--fontcolor4);}
.letterToSantaNiceSelected h2 {color: var(--fontcolor4);}


.pageBodyContentDonationButtonDiv {
	width: 90%;
	margin: 30px auto 0px auto;
}















#pageMemberProfile {
	width: 100%;
	height: 100%;
	position: fixed;
	top:0px;
	background-color: var(--bgcolor1);

}
.memberProfileOnScreen {
	animation: moveProfileOnScreen 0.1s ease-out 0s 1 normal;
	right: 0%;
}
.memberProfileOffScreen {
	animation: moveProfileOffScreen 0.1s ease-out 0s 1 normal;
	right: -100%;
}

#pageMemberProfileHeader { height:160px; }

#pageMemberProfileHeaderBanner {height: 160px;}

#pageMemberProfileHeaderBanner img {width:100%; height:100%;object-fit: cover;}


#pageMemberProfileHeaderPic {
	width: 70px; height:70px; 
	background-color: var(--bgcolor1);
	border-radius: 30px;
	position: relative;
	left:10px;
	bottom:35px;

}
#pageMemberProfileHeaderPicImg {
	width: 60px; margin: 5px;
}

#pageMemberProfileAbout {
	

}
#pageMemberProfileAbout p {padding: 40px 20px 10px 20px;}



.pageMemberProfileHeaderButtons {
	background-color: var(--bgcolor1);
	border: none;
	outline: 1px solid var(--fontcolor1);
	border-radius: 12px;
	position: absolute;
	top:10px;
	display: inline-block;
}
#pageMemberProfileHeaderAlertButton {width:24px; height:24px;right:120px;}
#pageMemberProfileHeaderFollowButton {width:100px; height:24px;right:10px;}





.pageBodyContentLatestDonationListing {
	width: 94%;
	background-color: var(--bgcolor2);
	border-radius: var(--borderRadius);
	border: 1px solid var(--fontcolor3);
	margin: 10px auto 0px auto;
}

.pageBodyContentDonationType {
	width: 94%;
	background-color: var(--bgcolor2);
	border-radius: var(--borderRadius);
	border: 1px solid var(--fontcolor3);
	margin: 10px auto 0px auto;
}

.pageBodyContentDonationTypeName {
	width: 50%;
}
.pageBodyContentDonationTypeCopyAddress {
	width: 50%;
}
.pageBodyContentDonationTypeQR {
	width: 70%; max-width: 640px;
	margin:10px auto;

}

.pageBodyContentDonationTypeName p {
	text-align: right;
	padding: 0px 5px 0px 0px;
	line-height: 40px;
	font-size: 125%;
}
.pageBodyContentDonationTypeCopyAddress p {
	text-align: left;
	padding: 0px 0px 0px 5px;
	line-height: 40px;
}



.pageBodyContentTitle h2 {
	padding:20px 20px 0px 30px;
}
.pageBodyContentTitle p {
	padding:20px 20px 0px 30px;

}




.pageBodyContentLatestDonationListing p {
	color: var(--fontcolor3);
}

.pageBodyContentLatestDonationAmount, .pageBodyContentLatestDonationAddress {
	float: left;
}

.pageBodyContentLatestDonationAmount {width: 35%;}
.pageBodyContentLatestDonationAddress {width: 65%; overflow-wrap: anywhere;}
.pageBodyContentLatestDonationAddress p {padding-left: 0px; font-size: 80%;}





.pageBodyContentForm {
	width: 100%; max-width: 800px;
	margin: 10px auto 0px auto;
}
.pageBodyContentFormFields {
	width: 90%;
	margin: 0px auto 0px auto;
}
.pageBodyContentFormField {
	margin-bottom: 10px;
	line-height: 30px;
	font-size: 150%;
	padding:0px 20px;
	background: rgba(255, 255, 255, .25);
	border: 0px solid var(--fontcolor3);
	outline: none;
}
.pageBodyContentFormFieldTextarea {
	min-height: 120px;
}
.pageBodyContentFormField:focus {
	border: 1px solid var(--fontcolor4);
	background: rgba(255, 255, 255, .5);
}

.pageBodyContentFormButton {
	background-color: var(--highlightcolor);
	color:var(--fontcolor4);
	border: 1px solid var(--fontcolor4);
	outline: none;
	height:50px;
	font-size: 150%;
}

.formFieldError {
	border:2px solid var(--bgcolor3);
}


.fullWalletDetailsCopyAddress {color:var(--fontcolor3);}


.pageBodyContentAcceptedCoin {
	width: 90%; max-width: 640px;
	margin: 15px auto 0px auto;
	background-color: var(--bgcolor2);
	position: relative;
	border-radius: var(--borderRadius);
	z-index: 0;
}


.pageBodyContentAcceptedCoin h3 {
	line-height: 40px;
	padding:0px 15px;
}


.pageBodyContentAcceptedCoinCopyAddress {
	font-size: 65%;
}


.coinAddressCopied {
	color:var(--fontcolor5);
}


.pageBodyContentAcceptedCoinTinyQr {width: 34px;
	position: absolute;top:3px; right:3px;
}

.pageBodyContentAcceptedCoinCopyAddress:hover, 
.pageBodyContentAcceptedCoinTinyQr:hover,
.letterToSantaNaughtyOrNice:hover,
.pageBodyContentFormButton:hover {
	cursor: pointer;
}



#fullWalletDetailsPopupBg {
	height:1000px;
	background-color: var(--bgcolor5);
	z-index: 99;
	opacity: .8;
	position: fixed;
}
.walletDetailsBgOnScreen {
	animation: moveBgDownOnScreen 0.1s ease-out 0s 1 normal;
	top: var(--walletDetailsBgOnScreenPos);
}
.walletDetailsBgOffScreen {
	animation: moveBgUpOnScreen 0.1s ease-out 0s 1 normal;
	top: var(--walletDetailsBgOffScreenPos);
}

#fullWalletDetailsPopup {
	position: fixed;
	z-index: 99;
}
.walletDetailsOnScreen {
	animation: moveDownOnScreen 0.1s ease-out 0s 1 normal;
	top: var(--walletDetailsOnScreenPos);
}
.walletDetailsOffScreen {
	animation: moveUpOnScreen 0.1s ease-out 0s 1 normal;
	top: var(--walletDetailsOffScreenPos);
}

#fullWalletDetails {
	width: 90%; max-width: 600px;
	min-height:400px;
	margin: 0px auto;
	background-color: var(--bgcolor2);
	border-radius: var(--borderRadius);

}
#fullWalletDetailsHeader {
	height: 60px;
	position: relative;
}
#fullWalletDetailsHeader h3 {
	line-height: 60px; padding: 0px 0px 0px 20px;
}

#fullWalletDetailsQr {
	width: 70%; margin: 10px auto 10px auto;
}
#fullWalletDetailsQr img {padding-bottom: 0px;}


#fullWalletDetailsClose {
	width: 50px; height: 50px;
	position: absolute;
	top:5px; right:0px;
}
#fullWalletDetailsCloseIcon {font-size: 250%;}

#fullWalletDetailsBody p {padding: 0px 25px; overflow-wrap: anywhere;}




















.adminLetterListing {
	border: 1px solid #ccc;
	width: 90%;
	margin: 15px auto 0px auto;
}

.adminLetterListingName {width: 65%;}
.adminLetterListingNaughtyOrNice {width: 34%;}
.adminLetterListingNaughtyOrNiceText {text-align: right;}




.adminToolBox {
	width: 96%; max-width: 960px;
	height:80%;
	background-color: #fff;
	position: fixed;
	left: 2%;
	

}


.adminToolFormLeftRight {
	width: 48.5%; margin:5px 0px 0px 1%;
	height:50px;
	background-color: #ddd;
	float: left;
}
.adminToolFormLeftRight p {
	text-align: center;
	line-height: 50px;
	font-size: 110%;
}
.adminToolFormButton {
	width: 100%;
	height:40px;
	margin: 10px 0px;
	background-color: var(--highlightcolor);
}

#adminToolBoxContent {
	position: relative;
	overflow-y: scroll;
	height:80%;
}

#adminToolBoxContent p {
	font-size: 110%;
	padding: 5px 25px 0px 25px;
}

.adminToolForm {
	width: 96%; 
	margin: 15px auto;
}

#adminToolBoxHeader {
	width: 100%;
	height: 40px;
	background-color: var(--bgcolor3);

}
#adminToolBoxHeader h2 {
		color: var(--fontcolor4);
		padding: 5px 15px;
}

#adminToolBoxCloseButton {
	background-color: var(--bgcolor3);
	width: 20%; height: 40px;
	margin: 10px auto 0px auto;
}
#adminToolBoxCloseButton p { color: var(--fontcolor4); text-align: center; line-height: 40px;}


.fa-regular {
	color: var(--fontcolor4);
	
}
.inlineIcons {display: inline; padding-right: 15px;}
.fa-chevron-down {padding-left:30px;}

.fa-brands, .fa-solid {
	color: var(--fontcolor4);
}
.fa-brands:hover, .fa-solid:hover, .fa-regular:hover {cursor: pointer;color:var(--highlightcolor);}

#pageFooterSocialLinks, #pageFooterDomainName {
	display: inline-block; line-height: 60px;
}

#pageFooterDomainName a {color: var(--highlightcolor);}
#pageFooterSocialLinks i {
	padding-left:20px;
}

.lightText {color:var(--fontcolor1);}
.darkText {color:var(--fontcolor3);}

.displayInlineBlock {display: inline-block;}

.pageContentSlideOnscreen {right:100%;}
.pageContentSlideOffscreenRight {right:200%;}
.pageContentSlideOffscreenLeft {right:0%;}

.sideNavOnScreen {
	animation: moveOnScreen 0.1s ease-out 0s 1 normal;
	left: 0px;
}
.sideNavOffScreen {
	animation: moveOffScreen 0.1s ease-out 0s 1 normal;
	left: -320px;
}

.sideNavCloseBarOnScreen {
	animation: moveCloseBarOnScreen 0.1s ease-out 0s 1 normal;
	left: 320px;
}
.sideNavCloseBarOffScreen {
	animation: moveCloseBarOffScreen 0.1s ease-out 0s 1 normal;
	left: -100px;
}



.adminToolBoxOnScreen {
	animation: moveToolboxUpOnScreen 0.1s ease-out 0s 1 normal;
	top:60px;
}
.adminToolBoxOffScreen {
	animation: moveToolboxDownOffScreen 0.1s ease-out 0s 1 normal;
	top:100%;
}




@keyframes moveOnScreen{
    from {left: -320px;} 
    to{left:0px;} 
}
@keyframes moveOffScreen{
    from {left: 0px;} 
    to{left:-320px;} 
}
@keyframes moveCloseBarOnScreen{
    from {left: -100px;} 
    to{left:320px;} 
}
@keyframes moveCloseBarOffScreen{
    from {left: 320px;} 
    to{left:-100px;} 
}

@keyframes moveLiveBarOnScreen{
    from {right: -75%;} 
    to{right:2%;} 
}
@keyframes moveLiveBarOffScreen{
    from {right: 2%;} 
    to{right:-75%;} 
}

@keyframes moveProfileOnScreen{
    from {right: -100%;} 
    to{right:0%;} 
}
@keyframes moveProfileOffScreen{
    from {right: 0%;} 
    to{right:-100%;} 
}


@keyframes moveDownOnScreen{
    from {top: var(--walletDetailsOffScreenPos);} 
    to{top:var(--walletDetailsOnScreenPos);} 
}
@keyframes moveUpOffScreen{
    from {top: var(--walletDetailsOnScreenPos);} 
    to{top:var(--walletDetailsOffScreenPos);} 
}

@keyframes moveBgDownOnScreen{
    from {top: var(--walletDetailsBgOffScreenPos);} 
    to{top:var(--walletDetailsBgOnScreenPos);} 
}
@keyframes moveBgUpOffScreen{
    from {top: var(--walletDetailsBgOnScreenPos);} 
    to{top:var(--walletDetailsBgOffScreenPos);} 
}

















@keyframes moveToolboxUpOnScreen{
    from {top: 100%;} 
    to{top: 60px;} 
}
@keyframes moveToolboxDownOffScreen{
    from {top: 60px;} 
    to{top:100%;} 
}

@keyframes moveToolboxBgUpOnScreen{
    from {top: var(--walletDetailsBgOffScreenPos);} 
    to{top:var(--walletDetailsBgOnScreenPos);} 
}
@keyframes moveToolboxBgDownOffScreen{
    from {top: var(--walletDetailsBgOnScreenPos);} 
    to{top:var(--walletDetailsBgOffScreenPos);} 
}










.spinningWorking {width: 40px; height:40px; animation:spinningWorkingAnimation 0.5s linear 0s infinite normal;}










.snowflake {
  background-image: url('../images/snowflake.png'); /* Replace with your snowflake image */
  background-size: cover;
  opacity: 0.6;
  z-index: -10;
  animation:spinningWorkingAnimation 40s linear 0s infinite normal;
}


@keyframes spinningWorkingAnimation {
 	100% {-webkit-transform: rotate(360deg); transform:rotate(360deg);}
}

























@media only screen and (min-width: 600px) {
	#fullWalletDetailsQr img {padding-bottom: 10px;}

}