/*change this to whatever light colors works for you */
.chat-widget {
    position: fixed;
    right: 4.5%;
    bottom: 0;
    width: 100%;
    max-width: 97.5%;
    height: 0;
    max-height: 400px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 3px 1px;
    transition: all .5s ease;
    z-index: 10;
    border: solid 1px white; }
@media print {
    .chat-widget {
        display: none; } }
@media (min-width: 31.25em) {
    .chat-widget {
        max-width: 300px; } }

.chat-widget-closed {
    height: 36px; }

.chat-widget-opened {
    height: 100%;
    max-height: 400px; }

.chat-widget-button {
    width: 100%;
    height: 36px;
    padding: 0 1em;
    background: #fff;
    border: 0;
    font-size: 100%;
    text-align: left;
    outline: 0; }

.chat-widget-button:hover, .chat-widget-button:active {
    background-color: white;
    cursor: pointer; }

.chat-button-label {
    padding-top: 2px;
    display: inline-block; }

.chat-button-label:before {
    content: " ";
    position: relative;
    top: 2px;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .5em;
    background-color: #00A66E;
    border-radius: 50%;
    color: #ccc; }

button.chat-widget-button, .chat-widget-button button {
    color: #ccc;
    background: white;
    margin: 0; }

.chat-widget iframe {
    width: 100%;
    height: 100%;
    max-height: 362px;
    border: none; }

.chat-button-control {
    float: right;
    font-style: normal;
    font-size: 140%;
    font-weight: 400;
    color: #888; }

.chat-widget-closed .chat-button-control {
    transform: rotate(45deg); }

#recv {
    bottom: 7em; }