Infinix Dicom - Viewer

.zoom-controls button background: white; border: none; width: 35px; height: 35px; border-radius: 5px; cursor: pointer; font-size: 18px; font-weight: bold; transition: background 0.2s;

.control-group label display: block; font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #333;

.header background: linear-gradient(135deg, #2c3e50, #3498db); color: white; padding: 20px 30px; text-align: center; Infinix Dicom Viewer

.sidebar width: 280px; background: #f8f9fa; border-right: 1px solid #e0e0e0; padding: 20px; overflow-y: auto;

.container max-width: 1400px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; .zoom-controls button background: white

.upload-btn:hover transform: translateY(-2px);

<div class="viewer-area"> <div class="canvas-container" id="canvasContainer"> <canvas id="dicomCanvas"></canvas> <div class="zoom-controls"> <button id="zoomInBtn">+</button> <button id="zoomOutBtn">-</button> </div> </div> <div class="status" id="status"> Ready to load DICOM files </div> </div> </div> </div> transition: background 0.2s

.controls margin-top: 20px;

.info-content font-size: 11px; color: #666; max-height: 200px; overflow-y: auto;

.main-content display: flex; flex-wrap: wrap; min-height: 600px;