/* ------------------------------------------------------------ *\
	var
\* ------------------------------------------------------------ */
:root {
	
}

/* ------------------------------------------------------------ *\
	Reset
\* ------------------------------------------------------------ */

*,
::before,
::after { box-sizing: border-box; }

html { font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; line-height: 1.15; -webkit-text-size-adjust: 100%; tab-size: 4; }
body { margin: 0; }

b,
strong { font-weight: bolder; }

code,
kbd,
samp,
pre { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; font-size: 1em; }

small { font-size: 80%; }

sub,
sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }

table { border-color: currentcolor; }


button,
input,
optgroup,
select,
textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }

button,
[type='button'],
[type='reset'],
[type='submit'] { -webkit-appearance: button; }

legend { padding: 0; }

progress { vertical-align: baseline; }

::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

summary { display: list-item; }

/* ------------------------------------------------------------ *\
	Base
\* ------------------------------------------------------------ */

body { background: #000000; font-family: 'Roboto', sans-serif; font-size: 1em; color: #ffffff; overflow-x: hidden; }
html { overflow: scroll; scrollbar-width: none; -ms-overflow-style: none; }

html::-webkit-scrollbar { display: none; }

img { border: 0; }


h1,
h2,
h3,
h4,
h5,
h6 { margin-bottom: 0; }

p,
ul,
ol,
dl,
table,
blockquote { margin-bottom: 1.25em; }

h1[class],
h2[class],
h3[class],
h4[class],
h5[class],
h6[class],
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
table:last-child,
blockquote:last-child { margin-bottom: 0; }

a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"],
input[type="image"],
label[for] { cursor: pointer; }

a[href^="tel"],
button[disabled],
input[disabled],
textarea[disabled],
select[disabled] { cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { display: none; -webkit-appearance: none; margin: 0; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

input:is(:-webkit-autofill, :autofill) { transition: background-color 600000s 0s, color 600000s 0s, font 600000s 0s; font-size: 1rem !important; }

input:-webkit-autofill::first-line { font-size: 1rem; }


textarea { overflow: auto; resize: none; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }

button,
input,
optgroup,
select,
textarea { border: none; border-radius: 0; font-family: inherit; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }


button:focus,
input:focus,
select:focus,
textarea { outline-offset: 0px; outline: none; }


p { margin: 0; line-height: 1.5em; }
a { color: inherit; text-decoration: none; display: inline-block; }
a[href^="tel"] { text-decoration: none; }

ul,
ol { padding-left: 20px; margin: 0; line-height: 1.5em;  }

nav ul,
nav ol { list-style: none outside none; padding: 0; }

i[class^='ico'] { display: inline-block; font-size: 0; background-repeat: no-repeat; background-position: center; vertical-align: middle; }

.glide__slides { font-size: 0; }


/* ------------------------------------------------------------ *\
	row / col
\* ------------------------------------------------------------ */


.wrapper { margin: 0 auto; display: inline; display: flex; flex-direction: column; height: 100vh; }
.shell { max-width: 1220px; margin: 0 auto; }


.row { display: grid; column-gap: 40px; min-width: 0; position: relative; }

.row.col-1 { grid-template-columns: repeat(1, 1fr); }
.row.col-2 { grid-template-columns: repeat(2, 1fr); }
.row.col-3 { grid-template-columns: repeat(3, 1fr); }
.row.col-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1220px) {
	.shell { padding: 0 10px; }
	.row.col-2 { grid-template-columns: repeat(1, 1fr); }
	.row.col-4 { grid-template-columns: repeat(2, 1fr); }
}



/* ------------------------------------------------------------ *\
	header
\* ------------------------------------------------------------ */

.header { border-bottom: 1px solid #333333; position: relative; flex-shrink: 0;  }
.header:after { display: block; clear: both; content: ' '; }
.header .logo { margin: 20px 0 20px 40px; float: left; }
.header.online .logo { margin: 20px 0 20px 10px; }
.header .language { margin: 22px 40px 20px 0; float: right; width: 300px; }

.header:has(.main-navigation) { display: grid; grid-template-columns: 1fr auto 1fr; }


@media (max-width: 1220px) {
	.header { padding: 10px; margin: 0 auto; }
	.header.online { padding: 10px; margin: 0; }
	.header .logo,
	.header .language { clear: both; }
	
	.header .logo { margin: 10px 0 0 0; width: 100%; }
	.header.online .logo { margin: 10px 0 0 0; }
	.header .logo a { display: block; text-align: center; }
	.header .language { width: 100%; margin: 22px 0 10px 0; }

}


@media (max-width: 768px) {
	.header { margin: 0; }
	.header.online .logo { display: none; }
	.header:has(.main-navigation) { grid-template-columns: auto; }
}

/* ------------------------------------------------------------ *\
	profile-menu
\* ------------------------------------------------------------ */

.profile-menu:has(img),
.profile-settings { display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; align-self: flex-end; justify-content: center; }
.profile-menu:has(img) { border: 3px solid #ffffff; width: 50px; height: 50px; }
.profile-menu.yellow:has(img) { border-color: #ffcc33; }
.profile-menu.green:has(img) { border-color: #00ff33; }

.profile-settings { width: 200px; height: 200px; border: 3px solid #ffffff; }
.profile-settings.yellow { border-color: #ffcc33; }
.profile-settings.green { border-color: #00ff33; }
.profile-settings img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ------------------------------------------------------------ *\
	content
\* ------------------------------------------------------------ */

.teaser + .shell > .row { margin-top: 8px; }

.shell:has(> .row .article) + .shell:has(> .row .feature) { margin-top: 30px; }

.form-action, .store-links { font-size: 0; }

.btn { border-radius: 20px; background: #000000; padding: 13px 0 11px 0; text-align: center; font-size: 1rem; }
.btn.black { background: #000000; color: #ffffff; }
.btn.blue { background: #6699ff; color: #ffffff; }
.btn.gray { background: #333333; color: #ffffff; }
.btn.red { background: #ff0000; color: #ffffff; }


.btn + .btn,
.store-links a + a { margin-left: 20px; }

h1 { font-size: 3.375rem; margin: 0; }
h2 { font-size: 2.375rem; margin: 0; }
h3 { font-size: 1.25rem; margin: 17px 0 5px 0; }
h4 { font-size: 1rem; margin: 0; }

.sidebar form h3,
.sidebar form h4,
.dynamic-content form h3,
.dynamic-content form h4 { margin: 17px 0 15px 0; }


article h1 { font-size: 3.375em; margin-top: 70px; }
article h2 { font-size: 2.375em; font-weight: normal; margin-top: 20px; }
article h3 { font-size: 1.25em; margin-top: 26px; }
article h4 { font-size: 1em; margin-top: 13px; }


article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p { margin-top: 9px; }

article h1 + h2 { margin-top: 0; }


article a { word-break: break-all; }
article p + h4 { margin-top: 26px; }
article p + p { margin-top: 24px; }
article ul { margin-top: 24px; margin-bottom: 24px; }
article ul li + li { margin-top: 24px; }

article p.bigger { font-size: 1.25em; }


form.center h2 { margin-top: 20px; }

form.center h1,
form.center h2,
form.center h3,
form.center h4,
form.center p { text-align: center; }

form.center p { margin-top: 26px; margin-bottom: 33px; }

@media (max-width: 1220px) {
	article h1 { margin-top: 30px; }
	
	.store-links a { display: block; }
	.store-links a + a { margin-top: 20px; margin-left: 0; }
	
	form.center h2 { font-size: 1.25rem; margin-top: 26px; }
}


/* ------------------------------------------------------------ *\
	panorama
\* ------------------------------------------------------------ */

.panorama { position: relative; font-size: 0; }
.panorama img { display:block; width: 100%; }


@media (max-width: 1220px) {
	.panorama:has(+ form.background) { display: none; }
}

/* ------------------------------------------------------------ *\
	teaser
\* ------------------------------------------------------------ */

.teaser { position: relative; }
.teaser .box { position: absolute; top: 240px; left: 40px; width: 780px; background: rgba(0, 0, 0, 0.8); border-radius: 20px; }

.teaser .content { margin: 0 40px; }
.teaser .content h1 { margin-top: 32px; font-size: 3.375em; margin-bottom: 24px; }
.teaser .content p { margin-bottom: 32px; font-size: 1.25em; }
.teaser .content a { font-size: 1rem; }
.teaser .content .btn { max-width: 300px; }
.teaser .form-action { margin-bottom: 40px; }
.teaser .store-links { margin-bottom: 36px; }

/*
.teaser .glide__slides {
    position: relative;
}

.teaser .glide__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.teaser .glide__slide.glide__slide--active {
    opacity: 1;
    z-index: 2;
}*/

@media (max-width: 1220px) {
	.teaser .glide__track { display: none; }
	.teaser .box { position: relative; width: auto; top: unset; left: unset; width: 100%;  }
	.teaser .content .btn { max-width: unset; display: block; }
	.teaser .content .btn + .btn { margin-top: 20px; margin-left: 0; }
	.teaser .content .btn.black { background: #333333; }
	.teaser .store-links { text-align: center; }
}



@media (max-width: 768px) {
	.teaser .content { margin: 0; }
}

/* ------------------------------------------------------------ *\
	feature
\* ------------------------------------------------------------ */

.feature { margin-bottom: 30px; font-size: 1.25em; display: grid; column-gap: 40px; grid-template-columns: 1fr auto;  }
.feature .icon { }
.feature .title { font-weight: bold; }
.feature .content p { margin-top: 8px; }

/* ------------------------------------------------------------ *\
	accordion
\* ------------------------------------------------------------ */

.accordion { margin-top: 40px; }

.accordion,
.sub-accordion { list-style: none; padding: 0; }

.accordion .sub-accordion,
.sub-accordion .content { display: none; }
.accordion .title.open + .sub-accordion,
.sub-accordion .title.open + .content { display: block; }

.accordion .title { position: relative; cursor: pointer; font-size: 1.25em; background: #ffffff; display: block; color: #000000; padding: 15px 40px 13px 18px; }
.sub-accordion .title { background: none; color: #ffffff;}
.accordion > li { border-bottom: 2px solid #000000; }
.sub-accordion > li { border-bottom: 2px solid #333333; }

.sub-accordion li:last-child { border-bottom: none; }

.accordion > li:last-child .sub-accordion > li:last-child { border-bottom: 2px solid #333333; }

.accordion .title.open { background: #6699ff; color: #ffffff; }
.sub-accordion .title.open { background: none; color: #6699ff; }

.accordion .title .material-symbols { position: absolute; right: 6px; top: 6px; }
.accordion .title .material-symbols:after { vertical-align: middle; content: "add"; }
.accordion .title.open .material-symbols:after { content: "remove"; }

.accordion .content { padding: 0 40px 13px 18px; margin-top: -6px; }
.accordion .content p + p { margin-top: 24px; }

/* ------------------------------------------------------------ *\
	form-group
\* ------------------------------------------------------------ */

form.center { width: 300px; margin: 0 auto; margin-top: 31px; }
form.center.bordered { width: 590px; border: 2px solid #ffffff; border-radius: 20px; padding-top: 15px; padding-bottom: 40px; margin-bottom: 40px; }
form.center.bordered label.inline,
form.center.bordered .form-row { margin-left: 143px; margin-right: 143px; }
form.center.bordered.large label.inline,
form.center.bordered.large .form-row { margin-left: 43px; margin-right: 43px; }
form.center.bordered .store-links { text-align: center; margin-top: 40px; margin-bottom: 0; } 


form.center h1 + .form-row,
form.center h2 + .form-row,
form.center h3 + .form-row,
form.center h4 + .form-row { margin-top: 30px; }



form.center.background { position: absolute; margin-left: auto; margin-right: auto; margin-top: 80px; left: 0; right: 0; width: 590px; background: rgba(0, 0, 0, 0.8); border-radius: 20px; padding-top: 15px; }
form.center.background label.inline,
form.center.background .form-row { margin-left: 143px; margin-right: 143px; }
form.center.background .store-links { text-align: center; margin-top: 40px; margin-bottom: 40px; } 


form.center.background input { background: #000000; }


@media (max-width: 1220px) {
	form.center { width: 100%; }
	form.center.bordered { width: 100%; border: none; padding: 0; }
	form.center.bordered label.inline,
	form.center.bordered .form-row { margin-left: 0; margin-right: 0; }
	form.center.bordered.large label.inline,
	form.center.bordered.large .form-row { margin-left: 10px; margin-right: 10px; }
	form.center.background { position: relative; width: 100%; padding: 0 10px; margin-top: 0; }
	form.center.background label.inline,
	form.center.background .form-row { margin-left: 0; margin-right: 0; }
}


/* ------------------------------------------------------------ *\
	form
\* ------------------------------------------------------------ */


.form-row { display: grid; column-gap: 40px; min-width: 0; }
.form-row.col-1 { grid-template-columns: repeat(1, 1fr); }
.form-row.col-2 { grid-template-columns: repeat(2, 1fr); }
.form-row.col-3 { grid-template-columns: repeat(3, 1fr); }
.form-row.col-4 { grid-template-columns: repeat(4, 1fr); }

.label-row { display: grid; column-gap: 40px; min-width: 0; }
.label-row.col-1 { grid-template-columns: repeat(1, 1fr); }
.label-row.col-2 { grid-template-columns: repeat(2, 1fr); }
.label-row.col-3 { grid-template-columns: repeat(3, 1fr); }
.label-row.col-4 { grid-template-columns: repeat(4, 1fr); }


.form-row.col-birthday { grid-template-columns: 1fr 1fr auto; column-gap: 10px; }
.form-row.col-date { grid-template-columns: auto 1fr 1fr; column-gap: 10px; }

::-webkit-calendar-picker-indicator { filter: invert(1); }

.form-row + .form-row { margin-top: 20px; }

.form-row:has(> .custom-checkbox) + .form-row:has(> .custom-checkbox) { margin-top: 10px; }

label { display: block; color: #999999; }
.sidebar form label:not(.form-row label) { margin-bottom: 10px; }

form h1 + label,
form h1 + .label-row { margin-top: 16px; font-size: 1rem; }

label + .form-row,
.label-row + .form-row { margin-top: 7px; }


label + .form-row:has(> .slider-container),
.label-row + .form-row:has(> .slider-container) { margin-top: -3px; margin-bottom: -11px; }

.form-row + label,
.form-row + .label-row,
.form-row + .form-action { margin-top: 20px; }

.form-col { display: block; vertical-align: top; }
.form-label { font-size: 1.5rem; vertical-align: top; text-align: left; margin-top: -10px; text-transform: uppercase; }

.form-controls { position: relative; }


.form-action { font-size: 1rem; }
.form-action .btn { width: 100%; }

.form-action .right { text-align: right; display: block; margin: -3px 20px 16px 0; }

.form-action + .form-action { margin-top: 20px; }

input,
select,
textarea { font-size: 1rem; color: #ffffff; border: 2px solid #ffffff; background: none; border-radius: 20px; width: 100%; }

input,
select { vertical-align: middle; height: 42px; padding-left: 20px; padding-right: 20px;  }

textarea { padding-left: 20px; padding-top: 7px; padding-bottom: 7px; height: 102px; overflow: auto; }
textarea.resize { height: 42px; resize: none; box-sizing: border-box; line-height: 1.5rem; }
textarea.resize.big { height: 102px; }

input::placeholder { color: #999999; }

textarea::-webkit-scrollbar { width: 0; background: transparent; }
textarea::-moz-scrollbar { width: 0; background: transparent; }

select { -webkit-appearance: none; appearance: none; }
select:focus { background-color: #000000; }

.form-controls:has( > select):after { color: #ffffff; font-size: 1.5rem; width: 24px; height: 24px; font-family: 'Material Symbols Outlined';}
.form-controls:has( > select):after { content: 'keyboard_arrow_down'; position: absolute; right: 14px; top: 7px; }

.form-controls .icon { position: absolute; top: 7px; }

.form-controls .icon:not(.after) ~ input,
.form-controls .icon:not(.after) ~ select { padding-left: 50px; }
.form-controls .icon.after ~ input { padding-right: 45px; }



.form-controls .icon:not(.after) { left: 15px; }
.form-controls .icon.after { right: 11px; }

.form-controls .icon.visibility { cursor: pointer; }


.custom-checkbox .form-controls { color: #ffffff; display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.custom-checkbox label { font-size: 1rem; padding: 0; }
.custom-checkbox .form-controls label { min-height: 29px; padding-top: 4px; padding-bottom: 0; vertical-align: middle; }

.custom-checkbox input { cursor: pointer; border: none; margin-top: -2px; margin-right: 4px; width: 36px; height: 20px; background-color: #333333; border-radius: 50px; position: relative; appearance: none; outline: none; transition-duration: 200ms; }
.custom-checkbox input:after { top: 2px; left: 4px; width: 16px; height: 16px; background-color: #ffffff; border-radius: 50%; content: ""; position: absolute; }
.custom-checkbox input:checked { background-color: #6699ff; }
.custom-checkbox input:checked:after { left: 20px; }

.custom-checkbox input:disabled { color: #6699ff; }

.custom-chips { vertical-align: top; }

.custom-chips .form-controls { color: #ffffff; font-size: 0; display: block; position: relative; cursor: pointer; margin-left: -10px; margin-bottom: -10px; }
.custom-chips .form-controls label { color: #ffffff; padding: 0; font-size: 1rem; display: inline-block; position: relative; margin-left: 10px; margin-bottom: 10px; }
.custom-chips input { background: #333333; border: none; height: auto; border-radius: 20px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; appearance: none; outline: none; }
.custom-chips input:checked { background: #6699ff; }
.custom-chips span { position: inherit; display: block; padding: 12px 20px 12px 20px; }

.custom-location .form-controls { display: block; position: relative; }
.custom-location .form-controls label { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 2px solid #ffffff; border-radius: 20px; margin-bottom: 10px; background-color: transparent; color: #ffffff; }
.custom-location input[type='radio'] { padding: 0; margin-right: 10px; width: 32px; height: 32px; appearance: none; border: 2px solid #ffffff; border-radius: 50%; cursor: pointer; position: relative; }
.custom-location input[type='radio']:checked { border-color: #ffffff; background-color: transparent; }
.custom-location input[type='radio']:checked::after { content: ''; width: 18px; height: 18px; background-color: #ffffff; border-radius: 50%; position: absolute; top: 5px; left: 5px; }

.custom-location .form-controls label span { display: flex; flex-direction: column; }
.custom-location .form-controls label small { font-size: 0.75rem; color: #999999; }
.custom-location .form-controls label strong { font-size: 1rem; }
.custom-location .form-controls label a { margin-left: auto; }
.custom-location .form-controls label:first-child span { flex-grow: 1; }


.custom-newsletter .form-controls { display: block; position: relative; }
.custom-newsletter .form-controls .newsletter-container { display: flex; align-items: center; justify-content: space-between; padding: 10px; border: 2px solid #ffffff; border-radius: 20px; margin-bottom: 10px; background-color: transparent; color: #ffffff; }
.custom-location input[type='radio'] { padding: 0; margin-right: 10px; width: 32px; height: 32px; appearance: none; border: 2px solid #ffffff; border-radius: 50%; cursor: pointer; position: relative; }
.custom-location input[type='radio']:checked { border-color: #ffffff; background-color: transparent; }
.custom-location input[type='radio']:checked::after { content: ''; width: 18px; height: 18px; background-color: #ffffff; border-radius: 50%; position: absolute; top: 5px; left: 5px; }

.custom-newsletter .form-controls span { display: flex; flex-direction: column; flex-grow: 1; }
.custom-newsletter .form-controls small { font-size: 0.75rem; color: #999999; }
.custom-newsletter .form-controls strong { font-size: 1rem; }
.custom-newsletter .form-controls a { margin-left: auto; }

.custom-map { position: relative; }
.custom-map .map { height: 400px; border: 2px solid #ffffff; border-radius: 20px; }

/* ------------------------------------------------------------ *\
	single/range slider
\* ------------------------------------------------------------ */

.slider-container{ position: relative; width: calc(100% - 90px); margin: 0 auto; }

.slider-container .slider { position: relative; padding: 10px 0; width: 100%; }


.slider-track { height: 42px; background-color: #333333; border-radius: 20px; position: relative; overflow: hidden; width: calc(100% + 90px); margin-left: -45px; }
.slider-fill { position: absolute; top: 50%; height: 42px; background-color: #6699ff; border-radius: 20px; z-index: 2; transform: translateY(-50%); }
.slider-handle { width: 90px; height: 42px; background-color: #6699ff; border-radius: 20px; position: absolute; cursor: pointer; transform: translate(-50%, -50%); top: 50%; z-index: 3; transition: box-shadow 0.3s ease; pointer-events: all; }

.slider-label { z-index: 4; position: absolute; width: 100%; text-align: center; top: 50%; transform: translate(-50%, -50%); font-size: 1rem; color: #ffffff; transition: transform 0.3s; pointer-events: none; }
.slider-handle.active .slider-label,
.slider-handle.max .slider-label,
.slider-handle.min .slider-label { transform: translateX(-50%) translateY(-150%); }

.slider-handle:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.slider-handle.active { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); }

label.moving { color: #000000; }


/* ------------------------------------------------------------ *\
	footer
\* ------------------------------------------------------------ */

.footer { border-top: 1px solid #333333; }
.content:has(> .shell) + .footer { margin-top: 40px; }
.footer .headline { margin-top: 38px; margin-bottom: 7px; }
.footer .copyright { color: #999999; font-size: 0.8em; text-align: center; margin: 36px 0; }


@media (max-width: 1220px) {
	.footer .row.col-4 { grid-template-columns: repeat(1, 1fr); text-align: center; }
}


/* ------------------------------------------------------------ *\
	footer-nav
\* ------------------------------------------------------------ */

.footer-nav { color: #999999; }
.footer-nav ul { line-height: 1.75em; }

/* ------------------------------------------------------------ *\
	social-nav
\* ------------------------------------------------------------ */

.social-nav ul { font-size: 0; display: block; margin-left: -20px; margin-top: 16px; margin-bottom: 20px; }
.social-nav li { font-size: 1em; display: inline-block; margin-left: 20px; }

.social-nav + a { float: left; }
.social-nav + a + a { float: right; }


@media (max-width: 1220px) {
	.social-nav + a,
	.social-nav + a + a { float: none; }
	.social-nav + a + a { margin-left: 20px; }
}

/* ------------------------------------------------------------ *\
	crop
\* ------------------------------------------------------------ */

/*.lazy { background-repeat: no-repeat; background-position: 50% 50%; background-size: 100% auto; border: none; content: none; }*/
.crop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.crop img { object-fit: cover; width: 100%; height: 100%; }

.lazy-container { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; transition: opacity 0.5s ease, transform 0.5s ease; }
.lazy-container img { opacity: 0; transition: opacity 0.5s ease-in-out; }
.lazy-container img[data-loaded="true"] { opacity: 1; }



.profile-image .lazy-container,
.profile-settings .lazy-container,
.image-settings .lazy-container,
.blog-content .lazy-container { position: relative; }

.crop .lazy-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.lazy-container.loaded img { opacity: 1; }
.lazy-container.loaded { transform: scale(1); }

.lazy-container.upload img { opacity: 1; }
.lazy-container.upload .spinner { z-index: 99; }

/* ------------------------------------------------------------ *\
	action-nav
\* ------------------------------------------------------------ */

.navigation-bar { display: flex; }

.action-nav { display: inline-block; margin: 10px; white-space: nowrap; display: block; margin-left: 0; }

.action-nav ul::-webkit-scrollbar { display: none; }
.action-nav ul { font-size: 0; display: flex;  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }

.action-nav ul li { background: #333333; color: #ffffff; position: relative; font-size: 1rem; font-weight: normal; display: inline-block; border-radius: 20px; }
.action-nav ul li + li { margin-left: 10px; }
.action-nav li button { background: #333333; color: #ffffff; font-weight: normal; }
.action-nav li a,
.action-nav li button { display: block; padding: 7px 20px 3px 14px; border-radius: 20px; }

.action-nav li a:hover,
.action-nav li button:hover { background: #ffffff; color: #000000; text-decoration: none; }

.action-nav li.current a,
.action-nav li.current button { background: #6699ff; color: #ffffff; text-decoration: none; }


@media (max-width: 1220px) {
	.navigation-bar .action-nav { margin-left: 0; }
	.action-nav li a,
	.action-nav li button { display: block; padding: 4px 20px 0 14px; border-radius: 20px; }
}


/* ------------------------------------------------------------ *\
	navigation-header
\* ------------------------------------------------------------ */

.navigation-header { display: flex; align-items: center; margin-bottom: 10px; padding-bottom: 10px; margin-top: 10px; }

.navigation-header .image { width: 50px; height: 50px; position: relative; }
.navigation-header .image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #ffffff; }
.navigation-header .image.green img { border: 3px solid #00ff33; }
.navigation-header .image.yellow img { border: 3px solid #ffcc33; }

.navigation-info,
.navigation-info .info-row span { flex-grow: 1; }
.navigation-info .info-row { margin-left: 15px; margin-top: -4px; display: flex; }
.navigation-info .info-row + .info-row { color: #999999; margin-top: 6px; }
.navigation-info .info-row .right { text-align: right; color: #999999; display: inline-block; }


@media (max-width: 1220px) {
	.navigation-header { display: flex; }
}


@media (max-width: 768px) {
	.navigation-header { padding-bottom: 0; }
}



/* ------------------------------------------------------------ *\
	filter-nav
\* ------------------------------------------------------------ */

.filter-search-overlay { display: none; }

.filter-nav {  display: inline-block; margin: 8px 0 10px 10px; text-align: right; flex-grow: 1; }
.filter-nav ul { font-size: 0; }
.filter-nav ul li { display: inline-block; position: relative; }
.filter-nav ul li + li { margin-left: 10px; }
.filter-nav ul li a { padding-top: 4px; }


.filter-nav li.current > a,
.filter-nav li a:hover { color: #6699ff; text-decoration: none; }

.filter-nav .sub-nav { right: 0; }

.sub-navigation-bar .action-nav { margin-right: 100px; }
.sub-navigation-bar .action-nav + .filter-nav { position: absolute; right: 0; top: -2px; background: #000000; }


.filter-view .filter-head .filter-nav { margin: 0; text-align: left; float: right; margin-top: 8px; }
.filter-view .filter-head:after { content: ''; display: block; clear: both; }

.filter-view .filter-head h1:has(+ .filter-nav),
.filter-view .filter-head h2:has(+ .filter-nav),
.filter-view .filter-head h3:has(+ .filter-nav){ display: inline-block; }

.filter-view .filter-head h1:has(+ .filter-nav),
.filter-view .filter-head h2:has(+ .filter-nav),
.filter-view .filter-head h3:has(+ .filter-nav) { vertical-align: middle; font-weight: bold; margin: 32px 0 32px 0; line-height: 0; }


@media (max-width: 768px) {
	.main-content-view .filter-nav { position: fixed; top: 10px; z-index: 10003; }
	.main-content-view .filter-nav .sub-nav { right: unset; left: 0; }
	.main-content-view .main-content-overlay .filter-nav .sub-nav { right: 0; left: unset; }
	
	.overlay-content .filter-nav { position: relative; top: 0; right: 8px; }
	
	.main-content-view .filter-nav .material-symbols.md-40 { font-size: 2rem; width: 40px; height: 40px; padding-top: 2px; }
	
	.main-content-view:has( + .filter-view + .sidebar-view.open)> .navigation-bar .filter-nav { display: none; }
}
	
/* ------------------------------------------------------------ *\
	sub-nav
\* ------------------------------------------------------------ */


ul.sub-nav { display: none; font-size: 0; position: absolute; background: #000000; z-index: 1000; padding: 10px 0; margin-top: 5px; }
ul.sub-nav li { font-size: 1rem; display: block; background: #000000; position: relative; font-weight: normal; border-radius: 0; margin: 0; }
ul.sub-nav hr { border: none; border-bottom: 1px solid #333333; margin: 10px 0; }
ul.sub-nav li + li { margin: 0; }
ul.sub-nav li a,
ul.sub-nav li button { background: none; border-radius: 0; padding: 4px 12px 0 12px; color: #ffffff; min-width: 250px; text-align: left; text-decoration: none; }


ul.sub-nav li.current a,
ul.sub-nav li:hover a, 
ul.sub-nav li.current button,
ul.sub-nav li:hover button { color: #6699ff; background: none; }

ul.sub-nav li.green.current a,
ul.sub-nav li.green:hover a, 
ul.sub-nav li.green.current button,
ul.sub-nav li.green:hover button,
ul.sub-nav li.green.current .md-white,
ul.sub-nav li.green:hover .md-white { color: #00ff33; background: none; }


/* ------------------------------------------------------------ *\
	main-navigation
\* ------------------------------------------------------------ */

.main-navigation { text-align: center; margin-top: 10px; }

.main-navigation u { display: inline-block; font-size: 0; }
.main-navigation li { display: inline-block; font-size: 1rem; color: #999999; }
.main-navigation li + li { margin-left: 40px; }
.main-navigation li a { position: relative; display: block; text-align: center; }
.main-navigation li:hover { color: #ffffff; }
.main-navigation li.current { color: #6699ff; }


@media (max-width: 1220px) {
	.main-navigation { margin-top: 0; }
}

@media (max-width: 768px) {
	.main-navigation { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; background: #000000; width: 100%; padding-top: 0; padding-bottom: 6px; }
	.main-navigation li + li { margin-left: 40px; }
	.main-navigation .material-symbols.md-40 { font-size: 2rem; width: 40px; height: 40px; padding-top: 8px; }
}

@media (max-width: 320px) {
	.main-navigation li + li { margin-left: 20px; }
}

/* ------------------------------------------------------------ *\
	sub-navigation
\* ------------------------------------------------------------ */

.sub-navigation { text-align: right; align-self: end; margin-bottom: 15px; margin-right: 25px; }
.sub-navigation ul { display: inline-block; font-size: 0; color: #999999; }
.sub-navigation li { display: inline-block; font-size: 1rem; vertical-align: middle;}
.sub-navigation li a { position: relative; display: block; }
.sub-navigation li + li { margin-left: 40px; }
.sub-navigation li:hover { color: #ffffff; }
.sub-navigation li.current { color: #6699ff; }

@media (max-width: 1220px) {
	.sub-navigation { margin: 10px 10px 0 0; }
	.sub-navigation li + li { margin-left: 20px; }
}

@media (max-width: 768px) {
	.sub-navigation .material-symbols.md-40 { font-size: 2rem; width: 40px; height: 40px; padding-top: 4px; }
}

/* ------------------------------------------------------------ *\
	bullet
\* ------------------------------------------------------------ */

span.num-bullet { background: #cc0000; color: #ffffff; position: absolute; line-height: 1.25rem; right: -15px; top: -15px; font-weight: bold; padding: 4px 10px; border-radius: 50%; }
span.num-bullet.hidden { display: none; }

.main-navigation span.num-bullet { top: 0; }

/* ------------------------------------------------------------ *\
	spinner
\* ------------------------------------------------------------ */

.spinner { border: 8px solid #ffffff; border-top: 8px solid #6699ff; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.content-spinner,
.overlay-spinner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7) ; display: flex; }

.content-spinner,
.overlay-spinner { justify-content: center; align-items: center; z-index: 100000; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s ease-in-out; }

.content-spinner { position: absolute; }

.lazy-container .spinner { position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); transform: translate(-50%, -50%); visibility: visible; }
.lazy-container img[data-loaded="true"] + .spinner { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s ease-in-out; }

.lazy-container.loaded img { opacity: 1; transition: none; }
.lazy-container.loaded .spinner { visibility: hidden; opacity: 0; }

/* ------------------------------------------------------------ *\
	main-content-view / sidebar-view
\* ------------------------------------------------------------ */

.wrapper .content:has(.main-content-view),
.wrapper .main-content-view,
.wrapper .filter-view,
.wrapper .sidebar-view { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.wrapper .content:has(.main-content-view) { flex: 1; flex-direction: row; justify-content: flex-start; gap: 0; transition: gap 0.5s ease; }

.wrapper .main-content-view { flex: 1 1 auto; transition: flex 0.5s ease; }
.wrapper .sidebar-view,
.wrapper .filter-view { display: flex; flex: 0 1 0; transform: translateX(100%); transition: transform 0.5s ease, opacity 0.5s ease, flex 0.5s ease; }
.wrapper .sidebar-view.open,
.wrapper .filter-view.open { transform: translateX(0); opacity: 1;  flex: 0 1 500px; }

.wrapper .main-content-view:has(+ .filter-view.open, + .filter-view.open + .sidebar-view.open) { flex: 1 1 calc(100% - 520px); }
/*.wrapper .main-content-view:has(+ .filter-view.open, .main-content-view + .filter-view + .sidebar-view.open) { margin-right: 20px; }*/
.wrapper .main-content-view:has(+ .filter-view.open, + .filter-view + .sidebar-view.open) { margin-right: 20px; }
.wrapper .filter-view.open:has(+ .sidebar-view.open) { margin-right: 20px; }


.wrapper .main-content-view:has(+ .filter-view.open),
.wrapper .main-content-view:has(+ .filter-view:not(.open) + .sidebar-view.open) { flex: 1 1 calc(100% - 520px); }
.wrapper .main-content-view:has(+ .filter-view.open + .sidebar-view.open) { flex: 1 1 calc(100% - 1040px); }

@media (max-width: 1220px) {
	.wrapper .content:has(.main-content-view),
	.wrapper .main-content-view { display: flex; margin-right: 0 !important; }
	.wrapper .filter-view,
	.wrapper .sidebar-view { display: none; }
	.wrapper .filter-view.open,
	.wrapper .sidebar-view.open { position: fixed; display: flex; top: 72px; left: 0; width: 100%; height: calc(100% - 72px); background: #000000; z-index: 10001; }
}

/* ------------------------------------------------------------ *\
	main-content
\* ------------------------------------------------------------ */

html:has(.main-content-view) { overflow: hidden; }

.main-content { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; flex-grow: 1; }
.main-content::-webkit-scrollbar { display: none; }



@media (max-width: 768px) {
	.main-content { padding-bottom: 80px; }
}

/* ------------------------------------------------------------ *\
	filter-content
\* ------------------------------------------------------------ */

/* ------------------------------------------------------------ *\
	sidebar
\* ------------------------------------------------------------ */

.sidebar { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; flex-grow: 1; height: 100%; }
.sidebar::-webkit-scrollbar { display: none; }

.sidebar form { padding: 0 10px; }

.sidebar .dynamic-content > .sub-navigation-bar,
.sidebar .dynamic-content > .action-nav,
.sidebar .dynamic-content > .sidebar-head { position: fixed; background: #000000; z-index: 999; width: 100%; margin: 0; }
.sidebar .dynamic-content > .sub-navigation-bar + .list,
.sidebar .dynamic-content > .action-nav + .list,
.sidebar .dynamic-content > .sidebar-head + form,
.sidebar .dynamic-content > .sidebar-head + div { margin-top: 62px; }

.sidebar .dynamic-content > .sub-navigation-bar > .action-nav { margin: 0; }
.sidebar .dynamic-content .action-nav { padding: 10px 0 8px 0; }
.sidebar .dynamic-content .filter-nav { padding: 8px 0 10px 0; }

.sidebar.dynamic .filter-nav { margin: 0; text-align: left; }

.sidebar.dynamic .filter-nav,
.sidebar.dynamic .filter-nav + h1,
.sidebar.dynamic .filter-nav + h2,
.sidebar.dynamic .filter-nav + h3 { display: inline-block; }

.sidebar.dynamic .filter-nav + h1,
.sidebar.dynamic .filter-nav + h2,
.sidebar.dynamic .filter-nav + h3 { vertical-align: middle; font-weight: bold; margin: 10px 0 0 8px; line-height: 0; }

/* ------------------------------------------------------------ *\
	overlay-content
\* ------------------------------------------------------------ */

.main-content-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1000; display: flex; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.main-content-overlay { flex-direction: column; justify-content: center; align-items: flex-start; transform: translateX(-100%); opacity: 0; transition: opacity 0.5s ease; }

.main-content-overlay.open { transform: translateX(0); opacity: 1; }

.overlay-content { display: flex; flex-direction: column; height: 100%; background: #000000; padding-right: 20px; transform: translateX(-100%); transition: transform 0.5s ease; }
.main-content-overlay.open .overlay-content { transform: translateX(0); } 
.overlay-content .overlay { width: 100%; height: 100%;  display: grid; grid-template-columns: 500px auto; gap: 20px; overflow: hidden; }

.overlay-content .first-content,
.overlay-content .second-content { position: relative; width: 500px; height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; flex-grow: 1; flex: 1; display: flex; flex-direction: column; }

.dynamic-content { height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; flex-grow: 1; }

.dynamic-content::-webkit-scrollbar,
.overlay-content .first-content::-webkit-scrollbar,
.overlay-content .second-content::-webkit-scrollbar { display: none; }



@media (max-width: 1220px) {
	.overlay-content { padding-right: 0; padding: 0; width: 100%; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

  .overlay-content .overlay { padding-bottom: 84px; flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; gap: unset; }
  .overlay-content .first-content,
  .overlay-content .second-content { width: 100%; flex: none; height: auto; overflow-y: auto; }
  .overlay-content .bottom-content { position: fixed; bottom: 0; left: 0; right: 0; background: #000000; z-index: 10; }

  .overlay-content .overlay::-webkit-scrollbar,
  .overlay-content .first-content::-webkit-scrollbar,
  .overlay-content .second-content::-webkit-scrollbar { display: none; }
}


@media (max-width: 768px) {
	.main-content-overlay { position: fixed; z-index: 10004; }
}

/* ------------------------------------------------------------ *\
	profile
\* ------------------------------------------------------------ */


.profile { position: relative; }
.profile-image { position: relative; font-size: 0; }
.profile-image a { display: block; }
.profile-image img { width: 100%; }

.profile-image .grid-content { font-size: 1rem; }

.profile .list.grid { grid-template-columns: repeat(4, 1fr); margin-top: 10px; }


@media (max-width: 768px) {
	.overlay-content .overlay .first-content:has(.profile) { display: none; }
	.overlay-content .overlay:has(.second-content #profile-toggle) .first-content:has(.profile) { display: block; }
}

/* ------------------------------------------------------------ *\
	club
\* ------------------------------------------------------------ */

.club .list.grid { grid-template-columns: repeat(3, 1fr); }

/* ------------------------------------------------------------ *\
	stamps
\* ------------------------------------------------------------ */

.list.grid.stamp { grid-template-columns: repeat(3, 1fr); }


.stamp .item { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-bottom: 0; }
.stamp .item img { max-width: calc(100% - 80px); height: auto; display: block; margin: 20px auto 0 auto; }
.stamp .item .stamp-title { display: block; text-align: center; font-weight: bold; margin-top: 20px; }
.stamp .item.current { background: #6699ff; }

/* ------------------------------------------------------------ *\
	bottom-content
\* ------------------------------------------------------------ */

.bottom-content { position: sticky; bottom: 0; z-index: 10; }

/* ------------------------------------------------------------ *\
	profile-nav
\* ------------------------------------------------------------ */


.profile-nav { color: #999999; padding: 10px; text-align: center; border-radius: 40px; }
.profile-nav ul { display: flex; justify-content: space-around; padding: 0; margin: 0; }
.profile-nav li { display: inline-block; text-align: center; position: relative; }
.profile-nav li:hover { color: #ffffff; }
.profile-nav li.current { color: #6699ff; }
.profile-nav a { position: relative; display: block; }
.profile-nav a img { width: 64px; padding: 8px; height: auto; margin: 0 auto; display: block; }


/* ------------------------------------------------------------ *\
	chat
\* ------------------------------------------------------------ */


.form-row.col-chat { grid-template-columns: 64px auto 64px; column-gap: 5px; margin-top: 10px;  }
.col-chat .btn { padding: 6px 0 4px 0; }


.chat-container { padding-bottom: 5px; flex-grow: 1; display: flex; height: 100%; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; flex-direction: column-reverse; }
.chat-container::-webkit-scrollbar { display: none; }


.chat-message-container { position: relative; z-index: 1; display: flex; flex-direction: column; margin: 5px 0; max-width: 70%; align-items: flex-start; }
.chat-message {	position: relative; z-index: 1; line-height: 1.5rem; text-align: left; margin: 5px 0; border-radius: 10px; padding: 10px; color: #ffffff; word-wrap: break-word; overflow-wrap: break-word; }


.chat-message:has(> .list.grid) { min-width: 300px; }
.chat-message:has(> .list.grid .item:nth-child(1):only-child) { min-width: 150px; }


.chat-message-container.sender { align-self: flex-end; text-align: right; }
.chat-message-container.sender .chat-meta { align-self: flex-end; }

.chat-message-container.recipient .chat-message { background-color: #6699ff; }
.chat-message-container.sender .chat-message { align-self: flex-end; background-color: #333333; }

.chat-message-container.sender.edit .chat-message { background-color: #333333; }

.chat-meta { font-size: 0.75rem; color: #999999; margin-top: -7px; height: 32px; display: flex; align-items: center; }

.message-action-nav { position: absolute; padding-top: 8px; top: 50%; transform: translateY(-50%); }

.chat-message-container.sender .message-action-nav { left: -40px; }
.chat-message-container.recipient .message-action-nav { right: -40px; }

.chat-message-container .list.grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.chat-message-container .chat-message:has(> .list.grid .item:nth-child(1):only-child) .list.grid { grid-template-columns: repeat(1, 1fr); }

.list.grid .item.hidden-image { display: none; }
.more-images { position: relative; }
.plus-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); color: white; display: flex; justify-content: center; align-items: center; font-size: 1rem;  font-weight: bold; }

.hidden-box { margin-top: 10px; padding: 10px; display: none; max-height: 180px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.hidden-box .list.grid { grid-template-columns: repeat(4, 1fr); }

.hidden-box::-webkit-scrollbar { display: none; }

.hidden-box .item { cursor: pointer; transition: border-color 0.3s ease; }

.hidden-box .item.active { border-color: transparent; }
.hidden-box .item.active::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.hidden-box .item.active::before { background-color: rgba(102, 153, 255, 0.25); border: 2px solid #6699ff; box-sizing: border-box; pointer-events: none; z-index: 1000; }


@media (max-width: 768px) {
	.chat-container { padding-bottom: 40px; }
}

/* ------------------------------------------------------------ *\
	confirm
\* ------------------------------------------------------------ */

.alert { display: none; }

.fancybox-content.alert,
.fancybox-content.confirm { background: #000000; position: initial; padding: 0; min-height: auto; margin: 0 auto; min-width: 20vw; border-radius: 10px; }
.fancybox-content.alert { display: inline-block; }
.alert .alert-title,
.confirm .confirm-title { position: relative; padding: 6px 10px 5px 10px; cursor: pointer; background: #6699ff; }

.alert p,
.confirm p { padding: 6px 10px 5px 10px; }

.alert .btn,
.confirm .btn { margin: 6px 10px 10px 10px; min-width: 100px; }
.alert .btn,
.confirm .btn + .btn { float: right; }

.alert .close-fancybox,
.confirm .close-fancybox { position: absolute; right: 4px; top: 0; }


/* ------------------------------------------------------------ *\
	box / box.accordion
\* ------------------------------------------------------------ */


.box { margin-bottom: 1px; }
.box.accordion { margin-top: 0; }
.box .box-head { position: relative; padding: 6px 10px 5px 10px; cursor: pointer; border-bottom: 1px solid #333333; }
.box.accordion:not(.inactive) .box-head.no-border { border: none; }
.box .box-head i { position: absolute; right: 0; top: -4px; }

.box .box-head a { display: block; }

.box .box-head .material-symbols:after { vertical-align: middle; content: "remove"; }
.box.accordion.inactive .box-head .material-symbols:after { content: "add"; }

.box .box-head.edit .material-symbols:after { content: "edit"; }

.dynamic-content .box .box-head { font-weight: bold; }

.box.accordion.inactive .box-content { display: none; }

.box .box-content { text-align: center; border-bottom: 1px solid #333333; margin-top: 1px; padding: 6px 10px 5px 10px; overflow: auto; word-wrap: break-word; overflow: hidden; }
.box .box-content.left { text-align: left; padding: 10px; }

.box .box-content.left p + p,
.box .box-content.left strong + p { margin-top: 20px; }

.box.accordion > .box-content { border: none; }


.second-content .box.accordion:last-child .box-content { border: none; }
.box.accordion:not(inactive) .box-content.grid,
.box.accordion:not(inactive) .box-content.links { border-bottom: none; }

.box .box-content dl { margin: 4px 0; }

.box .box-content dt,
.box .box-content dd { vertical-align: top; display: inline-block; float: none; margin: 0; width: calc(50% - 10px); line-height: 1.5rem; }
.box .box-content dt { text-align: right; margin-right: 5px; color: #999999; }
.box .box-content dd { text-align: left; margin-left: 5px; }


.box .box-content.grid { padding: 0; background: none; text-align: left; }
.box .box-content.links { padding: 0; text-align: left; }
.box .box-content.links ul { list-style-type: none; padding-left: 0; }
.box .box-content.links ul li a { width: 100%; display: block; border-radius: 0; text-decoration: none; background: #333333; }
.box .box-content.links ul li + li { margin-top: 1px; }

.box .box-content.links ul li img { width: 48px; height: 48px; vertical-align: middle; }
.box .box-content.links ul li span { vertical-align: middle; margin-left: 10px; }


.box .box-content.grid .list.grid { grid-template-columns: repeat(3, 1fr); }


@media (max-width: 768px) {
	.box .box-content.grid .list.grid { grid-template-columns: repeat(2, 1fr); }
}


/* ------------------------------------------------------------ *\
	notification
\* ------------------------------------------------------------ */

.list.grid .notification { grid-column: 4 / span 3; grid-row: 2 / span 2; }


.content:has(.main-content-overlay.open) .list.grid .notification { grid-column: 1 / span 3; }
.content:has(.filter-view.open, .sidebar-view.open) .list.grid .notification { grid-column: 3 / span 3; }
.content:has(.filter-view.open + .sidebar-view.open) .list.grid .notification { grid-column: 2 / span 2; }

.content:has(.main-content-overlay.open) .main-content-overlay .list.grid .notification { grid-column: 1 / span 3; }

.notification { background-color: #333333; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }

.notification i { color: #ffffff; margin-bottom: 10px; }
.notification p { font-size: 1rem; margin: 0; margin-bottom: 10px; }


/* ------------------------------------------------------------ *\
	fancybox
\* ------------------------------------------------------------ */

.fancybox-caption__body .like-image,
.fancybox-caption__body .like-image-groups { text-align: left; border-top: 1px solid; }

.fancybox-content { -ms-overflow-style: none; scrollbar-width: none; }
.fancybox-content::-webkit-scrollbar { display: none; }
.fancybox-close-small { display: none; }

.fancybox-thumbs { background: #000000; }

.fancybox-caption a,
.fancybox-caption a:link,
.fancybox-caption a:visited { color: #ffffff; }

.fancybox-caption a.like-button.liked,
.fancybox-caption a:link.like-button.liked,
.fancybox-caption a:visited.like-button.liked { color: #6699ff; }

.fancybox-content.fancy-content { background: #000000; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0; min-height: auto; margin: 0 auto !important; width: calc(100vw - 310px * 2); }


.fancybox-content.fancy-content .list.grid { grid-template-columns: repeat(6, 1fr); }

.fancybox-content.fancy-content .filter-nav { position: sticky; top: 0; margin: 0; width: 100%; z-index: 999; padding: 0; cursor: pointer; background: #000000; }


/* ------------------------------------------------------------ *\
	list 
\* ------------------------------------------------------------ */

.list { display: grid; }

.list:not(.grid) .item { display: grid; grid-template-columns: 100px 1fr; margin-bottom: 5px; }
.list-image { position: relative; display: block; vertical-align: top; float: left; width: 100px; height: 100px; }
.list-image a { display: block; height: 100%; }

.list-image .overlay { position: absolute; }
.list-image .overlay.top-left { top: 0; left: 0; }
.list-image .overlay.top-right { top: 0; right: 0; }
.list-image .overlay.bottom-left { bottom: 0; left: 0; }
.list-image .overlay.bottom-right { bottom: 0; right: 0; }

.list-image + .list-content { height: auto; }

.list-content { border-bottom: 1px solid #333333; display: block; margin: 0 5px; position: relative;}

.list .item.gray .list-content { color: #999999; }
.list .item.read .list-content { color: #999999; }

.list-content a { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.list-content .meta { margin-top: 10px; }
.list-content .meta .left { font-weight: bold; font-size: 1rem; }
.list-content .meta .right { float: right; }
.list-content .meta .right i { margin-left: 10px; }
.list-content p { margin-top: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------ *\
	list grid
\* ------------------------------------------------------------ */


.main-content .list.grid { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); }
.content:has(.main-content-view + .filter-view.open) .main-content .list.grid,
.content:has(.main-content-view + .filter-view:not(.open) + .sidebar-view.open) .main-content .list.grid { grid-template-columns: repeat(7, 1fr); }
.content:has(.main-content-view + .filter-view.open + .sidebar-view.open) .main-content .list.grid { grid-template-columns: repeat(4, 1fr); }

.main-content .list.grid.discover { grid-template-columns: repeat(9, 1fr); }
.content:has(.main-content-view + .filter-view.open) .main-content .list.grid.discover,
.content:has(.main-content-view + .filter-view:not(.open) + .sidebar-view.open) .main-content .list.grid.discover { grid-template-columns: repeat(6, 1fr); }
.content:has(.main-content-view + .filter-view.open + .sidebar-view.open) .main-content .list.grid.discover { grid-template-columns: repeat(3, 1fr); }

.sidebar .list.grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.list.grid.pictures { grid-template-columns: repeat(3, 1fr); }

.list.grid .item { position: relative; display: flex; flex-wrap: wrap; padding-bottom: 100%; height: 0; justify-content: center; align-content: center;  }
.list.grid .item a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-decoration: none; }

.list.grid .item .sub-nav a { position: relative; }
.list.grid .item .sub-nav { left: 20px; top: calc(60% - 20px); }
.list.grid .item:nth-child(3n) .sub-nav { left: auto; right: 20px; }
.list.grid .item .sub-nav li { min-width: 280px; }


.grid-content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.grid-content.top { background: linear-gradient(rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0.0) 50%); }
.grid-content.bottom { background: linear-gradient(rgba(0, 0, 0, 0.0) 50%, rgba(0, 0, 0, .8) 100%); }

.grid-line { position: absolute; left: 10px; right: 10px; display: flex; align-items: center; }
.top .grid-line.one { top: 8px; left: 0; right: 0; min-height: 32px; }
.bottom .grid-line.one { bottom: 8px; }
.bottom .grid-line.two { bottom: 30px; }
.bottom .grid-line.three { bottom: 48px; left: 0; right: 0; }

.grid-line .material-symbols { margin-left: 5px; margin-right: 5px; }
.grid-line.one.image .material-symbols { margin: 0; }
.grid-line.one.image { left: 6px; right: 6px; }

.grid-line img { width: 100%; }

.bottom .grid-line.two .left { font-weight: bold; }

.grid-line .left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; margin-right: 5px; }
.grid-line .center { flex: 1; text-align: center; white-space: nowrap; }
.grid-line .right { flex: 1; text-align: right; white-space: nowrap; }


.grid-content.top .left { flex: 0 1 32px; text-align: left; }
.grid-content.top .center { flex: 1 1 auto; font-size: 0.75rem; text-align: center; }
.grid-content.top .right { flex: 0 1 32px; text-align: right; }

.grid-content.top .right:has(> img) { flex: 0 1 48px; text-align: right; padding-top: 10px; padding-right: 10px; }
.grid-content.top:has(.grid-line .right > img) { margin-top: -8px; }

.confirm-action { z-index: 999999; }


@media (max-width: 1440px) {
	.main-content .list.grid.discover { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 1220px) {
	.main-content .list.grid,
	.content:has(.main-content-view + .filter-view.open) .main-content .list.grid,
	.content:has(.main-content-view + .filter-view:not(.open) + .sidebar-view.open) .main-content .list.grid { display: grid; grid-template-columns: repeat(4, 1fr); }
	
	.content:has(.main-content-view + .filter-view.open + .sidebar-view.open) .main-content .list.grid { grid-template-columns: repeat(2, 1fr); }
	
	.main-content .list.grid.discover,
	.content:has(.main-content-view + .filter-view.open) .main-content .list.grid.discover,
	.content:has(.main-content-view + .filter-view:not(.open) + .sidebar-view.open) .main-content .list.grid.discover { display: grid; grid-template-columns: repeat(6, 1fr); }
	
	.content:has(.main-content-view + .filter-view.open + .sidebar-view.open) .main-content .list.grid.discover { grid-template-columns: repeat(3, 1fr); }
	
}

@media (max-width: 768px) {
	.header.online + .content { margin-bottom: 75px; }
	.main-content .list.grid,
	.content:has(.main-content-view + .filter-view.open) .main-content .list.grid,
	.content:has(.main-content-view + .filter-view:not(.open) + .sidebar-view.open) .main-content .list.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
	.main-content .list.grid.discover { grid-template-columns: repeat(3, 1fr); }
	
	.grid-line { left: 5px; right: 5px; }
	.top .grid-line.one { top: 3px; left: 0; right: 0; min-height: 32px; }
	.bottom .grid-line.one { bottom: 3px; }
	.bottom .grid-line.two { bottom: 23px; }
	.bottom .grid-line.three { bottom: 38px; left: 0; right: 0; }
	
	.grid-line .material-symbols { margin-left: 0; margin-right: 0; }
	.grid-line.one.image .material-symbols { margin: 0; }
	.grid-line.one.image { left: 6px; right: 6px; }
	
	.grid-content.top .right:has(> img) { flex: 0 1 38px; text-align: right; padding-top: 10px; padding-right: 5px; }
	.grid-content.top:has(.grid-line .right > img) { margin-top: -8px; }
	
	.grid-content.top, .grid-content.bottom { font-size: 0.75rem; }
	.grid-content.bottom .left { flex: 2;}
}

/* ------------------------------------------------------------ *\
	filter-container
\* ------------------------------------------------------------ */

.filter-view .filter-nav { flex-grow: 0; }
.filter-container { flex-grow: 1; margin-bottom: 20px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.filter-container::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------ *\
	sidebar navigation
\* ------------------------------------------------------------ */

.sidebar.dynamic,
.sidebar.menu { display: none; }

.sidebar.dynamic.open,
.sidebar.menu.open { display: block; }

.navigation-top { margin: 0 auto; text-align: center; margin-top: 20px; }
.navigation-top .profile-name { margin-top: 20px; }

.sidebar-nav { padding: 10px 0; }
.sidebar-nav ul { list-style-type: none; padding: 0; margin: 0; }

.sidebar-nav li { margin: 8px 0 8px 10px; }

.sidebar-nav a { text-decoration: none; color: #ffffff; display: flex; align-items: center; }
.sidebar-nav a:hover { color: #6699ff; }

.sidebar-nav hr { border: none; height: 1px; background-color: #333333; margin: 10px 0; }

.sidebar-nav i { margin-right: 8px; margin-top: 4px; }
.version { color: #999999; text-align: center; margin-top: 10px; }

.sidebar .action-nav ul { cursor: grab; }

.sidebar form { margin-bottom: 20px; }

@media (max-width: 768px) {
	.sidebar-nav ul li { padding: 0 10px; }
}

/* ------------------------------------------------------------ *\
	image-settings
\* ------------------------------------------------------------ */

.image-settings a { width: 100%; text-align: center; }
.image-settings a img { width: 75%; margin: 0 auto; margin-bottom: 14px; }

/* ------------------------------------------------------------ *\
	multi-pictureup
\* ------------------------------------------------------------ */

.multi-pictureup .picture-upload-blog,
.multi-pictureup .picture-upload,
.multi-videoup .video-upload { position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; padding: 0; opacity: 0; display: block; }

.multi-pictureup .label-upload,
.multi-videoup .label-upload { border: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.multi-pictureup .label-upload i,
.multi-videoup .label-upload i { font-size: 9rem; line-height: 9rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-align: center; color: #ffffff; }


.multi-pictureup .picture-upload-blog + .label-upload i { font-size: 7rem; line-height: 7rem; }

/* ------------------------------------------------------------ *\
	image-stream
\* ------------------------------------------------------------ */

.image-stream { grid-template-columns: auto; }
.image-stream .stream-item { width: 100%; max-width: 500px; margin: 0 auto; margin-top: 20px; border-bottom: 1px solid #333333; }

.stream-header { display: flex; align-items: center; margin-bottom: 10px; }
.stream-item .image { width: 50px; height: 50px; position: relative; }
.stream-item .image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #ffffff; }
.stream-item .image.green img { border: 3px solid #00ff33; }
.stream-item .image.yellow img { border: 3px solid #ffcc33; }

.stream-info,
.stream-info .info-row span { flex-grow: 1; }
.stream-info .info-row { margin-left: 15px; margin-top: -4px; display: flex; }
.stream-info .info-row + .info-row { color: #999999; margin-top: 6px; }
.stream-info .info-row .right { text-align: right; color: #999999; display: inline-block; }

.stream-item .glide__slides { display: flex; }
.stream-item .glide__slide { width: 100%; position: relative; }

.stream-item .glide__slide a { display: block; }
.stream-item .crop { width: 100%; height: 0; padding-bottom: 100%; position: relative; overflow: hidden; }
.stream-item .crop img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; }

.stream-item .controls { position: absolute; top: 250px; left: 0; right: 0; display: flex; justify-content: space-between; transform: translateY(-50%); z-index: 1; }
.stream-item .controls button { margin: 0 10px; background-color: rgba(0, 0, 0, 0.6); color: #ffffff; padding: 2px 0 0 0; border-radius: 10px; border: none; cursor: pointer; transition: background 0.3s; }
.stream-item .controls button:hover { background-color: rgba(51, 51, 51, 0.2); }

.stream-item .image-count { position: absolute; top: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.6); color: #ffffff; padding: 5px 10px; border-radius: 10px; z-index: 1; }
.stream-item .like-section { margin-top: 15px; display: flex; align-items: center; margin-bottom: 20px; }
.stream-item .like-section:has(+ .text-caption) { margin-bottom: 0; }
.stream-item .like-count { flex-grow: 1; font-size: 1rem; margin-left: 5px; margin-top: -5px; color: #999999; }
.stream-item .like-section:has(a + a) a:first-child { flex-grow: 1; }
.stream-item .text-caption { font-size: 1rem; line-height: 1.5rem; color: #999999; margin-bottom: 20px; }


@media (max-width: 1220px) {
	.image-stream .stream-item { max-width: calc(100vw - 20px); }
}

/* ------------------------------------------------------------ *\
	blog
\* ------------------------------------------------------------ */


.form-row.col-comment { grid-template-columns: auto 64px; column-gap: 5px; margin-bottom: 10px; }
.col-comment .btn { padding: 6px 0 4px 0; }

.blog-item { margin-bottom: 20px; color: #ffffff; }

.blog-header { display: flex; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #333333; padding-bottom: 10px; }

.blog-item .image { width: 50px; height: 50px; position: relative; }
.blog-item .image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #ffffff; }
.blog-item .image.green img { border: 3px solid #00ff33; }
.blog-item .image.yellow img { border: 3px solid #ffcc33; }

.blog-info,
.blog-info .info-row span { flex-grow: 1; }
.blog-info .info-row { margin-left: 15px; margin-top: -4px; display: flex; }
.blog-info .info-row + .info-row { color: #999999; margin-top: 6px; }
.blog-info .info-row .right { text-align: right; color: #999999; display: inline-block; }

.blog-item .blog-content { margin-bottom: 10px; }
.blog-item .blog-footer { border-bottom: 1px solid #333333; padding-bottom: 10px; margin-bottom: 10px; }


.blog-content img { width: 100%; margin-top: 10px; }
.list.grid.blog { grid-template-columns: repeat(4, 1fr); margin-top: 10px; }
.list.grid.blog .item { margin-bottom: 0; }
.list.grid.blog img { margin-top: 0; object-fit: cover; width: 100%; height: 100%; }

form .list.grid.blog { margin-bottom: 20px; }
form .list.grid.blog .item { cursor: pointer; transition: border-color 0.3s ease; }
form .list.grid.blog .item.active { border-color: transparent; }
form .list.grid.blog .item.active::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
form .list.grid.blog .item.active::before { background-color: rgba(102, 153, 255, 0.25); border: 2px solid #6699ff; box-sizing: border-box; pointer-events: none; z-index: 1000; }



.blog-footer .details { color: #999999; float: left; padding-top: 4px; }

.blog-item .action-bar { display: flex; justify-content: flex-end; align-items: center; position: relative; }
.blog-item .sub-nav { right: 32px; }

.blog-item .edit-form,
.blog-item .edit-comment-form { display: none; margin-bottom: 10px; }
.blog-item .edit-comment-form { margin-top: 20px; }

.comment-header { display: flex; align-items: center; }

.blog-item .comment-content,
.comments .blog-footer { margin-left: 65px; }
.comments .blog-footer { border: none; padding: 0; }

.blog-item .comment-content { color: #ffffff; background-color: #6699ff; border-radius: 10px; padding: 10px; margin-top: 5px; margin-bottom: 10px; margin-right: 5px; position: relative; }
.blog-item .comment { margin-bottom: 10px; position: relative; border-bottom: 1px solid #333333; }

.blog-item .comment-content p a { word-wrap: break-word; overflow-wrap: anywhere; word-break: break-word; }

.blog-item .comment-input { border-bottom: 1px solid #333333; }

.blog-item .comment-input .custom-checkbox { margin-bottom: 20px; }

/* ------------------------------------------------------------ *\
	like-button
\* ------------------------------------------------------------ */

.like-button { color: #ffffff; transition: transform 0.3s ease, color 0.3s ease; }
.like-button.liked { color: #6699ff; animation: pulse 0.5s ease; }

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ------------------------------------------------------------ *\
	Material Symbols
\* ------------------------------------------------------------ */

.material-symbols { vertical-align: middle; }


.material-symbols.md-12 { font-size: 0.75rem; padding: 4px; width: 20px; height: 20px; }
.material-symbols.md-16 { font-size: 1rem; width: 20px; height: 20px; }
.material-symbols.md-20 { font-size: 1.25rem; width: 24px; height: 24px; }
.material-symbols.md-22 { font-size: 1.375rem; width: 24px; height: 24px; }
.material-symbols.md-24 { font-size: 1.5rem; width: 32px; height: 32px; padding: 4px; line-height: 1.25rem; }
.material-symbols.md-40 { font-size: 2.5rem; width: 40px; height: 40px; }
.material-symbols.md-48 { font-size: 3rem; padding: 8px; width: 64px; height: 64px; }
.material-symbols.md-96 { font-size: 6rem; }


.material-symbols.md-t16 { font-size: 1rem; width: 16px; height: 16px; }


.material-symbols.md-white { color: #ffffff; }
.material-symbols.md-black { color: #222933; }
.material-symbols.md-blue { color: #0099cc; }
.material-symbols.md-grey { color: #999999; }
.material-symbols.md-green { color: #00ff33; }
.material-symbols.md-yellow { color: #ffcc33; }


.material-symbols.md-r45 { transform: rotate(45deg); }
.material-symbols.md-r90 { transform: rotate(90deg); }
.material-symbols.md-r180 { transform: rotate(180deg); }
.material-symbols.md-r270 { transform: rotate(270deg); }


.material-symbols.md-classification1 { color: #009933; }
.material-symbols.md-classification2 { color: #006633; }
.material-symbols.md-classification3 { color: #cc9933; }
.material-symbols.md-classification4 { color: #990000; }
.material-symbols.md-classification5 { color: #ff0000; }
.material-symbols.md-classification6,
.material-symbols.md-classification7 { color: #ffffff; }

/* ------------------------------------------------------------ *\
	Icons
\* ------------------------------------------------------------ */

i.ico-instagram { background: url(/images/ico-instagram.png) no-repeat center; width: 32px; height: 32px; }
i.ico-facebook { background: url(/images/ico-facebook.png) no-repeat center; width: 32px; height: 32px; }
i.ico-threads { background: url(/images/ico-threads.png) no-repeat center; width: 32px; height: 32px; }
i.ico-x { background: url(/images/ico-x.png) no-repeat center; width: 32px; height: 32px; }
i.ico-youtube { background: url(/images/ico-youtube.png) no-repeat center; width: 32px; height: 32px; }