.chat {
  @include box-shadow(7px, 12px, 20px, rgba(132, 151, 167, .41));
  @include border-radius(3px);
  overflow: hidden;
  margin-top: -12px;

  .toggle_chat {
    display: none;
  }

  .widget_title {
    @include gradient-horizontal(#52BE3B, #76C969);
    text-align: center;
    padding: 9px 0;

    h2 {
      color: #fff;
      font-size: 18px;
      font-family: 'Montserrat', sans-serif;
      font-weight: normal;

      span {
      }
    }
  }
}

.chat_messages {
  padding: 13px 5%;
  // overflow-y: scroll;
  height: 322px;
}

.chat_item {
  @include border-radius(10px);
  display: inline-block;
  width: 100%;
  margin-bottom: 25px;
  padding: 13px 12px 7px 12px;
  position: relative;

  &.chat_support,
  &.chat_translator {
    background-color: #E2F3F5;

    &:after {
      display: block;
      content: '';
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 9px 9px 0 9px;
      border-color: #e2f3f5 transparent transparent transparent;
      position: absolute;
      bottom: -9px;
      right: 17px;
    }

    .chat_info {
      text-align: right;

      span {
        color: #4F888E;
      }
    }
  }

  &.chat_user {
    @include border-radius(5px);
    background-color: #FBFFFF;
    border: #CAD6DE 1px solid;
    padding-top: 7px;
    padding-bottom: 11px;

    &:after, 
    &:before {
      top: 100%;
      left: 24px;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }

    &:after {
      border-color: rgba(251, 255, 255, 0);
      border-top-color: #FBFFFF;
      border-width: 9px;
      margin-left: -9px;
    }
    &:before {
      border-color: rgba(202, 214, 222, 0);
      border-top-color: #CAD6DE;
      border-width: 10px;
      margin-left: -10px;
    }

    .chat_info {
      margin-bottom: 7px;

      span {
        color: #546769;
      }
    }
  }

  .chat_info {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;

    span {
      color: #93999c;
      display: inline-block;
      font-size: 15px;
      font-weight: 700;
    }
  }

  .chat_message {
    float: left;

    p {
      color: #588588;
      font-size: 14px;
      font-style: italic;
      line-height: 15px;
      word-break: break-word;
    }
  }

  .chat_message_item {
    display: inline-block;
    width: 100%;
    position: relative;
  }

}

.chat_form {
  overflow: hidden;
  padding-bottom: 20px;

  textarea {
    @include border-radius(3px);
    @include box-shadow-inset(0, 1px, 5px, rgba(161, 161, 161, .5));
    border: none;
    background-color: #F5F5F5;
    width: 91%;
    display: block;
    margin: 25px auto 10px;
    height: 100px;
    resize: none;

    &:focus {
      border: none;
      @include box-shadow-inset(0, 1px, 5px, rgba(161, 161, 161, .5));
    }
  }

  i {
    color: #ADAFB4;
    display: block;
    font-size: 10px;
    font-weight: 500;
    padding: 0 4.5%;
  }

  .button {
    @include button-cabinet('medium', 'blue');
    cursor: pointer;
    width: 90%;
    margin: 28px auto 0;
  }
}

.sidebar {

  .widget {

    &.chat {

      .notes-container {

        .validation_error {
          display: block;
          width: 91%;
          margin: 0 auto;
        }
      }
    }
  }
}