.widget {
    padding: 20px;
    background: #d4d7dc;
    box-shadow: 2.5px 5px #acb3b9;
    margin-right: 2.5px;
    margin-bottom: 10px;
    justify-content: space-around;
}
.widget h3 {
    margin: 0;
    margin-bottom: 10px;
    text-align: left;
}

.widget-core > * {
    margin-bottom: 8px;
    text-align: center;
}


.widget h5 {
    margin-top: 0;
}

.progress-group h5 {
    font-size: 1em;
    margin-bottom: 4px;
}
.progress-box {
    /*width: 176px;pas utile et fait tt bugger (sauf si on veut centrer mais dans ce cas %*/
    margin: 1px 0;
    border: gray solid 1px;
    
    display:flex;
}
.progress-bar {
    background-color: rgb(158, 169, 169);
    text-align: center;
    
    width: 0;/*par défaut*/
    /*ça va pas bugger si la valeur est proche de 0 ?*/
    margin: 0;
    margin-right: auto;
    font-size: 0.8em;
}

[color="red"], output[type="boolean"]:not([value="true"]) {
    color: red;
}
[color="darkorange"] {
    color: darkorange;
}
[color="green"], output[type="boolean"][value="true"] {
    color: green;
}

.celsius::after { content: "°C"; }
.percent::after, .progress-bar::after { content: "%"; }

.inline-widgetinfo {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
output[type="number"] { margin-left: 3px; color: #00bcd4; }
output[type="number"][unit="g"]::after { margin-left: 2px; content: "Gbits"; }
output[type="number"][unit="m"]::after { margin-left: 2px; content: "Mbits"; }
output[type="number"][unit="k"]::after { margin-left: 2px; content: "Kbits"; }
output[type="number"][unit="b"]::after { margin-left: 2px; content: "bits"; }
output[type="boolean"] { font-size: 0; margin-left: 3px; }
output[type="boolean"]::before { font-size: initial; }
output[type="boolean"]:not([value="true"])::before { content:"INACTIF"; }
output[type="boolean"][value="true"]::before { content:"ACTIF"; }

.inline-widgetinfo time { margin-left: 3px; color: #673AB7; }


#credit { text-align: center; }