.widget-oob,
.widget-cloned,
.widget-new,
.widget-customized {
border: 3px solid #6CE474;
overflow: hidden;
}

.widget-cloned {
border-color: #DFD139;
}

.widget-new {
border-color: #535AD7;
}

.widget-customized {
border-color: #FC4E4B;
}

button.widget-diagnostics-info,
button.legend-icon {
float: left;
font-size: 20px;
color: #5f9ea0;
z-index: 999;
position: relative;
top: 5px;
left: 5px;
border: none;
background: transparent;
}

button.widget-is-empty {
float: none;
margin-right: calc(100% - 17px);
top: 1px;
left: 18px;
}

.widget-legend-wrapper {
position: absolute;
left: 0;
background-color: #f5f5f5;
left: 10px;
bottom: 10px;
}

button.legend-icon {
font-size: 35px;
margin: 15px;
}

.widget-legend-info {
width: 100px;
}

.widget-legend-info div {
display: flex;
padding: 3px;
}

.widget-legend-info div>span:first-child {
flex-shrink: 0;
margin: 2px 0 0 5px;
}

.legend-dot-yellow,
.legend-dot-blue,
.legend-dot-red,
.legend-dot-green {
height: 15px;
width: 15px;
display: inline-block;
border-radius: 50%;
background-color: #DFD139;
}

.legend-dot-blue {
background-color: #535AD7;
}

.legend-dot-red {
background-color: #FC4E4B;
}

.legend-dot-green {
background-color: #6CE474;
}

[data-widget-diagnostics-mode] .modal-content .modal-diagnostics-wrapper {
border: 2px solid #e5e5e5;
}

[data-widget-diagnostics-mode] .modal-footer {
border-top: 0;
}