.chart {
    width: 100%;
    height: 500px;
    background: #ebf4ff;
    height: 550px;
    margin-top: 30px
}

.tab {
    float: right;
    color: #fff;
    background-color: #263547;
    width: 20%;
    height: 100%
}

.chart1 {
    width: 80%;
    position: relative;
    float: left;
    height: 100%
}

.tab h3 {
    color: #33475d;
    padding: 5px;
    font-weight: 600;
    background-color: #fff;
    margin: 20px 0px 10px 0px;
    text-align: center
}

.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: 0;
    outline: 0;
    text-align: left;
    cursor: pointer;
    transition: .3s;
    font-size: 17px
}

.tabcontent {
    float: left;
    padding: 0px 12px;
    width: 100%;
    border-left: 0;
    height: 340px
}

.top-value {
    margin-top: -36px;
    position: absolute;
    text-decoration: none;
    font-weight: 300;
    margin-left: -17px;
    color: #33475d
}

.start-value {
    position: absolute;
    bottom: -25px;
    margin-left: -21px;
    color: #33475d;
    font-size: 12px;
    font-weight: 900
}

.middle-value {
    background-color: #fff;
    color: #33475d;
    text-align: center;
    padding: 2px 6px 2px 6px;
    position: absolute;
    left: 4px;
    margin-bottom: 0px;
    top: 30%;
    z-index: 9998;
    border-radius: 3px
}

.middle-value span {
    position: absolute;
    width: 11px;
    height: 11px;
    top: 23.5px;
    left: 14px;
    background-color: #fff;
    transform: rotate(45deg);
    cursor: pointer;
    transition: .3s;
    z-index: 9999
}

.chart-end {
    background-color: #ddd;
    width: 100%;
    height: 50px;
    bottom: 28px;
    position: absolute
}

.chart-end-list {
    text-align: center;
    margin-top: 10px
}

.chart-end-list li {
    float: left;
    list-style: none;
    position: relative;
    margin: 5px;
    border-right: 1px solid #afadad
}

.chart-end-list li a {
    text-decoration: none;
    margin: 10px;
    font-size: 13px;
    color: #33475d
}

.chart-end-list li:before {
    cursor: pointer;
    content: '';
    width: 36px;
    height: 25px;
    position: absolute;
    margin-left: -35px;
    z-index: 9999;
    border-radius: 2px;
    margin-top: -3px;
    line-height: 27px
}

.chart-end-arrow {
    position: absolute;
    width: 11px;
    height: 11px;
    top: 15.5px;
    left: 15px;
    background-color: #fff;
    transform: rotate(45deg);
    cursor: pointer;
    transition: .3s;
    z-index: 9970
}

.chart-end-list li:nth-child(1) {
    width: 23%
}

.chart-end-list li:nth-child(2) {
    width: 18%
}

.chart-end-list li:nth-child(3) {
    width: 29%
}

.chart-end-list li:last-child {
    width: 22%
}

.chart-end-list li:nth-child(1):before {
    background-color: #f46275;
    z-index: 1
}

.chart-end-list li:nth-child(2):before {
    background-color: #25a7f8;
    z-index: 1
}

.chart-end-list li:nth-child(3):before {
    background-color: #33475d;
    margin-left: -4px;
    z-index: 1
}

.chart-end-list li:last-child:before {
    content: '123';
    margin-left: -19px;
    background-color: white;
    z-index: 1
}

.chart1 h3 {
    color: #33475d;
    margin: 25px;
    font-weight: 500
}

.chart-radio {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 12px;
    transition: all linear .1s;
    transition-timing-function: linear;
    color: #fff
}

.chart-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

.checkmark {
    position: absolute;
    top: 7px;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #fff;
    border-radius: 50%
}

.chart-radio:hover input~.checkmark {
    background-color: #fff
}

