.tiny-chartbox { display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline; margin-bottom: 16px; }
.tiny-chartbox div[chart-type*="donut"] { width: 40px; /* height: $chart-width;*/ display: block; position: relative; /*margin-right: $m;*/ margin: 0 auto; }
.tiny-chartbox div[chart-type*="donut"]:last-of-type { margin-right: 0; }
.tiny-chartbox div.donut-hole { height: 31.2px; width: 31.2px; background-color: #fff; z-index: 20; position: absolute; top: 4.6px; left: 4.844px; border-radius: 31.2px; line-height: 10px; }
.tiny-chartbox span.donut-filling { position: absolute; display: block; vertical-align: middle; font-weight: 300; color: #616161; font-size: 12px; top: 50%; margin-top: -5px; width: 31.2px; height: 10px; text-align: center; cursor: default; overflow: none; }
.tiny-chartbox div.donut-caption-wrapper { /*width: $chart-width;*/ align-content: center; position: relative; top: 48.8888888889px; }
.tiny-chartbox span.donut-caption { display: block; text-align: center; color: #616161; font-size: 12px; font-weight: 300; cursor: default; margin: 0 auto; }
.tiny-chartbox .donut-bite { position: absolute; width: 20px; height: 40px; overflow: hidden; top: 0; left: 20.5px; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; -webkit-transform-origin: left center; transform-origin: left center; }
.tiny-chartbox .donut-bite.large { width: 40px; height: 40px; left: 0; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; }
.tiny-chartbox .donut-bite:BEFORE { content: ""; position: absolute; width: 20px; height: 40px; top: 0; left: -20px; border-radius: 20px 0 0 20px; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; -webkit-transform-origin: right center; transform-origin: right center; }
.tiny-chartbox .donut-bite.large:BEFORE { left: 0; }
.tiny-chartbox .donut-bite.large:AFTER { content: ""; position: absolute; width: 20px; height: 40px; left: 20px; border-radius: 0 20px 20px 0; }

.small-chartbox { display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline; margin-bottom: 34px; }
.small-chartbox div[chart-type*="donut"] { width: 85px; /* height: $chart-width;*/ display: block; position: relative; /*margin-right: $m;*/ margin: 0 auto; }
.small-chartbox div[chart-type*="donut"]:last-of-type { margin-right: 0; }
.small-chartbox div.donut-hole { height: 66.3px; width: 66.3px; background-color: #fff; z-index: 20; position: absolute; top: 9.55px; left: 9.794px; border-radius: 66.3px; line-height: 21.25px; }
.small-chartbox span.donut-filling { position: absolute; display: block; vertical-align: middle; font-weight: 300; color: #616161; font-size: 25.5px; top: 50%; margin-top: -10.625px; width: 66.3px; height: 21.25px; text-align: center; cursor: default; overflow: none; }
.small-chartbox div.donut-caption-wrapper { /*width: $chart-width;*/ align-content: center; position: relative; top: 103.8888888889px; }
.small-chartbox span.donut-caption { display: block; text-align: center; color: #616161; font-size: 12px; font-weight: 300; cursor: default; margin: 0 auto; }
.small-chartbox .donut-bite { position: absolute; width: 42.5px; height: 85px; overflow: hidden; top: 0; left: 43px; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; -webkit-transform-origin: left center; transform-origin: left center; }
.small-chartbox .donut-bite.large { width: 85px; height: 85px; left: 0; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; }
.small-chartbox .donut-bite:BEFORE { content: ""; position: absolute; width: 42.5px; height: 85px; top: 0; left: -42.5px; border-radius: 42.5px 0 0 42.5px; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; -webkit-transform-origin: right center; transform-origin: right center; }
.small-chartbox .donut-bite.large:BEFORE { left: 0; }
.small-chartbox .donut-bite.large:AFTER { content: ""; position: absolute; width: 42.5px; height: 85px; left: 42.5px; border-radius: 0 42.5px 42.5px 0; }

.chartbox { display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline; margin-bottom: 44px; }
.chartbox div[chart-type*="donut"] { width: 110px; /* height: $chart-width;*/ display: block; position: relative; /*margin-right: $m;*/ margin: 0 auto; }
.chartbox div[chart-type*="donut"]:last-of-type { margin-right: 0; }
.chartbox div.donut-hole { height: 85.8px; width: 85.8px; background-color: #fff; z-index: 20; position: absolute; top: 12.3px; left: 12.544px; border-radius: 85.8px; line-height: 27.5px; }
.chartbox span.donut-filling { position: absolute; display: block; vertical-align: middle; font-weight: 300; color: #616161; font-size: 33px; top: 50%; margin-top: -13.75px; width: 85.8px; height: 27.5px; text-align: center; cursor: default; overflow: none; }
.chartbox div.donut-caption-wrapper { /*width: $chart-width;*/ align-content: center; position: relative; top: 134.4444444444px; }
.chartbox span.donut-caption { display: block; text-align: center; color: #616161; font-size: 12px; font-weight: 300; cursor: default; margin: 0 auto; }
.chartbox .donut-bite { position: absolute; width: 55px; height: 110px; overflow: hidden; top: 0; left: 55.5px; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; -webkit-transform-origin: left center; transform-origin: left center; }
.chartbox .donut-bite.large { width: 110px; height: 110px; left: 0; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; }
.chartbox .donut-bite:BEFORE { content: ""; position: absolute; width: 55px; height: 110px; top: 0; left: -55px; border-radius: 55px 0 0 55px; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; -webkit-transform-origin: right center; transform-origin: right center; }
.chartbox .donut-bite.large:BEFORE { left: 0; }
.chartbox .donut-bite.large:AFTER { content: ""; position: absolute; width: 55px; height: 110px; left: 55px; border-radius: 0 55px 55px 0; }

.large-chartbox { display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline; margin-bottom: 54px; }
.large-chartbox div[chart-type*="donut"] { width: 135px; /* height: $chart-width;*/ display: block; position: relative; /*margin-right: $m;*/ margin: 0 auto; }
.large-chartbox div[chart-type*="donut"]:last-of-type { margin-right: 0; }
.large-chartbox div.donut-hole { height: 105.3px; width: 105.3px; background-color: #fff; z-index: 20; position: absolute; top: 15.05px; left: 15.294px; border-radius: 105.3px; line-height: 33.75px; }
.large-chartbox span.donut-filling { position: absolute; display: block; vertical-align: middle; font-weight: 300; color: #616161; font-size: 40.5px; top: 50%; margin-top: -16.875px; width: 105.3px; height: 33.75px; text-align: center; cursor: default; overflow: none; }
.large-chartbox div.donut-caption-wrapper { /*width: $chart-width;*/ align-content: center; position: relative; top: 165px; }
.large-chartbox span.donut-caption { display: block; text-align: center; color: #616161; font-size: 12px; font-weight: 300; cursor: default; margin: 0 auto; }
.large-chartbox .donut-bite { position: absolute; width: 67.5px; height: 135px; overflow: hidden; top: 0; left: 68px; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; -webkit-transform-origin: left center; transform-origin: left center; }
.large-chartbox .donut-bite.large { width: 135px; height: 135px; left: 0; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; }
.large-chartbox .donut-bite:BEFORE { content: ""; position: absolute; width: 67.5px; height: 135px; top: 0; left: -67.5px; border-radius: 67.5px 0 0 67.5px; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; -webkit-transform-origin: right center; transform-origin: right center; }
.large-chartbox .donut-bite.large:BEFORE { left: 0; }
.large-chartbox .donut-bite.large:AFTER { content: ""; position: absolute; width: 67.5px; height: 135px; left: 67.5px; border-radius: 0 67.5px 67.5px 0; }

.huge-chartbox { display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline; margin-bottom: 64px; }
.huge-chartbox div[chart-type*="donut"] { width: 160px; /* height: $chart-width;*/ display: block; position: relative; /*margin-right: $m;*/ margin: 0 auto; }
.huge-chartbox div[chart-type*="donut"]:last-of-type { margin-right: 0; }
.huge-chartbox div.donut-hole { height: 96px; width: 96px; background-color: #fff; z-index: 20; position: absolute; top: 32.2px; left: 32.444px; border-radius: 96px; line-height: 40px; }
.huge-chartbox span.donut-filling { position: absolute; display: block; vertical-align: middle; font-weight: 300; color: #616161; font-size: 48px; top: 50%; margin-top: -20px; width: 96px; height: 40px; text-align: center; cursor: default; overflow: none; }
.huge-chartbox div.donut-caption-wrapper { /*width: $chart-width;*/ align-content: center; position: relative; top: 195.5555555556px; }
.huge-chartbox span.donut-caption { display: block; text-align: center; color: #616161; font-size: 12px; font-weight: 300; cursor: default; margin: 0 auto; }
.huge-chartbox .donut-bite { position: absolute; width: 80px; height: 160px; overflow: hidden; top: 0; left: 80.5px; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; -webkit-transform-origin: left center; transform-origin: left center; }
.huge-chartbox .donut-bite.large { width: 160px; height: 160px; left: 0; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; }
.huge-chartbox .donut-bite:BEFORE { content: ""; position: absolute; width: 80px; height: 160px; top: 0; left: -80px; border-radius: 80px 0 0 80px; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; -webkit-transform-origin: right center; transform-origin: right center; }
.huge-chartbox .donut-bite.large:BEFORE { left: 0; }
.huge-chartbox .donut-bite.large:AFTER { content: ""; position: absolute; width: 80px; height: 160px; left: 80px; border-radius: 0 80px 80px 0; }

.giant-chartbox { display: -ms-inline-flexbox; display: -webkit-inline-flexbox; display: inline; margin-bottom: 140px; }
.giant-chartbox div[chart-type*="donut"] { width: 350px; /* height: $chart-width;*/ display: block; position: relative; /*margin-right: $m;*/ margin: 0 auto; }
.giant-chartbox div[chart-type*="donut"]:last-of-type { margin-right: 0; }
.giant-chartbox div.donut-hole { height: 140px; width: 140px; background-color: #fff; z-index: 20; position: absolute; top: 105.2px; left: 105.444px; border-radius: 140px; line-height: 87.5px; }
.giant-chartbox span.donut-filling { position: absolute; display: block; vertical-align: middle; font-weight: 300; color: #616161; font-size: 105px; top: 50%; margin-top: -43.75px; width: 140px; height: 87.5px; text-align: center; cursor: default; overflow: none; }
.giant-chartbox div.donut-caption-wrapper { /*width: $chart-width;*/ align-content: center; position: relative; top: 427.7777777778px; }
.giant-chartbox span.donut-caption { display: block; text-align: center; color: #616161; font-size: 12px; font-weight: 300; cursor: default; margin: 0 auto; }
.giant-chartbox .donut-bite { position: absolute; width: 175px; height: 350px; overflow: hidden; top: 0; left: 175.5px; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; -webkit-transform-origin: left center; transform-origin: left center; }
.giant-chartbox .donut-bite.large { width: 350px; height: 350px; left: 0; -moz-transform-origin: center center; -ms-transform-origin: center center; -o-transform-origin: center center; -webkit-transform-origin: center center; transform-origin: center center; }
.giant-chartbox .donut-bite:BEFORE { content: ""; position: absolute; width: 175px; height: 350px; top: 0; left: -175px; border-radius: 175px 0 0 175px; -moz-transform-origin: right center; -ms-transform-origin: right center; -o-transform-origin: right center; -webkit-transform-origin: right center; transform-origin: right center; }
.giant-chartbox .donut-bite.large:BEFORE { left: 0; }
.giant-chartbox .donut-bite.large:AFTER { content: ""; position: absolute; width: 175px; height: 350px; left: 175px; border-radius: 0 175px 175px 0; }

.container-chart { width: 100px; text-align: center; border-right: 1px #efefef solid; min-height: 100px; padding: 0 10px 40px 0; float: left; }

/*# sourceMappingURL=donutcharts.css.map */