@charset "UTF-8";
/* 
Fonts used:
- "Noto Sans TC" is licensed under the SIL Open Font License 1.1
- "Open Sans" is licensed under the Apache License, Version 2.0
Fonts are served via Google Fonts: https://fonts.google.com
*/
@import
	url("https://fonts.googleapis.com/css?family=Material+Icons");


#chatApp h1{font-size:6rem;line-height:6rem;letter-spacing:-0.01562em}
#chatApp h1,h2{font-weight:300}
#chatApp h2{font-size:3.75rem;line-height:3.75rem;letter-spacing:-0.00833em}
#chatApp h3{font-size:3rem;line-height:3.125rem;letter-spacing:normal}
#chatApp h3,h4{font-weight:400}
#chatApp h4{font-size:2.125rem;line-height:2.5rem;letter-spacing:0.00735em}
#chatApp h5{font-size:1.5rem;font-weight:400;letter-spacing:normal}
#chatApp h6{font-size:1.25rem;font-weight:500;letter-spacing:0.0125em}
#chatApp p{margin:0 0 16px}
	
#chatApp > :after, #chatApp > :before{
	    box-sizing:inherit;
	    -webkit-tap-highlight-color:transparent;
	    -moz-tap-highlight-color:transparent
	}
#chatApp #q-app{
	    width:100%;
	    direction:ltr
	}
#chatApp body.platform-ios.within-iframe,body.platform-ios.within-iframe #q-app{
	    width:100px;
	    min-width:100%
	}

#chatApp abbr[title]{
	    border-bottom:none;
	    text-decoration:underline;
	    -webkit-text-decoration:underline dotted;
	    text-decoration:underline dotted
	}
#chatApp img{
	    border-style:none
	}


#chatApp button,input,optgroup,select,textarea{
	    margin:0
	}
#chatApp optgroup{
	    font-weight:700
	}
#chatApp button,input,select{
	    overflow:visible;
	    text-transform:none
	}
#chatApp button::-moz-focus-inner,input::-moz-focus-inner{
	    border:0;
	    padding:0
	}
#chatApp button:-moz-focusring,input:-moz-focusring{
	    outline:1px dotted ButtonText
	}
#chatApp fieldset{
	    padding:0.35em 0.75em 0.625em
	}
#chatApp legend{
	    box-sizing:border-box;
	    color:inherit;
	    display:table;
	    max-width:100%;
	    padding:0;
	    white-space:normal
	}
#chatApp progress{
	    vertical-align:baseline
	}
#chatApp textarea{
	    overflow:auto
	}
#chatApp input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{
	    -webkit-appearance:none
	}
	
#chatApp{
    min-width:100px;
    min-height:100%;
    font-family:Roboto,-apple-system,Helvetica Neue,Helvetica,Arial,sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-smoothing:antialiased;
    line-height:1.5;
    font-size:16px !important	
}	
	
#chatApp .displayChatbot{
		opacity:0;
	}
	
#chatApp .visible{
		opacity:1;
	}
	
	
#chatApp .mask{
	 background-color:#000000;
	 opacity:40%;
	 z-index:10;	
	}
	
	.chatbot {
		display:block;
	    position: stabic;
		bottom: 0;
		right: 0;
		z-index: 11;
		width: 25%;
		height:100%;
		background-color: rgb(34 34 34 / 0.80);
		backdrop-filter: blur(24px);
		min-width:375px;
	}
	
	
	.eyebrow{
		height: 45px;
		width: 100%;
		text-align: center;
		vertical-align: middle;
		line-height: 45px;
		font-size: 20px;
		display: flex;
		border-bottom:1px groove #555;
	
	}
	.eyebrow > h5{
		margin: 0 auto;
		line-height: 45px;
		color:white;
	}
#chatApp .close{
		content: "";
		background: url(./close.png) no-repeat top right;
		width: 24px;
	    height: 24px;
	    display: block;
	    line-height: 45px;
	    right: 10px;
	    top: 10px;
	    position:absolute;
	    cursor: pointer;    
	}
	
#chatApp .minimize{
		content: "";
		background: url(./arrow_down.png) no-repeat top right;
		width: 24px;
	    height: 24px;
	    display: block;
	    line-height: 45px;
	    left: 10px;
	    top: 10px;
	    position:absolute;
	    cursor: pointer;  
	}
	
	
	
