* {
    box-sizing: border-box;
}

.emojionearea{
    flex: 1 0 !important;
    height: 50px !important;
}

.emojionearea-button{
    top: 50% !important;
    transform: translateY(-50%) !important; 
}

.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea]{position:absolute;z-index:1000;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow:0 6px 12px rgba(0,0,0,.175);-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item{font-size:14px;padding:1px 3px;border:0}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item a{text-decoration:none;display:block;height:100%;line-height:1.8em;padding:0 1.54em 0 .615em;color:#4f4f4f}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover{background-color:#e4e4e4}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item.active a,.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item:hover a{color:#333}.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item .emojioneemoji{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:0 5px .2ex 0;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea-text .emojioneemoji,.emojionearea-text [class*=emojione-]{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea,.emojionearea *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.emojionearea.emojionearea-disable{position:relative;background-color:#eee;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.emojionearea.emojionearea-disable:before{content:"";display:block;top:0;left:0;right:0;bottom:0;z-index:1;opacity:.3;position:absolute;background-color:#eee}.emojionearea,.emojionearea.form-control{display:block;position:relative!important;width:100%;height:auto;padding:0;font-size:14px;background-color:#FFF;border:1px solid #CCC;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-transition:border-color .15s ease-in-out,-moz-box-shadow .15s ease-in-out;-o-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.emojionearea .emojionearea-editor{display:block;height:auto;min-height:8em;max-height:15em;overflow:auto;padding:6px 24px 6px 12px;line-height:1.42857143;font-size:inherit;color:#555;background-color:transparent;border:0;cursor:text;margin-right:1px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.emojionearea .emojionearea-editor:empty:before{content:attr(placeholder);display:block;color:#BBB}.emojionearea .emojionearea-editor:focus{border:0;outline:0;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none}.emojionearea .emojionearea-editor .emojioneemoji,.emojionearea .emojionearea-editor [class*=emojione-]{font-size:inherit;height:2ex;width:2.1ex;min-height:20px;min-width:20px;display:inline-block;margin:-.2ex .15em .2ex;line-height:normal;vertical-align:middle;max-width:100%;top:0}.emojionearea.emojionearea-inline{height:34px}.emojionearea.emojionearea-inline>.emojionearea-editor{height:32px;min-height:20px;overflow:hidden;white-space:nowrap;position:absolute;top:50%;transform:translateY(-50%);left:12px;right:24px;padding:6px 0}.emojionearea.emojionearea-inline>.emojionearea-button{top:4px}.emojionearea .emojionearea-button{z-index:5;position:absolute;right:3px;top:3px;width:24px;height:24px;opacity:.6;cursor:pointer;-moz-transition:opacity .3s ease-in-out;-o-transition:opacity .3s ease-in-out;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.emojionearea .emojionearea-button:hover{opacity:1}.emojionearea .emojionearea-button>div{display:block;width:24px;height:24px;position:absolute;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}.emojionearea .emojionearea-button>div.emojionearea-button-open{background-position:0 -24px;filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button>div.emojionearea-button-close{background-position:0 0;-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-open{-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-button.active>div.emojionearea-button-close{-webkit-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-picker{background:#FFF;position:absolute;-moz-box-shadow:0 1px 5px rgba(0,0,0,.32);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.32);box-shadow:0 1px 5px rgba(0,0,0,.32);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;height:276px;width:316px;top:-15px;right:-15px;z-index:90;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out;filter:alpha(Opacity=0);opacity:0;-moz-user-select:-moz-none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.emojionearea .emojionearea-picker.hidden{display:none}.emojionearea .emojionearea-picker .emojionearea-wrapper{position:relative;height:276px;width:316px}.emojionearea .emojionearea-picker .emojionearea-wrapper:after{content:"";display:block;position:absolute;background-repeat:no-repeat;z-index:91}.emojionearea .emojionearea-picker .emojionearea-filters{width:100%;position:absolute;z-index:95;background:#F5F7F9;padding:0 0 0 7px;height:40px}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter{display:block;float:left;height:40px;width:32px;padding:7px 1px 0;cursor:pointer;-webkit-filter:grayscale(1);filter:grayscale(1)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active{background:#fff}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter.active,.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>i{width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter>img{width:24px;height:24px;margin:0 3px}.emojionearea .emojionearea-picker .emojionearea-search-panel{height:30px;position:absolute;z-index:95;top:40px;left:0;right:0;padding:5px 0 5px 8px}.emojionearea .emojionearea-picker .emojionearea-search-panel .emojionearea-tones{float:right;margin-right:10px;margin-top:-1px}.emojionearea .emojionearea-picker .emojionearea-tones-panel .emojionearea-tones{position:absolute;top:4px;left:171px}.emojionearea .emojionearea-picker .emojionearea-search{float:left;padding:0;height:20px;width:160px}.emojionearea .emojionearea-picker .emojionearea-search>input{outline:0;width:160px;min-width:160px;height:20px}.emojionearea .emojionearea-picker .emojionearea-tones{padding:0;width:120px;height:20px}.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone{display:inline-block;padding:0;border:0;vertical-align:middle;outline:0;background:0 0;cursor:pointer;position:relative}.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-0,.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-0:after{background-color:#ffcf3e}.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-1,.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-1:after{background-color:#fae3c5}.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-2,.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-2:after{background-color:#e2cfa5}.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-3,.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-3:after{background-color:#daa478}.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-4,.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-4:after{background-color:#a78058}.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-5,.emojionearea .emojionearea-picker .emojionearea-tones>.btn-tone.btn-tone-5:after{background-color:#5e4d43}.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone{width:20px;height:20px;margin:0;background-color:transparent}.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{content:"";position:absolute;display:block;top:4px;left:4px;width:12px;height:12px}.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone.active:after{top:0;left:0;width:20px;height:20px}.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-radio>.btn-tone{width:16px;height:16px;margin:0 2px}.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone.active:after,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-radio>.btn-tone.active:after{content:"";position:absolute;display:block;background-color:transparent;border:2px solid #fff;width:8px;height:8px;top:2px;left:2px;box-sizing:initial}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block:before,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block>.emojionearea-category:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block>.emojionearea-category:before,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title:after,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title:before{content:" ";clear:both;display:block}.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-bullet>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-radio>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-radio>.btn-tone:after{-moz-border-radius:100%;-webkit-border-radius:100%;border-radius:100%}.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-checkbox>.btn-tone:after,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone,.emojionearea .emojionearea-picker .emojionearea-tones.emojionearea-tones-square>.btn-tone:after{-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px}.emojionearea .emojionearea-picker .emojionearea-scroll-area{height:236px;overflow:auto;overflow-x:hidden;width:100%;position:absolute;padding:0 0 5px}.emojionearea .emojionearea-picker .emojionearea-search-panel+.emojionearea-scroll-area{height:206px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-emojis-list{z-index:1}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-title{display:block;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;font-weight:400;color:#b2b2b2;background:#FFF;line-height:20px;margin:0;padding:7px 0 5px 6px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block{padding:0 0 0 7px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojionearea-category-block>.emojionearea-category{padding:0!important}.emojionearea .emojionearea-picker .emojionearea-scroll-area [class*=emojione-]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;margin:0;width:24px;height:24px;top:0}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;width:24px;height:24px;float:left;display:block;margin:1px;padding:3px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn:hover{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:#e4e4e4;cursor:pointer}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn i,.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img{float:left;display:block;width:24px;height:24px}.emojionearea .emojionearea-picker .emojionearea-scroll-area .emojibtn img.lazy-emoji{filter:alpha(Opacity=0);opacity:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters{top:0;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-top.emojionearea-search-position-top .emojionearea-scroll-area{bottom:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-top.emojionearea-search-position-bottom .emojionearea-scroll-area{top:40px}.emojionearea .emojionearea-picker.emojionearea-filters-position-top.emojionearea-search-position-bottom .emojionearea-search-panel{top:initial;bottom:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom .emojionearea-filters{bottom:0;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom.emojionearea-search-position-bottom .emojionearea-scroll-area{top:0}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom.emojionearea-search-position-bottom .emojionearea-search-panel,.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom.emojionearea-search-position-top .emojionearea-scroll-area{top:initial;bottom:40px}.emojionearea .emojionearea-picker.emojionearea-filters-position-bottom.emojionearea-search-position-top .emojionearea-search-panel{top:0}.emojionearea .emojionearea-picker.emojionearea-picker-position-top{margin-top:-286px;right:-14px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -49px;bottom:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-top.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -80px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left,.emojionearea .emojionearea-picker.emojionearea-picker-position-right{margin-right:-326px;top:-8px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{width:10px;height:19px;background-position:0 -60px;top:13px;left:-10px}.emojionearea .emojionearea-picker.emojionearea-picker-position-left.emojionearea-filters-position-bottom .emojionearea-wrapper:after,.emojionearea .emojionearea-picker.emojionearea-picker-position-right.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:right -60px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom{margin-top:10px;right:-14px;top:47px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after{width:19px;height:10px;background-position:-2px -100px;top:-10px;right:20px}.emojionearea .emojionearea-picker.emojionearea-picker-position-bottom.emojionearea-filters-position-bottom .emojionearea-wrapper:after{background-position:-2px -90px}.emojionearea .emojionearea-button.active+.emojionearea-picker{filter:alpha(enabled=false);opacity:1}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-top{margin-top:-269px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-left,.emojionearea .emojionearea-button.active+.emojionearea-picker-position-right{margin-right:-309px}.emojionearea .emojionearea-button.active+.emojionearea-picker-position-bottom{margin-top:-7px}.emojionearea.emojionearea-standalone{display:inline-block;width:auto;box-shadow:none}.emojionearea.emojionearea-standalone .emojionearea-editor{min-height:33px;position:relative;padding:6px 42px 6px 6px}.emojionearea.emojionearea-standalone .emojionearea-editor::before{content:"";position:absolute;top:4px;left:50%;bottom:4px;border-left:1px solid #e6e6e6}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder .emojioneemoji{opacity:.4}.emojionearea.emojionearea-standalone .emojionearea-button{top:0;right:0;bottom:0;left:0;width:auto;height:auto}.emojionearea.emojionearea-standalone .emojionearea-button>div{right:6px;top:5px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-bottom .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-top .emojionearea-wrapper:after{right:23px}.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-left .emojionearea-wrapper:after,.emojionearea.emojionearea-standalone .emojionearea-picker.emojionearea-picker-position-right .emojionearea-wrapper:after{top:15px}.emojionearea .emojionearea-button>div,.emojionearea .emojionearea-picker .emojionearea-wrapper:after{background-image:url(data:image/png;base64,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)!important}.emojionearea.emojionearea-standalone .emojionearea-editor.has-placeholder{background-repeat:no-repeat;background-position:20px 4px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEUAAAC/v79T5hyIAAAAAXRSTlMAQObYZgAAABNJREFUCNdjYGNgQEb/P4AQqiAASiUEG6Vit44AAAAASUVORK5CYII=)!important}

:root {
    --lc-primary-gradient: linear-gradient(
        315deg,
        rgba(0, 95, 255, 1) 0%,
        rgba(0, 213, 214, 1) 100%
    );
    --lc-dark-green: #006b83;
    --lc-theme-blue: #0f4cf7;
}

.emojionearea.emojionearea-inline > .emojionearea-editor {
    font-size: 14px;
    font-weight: 300;
}

#center-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.chat-circle-wrapper{
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 64px;
    height: 64px;
    border-radius: 0;
}

#chat-circle {
    width: 100%;
    color: white;
    cursor: pointer;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
}

