:root{
	--main-color: #4cbcde;
	--main-color-darker: #43a7c6;
	--second-color:#E25E87;
	--body-color: #f8fafb;
	--body-color-darker:#e5ebee;
	--body-color:#f9f7f3;
	--body-color-darker:#e6e3df;
	--body-color-lighter:#fcfbf9;
	--font-color: #54474A;
	--font-color-lighter:#B3ABAD;
	--white-color: #fafafa;
	--max-width: 1200px;
	--max-width-blog: 800px;
	--main-font:'Lato', sans-serif;
	--cursive-font: "Birthstone", cursive;
	--serif-font: "Lateef", serif;
	--standard-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
	--inset-shadow:inset 0 1px 1px rgba(0,0,0,.075);
	--track-out:0.05em;
	--pink-blue-gradient:linear-gradient(135deg, rgba(222, 76, 117, 0.34) 0%, rgba(22, 153, 217, 0.35) 100%);
}

*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

.rounded-shadow{
	border-radius:16px;
	box-shadow:var(--standard-shadow);
}

.standard-shadow{
	box-shadow:var(--standard-shadow);
}


.unselectable {
	-webkit-user-select: none;  /* Chrome, Safari, and Opera */
	-moz-user-select: none;     /* Firefox */
	-ms-user-select: none;      /* Internet Explorer */
	user-select: none;          /* Standard syntax */
}

/* Hide scrollbars but allow scrolling */
.hide-scrollbars {
	overflow: scroll; /* Enable scrolling */
	-ms-overflow-style: none; /* For Internet Explorer and Edge */
	scrollbar-width: none; /* For Firefox */
}

.hide-scrollbars::-webkit-scrollbar {
	display: none; /* For Chrome, Safari, and Opera */
}

.ellipsis {
	white-space: nowrap;      /* Prevent text wrapping */
	overflow: hidden;         /* Hide overflowed content */
	text-overflow: ellipsis;  /* Add the ellipsis */
}



img.lazy{
	opacity:0;
	transition:all 2s;
}
img.lazy.in-viewport{
	opacity:1;
}

.lazy-content{
	opacity:1;
	transition:all 2s;
}

.lazy-content.outside-viewport{
	opacity:0;
}




html{
	font-size:14px;
}

body {
	font-family: var(--main-font);
	background: var(--body-color);
	padding-top: 50px;
	-webkit-text-size-adjust: 100%;
	color: var(--font-color);
}

body.no-scroll{
	overflow:hidden;
}

.flex-column-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* BOOTSTRAP */

.container-fluid {
	max-width: calc(1150px + 8rem);
	padding: 0 4rem;
}

.container-fluid.narrow{
	max-width: calc(720px + 8rem);
	padding: 0 4rem;
}

@media screen and (max-width:960px){
	.container-fluid {
		max-width: calc(1150px + 4rem);
		padding: 0 2rem;
	}
	.container-fluid.narrow{
		max-width: calc(720px + 4rem);
		padding: 0 2rem;
	}
}

@media screen and (max-width:540px){
	.container-fluid {
		max-width: calc(1150px + 2rem);
		padding: 0 1rem;
	}
	.container-fluid.narrow{
		max-width: calc(720px + 2rem);
		padding: 0 1rem;
	}
}

@media screen and (min-width:991px){
	.sticky {
		position: -webkit-sticky;
		position: sticky;
		top: 140px;
	}
}

a{
	text-decoration: none;
	color: var(--second-color);
	font-weight:600;
}

