/home/optimumoperation/livechat.optimumoperations.top/plugins/apsbd-chat/css/appsbd-chat-2nd.css
#apbd-cht-container {
position: fixed;
z-index: 999999;
bottom: 0px;
right: 0px;
}
#apbd-cht-container .apc-alert-msg {
bottom: 100px;
position: absolute;
z-index: 999;
right: -500px;
display: block !important;
width: calc(100% - 20px) !important;
color: #fff;
font-size: 23px;
border-radius: 5px;
background: #127f0c;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.45);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.45);
-webkit-transition: all 1000ms;
-moz-transition: all 1000ms;
-ms-transition: all 1000ms;
-o-transition: all 1000ms;
transition: all 1000ms;
}
#apbd-cht-container .apc-alert-msg.apc-success-msg {
right: 10px;
}
#apbd-cht-container .apc-alert-msg.apc-error-msg {
background: #7f0909;
right: 10px;
}
#apbd-cht-container .apc-header-close-window {
border-style: none;
display: inline-block;
position: absolute;
top: 10px;
right: 10px;
width: 30px;
padding: 0px 8px;
margin: 0;
height: 30px;
border-radius: 4px;
background: transparent;
border: 1px solid transparent;
z-index: 15;
}
#apbd-cht-container .apc-header-close-window:hover {
background: rgba(0, 0, 0, 0.19);
border: 1px solid rgba(0, 0, 0, 0.2);
}
#apbd-cht-container .apc-header-sound {
border-style: none;
display: inline-block;
position: absolute;
top: 10px;
right: 40px;
width: 30px;
padding: 0px 7px;
margin: 0;
height: 30px;
border-radius: 4px;
background: transparent;
border: 1px solid transparent;
z-index: 15;
}
#apbd-cht-container .apc-header-sound.apc-enable > i {
color: #ffffff;
}
#apbd-cht-container .apc-header-sound.apc-disable {
background: rgba(0, 0, 0, 0.19);
border: 1px solid rgba(0, 0, 0, 0.2);
}
#apbd-cht-container .apc-header-sound.apc-disable > i {
color: #b52b2b;
}
#apbd-cht-container .apc-header-sound:hover {
background: rgba(0, 0, 0, 0.19);
border: 1px solid rgba(0, 0, 0, 0.2);
}
#apbd-cht-container > .apc-msg-window {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
align-items: flex-start;
background: url(../img/chat-bg5.png) #fff;
text-align: left;
position: absolute;
bottom: 163px;
width: 370px;
right: 45px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 14px -1px rgba(0, 0, 0, 0.19);
z-index: 999;
}
#apbd-cht-container > .apc-msg-window .apc-start {
padding-top: 25px;
}
#apbd-cht-container > .apc-msg-window.apc-not-started .apc-msgs {
display: none;
}
#apbd-cht-container > .apc-msg-window.apc-not-started .apc-type-container {
display: none;
}
#apbd-cht-container > .apc-msg-window.apc-not-started .apc-start {
height: 100%;
}
#apbd-cht-container > .apc-msg-window.apc-started .apc-start {
display: none;
}
#apbd-cht-container > .apc-msg-window.apc-ct-not-ready {
display: none !important;
}
#apbd-cht-container > .apc-msg-window > div {
width: 100%;
padding: 0px 10px;
}
#apbd-cht-container > .apc-msg-window > .apc-header {
z-index: 10;
height: auto;
background: #0bc1ff;
background: -moz-linear-gradient(top, #0bc1ff 0%, #00b3f1 100%);
background: -webkit-linear-gradient(top, #0bc1ff 0%, #00b3f1 100%);
background: linear-gradient(to bottom, #0bc1ff 0%, #00b3f1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0bc1ff', endColorstr='#00b3f1', GradientType=0);
box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.19);
}
#apbd-cht-container > .apc-msg-window > .apc-header .apc-header-row {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
#apbd-cht-container > .apc-msg-window > .apc-header .apc-header-row > div {
display: inline;
}
#apbd-cht-container > .apc-msg-window > .apc-header .apc-header-row > .apc-company-img {
border-radius: 50%;
overflow: hidden;
width: 57px;
height: 50px;
border: 4px solid #00a0d7;
margin-top: 7px;
background: #ffffff;
}
#apbd-cht-container > .apc-msg-window > .apc-header .apc-header-row > .apc-company-img img {
height: 42px;
}
#apbd-cht-container > .apc-msg-window > .apc-header .apc-header-row > .apc-header-info {
width: 100%;
padding: 10px 5px;
color: #ffffff;
}
#apbd-cht-container > .apc-msg-window > .apc-header .apc-header-row > .apc-header-info .apc-header-info-title {
font-size: 16px;
font-weight: bold;
}
#apbd-cht-container > .apc-msg-window .apc-chat-img-dl {
display: block;
text-align: center;
}
#apbd-cht-container > .apc-msg-window .apc-chat-img {
text-align: center;
display: block;
}
#apbd-cht-container > .apc-msg-window .apc-chat-img img {
max-height: 100%;
max-width: 100%;
border: 2px solid rgba(204, 204, 204, 0.31);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#apbd-cht-container > .apc-msg-window .apc-chat-img img:hover {
border: 2px solid rgba(175, 34, 38, 0.44);
}
#apbd-cht-container > .apc-msg-window .apc-system-single-msg {
background: rgba(164, 232, 255, 0.3);
padding: 0px !important;
border-bottom: 2px solid rgba(100, 100, 100, 0.04);
z-index: 8;
}
#apbd-cht-container > .apc-msg-window .apc-system-single-msg .apc-msg {
-webkit-transition: all 1000ms;
-moz-transition: all 1000ms;
-ms-transition: all 1000ms;
-o-transition: all 1000ms;
transition: all 1000ms;
overflow: hidden;
margin: 0;
margin-top: -500px;
}
#apbd-cht-container > .apc-msg-window .apc-system-single-msg .apc-msg > i.apc-msg-icon {
font-size: 26px;
}
#apbd-cht-container > .apc-msg-window .apc-system-single-msg.apc-show {
display: block;
}
#apbd-cht-container > .apc-msg-window .apc-system-single-msg.apc-show .apc-msg {
padding: 5px;
margin-top: 0px;
}
#apbd-cht-container > .apc-msg-window .apc-system-single-msg.apc-show.apc-show-error {
background: rgba(255, 18, 7, 0.3);
}
#apbd-cht-container > .apc-msg-window > .apc-msgs {
height: 100%;
overflow: auto;
position: relative;
background: rgba(11, 193, 255, 0.1);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(11, 193, 255, 0.1) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(11, 193, 255, 0.1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(11, 193, 255, 0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0)', endColorstr='rgba(11, 193, 255, 0.1)', GradientType=0);
}
#apbd-cht-container > .apc-msg-window > .apc-msgs .apc-load-move {
padding-top: 10px;
}
#apbd-cht-container > .apc-msg-window > .apc-msgs .apc-msg-time {
display: table;
clear: both;
width: 83%;
text-align: right;
font-size: 10px;
font-style: italic;
font-weight: bold;
letter-spacing: 1px;
color: #595e5f;
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-sys-item .apc-msg {
float: none;
width: 90%;
background: rgba(164, 232, 255, 0.3);
margin-left: 11px;
/*border-radius: 10px;*/
border-radius: 16px 16px 16px 16px;
padding: 7px;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
margin: 5px auto;
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-sys-item .apc-msg > .apc-msg-item-header {
border-bottom: 1px solid rgba(100, 100, 100, 0.04);
text-align: center;
margin-top: -2px;
margin-bottom: 5px;
padding-bottom: 5px;
font-size: 10px;
font-style: italic;
font-weight: bold;
letter-spacing: 1px;
color: rgba(89, 94, 95, 0.5);
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-sys-item .apc-msg > .apc-msg-item-footer {
border-top: 1px solid rgba(100, 100, 100, 0.04);
text-align: center;
margin-top: 5px;
padding-top: 5px;
font-size: 10px;
font-style: italic;
font-weight: bold;
letter-spacing: 1px;
color: rgba(89, 94, 95, 0.5);
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-sys-item .apc-msg-time {
width: 90%;
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-item {
margin: 10px 0;
overflow-wrap: break-word;
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-item > .apc-umg {
border-radius: 50%;
background: #ffffff;
width: 40px;
height: 40px;
float: left;
overflow: hidden;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-item > .apc-umg img {
width: 40px;
height: 40px;
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-item > .apc-msg {
margin-top: 5px;
float: left;
width: 70%;
width: calc(100% - 103px);
background: rgba(255, 255, 255, 0.8);
margin-left: 11px;
/*border-radius: 10px;*/
border-radius: 4px 16px 16px 16px;
padding: 7px;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.72);
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-item.apc-me > .apc-umg {
float: right;
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-item.apc-me > .apc-msg {
float: right;
border-radius: 16px 4px 16px 16px;
margin-right: 11px;
margin-left: 0px;
background: rgba(11, 193, 255, 0.3);
}
#apbd-cht-container > .apc-msg-window > .apc-msgs > .apc-msg-item:after {
content: "";
display: table;
clear: both;
}
#apbd-cht-container > .apc-msg-window > .apc-msgs:after {
content: "";
display: table;
clear: both;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container {
border-top: 1px solid rgba(0, 0, 0, 0.09);
position: relative;
background: #fff;
padding: 0;
height: 85px;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container.is-disabled {
background: #f7f7f7;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container.is-disabled > .apc-send-ctrl i {
display: none !important;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container .apc-msg-typing {
position: absolute;
top: -23px;
left: 10px;
background: rgba(0, 0, 0, 0.09);
padding: 2px 10px;
border-radius: 9px;
font-size: 10px;
color: #616564;
display: none;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container ::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #cccccc;
opacity: 0.5;
/* Firefox */
}
#apbd-cht-container > .apc-msg-window > .apc-type-container .apc-file-up-status {
position: absolute;
top: -32px;
right: 0px;
display: none;
background: rgba(0, 0, 0, 0.66);
padding: 5px;
color: #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container > textarea {
border: none;
border-style: none;
background: transparent;
padding: 15px 10px 10px 10px;
width: 100%;
resize: none;
height: 50px;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container > textarea:disabled {
background: #f7f7f7;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container > .apc-send-ctrl {
text-align: center;
padding: 10px 5px;
white-space: nowrap;
margin-right: 5px;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container > .apc-send-ctrl > i {
padding: 5px;
font-size: 20px;
color: #cccccc;
}
#apbd-cht-container > .apc-msg-window > .apc-type-container > .apc-send-ctrl > i:hover {
/*background: #cccccc;*/
color: #4d4d4d;
}
#apbd-cht-container > .apc-main-icon {
position: absolute;
background: #0bc1ff;
height: 60px;
width: 60px;
bottom: 85px;
right: 45px;
border-radius: 50%;
overflow: hidden;
text-align: center;
line-height: 50px;
box-shadow: 0 0 14px -1px rgba(0, 0, 0, 0.19);
z-index: 888;
}
#apbd-cht-container > .apc-main-icon > i {
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -15px;
color: #fff;
}
#apbd-cht-container .apc-btn-send {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSI5NnB0IiBoZWlnaHQ9Ijk2cHQiIHZpZXdCb3g9IjAgMCA5NiA5NiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGlkPSIjZmZmZmZmZmYiPjxwYXRoIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjEuMDAiIGQ9IiBNIDguMDMgMTIuMDAgQyAzNi4wMSAyMy45OSA2NC4wMCAzNS45OSA5MS45OCA0OC4wMCBDIDY0LjAwIDYwLjAxIDM2LjAyIDcyLjAxIDguMDMgODMuOTkgQyA4LjAyIDc0LjY2IDguMDAgNjUuMzMgOC4wMCA1Ni4wMCBDIDI3Ljk3IDUzLjMyIDQ3Ljk0IDUwLjY5IDY3LjkxIDQ4LjAwIEMgNDcuOTQgNDUuMzEgMjcuOTcgNDIuNjcgOC4wMCA0MC4wMCBDIDguMDAgMzAuNjcgOC4wMiAyMS4zNCA4LjAzIDEyLjAwIFoiIC8+PC9nPjwvc3ZnPg==);
}
#apbd-cht-container .apc-spinner {
display: inline;
margin-right: 10px;
}
#apbd-cht-container .apc-spinner > div {
width: 8px;
height: 8px;
background-color: #007aa4;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
#apbd-cht-container .apc-spinner .apc-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
#apbd-cht-container .apc-spinner .apc-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#apbd-cht-container.aps-chat-other-site .apc-item {
padding-right: 20px !important;
}
#apbd-cht-container.aps-chat-other-site #apbd-cht-input:focus {
outline: none !important;
}
#apbd-cht-container.aps-chat-other-site .btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
#apbd-cht-container.aps-chat-other-site .btn-success {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}
#apbd-cht-container.aps-chat-other-site .text-center {
text-align: center!important;
}
#apbd-cht-container.aps-chat-other-site > .apc-msg-window > .apc-header .apc-header-row > .apc-company-img img {
height: 48px;
margin-left: 0px;
}
@media all and (max-width: 768px) {
body.apc-has-cht {
overflow: hidden;
}
body.apc-has-cht #apbd-cht-container {
height: auto !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
body.apc-has-cht #apbd-cht-container .apc-msg-window {
height: auto !important;
width: auto !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 0;
}
}
/*# sourceMappingURL=appsbd-chat-2nd.css.map */