:root {
    --status-bar-color-red: var(--color-logo-red);
    --status-bar-color-grey: #c4c4c4;
    --status-bar-text-color-white: #ffffff;
    --status-bar-padding: 1em;
}

/*** Horizontal status bar ***/

.grid-status-bar-h, .statusBar,
.grid-status-bar-v, .statusBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    width: 100%;
    position: relative;
    cursor: url("../icons/svg/cursor_white.svg"), auto;
}

.grid-status-bar-h, .statusBar {
    width: 100%;
}

.grid-status-bar-v, .statusBar {
    width: 65%;
    margin: 0 auto;
}

    .grid-status-bar-h > .node-h, .statusBar > .node-h,
    .grid-status-bar-v > .node-v, .statusBar > .node-v {
        background-color: var(--status-bar-color-grey);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .grid-status-bar-h > .node-h, .statusBar > .node-h {
        height: 100px;
        min-height: 100px;
        width: 140px;
        min-width: 140px;
    }

    .grid-status-bar-v > .node-v, .statusBar > .node-v {
        height: 85px;
        padding-bottom: 15px;
        width: 100%;
    }


/* Ячейка TD */

#Containers_Containers td .dx-list-next-button {
    display: none;
}

.tracks-cell-template {
    width: 100%;
}

/* Разделитель между нодами */

.grid-status-bar-h .divider-container,
.grid-status-bar-v .divider-container {
    width: 10px;
    height: 10px;
    margin: 0;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    top: 5px;
    -webkit-writing-mode: vertical-lr;
    z-index: 500;
    overflow: visible;
}

    .grid-status-bar-h .divider-container .divider,
    .grid-status-bar-v .divider-container .divider {
        display: inline-block;
        width: 25px;
        height: 10px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        fill: var(--icon-pack-main-fill);
        left: -7px;
        right: auto;
        position: absolute;
        margin: 0;
    }

.grid-status-bar .divider-container .divider.wait {
    background-color: #646464;
}

.grid-status-bar .divider-container .divider.work {
    background-image: url(../icons/radio-divider.png);
}

.grid-status-bar-h .divider-container .divider.done,
.grid-status-bar-v .divider-container .divider.done {
    background-color: var(--color-logo-red);
}

/* Ноды, элементы */

.grid-status-bar-h .dx-item.dx-list-item,
.grid-status-bar-v .dx-item.dx-list-item {
    padding: 0;
}

.grid-status-bar-v .dx-item.dx-list-item {
    padding-left: 50px;
    padding-right: 50px;
}

.grid-status-bar:last-child {
    display: none;
}

.grid-status-bar-h .dx-item.dx-list-item.dx-state-hover,
.grid-status-bar-v .dx-item.dx-list-item.dx-state-hover {
    background-color: var(--status-bar-color-red);
}

.grid-status-bar-h .dx-list-item.node-h.done,
.grid-status-bar-v .dx-list-item.node-v.done {
    background-color: rgba(0,0,0,.0);
}

.grid-status-bar-h .dx-list-item.node-h .dx-list-item-content {
    padding: 5px;
    padding-left: 15px;
    padding-top: 15px;
    margin: 0;
    background-color: var(--status-bar-color-red);
    border-radius: 10px;
}

.grid-status-bar-v .dx-list-item.node-v .dx-list-item-content {
    background-color: var(--status-bar-color-red);
    border-radius: 10px;
}



.grid-status-bar-h .dx-list-item.node-h .dx-list-item-content {
    height: calc(100% - 15px);
    width: calc(100% - 15px);
}

.grid-status-bar-v .dx-list-item.node-v .dx-list-item-content {
    height: 100%;
    width: 100%;
}

/* Иконка */

