@charset "utf-8";

:root {
    --clr-transparent: rgba(255,255,255,0);
    --clr-black: rgb(33, 35, 38);
    --clr-darkgray: rgb(92, 100, 115);
    --clr-midgray: rgb(140, 140, 153);
    --clr-lightgray: rgb(160, 160, 178);
    /*--clr-lightestgray: rgb(200, 202, 206);/**/
    --bkclr-midgray: hsl(240, 8%, 84%); /*hsl(240, 8%, 80%)*/
    --bkclr-lightgray: hsl(240, 12%, 92%); /*hsl(240, 12%, 94%)*/
    --bkclr-lightgray2: hsl(240, 14%, 94%); /*hsl(240, 12%, 94%)*/
    --bkclr-lightestgray: hsl(240, 16%, 97%); /*hsl(240, 22%, 98%)*/
    --bkclr-white2: rgb(249, 251, 249);
    --bkclr-white50: rgba(255, 255, 255, 0.5);
    /*--bkclr-redorange: rgb(255, 126, 52); /**/
    --clr-redorange: rgb(255, 128, 0); /* rgb(255, 128, 0); */
    --bkclr-redorange: rgb(255, 128, 0); /* rgb(255, 128, 0); */
    --clr-darkblue: rgb(36, 84, 140); /* rgb(0, 115, 255) hsl(213, 100, 50) /**/
    --clr-blue: rgb(70, 135, 215); /* rgb(0, 115, 255) hsl(213, 100, 50) /**/
    --clr-midblue: rgb(90, 164, 255); /*hsl(213, 100, 70) /**/
    --clr-lightblue: rgb(102, 171, 255); /*hsl(213, 100, 70) /**/
    --clr-lightestblue: #98c6ff; /*hsl(213, 100, 70) /**/
    /*--bkclr-blue: rgb(60, 148, 255); /*hsl(213, 100, 70) /**/
    /*--bkclr-blue: var(--clr-blue); /**/
    --bkclr-blue: var(--clr-blue); /**/
    /*--bkclr-lightestblue /**/
    /*--bkclr-lightblue: rgb(160, 206, 255); /*hsl(212, 100, 82); /**/
    --bkclr-lightblue: rgb(190, 220, 255); /*hsl(212, 100, 82); /**/
    --bkclr-lightblue25: rgba(190, 220, 255, 0.25);
    --bkclr-lightblue35: rgba(190, 220, 255, 0.35);
    --bkclr-lightblue50: rgba(190, 220, 255, 0.5); /*hsl(212, 100, 82); /**/
    --bkclr-lightblue75: rgba(190, 220, 255, 0.75);
    --bkclr-lightblue80: rgba(190, 220, 255, 0.8);
    --clr-azure: rgb(16, 200, 188);
    --bkclr-azure: rgb(140, 250, 242);
    --bkclr-azure50: rgba(140, 250, 242, 0.5); /* как --bkclr-azure, но 50% */
    --bkclr-azure25: rgba(140, 250, 242, 0.25); /* как --bkclr-azure, но 25% */
    --bkclr-azure-min: rgba(140, 250, 242, 0.1); /* как --bkclr-azure, но 10% */
    --clr-green: rgb(0, 155, 70); /*hsl(147, 100, 30) /**/
    --clr-darkgreen: rgb(0, 130, 60); /*hsl(147, 100, 30) /**/
    --bkclr-lightgreen: rgb(168, 255, 200); 
    --bkclr-lightgreen50: rgba(168, 255, 200, 0.5); 
    --clr-gold: gold;
    --clr-yellow: rgb(255, 200, 0); /*hsl(60, 70, 50); /**/
    --clr-golden: rgb(212, 175, 55); 
    --clr-goldendark: rgb(204, 153, 0);
    --clr-bronze: rgb(170, 108, 57);
    /*--bkclr-yellow: rgb(255, 255, 176); /*hsl(60, 100, 85); /**/
    /*--bkclr-yellow: rgb(255, 235, 125); /* от Gold, но посветлее */
    --bkclr-yellow: rgb(255, 240, 150); /* от Gold, но посветлее */
    --bkclr-yellowlight: rgb(255, 247, 200); /* ещё светлее */
    --bkclr-yellow50: rgba(255, 247, 200, 0.5); /* как yellowlight, но 50% */
    /*--clr-red: rgb(255, 92, 0); /**/
    --clr-red: orangered;
    --bkclr-red: rgb(255, 200, 180);
    --bkclr-red50: rgba(255, 200, 180, 0.5);
    --bkclr-red30: rgba(255, 200, 180, 0.2);

    --clr-gray: var(--clr-darkgray);
    --bkclr-gray: var(--bkclr-lightgray);

    /*--bkclr-notify-top: orangered;/**/
    --bkclr-notify: var(--bkclr-yellow); 
    --bkclr-baloon: white;
    /* --bkclr-today: var(--bkclr-azure); */
    --bkclr-today: var(--bkclr-blue); 
    --bkclr-tomorrow: lightgoldenrodyellow;

    /* default header colors */
    --clr-header: white; 
    --bkclr-header: var(--clr-midgray); 

    --clr-white50: rgba(255, 255, 255, 0.5);
    --clr-white75: rgba(255, 255, 255, 0.25);
}
html.local { --bkclr-header: var(--clr-green); }
html.demo { --bkclr-header: var(--clr-midgray); }
html.gym1543 { --bkclr-header: var(--clr-blue); }
html.development { --bkclr-header: var(--clr-blue); }
/*html.gym1543.ny { --bkclr-header: var(--clr-green); }/**/
html { 
    --bkclr-header2: var(--bkclr-header);   /* initial :== header */
    --bkclr-header2: rgb(90, 164, 255);   /* manual for backward compatibility */
    --bkclr-header2: color-mix(in srgb, var(--bkclr-header), white 16%); 
}
html {
    /* насильно покажем вертикальный скрол, чтобы убрать дерганье при переключении окон */
	/* overflow-y: scroll; */
    /* Заранее резервирует место под скроллбар: но выглядит ужасно(!) - тупо оставляет справа белое поле */
    /* scrollbar-gutter: stable;  */ 
    /* overflow-y: auto; */
    scroll-behavior: smooth;
    /* scroll-padding нужно задавать именно у html (не у body) */
    /* это лишь дефолтные параметры. реальные вычисляются при рендеринге */
    scroll-padding-top: 100px;
    scroll-padding-left: 10rem;
    /* scrollbar-width: thin; */
    /* scrollbar-gutter: stable; */
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: var(--clr-black);
}
html, body, input, select, textarea {
    /*font-family: 'Nunito', 'Tahoma', 'Arial', sans-serif; /**/
    font-family: 'Nunito', sans-serif;
}
html, body {
    quotes: "«" "»";
    background:fixed;
    background-image: url("img/bg1543.png");
    background-size: 200px;
    background-attachment: fixed;
    background-repeat: repeat;
}
title { white-space: pre-line; } /* разрешим переносы строк в тултипах по 
 */
a:not([class]) { text-decoration-skip-ink: auto; }

.waitpointer { cursor:wait; }
.hidden { display: none !important; }

