#main-widget {
    transition: background-image 2s ease;
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 160px
    );
}

#main-widget #content-layout {
    padding: 20px;
}

#main-widget.connected {
    background-image: linear-gradient(
        to bottom,
        rgba(30, 168, 133, 0.2) 0%,
        rgba(30, 168, 133, 0) 160px
    );
}

#main-widget.disconnected {
    background-image: linear-gradient(
        to bottom,
        rgba(245, 56, 90, 0.2) 0%,
        rgba(245, 56, 90, 0) 160px
    );
}

#main-widget.connecting,
#main-widget.disconnecting {
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0) 160px
    );
}

#main-widget.error {
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0) 160px
    );
}
