@font-face { font-family:'Museo-Sans'; src:url('../static/fonts/museo-sans.woff2') format('woff2'), url('../static/fonts/museo-sans.woff') format('woff'); font-weight:100; font-display:swap; }
@font-face { font-family:'Museo-Sans'; src:url('../static/fonts/museo-sans-300.woff2') format('woff2'), url('../static/fonts/museo-sans-300.woff') format('woff'); font-weight:300; font-display:swap; }
@font-face { font-family:'Museo-Sans'; src:url('../static/fonts/museo-sans-500.woff2') format('woff2'), url('../static/fonts/museo-sans-500.woff') format('woff'); font-weight:500; font-display:swap; }
@font-face { font-family:'Juana'; src:url('../static/fonts/juana.woff2') format('woff2'), url('../static/fonts/juana.woff') format('woff'); font-display:swap; }
@font-face { font-family:'Tropical-Summer'; src:url(../static/fonts/tropical-summer.otf) format('opentype'); }
*, *::before, *::after {
	--clr-darker:color-mix(in srgb, var(--clr-accent), black 15%);
	--clr-lighter:color-mix(in srgb, var(--clr-accent), white 50%);
	--clr-transp-0:color-mix(in srgb, var(--clr-accent), transparent 100%);
	--clr-transp-10:color-mix(in srgb, var(--clr-accent), transparent 90%);
	--clr-transp-20:color-mix(in srgb, var(--clr-accent), transparent 80%);
	--clr-transp-30:color-mix(in srgb, var(--clr-accent), transparent 70%);
	--clr-lightgrey:#707070;
	--clr-grey:#444444;
	--clr-greysat:color-mix(in srgb,color-mix(in srgb, var(--clr-accent), hsl(0deg 0% 70%) 35%), black 40%);
	--clr-error:#ff6b64;
	--clr-success:#8dc68f;
	--clr-warning: #fcbb68;
	--ft-default:'Museo-Sans', sans-serif;
	--ft-script:'Tropical-Summer', serif;
	--pg-width:1050px;
	--pg-gutter:20px;
	box-sizing:border-box;
	font:inherit; color:inherit;
	position:relative; 
	padding:0; margin:0; border:0; line-height:1.45;
	list-style:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent; outline:none;
}
h1, h2, h3, h4, h5 { font-family:var(--ft-accent); line-height:1.3; }
iframe { width:100%; height:100%; border:0; margin:0; padding:0; }
a { outline:none; color:inherit; text-decoration:inherit; }
b { font-weight:500; }
[data-styling] i { color:var(--clr-accent); font-style:normal; }
[data-styling] u { text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--clr-accent); text-underline-offset:3px; }
[data-styling] a.linktext { text-decoration:underline 1px var(--clr-accent); text-underline-offset:3px; color:var(--clr-accent); transition:color 0.3s; white-space:nowrap; max-width:min(300px,100%); overflow:hidden; display:inline-block; text-overflow:ellipsis; vertical-align:middle; }
[data-styling] a.linktext:hover { color:var(--clr-darker); }
ol, ul { list-style:none; }
img { max-width:100%; display:block; }
img[src=""] { display:none; }
html { touch-action:manipulation; background-color:var(--clr-backgroundColor); color:var(--clr-textColor); --weight-default:100; }
* ::selection { color:white; background: #4a4a4a; }
html, body { width:100%; height:100%; left:0px; -webkit-font-smoothing:antialiased; font-size:15px; font-family:'Museo-Sans',sans-serif; font-weight:var(--weight-default); }
body { overflow-x:hidden; }
table { border-collapse:collapse; width:100%; display:block; overflow-x:auto; white-space:nowrap; }
table tr { border-bottom:1px solid #ececec; height:35px; }
table tr th { height:30px; position:sticky; background-color:white; color:var(--clr-accent); text-transform:uppercase; font-size:0.8em; font-weight:500; z-index:1; }
table tr td { font-size:0.95em; padding:0.5em 0.75em; }
table tr:not(:first-of-type):hover { background-color:#f7f7f7; }textarea { white-space:revert; }
mark { color:var(--clr-darker); background-color:transparent }
mark:after { content:''; background-color:var(--clr-transp-20); border-radius:3px; inset:-2px -3px; width:calc(100% + 6px); position:absolute; pointer-events:none; z-index:-1; }
.juana { font-family:var(--ft-accent); }
.tropical { font-family:var(--ft-script); }
[data-modal].initial { transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform 0.4s, opacity 0.3s; }
[data-modal].show { transform:translateY(0); opacity:1; pointer-events:initial; z-index:101; }
[data-modal][data-modalPos="top"] { top:unset; bottom:calc(100% + 25px); }
[data-modal][data-modalPos="top"].show { transform:translateY(10px); }
[data-modal][data-modalPos="top"]:after { top:unset; bottom:0; margin: 0 0 -8px; border-top: 8px solid #fff; border-bottom:unset; }
.modal { position:absolute; background:white; color:var(--clr-grey); font-size:0.95em; width:250px; padding:20px; left:0; top:40px; border-radius:6px; z-index:2; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform 0.4s, opacity 0.3s; }
.modal:after { content:''; position:absolute; top:0; left:30px; margin:-8px 0 0; border-right:8px solid transparent; border-left:8px solid transparent; border-bottom:8px solid #fff; }
.modal input { width:100%; margin-bottom:20px; }
.modal hr { width:100%; display:block; height:1px; background:#ebebeb; margin-block:15px 15px; }
svg { width:1em; height:1em; margin-right:0.5em; stroke-width:1.5; stroke:var(--clr-accent); fill:none; stroke-linecap:round; stroke-linejoin:round; }
sup { font-size:0.7em; margin-bottom:0.6em; line-height:100%; }
label, .subtitle { text-transform:uppercase; font-size:0.9em; color:var(--clr-accent); font-weight:500; }
.subtitle.mini { font-size:0.75em; }
label + svg { position:absolute; font-size:1.2em; margin-left:0.75em; top:0.55em; z-index:1; }
label + svg + input:is([type=text],[type=number],[type=email],[type=password],[type=search]), label + svg + textarea { padding-left:2.7em; }
label.absolute { position:absolute; margin-top:-1.5em; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search]),.stripe-input,textarea { padding:0.5em 1em; border-radius:3px; border:1px solid lightgrey; color:var(--clr-grey); resize:none; background-color:white; transition:border 0.3s, box-shadow 0.3s; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search]):focus,.stripe-input:focus-within,.stripe-input.StripeElement--focus,textarea:focus { border:1px solid var(--clr-accent); box-shadow:0 1px 0 var(--clr-accent); }
input:is([type=text],[type=number],[type=email],[type=password],[type=search])::placeholder,textarea::placeholder { color:#dcdcdc; letter-spacing:initial; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search]).error,.stripe-input.StripeElement--invalid,textarea.error { border:1px solid #FF5722; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search]).success,.stripe-input.StripeElement--complete { border:1px solid var(--clr-success); }
input[type="password"] { letter-spacing:0.2em; }
input[type="checkbox"].switch { border:1px solid rgba(0 0 0 / 5%); width:2.3em; height:1.5em; border-radius:20px; background:whitesmoke; cursor:pointer; transition:background 0.3s; }
input[type="checkbox"].switch:after { content:''; height:calc(100% - 2px); top:1px; left:1px;; aspect-ratio:1; border-radius:100px; background:white; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.1)); transition:left 0.3s }
input[type="checkbox"].switch:checked { background-color:var(--clr-accent); }
input[type="checkbox"].switch:checked:after { left:calc(100% - 1.5em + 3px); }
input[type="checkbox"].switch + label { cursor:pointer; transition:color 0.3s; }
input[type="checkbox"].switch + label:hover { color:var(--clr-darker); }
.switch-container { height:28px; display:grid; justify-content:left; align-items:center; grid-auto-flow:column; gap:10px; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; height:1.067em; aspect-ratio:1; background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23333333" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>'); opacity:0; cursor:pointer; pointer-events:none; transition:opacity 0.3s; }
input[type="search"]:not(:placeholder-shown)::-webkit-search-cancel-button { opacity:.3; pointer-events:unset; }
input[type="search"]:not(:placeholder-shown)::-webkit-search-cancel-button:hover { opacity:.5; }
input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel])[disabled] { background:#fbfbfb; color:var(--clr-lightgrey); }
label:has(~ input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel])[disabled]) + svg { stroke:#b3b3b3; }
label:has(~ input:is([type=text],[type=number],[type=email],[type=password],[type=search],[type=tel])[disabled]) { color:var(--clr-lightgrey); }
input[type="range"] { margin-bottom:unset; -webkit-appearance:none; -moz-appearance:none; width:100%; outline:none; }
input[type="range"]::-moz-range-thumb { -moz-appearance: none; height:15px; width:15px; border-radius:20px; background:#ffffff; border:1px solid var(--clr-accent); margin-top:-7.5px; cursor:pointer; transition:background-color 0.3s; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height:15px; width:15px; border-radius:20px; background:#ffffff; border: 1px solid var(--clr-accent); margin-top:-7.5px; cursor:pointer; transition:background-color 0.3s; }
input[type="range"]::-moz-range-thumb:hover { background-color:color-mix(in srgb, var(--clr-accent), white 80%); border:1px solid var(--clr-darker) }
input[type="range"]::-webkit-slider-thumb:hover { background-color:color-mix(in srgb, var(--clr-accent), white 80%); border:1px solid var(clr-darker) }
input[type="range"]::-moz-range-track { height:1px; background: lightgrey; }
input[type="range"]::-webkit-slider-runnable-track { height:1px; background: lightgrey; }
@keyframes rotation { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow:0 0 0 0px var(--clr-transp-20); } 100% { box-shadow:0 0 0 15px var(--clr-transp-0); } }
select { -webkit-appearance: none !important; -moz-appearance:none !important; appearance:none !important; padding: 0.5em 2.5em 0.5em 1em; border:1px solid #ebebeb; transition:border 0.3s; border-radius:3px; background-color:white; }
select:hover { border: 1px solid var(--clr-lighter); }
select[disabled]:hover { border:1px solid #ebebeb; cursor:not-allowed; }
select option[disabled] { color:lightgrey; }
.or-select { position:absolute; top:calc(100% + 3px); text-align:left; background-color:white; padding:0.8em 0.7em; border-radius:6px; font-size:0.9em; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); margin-top:10px; color:var(--clr-grey); width:max-content; }
.select-container { display:inline-flex; align-items:center; }
.select-container:after { content:''; border-bottom:1px solid; border-right:1px solid; border-color:lightgrey; position:absolute; right:1.1em; width:0.4em; aspect-ratio:1; transform:rotate(45deg); margin-top:-0.2em; transition:color 0.3s; pointer-events:none; }
.select-container:hover:after { border-color:var(--clr-lighter); }
.select-container svg { position:absolute; font-size:1.2em; margin-left:0.75em; top:0.5em; z-index:1; }
.select-container svg + select { padding-left:3em; }
.select-container.dense select { padding: 0.3em 1.75em 0.3em 0.55em; margin-right:0.25em; }
.select-container.medium { font-size:0.95em; }
.select-container.moderate select { padding-left:2.5em; }
.select-container.moderate:before { content:''; width:.8em; aspect-ratio:1; border-radius:50%; margin-left:.8em; border:1px solid rgba(0,0,0,10%); position:absolute; pointer-events:none; z-index:1; }
.select-container.moderate:has(option[value="0"]:checked):before { background:var(--clr-warning); }
.select-container.moderate:has(option[value="1"]:checked):before { background:var(--clr-success); }
.select-container.moderate:has(option[value="2"]:checked):before { background:var(--clr-error); }
.badge { background:#a8a8a8; color:white; border-radius:3px; padding:0.2em 0.3em; font-size:0.85em; text-transform:uppercase; }
.reorder--dragging, .reorder--dragging * { user-select:none !important; -webkit-user-select:none !important; -ms-user-select:none !important; cursor:grabbing; }

.sso { width:100%; padding-left:3.5em; overflow:hidden; }
.sso-block { position: absolute; display:flex; align-items:center; justify-content:center; left:0; height:100%; aspect-ratio:1; }
.sso-block svg { stroke: none; fill:white; margin-right:0 }
.sso-block.fb { background-color:#274688; }
.sso-block.ggl { background-color:#bb0101; }
.sso.loading .sso-block:before { content:''; border:1px solid rgb(255 255 255 / 30%); border-bottom:1px solid white; width:1.1em; aspect-ratio:1; border-radius:100px; animation:rotation 0.4s infinite linear; }
.sso.loading svg { display:none; }
.sso.loading:after { display:none !important; }

#background { height:400px; box-shadow:1px 1px 10px 5px rgba(0 0 0 / 15%); }
#background img { width:100%; height:100%; object-fit:cover; }
#background.contain img { object-fit:contain; }

header { margin-top:-50px; display:grid; grid-template:auto / auto auto ; grid-gap:100px; justify-content:center; position:sticky; top:0px; pointer-events:none; z-index:4; transition:grid-gap 0.3s }
#photo { grid-row:1 / 2; grid-column:1 / 2; width:300px; height:300px; aspect-ratio:1; box-shadow:0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); border-radius:5px; background:white; border:5px solid white; pointer-events:initial; z-index:2; transition:width 0.3s, filter 0.3s; }
#photo.circle, #photo.circle .photo-container, #photo.circle .photo-container img, #photo.circle ~ #header-small #photo_small, #photo.circle ~ #header-small img, #photo.circle:after { border-radius:500px; }
#photo.square, #photo.square .photo-container, #photo.square .photo-container img, #photo.square ~ #header-small #photo_small, #photo.square ~ #header-small img { border-radius:0px; }
#photo img, #photo_small img { width:100%; height:100%; object-fit:cover; border-radius:2px; }
img[data-photo] { object-position:var(--position, 50%) var(--position, 50%); }
img[data-photo][data-bw="1"] { filter:grayscale(1) contrast(1.05); }
#photo .photo-container { overflow:hidden; width:100%; height:100%; border-radius:2px; }
#info-text { grid-row:1 / 2; grid-column:2 / 3; justify-content:end; display:flex; flex-direction:column; line-height:2; gap:5px; }
#info-text svg { margin-right:0.5em }
#name { font-size:calc(50px * var(--ft-accent-size)); line-height:calc(1 * var(--ft-accent-lineheight)); margin-bottom:18px; font-family:var(--ft-accent); pointer-events:initial; transition:font-size 0.3s }
.dates,#location { color:color-mix(in srgb, var(--clr-textColor), transparent 30%); display:flex; font-size:20px; align-items:center; pointer-events:initial; transition:font-size 0.3s, height 0.3s, opacity 0.3s; }
.dates a { color:var(--clr-accent); margin-inline:10px; }

body:not(.couple) :is([data-memorialtype="couple"],.lov_who) { display:none !important; }
body.couple #name { font-size:calc(40px * var(--ft-accent-size)); }
body.couple #name_small { font-size:calc(30px * var(--ft-accent-size)); }
body.couple header { grid-gap: 75px; }
#name-and, #name_smalland { color:var(--clr-accent); margin-inline:.25em; }
.lov_who { font-size:0.85rem; font-family:var(--ft-default); position:absolute; width:1.5em; aspect-ratio:1; display:flex; align-items:center; justify-content:center; color:white; border-radius:50%; top:0; left:-1em; z-index:2; background:color-mix(in srgb, var(--clr-accent), transparent 40%); pointer-events:none; }


main { width:var(--pg-width); margin:auto; }
menu { color:var(--clr-grey); margin-top:150px; position:sticky; top:90px; z-index:4 }
menu ul { display:flex; width:100%; justify-content:space-between; }
menu li { display:flex; align-items:center; font-size:18px; border-radius:4px; box-shadow: 0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); padding:1em 2em; background:white; }
menu:after { content:''; background:linear-gradient(0, color-mix(in srgb, var(--clr-backgroundColor), transparent 40%), color-mix(in srgb, var(--clr-backgroundColor), transparent 10%) 75%); inset:0px -20px -20px; position:absolute; backdrop-filter: blur(5px); -webkit-backdrop-filter:blur(5px); z-index:-1; }
.menu-title { max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:color 0.3s, transform 0.3s }
.menu-title:hover { color:var(--clr-darker); transform:translateX(5px); }

#header-small { grid-area:1 / 1 / -1 / -1; margin:0 auto auto; display:grid; grid-auto-flow:column; grid-gap:20px; align-items:center; top:20px; transform:translateY(-5px); opacity:0; transition:transform 0.3s, opacity 0.3s; pointer-events:none; }
#photo_small { width:50px; height:50px; aspect-ratio:1; box-shadow: 0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); border-radius:5px; overflow:hidden; background:white; border:2px solid white; }
#name_small { font-family:var(--ft-accent); font-size:calc(35px * var(--ft-accent-size)); line-height:calc(1 * var(--ft-accent-lineheight)); }
#name_small1, #name_smalland, #name_small2 { line-height:inherit; }
header.mini { overflow:hidden; pointer-events:none; }
header.mini #header-small { transform:translateY(0px); opacity:1; pointer-events:initial; }
header.mini #header-small:after { content:''; background:linear-gradient(0, color-mix(in srgb, var(--clr-backgroundColor), transparent 10%), var(--clr-backgroundColor) 75%); inset:-20px -50vw -20px; position:absolute; backdrop-filter: blur(5px); -webkit-backdrop-filter:blur(5px); z-index:-1; }
header :is(#photo,#info-text) { transform:translateY(0px); opacity:1; transition:transform 0.3s, opacity 0.3s; }
header.mini :is(#photo,#info-text) { transform:translateY(10px); opacity:0; pointer-events:none; }
header.mini :is(#photo,#info-text) * { pointer-events:none; }

.section-container { display:flex; flex-direction:column; }
section { padding-inline:25px; margin-top:110px; }
h2 { font-size:calc(28px * var(--ft-accent-size)); line-height:calc(1 * var(--ft-accent-lineheight)); margin-bottom:60px; display:block; transition:opacity 0.3s; }
h2:after { content:''; display:block; position:absolute; margin-top:15px; background-color:var(--clr-accent); height:3px; width:50px; }
main p { line-height:1.8; font-size:1.1rem; unicode-bidi:plaintext; direction:auto; }
main p::first-letter { font-family:var(--ft-accent); float:left; font-size:3.5em; line-height:1em; padding:0em 10px 0 10px; }

button,				input[type="file"] + label { display: inline-flex; align-items:center; background:var(--clr-accent); font-size:1.1rem; width:fit-content; height:fit-content; padding: 0.5em 1.2em; color:white; border-radius:4px; cursor:pointer; font-weight:500; white-space:nowrap; text-transform:unset; transition: background-color 0.3s, filter 0.5s, color 0.3s, outline 0.3s, box-shadow 0.3s; }
button:hover,		input[type="file"] + label:hover { background:var(--clr-darker); }
button:hover:after, input[type="file"] + label:hover:after { transform:translateX(3px); }
button:after,		input[type="file"] + label:after { content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath stroke="none" d="M0 0h24v24H0z"%3E%3C/path%3E%3Cline x1="5" y1="12" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="16" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="8" x2="19" y2="12"%3E%3C/line%3E%3C/svg%3E'); margin-left:5px; width:1em; height:1em; margin-right:0.2em; transition:transform 0.3s; }
input[type="file"] { display:none; }
button.mini { font-size:0.85rem; }
button.white,		input[type="file"] + label.white { background:white; color: var(--clr-grey); font-weight:unset; box-shadow:0px 1px 4px rgba(0,0,0,0.15); transform-style:preserve-3d; transition:transform 0.3s; }
button.white:after,	input[type="file"] + label.white:after { display:none; }
button.white:hover,	input[type="file"] + label.white:hover { transform:translateY(-3px); }
button.sz-regular,	input[type="file"] + label.sz-regular { font-size:0.933334rem; }
button.sz-small,	input[type="file"] + label.sz-small { font-size:0.85rem; }
button.inline { background: transparent; color:var(--clr-lighter); font-weight:var(--weight-default); }
button.inline:hover { color:var(--clr-darker); filter:none }
button.inline:before { content:''; height:1px; width:0; position:absolute; display:block; bottom:5px; background:var(--clr-lighter); transition:width 0.3s; }
button.inline:hover:before { width:calc(100% - 2.4em - 5px); }
button.inline svg { font-size:1em; vertical-align:-3px; margin-left:5px; }
button.inline:after { content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23999999" fill="none" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath stroke="none" d="M0 0h24v24H0z"%3E%3C/path%3E%3Cline x1="5" y1="12" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="16" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="8" x2="19" y2="12"%3E%3C/line%3E%3C/svg%3E'); margin-left:5px; width:1em; height:1em; margin-right:0.2em; }
button.inline.back:after { content:''; height:1px; width:0; position:absolute; display:block; margin:unset; left:unset; bottom:5px; background:var(--clr-lighter); transition:width 0.3s; }
button.inline.back:hover:after { width:calc(100% - 2.4em - 5px); }
button.inline.back:before { background:transparent; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23999999' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l14 0' /%3E%3Cpath d='M5 12l4 4' /%3E%3Cpath d='M5 12l4 -4' /%3E%3C/svg%3E"); position:relative; margin-right:5px; width:1em; height:1em; margin-left:0.2em; bottom:unset; transition:transform 0.3s; }
button.inline.back:hover:before { transform:translateX(-3px); }
button.loading,				input[type="file"] + label.loading { pointer-events:none; background:lightgrey }
button.loading:after,		input[type="file"] + label.loading:after { content:''; display:initial; left:6px; border-radius:100%; border:1px solid rgba(255,255,255,0.3); border-bottom:1px solid white; animation:rotation 0.4s infinite linear; }
button.loading.white,		input[type="file"] + label.loading.white { color:#c2c2c2; background-color:whitesmoke; }
button.loading.white:after, input[type="file"] + label.loading.white:after { border-color:#ffffff; border-bottom:1px solid #c2c2c2 }
button.loading.white svg,   input[type="file"] + label.loading.white svg { display:none; }
button.disable { pointer-events:none; background-color:lightgrey; }
button.editing { padding-inline:0.9em; }
button.editing:hover { cursor:unset; background-color:var(--clr-accent); }

.card { padding:20px 25px; border-radius:6px; background:white; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); }

/* --- Checkbox --- */
:is(.or-checkbox,.or-radio) { --checkbox-size:18px; }
:is(.or-checkbox,.or-radio) input { display:none; }
:is(.or-checkbox,.or-radio) + label { color:grey; }
:is(.or-checkbox,.or-radio) input:checked + label:before { border: 1px solid var(--clr-accent); }
:is(.or-checkbox,.or-radio) label { all:unset; display:flex; width:fit-content; min-height:var(--checkbox-size); line-height:var(--checkbox-size); padding-left:calc(var(--checkbox-size) + 0.5em); font-size:0.95em; cursor:pointer; }
:is(.or-checkbox,.or-radio) label:before { all:unset; content:''; position:absolute; border:1px solid lightgrey; left:0; width:var(--checkbox-size); height:var(--checkbox-size); text-align:center; border-radius:3px; box-sizing:border-box; transition:border 0.2s; cursor:pointer; background:white; --checkbox-size:18px; transition:border 0.3s; }
:is(.or-checkbox,.or-radio):hover label:before { border:1px solid var(--clr-lighter); }
:is(.or-checkbox,.or-radio) input:checked + label:after { opacity:1; } 
:is(.or-checkbox,.or-radio) input:disabled + label { cursor:not-allowed; filter:grayscale(1); opacity:0.6; }
:is(.or-checkbox,.or-radio) input:disabled + label:before { cursor:not-allowed; border:1px solid #B0BEC5; }
:is(.or-checkbox,.or-radio) input:checked:disabled + label:after { cursor:not-allowed; }
.or-checkbox label:after { all:unset; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='3' stroke='%23607d8b' fill='none' stroke-linecap='butt' stroke-linejoin='butt'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E"); position:absolute; width:calc(var(--checkbox-size) * 2 / 3); left:calc((var(--checkbox-size) * 1 / 3) / 2); top:0.2em; line-height:1; opacity:0; transition:opacity 0.3s; }
.or-radio label:before { border-radius:100%; }
.or-radio label:after { all:unset; content:''; background:grey; position:absolute; width:0.4em; aspect-ratio:1; border-radius:100%; left:calc(var(--checkbox-size) / 2 - 0.2em); top:calc(var(--checkbox-size) / 2 - 0.2em); opacity:0; transition:opacity 0.3s; }

/* --- Tooltip --- */
[tooltip]:before, [tooltip-right]:before, [tooltip-hidden]:before { content:''; display:block; position:absolute; left:calc(var(--tooltip-left,0px) + 12px); top:calc(100% - 3px + var(--tooltip-top, 0px)); opacity:0; transform:translateY(5px); transition:opacity 0.4s, transform 0.4s; pointer-events:none; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:3px solid rgba(0,0,0,0.75); z-index:1; }
[tooltip]:after, [tooltip-right]:after, [tooltip-hidden]:after { content:attr(tooltip); font-family:var(--ft-default); width:var(--tooltip-width,max-content); top:calc(100% + var(--tooltip-top, 0px)); left:calc(var(--tooltip-left,0px)); line-height:1.3; white-space:normal; text-transform:none; padding:6px 10px; border-radius:4px; position:absolute; font-size:13px; font-weight:var(--weight-default); letter-spacing:initial;color:white; background:rgba(0,0,0,0.75); opacity:0; transform:translateY(5px); transition:opacity 0.4s, transform 0.4s; pointer-events:none; z-index:1; }
[tooltip]:hover:after, [tooltip-right]:hover:after, [tooltip-hidden].show:after { opacity:1; transform:translateY(10px); }
[tooltip]:hover:before, [tooltip-right]:hover:before, [tooltip-hidden].show:before { opacity:1; transform:translateY(10px); }
[tooltip-right]:before { right:12px; left:unset; }
[tooltip-right]:after { content:attr(tooltip-right); right:0; left:unset; }
[tooltip-hidden]:after { content:attr(tooltip-hidden); }
.i-info { display:inline-block; vertical-align:bottom; --tooltip-width:180px; --tooltip-left:-0.6em; --tooltip-top:-10px; }

/* --- Radio toggle --- */
.radio-toggle { display:flex; background:rgba(0,0,0,2%); border-radius:6px; padding:6px; width:100%; }
.radio-toggle input { display:none; }
.radio-toggle label { display:flex; align-items:center; flex:1; text-transform:unset; color:var(--clr-grey); font-weight:var(--weight-default); font-size:.9rem; line-height:1.3; padding:6px 12px; cursor:pointer; z-index:2; transition:color 0.3s }
.radio-toggle label:hover { color:var(--clr-accent); }
.radio-toggle input:checked + label { color:var(--clr-darker); }
.toggle-slider { --toggle-count:inherit; position:absolute; box-shadow:0px 1px 3px rgba(0,0,0,0.05); top:6px; bottom:6px; width:calc(100% / var(--toggle-count) - 10px + (var(--toggle-count) * 2px)); background:white; border-radius:4px; z-index:1; transition:transform 0.3s; }
.radio-toggle input:nth-of-type(1):checked ~ .toggle-slider { transform:translateX(0); }
.radio-toggle input:nth-of-type(2):checked ~ .toggle-slider { transform:translateX(100%); }
.radio-toggle input:nth-of-type(3):checked ~ .toggle-slider { transform:translateX(200%); }

/* --- Intro --- */
#intro { margin-inline:auto; width:fit-content; max-width:min(650px,80%); color:var(--clr-greysat); }
#intro-text { font-size:calc(1.6em * var(--ft-accent-size)); line-height:calc(1.45 * var(--ft-accent-lineheight)); margin-block:unset; }
#intro #intro-text:before, #intro #intro-text:after { font-family:'times','times new roman',sans-serif; position:absolute; font-size:4.8rem; color:var(--clr-lighter); }
#intro:is(.one,.no) #intro-text:after { content:unset; }
#intro:is(.one,.two) #intro-text:before { content:'\201F'; top:-0.3em; left:-.8em; }
#intro.two #intro-text:after { content:'\201E'; bottom:-0.65em; right:0em; margin:unset; background-color:unset; height:unset; width:unset; }
#intro.light #intro-text { color:var(--clr-lighter); }
#intro.center { text-align:center; }
.intro-buttons { position:absolute; display:flex; gap:20px; margin-top:15px;  }
.modal[data-modal="introSettings"] { width:300px; text-align:left; }

/* --- Timeline --- */
.timeline-event { display:grid; grid-template: 1fr / 0.3fr auto 2fr; padding-bottom:30px;  }
.timeline-event:not(:last-of-type) .timeline-line:after { content:''; position:absolute; width:1px; height:calc(100% - 10px); left:50%; background-color:var(--clr-accent); display:block; z-index:-1; }
.timeline-icon { width:30px; height:auto; aspect-ratio:1; border:1px solid var(--clr-lighter); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:5px 30px; }
.timeline-icon svg { margin-right:unset; }
.timeline-date .year { font-size:1.5rem; color:var(--clr-accent); }
.timeline-date .date { color:var(--clr-lightgrey); }
.timeline-card { color:var(--clr-grey); padding:20px 25px; border-radius:6px; background:white; filter: drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05));  }
.timeline-card:before { content:''; position:absolute; top:10px; left:0px; margin:0 0 0 -8px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid #fff;  }
.timeline-title { color:var(--clr-accent); font-size:1.2rem; margin-bottom:10px; }
.timeline-title:only-child { margin-bottom:0px; }
.timeline-location { font-size:0.95rem; margin-top:5px; color:var(--clr-lightgrey); overflow-wrap:anywhere; }
.timeline-location:before { content:''; display:inline-block; height:1em; width:1em; margin-right:0.3em; margin-bottom:-1px; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1' stroke='%23999999' class='w-6 h-6'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M15 10.5a3 3 0 11-6 0 3 3 0 016 0z' /%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z' /%3e%3c/svg%3e "); }
.timeline-desc { overflow-wrap:anywhere; }

/* --- Gallery --- */
.gallery-img { margin-bottom:20px; border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.gallery-img:after { content:''; width:80px; aspect-ratio:1; border-radius:100px; justify-self:center; background:var(--clr-accent); position:absolute; transform:translateY(20px) scale(0.9); opacity:0; transition:transform 0.3s, opacity 0.3s; pointer-events:none; }
.gallery-img:hover:after { transform:translateY(0) scale(1); opacity:0.6; }
.gallery-img:before { content:'+'; font-weight:100; color:white; font-size:35px; z-index:1; width:100%; display:flex; align-items:center; justify-content:center; position:absolute; transform:translateY(20px) scale(0.9); opacity:0; transition:transform 0.3s, opacity 0.3s; pointer-events:none; }
.gallery-img:hover:before { transform:translateY(0) scale(1); opacity:1; }
.gallery-folders { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:30px; }
.gallery-folders button { outline:1px solid transparent; transition:transform 0.3s, outline 0.3s, background-color 0.3s;  }
.gallery-img.error:before, .gallery-img.error:after { display:none; }
.gallery-img.error img { pointer-events:none; cursor:unset; }

/* --- Videos --- */
.video-gallery { display:grid; grid-auto-flow:column; gap:30px; padding-bottom:15px; width:100%; overflow-x:auto; scroll-snap-type:x mandatory; }
.videos-img { max-width:calc(100vw - 120px); aspect-ratio:16 / 9; height:515px; scroll-snap-align:start; scroll-margin-left:20px; }
.videos-img img { object-fit:cover; width:100%; height:100%; }
.gallery-arrow { position:absolute; width:50px; aspect-ratio:1; top:50%; transform:translateY(-50%); background:white; z-index:2; display:flex; justify-content:center; align-items:center; border-radius:100px; filter:drop-shadow(1px 2px 4px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); transition:color 0.2s, transform 0.3s, opacity 0.3s; }
.gallery-arrow svg { margin-right:unset; font-size:1.5em; }
.gallery-arrow:hover svg { stroke:var(--clr-darker); }
.gallery-arrow:hover { transform:translateY(calc(-50% - 5px)); cursor:pointer; }
.gallery-arrow.disabled { pointer-events:none; stroke:lightgray; opacity: 0.9; transform:translateY(-50%) scale(0); }
.video-gallery:has(.videos-img:only-child) { overflow:hidden; }
.video-gallery:has(.videos-img:only-child) .videos-img { width:100%; max-width:100%; }
.video-gallery:has(.videos-img:only-child) ~ .gallery-arrow { display:none; }

/* --- Share --- */
#share { color:var(--clr-grey); position:fixed; display:flex; align-items:center; font-size:1rem; bottom:40px; right:50px; border-radius:4px; box-shadow:0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); padding:0.5em 2em; border:1px solid var(--clr-accent); background:white; transition:transform 0.15s; z-index:3; }
.share-initial { display:flex; align-items:center; cursor:pointer; color:var(--clr-grey); transition:color 0.3s; }
.share-initial:hover { color:var(--clr-accent); } 
.share-more-container { display:grid; grid-template-columns:0fr; overflow:hidden; transition:grid-template-columns 0.5s, margin-left 0.3s; }
.share-more-container.show { grid-template-columns:1fr; margin-left:20px; }
.share-more { min-width:0; display:grid; grid-auto-flow:column;  gap:20px; }
.share-sns { color:var(--clr-grey); display:flex; align-items:center; padding:0.5em 1em; border-radius:3px; cursor:pointer; transition:background 0.3s; white-space: nowrap; }
.share-sns:hover { background:whitesmoke; }

/* --- CTA --- */
#cta { position:fixed; bottom:40px; left:50px; box-shadow:0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); display:none; z-index:3; }
#cta:is(.wall, .service, .donate)  { display:flex }
#cta svg { display:none; stroke:white; top:-1px }
#cta:after { display:none; }
#cta.wall svg[data-cta="wall"], #cta.service svg[data-cta="service"], #cta.donate svg[data-cta="donate"] { display:unset; }

/* --- Memory wall --- */
.memory-card { color:var(--clr-grey); padding:20px 25px; margin-top:40px; border-radius:6px; background:white; display:flex; flex-direction:column; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); }
.memory-header { display:flex; justify-content:right; flex-wrap:wrap; gap:15px; margin-bottom:20px; align-items:center; min-height:30px; }
.memory-header .img-delete { position:unset; top:unset; right:unset; flex-basis:auto; }
.memory-header .memory-moderate { height:fit-content; z-index:1 }
.memory-date { color:var(--clr-lightgrey); font-style:italic; margin-right:auto; }
.memory-author { font-family:var(--ft-accent); color:var(--clr-accent); font-size:calc(1.3em * var(--ft-accent-size)); line-height:calc(1.45 * var(--ft-accent-lineheight)); margin:20px 50px 0 0; width:fit-content; align-self:end; }
.memory-desc { word-break:break-word; }
.memory-media { display:flex; flex-wrap:wrap; gap:15px; margin-top:20px;  }
.memory-media .gallery-img { min-width:10%; max-width:16%; height:100px; margin-bottom:0; }
.memory-media .gallery-img:after { width:50px; aspect-ratio:1; }
.memory-media .gallery-img:before { font-size:25px; }
.memory-media .gallery-img img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
[data-module="wall"]:not(:has(.memory-card + .memory-card + .memory-card)) .memory-search { display:none; }

/* --- Favorites --- */
.favorites { display:grid; grid-gap:50px 30px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }
.fav-title { color:var(--clr-accent); margin-bottom:10px; }
.fav-title svg { font-size:1.175em; vertical-align:-4px; margin-right:0.8em; }

/* --- Donation --- */
.donation { display:grid; grid-auto-flow:column; gap:40px; }
.donation-block { background-color:white; border: 1px solid var(--clr-accent); box-shadow:0 0 0 5px var(--clr-transp-10); padding:20px 30px; border-radius:4px; height:fit-content; }
.donation-amount { font-family:var(--ft-accent); color:var(--clr-accent); font-size:2rem; transition:color 0.3s; }
.donation-desc { height:fit-content; }
.donate-container .memory-card { display:grid; grid-auto-flow:column; gap:40px; }
.donation_howto { display:grid; text-align:left; grid-template:1fr / 1fr 1fr 1fr 1fr; grid-gap:25px; margin-block:40px; --tooltip-width:200px; }
.don_ht_header { display:flex; gap:12px; margin-bottom:20px; }
.don_ht_step.info { color:var(--clr-textColor); border:1px solid var(--clr-lighter); }
.don_ht_step { font-family:var(--ft-accent); color:var(--clr-darker); width:20px; height:20px; font-size:10px; border-radius:50px; border:1px solid var(--clr-accent); display:flex; justify-content:center; align-items:center; }
.don_ht_title { color:var(--clr-darker); font-size:15px; }
.don_ht_content { font-size:0.9em; }
.don_ht_content .select-container { font-size:0.85em; margin-left:5px; }
.donation_howto u { color:var(--clr-darker); border-bottom:1px dashed var(--clr-lighter); text-decoration:none; cursor:help; }
.don_ht_activate { display:flex; align-items:center; gap:10px }
.don_ht_activate label { line-height:1; cursor:pointer; }
.don_account { display:flex; align-items:center; }
.don_account span { max-width:60%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0.4em 0.8em; background:#fbfbfb; color:var(--clr-grey); border:1px solid #f1f1f1; border-radius:3px; font-size:9px; margin-left:8px; }
.don_account:before { content: ''; border-bottom: 2px solid var(--clr-accent); border-right:2px solid var(--clr-accent); width:5px; height:8px; transform:rotate(45deg); border-radius:2px; margin-right:7px; margin-top:-1px; }

/* --- Event --- */
.event { display:grid; grid-template-columns:400px auto; grid-gap:40px; min-height:500px; }
#map { height:100%; border-radius:6px; }
#map button { white-space:initial; display:flex !important; margin-right:10px !important; }
#map button:after { content:unset; }
#map .gm-style-cc { display:none; }
#map .gm-style-iw-chr { position:absolute; right:0; top:15px; z-index:10; }
#map .gm-ui-hover-effect { width: fit-content !important; height: fit-content !important; }
#map .gm-style-iw-chr span { margin:0 !important; width:15px !important; mask-repeat:no-repeat; }
#map .gm-style-mtc { display:flex; align-items:center; }
#map .gm-style-iw-d { margin-right:10px; }
#map p:first-letter { all:unset; }
.event-card { color:var(--clr-grey); display:grid; align-content:start; grid-gap:15px; padding-inline:35px; }
.event-card .desc { margin-top:15px; }
.event-card > .or-checkbox { margin-block:5px; }
.event-label svg { position:absolute; top:2px; left:0; }
.event-label { padding-left:25px; color:var(--clr-accent); }
.event-rsvp { padding-left:0; margin-block:30px 15px; color:unset; }
.event-rsvp:before { content: ''; width:100%; height:1px; background-color:var(--clr-transp-20); position:absolute; top:-15px; }
.event.hidemap .event-map { display:none; }
.event.hidemap { grid-template: auto / auto; min-height:unset; }
#btn_message { color:var(--clr-error); font-size:0.85em; line-height:1.0; display:inline-block; max-width:180px; }
.event-card .img-delete { right:unset; top:unset; position:relative; display:inline-flex; transition:opacity 0.3s; }
.event-card .img-delete.hide { opacity:0; pointer-events:none; }
.event-card [contenteditable] { height:fit-content; }
.rsvp-settings { margin-top:10px; display:grid; gap:10px; grid-template:1fr / 1fr 1fr; transition:opacity 0.3s; }
.rsvp-description { color:var(--clr-lightgrey); line-height:1; margin-block:20px 40px; }
.rsvp-fullwidth { grid-column:1 / -1; }
.rsvp-collect { display:grid; gap:8px; }
.rsvp-collect .or-checkbox { transition:opacity 0.3s }
.rsvp-collect:has([data-collect]:not(:checked)) :has([data-mandatory]) { opacity:.4; pointer-events:none; user-select:none; } 
.switch-container:has(#rsvp-active:not(:checked)) + .rsvp-settings { opacity:.4; pointer-events:none; user-select:none; }
.event-header { display:grid; grid-template:1fr / 1fr auto; align-items:center; gap:15px; }
.event-block { display:grid; align-content:start; grid-gap:15px; grid-template-columns: 1fr 2.5fr; margin-bottom:20px; outline:7px solid white; transition:background-color 0.3s, outline 0.3s; }
.event-block .fullwidth { grid-column:1 / -1; }
.event-block:has(.img-delete[data-action="removeEvent"]:hover) { background:rgba(0,0,0,2%); outline:7px solid rgba(0,0,0,2%); }
@media (min-width:600px) {
	.event.hidemap .event-card { grid-template:auto 1fr / 1.2fr 1fr; grid-gap:15px 30px; padding-block:30px; }
	.event.hidemap .event-card .desc { margin-block:unset; }
	.event.hidemap .event-card .events-container { grid-row: 1 / -1; grid-column:2 / -1; }
	.event.hidemap .event-card .event-block {  grid-template-columns: 1fr 2fr; }
}

/* --- Notifications --- */
#notifications { font-size:14px; padding:0.75em 1.75em; top:15px; left:0; right:0; position:fixed; margin:auto; z-index:101; width:fit-content; border-radius:4px; display:flex; align-items:center; gap:10px; color:white; transition:color 0.3s, background-color 0.3s, transform 0.3s, opacity 0.3s; }
#notifications:before { width:1em; margin-top:1px; order:-2; }
#notifications:after { font-weight:bold; order:-1 }
#notifications.loading:not(.hide) { transition:color 0s, background-color 0s, transform 0.3s, opacity 0.3s; }
#notifications.success { background-color:rgba(139, 195, 74, 0.75); }
#notifications.success:before { content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='white' fill='none' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E"); }
#notifications.success:after { content:'SAVED'; }
#notifications.error { background-color:rgba(255, 87, 34, 0.75); }
#notifications.error:before { content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='2' stroke='white' fill='none' %3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 6l-12 12' /%3E%3Cpath d='M6 6l12 12' /%3E%3C/svg%3E"); }
#notifications.error:after { content:'ERROR'; }
#notifications.loading { background-color:rgba(255, 255, 255, 0.8); color:#607D8B }
#notifications.loading:before { content:''; width:1em; height:1em; display:inline-block; border:1px solid rgb(29,163,201,0.3); border-bottom:1px solid var(--clr-accent); vertical-align:-2px; border-radius:100%; box-sizing:border-box; animation:rotation 0.3s infinite linear; margin-right:12px; }
#notifications.loading:after { content:'LOADING'; }
#notifications.hide { opacity:0; transform:translateY(-15px); pointer-events:none; }

/* --- Footer logo --- */
.footerlogo { display:flex; align-items:center; width:fit-content; margin:auto; gap:8px; order:10; color:rgba(0 0 0 / 50%); letter-spacing:2px; font-size:12px; padding-block:50px; opacity:0.5; transition:opacity 0.3s, transform 0.15s; }
.footerlogo:hover { opacity:1; }
.footerlogo img { width:85px; filter:grayscale(1); transition:filter 0.3s }
.footerlogo img:hover { filter:grayscale(0); }


/* --- Family tree --- */
#family-tree { --familytree-gap-v:50px; --familytree-gap-h:35px; display:grid; grid-auto-flow:column; gap:var(--familytree-gap-v) 0; grid-auto-columns:minmax(0,1fr); }
.family-unit, .family-group { color:var(--clr-grey); padding:0.8em 1em; border:1px solid #e5e5e5; border-radius:5px; justify-self:center; width:100%; background:white; display:grid; grid-template-columns:100%; gap:15px; justify-items:center; text-align:center; z-index:1; }
.family-unit img { width:100px; aspect-ratio:1; object-fit:cover; border-radius:50%; border:4px solid white; box-shadow:0rem 0.4rem 0.6rem 0rem rgba(32,46,66,0.08); }
.tree-name, .tree-relationship { max-width:100%; word-wrap:break-word; height:fit-content; }
#family-tree .me { border:1px solid var(--clr-accent); color:var(--clr-accent); box-shadow:0 0 0 5px var(--clr-transp-10); }
#family-tree .grand { grid-row: 1 / 2; }
#family-tree .parent { grid-row: 2 / 3; }
#family-tree :is(.sibling,.spouse,.me) { grid-row: 3 / 4; }
#family-tree .child { grid-row: 4 / 5; }
#a { grid-column-start:1 }
#b { grid-column-start:3 }
#c { grid-column-start:5 }
#d { grid-column-start:7 }
#e { grid-column-start:2 }
#f { grid-column-start:6 }
#g { grid-column-start:4 }
#h { grid-column-start:6 }
#i { grid-column-start:3; transform:translateX(calc(var(--familytree-gap-h) * -1)); }
#j { grid-column-start:2; transform:translateX(calc(var(--familytree-gap-h) * -2)); }
#m { grid-column-start:5; }
#n { grid-column-start:4; transform:translateX(calc(var(--familytree-gap-h) * -1)); }
#o { grid-column-start:6; transform:translateX(var(--familytree-gap-h)); }
#p { grid-column-start:3; transform: translateX(calc(var(--familytree-gap-h) * -2)); }
#q { grid-column-start:1; transform: translateX(calc(var(--familytree-gap-h) * 1)); }
#r, #s, #t, #v, #w, #x, #y, #z, #k, #l, #u { display:none !important; }
#family-tree .link { height:100%; width:100%; z-index:-1 }
#family-tree .link:before { content:''; top:50%; height:1px; width:100%; display:block; background-color:#e5e5e5; }
#family-tree .link:after { content:''; top:50%; left:50%; width:1px; height:100%; display:block; background-color:#e5e5e5; }
#family-tree .l1 { grid-column-start:2 }
#family-tree .l2 { grid-column-start:6 }
#family-tree .l3 { grid-column:3 / span 3; }
#family-tree .l4 { grid-column:5; }
#family-tree .l6 { grid-column:3; transform:translate(var(--familytree-gap-h),calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l6:after { left:0 }
#family-tree .l7 { grid-column:2; transform:translate(0,calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l7:after { left:0 }
#family-tree .l8 { grid-column:4; transform:translate(var(--familytree-gap-h),calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l8:after { left:0 }
#family-tree .l9 { grid-column:6; transform:translate(calc(-50% + (var(--familytree-gap-h) * 0.5)),calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width: calc(100% + var(--familytree-gap-h)); }
#family-tree .l9:after { left:100% }
#family-tree .l10 { grid-column:3; transform: translate(0,calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l10:after { left:0 }
#family-tree .l11 { grid-column:1; transform: translate(calc(50% + (var(--familytree-gap-h) * .5)),calc(-50% - calc(var(--familytree-gap-v) * 0.5))); width:calc(100% + var(--familytree-gap-h)); }
#family-tree .l11:after { left:0 }
#family-tree:has(#j:not(.empty)) #i .img-delete[data-action="delete"], #family-tree:has(#n:not(.empty)) #m .img-delete[data-action="delete"], #family-tree:has(#o:not(.empty)) #n .img-delete[data-action="delete"], #family-tree:has(#p:not(.empty)) #o .img-delete[data-action="delete"], #family-tree:has(#q:not(.empty)) #p .img-delete[data-action="delete"] { display:none; }
.family-unit.sibling.empty + .family-unit.sibling, .family-unit.sibling.empty ~ .l7 { display:none; }
#m.empty ~ #n, #m.empty ~ .l4:after, #n.empty ~ :is(.l8,#o,#p,#q), #o.empty ~ :is(.l9,#p,#q), #p.empty ~ :is(.l10,#q), #q.empty ~ .l11 { display:none; }
.siblings-container { width:100%; overflow-x:auto; z-index:1 }
.siblings-scroller { display:flex; justify-content:space-around; min-width:fit-content; margin:auto; }
.family-group .family-unit:first-of-type .img-delete:after { left:0; right:unset; }
.family-group .family-unit { border:none; width:max-content; gap:15px; display:grid; font-size:0.95em; min-width:120px; align-content:start; }
.family-group .family-unit img, .family-unit.other img { width:75px; }
.family-group .tree-name, .family-unit.other .tree-name { max-width:120px; }
.family-group .arrow { position:absolute; z-index:1; width:2em; aspect-ratio:1; border:1px solid #e5e5e5; background:white;border-radius:50%; display:flex; align-items:center; justify-content:center; top:calc(50% - 1em); left:-1em; cursor:pointer; transition:transform 0.3s, color 0.3s, border 0.3s; }
.family-group .arrow.right { left:unset; right:-1em; }
.family-group .arrow:hover { color:var(--clr-accent); border:1px solid var(--clr-lighter); }
.family-group .arrow.hide { transform:scale(0); }
.family-group .family-unit.empty svg, .family-unit.other.empty svg { width:75px; height:75px; padding:25px; }
.family-group .family-unit.empty ~ .family-unit { display:none; }
#siblings { grid-column-start:2; width:255%; }
#j.empty ~ #siblings { display:none; }
#j:not(.empty) ~ .l7 { display:none; }
#siblings:has(#j_shadow:not(.empty)) #i_shadow .img-delete[data-action="delete"], #siblings:has(#r_shadow:not(.empty)) #j_shadow .img-delete[data-action="delete"], #siblings:has(#s_shadow:not(.empty)) #r_shadow .img-delete[data-action="delete"], #siblings:has(#t_shadow:not(.empty)) #s_shadow .img-delete[data-action="delete"], #siblings:has(#v_shadow:not(.empty)) #t_shadow .img-delete[data-action="delete"], #siblings:has(#w_shadow:not(.empty)) #v_shadow .img-delete[data-action="delete"] { display:none; }
#children { grid-column-start:1; grid-column-end:8; }
#q.empty ~ #children { display:none; }
#q:not(.empty) ~ :is(.l8,.l9,.l10,.l11) { display:none; }
#children:has(#z_shadow:not(.empty)) #y_shadow .img-delete[data-action="delete"], #children:has(#y_shadow:not(.empty)) #x_shadow .img-delete[data-action="delete"], #children:has(#x_shadow:not(.empty)) #q_shadow .img-delete[data-action="delete"], :is(#m_shadow,#n_shadow,#o_shadow,#p_shadow) .img-delete[data-action="delete"] { display:none; }
#spouses { grid-column-start:6; grid-column-end:8; z-index:2; }
#h.empty ~ #spouses { display:none; }
#spouses:has(#u_shadow:not(.empty)) #l_shadow .img-delete[data-action="delete"], #spouses:has(#l_shadow:not(.empty)) #k_shadow .img-delete[data-action="delete"], #spouses:has(#k_shadow:not(.empty)) #h_shadow .img-delete[data-action="delete"] { display:none; }

.tree-other:before { content:''; width:100%; height:1px; background-color:var(--clr-transp-20); display:block; margin-block:0 15px; flex-basis:100% }
.tree-other { grid-row:5/6; grid-column:1/8; display:flex; flex-wrap:wrap; }
.tree-other .subtitle { flex-basis:100%; margin-bottom:15px; font-size:0.95rem; }
.family-unit.other { border:unset; max-width:14.28%; height:fit-content; background-color:unset; }
.tree-relationship { font-size:0.9em; color:var(--clr-darker); margin-top:-10px; line-height:1.1; }
.family-unit.child { height:fit-content; }
.family-unit.empty .tree-grandchild { display:none; }
.tree-grandchild { display:grid; gap:10px; }
.tree-grandchild:has(.grandchild:not(.empty)):before { content:'Children'; font-size:0.9em; color:var(--clr-accent); font-weight:500; }
.grandchild { width:100%; display:grid; grid-auto-flow:column; grid-template-columns:auto 1fr; gap:8px; text-align:left; }
.grandchild img, .family-group .grandchild img { width:28px; filter:unset; border-width:2px; }
.grandchild .tree-name { font-size:0.875em; line-height:1.1; }
#family-tree :is(.l8, .l9, .l10):after { max-height:50%; }
.grandchild { border:unset; padding:unset; background:unset; height:fit-content; justify-items:left; align-items:center; }
.grandchild [data-action="delete"] { width:25px; padding:5px; display:flex !important; top:-3px; right:-28px; border:1px solid #e5e5e5; filter:unset; }
.grandchild [data-action="photo"] { width:27px; padding:5px; border-radius:50%; right:-28px; border:1px solid #e5e5e5; filter:unset; top:unset !important; }
.family-unit.grandchild.empty { background:unset; margin-bottom:5px; }
.family-unit.grandchild.empty svg { width:28px; height:28px; padding:7px; }
.family-unit.grandchild.empty:hover svg { transform:translateY(-3px); }
.family-group .tree-grandchild { max-width:120px; }
.family-group .tree-grandchild .family-unit { width:100%; max-width:100%; gap:5px; }
.family-group .tree-grandchild .tree-name { width:100%; font-size:0.975em; }
.family-group .grandchild [data-action="delete"] { border:unset; right:-24px; top:0; background:unset; }
button.family-unit.grandchild.empty { width:fit-content; min-width:unset; padding:0.5em 1.2em; font-size:0.85rem; justify-self:center; border-radius:4px; transition:transform 0.3s; color:var(--clr-grey); font-weight:unset; gap:0; box-shadow:0px 1px 4px rgba(0,0,0,0.15); transform-style:preserve-3d; }
button.family-unit.grandchild.empty:hover { transform:translateY(-3px); color:var(--clr-grey); }
button.family-unit.grandchild.empty svg { box-shadow:unset; width:1em; height:1em; padding:unset; margin-right:0.5em; stroke-width:1.5; stroke:var(--clr-accent); }
button.family-unit.grandchild.empty:hover svg { transform:unset; }

/* -- Family tree, Couple mega-hack -- */
body.couple #a { grid-row: 3 / 4; grid-column-start:5; transform:translateX(25%); border: 1px solid var(--clr-accent); color:var(--clr-accent); box-shadow:0 0 0 5px var(--clr-transp-10); }
body.couple #b { grid-row: 3 / 4; grid-column-start:3; transform:translateX(-25%); border: 1px solid var(--clr-accent); color:var(--clr-accent); box-shadow:0 0 0 5px var(--clr-transp-10); }
body.couple #c { grid-row:2 / 3; transform:translateX(-25%); }
body.couple #e { transform:translateX(-25%); } /* Grandfather left */
body.couple #f { grid-column-start:3; transform:translateX(25%); } /* Grandmother left */
body.couple #g { display:none }
body.couple #h { transform:translateX(50%); }
body.couple #i { grid-column-start:2; transform:translateX(-25%); }
body.couple #i:not(.empty) { display:none; }
body.couple #i_shadow { display:none; }
body.couple #d { grid-row:2 / 3; grid-column-start:6; transform:translateX(25%); }
body.couple #g { grid-column-start:3; }
body.couple #m { grid-column-start:4; }
body.couple #n { grid-column-start:5; transform:translateX(25%); }
body.couple #o { grid-column-start:3; transform:translateX(-25%); }
body.couple #p { grid-column-start:7; }
body.couple #q { grid-column-start:1; transform:translateX(50%); }
body.couple #siblings { grid-column-start:1; grid-column-end:3; width:75%; transform:translateX(-12.5%); }
body.couple #spouses { width:75%; transform:translateX(12.5%); } 
body.couple #family-tree .l1 { grid-row: 2 / 3; transform:translateX(50%); height:100% }
body.couple #family-tree .l2 { grid-row: 2 / 3; transform:translateX(-50%); height:100% }
body.couple #family-tree .l3 { grid-row: 3 / 4; }
body.couple #family-tree .l4 { display:none; }
body.couple #family-tree .l6 { display:none; }
body.couple #family-tree .l8 { transform:translate(calc(var(--familytree-gap-h) * 2),calc(-50% - calc(var(--familytree-gap-v) * 0.5))) }
body.couple #family-tree .l8:after { left:100%; }
body.couple #family-tree .l9 { grid-column: 4 / 5; transform:translate(calc(-100% + var(--familytree-gap-h) * 2),calc(-50% - calc(var(--familytree-gap-v) * 0.5))) }
body.couple #family-tree .l9:after { left:0; }
body.couple #family-tree .l10 { grid-column: 6 / 7; transform:translate(calc(-40% + var(--familytree-gap-h)),calc(-50% - calc(var(--familytree-gap-v) * 0.5))) }
body.couple #family-tree .l10:after { left:100%; }
body.couple :is(#a,#b,#c,#d,#h,#j).empty .tree-name { font-size:0; }
body.couple :is(#a,#b).empty .tree-name:after { content:'Add Loved one'; font-size:1rem; }
body.couple :is(#c,#d).empty .tree-name:after { content:'Add Parent'; font-size:1rem; }
body.couple :is(#h,#j).empty .tree-name:after { content:'Add sibling'; font-size:1rem; }

/* --- Change theme --- */
.themes-home { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); grid-gap:30px; max-width:1500px; }
.themes-home span, .theme-home span { display:none; }
.theme-theme { aspect-ratio:1.75; overflow:hidden; border-radius:5px; box-shadow:0 1px 2px rgb(0 0 0 / 5%), 0 2px 10px rgb(0 0 0 / 5%), 0 4px 8px rgb(0 0 0 / 2%), 0 8px 16px rgb(0 0 0 / 2%); }
.theme-theme img { transition:transform 0.3s; }
.theme-theme:hover img { transform:scale(1.05) }
.theme-theme .theme-ui { position:absolute; bottom:0; left:0; padding:.8em; background:rgba(0,0,0,0.5); width:100%; color:white; transform:translateY(101%); text-shadow:2px 1px 3px rgb(0 0 0 / 50%); transition:transform 0.4s; display:grid; grid-template: auto / 1fr 1fr; align-items:center; border-radius:0; font-size:0.95em; }
.theme-theme:hover .theme-ui { transform:translateY(0); }
.theme-theme .or-button { font-size:13px; text-shadow:none; width:fit-content; justify-self:right; }
.theme-label { position:absolute; right:10px; top:10px; font-size:0.7rem; font-weight:600; letter-spacing:0.1em; color:white; padding:5px 10px; border-radius:2px; }
.theme-label:after { content:attr(data-type); text-transform:uppercase; }
.theme-label[data-type="popular"] { background-color:#ff8a65; }
.theme-label[data-type="popular"]:before { width:1.1em; line-height:0; vertical-align:-2px; display:inline-block; margin-right:8px; content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>'); }
.themes-home span, .themes-home .or-button.white { display:none; }

/* --- Payment --- */
#payment { position:fixed; height:100%; width:500px; transform:translateX(500px); right:0; top:0; z-index:1000; background:white; padding:50px 60px 30px 85px; box-sizing:border-box; filter:none; transition:transform 0.3s, filter 0.2s; }
#payment.active { transform:translateX(0); filter:drop-shadow(0 1.5px 3px rgba(0,0,0,.5)); }
#payment h2 { margin-block:0 }
#payment svg { margin-left:5px; width:22px; vertical-align:middle; stroke-width:1; }
.payment-content span { display:none !important; position:absolute; font-size:25px; color:#7b7b7b; left:-40px; top:-65px; background:rgb(255 255 255 / 0.8); width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.2s, color 0.2s; }
.payment_ttl { font-size:0.95em; margin:100px 0 40px; display:grid; grid-auto-flow:column; grid-template-columns:1fr 1.3fr; grid-gap:25px; }
.pay_reass { background:#f8f8f8; padding:12px 16px; border-radius:4px; }
.pay_title { color:var(--clr-accent); font-size:1.1em; margin-bottom:10px; }
.pay_total { color:var(--clr-darker); border-top:1px solid lightgrey; margin-top:6px; padding-top:3px; padding-right:20px; }
.pay_total donation_amount { font-weight:bold; }

/* --- Not active --- */
.gallery-img.not-active:before, .gallery-img.not-active:after { display:none; }
.gallery-img.not-active { width:100%; display:block; background:white; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); padding:50px 25px; cursor:unset; }
.gallery-img.not-active.mobonly { margin-top:15px; padding:1.5em; }
.memory-card.not-active { display:flex; flex-flow:row; gap:20px; justify-content:space-between; }
.memory-media .not-active { color:var(--clr-lightgrey); font-size:.95em; font-style:italic; display:flex; align-items:center; }

/* --- Drag file --- */
#drop { display:flex; justify-content:center; align-items:center; width:100%; top:70px; height:150px; position:absolute; background-color:rgba(255 255 255 / 90%); z-index:2; border:1px dashed var(--clr-accent); border-radius:7px; box-shadow:0 0 0 0px var(--clr-transp-30); opacity:0; pointer-events:none; transition:opacity 0.3s, box-shadow 0.3s, color 0.3s; }
#drop.show { opacity:1; pointer-events:initial; }
#drop.active { box-shadow:0 0 0 5px var(--clr-transp-30); color:var(--clr-accent); }


#popup-bg { position:fixed; display:block; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0); pointer-events:none; z-index:100; transition:background-color 0.3s; }
#popup.active ~ #popup-bg, #payment.active ~ #popup-bg { background-color:rgba(0,0,0,0.5); pointer-events:initial; }

/* --- Popup --- */
#popup { color:var(--clr-grey); position:fixed; left:0; top:0; right:0; bottom:0; margin:auto; display:flex; align-items:center; justify-content:center; z-index:101; transform:translateY(-10px); opacity:0; pointer-events:none; transition:transform 0.3s, opacity 0.3s; }
#popup.active { transform:translateY(0px); opacity:1; }
.popup-container { padding:10px; background:white; border-radius:5px; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); max-width:min(90%,1200px); max-height:90vh; box-sizing:content-box; }
#popup.active .popup-container, #payment.active .popup-container { pointer-events:initial; }
#popup-image { border-radius:3px; max-width:100%; max-height:calc(90vh - 50px); }
#popup-image-author:empty { display:none; }
#popup-image-author { position:absolute; top:30px; left:30px; display:flex; justify-content:center; align-items:center; border-radius:4px; margin-left:2.5em; padding-inline:1em; height:2em; font-size:0.95em; background-color:white; z-index:2; transform:translateX(-10px); color:transparent; background-color:transparent; transition:color 0.3s, background-color 0.3s, transform 0.3s; }
#popup-image-author:hover { transform:translateX(0px);color:var(--clr-grey); background-color:white; }
#popup-image-author:after { content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" /><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg>'); transform:translateX(10px); position:absolute; width:2em; height:2em; top:0; left:-2.5em; padding:.5em; border-radius:4px; background-color:rgba(0 0 0 / 15%); transition:background-color 0.3s, transform 0.3s; }
#popup-image-author:hover:after { background-color:rgba(0 0 0 / 50%); transform:translateX(0px); }
.popup-close { position:absolute; font-size:20px; color:#7b7b7b; right:25px; top:25px; background:rgb(255 255 255); filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); width:30px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:50px; cursor:pointer; z-index:1; transition:transform 0.2s, color 0.2s; }
.popup-close svg { margin-right:0; stroke:currentColor; transition:stroke 0.3s; }
.popup-close:hover { color:var(--clr-accent); }
.popup-footer { position:fixed; bottom:25px; right:30px; text-align:right; }
#popup-content:has(.popup-footer) { padding-bottom:60px; }
.popup-footer-absolute { position:absolute; right:0; bottom:0; display:flex; }
.popup-footer-relative { justify-content:right; display:flex; padding-bottom:25px; }
#popup.loading:after { height:60px; width:60px; content:''; position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); border-radius:100%; border:1px solid var(--clr-transp-30); border-bottom:1px solid var(--clr-accent); animation:rotation 0.4s infinite linear; }
#popup.loading #popup-content { opacity:0; }
#popup #popup-content { opacity:1; height:100%; transition:opacity 0.4s; }
#popup .title { font-family:var(--ft-accent); font-size:calc(1.7em * var(--ft-accent-size)); line-height:calc(1 * var(--ft-accent-lineheight)); color:var(--clr-darker); }
#popup .title:after { content:''; display:block; border-bottom:1px solid #d4d4d4; width:100%; padding:5px; border-color:#ebebeb; margin-bottom:50px; }
#popup .title svg { font-size:0.8em; margin-right:0.3em; transform:translateY(0.1em); stroke:var(--clr-lighter); }
#popup .description { margin-bottom:40px; }

#popup { width:600px; height:530px; max-width: min(calc(100% - 2 * var(--pg-gutter)),calc(var(--pg-width) - 2 * var(--pg-gutter))); max-height:80vh; }
#popup:not(.img) .popup-container { width:100%; height:100%; overflow-y:auto; padding:25px 30px; }
#popup.img { width:unset; height:unset; }
#popup.popup-share { width:650px; height:400px; }
#popup.popup-init { width:850px; }
#popup.popup-contribute { height:590px; }
#popup.popup-contribute:has(.wall-img) { height:685px; }
#popup.popup-music { height:400px; }
#popup.popup-trialerror { height:260px; }
#popup.popup-customCSS { width:860px; height:600px; }
#popup:is(.popup-img-background,.popup-img-photo,.popup-img-tree,.popup-img-gallery) { width:1200px; height:700px; }
#popup.popup-changeDesign { width:1500px; max-width: min(calc(100% - 2 * var(--pg-gutter)),1500px); height:800px; }
#popup.popup-donationFAQ { width:800px; }
#popup.popup-suggestObituary { width:1000px; height:580px; }
#popup.popup-galleryReorder { width:800px; height:650px; }


/* --- ***** --- */
/* --- Edit --- */

[contenteditable]:hover { background-image:repeating-linear-gradient(0deg, #a5a5a5, #a5a5a5 3px, transparent 3px, transparent 6px, #a5a5a5 6px), repeating-linear-gradient(90deg, #a5a5a5, #a5a5a5 3px, transparent 3px, transparent 6px, #a5a5a5 6px), repeating-linear-gradient(180deg, #a5a5a5, #a5a5a5 3px, transparent 3px, transparent 6px, #a5a5a5 6px), repeating-linear-gradient(270deg, #a5a5a5, #a5a5a5 3px, transparent 3px, transparent 6px, #a5a5a5 6px); }
[contenteditable]:focus { background-image:repeating-linear-gradient(0deg, var(--clr-accent), var(--clr-accent) 3px, transparent 3px, transparent 6px, var(--clr-accent) 6px), repeating-linear-gradient(90deg, var(--clr-accent), var(--clr-accent) 3px, transparent 3px, transparent 6px, var(--clr-accent) 6px), repeating-linear-gradient(180deg, var(--clr-accent), var(--clr-accent) 3px, transparent 3px, transparent 6px, var(--clr-accent) 6px), repeating-linear-gradient(270deg, var(--clr-accent), var(--clr-accent) 3px, transparent 3px, transparent 6px, var(--clr-accent) 6px); animation:borderAnimation 0.5s infinite linear; }
[contenteditable] { width:fit-content; padding:0.2em 0.3em; cursor:text; background-image: repeating-linear-gradient(0deg, lightgrey, lightgrey 3px, transparent 3px, transparent 6px, lightgrey 6px), repeating-linear-gradient(90deg, lightgrey, lightgrey 3px, transparent 3px, transparent 6px, #030303 6px), repeating-linear-gradient(180deg, lightgrey, lightgrey 3px, transparent 3px, transparent 6px, lightgrey 6px), repeating-linear-gradient(270deg, lightgrey, lightgrey 3px, transparent 3px, transparent 6px, lightgrey 6px); background-size:1px calc(100% + 8px), calc(100% + 8px) 1px, 1px calc(100% + 8px) , calc(100% + 8px) 1px; background-position: 0 0, 0 0, 100% 0, 0 100%; background-repeat:no-repeat; }
[contenteditable].fullwidth { width:100%; }
button:not(.white) [contenteditable] { padding:0 .3em }
button:not(.white,.inline) [contenteditable]:hover { background-image:repeating-linear-gradient(0deg, var(--clr-lighter), var(--clr-lighter) 3px, transparent 3px, transparent 6px, var(--clr-lighter) 6px), repeating-linear-gradient(90deg, var(--clr-lighter), var(--clr-lighter) 3px, transparent 3px, transparent 6px, var(--clr-lighter) 6px), repeating-linear-gradient(180deg, var(--clr-lighter), var(--clr-lighter) 3px, transparent 3px, transparent 6px, var(--clr-lighter) 6px), repeating-linear-gradient(270deg, var(--clr-lighter), var(--clr-lighter) 3px, transparent 3px, transparent 6px, var(--clr-lighter) 6px); }
button:not(.white,.inline) [contenteditable]:focus { background-image:repeating-linear-gradient(0deg, white, white 3px, transparent 3px, transparent 6px, white 6px), repeating-linear-gradient(90deg, white, white 3px, transparent 3px, transparent 6px, white 6px), repeating-linear-gradient(180deg, white, white 3px, transparent 3px, transparent 6px, white 6px), repeating-linear-gradient(270deg, white, white 3px, transparent 3px, transparent 6px, white 6px); animation:borderAnimation 0.5s infinite linear; background-color:rgba(255 255 255 / 20%); }
@keyframes borderAnimation { from { background-position: 0 0, -6px 0, 100% -6px, 0 100%; } to { background-position: 0 -6px, 0 0, 100% 0, -6px 100%; } }

select { color:var(--clr-grey); }
[data-module="intro"]:has(input[type="checkbox"]:not(:checked)) { margin-top:80px; height:10px; }
.timeline-icon { cursor:pointer; transition:box-shadow 0.3s; }
.timeline-icon:hover { box-shadow:0 0 0 5px var(--clr-transp-10); }
#name > span { display:inline-block; line-height:normal; }
.photo-adjust { display:grid; grid-template:auto / 1fr 2fr; gap:20px 0; top:0; width:350px; height:auto; left:calc(100% + 15px); transform:translateX(-10px); }
.photo-adjust:after { top:18px; left:0px; margin:0 0 0 -16px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid #fff; }
.photo-adjust .fullwidth { grid-column:-1 / 1; }
#icon-select { position:absolute; margin-top:7px; margin-left:17px; z-index:2; font-size:1.2em; background-color:white; padding:0.8em 0.8em; border-radius:6px; filter:drop-shadow(1px 2px 5px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); width:max-content; display:grid; gap:5px; grid-template:1fr / repeat(5,1fr); opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity 0.3s, transform 0.3s; }
#icon-select:before { content:''; position:absolute; top:0; left:20px; margin:-8px 0 0; pointer-events:none; border-right:8px solid transparent; border-left:8px solid transparent; border-bottom:8px solid #fff; }
#icon-select svg { stroke:var(--clr-lightgrey); margin-right:unset; padding:0.5em; border-radius:50%; box-sizing:content-box; outline:1px solid transparent; transition:outline 0.3s, stroke 0.3s }
#icon-select svg:hover { stroke:var(--clr-accent); outline:1px solid var(--clr-lighter); cursor:pointer; }
#icon-select.show { opacity:1; transform:translateY(0px); pointer-events:initial; }
.timeline-date .select-container { margin-top:5px }
:is(.img-rotate,.img-delete,.img-labels,.img-options,.img-moderate) { background:white; position:absolute; padding:0.2em; width:2em; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:4px; top:10px; color:var(--clr-lightgrey); cursor:pointer; filter:drop-shadow(1px 1px 2px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.15)); z-index:2; transition:color 0.3s }
:is(.img-rotate,.img-delete,.img-labels,.img-options,.img-moderate):hover { color:var(--clr-accent); }
:is(.img-rotate,.img-delete,.img-labels,.img-options,.img-moderate) svg { margin:unset; stroke:currentColor; }
.gallery-img:has(:is(.img-rotate,.img-delete,.img-labels,.img-options,.img-moderate):hover):before, .gallery-img:has(:is(.img-rotate,.img-delete,.img-labels,.img-options,.img-moderate):hover):after { transform:translateY(20px) scale(0.9); opacity:0; }
.img-rotate { left:10px; }
.img-delete { right:10px; z-index:1; }
.img-labels { left: 50px; }
.img-delete.drag { cursor:move; touch-action:none; }
.img-options { right:10px; }
.wall-options { display:inline-block; z-index:2 }
.wall-options .modal { width:320px; margin-top:5px; }
.wall-moderation-info br { content:''; display:block; margin-block:.5rem; }
.wall-moderation-info { margin-top:10px; font-size:0.9em }
.wall-buttons { display:flex; flex-wrap:wrap; gap:25px; align-items:center; }
.wall-filter { display:flex; align-items:center; margin-left:auto; }
.memory-moderate select { padding:0.35em 2.5em 0.35em 2.5em; font-size:0.9em; }
.memory-wrapper { display:grid; width:100%; }
.memory-card .img-delete.pinned { background-color:color-mix(in srgb, var(--clr-accent), white 80%); color:var(--clr-accent); border:1px solid 1px solid var(--clr-transp-20); filter:drop-shadow(0px 0px 0px white); }
.memory-card:has(.img-delete.pinned) { order:-1; }
.gallery-menu { right:0; left:unset; width:fit-content; display:flex; gap:5px; padding:0.5em }
.gallery-menu:after { left:unset; right:10px; top:3px; border-right:5px solid transparent; border-left:5px solid transparent; border-bottom:5px solid #fff; }
.gallery-menu :is(.img-rotate,.img-delete,.img-labels,.img-moderate) { position:relative; top:unset; left:unset; right:unset; filter:unset; transition:background-color 0.3s; }
.gallery-menu :is(.img-rotate,.img-delete,.img-labels,.img-moderate):hover { background-color:whitesmoke; }
.gallery-foldersList { min-width:145px; display:grid; gap:0px; padding:1em 1em; z-index:3; }
.gallery-foldersList:after { right:8px; left:unset; }
.gallery-foldersList label { font-size:unset; width:auto; padding:0.35em 0.6em 0.35em 2.5em; border-radius:4px; transition:color 0.3s, background-color 0.3s }
.gallery-foldersList label:hover { color:var(--clr-darker); background-color:#f7f7f7 }
.gallery-foldersList label:before { left:0.4em; }
.gallery-foldersList label:after { left:0.65em; top:0.5em; }
.gallery-foldersList label:empty { display:none; }
.gallery-folders { margin-block:20px; }
.gallery-folders button[data-label] { transition:unset; }
.gallery-folders button[data-label]:hover { transform:unset; cursor:unset; }
.gallery-folders button.hide { display:none; }
.gallery-folders .img-delete { position:relative; top:0; right:-8px; margin:0; filter:unset; }
.gallery-defaultfolder button { font-size:0.95em; padding:0.25em 0.5em; }
.gallery-folders:not(:has(button.white:not(.hide))) + .gallery-defaultfolder { display:none; }
.gallery-slideshow { margin-top:35px; display:flex; gap:30px; align-items:baseline; flex-wrap:wrap; }
.defaultfolder-modal { display:grid; grid-gap:10px; width:auto; min-width:180px; }
.defaultfolder-modal svg { font-size:1.2em; margin-right:5px; }
.defaultfolder-modal .or-radio.hide { display:none; }
.gallery-filter { display:flex; align-items:center; justify-content:right; margin-bottom:30px; }
.gallery-labels-title { left:0.45em; margin-block:0 0.3em; color:var(--clr-accent) }
.gallery-moderate-status { width:0.8em; aspect-ratio:1; align-self:center; border-radius:50%; border: 1px solid rgba(0,0,0,10%); }
.fileError :is(th,td):nth-of-type(1) { max-width:250px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fileError td:nth-of-type(2) { color:var(--clr-error); }
.img-moderate[data-status] .gallery-moderate-status { background-color:var(--clr-warning) }
.img-moderate[data-status="1"] .gallery-moderate-status { background-color:var(--clr-success) }
.img-moderate[data-status="2"] .gallery-moderate-status { background-color:var(--clr-error) }
.gallery-moderate { left:unset; width:auto; padding:1em 1em; }
.gallery-moderate:after { right:8px; left:unset; }
section[data-module="gallery"]:not(:has(masonry-layout .gallery-img:nth-child(2))) button[data-action="gallery-reorder"] { display:none; }
section[data-module="gallery"]:has(#galleryOpen:not(:checked)) .wall-options button[data-openmodal="galleryOptions"] { filter:grayscale(1); pointer-events:none; color:grey; opacity:0.75 }
[data-modal="gallerySettings"]:has(#galleryOpen:not(:checked)) :is(label[for="gallery-email"], label[for="gallery-moderation"], label[for="gallery-moderation"] ~ .select-container, label[for="gallery-moderation"] ~ .wall-moderation-info) { opacity:0.35; pointer-events:none; }
[data-module="wall"] .gallery-img { cursor:initial; }
[data-module="wall"] .gallery-img:before, [data-module="wall"] .gallery-img:after { display:none; }
#popup-image-desc { margin-block:1em 0.333333em; width:100% }
#popup:not(.img) #popup-image-desc { display:none; }
.event-label [contenteditable] { display:inline-block; }
.donation { grid-template-columns:auto 1fr; }
.donation-show { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:8px; font-size:0.85em }
.donation-show label { font-size:1.0589em; cursor:pointer; transition:color 0.3s; }
.donation-show label:hover { color:var(--clr-darker); }
.donation-block:has(#donation-showtotal:not(:checked)) .donation-amount { color:var(--clr-lightgrey); }
.donation-block:has(#donation-showtotal:not(:checked)) { border-color:#c0c0c0; box-shadow: 0 0 0 5px whitesmoke; }
.donation-block :is(.donation-amount,.donation-by) { transition:opacity 0.3s; }
.donation-block:has(#donation-showtotal:not(:checked)) :is(.donation-amount,.donation-by) { opacity:0.3; }
#background .background-options { display:flex; gap:10px; position:absolute; bottom:15px; right:15px; height:fit-content; z-index:5 }
#background .img-options { position:relative; right:unset; top:unset; bottom:unset; width:2.3em; }
.background-adjust { left:unset; right:0 }
.background-adjust:after { left:unset; right:66%; }
.background-adjust [data-selector="cover"] { transition:filter 0.3s, opacity 0.3s; }
.background-adjust:has(input[value="cover"]:checked) [data-selector="contain"] { pointer-events: none; filter:grayscale(1); opacity:.4; }
.background-adjust .color-selection { justify-content:space-around } 
#photo button { position:absolute; bottom:15px; right:15px; z-index:4 }
#background:after, #photo:after { content:''; position:absolute; background-color:black; inset:0; opacity:0; pointer-events:none; transition:opacity 0.2s; transform:translateZ(-1px); z-index:1; }
#background:has(button:hover):after, #photo:has(button[data-action="changeImage"]:hover):after { opacity:0.2 }
header.mini #photo button { display:none; }
.showhide { height:28px; position:absolute; right:25px; top:10px; display:flex; align-items:center; gap:10px;}
.showhide:has(input[type="checkbox"]:not(:checked)) ~ h2 { opacity:0.3; pointer-events:none; }
.showhide:has(input[type="checkbox"]:not(:checked)) ~ *:not(h2) { display:none; }
.showhide + h2 { margin-right:140px; }
.dates select { font-size:0.85em; padding:0.25em 1.4em 0.25em 0.5em; }
.dates .select-container:after { width:0.33em; right:0.6em; }
.dates .or-checkbox { font-size:1rem; margin-left:15px; }
.dates:has(input[type="checkbox"]:not(:checked)) select { background:#fcfcfc; color:#b3b3b3; pointer-events:none; }
:is(.img-delete,.img-rotate).loading { pointer-events:none; }
:is(.img-delete,.img-rotate).loading svg { display:none; }
:is(.img-delete,.img-rotate).loading:before { all: unset; content:''; height:1em; width:1em; position:absolute; border-radius:100%; border:1px solid var(--clr-transp-30); border-bottom:1px solid var(--clr-accent); animation: rotation 0.4s infinite linear; }
.imagelist { display:grid; grid-gap:15px; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
.imagelist-item { border-radius:3px; overflow:hidden; aspect-ratio:3 / 2; max-width:290px; }
.imagelist-item img { object-fit:cover; width:100%; height:100%; cursor:pointer; transition:transform 0.3s, filter 0.3s; }
.imagelist-item:hover img { transform:scale(1.05); filter:brightness(0.9); }
.event-content.arrow_after:after { content:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="grey" fill="none" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath stroke="none" d="M0 0h24v24H0z"%3E%3C/path%3E%3Cline x1="5" y1="12" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="16" x2="19" y2="12"%3E%3C/line%3E%3Cline x1="15" y1="8" x2="19" y2="12"%3E%3C/line%3E%3C/svg%3E'); position:absolute; width:1.3em; right:-1.5em; }
.family-unit.empty { background:#fbfbfb; border-color:#eeeeee; color:var(--clr-lightgrey); cursor:pointer; height:fit-content; transition:color 0.3s }
.family-unit.empty:hover { color:var(--clr-accent) }
.family-unit.empty svg { width:100px; height:100px; padding:2.2em; margin:0; background:white; border-radius:50%; stroke-width:1.0; stroke:currentColor; box-shadow:0rem 0.4rem 0.6rem 0rem rgba(32,46,66,0.08); transition:transform 0.3s }
.family-unit.empty:hover svg { transform:translateY(-5px); }
.family-unit.empty .img-delete { display:none; }
.family-unit img + .img-delete { right:unset; top:3.2em; cursor:pointer; opacity:0; transform:translateY(15px); transition:opacity 0.3s, transform 0.3s, color 0.3s; }
.family-unit img:hover + .img-delete, .family-unit img + .img-delete:hover { opacity:1; transform:translateY(0); }
.family-unit img + .img-delete:hover { color:var(--clr-accent); }
.family-unit .img-delete:after { max-width:115px; text-align:right; }
#styling { opacity:0; transform:translateY(8px); pointer-events:none; user-select:none; margin-top:-45px; z-index:101; background:rgba(0,0,0,0.8); border-radius:3px; position:absolute; display:grid; grid-template:1fr / repeat(3,1fr); gap:8px; padding:7px 8px; align-items:center; transition:opacity 0.2s, transform 0.2s; }
#styling:after { content:''; position:absolute; bottom:-5px; left:20px; pointer-events:none; border-right:5px solid transparent; border-left:5px solid transparent; border-top:5px solid rgba(0,0,0,0.8); }
#styling.show { opacity:1; transform:translateY(0px); pointer-events:initial; }
#styling div { display:grid; }
#styling svg { stroke:white; width:1.2em; height:1.2em; margin-right:unset; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; cursor:pointer; transition:stroke 0.2s; }
#styling svg:hover { stroke:var(--clr-accent); }
#music-module:not([data-moduleID]) .or-checkbox { pointer-events:none; opacity:0.4; }
side { color:var(--clr-grey); position:fixed; transform:translateX(0px); opacity:1; --padding-inline:30px 25px; top:0; left:0; width:350px; height:100vh; background-color:white; display:grid; grid-template-rows:auto 1fr auto; z-index:10; box-shadow:12px 0px 15px -15px rgb(0 0 0 / 12%); padding-block:15px; box-sizing:border-box; transition: transform 0.15s, opacity 0.15s; }
side.hide { transform:translateX(-350px); opacity:0.5 }
main ~ side.hide + footer ~ :is(#share,#cta) { transform:translateY(-50px) }
body:has(side.hide + footer) .footerlogo { transform: translateY(-50px); }
.config-close { position:absolute; right:15px; top:35px; background:rgba(0 0 0 / 5%); width:25px; height:25px; border-radius:3px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; }
.config-close svg { margin-right:0; stroke:grey; }
.config-title { padding:20px; text-align:center; font-size:1.15em; margin-bottom:20px; }
.config-container { overflow-y:auto; padding-block:5px; max-height:calc(100vh - 280px); }
side [data-action="changeDesign"] { margin-inline:var(--padding-inline); margin-bottom:20px; }
.config-title:after { width:40px; height:2px; background-color:var(--clr-accent); display:block; content:''; margin:10px auto; }
.rightoptions-title { font-size:1.1em; line-height:35px; padding-inline:var(--padding-inline); cursor:pointer; border-bottom:1px solid transparent; transition:background-color 0.3s, border-bottom 0.3s, color 0.3s; }
.rightoptions-title:after { content:'×'; font-size:2em; font-family:'Juana'; display:flex; top:0; height:100%; align-items:center; right:15px; color:transparent; position:absolute; font-weight:100; transition:right 0.2s, color 0.2s; }
.rightoptions-title.open:after { right:25px; color:grey; }
.rightoptions-title.open { color:var(--clr-darker); border-bottom:1px solid whitesmoke; }
.rightoptions-title:hover { color:var(--clr-accent); background-color:whitesmoke; }
.rightoptions-wrapper { width:100%; display:grid; grid-template-rows:0fr;transition:grid-template-rows 0.3s; }
.rightoptions-title.open + .rightoptions-wrapper { grid-template-rows:1fr; } 
.rightoptions-content { overflow:hidden; padding-inline:var(--padding-inline); padding-bottom:5px; }
.reorder { cursor:move; touch-action:none; user-select:none; height:auto !important; line-height:1.5; border-radius:5px; padding:0.25em 0.5em; transition:color 0.3s; }
.reorder:hover { color:var(--clr-accent); background-color:color-mix(in srgb, var(--clr-accent), rgba(255 255 255 / 75%) 95%); }
.reorder:before { content:'⋮⋮'; letter-spacing:-0.1em; font-size:1em; color:grey; margin-right:10px; transition:color 0.3s; }
.reorder:hover:before { color:var(--clr-lighter); }
side .rightdesc { color:#a0a0a0; padding-block:12px 6px; }
side .or-checkbox label { display:grid; align-items:center; line-height:initial; margin:10px 0 15px; }
.language-selection { display:grid; gap:15px; margin-block:5px 10px }
.language-selection img { width:1.2em; margin-inline:3px 8px; }
.color-selection { margin-top:10px; display:flex; flex-wrap:wrap; gap:7px; }
.color-selection > :not(.rightdesc,#picker) { width:30px; aspect-ratio:1; border-radius:30px; border: 1px solid rgba(0,0,0,0.1); box-shadow:0 0 0 0px var(--clr-transp-30); transition: border 0.2s, box-shadow 0.3s; }
.color-selection > :not(.rightdesc,#picker):hover { border: 1px solid rgba(0,0,0,0.25); box-shadow:0 0 0 5px var(--clr-transp-30); cursor:pointer; }
.color-selection .picker { display:flex; align-items:center; justify-content:center; }
.color-selection .picker svg { margin-right:0; stroke:#535353; transform:translateY(-1px); }
#picker { position:fixed; display:flex; flex-direction:column; top:0; width:200px; padding:5px; margin-top:40px; margin-left:-5px; z-index:11; border: none; background-color:white; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); border-radius: 5px; transition:opacity 0.2s, transform 0.2s; }
#picker.hide { opacity:0; transform:translateY(-10px); pointer-events:none; }
#picker:before { content:''; position: absolute; top:0px; left:12px; margin: -8px 0 0; border-right:8px solid transparent; border-left: 8px solid transparent; border-bottom: 8px solid #fff; pointer-events:none; }
#picker input { color:var(--clr-grey); border-radius:4px; border:1px solid #e5e5e5; box-sizing:border-box; margin:2px 1px; padding:2px 25px 2px 10px; background-color:whitesmoke; width:calc(100% - 2px); font-size:12px; text-align:right; text-transform:uppercase; }
#picker div:first-of-type:after { content:\'HEX Code\'; position:absolute; font-size:12px; left:10px; top:4px; pointer-events:none; }
#picker div span { display:block; z-index:2; position:absolute; right:5px; top:6px; height:13px; width:13px; border-radius:3px; border: 1px solid rgba(0, 0, 0, 0.2); box-sizing:border-box; cursor:initial; }
#picker .IroColorPicker svg { all:unset; width:100%; }
.saved-colors { margin-top:10px; order:2; display:flex; align-items:center; padding-inline:5px; }
.saved-left { display:grid; margin-right:auto; display:flex; gap:5px; margin-block:8px; }
.saved-colors [data-color] { width:25px; aspect-ratio:1; border-radius:100px; border: 1px solid rgba(0,0,0,0.1); }
.saved-colors [data-color][style*="background-color:transparent"] { pointer-events:none; border:1px solid rgba(0 0 0 / 8%); }
.option-selection { display:flex; gap:1em; margin-block:0.5em 0.8em; }
.option-selection > div { width:5em; text-align:center; border-radius:4px; border:1px solid rgba(0,0,0,0.1); font-size:0.9333rem; box-shadow:0 0 0 0px var(--clr-transp-30); cursor:pointer; line-height:2; transition:border 0.2s, box-shadow 0.3s; }
.option-selection > div:hover { border:1px solid rgba(0,0,0,0.25); box-shadow:0 0 0 5px var(--clr-transp-30); }
.font-selection { display:grid; grid-template:auto / 1fr 1fr 1fr; gap:10px; font-size:22px; }
.font-select { align-content:center; height:50px; border-radius:4px; border: 1px solid rgba(0, 0, 0, 0.1); padding:5px 10px; overflow:hidden; white-space:nowrap; cursor:pointer; transition:border 0.2s, box-shadow 0.3s; }
.font-select:hover { border:1px solid rgba(0, 0, 0, 0.25); box-shadow: 0 0 0 5px var(--clr-transp-30); }
.side-footer { background:white; padding-block:10px 30px; padding-inline: var(--padding-inline); width:100%; }
#side-open { position:fixed; top:30px; left:30px; z-index:4; }
side.hide + footer { transform:translateY(0px); opacity:1; }
footer { position:fixed; transform:translateY(100%); opacity:0; bottom:0; left:0; width:100%; background-color:white; z-index:10; box-shadow:0px -15px 15px -15px rgb(0 0 0 / 12%); padding-block:15px; text-align:center; transition: transform 0.15s, opacity 0.15s; }
.videos-img { height:350px; }
.video-container .img-rotate { width:fit-content; aspect-ratio:unset; font-size:0.9em; height:30px; padding-inline:.7em; }
.video-container .img-rotate svg { font-size:1.2em; margin-right:5px; }
#popup.popup-changeDesign .themes-home { padding-inline:0; grid-gap:35px; }
.share-sns svg { display:none; }
.fav-title svg { position:absolute; margin:4px; }
.fav-title [contenteditable] { text-indent:28px; margin-right:40px; }
.newFavorite { display:grid; grid-template:auto / 1fr 1fr 1fr; width:max-content; padding:1em; margin-top:10px; }
.favorites .img-delete { top:0; right:0; }
.fav-question { max-width:500px; }
.newFavorite div { font-size:1rem; cursor:pointer; padding:.3em .6em; border-radius:4px; transition:background-color 0.3s }
.newFavorite div:hover { background-color:whitesmoke; }
.newFavorite svg { vertical-align:-2px }
.newFavorite .custom { color:var(--clr-darker) }
#cta { display:block; transition:transform 0.15s; }
#cta button:after { display:none; }
#cta:not(:is(.wall, .service, .donate)) button { background:white; color:var(--clr-grey); font-weight:var(--weight-default); border:1px solid var(--clr-accent) }
#cta .or-radio { display:flex; }
.cta-list { margin-top:15px; display:grid; grid-gap:10px }
.cta-hide { display:none; font-size:0.75rem; margin-left:.5em; background-color:whitesmoke; color:var(--clr-lightgrey); padding:.25em .5em; position:absolute; right:0px; border-radius:4px; --tooltip-width:200px; }
.cta-hide.inline { display:unset; position:unset; margin-left:15px; font-size:.66em; }
main:has(#showhide-donate:not(:checked)) ~ #cta #cta_donate ~ .cta-hide, main:has(#showhide-service:not(:checked)) ~ #cta #cta_service ~ .cta-hide, main:has(#showhide-wall:not(:checked)) ~ #cta #cta_wall ~ .cta-hide { display:block }
main:has(#showhide-donate:not(:checked)) ~ [data-modal="cta"] #cta_donate_mobElem ~ .cta-hide, 
main:has(#showhide-service:not(:checked)) ~ [data-modal="cta"] #cta_service_mobElem ~ .cta-hide, 
main:has(#showhide-wall:not(:checked)) ~ [data-modal="cta"] #cta_wall_mobElem ~ .cta-hide { display:block; }
.newFavorite.newQuestion { grid-template:unset; }
.rsvpedit-questions { display:grid; z-index:1; }
.rsvpedit-questions hr { height:1px; background-color:var(--clr-transp-10); margin-block:25px; }
.rsvpedit-questions:has(.rsvpedit-question:only-child) .rsvpedit-actions .img-delete[data-action="drag"] { display:none; }
.rsvpedit-actions { position:absolute; right:0; display:flex; gap:12px; }
.rsvpedit-actions .img-delete[data-action="drag"] { cursor:move; }
.rsvpedit-question:not([data-type="choice"]) .img-delete[data-action="options"] { display:none; }
.rsvpedit-question { background-color:rgb(255 255 255 / 75%); }
.rsvpedit-question .subtitle { margin-bottom:10px; }
.rsvpedit-settings { display:grid; width:300px; gap:10px; right:0; left:unset; }
.rsvpedit-settings[data-modal^="questionSettings"]:after { left:unset; right:50px; }
.rsvpedit-settings[data-modal^="questionOptions"]:after { left:unset; right:133px; }
.rsvpedit-settings .or-checkbox { margin:5px; }
.rsvpedit-type { color:var(--clr-lightgrey); padding-block:5px 15px; font-size:0.9em; }
.rsvpedit-type .badge { margin-right:5px; }
.rsvp-option { display:flex; align-items:center; gap:10px; }
.rsvp-option input { margin-bottom:unset; }
.rsvp-option svg { margin-right:unset; cursor:pointer; }
.rsvp-option:first-of-type svg, .rsvp-option:not(:last-of-type) svg { visibility:hidden; }
.rsvpedit-settings[data-modal^="questionOptions"] button { margin-top:5px; }
.rsvpedit-settings[data-modal^="questionOptions"]:has(.rsvp-option input:placeholder-shown) button { opacity:0.6; filter:grayscale(1); pointer-events:none; }
.button-container { display:grid; }
.button-container button:not(.white) svg { display:none; }
.button-container button.white { font-size: 0.933334rem; }
.button-container button.inline { padding-inline: 0; }
.button-container button.inline:hover:before { width: calc(100% - 5px); }
.button-container:has(.button-item:only-child) .rsvpedit-actions .img-delete[data-action="drag"] { display:none; }
.button-item { width:clamp(250px, 400px, 100%); display:grid; gap:15px; padding-bottom:50px; background-color:color-mix(in srgb, var(--clr-backgroundColor), transparent 25%); }
.button-item u { text-decoration:underline 1px dotted var(--clr-lighter); text-underline-offset:3px; margin-left:3px; width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.button-filename { display:inline-flex; align-items:center; margin-left:20px; }
.button-filename:has(u:empty) { display:none; }
.button-item input[type="text"] { width:clamp(250px, 400px, 100%); }
.button-item .img-delete { right:unset; top:unset; position:relative; display:inline-flex; transition:opacity 0.3s; }
.button-info { color:var(--clr-lightgrey); font-size:0.95em; margin-top:15px; }
.modal.buttonSettings { width:200px; left:unset; right:0; }
.modal.buttonSettings:after { left:unset; right:50px; }

.or-button { display:inline-flex; align-items:center; background:var(--clr-accent); font-size:16px; width:fit-content; height:fit-content; padding:0.5em 1.2em; color:white; border-radius:4px; cursor:pointer; font-weight:600; white-space:nowrap; transition:background-color 0.3s, filter 0.5s, color 0.3s, outline 0.3s, box-shadow 0.3s; }
.or-button:hover { background-color:var(--clr-darker); filter:drop-shadow(1px 2px 3px rgba(0,0,0,0.1)) drop-shadow(0px 0px 1px rgba(0,0,0,0.05)); }


/*-- Desktop --*/
@media (min-width:600px) {
	.mobonly { display:none !important; }
	menu:is([data-showhideItems="1"],[data-showhideItems="2"]) ul li[data-section="home"] { display:flex !important; }
	menu:is([data-showhideItems="1"],[data-showhideItems="2"],[data-showhideItems="3"]) ul { width:fit-content; gap:50px; margin-inline:auto; }
	menu:is([data-showhideItems="6"],[data-showhideItems="7"],[data-showhideItems="8"],[data-showhideItems="9"],[data-showhideItems="10"]) ul { gap:10px; padding-inline:2em; box-shadow:0rem 0.875rem 1.5rem 0rem rgba(32,46,66,0.08); background:white; border-radius:3px; }
	menu:is([data-showhideItems="6"],[data-showhideItems="7"],[data-showhideItems="8"],[data-showhideItems="9"],[data-showhideItems="10"]) ul li { padding-inline:0; box-shadow:none; background:unset; }
	menu:is([data-showhideItems="6"],[data-showhideItems="7"],[data-showhideItems="8"],[data-showhideItems="9"],[data-showhideItems="10"]) .menu-title { max-width:100px; }
	menu:is([data-showhideItems="8"],[data-showhideItems="9"],[data-showhideItems="10"]) li { font-size:17px; }
	menu:is([data-showhideItems="9"],[data-showhideItems="10"]) svg { display:none; }
	footer button:before { content:"Don't forget to save your page. It takes 2 mins only."; position:absolute; color:var(--clr-lightgrey); left:calc(100% + 20px); font-weight: var(--weight-default); pointer-events:none; }
}

/*-- Tablets --*/
@media (min-width:600px) and (max-width:1100px) {
	main { max-width:100%; }
	#name { font-size:calc(45px * var(--ft-accent-size)); }
	.dates, #location { font-size:18px; }
	#photo { width:230px; height:230px; }
	header { gap:60px; }
	menu { padding-inline:25px; }
	menu ul { overflow-x:auto; padding-inline:25px; gap:15px; }
	menu li { padding:0.7em 1em; font-size:17px; white-space:nowrap; box-shadow:0rem 0.4rem 0.6rem 0rem rgba(32,46,66,0.08); }	
	.donate-container .memory-card { gap:25px; }
	.donation-right { max-width:30vw; }
	.donation-sender { max-width:40vw; }
	footer button:before { width:200px; text-align:left; text-wrap: wrap; line-height:1.1; }
}
@media (min-width:600px) and (max-width:870px) {
	.donation-secure { display:none; }
}

/*-- Mobile --*/
@media (max-width: 600px) {
	:root, html, body { font-size:18px }
	.mobhide { display:none !important; }
	.or-checkbox label:after { top:0.1rem; }

	#background { height:200px; }
	main { width:100vw; }
	main p { font-size:1rem; }

	header { grid-gap:35px; padding-inline:25px; }
	#photo { grid-column:1 / -1; grid-row:1 / 2; width:calc(55vw - 2 * var(--pg-gutter)); height:calc(55vw - 2 * var(--pg-gutter)); justify-self:center; }
	#info-text { grid-column:1 / -1; grid-row:2 / 3; height:fit-content; width:fit-content; margin-inline:auto; }
	#name { font-size:calc(35px * var(--ft-accent-size)); text-align:center; transition:font-size 0.3s,height 0.3s,opacity 0.3s;  }
	.dates,#location { font-size:18px; }
	menu { margin-top:30px; overflow:hidden; }
	menu ul { overflow-x:scroll; padding-inline:25px; padding-bottom:25px; gap:15px; }
	menu li { padding:0.7em 1em; font-size:17px; white-space:nowrap; box-shadow:0rem 0.4rem 0.6rem 0rem rgba(32,46,66,0.08); }
    menu:is([data-showhideItems="1"],[data-showhideItems="2"]) ul { width:fit-content; margin-inline:auto; }
	.footerlogo { margin-inline:25px auto; }

	body.couple header { grid-gap:30px; }
	body.couple #name { font-size:28px; }
	body.couple #name_small { font-size:calc(22.5px * var(--ft-accent-size)); }
	body.couple #name_small :is(#name_small1,#name_smalland,#name_small2) { line-height:1 }
	body.couple :is(.dates,#location) { margin-inline:auto }

	section[data-module="intro"] { margin-top:100px; }
	#intro { margin-top:-20px; }
	#intro-text { font-size:calc(1.4em * var(--ft-accent-size)); }
	#intro:is(.one,.two) #intro-text:before { left:-0.6em; }
	#intro #intro-text::before, #intro #intro-text:after { font-size:4.2rem; }

	.timeline-card { padding:15px 20px; font-size:0.95em; }
	.timeline-icon { margin-inline:15px; }
	.timeline-date .date { font-size:15px; }
	.timeline-event { grid-template:1fr / 65px auto 2fr; }
	.memory-media .gallery-img { min-width:30%; max-width:45%; height:85px; }
	.memory-author { margin:15px 0; word-break:break-word; }
	.memory-search { width:100%; }
	.memory-search input { width:100%; }
	.gallery-img { margin-bottom:15px; }
	.gallery-img:after { width:40px; }
	.gallery-img:before { font-size:25px; }
	.imagelist-item { max-width:unset; }
	.timeline-desc .linktext, .memory-desc .linktext { white-space:initial !important; }

	.donation { grid-auto-flow:row; gap:25px; }
	.donation-block { padding:15px 20px; display:flex; align-items:center; gap:20px; }
	.donation-amount { font-size:30px; }
	.donation-right { margin-block:0; }
	.donation-secure { margin-bottom:20px; }
	.donate-container .memory-card { grid-auto-flow:row; gap:20px; margin-top:25px; }
	.donation-sender { width:unset; }
	
	header.mini { pointer-events:none; }
	header.mini:after { display:none; }
	#name_small { font-size:calc(25px * var(--ft-accent-size)); }
	
	.event { grid-template:350px / auto; grid-gap:30px; }
	.event-card { padding-inline:25px; grid-gap:15px 10px; }
	.event-card .desc { margin-block:10px; }
	.event-content[data-property="url"] { word-break:break-word; }
	.event-content.arrow_after:after { display:none; }
	.event-card button.white, input[type="file"] + label.white { font-size:0.9em; }

	.family-container { overflow-x:scroll; }
	#family-tree { width:800px; font-size:0.8em; padding-bottom:25px; --familytree-gap:25px; }
	.family-unit { gap:8px; }
	#q { transform:translateX(calc(var(--familytree-gap-h) * 0.25)); }
	#family-tree .l6 { transform: translate(calc(var(--familytree-gap-h) * 0.5), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
	#family-tree .l7 { transform: translate(calc(var(--familytree-gap-h) * -0.5), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
	#family-tree .l8 { transform: translate(calc(var(--familytree-gap-h) * 0.5), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
	#family-tree .l10 { transform: translate(calc(var(--familytree-gap-h) * -0.5), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
	#family-tree .l11 { transform:translate(calc(var(--familytree-gap-h) * 1.75), calc(-50% - calc(var(--familytree-gap-v) * 0.5))); }
	.tree-relationship { margin-top:-5px; }
	button.family-unit.grandchild.empty { font-size:0.92em; padding:0.4em 1em; margin-top:5px;  }
	button.family-unit.grandchild.empty svg {display:none; }

	#share, #cta, #cta button { font-size:1rem; }
	#cta { left:var(--pg-gutter); }
	#share { padding-inline:1.2em; right:var(--pg-gutter); max-width:calc(100vw - 2 * var(--pg-gutter)); }
	.share-sns { font-size:.9em; padding:0; }
	.share-sns:hover { background:unset; }
	.share-more-container.show { overflow-x:scroll; }

	#payment { width:100%; height:calc(100% - 50px); transform:translateY(100%); top:50px; border-radius:4px; padding:50px 20px 10px 40px; }
	.payment_ttl { margin:80px 0 20px; }
	.donation { grid-template:1fr / 1fr }
	.or-radio label { margin-left:0; }
	.or-radio input ~ label:after { left:6px }
	.donation input[type="number"] { width:150px }
	.don_warning { grid-template:1fr auto / auto auto; padding:20px 20px 25px; }
	.don_warning a { font-size:9px; letter-spacing:0px; }
	.don_warning .minibutton { margin-left:0 !important; grid-area: 2 / 1 / 3 / 3; }

	.popup-footer { position:relative; bottom:0; right:0; padding-block:25px; }
	#popup .title { font-size:calc(1.5rem * var(--ft-accent-size)); }
	#popup .title:after { margin-bottom:1.5em; }

	/*-- Not active --*/
	.memory-card.not-active { flex-flow:column; padding:30px 25px;  }

	/*-- Popup sizes --*/
	#popup.popup-share { height:500px; }
	#popup.popup-contribute { height:700px; }
	#popup.popup-trialerror { height:300px; }
	#popup.popup-suggestObituary { height:80vh; }
	#popup.popup-init { --padding:10px; max-width:calc(100% - 1 * var(--padding)); bottom: var(--padding); margin-block: auto calc(2 * var(--padding)); height: 80%; }
	#popup.popup-init .popup-container { padding:calc(2 * var(--padding)) calc(1 * var(--padding)); }


	/* --- ***** --- */
	/* --- Edit --- */
	.dates select { font-size:1em }
	.dates .or-checkbox { grid-column: 2 / -1; margin-bottom:5px; margin-left:unset; }
   	.dates { display:grid; grid-template:1fr 1fr / 1fr auto auto auto auto auto; width:fit-content; margin-block:10px 15px; gap:10px 0; }
	section[data-module="obituary"] [tooltip]:after { right:0; left:unset; width:190px; }
	masonry-layout :is(.img-rotate,.img-delete,.img-labels,.img-options) { width:25%; }
	masonry-layout :is(.img-rotate,.img-delete,.img-labels,.img-options):before, masonry-layout :is(.img-rotate,.img-delete,.img-labels,.img-options):after { display:none; }
	.gallery-menu:after { display:none; }
	.gallery-menu { top:0px; gap:3px; }
	[data-module="gallery"] .wall-buttons .or-checkbox:before, [data-module="gallery"] .wall-buttons .or-checkbox:after { display:none }
	[data-module="intro"]:has(input[type="checkbox"]:not(:checked)) { margin-top:80px; height:unset; }
	.modal[data-modal="introSettings"] { margin-top:15px; right:0px; left:unset; }
	.modal[data-modal="introSettings"]:after { right:20px; left:unset; }
	.family-unit.empty svg { max-width:100%; height:auto; }
	#icon-select { margin-left:0; }
	#photo button { top:15px; right:15px; font-size:14px; }
	#background .background-options { top:15px; }
	#background .img-options { width:2em; }
	#background button { font-size:14px; }
	#side-open { top:15px; left:15px; font-size:14px; }
	.language-selection img { width:1em; }
	.showhide + h2 { margin-right:50px; }
	.showhide label { display:none; }  
	.timeline-date select { max-width:85px; }
	[data-module="wall"] .wall-options .modal { width:calc(100vw - 2* 25px); }
	[data-action="wall-rename"] { margin-right:100%; }
	button[data-action="wall-contribute"] { max-width: 100%; overflow:hidden; }
	.memory-moderate select { text-indent:-999px; width:1px; padding-left:1.5em !important; }
	.event-card [data-modal="mapSettings"] { right:0; left:unset; top:45px }
	.event-card [data-modal="mapSettings"]:after { right:calc(50% - 8px); left:unset; }
	.event-card .modal[data-modal^="mapSettings"] { width:200px; }
	.event-card .modal[data-modal^="mapSettings"] [tooltip]:after { width:100px }
	.rsvp-settings { grid-template:1fr / 1fr; gap: 20px; }
	.donation { grid-template-columns:unset; }
	.donation_howto { overflow-x:scroll; margin-bottom:10px; scroll-snap-type:x mandatory; font-size:1.1em; }
	.donation_howto > div { width:250px; padding-bottom:25px; scroll-snap-align:start; }
	.donation-block { flex-wrap:wrap; }
	.donation-show { margin-top:unset; }
	.don_ht_step { margin-top:2px; }
	.don_ht_title { font-size:0.9em; }
	#share .or-checkbox { display:flex; }
	.share-sns svg { display:block; position:unset; top:unset; margin-left:5px; width:1.1em; height:1.1em; align-self:center; transform:translateY(-1px); fill: var(--clr-accent); stroke:none; }
	#share .share-initial { transition:text-indent 0.5s, color 0.5s; }
	#share:has(.share-more-container.show) .share-initial { text-indent:-50px; color:transparent; }	
	[data-modal="wallOptions"] { margin-top:10px }
	.img-options { right:10px; bottom:10px; top:unset; font-size:0.95em; }
	.img-options:before, .img-options:after { content:unset; }
	.gallery-menu { right:-15px; }
	.gallery-moderate .select-container.moderate select { padding-left:2em; }
	.photo-adjust { width:200%; left:-50%; top:calc(100% + 20px); transform:translateY(-10px); }
	.photo-adjust:after { top:0px; left:calc(50% - 4px); margin:-16px 0 0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #fff; }
	.photo-adjust button[data-action="rotatePhoto"] { top:unset !important; }
	.photo-adjust .radio-toggle label svg { display:none; }
	.newFavorite { grid-template: auto / 1fr 1fr; width:100%; padding:0.65em; }
	.newFavorite div { font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
	.newFavorite.newQuestion { grid-template:1fr 1fr / auto; }
	.gallery-img.not-active.mobonly { margin-bottom:50px }
	.cta-hide.inline { font-size:.5em; }
	main .footerlogo { padding-bottom:125px; }
	main ~ :is(#cta,#share) { opacity:0; transform:translateY(-10px); transition:opacity 0.3s, transform 0.3s; }
	main:has(header.mini) ~ :is(#cta,#share) { opacity: 1; transform:translateY(0); }
	#mobile-modal { position:fixed; width:-webkit-fill-available; min-height:50px; top:unset; bottom:60px; left:unset; right:unset; margin-inline:var(--pg-gutter); transform:translateY(10px); z-index:101; }
	#mobile-modal:after { content:unset; }
	#mobile-modal.show { transform:translateY(0); }
	#mobile-modal ~ #popup-bg:after { content:''; width:100%; height:100%; position:absolute; bottom:0; opacity:0; background:linear-gradient(0deg, rgba(0, 0, 0, 0.3) 10%, rgba(0, 0, 0, 0.05) 30%); pointer-events:none; transition:opacity .3s; } 
	#mobile-modal.show ~ #popup-bg:after { opacity:1; }	#mobile-modal[data-modal="cta"] .or-radio { display:grid; align-items:center; }
	#mobile-modal.gallery-menu { flex-wrap:wrap; gap:10px 15px; padding:1em; }
	#mobile-modal.gallery-menu [data-label] { width:unset; aspect-ratio:unset; padding-inline:5px }
	#mobile-modal.gallery-menu [data-label]:after { all:unset; content:attr(data-label); font-size:.9em; align-content:center; margin-left:5px }
	#mobile-modal.gallery-menu [data-label]:before { display:none; }
	#mobile-modal.gallery-menu [data-label].loading svg { display:block; visibility:hidden; }
	#mobile-modal.gallery-menu [data-label].loading:before { content:'' !important; display:block; left:0px; border:1px solid rgb(29,163,201,0.3); border-bottom:1px solid var(--clr-accent); aspect-ratio:1; border-radius:100px; animation:rotation 0.4s infinite linear; }
	#mobile-modal.gallery-menu :is(.img-rotate,.img-delete,.img-labels,.img-options,.img-moderate) svg { stroke:var(--clr-accent); }
	.gallery-foldersList label:after { top:0.45em; left:0.6em; }
	#mobile-modal .wall-moderation-info { margin-top:unset; }
}


/***** BROWSER-SPECIFIC SYTLES ******/
/************************************/

@media not all and (min-resolution:.001dpcm) { @media { /*-- Safari is the new IE --*/
	.memory-media .gallery-img img { width:-webkit-fill-available; }
	.popup-container { filter:drop-shadow(1px 2px 8px rgba(0,0,0,0.15)); }
	.imagelist-item { -webkit-backface-visibility:hidden; -webkit-transform: translate3d(0, 0, 0); }
	main p::before { content:''; }
	@media (max-width: 600px) {
		#share:has(.share-more-container.show) .share-initial { margin-right:-50px; }
	}
}}
@supports (-webkit-hyphens:none) {  /*-- Safari 16+ is the new IE --*/
	.memory-media .gallery-img img { width:-webkit-fill-available; }
	.popup-container { filter:drop-shadow(1px 2px 8px rgba(0,0,0,0.15)); }
	.imagelist-item { -webkit-backface-visibility:hidden; -webkit-transform: translate3d(0, 0, 0); }
	main p::before { content:''; }
	@media (max-width: 600px) {
		#share:has(.share-more-container.show) .share-initial { margin-right:-50px; }
	}
}