Form by Jerome-W-90

1.modal {
2  width: 90%;
3  max-width: 500px;
4  margin-left: auto;
5  margin-right: auto;
6  margin-top: 10px;
7  margin-bottom: 10px;
8  background-color: #fff;
9  border-radius: 0.5rem;
10  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
11}
12
13.modal-header {
14  display: flex;
15  align-items: flex-start;
16  justify-content: space-between;
17  padding: 1.5rem 1.5rem 1rem;
18}
19
20.logo-circle {
21  width: 3.5rem;
22  height: 3.5rem;
23  display: flex;
24  justify-content: center;
25  align-items: center;
26  border-radius: 50%;
27  background-color: #e9e5ff;
28  fill: #1cc972;
29}
30
31.btn-close {
32  display: flex;
33  align-items: center;
34  justify-content: center;
35  width: 2.25rem;
36  height: 2.25rem;
37  border-radius: 0.25rem;
38  border: none;
39  background-color: transparent;
40  cursor: pointer;
41}
42
43.btn-close:hover,
44.btn-close:focus {
45  background-color: #e9e5ff;
46}
47
48.modal-body {
49  padding: 1rem 1.5rem;
50}
51
52.modal-title {
53  font-weight: 700;
54}
55
56.modal-description {
57  color: #6a6b76;
58}
59
60.upload-area {
61  margin-top: 1.25rem;
62  background-color: transparent;
63  padding: 3rem;
64  width: 100%;
65  display: flex;
66  flex-direction: column;
67  align-items: center;
68  border: 1px dashed #6a6b76;
69}
70
71.upload-area:hover,
72.upload-area:focus {
73  cursor: pointer;
74  border: 1px solid #6a6b76;
75}
76
77.upload-area:hover .upload-area-icon,
78.upload-area:focus .upload-area-icon {
79  transform: scale(1.3);
80  transition-duration: 0.3s;
81}
82
83.upload-area-icon {
84  display: block;
85  width: 2.25rem;
86  height: 2.25rem;
87  fill: #1cc972;
88}
89
90.upload-area-title {
91  margin-top: 1rem;
92  display: block;
93  font-weight: 700;
94  color: #0d0f21;
95}
96
97.upload-area-description {
98  display: block;
99  color: #6a6b76;
100}
101
102.upload-area-description strong {
103  color: #1cc972;
104  font-weight: 700;
105}
106
107.modal-footer {
108  padding: 1rem 1.5rem 1.5rem;
109  display: flex;
110  justify-content: flex-end;
111}
112
113.modal-footer [class*="btn-"] {
114  margin-left: 0.75rem;
115}
116
117.btn-secondary,
118.btn-primary {
119  padding: 0.5rem 1rem;
120  font-weight: 500;
121  border: 2px solid #e5e5e5;
122  border-radius: 0.25rem;
123  background-color: transparent;
124  cursor: pointer;
125}
126
127.btn-primary {
128  color: #fff;
129  background-color: #1cc972;
130  border-color: #1cc972;
131  cursor: pointer;
132}
133