/* не работает при динамическом подключении в модулях */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); */

:root {
    --body-height: calc( 100% - var(--header-height) - var(--footer-height) );

    --color-panel: #f0f0f0; 
    --color-panel-icon-over: #c0c0f0;
    --color-title-active: white;
    --color-title-active-border: #909090;

    /* lightblue;  */
    /* #efefef; */

    /* Высота верхней панели */
    --header-height: 32px;
    /* Высота нижней панели - с закладками */
    --footer-height: 30px;
    /* Высота строки заголовка верхней панели - название проекта */
    --header-caption: 32px;
    /* Высота строки меню верхней панели */
    --sub-header-height: 20px;

    /* Ширина иконки Продукта - в верхней панели */
    --panel-header-icon-width: 30px;
    /* Ширина иконки Полдьзователя - в верхней панели */
    --panel-header-person-width: 30px;

    /* Высота панели команд - над полотном витрины */
    --panel-commands-height: 34px;

    /* Цвета записок по типам */
    --note-default-color: #fdf9e8;
    --note-default-border: #d7c692;

    --note-info-color: #faf7f0;
    --note-info-border: #837c67;

    --note-stoper-color: #F8CECC;
    --note-stoper-border: #B85450;

    --note-bug-color: #eed9d6;
    --note-bug-border: darkred;

    --note-story-color: #ebfcda;
    --note-story-border: #a6bf6c;

    --note-goal-color: #D5E8D4;
    --note-goal-border: #82B366;

    --note-action-color: #DAE8FC;
    --note-action-border: #6C8EBF;

    --note-root-color: #FFE6CC;
    --note-root-border: #D79B00;

    /* Цвета по статусу */
    --status-backlog-color: #DAE8FC;
    --status-backlog-border: #6C8EBF;

    --status-todo-color: #FFF2CC;
    --status-todo-border: #D6B656;

    --status-inprogress-color: #FFE6CC;
    --status-inprogress-border: #D79B00;

    --status-waiting-color: #f6bcf0;
    --status-waiting-border: #de5ee2;

    --status-check-color: lightblue;
    --status-check-border: rgba(101, 101, 243, 0.764);

    --status-done-color: #D5E8D4;
    --status-done-border: #82B366;

    --status-wontdo-color: lightgray;
    --status-wontdo-border: gray;
}

/* touch устройства - отключение zoom на dblclick и щипки двумя пальцами */
html {
    touch-action: none; 
    /* touch-action: pan-x pan-y pinch-zoom; */
    /* touch-action: manipulation; */
}

/* Это для отрисовки полотная в размеры окна */
body {
    position:fixed;
	overflow-y: hidden;
	/* overflow-y: scroll; */
	width: 100%;
	height: 100%;
    margin: 0;
    padding: 0;

    /* background-color: red; */

    /* проверка сглаживания для Safari */
    /* text-rendering: geometricPrecision; */
}

* {
    font-family: 'Tahoma', 'Open Sans', sans-serif;
}

/* * {
	font-family: 'Tahoma';
} */

svg, svg:focus {
    outline: none;
    border: none;
}

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

.panel-header {
    border-bottom: 1pt gray solid;
    width: 100%; 
    padding: 0;

    position: fixed;
    top: 0;
    height: var(--header-height);

    background-color: var(--color-panel);

    white-space: nowrap;
    /* display: inline-block; */
    display: flex; /* inline-block; */

    font-size: small;
}

.panel-header > div {
    /* display: inline-block;  */
    vertical-align: top;
    white-space: normal;
}

/* ----- */

.panel-header-icon {
    /* position: fixed; */
    /* left: 0;
    top: 0; */
    
    width: var(--panel-header-icon-width);
    height: var(--header-height);
    position: relative;

    /* background-color: blue; */
}

.panel-header-icon > span {
    background-color: rgba(239, 205, 178, 0.945);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    padding: 2pt;
    border-radius: 3pt;
    font-size: xx-small;

    /* тень */
    -webkit-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    -moz-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);

    user-select: none;
}

.panel-header-body {
    /* position: fixed; */
    /* top: 0; */
    /* left: var(--header-height); */
    
    width: calc( 100% - var(--panel-header-icon-width) - var(--panel-header-person-width));
    height: var(--header-height);

    padding: 0;
    margin-left: 0;

    /* background-color: mediumaquamarine; */
}

.panel-header-body-caption {
    /* position: fixed;
    top: 0; */

    width: 100%;
    height: var(--header-caption);

    padding-top: 5px;
    /* justify-content: center; */

    /* display: inline-block; */
    white-space: nowrap;
    /* обрезание текста если очень длинный */
    overflow: clip;
    text-overflow: ellipsis; 

    /* background-color: firebrick; */
}

