/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
    background-color: #ff8d00;
    color: white;
    background: center/50% no-repeat url("{% static '/images/ankr_app_icon.png' %}"); 
    border-radius: 50%;
    position: fixed;
    box-shadow: 2px 2px 10px 5px #c8c8c8;
    bottom: 23px;
    right: 28px;
    /* width: 80px; */
    font-size: 25px;
  }
  
  /* The popup chat - hidden by default */
  .chat-popup {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    width: 400px;
    background-color: #ffffff;
    border-radius:10px;
    box-shadow: 2px 2px 10px 5px #c8c8c8;
    z-index: 9;
  }
  
  .closebutton {
      border:0px;
      background-color: hsla(0, 0%, 100%, 0);
      position:fixed;
      margin: 6px 310px;
      font-weight: 800;
      color:#ff8d00;
  }

  .chatroom .input input[type=submit] {
    border:0px;
    background-color: #e9995e;
    color: #ffffff;
    padding: 0px 10px;
    font-weight: 800;
}
  
.chatroom .input input[type=submit]:hover{background:#e9995e}

.chatroom #speech-input {
    border:0px;
    background-color: #e9995e;
    color: #ffffff;
    padding: 0px 10px;
    margin-top:2px;
    font-weight: 800;
}
  /* Add styles to the form container */
  .form-container {
    padding: 10px;
  }
  
  /* Set a style for the submit/send button */
  /* .form-container .btn {
    background-color: #04AA6D;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
  } */
  
  /* Add a red background color to the cancel button */
  /* .form-container .cancel {
    background-color: #d9534f;
    position:fixed;
    top:5px;
    right:10px;
  } */

.chatroom{
    width:100%;
    height:600px;
    color:#343d4e;
    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{
    color:#ff8d00;
    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(255, 213, 179, 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:#e9995e;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:10 5px;
    background-color:#e9995e;
    display:flex;
    flex-direction:row;
    align-items:center
}
 
.chatroom .input input[type=text]{
    margin-bottom: 0px; 
    margin-left:10px;
    background-color:hsla(0,0%,100%,.8);
    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:#e9995e;
    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 #speech-input{height:30px;width:30px;margin-left:5px;background:#e9995e;border:1px solid #fff;color:#fff;border-radius:3px;cursor:pointer;transition:all .3s ease}.chatroom #speech-input:hover{background:#e9995e}.chatroom .vertical-center{vertical-align:middle} */
/*# sourceMappingURL=/Chatroom.css.map */