.grid-status-bar-h .node-h .track-bar-icon-container-h,
.grid-status-bar-v .node-v .track-bar-icon-container-v {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-status-bar-h .node-h .track-bar-icon-container-h {
    position: absolute;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: 15px;
    align-content: end;
    background-color: white;
    border: 2px solid #AE2631;
}

.grid-status-bar-v .node-v .track-bar-icon-container-v {
    left: 10px;
    background-color: #AE2631;
    height: 100%;
    border-bottom: 2px solid white;
}

.grid-status-bar-h .node-h .track-bar-icon-container-h .track-bar-icon {
    width: 24px;
    height: 24px;
    background-color: #AE2631;
}

.grid-status-bar-v .node-v .track-bar-icon-container-v .track-bar-icon {
    width: 24px;
    height: 24px;
    background-color: white;
}

    .grid-status-bar-h .node-h .track-bar-icon-container-h .track-bar-icon.done,
    .grid-status-bar-v .node-v .track-bar-icon-container-v .track-bar-icon.done {
        border: 0.2em var(--status-bar-color-red) solid;
        height: 32px;
        width: 32px;
    }

/* Данные, текст */

.grid-status-bar-h .node-h .track-bar-text-h,
.grid-status-bar-v .node-v .track-bar-text-v {
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    cursor: url("../icons/svg/cursor_white.svg"), auto;
}

.grid-status-bar-h .node-h .track-bar-text-h {
    text-align: end;
    height: 100%;
}

.grid-status-bar-v .node-v .track-bar-text-v {
    position: absolute;
    margin: 8px 20px 0 20px;
    gap: 4px;
    width: 100%;
    height: 100%;
}

    .grid-status-bar-h .node-h .track-bar-text-h.done,
    .grid-status-bar-v .node-v .track-bar-text-v.done {
        color: black;
        font-weight: 600;
    }

/*** TRACKs : Vertical status bar ***/

#EntityGallery .tabsSupply-track-info {
    height: 30px;
    align-content: center;
    /*user-select: text;*/
    /*position: absolute;*/
    /*z-index: 777;*/
    /*background-color: white;*/
    /*width: 100%;*/
}

#EntityGallery .tabsSupply-track-container {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
}

#EntityGallery .tabsSupply-track-container-value {
    font-weight: 800;
    font-size: 10px;
    line-height: 13px;
    /*cursor: text;*/
}

#EntityGallery .statusBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    width: 100%;
    position: relative;
    cursor: url("../icons/svg/cursor_white.svg"), auto;
    width: 65%;
    margin: 0 auto;
    user-select: text;
}

    #EntityGallery .statusBar .node {
        background-color: var(--status-bar-color-grey);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 85px;
        padding-bottom: 15px;
        width: 100%;
    }

/*  */

#EntityGallery .dx-list-items {
    display: flex;
    flex-direction: row;
    width: auto;
    height: 100%;
}

    #EntityGallery .dx-list-items .dx-list-item {
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 100%;
    }

        #EntityGallery .dx-list-items .dx-list-item .dx-list-item-content {
            height: 100%;
        }

#EntityGallery > .dx-scrollable-wrapper > .dx-scrollable-container {
    overflow-x: auto;
    /*overflow-y: auto;*/ /* убрать для .TileView() */
}

/*#EntityGallery .tabsSupply-track-gallery .dx-scrollable-wrapper .dx-scrollable-container {*/
/*overflow-y: scroll;*/ /* для .TileView() */
/*}*/

/* Разделитель между нодами */

#EntityGallery .divider-container {
    width: 10px;
    height: 10px;
    margin: 0;
    margin-top: auto;
    margin-bottom: auto;
    position: relative;
    top: 5px;
    z-index: 500;
    overflow: visible;
}

    #EntityGallery .divider-container .divider {
        display: inline-block;
        width: 25px;
        height: 10px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        fill: var(--icon-pack-main-fill);
        position: absolute;
        margin: 0;
    }

        #EntityGallery .divider-container .divider.done {
            background-color: var(--color-logo-red);
        }

/* Ноды, элементы */

