/*
	Patrick a test php AI bot
*/
body {
  margin: 0px auto;
  font-family: "Ubuntu", sans-serif !important; }

.c__centerbox {
  width: 100%;
  height: 700px;
  overflow: scroll;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .c__centerbox .inner__centerbox {
    width: 100%;
    height: 100%; }
    .c__centerbox .inner__centerbox .message__area {
      width: 100%;
      height: 100%;
      display: block; }

.bot__message {
  width: 100%;
  height: auto;
  display: table;
  float: left; }
  .bot__message .the__bot__avatar {
    background: black;
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 15px; }
  .bot__message .the__message {
    float: left; }
  .bot__message .bot__inner__message {
    padding: 0.3rem 1.25rem;
    display: table;
    width: 100%; }
    .bot__message .bot__inner__message .the__message {
      width: calc(100% - 85px); }
      .bot__message .bot__inner__message .the__message .inner__message {
        padding: 1.0rem 1.25rem;
        background: #ccc;
        color: white;
        border-radius: 200px;
        width: auto;
        display: table; }

.human__message {
  width: 100%;
  height: auto;
  display: table;
  float: left; }
  .human__message .the__human__avatar {
    background: black;
    width: 50px;
    height: 50px;
    float: right;
    margin-left: 15px; }
  .human__message .human__inner__message {
    padding: 0.3rem 1.25rem;
    display: table;
    width: 100%; }
    .human__message .human__inner__message .the__message {
      width: calc(100% - 85px);
      float: right; }
      .human__message .human__inner__message .the__message .inner__message {
        padding: 1.0rem 1.25rem;
        background: #007bff;
        color: white;
        border-radius: 200px;
        width: auto;
        display: table;
        float: right; }

#send__message {
  background: white;
  width: 100%;
  position: fixed;
  bottom: 0; }
  #send__message .form-control {
    border-radius: 0px !important;
    width: 90%;
    height: 50px;
    line-height: 50px;
    border: 0px solid white;
    float: left;
    padding: 1.0rem 1.25rem; }
    #send__message .form-control:focus {
      outline: none !important;
      box-shadow: none !important; }
  #send__message .btn.btn-primary {
    border-radius: 0px !important;
    width: 10%;
    height: 50px;
    line-height: 50px;
    padding: 0px !important; }
    #send__message .btn.btn-primary i {
      line-height: inherit !important;
      font-size: 20px; }
    #send__message .btn.btn-primary:focus {
      outline: none !important;
      box-shadow: none !important; }