@charset "utf-8";


/* оформление меню */
.topmenu { --clr-text:var(--clr-header); --clr-item:var(--bkclr-header); }
.topmenu {
    background: var(--bkclr-header);
    color: var(--clr-header);
}

.baritem.link, .baritem.popupitem {
    margin: 0 2px;
    padding: 2px;
    line-height: 1;
    font-size: medium;
    text-align: center; 
}
.baritem.link, .baritem.popupitem {
    border-radius: 0.4rem;
    border: 2px solid var(--clr-transparent);
}
.baritem.separator { 
    display: block;
    max-width: 2px;
    width: 2px;
    padding: 0;
    margin: 0.5rem 1px;
    background: var(--clr-white75);
    color: var(--clr-white50);
}

.baritem.link > a { display: block; color: var(--clr-header); }
.baritem .icon { font-size: x-large; }
.baritem .text { 
    min-width: 5em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.popupmark { 
    position: absolute; 
    top: -0.5rem;
    right: 7%; 
    transform: matrix(0.5,0,0,-0.5,0,0);
    color: var(--bkclr-lightblue);
    color: var(--clr-lightestblue);
}
.newmark2 {
    position: absolute; 
    top: -0.33rem;
    left: 15%; 
    font-size: 90%;
    color: var(--bkclr-lightgreen);
    visibility: visible;
}

.baritem:hover { background-color: var(--clr-white75); }
.baritem.link[selected] { background-color: var(--clr-white75); }
.btn-menu.compact[selected] { background-color: var(--clr-white75); }
.btn-menu.compact:hover { background-color: var(--clr-white75); _animation: 0.3s show ease; }
.baritem.link > a { text-decoration: none; }
.baritem.link:hover { border: 2px solid var(--clr-text); }

@media (max-width: 600px)  
{ 
    #topadmin { display: none; } 
}
@media (max-width: 400px)  { 
    .baritem .text { font-size: small; } 
    .popupmark { right: 6%; }
    .newmark2 { left: 14%; }
}
@media (min-width: 500.01px)  { 
    .topmenu > div.hlane { justify-content: center; } 
}
/* @media (max-width: 500px)  { .topmenu > div.hlane > .baritem.separator { display: none; } } */
@media (max-width: 620px)  { .baritem .text { min-width: 4em; } }
@media (max-width: 500px)  { 
    .baritem .text { min-width: none; }
    .baritem.link, .baritem.popupitem { margin: 0; padding-left: 0 !important; padding-right: 0 !important; }
    /* .baritem.link, .baritem.popupitem { width: auto; } */
    .baritem.long { width: min-content; }
    /* experiment */
    .baritem { margin: 0; }
    .baritem.long { width: 4.6rem; }
    .baritem { width: calc((100vw - 4.6rem - 20px - 4px - 8px) / 4) }
    /* 
    4.6rem - расписание
    20px - 2х2х5 - рамки всех пяти кнопок
    4px - ширина сепаратора
    8px - резерв (2px на кнопку - становится маджинами между кнопками)
    */
}

.newmark:before, .newmark:after {
    content: "●";
    font-size: smaller;
    color: var(--bkclr-lightgreen);
    position: relative;
    top: -1rem;
}
.newmark:before { color: transparent; }
.redmark:after { 
    content: "●";
    font-size: larger;
    color: orangered;
    position: relative;
    top: -0.5rem;
}

/* базовые отступы и стили списка для выпадающего меню */
.popupitem ul {
    background: var(--bkclr-header);
    color: var(--clr-header);
    position: relative;
    /* max-width: max-content; */
    padding: 0;
    margin: 0;
}

/* элемент выпадающиего списка */
.popupitem li { 
    display: inline-block;
    white-space: nowrap; 
    list-style: none; 
    text-align: left; 
    margin: 0 0.4rem;
}

nav hr { margin: 0.2rem 0.4rem; }
.popupitem { cursor: pointer; }
.popupitem > ul { cursor: default; }
.popup2 { padding: 0.2rem 0.2rem 0.2rem 0; } /**/

.popupitem a, a.menu, div.menuitem { /* ссылки в меню-баре и выпадающих слоках */
    color: var(--clr-text);
    background: var(--clr-item);
    border-radius: 0.4rem; /* Скругляем уголки */
    border: solid 2px var(--clr-item);
    text-decoration: none;
}
.popupitem a, a.menu, div.menuitem {
    padding: 0.2rem; /* отступы между текстом и фокус-рамкой > 0*/
    margin: 0;
    line-height: 1;
    font-size: medium;
    /* font-family: Arial, Helvetica, sans-serif; */
}
.popupitem ul a, a.menu, div.menuitem { /* ссылки в выпадающих блоках -- на всю ширину строки */
    display: inline-block; /* без этого ссылка на всю ширину не тянется */
    white-space: nowrap; /* при правильной ширине заворота быть не должно */
    width:calc(100% - 0.6rem); /* -0.8rem: parent's horz margins; + 0.2rem: for right hot-border margin */
}
.popupitem .separator {
    width:calc(100% - 0.6rem); /* -0.8rem: parent's horz margins; + 0.2rem: for right hot-border margin */
}
.menunotify {
    /* hlane */
    display: grid; grid-auto-flow: column; 
    /* color */
    color: var(--bkclr-lightgreen);
    /* xbold */
    font-weight: 900;
    /* other */
    padding: 0.2rem 0;
    margin-bottom: 3px !important;
    border-top: 1px solid;
    border-bottom: 1px solid;
}
.menuheader {
    /* invert colors */
    color: var(--clr-item);
    background-color: var(--clr-text);
    /* topround03 */
    border-radius: 0.3rem 0.3rem 0 0;
    /* xbold */
    font-weight: 900;
    /* other */
    padding: 0.2rem 0.5rem;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}
.menuheader::before {
    content: "▼ ";
}
.menuheader.admin {
    background-color: var(--bkclr-yellowlight);
}

div.menuitem {
    display:block;
    padding: 0.25rem; /**/
    cursor: pointer;
}

.topmenu a.min, .menu.min, .menuitem.min { /* ссылки в выпадающих блоках -- несколько в строке */
    width: initial;
    min-width: 1rem;
    text-align: center;
}
.min1  { min-width:   1rem; width: initial; }
.min15 { min-width: 1.5rem; width: initial; }
.min2  { min-width:   2rem; width: initial; }

.popupitem a:hover, a.menu:hover, div.menuitem:hover { border-color: var(--clr-text); }

/* выпадающий блок */
nav .popupitem ul {
    display:block;
    z-index:999;
    visibility:hidden;
    position:absolute;
    margin-top: 0;
    padding: 0.4rem 0; /**/
    border-radius: 0 0 0.6rem 0.6rem; /* Скругляем уголки */
    box-shadow: 0.2rem 0.2rem 3px rgba(122,122,122,0.5);
}
nav li.popup2 {
    border-radius: 0 0.4rem 0.4rem 0; /* Скругляем уголки */
    border: solid 2px var(--clr-item); /**/
}

nav li.popup2 ul {
    top: -0.6rem; /**/
    z-index: 1000;
    border-radius: 0.6rem; /* Скругляем все уголки */
    border: solid 1px whitesmoke; /**/
    width: -moz-fit-content;
    width: fit-content;
}
nav li.popup2 ul.left { right: calc(100%); }

.toleft1 { transform: translateX(-1rem); }
.toleft2 { transform: translateX(-2rem); }
.toleft3 { transform: translateX(-3rem); }
.toleft4 { transform: translateX(-4rem); }
.toleft8 { transform: translateX(-8rem); }
.toleft10 { margin-left: -10rem; }
.toleft12 { margin-left: -12rem; }
.toright1 { transform: translateX(1rem); }

.top { top: 0; }

ul.popup2 { left: 4rem; }

/* пункты выпадающего блоков */
nav .popupitem li {
    display:list-item;
    position:relative;
}
/* отображаем выпадающий список при наведении */
.popupitem:hover > ul, nav .popup2:hover > ul { visibility:visible; animation: 0.3s show ease; }
nav .popup2:hover { 
    border-color: var(--clr-text);
}

/* left arrow like PLAY button */
.playleft { display: inline-block; transform: matrix(-1.25,0,0,1,0,0); translate: 0 1px;/**/ }

/********************************************************************/
/*  popup div  */

div.popup {
    display:block;
    z-index:999;
    visibility:hidden;
    position:absolute;
    padding:0.4rem;
    border-radius:0.6rem; /* Скругляем уголки */
    box-shadow:0.2rem 0.2rem 3px rgba(122,122,122,0.5);
    cursor:context-menu;
}
.overflow-visible { overflow: visible; }
div.popup.modal {
    border-radius: 0 0.6rem 0.6rem 0.6rem;
    visibility:visible !important;
    animation: 0.3s show ease;
    position:fixed;
}
div.popup.modal.wincenter { 
    position: fixed; 
    top: min(10%, 100px); left: 50%;
    transform: translate(-50%, 0);
    border-radius: 0.6rem 0.6rem 0.6rem 0.6rem;
    max-height: calc( 80% );
    overflow-y: auto;
    overflow-x: hidden;
}

.popan { align-items: center; }
.popan:hover > div.popup { visibility:visible; animation: 0.3s show ease; }
.popan > div.popup { position: absolute; } /* div.popup и так absolute */
.popan > .tips, .popan > .lefttips { display: none; }
.popan:hover > .tips, .popan:hover > .lefttips { display: block; }
/*.tips.toleft { transform: translateX(calc(1rem - 100%)); } /**/
.tips.toleft { margin-left: -8rem }
.tips.totop { margin-top: -4rem; }

.maxfit { max-width: max-content; }
.minfit { max-width: min-content; }

.topmenu .menuicon {
    padding-left: 0.3rem;
    padding-right: 0.2rem;
}
.topmenu .menuicon.lpad0 { padding-left: 0; } /* иконка перед ВХОД */
@media (max-width: 600px) { .menuwide { display:none; } }

.adminitem, .xadminitem { color:khaki; font-weight: bold; }
.xadminitem::before{ content: "X: "; }

.popuptitle {
    /*headerinvert xbold bmar03 vpad3px*/
    color: var(--bkclr-header);
    background-color: var(--clr-header);
    font-weight: 900;
    /* margin-bottom: 0.3rem; */
    padding: 4px 8px; /* vert / horz */
}

/********************************************************************/
/* _img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
} */