muadzmi02
/
sipadu_mbip
forkeado de SwissLink/sipadu_mbip
Seguir 1
Destacar 0
Fork 0
Código Incidencias 0 Peticiones pull 0 Lanzamientos 0 Wiki Actividad
Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 Commits
1 Rama
Árbol: 546c601a98
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde '546c601a98'
${ noResults }
sipadu_mbip/public/pages/chart/radial/css/radial.css

radial.css 40KB
Original Blame Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734 
  1. 

  2. /* -------------------------------------

  3.  * Bar container

  4.  * ------------------------------------- */

  5. .radial-bar {

  6.   position: relative;

  7.   display: inline-block;

  8.   border-radius: 50%;

  9.   background-color: transparent;

  10.   margin-bottom: 20px;

  11.   -webkit-box-sizing: content-box;

  12.   -moz-box-sizing: content-box;

  13.   box-sizing: content-box;

  14.   width: 80px;

  15.   height: 80px;

  16.   font-size: 18px;

  17. }

  18. .radial-bar:after,

  19. .radial-bar > img {

  20.   display: inline-block;

  21.   position: absolute;

  22.   top: 0;

  23.   left: 0;

  24.   border-radius: 50%;

  25.   text-align: center;

  26.   font-weight: 500;

  27.   color: #455a64;

  28. }

  29. .radial-bar:after {

  30.   content: attr(data-label);

  31.   background-color: #fff;

  32.   z-index: 101;

  33. }

  34. .radial-bar > img {

  35.   z-index: 102;

  36. }

  37. .radial-bar:after,

  38. .radial-bar > img {

  39.   width: 56px;

  40.   height: 56px;

  41.   margin-left: 12px;

  42.   margin-top: 12px;

  43.   line-height: 56px;

  44. }

  45. 

  46. .radial-bar.radial-bar-0 {

  47.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  48. }

  49. .radial-bar.radial-bar-5 {

  50.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  51. }

  52. .radial-bar.radial-bar-10 {

  53.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  54. }

  55. .radial-bar.radial-bar-15 {

  56.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  57. }

  58. .radial-bar.radial-bar-20 {

  59.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  60. }

  61. .radial-bar.radial-bar-25 {

  62.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  63. }

  64. .radial-bar.radial-bar-30 {

  65.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  66. }

  67. .radial-bar.radial-bar-35 {

  68.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  69. }

  70. .radial-bar.radial-bar-40 {

  71.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  72. }

  73. .radial-bar.radial-bar-45 {

  74.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  75. }

  76. .radial-bar.radial-bar-50 {

  77.   background-image: linear-gradient(270deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  78. }

  79. .radial-bar.radial-bar-55 {

  80.   background-image: linear-gradient(288deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  81. }

  82. .radial-bar.radial-bar-60 {

  83.   background-image: linear-gradient(306deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  84. }

  85. .radial-bar.radial-bar-65 {

  86.   background-image: linear-gradient(324deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  87. }

  88. .radial-bar.radial-bar-70 {

  89.   background-image: linear-gradient(342deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  90. }

  91. .radial-bar.radial-bar-75 {

  92.   background-image: linear-gradient(360deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  93. }

  94. .radial-bar.radial-bar-80 {

  95.   background-image: linear-gradient(378deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  96. }

  97. .radial-bar.radial-bar-85 {

  98.   background-image: linear-gradient(396deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  99. }

  100. .radial-bar.radial-bar-90 {

  101.   background-image: linear-gradient(414deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  102. }

  103. .radial-bar.radial-bar-95 {

  104.   background-image: linear-gradient(432deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  105. }

  106. .radial-bar.radial-bar-100 {

  107.   background-image: linear-gradient(450deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  108. }

  109. .radial-bar-primary.radial-bar-0 {

  110.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  111. }

  112. .radial-bar-primary.radial-bar-5 {

  113.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  114. }

  115. .radial-bar-primary.radial-bar-10 {

  116.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  117. }

  118. .radial-bar-primary.radial-bar-15 {

  119.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  120. }

  121. .radial-bar-primary.radial-bar-20 {

  122.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  123. }

  124. .radial-bar-primary.radial-bar-25 {

  125.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  126. }

  127. .radial-bar-primary.radial-bar-30 {

  128.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  129. }

  130. .radial-bar-primary.radial-bar-35 {

  131.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  132. }

  133. .radial-bar-primary.radial-bar-40 {

  134.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  135. }

  136. .radial-bar-primary.radial-bar-45 {

  137.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  138. }

  139. .radial-bar-primary.radial-bar-50 {

  140.   background-image: linear-gradient(270deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  141. }

  142. .radial-bar-primary.radial-bar-55 {

  143.   background-image: linear-gradient(288deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  144. }

  145. .radial-bar-primary.radial-bar-60 {

  146.   background-image: linear-gradient(306deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  147. }

  148. .radial-bar-primary.radial-bar-65 {

  149.   background-image: linear-gradient(324deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  150. }

  151. .radial-bar-primary.radial-bar-70 {

  152.   background-image: linear-gradient(342deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  153. }

  154. .radial-bar-primary.radial-bar-75 {

  155.   background-image: linear-gradient(360deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  156. }

  157. .radial-bar-primary.radial-bar-80 {

  158.   background-image: linear-gradient(378deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  159. }

  160. .radial-bar-primary.radial-bar-85 {

  161.   background-image: linear-gradient(396deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  162. }

  163. .radial-bar-primary.radial-bar-90 {

  164.   background-image: linear-gradient(414deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  165. }

  166. .radial-bar-primary.radial-bar-95 {

  167.   background-image: linear-gradient(432deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  168. }

  169. .radial-bar-primary.radial-bar-100 {

  170.   background-image: linear-gradient(450deg, #448aff 50%, transparent 50%, transparent), linear-gradient(270deg, #448aff 50%, #d6d6d6 50%, #d6d6d6);

  171. }

  172. .radial-bar-success.radial-bar-0 {

  173.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  174. }

  175. .radial-bar-success.radial-bar-5 {

  176.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  177. }

  178. .radial-bar-success.radial-bar-10 {

  179.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  180. }

  181. .radial-bar-success.radial-bar-15 {

  182.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  183. }

  184. .radial-bar-success.radial-bar-20 {

  185.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  186. }

  187. .radial-bar-success.radial-bar-25 {

  188.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  189. }

  190. .radial-bar-success.radial-bar-30 {

  191.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  192. }

  193. .radial-bar-success.radial-bar-35 {

  194.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  195. }

  196. .radial-bar-success.radial-bar-40 {

  197.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  198. }

  199. .radial-bar-success.radial-bar-45 {

  200.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  201. }

  202. .radial-bar-success.radial-bar-50 {

  203.   background-image: linear-gradient(270deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  204. }

  205. .radial-bar-success.radial-bar-55 {

  206.   background-image: linear-gradient(288deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  207. }

  208. .radial-bar-success.radial-bar-60 {

  209.   background-image: linear-gradient(306deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  210. }

  211. .radial-bar-success.radial-bar-65 {

  212.   background-image: linear-gradient(324deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  213. }

  214. .radial-bar-success.radial-bar-70 {

  215.   background-image: linear-gradient(342deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  216. }

  217. .radial-bar-success.radial-bar-75 {

  218.   background-image: linear-gradient(360deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  219. }

  220. .radial-bar-success.radial-bar-80 {

  221.   background-image: linear-gradient(378deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  222. }

  223. .radial-bar-success.radial-bar-85 {

  224.   background-image: linear-gradient(396deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  225. }

  226. .radial-bar-success.radial-bar-90 {

  227.   background-image: linear-gradient(414deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  228. }

  229. .radial-bar-success.radial-bar-95 {

  230.   background-image: linear-gradient(432deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  231. }

  232. .radial-bar-success.radial-bar-100 {

  233.   background-image: linear-gradient(450deg, #11c15b 50%, transparent 50%, transparent), linear-gradient(270deg, #11c15b 50%, #d6d6d6 50%, #d6d6d6);

  234. }

  235. .radial-bar-info.radial-bar-0 {

  236.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  237. }

  238. .radial-bar-info.radial-bar-5 {

  239.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  240. }

  241. .radial-bar-info.radial-bar-10 {

  242.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  243. }

  244. .radial-bar-info.radial-bar-15 {

  245.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  246. }

  247. .radial-bar-info.radial-bar-20 {

  248.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  249. }

  250. .radial-bar-info.radial-bar-25 {

  251.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  252. }

  253. .radial-bar-info.radial-bar-30 {

  254.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  255. }

  256. .radial-bar-info.radial-bar-35 {

  257.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  258. }

  259. .radial-bar-info.radial-bar-40 {

  260.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  261. }

  262. .radial-bar-info.radial-bar-45 {

  263.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  264. }

  265. .radial-bar-info.radial-bar-50 {

  266.   background-image: linear-gradient(270deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  267. }

  268. .radial-bar-info.radial-bar-55 {

  269.   background-image: linear-gradient(288deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  270. }

  271. .radial-bar-info.radial-bar-60 {

  272.   background-image: linear-gradient(306deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  273. }

  274. .radial-bar-info.radial-bar-65 {

  275.   background-image: linear-gradient(324deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  276. }

  277. .radial-bar-info.radial-bar-70 {

  278.   background-image: linear-gradient(342deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  279. }

  280. .radial-bar-info.radial-bar-75 {

  281.   background-image: linear-gradient(360deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  282. }

  283. .radial-bar-info.radial-bar-80 {

  284.   background-image: linear-gradient(378deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  285. }

  286. .radial-bar-info.radial-bar-85 {

  287.   background-image: linear-gradient(396deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  288. }

  289. .radial-bar-info.radial-bar-90 {

  290.   background-image: linear-gradient(414deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  291. }

  292. .radial-bar-info.radial-bar-95 {

  293.   background-image: linear-gradient(432deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  294. }

  295. .radial-bar-info.radial-bar-100 {

  296.   background-image: linear-gradient(450deg, #00bcd4 50%, transparent 50%, transparent), linear-gradient(270deg, #00bcd4 50%, #d6d6d6 50%, #d6d6d6);

  297. }

  298. .radial-bar-warning.radial-bar-0 {

  299.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  300. }

  301. .radial-bar-warning.radial-bar-5 {

  302.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  303. }

  304. .radial-bar-warning.radial-bar-10 {

  305.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  306. }

  307. .radial-bar-warning.radial-bar-15 {

  308.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  309. }

  310. .radial-bar-warning.radial-bar-20 {

  311.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  312. }

  313. .radial-bar-warning.radial-bar-25 {

  314.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  315. }

  316. .radial-bar-warning.radial-bar-30 {

  317.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  318. }

  319. .radial-bar-warning.radial-bar-35 {

  320.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  321. }

  322. .radial-bar-warning.radial-bar-40 {

  323.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  324. }

  325. .radial-bar-warning.radial-bar-45 {

  326.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  327. }

  328. .radial-bar-warning.radial-bar-50 {

  329.   background-image: linear-gradient(270deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  330. }

  331. .radial-bar-warning.radial-bar-55 {

  332.   background-image: linear-gradient(288deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  333. }

  334. .radial-bar-warning.radial-bar-60 {

  335.   background-image: linear-gradient(306deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  336. }

  337. .radial-bar-warning.radial-bar-65 {

  338.   background-image: linear-gradient(324deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  339. }

  340. .radial-bar-warning.radial-bar-70 {

  341.   background-image: linear-gradient(342deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  342. }

  343. .radial-bar-warning.radial-bar-75 {

  344.   background-image: linear-gradient(360deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  345. }

  346. .radial-bar-warning.radial-bar-80 {

  347.   background-image: linear-gradient(378deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  348. }

  349. .radial-bar-warning.radial-bar-85 {

  350.   background-image: linear-gradient(396deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  351. }

  352. .radial-bar-warning.radial-bar-90 {

  353.   background-image: linear-gradient(414deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  354. }

  355. .radial-bar-warning.radial-bar-95 {

  356.   background-image: linear-gradient(432deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  357. }

  358. .radial-bar-warning.radial-bar-100 {

  359.   background-image: linear-gradient(450deg, #ffe100 50%, transparent 50%, transparent), linear-gradient(270deg, #ffe100 50%, #d6d6d6 50%, #d6d6d6);

  360. }

  361. .radial-bar-danger.radial-bar-0 {

  362.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  363. }

  364. .radial-bar-danger.radial-bar-5 {

  365.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  366. }

  367. .radial-bar-danger.radial-bar-10 {

  368.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  369. }

  370. .radial-bar-danger.radial-bar-15 {

  371.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  372. }

  373. .radial-bar-danger.radial-bar-20 {

  374.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  375. }

  376. .radial-bar-danger.radial-bar-25 {

  377.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  378. }

  379. .radial-bar-danger.radial-bar-30 {

  380.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  381. }

  382. .radial-bar-danger.radial-bar-35 {

  383.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  384. }

  385. .radial-bar-danger.radial-bar-40 {

  386.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  387. }

  388. .radial-bar-danger.radial-bar-45 {

  389.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  390. }

  391. .radial-bar-danger.radial-bar-50 {

  392.   background-image: linear-gradient(270deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  393. }

  394. .radial-bar-danger.radial-bar-55 {

  395.   background-image: linear-gradient(288deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  396. }

  397. .radial-bar-danger.radial-bar-60 {

  398.   background-image: linear-gradient(306deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  399. }

  400. .radial-bar-danger.radial-bar-65 {

  401.   background-image: linear-gradient(324deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  402. }

  403. .radial-bar-danger.radial-bar-70 {

  404.   background-image: linear-gradient(342deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  405. }

  406. .radial-bar-danger.radial-bar-75 {

  407.   background-image: linear-gradient(360deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  408. }

  409. .radial-bar-danger.radial-bar-80 {

  410.   background-image: linear-gradient(378deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  411. }

  412. .radial-bar-danger.radial-bar-85 {

  413.   background-image: linear-gradient(396deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  414. }

  415. .radial-bar-danger.radial-bar-90 {

  416.   background-image: linear-gradient(414deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  417. }

  418. .radial-bar-danger.radial-bar-95 {

  419.   background-image: linear-gradient(432deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  420. }

  421. .radial-bar-danger.radial-bar-100 {

  422.   background-image: linear-gradient(450deg, #ff5252 50%, transparent 50%, transparent), linear-gradient(270deg, #ff5252 50%, #d6d6d6 50%, #d6d6d6);

  423. }

  424. 

  425. 

  426. /* -- Radial Default -- */

  427. .radial-bar-default.radial-bar-0 {

  428.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  429. }

  430. .radial-bar-default.radial-bar-5 {

  431.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  432. }

  433. .radial-bar-default.radial-bar-10 {

  434.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  435. }

  436. .radial-bar-default.radial-bar-15 {

  437.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  438. }

  439. .radial-bar-default.radial-bar-20 {

  440.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  441. }

  442. .radial-bar-default.radial-bar-25 {

  443.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  444. }

  445. .radial-bar-default.radial-bar-30 {

  446.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  447. }

  448. .radial-bar-default.radial-bar-35 {

  449.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  450. }

  451. .radial-bar-default.radial-bar-40 {

  452.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  453. }

  454. .radial-bar-default.radial-bar-45 {

  455.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  456. }

  457. .radial-bar-default.radial-bar-50 {

  458.   background-image: linear-gradient(270deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  459. }

  460. .radial-bar-default.radial-bar-55 {

  461.   background-image: linear-gradient(288deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  462. }

  463. .radial-bar-default.radial-bar-60 {

  464.   background-image: linear-gradient(306deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  465. }

  466. .radial-bar-default.radial-bar-65 {

  467.   background-image: linear-gradient(324deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  468. }

  469. .radial-bar-default.radial-bar-70 {

  470.   background-image: linear-gradient(342deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  471. }

  472. .radial-bar-default.radial-bar-75 {

  473.   background-image: linear-gradient(360deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  474. }

  475. .radial-bar-default.radial-bar-80 {

  476.   background-image: linear-gradient(378deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  477. }

  478. .radial-bar-default.radial-bar-85 {

  479.   background-image: linear-gradient(396deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  480. }

  481. .radial-bar-default.radial-bar-90 {

  482.   background-image: linear-gradient(414deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  483. }

  484. .radial-bar-default.radial-bar-95 {

  485.   background-image: linear-gradient(432deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  486. }

  487. .radial-bar-default.radial-bar-100 {

  488.   background-image: linear-gradient(450deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #FE8A7D 50%, #d6d6d6 50%, #d6d6d6);

  489. }

  490. 

  491. 

  492. 

  493. /* -- Radial Pink -- */

  494. .radial-bar-pink.radial-bar-0 {

  495.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  496. }

  497. .radial-bar-pink.radial-bar-5 {

  498.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  499. }

  500. .radial-bar-pink.radial-bar-10 {

  501.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  502. }

  503. .radial-bar-pink.radial-bar-15 {

  504.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  505. }

  506. .radial-bar-pink.radial-bar-20 {

  507.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  508. }

  509. .radial-bar-pink.radial-bar-25 {

  510.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  511. }

  512. .radial-bar-pink.radial-bar-30 {

  513.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  514. }

  515. .radial-bar-pink.radial-bar-35 {

  516.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  517. }

  518. .radial-bar-pink.radial-bar-40 {

  519.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  520. }

  521. .radial-bar-pink.radial-bar-45 {

  522.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  523. }

  524. .radial-bar-pink.radial-bar-50 {

  525.   background-image: linear-gradient(270deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  526. }

  527. .radial-bar-pink.radial-bar-55 {

  528.   background-image: linear-gradient(288deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  529. }

  530. .radial-bar-pink.radial-bar-60 {

  531.   background-image: linear-gradient(306deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  532. }

  533. .radial-bar-pink.radial-bar-65 {

  534.   background-image: linear-gradient(324deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  535. }

  536. .radial-bar-pink.radial-bar-70 {

  537.   background-image: linear-gradient(342deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  538. }

  539. .radial-bar-pink.radial-bar-75 {

  540.   background-image: linear-gradient(360deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  541. }

  542. .radial-bar-pink.radial-bar-80 {

  543.   background-image: linear-gradient(378deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  544. }

  545. .radial-bar-pink.radial-bar-85 {

  546.   background-image: linear-gradient(396deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  547. }

  548. .radial-bar-pink.radial-bar-90 {

  549.   background-image: linear-gradient(414deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  550. }

  551. .radial-bar-pink.radial-bar-95 {

  552.   background-image: linear-gradient(432deg, #fb6d9d 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  553. }

  554. .radial-bar-pink.radial-bar-100 {

  555.   background-image: linear-gradient(450deg, #FE8A7D 50%, transparent 50%, transparent), linear-gradient(270deg, #fb6d9d 50%, #d6d6d6 50%, #d6d6d6);

  556. }

  557. 

  558. 

  559. 

  560. /* -- Radial Purple -- */

  561. .radial-bar-purple.radial-bar-0 {

  562.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  563. }

  564. .radial-bar-purple.radial-bar-5 {

  565.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  566. }

  567. .radial-bar-purple.radial-bar-10 {

  568.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  569. }

  570. .radial-bar-purple.radial-bar-15 {

  571.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  572. }

  573. .radial-bar-purple.radial-bar-20 {

  574.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  575. }

  576. .radial-bar-purple.radial-bar-25 {

  577.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  578. }

  579. .radial-bar-purple.radial-bar-30 {

  580.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  581. }

  582. .radial-bar-purple.radial-bar-35 {

  583.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  584. }

  585. .radial-bar-purple.radial-bar-40 {

  586.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  587. }

  588. .radial-bar-purple.radial-bar-45 {

  589.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  590. }

  591. .radial-bar-purple.radial-bar-50 {

  592.   background-image: linear-gradient(270deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  593. }

  594. .radial-bar-purple.radial-bar-55 {

  595.   background-image: linear-gradient(288deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  596. }

  597. .radial-bar-purple.radial-bar-60 {

  598.   background-image: linear-gradient(306deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  599. }

  600. .radial-bar-purple.radial-bar-65 {

  601.   background-image: linear-gradient(324deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  602. }

  603. .radial-bar-purple.radial-bar-70 {

  604.   background-image: linear-gradient(342deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  605. }

  606. .radial-bar-purple.radial-bar-75 {

  607.   background-image: linear-gradient(360deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  608. }

  609. .radial-bar-purple.radial-bar-80 {

  610.   background-image: linear-gradient(378deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  611. }

  612. .radial-bar-purple.radial-bar-85 {

  613.   background-image: linear-gradient(396deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  614. }

  615. .radial-bar-purple.radial-bar-90 {

  616.   background-image: linear-gradient(414deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  617. }

  618. .radial-bar-purple.radial-bar-95 {

  619.   background-image: linear-gradient(432deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  620. }

  621. .radial-bar-purple.radial-bar-100 {

  622.   background-image: linear-gradient(450deg, #536dfe 50%, transparent 50%, transparent), linear-gradient(270deg, #536dfe 50%, #d6d6d6 50%, #d6d6d6);

  623. }

  624. 

  625. 

  626. 

  627. /* -- Radial Inverse -- */

  628. .radial-bar-inverse.radial-bar-0 {

  629.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(90deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  630. }

  631. .radial-bar-inverse.radial-bar-5 {

  632.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(108deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  633. }

  634. .radial-bar-inverse.radial-bar-10 {

  635.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(126deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  636. }

  637. .radial-bar-inverse.radial-bar-15 {

  638.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(144deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  639. }

  640. .radial-bar-inverse.radial-bar-20 {

  641.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(162deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  642. }

  643. .radial-bar-inverse.radial-bar-25 {

  644.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(180deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  645. }

  646. .radial-bar-inverse.radial-bar-30 {

  647.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(198deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  648. }

  649. .radial-bar-inverse.radial-bar-35 {

  650.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(216deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  651. }

  652. .radial-bar-inverse.radial-bar-40 {

  653.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(234deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  654. }

  655. .radial-bar-inverse.radial-bar-45 {

  656.   background-image: linear-gradient(90deg, #d6d6d6 50%, transparent 50%, transparent), linear-gradient(252deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  657. }

  658. .radial-bar-inverse.radial-bar-50 {

  659.   background-image: linear-gradient(270deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  660. }

  661. .radial-bar-inverse.radial-bar-55 {

  662.   background-image: linear-gradient(288deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  663. }

  664. .radial-bar-inverse.radial-bar-60 {

  665.   background-image: linear-gradient(306deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  666. }

  667. .radial-bar-inverse.radial-bar-65 {

  668.   background-image: linear-gradient(324deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  669. }

  670. .radial-bar-inverse.radial-bar-70 {

  671.   background-image: linear-gradient(342deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  672. }

  673. .radial-bar-inverse.radial-bar-75 {

  674.   background-image: linear-gradient(360deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  675. }

  676. .radial-bar-inverse.radial-bar-80 {

  677.   background-image: linear-gradient(378deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  678. }

  679. .radial-bar-inverse.radial-bar-85 {

  680.   background-image: linear-gradient(396deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  681. }

  682. .radial-bar-inverse.radial-bar-90 {

  683.   background-image: linear-gradient(414deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  684. }

  685. .radial-bar-inverse.radial-bar-95 {

  686.   background-image: linear-gradient(432deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  687. }

  688. .radial-bar-inverse.radial-bar-100 {

  689.   background-image: linear-gradient(450deg, #4c5667 50%, transparent 50%, transparent), linear-gradient(270deg, #4c5667 50%, #d6d6d6 50%, #d6d6d6);

  690. }

  691. 

  692. .radial-bar-lg {

  693.   width: 100px;

  694.   height: 100px;

  695.   font-size: 20px;

  696. }

  697. .radial-bar-lg:after,

  698. .radial-bar-lg > img {

  699.   width: 70px;

  700.   height: 70px;

  701.   margin-left: 15px;

  702.   margin-top: 15px;

  703.   line-height: 70px;

  704. }

  705. .radial-bar-sm {

  706.   width: 50px;

  707.   height: 50px;

  708.   font-size: 12px;

  709. }

  710. .radial-bar-sm:after,

  711. .radial-bar-sm > img {

  712.   width: 35px;

  713.   height: 35px;

  714.   margin-left: 7.5px;

  715.   margin-top: 7.5px;

  716.   line-height: 35px;

  717. }

  718. .radial-bar-xs {

  719.   width: 30px;

  720.   height: 30px;

  721.   font-size: 8px;

  722. }

  723. .radial-bar-xs:after,

  724. .radial-bar-xs > img {

  725.   width: 20px;

  726.   height: 20px;

  727.   margin-left: 5.5px;

  728.   margin-top: 4.5px;

  729.   line-height: 21px;

  730. }

  731. 

  732. .radial-bar {

  733.   background-clip: content-box;

  734. }