@import "https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&subset=latin-ext&display=swap";

#chat {
    position: fixed;
    z-index: 1000000;
    font-family: Lato, Open Sans, sans-serif !important;
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1.618;
    letter-spacing: normal;
    background: 0 0;
    color: #242424;
    scroll-behavior: smooth;
    display: none;
    bottom: 120px;
    right: 50px;
    width: 300px;
}

#chat-enable, #chat-disable, .chat-disable {
    bottom: 50px;
    right: 50px;
    position: fixed;
    z-index: 100060;
    border: 0px;
    display: none;
}

#chat-enable.button, #chat-disable.button, .chat-disable.button  {
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
    font: inherit;
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    padding: .5em 1em;
    vertical-align: middle;
    font-size: 1em;
    border: 1px solid #03a84e;
    border-color: var(--chat-header-background-color);
    line-height: 1.5em;
    text-align: center;
    text-decoration: none;
    background-color: #03a84e;
    background-color: var(--chat-header-background-color);
    color: #fff;
    color: var(--chat-header-text-color)
}

#chat-disable.button, .chat-disable.button {
    display: none;
}
#chat-enable.button-large, #chat-disable.button-large, .chat-disable.button-large {
    padding: 1em 2em;
    line-height: 1.5em;
    font-size: .937em
}
#chat-enable.button-circle, #chat-disable.button-circle, .chat-disable.button-circle {
    height: 2.5em;
    width: 2.5em;
    line-height: 2.5em;
    padding: 0;
    border-radius: 100%
}
#chat-enable.button:not(:disabled), #chat-disable.button:not(:disabled), .chat-disable.button:not(:disabled)  {
    cursor: pointer
}

#chat-enable.button-circle.button-large, #chat-disable.button-circle.button-large, .chat-disable.button-circle.button-large {
    height: 5.75em;
    width: 5.75em;
    line-height: 5.75em;
    padding-top: 0.9em;
}

.min-chat-icon {
    padding-top: 0.6em;
}

.min-chat-icon, .min-chat-icon-close {
    vertical-align: baseline !important;
    display: inline !important;
}

#chat .card {
    border: 1px solid #ddd;
}

#chat a:active, #chat a:hover {
    outline: none
}

#chat a:focus {
    outline: 1px solid #1f6885
}

#chat .chat-emoji-holder {
    display: none;
    position: absolute;
    bottom: 46px;
    right: -12px;
    height: 16px;
    padding: 5px;
    width: 250px;
    z-index: 1100;
}

#chat .cei {
    cursor: pointer;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

#chat .chat_message .cei,#chat  .content .cei {
    margin-top: -2px;
    cursor: default;
    float: none;
    margin-right: 2px;
}

#chat .link,#chat a {
    color: #f6ff58;
    text-decoration: none;
    cursor: pointer
}

#chat .link:hover, #chat a:hover {
    color: #f6fc9a;
    text-decoration: underline
}

#chat abbr[title] {
    border-bottom: none;
    text-decoration: underline
}

#chat b, #chat strong {
    font-weight: bolder
}

#chat :not(pre) > code, #chat :not(pre) > kbd, #chat :not(pre) > samp {
    font-family: Lato, Open Sans, sans-serif !important;
    font-size: .812em;
    color: #bf1212;
    white-space: nowrap
}

#chat em {
    color: #bf1212
}

#chat ins {
    background: #ffd;
    color: #545454
}

#chat mark {
    background: rgba(109, 55, 218, .1);
    color: #03a84e
}

#chat q {
    font-style: italic
}

#chat small {
    font-size: 80%
}

#chat sub, #chat sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

#chat sup {
    top: -.5em
}

#chat sub {
    bottom: .25em
}

#chat audio, #chat canvas, #chat iframe, #chat img, #chat svg, #chat video {
    vertical-align: middle
}

#chat audio, #chat canvas, #chat img, #chat video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box
}

#chat svg:not(:root) {
    overflow: hidden
}

#chat img:not([src]) {
    visibility: hidden
}

#chat address, #chat dl, #chat fieldset, #chat figure, #chat ol, #chat p, #chat pre, #chat ul {
    margin: 0
}

#chat * + address, * + dl, #chat * + fieldset, #chat * + figure, #chat * + ol, #chat * + p, #chat * + pre, #chat * + ul {
    margin-top: 0
}

#chat * + .h1, #chat * + .h2, #chat * + .h3, #chat * + .h4, #chat * + .h5, #chat * + .h6, #chat * + h1, #chat * + h2, #chat * + h3, #chat * + h4, #chat * + h5, #chat * + h6 {
    margin-top: 1.5em
}

#chat .h1 {
    font-size: 1.7em;
    line-height: 1.2
}

#chat .h2 {
    font-size: 1.275em;
    line-height: 1.3;
    font-weight: 400
}

#chat .h3 {
    font-size: 1.25em;
    line-height: 1.4;
    font-weight: 400
}

#chat .h4 {
    font-size: .937em;
    line-height: 1.4
}

#chat .h5 {
    font-size: 1em;
    line-height: 1.4
}

#chat .h6 {
    font-size: .812em;
    line-height: 1.4
}

@media (min-width: 960px) {
    #chat .h1 {
        font-size: 2em
    }

    #chat .h2 {
        font-size: 1.5em
    }
}

#chat ol, #chat ul {
    padding-left: 2em
}

#chat ol > li > ol, #chat ol > li > ul, #chat ul > li > ol, #chat ul > li > ul {
    margin-top: 0
}

#chat dt {
    font-weight: 800
}

#chat dd {
    margin-left: 0
}

#chat .hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    text-align: inherit;
    margin: 0 0 1em;
    border: 0;
    border-top: 1px solid #d9dbe4
}

#chat * + .hr, #chat * + hr {
    margin-top: 1em
}

#chat .hr.hr-dashed {
    border-style: dashed
}

#chat blockquote {
    margin: 0 0 1em;
    font-size: .937em;
    line-height: 1.5;
    font-style: italic
}

#chat * + blockquote {
    margin-top: 1em
}

#chat blockquote p:last-of-type {
    margin-bottom: 0
}

#chat blockquote footer {
    margin-top: .5em;
    font-size: .812em;
    line-height: 1.5
}

#chat pre {
    font: .812em/1.5 Lato;
    color: #545454;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    overflow: auto
}

#chat pre code {
    font-family: Lato
}

#chat ::-moz-selection {
    background: #03a84e;
    color: #fff;
    text-shadow: none
}

#chat ::selection {
    background: #03a84e;
    color: #fff;
    text-shadow: none
}

#chat details, #chat main {
    display: block
}

#chat summary {
    display: list-item
}

#chat template {
    display: none
}

#chat iframe {
    border: 0
}

#chat .flex {
    display: -ms-flexbox;
    display: flex;
}

#chat .flex-inline {
    display: -ms-inline-flexbox;
    display: inline-flex
}

#chat .flex-inline:after, #chat .flex-inline:before, #chat .flex:after, #chat .flex:before {
    display: none
}

#chat .flex-left {
    -ms-flex-pack: start;
    justify-content: flex-start
}

#chat .flex-center {
    -ms-flex-pack: center;
    justify-content: center
}

#chat .flex-right {
    -ms-flex-pack: end;
    justify-content: flex-end
}

#chat .flex-between {
    -ms-flex-pack: justify;
    justify-content: space-between
}

#chat .flex-around {
    -ms-flex-pack: distribute;
    justify-content: space-around
}

@media screen and (min-width: 640px) {
    #chat .flex-left\@s {
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    #chat .flex-center\@s {
        -ms-flex-pack: center;
        justify-content: center
    }

    #chat .flex-right\@s {
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    #chat .flex-between\@s {
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    #chat .flex-around\@s {
        -ms-flex-pack: distribute;
        justify-content: space-around
    }
}

@media screen and (min-width: 960px) {
    #chat .flex-left\@m {
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    #chat .flex-center\@m {
        -ms-flex-pack: center;
        justify-content: center
    }

    #chat .flex-right\@m {
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    #chat .flex-between\@m {
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    #chat .flex-around\@m {
        -ms-flex-pack: distribute;
        justify-content: space-around
    }
}

@media screen and (min-width: 1200px) {
    #chat .flex-left\@l {
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    #chat .flex-center\@l {
        -ms-flex-pack: center;
        justify-content: center
    }

    #chat .flex-right\@l {
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    #chat .flex-between\@l {
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    #chat .flex-around\@l {
        -ms-flex-pack: distribute;
        justify-content: space-around
    }
}

@media screen and (min-width: 1600px) {
    #chat .flex-left\@xl {
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    #chat .flex-center\@xl {
        -ms-flex-pack: center;
        justify-content: center
    }

    #chat .flex-right\@xl {
        -ms-flex-pack: end;
        justify-content: flex-end
    }

    #chat .flex-between\@xl {
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    #chat .flex-around\@xl {
        -ms-flex-pack: distribute;
        justify-content: space-around
    }
}

#chat .flex-stretch {
    -ms-flex-align: stretch;
    align-items: stretch
}

#chat .flex-top {
    -ms-flex-align: start;
    align-items: flex-start
}

#chat .flex-middle {
    -ms-flex-align: center;
    align-items: center
}

#chat .flex-bottom {
    -ms-flex-align: end;
    align-items: flex-end
}

#chat .flex-row {
    -ms-flex-direction: row;
    flex-direction: row
}

#chat .flex-row-reverse {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

#chat .flex-column {
    -ms-flex-direction: column;
    flex-direction: column
}

#chat .flex-column-reverse {
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

#chat .flex-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

#chat .flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

#chat .flex-wrap-reverse {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse
}

#chat .flex-wrap-stretch {
    -ms-flex-line-pack: stretch;
    align-content: stretch
}

#chat .flex-wrap-top {
    -ms-flex-line-pack: start;
    align-content: flex-start
}

#chat .flex-wrap-middle {
    -ms-flex-line-pack: center;
    align-content: center
}

#chat .flex-wrap-bottom {
    -ms-flex-line-pack: end;
    align-content: flex-end
}

#chat .flex-wrap-between {
    -ms-flex-line-pack: justify;
    align-content: space-between
}

#chat .flex-wrap-around {
    -ms-flex-line-pack: distribute;
    align-content: space-around
}

#chat .flex-first {
    -ms-flex-order: -1;
    order: -1
}

#chat .flex-last {
    -ms-flex-order: 99;
    order: 99
}

@media screen and (min-width: 640px) {
    #chat .flex-first\@s {
        -ms-flex-order: -1;
        order: -1
    }

    #chat .flex-last\@s {
        -ms-flex-order: 99;
        order: 99
    }
}

@media screen and (min-width: 960px) {
    #chat .flex-first\@m {
        -ms-flex-order: -1;
        order: -1
    }

    #chat .flex-last\@m {
        -ms-flex-order: 99;
        order: 99
    }
}

@media screen and (min-width: 1200px) {
    #chat .flex-first\@l {
        -ms-flex-order: -1;
        order: -1
    }

    #chat .flex-last\@l {
        -ms-flex-order: 99;
        order: 99
    }
}

@media screen and (min-width: 1600px) {
    #chat .flex-first\@xl {
        -ms-flex-order: -1;
        order: -1
    }

    #chat .flex-last\@xl {
        -ms-flex-order: 99;
        order: 99
    }
}

#chat .flex-none {
    -ms-flex: none;
    flex: none
}

#chat .flex-auto {
    -ms-flex: auto;
    flex: auto
}

#chat .flex-1 {
    -ms-flex: 1;
    flex: 1
}

#chat .margin {
    margin-bottom: 1.5em !important
}

#chat * + .margin, #chat .margin-top {
    margin-top: 1.5em !important
}

#chat .margin-bottom {
    margin-bottom: 1.5em !important
}

#chat .margin-left {
    margin-left: 1.5em !important
}

body.rtl #chat .margin-left {
    margin-left: auto !important;
    margin-right: 1.5em !important
}

#chat .margin-right {
    margin-right: 1.5em !important
}

body.rtl #chat .margin-right {
    margin-right: auto !important;
    margin-left: 1.5em !important
}

#chat .margin-xsmall {
    margin-bottom: .5em !important
}

#chat * + .margin-xsmall, #chat .margin-xsmall-top {
    margin-top: .5em !important
}

#chat .margin-xsmall-bottom {
    margin-bottom: .5em !important
}

#chat .margin-xsmall-left {
    margin-left: .5em !important
}

body.rtl #chat .margin-xsmall-left {
    margin-left: auto !important;
    margin-right: .5em !important
}

