body.staging #header,
body.staging .nav.side-menu,
body.staging .sidebar {
    background-color: #dc3545 !important;
}

.btn {
    border: 1px solid #666;
}

.numeric { text-align: right; }
.numeric span {
    display: inline-block;
    width: 100%;
    text-align: right;
}

.circle-icon-none,
.circle-icon {
    width: 12px;
    height: 12px;
    line-height: 12px;
    display: inline-block;
    border: 1px solid #999999;
    border-radius: 15px;
    margin: 0;
    padding: 0;
    margin-top: -2px;
}

.simpletable {
    border: 1px solid #cccccc;
    border-collapse: collapse;

}

.simpletable th,
.simpletable td {
    padding: 2px;
    border: 1px solid #cccccc;
}

.simpletable .errors td {
    color: #DE2121;
    font-weight: bold;
}

.discreet { color: #999; }

/* table.plannertable */

table.plannertable {
    border: 2px solid #000 !important;
    table-layout: fixed;
}
.plannertable thead th {
    background-color: #666;
    color: white;
    font-weight: normal;
    border-bottom: 1px solid black !important;
    white-space: nowrap;
    vertical-align: middle;
    padding: 4px !important;
}
.plannertable th.past-week { background-color: #aaa; }
.plannertable th.current { background-color: #000; color: yellow; }
.plannertable th .week-date {
    font-size: 9px;
    color: #ccc;
}
.plannertable td {
    font-size: 10px;
    white-space: nowrap;
    padding: 0 4px !important;
    line-height: 13px;
    vertical-align: top;
    color:  #000;
}
.plannertable td span {
    line-height: 13px;
}

.plannertable td.neutral { color: #ccc; }
.plannertable td.clean { color: #28a745; }
.plannertable td.dirty { color: #dc3545; }

.plannertable tr.bbb td,
.plannertable td.bbb {
    border-bottom: 2px solid #000;
}
.plannertable tr.notb td,
.plannertable td.notb {
    border-top: none;
}
.plannertable .discreet {
    color: #ccc;
}
.plannertable .key {
    font-weight: bold;
}

/*
    Colorazione differenzata dei vendors .. e' stata generata in un template
    come segue ...

    {% for _ in ''|center:6 %}{% with h=60|multiply:forloop.counter0|add:120|modulo:360 %}
        .plannertable .vendor.vendor-{{forloop.counter0}}                       { color: hsl({{h}}, 80%, 40%); }
        .plannertable tr.vendor.vendor-{{forloop.counter0}}                     { background-color: hsl({{h}}, 60%, 80%); color: black; }
        .plannertable tr.vendor.vendor-{{forloop.counter0}} .editbox            { background-color: hsl({{h}}, 60%, 80%); }
        .plannertable tr.vendor.vendor-{{forloop.counter0}} .editbox.read-only  { background-color: hsl({{h}}, 60%, 90%); }
    {% endwith %}{% endfor %}
*/

.plannertable .vendor.vendor-0                       { color: hsl(120, 80%, 40%); }
.plannertable tr.vendor.vendor-0                     { background-color: hsl(120, 60%, 80%); color: black; }
.plannertable tr.vendor.vendor-0 .editbox            { background-color: hsl(120, 60%, 80%); }
.plannertable tr.vendor.vendor-0 .editbox.read-only  { background-color: hsl(120, 60%, 90%); }
.plannertable .vendor.vendor-1                       { color: hsl(180, 80%, 40%); }
.plannertable tr.vendor.vendor-1                     { background-color: hsl(180, 60%, 80%); color: black; }
.plannertable tr.vendor.vendor-1 .editbox            { background-color: hsl(180, 60%, 80%); }
.plannertable tr.vendor.vendor-1 .editbox.read-only  { background-color: hsl(180, 60%, 90%); }
.plannertable .vendor.vendor-2                       { color: hsl(240, 80%, 40%); }
.plannertable tr.vendor.vendor-2                     { background-color: hsl(240, 60%, 80%); color: black; }
.plannertable tr.vendor.vendor-2 .editbox            { background-color: hsl(240, 60%, 80%); }
.plannertable tr.vendor.vendor-2 .editbox.read-only  { background-color: hsl(240, 60%, 90%); }
.plannertable .vendor.vendor-3                       { color: hsl(300, 80%, 40%); }
.plannertable tr.vendor.vendor-3                     { background-color: hsl(300, 60%, 80%); color: black; }
.plannertable tr.vendor.vendor-3 .editbox            { background-color: hsl(300, 60%, 80%); }
.plannertable tr.vendor.vendor-3 .editbox.read-only  { background-color: hsl(300, 60%, 90%); }
.plannertable .vendor.vendor-4                       { color: hsl(0, 80%, 40%); }
.plannertable tr.vendor.vendor-4                     { background-color: hsl(0, 60%, 80%); color: black; }
.plannertable tr.vendor.vendor-4 .editbox            { background-color: hsl(0, 60%, 80%); }
.plannertable tr.vendor.vendor-4 .editbox.read-only  { background-color: hsl(0, 60%, 90%); }
.plannertable .vendor.vendor-5                       { color: hsl(60, 80%, 40%); }
.plannertable tr.vendor.vendor-5                     { background-color: hsl(60, 60%, 80%); color: black; }
.plannertable tr.vendor.vendor-5 .editbox            { background-color: hsl(60, 60%, 80%); }
.plannertable tr.vendor.vendor-5 .editbox.read-only  { background-color: hsl(60, 60%, 90%); }