/* Use this CSS with Modern maximized window theme and Bubble as minimized theme. It works for desktop only. */

#operator_avatar {
border: none !important;
}

#livechat-full {
  bottom: 0 !important;
  right: 0 !important;
  height: 740px !important;
  max-height: 100% !important;
  width: 400px !important;
}

#content {
background: none !important;
    box-shadow: 0 1.5rem 2rem rgba(0,0,0,.3)!important;
}

#wrapper {
  padding: 2rem 2rem 2rem 2rem !important;
  top: -20px !important;
}

#content, #wrapper {
  border-radius: 0.5rem !important;
}

.title-bg, #body-inner, #operators td, #survey-after-greeting, #footer td {
  background: rgba(0,0,0,.65) !important;
  box-shadow: none !important;
}

.operators-bar .wrapper, .title-button, .title-button:hover {
background: none !important;
}

.operator-name, .operator-role, .icon-thumbs-down, .icon-thumbs-up, .icon-email {
color: #fff !important;
border-right-color: #fff !important;
}

.avatar {
border-radius: 100% !important;
}

#title {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
}

#body-container p {
padding: .25rem 1rem;
}

.msg-text {
padding: .9rem 1.1rem;
width:auto;
display: inline-block;
    margin-bottom: .125rem !important;
}

.msg-text a {
color: inherit!important;
}

.client .msg-text {
background: #3e7ce4;
color: #fff;
border-radius: 1.4rem 1.4rem .3rem 1.4rem;
}

.client.same-author .msg-text {
border-radius: 1.4rem .3rem .3rem 1.4rem;
}

.client.last-sent .msg-text {
border-radius: 1.4rem .3rem 1.4rem 1.4rem;
}

.operator .msg-text {
background: #fff;
color: #000;
border-radius: 1.3rem 1.4rem 1.4rem .3rem;
}

.operator.same-author .msg-text {
border-radius: .3rem 1.4rem 1.4rem .3rem;
}

.client .author, .operator .author {
color: #fff !important;
}

.client {
text-align: right;
}

.time {
display: none;
}

/*.delivered-indicator {
display: none!important;
}

.last-seen-indicator {
    display: none !important;
}*/

.last-sent .delivered-indicator, .last-seen .last-seen-indicator {
    display: block !important;
    color: hsla(0,0%,100%,.8);
    font-size: .65rem;
    clear: both;
    padding: .2rem;
}

.last-seen .delivered-indicator {
  display: none !important;
}

#typing-indicator {
    color: hsla(0,0%,100%,.8);
text-align: right;
}

#rate_me_feedback_form, #email_transcript_form {
    margin: 2rem 1rem 1rem !important;
    border-radius: 1rem;
    background: #fff;
    color: #000;
    text-align: center;
    padding: 1rem .5rem !important;
    box-shadow: 0px 0px 20px 2px rgba(0,0,0,1) !important;
}

.system {
    text-align: center;
}

.system .msg-text, .system .msg-text a {
    padding: .5rem;
    color: hsla(0,0%,100%,.8);
}

#email_transcript_form input[type=submit], #operators #rate_me_feedback_form input[type=submit], .submit input, #send-file {
background-color: #3e7ce4 !important;
box-shadow: none !important;
}

.submit input:hover {
    opacity: 1 !important;
}

#confirm-closing p.actions {
width: 100% !important;
}

#confirm-closing {
    color: hsla(0,0%,100%,.8);
}

.form {
    border-radius: 1rem;
    background: #fff;
    color: #000;
}

#body label {
color: #000;
}

.message-wrapper {
padding: 0 !important;
}

#message-placeholder {
color: transparent !important;
}

#message-placeholder::before {
content:'Type a message here...';
color: #b3b3b3;
}

#footer td {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
padding: 3px;
}

#powered .footer {
background: none!important;
color:#fff;
}

#footer #powered {
    text-shadow: 0 0.1rem 0.6rem rgba(0,0,0,.7);
}

#content .form .form_header {
    margin: 10px 0px !important;
}

#message-wrapper .btn-send {
display: block;
right: 2.5rem!important;
position: absolute;
padding: 5px;
color:#fff;
background-color: #3e7ce4;
height: 25px;
z-index: 3;
bottom: 3.25rem;
border: none;
border-radius: .25rem;
}

#message {
padding-right: 2.65rem;
}

#send-file-clip {
right: 1.05rem;
top: .5rem;
}

#send-file-clip .icon-clip {
    font-weight: bold;
    color: #1556c1;
    text-shadow: 0 0.1rem 0.1rem rgba(0,0,0,.175);
}

#popup-file {
    border-radius: 1rem;
    background: #fff;
    color: #000;
    left: 10%;
    width: 80%;
}

.thumbnail {
border: none!important;
margin: 5px auto;
}

.integration {
text-align:center;
}

.integration .msg-text {
padding: .9rem 1.1rem;
width:auto;
display: inline-block;
    margin-bottom: .125rem !important;
background: #fff;
border-radius: 1.4rem;
}

.url-preview {
    background: #fff;
    padding: .5rem;
    border: none;
    border-radius: 1.4rem;
}

.details .title, .details .description {
color: #000 !important;
}

.url-preview.hover .details .title {
color: #3e7ce4!important;
}