.panel-header-body-caption > span {
    margin-top: 20px;
    /* font-size: large; */
    vertical-align: middle;
    text-decoration: underline gray;
    text-underline-offset: 6px;
}

.panel-header-body-menu {
    width: 100%;
    height: calc( var(--header-height) - var(--header-caption) );
    padding: 0;

    display: inline-block;
    white-space: nowrap;
    /* обрезание текста если очень длинный */
    overflow: clip;
    text-overflow: ellipsis;

    /* background-color: greenyellow; */
    
    user-select: none;
}

.panel-header-body-menu > div {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.panel-header-person {
    /* width: var(--panel-header-person-width); */
    height: var(--header-height);
    /* position: relative; */

    /* white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    */
    display: flex;
    /* flex-wrap: nowrap; */

    /* background-color: red; */
}

.panel-header-person > div {
    /* float: left; */
    /* display: flex; */
    justify-content: center;
    align-items: center;
    padding-right: 2px;
    /* flex-wrap: nowrap;
    flex-grow: 0;
    flex-shrink: 1; */
}

/* Стиль "засеривания" при отсутствии сессии */
.without-session {
    filter: grayscale(1);
}

/* .panel-header-person > span.user-icon  */
#user-icon {
    /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); */

    padding: 5px;
    font-size: large;
    user-select: none;
    cursor: pointer;
    /* background-color: green; */
}

#user-name {
    /* position: absolute; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%,-50%); */
    /* font-size: large; */
    align-self:center;
    user-select: none;
    cursor: pointer;
    /* background-color: greenyellow; */

    white-space: nowrap;
}

.panel-other-users {
    height: var(--header-height);
    display: flex;
    /* padding-top: 5px; */
    white-space: nowrap;
    /* обрезание текста если очень длинный */
    /* overflow: clip;
    text-overflow: ellipsis;  */
    padding-right: 5px;
}

.panel-other-users > span {
    /* margin-top: 20px; */
    /* font-size: large; */
    vertical-align: middle;
    justify-content: center;
    align-items: center;
    padding-right: 2px;
    /* border-color: red;    
    border-radius: 20;    
    border-width: 2; */
    border: 2pt solid red;
    margin-top: 5px;
    margin-bottom: 5px;
}

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

.panel-body {
    overflow: hidden;
}

.page-body {
    display: none;
    /* padding: 4px; */
    width: 100%;
    overflow: auto;

    position: fixed;
    top: var(--header-height);

    /* position: fixed;
    top: var(--header-height); */

    height: calc( 100% - var(--header-height) - var(--footer-height));
}

.page-body-view {
    overflow: hidden;
}

.page-body-active {
    display: block;
}

/* Панель команд / иконок над полотном */
.page-panel-commands {
    background-color: var(--color-panel);
    max-height: var(--panel-commands-height);
    min-height: calc( var(--panel-commands-height) - 2px);
    width: 100%;
    white-space: nowrap;
    /* обрезание текста если очень длинный */
    overflow: clip;
    text-overflow: ellipsis; 

    border-top: 1px solid gray;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}

.page-panel-commands > div {
    font-size: x-small;
    border: 1px solid #d4d3d3;
    border-radius: 3px;
    float: left;

    /* размеры */
    min-width: calc( var(--panel-commands-height) - 8px);
    height: calc( var(--panel-commands-height) - 8px);
    
    /* выравнивание содржимого */
    display:flex;
    flex-shrink: 0;
    /* display: inline; */
    justify-content:center;
    align-items:center;
    text-align: center;

    user-select: none;
    
    /* margin-top: 2px; */
    margin-left: 2px; 
    padding-left: 2px;
    padding-right: 2px;

    line-height: 1em;
}

.page-panel-commands > div:hover {
    background-color: var(--color-panel-icon-over);
}

.page-panel-commands > div.label {
    background-color: unset;
    border: unset;
    min-width: unset;
}

/* Панель view */
.page-panel-view {
    /* background-color: red; */
    padding: 0;
    margin: 0;
    height: calc( 100% - var(--panel-commands-height) - 2px );
}

/* .page-body-projects {
    padding: 10px;
} */

/* https://dev.to/fenok/stretching-body-to-full-viewport-height-the-missing-way-2ghd */
.pageBodyScrollable {
    overflow-y: auto;
    /* max-height: max-content;  */
    max-height: calc( 100vh - 80px );

    /* height: var(--body-height); */

    /* box-sizing: border-box; */
    /* max-height: 80vh; */
    /* background-color: green; */
}

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

