.my-component.compact{height:350px;scale:.6}.my-component{.box{box-sizing:border-box}.box,.panel{margin:0;padding:0;height:100%}.panel{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Roboto,sans-serif}.page{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.marvel-device .screen{height:100%;text-align:left}.screen-container{height:100%}.status-bar{border-top-left-radius:36px;border-top-right-radius:36px;height:26px;color:#fff;font-size:14px;padding:0 14px}.status-bar.whatsapp{background:#008069;color:#fff}.status-bar.sms{background:#f6f6f6;color:#242423}.status-bar:after{content:"";display:table;clear:both}.status-bar div{position:relative;top:50%;transform:translateY(-50%);margin:0 0 0 8px;font-weight:600}.chat{height:calc(100% - 69px)}.chat-container{height:100%}.user-bar{height:55px;color:#fff;padding:0 8px;font-size:24px;position:relative;z-index:1}.user-bar.whatsapp{background:#008069;color:#fff}.user-bar.sms{background:#f5f5f5;color:#242423}.user-bar:after{content:"";display:table;clear:both}.user-bar div{float:left;transform:translateY(-50%);position:relative;top:50%}.user-bar .actions{float:right;margin:0 0 0 20px}.user-bar .actions.more{margin:0 12px 0 32px}.user-bar .actions.attachment{margin:0 0 0 30px}.user-bar .actions.attachment i{display:block;transform:rotate(-45deg)}.user-bar .avatar{margin:0 0 0 5px;width:36px;height:36px}.user-bar .avatar.sms{position:absolute;display:flex;justify-content:center;margin:4px 0 0 -8px;width:100%;height:36px}.user-bar .avatar img{border-radius:50%;box-shadow:0 1px 0 hsla(0,0%,100%,.1);display:block;width:100%}.user-bar .name{font-size:17px;font-weight:600;text-overflow:ellipsis;letter-spacing:.3px;margin:0 0 0 8px;overflow:hidden;white-space:nowrap;width:110px}.user-bar .status{display:block;font-size:13px;font-weight:400;letter-spacing:0}.conversation{height:calc(100% - 12px);position:relative;z-index:0;border-bottom-left-radius:28px;border-bottom-right-radius:28px}.conversation.whatsapp{background:#efe7dd url(../img/whatsapp-bg.f9cebf24.jpg) repeat}.conversation.sms{background:#fff}.conversation ::-webkit-scrollbar{-webkit-transition:all .5s;transition:all .5s;width:5px;height:1px;z-index:10}.conversation ::-webkit-scrollbar-track{background:transparent}.conversation ::-webkit-scrollbar-thumb{background:#b3ada7}.conversation .conversation-container{height:calc(100% - 50px);overflow-x:hidden;padding:0 16px;margin-bottom:5px}.conversation .conversation-container.whatsapp{box-shadow:inset 0 0 0 0 #000}.conversation .conversation-container.sms{border-bottom-style:solid;border-bottom-color:hsla(0,0%,100%,.1)}.conversation .conversation-container:after{content:"";display:table;clear:both}.message{color:#000;clear:both;line-height:18px;font-size:15px;padding:8px;position:relative;margin:8px 0;max-width:85%;word-wrap:break-word;z-index:-1}.message.full{width:100%}.message:after{position:absolute;content:"";width:0;height:0;border-style:solid}.message.clean{display:flex;padding:0;max-width:85%}.message.clean:after{border-color:transparent transparent transparent transparent;top:0}.message-link{color:#000;clear:both;line-height:18px;font-size:15px;padding:8px;position:relative;margin:8px 0;max-width:85%;word-wrap:break-word;z-index:1}.message-link.full{width:100%}.message-link:after{position:absolute;content:"";width:0;height:0;border-style:none}.message-link.clean{display:flex;padding:0;max-width:85%}.message-link.clean:after{border-color:transparent transparent transparent transparent;top:0}.list-checkbox{order:2;margin-left:10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #999;border-radius:50%;width:20px;height:20px;cursor:pointer}.list-checkbox:checked{background-color:#007bff;border-color:#007bff}.message.list{width:100%;min-width:100%;margin:-4px 2px 0 2px!important;background:#f7f7f7;border-radius:5px 5px 5px 5px;float:left}.message.list .metadata{padding:0 0 0 16px}.message.list:after{border-width:0 12px 10px 0;border-color:transparent transparent transparent transparent;top:0}.message-link.test,.message.test{margin:-4px 2px 0 2px!important;background:#f7f7f7;border-radius:5px 5px 5px 5px;float:left;text-align:center;color:#00a0df;cursor:pointer}.message.test .metadata{padding:0 0 0 16px}.message.test:after{border-width:0 12px 10px 0;border-color:transparent transparent transparent transparent;top:0}.metadata{display:inline-block;float:right;padding:0 0 0 7px;position:relative;bottom:-4px}.metadata .time{color:rgba(0,0,0,.45);font-size:11px;display:inline-block}.metadata .tick{display:inline-block;margin-left:2px;position:relative;top:4px;height:16px;width:16px}.metadata .tick svg{position:absolute;transition:.5s ease-in-out}.metadata .tick svg:first-child{backface-visibility:hidden;transform:perspective(800px) rotateY(180deg)}.metadata .tick svg:last-child{backface-visibility:hidden;transform:perspective(800px) rotateY(0deg)}.metadata .tick-animation svg:first-child{transform:perspective(800px) rotateY(0)}.metadata .tick-animation svg:last-child{transform:perspective(800px) rotateY(-179.9deg)}.message:first-child{margin:16px 0 8px}.message.received{background:#fff;border-radius:0 12px 12px 12px;float:left}.message.received.whatsapp{background:#fff}.message.received.sms{background:#e9e9eb}.message.received .metadata{padding:0 0 0 16px}.message.received:after{border-width:0 12px 10px 0;top:0;left:-10px}.message.received.whatsapp:after,.message.received:after{border-color:transparent #fff transparent transparent}.message.received.sms:after{border-color:transparent #e9e9eb transparent transparent}.message.sent{border-radius:12px 0 12px 12px;float:right}.message.sent.whatsapp{background:#e7ffdb}.message.sent.sms{background:#34c759;color:#fff}.message.sent:after{border-width:0 0 10px 12px;top:0;right:-10px}.message.sent.whatsapp:after,.message.sent:after{border-color:transparent transparent transparent #e1ffc7}.message.sent.sms:after{border-color:transparent transparent transparent #34c759}.conversation-compose{display:flex;flex-direction:row;align-items:flex-end;overflow:hidden;height:38px;width:100%;z-index:2}.conversation-compose div,.conversation-compose input{background:#fff;height:100%}.conversation-compose .emoji{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:26px 0 0 26px;flex:0 0 auto;margin-left:8px;width:48px}.conversation-compose .emoji.sms{border-style:solid;border-color:rgba(0,0,0,.1);border-width:1px;border-right-style:none}.conversation-compose .input-msg{border:0;flex:1 1 auto;font-size:16px;margin:0;outline:none;min-width:50px}.conversation-compose .input-msg.sms{border-style:solid;border-color:rgba(0,0,0,.1);border-width:1px;border-left-style:none;border-right-style:none}.conversation-compose .photo{flex:0 0 auto;border-radius:0 26px 26px 0;text-align:center;position:relative;width:48px}.conversation-compose .photo.sms{border-style:solid;border-color:rgba(0,0,0,.1);border-width:1px;border-left-style:none}.conversation-compose .photo i{display:block;color:#7d8488;font-size:24px;transform:translate(-50%,-50%);position:relative;top:50%;left:50%}.conversation-compose .send{background:transparent;border:0;cursor:pointer;flex:0 0 auto;margin-left:8px;margin-right:8px;padding:0;position:relative;outline:none}.conversation-compose .send .circle{background:#008a7c;border-radius:50%;color:#fff;position:relative;width:38px;height:38px;display:flex;align-items:center;justify-content:center}.conversation-compose.whatsapp .send .circle{background:#008a7c}.conversation-compose.sms .send .circle{background:#34c759}.conversation-compose .send .circle i{font-size:24px;margin-left:5px}.marvel-device{display:inline-block;position:relative;box-sizing:content-box!important}.marvel-device .screen{width:100%;position:relative}.marvel-device .bottom-bar,.marvel-device .top-bar{height:3px;background:#000;width:100%;display:block}.marvel-device .middle-bar{width:3px;height:4px;top:0;left:90px;background:#000;position:absolute}.marvel-device.iphone14{width:293px;height:607px}.marvel-device.iphone14,.marvel-device.iphone14.compact{box-shadow:inset 0 0 0 2px rgba(50,50,50,.4);padding:13px 13px 11px 13px;border-radius:36px}.marvel-device.iphone14.compact{width:400px;height:540px}.marvel-device.iphone14:before{border-radius:600px/50px;background:inherit;content:"";top:0;position:absolute;height:103.1%;width:calc(100% - 26px);top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.marvel-device.iphone14 .top-bar{width:calc(100% - 8px);height:calc(100% - 6px);position:absolute;top:3px;left:4px;border-radius:36px}.marvel-device.iphone14 .top-bar:before{border-radius:600px/50px;content:"";top:0;position:absolute;height:103%;width:calc(100% - 26px);top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.marvel-device.iphone14 .camera{background:#000;width:78px;height:22px;position:absolute;top:18px;left:40%;z-index:3;margin-left:-6px;border-radius:16px}.marvel-device.iphone14 .camera:before{background:hsla(0,0%,100%,.07);width:12px;height:12px;content:"";display:block;position:absolute;top:4px;left:60px;z-index:3;border-radius:100%}.marvel-device.nexus5{padding:35px 12px 30px 12px;width:320px;height:568px;border-radius:20px}.marvel-device.nexus5:before{border-radius:600px/50px;background:inherit;content:"";top:0;position:absolute;height:103.1%;width:calc(100% - 26px);top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .top-bar{width:calc(100% - 8px);height:calc(100% - 6px);position:absolute;top:3px;left:4px;border-radius:20px}.marvel-device.nexus5 .top-bar:before{border-radius:600px/50px;background:inherit;content:"";top:0;position:absolute;height:103%;width:calc(100% - 26px);top:50%;left:50%;transform:translateX(-50%) translateY(-50%)}.marvel-device.nexus5 .bottom-bar{display:none}.marvel-device.nexus5 .sleep{width:3px;position:absolute;left:-3px;top:110px;height:100px;background:inherit;border-radius:2px 0 0 2px}.marvel-device.nexus5 .volume{width:3px;position:absolute;right:-3px;top:70px;height:45px;background:inherit;border-radius:0 2px 2px 0}.marvel-device.nexus5 .camera{background:#3c3d3d;width:10px;height:10px;position:absolute;top:18px;left:50%;z-index:3;margin-left:-5px;border-radius:100%}.marvel-device.nexus5 .camera:before{background:#3c3d3d;width:6px;height:6px;content:"";display:block;position:absolute;top:2px;left:-100px;z-index:3;border-radius:100%}.marvel-device.nexus5.landscape{padding:15px 50px 15px 50px;height:320px;width:568px}.marvel-device.nexus5.landscape:before{width:103.1%;height:calc(100% - 26px);border-radius:50px/600px}.marvel-device.nexus5.landscape .top-bar{left:3px;top:4px;height:calc(100% - 8px);width:calc(100% - 6px)}.marvel-device.nexus5.landscape .top-bar:before{width:103%;height:calc(100% - 26px);border-radius:50px/600px}.marvel-device.nexus5.landscape .sleep{height:3px;width:100px;left:calc(100% - 210px);top:-3px;border-radius:2px 2px 0 0}.marvel-device.nexus5.landscape .volume{height:3px;width:45px;right:70px;top:100%;border-radius:0 0 2px 2px}.marvel-device.nexus5.landscape .camera{top:50%;left:calc(100% - 18px);margin-left:0;margin-top:-5px}.marvel-device.nexus5.landscape .camera:before{top:-100px;left:2px}}