.messages-container-container {
  background-color: $card-background;
  width: 100%;
  height: 100vh;
  position: relative;
  margin-left: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  .chat {
    position: absolute;
    bottom: 100px;
    width: 90%;
  }
}

#messages-container {
  overflow: scroll;
  overflow-x: hidden;
  height: 81%;
  padding: 38px;
  width: 90%;
  border-radius: 15px;
  background-color: $light-gray;
}

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em;
}

#language-1 {
    border-radius: 0;
}

.avatar-sm {
  width: 35px;
  height: 35px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5)
}

.messageDiv {
  display: flex;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;

  p {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 8px;
    padding-right: 8px;
    background-color: #f9bab3;
    color: $navbar-background;
    border-radius: 10px;
  }

  &.right {
    flex-direction: row-reverse;
    p {
      background-color: $primary;
      color: white !important;
    }
  }

}

.margin-left {
  margin-left: 10px;
}

.text-center {
  text-align: center;
}

.hover-notice {
  display: flex;
  justify-content: center;
}

.input-transparent {
  background-color: transparent;
  border: none;
  box-shadow: none;
  &:focus {
    box-shadow: none;
  }
}

.send-button {
  background: none;
  border: none;
  box-shadow: none;
  color: gray;
  &:focus {
    box-shadow: none;
  }
}

.chat-information {
  display:flex;
  justify-content: space-between;
  align-items: center;
}

.input-group{
  width: 100%;
}

.form-inline{
    width: 100%;
}

.guyisbadass{
    width: 85%;
}
#chat-input {

}