#chat .margin-xsmall-right {
    margin-right: .5em !important
}

body.rtl #chat .margin-xsmall-right {
    margin-right: auto !important;
    margin-left: .5em !important
}

#chat .margin-small {
    margin-bottom: 1em !important
}

#chat * + .margin-small, #chat .margin-small-top {
    margin-top: 1em !important
}

#chat .margin-small-bottom {
    margin-bottom: 1em !important
}

#chat .margin-small-left {
    margin-left: 1em !important
}

body.rtl #chat .margin-small-left {
    margin-left: auto !important;
    margin-right: 1em !important
}

#chat .margin-small-right {
    margin-right: 1em !important
}

#chat .rtl .margin-small-right {
    margin-right: auto !important;
    margin-left: 1em !important
}

#chat .margin-medium {
    margin-bottom: 2em !important
}

#chat * + .margin-medium, #chat .margin-medium-top {
    margin-top: 2em !important
}

#chat .margin-medium-bottom {
    margin-bottom: 2em !important
}

#chat .margin-medium-left {
    margin-left: 2em !important
}

body.rtl #chat .margin-medium-left {
    margin-left: auto !important;
    margin-right: 2em !important
}

#chat .margin-medium-right {
    margin-right: 2em !important
}

body.rtl #chat .margin-medium-right {
    margin-right: auto !important;
    margin-left: 2em !important
}

#chat .margin-large {
    margin-bottom: 2em !important
}

#chat * + .margin-large, #chat .margin-large-top {
    margin-top: 2em !important
}

#chat .margin-large-bottom {
    margin-bottom: 2em !important
}

#chat .margin-large-left {
    margin-left: 2em !important
}

body.rtl #chat .margin-large-left {
    margin-left: auto !important;
    margin-right: 2em !important
}

#chat .margin-large-right {
    margin-right: 2em !important
}

body.rtl #chat .margin-large-right {
    margin-right: auto !important;
    margin-left: 2em !important
}

@media screen and (min-width: 1200px) {
    #chat .margin-large {
        margin-bottom: 2.5em !important
    }

    #chat * + .margin-large, #chat .margin-large-top {
        margin-top: 2.5em !important
    }

    #chat .margin-large-bottom {
        margin-bottom: 2.5em !important
    }

    #chat .margin-large-left {
        margin-left: 2.5em !important
    }

    body.rtl #chat .margin-large-left {
        margin-left: auto !important;
        margin-right: 2.5em !important
    }

    #chat .margin-large-right {
        margin-right: 2.5em !important
    }

    body.rtl .margin-large-right {
        margin-right: auto !important;
        margin-left: 2.5em !important
    }
}

#chat .margin-xlarge {
    margin-bottom: 2.5em !important
}

#chat * + .margin-xlarge, #chat .margin-xlarge-top {
    margin-top: 2.5em !important
}

#chat .margin-xlarge-bottom {
    margin-bottom: 2.5em !important
}

#chat .margin-xlarge-left {
    margin-left: 2.5em !important
}

body.rtl #chat .margin-xlarge-left {
    margin-left: auto !important;
    margin-right: 2.5em !important
}

#chat .margin-xlarge-right {
    margin-right: 2.5em !important
}

body.rtl #chat .margin-xlarge-right {
    margin-right: auto !important;
    margin-left: 2.5em !important
}

@media screen and (min-width: 1200px) {
    #chat .margin-xlarge {
        margin-bottom: 3em !important
    }

    #chat * + .margin-xlarge, #chat .margin-xlarge-top {
        margin-top: 3em !important
    }

    #chat .margin-xlarge-bottom {
        margin-bottom: 3em !important
    }

    #chat .margin-xlarge-left {
        margin-left: 3em !important
    }

    body.rtl .margin-xlarge-left {
        margin-left: auto !important;
        margin-right: 3em !important
    }

    #chat .margin-xlarge-right {
        margin-right: 3em !important
    }

    body.rtl .margin-xlarge-right {
        margin-right: auto !important;
        margin-left: 3em !important
    }
}

#chat .margin-emove {
    margin: 0 !important
}

#chat .margin-emove-top {
    margin-top: 0 !important
}

#chat .margin-emove-bottom {
    margin-bottom: 0 !important
}

#chat .margin-emove-left {
    margin-left: 0 !important
}

body.rtl #chat .margin-emove-left {
    margin-left: auto !important;
    margin-right: 0 !important
}

#chat .margin-emove-right {
    margin-right: 0 !important
}

body.rtl #chat .margin-emove-right {
    margin-right: auto !important;
    margin-left: 0 !important
}

#chat .margin-emove-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

#chat .margin-emove-adjacent + * {
    margin-top: 0 !important
}

#chat .margin-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

#chat .margin-auto-top {
    margin-top: auto !important
}

#chat .margin-auto-bottom {
    margin-bottom: auto !important
}

#chat .margin-auto-left {
    margin-left: auto !important
}

body.rtl #chat .margin-auto-left {
    margin-right: auto !important;
    margin-left: 0 !important
}

#chat .margin-auto-right {
    margin-right: auto !important
}

body.rtl #chat .margin-auto-right {
    margin-left: auto !important;
    margin-right: 0 !important
}

#chat .margin-auto-vertical {
    margin-top: auto !important;
    margin-bottom: auto !important
}

#chat .padding {
    padding: 1em !important
}

@media screen and (min-width: 1200px) {
    #chat .padding {
        padding: 2em !important
    }
}

#chat .padding-small {
    padding: .5em !important
}

#chat .padding-large {
    padding: 1em !important
}

@media screen and (min-width: 1200px) {
    #chat .padding-large {
        padding: 2.5em !important
    }
}

#chat .padding-emove {
    padding: 0 !important
}

#chat .padding-emove-top {
    padding-top: 0 !important
}

#chat .padding-emove-bottom {
    padding-bottom: 0 !important
}

#chat .padding-emove-left {
    padding-left: 0 !important
}

body #chat .padding-emove-left {
    padding-left: auto !important;
    padding-right: 0 !important
}

#chat .padding-emove-right {
    padding-right: 0 !important
}

body #chat .padding-emove-right {
    padding-right: auto !important;
    padding-left: 0 !important
}

#chat .padding-emove-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

#chat .padding-emove-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important
}

#chat .text-regular-1 {
    font-size: .75em
}

#chat .text-regular-1, #chat .text-regular-2 {
    line-height: 1.618;
    font-weight: 400;
    color: #545454
}

#chat .text-regular-2 {
    font-size: .812em
}

#chat .text-regular-3 {
    /* font-size: .937em; */
    line-height: 1.618;
    font-weight: 400;
    color: #545454
}

#chat .text-bold-1, #chat .text-regular-4 {
    font-size: 1em;
    line-height: 1.618;
    font-weight: 400;
    color: #545454
}

#chat .text-bold-2 {
    font-size: 1.25em
}

#chat .text-bold-2, #chat .text-bold-3 {
    line-height: 1.5;
    font-weight: 600;
    color: #545454
}

#chat .text-bold-3 {
    font-size: 1.5em
}

#chat .text-bold-4 {
    font-size: 2em;
    line-height: 1.5;
    font-weight: 600;
    color: #545454
}

#chat .text-green-1 {
    color: #03a84e !important
}

#chat .text-yellow-1 {
    color: #fdc20f !important
}

#chat .text-red-1 {
    color: #bf1212 !important
}

#chat .text-grey-0 {
    color: #242424 !important
}

#chat .text-grey-1 {
    color: #545454 !important
}

#chat .text-grey-2 {
    color: #92929e !important
}

#chat .text-grey-3 {
    color: #d9dbe4 !important
}

#chat .text-grey-4 {
    color: #f7f7f9 !important
}

#chat .text-white {
    color: #fff !important
}

#chat .text-bold {
    font-weight: 600
}

#chat .text-italic {
    font-style: italic
}

#chat .text-oblique {
    font-style: oblique
}

#chat .text-underline {
    text-decoration: underline
}

#chat .text-uppercase {
    text-transform: uppercase !important
}

#chat .text-capitalize {
    text-transform: capitalize !important
}

#chat .text-lowercase {
    text-transform: lowercase !important
}

#chat .text-left {
    text-align: left !important
}

#chat .text-right, body.rtl .text-left {
    text-align: right !important
}

body.rtl #chat .text-right {
    text-align: left !important
}

#chat .text-center {
    text-align: center !important
}

#chat .text-justify {
    text-align: justify !important
}

@media screen and (min-width: 640px) {
    #chat .text-left\@s {
        text-align: left !important
    }

    #chat .text-right\@s, body.rtl .text-left\@s {
        text-align: right !important
    }

    body.rtl .text-right\@s {
        text-align: left !important
    }

    #chat .text-center\@s {
        text-align: center !important
    }
}

@media screen and (min-width: 960px) {
    #chat .text-left\@m {
        text-align: left !important
    }

    #chat .text-right\@m, body.rtl .text-left\@m {
        text-align: right !important
    }

    body.rtl .text-right\@m {
        text-align: left !important
    }

    #chat .text-center\@m {
        text-align: center !important
    }
}

@media screen and (min-width: 1200px) {
    #chat .text-left\@l {
        text-align: left !important
    }

    #chat .text-right\@l, body.rtl .text-left\@l {
        text-align: right !important
    }

    body.rtl .text-right\@l {
        text-align: left !important
    }

    #chat .text-center\@l {
        text-align: center !important
    }
}

@media screen and (min-width: 1600px) {
    #chat .text-left\@xl {
        text-align: left !important
    }

    #chat .text-right\@xl, body.rtl .text-left\@xl {
        text-align: right !important
    }

    body.rtl .text-right\@xl {
        text-align: left !important
    }

    #chat .text-center\@xl {
        text-align: center !important
    }
}

#chat .text-top {
    vertical-align: top !important
}

#chat .text-middle {
    vertical-align: middle !important
}

#chat .text-bottom {
    vertical-align: bottom !important
}

#chat .text-baseline {
    vertical-align: baseline !important
}

#chat .text-nowrap {
    white-space: nowrap
}

#chat .box-shadow-xsmall {
    box-shadow: 0 2px 3px rgba(0, 0, 0, .08)
}

#chat .box-shadow-small {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1)
}

#chat .box-shadow-medium {
    box-shadow: 0 5px 15px rgba(0, 0, 0, .12)
}

#chat .box-shadow-large {
    box-shadow: 0 14px 25px rgba(0, 0, 0, .16)
}

#chat .box-shadow-xlarge {
    box-shadow: 0 28px 50px rgba(0, 0, 0, .16)
}

#chat .text-truncate {
    max-width: 100%;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#chat .float-left {
    float: left !important
}

#chat .float-right, body.rtl .float-left {
    float: right !important
}

body.rtl .float-right {
    float: left !important
}

#chat .alert {
    padding: 1em 1.5em;
    background: #fff;
    color: #545454;
    border: 1px solid #d9dbe4;
    border-left-width: 5px;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box
}

#chat .alert .close {
    position: absolute;
    right: 0;
    top: 0;
    background: 0 0;
    border: 0;
    height: 100%;
    border-radius: 0 5px 5px 0;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    visibility: hidden;
    background: #f7f7f9
}

#chat .alert .close:focus, #chat .alert .close:hover {
    cursor: pointer;
    outline: none
}

#chat .alert .close.isMobile, #chat .alert:hover .close {
    visibility: visible
}

#chat .alert .close span {
    display: block;
    position: relative;
    width: .9375em;
    height: .9375em;
    opacity: .8
}

#chat .alert .close:hover span, #chat .alert .close span:hover {
    opacity: 1
}

#chat .close span:after, #chat .close span:before {
    display: inline-block;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: .9375em;
    width: .125em;
    background-color: #333
}

#chat .close span:before {
    transform: rotate(45deg)
}

#chat .close span:after {
    transform: rotate(-45deg)
}

#chat .alert-success {
    border-left-color: #03a84e
}

#chat .alert-success .alert-icon, #chat .alert-success .alert-title {
    color: #03a84e
}

#chat .alert-warning {
    border-left-color: #fdc20f
}

#chat .alert-warning .alert-icon, #chat .alert-warning .alert-title {
    color: #fdc20f
}

#chat .alert-danger {
    border-left-color: #bf1212
}

#chat .alert-danger .alert-icon, #chat .alert-danger .alert-title {
    color: #bf1212
}

#chat .alert-title {
    font-size: .937em;
    color: #545454
}

