/*!
 * bots 1.12.2 
 * License: https://www.oracle.com/tos/
 */

/*!
 * bots 1.12.2 ABAST
 * License: 
 */
.__react_component_tooltip {
    border-radius: 3px;
    display: inline-block;
    font-size: 13px;
    left: -999em;
    opacity: 0;
    padding: 8px 21px;
    position: fixed;
    pointer-events: none;
    transition: opacity .3s ease-out;
    top: -999em;
    visibility: hidden;
    z-index: 999
}

.__react_component_tooltip:after, .__react_component_tooltip:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute
}

.__react_component_tooltip.show {
    opacity: .9;
    margin-top: 0;
    margin-left: 0;
    visibility: visible
}

.__react_component_tooltip.type-dark {
    color: #fff;
    background-color: #222
}

.__react_component_tooltip.type-dark.place-top:after {
    border-top-color: #222;
    border-top-style: solid;
    border-top-width: 6px
}

.__react_component_tooltip.type-dark.place-bottom:after {
    border-bottom-color: #222;
    border-bottom-style: solid;
    border-bottom-width: 6px
}

.__react_component_tooltip.type-dark.place-left:after {
    border-left-color: #222;
    border-left-style: solid;
    border-left-width: 6px
}

.__react_component_tooltip.type-dark.place-right:after {
    border-right-color: #222;
    border-right-style: solid;
    border-right-width: 6px
}

.__react_component_tooltip.type-dark.border {
    border: 1px solid #fff
}

.__react_component_tooltip.type-dark.border.place-top:before {
    border-top: 8px solid #fff
}

.__react_component_tooltip.type-dark.border.place-bottom:before {
    border-bottom: 8px solid #fff
}

.__react_component_tooltip.type-dark.border.place-left:before {
    border-left: 8px solid #fff
}

.__react_component_tooltip.type-dark.border.place-right:before {
    border-right: 8px solid #fff
}

.__react_component_tooltip.type-success {
    color: #fff;
    background-color: #8dc572
}

.__react_component_tooltip.type-success.place-top:after {
    border-top-color: #8dc572;
    border-top-style: solid;
    border-top-width: 6px
}

.__react_component_tooltip.type-success.place-bottom:after {
    border-bottom-color: #8dc572;
    border-bottom-style: solid;
    border-bottom-width: 6px
}

.__react_component_tooltip.type-success.place-left:after {
    border-left-color: #8dc572;
    border-left-style: solid;
    border-left-width: 6px
}

.__react_component_tooltip.type-success.place-right:after {
    border-right-color: #8dc572;
    border-right-style: solid;
    border-right-width: 6px
}

.__react_component_tooltip.type-success.border {
    border: 1px solid #fff
}

.__react_component_tooltip.type-success.border.place-top:before {
    border-top: 8px solid #fff
}

.__react_component_tooltip.type-success.border.place-bottom:before {
    border-bottom: 8px solid #fff
}

.__react_component_tooltip.type-success.border.place-left:before {
    border-left: 8px solid #fff
}

.__react_component_tooltip.type-success.border.place-right:before {
    border-right: 8px solid #fff
}

.__react_component_tooltip.type-warning {
    color: #fff;
    background-color: #f0ad4e
}

.__react_component_tooltip.type-warning.place-top:after {
    border-top-color: #f0ad4e;
    border-top-style: solid;
    border-top-width: 6px
}

.__react_component_tooltip.type-warning.place-bottom:after {
    border-bottom-color: #f0ad4e;
    border-bottom-style: solid;
    border-bottom-width: 6px
}

.__react_component_tooltip.type-warning.place-left:after {
    border-left-color: #f0ad4e;
    border-left-style: solid;
    border-left-width: 6px
}

.__react_component_tooltip.type-warning.place-right:after {
    border-right-color: #f0ad4e;
    border-right-style: solid;
    border-right-width: 6px
}

.__react_component_tooltip.type-warning.border {
    border: 1px solid #fff
}

.__react_component_tooltip.type-warning.border.place-top:before {
    border-top: 8px solid #fff
}

.__react_component_tooltip.type-warning.border.place-bottom:before {
    border-bottom: 8px solid #fff
}

.__react_component_tooltip.type-warning.border.place-left:before {
    border-left: 8px solid #fff
}

.__react_component_tooltip.type-warning.border.place-right:before {
    border-right: 8px solid #fff
}

.__react_component_tooltip.type-error {
    color: #fff;
    background-color: #be6464
}

.__react_component_tooltip.type-error.place-top:after {
    border-top-color: #be6464;
    border-top-style: solid;
    border-top-width: 6px
}

.__react_component_tooltip.type-error.place-bottom:after {
    border-bottom-color: #be6464;
    border-bottom-style: solid;
    border-bottom-width: 6px
}

.__react_component_tooltip.type-error.place-left:after {
    border-left-color: #be6464;
    border-left-style: solid;
    border-left-width: 6px
}

.__react_component_tooltip.type-error.place-right:after {
    border-right-color: #be6464;
    border-right-style: solid;
    border-right-width: 6px
}

.__react_component_tooltip.type-error.border {
    border: 1px solid #fff
}

.__react_component_tooltip.type-error.border.place-top:before {
    border-top: 8px solid #fff
}

.__react_component_tooltip.type-error.border.place-bottom:before {
    border-bottom: 8px solid #fff
}

.__react_component_tooltip.type-error.border.place-left:before {
    border-left: 8px solid #fff
}

.__react_component_tooltip.type-error.border.place-right:before {
    border-right: 8px solid #fff
}

.__react_component_tooltip.type-info {
    color: #fff;
    background-color: #337ab7
}

.__react_component_tooltip.type-info.place-top:after {
    border-top-color: #337ab7;
    border-top-style: solid;
    border-top-width: 6px
}

.__react_component_tooltip.type-info.place-bottom:after {
    border-bottom-color: #337ab7;
    border-bottom-style: solid;
    border-bottom-width: 6px
}

.__react_component_tooltip.type-info.place-left:after {
    border-left-color: #337ab7;
    border-left-style: solid;
    border-left-width: 6px
}

.__react_component_tooltip.type-info.place-right:after {
    border-right-color: #337ab7;
    border-right-style: solid;
    border-right-width: 6px
}

.__react_component_tooltip.type-info.border {
    border: 1px solid #fff
}

.__react_component_tooltip.type-info.border.place-top:before {
    border-top: 8px solid #fff
}

.__react_component_tooltip.type-info.border.place-bottom:before {
    border-bottom: 8px solid #fff
}

.__react_component_tooltip.type-info.border.place-left:before {
    border-left: 8px solid #fff
}

.__react_component_tooltip.type-info.border.place-right:before {
    border-right: 8px solid #fff
}

.__react_component_tooltip.type-light {
    color: #222;
    background-color: #fff
}

.__react_component_tooltip.type-light.place-top:after {
    border-top-color: #fff;
    border-top-style: solid;
    border-top-width: 6px
}

.__react_component_tooltip.type-light.place-bottom:after {
    border-bottom-color: #fff;
    border-bottom-style: solid;
    border-bottom-width: 6px
}

.__react_component_tooltip.type-light.place-left:after {
    border-left-color: #fff;
    border-left-style: solid;
    border-left-width: 6px
}

.__react_component_tooltip.type-light.place-right:after {
    border-right-color: #fff;
    border-right-style: solid;
    border-right-width: 6px
}

.__react_component_tooltip.type-light.border {
    border: 1px solid #222
}

.__react_component_tooltip.type-light.border.place-top:before {
    border-top: 8px solid #222
}

.__react_component_tooltip.type-light.border.place-bottom:before {
    border-bottom: 8px solid #222
}

.__react_component_tooltip.type-light.border.place-left:before {
    border-left: 8px solid #222
}

.__react_component_tooltip.type-light.border.place-right:before {
    border-right: 8px solid #222
}

.__react_component_tooltip.place-top {
    margin-top: -10px
}

.__react_component_tooltip.place-top:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    bottom: -8px;
    left: 50%;
    margin-left: -10px
}

.__react_component_tooltip.place-top:after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    bottom: -6px;
    left: 50%;
    margin-left: -8px
}

.__react_component_tooltip.place-bottom {
    margin-top: 10px
}

.__react_component_tooltip.place-bottom:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    top: -8px;
    left: 50%;
    margin-left: -10px
}

.__react_component_tooltip.place-bottom:after {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    top: -6px;
    left: 50%;
    margin-left: -8px
}

.__react_component_tooltip.place-left {
    margin-left: -10px
}

.__react_component_tooltip.place-left:before {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    right: -8px;
    top: 50%;
    margin-top: -5px
}

.__react_component_tooltip.place-left:after {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    right: -6px;
    top: 50%;
    margin-top: -4px
}

.__react_component_tooltip.place-right {
    margin-left: 10px
}

.__react_component_tooltip.place-right:before {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    left: -8px;
    top: 50%;
    margin-top: -5px
}

.__react_component_tooltip.place-right:after {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    left: -6px;
    top: 50%;
    margin-top: -4px
}

.__react_component_tooltip .multi-line {
    display: block;
    padding: 2px 0;
    text-align: center
}

.sk-three-bounce {
    height: 18px
}

.sk-three-bounce>div {
    width: 18px;
    height: 18px;
    background-color: currentColor;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out;
    animation-fill-mode: both
}

.sk-three-bounce>div:first-child {
    animation-delay: -.32s
}

.sk-three-bounce>div:nth-child(2) {
    animation-delay: -.16s
}

@keyframes sk-bouncedelay {
    0%, 80%, to {
        transform: scale(0);
        -webkit-transform: scale(0)
    }
    40% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

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

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

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

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0
}

.button-display {
    transform-origin: bottom right;
    bottom: 20px
}

.button-display.appear {
    opacity: 0;
    animation: appear-button-frames .4s cubic-bezier(.62, .28, .23, .99);
    animation-delay: .2s;
    animation-fill-mode: both
}

.button-display.close {
    animation: close-button-frames .4s cubic-bezier(.62, .28, .23, .99);
    animation-delay: 0s;
    animation-fill-mode: both
}

.button-display.init {
    transform: scale(0);
    opacity: 0
}

.widget-lg .button-display.init {
    bottom: -640px
}

.widget-md .button-display.init {
    bottom: -480px
}

.widget-sm .button-display.init {
    bottom: -420px
}

@keyframes appear-button-frames {
    0% {
        opacity: 0;
        transform: scale(0)
    }
    1% {
        opacity: 0;
        transform: scale(.1)
    }
    to {
        display: block;
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes close-button-frames {
    0% {
        opacity: 1;
        transform: scale(1)
    }
    99% {
        opacity: 0;
        transform: scale(.1)
    }
    to {
        opacity: 0;
        transform: scale(0)
    }
}

.tab-display {
    top: 0
}

.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none
}

.unread-badge {
    background-color: #e54054;
    border-radius: 100px;
    box-shadow: 0 0 0 1px #cf2615;
    color: #fff;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px
}

#messenger-button .unread-badge {
    position: absolute;
    top: 0
}

#header .unread-badge {
    position: absolute;
    top: 11px;
    left: 10px
}

#messenger-button {
    position: fixed;
    right: 6px;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    z-index: 9998;
    cursor: pointer;
    transform-origin: bottom;
    bottom: 20px;
    opacity: 1;
    transform: scale(1)
}

#messenger-button.messenger-button-shown {
    animation: messenger-button-shown-frames .4s cubic-bezier(.62, .28, .23, .99);
    animation-delay: .2s;
    animation-fill-mode: both
}

#messenger-button.messenger-button-hidden {
    animation: messenger-button-hidden-frames .4s cubic-bezier(.62, .28, .23, .99);
    animation-delay: 0s;
    animation-fill-mode: both
}

