.messages-list {
    display:flex;
    flex-direction:column;
}

.message {
    display: flex;
    margin-bottom: 1em;
    width:40%;
    border-radius:4px;
    white-space: pre-wrap;
}

.sent {
    background-color: #6c6ce2;
    color: #f6f6f6;
    align-self: flex-end;
}

.received {
    background-color: #79797e;
    color: #f6f6f6;
    align-self: flex-start;
}

.message-input {
    height:3em;
    flex: 1;
    border-radius: 0;
}

.card-header {
    font-size: 16px;
    padding: 1em;
}

.chat-container {
    overflow-y: hidden;
    height: 100%;
    display: flex;
}

.chat-container .card {
    background-color: #242427;
    display:flex;
    height:100%;
    width:40%;
}

.messages-box {
    height: 100%;
    flex:1;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #242427;
}

.message-form {
    bottom:0;
    display: flex;
    background-color: #242427;
    min-height:2em;
    max-height:12em;
    border: 1px solid #1c1c1f;
}

.message-form .input-group-append {
    width:3em;
}

.message-form .input-group {
    max-height:10em;
}

.message-form textarea {
    text-align: left;
    max-height:10em;
    font-size: 14px;
    background-color: #242427;
    color: #f6f6f6 !important;
    overflow-y: auto;
    outline: none;
    border: none;
    resize: none; /* Disable manual resize */
    overflow-y: auto; /* Auto scrollbar */
    width: 100%; /* Ensure full width */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

.message-form textarea:focus, .message-form textarea:active, .message-form .input-group {
    background-color: #242427;
    border:none;
    outline:none;
    box-shadow:none;
}

.send-message-button {
    border-radius:0;
    font-size:14px;
    border:none;
    position:absolute;
    height:3em;
    width:3em;
    bottom:0;
}

.message-text {
    display: flex;
    flex-direction: column;
}

.message-sender, .message-content {
    display:flex;
    padding:1em;
}

.typing-loader{
    margin: 0;
    width: 6px;
    height: 6px;
    -webkit-animation: line 1s linear infinite alternate;
   -moz-animation: line 1s linear infinite alternate;
   animation: line 1s linear infinite alternate;
}

@-webkit-keyframes line{
    0%{
       
        background-color: rgba(0,0,0, 1);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 
                    24px 0px 0px 0px rgba(0,0,0,0.2);
                    
      }
    25%{ 
            background-color: rgba(0,0,0, 0.4);
            box-shadow: 12px 0px 0px 0px rgba(0,0,0,2), 
                    24px 0px 0px 0px rgba(0,0,0,0.2);
                    
    }
    75%{ background-color: rgba(0,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 
                    24px 0px 0px 0px rgba(0,0,0,2);
                   
      }
}

@-moz-keyframes line{
    0%{
       
        background-color: rgba(0,0,0, 1);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 
                    24px 0px 0px 0px rgba(0,0,0,0.2);
                    
      }
    25%{ 
            background-color: rgba(0,0,0, 0.4);
            box-shadow: 12px 0px 0px 0px rgba(0,0,0,2), 
                    24px 0px 0px 0px rgba(0,0,0,0.2);
                    
    }
    75%{ background-color: rgba(0,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 
                    24px 0px 0px 0px rgba(0,0,0,2);
                   
      }
}

@keyframes line{
    0%{
       
        background-color: rgba(0,0,0, 1);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 
                    24px 0px 0px 0px rgba(0,0,0,0.2);
                    
      }
    25%{ 
            background-color: rgba(0,0,0, 0.4);
            box-shadow: 12px 0px 0px 0px rgba(0,0,0,2), 
                    24px 0px 0px 0px rgba(0,0,0,0.2);
                    
    }
    75%{ background-color: rgba(0,0,0, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(0,0,0,0.2), 
                    24px 0px 0px 0px rgba(0,0,0,2);
                   
      }
}

.typewriter span {
    color: #fff;
    font-family: sofia-pro, monospace;
    font-size: 12px;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    animation: 
      typing 3.5s steps(30, end),
      blink-caret .5s step-end infinite;
}
  
  /* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
  
  /* The typewriter cursor effect */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: f6f6f6 }
}