.chat-dot{
    height: 12px;
    width: 12px;
    border-radius: 100%;
    background-color:red;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(-1px, 8px);
}

.btn#my-btn {
    background: white;
    padding-top: 13px;
    padding-bottom: 12px;
    border-radius: 45px;
    padding-right: 40px;
    padding-left: 40px;
    color: #5865c3;
}

#chat-overlay {
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: none;
}

.chat-box {
    display: none;
    background: #f6f6f7;
    position: fixed;
    right: 30px;
    bottom: 50px;
    width: 370px;
    max-width: 85vw;
    max-height: 80vh;
    border-radius: 5px;
    box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.5);
}

.chat-box div, .chat-box p, .chat-box h1, .chat-box h2, .chat-box h3, .chat-box h4, .chat-box h5, .chat-box h6, .chat-box span, .chat-box a, .chat-box button, .chat-box input{
    font-family: Roboto;
}

.chat-box-toggle {
    cursor: pointer;
}

.chat-box-header {
    background: var(--lc-primary-gradient);
    height: 70px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: white;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 10px;
    box-sizing: border-box;
    align-items: center;
}

.livechat-profile {
    display: flex;
    gap: 5px;
    align-items: center;
}

.livechat-profile img {
    height: 100%;
    max-width: 54px;
    max-height: 54px;
    border-radius: 100%;
    border: 2px solid #ffffff9e;
}

