$spacing: 20px;

$radius: 4px;

$font-size-default: 20px; $font-size-small: 0.65em;

$color-green: #91d98a; $color-blue: #8ac0d9;

@import url(fonts.googleapis.com/css?family=Source+Sans+Pro:300);

@mixin clearfix {

display: block;
overflow: hidden;
&:before {
  @include before;
}

}

@mixin prefix($property, $value) {

-webkit-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};

}

@mixin radius($rad: $radius) {

@include prefix(border-radius, #{$rad});

}

@mixin before {

content: " ";
display: block;

}

.padding {

padding: $spacing;

}

.clearfix {

@include clearfix;

}

.font-size-small {

font-size: $font-size-small;

}

denshobato-message-panel {

width: 75%;
display: block;
margin: 0 auto;

}

.top_menu {

background-color: white;
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 18px 40px 5px 40px;
border-radius: 10px 10px 0px 0px;
z-index: 999;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
.chat-header {
  display: block;
  span {
    display: block;
    text-align: center;
    font-size: 14px;
    font-style: italic;
  }
  p {
    color: cadetblue;
    display: inline-grid;
    text-align: center;
  }
}
.refresh-button {
  float: right;
  margin: -38px 0px 0px 0px;
  background: none;
  border: #a3d063 1px solid;
  border-radius: 15px;
  outline: none;
  &:hover {
    color: white;
    background: #a3d063;
    outline: none;
    border: none;
  }
}
.buttons {
  margin: 0px 0 0 10px;
  position: absolute;
  .button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    &.close-button {
      background-color: #f5886e;
      &:hover {
        cursor: pointer;
      }
    }
    &.minimize {
      background-color: #fdbf68;
    }
    &.maximize {
      background-color: #a3d063;
    }
  }
}

}

// - - - Chat

.chat-wrapper {

border: 1px solid rgba(0, 0, 0, 0.08);
height: 500px;
padding: 20px;
position: relative;
border-radius: 0px 0px 10px 10px;
display: block;
overflow-y: scroll;
font-family: "Source Sans Pro", sans-serif;
font-size: $font-size-default;
font-weight: 300;
.chat-content {
  background-color: white;
}
.chat-image {
  float: left;
  @include radius(50%);
  &.chat-image-default {
    width: $spacing * 3;
    height: $spacing * 3;
  }
}
.chat-message {
  margin-bottom: $spacing;
  width: 100%;
  padding: 15px;
  @include clearfix;
  &:last-of-type {
    margin-bottom: 0;
    position: relative;
  }
  .full-name-recipient {
    display: block;
    font-size: 12px;
    font-style: italic;
    color: grey;
    margin-top: 0px;
  }
  .full-name-sender {
    @extend .full-name-recipient;
    text-align: right;
    color: sienna;
  }
  .chat-message-wrapper {
    max-width: 70%;
    display: table;
    margin: 0 $spacing;
    padding-top: $spacing / 2;
    position: relative;
    &:before {
      @include before;
      width: 0;
      height: 0;
      border: 12px solid transparent;
      top: $spacing;
      position: absolute;
      z-index: 2;
    }
    p {
      padding: $spacing / 2 $spacing;
      color: white;
      padding: 10px 15px;
      font-size: 15px;
      border-top: 1px solid;
      &:first-of-type {
        border-top: 0 !important;
      }
    }
  }
  &.chat-message-recipient {
    .user-info {
      display: inline-block;
      float: left;
      width: 60px;
      height: auto;
      .message-author {
        font-size: small;
        display: block;
        text-align: center;
      }
    }
    .chat-message-wrapper,
    .chat-message-content {
      float: left;
    }
    .chat-message-wrapper {
      .message-time {
        font-size: xx-small;
        display: block;
      }
      &:before {
        left: -20px;
        top: 30px;
        border-right-color: $color-green;
      }
    }
    p {
      background-color: $color-green;
      border-top-color: $color-green - 20;
    }
  }
  &.chat-message-sender {
    .user-info {
      display: inline-block;
      float: right;
      width: 60px;
      height: auto;
      .message-author {
        font-size: small;
        display: block;
        text-align: center;
        margin: 0px 0px 0px 0px;
      }
    }
    .chat-message-wrapper,
    .chat-message-content {
      float: right;
    }
    .chat-message-wrapper {
      .message-time {
        font-size: xx-small;
        display: block;
        text-align: right;
      }
      &:before {
        right: -$spacing;
        top: 30px;
        border-left-color: $color-blue;
      }
    }
    p {
      background: $color-blue;
      border-top-color: $color-blue - 20;
    }
    img {
      float: right;
    }
  }
  .chat-message-content {
    @include clearfix;
    @include radius;
  }
  .chat-details {
    clear: both;
    width: 100%;
    @include clearfix;
    .chat-message-localization {
      color: #8a8a8a;
      margin: 0px 0px 0px 0px;
      display: block;
      font-size: 10px;
      border: 1px solid rgba(0, 0, 0, 0.23);
      padding: 2px 0px 2px 7px;
      border-radius: 37px;
      width: 51px;
      &:hover {
        background: #f1f1f1;
        color: black;
        border: 1px solid white;
      }
    }
  }
}

}

