:root {
    /*chat box background*/
    --live-chat-background-color: #fff;
    --live-chat-text-color: #2c3e50;
    --live-chat-label-color: #000;
    --live-chat-font-family: "Segoe UI", "Helvetica Neue",Helvetica,Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    /* init button classic*/
    --live-chat-init-btn-border-color: #fefefe;
    --live-chat-init-btn-bg-color: #e7eaec;
    /* init button chatbot*/
    --live-chat-init-btn-bot-border-color: #fefefe;
    --live-chat-init-btn-bot-bg-color: #e7eaec;
    /* form captions*/
    --live-chat-heading-bg-color: #2f4050;
    --live-chat-heading-text-color: #fff;
    --live-chat-heading-close-bg-color: #a94442;
    /* forms */
    --live-chat-forms-bg-color: #e7eaec;
    --live-chat-forms-text-color: #2f4050;
    --live-chat-forms-border-color: #e7eaec;
    /*validation errors*/
    --live-chat-validation-error-color: #cc0000;
    /*bot msg*/
    --live-chat-bot-msg-bg-color: #eceff1;
    --live-chat-bot-msg-text-color: #000;
    --live-chat-bot-msg-link-color: blue;
    --live-chat-bot-msg-border-color: #efefef;
    /*sys msg*/
    --live-chat-sysmsg-bg-color: #eee;
    --live-chat-sysmsg-text-color: #2f4050;
    --live-chat-sysmsg-border-color: #ccc;
    /*user msg*/
    --live-chat-usr-msg-bg-color: #1ba1e2;
    --live-chat-usr-msg-border-color: #1ba1e2;
    --live-chat-usr-msg-text-color: #fff;
    --live-chat-usr-msg-link-color: #fff;
    /* agent msg*/
    --live-chat-agt-msg-bg-color: #006AC1;
    /* input elements */
    --live-chat-inputs-bg-color: #fff;
    --live-chat-inputs-text-color: #555;
    --live-chat-inputs-border-color: #ccc;
    --live-chat-inputs-border-color-sel: #1BA1E2;
    /*msg online offline*/
    --live-chat-msg-online: #158331;
    --live-chat-msg-offline: #913737;
    /* send button*/
    --live-chat-send-btn-border-color: #285e8e;
    --live-chat-send-btn-bg-color: #006AC1;
    --live-chat-send-btn-color: #fff;
    --live-chat-send-btn-bg-color-hover: #428bca;
    --live-chat-send-btn-border-color-hover: #357ebd;
    --live-chat-send-btn-color: #fff;
    /*message list scrollbar*/
    --live-chat-scrollbar-color: auto;
    /*start chat button */
    --live-chat-btn-start-chat-color: #fff;
    --live-chat-btn-start-chat-bg-color: #5cb85c;
    --live-chat-btn-start-chat-border-color: #4cae4c;
    --live-chat-btn-start-chat-border-color-active: #398439;
    --live-chat-btn-start-chat-bg-color-active: #47a447;
    --live-chat-btn-start-chat-border-color-disabled: #4cae4c;
    --live-chat-btn-start-chat-bg-color-disabled: #5cb85c;
    /* error button*/
    --live-chat-err-btn-background-color: #d9534f;
    --live-chat-err-btn-border-color: #d43f3a;
    --live-chat-err-btn-color: #fff;
    --live-chat-err-btn-background-color-hover: #d2322d;
    --live-chat-err-btn-border-color-hover: #ac2925;
    /* chat bot option buttons*/
    --live-chat-bot-msg-btn-color: #fff;
    --live-chat-bot-msg-btn-bg-color: #8862f0;
    --live-chat-bot-msg-btn-border-color: #8862f0;
    --live-chat-bot-msg-btn-bg-color-hover: #65b9e6;
    --live-chat-bot-msg-btn-border-color-hover: #65b9e6;
    --live-chat-bot-msg-btn-bg-color-disabled: #fff;
    --live-chat-bot-msg-btn-color-disabled: #c7c7c7;
    --live-chat-bot-msg-btn-border-color-disabled: #acacac;
    --live-chat-bot-msg-btn-bg-color-selected: rgb(175, 175, 175);
    --live-chat-bot-msg-btn-color-selected: #000;
    --live-chat-bot-msg-btn-border-color-selected: #acacac;
    /* CS button*/
    --live-chat-cs-btn-bg-color: #006AC1;
    --live-chat-cs-btn-border-color: #285e8e;
    --live-chat-cs-btn-bg-color-disabled: #b3b7ba;
}


.live-chat-box *,
.live-chat-box *:before,
.live-chat-box *:after,
.live-chat-box input,
.live-chat-box select,
.live-chat-box label,
.live-chat-box div,
.live-chat-box span,
.live-chat-box-min *,
.live-chat-box-min *:before,
.live-chat-box-min *:after,
.live-chat-box-min input,
.live-chat-box-min select,
.live-chat-box-min label,
.live-chat-box-min div,
.live-chat-box-min span,
.live-chat-box-error *,
.live-chat-box-error *:before,
.live-chat-box-error *:after,
.live-chat-box-error input,
.live-chat-box-error select,
.live-chat-box-error label,
.live-chat-box-error div,
.live-chat-box-error span {
    
    all:unset;
    display:block;
    box-sizing: border-box;

}