.livechat-profile .profile-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.livechat-profile .profile-role {
    font-size: 11px;
    line-height: 11px;
    font-weight: 500;
    background: var(--lc-dark-green);
    color: white;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    width: fit-content;
}

.livechat-profile .name {
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    margin-left: 2.5px;
}

.livechat-action {
    margin-right: 5px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.livechat-action > div {
    display: grid;
}

.chat-box-body {
    position: relative;
    height: 370px;
    height: auto;
    overflow: hidden;
    /*border: 1px solid #e5e0e0;*/
    /* padding-bottom: 10px; */
    box-sizing: border-box;
    /*border-radius: 0 5px 5px 0; */
}

.chat-box-body:after {
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAgOCkiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgY3g9IjE3NiIgY3k9IjEyIiByPSI0Ii8+PHBhdGggZD0iTTIwLjUuNWwyMyAxMW0tMjkgODRsLTMuNzkgMTAuMzc3TTI3LjAzNyAxMzEuNGw1Ljg5OCAyLjIwMy0zLjQ2IDUuOTQ3IDYuMDcyIDIuMzkyLTMuOTMzIDUuNzU4bTEyOC43MzMgMzUuMzdsLjY5My05LjMxNiAxMC4yOTIuMDUyLjQxNi05LjIyMiA5LjI3NC4zMzJNLjUgNDguNXM2LjEzMSA2LjQxMyA2Ljg0NyAxNC44MDVjLjcxNSA4LjM5My0yLjUyIDE0LjgwNi0yLjUyIDE0LjgwNk0xMjQuNTU1IDkwcy03LjQ0NCAwLTEzLjY3IDYuMTkyYy02LjIyNyA2LjE5Mi00LjgzOCAxMi4wMTItNC44MzggMTIuMDEybTIuMjQgNjguNjI2cy00LjAyNi05LjAyNS0xOC4xNDUtOS4wMjUtMTguMTQ1IDUuNy0xOC4xNDUgNS43IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTg1LjcxNiAzNi4xNDZsNS4yNDMtOS41MjFoMTEuMDkzbDUuNDE2IDkuNTIxLTUuNDEgOS4xODVIOTAuOTUzbC01LjIzNy05LjE4NXptNjMuOTA5IDE1LjQ3OWgxMC43NXYxMC43NWgtMTAuNzV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjcxLjUiIGN5PSI3LjUiIHI9IjEuNSIvPjxjaXJjbGUgZmlsbD0iIzAwMCIgY3g9IjE3MC41IiBjeT0iOTUuNSIgcj0iMS41Ii8+PGNpcmNsZSBmaWxsPSIjMDAwIiBjeD0iODEuNSIgY3k9IjEzNC41IiByPSIxLjUiLz48Y2lyY2xlIGZpbGw9IiMwMDAiIGN4PSIxMy41IiBjeT0iMjMuNSIgcj0iMS41Ii8+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTkzIDcxaDN2M2gtM3ptMzMgODRoM3YzaC0zem0tODUgMThoM3YzaC0zeiIvPjxwYXRoIGQ9Ik0zOS4zODQgNTEuMTIybDUuNzU4LTQuNDU0IDYuNDUzIDQuMjA1LTIuMjk0IDcuMzYzaC03Ljc5bC0yLjEyNy03LjExNHpNMTMwLjE5NSA0LjAzbDEzLjgzIDUuMDYyLTEwLjA5IDcuMDQ4LTMuNzQtMTIuMTF6bS04MyA5NWwxNC44MyA1LjQyOS0xMC44MiA3LjU1Ny00LjAxLTEyLjk4N3pNNS4yMTMgMTYxLjQ5NWwxMS4zMjggMjAuODk3TDIuMjY1IDE4MGwyLjk0OC0xOC41MDV6IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yNSIvPjxwYXRoIGQ9Ik0xNDkuMDUgMTI3LjQ2OHMtLjUxIDIuMTgzLjk5NSAzLjM2NmMxLjU2IDEuMjI2IDguNjQyLTEuODk1IDMuOTY3LTcuNzg1LTIuMzY3LTIuNDc3LTYuNS0zLjIyNi05LjMzIDAtNS4yMDggNS45MzYgMCAxNy41MSAxMS42MSAxMy43MyAxMi40NTgtNi4yNTcgNS42MzMtMjEuNjU2LTUuMDczLTIyLjY1NC02LjYwMi0uNjA2LTE0LjA0MyAxLjc1Ni0xNi4xNTcgMTAuMjY4LTEuNzE4IDYuOTIgMS41ODQgMTcuMzg3IDEyLjQ1IDIwLjQ3NiAxMC44NjYgMy4wOSAxOS4zMzEtNC4zMSAxOS4zMzEtNC4zMSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjEuMjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48L3N2Zz4=");
    opacity: 0.05;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    position: absolute;
    z-index: -1;
}

#chat-input {
    background: #f4f7f9;
    width: 100%;
    position: relative;
    height: 47px;
    padding-top: 10px;
    padding-right: 50px;
    padding-bottom: 10px;
    padding-left: 15px;
    border: none;
    resize: none;
    outline: none;
    border: 1px solid #ccc;
    color: #888;
    border-top: none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    overflow: hidden;
    box-sizing: border-box;
}