.panel-titles {
    white-space: nowrap;
    border-top: 1pt solid gray; 
    width: 100%; 
    height: var(--footer-height);

    position: fixed;
    bottom: 0;

    background-color: var(--color-panel);

    display: inline-block;
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    overflow: hidden;

    font-size: small;
}

.page-title {
    float: left;
    text-decoration: none;
    /* margin: 0; */

    padding-top: 2px;
    padding-bottom: 2px;
    /* padding-left: 4px; */
    padding-left: 18px;
    padding-right: 4px;
    /* box-shadow: -5px 0px 0px 0px black, 5px 0px 0px 0px black; */
    /* outline: 1px solid var( --color-title-active-border ); */
    border-left: 1px solid gray;
    /* border-right: 1px solid gray; */
    /* border-bottom: 1px solid gray; */
    cursor: pointer;
    user-select: none;
}

.page-title:first-of-type {
    margin-left: 10px;
    border-left: none;
}

.page-title-active {
    /* font-weight: 800; */
    /* color: blue; */
    cursor: default;
    border-radius: 0 0 4px 4px;
    background-color: var( --color-title-active ) ;
    border-color: var( --color-title-active ) ;
    outline: 1px solid var( --color-title-active-border );
    /* border-right: 1px solid gray; */
    padding-bottom: 5px;
}

/* Подписи для страниц разных типов */

.page-title-projects {
    padding-left: 4px;
}
.page-title-v-flow {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%221%22%20y%3D%228%22%20style%3D%22fill%3A%20%236C8EBF%3B%20font%3A%20bold%2010px%20Open%20sans%3B%22%3EF%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: left 4px top 5px;
}
.page-title-v-mindmap {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%221%22%20y%3D%228%22%20style%3D%22fill%3A%20%2382B366%3B%20font%3A%20bold%2010px%20Open%20sans%3B%22%3EM%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: left 2px top 5px;
}
.page-title-v-board {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%221%22%20y%3D%228%22%20style%3D%22fill%3A%20%23de5ee2%3B%20font%3A%20bold%2010px%20Open%20sans%3B%22%3EB%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: left 3px top 5px;
}
.page-title-v-kanban {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%0A%20%20%20%20%20%20%20%20%3Ctext%20x%3D%221%22%20y%3D%228%22%20style%3D%22fill%3A%20%23D79B00%3B%20font%3A%20bold%2010px%20Open%20sans%3B%22%3EK%3C%2Ftext%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 13px;
    background-repeat: no-repeat;
    background-position: left 2px top 5px;
}

/* Информационная панель на панели закладок страниц */
.page-title-info {
    float: none;
    /* Растягиваем во всю ширину */
    overflow: hidden;
    text-align: right;
    padding-right: 10px;
}

/* ========================================================================================== */


/* .panelPageHeader {
    overflow-y: hidden;
    background-color: peru;
}

.panelPageHeader {
    overflow-y: hidden;
    background-color: plum;
} */

/* ========================================================================================== */

.help-table {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    /* table-layout: fixed;  */
    border-spacing: 0px;
    margin-bottom: 100px;
}

.help-table td { 
	border-top: #cccccc 1px dashed; 
	border-left: #cccccc 1px dashed; 
    padding: 4px;
	text-align: left;
	vertical-align: top;
    overflow-wrap: anywhere;
    /* background-color: green; */
    white-space: break-spaces;
}

.help-table th:nth-child(1) {
    width: 60%;
}
.help-table th:nth-child(2) {
    width: 30%;
}
.help-table th:nth-child(3) {
    width: 10%;
}

/* ========================================================================================== */

#project-drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
  width: 580px;
  margin: 100px auto;
  padding: 20px;
}

#project-drop-area.highlight {
  border-color: purple;
}

.my-form {
  margin-bottom: 10px;
}

.my-form > p {
	white-space:break-spaces;
}


.button {
  display: inline-block;
  padding: 10px;
  background: #ccc;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #ccc;
}
.button:hover {
  background: #ddd;
}
#fileElem {
  display: none;
}

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
  fill-opacity: .2;
}

.link:hover {
  stroke-opacity: .5 !important;
  fill-opacity: .5 !important;
}


/* ===== Стили записок ===== */

/* не работает при динамическом подключении в модулях */
/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); */

/*
про градиентную заливку https://active-vision.ru/icon/gradient/
про тень https://active-vision.ru/icon/box-shadow/
*/

