1.container {
2  height: fit-content;
3  display: flex;
4  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
5  border-radius: 9px;
6}
7
8.login-form {
9  width: 350px;
10  height: auto;
11  display: flex;
12  flex-direction: column;
13  gap: 15px;
14  padding: 20px;
15  border-radius: 9px 0 0 9px;
16  background-color: #fff;
17}
18
19.header {
20  display: flex;
21  flex-direction: column;
22  align-items: center;
23  margin: 15px 0;
24}
25
26.title {
27  font-weight: 700;
28  font-size: 15px;
29  line-height: 21px;
30  text-align: center;
31  color: #2B2B2F;
32  margin-bottom: 10px;
33}
34
35.description {
36  max-width: 80%;
37  margin: auto;
38  font-weight: 600;
39  font-size: 10px;
40  line-height: 14px;
41  text-align: center;
42  color: #5F5D6B;
43}
44
45.input_container {
46  width: 100%;
47  height: fit-content;
48  position: relative;
49  display: flex;
50  flex-direction: column;
51  gap: 5px;
52}
53
54.icon {
55  width: 20px;
56  position: absolute;
57  z-index: 99;
58  left: 12px;
59  bottom: 9px;
60}
61
62.input_field {
63  width: auto;
64  height: 40px;
65  padding: 0 0 0 40px;
66  border-radius: 7px;
67  outline: none;
68  border: 1px solid #e5e5e5;
69  filter: drop-shadow(0px 1px 0px #efefef)
70    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
71  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
72}
73
74.input_field:focus {
75  border: 1px solid transparent;
76  box-shadow: 0px 0px 0px 2px #115DFC;
77  background-color: transparent;
78}
79
80.sign-in_btn {
81  display: flex;
82  flex-direction: row;
83  justify-content: center;
84  align-items: center;
85  gap: 10px;
86  width: 100%;
87  height: 36px;
88  background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);
89  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
90  border-radius: 5px;
91  border: 0;
92  font-style: normal;
93  font-weight: 600;
94  font-size: 12px;
95  line-height: 15px;
96  color: #ffffff;
97  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
98}
99
100.sign-in_btn:hover {
101  transform: scale(1.01) translateY(-2px);
102  box-shadow: 0 10px 20px 0#054eed6b;
103}
104
105.testimonial {
106  width: 250px;
107  height: auto;
108  display: flex;
109  flex-direction: column;
110  align-items: center;
111  justify-content: center;
112  gap: 20px;
113  padding: 20px;
114  background: linear-gradient(358.31deg,#fff -24.13%,hsla(0,0%,100%,0) 338.58%),linear-gradient(89.84deg,rgba(230,36,174,.15) .34%,rgba(94,58,255,.15) 16.96%,rgba(10,136,255,.15) 34.66%,rgba(75,191,80,.15) 50.12%,rgba(137,206,0,.15) 66.22%,rgba(239,183,0,.15) 82%,rgba(246,73,0,.15) 99.9%);
115  border-radius: 0 9px 9px 0;
116}
117
118.testimonial p {
119  color: #4d4c6d;
120  font-size: 11px;
121  text-align: center;
122  font-weight: 600;
123}
124
125.user-profile-picture {
126  width: 50px;
127  height: 50px;
128  border-radius: 50%;
129  background-color: #00000011;
130}
131
132.user {
133  display: flex;
134  flex-direction: column;
135  align-items: center;
136  justify-content: center;
137  gap: 3px;
138}
139
140.username {
141  color: #4d4c6d;
142  font-size: 11px;
143  text-align: center;
144  font-weight: 600;
145}
146
147.occupation {
148  color: rgb(141, 140, 161);
149  font-size: 10px;
150  text-align: center;
151  font-weight: 600;
152}