.chat-input > form {
    margin-bottom: 0;
}

#chat-input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #ccc;
}

#chat-input::-moz-placeholder {
    /* Firefox 19+ */
    color: #ccc;
}

#chat-input:-ms-input-placeholder {
    /* IE 10+ */
    color: #ccc;
}

#chat-input:-moz-placeholder {
    /* Firefox 18- */
    color: #ccc;
}

.chat-submit {
    position: absolute;
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 50%;
    display: flex;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 0;
}

.chat-submit > i{
    color: var(--lc-theme-blue);
}

.chat-logs {
    padding: 15px;
    height: 370px;
    overflow-y: scroll;
}

@media only screen and (max-width: 500px) {
    .chat-logs {
        height: 40vh;
    }
}

.chat-msg.user > .msg-avatar img, .chat-msg.agent > .msg-avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    float: left;
    width: 15%;
}

.chat-msg.self > .msg-avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    float: right;
    width: 15%;
}


.chat-msg {
    display: flex;
    font-weight: 400;
    margin-bottom: 10px;
    flex-direction: column;
}

.msg .emojioneemoji {
    width: 20px;
    height: 20px;
}



.system .cm-msg-text, .handle .cm-msg-text{
    background: none;
    box-shadow: none;
    width: 100%;
    padding: 5px 15px;
    display: flex;
    justify-content: center;
    text-align:center;
    box-sizing: border-box;
    max-width: 100%;
}

