body,html{margin:0;padding:0;background-color:#004ca2;font-family:Inter,Helvetica Neue,Helvetica,Arial,sans-serif}.signup-box h1{font-size:24px;font-weight:600;margin-bottom:24px;text-align:center;color:#111827}.signup-box label{display:block;font-size:14px;font-weight:500;color:#374151}.signup-box input[type=text],.signup-box input[type=email],.signup-box input[type=password]{width:100%;padding:10px 12px;margin-bottom:16px;border:1px solid #D1D5DB;border-radius:6px;font-size:14px;box-sizing:border-box}.signup-box input[type=checkbox]{margin-right:8px}.signup-box .remember-me{display:flex;align-items:center;font-size:14px;color:#374151;margin-bottom:16px}.signup-box button{width:100%;background-color:#0046ad;color:#fff;font-size:16px;font-weight:600;padding:10px;border:none;border-radius:6px;cursor:pointer}.signup-box button:hover{background-color:#003688}.signup-box .footer-text{text-align:center;font-size:14px;margin-top:16px;color:#374151}.signup-box .footer-text a{color:#0046ad;text-decoration:none;font-weight:500}.signup-box .footer-text a:hover{text-decoration:underline}.signup-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#0046ad}.signup-box{background-color:#fff;padding:40px;border-radius:12px;width:100%;max-width:400px;box-shadow:0 10px 25px #0000001a}.signup-box h1{font-size:24px;font-weight:400;margin-bottom:24px;text-align:center;color:#111827}.bold{font-weight:700}.signup-box button{width:100%;padding:10px;border:none;border-radius:6px;cursor:pointer}.signup-box button.connect{background-color:#0046ad;color:#fff}.signup-box button.connect:hover{background-color:#003688}.signup-box button.delete{background-color:#d70000;color:#fff}.signup-box button.delete:hover{background-color:#8b0000}.signup-box .button-group{display:flex;flex-direction:column;gap:10px}.logout-button{margin-top:10px}body{margin:0;padding:0;font-family:Arial,sans-serif}h1{color:#333}.container{padding:20px}.info-button{position:fixed;bottom:20px;right:20px;width:40px;height:40px;background-color:#ff6103;color:#fff;font-size:20px;font-weight:700;text-align:center;line-height:40px;border-radius:50%;box-shadow:0 4px 6px #0000001a;cursor:pointer;text-decoration:none}.info-button:hover{background-color:#cd3700}.connectform-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#0046ad}.connectform-box{background-color:#fff;padding:40px;border-radius:12px;width:100%;max-width:400px;box-shadow:0 10px 25px #0000001a}.connectform-box h1{font-size:24px;font-weight:600;margin-bottom:24px;text-align:center;color:#111827}.connectform-box label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:#374151}.connectform-box input[type=text]{width:100%;padding:10px 12px;margin-bottom:16px;border:1px solid #D1D5DB;border-radius:6px;font-size:14px;box-sizing:border-box}.connectform-box button{width:100%;background-color:#0046ad;color:#fff;font-size:16px;font-weight:600;padding:10px;border:none;border-radius:6px;cursor:pointer}.connectform-box button:hover{background-color:#003688}.alert{padding:10px;margin-bottom:16px;border-radius:6px;font-size:14px;font-weight:500}.alert-danger{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.connectlist-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#0046ad}.connectlist-box{background-color:#fff;padding:40px;border-radius:12px;width:100%;max-width:400px;box-shadow:0 10px 25px #0000001a}.connectlist-box h1{font-size:24px;font-weight:600;margin-bottom:24px;text-align:center;color:#111827}.connectlist-item{display:flex;align-items:center;margin-bottom:16px;padding:10px;background-color:#f3f4f6;border-radius:8px;cursor:pointer;transition:background-color .3s}.connectlist-item:hover{background-color:#e5e7eb}.connectlist-item .profile-pic{width:50px;height:50px;border-radius:50%;margin-right:12px}.connectlist-item span{font-size:16px;color:#374151}.dashboard-container{display:flex;height:100vh}.left-pane{width:70px;background-color:#0046ad;display:flex;flex-direction:column;align-items:center;justify-content:space-between;border-right:1px solid #ddd}.left-pane .menu-items,.left-pane .navigation{display:flex;flex-direction:column;align-items:center}.left-pane .logo{color:#fff;font-size:18px;margin:20px;width:30px;height:30px}.left-pane .icon{width:100%;text-align:center;padding:20px;color:#fff;cursor:pointer}.left-pane .icon.selected{background-color:#fff;color:#0046ad;border-right:1px solid #ddd}.conversations-pane{flex:1;background-color:#fff;border-right:1px solid #ddd}.conversations-pane h2{margin:0}.conversations-pane .heading{margin:0;padding:20px;border-bottom:1px solid #ddd;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.conversations-pane .heading .refresh{box-sizing:border-box;display:inline-block;cursor:pointer}.conversation-item{padding:10px;border-bottom:1px solid #ddd;cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;transition:background-color .3s ease}.conversation-item svg{border-radius:50%}.conversation-item:hover{background-color:#e0e0e0}.conversation-item.selected{background-color:#f0f0f0}.chat-pane{position:relative;flex:2;background-color:#fff;background-color:#f5f5f5}.chat-pane .skeleton-text{padding-top:calc(50vh - 50%);text-align:center;font-size:20px}.chat-pane h2{margin:0;padding:20px;border-bottom:1px solid #ddd;background-color:#fff}.messages{display:flex;flex-direction:column;overflow-y:auto;max-height:81vh;padding:20px 0}.message{margin-bottom:10px;padding:10px;border-radius:5px}.message.user{align-self:flex-end;margin-right:45px;background-color:#e0f7fa}.message.other{align-self:flex-start;margin-left:45px;background-color:#d9d9d9}.message-info{font-size:14px;display:flex;flex-direction:row;align-items:center;gap:5px}.profile-pic-svg{position:relative}.profile-pic-svg svg{position:absolute;border-radius:50%}.profile-pic-svg.other svg{left:-45px}.profile-pic-svg.user svg{right:-45px}.message-info.user{align-self:flex-end;margin-right:45px}.message-info.other{align-self:flex-start;margin-left:45px}.info-pane{width:350px;background-color:#f0f0f0;border-left:1px solid #ddd}.info-pane .data{background-color:#fff;display:flex;flex-direction:column;align-items:center;padding:40px 0;border-bottom:1px solid #ddd}.info-pane .profile-picture{width:100px;height:100px;border-radius:50%;margin-bottom:10px}.info-pane .status-bar{display:flex;align-items:center;flex-direction:row;gap:10px}.info-pane .status-bar .dot{height:10px;width:10px;display:inline-block;border-radius:50%;background-color:#9b9b9b}.info-pane .data .buttons{margin-top:20px;display:flex;align-items:center;flex-direction:row;gap:10px}.info-pane .buttons div{padding:10px 15px;display:flex;align-items:center;flex-direction:row;gap:10px;border:1px solid #ddd;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.info-pane .buttons div:hover{background-color:#ddd}.info-pane .buttons div p{margin:0}.info-pane .cards{padding:20px;display:flex;flex-direction:column;gap:20px}.info-pane .cards .card{padding:10px;border-radius:5px;border:1px solid #ddd;display:flex;flex-direction:column;background-color:#fff}.info-pane .cards .card h3{margin:0;padding-bottom:10px}.info-pane .cards .card .row{padding:5px 0;display:flex;flex-direction:row;justify-content:space-between}.info-pane .cards .card .row .val{font-weight:700}.info-pane .cards .card .button{color:#0046ad;padding-top:10px;cursor:pointer}.send-message{display:flex;align-items:center;box-sizing:border-box;justify-content:space-between;position:absolute;bottom:0;width:100%;padding:10px;background-color:#f9f9f9;border-top:1px solid #ddd}.send-message input{width:80%;padding:10px;border:1px solid #ccc;border-radius:5px}.send-message button{width:20%;padding:10px;background-color:#0046ad;color:#fff;border:none;border-radius:5px;cursor:pointer;margin-left:10px}
