* {
    box-sizing: border-box;
}
html {
    height: 100%;
    background-color: #333333;
    color: white;
    padding:0;
    margin:0;
    font-family: 'Open Sans', Roboto, sans-serif;
}
body {
    overflow: hidden;
    background-size:cover;
    /* background: #3f7a99 no-repeat; */
    height:100dvh; /*%; dvh???*/
    width:100%;
    margin:0;
    background-size:cover;
}
.body {
    height: calc(100% - 140px);
    display: block;
}
.main_container {
    height: 100%;
    width: 100%;
    display: block;
}
.header {border-bottom: 1px solid lightgrey; font-size: 1.5em; height: 60px}
.logo {
    display: inline-block;
}
.txtHistory {
    overflow-y: scroll;
    text-align: left;
    float: left;
    display: inline-block;
    width: calc(100% - 200px);
    /*height: calc(100% - 140px);*/
    height: 100%;
    padding: 20px;
}
.footer {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid lightgrey;
    overflow: hidden;
    resize: none;
    bottom: 0;
    /*position: static;*/
    width: 100%;
    height: 80px;
}
.input {
    background-color: #333333;
    color: white;
}
#txtMessage {
    width: calc(100% - 100px);
    height: 100%;
    resize: none;
}
#btnStartStop {
    width: 100px;
    height: 100%;
}
button {
    background-color: #202020;
    color: white;
}
.side_ads {
    border-right: 1px solid lightgrey;
    width: 200px;
    min-height: 300px;
    max-height: 100%;
    /*border: 1px solid red;*/
    display: block;
    position: absolute;
    right: 0;
}
.top_ads {
    display: none;
}
.logo_full {display: block; height: 60px}
.logo_small {display: none;}
#btnSettings {float:right; padding-top: 15px}
#txtInterests {display: block; width: 100%; height: 20%}

@media all and (max-width: 600px) {
    /*.sidebar {position: absolute; float:none; top: 0px; right: 0px; width: 50%; height: 100%}*/
    .side_ads {display: none;}
    .txtHistory {width: 100%;}
    .top_ads {width: calc(100% - 70px - 30px - 2px); height: 60px; /*border: 1px solid red;*/ display: inline-block;}
    .logo_full {display: none;}
    .logo_small {display: block; height: 60px; width: 60px}
    h1 {margin: 0.1em 0}
}
/*
@media all and (min-width: 600px) {
.aside {flex: 1 auto;}
}
@media all and (min-width: 800px) {
.txtHistory {flex: 3 0px; order: 1}
.aside: {order: 2}
}
*/

.message_wrapper {
    display: inline-block;
    width: 100%;
}

.message_bubble {
    float: left;
    color: white;
    /*background-color: rgb(255,128,128);*/
    background-color: black;
    border-radius: 20px;
    padding: 10px;
}

.message_bubble.local {
    float: right;
    background-color: rgb(28,200,28);
    border-bottom-right-radius: 0;
}

.message_bubble.random {
    float: left;
    background-color: rgb(128,128,255);
    border-bottom-left-radius: 0;
}
.conversationDots{
    /*
        height: 15px;
        width: 40px;
    */
    width: 10%; /* 12.5 */
    margin: 1.25%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}
/* Lightboxes */
.lightbox{
    /*display: block;*/
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: grey;
    padding: 20px;
    padding-top: 0;
    overflow-y: scroll;
}
#consent{
    display: block;
}
#settings{
    display: none;
}