form {
    padding: 0;
    margin: 0;
}
.pwChat {
    z-index: 999999;
    position: fixed;
    bottom:0;
    right:10px;
}

/* chat button */
.pwChat .chatB {
    width: 60px;
    height: 60px;
    cursor: hand;
}
.pwChat .chatB.onB {
    background: url("https://chat.pixelwerk-marketing.com/img/buttonOnline.png") no-repeat top left;
    animation: bounce 1s;
    transform-origin: center bottom;
}
.pwChat .chatB.offB {
    background: url("https://chat.pixelwerk-marketing.com/img/buttonOffline.png") no-repeat top left;
}

/* chat login/offline window */
.pwChat .chatL {
    z-index: 9999991;
    display: none;
    width: 300px;
    padding: 10px 0;
    background: white;
    border: 1px solid #adadad;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
    background: url('https://chat.pixelwerk-marketing.com/client/custom/WaelzlagerLogo.png') 10px 10px no-repeat;
}
.pwChat .chatL p {
    padding: 40px 0 10px 10px;
    margin: 0;
    font: normal 15px Verdana, Tahoma, sans-serif;
    color: #888;
}
.pwChat .chatLclose {
    z-index: 9999993;
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    opacity: .8;
    cursor: pointer;
    background: url("https://chat.pixelwerk-marketing.com/img/close.png") no-repeat top left;

}
.pwChat .chatL .lForm label {
    display: block;
    margin: 0 0 0 10px;
    color: #999999;
    font-weight: normal;
}
.pwChat .chatL .lForm input,
.pwChat .chatL .lForm textarea {
    padding: 9px;
    margin: 10px;
    border: solid 1px #E5E5E5;
    outline: 0;
    font: normal 11px/100% Verdana, Tahoma, sans-serif;
    width: 280px;
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
.pwChat .chatL .lForm textarea {
    height: 90px;
    line-height: 150%;
}
.pwChat .chatL .lForm input:hover,
.pwChat .chatL .lForm textarea:hover,
.pwChat .chatL .lForm input:focus,
.pwChat .chatL .lForm textarea:focus {
    border-color: #C9C9C9;
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
.pwChat .chatL .lForm input[type="button"] {
    width: auto;
    padding: 9px 15px;
    background: #617798;
    border: 0;
    font-size: 14px;
    color: #FFFFFF;
    border-radius: 5px;
}
.pwChat .chatL .lForm input[type="button"]:hover,
.pwChat .chatL .lForm input[type="button"]:focus {
    background: #576d8e;
}
.pwChat .chatLmessage {
    position: absolute;
    display: none;
    width: 300px;
    text-align: center;
    background-color: rgba(255, 255, 255, .8);
}
.pwChat .chatLmessage span {
    padding: 0 20px;
    font-size: 14px;
    display: table-cell;
    vertical-align: middle;
}
.errorField {
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #ffe6e5), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #ffe6e5 1px, #FFFFFF 25px);
}
.normalField {
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
}

/* chat online */
.pwChat .chatL .cForm {
    display: none;
}
.pwChat .chatL .cForm div {
    margin: 0 10px 5px 10px;
    min-height: 270px;
    max-height: 270px;
    width: 280px;
    overflow-x: hidden;
    overflow-y: auto;
}
.pwChat .chatL .cForm div p {
    padding: 1px;
    margin: 1px;
    font-size: 14px;
    text-shadow: 1px 1px 1px rgba(200, 200, 200, 1);
}
.pwChat .chatL .cForm div .me {
    background-color: #eaeaea;
}
.pwChat .chatL .cForm div .welcome {
    background-color: #d9e3cf;
}
.pwChat .chatL .cForm input {
    padding: 9px;
    margin: 10px 5px 10px 10px;
    border: solid 1px #E5E5E5;
    outline: 0;
    font: normal 11px/100% Verdana, Tahoma, sans-serif;
    width: 195px;
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
}
.pwChat .chatL .cForm input[type="button"] {
    width: 70px;
    padding: 10px;
    background: #617798;
    border: 0;
    font-size: 14px;
    color: #FFFFFF;
    border-radius: 5px;
}
.pwChat .chatL .cForm input[type="button"]:hover,
.pwChat .chatL .cForm input[type="button"]:focus {
    background: #576d8e;
}


/* chat button animation */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
        transform-style: preserve-3d;
    }

    40%, 43% {
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
        transform-style: preserve-3d;
    }

    70% {
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
        transform-style: preserve-3d;
    }

    90% {
        transform: translate3d(0,-4px,0);
        transform-style: preserve-3d;
    }
}