.preview-sticky { height: calc(100vh - 160px); top: 70px; position: sticky; } .pdf-viewer-container { padding-top: 10px; background-color: gray; pdf-viewer { width: 100%; height: 100%; } } ::ng-deep .ng2-pdf-viewer-container .page { --page-margin: 0 auto 10px; --page-border: 0; } .btn-group .dropdown-toggle-split { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } .password-prompt { position: absolute; top: 30%; left: 30%; right: 30%; } textarea.rtl { direction: rtl; } .form-select { padding-right: 2.5em; } .input-group .btn-outline-secondary { border-color: var(--bs-border-color); } .btn-group .btn.order-0 { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: var(--bs-border-radius-sm); border-bottom-left-radius: var(--bs-border-radius-sm); } .btn-group .btn.order-3 { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: var(--bs-border-radius-sm); border-bottom-right-radius: var(--bs-border-radius-sm); } .preview-sticky img { width: 100%; height: 100%; object-fit: contain; } .thumb-preview { top: 0; left: calc(.5 * var(--bs-gutter-x)); height: calc(100vh - 160px); overflow: hidden; background-color: gray; padding: 10px 8px; // border width: calc(100% - var(--bs-gutter-x)); z-index: 1000; > div { mix-blend-mode: difference; } > img { filter: blur(1px); } }