/* бордюр семьи - 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-d: rgb(91, 223, 115);
    /* --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-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-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;
}