#chat .alert-icon {
    color: #545454
}

#chat .alert-xsmall {
    padding: .5em
}

#chat .alert-xsmall .alert-title {
    font-size: .75em
}

#chat .alert-xsmall .alert-description {
    font-size: .75em;
    font-size: calc(fontSize(xsmall) - .125em)
}

#chat .alert-small {
    padding: 1em
}

#chat .alert-small .alert-title {
    font-size: .812em
}

#chat .alert-medium {
    padding: 2em
}

#chat .alert-medium .alert-title {
    font-size: .937em
}

#chat .alert-fade-enter-active, #chat .alert-fade-leave-active {
    transition: opacity .5s
}

#chat .alert-fade-enter, #chat .alert-fade-leave-to {
    opacity: 0
}

#chat .avatar {
    display: inline-block;
    height: 3em;
    width: 3em;
    font-size: 1em;
    line-height: 2.75em;
    text-align: center;
    background-color: #efefef;
    border: 2px solid #fff;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden
}

#chat .avatar.avatar-count {
    background-color: #fff;
    background-color: var(--chat-header-text-color);
    color: #03a84e;
    color: var(--chat-header-background-color)
}

#chat .avatar .avatar-image {
    line-height: 0
}

#chat .avatar .avatar-image > img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

#chat .avatar-xsmall {
    height: 2em;
    width: 2em;
    font-size: .75em;
    line-height: 1.75em
}

#chat .avatar-small {
    height: 2.5em;
    width: 2.5em;
    font-size: .812em;
    line-height: 2.25em
}

#chat .avatar-medium {
    height: 3.5em;
    width: 3.5em;
    font-size: .937em;
    line-height: 3.25em
}

#chat .avatar-large {
    height: 4em;
    width: 4em;
    font-size: 1.25em;
    line-height: 3.75em
}

#chat .badge2 {
    height: 1.25em;
    width: 1.25em;
    box-sizing: border-box;
    font-size: .687em;
    line-height: 1.25em;
    vertical-align: middle;
    text-align: center;
    background: #bf1212;
    color: #fff;
    border-radius: 50%
}

#chat .branding {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

#chat .branding img {
    max-width: 16px;
    width: 100%;
    margin: 0 4px
}

#chat .branding b {
    margin: 0 .2em
}

#chat .branding:hover {
    background: #f7f7f9;
    border-radius: 1.25em
}

#chat .button {
    margin: 0;
    border-radius: 5px;
    overflow: hidden;
    font: inherit;
    color: inherit;
    text-transform: none;
    display: inline-block;
    box-sizing: border-box;
    padding: .5em 1em;
    vertical-align: middle;
    font-size: 1em;
    border: 1px solid #03a84e;
    border-color: var(--chat-header-background-color);
    line-height: 1.5em;
    text-align: center;
    text-decoration: none;
    background-color: #03a84e;
    background-color: var(--chat-header-background-color);
    color: #fff;
    color: var(--chat-header-text-color)
}

#chat .button:not(:disabled) {
    cursor: pointer
}

#chat .button:disabled {
    cursor: not-allowed;
    opacity: .7
}

#chat .button::-moz-focus-inner {
    border: 0;
    padding: 0
}

#chat .button:hover, #chat a.button:hover {
    text-decoration: none
}

#chat a.button:hover {
    color: #fff;
    color: var(--chat-header-text-color)
}

#chat .button:active, #chat .button:focus {
    outline: 0;
    -webkit-tap-highlight-color: transparent
}

#chat .button-success {
    background-color: #03a84e;
    color: #fff;
    border: 1px solid #03a84e
}

#chat .button-danger {
    background-color: #f0505c;
    color: #fff;
    border: 1px solid #f0505c
}

#chat .button-outline, #chat a.button-outline:hover {
    background-color: #fff;
    color: #03a84e;
    color: var(--chat-header-background-color);
    border-color: #03a84e;
    border-color: var(--chat-header-background-color)
}

#chat .button-outline-success {
    color: #03a84e;
    border: 1.5px solid #03a84e
}

#chat .button-outline-danger {
    color: #f0505c;
    border: 1.5px solid #f0505c
}

#chat .button-dashed {
    border-style: dashed;
    background-color: #fff;
    color: #03a84e;
    color: var(--chat-header-background-color)
}

#chat .button-small {
    padding: .25em 1em;
    line-height: 1.5em;
    font-size: .812em
}

#chat .button-large {
    padding: 1em 2em;
    line-height: 1.5em;
    font-size: .937em
}

#chat .button-rounded {
    border-radius: 2.5em
}

#chat .button-small.button-rounded {
    border-radius: 1.875em
}

#chat .button-large.button-rounded {
    border-radius: 2.5em
}

#chat .button-text {
    padding: 0;
    line-height: 1.618;
    background: 0 0;
    border: none
}

#chat .button-text, #chat .button-text:focus, #chat .button-text:hover {
    color: #03a84e;
    color: var(--chat-header-background-color)
}

#chat .button-text:active, #chat .button-text:focus {
    outline: 0;
    -webkit-tap-highlight-color: transparent
}

#chat .button-text:disabled {
    color: #92929e !important;
    cursor: not-allowed;
    outline: none
}

#chat .button-group {
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    position: relative
}

#chat .button-circle {
    height: 2.5em;
    width: 2.5em;
    line-height: 2.5em;
    padding: 0;
    border-radius: 100%
}

#chat .button-circle.button-small {
    height: 1.625em;
    width: 1.625em;
    line-height: 1.625em
}

#chat .button-circle.button-large {
    height: 3.75em;
    width: 3.75em;
    line-height: 3.75em
}

#chat .button-dashed .button-color-inverse, #chat .button-outline .button-color-inverse {
    color: #fff;
    color: var(--chat-header-text-color);
    border-color: #fff;
    border-color: var(--chat-header-text-color)
}

#chat .button-text.button-color-inverse, #chat .button-text.button-color-inverse:focus, #chat .button-text.button-color-inverse:hover {
    color: #fff;
    color: var(--chat-header-text-color)
}

#chat .card {
    position: relative;
    box-sizing: border-box;
    padding: 1.5em;
    border-radius: 5px
}

#chat .card, #chat .card-default {
    background-color: #f7f7f9;
    color: #92929e
}

#chat .card-inverse {
    background-color: #fff;
    color: #92929e
}

#chat .card-primary {
    background-color: #03a84e;
    background-color: var(--chat-header-background-color);
    color: #fff;
    color: var(--chat-header-text-color)
}

#chat .card-xsmall {
    padding: .5em
}

#chat .card-small {
    padding: 1em
}

#chat .card-medium {
    padding: 2em
}

#chat .card-large {
    padding: 2.5em
}

#chat .chatinput {
    width: 100%;
    padding: 0;
    position: relative;
    box-sizing: border-box
}

#chat .chatinput-emojis {
    position: absolute;
    bottom: 100%;
    left: auto;
    right: 0;
    top: auto;
    margin: 0 auto .25em;
    z-index: 2;
    width: 100%;
    max-width: 19.875em
}

#chat .chatinput-emojis .emoji-picker {
    margin: 0 auto;
    width: 100%
}

#chat .chatinput-fileupload {
    box-sizing: border-box;
    padding: .5em
}

#chat .chatinput-fileupload-list {
    list-style: none;
    padding: 0;
    margin: 0
}

#chat .chatinput-fileupload-input, #chat .chatinput-fileupload-preview {
    margin-right: .625em;
    width: 3.125em;
    height: 3.125em
}

#chat .chatinput-fileupload-preview {
    padding: 0;
    position: relative;
    background: #f7f7f9;
    border-radius: 5px
}

#chat .chatinput-fileupload-preview .icon {
    color: #92929e
}

#chat .chatinput-fileupload-preview img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    border-radius: 5px
}

#chat .chatinput-fileupload-input {
    background: #f7f7f9;
    border-radius: 5px;
    cursor: pointer
}

#chat .chatinput-fileupload-input .icon-add {
    color: #92929e
}

#chat .chatinput-fileupload-input:hover {
    cursor: pointer
}

#chat .chatinput-fileupload input {
    display: none;
    box-sizing: border-box
}

#chat .chatinput-editor {
    font: 400 12px Lato, sans-serif;
    max-width: 100%;
    width: 100%;
    min-height: 4.4em;
    height: 12px;
    max-height: 9.375em;
    resize: none;
    outline: none;
    border: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 5.5em 0 0;
    margin: .15em 0 0
}

#chat .chatinput-editor[contenteditable] {
    outline: none;
    caret-color: #ff0000 !important;
}

#chat .chatinput-editor[contentEditable=true]:empty:before {
    content: attr(data-text)
}

#chat .chatinput-action-buttons {
    position: absolute;
    top: 0;
    right: 0
}

#chat .chatinput-action-buttons.active {
    transition: all .1s ease;
    right: 2em
}

#chat .chatinput-button {
    color: #92929e;
    background: 0 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    display: inline-block;
    position: relative;
    width: 1.8em
}

#chat .chatinput-button.chatinput-focused {
    color: #545454
}

#chat .chatinput-button:hover {
    cursor: pointer
}

#chat .chatinput-button:focus {
    outline: none
}

#chat .chatinput-button.active .chatinput-ratings {
    width: 3.8125em;
    opacity: 1
}

#chat .chatinput-button.active .chatinput-rating {
    opacity: 0
}

#chat .chatinput-button i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: rgb(3, 168, 78) !important;
}

#chat .chatinput-rating {
    transition: opacity 1s ease-in-out
}

#chat .chatinput-ratings {
    position: absolute;
    background: #fff;
    box-sizing: border-box;
    width: 0;
    bottom: -10px;
    transition: all .3s ease;
    right: 0;
    height: 2.5em;
    overflow: hidden;
    white-space: nowrap;
    z-index: 1
}

#chat .chatinput-ratings input {
    display: none
}

#chat .chatinput-rate {
    background: 0 0;
    display: inline-block;
    border: 0;
    padding: 0
}

#chat .chatinput-rate:hover {
    transform: scale(1.4);
    cursor: pointer
}

#chat .chatinput-ratings-thumbs-down {
    color: #bf1212
}

#chat .chatinput-ratings-thumbs-up {
    color: #03a84e
}

#chat .chatinput-send-container {
    position: absolute;
    top: 0;
    right: 0
}

#chat .chatinput-send {
    background: 0 0;
    color: #03a84e;
    border: 1px solid transparent;
    padding: 0;
    width: 1.8em;
    display: none;
}

#chat .chatinput-send:hover {
    cursor: pointer
}

#chat .chatinput-send:focus {
    outline: 1px solid #1f6885
}

#chat .chatinput-file-emove {
    position: absolute;
    right: -6px;
    top: -6px;
    background: #fff;
    width: .875em;
    height: .875em;
    border-radius: 50%;
    border: 1px solid #bf1212;
    cursor: pointer
}

#chat .chatinput-file-emove .icon-close {
    font-size: .375em;
    color: #bf1212
}

#chat .chatinput-wrap {
    position: relative
}

.rtl .chatinput-editor {
    padding: 0 0 0 5.5em
}

.rtl .chatinput-action-buttons {
    left: 0;
    right: auto
}

.rtl .chatinput-action-buttons.active {
    left: 30px
}

.rtl .chatinput-emojis, #chat .rtl .chatinput-ratings, #chat .rtl .chatinput-send-container {
    left: 0;
    right: auto
}

#chat .checkbox-container {
    display: block;
    position: relative;
    padding-left: 1.5em;
    margin: 1em;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

body.rtl #chat .checkbox-container {
    padding-right: 2em;
    padding-left: 0;
    text-align: right
}

#chat .checkbox-container .checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

#chat .checkbox-container .checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1em;
    width: 1em;
    border: 1px solid #d9dbe4;
    border-radius: 2px;
    background: #fff
}

body.rtl #chat .checkbox-container .checkmark {
    right: 0;
    left: auto
}

#chat .checkbox-container:hover .checkbox ~ .checkmark {
    border-color: #d9dbe4
}

#chat .checkbox-container .checkbox:checked ~ .checkmark {
    background-color: #03a84e;
    background-color: var(--chat-header-background-color);
    border-color: #03a84e;
    border-color: var(--chat-header-background-color)
}

#chat .checkbox-container .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

#chat .checkbox-container .checkbox:checked ~ .checkmark:after {
    display: block
}

#chat .checkbox-container .checkmark:after {
    left: 5px;
    top: 2px;
    width: .25em;
    height: .5em;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

