.fl-wr {
    display: flex; flex-wrap: wrap; margin-bottom: 24px;
}	
.chart-menu {
    width: 26%;
    order: 2;
    padding: 10px 0 0 3%;
}

.select-wr {
    width: 100%;
    text-align: center;
    padding: 10px 0 15px 0;
}
select#items-select {
    font-family: Barlow, sans-serif;
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
}

.chart-menu a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #d2d9dd;
    margin: 4px 5px 5px 0px;
    font-size: 15px;
    text-decoration: none;
    border-radius: 3px;
    color: black;
    position: relative;
}

.chart-menu a:hover, .chart-menu a.sel {
    border: 1px solid #1B69BF !important;
    background: #1B69BF !important; 
    color: white;
}



.chart-menu a.i-obvykly {
    background: #d10f2b;
    color: white;
}

.chart-menu a.i-casny-pozdni {
    background: #EEB9C0;
}



.chart-menu b {
    display: block;
    font-weight: bold;
    padding: 0 0 5px 0;
    color: #4987cc;
}

.chart-menu b:nth-of-type(2){
    margin-top: 10px;
}


.chart-wr {
    position: relative;
    text-align: center;
    width: 71%;
    order: 1;
}

#chart svg {
    position: relative; z-index: 2;
}

.grafika-obal .chart-wr h3 {
    position: absolute;
    text-align: center;
    width: 50%;
    top: 12%;
    left: 25%;
    margin: 0 auto;
    padding: 0;
    font-family: Barlow, sans-serif;
    font-size: 25px;
    z-index: 1;
    line-height: 1.3;
}
.grafika-obal .chart-wr h3.h-intro {
    transform: translateY(-50%);
    top: 50% !important;
    z-index: 4;
    width: 40%;
    left: 30%;
}
.grafika-obal .chart-wr h3 em {
    display: block;
    font-size: 17px;
    max-width: 330px;
    margin: 0 auto;
}
.grafika-obal .chart-wr h3 em i {
    padding-bottom: 10px;
    display: block;
    color: #525E64;
    font-style: normal;
    font-size: 14px;
}
.grafika-obal .chart-wr h3.h-intro em {
    max-width: 170px;
    margin: 0 auto;
}

span.title-comment {
    line-height: 1.3;
    display: inline-block;
    font-size: 19px;
}

.grafika-obal span.i-wr {
    width: 61%;
    display: block;
    margin: 0 auto;
    max-width: 150px;
}
.grafika-obal span.i-wr.fl {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    max-width: 115px;
}
.grafika-obal span.i-wr-fl {
    width: 50%; cursor: pointer;
}

.grafika-obal #chart .tl-predchozi, .grafika-obal #chart .tl-dalsi {
    transform: scale(0.85);
}

.current-graphic .grafika-obal .tl-predchozi {
    left: 55px;
}
.current-graphic .grafika-obal .tl-dalsi {
    right: 55px;
}

span.obvykly {
    display: block;
    font-size: 13px;
    font-family: Barlow, sans-serif;
    font-style: normal;
    text-align: left;
    margin: 7px 0 0 10px;
}
.obvykly span.type {
    position: relative;
    padding: 0 0 3px 15px;
    margin: 0 0 3px 0;
    display: block;
    color: #000000;
    line-height: 1;
    font-size: 16px;
}
.obvykly span.type::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #D10F2B;
    position: absolute;
    left: -5px;
    top: 0px;
}
.obvykly b, .casny-pozdni b {
    border-left: 1px solid #d7d7d7;
    display: inline-block;
    margin: 3px 1px;
    color: #000000;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1;
    font-weight: bold !important;
}

span.casny-pozdni {
    display: block;
    font-size: 13px;
    font-family: Barlow, sans-serif;
    font-style: normal;
    text-align: left;
    margin: 7px 0 0 10px;
}
.casny-pozdni span.type {
    position: relative;
    padding: 0 0 3px 15px;
    margin: 12px 0 3px 0;
    display: block;
    color: #000000;
    line-height: 1;
    font-size: 16px;
}
.casny-pozdni span.type::before {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #E68B98;
    position: absolute;
    left: -5px;
    top: 0px;
}





.grafika-obal i.info-icon {
    display: block;
    float: left;
    width: 18px;
    height: 18px;
    border-radius: 20px;
    border: 1px solid #bdd2ed;
    text-align: center;
    line-height: 18px;
    margin: 4px 6px 0 0;
    font-size: 13px;
    color: #2f6ac2;
    background: #e9f0f8;
    font-weight: bold;
}




#chart{
    text-align: center;     position: relative;
}
		
