@charset "utf-8";

/* robot button */
#chat_con .bg_dimm {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);z-index: 10000;display: none;}

/* button */
.chat_wrap button {padding:10px 25px;background-color:#8d8c8c;color:#fff;font-weight:500;font-size:13px;text-align: left;}
.chat_wrap button:hover {outline: 2px dotted #333;}
.chat_wrap button.type_white {padding:9px 24px;border:1px solid #ddd;background-color:#fff;color:#1e1e1e;}
.chat_wrap button.type_white:hover,
.chat_wrap button.type_white:focus {outline: 2px dotted #fff;}
#chat_con .btn_area {display:flex;gap:10px;justify-content: center;margin-top:20px;}

@media only screen and (max-width: 768px){
    .chat_wrap button {font-size:12px;padding:8px 15px; text-align: left;}
}
/* 로딩바 추가 */
#chat_con .loading-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;z-index: 1000;}
#chat_con .loading-spinner {color: #fff;font-size: 24px;font-weight: bold;letter-spacing: 2px;animation: wave-animation 2s infinite;}

/* sound only */
#chat_con .screenOut {overflow: hidden; display: inline-block; border: 0; position: absolute; z-index: -1; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}


/* 툴팁 기본 스타일 설정 시작 */

#chat_con .tooltip {
  position: relative;
  display: block;
}

#chat_con .tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #8d8c8c;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 3px 0;

  position: relative;
  z-index: 1;
  
}

#chat_con .tooltip:hover .tooltiptext {
  visibility: visible;
}

#chat_con .tooltip:hover .bull_tail {
  visibility: visible;
}

/* 툴팁 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 화살표 기본 스타일 설정 시작 */

#chat_con .tooltip .bull_tail {
  visibility: hidden; 
  position: absolute;
  left:10px;
  top:21px;
  border-style: solid;
  border-width: 5px;
  margin-left: -5px;
  border-color: transparent transparent #8d8c8c transparent;
}

/* 툴팁 화살표 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 방향 설정 시작 */

#chat_con .tooltip .tooltip-bottom {
  width: 88px;
  top: 150%;
  left: 50%;
  margin-left: -44px;
  font-size:12px;
  display:block;
}

#chat_con .evalution_area button:last-child .tooltip-bottom {
  margin-left: -70px;
}

#chat_con .tooltip .tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent #8d8c8c transparent;
}

/* 아래쪽 툴팁 시작 */

/* 툴팁 방향 설정 끝 */