main.css

body{
    background-color: white;
    color: black;;
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
}

ul .fas{
    color: white;
    font-size: 25px;
    opacity: .5;
    padding: 30px 0px 0px 0px;
    display: flex;
    justify-content: center;
}

.fas:hover{
    opacity: .8;
    -webkit-transition: ease-in-out .1s;
    transition: ease-in-out .1s;
    text-decoration: none!important;
}

a:hover{
  text-decoration: none!important;
}

*{
    box-sizing: border-box;
}

#chatBox{
  margin-bottom: 80px;
}

#chatBox span{
  margin-left: 40px;
}

#chatBox p{
  background-color: #efefef;
  width: 43%;
  margin: 20px 40px 5px 40px;
  border-radius: 14px 14px 14px 0px;
  padding: 15px;
}

#chatBox p.me-box {
  background-color: #dfebff;
  margin-left: 51%;
  border-radius: 14px 14px 0px 14px;
}

#chatBox p.me-box + span {
  margin-left: 51%;
}

#chatInput{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #4caf50;
    display: -webkit-box;
    display: flex;
    height: 60px;
}
    
#chatInput input{
    width: 100%;
    padding-left: 5px;
    border: .5px #eaeaea solid;
}

#chatInput button{
    margin: 10px 15px;
}

#chat{
  position: absolute;
  width: 100%;
}

#chat p{
  margin-left: 20px;
}

/* bootstrap side bar */
.wrapper {
  display: flex;
  align-items: stretch;
}

#sidebar {
  background-color: #332D34;
  min-width: 90px;
  max-width: 90px;
  min-height: 100vh;
  padding: 10px;
  transition: .4s ease-in-out;
}

.sidebar-header h1{
  text-align: center;
}

#sidebar.active {
  margin-left: -90px;
}

@media (max-width: 768px) {
  #sidebar {
      margin-left: -90px;
  }
  #sidebar.active {
      margin-left: 0;
  }
}

.mt-4{
  margin: 0px 0px 20px 20px;
}

.btn-info {
  background-color: #306ed0!important;
  border-color: #2d65bd!important
}

#chatInput button{
  font-family: 'Open Sans', sans-serif!important;
  font-weight: 700;
  color: white;
  background-color: #4caf50;
  cursor: pointer;
}

#btn-send .fas{
  font-size: 20px;
}

#btn-send{
  border:0px!important;
}

.navbar{
  padding: 1rem!important;
  width: 100vw; /*this is a problem!!!*/
  background: #3771ce;
  position: fixed!important;
}

.fa-align-left:before{
  font-size: 20px;
}

span#date{
  color: #a5a5a5;
  padding-left: 20px;
}

h3{
  color: white;
  font-size: 16px!important;
  margin: 0 auto;
  margin-bottom: 0!important;
  padding: 10px;
  font-weight: 600!important;
  text-transform: uppercase;
}

h1.mt-4{
  margin-top: 5.5rem!important;
}

#content{
  width: 100vw;
}

.fa-angle-left{
  font-size: 25px;
  color:white;
}

.top-container{
  display: flex;
  align-items: center;
}