:root,body,#root{height:100%}body{margin:0;font-family:Arial,sans-serif;background-color:#f4f4f9}#root{display:flex;flex-direction:column}.scans-viewer-container,.login-container{flex:1;min-height:0;position:relative}.viewer{width:400px;padding:20px;background-color:#fff;border-right:1px solid #ddd;overflow-y:auto;min-height:0}.scan-list{flex:1;padding:20px;background-color:#f9f9f9;display:flex;flex-direction:column;min-height:0}.scan-list h2{margin-top:0}.scan-items{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}.scan-item{padding:10px;margin-bottom:10px;background-color:#fff;border:1px solid #ddd;border-radius:5px;cursor:pointer;transition:background-color .3s}.scan-item.selected{background-color:#ccc}.scan-item.selected:hover{background-color:#bbb}.scan-item:hover{background-color:#f0f0f0}.details{display:flex;flex-direction:column}.closeBTN{display:none;background-color:transparent;border:1px solid #007bff;color:#007bff;padding:5px 10px;border-radius:4px;cursor:pointer;transition:background-color .3s;align-self:flex-end}.closeBTN:hover{background-color:#0000001a}.closeBTN:active{background-color:#0003}.chevronIcon{transform:scaleY(2)}.scan-image-preview{width:300px;height:300px;object-fit:contain;align-self:center}.scan-content{width:100%;max-width:600px;text-align:left}.scan-content h2{margin-top:0}.scan-content p{margin:5px 0}.scan-content ul{list-style-type:none;padding:0}.scan-content li{margin:5px 0}.image-pagination{display:flex;justify-content:center;margin-top:10px}.image-pagination button{width:30px;height:30px;margin:0 5px;border:none;border-radius:50%;background-color:#007bff;color:#fff;font-size:14px;cursor:pointer;transition:background-color .3s}.image-pagination button:hover{background-color:#0056b3}.image-pagination button.active{background-color:#0056b3;font-weight:700}.scans-viewer-container{display:flex}.login-container{display:flex;justify-content:center;align-items:center;background-color:#f4f4f9}.login-form{display:flex;flex-direction:column;align-items:center;background:#fff;padding:20px;border-radius:8px;box-shadow:0 4px 6px #0000001a}.login-form h2{margin-bottom:20px;font-size:24px;color:#333}.login-input{width:100%;padding:10px;margin-bottom:20px;border:1px solid #ddd;border-radius:4px;font-size:16px}.login-button{width:100%;padding:10px;margin:0;background-color:#007bff;color:#fff;border:none;border-radius:4px;font-size:16px;cursor:pointer;transition:background-color .3s}.login-button:hover{background-color:#0056b3}.header{padding:10px 20px;display:flex;justify-content:space-between;align-items:center;background-color:#007bff;color:#fff;font-size:20px;font-weight:700;box-shadow:0 2px 4px #0000001a}.header-title{margin:0}.signout-button{background-color:transparent;border:1px solid white;color:#fff;padding:5px 10px;border-radius:4px;cursor:pointer;transition:background-color .3s}.signout-button:hover{background-color:#fff3}@media screen and (max-width:53rem){.viewer{display:none;position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box}.viewer.open{display:block}.viewer .closeBTN{display:flex}}