.system .message, .handle .message{
    text-align: center;
    color: #858585;
    font-size: 12px;
    font-weight: 400;
}

.handle .cm-msg-text{
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 10px auto;
}

.handle .adv-agent-avatar{
    width: 80px;
    height: 80px;
    border-radius: 100px;
    border: 2px solid white;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    margin-bottom: 3px;
} 

.handle .message{
    font-size: 14px;
} 

.message{
    overflow-wrap: anywhere;
}


.msg .message img, .chat-msg .message a{
    padding: 0 3px;
}

.cm-msg-button > ul > li {
    list-style: none;
    float: left;
    width: 50%;
}

.cm-msg-button {
    clear: both;
    margin-bottom: 70px;
}

#chat-form {
    padding: 15px;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    padding-top: 48px;
 
}

@media (max-width: 768px) {
    #chat-circle {
        right: 15px;
        bottom: 15px;
        width: 64px;
        height: 64px;
        line-height: 40px;
    }

    #chat-box {
        right: 10px;
        bottom: 10px;
        width: 80%;
        height: 300px;
    }
}

.chatbody {
    padding: 15px;
    height: 400px;
    overflow-y: scroll;
    max-height: calc(80vh - 150px);
    box-sizing: border-box;
}

/* For Webkit Browsers (Chrome, Safari) */
.chatbody::-webkit-scrollbar {
    width: 5px;
}