#grid {
    min-height: 100%; /* заполним экран по высоте, чтобы не оставлять пустого места внизу */

    display: grid;
    grid-template-areas: 
        "header"
        "notify"
        "page"
        "footer";
    grid-template-columns: 
        1fr;
    grid-template-rows: 
        auto
        auto
        1fr
        auto;
}

#docview {
    /* заполним экран по высоте, чтобы не оставлять пустого места внизу */
    min-height: 100%; /**/

    display: grid;
    grid-template-areas: 
        "docheader"
        "docbody";
    grid-template-columns: 
        1fr;
    grid-template-rows: 
        auto
        1fr;
}
#docheader { grid-area: docheader; }
#docbody { grid-area: docbody; }

header { 
    grid-area: header;
    display: grid;
    grid-template-areas: "topheader stub";
    /* grid-template-columns: min(100%, calc(100vw - 1.3rem)) 1fr; */
    grid-template-columns: min(100%, calc(100vw - 1rem)) 1fr;
    grid-template-rows: auto;
}
#topheader {
    grid-area: topheader;
    display: grid;
    grid-template-areas: 
        "apppromo apppromo apppromo"
        "toplogo  toptitle topadmin" 
        "navbar   navbar   navbar"
        "navlane  navlane  navlane"
        "notify   notify   notify";
    grid-template-columns: 
        auto 1fr auto;
    grid-template-rows: 
        auto
        auto
        auto
        auto
        auto;
}
#apppromo { grid-area: apppromo; }
#toplogo { grid-area: toplogo; }
#toptitle { grid-area: toptitle; }
nav { grid-area: navbar; }
#navlane { grid-area: navlane; }
#topadmin { grid-area: topadmin; }
.ellipsis {
    -webkit-box-sizing: border-box; /* Для Safari и Chrome */
    -moz-box-sizing: border-box; /* Для Firefox */
    box-sizing: border-box; /* Для IE и Opera */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#toptitle { padding: 2px 0; }
#toptitle { border-bottom: 1px dotted var(--clr-white50); }
#toplogo { line-height: 1; }
.logo-holder {
    width: min-content;
    height: 2em;
    z-index: 1000;
}
img.logo {
    vertical-align: text-top;
    line-height: 1;
    /* width: min(72px, 10vw); */
    width: 80px;
    height: auto;
    padding: 3px;
}
@media (min-width: 800.01px) { #admin_comment { min-width: 10rem; } }
@media (max-width: 800px)    { #toptitle { text-align: left; } }
@media (max-width: 600px)    { img.logo { width: 60px; padding: 2px 4px; } }
@media (max-width: 500px)    { img.logo { width: 30px; padding: 2px 4px; } }

footer {
    grid-area: footer;
    display: grid;
    grid-template-areas: "footerbody stub";
    /* grid-template-columns: min(100%, calc(100vw - 1.3rem)) 1fr; */
    grid-template-columns: min(100%, calc(100vw - 1rem)) 1fr;
    grid-template-rows: auto;
}
@media (max-width: 600px) { 
    header, footer { 
        /* grid-template-columns: min(100%, calc(100vw - 0.2rem)) 1fr; */
        grid-template-columns: min(100%, calc(100vw)) 1fr;
    } 
}
#footerbody { grid-area: footerbody; }

#notify { grid-area:notify; font-size:medium; color:unset;}
#page { grid-area:page; }
#page {
    display: grid;
    grid-auto-columns: auto;
    /* grid-template-columns: auto; */
    grid-column-gap: 1.5rem;
}
#page.maxwidth100 { max-width: min(100%, calc(100vw)); }
.flow-first {
  order: -1;
}
@media (min-width:  800px) { #page.autocol { grid-template-columns: auto auto; } }
@media (min-width: 1100px) { 
    #page.autocol { grid-template-columns: auto auto auto; } 
    /* article[data-col="1"], article[data-col="1"] > div { width: 400px; } */
    /* article[data-col="3"], article[data-col="3"] > div { width: 500px; } */
}
@media (min-width:  800px) { #page.homepage { grid-template-columns: minmax(auto, 60%) auto; } }
@media (min-width: 1100px) { #page.homepage { grid-template-columns: minmax(auto, 30%) auto minmax(auto, 40%); } }

@media (min-width:  800px) { #page.daypage { grid-template-columns: minmax(auto, 50%) auto; } }

#grid.row #page { display: block; padding: 0; margin: 0; }
#grid.row #notify { display: none; visibility: hidden; }
#grid.row header, #grid.row footer { margin: 0 !important; }

header { padding: 0; } 
#footerbody { padding: 0 0.5rem; } /* отступы справа-слева внутри фона */
footer { margin-top: 0.5rem; }
footer { padding-top: 0.2rem; }
footer, #footerbody { background: var(--clr-lightgray); color: var(--clr-header); }
header { background: var(--bkclr-header); color: var(--clr-header); }
html.ny header { background-image: url("img/ny_green.png"); background-size: contain; }
header, nav, footer { text-align: center; }
header h1 { margin: 0; padding: 0; line-height: 1; font-size: larger; font-weight: 800; }
footer a { color: var(--clr-header); padding: 0 0.25rem; }
footer p { margin-top: 0; margin-bottom: 0; }
header {
    position: sticky;
    z-index: 991;
    top: 0;
}
#topheader, #footerbody { position: sticky; left: 0; z-index: 950; }
nav { padding: 2px 0; }
#navlane {
    display: none; visibility: hidden;
    /* border-top: 1px dotted var(--clr-white50); */
    margin: 1px 0;
    color: var(--clr-white50);
    background-color: var(--bkclr-header2);
}
#navlane > div {
    border-top: 1px dotted var(--clr-white50);
}
#navlane.show { display: block; visibility: visible; }

#notify { margin: 1px; padding: 0; }
div.messages { 
    margin: 0;
    padding: 0 0.5rem;
    text-align:center; 
    align-content:center;
    background-color: var(--bkclr-notify);
    font-weight: bold;
    border-radius: 0.5rem;
    color:var(--clr-black);
}
div.messages p { margin: 0.2rem; }

#page {
    padding: 0 1rem;
    margin: auto;  /* мешает работе auto-fill */
    height: 100%;
}
#page.pagenopad { padding: 0; }

.autogridflow {
    display: grid;
    grid-auto-flow: column; /**/
    /*grid-template-columns: repeat(auto-fill, auto); /* с auto не работает */
    gap: 1rem;
}
.autogrid {
    display: grid;
    grid-auto-flow: column; /**/
    /*grid-template-columns: repeat(auto-fit); */ /**/
    /* grid-template-columns: repeat(auto-fill, 300px); /**/
    /*grid-template-columns: repeat(auto-fill, minmax(1fr, 300px)); /**/
    gap: 1rem; /**/
}
@media (max-width: 1000px) { .autogrid { grid-auto-flow: initial; } }
.autogrid .baloon {
    min-width: minmax(min-content, 600px);
}

.autoflow {
    display: grid;
    width: calc(100% - 2rem);
    grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
    grid-template-columns: repeat(auto-fit, minmax(min-content, 540px));
    grid-template-columns: repeat(auto-fit, auto);
    /* grid-template-columns: repeat(auto-fit, 300px); */
    /* justify-content: center; */
    justify-content: space-evenly;
    grid-column-gap: 1rem !important;
    grid-auto-flow: dense;
}


.weekgridholder { max-width: calc(100%); }
@media (min-width: 800px) { .weekgridholder { padding-left: 0.5rem; padding-right: 0.5rem; } }
.weekgrid {
    display: grid;
    grid-auto-flow: row;
    grid-template: repeat(6, auto) / repeat(1, 1fr);
    gap: 0.7rem;
}
@media (min-width: 800px) { .weekgrid { grid-template: repeat(3, auto) / repeat(2, 1fr); grid-auto-flow: column; gap: 1rem; } }
@media (min-width: 1200px) { .weekgrid { grid-template: repeat(2, auto) / repeat(3, 1fr); grid-auto-flow: row; } }

@media (min-width: 800px) {
    .widediff { display:block; }
    .nerrowdiff { display:none; }
}
@media (max-width: 799.99px) {
    .widediff { display:none; }
    .nerrowdiff { display:block; }
}

/******************************************************************************/
/*article { margin: 0 1rem 1rem 1rem; }/**/
article { margin: 0; }

h1 { font-size: x-large; } 
h2 { font-size: xx-large; }
h3 { font-size: x-large; }
h4 { font-size: large; }
h5 { font-size: medium; font-weight: 900; }
h2, h3, h4, h5 { color: var(--clr-black); }
h2, h3, h4, h5 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
/*h4 { padding-left: 1rem; }
h5 { padding-left: 2rem; }/**/
#page h2, #page h3 { text-align: left; }

div.sep03 { height: 0.3rem; width: 0.3rem; }
div.sep05 { height: 0.5rem; width: 0.5rem; }
div.sep07 { height: 0.7rem; }
div.sep1 { height: 1rem; width: 1rem; }
div.sep12 { height: 1.2rem; width: 1.2rem; }
div.sep13 { height: 1.3rem; width: 1.3rem; }
div.sep15 { height: 1.5rem; width: 1.5rem; }
div.sep2 { height: 2rem; width: 2rem; }

.wide100 { width: 100%; }

.bordertop { border-top: 1px solid; }
.borderbottom, tr.borderbottom th, tr.borderbottom td { border-bottom: 1px solid; }
.hborder3 { border-top: 3px solid; border-bottom: 3px solid; }
.topbluebreak { border-top: 12px solid var(--bkclr-lightblue); }

.borderblue { border-color: var(--clr-blue) !important; }
.borderdark { border-color: var(--clr-darkgray) !important; }

.notopborder { border-top: none !important; }
table.notopborder tr { border-top: none !important; }
tr.notopborder td, tr.notopborder th { border-top: 0 none !important; }
.nobtmborder { border-bottom: 0 none !important; }
.nohborder, tr.nohborder td, tr.nohborder th { 
    border-top: 0 none !important;
    border-bottom: 0 none !important; 
}

/* .widthfit, .fitwidth { width:fit-content; max-width: fit-content; } */
.wrap { white-space: normal; }
.nowrap { white-space: nowrap; }
.pointer { cursor: pointer; }
.arrcursor { cursor: default; }
.nopointer { cursor: default !important; }
.clip {
    max-width: 100%;
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    text-overflow: ellipsis; /* Добавляем многоточие */
}
.roundborder {
    border: solid 2px var(--bkclr-midgray);
    border-radius: 0.5rem;
    padding: 0.3rem;
}

.stick     { position: sticky; top: 0; z-index: 500; }
.sticktop  { position: sticky; top: 0; z-index: 500; }
.stick-top { position: sticky; top: 0; z-index: 500; }
.stick-ln2 { position: sticky; top: 0; z-index: 400; }
.stick-rel { position: sticky; top: 0; z-index: 400; }
.stickleft { position: sticky; left: -0.5px; z-index: 350; }

.warning { background:thistle !important; }/**/
.warning1 { background: lightpink !important; }/**/
.warning2 { background: rgb(200, 89, 106); }/**/
.warning3 { background: rgb(200, 89, 106); }/**/

/******************************************************************************/
/* dod events management tables */

.vertical {
    display: inline-block;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.vertical.topdown { transform: rotate(0); }

.autorot p { display: initial; }
@media (max-width: 800px)  {
    .autorot tdd, .autorot p { 
        display: inline-block;
        writing-mode: vertical-rl;
        transform-origin: center;
        /*transform: rotate(180deg); /* без поворота из-за лево-направого порядка чтения*/
        padding: 0;
        margin: 0;
    }
}

/******************************************************************************/
/*.nodec a, a.nodec { text-decoration:none !important; color: unset; }*/
.nodec a, a.nodec { text-decoration: none; }
.nocolor a, a.nocolor { color: unset; }
a.dotgray { text-decoration: underline dotted; color: var(--clr-midgray); }
a.dotted { text-decoration: underline dotted; }
a.dotted:hover, a.dotted:link:active, a.dotted:visited:active { text-decoration: underline; }
a.dotlink, .dotlink a { 
    --webkit-text-decoration-style: dotted !important; 
    text-decoration-style: dotted !important; 
    color: unset; 
}
a.nodec:hover, .nodec a:hover, 
a.dotlink:hover, .dotlink a:hover, 
a.dotlink:active, .dotlink a:link:active, 
a.dotlink:visited, .dotlink a:visited:active, 
a.dotgray:hover, a.dotgray:active, a.dotgray:visited  { text-decoration: underline !important; }
a.nohover:hover, a.nohover:active, a.nohover:visited,
.nodec.nohover a:hover, .nodec.nohover a:active, .nodec.nohover a:visited,
a.nodec.nohover:hover, a.nodec.nohover:active, a.nodec.nohover:visited { text-decoration: none !important; }

a.dothotlink, .dothotlink a { 
    --webkit-text-decoration-style: underline !important; 
    text-decoration-style: underline !important; 
    color: unset; 
}
a.dothotlink:hover, .dothotlink a:hover, 
a.dothotlink:active, .dothotlink a:link:active,
a.dothotlink:visited, .dothotlink a:visited:active  { 
    --webkit-text-decoration-style: dotted !important; 
    text-decoration: dotted !important; 
}

a.dothover:hover, a.dothover:active, a.dothover:visited,
.nodec.dothover a:hover, .nodec.dothover a:active, .nodec.dothover a:visited,
a.nodec.dothover:hover, a.nodec.dothover:active, a.nodec.dothover:visited { text-decoration: underline dotted !important; }

/* ver 2 */
a.brdhover { text-decoration: none !important; } /**/
a.brdhover > div {
    padding: 4px;
    border-radius: 0.6rem;
    background-color: var(--bkclr-lightgray);
    border: 2px solid var(--clr-transparent);
}
a.brdhover > i {
    padding: 2px;
    border-radius: 0.4rem;
    border: 2px solid var(--clr-transparent);
}
a.brdhover { --clr-border: var(--clr-blue); }
a.brdhover.red { --clr-border: var(--clr-red); }
a.brdhover div, a.brdhover i { justify-self: center; }
a.brdhover:hover > div, a.brdhover:hover > i { border-color: var(--clr-border); }
a.brdhover:hover > i { background-color: white; }

/********************************************************************/
a.invhover { 
    --clr-text: var(--clr-blue);
    color: var(--clr-text);
    padding: 1px 4px;
    border-radius: 0.3rem;
    background-color: transparent;
    text-decoration: none !important; 
}
a.invhover.icon { 
    padding: 3px 4px;
    padding-bottom: 0;
}
a.invhover:hover { 
    background-color: var(--clr-text);
    color: white;
}

/********************************************************************/
a.bluehover { text-decoration: none; }
a.bluehover:hover { color: var(--clr-blue); text-decoration: none !important; }
a.bluehover:hover > i { color: var(--clr-blue); }

/******************************************************************************/
.hlane { display:grid; grid-auto-flow:column; padding:0; gap:0; }
.hlane.gap1 { gap:1rem; }
.hlane.gap05 { gap:0.5rem; }
.hlane.gap03 { gap:0.3rem; }
.hlane.gap01 { gap:0.1rem; }
/* .hlane { align-items:stretch; align-content:stretch; } это и так дефолт. можно убрать */
.hlane.vcenter { align-items:center; /*align-content: center; vertical-align: middle;*/ }
.hlane.center { align-items:center; /*align-content:center;*/ justify-items:center; }
.hlane.top { align-items:start; /*vertical-align: top;*/ }
.hlane.baseline { align-items:baseline; }
.hlane.auto { align-items:unset; align-content:unset; }
.hlane.justify { justify-content:space-between; }
/* элементы внутри hlane */
.hlane .vcenter { align-self:center; }
.hlane .center { align-self:center; justify-self:center; }
.hlane .hcenter { justify-self:center; text-align:center; }
.hlane .right { justify-self:right; text-align:right; }
.hlane .left { justify-self:left; text-align:left; }
.hlane.sep div + .hlane.sep div { margin-left: 1rem; }
.hright, .jright { display: flex; justify-content: flex-end; }
/* test */
/*.vcenter { align-self: center; align-items: center; align-items: center; } /**/
/*.vcenter { display: table-cell; align-self: center; } /**/
/*.vcenter-container { align-self: center; align-content: center; } /**/
.hcenterself { justify-self: center; }

.left { text-align: left; }
.right { text-align: right; }
/* .hcenter  { text-align: center; max-width: -moz-fit-content; max-width: fit-content; margin-left: auto; margin-right: auto; } */
.hcenter { text-align: center; justify-content: center; }

.xbold { font-weight:900; }
.bold { font-weight:bold; }
.bolder { font-weight:bolder; }
.semibold { font-weight:600; }
.nobold, .normalwidth { font-weight:normal; }
.thiner { font-weight:300; }
.thin, .lighter { font-weight:lighter; }
.thin-imp { font-weight:lighter !important; }
.condensed { font-stretch:semi-condensed; }
.expanded { font-stretch:semi-expanded; }
.i, .italic { font-style:italic; }
.normalstyle { font-style:normal; }
.s, .strike { text-decoration:line-through; }
.strike1 { text-decoration:line-through 1px; }
.strike1red { text-decoration:line-through 1px red; }
.u, .underline { text-decoration: underline; }
.underline1 { text-decoration: underline 1px; }
.overline { text-decoration: overline; }
.overunderline { text-decoration: overline underline; }
.opacno { opacity: initial; }
.opac0 { opacity: 0%; }
.opac10 { opacity: 10%; }
.opac20 { opacity: 20%; }
.opac30 { opacity: 30%; }
.opac40 { opacity: 40%; }
.opac50 { opacity: 50%; }
.opac60 { opacity: 60%; }
.opac70 { opacity: 70%; }
.opac80 { opacity: 80%; }
.opac90 { opacity: 90%; }
.opac100 { opacity: 100%; }
.ehidden { 
    background-color: var(--bkclr-red50) !important; 
    opacity: 75%; 
}

.rot90 { display: inline-block; transform: rotate(90deg); }
.rot180 { display: inline-block; transform: rotate(180deg); }
.rot270 { display: inline-block; transform: rotate(270deg); }
.hmir { display: inline-block; transform: matrix(-1,0,0,1,0,0); }
.vmir { display: inline-block; transform: matrix(1,0,0,-1,0,0); }
.vmir_ny { display: inline-block; transform: matrix(0.9,0,0,-1.2,0,0); }
.scale2 { transform: scale(2); }
.scale16 { transform: scale(1.6); }
.scale15 { transform: scale(1.5); }
.scale14 { transform: scale(1.4); }
.scale09 { transform: scale(0.9); }
.scale085 { transform: scale(0.85); }
.scale08 { transform: scale(0.8); }
.scale07 { transform: scale(0.7); }
.scale06 { transform: scale(0.6); }
.scale05 { transform: scale(0.5); }
.scale033 { transform: scale(0.33); }
.scale025 { transform: scale(0.25); }
.huge, .xxlarge { font-size: xx-large; }
.xlarge { font-size: x-large; }
.large { font-size: large; }
.larger {font-size: larger;}
.medium, .normalsize { font-size: medium !important; }
.smaller { font-size: smaller; }
.smaller-imp { font-size: smaller !important; }
.small { font-size: small; }
.xsmall { font-size: x-small; }
.xxsmall { font-size: xx-small; }
.unsize { font-size: unset; }

.bklightestgray { background-color: var(--bkclr-lightestgray) !important; }
.bknone  { background: none !important; }
.bkblack { background-color: var(--clr-black); }
.bkblack100 { background-color: black; }
.bkdark, .bkdarkgray { background-color: var(--clr-darkgray); }
.bkmidgray2 { background-color: var(--clr-midgray); }
.bkmidgray  { background-color: var(--bkclr-midgray); }
.bklightgray { background-color: var(--bkclr-lightgray); }
.bklightgray2 { background-color: var(--bkclr-lightgray2); }
.bklightgray-imp { background-color: var(--bkclr-lightgray) !important; }
.bkwhite { background-color: white; }
.bkblue { background-color: var(--bkclr-blue); }
.bkblue-imp { background-color: var(--bkclr-blue) !important; }
/*.bkmidblue { background-color: var(--clr-midblue); } /**/
.bklightblue, .bkbluelight { background-color: var(--bkclr-lightblue); }
.bklightblue-imp, .bklightblue-imp, .bkbluelight-imp { background-color: var(--bkclr-lightblue) !important; }
.bklightblue50, .bkbluelight50 { background-color: var(--bkclr-lightblue50) !important; }
.bkazure { background-color: var(--bkclr-azure); }
.bkazure50 { background-color: var(--bkclr-azure50); }
.bkazure25 { background-color: var(--bkclr-azure25); }
.bkazure-min { background-color: var(--bkclr-azure-min); }
.bkgreen { background-color: var(--bkclr-lightgreen); }
.bkgreen50 { background-color: var(--bkclr-lightgreen50); }
.bkgreen-imp { background-color: var(--bkclr-lightgreen) !important; }
.bkyellow { background-color: var(--bkclr-yellow); }
.bkyellow-imp { background-color: var(--bkclr-yellow) !important; }
.bkyellow50 { background-color: var(--bkclr-yellow50); }
.bkyellow50-imp { background-color: var(--bkclr-yellow50) !important; }
.bkyellow-imp { background-color: var(--bkclr-yellow) !important; }
.bkyellowlight, .bklightyellow { background-color: var(--bkclr-yellowlight); }
.bklightyellow-imp, .bkyellowlight-imp { background-color: var(--bkclr-yellowlight) !important; }
.bkred { background-color: var(--bkclr-red); }
.bkred50 { background-color: var(--bkclr-red50); }
.bkred30 { background-color: var(--bkclr-red30); }
.bkcoral { background-color: lightcoral; }
.bkorange { background-color: var(--bkclr-redorange);}
/* .bkorange { background-color: orangered;} */
/*.bknotifytop { background-color: var(--bkclr-notify-top); } /**/
.clrheader { color: var(--clr-header); }
.clrheaderbk { color: var(--bkclr-header); }
.bkheader { background-color: var(--bkclr-header); }
.bkheader2 { background-color: var(--bkclr-header2); }
.bktips { background-color: cornsilk; }
/* .white2 { color: var(--clr-white2); } */
.bkwhite2 { background-color: var(--bkclr-white2); }
.bkwhite50 { background-color: var(--bkclr-white50); }


.tips, .lefttips { background-color: cornsilk; color:var(--clr-black); }
.tips, .lefttips { font-size: medium; font-weight: normal; text-align: left; }
.tips, .lefttips { z-index: 1000 !important; }
.tips.smaller { font-size: smaller; }
.tips.small { font-size: small; }
.tips { margin-left: 2rem; } /**/
.tips.left0 { margin-left: 0; }
.tips.left1 { margin-left: 1rem; }
.tips.center { margin-left: 10rem; }
.tips.left3 { margin-left: -3rem !important; }
.tips.toproom { margin-top: -5.5rem !important; }
/*.lefttips { right: 30%; } /**/
.lefttips { margin-left: -5rem; } /**/
.lefttips.left10 { margin-left: -10rem; }
.lefttips.left12 { margin-left: -12rem; }
.lefttips.left15 { margin-left: -15rem; }
.tips.toright { right: 0; } 

.bktoday { background-color: var(--bkclr-today) !important; }
.bkholiday { background-color: var(--bkclr-azure) !important; }
.bkholiday50 { background-color: var(--bkclr-azure50) !important; }
.bklaneazure { background: linear-gradient(90deg, var(--bkclr-azure) 0.3rem, transparent 0.3rem); }
.bklanehot { background: linear-gradient(90deg, var(--bkclr-redorange) 0.3rem, transparent 0.3rem); }
.bklanehotwhite { background: linear-gradient(90deg, var(--bkclr-redorange) 0.3rem, white 0.3rem, white 100%); }
.bklaneheader { background: linear-gradient(90deg, var(--bkclr-header) 0.3rem, transparent 0.3rem); }
.bklanered { background: linear-gradient(90deg, var(--bkclr-red) 0.3rem, transparent 0.3rem); }
.bklanegreen { background: linear-gradient(90deg, var(--bkclr-lightgreen) 0.3rem, transparent 0.3rem); }
.bklanetoday { background: linear-gradient(90deg, var(--bkclr-today) 0.3rem, transparent 0.3rem); }
.bklanetomorrow { background: linear-gradient(90deg, var(--bkclr-tomorrow) 0.3rem, transparent 0.3rem); }
.ttscanceled { 
    text-decoration: line-through red 0.5pt; 
    /* for iOS compatibility */
    text-decoration-line: line-through;
    text-decoration-thickness: 0.5pt;
    text-decoration-color: red;
    color: var(--clr-lightgray);
    background-color: var(--bkclr-red50); 
}
.redstrike { 
    text-decoration: line-through red 0.5pt; 
    text-decoration-line: line-through;
    text-decoration-thickness: 0.5pt;
    text-decoration-color: red;
    color: var(--bkclr-redorange);
    opacity: 50%;
}

.bklanetopgray { background: linear-gradient(180deg, var(--bkclr-lightgray) 0.1rem, transparent 0.4rem); }
.bklanerightgray { background: linear-gradient(270deg, var(--bkclr-lightgray) 0.1rem, transparent 0.4rem); }
.bklanetips { background: linear-gradient(270deg, var(--bkclr-today) 0.1rem, transparent 0.4rem); }
.bklanedaytips { background: linear-gradient(90deg, var(--bkclr-azure50) 0%, var(--bkclr-azure50) 100%); }

.bkdayevent { background: linear-gradient(120deg, var(--bkclr-redorange) 0.3rem, transparent 1rem); }
td .bkdayevent { background: linear-gradient(120deg, var(--bkclr-redorange) 0.4rem, transparent 0.7rem); }
.bkdayevent { border: solid 1px var(--bkclr-redorange); }
.bkdayevent { padding: 0.5rem 1rem; text-wrap: initial; }
.bkdayevent > div + div { margin-top: 0.3rem; }

.bkslotevent { background: linear-gradient(120deg, var(--bkclr-header) 0.5rem, transparent 1rem); }
td.bkslotevent, td > .bkslotevent { background: linear-gradient(120deg, var(--bkclr-header) 0.4rem, transparent 0.7rem); }
/* td.bkslotevent { background: linear-gradient(120deg, var(--bkclr-header) 0.3rem, transparent 0.5rem); } */
.bkslotevent { border: solid 1px var(--bkclr-header); }
.bkslotevent { padding: 0.3rem 1rem; text-wrap: initial; }
td > .bkslotevent { padding: 0.3rem 0.6rem; margin: 3px; }
td.bkslotevent { padding: 0.3rem 1rem !important; _margin: 0; }
td.bkslotevent > div { margin: 0; }
td > .bkslotevent > div { line-height: normal; }
td > .bkslotevent > .hlane.opt { display: block; }
td > .bkslotevent > .hlane.opt > div { text-align: center; }

.bkclean { background: linear-gradient(-60deg, var(--clr-green) 0.25rem, transparent 0.4rem); }

.bklanedayevent { background: linear-gradient(90deg, var(--bkclr-today) 0.3rem, transparent 0.3rem); }
.bklanedayevent[active] { 
    background: 
        linear-gradient(90deg, var(--bkclr-today) 0.3rem, transparent 0.3rem), 
        linear-gradient(90deg, var(--bkclr-lightblue) 0%, var(--bkclr-lightblue) 100%);
}

.dorow { border: 1px solid var(--bkclr-midgray); }
.dorow[active] { background: var(--bkclr-lightblue) !important; }
.bklanedo { background: linear-gradient(90deg, var(--bkclr-midgray) 0.3rem, transparent 0.3rem); padding-left: 0.3rem; }
.wide100_do { width: calc(100% - 0.3rem); }
@media (max-width: 599.99px) { 
    .bklanetoday { background: linear-gradient(90deg, var(--bkclr-today) 0.3rem, transparent 0.3rem); }
    .bklanetomorrow { background: linear-gradient(90deg, var(--bkclr-tomorrow) 0.3rem, transparent 0.3rem); }
}
@media (max-width: 359.99px) { 
    .bklanetoday { background: linear-gradient(90deg, var(--bkclr-today) 0.3rem, transparent 0.3rem); }
    .bklanetomorrow { background: linear-gradient(90deg, var(--bkclr-tomorrow) 0.2rem, transparent 0.2rem); }
}

.bk_success { background-color: var(--bkclr-lightgreen) !important; }
.bk_failed { background-color: var(--bkclr-redorange) !important; }

.msgreen { color: var(--clr-green); }
.msgred { color: var(--clr-red); }

.lightestgray { color: var(--bkclr-lightgray); } /**/
.lightestgray { color: var(--bkclr-midgray); } 
.lightgray { color: var(--clr-lightgray); }
.midgray { color: var(--clr-midgray); }
.darkgray { color: var(--clr-darkgray); }
.black { color: var(--clr-black); }
.blue { color: var(--clr-blue); }
.darkblue { color: var(--clr-darkblue); }
.azure { color: var(--clr-azure); }
.green { color: var(--clr-green); }
.darkgreen { color: var(--clr-darkgreen); }
.yellow { color: var(--clr-yellow); }
.yellowlight { color: var(--bkclr-yellow); }
.golden { color:var(--clr-golden); }
.goldendark { color:var(--clr-goldendark); }
.bronze { color:var(--clr-bronze); }
.khaki { color: khaki; }
.lightestblue { color: var(--clr-lightestblue); }
.lightblue { color: var(--clr-lightblue); }
.midblue { color: var(--clr-midblue); }
.lightgreen { color: var(--bkclr-lightgreen); }
.red { color: var(--clr-red); }
.white { color: white; }
.snow { color: snow; }
.orange { color: orange; }
.orangered, .redorange { color: var(--clr-redorange); }
.gold { color: gold; }
.hide { visibility: hidden; }

.autosep { margin: unset; }
.autosep + .autosep { margin-top: 1rem; } /**/
.autosep07 + .autosep07 { margin-top: 0.7rem; } /**/
.autosep05 + .autosep05 { margin-top: 0.5rem; } /**/

.toprightround { border-radius: 0 0.4rem 0 0; }
.topround { border-radius: 0.4rem 0.4rem 0 0; }
.topround03 { border-radius: 0.3rem 0.3rem 0 0; }

.maxcolw25 { max-width: 25rem; }
.maxcolw30 { max-width: 30rem; }
.maxw50 { max-width: 50rem; }
/* для 2-колоночной верстки -- ограничиваем ширину первой колонки только явно */
@media (max-width: 1100px) { 
    /* */
}
/* для 1-колоночной верстки -- не ограничиваем ширину первой колонки */
@media (max-width: 800px) { 
    .maxcolw25 { max-width: initial; }
}

.lostcolumn { 
    max-width: clamp(100px, 100%, 500px);
    margin: 0.5rem auto;
}
.lostpreview {
    max-width: 75px;
    max-height: 75px;
    margin: 0;
    border-radius: 0.4rem;
}
.lostpreview + .lostpreview { margin-left: 0.3rem; }
.lostpreview img {
    max-width: 100%;
    max-height: 75px;
    object-fit: contain;
    border-radius: 0.3rem;
}
.lostpreview img:hover { 
    box-shadow: 
        2px 2px 1px var(--clr-lightblue),
        -2px 2px 1px var(--clr-lightblue),
        2px -2px 1px var(--clr-lightblue),
        -2px -2px 1px var(--clr-lightblue);
}

.loststamp {
    font-weight: 900;
    color: red;
    --clr-shadow: white;
    text-shadow: var(--clr-shadow) 0.5px 0.5px 0, var(--clr-shadow) -0.5px -0.5px 0, 
                 var(--clr-shadow) -0.5px 0.5px 0, var(--clr-shadow) 0.5px -0.5px 0;
}

.redshadow { --clr-shadow: red; }
.blueshadow { --clr-shadow: var(--bkclr-header); }
.blackshadow { --clr-shadow: var(--clr-black); }
.whiteshadow { --clr-shadow: white; }
.redshadow, .blueshadow, .blackshadow, .whiteshadow {
    text-shadow: var(--clr-shadow) 0.5px 0.5px 0, var(--clr-shadow) -0.5px -0.5px 0, 
                 var(--clr-shadow) -0.5px 0.5px 0, var(--clr-shadow) 0.5px -0.5px 0;
}
.redshadow.px03, .blueshadow.px03, .blackshadow.px03, .whiteshadow.px03 { 
    /* на мелком тексте не очень помогает -- сверху не отрисовывается */
    text-shadow: var(--clr-shadow) 0.3px 0.3px 0, var(--clr-shadow) -0.3px -0.3px 0, 
                 var(--clr-shadow) -0.3px 0.3px 0, var(--clr-shadow) 0.3px -0.3px 0;
}
.redshadow.px07, .blueshadow.px07, .blackshadow.px07, .whiteshadow.px07 { 
    /* на мелком тексте не очень помогает -- сверху не отрисовывается */
    text-shadow: var(--clr-shadow) 0.7px 0.7px 0, var(--clr-shadow) -0.7px -0.7px 0, 
                 var(--clr-shadow) -0.7px 0.7px 0, var(--clr-shadow) 0.7px -0.7px 0;
}
.redshadow.px1, .blueshadow.px1, .blackshadow.px1, .whiteshadow.px1 { 
    text-shadow: var(--clr-shadow) 1px 1px 0, var(--clr-shadow) -1px -1px 0, 
                 var(--clr-shadow) -1px 1px 0, var(--clr-shadow) 1px -1px 0;
}
.redshadow.px2, .blueshadow.px2, .blackshadow.px2, .whiteshadow.px2 { 
    text-shadow: var(--clr-shadow) 2px 2px 0, var(--clr-shadow) -2px -2px 0, 
                 var(--clr-shadow) -2px 2px 0, var(--clr-shadow) 2px -2px 0;
}
.outline-blue { --clr-outline: var(--clr-blue); }
.outline-black { --clr-outline: var(--clr-black); }
.outline-white { --clr-outline: var(--clr-white); }
.outline-blue, .outline-black, .outline-white { 
    filter: 
        drop-shadow(1px 0 0 var(--clr-outline)) 
        drop-shadow(-1px 0 0 var(--clr-outline)) 
        drop-shadow(0 1px 0 var(--clr-outline)) 
        drop-shadow(0 -1px 0 var(--clr-outline));
}

.limwidth200 { max-width: clamp(100px, 100%, 200px); } /**/
.limwidth300 { max-width: clamp(100px, 100%, 300px); } /**/
.limwidth400 { max-width: clamp(100px, 100%, 400px); } /**/
.limwidth500 { max-width: clamp(100px, 100%, 500px); } /**/
.limwidth600 { max-width: clamp(100px, 100%, 600px); } /**/
.limwidth700 { max-width: clamp(100px, 100%, 700px); } /**/
.limwidth800 { max-width: clamp(100px, 100%, 800px); } /**/

.fotoimg { width: 100%; }
.overholder, .oh { position: relative; }
.overitem, .oi { position: absolute; visibility: hidden; }
.overitem.fixed, .oi.fixed { position: absolute; visibility: visible; }
.overholder:hover .overitem.auto { visibility: visible; }
.oh:hover .oi { visibility: visible; }
.oi.bar { 
    background-color: var(--bkclr-lightestgray);
    /* border: 0.5px solid var(--bkclr-lightgray); */
    border: 0.5px solid var(--bkclr-midgray);
    border-radius: 0.2rem; border-width: 0.5px;
    padding: 2px;
}
.top-left { position: absolute; top: 0; left: 0; }
.top-right { position: absolute; top: 0; right: 0; }
.bottom-right { position: absolute; bottom: 0; right: 0; }
.bottom-right-1px { position: absolute; bottom: 1px; right: 1px; }
.bottom-right-01 { position: absolute; bottom: 0.1rem; right: 0.1rem; }
.bottom-right-07 { position: absolute; bottom: 0.7rem; right: 0.7rem; }
.abs-r0    { position: absolute; right: 0; } 
.abs-r1    { position: absolute; right: 1rem; } 
.abs-r15   { position: absolute; right: 1.5rem; } 
.b0r1   { position: absolute; bottom: 0; right: 1rem; }
.t0r15  { position: absolute; top: 0; right: 1.5rem; }
.b0r15  { position: absolute; bottom: 0; right: 1.5rem; }
.b0r2   { position: absolute; bottom: 0; right: 2rem; }
.b1r1   { position: absolute; bottom: 1rem; right: 1rem; }
.b1r15  { position: absolute; bottom: 1rem; right: 1.5rem; }
.b1r2   { position: absolute; bottom: 1rem; right: 2rem; }

.topborder, .topborder1 { border-top: 1px solid var(--bkclr-midgray); }
td.topborder2 { border-top: 2px solid var(--clr-midgray) !important; }
td.btmborder2 { border-bottom: 2px solid var(--clr-midgray) !important; }
td.leftborder2 { border-left: 2px solid var(--clr-midgray) !important; }
td.nolborder, td.noleftborder { border-left: none !important; }
.topborder2dark { border-top: 2px solid var(--clr-darkgray) !important; }
.btmborder, .bottomborder { border-bottom: 1px solid var(--bkclr-midgray); }
.topborder.dotted { border-top: 1px dotted var(--bkclr-midgray); }
.btmborder.dotted { border-bottom: 1px dotted var(--bkclr-midgray); }
.vborder { border-left: 1px solid var(--bkclr-midgray); border-right: 1px solid var(--bkclr-midgray); }
.hborder { border-top: 1px solid var(--bkclr-midgray); border-bottom: 1px solid var(--bkclr-midgray); }
.noborder { border: 0 none !important; border-width: 0 !important; }
.hideborder { border-color: transparent !important; }
.border05 { border: 0.5px solid var(--bkclr-midgray); }
.border, .border1 { border: 1px solid var(--bkclr-midgray); }
.border2 { border: 2px solid var(--bkclr-midgray); }
.border3 { border: 3px solid var(--bkclr-midgray); }
.exborder, .exborder1 { border: 1px solid var(--bkclr-midgray); }
.exborder2 { border: 2px solid var(--bkclr-midgray); }
.border1light { border: 1px solid var(--bkclr-lightgray); }
.border2light { border: 2px solid var(--bkclr-lightgray); }
.border3light { border: 3px solid var(--bkclr-lightgray); }
.roundlight { border-radius: 0.2rem; border: 1pt solid var(--bkclr-midgray);}
.roundbox02 { border-radius: 0.2rem; border-width: 1px; }
.roundbox03 { border-radius: 0.3rem; }
.roundbox05 { border-radius: 0.5rem; }
.roundbox1, .roundbox { border-radius: 1rem; }
.roundbox03top { border-radius: 0.3rem 0.3rem 0 0; }
.roundbox04top { border-radius: 0.4rem 0.4rem 0 0; }
.roundbox05top { border-radius: 0.5rem 0.5rem 0 0; }
.shadow { box-shadow: 0.2rem 0.2rem 3px rgba(122,122,122,0.5); }
.shadow-right { box-shadow: 0.2rem 0 3px rgba(122,122,122,0.5); }

.up01 { vertical-align: 0.1rem; }
.up02 { vertical-align: 0.2rem; }
.up03 { vertical-align: 0.3rem; }
.down01 { vertical-align: -0.1rem; }
.down02 { vertical-align: -0.2rem; }
.down03 { vertical-align: -0.3rem; }

.hide { display: none; }

/******************************************************************************/
.baloon {
    background-color: var(--bkclr-baloon);
    border: solid 1px var(--bkclr-baloon);
    border-radius: 0.4rem;
    padding: 1rem;
    margin: 0;
    box-shadow: 0.2rem 0.2rem 3px rgba(122,122,122,0.5);
}
.baloon.bkwhite50 {
    background-color: var(--bkclr-white50);
}
@media (max-width: 600px) { article { max-width: 100%; } } /*???*/
@media (max-width: 500px) { #page { padding: 0 0.8rem; } .baloon { padding: 0.8rem; } }
@media (max-width: 450px) { #page { padding: 0 0.7rem; } .baloon { padding: 0.7rem; } }
@media (max-width: 410px) { #page { padding: 0 0.6rem; } .baloon { padding: 0.6rem; } }
@media (max-width: 375px) { #page { padding: 0 0.5rem; } .baloon { padding: 0.5rem; } }
@media (max-width: 345px) { #page { padding: 0 0.4rem; } .baloon { padding: 0.4rem; } }
@media (max-width: 320px) { #page { padding: 0 0.3rem; } .baloon { padding: 0.3rem; } }

@media (max-width: 360px)    { .tt-wide { display: none; } .tt-nerrow { display: initial; } }
@media (min-width: 360.01px) { .tt-wide { display: table-cell; } .tt-nerrow { display: none; } }

@media (max-width: 800px)    { .wide800 { display: none; } .nerrow800 { display: block; } }
@media (min-width: 800.01px) { .wide800 { display: block; } .nerrow800 { display: none; } }
@media (max-width: 600px)    { .wide600 { display: none; } }
@media (min-width: 600.01px) { .wide600 { display: initial; } }
@media (max-width: 400px)    { .wide400 { display: none; } }
@media (min-width: 400.01px) { .wide400 { display: initial; } }

/********************************************************************/

.headerinvert { 
    color: var(--bkclr-header);
    background-color: var(--clr-header);
}
.notifytop { 
    color: var(--bkclr-header);
    background-color: var(--clr-header);
    border-radius: 0.5rem; 
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.notify { 
    text-align: center;
    margin: auto;
    margin-top: 0.5rem;
    padding: 0.3rem 0.5rem; /* Поля вокруг текста */
    border-radius: 0.5rem; /* Скругляем уголки */
    background: var(--bkclr-notify);
    line-height: 1; /**/    
}

/********************************************************************/

.large label { font-size: large; }
.large input { font-size: large; }
.large select { font-size: large; }
.medium select { font-size: medium; }
.large button { font-size: large; }
.large textarea { font-size: large; }
textarea.noresize { resize: none; }
.event-icon { 
    /* width: 50px;
    padding-right: 4px; */
    text-align: center;
    font-size: xx-large;
    font-weight: bold;
    line-height: 1;
    width: calc(36px + 0.5rem); 
    padding: 0;
    padding-right: 0.5rem;
}

article > h2 { margin: 0; }
article > div h2 { margin: 0; }
article > h3 { margin: 0; }
article > div h3 { margin: 0; }
article > h4 { margin: 0; }
article > div h4 { margin: 0; }
article > h5 { margin: 0; }
article > div h5 { margin: 0; }


.blink1 { animation: blink 1s infinite; } 
.blink2 { animation: blink 2s infinite; } 
@keyframes blink {
    0% { opacity: 1; /* Непрозрачный текст */ }
    50% { opacity: 0; /* Прозрачный текст */ }
    100% { opacity: 1; /* Непрозрачный текст */ }
}

code { font-size: large; }

/* announcements */
.an-date { color: var(--clr-midgray); font-weight: 900; padding-left: 0.5rem; }
.an-time { color: var(--clr-midgray); font-weight: 400; }
.an-ext  { color: var(--clr-darkgray); font-weight: 600; }
.ev-pre  { color: var(--clr-darkgray); }
.an-pre  { color: var(--clr-blue); }
.an-text { color: var(--clr-black); font-weight: bold; }
.an-post { color: var(--clr-darkgray); }
.an-link { padding-left: 0.5rem; text-transform: none; }

/* hr.inline {
    display: inline;
    align-self: baseline;
    width: 100%;
} */
hr.dotted {
    border: none;
    border-top: 1px dotted var(--clr-midgray);
    color: transparent;
    background-color: transparent;
    height: 0px;
}
hr.dotted.break { border-top: 0.4rem dotted var(--bkclr-midgray); }
hr.lightgray { border-color: var(--clr-lightgray); }
hr.white { border-color: white !important; }
hr.thin { margin-top: 2px; margin-bottom: 2px; padding: 0; }

/* Стили для li, которые НЕ внутри ol или ul */
li:not(ol > li):not(ul > li) { margin-left: 1.5rem; }

/********************************************************************/
.ani03 { animation: 0.3s show ease; }
.ani05 { animation: 0.5s show ease; }
.ani07 { animation: 0.7s show ease; }
.ani1  { animation: 1s show ease; }
.ani2  { animation: 2s show ease; }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }

dialog {
    padding: 0.3rem;
    border-radius: 0.6rem;
    border: 1px solid var(--clr-header);
    box-shadow: 0.2rem 0.2rem 5px rgba(122,122,122,0.5);
    color: var(--clr-header);
    background-color: var(--bkclr-header);
    /* font-size: larger; */
    animation: 0.3s show ease;
    /* прячем скрол, который может появляться при возникновении подсказок */
    overflow-x: hidden;
    /* скрываем рамку фокуса */ 
    outline: none;  
}

.dlgtitle {
    padding: 0.3rem;
    margin: -0.3rem;
    margin-bottom: 0;
    border: none;
    border-bottom: none;
    background-color: var(--bkclr-header);
    position: sticky; top: -0.3rem; z-index: 900;
}

.tablist {
    display: grid; 
    grid-template-columns: auto 1fr; 
    grid-auto-rows: auto; 
    gap: 0.2rem 0.5rem;
    align-items: center;
}
/********************************************************************/
/* PWA title */
.back-btn {
    /* Make sure the `div` stays there, even when scrolling. */
    position: fixed;
    /* Use the environment variable for the left anchoring with a fallback. */
    left: env(titlebar-area-x, 0);
    /* Use the environment variable for the top anchoring with a fallback. */
    top: env(titlebar-area-y, 0);
    /* Use the environment variable for setting the width with a fallback. */
    width: env(titlebar-area-width, 100%);
    /* Use the environment variable for setting the height with a fallback. */
    height: env(titlebar-area-height, 33px);
}

/* .wmin { max-width: min-content; width: 1rem; } */
.minfit { width: 1rem; }
/* .maxwidthfit { max-width: fit-content; } */
.widthfit { width: fit-content; }
.widthmin { width: min-content; }
.widthmax { width: max-content; }
.w1 { width: 1rem; max-width: 1rem; }
.w2 { width: 2rem; max-width: 2rem; }
.w3 { width: 3rem; max-width: 3rem; }

.szmin07 { min-height: 0.7rem; min-width: 0.7rem;}
.szmin08 { min-height: 0.8rem; min-width: 0.8rem;}
.szmin09 { min-height: 0.9rem; min-width: 0.9rem;}
.szmin10 { min-height: 1rem; min-width: 1rem;}
.hmin10 { min-height: 1rem; }
.hmin12 { min-height: 1.2rem; }
.hmin13 { min-height: 1.3rem; }
.hmin15 { min-height: 1.5rem; }
.hmin20 { min-height: 2rem; }
.wmin10 { min-width: 1rem; }
.wmin12 { min-width: 1.2rem; }
.wmin13 { min-width: 1.3rem; }
.wmin15, .wmin15auto { min-width: 1.5rem; }
.wmin15 { min-width: 1.5rem; }
.wmin17 { min-width: 1.7rem; }
.wmin18 { min-width: 1.8rem; }
.wmin20 { min-width: 2rem; }
.maxwidth50 { max-width: 50rem; }
@media (max-width: 600px)  { .wmin15auto { min-width:1.3rem; } }
@media (max-width: 500px)  { .wmin15auto { min-width:1.1rem; } }
@media (max-width: 400px)  { .wmin15auto { min-width:unset; } }


.inwidth1 {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    box-sizing: botder-box;
    white-space: normal;
    overflow-wrap: break-word;
}
.inwidth_ {
    display: table;
    table-layout: fixed;
    width: 100%;
    box-sizing: botder-box;
    white-space: normal;
    overflow-wrap: break-word;
}

.load-lane {
    width: 100%;
    height: 3px;
    background-color: var(--bkclr-header);
    position: absolute;
    bottom: 0;
    overflow: hidden;
}

.load-wave {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, white, transparent);
    animation: load-animation 2s infinite linear;
    -webkit-animation: load-animation 2s infinite linear;
}

.load-wave:nth-child(2) {
    animation-delay: 1s; /* Половина времени анимации */
    -webkit-animation-delay: 1s;
}

@-webkit-keyframes load-animation {
    0%   { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
    100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
@keyframes load-animation {
    0%   { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
    100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
}

.fadein{opacity:0;animation: fadeIn 1s ease-in-out 0.2s forwards;}
@keyframes fadeIn{from {opacity: 0;} to {opacity: 1;}}

.tip{position:relative;_display:inline-block;_cursor:pointer;}
.ttip{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);background:var(--clr-black);color:#fff;
      padding:5px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;z-index:999;transition:opacity 0.3s;}
.ttip{font-family:'Nunito',sans-serif !important;font-size:medium;font-weight:normal;}
.ttip:after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
            border:4px solid transparent;border-top-color:var(--clr-black);}
.ttip.b{top:calc(100% + 5px);bottom:auto;}
.ttip.b:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--clr-black);}
.ttip.l{left:0;transform:none;}
.ttip.l:after{left:8px;transform:none;}
.ttip.r{left:auto;right:0;transform:none;}
.ttip.r{left:auto;right:0;transform:none;}
.ttip.r:after{left:auto;right:8px;transform:none;}
.ttip.y{color:var(--clr-black);background:var(--bkclr-yellowlight);border:1px solid lightgray;}
.ttip.y{box-shadow:2px 2px 3px darkgray;}
.ttip.y:after{border-top-color:dimgray;border-bottom-color:transparent;}
.ttip.y.b:after{border-top-color:transparent;border-bottom-color:dimgray;}
.tip:hover .ttip,.tip:active .ttip{opacity:1;}

.ttip-hidden {opacity: 0 !important;pointer-events: none !important;transition: opacity 0.3s !important;}

.tooltip {display: none;position: absolute;background-color: #333;color: white;padding: 5px;border-radius: 5px;z-index: 1000;}