body{background-color:#add8e6}.container{max-width:800px;margin:auto}.font3{font-size:24px;font-weight:700}.equipment-item,.apparel-item{border:1px solid #ddd;padding:10px;margin:10px 0}.font1{font-size:16px}.orange-text{color:orange}button.font1{background-color:#4caf50;color:#fff;border:none;padding:10px 20px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer}button.font1:hover{background-color:#45a049}.equipment-image,.apparel-image{width:200px;height:200px;object-fit:cover;border:1px solid #ddd;border-radius:8px}body{font-family:Arial,sans-serif;background-color:#f0f4f8;color:#333;margin:0;padding:0;text-align:center}form{display:flex;flex-direction:column;align-items:center;background-color:#fff;padding:20px;margin:20px auto;width:90%;max-width:400px;border-radius:10px;box-shadow:0 4px 8px #0000001a}form input[type=text],form input[type=number],form textarea,form select,form input[type=file]{width:100%;padding:12px;margin:10px 0;font-size:16px;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;background-color:#f9f9f9}form input:focus,form textarea:focus,form select:focus{border-color:#4caf50;outline:none;box-shadow:0 0 5px #4caf5080}form textarea{resize:vertical;min-height:100px}form button{background-color:#4caf50;color:#fff;padding:12px;margin-top:15px;font-size:16px;font-weight:700;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}form button:hover{background-color:#45a049}.logout-button{margin-top:20px;padding:10px 20px;font-size:14px;color:#fff;background-color:#e57373;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.logout-button:hover{background-color:#d32f2f}form h2{font-size:24px;margin-bottom:20px;color:#333}.image-preview{margin-top:15px;text-align:center}.image-preview img{max-width:100%;max-height:300px;border-radius:10px;box-shadow:0 2px 4px #0000001a}@media (max-width: 600px){form{width:90%;padding:15px}form button,.logout-button{font-size:14px;padding:10px}}.login-form{max-width:400px;margin:50px auto;padding:20px;border:1px solid #ddd;border-radius:5px;box-shadow:0 4px 8px #0000001a;background-color:#f9f9f9}.login-form h2{text-align:center;margin-bottom:20px;color:#333;font-family:Arial,sans-serif}.login-form input{display:block;width:100%;margin-bottom:15px;padding:10px;border:1px solid #ccc;border-radius:4px;font-size:16px}.login-form button{width:100%;padding:10px;font-size:16px;color:#fff;background-color:#007bff;border:none;border-radius:4px;cursor:pointer;transition:background-color .3s}.login-form button:hover{background-color:#0056b3}.login-form .error-message{color:red;font-size:14px;margin-top:10px;text-align:center}.messages-container{font-family:Arial,sans-serif;padding:20px;display:flex;flex-direction:column;gap:20px;height:100vh;max-width:900px;margin:0 auto}.chat-layout{display:flex;gap:20px;height:100%;border:1px solid #ddd;background:#f8f9fa;border-radius:8px;overflow:hidden}.conversation-list{width:25%;background:#fff;border-right:1px solid #ddd;overflow-y:auto}.conversation-item{padding:12px;cursor:pointer;font-size:1rem;border-bottom:1px solid #eee;color:#333;transition:background-color .2s ease,color .2s ease}.conversation-item:hover{background-color:#f0f0f0;color:#007bff;text-decoration:underline}.conversation-item.active{background-color:#007bff;color:#fff;font-weight:700}.chat-box{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:16px}.message-log{flex:1;overflow-y:auto;padding:10px;border:1px solid #ddd;background-color:#f9f9f9;border-radius:8px}.message-bubble{max-width:70%;padding:8px;margin-bottom:10px;border-radius:8px;word-wrap:break-word;position:relative;font-size:.9rem}.message-bubble.sent{align-self:flex-end;background-color:#dcf8c6}.message-bubble.received{align-self:flex-start;background-color:#fff;border:1px solid #ddd}.message-text{margin:0}.message-timestamp{font-size:.75rem;color:#888;margin-top:5px;text-align:right}.message-input{display:flex;gap:10px;padding:10px 0;border-top:1px solid #ddd}.message-input input{flex:1;padding:10px;border:1px solid #ccc;border-radius:4px}.message-input input:focus{outline:none;border-color:#007bff}.message-input button{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .2s ease}.message-input button:hover{background-color:#0056b3}body{font-family:Arial,sans-serif;background-color:#e0f7fa;color:#333;margin:0;padding:0;text-align:center}.container{max-width:800px;margin:auto;padding:20px;background-color:#fff;border-radius:10px;box-shadow:0 4px 6px #0000001a}h1.font3{font-size:36px;margin-bottom:15px;color:#00796b}h1.font4{font-size:24px;margin-bottom:10px;color:#004d40}.search-form{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:20px}.search-input{padding:12px;font-size:16px;width:250px;border:1px solid #ccc;border-radius:5px;outline:none}.search-input:focus{border-color:#4caf50;box-shadow:0 0 5px #4caf5080}.search-button{padding:12px 25px;font-size:16px;cursor:pointer;background-color:#4caf50;color:#fff;border:none;border-radius:5px;transition:background-color .3s ease}.search-button:hover{background-color:#45a049}.right-align{text-align:center}.font2{font-size:20px;font-weight:700;margin-bottom:10px}.font1{font-size:16px;margin:10px 0;color:#555}#websocket-data,#database-content,#service-result{margin:20px 0;padding:15px;background-color:#f7f7f7;border-radius:5px;box-shadow:0 2px 4px #0000001a}footer{text-align:center;margin-top:30px;padding:10px;font-size:14px;background-color:#004d40;color:#fff;border-top:1px solid #ccc}footer a{color:#b2dfdb;text-decoration:none}footer a:hover{text-decoration:underline;color:#fff}@media (max-width: 600px){.container{padding:15px}h1.font3{font-size:28px}h1.font4{font-size:20px}.search-input{width:100%}.search-button{width:100%;padding:10px}}