#EntityGallery .tabsSupply-track-gallery {
    height: calc(100% - 30px);
}

    #EntityGallery .tabsSupply-track-gallery .dx-list .dx-list-items {
        display: flex;
        flex-direction: column;
        width: auto;
        height: auto;
    }

        #EntityGallery .tabsSupply-track-gallery .dx-list .dx-list-items .dx-item.dx-list-item {
            width: 100%;
            justify-self: center;
            align-items: center;
        }

#EntityGallery .dx-item.dx-list-item.dx-state-hover {
    background-color: var(--status-bar-color-red);
}

#EntityGallery .dx-list-item .dx-list-item-content {
    display: flex;
    flex-direction: row;
    padding: 5px 10px;
    border-radius: 10px;
    width: 175px;
    height: 40px;
}

#EntityGallery .dx-list-item.node .dx-list-item-content {
    background-color: rgba(100,100,100,1.0);
}

#EntityGallery .dx-list-item.done .dx-list-item-content {
    background-color: var(--status-bar-color-red);
}

/* Иконка */

#EntityGallery .node .track-bar-icon-container {
    /* position: absolute; */
    /* top: 0; */
    /* left: 5px; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #AE2631; */
    height: 100%;
    /* border-bottom: 2px solid white; */
    margin-right: 5px;
    align-self: center;
}

    #EntityGallery .node .track-bar-icon-container .track-bar-icon {
        width: 20px;
        height: 20px;
        background-color: white;
    }

        #EntityGallery .node .track-bar-icon-container .track-bar-icon.done {
            border: 0.2em var(--status-bar-color-red) solid;
            height: 32px;
            width: 32px;
        }

/* Данные, текст */

#EntityGallery .node .track-bar-text {
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    /*position: absolute;*/
    cursor: url("../icons/svg/cursor_white.svg"), auto;
    /*margin: 8px 20px 0 20px;*/
    gap: 4px;
    /*width: 100%;
    height: 100%;*/
    align-self: end;
}

    #EntityGallery .node .track-bar-text.done {
        color: black;
        font-weight: 600;
    }

    #EntityGallery .node .track-bar-text .track-date {
        color: rgba(255,255,255,.5);
    }

#EntityGallery .dx-item.dx-list-item.dx-state-hover {
    background-color: rgba(174, 38, 49, 0.0);
    cursor: url("../icons/svg/cursor_white.svg"), auto;
}

#EntityGallery .dx-item.dx-list-item.dx-state-focused {
    background-color: rgba(174, 38, 49, 0.0);
}

/* gallery: кнопки */

#EntityGallery.dx-gallery .dx-gallery-nav-button-next,
#EntityGallery.dx-gallery .dx-gallery-nav-button-prev {
    width: 50px;
}

    #EntityGallery.dx-gallery .dx-gallery-nav-button-next::before,
    #EntityGallery.dx-gallery .dx-gallery-nav-button-prev::before {
        color: #AE2631;
    }

    #EntityGallery.dx-gallery .dx-gallery-nav-button-prev::before,
    #EntityGallery.dx-gallery .dx-gallery-nav-button-next::before {
        position: absolute;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 2px solid white;
        top: 40%;
        padding: 5px;
        margin: 5px;
        margin-right: 0;
        border: 2px solid rgba(0,0,0,.0);
        background-color: rgba(0,0,0,.0);
        color: #AE2631;
    }

    #EntityGallery.dx-gallery .dx-gallery-nav-button-prev.dx-state-hover::before,
    #EntityGallery.dx-gallery .dx-gallery-nav-button-next.dx-state-hover::before {
        color: #AE2631;
    }

    #EntityGallery.dx-gallery .dx-gallery-nav-button-prev.dx-state-hover::after,
    #EntityGallery.dx-gallery .dx-gallery-nav-button-next.dx-state-hover::after {
        border: 2px solid rgba(0,0,0,.0);
        background-color: rgba(0,0,0,.0);
    }

    #EntityGallery.dx-gallery .dx-gallery-nav-button-prev.dx-state-active::after,
    #EntityGallery.dx-gallery .dx-gallery-nav-button-next.dx-state-active::after {
        background-color: rgba(0,0,0,.0);
    }