/*
 *  Stylesheet for chat-specific components
 */
 
.fixedPosition {
    position:fixed!important;
}

#chatPanel {
    background-color: #eee;
    padding-bottom: 0em;
    position: fixed;
    bottom: 0px;
    right: 0px;
    width: 400px;
    z-index: 999;
    border-top-left-radius: .75em;
    border-top:1px solid #fff;
    border-left:1px solid #fff;    
    box-shadow: 0px 0px 0.25em inset #0002, 0px 0px 0.25em 0.01em #0005; 
    transition:.1s; 
}
#chatPanel.minimized{width:auto;}


/**
 *  This is the element the user will click to show the chat panel.
 */
#liveChatLink {
    --paddingSize: 1em;
    color: white !important;
	display: inline;
    position: fixed;
    right: 0px;
    bottom: 0px;
    background: var(--chat_primary_color);
    font-size: 1em;
    font-family: 'Sarabun';
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    padding: calc(var(--paddingSize)*.85) var(--paddingSize) calc(var(--paddingSize)*.5);
    border-top-left-radius: .75em;
    border-top:1px solid #fff;
    border-left:1px solid #fff;    
    box-shadow: 0px 0px 0.25em inset #0002, 0px 0px 0.25em 0.01em #0005;
    z-index:1000;
}
	
#liveChatLink:hover, #liveChatLink:active{
    color:white;
    background:var(--chat_accent)
}

/*speech balloon*/
#liveChatLink:before{
    content:""; width:1.25em; height:.8em; position:relative; top:-.25em; background:#FFF; display:inline-block; border-radius:.3em; margin-right:.5em; 
}
#liveChatLink:after{
    content:""; width: 0; height: 0; 
    border-top: .5em solid transparent;
    border-bottom: .5em solid transparent; 
    border-right:.5em solid #FFF;
    transform:rotate(45deg);
    position:absolute; top:1em; left:1.5em; 
}

#chatPanel #chatHeader{
	background: var(--chat_primary_color);
    color: white;
	display: flex;
	margin-bottom: 0em;
	align-items: center;
	border-top-left-radius: .75em;
	padding: 0em 0em 0em 1em;
}
#chatPanel.minimized #chatHeader{padding: .4em .5em .25em .5em;}
#chatPanel.minimized #chatHeader:hover{cursor:pointer; background:var(--chat_accent)}
#chatPanel.minimized #chatHeader button{display:none}
#chatPanel.minimized.messagesWaiting #chatHeader:before{
	content:"!"; 
	width:1.5em; height:1.5em; 
	display:block; 
	position:absolute; 
	top:-1em; 
	left:-1em; 
	background:#C00; 
	display:flex; 
	font-size:1.5em; 
	font-weight:bold; 
	justify-content:Center; 
	align-items:center; 
	padding: .25em 0em 0em 0em; 
	border-radius:100%; 
	border:3px solid #FFF; 
	animation-name: messagesWaitingAlert;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
@keyframes messagesWaitingAlert {
	0% {background-color: #FFF; transform:rotate(-60deg)}
	25%{transform:rotate(20deg)}
	50%{background-color: #C00;transform:rotate(0deg)}
	100% {background-color: #C00;}
}
#chatPanel #chatHeader h2{
    color: white;
    flex-grow:1;
    font-size:1em;
    padding:0em;
    margin:.5em .5em .3em .5em
}
#chatPanel #chatHeader button{
    background:none;
    border:none;
    color: white;
    cursor: pointer;
    font-size:1.5em;
    padding:.1em .5em;
    font-family: Sarabun;
}
#chatPanel #chatHeader button:hover{background:#0003}

#chatPanel #chatBody{padding-bottom:0em;}

#chatPanel #chatBody .subHeader{background:var(--chat_accent);padding:0em;margin:0em;text-align:right;display: flex;justify-content: space-between;padding-left: .7em;border-bottom: 2px solid var(--chat_accent);}
#chatPanel #chatBody .subHeader a{padding:.25em .75em; display:inline-block; font-family:bryantPro; font-weight:bold;}

#chatPanel #messages {
    border: 1px solid #cccccc;
    border-left: 0px;
    border-right: 0px;
    padding: 10px;
    height: 400px;
    word-wrap: break-word;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

#openbutton-chat {
    width: 100%;
    grid-column: 1/-1;
    margin-top: .5em;
    color:#FFF !important;
}

#chatPanel .response,
#chatPanel .sent {
    width: 100%;
    display: flex;
    flex-direction: column;
}

#chatPanel .response {
    align-items: flex-start;
}

#chatPanel .sent {
    align-items: flex-end;
}

#chatPanel .response div,
#chatPanel .sent div {
    color: #000;
    padding: 10px;
    margin: 10px 0;
    max-width: 85%;
}

#chatPanel .response div {
	background:#FFF;
	border-left: 5px solid var(--chat_accent);
    border-radius: 0em 1em 1em 1em;
}

#chatPanel .sent div {
	background:#FFF;
	border-right: 5px solid var(--chat_accent);
    border-radius: 1em 0em 1em 1em;
    text-align: right;
}

#chatPanel .response button {
  background: var(--chat_primary_color);
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  margin: 1px;
  padding: 10px 15px;
}

#chatPanel .response button:hover {
  background: var(--chat_accent);
}

.chat-loader, .chat-loader:before, .chat-loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}
.chat-loader {
  align-self: flex-start;
  color: #bdbdbd;
  font-size: 5px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
  margin: 0 0 20px 25px;
}
.chat-loader:before,
.chat-loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.chat-loader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.chat-loader:after {
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
  40% { box-shadow: 0 2.5em 0 0 }
}

.hidden {
    display: none;
}