a.biglink{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

a:hover,
a:focus{
	color: var(--font-color);
	text-decoration: none;
}
h1,h2,h3{
}

p{
	line-height:1.75em;
	margin:1em 0;
	font-weight:400;
}

p.smaller{
	font-size:.875rem;
}

p.light{
	color:var(--font-color-lighter);
}

.cursive{
	font-family:var(--cursive-font);
}

.serif{
	font-family:var(--serif-font);
	text-transform:uppercase;
	font-weight:300;
	letter-spacing:.1em;
	line-height:1em;
}

.pink{
	color:var(--second-color);
}

.all-caps{
	text-transform:uppercase;
}

.tracked-out{
	letter-spacing:.15em;
}

.accordion-button:not(.collapsed) {
	color: var(--main-color);
	background-color: #fafafa;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.1);
}

hr {
	background-color: var(--font-color-lighter);
	width: 100%;
}

div.hr.heart {
	display: flex;
	position: relative;
	justify-content: center;
	margin: .5rem 0;
}

div.hr.heart:before,
div.hr.heart:after{
	content:'';
	position:absolute;
	top:50%;
	width:calc(50% - 12px);
	height:1px;
	background-color:var(--font-color-lighter);
}

div.hr.heart:before{
	left:0;
}

div.hr.heart:after{
	right:0;
}

hr.dashed{
	height: 0;
	border-bottom: 2px dashed var(--body-color-darker);
	width: 200px;
	margin: 3rem auto;
}

span.strong{
	font-weight:600;
}

.button-wrapper{
	display:flex;
	gap:10px;
}

/* TITLE AND DESCRIPTION */

div.title-description{
	
}

div.title-description.landscape .title-wrapper {
	display: flex;
	margin-bottom: 3rem;
	align-items:center;
}

div.title-description.landscape .lhs {
	flex: 0 0 auto;
	border-right: 4px solid var(--second-color);
	width: fit-content;
	padding-right: 2rem;
}

div.title-description.landscape .rhs {
	padding-left:2rem;
}

div.title-description .description {
	margin: 0;
	text-wrap: balance;
}

/* Portrait version */

div.title-description.portrait{
	max-width:720px;
	margin:0 auto;
}

div.title-description.portrait .title-wrapper {
	display: flex;
	margin-bottom: 3rem;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

div.title-description.portrait .subtitle{
	color:var(--second-color);
}

div.title.centered{

}

div.title.centered h2{
	text-align:center;
	display:flex;
	flex-direction:column;
	gap:.75rem;
	align-items:center;
}

.max-width{
	max-width:var(--max-width);
	margin:0 auto;
}

.container-fluid{
	max-width: calc(1100px + 4rem);
	position: relative;
	padding: 0 2rem;
}

.container-fluid.wider {
	max-width: calc(1320px + 4rem);

}

.container-fluid.narrow {
	max-width: calc(720px + 8rem);
	padding: 0 4rem;
}

.standard-margin{
	margin:3rem 0;
}

.standard-padding{
	padding:3rem 0;
}

i.circled{
	display: flex;
	width: 36px;
	height: 36px;
	color: var(--second-color);
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px;
	border-radius: 50%;
}



/* USER ACCOUNT PAGE */
div.qr-row{
	display:flex;
	gap:15px;
}

div.qr-info{
	width:100%;
}

div.qr-code{
	padding: 5px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

div.qr-code img{
	display:block;
	width:150px;
	height:150px;
}

div.user-form.avatar-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 15px;
}

div.user-form .custom-file-input-wrapper {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	margin-bottom: 10px;
	flex-direction: column;
	/* box-shadow: 0 0 0 1px gray inset; */
}

div.user-form .custom-file-label {
	cursor: pointer;
}

div.user-form .file-name {
	font-size: 12px;
	color: var(--font-color);
}

div.user-form.avatar-form img.userAvatar{
	width:120px;
	height:120px;
}
img.userAvatar{
	border-radius:50%;
}

div.user-form input[type="file"] {
	display: block;
	border: none;
	box-shadow: none;
	padding: 0;
}

div.user-form p.couple-names{
	margin:0 0 10px 0;
	line-height:1.375em;
	
}
div.user-form h3{
	margin:0;
}

#agent-info{
	align-items:center
	
}

#agent-info p{
	margin:0;
}

/* PAYMENT LIST */

div.list-payments .outer-wrapper{
	max-width:100%;
	overflow:scroll;
}
div.payment-list-wrapper{
	margin:30px 0;
	min-width:800px;
}
div.payment-line.headings{
	font-weight:600;
}
div.payment-line {
	display: grid;
	grid-template-columns: 120px 160px 180px 90px 90px 90px 90px;
}
div.payment-line.with-id{
	grid-template-columns: 40px 120px 160px 210px 90px 90px 90px;
}

div.payment-line.full-version {
	grid-template-columns: 40px 120px 160px 210px 90px 90px 90px 120px 1fr;
	align-items: center;
	border-radius:5px;
	transition:all 0.3s;
}

div.payment-line.full-version:hover{
	background:var(--body-color);
}

div.payment-line:nth-of-type(even){
	background:var(--body-color);
}

div.payment-line div{
	padding:10px 5px;
	font-size:0.875em;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

div.payment-line div.issue-refund{
	text-align:right;
}

div.payment-line div.email{
	
}

div.payment-line.total{
	font-weight:600;
}

div.payment-line.total .total{
	text-align:right;
}

.stripe-data {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--body-color);
	padding: 10px;
	border-radius: 5px;
	margin-top:5px;
}
.stripe-data .data-row{
	display:grid;
	grid-template-columns: 140px 1fr;
}