#chat .checkbox-container .form-label {
    color: #545454;
    font: 400 .812em Lato
}

#chat .checkbox-container .checkbox[disabled] ~ .form-label {
    color: #d9dbe4
}

#chat .dropdown {
    display: inline-block;
    position: relative;
    max-width: 100%;
    vertical-align: middle
}

/*.dropdown-menu {
    display: none;
    position: absolute;
    top: 2.5em;
    z-index: 2000;
    box-sizing: border-box;
    min-width: 9.375em;
    max-width: 12.5em;
    padding: 1em;
    background-color: #fff;
    color: #545454;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .12)
}*/

#chat .dropdown-menu.open {
    display: block
}

#chat .dropdown-menu-right {
    right: 0
}

#chat .dropdown-menu-left {
    left: 0
}

#chat .slide-fade-enter-active {
    transition: all .3s ease
}

#chat .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1, .5, .8, 1)
}

#chat .slide-fade-enter, #chat .slide-fade-leave-to {
    transform: translateY(10px)
}

#chat .emoji-picker {
    width: auto;
    max-width: 200px;
    min-height: auto;
    border: 1px solid #d9dbe4;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    bottom: 40px;
    right: 0;
    padding: 5px;
    z-index: 1100
}

#chat .emoji-loading {
    width: 2em;
    height: 2em;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .2);
    border-left-color: #333;
    -webkit-animation: rotateCircleLoader 1.1s linear infinite;
    animation: rotateCircleLoader 1.1s linear infinite
}

@-webkit-keyframes rotateCircleLoader {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes rotateCircleLoader {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

#chat .emoji-group {
    border-bottom: 1px solid #d9dbe4
}

#chat .emoji-group-tab {
    padding: .5em
}

#chat .emoji-group-tab:hover {
    cursor: pointer
}

#chat .emoji-group-tab-active {
    position: relative
}

#chat .emoji-group-tab-active:after {
    content: "";
    background: #03a84e;
    position: absolute;
    height: .125em;
    width: 80%;
    margin: auto;
    left: 0;
    right: 0;
    top: 100%
}

#chat .emoji-group-tab img {
    width: 1.125em;
    fill: #03a84e
}

#chat .emoji-search-container {
    box-sizing: border-box;
    padding: 1em .5em
}

#chat .emoji-sticky-header {
    padding: 0 .5em
}

#chat .emoji-header, #chat .emoji-sticky-header {
    margin: 0;
    font: 400 .812em Lato;
    color: #545454
}

#chat .emoji-scroll {
    height: 6.75em;
    padding: 0 .5em;
    position: relative;
    overflow: scroll
}

#chat .emoji-preview {
    box-sizing: border-box;
    height: 3.125em;
    background: #f7f7f9;
    padding: .5em;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

#chat .emoji-preview-image {
    box-sizing: border-box;
    max-width: 15%;
    height: 100%
}

#chat .emoji-preview-image img {
    max-width: 1.875em
}

#chat .emoji-preview-name {
    box-sizing: border-box;
    margin: 0;
    font: 600 .812em Lato;
    max-width: 14.375em;
    overflow: hidden;
    text-overflow: ellipsis
}

#chat .emoji-preview-shortname {
    font: 600 .75em Lato
}

#chat .emoji {
    margin: .375em .5em;
    padding: 0;
    border: 0;
    background: 0 0;
    border-radius: 5px
}

#chat .emoji:hover {
    cursor: pointer;
    background: #03a84e
}

#chat .emoji:focus {
    outline: 1px solid #1f6885
}

#chat .emoji {
    height: 1.5em;
    max-height: 1.5em;
    width: 1.5em;
    max-width: 1.5em
}

#chat .emoji img {
    max-width: 1.5em;
    display: inline-block
}

#chat .icon {
    font-family: font-icon;
    font-size: 1.125em;
    color: inherit;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    font-style: normal;
    display: inline-block;
    margin: 0 .2em;
    width: 1em;
    text-align: center
}

body.rtl #chat .icon {
    transform: scaleX(-1)
}

#chat .icon-xsmall {
    font-size: .75em
}

#chat .icon-small {
    font-size: .812em
}

#chat .icon-medium {
    font-size: .937em
}

#chat .icon-large {
    font-size: 1.25em
}

#chat .icon-xlarge {
    font-size: 1.5em
}

#chat .icon-xxlarge {
    font-size: 2em
}

#chat .icon-add:before {
    content: "\e824"
}

#chat .icon-alert:before {
    content: "\e825"
}

#chat .icon-attach-file:before {
    content: "\e826"
}

#chat .icon-audio-file:before {
    content: "\e827"
}

#chat .icon-call:before {
    content: "\e800"
}

#chat .icon-call-incoming:before {
    content: "\e801"
}

#chat .icon-change-name:before {
    content: "\e802"
}

#chat .icon-chat:before {
    content: "\e803"
}

#chat .icon-close:before {
    content: "\e804"
}

#chat .icon-down-arrow-1:before {
    content: "\e805"
}

#chat .icon-down-arrow-2:before {
    content: "\e806"
}

#chat .icon-down-arrow-3:before {
    content: "\e807"
}

#chat .icon-download:before {
    content: "\e808"
}

#chat .icon-email-transcript:before {
    content: "\e809"
}

#chat .icon-emoji:before {
    content: "\e80a"
}

#chat .icon-end-call:before {
    content: "\e80b"
}

#chat .icon-end-chat:before {
    content: "\e80c"
}

#chat .icon-error:before {
    content: "\e80d"
}

#chat .icon-file:before {
    content: "\e80e"
}

#chat .icon-file-text:before {
    content: "\e80f"
}

#chat .icon-filter:before {
    content: "\e810"
}

#chat .icon-hamburger-menu:before {
    content: "\e811"
}

#chat .icon-left-arrow:before {
    content: "\e812"
}

#chat .icon-message:before {
    content: "\e813"
}

#chat .icon-missed-chat:before {
    content: "\e814"
}

#chat .icon-mobile-send:before {
    content: "\e815"
}

#chat .icon-pop-out:before {
    content: "\e816"
}

#chat .icon-recent-search:before {
    content: "\e817"
}

#chat .icon-right-arrow:before {
    content: "\e818"
}

#chat .icon-screenshare:before {
    content: "\e819"
}

#chat .icon-search:before {
    content: "\e81a"
}

#chat .icon-show-all:before {
    content: "\e81b"
}

#chat .icon-sound-off:before {
    content: "\e81c"
}

#chat .icon-sound-on:before {
    content: "\e81d"
}

#chat .icon-thumbs-down:before {
    content: "\e81e"
}

#chat .icon-thumbs-up:before {
    content: "\e81f"
}

#chat .icon-user:before {
    content: "\e820"
}

#chat .icon-video-chat:before {
    content: "\e821"
}

#chat .icon-video-chat-off:before {
    content: "\e822"
}

#chat .icon-video-file:before {
    content: "\e823"
}

#chat .image {
    max-width: 100%;
    border-radius: 5px
}

#chat .image-left {
    text-align: left
}

#chat .image-right {
    text-align: right
}

#chat .image-center {
    text-align: center
}

#chat .image-loader, #chat .image-loader:after {
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em
}

#chat .image-loader {
    margin: 1.25em auto;
    font-size: .625em;
    position: relative;
    text-indent: -9999em;
    border: 5px solid #92929e;
    border-left-color: #d9dbe4;
    transform: translateZ(0);
    -webkit-animation: load8 1.1s linear infinite;
    animation: load8 1.1s linear infinite
}

@-webkit-keyframes load8 {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes load8 {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

#chat .input-medium {
    height: 3.125em;
    padding: 1em 1.5em;
    line-height: 3.125em;
    font-size: .937em
}

#chat .form-wrapper .input.input-medium + .form-label {
    font-size: .937em;
    transform: translateY(14px)
}

#chat .form-wrapper .input.input-medium + .form-label.active {
    transform: translateY(-.625em)
}

#chat .lists {
    font-size: .812em
}

#chat .list-item {
    padding: 1em
}

#chat a.list-item, #chat button.list-item {
    background: 0 0;
    width: 100%;
    text-align: left;
    display: block;
    border: 0
}

#chat a.list-item:hover, #chat button.list-item:hover {
    cursor: pointer;
    color: var(--chat-header-background-color)
}

#chat .-list-header {
    font-weight: 600;
    font-size: .937em;
    color: #545454;
    margin-bottom: 0
}

#chat .list-item-medium, #chat .list-item-small, #chat .list-item-xsmall {
    padding: .5em
}

#chat .list-item-large {
    padding: 2.5em
}

#chat .loader {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    border-radius: 5px;
    background-color: #d9dbe4;
    cursor: default
}

#chat .loader-bar {
    width: 100%;
    height: 1.5em
}

#chat .loader-bar-xsmall {
    width: 100%;
    height: .5em
}

#chat .loader-bar-small {
    width: 100%;
    height: 1em
}

#chat .loader-bar-medium {
    width: 100%;
    height: 2em
}

#chat .loader-bar-large {
    width: 100%;
    height: 2.5em
}

#chat .loader-bar-xlarge {
    width: 100%;
    height: 3em
}

#chat .loader-icon {
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em
}

#chat .loader-icon-xsmall {
    border-radius: 50%;
    width: .5em;
    height: .5em
}

#chat .loader-icon-small {
    border-radius: 50%;
    width: 1em;
    height: 1em
}

#chat .loader-icon-medium {
    border-radius: 50%;
    width: 2em;
    height: 2em
}

#chat .loader-icon-large {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em
}

#chat .loader-icon-xlarge {
    border-radius: 50%;
    width: 3em;
    height: 3em
}

#chat .loader-avatar {
    border-radius: 10px;
    width: 3em;
    height: 3em
}

#chat .loader-avatar-xsmall {
    border-radius: 10px;
    width: 2em;
    height: 2em
}

#chat .loader-avatar-small {
    border-radius: 10px;
    width: 2.5em;
    height: 2.5em
}

#chat .loader-avatar-medium {
    border-radius: 10px;
    width: 3.5em;
    height: 3.5em
}

#chat .loader-avatar-large {
    border-radius: 10px;
    width: 4em;
    height: 4em
}

#chat .loader-avatar-xlarge {
    border-radius: 10px;
    width: 4.5em;
    height: 4.5em
}

#chat .loader-animation {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: forwards !important;
    animation-fill-mode: forwards !important;
    -webkit-animation-name: shimmerLeftToRight;
    animation-name: shimmerLeftToRight;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background: linear-gradient(90deg, #f7f7f9 8%, #d9dbe4 18%, #f7f7f9 33%);
    background-size: 62.5em 6.5em;
    position: relative;
    overflow: hidden
}

@-webkit-keyframes shimmerLeftToRight {
    0% {
        background-position: -29.25em 0
    }
    to {
        background-position: 29.25em 0
    }
}

@keyframes shimmerLeftToRight {
    0% {
        background-position: -29.25em 0
    }
    to {
        background-position: 29.25em 0
    }
}

body.rtl #chat .loader-animation {
    -webkit-animation-name: shimmerRightToLeft;
    animation-name: shimmerRightToLeft
}

@-webkit-keyframes shimmerRightToLeft {
    0% {
        background-position: 29.25em 0
    }
    to {
        background-position: -29.25em 0
    }
}

@keyframes shimmerRightToLeft {
    0% {
        background-position: 29.25em 0
    }
    to {
        background-position: -29.25em 0
    }
}

#chat .overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    left: 0;
    right: 0;
    top: 100%;
    height: 100%;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    transition: top .3s ease-in-out;
    overflow: hidden
}

#chat .overlay.open {
    top: 0
}

#chat .overlay .overlay-header {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    background-color: #03a84e;
    background-color: var(--chat-header-background-color);
    padding: 1em;
    z-index: 1051
}

#chat .overlay-header .overlay-header-left {
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden
}

#chat .overlay .overlay-header .overlay-header-right {
    margin-left: auto
}

#chat .overlay .overlay-body {
    -ms-flex: 1;
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box
}

#chat .overlay-title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .937em;
    line-height: 1.618;
    font-weight: 400;
    margin-left: .5em;
    color: #fff;
    color: var(--chat-header-text-color)
}

#chat .overlay-header .button {
    padding: 0;
    height: 1.875em;
    width: 2em;
    -ms-flex: none;
    flex: none;
    background-color: transparent;
    border: none;
    transition: background .15s ease-in-out
}

#chat .overlay-header .button:focus, #chat .overlay-header .button:hover {
    border: none;
    background-color: hsla(0, 0%, 100%, .2)
}

