1.modal {
2  background-color: rgb(255, 255, 255);
3  border-radius: 1em;
4  box-shadow: 0px 100px 48px -60px rgba(0,0,0,0.1);
5  color: rgb(15, 14, 14);
6  max-width: 330px;
7  overflow: hidden;
8  position: relative;
9  transition: background-color 0.3s, color 0.3s;
10}
11
12.content > *, .modal > * {
13  padding: 0.875em;
14}
15
16.title {
17  font-size: 1.25em;
18  font-weight: 600;
19  line-height: 1.2;
20  display: flex;
21  justify-content: center;
22}
23
24.message {
25  line-height: 1.2;
26  text-align: center;
27}
28
29.actions {
30  display: flex;
31  align-items: center;
32  flex-wrap: wrap;
33}
34
35.upload-btn {
36  background-color: transparent;
37  border: 0.125rem dashed hsla(223,10%,50%,0.4);
38  flex: 1;
39  padding: 0.375rem 2rem;
40}
41
42.upload-btn:hover {
43  background-color: hsla(223,10%,60%,0.2);
44}
45
46.close {
47  display: flex;
48  align-items: center;
49  justify-content: center;
50  background-color: rgb(226, 94, 54);
51  height: 30px;
52  width: 30px;
53  border-radius: 50%;
54  position: absolute;
55  right: 10px;
56  top: 10px;
57  color: #fff;
58  font-weight: bold;
59  cursor: pointer;
60}
61
62.result {
63  margin-top: 4px;
64  background-color: rgba(0, 140, 255, 0.062);
65  display: flex;
66  align-items: center;
67  position: relative;
68  border-radius: 1em;
69}
70
71.file-uploaded {
72  font-weight: 300;
73}
74
75.file-uploaded::before {
76  position: absolute;
77  content: "X";
78  display: flex;
79  align-items: center;
80  justify-content: center;
81  background-color: rgba(26, 7, 1, 0.212);
82  height: 30px;
83  width: 30px;
84  border-radius: 50%;
85  right: 10px;
86  top: 10px;
87  color: rgb(255, 255, 255);
88  font-weight: bold;
89  cursor: pointer;
90}
91
92.file-uploaded:hover::before {
93  background-color: rgba(233, 40, 6, 0.664);
94}