.user-row,
.user-headings {
	display: grid;
	grid-template-columns: 1fr 2fr 2fr 1fr 2fr;
	align-items: center;
	padding: 8px;
	border-bottom: 1px solid #eee;
}

.user-headings {
	font-weight: bold;
	background: #f9f9f9;
}
.badge{
	padding:4px 9px;
	font-weight:600;
}
.badge.badge-completed{
	background-color:#8db341;
}
.badge.badge-pending{
	background-color:var(--main-color);
}

.badge.badge-declined{
	background-color:#c80000;
}

.withdrawal-data{
	background:var(--body-color);
	display:flex;
	gap:15px;
	padding:8px;
}

.requested-actioned,
.bank-details {
	display: flex;
	gap: 15px;
	padding:0 8px;
	border-radius:4px;
}
.requested-actioned div,
.bank-details div{
	display:flex;
	flex-direction:column;
}

/* HEADER */

header#main-header.nav-up{
	transform:translateY(-100%);
}

header#main-header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:800;
	transition:all 0.3s;
	box-shadow:0 0 4px rgba(0,0,0,0.15);
}

/* Top Header */

header#main-header .top-header {
	background: #fafafa;
	padding: 0 4%;
}

header#main-header .top-header .wrapper {
	margin: 0 auto;
	max-width: 1200px;
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	gap: 1rem;
}

header#main-header .top-header .status-burger-wrapper{
	display:flex;
	align-items:center;
	gap:2rem;
}

header#main-header .top-header .user-status {
	cursor:pointer;
	position:relative;
}

header#main-header .top-header .user-status a.logged-out{
	font-weight:500;
}

header#main-header .top-header .username {
	display: flex;
	align-items: center;
	gap: 5px;
	height:50px;
}

header#main-header .top-header .username img {
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 5px;
	border: 2px solid rgba(255,255,255,1);
}


header#main-header .top-header .user-status p {
	font-weight:500;
	margin:0;
}

header#main-header .top-header .user-info a{
	display:flex;
	align-items:center;
	color:#fff;
	gap:5px;
	font-weight:500;
	padding:10px;
	background:var(--main-color);
	border-radius:5px;
}

header#main-header .top-header .user-info a:hover{
	background:var(--main-color-darker);
}

header#main-header .top-header .user-status a i{
	display:block;
	font-size:18px;
	position:relative;
}

header#main-header .top-header .user-status.attention:before {
	content: '\f12a';
	position: absolute;
	top: 0;
	right: 0;
	font-family: 'Font Awesome 5 Pro';
	width: 16px;
	height: 16px;
	background: var(--second-color);
	border-radius: 8px;
	font-size: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translate(50%,25%);
	font-weight:600;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}


header#main-header .top-header .username:after{
	content:'\f0d7';
	font-family:'Font Awesome 5 Pro';
	font-weight:600;
}

header#main-header .top-header .user-info {
	display:flex;
	position: absolute;
	top: 45px;
	right:-15px;
	z-index: 1000;
	flex-direction:column;
	gap:5px;
	width:160px;
	opacity:0;
	transform:translateY(-10px);
	pointer-events: none;
	transition:all 0.3s;
	padding: 5px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
header#main-header .top-header .user-status:hover .user-info{
	opacity:1;
	transform:translateY(0);
	pointer-events: auto;
}
	

header#main-header div.logo {
	width: 180px;
	transition: all 0.4s 0.2s;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	height: auto;
	background: #fff;
	left: 50%;
	z-index: 10;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	transform: translateX(-50%);
}

header#main-header.nav-up div.logo {
	transform:translate(-50%,-100%);
}

header#main-header div.logo a {
	display: block;
	height: auto;
	width: 100%;
	transition: all 0.3s;
	padding: 1rem 2rem;
}

header#main-header div.logo a img{
	display: block;
	width: 100%;
	height: auto;
	position: relative;
	transition:all 0.3s;
}

@media screen and (max-width:640px){
	header#main-header div.logo{
		width:180px;
	}
	header#main-header div.logo a{
		padding:0.25rem 1rem;
	}
}

/* FOOTER */

footer#footer {
	padding: 30px 5%;
	background: #fff;
}

footer#footer p.credit{
	font-size:0.75em;
}

