1.form_main {
2  width: 220px;
3  display: flex;
4  flex-direction: column;
5  align-items: center;
6  justify-content: center;
7  background-color: rgb(255, 255, 255);
8  padding: 30px 30px 30px 30px;
9  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062);
10  position: relative;
11  overflow: hidden;
12}
13
14.form_main::before {
15  position: absolute;
16  content: "";
17  width: 300px;
18  height: 300px;
19  background-color: rgb(209, 193, 255);
20  transform: rotate(45deg);
21  left: -180px;
22  bottom: 30px;
23  z-index: 1;
24  border-radius: 30px;
25  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.082);
26}
27
28.heading {
29  font-size: 2em;
30  color: #2e2e2e;
31  font-weight: 700;
32  margin: 5px 0 10px 0;
33  z-index: 2;
34}
35
36.inputContainer {
37  width: 100%;
38  position: relative;
39  display: flex;
40  align-items: center;
41  justify-content: center;
42  z-index: 2;
43}
44
45.inputIcon {
46  position: absolute;
47  left: 3px;
48}
49
50.inputField {
51  width: 100%;
52  height: 30px;
53  background-color: transparent;
54  border: none;
55  border-bottom: 2px solid rgb(173, 173, 173);
56  margin: 10px 0;
57  color: black;
58  font-size: .8em;
59  font-weight: 500;
60  box-sizing: border-box;
61  padding-left: 30px;
62}
63
64.inputField:focus {
65  outline: none;
66  border-bottom: 2px solid rgb(199, 114, 255);
67}
68
69.inputField::placeholder {
70  color: rgb(80, 80, 80);
71  font-size: 1em;
72  font-weight: 500;
73}
74
75#button {
76  z-index: 2;
77  position: relative;
78  width: 100%;
79  border: none;
80  background-color: rgb(162, 104, 255);
81  height: 30px;
82  color: white;
83  font-size: .8em;
84  font-weight: 500;
85  letter-spacing: 1px;
86  margin: 10px;
87  cursor: pointer;
88}
89
90#button:hover {
91  background-color: rgb(126, 84, 255);
92}
93
94.forgotLink {
95  z-index: 2;
96  font-size: .7em;
97  font-weight: 500;
98  color: rgb(44, 24, 128);
99  text-decoration: none;
100  padding: 8px 15px;
101  border-radius: 20px;
102}
103
104