.chatbody::-webkit-scrollbar-track {
    background: transparent;
}

.chatbody::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}

/* For Firefox */
.chatbody {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.chatbody::-webkit-scrollbar {
    width: 5px;
}

.chatbody::-webkit-scrollbar-thumb {
    background-color: #ccc;
}

.chatbody::-webkit-scrollbar-track {
    background-color: transparent;
}

.chat_input {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 10px;
}

.chat_input label {
    color: black;
    font-size: 14px;
    font-weight: 500;
}

.chat_input input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: black;
    box-sizing: border-box;
}

.chat_input_button {
    display: block;
    width: 100%;
    background: var(--lc-primary-gradient);
    padding: 10px;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    font-family: Roboto;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

.chat_input_button:hover {
    background-color: #000000;
}

.confirmation-dialog {
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 20px;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.confirmation-dialog .endchat-options {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 5%;
    gap: 10px;
}

.confirmation-dialog .endchat-options button {
    flex: 0 0 calc(50% - 5px);
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 500;
}

.confirmation-dialog #start-new-chat {
    flex: 0 0 90%;
    color: white;
    margin: auto;
    font-size: 14px;
    font-weight:500;
}

.confirmation-dialog #confirm-no {
    color: rgba(0, 0, 0, 0.87);
}

.confirmation-dialog #confirm-yes,
.confirmation-dialog #start-new-chat {
    background: #007af5;
    color: white;
}

.confirmation-dialog p {
    text-align: center;
    color: rgba(0, 0, 0, 0.87);
    font-weight: 400;
    margin-bottom: 15px;
}

.rating {
    font-size: 0;
}

.star {
    font-size: 24px;
    cursor: pointer;
    color: #ccc;
    display: inline-block;
    transition: color 0.2s;
}

.star.light {
    color: gold;
}

.rating {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.emojionearea {
    background: none;
    border: none;
    width: calc(100% - 55px) !important;
    border-radius: 0px;
}

.emojionearea-button {
    margin: 0 !important;
}

.emojionearea-picker {
    left: 50% !important;
    transform: translatex(-42%) !important;
}

#upload-images-wrapper {
    position: absolute;
    bottom: 48px;
    padding: 0;
}

#fileNamesContainer{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#upload-images-wrapper .fileNamesContainer{
    padding: 5px;
}

#upload-images-wrapper .file-item {
    padding: 5px 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px;
    color: rgba(0, 0, 0, 0.87);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
    width: fit-content;
}

#upload-images-wrapper .file-item span {
    max-width: 280px;
    font-size: 12px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(0,0,0,0.7);
}

#upload-images-wrapper button {
    border: none;
    background: transparent;
    padding: 0;
    margin-left: 5px;
    display: grid;
}

