.stats__container {
    background-color: #005b80;
    background-image: url("/images/global/corona_stat_bg.jpg");
    background-repeat: round;
    padding: .5rem;
}

.stats__container--title {
    align-items: center;
    display: flex;
    padding: .5rem;
}

.stats__container--title h1 {
    color: white;
    font-size: 1.2rem;
    margin: 0 0 0 0;
}

.stats__group--title {
    align-items: center;
    display: flex;
    margin: .5rem;
}

.stats__group--title h2 {
    font-size: .85rem;
    line-height: 1.25rem;
    margin: 0 0 .5rem .5rem;
}

.stats__element--col1 {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 0 0 .75rem ;
    width: 97%;
}

.stats__element--col1-multirow {
    align-items: flex-end;
}

.stats__element--col1 h3,
.stats__element--col2 h3 {
    font-size: .8rem;
    font-weight: normal;
    line-height: 1rem;
    margin: 0 0 .25rem 0;
    width: 30%;
    white-space: nowrap;
}

.stats__element--col1-multirow {
    white-space: nowrap;
    flex-wrap: nowrap;
    flex-direction: row;
}

.stats__element--col1 h3.stats__align--left-multirow,
.stats__element--col1 p.stats__align--right-multirow {
    line-height: 1.1rem;
    margin-bottom: 0.5rem;
}

.stats__element--col1 h3.stats__align--left-multirow {
    width: 85%;
    white-space: normal;
    hyphens: none;
}

.stats__element--col1 p.stats__align--right-multirow {
    width: 25%;
    white-space: nowrap;
}

.stats__align--nowrap {
    white-space: nowrap;
    hyphens: none;
    word-wrap: none;
}

.stats__element--col2 {
    align-items: flex-start;
    display: flex;
    justify-content: space-around;
    margin: .75rem;
    width: 89%;
}

.stats__icon {
    fill: #005b80;
    height: 2.5rem;
    margin: 0 0 0 0;
    width: 2.5rem;
    flex-shrink: 0;
}

.stats__icon--s {
    height: 1.25rem;
    width: 1.25rem;
}

.stats__icon--m {
    height: 2rem;
    width: 2rem;
}

.stats__container--title .stats__icon {
    fill: white;
    margin: -.75rem .5rem 0 0;
}

.stats__value {
    color: #005b80;
    font-size: .9rem;
    font-weight: normal;
    line-height: 1rem;
    margin: 0 0 0 0;
}

.stats__value--emphasize {
    font-size: 1rem;
    font-weight: bold;
    margin: 0 1rem 0 0;
    text-align: right;
}

.stats__element--col1 .stats__value--emphasize {
    width: 30%;
}

.stats__align--center-1row,
.stats__element--col1 .stats__value--emphasize.stats__align--center-1row {
    margin: .5rem 0 .5rem 0;
    text-align: center;
    width: 95%;
}

.stats__align--right-1row,
.stats__element--col1 .stats__value--emphasize.stats__align--right-1row {
    margin: .5rem 0 .5rem 0;
    text-align: right;
    width: 95%;
}

.stats__align--left-1row,
.stats__element--col1 .stats__value--emphasize.stats__align--left-1row {
    margin: .5rem 0 .5rem 0;
    text-align: left;
    width: 95%;
}

.stats__align--left-multirow,
.stats__element--col1 .stats__value--emphasize.stats__align--left-multirow {
    margin: .5rem 0 .5rem 0;
    text-align: left;
    width: 95%;
    line-height: 1rem;
}

.stats__value--smaller {
    font-size: .9rem;
    margin: 0 0.75rem .5rem 0;
    text-align: right;
    width: 55%;
}

.stats__value--smaller-wrap {
    width: 100%;
}

span.stats__value--nowrap {
    text-align: right;
    white-space: nowrap;
}

.stats__group {
    background-color: white;
    border: 1px solid #005b80;
    border-radius: .5rem;
    padding: .25rem ;
}

.stats__date {
    font-size: .6rem;
    line-height: 1rem;
    margin: 0 .5rem .5rem 0;
    text-align: right;
    width: 98%;
}

.stats__date--insidebox {
    color: #464646;
}

.stats__align--center {
    text-align: center;
    width: 44.5%;
}

.stats__align--justify {
    text-align: justify;
}