/* пример как рисовать бордюры кастомные через SVG */
/* .test {
    border-width: 3rem;
    border-style: solid;
    border-image-source: url("data:image/svg+xml,%3Csvg width='599px' height='585px' viewBox='0 0 599 585' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='rr' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Crect id='Rectangle' fill='%230277BD' x='49' y='31' width='309.980337' height='333.485955'%3E%3C/rect%3E%3Ccircle id='Oval' fill='%23FD5A1E' cx='393.504213' cy='363.751404' r='190.248596'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    padding: 1.5rem;
    width: 50%;
} */

.note > .note-style {
    stroke: var(--note-default-border) ;
    color: var(--note-default-border) ;
    fill: var(--note-default-color) ;
}

/* Стили - по типу записки */

.note-type-root > .note-text > div > .note-real-text {
    border-radius: 30px;
    /* тень */
    -webkit-box-shadow: 0px 0px 10px 10px rgba(34, 60, 80, 0.4);
    -moz-box-shadow: 0px 0px 10px 10px rgba(34, 60, 80, 0.4);
    box-shadow: 0px 0px 10px 10px rgba(34, 60, 80, 0.4);
}

/* Дубль? */
.note-type-stoper > .note-text > div > .note-real-text {
	outline: solid 1px var(--note-stoper-border);
    background-color: var(--note-stoper-color);
}

.note-type-bug > .note-text > div > .note-real-text {
	outline: solid 1px var(--note-bug-border);
    background-color: var(--note-bug-color);
}

/* Дубль? */
.note-type-story > .note-text > div > .note-real-text {
	outline: solid 1px var(--note-story-border) ;
    background-color: var(--note-story-color) ;
}

/*
    рисование волны - фоновые или бордюр:
    https://css-generators.com/wavy-shapes/
*/
.note-type-info > .note-text > div > .note-real-text {
	outline: solid 1px var(--note-info-border) ;
    background-color: var(--note-info-color) ;

    /* картинка как от дырки выдранного из блокнота листа - тиражирование */
    /* background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%225%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22%23555555%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%222%22%20height%3D%225%22%20fill%3D%22%23555555%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 20px;
    background-repeat: repeat-x;
    background-position-x: 10px;
    background-position-y: -2px;
    border-radius: 2px; */

    border-radius: 2px 2px 7px 7px;

    /* картинка как от дырки выдранного из блокнота листа - по центру сверху */
    /* background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%225%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%224%22%20y%3D%220%22%20width%3D%222%22%20height%3D%225%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2220%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%2219%22%20y%3D%220%22%20width%3D%222%22%20height%3D%225%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2235%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%2234%22%20y%3D%220%22%20width%3D%222%22%20height%3D%225%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%2249%22%20y%3D%220%22%20width%3D%222%22%20height%3D%225%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2265%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%2264%22%20y%3D%220%22%20width%3D%222%22%20height%3D%225%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 70px;
    background-repeat: no-repeat;
    background-position: top -2px center ; */
    /* border-radius: 2px; */

    /* --mask:
        radial-gradient(13.81px at 18.90px 50%,#000 99%,#0000 101%) 0 calc(50% - 14px)/51% 28px repeat-y,
        radial-gradient(13.81px at -11.9px 50%,#0000 99%,#000 101%) 7px 50%/calc(51% - 7px) 28px repeat-y,
		radial-gradient(13.81px at calc(100% - 18.90px) 50%,#000 99%,#0000 101%) 100% calc(50% - 14px)/51% 28px repeat-y,
        radial-gradient(13.81px at calc(100% + 11.90px) 50%,#0000 99%,#000 101%) calc(100% - 7px) 50%/calc(51% - 7px) 28px repeat-y;
    -webkit-mask: var(--mask);
    mask: var(--mask); */
}

.note-type-info > .note-style {
    stroke: var(--note-info-border) ;
    color: var(--note-info-border) ;
    fill: var(--note-info-color) ;
}

/* 2023-07-12  - для отрисовки с актуальной высотой добавляем пустой символ */
/* .note-real-text:after {
    display: inline;
    content: 'x';
} */
    /* content: '\200c'; */
    /* content: '\00a0'; */
    /* content: '\2009'; */
    /* content: '\200B'; */

.note-type-goal > .note-text > div > .note-real-text {
    /* картинка с целью */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%2214%22%20width%3D%2230%22%20height%3D%222%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%2214%22%20y%3D%220%22%20width%3D%222%22%20height%3D%2230%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2212%22%20stroke%3D%22%23999999%22%20fill%3D%22white%22%20stroke-width%3D%222%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%227%22%20stroke%3D%22%23999999%22%20fill%3D%22white%22%20stroke-width%3D%222%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%223%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: right top 4px;
    /* bottom 10px right; */
    /* border-radius: 2px; */

    /* --mask: radial-gradient(5px at 5px 5px,#0000 98%,#000) -5px -5px;
    -webkit-mask: var(--mask);
            mask: var(--mask); */
}