.widget-xs #messenger-button.messenger-button-hidden {
    animation: messenger-button-hidden-frames-xs .4s cubic-bezier(.62, .28, .23, .99);
    animation-delay: 0s;
    animation-fill-mode: both
}

#messenger-button .default-icon {
    width: 55%;
    margin-left: 50%;
    margin-top: 50%;
    transform: translate(-50%, -50%)
}

#messenger-button .messenger-button-icon {
    border-radius: 50%;
    overflow: hidden;
    width: 100%;
    height: 100%
}

#messenger-button .messenger-button-icon img {
    max-width: 100%;
    height: auto
}

@keyframes messenger-button-shown-frames {
    0% {
        transform: scale(0);
        bottom: 0;
        opacity: 0
    }
    1% {
        transform: scale(1);
        bottom: 0;
        opacity: 0
    }
    to {
        bottom: 20px;
        opacity: 1
    }
}

@keyframes messenger-button-hidden-frames {
    0% {
        bottom: 20px;
        opacity: 1;
        transform: scale(1)
    }
    99% {
        bottom: 0;
        opacity: 0;
        transform: scale(1)
    }
    to {
        bottom: 0;
        opacity: 0;
        transform: scale(0)
    }
}

@keyframes messenger-button-hidden-frames-xs {
    0% {
        bottom: 40px;
        right: 14px;
        opacity: 1;
        transform: scale(1)
    }
    99% {
        bottom: 20px;
        right: 14px;
        opacity: 0;
        transform: scale(1)
    }
    to {
        bottom: 20px;
        right: 14px;
        opacity: 0;
        transform: scale(0)
    }
}

/*!
 *  Font Awesome custom set up
 */
/*
@font-face {
    font-family: FontAwesome-WebMessenger;
    src: url('32400f4e08932a94d8bfd2422702c446.eot');
    src: url('32400f4e08932a94d8bfd2422702c446.eot#iefix') format("embedded-opentype"), 
    url('db812d8a70a4e88e888744c1c9a27e89.woff2') format("woff2"), 
    url('a35720c2fed2c7f043bc7e4ffb45e073.woff') format("woff"), 
    url('a3de2170e4e9df77161ea5d3f31b2668.ttf') format("truetype"), 
    url('f775f9cca88e21d45bebe185b27c0e5b.svg#fontawesomeregular') format("svg");
    font-weight: 400;
    font-style: normal
}
*/
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome-WebMessenger;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.fa-envelope-o:before {
    content: "\F003"
}

.fa-check:before {
    content: "\F00C"
}

.fa-times:before {
    content: "\f00d"
}

.fa-arrow-left:before {
    content: "\F060"
}

.fa-camera:before {
    content: "\F030"
}

.fa-angle-right:before {
    content: "\F105"
}

.fa-ellipsis-h:before {
    content: "\F141"
}

.fa-phone:before {
    content: "\F095"
}

.input-group {
    padding: 5px 0;
    text-align: left
}

.input-group.has-error .input {
    border-color: #e54054
}

.input-group.has-error label {
    color: #e54054
}

.input-group .input {
    width: 100%
}

.input-group label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 3px
}

.input {
    background-color: #fbfbfb;
    border: 1px solid #e8e8e8;
    padding: 0 9px;
    border-radius: 4px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 13px;
    background-color: #fff;
    border: 1px solid #fff;
    padding: 0;
    font: inherit
}

.input:-moz-placeholder, .input:-ms-input-placeholder, .input::-moz-placeholder, .input::-webkit-input-placeholder, .input::placeholder {
    color: #00aeff;
    opacity: 1
}

.input:focus {
    background-color: #fff;
    color: #212121;
    outline: 0
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

.btn.focus, .btn:focus, .btn:hover {
    color: #333;
    outline: 0;
    text-decoration: none;
    opacity: .8;
    filter: alpha(opacity=80)
}

.btn.active, .btn:active {
    outline: 0;
    background-image: none;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity=65);
    box-shadow: none
}

a .btn.disabled, fieldset[disabled] a .btn {
    pointer-events: none
}

.btn-primary {
    color: #fff;
    background-color: #00aeff;
    border-color: #00aeff
}

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #008bcc;
    border-color: #005780
}

.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #008bcc;
    border-color: #0084c2
}

.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover {
    color: #fff;
    background-color: #0073a8;
    border-color: #005780
}

.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary {
    background-image: none
}

.btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
    background-color: #00aeff;
    border-color: #00aeff
}

.btn-primary .badge {
    color: #00aeff;
    background-color: #fff
}

.branding-color-dark .btn-primary {
    color: #fff
}

.btn-action-paid {
    cursor: default;
    color: #787f8c;
    background-color: transparent;
    border-color: #787f8c
}

.btn-action-paid.focus, .btn-action-paid:focus {
    color: #787f8c;
    background-color: transparent;
    border-color: #3d4148
}

.btn-action-paid.active, .btn-action-paid:active, .btn-action-paid:hover, .open>.dropdown-toggle.btn-action-paid {
    color: #787f8c;
    background-color: transparent;
    border-color: #5b616b
}

.btn-action-paid.active.focus, .btn-action-paid.active:focus, .btn-action-paid.active:hover, .btn-action-paid:active.focus, .btn-action-paid:active:focus, .btn-action-paid:active:hover, .open>.dropdown-toggle.btn-action-paid.focus, .open>.dropdown-toggle.btn-action-paid:focus, .open>.dropdown-toggle.btn-action-paid:hover {
    color: #787f8c;
    background-color: transparent;
    border-color: #3d4148
}

.btn-action-paid.active, .btn-action-paid:active, .open>.dropdown-toggle.btn-action-paid {
    background-image: none
}

.btn-action-paid.disabled, .btn-action-paid.disabled.active, .btn-action-paid.disabled.focus, .btn-action-paid.disabled:active, .btn-action-paid.disabled:focus, .btn-action-paid.disabled:hover, .btn-action-paid[disabled], .btn-action-paid[disabled].active, .btn-action-paid[disabled].focus, .btn-action-paid[disabled]:active, .btn-action-paid[disabled]:focus, .btn-action-paid[disabled]:hover, fieldset[disabled] .btn-action-paid, fieldset[disabled] .btn-action-paid.active, fieldset[disabled] .btn-action-paid.focus, fieldset[disabled] .btn-action-paid:active, fieldset[disabled] .btn-action-paid:focus, fieldset[disabled] .btn-action-paid:hover {
    background-color: transparent;
    border-color: #787f8c
}

.btn-action-paid .badge {
    color: transparent;
    background-color: #787f8c
}

.btn-action-paid:active, .btn-action-paid:hover {
    box-shadow: none;
    border-color: #787f8c
}

.btn-action-processing {
    padding: 7px;
    display: block;
    cursor: default;
    border-radius: 7px;
    color: #fff;
    background-color: #00aeff;
    border-color: #00aeff
}

.btn-action-processing.focus, .btn-action-processing:focus {
    color: #fff;
    background-color: #008bcc;
    border-color: #005780
}

.btn-action-processing.active, .btn-action-processing:active, .btn-action-processing:hover, .open>.dropdown-toggle.btn-action-processing {
    color: #fff;
    background-color: #008bcc;
    border-color: #0084c2
}

.btn-action-processing.active.focus, .btn-action-processing.active:focus, .btn-action-processing.active:hover, .btn-action-processing:active.focus, .btn-action-processing:active:focus, .btn-action-processing:active:hover, .open>.dropdown-toggle.btn-action-processing.focus, .open>.dropdown-toggle.btn-action-processing:focus, .open>.dropdown-toggle.btn-action-processing:hover {
    color: #fff;
    background-color: #0073a8;
    border-color: #005780
}

.btn-action-processing.active, .btn-action-processing:active, .open>.dropdown-toggle.btn-action-processing {
    background-image: none
}

.btn-action-processing.disabled, .btn-action-processing.disabled.active, .btn-action-processing.disabled.focus, .btn-action-processing.disabled:active, .btn-action-processing.disabled:focus, .btn-action-processing.disabled:hover, .btn-action-processing[disabled], .btn-action-processing[disabled].active, .btn-action-processing[disabled].focus, .btn-action-processing[disabled]:active, .btn-action-processing[disabled]:focus, .btn-action-processing[disabled]:hover, fieldset[disabled] .btn-action-processing, fieldset[disabled] .btn-action-processing.active, fieldset[disabled] .btn-action-processing.focus, fieldset[disabled] .btn-action-processing:active, fieldset[disabled] .btn-action-processing:focus, fieldset[disabled] .btn-action-processing:hover {
    background-color: #00aeff;
    border-color: #00aeff
}

.btn-action-processing .badge {
    color: #00aeff;
    background-color: #fff
}

.btn-action-processing:active, .btn-action-processing:active:hover, .btn-action-processing:hover {
    box-shadow: none;
    background-color: #00aeff;
    border-color: #00aeff
}

a.btn {
    text-decoration: none
}

.btn-link {
    color: #337ab7;
    font-weight: 400;
    border-radius: 0
}

.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
    background-color: transparent;
    box-shadow: none
}

.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
    border-color: transparent
}

.btn-link:focus, .btn-link:hover {
    color: #23527c;
    text-decoration: underline;
    background-color: transparent
}

.btn-link[disabled]:focus, .btn-link[disabled]:hover, fieldset[disabled] .btn-link:focus, fieldset[disabled] .btn-link:hover {
    color: #777;
    text-decoration: none
}

.btn-reply-action {
    color: #fff;
    background-color: #00aeff;
    border-color: #00aeff
}

.btn-reply-action.focus, .btn-reply-action:focus {
    color: #fff;
    background-color: #008bcc;
    border-color: #005780
}

.btn-reply-action.active, .btn-reply-action:active, .btn-reply-action:hover, .open>.dropdown-toggle.btn-reply-action {
    color: #fff;
    background-color: #008bcc;
    border-color: #0084c2
}

.btn-reply-action.active.focus, .btn-reply-action.active:focus, .btn-reply-action.active:hover, .btn-reply-action:active.focus, .btn-reply-action:active:focus, .btn-reply-action:active:hover, .open>.dropdown-toggle.btn-reply-action.focus, .open>.dropdown-toggle.btn-reply-action:focus, .open>.dropdown-toggle.btn-reply-action:hover {
    color: #fff;
    background-color: #0073a8;
    border-color: #005780
}

.btn-reply-action.active, .btn-reply-action:active, .open>.dropdown-toggle.btn-reply-action {
    background-image: none
}

.btn-reply-action.disabled, .btn-reply-action.disabled.active, .btn-reply-action.disabled.focus, .btn-reply-action.disabled:active, .btn-reply-action.disabled:focus, .btn-reply-action.disabled:hover, .btn-reply-action[disabled], .btn-reply-action[disabled].active, .btn-reply-action[disabled].focus, .btn-reply-action[disabled]:active, .btn-reply-action[disabled]:focus, .btn-reply-action[disabled]:hover, fieldset[disabled] .btn-reply-action, fieldset[disabled] .btn-reply-action.active, fieldset[disabled] .btn-reply-action.focus, fieldset[disabled] .btn-reply-action:active, fieldset[disabled] .btn-reply-action:focus, fieldset[disabled] .btn-reply-action:hover {
    background-color: #00aeff;
    border-color: #00aeff
}

.btn-reply-action .badge {
    color: #00aeff;
    background-color: #fff
}

.branding-color-dark .btn-reply-action {
    color: #fff
}

#header {
    z-index: 10;
    height: 44px;
    line-height: 32px;
    padding: 6px 15px;
    position: relative;
    background-color: #f4f4f4;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    box-sizing: content-box;
    color: #333;
    text-align: center
}