#chat .form-field-label {
    color: #545454;
    font: 600 .812em Lato
}

body.rtl #chat .form-field-label {
    text-align: right
}

#chat .radio-container {
    display: block;
    position: relative;
    padding-left: 1.5em;
    margin: 1em;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

body.rtl #chat .radio-container {
    padding-left: 0;
    padding-right: 2em;
    text-align: right
}

#chat .radio-container .radio {
    position: absolute;
    opacity: 0;
    cursor: pointer
}

#chat .radio-container .checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    border: 1px solid #d9dbe4;
    border-radius: 50%
}

body.rtl #chat .radio-container .checkmark {
    left: auto;
    right: 0
}

#chat .radio-container .radio ~ .checkmark {
    border: 1px solid #d9dbe4
}

#chat .radio-container:hover .radio ~ .checkmark {
    background-color: #f7f7f9
}

#chat .radio-container .radio[disabled] ~ .checkmark {
    background: #f7f7f9
}

#chat .radio-container .radio[disabled] {
    border-color: #d9dbe4
}

#chat .radio-container .radio:checked ~ .checkmark {
    background: #03a84e;
    background-color: var(--chat-header-background-color);
    border-color: #03a84e;
    border-color: var(--chat-header-background-color)
}

#chat .radio-container .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

#chat .radio-container .radio:checked ~ .checkmark:after {
    display: block
}

#chat .radio-container .checkmark:after {
    margin: auto;
    text-align: center;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    color: #fff;
    background: #fff;
    width: 8px;
    height: 8px
}

#chat .radio-container .form-label {
    color: #545454;
    font: 400 .812em Lato
}

#chat .radio-container .radio[disabled] ~ .form-label {
    color: #f7f7f9
}

#chat .rating {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 1.5em
}

#chat .rating-button {
    height: 5em;
    width: 5em;
    line-height: 0;
    background-color: #f7f7f9 !important;
    color: #545454 !important;
    border: 1px solid #f7f7f9 !important;
    margin: 0 8px !important
}

#chat .rating-button svg {
    width: 40px
}

#chat .rating-button.active, #chat .rating-button:hover {
    background-color: #f7f7f9 !important;
    border-color: #d9dbe4 !important
}

#chat .rating-button:disabled {
    background-color: #f7f7f9 !important;
    opacity: .7
}

#chat .input.search {
    height: 3em;
    position: relative;
    z-index: 2;
    line-height: 1em
}

#chat .input.search.search-left-padding {
    padding-left: 5.5em;
    text-align: right
}

#chat .input.search.search-right-padding {
    padding-right: 5.5em;
    text-align: left
}

#chat .input.search::-ms-clear {
    display: none
}

#chat .input.search, #chat .input.search:focus, #chat .input.search:hover {
    border: none
}

#chat .search::-webkit-input-placeholder {
    opacity: 1 !important
}

#chat .search::-moz-placeholder {
    opacity: 1 !important
}

#chat .search:-ms-input-placeholder {
    opacity: 1 !important
}

#chat .search::-ms-input-placeholder {
    opacity: 1 !important
}

#chat .search::placeholder {
    opacity: 1 !important
}

#chat .search-wrapper {
    background: #fff;
    position: relative;
    border-radius: 5px;
    z-index: 1;
    padding: .0625em
}

#chat .icon.search-icon {
    width: 1.875em;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1em
}

#chat .search-icon.search-icon-flip {
    right: auto;
    left: 0
}

#chat .search-icon:not(.search-icon-flip) + .search {
    padding-left: 1.875em
}

#chat .search-icon.search-icon-flip + .search {
    padding-right: 1.875em
}

#chat .search-icon.icon-close {
    cursor: pointer
}

#chat .search-dropdown {
    display: none;
    position: absolute;
    top: 3.5em;
    left: 0;
    right: 0;
    z-index: 9000;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .12);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 5px
}

#chat .search-dropdown.open {
    display: block
}

#chat .search-list {
    list-style-type: none;
    padding: 0;
    text-align: left
}

#chat .search-list > li {
    padding: .5em 1em;
    color: #545454
}

#chat .search-list > li:not(.search-list-title):hover {
    color: #545454;
    background-color: #f7f7f9;
    cursor: pointer
}

#chat .search-list-title-button {
    color: #545454;
    cursor: pointer
}

#chat .search-list > li.active {
    background-color: #f7f7f9
}

#chat .search-list-icon {
    fill: #92929e;
    width: 1em;
    height: 1em
}

#chat .search-list-title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

#chat .search-list-title .search-list-title-icon {
    margin-right: 1em
}

#chat .search-list-title .search-list-title-label {
    -ms-flex: 1;
    flex: 1;
    font-size: .937em
}

#chat .search-loader {
    width: 100%;
    box-sizing: border-box;
    padding: 1em
}

#chat .search-button {
    height: calc(100% - .125em);
    width: 3em;
    background: #03a84e !important;
    background: var(--chat-header-background-color) !important;
    color: #fff !important;
    color: var(--chat-header-text-color) !important;
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

#chat .search-button.search-left-button {
    right: auto;
    left: 1px;
    border-radius: 4px 0 0 4px
}

#chat .search-button.search-right-button {
    right: 1px;
    left: auto;
    border-radius: 0 4px 4px 0
}

#chat .search-button-close {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
    z-index: 2;
    height: 1.5625em !important;
    width: 1.5625em !important;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #d9dbe4 !important;
    color: #242424 !important;
    border: none !important
}

#chat .search-button-close .icon {
    font-size: .5em;
    margin: 0;
    padding: 0;
    height: 1.5625em;
    width: 1.5625em
}

#chat .search-button-close.search-left-button {
    right: auto;
    left: 3.5em
}

#chat .search-button-close.search-right-button {
    right: 3.5em;
    left: auto
}

#chat .input, #chat .select, #chat .textarea {
    box-sizing: border-box;
    margin: 0;
    border-radius: 5px;
    font-family: Lato, Open Sans, sans-serif !important;
    font-size: .812em;
    -webkit-appearance: none
}

body.rtl #chat .input, body.rtl #chat .select, body.rtl #chat .textarea {
    text-align: right
}

#chat .input::-moz-placeholder, #chat .textarea::-moz-placeholder {
    opacity: 1
}

#chat .input, #chat .select, #chat .textarea {
    max-width: 100%;
    width: 100%;
    border: 1px solid #d9dbe4;
    padding: .5em 1em;
    background: #fff;
    color: #545454
}

#chat .form-wrapper .input {
    z-index: 1
}

#chat .input, #chat .select:not([multiple]):not([size]) {
    height: 2.5em;
    vertical-align: middle;
    display: inline-block
}

#chat .input:focus, #chat .select:focus, #chat .textarea:focus {
    outline: none;
    background-color: #fff;
    border-color: #03a84e;
    border-color: var(--chat-header-background-color)
}

#chat .input:disabled, #chat .select:disabled, #chat .textarea:disabled {
    background-color: #fff;
    color: #f7f7f9;
    border-color: #f7f7f9
}

#chat .input::-webkit-input-placeholder, #chat .textarea::-webkit-input-placeholder {
    color: #545454
}

#chat .input::-moz-placeholder, #chat .textarea::-moz-placeholder {
    color: #545454
}

#chat .input:-ms-input-placeholder, #chat .textarea:-ms-input-placeholder {
    color: #545454
}

#chat .input::-ms-input-placeholder, #chat .textarea::-ms-input-placeholder {
    color: #545454
}

#chat .input::placeholder, #chat .textarea::placeholder {
    color: #545454
}

#chat .form-wrapper .input::-webkit-input-placeholder, #chat .form-wrapper .textarea::-webkit-input-placeholder {
    opacity: 0;
    -webkit-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

#chat .form-wrapper .input::-moz-placeholder, #chat .form-wrapper .textarea::-moz-placeholder {
    opacity: 0;
    -moz-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

#chat .form-wrapper .input:-ms-input-placeholder, #chat .form-wrapper .textarea:-ms-input-placeholder {
    opacity: 0;
    -ms-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

#chat .form-wrapper .input::-ms-input-placeholder, #chat .form-wrapper .textarea::-ms-input-placeholder {
    opacity: 0;
    -ms-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out
}

#chat .form-wrapper .input::placeholder, #chat .form-wrapper .textarea::placeholder {
    opacity: 0;
    transition: all .15s ease-in-out
}

#chat .form-wrapper .input:focus::-webkit-input-placeholder, #chat .form-wrapper .textarea:focus::-webkit-input-placeholder {
    opacity: 1
}

#chat .form-wrapper .input:focus::-moz-placeholder, #chat .form-wrapper .textarea:focus::-moz-placeholder {
    opacity: 1
}

#chat .form-wrapper .input:focus:-ms-input-placeholder, #chat .form-wrapper .textarea:focus:-ms-input-placeholder {
    opacity: 1
}

#chat .form-wrapper .input:focus::-ms-input-placeholder, #chat .form-wrapper .textarea:focus::-ms-input-placeholder {
    opacity: 1
}

#chat .form-wrapper .input:focus::placeholder, #chat .form-wrapper .textarea:focus::placeholder {
    opacity: 1
}

#chat .form-success, #chat .form-sucess:focus {
    color: #03a84e;
    border-color: #03a84e
}

#chat .form-danger, #chat .form-danger:focus {
    color: #bf1212;
    border-color: #bf1212
}

#chat .form-wrapper {
    position: relative
}

#chat .form-label {
    display: block;
    font-size: .812em;
    color: #545454;
    line-height: normal
}

#chat .form-wrapper .form-label {
    margin-left: .5em
}

body.rtl #chat .form-wrapper .form-label {
    margin-right: .5em;
    margin-left: 0
}

#chat .form-wrapper .input + .form-label, #chat .form-wrapper .textarea + .form-label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform-origin: 0 100%;
    transform: translateY(.7em);
    color: #545454;
    background-color: transparent;
    padding: 0 .5em;
    transition: all .3s ease-in-out
}

#chat .form-wrapper .input + .form-label.form-label-custom-style, #chat .form-wrapper .textarea + .form-label.form-label-custom-style {
    transform: translateY(1em)
}

body.rtl #chat .form-wrapper .input + .form-label, body.rtl #chat .form-wrapper .textarea + .form-label {
    right: 0;
    left: auto
}

#chat .form-wrapper .input + .form-label.active, #chat .form-wrapper .textarea + .form-label.active {
    transform: translateY(-10px) scale(.9);
    background-color: #fff
}

#chat .form-label.active, #chat .form-wrapper .input:focus + .form-label, #chat .form-wrapper .textarea:focus + .form-label {
    color: #03a84e;
    color: var(--chat-header-background-color)
}

#chat .textarea {
    font: 400 .812em Lato;
    width: 100%;
    border-radius: 5px;
    resize: none;
    height: 5em
}

#chat .timeago {
    font: 400 1.15em Lato;
    color: #92929e
}

#chat .video-iframe-container {
    width: 100%;
    padding-top: 56.25%;
    position: relative
}

#chat .video-iframe {
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#chat .tooltip {
    opacity: 1;
}

#chat .tooltip:hover .tooltip-hover {
    opacity: 1;
    transition: opacity .5s linear .5s
}

#chat .tooltip .tooltip-hover {
    position: fixed;
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 5px;
    background: #545454;
    color: #fff;
    text-align: center;
    font-size: .75em;
    right: 0;
    left: auto;
    opacity: 0;
    transition: opacity 0s linear;
    z-index: 2
}

#chat .tooltip .tooltip-hover .tooltip-arrow {
    top: -16px;
    display: block;
    left: 50%;
    border: 8px solid transparent;
    border-bottom-color: #545454;
    position: absolute
}

#chat .tooltip .tooltip-hover.bottom .tooltip-arrow {
    border-color: #545454 transparent transparent;
    bottom: -16px;
    top: auto
}

#chat .ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto
}

#chat .ps__rail-x {
    height: 15px;
    bottom: 0
}

#chat .ps__rail-x, #chat .ps__rail-y {
    display: none;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    position: absolute
}

#chat .ps__rail-y {
    width: 15px;
    right: 0
}

#chat .ps--active-x > .ps__rail-x, #chat .ps--active-y > .ps__rail-y {
    display: block;
    background-color: transparent
}

#chat .ps--focus > .ps__rail-x, #chat .ps--focus > .ps__rail-y, #chat .ps--scrolling-x > .ps__rail-x, #chat .ps--scrolling-y > .ps__rail-y, #chat .ps:hover > .ps__rail-x, #chat .ps:hover > .ps__rail-y {
    opacity: .6
}

