/* бордюр семьи - rect */

:root {
    --color-link-group-stroke: rgb(235, 96, 21);
    --color-link-group-fill: rgb(235, 96, 21); 

    --color-link-add-stroke: rgb(21, 110, 235);
    --color-link-add-fill: rgb(164, 198, 236);

    --color-link-type-b: rgb(80, 99, 220);
    /* --stroke-dasharray-link-type-b: 20 10; */

    --color-link-type-g: rgb(91, 223, 115);
    --color-link-type-d: rgb(60, 147, 76);
    /* --stroke-dasharray-link-type-d: 10 25 2 25; */

    --color-link-type-r: rgb(233, 80, 72);
}

.note-family-border {
    fill: none;
    /* fill: #fafafa;
    fill-opacity: 50%; */
    stroke: gray;
    stroke-width: 1px;
    /* stroke-linecap: round; */
    stroke-dasharray: 10 2 ; 
     /* 8 2 3 2 1 2 3 2; */
    rx: 5px;
}

/* Пример для градиета у CSV - https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS */

.new-family-before {
    fill: rgb(226, 235, 243);
    filter: drop-shadow(0px -30px 10px rgba(57, 95, 124, 0.7));
    -webkit-filter: drop-shadow(0px -30px 10px rgba(57, 95, 124, 0.7));
}

.new-family-after {
    fill: rgb(226, 235, 243);
    filter: drop-shadow(0px 30px 10px rgba(57, 95, 124, 0.7));
    -webkit-filter: drop-shadow(0px 30px 10px rgba(57, 95, 124, 0.7));
}

.new-family-inside {
    fill: rgb(226, 235, 243);
    filter: drop-shadow(0px 0px 20px rgba(57, 95, 124));
    -webkit-filter: drop-shadow(0px 0px 20px rgba(57, 95, 124));
}


/* Треугольник стрелки на конце связи  */

.link-end-arrow {
    stroke: gray;
    fill: gray;
}

.view-link-grouped {
    stroke: var(--color-link-group-stroke);
    fill: var(--color-link-group-fill);
    /* opacity: 20%; */
}

.link-end-arrow-grouped {
    stroke: var(--color-link-group-stroke);
    fill: var(--color-link-group-fill);
}

/* Маршрут новой возможной view link */

.view-link-temp {
    stroke: var(--color-link-add-stroke);
    fill: var(--color-link-add-fill);
    stroke-dasharray: 10 2 ;
    /* rgb(235, 32, 21); */
}

.view-link-end-arrow-temp {
    stroke: var(--color-link-add-stroke);
    fill: var(--color-link-add-stroke);
    /* rgb(235, 32, 21); */
}

.new-link-target {
    border-color: red;
}

.new-link-target > .note-text > div > .note-real-text{
    /* -webkit-box-shadow: -9px 9px 30px 35px rgba(57, 95, 124, 0.67);
    -moz-box-shadow: -9px 9px 30px 35px rgba(57, 95, 124, 0.67);
    box-shadow: -9px 9px 30px 35px rgba(57, 95, 124, 0.67); */
    -webkit-box-shadow: 0px 0px 20px 25px rgba(57, 95, 124, 0.67);
    -moz-box-shadow: 0px 0px 20px 25px rgba(57, 95, 124, 0.67);
    box-shadow: 0px 0px 20px 25px rgba(57, 95, 124, 0.67);
}

.view-link-part {
    opacity: 20%;
}

/* ==== Отедльные стили связей =========== */

/* Одиночная линия связи (вместо области между двумя кривыми):
   не сплошной стиль линии или стрелка отличная от конечной */
.flow-line-center {
    fill: none;
    stroke-width: 2px;
}

/* Стили линии связи */
.flow-line-dash {
    stroke-dasharray: 6 5;
}

.flow-line-bigDash {
    stroke-dasharray: 22 12;
}

.flow-line-dashDot {
    stroke-dasharray: 22 10 1 10;
}

.flow-link-type-b {
    stroke: var(--color-link-type-b);
    fill: var(--color-link-type-b);
    /* stroke-dasharray: var(--stroke-dasharray-link-type-b); */
    /* fill: none; */
    /* stroke-opacity: 0.8; */
}

.flow-link-type-g {
    stroke: var(--color-link-type-g);
    fill: var(--color-link-type-g);
    /* stroke-dasharray: var(--stroke-dasharray-link-type-d); */
    /* stroke-opacity: 0.8; */
    /* fill-opacity: 0.1; */
}

.flow-link-type-d {
    stroke: var(--color-link-type-d);
    fill: var(--color-link-type-d);
    /* stroke-dasharray: var(--stroke-dasharray-link-type-d); */
    /* stroke-opacity: 0.8; */
    /* fill-opacity: 0.1; */
}

.flow-link-type-r {
    stroke: var(--color-link-type-r);
    fill: var(--color-link-type-r);
    /* stroke-dasharray: var(--stroke-dasharray-link-type-d); */
    /* stroke-opacity: 0.8; */
    /* fill-opacity: 0.1; */
}

/* === Подсветка связей */

.link:hover {
    stroke: black;
}