.stats__multigroup hr,
.stats__element--horizontaldivider {
    border: none;
    border-top: 2px #005b80 dotted;
    margin: 1rem .75rem 1rem .75rem;
}

.stats__button {
    background-color: #005b80;
    border-radius: 1rem;
    color: #ffffff;
    height: 1.75rem;
    padding: 0.25rem;
    width: 5.5rem;
    display: flex;
    justify-content: space-evenly;
    border: outset 2px hsl(197, 100%, 30%);
    justify-self: right;
}

.stats__button--close {
    background-color: #ffffff;
    border: none;
    width: 2rem;
}

.stats__button--close .stats__button-icon {
    fill: #005b80;
    height: 1.5rem;
    width: 1.5rem;

}

.stats__container--title-with-button {
    justify-content: space-between;
}

.stats__group--icon-with-header{
    align-items: center;
    display: flex;
}

.stats__source-link {
    font-size: .6rem;
    line-height: 1rem;
    margin: .5rem;
    text-align: right;
    align-items: flex-end;
    width: 90%;
}

/* add by shanhong, für Link für LGL, RKI brauchen wir keine Margins*/
.stats__source-data-link {
    font-size: .6rem;
    line-height: 1rem;
    text-align: right;
    align-items: flex-end;
    width: 98%;
}

/* Liniendiagramm */


.stats__element--chart p.chart__heading {
    padding: 0 0.75rem 0 0.75rem;
    margin: 0;
    font-size: 0.7rem;
    line-height: 1rem;
    color: #005b80;
}

.stats__element--chart p.chart__heading.chart__heading--extraspace {
    padding: 0.75rem 0.75rem 0 0.75rem;
}

.stats__linechart {
    height: 10rem;
    width: 96%;
}

/* Hospitalisierungsindex */

.stats__group--title.stats__group--index {
    margin-left: 0;
}

.stats__index-wrapper {
    width: 98%;
}

.stats__index {
    font-size: 2rem;
    font-weight: bold;
    margin: 0 auto .5rem auto;
    text-align: center;
    width: 7.5rem;
}

/* Corona-Ampel-Farben für Indexzahl */

.stats__ampel-box--green {
    padding: 0.75rem;
    border-radius: 2rem;
    border: 5px solid #6a9519;
}

.stats__ampel-box--green .stats__index-color {
    color: #6a9519;
}

.stats__ampel-box--yellow {
    padding: 0.75rem;
    border-radius: 2rem;
    border: 5px solid #F0B80F;
    box-shadow:  1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black;

}

.stats__ampel-box--yellow .stats__index-color {
    color: #F0B80F;
    text-shadow:  1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black;

}

.stats__ampel-box--orange {
    padding: 0.75rem;
    border-radius: 2rem;
    border: 5px solid #e66300;
}

.stats__ampel-box--orange .stats__index-color {
    color: #e66300;
}

.stats__ampel-box--red {
    padding: 0.75rem;
    border-radius: 2rem;
    border: 5px solid #990000; /*#d70f00*/
}

.stats__ampel-box--red .stats__index-color {
    color: #990000; /*#d70f00*/
}


/* Abwassermonitoring */

#linechart_wastewater {
    height: 5rem;
    margin-bottom: 0.5rem;
}

.stats__ampel-box--bv-dark-red,
.stats__ampel-box--bv-light-red,
.stats__ampel-box--bv-orange,
.stats__ampel-box--bv-dark-yellow,
.stats__ampel-box--bv-light-yellow {
    display: flex;
    padding: 0.75rem 1rem 0.75rem 0.75rem;
    border-radius: 2rem;
    align-items: center;
    font-size: 1rem;
    height: 3.6rem;
    min-width: 70%;
}

.stats__ampel-box--bv-dark-red {
    border: 5px solid #990000;
}

.stats__ampel-box--bv-dark-red .stats__index-value {
    color: #990000;
}

.stats__ampel-box--bv-dark-red .stats__index-value svg{
    fill: #990000;
    transform: rotate(-45deg);
}

.stats__ampel-box--bv-light-red {
     border: 5px solid #CC0000;
}

.stats__ampel-box--bv-light-red .stats__index-value {
    color: #CC0000;
}

.stats__ampel-box--bv-light-red .stats__index-value svg {
    fill: #CC0000;
    transform: rotate(-22.5deg);
}

.stats__ampel-box--bv-orange {
    border: 5px solid #EF6C00;
}