.note-type-stoper > .note-text > div > .note-real-text {
    /* картинка с занаком кирпича */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2213%22%20fill%3D%22red%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Crect%20x%3D%226%22%20y%3D%2212%22%20width%3D%2217%22%20height%3D%226%22%20fill%3D%22white%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: right top 4px;

    /* --mask: radial-gradient(5px at 5px 5px,#0000 98%,#000) -5px -5px;
    -webkit-mask: var(--mask);
            mask: var(--mask); */
}

.note-type-stoper > .note-style {
	stroke:var(--note-stoper-border);
	color:var(--note-stoper-border);
    fill: var(--note-stoper-color);
}

.note-type-bug > .note-text > div > .note-real-text {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%222%202%2028%2028%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M12.5%2C15L7.5%2C12M11%2C17.5L6.5%2C17.5M12%2C19L7.5%2C23%22%20stroke%3D%22darkred%22%20fill%3D%22red%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M18%2C15L22%2C12M19%2C17.5L23%2C17.5M18%2C19L22%2C23%22%20stroke%3D%22darkred%22%20fill%3D%22red%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13.5%2C10L12.5%2C7.5M16.5%2C10L17.5%2C7.5%22%20stroke%3D%22darkred%22%20fill%3D%22red%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M11%2C14L11%2C16C11%2C25%2019%2C25%2019%2C16L19%2C14L11%2C14M12.5%2C13C12.5%2C8%2017.5%2C8%2017.5%2C12.5L12.5%2C12.5%22%20stroke%3D%22darkred%22%20fill%3D%22darkred%22%20stroke-width%3D%221%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: right top 4px;
}

.note-type-bug > .note-style {
	stroke: var(--note-bug-border);
	color: var(--note-bug-border);
    fill: var(--note-bug-color);
}

.note-type-action > .note-text > div > .note-real-text {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M277.42%2C247a24.68%2C24.68%2C0%2C0%2C0-4.08-5.47L255%2C223.44a21.63%2C21.63%2C0%2C0%2C0-6.56-4.57%2C20.93%2C20.93%2C0%2C0%2C0-23.28%2C4.27c-6.36%2C6.26-18%2C17.68-39%2C38.43C146%2C301.3%2C71.43%2C367.89%2C37.71%2C396.29a16%2C16%2C0%2C0%2C0-1.09%2C23.54l39%2C39.43a16.13%2C16.13%2C0%2C0%2C0%2C23.67-.89c29.24-34.37%2C96.3-109%2C136-148.23%2C20.39-20.06%2C31.82-31.58%2C38.29-37.94A21.76%2C21.76%2C0%2C0%2C0%2C277.42%2C247Z%22%20style%3D%22fill%3Anone%3Bstroke%3A%23555555%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A32px%22%2F%3E%3Cpath%20d%3D%22M478.43%2C201l-34.31-34a5.44%2C5.44%2C0%2C0%2C0-4-1.59%2C5.59%2C5.59%2C0%2C0%2C0-4%2C1.59h0a11.41%2C11.41%2C0%2C0%2C1-9.55%2C3.27c-4.48-.49-9.25-1.88-12.33-4.86-7-6.86%2C1.09-20.36-5.07-29a242.88%2C242.88%2C0%2C0%2C0-23.08-26.72c-7.06-7-34.81-33.47-81.55-52.53a123.79%2C123.79%2C0%2C0%2C0-47-9.24c-26.35%2C0-46.61%2C11.76-54%2C18.51-5.88%2C5.32-12%2C13.77-12%2C13.77A91.29%2C91.29%2C0%2C0%2C1%2C202.35%2C77a79.53%2C79.53%2C0%2C0%2C1%2C23.28-1.49C241.19%2C76.8%2C259.94%2C84.1%2C270%2C92c16.21%2C13%2C23.18%2C30.39%2C24.27%2C52.83.8%2C16.69-15.23%2C37.76-30.44%2C54.94a7.85%2C7.85%2C0%2C0%2C0%2C.4%2C10.83l21.24%2C21.23a8%2C8%2C0%2C0%2C0%2C11.14.1c13.93-13.51%2C31.09-28.47%2C40.82-34.46s17.58-7.68%2C21.35-8.09A35.71%2C35.71%2C0%2C0%2C1%2C380.08%2C194a13.65%2C13.65%2C0%2C0%2C1%2C3.08%2C2.38c6.46%2C6.56%2C6.07%2C17.28-.5%2C23.74l-2%2C1.89a5.5%2C5.5%2C0%2C0%2C0%2C0%2C7.84l34.31%2C34a5.5%2C5.5%2C0%2C0%2C0%2C4%2C1.58%2C5.65%2C5.65%2C0%2C0%2C0%2C4-1.58L478.43%2C209A5.82%2C5.82%2C0%2C0%2C0%2C478.43%2C201Z%22%20style%3D%22fill%3Anone%3Bstroke%3A%23555555%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A32px%22%2F%3E%3C%2Fsvg%3E");
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: right top 4px;
}

