/*!
 * fivn 2.1.1 
 * License: https://five9.com/chat/terms.html
 */


:root {
    --breakpointSmall: 480px;
    --breakpointMedium: 768px;
    --breakpointLarge: 1024px;
}

@media only screen and (max-width: var(--breakpointSmall)) {
    :root {
        --fontSizeSmall: 2rem;
        --fontSizeRegular: 3rem;
        --fontSizeLarge: 4rem;
    }
}

@media only screen and (max-width: var(--breakpointMedium)) {
    :root {
        --fontSizeSmall: 1.5rem;
        --fontSizeRegular: 2.5rem;
        --fontSizeLarge: 3.5rem;
    }
}

@media only screen and (max-width: var(--breakpointLarge)) {
    :root {
        --fontSizeSmall: 0.5rem;
        --fontSizeRegular: 1.5rem;
        --fontSizeLarge: 2.5rem;
    }
}

.__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: 6px solid #222
}

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

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

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

.__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: 6px solid #8dc572
}

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

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

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

.__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: 6px solid #f0ad4e
}

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

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

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

.__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: 6px solid #be6464
}

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

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

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

.__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: 6px solid #337ab7
}

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

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

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

.__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: 6px solid #fff
}

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

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

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

.__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;
    -webkit-animation: sk-bouncedelay 1.4s ease-in-out infinite;
    animation: sk-bouncedelay 1.4s ease-in-out infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

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

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

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

    40% {
        -webkit-transform: scale(1)
    }
}

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

    40% {
        transform: scale(1);
        -webkit-transform: scale(1)
    }
}

.form-group {
    margin-bottom: 15px
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: var(--fontSizeRegular);
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

.form-control::-moz-placeholder {
    color: #999;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #999
}

.form-control::-webkit-input-placeholder {
    color: #999
}

.form-control::-ms-expand {
    border: 0;
    background-color: transparent
}

.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1
}

.form-control[disabled],fieldset[disabled] .form-control {
    cursor: not-allowed
}

textarea.form-control {
    height: auto
}

.has-feedback {
    position: relative
}

.has-feedback .form-control {
    padding-right: 42.5px
}

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none
}

.form-group-lg .form-control+.form-control-feedback,.input-group-lg+.form-control-feedback,.input-lg+.form-control-feedback {
    width: 46px;
    height: 46px;
    line-height: 46px
}

.form-group-sm .form-control+.form-control-feedback,.input-group-sm+.form-control-feedback,.input-sm+.form-control-feedback {
    width: 30px;
    height: 30px;
    line-height: 30px
}

.has-feedback label~.form-control-feedback {
    top: 25px
}

.has-feedback label.sr-only~.form-control-feedback {
    top: 0
}

.help-block {
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate
}

.input-group[class*=col-] {
    float: none;
    padding-left: 0;
    padding-right: 0
}

.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0
}

.input-group .form-control:focus {
    z-index: 3
}

.input-group-addon,.input-group-btn,.input-group .form-control {
    display: table-cell
}

.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0
}

.input-group-addon,.input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle
}

.input-group-addon {
    padding: 6px 12px;
    font-size: var(--fontSizeRegular);
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px
}

.input-group-addon input[type=checkbox],.input-group-addon input[type=radio] {
    margin-top: 0
}

.input-group-addon:first-child,.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group>.btn,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle),.input-group .form-control:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.input-group-addon:first-child {
    border-right: 0
}

.input-group-addon:last-child,.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group>.btn,.input-group-btn:last-child>.dropdown-toggle,.input-group .form-control:last-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

.input-group-addon:last-child {
    border-left: 0
}

.input-group-btn {
    font-size: 0;
    white-space: nowrap
}

.input-group-btn,.input-group-btn>.btn {
    position: relative
}

.input-group-btn>.btn+.btn {
    margin-left: -1px
}

.input-group-btn>.btn:active,.input-group-btn>.btn:focus,.input-group-btn>.btn:hover {
    z-index: 2
}

.input-group-btn:first-child>.btn,.input-group-btn:first-child>.btn-group {
    margin-right: -1px
}

.input-group-btn:last-child>.btn,.input-group-btn:last-child>.btn-group {
    z-index: 2;
    margin-left: -1px
}

