Form by mi-series

1.container {
2  width: 450px;
3  background: #8C92BB;
4  border-radius: 8px;
5  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
6}
7
8.container p {
9  font-weight: 600;
10  font-size: 1.31rem;
11  padding: 1rem 1.75rem;
12  border-bottom: 1px solid #858BB2;
13}
14
15.wrapper {
16  margin: 1.25rem 1.75rem;
17}
18
19.wrapper .input-box {
20  position: relative;
21}
22
23.input-box input {
24  width: 100%;
25  height: 53px;
26  color: #858BB2;
27  background: #858BB2;
28  font-size: 1.06rem;
29  font-weight: 500;
30  border-radius: 4px;
31  letter-spacing: 1.4px;
32  border: 1px solid #000;
33  padding: 0 2.85rem 0 1rem;
34}
35
36.input-box span {
37  position: absolute;
38  right: 13px;
39  cursor: pointer;
40  line-height: 53px;
41  color: #000;
42}
43
44.input-box span:hover {
45  color: #46495E!important;
46}
47
48.wrapper .pass-settings {
49  margin: 1.56rem 0 1.25rem;
50}
51
52.pass-settings .options {
53  display: flex;
54  list-style: none;
55  flex-wrap: wrap;
56  margin-top: 1rem;
57}
58
59.pass-settings .options .option {
60  display: flex;
61  align-items: center;
62  margin-bottom: 1rem;
63  width: calc(100% / 2);
64}
65
66.options .option:first-child input {
67  opacity: 0.7;
68}
69
70.options .option input {
71  height: 16px;
72  width: 16px;
73  cursor: pointer;
74}
75
76.options .option label {
77  cursor: pointer;
78  color: #000;
79  padding-left: 0.63rem;
80}
81
82.pass-settings input[type='checkbox'] {
83  accent-color: #46496E;
84}
85
86.wrapper .generate-btn {
87  width: 100%;
88  color: #000;
89  border: none;
90  outline: none;
91  cursor: pointer;
92  background: #46496E;
93  font-size: 1.06rem;
94  padding: 0.94rem 0;
95  border-radius: 5px;
96  text-transform: uppercase;
97  margin: 0.94rem 0 1.3rem;
98}
99
100.wrapper .generate-btn:hover {
101  background: #46495E;
102}