1.card {
2  padding: 1rem;
3  background-color: #fff;
4  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
5  max-width: 320px;
6  border-radius: 20px;
7}
8
9.title {
10  display: flex;
11  align-items: center;
12}
13
14.title span {
15  position: relative;
16  padding: 0.5rem;
17  background-color: #10B981;
18  width: 1.5rem;
19  height: 1.5rem;
20  border-radius: 9999px;
21}
22
23.title span svg {
24  position: absolute;
25  top: 50%;
26  left: 50%;
27  transform: translate(-50%, -50%);
28  color: #ffffff;
29  height: 1rem;
30}
31
32.title-text {
33  margin-left: 0.5rem;
34  color: #374151;
35  font-size: 18px;
36}
37
38.percent {
39  margin-left: 0.5rem;
40  color: #02972f;
41  font-weight: 600;
42  display: flex;
43}
44
45.data {
46  display: flex;
47  flex-direction: column;
48  justify-content: flex-start;
49}
50
51.data p {
52  margin-top: 1rem;
53  margin-bottom: 1rem;
54  color: #1F2937;
55  font-size: 2.25rem;
56  line-height: 2.5rem;
57  font-weight: 700;
58  text-align: left;
59}
60
61.data .range {
62  position: relative;
63  background-color: #E5E7EB;
64  width: 100%;
65  height: 0.5rem;
66  border-radius: 0.25rem;
67}
68
69.data .range .fill {
70  position: absolute;
71  top: 0;
72  left: 0;
73  background-color: #10B981;
74  width: 76%;
75  height: 100%;
76  border-radius: 0.25rem;
77}