.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;
}

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

.stackedbarchart__color--0 { background-color: var(--dui-legend-color-0); }
.stackedbarchart__color--1 { background-color: var(--dui-legend-color-1); }
.stackedbarchart__color--2 { background-color: var(--dui-legend-color-2); }
.stackedbarchart__color--3 { background-color: var(--dui-legend-color-3); }
.stackedbarchart__color--4 { background-color: var(--dui-legend-color-4); }
.stackedbarchart__color--5 { background-color: var(--dui-legend-color-5); }
.stackedbarchart__color--6 { background-color: var(--dui-legend-color-6); }
.stackedbarchart__color--7 { background-color: var(--dui-legend-color-7); }
.stackedbarchart__color--8 { background-color: var(--dui-legend-color-8); }
.stackedbarchart__color--9 { background-color: var(--dui-legend-color-9); }

.color-cycle {
    animation: color-cycle-animation 5s infinite, bounce-animation 15s 10s infinite linear;
    transform-origin: center;
}

@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; }
}

@keyframes bounce-animation {
    0%  { transform: rotate(0deg) scale(1.0) }
    5% { transform: rotate(36deg) scale(1.25); }
    10% { transform: rotate(72deg) scale(1.5); }
    15% { transform: rotate(108deg) scale(1.25); }
    20% { transform: rotate(144deg) scale(1.0); }
    25% { transform: rotate(180deg) scale(1.25); }
    30% { transform: rotate(216deg) scale(1.5); }
    35% { transform: rotate(252deg) scale(1.25); }
    40% { transform: rotate(288deg) scale(1.0); }
    45% { transform: rotate(324deg) scale(1.0); }
    50% { transform: rotate(360deg) scale(1.0); }
    100% { transform: rotate(360deg) scale(1.0); }

}

@keyframes rotate-animation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.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: var(--dui-legend-color-0); }
.vbarchart__color--1 { background-color: var(--dui-legend-color-1); }
.vbarchart__color--2 { background-color: var(--dui-legend-color-2); }
.vbarchart__color--3 { background-color: var(--dui-legend-color-3); }
.vbarchart__color--4 { background-color: var(--dui-legend-color-4); }
.vbarchart__color--5 { background-color: var(--dui-legend-color-5); }
.vbarchart__color--6 { background-color: var(--dui-legend-color-6); }
.vbarchart__color--7 { background-color: var(--dui-legend-color-7); }
.vbarchart__color--8 { background-color: var(--dui-legend-color-8); }
.vbarchart__color--9 { background-color: var(--dui-legend-color-9); }

.donut-chart {
    position: relative;
    width: 227px;
    height: 227px;
    border-radius: 50%;
    margin:10px;
}

.donut-chart__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donutchart__legendcolor {

    width: 20px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid black;
}
.donut-chart__label {
    font-size: 14px;
    color: #666;
}

.donut-chart__value {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.donutchart__color--0 { background-color: var(--dui-legend-color-0); }
.donutchart__color--1 { background-color: var(--dui-legend-color-1); }
.donutchart__color--2 { background-color: var(--dui-legend-color-2); }
.donutchart__color--3 { background-color: var(--dui-legend-color-3); }
.donutchart__color--4 { background-color: var(--dui-legend-color-4); }
.donutchart__color--5 { background-color: var(--dui-legend-color-5); }
.donutchart__color--6 { background-color: var(--dui-legend-color-6); }
.donutchart__color--7 { background-color: var(--dui-legend-color-7); }
.donutchart__color--8 { background-color: var(--dui-legend-color-8); }
.donutchart__color--9 { background-color: var(--dui-legend-color-9); }