.msg .img-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.msg .img-wrapper > div {
    background: #ffffff26;
    border-radius: 8px;
    margin: 5px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.msg .img-wrapper .size-1 {
    height: 120px;
    width: 120px;
}

.msg .img-wrapper .size-2 {
    height: 100px;
    width: 100px;
}

.msg .img-wrapper .size-3 {
    height: 100px;
    width: 100px;
}

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1000000010;
}

#lightbox img {
    max-width: 80%;
    max-height: 80%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hidden {
    display: none;
}

.chat-input {
    background: white;
    position: relative;
    border-radius: 0 0 5px 5px;
}

.self .cm-msg-text a, .self .cm-msg-time{
    color: white;
}

.user .cm-msg-text a, .agent .cm-msg-text a{
    color: #3c6dff;
}

.chat-top-wrapper{
    background: #8b8b8b;
    padding: 0.5rem;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#live-chat-marquee{
    background: #000;
    padding: 5px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.5);
}

.chat-top-wrapper div{
    white-space: nowrap;
    font-weight: 400;
    text-align: center;
    font-size: 14px;
    color: white;
}

#live-chat-marquee div{
    width: 100%;
    white-space: nowrap;
    font-weight: 400;
    display: inline-block;
    -moz-transform: translateX(120%);
    -webkit-transform: translateX(120%);
    transform: translateX(120%);
    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: chatchatnotice 15s linear infinite;
    font-size: 14px;
    color: white;
}

.chat-top-wrapper div a{
    font-size: 14px;
    font-weight:600;
}

@-moz-keyframes chatchatnotice {
    from { -moz-transform: translateX(120%); }
    to { -moz-transform: translateX(-200%); }
  }
  
  /* for Chrome */
  @-webkit-keyframes chatchatnotice {
    from { -webkit-transform: translateX(120%); }
    to { -webkit-transform: translateX(-200%); }
  }
  
  @keyframes chatchatnotice {
    from {
      -moz-transform: translateX(120%);
      -webkit-transform: translateX(120%);
      transform: translateX(120%);
    }
    to {
      -moz-transform: translateX(-200%);
      -webkit-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

.chat_input input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: black;
    box-sizing: border-box;
}

.chat_input input[type="number"]::-webkit-inner-spin-button, .chat_input input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.chat_input input[type="number"] {
    -moz-appearance: textfield;
}

.hide{
    display: none !important;
}

.chat-box .form{
    padding: 15px;
    background: white;
    border-radius: 5px;
    width: 75%;
    margin: auto;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    padding-top: 48px;
    margin-top: 48px;
    margin-bottom: 15px;
}

.chat-box .form label{
    color: black;
    font-size: 12px;
    font-weight: 600;
    color: #5d5d5d;
}

.chat-box .form input[type="text"]{
    width: 100%;
    padding: 8px 10px;
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: black;
    box-sizing: border-box;
}

.chat-box .form input[type="text"]:focus, .chat-box .form input[type="number"]:focus{
    outline: none;
    border-radius: 1px solid #638fef;
}

.chat-box .form .chat-input{
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 15px;
    background: transparent;
}

.chat-box .chat-form-header{
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 600;
    color: #535353;
}

.chat-box .form .text-center{
    text-align: center;
}

.chat-box .form .form-top-img, .chat-form-top-img{
    position: absolute;
    top: 0;
    transform: translate(-50%,-50%);
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50px;
    box-shadow: 0 2px 5px 3px rgba(0,0,0,0.1);
    padding: 15px;
    box-sizing: border-box;
    background: var(--lc-primary-gradient);
}

.chat-box .form .form-top-img img, .chat-form-top-img img{
    width: 100%;
}

.chat-box .form .btn-submit{
    display: block;
    width: 100%;
    background: var(--lc-primary-gradient);
    padding: 10px;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 5px;
    cursor: pointer;
}

.chat-box .form input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    font-weight: 300;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: black;
    box-sizing: border-box;
}

