File size: 3,222 Bytes
e92f4f7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
/* Ensure body doesn't overflow */
body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Background colors */
.bg-light-gray {
    background-color: #f3f4f6; /* Tailwind bg-gray-100 */
}
.bg-white {
    background-color: #ffffff; /* Tailwind bg-white */
}
.bg-blue {
    background-color: #2563eb; /* Tailwind bg-blue-600 */
}
.hover-bg-blue-dark:hover {
    background-color: #1d4ed8; /* Tailwind hover:bg-blue-700 */
}

/* Text colors */
.text-blue {
    color: #2563eb; /* Tailwind text-blue-600 */
}
.text-gray {
    color: #4b5563; /* Tailwind text-gray-700 */
}
.text-dark-gray {
    color: #1f2937; /* Tailwind text-gray-800 */
}

/* Typography */
.text-2xl {
    font-size: 1.5rem; /* Tailwind text-2xl */
}
.text-lg {
    font-size: 1.125rem; /* Tailwind text-lg */
}
.text-sm {
    font-size: 0.875rem; /* Tailwind text-sm */
}
.font-bold {
    font-weight: 700; /* Tailwind font-bold */
}
.font-medium {
    font-weight: 500; /* Tailwind font-medium */
}
.font-semibold {
    font-weight: 600; /* Tailwind font-semibold */
}
.text-center {
    text-align: center; /* Tailwind text-center */
}

/* Spacing */
.p-4 {
    padding: 1rem; /* Tailwind p-4 */
}
.p-6 {
    padding: 1.5rem; /* Tailwind p-6 */
}
.py-2 {
    padding-top: 0.5rem; /* Tailwind py-2 */
    padding-bottom: 0.5rem;
}
.px-4 {
    padding-left: 1rem; /* Tailwind px-4 */
    padding-right: 1rem;
}
.mt-1 {
    margin-top: 0.25rem; /* Tailwind mt-1 */
}
.mb-4 {
    margin-bottom: 1rem; /* Tailwind mb-4 */
}
.mt-6 {
    margin-top: 1.5rem; /* Tailwind mt-6 */
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1rem; /* Tailwind space-y-4 */
}

/* Layout */
.min-h-screen {
    min-height: 100vh; /* Tailwind min-h-screen */
}
.flex {
    display: flex; /* Tailwind flex */
}
.flex-col {
    flex-direction: column; /* Tailwind flex-col */
}
.items-center {
    align-items: center; /* Tailwind items-center */
}
.justify-center {
    justify-content: center; /* Tailwind justify-center */
}
.w-full {
    width: 100%; /* Tailwind w-full */
}
.max-w-4xl {
    width: 100%; /* Ensure it uses full available width */
    max-width: 64rem; /* Updated to Tailwind max-w-4xl for wider desktop layout */
    min-width: 48rem; /* Ensure it doesn't shrink too much */
}
.block {
    display: block; /* Tailwind block */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .max-w-4xl {
        max-width: 100%;
        min-width: 0;
    }
    .p-6 {
        padding: 1rem;
    }
}

/* Borders and Shadows */
.rounded {
    border-radius: 0.375rem; /* Tailwind rounded */
}
.border-gray {
    border: 1px solid #d1d5db; /* Tailwind border-gray-300 */
}
.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Tailwind shadow */
}
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Tailwind shadow-sm */
}
.focus-border-blue:focus {
    border-color: #3b82f6; /* Tailwind focus:border-blue-500 */
    outline: none;
}
.focus-ring-blue:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* Tailwind focus:ring-blue-500 */
}

/* Miscellaneous */
.overflow-auto {
    overflow: auto; /* Tailwind overflow-auto */
}
.hidden {
    display: none; /* Tailwind hidden */
}