#chat .ps .ps__rail-x.ps--clicking, #chat .ps .ps__rail-x:focus, #chat .ps .ps__rail-x:hover, #chat .ps .ps__rail-y.ps--clicking, #chat .ps .ps__rail-y:focus, #chat .ps .ps__rail-y:hover {
    background-color: #eee;
    opacity: .9
}

#chat .ps__thumb-x {
    transition: background-color .2s linear, height .2s ease-in-out;
    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
    height: 6px;
    bottom: 2px
}

#chat .ps__thumb-x,#chat .ps__thumb-y {
    background-color: #aaa;
    border-radius: 6px;
    position: absolute
}

#chat .ps__thumb-y {
    transition: background-color .2s linear, width .2s ease-in-out;
    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
    width: 6px;
    right: 2px
}

#chat .ps__rail-x.ps--clicking .ps__thumb-x, #chat .ps__rail-x:focus > .ps__thumb-x, #chat .ps__rail-x:hover > .ps__thumb-x {
    background-color: #999;
    height: 11px
}

#chat .ps__rail-y.ps--clicking .ps__thumb-y, #chat .ps__rail-y:focus > .ps__thumb-y, #chat .ps__rail-y:hover > .ps__thumb-y {
    background-color: #999;
    width: 11px
}

@supports (-ms-overflow-style:none) {
    #chat .ps {
        overflow: auto !important
    }
}

@media (-ms-high-contrast: none), screen and (-ms-high-contrast: active) {
    #chat .ps {
        overflow: auto !important
    }
}

#chat .ps__rail-y {
    left: auto !important;
    right: 0 !important;
    z-index: 2;
    background: 0 0 !important;
    opacity: 1 !important
}

#chat .ps__rail-y .ps__thumb-y {
    width: 5px !important;
    background: #92929e !important
}

body.rtl #chat .ps__rail-y {
    left: 0 !important;
    right: auto !important;
    width: 5px !important
}

body.rtl #chat .ps__rail-y .ps__thumb-y {
    left: 2px !important;
    right: auto !important
}

#chat abbr, #chat address, #chat article, #chat aside, #chat audio, #chat b, #chat blockquote, #chat canvas, #chat caption, #chat cite, #chat code, #chat dd, #chat del, #chat details, #chat dfn, #chat dl, #chat dt, #chat em, #chat fieldset, #chat figcaption, #chat figure, #chat header, #chat hgroup, #chat html, #chat ins, #chat kbd, #chat legend, #chat mark, #chat menu, #chat object, #chat ol, #chat pre, #chat q, #chat samp, #chat section, #chat small, #chat sub, #chat summary, #chat sup, #chat time, #chat var, #chat video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: 0 0;
    word-break: break-word
}

body.font-lato #chat {
    font-family: Lato, Open Sans, sans-serif !important;
}

body.rtl #chat {
    direction: rtl;
    overflow: hidden
}

@media (min-width: 768px) and (max-width: 1024px) {
    body.mobile #chat , html.mobile #chat  {
        font-size: 22px !important
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    body.mobile #chat , html.mobile #chat {
        font-size: 18px !important
    }
}

@media (max-width: 480px) {
    body.mobile #chat , html.mobile #chat {
        font-size: 18px !important
    }
}

#chat * {
    /* font-family: inherit; */
}

#chat blockquote, #chat q {
    quotes: none
}

#chat blockquote:after, #chat blockquote:before, #chat q:after, #chat q:before {
    content: "";
    content: none
}

#chat ins {
    text-decoration: none
}

#chat ins, #chat mark {
    background-color: #ff9;
    color: #000
}

#chat mark {
    font-style: italic;
    font-weight: 700
}

#chat del {
    text-decoration: line-through
}

#chat abbr[title], #chat dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

#chat input, #chat select {
    color: #000;
    vertical-align: middle
}

body.font-lato #chat , html.font-lato #chat {
    font: 400 16px Lato, sans-serif !important
}

#chat .clear {
    clear: both
}

#chat .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    height: 0
}

#chat .clearfix {
    display: inline-block
}

* html #chat .clearfix {
    height: 1%
}

#chat .clearfix {
    display: block
}

#chat .icon {
    font-family: icon !important
}

#chat .call {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    text-align: center;
    padding: 60px 20px;
    border: 1px solid #f7f7f9;
    border-radius: 5px
}

#chat .call-header {
    -ms-flex: 2;
    flex: 2
}

#chat .call-footer {
    -ms-flex: 1;
    flex: 1
}

#chat .call-accept {
    width: 100%
}

#chat .call-decline {
    width: 80%
}

#chat .max-container {
    position: relative;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    border: 1px solid #e9e9e9;
    max-height: 360px;
}

#chat .max-container.no-toolbar-elements .slide-fade-leave-active .chat-panel:before {
    visibility: hidden;
}

#chat .max-container.no-toolbar-elements .main-panel .chat-panel:before {
    content: " ";
    position: fixed;
    top: 1em;
    left: 1px;
    right: 1px;
    height: calc(29px + 1em);
    background-color: var(--chat-header-background-color);
    width: auto
}

#chat .toolbar {
    z-index: 3;
    margin-top: -1px
}

#chat .no-toolbar-elements .toolbar {
    padding: .5em
}

#chat .toolbar .toolbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden
}

#chat .toolbar .route-back {
    overflow: hidden
}

#chat .route-back .toolbar-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

#chat .toolbar .button-hover {
    position: relative;
    overflow: visible;
    height: 1.875em;
    width: 2em
}

#chat .toolbar .button-text:focus {
    color: var(--chat-header-text-color)
}

body.mobile #chat .toolbar .button-hover {
    margin: 0 .2em 0 0
}

#chat .button-hover, #chat .button-submitting {
    position: relative
}

#chat .button-hover:focus:before, #chat .button-hover:hover:before, #chat .button-submitting:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(247, 247, 249, .2);
    border-radius: 5px
}

#chat .overlay .toolbar {
    z-index: auto !important;
    margin-top: 0 !important;
    padding: 0 !important
}

#chat .toolbar-agent-avatars {
    margin-left: .5em;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden
}

#chat .toolbar-agent-avatars .avatar {
    height: 1.875em;
    width: 1.875em;
    line-height: 1.725em;
    font-size: .8em
}

#chat .toolbar-agent-avatars > .avatar:not(:first-child) {
    margin-left: -15px
}

#chat .toolbar-agent-avatars .toolbar-agent-details {
    margin-left: .5em;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden
}

#chat .toolbar-agent-details .toolbar-agent-name {
    font-size: .87em
}

#chat .toolbar-agent-details .toolbar-agent-title {
    font-size: .75em
}

#chat .header-text, #chat .header-text:hover {
    color: var(--chat-header-text-color);
    font-size: 12px;
}

#chat .toolbar-menu .header-text:focus {
    color: #fff
}

#chat .toolbar-menu .dropdown-menu {
    top: 2.1875em;
    border-radius: 5px;
    padding: .5em 0;
    width: calc(100vw - 3.125em);
    max-width: 60vw
}

#chat .toolbar-menu .dropdown-menu:after, #chat .toolbar-menu .dropdown-menu:before {
    content: "";
    position: absolute;
    bottom: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-bottom-color: #fff
}

#chat .toolbar-menu .dropdown-menu.dropdown-menu-right:after, #chat .toolbar-menu .dropdown-menu.dropdown-menu-right:before {
    right: .5625em
}

#chat .toolbar-menu .dropdown-menu.dropdown-menu-left:after, #chat .toolbar-menu .dropdown-menu.dropdown-menu-left:before {
    left: .5625em
}

#chat .toolbar-menu .dropdown-menu .button {
    display: block;
    width: 100%;
    margin: 0;
    color: #545454;
    border-radius: 0;
    padding: .5em 1em
}

#chat .toolbar-menu .dropdown-menu .button:focus, #chat .toolbar-menu .dropdown-menu .button:hover {
    background-color: #f6f6f6
}

#chat .toolbar-menu .dropdown-menu .button:focus {
    outline: 0
}

#chat .cancel-button {
    background-color: #d9dbe4 !important;
    color: #545454 !important;
    border-color: #d9dbe4 !important
}

#chat #dragover-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 1.125em;
    color: #545454;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: 5px
}

#chat #chatinput-container {
    padding: .75em 1em;
}

#chat .router-view {
    position: relative;
    height: 1px;
    background-color: #fff
}

#chat .form-error-alert {
    position: absolute;
    top: 0;
    z-index: 2
}

#chat .footer_c {
    border-top: 1px solid #cccccc;
    padding: 0;
    z-index: 3
}

#chat .search-button {
    color: #92929e
}

#chat .search-button:focus, #chat .search-button:hover {
    color: #545454
}

#chat .missed-chat-icon {
    height: 3em;
    width: 3em;
    text-align: center;
    line-height: 3em
}

#chat .spinner-loader, #chat .spinner-loader:after {
    border-radius: 50%;
    height: 1.25em;
    width: 1.25em
}

#chat .spinner-loader {
    position: relative;
    margin: 1.25em auto;
    border: .3125em solid #92929e;
    border-left-color: #d9dbe4;
    font-size: .625em;
    text-indent: -9999em;
    transform: translateZ(0);
    -webkit-animation: spinner 1.1s linear infinite;
    animation: spinner 1.1s linear infinite
}

@-webkit-keyframes spinner {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

body.mobile #chat .tooltip-hover,  body.mobile #chat .tooltip:hover .tooltip-hover {
    display: none !important
}

#chat .max-end-chat {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    height: auto;
    width: auto;
    z-index: 1060
}

#chat .max-footer-actions {
    padding: 1em;
    text-align: center
}

#chat .max-footer-actions .max-footer-actions-button {
    width: 100%
}

#chat .agent-list-view .chat-panel {
    height: 100%;
    background-color: #fff
}

#chat .agent-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    color: var(--chat-header-text-color);
    background-color: var(--chat-header-background-color);
    padding: 20px 30px;
    box-sizing: border-box
}

#chat .agent-header .button-text {
    color: var(--var-header-text-color)
}

#chat .agent-header .agent-header-title {
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

#chat .agent-header .agent-header-title > * {
    color: var(--chat-header-text-color)
}

#chat .agent-body {
    padding: 20px 15px
}

#chat .agent-body .text-regular-4 {
    line-height: normal
}

#chat .list.agent-list {
    box-shadow: none;
    border: none;
    border-radius: initial
}

#chat .chat-view .chat-panel {
    background-color: #fff !important
}

#chat .main-panel .chat-panel {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    background-color: #f7f7f9;
    height: 300px;
}

#chat .chat-view .new-messages-notification {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translate(-50%);
    z-index: 2;
    background-color: #545454;
    color: #fff;
    border-color: #545454
}

#chat .chat-view .chat-panel-inner {
    height: 100%
}

#chat .chat-view .header {
    padding-bottom: 15px;
    margin-left: -16px !important;
    margin-right: -16px !important
}

#chat .agentTypingIndicator {
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

#chat .agentTypingIndicator .dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 3px;
    background: #303131;
    -webkit-animation: typing 1.3s linear infinite;
    animation: typing 1.3s linear infinite
}

#chat .agentTypingIndicator .dot:nth-child(2) {
    animation-delay: -1.1s;
    -webkit-animation-delay: -1.1s;
    -moz-animation-delay: -1.1s;
    -ms-animation-delay: -1.1s;
    -o-animation-delay: -1.1s
}

#chat .agentTypingIndicator .dot:nth-child(3) {
    animation-delay: -.9s;
    -webkit-animation-delay: -.9s;
    -moz-animation-delay: -.9s;
    -ms-animation-delay: -.9s;
    -o-animation-delay: -.9s
}

@keyframes typing {
    0%, 60%, to {
        transform: none
    }
    30% {
        transform: translateY(-10px)
    }
}

@-webkit-keyframes typing {
    0%, 60%, to {
        transform: none
    }
    30% {
        transform: translateY(-10px)
    }
}

#chat .chat-message-container {
    width: 100%;
    box-sizing: border-box
}

#chat .message-profile {
    border: none
}

#chat .message-body {
    width: calc(100% - 40px);
    box-sizing: border-box;
    max-width: 100%
}

#chat .agent-chat, #chat .visitor-chat {
    position: relative;
    max-width: calc(100% - 16px);
    word-break: break-word;
}

