Quiz

1
#site_content {
2
    padding: 0 10px;
3
    width: 877px;
4
}
5

6
.lobby_content {
7
    display: flex;
8
    flex-direction: column;
9
    justify-content: space-between;
10
    width: 100%;
11
    height: calc(100vh - 302px);
12
    position: relative;
13
}
14

15
.lobby_mode {
16
    position: absolute;
17
    left: 5px;
18
    top: 5px;
19
    display: flex;
20
    align-items: center;
21
    z-index: 1;
22
}
23

24
.lobby_mode > span {
25
    margin-right: 5px;
26
}
27

28
.lobby_mode > select {
29
    margin-right: 10px;
30
    border: 1px solid #F79F00;
31
    background-color: white;
32
}
33

34
.lobby_invitation_rejected {
35
    position: absolute;
36
    top: 5px;
37
    right: 5px;
38
}
39

40
.lobby_players_block {
41
    display: flex;
42
    justify-content: space-around;
43
    height: 100%;
44
    padding-bottom: 50px;
45
    box-sizing: border-box;
46
}
47

48
.lobby_player_block {
49
    height: 100%;
50
    width: 150px;
51
    border: 1px solid #F79F00;
52
    border-top: none;
53
    border-bottom-left-radius: 20px;
54
    border-bottom-right-radius: 20px;
55
    display: flex;
56
    flex-direction: column;
57
    align-items: center;
58
    justify-content: center;
59
    font-size: 18px;
60
}
61

62
.lobby_player_blank {
63
    height: 100%;
64
    width: 150px;
65
    border: 1px solid gray;
66
    border-top: none;
67
    border-bottom-left-radius: 20px;
68
    border-bottom-right-radius: 20px;
69
}
70

71
.lobby_bottom {
72
    display: flex;
73
    justify-content: center;
74
    position: absolute;
75
    bottom: 0;
76
    left: 0;
77
    width: 100%;
78
    padding: 10px 0;
79
}
80

81
.lobby_start_block {
82
    position: relative;
83
    color: #F79F00;
84
}
85

86
.lobby_start_game_button, .lobby_cancel_queue_button {
87
    cursor: pointer;
88
}
89

90
.lobby_start_game_span {
91
    color: gray;
92
}
93

94
.lobby_countdown_block {
95
    position: absolute;
96
    top: 0;
97
    left: 110%;
98
    display: none;
99
}
100

101
.lobby_accept_request_bg {
102
    position: fixed;
103
    width: 100vw;
104
    height: 100vh;
105
    top: 0;
106
    left: 0;
107
    display: flex;
108
    justify-content: center;
109
    align-items: center;
110
    background-color: #A6A6A6;
111
    opacity: 0.8;
112
    z-index: 2;
113
}
114

115
.lobby_accept_request_button {
116
    width: 300px;
117
    height: 300px;
118
    border-radius: 150px;
119
    display: flex;
120
    justify-content: center;
121
    align-items: center;
122
    background-color: white;
123
    border: 5px solid #F79F00;
124
    text-transform: uppercase;
125
}
126

127
.lobby_accept_request_button > span {
128
    border: 2px solid #F79F00;
129
    padding: 5px;
130
    font-size: 24px;
131
    font-weight: bold;
132
    letter-spacing: 0.2em;
133
    cursor: pointer;
134
}
135

136
.header_friend_invite {
137
    display: block;
138
}
139

140
.header_friend_invited {
141
    display: none;
142
}
143

144
.game_content {
145
    display: flex;
146
    flex-direction: column;
147
    padding: 10px;
148
    box-sizing: border-box;
149
}
150

151
.game_themes > span {
152
    margin-right: 10px;
153
}
154

155
.game_questions_block {
156
    width: 100%;
157
    display: flex;
158
    flex-direction: column;
159
    align-items: center;
160
}
161

162
.game_question {
163
    text-align: center;
164
}
165

166
.game_answers_block {
167
    display: flex;
168
    flex-direction: column;
169
    align-items: center;
170
    margin: 10px;
171
}
172

173
.game_answer {
174
    width: 300px;
175
    text-align: center;
176
    cursor: pointer;
177
    padding: 5px 10px;
178
    margin-top: 5px;
179
}
180

181
.game_answer_button {
182
    background-color: #F79F00;
183
    padding: 3px 7px;
184
    cursor: pointer;
185
    visibility: hidden;
186
}
187

188
.game_bottom {
189
    display: flex;
190
    justify-content: center;
191
    margin-top: 20px;
192
}
193

194
.results_score_first > td {
195
    background-color: #ffd700;
196
    font-size: 24px;
197
}
198

199
.results_score_second > td {
200
    background-color: #c0c0c0;
201
    font-size: 20px;
202
}
203

204
.results_score_third > td {
205
    background-color: #b08d57;
206
    font-size: 16px;
207
}
208

209
.game_chat_block, .lobby_chat_block {
210
    position: fixed;
211
    bottom: 5px;
212
    left: 5px;
213
    width: 300px;
214
    display: none;
215
    flex-direction: column;
216
    background-color: white;
217
    border: 1px solid #F79F00;
218
}
219

220
.game_chat_top, .lobby_chat_top {
221
    padding: 3px;
222
    display: flex;
223
    justify-content: space-between;
224
    align-items: center;
225
    width: 100%;
226
    border-bottom: 1px solid #F79F00;
227
    box-sizing: border-box;
228
}
229

230
.game_chat_messages, .lobby_chat_messages {
231
    height: 170px;
232
    display: flex;
233
    flex-direction: column-reverse;
234
    align-items: center;
235
    overflow-y: auto;
236
    width: 100%;
237
}
238

239
.game_chat_textarea, .lobby_chat_textarea {
240
    width: 100%;
241
    height: 40px;
242
    border: none;
243
    border-top: 1px solid #F79F00;
244
    box-sizing: border-box;
245
}
246

247
.lobby_chat_open, .game_chat_open {
248
    padding: 3px;
249
    border: 1px solid #F79F00;
250
    position: fixed;
251
    left: 5px;
252
    bottom: 5px;
253
    background-color: white;
254
    cursor: pointer;
255
}
256

257
.lobby_chat_close, .game_chat_close {
258
    cursor: pointer;
259
}