1.form-container__sign-app-buttons svg {
2  width: 22px;
3  height: auto;
4}
5
6.google svg {
7  width: 18px;
8  height: auto;
9}
10
11.form-container {
12  min-width: 350px;
13  box-sizing: border-box;
14  font-family: sans-serif;
15  color: #4b4b4b;
16  min-height: 20px;
17  padding: 19px;
18  margin-bottom: 20px;
19  background-color: #f5f5f5;
20}
21
22.form-container:focus-within:not(:focus) {
23  box-shadow: 0 0 6px 3px #caedff;
24  -webkit-box-shadow: 0 0 6px 3px #caedff;
25  outline: 1px solid #97dbff;
26}
27
28.form-container p {
29  font-size: 14px;
30  font-weight: bold;
31  margin-bottom: 14px;
32}
33
34.top-line {
35  padding-top: 12px;
36}
37
38.form-container__form {
39  display: flex;
40  flex-direction: column;
41  row-gap: 16px;
42}
43
44.form-container__form input {
45  height: 31px;
46  border: 1px solid #d9d9d9;
47  padding: 4px;
48  font-size: 14px;
49  line-height: 1.65;
50  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
51  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
52  -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
53  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
54  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
55}
56
57.form-container__form input:focus {
58  border-color: #00a6fd;
59  outline: 0;
60  box-shadow: none;
61}
62
63.form-container__register-buttons {
64  display: flex;
65  column-gap: 10px;
66}
67
68.form-container__sign {
69  padding: 8px 20px;
70  font-size: 14px;
71  line-height: 1.65;
72  border-radius: 20px;
73  width: 110px;
74  white-space: nowrap;
75  background-color: #00a6fd;
76  border: none;
77  color: white;
78  font-weight: bold;
79  cursor: pointer;
80}
81
82.form-container__sign:first-child:active,
83.form-container__sign:first-child:hover {
84  background-color: #0099e9;
85}
86
87.form-container__sign:focus {
88  outline-offset: -2px;
89  outline: none;
90  -webkit-box-shadow: inset 0 0 3px 1px #97dbff;
91  box-shadow: inset 0 0 3px 1px #97dbff;
92}
93
94.forgot {
95  width: auto;
96  padding: 8px 0;
97  background: none;
98  font-weight: 400;
99  color: #428bca;
100  text-decoration: none;
101}
102
103.forgot:hover {
104  text-decoration: underline;
105  color: #4c9dd0;
106}
107
108.form-container__header {
109  padding-bottom: 16px;
110}
111
112.form-container__footer {
113  padding-top: 12px;
114  border-top: 1px solid #cacaca;
115}
116
117.form-container__sign-app-buttons {
118  display: flex;
119  column-gap: 24px;
120}
121
122.form-container__sign-app-buttons button:not(:first-child) {
123  border: none;
124  background: none;
125  cursor: pointer;
126  position: relative;
127  display: flex;
128  align-items: center;
129  justify-content: center;
130}
131
132.form-container__sign-app-buttons button:not(:first-child)::before {
133  position: absolute;
134  content: '';
135  width: 120%;
136  height: 2px;
137  background: rgb(187, 187, 187);
138  bottom: 0;
139  opacity: 0;
140}
141
142.form-container__sign-app-buttons button:not(:first-child):hover::before {
143  opacity: 1;
144  transition: 1s;
145}
146
147.form-container__sign-app-buttons button:not(:first-child):focus::before {
148  opacity: 1;
149  background-color: #4b4b4b;
150}
151
152.form-container__sign-app-buttons button:first-child {
153  justify-content: center;
154  min-width: 110px;
155  height: 40px;
156  border: none;
157  background: white;
158  border-radius: 2px;
159  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px #b7b7b7;
160  display: flex;
161  align-items: center;
162  color: #4b4b4b;
163  font-size: 13px;
164  column-gap: 15px;
165  cursor: pointer;
166}
167
168.form-container__sign-app-buttons button:first-child:active {
169  background: #eeeeee;
170}
171
172.form-container__sign-app-buttons button:first-child:focus:not(:active) {
173  outline: none;
174  -webkit-box-shadow: inset 0 0 3px 1px #97dbff;
175  box-shadow: inset 0 0 3px 1px #97dbff;
176}