#chat .message-bubble + .message-bubble {
    margin-top: 8px
}

#chat .message-bubble:last-child .agent-chat, #chat .message-bubble:last-child .visitor-chat {
    margin-bottom: 0
}

#chat .agent-chat {
    float: left;
    position: relative;
    margin: 0 16px 0 0
}

.rtl #chat .agent-chat {
    float: right;
    margin: 0 8px 0 0
}

#chat .visitor-chat {
    float: right;
    margin: 0 0 8px 16px;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.rtl #chat .visitor-chat {
    float: left;
    margin: 0 0 4px 8px
}

#chat .agent-chat .time-display, #chat .visitor-chat .time-display {
    display: block;
    margin-bottom: 4px;
    visibility: visible;
    font-size: 10px;
    color: #999;
    opacity: 0.8
}

#chat .visitor-chat .time-display {
    float: right
}

#chat .clearfix:after {
    content: "";
    display: table;
    clear: both
}

#chat .lds-spinner {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    position: absolute;
    left: 0;
    transform: scale(.3);
    top: 50%;
    transform: translateY(-50%) scale(.3);
    margin-right: -10px
}

#chat .lds-spinner.lds-spinner-left {
    left: auto;
    right: 100%
}

#chat .lds-spinner .spin {
    transform-origin: 32px 32px;
    -webkit-animation: lds-spinner 1.2s linear infinite;
    animation: lds-spinner 1.2s linear infinite
}

#chat .lds-spinner .spin:after {
    content: " ";
    display: block;
    position: absolute;
    top: 3px;
    left: 29px;
    width: 5px;
    height: 14px;
    border-radius: 20%;
    background: rgba(0, 0, 0, .4)
}

#chat .lds-spinner .spin-1 {
    transform: rotate(0deg);
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

#chat .lds-spinner .spin-2 {
    transform: rotate(30deg);
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

#chat .lds-spinner .spin-3 {
    transform: rotate(60deg);
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}

#chat .lds-spinner .spin-4 {
    transform: rotate(90deg);
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

#chat .lds-spinner .spin-5 {
    transform: rotate(120deg);
    -webkit-animation-delay: -.7s;
    animation-delay: -.7s
}

#chat .lds-spinner .spin-6 {
    transform: rotate(150deg);
    -webkit-animation-delay: -.6s;
    animation-delay: -.6s
}

#chat .lds-spinner .spin-7 {
    transform: rotate(180deg);
    -webkit-animation-delay: -.5s;
    animation-delay: -.5s
}

#chat .lds-spinner .spin-8 {
    transform: rotate(210deg);
    -webkit-animation-delay: -.4s;
    animation-delay: -.4s
}

#chat .lds-spinner .spin-9 {
    transform: rotate(240deg);
    -webkit-animation-delay: -.3s;
    animation-delay: -.3s
}

#chat .lds-spinner .spin-10 {
    transform: rotate(270deg);
    -webkit-animation-delay: -.2s;
    animation-delay: -.2s
}

#chat .lds-spinner .spin-11 {
    transform: rotate(300deg);
    -webkit-animation-delay: -.1s;
    animation-delay: -.1s
}

#chat .lds-spinner .spin-12 {
    transform: rotate(330deg);
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

@-webkit-keyframes lds-spinner {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes lds-spinner {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

#chat .agent-bar {
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 5px
}

#chat .agent-bar.single-agent {
    max-width: 100%
}

#chat .chat-view .agent-chat-bubble.card, #chat .chat-view .visitor-chat-bubble {
    padding: 8px !important;
    min-height: 40px
}

#chat .chat-resend {
    width: 100%;
    margin-bottom: 16px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end
}

body.rtl #chat .chat-resend {
    -ms-flex-pack: start;
    justify-content: flex-start
}

#chat .chat-resend * {
    color: #bf1212 !important
}

#chat .chat-resend .button-text {
    text-decoration: underline;
    margin-left: 8px
}

#chat .file-upload-progress .progress {
    height: 10px;
    width: 200px;
    background-color: #f7f7f9;
    border-radius: 5px;
    box-shadow: none
}

#chat .file-upload-progress .progress-bar {
    height: 10px;
    background-color: #03a84e;
    border-radius: 5px;
    box-shadow: none
}

#chat .chat-view .emojione {
    height: 3.2ex;
    min-width: auto;
    min-height: auto;
    vertical-align: text-bottom
}

#chat .chat-view .emojionly .emojione {
    height: 4.5ex !important;
    width: auto
}

#chat .chat-view .link {
    color: inherit;
    text-decoration: underline
}

#chat .chat-rating {
    font-weight: 600
}

#chat .chat-rating .icon.icon-thumbs-up {
    color: #03a84e
}

#chat .chat-rating .icon.icon-thumbs-down {
    color: #bf1212
}

#chat .message-block .message-group {
    width: calc(100% - 40px)
}

#chat .message-bubble .agent-chat-bubble {
    border-radius: 0 5px 5px 0
}

.rtl #chat .message-bubble .agent-chat-bubble {
    border-radius: 5px 0 0 5px
}

#chat .message-bubble:last-child .agent-chat-bubble {
    border-radius: 0 5px 5px 5px
}

.rtl #chat .message-bubble:last-child .agent-chat-bubble {
    border-radius: 5px 0 5px 5px
}

#chat .message-bubble:first-child .agent-chat-bubble {
    font-size: 12px;
    border-radius: 5px 5px 5px 0
}

.rtl #chat .message-bubble:first-child .agent-chat-bubble {
    border-radius: 5px 5px 0 5px
}

#chat .message-bubble .visitor-chat-bubble {
    border-radius: 5px 0 0 5px
}

.rtl #chat .message-bubble .visitor-chat-bubble {
    border-radius: 0 5px 5px 0
}

#chat .message-bubble:last-child .visitor-chat-bubble {
    border-radius: 5px 0 5px 5px
}

.rtl #chat .message-bubble:last-child .visitor-chat-bubble {
    border-radius: 0 5px 5px 5px
}

#chat .message-bubble:first-child .visitor-chat-bubble {
    font-size: 12px;
    border-radius: 5px 5px 0 5px
}

.rtl #chat .message-bubble:first-child .visitor-chat-bubble {
    border-radius: 5px 5px 5px 0
}

#chat .list-enter-active, #chat .list-leave-active {
    transition: all .5s cubic-bezier(1, .5, .8, 1)
}

#chat .list-enter, #chat .list-leave-to {
    transform: translateY(5px);
    opacity: 0
}

body.mobile #chat .agent-chat .time-display, body.mobile #chat .visitor-chat .time-display {
    visibility: visible
}

#chat .form-view {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%
}

#chat .form-input {
    border: 1px solid #d9dbe4;
    border-left: 5px solid var(--chat-header-background-color) !important
}

#chat .form-width-100 {
    width: 100%
}

#chat .form-wrapper {
    z-index: 0
}

#chat .form-input .dropdown {
    width: 100%;
    z-index: 1
}

#chat .form-input .dropdown > .button {
    position: relative;
    height: 2.5em;
    width: 100%;
    color: #545454;
    font-size: .812em;
    border-color: #d9dbe4;
    background-color: #fff;
    text-align: left;
    z-index: 1;
    overflow: visible
}

#chat .form-input .dropdown > .button:focus {
    border-color: #03a84e;
    border-color: var(--chat-header-background-color)
}

#chat .form-input .dropdown .dropdown-menu {
    width: 100%;
    max-width: 100%;
    padding: 0;
    border-radius: 5px;
    border: 5px;
    overflow: hidden !important
}

#chat .form-input .dropdown .dropdown-menu.slide-fade-enter, #chat .form-input .dropdown .dropdown-menu.slide-fade-leave-to {
    transform: translateY(-10px) !important
}

#chat .form-input .dropdown .dropdown-menu .dropdown-container {
    max-height: 100px;
    position: relative;
    overflow: auto
}

#chat .form-input .dropdown .dropdown-menu .lists {
    max-height: 100px;
    border: 0;
    box-shadow: none;
    overflow-y: auto
}

#chat .form-input .dropdown .dropdown-menu .lists .list-item {
    padding: 8px
}

#chat .form-input .dropdown .dropdown-menu .lists .list-item:hover {
    background-color: #f7f7f9;
    color: var(--chat-header-text-color)
}

#chat .form-input .dropdown .dropdown-menu .lists .list-item .button {
    width: 100%;
    text-align: left;
    color: #545454;
    font-size: .812em
}

#chat .form-footer .button {
    -ms-flex: 0 0 46%;
    flex: 0 0 46%;
    max-width: 46%
}

#chat .form-footer .button.width-100 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
}

#chat .form-footer .button .spinner-loader {
    margin: 0 5px;
    border: .125em solid #92929e;
    border-left-color: #d9dbe4
}

#chat .form-input .dropdown > .form-danger {
    color: #bf1212;
    border-color: #bf1212
}

#chat .dropdown-container .form-label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: all .3s ease-in-out;
    transform: translateY(10px);
    transform-origin: 0 100%;
    background-color: #fff;
    padding: 0 .5em;
    color: inherit;
    line-height: normal
}

.rtl #chat .dropdown-container .form-label {
    right: 0;
    left: auto
}

#chat .dropdown-container .form-label.active {
    transform: translateY(-10px) scale(.9)
}

#chat .form-footer .button {
    width: 100%;
    position: relative
}

#chat .form-submitting-container {
    position: absolute;
    top: -20px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    margin-top: -20px;
    padding: 0 15px;
    overflow: hidden
}

#chat .form-submitting-container.slide-fade-up-enter, #chat .form-submitting-container.slide-fade-up-leave-to, #chat .form-submitting-container .form-submitting-inner {
    overflow: hidden;
    transform: translateY(10px);
    opacity: 0
}

#chat .form-submitting-container .form-submitting-inner {
    position: relative;
    right: 0;
    bottom: 0;
    background-color: #545454;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    margin-left: auto;
    transition: all .3s cubic-bezier(1, .5, .8, 1)
}

#chat .form-submitting-container .form-submitting-inner .spinner-loader {
    height: 10px;
    width: 10px;
    margin: 0 auto;
    border: 1px solid #92929e;
    border-bottom-color: #d9dbe4
}

#chat .history-item {
    border-radius: 5px;
    cursor: pointer
}

#chat .history-item:hover {
    background-color: #f7f7f9
}

#chat .chat-view .avatar-loader {
    height: 40px;
    width: 40px
}

#chat .chat-view .avatar-name-loader {
    height: 15px;
    width: 120px
}

#chat .chat-view .chat-message-loader {
    height: 40px;
    width: 200px
}

#chat .history-item .emojione {
    min-width: auto;
    min-height: auto;
    height: 2.5ex;
    vertical-align: text-bottom
}

#chat .button-retry {
    width: 100%
}

#chat .chat-view .history-timestamp {
    margin-top: 1.5em;
    text-align: center;
    width: 100%
}

#chat .history-timestamp * {
    font-size: .937em !important;
    line-height: 1.618 !important;
    font-weight: 400 !important;
    color: #92929e !important
}

#chat .main-panel {
    position: relative;
    top: 0;
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    box-sizing: border-box;
    height: auto;
    width: 100%;
    padding: 0;
    background-color: #fff;
    color: #92929e
}

#chat .main-panel .chat-panel .chat-panel-inner {
    position: relative;
    box-sizing: border-box;
    padding: 0 16px 15px
}

#chat .main-panel .header {
    position: relative;
    z-index: 2;
    margin-left: -16px;
    margin-right: -16px;
    padding-top: 1px;
    padding-bottom: 0;
    border-radius: 0
}

.chat-container {
    position: relative; /* This container will act as a reference point for absolute positioning */
}

#chat-enable {
    z-index: 100061;
}

.we-are-here {
    position: fixed;
    bottom: 100px;
    right: -20px;
    transform: translateX(-50%);
    z-index: 100062;
}

#flash-image {
    display: none;
    transition: opacity 0.2s ease, filter 0.2s ease; /* Smooth transition for both opacity and filter */
}

.flash-effect {
    opacity: 0; /* Makes the image completely transparent */
    filter: brightness(200%); /* Makes the image appear white */
}

#chat .main-panel .header .search-wrapper {
    margin: 10px 0
}

#chat .body {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: auto;
    z-index: 1
}

#chat .card-container > div {
    margin-bottom: 8px
}

#chat .card-container:last-child {
    margin-bottom: 0
}