.note-type-story > .note-text > div > .note-real-text {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M408%2C64H104a56.16%2C56.16%2C0%2C0%2C0-56%2C56V312a56.16%2C56.16%2C0%2C0%2C0%2C56%2C56h40v80l93.72-78.14a8%2C8%2C0%2C0%2C1%2C5.13-1.86H408a56.16%2C56.16%2C0%2C0%2C0%2C56-56V120A56.16%2C56.16%2C0%2C0%2C0%2C408%2C64Z%22%20style%3D%22fill%3A%23ffffff%3Bstroke%3A%23999999%3Bstroke-linejoin%3Around%3Bstroke-width%3A32px%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%22216%22%20r%3D%2232%22%20stroke%3D%22%23999999%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%22256%22%20cy%3D%22216%22%20r%3D%2232%22%20stroke%3D%22%23999999%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%22352%22%20cy%3D%22216%22%20r%3D%2232%22%20stroke%3D%22%23999999%22%20fill%3D%22%23999999%22%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E");
    background-size: 32px;
    background-repeat: no-repeat;
    background-position: right top 4px;
}

.note-type-story > .note-style {
	stroke: var(--note-story-border) ;
	color: var(--note-story-border) ;
    fill:  var(--note-story-color) ;
}

/*
.note-type-default > .note-text > div > .note-real-text {
	outline: solid 1px gray ;
    background-color: white ;
} */

/* ------ Контролы --------------  */

/* Стили - по тэгу статус */

/* Дефолтовый стиль для всяких контролов */
.note > .note-style {
    stroke-width: 1px;
}

.tag-status-backlog > .note-text > div > .note-real-text {
	outline: solid 1px var(--status-backlog-border) ;
    background-color: var(--status-backlog-color) ;
}

.tag-status-todo > .note-text > div > .note-real-text {
	outline: solid 1px var(--status-todo-border) ;
    background-color: var(--status-todo-color) ;
}

.tag-status-inprogress > .note-text > div > .note-real-text {
	outline: solid 1px var(--status-inprogress-border);
    background-color: var(--status-inprogress-color) ;
}

.tag-status-waiting > .note-text > div > .note-real-text {
    outline: solid 1px var(--status-waiting-border);
    background-color: var(--status-waiting-color);
}

.tag-status-check > .note-text > div > .note-real-text {
	outline: solid 1px var(--status-check-border); 
    background-color: var(--status-check-color) ;
}

.tag-status-done > .note-text > div > .note-real-text {
	outline: solid 1px var(--status-done-border) ;
    background-color: var(--status-done-color) ;
}

.tag-status-wontdo > .note-text > div > .note-real-text {
	outline: solid 1px var(--status-wontdo-border) ;
    background-color: var(--status-wontdo-color) ;
}

.tag-onme > .note-text > div > .note-real-text {
    -webkit-box-shadow: 0px 0px 10px 10px rgba(223, 125, 5, 0.996);
    -moz-box-shadow: 0px 0px 10px 10px rgba(223, 125, 5, 0.996);
    box-shadow: 0px 0px 10px 10px rgba(223, 125, 5, 0.996);
}

/* Стили для контролов - по статусу */

.tag-status-backlog > .note-style {
	stroke: var(--status-backlog-border) ;
	color: var(--status-backlog-border) ;
    fill: var(--status-backlog-color) ;
}

.tag-status-todo > .note-style {
	stroke: var(--status-todo-border) ;
    color: var(--status-todo-border) ;
    fill: var(--status-todo-color) ;
}

.tag-status-inprogress > .note-style {
    stroke: var(--status-inprogress-border);
    color: var(--status-inprogress-border);
    fill: var(--status-inprogress-color) ;
}

.tag-status-waiting > .note-style {
    stroke: var(--status-waiting-border);
    color: var(--status-waiting-border);
    fill: var(--status-waiting-color);
}

