body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.box-blue{
    background-color: #387ef5;
    color: #FFF;
    margin: 2%;
    position: relative;
    background: #387ef5;
    border: 4px solid #387ef5;
    padding: 2%;
    border-radius: 5px;
    text-align: left;
}
.box-blue:after, .box-blue:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;
}

.box-blue:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #387ef5;
    border-width: 11px;
    margin-top: -10px;
}

.box-gray {
    margin: 2%;
    position: relative;
    color: #FFF;
    /*font-weight: bold;*/
    background: #00bcd4;
    border: 4px solid #00bcd4;
    padding: 2%;
    border-radius: 5px;
    text-align: right;
}
.box-gray:after, .box-gray:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    position: absolute;
    pointer-events: none;
}

.box-gray:after {
    border-color: rgba(136, 183, 213, 0);
    border-right-color: #00bcd4;
    border-width: 11px;
    margin-top: -10px;
}

.msg-container{
  max-height:265px;
  overflow-y:scroll;
  background-color: transparent;
  
}

.msg-label{
    background-color: #387ef5;
    color: #FFF;
    z-index: 2;
}

.pointer{
    cursor: pointer;
}

/*
    File Input
*/
.file_input{
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.file_input + span {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}

.wrap-list-message{
	max-height: 470px;
  	overflow-y: scroll;
}