body, html { height: 100vh; }

.showKeyboardStyle { height: calc( 100vh / 2 ) !important; max-height: calc( 100vh / 2 ) !important; }
.showKeyboardStyle > .chatBox { height: calc( 100vh / 2 ) !important; max-height: calc( 100vh / 2 ) !important; }

.chatDetailMain { width: 100%; height: auto; min-height: 100px; position: relative; border-radius: 20px; overflow: hidden; }
.chatDetailDialog { min-height: 50px; background-color: #ffffff; }
.chatDetailWrite { position: relative; background-color: #DDDDDD; padding: 10px; box-sizing: border-box; }
.chatDetailWrite > textarea { width: 100%; border-radius: 20px; height: auto; height: 40px; min-height: 40px; max-height: 100px; padding: 10px 120px 10px 10px; font-family: Arial; resize: none; border: 1px solid #CCCCCC; font-size: 14px; overflow: hidden; }
.chatDetailWrite > ul { position: absolute; right: 16px; border: 0; top: calc( 50% + 1px ); transform: translateY(-50%); padding: 0; margin: 0; list-style: none; display: table; }
.chatDetailWrite > ul > li { padding: 0; margin: 0; display: table-cell; vertical-align: middle; }
.chatDetailWrite > ul > li > button {  height: 22px; width: max-content; background: transparent; border: 0; }
.chatDetailWrite > ul > li > button > img { height: 22px; width: 22px; }
.chatDetailWrite > ul > li > button:disabled > img { opacity: 0.5; }

.button_scrollBottom { position: fixed; right: 10px; bottom: 90px; display: none; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border: 0; border-radius: 20px; }
.button_scrollBottom > span.badge { position: absolute; top: -3px; right: -3px; display: none; background-color: #ff0000; color: #ffffff; padding: 2px; height: 16px; width: max-content; min-width: 16px; border-radius: 10px; }

.dot-typing { background-color: #333333 !important; }

/* HTML: <div class="loader"></div> */
.typing-indicator-v2 {
  width: 40px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#666 90%,#6660);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 2s infinite linear;
  margin: 6px 10px;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}

.shimmer-animate {
  animation: shimmer 3s;
  animation-iteration-count: infinite;
  background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
  background-size: 1000px 100%;
  min-width: 100px;
  min-height: 6px;
  border-radius: 10px;
  display: inherit;
}

@keyframes shimmer {
  from { background-position: -1000px 0; }
  to { background-position: 1000px 0;  }
}


.frameNavigation { background-color: rgba( 255, 255, 255, 0.5 ); border-radius: 20px; height: 40px; padding: 0; margin: 0 0 10px 0; width: max-content; }
.frameNavigation > ul { list-style: none; margin: 6px 0; padding: 4px; }
.frameNavigation > ul > li { display: inline-block; margin: 0 4px; padding: 0; }
.frameNavigation > ul > li  button { width: 32px; height: 32px; border-radius: 16px; background-color: #EEEEEE; border: 0; padding: 4px; }
.frameNavigation > ul > li  button > img { width: 32px !important; height: 32px !important; }
.frameNavigation > ul > li  button.disabled { opacity: 0.5; pointer-events: none; }

.claimData { list-style: none; margin: 0 auto; padding: 0; width: 100%; vertical-align: central; box-sizing: border-box; }
.claimData > li { margin: 10px; padding: 10px; border-radius: 10px; cursor: pointer; width: 100%; display: table; box-sizing: border-box; }
.claimData > li.header { font-weight: bold; margin: 20px 0 10px 0; background-color: #EEEEEE; cursor: pointer; }
.claimData > li.row:hover { backdrop-filter: invert(50%); background-color: transparent !important; }

.claimData > li.showMore { text-align: center; }
.claimData > li.showMore > button { padding: 10px; width: max-content; border: 0; background-color: #EEEEEE; color: #111111; font-weight: bold; }
.claimData > li.showMore > button:hover { background-color: #DDDDDD; }

.claimData > li .main { display: inline; }
.claimData > li .main > .image { display: inline-block; margin-right: 8px; vertical-align: middle; }
.claimData > li .main > .image > img { max-width: 50px; max-height: 50px; }
.claimData > li .main > .content { display: inline-block; vertical-align: middle; width: calc( 100% - 60px ); }
.claimData > li.rowHidden { display: none; }

.chatDetailMain > .webSocketMessageArea { position: absolute; display: none; transition: all 1000ms ease-out; left: 4px; top: 4px; right: 4px; backdrop-filter: blur(4px); padding: 10px; border-radius: 16px; border-inline: 1px solid rgba( 255, 255, 255, 0.5); z-index: 1; }
.chatDetailMain > .webSocketMessageArea > div { margin: 4px 0; }
.chatDetailMain > .webSocketMessageArea .button_reconnect { width: max-content; padding: 10px; margin: 0; border: 0; background-color: #CCCCCC; }
.chatDetailMain > .webSocketMessageArea .button_reconnect:hover { background-color: #AAAAAA; }

.chatDetailDialog { display: flex; flex-direction: column-reverse; background-image: url("/images/bg_chat.png"); }
.chatDetailDialog_org > .chatBox { margin: 2px 0; max-height: calc( 100vh - 200px ); overflow-y: auto; scrollbar-color: #777 rgba(0,0,0,0); }
.chatDetailDialog > .chatBox { margin: 2px 0;  overflow-y: auto; scrollbar-color: #777 rgba(0,0,0,0); }
.chatDetailDialog > .chatBox > ul { list-style: none; padding: 0; margin: 0; min-height: inherit; }
.chatDetailDialog > .chatBox > ul > li { padding: 0; margin: 0; clear:both; }
.chatDetailDialog > .chatBox > ul > li div.receive { background-color: #ffffff; float: left; border-radius: 14px 14px 14px 0; padding: 14px; margin: 4px 44px 4px 14px; position: relative; border: 1px solid #DDDDDD; }
.chatDetailDialog > .chatBox > ul > li div.send { background-color: #e7fdcc; float: right; border-radius: 14px 14px 0 14px; padding: 14px; margin: 4px 14px 4px 44px; position: relative; border: 1px solid #DDDDDD; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble { white-space: pre-wrap; padding: 6px 10px; box-sizing: border-box; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble > div.openTran {  }
.chatDetailDialog > .chatBox > ul > li div.messageBubble > span { padding: 10px 0; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble > div.openTran > iframe { width: max-content; height: 240px; border: 0; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble > div.openTran > a { margin: 10px 0; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble > div.openTran > a:hover { text-decoration: underline; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble > div.openTran > a > img { width: 16px; height: 16px; vertical-align: middle; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble > div.messageRef { width: 100%; background-color: #EEEEEE; padding: 6px 8px; box-sizing: border-box; border-left: 4px solid #BBBBBB; margin-bottom: 6px; border-radius: 8px; }

.chatDetailDialog > .chatBox > ul > li div.messageBubble > div.senderName { font-weight: bold; font-size: 1.1em; padding: 10px 0; }

.chatDetailDialog > .chatBox > ul > li div.messageBubble .progress { position: relative; height: 4px; min-width: 200px; border-radius: 10px; overflow: hidden; margin: 4px 0 10px 0; display: none; color: #111111; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble .progress .progressBar { width: 50%; background-color: #BBBBBB; height: 20px; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble .progress .progressBar { -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }
.chatDetailDialog > .chatBox > ul > li div.messageBubble .progress .progressMessage { position: absolute; display: none; top: 0; left: 50%; transform: translateX(-50%); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.chatDetailDialog > .chatBox > ul > li.loadMessages { text-align: center; cursor: pointer; }
.chatDetailDialog > .chatBox > ul > li.loadMessages > span { display: inline-flex; align-items: center; padding: 6px 10px; background-color: #EDEDED; border-radius: 20px; }
.chatDetailDialog > .chatBox > ul > li.loadMessages > span > img { width: 24px; height: 24px; margin-right: 6px; }

.chatDetailDialog > .chatBox div.messageBubble > div.mediaPreview { padding: 10px 6px; }
.chatDetailDialog > .chatBox div.messageBubble > div.mediaPreview > img { max-width: 30vw; }
.chatDetailDialog > .chatBox div.messageBubble > div.mediaPreview > video { max-width: 30vw; }
.chatDetailDialog > .chatBox div.messageBubble > div.mediaPreview > audio { width: 100%; min-width: 30vw; height: 24px; border-radius: 10px; background-color: var(--background-gray); }

.chatDetailArea > .chatBox .progress { position: relative; height: 20px; border-radius: 10px; overflow: hidden; margin: 4px 0 10px 0; display: none; color: #111111; }
.chatDetailArea > .chatBox .progress .progressBar { width: 50%; background-color: #BBBBBB; height: 20px; }
.chatDetailArea > .chatBox .progress .progressBar { -webkit-transition: width 1s ease-in-out; -moz-transition: width 1s ease-in-out; -o-transition: width 1s ease-in-out; transition: width 1s ease-in-out; }
.chatDetailArea > .chatBox .progress .progressMessage { position: absolute; top: 0; left: 50%; transform: translateX(-50%); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.chatDetailDialog > .chatBox div.dateTime { text-align: right; font-size: 11px; padding: 2px 0; color: #555; font-style: italic; }
.chatDetailDialog > .chatBox div.dateTime { display: table; }
.chatDetailDialog > .chatBox div.dateTime > span { display: table-cell; vertical-align: middle; }
.chatDetailDialog > .chatBox div.dateTime > span.state > img { height: 11px; width: auto; padding-left: 6px;  }

.chatDetailDialog > .uploadProgressBarArea { position: absolute; background-color: rgba( 255, 255, 255, 0.8 ); left: 10px; top: 10px; right: 10px; height: 30px; z-index: 2; display: none; border-radius: 20px; overflow: hidden; }
.chatDetailDialog > .uploadProgressBarArea > .progressBar { background-color: rgba( 0, 0, 0, 0.6  ); color: #ffffff; width: 0%; height: 30px; line-height: 30px; text-align: center; border-radius: 20px; }

.chatDetailDialog > .uploadMessage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba( 255, 255, 255, 0.7); display: none; z-index: 2; text-align: center; vertical-align: middle;  }
.chatDetailDialog > .uploadMessage > div { margin: 20px; border: 4px dashed #AAAAAA; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 20px; }
.chatDetailDialog > .uploadMessage > div > span { position: absolute; top: 50%; left: 50%; color: #888888; transform: translate( -50%, -50%); font-size: 22px; }

.chatDetailDialog > .uploadPreview { display: none; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba( 0, 0, 0, 0.8); }
.chatDetailDialog > .uploadPreview > div.content { position: absolute; z-index: 1; top: 10px; bottom: 60px; left: 50%; transform: translateX(-50%); }
.chatDetailDialog > .uploadPreview > div.content img { height: 100%; width: auto; margin: 0 auto; max-width: 50vw; max-height: 55vh; }
.chatDetailDialog > .uploadPreview > div.content video { height: 100%; width: auto; margin: 0 auto; max-width: 50vw; max-height: 55vh; }
.chatDetailDialog > .uploadPreview > .uploadPreviewCloseArea { position: absolute; width: 24px; height: 24px; margin-left: calc( 100% - 50px ); margin-top: 10px; z-index: 3; }
.chatDetailDialog > .uploadPreview audio { position: absolute; top: 50%; left: 0; width: 100%; }
.chatDetailDialog > .uploadPreview > .uploadPreviewSend { z-index: 2; padding: 0; background-color: #DDDDDD; position: absolute; left: 0; bottom: 0; right: 0; }
.chatDetailDialog > .uploadPreview > .uploadPreviewSend > ul { padding: 10px; margin: 0; list-style: none; display: table; }
.chatDetailDialog > .uploadPreview > .uploadPreviewSend > ul > li { padding: 0; margin: 0; display: table-cell; vertical-align: middle; }
.chatDetailDialog > .uploadPreview > .uploadPreviewSend > ul > li.button { width: max-content; min-width: 40px; }
.chatDetailDialog > .uploadPreview > .uploadPreviewSend > ul > li.input { width: 100%; height: 40px; border: 0; }
.chatDetailDialog > .uploadPreview > .uploadPreviewSend button { width: auto; height: 24px; background: transparent; border: 0; }
.chatDetailDialog > .uploadPreview > .uploadPreviewSend button:disabled { opacity: 0.5; }

.uploadMenu { position: absolute; right: 6px; bottom: 60px; background-color: #EFEFEF; border-radius: 10px; padding: 6px; display: none; box-shadow: 2px 2px 10px #555; z-index: 1; }
.uploadMenu > ul { list-style: none; padding: 0; margin: 0; }
.uploadMenu > ul > li { padding: 0; margin: 4px; }
.uploadMenu > ul > li > button { height: 32px; width: 100%; padding: 4px; border-radius: 6px; }
.uploadMenu > ul > li > button:hover { background-color: #BBBBBB;  }
.uploadMenu > ul > li > button > span { height: 24px; vertical-align: middle; display: table-cell; }
.uploadMenu > ul > li > button > span.text { padding-left: 4px; }
.uploadMenu > ul > li > button > span.image > img { height: 24px; width: 24px; }

.chatDetailSendMessageText:disabled { opacity: 0.5; }

.voiceRecordArea { display: none; }
.voiceRecordArea > ul { display: table; list-style: none; padding: 0; margin: 0; }
.voiceRecordArea > ul > li { display: table-cell; padding: 0; margin: 0 6px; vertical-align: middle; }
.voiceRecordArea > ul > li button { height: 24px; width: max-content; background: transparent; border: 0; }
.voiceRecordArea > ul > li audio { height: 24px; }
.recordedVoicePlayer { height: 24px; border-radius: 10px; background-color: #DDDDDD; }
.startRecord { display: none; }

.speechRecognizeStatus {  display: table; visibility: hidden; }
.speechRecognizeStatus > .statusText { display: table-cell; vertical-align: middle; padding: 0 6px 0 0; }
.speechRecognizeStatus > img { width: auto; height: 24px; border-radius: 6px; overflow: hidden; display: table-cell; }

.previewHtml { width: 100%; margin: 10px 0; padding: 10px; border: 0; background-color: #DDDDDD; }
.spinAnimate { -webkit-animation:spin 2s linear infinite; -moz-animation:spin 2s linear infinite; animation:spin 2s linear infinite; }

.buttonHidden { display: none !important; }

.textToSpeechActive { position: absolute; top: 20px; right: 20px; background-color: #EDEDED; border-radius: 20px; padding: 6px 16px; display: table; display: none; z-index: 2; box-shadow: 0 4px 8px #555; }
.textToSpeechActive > .icon { width: 30px; height: 30px; display: table-cell; }
.textToSpeechActive > .icon_stop { margin-left: 10px; }

.breathEffect {
    -webkit-animation: breathAnimation 2s infinite;
   -moz-animation: breathAnimation 2s infinite;
   -o-animation: breathAnimation 2s infinite;
    animation: breathAnimation 2s infinite;
}
@keyframes breathAnimation { 0% { opacity:1; } 50%  { opacity:0.3; } 100% { opacity:1; } }
@-o-keyframes breathAnimation{ 0% { opacity:1; } 50% { opacity:0.3; } 100% { opacity:1; } }
@-moz-keyframes breathAnimation{ 0% { opacity:1; } 50% { opacity:0.3; } 100% { opacity:1; } }
@-webkit-keyframes breathAnimation{ 0% { opacity:1; } 50% { opacity:0.3; } 100% { opacity:1; } }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel { background-color: transparent; color: #fff; }

.messageTypingProgress { width: 100px; height: 10px; padding: 10px; }
.messageTypingProgress > div { margin: 0 auto; }