:host {
    flex: 1;

    .empty-diagram {
        text-align: center;
        font-size: 20px;
        padding: 50px;
    }

    .alert-link {
        &:hover {
            cursor: pointer;
        }
    }

    .container-fluid {
        width: 100%;
        height: 100%;
        display: flex;
        padding: 0;
        overflow: hidden;

        .row {
            flex: 1;
            margin: 0px;

            .legend-button {
                position: absolute;
                right: 0px;
                top: 5px;
                z-index: 10;
            }

            .diagram-wrapper {
                height: 100%;
                width: 100%;
                display: flex;
                padding: 0;
                flex-direction: column;

                .diagram {
                    flex: 1;
                    position: relative;
                }

                .overview-diagram {
                    flex: 0 0 120px;
                    position: relative;
                }

                .control-bar {
                    flex: 0 0 50px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
            }

            #sidebar {
                height: 100%;
            }

            .legend {
                height: 100%;
                display: flex;
                flex-direction: column;
                overflow: hidden;

                .legend-entries {
                    flex: 1;
                    overflow: auto;
                }

            }
        }

        /* off canvas styling */
        @media screen and (max-width: 767.98px) {
            .row-offcanvas {
                position: relative;
                transition: all .25s ease-out;
            }

            .row-offcanvas-right {
                right: 0;
            }

            .row-offcanvas-right .sidebar-offcanvas {
                right: -100%;
                /* 12 columns */
            }

            .row-offcanvas-right.active .sidebar-offcanvas {
                right: -75%;
                /* 9 columns */
            }

            .row-offcanvas-right.active {
                right: 75%;
                /* 9 columns */
            }

            .sidebar-offcanvas {
                position: absolute;
                top: 0;
                height: 100%;
                padding: 5px;
                overflow: auto;
                width: 75%;
                /* 9 columns */
            }
        }
    }
}