@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');            

:root{
    --danger: #eb3b5a;
}

* {  box-sizing: border-box; font-family: 'Fira Code', monospace; }

html { scroll-behavior: smooth; }

body { font: 13px Helvetica, Arial; background-image: url('../img/bg/chat_bg.jpg'); }
/*form { background: #d9d9d9; padding: 12px; position: fixed; bottom: 0; width: 100%; }*/
form input { background: #f2f2f2; border: 0; padding: 10px 30px; width: 100%; height: 60px; border-radius: 50px; }
form button { width: 100%; background: #5352ed!important; border: none; padding: 10px; height: 60px; color: #f1f1f1!important; font-weight: 700!important; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 10px 18px; margin: 12px auto; }
/*#messages li:nth-child(odd) { background: #eee; }*/
.hide { display: none; }
.btn { cursor: pointer; }
.norm, .first{ width: 100%; }
.norm article b{ text-align: right; width: calc(100% - 20px); color:aqua; background-color:indigo; padding: 2px 6px; text-align: left;}
.first article b{ text-align: left;  width: calc(100% - 20px); color:#000; background-color:aquamarine; padding: 2px 6px; text-align: left;}

@media all and (max-width: 576px){
    .btn {margin-top: 15px;}    
}
@media all and (min-width: 577px){    
    #file label {
        text-align: center;
    }
}
.alert-danger{    
    color: #fff!important;
    font-weight: 400;
    letter-spacing: 0.1rem;
    background-color: var(--danger)!important;
    border-color: var(--danger)!important;
    font-size-adjust: inherit;
    font-size: 1.6rem;
    box-shadow: 0 4px 4px rgba(0,0,0,0.2);
}
.close{
    font-size: 2.4rem!important;
}

.area{     
    height: 100vh;
    display: flex;    
    flex-direction: column;    
    overflow-x: hidden;
    overflow-y: hidden;
}
#container-body{
    flex: 11.4;        
    max-width: 1600px;
    overflow: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */        
    margin-top: 20px;
    margin-bottom: 25px;    
}
#container-body .norm {
    text-align: end;    
    display: flex;    
    justify-content: flex-end;
    align-items: center;      
}
#container-body .first{      
    display: flex;    
    justify-content: flex-start;
    align-items: center;
}
#container-body .first article{
    background-color: #f1f1f1;
    padding: 30px 20px 25px 20px;    
    display: inline flow-root list-item;    
    border-radius: 5px;
    box-shadow: 2px 3px 10px #9f9f9f;
    position: relative;    
    min-width: 150px;
    max-width: 600px;
}
#container-body .norm article{
    background-color: #dcf8c6;
    padding: 30px 20px 25px 20px;    
    display: inline flow-root list-item;    
    border-radius: 5px;
    box-shadow: 2px 3px 10px #9f9f9f;    
    position: relative;    
    min-width: 150px;
    text-align: left;
    max-width: 600px;    
}
#container-body .first small, 
#container-body .norm small{
    position: absolute;    
    right: 10px;
    bottom: 5px;
}

#container-body .first b,
#container-body .norm b{
    position: absolute;
    left: 10px;
    top: 5px;    
}

#container-body::-webkit-scrollbar {
    display: none;
}
form { 
    background: #d9d9d9; 
    padding: 12px; 
    flex: .6;     
}

#file input[type='file'] {
    display: none
}
  
  /* Aparência que terá o seletor de arquivo */
#file label  {
    border: 0; 
    padding: 10px 10px; 
    width: 100%;  
    border-radius: 50px;    
    cursor: pointer;    
    
}
#file label i {
    font-size: 2rem;
    color: #4d4d4d
}

input[type="text"], 
input[type="text"]:hover, 
input[type="text"]:focus, 
input[type="text"]:focus-visible, 
input[type="text"]:focus-within, 
input[type="text"]:active, 
input[type="text"]:checked, 
input[type="text"]:any-link, 
input[type="text"]:link{
    text-decoration: none!important;           
    outline: 0;
    border: 0px solid transparent;
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 50px;    

}