.chat-wrapper::-webkit-scrollbar {

width: 6px;

}

.chat-wrapper::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.58);

}

.bottom_wrapper {

position: fixed;
width: 60%;
background-color: white;
padding: 10px 10px 0px 10px;
z-index: 9;
bottom: 23px;
.message_input_wrapper {
  display: block;
  height: 38px;
  border-radius: 20px;
  border: 1px solid #bcbdc0;
  width: calc(100% - 160px);
  position: relative;
  padding: 0 20px;
  .message_input {
    border: none;
    height: 100%;
    box-sizing: border-box;
    width: calc(100% - 40px);
    position: absolute;
    outline-width: 0;
    color: gray;
  }
}
.send_message {
  width: 20%;
  display: block;
  border-radius: 50px;
  background-color: #a3d063;
  border: 2px solid #a3d063;
  color: white;
  cursor: pointer;
  transition: all 0.2s linear;
  text-align: center;
  float: right;
  &:hover {
    color: #a3d063;
    background-color: white;
  }
  .text {
    font-size: 18px;
    font-weight: 300;
    display: inline-block;
    line-height: 34px;
    border: none;
    background: none;
    outline: none;
  }
}

}

.chat-message-localization {

&:hover {
  cursor: pointer;
}

}

.loading {

font-size: 16px;
font-weight: bold;
margin: 100px auto;
position: relative;
text-align: center;
width: 100%;
max-width: 200px;
p {
  border-top: solid 1px #c5c5c5;
  color: #f93841;
  padding-top: 15px;
  width: 100%;
  animation-name: loading;
  -webkit-animation: loading 2s ease-out infinite;
  -moz-animation: loading 2s ease-out infinite;
  animation: loading 2s ease-out infinite;
  &:before {
    content: "";
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    display: inline-block;
    border-style: solid;
    border-width: 20px 20px 20px 20px;
    border-color: #b2060e transparent transparent transparent;
    position: absolute;
    top: -20px;
    left: -10px;
    animation-name: loading;
    -webkit-animation: loading 2s ease-out infinite;
    -moz-animation: loading 2s ease-out infinite;
    animation: loading 2s ease-out infinite;
  }
}

}

@-moz-keyframes loading {

0% {
  left: -15px;
}
50% {
  left: 185px;
  color: #c5c5c5;
}
100% {
  left: -15px;
}

}

@-webkit-keyframes loading {

0% {
  left: -15px;
}
50% {
  left: 185px;
  color: #c5c5c5;
}
100% {
  left: -15px;
}

}

@keyframes loading {

0% {
  left: -15px;
}
50% {
  left: 185px;
  color: #c5c5c5;
}
100% {
  left: -15px;
}

}

.load-messages {

border: 2px #a3d063 solid;
padding: 5px 20px 5px 20px;
font-size: 16px;
margin-bottom: 15px;
border-radius: 35px;
outline: none;
background-color: transparent;
&:hover {
  background-color: #a3d063;
  color: white;
}

}

.denshobato-send-message {

width: 70%;
position: fixed;
bottom: 0px;
outline: none;
margin-bottom: 30px;
z-index: 999;
input {
  width: 70%;
  border-radius: 20px;
  border: 1px solid #BBBBBB;
  padding: 5px 0px 5px 10px;
}

button {
  width: 15%;
  display: inline-block;
  padding: 5px;
  border-radius: 50px;
  background-color: #a3d063;
  border: 2px solid #a3d063;
  color: white;
  cursor: pointer;
  transition: all 0.2s linear;
  text-align: center;
  &:hover {
    color: #a3d063;
    background-color: white;
  }
}

}