.tag-status-check > .note-style {
	stroke: var(--status-check-border) ;
	color: var(--status-check-border) ;
    fill: var(--status-check-color) ;
}

.tag-status-done > .note-style {
	stroke: var(--status-done-border) ;
	color: var(--status-done-border) ;
    fill: var(--status-done-color) ;
}

.tag-status-wontdo > .note-style {
	stroke: var(--status-wontdo-border) ;
	color: var(--status-wontdo-border) ;
    fill: var(--status-wontdo-color) ;
}

/* ------- Записка ------------ */

.note-real-text {
	border-radius: 10px;
    padding: 10px;
/*	чтобы не выделять слово при dblclick*/
	user-select: none;
/*	чтобы показывать перенос строки из JSON в тексте SVG*/
	white-space: pre-wrap;
    /* TEST!  */
    /* white-space-collapse: preserve-breaks; */
    outline: solid 1px lightgray;
/* переноса длинных слов, которые не помещаются в контрол */
    overflow-wrap: anywhere;
/* тень */
    -webkit-box-shadow: 0px 4px 9px 2px rgba(34, 60, 80, 0.4);
    -moz-box-shadow: 0px 4px 9px 2px rgba(34, 60, 80, 0.4);
    box-shadow: 0px 4px 9px 2px rgba(34, 60, 80, 0.4);

/* дефолтовый стиль */
    outline: solid 1px var(--note-default-border) ;
    background-color: var(--note-default-color) ;
}



/* для трассировки */
/* .note-panel { */
   /* outline: solid 1px lightgray; */
/* } */

/* -------------  Атрибуты и тэги ------------- */

.attr-panel {
    margin-top: 4px;
    margin-left: 13px;
    margin-right: 3px;
    padding-left: 7px;   
    padding-top: 7px; 
    padding-bottom: 7px;
    padding-right: 5px; 

    background-color: rgba(255, 255, 255, .9);

    overflow: visible;
    
    -webkit-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    -moz-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);

    border-radius: 0 4px 4px 4px;

    min-height: 20pt;
}

.attr-description {
    margin-top: 3px;
    margin-bottom: 5px;
	border-radius: 2px;
    padding: 10px;
    background-color: whitesmoke ;
/*	чтобы не выделять слово при dblclick*/
	user-select: none;
/*	чтобы показывать перенос строки из JSON в тексте SVG*/
	white-space: pre-wrap;
    outline: solid 1px lightgray;
/* переноса длинных слов, которые не помещаются в контрол */
    overflow-wrap: anywhere;
/* тень */
    -webkit-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    -moz-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
}

/* кнопка добавления описания */
.attr-description-control-add {
    display: inline-block;
    white-space: nowrap;
    margin-top: 3px;
    padding: 1px;
    font-size: x-small;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 1px;
    background-color: #eeeeee; 
    cursor: pointer;
    margin: 1px;
    margin-right: 4px;
    border: none;

    /* тень */
    -webkit-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    -moz-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
}

/* тег */
.attr-tag {
    /* это чтобы div'ы не переносилиь по умолчанию - подряд */
    display: inline-block;
    white-space: nowrap;
    /* это отрисовка фона тегов, отступы и размер шрифта */
    margin-top: 3px;
    margin-right: 5px;
    padding: 1px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: lightblue; 
    border-radius: 10px;
    /* обрезание текста если очень длинный */
    overflow: clip;
    text-overflow: ellipsis;    
    /* тень */
    -webkit-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    -moz-box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);
    box-shadow: 0px 1px 2px 1px rgba(34, 60, 80, 0.4);

    font-size: x-small;
    user-select: none;
}

/* тег унаследованный */
.attr-tag-inherited {
    background-color: white;
    border: 1px dashed gray;
    padding-left: 1px;
}
.attr-tag-inherited::before {  
    content: "📌";
    padding: 1px;
    margin-right: 2px;
    filter: grayscale(1);
    font-size: xx-small;
}

/* тег унаследованный */
.attr-key-tag-inherited {
    background-color: white;
    padding-left: 1px;
}
.attr-key-tag-inherited::before {
    content: "📌";
    padding: 1px;
    margin-right: 2px;
    /* Safary: это приводит к оторажению значку в левом верхнем углу, ломает отрисовку */
    /* filter: grayscale(100%); */
    /* Это альтернатива сделать emojy серым - но символ не появляется в Safari */
    /* color: transparent; 
    text-shadow: 0 0 0 gray; */
    border-radius: 8px;
    border: 1px dashed gray;
    font-size: xx-small;
}

