body {
    height: 100%;
    width:100%;
    font-family: Arial, Helvetica, sans-serif;
    background: white;
/*    background: linear-gradient(to right, #57c1eb 0%,#246fa8 100%);*/
    font-size: 18px;}

/* in chat-area we have 1 div element per row in strict grid.*/
.chat-area {
  display: grid;
  grid-template-columns: auto
}



.bot-chat-balloon {
    padding-top:10px;    
    padding-bottom:10px;
    padding-left:15px;    
    padding-right:15px;
    background: #EEE;
    border-radius: 15px;
    color: black;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: auto;
    margin-left: 8px;
    width:fit-content;
    max-width:80%;
    height:auto;
 }

.user-chat-balloon {

    padding-top:10px;    
    padding-bottom:10px;
    padding-left:15px;    
    padding-right:15px;
    background: #04C;
    border-radius: 15px;
    color: white;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: auto;
    width:fit-content;
    max-width:80%;
 }

.responsearea {
  display: grid;
  grid-template-columns: auto;
  
}

.choicebutton {
    padding-top:10px;    
    padding-bottom:10px;
    padding-left:15px;    
    padding-right:15px;
    float:left;
    position: inline-block;
    background: #04C;
    border-radius: 15px;
    color: white;
    width:fit-content;
}

.textarea {
	width: 100%;
}


.buttonarea {
	width: 100%;
}

/* used to auto scale text width */
.boxsizingBorder {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.textautosize {
	width:90%;
	border: 0px ;
	box-sizing: border-box;
}

#sendbutton {
	width:20px;	
	border: none;
	background: none;
}