.widget-container {
    height: 80px;
    width: 80px;
}

.widget-container .icon-widget {
    height: 80px;
    width: 80px;
    margin: 0 auto;
    padding: 13px;
}

.widget-container .icon-round-widget {
    border-radius: 50%;
    border: 2px solid;
}

.widget-container .icon-widget .icon-widget-icon {
    height: 50px;
    width: 50px;
}

.widget-container .title {
    padding-top: 5px;
    text-align: center;
}

.widget-container .diagram-port {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 1px solid #d4d4d4;
}

.widget-container .diagram-port.right {
    top: 32px;
    left: 72px;
    position: absolute;
    background-color: #6c757d;
}

.widget-container .diagram-port.left {
    top: 32px;
    left: -7px;
    position: absolute;
    background-color: #f5f5f5;
}

.widget-container.selected, .widget-container.selected .diagram-port {
    border: 1px solid #6e9fd4;
}

.widget-container .diagram-port:hover, .node > .card .diagram-port.has-links {
    visibility: visible;
    background-color: black;
}

.widget-unfocus {
    opacity: 0.5;
}

.widget-container svg.visuals .line {
    stroke: white;
    stroke-width: 4px;
    fill: none;
}

.conditional-right-ports {
    position: absolute;
    top: 15px;
    width: 20px;
    left: 72px;
}

.conditional-right-ports .conditional-right-port {
    top: initial !important;
    left: initial !important;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #f5f5f5;
    border: 1px solid #d4d4d4;
    position: relative !important;
}

.conditional-right-ports .mud-tooltip-root {
    display: initial;
}

.widget-close-button {
    position: absolute;
    top: -15px;
    left: 70px;
}

.widget-container > .widget-close-button {
    visibility: hidden;

}

.widget-container:hover > .widget-close-button {
    visibility: visible;
}

.workflow-canceled .icon-widget-conditional,
.workflow-canceled .icon-widget {
    background: repeating-linear-gradient(
            45deg,
            #606dbc,
            #606dbc 10px,
            #465298 10px,
            #465298 20px
    );
}

.workflow-canceled .title{
    color: #606dbc !important;
}