#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.vpn-connected {
    background-image: linear-gradient(
        to bottom,
        rgba(30, 168, 133, 0.2) 0%,
        rgba(30, 168, 133, 0) 160px
    );
}

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

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

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