.contentcard.statistik .ccmenu .zurueck_knopf {
    display: none;
}



.contentcard.statistik .ccinhalt {
    display: grid;
    height: calc(100% - 92px);
    grid-template-columns: 300px auto;
    grid-template-rows: auto;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-areas:
        'liste ansicht';
}



.contentcard.statistik .ccinhalt .liste {
    grid-area: liste;
    background-color: #404040;
    border-radius: 4px;
    padding: 0px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.contentcard.statistik .ccinhalt .liste .kategorie {
    font-weight: bold;
    margin-top: 16px;
    padding: 8px;
}

.contentcard.statistik .ccinhalt .liste .kategorie:first-child {
    margin-top: 0px;
}

.contentcard.statistik .ccinhalt .liste .eintrag {
    padding: 8px;
    border-radius: 4px;
    transition: all 0.5s;
    margin-bottom: 1px;
    background-color: #353535;
    cursor: pointer;
    background-position: calc(100% - 25px) center;
    background-repeat: no-repeat;
    background-size: 16px;
}

.contentcard.statistik .ccinhalt .liste .eintrag:hover {
    background-color: #575757;
}

.contentcard.statistik .ccinhalt .liste .eintrag.aktiv {
    background-image: url(../../img/pfeil_rechts.png);
    background-color: #575757;
    background-position: calc(100% - 12px) center;
}

.contentcard.statistik .ccinhalt .liste .eintrag img {
    width: 24px;
    padding: 2px 16px 2px 4px;
    border-right: 1px solid #797979;
    margin-right: 16px;
    vertical-align: middle;
}

.contentcard.statistik .ccinhalt .liste .eintrag span {
    vertical-align: middle;
}

.contentcard.statistik .ccinhalt .liste .eintrag div {
    vertical-align: middle;
    font-weight: bold;
    display: inline-block;
    font-size: 12px;
    margin-left: 16px;
    color: #34a9ff;
    opacity: 1.0;
    transition: all 0.3s;
}



.contentcard.statistik .ccinhalt .ansicht {
    grid-area: ansicht;
    background-color: #404040;
    border-radius: 4px;
    padding: 0px;
    overflow-y: scroll;
    overflow-x: hidden;
    opacity: 1.0;
    transition: opacity 0.2s;
}



.contentcard.statistik .ccinhalt .ansicht .titelzeile {
    font-size: 20px;
    margin-bottom: 8px;
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid #727272;
}

.contentcard.statistik .ccinhalt .ansicht .titelzeile span {
    vertical-align: middle;
    width: 50%;
    display: inline-block;
    margin: 0px 16px;
}

.contentcard.statistik .ccinhalt .ansicht .titelzeile .uniknopf {
    padding: 8px;
}

.contentcard.statistik .ccinhalt .ansicht .titelzeile .uniknopf img {
    width: 16px;
}



.diagramm_balken_vertikal .balkencontainer {
    vertical-align: bottom;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    opacity: 0.5;
}

.diagramm_balken_vertikal .balkencontainer:hover {
    opacity: 1.0;
}

.diagramm_balken_vertikal .balkencontainer.jetzt {
    filter: brightness(1.5);
}

.diagramm_balken_vertikal .balken {
    vertical-align: bottom;
    display: block;
    padding: 0px;
    margin: 0px;
    background-color: #3574a2;
    border-radius: 0px;
}



.diagramm_balken_vertikal_zeitleiste div {
    font-size: 14px;
    display: inline-block;
    margin: 0px;
    padding: 0px;
    text-align: center;
    border-left: 1px solid #797979;
    border-right: 1px solid #797979;
    border-top: 1px dashed #797979;
}



.onlinemarker {
    display: inline-block;
    height: 16px;
    width: 16px;
    border-radius: 16px;
    margin: 16px;
    padding: 0px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-size: 12px;
    background-position: center center;
}

.onlinemarker.offline {
    background-color: #391616;
}

.onlinemarker.afk {
    background-color: #393916;
}

.onlinemarker.online {
    background-color: #17e51f;
    box-shadow: #17e51fba 0px 0px 16px 16px;
    animation-name: pulsieren;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}



.summentabelle {
    width: calc(100% - 8px);
}

.summentabelle td {
    text-align: center;
}

table .summentabelle td {
    background-color: #414141;
    padding: 4px;
}



.contentcard.statistik td a {
    vertical-align: middle;
    font-size: 12px;
    opacity: 0.5;
}

.contentcard.statistik td a:hover {
    opacity: 1.0;
}



@keyframes pulsieren {
  0%   {box-shadow: #17e51fba 0px 0px 16px 16px;}
  50%  {box-shadow: #17e51f87 0px 0px 16px 8px;}
  100% {box-shadow: #17e51fba 0px 0px 16px 16px;}
}



@media screen and (max-width: 600px) {
    
    .contentcard.statistik .ccmenu .zurueck_knopf {
        display: inline-block;
    }
    
    .contentcard.statistik .ccinhalt {
        grid-template-columns: 100% 0%;
    }
    
    .contentcard.statistik .ccinhalt.instat {
        grid-template-columns: 0% 100%;
    }
    
    
    .contentcard.statistik .ccinhalt .ansicht .titelzeile span {
        font-size: 12px;
    }
    
}