.chart-radio input:checked~.checkmark {
    background-color: #ffff
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.chart-radio input:checked~.checkmark:after {
    display: block
}

.chart-radio .checkmark:after {
    top: 1.2px;
    left: 1.2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #c01f25
}

.checkmark:before {
    content: "→";
    position: absolute;
    display: none;
    transform: rotate(180deg)
}

.chart-radio input:checked~.checkmark:before {
    display: block
}

.chart-radio .checkmark:before {
    top: -9px;
    left: 120px;
    font-size: 23px
}

.list-bar-j {
    -webkit-animation: expand 2s
}

@-webkit-keyframes expand {
    0% {
        height: 0px
    }
    100% {
        height: 180px
    }
}

.list-bar-f {
    -webkit-animation: expand 1s
}

@-webkit-keyframes expand {
    0% {
        height: 0px
    }
    100% {
        height: 180px
    }
}

.list-bar-f1 {
    -webkit-animation: expand1 1s
}

@-webkit-keyframes expand1 {
    0% {
        height: 0px
    }
    100% {
        height: 250px
    }
}

.list-bar-m {
    -webkit-animation: expand 1s
}

@-webkit-keyframes expand {
    0% {
        height: 0px
    }
    100% {
        height: 180px
    }
}

.list-bar-m1 {
    -webkit-animation: expand2 1s
}

@-webkit-keyframes expand2 {
    0% {
        height: 0px
    }
    100% {
        height: 60px
    }
}

.list-bar-m2 {
    -webkit-animation: expand3 1s
}

@-webkit-keyframes expand3 {
    0% {
        height: 0px
    }
    100% {
        height: 150px
    }
}

.list-bar-a {
    -webkit-animation: expand4 1s
}

@-webkit-keyframes expand4 {
    0% {
        height: 0px
    }
    100% {
        height: 80px
    }
}

.list-bar-a1 {
    -webkit-animation: expand 1s
}

@-webkit-keyframes expand {
    0% {
        height: 0px
    }
    100% {
        height: 180px
    }
}

.list-bar-a2 {
    -webkit-animation: expand5 1s
}

@-webkit-keyframes expand5 {
    0% {
        height: 0px
    }
    100% {
        height: 40px
    }
}

.list-bar-a3 {
    -webkit-animation: expand6 1s
}

@-webkit-keyframes expand6 {
    0% {
        height: 0px
    }
    100% {
        height: 225px
    }
}

.list-bar-a4 {
    -webkit-animation: expand7 1s
}

@-webkit-keyframes expand7 {
    0% {
        height: 0px
    }
    100% {
        height: 70px
    }
}

.list-bar-y {
    -webkit-animation: expand 1s
}

@-webkit-keyframes expand {
    0% {
        height: 0px
    }
    100% {
        height: 180px
    }
}

.list-bar-y1 {
    -webkit-animation: expand8 1s
}

@-webkit-keyframes expand8 {
    0% {
        height: 0px
    }
    100% {
        height: 50px
    }
}

.list-bar-y2 {
    -webkit-animation: expand 1s
}

@-webkit-keyframes expand {
    0% {
        height: 0px
    }
    100% {
        height: 180px
    }
}

.list-bar-y3 {
    -webkit-animation: expand9 1s
}

@-webkit-keyframes expand9 {
    0% {
        height: 0px
    }
    100% {
        height: 30px
    }
}

.list-bar-y4 {
    -webkit-animation: expand10 1s
}

@-webkit-keyframes expand10 {
    0% {
        height: 0px
    }
    100% {
        height: 200px
    }
}

.list-bar-ju {
    -webkit-animation: expand2 1s
}

@-webkit-keyframes expand2 {
    0% {
        height: 0px
    }
    100% {
        height: 60px
    }
}

.list-bar-ju1 {
    -webkit-animation: expand11 1s
}

@-webkit-keyframes expand11 {
    0% {
        height: 0px
    }
    100% {
        height: 194px
    }
}

.list-bar-ju2 {
    -webkit-animation: expand2 1s
}

@-webkit-keyframes expand2 {
    0% {
        height: 0px
    }
    100% {
        height: 60px
    }
}

.list-bar-ju3 {
    -webkit-animation: expand 1s
}

@-webkit-keyframes expand {
    0% {
        height: 0px
    }
    100% {
        height: 180px
    }
}

.list-bar-ly {
    -webkit-animation: expand10 1s
}

@-webkit-keyframes expand10 {
    0% {
        height: 0px
    }
    100% {
        height: 200px
    }
}

.list-bar-ly1 {
    -webkit-animation: expand4 1s
}

@-webkit-keyframes expand4 {
    0% {
        height: 0px
    }
    100% {
        height: 80px
    }
}

.list-bar-ly2 {
    -webkit-animation: expand 1s
}

@-webkit-keyframes expand {
    0% {
        height: 0px
    }
    100% {
        height: 180px
    }
}

.list-bar-g {
    -webkit-animation: expand10 1s
}

@-webkit-keyframes expand10 {
    0% {
        height: 0px
    }
    100% {
        height: 200px
    }
}

.list-bar-g1 {
    -webkit-animation: expand9 1s
}

@-webkit-keyframes expand9 {
    0% {
        height: 0px
    }
    100% {
        height: 30px
    }
}

.list-bar-g2 {
    -webkit-animation: expand8 1s
}

@-webkit-keyframes expand8 {
    0% {
        height: 0px
    }
    100% {
        height: 50px
    }
}

.list-bar-g3 {
    -webkit-animation: expand 1s
}

@-webkit-keyframes expand {
    0% {
        height: 0px
    }
    100% {
        height: 180px
    }
}

.list-bar-s {
    -webkit-animation: expand1 1s
}

@-webkit-keyframes expand1 {
    0% {
        height: 0px
    }
    100% {
        height: 250px
    }
}

.list-bar-s1 {
    -webkit-animation: expand1 1s
}

@-webkit-keyframes expand1 {
    0% {
        height: 0px
    }
    100% {
        height: 250px
    }
}

.list-bar-s2 {
    -webkit-animation: expand1 1s
}

@-webkit-keyframes expand1 {
    0% {
        height: 0px
    }
    100% {
        height: 250px
    }
}

.list-bar-o {
    -webkit-animation: expand12 1s
}

@-webkit-keyframes expand12 {
    0% {
        height: 0px
    }
    100% {
        height: 280px
    }
}

.list-bar-n {
    -webkit-animation: expand12 1s
}

@-webkit-keyframes expand12 {
    0% {
        height: 0px
    }
    100% {
        height: 280px
    }
}

.list-bar-n1 {
    -webkit-animation: expand13 1s
}

@-webkit-keyframes expand13 {
    0% {
        height: 0px
    }
    100% {
        height: 304px
    }
}

.list-bar-n2 {
    -webkit-animation: expand13 1s
}

@-webkit-keyframes expand13 {
    0% {
        height: 0px
    }
    100% {
        height: 304px
    }
}

.list-bar-d {
    -webkit-animation: expand14 1s
}

@-webkit-keyframes expand14 {
    0% {
        height: 0px
    }
    100% {
        height: 300px
    }
}

.list-bar-d1 {
    -webkit-animation: expand14 1s
}

@-webkit-keyframes expand14 {
    0% {
        height: 0px
    }
    100% {
        height: 300px
    }
}

#q-graph {
    display: block;
    position: relative;
    width: 600px;
    height: 340px;
    margin: 1.1em 0 0;
    padding: 0;
    background: transparent;
    font-size: 11px;
    border: 0;
    border-bottom: 1px solid #afadad
}

#q-graph tr,
#q-graph th,
#q-graph td {
    position: absolute;
    bottom: -1px;
    width: 150px;
    z-index: 2;
    margin: 0;
    padding: 0;
    text-align: center
}

#q-graph #q1 {
    left: 0
}

#q-graph #q2 {
    left: 100px
}

#q-graph #q3 {
    left: 200px
}

#q-graph #q4 {
    left: 300px
}

#q-graph #q5 {
    left: 400px
}

#q-graph .bar {
    width: 50px;
    border: 1px solid;
    border-bottom: 0;
    color: #fff
}

#q-graph .sent {
    left: 13px;
    background-color: #3e5670
}