.ie11 #header.fixed-intro {
    height: 56px
}

.widget-xs #header {
    border-radius: 0
}

#header .fa {
    line-height: 28px;
    color: #333;
    font-size: 15px
}

#header .close-handle {
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 10px
}

#header .back-handle {
    cursor: pointer;
    display: inline-block;
    margin-right: 8px;
    height: 30px
}

#header .close-handle .fa {
    font-size: 17px
}

#header .settings-content {
    display: inline-block;
    height: 44px;
    margin-top: -6px;
    margin-left: -15px
}

#header .settings-content>div {
    margin-top: 6px;
    margin-left: 15px
}

#badge {
    position: absolute;
    top: 11px;
    left: 10px
}

#settings-handle {
    cursor: pointer;
    position: absolute;
    top: 7px;
    right: 32px;
    width: 25px;
    display: none
}

.appear #settings-handle {
    display: block
}

#settings-header {
    z-index: 10;
    height: 44px;
    line-height: 32px;
    padding: 6px 15px;
    position: relative;
    background-color: #f4f4f4;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    box-sizing: content-box;
    color: #333
}

.ie11 #settings-header.fixed-intro {
    height: 56px
}

.widget-xs #settings-header {
    border-radius: 0
}

#settings-header .fa {
    line-height: 28px;
    color: #333;
    font-size: 15px
}

#settings-header .close-handle {
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 10px
}

#settings-header .back-handle {
    cursor: pointer;
    display: inline-block;
    margin-right: 8px;
    height: 30px
}

#settings-header .close-handle .fa {
    font-size: 17px
}

#settings-header .settings-content {
    display: inline-block;
    height: 44px;
    margin-top: -6px;
    margin-left: -15px
}

#settings-header .settings-content>div {
    margin-top: 6px;
    margin-left: 15px
}

.branding-color-dark #header, .branding-color-dark #header .fa, .branding-color-dark #settings-header, .branding-color-dark #settings-header .fa {
    color: #fff
}

.notification-container {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    position: absolute;
    width: 100%;
    z-index: 1
}

.notification-container .notification {
    overflow: hidden;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, .1);
    background-color: #fff
}

.notification-container .notification p {
    margin: 18px
}

.notification-container .notification p a {
    color: #00aeff
}

.notification-container .notification p .notification-close {
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    top: 0;
    right: 10px;
    display: block;
    width: 22px;
    height: 32px;
    padding-left: 10px;
    text-decoration: none;
    color: gray
}

.notification-container .notification.notification-error {
    margin-top: 44px;
    background-color: #e54054;
    color: #fff
}

.notification-container .notification.notification-error .notification-close {
    color: #fff
}

.notification-container .notification-enter {
    height: 0
}

.notification-container .notification-enter-active {
    transition: height .5s;
    height: 56px
}

.notification-container .notification-exit {
    height: 56px
}

.notification-container .notification-exit-active {
    transition: height .5s;
    height: 0
}

.accent-color-light #conversation .right-row .msg, .accent-color-light #conversation .right-row .msg-image, .accent-color-light #conversation .right-row .msg-image a.link, .accent-color-light #conversation .right-row .msg-image a.link:visited, .accent-color-light #conversation .right-row .msg a.link, .accent-color-light #conversation .right-row .msg a.link:visited, .link-color-light #conversation .left-row .btn {
    color: #424242
}

.msg-avatar {
    content: url('../images/bot_profile.png');
    width: 31px;
    height: 31px;
    margin-right: 5px;
    margin-left: 9px;
    opacity: 1
}

.msg-avatar img {
    display: inline-block;
    width: 31px;
    height: 31px;
    border-radius: 50%
}

.msg-avatar.msg-avatar-img {
    margin-bottom: 0
}

.msg-avatar.msg-avatar-hidden {
    opacity: 0
}

.msg-avatar-placeholder {
    padding-right: 45px;
    display: inline-block
}

.message-status-indicator, .retry {
    font-weight: 400;
    color: #b2b2b2;
    margin-top: 5px
}

.message-status-indicator .time, .retry .time {
    font-size: 12px
}

.left-row .message-status-indicator, .left-row .retry {
    margin-left: 45px
}

.right-row .message-status-indicator, .right-row .retry {
    text-align: right
}

.intro-pane {
    background-color: #f8f9fa;
    padding: 18px 18px 22px;
    border-bottom: 1px solid #e6e6e6;
    min-height: 90px
}

.ie11 .intro-pane.fixed {
    min-height: inherit;
    padding-bottom: 32px
}

.intro-pane .app-name {
    color: #464646;
    font-size: 18px;
    font-weight: 700
}

.intro-pane .intro-text {
    color: #787f8c;
    font-size: 13px;
    line-height: 1.3;
    margin-top: 8px
}

.intro-pane .app-icon {
    float: left;
    width: 50px;
    height: 50px;
    border-radius: 50%
}

.intro-pane .app-name, .intro-pane .intro-text {
    margin-left: 68px
}

.intro-pane .available-channels {
    margin-top: 22px;
    text-align: center;
    color: #787f8c
}

.intro-pane .available-channels .channel-icon {
    cursor: pointer;
    margin-right: 13px
}

.intro-pane .available-channels .channel-icon:last-child {
    margin-right: 0
}

.reply-container {
    text-align: right;
    position: relative;
    display: block;
    padding-bottom: 10px
}

.reply-container .btn-reply-action {
    padding: 3px 7px 4px;
    border-radius: 7px;
    border: 1px solid #00aeff;
    line-height: 20px;
    display: inline-block;
    margin-left: 5px;
    color: #424242;
    margin-bottom: 5px
}

.reply-container .btn-reply-action .fading-circle {
    float: left;
    vertical-align: bottom;
    margin-right: 5px;
    top: 2.5px
}

.reply-container .btn-reply-action span {
    max-width: 280px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    white-space: nowrap
}

.reply-container .btn-reply-action span .location-icon, .reply-container .btn-reply-action span .reply-action-icon {
    width: 20px;
    height: 20px;
    vertical-align: bottom;
    margin-right: 5px
}

.typing-indicator-container {
    display: block;
    clear: both;
    padding-top: 2px;
    padding-bottom: 10px;
    margin-left: -100px;
    opacity: .1;
    transition: margin-left .25s cubic-bezier(.55, 0, .1, 1) .3s, opacity .25s cubic-bezier(.55, 0, .1, 1) .3s
}

.typing-indicator-container.fade-in {
    margin-left: 0;
    opacity: 1
}

.typing-indicator-container .typing-indicator {
    clear: both;
    background-color: #f4f4f4;
    width: auto;
    height: 35px;
    border-radius: 14px;
    border-top-left-radius: 2px;
    padding: 14px;
    display: inline-block;
    position: relative;
    animation: 2s bulge infinite ease-out;
    vertical-align: middle
}

.typing-indicator-container .typing-indicator.typing-indicator-first {
    border-top-left-radius: 14px
}

.typing-indicator-container .typing-indicator span {
    height: 8px;
    width: 8px;
    float: left;
    margin: 0 2px;
    background-color: #787f8c;
    display: block;
    border-radius: 50%;
    opacity: .4
}

.typing-indicator-container .typing-indicator span:first-of-type {
    animation: 1s blink infinite .3333s
}

.typing-indicator-container .typing-indicator span:nth-of-type(2) {
    animation: 1s blink infinite .6666s
}

.typing-indicator-container .typing-indicator span:nth-of-type(3) {
    animation: 1s blink infinite .9999s
}

.typing-indicator-container .typing-indicator-avatar {
    width: 31px;
    height: 31px;
    margin-right: 5px;
    margin-left: 9px;
    opacity: 1;
    margin-bottom: 0;
    vertical-align: middle
}

.typing-indicator-container .typing-indicator-avatar img {
    display: inline-block;
    width: 31px;
    height: 31px;
    border-radius: 50%
}

.typing-indicator-container .typing-indicator-avatar.msg-avatar-img {
    margin-bottom: 0
}

.typing-indicator-container .typing-indicator-avatar.msg-avatar-hidden {
    opacity: 0
}

.typing-indicator-container .typing-indicator-avatar-placeholder {
    padding-right: 45px;
    display: inline-block
}

@keyframes blink {
    50% {
        opacity: 1
    }
}

@keyframes bulge {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.05)
    }
}

#footer {
    position: relative;
    width: 100%;
    bottom: 0;
    left: 0;
    border: none;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, .1);
    background-color: #fff;
    z-index: 1;
    display: -ms-flexbox;
    display: flex
}

#footer .image-upload {
    height: 46px;
    width: 46px;
    color: #b2b2b2;
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    line-height: 14px
}

.ie11 #footer .image-upload {
    width: 36px
}

#footer .image-upload:hover {
    color: #00aeff
}

#footer input[type=file] {
    position: fixed;
    top: -1000px
}

#footer form {
    flex: 1;
    -ms-flex: 1;
    display: inline-block
}

#footer .input-container {
    padding: 5px 0;
    display: block;
    overflow: hidden
}

.ie11 #footer .input-container {
    margin-left: 10px
}

#footer .input-container.no-upload {
    padding: 5px 0 5px 9px
}

#footer .input-container .message-input {
    width: 100%;
    -webkit-appearance: none;
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 17px;
    line-height: 18px
}

#footer .input-container .message-input.single-line {
    margin-top: 7px
}

#footer .input-container .message-input.scrollable {
    padding-right: 0
}

#footer .input-container .message-input::-ms-clear {
    display: none
}

#footer .input-container .message-input:-ms-input-placeholder {
    color: #b2b2b2
}

#footer .send {
    margin-top: 1px;
    color: #b2b2b2;
    font-weight: 600;
    position: relative;
    height: 45px;
    line-height: 42px;
    text-decoration: none;
    padding: 0 10px;
    cursor: pointer;
    display: inline-block
}

#footer .send.active {
    color: #00aeff
}

#footer .send.active:hover {
    opacity: .8;
    filter: alpha(opacity=80)
}

.settings {
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, .1);
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: #fff;
    overflow: hidden;
    opacity: 1;
    font-size: 12px;
    color: #787f8c
}

.settings .settings-wrapper {
    padding: 30px 40px;
    box-sizing: border-box
}

.settings .settings-wrapper .settings-header {
    font-weight: 700;
    font-size: 15px;
    color: #464646;
    margin-bottom: 15px
}

.settings .settings-wrapper .settings-description {
    font-size: 13px
}

.settings.settings-enter {
    width: 0
}

.settings.settings-enter-active {
    transition: width .25s;
    width: 100%
}

.settings.settings-exit {
    width: 100%
}

.settings.settings-exit-active {
    transition: width .25s;
    width: 0
}

.settings .channels {
    margin-top: 30px
}

.settings .channels .channel-item {
    cursor: pointer
}

.settings .channels .channel-item.channel-item-linked .channel-item-right {
    color: #00aeff;
    text-decoration: underline
}

.settings .channels .channel-item:first-child .channel-item-name {
    border-top: 1px solid #efefef
}

.settings .channels .channel-item .channel-item-header {
    position: relative
}

.settings .channels .channel-item .channel-item-header .channel-item-icon {
    width: 26px;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    top: 9px
}

.settings .channels .channel-item .channel-item-header .channel-item-content {
    display: inline-block;
    margin-left: 38px;
    border-bottom: 1px solid #efefef;
    width: calc(100% - 26px - 12px)
}

.settings .channels .channel-item .channel-item-header .channel-item-content .channel-item-name {
    font-size: 13px;
    color: #464646;
    line-height: 43px
}

.settings .channels .channel-item .channel-item-header .channel-item-content .channel-item-connected-as {
    margin-bottom: 10px;
    margin-top: -10px;
    font-size: 10px
}