.live-chat-box-error div,
.live-chat-box-min div,
.live-chat-box div {
    all: unset;
    box-sizing: border-box;
    display: block;
}

.live-chat-box-error span,
.live-chat-box-min span,
.live-chat-box span {
    all: unset;
    box-sizing: border-box;
    display: block;
    cursor: default;
}


.live-chat-btn-bot {
    all: unset;
    position: fixed;
    z-index: 30000000;
    bottom: 10px;
    right: 15px;
    width: 70px;
    height: 70px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box;
    background-color: transparent;
    /*
    transition: background-color .2s ease-in-out .2s;
    background-color: #e7eaec;
    background-color: var(--live-chat-init-btn-bot-bg-color);
*/
}

.live-chat-btn-bot a 
{
    all: unset;
    display: block;
}

.live-chat-btn-bot img {
    all: unset;
    display: block;
    width: 70px;
    height: 70px;
    background-color: transparent;
}

.live-chat-btn {
    all: unset;
    position: fixed;
    z-index: 30000000;
    bottom: 10px;
    right: 15px;
    background-color: #e7eaec;
    background-color: var(--live-chat-init-btn-bg-color);
    border: .3em solid #fefefe;
    border: .3em solid var(--live-chat-init-btn-border-color);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .2s ease-in-out .2s;
    font-family: "Segoe UI", "Helvetica Neue",Helvetica,Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-family: var(--live-chat-font-family);
    font-size: 14px;
    line-height: 14px;
}

.live-chat-btn a 
{
    all:unset;
    display:block;
    box-sizing:border-box;
    height:100%;
}

.live-chat-btn img 
{
    all: unset;
    display: block;
    box-sizing: border-box;
    margin: 17px auto;
    width: 60%;
    height: auto;
    float: none;
    
}

.live-chat-box button 
{
    all: unset;
    display: block;
    box-sizing: border-box;
    text-align: center;
}


.live-chat-box-error {
    all: unset;
    float: none;
    background-color: #e7eaec !important;
    background-color: var(--live-chat-forms-bg-color) !important;
    width: 320px;
    height: fit-content;
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: "Segoe UI", "Helvetica Neue",Helvetica,Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-family: var(--live-chat-font-family);
    font-size: 14px;
    line-height: 14px;
    cursor: default;
}



.live-chat-box-error.mode-default 
{
    position: fixed;
    z-index: 30000000;
    bottom: 1px;
    right: 15px;
}


.live-chat-box-error.mode-centered 
{
    position: fixed;
    z-index: 30000000;
}


