WhatsApp-Live-Chat-CSS-By-imamuddin.css

/* WhatsApp Live Chat CSS By imamuddinwp.blogspot.com */
/* Pase below CSS codes before/above ]]></b:skin> in blogger theme */
.box-live a,.imam-live,.info-chat{color:#fff}.box-msg span,.info-chat span,.info_box,.show{display:block}#whatsapp-chat,.imam-live{background:#fff;position:fixed;z-index:100;right:20px}.imam-live,.info_box{background:linear-gradient(45deg,#029abd 0,#05c537 100%)}.box-live,.goomwhats,.info-avatar,.info_box{position:relative}#whatsapp-chat{width:350px;border-radius:4px;box-shadow:0 8px 25px -5px rgba(45,62,79,.15);bottom:17%;overflow:hidden}#btn-chat,#tooltip i,.imam-live svg{vertical-align:middle}.imam-live{bottom:10%;line-height:30px;font-size:15px;padding:0;border-radius:50px;box-shadow:0 1px 5px rgba(154,154,154,.2)}.imam-live .svg{margin:0;position:absolute;top:0;padding:6.5px 15px;border-radius:0 50px 50px 0;right:-2px;background-color:#fff;color:#31c73a;width:25%;height:100%;line-height:18px;overflow:hidden;text-align:center;z-index:10}.box-live{padding:3px 20px}.box-live span{margin-right:40px;font-size:13px}.info-chat{padding-top:3px}.info-chat span.chat-label{font-size:15px;font-weight:700}.info-chat span.chat-text{font-size:13px;line-height:2.3;color:#d7ffee}.info-avatar{width:48px;height:48px;float:left;margin:5px 15px 0 0}.info-avatar img{border-radius:100%;width:100%;height:auto}.info_box{padding:15px;overflow:hidden;z-index:1;box-shadow:0 1px 5px rgba(0,0,0,.35)}#tooltip,#tooltip:after,.box-msg:before,.goophone{position:absolute}.goomwhats{color:#444;padding:5px 15px;background-color:#fff;font-size:14px;display:flow-root}.goomwhats a{color:#3bc743}.boxmsg{margin:8px 0 0;float:left;width:74%;display:block}.goophone{right:45px;top:10px;font-size:13px;z-index:10}.box-msg,.first-msg,.formtamv label{position:relative}.goophone a{color:#e6f9d2;margin-left:15px}.goophone a svg,a.close-chat svg{width:16px;height:auto;fill:#e6f9d2}.jamwa{display:block;float:right;font-size:11px;color:#717171}#tooltip i,.box-msg,.formtamv label>i,.jamwa div{display:inline-block}#btn-chat{float:right;margin-top:15px}.first-msg{background-color:#e6ddd4;padding:20px 20px 20px 10px}#tooltip,.box-msg{padding:10px 20px}.first-msg::before{display:block;position:absolute;content:"";left:0;top:0;height:100%;width:100%;z-index:0;opacity:.08;background-image:url(https://goomsite.github.io/img/wa-min.webp)}#tooltip:after,.box-msg:before{content:''}.box-msg{background:#e4fec8;box-shadow:0 1px 5px rgba(0,0,0,.13);color:#333;font-size:14px;line-height:1.7;border-radius:0 7.5px 7.5px;margin-left:30px;z-index:1}.box-msg:before{border-width:17px;border-style:none solid solid none;border-color:#e4fec8 #e4fec8 transparent transparent;top:0;left:-16px}.box-msg span.chat-nama{font-size:13px;line-height:18px;color:rgba(0,0,0,.4)}.box-msg span.chat-cript{margin-bottom:5px}#tooltip{text-align:center;color:#fff;background:#333;z-index:100;border-radius:4px;font-size:90%;box-shadow:0 1px 10px rgba(0,0,0,.6)}#tooltip i{margin:5px}#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333;left:50%;bottom:-10px;margin-left:-10px}#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #333;top:-20px;bottom:auto}#tooltip.left:after{left:10px;margin:0}#tooltip.right:after{right:10px;left:auto;margin:0}.formtamv *{outline:0;text-decoration:none}.formtamv .focus{box-shadow:inset 0 0 0 1px #36c83f}.formtamv label{display:block;width:100%;margin:0;padding:0}.formtamv label>input,.formtamv label>select,.formtamv label>textarea{position:relative;z-index:1;border:none;background:#f9f9f9;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02),inset 1px 1px 5px rgba(0,0,0,.05);width:100%;border-radius:50px;padding:10px 20px 0}.formtamv label>i{position:absolute;z-index:0;vertical-align:top;width:40px;text-align:center;font-size:20px;height:auto;background:0 0;box-shadow:none;top:3px;left:0;color:rgba(0,0,0,.2)}.formtamv label small{position:relative;display:block;margin-top:10px;z-index:3}.formtamv label small>a.tooltip{margin-left:10px;font-size:20px;vertical-align:middle;display:inline-block;color:rgba(0,0,0,.4)}.formtamv label small>a.tooltip:hover{color:rgba(0,0,0,.6)}.formtamv label small a{font-weight:700}.formtamv select::-ms-expand{display:none}.formtamv select{-moz-appearance:none;-webkit-appearance:none;appearance:none}.formtamv select option{font-size:18px;background:#edf8f5;color:rgba(0,0,0,.7);text-shadow:none}.formtamv .nomor_whatsapp[type=number]::-webkit-inner-spin-button,.formtamv .nomor_whatsapp[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.nomor_whatsapp[type=number]{-moz-appearance:textfield}.formtamv label>:focus{background:0 0}.formtamv label textarea{min-height:20px;resize:none;margin-bottom:0}.formtamv label .validasi{position:absolute;z-index:2;right:-30px;background:#36c83f;color:#fff;padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.1);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important}.formtamv label .validasi.show{visibility:visible;opacity:1;bottom:100%}.formtamv label .validasi:after{position:absolute;top:100%;right:10px;content:"";border:8px solid;border-color:#36c83f transparent transparent}.nime,.nime:after,.nime:before{position:absolute;border-radius:100%}a.close-chat{position:absolute;top:10px;right:13px;color:#c3ffc7;font-size:18px;z-index:10}.nime{display:block;width:10px;height:10px;background-color:#05d436;right:-2px;bottom:8px}.nime:after,.nime:before{content:"";width:24px;height:24px;opacity:0;top:-8px;left:-8px;background:#05d436}.nime:before{-webkit-animation:2s ease-out infinite nime;animation:2s ease-out infinite nime}.nime:after{z-index:1;-webkit-animation:2s ease-out .4s infinite nime;animation:2s ease-out .4s infinite nime}@-webkit-keyframes nime{0%{opacity:0;-webkit-transform:scale(.80);transform:scale(.10)}5%{opacity:1}100%{opacity:0}}@keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}5%{opacity:1}100%{opacity:0}}@keyframes showhide{from{transform:scale(.5);opacity:0}}@keyframes showchat{from{transform:scale(0);opacity:0}}.hide,.show{animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}.hide{display:none}