.settings .channels .channel-item .channel-item-header .channel-item-right {
    position: absolute;
    right: 0;
    height: 45px;
    line-height: 45px;
    display: inline-block
}

.settings .channels .channel-item .channel-item-header .channel-item-right i.fa {
    font: normal normal normal 12px/45px FontAwesome-WebMessenger;
    color: #787f8c;
    font-size: 13px
}

.flag {
    background-image: url('4fc55e74cd731f89b3cf2c1cd4aaf471.png');
    background-size: 1024px 192px;
    width: 32px;
    height: 24px
}

.ad {
    background-position: 0 0
}

.ae {
    background-position: -32px 0
}

.af {
    background-position: -64px 0
}

.ag {
    background-position: -96px 0
}

.ai {
    background-position: -128px 0
}

.al {
    background-position: -160px 0
}

.am {
    background-position: -192px 0
}

.ao {
    background-position: -224px 0
}

.aq {
    background-position: -256px 0
}

.ar {
    background-position: -288px 0
}

.as {
    background-position: -320px 0
}

.at {
    background-position: -352px 0
}

.au {
    background-position: -384px 0
}

.aw {
    background-position: -416px 0
}

.ax {
    background-position: -448px 0
}

.az {
    background-position: -480px 0
}

.ba {
    background-position: -512px 0
}

.bb {
    background-position: -544px 0
}

.bd {
    background-position: -576px 0
}

.be {
    background-position: -608px 0
}

.bf {
    background-position: -640px 0
}

.bg {
    background-position: -672px 0
}

.bh {
    background-position: -704px 0
}

.bi {
    background-position: -736px 0
}

.bj {
    background-position: -768px 0
}

.bl {
    background-position: -800px 0
}

.bm {
    background-position: -832px 0
}

.bn {
    background-position: -864px 0
}

.bo {
    background-position: -896px 0
}

.bq {
    background-position: -928px 0
}

.br {
    background-position: -960px 0
}

.bs {
    background-position: -992px 0
}

.bt {
    background-position: 0 -24px
}

.bv {
    background-position: -32px -24px
}

.bw {
    background-position: -64px -24px
}

.by {
    background-position: -96px -24px
}

.bz {
    background-position: -128px -24px
}

.ca {
    background-position: -160px -24px
}

.cc {
    background-position: -192px -24px
}

.cd {
    background-position: -224px -24px
}

.cf {
    background-position: -256px -24px
}

.cg {
    background-position: -288px -24px
}

.ch {
    background-position: -320px -24px
}

.ci {
    background-position: -352px -24px
}

.ck {
    background-position: -384px -24px
}

.cl {
    background-position: -416px -24px
}

.cm {
    background-position: -448px -24px
}

.cn {
    background-position: -480px -24px
}

.co {
    background-position: -512px -24px
}

.cr {
    background-position: -544px -24px
}

.cu {
    background-position: -576px -24px
}

.cv {
    background-position: -608px -24px
}

.cw {
    background-position: -640px -24px
}

.cx {
    background-position: -672px -24px
}

.cy {
    background-position: -704px -24px
}

.cz {
    background-position: -736px -24px
}

.de {
    background-position: -768px -24px
}

.dj {
    background-position: -800px -24px
}

.dk {
    background-position: -832px -24px
}

.dm {
    background-position: -864px -24px
}

.do {
    background-position: -896px -24px
}

.dz {
    background-position: -928px -24px
}

.ec {
    background-position: -960px -24px
}

.ee {
    background-position: -992px -24px
}

.eg {
    background-position: 0 -48px
}

.eh {
    background-position: -32px -48px
}

.er {
    background-position: -64px -48px
}

.es {
    background-position: -96px -48px
}

.et {
    background-position: -128px -48px
}

.eu {
    background-position: -160px -48px
}

.fi {
    background-position: -192px -48px
}

.fj {
    background-position: -224px -48px
}

.fk {
    background-position: -256px -48px
}

.fm {
    background-position: -288px -48px
}

.fo {
    background-position: -320px -48px
}

.fr {
    background-position: -352px -48px
}

.ga {
    background-position: -384px -48px
}

.gb-eng {
    background-position: -416px -48px
}

.gb-nir {
    background-position: -448px -48px
}

.gb-sct {
    background-position: -480px -48px
}

.gb-wls {
    background-position: -512px -48px
}

.gb {
    background-position: -544px -48px
}

.gd {
    background-position: -576px -48px
}

.ge {
    background-position: -608px -48px
}

.gf {
    background-position: -640px -48px
}

.gg {
    background-position: -672px -48px
}

.gh {
    background-position: -704px -48px
}

.gi {
    background-position: -736px -48px
}

.gl {
    background-position: -768px -48px
}

.gm {
    background-position: -800px -48px
}

.gn {
    background-position: -832px -48px
}

.gp {
    background-position: -864px -48px
}

.gq {
    background-position: -896px -48px
}

.gr {
    background-position: -928px -48px
}

.gs {
    background-position: -960px -48px
}

.gt {
    background-position: -992px -48px
}

.gu {
    background-position: 0 -72px
}

.gw {
    background-position: -32px -72px
}

.gy {
    background-position: -64px -72px
}

.hk {
    background-position: -96px -72px
}

.hm {
    background-position: -128px -72px
}

.hn {
    background-position: -160px -72px
}

.hr {
    background-position: -192px -72px
}

.ht {
    background-position: -224px -72px
}

.hu {
    background-position: -256px -72px
}

.id {
    background-position: -288px -72px
}

.ie {
    background-position: -320px -72px
}

.il {
    background-position: -352px -72px
}

.im {
    background-position: -384px -72px
}

.in {
    background-position: -416px -72px
}

.io {
    background-position: -448px -72px
}

.iq {
    background-position: -480px -72px
}

.ir {
    background-position: -512px -72px
}

.is {
    background-position: -544px -72px
}

.it {
    background-position: -576px -72px
}

.je {
    background-position: -608px -72px
}

.jm {
    background-position: -640px -72px
}

.jo {
    background-position: -672px -72px
}

.jp {
    background-position: -704px -72px
}

.ke {
    background-position: -736px -72px
}

.kg {
    background-position: -768px -72px
}

.kh {
    background-position: -800px -72px
}

.ki {
    background-position: -832px -72px
}

.km {
    background-position: -864px -72px
}

.kn {
    background-position: -896px -72px
}

.kp {
    background-position: -928px -72px
}

.kr {
    background-position: -960px -72px
}

.kw {
    background-position: -992px -72px
}

.ky {
    background-position: 0 -96px
}

.kz {
    background-position: -32px -96px
}

.la {
    background-position: -64px -96px
}

.lb {
    background-position: -96px -96px
}

.lc {
    background-position: -128px -96px
}

.li {
    background-position: -160px -96px
}

.lk {
    background-position: -192px -96px
}

.lr {
    background-position: -224px -96px
}

.ls {
    background-position: -256px -96px
}

.lt {
    background-position: -288px -96px
}

.lu {
    background-position: -320px -96px
}

.lv {
    background-position: -352px -96px
}

.ly {
    background-position: -384px -96px
}

.ma {
    background-position: -416px -96px
}

.mc {
    background-position: -448px -96px
}

.md {
    background-position: -480px -96px
}

.me {
    background-position: -512px -96px
}

.mf {
    background-position: -544px -96px
}

.mg {
    background-position: -576px -96px
}

.mh {
    background-position: -608px -96px
}

.mk {
    background-position: -640px -96px
}

.ml {
    background-position: -672px -96px
}

.mm {
    background-position: -704px -96px
}

.mn {
    background-position: -736px -96px
}

.mo {
    background-position: -768px -96px
}

.mp {
    background-position: -800px -96px
}

.mq {
    background-position: -832px -96px
}

.mr {
    background-position: -864px -96px
}

.ms {
    background-position: -896px -96px
}

.mt {
    background-position: -928px -96px
}

.mu {
    background-position: -960px -96px
}

.mv {
    background-position: -992px -96px
}

.mw {
    background-position: 0 -120px
}

.mx {
    background-position: -32px -120px
}

.my {
    background-position: -64px -120px
}

.mz {
    background-position: -96px -120px
}

.na {
    background-position: -128px -120px
}

.nc {
    background-position: -160px -120px
}

.ne {
    background-position: -192px -120px
}

.nf {
    background-position: -224px -120px
}

.ng {
    background-position: -256px -120px
}

.ni {
    background-position: -288px -120px
}

.nl {
    background-position: -320px -120px
}

.no {
    background-position: -352px -120px
}

.np {
    background-position: -384px -120px
}

.nr {
    background-position: -416px -120px
}

.nu {
    background-position: -448px -120px
}

.nz {
    background-position: -480px -120px
}

.om {
    background-position: -512px -120px
}

.pa {
    background-position: -544px -120px
}

.pe {
    background-position: -576px -120px
}

.pf {
    background-position: -608px -120px
}

.pg {
    background-position: -640px -120px
}

.ph {
    background-position: -672px -120px
}

.pk {
    background-position: -704px -120px
}

.pl {
    background-position: -736px -120px
}

.pm {
    background-position: -768px -120px
}

.pn {
    background-position: -800px -120px
}

.pr {
    background-position: -832px -120px
}

.ps {
    background-position: -864px -120px
}

.pt {
    background-position: -896px -120px
}

.pw {
    background-position: -928px -120px
}

.py {
    background-position: -960px -120px
}

.qa {
    background-position: -992px -120px
}

.re {
    background-position: 0 -144px
}

.ro {
    background-position: -32px -144px
}

.rs {
    background-position: -64px -144px
}

.ru {
    background-position: -96px -144px
}

.rw {
    background-position: -128px -144px
}

.sa {
    background-position: -160px -144px
}

.sb {
    background-position: -192px -144px
}

.sc {
    background-position: -224px -144px
}

.sd {
    background-position: -256px -144px
}

.se {
    background-position: -288px -144px
}

.sg {
    background-position: -320px -144px
}

.sh {
    background-position: -352px -144px
}

.si {
    background-position: -384px -144px
}

.sj {
    background-position: -416px -144px
}

.sk {
    background-position: -448px -144px
}

.sl {
    background-position: -480px -144px
}

.sm {
    background-position: -512px -144px
}

.sn {
    background-position: -544px -144px
}

.so {
    background-position: -576px -144px
}

.sr {
    background-position: -608px -144px
}

.ss {
    background-position: -640px -144px
}

.st {
    background-position: -672px -144px
}

.sv {
    background-position: -704px -144px
}

.sx {
    background-position: -736px -144px
}

.sy {
    background-position: -768px -144px
}

.sz {
    background-position: -800px -144px
}

.tc {
    background-position: -832px -144px
}

.td {
    background-position: -864px -144px
}

.tf {
    background-position: -896px -144px
}

.tg {
    background-position: -928px -144px
}

.th {
    background-position: -960px -144px
}

.tj {
    background-position: -992px -144px
}

.tk {
    background-position: 0 -168px
}

.tl {
    background-position: -32px -168px
}

.tm {
    background-position: -64px -168px
}

.tn {
    background-position: -96px -168px
}

.to {
    background-position: -128px -168px
}

.tr {
    background-position: -160px -168px
}

.tt {
    background-position: -192px -168px
}

.tv {
    background-position: -224px -168px
}

.tw {
    background-position: -256px -168px
}

.tz {
    background-position: -288px -168px
}

.ua {
    background-position: -320px -168px
}

.ug {
    background-position: -352px -168px
}

.um {
    background-position: -384px -168px
}

.un {
    background-position: -416px -168px
}

.us {
    background-position: -448px -168px
}

.uy {
    background-position: -480px -168px
}