/* ACCOUNT PAGE */
section.user-details-form {
	padding: 45px 0;
}

/* DONATION LISTING */


section.donation-pages{
	padding:45px 0;
	
}
div.donations-pages-list{
	display:flex;
	flex-direction:column;
}

.donation-pages-list-item {
	display: flex;
	width: 100%;
	position: relative;
	background: #fff;
	transition: all 0.3s;
	overflow: hidden;
	margin-bottom: 1rem;
}

.donation-pages-list-item:hover {
	box-shadow: 0 0 0 8px var(--body-color-darker);
}

.donation-pages-list-item .image {
	width: 110px;
	height: 110px;
	background-size: cover;
	background-position: center center;
	position: relative;
}

.donation-pages-list-item .info {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	align-items: flex-start;
	justify-content: center;
}

.donation-pages-list-item .info h5,
.donation-pages-list-item .info p{
	margin:0;
}

.donation-pages-list-item a{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/* DONATION PAGE */
section.user-page{
	padding:40px 0;
}

/* Main Photo Part */
section.couple-main-image {
	max-height: 640px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position:relative;
}

section.couple-main-image div.user-selected-image {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	background-size:cover;
	background-position:center center;
	filter:saturate(0);
}

section.couple-main-image:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--pink-blue-gradient);
	z-index:10;
}

section.couple-main-image .info {
	background: #fff;
	padding: 2rem;
	outline: 3px solid white;
	outline-offset: 3px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	margin:200px 5rem;
	z-index:20;
	border-radius:12px;
}

section.couple-main-image h3.couple-names{
	font-size: 48px;
}

section.couple-main-image .info .subtitle {
	font-size: 1.375rem;
}

section.couple-main-image .info .date{
	font-weight:500;
}

/* THE COUPLE SECTION */
section.the-couple{
	position:relative;
}

section.the-couple .wrapper{
	width:100%;
	height:100%;
	top:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
}

section.the-couple .partner-photo-display{
	display:flex;
	width:100%;
	max-width:600px;
	margin:3rem auto;
	position:relative;
}

section.the-couple .partner-photo-display:before{
	content:'';
	position:absolute;
	left:50%;
	top:0;
	height:100%;
	width:1.5px;
	background-color:var(--font-color-lighter);
}

section.the-couple .partner-photo-display .partner{
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
}

section.the-couple .partner-photo-display .heart-icon{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:fit-content;
	color:var(--second-color);
	font-size:4rem;
	padding:3px;
	background-color:var(--body-color);
}

section.the-couple .partner-photo-display .image {
	position:relative;
	width: 180px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	box-shadow:0 0 0 8px #fff;
}

section.the-couple .partner-photo-display .image .partner-photo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  user-select: none;
  pointer-events: none;
}

section.the-couple .partner-photo-display .image.no-image {
	background: #f0f0f0;
}

section.the-couple .partner-photo-display .partner-name{
	font-size:3rem;
	margin:1rem 0 0 0;
}

section.the-couple .partner-photo-display .home-town{
	font-size:.875rem;
}

section.the-couple .couples-message{
	width:100%;
	max-width:720px;
	margin:0 auto;
	text-align:center;
}

section.the-couple .couples-message p{
	font-size:1.5rem;
}


/* TOTALISER */

div.totaliser-wrapper{
	display:flex;
	justify-content:flex-start;
}
div.fundraising-progress {
	padding: 40px;
	background: #fff;
}
div.totaliser {
	width: 160px;
	height: 240px;
	position:relative;
}
div.totaliser-neck {
	width: 40px;
	height: 100%;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 0 0 6px var(--body-color-darker);
	position: absolute;
	left: 50%;
	top: 0px;
	transform: translate(-50%, 0);
}
div.totaliser-neck-inner {
	width: 30px;
	height: calc(100% - 10px);
	background: var(--body-color-darker);
	border-radius: 20px;
	position: absolute;
	left: 50%;
	top: 5px;
	transform: translate(-50%, 0);
}

div.totaliser-neck-bottom-fill{
	width: 30px;
	height: 5px;
	background: var(--main-color);
	position: absolute;
	left: 50%;
	bottom: 50px;
	transform: translate(-50%, 0);
}
div.totaliser-bottom{
	width:60px;
	height:60px;
	background: #fff;
	box-shadow: 0 0 0 6px var(--body-color-darker);
	position:absolute;
	left:50%;
	bottom:0;
	transform:translate(-50%,0);
	border-radius:30px;
}

