.ct-chart { height: 240px; } @media (min-width: 992px) { .ct-chart { height: 320px; } } @media (min-width: 768px) { .ct-chart { height: 280px; } } #exampleSimplePie.ct-chart .ct-label { font-size: 16px; color: #fff; fill: #fff; } #exampleLineAnimation { height: 300px; background-color: #453d3f; } .ct-chart.ct-golden-section { position: relative; display: block; width: 100%; } .ct-chart.ct-golden-section:before { display: block; float: left; width: 0; height: 0; /*padding-bottom: 61.804697157%*/ padding-bottom: 0; content: ""; } .ct-chart.ct-golden-section:after { display: table; clear: both; content: ""; } .ct-chart.ct-golden-section > svg { position: absolute; top: 0; left: 0; display: block; } #exampleLineAnimation .ct-label, #exampleLineAnimation .ct-label.ct-horizontal { display: block; width: 100%; height: 100%; /*font-size: .75rem;*/ font-size: 13px; color: #94878a; text-align: left; fill: #94878a; } #exampleLineAnimation .ct-label.ct-vertical { display: block; width: 100%; height: 100%; /*font-size: .75rem;*/ font-size: 13px; color: #94878a; text-align: right; fill: #94878a; } #exampleLineAnimation .ct-grid { stroke: #53494b; stroke-width: 1px; stroke-dasharray: 3px; } #exampleLineAnimation .ct-point { stroke-width: 10px; stroke-linecap: round; } #exampleLineAnimation .ct-line { fill: none; stroke-width: 4px; } #exampleLineAnimation .ct-area { stroke: none; fill-opacity: .1; } #exampleLineAnimation .ct-bar { fill: none; stroke-width: 10px; } #exampleLineAnimation .ct-slice.ct-donut { fill: none; stroke-width: 60px; } #exampleLineAnimation .ct-series.ct-series-a .ct-bar, #exampleLineAnimation .ct-series.ct-series-a .ct-line, #exampleLineAnimation .ct-series.ct-series-a .ct-point, #exampleLineAnimation .ct-series.ct-series-a .ct-slice.ct-donut { stroke: #d70206; } #exampleLineAnimation .ct-series.ct-series-a .ct-area, #exampleLineAnimation .ct-series.ct-series-a .ct-slice:not(.ct-donut) { fill: #d70206; } #exampleLineAnimation .ct-series.ct-series-a .ct-point { stroke-width: 10px; stroke-linecap: square; } #exampleLineAnimation .ct-series.ct-series-a .ct-line { -webkit-animation: dashoffset 1s linear infinite; animation: dashoffset 1s linear infinite; fill: none; stroke-width: 4px; stroke-dasharray: 5px; } #exampleLineAnimation .ct-series.ct-series-b .ct-bar, #exampleLineAnimation .ct-series.ct-series-b .ct-line, #exampleLineAnimation .ct-series.ct-series-b .ct-point, #exampleLineAnimation .ct-series.ct-series-b .ct-slice.ct-donut { stroke: #f05b4f; } #exampleLineAnimation .ct-series.ct-series-b .ct-area, #exampleLineAnimation .ct-series.ct-series-b .ct-slice:not(.ct-donut) { fill: #f05b4f; } #exampleLineAnimation .ct-series.ct-series-c .ct-bar, #exampleLineAnimation .ct-series.ct-series-c .ct-line, #exampleLineAnimation .ct-series.ct-series-c .ct-point, #exampleLineAnimation .ct-series.ct-series-c .ct-slice.ct-donut { stroke: #f4c63d; } #exampleLineAnimation .ct-series.ct-series-c .ct-area, #exampleLineAnimation .ct-series.ct-series-c .ct-slice:not(.ct-donut) { fill: #f4c63d; } #exampleLineAnimation .ct-series.ct-series-d .ct-bar, #exampleLineAnimation .ct-series.ct-series-d .ct-line, #exampleLineAnimation .ct-series.ct-series-d .ct-point, #exampleLineAnimation .ct-series.ct-series-d .ct-slice.ct-donut { stroke: #d17905; } #exampleLineAnimation .ct-series.ct-series-d .ct-area, #exampleLineAnimation .ct-series.ct-series-d .ct-slice:not(.ct-donut) { fill: #d17905; } #exampleLineAnimation .ct-series.ct-series-e .ct-bar, #exampleLineAnimation .ct-series.ct-series-e .ct-line, #exampleLineAnimation .ct-series.ct-series-e .ct-point, #exampleLineAnimation .ct-series.ct-series-e .ct-slice.ct-donut { stroke: #453d3f; } #exampleLineAnimation .ct-series.ct-series-e .ct-area, #exampleLineAnimation .ct-series.ct-series-e .ct-slice:not(.ct-donut) { fill: #453d3f; } #exampleLineAnimation .ct-series.ct-series-f .ct-bar, #exampleLineAnimation .ct-series.ct-series-f .ct-line, #exampleLineAnimation .ct-series.ct-series-f .ct-point, #exampleLineAnimation .ct-series.ct-series-f .ct-slice.ct-donut { stroke: #59922b; } #exampleLineAnimation .ct-series.ct-series-f .ct-area, #exampleLineAnimation .ct-series.ct-series-f .ct-slice:not(.ct-donut) { fill: #59922b; } #exampleLineAnimation .ct-series.ct-series-g .ct-bar, #exampleLineAnimation .ct-series.ct-series-g .ct-line, #exampleLineAnimation .ct-series.ct-series-g .ct-point, #exampleLineAnimation .ct-series.ct-series-g .ct-slice.ct-donut { stroke: #0544d3; } #exampleLineAnimation .ct-series.ct-series-g .ct-area, #exampleLineAnimation .ct-series.ct-series-g .ct-slice:not(.ct-donut) { fill: #0544d3; } #exampleLineAnimation .ct-series.ct-series-h .ct-bar, #exampleLineAnimation .ct-series.ct-series-h .ct-line, #exampleLineAnimation .ct-series.ct-series-h .ct-point, #exampleLineAnimation .ct-series.ct-series-h .ct-slice.ct-donut { stroke: #6b0392; } #exampleLineAnimation .ct-series.ct-series-h .ct-area, #exampleLineAnimation .ct-series.ct-series-h .ct-slice:not(.ct-donut) { fill: #6b0392; } #exampleLineAnimation .ct-series.ct-series-i .ct-bar, #exampleLineAnimation .ct-series.ct-series-i .ct-line, #exampleLineAnimation .ct-series.ct-series-i .ct-point, #exampleLineAnimation .ct-series.ct-series-i .ct-slice.ct-donut { stroke: #f05b4f; } #exampleLineAnimation .ct-series.ct-series-i .ct-area, #exampleLineAnimation .ct-series.ct-series-i .ct-slice:not(.ct-donut) { fill: #f05b4f; } #exampleLineAnimation .ct-series.ct-series-j .ct-bar, #exampleLineAnimation .ct-series.ct-series-j .ct-line, #exampleLineAnimation .ct-series.ct-series-j .ct-point, #exampleLineAnimation .ct-series.ct-series-j .ct-slice.ct-donut { stroke: #dda458; } #exampleLineAnimation .ct-series.ct-series-j .ct-area, #exampleLineAnimation .ct-series.ct-series-j .ct-slice:not(.ct-donut) { fill: #dda458; } #exampleLineAnimation .ct-series.ct-series-k .ct-bar, #exampleLineAnimation .ct-series.ct-series-k .ct-line, #exampleLineAnimation .ct-series.ct-series-k .ct-point, #exampleLineAnimation .ct-series.ct-series-k .ct-slice.ct-donut { stroke: #eacf7d; } #exampleLineAnimation .ct-series.ct-series-k .ct-area, #exampleLineAnimation .ct-series.ct-series-k .ct-slice:not(.ct-donut) { fill: #eacf7d; } #exampleLineAnimation .ct-series.ct-series-l .ct-bar, #exampleLineAnimation .ct-series.ct-series-l .ct-line, #exampleLineAnimation .ct-series.ct-series-l .ct-point, #exampleLineAnimation .ct-series.ct-series-l .ct-slice.ct-donut { stroke: #86797d; } #exampleLineAnimation .ct-series.ct-series-l .ct-area, #exampleLineAnimation .ct-series.ct-series-l .ct-slice:not(.ct-donut) { fill: #86797d; } #exampleLineAnimation .ct-series.ct-series-m .ct-bar, #exampleLineAnimation .ct-series.ct-series-m .ct-line, #exampleLineAnimation .ct-series.ct-series-m .ct-point, #exampleLineAnimation .ct-series.ct-series-m .ct-slice.ct-donut { stroke: #b2c326; } #exampleLineAnimation .ct-series.ct-series-m .ct-area, #exampleLineAnimation .ct-series.ct-series-m .ct-slice:not(.ct-donut) { fill: #b2c326; } #exampleLineAnimation .ct-series.ct-series-n .ct-bar, #exampleLineAnimation .ct-series.ct-series-n .ct-line, #exampleLineAnimation .ct-series.ct-series-n .ct-point, #exampleLineAnimation .ct-series.ct-series-n .ct-slice.ct-donut { stroke: #6188e2; } #exampleLineAnimation .ct-series.ct-series-n .ct-area, #exampleLineAnimation .ct-series.ct-series-n .ct-slice:not(.ct-donut) { fill: #6188e2; } #exampleLineAnimation .ct-series.ct-series-o .ct-bar, #exampleLineAnimation .ct-series.ct-series-o .ct-line, #exampleLineAnimation .ct-series.ct-series-o .ct-point, #exampleLineAnimation .ct-series.ct-series-o .ct-slice.ct-donut { stroke: #a748ca; } #exampleLineAnimation .ct-series.ct-series-o .ct-area, #exampleLineAnimation .ct-series.ct-series-o .ct-slice:not(.ct-donut) { fill: #a748ca; } #exampleLineAnimation .ct-point { -webkit-animation: bouncing-stroke .5s ease infinite; animation: bouncing-stroke .5s ease infinite; } #exampleLineAnimation .ct-line { fill: none; stroke-width: 3px; } #exampleLineAnimation .ct-point { -webkit-animation: exploding-stroke 1s ease-out infinite; animation: exploding-stroke 1s ease-out infinite; } #exampleLineAnimation .ct-line { fill: none; stroke-width: 2px; stroke-dasharray: 40px 3px; } #behavior-with-jquery .ct-point { stroke-width: 20px; stroke-linecap: round; } @-webkit-keyframes dashoffset { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -20px; } } @keyframes dashoffset { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -20px; } } @-webkit-keyframes bouncing-stroke { 0% { stroke-width: 5px; } 50% { stroke-width: 10px; } 100% { stroke-width: 5px; } } @keyframes bouncing-stroke { 0% { stroke-width: 5px; } 50% { stroke-width: 10px; } 100% { stroke-width: 5px; } } @-webkit-keyframes exploding-stroke { 0% { opacity: 1; stroke-width: 2px; } 100% { opacity: 0; stroke-width: 20px; } } @keyframes exploding-stroke { 0% { opacity: 1; stroke-width: 2px; } 100% { opacity: 0; stroke-width: 20px; } }