:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;background:linear-gradient(135deg,#1e1e2f,#121212);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100%;margin:0;overflow:hidden}.shiny-text{color:#ffffffa4;background:linear-gradient(120deg,#fff0 40%,#fffc,#fff0 60%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;display:inline-block;animation:shine 5s linear infinite;text-align:center;font-family:monospace}@keyframes shine{0%{background-position:100%}to{background-position:-100%}}.shiny-text.disabled{animation:none}.left-pane{width:45%;height:100vh;background:#1f2937;display:flex;flex-direction:column;align-content:center;justify-content:space-between;align-items:center}.logo-container{box-shadow:0 8px 25px #00000080;border-radius:8px;margin:10px;padding:0 4%;width:85%;height:8%;display:flex;align-items:center}.app-logo{width:13%;height:auto}.my-text{margin-left:5%;font-size:.7rem}.left-pane .scrollable-box{overflow-y:auto;padding:10px 16px;width:90%;height:70%;color:#fff}.left-pane .box-item{font-size:15px}.avatar{width:40px;height:40px;border-radius:50%;box-shadow:0 0 5px #0003;margin-right:30px}.user-item{display:flex;align-items:center;cursor:pointer;border-radius:10px;padding-left:20px;margin-top:3%;height:50px;transition:background .15s,box-shadow .15s}.user-item:hover{background:#ffffff0f}.user-item.active{background:#ffffff1f;box-shadow:0 2px 8px #0000001a inset}.user-item.active:hover{background:#ffffff1f}.search-user-field{width:95%;height:5%}.search-user-field input{width:-webkit-fill-available;height:90%;border-radius:50px;padding-left:20px;padding-right:20px}.user-panel{margin-bottom:17%;box-shadow:0 8px 25px #00000080}@media (max-width: 480px){.logo-container{height:5%}.my-text{font-size:.1em}.search-user-field input{width:-webkit-fill-available;height:45%;border-radius:25px;padding-left:10px;padding-right:10px}.left-pane .box-item{font-size:10px}.user-item{padding-left:2px;height:25px}.avatar{width:20px;height:20px;margin-right:10px}.user-panel{margin-bottom:26%}}.text-type{display:inline-block;white-space:pre-wrap;font-family:monospace}.text-type__content{display:inline}.text-type__cursor{display:inline-block;margin-left:.1rem;opacity:1;font-weight:700;color:#fff;transition:opacity .1s ease-in-out}.text-type__cursor--hidden{opacity:0}.message_container{width:100%;display:flex;flex-direction:column;height:100vh}.msg_display{overflow-y:auto;height:80%;display:flex;flex-direction:column;gap:4px;padding:20px}.message_input_pane{height:13%;display:flex;align-content:center;justify-content:center;align-items:center;border-radius:0 0 16px 16px;margin-bottom:6%}.message_input_pane div{width:100%;height:80%;display:flex;justify-content:center;align-items:center}.message_input_field{height:55%;width:80%;border-radius:50px;padding-left:40px;padding-right:40px}.message{display:inline-block;max-width:70%;margin:8px 0;padding:10px 16px;border-radius:8px 8px 8px 0;background:#075e54;color:#fff;font-size:1.1em;position:relative;box-shadow:0 1px 2px #00000014;word-break:break-word}.message.right{margin-left:auto;background:#075e54;border-radius:8px 8px 0}.message.left{margin-right:auto;background:#262d31;border-radius:8px 8px 8px 0}.no-messages{display:flex;justify-content:center;color:#888;text-align:center;margin-top:20px}.read-receipt-tick{margin-left:5px;font-size:.85rem;color:#4fc3f7;vertical-align:middle}@media (max-width: 480px){.message{padding:4px 8px;font-size:.7em}.message_input_field{height:35%;padding:0 10px;font-size:.7em}}.main_container{display:flex;flex-direction:row;height:100vh}.login-page{display:flex;flex-direction:column;width:100vw;height:100vh;justify-content:space-between;background:#111827;overflow-x:hidden}.row-container{display:flex;justify-content:center;align-items:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#fff;flex-direction:row;height:80vh;padding-top:7%}.left-half,.right-half{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.left-half{padding-left:2%}.right-half{padding-right:3%}.left-half img{width:50%;height:auto;max-width:250px}.shiny-text-custom{text-align:center;font-size:1.5em;max-width:400px}.login-form-container{background:#1f2937;padding:2rem;border-radius:16px;box-shadow:0 8px 25px #00000080;width:350px;text-align:center}form{margin-bottom:7%}form input{width:-webkit-fill-available;padding:12px;margin:10px 0;border:none;border-radius:8px;outline:none;font-size:1rem;background:#2d3748;color:#fff;transition:all .3s ease}form input.login-username{margin-top:0}form input:focus{background:#374151;border:1px solid #61dafb;box-shadow:0 0 8px #61dafb99}.input-field-containers div{color:#dc143c;display:flex;flex-direction:column;align-items:flex-start}.login-form-container-button{width:-webkit-fill-available;padding:12px;border:none;border-radius:8px;font-size:1rem;cursor:pointer;color:#fff;transition:all .3s ease}.primaryButtonColor{margin-top:5%;background:linear-gradient(135deg,#61dafb,#1e90ff)}.primaryButtonColor:hover{background:linear-gradient(135deg,#4fb8e9,#187bcd);transform:scale(1.05);box-shadow:0 6px 18px #2d2d2d66}.secondaryButtonColor{margin-top:7%;background:linear-gradient(135deg,#339ab4,#1c222a)}.secondaryButtonColor:hover{transform:scale(1.05);box-shadow:0 4px 12px #0000004d}footer{color:#9ca3af;font-size:.7rem;height:20vh;align-items:start;display:flex;justify-content:center;text-align:center;padding-top:90px;margin-bottom:2vh}footer a{color:#9ca3af;text-decoration:none}@media (max-width: 768px){.login-page{flex-direction:column;justify-content:flex-start;padding:20px 0}.row-container{flex-direction:column;height:auto;gap:2rem}.left-half,.right-half{width:90%;margin:0 auto;align-items:center;justify-content:center;padding:0}.left-half img{width:60%;max-width:220px;margin-bottom:10px}.shiny-text-custom{font-size:.95rem;text-align:center;padding:0 15px}.login-form-container{width:85%;max-width:350px;padding:1.5rem;margin-top:10px}form input{padding:10px}.primaryButtonColor,.secondaryButtonColor{font-size:.95rem;padding:10px}}@media (max-width: 480px){.row-container{gap:0;padding-top:2%}.left-half img{width:30%;max-width:180px}.shiny-text-custom{font-size:.8rem}.login-form-container{width:70%;padding:1rem;margin-top:8%}.login-form-container-button{padding:5px;font-size:.7em}form input{font-size:.7rem;padding:8px;width:-webkit-fill-available}.primaryButtonColor,.secondaryButtonColor{font-size:.9rem;padding:10px}footer{font-size:.65rem;padding-top:20px}}