1.card {
2  position: relative;
3  display: flex;
4  flex-direction: column;
5  max-width: 290px;
6  height: 254px;
7  background: #2b2b2b;
8  margin: 0 2px;
9}
10
11.card .header {
12  height: 30px;
13  width: 100%;
14  display: flex;
15  align-items: center;
16  justify-content: flex-start;
17  background-color: rgb(17, 17, 17);
18  padding-left: 4px;
19}
20
21.card .header .btn {
22  margin-left: 8px;
23  height: 12px;
24  width: 12px;
25  border-radius: 50%;
26  cursor: pointer;
27}
28
29.active {
30  cursor: pointer;
31  position: relative;
32  padding: 0 20px;
33  display: flex;
34  align-items: center;
35  justify-content: center;
36  color: #fefe;
37  background-color: #2b2b2b;
38  height: 100%;
39  margin-left: 10px;
40  border-top-left-radius: 10px;
41  border-top-right-radius: 10px;
42  font-size: 12px;
43}
44
45.card .header div:nth-child(1) {
46  background-color: rgb(255, 102, 0);
47}
48
49.card .header div:nth-child(2) {
50  background-color: rgb(247, 202, 1);
51}
52
53.card .header div:nth-child(3) {
54  background-color: rgb(10, 184, 10);
55}
56
57.card .content {
58  display: flex;
59  flex-direction: column;
60  justify-content: flex-start;
61  flex: 1;
62  line-height: 125%;
63  color: #fff;
64}
65
66.card .content .req, .card .content .res {
67  padding: .2em 1.6em;
68  border-bottom: 1px solid rgba(102, 101, 101, 0.685);
69  font-size: 12px;
70}
71
72.card .content .req {
73  display: flex;
74  align-items: center;
75  justify-content: flex-start;
76  position: relative;
77  color: #fff;
78}
79
80.card .content .req::before {
81  position: absolute;
82  content: "";
83  border-left: 1px solid rgb(177, 176, 176);
84  border-bottom: 1px solid rgb(177, 176, 176);
85  padding: 4px;
86  left: 2px;
87  height: 0;
88  width: 0;
89  background-color: transparent;
90  transform: rotate(220deg);
91}
92
93.card .content .res {
94  margin-top: 4px;
95  display: flex;
96  align-items: center;
97  justify-content: flex-start;
98  position: relative;
99  color: #fff;
100}
101
102.card .content .res span:nth-child(1) {
103  color: rgb(230, 103, 103);
104  font-style: italic;
105  margin-right: 8px;
106}
107
108.card .content .res span:nth-child(2) {
109  color: rgb(77, 245, 43);
110}
111
112.card .content .res.error {
113  background-color: rgba(255, 0, 0, 0.05);
114}
115
116.card .content .res.error::before {
117  position: absolute;
118  content: "X";
119  padding: 3px;
120  left: 2px;
121  height: 6px;
122  width: 6px;
123  background-color: rgba(255, 0, 0, 0.644);
124  border-radius: 50%;
125  display: flex;
126  align-items: center;
127  justify-content: center;
128  font-size: 12px;
129  font-weight: 500;
130}