/*! 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
}

.sr-only,td,th {
    padding: 0
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0
}

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

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

.button-display.close {
    -webkit-animation: close-button-frames .4s cubic-bezier(.62,.28,.23,.99);
    animation: close-button-frames .4s cubic-bezier(.62,.28,.23,.99);
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-fill-mode: both;
    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)
    }
}

@-webkit-keyframes appear-button-frames {
    0% {
        opacity: 0;
        transform: scale(0)
    }

    1% {
        opacity: 0;
        transform: scale(.1)
    }

    to {
        display: block;
        opacity: 1;
        transform: scale(1)
    }
}

@-webkit-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;
    left: 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);
    display: flex;
    justify-content: center
}

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

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

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

#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
}

#messenger-button .default-button-container {
    height: 40px;
    margin: 12px;
    width: 40px
}

#messenger-button .default-button-container #default-button-icon {
    height: inherit;
    width: inherit
}

@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
    }
}

@-webkit-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)
    }
}

@-webkit-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)
    }
}

@-webkit-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(https://cdn.int2.us.five9nonprod.net/static/stable/chat/fivn/7f77840e46fa6103b49437d09c47e238.eot);
    src: url(https://cdn.int2.us.five9nonprod.net/static/stable/chat/fivn/7f77840e46fa6103b49437d09c47e238.eot#iefix) format("embedded-opentype"),url(https://cdn.int2.us.five9nonprod.net/static/stable/chat/fivn/af6df524c7d052f637e367f67c880b46.woff2) format("woff2"),url(https://cdn.int2.us.five9nonprod.net/static/stable/chat/fivn/b09f4960e5ffa8e0ef9287b36aee4b2b.woff) format("woff"),url(https://cdn.int2.us.five9nonprod.net/static/stable/chat/fivn/bfcf94e00816b7cfccc70b1416457c8e.ttf) format("truetype"),url(https://cdn.int2.us.five9nonprod.net/static/stable/chat/fivn/85248e128ebce905c08aa6a2b785e4aa.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"
}

.form-group {
    position: relative;
    width: 100%
}

.form-group .form-control {
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid rgba(71,69,123,.12)
}

.form-group .form-control+.input-group-btn {
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    margin-right: -3px
}

.form-group .input-group-btn {
    border-radius: 20px;
    height: 40px;
    right: 40px;
    z-index: 3
}

.form-group.has-feedback label+div div:not(.input-group) input {
    -webkit-box-shadow: 0 0 0 1000px #f4f6f8 inset!important
}

.form-group.has-feedback label+div div input {
    height: 40px;
    border: 1px solid rgba(71,69,123,.12);
    border-radius: 20px;
    color: #212b36;
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 0 1000px #fff inset!important
}

.form-group.has-feedback label+div div input::placeholder {
    color: rgba(33,43,53,.65)
}

.form-group.has-feedback label+div div input:-webkit-autofill {
    -webkit-text-fill-color: #212b36!important
}

.form-group.has-feedback label+div div input[readonly] {
    cursor: default
}

.form-group.has-feedback label+div div .form-field-btn {
    border-radius: 20px;
    background: none;
    border: none;
    padding: 4px;
    margin: 4px;
    height: 32px;
    width: 32px
}

.form-group.has-feedback label+div div .form-field-btn:focus {
    outline: none;
    background-color: #f4f6f8
}

.form-group.has-feedback label+div div .form-field-btn:hover {
    background-color: #f4f6f8
}

.form-group.has-feedback .form-control-feedback {
    height: 24px;
    width: 24px;
    right: .5em
}

.form-group.has-feedback * {
    line-height: 1.42857143
}

.form-group.has-feedback .help-block {
    overflow: hidden;
    color: #e62737;
    font-size: 12px;
    max-height: 0;
    transition-property: max-height,margin;
    transition-duration: .3s;
    transition-timing-function: ease;
    margin: 0
}

.form-group.has-feedback .help-block.help-block--visible {
    max-height: 2rem;
    margin: 5px 0 10px
}

.form-group.has-feedback.has-error .form-control {
    border: 1px solid #df2c2c;
    transition-property: border-color,background-color,color,-webkit-box-shadow;
    transition-duration: .15s;
    transition-timing-function: ease-in-out
}

.form-group.has-feedback.has-error .form-control:focus {
    box-shadow: none
}

.form-group.has-feedback .input-group {
    padding: 0;
    display: flex
}

.form-group.has-feedback .form-control-feedback {
    line-height: 34px;
    color: rgba(33,43,53,.65);
    margin: 2px
}

.form-group.has-feedback .input-group--validated {
    position: relative;
    width: 100%
}

.form-group.has-feedback .input-group--validated input:-webkit-autofill {
    -webkit-text-fill-color: rgba(33,43,53,.65)!important
}

.form-group.has-feedback .input-validation {
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease-out
}

.form-group.has-feedback .input-validation.input-validation--validated {
    visibility: visible;
    opacity: 1
}

.form-group.has-feedback .input-validation.input-validation--validated img {
    transform: scale(1)
}

.form-group.has-feedback .input-validation img {
    top: 15%;
    transform: scale(0);
    transition: transform .3s cubic-bezier(.17,.89,.32,1.28)
}

.form-group:last-child {
    margin-bottom: 0
}

.form-group label {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding-bottom: 5px
}

.form-group label+select {
    height: 40px;
    border: 1px solid rgba(71,69,123,.12);
    border-radius: 20px;
    color: #212b36;
    box-shadow: none;
    color: #9ba4b3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.form-group label+select::placeholder {
    color: rgba(33,43,53,.65)
}

.form-group label+select::-ms-expand {
    display: none
}

@-moz-document url-prefix() {
    .form-group label+select {
        padding-left: 8px
    }
}

.form-group label+select:focus {
    box-shadow: none
}

.form-group label+select[disabled] {
    background-color: #f4f6f8;
    cursor: default;
    color: rgba(33,43,53,.65)
}

.form-group label+select option {
    color: #212b35
}

.form-group label+select option[disabled] {
    color: #898989
}

.form-group .select-dropdown-icon {
    position: absolute;
    transform: scale(0)
}

.form-group .select-dropdown-icon.select-dropdown-icon--visible {
    transform: scale(1)
}

.form-group .select-dropdown-icon.select-dropdown-icon--select {
    right: 1rem;
    bottom: 1rem
}

.form-group .select-dropdown-icon.select-dropdown-icon--success {
    right: .5em;
    bottom: .5rem;
    transition: transform .3s cubic-bezier(.17,.89,.32,1.28)
}

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

.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-radius: 4px;
    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: var(--fontSizeRegular);
    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
}

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

.btn.disabled,.btn[disabled],fieldset[disabled] .btn {
    cursor: not-allowed;
    background-color: #f4f6f8;
    -webkit-box-shadow: none;
    box-shadow: none
}

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

.btn-primary {
    color: #fff;
    background-color: #0072ee;
    border-color: #0072ee;
    border-radius: 20px
}

.btn-primary.focus,.btn-primary:focus {
    color: #fff;
    background-color: #005abb;
    border-color: #00356f
}

.btn-primary.active,.btn-primary:active,.btn-primary:hover,.open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #005abb;
    border-color: #0055b1
}

.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: #004897;
    border-color: #00356f
}

.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: #0072ee;
    border-color: #0072ee
}

.btn-primary .badge {
    color: #0072ee;
    background-color: #fff
}

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

.btn-action-paid {
    cursor: default;
    color: rgba(33,43,53,.65);
    background-color: transparent;
    border-color: rgba(33,43,53,.65)
}

.btn-action-paid.focus,.btn-action-paid:focus {
    color: rgba(33,43,53,.65);
    background-color: transparent;
    border-color: rgba(0,0,0,.65)
}

.btn-action-paid.active,.btn-action-paid:active,.btn-action-paid:hover,.open>.dropdown-toggle.btn-action-paid {
    color: rgba(33,43,53,.65);
    background-color: transparent;
    border-color: rgba(10,12,15,.65)
}

.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: rgba(33,43,53,.65);
    background-color: transparent;
    border-color: rgba(0,0,0,.65)
}

.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: rgba(33,43,53,.65)
}

.btn-action-paid .badge {
    color: transparent;
    background-color: rgba(33,43,53,.65)
}

.btn-action-paid:active,.btn-action-paid:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: rgba(33,43,53,.65)
}

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

.btn-action-processing.focus,.btn-action-processing:focus {
    color: #fff;
    background-color: #005abb;
    border-color: #00356f
}

.btn-action-processing.active,.btn-action-processing:active,.btn-action-processing:hover,.open>.dropdown-toggle.btn-action-processing {
    color: #fff;
    background-color: #005abb;
    border-color: #0055b1
}

.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: #004897;
    border-color: #00356f
}

.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: #0072ee;
    border-color: #0072ee
}

.btn-action-processing .badge {
    color: #0072ee;
    background-color: #fff
}

.btn-action-processing:active,.btn-action-processing:active:hover,.btn-action-processing:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #0072ee;
    border-color: #0072ee
}

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;
    -webkit-box-shadow: none;
    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: #0072ee;
    border-color: #0072ee;
    border-radius: 20px
}

.btn-reply-action.focus,.btn-reply-action:focus {
    color: #fff;
    background-color: #005abb;
    border-color: #00356f
}

.btn-reply-action.active,.btn-reply-action:active,.btn-reply-action:hover,.open>.dropdown-toggle.btn-reply-action {
    color: #fff;
    background-color: #005abb;
    border-color: #0055b1
}

.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: #004897;
    border-color: #00356f
}

.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: #0072ee;
    border-color: #0072ee
}

.btn-reply-action .badge {
    color: #0072ee;
    background-color: #fff
}

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

#header {
    z-index: 10;
    height: 64px;
    padding: 14px 16px;
    position: relative;
    background-color: #f4f4f4;
    cursor: pointer;
    font-weight: 400;
    box-sizing: content-box;
    color: #212b36;
    display: flex
}

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

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

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

#header .close-handle {
    align-self: right;
    cursor: pointer;
    display: flex;
    height: 32px;
    margin: auto 0 auto 8px;
    min-width: 32px;
    padding: 4px
}

#header .close-handle:hover {
    background-color: #f4f6f8;
    border-radius: 20px
}

#header .close-handle.brand-dark:hover {
    background-color: hsla(0,0%,100%,.2)
}

#header .back-handle {
    cursor: pointer;
    display: inline-block;
    height: 32px;
    margin: auto 0;
    min-width: 32px;
    padding: 4px
}

#header .back-handle:hover {
    background-color: #f4f6f8;
    border-radius: 20px
}

#header .back-handle.brand-dark:hover {
    background-color: hsla(0,0%,100%,.2)
}

#header .header-content,#header .settings-content {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    text-align: left;
    width: 100%
}

#header .header-content .header-title,#header .settings-content .header-title {
    font-size: 14px;
    font-weight: 600;
    height: 20px;
    letter-spacing: -.12px;
    line-height: 20px
}

#header .header-content .header-title:only-child,#header .settings-content .header-title:only-child {
    margin: auto 0
}

#header .header-content .conversation-description,#header .settings-content .conversation-description {
    font-size: 12px;
    font-weight: 400;
    height: 16px;
    letter-spacing: -.18px;
    line-height: 16px
}

#header .header-content .tab-display-title,#header .settings-content .tab-display-title {
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    height: 20px;
    letter-spacing: -.12px;
    line-height: 20px;
    margin: auto 56px auto 0;
    text-align: center
}

#header .header-icon {
    border-radius: 20px;
    height: 32px;
    margin: auto 0 auto 8px;
    min-width: 32px
}

#header .header-icon img {
    border-radius: 20px;
    height: 32px;
    max-width: 32px
}

#header .header-icon img.business-icon {
    border-radius: 10px
}

#header .header-icon img.channel-icon {
    border-radius: 0
}

#header .header-icon #default-button-icon {
    height: 32px;
    width: 32px;
    transform: scaleX(-1)
}

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

#settings-handle {
    cursor: pointer;
    height: 32px;
    margin: auto 0 auto 8px;
    min-width: 32px;
    padding: 4px
}

#settings-handle:hover {
    background-color: #f4f6f8;
    border-radius: 20px
}

#settings-handle.brand-dark:hover {
    background-color: hsla(0,0%,100%,.2)
}

.appear #settings-handle {
    display: block
}

#settings-header {
    z-index: 10;
    height: 64px;
    padding: 14px 16px;
    position: relative;
    background-color: #f4f4f4;
    cursor: pointer;
    font-weight: 400;
    box-sizing: content-box;
    color: #212b36;
    display: flex
}

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

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

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

#settings-header .close-handle {
    align-self: right;
    cursor: pointer;
    display: flex;
    height: 32px;
    margin: auto 0 auto 8px;
    min-width: 32px;
    padding: 4px
}

#settings-header .close-handle:hover {
    background-color: #f4f6f8;
    border-radius: 20px
}

#settings-header .close-handle.brand-dark:hover {
    background-color: hsla(0,0%,100%,.2)
}

#settings-header .back-handle {
    cursor: pointer;
    display: inline-block;
    height: 32px;
    margin: auto 0;
    min-width: 32px;
    padding: 4px
}

#settings-header .back-handle:hover {
    background-color: #f4f6f8;
    border-radius: 20px
}

#settings-header .back-handle.brand-dark:hover {
    background-color: hsla(0,0%,100%,.2)
}

#settings-header .header-content,#settings-header .settings-content {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    text-align: left;
    width: 100%
}

#settings-header .header-content .header-title,#settings-header .settings-content .header-title {
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    height: 20px;
    letter-spacing: -.12px;
    line-height: 20px
}

#settings-header .header-content .header-title:only-child,#settings-header .settings-content .header-title:only-child {
    margin: auto 0
}

#settings-header .header-content .conversation-description,#settings-header .settings-content .conversation-description {
    font-size: 12px;
    font-weight: 400;
    height: 16px;
    letter-spacing: -.18px;
    line-height: 16px
}

#settings-header .header-content .tab-display-title,#settings-header .settings-content .tab-display-title {
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    height: 20px;
    letter-spacing: -.12px;
    line-height: 20px;
    margin: auto 56px auto 0;
    text-align: center
}

#settings-header .header-icon {
    border-radius: 20px;
    height: 32px;
    margin: auto 0 auto 8px;
    min-width: 32px
}

.header-icon svg.app-icon {
    max-height: 32px;
}

#settings-header .header-icon img {
    border-radius: 20px;
    height: 32px;
    max-width: 32px
}

#settings-header .header-icon img.business-icon {
    border-radius: 10px
}

#settings-header .header-icon img.channel-icon {
    border-radius: 0
}

#settings-header .header-icon #default-button-icon {
    height: 32px;
    width: 32px;
    transform: scaleX(-1)
}

#settings-header .settings-content div:only-child {
    cursor: pointer;
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    height: 20px;
    letter-spacing: -.12px;
    line-height: 20px;
    margin: auto 0
}

.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: #0072ee
}

.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: grey
}

.notification-container .notification.notification-error {
    margin-top: 64px;
    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 {
    -webkit-transition: height .5s;
    -o-transition: height .5s;
    transition: height .5s;
    height: 56px
}

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

.notification-container .notification-exit-active {
    -webkit-transition: height .5s;
    -o-transition: height .5s;
    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 {
    color: #424242
}

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

.link-color-light #conversation .left-row .btn {
    color: #424242
}

.msg-avatar {
    width: 31px;
    height: 31px;
    margin-right: 5px;
    margin-left: 9px;
    opacity: 1
}

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

.msg-avatar img.rounded {
    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 {
    letter-spacing: -.18px;
    padding-left: 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: #fff;
    padding: 16px 24px;
    -webkit-transform: translateZ(0)
}

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

.intro-pane .channel-linking-text {
    color: rgba(33,43,53,.65);
    font-size: 12px;
    letter-spacing: -.18px;
    line-height: 16px;
    margin-bottom: 8px
}

.intro-pane .available-channels {
    text-align: center;
    color: rgba(33,43,53,.65)
}

.intro-pane .available-channels .channel-list {
    display: flex;
    justify-content: center
}

.intro-pane .available-channels .channel-list .channel-icon-container {
    border-radius: 20px;
    height: 32px;
    margin-right: 4px;
    width: 32px
}

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

.intro-pane .available-channels .channel-list .channel-icon-container:hover {
    background-color: #f4f6f8
}

.intro-pane .available-channels .channel-list .channel-icon-container .channel-icon {
    cursor: pointer;
    height: 24px;
    margin: 4px;
    width: 24px
}

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

.reply-container .btn-reply-action {
    background-color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #0072ee;
    line-height: 20px;
    display: inline-block;
    margin-left: 5px;
    color: #0072ee;
    margin-bottom: 5px;
    letter-spacing: -.12px
}

.reply-container .btn-reply-action:hover {
    background-color: rgba(0,114,238,.08)
}

.reply-container .btn-reply-action.disabled {
    background-color: #f4f6f8
}

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

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

.reply-container .btn-reply-action span .reply-action-icon {
    width: 20px;
    height: 20px;
    vertical-align: bottom;
    margin: 4px 8px 4px 0;
    border-radius: 10px
}

.reply-container .btn-reply-action span .location-icon {
    width: 24px;
    height: 24px;
    vertical-align: bottom;
    margin: 2px 4px 2px 0
}

.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: bulge 2s ease-out infinite;
    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: blink 1s .3333s infinite
}

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

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

.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 {
    border-radius: 10px;
    display: inline-block;
    width: 31px;
    height: 31px
}

.typing-indicator-container .typing-indicator-avatar img.rounded {
    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
}

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

@-webkit-keyframes bulge {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

@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;
    background-color: #fff;
    z-index: 1;
    display: -ms-flexbox;
    display: flex;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 20px 20px
}

#footer .image-upload {
    height: 32px;
    width: 32px;
    display: flex;
    margin: 12px 0 12px 8px;
    font-size: var(--fontSizeRegular);
    line-height: 14px;
    border: none;
    padding: 0;
    cursor: pointer
}

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

#footer .image-upload.toggled {
    border-radius: 20px;
    background-color: #edf7ff
}

#footer .image-upload:hover {
    background: #f4f6f8;
    border-radius: 20px
}

#footer .image-upload .close-icon,#footer .image-upload .upload-icon {
    height: 24px;
    width: 24px;
    margin: 4px
}

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

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

#footer .input-container {
    padding: 3px 15px;
    display: block;
    overflow: hidden;
    width: inherit;
    margin: 8px;
    border: 1px solid rgba(71,69,123,.12)
}

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

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

#footer .input-container.focused {
    border: 1px solid #0072ff
}

#footer .input-container .message-input {
    width: 100%;
    -webkit-appearance: none;
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 20px;
    line-height: 18px;
    resize: none;
    border: none;
    font-size: var(--fontSizeRegular);
    line-height: 20px
}

#footer .input-container .message-input.single-line {
    margin-top: 5px;
    margin-bottom: 2px
}

#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 .input-container .message-input.disabled {
    background-color: #f4f6f8;
    border-color: #f4f6f8;
    cursor: not-allowed
}

#footer .send {
    color: #b2b2b2;
    font-weight: 600;
    position: relative;
    height: 56px;
    line-height: 42px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    width: 32px;
    height: 32px;
    margin: 12px 8px;
    display: flex;
    border-radius: 20px
}

#footer .send:hover {
    background: #f4f6f8
}

#footer .send img {
    height: 24px;
    width: 24px;
    margin: 4px
}

.footer-transition {
    transition-duration: .3s;
    transition-timing-function: ease-out;
    transition-property: color,background-color,border-color,opacity
}

.settings {
    box-sizing: border-box;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: #fff;
    overflow: hidden scroll;
    opacity: 1;
    font-size: 12px;
    color: rgba(33,43,53,.65)
}

.settings .settings-wrapper {
    padding: 24px;
    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 {
    color: #212b36;
    font-size: var(--fontSizeRegular);
    letter-spacing: 0;
    line-height: 20px;
    margin: 0
}

.settings.settings-enter {
    width: 0
}

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

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

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

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

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

.settings .channels .channel-item .channel-item-header {
    display: flex;
    height: inherit;
    padding: 0 16px;
    position: relative
}

.settings .channels .channel-item .channel-item-header:hover .channel-icon-container {
    background-color: #f4f6f8
}

.settings .channels .channel-item .channel-item-header .channel-icon-container {
    border-radius: 20px;
    height: 32px;
    margin: 4px;
    min-width: 32px
}

.settings .channels .channel-item .channel-item-header .channel-icon-container .channel-item-icon {
    width: 24px;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    margin: 4px
}

.settings .channels .channel-item .channel-item-header .channel-item-content {
    display: inline-block;
    line-height: 20px;
    margin: 10px 0 10px 4px;
    width: calc(100% - 38px)
}

.settings .channels .channel-item .channel-item-header .channel-item-content .channel-item-name {
    color: #212b36;
    font-size: var(--fontSizeRegular);
    letter-spacing: -.12px
}

.settings .channels .channel-item .channel-item-header .channel-item-content .channel-item-connected-as {
    font-size: 12px;
    letter-spacing: -.18px;
    line-height: 16px
}

.settings .channels .channel-item.channel-item-linked .channel-icon-container {
    margin: 12px 4px
}

.flag {
    background-image: url(https://cdn.int2.us.five9nonprod.net/static/stable/chat/fivn/fb50b1cb8955e572a69f296d640fd3fd.png);
    background-size: 768px 144px;
    width: 24px;
    height: 18px
}

.ad {
    background-position: 0 0
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bw {
    background-position: -48px -18px
}

.by {
    background-position: -72px -18px
}

.bz {
    background-position: -96px -18px
}

.ca {
    background-position: -120px -18px
}

.cc {
    background-position: -144px -18px
}

.cd {
    background-position: -168px -18px
}

.cf {
    background-position: -192px -18px
}

.cg {
    background-position: -216px -18px
}

.ch {
    background-position: -240px -18px
}

.ci {
    background-position: -264px -18px
}

.ck {
    background-position: -288px -18px
}

.cl {
    background-position: -312px -18px
}

.cm {
    background-position: -336px -18px
}

.cn {
    background-position: -360px -18px
}

.co {
    background-position: -384px -18px
}

.cr {
    background-position: -408px -18px
}

.cu {
    background-position: -432px -18px
}

.cv {
    background-position: -456px -18px
}

.cw {
    background-position: -480px -18px
}

.cx {
    background-position: -504px -18px
}

.cy {
    background-position: -528px -18px
}

.cz {
    background-position: -552px -18px
}

.de {
    background-position: -576px -18px
}

.dj {
    background-position: -600px -18px
}

.dk {
    background-position: -624px -18px
}

.dm {
    background-position: -648px -18px
}

.do {
    background-position: -672px -18px
}

.dz {
    background-position: -696px -18px
}

.ec {
    background-position: -720px -18px
}

.ee {
    background-position: -744px -18px
}

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

.eh {
    background-position: -24px -36px
}

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

.es {
    background-position: -72px -36px
}

.et {
    background-position: -96px -36px
}

.eu {
    background-position: -120px -36px
}

.fi {
    background-position: -144px -36px
}

.fj {
    background-position: -168px -36px
}

.fk {
    background-position: -192px -36px
}

.fm {
    background-position: -216px -36px
}

.fo {
    background-position: -240px -36px
}

.fr {
    background-position: -264px -36px
}

.ga {
    background-position: -288px -36px
}

.gb-eng {
    background-position: -312px -36px
}

.gb-nir {
    background-position: -336px -36px
}

.gb-sct {
    background-position: -360px -36px
}

.gb-wls {
    background-position: -384px -36px
}

.gb {
    background-position: -408px -36px
}

.gd {
    background-position: -432px -36px
}

.ge {
    background-position: -456px -36px
}

.gf {
    background-position: -480px -36px
}

.gg {
    background-position: -504px -36px
}

.gh {
    background-position: -528px -36px
}

.gi {
    background-position: -552px -36px
}

.gl {
    background-position: -576px -36px
}

.gm {
    background-position: -600px -36px
}

.gn {
    background-position: -624px -36px
}

.gp {
    background-position: -648px -36px
}

.gq {
    background-position: -672px -36px
}

.gr {
    background-position: -696px -36px
}

.gs {
    background-position: -720px -36px
}

.gt {
    background-position: -744px -36px
}

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

.gw {
    background-position: -24px -54px
}

.gy {
    background-position: -48px -54px
}

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

.hm {
    background-position: -96px -54px
}

.hn {
    background-position: -120px -54px
}

.hr {
    background-position: -144px -54px
}

.ht {
    background-position: -168px -54px
}

.hu {
    background-position: -192px -54px
}

.id {
    background-position: -216px -54px
}

.ie {
    background-position: -240px -54px
}

.il {
    background-position: -264px -54px
}

.im {
    background-position: -288px -54px
}

.in {
    background-position: -312px -54px
}

.io {
    background-position: -336px -54px
}

.iq {
    background-position: -360px -54px
}

.ir {
    background-position: -384px -54px
}

.is {
    background-position: -408px -54px
}

.it {
    background-position: -432px -54px
}

.je {
    background-position: -456px -54px
}

.jm {
    background-position: -480px -54px
}

.jo {
    background-position: -504px -54px
}

.jp {
    background-position: -528px -54px
}

.ke {
    background-position: -552px -54px
}

.kg {
    background-position: -576px -54px
}

.kh {
    background-position: -600px -54px
}

.ki {
    background-position: -624px -54px
}

.km {
    background-position: -648px -54px
}

.kn {
    background-position: -672px -54px
}

.kp {
    background-position: -696px -54px
}

.kr {
    background-position: -720px -54px
}

.kw {
    background-position: -744px -54px
}

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

.kz {
    background-position: -24px -72px
}

.la {
    background-position: -48px -72px
}

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

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

.li {
    background-position: -120px -72px
}

.lk {
    background-position: -144px -72px
}

.lr {
    background-position: -168px -72px
}

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

.lt {
    background-position: -216px -72px
}

.lu {
    background-position: -240px -72px
}

.lv {
    background-position: -264px -72px
}

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

.ma {
    background-position: -312px -72px
}

.mc {
    background-position: -336px -72px
}

.md {
    background-position: -360px -72px
}

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

.mf {
    background-position: -408px -72px
}

.mg {
    background-position: -432px -72px
}

.mh {
    background-position: -456px -72px
}

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

.ml {
    background-position: -504px -72px
}

.mm {
    background-position: -528px -72px
}

.mn {
    background-position: -552px -72px
}

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

.mp {
    background-position: -600px -72px
}

.mq {
    background-position: -624px -72px
}

.mr {
    background-position: -648px -72px
}

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

.mt {
    background-position: -696px -72px
}

.mu {
    background-position: -720px -72px
}

.mv {
    background-position: -744px -72px
}

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

.mx {
    background-position: -24px -90px
}

.my {
    background-position: -48px -90px
}

.mz {
    background-position: -72px -90px
}

.na {
    background-position: -96px -90px
}

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

.ne {
    background-position: -144px -90px
}

.nf {
    background-position: -168px -90px
}

.ng {
    background-position: -192px -90px
}

.ni {
    background-position: -216px -90px
}

.nl {
    background-position: -240px -90px
}

.no {
    background-position: -264px -90px
}

.np {
    background-position: -288px -90px
}

.nr {
    background-position: -312px -90px
}

.nu {
    background-position: -336px -90px
}

.nz {
    background-position: -360px -90px
}

.om {
    background-position: -384px -90px
}

.pa {
    background-position: -408px -90px
}

.pe {
    background-position: -432px -90px
}

.pf {
    background-position: -456px -90px
}

.pg {
    background-position: -480px -90px
}

.ph {
    background-position: -504px -90px
}

.pk {
    background-position: -528px -90px
}

.pl {
    background-position: -552px -90px
}

.pm {
    background-position: -576px -90px
}

.pn {
    background-position: -600px -90px
}

.pr {
    background-position: -624px -90px
}

.ps {
    background-position: -648px -90px
}

.pt {
    background-position: -672px -90px
}

.pw {
    background-position: -696px -90px
}

.py {
    background-position: -720px -90px
}

.qa {
    background-position: -744px -90px
}

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

.ro {
    background-position: -24px -108px
}

.rs {
    background-position: -48px -108px
}

.ru {
    background-position: -72px -108px
}

.rw {
    background-position: -96px -108px
}

.sa {
    background-position: -120px -108px
}

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

.sc {
    background-position: -168px -108px
}

.sd {
    background-position: -192px -108px
}

.se {
    background-position: -216px -108px
}

.sg {
    background-position: -240px -108px
}

.sh {
    background-position: -264px -108px
}

.si {
    background-position: -288px -108px
}

.sj {
    background-position: -312px -108px
}

.sk {
    background-position: -336px -108px
}

.sl {
    background-position: -360px -108px
}

.sm {
    background-position: -384px -108px
}

.sn {
    background-position: -408px -108px
}

.so {
    background-position: -432px -108px
}

.sr {
    background-position: -456px -108px
}

.ss {
    background-position: -480px -108px
}

.st {
    background-position: -504px -108px
}

.sv {
    background-position: -528px -108px
}

.sx {
    background-position: -552px -108px
}

.sy {
    background-position: -576px -108px
}

.sz {
    background-position: -600px -108px
}

.tc {
    background-position: -624px -108px
}

.td {
    background-position: -648px -108px
}

.tf {
    background-position: -672px -108px
}

.tg {
    background-position: -696px -108px
}

.th {
    background-position: -720px -108px
}

.tj {
    background-position: -744px -108px
}

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

.tl {
    background-position: -24px -126px
}

.tm {
    background-position: -48px -126px
}

.tn {
    background-position: -72px -126px
}

.to {
    background-position: -96px -126px
}

.tr {
    background-position: -120px -126px
}

.tt {
    background-position: -144px -126px
}

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

.tw {
    background-position: -192px -126px
}

.tz {
    background-position: -216px -126px
}

.ua {
    background-position: -240px -126px
}

.ug {
    background-position: -264px -126px
}

.um {
    background-position: -288px -126px
}

.un {
    background-position: -312px -126px
}

.us {
    background-position: -336px -126px
}

.uy {
    background-position: -360px -126px
}

.uz {
    background-position: -384px -126px
}

.va {
    background-position: -408px -126px
}

.vc {
    background-position: -432px -126px
}

.ve {
    background-position: -456px -126px
}

.vg {
    background-position: -480px -126px
}

.vi {
    background-position: -504px -126px
}

.vn {
    background-position: -528px -126px
}

.vu {
    background-position: -552px -126px
}

.wf {
    background-position: -576px -126px
}

.ye {
    background-position: -600px -126px
}

.ws {
    background-position: -624px -126px
}

.yt {
    background-position: -648px -126px
}

.za {
    background-position: -672px -126px
}

.zm {
    background-position: -696px -126px
}

.zw {
    background-position: -720px -126px
}

.zz {
    background-position: -744px -126px
}

.react-tel-input {
    position: relative;
    width: 100%
}

.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] {
    background: #fff;
    border: 1px solid rgba(71,69,123,.12);
    border-radius: 20px;
    box-shadow: none;
    color: rgba(33,43,53,.65);
    height: 40px;
    letter-spacing: -.12px;
    line-height: 20px;
    margin-bottom: 0!important;
    margin-top: 0!important;
    padding-left: 70px;
    position: relative;
    width: 100%;
    z-index: 0
}

.react-tel-input input[type=tel]:focus,.react-tel-input input[type=text]:focus {
    border: 1px solid #0072ff
}

.react-tel-input input[type=tel].invalid-number:not(.empty),.react-tel-input input[type=text].invalid-number:not(.empty) {
    border: 1px solid #df2c2c
}

.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 {
    align-items: center;
    display: flex;
    height: 40px;
    padding-left: 16px;
    width: 60px
}

.react-tel-input .selected-flag .flag {
    align-items: center;
    border: 1px solid rgba(71,69,123,.12);
    border-radius: 4px;
    display: flex;
    justify-self: space-around;
    position: absolute
}

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

.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: 64px;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: #fff;
    overflow: hidden;
    opacity: 1;
    text-align: center;
    line-height: 20px;
    font-size: var(--fontSizeRegular);
    display: flex
}

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

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

.channel.channel-hidden {
    width: 0
}

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

@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: 40px;
    margin-top: 8px;
    color: #212b36;
    text-align: left
}

.channel .channel-header .channel-description span {
    white-space: pre-line
}

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

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

.channel .channel-content .btn {
    width: 100%;
    border-radius: 20px;
    margin-top: 16px;
    text-align: center;
    border: 0;
    letter-spacing: -.12px;
    padding: 10px 16px
}

.channel .channel-content .btn.btn-primary.light {
    color: #212b36
}

.channel .channel-content .btn:hover {
    opacity: 1
}

.channel .channel-content .qr-container>img {
    border: 1px solid #d8dcde;
    border-radius: 8px;
    height: 156px;
    margin: auto;
    padding: 8px;
    width: 156px
}

.channel .channel-content .qr-container>img img {
    width: 100%
}

.channel .channel-content .warning-message {
    color: #df2c2c;
    margin-top: 8px
}

.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 a {
    font-size: smaller;
    text-decoration: underline;
    float: right;
    padding-right: 3px;
    cursor: pointer
}

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

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

.sms-linking.pending-state {
    text-align: left;
    padding-left: 5px;
    display: flex;
    align-items: center
}

.sms-linking.pending-state .phone-number {
    color: rgba(33,43,53,.65)
}

.sms-linking.linked-state {
    text-align: left;
    padding-left: 5px;
    display: flex;
    align-items: center
}

.email-linking label {
    font-size: var(--fontSizeRegular);
    font-weight: 400
}

.email-linking .email-input {
    padding: 10px 16px;
    border-radius: 20px;
    border: 1px solid rgba(71,69,123,.12);
    letter-spacing: -.12px
}

.email-linking .email-input:focus {
    border: 1px solid #0072ff
}

.email-linking .email-input.error {
    border: 1px solid #df2c2c
}

.email-linking .btn {
    padding: 10px 16px;
    font-size: var(--fontSizeRegular);
    line-height: 1.42857143;
    border-radius: 4px;
    letter-spacing: -.12px
}

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

.whatsapp-linking .device-title {
    color: rgba(33,43,53,.65);
    font-size: 12px;
    font-weight: 400;
    height: 16px;
    letter-spacing: -.18px
}

.upload-enter {
    opacity: 0
}

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

.upload-exit {
    opacity: 1
}

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

.upload-container {
    background-color: #fff;
    position: absolute;
    bottom: 64px;
    left: 7px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(51,51,51,.3);
    z-index: 2;
    opacity: 1;
    max-height: 136px;
    width: 256px
}

.upload-container .upload-menu {
    overflow: hidden;
    max-height: 120px;
    max-width: 240px;
    margin: 8px
}

.upload-container .upload-menu .upload-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-height: 40px;
    max-width: 240px;
    cursor: pointer;
    font-size: var(--fontSizeRegular);
    user-select: none;
    background-color: #fff;
    border-radius: 20px
}

.upload-container .upload-menu .upload-menu-item:hover {
    background-color: #f4f6f8
}

.upload-container .upload-menu .upload-menu-item .upload-icon {
    height: 24px;
    width: 24px;
    margin: 8px 8px 8px 16px
}

.upload-input {
    display: none
}

.message-item .file-icon-container {
    flex-grow: 1;
    height: 40px;
    margin-right: 8px;
    max-width: 24px;
    padding: 8px 0
}

.message-item .file-text-container {
    flex-grow: 2;
    user-select: none;
    max-width: 168px
}

.message-item .file-text-container .file-name {
    display: flex
}

.message-item .file-text-container .file-name p {
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
    max-width: 102px;
    overflow: hidden;
    text-overflow: ellipsis
}

.message-item .file-text-container .file-name:after {
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    line-height: 20px;
    overflow: hidden;
    max-width: 168px;
    content: attr(data-content-end);
    white-space: nowrap
}

.message-item .file-text-container .file-name .file-size {
    line-height: 20px;
    white-space: nowrap
}

.appear .appear-hidden {
    display: none
}

.appear .appear-visible {
    display: block
}

.close .close-hidden {
    display: none
}

.close .close-visible {
    display: block
}

.banner-container {
    border-radius: 20px;
    display: flex;
    height: 34px;
    justify-content: center;
    left: 16px;
    margin-top: 8px;
    overflow: hidden;
    position: absolute;
    top: 64px;
    transition: all .3s ease-in-out;
    width: calc(100% - 32px)
}

.banner-container.banner-container--hide {
    opacity: 0
}

.banner-container.banner-container--hide--delay {
    transition-property: opacity;
    transition-duration: .3s;
    transition-delay: 1.5s;
    transition-timing-function: ease-in-out
}

.banner-container.error {
    background-color: #212b35
}

.banner-container.success {
    background-color: #0072ee
}

.banner-container .banner-button-retry {
    display: flex;
    background-color: transparent;
    align-items: center;
    border: none;
    margin: .5rem
}

.banner-container .banner-button-retry img {
    height: 1rem
}

.banner-container .banner-text-container {
    display: flex;
    align-self: center;
    justify-content: center;
    margin: 0 10px;
    padding: 8px 0;
    line-height: 16px;
    text-align: center;
    color: #fff;
    font-size: 12px;
    letter-spacing: -.18px;
    word-wrap: break-word
}

.connection-error-container {
    z-index: 3
}

.connection-error-container.connection-error-container--hide {
    z-index: 0;
    transition-property: z-index;
    transition-duration: .3s;
    transition-delay: 2.5s;
    transition-timing-function: ease-in-out
}

.conversation-list-container {
    box-sizing: border-box;
    border-top: 1px solid rgba(0,0,0,.1);
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    flex-grow: 1;
    z-index: 2
}

.conversation-list-container.conversation-list-container-enter {
    width: 0
}

.conversation-list-container.conversation-list-container-enter-active {
    -webkit-transition: width .35s;
    -o-transition: width .35s;
    transition: width .35s;
    width: 100%
}

.conversation-list-container.conversation-list-container-exit {
    width: 100%
}

.conversation-list-container.conversation-list-container-exit-active {
    -webkit-transition: width .35s;
    -o-transition: width .35s;
    transition: width .35s;
    width: 0
}

.conversation-group {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative
}

.conversation-group .banner-container {
    z-index: 10;
    top: -1px;
    position: absolute
}

.conversation-group .conversation-group-list {
    overflow-y: scroll;
    padding: 24px;
    flex-grow: 1
}

.conversation-group .conversation-group-list .list-container {
    position: relative
}

.conversation-group .conversation-group-list .conversation-group-header {
    color: #212b35;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -.14px;
    margin-bottom: 26px
}

.conversation-group .conversation-group-list .conversation-list-paginator-container {
    position: absolute;
    width: 100%;
    bottom: 10
}

.conversation-group .conversation-group-list .conversation-group-item {
    cursor: pointer;
    padding: 5px 5px 16px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    background-color: #fff
}

.conversation-group .conversation-group-list .conversation-group-item:hover {
    background-color: #f4f6f8
}

.conversation-group .conversation-group-list .item-content {
    margin-left: .7rem;
    line-height: 20px;
    flex-grow: 1;
    width: 100%;
    min-width: 0
}

.conversation-group .conversation-group-list .item-content .header-container {
    letter-spacing: -.12px;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    line-height: 20px;
    padding-right: 20px
}

.conversation-group .conversation-group-list .item-content .header-container .header {
    color: #212b35;
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    min-width: 0;
    flex-grow: 0;
    overflow: auto
}

.conversation-group .conversation-group-list .item-content .header-container .header .text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.conversation-group .conversation-group-list .item-content .header-container .timestamp {
    margin-left: 5px;
    color: rgba(33,43,53,.65);
    font-size: 12px;
    letter-spacing: -.18px;
    font-weight: 400;
    white-space: nowrap;
    flex-basis: 50px
}

.conversation-group .conversation-group-list .description {
    color: #212b35;
    font-size: var(--fontSizeRegular);
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -.12px;
    position: relative;
    padding-right: 20px;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.conversation-group .conversation-group-list .description.bold-text {
    font-weight: 600
}

.conversation-group .conversation-group-list .description .item-content-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #0072ee;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.18px;
    line-height: 14px;
    text-align: center;
    padding: 2px;
    width: 16px
}

.conversation-group .conversation-group-list .icon {
    display: "flex";
    flex-direction: column
}

.conversation-group .conversation-group-list .icon .helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.conversation-group .conversation-group-list .icon img {
    flex-grow: 1;
    border-radius: 500rem;
    max-width: 40px;
    vertical-align: middle
}

.conversation-group .conversation-group-list .app-icon {
    max-width: 40px;
    width: 100%
}

.conversation-group .conversation-group-list .fetch-history {
    width: 100%;
    text-align: center;
    font-style: italic;
    color: #b2b2b2;
    padding: 5px 0
}

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

.conversation-group .conversation-group-footer {
    padding: 12px 16px;
    z-index: 10;
    box-shadow: inset 0 1px 0 0 rgba(71,69,123,.12),0 -24px 40px 0 rgba(71,69,123,.08)
}

.conversation-group .conversation-group-footer button {
    margin: auto;
    background: #0072ee;
    border-radius: 20px;
    border: 0;
    min-height: 40px;
    width: 100%;
    color: #fff;
    font-size: var(--fontSizeRegular);
    letter-spacing: -.12px
}

.text-input-container {
    background-color: #fff;
    border-radius: 20px;
    border: 1px solid rgba(71,69,123,.12)
}

.text-input-container.focused {
    border: 1px solid #0072ff
}

.text-input-container.error {
    border: 1px solid #df2c2c
}

.text-input-container.disabled {
    border: none;
    background-color: #f4f6f8
}

.text-input-container .text-input {
    color: #212b36;
    font-size: var(--fontSizeRegular);
    font-weight: 400
}

.text-input-container .input-icon-container-left {
    height: 32px;
    width: 32px;
    margin: 4px 8px;
    left: 0
}

.text-input-container .input-icon-container-right {
    height: 32px;
    width: 32x;
    margin: 4px 8px;
    right: 0
}

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: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    font-weight: 400;
    font-size: var(--fontSizeRegular);
    line-height: 1.4;
    color: #212b36;
    letter-spacing: -.12px;
    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;
    fill: none;
    stroke-width: 6;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke: inherit
}

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

#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(0,0,0,.6)
}

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

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

#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 {
    -webkit-transition: height .25s cubic-bezier(.455,.03,.515,.955);
    -o-transition: height .25s cubic-bezier(.455,.03,.515,.955);
    transition: height .25s cubic-bezier(.455,.03,.515,.955)
}

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

#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% - 64px)
}

#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 {
    -webkit-transition: height .25s cubic-bezier(.455,.03,.515,.955);
    -o-transition: height .25s cubic-bezier(.455,.03,.515,.955);
    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: 64px;
    position: relative;
    background-color: #f4f4f4;
    cursor: pointer;
    font-weight: 400;
    box-sizing: content-box;
    color: #212b36;
    display: flex;
    max-height: 40px;
    cursor: default;
    text-align: center;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    padding: 0 16px
}

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

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

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

#container #webview-header .close-handle {
    align-self: right;
    cursor: pointer;
    display: flex;
    height: 32px;
    margin: auto 0 auto 8px;
    min-width: 32px;
    padding: 4px
}

#container #webview-header .close-handle:hover {
    background-color: #f4f6f8;
    border-radius: 20px
}

#container #webview-header .close-handle.brand-dark:hover {
    background-color: hsla(0,0%,100%,.2)
}

#container #webview-header .back-handle {
    cursor: pointer;
    display: inline-block;
    height: 32px;
    margin: auto 0;
    min-width: 32px;
    padding: 4px
}

#container #webview-header .back-handle:hover {
    background-color: #f4f6f8;
    border-radius: 20px
}

#container #webview-header .back-handle.brand-dark:hover {
    background-color: hsla(0,0%,100%,.2)
}

#container #webview-header .header-content,#container #webview-header .settings-content {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    text-align: left;
    width: 100%
}

#container #webview-header .header-content .header-title,#container #webview-header .settings-content .header-title {
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    height: 20px;
    letter-spacing: -.12px;
    line-height: 20px
}

#container #webview-header .header-content .header-title:only-child,#container #webview-header .settings-content .header-title:only-child {
    margin: auto 0
}

#container #webview-header .header-content .conversation-description,#container #webview-header .settings-content .conversation-description {
    font-size: 12px;
    font-weight: 400;
    height: 16px;
    letter-spacing: -.18px;
    line-height: 16px
}

#container #webview-header .header-content .tab-display-title,#container #webview-header .settings-content .tab-display-title {
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    height: 20px;
    letter-spacing: -.12px;
    line-height: 20px;
    margin: auto 56px auto 0;
    text-align: center
}

#container #webview-header .header-icon {
    border-radius: 20px;
    height: 32px;
    margin: auto 0 auto 8px;
    min-width: 32px
}

#container #webview-header .header-icon img {
    border-radius: 20px;
    height: 32px;
    max-width: 32px
}

#container #webview-header .header-icon img.business-icon {
    border-radius: 10px
}

#container #webview-header .header-icon img.channel-icon {
    border-radius: 0
}

#container #webview-header .header-icon #default-button-icon {
    height: 32px;
    width: 32px;
    transform: scaleX(-1)
}

#container #webview-header .header-content {
    padding: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    margin-left: 36px;
    width: 100%
}

#container #webview-iframe-container {
    border: none;
    position: relative;
    width: 100%;
    height: calc(100% - 64px);
    overflow: hidden
}

#container #webview-iframe-container.ios {
    -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 {
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s;
    opacity: 1
}

#container .webview-exit {
    opacity: 1
}

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

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

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

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

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

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

#container #conversation .messages-container .msg {
    -webkit-transform: translateZ(0)
}

#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-other-user-first:not(.row-other-user-last) .msg-wrapper .msg,#container #conversation .row.row-other-user-first:not(.row-other-user-last) .msg-wrapper .msg-image {
    border-bottom-left-radius: 2px
}

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

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

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

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

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

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

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

#container #conversation .row.row-form {
    margin: 10px 0;
    position: relative;
    z-index: 1
}

#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: var(--fontSizeRegular);
    overflow: hidden;
    line-height: 1.25;
    position: relative;
    border-radius: 20px;
    border-left-color: #0072ee;
    -webkit-transition: opacity .15s;
    -o-transition: opacity .15s;
    transition: opacity .15s;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: 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,#container #conversation .row .msg-wrapper .msg .carousel-item {
    background-color: #fff;
    border: 1px solid rgba(71,69,123,.12);
    margin-right: 5px;
    overflow: hidden;
    vertical-align: top
}

#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%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-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 .carousel-item .carousel-content,#container #conversation .row .msg-wrapper .msg .carousel-item .carousel-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: all .3s ease-out
}

#container #conversation .row .msg-wrapper .msg-image .carousel-item .carousel-content .carousel-title,#container #conversation .row .msg-wrapper .msg .carousel-item .carousel-content .carousel-title {
    font-weight: 600;
    line-height: 20px;
    margin: 16px 16px 0;
    overflow: hidden;
    text-overflow: ellipsis
}

#container #conversation .row .msg-wrapper .msg-image .carousel-item .carousel-content .carousel-description,#container #conversation .row .msg-wrapper .msg .carousel-item .carousel-content .carousel-description {
    line-height: 20px;
    margin: 4px 16px 0;
    white-space: pre-wrap
}

#container #conversation .row .msg-wrapper .msg-image .carousel-item .carousel-action-container,#container #conversation .row .msg-wrapper .msg .carousel-item .carousel-action-container {
    margin: 0 16px 16px
}

#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 {
    display: flex;
    position: relative
}

#container #conversation .row .msg-wrapper .msg-image .image-container .image-placeholder,#container #conversation .row .msg-wrapper .msg .image-container .image-placeholder {
    margin: auto
}

#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;
    display: block
}

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

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

#container #conversation .row .msg-wrapper .action .btn {
    display: block;
    white-space: inherit;
    -webkit-transition: width .1s;
    -o-transition: width .1s;
    transition: width .1s;
    border-radius: 20px;
    padding: 10px 12px;
    width: 200px
}

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

#container #conversation .row .msg-wrapper .message-text {
    display: inline-block;
    width: 90%
}

#container #conversation .row .msg-wrapper .message-item {
    padding: 10px 12px 0;
}

#container #conversation .row .msg-wrapper .message-item.message-form {
    width: 100%;
    max-width: 332px;
    padding: 20px
}

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

#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: #f4f6f8;
    color: #212b36;
}

#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 .scroll-container .carousel-content .action .btn,#container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .scroll-container .carousel-content .action .btn {
    border: none;
    width: inherit
}

#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%,92.5%,0) #fff hsla(0,0%,92.5%,0) hsla(0,0%,92.5%,0)
}

#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: #0072ee
}

#container #conversation .row.left-row .msg-wrapper .msg-form {
    width: 100%;
    background-color: #fff;
    border: 1px solid rgba(71,69,123,.12);
    border-radius: 20px;
    max-width: 332px;
    box-shadow: 0 12px 24px 0 rgba(71,69,123,.16),0 4px 8px 0 rgba(71,69,123,.12);
    transition: border .3s ease-in-out,box-shadow .3s ease-in-out
}

#container #conversation .row.left-row .msg-wrapper .msg-form.form-submitted {
    border: 1px solid rgba(71,69,123,.12);
    box-shadow: none
}

#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: #0072ee;
    float: right;
    max-width: 224px
}

#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 {
    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.4%,.97)
}

#container #conversation .logo {
    padding-bottom: 10px;
    text-align: center
}

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

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

#container #conversation .from {
    white-space: nowrap;
    top: -20px;
    font-size: 12px;
    color: rgba(33,43,53,.65);
    padding-left: 12px;
    margin-bottom: 2px;
    margin-left: 45px;
    letter-spacing: -.18px
}

#container #conversation .connect-notification {
    border: 1px solid rgba(71,69,123,.12);
    border-radius: 20px;
    padding: 16px;
    margin: 5px 24px 0;
    width: 100%
}

#container #conversation .connect-notification p {
    color: rgba(33,43,53,.65);
    font-size: 12px;
    letter-spacing: -.18px;
    line-height: 16px;
    margin-top: 0;
    text-align: center
}

#container #conversation .connect-notification .connect-notification-channels {
    display: flex;
    justify-content: center
}

#container #conversation .connect-notification .connect-notification-channels .connect-notification-icon {
    height: 32px;
    width: 32px;
    padding: 4px;
    border-radius: 20px;
    cursor: pointer;
    align-items: center;
    align-content: center;
    margin-right: 4px
}

#container #conversation .connect-notification .connect-notification-channels .connect-notification-icon:last-child {
    margin-right: 0
}

#container #conversation .connect-notification .connect-notification-channels .connect-notification-icon:hover {
    background-color: #f4f6f8
}

#container #conversation .connect-notification .connect-notification-channels .connect-notification-icon img {
    height: 24px;
    width: 24px
}

#container #conversation .connect-notification-linking-message {
    padding-bottom: 0
}

#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: 20px;
    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.4%,.97)
}

.widget-embedded #container {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    font-weight: 400;
    font-size: var(--fontSizeRegular);
    line-height: 1.4;
    color: #212b36;
    letter-spacing: -.12px;
    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;
    fill: none;
    stroke-width: 6;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke: inherit
}

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

@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%
    }
}

@-webkit-keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%
    }

    60% {
        left: 100%;
        right: -90%
    }

    to {
        left: 100%;
        right: -90%
    }
}

@-webkit-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(0,0,0,.6)
}

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

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

.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 {
    -webkit-transition: height .25s cubic-bezier(.455,.03,.515,.955);
    -o-transition: height .25s cubic-bezier(.455,.03,.515,.955);
    transition: height .25s cubic-bezier(.455,.03,.515,.955)
}

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

.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% - 64px)
}

.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 {
    -webkit-transition: height .25s cubic-bezier(.455,.03,.515,.955);
    -o-transition: height .25s cubic-bezier(.455,.03,.515,.955);
    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: 64px;
    position: relative;
    background-color: #f4f4f4;
    cursor: pointer;
    font-weight: 400;
    box-sizing: content-box;
    color: #212b36;
    display: flex;
    max-height: 40px;
    cursor: default;
    text-align: center;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    padding: 0 16px
}

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

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

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

.widget-embedded #container #webview-header .close-handle {
    align-self: right;
    cursor: pointer;
    display: flex;
    height: 32px;
    margin: auto 0 auto 8px;
    min-width: 32px;
    padding: 4px
}

.widget-embedded #container #webview-header .close-handle:hover {
    background-color: #f4f6f8;
    border-radius: 20px
}

.widget-embedded #container #webview-header .close-handle.brand-dark:hover {
    background-color: hsla(0,0%,100%,.2)
}

.widget-embedded #container #webview-header .back-handle {
    cursor: pointer;
    display: inline-block;
    height: 32px;
    margin: auto 0;
    min-width: 32px;
    padding: 4px
}

.widget-embedded #container #webview-header .back-handle:hover {
    background-color: #f4f6f8;
    border-radius: 20px
}

.widget-embedded #container #webview-header .back-handle.brand-dark:hover {
    background-color: hsla(0,0%,100%,.2)
}

.widget-embedded #container #webview-header .header-content,.widget-embedded #container #webview-header .settings-content {
    display: flex;
    flex-direction: column;
    margin-left: 16px;
    text-align: left;
    width: 100%
}

.widget-embedded #container #webview-header .header-content .header-title,.widget-embedded #container #webview-header .settings-content .header-title {
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    height: 20px;
    letter-spacing: -.12px;
    line-height: 20px
}

.widget-embedded #container #webview-header .header-content .header-title:only-child,.widget-embedded #container #webview-header .settings-content .header-title:only-child {
    margin: auto 0
}

.widget-embedded #container #webview-header .header-content .conversation-description,.widget-embedded #container #webview-header .settings-content .conversation-description {
    font-size: 12px;
    font-weight: 400;
    height: 16px;
    letter-spacing: -.18px;
    line-height: 16px
}

.widget-embedded #container #webview-header .header-content .tab-display-title,.widget-embedded #container #webview-header .settings-content .tab-display-title {
    font-size: var(--fontSizeRegular);
    font-weight: 600;
    height: 20px;
    letter-spacing: -.12px;
    line-height: 20px;
    margin: auto 56px auto 0;
    text-align: center
}

.widget-embedded #container #webview-header .header-icon {
    border-radius: 20px;
    height: 32px;
    margin: auto 0 auto 8px;
    min-width: 32px
}

.widget-embedded #container #webview-header .header-icon img {
    border-radius: 20px;
    height: 32px;
    max-width: 32px
}

.widget-embedded #container #webview-header .header-icon img.business-icon {
    border-radius: 10px
}

.widget-embedded #container #webview-header .header-icon img.channel-icon {
    border-radius: 0
}

.widget-embedded #container #webview-header .header-icon #default-button-icon {
    height: 32px;
    width: 32px;
    transform: scaleX(-1)
}

.widget-embedded #container #webview-header .header-content {
    padding: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    margin-left: 36px;
    width: 100%
}

.widget-embedded #container #webview-iframe-container {
    border: none;
    position: relative;
    width: 100%;
    height: calc(100% - 64px);
    overflow: hidden
}

.widget-embedded #container #webview-iframe-container.ios {
    -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 {
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    transition: opacity .4s;
    opacity: 1
}

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

.widget-embedded #container .webview-exit-active {
    -webkit-transition: opacity .4s;
    -o-transition: opacity .4s;
    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;
    -webkit-transition: padding-top .5s;
    -o-transition: padding-top .5s;
    transition: padding-top .5s
}

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

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

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

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

.widget-embedded #container #conversation .messages-container .msg {
    -webkit-transform: translateZ(0)
}

.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-other-user-first:not(.row-other-user-last) .msg-wrapper .msg,.widget-embedded #container #conversation .row.row-other-user-first:not(.row-other-user-last) .msg-wrapper .msg-image {
    border-bottom-left-radius: 2px
}

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

.widget-embedded #container #conversation .row.row-other-user-last {
    margin-bottom: 10px
}

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

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

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

.widget-embedded #container #conversation .row.row-current-user-last {
    margin-bottom: 10px
}

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

.widget-embedded #container #conversation .row.row-form {
    margin: 10px 0;
    position: relative;
    z-index: 1
}

.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: var(--fontSizeRegular);
    overflow: hidden;
    line-height: 1.25;
    position: relative;
    border-radius: 20px;
    border-left-color: #0072ee;
    -webkit-transition: opacity .15s;
    -o-transition: opacity .15s;
    transition: opacity .15s;
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: 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,.widget-embedded #container #conversation .row .msg-wrapper .msg .carousel-item {
    background-color: #fff;
    border: 1px solid rgba(71,69,123,.12);
    margin-right: 5px;
    overflow: hidden;
    vertical-align: top
}

.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%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-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 .carousel-item .carousel-content,.widget-embedded #container #conversation .row .msg-wrapper .msg .carousel-item .carousel-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: all .3s ease-out
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .carousel-item .carousel-content .carousel-title,.widget-embedded #container #conversation .row .msg-wrapper .msg .carousel-item .carousel-content .carousel-title {
    font-weight: 600;
    line-height: 20px;
    margin: 16px 16px 0;
    overflow: hidden;
    text-overflow: ellipsis
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .carousel-item .carousel-content .carousel-description,.widget-embedded #container #conversation .row .msg-wrapper .msg .carousel-item .carousel-content .carousel-description {
    line-height: 20px;
    margin: 4px 16px 0;
    white-space: pre-wrap
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .carousel-item .carousel-action-container,.widget-embedded #container #conversation .row .msg-wrapper .msg .carousel-item .carousel-action-container {
    margin: 0 16px 16px
}

.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 {
    display: flex;
    position: relative
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .image-container .image-placeholder,.widget-embedded #container #conversation .row .msg-wrapper .msg .image-container .image-placeholder {
    margin: auto
}

.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;
    display: block
}

.widget-embedded #container #conversation .row .msg-wrapper .msg-image .sk-three-bounce .bounce1,.widget-embedded #container #conversation .row .msg-wrapper .msg-image .sk-three-bounce .bounce2,.widget-embedded #container #conversation .row .msg-wrapper .msg-image .sk-three-bounce .bounce3,.widget-embedded #container #conversation .row .msg-wrapper .msg .sk-three-bounce .bounce1,.widget-embedded #container #conversation .row .msg-wrapper .msg .sk-three-bounce .bounce2,.widget-embedded #container #conversation .row .msg-wrapper .msg .sk-three-bounce .bounce3 {
    height: 15px;
    width: 15px;
    background-color: #0072ee
}

.widget-embedded #container #conversation .row .msg-wrapper .action {
    margin-bottom: 8px
}

.widget-embedded #container #conversation .row .msg-wrapper .action .btn {
    display: block;
    white-space: inherit;
    -webkit-transition: width .1s;
    -o-transition: width .1s;
    transition: width .1s;
    border-radius: 20px;
    padding: 10px 12px;
    width: 200px
}

.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;
    width: 90%
}

.widget-embedded #container #conversation .row .msg-wrapper .message-item {
    padding: 10px 12px 0;
    line-height: 20px;
    max-width: 224px
}

.widget-embedded #container #conversation .row .msg-wrapper .message-item.message-form {
    width: 100%;
    max-width: 332px;
    padding: 20px
}

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

.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: #f4f6f8;
    color: #212b36;
    max-width: 224px
}

.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 .scroll-container .carousel-content .action .btn,.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg.msg-carousel .carousel-container .scroll-container .carousel-content .action .btn {
    border: none;
    width: inherit
}

.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%,92.5%,0) #fff hsla(0,0%,92.5%,0) hsla(0,0%,92.5%,0)
}

.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: #0072ee
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-form {
    width: 100%;
    background-color: #fff;
    border: 1px solid rgba(71,69,123,.12);
    border-radius: 20px;
    max-width: 332px;
    box-shadow: 0 12px 24px 0 rgba(71,69,123,.16),0 4px 8px 0 rgba(71,69,123,.12);
    transition: border .3s ease-in-out,box-shadow .3s ease-in-out
}

.widget-embedded #container #conversation .row.left-row .msg-wrapper .msg-form.form-submitted {
    border: 1px solid rgba(71,69,123,.12);
    box-shadow: none
}

.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: #0072ee;
    float: right;
    max-width: 224px
}

.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 {
    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.4%,.97)
}

.widget-embedded #container #conversation .logo {
    padding-bottom: 10px;
    text-align: center
}

.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: 12px;
    vertical-align: baseline
}

.widget-embedded #container #conversation .from {
    white-space: nowrap;
    top: -20px;
    font-size: 12px;
    color: rgba(33,43,53,.65);
    padding-left: 12px;
    margin-bottom: 2px;
    margin-left: 45px;
    letter-spacing: -.18px
}

.widget-embedded #container #conversation .connect-notification {
    border: 1px solid rgba(71,69,123,.12);
    border-radius: 20px;
    padding: 16px;
    margin: 5px 24px 0;
    width: 100%
}

.widget-embedded #container #conversation .connect-notification p {
    color: rgba(33,43,53,.65);
    font-size: 12px;
    letter-spacing: -.18px;
    line-height: 16px;
    margin-top: 0;
    text-align: center
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels {
    display: flex;
    justify-content: center
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels .connect-notification-icon {
    height: 32px;
    width: 32px;
    padding: 4px;
    border-radius: 20px;
    cursor: pointer;
    align-items: center;
    align-content: center;
    margin-right: 4px
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels .connect-notification-icon:last-child {
    margin-right: 0
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels .connect-notification-icon:hover {
    background-color: #f4f6f8
}

.widget-embedded #container #conversation .connect-notification .connect-notification-channels .connect-notification-icon img {
    height: 24px;
    width: 24px
}

.widget-embedded #container #conversation .connect-notification-linking-message {
    padding-bottom: 0
}

.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% - 180px)
}

.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
    }
}