@charset "utf-8";
/*말풍선*/
.chatmessage_content {
	width: 500px;
    height: 370px;
    background-color: #D0E3F9;
    overflow-y: scroll;
    overflow-x: hidden;
    float: left;
    
    scrollbar-3dLight-Color: #efefef; 
    scrollbar-arrow-color: #6e6e6e; 
    scrollbar-base-color: #efefef; 
    scrollbar-Face-Color: #5d5d5d; 
    scrollbar-Track-Color: #efefef; 
    scrollbar-DarkShadow-Color: #efefef; 
    scrollbar-Highlight-Color: #efefef; 
    scrollbar-Shadow-Color: #efefef
}
.chatmessage_content::-webkit-scrollbar {width: 10px; height: 8px; border: 3px solid #fff; }
.chatmessage_content::-webkit-scrollbar-button:start:decrement, .chatmessage_content::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url('./images/bg.png') #efefef}
.chatmessage_content::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
.chatmessage_content::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}
  
.clear {clear: both}
.chatmessage_content .time {
	position: absolute;
    top: -15px;
    right: 10px;
    font-size: 11px;
    letter-spacing: -1px;
    line-height: 12px;
}
.chatmessage_content .name {
	position: absolute;
    top: -15px;
    left: 5px;
    font-size: 11px;
    letter-spacing: -1px;
    line-height: 12px;
}
.chatbubble {
  position:relative;
  padding:10px;
  margin:2em 0 1em;
  color:#000;
  background:#f3961c; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
  background:-moz-linear-gradient(#f9d835, #f3961c);
  background:-o-linear-gradient(#f9d835, #f3961c);
  background:linear-gradient(#f9d835, #f3961c);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.chatbubble.left {
    max-width: 250px;
    min-width: 105px;
  margin-left:20px;
  background:#9CECFF;
  float: left;
  word-break: break-all;
}

.chatbubble.right {
    max-width: 250px;
    min-width: 105px;
  margin-right:20px;
  background:#F5F39D;
  float: right;
  word-break: break-all;
}

.chatbubble:after {
  content:"";
  position:absolute;
  bottom:-15px; /* value = - border-top-width - border-bottom-width */
  left:50px; /* controls horizontal position */
  border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
  border-style:solid;
  border-color:#f3961c transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}
.chatbubble.left:after {
    top: 16px;
    left: -20px;
    bottom: auto;
    border-width: 0px 20px 10px 0;
    border-color: transparent #9CECFF;
}

.chatbubble.right:after {
    top: 16px;
    right: -20px;
    bottom: auto;
    left: auto;
    border-width: 0px 0 10px 20px;
    border-color: transparent #F5F39D;
}