1.card {
2  width: 300px;
3  height: 330px;
4  background: #333333;
5  border-radius: 6px;
6  color: white;
7}
8
9.header,
10.info,
11.progress-line
12.bottom {
13  width: 100%;
14}
15
16.header {
17  height: 50px;
18  display: flex;
19  justify-content: center;
20  align-items: center;
21  border-bottom: 1px solid #2E2E2E
22}
23
24.info {
25  height: 230px;
26  display: flex;
27  justify-content: center;
28  align-items: center;
29}
30
31.bottom {
32  height: 50px;
33  background-color: #2C2C2C;
34  border-bottom-left-radius: 6px;
35  border-bottom-right-radius: 6px;
36  display: flex;
37  flex-direction: row;
38  justify-content: right;
39  align-items: center;
40  gap: 5px;
41}
42
43.header-button {
44  width: 94%;
45  height: 72%;
46  border-radius: 6px;
47  border: none;
48  outline: none;
49  background-color: #333333;
50  color: white;
51  font-size: 15px;
52  display: flex;
53  align-items: center;
54  justify-content: space-between;
55  transition: all 0.2s ease;
56  cursor: pointer;
57}
58
59.header-button:hover {
60  background-color: #3F3F3F;
61}
62
63.header-button svg {
64  width: 20px;
65}
66
67.header-button svg:first-child {
68  position: relative;
69  left: 5px;
70}
71
72.header-button svg:last-child {
73  position: relative;
74  right: 15px;
75}
76
77.header-button a {
78  position: relative;
79  right: 35px;
80}
81
82.info-border {
83  width: 90%;
84  height: 80%;
85  display: flex;
86  flex-direction: column;
87  gap: 6px
88}
89
90.info-border a:first-child {
91  font-weight: 600;
92}
93
94.info-border a:nth-child(3) {
95  font-size: 15px;
96}
97
98.info-border a:nth-child(4) {
99  width: 200px;
100  font-size: 13px;
101  position: relative;
102  top: 10px;
103  align-self: center;
104  text-align: center;
105}
106
107.progress-line {
108  height: 4px;
109  border-radius: 666px;
110  background-color: #FF99A4;
111}
112
113.update-button {
114  width: 120px;
115  height: 35px;
116  position: relative;
117  top: 25px;
118  align-self: center;
119  outline: none;
120  border: none;
121  background-color: #4CC2FF;
122  border-radius: 6px;
123  font-size: 15px;
124  font-weight: 600;
125  color: #33333;
126  transition: all 0.2s ease;
127  cursor: pointer;
128}
129
130.update-button:hover {
131  background-color: #49B3EA;
132}
133
134.square {
135  width: 30px;
136  height: 30px;
137  right: 10px;
138  position: relative;
139  border-radius: 3px;
140  transition: background-color 0.2s ease;
141  cursor: pointer;
142  display: flex;
143  align-items: center;
144  justify-content: center;
145}
146
147.square:hover {
148  background-color: #3A3A3A;
149}
150
151.tooltip {
152  position: absolute;
153  top: -30px;
154  left: 50%;
155  transform: translateX(-50%);
156  background-color: #2E2E2E;
157  color: #fff;
158  padding: 5px;
159  opacity: 0;
160  transition: opacity 0.3s ease-in-out;
161  transition-delay: 1.5s;
162  white-space: nowrap;
163  font-size: 12px;
164  border-radius: 3px;
165  border: 1px solid #252525;
166}
167
168.square:hover .tooltip {
169  opacity: 1;
170}
171
172.square:not(:hover) .tooltip {
173  opacity: 0;
174  transition-delay: 0s;
175}
176
177.square svg {
178  width: 20px;
179}