:root {
	/*--bg-color: #f9f8f4;*/
    --bg-color: #fafafa;
	--bg-color-over: #eee;
    --col001: #f3f7f7;
    --col002: #e3e7e7;
    --col-red1: #da92a8;
    --col-red2: #ca8298;
    --col-gr1: #a2f7df;
    --col-gr2: #92e7cf;
    --max-page-width: 832px;
}

*, *:before, *:after { border: 0; margin: 0; padding: 0; outline: 0; box-sizing: border-box; }
body { background-color: var(--bg-color); color: #5b5b5b; font-family: 'DIN Pro', sans-serif; font-size: 14px; font-weight: 400; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
b { font-weight: 500; }
a { background-color: transparent; color: #179296; text-decoration: none; }
a:hover { }
img, svg { display: block; }

ul, ol { list-style: none; }
p, li { }
.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }
.mt16 { margin-top: 16px; }
.mb16 { margin-bottom: 16px; }
.txt04 { display: inline-block; padding: 2px 8px 4px; border-radius: 8px; background-color: #179296; color: #ffffff; font-size: 12px; font-weight: 400; }
.txt05 { display: inline-block; padding: 2px 8px 4px; border-radius: 8px; background-color: #67d2d6; color: #ffffff; font-size: 12px; font-weight: 400; }
.txt06 { display: inline-block; padding: 2px 8px 4px; border-radius: 8px; background-color: #f9f8f4; color: #179296; font-size: 12px; font-weight: 400; text-transform: lowercase; }
.txt07 { display: inline-block; padding: 2px 8px 4px; border-radius: 8px; background-color: #cdc54f; color: #ffffff; font-size: 12px; font-weight: 400; text-transform: lowercase; }
.txt08 { display: inline-block; padding: 2px 8px 4px; border-radius: 8px; background-color: #da92a8; color: #ffffff; font-size: 12px; font-weight: 400; text-transform: lowercase; }

.fs10 { font-size: 10px; }

.scrolls::-webkit-scrollbar { width: 6px; }
.scrolls::-webkit-scrollbar-track { background-color: #fff; }
.scrolls::-webkit-scrollbar-thumb { background-color: #e3e3e3; border: 2px solid #fff; }
.scrolls::-webkit-scrollbar-track-piece{ background-color: #fff; }

input[type="text"],
textarea,
select { margin: 0; padding: 8px; border: 1px solid var(--bg-color); border-radius: 4px; background-color: var(--bg-color); color: #000; font-family: inherit; font-size: 14px; font-weight: 400; }
input[type="text"]:focus,
textarea:focus,
select:focus { border-color: var(--bg-color-over); }
input,
textarea { appearance: none; }
input[type="radio"],
input[type="checkbox"] { appearance: none; position: relative; width: 20px; height: 20px; margin-right: 16px; border-radius: 100%; border: 1px solid #ccc; background-color: #fff; vertical-align: middle; }
input[type="checkbox"] { border-radius: 0; }
input[type="radio"]::before,
input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; overflow: hidden; }
input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before { margin: 2px; border: 4px solid transparent; border-radius: 100%; background-color: #ccc; }
input[type="checkbox"]:checked::before { border-radius: 0; }
label { color: #666; font-size: 12px; text-transform: lowercase; cursor: pointer; }

.form { display: flex; flex-direction: column; gap: 16px; }
.form-warn { padding: 8px; border: 1px solid #f17575; color: #f17575; font-size: 12px; }
.form-line { display: flex; flex-direction: column; gap: 4px; }
.form-line-simple { }
/*---*/
.form-error { color: #b00; font-size: 12px; font-weight: 400; }
.form-cols-full { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.form-cols-left { display: flex; gap: 8px; align-items: center; justify-content: flex-start; }
.form-cols-right { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
/*---*/
#sendFormFiles { position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; }

.btn {
    display: inline-block; width: auto; padding: 6px 12px; border-radius: 2px;
    border: 1px solid var(--col-gr1); background-color: var(--col-gr1); color: #4a9273;
    font-family: inherit; font-size: 10px; font-weight: 700;
    cursor: pointer; text-decoration: none; text-align: center; text-transform: uppercase;
}
.btn:hover { border: 1px solid var(--col-gr2); background-color: var(--col-gr2); color: #222; }

.btn.btn-rd { border: 1px solid var(--col-red1); background-color: var(--col-red1); color: #fff; }
.btn.btn-rd:hover { border: 1px solid var(--col-red2); background-color: var(--col-red2); color: #eee; }

.btn.btn-sl { border: 1px solid var(--col001); background-color: var(--col001); color: #555; }
.btn.btn-sl:hover, .btn.btn-sl.sel { border: 1px solid var(--col002); background-color: var(--col002); color: #222; }

.btn.btn-xs { padding: 4px 12px; font-size: 8px; }

.btn.btn-del { padding: 2px 4px; border: 1px solid var(--col-red1); background-color: var(--col-red1); color: #fff; font-size: 10px; font-weight: 500;  }
.btn.btn-del:hover { border: 1px solid var(--col-red2); background-color: var(--col-red2); color: #eee; }

.overlay { position: fixed; inset: 0; z-index: 0; display: none; background: rgba(0,0,0,0.5); }
.overlay.show{ display: block; }

header { background-color: #179296; }
header .inner { display: flex; flex-flow: row nowrap; align-items: center; gap: 16px; min-width: 320px; max-width: var(--max-page-width); margin-inline: auto; padding-inline: 16px; }
header a.logo { margin-right: auto; padding-bottom: 4px; color: transparent; font-weight: 900; font-size: 20px; line-height: 46px; text-decoration: none; text-transform: lowercase; -webkit-text-stroke: 1px #e0e0e0; }
header a.icon{ display: block; width: 32px; height: 32px; }
header a.icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
header a.icon.bg img { background-color: #eee; }

.hamburger { display: none; }
.hamburger span { display: block; width: 25px; height: 2px; background-color: #e0e0e0; border-radius: 2px; }
.hamburger span+span { margin-top: 4px; }
.hamburger span+span+span { width: 20px; }

nav { padding-block: 4px; background-color: #fff; }
nav ul { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; list-style: none; min-width: 320px; max-width: var(--max-page-width); margin-inline: auto; padding-inline: 16px; }
nav ul li { font-size: 12px; font-weight: 500; line-height: 32px; text-transform: uppercase; }
nav ul li a { display: flex; align-items: center; gap: 8px; color: #000; text-decoration: none; }
nav ul li a img { width: 16px; padding-block: 4px; }
nav ul li a span { }
@media only screen and (max-width : 640px) { nav ul li a span { display: none; } }

footer{ min-width: 320px; max-width: var(--max-page-width); margin-inline: auto; padding-inline: 16px; color: #179296; font-size: 12px; font-weight: 300; line-height: 24px; }

.page { min-width: 320px; max-width: var(--max-page-width); margin: 8px auto; padding-inline: 16px; display: flex; flex-flow: row nowrap; gap: 16px; }
main { flex-grow: 1; }
menu { position: relative; flex: 0 0 208px; }
menu.notshow { display: none; }

/* ---------------------------------------------------------------------- */

@media only screen and (width < 736px) {
    nav, menu { display: none ; }
    .hamburger { display: block; }

}

ul.ulicon { list-style: none; }
ul.ulicon li { padding: 2px 8px; border-radius: 4px; line-height: 28px; }
ul.ulicon li:hover { background-color: var(--bg-color-over); }
ul.ulicon li a { display: flex; align-items: center; gap: 12px; color: #696565; font-size: 14px; font-weight: 400; text-decoration: none; }
ul.ulicon li a img { width: 20px; }

.panel { position: fixed; z-index: 1; top: 0; left: 0; display: none; flex-direction: column; width: 280px; height: 100%; padding: 32px 8px 8px; background-color: #fff; box-shadow: -4px 0 4px 4px rgba(0,0,0,.5); transition: 0.5s; }
.panel.right { left: unset; right: 0; box-shadow: 4px 0 4px 4px rgba(0,0,0,.5); }
.panel.show { display: flex; }
.panel .close{ position: absolute; top: 4px; right: 4px; display: inline-block; width: 24px; height: 24px; text-decoration:none; }
.panel .close img { width: 100%; height: 100%; }
.panel-content{ flex: 1; overflow-y: auto; }

/* ---------------------------------------------------------------------- */

h1 { color: #078286; font-size: 14px; font-weight: 700; text-transform: uppercase; }
h2 { color: #078286; font-size: 14px; font-weight: 700; text-transform: uppercase; }
h3 { color: #7c7c7c; font-size: 12px; font-weight: 700; text-transform: uppercase; }

.main-unit { padding: 16px; background-color: #fff; }
.main-unit h3:not(:first-child) { margin-top: 16px; }
main > .main-unit:not(:first-child) { margin-top: 8px; }

@media only screen and (max-width : 448px) {
    .page { margin-block: 0px; padding-inline: 0px; }
    .main-unit { padding: 12px; }
}




.card { display: flex; flex-flow: row nowrap; gap: 16px; align-items: center; }
.card + .card { border-top: 1px solid #eee; padding-top: 16px; margin-top: 16px; }
.card .card--icon { flex: 0 0 64px; aspect-ratio: 1 / 1; overflow: hidden; }
.card .card--icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background-color: var(--bg-color); }
.card .card--main { flex-grow: 1; }
.card .card--main .card--name { color: #9f9cbb; font-size: 16px; font-weight: 700; }
.card .card--main .card--time { color: #179296; font-size: 14px; font-weight: 300; }
.card .card--main .card--note { color: #888; font-size: 12px; font-weight: 300; }
.card .card--main .card--status { }
.card .card--main .simple { }
.card .card--main > *:not(:first-child) { margin-top: 4px; }
.card .card--info { }
.card .card--act { }
.card .card--dots { }
/*----------*/
.card.group .card--icon img { border-radius: 8px; }
/*----------*/
.card.event { align-items: normal; }
.card.event .card--icon { flex: 0 0 64px; aspect-ratio: 2 / 3; }
.card.event .card--icon img { border-radius: 8px; }
/*----------*/
.card.c48 { gap: 8px; }
.card.c48 .card--icon { flex: 0 0 48px; }
.card.c48 .card--main .card--name { font-size: 14px; }
.card.c48 .card--main .card--time { font-size: 12px; }
/*----------*/
.card.c32 { gap: 8px; }
.card.c32 .card--icon { flex: 0 0 32px; }
.card.c32 .card--main .card--name { font-size: 12px; }
.card.c32 .card--main .card--time { font-size: 10px; }
/*----------*/
.card.cbig .card--icon { flex: 0 0 128px; }
.card.cbig .card--main .card--status { color: #fff; }
.card.cbig .card--main > *:not(:first-child) { margin-top: 8px; }
@media only screen and (max-width : 512px) {
    .card.cbig { flex-direction: column; }
    .card.cbig .card--icon { flex: 0 0 164px; }
}

/*-------------------------------------------*/

.eventlist { display: grid; grid-template-columns: 160px 1fr; gap: 16px; font-size: 16px; }
.eventlist + .eventlist { border-top: 1px solid #eee; padding-top: 16px; margin-top: 16px; }
.eventlist .eventicon img { max-width: 100%; border-radius: 8px; }
.eventlist .eventinfo { display: flex; flex-direction: column; gap: 8px; }
.eventlist .eventinfo .title { color: #179296; font-size: 1em; font-weight: 700; }
.eventlist .eventinfo .time { color: #67d2d6; font-size: 1em; font-weight: 700; }
.eventlist .eventinfo .town { color: #a2a2a2; font-size: 1em; font-weight: 500; }
.eventlist .eventinfo .note { color: #555; font-size: 0.9em; }
@media screen and (width < 576px) { .eventlist { grid-template-columns: 96px 1fr; font-size: 14px; } }

.ev-icon { position: relative; padding: 8px; border-radius: 8px; background: linear-gradient(90deg, rgb(23, 146, 150) 0%, rgb(194, 240, 214) 50%, rgb(23, 146, 150) 100%); overflow: hidden; }
.ev-icon-inner { position: relative; width: 192px; aspect-ratio: 2 / 3; margin-inline: auto; overflow: hidden; }
.ev-icon-inner img { width: 100%; height: 100%; object-fit: cover; border: 1px solid #aaa; border-radius: 8px; background-color: var(--bg-color); }
.ev-icon-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; filter: blur(5px) brightness(0.9); transform: scale(1.1); }
.ev p { color: #222; font-size: 16px; line-height: 24px; }
.ev_upd_btn{ position: absolute; left: 4px; bottom: 4px; right: 4px; padding: 2px 4px 4px; border-radius: 4px; background-color: azure; color: #000000; font-weight: 500; font-size: 12px; text-align: center; text-transform: lowercase; opacity: 0.7; }

/*-------------------------------------------*/

.post--img { margin-top: 8px; padding: 8px; border-radius: 4px;
    background: linear-gradient(90deg, rgb(23, 146, 150) 0%, rgb(194, 240, 214) 50%, rgb(23, 146, 150) 100%);
}

.post--img.ic2 { display: grid; grid-template-columns: repeat(2, auto); gap: 4px; }
.post--img.ic3 { display: grid; grid-template-columns: repeat(3, auto); gap: 4px; }
.post--img.ic4 { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, 1fr); gap: 4px; }
.post--img.ic5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.post--img:is(.ic2, .ic3, .ic4) a { max-height: 256px; }
.post--img.ic5 a { max-height: 208px; }
.post--img img { border: 1px solid #aaa; }
.post--img.ic1 img { max-width: 100%; max-height: 384px; border-radius: 4px; margin-inline: auto; }
.post--img:is(.ic2, .ic3, .ic4, .ic5) img { width: 100%; height: 100%; border-radius: 4px; object-fit: cover; }
.post--img.ic5 *:nth-child(-n+2) { grid-column: span 3; }
.post--img.ic5 *:nth-child(n+3):nth-child(-n+5) { grid-column: span 2; }
.post--mess { margin-top: 8px; font-size: 14px; overflow-wrap: anywhere; }
.post--time { margin-top: 8px; color:#999; font-size: 12px; text-align: right; }

/*-------------------------------------------*/

.albums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.album { position: relative; }
.album .album-icon { position: absolute; top: 8px; left: 8px; opacity: 0.5; }
.album .album-icon img { width: 24px; height: 24px; }
.album .album-img { width: 100%; aspect-ratio: 2 / 1; background-color: var(--bg-color); }
.album .album-img img { width: 100%; height: 100%; object-fit: cover; }
.album .album-txt { padding: 4px; color: #000; font-size: 12px; }
.album .album-txt span { color: #7b7b7b; }
@media only screen and (max-width : 576px) {
    .albums { grid-template-columns: repeat(2, 1fr); }
}

/*-------------------------------------------*/

.photo-add { display: flex; gap: 8px; align-items: center; border: 1px dotted #ccc; }
.photo-add img { width: 48px; height: 48px; }
.photo-add span { font-size: 12px; }
.pm { column-count: 4; column-gap: 4px; }
.pm-item{ position: relative; break-inside: avoid; margin-bottom: 4px; overflow: hidden; }
.pm-item img { width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
.pm-btns { position: absolute; top: 4px; left: 4px; right: 4px; display: flex; justify-content: space-between; padding: 4px; border-radius: 4px; background-color: rgba(0,0,0,.1); }
.pm-info { position: absolute; bottom: 4px; left: 4px; right: 4px; padding: 4px; border-radius: 4px; background-color: rgba(0,0,0,.2); color: #fff; font-size: 10px; }
@media only screen and (max-width : 640px) { .pm{ column-count: 3; } }
@media only screen and (max-width : 512px) { .pm{ column-count: 2; } }

/*-------------------------------------------*/

.pagelnks{ display: flex; gap: 8px; }

.notises{ position: fixed; top: 0; left: 0; margin-inline: auto; padding: 8px 16px; min-width: 320px; max-width: 640px; }
.notice{ position: relative; margin-bottom: 8px; padding: 2px 8px; border: 1px solid #fff; border-radius: 2px; color: #fff; font-size: 12px; line-height: 24px; box-shadow: 0 0 2px rgba(0,0,0,.3); }
.notice.info{ background-color: #4bca94; }
.notice.error{ background-color: #ff8bae; }
.notice b{ font-weight:600; }
.notice a{ position: absolute; top: 0; right: 0; display: inline-block; width: 24px; line-height: 24px; color: #fff; font-size: 16px; font-weight: 400; text-align: center; text-decoration:none; }

/* ---------- UTILS ---------- */

.cnt-flex{ display: inline-flex; flex-flow: row nowrap; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 4px; background-color: var(--col001); font-size: 10px; }
.cnt-flex img { width: 16px; height: 16px; }

.finds { display: flex; flex-flow: row wrap; gap: 4px; align-items: center;  }
.finds > a.mr { margin-right: auto; }

.grpbtns{ display: flex; flex-flow: row wrap; gap: 4px; }
.grpbtns a { flex-grow: 1; }

.badges { display: flex; flex-flow: row wrap; gap: 4px; }

.badge { display: inline-block; padding: 2px 8px 4px; border-radius: 4px; background-color: #dcfce7; color: #008236; font-size: 10px; font-weight: 500; text-transform: lowercase; }
.badge.badge-red { background-color: #bc6d6d; color: #fff; }
.badge.badge-green { background-color: #dcfce7; color: #008236; }
.badge.badge-yellow { background-color: #e9ec39; color: #111; }

.newimgs { display: flex; flex-flow: row wrap; gap: 4px; }
.nicell { position: relative; }
.nicell a { position: absolute; top: 2px; right: 2px; }
.nicell img { width: 120px; height: 120px; border-radius: 2px; object-fit: cover; }

.line-t-16 { margin-top: 16px; padding-top: 16px; border-top: 1px solid #eee; }
.line-b-16 { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #eee; }
.line-tb-16 { margin-block: 16px; padding-block: 16px; border-block: 1px solid #eee; }

.modal { position: fixed; left: 0; top: 0; z-index: 1; display: none; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);}
.modal .inner { position: relative; width: min(80%, 500px); margin: auto; padding: 16px; background-color: #fefefe; }


.flx-lr { display: flex; align-items: center; justify-content: space-between; }


.info p + p { margin-top: 16px; }
.info ul + p { margin-top: 16px; }
.info ul { list-style: disc; }
.info ul li { margin: 16px; }