chat

1
.headerPage {
2
    display: flex;
3
    align-items: center;
4
    justify-content: center;
5
    background-color: #B5E7C6;
6
    padding: 0px;
7
    margin: 0px;
8
    height: 50px;
9
    justify-content: space-between;
10
}
11

12
.headerPage h2 {
13
    color: rgb(255, 255, 255);
14
    padding: 0px;
15
    margin: 0px auto;
16
    font-weight: 800;
17
}
18

19
.exitPage {
20
    display: flex;
21
    align-items: center;
22
    justify-content: center;
23
    background-color: #E07C7C;
24
    height: 29px;
25
    width: 29px;
26
    border-radius: 8px;
27
    margin-right: 30px;
28
    cursor: pointer;
29
}
30

31
.exitRoundPage {
32
    background-color: #ffffff;
33
    height: 16px;
34
    width: 16px;
35
    border-radius: 8px;
36
}
37

38
.exitRoundPage p {
39
    text-align: center;
40
    color: #E07C7C;
41
    font-weight: 900;
42
    font-size: 0.85em;
43
    margin: 0px;
44
    padding: 0px;
45
}
46

47
.bodyPage {
48
    display: flex;
49
    margin: 30px auto;
50
    width: 80%;
51
    border-radius: 10px;
52
    border: 2px solid #B5E7C6;
53
}
54

55
.bodyPage li,  .bodyPage ul{
56
    list-style-type: none;
57
    padding: 0px;
58
    margin: 0px;
59
}
60

61
.contactPage {
62
    display: flex;
63
    max-height: 590px;
64
    min-height: 350px;
65
    overflow-y: scroll;
66
    width: 15%;
67
    flex-direction: column;
68
    background-color: #C3F3D6;
69
    border: 2px solid #B5E7C6;
70
    border-radius: 10px 0px 0px 10px;
71
}
72

73
.contactPage::-webkit-scrollbar { width: 0; }
74

75
.contactPage { -ms-overflow-style: none; }
76

77
.contactPage { overflow: -moz-scrollbars-none; }
78

79
.contactPage li {
80
    cursor: pointer;
81
    width: 100%;
82
    text-align: center;
83
    padding: 5px 0px;
84
}
85

86
.contactPage li:hover {
87
    background-color: #B5E7C6;
88
}
89

90
.smsPage {
91
    display: flex;
92
    max-height: 590px;
93
    min-height: 350px;
94
    flex-direction: column;
95
    background-color: #C9FDEA;
96
    border-radius: 0px 10px 10px 0px;
97
    width: 85%;
98
}
99

100
.smsPageHeader {
101
    display: flex;
102
    justify-content: space-around;
103
}
104

105
.smsPageBody {
106
    height: 420px;
107
    overflow-y: scroll;
108
    padding: 10px 35px;
109
}
110

111
.smsPageBody::-webkit-scrollbar {
112
    width: 6px;
113
    background-color: #ffffff;
114
}
115

116
.smsPageBody::-webkit-scrollbar-thumb {
117
    background-color: #88d1b6;
118
}
119

120

121
.smsPageBody::-webkit-scrollbar-track {
122
    -webkit-box-shadow: inset 0 0 6px rgba(105, 105, 105, 0.3);
123
    background-color: #F5F5F5;
124
}
125

126
.smsPageBody ul li {
127
    display: flex;
128
    width: 100%;
129
    margin-bottom: 10px;
130
}
131

132
.smsPageBody ul li.reverse {
133
    flex-direction: row-reverse;
134
    margin-right: 0px;
135
}
136

137
.smsPageBody ul li img {
138
    height: 50px;
139
    border-radius: 10px;
140
}
141

142
.smsPageBody ul li > div{
143
    min-width: 20px;
144
    width: 60%;
145
}
146

147
.smsPageBody ul li div div{
148
    display: flex;
149
    background-color: white;
150
    padding: 5px;
151
    border-radius: 10px;
152
    border: 2px solid #B5E7C6;
153
    margin: 0px 20px;
154
}
155

156
.smsPageBody ul li div div p {
157
    margin: 0px;
158
    padding: 0px;
159
    text-align: center;
160
}
161

162
.smsPageFooter {
163
    position: relative;
164
    display: flex;
165
    align-items: center;
166
    Justify-content: space-between;
167
    margin-top: 30px;
168
    padding: 0px 20px 0px 20px;
169
    bottom: 15px;
170
    width: 95%;
171
}
172

173
.smsInput {
174
    resize: none;
175
    width: 100%;
176
    border: none;
177
    border-radius: 5px;
178
    padding: 5px;
179
    height: 20px;
180
    font-size: 0.9em;
181
    outline: 0;
182
    border: 2px solid #B5E7C6;
183
}
184

185
.smsInput:focus {
186
    border: 2px solid #b9b9b9;
187
}
188

189
.smsFile {
190
    display: none;
191
}
192

193
#smsFile {
194
    position: relative;
195
    overflow: hidden;
196
    width: 30px;
197
    height: 30px;
198
    background: #88d1b6;
199
    border-radius: 5px;
200
    color: #fff;
201
    text-align: center;
202
    margin: 0px 5px;
203
}
204

205
#smsFile label {
206
    display: flex;
207
    align-items: center;
208
    justify-content: center;
209
    position: absolute;
210
    width: 100%;
211
    height: 100%;
212
    cursor: pointer;
213
}
214

215
.smsPageFooter button {
216
    height: 30px;
217
    border-radius: 5px;
218
    border: none;
219
    color: white;
220
    background: #88d1b6;
221
    font-weight: 600;
222
    outline: 0;
223
    cursor: pointer;
224
}
225

226
.smsPageFooter button:active {
227
    background: #80c4ab;
228
}
229

230
.hide {
231
   display: none;
232
}
233

234
.Hello {
235
    background-color: #C9FDEA;
236
    width: 100%;
237
}
238

239
.Hello >p {
240
    margin: 0px;
241
    text-align: center;
242
}
243

244
.Hello >h2 {
245
    margin-bottom: 0px;
246
    text-align: center;
247
}