.DUI-panel {
    background-color: white;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #d2d2d2;
}
@media only screen and (min-width: 1400px) {
    .DUI-panel--TOP10 {
        max-width:49%;
        width:49%;
        float:left;
    }
}

@media only screen and (min-width: 1024px) {
    .show-desktop { display: block; }
}
@media only screen and (max-width: 1023px) {
    .show-desktop { display: none; }
}

.DUI-panel__headline { 
    padding: 6px 10px 6px 10px;
    border-bottom: 1px solid #e0e0e0;
    font-weight: bold;
}
.DUI-panel__headline-actions { 
    float: right;
}
.DUI-panel__content {
    padding: 6px;
}
.DUI-panel__content--title {
    padding: 20px;
}

.DUI-panel--error {
    border-color: #e0b4b4;
    background-color: red;
    color: white;
}
.DUI-panel--error a {
    color: white;
}

.DUI-table {
    _border: 1px solid #aaa;
    font-size: 1.0em;
    color: black;
}
.DUI-table td { overflow-wrap: anywhere; }
.DUI-table thead th { border-bottom: 1px solid #eee; white-space: nowrap; }
.DUI-table tbody tr:nth-child(odd) { background-color: white; }
.DUI-table tbody tr:nth-child(even) { background-color: white; }
.DUI-table tbody tr:hover { background-color: #eee; }
.DUI-table__col--number { text-align: right; white-space: nowrap; }
.DUI-table__col--grow { width: 100%; }

/* Stacked Bar Chart */

.stackedbarchart {
    display: flex;
    text-align: center;
}
.stackedbarchart__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    padding: 5px;
}

.stackedbarchart__legend {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 5px;
}
.stackedbarchart__legendcolor {
    width: 20px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid black;
}

.stackedbarchart__color--0 { background-color: rgba(255, 180, 50, .75); }
.stackedbarchart__color--1 { background-color: rgba(255, 220, 90, .75); }
.stackedbarchart__color--2 { background-color: rgba(100, 210, 80, .75); }
.stackedbarchart__color--3 { background-color: rgba(90, 165, 255, .75); }
.stackedbarchart__color--4 { background-color: hsla(0, 0%, 71%, .75); }
.stackedbarchart__color--5 { background-color: rgba(170, 90, 240, .75); }
.stackedbarchart__color--6 { background-color: hsla(0, 0%, 43%, .75); }
.stackedbarchart__color--7 { background-color: hsla(40, 26%, 55%, .75); }
.stackedbarchart__color--8 { background-color: rgba(240, 50, 50, .75); }
.stackedbarchart__color--9 { background-color: rgba(50, 200, 200, .75); }

.color-cycle {
    animation: color-cycle-animation 10s infinite;
}

@keyframes color-cycle-animation {
    0% { color: red; }
    16.66% { color: orange; }
    33.33% { color: yellow; }
    50% { color: green; }
    66.66% { color: blue; }
    83.33% { color: purple; }
    100% { color: red; }
}

.vbarchart {
    display:flex;
    align-items: flex-end;
    height:50px;
    width:100%;
}
.vbarchart__bar {
    display: inline-block;
    min-width: 10px;
    max-width: 50px;
    flex-grow: 1;
    margin-right: 5px;
}
.vbarchart__legendcolor {
    width: 20px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid black;
}
.vbarchart__color--0 { background-color: rgba(255, 180, 50, .75); }
.vbarchart__color--1 { background-color: rgba(255, 220, 90, .75); }
.vbarchart__color--2 { background-color: rgba(100, 210, 80, .75); }
.vbarchart__color--3 { background-color: rgba(90, 165, 255, .75); }
.vbarchart__color--4 { background-color: hsla(0, 0%, 71%, .75); }
.vbarchart__color--5 { background-color: rgba(170, 90, 240, .75); }
.vbarchart__color--6 { background-color: hsla(0, 0%, 43%, .75); }
.vbarchart__color--7 { background-color: hsla(40, 26%, 55%, .75); }
.vbarchart__color--8 { background-color: rgba(240, 50, 50, .75); }
.vbarchart__color--9 { background-color: rgba(50, 200, 200, .75); }