#chatApp .chatContinue::placeholder{
  background: linear-gradient(to right, #1C8178 3em, #444444 3em);
  background-clip:text;
  color:transparent;	
  font-weight:700;	
	
}
	
	
	.chatbox-conversation {
	  list-style: none;
	  margin: 0;
	  padding: 5px 20px 5px 10px;
	  overflow: auto;
	  width:100%;
	  height:calc(100%-82px);
	  box-sizing:border-box;
	}
	
	
	.minibot{
		background-color: rgb(34 34 34 / 0.8);
		border: 1px solid rgba(0, 255, 196, 1);
		width:132px;
		height: 56px;
		padding: 8px;
		border-radius: 52px;
	    position: fixed;
	    right: 32px;
	    bottom: 30px;
	    z-index: 11;
	    box-sizing: border-box;
	    display: flex;
	    font-size: 20px;
	    line-height: 40px;
	    font-weight: 600;
	    cursor: pointer;    	
	}
	.minibot.circle{
		width:56px !important;
	}
	.minibot.circle::before{
		margin-right:0 !important;
	}	
	.minibot::before{
		content: "";
		background: url(./bot_head.svg) no-repeat left center;
		width: 40px;
	    height: 40px;
	    margin-right: 12px;
	    display: block;
	}
	
	/*chat message for robot*/
	
	.message-text--sent::before {
	    content: "";
	    position: absolute;
	    width: 0;
	    height: 0;
		top: 0%;
		left:100%;
	    border-right: 8px solid transparent;
	    border-top: 8px solid #C8C8C8;
	    border-bottom: 0px solid transparent;
	}
	
	.message-text--sent {
		background: #C8C8C8;
	    color: #000000;
	    border-radius: 8px 0px 8px 8px;
	}
	
	.message-text--received {
		background: #333333;
	    color: #FFFFFF;
	    border-radius: 0px 8px 8px 8px;
	}
	
	
	.message-text--received::before {
		border-top: 8px solid #333333;
	    border-left: 8px solid transparent;
	    top: 0%;
	    right: 100%;
	    content: "";
	    position: absolute;
	    width: 0;
	    height: 0;
	}
	
	
	
	.message-text {
	    padding: 8px;
	    line-height: 1.5;
	    word-break: break-word;
	    position: relative;
	
	}
	
#chatApp .message-item{
		background: #333333;
		border-radius: 8px;
		color: #00FFC4;
		font-size: 16px; 
	}
	
#chatApp .paragraph-item{
		background: #333333;
		border-radius: 8px;
		color: #FFFFFF;
		word-wrap: break-word;
		white-space: pre-wrap;
		font-size: 16px; 
	}
	
#chatApp .video-item{
		background: #333333;
		border-radius: 8px;
		font-size: 16px; 
	}
	
#chatApp .video{
		width:48.5%;
		cursor:pointer;
	}
#chatApp .video-horizontal{
		width:150px;
		cursor:pointer;
		margin-right:10px;
	}
#chatApp .video:nth-child(odd){
		margin-right:3%;
		margin-bottom:15%;
	}
#chatApp .video .q-img__container::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, rgba(34, 34, 34, 0)), to(#181818));
    background: -webkit-linear-gradient(top, rgba(34, 34, 34, 0) 70%, #181818 100%);
    background: -o-linear-gradient(top, rgba(34, 34, 34, 0) 70%, #181818 100%);
    background: linear-gradient(180deg, rgba(34, 34, 34, 0) 70%, #181818 100%);
	}	
#chatApp .video-caption{
		padding:4px !important;
		background:none;	
	}
#chatApp .video-pay{
		font-size: 12px;
		line-height: 26px;
		color: #000;
		border-radius: 16px;
		font-weight: 600;
		padding:3px;
		background-color: #efd7a5;	
	}
	
	.conversation_down{
		cursor: pointer;
		margin: 0 auto;
		z-index: 30;
	    position: fixed;
	    bottom:100px;
	
	}
	
	.chatbot-notify{
		border-radius:30px;
		height:50px;
		min-width:100px;
		background-color:#888888;
		margin:0 auto;
		line-height:50px;
		text-align:center;
		font-size:16px;
		z-index:40;
		position:fixed;
		bottom:100px;
		
	}
#chatApp .like-text{
	line-height:100%;
}

#chatApp textarea.q-field__native  {
  min-height:60px;
}

#chatApp .q-field__bottom  {
  font-size:12px;
  font-weight:700;
  padding-left:0px;
}
	@media screen and (max-width: 767px) {
	.chatbot{
		background-color: rgb(24 24 24 / 0.92);
	}
	}

	/*animation*/
	
	.fade_main-enter-active,
	.fade_main-leave-active {
	  width:375px;
	  transition: all 0.3s ease-in-out
	}
	
	.fade_main-enter-from,
	.fade_main-leave-to{
	  opacity: 0;
	  height: 0px;
	  transform: translateX(400px);  
	}
	
	
	.close_main-enter-active,
	.close_main-leave-active {
	
	  transition: all 0.3s ease-in-out
	}
	
	.close_main-enter-from,
	.close_main-leave-to{
	  opacity:0;
	  transform: translateX(400px);  
	}
	
	.fade_mini-enter-active,
	.fade_mini-leave-active {
	  transition: opacity 0.7s ease
	}
	
	.fade_mini-enter-from,
	.fade_mini-leave-to{
	  opacity: 0;
	}
	
	.fade_notify-enter-active,
	.fade_notify-leave-active {
	 transition: all 0.3s ease
	}
	.fade_notify-enter-to,
	.fade_notify-leave-from{ 
	  opacity:1;
	  scale:1;
	}
	.fade_notify-enter-from,
	.fade_notify-leave-to{
	  opacity:0;
	  scale:0.1;  
	}
	
	
	.fade_down-enter-active,
	.fade_down-leave-active {
	 transition: opacity 0.3s ease
	}
	.fade_down-enter-to,
	.fade_down-leave-from{ 
	  opacity:1;
	  /*transform: translateY(0px);*/ 
	}
	.fade_down-enter-from,
	.fade_down-leave-to{
		opacity:0;
	  /*transform: translateY(40px);*/  
	}