1:root {
2 --zinc-700: rgb(66, 71, 81);
3 --success: rgb(0, 166, 110);
4 --danger: rgb(155, 35, 24);
5}
6
7body {
8 display: flex;
9 flex-direction: column;
10}
11
12main {
13}
14
15.margin-top-sm {
16 margin-top: 2em;
17}
18
19.margin-top-md {
20 margin-top: 2.5em;
21}
22
23.margin-bottom-xs {
24 margin-bottom: 1.5em;
25}
26
27.center {
28 justify-content: center;
29}
30
31.centered-body {
32 min-height: 100vh;
33 justify-content: center;
34}
35
36.base-container {
37 border: 1px solid var(--zinc-700);
38 border-radius: 10px;
39 padding: 1.75em 1.2em;
40}
41
42.box-shadow-container {
43 box-shadow: 1px 1px 52px 2px rgba(0, 0, 0, 0.42);
44}
45
46.login-container {
47 max-width: 50ch;
48 form :last-child {
49 margin-bottom: 0;
50 }
51 form button {
52 float: right;
53 }
54}
55
56.authorize-container {
57 max-width: 100ch;
58}
59
60button {
61 width: unset;
62 min-width: 16ch;
63}
64
65.button-row {
66 display: flex;
67 gap: 1ch;
68 justify-content: end;
69}
70
71.alert {
72 border: 1px solid var(--zinc-700);
73 border-radius: 10px;
74 padding: 1em 1em;
75 p {
76 color: white;
77 margin-bottom: unset;
78 }
79}
80
81.alert-success {
82 background-color: var(--success);
83}
84
85.alert-danger {
86 background-color: var(--danger);
87}
88
89.totp-image {
90 height: 200;
91 width: 200;
92}