@import url(https://fonts.googleapis.com/css2?family=Raleway&display=swap);.contain{display:flex;justify-content:right;align-items:right;margin-right:10px}.chat-box{width:350px;height:506px;background-image:url(../images/bgchat.jpg);overflow:hidden;border:4px solid purple;border-radius:10px;position:fixed;z-index:10000!important;display:none}.btn-opt{color:#fffdfd!important;background:#931797!important;border-color:purple;position:flex!important;border-radius:10px!important;padding:3px 8px!important;font-size:0.9em!important;word-break:break-all!important;margin-top:5px!important;margin-bottom:5px!important;box-shadow:2px 3px 4px 0 rgb(174 174 174/25%)!important;animation:floatup .9s forwards}@keyframes floatup{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}.client{display:flex;justify-content:center;align-items:right;height:50px;background-color:#931797}.client img{width:50px;height:50px;border-radius:50%}.client-info{color:#fff;padding:7px}.client-info p{color:green;font-weight:700;font-size:.9em}.chats{width:100%;padding:0 15px;color:#fff;position:relative;font-size:.8em}.client-chat{width:90%;word-wrap:break-word;background-color:#9a04fd;padding:7px 10px;border-radius:10px 10px 10px 0;margin:10px 0;animation:floatup .9s forwards}@keyframes floatup{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}.my-chat{width:60%;word-wrap:break-word;background-color:#77b3d4c7;padding:7px 10px;border-radius:10px 10px 0 10px;margin:5px 0 5px auto}.chat-input{display:flex;align-items:right;width:100%;height:70px;background-color:#fff;padding:15px;overflow:hidden;position:absolute;bottom:0}.chat-input input{width:calc(100% - 40px);height:100%;background-color:#fdfdfd21;border-radius:50px;color:#000;font-size:1em;padding:0 15px}.send-btn{width:40px;height:40px;background-color:transparent;overflow:hidden;position:relative;margin-left:5px;cursor:pointer;transition:0.4s ease-in-out}.send-btn:active{transform:scale(.85)}.send-btn img{width:100%;height:100%}.chat-btn{width:100px;height:100px;border-radius:50%;cursor:pointer;overflow:hidden;position:fixed;bottom:20px}.chat-btn img{width:100%;height:100%;border-radius:50%;position:absolute;top:0;left:0;padding:5px;transition:0.4s ease-in-out}.chat-btn:hover img{transform:rotate(30deg)}.typing-field{display:flex;height:60px;width:100%;align-items:center;background:#fff;border-radius:0 0 5px 5px;align-items:flex-start}.input-data{height:40px;width:385px;position:absolute;padding-left:15px}.input-data input{height:40px;width:100%;outline:none;border:1px solid;padding:0 137px 0 11px;border-radius:3px;font-size:.9em;background:#fff;transition:all 0.3s ease}.input-data input:focus{border-color:rgba(0,123,255,.8)}.input-data input::placeholder{color:#999;transition:all 0.3s ease}.input-data input:focus::placeholder{color:#bfbfbf}.input-data button{position:absolute;right:58px;top:50%;height:30px;width:60px;color:#fff;font-size:.9em;cursor:pointer;outline:none;opacity:0;pointer-events:none;border-radius:3px;background:#007bff;border:1px solid #007bff;transform:translateY(-50%);transition:all 0.3s ease}.input-data input:valid~button{opacity:1;pointer-events:auto}.input-data button:hover{background:#006fef}