.uz {
    background-position: -512px -168px
}

.va {
    background-position: -544px -168px
}

.vc {
    background-position: -576px -168px
}

.ve {
    background-position: -608px -168px
}

.vg {
    background-position: -640px -168px
}

.vi {
    background-position: -672px -168px
}

.vn {
    background-position: -704px -168px
}

.vu {
    background-position: -736px -168px
}

.wf {
    background-position: -768px -168px
}

.ye {
    background-position: -800px -168px
}

.ws {
    background-position: -832px -168px
}

.yt {
    background-position: -864px -168px
}

.za {
    background-position: -896px -168px
}

.zm {
    background-position: -928px -168px
}

.zw {
    background-position: -960px -168px
}

.zz {
    background-position: -992px -168px
}

.react-tel-input {
    position: relative;
    margin: auto
}

.widget-lg .react-tel-input {
    width: 330px
}

.widget-md .react-tel-input {
    width: 270px
}

.widget-sm .react-tel-input {
    width: 250px
}

.widget-xs .react-tel-input {
    width: 240px
}

.react-tel-input * {
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

.react-tel-input .hide {
    display: none
}

.react-tel-input .v-hide {
    visibility: hidden
}

.react-tel-input input[type=tel], .react-tel-input input[type=text] {
    position: relative;
    z-index: 0;
    margin-top: 0!important;
    margin-bottom: 0!important;
    padding-left: 62px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #cacaca;
    border-radius: 0;
    box-shadow: none;
    line-height: 25px;
    height: 39px;
    width: 100%
}

.react-tel-input input[type=tel]:focus, .react-tel-input input[type=text]:focus {
    border-color: #42bdff;
    border-left-color: #cacaca
}

.react-tel-input input[type=tel].invalid-number .react-tel-input input[type=tel]:not(.empty), .react-tel-input input[type=tel].invalid-number .react-tel-input input[type=text]:not(.empty), .react-tel-input input[type=text].invalid-number .react-tel-input input[type=tel]:not(.empty), .react-tel-input input[type=text].invalid-number .react-tel-input input[type=text]:not(.empty) {
    bottom: 1px;
    left: -1px;
    border: 1px solid #d79f9f;
    background-color: #faf0f0;
    border-left-color: #cacaca
}

.react-tel-input input[type=tel].invalid-number .react-tel-input input[type=tel]:not(.empty):focus, .react-tel-input input[type=tel].invalid-number .react-tel-input input[type=text]:not(.empty):focus, .react-tel-input input[type=text].invalid-number .react-tel-input input[type=tel]:not(.empty):focus, .react-tel-input input[type=text].invalid-number .react-tel-input input[type=text]:not(.empty):focus {
    border: 1px solid #d79f9f;
    border-left-color: #cacaca;
    background-color: #faf0f0
}

.react-tel-input .flag-dropdown {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0
}

.react-tel-input .flag-dropdown.open-dropdown {
    border-bottom: 0;
    border-radius: 3px 0 0 0
}

.react-tel-input .flag-dropdown.open-dropdown .selected-flag {
    border-radius: 3px 0 0 0
}

.react-tel-input .flag-dropdown:hover {
    cursor: pointer
}

.react-tel-input input[disabled]+.flag-dropdown:hover {
    cursor: default
}

.react-tel-input input[disabled]+.flag-dropdown:hover .selected-flag {
    background-color: transparent
}

.react-tel-input .selected-flag {
    width: 60px;
    height: 39px;
    margin-top: -1px;
    padding-left: 8px;
    margin-left: -1px
}

.react-tel-input .selected-flag .flag {
    position: absolute;
    margin-top: 7.5px
}

.react-tel-input .selected-flag .arrow {
    position: relative;
    top: 9px;
    left: 37px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #555
}

.react-tel-input .selected-flag .arrow.up {
    border-top: none;
    border-bottom: 6px solid #555
}

.react-tel-input .country-list {
    list-style: none;
    position: absolute;
    z-index: 2;
    padding: 0;
    margin: -1px 0 0;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
    background-color: #fff;
    border: 1px solid #ccc;
    overflow-y: scroll;
    border-radius: 3px;
    top: 43px
}

.widget-lg .react-tel-input .country-list {
    width: 330px
}

.widget-md .react-tel-input .country-list {
    width: 270px
}

.widget-sm .react-tel-input .country-list {
    width: 250px
}

.widget-lg .react-tel-input .country-list {
    max-height: 200px
}

.widget-md .react-tel-input .country-list {
    max-height: 130px
}

.widget-sm .react-tel-input .country-list {
    max-height: 90px
}

.widget-xs .react-tel-input .country-list {
    width: 240px
}

.widget-embedded .react-tel-input .country-list {
    max-height: 130px
}

.react-tel-input .country-list .country {
    padding: 5px 10px;
    text-align: left;
    line-height: 22px
}

.react-tel-input .country-list .country .dial-code {
    color: #999
}

.react-tel-input .country-list .country:hover {
    background-color: #e8f7fe
}

.react-tel-input .country-list .country.highlight {
    background-color: #c7e2f1
}

.react-tel-input .country-list .flag {
    float: left;
    display: inline-block;
    margin-right: 6px
}

.react-tel-input .country-list .country-name {
    margin-right: 6px
}

.channel {
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, .1);
    position: absolute;
    top: 0;
    padding-top: 44px;
    height: 100%;
    z-index: 3;
    background-color: #fff;
    overflow: hidden;
    opacity: 1;
    text-align: center;
    line-height: 1.5;
    font-size: 14px;
    display: flex
}

.channel, .channel.channel-visible {
    width: 100%
}

.channel.channel-hidden, .channel.channel-visible {
    transition: width .25s
}

.channel.channel-hidden {
    width: 0
}

.channel .content-wrapper {
    padding: 30px
}

@media (max-height:400px) {
    .widget-xs .channel .channel-header .channel-icon, .widget-xs .channel .channel-header .channel-name {
        display: none
    }
}

.channel .channel-header .channel-icon {
    margin-bottom: 40px;
    height: 65px
}

.widget-sm .channel .channel-header .channel-icon {
    margin-bottom: 20px
}

.channel .channel-header .channel-name {
    font-size: 18px;
    color: #464646;
    font-weight: 600;
    margin-bottom: 10px
}

.channel .channel-header .channel-description {
    margin-bottom: 20px;
    color: #787f8c
}

.channel .channel-content a, .channel .channel-content a:visited {
    color: #00aeff
}

.channel .channel-content a.error-link, .channel .channel-content a:visited.error-link {
    color: #e54054;
    cursor: pointer
}

.channel .channel-content .channel-content-value {
    font-weight: 600;
    color: #464646
}

.channel .channel-content .btn {
    width: 150px;
    border-radius: 20px
}

.channel .fb-button-wrapper {
    text-align: left;
    transform: translateX(-76px);
    margin-left: 50%
}

.sms-linking .phone-number {
    padding-right: 10px;
    padding-left: 10px
}

.sms-linking .warning-message {
    font-size: 13px;
    color: red
}

.sms-linking a {
    font-size: smaller;
    text-decoration: underline;
    float: right;
    padding-right: 3px;
    cursor: pointer
}

.sms-linking .btn {
    margin-top: 25px;
    text-align: center;
    border: 0
}

.widget-sm .sms-linking .btn {
    margin-top: 10px
}

.sms-linking.btn {
    margin-top: 25px
}

.sms-linking.pending-state {
    border-bottom: 1px solid #e4e4e4;
    text-align: left;
    padding-left: 5px
}

.sms-linking.pending-state .phone-number {
    color: #a9a9a9
}

.sms-linking.linked-state {
    border-bottom: 1px solid #e4e4e4;
    text-align: left;
    padding-left: 5px
}

.email-linking .email-input {
    border: 1px solid #f4f4f4;
    padding: 12px 12px 13px;
    margin-bottom: 15px
}

.email-linking .email-input:focus {
    padding-bottom: 12px;
    border-bottom-width: 2px
}

.email-linking .btn {
    padding: 5px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px
}

.email-linking .cancel-link {
    font-size: smaller;
    text-decoration: underline;
    cursor: pointer
}

.upload-enter {
    opacity: 0
}

.upload-enter-active {
    opacity: 1;
    transition: opacity .4s
}

.upload-exit {
    opacity: 1
}

.upload-exit-active {
    opacity: 0;
    transition: opacity .4s
}

.upload-container:after {
    position: absolute;
    bottom: -10px;
    left: 9px;
    box-sizing: border-box;
    width: 0;
    height: 0;
    content: "";
    transform: rotate(-45deg);
    transform-origin: 0 0;
    border: 5px solid #000;
    border-color: transparent transparent #fff #fff;
    box-shadow: -4px 4px 10px 0 rgba(51, 51, 51, .1)
}

.message-item .file-name:after {
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    max-width: 74px;
    content: attr(data-content-end);
    white-space: nowrap
}

.appear .appear-hidden {
    display: none
}

.appear .appear-visible {
    display: block
}

.close .close-hidden {
    display: none
}

.close .close-visible {
    display: block
}

body, html {
    height: 100%;
    width: 100%;
    position: relative;
    -webkit-text-size-adjust: 100%
}

#container, body, html {
    overflow: hidden;
    -webkit-font-smoothing: antialiased
}

#container {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
    text-rendering: optimizeLegibility;
    -moz-font-smoothing: antialiased;
    padding: 12px
}

#container .circular-loading {
    position: relative;
    margin: auto
}

#container .circular-loading.small {
    width: 15px;
    height: 15px
}

#container .circular-loading.large {
    width: 45px;
    height: 45px
}

#container .circular-loading svg {
    animation: rotator 2s linear infinite
}

#container .circular-loading svg circle {
    animation: dash 2s ease-in-out infinite;
    transform-origin: center;
    stroke-dasharray: 187;
    stroke-dashoffset: 0
}

#container .linear-loading {
    height: 3px;
    width: 100%;
    position: relative;
    overflow: hidden
}

#container .linear-loading .bar {
    box-shadow: 0 0 10px #29d, 0 0 5px #29d
}

#container .linear-loading .bar:before {
    animation: indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
}

#container .linear-loading .bar:after, #container .linear-loading .bar:before {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right
}

#container .linear-loading .bar:after {
    animation: indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite;
    animation-delay: 1.15s
}

#container #webview {
    position: absolute;
    display: flex;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(51, 45, 81, .4)
}

#container #webview .webview-container {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

#container #webview .webview-container.full {
    height: calc(100% - 29.333333333333332px)
}

#container #webview .webview-container.tall {
    height: 70%
}

#container #webview .webview-container.compact {
    height: 50%
}

#container #webview .webview-container.webview-content-enter, #container #webview .webview-container.webview-content-enter.compact, #container #webview .webview-container.webview-content-enter.full, #container #webview .webview-container.webview-content-enter.tall {
    height: 0
}

#container #webview .webview-container.webview-content-enter-active {
    transition: height .25s cubic-bezier(.455, .03, .515, .955)
}

#container #webview .webview-container.webview-content-enter-active.full {
    height: calc(100% - 44px)
}

#container #webview .webview-container.webview-content-enter-active.tall {
    height: 70%
}

#container #webview .webview-container.webview-content-enter-active.compact {
    height: 50%
}

#container #webview .webview-container.webview-content-exit.full {
    height: calc(100% - 44px)
}

#container #webview .webview-container.webview-content-exit.tall {
    height: 70%
}

#container #webview .webview-container.webview-content-exit.compact {
    height: 50%
}

#container #webview .webview-container.webview-content-exit-active {
    transition: height .25s cubic-bezier(.455, .03, .515, .955)
}

