.chatroom{
    width:80%;
    height:500px;
    color:#5689f7;
    max-height:90vh;
    background-color:hsla(0,0%,78.4%,.9);
    border-radius:3px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    letter-spacing:normal;
    overflow:hidden;
    box-shadow:0 0 0 2px hsla(0,0%,100%,.8)
}
.chatroom,.chatroom *{
    box-sizing:border-box
}
.chatroom.closed{
    height:40px
}
.chatroom h3{
    background-color:#5689f7;
    color:#fff;
    margin:0;
    height:40px;
    font-weight:600;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer
}
.chatroom .chats{
    box-sizing:border-box;
    padding:20px;
    margin:0;
    height:calc(100% - 80px);
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch
}
.chatroom .chats .chat{
    background:hsla(0,0%,100%,.8);
    position:relative;
    padding:5px 13px;
    font-size:14px;
    border-radius:10px;
    list-style:none;
    float:left;
    clear:both;
    margin:10px 0 0;
    max-width:90%
}
.chatroom .chats .chat img{
    max-width:100%;
    vertical-align:middle
}
.chatroom .chats .chat.left{
    border-bottom-left-radius:0
}
.chatroom .chats .chat.right{
    float:right;
    clear:both;
    background-color: #5689f7;
    color: #ffffff;
    border-bottom-right-radius:0
}
.chatroom .chats .chat .text{
    word-wrap:break-word
}
.chatroom .chats .chat.chat-img{
    padding:5px
}
.chatroom .chats .chat a{
    text-decoration:none;
    color:#3498db
}
.chatroom .chats .chat ol,.chatroom .chats .chat ul{
    margin:0;
    padding-left:1.5em
}
.chatroom .chats .chat ol li,.chatroom .chats .chat ul li{
    padding-left:0
}
.chatroom .chats .chat.waiting{
    margin:10px 0;
    background:transparent;
    padding:0
}
@keyframes fade{
    0%{
        opacity:1
    }
    to{
        opacity:.3
    }
}
.chatroom .chats .chat.waiting span{
    font-size:1.5em;
    animation-name:fade;
    animation-duration:1ms;
    animation-iteration-count:10;
    animation-direction:alternate;
    animation-timing-function:ease-in-out
}
.chatroom .chats .chat.waiting span:first-child{
    animation-delay:0s;
}
.chatroom .chats .chat.waiting span:nth-child(1){
    animation-delay:1s;
}
.chatroom .chats .chat.waiting span:nth-child(2){
    animation-delay:2s;
}
.chatroom .chats .time{
    list-style:none;
    clear:both;
    height:10px;
    font-size:10px;
    color:#414141;
    margin:5px 0 20px
}
.chatroom .chats .time.left{
    float:left
}
.chatroom .chats .time.right{
    float:right
}
.chatroom .chats .chat-buttons{
    position:relative;
    padding:0;
    font-size:14px;
    list-style:none;
    clear:both;
    margin:10px 0;
    text-align:center
}
.chatroom .chats .chat-buttons .chat-button{
    display:inline-block;
    transition:all .3s ease;
    cursor:pointer;
    margin:3px;
    background-color:#337ab7;
    color:#fff;
    border:2px solid #fff;
    padding:5px 10px;
    letter-spacing:normal;
    border-radius:5px
}
.chatroom .chats .chat-buttons .chat-button.chat-button-selected,.chatroom .chats .chat-buttons .chat-button:hover{
    background-color:rgba(52,61,78,.6);
    color:#fff
}
.chatroom .chats .chat-buttons .chat-button.chat-button-disabled{
    color: darkgray;
    border: 2px solid grey;
    background-color: grey;
}
.chatroom .input{
    height:40px;
    width:100%;
    margin:0;
    padding:0 5px;
    background-color:#5689f7;
    display:flex;
    flex-direction:row;
    align-items:center
}
.chatroom .input input[type=text]{
    background-color:hsla(0,0%,100%,.8);
    outline:0;
    border:1px solid #fff;
    border-right:none;
    color:#000000;
    padding:0 5px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    height:30px;
    flex:4;
    box-sizing:border-box;
    font-size:14px;
    transition:background-color .2s ease
}
.chatroom .input input[type=text]:focus{
    box-shadow:none;
    background-color:#fff
}
.chatroom .input input[type=submit]{
    display:inline-block;
    background:#5689f7;
    border:1px solid #fff;
    color:#fff;
    height:30px;
    min-width:70px;
    line-height:1;
    text-align:center;
    padding:0;
    font-size:12px;
    flex:1;
    box-shadow:none;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
    cursor:pointer;
    transition:all .3s ease;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    outline:none;
    font-weight:600;
    text-transform:uppercase
}
.chatroom .input input[type=button]{
    display:inline-block;
    background:#5689f7;
    border:1px solid #fff;
    color:#fff;
    height:25px;
    min-width:70px;
    line-height:1;
    text-align:center;
    padding:0;
    font-size:10px;
    flex:1;
    box-shadow:none;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
    cursor:pointer;
    transition:all .3s ease;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    outline:none;
    font-weight:600;
    text-transform:uppercase
}
.chatroom .input input[type=submit]:hover{
    background:hsla(0,0%,100%,.8)
}
.chatroom .input input[type=button]:hover{
    background:hsla(0,0%,100%,.8)
}
.chatroom #speech-input{
    height:30px;
    width:30px;
    margin-left:5px;
    background:#5689f7;
    border:1px solid #fff;
    color:#fff;
    border-radius:3px;
    cursor:pointer;
    transition:all .3s ease
}
.chatroom #speech-input:hover{
    background:hsla(0,0%,100%,.8)
}
.chatroom .vertical-center{
    vertical-align:middle
}