div.totaliser-bottom-inner {
	width: 50px;
	height: 50px;
	background: var(--main-color);
	position: absolute;
	left: 50%;
	bottom: 5px;
	transform: translate(-50%, 0);
	border-radius: 25px;
}

div.totaliser-bottom-fix{
	width:40px;
	height:60px;
	background: #fff;
	position:absolute;
	left:50%;
	bottom:20px;
	transform:translate(-50%,0);
}

div.totaliser-tick-marks {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	position: absolute;
	top: 20px;
	right: 50%;
	height: calc(100% - 75px);
	/* width: 100%; */
	transform: translateX(-20px);
}

div.totaliser-tick-marks .tick {
	width: 15px;
	height: 2px;
	background: var(--body-color-darker);
	position:relative
}
div.totaliser-tick-marks .tick .label {
	position: absolute;
	color: #c6cbce;
	top: 0;
	left: 0;
	text-align: left;
	transform: translate(-100%,-50%);
}
div.totaliser-tick-marks .tick:nth-of-type(6),
div.totaliser-tick-marks .tick:first-of-type,
div.totaliser-tick-marks .tick:last-of-type
{
	width: 25px
}
div.totaliser-total-wrapper{
	position:absolute;
	bottom:55px;
	height: calc(100% - 75px);
	width:100%;
	left:0;
}
.relative-wrapper {
	position: relative;
	height: 100%;
}

div.totaliser div.percentage-raised {
	position: absolute;
	transform: translate(calc(100% + 5px), 50%);
	bottom: 0%;
	width: 90px;
	filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
	border-radius: 5px;
	overflow: hidden;
}
div.totaliser div.percentage-raised .wrapper{
	padding: 5px 5px 5px 18px;

	background: var(--second-color);
	color: #fff;
	font-size: 0.875em;
	clip-path: polygon(0 50%, 15px 0, 100% 0, 100% 100%, 15px 100%);
	display:flex;
	font-weight:600;
}

div.totaliser div.percentage-raised .wrapper span{
	display:block;
	width:34px;
	font-size:2em;
}
div.totaliser-total-bar{
	width: 30px;
	height:0%;
	background:var(--main-color);
	position: absolute;
	left: calc(50% - 15px);
	bottom: 0;
	border-radius: 2px 2px 0 0;
	transform-origin:bottom center;
}
/* TOTALISER MESSAGE */

div.totaliser-message{
	text-align:center;
}
/* TOTALISER BUTTONS */

div.totaliser-buttons-wrapper{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	height:100%;
}

div.totaliser-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 240px;
}

div.totaliser-buttons .btn{
	width:100%;
}

div.list-socials{
	display:flex;
	gap:10px;
}
a.socials-item{
	display: flex;
	width: 36px;
	height: 36px;
	background: var(--main-color);
	color: #fff;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	font-size: 18px;
}

.fa-facebook:before{
	content:'\f39e';
}

/* USER MESSAGES */

div.user-messages {
	position: relative;
}

/* The wrapper becomes the thing we measure */
.messages-wall{
  container-type: inline-size;
  /* optional: container-name: messages; */
}

/* Masonry container */
div.user-messages{
  position: relative;
}

/* Default: 1 col */
.user-messages .grid-sizer,
.user-messages .message{
  width: 100%;
  box-sizing: border-box;
}

.user-messages .gutter-sizer{ width: 0; }

/* 2 cols (based on the wrapper width, NOT viewport) */
@container (min-width: 560px){
  .user-messages .grid-sizer,
  .user-messages .message{ width: 48%; }
  .user-messages .gutter-sizer{ width: 4%; }
}

/* 3 cols */
@container (min-width: 900px){
  .user-messages .grid-sizer,
  .user-messages .message{ width: 31%; }
  .user-messages .gutter-sizer{ width: 3.5%; }
}

/* 4 cols */
@container (min-width: 1100px){
  .user-messages .grid-sizer,
  .user-messages .message{ width: 23.5%; }
  .user-messages .gutter-sizer{ width: 2%; }
}

/* Your spacing */
div.user-messages .message{
  margin-bottom: 1.25rem;
}


div.user-messages p {
	margin: 0.375em 0;
	line-height: 1.5em;
}

div.user-messages p.date {
	/* background: #b0b4b9; */
	/* padding: 2px 6px; */
	display: block;
	width: fit-content;
	/* color: #fff; */
	border-radius: 3px;
	font-size: 12px;
	font-weight: 500;
	color: var(--font-color-lighter);
}

