1.form {
2  position: relative;
3  display: flex;
4  flex-direction: column;
5  border-radius: 0.75rem;
6  background-color: #fff;
7  color: rgb(97 97 97);
8  box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);
9  width: 22rem;
10  background-clip: border-box;
11}
12
13.header {
14  position: relative;
15  background-clip: border-box;
16  background-color: #1e88e5;
17  background-image: linear-gradient(to top right,#1e88e5,#42a5f5);
18  margin: 10px;
19  border-radius: 0.75rem;
20  overflow: hidden;
21  color: #fff;
22  box-shadow: 0 0 #0000,0 0 #0000,0 0 #0000,0 0 #0000,rgba(33,150,243,.4);
23  height: 7rem;
24  letter-spacing: 0;
25  line-height: 1.375;
26  font-weight: 600;
27  font-size: 1.9rem;
28  font-family: Roboto, sans-serif;
29  display: flex;
30  align-items: center;
31  justify-content: center;
32}
33
34.inputs {
35  padding: 1.5rem;
36  gap: 1rem;
37  display: flex;
38  flex-direction: column;
39}
40
41.input-container {
42  display: flex;
43  flex-direction: column;
44  gap: 1rem;
45  min-width: 200px;
46  width: 100%;
47  height: 2.75rem;
48  position: relative;
49}
50
51.input {
52  border: 1px solid rgba(128, 128, 128, 0.61);
53  outline: 0;
54  color: rgb(69 90 100);
55  font-weight: 400;
56  font-size: .9rem;
57  line-height: 1.25rem;
58  padding: 0.75rem;
59  background-color: transparent;
60  border-radius: .375rem;
61  width: 100%;
62  height: 100%;
63}
64
65.input:focus {
66  border: 1px solid #1e88e5;
67}
68
69.checkbox-container {
70  margin-left: -0.625rem;
71  display: inline-flex;
72  align-items: center;
73}
74
75.checkbox {
76  position: relative;
77  overflow: hidden;
78  padding: .55rem;
79  border-radius: 999px;
80  display: flex;
81  align-items: center;
82  cursor: pointer;
83  justify-content: center;
84  background-color: rgba(0, 0, 0, 0.027);
85  height: 35px;
86  width: 35px;
87}
88
89.checkbox input {
90  width: 100%;
91  height: 100%;
92  cursor: pointer;
93}
94
95.checkbox-text {
96  cursor: pointer;
97}
98
99.sigin-btn {
100  text-transform: uppercase;
101  font-weight: 700;
102  font-size: .75rem;
103  line-height: 1rem;
104  text-align: center;
105  padding: .75rem 1.5rem;
106  background-color: #1e88e5;
107  background-image: linear-gradient(to top right,#1e88e5,#42a5f5);
108  border-radius: .5rem;
109  width: 100%;
110  outline: 0;
111  border: 0;
112  color: #fff;
113}
114
115.signup-link {
116  line-height: 1.5;
117  font-weight: 300;
118  font-size: 0.875rem;
119  display: flex;
120  align-items: center;
121  justify-content: center;
122}
123
124.signup-link a, .forget {
125  line-height: 1.5;
126  font-weight: 700;
127  font-size: .875rem;
128  margin-left: .25rem;
129  color: #1e88e5;
130}
131
132.forget {
133  text-align: right;
134  font-weight: 600;
135}