#container #webview .webview-container.webview-content-exit-active, #container #webview .webview-container.webview-content-exit-active.compact, #container #webview .webview-container.webview-content-exit-active.full, #container #webview .webview-container.webview-content-exit-active.tall {
    height: 0
}

#container #webview .webview-container .linear-loading {
    position: absolute
}

#container #webview-header {
    z-index: 10;
    height: 44px;
    line-height: 32px;
    padding: 6px 15px;
    position: relative;
    background-color: #f4f4f4;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    box-sizing: content-box;
    color: #333;
    max-height: 32px;
    cursor: default;
    text-align: center
}

.ie11 #container #webview-header.fixed-intro {
    height: 56px
}

.widget-xs #container #webview-header {
    border-radius: 0
}

#container #webview-header .fa {
    line-height: 28px;
    color: #333;
    font-size: 15px
}

#container #webview-header .close-handle {
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 10px
}

#container #webview-header .back-handle {
    cursor: pointer;
    display: inline-block;
    margin-right: 8px;
    height: 30px
}

#container #webview-header .close-handle .fa {
    font-size: 17px
}

#container #webview-header .settings-content {
    display: inline-block;
    height: 44px;
    margin-top: -6px;
    margin-left: -15px
}

#container #webview-header .settings-content>div {
    margin-top: 6px;
    margin-left: 15px
}

#container #webview-header .header-content {
    padding-right: 20px;
    padding-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: inherit
}

#container #webview-iframe-container {
    border: none;
    position: relative;
    width: 100%;
    height: calc(100% - 44px);
    -webkit-overflow-scrolling: touch;
    overflow: scroll
}

#container #webview-iframe {
    border: none;
    position: relative;
    width: 100%;
    height: 100%
}

#container .webview-enter {
    opacity: 0
}

#container .webview-enter-active {
    transition: opacity .4s;
    opacity: 1
}

#container .webview-exit {
    opacity: 1
}

#container .webview-exit-active {
    transition: opacity .4s;
    opacity: 0
}

#container #conversation {
    flex: auto;
    position: relative;
    padding: 0;
    height: calc(100% - 89px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    transition: padding-top .5s
}

.widget-xs #container #conversation {
    height: calc(100% - 89px)
}

#container #conversation.no-intro {
    height: auto
}

.widget-embedded #container #conversation.no-intro {
    height: calc(100% - 89px)
}

#container #conversation .messages-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-height: 100%
}

#container #conversation .fetch-history {
    width: 100%;
    text-align: center;
    font-style: italic;
    color: #b2b2b2;
    padding-top: 24px;
    padding-bottom: 5px
}

#container #conversation .fetch-history a, #container #conversation .fetch-history a:active, #container #conversation .fetch-history a:focus, #container #conversation .fetch-history a:hover, #container #conversation .fetch-history a:link, #container #conversation .fetch-history a:visited {
    color: #b2b2b2
}

#container #conversation .row {
    clear: both;
    padding-bottom: 0;
    padding-top: 2px
}

#container #conversation .row.row-appmaker-first:not(.row-appmaker-last) .msg-wrapper .msg, #container #conversation .row.row-appmaker-first:not(.row-appmaker-last) .msg-wrapper .msg-image {
    border-bottom-left-radius: 2px
}

#container #conversation .row.row-appmaker-middle .msg-wrapper .msg, #container #conversation .row.row-appmaker-middle .msg-wrapper .msg-image {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px
}

#container #conversation .row.row-appmaker-last {
    margin-bottom: 10px
}

#container #conversation .row.row-appmaker-last:not(.row-appmaker-first) .msg-wrapper .msg, #container #conversation .row.row-appmaker-last:not(.row-appmaker-first) .msg-wrapper .msg-image {
    border-top-left-radius: 2px
}

#container #conversation .row.row-appuser-first:not(.row-appuser-last) .msg-wrapper .msg, #container #conversation .row.row-appuser-first:not(.row-appuser-last) .msg-wrapper .msg-image {
    border-bottom-right-radius: 2px
}

#container #conversation .row.row-appuser-middle .msg-wrapper .msg, #container #conversation .row.row-appuser-middle .msg-wrapper .msg-image {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px
}

#container #conversation .row.row-appuser-last {
    margin-bottom: 10px
}

#container #conversation .row.row-appuser-last:not(.row-appuser-first) .msg-wrapper .msg, #container #conversation .row.row-appuser-last:not(.row-appuser-first) .msg-wrapper .msg-image {
    border-top-right-radius: 2px
}

#container #conversation .row .msg-wrapper {
    max-width: 100%;
    position: relative;
    display: flex;
    flex-direction: row
}

#container #conversation .row .msg-wrapper .msg, #container #conversation .row .msg-wrapper .msg-image {
    font-size: 14px;
    overflow: hidden;
    line-height: 1.25;
    position: relative;
    border-radius: 14px;
    border-left-color: #00aeff;
    transition: opacity .15s;
    overflow-wrap: break-word;
    word-break: break-word
}

#container #conversation .row .msg-wrapper .msg-image .imageloader, #container #conversation .row .msg-wrapper .msg .imageloader {
    display: block;
    overflow: hidden;
    text-align: center;
    height: 100%;
    width: 100%;
    position: relative
}

#container #conversation .row .msg-wrapper .msg-image .carousel-item .imageloader img, #container #conversation .row .msg-wrapper .msg .carousel-item .imageloader img {
    width: 100%;
    height: auto;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#container #conversation .row .msg-wrapper .msg-image .carousel-item .imageloader.wide img, #container #conversation .row .msg-wrapper .msg .carousel-item .imageloader.wide img {
    height: 100%;
    width: auto
}

#container #conversation .row .msg-wrapper .msg-image .preloader-container, #container #conversation .row .msg-wrapper .msg .preloader-container {
    min-width: 150px;
    min-height: 100px
}

#container #conversation .row .msg-wrapper .msg-image .preloader-container img, #container #conversation .row .msg-wrapper .msg .preloader-container img {
    max-width: 100%
}

#container #conversation .row .msg-wrapper .msg-image .image-container, #container #conversation .row .msg-wrapper .msg .image-container {
    position: relative
}

#container #conversation .row .msg-wrapper .msg-image .image-overlay, #container #conversation .row .msg-wrapper .msg .image-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 100%, .5)
}

#container #conversation .row .msg-wrapper .msg-image .spinner, #container #conversation .row .msg-wrapper .msg .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#container #conversation .row .msg-wrapper .msg-image img, #container #conversation .row .msg-wrapper .msg img {
    max-width: 100%;
    height: auto
}

#container #conversation .row .msg-wrapper .msg-image .three-bounce .bounce1, #container #conversation .row .msg-wrapper .msg-image .three-bounce .bounce2, #container #conversation .row .msg-wrapper .msg-image .three-bounce .bounce3, #container #conversation .row .msg-wrapper .msg .three-bounce .bounce1, #container #conversation .row .msg-wrapper .msg .three-bounce .bounce2, #container #conversation .row .msg-wrapper .msg .three-bounce .bounce3 {
    height: 15px;
    width: 15px;
    background-color: #00aeff
}

#container #conversation .row .msg-wrapper .action {
    margin-bottom: 5px
}

#container #conversation .row .msg-wrapper .action .btn {
    display: block;
    white-space: inherit;
    transition: width .1s;
    border-radius: 7px;
    margin-right: 8px;
    margin-left: 8px
}

#container #conversation .row .msg-wrapper .action:last-child {
    margin-bottom: 0
}

#container #conversation .row .msg-wrapper .message-text {
    display: inline-block;
    max-width: 250px
}

#container #conversation .row .msg-wrapper .message-item {
    padding: 8px 13px 0;
    line-height: 1.3
}

#container #conversation .row .msg-wrapper .last-item {
    padding-bottom: 9px
}

#container #conversation .row .msg-wrapper .message-location-loading {
    padding: 0;
    margin: 6px 30px
}

#container #conversation .row .msg-wrapper .message-location-loading .fading-circle {
    width: 23px;
    height: 23px
}

#container #conversation .row .msg-wrapper .msg-unsent {
    opacity: .3
}

#container #conversation .row .msg-wrapper .message-separator {
    margin-left: 13px;
    margin-right: 13px;
    margin-top: -9px;
    padding-bottom: 9px
}

#container #conversation .row.left-row .msg-wrapper {
    align-items: flex-end
}

#container #conversation .row.left-row .msg-wrapper .msg, #container #conversation .row.left-row .msg-wrapper .msg-image {
    background-color: #f4f4f4;
    color: #424242;
    max-width: 250px
}

#container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel, #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel {
    background-color: transparent;
    max-width: 100%!important;
    margin-left: -45px
}

#container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel .carousel-container .scroll-container, #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .scroll-container {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none
}

#container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel .carousel-container .scroll-container::-webkit-scrollbar, #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .scroll-container::-webkit-scrollbar {
    display: none;
    width: 0!important
}

#container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel .carousel-container .scroll-container .carousel-content, #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .scroll-container .carousel-content {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -o-user-select: text;
    -ms-user-select: text
}

#container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel .carousel-container .carousel-item .btn:active, #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .carousel-item .btn:active {
    box-shadow: none
}

#container #conversation .row.left-row .msg-wrapper .msg-image:after, #container #conversation .row.left-row .msg-wrapper .msg:after {
    right: 100%;
    border-color: hsla(0, 0%, 93%, 0);
    border-right-color: #fff
}

#container #conversation .row.left-row .msg-wrapper .msg-image a.link, #container #conversation .row.left-row .msg-wrapper .msg-image a.link:visited, #container #conversation .row.left-row .msg-wrapper .msg a.link, #container #conversation .row.left-row .msg-wrapper .msg a.link:visited {
    color: #00aeff
}

#container #conversation .row.left-row .msg-wrapper .message-separator {
    border-bottom: 1px solid rgba(66, 66, 66, .3)
}

#container #conversation .row.right-row {
    margin-right: 10px
}

#container #conversation .row.right-row .msg-wrapper {
    flex-direction: row-reverse
}

#container #conversation .row.right-row .msg-wrapper .msg, #container #conversation .row.right-row .msg-wrapper .msg-image {
    background-color: #00aeff;
    float: right;
    color: #fff;
    max-width: 204px
}

#container #conversation .row.right-row .msg-wrapper .msg-image:after, #container #conversation .row.right-row .msg-wrapper .msg:after {
    left: 100%;
    border-color: rgba(0, 174, 255, 0);
    border-left-color: inherit
}

#container #conversation .row.right-row .msg-wrapper .msg-image a.link, #container #conversation .row.right-row .msg-wrapper .msg-image a.link:visited, #container #conversation .row.right-row .msg-wrapper .msg a.link, #container #conversation .row.right-row .msg-wrapper .msg a.link:visited {
    color: #fff
}

#container #conversation .row.right-row .msg-wrapper .msg-image {
    background-color: transparent
}

#container #conversation .row.right-row .msg-wrapper .message-separator {
    border-bottom: 1px solid hsla(0, 0%, 100%, .3)
}

#container #conversation .row:last-child {
    padding-bottom: 10px
}

#container #conversation .row .__react_component_tooltip {
    padding: 8px 10px;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    background-color: #424242
}

#container #conversation .row .__react_component_tooltip:after {
    border-bottom-color: #424242
}

#container #conversation .row .__react_component_tooltip.show {
    opacity: 1
}

#container #conversation .clear {
    clear: both
}

#container #conversation::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 -6px 0 0 #fff, inset 0 6px 0 0 #fff;
    background-color: #f4f4f4
}

#container #conversation::-webkit-scrollbar {
    width: 8px;
    background-color: #fff
}

#container #conversation::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 -6px 0 0 #fff, inset 0 6px 0 0 #fff;
    background-color: hsla(0, 0%, 82%, .97)
}

