.chatBox{width: 100%; border: #599392 1px solid; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;}

.chatBox .header{width: 100%; display: flex; height: 60px; background-color: #f9fbff; align-items: center;}
.chatBox .header .title{width: 100%; box-sizing: border-box; color: #333333; font-size: 1.2rem; text-align: left; padding: 0 10px; display: flex; align-items: center;}

.chatBox .header .title input{width: 100%;  box-sizing: border-box; color: #333333; font-size: 1.2rem; text-align: left; padding: 0 10px; background: none; border: none;}
.chatBox .header .title .save{}
.chatBox .header .icons {font-size: 1.2rem; padding: 0 10px;}


.chatBox .messageTags{width: 100%; display: flex;  background-color: #f9fbff; flex-direction: column-reverse; padding-bottom: 5px;}
.chatBox .messageTags section{background-color:  #f9fbff;}
.chatBox .messageTags section.chatTags{padding: 0}
.chatBox .messageTags section.chatTags .formInput{padding: 0; align-items: flex-end;}
.chatBox .messageTags section.chatTags .formInput input{background-color: initial;}
.chatBox .messageTags span{display: inline-block; padding: 3px 5px; margin: 0 3px; border-radius: 6px; background-color: var(--accent); font-size: 0.9em;}

.chatBox .messageBody{width: 100%; display: flex; height: 400px; background-color: #e6f4f6; flex-direction: column-reverse; flex-wrap: nowrap; overflow-y: scroll;}
.chatBox .messageBody > div:not(.printSpacer){width: 100%; background-color: #e6f4f6; font-size: 0.9rem; box-sizing: border-box; padding: 20px; }
.chatBox .messageBody .inMsg{text-align: left;}
.chatBox .messageBody .outMsg{text-align: right;}
.chatBox .messageBody > div > div{ padding: 10px; display: inline-block; border-radius: 10px; width: calc(100% - 150px); color: #ffffff;}

.chatBox .messageBody > div.inMsg > div{ background-color: #a9b5b4;}
.chatBox .messageBody > div.outMsg > div{ background-color: #79c7c5; }

.chatBox .messageBody > div > div .subTitle{font-size: 0.8rem; font-weight: 600; color: #444444;}
.chatBox .messageBody > div > div .subTitle.dual{display: flex;}
.chatBox .messageBody > div > div .subTitle.dual div{padding: 0 5px;}
.chatBox .messageBody > div > div .subTitle.dual.inMsg{justify-content: flex-end;}
.chatBox .messageBody > div > div .msg{text-align: left;}

.chatBox .footer{width: 100%; display: flex; background-color: #ffffff; height: 80px; padding: 10px; box-sizing: border-box;}
.chatBox .footer form{width: calc(100% - 80px);}
.chatBox .footer form textarea{outline: none; width: 100%; height: 60px; border: none; background-color: #ffffff; box-sizing: border-box; resize: none;}
.chatBox .footer .controls{width: 100px;box-sizing: border-box; display: flex; font-size: 20px; justify-content: space-evenly;align-items: center;}

/*hide the print spacer if on main*/
.main .printSpacer{width: 100%; height: 0 !important;}

@media (max-width: 	768px){
	.chatBox .messageBody > div > div{width: 100%; box-sizing: border-box;}
}