1.card {
2  width: 450px;
3  background: #FFFFFF;
4  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
5  border-radius: 11px;
6}
7
8.search-container {
9  display: flex;
10  align-items: center;
11  justify-content: flex-start;
12  gap: 10px;
13  padding: 0 20px;
14}
15
16.search-container input {
17  width: 100%;
18  height: 50px;
19  border: 0;
20  outline: none;
21  font-size: 13px;
22}
23
24.categories {
25  display: flex;
26  align-items: center;
27  justify-content: flex-start;
28  gap: 5px;
29  padding: 0px 20px 20px 20px;
30}
31
32.categories button {
33  display: flex;
34  justify-content: center;
35  align-items: center;
36  padding: 8px 15px;
37  background: #FFFFFF;
38  border: 1px solid #E5E5E5;
39  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
40  border-radius: 20px;
41  font-weight: 600;
42  color: #171718;
43  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
44}
45
46.categories button:hover {
47  transform: scale(1.05) translateY(-3px);
48}
49
50.results {
51  display: flex;
52  flex-direction: column;
53  gap: 10px;
54}
55
56.results hr {
57  width: 100%;
58  height: 1px;
59  border: 0;
60  background-color: #ECECEC;
61}
62
63.results p {
64  padding: 0 20px;
65}
66
67p.label {
68  font-weight: 600;
69  font-size: 11px;
70  line-height: 13px;
71  color: #5F6368;
72}
73
74.results .entry {
75  display: grid;
76  grid-template-columns: 40px 1fr 40px;
77  gap: 12px;
78  padding: 5px 20px;
79  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
80}
81
82.results .entry:hover {
83  background-color: #F5F8FE;
84}
85
86.results .results-list .entry:hover .icon {
87  background-color: #1763fa;
88}
89
90.results .results-list .entry:hover .icon svg path,
91.results .results-list .entry:hover .icon svg circle {
92  stroke: #ffffff;
93}
94
95.results .results-list .entry:hover label {
96  color: #1763fa;
97}
98
99.results .results-list .entry:hover span {
100  color: #7ba0eb;
101}
102
103.results .results-list {
104  display: flex;
105  flex-direction: column;
106}
107
108.results .entry .icon {
109  width: 40px;
110  height: 40px;
111  display: flex;
112  align-items: center;
113  justify-content: center;
114  background-color: #ECECEC;
115  border-radius: 7px;
116  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
117}
118
119.results .entry .desc {
120  display: flex;
121  flex-direction: column;
122  justify-content: center;
123  gap: 5px;
124}
125
126.results .entry .desc label {
127  display: block;
128  font-weight: 600;
129  font-size: 12px;
130  line-height: 15px;
131  color: #171718;
132}
133
134.results .entry .desc span {
135  font-weight: 600;
136  font-size: 10px;
137  line-height: 12px;
138  color: #72767c;
139}
140
141.results .entry .badge {
142  width: 40px;
143  height: 24px;
144  display: flex;
145  align-items: center;
146  justify-content: center;
147  margin: auto;
148  background: #DDFFDE;
149  border: 1px solid #08581d0e;
150  border-radius: 7px;
151  font-weight: 700;
152  font-size: 11px;
153  line-height: 13px;
154  text-align: center;
155  color: #08581D;
156}
157
158.card-footer {
159  height: 40px;
160  display: flex;
161  align-items: center;
162  gap: 25px;
163  margin-top: 10px;
164  padding: 0 7px;
165  background: #F8F8F8;
166}
167
168.card .action {
169  display: flex;
170  align-items: center;
171  gap: 5px;
172}
173
174.card .action p {
175  padding-left: 5px;
176}
177
178.card-footer button {
179  width: 24px;
180  height: 24px;
181  display: flex;
182  align-items: center;
183  justify-content: center;
184  border-radius: 6px;
185  border: 0;
186  background: #ECECEC;
187  outline: none;
188}
189
190.edit-actions {
191  width: 100%;
192  text-align: right;
193  padding-right: 10px;
194  opacity: 0.6;
195}