/* тег припиненный */
.attr-tag-pinned {
    background-color: rgb(165, 199, 231); 
    padding-left: 1px;
}
.attr-tag-pinned::before {  
    content: "📌";
    padding: 1px;
    margin-right: 2px;
    background-color: white; 
    border-radius: 8px;
    border: 1px solid lightgray; 
    font-size: xx-small;
}

/* кей-тег припиненный */
.attr-key-tag-pinned {
    padding-left: 1px;
    border-radius: 8px;
}

.attr-key-tag-pinned::before {
    content: "📌";
    padding: 2px;
    margin-right: 2px;
    background-color: rgb(165, 199, 231);
     /* white;  */
    border-radius: 8px;
    /* border: 1px solid rgb(165, 199, 231); */
    /* lightgray;  */
    font-size: xx-small;
}

.attr-tag-pinned2 {
    padding-left: 1px;
}

.attr-tag-pinned2::before {  
    content: "📌";
    padding: 1px;
    margin-right: 2px;
    background-color: white; 
    border-radius: 8px;
    border: 1px solid lightgray; 
    font-size: xx-small;
}

.attr-key-tag {
    font-size: small;
    margin-top: 5px;
    /* это чтобы длинные строки не переносились и обрезались с ... на конце  */
    overflow: clip;
    white-space: nowrap;
    text-overflow: ellipsis;   
}

/* .note1 > .editing div {
/*	border: 1pt solid green;*/
	/* border-radius: 10px; */
/* } */

.note-active > .note-text > div > .note-real-text {
    outline-width: 3px !important;
}

/* Стиль дублируем ниже - для переопределения outline-width поверх остальных */
.note-selected > .note-text > div > .note-real-text {
    outline-width: 5px;
    outline-style: double;
}

.note > .note-text > div > .note-real-text {
    border: 2px solid transparent;
}

span.note-type-stoper {
	outline: solid 1px var(--note-stoper-border);
    background-color: var(--note-stoper-color);
}

span.note-type-bug {
	outline: solid 1px var(--note-bug-border);
    background-color: var(--note-bug-color);
}

span.note-type-root {
	outline: solid 1px var(--note-root-border) ;
    background-color: var(--note-root-color) ;
}

span.note-type-info {
	outline: solid 1px var(--note-info-border) ;
    background-color: var(--note-info-color) ;
}

span.note-type-goal {
	outline: solid 1px var(--note-goal-border) ;
    background-color: var(--note-goal-color) ;
}

span.note-type-action {
	outline: solid 1px var(--note-action-border) ;
    background-color: var(--note-action-color) ;
}

span.note-type-story {
	outline: solid 1px var(--note-story-border) ;
    background-color: var(--note-story-color) ;
}

span.note-type-default {
	outline: solid 1px var(--note-default-border) ;
    background-color: var(--note-default-color) ;
}


/* скрываем контролы добавления описания и тегов у не активной записки */
/* TODO - надо доделать, сейчас при нажатии на контрол всё опять скрывается
    при переходе на контрол ввода текста - снимается активная записка
    надо видимо убрать
    .tag-new-control { display: inline-block;
 */
/* .note > .note-text > .note-panel > .attr-panel > .attr-add  {
    display: none;
}
 */

.attr-add  {
    display: none;
}
.note-active > .note-text > .note-panel > .attr-panel > .attr-add  {
    display: inline;
}

.select-area{
    background-color: #D79B00;
}

/* Целевой элемент - обтекаемая текстом область вокруг иконки типа записки */
/* Общая зона с обтеканием */
.note > .note-text > .note-panel > .type-area {
    width: 30pt; /* Ширина зоны */
    height: 34pt; /* Высота зоны */
    float: right; /* Зона будет обтекаться текстом слева и снизу */
    /* Для визуального отслеживания */
    /* background-color: red;
    opacity: 20%; */
}
/* Отключение зоны с обтеканием для дефолтовой инфо записки */
.note-type-info > .note-text > .note-panel > .type-area {
    width: 0pt; /* Ширина зоны */
    height: 0pt; /* Высота зоны */
    float: right; /* Зона будет обтекаться текстом слева и снизу */
    /* Для визуального отслеживания */
    /* background-color: red;
    opacity: 20%; */
}

/* делаем иконку типа прозрачным для событий мыши */
.type-area {
    pointer-events: none;
}

/* Стили состяния подключения к серверу и WS */
.conn-on {
    background-color: rgb(198, 222, 198);
}

.conn-on-concurrent {
    background-color: rgb(248, 188, 145);
}

.conn-off {
    background-color: rgb(226, 198, 198);    
}