/* CSS Multiple Whatsapp Chat by Maks Miliyan*/
#whatsapp-chat{
    position:fixed;
    background:#fff;
    width:240px;
    border-radius:10px;
    box-shadow:0 1px 15px rgba(32,33,36,.28);
    bottom:90px;
    left:30px;
    overflow:hidden;
    z-index:99;
    animation-name:showchat;
    animation-duration:1s;
    transform:scale(1)
}
.fab{
    margin: 0.2em 0.3em;
    border-radius: 0.25em;
    padding: 0.5em 0.5em;
}
a.blantershow-chat{
    background:linear-gradient(to left top,#24CC63,#24CC63);
    color:#fff;
    position:fixed;
    z-index:98;
    bottom:25px;
    left:30px;
    font-size:15px;
    padding:10px;
    border-radius:30px;
    box-shadow:0 1px 15px rgba(32,33,36,.28)
}
a.blantershow-chat i{
    transform:scale(2);
}
.header-chat{background:linear-gradient(to left top,#6f96f3,#164ed2);color:#fff;padding:20px}
.header-chat h3{
    margin:0 0 10px;
    font-size: 17px;
}
.header-chat p{font-size:14px;line-height:1.7;margin:0}
.head-home i{
    font-size: 12px;
}
.info-avatar{
    position:relative
}
.info-avatar img{
    border-radius:100%;
    width:50px;
    float:left;
    margin:0 10px 0 0
}
@font-face{
    font-family:"Font Awesome 5 Brands";
    font-style:normal;
    font-weight:normal;
    font-display:auto;
    src:url(fa-brands-400.eot);
    src:url(fa-brands-400.eot?#iefix) format("embedded-opentype"),url(fa-brands-400.woff2) format("woff2"),url(fa-brands-400.woff) format("woff"),url(fa-brands-400.ttf) format("truetype"),url(fa-brands-400.svg#fontawesome) format("svg")
}
.fab{
    font-family:"Font Awesome 5 Brands"
}
.info-avatar:before{
    content:'\f232';
    z-index:1;
    font-family:"Font Awesome 5 Brands";
    background:#23ab23;
    color:#fff;
    padding:0.1em 0.4em;
    border-radius:100%;
    position:absolute;
    top:30px;
    left:30px
}
a.informasi{padding:20px;display:block;overflow:hidden;animation-name:showhide;animation-duration:2.5s}
a.informasi:hover{background:#f1f1f1}.info-chat span{display:block}#get-label,span.chat-label{font-size:12px;color:#888}
#get-nama,span.chat-nama{margin:5px 0 0;font-size:15px;font-weight:700;color:#222}#get-label,#get-nama{color:#fff}span.my-number{display:none}
.blanter-msg{color:#444;padding:20px;font-size:12.5px;text-align:center;border-top:1px solid #ddd}
textarea#chat-input{border:none;font-family:'Arial',sans-serif;width:100%;height:20px;outline:none;resize:none}
a#send-it{
    color:#555;
    margin:-5px 0 0 5px;
    font-weight:700;
    padding:8px;
    background:#eee;
    border-radius:10px
}
.first-msg{background:#f5f5f5;padding:30px;text-align:center}
.first-msg span{background:#e2e2e2;color:#333;font-size:14.2px;line-height:1.7;border-radius:10px;padding:15px 20px;display:inline-block}
.start-chat .blanter-msg{display:flex}#get-number{display:none}
a.close-chat{
    position:absolute;
    top:0px;
    right:15px;
    color:#fff;
    font-size:30px
}
@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;left:5%;font-size:80%}}
.hide{display:none;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
.show{display:block;animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}

/* responsive mobile */
@media (max-width: 768px) {
    #whatsapp-chat{
        position:fixed;
        background:#fff;
        width:70%;
        border-radius:10px;
        box-shadow:0 1px 15px rgba(32,33,36,.28);
        bottom:18%;
        left:2%;
        overflow:hidden;
        z-index:99;
        animation-name:showchat;
        animation-duration:1s;
        transform:scale(1)
    }
	a.blantershow-chat{
        background:linear-gradient(to left top,#24CC63,#24CC63);
        color:#fff;
        position:fixed;
        z-index:98;
        bottom:9%;
        left:2%;
        font-size:15px;
        padding:10px;
        border-radius:30px;
        box-shadow:0 1px 15px rgba(32,33,36,.28)
    }
    a.blantershow-chat i{
        transform:scale(2);
    }
}