.monthArc {
    fill: #B4B9BB;
    stroke: #E6E7E8;
    cursor: pointer;
}
.monthArc.white {
    fill: white;
}
.monthArc.light-red {
    fill: #E68B98;
stroke: #E68B98;
}

.monthArc.red {
    fill: #D10F2B;
    stroke: #D10F2B;
}
path#monthArc-10, path#monthArc-11 {
    opacity: 0.2;
}
path#monthArc-10:hover, path#monthArc-11:hover {
    opacity: 1;
}


path#monthArc-10:hover ~ #monthText-10 {
    opacity: 1;
}
path#monthArc-11:hover ~ #monthText-11 {
    opacity: 1;
}

span.month-legend {
    cursor: pointer;
}
span.month-legend span {
    font-size: 15px;
    padding: 7px 11px 7px 24px;
    display: block;
    margin: 0 0 10px 0;
    background: #E9F0F8;
    border-radius: 3px;
    line-height: 1.3;
    position: relative;
}
span.month-legend span::before {
    content: "✖";
    font-size: 13px;
    position: absolute;
    left: 8px;
    top: 8px;
    font-weight: bold;
    color: #D10F2B;
}


span.month-legend span b {
    display: inline;
    color: black;
}
.month-legend em {
    display: inline-block;
    color: #1b69bf;
    text-decoration: underline;
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
    padding-left: 3px;
}

.monthText {
    text-transform: uppercase; letter-spacing: 2px;
    font-size: 13px;
    font-family: 'Barlow', sans-serif;
    fill: #ffffff;
    cursor: pointer;
}
.monthText.selected-month {
    fill: black;
    font-weight: bold;
    text-shadow: 0 0 1px rgba(0,0,0,0.5);
}
.monthText.selected-month.light-red, .monthText.selected-month.brown {
    fill: black;
}
.monthText.selected-month.red {
    fill: white;
}
.monthText.white:hover {
    fill: black;
}

#monthText-10, #monthText-11 {
    opacity: 0.2;
}
#monthText-10:hover, #monthText-11:hover {
    opacity: 1;
}

[data-index="0"].white:hover ~ [data-index="0"]  {
    fill: black;
}
[data-index="1"].white:hover ~ [data-index="1"]  {
    fill: black;
}
[data-index="2"].white:hover ~ [data-index="2"]  {
    fill: black;
}
[data-index="3"].white:hover ~ [data-index="3"]  {
    fill: black;
}
[data-index="4"].white:hover ~ [data-index="4"]  {
    fill: black;
}
[data-index="5"].white:hover ~ [data-index="5"]  {
    fill: black;
}
[data-index="6"].white:hover ~ [data-index="6"]  {
    fill: black;
}
[data-index="7"].white:hover ~ [data-index="7"]  {
    fill: black;
}
[data-index="8"].white:hover ~ [data-index="8"]  {
    fill: black;
}
[data-index="9"].white:hover ~ [data-index="9"]  {
    fill: black;
}
[data-index="10"].white:hover ~ [data-index="10"]  {
    fill: black;
}
[data-index="11"].white:hover ~ [data-index="11"]  {
    fill: black;
}