#container #conversation .logo {
    padding-bottom: 10px;
    margin-left: calc(50% - 83px)
}

#container #conversation .logo a {
    font-size: 12px;
    color: #bbb;
    text-decoration: none
}

#container #conversation .logo .image {
    position: relative;
    left: 2px;
    top: 3px;
    width: 87px;
    vertical-align: baseline
}

#container #conversation .from {
    white-space: nowrap;
    top: -20px;
    font-size: 12px;
    color: #787f8c;
    padding-left: 12px;
    margin-bottom: 2px;
    margin-left: 45px
}

#container #conversation .connect-notification {
    display: inline-block;
    padding: 20px;
    line-height: 1.3;
    font-size: 15px;
    text-align: left;
    border-radius: 14px;
    background-color: #f4f4f4;
    color: #424242;
    max-width: 90%;
    margin-left: 9px;
    margin-top: 5px;
    margin-bottom: 15px
}

#container #conversation .connect-notification p {
    margin-top: 0
}

#container #conversation .connect-notification .connect-notification-channels {
    display: flex
}

#container #conversation .connect-notification .connect-notification-channels .connect-notification-icon {
    width: 70px;
    max-width: 25%;
    opacity: .75;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    transition: opacity .15s
}

#container #conversation .connect-notification .connect-notification-channels .connect-notification-icon:hover {
    opacity: 1
}

#container #conversation .connect-notification .connect-notification-channels .connect-notification-icon img {
    width: 40px;
    display: block;
    margin-bottom: 10px
}

#container #conversation .connect-notification .connect-notification-channels .connect-notification-icon span {
    font-size: 12px
}

#container #conversation .connect-notification .connect-notification-channels .connect-notification-icon.extra-count .count {
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 50%
}

#container #conversation .conversation-timestamp-header {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    color: #b2b2b2;
    margin-top: 25px;
    margin-bottom: 15px
}

#container a, #container div, #container form, #container input, #container label {
    box-sizing: border-box
}

#container #wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, .15);
    overflow: hidden
}

.widget-lg #container #wrapper {
    width: 410px;
    height: 640px
}

.widget-md #container #wrapper {
    width: 350px;
    height: 480px
}

.widget-sm #container #wrapper {
    width: 330px;
    height: 420px
}

.widget-xs #container #wrapper {
    height: 100%;
    border-radius: 0
}

.widget-xs #container {
    padding: 0;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    border-radius: 0;
    width: 100%;
    border: none
}

.widget-xs #container, .widget-xs #container.appear, .widget-xs #container.appear #wrapper {
    height: 100%;
    max-height: 100%
}

.widget-xs #container #wrapper {
    width: 100%;
    max-width: 100%
}

#container .content-wrapper {
    overflow-y: auto
}

#container .content-wrapper::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 -6px 0 0 #fff, inset 0 6px 0 0 #fff;
    background-color: #f4f4f4
}

#container .content-wrapper::-webkit-scrollbar {
    width: 8px;
    background-color: #fff
}

#container .content-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 -6px 0 0 #fff, inset 0 6px 0 0 #fff;
    background-color: hsla(0, 0%, 82%, .97)
}

.widget-lg #container .content-wrapper {
    width: 410px;
    height: 640px
}

.widget-md #container .content-wrapper {
    width: 350px;
    height: 480px
}

.widget-sm #container .content-wrapper {
    width: 330px;
    height: 420px
}

.widget-xs #container .content-wrapper {
    width: 100%;
    height: 100%
}

.widget-embedded #container {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    color: #333;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    padding: 0;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute
}

.widget-embedded #container .circular-loading {
    position: relative;
    margin: auto
}

.widget-embedded #container .circular-loading.small {
    width: 15px;
    height: 15px
}

.widget-embedded #container .circular-loading.large {
    width: 45px;
    height: 45px
}

.widget-embedded #container .circular-loading svg {
    animation: rotator 2s linear infinite
}

.widget-embedded #container .circular-loading svg circle {
    animation: dash 2s ease-in-out infinite;
    transform-origin: center;
    stroke-dasharray: 187;
    stroke-dashoffset: 0
}

@keyframes rotator {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(270deg)
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187
    }
    50% {
        stroke-dashoffset: 46.75;
        transform: rotate(135deg)
    }
    to {
        stroke-dashoffset: 187;
        transform: rotate(450deg)
    }
}

.widget-embedded #container .linear-loading {
    height: 3px;
    width: 100%;
    position: relative;
    overflow: hidden
}

.widget-embedded #container .linear-loading .bar {
    box-shadow: 0 0 10px #29d, 0 0 5px #29d
}

.widget-embedded #container .linear-loading .bar:before {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    animation: indeterminate 2.1s cubic-bezier(.65, .815, .735, .395) infinite
}

.widget-embedded #container .linear-loading .bar:after {
    content: "";
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    animation: indeterminate-short 2.1s cubic-bezier(.165, .84, .44, 1) infinite;
    animation-delay: 1.15s
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%
    }
    60% {
        left: 100%;
        right: -90%
    }
    to {
        left: 100%;
        right: -90%
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%
    }
    60% {
        left: 107%;
        right: -8%
    }
    to {
        left: 107%;
        right: -8%
    }
}

.widget-embedded #container #webview {
    position: absolute;
    display: flex;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(51, 45, 81, .4)
}

.widget-embedded #container #webview .webview-container {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px
}

.widget-embedded #container #webview .webview-container.full {
    height: calc(100% - 29.333333333333332px)
}

.widget-embedded #container #webview .webview-container.tall {
    height: 70%
}

.widget-embedded #container #webview .webview-container.compact {
    height: 50%
}

.widget-embedded #container #webview .webview-container.webview-content-enter, .widget-embedded #container #webview .webview-container.webview-content-enter.compact, .widget-embedded #container #webview .webview-container.webview-content-enter.full, .widget-embedded #container #webview .webview-container.webview-content-enter.tall {
    height: 0
}

.widget-embedded #container #webview .webview-container.webview-content-enter-active {
    transition: height .25s cubic-bezier(.455, .03, .515, .955)
}

.widget-embedded #container #webview .webview-container.webview-content-enter-active.full {
    height: calc(100% - 44px)
}

.widget-embedded #container #webview .webview-container.webview-content-enter-active.tall {
    height: 70%
}

.widget-embedded #container #webview .webview-container.webview-content-enter-active.compact {
    height: 50%
}

.widget-embedded #container #webview .webview-container.webview-content-exit.full {
    height: calc(100% - 44px)
}

.widget-embedded #container #webview .webview-container.webview-content-exit.tall {
    height: 70%
}

.widget-embedded #container #webview .webview-container.webview-content-exit.compact {
    height: 50%
}

.widget-embedded #container #webview .webview-container.webview-content-exit-active {
    transition: height .25s cubic-bezier(.455, .03, .515, .955)
}

.widget-embedded #container #webview .webview-container.webview-content-exit-active, .widget-embedded #container #webview .webview-container.webview-content-exit-active.compact, .widget-embedded #container #webview .webview-container.webview-content-exit-active.full, .widget-embedded #container #webview .webview-container.webview-content-exit-active.tall {
    height: 0
}

.widget-embedded #container #webview .webview-container .linear-loading {
    position: absolute
}

.widget-embedded #container #webview-header {
    z-index: 10;
    height: 44px;
    line-height: 32px;
    padding: 6px 15px;
    position: relative;
    background-color: #f4f4f4;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    box-sizing: content-box;
    color: #333;
    max-height: 32px;
    cursor: default;
    text-align: center
}

.ie11 .widget-embedded #container #webview-header.fixed-intro {
    height: 56px
}

.widget-xs .widget-embedded #container #webview-header {
    border-radius: 0
}

.widget-embedded #container #webview-header .fa {
    line-height: 28px;
    color: #333;
    font-size: 15px
}

.widget-embedded #container #webview-header .close-handle {
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 10px
}

.widget-embedded #container #webview-header .back-handle {
    cursor: pointer;
    display: inline-block;
    margin-right: 8px;
    height: 30px
}

.widget-embedded #container #webview-header .close-handle .fa {
    font-size: 17px
}

.widget-embedded #container #webview-header .settings-content {
    display: inline-block;
    height: 44px;
    margin-top: -6px;
    margin-left: -15px
}

.widget-embedded #container #webview-header .settings-content>div {
    margin-top: 6px;
    margin-left: 15px
}

.widget-embedded #container #webview-header .header-content {
    padding-right: 20px;
    padding-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: inherit
}

.widget-embedded #container #webview-iframe-container {
    border: none;
    position: relative;
    width: 100%;
    height: calc(100% - 44px);
    -webkit-overflow-scrolling: touch;
    overflow: scroll
}

.widget-embedded #container #webview-iframe {
    border: none;
    position: relative;
    width: 100%;
    height: 100%
}

.widget-embedded #container .webview-enter {
    opacity: 0
}

.widget-embedded #container .webview-enter-active {
    transition: opacity .4s;
    opacity: 1
}

.widget-embedded #container .webview-exit {
    opacity: 1
}

.widget-embedded #container .webview-exit-active {
    transition: opacity .4s;
    opacity: 0
}

.widget-embedded #container #conversation {
    flex: auto;
    position: relative;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    transition: padding-top .5s
}

.widget-xs .widget-embedded #container #conversation {
    height: calc(100% - 89px)
}

.widget-embedded #container #conversation.no-intro {
    height: auto
}

.widget-embedded .widget-embedded #container #conversation.no-intro {
    height: calc(100% - 89px)
}

.widget-embedded #container #conversation .messages-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-height: 100%
}

.widget-embedded #container #conversation .fetch-history {
    width: 100%;
    text-align: center;
    font-style: italic;
    color: #b2b2b2;
    padding-top: 24px;
    padding-bottom: 5px
}

.widget-embedded #container #conversation .fetch-history a, .widget-embedded #container #conversation .fetch-history a:active, .widget-embedded #container #conversation .fetch-history a:focus, .widget-embedded #container #conversation .fetch-history a:hover, .widget-embedded #container #conversation .fetch-history a:link, .widget-embedded #container #conversation .fetch-history a:visited {
    color: #b2b2b2
}

.widget-embedded #container #conversation .row {
    clear: both;
    padding-bottom: 0;
    padding-top: 2px
}

.widget-embedded #container #conversation .row.row-appmaker-first:not(.row-appmaker-last) .msg-wrapper .msg, .widget-embedded #container #conversation .row.row-appmaker-first:not(.row-appmaker-last) .msg-wrapper .msg-image {
    border-bottom-left-radius: 2px
}

.widget-embedded #container #conversation .row.row-appmaker-middle .msg-wrapper .msg, .widget-embedded #container #conversation .row.row-appmaker-middle .msg-wrapper .msg-image {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px
}

.widget-embedded #container #conversation .row.row-appmaker-last {
    margin-bottom: 10px
}

.widget-embedded #container #conversation .row.row-appmaker-last:not(.row-appmaker-first) .msg-wrapper .msg, .widget-embedded #container #conversation .row.row-appmaker-last:not(.row-appmaker-first) .msg-wrapper .msg-image {
    border-top-left-radius: 2px
}

.widget-embedded #container #conversation .row.row-appuser-first:not(.row-appuser-last) .msg-wrapper .msg, .widget-embedded #container #conversation .row.row-appuser-first:not(.row-appuser-last) .msg-wrapper .msg-image {
    border-bottom-right-radius: 2px
}

.widget-embedded #container #conversation .row.row-appuser-middle .msg-wrapper .msg, .widget-embedded #container #conversation .row.row-appuser-middle .msg-wrapper .msg-image {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px
}

