/* Main Window */
html, body { background:rgb(255,255,255); padding:0px; font-size: 16px; font-family: 'Roboto', sans-serif;color:rgb(102,102,102); margin: 0px; overflow: hidden;}
/* Chatting With */
.ChatWithBar { position: relative; overflow: hidden; width: 92%; display: none; float: left; padding: 4%; height: 115px; margin-bottom: 20px;}
.ChatWithAvatar { width: 80px; height: 80px; position: absolute; top: 0; left: calc(50% - 40px); border-radius: 50%; box-shadow: 0px 0px 5px 0px #786c6c;}
.ChatWithTitle { font-size: 14px; display: inline; float: left; margin-top: 75px; color: #fff; position: absolute; width: 100%; text-align: center; left: 0; line-height: 19px; letter-spacing: 0.5px; }
.ChatWithDesc { display: block; color:#fff;}
.ChatWithBar::before { border-radius: 100%; position: absolute; background: #1d212e; right: -200px; left: -200px; top: -200px; content: ''; bottom: 0;}
/* Chat Window */
.ChatWindowBar { display: none; float: left; padding-left: 10px; height: calc(100vh - 315px); font-size: 13px; overflow: hidden; width: 340px; padding-top: 5px;}
.ChatWindowBarSmall { height: 270px;}
.ChatWindowRow {display: inline; float: left; width: 100%;}
.ChatWindowRow.SystemAlert { display: none;}
.ChatWindowStaffAvatar { display: inline; float: left; width: 30px; height: 30px; margin-top: 5px; margin-top: 25px;}
.ChatWindowStaffAvatarPic {width: 100%; margin-top: -10px;}
.ChatWindowStaffBubble { position: relative; width: 190px; min-height:20px; padding:13px 10px 12px 10px; background: #eaeaea;
border-radius: 5px; margin-left: 45px; line-height: 18px; margin-top: 10px; margin-bottom: 20px; color:#414141}
.ChatWindowStaffBubble:after { content: ''; position: absolute; border-style: solid; border-width: 12px 14px 12px 0;
border-color: transparent #eaeaea; display: block; width: 0; left: -10px; top: 10px; }
.ChatWindowClientBubble { position: relative; width: 220px; min-height:20px; padding:13px 10px 12px 10px; background: #029cd2; margin-top: 10px; margin-bottom: 20px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: rgb(255,255,255);
line-height: 18px; margin-left: 60px;}
.ChatWindowClientBubble:after { content: ''; position: absolute; border-style: solid; border-width: 12px 0 12px 14px;
border-color: transparent #029cd2; display: block; width: 0; z-index: 1; right: -10px; top: 10px;}
.ChatWindowTime { display: inline; float: left; width:200px; font-size: 12px; color: #999; margin-left: 55px; text-align: right; margin-top: -15px; margin-bottom: 10px;}
.ChatWindowTimeClient { width:245px;}
.ComposingAnimation { display: inline; float: left; width: 100%; text-align: center; color: #999;}
/* Chat Inactive Bar */
.ChatWindowBar.Inactive { height: calc(100vh - 368px); }
.ChatTypeBar.Inactive { border-color: #fed6d7; }
.ChatInactiveBar { display: none; float: left; padding: 10px; width:calc(100% - 20px); height: 29px; background-color: #fff0f0; border-top: 2px solid #fed6d7; border-bottom: 2px solid #fed6d7;}
.ChatInactiveBar .Desc { display: inline; float: left; width: 208px; margin-left: 10px; font-size: 13px; font-weight: bold;}
/* Chat Inactive Bar > Countdown */
#ChatInactiveCountdown { position: relative; margin: auto; height: 40px; width: 40px; text-align: center; display: inline; float: left; margin-top: -5px; }
#ChatInactiveCountdownNumber { color: #414141; display: inline-block; line-height: 40px; }
svg { position: absolute; top: 0; right: 0; width: 40px; height: 40px; transform: rotateY(-180deg) rotateZ(-90deg); }
svg circle { stroke-dasharray: 113px; stroke-dashoffset: 0px; stroke-linecap: round; stroke-width: 2px; stroke: #414141; fill: none; animation: ChatInactiveCountdownAni 90s linear infinite forwards; }
@keyframes ChatInactiveCountdownAni {
from { stroke-dashoffset: 0px; }
to { stroke-dashoffset: 113px; }
}
#ChatInactiveCountdown.Bounce { animation: ChatInactiveBounce 2s ease infinite;}
@keyframes ChatInactiveBounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-5px);}
60% {transform: translateY(-3px);}
}
/* Chat Message Styles */
.ChatWindowClientBubble a { color: #fff;}
.ChatWindowStaffBubble a { color: #0196ea; word-wrap:break-word;}
.LinkStying {color:#3394cc; text-decoration: underline;}
.EmojiDisplay {font-size: 20px; display: inline-block; vertical-align: middle;}
.FileDownloadIconRow {width: 100%; height: 108px; border-radius:2px; background-repeat: no-repeat; margin-bottom: 5px; background: #fff;
font-family: 'Material Icons'; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; font-size: 80px; color: #ccc; text-align: center; line-height:108px; cursor: pointer;}
.FileDownloadIconType { font-family: 'Roboto', sans-serif; text-align: center; font-size: 18px; color:#414141; line-height:normal; margin-top: -50px;}
/* File Download Link Styles */
.FileDownloadTxtRow {word-break: break-all; }
.FileDownloadTxtRow a { color: rgb(102,102,102); text-decoration: none;}
.FileDownloadTxtRowWhite a { color: rgb(255,255,255); text-decoration: none;}
/* Pre Chat */
.ChatPreFrame {width: 92%; display:inline; float: left; padding:0 4% 0% 4%; color:#414141;}
.ChatPreBar { width:100%; display:inline; float: left; height: 102px; margin-bottom: 20px; position: relative;}
.ChatPreBar::before { border-radius: 100%; position: absolute; background: #1d212e; right: -200px; left: -200px; top: -200px; content: ''; bottom: 0;}
.ChatPreAvatar {color: #1d212e; font-size: 55px !important; display: inline; float: left; margin-right: 7px; ); position: absolute; background-color: #fff; padding: 10px; background-repeat: no-repeat; border-radius: 50%; left: calc(50% - 40px); background-position: center; top: 0px; box-shadow: 0px 0px 5px 0px #786c6c; }
.ChatPreSingleInput { height: 35px; font-family: 'Roboto', sans-serif; width:93%; outline: none; border:2px solid #1d212e; margin-top: 5px; margin-bottom: 15px; font-size: 16px; padding-left: 2.5%; padding-right: 2.5%; color:#414141; border-radius: 5px;}
.ChatPreMultiLineInput { width:93%; outline: none; border:2px solid #1d212e; line-height: 20px; margin-top: 5px; margin-bottom: 15px; font-size: 16px; color: #999; height: 80px; padding-left:2.5%; padding-right:2.5%; padding-top: 5px; border-radius: 5px;
font-family: 'Roboto', sans-serif; resize: none; color:#414141;}
.ChatPreMultiLineInputSoftware { height: 215px;}
.InitiateChat { padding: 10px 20px; background-color: #dd3091; color: #fff; width: 80px; line-height: 30px; font-size:20px;
text-align: center; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; cursor: pointer;}
.InitiateChat:hover {opacity: 0.8;}
.ChatPreDescSmall { font-size: 11px; text-align: right; float: right; margin-right:5px;}
.ChatInitiateForceField { background-color:rgb(255,113,124); color: #fff;}
@media screen and ( max-height: 541px ) {
.ChatPreBar { height: 61px; }
.ChatPreAvatar { width: 40px; height: 40px; background-size: 30px; left: calc(50% - 25px);}
.ChatPreFrame { margin-top: -14px;}
}
/* Waiting For Chat Layout */
.ChatWaitingFrame, .ChatEndedFrame { width: 92%; display:none; float: left; padding:0 4% 0% 4%;}
.ChatWaitingDesc { padding-bottom: 50px; padding-top:50px; text-align: center; color:#414141;}
.ChatWaitingQuirk {text-align: center; padding-top: 50px; color: #737373; font-size: 14px; width: 100%; display: inline; float: left;}
/* Chat Ended */
.ChatThankYou { display: inline; float: left; margin-left: 50px; margin-top: 20px; margin-bottom: 40px;}
.ChatEndedDesc { display: inline; float: left; width: 100%; text-align: center;}
/* Chat Type */
.ChatTypeBar { width: 92%; display: none; float: left; padding: 0% 4% 0% 4%; font-size: 18px; padding-bottom: 8px; }
.ChatTypeInput { width: 322px;margin-top: 10px; margin-left: 0px; height: 100px; border: 0px; font-family: 'Roboto', sans-serif; color: #414141; font-size: 14px; line-height: 20px; resize: none; margin-bottom: 5px; border-radius: 5px; padding: 10px; box-sizing: border-box; border: 2px solid #1d212e; }
.ChatTypeInput:focus { outline:none;}
.ChatTypeInputSmall { height: 80px; margin-top: 5px;}
.ChatTypeIcon {font-family: 'Material Icons'; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings:'liga'; display: inline; float: left; margin-right:5px; font-size: 19px; cursor: pointer; color:#414141;}
.ChatTypeInput:focus::placeholder { color: #ccc;}
.ChatBtnsRow { display: inline; float: left; width: 100%;}
/* Emoji Container */
.ChatEmojiOpen, .ChatTypeIcon.Open { color: #0196ea;}
.ChatEmojiContainer { position: absolute; width: 344px; height: 300px; padding: 0px; background: #FFFFFF; border-radius: 10px; border: #ccc solid 2px; bottom: 42px; left: 1px; display: none; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); z-index: 1;}
.ChatEmojiContainer:after { content: ''; position: absolute; border-style: solid; border-width: 13px 13px 0;
border-color: #FFFFFF transparent; display: block; width: 0; z-index: 1; bottom: -13px; left: 8px; }
.ChatEmojiContainer:before { content: ''; position: absolute; border-style: solid; border-width: 14px 14px 0; border-color: #ccc transparent; display: block; width: 0; z-index: 0; bottom: -16px; left: 7px;}
.ChatEmoji { display: inline; float: left; padding: 3px; font-size: 26px; cursor: pointer;}
.ChatEmojiFrame { display: inline; float: left; width: 319px; height: 290px; overflow: hidden; padding: 5px; padding-left: 20px; border-radius: 8px;}
/* Send File */
.ChatSendFileDnDFrame { position: absolute; width: 350px; height: 108px; padding: 0px; background: #FFFFFF; bottom: 29px; right: 0px; display: none; text-align: center; }
.ChatSendFileDnD { display: inline; float: left; margin-left: 15px; width: 318px; height: 96px; border: 2px dashed #999; border-radius: 5px; line-height: 96px; color: #666; background-color: #fafafa; }
.ChatFileUploading { border-color: #fff; border-top: 2px solid rgb(249,249,249);}
.ChatFileUploadingStatus { display: inline; float: left; width:0%; height:24px; background-color: #0196ea; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
.ChatSendFileStatusBar { display: inline; float: left; width: 244px; border: 2px solid #ccc; height: 24px;
margin-top: 34px; margin-left: 15px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding: 1px;}
.ChatFileStatusPercent { display: inline; float: left; line-height: normal; margin-top:38px; margin-left: 7px;}
/* Chat Offline */
.ChatOfflineFrame {display: none; color: #414141;}
.ChatOfflineLogo { display: inline; float: left; width: 280px; height: 280px; background-image:url('/images/Closed.png'); margin-left: 20px;}
.ChatOfflineMessage {display: inline; float: left; width: 100%; font-size: 18px; text-align: center;}
.ChatOfflineMessageSmall {display: inline; float: left; width: 100%; font-size: 14px; text-align: center; margin-top: 20px;}
/* Loading Icon */
.cssload-fond{ position:relative; margin: auto;}
.cssload-container-general { animation:cssload-animball_two 1.15s infinite;
-o-animation:cssload-animball_two 1.15s infinite; -ms-animation:cssload-animball_two 1.15s infinite;
-webkit-animation:cssload-animball_two 1.15s infinite;-moz-animation:cssload-animball_two 1.15s infinite;
width:43px; height:43px;}
.cssload-internal { width:43px; height:43px; position:absolute;}
.cssload-ballcolor { width: 19px; height: 19px; border-radius: 50%;}
.cssload-ball_1, .cssload-ball_2, .cssload-ball_3, .cssload-ball_4 { position: absolute;
animation:cssload-animball_one 1.15s infinite ease; -o-animation:cssload-animball_one 1.15s infinite ease;
-ms-animation:cssload-animball_one 1.15s infinite ease; -webkit-animation:cssload-animball_one 1.15s infinite ease;
-moz-animation:cssload-animball_one 1.15s infinite ease; }
.cssload-ball_1 { background-color:rgb(203,32,37); top:0; left:0; }
.cssload-ball_2 { background-color:rgb(248,179,52); top:0; left:23px; }
.cssload-ball_3 { background-color:rgb(1,150,243); top:23px; left:0; }
.cssload-ball_4 { background-color:rgb(151,191,13); top:23px; left:23px; }
@keyframes cssload-animball_one { 0%{ position: absolute;} 50%{top:12px; left:12px; position: absolute;opacity:0.5;}
100%{ position: absolute;} }
@-o-keyframes cssload-animball_one { 0%{ position: absolute;} 50%{top:12px; left:12px; position: absolute;opacity:0.5;}
100%{ position: absolute;} }
@-ms-keyframes cssload-animball_one { 0%{ position: absolute;} 50%{top:12px; left:12px; position: absolute;opacity:0.5;}
100%{ position: absolute;}}
@-webkit-keyframes cssload-animball_one{ 0%{ position: absolute;} 50%{top:12px; left:12px; position:absolute;opacity:0.5;} 100%{ position: absolute;}}
@-moz-keyframes cssload-animball_one { 0%{ position: absolute;} 50%{top:12px; left:12px; position: absolute;opacity:0.5;}
100%{ position: absolute;}}
@keyframes cssload-animball_two{0%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(360deg) scale(1.3);}
100%{transform:rotate(720deg) scale(1);}}
@-o-keyframes cssload-animball_two { 0%{-o-transform:rotate(0deg) scale(1);} 50%{-o-transform:rotate(360deg) scale(1.3);}
100%{-o-transform:rotate(720deg) scale(1);}}
@-ms-keyframes cssload-animball_two{ 0%{-ms-transform:rotate(0deg) scale(1);} 50%{-ms-transform:rotate(360deg) scale(1.3);} 100%{-ms-transform:rotate(720deg) scale(1);}}
@-webkit-keyframes cssload-animball_two { 0%{-webkit-transform:rotate(0deg) scale(1);}
50%{-webkit-transform:rotate(360deg) scale(1.3);} 100%{-webkit-transform:rotate(720deg) scale(1);}}
@-moz-keyframes cssload-animball_two { 0%{-moz-transform:rotate(0deg) scale(1);}
50%{-moz-transform:rotate(360deg) scale(1.3);}100%{-moz-transform:rotate(720deg) scale(1);}}
/* CSS 3 Animations */
@keyframes bounce {
0%, 20%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0);}
40% {-webkit-transform: translateY(-10px);transform: translateY(-10px);}
80% {-webkit-transform: translateY(-5px);transform: translateY(-5px);}
}
/* Small Screen */
@media only screen and (max-height: 550px) {
.ChatWithAvatar { width: 50px; height: 50px; left: calc(50% - 25px);}
.ChatWithTitle { margin-top:37px;}
.ChatWithBar { height: 70px;}
.ChatWindowBar { height: calc(100vh - 270px);}
.ChatPreMultiLineInput { height: 46px; }
.ChatWindowBar.Inactive { height: calc(100vh - 323px); }
.ChatThankYou { height: 100px; margin-left: 113px;}
}
/* Mobile Mode Amends */
.MobileMode .ChatWithAvatar { top:6px;}
.MobileMode .ChatWindowBar { overflow-y: auto; height: calc(100vh - 440px); width: 100%; box-sizing: border-box;}
.MobileMode .ChatWindowBar { width: 100%; box-sizing: border-box;}
.MobileMode .ChatWindowClientBubble { margin-right: 60px; margin-left: auto; }
.MobileMode .ChatTypeInput { width: 100%;}
.MobileMode .ChatThankYou { margin-left: calc(50% - 100px); }
.MobileMode .ChatPreAvatar { top:10px;}