@font-face {
  font-family: 'my stratos';
  src: url('./font/stratos-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'stratos-medium';
  src: url('./font/stratos-medium.woff2') format('woff2');
}

.smScrollbar{overflow-y: auto;}
.smScrollbar::-webkit-scrollbar {width: 8px;height: 8px;}
.smScrollbar::-webkit-scrollbar-thumb {border-radius: 10px;background: hsla(0, 0%, 60%, .4);}
.smScrollbar::-webkit-scrollbar-track {border-radius: 10px;background: hsla(0, 0%, 93.3%, .6);}
@-moz-document url-prefix(){
	.smScrollbar{
		scrollbar-width: thin;
		scrollbar-color: hsla(0, 0%, 60%, .4) hsla(0, 0%, 93.3%, .6);
	}
}

.d-flex{
  display: flex;
}
.flex-wrap{
  flex-wrap: wrap;
}
.align-items-center{
  align-items: center;
}
.flex-grow-1{
  flex-grow: 1;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.cursor-pointer{
  cursor: pointer;
}
.overflow-hidden{
  overflow: hidden;
}
.transition-1{
  transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
}

.q-ai-box{
  font-family: 'my stratos';
  position: fixed;
  bottom: 15px;
  right: 20px;
  z-index: 9000000;
  color: #ffffff;
  --ai-active-color:#220079;
  --ai-chat-width:450px;
  --ai-outpadding:24px;
  line-height: 1.5;
  font-size: 14px;
}
.q-ai-box *{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* button */
.q-aiBtn{
  background-color: #210079;
  clip-path: url(#chat-button-text-clip-path);
  width: 220px;
  height: 60px;
  cursor: pointer;
  overflow: hidden;
}
.q-aiBtn > .clipsvg{
  width: 0;
  height: 0;
  display: block;
}
.q-aiBtn .ai-button-text{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
}
.q-aiBtn .ai-button-text svg{
  width: 29px;
  height: auto;
}
.q-aiBtn .ai-button-text span{
  margin-left: 8px;
  font-weight: 500;
  font-size: 16px;
}

/* Chat with us */
.q-ai-chatBox,
.q-ai-getinfoBox{
  display: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 90px;
  right: 20px;
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border: 1px solid #E9ECEC;
}
.q-ai-chatBox .q-ai-chatContent,
.q-ai-getinfoBox .q-ai-getinfo-content{
  display: flex;
  flex-direction: column;
  width: var(--ai-chat-width);
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 90px - 15px);
  padding-bottom: var(--ai-outpadding);
}
.q-ai-getinfoBox .q-ai-getinfoBox-top{
  background-color: var(--ai-active-color);
  flex-shrink: 0;
  padding: var(--ai-outpadding);
  margin-bottom: var(--ai-outpadding);
}
.q-ai-getinfoBox .q-ai-getinfoBox-top .q-ai-getinfoBox-toptitle{
  font-size: 24px;
  margin-right: auto;
  line-height: 1.1;
  font-weight: 500;
}
.q-ai-getinfoBox .q-ai-getinfoBox-top .q-ai-getinfoBox-topintro{
  margin-top: 15px;
}

.q-ai-close{
  margin-left: 10px;
  width: 30px;
  height: 30px;
  background: url('./img/icon-close.svg') no-repeat center center/contain;
}
.q-ai-close:hover{
  opacity: 0.85;
}

.q-ai-getinfoBox .q-ai-contentBox{
  padding: 0 var(--ai-outpadding);
}
.q-ai-getinfoBox .wpforms-container{
  margin: 0!important;
}
.q-ai-getinfoBox .wpforms-container .wpforms-submit::after{
  display: none;
}
.q-ai-getinfoBox .wpforms-container .wpforms-field{
  padding-top: 0!important;
}
.q-ai-getinfoBox .wpforms-container .wpforms-error{
  font-size: 14px!important;
  margin-top: 2px!important;
}
.q-ai-inpBox{
  margin-bottom: 16px;
}
.q-ai-inpBox:last-child{
  margin-top: 24px;
}
.q-ai-inpBox .q-ai-label-title{
  color: #404040;
  line-height: 1.2;
}
.q-ai-inpBox input::placeholder{
  color: #707070;
}
.q-ai-inpBox input:-webkit-autofill,
.q-ai-inpBox input:-webkit-autofill:hover,
.q-ai-inpBox input:-webkit-autofill:focus,
.q-ai-inpBox input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0px 50px #ffffff inset !important;
}
.q-ai-inpBox input{
  color: #1b1b1b;
  display: block;
  width: 100%;
  border: 1px solid #ABACAD;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  height: 38px;
  padding-left: 8px;
  padding-right: 34px;
}
.q-ai-inpBox input:focus{
  border-color: #1A1A1A;
}
.q-ai-inpBox label{
  position: relative;
  display: block;
}
.q-ai-inpBox label .q-ai-clear{
  position: absolute;
  width: 20px;
  height: 30px;
  background: url('./img/icon-clear.svg') no-repeat center center;
  cursor: pointer;
  right: 6px;
  top: 4px;
  z-index: 2px;
  display: none;
}
.q-ai-inpBox .q-ai-tip{
  color: #d63637;
  font-size: 12px;
  line-height: 1.1;
}
.q-ai-inpBox > button{
  display: block;
  width: 100%;
  outline: none;
  border: none;
  background-color: #ED000C;
  line-height: 42px;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  color: #ffffff;
  font-family: 'my stratos';
}
.q-ai-inpBox > button:hover{
  opacity: 0.85;
}
.q-ai-inpBox > button[disabled]{
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}


.q-ai-chatBox .q-ai-chatContent{
  padding-bottom: 0;
}
.q-ai-chatBox .q-ai-chatContent-top{
  padding: 10px var(--ai-outpadding);
  background-color: var(--ai-active-color);
}
.q-ai-chatBox .q-ai-toplogo{
  margin-right: 14px;
  width: 52px;
  height: 52px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background: #ED000C url('./img/icon-q.svg') no-repeat center center/50px auto;
  position: relative;
}
.q-ai-chatBox .q-ai-toplogo::after{
  content: '';
  position: absolute;
  bottom: -2px;
  right: 3px;
  width: 12px;
  height: 12px;
  border: 1px solid #ffffff;
  background-color: #38E270;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  z-index: 2;
}
.q-ai-chatBox .q-ai-topinfo{
  margin-right: auto;
  line-height: 1.2;
}
.q-ai-chatBox .q-ai-topinfo h4{
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 4px;
}
.q-ai-chatBox .q-ai-chatContent-center{
  padding: 0 var(--ai-outpadding);
  height: 80vh;
  max-height: calc(100vh - 90px - 15px - 72px - 70px);
}
.q-ai-chatBox .q-ai-chatContent-center .q-ai-logo-tip{
  text-align: center;
  padding: 8px 0 16px 0;
}
.q-ai-chatBox .q-ai-chatContent-center .q-ai-logo-tip span{
  background-color: #C7CACD;
  display: inline-block;
  line-height: 1.2;
  padding: 4px 10px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  font-size: 12px;
}
.q-ai-chatBox .q-ai-chatContent-center .q-ai-qaaitem{
  width: 100%;
  margin-bottom: 16px;
}
.q-ai-chatBox .q-ai-chatContent-center .q-ai-qaaitem::after{
  content: '';
  height: 0;
  clear: both;
  display: block;
}
.q-ai-chatBox .q-ai-chatContent-center .q-ai-ask{
  float: right;
  border-radius: 8px 8px 2px 8px;
  background-color: rgba(34,0,121,0.1);
  max-width: calc(100% - var(--ai-outpadding));
  padding: 5px 10px;
  color: #14111F;
}
.q-ai-chatBox .q-ai-chatContent-center .q-ai-answer{
  float: left;
  border-radius: 8px 8px 8px 2px;
  background-color: #F0F3F3;
  max-width: calc(100% - var(--ai-outpadding));
  padding: 5px 10px;
  color: #14111F;
}
.q-ai-chatBox .q-ai-chatContent-center .q-ai-answer .q-ai-waiting{
  width: 25px;
}
.q-ai-chatBox .q-ai-chatContent-center .q-ai-answer .q-ai-waiting::before{
  content: '···';
  display: block;
  overflow: hidden;
  text-wrap: nowrap;
  letter-spacing: 5px;
  width: 0px;
  animation: myfirst 1.5s infinite;
  -webkit-animation: myfirst 1.5s infinite;
}
@keyframes myfirst{
  0%   { width: 0px;}
  25%  { width: 5px;}
  50%  { width: 12px;}
  100%  { width: 24px;}
}
@-webkit-keyframes myfirst {
  0%   { width: 0px;}
  25%  { width: 5px;}
  50%  { width: 12px;}
  100%  { width: 24px;}
}

.q-ai-chatBox .q-ai-chatContent-center .cherry{
  background-color: transparent;
  font-size: 14px;
  line-height: 1.5;
  font-family: 'my stratos';
  box-shadow: none;
  min-height: 20px;
}

.q-ai-chatBox .q-ai-chatContent-center .cherry li,
.q-ai-chatBox .q-ai-chatContent-center .cherry p{
  font-size: 14px;
  line-height: 1.5;
  font-family: 'my stratos';
}
.q-ai-chatBox .q-ai-chatContent-center .cherry p + *{
  margin-top: 0;
}

.q-ai-chatBox .q-ai-chatContent-center .cherry img{
  max-width: 100%;
}
.q-ai-chatBox .q-ai-chatContent-center .cherry.theme__light .cherry-previewer{
  background-color: transparent;
  color: #14111F;
  border: none;
  overflow: hidden;
}
.q-ai-chatBox .q-ai-chatContent-center .cherry.theme__light .cherry-previewer > *:last-child{
  margin-bottom: 0;
}

.cherry-markdown ul, .cherry-markdown ol,
.cherry-markdown p, .cherry-markdown pre, .cherry-markdown blockquote, .cherry-markdown table{
  margin-bottom: 10px;
}
.cherry-markdown b, .cherry-markdown strong{
  font-weight: 550;
  font-family: 'stratos-medium';
}
.cherry-markdown a{
  color: #ED000C;
}
.cherry-markdown a:hover{
  color: #ED000C;
  text-decoration: underline;
}
.cherry-markdown h1, .cherry-markdown h2, .cherry-markdown h3{
  margin-top: 20px;
  margin-bottom: 10px;
}

.q-ai-chatBox .q-ai-chatContent-bottom{
  border-top: 1px solid #E9ECEC;
  padding: 10px 0;
  position: relative;
}
.q-ai-chatBox .q-ai-chatContent-bottom .q-ai-textareaBox{
  padding: 11px 0px 11px 20px;
}
.q-ai-chatBox .q-ai-chatContent-bottom textarea{
  display: block;
  width: 100%;
  border: 0;
  outline: none;
  height: 22px;
  font-size: 15px;
  line-height: 22px;
  color: #1b1b1b;
  resize: none;
  scrollbar-width: none;
  overflow: auto;
  max-height: 150px;
  background-color: transparent;
  box-shadow: none;
  font-family: 'my stratos';
  font-weight: 400;
}
.q-ai-chatBox .q-ai-chatContent-bottom textarea::placeholder{
  color: #C7CACD!important;
}

.q-ai-chatBox .q-ai-chatContent-bottom > button:hover{
  opacity: 0.9;
}
.q-ai-chatBox .q-ai-chatContent-bottom > button{
  outline: none;
  background: transparent url('./img/icon-enter.svg') no-repeat center center/24px;
  border: none;
  box-shadow: none;
  height: 44px;
  width: 44px;
  margin-left: 10px;
  cursor: none;
  pointer-events: none;
}
.q-ai-chatBox .q-ai-chatContent-bottom > .q-ai-queryBtn-active{
  background-image: url('./img/icon-enter-active.svg');
  cursor: pointer;
  pointer-events: all;
}
.q-ai-chatBox .q-ai-chatContent-bottom > .q-ai-queryBtn-pause{
  background-image: url('./img/icon-pause.svg');
  cursor: pointer;
  pointer-events: all;
}

.q-ai-chatBox .q-ai-chatContent-bottom .q-ai-toBottom{
  display: none;
  position: absolute;
  z-index: 10;
  right: 15px;
  top: -34px;
  box-shadow: 0 0 18px 0 rgba(0,0,0,.13);
  width: 34px;
  height: 26px;
  background: #ffffff url('./img/doubleArrowDown.svg') no-repeat center center/ 14px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  cursor: pointer;
  border: 1px solid #ececec;
}

@media screen and (max-width: 768px){
  .q-aiBtn{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }
  .q-aiBtn .ai-button-text span{
    display: none;
  }
}

@media screen and (max-width: 576px){
  .q-ai-box{
    --ai-chat-width:100%;
    --ai-outpadding:16px;
  }
  .q-ai-getinfoBox .q-ai-getinfoBox-top .q-ai-getinfoBox-toptitle{
    font-size: 20px;
  }
  .q-ai-chatBox .q-ai-topinfo h4{
    font-size: 20px;
  }
}