.live-chat-box-full 
{
    all: unset;
    position:fixed;
    top:0;
    left:0;
    display: flex;
    justify-content: center; 
    align-items: center; 
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.live-chat-box-min {
    all: unset;
    float: none;
    position: fixed;
    z-index: 30000000;
    bottom: 1px;
    right: 15px;
    background-color: #e7eaec !important;
    background-color: var(--live-chat-forms-bg-color) !important;
    width: 320px;
    display: block;
    box-sizing: border-box;
    font-family: "Segoe UI", "Helvetica Neue",Helvetica,Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-family: var(--live-chat-font-family);
    font-size: 14px;
    line-height: 14px;
    height: fit-content;

    color: #2c3e50;
    color: var(--live-chat-text-color);
}


.live-chat-box-error * 
{
    all: unset;
    font-size: 15px;
    display: block;
    box-sizing: border-box;
    font-family: "Segoe UI", "Helvetica Neue",Helvetica,Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-family: var(--live-chat-font-family);
    cursor: default;
}


.live-chat-box-min * 
{
    all: unset;
    font-size: 15px;
    display: block;
    box-sizing: border-box;
    font-family: "Segoe UI", "Helvetica Neue",Helvetica,Arial,sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-family: var(--live-chat-font-family);
    cursor: default;
}

.live-chat-box.mode-default
{
    position: fixed;
    z-index: 30000000;
    bottom: 1px;
    right: 15px;
}

.live-chat-box.mode-fill {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.live-chat-box-error .input-group-centered 
{
    width:82px;
    display:block;
    margin:0px auto;
}

.live-chat-box-min .intro,
.live-chat-box-error .intro {
    height: fit-content;
    padding-top: 10px;
    padding-bottom: 8px;
    display: flex;
    flex-direction: column;
    color: #2f4050;
    color: var(--live-chat-forms-text-color);
    background-color: #e7eaec !important;
    background-color: var(--live-chat-forms-bg-color) !important;
}

.live-chat-box-min .msgweare
{
    font-size:150%;
    font-weight:500;
    display: inline-block;
    margin-top: 0px;
}

.live-chat-box-min .msgonline
{
    font-size: 150%;
    font-weight: 500;
    display: inline-block;
    color: #158331;
    color:var(--live-chat-msg-online);
}

.live-chat-box-min .msgLeaveUsMessage 
{
    font-size: 85%;
    display: inline-block;
}


.live-chat-box-min .msgoffline {
    font-size: 150%;
    font-weight: 500;
    display: inline-block;
    color: #913737;
    color: var(--live-chat-msg-offline);
}


.live-chat-box-error .intro .intro-content-main,
.live-chat-box-min .intro .intro-content-main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    user-select: none;
}

.live-chat-box-error .intro .intro-content-text,
.live-chat-box-min .intro .intro-content-text {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

.live-chat-box-error .intro .intro-content-text .text-block,
.live-chat-box-min .intro .intro-content-text .text-block {
    display: inline-block;
}

.live-chat-box-error .msg-error-main {
    font-size: 150%;
    font-weight: 500;
    display: inline-block;
    margin-top: 0px;
    color: #2f4050;
    color: var(--live-chat-forms-text-color);
    margin-bottom:5px;
}

.live-chat-box-error .msg-error-details {
    display: block;
    padding: 0 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #2f4050;
    color: var(--live-chat-forms-text-color);
    margin-top: 5px;
}


.live-chat-box-min .logo-chat,
.live-chat-box-error .logo-chat 
{
    float: left;
    padding: 0px 10px 0px 30px;
    vertical-align: middle;
}

.live-chat-box-error .intro .btn-danger 
{
    all: unset;
    display: block;
    margin: auto;
    outline: none;
    background-color: #d9534f;
    background-color: var(--live-chat-err-btn-background-color);
    border-color: #d43f3a;
    border-color: var(--live-chat-err-btn-border-color);
    font-size: 13px !important;
    font-weight: 400;
    color: #fff;
    color: var(--live-chat-err-btn-color);
    padding: 6px 6px 8px 6px;
}

.live-chat-box-error .intro .btn-danger:hover,
.live-chat-box-error .intro .btn-danger:focus,
.live-chat-box-error .intro .btn-danger:active 
{
    outline: none;
    background-color: #d2322d;
    background-color: var(--live-chat-err-btn-background-color-hover);
    border-color: #ac2925;
    border-color: var(--live-chat-err-btn-border-color-hover);
}



.live-chat-box 
{
    all: unset;
    display: block;

    background: #fff;
    background: var(--live-chat-background-color);

    width: 450px;
    min-width: 450px;
    height: 600px;
    min-height: 200px;
    box-sizing: border-box;    
    font-family:var(--live-chat-font-family);
    font-size: 16px;
    line-height: 23px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}



.live-chat-btn,
.live-chat-box,
.live-chat-box-min,
.live-chat-box-error 
{
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.live-chat-box .pull-right,
.live-chat-box-min .pull-right,
.live-chat-box-error .pull-right 
{
    float:right !important;
    text-decoration: none;
}


.live-chat-box .input-group,
.live-chat-box-min .input-group
{
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;    
}

.live-chat-box #session-form 
{
    display:block;
    user-select:none;
}

.live-chat-box .input-group .form-control,
.live-chat-box .input-group .input-group-btn>.btn,
.live-chat-box-min .input-group .form-control,
.live-chat-box-min .input-group .input-group-btn>.btn 
{
    height: 35px;
    padding: 5px 8px;
    font-size: 16px;
    line-height: 23px;
}

.live-chat-box .input-group .input-group-btn>.btn,
.live-chat-box-min .input-group .input-group-btn>.btn 
{
    background-position: 0 -30px;
}

.live-chat-box .input-group .input-group-btn .btn-icon img,
.live-chat-btn .input-group .input-group-btn .btn-icon img,
.live-chat-box-min .input-group .input-group-btn .btn-icon img {
    all: unset;
    vertical-align:auto;
    vertical-align:top;
    vertical-align:initial;
    float: none;
}

.input-group-btn .fileupload 
{
    float: left; 
    vertical-align:middle;    
    /*cursor:pointer;*/
    text-decoration: none;    
    max-width:initial;
    max-height:initial;
    width:initial;
    height:initial;    
    height:35px;
    display:none;
}

.live-chat-box select {
    border: 1px solid #ccc;
    border: 1px solid var(--live-chat-inputs-border-color);
    height: 34px;
    background-repeat: no-repeat;
    background-color: #eee;
    background-position: right center;
    background-position-x: right;
    background-position-y: center;
    background-size: 20px;
}

.live-chat-box select::-ms-expand 
{
    display:none;
}

.live-chat-box select.input-group-sm .form-control,
.live-chat-box select.input-group-sm .input-group-btn>.btn{

    height: 30px;
    line-height: 30px
}

.live-chat-box .input-group .form-control,
.live-chat-box-min .input-group .form-control 
{
    width: 100%;
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    color: #555;
    color: var(--live-chat-inputs-text-color);
    background-color: #fff;
    background-color: var(--live-chat-inputs-bg-color);
    border: 1px solid #ccc;
    border: 1px solid var(--live-chat-inputs-border-color);
    border-radius: 0px;
    float: none;
    font-family: var(--live-chat-font-family);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.live-chat-box .input-group-btn,
.live-chat-box .input-group-sm .form-control,
.live-chat-box-min .input-group-btn,
.live-chat-box-min .input-group-sm .form-control 
{
    display: table-cell;
}

.live-chat-box .input-group .form-control:focus,
.live-chat-box-min .input-group .form-control:focus {
    outline-offset: -2px;
    outline-color: #1BA1E2;
    outline-color: var(--live-chat-inputs-border-color-sel);
    outline-width: 2px;
    outline-style: solid;
}

.live-chat-box .input-group .form-control.error,
.live-chat-box-min .input-group .form-control.error {
    font-weight: 100;
    border-color: #CC0000;
    border-color: var(--live-chat-validation-error-color);
}

/*
.live-chat-box .input-group .form-control.error:focus,
.input-group .form-control.error:focus 
{
    border-color:#ccc;
}
*/

.live-chat-box .input-group textarea.form-control,
.live-chat-box-min .input-group textarea.form-control {
    resize:none;
    overflow:auto;    
    font-weight: 400;
    text-transform: none;
    flex-grow:1;
    height:35px;

}

.live-chat-box input::placeholder,
.live-chat-box-min input::placeholder 
{
   color: var(--live-chat-inputs-text-color);    
   opacity: 0.7;
}

.live-chat-box .form-control.mb0,
.live-chat-box-min .form-control.mb0 {
    margin-bottom: 0px;
}

.live-chat-box #session-form textarea.form-control 
{
    height: 100px;
}

.live-chat-box .input-group-btn,
.live-chat-box-min .input-group-btn {
    position: relative;
    white-space: nowrap
}
.live-chat-box .input-group-btn .btn,
.live-chat-box-min .input-group-btn .btn {
    position: relative
}

.live-chat-box .input-group-btn .btn+.btn,
.live-chat-box-min .input-group-btn .btn+.btn {
    margin-left: -4px
}

.live-chat-box .input-group-btn .btn:hover,
.live-chat-box .input-group-btn .btn:active,
.live-chat-box-min .input-group-btn .btn:hover,
.live-chat-box-min .input-group-btn .btn:active {
    z-index: 2
}


.live-chat-box .input-group-btn,
.live-chat-box-min .input-group-btn {
        
    white-space: nowrap;        
    vertical-align: top;
    flex-grow:1;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
}



.live-chat-box label,
.live-chat-box-min label {
    all: inherit;
    display: inline-block;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    color: #000;
    color: var(--live-chat-label-color);
}

.live-chat-box .btn,
.live-chat-box-min .btn,
.live-chat-box-error .btn {
    all: inherit;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: normal;
    line-height: 23px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0px;
    margin: 0;
    user-select: none;
    color: #fff;
    color: var(--live-chat-send-btn-color);
    background-color: #006AC1;
    background-color: var(--live-chat-send-btn-bg-color);
    border-color: #285e8e;
    border-color: var(--live-chat-send-btn-border-color);
}

.live-chat-box .btn.btn-sm,
.live-chat-box-min .btn.btn-sm,
.live-chat-box-error .btn.btn-sm {
    font-size:16px;
    padding: 4px 6px 6px 6px;
}

.live-chat-box .btn:focus,
.live-chat-box-min .btn:focus,
.live-chat-box-error .btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.live-chat-box .btn:hover,
.live-chat-box .btn:focus,
.live-chat-box-min .btn:hover,
.live-chat-box-min .btn:focus {
    color: #333;
    text-decoration: none;
}

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

.live-chat-box .btn.disabled,
.live-chat-box .btn[disabled],
.live-chat-box fieldset[disabled] .btn,
.live-chat-box-min .btn.disabled,
.live-chat-box-min .btn[disabled],
.live-chat-box-min fieldset[disabled] .btn 
{
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;    
    -webkit-box-shadow: none;
    box-shadow: none
}

.live-chat-box .btn:hover,
.live-chat-box .btn:focus,
.live-chat-box .btn:active,
.live-chat-box .btn.active,
.live-chat-box .open .dropdown-toggle.btn,
.live-chat-box-min .btn:hover,
.live-chat-box-min .btn:focus,
.live-chat-box-min .btn:active,
.live-chat-box-min .btn.active,
.live-chat-box-min .open .dropdown-toggle.btn,
.live-chat-box-error .btn:hover,
.live-chat-box-error .btn:focus,
.live-chat-box-error .btn:active,
.live-chat-box-error .btn.active,
.live-chat-box-error .open .dropdown-toggle.btn {
    color: #fff;
    background-color: #428bca;
    background-color: var(--live-chat-send-btn-bg-color-hover);
    border-color: #357ebd;
    border-color: var(--live-chat-send-btn-border-color-hover);
}

.live-chat-box .btn:active,
.live-chat-box .btn.active,
.live-chat-box .open .dropdown-toggle.btn,
.live-chat-box-min .btn:active,
.live-chat-box-min .btn.active,
.live-chat-box-min .open .dropdown-toggle.btn 
{
    background-image: none
}

/*
.live-chat-box .btn.disabled,
.live-chat-box .btn[disabled],
.live-chat-box fieldset[disabled] .btn,
.live-chat-box .btn.disabled:hover,
.live-chat-box .btn[disabled]:hover,
.live-chat-box fieldset[disabled] .btn:hover,
.live-chat-box .btn.disabled:focus,
.live-chat-box .btn[disabled]:focus,
.live-chat-box fieldset[disabled] .btn:focus,
.live-chat-box .btn.disabled:active,
.live-chat-box .btn[disabled]:active,
.live-chat-box fieldset[disabled] .btn:active,
.live-chat-box .btn.disabled.active,
.live-chat-box .btn[disabled].active,
.live-chat-box fieldset[disabled] .btn.active {
    background-color: #428bca;
    border-color: #357ebd
}

.live-chat-box-min .btn.disabled,
.live-chat-box-min .btn[disabled],
.live-chat-box-min fieldset[disabled] .btn,
.live-chat-box-min .btn.disabled:hover,
.live-chat-box-min .btn[disabled]:hover,
.live-chat-box-min fieldset[disabled] .btn:hover,
.live-chat-box-min .btn.disabled:focus,
.live-chat-box-min .btn[disabled]:focus,
.live-chat-box-min fieldset[disabled] .btn:focus,
.live-chat-box-min .btn.disabled:active,
.live-chat-box-min .btn[disabled]:active,
.live-chat-box-min fieldset[disabled] .btn:active,
.live-chat-box-min .btn.disabled.active,
.live-chat-box-min .btn[disabled].active,
.live-chat-box-min fieldset[disabled] .btn.active 
{
    background-color: #428bca;
    border-color: #357ebd
}
*/

.live-chat-box .btn-success {
    color: #fff;
    color: var(--live-chat-btn-start-chat-color);
    background-color: #5cb85c;
    background-color: var(--live-chat-btn-start-chat-bg-color);
    border-color: #4cae4c;
    border-color: var(--live-chat-btn-start-chat-border-color);
    outline: none;
}

.live-chat-box .btn-success:hover,
.live-chat-box .btn-success:focus,
.live-chat-box .btn-success:active,
.live-chat-box .btn-success.active,
.live-chat-box .open .dropdown-toggle .btn-success {
    color: #fff;
    background-color: #47a447;
    background-color: var(--live-chat-btn-start-chat-bg-color-active);
    border-color: #398439;
    border-color: var(--live-chat-btn-start-chat-bg-color-active);
    background-position: 0 30px;
    outline: none;
}

.live-chat-box .btn-success:active,
.live-chat-box .btn-success.active,
.live-chat-box .open .dropdown-toggle .btn-success {
    background-image: none;
    outline: none;
}


.live-chat-box .btn-success.disabled,
.live-chat-box .btn-success[disabled],
.live-chat-box fieldset[disabled] .btn-success,
.live-chat-box .btn-success.disabled:hover,
.live-chat-box .btn-success[disabled]:hover,
.live-chat-box fieldset[disabled] .btn-success:hover,
.live-chat-box .btn-success.disabled:focus,
.live-chat-box .btn-success[disabled]:focus,
.live-chat-box fieldset[disabled] .btn-success:focus,
.live-chat-box .btn-success.disabled:active,
.live-chat-box .btn-success[disabled]:active,
.live-chat-box fieldset[disabled] .btn-success:active,
.live-chat-box .btn-success.disabled.active,
.live-chat-box .btn-success[disabled].active,
.live-chat-box fieldset[disabled] .btn-success.active {
    background-color: #5cb85c;
    background-color: var(--live-chat-btn-start-chat-bg-color-disabled);
    border-color: #4cae4c;
    border-color: var(--live-chat-btn-start-chat-border-color-disabled);
    outline: none;
}


.live-chat-box .btn.btn-icon,
.live-chat-box .input-group-sm .input-group-btn >.btn-icon,
.live-chat-box-min .btn.btn-icon,
.live-chat-box-min .input-group-sm .input-group-btn >.btn-icon 
{
    padding:7px 15px;
}

.live-chat-box .btn.btn-icon-thin {
    padding: 7px 7px;
}


.live-chat-box .field-validation-error,
.live-chat-box-min .field-validation-error {
    display: none;
    color: #CC0000 !important;
    color: var(--live-chat-validation-error-color) !important;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: -10px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

.live-chat-box .active,
.live-chat-box-min .active {
    display:block;
}

.live-chat-box .btn-block {
    width:100%;
}

.body-live .live-chat-box {
  bottom: 70px;
  right: 20px;
}
.live-chat-box.active {
  display: block;
}
.live-chat-box .heading,
.live-chat-box-min .heading,
.live-chat-box-error .heading {
    background: #2f4050;
    background: var(--live-chat-heading-bg-color);
    font-weight: bold;
    color: #fff;
    color: var(--live-chat-heading-text-color);
    min-height: 33px;
    font-size: 16px;
    line-height: 23px;
    user-select: none;
}

.live-chat-box .heading.ltIE9,
.live-chat-box-min .heading.ltIE9,
.live-chat-box-error .heading.ltIE9 {
  min-height:22px;
}

.live-chat-box .heading .heading-text,
.live-chat-box-min .heading .heading-text,
.live-chat-box-error .heading .heading-text {
    max-width: 85%;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    padding: 5px 5px 5px 15px;
}


.live-chat-box .heading .close,
.live-chat-box-min .heading .close,
.live-chat-box-error .heading .close {
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    color: var(--live-chat-heading-text-color);
    font-size: 16px;
    line-height: 23px;
    text-shadow: 0 1px 0 var(--live-chat-heading-text-color);
    opacity: .6;
    padding: 4px 10px 4px 10px;
    width: 33px;
    height: 33px;
}

.live-chat-box .heading .close:hover,
.live-chat-box-min .heading .close:hover,
.live-chat-box-error .heading .close:hover 
{
    opacity: 1;
    background-color: #a94442;
    background-color: var(--live-chat-heading-close-bg-color);
}

.live-chat-box .chat-date {
    all:unset;
    opacity: 0.6;
    font-size: 11px;
    font-weight: normal;
    margin-top: 4px;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 6px;
}
.live-chat-box .slimScrollDiv {
     position: relative; 
     overflow: hidden; 
     width: auto; 
     height: 270px;
}
.live-chat-box .content 
{
    padding: 15px 15px;
    overflow-y: auto;
    min-width: 100%;
    flex-grow: 1;
    scrollbar-color: var(--live-chat-scrollbar-color);
}

.live-chat-box .content-lg {
  padding: 10px 15px;
  overflow-y: auto; 
  width: auto; 
  min-height: 450px;
  min-width: 450px;
  
}


.live-chat-box .agent-active-box {
    background-color: #fff;
    background-color: var(--live-chat-background-color);
    color: #000;
    color: var(--live-chat-label-color);
    display: block;
    font-size: 14px;    
    line-height: 20px;
    /*vertical-align: bottom;*/
    padding: 0 0 0 0;
    position: absolute;
    top: -28px;
    left: 15px;
    border: 1px solid #e7eaec;
    border: 1px solid var(--live-chat-forms-border-color);
    border-radius: 4px;
    padding: 2px 5px 2px 5px;
}

.live-chat-box .file-upload-box {
    
    display: flex;    
    flex-flow: column nowrap;    
    font-size: 16px;    
    line-height: 23px;
    /*vertical-align: bottom;*/
    padding: 0 0 0 0;
    margin-bottom: 5px;

}

.live-chat-box .file-upload-box .file-upload-entry 
{
 
    color: #000;
    color: var(--live-chat-label-color);
    padding-bottom: 3px;
    display:inline-block;
    /*flex: 0 0 50%;*/
}


.live-chat-box .file-upload-box .file-remove-btn {
    float: none;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
    padding: 5px;
    padding-right: 10px;
    font-size: 19px;
    font-weight: 800;
}


.live-chat-box .file-upload-box .file-error-msg {
    line-height: 23px;
    padding: 0 0 0 0;
    display: block;
    color: #CC0000 !important;
    color: var(--live-chat-validation-error-color) !important;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 2px;
}

.live-chat-box .validation-error-box 
{
 
    line-height: 23px;
    padding: 0 0 0 0;
    display: none;
    color: #CC0000 !important;
    color: var(--live-chat-validation-error-color) !important;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 2px;
}

.live-chat-box b {
    all: unset;
    font-weight: 700;
}

.live-chat-box i {
    all: unset;
    font-style:italic;
}



.live-chat-box .form-chat-box {
    height: fit-content;
    width: 100%;
    z-index: 999;
}

.live-chat-box .content .author-name {
    font-weight: bold;
    /*margin-bottom: 4px;*/
    font-size: 15px;
    opacity: 0.7;
    text-align: left;
}

.live-chat-box .content .left .author-name {
    /*margin-bottom: 6px;*/
}


.live-chat-box .content .clearfix {
    clear: both;
}

.live-chat-box .content .chat-message {
    padding: 5px 10px;
    font-size: 16px;
    line-height: 23px;
    max-width: 80%;
    min-width: 40%;
    background: #1BA1E2;
    background: var(--live-chat-usr-msg-bg-color);
    color: #fff;
    color: var(--live-chat-usr-msg-text-color);
    margin-bottom: 10px;
    position: relative;
    word-break: break-word;
    word-wrap: break-word;
    white-space: pre-line;
    clear: both;
}

.live-chat-box .content .chat-message a 
{
    color: #fff !important;
    color: var(--live-chat-usr-msg-link-color) !important;        
    text-decoration: underline;
}

.live-chat-box .content .system-msg {
    padding: 5px 10px;
    font-size: 16px;
    line-height: 23px;
    max-width: 100%;
    color: #2f4050;
    color: var(--live-chat-sysmsg-text-color);
    margin-bottom: 10px;
    position: relative;
    background: #eee;
    background: var(--live-chat-sysmsg-bg-color);
    border: 1px solid var(--live-chat-sysmsg-border-color);
    word-break: break-word;
    word-wrap: break-word;
    clear: both;
}

.live-chat-box .content .system-msg a 
{
    color:#2f4050 !important;
    color:var(--live-chat-sysmsg-text-color);
    text-decoration: underline;
}

.live-chat-box .content .system-msg div 
{
     line-height: 20px;
}



.live-chat-box .content .left  {
  text-align: left;
  clear: both;
}

.live-chat-box .content .left .chat-message {
    float: left;
    background-color: #006AC1;
    background-color: var(--live-chat-agt-msg-bg-color);
}

.live-chat-box .content .right {
  text-align: right;
  clear: both;
}
.live-chat-box .content .right .chat-message {
  float: right;
}
.live-chat-box .content .right .chat-message p {
  text-align:left;
}

.live-chat-box .form-chat {
    all: unset;
    padding: 10px 10px 0 10px;
    border-top: 1px solid #e7eaec;
    border-top: 1px solid var(--live-chat-forms-border-color);
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: fit-content;
    /*    min-height: 60px;*/
    background: #fff;
    background: var(--live-chat-background-color);

    color: #000;
    color: var(--live-chat-label-color);
    z-index: 10;
}

.live-chat-box .left .chat-message:before {
    content: "";
    position: absolute;
    top: 10px;
    left: -9px;
    border-right: 9px solid black;
    border-right-color: #006AC1;
    border-right-color: var(--live-chat-agt-msg-bg-color);    
    border-bottom: 9px solid transparent;
}

.live-chat-box .content .right .chat-message:after {
    content: "";
    position: absolute;
    top: 10px;
    right: -9px;
    border-left: 9px solid black;
    border-left-color: #1BA1E2;
    border-left-color: var(--live-chat-usr-msg-border-color);
    border-bottom: 9px solid transparent;
}

.live-chat-box .resizer 
{
    width:14px;
    height:14px;
    position:absolute;
    background-color:transparent;
    background-image: url('resizer.png');
    /*background-size:14px;*/
    cursor:se-resize;
    cursor:nw-resize;
    top:0;
    left:0;
}




.live-chat-box .content .bot-message {
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    max-width: 90%;
    min-width: 40%;
    background: #eceff1;
    background: var(--live-chat-bot-msg-bg-color);
    background-color: #eceff1;
    background-color: var(--live-chat-bot-msg-bg-color);
    color: #000000;
    color: var(--live-chat-bot-msg-text-color);
    margin-bottom: 15px;
    margin-left: 45px;
    margin-top: 15px;
    position: relative;
    word-break: break-word;
    word-wrap: break-word;
    white-space: pre-line;
    border-color: #EFEFEF;
    border-color: var(--live-chat-bot-msg-border-color);
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.live-chat-box .content .bot-message .txtpart{
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  
}


.live-chat-box .content .bot-button-parent 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
    width:90%;
    margin-left:44px;
}

.bot-button-parent .bot-button {
    background: #8862f0;
    background: var(--live-chat-bot-msg-btn-bg-color);
    color: #fff;
    color: var(--live-chat-bot-msg-btn-color);
    padding: 5px;
    margin-right: 5px;
    font-size: 16px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 10px;    
    border: 1px solid #8862f0;
    border: 1px solid var(--live-chat-bot-msg-btn-border-color);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-style: inherit;
}

.bot-button-parent .bot-button:hover {
    background-color: #65b9e6;
    background-color: var(--live-chat-bot-msg-btn-bg-color-hover);
    border-color: #65b9e6;
    border-color: var(--live-chat-bot-msg-btn-border-color-hover);
}


.bot-button-parent .bot-button:disabled {
    background-color: #fff;
    background-color: var(--live-chat-bot-msg-btn-bg-color-disabled);
    color: #c7c7c7;
    color: var(--live-chat-bot-msg-btn-color-disabled);
    border-color: #acacac;
    border-color: var(--live-chat-bot-msg-btn-border-color-disabled);
    cursor: default;
}


.bot-button-parent .bot-button-selected {
    background-color: rgb(175, 175, 175);
    background-color: var(--live-chat-bot-msg-btn-bg-color-selected);
    color: #000;
    color: var(--live-chat-bot-msg-btn-color-selected);
    padding: 5px;
    margin-right: 5px;
    font-size: 16px;
    width: 100%;
    margin-bottom: 10px;
    border: solid 1px;
    border-color: #acacac;
    border-color: var(--live-chat-bot-msg-btn-border-color-selected);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: default;
    font-style: inherit;
}


.bot-button-parent .bot-button-sel {
    background-color: rgb(175, 175, 175);
    background-color: var(--live-chat-bot-msg-btn-bg-color-selected);
    color: #000;
    color: var(--live-chat-bot-msg-btn-color-selected);
    border-color: #acacac;
    border-color: var(--live-chat-bot-msg-btn-border-color-selected);
    cursor: default;
    font-style: inherit;
}

.live-chat-box .content .left-bot-avatar 
{
    float: left !important;
    height: 42px;
    width: 36px;
    border-radius: 50%;
    background-image: url('chatbot2.png') !important;
    background-size: 36px 42px;    
}

.live-chat-box-error img,
.live-chat-box-min img,
.live-chat-box img {
    all: unset;
    box-sizing: border-box;
}

.live-chat-box-error a,
.live-chat-box-min a,
.live-chat-box a {
    all: unset;
    box-sizing: border-box;    
    
}


.bot-message .txtpart a {
    display: inline-block;
    color: blue;
    color: var(--live-chat-bot-msg-link-color);
    text-decoration: underline;
    cursor: pointer;
}

.bot-message .txtpart b {
    font-weight:700;
}

.bot-message .txtpart i {
    font-style: italic;

}

.bot-message .bot-typing {
    all: unset;
    width: 50px;
    height: 24px;
    float: none;
}


.system-msg .reloadtext {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    font-size: inherit;    
    line-height: inherit;
    margin-top: 20px;
    margin-bottom: 20px;
}

.system-msg .reloadtext div {

    margin-bottom: 20px;
}

.system-msg .cstext {
    text-decoration: none;
    font-size: inherit;
    line-height: inherit;
    margin-top: 10px;
    margin-bottom: 10px;
}

.system-msg .csstarimg {
    height: 42px;
    width: 42px;
    cursor : pointer;

}

.system-msg .csstarscontainer {
    display : flex;  
    flex-direction : row;
    justify-content : center;
    margin-bottom: 30px;   

}

.system-msg .csopinion {
    all: inherit;
    background-color: #ffffff !important;
    background-color: var(--live-chat-inputs-bg-color) !important;
    color: #555;
    color: var(--live-chat-inputs-text-color);
    resize: none;
    overflow: auto;
    max-width: 100%;
    width: 100% !important;
    height: 100px !important;
    font-weight: 400;
    text-transform: none;
    font-size: 16px;
    padding: 5px 8px;
}

.system-msg .csopinion:focus {
    outline-offset: -2px;
    outline-color: #1BA1E2;
    outline-color: var(--live-chat-inputs-border-color-sel);
    outline-style: solid;
}

.system-msg .csopinion::placeholder
{
  
    color: var(--live-chat-inputs-text-color);
    opacity: 0.7;
}



.system-msg .csbutton 
{
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    background-color: #006AC1;
    background-color: var(--live-chat-cs-btn-bg-color);
    border-color: #285e8e;
    border-color: var(--live-chat-cs-btn-border-color);
    color: #fff;
    border: thin;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 40px !important;
    width: 180px !important;
    cursor: default;
}

.system-msg .csbutton:disabled {
    background-color: #b3b7ba;
    background-color: var(--live-chat-cs-btn-bg-color-disabled);
}


.live-chat-box .content .filepart 
{
   float: left !important;
   padding: 5px 5px;
   font-size: 16px;
   font-weight: 400;
   line-height: 23px;
   text-align: left !important;
    
}


.live-chat-animated 
{
    animation-duration: 1.25s;
    animation-fill-mode: none;
}


@keyframes live-chat-fadeIn 
{
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.live-chat-fadeIn 
{
    animation-name: live-chat-fadeIn;
}


@keyframes live-chat-fade-in-right 
{
    0% {
        opacity: 0;        
        transform: translateX(20px)
    }

    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

.live-chat-fade-in-right 
{

    animation-name: live-chat-fade-in-right;

}

@-webkit-keyframes live-chat-fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes live-chat-fadeOut 
{
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.live-chat-fadeOut 
{
    animation-name: live-chat-fadeOut;
}



@media only screen and (max-width: 460px) 
{
    .live-chat-box 
    {
        width: 90%;
        min-width: 90%;
    }


    .live-chat-box .content {
        min-width: 90%;

        
    }

    .live-chat-box .content-lg {
        min-width: 90%;
    }


}

@media only screen and (min-height: 800px) {
    
    .live-chat-box.mode-default 
    {
        height: 700px;
        max-height: 700px;
        min-height: 700px;
    }

    .live-chat-box.mode-fill {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;        
    }


}