div.user-messages .message {
	padding: 1rem;
	position: relative;
	background: #fff;
	box-shadow: 0 2px 3px rgba(0,0,0,0.1);
	margin-bottom: 1.25rem;
}

div.user-messages .message.hidden-message{
	opacity:0.5;
}

div.user-messages .message h4{
	margin:0;
	color:var(--second-color);
}

div.user-messages .message .visibility-toggle {
	position: absolute;
	top: 1rem;
	right: 1rem;
	cursor: pointer;
}

div.user-messages .message .visibility-toggle:before{
	content:'\f06e';
	font-family:'Font Awesome 5 Pro';
	font-size:16px;
}
div.user-messages .message .visibility-toggle.toggled-off:before{
	content:'\f070';
}

/* FLYER CARD */








/* DONATION PAGE FORM */

/* User Image Standard */
.user-image-preview-wrapper{
	width:100%;
	position:relative;
}

.user-image-preview-wrapper.landscape{
	padding-bottom:56%;
}

.user-image-preview-wrapper.square{
	padding-bottom:100%;
}

.user-image-preview-wrapper.circle{
	padding-bottom:100%;
	border-radius:50%;
	overflow:hidden;
}

.user-image-preview {
	width: 100%;
	height: 100%;
	background-color: #999;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-size: cover;
	background-position: center;
}

/* EDITABE HEADSHOTS */

.headshot-editor { max-width: 280px; margin: 0 auto; }

.headshot-editor__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #999;
  cursor: grab;
}

.headshot-editor__frame.is-dragging { cursor: grabbing; }

.headshot-editor__img{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;  /* crucial: doesn’t block Choose File */
  transform-origin: center;
  display: none;
}

/* Upload UI sits on top */
.headshot-editor__ui{
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: .5rem;
  z-index: 5;
  pointer-events: auto;
}

.headshot-editor__controls {
	display: flex;
	gap: .5rem;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 1rem;
}

.headshot-editor__controls .zoom-controls{
	display:flex;
	gap:.5rem;
	width:100%;
}

/* Image Picker */

div.image-picker {

}

div.image-picker .image-folder-wrapper {
	background: var(--body-color-lighter);
	/* padding: 10px; */
	/* border-bottom: 1px solid #ddd; */
	margin-bottom: 10px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow:var(--inset-shadow);
}

div.image-picker .folder-images {
	height:0;
	overflow:hidden
}

div.image-picker .folder-images.folder-opened{
	height:auto;
}

div.image-picker .folder-images .wrapper{
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding:16px;
	background:var(--body-color-darker);
}

div.image-picker .folder-name {
	padding:9px 24px;
	display: flex;
	gap: 10px;
	align-items: center;
	cursor:pointer;
	box-shadow:0 0 4px rgba(0,0,0,0.2);
	position:relative;
}

div.image-picker .folder-name:hover {
	color: var(--second-color);
}

div.image-picker .folder-name i {
	font-size: 24px;
	color: #ecd693;
	text-shadow:0 1px 1px rgba(0,0,0,0.25);
}

div.image-picker .folder-name:after{
	content:'\f067';
	position:absolute;
	right:24px;
	top:50%;
	transform:translateY(-50%);
	font-family:'Font Awesome 5 Pro';
}
div.image-picker .folder-name.folder-opened:after{
	content:'\f068';
}

div.image-picker .image-thumbnail{
	width:60px;
	filter:saturate(0);
	box-shadow:0 0 0 3px #ccc;
	border-radius:12px;
	overflow:hidden;
	cursor:pointer;
	transition:all 0.3s;
	position:relative;
}

div.image-picker .image-thumbnail.selected {
	filter: saturate(1);
	box-shadow: 0 0 0 3px var(--second-color);
}

div.image-picker .image-thumbnail:not(.selected):hover{
	filter:saturate(1);
	box-shadow:0 0 0 3px var(--main-color);
	transform:scale(1.1);
	z-index:100;
}

div.image-picker .image-thumbnail img{
	width:100%;
	height:auto;
	display:block;
}

/* BLOG */

.blog-intro p{
	text-align: center;
	font-weight: 600;
	font-size:1.25rem;
	/* color: var(--main-color-darker); */
}

.blog-main-content img{
	max-width:100%;
	height:auto;
	border-radius:12px;
	margin:2rem 0;
}

.admin-panel .cke_editable img {
	cursor: default;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	margin: 2rem 0;
}