@media screen and (min-width: 650px) {
    .chart-menu a:hover::before {
        content: "";
        width: 100px;
        height: 100px;
        position: absolute;
        bottom: 100%;
        left: 50%;
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: center center;
        transform: translateX(-50%);
        box-shadow: 0 0 5px #2f6ac2;
        border-radius: 10px;
        margin: 0px 0 10px 0;
    }
    .chart-menu a:nth-of-type(1):hover::before {background-image: url(./assets/ambrosie.jpg);}
    .chart-menu a:nth-of-type(2):hover::before {background-image: url(./assets/borovice.jpg);}
    .chart-menu a:nth-of-type(3):hover::before {background-image: url(./assets/briza.jpg);}
    .chart-menu a:nth-of-type(4):hover::before {background-image: url(./assets/buk.jpg);}
    .chart-menu a:nth-of-type(5):hover::before {background-image: url(./assets/dub.jpg);}
    .chart-menu a:nth-of-type(6):hover::before {background-image: url(./assets/habr.jpg);}
    .chart-menu a:nth-of-type(7):hover::before {background-image: url(./assets/chmel.jpg);}
    .chart-menu a:nth-of-type(8):hover::before {background-image: url(./assets/jasan.jpg);}
    .chart-menu a:nth-of-type(9):hover::before {background-image: url(./assets/javor.jpg);}
    .chart-menu a:nth-of-type(10):hover::before {background-image: url(./assets/jilek.jpg);}
    .chart-menu a:nth-of-type(11):hover::before {background-image: url(./assets/jirovec.jpg);}
    .chart-menu a:nth-of-type(12):hover::before {background-image: url(./assets/jitrocel.jpg);}
    .chart-menu a:nth-of-type(13):hover::before {background-image: url(./assets/kopriva.jpg);}
    .chart-menu a:nth-of-type(14):hover::before {background-image: url(./assets/kukurice.jpg);}
    .chart-menu a:nth-of-type(15):hover::before {background-image: url(./assets/lipa.jpg);}
    .chart-menu a:nth-of-type(16):hover::before {background-image: url(./assets/lipnice.jpg);}
    .chart-menu a:nth-of-type(17):hover::before {background-image: url(./assets/liska.jpg);}
    .chart-menu a:nth-of-type(18):hover::before {background-image: url(./assets/merlik.jpg);}
    .chart-menu a:nth-of-type(19):hover::before {background-image: url(./assets/olse.jpg);}
    .chart-menu a:nth-of-type(20):hover::before {background-image: url(./assets/oresak.jpg);}
    .chart-menu a:nth-of-type(21):hover::before {background-image: url(./assets/pampeliska.jpg);}
    .chart-menu a:nth-of-type(22):hover::before {background-image: url(./assets/pelynek.jpg);}
    .chart-menu a:nth-of-type(23):hover::before {background-image: url(./assets/platan.jpg);}
    .chart-menu a:nth-of-type(24):hover::before {background-image: url(./assets/psarka.jpg);}
    .chart-menu a:nth-of-type(25):hover::before {background-image: url(./assets/psenice.jpg);}
    .chart-menu a:nth-of-type(26):hover::before {background-image: url(./assets/srha.jpg);}
    .chart-menu a:nth-of-type(27):hover::before {background-image: url(./assets/stovik.jpg);}
    .chart-menu a:nth-of-type(28):hover::before {background-image: url(./assets/tis.jpg);}
    .chart-menu a:nth-of-type(29):hover::before {background-image: url(./assets/topol.jpg);}
    .chart-menu a:nth-of-type(30):hover::before {background-image: url(./assets/vrba.jpg);}
    .chart-menu a:nth-of-type(31):hover::before {background-image: url(./assets/zito.jpg);}
}


@media screen and (max-width: 1200px) { 
    .grafika-obal .chart-wr h3 {
        top: 18%;  
        width: 60%;
        left: 20%;
        line-height: 1.1;
    }
    .grafika-obal .chart-wr h3.h-intro {
        width: 50%;
        left: 25%;
    }
    span.title-comment {
        font-size: 15px;
        line-height: 1.3;
        display: inline-block;
    }
}
@media screen and (max-width: 1024px) { 

        .chart-wr {
            width: 100%;
        }
                
        .chart-menu {
            width: 100%;
        }

        .monthText {
            letter-spacing: 0;
        }
        .grafika-obal .chart-wr h3 {top: 19%;}
        .grafika-obal #chart .tl-predchozi, .grafika-obal #chart .tl-dalsi {
            transform: scale(0.60);
            top: calc(50% - 30px);
        }
        .current-graphic .grafika-obal .tl-predchozi {
            left: 25px;
        }
        .current-graphic .grafika-obal .tl-dalsi {
            right: 25px;
        }

        span.month-legend span {
            margin-top: 10px;
        } 
        
        .grafika-obal .chart-wr h3.h-intro {
            transform: translateY(-50%);
            top: 50% !important;
            z-index: 4;
            width: 52%;
            left: 24%;
        }
        .grafika-obal span.i-wr.fl {
            width: 44%;
        }


        .infogram-chart.img-wr {
            margin-right: 6px;
            margin-left: 6px;
        }


}


@media screen and (max-width: 600px) { 
    .grafika-obal span.i-wr {
        max-width: 100px; margin-top: -12px;
    }

    .grafika-obal .h-intro span.i-wr {
        margin-top: 0;
    }


    .grafika-obal .chart-wr h3 em i {
        padding-bottom: 5px;
    }    
}
@media screen and (max-width: 480px) { 
    .grafika-obal .chart-wr h3 {
        font-size: 23px;
    }
    .obvykly b, .casny-pozdni b {
        padding: 0px 6px;
        font-size: 13px;
    }
    .obvykly span.type::before, .casny-pozdni span.type::before {
        width: 14px;
        height: 14px;
    }
    .chart-menu {
        padding: 5px 20px 0 20px;
        box-sizing: border-box;
    }
    span.obvykly {
        margin-top: 5px;
    }


}

@media screen and (max-width: 380px) { 
    .grafika-obal .chart-wr h3 {
        top: 11%; font-size: 21px;
    }
}


/* @media screen and (max-width: 380px) { 
    .grafika-obal span.i-wr.fl.second {
        display: none;
    }
}
 */