.chat-box .form input[type="number"]::-webkit-inner-spin-button, .chat-box .form input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.chat-box .form input[readonly] {
    background: #f1f1f1;
    border: none !important;
}

.chat-box .form input[type="number"] {
    -moz-appearance: textfield;
}

.chat-box .form .form-note{
    font-size: 10px;
    text-align: right;
    margin-top: -8px;
    font-weight: 400;
    color: #676464;
}

.chat-box .chat-err-msg{
    color: red;
    text-align: center;
    font-size: 12px;
}

.chat-box .assist-options{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
}

.chat-box .assist-option{
    border-radius: 25px;
    font-size: 14px;
    padding: 8px 15px;
    font-weight: 400;
    text-wrap: nowrap;
    margin: 5px;
    border: 1px solid #2e80ff;
    /*background: rgba(255, 255, 255, 1);*/
    color: #2e80ff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.chat-box .chat-single-image{
    width: 100%;
    margin-bottom: 10px;
}

.response-review-wrapper{
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 15px;
    margin-left: 30px;
    padding: 0 3px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
}

.response-review-wrapper label{
    color: #5f5f5f;
}

.response-review-wrapper .review-actions{
    gap: 8px;
    display: flex;
}

.response-review-wrapper .btn-review{
    padding: 3px 5px;
    background: white;
    border-radius: 5px;
    font-size: 12px;
    filter:drop-shadow(0 4px 3px rgba(0,0,0,0.1));
    cursor: pointer;
    color: black;
}

.response-review-wrapper .thanks-note{
    color: #898989;
    font-size: 11px;
    margin-top: -5px !important;
    padding: 0 3px;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
}

.chatbody .chat-agent-profile{
    display: flex;
    gap: 5px;
    align-items: center;
}

.chatbody .chat-agent-profile img{
    width: 28px;
    height: 28px;
    border-radius: 25px;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.25));
    margin-bottom: -28px;
    margin-left: -35px;
}

.chatbody .chat-agent-profile div{
    font-size: 14px;
    font-weight: 600;
    color: black;
}

.chat-box .chat-box-body .form .header{
    background: none;
    box-shadow: none;
    color: #363636;
    font-size: 14px;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
}

/** end **/

#content{
    z-index: 1;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    top: 65px;
    bottom: 70px;
    background-color: #000;
    background-size: cover;
    background-position: center;
    color: #fff;
 }

#livechat{
    background: var(--gradient-dark-blue);
    min-width: 300px;
    min-height: 500px;
    height: calc(100vh - 145px);
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    padding: 10px;
    overflow: hidden;
}

#livechat .msg{
    display: flex;
    flex-direction: column;
    background: #ffffff47;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 10px;
}

#livechat .msg-user{
    font-size: 12px;
    font-weight:600;
}

#livechat .system-msg .msg-user{
    color: #39ff39;
}

#livechat .agent-msg .msg-user{
    color: yellow;
}

#livechat .client-msg .msg-user{
    color: #66ccff;
}

#livechat .msg-content{
    margin-top: 5px;
}

#livechat .msg-content, #livechat .msg-content *{
    font-size: 14px;
    line-height: 18px;
}

#livechat .msg-time{
    padding-left: 3px;
    font-size: 14px;
    margin: -3px 0 2px;
}

.msg-wrapper{
    height: calc( 100% - 50px);
    overflow-y:auto;
    overflow-x: hidden;
    margin-bottom: 10px;
}

.chat-input{
    display: flex;
    margin-bottom: 10px;
    position: relative;
}

.chat-input textarea{
    background: white;
    width: 100%;
    color: black;
    border: none;
    border-radius: 100px;
    padding: 10px 100px 6px 15px;
    height:40px;
    font-size: 16px;
}

.chat-input textarea:focus{
    border: none;
    outline: none;
}

.chat-input .chat-action{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 5px;
    color: #977100;
}

.chat-action svg > *{
    color: #0090b5;
}

.msg .chat-single-image{
    max-height: 160px;
    background: #ffffff26;
    border-radius: 8px;
    margin: 5px 3px;
}