#wearedev_chart_addons {

}

#wearedev_chart_addons ul.available-addons {
    display: block;
    overflow: hidden;
    margin: 0 -5px;
}

#wearedev_chart_addons ul.available-addons li {
    display: inline-block;
    float: left;
    width: calc(25% - 10px);
    padding: 6px;
    box-sizing: border-box;
    margin: 5px;
    opacity: 1;
    height: 120px;
    line-height: 200px;
    background-color: #f7f7f7;
    border: 1px solid #cccccc;
    color: #555555;
    font-size: 13px;
    text-align: center;
    -webkit-box-shadow: 0 1px 0 #ccc;
    box-shadow: 0 1px 0 #ccc;
    border-radius: 3px;
    cursor: pointer;
    background-image: url(../images/wearedev-charts_bar.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#wearedev_chart_addons .available-addons li.doughnut {
    background-image: url(../images/wearedev-charts_doughnut.svg);
}

#wearedev_chart_addons .available-addons li.pie {
    background-image: url(../images/wearedev-charts_pie.svg);
}

#wearedev_chart_addons .available-addons li.bar {
    background-image: url(../images/wearedev-charts_bar.svg);
}

#wearedev_chart_addons .available-addons li.line {
    background-image: url(../images/wearedev-charts_line.svg);
}

#wearedev_chart_addons .available-addons li.radar {
    background-image: url(../images/wearedev-charts_radar.svg);
}

#wearedev_chart_addons .available-addons li.polar-area {
    background-image: url(../images/wearedev-charts_polar-area.svg);
}

#wearedev_chart_addons .available-addons li.bubble {
    background-image: url(../images/wearedev-charts_bubble.svg);
}

#wearedev-charts .available-charts li.scatter {
    background-image: url(../images/wearedev-charts_scatter.svg);
}

#wearedev-charts .available-charts li.new-chart {
    background-color: #0085ba;
    background-image: url(../images/wearedev-charts_new-chart.svg);
    border-color: #0073aa #006799 #006799;
    -webkit-box-shadow: 0 1px 0 #006799;
    box-shadow: 0 1px 0 #006799;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
}

#wearedev-charts .available-charts li.new-chart a:hover,
#wearedev-charts ul.attachments li.new-chart a:hover {
    background-color: #008ec2;
    border-color: #006799;
    color: #fff;
}

#wearedev-charts .available-charts li.active a:hover,
#wearedev-charts ul.attachments li a:hover {
    background-color: #fafafa;
    border-color: #999999;
    color: #23282d;
}

@media screen and (max-width: 900px) {
    #wearedev-charts ul.available-charts li,
    #wearedev-charts ul.attachments li.attachment {
        width: 20%;
    }
}

@media screen and (max-width: 782px) {
    #wearedev-charts ul.available-charts li,
    #wearedev-charts ul.attachments li.attachment {
        width: 25%;
    }
}

@media screen and (max-width: 480px) {
    #wearedev-charts ul.available-charts li,
    #wearedev-charts ul.attachments li.attachment {
        width: 33.33333%;
    }
}

@media screen and (max-width: 320px) {
    #wearedev-charts ul.available-charts li,
    #wearedev-charts ul.attachments li.attachment {
        width: 50%;
    }
}