body{
    background:#CDEEFB;
    background-size:cover;
    width:98%;
    height:98%;
}
h1.header{
    margin-top:3%;
    color:#3D86B6;
    text-shadow:5px 5px 5px #67B3DA;
}
input {
    border-radius:2rem;
    text-align:center;
    border:none;
    padding:.5rem;
    flex-grow:1;
    margin:0.25rem;
}
label{
    margin:5px;
}
button{
    margin:5px;
    border:1px;
    padding:10px;
    border-radius:5px;
    box-shadow:5px 5px 5px grey;
}
button:hover{
    box-shadow:3px 3px 3px steelblue;
}
#inputPanel { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; display:flex; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#inputPanel > button { border: none; padding: .5rem; margin: 0.25rem; border-radius: 3px; outline: none; }
li {
    line-height:200%;
    border-radius:10px;
    margin:5px;
    box-shadow:3px 3px 3px grey;
    opacity:.9;
    list-style:none;
    padding:10px;
}
#contacts > li{
    line-height:100%;
    display:block;
    white-space:normal;
    word-break:break-all;
}
li.self {
    float:right;
    clear:both;
    background-color:white;
}
li.others{
    float:left;
    clear:both;
    background-color:#67B3DA;
}

li.file{
    color:green;
    font-style:italic;
    text-decoration:underline;
}
li.msg{
    color:black;
    font-style:oblique;
}
label.reply{
    display:block;
    line-height:100%;
    font-size:30%;
    color:slategrey;
    font-style:normal;
}
#contactDiv{
    z-index:10;
    width:17%;;
    position:fixed;
    top:22%;
    bottom:4rem;
    overflow:auto;
    display:flex;
    flex-grow:1;
    flex-direction:column;
    padding:.5rem;
    align-items:center;
}
#tabDiv{
    width:100%;
    height:78%;
    padding:1rem;
    overflow:auto;
}
#tabPanel{
    position:fixed;
    top:15%;
    left:19%;
    right:2%;
    bottom:4rem;
    border:2px ridge;
    padding:.5rem;
}