.chatroom{
    width:100%;height:600px;color:#ecc57a;
    max-height:90vh;
    /*background-color:rgba(156, 25, 196, 0.9);*/
    background-image: url("mii-c.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    border-radius:3px;border-bottom-left-radius:0;border-bottom-right-radius:0;
    letter-spacing:normal;overflow:hidden;
    box-shadow:0 0 0 2px rgba(32, 10, 226, 0.8)
}
    
.chatroom,.chatroom *{
    box-sizing:border-box
}

.chatroom.closed{
    height:40px
}

.chatroom h3{
    background-color:#343d4e;
    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:rgba(22, 7, 224, 0.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;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:.8s;
    animation-iteration-count:infinite;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(2){animation-delay:.4s}
.chatroom .chats .chat.waiting span:nth-child(3){animation-delay:.8s}
.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:#343d4e;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:grey;border:2px solid grey}
.chatroom .input{height:40px;width:100%;margin:0;padding:0 5px;background-color:#343d4e;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:#343d4e;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:#343d4e;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=submit]:hover{background:hsla(0,0%,100%,.8)}
.chatroom #speech-input{height:30px;width:30px;margin-left:5px;background:#343d4e;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}
/*# sourceMappingURL=/Chatroom.css.map */