/* =========================================================================== */
/* main box container */
/* =========================================================================== */
.s-chat-box * {
    box-sizing: border-box;
    font-family: arial;
}
.s-chat-box {
    position: fixed;
    bottom: 5px;
    right: 20px;
    z-index: 99999;
    background-color: #edeff1;
    width: 300px;
    -webkit-transform: translateY(103%);
    transform: translateY(103%);
    -webkit-transition: transform .3s;
    transition: transform .3s;
    -webkit-box-shadow: 3px 7px 20px -4px rgba(0, 0, 0, 0.35);
    box-shadow: 3px 7px 20px -4px rgba(0, 0, 0, 0.35);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.s-chat-box.opened {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.s-chat-box-admin-is-online .s-chat-presence-indicator,
.s-chat-box-admin-is-offline .s-chat-presence-indicator {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin-right: 3px;
}
.s-chat-box-admin-is-offline .s-chat-presence-indicator {
    background-color: #ff0000;
}
.s-chat-box-admin-is-online .s-chat-presence-indicator {
    background-color: #84bd00;
}

/* =========================================================================== */
/* box header */
/* =========================================================================== */
.s-chat-box-header {
    width: 100%;
    height: 55px;
    line-height: 55px;
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.s-chat-box-header:before {
    position: absolute;
    right: 12px;
    color: #fff;
    font-size: 20px;
    content: "✖";
}
.s-chat-box-header .s-chat-header-title {
    padding-left: 12px;
}

/* =========================================================================== */
/* box messages container */
/* =========================================================================== */
.s-chat-messages {
    background-color: #edeff1;
    font-size: 13px;
    padding: 10px;
    height: 300px;
    border: 1px solid #cdcdcd;
    border-bottom: 0;
    overflow-y: auto;
}
.s-chat-messages:after,
.s-chat-messages:before {
    display: table;
    content: " ";
}
.s-chat-messages:after {
    clear: both;
}
.s-chat-message-item {
    background-color: transparent;
    width: 100%;
    margin-top: 3px;
    margin-bottom: 3px;
    word-wrap: break-word;
}
.s-chat-message-item:after,
.s-chat-message-item:before {
    display: table;
    content: " ";
}
.s-chat-message-item:after {
    clear: both;
}
.s-chat-message-item-avatar {
    float: left;
    margin-right: 5px;
    width: 23px;
    height: 23px;
    line-height: 23px;
    text-align: center;
    /*you can place your icon here (as a background) or font icon in content*/
    background-color: #000;
}
.s-chat-message-item-avatar:after {
    content: "S";
    color: #fff;
    font-weight: bold;
}
.s-chat-message-item .message {
    border-radius: 15px;
    padding: 5px 8px 4px;
    max-width: 80%;
    width: auto;
    background-color: #fff;
    color: #424242;
}
.s-chat-message-item .message {
    float: left;
}
.s-chat-message-item-client .message {
    float: right;
}

/* =========================================================================== */
/* main submit input text */
/* =========================================================================== */
.s-chat-submit-input {
    width: 100%;
    border: 1px solid #cdcdcd;
    border-top: 0;
    padding: 10px;
    outline: none;
    resize: none;
    font-size: 13px;
    margin: 0;
    display: block;
}
/* ios input zoom bug */
.s-chat-submit-input-ios {
    font-size: 16px;
}
/* =========================================================================== */
/* sChat 'opener' icon trigger */
/* =========================================================================== */
/*you can provide your own icon or font icon for chat box open trigger element*/
.s-chat-box-opener {
    font-family: arial;
    width: 55px;
    height: 55px;
    line-height: 50px;
    text-align: center;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99999;
    border-radius: 100%;
    cursor: pointer;
    -webkit-box-shadow: 3px 7px 20px -4px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 7px 20px -4px rgba(0, 0, 0, 0.75);
    background-color: #000;
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: 50%;
    /*you can provide your own box opener icon*/
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICBpZD0ic3ZnMiIgICB2aWV3Qm94PSIwIDAgMTUuMDYxMjQyIDExLjc2MDI0NSIgICBoZWlnaHQ9IjExLjc2MDI0NSIgICB3aWR0aD0iMTUuMDYxMjQyIiAgIHZlcnNpb249IjEuMSI+ICA8bWV0YWRhdGEgICAgIGlkPSJtZXRhZGF0YTEyIj4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzMTAiIC8+ICA8ZyAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuMDQ1ODcwMywtMi42Nzk4MTA2KSIgICAgIGlkPSJnNCIgLz4gIDxnICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjY1MTg3MjUzLDAsMCwwLjY1MTg3MjUzLDIyLjA5MTI4OSwxMS41MzA3NDIpIiAgICAgaWQ9Imc0MzU3Ij4gICAgPGcgICAgICAgaWQ9Imc0MjEwLTciICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0xLjQzMzM2MTYsMCwwLDEuNDMzMzYxNiwtNTAuOTc3MzI4LC0yMS40NzA4MTcpIj4gICAgICA8ZyAgICAgICAgIGlkPSJnNDIwNi00Ij4gICAgICAgIDxwYXRoICAgICAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxIiAgICAgICAgICAgZD0ibSAtMTguNzQ0MTQxLDIuNjM4NjcxOSBjIC0zLjAzMjY4OCwwIC01LjQ5ODA0NywyLjQ2NzMxMSAtNS40OTgwNDcsNS41IDAsMy4wMzI2ODgxIDIuNDY1MzU5LDUuNTAwMDAwMSA1LjQ5ODA0Nyw1LjUwMDAwMDEgMC45ODI1NDQsMCAxLjk0MjE2OSwtMC4yNjM2MDEgMi43ODkwNjMsLTAuNzYzNjcyIGwgNC4wMzMyMDMsMi4wODM5ODQgLTIuMDgzOTg0LC00LjAzMTI1IGMgMC40OTkzMzcsLTAuODQ2ODk0IDAuNzYxNzE4LC0xLjgwNjUxODEgMC43NjE3MTgsLTIuNzg5MDYyMSAwLC0zLjAzMjY4OSAtMi40NjczMTEsLTUuNSAtNS41LC01LjUgeiBtIDAsMC43MzQzNzUgYyAyLjYyNzkzOSwwIDQuNzY3NTc4LDIuMTM3Njg2IDQuNzY3NTc5LDQuNzY1NjI1IDAsMC45MTIxNTIgLTAuMjYyNjI4LDEuODAyODQ2OCAtMC43NTk3NjYsMi41NzQyMTkxIGwgLTAuMTE1MjM0LDAuMTc3NzM0IDEuMjIwNzAzLDIuMzYxMzI4IC0yLjM1OTM3NSwtMS4yMjA3MDMgLTAuMTc3NzM1LDAuMTE1MjM0IGMgLTAuNzcyMTA0LDAuNDk2NDA1IC0xLjY2MzI4NiwwLjc1NzgxMyAtMi41NzYxNzIsMC43NTc4MTMgLTIuNjI3OTM4LDAgLTQuNzY1NjI1LC0yLjEzNzY4NyAtNC43NjU2MjUsLTQuNzY1NjI1MSAwLC0yLjYyNzkzOSAyLjEzNzY4NywtNC43NjU2MjUgNC43NjU2MjUsLTQuNzY1NjI1IHoiICAgICAgICAgICBpZD0icGF0aDYtNC02IiAvPiAgICAgIDwvZz4gICAgICA8cGF0aCAgICAgICAgIGlkPSJwYXRoNDE3Ny0wIiAgICAgICAgIGQ9Im0gLTE4Ljc0NDE0MSwzLjMwNDY4NzUgYSA0LjgxODY5NDEsNC44MTg2OTQxIDAgMCAwIC00LjgyMDMxMiw0LjgxODM1OTQgNC44MTg2OTQxLDQuODE4Njk0MSAwIDAgMCA0LjgyMDMxMiw0LjgxODM1OTEgNC44MTg2OTQxLDQuODE4Njk0MSAwIDAgMCAyLjczNjMyOSwtMC44NTkzNzUgbCAyLjM5NDUzMSwxLjE4MTY0MSAtMS4xOTkyMTksLTIuMzYxMzI4IGEgNC44MTg2OTQxLDQuODE4Njk0MSAwIDAgMCAwLjg4NjcxOSwtMi43NzkyOTcxIDQuODE4Njk0MSw0LjgxODY5NDEgMCAwIDAgLTQuODE4MzYsLTQuODE4MzU5NCB6IiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjQwO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgLz4gICAgPC9nPiAgICA8ZyAgICAgICBpZD0iZzQyMTAiICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjIzMjA4NiwwLDAsMS4yMjMyMDg2LDMuNzk4NTUxNywtMTcuOTQ1ODkxKSI+ICAgICAgPGcgICAgICAgICBpZD0iZzQyMDYiPiAgICAgICAgPHBhdGggICAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjEiICAgICAgICAgICBkPSJtIC0xOC43NDQxNDEsMi42Mzg2NzE5IGMgLTMuMDMyNjg4LDAgLTUuNDk4MDQ3LDIuNDY3MzExIC01LjQ5ODA0Nyw1LjUgMCwzLjAzMjY4ODEgMi40NjUzNTksNS41MDAwMDAxIDUuNDk4MDQ3LDUuNTAwMDAwMSAwLjk4MjU0NCwwIDEuOTQyMTY5LC0wLjI2MzYwMSAyLjc4OTA2MywtMC43NjM2NzIgbCA0LjAzMzIwMywyLjA4Mzk4NCAtMi4wODM5ODQsLTQuMDMxMjUgYyAwLjQ5OTMzNywtMC44NDY4OTQgMC43NjE3MTgsLTEuODA2NTE4MSAwLjc2MTcxOCwtMi43ODkwNjIxIDAsLTMuMDMyNjg5IC0yLjQ2NzMxMSwtNS41IC01LjUsLTUuNSB6IG0gMCwwLjczNDM3NSBjIDIuNjI3OTM5LDAgNC43Njc1NzgsMi4xMzc2ODYgNC43Njc1NzksNC43NjU2MjUgMCwwLjkxMjE1MiAtMC4yNjI2MjgsMS44MDI4NDY4IC0wLjc1OTc2NiwyLjU3NDIxOTEgbCAtMC4xMTUyMzQsMC4xNzc3MzQgMS4yMjA3MDMsMi4zNjEzMjggLTIuMzU5Mzc1LC0xLjIyMDcwMyAtMC4xNzc3MzUsMC4xMTUyMzQgYyAtMC43NzIxMDQsMC40OTY0MDUgLTEuNjYzMjg2LDAuNzU3ODEzIC0yLjU3NjE3MiwwLjc1NzgxMyAtMi42Mjc5MzgsMCAtNC43NjU2MjUsLTIuMTM3Njg3IC00Ljc2NTYyNSwtNC43NjU2MjUxIDAsLTIuNjI3OTM5IDIuMTM3Njg3LC00Ljc2NTYyNSA0Ljc2NTYyNSwtNC43NjU2MjUgeiIgICAgICAgICAgIGlkPSJwYXRoNi00IiAvPiAgICAgIDwvZz4gICAgICA8cGF0aCAgICAgICAgIGlkPSJwYXRoNDE3NyIgICAgICAgICBkPSJtIC0xOC43NDQxNDEsMy4zMDQ2ODc1IGEgNC44MTg2OTQxLDQuODE4Njk0MSAwIDAgMCAtNC44MjAzMTIsNC44MTgzNTk0IDQuODE4Njk0MSw0LjgxODY5NDEgMCAwIDAgNC44MjAzMTIsNC44MTgzNTkxIDQuODE4Njk0MSw0LjgxODY5NDEgMCAwIDAgMi43MzYzMjksLTAuODU5Mzc1IGwgMi4zOTQ1MzEsMS4xODE2NDEgLTEuMTk5MjE5LC0yLjM2MTMyOCBhIDQuODE4Njk0MSw0LjgxODY5NDEgMCAwIDAgMC44ODY3MTksLTIuNzc5Mjk3MSA0LjgxODY5NDEsNC44MTg2OTQxIDAgMCAwIC00LjgxODM2LC00LjgxODM1OTQgeiIgICAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDo0MDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiIC8+ICAgIDwvZz4gICAgPGcgICAgICAgaWQ9Imc0MzMzIiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjU5NTMyMzk2LDAsMCwwLjU5NTMyMzk2LDE2LjI4MzQ3MiwtMTUuNDM1ODIxKSI+ICAgICAgPGNpcmNsZSAgICAgICAgIHI9IjEuMzEyNSIgICAgICAgICBjeT0iMTIuNjg3MjIyIiAgICAgICAgIGN4PSItNTkuMzc0NjY0IiAgICAgICAgIGlkPSJwYXRoNDI0My0wLTMiICAgICAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6NDA7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW1pdGVybGltaXQ6NDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLWRhc2hvZmZzZXQ6MDtzdHJva2Utb3BhY2l0eToxIiAvPiAgICAgIDxjaXJjbGUgICAgICAgICByPSIxLjMxMjUiICAgICAgICAgY3k9IjEyLjY4NzY2MiIgICAgICAgICBjeD0iLTYyLjE5NzU0NCIgICAgICAgICBpZD0icGF0aDQyNDMtOS01IiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjQwO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgLz4gICAgICA8Y2lyY2xlICAgICAgICAgcj0iMS4zMTI1IiAgICAgICAgIGN5PSIxMi42ODc3NzgiICAgICAgICAgY3g9Ii01Ni41NTI0NTYiICAgICAgICAgaWQ9InBhdGg0MjQzLTAtNC0zIiAgICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjQwO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgLz4gICAgPC9nPiAgPC9nPjwvc3ZnPg==);
}
.s-chat-box-opener.hidden {
    display: none;
}

/* =========================================================================== */
/* box powered by statement */
/* =========================================================================== */
.s-chat-powered-by {
    color: #cdcdcd;
    font-size: 10px;
    text-align: right;
    border-left: 1px solid #cdcdcd;
    border-right: 1px solid #cdcdcd;
    padding: 0 5px;
}
.s-chat-powered-by a {
    color: #cdcdcd;
}