.layout-column {
    .env-container {
        background-color: white;
        padding: 0;
    }
}
.env {
    &__frame {
        width: 100%;
        height: 100%;
        border: none;
    }

    &__frame-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    &__frame-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    &__component-logs {
        flex: 0 0 300px;
        margin-top: 20px;
        max-height: 75vh;

        md-dialog-content {
            display: flex;
            position: absolute;
            top: 64px;
            right: 0;
            bottom: 0;
            left: 0;
        }

        md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) {
            flex: 1;
            min-height: 0;
        }

        md-tab-content > div {
            height: 100%;
            overflow-y: auto;
        }

        md-dialog-actions {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }

    &__component-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
    }

    &__component-item {
        .env__component-list & {
            flex: 0 1 auto;
        }
    }

    &__component {
        position: relative;
        padding-left: 20px;
        font-size: 14px;
        text-align: left;

        &:before {
            content: "\00B7";
            font-size: 70px;
            line-height: 0;
            position: absolute;
            top: 50%;
            left: 0;
        }

        &.healthy {
            &:before {
                color: $success-dark-color;
            }
        }

        &.unhealthy {
            &:before {
                color: $failure-dark-color;
            }
        }
    }
}
.rg-top {
    background: #ececec;
}
