.chat { position: relative; margin-top: 60px; background-color: white; color: black; overflow: hidden; border: 1px solid rgba(162, 112, 0, 0.14); box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1); line-height: 1.5; font-family: Roboto, Arial, sans-serif; display: block; } .chartitle { text-align: center; font-size: 20px; text-transform: uppercase; font-weight: bold; padding: 15px 10px; background-color: rgba(0, 0, 0, 0.01); box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.07); } .charcontent { padding: 15px 30px; height: 500px; background-image: url(/landings/271041/1646145967/images/vbr14.jpg); background-size: 100%; overflow-y: auto; overflow-x: auto; position: relative; z-index: 1; } .inputchat1 { color: #000; font-size: 18px; padding: 10px 15px; margin: 7px 0; border: 1px solid #d3d9de; border-radius: 2px; width: 49%; resize: none; } textarea.inputchat1 { height: 80px; max-width: inherit; width: 100%; } .dfdfw1 { display: flex; justify-content: space-between; align-items: center; } .dfdfw2 { display: flex; justify-content: flex-end; } .buttonchat { padding: 9px 25px 9px; margin: 0; margin-top: 10px; font-size: 15px; display: inline-block; cursor: pointer; white-space: nowrap; outline: none; vertical-align: top; line-height: 15px; text-align: center; text-decoration: none; background: none; background-color: #5181b8; color: #fff; border: 0; border-radius: 4px; box-sizing: border-box; } .lineonemessagechat { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .onemessagechat { display: flex; flex-direction: column; font-size: 15px; margin-bottom: 15px; } .modal-box { width: 500px; top: 25%; left: 50%; transform: translate(-50%, -50%); background: #f1f1f1; position: fixed; max-height: 99%; overflow-y: auto; display: none; opacity: 0; z-index: 999999; border-radius: 5px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); transition: all .35s } .modal-box.large { width: 95%; max-width: 850px; } .modal-box.active { top: 50%; opacity: 1 } .modal-close { width: 40px; height: 40px; top: 0; right: 0; background: url(/landings/271041/1646145967/images/sprite.png) -32px -100px no-repeat; position: absolute; display: block; cursor: pointer } #overlay, #overlay2 { width: 100%; height: 100%; top: 0; left: 0; background: rgba(77, 77, 77, 0.6); position: fixed; display: none; opacity: 0; z-index: 999998; transition: all .35s } #overlay.active, #overlay2.active { opacity: 1 } .dfgherdfg { margin-left: 20px; flex-grow: 1; text-align: left; color: white!important; } .jhefker { font-size: 13px; } .chatvbrimg1 { width: 40px; margin: 0 5px; opacity: 0.9; cursor: pointer; } .chatvbrimg1:hover { opacity: 1; } .chatvbrimg2 { width: 70px; margin-right: 10px; opacity: 0.9; cursor: pointer; } .chatvbrimg2:hover { opacity: 1; } .chatvbrimg3 { width: 40px; margin: 0 10px; opacity: 0.8; cursor: pointer; } .chatvbrimg3:hover { opacity: 1; } .addmsgchatvbr { display: flex; align-items: center; justify-content: center; padding: 15px 10px; padding-top: 5px; position: relative; z-index: 2; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); } .jhefjerfk { flex-grow: 1; } .inptvbr { border: none; padding: 18px 15px; width: 100%; padding-left: 13px; font-size: 18px; -webkit-appearance: none; outline: none; } .inptvbr:hover { border: none; } .inptvbr:active { border: none; } .onemessagevbr { display: flex; align-items: flex-start; margin: 15px 0; } .onemessagevbr.sender { justify-content: flex-end; } .vbronline { width: 70px; margin-right: 10px; opacity: 0.9; cursor: pointer; } .chatvbrname { color: #7c6bde; font-weight: bold; font-size: 18px; } .timechatvbr { font-size: 13px; font-weight: 300; line-height: 1; text-align: right; opacity: 0.5; } .messagetxt { margin-left: 10px; margin-top: 2px; background-color: rgba(220, 220, 220, 1); padding: 10px 20px; border-radius: 0 15px 15px 15px; max-width: 370px; font-size: 16px; } .onemessagevbr.sender .messagetxt { background-color: rgb(200, 232, 255); border-radius: 15px 0 15px 15px; } .jegkergd { text-align: left; } .djhg { text-align: left; flex-grow: 1; } .avavbr { width: 50px; border-radius: 20px; } .chatttlbvr { text-align: center; font-size: 20px; padding: 10px 10px; background: url(/landings/271041/1646145967/images/header-background.png); background-size: cover; color: white; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.4); } .buttonscrollend { position: absolute; right: 20px; bottom: 120px; height: 80px; width: 80px; z-index: 888; transition: 0.3s all; opacity: 0; visibility: hidden; cursor: pointer; } .buttonscrollend.show { opacity: 0.8; bottom: 150px; visibility: visible; } .buttonscrollend.show:hover { opacity: 1; transform: scale(1.1); } .vbrimgmessage { max-width: 100%; max-height: 300px; margin: 7px 0; cursor: pointer; } @media screen and (max-width:800px) { .buttonscrollend { position: absolute; right: 10px; bottom: 100px; height: 50px; width: 50px; } .buttonscrollend.show { bottom: 120px; } .jhefker { font-size: 10px; } .chatttlbvr { padding: 8px 5px; font-size: 14px; } .chatvbrimg1 { width: 30px; } .dfgherdfg { margin-left: 5px; color: white!important; } .inptvbr { font-size: 15px; padding: 15px 10px 15px 5px; } .modal-box { max-width: 90%; font-size: 13px; } .hejbrfhgrve { padding-top: 25px !important; padding-bottom: 25px !important; padding-left: 15px !important; padding-right: 15px !important; } .onemessagevbr { margin: 10px 0; } .avavbr { width: 40px; min-width: 40px; border-radius: 16px; } .messagetxt { padding: 8px 10px; font-size: 14px; } .chatvbrname { font-size: 15px; } .timechatvbr { font-size: 11px; } .inptvbr { font-size: 15px; padding: 15px 10px 15px 5px; } .chatvbrimg3 { width: 30px; margin: 0 5px; } .vbrmbnn { display: none; } .chatvbrimg2 { margin: 5px; width: 50px; } .charcontent { padding: 10px 10px; height: 250px; } }