.widget-embedded #container #conversation .row.row-appuser-last {
    margin-bottom: 10px
}

.widget-embedded #container #conversation .row.row-appuser-last:not(.row-appuser-first) .msg-wrapper .msg, .widget-embedded #container #conversation .row.row-appuser-last:not(.row-appuser-first) .msg-wrapper .msg-image {
    border-top-right-radius: 2px
}

.widget-embedded #container #conversation .row .msg-wrapper {
    max-width: 100%;
    position: relative;
    display: flex;
    flex-direction: row
}

.widget-embedded #container #conversation .row .msg-wrapper .msg, .widget-embedded #container #conversation .row .msg-wrapper .msg-image {
    font-size: 14px;
    overflow: hidden;
    line-height: 1.25;
    position: relative;
    border-radius: 14px;
    border-left-color: #00aeff;
    transition: opacity .15s;
    overflow-wrap: break-word;
    word-break: break-word
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .imageloader, .widget-embedded #container #conversation .row .msg-wrapper .msg .imageloader {
    display: block;
    overflow: hidden;
    text-align: center;
    height: 100%;
    width: 100%;
    position: relative
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .carousel-item .imageloader img, .widget-embedded #container #conversation .row .msg-wrapper .msg .carousel-item .imageloader img {
    width: 100%;
    height: auto;
    max-width: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .carousel-item .imageloader.wide img, .widget-embedded #container #conversation .row .msg-wrapper .msg .carousel-item .imageloader.wide img {
    height: 100%;
    width: auto
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .preloader-container, .widget-embedded #container #conversation .row .msg-wrapper .msg .preloader-container {
    min-width: 150px;
    min-height: 100px
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .preloader-container img, .widget-embedded #container #conversation .row .msg-wrapper .msg .preloader-container img {
    max-width: 100%
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .image-container, .widget-embedded #container #conversation .row .msg-wrapper .msg .image-container {
    position: relative
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .image-overlay, .widget-embedded #container #conversation .row .msg-wrapper .msg .image-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 100%, .5)
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .spinner, .widget-embedded #container #conversation .row .msg-wrapper .msg .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image img, .widget-embedded #container #conversation .row .msg-wrapper .msg img {
    max-width: 100%;
    height: auto
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .three-bounce .bounce1, .widget-embedded #container #conversation .row .msg-wrapper .msg-image .three-bounce .bounce2, .widget-embedded #container #conversation .row .msg-wrapper .msg-image .three-bounce .bounce3, .widget-embedded #container #conversation .row .msg-wrapper .msg .three-bounce .bounce1, .widget-embedded #container #conversation .row .msg-wrapper .msg .three-bounce .bounce2, .widget-embedded #container #conversation .row .msg-wrapper .msg .three-bounce .bounce3 {
    height: 15px;
    width: 15px;
    background-color: #00aeff
}

.widget-embedded #container #conversation .row .msg-wrapper .action {
    margin-bottom: 5px
}

.widget-embedded #container #conversation .row .msg-wrapper .action .btn {
    display: block;
    white-space: inherit;
    transition: width .1s;
    border-radius: 7px;
    margin-right: 8px;
    margin-left: 8px
}

.widget-embedded #container #conversation .row .msg-wrapper .action:last-child {
    margin-bottom: 0
}

.widget-embedded #container #conversation .row .msg-wrapper .message-text {
    display: inline-block;
    max-width: 178px
}

.widget-embedded #container #conversation .row .msg-wrapper .message-item {
    padding: 8px 13px 0;
    line-height: 1.3
}

.widget-embedded #container #conversation .row .msg-wrapper .last-item {
    padding-bottom: 9px
}

.widget-embedded #container #conversation .row .msg-wrapper .message-location-loading {
    padding: 0;
    margin: 6px 30px
}

.widget-embedded #container #conversation .row .msg-wrapper .message-location-loading .fading-circle {
    width: 23px;
    height: 23px
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-unsent {
    opacity: .3
}

.widget-embedded #container #conversation .row .msg-wrapper .message-separator {
    margin-left: 13px;
    margin-right: 13px;
    margin-top: -9px;
    padding-bottom: 9px
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper {
    align-items: flex-end
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-image {
    background-color: #f4f4f4;
    color: #424242;
    max-width: 200px
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel {
    background-color: transparent;
    max-width: 100%!important;
    margin-left: -45px
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel .carousel-container .scroll-container, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .scroll-container {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel .carousel-container .scroll-container::-webkit-scrollbar, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .scroll-container::-webkit-scrollbar {
    display: none;
    width: 0!important
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel .carousel-container .scroll-container .carousel-content, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .scroll-container .carousel-content {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -o-user-select: text;
    -ms-user-select: text
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-image.msg-carousel .carousel-container .carousel-item .btn:active, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .carousel-item .btn:active {
    box-shadow: none
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-image:after, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg:after {
    right: 100%;
    border-color: hsla(0, 0%, 93%, 0);
    border-right-color: #fff
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-image a.link, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-image a.link:visited, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg a.link, .widget-embedded #container #conversation .row.left-row .msg-wrapper .msg a.link:visited {
    color: #00aeff
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .message-separator {
    border-bottom: 1px solid rgba(66, 66, 66, .3)
}

.widget-embedded #container #conversation .row.right-row {
    margin-right: 10px
}

.widget-embedded #container #conversation .row.right-row .msg-wrapper {
    flex-direction: row-reverse
}

.widget-embedded #container #conversation .row.right-row .msg-wrapper .msg, .widget-embedded #container #conversation .row.right-row .msg-wrapper .msg-image {
    background-color: #00aeff;
    float: right;
    color: #fff;
    max-width: 204px
}

.widget-embedded #container #conversation .row.right-row .msg-wrapper .msg-image:after, .widget-embedded #container #conversation .row.right-row .msg-wrapper .msg:after {
    left: 100%;
    border-color: rgba(0, 174, 255, 0);
    border-left-color: inherit
}

.widget-embedded #container #conversation .row.right-row .msg-wrapper .msg-image a.link, .widget-embedded #container #conversation .row.right-row .msg-wrapper .msg-image a.link:visited, .widget-embedded #container #conversation .row.right-row .msg-wrapper .msg a.link, .widget-embedded #container #conversation .row.right-row .msg-wrapper .msg a.link:visited {
    color: #fff
}

.widget-embedded #container #conversation .row.right-row .msg-wrapper .msg-image {
    background-color: transparent
}

.widget-embedded #container #conversation .row.right-row .msg-wrapper .message-separator {
    border-bottom: 1px solid hsla(0, 0%, 100%, .3)
}

.widget-embedded #container #conversation .row:last-child {
    padding-bottom: 10px
}

.widget-embedded #container #conversation .row .__react_component_tooltip {
    padding: 8px 10px;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    background-color: #424242
}

.widget-embedded #container #conversation .row .__react_component_tooltip:after {
    border-bottom-color: #424242
}

.widget-embedded #container #conversation .row .__react_component_tooltip.show {
    opacity: 1
}

.widget-embedded #container #conversation .clear {
    clear: both
}

.widget-embedded #container #conversation::-webkit-scrollbar-track {
    border-radius: 10px;
    box-shadow: inset 0 -6px 0 0 #fff, inset 0 6px 0 0 #fff;
    background-color: #f4f4f4
}

.widget-embedded #container #conversation::-webkit-scrollbar {
    width: 8px;
    background-color: #fff
}

.widget-embedded #container #conversation::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 -6px 0 0 #fff, inset 0 6px 0 0 #fff;
    background-color: hsla(0, 0%, 82%, .97)
}

.widget-embedded #container #conversation .logo {
    padding-bottom: 10px;
    margin-left: calc(50% - 83px)
}

.widget-embedded #container #conversation .logo a {
    font-size: 12px;
    color: #bbb;
    text-decoration: none
}

.widget-embedded #container #conversation .logo .image {
    position: relative;
    left: 2px;
    top: 3px;
    width: 87px;
    vertical-align: baseline
}

.widget-embedded #container #conversation .from {
    white-space: nowrap;
    top: -20px;
    font-size: 12px;
    color: #787f8c;
    padding-left: 12px;
    margin-bottom: 2px;
    margin-left: 45px
}

.widget-embedded #container #conversation .connect-notification {
    display: inline-block;
    padding: 20px;
    line-height: 1.3;
    font-size: 15px;
    text-align: left;
    border-radius: 14px;
    background-color: #f4f4f4;
    color: #424242;
    max-width: 90%;
    margin-left: 9px;
    margin-top: 5px;
    margin-bottom: 15px
}

.widget-embedded #container #conversation .connect-notification p {
    margin-top: 0
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels {
    display: flex
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels .connect-notification-icon {
    width: 70px;
    max-width: 25%;
    opacity: .75;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    transition: opacity .15s
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels .connect-notification-icon:hover {
    opacity: 1
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels .connect-notification-icon img {
    width: 40px;
    display: block;
    margin-bottom: 10px
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels .connect-notification-icon span {
    font-size: 12px
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels .connect-notification-icon.extra-count .count {
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 50%
}

.widget-embedded #container #conversation .conversation-timestamp-header {
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    color: #b2b2b2;
    margin-top: 25px;
    margin-bottom: 15px
}

.widget-embedded #container a, .widget-embedded #container div, .widget-embedded #container form, .widget-embedded #container input, .widget-embedded #container label {
    box-sizing: border-box
}

.widget-embedded #container #wrapper {
    display: flex;
    flex-direction: column;
    background: #fff;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 0;
    box-shadow: none;
    border: none
}

.widget-embedded #container #header, .widget-embedded #container #settings-header {
    cursor: default;
    border-radius: 0
}

.widget-embedded #container #header .close-handle, .widget-embedded #container #header .show-handle, .widget-embedded #container #settings-header .close-handle, .widget-embedded #container #settings-header .show-handle {
    display: none
}

.widget-embedded #container #conversation {
    height: calc(100% - 89px)
}

.widget-embedded #container #conversation .messages-container {
    position: relative
}

.widget-embedded #container #settings-handle {
    display: block;
    right: 10px
}

.widget-embedded #container #footer, .widget-embedded #container .intro-pane {
    flex: 0 0 auto
}

.widget-embedded #container .settings {
    width: 100%
}

.widget-xs html.widget-opened, .widget-xs html.widget-opened body {
    overflow: hidden;
    position: relative;
    -webkit-overflow-scrolling: auto;
    max-height: 100%;
    height: 100%;
    width: 100%
}

.widget-xs html.widget-opened #container #header #settings-handle, .widget-xs html.widget-opened body #container #header #settings-handle {
    height: 40px;
    width: 40px;
    right: 40px
}

.widget-xs html.widget-opened #container #header .close-handle, .widget-xs html.widget-opened body #container #header .close-handle {
    height: 40px;
    width: 40px;
    right: 0
}

#container.ios-device {
    -webkit-text-size-adjust: 100%
}

@media print {
    #container, #messenger-button {
        display: none
    }
}

.fa-times:before{
	content: "x";
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
/*     font-weight: bold; */
    font-size: 21px;
}

div.carousel-title-custom {
  white-space: normal !important;
  height: 55px !important; /*valor minim 3 linies al titol*/
  margin: 15px 8px 5px;
  font-weight: 500;
  font-size: 15px;
  color: rgb(28, 28, 28);
  overflow: hidden;
  text-overflow: ellipsis;
}

div.carousel-description {

   flex: none !important;

}

div.carousel-title-custom { 

    white-space: normal !important;
    height: 55px !important; /*valor minim 3 linies al titol*/
    margin: 15px 8px 5px;
    font-weight: 500;
    font-size: 15px;
    color: rgb(28, 28, 28);
    overflow: hidden;
    text-overflow: ellipsis;

}