#chat .card-container:first-child:before {
    content: " ";
    position: absolute;
    top: -1px;
    left: -16px;
    right: -16px;
    height: 25px;
    z-index: -1;
    background-color: var(--chat-header-background-color)
}

#chat .card-container .card, #chat .card-container .kb-search {
    border: 1px solid #d9dbe4
}

#chat .card-container .kb-search {
    z-index: 2;
    position: relative
}

#chat .card--logo, #chat .header-card {
    margin: 10px 0;
}

#chat .card--logo .image {
    height: 3.75em;
    width: 3.75em
}

#chat .card--heading {
    font-size: 33px;
    font-weight: 700
}

#chat .card--heading .emojione {
    width: calc(2em + 2px);
    height: calc(2em + 2px);
    vertical-align: text-bottom
}

#chat .card--chat .button {
    width: 100%
}

#chat .card--agents .avatar {
    margin: 0 3px
}

#chat .card--video iframe, #chat .card--video video {
    width: 100%;
    border-radius: 5px
}

#chat .card--heading .link, #chat .card--text .link {
    color: inherit;
    text-decoration: underline;
    outline: 0
}

#chat .card--text .emojione {
    width: calc(1em + 2px);
    height: calc(1em + 2px);
    vertical-align: text-bottom
}

#chat .card--form.submitting form {
    opacity: .6
}

#chat .card--kb-featured-article .featured-article-content:active, #chat .card--kb-featured-article .featured-article-content:focus, #chat .card--kb-featured-article .featured-article-content:hover {
    cursor: pointer;
    text-decoration: none;
    background: #f7f7f9;
    border-radius: 5px
}

#chat .card--kb-featured-article .loader-avatar {
    width: 100%;
    height: 8em
}

#chat .card-container .button-cta {
    background-color: #fff;
    color: #545454;
    border-color: #545454
}

#chat .card-container .button-cta:focus, #chat .card-container .button-cta:hover {
    background: #f7f7f9
}

#chat .home-kb-list {
    box-shadow: none;
    border: none
}

#chat .home-kb-list .featured-article {
    border-radius: 5px
}

#chat .home-kb-list .featured-article:focus, #chat .home-kb-list .featured-article:hover {
    cursor: pointer;
    background-color: #f7f7f9
}

#chat .home-list.home-list-chat > li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    padding: .5em
}

#chat .home-list.home-list-chat > li .home-list-chat-content {
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

#chat .home-list.home-list-chat > li .emojione {
    min-width: auto;
    min-height: auto;
    height: 2.5ex;
    vertical-align: text-bottom
}

#chat .home-list.home-list-hover > li {
    border-radius: 5px
}

#chat .home-list.home-list-hover > li:focus, #chat .home-list.home-list-hover > li:hover {
    cursor: pointer;
    background: #f7f7f9
}

#chat .home-kb-card {
    border: 1px solid #f7f7f9;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
    border-radius: 5px
}

#chat .home-conversation-active-button {
    padding: .3em;
    margin-top: .5em
}

#chat .home-conversation-active-button > .icon {
    font-size: 1em
}

#chat .card--alignment-left {
    text-align: left !important
}

#chat .card--alignment-right {
    text-align: right !important
}

#chat .card--flex-left {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important
}

#chat .card--flex-right {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important
}

#chat .card--flex-center {
    -ms-flex-pack: center !important;
    justify-content: center !important
}

#chat .kb-body {
    padding: 15px 0 0;
    width: 100%
}

#chat .kb-body .chat-panel {
    background: #fff !important
}

#chat .kb-table {
    border-collapse: collapse;
    width: 100%
}

#chat .kb-table td, #chat .kb-table th {
    border: 1px solid #eee;
    padding: 10px
}

#chat .CodeMirror {
    font-family: monospace;
    border: 1px solid #eee;
    border-radius: 5px
}

#chat .CodeMirror, #chat .CodeMirror-scroll {
    height: auto !important
}

#chat .kb-body ol, #chat .kb-body ul {
    margin: 0 25px
}

#chat .kb-body ol li, #chat .kb-body ul li {
    padding: 2px
}

#chat .kb-body blockquote {
    display: block;
    position: relative;
    margin: 0 0 20px;
    border: 1px solid #eee;
    border-left: 10px solid #9c9aa6;
    border-radius: 5px;
    padding: 10px 20px 10px 40px;
    background-color: #fff;
    font-style: normal
}

#chat .kb-body blockquote:before {
    content: "\201C";
    position: absolute;
    left: 10px;
    top: -5px;
    color: #9c9aa6;
    font-family: Georgia, serif;
    font-size: 40px;
    font-weight: 700
}

#chat .kb-body a {
    color: inherit;
    text-decoration: underline
}

#chat .code-textarea {
    width: 100%;
    height: 80px;
    resize: none;
    border: 1px solid #eee
}

#chat .kba-card {
    width: 100%;
    cursor: pointer
}

#chat .kba-card .kb-item {
    border-radius: 5px
}

#chat .kba-card:focus .kb-item, #chat .kba-card:hover .kb-item {
    background-color: #f7f7f9
}

#chat .kba-list {
    width: 100%;
    border: none;
    box-shadow: none
}

#chat .slide-fade-enter-active {
    transition: all .2s ease
}

#chat .slide-fade-leave-active {
    transition: all .1s cubic-bezier(1, .5, .8, 1);
    position: absolute
}

#chat .slide-fade-enter, #chat .slide-fade-leave-to {
    transform: translateY(-10px);
    opacity: 0
}

#chat .fade-enter-active, #chat .fade-leave-active {
    transition: opacity .5s
}

#chat .fade-enter, #chat .fade-leave-to {
    opacity: 0
}

#chat .fadeIn {
    opacity: 1;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

#chat .spinner {
    display: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 4px solid #44ddf8;
    animation: spinner-bulqg1 0.8s infinite linear alternate,
    spinner-oaa3wk 1.6s infinite linear;
    float: right;
}

@keyframes spinner-bulqg1 {
    0% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
    }

    12.5% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    }

    62.5% {
        clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
    }

    75% {
        clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
    }
}

@keyframes spinner-oaa3wk {
    0% {
        transform: scaleY(1) rotate(0deg);
    }

    49.99% {
        transform: scaleY(1) rotate(135deg);
    }

    50% {
        transform: scaleY(-1) rotate(0deg);
    }

    100% {
        transform: scaleY(-1) rotate(-135deg);
    }
}

#chat .message-body .error-row-chat {
    background: #ff8888;
}

#chat .file-input {
    display: none !important;
}

#chat .ekko-lightbox {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    justify-content: center;
    padding-right: 0 !important;
    z-index: 1090;
}

#chat .ekko-lightbox-container {
    position: relative
}

#chat .ekko-lightbox-container > div.ekko-lightbox-item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%
}

#chat .ekko-lightbox-container img {
    cursor: pointer
}

#chat .ekko-lightbox iframe {
    width: 100%;
    height: 100%
}

#chat .ekko-lightbox-nav-overlay {
    z-index: 1090;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex
}

#chat .ekko-lightbox-nav-overlay a {
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
    transition: opacity .5s;
    color: #fff;
    font-size: 30px;
    z-index: 1090
}

#chat .ekko-lightbox-nav-overlay a > * {
    -ms-flex-positive: 1;
    flex-grow: 1
}

#chat .ekko-lightbox-nav-overlay a > :focus {
    outline: none
}

#chat .ekko-lightbox-nav-overlay a span {
    padding: 0 30px
}

#chat .ekko-lightbox-nav-overlay a:last-child span {
    text-align: right
}

#chat .ekko-lightbox-nav-overlay a:hover {
    text-decoration: none
}

#chat .ekko-lightbox-nav-overlay a:focus {
    outline: none
}

#chat .ekko-lightbox-nav-overlay a.disabled {
    cursor: default;
    visibility: hidden
}

#chat .ekko-lightbox a:hover {
    opacity: 1;
    text-decoration: none
}

#chat .ekko-lightbox .modal-dialog {
    display: none
}

#chat .ekko-lightbox .modal-footer {
    text-align: left
}

#chat .ekko-lightbox-loader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

#chat .ekko-lightbox-loader > div {
    width: 40px;
    height: 40px;
    position: relative;
    text-align: center
}

#chat .ekko-lightbox-loader > div > div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    animation: a 2s infinite ease-in-out
}

#chat .ekko-lightbox-loader > div > div:last-child {
    animation-delay: -1s
}

#chat .modal-dialog .ekko-lightbox-loader > div > div {
    background-color: #333
}

@keyframes a {
    0%, to {
        transform: scale(0);
        -webkit-transform: scale(0)
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

#chat .ekko-lightbox .modal-body {
    height: auto;
    overflow: hidden;
    padding: 15px;
    margin: 0px;
}

#chat .message-body button {
    border-radius: 3px;
    background: #0b93d5;
    color: #fff;
    border: none;
}

#chat #button-container button {
    border-radius: 3px;
    background: #0b93d5;
    color: #fff;
    border: none;
    margin: auto;
    width: 50%;
    display: block;
}

#chat .agent-chat-bubble select {
    width: 100%;
    color: #008800;
}

/* Allow text selection in chat bubbles */
#chat .agent-chat-bubble,
#chat .visitor-chat-bubble {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Force LTR direction for message content to prevent emoji/text reordering in RTL layouts */
#chat .agent-chat-bubble,
#chat .visitor-chat-bubble {
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
    text-align: left !important;
}

/* Ensure emoji images display inline in correct order */
#chat .agent-chat-bubble .cei,
#chat .visitor-chat-bubble .cei,
#chat .chatinput-editor .cei {
    display: inline !important;
    float: none !important;
    vertical-align: middle;
}

/* Force LTR direction for chat input editor */
#chat .chatinput-editor {
    direction: ltr !important;
    unicode-bidi: bidi-override !important;
    text-align: left !important;
}

/* Clickable links in chat */
#chat .chat-link,
#chat .agent-chat-bubble a,
#chat .visitor-chat-bubble a {
    color: #007bff;
    text-decoration: underline;
    word-break: break-all;
    cursor: pointer;
}

#chat .chat-link:hover,
#chat .agent-chat-bubble a:hover,
#chat .visitor-chat-bubble a:hover {
    color: #0056b3;
    text-decoration: underline;
}
/* Global ekko-lightbox styles (not scoped to #chat because lightbox modal is created on body) */
.ekko-lightbox {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-right: 0 !important;
    z-index: 1090;
}

.ekko-lightbox-container {
    position: relative;
}

.ekko-lightbox-container > div.ekko-lightbox-item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.ekko-lightbox-container img {
    cursor: pointer;
    max-width: 100%;
    max-height: 90vh;
}

.ekko-lightbox iframe {
    width: 100%;
    height: 100%;
}

.ekko-lightbox-nav-overlay {
    z-index: 1090;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
}

.ekko-lightbox-nav-overlay a {
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
    transition: opacity .5s;
    color: #fff;
    font-size: 30px;
    z-index: 1090;
}

.ekko-lightbox-nav-overlay a > * {
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.ekko-lightbox-nav-overlay a > :focus {
    outline: none;
}

.ekko-lightbox-nav-overlay a span {
    padding: 0 30px;
}

.ekko-lightbox-nav-overlay a:last-child span {
    text-align: right;
}

.ekko-lightbox-nav-overlay a:hover {
    text-decoration: none;
}

.ekko-lightbox-nav-overlay a:focus {
    outline: none;
}

.ekko-lightbox-nav-overlay a.disabled {
    cursor: default;
    visibility: hidden;
}

.ekko-lightbox a:hover {
    opacity: 1;
    text-decoration: none;
}

.ekko-lightbox .modal-dialog {
    display: none;
}

.ekko-lightbox .modal-footer {
    text-align: left;
}

.ekko-lightbox-loader {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}

.ekko-lightbox-loader > div {
    width: 40px;
    height: 40px;
    position: relative;
    text-align: center;
}

.ekko-lightbox-loader > div > div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    opacity: .6;
    position: absolute;
    top: 0;
    left: 0;
    animation: a 2s infinite ease-in-out;
}

.ekko-lightbox-loader > div > div:last-child {
    animation-delay: -1s;
}

.modal-dialog .ekko-lightbox-loader > div > div {
    background-color: #333;
}

@keyframes a {
    0%, 100% {
        transform: scale(0);
    }
    50% {
        transform: scale(1);
    }
}

.ekko-lightbox .modal-body {
    padding: 0;
}

/* Make sure modal backdrop is visible */
.ekko-lightbox + .modal-backdrop {
    opacity: 0.8;
}