Card by revanth-004

1/* COMMON STYLES*/
2.popup {
3  margin: 10px;
4  box-shadow: 4px 4px 10px -10px rgba(0, 0, 0, 1);
5  width: 300px;
6  justify-content: space-around;
7  align-items: center;
8  display: flex;
9  border-radius: 4px;
10  padding: 5px 0;
11  font-weight: 300;
12}
13.popup svg {
14  width: 1.25rem;
15  height: 1.25rem;
16}
17.popup-icon svg {
18  margin: 5px;
19  display: flex;
20  align-items: center;
21}
22.close-icon {
23  margin-left: auto;
24}
25.close-svg {
26  cursor: pointer;
27}
28.close-path {
29  fill: grey;
30}
31
32/*SEPERATE STYLES*/
33
34/* SUCCESS */
35.success-popup {
36  background-color: #edfbd8;
37  border: solid 1px #84d65a;
38}
39.success-icon path {
40  fill: #84d65a;
41}
42.success-message {
43  color: #2b641e;
44}
45
46/* ALERT */
47.alert-popup {
48  background-color: #fefce8;
49  border: solid 1px #facc15;
50}
51.alert-icon path {
52  fill: #facc15;
53}
54.alert-message {
55  color: #ca8a04;
56}
57
58/* ERROR */
59
60.error-popup {
61  background-color: #fef2f2;
62  border: solid 1px #f87171;
63}
64.error-icon path {
65  fill: #f87171;
66}
67.error-message {
68  color: #991b1b;
69}
70
71/* INFO */
72
73.info-popup {
74  background-color: #eff6ff;
75  border: solid 1px #1d4ed8;
76}
77.info-icon path {
78  fill: #1d4ed8;
79}
80.info-message {
81  color: #1d4ed8;
82}
83