.stats__ampel-box--bv-orange .stats__index-value {
    color: #EF6C00;
}

.stats__ampel-box--bv-orange .stats__index-value svg{
    fill: #EF6C00;
}


.stats__ampel-box--bv-dark-yellow {
    border: 5px solid #FBC02D;
    box-shadow:  1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black;
}

.stats__ampel-box--bv-dark-yellow .stats__index-value{
    color: #FBC02D;
    text-shadow:  1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black;
}

.stats__ampel-box--bv-dark-yellow .stats__index-value svg{
    fill: #FBC02D;
    transform: rotate(22.5deg);
    filter: drop-shadow(1px  1px 0px black)
            drop-shadow(1px  -1px 0px black)
            drop-shadow(-1px  1px 0px black)           
            drop-shadow(-1px  -1px 0px black); 
}


.stats__ampel-box--bv-light-yellow {
    border: 5px solid #FDEB3D;
    box-shadow:  1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black;
}

.stats__ampel-box--bv-light-yellow .stats__index-value {
    color: #FDEB3D;
    text-shadow:  1px  1px 1px black,
    1px -1px 1px black,
   -1px  1px 1px black,
   -1px -1px 1px black;
}

.stats__ampel-box--bv-light-yellow .stats__index-value svg{
    fill: #FDEB3D;
    transform: rotate(45deg);
    filter: drop-shadow(1px  1px 0px black)
            drop-shadow(1px  -1px 0px black)
            drop-shadow(-1px  1px 0px black)           
            drop-shadow(-1px  -1px 0px black); 
}


@media only all and (min-width: 49.625em) {
    .stats__ampel-box--bv-dark-red,
    .stats__ampel-box--bv-light-red,
    .stats__ampel-box--bv-orange,
    .stats__ampel-box--bv-dark-yellow,
    .stats__ampel-box--bv-light-yellow {
        min-width: 45%;
    }
}

@media only all and (min-width: 55em) {

    .stats__container--content {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        padding: 0 0 0 0;
        align-items: stretch;
    }

    .stats__container--title h1 {
        margin: 0 0 0 .5rem;
    }

    .stats__multigroup  {
        margin: .25rem;
        align-items: stretch;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .stats__multigroup > div {
        flex: 1;
        align-content: stretch;
        justify-content: space-around;
    }

    .stats__multigroup > div:first-child {
        align-content: stretch;
        justify-content: space-between;
    }

    .stats__multigroup > div:last-child { /* NOTE: may break layout on iPad Pro 12'' */
        /*flex-grow: 0;*/
        flex-shrink: 1;
        flex-basis: auto;
    }

    .stats__multigroup hr {
        width: 90%;
    }

    .stats__element {
        flex-wrap: wrap;
    }

    .stats__group {
        flex-wrap: wrap;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-content: flex-start;
    }

    .stats__group > div {
        align-items: flex-start;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .stats__group--2of2col {
        width: 100%;
    }

    .stats__group > div.stats__group--2col,
    .stats__group--2col {
        display: flex;
        flex: 1;
        align-items: flex-end;
        flex-direction: row;
        justify-content: space-evenly;
        margin: .5rem 0 .5rem 0;
    }

    .stats__group--1of2col {
        width: 50%;
    }

    .stats__group--border-right {
        border-right: 2px #005b80 dotted;
        padding-right: 0.5rem;
        margin-bottom: 0.5rem;
        width: 48%;
    }

    .stats__group.grow-faster {
        flex-grow: 2.75;
    }

    .stats__group.grow-slower {
        flex-grow: 1.25;
    }

    .stats__infolayer-modal {
        width:570px;
    }

    .stats__linechart {
        /*height: 9.5rem;*/
        padding: 0;
    }

    .stats__element--verticaldivider {
        border: none;
        border-left: 2px #005b80 dotted;
        min-height: 7.5rem;
        margin: 0 0.5rem 0.5rem 1rem;
    }

    .stats__element--horizontaldivider {
        display: none;
    }

    .stats__ampel-box--bv-dark-red,
    .stats__ampel-box--bv-light-red,
    .stats__ampel-box--bv-orange,
    .stats__ampel-box--bv-dark-yellow,
    .stats__ampel-box--bv-light-yellow {
        min-width: 80%;
    }

    /*#linechart_wastewater {
        height: 3.35rem;
    }*/
}